/* ============================================================
   Satoshi, self-hosted.
   Fontshare is a third-party origin: a render-blocking stylesheet on a
   separate connection sitting in front of the first paint of every page.
   Serving the four weights we actually use from our own origin removes
   that hop entirely. font-display:swap so text is never invisible.
   ============================================================ */
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* ============================================================
   NEURA — Liquid Glass landing page
   Design system + material engine
   Swap the brand name "NEURA" in index.html (single <a class="logo">)
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Canvas — brand noir / near-black */
  --bg-0: #08080a;
  --bg-1: #0e0e12;
  --bg-2: #15151c;

  /* Brand colours — Acquisition & Scaling */
  --blue:    #3333FF;   /* Shock Blue — primary, authority */
  --blue-lo: #5b5bff;   /* lighter tint for glows/gradients */
  --crimson: #FC004C;   /* Vivid Crimson — energy / momentum accent */
  --snow:    #EFEFEF;   /* Snow White */
  --noir:    #1D1D1D;   /* Noir Black */

  /* Legacy aliases mapped to brand so existing rules inherit the new palette */
  --violet: #3333FF;
  --indigo: #3333FF;
  --cyan:   #5b5bff;
  --magenta:#FC004C;
  --aurora-1: #3333FF;
  --aurora-2: #5b5bff;
  --aurora-3: #FC004C;

  /* Text — neutral on near-black */
  --text-0: #f5f6f8;   /* primary */
  --text-1: #c4c6cf;   /* secondary */
  --text-2: #8b8e9c;   /* muted */
  --text-3: #595c6a;   /* faint */

  /* Glass material */
  --glass-fill: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 60%);
  --glass-border: rgba(255,255,255,0.14);
  --glass-blur: 22px;
  --glass-radius: 26px;

  /* Specular + depth shadow stack used across glass surfaces */
  --glass-shadow:
    0 1px 0 0 rgba(255,255,255,0.30) inset,        /* top crisp highlight */
    0 -1px 0 0 rgba(255,255,255,0.04) inset,       /* bottom faint */
    0 20px 50px -20px rgba(3,5,16,0.85),           /* lifted depth */
    0 2px 10px -4px rgba(3,5,16,0.6);

  /* Spacing rhythm */
  --space-section: clamp(5rem, 11vw, 9rem);
  --maxw: 1200px;

  /* Type — Satoshi (brand font). Neue Montreal is the licensed heading upgrade. */
  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: rgba(51,51,255,0.35); color: #fff; }

/* ---------- Animated aurora background ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 120% at 50% -10%, var(--bg-2), var(--bg-0) 55%);
  overflow: hidden;
}
.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.bg__blob--1 { width: 50vw; height: 50vw; left: -10vw; top: -8vw;
  background: radial-gradient(circle, var(--aurora-1), transparent 65%); }
.bg__blob--2 { width: 46vw; height: 46vw; right: -8vw; top: 10vh;
  background: radial-gradient(circle, var(--aurora-2), transparent 65%); opacity: 0.4; }
.bg__blob--3 { width: 42vw; height: 42vw; left: 30vw; top: 70vh;
  background: radial-gradient(circle, var(--aurora-3), transparent 65%); opacity: 0.35; }

@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vw,6vh) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7vw,8vh) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5vw,-9vh) scale(1.15)} }
.bg__blob--1 { animation: drift1 22s ease-in-out infinite; }
.bg__blob--2 { animation: drift2 28s ease-in-out infinite; }
.bg__blob--3 { animation: drift3 25s ease-in-out infinite; }

/* Fine grain + subtle grid overlay so glass refracts texture, not flat color */
.bg__grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg__grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

/* ============================================================
   GLASS MATERIAL — the core liquid-glass surface
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
/* Specular sheen sweeping across the top — the "liquid" tell */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(130deg, rgba(255,255,255,0.22), transparent 38%);
  opacity: 0.7;
  pointer-events: none;
}
/* Soft inner edge light to fake refraction at the rim */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
  pointer-events: none;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: var(--space-section); position: relative; }
.center { text-align: center; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-1);
  padding: 7px 14px;
  border-radius: 999px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
.h-hero {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.0;
}
.h-section { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 900; letter-spacing: -0.03em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--text-1); max-width: 56ch; }
.muted { color: var(--text-2); }
.grad-text {
  background: linear-gradient(100deg, var(--blue-lo), var(--blue) 42%, var(--crimson));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.section__head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
.section__head .lead { margin: 1rem auto 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0.98rem; font-weight: 600;
  padding: 14px 26px;
  border-radius: 14px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
  white-space: nowrap;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #4a4aff, #3333FF);
  box-shadow: 0 10px 28px -8px rgba(51,51,255,0.95), 0 1px 0 rgba(255,255,255,0.28) inset;
}
.btn--primary:hover { transform: translateY(-2px); background: linear-gradient(180deg, #5a5aff, #3d3dff); box-shadow: 0 16px 38px -8px rgba(51,51,255,1), 0 1px 0 rgba(255,255,255,0.28) inset; }
.btn--glass {
  color: var(--text-0);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn--glass:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn--lg { padding: 17px 34px; font-size: 1.05rem; }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% - 32px));
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 22px;
  border-radius: 18px;
  transition: padding 0.4s var(--ease), background 0.4s, box-shadow 0.4s;
}
.nav.glass { border-radius: 18px; }
.nav.is-scrolled { padding-block: 9px; }
.logo { font-weight: 700; font-size: 1.0rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 11px; }
.logo .mark { width: 30px; height: 30px; color: var(--blue); flex-shrink: 0; }
.logo__name { line-height: 1.02; font-weight: 700; }
.logo__name span { display: block; }
.nav__links { display: flex; gap: 30px; }
.nav__links a { color: var(--text-1); font-size: 0.94rem; font-weight: 500; transition: color 0.25s; position: relative; }
.nav__links a:hover { color: var(--text-0); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; min-width: 44px; min-height: 44px; border-radius: 12px;
}
.nav__burger span { width: 22px; height: 2px; background: var(--text-0); border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(7rem, 13vh, 9.5rem); padding-bottom: 1.5rem; text-align: center; }
.hero .eyebrow { margin-bottom: 28px; }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin: 0 auto 38px; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.hero__note { font-size: 0.85rem; color: var(--text-3); }

/* Floating dashboard mock */
.hero__stage {
  position: relative;
  max-width: 960px;
  margin: 70px auto 0;
  perspective: 1600px;
}
.hero__panel {
  padding: 18px;
  border-radius: 28px;
}
.hero__panel-inner {
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(13,16,32,0.9), rgba(9,11,22,0.92));
  border: 1px solid rgba(255,255,255,0.06);
  padding: 22px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  min-height: 360px;
  text-align: left;
}
.mock-side { display: flex; flex-direction: column; gap: 8px; }
.mock-side .mock-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px; font-size: 0.86rem; color: var(--text-2);
  transition: 0.3s;
}
.mock-side .mock-row.active { background: rgba(255,255,255,0.07); color: var(--text-0); }
.mock-side .mock-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.mock-side .mock-row.active i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.mock-main { display: flex; flex-direction: column; gap: 14px; }
.mock-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mock-card {
  padding: 16px; border-radius: 14px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
}
.mock-card .k { font-size: 0.72rem; color: var(--text-2); margin-bottom: 6px; }
.mock-card .v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.mock-card .v.up { color: #5b5bff; }
.mock-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.bubble { max-width: 80%; padding: 11px 15px; border-radius: 14px; font-size: 0.88rem; }
.bubble.in { align-self: flex-start; background: rgba(255,255,255,0.06); color: var(--text-1); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: linear-gradient(120deg, var(--indigo), var(--violet)); color: #fff; border-bottom-right-radius: 4px; }
.hero__float {
  position: absolute; padding: 14px 18px; border-radius: 16px;
  display: flex; align-items: center; gap: 12px; font-size: 0.85rem; font-weight: 600;
  will-change: transform;
}
.hero__float .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; }
.hero__float[data-float="1"] { top: 20%; left: -6%; }
.hero__float[data-float="2"] { bottom: 16%; right: -6%; }
.hero__float[data-float="3"] { bottom: 12%; left: -6%; }
.hero__float small { display: block; color: var(--text-2); font-weight: 500; font-size: 0.74rem; }

/* ============================================================
   VSL VIDEO + ENERGY CORE + BEAM
   ============================================================ */
/* zoom layer — scaled on scroll while the stage stays pinned */
.hero__zoom { position: relative; width: 100%; transform-origin: 50% 50%; will-change: transform; }

/* video edge rim-glow (separate element so it doesn't clash with .glass::after) */
.vsl-edge {
  position: absolute; inset: 0; border-radius: 24px; pointer-events: none; z-index: 4; opacity: 0;
  box-shadow:
    0 0 48px 8px rgba(91,91,255,0.65),
    0 0 98px 16px rgba(252,0,76,0.28),
    inset 0 0 44px 5px rgba(150,164,255,0.6);
}
/* soft outer halo behind the video (not clipped by .vsl overflow) */
.vsl-bloom {
  position: absolute; left: 50%; top: 50%; width: 86%; height: 96%;
  transform: translate(-50%, -50%); border-radius: 34px; pointer-events: none; z-index: -1; opacity: 0;
  box-shadow: 0 0 72px 18px rgba(91,91,255,0.5), 0 0 150px 36px rgba(252,0,76,0.2);
}

/* glow that intensifies as the video absorbs the particles (charging up) */
.video-charge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74%; height: 86%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(150,164,255,0.6), rgba(51,51,255,0.32) 42%, transparent 70%);
  filter: blur(36px); opacity: 0;
}

/* the beam the video discharges downward after it's charged — soft, modern, not a hard line */
.discharge-beam {
  position: absolute; left: 50%; margin-left: -7px; top: 52%; z-index: -1;
  transform: scaleY(0); transform-origin: top center;
  width: 12px; height: 460px; opacity: 0; pointer-events: none; border-radius: 50%;
  background: linear-gradient(to bottom, transparent 16%, rgba(214,226,255,0.78) 40%, var(--blue-lo) 60%, rgba(51,51,255,0.34) 86%, transparent);
  filter: blur(1.4px) drop-shadow(0 0 18px var(--blue-lo)) drop-shadow(0 0 52px rgba(51,51,255,0.85));
}
/* wide, soft halo so the beam reads as a diffuse column of light you follow down */
.discharge-beam::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 120px; height: 100%; border-radius: 50%;
  background: radial-gradient(44% 62% at 50% 50%, rgba(120,134,255,0.5), rgba(51,51,255,0.18) 52%, transparent 78%);
  filter: blur(22px);
}

.energy-core {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 86%; height: 96%; z-index: -2; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(51,51,255,0.55), rgba(91,91,255,0.20) 46%, transparent 72%);
  filter: blur(26px);
  animation: corePulse 4.8s ease-in-out infinite;
}
@keyframes corePulse {
  0%, 100% { opacity: 0.7;  transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.07); }
}

.vsl {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 24px; overflow: hidden; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.4s var(--ease);
}
.vsl:hover { box-shadow: var(--glass-shadow), 0 0 70px -18px rgba(51,51,255,0.85); }
.vsl__poster {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(120% 130% at 28% 16%, rgba(51,51,255,0.40), transparent 56%),
    radial-gradient(120% 130% at 82% 90%, rgba(91,91,255,0.34), transparent 56%),
    linear-gradient(160deg, #11142a, #070912);
}
.vsl__label { position: absolute; top: 22px; left: 24px; font-size: 0.9rem; font-weight: 600; color: var(--text-1); max-width: 62%; }
.vsl__time {
  position: absolute; bottom: 18px; right: 20px; font-size: 0.8rem; color: var(--text-1);
  padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vsl__play {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; color: #0a0a16;
  background: linear-gradient(180deg, #ffffff, #dfe2ff);
  box-shadow: 0 12px 34px -8px rgba(51,51,255,0.9), 0 1px 0 rgba(255,255,255,0.7) inset;
  transition: transform 0.3s var(--ease);
}
.vsl:hover .vsl__play { transform: scale(1.07); }
.vsl__play svg { margin-left: 3px; }
.vsl__ring {
  position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  animation: ring 2.6s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.55); opacity: 0; } }

/* Energy that rides the video perimeter, flows to the bottom, then discharges.
   #orb is a 0-size anchor at the video centre; particles ride an offset-path
   rounded-rect tracing the ZOOMED video edge (±720/±405, r60). --d = offset 0..1. */
.orb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.orb__p {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  filter: blur(20px); opacity: 0; mix-blend-mode: screen;
  will-change: opacity, transform;   /* GSAP owns the transform (xPercent/yPercent + x/y) */
}
.orb__p.p--blue  { background: radial-gradient(circle, rgba(91,91,255,.85), transparent 66%); }
.orb__p.p--lblue { background: radial-gradient(circle, rgba(150,164,255,.9), transparent 66%); }
.orb__p.p--crim  { background: radial-gradient(circle, rgba(252,0,76,.6), transparent 66%); }

/* arc-reactor charge that swells BELOW the video edge as an upside-down mountain (▽), then blasts */
.orb-charge { position: absolute; left: 0; top: 408px; width: 0; height: 0; pointer-events: none; z-index: 5; }
.orb-charge > span {
  position: absolute; left: 0; top: 0; width: 300px; height: 250px; margin-left: -150px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);     /* wide at the video edge, narrowing to a point below */
  background: radial-gradient(ellipse 55% 96% at 50% 0%, rgba(196,210,255,.95), rgba(91,91,255,.62) 36%, rgba(252,0,76,.32) 62%, transparent 84%);
  filter: blur(13px); mix-blend-mode: screen;
  transform: scaleY(0); transform-origin: top center; opacity: 0; will-change: transform, opacity;
}

/* Power beam — emerges from BEHIND the video (hidden behind it) and drops down */
.energy-beam {
  position: absolute; left: 50%; margin-left: -6px; top: 50%; z-index: -1;
  transform: scaleY(0); transform-origin: top center;
  width: 12px; height: 470px; opacity: 0; pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(to bottom, transparent 26%, rgba(91,91,255,0.55) 47%, #eaffff 57%, var(--blue-lo) 70%, rgba(51,51,255,0.4) 86%, transparent);
  filter: drop-shadow(0 0 16px var(--cyan)) drop-shadow(0 0 44px rgba(51,51,255,0.95));
}
/* wide soft bloom behind the hot core */
.energy-beam::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 180px; height: 100%; border-radius: 50%;
  background: radial-gradient(40% 46% at 50% 57%, rgba(91,91,255,0.6), rgba(51,51,255,0.3) 45%, transparent 72%);
  filter: blur(22px);
}
/* bright pulse that shoots down the beam on a loop */
.energy-beam::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff, var(--cyan) 42%, transparent 72%);
  box-shadow: 0 0 26px 8px var(--cyan);
  animation: beamShoot 1.7s cubic-bezier(0.45, 0, 0.7, 1) infinite;
}
@keyframes beamPulse { 0%,100% { opacity: 0.82; } 50% { opacity: 1; } }
@keyframes beamShoot { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ============================================================
   ENERGY NETWORK MAP
   ============================================================ */
.netmap-section { padding-top: 2rem; }
.netmap { position: relative; width: 100%; max-width: 1000px; margin: 1.5rem auto 0; aspect-ratio: 1000 / 760; }
.netmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mesh { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 1.5; }
.wire { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 2; }
.flow {
  fill: none; stroke: url(#flowGrad); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(51,51,255,0.85));
}
/* the line into the orchestrator carries the most power */
.flow.conduit {
  stroke-width: 6;
  filter: drop-shadow(0 0 12px var(--cyan)) drop-shadow(0 0 22px rgba(51,51,255,0.9));
}

.node { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.node__glow {
  position: absolute; left: 50%; top: 50%; width: 170px; height: 170px;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(51,51,255,0.6), transparent 70%);
}
.node__card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 16px 22px; min-width: 124px; text-align: center;
}
.node__card .node__ico { font-size: 1.55rem; margin-bottom: 5px; }
.node__card b { font-size: 0.98rem; letter-spacing: -0.01em; }
.node__card small { color: var(--text-2); font-size: 0.74rem; }
.node--hub .node__card { padding: 20px 28px; border-color: rgba(51,51,255,0.45); }
.node--hub .node__glow {
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, rgba(91,91,255,0.7), rgba(51,51,255,0.32) 44%, transparent 72%);
}
/* pulsing power ring around the orchestrator where the beam lands */
.node--hub::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 150px; height: 150px; transform: translate(-50%, -50%);
  border-radius: 26px; pointer-events: none;
  box-shadow: 0 0 70px 14px rgba(91,91,255,0.45), 0 0 30px 4px rgba(51,51,255,0.5) inset;
  opacity: var(--ring, 0);   /* stays hidden until the Orchestrator is revealed from the bang */
  animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50%     { transform: translate(-50%,-50%) scale(1.1); }
}

/* the charge perimeter — builds up from nothing as energy gathers, then bursts at the bang */
.charge-frame {
  position: absolute; left: 50%; top: 47.4%;
  width: 300px; height: 300px; border-radius: 66px;
  opacity: 0; pointer-events: none; z-index: 2;
  box-shadow: 0 0 54px 4px rgba(91,91,255,0.5), 0 0 22px 1px rgba(91,91,255,0.45) inset;
}

/* ---- Cinematic: energy ball → explosion → flash → prompt ---- */
.energy-ball { position: absolute; left: 50%; top: 47.4%; width: 0; height: 0; z-index: 3; opacity: 0; pointer-events: none; }
/* pure energy light — a diffuse, heavily-blurred glow (modern, not a defined orb) */
.energy-ball > span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.6) 0%,
    rgba(196,210,255,0.46) 16%,
    rgba(91,91,255,0.32) 34%,
    rgba(51,51,255,0.16) 52%,
    transparent 70%);
  filter: blur(16px);
}
.energy-ball.rumble > span { animation: ballRumble 0.16s steps(2, end) infinite; }
@keyframes ballRumble {
  0%   { transform: translate(-50%,-50%) translate(2px,-1px); }
  25%  { transform: translate(-50%,-50%) translate(-2px,1px); }
  50%  { transform: translate(-50%,-50%) translate(1px,2px); }
  75%  { transform: translate(-50%,-50%) translate(-1px,-2px); }
  100% { transform: translate(-50%,-50%) translate(2px,1px); }
}
.boom {
  position: absolute; left: 50%; top: 47.4%; width: 40px; height: 40px; border-radius: 50%;
  z-index: 2; opacity: 0; pointer-events: none;
  border: 3px solid rgba(91,91,255,0.9);
  box-shadow: 0 0 50px 8px rgba(51,51,255,0.6);
}

/* the "small nothing" the beam lands on — a tiny bright point */
.seed {
  position: absolute; left: 50%; top: 47.4%; width: 12px; height: 12px; border-radius: 50%;
  z-index: 3; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #ffffff, #c4d2ff 50%, rgba(91,91,255,0.7));
  box-shadow: 0 0 18px 5px rgba(196,210,255,0.95), 0 0 44px 12px rgba(91,91,255,0.7);
}
/* the blur of light it blooms into — diffuse, soft, modern (no hard edges) */
.bloom {
  position: absolute; left: 50%; top: 47.4%; width: 360px; height: 360px; border-radius: 50%;
  z-index: 2; opacity: 0; pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%, rgba(196,210,255,0.6) 22%, rgba(91,91,255,0.4) 42%, rgba(51,51,255,0.18) 60%, transparent 74%);
  filter: blur(14px);
}
.flash {
  position: absolute; inset: -12%; z-index: 4; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 49%, rgba(255,255,255,0.95), rgba(91,91,255,0.4) 22%, transparent 54%);
}

/* ---- Cinema pinned stage: full viewport so the bang is centred on screen ---- */
.cinema { position: relative; }
.cinema__pin { height: 100vh; min-height: 680px; position: relative; overflow: hidden; }
.cinema__stage { position: absolute; inset: 0; }
/* the video lives in the upper third — it charges, fires the beam, then fades out */
/* the video is TOP-anchored (fixed small offset under the hero) and large, so the gap stays small on
   any screen height; it grows downward when it zooms (origin top), then recedes up as the beam fires */
.cinema__stage .hero__zoom { position: absolute; left: 50%; top: 5rem; width: min(1040px, 80vw); transform-origin: 50% 0%; will-change: transform, opacity; }
/* particles live INSIDE the video (track it through the zoom); the charge swell is a soft, modern glow */
.cinema__stage .orb-charge { top: 300px; }
.cinema__stage .orb-charge > span {
  width: 340px; height: 240px; margin-left: -170px; clip-path: none;
  background: radial-gradient(ellipse 46% 62% at 50% 14%, rgba(196,210,255,0.82), rgba(91,91,255,0.4) 46%, rgba(252,0,76,0.16) 72%, transparent 88%);
  filter: blur(32px);
}
/* the beam is a STAGE element (fixed to the dot) — the video lifts away from it as it fires */
.cinema__stage > .discharge-beam { top: 32%; height: 23%; width: 12px; margin-left: -6px; z-index: 1; }
/* the network sits just below centre — the orchestrator lands where the beam blooms */
.cinema .netmap { position: absolute; left: 50%; top: 55%; width: min(92vw, 680px); max-width: none; margin: 0; }

/* heading revealed out of the explosion — centred overlay, hidden until the bang */
.cinema__reveal {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 10vh; text-align: center;
}
.cinema__reveal .eyebrow { margin-bottom: 16px; }
.cinema__reveal .h-section { margin-bottom: 14px; max-width: 18ch; }
.cinema__reveal .lead { max-width: 52ch; margin-inline: auto; }
.cinema__reveal > * { opacity: 0; filter: blur(12px); transform: scale(0.85); transform-origin: center; will-change: transform, opacity, filter; }

.cinema__prompt {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  font-size: 0.95rem; font-weight: 600; color: var(--text-0);
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  opacity: 0; z-index: 5;
}
.cinema__prompt .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 10px var(--crimson); animation: blink 1.4s infinite; }

/* ============================================================
   CLICKABLE AGENTS + DEMO MODAL
   ============================================================ */
/* agent nodes are buttons now */
.node--agent { appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0; font: inherit; color: inherit; }
.node--agent .node__card { position: relative; transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.3s; cursor: pointer; }
.node--agent:hover .node__card,
.node--agent:focus-visible .node__card {
  transform: translateY(-5px);
  border-color: rgba(51,51,255,0.55);
  box-shadow: var(--glass-shadow), 0 0 44px -10px rgba(51,51,255,0.85);
}
.node--agent:focus-visible { outline: none; }
.node__cta {
  position: absolute; bottom: -20px; left: 50%;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--cyan); white-space: nowrap;
  opacity: 0; transform: translateX(-50%) translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.node--agent:hover .node__cta,
.node--agent:focus-visible .node__cta { opacity: 1; transform: translateX(-50%) translateY(0); }

/* modal */
.agent-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px;
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease);
}
.agent-modal.open { opacity: 1; pointer-events: auto; }
.agent-modal__backdrop { position: absolute; inset: 0; background: rgba(3,5,14,0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.agent-modal__stage {
  position: relative; width: min(94vw, 560px);
  transform: scale(0.9) translateY(12px); transition: transform 0.4s var(--ease);
}
.agent-modal.open .agent-modal__stage { transform: none; }
.agent-modal__close {
  position: absolute; top: -16px; right: -8px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.10); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-0); font-size: 0.95rem; transition: background 0.25s;
}
.agent-modal__close:hover { background: rgba(255,255,255,0.2); }

/* focus panel inside the modal (overrides the absolute/hidden base below) */
.agent-modal .focus { position: static; opacity: 1; width: 100%; display: none; }
.agent-modal .focus.active { display: block; }

/* energy burst shockwave at the hub */
.burst {
  position: absolute; left: 50%; top: 19.7%; width: 44px; height: 44px;
  transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(190,245,255,0.95), rgba(51,51,255,0.55) 38%, transparent 70%);
  box-shadow: 0 0 80px 30px rgba(51,51,255,0.5);
}

/* focus panels */
.focus-layer { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.focus {
  position: absolute; width: min(92vw, 560px); opacity: 0;
  border-radius: 22px; will-change: transform, opacity;
}
.focus__head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.focus__ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; box-shadow: 0 8px 22px -8px rgba(51,51,255,0.8); }
.focus__title b { display: block; font-size: 1.08rem; letter-spacing: -0.01em; }
.focus__title small { color: var(--text-2); font-size: 0.85rem; }
.focus__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: var(--crimson); text-transform: uppercase; letter-spacing: 0.06em; }
.focus__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 8px var(--crimson); animation: blink 1.4s infinite; }
.focus__demo { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; min-height: 180px; justify-content: center; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.step { opacity: 0; will-change: transform, opacity; }
.chat { padding: 10px 14px; border-radius: 15px; font-size: 0.9rem; line-height: 1.42; max-width: 86%; width: fit-content; }
.chat.in { background: rgba(255,255,255,0.07); color: var(--text-1); border-bottom-left-radius: 4px; margin-right: auto; }
.chat.out { background: linear-gradient(120deg, var(--indigo), var(--violet)); color: #fff; border-bottom-right-radius: 4px; margin-left: auto; }
.action { display: inline-flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--text-2); }
.action__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1s infinite; }
.result { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 13px; background: rgba(51,51,255,0.08); border: 1px solid rgba(51,51,255,0.22); }
.result__ico { font-size: 1.3rem; }
.result b { display: block; font-size: 0.95rem; }
.result small { color: var(--text-2); font-size: 0.8rem; }
.trigger { display: flex; align-items: center; gap: 9px; font-size: 0.92rem; color: var(--text-1); }
.trigger__ico { color: #ffce5a; }

/* Ops sync chips */
.sync { display: flex; gap: 10px; }
.sys { flex: 1; text-align: center; padding: 16px 8px; border-radius: 12px; font-size: 0.86rem; font-weight: 600; color: var(--text-1); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); }
.sys__ok { color: #5b5bff; margin-left: 5px; font-weight: 700; opacity: 0; display: inline-block; }

/* Insights bars */
.bars { display: flex; gap: 14px; align-items: flex-end; height: 150px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar span { width: 100%; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--cyan), var(--violet)); transform: scaleY(0); transform-origin: bottom; }
.bar i { font-size: 0.72rem; color: var(--text-2); font-style: normal; }

/* caption + progress (stay fixed during pin) */
.cinema__cap { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); text-align: center; width: min(90vw, 660px); }
.cinema__cap-eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 9px; }
.cinema__cap-text { display: block; font-size: clamp(1.05rem, 2vw, 1.42rem); font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; }
.cinema__progress { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: 170px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.10); overflow: hidden; }
.cinema__progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); }

/* ---------- Logo trust bar ---------- */
.trust { padding-block: 2.5rem; }
.trust p { text-align: center; color: var(--text-3); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; }
.trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 48px; opacity: 0.7; }
.trust__row span { font-size: 1.15rem; font-weight: 700; color: var(--text-2); letter-spacing: -0.02em; }

/* ============================================================
   FEATURE / STEP / AGENT GRIDS
   ============================================================ */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card { padding: 30px; }
.card__icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.4rem; margin-bottom: 20px;
  background: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
}
.card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 0.96rem; }

/* Steps with number */
.step { padding: 32px; }
.step__num {
  font-size: 0.85rem; font-weight: 700; color: var(--cyan);
  letter-spacing: 0.1em; margin-bottom: 18px; display: block;
}
.step h3 { font-size: 1.35rem; margin-bottom: 12px; }
.step p { color: var(--text-2); }

/* Agent cards with badge */
.agent { padding: 26px; transition: transform 0.5s var(--ease); }
.agent:hover { transform: translateY(-4px); }
.agent__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.agent__badge { font-size: 0.7rem; font-weight: 600; color: #5b5bff; padding: 4px 10px; border-radius: 999px; background: rgba(51,51,255,0.1); border: 1px solid rgba(51,51,255,0.2); }
.agent__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.1); }
.agent h3 { font-size: 1.18rem; margin-bottom: 8px; }
.agent p { color: var(--text-2); font-size: 0.92rem; }

/* ============================================================
   STATS + TESTIMONIALS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat { padding: 30px 26px; text-align: center; }
.stat .num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; }
.stat .label { color: var(--text-2); font-size: 0.9rem; margin-top: 6px; }

.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 3rem; }
.quote { padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.quote p { font-size: 1.02rem; color: var(--text-1); line-height: 1.55; }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, var(--aurora-1), var(--aurora-2)); flex-shrink: 0; }
.quote__who b { display: block; font-size: 0.92rem; }
.quote__who small { color: var(--text-2); font-size: 0.8rem; }
.stars { color: #ffce5a; letter-spacing: 2px; font-size: 0.9rem; }

/* ============================================================
   PRICING / OFFER
   ============================================================ */
.pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }
.plan { padding: 34px 30px; display: flex; flex-direction: column; }
.plan--featured {
  border-color: rgba(51,51,255,0.5);
  box-shadow: var(--glass-shadow), 0 0 60px -20px rgba(51,51,255,0.7);
  transform: translateY(-8px);
}
.plan__tag { position: absolute; top: 18px; right: 18px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg, var(--crimson), #ff5b86); padding: 5px 11px; border-radius: 999px; }
.plan__name { font-size: 1.05rem; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.plan__price { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; }
.plan__price span { font-size: 0.95rem; font-weight: 500; color: var(--text-2); }
.plan__desc { color: var(--text-2); font-size: 0.9rem; margin: 12px 0 24px; }
.plan ul { display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.93rem; color: var(--text-1); }
.plan li .tick { color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.plan .btn { margin-top: auto; width: 100%; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.faq__item { padding: 4px 24px; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 20px 0; font-size: 1.05rem; font-weight: 600; color: var(--text-0); }
.faq__q .pm { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform 0.4s var(--ease); }
.faq__q .pm::before, .faq__q .pm::after { content: ""; position: absolute; background: var(--cyan); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq__q .pm::before { width: 14px; height: 2px; }
.faq__q .pm::after { width: 2px; height: 14px; transition: transform 0.4s var(--ease); }
.faq__item.open .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.faq__a p { padding: 0 0 22px; color: var(--text-2); font-size: 0.97rem; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-wrap { position: relative; padding: clamp(3rem, 6vw, 5rem); text-align: center; border-radius: 34px; overflow: hidden; }
.cta-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 120% at 50% 0%, rgba(51,51,255,0.4), transparent 60%);
}
.cta-wrap h2 { margin-bottom: 18px; }
.cta-wrap .lead { margin: 0 auto 32px; }
.cta-wrap .hero__actions { margin-bottom: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding-block: 60px 40px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: var(--space-section); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer__brand p { color: var(--text-2); font-size: 0.92rem; max-width: 30ch; margin-top: 14px; }
.footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 16px; }
.footer ul { display: flex; flex-direction: column; gap: 11px; }
.footer ul a { color: var(--text-2); font-size: 0.93rem; transition: color 0.25s; }
.footer ul a:hover { color: var(--text-0); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); color: var(--text-3); font-size: 0.85rem; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   STICKY CTA — Apple-style follow-along bar
   ============================================================ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 0 14px; pointer-events: none;
  transform: translateY(130%); transition: transform 0.5s var(--ease);
}
.sticky-cta.show { transform: translateY(0); pointer-events: auto; }
.sticky-cta__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 14px 13px 22px; border-radius: 18px;
  background: rgba(14,14,18,0.72);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 -6px 34px -12px rgba(0,0,0,0.85), var(--glass-shadow);
}
.sticky-cta__copy b { display: block; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
.sticky-cta__copy span { font-size: 0.82rem; color: var(--text-2); }
.sticky-cta .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .sticky-cta { padding-bottom: 10px; }
  .sticky-cta__inner { padding: 9px; }
  .sticky-cta__copy { display: none; }
  .sticky-cta .btn { width: 100%; justify-content: center; padding: 14px 16px; font-size: 0.95rem; }
}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .grid--3, .quotes, .pricing { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .plan--featured { transform: none; }
}
@media (max-width: 760px) {
  /* .glass sets overflow:hidden for its specular sheen, which would clip the
     dropdown panel below. The panel itself is a sibling frosted surface with
     its own border/shadow, so it doesn't need the parent's clipping. */
  .nav { padding-right: 8px; position: relative; overflow: visible; }
  .nav__burger { display: flex; }

  /* Slide-down mobile menu: nav__links + CTA buttons move into one panel,
     toggled by #burger via .nav--open on #nav (see js/tab.js). */
  .nav__links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; gap: 2px;
    background: var(--surface-1, rgba(14,14,20,0.92));
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-1, rgba(255,255,255,0.08));
    border-radius: 18px; padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  }
  .nav__links a { display: block; padding: 12px 14px; border-radius: 10px; min-height: 44px; line-height: 20px; }
  .nav__links a:hover { background: rgba(255,255,255,0.06); }

  /* .btn--glass / .btn--primary are relocated into .nav__links on mobile by
     js/tab.js so they stack in the same flex column, no fixed offsets needed. */
  .nav__links .btn--glass,
  .nav__links .btn--primary { display: none; justify-content: center; margin-top: 4px; }
  .nav--open .nav__links { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; }
  .nav--open .nav__links .btn--glass,
  .nav--open .nav__links .btn--primary { display: flex; }
  body.no-scroll { overflow: hidden; }
  .hero__panel-inner { grid-template-columns: 1fr; }
  .mock-side { flex-direction: row; overflow-x: auto; }
  .hero__float { display: none; }
  .grid--3, .grid--2, .quotes, .pricing, .stats { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mock-cards { grid-template-columns: 1fr 1fr; }

  /* Network map: shrink nodes so the fleet still fits the narrow viewport */
  .node__card { min-width: 0; padding: 9px 11px; gap: 0; border-radius: 16px; }
  .node__card .node__ico { font-size: 1.15rem; margin-bottom: 2px; }
  .node__card b { font-size: 0.78rem; }
  .node__card small { display: none; }
  .node--hub .node__card { padding: 12px 15px; }
  .node--hub .node__card small { display: block; font-size: 0.66rem; }
  .node__glow { width: 110px; height: 110px; }
  .node--hub .node__glow { width: 150px; height: 150px; }
}

/* ============================================================
   ACCESSIBILITY — reduced motion + transparency fallbacks
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  /* Exempt: box-shadow-only "live" status cue, no positional motion to reduce. */
  .urgency i { animation-duration: 1.8s !important; animation-iteration-count: infinite !important; }
}
/* If the OS/browser can't do backdrop blur, fall back to solid translucent fills */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav, .btn--glass { background: rgba(18,20,34,0.92); }
}

/* ============================================================
   AGENT DIRECTORY — Orchestrator → departments → sub-agents
   ============================================================ */
/* Main agent — the Orchestrator */
.orchestrator-card {
  display: flex; align-items: center; gap: 24px;
  padding: 24px 30px; border-radius: 24px; margin: 0 auto 2.4rem; max-width: 940px;
  border-color: rgba(51,51,255,0.32);
}
.orchestrator-card__mark {
  flex-shrink: 0; width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem;
  background: radial-gradient(circle at 30% 25%, rgba(91,91,255,0.55), rgba(51,51,255,0.22));
  box-shadow: 0 0 44px -6px rgba(51,51,255,0.85), inset 0 0 0 1px rgba(150,164,255,0.4);
}
.orchestrator-card__body { flex: 1; min-width: 0; text-align: left; }
.orchestrator-card__tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-lo); margin-bottom: 7px;
}
.orchestrator-card__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-lo); box-shadow: 0 0 10px var(--blue-lo); }
.orchestrator-card__body h3 { font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 7px; }
.orchestrator-card__body p { color: var(--text-2); font-size: 0.92rem; line-height: 1.55; max-width: 58ch; }
.orchestrator-card__count { flex-shrink: 0; text-align: center; padding-left: 24px; border-left: 1px solid var(--glass-border); }
.orchestrator-card__count b {
  display: block; font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(120deg, #fff, var(--blue-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.orchestrator-card__count small { display: block; margin-top: 6px; color: var(--text-3); font-size: 0.7rem; max-width: 11ch; line-height: 1.3; }

/* Department tabs */
.agent-dir { max-width: 1020px; margin: 0 auto; }
.agent-dir__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 2rem; }
.agent-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-1); cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.agent-tab:hover { color: var(--text-0); border-color: rgba(91,91,255,0.5); transform: translateY(-1px); }
.agent-tab__ico { font-size: 1.05rem; }
.agent-tab__count { font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--text-2); }
.agent-tab.is-active {
  color: #fff; background: linear-gradient(120deg, rgba(51,51,255,0.92), rgba(91,91,255,0.85));
  border-color: transparent; box-shadow: 0 12px 30px -12px rgba(51,51,255,0.95);
}
.agent-tab.is-active .agent-tab__count { background: rgba(255,255,255,0.24); color: #fff; }

/* Sub-agent cards */
.agent-dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(234px, 1fr)); gap: 14px; }
.agent-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left;
  padding: 20px; border-radius: 18px; cursor: pointer; font-family: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.065), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.agent-card:hover { transform: translateY(-3px); border-color: rgba(91,91,255,0.55); box-shadow: 0 18px 42px -16px rgba(51,51,255,0.7); }
.agent-card__ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem;
  background: rgba(91,91,255,0.16); border: 1px solid rgba(91,91,255,0.26);
}
.agent-card__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-0); }
.agent-card__benefit { font-size: 0.84rem; color: var(--text-2); line-height: 1.45; flex: 1; }
.agent-card__cta { font-size: 0.78rem; font-weight: 600; color: var(--blue-lo); margin-top: 2px; opacity: 0; transform: translateY(4px); transition: 0.3s var(--ease); }
.agent-card:hover .agent-card__cta, .agent-card:focus-visible .agent-card__cta { opacity: 1; transform: translateY(0); }

/* Proof note */
.agent-dir__proof { max-width: 720px; margin: 2.8rem auto 0; text-align: center; color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }
.agent-dir__proof b { color: var(--text-0); font-weight: 700; }

/* Benefit popup */
.agent-info { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 22px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }
.agent-info.open { opacity: 1; pointer-events: auto; }
.agent-info__backdrop { position: absolute; inset: 0; background: rgba(5,6,14,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.agent-info__card { position: relative; width: min(640px, 100%); max-height: 88vh; overflow: hidden; padding: 30px 32px; border-radius: 26px; text-align: left; transform: translateY(14px) scale(0.97); transition: transform 0.35s var(--ease); display: flex; flex-direction: column; }
.agent-info.open .agent-info__card { transform: translateY(0) scale(1); }
.agent-info__close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); color: var(--text-1); font-size: 0.9rem; cursor: pointer; transition: 0.25s; z-index: 2; }
.agent-info__close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* header */
.agent-info__head { display: flex; align-items: center; gap: 18px; padding-right: 38px; margin-bottom: 22px; flex-shrink: 0; }
.agent-info__ico { flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.8rem; background: radial-gradient(circle at 30% 25%, rgba(91,91,255,0.5), rgba(51,51,255,0.24)); box-shadow: inset 0 0 0 1px rgba(150,164,255,0.4), 0 0 34px -8px rgba(51,51,255,0.8); }
.agent-info__dept { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-lo); margin-bottom: 5px; }
.agent-info__title h3 { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.05; }
.agent-info__tagline { font-size: 0.95rem; color: var(--text-2); margin-top: 5px; }

/* scrollable body */
.agent-info__body { overflow-y: auto; padding-right: 6px; margin-right: -6px; }
.agent-info__body::-webkit-scrollbar { width: 6px; }
.agent-info__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; }

/* problem / build / result blocks */
.ai-block { margin-bottom: 20px; }
.ai-sec { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.ai-block.is-problem .ai-sec { color: var(--text-3); }
.ai-block.is-build .ai-sec { color: var(--blue-lo); }
.ai-block.is-result .ai-sec { color: #6ee7a8; }
.ai-block p { font-size: 0.98rem; color: var(--text-1); line-height: 1.6; }
.ai-block.is-result p { color: var(--text-0); }

/* plugs into */
.ai-plugs { margin: 24px 0 22px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); }
.ai-plugs .ai-sec { color: var(--text-3); margin-bottom: 14px; }
.ai-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-flow__pill { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--text-1); background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); }
.ai-flow__pill--ai { color: #fff; background: linear-gradient(120deg, var(--blue), var(--blue-lo)); border-color: transparent; box-shadow: 0 0 26px -6px rgba(91,91,255,0.95); }
.ai-flow__arr { color: var(--blue-lo); font-size: 0.9rem; letter-spacing: 1px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: var(--text-2); background: rgba(255,255,255,0.035); border: 1px solid var(--glass-border); }

/* before / after metrics */
.ai-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ai-metric { padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); }
.ai-metric__label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.ai-metric__val { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: #6ee7a8; }
.ai-metric__val s { color: var(--text-3); font-weight: 500; text-decoration: line-through; }
.ai-metric__val em { color: var(--text-3); font-style: normal; font-weight: 500; margin: 0 2px; }
.ai-metric__val b { color: #6ee7a8; }

/* fallback (agents not yet given full depth) */
.ai-benefit { font-size: 1rem; color: var(--text-1); line-height: 1.55; margin-bottom: 18px; }
.ai-points { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ai-points li { position: relative; padding-left: 28px; font-size: 0.9rem; color: var(--text-2); line-height: 1.45; }
.ai-points li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; color: #fff; background: linear-gradient(140deg, var(--blue-lo), var(--blue)); }

@media (max-width: 560px) {
  .ai-metrics { grid-template-columns: 1fr; }
  .agent-info__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 640px) {
  .orchestrator-card { flex-direction: column; text-align: center; gap: 16px; padding: 24px; }
  .orchestrator-card__body { text-align: center; }
  .orchestrator-card__body p { margin-inline: auto; }
  .orchestrator-card__count { border-left: none; border-top: 1px solid var(--glass-border); padding: 16px 0 0; }
  .agent-dir__grid { grid-template-columns: 1fr; }
  /* 3-col metrics squeeze into < ~200px columns between 561-640px; drop to 2-col here,
     the 560px query below already goes to 1-col for anything narrower. */
  .ai-metrics { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   AGENT NETWORK MAP — departments + sub-agent drill-down
   ============================================================ */
/* department nodes — compact chips wired to the Orchestrator */
.node--dept .node__card { padding: 11px 15px; min-width: 0; gap: 0; cursor: pointer; }
.node--dept .node__ico { font-size: 1.2rem; margin-bottom: 3px; }
.node--dept .node__card b { font-size: 0.82rem; white-space: nowrap; }
.node--dept .node__card small { font-size: 0.64rem; color: var(--text-3); }
.node--dept .node__glow { width: 120px; height: 120px; }

/* flows: department spokes vs lighter sub-agent spokes */
.flow--dept { stroke-width: 3; }
.flow--sub { stroke-width: 2; opacity: 0.8; filter: drop-shadow(0 0 5px rgba(91,91,255,0.7)); }

/* when drilled into a department, fade the department ring + its spokes */
.netmap.is-drilled .node--dept { opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
.netmap.is-drilled .flow--dept { opacity: 0; transition: opacity 0.35s var(--ease); }

/* sub-agent nodes — small chips that pop in around the hub */
.node--sub { appearance: none; background: none; border: none; padding: 0; font: inherit; color: inherit;
  position: absolute; transform: translate(-50%, -50%); z-index: 3; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  animation: subPop 0.4s var(--ease) both; }
@keyframes subPop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.node__card--sub {
  padding: 8px 12px; min-width: 0; flex-direction: row; align-items: center; gap: 7px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.node__card--sub .node__ico { font-size: 0.95rem; margin: 0; }
.node__card--sub b { font-size: 0.78rem; white-space: nowrap; letter-spacing: -0.01em; }
.node--sub:hover .node__card--sub, .node--sub:focus-visible .node__card--sub {
  transform: translateY(-2px); border-color: rgba(91,91,255,0.6);
  box-shadow: 0 14px 32px -14px rgba(51,51,255,0.85);
}
.node--sub:focus-visible { outline: none; }

/* "back to all departments" control */
.netmap__back {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%) translateY(8px);
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px;
  font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text-1); cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.25s, border-color 0.25s;
  z-index: 6;
}
.netmap__back.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.netmap__back:hover { color: #fff; border-color: rgba(91,91,255,0.55); }
.netmap__back span { font-size: 1rem; line-height: 1; }

/* ============================================================
   AI OPERATIONAL AUDIT — Tally form embed (glass card)
   ============================================================ */
.audit { max-width: 720px; margin: 0 auto; padding: 14px; border-radius: 24px; }
.audit iframe { width: 100%; border: 0; display: block; min-height: 200px; color-scheme: dark; border-radius: 14px; overflow: hidden; }
@media (max-width: 560px) { .audit { padding: 10px; } }

/* ============================================================
   BLOG (blog.html + blog-article.html). Reuses .glass, .reveal,
   .container, .eyebrow, brand tokens. Lightweight, no cinematic.
   ============================================================ */
.blog-hero { padding-top: clamp(130px, 19vh, 210px); padding-bottom: clamp(1.5rem, 4vw, 3rem); text-align: center; }
.blog-hero .eyebrow { margin-inline: auto; }
.blog-hero .h-hero { margin: 22px auto 0; max-width: 18ch; }
.blog-hero .lead { margin: 20px auto 0; }

#posts { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 26px; margin-top: 4px; }

.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--glass-radius); text-decoration: none; color: inherit; transition: transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease); }
.post-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.26); }

.post-thumb { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.post-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 130% at 18% 0%, rgba(255,255,255,0.22), transparent 52%); mix-blend-mode: screen; }
.post-thumb--1 { background: linear-gradient(135deg, #3333FF, #5b5bff 55%, #FC004C); }
.post-thumb--2 { background: linear-gradient(140deg, #0e0e12, #3333FF); }
.post-thumb--3 { background: linear-gradient(135deg, #FC004C, #3333FF); }
.post-thumb--4 { background: linear-gradient(150deg, #5b5bff, #15151c); }
.post-thumb--5 { background: linear-gradient(135deg, #3333FF 10%, #FC004C 130%); }
.post-thumb--6 { background: linear-gradient(160deg, #1D1D1D, #5b5bff); }

.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card__cat { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-lo); padding: 5px 11px; border-radius: 999px; background: rgba(91,91,255,0.12); border: 1px solid rgba(91,91,255,0.28); }
.post-card__title { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.28; color: var(--text-0); }
.post-card__excerpt { color: var(--text-2); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 0.84rem; margin-top: 2px; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); display: inline-block; }

/* Featured */
.post-card--featured { margin-bottom: 30px; }
@media (min-width: 880px) {
  .post-card--featured { flex-direction: row; align-items: stretch; }
  .post-card--featured .post-thumb { aspect-ratio: auto; width: 52%; min-height: 340px; }
  .post-card--featured .post-card__body { width: 48%; justify-content: center; padding: 44px; gap: 16px; }
  .post-card--featured .post-card__title { font-size: 1.95rem; line-height: 1.18; }
  .post-card--featured .post-card__excerpt { font-size: 1.05rem; }
}

/* ---- Single article ---- */
.post-article { max-width: 760px; padding-top: clamp(120px, 16vh, 180px); padding-bottom: 30px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 0.92rem; margin-bottom: 28px; transition: color .25s; }
.back-link:hover { color: var(--text-0); }
.post-article__head { text-align: center; margin-bottom: 34px; }
.post-article__head .post-card__cat { display: inline-block; margin-bottom: 18px; }
.post-article__title { font-size: clamp(2rem, 4.8vw, 3.2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; color: var(--text-0); }
.post-article__meta { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--text-3); font-size: 0.9rem; margin-top: 20px; }
.post-article__hero { aspect-ratio: 16 / 7; width: 100%; border-radius: var(--glass-radius); margin-bottom: 44px; box-shadow: var(--glass-shadow); }

.post-body { color: var(--text-1); font-size: 1.08rem; line-height: 1.75; }
.post-body > * + * { margin-top: 1.3em; }
.post-body h2 { color: var(--text-0); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 1.9em; }
.post-body h3 { color: var(--text-0); font-size: 1.25rem; font-weight: 700; margin-top: 1.6em; }
.post-body a { color: var(--blue-lo); text-decoration: underline; text-underline-offset: 3px; }
.post-body strong { color: var(--text-0); }
.post-body em { color: var(--text-0); font-style: italic; }
.post-body ul, .post-body ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 0.55em; }
.post-body blockquote { border-left: 3px solid var(--blue); padding: 4px 0 4px 22px; color: var(--text-0); font-style: italic; font-size: 1.15rem; line-height: 1.5; }

@media (max-width: 560px) {
  .post-card--featured .post-card__body { padding: 22px 20px 26px; }
  .post-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ARTICLE enhancements: reading progress, sticky TOC scroll-spy,
   author byline, key-takeaways, conversion bar (CRO/lead-gen)
   ============================================================ */

/* Reading progress bar */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1200; background: linear-gradient(90deg, var(--blue-lo), var(--blue) 55%, var(--crimson)); box-shadow: 0 0 12px rgba(91,91,255,0.6); transition: width .12s linear; }

/* Two-column article layout: TOC + content */
.article-wrap { max-width: 1080px; margin-inline: auto; padding: clamp(120px, 16vh, 180px) 24px 30px; display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 60px; justify-content: center; }
.article-wrap .post-article { max-width: none; padding: 0; }

/* TOC: sticky on desktop */
.article-toc { position: sticky; top: 104px; align-self: start; }
.article-toc__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); font-weight: 700; margin-bottom: 14px; }
.article-toc nav { display: flex; flex-direction: column; border-left: 1px solid var(--glass-border); }
.toc-link { display: block; padding: 9px 0 9px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); font-size: 0.9rem; line-height: 1.4; transition: color .25s, border-color .25s; }
.toc-link:hover { color: var(--text-0); }
.toc-link.is-active { color: var(--text-0); border-left-color: var(--blue); font-weight: 600; }

/* let TOC clicks land below the fixed nav */
.post-body h2 { scroll-margin-top: 100px; }

/* Author byline (E-E-A-T trust signal) */
.article-byline { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; text-align: left; }
.article-byline__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(140deg, var(--blue-lo), var(--blue) 55%, var(--crimson)); box-shadow: var(--glass-shadow); }
.article-byline__avatar svg { width: 22px; height: 22px; }
.article-byline__meta { display: flex; flex-direction: column; line-height: 1.3; }
.article-byline__name { color: var(--text-0); font-weight: 700; font-size: 0.96rem; }
.article-byline__sub { color: var(--text-3); font-size: 0.85rem; }

/* Key takeaways / TL;DR */
.key-takeaways { padding: 24px 28px; border-radius: var(--glass-radius); margin-bottom: 40px; }
.key-takeaways__label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue-lo); font-weight: 700; margin-bottom: 14px; }
.key-takeaways ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.key-takeaways li { position: relative; padding-left: 26px; color: var(--text-1); line-height: 1.55; }
.key-takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #6ee7a8; font-weight: 700; }

/* Tablet / mobile: TOC becomes a glass card above the article */
@media (max-width: 980px) {
  .article-wrap { grid-template-columns: minmax(0, 760px); gap: 0; }
  .article-toc { position: static; margin-bottom: 30px; padding: 18px 20px; border-radius: 18px; background: var(--glass-fill); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow); }
  .article-toc nav { border-left: none; }
  .toc-link { padding: 7px 0; border-left: none; }
  .toc-link.is-active { border-left: none; color: var(--blue-lo); }
}
@media (max-width: 560px) {
  .article-wrap { padding-left: 18px; padding-right: 18px; }
  .article-byline { text-align: left; }
}

/* Social share widget (sits under the TOC in the sticky sidebar) */
.article-share { margin-top: 30px; }
.share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text-1); background: var(--glass-fill); border: 1px solid var(--glass-border); cursor: pointer; padding: 0; transition: color .25s, border-color .25s, transform .25s, background .25s; }
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
.share-btn[data-share="linkedin"]:hover { background: #0a66c2; border-color: #0a66c2; }
.share-btn[data-share="x"]:hover { background: #000; border-color: #2b2b2b; }
.share-btn[data-share="facebook"]:hover { background: #1877f2; border-color: #1877f2; }
.share-btn[data-share="copy"]:hover { background: var(--blue); border-color: var(--blue); }
.share-btn.copied { background: #16a34a; border-color: #16a34a; color: #fff; transform: none; }

/* ============================================================
   BLOG STUDIO (admin.html), local post editor
   ============================================================ */
.studio-body { min-height: 100vh; }
.btn--sm { padding: 8px 14px; font-size: 0.85rem; }

.studio-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; margin: 12px; border-radius: 18px; flex-wrap: wrap; }
.studio-bar__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-0); }
.studio-bar__brand em { font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(--text-3); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--glass-border); }
.studio-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.studio { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 0 12px 40px; align-items: start; }
.studio__panel { padding: 20px; border-radius: 20px; }
.studio__panel > h3 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--text-0); }
.studio__col--list .studio__panel, .studio__col--form .studio__panel { position: sticky; top: 86px; }
.studio__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.studio__panel-head h3 { font-size: 1rem; font-weight: 700; color: var(--text-0); }
.studio__count { color: var(--text-3); font-weight: 600; }
.studio__sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 700; margin: 16px 0 10px; }
.studio__empty { color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }

/* form fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.field > span em { font-style: normal; color: var(--text-3); font-weight: 500; }
.field input, .field textarea {
  width: 100%; background: rgba(10,10,16,0.5); border: 1px solid var(--glass-border); border-radius: 12px;
  color: var(--text-0); font-family: var(--font); font-size: 0.95rem; padding: 11px 13px; transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-lo); background: rgba(10,10,16,0.75); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field--check { flex-direction: row; align-items: center; gap: 10px; }
.field--check input { width: auto; }
.field--check span { font-size: 0.9rem; color: var(--text-1); font-weight: 500; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 46px; height: 32px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .2s, border-color .2s; }
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px var(--blue); }

.editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* post list */
.post-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.post-list__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; background: rgba(255,255,255,0.03); transition: background .2s, border-color .2s; }
.post-list__item:hover { background: rgba(255,255,255,0.06); }
.post-list__item.is-editing { border-color: var(--blue); background: rgba(51,51,255,0.12); }
.post-list__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.post-list__title { font-size: 0.88rem; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-list__title .pill { font-style: normal; font-size: 0.66rem; color: var(--blue-lo); border: 1px solid rgba(91,91,255,0.4); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.post-list__meta { font-size: 0.76rem; color: var(--text-3); }
.post-list__btns { display: flex; gap: 4px; flex: 0 0 auto; }
.ghost-btn { background: none; border: none; color: var(--text-2); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: color .2s, background .2s; }
.ghost-btn:hover { color: var(--text-0); background: rgba(255,255,255,0.07); }
.ghost-btn--danger:hover { color: #ff6b8a; background: rgba(252,0,76,0.1); }

/* preview */
.studio-card-preview { display: flex; }
.studio-article-preview { border-top: 1px solid var(--glass-border); padding-top: 18px; max-height: 60vh; overflow-y: auto; }
.studio-article-preview .post-body { font-size: 0.98rem; }

/* toast */
.studio-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px); background: rgba(14,15,24,0.95); border: 1px solid var(--glass-border); color: var(--text-0); padding: 12px 20px; border-radius: 12px; font-size: 0.9rem; box-shadow: var(--glass-shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 200; max-width: 90vw; }
.studio-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .studio { grid-template-columns: 1fr 1fr; }
  .studio__col--list { grid-column: 1 / -1; }
  .studio__col--list .studio__panel { position: static; }
}
@media (max-width: 760px) {
  .studio { grid-template-columns: 1fr; }
  .studio__col--form .studio__panel { position: static; }
}

/* ============================================================
   BOOKING PAGE (book.html), post-form calendar / strategy call
   ============================================================ */
.book-top { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 10px; gap: 16px; flex-wrap: wrap; }
.book-step { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-2); font-weight: 600; }
.book-step__bar { width: 46px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.book-step__bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--blue-lo), var(--blue)); }

.book { padding-top: clamp(18px, 4vw, 40px); padding-bottom: 60px; }
.book__head { text-align: center; max-width: 820px; margin: 0 auto clamp(28px, 5vw, 48px); }
.book__head .eyebrow { margin-inline: auto; }
.book__head .h-hero { margin-top: 20px; font-size: clamp(2.1rem, 5vw, 3.4rem); }
.book__head .lead { margin: 18px auto 0; }

.book__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; }
.book__aside { display: flex; flex-direction: column; gap: 20px; }
.book__cal { position: sticky; top: 24px; }

/* VSL */
.book-vsl { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, #15151c, #0e0e12); }
.book-vsl__poster { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, rgba(51,51,255,0.25), transparent 60%); }
.book-vsl__label { position: absolute; top: 16px; left: 18px; right: 18px; font-size: 0.92rem; font-weight: 600; color: var(--text-0); }
.book-vsl__time { position: absolute; bottom: 14px; right: 16px; font-size: 0.8rem; color: var(--text-2); background: rgba(0,0,0,0.4); padding: 3px 9px; border-radius: 999px; }

/* generic glass cards */
.book-card { padding: 24px 26px; border-radius: 20px; }
.book-card__title { font-size: 1.05rem; font-weight: 700; color: var(--text-0); margin-bottom: 16px; }
.check-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 30px; color: var(--text-1); line-height: 1.5; font-size: 0.97rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(110,231,168,0.15); color: #6ee7a8; font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }
.check-list strong { color: var(--text-0); }

/* proof tiles */
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.proof-tile { padding: 16px 12px; border-radius: 16px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.proof-tile b { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; background: linear-gradient(120deg, var(--text-0), var(--blue-lo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.proof-tile span { font-size: 0.78rem; color: var(--text-3); }

/* testimonial */
.quote-card { padding: 22px 24px; border-radius: 20px; }
.stars { color: #ffce4d; letter-spacing: 2px; font-size: 0.95rem; margin-bottom: 10px; }
.quote-card p { color: var(--text-1); line-height: 1.55; font-size: 1rem; }
.quote-by { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.quote-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--blue-lo), var(--crimson)); flex: 0 0 auto; }
.quote-by b { display: block; font-size: 0.9rem; color: var(--text-0); }
.quote-by small { font-size: 0.8rem; color: var(--text-3); }

/* trust */
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; color: var(--text-2); font-size: 0.9rem; font-weight: 600; }
.book-reassure { text-align: center; color: var(--text-3); font-size: 0.88rem; margin: -6px 0 0; }

/* calendar card */
.book-cal-card { padding: 22px; border-radius: 24px; }
.cal-head__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-head__top h2 { font-size: 1.25rem; font-weight: 800; color: var(--text-0); }
.urgency { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 600; color: #6ee7a8; background: rgba(110,231,168,0.1); border: 1px solid rgba(110,231,168,0.28); padding: 5px 10px; border-radius: 999px; }
.urgency i { width: 7px; height: 7px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 0 rgba(110,231,168,0.6); animation: pulseDot 1.8s infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(110,231,168,0.55); } 70% { box-shadow: 0 0 0 7px rgba(110,231,168,0); } 100% { box-shadow: 0 0 0 0 rgba(110,231,168,0); } }
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 14px 0 4px; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-2); }
.steps b { width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.72rem; display: grid; place-items: center; font-weight: 700; }
.cal-embed { margin-top: 16px; border-radius: 14px; overflow: hidden; min-height: 200px; background: rgba(10,10,16,0.4); }
.cal-foot { font-size: 0.8rem; color: var(--text-3); margin-top: 14px; text-align: center; }
.cal-placeholder { padding: 40px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cal-placeholder__ico { font-size: 2rem; }
.cal-placeholder b { color: var(--text-0); font-size: 1.05rem; }
.cal-placeholder span { color: var(--text-2); font-size: 0.9rem; line-height: 1.55; max-width: 340px; }
.cal-placeholder code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 6px; font-size: 0.84em; color: var(--blue-lo); }

/* faq */
.book-faq { max-width: 760px; margin: clamp(40px, 7vw, 72px) auto 0; }
.book-faq .h-section { text-align: center; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 22px; }
.book-faq__item { border-radius: 16px; padding: 4px 22px; margin-bottom: 12px; }
.book-faq__item summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; color: var(--text-0); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.book-faq__item summary::-webkit-details-marker { display: none; }
.book-faq__item summary::after { content: "+"; color: var(--blue-lo); font-size: 1.3rem; font-weight: 400; transition: transform .25s; }
.book-faq__item[open] summary::after { transform: rotate(45deg); }
.book-faq__item p { color: var(--text-2); line-height: 1.6; padding: 0 0 18px; margin: 0; font-size: 0.96rem; }

.book-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 40px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.06); color: var(--text-3); font-size: 0.85rem; }

@media (max-width: 960px) {
  .book__grid { grid-template-columns: 1fr; gap: 24px; }
  .book__cal { position: static; order: -1; }
}
@media (max-width: 560px) {
  .proof-row { grid-template-columns: 1fr 1fr; }
  .book-top .book-step { display: none; }
}

/* HubSpot Meetings embed (it renders light, so frame it on white) + tighter header so the calendar sits higher */
.meetings-iframe-container { background: #fff; border-radius: 12px; overflow: hidden; min-height: 640px; }
.meetings-iframe-container iframe { display: block; min-height: 640px; width: 100%; border: 0; }
.book__head { margin-bottom: clamp(20px, 3.5vw, 32px); }
.book__head .h-hero { font-size: clamp(1.95rem, 4.2vw, 2.9rem); }
.book { padding-top: clamp(12px, 2.5vw, 26px); }

/* Single-column layout: calendar is the centered hero, reassurance flows below */
.book-cal-card--solo { max-width: 720px; margin-inline: auto; }
.book-below { max-width: 880px; margin: clamp(30px, 5vw, 54px) auto 0; display: flex; flex-direction: column; gap: 22px; }
.cover-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cover-item { display: flex; gap: 11px; padding: 16px 18px; border-radius: 16px; background: var(--glass-fill); border: 1px solid var(--glass-border); }
.cover-item .cover-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(110,231,168,0.14); color: #6ee7a8; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.cover-item p { margin: 0; color: var(--text-1); font-size: 0.92rem; line-height: 1.5; }
.cover-item strong { color: var(--text-0); }
.book-below .quote-card { max-width: 600px; margin-inline: auto; text-align: center; }
.book-below .quote-by { justify-content: center; }
@media (max-width: 720px) { .cover-strip { grid-template-columns: 1fr; } }

/* ============================================================
   THANK-YOU / CONFIRMATION PAGE (typ.html)
   ============================================================ */
.typ { max-width: 680px; padding-top: clamp(20px, 4vw, 44px); padding-bottom: 60px; text-align: center; }
.typ__head { margin-bottom: clamp(24px, 4vw, 36px); }
.typ__head .eyebrow { margin-inline: auto; }
.typ__head .h-hero { margin-top: 18px; font-size: clamp(2rem, 4.6vw, 3rem); }
.typ__head .lead { margin: 16px auto 0; }

.typ-check { width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 50%; background: rgba(110,231,168,0.12); display: grid; place-items: center; }
.typ-check svg { width: 46px; height: 46px; }
.typ-check__circle { fill: none; stroke: #6ee7a8; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: typCircle .55s var(--ease) forwards; }
.typ-check__mark { fill: none; stroke: #6ee7a8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: typMark .35s var(--ease) .45s forwards; }
@keyframes typCircle { to { stroke-dashoffset: 0; } }
@keyframes typMark { to { stroke-dashoffset: 0; } }

.typ-card { max-width: 480px; margin: 0 auto; padding: 26px 28px; border-radius: 22px; text-align: left; }
.typ-card__event { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-lo); margin-bottom: 16px; }
.typ-when { display: flex; flex-direction: column; gap: 14px; }
.typ-when__row { display: flex; gap: 13px; align-items: center; }
.typ-when__ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); }
.typ-when__row b { display: block; color: var(--text-0); font-size: 1rem; }
.typ-when__row span { font-size: 0.86rem; color: var(--text-3); }
.typ-countdown { margin-top: 18px; text-align: center; font-size: 0.84rem; font-weight: 600; color: #6ee7a8; background: rgba(110,231,168,0.1); border: 1px solid rgba(110,231,168,0.26); padding: 8px; border-radius: 12px; }
.typ-cal { margin-top: 18px; border-top: 1px solid var(--glass-border); padding-top: 16px; }
.typ-cal__label { font-size: 0.78rem; color: var(--text-3); font-weight: 600; }
.typ-cal__btns { display: flex; gap: 8px; margin-top: 10px; }
.typ-cal__btns .btn { flex: 1; justify-content: center; }

.typ-next { max-width: 540px; margin: clamp(34px, 6vw, 52px) auto 0; text-align: left; }
.typ-next__title { font-size: 1.15rem; font-weight: 800; color: var(--text-0); text-align: center; margin-bottom: 18px; }
.typ-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.typ-steps li { display: flex; gap: 13px; align-items: flex-start; }
.typ-steps b { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.82rem; font-weight: 700; display: grid; place-items: center; }
.typ-steps div { color: var(--text-1); line-height: 1.5; font-size: 0.96rem; padding-top: 2px; }
.typ-steps strong { color: var(--text-0); }

.typ-vsl { max-width: 600px; margin: clamp(24px, 4vw, 36px) auto 0; }
.typ-resched { max-width: 540px; margin: 26px auto 0; text-align: center; color: var(--text-3); font-size: 0.86rem; }

/* video-first thank-you flow (matches the reference order) */
.typ-section-head { max-width: 540px; margin: clamp(40px, 7vw, 64px) auto 22px; }
.typ-section-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text-0); }
.typ-section-head p { color: var(--text-2); margin-top: 8px; }

.typ-step { display: flex; gap: 15px; max-width: 560px; margin: 0 auto; padding: 20px 22px; border-radius: 18px; text-align: left; }
.typ-step + .typ-step { margin-top: 14px; }
.typ-step__num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 0.92rem; display: grid; place-items: center; }
.typ-step__body { flex: 1; }
.typ-step__body h3 { color: var(--text-0); font-size: 1.02rem; font-weight: 700; margin-bottom: 5px; }
.typ-step__body p { color: var(--text-2); font-size: 0.94rem; line-height: 1.55; }
.typ-step .typ-cal { margin-top: 14px; border-top: 0; padding-top: 0; }

.typ-about { max-width: 600px; margin: clamp(40px, 7vw, 64px) auto 0; text-align: center; }
.typ-about h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text-0); margin-bottom: 18px; }
.typ-about .check-list { max-width: 480px; margin: 0 auto 26px; text-align: left; }
.proof-row--two { grid-template-columns: repeat(2, 1fr); max-width: 420px; margin-inline: auto; }

.typ-mission { max-width: 600px; margin: 28px auto 0; text-align: center; color: var(--text-1); line-height: 1.7; }

.typ-prep { max-width: 560px; margin: clamp(40px, 7vw, 64px) auto 0; text-align: left; }
.typ-prep h2 { text-align: center; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text-0); margin-bottom: 20px; }

.typ-close { max-width: 600px; margin: clamp(40px, 7vw, 64px) auto 0; padding: 32px 30px; border-radius: 22px; text-align: center; }
.typ-close p { color: var(--text-0); font-size: 1.08rem; line-height: 1.6; margin-bottom: 22px; }

.typ-disclaimer { max-width: 640px; margin: 8px auto 40px; text-align: center; color: var(--text-3); font-size: 0.72rem; line-height: 1.5; }

/* ---- eye-guides: motion that leads the eye down the page ---- */
.typ-cue { display: grid; place-items: center; margin: clamp(18px, 3.5vw, 30px) auto 0; }
.typ-cue svg { width: 30px; height: 30px; fill: none; stroke: var(--blue-lo); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: cueBob 1.7s var(--ease) infinite; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(8px); opacity: 1; } }

.typ-vsl .vsl__play { position: relative; }
.typ-vsl .vsl__play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(91,91,255,0.55); animation: playPulse 2.1s ease-out infinite; pointer-events: none; }
@keyframes playPulse { 0% { transform: scale(0.85); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

.typ-steps-flow .typ-step__num { animation: numPulse 3s ease-in-out infinite; }
.typ-steps-flow .typ-step:nth-child(2) .typ-step__num { animation-delay: .45s; }
.typ-steps-flow .typ-step:nth-child(3) .typ-step__num { animation-delay: .9s; }
@keyframes numPulse { 0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(51,51,255,0); } 36% { box-shadow: 0 0 0 7px rgba(51,51,255,0.16); } }

/* ---- confirmation mockups: show what the email + text look like ---- */
.confo-mocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.confo-email, .confo-sms { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 13px; }
.confo-email__row { display: flex; align-items: center; gap: 9px; }
.confo-logo { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(140deg, var(--blue-lo), var(--blue)); }
.confo-email__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.confo-email__meta b { font-size: 0.82rem; color: var(--text-0); }
.confo-sub { font-size: 0.76rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.confo-time { font-size: 0.68rem; color: var(--text-3); flex: 0 0 auto; }
.confo-email__snippet { font-size: 0.78rem; color: var(--text-2); margin-top: 9px; line-height: 1.45; }
.confo-sms { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.confo-sms__bubble { align-self: flex-start; background: linear-gradient(140deg, #3333FF, #5b5bff); color: #fff; padding: 9px 12px; border-radius: 14px 14px 14px 4px; font-size: 0.79rem; line-height: 1.4; }
.confo-sms__meta { font-size: 0.66rem; color: var(--text-3); }
@media (max-width: 520px) { .confo-mocks { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .typ-cue svg, .typ-vsl .vsl__play::after, .typ-steps-flow .typ-step__num { animation: none !important; }
}

/* ---- inline body images (blog posts) ---- */
.post-body img { max-width: 100%; height: auto; border-radius: 12px; }
.post-figure { margin: 1.7em 0; }
.post-figure img { width: 100%; border-radius: 16px; border: 1px solid var(--glass-border); display: block; }
.post-figure figcaption { text-align: center; color: var(--text-3); font-size: 0.85rem; margin-top: 10px; }
/* Blog Studio: body image toolbar */
.body-toolbar { display: flex; gap: 8px; margin: 2px 0 8px; }

/* cover image on cards + article hero (overrides the gradient) */
.post-thumb--photo { overflow: hidden; }
.post-thumb--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Blog Studio: cover upload row */
.cover-upload { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cover-name { font-size: 0.8rem; color: var(--text-2); overflow-wrap: anywhere; }

/* ============================================================
   BLOG STUDIO v2  -  editorial workflow, media, history, palette
   Added alongside the original .studio-* rules above.
   ============================================================ */

/* --- status colours, shared by the Studio list and preview cards --- */
:root {
  --st-draft: #8b8e9c;
  --st-review: #f0b429;
  --st-scheduled: #5b5bff;
  --st-published: #6ee7a8;
}

/* --- top bar: unsaved indicator --- */
.dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 4px rgba(252,0,76,0.18); margin-left: 4px; }
.btn--nudge { box-shadow: 0 0 0 2px rgba(252,0,76,0.5); }

/* --- recovery banner --- */
/* display:flex would beat the UA [hidden] rule, so opt out explicitly. */
.studio-banner[hidden], .studio__warn[hidden] { display: none; }
.studio-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 12px 12px; padding: 12px 18px; border-radius: 16px; font-size: 0.9rem; color: var(--text-1); }
.studio-banner__btns { display: flex; gap: 8px; }

/* --- list: search + status tabs --- */
.studio-search { width: 100%; margin-bottom: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(10,10,16,0.55); color: var(--text-0); font: inherit; font-size: 0.88rem; }
.studio-search:focus { outline: none; border-color: var(--blue-lo); }
.studio-search--inline { width: 190px; margin: 0; }
.studio-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.studio-tab { flex: 1 1 auto; padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; background: rgba(255,255,255,0.04); color: var(--text-2); font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.studio-tab:hover { color: var(--text-0); background: rgba(255,255,255,0.08); }
.studio-tab.is-active { color: var(--text-0); border-color: var(--blue); background: rgba(51,51,255,0.16); }
.studio-tab em { font-style: normal; opacity: 0.6; margin-left: 3px; }

/* --- list: status dot --- */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; flex: 0 0 auto; vertical-align: 1px; }
.status-dot--draft { background: var(--st-draft); }
.status-dot--review { background: var(--st-review); }
.status-dot--scheduled { background: var(--st-scheduled); }
.status-dot--published { background: var(--st-published); }

/* --- editor: panel tools + workflow block --- */
.studio__panel-tools { display: flex; gap: 2px; }
.studio__panel-tools .ghost-btn:disabled { opacity: 0.35; cursor: default; }
.workflow { padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.035); }
.workflow__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.workflow__row .field { margin-bottom: 0; }
.workflow .field select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(10,10,16,0.55); color: var(--text-0); font: inherit; font-size: 0.88rem; }
.workflow .field select:focus { outline: none; border-color: var(--blue-lo); }
.workflow__hint { margin-top: 10px; font-size: 0.78rem; line-height: 1.45; color: var(--text-2); }
.workflow__hint--published { color: var(--st-published); }
.workflow__hint--scheduled { color: var(--st-scheduled); }
.workflow__hint--review { color: var(--st-review); }

.studio__warn { margin: -4px 0 14px; padding: 9px 12px; border-radius: 10px; font-size: 0.8rem; line-height: 1.45; color: #ffd7e2; background: rgba(252,0,76,0.12); border: 1px solid rgba(252,0,76,0.35); }

/* --- status badge on preview cards (blog.html?preview=1) --- */
.post-card__status { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bg-0); }
.post-card__status--draft { background: var(--st-draft); }
.post-card__status--review { background: var(--st-review); }
.post-card__status--scheduled { background: var(--st-scheduled); color: #fff; }

/* --- preview notice on an unpublished article --- */
.preview-notice { margin-bottom: 22px; padding: 11px 16px; border-radius: 12px; font-size: 0.86rem; color: var(--text-1); background: rgba(240,180,41,0.12); border: 1px solid rgba(240,180,41,0.4); }

/* --- modals (media, history, palette) --- */
body.modal-open { overflow: hidden; }
.studio-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.studio-modal[hidden] { display: none; }
.studio-modal__backdrop { position: absolute; inset: 0; background: rgba(4,4,8,0.72); backdrop-filter: blur(6px); }
.studio-modal__panel { position: relative; width: min(1080px, 100%); max-height: 86vh; display: flex; flex-direction: column; padding: 20px 22px; border-radius: 22px; }
.studio-modal__panel--narrow { width: min(560px, 100%); }
.studio-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.studio-modal__head h3 { font-size: 1rem; font-weight: 700; color: var(--text-0); }
.studio-modal__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-2); }

/* --- media library --- */
.media-drop { flex: 1; overflow-y: auto; border-radius: 16px; border: 1px dashed transparent; transition: border-color .2s, background .2s; }
.media-drop.is-over { border-color: var(--blue-lo); background: rgba(51,51,255,0.08); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.media-card { border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03); overflow: hidden; display: flex; flex-direction: column; }
.media-card__thumb { aspect-ratio: 16 / 10; background: rgba(0,0,0,0.35); }
.media-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card figcaption { padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.media-card__name { font-size: 0.78rem; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card__meta { font-size: 0.7rem; color: var(--text-3); }
.media-card__used { color: var(--st-published); }
.media-card__unused { color: var(--text-3); }
.media-card__acts { display: flex; gap: 1px; padding: 4px 6px 7px; flex-wrap: wrap; }
.media-card__acts .ghost-btn { font-size: 0.72rem; padding: 3px 6px; }

/* --- version history --- */
.rev-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.rev-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,0.035); }
.rev-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rev-item__when { font-size: 0.84rem; font-weight: 600; color: var(--text-0); }
.rev-item__meta { font-size: 0.74rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- command palette --- */
.studio-modal--palette { align-items: flex-start; padding-top: 12vh; }
.palette { position: relative; width: min(620px, 100%); border-radius: 18px; overflow: hidden; }
.palette__input { width: 100%; padding: 17px 20px; border: none; border-bottom: 1px solid var(--glass-border); background: transparent; color: var(--text-0); font: inherit; font-size: 1rem; }
.palette__input:focus { outline: none; }
.palette__input::placeholder { color: var(--text-3); }
.palette__list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.palette__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 13px; border: none; border-radius: 10px; background: none; color: var(--text-1); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; }
.palette__item em { font-style: normal; font-size: 0.74rem; color: var(--text-3); flex: 0 0 auto; }
.palette__item:hover, .palette__item.is-active { background: rgba(51,51,255,0.2); color: var(--text-0); }

/* --- narrow screens --- */
@media (max-width: 1100px) {
  .studio { grid-template-columns: 1fr; }
  .studio__col--list .studio__panel, .studio__col--form .studio__panel { position: static; }
  .workflow__row { grid-template-columns: 1fr; }
}

/* Post list titles wrap to two lines now that the list is a primary
   navigation surface (status filters + search live above it). */
.studio__col--list .post-list__item { align-items: flex-start; }
.studio__col--list .post-list__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.studio__col--list .post-list__btns { flex-direction: column; }

/* ============================================================
   BLOG STUDIO  -  surface + contrast pass
   The aurora blobs are a hero-section device; behind a dense work
   UI they wash every panel out. On the Studio we dim the light
   source, thicken the glass, and lift the faint text tokens so
   labels and meta survive on top of it. Scoped to .studio-body,
   so the public site is untouched.
   ============================================================ */

/* 1. Dim the light source enough to stop the wash, but keep plenty of colour
      behind the panels: with no aurora there is nothing for the frost to
      refract and the glass reads as a flat black card. */
.studio-body .bg__blob { opacity: 0.34; filter: blur(100px); }
.studio-body .bg__grid { opacity: 0.45; }

/* 2. Lift the two faintest text steps. --text-3 at #595c6a is a decorative
      grey; it cannot carry field labels, meta or placeholders. */
.studio-body {
  --text-1: #d8dae1;
  --text-2: #adb0bd;
  --text-3: #9699a8;
}

/* 3. Thicker frosted glass: a real dark base under the white sheen, more
      blur, brighter rim. Reads as heavier glass, not as a flat card. */
.studio-body .studio-bar.glass,
.studio-body .studio__panel.glass,
.studio-body .studio-banner.glass,
.studio-body .studio-modal__panel.glass,
.studio-body .palette.glass {
  background:
    linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035) 62%),
    rgba(11,11,19,0.66);
  backdrop-filter: blur(36px) saturate(175%);
  -webkit-backdrop-filter: blur(36px) saturate(175%);
  border-color: rgba(255,255,255,0.26);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 0 rgba(255,255,255,0.06) inset,
    0 26px 64px -24px rgba(0,0,0,0.9),
    0 2px 14px -5px rgba(0,0,0,0.65);
}

/* 4. Inputs read as recessed wells cut into the glass */
.studio-body .field input,
.studio-body .field textarea,
.studio-body .field select,
.studio-body .studio-search,
.studio-body .palette__input {
  background: rgba(4,4,9,0.55);
  border-color: rgba(255,255,255,0.19);
  color: var(--text-0);
}
.studio-body .field input:focus,
.studio-body .field textarea:focus,
.studio-body .field select:focus,
.studio-body .studio-search:focus {
  border-color: var(--blue-lo);
  background: rgba(4,4,9,0.7);
  box-shadow: 0 0 0 3px rgba(51,51,255,0.22);
}
.studio-body ::placeholder { color: var(--text-3); opacity: 1; }

/* 5. Labels are structure, not decoration: give them full contrast */
.studio-body .field > span,
.studio-body .studio__sub,
.studio-body .studio-modal__head h3 { color: var(--text-0); }
.studio-body .field > span em { color: var(--text-2); }

/* 6. Rows and chips need an edge of their own against the thicker panel */
.studio-body .post-list__item,
.studio-body .rev-item,
.studio-body .media-card {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
}
.studio-body .post-list__item:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.16); }
.studio-body .post-list__item.is-editing { border-color: var(--blue-lo); background: rgba(51,51,255,0.2); }
.studio-body .studio-tab { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); color: var(--text-1); }
.studio-body .studio-tab:hover { background: rgba(255,255,255,0.11); }
.studio-body .studio-tab.is-active { background: rgba(51,51,255,0.26); border-color: var(--blue-lo); }
.studio-body .workflow { background: rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.12); }
.studio-body .ghost-btn { color: var(--text-1); }
.studio-body .ghost-btn:hover { color: var(--text-0); background: rgba(255,255,255,0.1); }

/* 7. The article preview column is reading copy, so hold it to body contrast */
.studio-body .studio-article-preview .post-body { color: var(--text-1); }
.media-card__bad { color: var(--crimson); font-weight: 700; }

/* ============================================================
   HERO ICON BUBBLES, drifting tool icons scattered around the VSL.
   Inspired by the old Marketing Media hero's icon field, but alive:
   organic placement instead of two columns, and a slow drift so the
   field feels ambient rather than pinned. Same emoji-on-gradient icon
   language as the rest of the site (no trademarked logos to license).
   Placement + motion are tuned per-bubble with inline CSS vars:
     --s size, --fd drift duration, --fdel delay,
     --fx/--fy/--fr drift offsets and tilt.
   ============================================================ */
.hero__bubble {
  position: absolute; z-index: 3;
  width: var(--s, 46px); height: var(--s, 46px);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(var(--s, 46px) * 0.44);
  pointer-events: none;
  will-change: transform;
}
/* far-away bubbles: smaller, dimmer, softly blurred = depth */
.hero__bubble--far { opacity: 0.55; filter: blur(1px); }

/* one keyframe, per-bubble character via vars. Three waypoints instead of a
   straight there-and-back: the second point is derived from the same vars
   (axes swapped and flipped) so every bubble wanders a small curved loop
   without needing extra tuning knobs. */
@keyframes float-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  35%  { transform: translate(var(--fx, 12px), var(--fy, -18px)) rotate(var(--fr, 2deg)); }
  70%  { transform: translate(calc(var(--fy, -18px) * -0.7), calc(var(--fx, 12px) * 0.8)) rotate(calc(var(--fr, 2deg) * -0.6)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* Bubbles only. The homepage stat chips are deliberately NOT animated:
   that hero stays as designed (its chips use the JS scroll parallax, and an
   inline transform would fight this animation anyway). */
.hero__bubble {
  animation: float-drift var(--fd, 9s) ease-in-out var(--fdel, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero__bubble { animation: none; }
}
/* Mobile: bubbles are now anchored to .growth-vsl (a fixed 16:9 box, see
   growth.html), so their percentage offsets stay sane at any width instead
   of computing against the header's wildly-varying height. They used to be
   hidden outright below 900px; the fix is to keep them but prune and shrink.
   - .hero__bubble--far (the smaller "depth" set) is dropped entirely: 13
     icons around a ~200px-tall mobile video is too dense.
   - The `scale` property (not `transform: scale`) is used deliberately: the
     drift keyframes already animate `transform`, and animating that property
     replaces it wholesale every frame, so a static transform:scale here
     would be clobbered the instant the animation starts. `scale` is its own
     CSS property and composes independently, so both apply at once. */
@media (max-width: 900px) {
  .growth-vsl .hero__bubble--far { display: none; }
  .growth-vsl .hero__bubble { scale: 0.72; }
}
@media (max-width: 480px) {
  .growth-vsl .hero__bubble { scale: 0.56; }
}

.blog-hero { position: relative; }

/* logo bubbles: white brand glyph or a Satoshi letter-mark */
.hero__bubble img { width: 46%; height: 46%; display: block; }
.hero__bubble b { font-weight: 900; color: #fff; font-size: calc(var(--s, 46px) * 0.42); line-height: 1; }


/* the growth hero's VSL: same player component, ringed by the icon field */
.growth-vsl { position: relative; width: min(860px, 100%); margin: 44px auto 0; }

/* growth-hero rhythm: .blog-hero was built for the blog index (a short
   header with nothing but a title above the post grid), so its lead/actions
   carry no bottom margins, they weren't designed to stack with buttons + a
   note + a video underneath. Scoped here rather than touching .blog-hero
   itself, so blog.html's spacing is untouched. */
.blog-hero.growth-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.blog-hero.growth-hero .lead { margin-bottom: 34px; }
.blog-hero.growth-hero .hero__actions { margin-bottom: 22px; }
.blog-hero.growth-hero .hero__note { margin-bottom: 4px; }

/* stat tiles: the gradient number is background-clip:text over whatever the
   aurora happens to be doing behind that particular tile, so contrast swings
   with position instead of being guaranteed. Give the tile its own opaque
   backing (independent of the roaming blobs) and the number its own glow, so
   it never depends on where it lands. */
.stat { background-color: rgba(6,6,11,0.55); }
.stat .num {
  filter: drop-shadow(0 0 20px rgba(91,91,255,0.5)) drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}

/* ============================================================
   COPY GUARD, marketing pages only (body.no-copy).
   Same one-liner King Kong uses: the browser refuses to create a text
   selection. It is deterrence theatre against a determined copier
   (view-source shows everything), so it is deliberately scoped:
     - the blog is NEVER guarded, articles must stay quotable/shareable
     - anything a real prospect legitimately copies stays selectable:
       contact links, form fields, and anything marked .can-copy
   Embedded iframes (Tally, HubSpot) are separate documents and are
   unaffected either way.
   ============================================================ */
body.no-copy {
  -webkit-user-select: none;
  user-select: none;
}
body.no-copy input,
body.no-copy textarea,
body.no-copy select,
body.no-copy a[href^="mailto:"],
body.no-copy a[href^="tel:"],
body.no-copy .can-copy,
body.no-copy .can-copy * {
  -webkit-user-select: text;
  user-select: text;
}