/* ============================================================
   AVORI — SHARED PRODUCT-PAGE SYSTEM
   Same executive dark language as the headquarters homepage.
   Charcoal / bone / gold · disciplined red · green · steel
   Used by: why-avori.html · maximus.html · faq.html
   ============================================================ */
:root{
  --r-shot:12px; --shot-shadow:0 28px 80px -30px rgba(0,0,0,.85);
  --ink:#0E0E11; --ink-2:#131318; --ink-3:#16161A; --panel:#1A1A20; --panel-2:#1F1F26;
  --line:rgba(239,232,218,.09); --line-2:rgba(239,232,218,.16);
  --bone:#EFE8DA; --warm:#F6F1E6; --muted:#9A9486; --muted-2:#85806F;
  --gold:#C99A3B; --gold-soft:#E3C988; --gold-dim:rgba(201,154,59,.14);
  --brick:#B23A2C; --brick-soft:#D98A7E;
  --green:#3E9B63; --steel:#7C93A6;
  --ft:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --fb:'Inter',-apple-system,Arial,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  --e:cubic-bezier(.22,.61,.2,1);
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--ink);color:var(--bone);font-family:var(--fb);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
body{font-size:16px;line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,154,59,.35);color:var(--warm)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#2E2E37;border-radius:8px}

/* ---------- ambient light ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;border-radius:50%;filter:blur(120px);opacity:.14;will-change:transform}
.ambient .a1{width:60vw;height:60vw;left:-18vw;top:-22vw;background:radial-gradient(circle,#C99A3B,transparent 65%);animation:drift1 36s ease-in-out infinite alternate}
.ambient .a2{width:48vw;height:48vw;right:-16vw;top:32vh;background:radial-gradient(circle,#7C93A6,transparent 65%);opacity:.10;animation:drift2 44s ease-in-out infinite alternate}
.ambient .a3{width:42vw;height:42vw;left:8vw;bottom:-24vw;background:radial-gradient(circle,#3E9B63,transparent 65%);opacity:.07;animation:drift1 52s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0)}to{transform:translate(6vw,4vh)}}
@keyframes drift2{from{transform:translate(0,0)}to{transform:translate(-5vw,-4vh)}}
main,header.nav,footer{position:relative;z-index:1}

/* ---------- type ---------- */
.eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
h1,h2,h3{font-family:var(--ft);letter-spacing:-.02em;line-height:1.06;color:var(--warm);text-wrap:balance}
h1{font-weight:800;font-size:clamp(40px,5.6vw,72px)}
h2{font-weight:800;font-size:clamp(30px,3.6vw,46px)}
h3{font-weight:700;font-size:20px;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.65;color:var(--muted);max-width:64ch}
.lead b,.lead strong{color:var(--bone);font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{padding:clamp(72px,9vw,128px) 0;position:relative}
.sec-head{max-width:820px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .eyebrow{display:block;margin-bottom:18px}
.sec-head h2{margin-bottom:18px}
.rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent 70%);width:64px;margin:22px 0 0}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(14,14,17,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .4s}
header.nav.solid{border-bottom-color:var(--line)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:baseline;gap:10px;font-family:var(--ft)}
.brand b{font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--warm)}
.brand span{font-family:var(--fm);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{font-size:13.5px;color:var(--muted);font-weight:500;transition:color .25s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold-soft)}
.nav-links a.active{color:var(--gold-soft)}
.nav-links a.btn-gold,.nav-links a.btn-gold:hover,.nav-links a.btn-gold:focus-visible,.nav-links a.btn-gold.active{color:#16130A}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ft);font-weight:700;font-size:14.5px;letter-spacing:.01em;padding:13px 22px;border-radius:10px;border:1px solid var(--line-2);color:var(--bone);transition:transform .3s var(--e),background .3s,border-color .3s,box-shadow .3s;cursor:pointer;background:transparent}
.btn .arr{transition:transform .3s var(--e)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(3px)}
.btn-gold{background:linear-gradient(180deg,#E3C988,#C99A3B);border-color:transparent;color:#16130A;box-shadow:0 10px 30px -12px rgba(201,154,59,.55)}
.btn-gold:hover,.btn-gold:focus-visible{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(201,154,59,.65)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--gold);color:var(--gold-soft)}
.nav .btn{padding:10px 18px;font-size:13.5px}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--bone);font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:8px;cursor:pointer}
.nav-mobile{display:none;flex-direction:column;gap:4px;padding:12px 28px 22px;background:rgba(14,14,17,.97);border-bottom:1px solid var(--line)}
.nav-mobile a{padding:11px 0;font-size:15px;color:var(--bone);border-bottom:1px solid var(--line)}
.nav-mobile a:last-child{border-bottom:0}
@media(max-width:960px){.nav-links{display:none}.nav-toggle{display:block}}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding:clamp(72px,9vw,132px) 0 clamp(48px,6vw,84px)}
.page-hero .eyebrow{display:block;margin-bottom:24px}
.page-hero h1{max-width:18ch;margin-bottom:26px}
.page-hero h1 em{font-style:normal;color:var(--gold-soft)}
.page-hero .lead{margin-bottom:0}
.page-hero .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:36px}

/* ---------- litany — one idea per line, large ---------- */
.litany{display:grid;gap:clamp(8px,1.4vw,14px);margin:clamp(28px,4vw,44px) 0}
.litany p{font-family:var(--ft);font-weight:700;letter-spacing:-.02em;line-height:1.15;font-size:clamp(24px,3.4vw,44px);color:var(--muted-2);transition:color .5s var(--e)}
.litany p.lit{color:var(--warm)}
.litany p b{color:var(--gold-soft);font-weight:700}

/* ---------- statement — a single confident idea ---------- */
.statement{border-top:1px solid var(--line);text-align:center}
.statement .wrap{max-width:960px}
.statement p.big{font-family:var(--ft);font-weight:800;letter-spacing:-.02em;line-height:1.14;font-size:clamp(26px,3.6vw,48px);color:var(--warm);text-wrap:balance}
.statement p.big em{font-style:normal;color:var(--gold-soft)}
.statement .after{color:var(--muted);font-size:clamp(16px,1.4vw,18px);margin-top:22px;max-width:56ch;margin-inline:auto}

/* ---------- feature rows (copy + shot) ---------- */
.feature{display:grid;grid-template-columns:0.42fr 0.58fr;gap:clamp(36px,5vw,72px);align-items:center;padding:clamp(36px,5vw,60px) 0;border-bottom:1px solid var(--line)}
.feature:last-of-type{border-bottom:0}
.feature.flip{grid-template-columns:0.58fr 0.42fr}
.feature.flip .f-copy{order:2}
.feature.flip .f-shot{order:1}
.f-copy .eyebrow{display:block;margin-bottom:14px}
.f-copy h3{font-size:clamp(22px,2.2vw,30px);margin-bottom:12px}
.f-copy p{color:var(--muted);font-size:15.5px;max-width:46ch}
.f-copy p+p{margin-top:12px}
.f-copy p b{color:var(--bone);font-weight:600}
.f-shot{position:relative}
.f-shot img{border-radius:var(--r-shot);border:1px solid var(--line-2);box-shadow:var(--shot-shadow);transition:transform .6s var(--e),box-shadow .6s var(--e);max-height:680px;width:auto;max-width:100%;margin-inline:auto;display:block}
.f-shot:hover img{transform:translateY(-4px);box-shadow:0 40px 100px -32px rgba(0,0,0,.9),0 0 60px -24px rgba(201,154,59,.28)}
.f-cap{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-top:12px;text-align:center}
@media(max-width:900px){.feature,.feature.flip{grid-template-columns:1fr}.feature.flip .f-copy{order:1}.feature.flip .f-shot{order:2}}

/* framed product shot with slow perimeter light */
.glowframe{position:relative;border-radius:18px;padding:1px;margin-top:clamp(36px,5vw,56px)}
.glowframe::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;
  background:conic-gradient(from var(--sweep,0deg),rgba(201,154,59,0) 0deg,rgba(201,154,59,.75) 40deg,rgba(227,201,136,.25) 80deg,rgba(201,154,59,0) 130deg,rgba(124,147,166,.35) 220deg,rgba(201,154,59,0) 280deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:sweep 14s linear infinite}
@property --sweep{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sweep{to{--sweep:360deg}}
.glowframe .shot{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-2);box-shadow:0 40px 120px -40px rgba(0,0,0,.85), 0 0 80px -30px rgba(201,154,59,.25)}
.glowframe img{width:100%}
.shot-caption{display:flex;justify-content:space-between;gap:16px;padding:14px 6px 0;font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- pillars grid ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pillar{background:var(--ink-2);padding:26px 24px 30px;transition:background .4s}
.pillar:hover{background:var(--panel)}
.pillar .n{font-family:var(--fm);font-size:11px;color:var(--gold);letter-spacing:.14em;display:block;margin-bottom:16px}
.pillar h3{font-size:16.5px;margin-bottom:8px}
.pillar p{color:var(--muted);font-size:13.5px}
@media(max-width:1020px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* ---------- audience chips ---------- */
.audience{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.audience span{font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:var(--bone);border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;background:var(--ink-2)}

/* ---------- day timeline (maximus) ---------- */
.day{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
.day figure{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative;overflow:hidden;transition:transform .5s var(--e),border-color .5s,box-shadow .5s var(--e)}
.day figure::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--gold);opacity:.45}
.day figure:hover{transform:translateY(-4px);border-color:rgba(201,154,59,.4);box-shadow:var(--shot-shadow)}
.day img{border-radius:var(--r-shot);border:1px solid var(--line);margin-bottom:18px;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.day .k{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.day figcaption h3{margin-bottom:6px;font-size:18px}
.day figcaption p{color:var(--muted);font-size:14px}
@media(max-width:880px){.day{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.faq-nav a{font-family:var(--fm);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;transition:color .25s,border-color .25s}
.faq-nav a:hover,.faq-nav a:focus-visible{color:var(--gold-soft);border-color:var(--gold)}
.faq-cat{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0}
.faq-cat:first-of-type{border-top:0;padding-top:clamp(24px,3vw,36px)}
.faq-cat .cat-head{display:grid;grid-template-columns:220px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.faq-cat .cat-head .eyebrow{position:sticky;top:96px}
.faq-list{display:grid;gap:0;border-top:1px solid var(--line)}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:18px;align-items:center;padding:22px 2px;font-family:var(--ft);font-weight:700;font-size:clamp(16.5px,1.5vw,19px);letter-spacing:-.01em;color:var(--warm);transition:color .25s}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--gold-soft)}
details.faq summary .ind{position:relative;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;flex:none;transition:border-color .3s,transform .4s var(--e)}
details.faq summary .ind::before,details.faq summary .ind::after{content:"";position:absolute;left:50%;top:50%;background:var(--gold-soft);transform:translate(-50%,-50%)}
details.faq summary .ind::before{width:10px;height:1.5px}
details.faq summary .ind::after{width:1.5px;height:10px;transition:transform .35s var(--e),opacity .3s}
details.faq[open] summary .ind{border-color:var(--gold)}
details.faq[open] summary .ind::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
details.faq .a{padding:0 40px 26px 2px;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:62ch}
details.faq .a p+p{margin-top:10px}
details.faq .a b{color:var(--bone);font-weight:600}
details.faq .a ul{margin:10px 0 0 18px}
details.faq .a li{margin:4px 0}
details.faq .a .vs{display:grid;gap:2px;margin-top:6px}
details.faq .a .vs i{font-style:normal;color:var(--muted-2)}
details.faq .a .vs b{color:var(--gold-soft)}
@media(max-width:880px){.faq-cat .cat-head{grid-template-columns:1fr;gap:20px}.faq-cat .cat-head .eyebrow{position:static}}

/* ---------- genesis ---------- */
.genesis{border-top:1px solid var(--line)}
.gen-panel{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(201,154,59,.28);background:
  radial-gradient(120% 160% at 85% -20%,rgba(201,154,59,.14),transparent 55%),
  linear-gradient(180deg,var(--panel),var(--ink-2));
  padding:clamp(36px,5.5vw,72px)}
.gen-panel::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.75}
.gen-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:start}
.gen-copy .eyebrow{display:block;margin-bottom:18px}
.gen-copy h2{margin-bottom:18px}
.gen-copy .lead{margin-bottom:8px}
.gen-points{display:grid;border-top:1px solid var(--line);margin-top:30px}
.gen-point{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.gen-point .n{font-family:var(--fm);font-size:11.5px;color:var(--gold);letter-spacing:.1em;padding-top:3px}
.gen-point h3{font-size:16.5px;margin-bottom:4px}
.gen-point p{color:var(--muted);font-size:14px}
.gen-side{display:flex;flex-direction:column;gap:28px}
/* coin — pure CSS, restrained */
.coin{width:170px;height:170px;border-radius:50%;position:relative;margin:6px auto 0;
  background:radial-gradient(circle at 32% 28%,#2A2313,#16130A 70%);
  border:1px solid rgba(201,154,59,.55);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9),inset 0 0 0 6px rgba(201,154,59,.12),inset 0 0 40px rgba(201,154,59,.10)}
.coin::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(201,154,59,.35)}
.coin .ca{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.coin .ca b{font-family:var(--ft);font-weight:800;font-size:44px;letter-spacing:-.02em;color:var(--gold-soft);line-height:1}
.coin .ca span{font-family:var(--fm);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(227,201,136,.75)}
.coin .num{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:var(--fm);font-size:9px;letter-spacing:.22em;color:rgba(227,201,136,.55)}
.coin-cap{text-align:center;font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:14px}
/* waitlist form */
.gen-form{background:var(--ink-3);border:1px solid var(--line);border-radius:16px;padding:26px}
.gen-form h3{font-size:17px;margin-bottom:6px}
.gen-form .sub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.gen-form .row{display:grid;gap:12px;margin-bottom:14px}
.gen-form label{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.gen-form input{width:100%;background:var(--ink-2);border:1px solid var(--line-2);border-radius:10px;color:var(--bone);font-family:var(--fb);font-size:15px;padding:12px 14px;transition:border-color .25s}
.gen-form input:hover{border-color:rgba(239,232,218,.28)}
.gen-form input:focus{border-color:var(--gold);outline:none}
.gen-form .btn{width:100%;justify-content:center;margin-top:6px}
.gen-form .fine{font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:var(--muted-2);margin-top:14px;line-height:1.6}
.gen-success{display:none;text-align:center;padding:34px 10px}
.gen-success .ok{width:44px;height:44px;border-radius:50%;border:1px solid var(--green);color:#7FC79B;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:18px}
.gen-success h3{margin-bottom:8px}
.gen-success p{color:var(--muted);font-size:14px}
.gen-form.sent form{display:none}
.gen-form.sent .gen-success{display:block}
@media(max-width:960px){.gen-grid{grid-template-columns:1fr}}

/* ---------- final cta ---------- */
.final{border-top:1px solid var(--line);text-align:center;padding-bottom:clamp(96px,10vw,150px)}
.final h2{font-size:clamp(34px,4.4vw,58px);max-width:20ch;margin:0 auto 20px}
.final .lead{margin:0 auto 40px;max-width:52ch}
.final-ctas{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.final .btn-gold{padding:17px 30px;font-size:16px}
.final .alt{font-size:14.5px;color:var(--muted)}
.final .alt a{color:var(--gold-soft);font-weight:600}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 36px;background:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.foot-brand b{font-family:var(--ft);font-weight:800;font-size:20px;color:var(--warm)}
.foot-brand span{font-family:var(--fm);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:block;margin:6px 0 14px}
.foot-brand p{color:var(--muted);font-size:13.5px;max-width:34ch}
.foot-col h4,.foot-col .fh{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);font-size:13.5px;padding:5px 0;transition:color .25s}
.foot-col a:hover{color:var(--gold-soft)}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;color:var(--muted-2)}
.foot-bottom a{color:var(--muted)}
.foot-bottom a:hover{color:var(--gold-soft)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ambient span,.glowframe::before{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .litany p{color:var(--warm)}
  .btn,.day figure,.f-shot img,details.faq summary .ind{transition:none}
}