/* CHARLTECH — Style global */
:root{
  --bg: #0b0f17;
  --card: #0f1524;
  --text: #e6eef8;
  --muted: #a7b3c5;
  --brand1:#00E5FF;
  --brand2:#7C4DFF;
  --brand3:#00FFA3;
  --accent: #60f;
  --ring: rgba(124,77,255,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius: 16px;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; line-height:1.6; }
a{ color:#b3c7ff; text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* Header */
.header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(180deg, rgba(11,15,23,.9), rgba(11,15,23,.5));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:36px; height:36px; }
.brand span{ font-weight:800; letter-spacing:.5px; background:linear-gradient(90deg,var(--brand1),var(--brand2),var(--brand3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.menu{ display:flex; gap:18px; }
.menu a{ padding:10px 14px; border-radius:12px; transition:.2s ease; }
.menu a.active, .menu a:hover{ background:rgba(255,255,255,.06); }

/* Hero */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 72px; 
  background: radial-gradient(1200px 500px at 70% -10%, rgba(124,77,255,.22), transparent 60%),
             radial-gradient(1200px 500px at -10% 60%, rgba(0,229,255,.18), transparent 60%);
}
.hero-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
}
h1{ font-size:clamp(32px, 4vw, 54px); line-height:1.1; margin:0 0 16px; letter-spacing:.5px; }
.muted{ color:var(--muted); }
.cta{ display:flex; gap:14px; margin-top:22px; }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:700;
  background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#051018; border:0; cursor:pointer; box-shadow:var(--shadow); transition:transform .08s ease-in-out;
}
.btn:hover{ transform:translateY(-1px); }
.btn.secondary{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.14); box-shadow:none; }

.cards{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); padding:20px; border-radius:var(--radius);
  box-shadow:var(--shadow); min-height:160px;
}
.card h3{ margin:0 0 8px; font-size:20px; }
.card p{ margin:0; color:var(--muted); }

/* Sections */
.section{ padding:72px 0; }
.section h2{ font-size:32px; margin:0 0 16px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.list li{ display:flex; gap:10px; align-items:flex-start; }
.badge{ font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(124,77,255,.18); border:1px solid rgba(124,77,255,.4); color:#d9ccff; }

/* Footer */
.footer{ padding:24px 0 60px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); }
.footer .cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:18px; }
.footer a{ color:#cdd8ff; }

/* Forms */
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; background:#0b1222; color:var(--text);
  border:1px solid rgba(255,255,255,.12); outline:none; transition:border .15s;
}
input:focus, textarea:focus{ border-color:var(--ring); box-shadow:0 0 0 3px var(--ring); }
label{ font-size:14px; color:#c7d3e6; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
textarea{ min-height:140px; resize:vertical; }
.form-actions{ display:flex; gap:12px; align-items:center; }

/* Utilities */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px;}
.kpi{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; }
.kpi .value{ font-size:28px; font-weight:800; }
.kpi .label{ color:var(--muted); font-size:13px; }

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .footer .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .menu{ display:none; }
  .kpis{ grid-template-columns:1fr; }
}