/* ── Clubtech Global — landing page styles ───────────────────────────── */

:root {
  --bg-0: #07070A;
  --bg-1: #0B0B10;
  --bg-2: #111118;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #F2EFE9;
  --text-dim: #A4A4AA;
  --text-muted: #6F6F76;
  --accent: #5B7BFF;
  --accent-soft: #8FA3FF;
  --accent-glow: rgba(91, 123, 255, 0.55);
  --radius: 14px;
  --radius-sm: 8px;
  --content-max: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html, body {
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { position: relative; min-height: 100vh; }

/* Constrain horizontal overflow on a non-scroll-container so position:sticky still works */
#root { overflow-x: clip; position: relative; }

/* Global grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}

::selection { background: var(--accent); color: #0a0a0a; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ── Typography ──────────────────────────────────────────────────────── */
.eyebrow {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.display {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--text);
}

.subline {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--text-dim);
  font-weight: 400;
  max-width: 58ch;
}

.mono { font-family: 'Geist Mono', 'JetBrains Mono', monospace; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 32px);
  position: relative;
}

section {
  position: relative;
  padding: clamp(64px, 10vh, 100px) 0;
}

@media (max-width: 640px) {
  html { scroll-padding-top: 70px; }
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* Solid bar painted directly on .nav (no translucency / ::before stacking)
     so it reads as a clearly defined nav, distinctly lighter than the
     #07070A page background. */
  background: #14151e;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 36px -8px rgba(0,0,0,0.85);
  transition: padding 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled { padding: 12px 28px; }

.nav-left { display: flex; align-items: center; gap: 20px; }
.nav-brand { display: flex; align-items: center; }
.nav-logo { height: 28px; width: auto; display: block; object-fit: contain; transition: transform 0.3s var(--ease); }
.nav-brand:hover .nav-logo { transform: scale(1.04); }

.nav-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.nav-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3ECF8E;
  box-shadow: 0 0 0 0 rgba(62,207,142,0.5);
  animation: navPulse 2s ease-in-out infinite;
}
@keyframes navPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(62,207,142,0); }
}
.nav-status-text {
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--text-dim);
}

.nav-pill {
  justify-self: center;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15, 15, 22, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.nav-pill-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}
.nav-link {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-dim);
  border-radius: 999px;
  transition: color 0.2s var(--ease), background 0.3s var(--ease);
  position: relative;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); }
.nav-link.active {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.nav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 9px 8px 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #0a0a0a;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 4px 16px -4px var(--accent-glow);
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
}
.nav-cta:hover::before { transform: translateX(100%); }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -4px var(--accent-glow); }
.nav-cta-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  font-size: 12px;
  transition: transform 0.25s var(--ease);
}
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }

/* ── Mobile nav toggle (hamburger) + overlay ─────────────────────────── */
.nav-mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-mobile-toggle:hover { background: rgba(255,255,255,0.08); border-color: var(--line-strong); }
.nav-mobile-toggle-line {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-line:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-line:nth-child(2) { opacity: 0; }
.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-line:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.nav-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(7, 7, 10, 0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  overflow-y: auto;
}
.nav-mobile-panel.open { display: block; opacity: 1; }
.nav-mobile-inner {
  padding: 96px 24px 32px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 24px;
}
.nav-mobile-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nav-mobile-link {
  display: block;
  padding: 18px 4px;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transform: translateX(-16px);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), color 0.2s var(--ease);
}
.nav-mobile-panel.open .nav-mobile-link { transform: translateX(0); opacity: 1; }
.nav-mobile-link:hover { color: var(--accent-soft); }
.nav-mobile-link.active { color: var(--accent-soft); }
.nav-mobile-panel.open .nav-mobile-list .nav-mobile-link:nth-child(1) { transition-delay: 0.05s; }
.nav-mobile-panel.open .nav-mobile-list .nav-mobile-link:nth-child(2) { transition-delay: 0.09s; }
.nav-mobile-panel.open .nav-mobile-list .nav-mobile-link:nth-child(3) { transition-delay: 0.13s; }
.nav-mobile-panel.open .nav-mobile-list .nav-mobile-link:nth-child(4) { transition-delay: 0.17s; }
.nav-mobile-panel.open .nav-mobile-list .nav-mobile-link:nth-child(5) { transition-delay: 0.21s; }
.nav-mobile-panel.open .nav-mobile-list .nav-mobile-link:nth-child(6) { transition-delay: 0.25s; }

.nav-mobile-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.nav-mobile-link--soft {
  border-bottom: 0;
  font-size: 18px;
  padding: 8px 4px;
  color: var(--text-dim);
}
.nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #0a0a0a;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.nav-mobile-cta .nav-cta-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  font-size: 13px;
}
body.nav-mobile-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; padding: 14px 16px; gap: 12px; }
  .nav.scrolled {
    padding: 10px 16px;
    background: #14151e;
    border-bottom: 1px solid rgba(255,255,255,0.16);
  }
  .nav-logo { height: 24px; }
  .nav-pill { display: none; }
  .nav-status { display: none; }
  .nav-cta { font-size: 12px; padding: 8px 6px 8px 14px; }
  .nav-cta-arrow { width: 20px; height: 20px; font-size: 11px; }
  .nav-mobile-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  .nav { padding: 12px 12px; gap: 8px; }
  .nav.scrolled { padding: 8px 12px; }
  .nav-logo { height: 22px; }
  .nav-cta { font-size: 11px; padding: 7px 5px 7px 12px; gap: 8px; }
  .nav-mobile-inner { padding: 84px 20px 28px; }
  .nav-mobile-link { font-size: 22px; padding: 16px 4px; }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  position: relative;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 0 0 0 var(--accent-glow), 0 20px 40px -20px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(91, 123, 255, 0.12), 0 30px 60px -20px var(--accent-glow);
}
.btn-primary .arrow { transition: transform 0.25s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-dim);
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--text); }

/* ── Reveal animations ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.28s; }
.reveal[data-delay="4"] { transition-delay: 0.38s; }
.reveal[data-delay="5"] { transition-delay: 0.48s; }

/* ── Placeholder (for photos/screenshots) ────────────────────────────── */
.ph {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text-muted);
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 14px
  );
  pointer-events: none;
}
.ph-label {
  position: absolute;
  top: 14px; left: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(7,7,10,0.7);
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px solid var(--line);
  z-index: 2;
}

/* Section divider (gradient fade) */
.section-fade {
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--bg-0));
  pointer-events: none;
}

/* Progress dots (shape-shifter) */
.progress-dots {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}
.progress-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
  border: none; padding: 0;
}
.progress-dot.active {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scale(1.3);
}

/* Hide scrollbars visually but keep scroll */
.logo-strip::-webkit-scrollbar { display: none; }

/* ——— Footer (shared across all pages) ——— */
.foot { padding: 80px 0 40px; border-top: 1px solid var(--line); position: relative; }
.foot-wrap { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; margin-bottom: 60px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-logo { height: 40px; width: auto; opacity: 0.85; align-self: flex-start; object-fit: contain; }
.foot-tag { font-size: 10px; color: var(--text-muted); letter-spacing: 0.22em; max-width: 280px; line-height: 1.8; }
.foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.foot-grid > div { display: flex; flex-direction: column; gap: 10px; }
.foot-col-head { font-size: 10px; color: var(--text-muted); letter-spacing: 0.22em; margin-bottom: 6px; }
.foot-grid a { font-size: 13px; color: var(--text-dim); cursor: pointer; transition: color 0.2s; }
.foot-grid a:hover { color: var(--text); }
.foot-bottom {
  display: flex; justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em;
}
@media (max-width: 780px) {
  .foot-wrap { grid-template-columns: 1fr; gap: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .foot { padding: 60px 0 30px; }
  .foot-wrap { gap: 32px; margin-bottom: 40px; }
  .foot-grid { gap: 24px; }
  .foot-bottom { flex-direction: column; gap: 10px; padding-top: 20px; }
}

/* ============================================================== */
/* Inline component styles — appended from JSX <style> blocks      */
/* ============================================================== */

/* ── IPhoneFrame ────────────────────────────────────────────────── */
.iphone-frame {
  --iphone-w: 280px;
  --iphone-radius: 44px;
  width: var(--iphone-w);
  aspect-ratio: 9 / 19.5;
  position: relative;
}
.iphone-body {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  border-radius: var(--iphone-radius);
  border: 3px solid #222;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 1px rgba(0,0,0,0.8),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(91,123,255,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.iphone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 28px;
  background: #0a0a0a;
  border-radius: 16px;
  z-index: 10;
}
.iphone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  z-index: 5;
  position: relative;
}
.iphone-status-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.iphone-battery {
  display: flex;
  align-items: center;
  gap: 1px;
}
.iphone-battery-body {
  width: 22px;
  height: 10px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 2px;
  padding: 1px;
}
.iphone-battery-fill {
  width: 75%;
  height: 100%;
  background: rgba(255,255,255,0.6);
  border-radius: 1px;
}
.iphone-battery-tip {
  width: 2px;
  height: 5px;
  background: rgba(255,255,255,0.35);
  border-radius: 0 1px 1px 0;
}
.iphone-screen {
  flex: 1;
  margin: 4px 4px 0;
  border-radius: calc(var(--iphone-radius) - 7px) calc(var(--iphone-radius) - 7px) 0 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #0B0B14, #07070A);
}
.iphone-home {
  width: 120px;
  height: 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  margin: 8px auto 10px;
}

/* Hero phone: video fills edge-to-edge, home bar overlays bottom */
.hero-phone .iphone-home {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 10;
}

/* Screen clip: rounds + masks the hero video on a plain (untransformed)
   box. Clipping on this wrapper instead of via border-radius directly on
   the 3D-transformed <video> kills the 1px hairline that antialiased
   along the top/bottom edges during the float animation. Lives inside the
   popout stage but excludes the popout layer so docked popouts still
   escape past the phone edge. */
.hero-screen-clip {
  position: absolute;
  inset: 0;
  /* Screen glass radius is intentionally tighter than the device body
     (44px) and the video sits on a 6px inner bezel (see .hero-video inset
     below). The recording's UI runs flush to its own edges — buttons touch
     the very bottom — so without the tighter radius + inset the rounded
     corners clipped the bottom of the "Back" / "Proceed to Checkout" row.
     30px clears the button corners with ~2px margin (measured). */
  border-radius: 30px;
  background: #0a0a0a;
  overflow: hidden;
  z-index: 0;
  /* Promote to its own layer so the rounded clip composites crisply
     while the phone rotates/floats in 3D. */
  transform: translateZ(0);
  isolation: isolate;
}

/* Hero video inside iPhone frame. Inset 6px on every side onto the dark
   screen-clip bezel, so the recording's edge-flush UI (top header, bottom
   button row) sits inside the rounded screen corners instead of being
   clipped by them. The bezel + tighter clip radius read as a modern
   bezel-less phone. */
.hero-video {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 24px;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* ── Atmosphere ─────────────────────────────────────────────────── */
.atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.mesh-1 {
  width: 800px; height: 800px;
  left: -10%; top: -20%;
  background: radial-gradient(circle, rgba(91,123,255,0.45), transparent 65%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.mesh-2 {
  width: 700px; height: 700px;
  right: -15%; top: 20%;
  background: radial-gradient(circle, rgba(180,70,40,0.55), transparent 65%);
  animation: drift2 26s ease-in-out infinite alternate;
}
.mesh-3 {
  width: 600px; height: 600px;
  left: 30%; bottom: -20%;
  background: radial-gradient(circle, rgba(244,163,115,0.3), transparent 65%);
  animation: drift3 30s ease-in-out infinite alternate;
}
.particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
@keyframes drift1 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(120px, 60px) scale(1.15); }
}
@keyframes drift2 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-100px, 80px) scale(1.1); }
}
@keyframes drift3 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px, -60px) scale(1.2); }
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  padding: 120px 0 80px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  z-index: 2;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-h {
  font-size: clamp(40px, 5.4vw, 82px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 400;
  text-wrap: balance;
}
.hero-line-1 { display: inline; }
.accent-word {
  display: inline;
  background: linear-gradient(180deg, #8FA3FF 0%, #5B7BFF 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}
.hero-cta { display: flex; gap: 24px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* ── Hero variant: centered single-column ─────────────────────────
   No left copy, no CTAs. Big centered title fades in once on load,
   phone sits below it. */
.hero-wrap--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-template-columns: none;
  gap: 56px;
  text-align: center;
}
.hero-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(38px, 5.8vw, 84px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-weight: 400;
  text-wrap: balance;
  max-width: 14ch;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #c8d0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  animation: heroTitleRise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes heroTitleRise {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* Subline under the hero H1 — same entrance, a beat later. */
.hero-proof {
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-dim);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  animation: heroTitleRise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
@media (max-width: 640px) {
  .hero-proof { font-size: 15px; line-height: 1.5; padding: 0 20px; }
  /* Let the two sentences flow naturally on narrow screens rather than
     forcing the desktop line break mid-column. */
  .hero-proof br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-proof { animation: none; opacity: 1; transform: none; filter: none; }
}
.hero-visual--centered {
  height: auto;
  width: min(340px, 78vw);
}

/* Frosted glass behind the popouts. Toggled by .is-popout-active on
   the stage so multiple popouts can share the overlay without flicker. */
.video-popout-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(20, 22, 30, 0.28);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.video-popout-stage.is-popout-active .video-popout-glass {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .video-popout-glass { transition: none; }
}

.hero-visual {
  position: relative;
  perspective: 1100px;
  perspective-origin: 50% 45%;
  height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-phone-wrap {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  animation: heroSpinIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             heroFloat 9s ease-in-out 1.8s infinite;
}
.hero-phone-glow {
  position: absolute;
  inset: -80px -60px -60px -60px;
  /* Layered multi-hue bloom — blue core with violet + cyan flanking
     pools so the halo reads as colour-rich rather than a flat wash. */
  background:
    radial-gradient(ellipse 58% 50% at 50% 40%, rgba(91,123,255,0.42), transparent 64%),
    radial-gradient(ellipse 42% 38% at 30% 72%, rgba(140,86,255,0.30), transparent 62%),
    radial-gradient(ellipse 44% 40% at 72% 66%, rgba(54,196,255,0.24), transparent 62%);
  filter: blur(48px);
  z-index: 0;
  pointer-events: none;
  transform: translateZ(-60px);
  animation: heroGlowPulse 9s ease-in-out 1.8s infinite;
}
/* Aurora sheen — a slow conic sweep behind the hero device that drifts
   colour around the halo. Scoped to the hero wrap so the smaller revenue
   phones keep the cheaper static bloom. */
.hero-phone-wrap .hero-phone-glow::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(91,123,255,0) 0%,
    rgba(120,90,255,0.38) 18%,
    rgba(54,196,255,0.32) 36%,
    rgba(91,123,255,0) 54%,
    rgba(150,90,255,0.34) 76%,
    rgba(91,123,255,0) 100%);
  filter: blur(42px);
  opacity: 0.75;
  animation: heroAuroraSpin 20s linear infinite;
  will-change: transform;
}
@keyframes heroAuroraSpin {
  to { transform: rotate(360deg); }
}
.hero-phone {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  /* Resting width (was an inline style on the markup; moved here so the
     mobile media query can cap it to fit the viewport). */
  --iphone-w: 300px;
  /* Match hero_reshoot_20260608.web.mp4 native aspect (500x922). */
  aspect-ratio: 500 / 922;
}

/* 3D back face — visibly larger than the front face and pushed back in Z,
   so a clear rim of "back" peeks around the device on all sides. */
.hero-phone::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: calc(var(--iphone-radius) + 14px);
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(91,123,255,0.18), transparent 60%),
    linear-gradient(155deg, #25252e 0%, #0a0a10 45%, #1a1a22 100%);
  border: 1px solid #0c0c12;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 -80px 120px rgba(0,0,0,0.6),
    0 60px 110px rgba(0,0,0,0.65);
  transform: translateZ(-36px);
  z-index: -2;
  pointer-events: none;
}
/* Side bezel slab — the visible thickness ring around the device. Bigger
   than the front face, smaller than the back face. Uses a horizontal
   metal-edge gradient so light "catches" the bezel as the phone rotates. */
.hero-phone::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: calc(var(--iphone-radius) + 7px);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.14) 0%,
      rgba(50,50,62,0.92) 14%,
      rgba(18,18,24,0.96) 50%,
      rgba(50,50,62,0.92) 86%,
      rgba(255,255,255,0.10) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0.06),
      transparent 30%,
      transparent 70%,
      rgba(0,0,0,0.35));
  background-blend-mode: normal, overlay;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  transform: translateZ(-18px);
  z-index: -1;
  pointer-events: none;
}
/* Light catches on the front face glass edge — subtle inset highlight that
   reinforces "this is a slab, not a card" when the phone rotates. */
.hero-phone .iphone-body {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 1px 0 0 rgba(255,255,255,0.05),
    inset -1px 0 0 rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 70px rgba(91,123,255,0.22),
    0 0 140px rgba(120,90,255,0.12);
}

/* Start within front-facing rotation range (|Y| < 90deg) so the back-face
   pseudo and rim slab never invert ahead of the iphone-body in 3D Z-order.
   Previously started at rotateY(-180deg) which exposed the back rim in
   front of the device for the first ~600ms of the spin. */
@keyframes heroSpinIn {
  0% {
    opacity: 0;
    transform: rotateY(-28deg) rotateX(11deg) scale(0.88) translateY(18px);
  }
  55% { opacity: 1; }
  100% {
    opacity: 1;
    transform: rotateY(-12deg) rotateX(6deg) scale(1) translateY(0) translateZ(0);
  }
}
@keyframes heroFloat {
  0%, 100% {
    transform: rotateY(-12deg) rotateX(6deg) translateY(0) translateZ(0);
  }
  25% {
    transform: rotateY(-16deg) rotateX(3deg) translateY(-12px) translateZ(22px);
  }
  50% {
    transform: rotateY(-8deg)  rotateX(9deg) translateY(-26px) translateZ(40px);
  }
  75% {
    transform: rotateY(-14deg) rotateX(4deg) translateY(-14px) translateZ(22px);
  }
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.85; transform: translateZ(-60px) scale(1); }
  50%      { opacity: 1;    transform: translateZ(-60px) scale(1.10); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-phone-wrap, .hero-phone-glow,
  .hero-phone-wrap .hero-phone-glow::after { animation: none; }
}

/* ── Video popout overlay system ─────────────────────────────────
   Layered on top of the hero phone video. Micro-videos pop in over
   an in-video UI region, dwell briefly, then slide and dock beside
   the phone where they gently hover. Driven by micro-popouts.js
   using the main video's currentTime as the clock source.
   See CLAUDE_MICRO_VIDEO_OVERLAYS.md for the full spec. */

/* Hero iPhone body must let popouts escape its bounds when they
   dock to the side. The hero-video has its own border-radius so
   the screen still looks rounded. */
.hero-phone .iphone-body { overflow: visible; }

.video-popout-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  border-radius: inherit;
}

.video-popout-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}

/* Static popout plane. Lives in .hero-visual as a sibling of the
   rotating/floating .hero-phone-wrap, so the popouts it hosts dock beside
   the phone and stay still instead of swimming with the phone's 3D float.
   Centred and sized to the hero phone's resting screen (300px wide,
   500/922 — matching --iphone-w and the hero video aspect) so the layer's
   0..1 anchors still map onto the phone screen. Sits above the phone. */
.video-popout-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  aspect-ratio: 500 / 922;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
}

/* Outer wrapper carries the motion (position, transform, opacity) so the
   accompanying caption can sit above the popout without being clipped
   by the popout's own overflow:hidden. */
.video-popout-group {
  position: absolute;
  width: var(--popout-width, 170px);
  left: calc(var(--popout-anchor-x, 0.5) * 100%);
  top: calc(var(--popout-anchor-y, 0.5) * 100%);
  transform:
    translate(-50%, -50%)
    translate(var(--popout-tx, 0px), var(--popout-ty, 0px))
    scale(var(--popout-scale, 0.72));
  opacity: var(--popout-opacity, 0);
  will-change: transform, opacity, translate;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
}
.video-popout-group.is-docked {
  animation: popoutHover 4.8s ease-in-out infinite;
}
@keyframes popoutHover {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* Hero-end outro: all docked popouts stop hovering and fly back into the
   centre of the phone (shrink + fade) in one synchronised beat, driven by
   micro-popouts.js as the hero approaches its loop point. The longer,
   decelerating transform makes the return read as a deliberate "collapse
   into the device" rather than a per-popout retract. */
.video-popout-group.is-outro {
  animation: none;
  transition:
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease-in;
}

.video-popout {
  position: relative;
  width: 100%;
  /* Container conforms to the inner video's natural aspect by default
     (source assets are pre-cropped tight to the visible UI region).
     Override --popout-aspect from a config only if extra cropping is
     needed for a specific popout. */
  aspect-ratio: var(--popout-aspect, auto);
  border-radius: 20px;
  overflow: hidden;
  background: #05060a;
  /* Layered outer glow: hairline rim + tight bloom + wide soft halo,
     plus a deeper drop shadow so the popout reads as lifted from the
     phone surface. The blue bloom matches the hero phone glow palette. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 24px rgba(91, 123, 255, 0.55),
    0 0 60px rgba(91, 123, 255, 0.45),
    0 0 120px rgba(91, 123, 255, 0.28),
    0 36px 90px rgba(0, 0, 0, 0.55);
  filter: saturate(1.08) contrast(1.03);
}

/* Inner video: 3px outward bleed on every side hides source-edge
   capture artifacts. Container's overflow:hidden clips the bleed. */
.video-popout video {
  width: calc(100% + 6px);
  height: auto;
  display: block;
  margin: -3px;
}

/* Subtle rim glow pulse during the pop-in moment. */
.video-popout::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(91, 123, 255, 0.0) inset;
  transition: box-shadow 0.5s ease;
}
.video-popout-group[data-popout-state="entering"] .video-popout::after,
.video-popout-group[data-popout-state="dwell"] .video-popout::after {
  box-shadow: 0 0 0 1px rgba(91, 123, 255, 0.55) inset;
}

/* Caption sits above the docked popout. Fades + nudges in once
   the slide is complete (.show-caption class). */
.video-popout-caption {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}
.video-popout-group.show-caption .video-popout-caption {
  opacity: 1;
  transform: translateY(0);
}
.video-popout-caption-eyebrow {
  font-family: 'GeistMono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(143, 163, 255, 0.95);
  margin-bottom: 8px;
  line-height: 1;
}
.video-popout-caption-body {
  font-size: 12.5px;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .video-popout-group {
    transition: opacity 0.3s ease;
    transform: translate(-50%, -50%) scale(1);
  }
  .video-popout-group.is-docked { animation: none; }
  .video-popout-caption {
    transition: opacity 0.3s ease;
    transform: none;
  }
}

.hero-scrollhint {
  position: absolute;
  left: 32px;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  z-index: 3;
}
.hint-line {
  width: 80px; height: 1px;
  background: linear-gradient(to right, var(--text-muted), transparent);
  position: relative;
  overflow: hidden;
}
.hint-line::after {
  content: '';
  position: absolute;
  top: 0; left: -30px;
  width: 30px; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  animation: hintSlide 2.4s ease-in-out infinite;
}
@keyframes hintSlide {
  0% { left: -30px; } 100% { left: 100%; }
}

/* Mobile CTA visibility */
.hero-ghost-mobile { display: none; }

@media (max-width: 960px) {
  .hero-wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { height: 380px; }
  .hero-scrollhint { display: none; }
  /* Centered variant: shrink gap, keep phone visible at full mobile. */
  .hero-wrap--centered { gap: 40px; }
  .hero-visual--centered { height: auto; width: min(300px, 68vw); }
}
@media (max-width: 640px) {
  .hero { padding: 84px 0 24px; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
  .hero-wrap { gap: 0; }
  .hero-copy { gap: 20px; padding: 0 20px; }
  .hero-cta { gap: 14px; width: 100%; }
  .hero-cta .btn-primary { width: 100%; justify-content: center; }
  .hero-visual { display: none; }
  .hero-ghost-desktop { display: none; }
  .hero-ghost-mobile { display: inline-flex; }
  /* Centered variant overrides the default hero-visual: display: none
     above. The phone is the whole story here, so keep it visible — but
     size it to whatever height is left after the nav + title + subline so
     the entire hero fits in one viewport with no clipping or page scroll. */
  .hero-wrap--centered { gap: 18px; padding: 0 20px; }
  .hero-visual--centered { display: flex; width: auto; height: auto; }
  /* Phone width capped three ways: viewport-relative, an absolute max, and
     the leftover height converted to width via the 500/922 device aspect. */
  .hero-phone { --iphone-w: min(64vw, 260px, calc((100dvh - 300px) * 0.542)); }
}

/* ── Video Modal ─────────────────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: modalFadeIn 0.3s ease;
}
.video-modal-content {
  position: relative;
  z-index: 1;
  width: min(320px, 85vw);
  max-height: 85vh;
  max-height: 85dvh;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8), 0 0 80px rgba(91,123,255,0.15);
  animation: modalSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-modal-player {
  width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  object-fit: contain;
  display: block;
}
.video-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.video-modal-close:hover { background: rgba(255,255,255,0.15); }

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ── ShapeShifter ───────────────────────────────────────────────── */
.shapeshifter { padding: 0; position: relative; }
.ss-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0 40px;
}
.ss-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.ss-wrap {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
}
.ss-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.ss-head { max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.ss-h { font-size: clamp(30px, 3.6vw, 52px); }
.ss-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ss-meta {
  text-align: right;
  max-width: 280px;
}
.ss-meta-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fadeVenue 0.8s var(--ease);
}
@keyframes fadeVenue {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.ss-venue-name {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ss-venue-loc {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.22em;
}
.ss-venue-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
}

@media (max-width: 960px) {
  .ss-top-row { flex-direction: column; align-items: flex-start; }
  .ss-meta { text-align: left; }
  .ss-stage { max-height: 50vh; }
  .progress-dots { right: 16px; }
}
@media (max-width: 640px) {
  .shapeshifter { padding: 80px 0 40px; min-height: 0 !important; }
  .ss-sticky { position: relative; top: auto; height: auto; padding: 0; display: block; }
  .ss-wrap { gap: 28px; height: auto; }
  .ss-top-row { gap: 16px; }
  .ss-stage {
    flex: none;
    display: block;
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .venue-device {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .progress-dots {
    position: relative; right: auto; top: auto; transform: none;
    flex-direction: row; justify-content: center; gap: 10px; margin-top: 20px;
  }
  .dep-sol-watermark { font-size: clamp(44px, 14vw, 80px); }
}

/* VenueDevice */
.venue-device {
  position: relative;
  width: 100%;
  max-width: min(900px, 92vw);
  max-height: 100%;
  /* Image aspect (~1.74) + 36px chrome → device aspect ~1.63 keeps body flush with image */
  aspect-ratio: 1.63 / 1;
  animation: vdIn 0.9s var(--ease);
}
@keyframes vdIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.vd-glow {
  position: absolute; inset: -60px;
  filter: blur(40px);
  z-index: 0;
  transition: background 1.2s var(--ease);
}
.vd-frame {
  position: relative;
  height: 100%; width: 100%;
  background: #0E0E14;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7);
  z-index: 1;
}
.vd-chrome {
  display: flex; align-items: center;
  padding: 9px 14px;
  background: #0A0A10;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.vd-dots { display: flex; gap: 6px; }
.vd-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.vd-url { flex: 1; text-align: center; font-size: 11px; color: var(--text-muted); }
.vd-body { height: calc(100% - 36px); position: relative; }

/* Venue deployment layouts */
.dep { height: 100%; width: 100%; position: relative; display: flex; flex-direction: column; font-family: 'Geist', sans-serif; }

/* Shared hero + overlay */
.dep .dep-hero { flex: 1; position: relative; overflow: hidden; }
.dep-hero-img { position: absolute; inset: 0; }
.dep-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Dark gradient scrim so overlay copy stays readable over the venue image */
.dep-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,8,14,0.78) 0%, rgba(5,8,14,0.55) 38%, rgba(5,8,14,0.0) 65%);
  pointer-events: none;
}
.dep-hero:has(.dep-overlay-right)::after {
  background: linear-gradient(270deg, rgba(12,8,24,0.78) 0%, rgba(12,8,24,0.55) 38%, rgba(12,8,24,0.0) 65%);
}
.dep-hero:has(.dep-overlay-center)::after { background: rgba(5,8,14,0.35); }

.dep-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44%;
  max-width: 360px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}
.dep-overlay-left { left: 0; align-items: flex-start; text-align: left; }
.dep-overlay-right { right: 0; align-items: flex-start; text-align: left; }
.dep-overlay-center {
  left: 50%; transform: translateX(-50%);
  align-items: center; text-align: center;
  width: 60%; max-width: 420px;
}
.dep-overlay-kicker {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dep-overlay-title {
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.08;
  color: #fff;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.dep-overlay-pitch {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  max-width: 38ch;
}
.dep-overlay-cta {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.dep-overlay-center .dep-overlay-cta { align-self: center; }
.dep-overlay-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.dep-cta-arrow { display: inline-block; transition: transform 0.18s var(--ease); }
.dep-overlay-cta:hover .dep-cta-arrow { transform: translateX(3px); }
.dep-finns { background: linear-gradient(180deg, #0A1622, #050A10); }

.dep-luna { background: linear-gradient(180deg, #0A0818, #0F0B20); color: #E0D8F0; }

.dep-sol { background: linear-gradient(180deg, #100805, #1C0F08); }
.dep-hero-sol {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(155,107,255,0.18), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(242,107,58,0.12), transparent 60%),
    #0e0a1a;
}
.dep-sol-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(56px, 10vw, 120px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  opacity: 0.12;
  pointer-events: none;
  text-align: center;
}

/* Narrow browser frames — overlay becomes full-width footer */
@media (max-width: 780px) {
  .dep-overlay, .dep-overlay-left, .dep-overlay-right, .dep-overlay-center {
    position: absolute;
    left: 0; right: 0; bottom: 0; top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(5,8,14,0) 0%, rgba(5,8,14,0.88) 55%);
    align-items: flex-start;
    text-align: left;
  }
  .dep-overlay-title { font-size: 18px; max-width: 100%; }
  .dep-overlay-pitch { font-size: 11px; max-width: 100%; }
  .dep-hero::after { background: none; }
}

/* ── RevenueStory ───────────────────────────────────────────────── */
.revenue { padding: 120px 0 140px; position: relative; }
.revenue-head { max-width: 1280px; margin-bottom: 100px; display: flex; flex-direction: column; gap: 24px; }
.revenue-h { font-size: clamp(44px, 6vw, 96px); }

.revenue-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}
.revenue-sticky {
  position: sticky;
  top: 14vh;
  height: 72vh;
}
.revenue-visual-stack {
  position: relative;
  height: 100%;
  width: 100%;
}
.revenue-visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  filter: blur(8px);
}
.revenue-visual.active {
  opacity: 1;
  transform: none;
  filter: none;
}

.revenue-beats {
  display: flex;
  flex-direction: column;
  gap: 40vh;
  padding-bottom: 30vh;
}
.moment {
  opacity: 0.28;
  transition: opacity 0.6s var(--ease);
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.moment.is-active { opacity: 1; }
.moment-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.moment-title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.moment-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dim);
}

@media (max-width: 960px) {
  .revenue-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Portrait sticky frame so the iPhone mockup isn't squashed */
  .revenue-sticky { position: relative; top: 0; height: auto; aspect-ratio: 9 / 14; max-height: 70vh; margin-bottom: 40px; }
  .revenue-beats { gap: 80px; padding-bottom: 40px; }
  .moment { opacity: 1; }
  .revenue { padding: 80px 0 80px; }
  .revenue-head { margin-bottom: 60px; }
}
@media (max-width: 640px) {
  .revenue-beats { gap: 56px; }
  .moment { gap: 12px; }
  .moment-body { font-size: 14px; }
  .viz-frame { padding: 40px 16px 18px; border-radius: 10px; }
  .viz-label { top: 12px; left: 12px; font-size: 9px; }
  .viz-pkg-row { grid-template-columns: 1fr; gap: 10px; }
  .viz-pkg-card { padding: 14px 12px; }
  .viz-cal { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .viz-cal-day { padding: 8px 4px 6px; }
  .viz-cal-num { font-size: 16px; }
  .viz-priority-head { flex-direction: column; gap: 6px; }
  .viz-zone-card { padding: 12px; gap: 10px; }
  .viz-zone-thumb { width: 60px; height: 60px; }
  .revenue-sticky { min-height: 280px; }
}

/* Viz styles */
.viz { position: relative; width: 100%; height: 100%; }
.viz-glow {
  position: absolute; inset: -40px;
  background: radial-gradient(ellipse at center, rgba(91,123,255,0.2), transparent 60%);
  filter: blur(30px);
}

/* Phone-mock variant for revenue visuals: hero-style iPhone frame with one screenshot inside. */
.phone-mock-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hide the iOS notch + mock status bar inside our phone mockups — the
   screenshots and hero video already include their own app headers. The
   hero also hides the home-indicator bar: the recording's button row runs
   to the bottom edge, so the bar sat directly on top of the buttons. */
.hero-phone .iphone-notch,
.hero-phone .iphone-status,
.hero-phone .iphone-home,
.revenue-phone .iphone-notch,
.revenue-phone .iphone-status { display: none; }
.revenue-phone .iphone-home {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 10;
}
/* All 4 revenue phones share the iPhone-standard 9/19.5 aspect for a
   consistent device shape across the scroll story. Source videos that
   don't match (rev-1, rev-4 at 0.563 aspect) crop slightly via
   object-fit: cover until they're reshot to the unified aspect. */

/* Give the revenue phones the same 3D slab presence as the hero so the
   landing page reads as one consistent device language. Lighter float +
   shallower tilt so the screenshot stays readable during the scroll story. */
.revenue-sticky { perspective: 1400px; perspective-origin: 50% 45%; }
.phone-mock-wrap { transform-style: preserve-3d; }
.revenue-phone {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-7deg) rotateX(4deg);
  animation: revenueFloat 11s ease-in-out infinite;
}
.revenue-phone::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--iphone-radius) + 10px);
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(91,123,255,0.14), transparent 60%),
    linear-gradient(155deg, #22222a 0%, #0a0a10 45%, #17171f 100%);
  border: 1px solid #0c0c12;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 -60px 100px rgba(0,0,0,0.55),
    0 50px 90px rgba(0,0,0,0.55);
  transform: translateZ(-26px);
  z-index: -2;
  pointer-events: none;
}
.revenue-phone::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--iphone-radius) + 5px);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.12) 0%,
    rgba(48,48,60,0.92) 14%,
    rgba(16,16,22,0.96) 50%,
    rgba(48,48,60,0.92) 86%,
    rgba(255,255,255,0.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.45);
  transform: translateZ(-13px);
  z-index: -1;
  pointer-events: none;
}
.revenue-phone .iphone-body {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 1px 0 0 rgba(255,255,255,0.04),
    inset -1px 0 0 rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 60px rgba(91,123,255,0.10);
}
@keyframes revenueFloat {
  0%, 100% { transform: rotateY(-7deg)  rotateX(4deg) translateY(0)     translateZ(0); }
  50%      { transform: rotateY(-9deg)  rotateX(6deg) translateY(-14px) translateZ(20px); }
}
@media (prefers-reduced-motion: reduce) {
  .revenue-phone { animation: none; }
}
.iphone-shot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--iphone-radius) - 3px);
  z-index: 0;
}
/* Revenue Mechanic reshoots are 510x960 = 17/32. Override the default
   9/19.5 iphone-frame in this context so the screen capture fills the
   device exactly — no letterbox, no side-crop. */
.iphone-frame.revenue-phone {
  aspect-ratio: 17 / 32;
}
.viz-frame {
  position: relative;
  background: #0B0B12;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  height: 100%;
  padding: 50px 28px 28px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7);
}
.viz-label {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}

.viz-map-canvas { position: relative; height: 100%; display: flex; flex-direction: column; }
.viz-map-svg { width: 100%; height: 60%; }
.viz-zone-card {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; gap: 14px;
  background: rgba(255,255,255,0.02);
}
.viz-zone-thumb { width: 80px; height: 80px; flex-shrink: 0; }
.viz-zone-name { font-size: 16px; font-weight: 500; margin-bottom: 2px; }
.viz-zone-meta { font-size: 10px; color: var(--text-muted); letter-spacing: 0.15em; }
.viz-zone-features { font-size: 12px; color: var(--text-dim); margin-top: 8px; display: flex; gap: 6px; }
.viz-zone-cta { margin-top: 10px; font-size: 12px; color: var(--accent); }

.viz-pkg-row { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 12px; }
.viz-pkg-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 14px;
  background: rgba(255,255,255,0.02);
}
.viz-pkg-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(91,123,255,0.08), rgba(91,123,255,0.02));
  box-shadow: 0 0 0 1px rgba(91,123,255,0.3), 0 20px 60px -20px rgba(91,123,255,0.4);
}
.viz-pkg-ribbon {
  position: absolute; top: -1px; right: 12px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border-radius: 0 0 4px 4px;
}
.viz-pkg-name { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.viz-pkg-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.viz-pkg-num { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.viz-pkg-price .mono { font-size: 10px; color: var(--text-muted); }
.viz-pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.viz-pkg-feats li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); }
.viz-pkg-feats svg { color: var(--accent); flex-shrink: 0; }
.viz-pkg-btn {
  margin-top: 14px; padding: 8px 12px; text-align: center;
  background: var(--accent); color: #0a0a0a;
  border-radius: 6px; font-size: 11px; font-weight: 500;
}
.viz-addons { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.viz-addons-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em; margin-bottom: 10px; }
.viz-addons-row { display: flex; gap: 8px; flex-wrap: wrap; }
.viz-addon {
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-dim);
}

.viz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; }
.viz-cal-day {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 6px 8px;
  text-align: center;
  background: rgba(255,255,255,0.02);
}
.viz-cal-dow { font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; }
.viz-cal-num { font-size: 20px; font-weight: 500; margin: 4px 0; }
.viz-cal-tag { font-size: 8px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 2px; }
.viz-cal-price { font-size: 9px; color: var(--text-muted); }
.viz-cal-day.viz-fast { border-color: rgba(91,123,255,0.5); background: rgba(91,123,255,0.06); }
.viz-cal-day.viz-almost { border-color: var(--accent); background: rgba(91,123,255,0.12); box-shadow: 0 0 20px rgba(91,123,255,0.3); }

.viz-price-compare {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.viz-pc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 6px 0; }
.viz-pc-strike { text-decoration: line-through; color: var(--text-muted); }
.viz-pc-online { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; }
.viz-pc-online-val { color: var(--accent); font-weight: 500; font-size: 15px; }
.viz-pc-save { text-align: right; font-size: 10px; color: var(--accent); letter-spacing: 0.2em; margin-top: 6px; }

.viz-sold-banner {
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.viz-sold-banner .mono { font-size: 11px; color: var(--text-muted); letter-spacing: 0.18em; }
.viz-sold-sub { font-size: 13px; color: var(--text-dim); }
.viz-priority-card {
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, rgba(91,123,255,0.08), rgba(91,123,255,0.02));
  border-radius: 10px;
  padding: 16px;
}
.viz-priority-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.viz-priority-title { font-size: 18px; font-weight: 500; }
.viz-priority-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 0.15em; margin-top: 4px; }
.viz-priority-price { font-size: 18px; color: var(--accent); font-weight: 500; }
.viz-priority-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-size: 12px; color: var(--text-dim);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.viz-priority-row svg { color: var(--accent); }
.viz-priority-cta {
  margin-top: 12px;
  padding: 10px;
  background: var(--accent);
  color: #0a0a0a;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}
.viz-data-capture {
  margin-top: 12px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── VenueMapDeep (interactive map + filter + drawer) ──────────── */
.vmd { padding: 120px 0 140px; position: relative; background: linear-gradient(180deg, #07070A 0%, #0A0A10 50%, #07070A 100%); }
.vmd-head { max-width: 900px; margin-bottom: 56px; display: flex; flex-direction: column; gap: 22px; }
.vmd-h { font-size: clamp(44px, 5.5vw, 88px); }
.vmd-sub { max-width: 620px; }
.vmd-stage {
  position: relative;
  max-width: calc(var(--content-max) + 120px);
  margin: 0 auto;
  padding: 0 24px;
  perspective: 1200px;
}

.vmd-canvas {
  position: relative;
  /* Match the dashboard screenshot aspect (≈1.84) so nothing is cropped */
  aspect-ratio: 1.84 / 1;
  border-radius: 16px;
  isolation: isolate;
  border: 1px solid rgba(205, 218, 255, 0.28);
  background: #0B0B12;
  box-shadow:
    0 56px 150px -42px rgba(0,0,0,0.92),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 110px -28px var(--accent-glow),
    0 0 46px -18px rgba(109, 145, 255, 0.7);
  transform: translate3d(0, 0, 0) rotateX(1deg);
  animation: vmdFloat 8s ease-in-out infinite;
  will-change: transform;
}
.vmd-canvas::before,
.vmd-canvas::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.vmd-canvas::before {
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.20), transparent 24%, transparent 74%, rgba(91,123,255,0.14)),
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 18%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.vmd-canvas::after {
  inset: -28px;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 45%, rgba(91,123,255,0.34), transparent 68%);
  filter: blur(18px);
  opacity: 0.72;
}
.vmd-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  z-index: 1;
  background: #0B0B12;
}
.vmd-video {
  object-position: center;
}

@keyframes vmdFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(1deg); }
  50% { transform: translate3d(0, -14px, 0) rotateX(1deg) rotateZ(-0.4deg); }
}

@media (max-width: 960px) {
  .vmd { padding: 80px 0 100px; }
  .vmd-head { margin-bottom: 40px; gap: 18px; }
  .vmd-stage { padding: 0 clamp(12px, 4vw, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .vmd-canvas { animation: none; transform: none; }
}

/* ── OperatorSide (scrolljack: A night of service) ─────────────── */
.ops {
  position: relative;
  background: linear-gradient(180deg, #07070A 0%, #0A0A12 50%, #07070A 100%);
}
.ops-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.ops-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 55%, rgba(91,123,255,0.18), transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(91,123,255,0.1), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.ops-inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.ops-rail { display: flex; flex-direction: column; gap: 40px; }
.ops-rail-head { display: flex; flex-direction: column; gap: 18px; }
.ops-h { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.05; }

.ops-timeline {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  padding-left: 8px;
}
.ops-timeline::before {
  content: '';
  position: absolute;
  left: 50px; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--line);
}
.ops-tl-bar {
  position: absolute;
  left: 50px; top: 12px;
  width: 1px;
  height: calc(100% - 24px);
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.15s linear;
  box-shadow: 0 0 8px var(--accent-glow);
}
.ops-tl-row {
  display: grid;
  grid-template-columns: 44px 14px 1fr;
  align-items: center;
  gap: 0 12px;
  padding: 14px 0;
  opacity: 0.4;
  transition: opacity 0.3s var(--ease);
  position: relative;
}
.ops-tl-row.past { opacity: 0.65; }
.ops-tl-row.on { opacity: 1; }
.ops-tl-time {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-align: right;
}
.ops-tl-row.on .ops-tl-time { color: var(--accent); }
.ops-tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #0B0B12;
  border: 1.5px solid var(--line-strong);
  justify-self: center;
  transition: all 0.3s var(--ease);
  position: relative;
  z-index: 1;
}
.ops-tl-row.past .ops-tl-dot { background: var(--accent-soft); border-color: var(--accent-soft); }
.ops-tl-row.on .ops-tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(91,123,255,0.15), 0 0 16px var(--accent-glow);
  transform: scale(1.25);
}
.ops-tl-label {
  font-size: 14px;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.ops-tl-row.on .ops-tl-label { color: var(--text); font-weight: 500; }
.ops-scroll-hint {
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.3em; color: var(--text-muted);
  padding-left: 8px;
}
.ops-scroll-arrow { animation: opsScrollBob 1.8s ease-in-out infinite; }
@keyframes opsScrollBob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(4px); opacity: 1; }
}

.ops-viewport {
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
}
.ops-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.2em; color: var(--text-muted);
}
.ops-kicker-sep { opacity: 0.4; }
.ops-live { display: flex; align-items: center; gap: 6px; color: #3ECF8E; }
.ops-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3ECF8E; box-shadow: 0 0 8px #3ECF8E;
  animation: opsLivePulse 1.5s ease-in-out infinite;
}
@keyframes opsLivePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.ops-title {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  animation: opsFadeUp 0.5s var(--ease);
}
.ops-body {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 620px;
  animation: opsFadeUp 0.55s var(--ease);
}
@keyframes opsFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.ops-media {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: #0A0A10;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
  animation: opsMediaIn 0.5s var(--ease);
}
@keyframes opsMediaIn {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.ops-media-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: #070709;
  border-bottom: 1px solid var(--line);
}
.ops-media-chrome .vd-dots { display: flex; gap: 6px; }
.ops-media-chrome .vd-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.ops-media-url { flex: 1; text-align: center; font-size: 11px; color: var(--text-muted); }
.ops-media-ph {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border: 0;
  /* Clip the Ken Burns zoom — without this the scaled img paints over the chrome bar. */
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(91,123,255,0.08), transparent 60%),
    linear-gradient(135deg, #0E0E16 0%, #080810 100%);
}
.ops-media-ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ops-media-ph-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}
.ops-media-ph-stage { font-size: 10px; letter-spacing: 0.3em; color: var(--accent); opacity: 0.7; }
.ops-media-ph-title { font-size: 22px; letter-spacing: 0.1em; color: var(--text-dim); }
.ops-media-ph-note { font-size: 12px; max-width: 360px; line-height: 1.5; opacity: 0.7; }
.ops-media-ph-path { font-size: 10px; letter-spacing: 0.15em; margin-top: 8px; color: var(--text-muted); opacity: 0.6; }
.ops-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 2;
  background: #f7f7f8;
  animation: opsFadeUp 0.4s var(--ease), opsKenBurns 18s ease-out forwards;
  will-change: transform;
}
/* Drift direction per stage — data-kb set by app.js on each stage swap.
   Same scale keyframe; the origin decides where the slow pan heads. */
.ops-media-img[data-kb="0"] { transform-origin: 20% 0%; }
.ops-media-img[data-kb="1"] { transform-origin: 80% 35%; }
.ops-media-img[data-kb="2"] { transform-origin: 50% 100%; }
@keyframes opsKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .ops-media-img,
  .ops-mobile-item.reveal.in .ops-mobile-media-img { animation: opsFadeUp 0.4s var(--ease); }
}
.ops-media-img:not([src]),
.ops-media-img[src=""] { display: none; }

.ops-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  animation: opsFadeUp 0.6s var(--ease);
}
.ops-kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 4px;
}
.ops-kpi-k { font-size: 9px; color: var(--text-muted); letter-spacing: 0.2em; }
.ops-kpi-v { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.ops-kpi-sub { font-size: 10px; color: var(--text-dim); letter-spacing: 0.08em; margin-top: 2px; }

/* Mobile fallback: stacked stages, no scrolljack */
.ops-mobile { display: none; }
.ops-mobile-head-wrap { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.ops-mobile-head-h { font-size: clamp(34px, 8vw, 48px); line-height: 1.05; }
.ops-mobile-list { display: flex; flex-direction: column; gap: 56px; }
.ops-mobile-item { display: flex; flex-direction: column; gap: 12px; }
.ops-mobile-head { font-size: 10px; letter-spacing: 0.22em; color: var(--accent); display: flex; gap: 8px; }
.ops-mobile-title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.ops-mobile-body { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.ops-mobile-media { aspect-ratio: 16/9; margin-top: 4px; position: relative; overflow: hidden; }
.ops-mobile-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 2;
  transform-origin: 50% 0%;
}
/* Start the drift only once the card scrolls into view (reveal adds .in). */
.ops-mobile-item.reveal.in .ops-mobile-media-img {
  animation: opsKenBurns 18s ease-out forwards;
  background: #f7f7f8;
}
.ops-mobile-media-img:not([src]),
.ops-mobile-media-img[src=""] { display: none; }

@media (max-width: 960px) {
  #ops-section { height: auto !important; padding: 0; }
  .ops-pin { display: none; }
  .ops-mobile { display: block; padding: 80px 0 100px; }
}
@media (max-width: 640px) {
  .ops-mobile { padding: 60px 0 80px; }
  .ops-mobile-list { gap: 44px; }
  .ops-mobile-title { font-size: 20px; }
}

/* ── MobileFirst ────────────────────────────────────────────────── */
.mf2 { padding: 0; position: relative; }
.mf2-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mf2-text {
  position: absolute;
  top: 14vh;
  left: 0; right: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 3;
  will-change: opacity, transform;
}
.mf2-h {
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.08;
  text-wrap: balance;
  max-width: 700px;
}

.mf2-phone-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mf2-phone-pivot {
  position: relative;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
.mf2-glow {
  position: absolute;
  inset: -80px;
  background: radial-gradient(ellipse at center, rgba(91,123,255,0.3), transparent 60%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.mf2-screen-stack { position: relative; width: 100%; height: 100%; }
.mf2-screen-layer {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease;
}
.mf2-screen-layer:first-child { position: relative; }
.mf2-mockup-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mobile-first phone: screenshots include their own iOS chrome,
   so suppress the wrapper's status/notch/home and let the image
   fill the full frame. Mobile-flow reshoots are 512x962, so override
   the default 9/19.5 to match exactly — no crop, no letterbox. */
#mf2 .iphone-status,
#mf2 .iphone-notch,
#mf2 .iphone-home { display: none; }
#mf2 .iphone-frame {
  aspect-ratio: 512 / 962;
}
#mf2 .iphone-screen {
  margin: 0;
  border-radius: calc(var(--iphone-radius) - 3px);
}

.mf2-screen-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  padding: 8px 14px;
  background: rgba(7, 7, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  transition: opacity 0.3s ease, top 0.3s ease;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .mf2-screen-label { font-size: 10px; padding: 6px 12px; }
}
@media (max-width: 480px) {
  .mf2-screen-label { font-size: 9px; letter-spacing: 0.2em; padding: 5px 10px; }
}
.mf2-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.mf2-stats {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  z-index: 5;
  pointer-events: none;
}
.mf2-stat {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.mf2-sv {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum";
}
.mf2-sl {
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 780px) {
  .mf2-text { top: 8vh; }
  .mf2-stats {
    gap: 0;
    flex-wrap: nowrap;
    perspective: 900px;
  }
  .mf2-stat {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 360px;
    padding: 0 24px;
    gap: 12px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  .mf2-sv { font-size: clamp(80px, 22vw, 128px); }
  .mf2-sl { font-size: 12px; }

  /* Scale phone chrome + screen content proportionally to the phone's
     actual width (set via --iphone-w) so the inside doesn't look chunky
     when the frame shrinks on small viewports. */
  .iphone-frame { --iphone-radius: calc(var(--iphone-w) * 0.17); }
  .iphone-status { padding: 5% 8% 0; font-size: calc(var(--iphone-w) * 0.046); }
  .iphone-status-right { gap: calc(var(--iphone-w) * 0.022); }
  .iphone-battery-body {
    width: calc(var(--iphone-w) * 0.085);
    height: calc(var(--iphone-w) * 0.038);
    border-width: 1px;
  }
  .iphone-battery-tip { height: calc(var(--iphone-w) * 0.02); }
  .iphone-notch {
    width: calc(var(--iphone-w) * 0.345);
    height: calc(var(--iphone-w) * 0.108);
    top: calc(var(--iphone-w) * 0.03);
    border-radius: calc(var(--iphone-w) * 0.06);
  }
  .iphone-home {
    width: calc(var(--iphone-w) * 0.46);
    height: calc(var(--iphone-w) * 0.019);
    margin: calc(var(--iphone-w) * 0.03) auto calc(var(--iphone-w) * 0.038);
  }

  .pm { padding: 6% 5.5% 5.5%; }
  .pm-body { gap: calc(var(--iphone-w) * 0.038); }
  .pm-title { font-size: calc(var(--iphone-w) * 0.07); }
  .pm-sub { font-size: calc(var(--iphone-w) * 0.035); }
  .pm-card { padding: calc(var(--iphone-w) * 0.038); border-radius: calc(var(--iphone-w) * 0.03); }
  .pm-card-title { font-size: calc(var(--iphone-w) * 0.05); }
  .pm-card-meta { font-size: calc(var(--iphone-w) * 0.035); margin-top: calc(var(--iphone-w) * 0.011); }
  .pm-pkg {
    padding: calc(var(--iphone-w) * 0.038);
    border-radius: calc(var(--iphone-w) * 0.03);
  }
  .pm-pkg-name { font-size: calc(var(--iphone-w) * 0.046); }
  .pm-pkg-tag { font-size: max(8px, calc(var(--iphone-w) * 0.028)); margin-top: calc(var(--iphone-w) * 0.008); }
  .pm-pkg-p { font-size: calc(var(--iphone-w) * 0.05); }
  .pm-btn {
    padding: calc(var(--iphone-w) * 0.045);
    font-size: calc(var(--iphone-w) * 0.046);
    border-radius: 999px;
  }
  .pm-check {
    width: calc(var(--iphone-w) * 0.18);
    height: calc(var(--iphone-w) * 0.18);
    font-size: calc(var(--iphone-w) * 0.085);
    margin: calc(var(--iphone-w) * 0.06) auto calc(var(--iphone-w) * 0.015);
  }
  .pm-receipt {
    font-size: calc(var(--iphone-w) * 0.042);
    padding: calc(var(--iphone-w) * 0.046);
    gap: calc(var(--iphone-w) * 0.023);
    border-radius: calc(var(--iphone-w) * 0.03);
    margin-top: calc(var(--iphone-w) * 0.03);
  }
  .pm-qr {
    width: calc(var(--iphone-w) * 0.23);
    height: calc(var(--iphone-w) * 0.23);
  }
}

/* PhoneMockup (pm) */
.pm { height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #0B0B12, #07070A); padding: 16px 14px 14px; }
.pm-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pm-title { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.pm-sub { font-size: 9px; color: var(--text-muted); letter-spacing: 0.15em; }
.pm-map { width: 100%; aspect-ratio: 5/4; border-radius: 10px; background: #0A1220; border: 1px solid var(--line); overflow: hidden; }
.pm-map svg { width: 100%; height: 100%; }
.pm-card { border: 1px solid var(--accent); background: rgba(91,123,255,0.08); border-radius: 8px; padding: 10px; }
.pm-card-title { font-size: 13px; font-weight: 500; }
.pm-card-meta { font-size: 9px; color: var(--accent); letter-spacing: 0.12em; margin-top: 3px; }
.pm-pkg { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.pm-pkg.pm-active { border-color: var(--accent); background: rgba(91,123,255,0.08); }
.pm-pkg-name { font-size: 12px; font-weight: 500; }
.pm-pkg-tag { font-size: 7px; color: var(--accent); letter-spacing: 0.15em; margin-top: 2px; }
.pm-pkg-p { font-size: 13px; color: var(--accent); font-weight: 500; }
.pm-btn { margin-top: auto; padding: 12px; background: var(--accent); color: #0a0a0a; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 500; }
.pm-check { width: 48px; height: 48px; border-radius: 50%; background: rgba(91,123,255,0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 16px auto 4px; }
.pm-receipt { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--text-dim); padding: 12px; border: 1px dashed var(--line); border-radius: 8px; margin-top: 8px; }
.pm-receipt > div { display: flex; justify-content: space-between; }
.pm-total { padding-top: 6px; border-top: 1px solid var(--line); color: var(--text); font-weight: 500; }
.pm-qr { margin-top: auto; width: 60px; height: 60px; align-self: center;
  background-image: repeating-linear-gradient(0deg, #fff 0 3px, transparent 3px 6px), repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px);
  background-color: #000; opacity: 0.7; border-radius: 4px; }

/* ── SocialProof ────────────────────────────────────────────────── */
.sp { padding: 110px 0 100px; position: relative; overflow: hidden; }
.sp-testimonial {
  max-width: 1000px;
  margin: 0 auto 120px;
  position: relative;
  padding: 0 20px;
}
.sp-quote-mark {
  position: absolute;
  top: -40px; left: -30px;
  font-size: 180px;
  color: rgba(91, 123, 255, 0.15);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.sp-testimonial blockquote {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.sp-attrib { display: flex; align-items: center; gap: 14px; }
.sp-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sp-avatar .ph-label { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8px; padding: 2px 4px; }
.sp-name { font-size: 15px; font-weight: 500; }
.sp-role { font-size: 10px; color: var(--text-muted); letter-spacing: 0.18em; margin-top: 2px; }

.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 100px;
}
.sp-stat {
  padding: 40px 24px;
  border-right: 1px solid var(--line);
}
.sp-stat:last-child { border-right: none; }
.sp-stat-num {
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 12px;
}
.sp-stat-label {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}

.sp-logos-head {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 30px;
}
.sp-logo-strip {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.sp-logo-track {
  display: flex;
  gap: 80px;
  animation: logoScroll 40s linear infinite;
  width: max-content;
}
.sp-logo {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.3s;
}
.sp-logo:hover { color: var(--text); }
@keyframes logoScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 780px) {
  .sp { padding: 80px 0 80px; }
  .sp-testimonial { margin: 0 auto 72px; padding: 0; }
  .sp-quote-mark { top: -24px; left: -8px; font-size: 120px; }
  .sp-testimonial blockquote { margin-bottom: 28px; }
  .sp-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 72px; }
  .sp-stat { padding: 28px 16px; }
  .sp-stat:nth-child(even) { border-right: none; }
  .sp-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .sp-logo-track { gap: 44px; }
}
@media (max-width: 480px) {
  .sp-testimonial blockquote { font-size: 22px; line-height: 1.3; }
  .sp-stat { padding: 24px 14px; }
  .sp-stat-label { font-size: 12px; }
}

/* ── FinalCTA ───────────────────────────────────────────────────── */
.fcta {
  padding: 120px 0 140px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.fcta-spotlight {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 140vw); height: min(1100px, 140vw);
  background: radial-gradient(circle, rgba(91,123,255,0.35) 0%, rgba(91,123,255,0.12) 30%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  animation: fctaPulse 6s ease-in-out infinite alternate;
}
@keyframes fctaPulse {
  from { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.fcta-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.fcta-h {
  font-size: clamp(48px, 6.5vw, 104px);
  letter-spacing: -0.04em;
}
.fcta-wrap .subline {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(13px, 1.15vw, 18px);
}
@media (max-width: 900px) {
  .fcta-wrap .subline { white-space: normal; font-size: 14px; }
}
.fcta-btn-wrap { margin-top: 14px; }
.fcta-btn {
  padding: 20px 36px;
  font-size: 17px;
}
.fcta-fine {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3em;
}
@media (max-width: 640px) {
  .fcta { padding: 80px 0 90px; }
  .fcta-wrap { gap: 20px; }
  .fcta-btn { padding: 16px 28px; font-size: 15px; width: 100%; max-width: 320px; }
  .fcta-btn-wrap { margin-top: 6px; width: 100%; display: flex; justify-content: center; }
  .fcta-fine { font-size: 9px; letter-spacing: 0.22em; text-align: center; line-height: 1.6; }
}
@media (max-width: 480px) {
  .fcta { padding: 64px 0 72px; }
  .fcta-fine { letter-spacing: 0.18em; }
}

/* ── Demo Modal ─────────────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(5, 5, 8, 0.75);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s var(--ease);
}
.modal-back[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative;
  width: 100%; max-width: 520px;
  background: #0B0B12;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 60px 140px rgba(0,0,0,0.7), 0 0 80px rgba(91,123,255,0.2);
  animation: modalIn 0.4s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.modal-h { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin-top: 14px; }
.modal-sub { color: var(--text-dim); margin-top: 8px; font-size: 14px; line-height: 1.5; }
.modal-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.field label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em; }
.field input, .field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.2s;
}
.field textarea { resize: vertical; line-height: 1.5; width: 100%; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field-row { display: flex; gap: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chip {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  transition: all 0.2s;
}
.chip:hover { color: var(--text); border-color: var(--text-muted); }
.chip.active {
  background: var(--accent); color: #0a0a0a;
  border-color: var(--accent);
}
.modal-submit { align-self: flex-start; margin-top: 8px; }
.modal-fine { font-size: 9px; color: var(--text-muted); letter-spacing: 0.25em; margin-top: 4px; }
.modal-done { text-align: center; padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.modal-done[hidden] { display: none; }
.modal-check {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(91,123,255,0.15);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(91,123,255,0.3);
}
.modal-done .modal-submit { align-self: center; margin-top: 12px; }
@media (max-width: 640px) {
  .modal-back { padding: 12px; }
  .modal { padding: 28px 22px; border-radius: 14px; }
  .modal-h { font-size: 22px; }
  .modal-sub { font-size: 13px; }
  .field-row { flex-direction: column; gap: 16px; }
  .modal-submit { align-self: stretch; width: 100%; justify-content: center; }
  .modal-done .modal-submit { width: auto; min-width: 140px; }
}
/* ── Contact page ───────────────────────────────────────────────── */
.cth { padding: 180px 0 80px; position: relative; overflow: hidden; }
.cth-atmo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 500px at 20% 0%, rgba(91,123,255,0.22), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90% 30%, rgba(91,123,255,0.12), transparent 60%);
}
.cth-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; max-width: 960px; }
.cth-h { font-size: clamp(52px, 7vw, 108px); letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }

.cg { padding: 40px 0 120px; }
.cg-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .cg-wrap { grid-template-columns: 1fr; } }

.cg-form {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 44px;
}
.cg-form-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.cg-form-title { font-size: 30px; letter-spacing: -0.02em; font-weight: 500; }

.cg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
@media (max-width: 560px) { .cg-row { grid-template-columns: 1fr; } }
.cg-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.cg-lbl { font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em; }
.cg-field input, .cg-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 0 10px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
  resize: vertical;
}
.cg-field input:focus, .cg-field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.cg-field input::placeholder, .cg-field textarea::placeholder { color: var(--text-muted); }

.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-family: inherit;
}
.cg-chip:hover { color: var(--text); border-color: var(--line-strong); }
.cg-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  font-weight: 500;
}

.cg-submit { margin-top: 14px; }
.cg-fine {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.22em;
  margin-top: 20px;
}

.cg-sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 80px 20px; }
.cg-sent[hidden] { display: none; }
.cg-check {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(91,123,255,0.15); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 40px rgba(91,123,255,0.3);
  margin-bottom: 8px;
}
.cg-sent-title { font-size: 28px; letter-spacing: -0.02em; font-weight: 500; }
.cg-sent-sub { font-size: 14px; color: var(--text-dim); max-width: 360px; line-height: 1.6; margin-bottom: 14px; }

.cg-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
@media (max-width: 900px) { .cg-rail { position: static; } }
.cg-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.cg-card-head { font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em; }
.cg-card-line { font-size: 14px; color: var(--text); transition: color 0.2s; }
.cg-card-line:hover { color: var(--accent); }
.cg-card-dim { color: var(--text-dim); font-size: 13px; }

.cg-office { display: flex; flex-direction: column; gap: 4px; }
.cg-office-city { font-size: 10px; color: var(--accent); letter-spacing: 0.22em; font-family: 'Geist Mono', monospace; }
.cg-office-addr { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

.cg-card-hours { background: linear-gradient(180deg, rgba(91,123,255,0.05), rgba(91,123,255,0.01)); border-color: rgba(91,123,255,0.2); }
.cg-hours-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 13px; color: var(--text-dim); }
.cg-hours-grid span:nth-child(odd) { color: var(--text-muted); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; }
.cg-hours-sla {
  display: flex; align-items: center; gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
}
.cg-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3ECF8E;
  box-shadow: 0 0 0 0 rgba(62,207,142,0.5);
  animation: navPulse 2s ease-in-out infinite;
}

.cfaq { padding: 100px 0 140px; border-top: 1px solid var(--line); }
.cfaq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
@media (max-width: 900px) { .cfaq-wrap { grid-template-columns: 1fr; } }
.cfaq-h { font-size: clamp(36px, 4.2vw, 64px); letter-spacing: -0.03em; line-height: 1.05; }
.cfaq-left { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
@media (max-width: 900px) { .cfaq-left { position: static; } }

.cfaq-row {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
  transition: all 0.2s;
}
.cfaq-row:last-child { border-bottom: 1px solid var(--line); }
.cfaq-row:hover { padding-left: 4px; }
.cfaq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.cfaq-toggle {
  font-size: 22px;
  color: var(--accent);
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.cfaq-row.open .cfaq-toggle { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.cfaq-a {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 620px;
}
.cfaq-a[hidden] { display: none; }

/* ── Cookie Consent ──────────────────────────────────────────────────── */
.cc-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  max-width: 720px;
  margin: 0 auto;
  z-index: 2000;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: rgba(11, 11, 16, 0.92);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: ccSlideUp 0.5s var(--ease);
}
.cc-banner[hidden] { display: none; }
@keyframes ccSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.cc-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.cc-banner-head::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.cc-banner-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.cc-banner-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.cc-banner-body a:hover { text-decoration-color: var(--accent); }
.cc-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cc-btn-primary {
  background: var(--accent);
  color: #0a0a0a;
}
.cc-btn-primary:hover { transform: translateY(-1px); }
.cc-btn-ghost {
  color: var(--text-dim);
  border-color: var(--line-strong);
}
.cc-btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.28); }
.cc-btn-link {
  color: var(--text-dim);
  padding: 11px 8px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.cc-btn-link:hover { color: var(--text); text-decoration-color: var(--accent); }

@media (max-width: 640px) {
  .cc-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
  .cc-banner-actions { flex-direction: column; align-items: stretch; }
  .cc-btn { width: 100%; }
}

/* Preferences modal */
.cc-prefs {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ccFadeIn 0.3s var(--ease);
}
.cc-prefs[hidden] { display: none; }
@keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cc-prefs-inner {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: linear-gradient(180deg, #111118, #0B0B10);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  animation: ccPrefsIn 0.4s var(--ease);
}
@keyframes ccPrefsIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.cc-prefs-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.cc-prefs-close:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.cc-prefs-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cc-prefs-kicker::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.cc-prefs-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 12px;
  color: var(--text);
}
.cc-prefs-sub {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 8px;
}
.cc-prefs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.cc-cat {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 16px;
  background: rgba(255, 255, 255, 0.015);
}
.cc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cc-cat-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.cc-cat-desc {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 6px;
}
.cc-cat-vendors {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 8px;
}
.cc-locked {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Toggle switch */
.cc-switch {
  position: relative;
  display: inline-block;
  width: 38px; height: 22px;
  flex-shrink: 0;
}
.cc-switch input {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}
.cc-switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
}
.cc-switch-slider::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.cc-switch input:checked + .cc-switch-slider {
  background: var(--accent);
  border-color: var(--accent);
}
.cc-switch input:checked + .cc-switch-slider::before {
  transform: translateX(16px);
  background: #0a0a0a;
}
.cc-switch input:focus-visible + .cc-switch-slider {
  box-shadow: 0 0 0 3px rgba(91, 123, 255, 0.3);
}

.cc-prefs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  justify-content: flex-end;
}
.cc-prefs-actions .cc-btn { flex: 0 1 auto; }

@media (max-width: 560px) {
  .cc-prefs-inner { padding: 22px 18px 18px; }
  .cc-prefs-actions { flex-direction: column-reverse; }
  .cc-prefs-actions .cc-btn { width: 100%; }
}

/* Footer link */
.foot-cc-link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* ── Real media drop-ins (from clubtechglobal.com) ──────────────────── */
/* Phone / iphone-screen fills with mobile hero image or video */
.iphone-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #0B0B14;
}

/* Revenue story desktop visuals — single image per beat */
.viz-desktop .viz-frame {
  padding: 50px 0 0;               /* keep the label floating, no side padding */
  display: flex;
  flex-direction: column;
}
.viz-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 0 28px 28px;
  background: transparent;
}

/* Operator dashboard — swap the custom HTML grid for the desktop image */
.dash-img-wrap {
  position: relative;
  display: block;
  padding: 0;
  background: #0B0B12;
  width: 100%;
  height: 100%;
}
.dash-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

/* ── Testimonial quote: word-by-word reveal ──────────────────────────── */
.sp-quote .sp-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease),
    filter 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 30ms);
}
.sp-testimonial.in .sp-quote .sp-word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.sp-quote-mark {
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.sp-testimonial.in .sp-quote-mark {
  animation: spQuotePulse 3.2s var(--ease) 0.4s infinite;
}
@keyframes spQuotePulse {
  0%, 100% { transform: translateY(0); text-shadow: 0 0 0 rgba(91,123,255,0); }
  50%      { transform: translateY(-4px); text-shadow: 0 0 24px var(--accent-glow); }
}

/* Accent shimmer that sweeps once when the quote comes in */
.sp-quote::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(91,123,255,0.14) 50%, transparent 60%, transparent 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  mix-blend-mode: screen;
  opacity: 0;
}
.sp-quote { position: relative; }
.sp-testimonial.in .sp-quote::after {
  animation: spQuoteShimmer 2s var(--ease) 0.8s 1 forwards;
}
@keyframes spQuoteShimmer {
  0%   { opacity: 0; background-position: 0% 0%; }
  15%  { opacity: 1; }
  100% { opacity: 0; background-position: 200% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-quote .sp-word { opacity: 1; filter: none; transform: none; transition: none; }
  .sp-testimonial.in .sp-quote-mark { animation: none; }
  .sp-testimonial.in .sp-quote::after { animation: none; }
}

/* ── Workflow timeline (full-funnel ad workflow) ──────────────── */
.wf { padding: 120px 0 60px; position: relative; }
.wf-head { max-width: 900px; margin: 0 auto 80px; display: flex; flex-direction: column; gap: 22px; }
.wf-h    { font-size: clamp(44px, 5.5vw, 88px); }
.wf-sub  { max-width: 640px; }

.wf-timeline {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.wf-step {
  display: grid;
  grid-template-columns: 56px 1px 1fr;
  gap: 28px;
  align-items: start;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.wf-step.in-view { opacity: 1; transform: none; }
.wf-step-num {
  font-size: 28px;
  letter-spacing: 0.15em;
  color: var(--accent);
  opacity: 0.7;
  line-height: 1;
  padding-top: 2px;
}
.wf-step-rail {
  position: relative;
  width: 1px;
  align-self: stretch;
  min-height: 100%;
}
/* Drawn line — grows on .in-view */
.wf-step-rail::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, var(--line-strong), var(--line) 60%, transparent);
  transition: height 0.9s var(--ease) 0.15s;
}
.wf-step.in-view .wf-step-rail::after { height: 100%; }
.wf-step:last-child .wf-step-rail::after { display: none; }
/* Node dot */
.wf-step-rail::before {
  content: '';
  position: absolute;
  top: 6px; left: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(91,123,255,0.18), 0 0 18px var(--accent-glow);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s var(--ease) 0.05s, transform 0.45s var(--ease) 0.05s;
}
.wf-step.in-view .wf-step-rail::before { opacity: 1; transform: scale(1); }
.wf-step-body { display: flex; flex-direction: column; gap: 12px; max-width: 620px; padding-bottom: 8px; }
.wf-step-kicker { font-size: 10px; color: var(--accent); letter-spacing: 0.22em; }
.wf-step-title  { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.wf-step-text   { font-size: 16px; line-height: 1.6; color: var(--text-dim); }
.wf-step-tag {
  align-self: start;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(11,11,18,0.4);
  margin-top: 4px;
}

.wf-foot { margin-top: 80px; text-align: center; }
.wf-pullquote {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .wf { padding: 80px 0 100px; }
  .wf-head { margin-bottom: 50px; }
  .wf-timeline { gap: 44px; }
  .wf-step { grid-template-columns: 38px 1px 1fr; gap: 18px; }
  .wf-step-num { font-size: 20px; }
  .wf-step-title { font-size: 22px; }
  .wf-step-text { font-size: 14px; }
}

/* ── Legal pages (privacy, cookies) ────────────────────────────── */
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted);
  margin-top: 4px;
}
.legal-cta-row { margin-top: 8px; }

.legal { padding: 40px 0 120px; position: relative; }
.legal-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.legal-toc-head {
  font-size: 10px; letter-spacing: 0.22em; color: var(--text-muted);
  margin-bottom: 14px;
}
.legal-toc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  counter-reset: legal-toc;
}
.legal-toc-list li { counter-increment: legal-toc; }
.legal-toc-list a {
  display: block;
  font-size: 13px; line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.legal-toc-list a::before {
  content: counter(legal-toc, decimal-leading-zero) "  ";
  color: var(--text-dim, rgba(255,255,255,0.25));
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.legal-toc-list a:hover { color: var(--text); }

.legal-body {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.legal-body p { margin: 0 0 1.1em; color: var(--text-muted); }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
.legal-body a:hover { border-bottom-color: var(--accent); }
.legal-body code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.legal-section { scroll-margin-top: 100px; padding-top: 8px; margin-top: 48px; }
.legal-section:first-of-type { margin-top: 8px; }
.legal-section h2 {
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 18px;
  font-weight: 500;
}
.legal-section h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 28px 0 10px;
  font-weight: 500;
}
.legal-body ul,
.legal-body ol {
  margin: 0 0 1.1em;
  padding-left: 22px;
  color: var(--text-muted);
}
.legal-body li { margin-bottom: 0.5em; }

.legal-callout {
  display: block;
  padding: 16px 20px;
  margin-bottom: 36px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.legal-callout strong { color: var(--text); }

.legal-note {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 16px;
  margin: 8px 0 1.3em;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.015);
  border-radius: 0 8px 8px 0;
}

.legal-table-scroll { overflow-x: auto; margin: 0 0 1.1em; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-muted);
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table th {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  background: rgba(255,255,255,0.02);
}
.legal-table-placeholder { font-style: italic; color: var(--text-muted); }
.legal-table code { font-size: 12px; }

.legal-address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 1.1em;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.legal-address a { border-bottom-color: rgba(255,255,255,0.12); }

.legal-related {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.22em;
}
.legal-related a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.legal-related a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc {
    position: static;
    padding: 18px 18px;
  }
  .legal-section h2 { font-size: 22px; }
  .legal-section h3 { font-size: 16px; }
  .legal-body { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER · shared
   Helpers used across the inner pages (platform / packages /
   analytics / ads-workflow / operations / mobile).
   ═══════════════════════════════════════════════════════════════ */

.section-deep-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  margin-top: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.section-deep-link:hover {
  color: var(--accent-soft);
  border-color: var(--accent);
  background: rgba(91, 123, 255, 0.08);
}
.section-deep-link .section-deep-arrow {
  transition: transform 0.25s var(--ease);
  color: var(--accent-soft);
}
.section-deep-link:hover .section-deep-arrow {
  transform: translateX(4px);
}
.wf-head .section-deep-link { align-self: center; }

/* Full-viewport-width breakout helper — escapes a centered .wrap container */
.inner-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (max-width: 640px) {
  .section-deep-link { font-size: 10px; padding: 10px 16px; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER · platform.html
   ═══════════════════════════════════════════════════════════════ */

/* shared H2 sizing across all pf-* sections */
.pf-h {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 36px;
}
.pf-mono-inline {
  font-size: 0.9em;
  background: rgba(255,255,255,0.05);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* Hero: split text + fan */
.p-platform .cth { padding: 180px 0 60px; }
.pf-hero-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--content-max);
}
.pf-hero-text .cth-h { font-size: clamp(44px, 6vw, 96px); }
.pf-hero-cta { display: flex; gap: 14px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.pf-hero-cta .btn-ghost {
  display: inline-flex; align-items: center;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pf-hero-cta .btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }

/* Bespoke A — fan of 3 venue dashboards */
.pf-fan {
  position: relative;
  width: 100%;
  height: 480px;
  perspective: 1600px;
  transform-style: preserve-3d;
}
.pf-fan-card {
  position: absolute;
  inset: 0;
  width: 88%;
  height: 88%;
  left: 6%;
  top: 6%;
  transition: transform 1.4s var(--ease), opacity 1.4s var(--ease);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
}
.pf-fan-card .vd-frame {
  height: 100%;
  background: var(--bg-1);
  border-radius: 16px;
}
.pf-fan-1 { transform: translate(-8%, 6%) rotate(-6deg); z-index: 3; }
.pf-fan-2 { transform: translate(0, -2%) rotate(-1deg); z-index: 2; opacity: 0.88; }
.pf-fan-3 { transform: translate(8%, -10%) rotate(4deg); z-index: 1; opacity: 0.75; }
.pf-fan.in .pf-fan-1 { transform: translate(-14%, 12%) rotate(-9deg); }
.pf-fan.in .pf-fan-2 { transform: translate(0, 0) rotate(0); }
.pf-fan.in .pf-fan-3 { transform: translate(14%, -16%) rotate(7deg); }
.pf-fan-body {
  height: 100%;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(160deg, rgba(91,123,255,0.18), rgba(91,123,255,0.04) 60%);
}
.pf-fan-body--luna { background: linear-gradient(160deg, rgba(214,168,95,0.22), rgba(214,168,95,0.04) 60%); }
.pf-fan-body--sol { background: linear-gradient(160deg, rgba(232,93,93,0.22), rgba(232,93,93,0.04) 60%); }
.pf-fan-brand { font-size: 10px; letter-spacing: 0.22em; color: var(--text-dim); }
.pf-fan-headline { font-size: 16px; line-height: 1.2; font-weight: 500; color: var(--text); }
/* Venue platform screenshot filling the card's media area. Same shots the
   landing-page shape-shifter uses (assets/{finns,luna,sol}.webp). Height is
   zoomed past cover (auto 118%) so the screenshot's own white top chrome can
   be cropped out via background-position. */
.pf-fan-shot {
  margin-top: auto;
  flex: 1;
  min-height: 0;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  background-repeat: no-repeat;
  background-size: auto 118%;
  background-position: 50% 82%;
}
/* FINNS + Luna zoom further (132%) so both the top chrome AND the bottom
   venue-pill bar of the screenshots fall outside the crop. */
.pf-fan-body--finns .pf-fan-shot { background-image: url('assets/finns.webp'); background-size: auto 132%; background-position: 50% 42%; }
.pf-fan-body--luna .pf-fan-shot { background-image: url('assets/luna.webp'); background-size: auto 132%; background-position: 50% 45%; }
/* Sol's shot has a white list sidebar on the left third — crop to the map. */
.pf-fan-body--sol .pf-fan-shot { background-image: url('assets/sol.webp'); background-position: 85% 60%; }

/* "Your venue. Your brand." three-bullet section */
.pf-bullets-section { padding: 100px 0 60px; }
.pf-bullets {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}
.pf-bullet {
  padding: 28px 22px;
  border-left: 1px solid var(--line-strong);
}
.pf-bullet-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 18px;
}
.pf-bullet p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
.pf-bullet em { font-style: italic; color: var(--text); }

/* Bespoke B — Brand-Skin Switcher */
.pf-skin {
  padding: 100px 0 120px;
  position: relative;
}
.pf-skin-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pf-skin-controls {
  display: inline-flex;
  gap: 6px;
  margin: 36px 0 32px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pf-skin-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-dim);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
  user-select: none;
}
.pf-skin-tab:hover { color: var(--text); }
.pf-skin-tab-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pf-skin-tab[data-skin="finns"] .pf-skin-tab-dot { background: #5B7BFF; }
.pf-skin-tab[data-skin="luna"] .pf-skin-tab-dot { background: #D6A85F; }
.pf-skin-tab[data-skin="sol"] .pf-skin-tab-dot { background: #E85D5D; }

/* active tab + active stage variant */
.pf-skin:has(#pf-skin-finns:checked) .pf-skin-tab[data-skin="finns"],
.pf-skin:has(#pf-skin-luna:checked) .pf-skin-tab[data-skin="luna"],
.pf-skin:has(#pf-skin-sol:checked) .pf-skin-tab[data-skin="sol"] {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.pf-skin:has(#pf-skin-finns:checked) .pf-skin-tab[data-skin="finns"] .pf-skin-tab-dot { box-shadow: 0 0 12px #5B7BFF; }
.pf-skin:has(#pf-skin-luna:checked) .pf-skin-tab[data-skin="luna"] .pf-skin-tab-dot { box-shadow: 0 0 12px #D6A85F; }
.pf-skin:has(#pf-skin-sol:checked) .pf-skin-tab[data-skin="sol"] .pf-skin-tab-dot { box-shadow: 0 0 12px #E85D5D; }

.pf-skin [data-skin] { display: none; }
.pf-skin:has(#pf-skin-finns:checked) [data-skin="finns"] { display: contents; }
.pf-skin:has(#pf-skin-luna:checked) [data-skin="luna"] { display: contents; }
.pf-skin:has(#pf-skin-sol:checked) [data-skin="sol"] { display: contents; }
.pf-skin:has(#pf-skin-finns:checked) .pf-skin-body[data-skin="finns"] { display: block; }
.pf-skin:has(#pf-skin-luna:checked) .pf-skin-body[data-skin="luna"] { display: block; }
.pf-skin:has(#pf-skin-sol:checked) .pf-skin-body[data-skin="sol"] { display: block; }

/* skin-accent variable swap */
.pf-skin:has(#pf-skin-finns:checked) .pf-skin-stage {
  --skin-accent: #5B7BFF;
  --skin-accent-soft: rgba(91,123,255,0.18);
  --skin-glow: rgba(91,123,255,0.4);
  --skin-bg-grad: linear-gradient(160deg, rgba(91,123,255,0.12), transparent 65%);
}
.pf-skin:has(#pf-skin-luna:checked) .pf-skin-stage {
  --skin-accent: #D6A85F;
  --skin-accent-soft: rgba(214,168,95,0.18);
  --skin-glow: rgba(214,168,95,0.4);
  --skin-bg-grad: linear-gradient(160deg, rgba(214,168,95,0.14), transparent 65%);
}
.pf-skin:has(#pf-skin-sol:checked) .pf-skin-stage {
  --skin-accent: #E85D5D;
  --skin-accent-soft: rgba(232,93,93,0.18);
  --skin-glow: rgba(232,93,93,0.4);
  --skin-bg-grad: linear-gradient(160deg, rgba(232,93,93,0.14), transparent 65%);
}

.pf-skin-stage {
  position: relative;
  margin-top: 24px;
  transition: filter 0.6s var(--ease);
}
.pf-skin-frame {
  background: var(--bg-1);
  border-radius: 16px;
  box-shadow: 0 60px 120px -40px var(--skin-glow, rgba(91,123,255,0.4));
  transition: box-shadow 0.6s var(--ease);
  overflow: hidden;
}
.pf-skin-frame .vd-chrome { background: rgba(0,0,0,0.4); }
.pf-skin-url {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}
.pf-skin-url span { display: none; }
.pf-skin:has(#pf-skin-finns:checked) .pf-skin-url span[data-skin="finns"] { display: inline; }
.pf-skin:has(#pf-skin-luna:checked) .pf-skin-url span[data-skin="luna"] { display: inline; }
.pf-skin:has(#pf-skin-sol:checked) .pf-skin-url span[data-skin="sol"] { display: inline; }
.pf-skin-body {
  display: none;
  padding: 48px 40px 36px;
  background: var(--skin-bg-grad);
  transition: background 0.6s var(--ease);
}
.pf-skin-hero {
  margin-bottom: 36px;
}
.pf-skin-brand-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.pf-skin-brand-mark {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--skin-accent);
  color: white;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 8px 20px -4px var(--skin-glow);
}
.pf-skin-brand-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pf-skin-hero-h {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
}
.pf-skin-hero-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 540px;
}
.pf-skin-zones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.pf-skin-zone {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 14px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.pf-skin-zone:hover {
  border-color: var(--skin-accent);
  background: var(--skin-accent-soft);
}
.pf-skin-zone-tag {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.pf-skin-zone-name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}
.pf-skin-zone-meta {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.pf-skin-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pf-skin-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
.pf-skin-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--skin-accent);
  color: white;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.2s var(--ease);
}
.pf-skin-btn:hover { filter: brightness(1.1); }

.pf-skin-caption {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: baseline;
}
.pf-skin-caption-label { color: var(--text-dim); }
.pf-skin-caption-val { color: var(--text); }
.pf-skin-caption-dim { color: var(--text-muted); }

/* Designed to sell — two-column */
.pf-sell { padding: 80px 0; border-top: 1px solid var(--line); }
.pf-sell-wrap {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.pf-sell-right { display: flex; flex-direction: column; gap: 18px; }
.pf-sell-body {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}
.pf-sell-right .section-deep-link { align-self: flex-start; margin-top: 18px; }

/* Bespoke C — Multi-tenant data isolation diagram */
.pf-mt { padding: 100px 0; }
.pf-mt-diagram {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 0;
  height: 380px;
  position: relative;
}
.pf-mt-lane {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 80%);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.pf-mt-lane--finns { --lane-accent: #5B7BFF; }
.pf-mt-lane--luna  { --lane-accent: #D6A85F; }
.pf-mt-lane--sol   { --lane-accent: #E85D5D; }
.pf-mt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px;
  border-bottom: 1px solid var(--line);
}
.pf-mt-brand {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text);
}
.pf-mt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lane-accent);
  box-shadow: 0 0 12px var(--lane-accent);
  animation: pfMtPulse 2.4s infinite ease-in-out;
}
.pf-mt-lane--luna .pf-mt-dot { animation-delay: 0.5s; }
.pf-mt-lane--sol .pf-mt-dot { animation-delay: 1s; }
@keyframes pfMtPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
.pf-mt-pipe {
  flex: 1;
  position: relative;
  padding: 24px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pf-mt-pipe::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--lane-accent) 20%, var(--lane-accent) 80%, transparent);
  opacity: 0.35;
  transform: translateX(-50%);
}
.pf-mt-pipe-flow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--lane-accent), transparent);
  transform: translateX(-50%);
  animation: pfMtFlow 3.6s infinite linear;
  filter: blur(3px);
  border-radius: 4px;
}
.pf-mt-lane--luna .pf-mt-pipe-flow { animation-delay: 1.2s; }
.pf-mt-lane--sol .pf-mt-pipe-flow { animation-delay: 2.4s; }
@keyframes pfMtFlow {
  0% { top: -30%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.pf-mt-pipe-tag {
  position: relative;
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  align-self: flex-start;
  width: fit-content;
}
.pf-mt-pipe-tag:nth-child(3) { align-self: flex-end; }
.pf-mt-lake {
  padding: 22px 18px;
  background: linear-gradient(180deg, transparent, var(--lane-accent) 200%);
  border-top: 1px solid var(--line);
  position: relative;
}
.pf-mt-lake::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, var(--lane-accent), transparent 70%);
  opacity: 0.18;
}
.pf-mt-lake-label {
  position: relative;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text);
}
.pf-mt-boundary {
  position: relative;
  align-self: stretch;
}
.pf-mt-boundary::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
  transform: translateX(-50%);
}
.pf-mt-boundary::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--text-muted);
}
.pf-mt-foot {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.pf-mt-foot-fact { text-align: center; }
.pf-mt-foot-num {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 8px;
}
.pf-mt-foot-lbl {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

/* Venues zigzag */
.pf-venues { padding: 100px 0; border-top: 1px solid var(--line); }
.pf-venues-list { display: flex; flex-direction: column; gap: 100px; margin-top: 40px; }
.pf-venue {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.pf-venue--mirror { direction: rtl; }
.pf-venue--mirror > * { direction: ltr; }
.pf-venue-media {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.pf-venue-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.pf-venue:hover .pf-venue-media img { transform: scale(1.04); }
.pf-venue-name {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.pf-venue-meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 22px;
  line-height: 1.6;
}
.pf-venue-tagline {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent-soft);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  font-style: italic;
}
.pf-venue-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Integrations */
.pf-int { padding: 100px 0 140px; border-top: 1px solid var(--line); }
.pf-int-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pf-int-class {
  padding: 28px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pf-int-class:hover { border-color: var(--accent); transform: translateY(-3px); }
.pf-int-class-head {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 16px;
}
.pf-int-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.pf-int-logo {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
}
.pf-int-class-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Responsive */
@media (max-width: 960px) {
  .pf-hero-wrap { grid-template-columns: 1fr; gap: 40px; }
  .pf-fan { height: 380px; max-width: 480px; margin: 0 auto; }
  .pf-bullets { grid-template-columns: 1fr; gap: 20px; }
  .pf-bullet { border-left: none; border-top: 1px solid var(--line-strong); padding-top: 22px; }
  .pf-sell-wrap { grid-template-columns: 1fr; gap: 32px; }
  .pf-mt-diagram { height: auto; grid-template-columns: 1fr; gap: 16px; }
  .pf-mt-boundary { display: none; }
  .pf-mt-pipe { padding: 20px; min-height: 140px; }
  .pf-mt-foot { grid-template-columns: 1fr; gap: 16px; }
  .pf-venue { grid-template-columns: 1fr; gap: 24px; }
  .pf-venue--mirror { direction: ltr; }
  .pf-int-grid { grid-template-columns: 1fr 1fr; }
  .pf-skin-zones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .p-platform .cth { padding: 140px 0 40px; }
  .pf-skin-controls { width: 100%; justify-content: stretch; }
  .pf-skin-tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 11px; }
  .pf-skin-body { padding: 28px 22px 22px; }
  .pf-skin-zones { grid-template-columns: 1fr; }
  .pf-skin-cta-row { flex-direction: column; align-items: stretch; }
  .pf-skin-btn { justify-content: center; }
  .pf-int-grid { grid-template-columns: 1fr; }
  .pf-venues-list { gap: 60px; }
  .pf-skin-caption { flex-wrap: wrap; justify-content: flex-start; }
  .pf-mt { padding: 60px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER · revenue.html
   ═══════════════════════════════════════════════════════════════ */

.pk-h {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 36px;
}

.p-revenue .cth { padding: 180px 0 60px; }
.pk-hero-wrap { max-width: 1100px; }
.pk-hero-stat {
  margin-top: 56px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 36px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(91,123,255,0.08), transparent 70%);
}
.pk-hero-stat-num {
  font-size: clamp(72px, 9vw, 136px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent-soft);
}
.pk-hero-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

/* Bespoke A — Compounding Stack (math-equation grid) */
.pk-compound { padding: 100px 0 60px; border-top: 1px solid var(--line); }

.pk-stack-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 64px;
}
.pk-stack-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px;
  background: linear-gradient(180deg, rgba(91,123,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.pk-stack-tile:hover {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(91,123,255,0.09), rgba(255,255,255,0.02));
  transform: translateY(-2px);
}
.pk-stack-op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  user-select: none;
}
.pk-stack-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.pk-stack-title {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  flex: 1;
}
.pk-stack-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pk-stack-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 56px;
  padding: 40px 32px;
  background: radial-gradient(ellipse at 50% 0%, rgba(91,123,255,0.10), transparent 70%);
  border-top: 1px solid var(--line);
}
.pk-stack-result-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.pk-stack-result-line {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.pk-stack-sep { color: var(--text-muted); }

/* Bespoke B — Full-bleed alternating rows */
.pk-bleed { padding: 100px 0 60px; border-top: 1px solid var(--line); }
.pk-bleed-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.pk-bleed-row--mirror { direction: rtl; }
.pk-bleed-row--mirror > * { direction: ltr; }
.pk-bleed-media .vd-frame {
  background: var(--bg-1);
  box-shadow: 0 60px 120px -40px rgba(91,123,255,0.3);
  border-radius: 14px;
  overflow: hidden;
}
.pk-bleed-frame .vd-body {
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
/* All revenue-mechanic reshoots are 510x960 = 17/32. Frame matches the
   video's native ratio so object-fit: cover fills cleanly with no crop. */
.pk-bleed-row--ar-17-32 .pk-bleed-frame .vd-body { aspect-ratio: 17 / 32; }
/* Portrait videos look better not stretched to the full media column —
   constrain the frame to a phone-ish width. */
.pk-bleed-row--ar-17-32 .pk-bleed-media {
  max-width: 360px;
  margin-inline: auto;
}
.pk-bleed-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Revenue mechanics render in phone mockups (matching the landing page
   device language) rather than a desktop browser frame. The wrapper
   supplies the 3D perspective the floating .revenue-phone needs. */
.pk-phone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
.pk-bleed-num {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 14px;
}
.pk-bleed-h {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  color: var(--text);
}
.pk-bleed-body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.pk-bleed-why {
  padding: 18px 20px;
  border-left: 2px solid var(--accent);
  background: rgba(91,123,255,0.05);
  border-radius: 0 8px 8px 0;
}
.pk-bleed-why-lbl {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent-soft);
  margin-bottom: 8px;
}
.pk-bleed-why-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

/* Bespoke C — AOV bars */
.pk-aov { padding: 120px 0 140px; border-top: 1px solid var(--line); }
.pk-aov-bars {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.pk-aov-bar {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: 28px;
  align-items: center;
}
.pk-aov-bar-lbl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pk-aov-bar-lbl-main {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.pk-aov-bar-lbl-sub {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}
.pk-aov-bar-track {
  height: 64px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.pk-aov-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 8px;
  transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-aov-bar-fill--walkin {
  background: linear-gradient(90deg, rgba(164, 164, 170, 0.45), rgba(164, 164, 170, 0.18));
}
.pk-aov-bar-fill--prebooked {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  box-shadow: 0 0 30px var(--accent-glow);
}
.pk-aov-bars.in .pk-aov-bar-fill--walkin { width: 33%; }
.pk-aov-bars.in .pk-aov-bar-fill--prebooked { width: 63%; }
.pk-aov-bar-val {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.pk-aov-bar-val > span:first-child {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
}
.pk-aov-bar-val-sub {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}
.pk-aov-note {
  margin-top: 48px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 720px;
}

@media (max-width: 960px) {
  .pk-bleed-row { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .pk-bleed-row--mirror { direction: ltr; }
  .pk-stack-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pk-stack-op { display: none; }
  .pk-aov-bar { grid-template-columns: 1fr; gap: 12px; }
  .pk-aov-bar-val { text-align: left; }
}
@media (max-width: 640px) {
  .p-revenue .cth { padding: 140px 0 40px; }
  .pk-hero-stat { padding: 22px 22px; }
  .pk-hero-stat-num { font-size: 64px; }
  .pk-stack-row { grid-template-columns: 1fr; }
  .pk-stack-tile { padding: 20px 18px; }
  .pk-stack-result { padding: 28px 20px; margin-top: 36px; }
  .pk-bleed { padding: 60px 0; }
  .pk-aov { padding: 60px 0 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER · analytics.html
   ═══════════════════════════════════════════════════════════════ */

.an-h {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 30px;
}

/* Hero with Dashboard Wall */
.p-analytics .cth { padding: 180px 0 60px; }
.an-hero-wrap {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
  max-width: var(--content-max);
}
.an-hero-text .cth-h { font-size: clamp(44px, 5.6vw, 84px); }

/* Hero media — real dashboard screenshot framed in browser chrome */
.an-hero-media { min-width: 0; perspective: 1400px; }
.an-hero-media .ops-shot-frame {
  box-shadow: 0 60px 120px -40px rgba(91,123,255,0.35), 0 1px 0 rgba(255,255,255,0.04);
}

/* KPI strip — real dashboard headline metrics */
.an-kpi { padding: 60px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.an-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.an-kpi-grid--five { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.an-kpi-stat {
  text-align: center;
  padding: 20px;
}
.an-kpi-num {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 12px;
}
.an-kpi-grid--five .an-kpi-num { font-size: clamp(22px, 2.5vw, 34px); }
.an-kpi-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}
.an-kpi-cap {
  text-align: center;
  margin-top: 28px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-muted);
}


/* Responsive */
@media (max-width: 960px) {
  .an-hero-wrap { grid-template-columns: 1fr; }
  .an-hero-media .ops-shot-frame { transform: none; }
  .an-kpi-grid--five { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
}
@media (max-width: 640px) {
  .p-analytics .cth { padding: 140px 0 40px; }
  .an-kpi-grid--five { grid-template-columns: repeat(2, 1fr); }
  .an-kpi-grid--five .an-kpi-stat:last-child { grid-column: span 2; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER · ads-workflow.html
   ═══════════════════════════════════════════════════════════════ */

.adsw-h {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 30px;
}

/* Hero with ticker */
.p-ads .cth { padding: 180px 0 60px; }
.adsw-hero-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.adsw-ticker-frame {
  background: var(--bg-1);
  border-radius: 14px;
  box-shadow: 0 50px 100px -30px rgba(91,123,255,0.4);
}
.adsw-ticker-body { padding: 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.adsw-ticker-top { display: flex; align-items: center; gap: 10px; }
.adsw-ticker-pulse {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #6FE7A6;
  box-shadow: 0 0 18px #6FE7A6;
  animation: adswPulse 1.6s ease-in-out infinite;
}
@keyframes adswPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}
.adsw-ticker-lbl { font-size: 10px; letter-spacing: 0.22em; color: var(--text-dim); }
.adsw-ticker-numwrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.adsw-ticker-pre { font-size: clamp(40px, 5vw, 64px); color: var(--accent); font-weight: 300; }
.adsw-ticker-num {
  font-size: clamp(64px, 8vw, 96px);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--text);
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
.adsw-ticker-num.tick { transform: translateY(-4px); color: var(--accent-soft); }
.adsw-ticker-suf { font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); }
.adsw-ticker-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.adsw-ticker-meta { display: flex; flex-direction: column; gap: 4px; }
.adsw-ticker-meta .mono { font-size: 9px; letter-spacing: 0.22em; color: var(--text-muted); }
.adsw-ticker-meta > span:last-child { font-size: 13px; color: var(--text); }
.adsw-ticker-roas { color: #6FE7A6; font-weight: 500; }
.adsw-ticker-bars {
  display: flex; gap: 8px; align-items: flex-end; height: 56px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.adsw-ticker-bar {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
  animation: anWallBarBreathe 5s ease-in-out infinite;
}
.adsw-ticker-bar:nth-child(2) { animation-delay: -0.7s; }
.adsw-ticker-bar:nth-child(3) { animation-delay: -1.4s; }
.adsw-ticker-bar:nth-child(4) { animation-delay: -2.1s; }
.adsw-ticker-bar:nth-child(5) { animation-delay: -2.8s; }
.adsw-ticker-bar:nth-child(6) { animation-delay: -3.5s; }

/* Pull-quote sandwich */
.adsw-pullquote { padding: 80px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.adsw-pq {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--text);
  max-width: 920px;
  margin: 0 0 24px;
  font-family: 'Geist', sans-serif;
}
.adsw-pq .sp-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: adswWordIn 0.55s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.06s);
}
@keyframes adswWordIn {
  to { opacity: 1; transform: translateY(0); }
}
.adsw-pq-attr {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent-soft);
}

/* Funnel with progress rail */
.adsw-funnel { padding: 100px 0; }
.adsw-funnel-wrap {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 48px;
  margin-top: 48px;
  position: relative;
}
.adsw-rail {
  position: sticky;
  top: 14vh;
  height: 60vh;
  width: 32px;
  align-self: start;
}
.adsw-rail-track {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--line-strong);
  transform: translateX(-50%);
}
.adsw-rail-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: var(--fill, 0%);
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
  box-shadow: 0 0 16px var(--accent-glow);
  transform: translateX(-50%);
  transition: height 0.8s var(--ease);
  border-radius: 2px;
}
.adsw-rail-marker {
  position: absolute;
  left: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 2px solid var(--line-strong);
  transform: translate(-50%, -50%);
}
.adsw-rail-marker[data-pct="25"] { top: 25%; }
.adsw-rail-marker[data-pct="50"] { top: 50%; }
.adsw-rail-marker[data-pct="75"] { top: 75%; }
.adsw-rail-marker[data-pct="100"] { top: 100%; }

.adsw-steps { display: flex; flex-direction: column; gap: 80px; }
.adsw-step {
  padding: 32px 28px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.adsw-step.lit {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--bg-1), rgba(91,123,255,0.04));
}
.adsw-step-num {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 8px;
}
.adsw-step-kicker {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.adsw-step-h {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: var(--text);
}
.adsw-step-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 28px;
  max-width: 760px;
}
.adsw-step-frame { margin-bottom: 22px; }
.adsw-step-frame .vd-frame { background: var(--bg-2); border-radius: 10px; }
.adsw-step-frame-body { padding: 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.adsw-step-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.adsw-step-row-name { font-size: 14px; color: var(--text); }
.adsw-step-row-meta { font-size: 10px; letter-spacing: 0.18em; color: var(--text-muted); }
.adsw-step-row-status {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #6FE7A6;
  padding: 3px 8px;
  background: rgba(111, 231, 166, 0.12);
  border: 1px solid rgba(111, 231, 166, 0.3);
  border-radius: 999px;
}
.adsw-step-frame-events .adsw-step-evt {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.adsw-step-evt-time { font-size: 11px; color: var(--text-muted); }
.adsw-step-evt-name { font-size: 14px; color: var(--text); }
.adsw-step-evt-val { font-size: 11px; color: var(--accent); letter-spacing: 0.06em; }
.adsw-step-frame-creative { flex-direction: row; }
.adsw-step-ad {
  flex: 1;
  padding: 18px 16px;
  background: rgba(91,123,255,0.08);
  border: 1px solid var(--accent);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.adsw-step-ad--dim { background: rgba(255,255,255,0.03); border-color: var(--line); }
.adsw-step-ad-zone { font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); font-family: 'Geist Mono', ui-monospace, monospace; }
.adsw-step-ad-price { font-size: 16px; font-weight: 500; color: var(--text); }
.adsw-step-ad-cta {
  margin-top: auto;
  font-size: 12px;
  color: var(--accent-soft);
  letter-spacing: 0.04em;
}
.adsw-step-frame-roas .adsw-step-roas-row {
  display: grid;
  grid-template-columns: 180px 1fr 50px;
  gap: 14px;
  align-items: center;
}
.adsw-step-roas-name { font-size: 13px; color: var(--text); }
.adsw-step-roas-bar {
  height: 14px;
  width: var(--w);
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  border-radius: 3px;
  box-shadow: 0 0 12px var(--accent-glow);
}
.adsw-step-roas-val { font-size: 13px; font-weight: 500; color: #6FE7A6; text-align: right; }
.adsw-step-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

/* Centerpiece pull-quote */
.adsw-centerpiece {
  padding: 120px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.adsw-centerpiece-quote {
  font-size: clamp(36px, 6vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--text);
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}

/* Buyer 2x2 grid */
.adsw-buyer { padding: 100px 0 120px; }
.adsw-buyer-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.adsw-buyer-card {
  padding: 32px 28px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.adsw-buyer-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.adsw-buyer-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 14px;
}
.adsw-buyer-h {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--text);
}
.adsw-buyer-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
}

@media (max-width: 960px) {
  .adsw-hero-wrap { grid-template-columns: 1fr; gap: 36px; }
  .adsw-funnel-wrap { grid-template-columns: 1fr; gap: 24px; }
  .adsw-rail { display: none; }
  .adsw-buyer-grid { grid-template-columns: 1fr; }
  .adsw-step-frame-creative { flex-direction: column; }
  .adsw-step-row { grid-template-columns: 1fr; }
  .adsw-step-frame-events .adsw-step-evt { grid-template-columns: 1fr; }
  .adsw-step-frame-roas .adsw-step-roas-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .p-ads .cth { padding: 140px 0 40px; }
  .adsw-pullquote { padding: 60px 0; }
  .adsw-funnel { padding: 60px 0; }
  .adsw-centerpiece { padding: 80px 0; }
  .adsw-step { padding: 24px 22px; }
  .adsw-steps { gap: 48px; }
  .adsw-buyer { padding: 60px 0 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER · operations.html
   ═══════════════════════════════════════════════════════════════ */

.ops2-h {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 30px;
}

.p-ops .cth { padding: 180px 0 40px; }

/* Sticky sub-nav */
.ops-subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 7, 10, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.ops-subnav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
}
.ops-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
}
.ops-subnav-link:hover { color: var(--text); }
.ops-subnav-link.active {
  color: var(--text);
  background: rgba(91,123,255,0.08);
  border-color: var(--accent);
}
.ops-subnav-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.ops-subnav-link.active .ops-subnav-num { color: var(--accent); }
.ops-subnav-lbl {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ops-subnav-clock {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ops-subnav-clock::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6FE7A6;
  box-shadow: 0 0 10px #6FE7A6;
  animation: adswPulse 1.6s ease-in-out infinite;
}

/* Stage skeleton */
.ops-stage {
  scroll-margin-top: 80px;
  padding: 100px 0;
}
.ops-stage-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.ops-stage-wrap--reverse {
  grid-template-columns: 1.05fr 1fr;
}
.ops-stage-wrap--reverse .ops-stage-media { order: -1; }
.ops-stage-text {
  display: flex;
  flex-direction: column;
}
.ops-stage-text--centered {
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}
.ops-stage-body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 32px;
}
.ops-stage-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.ops-stage-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ops-stage-kpi-val {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1;
}
.ops-stage-kpi-val--word { font-size: clamp(22px, 2.4vw, 30px); color: var(--accent-soft); }
.ops-stage-kpi-k {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.ops-stage-kpi-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.ops-stage-frame {
  background: var(--bg-1);
  border-radius: 14px;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.5);
}

/* ─────────────────────────────────────────────────────────────
   Real product screenshots (assets/operations-20260615).
   Framed in browser chrome so the light admin UI reads as real
   software on the dark page. Explicit img width/height reserves
   the aspect ratio so nothing jumps on load. object-fit not needed
   — images render at their natural ratio inside the frame. */
.ops-shot-frame {
  background: #0E0E14;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.5);
  margin: 0;
}
.ops-shot-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: #0A0A10;
  border-bottom: 1px solid var(--line);
}
.ops-shot-chrome .vd-url { flex: 1; }
.ops-shot-chrome-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; letter-spacing: 0.22em;
  color: #6FE7A6;
}
.ops-shot-chrome-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #6FE7A6;
}
.ops-shot-img {
  display: block;
  width: 100%;
  height: auto;
}
.ops-shot-stack + .ops-shot-stack { margin-top: 18px; }

/* 02 · Allocate — wide venue-map screenshot + control tiles */
.ops-stage--cockpit { padding: 100px 0; background: linear-gradient(180deg, var(--bg-0), rgba(91,123,255,0.04) 50%, var(--bg-0)); }
.ops-allocate-wrap {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
  margin-top: 48px;
  align-items: stretch;
}
.ops-allocate-map { align-self: start; }
.ops-allocate-side { display: flex; flex-direction: column; gap: 14px; }
.ops-allocate-tile {
  flex: 1;
  padding: 24px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
}
.ops-allocate-tile-lbl { font-size: 10px; letter-spacing: 0.22em; color: var(--accent-soft); }
.ops-allocate-tile p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }

/* Promotions & reporting band — promo-menu screenshot + report chips */
.ops-promos { padding: 100px 0 120px; border-top: 1px solid var(--line); }
.ops-promos-stage {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  margin-top: 48px;
  align-items: center;
}
.ops-promos-shot { align-self: start; }
.ops-promos-reports { display: flex; flex-direction: column; gap: 16px; }
.ops-promos-reports-lbl { font-size: 10px; letter-spacing: 0.22em; color: var(--text-muted); }
.ops-promos-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-promos-chip {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 960px) {
  .ops-stage-wrap, .ops-stage-wrap--reverse { grid-template-columns: 1fr; gap: 32px; }
  .ops-stage-wrap--reverse .ops-stage-media { order: 0; }
  .ops-allocate-wrap { grid-template-columns: 1fr; }
  .ops-promos-stage { grid-template-columns: 1fr; }
  .ops-subnav-clock { display: none; }
}
@media (max-width: 640px) {
  .p-ops .cth { padding: 140px 0 30px; }
  .ops-stage { padding: 60px 0; }
  .ops-stage-kpis { grid-template-columns: 1fr; }
  .ops-subnav-inner { gap: 4px; }
  .ops-subnav-link { padding: 6px 10px; gap: 6px; }
  .ops-subnav-lbl { font-size: 12px; }
  .ops-promos { padding: 60px 0 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER · mobile.html
   ═══════════════════════════════════════════════════════════════ */

.mb-h {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 24px;
}

.p-mobile .cth { padding: 180px 0 80px; }

/* Hero */
.mb-hero-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.mb-hero-text .cth-h {
  font-size: clamp(40px, 5.4vw, 78px);
}
.mb-hero-stat {
  display: inline-block;
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.mb-hero-time { color: var(--text-muted); font-style: italic; }

/* Bobbing phone */
.mb-hero-phone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}
.p-mobile .mb-phone { --iphone-w: 260px; }
.p-mobile .mb-phone .iphone-notch,
.p-mobile .mb-phone .iphone-status,
.p-mobile .mb-phone .iphone-home { display: none; }
/* Mobile-flow reshoots are 512x962. Override the .iphone-frame default
   (9/19.5) on the full-screen mobile phones so the screen capture fills
   the device exactly with object-fit: cover — no crop, no letterbox. */
.p-mobile .mb-hero-phone .mb-phone,
.p-mobile .mb-phones3-card .mb-phone {
  aspect-ratio: 512 / 962;
}
.p-mobile .mb-phone .iphone-screen {
  margin: 4px;
  border-radius: calc(var(--iphone-radius) - 6px);
}
.mb-hero-phone .mb-phone {
  animation: mbBob 4.2s ease-in-out infinite;
  z-index: 2;
}
.mb-hero-phone .iphone-screen video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes mbBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(-1deg); }
}
.mb-hero-phone-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 65%);
  filter: blur(60px);
  opacity: 0.45;
  z-index: 0;
  animation: mbGlow 6s ease-in-out infinite;
}
@keyframes mbGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.55; }
}

/* Bespoke B — Four-tap horizontal strip */
.mb-taps { padding: 100px 0; border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.mb-tap-strip {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
  padding: 40px 24px;
}
.mb-finger {
  position: absolute;
  top: 48%;
  left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, var(--accent) 50%, transparent 70%);
  filter: blur(2px);
  box-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--accent-glow);
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
  animation: mbFinger 7s ease-in-out infinite;
}
@keyframes mbFinger {
  0%   { left: 6%; opacity: 0; }
  8%   { opacity: 1; }
  20%  { left: 18%; }
  24%  { transform: scale(1.5); }
  28%  { transform: scale(1); }
  45%  { left: 41%; transform: scale(1); }
  49%  { transform: scale(1.5); }
  53%  { transform: scale(1); }
  70%  { left: 64%; }
  74%  { transform: scale(1.5); }
  78%  { transform: scale(1); }
  92%  { left: 88%; opacity: 1; }
  100% { left: 95%; opacity: 0; }
}
.mb-tap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mb-tap-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.mb-phone--mini { --iphone-w: 160px; }
/* Real shot booking-step videos (pick a zone → pick a package → add a bottle
   → pay) are full phone-screen captures at ~50:93. Match the mini frame to
   that aspect so the footage fills natively instead of being cropped into the
   default 9:19.5 device slot. */
.mb-tap-card .iphone-frame.mb-phone--mini { aspect-ratio: 50 / 93; }
.mb-tap-card .iphone-screen { margin: 3px; border-radius: calc(var(--iphone-radius) - 6px); }
.mb-tap-card .iphone-screen video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mb-tap-screen {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, var(--bg-1), #06060A);
  height: 100%;
}
.mb-tap-screen-h {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-align: center;
  padding-top: 6px;
}
.mb-tap-zone-list, .mb-tap-pkg-stack {
  display: flex; flex-direction: column; gap: 6px;
}
.mb-tap-zone, .mb-tap-pkg {
  padding: 8px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
}
.mb-tap-zone--active, .mb-tap-pkg--active {
  background: rgba(91,123,255,0.18);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 14px var(--accent-glow);
}
.mb-tap-upsell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mb-tap-upsell {
  padding: 10px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
}
.mb-tap-upsell--active {
  background: rgba(91,123,255,0.18);
  border-color: var(--accent);
  color: var(--text);
}
.mb-tap-pay { display: flex; flex-direction: column; gap: 8px; }
.mb-tap-pay-total {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  padding: 12px 0;
}
.mb-tap-pay-btn {
  padding: 8px 0;
  border-radius: 999px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
}
.mb-tap-pay-btn--apple {
  background: #fff;
  color: #000;
  letter-spacing: 0.04em;
}
.mb-tap-pay-btn--card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 8px;
  letter-spacing: 0.14em;
}
.mb-tap-lbl {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-align: center;
}

/* Stat grid */
.mb-stats { padding: 60px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mb-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.mb-stat {
  text-align: left;
  padding: 0 18px;
  border-left: 2px solid var(--line);
}
.mb-stat-num {
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 12px;
}
.mb-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 4px;
}
.mb-stat-sub {
  font-size: 13px;
  color: var(--text-dim);
}

/* Bespoke C — Three-phone showcase */
.mb-phones3 { padding: 120px 0 80px; }
.mb-phones3-row {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: end;
  justify-items: center;
}
.mb-phones3-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: transform 0.6s var(--ease);
}
.mb-phones3-card:hover {
  transform: perspective(1000px) rotateY(-4deg) translateY(-6px);
}
.mb-phones3-card .mb-phone { --iphone-w: 280px; }
.mb-phones3-card .iphone-screen video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mb-phones3-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.mb-phones3-sub {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  max-width: 240px;
}

/* Why responsive wasn't enough */
.mb-why { padding: 120px 0 80px; border-top: 1px solid var(--line); }
.mb-why-wrap { max-width: 920px; }
.mb-why-quote {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--text);
  margin: 32px 0 28px;
}
.mb-why-strike {
  position: relative;
  color: var(--text-muted);
}
.mb-why-strike::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  top: 55%;
  height: 2px;
  background: var(--accent);
  transform: rotate(-1.5deg);
}
.mb-why-note {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}

@media (max-width: 960px) {
  .mb-hero-wrap { grid-template-columns: 1fr; gap: 40px; }
  .mb-hero-phone { min-height: 480px; }
  .mb-tap-strip { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mb-finger { display: none; }
  .mb-stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mb-phones3-row { grid-template-columns: 1fr; gap: 48px; }
  .mb-phones3-card .mb-phone { --iphone-w: 260px; }
}
@media (max-width: 640px) {
  .p-mobile .cth { padding: 140px 0 40px; }
  .mb-tap-strip { grid-template-columns: 1fr; gap: 32px; padding: 20px 8px; }
  .mb-phone--mini { --iphone-w: 200px; }
  .mb-stats-grid { grid-template-columns: 1fr; gap: 24px; }
  .mb-phones3 { padding: 60px 0; }
  .mb-why { padding: 60px 0; }
}

/* ─── INNER · BLOG ─────────────────────────────────────────────────────── */
/* Listing (/blog/) + per-post (/blog/<slug>/) pages.
   Reuses .cth / .vd-frame / .fcta / .reveal / .eyebrow / .mono primitives.
   No JS — inner.js handles reveal, nav scroll state, demo modal, page_view. */

.p-blog .cth,
.p-blog-post .cth { padding: 160px 0 60px; }

.blog-hero-wrap { display: flex; flex-direction: column; gap: 24px; max-width: 960px; position: relative; z-index: 2; }
.blog-hero-wrap .cth-sub { font-size: 19px; line-height: 1.55; color: var(--text-dim); max-width: 640px; }

/* ── Listing grid ── */
.blog-listing { padding: 40px 0 100px; position: relative; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}
@media (max-width: 780px) { .blog-grid { grid-template-columns: 1fr; gap: 28px; } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 30px 70px -30px rgba(91,123,255,0.4), 0 0 0 1px var(--line-strong);
}
.blog-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0E0E14;
  border-bottom: 1px solid var(--line);
}
.blog-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); display: flex; gap: 10px; align-items: center; }
.blog-card-meta-sep { opacity: 0.5; }
.blog-card-title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--text);
  text-wrap: balance;
}
.blog-card-excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dim);
  flex: 1;
}
.blog-card-cta {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: 'Geist Mono', monospace;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.blog-card-cta-arrow { transition: transform 0.25s var(--ease); display: inline-block; }
.blog-card:hover .blog-card-cta-arrow { transform: translateX(4px); }

.blog-footer-cta { margin-top: 0; }

/* ── Post page ── */
.post { position: relative; }
.post-hero-wrap { display: flex; flex-direction: column; gap: 18px; max-width: 880px; position: relative; z-index: 2; }
.post-back {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
  margin-bottom: 6px;
}
.post-back:hover { color: var(--accent); }
.post-h {
  font-size: clamp(36px, 5.2vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
  font-weight: 500;
}
.post-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.post-meta-sep { opacity: 0.5; }

.post-hero-img-wrap { padding: 20px 0 40px; }
.post-hero-frame { aspect-ratio: 16 / 9; max-height: 540px; margin: 0 auto; max-width: 1080px; }
.post-hero-img {
  position: absolute; inset: 36px 0 0 0;
  width: 100%; height: calc(100% - 36px);
  object-fit: cover; display: block;
}

.post-body-wrap { padding: 30px 0 100px; }
.post-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--text);
  font-weight: 300;
  letter-spacing: -0.005em;
}
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin: 2.2em 0 0.6em;
  text-wrap: balance;
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
  margin: 1.8em 0 0.5em;
}
.post-body h4 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--accent-soft);
  margin: 1.5em 0 0.4em;
}
.post-body p { color: var(--text); }
.post-body p em, .post-body p i { color: var(--text-dim); font-style: italic; }
.post-body strong, .post-body b { color: var(--text); font-weight: 500; }
.post-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(91,123,255,0.3);
  transition: border-color 0.2s, color 0.2s;
}
.post-body a:hover { color: var(--accent-soft); border-bottom-color: var(--accent-soft); }
.post-body ul, .post-body ol { padding-left: 1.5em; }
.post-body li { margin: 0.5em 0; padding-left: 0.2em; }
.post-body li::marker { color: var(--accent); }
.post-body blockquote {
  border-left: 2px solid var(--accent);
  padding: 0.4em 0 0.4em 1.6em;
  margin: 1.6em 0;
  color: var(--text-dim);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  background: linear-gradient(90deg, rgba(91,123,255,0.06), transparent 60%);
}
.post-body blockquote p { color: var(--text-dim); }
.post-body code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.88em;
  background: rgba(255,255,255,0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--accent-soft);
}
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* ── Related posts ── */
.post-related {
  padding: 80px 0 60px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(91,123,255,0.025), transparent 60%);
}
.post-related-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; max-width: 720px; }
.post-related-h {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.post-related-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .post-related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .post-related-grid { grid-template-columns: 1fr; } }
.post-related-grid .blog-card-title { font-size: 19px; }
.post-related-grid .blog-card-excerpt { font-size: 13.5px; }

.post-footer-cta { margin-top: 0; }

/* ── Landing-page deep link to blog ── */
.section-deep-link-blog {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid rgba(91,123,255,0.3);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}
.section-deep-link-blog:hover { color: var(--accent-soft); border-bottom-color: var(--accent-soft); }
.section-deep-link-blog span:last-child { transition: transform 0.25s var(--ease); display: inline-block; }
.section-deep-link-blog:hover span:last-child { transform: translateX(4px); }

/* ── Mobile tightening ── */
@media (max-width: 780px) {
  .p-blog .cth, .p-blog-post .cth { padding: 130px 0 40px; }
  .blog-listing { padding: 20px 0 80px; }
  .post-body { font-size: 16.5px; }
  .post-body h2 { font-size: 24px; margin-top: 1.8em; }
  .post-body h3 { font-size: 19px; }
  .post-body blockquote { font-size: 16.5px; padding-left: 1.2em; }
  .post-hero-frame { aspect-ratio: 4 / 3; }
  .post-related { padding: 60px 0 40px; }
}
@media (max-width: 480px) {
  .post-body { font-size: 16px; }
  .blog-card-body { padding: 18px 18px 22px; }
  .blog-card-title { font-size: 19px; }
}

/* ── Next-rail (inner-page sequencer) ─────────────────────────────────── */
.next-rail {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  padding: 72px 0;
}
.next-rail-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.next-rail-meta {
  flex: 1 1 420px;
  min-width: 0;
}
.next-rail-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.next-rail-title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 10px;
}
.next-rail-sub {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 56ch;
}
.next-rail-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #0a0a0a;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px -4px var(--accent-glow);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.next-rail-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px var(--accent-glow);
}
.next-rail-arrow {
  display: inline-block;
  transition: transform 0.18s var(--ease);
}
.next-rail-cta:hover .next-rail-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
  .next-rail { padding: 56px 0; }
  .next-rail-wrap { gap: 28px; }
  .next-rail-cta { width: 100%; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────────────
   Custom booking calendar — fully branded, no HubSpot iframe.
   Rendered by booking.js into a form's success panel.
   ────────────────────────────────────────────────────────────────────── */

/* Wrapper injected into the success panel (header + calendar mount). */
.ctg-booking-wrap { margin-top: 24px; text-align: left; }
.ctg-booking-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ctg-booking-kicker { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.ctg-booking-sub { color: var(--text-dim); font-size: 0.9rem; }
.ctg-booking-mount { position: relative; }

/* Lead-save failure notice (honest fallback). */
.ctg-lead-failed {
  border: 1px solid rgba(255, 159, 67, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(255, 159, 67, 0.08);
  color: rgba(255, 210, 160, 0.95);
  font-size: 0.9rem; line-height: 1.5; padding: 12px 14px; margin-bottom: 18px; text-align: left;
}

/* Calendar card. min-height reserves space so the panel doesn't jump while
   availability loads (CLS-safe). */
.ctg-booking {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  padding: 18px;
  min-height: 360px;
}

.ctg-bk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.ctg-bk-title { font-size: 1rem; font-weight: 600; }

/* Duration toggle (30 / 60 min). */
.ctg-bk-durations { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.ctg-dur {
  appearance: none; border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 0.85rem; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ctg-dur:hover { color: var(--text); }
.ctg-dur.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #0a0a0a; font-weight: 600; }

/* Month navigation. */
.ctg-bk-monthnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ctg-mn-label { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; }
.ctg-mn-btn {
  appearance: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.ctg-mn-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: var(--line-strong); }
.ctg-mn-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ctg-bk-body { min-height: 200px; }

/* Day list. */
.ctg-days { display: flex; flex-direction: column; gap: 14px; }
.ctg-day { border-top: 1px solid var(--line); padding-top: 12px; }
.ctg-day:first-child { border-top: 0; padding-top: 0; }
.ctg-day-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ctg-day-wd { font-size: 11px; letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; }
.ctg-day-date { font-size: 0.95rem; font-weight: 600; }

/* Slot chips. */
.ctg-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.ctg-slot {
  appearance: none; border: 1px solid var(--line-strong); background: var(--bg-2);
  color: var(--text); font: inherit; font-size: 0.85rem; padding: 8px 12px;
  border-radius: var(--radius-sm); cursor: pointer; min-width: 84px; text-align: center;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.12s var(--ease);
}
.ctg-slot:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.ctg-slot.is-selected {
  border-color: var(--accent); background: rgba(91, 123, 255, 0.18);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Confirm bar. */
.ctg-confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-2);
}
.ctg-confirm-text { font-size: 0.92rem; color: var(--text-dim); }
.ctg-confirm-text strong { color: var(--text); font-weight: 600; }
.ctg-confirm-btn { white-space: nowrap; }

/* Footer + flash. */
.ctg-bk-foot { margin-top: 16px; font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; }
.ctg-bk-flash {
  margin: 0 0 14px; padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 159, 67, 0.4); background: rgba(255, 159, 67, 0.08);
  color: rgba(255, 210, 160, 0.95); font-size: 0.88rem; line-height: 1.45;
}

/* States: loading / error / empty. */
.ctg-bk-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 200px; color: var(--text-dim);
}
.ctg-bk-loading {
  font-size: 11px; letter-spacing: 0.22em;
  animation: ctg-loading-pulse 1.6s ease-in-out infinite;
}
@keyframes ctg-loading-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
.ctg-bk-error p, .ctg-bk-empty p { margin: 0; color: var(--text); }
.ctg-bk-alt, .ctg-bk-empty-hint { color: var(--text-dim) !important; font-size: 0.88rem; }
.ctg-bk-alt a { color: var(--accent-soft); }
.ctg-bk-empty-mark { font-size: 28px; color: var(--text-dim); line-height: 1; }
.ctg-retry { margin-top: 4px; }

/* Success. */
.ctg-bk-success {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 30px 18px; min-height: 280px;
}
.ctg-bk-success-check {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #0a0a0a; background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow: 0 8px 24px -6px var(--accent-glow);
}
.ctg-bk-success-title { font-size: 1.3rem; font-weight: 600; }
.ctg-bk-success-when { font-size: 0.98rem; color: var(--text); }
.ctg-bk-success-sub { font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; }

@media (max-width: 560px) {
  .ctg-booking { padding: 14px; }
  .ctg-bk-head { gap: 10px; }
  .ctg-slot { flex: 1 1 calc(33.333% - 8px); min-width: 0; }
  .ctg-confirm { flex-direction: column; align-items: stretch; }
  .ctg-confirm-btn { width: 100%; }
}

/* "(OPTIONAL)" marker inside form labels. */
.field-opt { color: var(--text-muted); font-size: 0.85em; letter-spacing: 0.08em; }

/* Ads-workflow hero demoted to a mid-page section on the merged
   Analytics & Ads page — same content, section-scale framing. */
.adsw-hero--inline { padding: 110px 0 70px; border-top: 1px solid var(--line); }

/* About page — team grid (initials avatars, no stock photos). */
.team-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.team-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: linear-gradient(160deg, rgba(91, 123, 255, 0.35), rgba(91, 123, 255, 0.08));
  border: 1px solid rgba(91, 123, 255, 0.4);
}
.team-name { font-size: 17px; font-weight: 600; }
.team-role { font-size: 10px; letter-spacing: 0.16em; color: var(--text-dim); margin-top: 4px; }
@media (max-width: 960px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* Consent fine print under the lead forms — link inherits the muted tone. */
.cg-fine a,
.modal-fine a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}

/* When the calendar lands in the demo modal the panel can exceed the viewport.
   Let the backdrop scroll and the modal sit on auto margins: short modals still
   center, tall ones scroll instead of clipping off-screen. */
.modal-back { overflow-y: auto; }
.modal { margin: auto; }