/* ============ CSS VARIABLES & RESET ============ */
:root{
  --bg: #0b0d10;
  --bg-elev: #0f1216;
  --text: #e6e9ef;
  --muted: #a8b0bf;
  --brand1: #6ee7ff;
  --brand2: #7c5cff;
  --accent: #8aa4ff;
  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --ring: rgba(124,92,255,0.3);
}
/* Light theme */
[data-theme="light"]{
  --bg:#f7f8fb;
  --bg-elev:#ffffff;
  --text:#0b0d10;
  --muted:#4b5565;
  --card: rgba(0,0,0,0.03);
  --border: rgba(0,0,0,0.08);
  --ring: rgba(124,92,255,0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1000px 600px at 70% -200px, rgba(140,120,255,.25), transparent 60%),
              radial-gradient(900px 500px at -10% -150px, rgba(110,231,255,.18), transparent 60%),
              var(--bg);
}

/* Utilities */
.container{width:min(1100px, 92%); margin-inline:auto}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.1rem; border-radius:999px; font-weight:600; text-decoration:none;
  border:1px solid var(--border); color:var(--text); transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent}
.btn-gradient{background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:white; border:0; box-shadow:0 10px 25px rgba(124,92,255,.25)}
.eyebrow{color:var(--accent); font-weight:600; letter-spacing:.02em; margin-bottom:.5rem}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in oklab, var(--bg) 92%, transparent)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--border)}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--text); font-weight:800; letter-spacing:.2px}
.brand.small span{font-weight:700; font-size:.95rem}
.brand-text{font-size:1.05rem}
.actions{display:flex; align-items:center; gap:.8rem}
.theme-toggle{background:var(--bg-elev); border:1px solid var(--border); border-radius:999px; padding:.55rem .65rem; cursor:pointer; color:var(--text); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.theme-toggle:hover{box-shadow:0 8px 24px rgba(0,0,0,.35)}

.main-nav{display:flex; align-items:center}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer; padding:.4rem; margin-left:.5rem}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; transition:.2s}
.nav-links{display:flex; list-style:none; gap:1.2rem; padding:0; margin:0}
.nav-links a{color:var(--text); text-decoration:none; font-weight:500; opacity:.9}
.nav-links a:hover{opacity:1; color:var(--accent)}

/* Mobile menu */
@media (max-width: 900px){
  .nav-toggle{display:block}
  .nav-links{
    position: fixed; inset: 64px 0 auto auto; /* top, right 0 */
    background: var(--bg-elev); border-top:1px solid var(--border); border-left:1px solid var(--border);
    width: min(280px, 86%); height: auto; padding: 1rem; border-radius: 12px 0 0 12px;
    box-shadow: -10px 12px 40px rgba(0,0,0,.35);
    display: none; flex-direction: column; gap:.6rem;
  }
  .nav-links.open{display:flex}
}

/* Hero */
.hero{padding: 6rem 0 3rem}
.hero-inner{display:grid; gap:1.2rem; text-align:center}
.hero h1{font-size: clamp(2rem, 1.2rem + 3vw, 3rem); line-height:1.1; margin: .1rem 0}
.lead{max-width: 800px; margin: 0 auto; color: var(--muted)}
.hero-cta{display:flex; gap:.75rem; justify-content:center; margin-top:.5rem}

.stats{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.75rem; margin-top:1.4rem}
.stat{background:var(--card); border:1px solid var(--border); border-radius:12px; padding: .9rem .8rem; text-align:center}
.stat-value{font-weight:800; font-size:1.2rem}
.stat-label{color:var(--muted); font-size:.9rem}

@media (max-width:800px){
  .stats{grid-template-columns: repeat(2,1fr)}
}

/* Sections */
.section{padding: 4.5rem 0}
.section.alt{background: color-mix(in oklab, var(--bg) 96%, #000 4%)}
.section h2{font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); text-align:center; margin:0 0 .75rem}
.section-lead{text-align:center; color:var(--muted); margin-bottom:2rem}

/* Cards & grids */
.card{background: var(--card); border:1px solid var(--border); border-radius:16px; padding:1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,.15)}
.card .badge{display:inline-block; background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#fff; font-size:.75rem;
  padding:.25rem .55rem; border-radius:999px; margin-bottom:.35rem}
.card.bp h3{margin-top:.25rem}

.service-grid{display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:1rem}
.card-icon{font-size:1.4rem}
.service-grid h3{margin:.35rem 0 .35rem}
.service-grid p{color:var(--muted)}
@media (max-width: 1000px){ .service-grid{grid-template-columns: repeat(3,1fr)} }
@media (max-width: 640px){ .service-grid{grid-template-columns: repeat(2,1fr)} }

.feature-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; margin-top:1.2rem}
.feature{background: var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem 1.2rem}
.feature h3{margin:.2rem 0 .4rem}
.feature ul{margin:0; padding-left:1rem}
.feature li{color:var(--muted); margin:.35rem 0}
@media (max-width: 900px){ .feature-grid{grid-template-columns: 1fr} }

.blueprints{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem}
@media (max-width: 900px){ .blueprints{grid-template-columns: 1fr} }

/* Pricing */
.pricing{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem}
.plan .price{display:flex; align-items:baseline; gap:.5rem; margin:.4rem 0 1rem}
.plan .amount{font-weight:800; font-size:1.6rem}
.plan .unit{color:var(--muted)}
.plan .features{margin:0 0 1rem; padding-left:1rem}
.plan .features li{margin:.35rem 0; color:var(--muted)}
.plan .flag{font-size:.75rem; font-weight:700; color:white; background:linear-gradient(135deg, var(--brand1), var(--brand2)); padding:.2rem .5rem; border-radius:999px; display:inline-block; margin-bottom:.35rem}
.plan .flag.muted{background:transparent; color:var(--muted); border:1px dashed var(--border)}
.plan.featured{outline:2px solid color-mix(in oklab, var(--brand2) 60%, transparent); box-shadow: 0 16px 40px rgba(124,92,255,.25)}
@media (max-width: 900px){ .pricing{grid-template-columns: 1fr} }

/* Contact */
.contact-form{display:grid; gap:1rem; max-width:800px; margin: 0 auto 1rem}
.form-row{display:grid; gap:1rem}
.form-row.two{grid-template-columns: repeat(2, minmax(0,1fr))}
.field label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:.25rem}
.field input, .field textarea{
  width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text); outline:none;
}
.field input:focus, .field textarea:focus{box-shadow: 0 0 0 4px var(--ring); border-color: color-mix(in oklab, var(--brand2) 55%, var(--border))}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chips label{display:inline-flex; align-items:center; gap:.35rem; background:var(--card); border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px; cursor:pointer}
.form-actions{display:flex; align-items:center; gap:.8rem}
#form-status{color:var(--accent)}

.disclaimer{color:var(--muted); text-align:center; font-size:.9rem}
.why{max-width:800px; margin:1.5rem auto 0}
.why ul{margin:.6rem 0 0; padding-left:1.2rem}
.why li{color:var(--muted); margin:.35rem 0}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:1.6rem 0; background: color-mix(in oklab, var(--bg) 96%, #000 4%)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
@media (max-width:700px){ .form-row.two{grid-template-columns:1fr} .footer-inner{flex-direction:column} }

/* Remove duplicate-left menu bug: ensure only ONE nav exists and mobile is hidden by default on desktop */