/* ==========================================================================
   Cinematic Product Pages — atrium & argus
   Scoped under [data-cinematic]. No effect on other pages.
   ========================================================================== */

/* Strip all drop shadows on product pages. Inset shadows used as borders or
   focus rings are restored explicitly below. */
[data-cinematic],
[data-cinematic] *,
[data-cinematic] *::before,
[data-cinematic] *::after {
  box-shadow: none !important;
}

[data-cinematic] .cp-dash-nav-item.is-active {
  box-shadow: inset 0 0 0 1px rgba(249, 149, 73, 0.35) !important;
}
[data-cinematic] .cp-dash-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
[data-cinematic] .cp-platform-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cp-accent) !important;
}

[data-cinematic] {
  /* Dark theme tokens (default) */
  --cp-bg: #000000;
  --cp-bg-deep: #000000;
  --cp-text: #FFFFFF;                     /* WCAG AAA on black */
  --cp-text-muted: rgba(255, 255, 255, 0.78);
  --cp-glass-bg: rgba(255, 255, 255, 0.04);
  --cp-glass-border: rgba(255, 255, 255, 0.10);
  --cp-glass-border-bright: rgba(255, 255, 255, 0.22);
  --cp-accent: #F99549;
  --cp-accent-soft: rgba(249, 149, 73, 0.105);
  --cp-accent-glow: rgba(249, 149, 73, 0.245);
  --cp-secondary: #5FA8B5;
  --cp-secondary-soft: rgba(95, 168, 181, 0.084);

  /* Geometry */
  --cp-radius-chip: 999px;
  --cp-radius-sm: 8px;
  --cp-radius-md: 16px;
  --cp-radius-lg: 24px;
  --cp-radius-xl: 32px;

  /* Spacing */
  --cp-section-pad: clamp(128px, 18vh, 220px);
  --cp-container: 1200px;
  --cp-gutter: 32px;

  /* Easing */
  --cp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cp-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-cinematic][data-theme="light"] {
  --cp-bg: #FAF8F5;
  --cp-text: #0F1216;
  --cp-text-muted: rgba(15, 18, 22, 0.78);
  --cp-glass-bg: rgba(255, 255, 255, 0.6);
  --cp-glass-border: rgba(15, 18, 22, 0.10);
  --cp-glass-border-bright: rgba(15, 18, 22, 0.22);
  --cp-accent: #E66300;
  --cp-accent-soft: rgba(230, 99, 0, 0.12);
  --cp-accent-glow: rgba(230, 99, 0, 0.28);
  --cp-secondary: #2F6B75;        /* darker teal for AA on light */
  --cp-secondary-soft: rgba(47, 107, 117, 0.18);
}

/* Body baseline override only when cinematic is active */
[data-cinematic] body {
  background:
    radial-gradient(ellipse at top, #03030a 0%, #050507 50%, #030305 100%);
  background-attachment: fixed;
  color: var(--cp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-cinematic][data-theme="light"] body {
  background: var(--cp-bg);
}

/* Atmosphere wrapper — fixed scene behind everything */
[data-cinematic] .atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-cinematic] main,
[data-cinematic] .footer {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Atmosphere — mesh gradient orbs, dot grid, noise overlay
   ========================================================================== */

[data-cinematic] .atmosphere::before,
[data-cinematic] .atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}

/* Orange orb — top-left */
[data-cinematic] .atmosphere::before {
  width: 60vw;
  height: 60vw;
  top: -20vw;
  left: -15vw;
  background: radial-gradient(circle, var(--cp-accent) 0%, transparent 60%);
  opacity: 0.06;
  animation: cp-drift-a 60s ease-in-out infinite;
}

/* Teal orb — bottom-right */
[data-cinematic] .atmosphere::after {
  width: 50vw;
  height: 50vw;
  bottom: -15vw;
  right: -10vw;
  background: radial-gradient(circle, var(--cp-secondary) 0%, transparent 60%);
  opacity: 0.04;
  animation: cp-drift-b 75s ease-in-out infinite;
}

[data-cinematic][data-theme="light"] .atmosphere::before { opacity: 0.126; }
[data-cinematic][data-theme="light"] .atmosphere::after { opacity: 0.084; }

@keyframes cp-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(8vw, 6vh, 0) scale(1.08); }
  66%      { transform: translate3d(-4vw, 10vh, 0) scale(0.96); }
}

@keyframes cp-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-10vw, -8vh, 0) scale(1.1); }
}

/* Noise overlay */
[data-cinematic] .atmosphere {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/></svg>");
  background-size: 200px 200px;
}

[data-cinematic] .atmosphere > .atmosphere-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 70%);
}

[data-cinematic][data-theme="light"] .atmosphere > .atmosphere-grid {
  background-image:
    linear-gradient(to right, rgba(15,18,22,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,18,22,0.05) 1px, transparent 1px);
}

@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .atmosphere::before,
  [data-cinematic] .atmosphere::after { animation: none; }
}

/* ==========================================================================
   Typography
   ========================================================================== */

@font-face {
  font-family: 'NeoshareDisplay';
  src: url('../fonts/NeoshareDegularDisp-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

[data-cinematic] body {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

[data-cinematic] h1,
[data-cinematic] h2,
[data-cinematic] .product-hero-title,
[data-cinematic] .section-title,
[data-cinematic] .section-title-center,
[data-cinematic] .final-cta-title {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cp-text);
}

[data-cinematic] .product-hero-title {
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}

[data-cinematic] .section-title,
[data-cinematic] .section-title-center,
[data-cinematic] .final-cta-title {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.05;
  margin: 0 0 32px;
}

[data-cinematic] .section-title-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 880px;
}

[data-cinematic] .product-hero-subtitle,
[data-cinematic] .prose,
[data-cinematic] .integration-text,
[data-cinematic] .comparison-text,
[data-cinematic] .solution-intro,
[data-cinematic] .security-description,
[data-cinematic] .final-cta-subtitle {
  color: var(--cp-text-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
}

[data-cinematic] .section-title-center + .integration-text,
[data-cinematic] .section-title-center + .comparison-text,
[data-cinematic] .section-title-center + .solution-intro,
[data-cinematic] .section-title-center + .security-description {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

[data-cinematic] h3 {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--cp-text);
  margin: 0 0 12px;
}

/* Headline accent — solid theme orange (uses --cp-accent for both themes) */
[data-cinematic] .headline-gradient {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--cp-accent);
}

/* Eyebrow */
[data-cinematic] .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-text-muted);
  margin: 0 0 24px;
}

[data-cinematic] .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cp-accent);
  box-shadow: 0 0 12px var(--cp-accent-glow);
}

/* ==========================================================================
   Primitives — glass surfaces, cards, chips, buttons
   ========================================================================== */

[data-cinematic] .glass {
  position: relative;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--cp-radius-md);
}

@media (max-width: 767px) {
  [data-cinematic] .glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* Top-edge highlight — fakes light from above */
[data-cinematic] .glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Lit variant — gradient edge orange→teal */
[data-cinematic] .glass--lit::before {
  background: linear-gradient(135deg,
    var(--cp-accent) 0%,
    transparent 35%,
    transparent 65%,
    var(--cp-secondary) 100%);
  opacity: 0.55;
}

/* Glass card */
[data-cinematic] .glass-card {
  position: relative;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--cp-radius-md);
  padding: 32px;
  transition: transform 0.5s var(--cp-ease-smooth),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
}

[data-cinematic] .glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

[data-cinematic] .glass-card:hover {
  transform: translateY(-6px);
  border-color: var(--cp-glass-border-bright);
  box-shadow: 0 30px 60px -20px rgba(var(--shadow-tint), 0.42),
              0 0 60px -20px var(--cp-accent-glow);
}

[data-cinematic][data-theme="light"] .glass-card:hover {
  box-shadow: 0 30px 60px -20px rgba(15, 18, 22, 0.15),
              0 0 60px -20px var(--cp-accent-glow);
}

/* Chip */
[data-cinematic] .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  border-radius: var(--cp-radius-chip);
  font-size: 13px;
  font-weight: 500;
  color: var(--cp-text-muted);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Buttons - Base styles matching homepage */
[data-cinematic] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  height: 2.25rem;
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: -0.01em;
  border: none;
  position: relative;
  text-decoration: none;
}

[data-cinematic] .btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

[data-cinematic] .btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

[data-cinematic] .btn-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 2rem;
  height: 2.5rem;
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: 0 0 0.5rem 0.5rem;
  color: var(--pure-white);
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  letter-spacing: -0.01em;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background 180ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 2px 8px rgba(230, 99, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  --cp-spot-x: 50%;
  --cp-spot-y: 50%;
}

[data-cinematic] .btn-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 120px at var(--cp-spot-x) var(--cp-spot-y),
    rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

[data-cinematic] .btn-glass:hover {
  background: var(--soft-orange);
  box-shadow: 0 4px 12px rgba(230, 99, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

[data-cinematic] .btn-glass:active {
  background: var(--signal-orange);
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(230, 99, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-cinematic] .btn-glass:hover::before { opacity: 1; }

[data-cinematic] .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 2rem;
  height: 2.5rem;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 0.5rem;
  color: inherit;
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  opacity: 0.9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
              background 180ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

[data-cinematic] .btn-ghost:hover {
  opacity: 1;
  background: var(--bg-section-alt);
  border-color: var(--text-primary);
  transform: translateY(-1px);
}

[data-cinematic] .btn-ghost:active {
  background: var(--bg-section-alt);
  transform: scale(0.97);
}

[data-cinematic][data-theme="light"] .btn-ghost:hover {
  background: var(--bg-section-alt);
}

/* Secondary button variant */
[data-cinematic] .btn-secondary {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  opacity: 0.9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
              background 180ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

[data-cinematic] .btn-secondary:hover {
  opacity: 1;
  background: var(--bg-section-alt);
  border-color: var(--text-primary);
  transform: translateY(-1px);
}

[data-cinematic] .btn-secondary:active {
  background: var(--bg-section-alt);
  transform: scale(0.97);
}

/* Button size variants */
[data-cinematic] .btn-large {
  height: 2.5rem;
  padding: 0.5rem 2rem;
  font-size: 0.875rem;
}

/* Focus rings */
[data-cinematic] .btn-glass:focus-visible,
[data-cinematic] .btn-ghost:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Layout — sections, containers
   ========================================================================== */

[data-cinematic] .container {
  max-width: var(--cp-container);
  margin: 0 auto;
  padding: 0 var(--cp-gutter);
}

@media (min-width: 1440px) {
  [data-cinematic] .container { max-width: 1440px; }
}

[data-cinematic] section {
  position: relative;
  padding: var(--cp-section-pad) 0;
  background: transparent !important;
}

/* Override existing section-light / section-dark backgrounds — unified atmosphere */
[data-cinematic] .section-light,
[data-cinematic] .section-dark {
  background: transparent !important;
  color: var(--cp-text);
}

/* Persistent left edge rule on wide screens */
@media (min-width: 1280px) {
  [data-cinematic] body::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 1px;
    background: rgba(255,255,255,0.06);
    z-index: 1;
    pointer-events: none;
  }

  [data-cinematic][data-theme="light"] body::before {
    background: rgba(15,18,22,0.08);
  }
}

/* Stagger reveal helper used by JS */
[data-cinematic] .cp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--cp-ease-smooth),
              transform 0.9s var(--cp-ease-smooth);
  transition-delay: calc(var(--cp-reveal-i, 0) * 80ms);
}

[data-cinematic] .cp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .cp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Product Hero
   ========================================================================== */

[data-cinematic] .product-hero {
  padding-top: clamp(120px, 18vh, 200px);
  padding-bottom: clamp(80px, 10vh, 140px);
}

[data-cinematic] .product-hero-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}

@media (min-width: 1024px) {
  [data-cinematic] .product-hero-container {
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
  }
}

[data-cinematic] .product-hero-content {
  position: relative;
  z-index: 2;
}

[data-cinematic] .product-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 40px;
}

[data-cinematic] .product-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--cp-text-muted);
}

[data-cinematic] .product-hero-proof .separator { display: none; }

[data-cinematic] .product-hero-proof > span:not(.separator) {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  border-radius: var(--cp-radius-chip);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Hero showpiece */
[data-cinematic] .product-hero-visual {
  position: relative;
  perspective: 1200px;
  --cp-tilt-x: 0deg;
  --cp-tilt-y: 0deg;
  --cp-spot-x: 50%;
  --cp-spot-y: 50%;
}

[data-cinematic] .product-hero-visual::before {
  content: "";
  position: absolute;
  inset: -10% -15%;
  background: radial-gradient(ellipse at center,
    var(--cp-accent-glow) 0%,
    transparent 60%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

[data-cinematic] .product-hero-visual .glass--lit {
  position: relative;
  border-radius: var(--cp-radius-xl);
  padding: 16px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transform: rotateX(var(--cp-tilt-x)) rotateY(var(--cp-tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.4s var(--cp-ease-smooth);
  animation: cp-float 6s ease-in-out infinite;
}

[data-cinematic] .product-hero-visual .glass--lit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 200px at var(--cp-spot-x) var(--cp-spot-y),
    rgba(255,255,255,0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

[data-cinematic] .product-hero-visual:hover .glass--lit::after { opacity: 1; }

[data-cinematic] .product-hero-visual img,
[data-cinematic] .product-hero-visual svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--cp-radius-xl) - 8px);
  box-shadow: 0 20px 60px rgba(var(--shadow-tint), 0.37);
}

[data-cinematic] .product-hero-visual .product-hero-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cp-radius-xl);
  padding: 0;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: rotateX(var(--cp-tilt-x)) rotateY(var(--cp-tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.4s var(--cp-ease-smooth);
  animation: cp-float 6s ease-in-out infinite;
}

@keyframes cp-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* ==========================================================================
   Cinematic Dashboard component
   ========================================================================== */

[data-cinematic] {
  --cp-dash-bg: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --cp-dash-card-bg: rgba(255,255,255,0.05);
  --cp-dash-card-border: rgba(255,255,255,0.08);
  --cp-dash-divider: rgba(255,255,255,0.08);
  --cp-dash-text: rgba(255,255,255,0.92);
  --cp-dash-text-muted: rgba(255,255,255,0.55);
  --cp-dash-track: rgba(255,255,255,0.10);
  --cp-dash-bar2: rgba(255,255,255,0.32);
  --cp-dash-pill-bg: rgba(255,255,255,0.06);
  --cp-dash-pill-border: rgba(255,255,255,0.12);
  --cp-dash-sidebar-bg: rgba(255,255,255,0.03);
}

[data-cinematic][data-theme="light"] {
  --cp-dash-bg: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  --cp-dash-card-bg: rgba(255,255,255,0.85);
  --cp-dash-card-border: rgba(15,18,22,0.08);
  --cp-dash-divider: rgba(15,18,22,0.06);
  --cp-dash-text: #0F1216;
  --cp-dash-text-muted: rgba(15,18,22,0.55);
  --cp-dash-track: rgba(15,18,22,0.08);
  --cp-dash-bar2: rgba(15,18,22,0.18);
  --cp-dash-pill-bg: rgba(15,18,22,0.04);
  --cp-dash-pill-border: rgba(15,18,22,0.10);
  --cp-dash-sidebar-bg: rgba(255,255,255,0.7);
}

[data-cinematic] .cp-dashboard {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 0;
  width: 100%;
  min-height: 460px;
  border-radius: var(--cp-radius-xl);
  overflow: hidden;
  background: var(--cp-dash-bg);
  border: 1px solid var(--cp-glass-border-bright);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  color: var(--cp-dash-text);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: rotateX(var(--cp-tilt-x)) rotateY(var(--cp-tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.4s var(--cp-ease-smooth);
  animation: cp-float 6s ease-in-out infinite;
  font-size: 12px;
  line-height: 1.4;
}

[data-cinematic][data-theme="light"] .cp-dashboard {
  box-shadow:
    0 30px 80px rgba(15, 18, 22, 0.18),
    0 8px 24px rgba(15, 18, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Sidebar */
[data-cinematic] .cp-dash-sidebar {
  display: flex;
  flex-direction: column;
  padding: 18px 12px 14px;
  background: var(--cp-dash-sidebar-bg);
  border-right: 1px solid var(--cp-dash-divider);
  gap: 4px;
}
[data-cinematic] .cp-dash-brand {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--cp-accent);
  padding: 4px 10px 18px;
}
[data-cinematic] .cp-dash-nav { display: flex; flex-direction: column; gap: 2px; }
[data-cinematic] .cp-dash-nav-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cp-dash-divider); }
[data-cinematic] .cp-dash-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--cp-dash-text-muted);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  cursor: default;
  transition: background 0.2s ease, color 0.2s ease;
}
[data-cinematic] .cp-dash-nav-item svg { flex: none; opacity: .9; }
[data-cinematic] .cp-dash-nav-item:hover { background: var(--cp-dash-card-border); color: var(--cp-dash-text); }
[data-cinematic] .cp-dash-nav-item.is-active {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  box-shadow: inset 0 0 0 1px rgba(249,149,73,0.35);
}

/* Main canvas */
[data-cinematic] .cp-dash-main {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  gap: 12px;
  min-width: 0;
}

[data-cinematic] .cp-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
[data-cinematic] .cp-dash-page-title {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  letter-spacing: -0.01em;
}
[data-cinematic] .cp-dash-topbar-actions { display: inline-flex; align-items: center; gap: 8px; }
[data-cinematic] .cp-dash-pill {
  font: 500 11px/1 'Inter', sans-serif;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--cp-dash-pill-bg);
  border: 1px solid var(--cp-dash-pill-border);
  color: var(--cp-dash-text);
  cursor: default;
}
[data-cinematic] .cp-dash-pill--accent {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: #fff;
  box-shadow: 0 4px 12px var(--cp-accent-glow);
}
[data-cinematic] .cp-dash-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--cp-dash-pill-bg);
  border: 1px solid var(--cp-dash-pill-border);
  color: var(--cp-dash-text-muted);
}
[data-cinematic] .cp-dash-bell-dot {
  position: absolute; top: 6px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cp-accent);
}
[data-cinematic] .cp-dash-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cp-accent), var(--cp-secondary));
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Card grid */
[data-cinematic] .cp-dash-row { display: grid; gap: 12px; }
[data-cinematic] .cp-dash-row--3 { grid-template-columns: 1fr 1.4fr 1.2fr; }
[data-cinematic] .cp-dash-row--2 { grid-template-columns: 1.6fr 1fr; }

[data-cinematic] .cp-dash-card {
  background: var(--cp-dash-card-bg);
  border: 1px solid var(--cp-dash-card-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-cinematic] .cp-dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
[data-cinematic] .cp-dash-card-title { font-weight: 600; font-size: 12px; }
[data-cinematic] .cp-dash-card-meta {
  font-size: 11px;
  color: var(--cp-dash-text-muted);
}
[data-cinematic] .cp-dash-card-meta.cp-up { color: #4ED38A; }
[data-cinematic] .cp-dash-card-legend {
  display: inline-flex; align-items: center;
  font-size: 11px; color: var(--cp-dash-text-muted); gap: 6px;
}

/* Donut */
[data-cinematic] .cp-dash-donut {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 12px;
}
[data-cinematic] .cp-dash-donut svg { width: 100px; height: 100px; }
[data-cinematic] .cp-dash-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
[data-cinematic] .cp-dash-legend li { display: flex; align-items: center; gap: 6px; color: var(--cp-dash-text-muted); }
[data-cinematic] .cp-dash-legend em { margin-left: auto; font-style: normal; color: var(--cp-dash-text); font-weight: 600; }
[data-cinematic] .cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
[data-cinematic] .cp-dot--neutral { background: rgba(255,255,255,0.55); }
[data-cinematic][data-theme="light"] .cp-dot--neutral { background: rgba(15,18,22,0.45); }
[data-cinematic] .cp-dot--muted { background: var(--cp-dash-track); border: 1px solid var(--cp-dash-card-border); }

/* Area chart */
[data-cinematic] .cp-dash-card--chart { gap: 6px; }
[data-cinematic] .cp-dash-chart-value {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
}
[data-cinematic] .cp-dash-chart-unit { font-size: 13px; color: var(--cp-dash-text-muted); margin-left: 4px; }
[data-cinematic] .cp-dash-area { width: 100%; height: 90px; display: block; }
[data-cinematic] .cp-dash-chart-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--cp-dash-text-muted);
  letter-spacing: .04em;
}
[data-cinematic] .cp-dash-chart-axis--12 { padding: 0 6px; }

/* Table */
[data-cinematic] .cp-dash-card--table { padding: 14px 14px 6px; }
[data-cinematic] .cp-dash-table { display: flex; flex-direction: column; }
[data-cinematic] .cp-dash-table-head,
[data-cinematic] .cp-dash-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 8px;
  padding: 8px 0;
  align-items: center;
}
[data-cinematic] .cp-dash-table-head {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cp-dash-text-muted);
  border-bottom: 1px solid var(--cp-dash-divider);
  padding: 0 0 8px;
}
[data-cinematic] .cp-dash-table-row + .cp-dash-table-row { border-top: 1px solid var(--cp-dash-divider); }
[data-cinematic] .cp-dash-table-name { font-weight: 500; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-cinematic] .cp-dash-table-row > span:nth-child(2) {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--cp-dash-text-muted);
}
[data-cinematic] .cp-dash-bar {
  position: relative;
  display: inline-block;
  width: 56px; height: 4px;
  background: var(--cp-dash-track);
  border-radius: 999px;
  overflow: hidden;
}
[data-cinematic] .cp-dash-bar > span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--cp-accent);
  border-radius: 999px;
}
[data-cinematic] .cp-dash-amt { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Bars chart */
[data-cinematic] .cp-dash-bars { width: 100%; height: 140px; display: block; }

/* Building card */
[data-cinematic] .cp-dash-card--building { color: var(--cp-dash-text); }
[data-cinematic] .cp-dash-building { width: 100%; height: 130px; display: block; border-radius: 10px; }
[data-cinematic] .cp-dash-building-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
[data-cinematic] .cp-dash-building-meta span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--cp-dash-pill-bg);
  border: 1px solid var(--cp-dash-pill-border);
}
[data-cinematic] .cp-dash-building-meta strong {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--cp-dash-text);
}
[data-cinematic] .cp-dash-building-meta em {
  font-style: normal; font-size: 10px; color: var(--cp-dash-text-muted); text-transform: uppercase; letter-spacing: .06em;
}

@media (max-width: 920px) {
  [data-cinematic] .cp-dashboard { font-size: 11px; min-height: auto; }
  [data-cinematic] .cp-dashboard { grid-template-columns: 56px 1fr; }
  [data-cinematic] .cp-dash-brand { font-size: 0; padding: 4px 0 18px; }
  [data-cinematic] .cp-dash-brand::before { content: "a"; font-size: 18px; color: var(--cp-accent); display: inline-block; }
  [data-cinematic] .cp-dash-nav-item { justify-content: center; padding: 8px 0; font-size: 0; gap: 0; }
  [data-cinematic] .cp-dash-row--3 { grid-template-columns: 1fr; }
  [data-cinematic] .cp-dash-row--2 { grid-template-columns: 1fr; }
  [data-cinematic] .cp-dash-page-title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .product-hero-visual .glass--lit,
  [data-cinematic] .product-hero-visual .product-hero-frame,
  [data-cinematic] .cp-dashboard { animation: none; }
}

/* ==========================================================================
   Argus UBO graph — cinematic restyle
   ========================================================================== */

[data-cinematic] .ubo-graph-visual {
  position: relative;
  width: 100%;
}

[data-cinematic] .ubo-chain-svg {
  width: 100%;
  height: auto;
  display: block;
}

[data-cinematic] .ubo-chain-svg .ubo-node circle:not(:first-child) {
  filter: drop-shadow(0 0 12px var(--cp-accent-glow));
  transition: filter 0.4s ease, transform 0.4s var(--cp-ease-spring);
  transform-origin: center;
  transform-box: fill-box;
}

[data-cinematic] .ubo-chain-svg .ubo-node:hover circle:not(:first-child) {
  filter: drop-shadow(0 0 24px var(--cp-accent));
  transform: scale(1.08);
}

[data-cinematic] .ubo-chain-svg line {
  stroke: url(#cp-link-gradient) !important;
  stroke-opacity: 0.6 !important;
  stroke-width: 1.5 !important;
}

[data-cinematic] .ubo-chain-svg text {
  fill: var(--cp-text-muted) !important;
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 11px;
}

[data-cinematic] .ubo-chain-svg .ubo-final text:first-of-type {
  fill: var(--cp-text) !important;
  font-weight: 600;
}

/* Light packets traveling along the connectors */
[data-cinematic] .ubo-packet {
  fill: var(--cp-accent);
  filter: drop-shadow(0 0 8px var(--cp-accent));
}

/* ==========================================================================
   Problem section — editorial, centered, no card
   ========================================================================== */

[data-cinematic] .problem-section .problem-layout {
  display: flex;
  justify-content: center;
}

[data-cinematic] .problem-section .problem-text {
  max-width: 780px;
  text-align: center;
  position: relative;
}

[data-cinematic] .problem-section .problem-text::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--cp-accent);
  margin: 0 auto 32px;
  box-shadow: 0 0 12px var(--cp-accent-glow);
}

[data-cinematic] .problem-section .section-title {
  margin-bottom: 28px;
}

[data-cinematic] .problem-section .prose {
  margin: 0 auto 16px;
  text-align: center;
}

[data-cinematic] .problem-section .prose.highlight {
  color: var(--cp-text);
  font-size: 22px;
  font-weight: 500;
}

/* ==========================================================================
   Solution — mini-blocks with motifs (atrium)
   ========================================================================== */

[data-cinematic] .solution-section .mini-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0 auto 56px;
  max-width: 1100px;
}

@media (min-width: 768px) {
  [data-cinematic] .solution-section .mini-blocks {
    grid-template-columns: repeat(3, 1fr);
  }
}

[data-cinematic] .mini-block {
  position: relative;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--cp-radius-md);
  padding: 40px 28px 32px;
  transition: transform 0.5s var(--cp-ease-smooth), border-color 0.4s ease, box-shadow 0.5s ease;
  overflow: hidden;
  text-align: center;
}

[data-cinematic] .mini-block h3 {
  color: var(--cp-text);
}

[data-cinematic] .mini-block p {
  color: var(--cp-text-muted);
  margin: 0;
}

[data-cinematic] .mini-block::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--cp-accent-glow) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  filter: blur(40px);
}

[data-cinematic] .mini-block:hover {
  transform: translateY(-4px);
  border-color: var(--cp-glass-border-bright);
}

[data-cinematic] .mini-block:hover::before { opacity: 1; }

[data-cinematic] .mini-block .motif {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 28px;
}

[data-cinematic] .mini-block .motif::before,
[data-cinematic] .mini-block .motif::after,
[data-cinematic] .mini-block .motif span {
  display: block;
  position: absolute;
}

/* Motif: orbiting dots (Collaboration) */
[data-cinematic] .motif.motif--collab span,
[data-cinematic] .motif.motif--collab::before,
[data-cinematic] .motif.motif--collab::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cp-accent);
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  box-shadow: 0 0 12px var(--cp-accent-glow);
}

[data-cinematic] .motif.motif--collab::before {
  animation: cp-orbit 4s linear infinite;
}

[data-cinematic] .motif.motif--collab span {
  animation: cp-orbit 4s linear infinite;
  animation-delay: -1.33s;
}

[data-cinematic] .motif.motif--collab::after {
  animation: cp-orbit 4s linear infinite;
  animation-delay: -2.66s;
}

@keyframes cp-orbit {
  from { transform: rotate(0deg) translateX(20px); }
  to   { transform: rotate(360deg) translateX(20px); }
}

/* Motif: rotating sweep (Process) */
[data-cinematic] .motif.motif--process {
  border: 2px solid var(--cp-glass-border-bright);
  border-radius: 50%;
}

[data-cinematic] .motif.motif--process::before {
  content: "";
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--cp-accent);
  border-right-color: var(--cp-accent);
  animation: cp-spin 3s linear infinite;
  filter: drop-shadow(0 0 8px var(--cp-accent-glow));
}

@keyframes cp-spin {
  to { transform: rotate(360deg); }
}

/* Motif: stacked rows (Data) */
[data-cinematic] .motif.motif--data span {
  width: 100%;
  height: 6px;
  background: var(--cp-accent);
  border-radius: 3px;
  left: 0;
  opacity: 0.8;
  animation: cp-pulse-row 2.4s ease-in-out infinite;
  box-shadow: 0 0 12px var(--cp-accent-glow);
}

[data-cinematic] .motif.motif--data span:nth-child(1) { top: 8px;  animation-delay: 0s; }
[data-cinematic] .motif.motif--data span:nth-child(2) { top: 25px; animation-delay: 0.3s; }
[data-cinematic] .motif.motif--data span:nth-child(3) { top: 42px; animation-delay: 0.6s; }

@keyframes cp-pulse-row {
  0%, 100% { opacity: 0.3; transform: scaleX(0.6); transform-origin: left; }
  50%      { opacity: 1;   transform: scaleX(1); }
}

[data-cinematic] .solution-section .solution-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  font-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .motif::before,
  [data-cinematic] .motif::after,
  [data-cinematic] .motif span { animation: none !important; }
}

/* ==========================================================================
   Solution — single block (argus)
   ========================================================================== */

[data-cinematic] .solution-section .solution-blocks {
  max-width: 780px;
  margin: 32px auto 0;
  text-align: center;
}

[data-cinematic] .solution-section .solution-blocks .prose {
  margin: 0 auto 32px;
  text-align: center;
}

[data-cinematic] .solution-section .solution-claim {
  display: block;
  font-family: 'NeoshareDisplay', sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 24px 0 0;
}

/* ==========================================================================
   Features grid
   ========================================================================== */

[data-cinematic] .features-section .features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  [data-cinematic] .features-section .features-grid {
    grid-template-columns: 7fr 5fr;
    grid-auto-rows: 1fr;
  }
}

[data-cinematic] .feature-card {
  position: relative;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--cp-radius-md);
  padding: 36px 32px;
  transition: transform 0.5s var(--cp-ease-smooth),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
  overflow: hidden;
}

[data-cinematic] .feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--cp-glass-border-bright);
  box-shadow: 0 30px 60px -20px rgba(var(--shadow-tint), 0.42),
              0 0 80px -30px var(--cp-accent-glow);
}

[data-cinematic] .feature-card .feature-tag {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--cp-accent-soft);
  border: 1px solid rgba(249,149,73,0.3);
  border-radius: var(--cp-radius-chip);
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-accent);
}

[data-cinematic] .feature-card h3 {
  position: relative;
  font-size: 24px;
  margin: 0 0 16px;
  padding-right: 80px;
  display: inline-block;
}

[data-cinematic] .feature-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cp-accent), transparent);
  transition: width 0.5s var(--cp-ease-smooth);
}

[data-cinematic] .feature-card:hover h3::after { width: 100%; }

[data-cinematic] .feature-card p {
  color: var(--cp-text-muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 12px;
}

[data-cinematic] .feature-card .feature-meta {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cp-text-muted);
  padding: 8px 0 0;
  margin-top: 16px;
  border-top: 1px solid var(--cp-glass-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-cinematic] .feature-card .feature-meta::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cp-accent);
}

/* ==========================================================================
   Audience cards
   ========================================================================== */

[data-cinematic] .audience-section .audience-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  [data-cinematic] .audience-section .audience-blocks {
    grid-template-columns: repeat(3, 1fr);
  }
}

[data-cinematic] .audience-card {
  position: relative;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--cp-radius-md);
  padding: 28px 28px 28px 32px;
  transition: transform 0.5s var(--cp-ease-smooth), border-color 0.4s ease;
  overflow: hidden;
}

[data-cinematic] .audience-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--cp-accent);
  box-shadow: 0 0 8px var(--cp-accent-glow);
  transition: width 0.5s var(--cp-ease-smooth);
}

[data-cinematic] .audience-card.is-visible::before { width: 4px; }

[data-cinematic] .audience-card:hover {
  transform: translateY(-3px);
  border-color: var(--cp-glass-border-bright);
}

[data-cinematic] .audience-card h3 { font-size: 20px; }
[data-cinematic] .audience-card p {
  color: var(--cp-text-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   Integration plinth
   ========================================================================== */

[data-cinematic] .integration-section .container {
  max-width: 1000px;
}

[data-cinematic] .integration-section .integration-text {
  text-align: center;
  margin: 16px auto;
  max-width: 720px;
}

[data-cinematic] .integration-section .system-badges,
[data-cinematic] .integration-section .product-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 32px 40px;
  margin: 56px auto 0;
  max-width: 880px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--cp-radius-lg);
  position: relative;
}

[data-cinematic] .system-badge,
[data-cinematic] .product-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: rgba(249,149,73,0.08);
  border: 1px solid rgba(249,149,73,0.3);
  border-radius: var(--cp-radius-chip);
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--cp-text);
  box-shadow: 0 0 24px -8px var(--cp-accent-glow);
}

[data-cinematic] .product-badge-separator {
  font-size: 18px;
  color: var(--cp-accent);
  font-weight: 300;
}

/* ==========================================================================
   Comparison (argus)
   ========================================================================== */

[data-cinematic] .comparison-section .comparison-text {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 24px;
  border-left: 2px solid var(--cp-accent);
  text-align: left;
  font-size: 18px;
  line-height: 1.65;
}

/* ==========================================================================
   Security — calm
   ========================================================================== */

[data-cinematic] .security-container {
  text-align: center;
}

[data-cinematic] .security-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 40px auto 32px;
  max-width: 760px;
}

[data-cinematic] .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  border-radius: var(--cp-radius-chip);
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--cp-text-muted);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-cinematic] .badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cp-accent);
}

[data-cinematic] .security-description {
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
}

/* ==========================================================================
   Final CTA — crescendo
   ========================================================================== */

[data-cinematic] .final-cta {
  text-align: center;
  position: relative;
}

[data-cinematic] .final-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: 600px;
  background: radial-gradient(ellipse at center,
    var(--cp-accent-glow) 0%,
    transparent 65%);
  filter: blur(80px);
  opacity: 0.7;
  z-index: 0;
  animation: cp-cta-pulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cp-cta-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}

[data-cinematic] .final-cta-container {
  position: relative;
  z-index: 1;
}

[data-cinematic] .final-cta-title {
  margin-bottom: 20px;
}

[data-cinematic] .final-cta-subtitle {
  margin: 0 auto 40px;
  text-align: center;
  font-size: 19px;
}

[data-cinematic] .final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .final-cta::before { animation: none; }
}

/* ==========================================================================
   Header — floating glass capsule
   ========================================================================== */

/* DISABLED - conflicts with neoshare-header component
[data-cinematic] .header {
  position: fixed;
  top: 14px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 1180px);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--cp-glass-border-bright);
  border-radius: 999px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 100;
  transition:
    transform 0.35s var(--cp-ease-smooth),
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
*

/

/* ALL HEADER STYLES DISABLED - using neoshare-header component instead

[data-cinematic] .header.header-hidden {
  transform: translateX(-50%) translateY(calc(-100% - 24px));
}

[data-cinematic] .header.is-scrolled {
  background: rgba(0, 0, 0, 0.78);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

[data-cinematic][data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 18, 22, 0.08);
  box-shadow:
    0 16px 40px rgba(15, 18, 22, 0.10),
    0 4px 12px rgba(15, 18, 22, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-cinematic][data-theme="light"] .header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
}

[data-cinematic] .header.on-light { background: rgba(0, 0, 0, 0.55); }
[data-cinematic][data-theme="light"] .header.on-light { background: rgba(255, 255, 255, 0.62); }

[data-cinematic] .header-container {
  height: 56px;
  padding: 0 22px;
}
[data-cinematic] .header.is-scrolled .header-container { height: 56px; }

[data-cinematic] .header .nav-list a,
[data-cinematic] .header .nav-dropdown-trigger {
  color: var(--cp-text);
}

[data-cinematic] .header .logo-white { opacity: 1; }
[data-cinematic] .header .logo-black { opacity: 0; }
[data-cinematic][data-theme="light"] .header .logo-white { opacity: 0; }
[data-cinematic][data-theme="light"] .header .logo-black { opacity: 1; }

[data-cinematic] .header .btn-primary {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-cinematic] main { padding-top: 24px; }

@media (max-width: 768px) {
  [data-cinematic] .header { top: 8px; width: calc(100% - 16px); border-radius: 28px; }
  [data-cinematic] .header-container { padding: 0 16px; }
}

END DISABLED SECTION */

/* ==========================================================================
   Unified primary button — solid accent
   ========================================================================== */

[data-cinematic] .btn-primary {
  background: var(--accent-primary);
  color: var(--pure-white);
  border: none;
  box-shadow: 0 2px 8px rgba(230, 99, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background 180ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 0 0 0.5rem 0.5rem; /* Sharp top corners, rounded bottom */
}
[data-cinematic] .btn-primary:hover {
  background: var(--soft-orange);
  box-shadow: 0 4px 12px rgba(230, 99, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
[data-cinematic] .btn-primary:active {
  background: var(--signal-orange);
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(230, 99, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
[data-cinematic] .btn-primary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* btn-glass additional refinement - maintains consistency with btn-primary */
[data-cinematic] .btn-glass::before {
  background: radial-gradient(circle 120px at var(--cp-spot-x) var(--cp-spot-y),
    rgba(255,255,255,0.15) 0%, transparent 70%);
}

[data-cinematic] .footer {
  background: transparent !important;
  border-top: 1px solid var(--cp-glass-border);
}

[data-cinematic] .footer .footer-text {
  color: var(--cp-text-muted);
}

/* ==========================================================================
   Atlas — adopt cinematic visual direction
   ========================================================================== */

/* Strip atlas-specific solid section backgrounds; atmosphere shows through */
[data-cinematic] .atlas-features,
[data-cinematic] .atlas-features-header,
[data-cinematic] .atlas-intro,
[data-cinematic] .atlas-problem,
[data-cinematic] .atlas-solution,
[data-cinematic] .atlas-audience,
[data-cinematic] .atlas-integration,
[data-cinematic] .atlas-security,
[data-cinematic] .product-cta {
  background: transparent !important;
  color: var(--cp-text);
}

/* Hero: keep the masked-video showpiece but anchor it to the dark scene */
[data-cinematic] .atlas-hero { background: transparent; }
[data-cinematic] .atlas-hero-black { background: var(--cp-bg-deep); }

/* Atlas hero CTAs use the unified button stack (already applied via [data-cinematic] .btn-*) */

/* Intro text — adopt cinematic typography colors */
[data-cinematic] .atlas-intro-title,
[data-cinematic] .atlas-problem-title,
[data-cinematic] .atlas-solution-title,
[data-cinematic] .atlas-audience-title,
[data-cinematic] .atlas-integration-title,
[data-cinematic] .atlas-feature-title,
[data-cinematic] .product-cta-title { color: var(--cp-text); }

[data-cinematic] .atlas-intro-subtitle,
[data-cinematic] .atlas-feature-description,
[data-cinematic] .atlas-intro-description,
[data-cinematic] .atlas-audience-description,
[data-cinematic] .atlas-solution-subtitle,
[data-cinematic] .product-cta-subtitle { color: var(--cp-text-muted); }

[data-cinematic] .atlas-problem-content > p,
[data-cinematic] .atlas-solution-content > p,
[data-cinematic] .atlas-integration-content > p { color: var(--cp-text-muted); }

/* Quote/blockquote — glass treatment */
[data-cinematic] .atlas-problem-quote {
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--cp-radius-md);
  padding: 24px 28px;
  color: var(--cp-text);
}
[data-cinematic] .atlas-problem-quote .quote-mark { color: var(--cp-accent); }

/* Intro feature icon cards — neutralize old solid bg */
[data-cinematic] .atlas-intro-feature .feature-icon-animated {
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
}

/* Audience cards — glass surface mirroring atrium */
[data-cinematic] .atlas-audience-card {
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--cp-radius-md);
  padding: 28px;
  color: var(--cp-text);
}

/* Feature image frames in the sticky scrollytelling — keep them readable on dark */
[data-cinematic] .atlas-feature-image {
  border: 1px solid var(--cp-glass-border-bright);
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.30);
}

[data-cinematic][data-theme="light"] .atlas-feature-image {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 18, 22, 0.08);
  box-shadow:
    0 30px 80px rgba(15, 18, 22, 0.12),
    0 8px 24px rgba(15, 18, 22, 0.06);
}

[data-cinematic][data-theme="light"] .atlas-hero-black { background: var(--cp-bg); }

/* ==========================================================================
   Accessibility — focus, contrast, motion, semantics
   ========================================================================== */

/* Strong visible focus ring for every interactive element under cinematic */
[data-cinematic] :focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 3px;
  border-radius: var(--cp-radius-sm);
}

/* Skip link must clear the floating glass header */
[data-cinematic] .skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--cp-accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--cp-radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
[data-cinematic] .skip-link:focus,
[data-cinematic] .skip-link:focus-visible { transform: translateY(0); }

/* Header nav links — DISABLED
[data-cinematic] .header .nav-list a,
[data-cinematic] .header .nav-dropdown-trigger {
  color: var(--cp-text);
  font-weight: 500;
}
[data-cinematic] .header .nav-list a:hover,
[data-cinematic] .header .nav-dropdown-trigger:hover { color: var(--cp-accent); background: transparent; }
[data-cinematic][data-theme="light"] .header .nav-list a,
[data-cinematic][data-theme="light"] .header .nav-dropdown-trigger { color: #0F1216; }
*/

/* Button styles are defined earlier in this file - see line ~390 */

/* Body-text muted color → meets 4.5:1 on near-black scene */
[data-cinematic] {
  --cp-text-muted: rgba(255, 255, 255, 0.82);
}
[data-cinematic][data-theme="light"] {
  --cp-text-muted: rgba(15, 18, 22, 0.78);
}

/* Eyebrow / feature-tag — ensure legible on glass */
[data-cinematic] .eyebrow,
[data-cinematic] .feature-tag {
  color: var(--cp-accent);
  font-weight: 600;
}

/* Reduced-motion: kill non-essential cinematic animation */
@media (prefers-reduced-motion: reduce) {
  [data-cinematic] *,
  [data-cinematic] *::before,
  [data-cinematic] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-cinematic] .atmosphere::before,
  [data-cinematic] .atmosphere::after,
  [data-cinematic] .cp-dashboard,
  [data-cinematic] .product-hero-frame,
  [data-cinematic] .glass--lit { animation: none !important; }
}

/* Reduced-transparency users — replace glass with solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  /* [data-cinematic] .header, - DISABLED */
  [data-cinematic] .cp-dashboard,
  [data-cinematic] .feature-card,
  [data-cinematic] .audience-card,
  [data-cinematic] .mini-block,
  [data-cinematic] .atlas-audience-card,
  [data-cinematic] .atlas-problem-quote {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0a0a0c;
    border-color: rgba(255,255,255,0.20);
  }
  /* [data-cinematic][data-theme="light"] .header, - DISABLED */
  [data-cinematic][data-theme="light"] .cp-dashboard,
  [data-cinematic][data-theme="light"] .feature-card,
  [data-cinematic][data-theme="light"] .audience-card,
  [data-cinematic][data-theme="light"] .mini-block,
  [data-cinematic][data-theme="light"] .atlas-audience-card,
  [data-cinematic][data-theme="light"] .atlas-problem-quote {
    background: #FFFFFF;
    border-color: rgba(15,18,22,0.18);
  }
}

/* Forced-colors / Windows High Contrast support */
@media (forced-colors: active) {
  [data-cinematic] .btn-primary,
  [data-cinematic] .btn-glass,
  [data-cinematic] .btn-ghost,
  [data-cinematic] .btn-secondary {
    border: 1px solid CanvasText;
    background: ButtonFace;
    color: ButtonText;
    forced-color-adjust: none;
  }
  [data-cinematic] :focus-visible { outline-color: Highlight; }
}

/* Ensure interactive targets meet 24×24 minimum (WCAG 2.5.8) */
[data-cinematic] .btn,
/* [data-cinematic] .header .nav-list a, - DISABLED */
/* [data-cinematic] .nav-dropdown-trigger, - DISABLED */
[data-cinematic] .theme-option { min-height: 36px; }

/* Theme switcher: lift contrast of inactive states */
[data-cinematic] .theme-option { color: var(--cp-text-muted); }
[data-cinematic] .theme-option.active,
[data-cinematic] .theme-option:hover { color: var(--cp-text); }

/* Tighten dashboard table truncation: add title-fallback semantic aid */
[data-cinematic] .cp-dash-table-name { word-break: break-word; }

/* ==========================================================================
   v2 — Restructured narrative pages (atrium pilot)
   Centered cinematic hero, fade-out showcase, alternating narrative rows,
   sticky walkthrough, pull-quotes, placeholder components.
   ========================================================================== */

/* --- Cinematic hero (centered, oversized fade-out) ---------------------- */

[data-cinematic] .cp-hero {
  position: relative;
  padding-top: clamp(140px, 18vh, 220px);
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Soft top glow behind headline (warm, accent-driven) */
[data-cinematic] .cp-hero-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(1100px, 95vw);
  aspect-ratio: 1.6 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 50% at 50% 35%, var(--cp-accent-glow) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(95,168,181,0.18) 0%, transparent 65%);
  filter: blur(50px);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}
[data-cinematic][data-theme="light"] .cp-hero-glow { opacity: 0.55; }

[data-cinematic] .cp-hero-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 920px;
  z-index: 1;
}
[data-cinematic] .cp-hero-stack .eyebrow { margin-bottom: 28px; }

[data-cinematic] .cp-hero-title {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 18ch;
}

[data-cinematic] .cp-hero-lede {
  color: var(--cp-text-muted);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 auto 36px;
}

[data-cinematic] .cp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 56px;
}

[data-cinematic] .cp-hero-trust-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-text-muted);
  opacity: 0.72;
  margin: 0 0 18px;
}

[data-cinematic] .cp-hero-trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 40px;
  color: var(--cp-text-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
[data-cinematic] .cp-hero-trust li {
  position: relative;
  white-space: nowrap;
}
[data-cinematic] .cp-hero-trust li + li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transform: translateY(-50%);
}

/* Oversized showcase — fades to bg at the bottom */
[data-cinematic] .cp-hero-showcase {
  position: relative;
  margin-top: clamp(56px, 8vh, 96px);
  padding: 0 clamp(16px, 4vw, 64px);
  perspective: 1400px;
  --cp-tilt-x: 0deg;
  --cp-tilt-y: 0deg;
  --cp-spot-x: 50%;
  --cp-spot-y: 50%;
}

[data-cinematic] .cp-hero-showcase::before {
  content: "";
  position: absolute;
  inset: -8% -2% 0;
  background: radial-gradient(ellipse 70% 50% at 50% 30%,
    var(--cp-accent-glow) 0%,
    transparent 65%);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

[data-cinematic] .cp-hero-showcase-inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  z-index: 1;
  /* Mask the bottom into the background — the key fade move */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 62%, rgba(0,0,0,0.85) 78%, rgba(0,0,0,0.35) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 62%, rgba(0,0,0,0.85) 78%, rgba(0,0,0,0.35) 92%, transparent 100%);
  padding-bottom: clamp(100px, 16vh, 180px);
}

/* Atrium platform frame: keep the showcase opaque — the SVG should read crisp,
   not be masked into the page background. */
[data-cinematic] .cp-hero-showcase-inner:has(.cp-platform-frame) {
  -webkit-mask-image: none;
  mask-image: none;
}

[data-cinematic] .cp-hero-showcase .cp-dashboard,
[data-cinematic] .cp-hero-showcase .cp-hero-graph {
  width: 100%;
  /* 4:3 ratio — locks the showcase to a consistent canvas */
  aspect-ratio: 4 / 3;
  min-height: 0;
  /* Slight 3D resting tilt — looks more cinematic, less brochure */
  transform: perspective(1400px) rotateX(calc(2deg + var(--cp-tilt-x))) rotateY(var(--cp-tilt-y));
  box-shadow:
    0 60px 140px rgba(0,0,0,0.65),
    0 20px 50px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
[data-cinematic][data-theme="light"] .cp-hero-showcase .cp-dashboard,
[data-cinematic][data-theme="light"] .cp-hero-showcase .cp-hero-graph {
  box-shadow:
    0 50px 120px rgba(15,18,22,0.18),
    0 20px 40px rgba(15,18,22,0.10),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ==========================================================================
   Platform frame — real product preview (atrium hero)
   Renders dashboard.svg inside a browser-chrome container.
   No tilt, no spotlight: behaves like a real embedded app you can pan around.
   ========================================================================== */
[data-cinematic] .cp-hero-showcase .cp-platform-frame {
  position: relative;
  width: 100%;
  border-radius: var(--cp-radius-xl);
  overflow: hidden;
  background: #0d0e12;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 60px 140px rgba(0,0,0,0.65),
    0 20px 50px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transform: none;
  animation: none;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
[data-cinematic][data-theme="light"] .cp-hero-showcase .cp-platform-frame {
  background: #f3f3f3;
  border-color: rgba(15,18,22,0.10);
  box-shadow:
    0 50px 120px rgba(15,18,22,0.20),
    0 20px 40px rgba(15,18,22,0.10),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

[data-cinematic] .cp-platform-chrome {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}
[data-cinematic][data-theme="light"] .cp-platform-chrome {
  background: linear-gradient(180deg, #fafafa, #f0f0f0);
  border-bottom-color: rgba(15,18,22,0.08);
  color: rgba(15,18,22,0.55);
}

[data-cinematic] .cp-platform-dots { display: inline-flex; gap: 6px; }
[data-cinematic] .cp-platform-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
[data-cinematic] .cp-platform-dot:nth-child(1) { background: #ff5f57; }
[data-cinematic] .cp-platform-dot:nth-child(2) { background: #febc2e; }
[data-cinematic] .cp-platform-dot:nth-child(3) { background: #28c840; }

[data-cinematic] .cp-platform-url {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.01em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-cinematic][data-theme="light"] .cp-platform-url {
  background: rgba(15,18,22,0.04);
  border-color: rgba(15,18,22,0.06);
}
[data-cinematic] .cp-platform-url svg { opacity: 0.7; }

[data-cinematic] .cp-platform-chrome-spacer {
  width: 33px; /* visually balances the dots cluster on the left */
}

[data-cinematic] .cp-platform-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  outline: none;
}
[data-cinematic] .cp-platform-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cp-accent);
}

[data-cinematic] .cp-platform-screen {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 900px) {
  [data-cinematic] .cp-platform-chrome { height: 34px; padding: 0 10px; font-size: 10px; }
  [data-cinematic] .cp-platform-url { padding: 4px 10px; }
}

/* Hero graph (argus) — glass canvas wrapping the UBO SVG */
[data-cinematic] .cp-hero-graph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cp-radius-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(249,149,73,0.18), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--cp-glass-border-bright);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transform-style: preserve-3d;
  transition: transform 0.4s var(--cp-ease-smooth);
  animation: cp-float 6s ease-in-out infinite;
}
[data-cinematic][data-theme="light"] .cp-hero-graph {
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(230,99,0,0.10), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
}
[data-cinematic] .cp-hero-graph .ubo-graph-visual {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
}
[data-cinematic] .cp-hero-graph .ubo-chain-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* The fade strip beneath the showcase — extra polish for ambient transition */
[data-cinematic] .cp-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--cp-bg) 85%);
  pointer-events: none;
  z-index: 2;
}
[data-cinematic][data-theme="light"] .cp-hero-fade {
  background: linear-gradient(to bottom, transparent 0%, var(--cp-bg) 85%);
}

/* Hide the fade strip when the showcase hosts the platform frame */
[data-cinematic] .cp-hero-showcase:has(.cp-platform-frame) .cp-hero-fade {
  display: none;
}

@media (max-width: 767px) {
  [data-cinematic] .cp-hero-trust { gap: 14px 22px; font-size: 13px; }
  [data-cinematic] .cp-hero-trust li + li::before { left: -14px; }
  [data-cinematic] .cp-hero-showcase-inner { padding-bottom: 80px; }
}

/* --- Section spacing rhythm -------------------------------------------- */
/* All v2 narrative sections share one rhythm token so vertical pacing is
   predictable and easy to tune in a single place. */

[data-cinematic] .cp-pullquote,
[data-cinematic] .cp-narrative,
[data-cinematic] .cp-statement,
[data-cinematic] .cp-pillars,
[data-cinematic] .cp-walkthrough,
[data-cinematic] .cp-outcomes,
[data-cinematic] .cp-architecture,
[data-cinematic] .cp-trust-strip,
[data-cinematic] .cp-finale,
[data-cinematic] .atlas-features {
  padding: var(--cp-section-pad) 0;
  position: relative;
}

/* Atlas walkthrough head spacing inside the existing scrollytelling */
[data-cinematic] .atlas-features-header .cp-walkthrough-head {
  margin-bottom: clamp(48px, 6vh, 80px);
}

/* Tighter padding when two adjacent sections share the same conceptual beat
   (e.g. statement → pillars are one thought; outcomes head → metrics are one). */
[data-cinematic] .cp-statement + .cp-pillars { padding-top: 0; }
[data-cinematic] .cp-pullquote + .cp-narrative { padding-top: calc(var(--cp-section-pad) * 0.7); }
[data-cinematic] .cp-narrative + .cp-statement { padding-top: calc(var(--cp-section-pad) * 0.7); }
[data-cinematic] .cp-architecture + .cp-pullquote--alt { padding-top: calc(var(--cp-section-pad) * 0.7); }
[data-cinematic] .cp-pullquote--alt + .cp-trust-strip { padding-top: calc(var(--cp-section-pad) * 0.7); }
[data-cinematic] .cp-trust-strip + .cp-finale { padding-top: calc(var(--cp-section-pad) * 0.7); }

/* Hero already has its own internal padding — kill the section default after it. */
[data-cinematic] .cp-hero + section { padding-top: var(--cp-section-pad); }

/* --- Pull-quote -------------------------------------------------------- */

[data-cinematic] .cp-pullquote {
  text-align: center;
}
[data-cinematic] .cp-pullquote-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-text-muted);
  opacity: 0.7;
  margin: 0 0 28px;
}
[data-cinematic] .cp-pullquote-text {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--cp-text);
  max-width: 22ch;
  margin: 0 auto 28px;
  quotes: none;
}
[data-cinematic] .cp-pullquote-text::before,
[data-cinematic] .cp-pullquote-text::after { content: none; }
[data-cinematic] .cp-pullquote-attribution {
  color: var(--cp-text-muted);
  font-size: 17px;
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 auto;
}
[data-cinematic] .cp-pullquote--alt {
  border-top: 1px solid var(--cp-glass-border);
  border-bottom: 1px solid var(--cp-glass-border);
}

/* --- Status-quo orbit: ambient background diagram ---------------------- */
/* Ghost layer behind the pull-quote copy. Four labeled nodes drift around
   a central routing-slip icon; dashed links fade in/out on staggered
   cycles so the system never reads as fully connected. */

[data-cinematic] .cp-pullquote--orbit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Extra vertical room so the taller ellipse (ry=180 in viewBox units)
     doesn't crowd the copy — adds ~25% to the default section rhythm. */
  padding-top: calc(var(--cp-section-pad) * 1.25);
  padding-bottom: calc(var(--cp-section-pad) * 1.25);
}
[data-cinematic] .cp-pullquote--orbit > .container {
  position: relative;
  z-index: 1;
}

[data-cinematic] .cp-statusquo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  color: var(--cp-text);
  opacity: 0.55;     /* compounds with per-element opacities below */
}

[data-cinematic] .cp-statusquo-bg .sq-doc {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  opacity: 0.32;
}

[data-cinematic] .cp-statusquo-bg .sq-dot {
  fill: currentColor;
  opacity: 0.28;
}

[data-cinematic] .cp-statusquo-bg .sq-label {
  fill: currentColor;
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-anchor: middle;
  opacity: 0.32;
}

[data-cinematic] .cp-statusquo-bg .sq-link {
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  fill: none;
  opacity: 0;
  animation: sq-link-pulse 23s ease-in-out infinite;
}
[data-cinematic] .cp-statusquo-bg .sq-link-1 { animation-duration: 19s; animation-delay: 0s;   }
[data-cinematic] .cp-statusquo-bg .sq-link-2 { animation-duration: 27s; animation-delay: -7s;  }
[data-cinematic] .cp-statusquo-bg .sq-link-3 { animation-duration: 23s; animation-delay: -13s; }
[data-cinematic] .cp-statusquo-bg .sq-link-4 { animation-duration: 31s; animation-delay: -19s; }

/* Each link spends most of its cycle dropped out. Peak opacity capped at
   0.42 (× 0.55 layer opacity ≈ 23% effective) — within the spec range. */
@keyframes sq-link-pulse {
  0%, 100% { opacity: 0; }
  18%      { opacity: 0.42; }
  34%      { opacity: 0.18; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .cp-statusquo-bg .sq-link { animation: none; opacity: 0.18; }
  [data-cinematic] .cp-statusquo-bg .sq-orbit > animateTransform,
  [data-cinematic] .cp-statusquo-bg animateTransform { display: none; }
}

@media (max-width: 720px) {
  [data-cinematic] .cp-statusquo-bg { opacity: 0.4; }
  [data-cinematic] .cp-statusquo-bg .sq-label { font-size: 9px; letter-spacing: 0.18em; }
}

/* Sand-textured pullquote — bento-style card matching .cp-placeholder--xl width + radius */
[data-cinematic] .cp-pullquote--sand {
  border-top: none;
  border-bottom: none;
  background: transparent;
}
[data-cinematic] .cp-pullquote--sand .cp-pullquote-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--cp-radius-lg);
  padding: clamp(64px, 9vw, 120px) clamp(32px, 6vw, 88px);
  background-image: url("../assets/sand.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Force white text on the textured background regardless of theme. No gradient. */
[data-cinematic] .cp-pullquote--sand .cp-pullquote-eyebrow,
[data-cinematic] .cp-pullquote--sand .cp-pullquote-text,
[data-cinematic] .cp-pullquote--sand .cp-pullquote-text .headline-gradient,
[data-cinematic] .cp-pullquote--sand .cp-pullquote-attribution {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

/* --- Narrative row (alternating) --------------------------------------- */

[data-cinematic] .cp-narrative-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
@media (min-width: 960px) {
  [data-cinematic] .cp-narrative-row {
    grid-template-columns: 1fr 1.1fr;
  }
  [data-cinematic] .cp-narrative-row--reverse > .cp-narrative-text { order: 2; }
  [data-cinematic] .cp-narrative-row--reverse > .cp-narrative-visual { order: 1; }
}
[data-cinematic] .cp-narrative-text .eyebrow { margin-bottom: 20px; }
[data-cinematic] .cp-narrative-title {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  max-width: 22ch;
}
[data-cinematic] .cp-narrative-text .prose {
  color: var(--cp-text-muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 52ch;
}

/* --- Centered statement (breathing-room break) ------------------------- */

[data-cinematic] .cp-statement {
  text-align: center;
}
[data-cinematic] .cp-statement-title {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0 auto 20px;
}
[data-cinematic] .cp-statement-lede {
  color: var(--cp-text-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto;
}

/* --- Three pillar tiles (replaces dense mini-blocks) ------------------- */

[data-cinematic] .cp-pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  [data-cinematic] .cp-pillar-grid { grid-template-columns: repeat(3, 1fr); }
}
[data-cinematic] .cp-pillar {
  position: relative;
  padding: 36px 32px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  border-radius: var(--cp-radius-lg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: transform 0.5s var(--cp-ease-smooth),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
  overflow: hidden;
}
[data-cinematic] .cp-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
[data-cinematic] .cp-pillar:hover {
  transform: translateY(-4px);
  border-color: var(--cp-glass-border-bright);
  box-shadow: 0 30px 60px -20px rgba(var(--shadow-tint), 0.42),
              0 0 60px -20px var(--cp-accent-glow);
}
[data-cinematic][data-theme="light"] .cp-pillar:hover {
  box-shadow: 0 30px 60px -20px rgba(var(--shadow-tint), 0.16),
              0 0 60px -20px var(--cp-accent-glow);
}
[data-cinematic] .cp-pillar-num {
  display: block;
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--cp-accent);
  margin-bottom: 28px;
  opacity: 0.9;
}
[data-cinematic] .cp-pillar h3 { font-size: 20px; margin: 0 0 12px; }
[data-cinematic] .cp-pillar p { color: var(--cp-text-muted); font-size: 15px; line-height: 1.6; margin: 0; }

/* --- Pillar visuals (animated SVG icons, one per principle card) ------- */
/* Sit at the bottom of each card, triggered when JS adds .is-armed to the
   .cp-pillar-grid. Per-card 150ms left-to-right stagger via --cp-pillar-i. */

[data-cinematic] .cp-pillar-visual {
  margin: 32px 0 0;
  padding: 0;
  width: 100%;
  display: block;
}
[data-cinematic] .cp-pillar-visual svg {
  width: 100%;
  height: auto;          /* scale with width, viewBox preserves aspect ratio */
  aspect-ratio: 240 / 130;
  display: block;
  overflow: visible;
}

/* Shared primitive defaults: thin strokes, no fills */
[data-cinematic] .cp-pillar-visual line,
[data-cinematic] .cp-pillar-visual circle,
[data-cinematic] .cp-pillar-visual ellipse,
[data-cinematic] .cp-pillar-visual path {
  fill: none;
  stroke: var(--cp-text-muted);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
[data-cinematic] .cp-pillar-visual text {
  fill: var(--cp-text-muted);
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-anchor: middle;
  opacity: 0.7;
}

/* ── Card 01 — Collaboration ─────────────────────────────────────────── */

[data-cinematic] .pv-collab .pv-line {
  stroke: var(--cp-text-muted);
  opacity: 0.4;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
[data-cinematic] .pv-collab .pv-line--guest {
  stroke: var(--cp-accent);
  opacity: 0.6;
  stroke-dasharray: 5 4;
}
[data-cinematic] .pv-collab .pv-head { fill: var(--cp-bg); }
[data-cinematic] .pv-collab .pv-head--guest { stroke: var(--cp-accent); }
[data-cinematic] .pv-collab .pv-body--guest { stroke: var(--cp-accent); }

[data-cinematic] .pv-collab .pv-node--guest .pv-label {
  fill: var(--cp-accent);
  opacity: 0;
  transition: opacity 0.4s var(--cp-ease-smooth);
}

[data-cinematic] .pv-collab .pv-pulse {
  stroke: var(--cp-accent);
  opacity: 0;
  transform-origin: 180px 86px;
  transform-box: view-box;
}

/* Trigger: draw lines in sequence, then pulse the guest, then breathe */
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-line {
  animation: pv-line-draw 0.6s var(--cp-ease-smooth) forwards;
  animation-delay: calc(var(--cp-pillar-i, 0) * 150ms + var(--pv-d, 0ms));
}
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-line--1 { --pv-d: 0ms; }
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-line--2 { --pv-d: 200ms; }
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-line--3 { --pv-d: 400ms; }
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-line--4 { --pv-d: 700ms; }
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-line--5 { --pv-d: 850ms; }

@keyframes pv-line-draw {
  to { stroke-dashoffset: 0; }
}

[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-node--guest .pv-label {
  opacity: 0.85;
  transition-delay: calc(var(--cp-pillar-i, 0) * 150ms + 1100ms);
}
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab .pv-pulse {
  animation: pv-pulse-ring 1.4s var(--cp-ease-smooth) forwards;
  animation-delay: calc(var(--cp-pillar-i, 0) * 150ms + 1200ms);
}

@keyframes pv-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.7); opacity: 0;   }
}

/* Idle: whole network breathes very slowly */
[data-cinematic] .cp-pillar-grid.is-armed .pv-collab {
  animation: pv-breathe 6s ease-in-out infinite;
  animation-delay: calc(var(--cp-pillar-i, 0) * 150ms + 1400ms);
}
@keyframes pv-breathe {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.78; }
}

/* ── Card 02 — Process ───────────────────────────────────────────────── */

[data-cinematic] .pv-process .pv-track {
  stroke: var(--cp-text-muted);
  opacity: 0.35;
}
[data-cinematic] .pv-process .pv-stage {
  stroke: var(--cp-text-muted);
  opacity: 0.6;
  fill: var(--cp-bg);
  transition: stroke 0.25s ease, fill 0.25s ease, opacity 0.25s ease;
}
[data-cinematic] .pv-process .pv-stage.is-active {
  stroke: var(--cp-accent);
  fill: var(--cp-accent);
  opacity: 1;
}
[data-cinematic] .pv-process .pv-stage-label { font-size: 7px; opacity: 0; transition: opacity 0.4s ease; }
[data-cinematic] .cp-pillar-grid.is-armed .pv-process .pv-stage-label {
  opacity: 0.7;
  transition-delay: calc(var(--cp-pillar-i, 0) * 150ms + 200ms);
}

[data-cinematic] .pv-process .pv-traveler {
  fill: var(--cp-accent);
  stroke: none;
}
[data-cinematic] .pv-process .pv-traveler-wrap {
  opacity: 0;
  transform: translateX(0);
}
[data-cinematic] .cp-pillar-grid.is-armed .pv-process .pv-traveler-wrap {
  animation: pv-travel 2.4s var(--cp-ease-smooth) forwards;
  animation-delay: calc(var(--cp-pillar-i, 0) * 150ms + 250ms);
}
@keyframes pv-travel {
  0%   { transform: translateX(0);    opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translateX(192px); opacity: 1; }
}

/* ── Card 03 — Data ──────────────────────────────────────────────────── */

[data-cinematic] .pv-data .pv-spoke {
  stroke: var(--cp-text-muted);
  opacity: 0.4;
  stroke-dasharray: 3 3;
}
[data-cinematic] .pv-data .pv-disc { stroke: var(--cp-text-muted); opacity: 0.85; }
[data-cinematic] .pv-data .pv-sat {
  stroke: var(--cp-text-muted);
  opacity: 0.6;
  fill: var(--cp-bg);
  transition: stroke 0.3s ease, opacity 0.3s ease;
}
[data-cinematic] .pv-data .pv-sat.is-active {
  stroke: var(--cp-accent);
  opacity: 1;
}

[data-cinematic] .pv-data .pv-ripple {
  stroke: var(--cp-accent);
  opacity: 0;
  /* Use scale so we don't depend on CSS `r` animation. Start radius is
     baked in (8) by setting r="8" via the keyframe start state — but since
     SVG `r` defaults to 0 we set it inline below via attribute. */
  transform-origin: 120px 65px;
  transform-box: view-box;
}
[data-cinematic] .cp-pillar-grid.is-armed .pv-data .pv-ripple--1 {
  animation: pv-ripple 4s var(--cp-ease-smooth) infinite;
  animation-delay: calc(var(--cp-pillar-i, 0) * 150ms + 200ms);
}
[data-cinematic] .cp-pillar-grid.is-armed .pv-data .pv-ripple--2 {
  animation: pv-ripple 4s var(--cp-ease-smooth) infinite;
  animation-delay: calc(var(--cp-pillar-i, 0) * 150ms + 2200ms);
}
@keyframes pv-ripple {
  0%   { transform: scale(1);  opacity: 0.7;  }
  60%  { opacity: 0.25; }
  100% { transform: scale(10); opacity: 0;    }
}

/* Reduced motion — snap to a calm final state */
@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .cp-pillar-visual * { animation: none !important; transition: none !important; }
  [data-cinematic] .pv-collab .pv-line { stroke-dashoffset: 0; }
  [data-cinematic] .pv-collab .pv-node--guest .pv-label { opacity: 0.85; }
  [data-cinematic] .pv-process .pv-stage-label { opacity: 0.7; }
  [data-cinematic] .pv-process .pv-traveler { display: none; }
  [data-cinematic] .pv-data .pv-ripple { display: none; }
}

/* --- Sticky walkthrough ------------------------------------------------ */

[data-cinematic] .cp-walkthrough-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(56px, 7vh, 88px);
}
[data-cinematic] .cp-walkthrough-head .eyebrow { justify-content: center; }
[data-cinematic] .cp-walkthrough-head .cp-narrative-title {
  margin-left: auto;
  margin-right: auto;
}

/* --- Feature carousel: horizontal scroll-snap, arrow nav ------------ */

[data-cinematic] .cp-carousel-head {
  text-align: left;
  max-width: none;
  margin: 0 0 clamp(40px, 5vh, 64px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
[data-cinematic] .cp-carousel-head .eyebrow { justify-content: flex-start; }
[data-cinematic] .cp-carousel-head .cp-narrative-title {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  max-width: 22ch;
}
[data-cinematic] .cp-carousel-head-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-cinematic] .cp-carousel-nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
[data-cinematic] .cp-carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  color: var(--cp-text);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--cp-ease-smooth),
              border-color 0.2s var(--cp-ease-smooth),
              opacity 0.2s var(--cp-ease-smooth),
              transform 0.2s var(--cp-ease-smooth);
}
[data-cinematic] .cp-carousel-arrow:hover:not(:disabled) {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: #fff;
}
[data-cinematic] .cp-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
[data-cinematic] .cp-carousel-arrow svg { display: block; }

/* Track wrapper — full viewport width so the carousel can scroll
   the entire page width without being cropped inside any container.
   Alignment with the title above is achieved by giving the first
   card a left margin equal to .container's left edge. */
[data-cinematic] .cp-carousel-track-wrap {
  width: 100%;
  overflow: hidden;
  /* CSS variable used by the first card and scroll-padding to keep
     the start position pixel-aligned with .container. Resolves to
     3rem on viewports ≤1280px, then (50% - 640px) + 3rem on wider
     viewports. Using 50% (excludes scrollbar gutter) matches the
     way .container's auto margins center its content. */
  --cp-carousel-inset: max(var(--space-2xl), calc(50% - 640px + var(--space-2xl)));
}
@media (max-width: 768px) {
  [data-cinematic] .cp-carousel-track-wrap {
    --cp-carousel-inset: var(--space-xl);
  }
}
[data-cinematic] .cp-carousel-track {
  list-style: none;
  margin: 0;
  padding: 8px 0 40px;
  padding-inline-end: clamp(20px, 5vw, 80px);
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Snap targets line up with the inset, not the track's left edge. */
  scroll-padding-left: var(--cp-carousel-inset);
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
[data-cinematic] .cp-carousel-track > :first-child {
  margin-inline-start: var(--cp-carousel-inset);
}
[data-cinematic] .cp-carousel-track::-webkit-scrollbar { display: none; }

[data-cinematic] .cp-feature-card {
  flex: 0 0 min(88vw, 540px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--cp-radius-lg);
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  background-image:
    linear-gradient(var(--cp-glass-bg), var(--cp-glass-bg)),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: auto, 18px 18px;
  background-blend-mode: normal;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(var(--shadow-tint), 0.52);
  min-height: 560px;
}
[data-cinematic][data-theme="light"] .cp-feature-card {
  background-image:
    linear-gradient(var(--cp-glass-bg), var(--cp-glass-bg)),
    radial-gradient(circle at 1px 1px, rgba(15,18,22,0.05) 1px, transparent 0);
  box-shadow: 0 30px 60px -40px rgba(15,18,22,0.18);
}

[data-cinematic] .cp-feature-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}
[data-cinematic] .cp-feature-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  user-select: none;
  -webkit-user-drag: none;
}

[data-cinematic] .cp-feature-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 32px;
  flex: 1 1 auto;
}
[data-cinematic] .cp-feature-card-num {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--cp-accent);
}
[data-cinematic] .cp-feature-card-body h3 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
  color: var(--cp-text);
}
[data-cinematic] .cp-feature-card-body p {
  margin: 0;
  color: var(--cp-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (min-width: 720px) {
  [data-cinematic] .cp-feature-card { flex-basis: 540px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .cp-carousel-track { scroll-behavior: auto; }
}

/* --- Outcomes / floating metrics --------------------------------------- */

[data-cinematic] .cp-outcomes-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(56px, 7vh, 88px);
}
[data-cinematic] .cp-outcomes-head .eyebrow { justify-content: center; }
[data-cinematic] .cp-outcomes-head .cp-narrative-title {
  margin-left: auto;
  margin-right: auto;
}

[data-cinematic] .cp-metrics-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  [data-cinematic] .cp-metrics-row { grid-template-columns: repeat(3, 1fr); }
}
[data-cinematic] .cp-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 36px 32px;
  min-height: 200px;
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(160deg, var(--cp-glass-bg), rgba(255,255,255,0.01));
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 20px 40px -20px rgba(var(--shadow-tint), 0.42);
  transition: transform 0.5s var(--cp-ease-smooth);
}
[data-cinematic] .cp-metric:hover { transform: translateY(-4px); }
[data-cinematic] .cp-metric-num {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cp-accent);
}
[data-cinematic] .cp-metric-label {
  color: var(--cp-text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 12px;
}

/* --- Audience list (inside narrative row) ------------------------------ */

[data-cinematic] .cp-audience-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
[data-cinematic] .cp-audience-list li {
  padding: 20px 0;
  border-top: 1px solid var(--cp-glass-border);
}
[data-cinematic] .cp-audience-list li:last-child { border-bottom: 1px solid var(--cp-glass-border); }
[data-cinematic] .cp-audience-list h3 { font-size: 20px; margin: 0 0 6px; }
[data-cinematic] .cp-audience-list p {
  color: var(--cp-text-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* --- Architecture / full-bleed placeholder ----------------------------- */

[data-cinematic] .cp-architecture-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(56px, 7vh, 88px);
}
[data-cinematic] .cp-architecture-head .eyebrow { justify-content: center; }
[data-cinematic] .cp-architecture-head .cp-narrative-title {
  margin-left: auto;
  margin-right: auto;
}
[data-cinematic] .cp-architecture-head .prose {
  color: var(--cp-text-muted);
  margin: 0 auto;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.6;
}
[data-cinematic] .cp-system-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
[data-cinematic] .cp-system-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  border-radius: var(--cp-radius-chip);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 500;
  color: var(--cp-text-muted);
}

/* --- Trust strip (security, compact) ----------------------------------- */

[data-cinematic] .cp-trust-strip {
  text-align: center;
}
[data-cinematic] .cp-trust-strip-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-text-muted);
  opacity: 0.75;
  margin: 0 0 28px;
}
[data-cinematic] .cp-trust-strip-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 920px;
}
[data-cinematic] .cp-trust-strip-list li {
  padding: 10px 18px;
  background: var(--cp-glass-bg);
  border: 1px solid var(--cp-glass-border);
  border-radius: var(--cp-radius-chip);
  font-size: 14px;
  font-weight: 500;
  color: var(--cp-text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-cinematic] .cp-trust-strip-note {
  color: var(--cp-text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}

/* --- Finale CTA --------------------------------------------------------- */

[data-cinematic] .cp-finale {
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
[data-cinematic] .cp-finale-glow {
  position: absolute;
  bottom: -30%;
  left: 50%;
  width: 80vw;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 60% at 50% 50%, var(--cp-accent-glow) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}
[data-cinematic] .cp-finale-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
}
[data-cinematic] .cp-finale-title {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
[data-cinematic] .cp-finale-lede {
  color: var(--cp-text-muted);
  font-size: 18px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 36px;
}
[data-cinematic] .cp-finale-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* --- Design-component placeholders ------------------------------------- */

[data-cinematic] .cp-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 32px;
  border-radius: var(--cp-radius-lg);
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(249,149,73,0.10), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px dashed var(--cp-glass-border-bright);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--cp-text-muted);
  overflow: hidden;
  isolation: isolate;
}
[data-cinematic][data-theme="light"] .cp-placeholder {
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(230,99,0,0.10), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
}

/* Subtle grid overlay so it reads as a designed empty state, not a void */
[data-cinematic] .cp-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}
[data-cinematic][data-theme="light"] .cp-placeholder::before {
  background-image:
    linear-gradient(to right, rgba(15,18,22,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,18,22,0.06) 1px, transparent 1px);
}

[data-cinematic] .cp-placeholder--md { min-height: 360px; }
[data-cinematic] .cp-placeholder--lg { min-height: 540px; }
[data-cinematic] .cp-placeholder--xl { min-height: 480px; padding: 48px; }
[data-cinematic] .cp-placeholder--metric { min-height: auto; padding: 28px; gap: 6px; }

/* Narrative figure — used to slot a real product visual into a
   .cp-narrative-visual cell (replaces a .cp-placeholder block). */
[data-cinematic] .cp-narrative-figure {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
[data-cinematic] .cp-narrative-img {
  display: block;
  width: 120%;             /* bleed beyond column for more presence */
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* On the default (non-reverse) row the visual sits on the right —
   anchor the bleed to the right edge so it pushes outward, not inward. */
[data-cinematic] .cp-narrative-row > .cp-narrative-visual {
  display: flex;
  justify-content: flex-end;
}
[data-cinematic] .cp-narrative-row--reverse > .cp-narrative-visual {
  justify-content: flex-start;
}
@media (max-width: 960px) {
  [data-cinematic] .cp-narrative-img { width: 100%; }
  [data-cinematic] .cp-narrative-row > .cp-narrative-visual { justify-content: center; }
}

[data-cinematic] .cp-placeholder-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-accent);
  padding: 4px 10px;
  border-radius: var(--cp-radius-chip);
  background: var(--cp-accent-soft);
  border: 1px solid rgba(249,149,73,0.3);
  margin-bottom: 4px;
}
[data-cinematic][data-theme="light"] .cp-placeholder-tag {
  border-color: rgba(230,99,0,0.3);
}
[data-cinematic] .cp-placeholder-title {
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: var(--cp-text);
  line-height: 1.2;
}
[data-cinematic] .cp-placeholder-meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cp-text-muted);
  max-width: 48ch;
}

/* --- Outcomes stat cards ---------------------------------------------- */
/* Three animated number cards. Animations trigger when JS adds .is-armed
   to the row, with a per-card 150ms stagger via --cp-stat-i. */

[data-cinematic] .cp-stat-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 32px 36px;
  min-height: 280px;
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(160deg, var(--cp-glass-bg), rgba(255,255,255,0.01));
  border: 1px solid var(--cp-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 20px 40px -20px rgba(var(--shadow-tint), 0.42);
}

/* Subtle dot-grid texture, masked to fade toward edges so it doesn't
   compete with the number. */
[data-cinematic] .cp-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 20%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 20%, black 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
[data-cinematic][data-theme="light"] .cp-stat-card::before {
  background-image: radial-gradient(rgba(15,18,22,0.08) 1px, transparent 1px);
}

[data-cinematic] .cp-stat-figure {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
}

[data-cinematic] .cp-stat-num {
  display: inline-block;
  font-family: 'Degular', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--cp-accent);
  font-variant-numeric: tabular-nums;
}

[data-cinematic] .cp-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-text-muted);
  margin-top: auto;
}

/* Card 2 — stacked 3×/1× with collapse correction */
[data-cinematic] .cp-stat-num--stack {
  position: relative;
  display: inline-block;
  min-width: 1ch;
}
[data-cinematic] .cp-stat-num-from,
[data-cinematic] .cp-stat-num-to {
  display: inline-block;
}
[data-cinematic] .cp-stat-num-from {
  position: absolute;
  inset: 0;
  color: var(--cp-text-muted);
  opacity: 0;
  transform: scale(1.05);
  transform-origin: left center;
  transition:
    opacity 0.4s var(--cp-ease-smooth),
    transform 0.5s var(--cp-ease-smooth);
}
[data-cinematic] .cp-stat-num-to {
  color: var(--cp-accent);
  opacity: 0;
  transform: scale(0.86);
  transform-origin: left center;
  transition:
    opacity 0.5s var(--cp-ease-smooth) 0.55s,
    transform 0.6s var(--cp-ease-smooth) 0.5s;
}
/* Phase 1: show the muted "3×" briefly */
[data-cinematic] .cp-stat-row.is-armed .cp-stat-card--collapse .cp-stat-num-from {
  animation: cp-stat-flash 0.95s var(--cp-ease-smooth) forwards;
  animation-delay: calc(var(--cp-stat-i, 0) * 150ms);
}
@keyframes cp-stat-flash {
  0%   { opacity: 0;    transform: scale(1.05); }
  18%  { opacity: 0.55; transform: scale(1);    }
  60%  { opacity: 0.55; transform: scale(0.9);  }
  100% { opacity: 0;    transform: scale(0.7);  }
}
/* Phase 2: settle into "1×" */
[data-cinematic] .cp-stat-row.is-armed .cp-stat-card--collapse .cp-stat-num-to {
  opacity: 1;
  transform: scale(1);
}

/* Card 3 — outlined "100%" filled left-to-right with orange */
[data-cinematic] .cp-stat-num--outlined {
  position: relative;
  display: inline-block;
  -webkit-text-stroke: 1px var(--cp-text-muted);
  color: transparent;
}
[data-cinematic] .cp-stat-num-outline {
  display: inline-block;
}
[data-cinematic] .cp-stat-num-fill {
  position: absolute;
  inset: 0;
  color: var(--cp-accent);
  -webkit-text-stroke: 1px var(--cp-accent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--cp-ease-smooth);
  transition-delay: calc(var(--cp-stat-i, 0) * 150ms + 0.15s);
}
[data-cinematic] .cp-stat-row.is-armed .cp-stat-card--sweep .cp-stat-num-fill {
  clip-path: inset(0 0 0 0);
}

/* Reduced motion — skip the choreography, snap to final state. */
@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .cp-stat-num-from,
  [data-cinematic] .cp-stat-num-to,
  [data-cinematic] .cp-stat-num-fill {
    transition: none;
    animation: none;
  }
  [data-cinematic] .cp-stat-card--collapse .cp-stat-num-from { display: none; }
  [data-cinematic] .cp-stat-card--collapse .cp-stat-num-to {
    position: static; opacity: 1; transform: none;
  }
  [data-cinematic] .cp-stat-card--sweep .cp-stat-num-fill { clip-path: inset(0 0 0 0); }
}

/* Reduced-motion + reduced-transparency tweaks for v2 components */
@media (prefers-reduced-motion: reduce) {
  [data-cinematic] .cp-pillar:hover,
  [data-cinematic] .cp-metric:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  [data-cinematic] .cp-pillar,
  [data-cinematic] .cp-metric,
  [data-cinematic] .cp-stat-card,
  [data-cinematic] .cp-placeholder,
  [data-cinematic] .cp-trust-strip-list li,
  [data-cinematic] .cp-system-badge {
    background: var(--cp-bg-deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}