:root{
  color-scheme: dark;
  --ink:#0E1F1B;
  --ink-0:#091512;
  --ink-2:#14302A;
  --ink-3:#1B3B32;
  --ivory:#F3EDE1;
  --ivory-2:#FBF6EC;
  --sage:#9DB0A6;
  --sage-dim:#87998F;
  --brass:#C69A4C;
  --brass-2:#E4C079;
  --wa:#21A65A;
  --wa-lift:#27C065;
  --line: rgba(157,176,166,.16);
  --line-2: rgba(157,176,166,.10);

  /* elevation — the fix for "everything on one plane" */
  --e1: 0 1px 0 rgba(243,237,225,.05) inset, 0 2px 6px rgba(0,0,0,.28);
  --e2: 0 1px 0 rgba(243,237,225,.06) inset, 0 10px 26px -12px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3);
  --e3: 0 1px 0 rgba(243,237,225,.08) inset, 0 28px 60px -24px rgba(0,0,0,.8), 0 6px 18px rgba(0,0,0,.35);
  --glow-wa: 0 0 0 1px rgba(33,166,90,.4), 0 12px 40px -12px rgba(33,166,90,.5);

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- atmosphere: layered glows + film grain ----------------------------- */
.atmos{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.orb{position:absolute; border-radius:50%; filter:blur(10px);}
.orb--wa{
  top:-16%; right:-10%; width:62vw; height:62vw; max-width:820px; max-height:820px;
  background:radial-gradient(circle at center, rgba(33,166,90,.20), rgba(33,166,90,0) 62%);
}
.orb--brass{
  top:34%; left:-18%; width:52vw; height:52vw; max-width:700px; max-height:700px;
  background:radial-gradient(circle at center, rgba(198,154,76,.11), rgba(198,154,76,0) 64%);
}
.orb--deep{
  bottom:-22%; right:12%; width:48vw; height:48vw; max-width:640px; max-height:640px;
  background:radial-gradient(circle at center, rgba(33,166,90,.10), rgba(33,166,90,0) 66%);
}
/* grain — the single cheapest way to kill the "flat vector" look */
body::after{
  content:"";
  position:fixed; inset:0; z-index:99; pointer-events:none;
  opacity:.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:1;}

/* ---- nav ---------------------------------------------------------------- */
.nav-shell{
  position:sticky; top:0; z-index:50;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav-shell.stuck{
  background:rgba(10,22,19,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-2);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
.brand{font-family:var(--font-display); font-weight:600; font-size:1.24rem; display:flex; align-items:center; gap:11px; letter-spacing:.1px;}
.mark{
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--brass-2), var(--brass) 55%, #7d5e26);
  box-shadow:0 0 0 4px rgba(198,154,76,.13), 0 0 18px rgba(198,154,76,.45);
}
.navlinks{display:flex; align-items:center; gap:28px;}
.navlinks .link{color:var(--sage); text-decoration:none; font-size:.94rem; transition:color .18s;}
.navlinks .link:hover{color:var(--ivory);}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:.96rem;
  text-decoration:none; border-radius:999px; border:1px solid transparent;
  padding:14px 26px; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s;
  will-change:transform;
}
.btn--wa{background:var(--wa); color:#06210E; box-shadow:var(--glow-wa);}
.btn--wa:hover{background:var(--wa-lift); transform:translateY(-2px); box-shadow:0 0 0 1px rgba(33,166,90,.5), 0 18px 44px -12px rgba(33,166,90,.62);}
.btn--wa svg{flex:none;}
/* nav instance must re-assert colour: `.navlinks a` would otherwise win on specificity */
.navlinks .btn--wa{padding:10px 18px; color:#06210E; font-size:.92rem;}
.btn--ghost{
  background:rgba(243,237,225,.02); color:var(--ivory);
  border-color:rgba(157,176,166,.30); box-shadow:var(--e1);
}
.btn--ghost:hover{border-color:rgba(157,176,166,.55); background:rgba(243,237,225,.06); transform:translateY(-2px);}
:focus-visible{outline:2px solid var(--brass-2); outline-offset:3px; border-radius:6px;}

/* ---- type --------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-mono); font-size:.71rem; letter-spacing:.20em; text-transform:uppercase;
  color:var(--brass); display:inline-flex; align-items:center; gap:12px; margin-bottom:22px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brass); opacity:.65;}
h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.5rem, 5.4vw, 4.15rem); line-height:1.03;
  letter-spacing:-.022em; margin:0 0 22px;
}
h1 em{font-style:italic; color:var(--brass-2); font-weight:500;}
h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.85rem, 3.4vw, 2.85rem); line-height:1.12;
  letter-spacing:-.017em; margin:0 0 18px;
}
h3{font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin:0 0 10px; letter-spacing:-.01em;}
.lead{color:var(--sage); font-size:1.09rem; max-width:33rem; margin:0 0 30px;}
.lead b{color:var(--ivory); font-weight:600;}
.section{padding:104px 0; position:relative;}
.section + .section{border-top:1px solid var(--line-2);}
.section-head{max-width:38rem; margin-bottom:52px;}
.section-head .lead{margin-bottom:0;}

/* ---- hero --------------------------------------------------------------- */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:72px 0 96px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.trust{display:flex; gap:26px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.76rem; color:var(--sage-dim);}
.trust span{display:flex; align-items:center; gap:8px;}
.trust span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--wa); box-shadow:0 0 8px var(--wa);}

/* ---- the phone: real HTML text, so it stays legible when it scales ------- */
.stage{position:relative; perspective:1400px;}
.phone{
  position:relative; z-index:2;
  width:min(100%, 300px);
  background:linear-gradient(168deg, #17352E, #0D211C 62%);
  border-radius:30px; padding:16px 15px 20px;
  box-shadow:var(--e3), 0 0 0 1px rgba(157,176,166,.10);
  transform:rotateY(-7deg) rotateX(2.5deg) translateZ(0);
  transition:transform .5s var(--ease);
}
.stage:hover .phone{transform:rotateY(-3deg) rotateX(1deg);}
.phone-top{
  display:flex; align-items:center; gap:11px; padding:4px 8px 14px;
  border-bottom:1px solid rgba(157,176,166,.12); position:relative;
}
.phone-top .back{color:var(--sage); flex:none; opacity:.8;}
.phone-acts{margin-left:auto; display:flex; gap:15px; color:var(--sage); opacity:.65; flex:none;}
.avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:linear-gradient(150deg, var(--brass-2), #8a6626);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:.82rem; color:#20180A;
}
.who{line-height:1.25;}
.who b{display:block; font-size:.95rem; font-weight:600;}
.who span{font-size:.72rem; color:var(--wa); display:flex; align-items:center; gap:5px;}
.who span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--wa); box-shadow:0 0 7px var(--wa);}

.thread{
  padding:16px 10px 10px; min-height:212px; display:flex; flex-direction:column; gap:9px;
  position:relative; border-radius:0 0 16px 16px; margin:0 -5px;
  /* faint doodle wallpaper, the way a real chat has texture behind it */
  background-image:radial-gradient(circle at 20% 30%, rgba(157,176,166,.05) 1px, transparent 1px),
                   radial-gradient(circle at 70% 65%, rgba(157,176,166,.04) 1px, transparent 1px);
  background-size:38px 38px, 52px 52px;
}
.daydiv{
  align-self:center; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sage-dim);
  background:rgba(9,21,18,.6); padding:4px 11px; border-radius:999px; margin-bottom:2px;
  border:1px solid var(--line-2);
}
.bub{
  max-width:88%; padding:11px 14px; border-radius:16px;
  font-size:14.5px; line-height:1.48; position:relative;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.bub.show{opacity:1; transform:none;}
.bub--in{align-self:flex-start; background:#22493F; color:#E2ECE6; border-bottom-left-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.28);}
.bub--in::after{
  content:""; position:absolute; left:-6px; bottom:0; width:12px; height:14px;
  background:#22493F; clip-path:polygon(100% 0, 100% 100%, 0 100%);
  border-bottom-left-radius:3px;
}
.bub--out{
  align-self:flex-end; border-bottom-right-radius:4px;
  background:linear-gradient(158deg, #2ECB6E, #17924A);
  color:#04220F; font-weight:500;
  box-shadow:0 8px 24px -10px rgba(33,166,90,.7), 0 1px 0 rgba(255,255,255,.22) inset;
}
.bub--out::after{
  content:""; position:absolute; right:-6px; bottom:0; width:12px; height:14px;
  background:#17924A; clip-path:polygon(0 0, 100% 100%, 0 100%);
  border-bottom-right-radius:3px;
}
.stamp{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  font-size:10.5px; opacity:.62; margin-top:5px; font-variant-numeric:tabular-nums;
}
.ticks{width:15px; height:15px; flex:none; opacity:.9;}
.bub--out .ticks{color:#0B5C2E;}
.bub--out b{font-weight:700;}
/* word-by-word stream */
.w{opacity:0; transition:opacity .18s linear;}
.w.on{opacity:1;}
.w--cited{
  border-radius:4px; padding:0 3px; margin:0 -1px;
  background:rgba(255,255,255,0); transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.w--cited.lit{background:rgba(255,255,255,.30); box-shadow:0 0 0 1px rgba(4,34,15,.18);}

/* display:none so it collapses out of the flow instead of leaving a gap;
   the fade still plays because animations run on the display change */
.typing{
  align-self:flex-start; display:none; gap:5px; padding:13px 15px;
  background:#22493F; border-radius:16px; border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.typing.show{display:flex; animation:tin .28s var(--ease) both;}
@keyframes tin{from{opacity:0; transform:translateY(5px) scale(.96);} to{opacity:1; transform:none;}}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--sage); display:block;}

/* fact cards floating at a different depth than the phone */
.composer{
  display:flex; align-items:center; gap:9px; margin:11px 3px 0;
  background:rgba(9,21,18,.72); border:1px solid var(--line-2);
  border-radius:999px; padding:9px 8px 9px 15px;
}
.composer span{font-size:13px; color:var(--sage-dim); flex:1;}
.composer .mic{
  width:29px; height:29px; border-radius:50%; background:var(--wa);
  display:grid; place-items:center; color:#04220F; flex:none;
}

.facts{position:absolute; right:0; top:40px; width:208px; display:flex; flex-direction:column; gap:12px; z-index:3;}
.fact{
  position:relative;
  background:linear-gradient(158deg, var(--ivory-2), #EFE7D6);
  color:#22201A; border-radius:13px; padding:11px 13px;
  box-shadow:var(--e2);
  opacity:0; transform:translateX(16px) scale(.96);
  transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .45s var(--ease);
}
.fact.show{opacity:1; transform:none;}
.fact.lit{box-shadow:var(--e2), 0 0 0 2px var(--brass), 0 0 34px -6px rgba(198,154,76,.85);}
.fact-k{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:#9A7B3C; margin-bottom:4px;}
.fact-b{font-size:.83rem; line-height:1.4; display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.fact-b .price{font-family:var(--font-display); font-weight:600; font-size:1.02rem; white-space:nowrap;}
.fact-note{font-size:.72rem; color:#6B6455;}
.fact--ghost{
  background:transparent; border:1px dashed rgba(157,176,166,.34); color:var(--sage-dim);
  box-shadow:none; font-family:var(--font-mono); font-size:.66rem; text-align:center; padding:8px;
}
/* connector: anchored to the card, so it can never fall out of registration */
.fact::after{
  content:""; position:absolute; right:100%; top:26px; height:1.5px; width:0;
  background:linear-gradient(90deg, rgba(198,154,76,0), var(--brass));
  transition:width .6s var(--ease) .15s, background .4s, box-shadow .4s;
}
.fact.show::after{width:22px;}
.fact.lit::after{background:linear-gradient(90deg, rgba(228,192,121,.2), var(--brass-2)); box-shadow:0 0 9px rgba(228,192,121,.8);}
.fact--ghost::after{display:none;}
.stage-cap{margin-top:22px; font-family:var(--font-mono); font-size:.72rem; color:var(--sage-dim); text-align:center;}

/* ---- cards -------------------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{
  position:relative; border-radius:17px; padding:26px 24px 28px;
  background:linear-gradient(162deg, rgba(27,59,50,.72), rgba(14,31,27,.86));
  box-shadow:var(--e2);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
/* gradient hairline border — reads as a lit edge, not a drawn outline */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(158deg, rgba(198,154,76,.55), rgba(157,176,166,.13) 42%, rgba(157,176,166,.03));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--e3), 0 0 46px -18px rgba(198,154,76,.5);}
.card .fact-k{color:var(--brass); margin-bottom:14px;}
.card p{color:var(--sage); margin:0; font-size:.97rem;}
.card-n{
  position:absolute; top:20px; right:24px;
  font-family:var(--font-display); font-size:2.4rem; font-weight:600;
  color:rgba(198,154,76,.15); line-height:1;
}

/* ---- interactive demo --------------------------------------------------- */
.demo{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start;}
.panel{
  position:relative; border-radius:19px; padding:24px;
  background:linear-gradient(162deg, rgba(27,59,50,.62), rgba(11,25,21,.9));
  box-shadow:var(--e3);
}
.panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(158deg, rgba(157,176,166,.26), rgba(157,176,166,.05) 55%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.panel-k{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-dim); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;}

.chips{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px;}
.chip{
  font-family:var(--font-body); font-size:.85rem; color:var(--ivory);
  background:rgba(243,237,225,.045); border:1px solid rgba(157,176,166,.24);
  padding:8px 14px; border-radius:999px; cursor:pointer;
  transition:all .2s var(--ease); text-align:left;
}
.chip:hover{border-color:var(--brass); background:rgba(198,154,76,.1); transform:translateY(-1px);}
.chip[aria-pressed="true"]{background:var(--brass); border-color:var(--brass); color:#22190A; font-weight:600;}

.demo-thread{
  min-height:190px; display:flex; flex-direction:column; gap:9px; padding:14px 12px;
  border-radius:14px; background:rgba(9,21,18,.42); border:1px solid var(--line-2);
  background-image:radial-gradient(circle at 22% 28%, rgba(157,176,166,.05) 1px, transparent 1px),
                   radial-gradient(circle at 72% 68%, rgba(157,176,166,.04) 1px, transparent 1px);
  background-size:38px 38px, 52px 52px;
}
.demo-empty{color:var(--sage-dim); font-family:var(--font-mono); font-size:.78rem; margin:auto; text-align:center; line-height:1.7;}

.send-hint{font-family:var(--font-mono); font-size:.7rem; color:var(--sage-dim); opacity:0; transition:opacity .3s;}
.send-hint.show{opacity:1;}

/* knowledge base list */
.kb-cats{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.kb-cat{
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; color:var(--sage-dim); border:1px solid var(--line-2);
  padding:5px 11px; border-radius:999px; cursor:pointer; transition:all .2s var(--ease);
}
.kb-cat:hover{color:var(--ivory); border-color:rgba(157,176,166,.4);}
.kb-cat[aria-pressed="true"]{background:rgba(198,154,76,.16); border-color:var(--brass); color:var(--brass-2);}

/* a scroll box with a soft top/bottom fade, so the corpus reads as deeper
   than the panel — the list is meant to feel like it keeps going */
.kb{
  display:flex; flex-direction:column; gap:7px;
  max-height:352px; overflow-y:auto; padding:2px 8px 2px 2px;
  scroll-behavior:smooth; scrollbar-width:thin;
  scrollbar-color:rgba(157,176,166,.3) transparent;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 22px), transparent);
}
.kb::-webkit-scrollbar{width:5px;}
.kb::-webkit-scrollbar-thumb{background:rgba(157,176,166,.26); border-radius:99px;}
.kb::-webkit-scrollbar-track{background:transparent;}
.kb-wrap{position:relative;}
.kb-more{
  position:absolute; left:50%; bottom:4px; transform:translateX(-50%) translateY(4px);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em;
  background:var(--brass); color:#22190A; border:0; font-weight:500;
  padding:5px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.75);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.kb-more.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.kb-more:hover{background:var(--brass-2);}

.kb-foot{
  font-family:var(--font-mono); font-size:.66rem; line-height:1.6; color:var(--sage-dim);
  margin:14px 0 0; padding-top:13px; border-top:1px solid var(--line-2);
}
.kb-row{
  display:flex; gap:11px; align-items:flex-start;
  padding:10px 13px; border-radius:11px;
  background:rgba(243,237,225,.025); border:1px solid var(--line-2);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease), transform .4s var(--ease);
}
.kb-row:hover{background:rgba(243,237,225,.05); border-color:rgba(157,176,166,.24);}
.kb-body{flex:1; min-width:0;}
.kb-src{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.05em; color:var(--sage-dim);
  background:rgba(9,21,18,.55); border:1px solid var(--line-2);
  padding:3px 7px; border-radius:5px; white-space:nowrap; flex:none; margin-top:2px; opacity:.75;
}
.kb-row.lit .kb-src{color:var(--brass); border-color:rgba(198,154,76,.45); opacity:1;}
.kb-row.lit{
  background:rgba(198,154,76,.13); border-color:var(--brass);
  box-shadow:0 0 26px -8px rgba(198,154,76,.65);
  transform:translateX(3px);
}
.kb-dot{width:6px; height:6px; border-radius:50%; background:var(--sage-dim); margin-top:7px; flex:none; transition:all .4s;}
@media (prefers-reduced-motion: no-preference){
  .kb-row.lit .kb-dot{animation:pulse 1.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(228,192,121,.6);} 50%{box-shadow:0 0 0 5px rgba(228,192,121,0);}}
}
.kb-row.lit .kb-dot{background:var(--brass-2); box-shadow:0 0 10px var(--brass-2);}
.kb-t{display:block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-dim); margin-bottom:3px;}
.kb-v{display:block; font-size:.86rem; color:var(--ivory); line-height:1.4;}
.kb-row.lit .kb-t{color:var(--brass);}

/* ---- run / progression -------------------------------------------------- */
.run{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-radius:17px; overflow:hidden; box-shadow:var(--e2); position:relative;}
.run::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(158deg, rgba(157,176,166,.24), rgba(157,176,166,.04));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.step{padding:30px 26px 34px; background:linear-gradient(170deg, rgba(27,59,50,.5), rgba(12,27,23,.8)); position:relative; transition:background .3s;}
.step + .step{border-left:1px solid var(--line-2);}
.step:hover{background:linear-gradient(170deg, rgba(33,74,62,.6), rgba(14,31,27,.85));}
.step p{color:var(--sage); margin:0; font-size:.95rem;}
.step .fact-k{color:var(--sage-dim); margin-bottom:12px;}
.step h3 em{font-style:normal; color:var(--wa);}
.rail{height:2px; background:var(--line-2); border-radius:2px; margin:0 0 22px; overflow:hidden;}
.rail i{display:block; height:100%; background:linear-gradient(90deg, var(--brass), var(--brass-2)); width:0; transition:width 1.1s var(--ease);}
.step.in .rail i{width:100%;}
.step:nth-child(2) .rail i{transition-delay:.14s;}
.step:nth-child(3) .rail i{transition-delay:.28s;}

/* ---- closer + footer ---------------------------------------------------- */
.closer{text-align:center; padding:112px 0;}
.closer h2{max-width:22ch; margin:0 auto 18px;}
.closer .lead{margin:0 auto 32px; text-align:center;}
footer{border-top:1px solid var(--line-2); padding:40px 0 60px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start;}
.foot-links{display:flex; gap:26px; font-family:var(--font-mono); font-size:.74rem;}
.foot-links a{color:var(--sage-dim); text-decoration:none; transition:color .18s;}
.foot-links a:hover{color:var(--ivory);}
.foot-note{color:var(--sage-dim); font-size:.82rem; max-width:34rem; margin-top:14px; flex-basis:100%;}

/* ---- scroll reveal ------------------------------------------------------ */
.rv{opacity:1;}

@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .rv.in{opacity:1; transform:none;}
  .rv-d1{transition-delay:.09s;} .rv-d2{transition-delay:.18s;} .rv-d3{transition-delay:.27s;}
  .typing i{animation:blink 1.25s infinite;}
  .typing i:nth-child(2){animation-delay:.18s;}
  .typing i:nth-child(3){animation-delay:.36s;}
  @keyframes blink{0%,60%,100%{opacity:.28; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}
  .orb--wa{animation:drift 26s ease-in-out infinite alternate;}
  .orb--brass{animation:drift 34s ease-in-out infinite alternate-reverse;}
  @keyframes drift{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-4%,5%,0) scale(1.1);}}
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1120px){
  .facts{position:static; width:100%; flex-direction:row; margin-top:18px;}
  .fact{flex:1;}
  .fact--ghost{display:none;}
  .fact::after{display:none;}
  .phone{transform:none; width:100%;}
  .stage:hover .phone{transform:none;}
}
@media (max-width:920px){
  .hero{grid-template-columns:1fr; gap:52px; padding-top:44px;}
  .stage{order:2;}
  .cards{grid-template-columns:1fr;}
  .run{grid-template-columns:1fr;}
  .step + .step{border-left:none; border-top:1px solid var(--line-2);}
  .demo{grid-template-columns:1fr;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .kb-src{display:none;}
  .kb{max-height:300px;}
  .navlinks .link{display:none;}
  .section{padding:68px 0;}
  .closer{padding:78px 0;}
  .facts{flex-direction:column;}
  .thread{min-height:0;}
  .trust{gap:10px; flex-direction:column;}
}

/* ---- pricing ------------------------------------------------------------ */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;}
.tier{
  position:relative; border-radius:19px; padding:30px 26px 32px; display:flex; flex-direction:column;
  background:linear-gradient(162deg, rgba(27,59,50,.66), rgba(12,27,23,.88));
  box-shadow:var(--e2); transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.tier::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(158deg, rgba(157,176,166,.24), rgba(157,176,166,.05) 55%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.tier:hover{transform:translateY(-6px); box-shadow:var(--e3);}
.tier--hero::before{background:linear-gradient(158deg, var(--brass), rgba(198,154,76,.25) 55%, rgba(157,176,166,.06));}
.tier--hero{box-shadow:var(--e3), 0 0 60px -26px rgba(198,154,76,.6);}
.tier-tag{
  position:absolute; top:-11px; left:26px;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--brass); color:#22190A; padding:4px 11px; border-radius:999px; font-weight:500;
}
.tier h3{font-size:1.15rem; margin-bottom:4px;}
.tier .who-for{color:var(--sage-dim); font-size:.86rem; margin:0 0 22px;}
.price-row{display:flex; align-items:baseline; gap:7px; margin-bottom:6px;}
.price-num{font-family:var(--font-display); font-size:2.9rem; font-weight:600; letter-spacing:-.02em; line-height:1;}
.price-cur{font-family:var(--font-mono); font-size:.82rem; color:var(--sage-dim);}
.price-per{color:var(--sage-dim); font-size:.88rem;}
.price-note{font-family:var(--font-mono); font-size:.68rem; color:var(--sage-dim); margin:0 0 24px;}
.tier ul{list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:11px;}
.tier li{display:flex; gap:10px; font-size:.93rem; color:var(--sage); line-height:1.45;}
.tier li b{color:var(--ivory); font-weight:600;}
.tick{width:16px; height:16px; flex:none; margin-top:4px; color:var(--wa);}
.tier .btn{margin-top:auto; justify-content:center;}

.faq{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 44px;}
.faq h3{font-size:1.05rem; margin-bottom:7px;}
.faq p{color:var(--sage); font-size:.94rem; margin:0;}
.qitem{padding-bottom:6px;}

.compare{width:100%; border-collapse:collapse; font-size:.92rem;}
.compare th, .compare td{padding:13px 14px; text-align:left; border-bottom:1px solid var(--line-2);}
.compare th{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-dim); font-weight:400;}
.compare td:first-child{color:var(--ivory);}
.compare td{color:var(--sage);}
.compare tr:last-child td{border-bottom:0;}
.table-scroll{overflow-x:auto; border-radius:15px; box-shadow:var(--e2); background:linear-gradient(162deg, rgba(27,59,50,.5), rgba(12,27,23,.8)); padding:6px 10px;}

@media (max-width:920px){
  .tiers{grid-template-columns:1fr;}
  .faq{grid-template-columns:1fr;}
}