/* ═══════════════════════════════════════════════════════════════════
   CINYSUITE — marketing site design system
   Ethereal Glass on OLED black · Ciny accent system (#2563EB → #38BDF8)
   Satoshi everywhere · double-bezel cards · transform/opacity motion only
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg: #050505;
  --ink: #E9EEF6;
  --muted: #8A96A8;
  --faint: #5d6675;
  --blue: #2563EB;
  --bright: #3B82F6;
  --teal: #38BDF8;
  --grad: linear-gradient(135deg, #2563EB 0%, #38BDF8 100%);
  --hairline: rgba(255,255,255,0.08);
  --hairline-soft: rgba(255,255,255,0.05);
  --shell: rgba(255,255,255,0.035);
  --core: #0b0c0e;
  --ok: #4ade80;
  --amber: #facc15;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --r-shell: 2rem;
  --r-core: calc(2rem - 0.4rem);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Satoshi', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "ss01", "cv01";
  font-size: 16px; line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(56,189,248,0.35); color: #fff; }

/* ── Aurora mesh background (fixed, GPU-cheap) ─────────────────────── */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35;
  animation: drift 26s var(--ease) infinite alternate;
  will-change: transform;
}
.aurora .a1 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(37,99,235,.55), transparent 65%); top: -12%; left: -8%; }
.aurora .a2 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(56,189,248,.4), transparent 65%); top: 4%; right: -10%; animation-delay: -8s; }
.aurora .a3 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(30,64,175,.45), transparent 65%); bottom: -22%; left: 28%; animation-delay: -16s; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(60px,40px,0) scale(1.12); }
}
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Floating pill nav ─────────────────────────────────────────────── */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; padding-top: 22px; pointer-events: none; }
.nav {
  pointer-events: auto;
  /* True 3-column grid: links are dead-centre no matter how wide the
     logo or CTA are (auto-margins only centre when the sides match). */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  width: min(1140px, calc(100vw - 44px));
  padding: 9px 12px 9px 20px; border-radius: 999px;
  background: rgba(10,11,13,0.6); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 40px -18px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nav .logo { justify-self: start; }
.nav .nav-links { justify-self: center; }
.nav .nav-cta { justify-self: end; margin-left: 0; }
.nav .logo { display: flex; align-items: center; gap: 9px; margin-right: 10px; font-weight: 800; font-size: 15.5px; letter-spacing: .2px; }
.nav .logo img { width: 24px; height: 24px; }
.nav .logo em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > div, .nav-links > a { position: relative; }
.nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: color .5s var(--ease), background .5s var(--ease);
  background: transparent; border: none; font-family: inherit;
}
.nav-item:hover, .nav-item.open { color: var(--ink); background: rgba(255,255,255,0.06); }
.nav-item svg { width: 11px; height: 11px; opacity: .6; transition: transform .5s var(--ease); }
.nav-item.open svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 8px) scale(.98); opacity: 0; pointer-events: none;
  min-width: 300px; padding: 8px;
  background: rgba(12,13,16,0.85); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--hairline); border-radius: 22px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.dropdown.open { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.dropdown a {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 15px;
  transition: background .4s var(--ease);
}
.dropdown a:hover { background: rgba(255,255,255,0.05); }
.dropdown a b { font-size: 13.5px; font-weight: 700; }
.dropdown a span { font-size: 11.5px; color: var(--muted); }
.nav-cta { margin-left: 8px; }

/* ── Buttons — pill, button-in-button trailing icon ────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 8px 11px 22px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(56,189,248,.25), 0 12px 34px -14px rgba(37,99,235,.8), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover { box-shadow: 0 0 0 1px rgba(56,189,248,.4), 0 16px 44px -12px rgba(37,99,235,.95), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:active { transform: scale(.98); }
.btn .orb {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  background: rgba(255,255,255,0.16);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.btn:hover .orb { transform: translate(2px,-1px) scale(1.06); background: rgba(255,255,255,0.24); }
.btn .orb svg { width: 13px; height: 13px; }
.btn.ghost {
  background: rgba(255,255,255,0.05); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255,255,255,.05);
}
.btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.08); }
.btn.ghost .orb { background: rgba(255,255,255,0.07); }
.btn.small { padding: 8px 6px 8px 16px; font-size: 13px; }
.btn.small .orb { width: 26px; height: 26px; }

/* ── Layout primitives ─────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
section { padding: 110px 0; scroll-margin-top: 90px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--teal);
  background: rgba(56,189,248,0.07); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.22);
  margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
/* Display voice: Clash Display at MEDIUM weight — distinctive, never heavy
   (Kevin 2026-08-03: "not bold or too bold... unique but minimal"). */
h1 { font-family: 'Clash Display', 'Satoshi', sans-serif; font-size: clamp(2.6rem, 5.6vw, 4.5rem); line-height: 1.06; font-weight: 500; letter-spacing: -0.01em; }
h2 { font-family: 'Clash Display', 'Satoshi', sans-serif; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.14; font-weight: 500; letter-spacing: -0.008em; }
h3 { font-size: 1.12rem; font-weight: 600; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--muted); max-width: 640px; }
.center { text-align: center; }
.center .lede { margin: 18px auto 0; }

/* ── Double-bezel card ─────────────────────────────────────────────── */
.shell {
  background: var(--shell); border-radius: var(--r-shell); padding: 6px;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}
.core {
  background: linear-gradient(160deg, rgba(37,99,235,0.07), rgba(37,99,235,0.015) 40%, transparent 75%), var(--core);
  border-radius: var(--r-core); padding: 28px; height: 100%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
}
.core h3 { margin-bottom: 8px; }
.core p { font-size: 13.5px; color: var(--muted); }
.icon-tile {
  width: 40px; height: 40px; border-radius: 13px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(56,189,248,0.08); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.2);
}
.icon-tile svg { width: 18px; height: 18px; stroke: var(--teal); }

/* ── Bento grid ────────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.b8 { grid-column: span 8; } .b7 { grid-column: span 7; } .b6 { grid-column: span 6; }
.b5 { grid-column: span 5; } .b4 { grid-column: span 4; } .b12 { grid-column: span 12; }

/* ── Scroll reveal (transform/opacity only) ────────────────────────── */
.rv { opacity: 0; transform: translate3d(0, 44px, 0); filter: blur(8px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.rv.in { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; }
.rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; }

/* ═══ DEVICE MOCKUPS — DOM-drawn product, crisp at any scale ════════ */
.laptop { position: relative; width: 100%; max-width: 860px; margin: 0 auto; }
.laptop .screen {
  border-radius: 18px; padding: 10px;
  background: linear-gradient(180deg, #1a1d22, #0c0e11);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 60px 120px -40px rgba(0,0,0,.9), 0 0 90px -30px rgba(37,99,235,.4);
}
.laptop .display { border-radius: 10px; overflow: hidden; background: #060708; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.laptop .base {
  height: 14px; margin: 0 -3.5%; border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #23262c, #0d0f12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 50px -22px rgba(0,0,0,.9);
}
.laptop .base::after { content: ''; display: block; width: 13%; height: 5px; margin: 0 auto; border-radius: 0 0 8px 8px; background: rgba(0,0,0,.5); }

.tablet {
  border-radius: 22px; padding: 9px;
  background: linear-gradient(180deg, #1a1d22, #0c0e11);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 70px -25px rgba(56,189,248,.35);
}
.tablet .display { border-radius: 14px; overflow: hidden; background: #060708; }

/* ── Hub UI mock (inside devices) ──────────────────────────────────── */
.hub { display: flex; font-size: 10px; min-height: 100%; text-align: left; }
.hub .sb {
  width: 21%; min-width: 118px; padding: 12px 9px; flex-shrink: 0;
  background: radial-gradient(160% 70% at 0% 0%, rgba(59,130,246,.12), transparent 55%), linear-gradient(180deg, rgba(18,0,40,.5), rgba(12,0,28,.6)), #080808;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}
.hub .sb .lg { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-weight: 800; font-size: 10.5px; color: #fff; }
.hub .sb .lg img { width: 15px; height: 15px; }
.hub .sb .lbl { font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 8px 4px 4px; font-weight: 700; }
.hub .ni { display: flex; align-items: center; gap: 7px; padding: 5.5px 8px; border-radius: 7px; color: rgba(255,255,255,.55); font-weight: 600; font-size: 9px; }
.hub .ni.on { color: #fff; background: linear-gradient(135deg, rgba(37,99,235,.4), rgba(30,64,175,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px -4px rgba(37,99,235,.7); position: relative; }
.hub .ni.on::before { content: ''; position: absolute; left: -3px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #3B82F6, #38BDF8); }
.hub .ni i { width: 9px; height: 9px; border-radius: 3px; background: currentColor; opacity: .5; flex-shrink: 0; }
.hub .main { flex: 1; padding: 12px 14px; min-width: 0; background: #060708; }
.hub .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hub .hd b { font-size: 11px; color: #fff; }
.hub .chip { font-size: 6.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--muted); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.hub .chip.live { color: var(--ok); }
.hub .run { margin-left: auto; padding: 4px 10px; border-radius: 99px; background: var(--grad); color: #fff; font-weight: 700; font-size: 7.5px; box-shadow: 0 4px 12px -4px rgba(37,99,235,.8); }
.hub .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.hub .kc { background: linear-gradient(150deg, rgba(37,99,235,.1), transparent 70%), #0d0e11; border-radius: 9px; padding: 8px 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.hub .kc .k { font-size: 6px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.hub .kc .v { font-size: 13px; font-weight: 800; color: #fff; margin-top: 2px; }
.hub .kc .s { font-size: 6px; color: var(--muted); }
.hub .agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hub .ag { background: #0d0e11; border-radius: 10px; padding: 9px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.hub .ag .face { width: 26px; height: 26px; margin: 0 auto 5px; border-radius: 99px; background: var(--grad); position: relative; box-shadow: 0 0 0 2px #0d0e11, 0 0 0 3.5px rgba(59,130,246,.5), 0 0 16px -2px rgba(37,99,235,.8); }
.hub .ag.done .face { box-shadow: 0 0 0 2px #0d0e11, 0 0 0 3.5px rgba(74,222,128,.5); background: linear-gradient(135deg, #16a34a, #4ade80); }
.hub .ag.dim { opacity: .38; filter: grayscale(.8); }
.hub .ag b { display: block; font-size: 8px; color: #fff; }
.hub .ag span { font-size: 6px; color: var(--muted); }
.hub .bar { height: 3px; border-radius: 99px; background: rgba(255,255,255,.07); margin-top: 6px; overflow: hidden; }
.hub .bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); animation: fill 3.2s var(--ease) infinite alternate; transform-origin: left; }
@keyframes fill { from { transform: scaleX(.35); } to { transform: scaleX(.92); } }

/* Portal mock (tablet) */
.pt { font-size: 9px; padding: 11px; background: #060708; text-align: left; }
.pt .hd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pt .hd b { color: #fff; font-size: 10px; }
.pt table { width: 100%; border-collapse: collapse; }
.pt th { font-size: 5.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 4px 5px; border-bottom: .5px solid rgba(255,255,255,.07); font-weight: 700; }
.pt td { font-size: 7.5px; color: var(--muted); padding: 5.5px 5px; border-bottom: .5px solid rgba(255,255,255,.05); }
.pt td b { color: #fff; font-size: 8px; }
.pt .dot { width: 5px; height: 5px; border-radius: 99px; background: var(--ok); display: inline-block; box-shadow: 0 0 6px var(--ok); }
.pt .pl { padding: 1.5px 6px; border-radius: 99px; background: rgba(255,255,255,.06); font-size: 6px; font-weight: 700; color: var(--muted); }

/* Floating stat chips around hero devices */
.float-chip {
  position: absolute; z-index: 3;
  padding: 10px 14px; border-radius: 16px;
  background: rgba(13,14,17,.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 20px 50px -20px rgba(0,0,0,.9);
  animation: bob 7s var(--ease) infinite alternate;
}
.float-chip b { display: block; font-size: 16px; font-weight: 800; }
.float-chip span { font-size: 10px; color: var(--muted); font-weight: 600; }
@keyframes bob { from { transform: translate3d(0,-6px,0); } to { transform: translate3d(0,8px,0); } }

/* ── Band (ticker strip) ───────────────────────────────────────────── */
.band { padding: 34px 0; border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); }
.band .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.band .stat b { font-size: 22px; font-weight: 800; display: block; }
.band .stat span { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

/* ── Steps (how the loop works) ────────────────────────────────────── */
.steps { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; }
.step { flex: 1; min-width: 150px; position: relative; padding: 22px 18px; }
.step .n { font-size: 11px; font-weight: 800; color: var(--teal); letter-spacing: .16em; }
.step h3 { margin: 8px 0 6px; font-size: 15px; }
.step p { font-size: 12.5px; color: var(--muted); }
.step + .step { box-shadow: inset 1px 0 0 var(--hairline-soft); }

/* ── Hero scene — ruh.ai-style: one lead character, cards + orbits ─── */
.scene {
  /* 1fr | auto | 1fr keeps the character on the exact page axis; the side
     cards centre themselves inside equal flex columns. */
  position: relative; max-width: 1120px; margin: 64px auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center;
  text-align: left;
}
.scene .side-l { justify-self: end; width: min(300px, 100%); }
.scene .side-r { justify-self: start; width: min(340px, 100%); }
.scene-tag {
  position: absolute; top: -8px; left: 4%; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: rgba(13,14,17,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 16px 40px -18px rgba(0,0,0,.9);
}
.scene-tag img { width: 16px; height: 16px; }
.char-wrap { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 470px; width: 470px; max-width: 44vw; margin: 0 auto; }
.char-wrap .char {
  position: relative; z-index: 3; width: min(330px, 86%); height: auto;
  filter: drop-shadow(0 34px 60px rgba(37,99,235,.4)) drop-shadow(0 6px 18px rgba(0,0,0,.6));
  animation: bob 8s var(--ease) infinite alternate;
}
.char-wrap .char-name {
  position: absolute; z-index: 4; bottom: 6px; left: 50%; transform: translateX(-50%);
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(13,14,17,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 12px; font-weight: 800;
}
.char-wrap .char-name span { color: var(--muted); font-weight: 600; font-size: 11px; }
.orbit { position: absolute; border-radius: 999px; border: 1.5px dashed rgba(56,189,248,.28); z-index: 1; }
.orbit.o1 { width: 400px; height: 400px; bottom: 6%; }
.orbit.o2 { width: 540px; height: 540px; bottom: -8%; border-color: rgba(139,92,246,.2); }
.char-glow {
  position: absolute; bottom: 0; width: 480px; height: 320px; z-index: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(37,99,235,.24), transparent 65%);
  filter: blur(6px);
}
.app-ic {
  position: absolute; z-index: 4; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,17,21,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 14px 34px -14px rgba(0,0,0,.9);
  animation: bob 6.5s var(--ease) infinite alternate;
}
.app-ic svg { width: 20px; height: 20px; }
.dots { position: absolute; z-index: 2; opacity: .8; animation: bob 9s var(--ease) infinite alternate; }

.task-card {
  position: relative; z-index: 5; border-radius: 20px; padding: 20px 22px;
  background: rgba(13,14,17,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 26px 60px -26px rgba(0,0,0,.95);
  animation: bob 8.5s var(--ease) infinite alternate;
}
.task-card h4 { font-size: 14.5px; font-weight: 800; margin-bottom: 12px; }
.task-card .row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.task-card .row .tick {
  width: 17px; height: 17px; border-radius: 6px; flex-shrink: 0;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.task-card .row .tick svg { width: 9px; height: 9px; stroke: var(--ok); }
.skeleton { height: 7px; border-radius: 99px; background: rgba(255,255,255,.06); margin-top: 10px; }

.callouts { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 5; }
.callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: 16px;
  background: rgba(13,14,17,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 22px 50px -24px rgba(0,0,0,.95);
  animation: bob 7.5s var(--ease) infinite alternate;
  font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.5;
}
.callout b { color: var(--ink); }
.callout .ic {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cc, #3B82F6) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc, #3B82F6) 40%, transparent);
}
.callout .ic svg { width: 15px; height: 15px; stroke: var(--cc, #3B82F6); }

.crew { display: flex; align-items: flex-start; justify-content: center; gap: 18px; margin-top: 46px; flex-wrap: wrap; }
.crew .lbl { width: 100%; text-align: center; margin: 0 0 10px; }
.crew .m { text-align: center; }
.crew .m .ring { width: 54px; aspect-ratio: 1/1; border-radius: 999px; padding: 2.5px; margin: 0 auto;
  background: conic-gradient(from 210deg, var(--ac, #3B82F6), transparent 62%); }
.crew .m img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; border-radius: 999px; background: #0b0c10; display: block; }
.crew .m b { display: block; font-size: 10.5px; font-weight: 700; margin-top: 6px; color: var(--muted); }
.crew .lbl { font-size: 11px; color: var(--faint); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; }

@media (max-width: 900px) {
  .scene { grid-template-columns: 1fr; }
  .char-wrap { order: -1; min-height: 380px; }
  .orbit.o2, .dots { display: none; }
  .scene-tag { position: static; margin: 0 auto 10px; }
}

/* ── Agent stage — the team, one shot, bubbles + KPIs ──────────────── */
.stage { position: relative; max-width: 1100px; margin: 70px auto 0; height: 540px; }
.agent { position: absolute; text-align: center; animation: bob 7s var(--ease) infinite alternate; }
.agent .ring {
  position: relative; margin: 0 auto; border-radius: 999px; padding: 4px;
  aspect-ratio: 1 / 1;
  background: conic-gradient(from 210deg, var(--ac, #3B82F6), transparent 62%);
  box-shadow: 0 0 34px -6px var(--ac, #3B82F6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.agent .ring::after {
  content: ''; position: absolute; inset: -14px; border-radius: 999px; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac, #3B82F6) 22%, transparent), transparent 70%);
}
.agent img {
  display: block; border-radius: 999px; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 8%;
  background: radial-gradient(circle at 50% 30%, #14161c, #0b0c10);
}
.agent b { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 800; }
.agent span.role { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac, var(--muted)); margin-top: 2px; }
.agent.lead .ring { padding: 5px; }
.agent.dim { opacity: .55; }
.agent.dim .ring { box-shadow: 0 0 18px -8px var(--ac); }

.bubble {
  position: absolute; z-index: 5; white-space: nowrap;
  padding: 9px 14px; border-radius: 14px; font-size: 11.5px; font-weight: 600; color: var(--ink);
  background: rgba(13,14,17,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 18px 44px -18px rgba(0,0,0,.9);
  animation: bob 6s var(--ease) infinite alternate;
}
.bubble i { font-style: normal; color: var(--teal); font-weight: 800; }
.bubble.ok i { color: var(--ok); }
.bubble::after {
  content: ''; position: absolute; width: 10px; height: 10px; border-radius: 3px;
  background: inherit; box-shadow: inset 0 0 0 1px var(--hairline);
  bottom: -4px; left: 24px; transform: rotate(45deg);
}
.bubble.below::after { bottom: auto; top: -4px; }
.stage .kpi {
  position: absolute; z-index: 4; text-align: left;
  padding: 10px 16px; border-radius: 16px;
  background: rgba(13,14,17,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--hairline-soft), 0 20px 50px -22px rgba(0,0,0,.9);
  animation: bob 8s var(--ease) infinite alternate;
}
.stage .kpi b { display: block; font-size: 18px; font-weight: 800; }
.stage .kpi span { font-size: 9.5px; color: var(--muted); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stage-glow {
  position: absolute; left: 50%; top: 46%; width: 700px; height: 420px; z-index: -1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(37,99,235,.16), transparent 65%);
  filter: blur(8px);
}
@media (max-width: 900px) {
  .stage { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; padding: 0 8px; }
  .agent { position: static !important; }
  .agent .ring { width: 96px !important; }
  .bubble, .stage .kpi, .stage-glow { display: none; }
}

/* ── Split hero ────────────────────────────────────────────────────── */
.hero-split { display: grid; grid-template-columns: 0.94fr 1.06fr; gap: 54px; align-items: center; }
.hero-split h1 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); }
.trust-row { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.trust-row .t b { font-size: 17px; font-weight: 800; display: block; }
.trust-row .t span { font-size: 10.5px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

/* ── Screen card — framed screenshot (image system) ────────────────── */
.screen-card {
  background: var(--shell); border-radius: 22px; padding: 6px;
  box-shadow: inset 0 0 0 1px var(--hairline-soft), 0 40px 90px -40px rgba(0,0,0,.9), 0 0 70px -30px rgba(37,99,235,.35);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.screen-card img { border-radius: 17px; display: block; width: 100%; height: auto; box-shadow: inset 0 1px 1px rgba(255,255,255,.08); }
.screen-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--hairline), 0 50px 110px -40px rgba(0,0,0,.95), 0 0 90px -25px rgba(56,189,248,.4); }

/* ── Media rows — alternating image/copy gallery ───────────────────── */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 46px 0; }
.media-row.flip .media { order: -1; }
.media-row .copy h3 { font-family: 'Clash Display', 'Satoshi', sans-serif; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -0.008em; margin: 14px 0 12px; }
.media-row .copy p { font-size: 14.5px; color: var(--muted); max-width: 480px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chips span {
  font-size: 11px; font-weight: 700; padding: 6px 13px; border-radius: 999px; color: var(--muted);
  background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

/* ── FAQ — flat, minimal: hairline dividers, no boxes ──────────────── */
.faq { max-width: 700px; margin: 44px auto 0; }
.faq details { border-bottom: 1px solid var(--hairline-soft); }
.faq details:first-of-type { border-top: 1px solid var(--hairline-soft); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 23px 2px; font-size: 15.5px; font-weight: 600; color: var(--ink);
  transition: color .4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; margin-left: auto; flex-shrink: 0; width: 12px; height: 12px;
  background:
    linear-gradient(var(--muted), var(--muted)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) center / 1.5px 12px no-repeat;
  transition: transform .5s var(--ease), filter .4s var(--ease);
}
.faq summary:hover::after { filter: brightness(1.4); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 40px 24px 2px; font-size: 14px; line-height: 1.7; color: var(--muted);
  animation: faqin .5s var(--ease);
}
@keyframes faqin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .media-row { grid-template-columns: 1fr; gap: 26px; padding: 30px 0; }
  .media-row.flip .media { order: 0; }
}

/* ── Marquee — icons drifting left→right, pause on hover ───────────── */
/* Kevin 2026-08-11: the edge fades used to be two absolutely-positioned divs
   painting a FLAT colour (--fade-bg: #F7F9FC) over the ends of the strip. The
   section behind them is not flat — it is three radial tints over a vertical
   gradient — so the flat colour never matched. Measured on the rendered page:
   the fade zones sat +20 to +26 RGB lighter than the section, and dead level in
   the middle, which read as a lighter rectangle with hard edges around the pills.
   A mask fades the CONTENT to transparent instead of painting over it, so the
   real background shows through and it is correct on any backdrop, gradient or
   not, light section or dark. */
.marquee {
  overflow: hidden; position: relative; padding: 30px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
/* The old overlay divs stay in the markup (harmless, 4 of them) but must not paint. */
.marquee .fade { display: none; }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: scrollx 30s linear infinite; will-change: transform; }
.marquee:hover .track { animation-play-state: paused; }
.marquee.rev .track { animation-direction: reverse; animation-duration: 36s; }
@keyframes scrollx { to { transform: translate3d(-50%, 0, 0); } }
.mq-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px;
  background: rgba(var(--overlay-rgb, 255, 255, 255), 0.04);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
  transition: color .5s var(--ease), box-shadow .5s var(--ease);
}
.mq-item:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.mq-item svg { width: 16px; height: 16px; flex-shrink: 0; }
/* superseded by the mask on .marquee above — kept only as a record of what was removed */

/* ── Hover choreography (transform/opacity only; bobbing cards get glow) ── */
.bento .shell { transition: transform .65s var(--ease), box-shadow .65s var(--ease); }
.bento .shell:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 30px 60px -30px rgba(0,0,0,.8), 0 0 60px -24px rgba(37,99,235,.5);
}
.nav-item { position: relative; }
.nav-links .nav-item::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 1.5px;
  background: var(--grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.nav-links .nav-item:hover::after, .nav-links .nav-item.open::after { transform: scaleX(1); }
.nav-item svg.chev { width: 11px; height: 11px; opacity: .6; transition: transform .5s var(--ease); }
.dropdown a { flex-direction: row; align-items: center; gap: 13px; }
.dropdown a .di {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dc, #3B82F6) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc, #3B82F6) 35%, transparent);
}
.dropdown a .di svg { width: 16px; height: 16px; stroke: var(--dc, #3B82F6); }
.dropdown a > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.crew .m .ring { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.crew .m:hover .ring { transform: translateY(-4px) scale(1.07); }
.crew .m:hover b { color: var(--ink); }
.callout:hover, .task-card:hover { box-shadow: inset 0 0 0 1px var(--hairline), 0 26px 60px -24px rgba(0,0,0,.95), 0 0 44px -18px rgba(56,189,248,.45); }
.app-ic:hover { box-shadow: inset 0 0 0 1px var(--hairline), 0 14px 34px -14px rgba(0,0,0,.9), 0 0 30px -8px rgba(56,189,248,.6); }
.dropdown a { transition: background .4s var(--ease), transform .4s var(--ease); }
.dropdown a:hover { transform: translateX(3px); }

/* ── Directional scroll reveals for media rows ─────────────────────── */
.media-row .copy.rv { transform: translate3d(-48px, 16px, 0); }
.media-row .media.rv { transform: translate3d(48px, 16px, 0); }
.media-row.flip .copy.rv { transform: translate3d(48px, 16px, 0); }
.media-row.flip .media.rv { transform: translate3d(-48px, 16px, 0); }
.media-row .rv.in { transform: translate3d(0, 0, 0); }

/* ── Light zone — the page breathes out of the dark mid-way ────────── */
section.light {
  background:
    radial-gradient(60% 40% at 8% 12%, rgba(139,92,246,0.07), transparent 60%),
    radial-gradient(55% 38% at 94% 30%, rgba(56,189,248,0.09), transparent 60%),
    radial-gradient(50% 36% at 10% 72%, rgba(236,72,153,0.06), transparent 60%),
    radial-gradient(55% 40% at 92% 88%, rgba(74,222,128,0.07), transparent 60%),
    linear-gradient(180deg, #EEF2F7 0%, #F7F9FC 22%, #F7F9FC 78%, #EEF2F7 100%);
  --ink: #0F172A; --muted: #5A6878; --faint: #67748A;
  --hairline: rgba(10, 15, 30, 0.12); --hairline-soft: rgba(10, 15, 30, 0.07);
  --shell: rgba(10, 15, 30, 0.045); --core: #FFFFFF;
  --overlay-rgb: 10, 15, 30;
  --fade-bg: #F7F9FC;
  color: var(--ink);
}
section.light .core {
  background: linear-gradient(160deg, rgba(37,99,235,0.05), rgba(37,99,235,0.01) 40%, transparent 75%), var(--core);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 14px 40px -22px rgba(15,23,42,0.18);
}
section.light .eyebrow { color: #0B7DC0; background: rgba(11,125,192,0.07); box-shadow: inset 0 0 0 1px rgba(11,125,192,0.25); }
section.light .eyebrow::before { background: #0B7DC0; box-shadow: 0 0 8px rgba(11,125,192,.8); }
section.light .screen-card {
  box-shadow: inset 0 0 0 1px var(--hairline-soft), 0 40px 90px -40px rgba(15,23,42,0.35), 0 0 70px -30px rgba(37,99,235,0.22);
}
section.light .faq details { border-color: rgba(10,15,30,0.1); }
section.light ::selection { background: rgba(37,99,235,.2); color: #0F172A; }

/* ── Border beam on hover (React-Bits style light running the edge) ── */
@property --bb { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.shell, .screen-card { position: relative; }
.shell::after, .screen-card::after, .cform::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--bb), transparent 0 78%, rgba(56,189,248,.9) 88%, rgba(37,99,235,.95) 95%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--ease);
  animation: bbspin 3s linear infinite paused;
  pointer-events: none;
}
.shell:hover::after, .screen-card:hover::after, .cform:hover::after, .cform:focus-within::after { opacity: 1; animation-play-state: running; }
@keyframes bbspin { to { --bb: 360deg; } }

/* ── Continuous / ambient motion ───────────────────────────────────── */
.orbit { animation: spinSlow 90s linear infinite; }
.orbit.o2 { animation-duration: 140s; animation-direction: reverse; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.eyebrow::before { animation: pulseDot 2.6s var(--ease) infinite; }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 4px var(--teal); opacity: .7; } 50% { box-shadow: 0 0 12px var(--teal); opacity: 1; } }
.btn:not(.ghost) { position: relative; overflow: hidden; }
.btn:not(.ghost)::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-130%);
  animation: shine 5.5s var(--ease) infinite; pointer-events: none;
}
@keyframes shine { 0% { transform: translateX(-130%); } 34% { transform: translateX(280%); } 100% { transform: translateX(280%); } }

/* ── Live pipeline card — loops forever: run → +1 asset → restart ──── */
.pipe-live .core { position: relative; overflow: hidden; }
.pl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.pl-cycle { font-size: 12px; color: var(--muted); font-weight: 700; margin-left: auto; font-family: ui-monospace, monospace; }
.pl-track { position: relative; display: flex; justify-content: space-between; margin: 0 6px 26px; }
.pl-track::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px;
  background: rgba(var(--overlay-rgb), 0.1); border-radius: 2px;
}
.pl-fill {
  position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; border-radius: 2px;
  background: var(--grad); transform-origin: left; transform: scaleX(0);
  transition: transform .9s var(--ease);
}
.pl-node { position: relative; z-index: 2; text-align: center; width: 90px; }
.pl-node .p {
  width: 16px; height: 16px; margin: 0 auto; border-radius: 999px;
  background: #14161c; box-shadow: inset 0 0 0 1.5px rgba(var(--overlay-rgb), 0.18);
  transition: all .5s var(--ease);
}
.pl-node b { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 10px; transition: color .5s var(--ease); }
.pl-node.on .p { background: var(--grad); box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 0 14px rgba(56,189,248,.7); }
.pl-node.on b { color: var(--ink); }
.pl-node.done .p { background: #14351f; box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.6); }
.pl-node.done b { color: var(--ok); }
.pl-counters { display: flex; gap: 34px; flex-wrap: wrap; }
.pl-counters .c b { font-size: 24px; font-weight: 700; font-family: 'Clash Display', sans-serif; display: block; transition: transform .3s var(--ease); }
.pl-counters .c span { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pl-counters .c b.tickup { transform: translateY(-3px) scale(1.12); color: var(--ok); }
.pl-toast {
  position: absolute; top: 60px; right: 22px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ok);
  background: rgba(16, 40, 24, .85); box-shadow: inset 0 0 0 1px rgba(74,222,128,.4), 0 14px 34px -14px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(10px) scale(.95); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.pl-toast.show { opacity: 1; transform: translateY(0) scale(1); }

/* ── Newsletter — the Cineletter ───────────────────────────────────── */
.nl-form { display: flex; gap: 10px; margin-top: 22px; max-width: 440px; }
.nl-form input {
  flex: 1; padding: 12px 16px; border-radius: 999px; font-size: 13.5px; font-family: inherit;
  background: rgba(var(--overlay-rgb), 0.05); border: none; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.nl-form input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 3px var(--glow-soft); }
.nl-avatar { position: relative; flex-shrink: 0; width: 250px; align-self: flex-end; margin-bottom: -44px; }
.nl-avatar .nl-glow {
  position: absolute; left: 50%; bottom: 6%; width: 300px; height: 240px; z-index: 0;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 78%, rgba(245,158,11,.22), transparent 65%);
  filter: blur(8px);
}
.nl-avatar img.full {
  position: relative; z-index: 1; width: 100%; height: auto; display: block;
  /* full-scale, faded into the card rather than cropped into a circle */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 97%);
  opacity: .95;
  filter: drop-shadow(0 18px 40px rgba(245,158,11,.25));
  animation: bob 8s var(--ease) infinite alternate;
}
.nl-avatar .bubble { z-index: 2; }
.nl-avatar .nl-name {
  position: absolute; z-index: 2; bottom: 40px; left: 50%; transform: translateX(-50%);
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
  background: rgba(13,14,17,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 12px; font-weight: 800;
}
.nl-avatar .nl-name span { color: var(--muted); font-weight: 600; font-size: 11px; }

/* ── Crew cards — the agents, with personality ─────────────────────── */
.crew-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.crew-card .core { text-align: center; padding: 26px 18px 22px; }
.crew-card .ring {
  width: 86px; aspect-ratio: 1/1; border-radius: 999px; padding: 3px; margin: 0 auto 14px;
  background: conic-gradient(from 210deg, var(--ac, #3B82F6), transparent 62%);
  box-shadow: 0 0 26px -8px var(--ac, #3B82F6);
  transition: transform .5s var(--ease);
}
.crew-card:hover .ring { transform: translateY(-4px) scale(1.06); }
.crew-card .ring img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; border-radius: 999px; background: #0b0c10; display: block; }
.crew-card b { display: block; font-size: 15px; font-weight: 700; }
.crew-card .role { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac, var(--muted)); margin: 3px 0 10px; }
.crew-card p { font-size: 12px; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) { .crew-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Compare columns ───────────────────────────────────────────────── */
.cmp .core li { list-style: none; display: flex; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--muted); align-items: flex-start; }
.cmp .core li::before { content: '✕'; color: var(--red, #ff5577); font-weight: 800; font-size: 11px; margin-top: 3px; }
.cmp.win .core li::before { content: '✓'; color: var(--ok); }
.cmp.win .shell, .cmp.win.shell { box-shadow: inset 0 0 0 1px rgba(56,189,248,.3); }

/* ── Viz compositions — designed visuals (not screenshots), always alive ── */
.viz {
  --vc: #3B82F6;
  border-radius: 22px; padding: 28px; min-height: 340px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vc) 10%, transparent), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, color-mix(in srgb, var(--vc) 5%, transparent), transparent 50%),
    var(--core);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 22%, transparent), 0 30px 70px -32px color-mix(in srgb, var(--vc) 45%, rgba(15,23,42,.3));
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  position: relative; overflow: hidden;
}
.viz::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--vc), color-mix(in srgb, var(--vc) 30%, transparent));
}
.viz .vt { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vc); }

/* Row color identity: eyebrow + chips take the module color */
.media-row .copy .eyebrow {
  color: var(--cc, var(--teal));
  background: color-mix(in srgb, var(--cc, var(--teal)) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc, var(--teal)) 30%, transparent);
}
.media-row .copy .eyebrow::before { background: var(--cc, var(--teal)); box-shadow: 0 0 8px var(--cc, var(--teal)); }
.media-row .chips span {
  color: color-mix(in srgb, var(--cc, var(--teal)) 72%, #1a2233);
  background: color-mix(in srgb, var(--cc, var(--teal)) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc, var(--teal)) 26%, transparent);
}

/* Colored micro-elements inside the viz cards */
.sigchip { --sc: var(--teal); background: color-mix(in srgb, var(--sc) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 26%, transparent); color: color-mix(in srgb, var(--sc) 65%, #1a2233); }
.sigchip:nth-child(1) { --sc: #38BDF8; }
.sigchip:nth-child(2) { --sc: #8B5CF6; }
.sigchip:nth-child(3) { --sc: #4ade80; }
.sigchip i { background: var(--sc); }
.briefcard { background: color-mix(in srgb, #8B5CF6 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #8B5CF6 22%, transparent); }
.day:has(.blog) { background: rgba(59,130,246,.07); box-shadow: inset 0 0 0 1px rgba(59,130,246,.16); }
.day:has(.stat):not(:has(.blog)) { background: rgba(236,72,153,.07); box-shadow: inset 0 0 0 1px rgba(236,72,153,.16); }
.calgrid .dh { color: color-mix(in srgb, var(--vc, #EC4899) 60%, var(--faint)); }

/* V1 — brief flow: signals → Julia → brief */
.v-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.sigstack { display: flex; flex-direction: column; gap: 9px; }
.sigchip {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: rgba(var(--overlay-rgb), .04); box-shadow: inset 0 0 0 1px var(--hairline-soft);
}
.sigchip i { width: 7px; height: 7px; border-radius: 99px; background: var(--teal); animation: pulseDot 2.2s var(--ease) infinite; }
.sigchip:nth-child(2) i { animation-delay: -0.7s; background: #8B5CF6; }
.sigchip:nth-child(3) i { animation-delay: -1.4s; background: var(--ok); }
.v-hub { position: relative; text-align: center; padding: 0 16px; }
.v-hub .ring {
  width: 88px; aspect-ratio: 1; border-radius: 999px; padding: 3px; margin: 0 auto;
  background: conic-gradient(from 210deg, #8B5CF6, transparent 62%);
  box-shadow: 0 0 30px -8px #8B5CF6; animation: bob 6s var(--ease) infinite alternate;
}
.v-hub .ring img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; border-radius: 999px; background: #0b0c10; display: block; }
.v-hub b {
  /* Hangs below the ring without affecting flow, so the CIRCLE (not
     circle + label) sits on the row's vertical centre. */
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.v-lane { position: relative; height: 2px; background: var(--hairline-soft); border-radius: 2px; overflow: visible; }
.v-lane i {
  position: absolute; top: -2.5px; width: 7px; height: 7px; border-radius: 99px;
  background: var(--grad); box-shadow: 0 0 10px rgba(56,189,248,.8);
  animation: laneflow 2.6s linear infinite;
}
.v-lane.rev i { animation-delay: -1.3s; }
@keyframes laneflow { from { left: -4%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }
.briefcard {
  border-radius: 14px; padding: 14px 16px;
  background: rgba(var(--overlay-rgb), .03); box-shadow: inset 0 0 0 1px var(--hairline-soft);
}
.briefcard b { font-size: 12px; font-weight: 800; display: block; margin-bottom: 9px; }
.bchip {
  display: flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 11.5px; font-weight: 600; color: var(--muted);
  opacity: 0; animation: briefin 6s var(--ease) infinite;
}
.bchip::before { content: '✓'; color: var(--ok); font-weight: 800; font-size: 10px; }
.bchip:nth-child(2) { animation-delay: 0s; } .bchip:nth-child(3) { animation-delay: 1s; } .bchip:nth-child(4) { animation-delay: 2s; }
@keyframes briefin { 0% { opacity: 0; transform: translateX(8px); } 8%, 94% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }

/* V2 — the Eye: gauge + voting persona dots */
.v-eye { flex-direction: row; align-items: center; gap: 30px; }
.gauge { position: relative; width: 150px; flex-shrink: 0; }
.gauge svg { width: 100%; transform: rotate(-90deg); }
.gauge .track { fill: none; stroke: var(--hairline); stroke-width: 9; }
.gauge .arc {
  fill: none; stroke: url(#gaugegrad); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 264;
  animation: gaugefill 5s var(--ease) infinite;
}
@keyframes gaugefill { 0% { stroke-dashoffset: 264; } 35%, 85% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 264; } }
.gauge .val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge .val b { font-size: 30px; font-weight: 700; font-family: 'Clash Display', sans-serif; }
.gauge .val span { font-size: 9px; color: var(--faint); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.p-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; flex: 1; }
.pv { position: relative; width: 34px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--pc, #3B82F6) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc, #3B82F6) 45%, transparent); }
.pv::before { content: ''; position: absolute; inset: 30%; border-radius: 99px; background: var(--pc, #3B82F6); opacity: .75; }
.pv::after {
  content: '✓'; position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 99px;
  background: var(--ok); color: #04120a; font-size: 8.5px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.4); animation: votein 5s var(--ease) infinite; animation-delay: var(--d, 0s);
}
@keyframes votein { 0%, 18% { opacity: 0; transform: scale(.4); } 26%, 82% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; } }

/* V3 — cadence calendar */
.v-cal { gap: 10px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.calgrid .dh { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--faint); text-align: center; text-transform: uppercase; }
.day {
  aspect-ratio: 1.25; border-radius: 9px; background: rgba(var(--overlay-rgb), .03);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.day.off { opacity: .35; }
.day s { width: 8px; height: 8px; border-radius: 99px; text-decoration: none; opacity: 0; transform: scale(.3); animation: landdot 7s var(--ease) infinite; animation-delay: var(--d, 0s); }
.day s.blog { background: var(--bright); box-shadow: 0 0 8px rgba(59,130,246,.7); }
.day s.stat { background: #EC4899; box-shadow: 0 0 8px rgba(236,72,153,.7); }
.day s.car { background: #8B5CF6; box-shadow: 0 0 8px rgba(139,92,246,.7); }
@keyframes landdot { 0% { opacity: 0; transform: scale(.3) translateY(-6px); } 10%, 85% { opacity: 1; transform: scale(1) translateY(0); } 95%, 100% { opacity: 0; } }
.callegend { display: flex; gap: 16px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.callegend i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; margin-right: 5px; }

/* V4 — analytics chart */
.v-chart svg { width: 100%; height: auto; }
.v-chart .line {
  fill: none; stroke: url(#chartgrad); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: drawline 6s var(--ease) infinite;
}
.v-chart .area { opacity: 0; animation: areain 6s var(--ease) infinite; }
@keyframes drawline { 0% { stroke-dashoffset: 620; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 620; } }
@keyframes areain { 0%, 20% { opacity: 0; } 55%, 85% { opacity: 1; } 100% { opacity: 0; } }
.v-chart .cchip {
  position: absolute; top: 22px; right: 24px; padding: 8px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: var(--ok);
  background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1px rgba(74,222,128,.35);
  animation: bob 5s var(--ease) infinite alternate;
}

@media (max-width: 900px) {
  .v-flow { grid-template-columns: 1fr; }
  .v-lane { display: none; }
  .v-eye { flex-direction: column; }
}

/* ── Crew spotlight — full-scale agents, auto-cycling ──────────────── */
.spotlight { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items: center; max-width: 1020px; margin: 50px auto 0; }
.sp-stage { position: relative; min-height: 460px; display: flex; align-items: flex-end; justify-content: center; }
.sp-glow {
  position: absolute; left: 50%; bottom: 4%; width: 340px; height: 280px; z-index: 0;
  transform: translateX(-50%); filter: blur(10px);
  background: radial-gradient(ellipse at 50% 78%, color-mix(in srgb, var(--sc, #3B82F6) 26%, transparent), transparent 65%);
  transition: background .8s var(--ease);
}
.sp-stage img {
  position: relative; z-index: 1; width: min(290px, 80%); height: auto; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 97%);
  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--sc, #3B82F6) 30%, transparent));
  animation: bob 8s var(--ease) infinite alternate;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sp-stage .bubble { z-index: 2; transition: opacity .5s var(--ease); }
.sp-stage .b1 { right: 2%; top: 6%; }
.sp-stage .b2 { left: -2%; top: 42%; }
.sp-name {
  position: absolute; z-index: 2; bottom: 26px; left: 50%; transform: translateX(-50%);
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
  background: rgba(13,14,17,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 12px; font-weight: 800;
}
.sp-name span { color: var(--muted); font-weight: 600; font-size: 11px; }
.sp-copy .role-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sc, var(--teal));
  background: color-mix(in srgb, var(--sc, var(--teal)) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, var(--teal)) 30%, transparent);
  margin-bottom: 16px; transition: all .6s var(--ease);
}
.sp-copy h3 { font-family: 'Clash Display', sans-serif; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.01em; }
.sp-copy p.bio { font-size: 14.5px; color: var(--muted); margin-top: 12px; max-width: 460px; min-height: 66px; }
.sp-copy .chips span { color: color-mix(in srgb, var(--sc, var(--teal)) 80%, #dfe6f2); background: color-mix(in srgb, var(--sc, var(--teal)) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, var(--teal)) 28%, transparent); }
.sp-copy.fading .role-tag, .sp-copy.fading h3, .sp-copy.fading .bio, .sp-copy.fading .chips { opacity: 0; transform: translateY(6px); }
.sp-copy .role-tag, .sp-copy h3, .sp-copy .bio, .sp-copy .chips { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.sp-stage.fading img, .sp-stage.fading .bubble { opacity: 0; }
.sp-stage.fading img { transform: translateY(10px); }

.sp-picker { display: flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap; padding-bottom: 22px; }
.sp-dot {
  width: 52px; aspect-ratio: 1; border-radius: 999px; padding: 2.5px; cursor: pointer; border: none;
  background: conic-gradient(from 210deg, var(--pcol, #3B82F6), transparent 62%);
  opacity: .42; transform: scale(.92);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sp-dot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; border-radius: 999px; background: #0b0c10; display: block; }
.sp-dot.on { opacity: 1; transform: scale(1.08); box-shadow: 0 0 22px -4px var(--pcol, #3B82F6); }
.sp-dot:hover { opacity: 1; }
.sp-dot { position: relative; }
.sp-dot::after {
  content: attr(data-n); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; color: var(--faint); white-space: nowrap; letter-spacing: .04em;
}
.sp-dot.on::after { color: var(--ink); }
@media (max-width: 900px) {
  .spotlight { grid-template-columns: 1fr; gap: 24px; }
  .sp-stage { min-height: 380px; }
}

/* ── Footer ────────────────────────────────────────────────────────── */
footer { padding: 70px 0 46px; border-top: 1px solid var(--hairline-soft); }
footer .cols { display: flex; gap: 60px; flex-wrap: wrap; justify-content: space-between; }
footer .col b { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
footer .col a { display: block; font-size: 13.5px; color: var(--muted); padding: 4px 0; transition: color .4s var(--ease); }
footer .col a:hover { color: var(--ink); }
footer .fine { margin-top: 44px; font-size: 12px; color: var(--faint); }

/* ── Page hero (subpages) ──────────────────────────────────────────── */
.page-hero { padding: 190px 0 70px; }

/* ── Mobile collapse ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  section { padding: 72px 0; }
  .bento { grid-template-columns: 1fr; }
  .b8, .b7, .b6, .b5, .b4, .b12 { grid-column: span 1; }
  .nav-links { display: none; }
  .float-chip { display: none; }
  .steps { flex-direction: column; }
  .step + .step { box-shadow: inset 0 1px 0 var(--hairline-soft); }
  .page-hero { padding: 150px 0 50px; }
}

/* Accessibility: honor reduced-motion — continuous animations stop, reveals
   become instant, content stays fully readable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .rv { opacity: 1; transform: none; filter: none; }
  .marquee .track { animation: none; transform: none; }
}
/* V5 — admin fleet control (dark section) */
.v-admin { min-height: 0; padding: 24px 26px; gap: 14px; width: 480px; max-width: 100%; flex-shrink: 0; }
.frow {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 13px;
  background: rgba(var(--overlay-rgb, 255,255,255), .035);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  font-size: 12px; font-weight: 700;
}
.frow .fdot { width: 8px; height: 8px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulseDot 2.4s var(--ease) infinite; }
.frow .fplan { font-size: 9.5px; font-weight: 700; color: var(--muted); padding: 3px 9px; border-radius: 99px; background: rgba(var(--overlay-rgb,255,255,255), .05); box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.frow .sws { margin-left: auto; display: flex; gap: 7px; }
.msw { position: relative; width: 27px; height: 15px; border-radius: 99px; background: rgba(74,222,128,.25); box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); }
.msw::after { content: ''; position: absolute; top: 2px; left: 14px; width: 11px; height: 11px; border-radius: 99px; background: var(--ok); transition: all .4s var(--ease); }
.msw.off { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--hairline); }
.msw.off::after { left: 2px; background: var(--faint); }
.msw.live { animation: swtrack 7s var(--ease) infinite; }
.msw.live::after { animation: swknob 7s var(--ease) infinite; }
@keyframes swknob { 0%, 28% { left: 2px; background: #5d6675; } 36%, 88% { left: 14px; background: #4ade80; } 96%, 100% { left: 2px; background: #5d6675; } }
@keyframes swtrack { 0%, 28% { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } 36%, 88% { background: rgba(74,222,128,.25); box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); } 96%, 100% { background: rgba(255,255,255,.06); } }
.cmdlane { position: relative; height: 30px; }
.cmdlane .rail { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; border-radius: 2px; background: var(--hairline-soft); }
.cmdchip {
  position: absolute; top: 1px; left: 0; padding: 5px 12px; border-radius: 99px;
  font-size: 9.5px; font-weight: 800; font-family: ui-monospace, monospace; color: var(--teal); white-space: nowrap;
  background: rgba(56,189,248,.1); box-shadow: inset 0 0 0 1px rgba(56,189,248,.35);
  animation: cmdgo 7s var(--ease) infinite; opacity: 0;
}
@keyframes cmdgo { 0%, 30% { left: 0; opacity: 0; } 34% { opacity: 1; } 48% { left: 55%; opacity: 1; } 52%, 100% { left: 60%; opacity: 0; } }
.cmdok {
  position: absolute; top: 1px; right: 0; padding: 5px 12px; border-radius: 99px;
  font-size: 9.5px; font-weight: 800; color: var(--ok); white-space: nowrap;
  background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1px rgba(74,222,128,.35);
  animation: cmdok 7s var(--ease) infinite; opacity: 0;
}
@keyframes cmdok { 0%, 50% { opacity: 0; transform: translateY(5px); } 56%, 88% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; } }
.auditline { font-size: 10px; font-family: ui-monospace, monospace; color: var(--faint); animation: cmdok 7s var(--ease) infinite; animation-delay: .4s; opacity: 0; }
.auditline b { color: var(--muted); }

/* V6 — evergreen planner (real layout: counts → approve → schedule) */
.v-eg { max-width: 880px; margin: 0 auto; min-height: 0; padding: 30px 34px; gap: 16px; }
.eg-head { display: flex; align-items: center; gap: 12px; }
.eg-gen {
  margin-left: auto; padding: 7px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--grad); box-shadow: 0 6px 18px -8px rgba(37,99,235,.8);
}
.eg-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.eg-count {
  --ec: #3B82F6;
  border-radius: 14px; padding: 14px 18px;
  background: color-mix(in srgb, var(--ec) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec) 25%, transparent);
}
.eg-count b { display: block; font-family: 'Clash Display', sans-serif; font-size: 26px; font-weight: 600; color: var(--ec); }
.eg-count span { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eg-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 12px;
  background: rgba(var(--overlay-rgb, 255,255,255), .03);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  opacity: 0; animation: egrow 9s var(--ease) infinite; animation-delay: var(--d, 0s);
}
@keyframes egrow { 0% { opacity: 0; transform: translateY(6px); } 5%, 93% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.eg-row .tchip {
  flex-shrink: 0; padding: 4px 11px; border-radius: 99px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tc, #3B82F6); background: color-mix(in srgb, var(--tc, #3B82F6) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, #3B82F6) 32%, transparent);
}
.eg-row .title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-st { position: relative; width: 150px; height: 22px; flex-shrink: 0; }
.eg-st span { position: absolute; right: 0; top: 0; padding: 3.5px 11px; border-radius: 99px; font-size: 9.5px; font-weight: 800; white-space: nowrap; opacity: 0; animation-duration: 9s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-delay: var(--d, 0s); }
.eg-st .st-idea { color: var(--muted); background: rgba(var(--overlay-rgb,255,255,255), .05); box-shadow: inset 0 0 0 1px var(--hairline-soft); animation-name: stidea; }
.eg-st .st-appr { color: var(--ok); background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1px rgba(74,222,128,.35); animation-name: stappr; }
.eg-st .st-schd { color: var(--teal); background: rgba(56,189,248,.1); box-shadow: inset 0 0 0 1px rgba(56,189,248,.35); animation-name: stschd; }
@keyframes stidea { 0%, 5% { opacity: 0; } 8%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes stappr { 0%, 33% { opacity: 0; transform: scale(.9); } 36%, 60% { opacity: 1; transform: scale(1); } 63%, 100% { opacity: 0; } }
@keyframes stschd { 0%, 63% { opacity: 0; transform: translateY(4px); } 66%, 93% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.eg-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--faint); font-weight: 600; }
.eg-note i { font-style: normal; color: var(--muted); font-weight: 800; }

/* V6b — evergreen MONTH calendar: the plan placing itself, day by day */
.v-egcal { max-width: 1120px; margin: 0 auto; min-height: 0; padding: 26px 32px; gap: 14px; }
.egc-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-left: 18px; }
.egc-legend i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.egc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.egc-grid .dh { font-size: 9px; font-weight: 800; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; text-align: center; padding-bottom: 2px; }
.egc-grid .dh.off { opacity: .5; }
.egc-cell {
  position: relative; aspect-ratio: 2.3; border-radius: 10px;
  background: rgba(var(--overlay-rgb, 255,255,255), .03);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.egc-cell .dn { position: absolute; top: 5px; left: 8px; font-size: 9.5px; font-weight: 700; color: var(--faint); }
.egc-cell.blank { background: transparent; box-shadow: none; }
.egc-cell.off { opacity: .38; }
.egc-cell .offlbl { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.egc-cell .dots { display: flex; gap: 4px; }
.egc-cell s { width: 9px; height: 9px; border-radius: 99px; text-decoration: none; opacity: 0; transform: scale(.3); animation: eglanddot 11s var(--ease) infinite; animation-delay: var(--d, 0s); }
.egc-cell s.blog { background: #4ade80; box-shadow: 0 0 9px rgba(74,222,128,.75); }
.egc-cell s.stat { background: #EC4899; box-shadow: 0 0 9px rgba(236,72,153,.75); }
.egc-cell s.car { background: #8B5CF6; box-shadow: 0 0 9px rgba(139,92,246,.75); }
.egc-cell:has(s.blog) { background: rgba(74,222,128,.055); }
@keyframes eglanddot { 0% { opacity: 0; transform: scale(.3) translateY(-7px); } 6%, 88% { opacity: 1; transform: scale(1) translateY(0); } 95%, 100% { opacity: 0; } }
@media (max-width: 900px) { .egc-legend { display: none; } }

/* chart line 2 (clicks) + endpoint dots */
.v-chart .line.l2 { stroke: #EC4899; stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawline 6s var(--ease) infinite; animation-delay: .5s; opacity: .85; }
.v-chart .dotend { opacity: 0; animation: areain 6s var(--ease) infinite; }
.v-chart .dotend.d2 { animation-delay: .5s; }

/* ── Contact / walkthrough form ───────────────────────────────────── */
.cgrid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; }
.csteps { margin-top: 26px; }
.cstep { display: flex; gap: 16px; padding: 18px 2px; border-top: 1px solid var(--hairline-soft); }
.cstep:last-child { border-bottom: 1px solid var(--hairline-soft); }
.cstep .n {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 13px; color: var(--teal);
  background: rgba(56,189,248,.09); box-shadow: inset 0 0 0 1px rgba(56,189,248,.22);
}
.cstep b { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.cstep p { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.55; }
.cmail { font-size: 13px; color: var(--muted); margin-top: 18px; }
.cmail a { color: var(--teal); }
.cform { position: relative; border-radius: 24px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--hairline); padding: 30px 30px 24px; }
.cform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cfield { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.cfield label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cfield input, .cfield select, .cfield textarea {
  width: 100%; padding: 12px 15px; border-radius: 13px; border: none; font-family: inherit; font-size: 14px;
  color: var(--ink); background: rgba(var(--overlay-rgb), 0.05); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow .25s var(--ease);
}
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 3px var(--glow-soft); }
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--faint); }
.cfield select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A96A8' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.cfield select option { background: var(--core); color: var(--ink); }
.cfield textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
.cform .btn { width: 100%; justify-content: center; margin-top: 4px; }
.cfine { font-size: 12px; color: var(--faint); text-align: center; margin: 14px 0 0; }
.cnote {
  display: none; margin-top: 14px; padding: 12px 15px; border-radius: 13px; font-size: 13px; line-height: 1.5;
  color: var(--ok); background: rgba(74,222,128,.08); box-shadow: inset 0 0 0 1px rgba(74,222,128,.25);
}
.cnote.show { display: block; }
/* Kevin 2026-08-11: the note used to be success-green only, because the only
   outcome was "your mail app opened". Now the form really submits, so it has
   to be able to say "that failed" too — green for a captured lead, amber for
   the mail fallback. */
.cnote.is-warn {
  color: #fbbf24; background: rgba(251,191,36,.08);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.25);
}
@media (max-width: 900px) {
  .cgrid { grid-template-columns: 1fr; gap: 36px; }
  .cform .frow { grid-template-columns: 1fr; }
}

/* ── Contact form: Franklin runs the desk ─────────────────────────── */
.cf-crew { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.cf-ava {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(245,158,11,.28), rgba(245,158,11,.06));
  box-shadow: inset 0 0 0 1.5px rgba(245,158,11,.45);
}
.cf-ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cf-bubble {
  position: relative; flex: 1; padding: 11px 15px; border-radius: 4px 16px 16px 16px;
  background: rgba(var(--overlay-rgb), 0.05); box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 13px; line-height: 1.5; color: var(--ink); min-height: 42px; display: flex; align-items: center;
}
.cf-bubble b { color: var(--amber); font-weight: 700; }
.cf-bubble.pop { animation: cfpop .38s var(--ease); }
@keyframes cfpop { 0% { transform: scale(.97); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.cf-meter { margin: 2px 0 18px; }
.cf-meter .bar { height: 5px; border-radius: 99px; background: rgba(var(--overlay-rgb), 0.07); overflow: hidden; }
.cf-meter .fill {
  height: 100%; width: 0; border-radius: inherit; background: var(--grad);
  transition: width .6s var(--ease);
}
.cf-meter .lbl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-top: 7px; }
.cf-meter .lbl b { color: var(--muted); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .cf-bubble.pop { animation: none; } }