*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0a0a0b;--panel:#141416;--panel2:#1c1c1f;
  --blue:#6BB8D4;--blue-deep:#3E93B5;
  --text:#f5f5f4;--muted:#98989d;--faint:#6e6e73;
  --border:rgba(255,255,255,0.09);
  --bf:'DM Sans',-apple-system,sans-serif;--lf:'Bebas Neue',sans-serif;
  --r:24px;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:var(--bf);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:100;background:rgba(10,10,11,0.8);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border);padding:0 6%;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:var(--lf);font-size:24px;letter-spacing:.04em}
.logo span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-size:13px;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-cta{background:var(--blue);color:#0a0a0b;font-weight:600;font-size:13px;padding:8px 20px;border-radius:980px;transition:background .2s;white-space:nowrap}
.nav-cta:hover{background:var(--blue-light,#8DCCE4)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);margin:4px 0;border-radius:2px}

/* ── TYPE ── */
h1,h2.d{font-weight:700;letter-spacing:-0.03em;line-height:1.04}
h1{font-size:clamp(42px,6.5vw,84px)}
h2.d{font-size:clamp(32px,4.5vw,56px)}
.sub{font-size:clamp(17px,2vw,21px);color:var(--muted);font-weight:400;line-height:1.5}
.accent{color:var(--blue)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}

/* ── LAYOUT ── */
.wrap{max-width:1020px;margin:0 auto;padding:0 6%}
.narrow{max-width:760px;margin:0 auto}
section{padding:110px 0}
.center{text-align:center}

/* ── BUTTONS ── */
.btn{display:inline-block;background:var(--blue);color:#0a0a0b;font-weight:600;font-size:15px;padding:14px 32px;border-radius:980px;transition:transform .2s,background .2s}
.btn:hover{background:#8DCCE4;transform:scale(1.02)}
.btn-quiet{display:inline-block;color:var(--blue);font-weight:500;font-size:15px;padding:14px 8px;transition:opacity .2s}
.btn-quiet:hover{opacity:.7}
.btn-quiet::after{content:' →'}

/* ── CARDS ── */
.card{background:var(--panel);border-radius:var(--r);padding:44px 40px;transition:transform .3s ease,background .3s}
.card:hover{background:var(--panel2)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── HERO SYSTEM LINE (signature) ── */
.sysline{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:44px}
.sys-chip{font-size:14px;font-weight:500;color:var(--muted);padding:9px 20px;border:1px solid var(--border);border-radius:980px;transition:color .3s,border-color .3s}
.sys-chip:hover{color:var(--blue);border-color:var(--blue)}
.sys-arrow{color:var(--faint);font-size:14px}
.sys-chip.result{color:#0a0a0b;background:var(--blue);border-color:var(--blue);font-weight:600}

/* ── STAT ROW ── */
.stats{display:flex;justify-content:center;gap:64px;flex-wrap:wrap}
.stat{text-align:center}
.stat-n{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-0.03em;color:var(--blue)}
.stat-l{font-size:13px;color:var(--muted);margin-top:4px}

/* ── FEATURE ROWS ── */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.frow p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:14px}
.flist{list-style:none}
.flist li{padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--muted);display:flex;gap:12px;align-items:baseline}
.flist li:last-child{border-bottom:none}
.flist li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;position:relative;top:-2px}
.flist strong{color:var(--text);font-weight:600}

/* ── FAQ (Apple-style accordions) ── */
details{border-bottom:1px solid var(--border);padding:22px 0}
details summary{font-size:16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';font-size:22px;font-weight:300;color:var(--blue);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:12px;font-size:15px;color:var(--muted);line-height:1.7}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:56px 6% 40px;font-size:13px}
.f-grid{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr 1fr;gap:32px}
.f-col-t{font-weight:600;color:var(--text);margin-bottom:14px;font-size:13px}
.f-col ul{list-style:none}
.f-col li{margin-bottom:9px}
.f-col a{color:var(--muted);transition:color .2s}
.f-col a:hover{color:var(--blue)}
.f-tag{color:var(--faint);line-height:1.7;margin-top:8px}
.f-bottom{max-width:1020px;margin:36px auto 0;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--faint);font-size:12px}

/* ── SEO text block ── */
.seo-note{font-size:14px;color:var(--faint);line-height:1.75;max-width:760px;margin:0 auto}

@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr;gap:40px}
  .f-grid{grid-template-columns:1fr 1fr}
  section{padding:80px 0}
  .stats{gap:36px}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:rgba(10,10,11,0.97);backdrop-filter:blur(20px);padding:24px 6%;gap:20px;border-bottom:1px solid var(--border)}
  .nav-toggle{display:block}
}
@media(max-width:600px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .nav-cta{display:none}
  .f-grid{grid-template-columns:1fr}
  .card{padding:32px 26px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}