/* FXaeo — main stylesheet
   Ported from the original single-file index.html.
   Bug #2 fix applied below: .hero-body (desktop) now centers using the
   same max-width:var(--max); margin:0 auto math as .wrap, instead of
   max-width:none; margin:0 — see the @media(min-width:760px) block. */

:root{
  --bg:#050505;
  --fg:#e5e5e5;
  --white:#ffffff;
  --black:#000000;
  --border:#262626;
  --border-soft:#1a1a1a;
  --card:#0a0a0a;
  --muted:#1a1a1a;
  --muted-fg:#6b7280;
  --muted-fg-2:#8a8a8a;
  --green:#3fb950;
  --red:#f85149;
  --amber:#d29922;
  --max:1120px;
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Geist","Geist Fallback",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;}
a{color:inherit;text-decoration:none;}
.mono{
  font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace;
}
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:24px;
}
.eyebrow{
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-fg-2);
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;
  background:var(--white);
  display:inline-block;
}
h1,h2,h3{
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:1.05;
  margin:0;
  color:var(--white);
}
p{margin:0;}
.btn{
  font-family:"Geist Mono",ui-monospace,monospace;
  text-transform:uppercase;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border:1px solid var(--border);
  white-space:nowrap;
  cursor:pointer;
  transition:opacity .15s ease, background .15s ease;
}
.btn-primary{background:var(--white);color:var(--black);border-color:var(--white);}
.btn-primary:hover{opacity:.85;}
.btn-outline{background:transparent;color:var(--fg);border-color:var(--border);}
.btn-outline:hover{border-color:#454545;background:rgba(255,255,255,.03);}
.btn-block{width:100%;}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(5,5,5,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex;align-items:center;}
.brand-logo{height:26px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--fg);}
.nav-links a{color:var(--muted-fg-2);transition:color .15s ease;}
.nav-links a:hover{color:var(--white);}
.nav-right{display:flex;align-items:center;gap:14px;}
.burger{display:none;background:none;border:1px solid var(--border);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:16px;height:1.5px;background:var(--white);position:relative;transition:.2s;}
.burger span::before{position:absolute;top:-5px;}
.burger span::after{position:absolute;top:5px;}
.mobile-panel{display:none;border-bottom:1px solid var(--border);background:var(--bg);}
.mobile-panel.open{display:block;}
.mobile-panel .wrap{padding-block:16px;display:flex;flex-direction:column;gap:16px;}
.mobile-panel a{font-size:15px;color:var(--fg);}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--border);position:relative;}
.hero-visual{position:relative;width:100%;aspect-ratio:2.1/1;max-height:340px;overflow:hidden;background:#000;border-bottom:1px solid var(--border);}
.hero-visual canvas{display:block;width:100%;height:100%;}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.25), transparent 45%, rgba(0,0,0,.6) 100%);pointer-events:none;}
.hero-body{padding:36px 24px 40px;max-width:var(--max);margin:0 auto;}
.hero-body h1{font-size:clamp(2.1rem,1.15rem + 3.2vw,3.6rem);max-width:16ch;}
.hero-bottom{margin-top:24px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;}
.hero-sub{margin-top:20px;max-width:46ch;font-size:18px;line-height:1.55;color:rgba(255,255,255,.7);}
.hero-note{margin-top:12px;font-family:"Geist Mono",monospace;font-size:12px;color:var(--muted-fg);letter-spacing:.02em;}

/* ---------- generic section ---------- */
section{border-bottom:1px solid var(--border);}
.section-pad{padding:72px 24px;}
.section-head{max-width:640px;}
.section-head h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);margin-top:14px;}
.section-head p{margin-top:16px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.62);}

/* ---------- platform grid ---------- */
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);}
.grid-6 .tile{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:34px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:130px;
  text-align:center;
}
.grid-6 .tile:nth-child(3n){border-right:none;}
.tile .logotype{font-size:19px;color:#d4d4d4;font-weight:500;letter-spacing:-.01em;}
.tile .cap{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--muted-fg);}

/* ---------- methodology ---------- */
.feat{
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr;
}
.feat-row{padding:48px 24px;border-bottom:1px solid var(--border);}
.feat-row:last-child{border-bottom:none;}
.feat-row h3{font-size:24px;color:var(--white);}
.feat-row p.desc{margin-top:10px;color:rgba(255,255,255,.6);font-size:15.5px;line-height:1.55;max-width:46ch;}
.mockup{
  margin-top:24px;
  background:var(--card);
  border:1px solid var(--border);
  font-family:"Geist Mono",monospace;
  font-size:13px;
}
.mockup .mh{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
  color:var(--muted-fg-2);letter-spacing:.04em;
}
.mockup .mh .dot{width:7px;height:7px;background:var(--green);border-radius:50%;display:inline-block;margin-right:8px;}
.mockup .status{color:var(--green);}
.mockup .mb{padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.mockup .kv{display:flex;gap:14px;}
.mockup .kv .k{color:var(--muted-fg);width:56px;flex:none;}
.mockup .kv .v{color:#d4d4d4;}
.split2{display:grid;grid-template-columns:1fr 1fr;}
.split2 .col{padding:16px;}
.split2 .col:first-child{border-right:1px solid var(--border);}
.split2 .tag{font-size:11px;letter-spacing:.1em;font-weight:700;margin-bottom:10px;}
.split2 .tag.allow{color:var(--green);}
.split2 .tag.flag{color:var(--red);}
.split2 .item{color:#c9c9c9;padding:4px 0;}
.split2 .item.dim{color:var(--muted-fg);}
.addr-row{display:flex;flex-wrap:wrap;gap:10px;padding:16px;}
.addr-chip{border:1px solid var(--border);padding:8px 12px;font-size:12px;color:#d4d4d4;}
.addr-chip b{color:var(--white);}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;padding:16px;}
.badge{border:1px solid var(--border);padding:6px 10px;font-size:11px;color:#c9c9c9;display:flex;align-items:center;gap:6px;}
.badge .ok{color:var(--green);}

/* ---------- modes ---------- */
.modes{border-top:1px solid var(--border);display:grid;grid-template-columns:1fr;}
.mode{padding:40px 24px;border-bottom:1px solid var(--border);}
.mode:last-child{border-bottom:none;}
.mode .eyebrow{margin-bottom:12px;}
.mode h3{font-size:21px;color:var(--white);}
.mode p.desc{margin-top:8px;color:rgba(255,255,255,.6);font-size:15px;line-height:1.5;}
.chat{margin-top:20px;border:1px solid var(--border);background:var(--card);padding:16px;font-size:13.5px;display:flex;flex-direction:column;gap:12px;}
.chat .line{display:flex;gap:10px;}
.chat .who{font-family:"Geist Mono",monospace;font-size:11px;color:var(--muted-fg);width:44px;flex:none;padding-top:2px;text-transform:uppercase;}
.chat .msg{color:#d9d9d9;line-height:1.5;}
.chat .msg.mono{font-family:"Geist Mono",monospace;font-size:12.5px;color:var(--muted-fg-2);}
.notif{margin-top:20px;border:1px solid var(--border);background:var(--card);padding:16px;}
.notif .nt{display:flex;justify-content:space-between;font-family:"Geist Mono",monospace;font-size:11px;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.06em;}
.notif .nb{margin-top:10px;font-size:14.5px;color:#e5e5e5;line-height:1.5;}
.notif .nf{margin-top:10px;font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--muted-fg-2);}

/* ---------- quickstart ---------- */
.qs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;}
.tabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--border);border-bottom:none;margin-top:32px;}
.tab-btn{
  font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 16px;border-right:1px solid var(--border);background:transparent;color:var(--muted-fg);
  cursor:pointer;flex:1 1 auto;
}
.tab-btn:last-child{border-right:none;}
.tab-btn.active{color:var(--white);background:var(--card);}
.code-block{
  border:1px solid var(--border);
  background:var(--card);
  padding:22px 20px;
  font-family:"Geist Mono",monospace;
  font-size:12.5px;
  line-height:1.75;
  overflow-x:auto;
  white-space:pre;
  color:#c9c9c9;
}
.code-block .cmt{color:var(--muted-fg);}
.code-block .cmd{color:#e5e5e5;}
.code-block .flag{color:#79c0ff;}
.code-block .str{color:var(--green);}

/* ---------- compare ---------- */
.compare{border-top:1px solid var(--border);}
.crow{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
.crow:last-child{border-bottom:none;}
.crow.highlight{background:var(--card);}
.crow .name{font-size:16px;color:var(--fg);display:flex;align-items:center;gap:10px;}
.crow .idx{font-family:"Geist Mono",monospace;color:var(--muted-fg);font-size:12px;width:22px;}
.crow.highlight .name{color:var(--white);font-weight:500;}
.ctag{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.08em;padding:5px 10px;border:1px solid var(--border);}
.ctag.seo{color:var(--muted-fg-2);}
.ctag.gen{color:var(--amber);border-color:#3a2f16;}
.ctag.native{color:var(--green);border-color:#14391b;}

/* ---------- credibility ---------- */
.cred{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;}
.cred-body p{color:rgba(255,255,255,.68);font-size:16px;line-height:1.7;}
.cred-body p + p{margin-top:16px;}
.cred-roles{display:flex;flex-direction:column;border:1px solid var(--border);}
.role{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border);}
.role:last-child{border-bottom:none;}
.role .co{color:var(--white);font-size:15px;}
.role .ti{font-family:"Geist Mono",monospace;font-size:11px;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.06em;}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;gap:18px;
  padding:22px 0;font-size:16px;color:var(--fg);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .num{font-family:"Geist Mono",monospace;color:var(--muted-fg);font-size:13px;flex:none;}
.faq-item summary .plus{margin-left:auto;font-family:"Geist Mono",monospace;color:var(--muted-fg);font-size:16px;}
.faq-item[open] summary .plus{color:var(--white);}
.faq-item .a{padding:0 0 24px 40px;color:rgba(255,255,255,.62);font-size:15px;line-height:1.65;max-width:64ch;}

/* ---------- final cta ---------- */
.final{text-align:center;padding:88px 24px;}
.final h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);max-width:18ch;margin:0 auto;}
.final .hero-cta{justify-content:center;margin-top:30px;}
.final .hero-note{margin-top:16px;}

/* ---------- footer ---------- */
footer{padding:56px 24px 28px;}
.fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 20px;}
.fcol h4{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg);margin:0 0 16px;}
.fcol a{display:block;color:#a3a3a3;font-size:14px;padding:6px 0;}
.fcol a:hover{color:var(--white);}
.fbottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;}
.fbottom .brand{font-size:15px;}
.fbottom .tag{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--muted-fg);}

@media(min-width:760px){
  .nav-links{display:flex;}
  .burger{display:none !important;}
  .hero-visual{
    /* Desktop-only: the hero-body below is absolutely positioned to
       cover this box exactly, so its height must always comfortably
       fit the heading + CTA + subhead + note, at every desktop width —
       not just the extremes. Verified with Playwright at 760/800/900/
       1024/1150/1280/1440/1680/1999/2560px: this clamp keeps ~44px of
       clearance under the note text at all of them. A plain aspect-ratio
       here (as mobile still uses) shrinks faster than the text does on
       medium desktop widths and was overflowing into the next section. */
    aspect-ratio:auto;
    height:clamp(420px, 40vw, 480px);
    max-height:none;
  }
  .hero-body{
    /* BUG #2 FIX: was max-width:none;margin:0;padding:56px 40px 60px —
       that pinned the text 40px from the true viewport edge instead of
       matching .wrap's centered container. inset:0 already gives
       left:0/right:0/top:0/bottom:0; adding max-width:var(--max) and
       margin:0 auto centers this box exactly like .wrap centers normal
       flow content, so the hero heading now lines up with the nav logo
       and every other section on any screen width. */
    position:absolute;inset:0;z-index:5;
    display:flex;flex-direction:column;
    padding:44px 24px 44px;
    max-width:var(--max);margin:0 auto;
    pointer-events:none;
  }
  .hero-body > *{pointer-events:auto;}
  .hero-body h1{max-width:19ch;}
  .hero-bottom{margin-top:auto;max-width:640px;}
  .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:64px 24px;}
  .modes{grid-template-columns:repeat(3,1fr);}
  .mode{border-bottom:none;}
  .mode:not(:last-child){border-right:1px solid var(--border);}
  .grid-6{grid-template-columns:repeat(6,1fr);}
  .grid-6 .tile:nth-child(3n){border-right:1px solid var(--border);}
  .grid-6 .tile:nth-child(6n){border-right:none;}
  .grid-6 .tile:nth-child(n+4){border-bottom:none;}
  .fcols{grid-template-columns:repeat(4,1fr);}
  .cred{grid-template-columns:1.1fr .9fr;}
}
@media(max-width:759px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .cred{grid-template-columns:1fr;gap:32px;}
  .qs-head .btn{width:100%;}
}
@media(max-width:520px){
  .fcols{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(2,1fr);}
  .grid-6 .tile:nth-child(2n){border-right:none;}
  .grid-6 .tile:nth-child(odd){border-right:1px solid var(--border);}
}