/* ============================================================
   187N — Landing
   Type:  Newsreader (display serif) + Helvetica Neue (grotesque)
   System mirrors the V7 Go layout: dark editorial hero, bordered
   grid containers, gray→white serif headlines, single warm accent.
   ============================================================ */

/* STK Bureau (v7labs brand face) is a licensed/self-hosted family and cannot be
   embedded without the woff2 files. The font stack below requests the real STK Bureau
   names FIRST — drop licensed .woff2s into fonts/ + add @font-face and the page
   becomes pixel-identical. Until then it falls back to the closest free analogs:
   Newsreader (elegant high-contrast transitional serif) + Helvetica Neue (neutral grotesque).
   The Newsreader webfont is loaded via a preconnected <link> in index.html (not @import here,
   so it doesn't block CSS parsing and isn't fetched twice). */

:root{
  /* surfaces */
  --black:        #0a0a0a;   /* announcement / pure */
  --ink-dark:     #161514;   /* hero + dark sections */
  --ink-dark-2:   #0e0d0c;   /* closing, deeper */
  --footer:       #262524;   /* footer plate */
  --paper:        #ffffff;   /* white feature section */
  --warm:         #f4f2ee;   /* gray testimonial section */

  /* text */
  --on-dark:      #f4f2ee;
  --on-dark-mut:  #8c8884;
  --on-dark-dim:  #6a6662;
  --on-light:     #16140f;
  --on-light-mut: #7c766c;

  /* lines */
  --line-dark:    rgba(255,255,255,.085);
  --line-dark-2:  rgba(255,255,255,.14);
  --line-light:   rgba(0,0,0,.10);
  --line-light-2: rgba(0,0,0,.16);

  /* accent — warm clay/orange (Conflict tags, result column, quote marks) */
  --accent:       #e2561f;
  --accent-soft:  #ef6b34;

  --serif: 'STK Bureau Serif', 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'STK Bureau Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --maxw: 1320px;
  --pad: 96px;

  /* motion tokens (MOTION.md contract) */
  --ease-out: cubic-bezier(0.16,1,0.30,1);
  --ease-graph: cubic-bezier(0.33,1,0.68,1);
  --pop: cubic-bezier(0.34,1.56,0.64,1);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--ink-dark);
  color:var(--on-dark);
  font-size:16px;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }

/* generic two-tone serif heading: first line = strong, .mut = gray */
.htitle{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.018em; margin:0; }
.htitle .mut{ color:var(--on-dark-mut); }

/* accent quote marks */
.accent{ color:var(--accent); }

/* eyebrow pill */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; letter-spacing:.02em;
  color:var(--on-light-mut);
  border:1px solid var(--line-light); border-radius:999px;
  padding:6px 13px; background:rgba(0,0,0,.015);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:15px; font-weight:500;
  padding:13px 26px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-light{ background:#f4f2ee; color:#141310; }
.btn-light:hover{ background:#fff; transform:translateY(-1px); }
.btn-ghost-dark{ background:transparent; color:var(--on-dark); border-color:var(--line-dark-2); }
.btn-ghost-dark:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
.btn-dark{ background:#141310; color:#f4f2ee; }
.btn-dark:hover{ background:#000; transform:translateY(-1px); }
.btn-ghost-light{ background:transparent; color:var(--on-light); border-color:var(--line-light-2); }
.btn-ghost-light:hover{ border-color:rgba(0,0,0,.4); transform:translateY(-1px); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{
  background:var(--black); color:var(--on-dark);
  font-size:14px; text-align:center;
  padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.05);
}
.announce a{ color:var(--on-dark-mut); }
.announce a:hover{ color:var(--on-dark); }
.announce .arrow{ display:inline-block; transition:transform .2s; }
.announce a:hover .arrow{ transform:translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(22,21,20,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.nav-inner{ display:flex; align-items:center; gap:32px; height:70px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:23px; letter-spacing:-.03em; color:var(--on-dark); }
.logo-mark{ height:24px; width:auto; display:block; }
.foot-brand .brand .logo-mark{ height:34px; }
.brand sup{ font-size:.5em; font-weight:500; vertical-align:super; color:var(--on-dark-mut); }
.nav-links{ display:flex; gap:30px; margin:0 auto; }
.nav-links a{ font-size:15px; color:var(--on-dark); opacity:.92; }
.nav-links a:hover{ opacity:.65; }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-right .txt{ font-size:15px; color:var(--on-dark); opacity:.9; }
.nav-right .txt:hover{ opacity:.6; }
.pill-ghost{
  font-size:14px; padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.07); color:var(--on-dark);
  border:1px solid var(--line-dark);
}
.pill-ghost:hover{ background:rgba(255,255,255,.12); }
.pill-solid{
  font-size:14px; padding:9px 18px; border-radius:999px;
  background:#f4f2ee; color:#141310; font-weight:500;
}
.pill-solid:hover{ background:#fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:var(--ink-dark); overflow:hidden; }
.hero::before{ /* soft top vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
}
.hero-inner{ position:relative; padding-top:104px; padding-bottom:120px; text-align:center; }
.hero .he-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; letter-spacing:.04em; color:var(--on-dark-mut);
  text-transform:uppercase; margin-bottom:30px;
}
.hero .he-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(226,86,31,.18); }
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px,5.2vw,70px); line-height:1.03; letter-spacing:-.022em;
  margin:0 auto; max-width:24ch;
}
.hero h1 .l1{ color:var(--on-dark-mut); display:block; }
.hero h1 .l2{ color:var(--on-dark); display:block; }
.hero .lede{
  margin:30px auto 0; max-width:48ch;
  font-size:19px; line-height:1.62; color:var(--on-dark-dim);
}
.hero .lede b{ color:var(--on-dark); font-weight:400; }
.hero-cta{ display:flex; gap:14px; justify-content:center; margin-top:42px; flex-wrap:wrap; }
.hero .micro{ margin-top:22px; font-size:13.5px; color:var(--on-dark-dim); letter-spacing:.01em; }

/* floating mission-control card */
.hero-card{
  position:absolute; right:var(--pad); bottom:84px; width:248px;
  background:#211f1d; border:1px solid var(--line-dark-2); border-radius:16px;
  padding:10px 10px 16px; box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.hero-card .screen{
  display:block; width:100%; padding:0; margin:0;
  height:118px; border-radius:9px; overflow:hidden;
  background:radial-gradient(140% 120% at 50% 40%, #fbfaf7, #e9e6df);
  position:relative; border:1px solid rgba(0,0,0,.06);
  -webkit-appearance:none; appearance:none; font:inherit; cursor:pointer;
}
.hero-card .play-badge{
  position:absolute; left:12px; bottom:12px; transform:none;
  width:44px; height:44px; border-radius:50%; background:rgba(20,19,16,.86); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.32); transition:transform .18s ease, background .2s ease;
}
.hero-card .play-badge svg{ margin-left:3px; }
/* walkthrough thumbnail (founder photo) — cropped to keep the face in the short strip */
.hero-card .screen .thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% 20%; display:block; z-index:0; }
.hero-card .screen::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,8,.10), rgba(10,9,8,.46)); }
.hero-card .play-badge{ z-index:2; }
.hero-card .screen:hover .play-badge{ transform:scale(1.09); background:var(--accent); }
.hero-card .vnote{
  position:absolute; left:0; right:0; bottom:8px; text-align:center;
  font-size:11px; letter-spacing:.03em; color:#6f6a60; opacity:0;
  transition:opacity .25s ease; pointer-events:none;
}
.hero-card .screen.is-playing{ background:#000; }
.hero-card .screen.is-playing .orbit,
.hero-card .screen.is-playing .play-badge,
.hero-card .screen.is-playing .vnote{ display:none; }
.hero-card .screen .vembed{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
.hero-card .vid-screen{ height:auto; min-height:0; background:#000; cursor:default; padding:0; overflow:hidden; border-radius:9px; border:1px solid rgba(0,0,0,.06); }

/* fullscreen walkthrough video lightbox */
.vmodal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(8,8,7,.93); backdrop-filter:blur(6px); padding:6vh 5vw; }
.vmodal.open{ display:flex; animation:rmFade .25s ease both; }
.vmodal-inner{ width:100%; max-width:1120px; }
.vmodal-stage{ width:100%; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 30px 90px rgba(0,0,0,.6); min-height:40px; }
.vmodal-close{ position:fixed; top:22px; right:26px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-dark-2); background:rgba(255,255,255,.08); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease; z-index:1; }
.vmodal-close:hover{ background:rgba(255,255,255,.18); }
.hero-card .label{ text-align:center; font-size:14px; color:var(--on-dark); margin-top:12px; line-height:1.35; }
.hero-card .label span{ color:var(--on-dark-mut); }

/* tiny orbit graphic inside card */
.orbit{ position:absolute; inset:0; }
.orbit i{ position:absolute; border-radius:50%; }
.orbit .ring{ border:1px solid rgba(0,0,0,.10); border-radius:50%; }

@media (max-width:1080px){
  .hero-card{
    position:static; right:auto; bottom:auto; width:248px; max-width:78vw;
    margin:22px auto 0; box-shadow:0 18px 40px rgba(0,0,0,.4);
  }
}

/* ============================================================
   shared dark "grid container"
   ============================================================ */
.gridbox{ border:1px solid var(--line-dark); border-radius:4px; overflow:hidden; background:rgba(255,255,255,.012); }
.section-dark{ background:var(--ink-dark); }
.section-dark.pad{ padding:0 0 30px; }

/* ============================================================
   TRUST BAND
   ============================================================ */
.trust{ background:var(--ink-dark); border-top:1px solid var(--line-dark); }
.trust .tagline{ text-align:center; padding:52px 0 8px; color:var(--on-dark-mut); font-size:21px; }
.trust .tagline em{ font-family:var(--serif); font-style:italic; color:var(--on-dark); }
.trust .deploy{ text-align:center; max-width:62ch; margin:0 auto; color:var(--on-dark-dim); font-size:15px; padding-bottom:30px; }

.logo-strip{ border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); overflow:hidden; }
.marquee{ display:flex; gap:0; width:max-content; animation:scroll 38s linear infinite; }
.marquee .plate{
  display:flex; align-items:center; justify-content:center;
  height:96px; padding:0 44px; color:var(--on-dark-mut);
  white-space:nowrap;
  opacity:.7;
}
.marquee .plate img{ height:26px; width:auto; max-width:150px; object-fit:contain; display:block; }
.marquee .plate .mono{ font-family:var(--sans); }
/* shift defaults to -50% (seamless when the strip is hand-duplicated and the half
   is wider than the viewport); the marquee JS overrides --mq-shift with the exact
   one-unit pixel width so the loop is seamless at ANY viewport width. */
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(var(--mq-shift,-50%)); } }
@media (prefers-reduced-motion: reduce){
  .marquee, .qmarquee, .reel{ animation:none !important; transform:none !important; }
}

/* quotes row */
/* quotes slider (auto-scrolling marquee, matches logo strip) */
.quote-strip{ border-top:1px solid var(--line-dark); overflow:hidden; }
.qmarquee{ display:flex; width:max-content; animation:scroll 58s linear infinite reverse; }
.quote-strip:hover .qmarquee{ animation-play-state:paused; }
.qcard{ flex:none; width:438px; padding:46px 48px; border-right:1px solid var(--line-dark); }
.qcard blockquote{ margin:0; font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.36; color:var(--on-dark); letter-spacing:-.005em; }
.qcard blockquote .qm{ color:var(--accent); }
.qcard .by{ margin-top:22px; font-size:13px; color:var(--on-dark-mut); }
.qcard .by b{ color:var(--on-dark); font-weight:500; }
@media (max-width:760px){
  .qcard{ width:290px; padding:34px 26px; }
  .qcard blockquote{ font-size:19px; }
}

/* ============================================================
   SECTION HEADINGS (dark)
   ============================================================ */
.sec-head{ padding-top:88px; padding-bottom:36px; }
.sec-head .htitle{ font-size:clamp(32px,3.6vw,46px); }
.sec-head .sub{ margin-top:16px; font-size:16px; color:var(--on-dark-mut); max-width:60ch; }

/* ============================================================
   WORKFLOW CARDS (4)
   ============================================================ */
.work-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.work-card{ border-right:1px solid var(--line-dark); padding:26px 26px 30px; display:flex; flex-direction:column; min-height:330px; }
.work-card:last-child{ border-right:0; }
.work-card .mock{ flex:1; margin-bottom:26px; }
.work-card h3{ font-size:18px; font-weight:500; margin:0 0 8px; color:var(--on-dark); letter-spacing:-.01em; }
.work-card p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--on-dark-mut); }

/* mock primitives (dark) */
.row-step{ display:flex; gap:10px; align-items:flex-start; margin-bottom:15px; }
.row-step .tri{ color:var(--on-dark-dim); margin-top:2px; font-size:11px; }
.row-step .s-t{ font-size:13.5px; color:var(--on-dark); }
.row-step .s-s{ font-size:12px; color:var(--on-dark-dim); }
.line-row{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:13.5px; color:var(--on-dark); }
.line-row .idx{ color:var(--on-dark-dim); width:14px; }
.line-row .amt{ font-variant-numeric:tabular-nums; }
.line-row .spacer{ flex:1; }
.tag{ font-size:11.5px; padding:3px 9px; border-radius:5px; }
.tag-accent{ background:var(--accent); color:#fff; }
.tag-file{ background:rgba(255,255,255,.09); color:var(--on-dark-mut); }
.tag-ok{ background:rgba(255,255,255,.07); color:#9fc0a0; }
.badge-row{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.badge-num{ font-size:10px; width:20px; height:20px; border-radius:5px; background:rgba(255,255,255,.08); color:var(--on-dark-mut); display:flex; align-items:center; justify-content:center; }
.chip-pill{ font-size:12.5px; padding:6px 11px; border-radius:7px; background:#211f1d; border:1px solid var(--line-dark-2); color:var(--on-dark); display:inline-flex; align-items:center; gap:8px; }
.chip-file{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:8px 11px; border-radius:8px; background:#211f1d; border:1px solid var(--line-dark-2); color:var(--on-dark); margin-bottom:10px; }
.chip-file .ic{ width:15px; height:15px; border-radius:3px; }
.chip-file .dl{ margin-left:auto; color:var(--on-dark-dim); }

/* ============================================================
   STAT / CONTRAST BAND
   ============================================================ */
.statwrap{ border-top:1px solid var(--line-dark); }
.stat-trio{ display:grid; grid-template-columns:repeat(3,1fr); }
.stat-cell{
  position:relative; padding:46px 40px; border-right:1px solid var(--line-dark);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 70%);
  overflow:hidden;
}
.stat-cell::after{ /* faint vertical stripes */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  mask-image:radial-gradient(120% 100% at 0% 0%, #000, transparent 75%);
}
.stat-cell:last-child{ border-right:0; }
.stat-cell .num{ font-family:var(--serif); font-weight:400; font-size:clamp(46px,5.4vw,74px); line-height:1; letter-spacing:-.02em; color:var(--on-dark); }
.stat-cell .cap{ position:relative; margin-top:18px; font-size:14.5px; color:var(--on-dark-mut); max-width:34ch; line-height:1.45; }
.stat-cell .cap em{ color:var(--on-dark-dim); font-style:normal; }

.midnote{ padding:30px 40px; border-top:1px solid var(--line-dark); color:var(--on-dark-mut); font-size:16px; line-height:1.6; max-width:90ch; }
.midnote b{ color:var(--on-dark); font-weight:500; }

/* ownership vs rent (before/after cells) */
.own-head{ padding-top:64px; padding-bottom:28px; }
.own-head .htitle{ font-size:clamp(26px,3vw,38px); max-width:24ch; }
.own-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.own-cell{ padding:30px 32px 34px; border-right:1px solid var(--line-dark); }
.own-cell:last-child{ border-right:0; }
.own-cell h4{ margin:0 0 22px; font-size:18px; font-weight:500; color:var(--on-dark); }
.own-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.own-col{ padding-right:18px; }
.own-col .k{ font-size:12px; color:var(--on-dark-dim); padding-bottom:9px; border-bottom:1px solid var(--line-dark); margin-bottom:13px; letter-spacing:.02em; }
.own-col.now .v{ font-size:14px; color:var(--on-dark-dim); line-height:1.45; }
.own-col.owned .v{ font-size:14px; color:var(--on-dark); line-height:1.45; }
.own-col.owned .v b{ color:#fff; font-weight:500; }
.result-band{ border-top:1px solid var(--line-dark); padding:34px 40px; text-align:center; }
.result-band .r{ font-family:var(--serif); font-size:clamp(22px,2.6vw,32px); color:var(--on-dark); letter-spacing:-.01em; }
.result-band .r b{ color:#fff; }

/* ============================================================
   WHITE FEATURES (mechanism 2x2)
   ============================================================ */
.section-light{ background:var(--paper); color:var(--on-light); }
.lt-head{ padding-top:96px; padding-bottom:40px; }
.lt-head .htitle{ font-size:clamp(34px,4vw,52px); }
.lt-head .htitle .strong{ color:var(--on-light); display:block; }
.lt-head .htitle .mut{ color:#bdb8af; display:block; }
.lt-head .sub{ margin-top:18px; color:var(--on-light-mut); font-size:16px; }

.feat-grid{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-light); border-radius:4px; overflow:hidden; }
.feat-card{ padding:40px 42px 44px; border-right:1px solid var(--line-light); border-bottom:1px solid var(--line-light); display:flex; flex-direction:column; min-height:420px; }
.feat-card:nth-child(2n){ border-right:0; }
.feat-card:nth-child(n+3){ border-bottom:0; }
.feat-card .pill{ align-self:flex-start; }
.feat-card h3{ font-size:25px; font-weight:500; line-height:1.18; letter-spacing:-.015em; margin:18px 0 0; color:var(--on-light); max-width:22ch; }
.feat-card .body{ margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--on-light-mut); max-width:46ch; }
.feat-card .visual{ margin-top:auto; padding-top:30px; }

/* light mock primitives */
.lpill{ display:inline-flex; align-items:center; gap:8px; font-size:13px; padding:7px 13px; border-radius:999px; background:#fff; border:1px solid var(--line-light); color:var(--on-light); }
.lchip{ font-size:12.5px; padding:8px 12px; border-radius:8px; background:#fff; border:1px solid var(--line-light); color:var(--on-light); display:inline-flex; align-items:center; gap:9px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.lmenu{ width:265px; border:1px solid var(--line-light); border-radius:11px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08); overflow:hidden; }
.lmenu .mi{ display:flex; align-items:center; gap:11px; padding:11px 15px; font-size:14px; border-bottom:1px solid var(--line-light); }
.lmenu .mi:last-child{ border-bottom:0; }
.lmenu .mi .ic{ width:16px; height:16px; border-radius:4px; }
.icon-sq{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.blur-grid{ filter:blur(.6px); opacity:.5; display:grid; grid-template-columns:repeat(3,1fr); gap:5px 14px; }
.blur-grid span{ height:8px; border-radius:3px; background:linear-gradient(90deg,#d9d4ca,#ece8e0); }

/* placeholder (striped) */
.ph-box{
  border:1px dashed var(--line-light-2); border-radius:10px;
  background:repeating-linear-gradient(135deg,#f3f1ec 0 10px,#eeece6 10px 20px);
  display:flex; align-items:center; justify-content:center;
  color:#9a948a; font-family:var(--sans); font-size:12px; letter-spacing:.04em;
}
.ph-box.dark{
  border-color:var(--line-dark-2);
  background:repeating-linear-gradient(135deg,#1c1b19 0 10px,#201f1c 10px 20px);
  color:var(--on-dark-dim);
}

/* ============================================================
   GRAY SECTION — testimonials + table + case stats
   ============================================================ */
.section-warm{ background:var(--warm); color:var(--on-light); }
.warm-box{ border:1px solid var(--line-light); border-radius:4px; overflow:hidden; background:rgba(255,255,255,.4); }

.testi{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line-light); }
.testi .t{ padding:46px 48px; border-right:1px solid var(--line-light); }
.testi .t:last-child{ border-right:0; }
.testi .k{ font-size:13px; color:var(--on-light-mut); }
.testi .stat{ font-size:23px; margin:2px 0 26px; color:var(--on-light); }
.testi blockquote{ margin:0; font-family:var(--serif); font-size:23px; line-height:1.34; color:var(--on-light); letter-spacing:-.005em; }
.testi blockquote .qm{ color:var(--accent); }
.testi blockquote.ph{ color:#9a948a; }
.testi .by{ display:flex; align-items:center; gap:11px; margin-top:30px; font-size:14px; }
.testi .av{ width:30px; height:30px; border-radius:50%; background:#d8d3c9; border:1px solid var(--line-light); }
.testi .by b{ font-weight:500; color:var(--on-light); }
.testi .by span{ color:var(--on-light-mut); }

/* results table */
.rtable{ border-bottom:1px solid var(--line-light); }
.rtable .thead{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; padding:26px 40px 18px; }
.rtable .thead div{ font-size:13px; color:var(--on-light-mut); }
.rtable .trow{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; align-items:center; padding:18px 40px; border-top:1px solid var(--line-light); }
.rtable .name{ display:flex; align-items:center; gap:13px; font-size:16px; color:var(--on-light); }
.rtable .name .lg{ width:30px; height:24px; display:flex; align-items:center; justify-content:flex-start; color:#9a948a; flex:none; }
.rtable .name .lg img{ width:22px; height:22px; object-fit:contain; display:block; }
.rtable .cellk{ font-size:12px; color:var(--on-light-mut); }
.rtable .cellv{ font-size:14px; color:var(--on-light); }
.rtable .res .cellv{ color:var(--accent); }

/* case stat trio */
.case3{ display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line-light); }
.case3 .c{ padding:28px 28px 30px; border-right:1px solid var(--line-light); min-height:300px; display:flex; flex-direction:column; }
.case3 .c:last-child{ border-right:0; }
.case3 .c .ctitle{ font-size:21px; line-height:1.25; color:var(--on-light); letter-spacing:-.01em; max-width:24ch; }
.case3 .c .cnum{ font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.05; color:var(--on-light); margin-top:auto; letter-spacing:-.015em; }
.case3 .c .ccap{ margin-top:10px; font-size:14px; color:var(--on-light-mut); }
.case3 .c .cnum .ph{ color:#b6b0a5; }

/* security band (light) */
.sec-band{ display:grid; grid-template-columns:1.15fr .85fr; align-items:center; padding:34px 48px 22px; gap:30px; }
.sec-band h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,44px); line-height:1.08; letter-spacing:-.018em; margin:0; max-width:20ch; }
.sec-band .sb-sub{ margin-top:13px; font-size:15px; color:var(--on-light-mut); line-height:1.55; max-width:52ch; }
.sec-band .sb-note{ margin-top:10px; font-size:12.5px; color:#9a948a; line-height:1.5; max-width:52ch; }
.sec-band .sb-link{ display:inline-flex; align-items:center; gap:7px; margin-top:15px; font-size:14px; color:var(--on-light); border-bottom:1px solid var(--on-light); padding-bottom:2px; }
.emblems{ display:flex; gap:16px; justify-content:flex-end; flex-wrap:nowrap; }
.emblems{ display:flex; gap:14px; justify-content:flex-end; flex-wrap:nowrap; }
.emb{ display:flex; flex-direction:column; align-items:center; gap:9px; width:74px; }
.emb-ic{ width:58px; height:58px; border:1px solid var(--line-light-2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#5f5a50; }
.emb-ic svg{ width:30px; height:30px; display:block; overflow:visible; }
.emb-l{ font-size:9.5px; letter-spacing:.04em; color:#8b857b; text-align:center; line-height:1.2; text-transform:uppercase; }

/* entrance: badges pop in when the band scrolls in */
.sec-emblems .emb{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .sec-emblems.play .emb{ animation:embPop .5s cubic-bezier(.34,1.56,.64,1) both; }
  .sec-emblems.play .emb:nth-child(1){ animation-delay:.05s; }
  .sec-emblems.play .emb:nth-child(2){ animation-delay:.13s; }
  .sec-emblems.play .emb:nth-child(3){ animation-delay:.21s; }
  .sec-emblems.play .emb:nth-child(4){ animation-delay:.29s; }
  .sec-emblems.play .emb:nth-child(5){ animation-delay:.37s; }

  /* looping micro-motion per icon */
  .ic-container .l{ animation:embFade 2.6s ease-in-out infinite; }
  .ic-container .l2{ animation-delay:.5s; }
  .ic-container .dot{ animation:embBlink 2.6s steps(1) infinite; }

  .ic-firewall .scan{ animation:embScan 3s cubic-bezier(.5,0,.5,1) infinite; }

  .ic-allow .ck{ opacity:0; animation:embCheck 3.2s ease-in-out infinite; }
  .ic-allow .c1{ animation-delay:.2s; }
  .ic-allow .c2{ animation-delay:.7s; }
  .ic-allow .c3{ animation-delay:1.2s; }

  .ic-audit .trav{ animation:embTravel 2.8s cubic-bezier(.5,0,.5,1) infinite; }

  .ic-vet .lens{ animation:embScan2 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .ic-vet .vk{ opacity:0; animation:embCheck 3.4s ease-in-out infinite; animation-delay:1.1s; }
}
@keyframes embPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes embFade{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@keyframes embBlink{ 0%,45%{ opacity:1; } 50%,95%{ opacity:.2; } }
@keyframes embScan{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateY(19px); opacity:0; } }
@keyframes embCheck{ 0%,10%{ opacity:0; transform:scale(.6); } 22%,68%{ opacity:1; transform:scale(1); } 80%,100%{ opacity:0; transform:scale(1); } }
@keyframes embTravel{ 0%{ transform:translateX(0); } 100%{ transform:translateX(21px); } }
@keyframes embScan2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(4px,3px); } }

.sec-marquee{ border-top:1px solid var(--line-light); overflow:hidden; }
.sec-marquee .marquee{ animation-duration:44s; }
.sec-marquee .plate{ color:var(--on-light); opacity:1; gap:10px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; height:62px; }
.sec-marquee .plate .lock{ color:var(--on-light-mut); display:inline-flex; align-items:center; }
.sec-marquee .plate .lock svg{ display:block; }

/* ============================================================
   DARK CLOSING
   ============================================================ */
.closing{ background:var(--ink-dark-2); position:relative; overflow:hidden; }
.closing::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px);
  mask-image:radial-gradient(120% 90% at 30% 30%, #000, transparent 80%);
}
.closing-inner{ position:relative; padding-top:130px; padding-bottom:140px; }
.cl-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--on-dark); margin-bottom:48px; }
.cl-eyebrow .ring{ width:14px; height:14px; border-radius:50%; border:1px solid var(--on-dark-mut); display:inline-flex; align-items:center; justify-content:center; }
.cl-eyebrow .ring i{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.cl-eyebrow .mut{ color:var(--on-dark-mut); }
.closing h2{
  margin:0; font-size:clamp(40px,5.5vw,74px); line-height:1.05; letter-spacing:-.026em;
}
.closing h2 .g1, .closing h2 .g2{ display:block; font-family:var(--sans); font-weight:500; letter-spacing:-.035em; }
.closing h2 .g3{ display:block; font-family:var(--serif); font-weight:400; letter-spacing:-.022em; }
.closing h2 .g1{ color:#5d5852; }
.closing h2 .g2{ color:#9b958d; }
.closing h2 .g3{ color:var(--on-dark); }
.closing .cbody{ margin:38px 0 0; max-width:58ch; font-size:17px; line-height:1.62; color:var(--on-dark-mut); }
.demo-chip{
  display:inline-flex; align-items:center; gap:14px; margin-top:40px;
  padding:10px 16px 10px 12px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-dark-2);
}
.demo-chip .avs{ display:flex; }
.demo-chip .avs .av{ width:38px; height:38px; border-radius:50%; background:#3a3733; border:2px solid var(--ink-dark-2); overflow:hidden; }
.demo-chip .avs .av.founder img{ width:100%; height:100%; object-fit:cover; display:block; }
.demo-chip .avs .av:nth-child(2){ margin-left:-12px; background:#4a4641; }
.demo-chip .meta b{ display:block; font-size:15px; font-weight:500; color:var(--on-dark); }
.demo-chip .meta span{ font-size:13px; color:var(--on-dark-mut); }
.demo-chip .go{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--on-dark); margin-left:10px; }
.closing .cmicro{ margin-top:24px; font-size:13.5px; color:var(--on-dark-dim); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--footer); color:var(--on-dark); }
.foot-top{ display:grid; grid-template-columns:1fr 2.1fr; gap:40px; padding-top:84px; padding-bottom:70px; }
.foot-brand .brand{ font-size:26px; }
.foot-brand .fstmt{ font-family:var(--sans); font-weight:500; font-size:36px; line-height:1.15; letter-spacing:-.03em; margin:36px 0 0; }
.foot-brand .fstmt .mut{ font-family:var(--serif); font-weight:400; letter-spacing:-.02em; color:var(--on-dark-mut); }
.foot-brand .ftag{ margin:20px 0 28px; font-size:14px; color:var(--on-dark-mut); }
.foot-social{ margin-top:22px; }
.foot-social a{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--on-dark-mut); transition:color .2s ease; }
.foot-social a:hover{ color:var(--on-dark); }
.foot-social svg{ display:block; }
.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.foot-col h5{ font-size:15px; font-weight:500; margin:0 0 18px; color:var(--on-dark); }
.foot-col h5.gap{ margin-top:32px; }
.foot-col a{ display:block; font-size:14px; color:var(--on-dark-mut); padding:6px 0; }
.foot-col a:hover{ color:var(--on-dark); }

.foot-llm{ display:flex; align-items:center; gap:22px; padding-top:30px; padding-bottom:30px; border-top:1px solid var(--line-dark); }
.foot-llm .ltxt{ font-size:15px; color:var(--on-dark); line-height:1.4; }
.foot-llm .ltxt span{ color:var(--on-dark-mut); }
.foot-llm .squares{ display:flex; gap:11px; }
.foot-llm .sq{ width:44px; height:44px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:var(--on-dark-mut); font-size:10px; letter-spacing:.05em; }

.foot-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:24px; padding-bottom:24px; border-top:1px solid var(--line-dark); font-size:13.5px; color:var(--on-dark-mut); }
.foot-bottom .lft a{ margin-right:22px; }
.foot-bottom .rgt a{ margin-left:22px; }
.foot-bottom a:hover{ color:var(--on-dark); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* tablet */
@media (max-width:1000px){
  :root{ --pad:40px; }
  .work-grid{ grid-template-columns:1fr 1fr; }
  .work-card:nth-child(2n){ border-right:0; }
  .stat-trio,.own-grid,.case3{ grid-template-columns:1fr; }
  .stat-cell,.own-cell,.case3 .c{ border-right:0; border-bottom:1px solid var(--line-dark); }
  .feat-grid{ grid-template-columns:1fr; }
  .feat-card{ border-right:0; min-height:auto; }
  .testi{ grid-template-columns:1fr; }
  .testi .t{ border-right:0; border-bottom:1px solid var(--line-dark); }
  .sec-band{ grid-template-columns:1fr; }
  .emblems{ justify-content:flex-start; }
  .foot-top{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
  .rtable .thead,.rtable .trow{ grid-template-columns:1.4fr 1fr 1fr; }
  .rtable .thead div:nth-child(2),.rtable .trow .c-before{ display:none; }
}

/* large phone / small tablet — compact nav, stacked hero card */
@media (max-width:760px){
  .nav-inner{ height:58px; gap:12px; justify-content:space-between; }
  .nav .brand{ font-size:19px; gap:8px; }
  .nav .logo-mark{ height:18px; }
  .nav-right{ margin-left:auto; }
  .nav-right .txt, .nav-right .pill-ghost{ display:none; }
  .nav-right .pill-solid{ font-size:13.5px; padding:10px 17px; }
  .announce{ font-size:12.5px; padding:9px 14px; }

  .hero-inner{ padding-top:40px; padding-bottom:18px; }
  .hero .he-eyebrow{ font-size:10.5px; letter-spacing:.03em; margin-bottom:16px; }
  .hero h1{ font-size:clamp(25px,7vw,38px); max-width:none; line-height:1.06; text-wrap:balance; }
  .hero .hero-tag{ margin-top:13px; font-size:13px; }
  .hero .lede{ font-size:15.5px; line-height:1.55; margin-top:16px; max-width:40ch; }
  .hero-cta{ margin-top:22px; flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .hero .micro{ margin-top:14px; }
  .hero-card{ width:212px; margin:16px auto 0; padding:8px 8px 13px; }
  .hero-card .screen{ height:100px; }
  .hero-card .label{ font-size:13px; margin-top:9px; }

  .sec-head{ padding-top:56px; padding-bottom:26px; }
  .sec-head .htitle{ font-size:clamp(27px,7.4vw,38px); }
  .own-head{ padding-top:44px; padding-bottom:22px; }
  .own-head .htitle{ font-size:clamp(24px,6.6vw,32px); }
  .lt-head{ padding-top:60px; padding-bottom:30px; }
  .lt-head .htitle{ font-size:clamp(30px,7.6vw,42px); }
  .stat-cell{ padding:34px 26px; }
  .stat-cell .num{ font-size:clamp(44px,13vw,62px); }
  .midnote{ padding:24px 26px; font-size:15px; }
  .own-cell{ padding:26px 24px 30px; }
  .result-band{ padding:28px 24px; }
  .result-band .r{ font-size:clamp(20px,5.4vw,26px); }
  .feat-card{ padding:32px 26px 34px; }
  .feat-card h3{ font-size:22px; }
  .testi .t{ padding:34px 26px; }
  .testi blockquote, .quotes blockquote{ font-size:20px; }
  .testi .stat{ font-size:20px; }
  .case3 .c{ padding:30px 26px 32px; min-height:auto; }
  .sec-band{ padding:40px 26px 26px; }
  .sec-band h2{ font-size:clamp(25px,7vw,34px); }
  .closing-inner{ padding-top:80px; padding-bottom:86px; }
  .closing h2{ font-size:clamp(36px,10vw,60px); }
  .cl-eyebrow{ margin-bottom:34px; }
  .closing .cbody{ font-size:16px; margin-top:30px; }
  .foot-top{ padding-top:60px; padding-bottom:50px; }
  .foot-brand .fstmt{ font-size:30px; }

  /* results table → stacked rows */
  .rtable .thead{ display:none; }
  .rtable .trow{ display:block; padding:18px 24px; }
  .rtable .name{ font-size:16px; margin-bottom:14px; }
  .rtable .trow > div:not(.name){ display:inline-block; width:48%; vertical-align:top; }
}

/* phone */
@media (max-width:560px){
  :root{ --pad:20px; }
  .hero-inner{ padding-top:34px; padding-bottom:14px; }
  .hero h1{ font-size:clamp(24px,6.8vw,33px); }
  .hero .lede{ font-size:15px; }
  .hero-card{ width:196px; }
  .work-grid{ grid-template-columns:1fr; }
  /* keep the 5 security emblems on one row even on the narrowest phones */
  .emblems{ gap:6px; justify-content:space-between; }
  .emb{ width:auto; flex:1; min-width:0; }
  .emb-ic{ width:48px; height:48px; }
  .emb-ic svg{ width:24px; height:24px; }
  .emb-l{ font-size:8px; letter-spacing:.02em; }
  .work-card{ border-right:0; border-bottom:1px solid var(--line-dark); min-height:auto; }
  .work-card:last-child{ border-bottom:0; }
  .own-cols{ grid-template-columns:1fr; gap:20px; }
  .own-col{ padding-right:0; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-llm{ flex-direction:column; align-items:flex-start; gap:16px; }
  .foot-bottom{ flex-direction:column; gap:14px; align-items:flex-start; }
  .foot-bottom .lft a{ margin-right:16px; }
  .foot-bottom .rgt a{ margin-left:0; margin-right:16px; }
  .emblem{ width:64px; height:64px; }
  .rtable .trow > div:not(.name){ width:100%; display:block; margin-bottom:10px; }
  .rtable .trow > div:not(.name):last-child{ margin-bottom:0; }
}

/* ============================================================
   MOTION — "How the work gets done" feature visuals
   ============================================================ */
.anim{ position:relative; min-height:150px; }

/* visuals are visible by default; entrance plays from hidden via keyframes on load (no JS gating) */
.anim-voice .vbar-fill{ width:92%; }

/* card 1 — voice training */
.anim-voice .vgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px 8px; }
.anim-voice .vgrid span{ height:9px; border-radius:3px; background:linear-gradient(90deg,#d9d4ca,#ece8e0); opacity:.4; }
.anim-voice .vbar{ height:6px; border-radius:99px; background:#eceae4; margin:22px 0 16px; overflow:hidden; }
.anim-voice .vbar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#5aa469,#86c690); }
.anim-voice .vmeta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.anim-voice .accuracy{ color:var(--accent); border-color:rgba(226,86,31,.35); }
.anim-voice .accuracy b{ font-weight:600; }

/* card 2 — integrations */
.anim-int .int-cluster{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.anim-int .hub{ font-weight:500; box-shadow:0 0 0 0 rgba(226,86,31,.32); }
.anim-int .ilogo{ width:34px; height:34px; border-radius:9px; background:#fff; border:1px solid var(--line-light); display:inline-flex; align-items:center; justify-content:center; }
.anim-int .ilogo img{ width:21px; height:21px; display:block; }
.anim-int .ilogo.klaviyo{ background:#e8543f; border-color:#e8543f; }
.anim-int .ilogo.klaviyo img{ width:32px; height:32px; object-fit:contain; }

/* card 3 — security scan */
.anim-sec{ overflow:hidden; border-radius:10px; padding:6px 2px; margin:-6px -2px; }
.anim-sec .sec-scan{ position:absolute; left:0; right:0; top:-12%; height:46px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(90,164,105,0), rgba(90,164,105,.18), rgba(90,164,105,0)); }
.anim-sec .sec-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.anim-sec .sec-chips .lchip{ display:inline-flex; align-items:center; gap:8px; }
.anim-sec .chk{ width:15px; height:15px; border-radius:50%; background:#5aa469; color:#fff; font-size:9px; line-height:1; display:inline-flex; align-items:center; justify-content:center; font-style:normal; }

/* card 4 — mission control dashboard */
.anim-dash .dash{ border:1px solid var(--line-light); border-radius:12px; padding:15px 16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.anim-dash .dash-top{ display:flex; align-items:center; gap:10px; font-size:12.5px; margin-bottom:15px; }
.anim-dash .live{ display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:500; }
.anim-dash .live i{ width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.anim-dash .dash-title{ margin-left:auto; color:var(--on-light); }
.anim-dash .kpis{ display:flex; gap:20px; margin-bottom:15px; }
.anim-dash .kpi b{ font-family:var(--serif); font-size:27px; font-weight:500; color:var(--on-light); display:block; line-height:1; }
.anim-dash .kpi span{ font-size:11px; color:var(--on-light-mut); }
.anim-dash .bars{ display:flex; align-items:flex-end; gap:5px; height:48px; }
.anim-dash .bars i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#d2cdc2,#e8e4dc); }
.anim-dash .bars i:nth-child(odd){ background:linear-gradient(180deg,#5aa469,#9ed0a6); }
.anim-dash .bars i:nth-child(1){ height:50%; }
.anim-dash .bars i:nth-child(2){ height:72%; }
.anim-dash .bars i:nth-child(3){ height:90%; }
.anim-dash .bars i:nth-child(4){ height:62%; }
.anim-dash .bars i:nth-child(5){ height:82%; }
.anim-dash .bars i:nth-child(6){ height:54%; }
.anim-dash .bars i:nth-child(7){ height:76%; }
.anim-dash .bars i:nth-child(8){ height:94%; }
.anim-dash .bars i:nth-child(9){ height:58%; }

/* ------------------------------------------------------------
   Motion contract (MOTION.md): each card performs ONCE when scrolled
   into view (whileInView), then holds a static resting state. No idle
   loops. Base states are the final/resting state, so captures, no-JS
   and reduced-motion all show the finished card.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  /* container blur-bloom reveal */
  .anim.play{ animation:bloomIn .42s var(--ease-out) both; }

  /* TL — voice: chips reveal → accuracy draws on → pills pop */
  .anim-voice.play .vgrid span{ animation:gridIn .4s var(--ease-out) both; }
  .anim-voice.play .vgrid span:nth-child(3n){ animation-delay:.42s; }
  .anim-voice.play .vgrid span:nth-child(3n+1){ animation-delay:.50s; }
  .anim-voice.play .vgrid span:nth-child(3n+2){ animation-delay:.58s; }
  .anim-voice.play .vbar-fill{ animation:drawBar 1.2s var(--ease-graph) .8s both; }
  .anim-voice.play .vmeta .lpill{ animation:popUp .34s var(--pop) both; }
  .anim-voice.play .vmeta .lpill:nth-child(1){ animation-delay:1.05s; }
  .anim-voice.play .vmeta .lpill:nth-child(2){ animation-delay:1.17s; }
  .anim-voice.play .vmeta .lpill:nth-child(3){ animation-delay:1.29s; }

  /* TR — integrations: nodes pop (child stagger .08), hub single ripple */
  .anim-int.play .int-node{ animation:popScale .4s var(--pop) both; }
  .anim-int.play .int-node:nth-child(1){ animation-delay:.40s; }
  .anim-int.play .int-node:nth-child(2){ animation-delay:.48s; }
  .anim-int.play .int-node:nth-child(3){ animation-delay:.56s; }
  .anim-int.play .int-node:nth-child(4){ animation-delay:.64s; }
  .anim-int.play .int-node:nth-child(5){ animation-delay:.72s; }
  .anim-int.play .int-node:nth-child(6){ animation-delay:.80s; }
  .anim-int.play .int-node:nth-child(7){ animation-delay:.88s; }
  .anim-int.play .int-node:nth-child(8){ animation-delay:.96s; }
  .anim-int.play .int-node:nth-child(9){ animation-delay:1.04s; }
  .anim-int.play .hub{ animation:popScale .4s var(--pop) .64s both, ripple 1s var(--ease-out) 1.05s 1; }

  /* BL — security: chips stagger → one scan pass → checks pop */
  .anim-sec.play .sec-chips .lchip{ animation:popUp .34s var(--pop) both; }
  .anim-sec.play .sec-chips .lchip:nth-child(1){ animation-delay:.40s; }
  .anim-sec.play .sec-chips .lchip:nth-child(2){ animation-delay:.48s; }
  .anim-sec.play .sec-chips .lchip:nth-child(3){ animation-delay:.56s; }
  .anim-sec.play .sec-chips .lchip:nth-child(4){ animation-delay:.64s; }
  .anim-sec.play .sec-chips .lchip:nth-child(5){ animation-delay:.72s; }
  .anim-sec.play .sec-scan{ animation:scanOnce 1.5s var(--ease-out) .55s 1; }
  .anim-sec.play .chk{ animation:checkPop .4s var(--pop) both; }
  .anim-sec.play .sec-chips .lchip:nth-child(1) .chk{ animation-delay:1.00s; }
  .anim-sec.play .sec-chips .lchip:nth-child(2) .chk{ animation-delay:1.15s; }
  .anim-sec.play .sec-chips .lchip:nth-child(3) .chk{ animation-delay:1.30s; }
  .anim-sec.play .sec-chips .lchip:nth-child(4) .chk{ animation-delay:1.45s; }
  .anim-sec.play .sec-chips .lchip:nth-child(5) .chk{ animation-delay:1.60s; }

  /* BR — mission control: KPIs pop, bars rise once then hold (static) */
  .anim-dash.play .kpi{ animation:popUp .35s var(--pop) both; }
  .anim-dash.play .kpi:nth-child(1){ animation-delay:.45s; }
  .anim-dash.play .kpi:nth-child(2){ animation-delay:.57s; }
  .anim-dash.play .kpi:nth-child(3){ animation-delay:.69s; }
  .anim-dash.play .bars i{ animation:barRise .55s var(--ease-out) both; }
  .anim-dash.play .bars i:nth-child(1){ animation-delay:.70s; }
  .anim-dash.play .bars i:nth-child(2){ animation-delay:.75s; }
  .anim-dash.play .bars i:nth-child(3){ animation-delay:.80s; }
  .anim-dash.play .bars i:nth-child(4){ animation-delay:.85s; }
  .anim-dash.play .bars i:nth-child(5){ animation-delay:.90s; }
  .anim-dash.play .bars i:nth-child(6){ animation-delay:.95s; }
  .anim-dash.play .bars i:nth-child(7){ animation-delay:1.00s; }
  .anim-dash.play .bars i:nth-child(8){ animation-delay:1.05s; }
  .anim-dash.play .bars i:nth-child(9){ animation-delay:1.10s; }
}
@media (prefers-reduced-motion: reduce){
  .anim.play{ animation:rmFade .2s ease both; }
}

@keyframes bloomIn{ from{ opacity:0; filter:blur(8px); transform:scale(.98);} to{ opacity:1; filter:blur(0); transform:scale(1);} }
@keyframes gridIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:.4; transform:none;} }
@keyframes drawBar{ from{ width:0;} to{ width:92%;} }
@keyframes popUp{ from{ opacity:0; transform:translateY(8px) scale(.98);} to{ opacity:1; transform:none;} }
@keyframes popScale{ from{ opacity:0; transform:scale(.55);} to{ opacity:1; transform:scale(1);} }
@keyframes ripple{ from{ box-shadow:0 0 0 0 rgba(226,86,31,.32);} to{ box-shadow:0 0 0 9px rgba(226,86,31,0);} }
@keyframes scanOnce{ 0%{ top:-14%; opacity:0;} 12%{ opacity:1;} 88%{ opacity:1;} 100%{ top:104%; opacity:0;} }
@keyframes checkPop{ from{ opacity:0; transform:scale(.4);} to{ opacity:1; transform:scale(1);} }
@keyframes barRise{ from{ height:0;} }
@keyframes rmFade{ from{ opacity:0;} to{ opacity:1;} }

/* ============================================================
   WORKFLOW CARD MOTION (play-once on scroll-in, same contract)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* Card 1 — Support: rows reveal top→down, auto-resolved tags pop */
  .wf-support.play .line-row{ animation:wfRow .42s var(--ease-out) both; }
  .wf-support.play .line-row:nth-child(1){ animation-delay:.10s; }
  .wf-support.play .line-row:nth-child(2){ animation-delay:.24s; }
  .wf-support.play .line-row:nth-child(3){ animation-delay:.38s; }
  .wf-support.play .line-row:nth-child(4){ animation-delay:.52s; }
  .wf-support.play .line-row .tag{ animation:wfPop .34s var(--pop) both; }
  .wf-support.play .line-row:nth-child(1) .tag{ animation-delay:.40s; }
  .wf-support.play .line-row:nth-child(2) .tag{ animation-delay:.54s; }
  .wf-support.play .line-row:nth-child(3) .tag{ animation-delay:.68s; }
  .wf-support.play .line-row:nth-child(4) .tag{ animation-delay:.82s; }

  /* Card 2 — Content: rows reveal, blocked tag pops accent, file slides up */
  .wf-content.play .line-row{ animation:wfRow .42s var(--ease-out) both; }
  .wf-content.play .line-row:nth-child(1){ animation-delay:.10s; }
  .wf-content.play .line-row:nth-child(2){ animation-delay:.24s; }
  .wf-content.play .line-row:nth-child(3){ animation-delay:.38s; }
  .wf-content.play .tag-accent{ animation:wfPop .4s var(--pop) .6s both; }
  .wf-content.play .chip-file{ animation:wfRise .5s var(--ease-out) .8s both; }

  /* Card 3 — Email: badge rows pop in sequence (flow building) */
  .wf-email.play .badge-row{ animation:wfPop .42s var(--pop) both; }
  .wf-email.play .badge-row:nth-child(1){ animation-delay:.14s; }
  .wf-email.play .badge-row:nth-child(2){ animation-delay:.34s; }
  .wf-email.play .badge-row:nth-child(3){ animation-delay:.54s; }

  /* Card 4 — Ops: source chips stagger in, live chip ripples once */
  .wf-ops.play .chip-file{ animation:wfRise .44s var(--ease-out) both; }
  .wf-ops.play .chip-file:nth-child(1){ animation-delay:.12s; }
  .wf-ops.play .chip-file:nth-child(2){ animation-delay:.26s; }
  .wf-ops.play .chip-file:nth-child(3){ animation-delay:.40s; }
  .wf-ops.play .chip-file:nth-child(4){ animation:wfRise .44s var(--ease-out) .54s both, wfRipple 1.1s var(--ease-out) 1.0s 1; }
}
.wf-ops .chip-file:nth-child(4){ position:relative; }

@keyframes wfRow{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} }
@keyframes wfRise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes wfPop{ from{ opacity:0; transform:scale(.7);} to{ opacity:1; transform:scale(1);} }
@keyframes wfRipple{ from{ box-shadow:0 0 0 0 rgba(226,86,31,.4);} to{ box-shadow:0 0 0 8px rgba(226,86,31,0);} }

/* ============================================================
   HERO TAGLINE
   ============================================================ */
.hero .hero-tag{ margin:16px 0 0; font-size:14px; letter-spacing:.05em; color:var(--on-dark-mut); }
.hero .hero-tag .inf{ color:var(--accent); font-style:normal; font-size:1.15em; vertical-align:-1px; margin-right:4px; }

/* ============================================================
   WHAT WE BUILD (6-card grid, dark)
   ============================================================ */
.build-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.build-card{ padding:30px 28px 34px; border-right:1px solid var(--line-dark); border-top:1px solid var(--line-dark); }
.build-card:nth-child(3n){ border-right:0; }
.build-card:nth-child(-n+3){ border-top:0; }
.build-card .bnum{ font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:var(--on-dark-dim); }
.build-card h3{ font-size:18px; font-weight:500; margin:14px 0 8px; color:var(--on-dark); letter-spacing:-.01em; }
.build-card p{ margin:0; font-size:14px; line-height:1.5; color:var(--on-dark-mut); }
.build-close{ border-top:1px solid var(--line-dark); padding:30px 40px; text-align:center; }
.build-close .r{ font-family:var(--serif); font-size:clamp(20px,2.5vw,30px); color:var(--on-dark); letter-spacing:-.01em; }
.build-close .r b{ color:#fff; font-weight:400; }

/* ============================================================
   PRICING (3 tiers, white)
   ============================================================ */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line-light); border-radius:4px; perspective:1200px; }
.tier{ padding:36px 32px 38px; border-right:1px solid var(--line-light); display:flex; flex-direction:column; min-height:240px; position:relative; background:#fff; cursor:pointer; transform-style:preserve-3d; will-change:transform; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.tier:last-child{ border-right:0; }
.tier.featured{ background:#fbfaf8; box-shadow:inset 0 3px 0 var(--accent); }
.tier::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%), rgba(226,86,31,.12), transparent 60%); }
.tier:hover{ z-index:3; box-shadow:0 30px 55px -22px rgba(0,0,0,.22); }
.tier:hover::after{ opacity:1; }
.tier-go{ margin-top:auto; padding-top:24px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--accent); opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .3s ease; }
.tier-go span{ transition:transform .2s ease; }
.tier:hover .tier-go{ opacity:1; transform:none; }
.tier:hover .tier-go span{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .tier{ transition:box-shadow .35s ease; will-change:auto; } }
@media (hover:none),(max-width:1000px){ .tier-go{ opacity:1; transform:none; } }
.tier .tnum{ font-size:12px; letter-spacing:.08em; color:var(--on-light-mut); }
.tier .tname{ font-family:var(--serif); font-weight:400; font-size:25px; margin:10px 0 0; color:var(--on-light); letter-spacing:-.01em; }
.tier .tbadge{ align-self:flex-start; margin-top:13px; font-size:11.5px; padding:4px 11px; border-radius:999px; background:var(--accent); color:#fff; letter-spacing:.02em; }
.tier .tdesc{ margin-top:16px; font-size:14.5px; line-height:1.55; color:var(--on-light-mut); }
.pricing-cta{ margin-top:30px; font-size:15px; line-height:1.6; color:var(--on-light-mut); max-width:76ch; }
.pricing-cta b{ color:var(--on-light); font-weight:500; }

@media (max-width:1000px){
  .build-grid{ grid-template-columns:1fr 1fr; }
  .build-card{ border-right:1px solid var(--line-dark)!important; border-top:1px solid var(--line-dark)!important; }
  .build-card:nth-child(2n){ border-right:0!important; }
  .build-card:nth-child(-n+2){ border-top:0!important; }
  .tier-grid{ grid-template-columns:1fr; }
  .tier{ border-right:0; border-bottom:1px solid var(--line-light); }
  .tier:last-child{ border-bottom:0; }
}
@media (max-width:560px){
  .build-grid{ grid-template-columns:1fr; }
  .build-card{ border-right:0!important; }
  .build-card:nth-child(-n+2){ border-top:1px solid var(--line-dark)!important; }
  .build-card:first-child{ border-top:0!important; }
  .build-close{ padding:26px 22px; }
}

/* ============================================================
   CASES — outcomes reel + aggregate stat band (light)
   ============================================================ */
.reel-strip{ border-bottom:1px solid var(--line-light); overflow:hidden; background:rgba(255,255,255,.4); }
.reel{ display:flex; width:max-content; animation:scroll 50s linear infinite; }
.reel-strip:hover .reel{ animation-play-state:paused; }
.reel .ritem{ display:flex; align-items:center; gap:12px; padding:22px 34px; border-right:1px solid var(--line-light); white-space:nowrap; }
.reel .ritem b{ font-family:var(--serif); font-weight:400; font-size:19px; color:var(--on-light); letter-spacing:-.01em; }
.reel .ritem span:not(.dot){ font-size:14px; color:var(--on-light-mut); }
.reel .ritem .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

.agg{ display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--line-light); }
.agg .a{ padding:34px 22px; border-right:1px solid var(--line-light); }
.agg .a:last-child{ border-right:0; }
.agg .a .an{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.2vw,42px); color:var(--on-light); line-height:1; letter-spacing:-.02em; }
.agg .a .an .ph{ color:#b6b0a5; }
.agg .a .al{ margin-top:10px; font-size:13px; color:var(--on-light-mut); line-height:1.4; }

.typical{ padding:32px 40px; text-align:center; }
.typical .r{ font-family:var(--serif); font-size:clamp(20px,2.4vw,28px); color:var(--on-light); letter-spacing:-.01em; }
.typical .r b{ color:var(--accent); font-weight:400; }

@media (max-width:1000px){
  .agg{ grid-template-columns:repeat(3,1fr); }
  .agg .a{ border-bottom:1px solid var(--line-light); }
  .agg .a:nth-child(3n){ border-right:0; }
}
@media (max-width:560px){
  .agg{ grid-template-columns:repeat(2,1fr); }
  .agg .a:nth-child(3n){ border-right:1px solid var(--line-light); }
  .agg .a:nth-child(2n){ border-right:0; }
  .reel .ritem{ padding:18px 22px; }
  .reel .ritem b{ font-size:17px; }
}

/* ============================================================
   CASES — testimonial slider (3 cards + arrows)
   ============================================================ */
.cslider{ position:relative; border-bottom:1px solid var(--line-light); }
.cs-viewport{ overflow:hidden; }
.cs-track{ display:flex; transition:transform .5s cubic-bezier(.16,1,.30,1); will-change:transform; }
.ccard{ flex:0 0 50%; box-sizing:border-box; padding:46px 50px; border-right:1px solid var(--line-light); }
.ccard .k{ font-size:13px; color:var(--on-light-mut); }
.ccard .cnum{ font-family:var(--serif); font-weight:400; font-size:34px; line-height:1; color:var(--on-light); letter-spacing:-.015em; margin:3px 0 24px; }
.ccard blockquote{ margin:0; font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.35; color:var(--on-light); letter-spacing:-.005em; }
.ccard blockquote .qm{ color:var(--accent); }
.ccard .by{ display:flex; align-items:center; gap:11px; margin-top:28px; font-size:14px; }
.ccard .by .av{ width:30px; height:30px; border-radius:50%; background:#d8d3c9; border:1px solid var(--line-light); flex:none; }
.ccard .by .clogo{ display:flex; align-items:center; height:26px; opacity:.75; }
.ccard .by .clogo img{ height:24px; width:auto; max-width:120px; object-fit:contain; display:block; }
.ccard .by .bym{ display:flex; flex-direction:column; line-height:1.3; }
.ccard .by .bym b{ font-weight:500; color:var(--on-light); }
.ccard .by .bym span{ font-size:13px; color:var(--on-light-mut); }
.ccard .by b{ font-weight:500; color:var(--on-light); }
.ccard .by span{ color:var(--on-light-mut); }
.cs-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-light-2); background:#fff; color:var(--on-light); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.07); transition:background .2s ease, opacity .2s ease; }
.cs-arrow.prev{ left:14px; }
.cs-arrow.next{ right:14px; }
.cs-arrow:hover{ background:#faf8f4; }
.cs-arrow[disabled]{ opacity:.3; cursor:default; box-shadow:none; }
@media (max-width:1000px){
  .ccard{ flex:0 0 100%; padding:36px 26px; border-right:0; }
  .cs-arrow.prev{ left:10px; } .cs-arrow.next{ right:10px; }
}