/* BAUX marketing site — shared design system */
:root{
  --navy:#0A1628;--navy-2:#0E1B30;--navy-3:#12233C;
  --gold:#C8A96E;--gold-deep:#A88845;--gold-100:#E4D2A5;
  --bone:#F6F1E7;--ink:#1A1A1A;
  --w96:rgba(255,255,255,.96);--w72:rgba(255,255,255,.72);--w48:rgba(255,255,255,.48);--w24:rgba(255,255,255,.24);--w12:rgba(255,255,255,.12);--w06:rgba(255,255,255,.06);--w03:rgba(255,255,255,.03);
  --serif:'Fraunces','Lora',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--navy);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--gold);color:var(--navy)}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-100)}
img{max-width:100%;display:block}

/* ── Wordmark ─────────────────────────────── */
.wordmark{display:inline-flex;align-items:flex-end;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--bone);text-decoration:none;font-family:var(--sans)}
.wordmark:hover{color:var(--bone)}
.wordmark .stack{display:inline-flex;flex-direction:column;font-size:20px;line-height:18.4px}
.wordmark .dot{color:var(--gold);font-size:20px;line-height:18.4px;margin-left:1px}

/* ── Nav ──────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;transition:background .24s ease,border-color .24s ease;border-bottom:1px solid transparent;color:var(--bone)}
.nav.scrolled{background:rgba(10,22,40,.85);border-bottom-color:var(--w12);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.nav .links{display:flex;align-items:center;gap:28px}
.nav .links a.pg{color:var(--w72);font-size:14px;font-weight:500;transition:color .2s}
.nav .links a.pg:hover{color:var(--bone)}
.nav .links a.pg.active{color:var(--gold)}
.nav .burger{display:none;appearance:none;background:none;border:none;color:var(--bone);cursor:pointer;padding:8px}
.mobile-menu{display:none}

/* ── Buttons ──────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:9999px;font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;border:none;transition:background .2s var(--ease),border-color .2s,transform .12s;white-space:nowrap;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-deep);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--w24)}
.btn-ghost:hover{border-color:var(--gold);color:var(--bone)}
.btn-sm{padding:10px 18px;font-size:14px}

/* ── Type ─────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1.display{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.2vw,84px);letter-spacing:-.015em;line-height:1.04;color:var(--bone)}
h2.title{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(32px,4vw,52px);letter-spacing:-.012em;line-height:1.08;color:var(--bone)}
h3.sub{margin:0;font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1.2;color:var(--bone)}
.gold-i{font-style:italic;color:var(--gold)}
.lede{font-size:19px;line-height:1.6;color:var(--w72);font-weight:400}
.body-s{font-size:15px;line-height:1.6;color:var(--w72)}
p{margin:0}

/* ── Layout ───────────────────────────────── */
.section{padding:120px 32px;position:relative;overflow:hidden}
.section.tight{padding:88px 32px}
.section.hairline{border-top:1px solid var(--w12)}
.wrap{max-width:var(--max);margin:0 auto;position:relative}
.wrap-narrow{max-width:820px;margin:0 auto;position:relative}
.center{text-align:center}
.stack-8{display:flex;flex-direction:column;gap:8px}
.stack-16{display:flex;flex-direction:column;gap:16px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ── Cards ────────────────────────────────── */
.card{background:var(--navy-2);border:1px solid var(--w12);border-radius:20px;padding:32px 28px;transition:transform .24s var(--ease),border-color .24s,box-shadow .24s}
.card:hover{transform:translateY(-3px);border-color:rgba(200,169,110,.45);box-shadow:0 24px 48px rgba(0,0,0,.35)}
.card .ic{color:var(--gold);margin-bottom:18px}
.card h4{margin:0 0 10px;font-size:18px;font-weight:600;color:var(--bone);letter-spacing:-.01em}
.card p{font-size:14.5px;line-height:1.6;color:var(--w72)}
.tag{display:inline-block;padding:5px 12px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(200,169,110,.12);color:var(--gold);border:1px solid rgba(200,169,110,.3)}

/* ── Halo decoration ──────────────────────── */
.halo{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(200,169,110,.14) 0%,rgba(200,169,110,0) 60%)}

/* ── Reveal ───────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── Quote / voice chip ───────────────────── */
.voice-chip{display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;border-radius:9999px;border:1px solid var(--w12);background:var(--w03);backdrop-filter:blur(8px)}
.voice-chip .bars{display:inline-flex;align-items:center;gap:3px;height:22px}
.voice-chip .bars span{width:3px;border-radius:2px;background:var(--gold);animation:bae .9s ease-in-out infinite}
@keyframes bae{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.voice-chip .q{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--bone)}

/* ── Flywheel ─────────────────────────────── */
.flywheel{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1}
.flywheel svg{width:100%;height:100%}
.fly-node{position:absolute;width:190px;padding:16px 18px;background:var(--navy-2);border:1px solid var(--w12);border-radius:16px;text-align:center}
.fly-node b{display:block;font-size:14px;color:var(--bone);margin-bottom:4px;letter-spacing:-.01em}
.fly-node span{font-size:12px;line-height:1.5;color:var(--w48)}
.fly-node .n{display:inline-block;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:15px;margin-bottom:6px}

/* ── Comparison table ─────────────────────── */
.compare{border:1px solid var(--w12);border-radius:20px;overflow:hidden}
.compare .head,.compare .row{display:grid;grid-template-columns:1fr 1fr}
.compare .head>div{padding:22px 28px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.compare .head .them{background:var(--w03);color:var(--w48)}
.compare .head .us{background:rgba(200,169,110,.1);color:var(--gold)}
.compare .row>div{padding:20px 28px;font-size:15px;line-height:1.55;border-top:1px solid var(--w12)}
.compare .row .them{color:var(--w48);background:var(--w03)}
.compare .row .us{color:var(--bone);background:rgba(200,169,110,.05)}
.compare .row .us b{color:var(--gold);font-weight:600}

/* ── Steps ────────────────────────────────── */
.step{display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:start}
.step .num{font-family:var(--serif);font-style:italic;font-size:52px;color:var(--gold);line-height:1}
.step h4{margin:2px 0 10px;font-size:22px;font-weight:600;color:var(--bone);letter-spacing:-.01em}
.step p{font-size:15.5px;line-height:1.6;color:var(--w72)}

/* ── Stat band ────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{border-left:2px solid var(--gold);padding-left:22px}
.stat .v{font-family:var(--serif);font-size:44px;color:var(--bone);line-height:1.05}
.stat .l{margin-top:8px;font-size:14px;line-height:1.5;color:var(--w48)}
.cite{font-size:12px;color:var(--w48)}

/* ── Briefing form ────────────────────────── */
.brief-form{background:var(--navy-2);border:1px solid var(--w12);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.brief-form h3{margin:0}
.brief-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.brief-form input,.brief-form textarea,.brief-form select{appearance:none;background:var(--w03);border:1px solid var(--w12);border-radius:12px;padding:14px 16px;color:var(--bone);font-family:var(--sans);font-size:15px;width:100%;outline:none;transition:border-color .2s}
.brief-form input:focus,.brief-form textarea:focus,.brief-form select:focus{border-color:var(--gold)}
.brief-form ::placeholder{color:var(--w48)}
.brief-form textarea{resize:vertical;min-height:84px;line-height:1.5}
.brief-form .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.brief-form .note{font-size:12px;color:var(--w48)}
.form-err{font-size:13px;color:#F4A89C}

/* ── Toast ────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--navy-2);color:var(--bone);border:1px solid var(--w12);padding:14px 22px;border-radius:9999px;box-shadow:0 24px 60px rgba(0,0,0,.5);font-size:14px;font-weight:500;display:flex;align-items:center;gap:12px;z-index:1000;max-width:calc(100vw - 32px);animation:toastIn .28s var(--ease)}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 8px}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── Footer ───────────────────────────────── */
.footer{border-top:1px solid var(--w12);padding:56px 32px}
.footer .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.footer .tagline{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--w72);line-height:1.45;max-width:380px}
.footer .cols{display:flex;gap:64px;justify-content:flex-end;flex-wrap:wrap}
.footer .col{display:flex;flex-direction:column;gap:12px;font-size:14px}
.footer .col b{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--w48);margin-bottom:4px}
.footer .col a{color:var(--w72)}
.footer .col a:hover{color:var(--gold)}
.footer .legal{max-width:var(--max);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--w12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--w48)}
.footer .legal a{color:var(--w48)}
.footer .legal a:hover{color:var(--gold)}

/* ── Vertical blocks (Industries) ─────────── */
.vertical{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.vertical.rev>.v-copy{order:2}
.vertical .discs{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.disc{display:flex;gap:14px;align-items:flex-start}
.disc .ic{flex:0 0 20px;color:var(--gold);margin-top:2px}
.disc b{display:block;font-size:15.5px;color:var(--bone);margin-bottom:3px}
.disc span{font-size:14px;line-height:1.55;color:var(--w72)}
.v-visual{background:var(--navy-2);border:1px solid var(--w12);border-radius:24px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

/* ── Phone frame ──────────────────────────── */
.phone{position:relative;border-radius:44px;padding:8px;background:linear-gradient(180deg,#1A2840,#050B17);box-shadow:0 40px 80px -20px rgba(0,0,0,.55),0 16px 32px -8px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.12)}
.phone img{border-radius:37px;width:100%;aspect-ratio:1320/2868;object-fit:cover;object-position:top}
.phone-glow{position:relative;display:inline-block}
.phone-glow::before{content:"";position:absolute;inset:-18%;background:radial-gradient(circle,rgba(200,169,110,.22),transparent 65%);pointer-events:none}
.phone-glow .phone{position:relative}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
.float{animation:floaty 8s ease-in-out infinite}
.phone-ghost{position:absolute;opacity:.45;filter:blur(.5px)}

/* ── Light (bone) section theme ───────────── */
.section.light{background:var(--bone);color:var(--ink)}
.section.light.hairline{border-top-color:rgba(10,22,40,.12)}
.section.light h1.display,.section.light h2.title,.section.light h3.sub,.section.light .step h4,.section.light .card h4,.section.light .disc b{color:var(--navy)}
.section.light .lede,.section.light .body-s,.section.light .card p,.section.light .step p,.section.light .disc span{color:rgba(10,22,40,.65)}
.section.light .eyebrow,.section.light .gold-i,.section.light .step .num,.section.light .disc .ic,.section.light .card .ic{color:var(--gold-deep)}
.section.light .card{background:#fff;border-color:rgba(10,22,40,.12);box-shadow:0 2px 8px rgba(10,22,40,.05)}
.section.light .card:hover{border-color:rgba(168,136,69,.5);box-shadow:0 24px 48px rgba(10,22,40,.12)}
.section.light .stat{border-color:var(--gold-deep)}
.section.light .stat .v{color:var(--navy)}
.section.light .stat .l,.section.light .cite{color:rgba(10,22,40,.55)}
.section.light .voice-chip{border-color:rgba(10,22,40,.12);background:rgba(10,22,40,.03)}
.section.light .voice-chip .q{color:var(--navy)}
.section.light .tag{background:rgba(168,136,69,.1);color:var(--gold-deep);border-color:rgba(168,136,69,.35)}
.section.light .btn-ghost{color:var(--navy);border-color:rgba(10,22,40,.24)}
.section.light .btn-ghost:hover{border-color:var(--gold-deep);color:var(--navy)}
.section.light .halo{background:radial-gradient(circle,rgba(200,169,110,.24) 0%,rgba(200,169,110,0) 60%)}
.section.light .v-visual{background:#fff;border-color:rgba(10,22,40,.12)}
.section.light a.card span{color:var(--gold-deep)!important}
.section.light .phone-glow::before{background:radial-gradient(circle,rgba(200,169,110,.3),transparent 65%)}
.photo-card{border-radius:20px;overflow:hidden;border:1px solid var(--w12);box-shadow:0 24px 48px rgba(0,0,0,.35)}
.photo-card img{width:100%;height:100%;object-fit:cover}
.section.light .photo-card{border-color:rgba(10,22,40,.12);box-shadow:0 24px 48px rgba(10,22,40,.14)}
.photo-cap{margin-top:12px;font-size:13px;color:var(--w48)}
.section.light .photo-cap{color:rgba(10,22,40,.5)}
.team-photo{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center 25%;display:block;border:2px solid rgba(200,169,110,.5);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.section.light .brief-form h3.sub{color:var(--bone)}
.section.light .brief-form .eyebrow{color:var(--gold)}

/* ── Consumer beta pill form ──────────────── */
.beta-pill{display:flex;align-items:center;gap:6px;background:var(--w06);border:1px solid var(--w24);border-radius:9999px;padding:6px;max-width:520px;margin:0 auto;backdrop-filter:blur(12px)}
.beta-pill input{flex:1;min-width:0;appearance:none;background:transparent;border:none;outline:none;font-family:var(--sans);font-size:16px;color:var(--bone);padding:12px 8px 12px 18px}
.beta-pill input::placeholder{color:var(--w48)}
@media (max-width:720px){
  .beta-pill{display:block;background:transparent;border:none;padding:0;backdrop-filter:none}
  .beta-pill input{display:block;width:100%;background:var(--w06);border:1px solid var(--w24);border-radius:9999px;padding:14px 18px}
  .beta-pill .btn{margin-top:10px;width:100%;justify-content:center}
}

/* ── Responsive ───────────────────────────── */
@media (max-width:980px){
  .grid-2,.vertical{grid-template-columns:1fr;gap:40px}
  .vertical.rev>.v-copy{order:0}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .footer .inner{grid-template-columns:1fr}
  .footer .cols{justify-content:flex-start}
}
@media (max-width:720px){
  .section{padding:72px 20px}
  .section.tight{padding:56px 20px}
  .nav{height:64px;padding:0 20px}
  .nav .links{display:none}
  .nav .burger{display:inline-flex}
  .mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;z-index:99;background:rgba(10,22,40,.97);border-bottom:1px solid var(--w12);backdrop-filter:blur(16px);padding:16px 20px 24px;flex-direction:column;gap:4px}
  .mobile-menu.open{display:flex}
  .mobile-menu a{padding:12px 4px;color:var(--w72);font-size:16px;font-weight:500;border-bottom:1px solid var(--w06)}
  .mobile-menu a.active{color:var(--gold)}
  .mobile-menu .btn{margin-top:14px;justify-content:center}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .compare .head,.compare .row{grid-template-columns:1fr}
  .compare .head .them{display:none}
  .compare .row .them{border-top:none;padding-bottom:8px}
  .compare .row .them::before{content:"Generic AI widget — ";color:var(--w24);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
  .compare .row .us::before{content:"Bae, by BAUX — ";color:var(--gold);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
  .step{grid-template-columns:56px 1fr;gap:16px}
  .step .num{font-size:38px}
  .brief-form{padding:24px}
  .brief-form .row2{grid-template-columns:1fr}
  .flywheel{max-width:340px}
  .fly-node{width:150px;padding:12px}
  .fly-node span{display:none}
}