/* ============ TOKENS ============ */
:root{
  --logo:url(/assets/images/logo-256.webp);
  --bg:#e8eef1; --bg2:#dce6eb;
  --ink:#0f2230; --ink2:#3d5563; --mute:#5f7788;
  --accent:#0b7db0; --accent-hi:#0f8fc9; --warm:#b86e00; --amber:#f0940d; --mint:#0f8a5a; --neg:#c94141;
  --glass:rgba(255,255,255,.52); --glass-strong:rgba(255,255,255,.78);
  --edge-a:rgba(255,255,255,.95); --edge-b:rgba(255,255,255,.25); --hi:rgba(255,255,255,.9);
  --line:rgba(15,50,80,.12);
  --shadow:0 30px 70px -30px rgba(15,70,110,.38), 0 2px 8px -2px rgba(15,70,110,.10);
  --blob1:rgba(43,179,232,.55); --blob2:rgba(240,148,13,.38); --blob3:rgba(15,143,201,.30);
  --nav:rgba(255,255,255,.62);
  --field:rgba(255,255,255,.7);
  --bezel:#0d1a24;
  color-scheme:light;
  --r-xl:30px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --f-display:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --f-ui:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --bg:#060d14; --bg2:#0b1622;
  --ink:#eef6fb; --ink2:#c1d3e0; --mute:#8aa1b0;
  --accent:#2bb3e8; --accent-hi:#1fa5dc; --warm:#f5a623; --mint:#3ddb9a; --neg:#ff7a7a;
  --glass:rgba(255,255,255,.055); --glass-strong:rgba(22,40,56,.72);
  --edge-a:rgba(255,255,255,.34); --edge-b:rgba(255,255,255,.07); --hi:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.10);
  --shadow:0 34px 80px -34px rgba(0,0,0,.85), 0 2px 10px -2px rgba(0,0,0,.4);
  --blob1:rgba(43,179,232,.34); --blob2:rgba(240,148,13,.20); --blob3:rgba(15,143,201,.28);
  --nav:rgba(8,18,28,.78);
  --field:rgba(255,255,255,.06);
  color-scheme:dark;
}
}
:root[data-theme="dark"]{
  --bg:#060d14; --bg2:#0b1622;
  --ink:#eef6fb; --ink2:#c1d3e0; --mute:#8aa1b0;
  --accent:#2bb3e8; --accent-hi:#1fa5dc; --warm:#f5a623; --mint:#3ddb9a; --neg:#ff7a7a;
  --glass:rgba(255,255,255,.055); --glass-strong:rgba(22,40,56,.72);
  --edge-a:rgba(255,255,255,.34); --edge-b:rgba(255,255,255,.07); --hi:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.10);
  --shadow:0 34px 80px -34px rgba(0,0,0,.85), 0 2px 10px -2px rgba(0,0,0,.4);
  --blob1:rgba(43,179,232,.34); --blob2:rgba(240,148,13,.20); --blob3:rgba(15,143,201,.28);
  --nav:rgba(8,18,28,.78);
  --field:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-ui);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:.7em 1.1em;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--f-display);font-weight:380;letter-spacing:-.022em;font-variation-settings:"SOFT" 70;text-wrap:balance}
h1{font-size:clamp(2.7rem,5.7vw,5.1rem);line-height:1.02}
h2{font-size:clamp(2.05rem,3.7vw,3.3rem);line-height:1.06}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink2);max-width:46ch}
.muted{color:var(--mute)}

/* ============ AURORA BACKGROUND ============ */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg) 60%)}
.aurora i{position:absolute;border-radius:50%;width:70vmax;height:70vmax;will-change:transform}
.aurora i:nth-child(1){background:radial-gradient(circle,var(--blob1),transparent 62%);left:-22vmax;top:-26vmax;animation:drift1 34s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:radial-gradient(circle,var(--blob2),transparent 62%);right:-26vmax;top:8vmax;animation:drift2 40s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:radial-gradient(circle,var(--blob3),transparent 62%);left:18vmax;bottom:-40vmax;animation:drift3 46s ease-in-out infinite alternate}
.aurora::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:34px 34px;
  mask-image:radial-gradient(70% 55% at 50% 22%,#000,transparent);-webkit-mask-image:radial-gradient(70% 55% at 50% 22%,#000,transparent)}
@keyframes drift1{to{transform:translate(14vmax,10vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vmax,12vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(12vmax,-10vmax) scale(1.1)}}

/* ============ GLASS ============ */
.glass{
  position:relative;background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--hi);
  border-radius:var(--r-xl);
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--edge-a),var(--edge-b) 38%,transparent 60%,var(--edge-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 60%);
}
.spot:hover::before{opacity:1}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.4em;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.98rem;text-decoration:none;line-height:1;white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(180deg,#ffb23d,#f0940d 55%,#df7c00);color:#2a1700;
  box-shadow:0 10px 28px -8px rgba(240,148,13,.65),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-primary:hover{box-shadow:0 14px 34px -8px rgba(240,148,13,.8),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-glass{background:var(--glass);border-color:var(--edge-b);color:var(--ink);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 var(--hi)}
.btn-glass:hover{background:var(--glass-strong)}
.btn-sm{padding:.7em 1.15em;font-size:.9rem}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0;pointer-events:none}
.nav-pill{
  pointer-events:auto;width:min(1120px,100%);margin-inline:auto;display:flex;align-items:center;gap:20px;
  padding:9px 10px 9px 18px;border-radius:999px;background:var(--nav);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--hi);position:relative;
}
.nav-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--edge-a),var(--edge-b) 40%,transparent 65%,var(--edge-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.logo{width:30px;height:30px;background:var(--logo) center/contain no-repeat;flex:none}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:.5em .95em;border-radius:999px;text-decoration:none;font-size:.94rem;font-weight:500;color:var(--ink2);transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(127,160,180,.16);color:var(--ink)}
.nav-end{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:transparent;border:1px solid transparent;color:var(--ink2)}
.icon-btn:hover{background:rgba(127,160,180,.18);color:var(--ink)}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
.menu-btn{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .moon{display:block}
}
@media (max-width:900px){
  .nav-links{position:absolute;left:0;right:0;top:calc(100% + 10px);flex-direction:column;padding:10px;border-radius:var(--r-lg);
    background:var(--nav);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
    box-shadow:var(--shadow);display:none;margin:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:.8em 1em;font-size:1rem}
  .menu-btn{display:grid}
  .nav-end{margin-left:auto}
  .nav-end .btn{display:none}
}

/* ============ SECTIONS ============ */
section{padding:clamp(52px,7vw,96px) 0;position:relative}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:30px 60px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lede{justify-self:end}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}.sec-head .lede{justify-self:start}}

/* ============ FAQ ============ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:start}
.faq-list{display:grid;gap:12px}
details.q{border-radius:var(--r-lg);padding:0}
details.q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;font-weight:600;font-size:1.06rem;border-radius:var(--r-lg)}
details.q summary::-webkit-details-marker{display:none}
details.q summary .plus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(127,160,180,.18);flex:none;transition:transform .35s,background .3s}
details.q[open] summary .plus{transform:rotate(45deg);background:var(--amber);color:#2a1700}
details.q .a{padding:0 26px 24px;color:var(--ink2);max-width:62ch;animation:fade .4s}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:900px){.faq{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
footer{padding:50px 0 calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.foot p{color:var(--mute);font-size:.94rem;max-width:34ch;margin-top:12px}
.foot h2{margin:0 0 12px;font-family:var(--f-ui);font-size:.95rem;font-weight:600;letter-spacing:0;font-variation-settings:normal}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none;color:var(--ink2);font-size:.94rem}
.foot .brand{font-size:1.35rem}
.foot a:hover{color:var(--accent);text-decoration:underline}
.legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:10px;color:var(--mute);font-size:.82rem}
.legal p{max-width:100ch}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:span 2}}

/* ============ DIALOG ============ */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:min(440px,92vw);width:100%;margin:auto}
dialog::backdrop{background:rgba(4,12,20,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog .box{padding:30px;display:grid;gap:18px;background:var(--glass-strong)}
dialog ol{margin:0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:s}
dialog li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;color:var(--ink2)}
dialog li::before{content:counter(s);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-hi);color:#fff;font-weight:700;font-size:.9rem}
dialog[open] .box{animation:pop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}}

/* ============ MOTION PREFERENCES ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .enter,.chip-a,.chip-b,.chip-c,.stage .phone{opacity:1!important}
  .track{animation:none!important}
  .rail{overflow-x:auto}
  .toast:first-child{opacity:1}
  .spark path,.chart .ln{stroke-dashoffset:0}
  .chart .area{opacity:1}
}

/* ============ SHARED UTILITIES ============ */
.h3{font-family:var(--f-ui);font-size:1.2rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;font-variation-settings:normal}
.h4{font-family:var(--f-ui);font-size:1.02rem;font-weight:600;line-height:1.3;margin:0;font-variation-settings:normal}
.small{font-size:.88rem}.fine{font-size:.82rem;color:var(--mute);max-width:70ch;margin-top:14px}
.center{text-align:center;justify-items:center}.mb{margin-bottom:16px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-cta.center{justify-content:center}
.icon-btn.bordered{width:40px;height:40px;flex:none;line-height:1;border:1px solid var(--line);font-weight:700;text-decoration:none;font-size:.9rem;background:var(--field)}
.pad{padding:22px 24px}
.wrap.narrow{width:min(860px,100% - 40px)}.wrap.read{width:min(780px,100% - 40px)}
dialog .box h2{margin:0}dialog .row{margin-top:4px}
@media print{.nav,.aurora,footer .foot,.skip{display:none!important}body{background:#fff;color:#000}}
[hidden]{display:none!important}
