/* BrainExec — landing system. Light, scannable. Built on the existing site palette. */
:root{
  --ink:#16150F; --ink-2:#1C1A14; --ink-3:#232017;
  --gold:#F4C400; --gold-2:#FFD84D;
  --cream:#F6E9B0; --gray:#9A9788;
  --line:#322f25; --line-2:#3d3a2c;
  --maxw:1180px;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img,svg{display:block}

/* ── eyebrow / labels ── */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gray); margin:0 0 18px;
}

/* ── header ── */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px clamp(18px,4vw,40px);
  background:rgba(22,21,15,0.72); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.hdr .brand{display:flex; align-items:center; gap:10px}
.hdr .brand svg{height:40px; width:auto}
.hdr-right{display:flex; align-items:center; gap:14px}

/* lang toggle */
.lang{display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden}
.lang button{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; padding:6px 12px;
  background:transparent; color:var(--gray); border:0; cursor:pointer; transition:.18s;
}
.lang button.active{background:var(--cream); color:var(--ink)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:0.01em;
  padding:13px 22px; border-radius:999px; border:1px solid transparent; transition:.2s; white-space:nowrap;
}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-gold:hover{background:var(--gold-2); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--cream)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-lg{font-size:19px; padding:18px 32px}

/* ── layout ── */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:clamp(18px,4vw,40px); padding-right:clamp(18px,4vw,40px)}
section{position:relative}
.divider{border-top:1px solid var(--line)}

/* ── HERO (animation) ── */
.hero-anim{
  position:relative; width:100%; height:100svh; min-height:560px; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.bx-mount{position:absolute; inset:0}
.hero-skip{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gray); cursor:pointer; opacity:.8; transition:.2s; background:none; border:0;
}
.hero-skip:hover{color:var(--cream); opacity:1}

/* ── CTA band ── */
.cta-band{text-align:center; padding:clamp(48px,8vh,84px) 0}
.cta-band .kicker{font-family:var(--serif); font-style:italic; font-size:clamp(24px,3.6vw,40px); color:var(--cream); margin:0 0 26px; line-height:1.25}
.cta-band .sub{font-family:var(--mono); font-size:13px; letter-spacing:0.06em; color:var(--gray); margin-top:18px}

/* ── short text hero (Direction B) ── */
.hero-txt{padding:calc(72px + 9.3vh) 0 clamp(56px,10vh,110px); text-align:center}
.hero-txt h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(40px,7vw,86px); line-height:1.02;
  letter-spacing:-0.02em; margin:0 0 8px; color:var(--cream); text-wrap:balance;
}
.hero-txt h1 .gold{color:var(--gold)}
.hero-txt .lede{font-size:clamp(18px,2.2vw,24px); color:var(--gray); max-width:680px; margin:0 auto 36px; text-wrap:pretty}
.hero-txt .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ── manifesto frame (Direction B) ── */
.manifesto{padding:clamp(40px,7vh,80px) 0}
.bx-frame{
  position:relative; width:100%; aspect-ratio:16/9; max-height:78vh; margin:0 auto;
  background:#000; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.bx-frame .bx-mount{inset:0}
.bx-frame .replay-mini{display:none}

/* manifesto blended into page background (Direction B) */
.manifesto-bleed{padding:clamp(10px,2vh,26px) 0}
.bx-frame-bleed{background:transparent; border:0; border-radius:0; max-height:none; aspect-ratio:1920/760}

/* ── pillars ── */
.pillars{padding:clamp(56px,9vh,96px) 0}
.pillars .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pill{
  border:1px solid var(--line); border-radius:14px; padding:30px 28px; background:var(--ink-2);
  transition:.22s;
}
.pill:hover{border-color:var(--line-2); transform:translateY(-3px)}
.pill .tag{font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px}
.pill h3{font-family:var(--serif); font-weight:600; font-size:26px; line-height:1.1; margin:0 0 10px; color:var(--cream)}
.pill p{margin:0; font-size:16px; color:var(--gray); line-height:1.5}

/* ── privacy one-liner ── */
.privacy{padding:clamp(64px,11vh,120px) 0; text-align:center}
.privacy .big{font-family:var(--serif); font-weight:600; font-size:clamp(30px,5vw,58px); line-height:1.1; letter-spacing:-0.015em; color:var(--cream); margin:0; text-wrap:balance}
.privacy .big .gold{color:var(--gold)}
.privacy .note{margin-top:22px; font-size:16px; color:var(--gray)}

/* ── how 1·2·3 ── */
.how{padding:clamp(56px,9vh,96px) 0}
.how .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{display:flex; gap:16px; align-items:flex-start}
.step .n{font-family:var(--serif); font-size:40px; line-height:1; color:var(--gold); font-weight:600; flex:none; width:46px}
.step h4{margin:0 0 4px; font-size:18px; color:var(--cream); font-weight:600}
.step p{margin:0; font-size:15px; color:var(--gray); line-height:1.5}

/* ── final CTA ── */
.final-cta{padding:clamp(72px,13vh,150px) 0; text-align:center; background:var(--ink-2); border-top:1px solid var(--line)}
.final-cta h2{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(30px,5vw,60px); line-height:1.1; letter-spacing:-0.01em; color:var(--cream); margin:0 0 34px; text-wrap:balance}

/* ── footer ── */
.foot{padding:34px 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot .m{font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--gray)}

/* ── accessibility / SEO: visible to crawlers + screen readers, hidden visually ── */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── reveal on scroll ── */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ── section heading shared ── */
.sec-head{text-align:center; margin-bottom:clamp(34px,5vh,56px)}
.sec-head h2{font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,46px); line-height:1.05; letter-spacing:-0.015em; color:var(--cream); margin:0; text-wrap:balance}

/* ── responsive ── */
@media (max-width:820px){
  .pillars .grid, .how .grid{grid-template-columns:1fr}
  .hdr .demo-label-long{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none; opacity:1; transform:none}
}