/* ============================================================
   HookPilot V2 — Cinematic Premium Redesign
   Scoped under body.v2-design — toggle on/off with one class.
   Non-destructive: original styles untouched.
   ============================================================ */

body.v2-design {
  /* ---- Color tokens (blueprint-aligned) ---- */
  --v2-bg-base: #0B0D12;
  --v2-bg-deep: #07090D;
  --v2-bg-elev-1: #11131A;
  --v2-bg-elev-2: #1A1D26;
  --v2-bg-glass: rgba(28, 25, 23, 0.55);
  --v2-bg-glass-strong: rgba(28, 25, 23, 0.78);

  --v2-stroke-1: rgba(255, 240, 220, 0.06);
  --v2-stroke-2: rgba(255, 240, 220, 0.12);
  --v2-stroke-3: rgba(255, 240, 220, 0.20);

  --v2-text-1: #f7f3ee;
  --v2-text-2: #c8c0b6;
  --v2-text-3: #8a8278;
  --v2-text-mute: #5e564c;

  /* Burnt orange identity preserved */
  --v2-orange-50:  #fff5ed;
  --v2-orange-300: #fdb777;
  --v2-orange-400: #fb923c;
  --v2-orange-500: #FF6A00;
  --v2-orange-600: #ea580c;
  --v2-orange-700: #c2410c;
  --v2-orange-glow: rgba(249, 115, 22, 0.45);
  --v2-orange-glow-soft: rgba(249, 115, 22, 0.18);

  /* Warm gold accent */
  --v2-gold-300: #FFC27A;
  --v2-gold-400: #d4a574;
  --v2-gold-500: #b8895a;

  /* Restrained cool — only for "syncing" state */
  --v2-cyan-400: #67e8f9;

  /* Status palette */
  --v2-success: #34d399;
  --v2-warn:    #fbbf24;
  --v2-danger:  #f87171;

  /* ---- Type ---- */
  --v2-font-display: 'Geist', 'Satoshi', 'Inter', system-ui, sans-serif;
  --v2-font-body:    'Geist', 'Inter', system-ui, sans-serif;
  --v2-font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --v2-font-serif:   'Instrument Serif', 'Times New Roman', serif;

  /* ---- Motion ---- */
  --v2-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --v2-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --v2-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --v2-dur-instant: 120ms;
  --v2-dur-fast: 240ms;
  --v2-dur-base: 420ms;
  --v2-dur-slow: 720ms;
  --v2-dur-cinematic: 1100ms;

  /* ---- Radii / shadow ---- */
  --v2-radius-sm: 8px;
  --v2-radius:    14px;
  --v2-radius-lg: 22px;
  --v2-radius-xl: 32px;

  --v2-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--v2-stroke-1);
  --v2-shadow-2: 0 12px 32px -12px rgba(0,0,0,.6), 0 0 0 1px var(--v2-stroke-2);
  --v2-shadow-glow: 0 0 0 1px var(--v2-orange-glow-soft), 0 12px 48px -12px var(--v2-orange-glow);
}

/* ============================================================
   GLOBAL LOCK — force dark premium baseline
   ============================================================ */
body.v2-design {
  background-color: var(--v2-bg-base);
  /* Top + bottom navy splash (logo-aligned). Page-anchored, scrolls away.
     Each end has its own layered focal radial + linear fade.
     Center stays in v2 dark base. */
  background-image:
    /* TOP: deep navy halo + focal navy + linear fade */
    radial-gradient(1700px 700px at 50% -160px, rgba(37, 99, 235, 0.42), transparent 68%),
    radial-gradient(1100px 520px at 50% -40px, rgba(30, 58, 138, 0.55), transparent 62%),
    /* BOTTOM: mirror — anchored at element bottom edge */
    radial-gradient(1700px 700px at 50% calc(100% + 160px), rgba(37, 99, 235, 0.42), transparent 68%),
    radial-gradient(1100px 520px at 50% calc(100% + 40px), rgba(30, 58, 138, 0.55), transparent 62%),
    /* Top + bottom linear fades (direction: 180deg fades down, 0deg fades up) */
    linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(11, 13, 18, 0) 760px),
    linear-gradient(0deg,   rgba(15, 23, 42, 0.55) 0%, rgba(11, 13, 18, 0) 760px);
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--v2-text-1);
  font-family: var(--v2-font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Warm orange/gold accents — softened ~35% per user feedback (was too bright) */
body.v2-design::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1100px 600px at 15% 30%, rgba(255,106,0,0.05), transparent 60%),
    radial-gradient(900px 700px at 90% 50%, rgba(255,194,122,0.035), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(255,106,0,0.035), transparent 60%);
}

/* Hide ORIGINAL homepage hero when v2 is on */
body.v2-design main > section.hero.hero-premium { display: none !important; }

/* Universal section bg consistency */
body.v2-design main {
  background: transparent;
}

body.v2-design section {
  background: transparent;
}

/* ============================================================
   NAV — premium sticky w/ glass + scroll-shrink
   ============================================================ */
body.v2-design .header {
  background: rgba(10, 9, 8, 0.60);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--v2-stroke-1);
  transition: background var(--v2-dur-base) var(--v2-ease-out),
              border-color var(--v2-dur-base) var(--v2-ease-out);
}
body.v2-design.is-scrolled .header {
  background: rgba(10, 9, 8, 0.85);
  border-bottom-color: var(--v2-stroke-2);
}
body.v2-design .navbar { padding: 0; }
body.v2-design .nav-link {
  color: var(--v2-text-2) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color var(--v2-dur-fast) var(--v2-ease-out);
}
body.v2-design .nav-link:hover { color: var(--v2-text-1) !important; }
body.v2-design .nav-link.is-active,
body.v2-design .nav-link[aria-current="page"] {
  color: var(--v2-orange-400) !important;
}

body.v2-design .btn-ghost {
  color: var(--v2-text-2) !important;
  background: transparent !important;
  border: 1px solid var(--v2-stroke-2) !important;
  transition: all var(--v2-dur-fast) var(--v2-ease-out);
}
body.v2-design .btn-ghost:hover {
  color: var(--v2-text-1) !important;
  border-color: var(--v2-stroke-3) !important;
  background: var(--v2-bg-elev-1) !important;
}

body.v2-design .btn-primary {
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 0 0 1px var(--v2-orange-glow-soft),
    0 6px 20px -6px var(--v2-orange-glow),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform var(--v2-dur-fast) var(--v2-ease-spring),
              box-shadow var(--v2-dur-fast) var(--v2-ease-out);
}
body.v2-design .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--v2-orange-glow),
    0 14px 36px -10px var(--v2-orange-glow),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

body.v2-design .search-box {
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-2);
}
body.v2-design .search-input { color: var(--v2-text-2) !important; }
body.v2-design .search-input::placeholder { color: var(--v2-text-mute) !important; }

/* ============================================================
   HERO V2 — cinematic agent orchestration scene
   ============================================================ */
.hero-v2 {
  position: relative;
  min-height: 92vh;
  padding: 110px 0 80px;
  overflow: hidden;
  isolation: isolate;
}

.hero-v2__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-v2__bg::before {
  /* dotted grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,240,220,0.06) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
.hero-v2__bg::after {
  /* central warm glow */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 50% 30%, rgba(249,115,22,0.12), transparent 60%),
    radial-gradient(600px 400px at 50% 80%, rgba(212,165,116,0.07), transparent 60%);
}

.hero-v2 .container {
  position: relative;
  display: grid;
  gap: 56px;
  z-index: 1;
}

.hero-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-text-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: fit-content;
}
.hero-v2__eyebrow .eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-orange-500);
  box-shadow: 0 0 12px var(--v2-orange-glow);
  animation: v2-pulse-dot 2.8s var(--v2-ease-in-out) infinite;
}
@keyframes v2-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.hero-v2__title {
  font-family: var(--v2-font-display);
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--v2-text-1);
  max-width: 18ch;
  margin: 24px 0 0;
}
.hero-v2__title .v2-shimmer {
  background: linear-gradient(90deg, var(--v2-orange-300), var(--v2-gold-400) 50%, var(--v2-orange-500));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: v2-shimmer 6s linear infinite;
}
.hero-v2__title .v2-serif {
  font-family: var(--v2-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--v2-gold-300);
}
@keyframes v2-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}

.hero-v2__sub {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--v2-text-2);
  max-width: 58ch;
  font-weight: 400;
}

.hero-v2__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
}
.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 12px;
  font-family: var(--v2-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--v2-dur-fast) var(--v2-ease-spring),
              box-shadow var(--v2-dur-base) var(--v2-ease-out),
              background var(--v2-dur-base) var(--v2-ease-out),
              border-color var(--v2-dur-base) var(--v2-ease-out);
}
.v2-btn--primary {
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff;
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px var(--v2-orange-glow-soft),
    0 8px 24px -8px var(--v2-orange-glow),
    inset 0 1px 0 rgba(255,255,255,0.20);
}
.v2-btn--primary:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 0 0 1px var(--v2-orange-glow),
    0 16px 40px -12px var(--v2-orange-glow),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.v2-btn--ghost {
  background: var(--v2-bg-glass);
  color: var(--v2-text-1);
  border-color: var(--v2-stroke-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v2-btn--ghost:hover {
  border-color: var(--v2-stroke-3);
  background: var(--v2-bg-glass-strong);
  transform: translateY(-1px);
}
.v2-btn .v2-btn__icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}

.hero-v2__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--v2-text-3);
}
.hero-v2__trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-v2__trust span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-gold-400);
  box-shadow: 0 0 8px rgba(212,165,116,0.6);
}

/* ============================================================
   HERO V2 — Agent Orchestration Stage
   ============================================================ */
.hero-v2__stage {
  position: relative;
  margin-top: 24px;
  padding: 28px 28px 36px;
  background: linear-gradient(180deg, rgba(28,25,23,0.6), rgba(10,9,8,0.4));
  border: 1px solid var(--v2-stroke-2);
  border-radius: var(--v2-radius-xl);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 40px 80px -40px rgba(0,0,0,0.6);
  overflow: hidden;
}
.hero-v2__stage::before {
  content: "";
  position: absolute;
  top: -1px; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
  opacity: 0.6;
}
.hero-v2__stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.hero-v2__stage-head .stage-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--v2-text-2);
}
.hero-v2__stage-head .stage-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-success);
  box-shadow: 0 0 8px rgba(52,211,153,0.6);
  animation: v2-pulse-dot 2.2s ease-in-out infinite;
}

/* Flow grid — 3 columns: input → orchestrator → output */
.flow-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.1fr;
  gap: 0;
  align-items: stretch;
  min-height: 360px;
}

.flow-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}
.flow-col--inputs  { padding-right: 8px; }
.flow-col--outputs { padding-left: 8px; }

.flow-col__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-text-mute);
  margin-bottom: 4px;
}

.flow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--v2-text-1);
  transition: border-color var(--v2-dur-base), background var(--v2-dur-base), transform var(--v2-dur-base);
  will-change: transform;
}
.flow-node[data-state="active"] {
  border-color: var(--v2-orange-glow);
  background: linear-gradient(180deg, rgba(249,115,22,0.10), rgba(249,115,22,0.02));
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 0 24px var(--v2-orange-glow-soft);
}
.flow-node .node-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-1);
  font-size: 13px;
  flex-shrink: 0;
}
.flow-node[data-state="active"] .node-icon {
  background: rgba(249,115,22,0.15);
  border-color: var(--v2-orange-glow);
  color: var(--v2-orange-300);
}

/* Orchestrator card (Sera hub) */
.flow-orchestrator {
  position: relative;
  margin: 12px 18px;
  padding: 22px 20px;
  background:
    radial-gradient(ellipse at center, rgba(249,115,22,0.10), transparent 70%),
    linear-gradient(180deg, var(--v2-bg-elev-1), var(--v2-bg-elev-2));
  border: 1px solid var(--v2-stroke-3);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 60px -20px var(--v2-orange-glow-soft);
}
.flow-orchestrator__halo {
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, var(--v2-orange-500) 90deg, transparent 180deg, var(--v2-gold-400) 270deg, transparent 360deg);
  opacity: 0.35;
  filter: blur(12px);
  animation: v2-halo-spin 8s linear infinite;
  z-index: -1;
}
@keyframes v2-halo-spin {
  to { transform: rotate(360deg); }
}
.flow-orchestrator__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 4px rgba(249,115,22,0.12), 0 0 24px var(--v2-orange-glow);
  margin-bottom: 6px;
  position: relative;
}
.flow-orchestrator__avatar::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--v2-orange-glow-soft);
  animation: v2-orbit-ring 3.5s ease-in-out infinite;
}
@keyframes v2-orbit-ring {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.18); opacity: 0; }
}
.flow-orchestrator__name {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-1);
  letter-spacing: -0.01em;
}
.flow-orchestrator__role {
  font-size: 11px;
  color: var(--v2-text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.flow-orchestrator__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 10px;
}
.flow-orchestrator__pill {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 999px;
  color: var(--v2-text-2);
  transition: all var(--v2-dur-base) var(--v2-ease-out);
}
.flow-orchestrator__pill[data-active="true"] {
  background: rgba(249,115,22,0.15);
  border-color: var(--v2-orange-glow);
  color: var(--v2-orange-300);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px var(--v2-orange-glow);
}

/* SVG flow lines layer (absolute positioned) */
.flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.flow-svg path {
  fill: none;
  stroke: var(--v2-stroke-2);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.flow-svg path.is-active {
  stroke: var(--v2-orange-glow);
  filter: drop-shadow(0 0 6px var(--v2-orange-glow));
}
.flow-svg circle.pulse {
  fill: var(--v2-orange-400);
  filter: drop-shadow(0 0 6px var(--v2-orange-glow));
}

/* Tiny "data packet" dot */
.flow-svg .pulse-dot {
  fill: var(--v2-orange-300);
  filter: drop-shadow(0 0 6px var(--v2-orange-glow));
}

/* Bottom KPI strip inside hero stage */
.hero-v2__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 20px;
  border-top: 1px solid var(--v2-stroke-1);
  padding-top: 18px;
}
.hero-v2__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 18px;
  border-right: 1px solid var(--v2-stroke-1);
}
.hero-v2__kpi:last-child { border-right: none; }
.hero-v2__kpi .kpi-num {
  font-family: var(--v2-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v2-text-1);
}
.hero-v2__kpi .kpi-num .kpi-accent { color: var(--v2-orange-400); }
.hero-v2__kpi .kpi-label {
  font-size: 12px;
  color: var(--v2-text-3);
  letter-spacing: 0.02em;
}

/* ============================================================
   PHASE 2b — Section #1: "Agents working together"
   ============================================================ */
.v2-section {
  position: relative;
  padding: 100px 0;
  isolation: isolate;
}
.v2-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.v2-section__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-orange-400);
  padding: 6px 12px;
  background: var(--v2-orange-glow-soft);
  border-radius: 999px;
  border: 1px solid var(--v2-orange-glow-soft);
  margin-bottom: 18px;
}
.v2-section__title {
  font-family: var(--v2-font-display);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--v2-text-1);
}
.v2-section__title .v2-serif {
  font-family: var(--v2-font-serif);
  font-style: italic;
  color: var(--v2-gold-300);
  font-weight: 400;
}
.v2-section__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--v2-text-2);
  margin: 0;
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.agent-card {
  position: relative;
  padding: 22px 20px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: var(--v2-radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--v2-dur-base) var(--v2-ease-out),
              border-color var(--v2-dur-base),
              box-shadow var(--v2-dur-base);
  overflow: hidden;
  cursor: default;
}
.agent-card:hover {
  transform: translateY(-3px);
  border-color: var(--v2-orange-glow);
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}
.agent-card::before {
  /* sweep highlight on hover */
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(115deg, transparent 40%, rgba(249,115,22,0.08) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform var(--v2-dur-cinematic) var(--v2-ease-out);
  pointer-events: none;
}
.agent-card:hover::before { transform: translateX(0); }

/* Sera lead card — visually elevated supervisor */
body.v2-design .agent-card.agent-card--lead {
  background: linear-gradient(180deg, rgba(249,115,22,0.14), rgba(249,115,22,0.04)) !important;
  border-color: var(--v2-orange-glow) !important;
  box-shadow:
    0 0 0 1px var(--v2-orange-glow-soft),
    0 18px 48px -16px var(--v2-orange-glow) !important;
}
body.v2-design .agent-card.agent-card--lead:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px var(--v2-orange-glow),
    0 24px 64px -16px var(--v2-orange-glow) !important;
}
.agent-card--lead::after {
  content: "";
  position: absolute;
  top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}
body.v2-design .agent-card .agent-card__crown {
  display: inline-block;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-orange-400) !important;
  background: rgba(249,115,22,0.14) !important;
  border: 1px solid var(--v2-orange-glow) !important;
  border-radius: 999px;
  margin: 0 0 14px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.agent-card--lead .agent-card__avatar {
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700)) !important;
  box-shadow: 0 0 0 4px rgba(249,115,22,0.12), 0 8px 24px -6px var(--v2-orange-glow) !important;
}

.agent-card__avatar {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700));
  box-shadow: 0 6px 18px -6px var(--v2-orange-glow);
}
.agent-card[data-tone="gold"] .agent-card__avatar {
  background: linear-gradient(135deg, var(--v2-gold-400), var(--v2-gold-500));
  box-shadow: 0 6px 18px -6px rgba(212,165,116,0.45);
}
.agent-card[data-tone="cool"] .agent-card__avatar {
  background: linear-gradient(135deg, #475569, #1e293b);
}
.agent-card__name {
  font-family: var(--v2-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1);
  margin: 0;
}
.agent-card__role {
  font-size: 12px;
  color: var(--v2-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 2px 0 12px;
}
.agent-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-text-2);
  margin: 0 0 14px;
}
.agent-card__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-1);
  color: var(--v2-text-3);
}
.agent-card__state[data-state="processing"] {
  background: rgba(249,115,22,0.10);
  border-color: var(--v2-orange-glow-soft);
  color: var(--v2-orange-300);
}
.agent-card__state[data-state="processing"]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-orange-400);
  box-shadow: 0 0 8px var(--v2-orange-glow);
  animation: v2-pulse-dot 1.2s ease-in-out infinite;
}
.agent-card__state[data-state="thinking"] {
  background: rgba(212,165,116,0.10);
  border-color: rgba(212,165,116,0.25);
  color: var(--v2-gold-300);
}
.agent-card__state[data-state="thinking"]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-gold-400);
  animation: v2-pulse-dot 2.4s ease-in-out infinite;
}
.agent-card__state[data-state="idle"]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-text-mute);
}
.agent-card__state[data-state="completed"] {
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.22);
  color: var(--v2-success);
  position: relative;
  overflow: hidden;
}
.agent-card__state[data-state="completed"]::before {
  content: "✓";
  font-size: 10px;
  color: var(--v2-success);
}
.agent-card__state[data-state="completed"]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid var(--v2-success);
  border-radius: 999px;
  opacity: 0;
  animation: v2-state-ripple 3s ease-out infinite;
}
@keyframes v2-state-ripple {
  0%   { transform: scale(0.95); opacity: 0.7; }
  60%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* THINKING — slow breathing glow */
.agent-card__state[data-state="thinking"] {
  animation: v2-state-breathe 2.8s ease-in-out infinite;
}
@keyframes v2-state-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,165,116,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(212,165,116,0.18); }
}

/* PROCESSING — flowing pulse bar across the chip */
.agent-card__state[data-state="processing"] {
  position: relative;
  overflow: hidden;
}
.agent-card__state[data-state="processing"]::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(249,115,22,0.32), transparent);
  animation: v2-state-flow 1.6s linear infinite;
}
@keyframes v2-state-flow {
  to { left: 110%; }
}

/* SYNCING — orbiting halo (Finn) */
.agent-card__state[data-state="syncing"],
.agent-card__state[data-state="thinking"][data-syncing] {
  position: relative;
}
.agent-card__state[data-state="syncing"]::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-orange-400);
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -3px;
  box-shadow: 0 0 8px var(--v2-orange-glow);
  animation: v2-state-orbit 2s linear infinite;
}
@keyframes v2-state-orbit {
  0%   { transform: rotate(0deg) translateX(14px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(14px) rotate(-360deg); }
}

/* IDLE — subtle dim */
.agent-card__state[data-state="idle"] {
  opacity: 0.7;
}

/* ============================================================
   v2 — gentle re-skin of remaining sections
   ============================================================ */
body.v2-design .trust-strip {
  background: transparent;
  border-top: 1px solid var(--v2-stroke-1);
  border-bottom: 1px solid var(--v2-stroke-1);
}
body.v2-design .trust-strip-inner p { color: var(--v2-text-2); }
body.v2-design .trust-strip-logos span {
  color: var(--v2-text-3);
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
}

body.v2-design .premium-section,
body.v2-design .how-it-works-section,
body.v2-design .ai-features {
  background: transparent;
}
body.v2-design .section-title {
  color: var(--v2-text-1);
  font-family: var(--v2-font-display);
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.025em;
  font-weight: 600;
}
body.v2-design .section-subtitle { color: var(--v2-text-2); }

body.v2-design .how-it-works-card,
body.v2-design .ai-feature {
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--v2-text-1);
  transition: transform var(--v2-dur-base) var(--v2-ease-out),
              border-color var(--v2-dur-base);
}
body.v2-design .how-it-works-card:hover,
body.v2-design .ai-feature:hover {
  transform: translateY(-3px);
  border-color: var(--v2-orange-glow);
}
body.v2-design .how-it-works-card h3,
body.v2-design .ai-feature h4 { color: var(--v2-text-1); }
body.v2-design .how-it-works-card p,
body.v2-design .ai-feature p { color: var(--v2-text-2); }
/* Tight scope: only the small numeric step badge inside .how-it-works-card. */
/* .how-step is reused elsewhere as a full card wrapper (e.g. Music Video page) — must not paint those. */
body.v2-design .how-it-works-card .how-step,
body.v2-design .how-it-works-section span.how-step,
body.v2-design span.how-step {
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--v2-orange-glow);
}

body.v2-design footer,
body.v2-design .footer {
  background: var(--v2-bg-deep);
  border-top: 1px solid var(--v2-stroke-1);
  color: var(--v2-text-2);
}

/* ============================================================
   v2 — WARM SWEEP across remaining marketing sections
   Kills residual cool-slate borders + navy bg drift.
   Replaces with brand burnt-orange + gold strokes.
   ============================================================ */
body.v2-design .premium-section {
  position: relative;
  background: transparent !important;
}
body.v2-design .premium-section + .premium-section {
  border-top: 1px solid var(--v2-stroke-1);
}

/* Generic card warm sweep — replaces slate borders */
body.v2-design [class*="-card"],
body.v2-design .agent-market-card,
body.v2-design .feature-callout,
body.v2-design .product-preview-card,
body.v2-design .usecase-card,
body.v2-design .integration-card,
body.v2-design .proof-card,
body.v2-design .testimonial,
body.v2-design .testimonial-card,
body.v2-design .faq-item,
body.v2-design .pricing-card,
body.v2-design .pricing-tier,
body.v2-design .feature-card,
body.v2-design .trust-card,
body.v2-design .industry-card,
body.v2-design .motion-card {
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--v2-dur-base) var(--v2-ease-out),
              border-color var(--v2-dur-base) var(--v2-ease-out),
              box-shadow var(--v2-dur-base) var(--v2-ease-out);
}
body.v2-design [class*="-card"]:hover,
body.v2-design .agent-market-card:hover,
body.v2-design .feature-callout:hover,
body.v2-design .usecase-card:hover,
body.v2-design .integration-card:hover,
body.v2-design .proof-card:hover,
body.v2-design .testimonial:hover,
body.v2-design .pricing-card:hover,
body.v2-design .pricing-tier:hover,
body.v2-design .feature-card:hover,
body.v2-design .industry-card:hover {
  transform: translateY(-2px);
  border-color: var(--v2-orange-glow) !important;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}

/* Headings inside marketing sections — unify type */
body.v2-design h2.section-title,
body.v2-design h3,
body.v2-design h4 {
  font-family: var(--v2-font-display);
  letter-spacing: -0.02em;
  color: var(--v2-text-1);
}
body.v2-design p,
body.v2-design li {
  color: var(--v2-text-2);
}
body.v2-design small,
body.v2-design .muted,
body.v2-design .section-meta {
  color: var(--v2-text-3);
}

/* Gradient text (used for hero accent in old hero) — re-tone to brand */
body.v2-design .gradient-text {
  background: linear-gradient(90deg, var(--v2-orange-300), var(--v2-gold-400), var(--v2-orange-500));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: v2-shimmer 6s linear infinite;
}

/* Navy fallback section bg (agent-marketplace) → warm */
body.v2-design .agent-marketplace-section,
body.v2-design .agent-marketplace {
  background:
    radial-gradient(800px 500px at 80% 30%, rgba(249,115,22,0.08), transparent 60%),
    radial-gradient(700px 500px at 10% 80%, rgba(212,165,116,0.06), transparent 60%),
    var(--v2-bg-base) !important;
}

/* Pricing accent re-tone */
body.v2-design .toggle-btn.active {
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700)) !important;
  border-color: var(--v2-orange-glow) !important;
  color: #fff !important;
}
body.v2-design .toggle-btn {
  color: var(--v2-text-2) !important;
  border-color: var(--v2-stroke-2) !important;
}
body.v2-design .save-badge {
  background: var(--v2-gold-400) !important;
  color: #1a1410 !important;
}
body.v2-design .pricing-roi {
  color: var(--v2-gold-300) !important;
}

/* CTA section glow */
body.v2-design .cta {
  position: relative;
  isolation: isolate;
}
body.v2-design .cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(249,115,22,0.12), transparent 60%);
  z-index: -1;
}

/* Footer headings warm */
body.v2-design footer h3,
body.v2-design footer h4,
body.v2-design footer strong {
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font-display);
}
body.v2-design footer a {
  color: var(--v2-text-2) !important;
  transition: color var(--v2-dur-fast) var(--v2-ease-out);
}
body.v2-design footer a:hover {
  color: var(--v2-orange-400) !important;
}

/* Section title eyebrow — used by section-header pattern */
body.v2-design .section-header {
  text-align: center;
}
body.v2-design .section-header .section-eyebrow,
body.v2-design .section-header > span:first-child:not(.section-title) {
  color: var(--v2-orange-400) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

/* Inputs/forms warm */
body.v2-design input[type="text"],
body.v2-design input[type="email"],
body.v2-design textarea {
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-1) !important;
}
body.v2-design input::placeholder { color: var(--v2-text-mute) !important; }

/* Workspace badges in old hero workspace card (still used in product-preview-section) — recolor */
body.v2-design .workspace-badge {
  border: 1px solid var(--v2-stroke-2);
}
body.v2-design .workspace-badge.warning {
  background: rgba(251,191,36,0.12) !important;
  color: var(--v2-warn) !important;
  border-color: rgba(251,191,36,0.28) !important;
}
body.v2-design .workspace-badge.info {
  background: rgba(212,165,116,0.12) !important;
  color: var(--v2-gold-300) !important;
  border-color: rgba(212,165,116,0.28) !important;
}
body.v2-design .workspace-badge.success {
  background: rgba(52,211,153,0.10) !important;
  color: var(--v2-success) !important;
  border-color: rgba(52,211,153,0.25) !important;
}

/* ============================================================
   COMMAND CENTER mockup section (Stitch-inspired)
   ============================================================ */
.v2-cmd-section { padding: 80px 0 100px; }

.cmd-center {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: 0;
  background: linear-gradient(180deg, rgba(28,25,23,0.7), rgba(10,9,8,0.5));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 60px 120px -40px rgba(0,0,0,0.7),
    0 0 0 1px var(--v2-stroke-1);
  min-height: 620px;
}

/* SIDEBAR */
.cmd-sidebar {
  background: var(--v2-bg-deep);
  border-right: 1px solid var(--v2-stroke-1);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cmd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 10px;
}
.cmd-brand__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff;
  flex-shrink: 0;
}
.cmd-brand strong {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cmd-brand span {
  font-size: 10px;
  color: var(--v2-orange-300);
  letter-spacing: 0.08em;
  font-weight: 500;
}

.cmd-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.cmd-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-2) !important;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--v2-dur-fast), color var(--v2-dur-fast), border-color var(--v2-dur-fast);
}
.cmd-nav__item:hover {
  background: var(--v2-bg-elev-1);
  color: var(--v2-text-1) !important;
}
.cmd-nav__item.is-active {
  background: rgba(249,115,22,0.10);
  color: var(--v2-orange-300) !important;
  border-color: var(--v2-orange-glow-soft);
  position: relative;
}
.cmd-nav__item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--v2-orange-500);
  border-radius: 2px;
}
.cmd-nav__icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cmd-sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--v2-stroke-1);
}
.cmd-nav__item--mini {
  font-size: 12px;
  padding: 7px 12px;
  color: var(--v2-text-3) !important;
}

/* CANVAS */
.cmd-canvas {
  position: relative;
  padding: 18px 24px 24px;
  background:
    radial-gradient(600px 400px at 50% 50%, rgba(249,115,22,0.06), transparent 70%),
    var(--v2-bg-base);
  display: flex;
  flex-direction: column;
}
.cmd-canvas__topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--v2-stroke-1);
  margin-bottom: 18px;
}
.cmd-tab {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-text-3) !important;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  position: relative;
  transition: color var(--v2-dur-fast);
}
.cmd-tab.is-active {
  color: var(--v2-orange-400) !important;
}
.cmd-tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -19px; height: 2px;
  background: var(--v2-orange-500);
  border-radius: 2px 2px 0 0;
}
.cmd-canvas__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmd-icon-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-2) !important;
  cursor: pointer;
}
.cmd-deploy {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff !important;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 6px 16px -4px var(--v2-orange-glow), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform var(--v2-dur-fast) var(--v2-ease-spring);
}
.cmd-deploy:hover { transform: translateY(-1px); }

.cmd-chain {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  padding: 4px 12px 12px;
  min-height: 460px;
}
.cmd-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* AGENT CARDS in chain */
.cmd-card {
  position: relative;
  z-index: 1;
  width: 320px;
  padding: 20px;
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  border-radius: 16px;
  transition: transform var(--v2-dur-base) var(--v2-ease-out), border-color var(--v2-dur-base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cmd-card:nth-child(2)  { align-self: flex-start; }
.cmd-card:nth-child(3)  { align-self: flex-end; max-width: 320px; transform: translateX(-40px); }
.cmd-card:nth-child(4)  { align-self: center; }
.cmd-card:hover {
  transform: translateY(-2px);
  border-color: var(--v2-orange-glow) !important;
}
body.v2-design .cmd-card.cmd-card--ready {
  box-shadow: 0 0 0 1px rgba(249,115,22,0.30), 0 18px 40px -16px var(--v2-orange-glow) !important;
  border-color: var(--v2-orange-glow) !important;
  background: linear-gradient(180deg, rgba(249,115,22,0.04), var(--v2-bg-elev-1)) !important;
}
body.v2-design .cmd-card.cmd-card--processing {
  box-shadow: 0 0 0 1px var(--v2-orange-glow), 0 0 60px -10px var(--v2-orange-glow) !important;
  border-color: var(--v2-orange-500) !important;
  background: linear-gradient(180deg, rgba(249,115,22,0.08), rgba(249,115,22,0.01)) !important;
}
body.v2-design .cmd-card.cmd-card--pending {
  background: linear-gradient(180deg, rgba(251,191,36,0.08), rgba(251,191,36,0.01)) !important;
  border-color: rgba(251,191,36,0.35) !important;
  box-shadow: 0 0 0 1px rgba(251,191,36,0.22), 0 12px 32px -16px rgba(251,191,36,0.30) !important;
}
.cmd-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cmd-card__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-text-2);
}
.cmd-card__icon--accent {
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff;
  border-color: var(--v2-orange-glow);
  box-shadow: 0 4px 16px -4px var(--v2-orange-glow);
}
.cmd-card__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cmd-card__badge--ready {
  background: rgba(249,115,22,0.12) !important;
  color: var(--v2-orange-300) !important;
  border: 1px solid var(--v2-orange-glow-soft);
}
.cmd-card__badge--processing {
  background: rgba(249,115,22,0.16) !important;
  color: var(--v2-orange-300) !important;
  border: 1px solid var(--v2-orange-glow);
}
.cmd-card__badge--pending {
  background: rgba(251,191,36,0.14) !important;
  color: var(--v2-warn) !important;
  border: 1px solid rgba(251,191,36,0.32);
}
.cmd-card__badge .cmd-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-orange-400);
  box-shadow: 0 0 8px var(--v2-orange-glow);
  animation: v2-pulse-dot 1.2s ease-in-out infinite;
}
.cmd-card__title {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0 0 4px;
}
.cmd-card__desc {
  font-size: 13px;
  color: var(--v2-text-3) !important;
  margin: 0 0 14px;
  line-height: 1.5;
}
.cmd-card__progress {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}
.cmd-card__bar {
  height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--v2-orange-600), var(--v2-orange-400));
  border-radius: 999px;
  box-shadow: 0 0 8px var(--v2-orange-glow);
  transition: width 1.2s var(--v2-ease-out);
}
.cmd-card__bar[data-cmd-anim="grow"] {
  animation: v2-cmd-grow 4s ease-in-out infinite;
}
@keyframes v2-cmd-grow {
  0%, 100% { width: 35%; }
  50%      { width: 70%; }
}
.cmd-card__attrib {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  color: var(--v2-text-mute) !important;
  letter-spacing: 0.04em;
  font-style: italic;
}
.cmd-card__cta-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.cmd-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--v2-stroke-2);
  background: var(--v2-bg-elev-2);
  color: var(--v2-text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  transition: background var(--v2-dur-fast), border-color var(--v2-dur-fast);
}
.cmd-btn--approve {
  flex: 1;
}
.cmd-btn--approve:hover {
  background: rgba(52,211,153,0.10);
  border-color: rgba(52,211,153,0.30);
  color: var(--v2-success);
}
.cmd-btn--reject {
  flex: 0 0 38px;
  padding: 10px;
  color: var(--v2-text-3);
}
.cmd-btn--reject:hover {
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.30);
  color: var(--v2-danger);
}

.cmd-add-node {
  align-self: flex-end;
  margin-top: -8px;
  margin-right: 14px;
  width: 56px; height: 56px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 1px var(--v2-orange-glow-soft),
    0 12px 28px -8px var(--v2-orange-glow),
    inset 0 1px 0 rgba(255,255,255,0.20);
  transition: transform var(--v2-dur-fast) var(--v2-ease-spring);
  position: relative;
  z-index: 2;
}
.cmd-add-node:hover { transform: translateY(-2px) rotate(90deg); }

/* LOGIC PANEL */
.cmd-logic {
  background: var(--v2-bg-deep);
  border-left: 1px solid var(--v2-stroke-1);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cmd-logic__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cmd-logic__head h3 {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1) !important;
  margin: 0;
}
.cmd-logic__active {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
}
.cmd-logic__active-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px var(--v2-orange-glow);
}
.cmd-logic__active strong {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
}
.cmd-logic__active span {
  font-size: 10px;
  color: var(--v2-orange-300) !important;
  letter-spacing: 0.10em;
  font-weight: 600;
}

.cmd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmd-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--v2-text-3) !important;
}
.cmd-field__value {
  padding: 10px 12px;
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  border-radius: 10px;
  font-size: 13px;
  color: var(--v2-text-1) !important;
}
.cmd-field__value--pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cmd-field__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--v2-success);
  box-shadow: 0 0 6px rgba(52,211,153,0.6);
}
.cmd-field__value--block {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--v2-text-2) !important;
  font-style: italic;
}

.cmd-perf {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--v2-stroke-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmd-perf__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--v2-text-3) !important;
}
.cmd-perf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cmd-perf__tile {
  padding: 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.cmd-perf__tile-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--v2-text-3) !important;
}
.cmd-perf__tile-num {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-orange-400) !important;
}
.cmd-perf__tile-num small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 1px;
  color: var(--v2-text-3);
}
.cmd-perf__tile-num--gold {
  color: var(--v2-gold-300) !important;
}

/* LIVE STREAMING DEMO */
.cmd-stream {
  margin-top: 18px;
  padding: 18px 22px 16px;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(249,115,22,0.06), transparent 70%),
    var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.cmd-stream::before {
  content: "";
  position: absolute;
  top: -1px; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}
.cmd-stream__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cmd-stream__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.10), 0 4px 16px -4px var(--v2-orange-glow);
  flex-shrink: 0;
}
.cmd-stream__head strong {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  letter-spacing: -0.01em;
}
.cmd-stream__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--v2-text-3);
  letter-spacing: 0.02em;
}
.cmd-stream__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--v2-success);
  box-shadow: 0 0 8px rgba(52,211,153,0.6);
  animation: v2-pulse-dot 1.6s ease-in-out infinite;
}
.cmd-stream__counter {
  margin-left: auto;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--v2-text-mute);
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  padding: 4px 10px;
  border-radius: 999px;
}
.cmd-stream__body {
  font-family: var(--v2-font-display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--v2-text-1);
  letter-spacing: -0.01em;
  min-height: 60px;
  padding: 12px 14px;
  background: var(--v2-bg-base);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 12px;
  margin-bottom: 12px;
}
.cmd-stream__caret {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--v2-orange-400);
  border-radius: 1px;
  animation: v2-stream-caret 0.9s steps(2) infinite;
  box-shadow: 0 0 6px var(--v2-orange-glow);
}
@keyframes v2-stream-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.15; }
}
.cmd-stream__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmd-stream__pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-text-2);
  padding: 4px 10px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
}
.cmd-stream__pill--gold {
  color: var(--v2-gold-300);
  background: rgba(212,165,116,0.10);
  border-color: rgba(212,165,116,0.25);
}
.cmd-stream__pill--ok {
  color: var(--v2-success);
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.22);
}

/* STATUS BAR */
.cmd-status-bar {
  margin-top: 18px;
  padding: 12px 22px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--v2-text-2);
}
.cmd-status__group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmd-status__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3) !important;
}
.cmd-status__dots {
  display: inline-flex;
  gap: 4px;
}
.cmd-status__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-stroke-3);
}
.cmd-status__dot.is-active {
  background: var(--v2-orange-500);
  box-shadow: 0 0 6px var(--v2-orange-glow);
}
.cmd-status__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 280px;
}
.cmd-status__step {
  font-size: 12px;
  color: var(--v2-text-2);
  white-space: nowrap;
}
.cmd-status__step strong {
  color: var(--v2-orange-400) !important;
  font-weight: 700;
}
.cmd-status__arrow {
  color: var(--v2-text-mute);
  font-size: 14px;
}
.cmd-status__bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}
.cmd-status__bar-fill {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--v2-orange-600), var(--v2-orange-400));
  border-radius: 999px;
  animation: v2-cmd-grow 4s ease-in-out infinite;
}
.cmd-status__group--meta {
  margin-left: auto;
  gap: 18px;
}
.cmd-status__meta {
  font-size: 12px;
  color: var(--v2-text-3) !important;
}
.cmd-status__green { color: var(--v2-success) !important; }
.cmd-status__gold  { color: var(--v2-gold-300) !important; }

/* ============================================================
   STORY SECTIONS — competitor intel, pipeline, examples, analytics
   ============================================================ */
.v2-story { padding: 90px 0; }

.v2-story__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.v2-story__grid--reverse {
  grid-template-columns: 1.1fr 1fr;
}
.v2-story__grid--reverse .v2-story__copy { order: 2; }
.v2-story__grid--reverse .v2-story__visual { order: 1; }

.v2-story__copy .v2-section__eyebrow { margin-bottom: 18px; }
.v2-story__copy .v2-section__title {
  text-align: left;
  margin: 0 0 16px;
}
.v2-story__copy .v2-section__sub {
  font-size: 17px;
  color: var(--v2-text-2);
  line-height: 1.55;
  margin: 0 0 24px;
}
.v2-story__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-story__bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--v2-text-2);
  line-height: 1.55;
}
.v2-story__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--v2-orange-400);
  background: rgba(249,115,22,0.12);
  border: 1px solid var(--v2-orange-glow-soft);
  border-radius: 6px;
  font-weight: 700;
}
.v2-story__stats {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.v2-story__stats > div { display: flex; flex-direction: column; }
.v2-story__stat-num {
  font-family: var(--v2-font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--v2-orange-400) !important;
  line-height: 1;
}
.v2-story__stat-label {
  font-size: 12px;
  color: var(--v2-text-3);
  margin-top: 4px;
}

/* Competitor Intelligence visual */
.comp-intel {
  padding: 22px;
  background: linear-gradient(180deg, rgba(28,25,23,0.8), rgba(10,9,8,0.6));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.comp-intel::before {
  content: "";
  position: absolute;
  top: -1px; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}
.comp-intel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v2-stroke-1);
}
.comp-intel__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.comp-intel__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--v2-success);
  letter-spacing: 0.04em;
}
.comp-intel__row {
  display: grid;
  grid-template-columns: 28px 1fr 100px 56px;
  gap: 12px;
  align-items: center;
  padding: 14px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: border-color var(--v2-dur-base);
}
.comp-intel__row:hover { border-color: var(--v2-orange-glow); }
.comp-intel__row--accent {
  border-color: var(--v2-orange-glow) !important;
  background: linear-gradient(180deg, rgba(249,115,22,0.05), rgba(249,115,22,0.01)) !important;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 12px 32px -16px var(--v2-orange-glow);
}
.comp-intel__rank {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--v2-orange-400) !important;
  text-align: center;
  letter-spacing: -0.02em;
}
.comp-intel__col strong {
  display: block;
  font-size: 13px;
  color: var(--v2-text-1) !important;
  margin-bottom: 2px;
}
.comp-intel__col span {
  font-size: 12px;
  color: var(--v2-text-3);
  line-height: 1.4;
}
.comp-intel__bar {
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.comp-intel__bar > span {
  display: block;
  height: 100%;
  width: var(--engagement, 50%);
  background: linear-gradient(90deg, var(--v2-orange-600), var(--v2-orange-400));
  border-radius: 999px;
  box-shadow: 0 0 8px var(--v2-orange-glow);
  animation: v2-comp-grow 1.6s var(--v2-ease-out) both;
}
@keyframes v2-comp-grow {
  from { width: 0; }
  to { width: var(--engagement, 50%); }
}
.comp-intel__metric {
  font-family: var(--v2-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--v2-success);
  text-align: right;
}
.comp-intel__handoff {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(249,115,22,0.08);
  border: 1px dashed var(--v2-orange-glow);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--v2-text-2);
}
.comp-intel__handoff strong { color: var(--v2-orange-400) !important; font-weight: 600; }
.comp-intel__handoff-arrow {
  color: var(--v2-orange-400);
  font-size: 16px;
  font-weight: 700;
  animation: v2-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes v2-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Pipeline timeline */
.pipe-timeline {
  padding: 22px;
  background: linear-gradient(180deg, rgba(28,25,23,0.8), rgba(10,9,8,0.6));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pipe-timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v2-stroke-1);
}
.pipe-timeline__title {
  font-family: var(--v2-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  letter-spacing: -0.01em;
}
.pipe-timeline__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--v2-success);
  letter-spacing: 0.04em;
}
.pipe-timeline__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.pipe-step {
  display: grid;
  grid-template-columns: 24px 1fr 60px;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  position: relative;
}
.pipe-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px; bottom: -10px;
  left: 11px;
  width: 2px;
  background: var(--v2-stroke-1);
}
.pipe-step--done:not(:last-child)::after {
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700));
}
.pipe-step__dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--v2-stroke-2);
  background: var(--v2-bg-elev-1);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}
.pipe-step--done .pipe-step__dot {
  background: var(--v2-orange-500);
  border-color: var(--v2-orange-glow);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
.pipe-step--done .pipe-step__dot::after {
  content: "✓";
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.pipe-step--active .pipe-step__dot {
  background: var(--v2-orange-500);
  border-color: var(--v2-orange-500);
  box-shadow: 0 0 0 4px rgba(249,115,22,0.15), 0 0 16px var(--v2-orange-glow);
  animation: v2-pulse-dot 1.6s ease-in-out infinite;
}
.pipe-step__body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.pipe-step__body span {
  font-size: 12.5px;
  color: var(--v2-text-3);
  line-height: 1.4;
}
.pipe-step--done .pipe-step__body strong,
.pipe-step--active .pipe-step__body strong {
  color: var(--v2-text-1) !important;
}
.pipe-step__time {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--v2-text-mute);
  text-align: right;
  white-space: nowrap;
  padding-top: 4px;
}
.pipe-step--active .pipe-step__time {
  color: var(--v2-orange-400);
  font-weight: 700;
}

/* ANALYTICS */
.v2-analytics { padding: 90px 0; }
.analytics-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.analytics-card {
  padding: 22px;
  background: linear-gradient(180deg, rgba(28,25,23,0.7), rgba(10,9,8,0.5));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.analytics-card--chart {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}
.analytics-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}
.analytics-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.analytics-card__num {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--v2-text-1) !important;
  margin-top: 6px;
}
.analytics-card__delta {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-success) !important;
  margin-left: 8px;
  letter-spacing: 0;
}
.analytics-card__pill {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  background: rgba(212,165,116,0.10);
  border: 1px solid rgba(212,165,116,0.25);
  color: var(--v2-gold-300) !important;
  border-radius: 999px;
}
.analytics-chart {
  flex: 1;
  width: 100%;
  height: 220px;
  margin-top: 8px;
  overflow: visible;
}
.analytics-chart__line {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: v2-chart-draw 2s var(--v2-ease-out) 0.3s forwards;
  filter: drop-shadow(0 0 6px rgba(251,146,60,0.45));
}
.analytics-chart__forecast {
  opacity: 0;
  animation: v2-chart-fade 0.8s ease-in 2s forwards;
}
.analytics-chart__pulse {
  filter: drop-shadow(0 0 8px var(--v2-orange-glow));
  animation: v2-chart-pulse 1.6s ease-in-out infinite;
}
@keyframes v2-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes v2-chart-fade { to { opacity: 1; } }
@keyframes v2-chart-pulse {
  0%, 100% { r: 4; opacity: 1; }
  50%      { r: 7; opacity: 0.5; }
}

.analytics-card--insight {
  border-color: var(--v2-orange-glow) !important;
  background: linear-gradient(180deg, rgba(249,115,22,0.08), rgba(10,9,8,0.5)) !important;
}
.analytics-card__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-orange-400) !important;
  margin-bottom: 10px;
}
.analytics-card__kicker--warn { color: var(--v2-warn) !important; }
.analytics-card h3 {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.analytics-card h3 em { color: var(--v2-orange-400); font-style: italic; }
.analytics-card p {
  font-size: 13.5px;
  color: var(--v2-text-2);
  line-height: 1.55;
  margin: 0 0 14px;
}
.analytics-card__cta-row {
  display: flex;
  gap: 8px;
}
.analytics-card--anomaly {
  border-color: rgba(251,191,36,0.30) !important;
  background: linear-gradient(180deg, rgba(251,191,36,0.06), rgba(10,9,8,0.5)) !important;
}
.analytics-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analytics-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--v2-text-2);
  line-height: 1.45;
}
.analytics-card__dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--v2-orange-400);
  margin-top: 6px;
  box-shadow: 0 0 6px var(--v2-orange-glow);
}
.analytics-card__dot--warn {
  background: var(--v2-warn);
  box-shadow: 0 0 6px rgba(251,191,36,0.5);
}

.analytics-card--bench { display: flex; flex-direction: column; gap: 10px; }
.bench-row {
  display: grid;
  grid-template-columns: 64px 1fr 32px;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  color: var(--v2-text-2);
}
.bench-row strong { color: var(--v2-text-1) !important; font-weight: 700; text-align: right; }
.bench-bar {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.bench-bar > span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--v2-orange-600), var(--v2-orange-400));
  border-radius: 999px;
  animation: v2-comp-grow 1.4s var(--v2-ease-out) both;
}
.bench-row:nth-child(1) .bench-bar > span {
  background: linear-gradient(90deg, var(--v2-orange-500), var(--v2-gold-400));
}
.bench-row:nth-child(2) .bench-bar > span,
.bench-row:nth-child(3) .bench-bar > span {
  background: var(--v2-stroke-3);
}
.analytics-card__foot {
  font-size: 12.5px;
  color: var(--v2-text-3);
  margin: 6px 0 0;
  font-style: italic;
}

/* EXAMPLES grid */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.example-card {
  padding: 22px;
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--v2-dur-base) var(--v2-ease-out), border-color var(--v2-dur-base);
  position: relative;
  overflow: hidden;
}
.example-card:hover {
  transform: translateY(-3px);
  border-color: var(--v2-orange-glow) !important;
}
.example-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.example-card__platform {
  font-weight: 700;
  color: var(--v2-orange-400) !important;
}
.example-card__niche {
  color: var(--v2-text-3);
}
.example-card__hook {
  font-family: var(--v2-font-display);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--v2-text-1) !important;
  margin: 0;
  flex: 1;
}
.example-card__chain {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.example-card__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-text-2);
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.example-card__chip--gold {
  color: var(--v2-gold-300);
  background: rgba(212,165,116,0.10);
  border-color: rgba(212,165,116,0.25);
}
.example-card__arrow { color: var(--v2-text-mute); font-size: 12px; }
.example-card__perf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--v2-stroke-1);
  font-size: 12px;
  color: var(--v2-text-3);
}
.example-card__perf strong {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-orange-400) !important;
  letter-spacing: -0.02em;
}

@media (max-width: 1100px) {
  .v2-story__grid,
  .v2-story__grid--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .v2-story__grid--reverse .v2-story__copy { order: 1; }
  .v2-story__grid--reverse .v2-story__visual { order: 2; }
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-card--chart { grid-column: 1; grid-row: auto; }
  .examples-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   AGENCY MISSION CONTROL (agency/index.html)
   ============================================================ */
.agency-mc {
  display: grid;
  grid-template-columns: 280px 1fr;
  background: linear-gradient(180deg, rgba(28,25,23,0.7), rgba(10,9,8,0.5));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6), 0 0 0 1px var(--v2-stroke-1);
  min-height: 580px;
}
.agency-mc__clients {
  background: var(--v2-bg-deep);
  border-right: 1px solid var(--v2-stroke-1);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agency-mc__rail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.agency-mc__count {
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
}
.agency-mc__client-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agency-mc__client {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--v2-dur-fast), border-color var(--v2-dur-fast);
}
.agency-mc__client:hover {
  background: var(--v2-bg-elev-1);
}
.agency-mc__client.is-active {
  background: rgba(249,115,22,0.10);
  border-color: var(--v2-orange-glow-soft);
}
.agency-mc__client-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg, var(--v2-bg-elev-2));
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.agency-mc__client-body {
  flex: 1;
  min-width: 0;
}
.agency-mc__client-body strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agency-mc__client-body span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--v2-text-3);
}
.agency-mc__client-body--more strong { color: var(--v2-text-2) !important; font-weight: 500; }

.agency-mc__health {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agency-mc__health--green { background: var(--v2-success); box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.agency-mc__health--warn  { background: var(--v2-warn);    box-shadow: 0 0 6px rgba(251,191,36,0.5); }

.agency-mc__main {
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(700px 400px at 50% -10%, rgba(249,115,22,0.06), transparent 70%),
    var(--v2-bg-base);
}
.agency-mc__main-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--v2-stroke-1);
}
.agency-mc__main-head h3 {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v2-text-1) !important;
  margin: 0 0 4px;
}
.agency-mc__breadcrumb {
  font-size: 12px;
  color: var(--v2-text-3);
  letter-spacing: 0.02em;
}
.agency-mc__actions {
  display: flex;
  gap: 8px;
}

.agency-mc__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.agency-mc__metric {
  padding: 14px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
}
.agency-mc__metric--warn {
  border-color: rgba(251,191,36,0.30) !important;
  background: linear-gradient(180deg, rgba(251,191,36,0.06), var(--v2-bg-elev-1)) !important;
}
.agency-mc__metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  display: block;
  margin-bottom: 6px;
}
.agency-mc__metric strong {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--v2-text-1) !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.agency-mc__metric-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-success) !important;
  letter-spacing: 0;
}

.agency-mc__delegation {
  padding: 14px 16px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
}
.agency-mc__delegation-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--v2-text-3);
  margin-bottom: 10px;
}
.agency-mc__delegation-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.agency-mc__chip {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-1);
  color: var(--v2-text-2);
  border-radius: 999px;
  white-space: nowrap;
}
.agency-mc__chip--active {
  background: rgba(249,115,22,0.14);
  border-color: var(--v2-orange-glow);
  color: var(--v2-orange-300);
  position: relative;
  padding-left: 22px;
}
.agency-mc__chip--active::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--v2-orange-400);
  box-shadow: 0 0 6px var(--v2-orange-glow);
  animation: v2-pulse-dot 1.2s ease-in-out infinite;
}
.agency-mc__chip--queued {
  opacity: 0.55;
}
.agency-mc__arrow { color: var(--v2-text-mute); font-size: 12px; }

.agency-mc__feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agency-mc__feed-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--v2-text-3);
}
.agency-mc__feed-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agency-mc__feed-list li {
  padding: 10px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--v2-text-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.45;
}
.agency-mc__feed-list strong {
  color: var(--v2-orange-400) !important;
  font-weight: 700;
}
.agency-mc__feed-time {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--v2-text-mute);
  flex-shrink: 0;
  width: 28px;
}

@media (max-width: 1100px) {
  .agency-mc { grid-template-columns: 1fr; }
  .agency-mc__clients { border-right: none; border-bottom: 1px solid var(--v2-stroke-1); }
  .agency-mc__metrics { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive */
@media (max-width: 1100px) {
  .cmd-center { grid-template-columns: 200px 1fr 280px; }
  .cmd-card:nth-child(3) { transform: none; align-self: center; }
}
@media (max-width: 900px) {
  .cmd-center { grid-template-columns: 1fr; }
  .cmd-sidebar, .cmd-logic { border-right: none; border-left: none; border-bottom: 1px solid var(--v2-stroke-1); }
  .cmd-status__group--meta { margin-left: 0; }
}

/* ============================================================
   v2 — KILL BLUE / SLATE / INDIGO leftovers everywhere
   Aggressive overrides on every component that still leaks
   non-warm color (37,99,235 / 148,163,184 / 129,140,248 / 139,92,246 / 191,208,236)
   ============================================================ */

/* Pipeline chips, route pills, motion nodes, niche badges — re-tone to warm */
body.v2-design .pipeline-chip,
body.v2-design .route-pill,
body.v2-design .motion-node,
body.v2-design .feed-platform,
body.v2-design .niche-badge {
  background: rgba(249, 115, 22, 0.10) !important;
  border-color: var(--v2-orange-glow-soft) !important;
  color: var(--v2-orange-300) !important;
}

/* Workspace kicker / card kicker / page eyebrow / status kicker — warm orange */
body.v2-design .workspace-kicker,
body.v2-design .card-kicker,
body.v2-design .page-eyebrow,
body.v2-design .status-kicker,
body.v2-design .breadcrumb,
body.v2-design .breadcrumb a {
  color: var(--v2-orange-400) !important;
  border-color: var(--v2-orange-glow-soft) !important;
}

/* Feed item / motion step / pipeline column / pipeline engine — warm bg */
body.v2-design .feed-item,
body.v2-design .motion-step,
body.v2-design .pipeline-column,
body.v2-design .pipeline-engine,
body.v2-design .workspace-card,
body.v2-design .product-panel,
body.v2-design .proof-panel,
body.v2-design .agent-group,
body.v2-design .status-panel,
body.v2-design .status-item,
body.v2-design .demo-input,
body.v2-design .demo-preview,
body.v2-design .demo-reasoning,
body.v2-design .demo-output-item,
body.v2-design .demo-reasoning-item,
body.v2-design .feature-table,
body.v2-design .feature-table th,
body.v2-design .feature-table td {
  background: var(--v2-bg-glass) !important;
  border-color: var(--v2-stroke-2) !important;
  color: var(--v2-text-1) !important;
}

/* Slate-tone secondary text → warm muted */
body.v2-design .price-period,
body.v2-design .stat-label,
body.v2-design .status-copy,
body.v2-design .section-meta,
body.v2-design .footer-share span,
body.v2-design .nav-meta,
body.v2-design .meta,
body.v2-design .dashboard-metrics span,
body.v2-design .dashboard-metrics div > span,
body.v2-design .author-info span,
body.v2-design .author-meta,
body.v2-design .testimonial cite,
body.v2-design .testimonial small {
  color: var(--v2-text-3) !important;
}

/* Author avatar slate border */
body.v2-design .author-avatar,
body.v2-design .testimonial-avatar {
  border-color: var(--v2-stroke-2) !important;
}

/* CTA section slate border */
body.v2-design .cta {
  border-color: var(--v2-stroke-1) !important;
}

/* Pricing-page-specific cool tints */
body.v2-design .hero-tertiary,
body.v2-design .plan-tier,
body.v2-design .faq-answer,
body.v2-design .faq-question,
body.v2-design .pricing-meta,
body.v2-design .billing-period,
body.v2-design .annual-savings,
body.v2-design .plan-meta,
body.v2-design .plan-tagline,
body.v2-design .feature-icon,
body.v2-design .checkmark {
  color: var(--v2-text-2) !important;
}
body.v2-design .billing-toggle {
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-2) !important;
  border-radius: 999px !important;
}
body.v2-design .billing-toggle.active,
body.v2-design .billing-toggle[aria-pressed="true"],
body.v2-design .billing-option.active {
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700)) !important;
  color: #fff !important;
  border-color: var(--v2-orange-glow) !important;
}
body.v2-design .billing-toggle-wrap,
body.v2-design .pricing-toggle {
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
}
body.v2-design .faq-item,
body.v2-design .pricing-faq-item {
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
}
body.v2-design .faq-question,
body.v2-design .faq-trigger,
body.v2-design summary {
  color: var(--v2-text-1) !important;
}
body.v2-design .pricing-card .plan-name,
body.v2-design .pricing-card h3,
body.v2-design .plan-name {
  color: var(--v2-text-1) !important;
}
body.v2-design .price-amount,
body.v2-design .pricing-price,
body.v2-design .plan-price {
  color: var(--v2-text-1) !important;
}
body.v2-design .plan-price span,
body.v2-design .plan-price-monthly span,
body.v2-design .pricing-price span,
body.v2-design .plan-card span,
body.v2-design .pricing-card span {
  color: inherit;
}
body.v2-design .plan-price span:not(:first-child),
body.v2-design .plan-price-monthly span:not(:first-child),
body.v2-design .price-suffix,
body.v2-design .price-period,
body.v2-design .plan-period {
  color: var(--v2-text-3) !important;
}

/* Wide net for any element with slate-only text — sweep cool grays */
body.v2-design [style*="color:#94a3b8"],
body.v2-design [style*="color:#64748b"],
body.v2-design [style*="color: #94a3b8"],
body.v2-design [style*="color: #64748b"] {
  color: var(--v2-text-2) !important;
}

/* Workspace dots / sample blocks on agency page */
body.v2-design .ws-dot {
  background: var(--v2-orange-500) !important;
  box-shadow: 0 0 8px var(--v2-orange-glow) !important;
}
body.v2-design .ws-dot.green,
body.v2-design .ws-dot.success {
  background: var(--v2-success) !important;
  box-shadow: 0 0 8px rgba(52,211,153,0.5) !important;
}
body.v2-design .ws-dot.gold {
  background: var(--v2-gold-400) !important;
  box-shadow: 0 0 8px rgba(212,165,116,0.5) !important;
}
body.v2-design .comparison-sample,
body.v2-design .compare-sample,
body.v2-design .sample-block {
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-2) !important;
}

/* Agent page: persona meta + agent-badge purple */
body.v2-design .persona-meta,
body.v2-design .persona-meta *,
body.v2-design .agent-meta,
body.v2-design .agent-status-line,
body.v2-design .last-output,
body.v2-design .agent-card-meta {
  color: var(--v2-text-3) !important;
}
body.v2-design .agent-badge,
body.v2-design .badge-most-used,
body.v2-design .badge-first {
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700)) !important;
  color: #fff !important;
  border: 1px solid var(--v2-orange-glow) !important;
}

/* Trust-badges section: rebuild as v2 glass (was getting hit by old [class*="badge"] sweep) */
body.v2-design .trust-badges-section,
body.v2-design .trust-badges-grid,
body.v2-design .trust-badge {
  background: transparent !important;
  background-image: none !important;
}
body.v2-design .trust-badges-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}
body.v2-design .trust-badge {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 18px 18px 16px !important;
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
body.v2-design .trust-badge:hover {
  transform: translateY(-2px);
  border-color: var(--v2-orange-glow) !important;
}
body.v2-design .trust-badge .badge-icon {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,106,0,0.18), rgba(255,106,0,0.06));
  border: 1px solid var(--v2-orange-glow);
  border-radius: 10px;
  color: var(--v2-orange-300);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255,106,0,0);
  transition: transform 360ms var(--v2-ease-spring), box-shadow 360ms var(--v2-ease-out);
}
body.v2-design .trust-badge:hover .badge-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 22px -8px var(--v2-orange-glow);
}
body.v2-design .trust-badge .badge-icon svg {
  position: relative;
  z-index: 2;
  transition: transform 600ms var(--v2-ease-out);
}
body.v2-design .trust-badge:hover .badge-icon svg { transform: scale(1.1); }
body.v2-design .badge-icon__pulse {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid var(--v2-orange-glow);
  pointer-events: none;
  animation: v2-badge-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.trust-badge:nth-child(2) .badge-icon__pulse { animation-delay: 0.4s; }
.trust-badge:nth-child(3) .badge-icon__pulse { animation-delay: 0.8s; }
.trust-badge:nth-child(4) .badge-icon__pulse { animation-delay: 1.2s; }
@keyframes v2-badge-pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  60%  { transform: scale(1.45); opacity: 0;   }
  100% { transform: scale(1.45); opacity: 0;   }
}

/* Subtle border-glow sweep on hover for the whole card */
body.v2-design .trust-badge {
  position: relative;
  overflow: hidden;
}
body.v2-design .trust-badge::before {
  content: "";
  position: absolute;
  top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
  opacity: 0;
  transition: opacity 360ms var(--v2-ease-out);
}
body.v2-design .trust-badge:hover::before { opacity: 1; }
body.v2-design .trust-badge .badge-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
body.v2-design .trust-badge .badge-text strong {
  font-family: var(--v2-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1) !important;
}
body.v2-design .trust-badge .badge-text span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v2-text-2) !important;
}
@media (max-width: 1100px) {
  body.v2-design .trust-badges-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  body.v2-design .trust-badges-grid { grid-template-columns: 1fr !important; }
}

/* Generic: any text color in slate gray range → warm muted */
body.v2-design [style*="color:rgb(100"],
body.v2-design [style*="color: rgb(100"] {
  color: var(--v2-text-3) !important;
}

/* Caption Studio: brand-voice step nums (was purple) + similar */
body.v2-design .bv-step-num,
body.v2-design .step-num,
body.v2-design [class*="step-num"]:not(.three-card__num) {
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700)) !important;
  color: #fff !important;
}

/* Use-cases page: personalizer panel + indigo pills */
body.v2-design .personalizer-summary,
body.v2-design .personalizer-summary *,
body.v2-design .personalizer-meta,
body.v2-design .filter-summary,
body.v2-design .filter-summary * {
  color: var(--v2-text-2) !important;
}
body.v2-design .personalizer-pill,
body.v2-design .filter-pill,
body.v2-design .tag-pill,
body.v2-design [class*="-pill"]:not(.flow-orchestrator__pill):not(.pipeline-chip):not(.route-pill):not(.toggle-btn) {
  background: rgba(249,115,22,0.10) !important;
  border: 1px solid var(--v2-orange-glow-soft) !important;
  color: var(--v2-orange-300) !important;
}
body.v2-design .personalizer-panel,
body.v2-design .filter-panel,
body.v2-design .filter-bar {
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
}

/* Generic outline/secondary buttons — warm glass */
body.v2-design .btn-outline {
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--v2-dur-fast), background var(--v2-dur-fast), transform var(--v2-dur-fast) var(--v2-ease-spring);
}
body.v2-design .btn-outline:hover {
  background: var(--v2-bg-glass-strong) !important;
  border-color: var(--v2-orange-glow) !important;
  color: var(--v2-text-1) !important;
  transform: translateY(-1px);
}

/* Avatar / author images that drifted purple */
body.v2-design .author-avatar,
body.v2-design .testimonial-avatar,
body.v2-design .avatar,
body.v2-design [class*="avatar"]:not(.flow-orchestrator__avatar):not(.agent-card__avatar) {
  background: linear-gradient(135deg, var(--v2-orange-500), var(--v2-orange-700)) !important;
  color: #fff !important;
}

/* Status dots with cool tints */
body.v2-design .status-dot {
  background: var(--v2-success);
  box-shadow: 0 0 8px rgba(52,211,153,0.6);
}
body.v2-design .status-dot.info {
  background: var(--v2-gold-400) !important;
  box-shadow: 0 0 8px rgba(212,165,116,0.5) !important;
}
body.v2-design .status-dot.warning {
  background: var(--v2-warn) !important;
  box-shadow: 0 0 8px rgba(251,191,36,0.5) !important;
}

/* Section alt — warmer alternate background */
body.v2-design .section-alt,
body.v2-design .section-block.section-alt {
  background:
    radial-gradient(800px 400px at 50% 50%, rgba(249,115,22,0.05), transparent 60%),
    var(--v2-bg-deep) !important;
  border-top: 1px solid var(--v2-stroke-1);
  border-bottom: 1px solid var(--v2-stroke-1);
}

/* Conversion hero (used on subpages) — kill any stale cool bg */
body.v2-design .conversion-hero {
  background: transparent !important;
}
body.v2-design .conversion-hero h1,
body.v2-design .conversion-hero .hero-title {
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font-display);
  letter-spacing: -0.025em;
}

/* Feature table on features page */
body.v2-design .feature-table thead th {
  background: var(--v2-bg-elev-1) !important;
  color: var(--v2-text-1) !important;
  border-bottom: 1px solid var(--v2-stroke-2) !important;
}
body.v2-design .feature-table tbody tr {
  border-bottom: 1px solid var(--v2-stroke-1) !important;
}

/* Trust strip logos / badges */
body.v2-design .trust-strip-logos span,
body.v2-design .trust-badge,
body.v2-design .trust-card,
body.v2-design .trust-item {
  background: var(--v2-bg-elev-1) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  color: var(--v2-text-2) !important;
}

/* Footer bottom row — kill light-blue cast (191,208,236) */
body.v2-design .footer-bottom,
body.v2-design .footer-bottom p,
body.v2-design .footer-bottom span,
body.v2-design .footer-share,
body.v2-design .footer-share a,
body.v2-design footer .legal,
body.v2-design footer .copy {
  color: var(--v2-text-3) !important;
  border-color: var(--v2-stroke-1) !important;
}
body.v2-design .footer-bottom a:hover,
body.v2-design .footer-share a:hover {
  color: var(--v2-orange-400) !important;
}

/* ============================================================
   Reveal-on-scroll utility (v2 only)
   ============================================================ */
body.v2-design [data-v2-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--v2-ease-out), transform 700ms var(--v2-ease-out);
  will-change: opacity, transform;
}
body.v2-design [data-v2-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
body.v2-design [data-v2-reveal][data-v2-delay="1"] { transition-delay: 80ms; }
body.v2-design [data-v2-reveal][data-v2-delay="2"] { transition-delay: 160ms; }
body.v2-design [data-v2-reveal][data-v2-delay="3"] { transition-delay: 240ms; }
body.v2-design [data-v2-reveal][data-v2-delay="4"] { transition-delay: 320ms; }
body.v2-design [data-v2-reveal][data-v2-delay="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  body.v2-design *,
  body.v2-design *::before,
  body.v2-design *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.v2-design [data-v2-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .agents-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .flow-stage {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
  }
  .flow-orchestrator { margin: 8px 0; }
  .flow-svg { display: none; }
}
@media (max-width: 640px) {
  .hero-v2 { padding: 90px 0 60px; }
  .hero-v2__title { font-size: clamp(34px, 9vw, 48px); }
  .hero-v2__cta-row .v2-btn { width: 100%; justify-content: center; }
  .agents-grid { grid-template-columns: 1fr; }
  .hero-v2__kpis { grid-template-columns: 1fr; }
  .hero-v2__kpi { border-right: none; border-bottom: 1px solid var(--v2-stroke-1); padding: 12px 0; }
  .hero-v2__kpi:last-child { border-bottom: none; }
}


/* ============================================================
   LANDING REWORK — multi-vertical, three-steps, products, compliance, final
   ============================================================ */

/* Multi-vertical grid (composio "For You"-style) */
.v2-verticals { padding: 90px 0; }
.vert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.vert-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--v2-dur-base) var(--v2-ease-out), border-color var(--v2-dur-base), box-shadow var(--v2-dur-base);
  overflow: hidden;
}
.vert-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
  opacity: 0;
  transition: opacity var(--v2-dur-base);
}
.vert-card:hover {
  transform: translateY(-3px);
  border-color: var(--v2-orange-glow) !important;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}
.vert-card:hover::before { opacity: 1; }
.vert-card__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-orange-400);
  margin-bottom: 4px;
}
.vert-card--gold .vert-card__icon {
  background: rgba(255,194,122,0.10);
  border-color: rgba(255,194,122,0.30);
  color: var(--v2-gold-300);
}
.vert-card h3 {
  font-family: var(--v2-font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0;
}
.vert-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v2-text-2) !important;
  margin: 0;
  flex: 1;
}
.vert-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-orange-400) !important;
}
.vert-card__cta--gold { color: var(--v2-gold-300) !important; }
.vert-card__arrow {
  display: inline-block;
  transition: transform var(--v2-dur-fast) var(--v2-ease-out);
}
.vert-card:hover .vert-card__arrow { transform: translateX(4px); }

/* Three steps (arcai-style numbered phases) */
.v2-three-steps { padding: 90px 0; }
.three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
}
.three-card {
  padding: 28px 24px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.three-card:hover { transform: translateY(-3px); border-color: var(--v2-orange-glow) !important; }
.three-card__num {
  font-family: var(--v2-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--v2-text-mute);
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v2-stroke-1);
  margin-bottom: 4px;
}
.three-card--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01)) !important;
  border-color: var(--v2-orange-glow) !important;
}
.three-card--accent .three-card__num { color: var(--v2-orange-400); }
.three-card h3 {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v2-text-1) !important;
  margin: 0;
}
.three-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--v2-text-2) !important;
  margin: 0;
  flex: 1;
}
.three-card__example {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 10px;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--v2-text-3) !important;
  letter-spacing: 0.01em;
}

/* Products showcase (3 surface previews) */
.v2-products { padding: 90px 0; }
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.prod-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.prod-card:hover { transform: translateY(-4px); border-color: var(--v2-orange-glow) !important; }
.prod-card__shot {
  position: relative;
  height: 200px;
  background: var(--v2-bg-deep);
  border-bottom: 1px solid var(--v2-stroke-1);
  overflow: hidden;
}
.prod-card h3 {
  font-family: var(--v2-font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0;
  padding: 0 22px;
}
.prod-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v2-text-2) !important;
  margin: 0;
  padding: 0 22px;
  flex: 1;
}
.prod-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-orange-400);
  padding: 0 22px 22px;
}

/* Caption shot */
.prod-shot {
  position: absolute;
  inset: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prod-shot__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prod-shot__row--alt { margin-top: auto; }
.prod-shot__chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 6px;
  color: var(--v2-text-2);
  width: 60px;
  text-align: center;
}
.prod-shot__chip--gold {
  background: rgba(255,194,122,0.12);
  border-color: rgba(255,194,122,0.30);
  color: var(--v2-gold-300);
}
.prod-shot__bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
}
.prod-shot__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--v2-orange-600), var(--v2-orange-400));
  border-radius: 4px;
  box-shadow: 0 0 8px var(--v2-orange-glow);
  animation: v2-prod-grow 1.6s var(--v2-ease-out) both;
}
.prod-shot__bar--ok::after {
  background: linear-gradient(90deg, var(--v2-success), #6ee7b7);
  box-shadow: 0 0 8px rgba(52,211,153,0.5);
}
@keyframes v2-prod-grow {
  from { width: 0; }
  to { width: var(--w, 0%); }
}

/* Video shot */
.prod-shot--video {
  inset: 0;
  padding: 22px;
  background:
    radial-gradient(400px 200px at 50% 100%, rgba(255,106,0,0.10), transparent 70%);
}
.prod-shot__waveform {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
  padding-bottom: 24px;
}
.prod-shot__waveform > span {
  flex: 1;
  height: var(--h, 30%);
  background: linear-gradient(180deg, var(--v2-orange-400), var(--v2-orange-700));
  border-radius: 2px;
  box-shadow: 0 0 6px var(--v2-orange-glow-soft);
  opacity: 0.8;
  animation: v2-wave 1.6s ease-in-out infinite alternate;
}
.prod-shot__waveform > span:nth-child(2n) { animation-delay: 0.2s; }
.prod-shot__waveform > span:nth-child(3n) { animation-delay: 0.5s; }
.prod-shot__waveform > span:nth-child(4n) { animation-delay: 0.8s; }
@keyframes v2-wave {
  to { transform: scaleY(0.55); }
}
.prod-shot__playhead {
  position: absolute;
  top: 22px; bottom: 50px; left: 38%;
  width: 2px;
  background: var(--v2-gold-300);
  box-shadow: 0 0 6px rgba(255,194,122,0.6);
}
.prod-shot__time {
  position: absolute;
  bottom: 16px; left: 22px;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--v2-text-3);
  letter-spacing: 0.04em;
}

/* Agent hub shot */
.prod-shot--agent {
  inset: 0;
  padding: 0;
}
.prod-shot__node {
  position: absolute;
  top: 50%; left: 50%;
  margin: -22px 0 0 -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255,106,0,0.12), 0 6px 20px var(--v2-orange-glow);
  z-index: 2;
}
.prod-shot__node::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--v2-orange-glow);
  animation: v2-orbit-ring 3s ease-in-out infinite;
}
.prod-shot__line {
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 1.5px;
  background: linear-gradient(90deg, var(--v2-orange-500), transparent);
  transform-origin: 0 0;
  opacity: 0.7;
}
.prod-shot__line--1 { transform: rotate(-32deg) translate(28px, -1px); }
.prod-shot__line--2 { transform: rotate(0deg) translate(28px, -1px); }
.prod-shot__line--3 { transform: rotate(32deg) translate(28px, -1px); }
.prod-shot__pill {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-text-1);
  border-radius: 999px;
}
.prod-shot__pill--1 { top: 24%; right: 14%; }
.prod-shot__pill--2 { top: 50%; right: 8%; transform: translateY(-50%); }
.prod-shot__pill--3 { bottom: 24%; right: 14%; }

/* 6-col examples grid */
.examples-grid--6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
  .examples-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* Compliance trust strip */
.v2-compliance { padding: 60px 0; }
.compliance-strip {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 36px;
  align-items: center;
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(28,25,23,0.6), rgba(11,13,18,0.4));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.compliance-strip__lead h3 {
  font-family: var(--v2-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v2-text-1) !important;
  margin: 12px 0 0;
  line-height: 1.2;
}
.compliance-strip__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.compliance-strip__badges li {
  padding: 14px 16px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--v2-dur-base);
}
.compliance-strip__badges li:hover { border-color: var(--v2-orange-glow); }
.compliance-strip__badges strong {
  font-family: var(--v2-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-orange-400) !important;
  letter-spacing: -0.005em;
}
.compliance-strip__badges span {
  font-size: 11px;
  color: var(--v2-text-3);
  letter-spacing: 0.04em;
}

/* Final CTA */
.v2-final { padding: 100px 0 120px; }
.final-cta {
  text-align: center;
  padding: 70px 40px;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(255,106,0,0.12), transparent 70%),
    var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: -1px; left: 28%; right: 28%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}
.final-cta__title {
  font-family: var(--v2-font-display);
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--v2-text-1) !important;
  margin: 0 0 14px;
}
.final-cta__sub {
  font-size: 17px;
  color: var(--v2-text-2);
  margin: 0 auto 28px;
  max-width: 56ch;
}
.final-cta__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   MISSING ACTIVITY STATES (per blueprint)
   ============================================================ */
.agent-card__state[data-state="waiting-approval"] {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.28);
  color: var(--v2-warn);
  position: relative;
}
.agent-card__state[data-state="waiting-approval"]::before {
  content: "\2392";
  font-size: 10px;
  color: var(--v2-warn);
  animation: v2-state-tilt 2.4s ease-in-out infinite;
}
@keyframes v2-state-tilt {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(15deg); }
}

.agent-card__state[data-state="failed"] {
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.28);
  color: var(--v2-danger);
}
.agent-card__state[data-state="failed"]::before {
  content: "!";
  font-size: 11px;
  font-weight: 700;
  color: var(--v2-danger);
  animation: v2-state-shake 2s ease-in-out infinite;
}
@keyframes v2-state-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-1.5px); }
  40%, 80% { transform: translateX(1.5px); }
}

.agent-card__state[data-state="learning"] {
  background: rgba(255,194,122,0.10);
  border-color: rgba(255,194,122,0.28);
  color: var(--v2-gold-300);
  position: relative;
  overflow: hidden;
}
.agent-card__state[data-state="learning"]::before {
  content: "\2726";
  font-size: 10px;
  color: var(--v2-gold-300);
  animation: v2-state-rotate 4s linear infinite;
}
@keyframes v2-state-rotate { to { transform: rotate(360deg); } }

/* ============================================================
   MISSING MICROINTERACTIONS (per blueprint)
   ============================================================ */
/* Magnetic button */
.v2-magnetic { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Number-count animate-on-reveal helper */
.v2-num { display: inline-block; }
.v2-num.is-counting { animation: v2-num-pop 0.4s var(--v2-ease-spring); }
@keyframes v2-num-pop {
  0% { transform: scale(0.92); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

/* Glow sweep on important actions */
.v2-glow-sweep { position: relative; overflow: hidden; }
.v2-glow-sweep::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,106,0,0.18), transparent);
  pointer-events: none;
  animation: v2-glow-sweep 2.6s ease-in-out infinite;
}
@keyframes v2-glow-sweep {
  to { left: 200%; }
}

/* AI thinking loading state */
.v2-loading-ai {
  display: inline-flex;
  gap: 4px;
}
.v2-loading-ai span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v2-orange-400);
  box-shadow: 0 0 6px var(--v2-orange-glow);
  animation: v2-loading-ai 1.2s ease-in-out infinite;
}
.v2-loading-ai span:nth-child(2) { animation-delay: 0.15s; }
.v2-loading-ai span:nth-child(3) { animation-delay: 0.30s; }
@keyframes v2-loading-ai {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.7); }
  40%           { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 1100px) {
  .vert-grid { grid-template-columns: repeat(2, 1fr); }
  .three-grid { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .compliance-strip { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  .compliance-strip__badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vert-grid { grid-template-columns: 1fr; }
  .compliance-strip__badges { grid-template-columns: 1fr; }
  .examples-grid--6 { grid-template-columns: 1fr; }
}


/* ============================================================
   AGENT PAGE — hero avatars rail, architecture frame, states grid
   ============================================================ */
.agent-page-hero { min-height: auto; padding: 110px 0 60px; }

.agent-hero-avatars {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.agent-hero-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg, var(--v2-bg-elev-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 3px var(--v2-bg-base), 0 6px 18px -6px var(--v2-orange-glow);
  margin-left: -10px;
  transition: transform var(--v2-dur-base) var(--v2-ease-spring);
}
.agent-hero-avatar:first-child { margin-left: 0; }
.agent-hero-avatar:hover { transform: translateY(-3px) scale(1.06); z-index: 2; }
.agent-hero-avatar-label {
  margin-left: 14px;
  font-size: 13px;
  color: var(--v2-text-3);
  letter-spacing: 0.02em;
}

/* Architecture frame */
.agent-architecture { padding: 90px 0; }
.arch-frame {
  position: relative;
  padding: 28px;
  background: linear-gradient(180deg, rgba(28,25,23,0.65), rgba(11,13,18,0.5));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.arch-frame::before {
  content: "";
  position: absolute;
  top: -1px; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}
.arch-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--v2-stroke-1);
}
/* Hide image if 404, show fallback */
.arch-image[src=""],
.arch-image:not([src]) { display: none; }
.arch-image { background: var(--v2-bg-deep); }
/* Fallback simple flow if image missing */
.arch-frame__fallback {
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 30px 0;
}
.arch-frame:has(.arch-image[src*="agent-blueprint"]:not([data-broken])) .arch-frame__fallback { display: none; }
.arch-frame img.arch-image[data-broken] + .arch-frame__fallback,
.arch-frame:not(:has(img:not([data-broken]))) .arch-frame__fallback { display: grid; }
.arch-frame__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.arch-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  margin-bottom: 6px;
}
.arch-pill {
  padding: 8px 14px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  font-size: 13px;
  color: var(--v2-text-1);
}
.arch-frame__hub {
  text-align: center;
  padding: 22px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-orange-glow);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 0 60px -20px var(--v2-orange-glow);
}
.arch-frame__hub strong {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 18px;
  color: var(--v2-text-1) !important;
  letter-spacing: -0.01em;
}
.arch-frame__hub span {
  font-size: 11px;
  color: var(--v2-orange-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arch-note {
  text-align: center;
  font-size: 12px;
  color: var(--v2-text-mute);
  margin: 16px 0 0;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
}
.arch-note code {
  background: var(--v2-bg-elev-1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--v2-stroke-1);
  color: var(--v2-orange-300);
}

/* Activity States Grid */
.states-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.state-tile {
  padding: 22px 20px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--v2-dur-base);
}
.state-tile:hover { border-color: var(--v2-orange-glow); }
.state-tile p {
  font-size: 13px;
  color: var(--v2-text-2) !important;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .states-grid { grid-template-columns: repeat(2, 1fr); }
  .arch-frame__fallback { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .states-grid { grid-template-columns: 1fr; }
  .agent-hero-avatar { margin-left: -6px; width: 38px; height: 38px; font-size: 12px; }
}


/* ============================================================
   FEATURES PAGE — bento grid (axisflow-inspired)
   ============================================================ */
.features-hero { min-height: auto; padding: 100px 0 60px; }

.v2-bento-features { padding: 60px 0 90px; }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 14px;
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.bento-card:hover { transform: translateY(-3px); border-color: var(--v2-orange-glow); }
.bento-card--lg { grid-column: span 2; }
.bento-card--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01));
  border-color: var(--v2-orange-glow);
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 24px 60px -24px var(--v2-orange-glow);
}
.bento-card__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-orange-400) !important;
}
.bento-card__title {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v2-text-1) !important;
  margin: 4px 0 0;
  line-height: 1.2;
}
.bento-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-text-2) !important;
  margin: 8px 0 0;
}
.bento-card__visual {
  margin-top: auto;
  position: relative;
  min-height: 100px;
}

/* Bento flow viz (Sera + 6 pills) */
.bento-flow {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento-flow__node {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 4px rgba(255,106,0,0.12), 0 8px 24px var(--v2-orange-glow);
  z-index: 2;
  position: relative;
}
.bento-flow__node::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--v2-orange-glow);
  animation: v2-orbit-ring 3s ease-in-out infinite;
}
.bento-flow__pill {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  color: var(--v2-text-1);
  white-space: nowrap;
}

/* Bento search chips */
.bento-search {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bento-search__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 6px;
  color: var(--v2-text-2);
}
.bento-search__chip--gold {
  background: rgba(255,194,122,0.10);
  border-color: rgba(255,194,122,0.30);
  color: var(--v2-gold-300);
}

/* Bento writing lines */
.bento-write {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.bento-write__line {
  height: 8px;
  width: var(--w, 80%);
  background: linear-gradient(90deg, var(--v2-orange-700), var(--v2-orange-400));
  border-radius: 4px;
  box-shadow: 0 0 6px var(--v2-orange-glow-soft);
  animation: v2-prod-grow 1.6s var(--v2-ease-out) both;
}
.bento-write__line--accent { background: linear-gradient(90deg, var(--v2-gold-400), var(--v2-gold-300)); }

/* Bento compliance pills */
.bento-compliance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bento-comp-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  color: var(--v2-text-2);
  letter-spacing: 0.02em;
}
.bento-comp-pill--ok {
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.25);
  color: var(--v2-success);
}
.bento-comp-pill--gold {
  background: rgba(255,194,122,0.10);
  border-color: rgba(255,194,122,0.30);
  color: var(--v2-gold-300);
}

/* Bento chart */
.bento-chart {
  width: 100%;
  height: 80px;
  filter: drop-shadow(0 0 6px var(--v2-orange-glow-soft));
}

/* Bento platforms */
.bento-platforms {
  display: flex;
  gap: 6px;
  align-items: center;
  position: relative;
  padding: 8px 0;
}
.bento-plat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--v2-text-1);
  letter-spacing: -0.01em;
  z-index: 2;
}
.bento-plat-line {
  position: absolute;
  top: 50%;
  left: 16px; right: 16px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
  z-index: 1;
}

/* Feature table re-skin */
.feature-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  background: var(--v2-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.v2-design .feature-table { width: 100%; border-collapse: collapse; font-size: 14px; }
body.v2-design .feature-table th,
body.v2-design .feature-table td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--v2-stroke-1); }
body.v2-design .feature-table thead th { background: var(--v2-bg-elev-1); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--v2-text-3); }
body.v2-design .feature-table tbody tr:hover { background: rgba(255,106,0,0.03); }
body.v2-design .feature-table strong { color: var(--v2-orange-400) !important; font-family: var(--v2-font-display); font-weight: 600; }

@media (max-width: 1100px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card--lg { grid-column: span 2; }
}
@media (max-width: 700px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card--lg { grid-column: span 1; }
}


/* ============================================================
   AGENCY PAGE — corporate ROI + pillars + case studies
   ============================================================ */
.agency-hero { min-height: auto; padding: 110px 0 60px; }
.agency-hero-trust {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-stroke-1);
}
.agency-hero-trust__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.agency-hero-trust__metrics {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.agency-hero-trust__metrics > span {
  font-size: 13.5px;
  color: var(--v2-text-2);
}
.agency-hero-trust__metrics strong {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-orange-400) !important;
  margin-right: 4px;
}

/* ROI metrics grid */
.v2-corp-roi { padding: 70px 0; }
.corp-roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.corp-roi-card {
  padding: 28px 24px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.corp-roi-card:hover { transform: translateY(-3px); border-color: var(--v2-orange-glow); }
.corp-roi-card--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01));
  border-color: var(--v2-orange-glow);
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}
.corp-roi-card__num {
  font-family: var(--v2-font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--v2-orange-400) !important;
}
.corp-roi-card h3 {
  font-family: var(--v2-font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1) !important;
  margin: 8px 0 0;
}
.corp-roi-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-text-2) !important;
  margin: 0;
}
.corp-roi-card__bar {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}
.corp-roi-card__bar > span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--v2-orange-600), var(--v2-orange-400));
  border-radius: 999px;
  box-shadow: 0 0 8px var(--v2-orange-glow);
  animation: v2-prod-grow 1.6s var(--v2-ease-out) both;
}

/* Agency pillars */
.agency-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.agency-pillar {
  padding: 28px 24px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.agency-pillar:hover { transform: translateY(-3px); border-color: var(--v2-orange-glow); }
.agency-pillar--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01));
  border-color: var(--v2-orange-glow);
}
.agency-pillar__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-orange-400);
  margin-bottom: 4px;
}
.agency-pillar h3 {
  font-family: var(--v2-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0;
}
.agency-pillar > p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-text-2) !important;
  margin: 0;
}
.agency-pillar__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--v2-stroke-1);
  padding-top: 14px;
}
.agency-pillar__list li {
  font-size: 12.5px;
  color: var(--v2-text-3);
  position: relative;
  padding-left: 16px;
}
.agency-pillar__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--v2-orange-400);
  font-weight: 700;
}

/* Case studies */
.v2-case-studies { padding: 70px 0; }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.case-card {
  padding: 24px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
  position: relative;
  overflow: hidden;
}
.case-card:hover { transform: translateY(-3px); border-color: var(--v2-orange-glow); }
.case-card::before {
  content: "“";
  position: absolute;
  top: 8px; right: 16px;
  font-family: var(--v2-font-serif);
  font-size: 80px;
  line-height: 1;
  color: rgba(255,106,0,0.10);
  font-style: italic;
}
.case-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-card__industry {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.case-card__metric {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-orange-400) !important;
}
.case-card__quote {
  font-family: var(--v2-font-display);
  font-size: 15px;
  line-height: 1.5;
  color: var(--v2-text-1) !important;
  margin: 0;
  flex: 1;
  font-style: italic;
}
.case-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--v2-stroke-1);
}
.case-card__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg, var(--v2-bg-elev-2));
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.case-card__author strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v2-text-1) !important;
}
.case-card__author span {
  font-size: 11.5px;
  color: var(--v2-text-3);
}

@media (max-width: 1100px) {
  .corp-roi-grid, .agency-pillars, .case-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   SOFTWARE-FEEL APP MOCKUPS — Caption Studio + Music Video
   ============================================================ */
.v2-app-section { padding: 80px 0 100px; }

.app-window {
  background: linear-gradient(180deg, var(--v2-bg-elev-1), var(--v2-bg-deep));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 60px 120px -40px rgba(0,0,0,0.7),
    0 0 0 1px var(--v2-stroke-1);
}
.app-window__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--v2-bg-deep);
  border-bottom: 1px solid var(--v2-stroke-1);
}
.app-window__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--v2-stroke-3);
  flex-shrink: 0;
}
.app-window__dot--r { background: #ff5f56; }
.app-window__dot--y { background: #ffbd2e; }
.app-window__dot--g { background: #27c93f; }
.app-window__title {
  flex: 1;
  text-align: center;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--v2-text-3);
  letter-spacing: 0.02em;
}
.app-window__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-window__pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-text-2);
  border-radius: 6px;
}
.app-window__pill--accent {
  background: rgba(255,106,0,0.10);
  border-color: var(--v2-orange-glow);
  color: var(--v2-orange-300);
}

/* Toolbar */
.app-window__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--v2-bg-elev-1);
  border-bottom: 1px solid var(--v2-stroke-1);
  overflow-x: auto;
}
.app-tool {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--v2-text-2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.app-tool:hover { background: var(--v2-bg-elev-2); border-color: var(--v2-stroke-2); }
.app-tool--em { font-style: italic; }
.app-tool--text {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.app-tool--gold {
  color: var(--v2-gold-300);
  background: rgba(255,194,122,0.08);
  border-color: rgba(255,194,122,0.20);
}
.app-tool__divider {
  width: 1px;
  height: 22px;
  background: var(--v2-stroke-1);
  margin: 0 6px;
  flex-shrink: 0;
}
.app-tool__counter {
  margin-left: auto;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--v2-text-mute);
  padding: 4px 10px;
  background: var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 6px;
  flex-shrink: 0;
}

/* Body grid: sidebar + main + preview */
.app-window__body {
  display: grid;
  grid-template-columns: 200px 1fr 280px;
  min-height: 420px;
  background: var(--v2-bg-base);
}
.app-window__sidebar,
.app-window__preview {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--v2-bg-deep);
}
.app-window__sidebar { border-right: 1px solid var(--v2-stroke-1); }
.app-window__preview { border-left: 1px solid var(--v2-stroke-1); }

.app-side__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-mute);
  padding: 4px 6px;
  margin-bottom: 2px;
}
.app-side__label--push { margin-top: 14px; }

.app-tab,
.app-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--v2-text-2);
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.app-tab:hover,
.app-mode:hover { background: var(--v2-bg-elev-1); }
.app-tab.is-active,
.app-mode.is-active {
  background: rgba(255,106,0,0.10);
  border-color: var(--v2-orange-glow-soft);
  color: var(--v2-orange-300);
}
.app-mode__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--v2-stroke-3);
}
.app-mode__dot--ok {
  background: var(--v2-success);
  box-shadow: 0 0 6px rgba(52,211,153,0.5);
}

/* Main editor area */
.app-window__main {
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  gap: 12px;
}
.app-editor {
  flex: 1;
  resize: none;
  background: var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 10px;
  padding: 18px;
  color: var(--v2-text-1);
  font-family: var(--v2-font-display);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  min-height: 240px;
}
.app-editor:focus { outline: none; border-color: var(--v2-orange-glow); }
.app-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.app-suggestions__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  margin-right: 4px;
}
.app-suggest {
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  color: var(--v2-text-2);
  cursor: pointer;
}
.app-suggest:hover {
  border-color: var(--v2-orange-glow);
  color: var(--v2-orange-300);
  background: rgba(255,106,0,0.05);
}

/* Right preview panel */
.app-preview-card {
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 4px;
}
.app-preview-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--v2-stroke-1);
}
.app-preview-card__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}
.app-preview-card__head strong { display: block; font-size: 12.5px; color: var(--v2-text-1) !important; }
.app-preview-card__head span { font-size: 10.5px; color: var(--v2-text-mute); }
.app-preview-card__media {
  height: 130px;
  background:
    radial-gradient(140px 100px at 50% 50%, rgba(255,106,0,0.20), transparent 70%),
    var(--v2-bg-deep);
}
.app-preview-card__caption {
  font-size: 12px;
  line-height: 1.45;
  color: var(--v2-text-2);
  padding: 10px 12px;
  margin: 0;
}
.app-preview-card__meta {
  display: flex;
  gap: 14px;
  padding: 8px 12px;
  border-top: 1px solid var(--v2-stroke-1);
  font-size: 11px;
  color: var(--v2-text-3);
}
.app-preview-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.app-preview-stats > div {
  padding: 10px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.app-preview-stats span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-mute);
}
.app-preview-stats strong {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-orange-400) !important;
}

/* Status bar */
.app-window__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--v2-bg-deep);
  border-top: 1px solid var(--v2-stroke-1);
  font-size: 11px;
  color: var(--v2-text-3);
}
.app-window__statusbar > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* MUSIC STUDIO variant */
.app-window--studio { background: var(--v2-bg-deep); }
.studio-grid {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  min-height: 360px;
}
.studio-tools, .studio-export {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--v2-bg-deep);
}
.studio-tools { border-right: 1px solid var(--v2-stroke-1); }
.studio-export { border-left: 1px solid var(--v2-stroke-1); }
.studio-scene {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--v2-text-2);
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.studio-scene:hover { background: var(--v2-bg-elev-1); }
.studio-scene.is-active {
  background: rgba(255,106,0,0.10);
  border-color: var(--v2-orange-glow-soft);
  color: var(--v2-orange-300);
}
.studio-scene__num {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--v2-text-mute);
}
.studio-scene__time {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--v2-text-mute);
}

/* Preview viewer */
.studio-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(400px 240px at 50% 60%, rgba(255,106,0,0.10), transparent 70%),
    var(--v2-bg-base);
}
.studio-preview__viewer {
  position: relative;
  width: 70%;
  aspect-ratio: 9 / 16;
  max-height: 320px;
  background: linear-gradient(180deg, #1a0d0a, var(--v2-bg-deep));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.studio-preview__badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 3px 8px;
  background: rgba(255,106,0,0.15);
  border: 1px solid var(--v2-orange-glow);
  color: var(--v2-orange-300);
  border-radius: 4px;
}
.studio-preview__visual {
  text-align: center;
}
.studio-preview__glow {
  display: block;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--v2-orange-400), transparent 70%);
  margin: 0 auto 16px;
  filter: blur(16px);
  animation: v2-pulse-dot 2s ease-in-out infinite;
}
.studio-preview__title {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-text-1) !important;
}
.studio-preview__sub {
  display: block;
  font-family: var(--v2-font-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--v2-gold-300);
  margin-top: 4px;
}
.studio-preview__controls {
  position: absolute;
  bottom: 12px;
  left: 12px; right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(11,13,18,0.7);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.studio-pc-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-text-1);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.studio-pc-btn--primary {
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  border-color: var(--v2-orange-glow);
  color: #fff;
  width: 36px; height: 36px;
}
.studio-pc-time {
  margin-left: auto;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--v2-text-2);
}

/* Export panel */
.studio-export__opt {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 8px;
  font-size: 12px;
}
.studio-export__opt span { color: var(--v2-text-3); }
.studio-export__opt strong { color: var(--v2-text-1) !important; font-weight: 600; font-family: var(--v2-font-mono, ui-monospace, monospace); font-size: 11.5px; }
.studio-export__lyric {
  position: relative;
  padding: 10px 12px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--v2-text-2);
}
.studio-lyric-bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--w, 30%);
  background: linear-gradient(90deg, rgba(255,106,0,0.15), rgba(255,106,0,0.04));
  border-right: 2px solid var(--v2-orange-400);
  border-radius: 8px 0 0 8px;
}
.studio-render {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}
.studio-render__bar {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--v2-orange-600), var(--v2-orange-400));
  border-radius: 999px;
  box-shadow: 0 0 8px var(--v2-orange-glow);
  animation: v2-cmd-grow 4s ease-in-out infinite;
}
.studio-render__txt {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--v2-text-mute);
  text-align: center;
  margin-top: 4px;
}

/* Timeline */
.studio-timeline {
  position: relative;
  padding: 14px 18px;
  background: var(--v2-bg-deep);
  border-top: 1px solid var(--v2-stroke-1);
}
.studio-timeline__waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 50px;
  margin-bottom: 8px;
}
.studio-timeline__waveform > span {
  flex: 1;
  height: var(--h, 30%);
  background: linear-gradient(180deg, var(--v2-orange-400), var(--v2-orange-700));
  border-radius: 1px;
  opacity: 0.7;
  animation: v2-wave 1.6s ease-in-out infinite alternate;
}
.studio-timeline__waveform > span:nth-child(2n) { animation-delay: 0.2s; }
.studio-timeline__waveform > span:nth-child(3n) { animation-delay: 0.5s; }
.studio-timeline__playhead {
  position: absolute;
  top: 14px; bottom: 38px; left: 38%;
  width: 2px;
  background: var(--v2-gold-300);
  box-shadow: 0 0 6px rgba(255,194,122,0.7);
  z-index: 2;
}
.studio-timeline__clips {
  display: flex;
  gap: 4px;
  height: 28px;
}
.studio-clip {
  flex-basis: var(--w, 20%);
  background: var(--bg, var(--v2-bg-elev-2));
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

@media (max-width: 1100px) {
  .app-window__body { grid-template-columns: 1fr; }
  .app-window__sidebar, .app-window__preview { border: none; border-bottom: 1px solid var(--v2-stroke-1); }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-tools, .studio-export { border: none; border-bottom: 1px solid var(--v2-stroke-1); }
}


/* ============================================================
   GLOBAL VERTICAL/USE-CASE PAGE TREATMENT
   Hits .service-hero + .service-content shared across 100+ pages
   ============================================================ */

/* Service hero — cinematic v2 treatment */
body.v2-design .service-hero {
  position: relative;
  padding: 110px 0 60px !important;
  background: transparent !important;
  isolation: isolate;
  overflow: hidden;
}
body.v2-design .service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(255,106,0,0.10), transparent 60%),
    radial-gradient(700px 500px at 80% 10%, rgba(255,194,122,0.06), transparent 60%);
}
body.v2-design .service-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,240,220,0.05) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
body.v2-design .service-hero .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-text-3) !important;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.v2-design .service-hero .breadcrumb a {
  color: var(--v2-text-2) !important;
  text-decoration: none;
}
body.v2-design .service-hero .breadcrumb a:hover { color: var(--v2-orange-400) !important; }

body.v2-design .service-hero-title,
body.v2-design .service-hero h1 {
  font-family: var(--v2-font-display) !important;
  font-size: clamp(36px, 5.4vw, 72px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600 !important;
  color: var(--v2-text-1) !important;
  margin: 0 0 18px !important;
  max-width: 18ch;
  background: linear-gradient(180deg, var(--v2-text-1) 60%, var(--v2-orange-300));
  -webkit-background-clip: text;
  background-clip: text;
}

body.v2-design .service-hero-subtitle,
body.v2-design .service-hero p {
  font-family: var(--v2-font-body);
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.55 !important;
  color: var(--v2-text-2) !important;
  margin: 0 !important;
  max-width: 60ch;
}

/* Service content layout */
body.v2-design .service-content {
  padding: 60px 0 80px !important;
  background: transparent !important;
}
body.v2-design .service-grid {
  gap: 32px !important;
}
body.v2-design .service-main h2 {
  font-family: var(--v2-font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  margin: 0 0 20px;
}
body.v2-design .service-main h3 {
  font-family: var(--v2-font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 24px 0 8px;
}
body.v2-design .service-main ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.v2-design .service-main ul li {
  position: relative;
  padding: 10px 14px 10px 38px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 10px;
  font-size: 14px;
  color: var(--v2-text-2) !important;
  line-height: 1.5;
  transition: border-color var(--v2-dur-base);
}
body.v2-design .service-main ul li::before {
  content: "→";
  position: absolute;
  left: 14px;
  top: 10px;
  width: 16px;
  text-align: center;
  color: var(--v2-orange-400);
  font-weight: 700;
}
body.v2-design .service-main ul li:hover { border-color: var(--v2-orange-glow); }
body.v2-design .service-main strong { color: var(--v2-text-1) !important; font-weight: 600; }

/* Service sidebar (if present) */
body.v2-design .service-sidebar,
body.v2-design .service-cta-card {
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* CTA band re-skin */
body.v2-design .cta-band {
  position: relative;
  padding: 60px 40px !important;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(255,106,0,0.10), transparent 70%),
    var(--v2-bg-deep) !important;
  border: 1px solid var(--v2-stroke-2);
  border-radius: 24px;
  text-align: center;
  overflow: hidden;
}
body.v2-design .cta-band::before {
  content: "";
  position: absolute;
  top: -1px; left: 28%; right: 28%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}
body.v2-design .cta-band h2 {
  font-family: var(--v2-font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  margin: 0 0 12px;
}
body.v2-design .cta-band p,
body.v2-design .cta-band .section-lead {
  font-size: 16px;
  color: var(--v2-text-2) !important;
  margin: 0 auto 24px;
  max-width: 56ch;
}

/* Service hero — inject vertical metric strip via :has where supported */
@supports (selector(:has(*))) {
  body.v2-design .service-hero:has(.service-hero-subtitle)::before {
    /* extra accent line above title for vertical heroes */
  }
}

/* Conversion-hero (used on subpages) v2 treatment */
body.v2-design .conversion-hero {
  padding: 110px 0 60px !important;
  background: transparent !important;
  position: relative;
  overflow: hidden;
}
body.v2-design .conversion-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
body.v2-design .conversion-hero h1.hero-title {
  font-family: var(--v2-font-display);
  font-size: clamp(32px, 4.6vw, 60px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: var(--v2-text-1) !important;
  margin: 16px 0 16px !important;
  max-width: 18ch;
}
body.v2-design .conversion-hero .hero-subtitle {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--v2-text-2) !important;
  margin: 0 0 24px !important;
}
body.v2-design .conversion-hero .breadcrumb {
  display: inline-flex;
  padding: 5px 12px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--v2-text-3) !important;
}
body.v2-design .conversion-hero .breadcrumb a {
  color: var(--v2-text-2) !important;
  text-decoration: none;
}
body.v2-design .conversion-hero .page-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-orange-400) !important;
  margin: 18px 0 8px;
}
body.v2-design .hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-stroke-1);
  flex-wrap: wrap;
}
body.v2-design .hero-stat {
  display: flex;
  flex-direction: column;
}
body.v2-design .hero-stat .stat-value,
body.v2-design .hero-stat span:first-child {
  font-family: var(--v2-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--v2-orange-400) !important;
}
body.v2-design .hero-stat .stat-label,
body.v2-design .hero-stat span:last-child {
  font-size: 12px;
  color: var(--v2-text-3) !important;
  margin-top: 2px;
}

/* Status panel right rail (features hero) */
body.v2-design .status-panel {
  background: linear-gradient(180deg, var(--v2-bg-elev-1), var(--v2-bg-deep)) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.v2-design .status-panel h3 {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 8px 0 16px;
}
body.v2-design .status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.v2-design .status-item {
  padding: 12px 14px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
body.v2-design .status-item strong { color: var(--v2-text-1) !important; font-weight: 600; }
body.v2-design .status-item .status-copy { color: var(--v2-text-3) !important; font-size: 12px; margin: 2px 0 0; }

@media (max-width: 1100px) {
  body.v2-design .conversion-hero-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   AGENT MARKETPLACE + INTEGRATIONS PAGES
   ============================================================ */

.mkt-hero { min-height: auto; padding: 110px 0 60px; }
.mkt-hero__stats {
  display: flex;
  gap: 32px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-stroke-1);
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--v2-text-2);
}
.mkt-hero__stats strong {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-orange-400) !important;
  margin-right: 6px;
}

/* MARKETPLACE WINDOW (app-style frame) */
.v2-mkt-surface { padding: 50px 0 90px; }
.mkt-window {
  background: linear-gradient(180deg, var(--v2-bg-elev-1), var(--v2-bg-deep));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 60px 120px -40px rgba(0,0,0,0.7);
}
.mkt-window__tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  background: var(--v2-bg-deep);
  border-bottom: 1px solid var(--v2-stroke-1);
  overflow-x: auto;
}
.mkt-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--v2-text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.mkt-tab:hover { background: var(--v2-bg-elev-1); color: var(--v2-text-1); }
.mkt-tab.is-active {
  background: rgba(255,106,0,0.10);
  border-color: var(--v2-orange-glow-soft);
  color: var(--v2-orange-300);
}
.mkt-tab__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.mkt-tab__badge {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--v2-orange-500);
  color: #fff;
  border-radius: 999px;
}

.mkt-window__toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  background: var(--v2-bg-elev-1);
  border-bottom: 1px solid var(--v2-stroke-1);
  flex-wrap: wrap;
}
.mkt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 10px;
  flex: 1;
  min-width: 280px;
}
.mkt-search__icon { color: var(--v2-text-3); flex-shrink: 0; }
.mkt-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--v2-text-1) !important;
  font-size: 13px;
  font-family: var(--v2-font-body);
}
.mkt-search input::placeholder { color: var(--v2-text-mute) !important; }
.mkt-search__hint {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  padding: 2px 8px;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-1);
  color: var(--v2-text-3);
  border-radius: 4px;
}
.mkt-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mkt-pill {
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  background: var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  color: var(--v2-text-2);
  cursor: pointer;
  transition: border-color var(--v2-dur-fast), color var(--v2-dur-fast), background var(--v2-dur-fast);
}
.mkt-pill:hover {
  border-color: var(--v2-orange-glow-soft);
  color: var(--v2-orange-300);
}
.mkt-pill--active {
  background: rgba(255,106,0,0.10);
  border-color: var(--v2-orange-glow);
  color: var(--v2-orange-300);
}

/* AGENT CARD GRID */
.agent-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 20px;
  background: var(--v2-bg-base);
}
.mkt-card {
  position: relative;
  padding: 20px 20px 16px;
  background: var(--v2-bg-glass) !important;
  border: 1px solid var(--v2-stroke-2) !important;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
  overflow: hidden;
}
.mkt-card:hover {
  transform: translateY(-3px);
  border-color: var(--v2-orange-glow) !important;
}
.mkt-card--featured {
  background: linear-gradient(180deg, rgba(255,106,0,0.10), rgba(255,106,0,0.02)) !important;
  border-color: var(--v2-orange-glow) !important;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}
.mkt-card--locked { opacity: 0.85; }
.mkt-card--locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, transparent 60%, rgba(11,13,18,0.4));
  pointer-events: none;
}
.mkt-card__featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--v2-orange-500);
  color: #fff;
  border-radius: 999px;
  z-index: 2;
}
.mkt-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mkt-card__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 10px;
  color: var(--v2-orange-300);
  flex-shrink: 0;
}
.mkt-card__icon--accent {
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  color: #fff;
  border-color: var(--v2-orange-glow);
  box-shadow: 0 6px 18px -6px var(--v2-orange-glow);
}
.mkt-card__icon--gold {
  background: linear-gradient(135deg, var(--v2-gold-300), var(--v2-gold-500));
  color: #1a1410;
  border-color: rgba(255,194,122,0.30);
}
.mkt-card__category {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  margin-bottom: 3px;
}
.mkt-card__name {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1) !important;
  margin: 0;
  line-height: 1.2;
}
.mkt-card__tier {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: auto;
  align-self: flex-start;
  white-space: nowrap;
}
.mkt-card__tier--free    { background: rgba(52,211,153,0.10); color: var(--v2-success); border: 1px solid rgba(52,211,153,0.25); }
.mkt-card__tier--pro     { background: rgba(255,106,0,0.12); color: var(--v2-orange-300); border: 1px solid var(--v2-orange-glow-soft); }
.mkt-card__tier--agency  { background: rgba(255,194,122,0.10); color: var(--v2-gold-300); border: 1px solid rgba(255,194,122,0.28); }
.mkt-card__tier--premium { background: linear-gradient(135deg, rgba(255,106,0,0.18), rgba(255,194,122,0.14)); color: var(--v2-orange-300); border: 1px solid var(--v2-orange-glow); }

.mkt-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-text-2) !important;
  margin: 0;
}
.mkt-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mkt-card__features li {
  font-size: 12px;
  color: var(--v2-text-3) !important;
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}
.mkt-card__features li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--v2-orange-400);
}
.mkt-card__integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--v2-stroke-1);
}
.mkt-int-chip {
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  background: var(--v2-bg-elev-1);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 4px;
  color: var(--v2-text-3);
}
.mkt-int-chip--all {
  background: rgba(255,106,0,0.08);
  border-color: var(--v2-orange-glow-soft);
  color: var(--v2-orange-300);
}
.mkt-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--v2-stroke-1);
}
.mkt-credit { display: flex; flex-direction: column; }
.mkt-credit__lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-mute);
}
.mkt-credit strong {
  font-family: var(--v2-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--v2-text-1) !important;
}
.mkt-install {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 6px 16px -4px var(--v2-orange-glow);
  transition: transform var(--v2-dur-fast) var(--v2-ease-spring);
}
.mkt-install:hover { transform: translateY(-1px); }
.mkt-install--locked {
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-2);
  color: var(--v2-text-2) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: none;
}
.mkt-install--locked:hover { border-color: var(--v2-orange-glow); }

/* TEMPLATE ANATOMY split (code + list) */
.tmpl-anatomy {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: start;
}
.tmpl-side h3 {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v2-text-1) !important;
  margin: 0 0 16px;
}
.tmpl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tmpl-list li {
  padding: 10px 14px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--v2-text-2);
  line-height: 1.5;
}
.tmpl-list strong {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  color: var(--v2-orange-300) !important;
  font-weight: 600;
  font-size: 12.5px;
}
.tmpl-code {
  background: var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  overflow: hidden;
}
.tmpl-code__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--v2-bg-elev-1);
  border-bottom: 1px solid var(--v2-stroke-1);
}
.tmpl-code__title {
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--v2-text-2);
}
.tmpl-code__lang {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-orange-300);
  padding: 3px 8px;
  background: rgba(255,106,0,0.10);
  border: 1px solid var(--v2-orange-glow-soft);
  border-radius: 4px;
}
.tmpl-code__body {
  padding: 18px 20px;
  margin: 0;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--v2-text-2);
  overflow-x: auto;
  white-space: pre;
}
.tk-c { color: var(--v2-text-mute); font-style: italic; }
.tk-k { color: var(--v2-orange-300); }
.tk-t { color: var(--v2-gold-300); }

/* Tab preview cards */
.mkt-tab-preview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.tab-preview-card {
  padding: 22px 18px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.tab-preview-card:hover { transform: translateY(-2px); border-color: var(--v2-orange-glow); }
.tab-preview-card--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01));
  border-color: var(--v2-orange-glow);
}
.tab-preview-card__num {
  font-family: var(--v2-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--v2-text-mute);
}
.tab-preview-card h3 {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0;
}
.tab-preview-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v2-text-2) !important;
  margin: 0;
}

/* ============================================================
   INTEGRATIONS PAGE
   ============================================================ */
.int-legend {
  display: flex;
  gap: 24px;
  padding: 16px 22px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  flex-wrap: wrap;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.int-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--v2-text-2);
}
.int-status {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.int-status--live       { background: var(--v2-success); box-shadow: 0 0 8px rgba(52,211,153,0.6); }
.int-status--beta       { background: var(--v2-gold-300); box-shadow: 0 0 8px rgba(255,194,122,0.5); }
.int-status--soon       { background: var(--v2-orange-400); box-shadow: 0 0 8px var(--v2-orange-glow); }
.int-status--planned    { background: var(--v2-text-mute); }
.int-status--enterprise { background: var(--v2-gold-500); box-shadow: 0 0 8px rgba(184,137,90,0.4); }

.int-section { padding: 50px 0; }
.int-cat-head {
  margin-bottom: 24px;
}
.int-cat-head h2 {
  font-family: var(--v2-font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v2-text-1) !important;
  margin: 0 0 6px;
}
.int-cat-head p {
  font-size: 14.5px;
  color: var(--v2-text-2) !important;
  margin: 0;
}

.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.int-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.int-card:hover { transform: translateY(-2px); border-color: var(--v2-orange-glow); }
.int-card__logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-2);
}
.int-card__logo--fb  { background: linear-gradient(135deg, #1877f2, #0c4ec1); }
.int-card__logo--x   { background: linear-gradient(135deg, #15202b, #000); }
.int-card__logo--yt  { background: linear-gradient(135deg, #ff0000, #cc0000); }
.int-card__logo--tt  { background: linear-gradient(135deg, #25f4ee, #fe2c55); color:#000; }
.int-card__logo--rd  { background: linear-gradient(135deg, #ff4500, #cc3700); }
.int-card__logo--pt  { background: linear-gradient(135deg, #e60023, #b30019); }
.int-card__logo--ig  { background: linear-gradient(135deg, #fa7e1e, #d62976, #962fbf); }
.int-card__logo--li  { background: linear-gradient(135deg, #0a66c2, #004182); font-size:13px; }
.int-card__logo--th  { background: linear-gradient(135deg, #000, #2d2d2d); }
.int-card__logo--bs  { background: linear-gradient(135deg, #1185fe, #0a5db5); }
.int-card__logo--sc  { background: linear-gradient(135deg, #fffc00, #cccb00); color:#000; }
.int-card__logo--tw  { background: linear-gradient(135deg, #9146ff, #6428c4); font-size:12px; }
.int-card__logo--dc  { background: linear-gradient(135deg, #5865f2, #3c45a5); }
.int-card__logo--wa  { background: linear-gradient(135deg, #25d366, #128c7e); }
.int-card__logo--tg  { background: linear-gradient(135deg, #29b6f6, #0e87b6); }
.int-card__logo--st  { background: linear-gradient(135deg, #635bff, #4a45d4); }
.int-card__logo--sh  { background: linear-gradient(135deg, #95bf47, #5e8e3e); }
.int-card__logo--gr  { background: linear-gradient(135deg, #ff90e8, #e066c5); color:#000; }
.int-card__logo--pa  { background: linear-gradient(135deg, #ff424d, #c5343d); }
.int-card__logo--sb  { background: linear-gradient(135deg, #ff6719, #c54f12); }
.int-card__logo--bh  { background: linear-gradient(135deg, #1a73e8, #0d47a1); font-size:13px; }
.int-card__logo--ck  { background: linear-gradient(135deg, #fb6970, #d33f47); font-size:11px; }
.int-card__logo--mc  { background: linear-gradient(135deg, #ffe01b, #ccb215); color:#000; }
.int-card__logo--kj  { background: linear-gradient(135deg, #0066ff, #0050cc); }
.int-card__logo--te  { background: linear-gradient(135deg, #03acc7, #028599); }
.int-card__logo--sp  { background: linear-gradient(135deg, #1db954, #149a45); }
.int-card__logo--am  { background: linear-gradient(135deg, #fa233b, #c91b30); }
.int-card__logo--aud { background: linear-gradient(135deg, #f7a900, #c58800); }
.int-card__logo--sou { background: linear-gradient(135deg, #ff5500, #cc4400); font-size:14px; }
.int-card__logo--bc  { background: linear-gradient(135deg, #629aa9, #4a7a85); }
.int-card__logo--go  { background: linear-gradient(135deg, #4285f4, #1a73e8); }
.int-card__logo--za  { background: linear-gradient(135deg, #ff4a00, #cc3a00); }
.int-card__logo--mk  { background: linear-gradient(135deg, #6d00cc, #50009a); }
.int-card__logo--gs  { background: linear-gradient(135deg, #34a853, #128c2e); }
.int-card__logo--at  { background: linear-gradient(135deg, #f82b60, #c5224b); }
.int-card__logo--no  { background: linear-gradient(135deg, #000, #2d2d2d); }
.int-card__logo--hs  { background: linear-gradient(135deg, #ff7a59, #cc6147); }
.int-card__logo--sf  { background: linear-gradient(135deg, #00a1e0, #0080b3); font-size:11px; }

.int-card > div { flex: 1; min-width: 0; }
.int-card strong {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1) !important;
}
.int-card span:not(.int-status):not(.int-card__logo) {
  font-size: 12px;
  color: var(--v2-text-3);
}
.int-card .int-status {
  width: 8px; height: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 1100px) {
  .agent-marketplace-grid { grid-template-columns: repeat(2, 1fr); }
  .tmpl-anatomy { grid-template-columns: 1fr; }
  .mkt-tab-preview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .agent-marketplace-grid { grid-template-columns: 1fr; }
  .mkt-tab-preview { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   LIGHT MODE — premium warm surfaces (opt-in via theme toggle)
   Active when html[data-theme="light"] AND body.v2-design.
   Dark mode remains default; this is fully reversible.
   ============================================================ */

html[data-theme="light"] body.v2-design:not(.service-page-dark){
  /* Warm light tokens — cream/ivory, NOT cold white */
  --v2-bg-base: #FAF6F0;
  --v2-bg-deep: #F2EBE0;
  --v2-bg-elev-1: #FFFFFF;
  --v2-bg-elev-2: #F7F1E6;
  --v2-bg-glass: rgba(255, 255, 255, 0.72);
  --v2-bg-glass-strong: rgba(255, 255, 255, 0.92);

  --v2-stroke-1: rgba(40, 28, 12, 0.06);
  --v2-stroke-2: rgba(40, 28, 12, 0.12);
  --v2-stroke-3: rgba(40, 28, 12, 0.20);

  --v2-text-1: #1A1410;
  --v2-text-2: #4A3D2E;
  --v2-text-3: #7A6B58;
  --v2-text-mute: #A89880;

  /* Burnt orange identity preserved, slightly desaturated for AA contrast */
  --v2-orange-300: #C2410C;
  --v2-orange-400: #B5380A;
  --v2-orange-500: #C2410C;
  --v2-orange-glow: rgba(194, 65, 12, 0.30);
  --v2-orange-glow-soft: rgba(194, 65, 12, 0.12);

  --v2-gold-300: #92591C;
  --v2-gold-400: #B5732B;

  --v2-success: #047857;
  --v2-warn:    #B45309;
  --v2-danger:  #B91C1C;
}

/* Background splash — warm light variant (no navy in light mode) */
/* Bumped specificity + !important to beat styles.css legacy light body rules */
html[data-theme="light"] body.v2-design:not(.service-page-dark),
html[data-theme="light"] body.v2-design.marketing-home:not(.service-page-dark) {
  background-color: #FAF6F0 !important;
  background-image:
    radial-gradient(1700px 700px at 50% -160px, rgba(255, 194, 122, 0.30), transparent 68%),
    radial-gradient(1100px 520px at 50% -40px, rgba(255, 106, 0, 0.14), transparent 62%),
    radial-gradient(1700px 700px at 50% calc(100% + 160px), rgba(255, 194, 122, 0.30), transparent 68%),
    radial-gradient(1100px 520px at 50% calc(100% + 40px), rgba(255, 106, 0, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 240, 220, 0.55) 0%, transparent 760px),
    linear-gradient(0deg,   rgba(255, 240, 220, 0.55) 0%, transparent 760px) !important;
  color: #1A1410 !important;
}
html[data-theme="light"] body.v2-design::before {
  background:
    radial-gradient(1100px 600px at 15% 30%, rgba(255,106,0,0.04), transparent 60%),
    radial-gradient(900px 700px at 90% 50%, rgba(255,194,122,0.05), transparent 60%);
}

/* Nav glass treatment for light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .header {
  background: rgba(250, 246, 240, 0.78);
  border-bottom-color: var(--v2-stroke-2);
}
html[data-theme="light"] body.v2-design.is-scrolled:not(.service-page-dark) .header {
  background: rgba(250, 246, 240, 0.92);
  box-shadow: 0 1px 0 var(--v2-stroke-1), 0 8px 24px -8px rgba(40,28,12,0.08);
}

/* Hero — keep shimmer + serif accents readable on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-shimmer {
  background: linear-gradient(90deg, #C2410C, #B5732B 50%, #C2410C);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-serif {
  color: #92591C;
}

/* Buttons re-tune for light contrast */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-btn--primary,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .btn-primary {
  background: linear-gradient(180deg, #EA580C, #C2410C) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(194,65,12,0.15), 0 8px 24px -8px rgba(194,65,12,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-btn--ghost,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .btn-ghost {
  background: rgba(255,255,255,0.78) !important;
  color: var(--v2-text-1) !important;
  border-color: var(--v2-stroke-2) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-btn--ghost:hover,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .btn-ghost:hover {
  background: #fff !important;
  border-color: var(--v2-orange-glow) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .btn-outline {
  background: rgba(255,255,255,0.78) !important;
  color: var(--v2-text-1) !important;
  border-color: var(--v2-stroke-2) !important;
}

/* Cards — warm white surface, soft cream shadow */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .vert-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .three-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .prod-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .example-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agent-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .case-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .corp-roi-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agency-pillar,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .bento-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .int-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .tab-preview-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .state-tile,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .trust-badge,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .feed-item,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .motion-step,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pipeline-column,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pipeline-engine,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .workspace-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .product-panel,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .proof-panel,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agent-market-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .feature-callout,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pricing-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .testimonial,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .faq-item,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .feature-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .industry-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .usecase-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .integration-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agency-mc,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-center,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .analytics-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .comp-intel,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pipe-timeline,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .compliance-strip,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .final-cta,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-window {
  background: var(--v2-bg-glass) !important;
  border-color: var(--v2-stroke-2) !important;
  color: var(--v2-text-1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 18px 36px -20px rgba(40,28,12,0.12);
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .vert-card:hover,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agent-card:hover,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-card:hover,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .int-card:hover,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .case-card:hover,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .example-card:hover,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .bento-card:hover {
  border-color: var(--v2-orange-glow) !important;
  box-shadow: 0 0 0 1px rgba(194,65,12,0.18), 0 18px 40px -16px rgba(194,65,12,0.20);
}

/* Sera lead card on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agent-card.agent-card--lead {
  background: linear-gradient(180deg, rgba(255,106,0,0.10), rgba(255,255,255,0.92)) !important;
  border-color: var(--v2-orange-glow) !important;
}

/* Featured marketplace card on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-card--featured {
  background: linear-gradient(180deg, rgba(255,106,0,0.10), rgba(255,255,255,0.95)) !important;
  border-color: var(--v2-orange-glow) !important;
}

/* App-window mockups light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .app-window,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-center {
  background: linear-gradient(180deg, #FFFFFF, #F7F1E6) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .app-window__chrome,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .app-window__toolbar,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .app-window__sidebar,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .app-window__preview,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .app-window__statusbar,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-sidebar,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-logic,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .studio-timeline {
  background: var(--v2-bg-deep) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .app-editor {
  background: #fff !important;
  color: var(--v2-text-1) !important;
}

/* Status badges + chips re-tune */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-card__tier--free,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .bento-comp-pill--ok,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-card__badge--ready {
  background: rgba(4,120,87,0.10) !important;
  color: var(--v2-success) !important;
  border-color: rgba(4,120,87,0.30) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-card__tier--pro {
  background: rgba(194,65,12,0.10) !important;
  color: var(--v2-orange-400) !important;
  border-color: rgba(194,65,12,0.28) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-card__tier--agency {
  background: rgba(146,89,28,0.10) !important;
  color: var(--v2-gold-300) !important;
  border-color: rgba(146,89,28,0.28) !important;
}

/* Code preview light tokens */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .tmpl-code,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .tmpl-code__body {
  background: #1A1410 !important;
  color: #f7f3ee !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .tmpl-code__head {
  background: #2A2018 !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .tmpl-code__title { color: #c8c0b6 !important; }

/* Trust badges light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .trust-badge .badge-icon {
  background: linear-gradient(180deg, rgba(194,65,12,0.14), rgba(194,65,12,0.06));
  border-color: var(--v2-orange-glow);
  color: var(--v2-orange-400);
}

/* Headings + body type on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) h1,
html[data-theme="light"] body.v2-design:not(.service-page-dark) h2,
html[data-theme="light"] body.v2-design:not(.service-page-dark) h3,
html[data-theme="light"] body.v2-design:not(.service-page-dark) h4,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .hero-v2__title,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-section__title,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .service-hero-title {
  color: var(--v2-text-1) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) p,
html[data-theme="light"] body.v2-design:not(.service-page-dark) li,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .hero-v2__sub,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-section__sub,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .service-hero-subtitle {
  color: var(--v2-text-2) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .hero-v2__title {
  background: linear-gradient(180deg, #1A1410 60%, #C2410C);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Eyebrow pills */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .hero-v2__eyebrow,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-section__eyebrow {
  background: rgba(255,255,255,0.78);
  border-color: var(--v2-stroke-2);
  color: var(--v2-text-2);
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .v2-section__eyebrow {
  background: rgba(194,65,12,0.08);
  border-color: rgba(194,65,12,0.22);
  color: var(--v2-orange-400);
}

/* Footer light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) footer,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .footer {
  background: var(--v2-bg-deep) !important;
  border-top: 1px solid var(--v2-stroke-2);
  color: var(--v2-text-2) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) footer h3,
html[data-theme="light"] body.v2-design:not(.service-page-dark) footer h4,
html[data-theme="light"] body.v2-design:not(.service-page-dark) footer strong {
  color: var(--v2-text-1) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) footer a {
  color: var(--v2-text-2) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) footer a:hover {
  color: var(--v2-orange-400) !important;
}

/* Toggle button visible again in v2 (was hidden by JS prior) */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .theme-toggle,
body.v2-design.theme-toggle-enabled .theme-toggle {
  display: inline-flex !important;
}

/* Reveal contrast checks: trust-badge text on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .trust-badge .badge-text strong {
  color: var(--v2-text-1) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .trust-badge .badge-text span {
  color: var(--v2-text-2) !important;
}

/* Streaming demo readable on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-stream__body {
  background: #fff !important;
  color: var(--v2-text-1) !important;
}

/* Hero stage glass on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .hero-v2__stage {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,240,220,0.55)) !important;
  border-color: var(--v2-stroke-2) !important;
}

/* Compliance strip on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .compliance-strip__badges li {
  background: rgba(255,255,255,0.85) !important;
  border-color: var(--v2-stroke-2) !important;
}


/* ============================================================
   BRAND MEMORY + PERFORMANCE PREDICTION PAGES
   ============================================================ */

/* Brand Memory 10-card grid */
.bm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bm-card {
  padding: 22px 22px 18px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
  position: relative;
  overflow: hidden;
}
.bm-card:hover { transform: translateY(-3px); border-color: var(--v2-orange-glow); }
.bm-card--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01));
  border-color: var(--v2-orange-glow);
}
.bm-card--gold {
  background: linear-gradient(180deg, rgba(255,194,122,0.10), rgba(255,194,122,0.02));
  border-color: rgba(255,194,122,0.32);
}
.bm-card__num {
  font-family: var(--v2-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--v2-text-mute);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-stroke-1);
}
.bm-card h3 {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0;
}
.bm-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-text-2) !important;
  margin: 0;
  flex: 1;
}
.bm-card__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-orange-300) !important;
  padding: 4px 10px;
  background: rgba(255,106,0,0.08);
  border: 1px solid var(--v2-orange-glow-soft);
  border-radius: 999px;
  margin-top: 8px;
  align-self: flex-start;
}

/* Brand Memory compound timeline */
.bm-compound {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.bm-compound::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, var(--v2-stroke-2), var(--v2-orange-500), var(--v2-orange-400));
  z-index: 0;
}
.bm-compound__card {
  position: relative;
  z-index: 1;
  padding: 22px 18px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bm-compound__card--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.10), rgba(255,106,0,0.02));
  border-color: var(--v2-orange-glow);
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}
.bm-compound__week {
  font-family: var(--v2-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-orange-400) !important;
}
.bm-compound__card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v2-text-2) !important;
  margin: 0;
}

/* PERFORMANCE PREDICTION — sample score panel */
.pp-sample {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pp-sample__draft {
  padding: 28px 26px;
  background: var(--v2-bg-deep);
  border-right: 1px solid var(--v2-stroke-1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pp-sample__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.pp-sample__quote {
  font-family: var(--v2-font-display);
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--v2-text-1) !important;
  font-style: italic;
  margin: 0;
  flex: 1;
}
.pp-sample__overall {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(52,211,153,0.08), rgba(52,211,153,0.01));
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pp-sample__overall-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.pp-sample__overall-num {
  font-family: var(--v2-font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--v2-success) !important;
  line-height: 1;
}
.pp-sample__overall-grade {
  font-size: 12.5px;
  color: var(--v2-success) !important;
  font-weight: 500;
  margin-left: auto;
}

.pp-sample__scores {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-score {
  display: grid;
  grid-template-columns: 150px 1fr 32px;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
}
.pp-score__lbl {
  color: var(--v2-text-2);
  font-weight: 500;
}
.pp-score__bar {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}
.pp-score__bar > span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  animation: v2-comp-grow 1.4s var(--v2-ease-out) both;
}
.pp-score[data-grade="a"] .pp-score__bar > span {
  background: linear-gradient(90deg, #10b981, var(--v2-success));
  box-shadow: 0 0 6px rgba(52,211,153,0.4);
}
.pp-score[data-grade="b"] .pp-score__bar > span {
  background: linear-gradient(90deg, var(--v2-gold-400), var(--v2-gold-300));
  box-shadow: 0 0 6px rgba(212,165,116,0.4);
}
.pp-score[data-grade="c"] .pp-score__bar > span {
  background: linear-gradient(90deg, #fb923c, var(--v2-orange-400));
}
.pp-score strong {
  font-family: var(--v2-font-display);
  font-weight: 700;
  color: var(--v2-text-1) !important;
  text-align: right;
  letter-spacing: -0.01em;
}

/* Suggestions panel */
.pp-suggestions {
  margin-top: 18px;
  padding: 22px 26px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 16px;
}
.pp-suggestions h3 {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-orange-300) !important;
  margin: 0 0 14px;
}
.pp-suggestions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-suggestions li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-text-2);
}
.pp-suggest__num {
  flex-shrink: 0;
  font-family: var(--v2-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.30);
  color: var(--v2-success);
  border-radius: 999px;
}

/* PP 7-dimension grid */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pp-card {
  padding: 24px 22px 20px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.pp-card:hover { transform: translateY(-3px); border-color: var(--v2-orange-glow); }
.pp-card--accent {
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01));
  border-color: var(--v2-orange-glow);
}
.pp-card--gold {
  background: linear-gradient(180deg, rgba(255,194,122,0.10), rgba(255,194,122,0.02));
  border-color: rgba(255,194,122,0.32);
}
.pp-card__num {
  font-family: var(--v2-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--v2-text-mute);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-stroke-1);
}
.pp-card h3 {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0;
}
.pp-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-text-2) !important;
  margin: 0;
}

@media (max-width: 1100px) {
  .bm-grid { grid-template-columns: repeat(2, 1fr); }
  .bm-compound { grid-template-columns: repeat(2, 1fr); }
  .bm-compound::before { display: none; }
  .pp-sample { grid-template-columns: 1fr; }
  .pp-sample__draft { border-right: none; border-bottom: 1px solid var(--v2-stroke-1); }
  .pp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bm-grid, .bm-compound, .pp-grid { grid-template-columns: 1fr; }
  .pp-score { grid-template-columns: 110px 1fr 32px; }
}


/* ============================================================
   USE-CASE FUNNEL COMPONENTS (Phase C)
   Reusable primitives — drop on any vertical page to upgrade it
   into a mini sales funnel. Each component is independent.
   ============================================================ */

/* ---- 1. UseCaseHero (uc-hero) ---------------------------- */
.uc-hero {
  position: relative;
  padding: 90px 0 60px;
  overflow: hidden;
}
.uc-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--v2-text-3);
  margin-bottom: 18px;
}
.uc-hero__breadcrumb a { color: var(--v2-text-2); text-decoration: none; }
.uc-hero__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-orange-400) !important;
  margin: 8px 0 14px;
}
.uc-hero__title {
  font-family: var(--v2-font-display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  margin: 0 0 16px;
  max-width: 18ch;
}
.uc-hero__title .v2-serif {
  font-family: var(--v2-font-serif);
  font-style: italic;
  color: var(--v2-gold-300);
  font-weight: 400;
}
.uc-hero__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--v2-text-2);
  max-width: 60ch;
  margin: 0 0 24px;
}
.uc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.uc-hero__metrics {
  display: flex;
  gap: 32px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-stroke-1);
  flex-wrap: wrap;
}
.uc-hero__metric strong {
  font-family: var(--v2-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--v2-orange-400);
  display: block;
}
.uc-hero__metric span {
  font-size: 12px;
  color: var(--v2-text-3);
  letter-spacing: 0.02em;
}

/* ---- 2. UseCaseMagicDemo (uc-magic) — tadah moment -------- */
.uc-magic {
  padding: 70px 0;
}
.uc-magic__shell {
  background: linear-gradient(180deg, var(--v2-bg-elev-1), var(--v2-bg-deep));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.uc-magic__shell::before {
  content: "";
  position: absolute;
  top: -1px; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}
.uc-magic__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.uc-magic__pane {
  background: var(--v2-bg-deep);
  border: 1px solid var(--v2-stroke-1);
  border-radius: 14px;
  padding: 18px;
  min-height: 240px;
}
.uc-magic__pane-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  margin-bottom: 14px;
}
.uc-magic__pane--input .uc-magic__pane-label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--v2-text-mute);
}
.uc-magic__pane--output .uc-magic__pane-label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--v2-success);
  box-shadow: 0 0 8px rgba(52,211,153,0.5);
  animation: v2-pulse-dot 2s ease-in-out infinite;
}
.uc-magic__pane-text {
  font-family: var(--v2-font-display);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--v2-text-1);
  margin: 0;
}
.uc-magic__pane--output .uc-magic__pane-text { font-style: italic; color: var(--v2-orange-300); }
.uc-magic__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0;
  padding: 8px 14px;
  background: rgba(255,106,0,0.10);
  border: 1px solid var(--v2-orange-glow);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--v2-orange-300);
  position: relative;
  z-index: 2;
}

/* ---- 3. UseCaseBeforeAfter (uc-ba) ----------------------- */
.uc-ba {
  padding: 70px 0;
}
.uc-ba__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
}
.uc-ba__col {
  padding: 24px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.uc-ba__col--before { opacity: 0.85; }
.uc-ba__col--after {
  background: linear-gradient(180deg, rgba(255,106,0,0.10), rgba(255,106,0,0.02));
  border-color: var(--v2-orange-glow);
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}
.uc-ba__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.uc-ba__col--after .uc-ba__label { color: var(--v2-orange-400); }
.uc-ba__head {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1);
  margin: 0;
}
.uc-ba__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uc-ba__list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v2-text-2);
  padding-left: 18px;
  position: relative;
}
.uc-ba__col--before .uc-ba__list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--v2-danger);
  font-weight: 700;
}
.uc-ba__col--after .uc-ba__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--v2-success);
  font-weight: 700;
}
.uc-ba__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-text-mute);
  padding: 0 10px;
}
.uc-ba__divider span {
  display: inline-block;
  margin: 6px 0;
  padding: 8px 12px;
  background: var(--v2-bg-elev-2);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 999px;
  color: var(--v2-orange-400);
  font-size: 16px;
}

/* ---- 4. UseCaseWorkflow (uc-workflow) -------------------- */
.uc-workflow {
  padding: 70px 0;
}
.uc-workflow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.uc-workflow__steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, var(--v2-stroke-2), var(--v2-orange-500), var(--v2-stroke-2));
  z-index: 0;
}
.uc-workflow__step {
  position: relative;
  z-index: 1;
  padding: 22px 18px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.uc-workflow__num {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--v2-font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--v2-bg-base), 0 6px 18px -6px var(--v2-orange-glow);
}
.uc-workflow__step h4 {
  font-family: var(--v2-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1);
  margin: 0;
}
.uc-workflow__step p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v2-text-2);
  margin: 0;
}
.uc-workflow__time {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-orange-300);
  padding: 3px 10px;
  background: rgba(255,106,0,0.08);
  border: 1px solid var(--v2-orange-glow-soft);
  border-radius: 999px;
}

/* ---- 5. UseCaseAgentRecommendations (uc-agents) ---------- */
.uc-agents {
  padding: 70px 0;
}
.uc-agents__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.uc-agent-rec {
  padding: 20px 18px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--v2-dur-base), border-color var(--v2-dur-base);
}
.uc-agent-rec:hover { transform: translateY(-2px); border-color: var(--v2-orange-glow); }
.uc-agent-rec__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.uc-agent-rec__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v2-orange-400), var(--v2-orange-700));
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.uc-agent-rec__name {
  font-family: var(--v2-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1);
  margin: 0;
}
.uc-agent-rec__role {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  display: block;
  margin-top: 2px;
}
.uc-agent-rec p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-text-2);
  margin: 0;
}

/* ---- 6. UseCaseROICalculator (uc-roi) -------------------- */
.uc-roi {
  padding: 70px 0;
}
.uc-roi__card {
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(28,25,23,0.7), rgba(11,13,18,0.5));
  border: 1px solid var(--v2-stroke-2);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.uc-roi__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 28px;
  align-items: center;
}
.uc-roi__divider {
  background: var(--v2-stroke-1);
  align-self: stretch;
}
.uc-roi__inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uc-roi__input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uc-roi__input label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.uc-roi__input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.uc-roi__input input[type="range"] {
  flex: 1;
  accent-color: var(--v2-orange-500);
}
.uc-roi__value {
  min-width: 80px;
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-orange-400);
  text-align: right;
  letter-spacing: -0.02em;
}
.uc-roi__output {
  text-align: center;
}
.uc-roi__output-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.uc-roi__output-num {
  font-family: var(--v2-font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--v2-orange-400);
  display: block;
  margin: 8px 0 4px;
  line-height: 1;
}
.uc-roi__output-cap {
  font-size: 12px;
  color: var(--v2-text-2);
}

/* ---- 7. StickyCTA (uc-sticky) ---------------------------- */
.uc-sticky {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  background: var(--v2-bg-glass-strong);
  border: 1px solid var(--v2-orange-glow);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 14px 38px -10px var(--v2-orange-glow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 300ms var(--v2-ease-out), transform 300ms var(--v2-ease-spring);
}
.uc-sticky.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.uc-sticky__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-1);
}
.uc-sticky__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(180deg, var(--v2-orange-500), var(--v2-orange-700));
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ---- FAQ accordion (uc-faq) ------------------------------ */
.uc-faq {
  padding: 70px 0;
}
.uc-faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
}
.uc-faq__item {
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 12px;
  overflow: hidden;
}
.uc-faq__item[open] { border-color: var(--v2-orange-glow); }
.uc-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--v2-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text-1);
}
.uc-faq__item summary::-webkit-details-marker { display: none; }
.uc-faq__item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--v2-orange-400);
  transition: transform 240ms var(--v2-ease-out);
}
.uc-faq__item[open] summary::after { content: "−"; transform: rotate(0); }
.uc-faq__item-body {
  padding: 0 22px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--v2-text-2);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .uc-magic__grid { grid-template-columns: 1fr; }
  .uc-ba__grid { grid-template-columns: 1fr; }
  .uc-ba__divider { transform: rotate(90deg); }
  .uc-workflow__steps { grid-template-columns: repeat(2, 1fr); }
  .uc-workflow__steps::before { display: none; }
  .uc-agents__grid { grid-template-columns: repeat(2, 1fr); }
  .uc-roi__grid { grid-template-columns: 1fr; }
  .uc-roi__divider { display: none; }
}
@media (max-width: 640px) {
  .uc-workflow__steps { grid-template-columns: 1fr; }
  .uc-agents__grid { grid-template-columns: 1fr; }
  .uc-sticky { left: 12px; right: 12px; padding: 8px; flex-direction: column; align-items: stretch; gap: 8px; border-radius: 14px; }
  .uc-sticky__text { text-align: center; }
}


/* ============================================================
   LIGHT MODE — flip "dark island" containers to light surfaces
   These were hardcoded dark gradients in v2.css that ignored
   the light token layer. Fix: explicit light overrides.
   ============================================================ */

html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-roi__card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-magic__shell,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .compliance-strip,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-frame,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .comp-intel,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pipe-timeline,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agency-mc,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-center,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-window,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pp-sample {
  background: linear-gradient(180deg, #FFFFFF, #F7F1E6) !important;
  border-color: var(--v2-stroke-2) !important;
  color: var(--v2-text-1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 22px 48px -20px rgba(40,28,12,0.14) !important;
}

/* Inner dark sub-panels inside those containers also need flipping */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-magic__pane,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pp-sample__draft,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .pp-sample__scores,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agency-mc__main,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-canvas,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-stream,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-stream__body,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-card,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agency-mc__clients,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agency-mc__feed-list li,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-sidebar,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .cmd-logic,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-window__tabs,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .mkt-window__toolbar,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .agent-marketplace-grid {
  background: var(--v2-bg-deep) !important;
  border-color: var(--v2-stroke-2) !important;
  color: var(--v2-text-1) !important;
}

/* ROI calculator specific — labels were invisible warm-muted on dark in screenshot */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-roi__input label,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-roi__output-label {
  color: var(--v2-text-3) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-roi__value,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-roi__output-num {
  color: var(--v2-orange-400) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-roi__output-cap {
  color: var(--v2-text-2) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-roi__divider {
  background: var(--v2-stroke-2) !important;
}

/* Magic-demo panes — readable input/output in light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-magic__pane-text {
  color: var(--v2-text-1) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-magic__pane--output .uc-magic__pane-text {
  color: var(--v2-orange-400) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-magic__pane-label {
  color: var(--v2-text-3) !important;
}

/* Before/After & workflow & agents readability in light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-ba__head,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-workflow__step h4,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-agent-rec__name {
  color: var(--v2-text-1) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-ba__list li,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-workflow__step p,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-agent-rec p {
  color: var(--v2-text-2) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-ba__label,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-agent-rec__role {
  color: var(--v2-text-3) !important;
}

/* FAQ */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-faq__item summary {
  color: var(--v2-text-1) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-faq__item-body {
  color: var(--v2-text-2) !important;
}

/* Sticky CTA — keep glow visible on light */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-sticky {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--v2-orange-glow) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-sticky__text {
  color: var(--v2-text-1) !important;
}


/* ============================================================
   USE-CASE PROBLEM BLOCK (.uc-problem)
   Per-vertical pain → cost → HookPilot fix trio
   Lives ABOVE the generic funnel components.
   ============================================================ */

.uc-problem {
  padding: 80px 0 30px;
}
.uc-problem__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.uc-problem__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-danger) !important;
  padding: 5px 12px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 999px;
  margin-bottom: 14px;
}
.uc-problem__title {
  font-family: var(--v2-font-display);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--v2-text-1) !important;
  margin: 0 0 12px;
}
.uc-problem__title .v2-serif {
  font-family: var(--v2-font-serif);
  font-style: italic;
  color: var(--v2-gold-300);
  font-weight: 400;
}
.uc-problem__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-text-2);
  margin: 0;
}

.uc-problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.uc-problem__card {
  padding: 24px 22px;
  background: var(--v2-bg-glass);
  border: 1px solid var(--v2-stroke-2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.uc-problem__card--pain {
  border-color: rgba(248,113,113,0.25);
}
.uc-problem__card--pain::before {
  content: "";
  position: absolute;
  top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-danger), transparent);
  opacity: 0.6;
}

.uc-problem__card--cost {
  border-color: rgba(251,191,36,0.25);
  background: linear-gradient(180deg, rgba(251,191,36,0.04), var(--v2-bg-glass));
}
.uc-problem__card--cost::before {
  content: "";
  position: absolute;
  top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-warn), transparent);
  opacity: 0.6;
}

.uc-problem__card--fix {
  border-color: var(--v2-orange-glow);
  background: linear-gradient(180deg, rgba(255,106,0,0.08), rgba(255,106,0,0.01));
  box-shadow: 0 0 0 1px var(--v2-orange-glow-soft), 0 18px 48px -16px var(--v2-orange-glow);
}
.uc-problem__card--fix::before {
  content: "";
  position: absolute;
  top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}

.uc-problem__card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.uc-problem__card--pain .uc-problem__card-label { color: var(--v2-danger); }
.uc-problem__card--cost .uc-problem__card-label { color: var(--v2-warn); }
.uc-problem__card--fix  .uc-problem__card-label { color: var(--v2-orange-400); }

.uc-problem__card h3 {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-text-1) !important;
  margin: 0;
  line-height: 1.3;
}

.uc-problem__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uc-problem__card li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v2-text-2);
  padding-left: 18px;
  position: relative;
}
.uc-problem__card--pain li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--v2-danger);
  font-weight: 700;
  font-size: 12px;
}
.uc-problem__card--cost li::before {
  content: "$";
  position: absolute;
  left: 0;
  color: var(--v2-warn);
  font-weight: 700;
}
.uc-problem__card--fix li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--v2-orange-400);
  font-weight: 700;
}

.uc-problem__card-foot {
  font-size: 12.5px;
  color: var(--v2-text-3);
  font-style: italic;
  border-top: 1px solid var(--v2-stroke-1);
  padding-top: 12px;
  margin-top: auto;
}
.uc-problem__card--fix .uc-problem__card-foot {
  color: var(--v2-orange-300);
}

.uc-problem__cta {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* LIGHT mode — flip cards to white surfaces */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-problem__card {
  background: rgba(255,255,255,0.85) !important;
  color: var(--v2-text-1) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-problem__card--cost {
  background: linear-gradient(180deg, rgba(180,83,9,0.04), rgba(255,255,255,0.85)) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-problem__card--fix {
  background: linear-gradient(180deg, rgba(194,65,12,0.08), rgba(255,255,255,0.85)) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .uc-problem__card li {
  color: var(--v2-text-2) !important;
}

@media (max-width: 900px) {
  .uc-problem__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   AGENT PAGE — inline SVG architecture map (.arch-map)
   No image dependency. Animated pulses + orbit ring.
   ============================================================ */
.arch-frame--svg {
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(28,25,23,0.7), rgba(11,13,18,0.55)) !important;
  border: 1px solid var(--v2-stroke-2);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
}
.arch-frame--svg::before {
  content: "";
  position: absolute;
  top: -1px; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-orange-500), transparent);
}

.arch-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 700px;
}

.arch-svg-label {
  fill: var(--v2-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--v2-font-display);
}
.arch-svg-label--bottom {
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: none;
  fill: var(--v2-orange-300);
}

/* Input pills */
.arch-input-pill {
  fill: rgba(255,255,255,0.04);
  stroke: var(--v2-stroke-2);
  stroke-width: 1;
}
.arch-input-icon {
  font-size: 16px;
  fill: var(--v2-orange-300);
}
.arch-input-text {
  fill: var(--v2-text-1);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--v2-font-display);
}

/* Lines */
.arch-line {
  fill: none;
  stroke: var(--v2-stroke-2);
  stroke-width: 1.4;
}
.arch-line--out {
  stroke: rgba(255,106,0,0.30);
}

/* Pulses traveling */
.arch-pulse {
  fill: var(--v2-orange-400);
  filter: drop-shadow(0 0 6px rgba(255,106,0,0.85));
}
.arch-pulse--out { fill: var(--v2-orange-300); }

/* Sera hub */
.arch-hub-name {
  fill: #fff;
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.arch-hub-role {
  fill: rgba(255,255,255,0.78);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--v2-font-display);
}
.arch-orbit {
  transform-origin: 600px 300px;
  animation: arch-orbit-spin 14s linear infinite;
  stroke-dasharray: 10 6;
}
@keyframes arch-orbit-spin {
  to { transform: rotate(360deg); }
}

/* Specialist pills */
.arch-spec-pill {
  fill: rgba(255,255,255,0.04);
  stroke: var(--v2-stroke-2);
  stroke-width: 1;
}
.arch-spec-pill--guardrail {
  fill: rgba(255,194,122,0.06);
  stroke: rgba(255,194,122,0.30);
}
.arch-spec-avatar {
  fill: var(--v2-orange-700);
  stroke: var(--v2-orange-400);
  stroke-width: 1;
}
.arch-spec-avatar--marcus  { fill: #ea580c; }
.arch-spec-avatar--nova    { fill: #b8895a; stroke: #FFC27A; }
.arch-spec-avatar--kai     { fill: #ea580c; }
.arch-spec-avatar--priya   { fill: #b8895a; stroke: #FFC27A; }
.arch-spec-avatar--paul    { fill: #d4a574; stroke: #FFC27A; }
.arch-spec-avatar--finn    { fill: #ea580c; }
.arch-spec-avatar--lex     { fill: #b8895a; stroke: #FFC27A; }
.arch-spec-initials {
  fill: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--v2-font-display);
  letter-spacing: -0.01em;
}
.arch-spec-name {
  fill: var(--v2-text-1);
  font-family: var(--v2-font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.arch-spec-role {
  fill: var(--v2-text-3);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* LIGHT MODE — re-tone for cream surface */
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-frame--svg {
  background: linear-gradient(180deg, #FFFFFF, #F7F1E6) !important;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-input-pill,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-spec-pill {
  fill: rgba(255,255,255,0.85);
  stroke: rgba(40,28,12,0.14);
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-input-text,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-spec-name {
  fill: #1A1410;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-input-icon,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-input-text + .arch-input-text,
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-spec-role {
  fill: #7A6B58;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-svg-label {
  fill: #7A6B58;
}
html[data-theme="light"] body.v2-design:not(.service-page-dark) .arch-line {
  stroke: rgba(40,28,12,0.18);
}

/* Hide the old fallback markup if present in older pages */
.arch-frame--svg .arch-frame__fallback { display: none !important; }

@media (max-width: 720px) {
  .arch-map { min-height: 520px; }
}