/* ============================================================
   Arifwork — AI employees
   Motion-first design system.
   Light canvas · dark panels · electric green · mono labels.
   ============================================================ */

:root{
  --bg:         #f3f3f0;
  --bg-2:       #ecece8;
  --ink:        #0f0f0f;
  --ink-soft:   #6b6b66;
  --panel:      #121212;
  --panel-2:    #1b1b1b;
  --line:       #e2e2dc;
  --cream:      #faf9f6;
  --green:      #26e07f;
  --green-deep: #15b866;
  --green-ink:  #06220f;
  --red:        #ff5d5d;

  --max: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 28px;

  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.76,0,.24,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--green); color:var(--green-ink); }

/* grain overlay — subtle film texture over everything */
body::after{
  content:""; position:fixed; inset:-8%; z-index:97; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:multiply;
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0) } 25%{ transform:translate(-3.4%,5.2%) }
  50%{ transform:translate(5.2%,-3.4%) } 75%{ transform:translate(-1.7%,-5.2%) } 100%{ transform:translate(0,0) }
}
@media (max-width:860px), (pointer:coarse){ body::after{ animation:none; } }

/* looping CSS animations pause while their section is off screen (toggled in motion.js) */
.is-off, .is-off *, .is-off *::before, .is-off *::after{ animation-play-state:paused !important; }

/* ============================================================
   GLOBAL MOTION LAYER — loader · curtain · cursor · rail
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink); color:#fff;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:var(--pad);
  overflow:hidden;
}
.loader__mark{ position:absolute; top:var(--pad); left:var(--pad); display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:-.02em; font-size:20px; }
.loader__words{
  position:absolute; top:var(--pad); right:var(--pad);
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
  height:16px; overflow:hidden;
}
.loader__words span{ display:block; height:16px; line-height:16px; }
.loader__count{
  font-size:clamp(96px,20vw,260px); font-weight:700; letter-spacing:-.07em; line-height:.8;
  font-variant-numeric:tabular-nums;
}
.loader__count small{ font-size:.28em; letter-spacing:-.02em; color:var(--green); vertical-align:top; margin-left:.05em; }
.loader__tag{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); max-width:220px; text-align:right; line-height:1.6; }
.loader__bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.1); }
.loader__bar i{ display:block; height:100%; width:0; background:var(--green); }
html.is-ready .loader{ pointer-events:none; }

.curtain{
  position:fixed; inset:0; z-index:190; pointer-events:none;
  background:var(--ink);
  transform:translateY(120%); /* keeps the rounded lip (::before) fully off-screen */
  visibility:hidden;
}
.curtain.is-on{ visibility:visible; }
.curtain::before{
  content:""; position:absolute; left:0; right:0; top:-14vh; height:16vh;
  background:var(--ink); border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.curtain::after{
  content:""; position:absolute; left:0; right:0; bottom:-14vh; height:16vh;
  background:var(--ink); border-radius:0 0 50% 50% / 0 0 100% 100%;
}

/* cursor */
.cursor{ display:none; }
@media (pointer:fine){
  html.has-cursor body{ cursor:none; }
  html.has-cursor a, html.has-cursor button{ cursor:none; }
  html.has-cursor input, html.has-cursor textarea, html.has-cursor select{ cursor:auto; }
  .cursor{
    display:block; position:fixed; left:0; top:0; z-index:300; pointer-events:none;
    width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
    background:var(--ink); mix-blend-mode:difference; background:#fff;
  }
  .cursor__ring{
    position:fixed; left:0; top:0; z-index:299; pointer-events:none;
    width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
    border:1.5px solid rgba(15,15,15,.55);
    display:grid; place-items:center;
    transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), border-color .3s;
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-ink);
  }
  .cursor__ring span{ opacity:0; transition:opacity .2s; }
  .cursor__ring.is-link{ width:64px; height:64px; margin:-32px 0 0 -32px; border-color:transparent; background:rgba(38,224,127,.28); }
  .cursor__ring.is-label{ width:88px; height:88px; margin:-44px 0 0 -44px; border-color:transparent; background:var(--green); }
  .cursor__ring.is-label span{ opacity:1; }
  .cursor__ring.is-down{ transform:scale(.8); }
}

/* top progress + chapter rail */
.progress{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:95; pointer-events:none; }
.progress i{ display:block; height:100%; width:100%; background:var(--green); transform-origin:left; transform:scaleX(0); }

.rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  opacity:0; transition:opacity .5s var(--ease);
}
.rail.show{ opacity:1; }
.rail a{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.rail a span{ opacity:0; transform:translateX(6px); transition:all .35s var(--ease); }
.rail a i{ width:6px; height:6px; border-radius:50%; background:#c9c9c2; transition:all .35s var(--ease); flex:none; }
.rail a.is-active i{ background:var(--ink); transform:scale(1.9); }
.rail a.is-active span, .rail:hover a span{ opacity:1; transform:none; }
.rail.on-dark{ color:rgba(255,255,255,.55); }
.rail.on-dark a i{ background:rgba(255,255,255,.3); }
.rail.on-dark a.is-active i{ background:var(--green); }
@media (max-width:1100px){ .rail{ display:none; } }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:22px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.5; }
.eyebrow--onDark{ color:rgba(255,255,255,.55); }
.eyebrow--center{ justify-content:center; }

.section-title{ font-size:clamp(36px,6.4vw,84px); line-height:.98; letter-spacing:-.04em; font-weight:700; }
.section-title .muted{ color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }
.ink{ color:var(--ink); }
.section-head{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.section-head--center{ text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center .section-lead{ margin-left:auto; margin-right:auto; }
.section-lead{ max-width:560px; margin-top:24px; font-size:19px; color:var(--ink-soft); }

/* split text (chars/words) */
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
.split .c{ display:inline-block; }
html.js-motion .split:not(.is-split) { visibility:hidden; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:500; font-size:15.5px;
  cursor:pointer; border:1px solid transparent; white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease-out), background .3s var(--ease), color .3s, box-shadow .3s;
}
.btn[data-magnetic]{ transition-property:background, color, box-shadow; }
.btn > span{ position:relative; display:inline-flex; align-items:center; gap:8px; }
.btn::before{  /* liquid fill */
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:var(--green); transform:translateY(102%);
  transition:transform .5s var(--ease-out);
}
.btn:hover::before{ transform:translateY(0); }
.btn--lg{ padding:18px 32px; font-size:16.5px; }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ color:var(--green-ink); box-shadow:0 14px 30px rgba(38,224,127,.3); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:#cfcfc7; }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:#fff; border-color:var(--ink); }
.btn--green{ background:var(--green); color:var(--green-ink); font-weight:600; }
.btn--green::before{ background:#fff; }
.btn--green:hover{ color:var(--ink); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ color:var(--green-ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:14px; left:0; right:0; z-index:80;
  display:flex; justify-content:center; padding:0 14px;
  transition:transform .5s var(--ease), opacity .4s;
}
.nav__inner{
  width:100%; max-width:var(--max);
  display:flex; align-items:center; gap:20px;
  padding:10px 10px 10px 20px;
  background:rgba(250,249,246,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand__mark{ display:grid; place-items:center; }
.brand__name{ font-weight:600; letter-spacing:-.02em; font-size:19px; }
.nav__live{
  display:flex; align-items:center; gap:8px; margin-left:-6px; margin-right:auto;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  padding-left:14px; border-left:1px solid var(--line);
}
.nav__live i{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--green); }
.nav__live i::after, .rcard__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:rgba(38,224,127,.6); animation:livePulse 1.8s ease-out infinite; }
@keyframes livePulse{ 0%{ transform:scale(1); opacity:1 } 100%{ transform:scale(3.85); opacity:0 } }
.nav__links{ display:flex; gap:28px; }
.nav__links a{ position:relative; font-size:15px; color:var(--ink-soft); transition:color .2s; padding:4px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__cta{ padding:11px 20px; }
.nav.hide{ transform:translateY(-110px); }
.nav.on-dark .nav__inner{ background:rgba(18,18,18,.6); border-color:rgba(255,255,255,.1); color:#fff; }
.nav.on-dark .nav__links a{ color:rgba(255,255,255,.7); } .nav.on-dark .nav__links a:hover{ color:#fff; }
.nav.on-dark .nav__links a::after{ background:var(--green); }
.nav.on-dark .nav__live{ color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.14); }
.nav.on-dark .nav__cta{ background:var(--green); color:var(--green-ink); }
@media (max-width:980px){ .nav__live{ display:none; } }
@media (max-width:860px){ .nav__links{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  padding:150px var(--pad) 60px;
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__grid{
  position:absolute; inset:-10%;
  background-image:linear-gradient(rgba(15,15,15,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15,15,15,.06) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
}
.hero__glow{
  position:absolute; width:70vw; height:70vw; max-width:900px; max-height:900px; right:-15vw; top:-20vw; border-radius:50%;
  background:radial-gradient(circle, rgba(38,224,127,.26), rgba(38,224,127,0) 62%);
}
.hero__inner{
  position:relative; z-index:2; max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,60px); align-items:center;
}
.hero__copy{ position:relative; }
.hero__title{
  font-size:clamp(56px,8.6vw,132px); line-height:.9; letter-spacing:-.055em; font-weight:700;
}
.hero__title .ink{ color:var(--ink); }
.hero__title .accent{ position:relative; display:inline-block; color:var(--green-deep); }
.hero__sub{ max-width:520px; margin-top:30px; font-size:clamp(17px,2.2vw,21px); color:var(--ink-soft); }
.hero__cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero__proof{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.hero__proof span{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px;
}
.hero__proof span i{ width:6px; height:6px; border-radius:50%; background:var(--green); }

/* stage — 3D console */
.hero__stage{
  position:relative; height:min(660px,72vh); min-height:460px;
  perspective:1400px; transform-style:preserve-3d;
}
.console{
  position:absolute; inset:5% 0 5% 6%;
  background:linear-gradient(180deg,#1b1c1f 0%,#0b0b0c 100%);
  border:1px solid rgba(255,255,255,.09); border-radius:30px;
  box-shadow:0 70px 120px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.08) inset;
  color:#fff; padding:clamp(18px,2.4vw,28px);
  display:flex; flex-direction:column; gap:16px;
  transform:rotateY(-14deg) rotateX(7deg);
  transform-style:preserve-3d; will-change:transform;
}
.console::after{ /* glass glare */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%);
}
.console__bar{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.console__bar b{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:500; }
.console__bar b i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.console__clock{ font-family:var(--mono); font-size:clamp(34px,4.2vw,52px); letter-spacing:-.03em; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.console__clock em{ font-style:normal; font-size:.38em; color:var(--green); margin-left:6px; letter-spacing:.06em; }
.console__clock small{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-top:8px; }
.console__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.console__kpis div{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:10px 12px; }
.console__kpis small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:4px; }
.console__kpis b{ font-size:clamp(16px,1.6vw,20px); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.console__kpis b.on{ color:var(--green); }
.feed{ display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow:hidden; contain:layout paint; }
.frow{
  display:flex; align-items:center; gap:12px; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:14px;
  padding:10px 12px;
}
.frow svg{ width:30px; height:30px; flex:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.frow div{ min-width:0; flex:1; }
.frow b{ display:block; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frow small{ display:block; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frow em{ flex:none; font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:rgba(38,224,127,.14); color:var(--green); }
.frow em.wait{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); }
.console__bars{ display:flex; align-items:flex-end; gap:5px; height:34px; opacity:.9; }
.console__bars i{ flex:1; background:linear-gradient(180deg,#5affae,var(--green-deep)); border-radius:3px 3px 0 0; height:30%; transform-origin:bottom; animation:eq 2.4s ease-in-out infinite; }
.console__bars i:nth-child(2n){ animation-delay:-.6s } .console__bars i:nth-child(3n){ animation-delay:-1.3s } .console__bars i:nth-child(5n){ animation-delay:-1.9s }
@keyframes eq{ 0%,100%{ transform:scaleY(.3) } 50%{ transform:scaleY(1) } }

/* floating objects around the console */
.floater{
  position:absolute; border-radius:30%;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.2));
  animation:float 8s var(--ease) infinite; will-change:transform;
}
.floater::before{
  content:""; position:absolute; top:14%; left:18%; width:30%; height:24%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); filter:blur(1px);
}
.floater--chat{ top:-4%; left:-6%; width:110px; height:110px; border-radius:40% 40% 40% 10%; background:radial-gradient(circle at 32% 28%, #7dffb8, var(--green) 45%, var(--green-deep)); animation-delay:-.5s; }
.floater--bolt{ bottom:4%; left:-2%; width:72px; height:72px; border-radius:30%; background:radial-gradient(circle at 30% 25%, #fff, #c7ccd0 60%, #9aa0a4); animation-delay:-3s; }
.floater--cal{ top:20%; right:-4%; width:58px; height:58px; border-radius:30%; background:radial-gradient(circle at 30% 25%, #ffe2c0, #eca05f 60%, #d08647); animation-delay:-6s; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-4deg) } 50%{ transform:translateY(-22px) rotate(6deg) } }
html.js-motion .hero__stage .floater{ animation:none; } /* story.js starts the float below after the intro */
/* idle float on translate/rotate (not transform) — compositor-driven, composes with GSAP's intro + parallax */
@keyframes decoFloat{ from{ translate:0 0; rotate:0deg } to{ translate:0 var(--fy); rotate:var(--fr) } }
html.js-motion .hero__stage .is-floating{ animation:decoFloat var(--fd) ease-in-out 1.2s infinite alternate both; }

.hchip{
  position:absolute; display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:var(--ink); font-family:var(--mono); font-size:12.5px;
  padding:10px 15px; border-radius:999px; border:1px solid var(--line);
  box-shadow:0 20px 40px rgba(0,0,0,.14); white-space:nowrap; will-change:transform;
}
.hchip--1{ right:-2%; bottom:14%; }
.hchip--2{ left:-4%; top:38%; }
.schip__dot{
  width:16px; height:16px; border-radius:50%; flex:none; position:relative;
  background:radial-gradient(circle at 36% 30%, #b6ffd8, #2fe086 55%, #12a861);
  box-shadow:0 0 10px rgba(47,224,134,.6);
}
.schip__dot::after{ content:""; position:absolute; left:4px; top:5.5px; width:5px; height:2.5px; border-left:2px solid #06220f; border-bottom:2px solid #06220f; transform:rotate(-45deg); }

.hero__scroll{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.hero__scroll i{ width:1px; height:40px; background:linear-gradient(var(--ink-soft),transparent); animation:scrollPulse 1.8s var(--ease) infinite; }
@keyframes scrollPulse{ 0%,100%{ opacity:.3; transform:scaleY(.6) } 50%{ opacity:1; transform:scaleY(1) } }

@media (max-width:980px){
  .hero{ padding-top:120px; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__stage{ height:480px; min-height:0; }
  .console{ inset:4% 4% 4% 10%; transform:rotateY(-10deg) rotateX(5deg); }
  .floater--chat{ width:74px; height:74px; }
  .floater--bolt{ width:52px; height:52px; }
  .hero__scroll{ display:none; }
}
@media (max-width:520px){
  .hero__stage{ height:430px; }
  .console{ inset:2% 0 2% 4%; padding:14px; gap:10px; }
  .console__kpis{ grid-template-columns:repeat(2,1fr); }
  .console__kpis div:nth-child(3){ display:none; }
  .hchip--2{ display:none; }
}

/* ============================================================
   STRIP / MARQUEE
   ============================================================ */
.strip{ padding:28px 0 8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--cream); position:relative; z-index:2; }
.strip__label{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px; }
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee__track{
  display:flex; gap:26px; align-items:center; white-space:nowrap; width:max-content;
  font-size:clamp(26px,4vw,44px); font-weight:600; letter-spacing:-.03em;
  animation:scrollx 40s linear infinite; padding-bottom:28px; will-change:transform;
}
.marquee__track b{ color:var(--green-deep); font-weight:400; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================
   CHAPTER SHELL (shared)
   ============================================================ */
.chapter{ position:relative; }
.chapter__pin{ position:relative; min-height:100svh; display:grid; align-items:center; padding:100px var(--pad) 40px; overflow:hidden; }
.chapter__inner{ width:100%; max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(24px,5vw,80px); align-items:center; }
.chapter__num{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:12px; margin-bottom:26px;
}
.chapter__num b{ font-weight:500; color:var(--green-deep); }
.chapter__num::after{ content:""; flex:1; max-width:120px; height:1px; background:currentColor; opacity:.3; }
@media (max-width:860px){
  .chapter__pin{ padding:88px var(--pad) 24px; align-items:start; }
  .chapter__inner{ grid-template-columns:1fr; gap:18px; align-content:start; }
}

/* ============================================================
   01 — THE LEAK (dark)
   ============================================================ */
.leak{ background:#0b0b0c; color:#fff; }
.leak .chapter__num{ color:rgba(255,255,255,.5); }
.leak__copy{ position:relative; }
.leak__lines{ position:relative; min-height:3.2em; font-size:clamp(40px,6.4vw,84px); }
.leak__line{
  position:absolute; left:0; top:0; width:100%;
  font-size:1em; line-height:.98; letter-spacing:-.045em; font-weight:700;
  opacity:0;
}
.leak__line .muted{ color:rgba(255,255,255,.4); }
.leak__line em{ font-style:normal; color:var(--red); }
.leak__line .g{ color:var(--green); }
.leak__sub{ margin-top:28px; max-width:460px; color:rgba(255,255,255,.55); font-size:18px; opacity:0; }

.leak__stage{ position:relative; height:min(640px,70svh); min-height:420px; display:grid; place-items:center; }
.leak__dots{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(10,1fr); gap:8px; place-items:center;
  width:min(100%,520px); height:min(100%,360px); margin:auto; pointer-events:none; z-index:0;
}
.leak__dots i{ width:10px; height:10px; border-radius:50%; background:var(--red); opacity:0; transform:scale(0); box-shadow:0 0 14px rgba(255,93,93,.8); }

.lphone{
  position:relative; z-index:2;
  width:min(300px,64vw); aspect-ratio:9/18.6;
  background:#131416; border-radius:40px; padding:10px;
  border:1px solid #2b2c30; box-shadow:0 60px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  will-change:transform, filter;
}
.lphone::before{ content:""; position:absolute; top:18px; left:50%; width:90px; height:26px; margin-left:-45px; background:#0a0a0b; border-radius:999px; z-index:3; }
.lphone__screen{ position:relative; height:100%; border-radius:32px; overflow:hidden; background:#0e0f12; }
.lscreen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:64px 18px 24px; text-align:center; }
.lscreen--ring{ background:radial-gradient(120% 70% at 50% 0%, rgba(38,224,127,.18), transparent 60%), #0e0f12; }
.lscreen__time{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:rgba(255,255,255,.55); }
.lscreen__avatar{
  position:relative; width:78px; height:78px; border-radius:50%; margin:34px 0 14px;
  background:linear-gradient(180deg,#3b3f45,#1b1d21); display:grid; place-items:center;
  font-size:30px; font-weight:600; color:#fff;
}
.lscreen__avatar i{ position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(38,224,127,.55); animation:ring 1.5s ease-out infinite; }
.lscreen__avatar i:nth-child(2){ animation-delay:.5s; } .lscreen__avatar i:nth-child(3){ animation-delay:1s; }
@keyframes ring{ 0%{ transform:scale(.85); opacity:.9 } 100%{ transform:scale(1.9); opacity:0 } }
.lscreen__name{ font-size:21px; font-weight:600; letter-spacing:-.02em; }
.lscreen__sub{ font-family:var(--mono); font-size:12px; color:var(--green); margin-top:6px; letter-spacing:.06em; }
.lscreen__sub.red{ color:var(--red); }
.lscreen__btns{ margin-top:auto; display:flex; gap:48px; }
.lscreen__btns b{ width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-size:24px; }
.lscreen__btns b:first-child{ background:var(--red); } .lscreen__btns b:last-child{ background:var(--green); color:var(--green-ink); animation:pulseBtn 1.4s ease-in-out infinite; }
@keyframes pulseBtn{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.1) } }

.lscreen--missed{ opacity:0; align-items:stretch; text-align:left; padding-top:58px; gap:10px; background:#0e0f12; }
.lmiss{ align-self:center; display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--red); letter-spacing:.06em; margin-bottom:8px; }
.lmiss i{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); }
.lmsg{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:11px 13px;
  font-size:13px; line-height:1.4; color:#eceff1; opacity:0;
}
.lmsg small{ display:block; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.4); margin-top:6px; letter-spacing:.06em; }
.lmsg small em{ font-style:normal; color:var(--red); }
.lmsg.call{ display:flex; align-items:center; gap:10px; }
.lmsg.call b{ font-weight:500; } .lmsg.call b small{ margin-top:2px; }
.lmsg.call svg{ width:28px; height:28px; flex:none; }

.leak__ghosts{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.ghost{
  position:absolute; left:50%; top:50%; width:230px; margin-left:-115px;
  background:#fff; color:var(--ink); border-radius:14px; padding:10px 13px; font-size:13px; line-height:1.35;
  box-shadow:0 20px 50px rgba(0,0,0,.5); opacity:0;
}
.ghost small{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--red); margin-top:5px; letter-spacing:.06em; }

.leak__lost{
  position:absolute; right:0; bottom:0; text-align:right; opacity:0; z-index:4;
}
.leak__lost b{ display:block; font-size:clamp(44px,6vw,80px); font-weight:700; letter-spacing:-.05em; line-height:.95; color:var(--red); font-variant-numeric:tabular-nums; }
.leak__lost small{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
@media (max-width:860px){
  .leak__lines{ min-height:2.4em; font-size:clamp(34px,8.8vw,56px); }
  .leak__sub{ display:none; }
  .leak__stage{ height:auto; min-height:0; }
  .lphone{ width:min(230px,58vw); }
  .leak__lost{ right:4px; bottom:-6px; }
  .leak__lost b{ font-size:34px; }
  .ghost{ width:190px; margin-left:-95px; font-size:12px; }
}

/* ============================================================
   02 — THE HIRE (3D handoff)
   ============================================================ */
.hire{
  background:var(--bg); border-radius:56px 56px 0 0; margin-top:-56px; position:relative; z-index:3;
}
.hire .chapter__pin{ display:block; padding-top:110px; }
.hire__head{ max-width:var(--max); margin:0 auto 30px; padding:0 var(--pad); text-align:center; }
.hire__head .chapter__num{ justify-content:center; }
.hire__head .chapter__num::after{ display:none; }
.hire__title{ font-size:clamp(36px,6.4vw,84px); line-height:.96; letter-spacing:-.045em; font-weight:700; }
.hire__title .muted{ color:var(--ink-soft); }

.stage{ position:relative; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.hstage{
  position:relative; width:100%; aspect-ratio:1200/640; max-height:60svh; min-height:280px;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 30px 70px rgba(0,0,0,.09), inset 0 2px 0 rgba(255,255,255,.6);
  overflow:hidden; cursor:default; opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(130% 120% at 72% 18%, rgba(38,224,127,.10), transparent 55%), linear-gradient(180deg,#ffffff 0%, #f3f4ef 62%, #e9ebe3 100%);
}
.hstage.ready{ opacity:1; }
html:not(.js-motion) .hstage{ opacity:1; }
.hstage svg{ display:block; width:100%; height:100%; overflow:visible; }
.hstage svg text{ pointer-events:none; }
.hstage__hint{
  position:absolute; left:50%; bottom:calc(var(--radius) * -0.1 + 14px); transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px; pointer-events:none; white-space:nowrap;
  bottom:auto; top:14px;
}
.hstage__hint i{ width:28px; height:1px; background:var(--ink-soft); }
.stage__steps{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; justify-content:center; }
.stage__step{
  font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink-soft);
  padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; transition:all .4s var(--ease);
}
.stage__step b{ color:var(--ink); margin-right:6px; }
.stage__step.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.stage__step.is-active b{ color:var(--green); }
@media (max-width:620px){
  .hire .chapter__pin{ padding-top:96px; }
  .hstage{ aspect-ratio:4/3.2; }
  .hstage__hint{ top:10px; font-size:10px; }
  .stage__step{ font-size:11.5px; padding:7px 12px; }
}

/* ============================================================
   03 — AT WORK (one phone, five states)
   ============================================================ */
.work{ background:var(--cream); }
.work .chapter__inner{ grid-template-columns:1fr .9fr; }
.work__steps{ list-style:none; position:relative; padding-left:32px; }
.work__bar{ position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line); }
.work__bar i{ position:absolute; left:0; top:0; width:100%; height:100%; background:var(--ink); transform-origin:top; transform:scaleY(0); }
.wstep{ padding:14px 0; opacity:.28; transition:none; }
.wstep__n{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--green-deep); }
.wstep h3{ font-size:clamp(24px,3vw,40px); line-height:1.02; letter-spacing:-.035em; font-weight:700; margin:6px 0 6px; }
.wstep p{ font-size:15.5px; color:var(--ink-soft); max-width:36ch; }

.work__stage{ position:relative; height:min(640px,72svh); min-height:440px; display:grid; place-items:center; perspective:1200px; }
.work__ring{ position:absolute; width:min(118%,560px); aspect-ratio:1; }
.work__ring circle{ fill:none; stroke-width:1.5; }
.work__ring .track{ stroke:var(--line); }
.work__ring .fill{ stroke:var(--green-deep); stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.wphone{
  position:relative; z-index:2; width:min(290px,62vw); aspect-ratio:9/18.6;
  background:#0c0c0c; border-radius:40px; padding:10px; border:1px solid #2a2a2a;
  box-shadow:0 60px 120px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
  transform-style:preserve-3d; will-change:transform;
}
.wphone::before{ content:""; position:absolute; top:18px; left:50%; width:84px; height:24px; margin-left:-42px; background:#0a0a0b; border-radius:999px; z-index:3; }
.wphone__screen{ position:relative; height:100%; border-radius:32px; overflow:hidden; background:#efeae2; }
.wscreen{ position:absolute; inset:0; padding:58px 14px 16px; display:flex; flex-direction:column; gap:9px; opacity:0; }
.wscreen > .anim{ opacity:0; }
.wscreen__bar{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.wscreen__bar i{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.wscreen__bar small{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); }

/* call state */
.wscreen--call{ background:linear-gradient(180deg,#14171a,#0a0b0d); color:#eef1ef; align-items:center; text-align:center; }
.wcall__tag{ background:rgba(255,255,255,.08); color:#b9bdc2; font-size:11px; padding:5px 11px; border-radius:999px; }
.wcall__avatar{ position:relative; width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:#0f0f0f; margin:16px 0 10px; box-shadow:0 0 0 3px rgba(38,224,127,.22); }
.wcall__avatar::after{ content:""; position:absolute; inset:-7px; border-radius:24px; border:2px solid rgba(38,224,127,.55); animation:callRing 1.6s ease-out infinite; }
@keyframes callRing{ 0%{ transform:scale(.9); opacity:.75 } 100%{ transform:scale(1.28); opacity:0 } }
.wcall__name{ font-weight:600; font-size:15px; }
.wcall__sub{ font-family:var(--mono); font-size:12px; color:var(--green); margin-top:3px; }
.wave{ display:flex; align-items:center; gap:4px; height:24px; margin:12px 0 4px; }
.wave i{ width:3px; height:22px; border-radius:2px; background:var(--green); transform:scaleY(.273); animation:wave 1s ease-in-out infinite; }
.wave i:nth-child(2){ animation-delay:.12s } .wave i:nth-child(3){ animation-delay:.24s } .wave i:nth-child(4){ animation-delay:.36s } .wave i:nth-child(5){ animation-delay:.24s } .wave i:nth-child(6){ animation-delay:.12s }
@keyframes wave{ 0%,100%{ transform:scaleY(.273) } 50%{ transform:scaleY(1) } }
.wtx{ width:100%; display:flex; flex-direction:column; gap:7px; text-align:left; }
.txline{ font-size:12px; line-height:1.35; padding:7px 10px; border-radius:11px; max-width:92%; }
.txline span{ display:block; font-size:9px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-bottom:2px; }
.txline--r{ align-self:flex-start; background:rgba(38,224,127,.15); color:#d9ffe9; } .txline--r span{ color:var(--green); }
.txline--c{ align-self:flex-end; background:rgba(255,255,255,.07); color:#e8eaec; } .txline--c span{ color:#9aa0a6; text-align:right; }

/* chat state */
.bubble{ max-width:84%; padding:10px 13px; border-radius:16px; font-size:13.5px; line-height:1.4; }
.bubble--in{ align-self:flex-start; background:#fff; color:#1a1a1a; border-bottom-left-radius:5px; }
.bubble--out{ align-self:flex-end; background:var(--green); color:var(--green-ink); border-bottom-right-radius:5px; }
.bubble .time{ display:block; font-size:10px; opacity:.5; margin-top:4px; }
.typing{ align-self:flex-start; display:flex; gap:4px; padding:10px 13px; background:#fff; border-radius:16px; border-bottom-left-radius:5px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:#9aa0a6; animation:typing 1s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes typing{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(-4px); opacity:1 } }

/* calendar state */
.wscreen--cal{ background:#fff; }
.wcal__month{ font-weight:600; letter-spacing:-.02em; font-size:15px; display:flex; justify-content:space-between; align-items:center; }
.wcal__month small{ font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); }
.wcal__days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-family:var(--mono); font-size:10px; text-align:center; color:var(--ink-soft); }
.wcal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.wcal__grid span{ aspect-ratio:1; display:grid; place-items:center; border-radius:8px; font-size:12px; background:#f3f3f0; color:var(--ink); }
.wcal__grid span.sel{ background:var(--ink); color:#fff; }
.wcal__slots{ display:grid; gap:6px; margin-top:4px; }
.wcal__slots div{ display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:12.5px; font-family:var(--mono); }
.wcal__slots div span{ position:relative; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.wcal__slots div span .b{ position:absolute; right:0; top:0; opacity:0; white-space:nowrap; font-weight:500; }
.wcal__slots div span em{ font-style:normal; }
.wcal__slots div.gone{ opacity:.4; }

/* reminder state (lock screen) */
.wscreen--remind{ background:radial-gradient(120% 60% at 50% 0%, #26e07f33, transparent 60%), linear-gradient(180deg,#1a1d22,#0d0e11); color:#fff; align-items:center; text-align:center; }
.wlock__time{ font-size:48px; font-weight:600; letter-spacing:-.04em; line-height:1; margin-top:16px; }
.wlock__date{ font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.55); letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }
.wnotif{
  width:100%; margin-top:auto; background:rgba(255,255,255,.14); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:12px 13px; text-align:left;
  display:flex; gap:10px; align-items:flex-start; color:#fff;
}
.wnotif svg{ width:32px; height:32px; flex:none; }
.wnotif b{ display:block; font-size:13px; font-weight:600; } .wnotif b small{ float:right; font-family:var(--mono); font-size:10px; opacity:.6; font-weight:400; }
.wnotif p{ font-size:12.5px; line-height:1.35; color:rgba(255,255,255,.85); margin-top:2px; }

/* handoff state */
.wscreen--hand{ background:#f3f3f0; }
.whand__card{ background:var(--ink); color:#fff; border-radius:18px; padding:14px; }
.whand__card small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:8px; }
.whand__card b{ font-size:15px; font-weight:600; display:block; letter-spacing:-.01em; }
.whand__card p{ font-size:12.5px; color:rgba(255,255,255,.7); margin-top:6px; line-height:1.4; }
.whand__row{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-size:12.5px; }
.whand__row i{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12px; font-weight:600; background:#eceae3; }
.whand__row b{ display:block; font-size:12.5px; } .whand__row small{ font-family:var(--mono); font-size:10px; color:var(--ink-soft); }
.whand__row.you{ background:var(--green); border-color:var(--green); color:var(--green-ink); }
.whand__row.you i{ background:var(--green-ink); color:var(--green); }
.whand__arrow{ align-self:center; font-size:20px; color:var(--ink-soft); line-height:1; }

.work__badges{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.wbadge{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:12px; padding:9px 14px; border-radius:999px;
  box-shadow:0 18px 40px rgba(0,0,0,.22); opacity:0; white-space:nowrap;
}
.wbadge i{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.wbadge--0{ left:4%; top:18%; } .wbadge--1{ right:2%; top:30%; } .wbadge--2{ left:2%; top:52%; } .wbadge--3{ right:0; top:62%; } .wbadge--4{ left:6%; bottom:14%; }
@media (max-width:860px){
  .work .chapter__inner{ grid-template-columns:1fr; }
  .work__steps{ padding-left:22px; }
  .wstep{ position:absolute; left:22px; right:0; top:0; padding:0; }
  .work__steps{ height:120px; }
  .wstep h3{ font-size:26px; } .wstep p{ font-size:14px; }
  .work__stage{ height:auto; min-height:0; }
  .wphone{ width:min(230px,58vw); }
  .wscreen{ padding-top:46px; gap:7px; }
  .bubble{ font-size:12px; } .wlock__time{ font-size:38px; }
  .wbadge{ font-size:11px; padding:7px 11px; }
  .wbadge--0{ left:0; top:10%; } .wbadge--1{ right:0; top:22%; } .wbadge--2{ left:0; top:48%; } .wbadge--3{ right:0; top:60%; } .wbadge--4{ left:0; bottom:6%; }
}

/* ============================================================
   04 — THE TEAM (horizontal)
   ============================================================ */
.team{ background:var(--ink); color:#fff; overflow:hidden; }
.team__pin{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:100px 0 40px; }
.team__head{ max-width:var(--max); margin:0 auto 28px; padding:0 var(--pad); width:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.team__head .chapter__num{ color:rgba(255,255,255,.5); }
.team__title{ font-size:clamp(36px,6vw,78px); line-height:.96; letter-spacing:-.045em; font-weight:700; }
.team__title .muted{ color:rgba(255,255,255,.4); }
.team__drag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:10px; white-space:nowrap; }
.team__drag i{ width:60px; height:1px; background:rgba(255,255,255,.4); position:relative; }
.team__drag i::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid rgba(255,255,255,.6); border-right:1px solid rgba(255,255,255,.6); transform:rotate(45deg); }
.team__track{ display:flex; gap:22px; padding:0 var(--pad); width:max-content; will-change:transform; }
.tcard{
  position:relative; flex:none; width:min(880px,82vw); height:min(600px,66svh); min-height:440px;
  border-radius:34px; padding:clamp(26px,3.5vw,48px); overflow:hidden;
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  background:var(--cream); color:var(--ink); border:1px solid rgba(255,255,255,.06);
}
.tcard--dark{ background:#1b1c1f; color:#fff; }
.tcard--green{ background:var(--green); color:var(--green-ink); }
.tcard__num{ position:absolute; right:26px; top:18px; font-size:clamp(90px,12vw,180px); font-weight:700; letter-spacing:-.06em; line-height:1; opacity:.08; pointer-events:none; }
.tcard__role{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px; border-radius:999px; background:rgba(0,0,0,.06); margin-bottom:18px; }
.tcard--dark .tcard__role{ background:rgba(255,255,255,.1); }
.tcard--green .tcard__role{ background:rgba(6,34,15,.12); }
.tcard__role i{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.tcard--green .tcard__role i{ background:var(--green-ink); }
.tcard__name{ font-size:clamp(44px,6vw,88px); font-weight:700; letter-spacing:-.05em; line-height:.9; }
.tcard__job{ font-size:clamp(18px,2vw,24px); font-weight:500; letter-spacing:-.02em; margin-top:10px; opacity:.85; }
.tcard__copy > p{ margin-top:14px; max-width:40ch; font-size:16px; opacity:.72; }
.ticks{ list-style:none; margin-top:20px; display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:28px; font-size:15px; opacity:.85; }
.ticks li::before{ content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:50%; background:var(--green); box-shadow:inset 0 0 0 2px rgba(0,0,0,.08); }
.ticks li::after{ content:""; position:absolute; left:5px; top:8px; width:7px; height:4px; border-left:2px solid var(--green-ink); border-bottom:2px solid var(--green-ink); transform:rotate(-45deg); }
.tcard--green .ticks li::before{ background:var(--green-ink); } .tcard--green .ticks li::after{ border-color:var(--green); }
.tcard__phone{ will-change:transform; }
.tcard--cta{ background:var(--panel-2); color:#fff; display:grid; grid-template-columns:1fr; place-items:center; text-align:center; width:min(620px,82vw); }
.tcard--cta h3{ font-size:clamp(34px,4.6vw,64px); line-height:.95; letter-spacing:-.045em; font-weight:700; }
.tcard--cta p{ margin:16px auto 28px; max-width:36ch; color:rgba(255,255,255,.6); }

/* phone mockup (shared with subpages) */
.phone{ width:min(290px,100%); margin:0 auto; background:#0c0c0c; border-radius:30px; padding:10px; border:1px solid #2a2a2a; box-shadow:0 30px 60px rgba(0,0,0,.25); }
.phone__bar{ display:flex; align-items:center; gap:8px; color:#eafff3; font-size:13px; font-weight:500; padding:8px 12px 12px; }
.phone__bar i{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.phone__body{ background:#efeae2; border-radius:20px; padding:14px; min-height:290px; display:flex; flex-direction:column; gap:10px; }
.miss{ align-self:center; background:#e4ddd2; color:#8a8375; font-size:11.5px; padding:6px 12px; border-radius:999px; }
.phone .bubble{ opacity:0; transform:translateY(10px); animation:bubbleIn .5s var(--ease) forwards; }
@keyframes bubbleIn{ to{ opacity:1; transform:translateY(0); } }
.call{ background:linear-gradient(180deg,#14171a,#0a0b0d); border-radius:20px; padding:20px 16px 16px; min-height:290px; display:flex; flex-direction:column; align-items:center; color:#eef1ef; text-align:center; }
.call__tag{ align-self:center; background:rgba(255,255,255,.08); color:#b9bdc2; font-size:11px; padding:5px 11px; border-radius:999px; margin-bottom:16px; }
.call__tag b{ color:#eef1ef; }
.call__avatar{ position:relative; width:58px; height:58px; border-radius:17px; display:grid; place-items:center; background:#0f0f0f; margin-bottom:12px; box-shadow:0 0 0 3px rgba(38,224,127,.22); }
.call__ring{ position:absolute; inset:-6px; border-radius:22px; border:2px solid rgba(38,224,127,.55); animation:callRing 1.6s ease-out infinite; }
.call__name{ font-weight:600; font-size:15px; }
.call__sub{ font-family:var(--mono); font-size:12px; color:var(--green); margin-top:3px; }
.call__wave{ display:flex; align-items:center; gap:4px; height:24px; margin:13px 0 4px; }
.call__wave i{ width:3px; height:22px; border-radius:2px; background:#3a3f45; transform:scaleY(.273); transition:background .3s; }
.call__wave.live i{ background:var(--green); animation:wave 1s ease-in-out infinite; }
.call__wave.live i:nth-child(2){ animation-delay:.12s } .call__wave.live i:nth-child(3){ animation-delay:.24s } .call__wave.live i:nth-child(4){ animation-delay:.36s } .call__wave.live i:nth-child(5){ animation-delay:.24s } .call__wave.live i:nth-child(6){ animation-delay:.12s }
.call__tx{ width:100%; margin-top:10px; display:flex; flex-direction:column; gap:7px; overflow:hidden; text-align:left; }
.call__tx .txline{ opacity:0; transform:translateY(6px); animation:bubbleIn .4s var(--ease) forwards; }

@media (max-width:860px){
  .team__pin{ padding-top:90px; }
  .team__head{ flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:18px; }
  .tcard{ width:86vw; height:auto; min-height:0; grid-template-columns:1fr; gap:14px; padding:22px; align-content:start; }
  .tcard__num{ font-size:80px; right:16px; top:8px; }
  .tcard__copy > p{ display:none; }
  .ticks{ display:none; }
  .tcard__phone{ justify-self:center; }
  .phone{ width:min(250px,100%); }
  .phone__body, .call{ min-height:240px; }
  .tcard--cta{ width:86vw; }
}

/* ============================================================
   05 — THE PAYOFF (calendar fills)
   ============================================================ */
.payoff{ background:var(--bg); }
.payoff .chapter__inner{ grid-template-columns:.85fr 1.15fr; }
.payoff__title{ font-size:clamp(40px,6.4vw,88px); line-height:.94; letter-spacing:-.045em; font-weight:700; }
.payoff__title .full{ display:inline-block; color:var(--green-deep); transform-origin:left bottom; }
.payoff__sub{ margin-top:22px; max-width:420px; color:var(--ink-soft); font-size:18px; }
.payoff__num{ margin-top:34px; border-top:1px solid var(--ink); padding-top:18px; }
.payoff__num b{ display:block; font-size:clamp(46px,6.4vw,88px); font-weight:700; letter-spacing:-.055em; line-height:.95; font-variant-numeric:tabular-nums; }
.payoff__num small{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:8px; }

.payoff__stage{ position:relative; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; }
.cal{
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.08); will-change:transform;
}
.cal__head{ display:grid; grid-template-columns:44px repeat(7,1fr); gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; text-align:center; }
.cal__grid{ display:grid; grid-template-columns:44px repeat(7,1fr); gap:6px; }
.cal__hour{ font-family:var(--mono); font-size:10px; color:var(--ink-soft); display:flex; align-items:center; }
.cell{ position:relative; height:clamp(26px,3.6vh,36px); border-radius:8px; background:var(--bg); overflow:hidden; }
.cell__fill{ position:absolute; inset:0; background:var(--green); transform:scaleX(0); transform-origin:left; display:flex; align-items:center; padding:0 7px; gap:5px; font-family:var(--mono); font-size:9.5px; color:var(--green-ink); white-space:nowrap; }
.cell__fill::before{ content:"✓"; font-weight:700; }
.cell--night .cell__fill{ background:var(--ink); color:var(--green); }
.cell--night .cell__fill::before{ content:"☾"; }

.dial{ position:relative; width:clamp(120px,14vw,180px); aspect-ratio:1; }
.dial svg{ width:100%; height:100%; overflow:visible; }
.dial .d-track{ fill:none; stroke:var(--line); stroke-width:10; }
.dial .d-night{ fill:none; stroke:#d7d7cf; stroke-width:10; }
.dial .d-fill{ fill:none; stroke:var(--green); stroke-width:10; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.dial__hand{ position:absolute; left:50%; top:50%; width:2px; height:42%; margin-left:-1px; background:var(--ink); transform-origin:50% 0; transform:rotate(180deg); border-radius:2px; }
.dial__hand::after{ content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--ink); }
.dial__label{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); line-height:1.4; }
.dial__label b{ display:block; font-size:16px; color:var(--ink); letter-spacing:-.02em; font-family:var(--font); font-weight:600; }
.dial__chip{
  position:absolute; left:50%; top:-14px; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; padding:7px 11px; border-radius:999px; white-space:nowrap; opacity:0;
}
.dial__chip i{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:6px; }
@media (max-width:1100px){ .payoff__stage{ grid-template-columns:1fr; } .dial{ display:none; } }
@media (max-width:860px){
  .payoff .chapter__inner{ grid-template-columns:1fr; }
  .payoff__sub{ display:none; }
  .payoff__num{ margin-top:14px; padding-top:12px; }
  .payoff__num b{ font-size:40px; }
  .cal{ padding:12px; border-radius:18px; }
  .cal__head, .cal__grid{ grid-template-columns:34px repeat(7,1fr); gap:4px; }
  .cell{ height:clamp(20px,3.2vh,28px); }
  .cell__fill{ font-size:0; justify-content:center; padding:0; }
  .cell__fill::before{ font-size:10px; }
}

/* ============================================================
   06 — COMPARE (versus)
   ============================================================ */
.compare{ padding:clamp(80px,12vw,160px) 0; background:var(--cream); }
.compare .section-head{ margin-bottom:46px; }
.vs{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch; }
.vs__col{ border-radius:var(--radius); padding:clamp(28px,4vw,46px); border:1px solid var(--line); background:#fff; }
.vs__col--new{ background:var(--panel); color:#fff; border-color:#242424; box-shadow:0 40px 80px rgba(0,0,0,.18); }
.vs__label{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.vs__col--new .vs__label{ color:var(--green); }
.vs__title{ font-size:clamp(24px,2.8vw,36px); font-weight:700; letter-spacing:-.03em; line-height:1; margin-bottom:26px; }
.vs__list{ list-style:none; display:grid; gap:14px; }
.vs__list li{ position:relative; font-size:16px; padding-left:30px; }
.vs__col--old li{ color:var(--ink-soft); }
.vs__col--old li i{ position:absolute; left:30px; right:0; top:52%; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; }
.vs__col--old li::before{ content:"×"; position:absolute; left:0; top:-1px; width:18px; height:18px; border-radius:50%; background:#efece4; color:#8a877f; font-size:14px; line-height:18px; text-align:center; }
.vs__col--new li{ color:rgba(255,255,255,.8); }
.vs__col--new li::before{ content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--green); }
.vs__col--new li::after{ content:""; position:absolute; left:5px; top:8px; width:7px; height:4px; border-left:2px solid var(--green-ink); border-bottom:2px solid var(--green-ink); transform:rotate(-45deg); }
.vs__mid{ display:grid; place-items:center; }
.vs__badge{ width:72px; height:72px; border-radius:50%; background:var(--green); color:var(--green-ink); display:grid; place-items:center; font-weight:700; font-size:18px; letter-spacing:-.02em; box-shadow:0 20px 40px rgba(38,224,127,.35); }
.vs__price{ margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:baseline; gap:10px; }
.vs__price b{ font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-.04em; color:var(--green); }
.vs__price span{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.5); letter-spacing:.06em; }
@media (max-width:860px){ .vs{ grid-template-columns:1fr; } .vs__mid{ order:-1; } .vs__badge{ width:56px; height:56px; font-size:15px; } }

/* ============================================================
   STATS WALL
   ============================================================ */
.stats{ padding:clamp(60px,10vw,120px) 0; background:var(--bg); border-top:1px solid var(--line); }
.skip{ position:fixed; left:16px; top:-60px; z-index:10000; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; transition:top .2s; }
.skip:focus{ top:16px; }
main:focus{ outline:none; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, input[type=checkbox]:focus-visible{ outline:2px solid var(--green-deep); outline-offset:3px; border-radius:6px; }
.stats__note{ max-width:var(--max); margin:28px auto 0; padding:0 var(--pad); font-size:12.5px; color:var(--ink-soft); text-align:center; }
.vs__price a{ color:inherit; text-decoration:underline; }
[data-example]{ position:relative; }
[data-example]::after{ content:"Example · fictional business"; position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.02em; white-space:nowrap; opacity:.6; pointer-events:none; }
.work__stage[data-example]::after{ top:4px; bottom:auto; left:0; transform:none; z-index:3; }
.stats__grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ border-top:1px solid var(--ink); padding-top:22px; }
.stat__num{ font-size:clamp(56px,8vw,120px); font-weight:700; letter-spacing:-.06em; line-height:.9; display:block; font-variant-numeric:tabular-nums; }
.stat__num .u{ font-size:.42em; letter-spacing:-.02em; color:var(--green-deep); margin-left:.05em; }
.stat p{ margin-top:12px; font-size:15px; color:var(--ink-soft); max-width:24ch; }
@media (max-width:860px){ .stats__grid{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   CTA
   ============================================================ */
.cta{ padding:clamp(30px,6vw,80px) var(--pad) clamp(70px,10vw,120px); background:var(--bg); }
.cta__panel{
  position:relative; max-width:var(--max); margin:0 auto; overflow:hidden;
  background:var(--panel); color:#fff; border-radius:44px; padding:clamp(56px,9vw,110px) clamp(28px,6vw,90px);
  text-align:center; isolation:isolate;
}
.cta__panel::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background:conic-gradient(from 0deg, transparent 0 60%, rgba(38,224,127,.22) 72%, transparent 84%);
  animation:spin 16s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.cta__panel::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 50% at 50% 0%, rgba(38,224,127,.18), transparent 70%); }
.cta__face{ width:92px; height:92px; margin:0 auto 26px; border-radius:26px; background:#0a0a0a; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; gap:16px; position:relative; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.cta__face::after{ content:""; position:absolute; left:50%; bottom:22px; width:30px; height:5px; margin-left:-15px; border-radius:3px; background:var(--green); }
.cta__eye{ width:22px; height:22px; border-radius:50%; background:#0f2a1a; display:grid; place-items:center; overflow:hidden; }
.cta__eye i{ width:12px; height:12px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); will-change:transform; }
.cta__title{ font-size:clamp(40px,7.4vw,104px); line-height:.92; letter-spacing:-.05em; font-weight:700; margin:0 0 22px; }
.cta__sub{ max-width:480px; margin:0 auto 34px; color:rgba(255,255,255,.62); font-size:18px; }
.cta__mail{ margin-top:22px; font-size:14px; color:rgba(255,255,255,.5); }
.cta__mail a{ color:var(--green); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:60px var(--pad) 40px; border-top:1px solid var(--line); background:var(--bg); overflow:hidden; }
.footer__top{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer__label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.footer__col a{ display:block; color:var(--ink-soft); font-size:15px; padding:5px 0; transition:color .2s, transform .3s var(--ease); }
.footer__col a:hover{ color:var(--ink); transform:translateX(4px); }
.footer__logo{
  max-width:var(--max); margin:40px auto 0; text-align:center;
  font-size:clamp(70px,22vw,300px); font-weight:700; letter-spacing:-.06em; line-height:.8; color:var(--ink);
  background:linear-gradient(180deg,var(--ink) 55%, rgba(15,15,15,.06));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  user-select:none; will-change:transform;
}
.footer__legal{ max-width:var(--max); margin:30px auto 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); padding-top:24px; border-top:1px solid var(--line); }
@media (max-width:620px){ .footer__top{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   SUBPAGE COMPONENTS
   ============================================================ */
.phero{ padding:160px var(--pad) 40px; max-width:var(--max); margin:0 auto; position:relative; }
.phero__inner{ max-width:900px; }
.phero__title{ font-size:clamp(44px,8.5vw,110px); line-height:.92; letter-spacing:-.05em; font-weight:700; }
.phero__title .ink{ color:var(--ink); }
.phero__sub{ max-width:640px; margin-top:24px; font-size:clamp(17px,2.2vw,20px); color:var(--ink-soft); }

/* roster (team) */
.roster{ max-width:var(--max); margin:44px auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rcard{ display:flex; align-items:center; gap:12px; background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:14px 16px; transition:transform .4s var(--ease-out), box-shadow .4s; }
.rcard:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.08); }
.rcard__avatar{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); flex:none; }
.rcard div{ margin-right:auto; }
.rcard b{ display:block; font-size:15px; letter-spacing:-.01em; }
.rcard span{ font-size:12.5px; color:var(--ink-soft); }
.rcard__dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(38,224,127,.18); flex:none; position:relative; }
@media (max-width:720px){ .roster{ grid-template-columns:1fr; } }

/* agents (team page) */
.agents{ padding:clamp(60px,10vw,120px) 0; }
.agents .section-head{ margin-bottom:46px; }
.agent-grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; gap:24px; }
.agent-card{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,4vw,52px); overflow:hidden; }
.agent-card--alt{ background:var(--panel); color:#fff; border-color:#242424; }
.agent-card--alt p{ color:rgba(255,255,255,.62); }
.agent-card__copy .tag{ display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:999px; background:#eceae3; color:var(--ink-soft); margin-bottom:20px; }
.tag--light{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.agent-card__copy h3{ font-size:clamp(25px,3.2vw,36px); line-height:1.02; letter-spacing:-.03em; font-weight:700; margin-bottom:16px; }
.agent-card__copy p{ color:var(--ink-soft); font-size:17px; max-width:46ch; }
.agent-card .ticks li{ color:var(--ink-soft); }
.ticks--dark li{ color:rgba(255,255,255,.72) !important; }
@media (max-width:820px){ .agent-card{ grid-template-columns:1fr; } .agent-card__demo{ order:2; } }

/* value grid */
.value{ padding:clamp(60px,10vw,120px) 0; }
.value .section-head{ margin-bottom:46px; }
.value-grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-grid--3{ grid-template-columns:repeat(3,1fr); }
.value-card{ background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:30px 26px; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.value-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,.09); }
.value-card__icon{ width:58px; height:58px; margin-bottom:20px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.14)); transition:transform .5s var(--ease-out); }
.value-card:hover .value-card__icon{ transform:translateY(-4px) rotate(-6deg) scale(1.06); }
.value-card h4{ font-size:20px; font-weight:600; letter-spacing:-.02em; margin-bottom:10px; }
.value-card p{ font-size:15px; color:var(--ink-soft); }
@media (max-width:980px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){ .value-grid--3{ grid-template-columns:1fr; } }
@media (max-width:540px){ .value-grid{ grid-template-columns:1fr; } }

/* onboarding steps (how it works) */
.flow{ padding:clamp(60px,10vw,120px) 0; }
.flow .section-head{ margin-bottom:46px; }
.steps{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:34px 30px; }
.step__n{ font-family:var(--mono); font-size:14px; color:var(--green-deep); }
.step h4{ font-size:21px; font-weight:600; letter-spacing:-.02em; margin:16px 0 10px; }
.step p{ color:var(--ink-soft); font-size:15.5px; }
.metrics{ max-width:var(--max); margin:60px auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.metric{ border-top:1px solid var(--ink); padding-top:20px; }
.metric__num{ font-size:clamp(42px,6vw,66px); font-weight:700; letter-spacing:-.04em; line-height:1; display:block; }
.metric p{ margin-top:10px; font-size:14px; color:var(--ink-soft); max-width:22ch; }
@media (max-width:860px){ .steps,.metrics{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps,.metrics{ grid-template-columns:1fr; } }

/* interactive journey (how it works) */
.journey{ padding:clamp(60px,10vw,120px) 0; }
.journey .section-head{ margin-bottom:40px; }
.journey__wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.journey__rail{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:22px; }
.journey__step{ display:flex; flex-direction:column; align-items:center; gap:9px; background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:15px 8px; cursor:pointer; font:inherit; color:var(--ink-soft); transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s; }
.journey__step svg{ width:34px; height:34px; filter:grayscale(.5) brightness(.9) drop-shadow(0 6px 10px rgba(0,0,0,.12)); transition:transform .3s, filter .3s; }
.journey__step span{ font-size:11px; text-align:center; line-height:1.2; }
.journey__step:hover{ transform:translateY(-2px); }
.journey__step.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px); }
.journey__step.is-active svg{ filter:drop-shadow(0 8px 12px rgba(0,0,0,.3)); transform:scale(1.08); }
.journey__panel{ background:var(--panel); color:#fff; border-radius:var(--radius); padding:clamp(28px,4vw,46px); min-height:160px; }
.jd{ display:none; }
.jd.is-active{ display:block; animation:fadeUp .4s var(--ease); }
.jd h4{ font-size:clamp(22px,3vw,30px); font-weight:600; letter-spacing:-.02em; margin-bottom:12px; }
.jd p{ color:rgba(255,255,255,.7); max-width:62ch; font-size:17px; }
.jd__tag{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--green); border:1px solid rgba(38,224,127,.3); padding:5px 12px; border-radius:999px; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (max-width:720px){ .journey__rail{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:440px){ .journey__rail{ grid-template-columns:repeat(2,1fr); } }

/* integrations */
.integra{ padding:clamp(40px,8vw,90px) 0 clamp(60px,10vw,120px); }
.integra .section-head{ margin-bottom:30px; }
.integra__pills{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:flex; flex-wrap:wrap; gap:12px; }
.integra__pills span{ background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:11px 20px; font-size:15px; font-weight:500; transition:transform .4s var(--ease-out), background .3s, color .3s; }
.integra__pills span:hover{ transform:translateY(-4px); background:var(--ink); color:#fff; }

/* ROI calculator */
.roi{ padding:10px 0 clamp(50px,8vw,90px); }
.roi__grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:start; }
.roi__controls{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3.5vw,40px); }
.roi__field{ margin-bottom:26px; }
.roi__field label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:15px; color:var(--ink-soft); margin-bottom:13px; }
.roi__field label b{ font-size:21px; color:var(--ink); font-weight:600; font-family:var(--mono); }
.roi__field input[type=range]{ width:100%; accent-color:var(--green-deep); height:6px; cursor:pointer; }
.roi__note{ font-size:12.5px; color:var(--ink-soft); margin:2px 0 20px; }
.roi__cta{ width:100%; }
.roi__result{ background:var(--panel); color:#fff; border-radius:var(--radius); padding:clamp(26px,3.5vw,40px); box-shadow:0 30px 70px rgba(0,0,0,.14); }
.roi__big{ border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:20px; margin-bottom:20px; }
.roi__big-label{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.roi__big-num{ display:block; font-size:clamp(44px,7vw,72px); font-weight:700; letter-spacing:-.04em; line-height:1.05; margin-top:6px; }
.roi__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.roi__stats span{ font-size:clamp(22px,3.4vw,28px); font-weight:600; letter-spacing:-.02em; color:var(--green); display:block; }
.roi__stats p{ font-size:12.5px; color:rgba(255,255,255,.6); margin-top:2px; }
.roi__chart-title{ font-size:13px; color:rgba(255,255,255,.6); margin-bottom:10px; }
.roi__chart{ width:100%; height:auto; display:block; }
@media (max-width:820px){ .roi__grid{ grid-template-columns:1fr; } }

/* contact / book */
.book{ padding:10px 0 clamp(50px,8vw,90px); }
.book__grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; }
.book__form{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3.5vw,42px); }
.book__form h3{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin-bottom:22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:7px; }
.field input, .field select, .field textarea{ width:100%; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green-deep); box-shadow:0 0 0 3px rgba(38,224,127,.15); }
.field textarea{ resize:vertical; }
.field--split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.book__form .btn{ width:100%; margin-top:6px; }
.book__hint{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; }
.book__hint a{ color:var(--green-deep); text-decoration:underline; }
.consent{ display:flex; gap:10px; align-items:flex-start; margin:-2px 0 18px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); cursor:pointer; }
.consent input{ flex:none; width:16px; height:16px; margin-top:2px; accent-color:var(--green-deep); }
.consent a{ color:var(--green-deep); text-decoration:underline; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.book__hint.is-ok{ color:var(--ink); font-weight:500; }
.book__hint.is-err{ color:#b3261e; }
.book__card{ background:var(--panel); color:#fff; border-radius:var(--radius); padding:clamp(26px,3.5vw,40px); }
.tline{ list-style:none; margin:18px 0 0; display:grid; gap:18px; }
.tline li{ display:flex; gap:14px; }
.tline li span{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--green); color:var(--green-ink); font-weight:600; font-size:14px; }
.tline b{ font-size:15.5px; }
.tline p{ font-size:13.5px; color:rgba(255,255,255,.6); margin-top:3px; }
.book__direct{ margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); }
.book__direct p{ font-size:13px; color:rgba(255,255,255,.55); margin-bottom:4px; }
.book__email{ font-size:19px; font-weight:600; color:var(--green); }
@media (max-width:820px){ .book__grid{ grid-template-columns:1fr; } .field--split{ grid-template-columns:1fr; } }

/* FAQ */
.faq{ padding:clamp(40px,8vw,90px) 0; }
.faq .section-head{ margin-bottom:34px; }
.faq__list{ max-width:820px; margin:0 auto; padding:0 var(--pad); display:grid; gap:12px; }
.faq__item{ background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:2px 22px; }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 0; font-size:17px; font-weight:500; letter-spacing:-.01em; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary i{ width:18px; height:18px; flex:none; position:relative; }
.faq__item summary i::before, .faq__item summary i::after{ content:""; position:absolute; background:var(--ink-soft); border-radius:2px; transition:transform .3s var(--ease); }
.faq__item summary i::before{ left:0; top:8px; width:18px; height:2px; }
.faq__item summary i::after{ left:8px; top:0; width:2px; height:18px; }
.faq__item[open] summary i::after{ transform:scaleY(0); }
.faq__item p{ color:var(--ink-soft); font-size:15.5px; padding:0 0 18px; max-width:68ch; }

/* ============================================================
   US TRUST LAYER — proof, booking embed, legal
   ============================================================ */
[hidden]{ display:none !important; }
.footer__legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.footer__legal a:hover{ color:var(--ink); }
.faq__item p a{ color:var(--green-deep); text-decoration:underline; }
.book__cal{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.book__cal .calendly-inline-widget{ min-width:320px; height:700px; }
.quote{ margin:0; display:flex; flex-direction:column; justify-content:space-between; gap:22px; }
.quote blockquote{ font-size:18px; line-height:1.45; letter-spacing:-.01em; color:var(--ink); }
.quote figcaption{ font-size:14px; color:var(--ink-soft); }
.quote figcaption b{ display:block; color:var(--ink); font-weight:600; }
.legal{ max-width:780px; margin:0 auto; padding:0 var(--pad) clamp(60px,10vw,120px); }
.legal__note{ background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:16px 20px; font-size:14px; color:var(--ink-soft); margin-bottom:12px; }
.legal h2{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin:38px 0 10px; }
.legal p, .legal li{ font-size:16px; color:var(--ink-soft); line-height:1.6; }
.legal p + p{ margin-top:10px; }
.legal ul{ list-style:disc; padding-left:22px; margin-top:8px; }
.legal a{ color:var(--green-deep); text-decoration:underline; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body::after, .floater, .marquee__track, .hero__scroll i, .scene3d__load span, .console__bars i,
  .lscreen__avatar i, .lscreen__btns b, .wave i, .call__ring, .wcall__avatar::after, .cta__panel::before, .nav__live i::after, .rcard__dot::after, .typing i{ animation:none !important; }
  .reveal{ opacity:1; transform:none; }
  .schip{ opacity:1; transform:none; }
  html.js-motion .split:not(.is-split){ visibility:visible; }
  .loader{ display:none; }
  .curtain{ display:none; }
}

/* ============================================================
   ARTICLE PAGES — industries, use cases, guides, compare
   (generated by scripts/build-seo.mjs; no loader, no GSAP)
   ============================================================ */
.footer__top--wide{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){ .footer__top--wide{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .footer__top--wide{ grid-template-columns:1fr 1fr; } }

.phero--article{ padding-top:clamp(120px,14vw,150px); padding-bottom:10px; }
.phero--article .phero__inner{ max-width:860px; }
.phero__title--article{ font-size:clamp(38px,6vw,72px); line-height:1; letter-spacing:-.04em; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; font-size:13.5px; color:var(--ink-soft); margin-bottom:22px; }
.crumbs li + li::before{ content:"/"; margin-right:6px; opacity:.5; }
.crumbs a:hover{ color:var(--ink); }
.answer{ margin-top:24px; font-size:clamp(18px,2.1vw,21px); line-height:1.5; color:var(--ink); max-width:62ch; padding-left:18px; border-left:3px solid var(--green); }
.article-meta{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.article-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.article{ padding:clamp(30px,5vw,60px) var(--pad) clamp(40px,6vw,80px); }
.article__grid{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(30px,5vw,72px); align-items:start; }
.article__aside{ position:sticky; top:110px; display:grid; gap:18px; }
@media (max-width:980px){ .article__grid{ grid-template-columns:1fr; } .article__aside{ position:static; } .toc{ display:none; } }

.prose{ max-width:720px; min-width:0; }
.prose > section{ scroll-margin-top:100px; }
.prose h2{ font-size:clamp(25px,3vw,32px); line-height:1.15; letter-spacing:-.03em; font-weight:700; margin:52px 0 14px; }
.prose h3{ font-size:20px; letter-spacing:-.02em; font-weight:600; margin:28px 0 8px; }
.prose p, .prose li{ font-size:17px; line-height:1.65; color:#2b2b28; }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p, .prose table + p{ margin-top:14px; }
.prose ul, .prose ol{ padding-left:22px; margin-top:12px; display:grid; gap:6px; }
.prose ul{ list-style:disc; } .prose ol{ list-style:decimal; }
.prose li::marker{ color:var(--green-deep); }
.prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:2px; text-underline-offset:3px; }
.prose a:hover{ background:rgba(38,224,127,.16); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose blockquote{ margin:20px 0; padding:16px 20px; border-left:3px solid var(--green); background:var(--cream); border-radius:0 14px 14px 0; }
.prose table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:15px; display:block; overflow-x:auto; }
.prose th, .prose td{ text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line); line-height:1.45; }
.prose thead th{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--ink); white-space:nowrap; }
.prose tbody tr:hover{ background:var(--cream); }
.prose .ticks li{ font-size:16px; opacity:1; }
.prose .ticks{ padding-left:0; list-style:none; margin-top:12px; }

.tldr{ background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:22px 24px; }
.tldr__label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.toc ol{ list-style:none; margin-top:12px; display:grid; gap:2px; border-left:1px solid var(--line); }
.toc a{ display:block; padding:5px 0 5px 14px; margin-left:-1px; border-left:2px solid transparent; font-size:14px; line-height:1.35; color:var(--ink-soft); }
.toc a:hover{ color:var(--ink); border-left-color:var(--green); }
.aside-card{ background:var(--panel); color:#fff; border-radius:20px; padding:22px; }
.aside-card p{ font-size:15px; color:rgba(255,255,255,.7); margin-bottom:16px; }
.aside-card b{ color:#fff; }

.demo-chat{ margin:34px 0 10px; }
.demo-chat__phone{ max-width:380px; margin:0 auto; background:#0c0c0c; border-radius:30px; padding:10px; border:1px solid #2a2a2a; box-shadow:0 30px 60px rgba(0,0,0,.18); }
.demo-chat__bar{ display:flex; align-items:center; gap:8px; color:#eafff3; font-size:13px; font-weight:500; padding:8px 12px 12px; }
.demo-chat__bar i{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.demo-chat__body{ background:#efeae2; border-radius:20px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.demo-chat .bubble{ font-size:14px; }
.demo-chat figcaption{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:12px; }

.faq__list--inline{ padding:0; max-width:none; margin-top:16px; }
.prose .faq__item p{ font-size:16px; }
.sources ol{ font-size:14px; }
.sources li{ font-size:14px; line-height:1.5; }
.sources a{ text-decoration-thickness:1px; word-break:break-word; }

.related{ padding:clamp(20px,4vw,50px) 0 clamp(30px,5vw,60px); }
.related .section-head{ margin-bottom:6px; }
.related__grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.related__card{ display:flex; flex-direction:column; gap:8px; background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:24px; transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s; }
.related__card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.08); border-color:#cfcfc7; }
.related__card small{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.related__card b{ font-size:19px; line-height:1.25; letter-spacing:-.02em; font-weight:600; }
.related__card span{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; flex:1; }
.related__card i{ font-style:normal; font-size:14px; font-weight:600; color:var(--green-deep); }
.related--hub{ padding-top:clamp(30px,5vw,50px); }