/* ===== CINEMATIC HOMEPAGE ===== */
.story-page--cinematic {
  --story-ink: #f4f7ff;
  --story-ink-soft: #d7e0f5;
  --story-muted: #9aa8c7;
  --story-line: rgba(165, 216, 255, 0.14);
  --story-surface: #0a1020;
  --story-white: #ffffff;
  --story-navy: #050A14;
  --story-navy-2: #0b1428;
  --story-accent: #A5D8FF;
  --story-accent-soft: #6eb8ff;
  --story-glow: rgba(165, 216, 255, 0.18);
  --cinematic-cta: #A5D8FF;
  --cinematic-cta-ink: #071018;
  color: var(--story-ink-soft);
  background:
    radial-gradient(ellipse 70% 45% at 75% 20%, rgba(70, 150, 255, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 70%, rgba(81, 53, 255, 0.12), transparent 50%),
    linear-gradient(180deg, #050A14 0%, #070d1a 40%, #0a1020 100%);
}

.story-page--cinematic .site-header--cinematic {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 10, 20, 0.55);
  border-bottom: 1px solid rgba(165, 216, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: none;
}

.story-page--cinematic .site-header__inner {
  align-items: center;
}

.story-page--cinematic .brand--cinematic {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.story-page--cinematic .brand--cinematic .brand__logo-img {
  width: 158px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.story-page--cinematic .site-nav {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid rgba(165, 216, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.story-page--cinematic .site-nav a,
.story-page--cinematic .site-nav .nav-trigger,
.story-page--cinematic .login-link {
  color: rgba(244, 247, 255, 0.88);
  font-weight: 700;
}

.story-page--cinematic .site-nav a,
.story-page--cinematic .site-nav .nav-trigger {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.story-page--cinematic .site-nav a:hover,
.story-page--cinematic .site-nav .nav-trigger:hover,
.story-page--cinematic .site-nav .nav-trigger.is-active,
.story-page--cinematic .login-link:hover {
  color: #fff;
}

.story-page--cinematic .site-nav .nav-trigger {
  min-height: 0;
  border: 0;
  background: transparent;
}

.story-page--cinematic .site-nav .nav-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 0.2s ease;
}

.story-page--cinematic .site-nav .nav-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.story-page--cinematic .language-select select {
  color: #fff;
  background: transparent;
  border-color: rgba(165, 216, 255, 0.22);
}

.story-page--cinematic .language-select select option {
  color: #081325;
  background-color: #f4f8ff;
}

.story-page--cinematic .language-select select option:checked {
  color: #06101d;
  background-color: #cfeaff;
}

.story-page--cinematic .language-select select:focus-visible {
  outline: 2px solid #9edcff;
  outline-offset: 3px;
  border-color: rgba(165, 216, 255, 0.62);
}

.story-page--cinematic .header-cta,
.story-page--cinematic .story-btn--primary {
  background: var(--cinematic-cta) !important;
  color: var(--cinematic-cta-ink) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(100, 180, 255, 0.28) !important;
  font-weight: 900;
}

.story-page--cinematic .header-cta:hover,
.story-page--cinematic .story-btn--primary:hover {
  filter: brightness(1.06);
}

.story-page--cinematic .menu-toggle {
  color: #fff;
  border-color: rgba(165, 216, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.story-page--cinematic .menu-toggle span {
  background: #A5D8FF;
}

.story-page--cinematic .site-nav.is-open a,
.story-page--cinematic .site-nav.is-open .nav-trigger {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.story-page--cinematic .story-hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 12px) 0 18px;
  overflow: hidden;
  color: var(--story-ink);
}

.story-page--cinematic .story-hero-pin .story-hero {
  overflow: visible;
}

.story-page--cinematic .story-hero__atmosphere {
  background:
    radial-gradient(circle at 68% 40%, rgba(90, 180, 255, 0.18), transparent 34%),
    radial-gradient(circle at 22% 65%, rgba(81, 53, 255, 0.14), transparent 30%),
    linear-gradient(180deg, transparent 60%, rgba(5, 10, 20, 0.85) 100%);
}

.story-page--cinematic .story-hero__grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(165, 216, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 216, 255, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}

.story-page--cinematic .story-webgl,
.story-page--cinematic .story-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
}

.story-page--cinematic .story-hero-pin .story-lines {
  inset: 0 0 -280px;
  height: calc(100% + 280px);
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.88) 82%,
    rgba(0, 0, 0, 0.42) 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.88) 82%,
    rgba(0, 0, 0, 0.42) 92%,
    transparent 100%
  );
}

.story-page--cinematic .story-hero__atmosphere {
  opacity: 0.35;
}

.story-page--cinematic .story-hero__grid {
  opacity: 0.06;
}

.story-page--cinematic .story-hero__atmosphere,
.story-page--cinematic .story-hero__grid,
.story-page--cinematic .story-hero__inner,
.story-page--cinematic .story-hero__trust {
  position: relative;
  z-index: 1;
}

.story-page--cinematic .story-hero__inner {
  width: var(--cb-shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(560px, 1.04fr) minmax(440px, 0.96fr);
  gap: clamp(36px, 4vw, 68px);
  align-items: center !important;
  padding-bottom: 8px;
}

.story-page--cinematic .story-hero__copy {
  max-width: 41rem;
  padding-top: 0;
}

.story-page--cinematic .story-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180, 198, 230, 0.72);
}

.story-page--cinematic .story-hero h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(58px, 5.15vw, 82px);
  font-weight: var(--cb-display-weight);
  letter-spacing: -0.062em;
  line-height: 0.98;
  color: rgba(245, 248, 255, 0.94);
  text-wrap: balance;
}

.story-page--cinematic .story-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #7ad4ff 0%, #7b8cff 45%, #b07bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-page--cinematic .story-hero__lead {
  margin: 24px 0 0;
  max-width: 43ch;
  font-size: clamp(16px, 1.12vw, 18px);
  line-height: 1.52;
  color: rgba(219, 228, 246, 0.78);
  font-weight: 400;
}

.story-page--cinematic .story-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 30px;
}

.story-page--cinematic .story-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(244, 247, 255, 0.92) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 800;
  padding: 0 !important;
}

.story-page--cinematic .story-btn--ghost svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-btn--primary {
  padding: 14px 22px !important;
}

.story-hero-pin {
  position: relative;
  height: 300vh;
}

/* Logo flies from hero copy → header after card reveal */
.story-page--cinematic.story-page--logo-fly .site-header--logo-fly {
  background: rgba(5, 10, 20, 0.28);
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.story-page--cinematic.story-page--logo-fly.is-logo-docked .site-header--logo-fly {
  background: rgba(5, 10, 20, 0.72);
  border-bottom-color: rgba(165, 216, 255, 0.1);
}

.story-page--cinematic.story-page--logo-fly .brand--slot,
.story-page--cinematic.story-page--logo-fly .brand__slot {
  width: 158px;
  height: 29px;
}

.story-page--cinematic.story-page--logo-fly .story-logo-source {
  width: min(290px, 70vw);
  height: clamp(42px, 4.4vw, 60px);
  margin: 0 0 22px;
}

.story-page--cinematic.story-page--logo-fly .story-hero__eyebrow {
  display: none;
}

.story-page--cinematic.story-page--logo-fly .story-logo-fly {
  z-index: 120;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.35));
}

.story-page--cinematic.story-page--logo-fly.is-logo-docked .story-logo-fly {
  filter: none;
}

.story-page--cinematic.story-page--logo-fly .story-logo-fly__img {
  filter: none;
}

.story-page--cinematic.story-page--logo-fly .story-logo-fly::after {
  content: "";
  position: absolute;
  inset: -10px -14px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(86, 126, 255, 0.24) 0%,
    rgba(66, 187, 223, 0.1) 48%,
    transparent 74%
  );
  opacity: 0;
  pointer-events: none;
}

.story-page--cinematic.story-page--logo-fly.is-logo-docked .story-logo-fly__img {
  animation: story-logo-dock-settle 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.story-page--cinematic.story-page--logo-fly.is-logo-docked .story-logo-fly::after {
  animation: story-logo-dock-glow 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes story-logo-dock-settle {
  0% {
    transform: translateX(5px) scale(0.965);
    filter: brightness(1.18) drop-shadow(0 0 18px rgba(86, 126, 255, 0.38));
  }
  58% {
    transform: translateX(-1px) scale(1.018);
  }
  100% {
    transform: translateX(0) scale(1);
    filter: none;
  }
}

@keyframes story-logo-dock-glow {
  0% { opacity: 0; transform: scale(0.72); }
  36% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes story-logo-mobile-intro {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.story-page--cinematic .story-hero-pin .story-hero {
  position: sticky;
  top: 0;
  min-height: 100svh;
  height: 100svh;
  box-sizing: border-box;
  --orbit-reveal: 0;
}

.story-orbit {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
  perspective: 1800px;
  overflow: visible;
}

.story-orbit__stack {
  position: relative;
  width: min(100%, 650px);
  height: 500px;
  transform-style: preserve-3d;
  overflow: visible;
}

.story-orbit__card {
  position: absolute;
  left: 246px;
  top: 34px;
  width: 354px;
  border-radius: 13px;
  border: 1px solid rgba(139, 197, 240, 0.27);
  background:
    linear-gradient(145deg, rgba(25, 43, 70, 0.86), rgba(8, 18, 34, 0.91));
  box-shadow:
    0 34px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(230, 247, 255, 0.08),
    inset 0 0 42px rgba(72, 169, 231, 0.045);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  color: #e8eefc;
  overflow: hidden;
  transform-origin: center center;
  transition: none;
  will-change: transform, opacity, filter;
  padding: 20px 20px 18px;
}

.story-orbit__card--d {
  top: 70px;
  height: 360px;
}

.story-orbit__card--c {
  top: 48px;
  height: 390px;
}

.story-orbit__card--b {
  top: 25px;
  height: 420px;
}

.story-orbit__card--front {
  top: 0;
  height: 452px;
  padding: 24px 22px 20px;
  opacity: 1;
  background:
    linear-gradient(145deg, rgba(25, 43, 70, 0.95), rgba(8, 18, 34, 0.96));
}

.story-hero-pin.is-revealed .story-orbit__stack {
  animation: story-orbit-stack-float 7.5s ease-in-out infinite;
}

@keyframes story-orbit-stack-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}

.story-orbit__card-label {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(223, 234, 252, 0.78);
}

.story-orbit__sparkline {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 88px;
  margin: 48px 22px 0;
}

.story-orbit__sparkline span {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #7ad4ff, rgba(81, 53, 255, 0.35));
  opacity: 0.75;
}

.story-orbit__sparkline span:nth-child(1) { height: 32%; }
.story-orbit__sparkline span:nth-child(2) { height: 58%; }
.story-orbit__sparkline span:nth-child(3) { height: 44%; }
.story-orbit__sparkline span:nth-child(4) { height: 78%; }
.story-orbit__sparkline span:nth-child(5) { height: 62%; }

.story-orbit__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 56px 22px 0;
  height: 96px;
  align-items: end;
}

.story-orbit__bars i {
  display: block;
  border-radius: 8px;
  background: rgba(122, 212, 255, 0.35);
  height: 40%;
  box-shadow: 0 0 18px rgba(122, 212, 255, 0.2);
}

.story-orbit__bars i:nth-child(2) { height: 70%; }
.story-orbit__bars i:nth-child(3) { height: 52%; }
.story-orbit__bars i:nth-child(4) { height: 88%; }

.story-orbit__headset {
  display: grid;
  place-items: center;
  margin-top: 64px;
}

.story-orbit__headset svg {
  width: 72px;
  height: 72px;
  stroke: #7ad4ff;
  fill: none;
  stroke-width: 1.6;
  opacity: 0.85;
  filter: drop-shadow(0 0 18px rgba(122, 212, 255, 0.35));
}

.story-orbit__title {
  margin: 0 0 18px;
  font-size: clamp(21px, 1.65vw, 26px);
  font-weight: 900;
  letter-spacing: -0.045em;
  color: rgba(249, 251, 255, 0.94);
}

.story-orbit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.story-orbit__list li {
  display: grid;
  grid-template-columns: 38px 1fr 10px;
  gap: 11px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 8px;
  background: rgba(5, 15, 31, 0.34);
  border: 1px solid rgba(147, 201, 240, 0.1);
}

.story-orbit__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(122, 212, 255, 0.12);
  border: 1px solid rgba(122, 212, 255, 0.22);
}

.story-orbit__icon svg {
  width: 18px;
  height: 18px;
  stroke: #9fd8ff;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-orbit__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.story-orbit__meta strong {
  font-size: 13px;
  font-weight: 700;
  color: rgba(249, 251, 255, 0.94);
  letter-spacing: -0.02em;
}

.story-orbit__meta small {
  font-size: 10px;
  color: rgba(183, 199, 225, 0.7);
  font-weight: 500;
}

.story-orbit__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3dff9a;
  box-shadow: 0 0 12px rgba(61, 255, 154, 0.75);
}

.story-orbit__prompt {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(220, 230, 250, 0.85);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(165, 216, 255, 0.14);
  font-size: 12px;
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.story-orbit__prompt:hover {
  border-color: rgba(165, 216, 255, 0.4);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.story-orbit__prompt svg {
  width: 18px;
  height: 18px;
  stroke: #A5D8FF;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.story-page--cinematic .story-hero__trust {
  width: var(--cb-shell);
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 18px 0 8px;
  border-top: 1px solid rgba(165, 216, 255, 0.12);
}

.story-page--cinematic .story-hero__trust > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  color: rgba(220, 230, 250, 0.88);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-right: 1px solid rgba(165, 216, 255, 0.12);
}

.story-page--cinematic .story-hero__trust > span:last-child {
  border-right: 0;
}

.story-page--cinematic .story-hero__trust svg {
  width: 18px;
  height: 18px;
  stroke: #A5D8FF;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.story-page--cinematic .story-hero__trust .flag-inline {
  width: 16px;
  height: 12px;
}

.story-page--cinematic .story-logos {
  padding: 28px 0 48px;
  border-bottom: 1px solid rgba(165, 216, 255, 0.08);
}

.story-page--cinematic .story-logos__intro {
  text-align: center;
  margin-bottom: 22px;
}

.story-page--cinematic .story-logos__lead {
  margin: 8px auto 0;
  max-width: 42ch;
  color: var(--story-muted);
  font-size: 15px;
  font-weight: 600;
}

.story-page--cinematic .story-logos__marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.story-page--cinematic .story-logos__track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: story-logos-marquee 38s linear infinite;
}

.story-logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(165, 216, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(210, 220, 240, 0.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.story-logo-chip svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  opacity: 0.85;
}

.story-logo-chip:hover {
  color: #fff;
  border-color: rgba(165, 216, 255, 0.35);
  background: rgba(165, 216, 255, 0.08);
}

@keyframes story-logos-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.story-page--cinematic .story-eyebrow {
  color: rgba(165, 216, 255, 0.7);
}

.story-page--cinematic .story-statement,
.story-page--cinematic .story-capabilities,
.story-page--cinematic .story-stats,
.story-page--cinematic .story-usecases,
.story-page--cinematic .story-stack,
.story-page--cinematic .story-proof,
.story-page--cinematic .story-pricing,
.story-page--cinematic .story-partners,
.story-page--cinematic .story-faq {
  color: var(--story-ink-soft);
}

.story-page--cinematic .story-statement h2,
.story-page--cinematic .story-capabilities h2,
.story-page--cinematic .story-usecases h2,
.story-page--cinematic .story-stack h2,
.story-page--cinematic .story-proof h2,
.story-page--cinematic .story-pricing h2,
.story-page--cinematic .story-partners h2,
.story-page--cinematic .story-faq h2,
.story-page--cinematic .story-cap h3,
.story-page--cinematic .story-use h3,
.story-page--cinematic .story-partner h3 {
  color: #fff;
}

.story-page--cinematic .story-statement__lead,
.story-page--cinematic .story-section-lead,
.story-page--cinematic .story-cap p,
.story-page--cinematic .story-use p,
.story-page--cinematic .story-partner p {
  color: var(--story-muted);
}

.story-page--cinematic .story-statement em {
  background: linear-gradient(100deg, #7ad4ff, #b07bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-page--cinematic .story-cap,
.story-page--cinematic .story-use,
.story-page--cinematic .story-partner,
.story-page--cinematic .story-faq details,
.story-page--cinematic .story-price {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(165, 216, 255, 0.12);
  color: var(--story-ink-soft);
}

.story-page--cinematic .story-band {
  background:
    radial-gradient(circle at 80% 20%, rgba(122, 212, 255, 0.12), transparent 40%),
    linear-gradient(145deg, #070b18, #0d1530 60%, #120a40);
  border-color: transparent;
}

.story-page--cinematic .story-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(165, 216, 255, 0.12);
  color: rgba(220, 230, 250, 0.85);
}

.story-page--cinematic .site-footer {
  background: linear-gradient(180deg, #070b16, #050A14);
  border-top: 1px solid rgba(165, 216, 255, 0.1);
  color: var(--story-muted);
}

.story-page--cinematic .site-footer a,
.story-page--cinematic .site-footer h2,
.story-page--cinematic .footer-legal strong {
  color: rgba(235, 240, 255, 0.88);
}

@media (max-width: 1120px) {
  .story-page--cinematic .site-nav {
    justify-self: stretch;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-radius: 18px;
    padding: 10px;
    gap: 6px;
  }

  .story-page--cinematic .site-nav.is-open {
    display: flex;
  }

  .story-page--cinematic .site-nav a {
    border-radius: 12px;
    padding: 13px 15px;
  }

  .story-page--cinematic .story-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .story-page--cinematic .story-hero__copy {
    order: -1;
    max-width: none;
  }

  .story-page--cinematic .story-hero h1 {
    max-width: 16ch;
  }

  .story-orbit {
    min-height: 400px;
  }

  .story-orbit__stack {
    height: 400px;
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .story-orbit__card {
    left: 50%;
  }

  .story-page--cinematic .story-hero__trust {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-page--cinematic .story-hero__trust > span:nth-child(2) {
    border-right: 0;
  }

  .story-page--cinematic .story-hero__trust > span:nth-child(1),
  .story-page--cinematic .story-hero__trust > span:nth-child(2) {
    border-bottom: 1px solid rgba(165, 216, 255, 0.12);
  }
}

@media (max-width: 1120px) {
  .story-page--cinematic.story-page--logo-fly .brand--slot,
  .story-page--cinematic.story-page--logo-fly .brand__slot {
    width: 142px;
    height: 26px;
  }

  .story-page--cinematic.story-page--logo-fly .story-logo-source {
    width: min(280px, 72vw);
    height: 44px;
    margin-bottom: 16px;
  }
}

@media (max-width: 760px) {
  .story-hero-pin {
    height: 240vh;
  }

  .story-page--cinematic .brand--cinematic .brand__logo-img {
    width: 132px;
  }

  .story-page--cinematic.story-page--logo-fly .brand--slot,
  .story-page--cinematic.story-page--logo-fly .brand__slot {
    width: 128px;
    height: 24px;
  }

  .story-page--cinematic.story-page--logo-fly .story-logo-source {
    width: min(220px, 68vw);
    height: 36px;
    margin-bottom: 14px;
  }

  .story-page--cinematic .story-hero-pin .story-hero {
    min-height: 100svh;
    height: auto;
    padding-top: calc(var(--header-h) + 18px);
    padding-bottom: 20px;
  }

  .story-orbit__stack {
    height: 340px;
    width: min(100%, 320px);
  }

  .story-orbit__card {
    width: min(100%, 280px);
    left: 50%;
  }

  .story-orbit__card--b,
  .story-orbit__card--c,
  .story-orbit__card--d {
    display: block;
  }

  .story-orbit__card--front {
    width: min(100%, 280px);
  }

  .story-page--cinematic .story-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .story-page--cinematic .story-btn--primary {
    justify-content: center;
  }
}

.story-band--control.is-control-suspended .story-control,
.story-band--control.is-control-suspended .story-control__service,
.story-band--control.is-control-suspended .story-control__metrics article {
  opacity: 1;
  transform: none;
  animation: none !important;
  transition: none !important;
}

.story-band--control.is-control-suspended .story-control__hub {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: none;
}

.story-band--control.is-control-suspended .story-control__flow-halo,
.story-band--control.is-control-suspended .story-control__flow-main,
.story-band--control.is-control-suspended .story-control__flow-core {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
}

.story-band--control.is-control-suspended .story-control__particle,
.story-band--control.is-control-suspended .story-control__centerline-sweep,
.story-band--control.is-control-suspended .story-control__hub-radar {
  display: none;
}

.story-band--control.is-control-suspended .story-control__network::before,
.story-band--control.is-control-suspended .story-control__hub::before,
.story-band--control.is-control-suspended .story-control__hub-core,
.story-band--control.is-control-suspended .story-control__service-icon,
.story-band--control.is-control-suspended .story-control__status {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .story-hero-pin {
    height: auto;
  }

  .story-page--cinematic .story-hero-pin .story-hero {
    position: relative;
    height: auto;
    min-height: min(100svh, 860px);
    --orbit-reveal: 1 !important;
  }

  .story-orbit__stack,
  .story-page--cinematic .story-logos__track {
    animation: none !important;
  }

  .story-page--cinematic.story-page--logo-fly .story-logo-fly {
    animation: none !important;
    opacity: 1;
  }
}

@media (max-width: 420px) {
  .story-page--cinematic .menu-toggle b {
    display: inline;
  }
}

@media (max-width: 360px) {
  .story-page--cinematic .site-header__inner {
    padding-inline: 10px;
    grid-template-columns: 110px minmax(0, 1fr) 72px 48px;
    gap: 8px;
  }

  .story-page--cinematic .brand--cinematic,
  .story-page--cinematic .brand--cinematic .brand__logo-img,
  .story-page--cinematic .brand--cinematic img.cb-logo-2026 {
    width: 110px;
  }

  .story-page--cinematic .header-actions,
  .story-page--cinematic .language-select,
  .story-page--cinematic .language-select select {
    width: 72px;
    min-width: 72px;
  }

  .story-page--cinematic .language-select select {
    padding-inline: 13px 25px;
    font-size: 14px;
  }

  .story-page--cinematic .menu-toggle {
    width: 48px;
    min-width: 48px;
    justify-content: center;
    padding: 0;
  }

  .story-page--cinematic .menu-toggle span,
  .story-page--cinematic .menu-toggle span:nth-child(2),
  .story-page--cinematic .menu-toggle span:nth-child(3) {
    left: 15px;
    width: 18px;
  }

  .story-page--cinematic .menu-toggle b {
    display: none;
  }
}

/* ===== PREMIUM PRODUCT SCENES ===== */
.story-page--cinematic .story-scene__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(145, 205, 247, 0.12);
}

.story-page--cinematic .story-scene__header > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.story-page--cinematic .story-scene__header small {
  color: rgba(145, 213, 255, 0.48);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.story-page--cinematic .story-scene__header h3 {
  margin: 0;
  color: rgba(247, 250, 255, 0.96);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.story-page--cinematic .story-scene__state {
  padding: 7px 10px;
  border-radius: 999px;
  color: #a6e2ff;
  background: rgba(112, 201, 255, 0.08);
  border: 1px solid rgba(145, 205, 247, 0.12);
  font-size: 10px;
  font-weight: 800;
}

.story-page--cinematic .story-cloud-ui,
.story-page--cinematic .story-workflow-ui,
.story-page--cinematic .story-support-ui {
  margin-top: 20px;
}

.story-page--cinematic .story-cloud-map {
  position: relative;
  height: 282px;
  border-radius: 20px;
  background:
    linear-gradient(rgba(145, 205, 247, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 205, 247, 0.035) 1px, transparent 1px),
    rgba(2, 10, 23, 0.38);
  background-size: 34px 34px;
  border: 1px solid rgba(145, 205, 247, 0.09);
  overflow: hidden;
}

.story-page--cinematic .story-cloud-node,
.story-page--cinematic .story-cloud-hub {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 7px;
  color: rgba(213, 229, 248, 0.78);
  font-size: 10px;
  font-weight: 800;
}

.story-page--cinematic .story-cloud-node {
  width: 82px;
  height: 76px;
  border-radius: 15px;
  background: rgba(14, 33, 57, 0.88);
  border: 1px solid rgba(128, 202, 247, 0.13);
}

.story-page--cinematic .story-cloud-node--apps { left: 24px; top: 38px; }
.story-page--cinematic .story-cloud-node--data { right: 24px; bottom: 38px; }

.story-page--cinematic .story-cloud-hub {
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  color: #dff5ff;
  background:
    radial-gradient(circle, rgba(108, 206, 255, 0.19), rgba(10, 29, 53, 0.94) 66%);
  border: 1px solid rgba(133, 214, 255, 0.34);
  box-shadow: 0 0 38px rgba(72, 174, 237, 0.12);
  transform: translate(-50%, -50%);
}

.story-page--cinematic .story-cloud-node svg,
.story-page--cinematic .story-cloud-hub svg {
  width: 25px;
  height: 25px;
  stroke: #91dbff;
  fill: none;
  stroke-width: 1.5;
}

.story-page--cinematic .story-cloud-link {
  position: absolute;
  z-index: 1;
  width: 132px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128, 210, 255, 0.55), transparent);
  transform-origin: center;
}

.story-page--cinematic .story-cloud-link--a {
  left: 86px;
  top: 104px;
  transform: rotate(24deg);
}

.story-page--cinematic .story-cloud-link--b {
  right: 83px;
  bottom: 99px;
  transform: rotate(24deg);
}

.story-page--cinematic .story-cloud-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.story-page--cinematic .story-cloud-modules > div {
  padding: 14px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(145, 205, 247, 0.09);
}

.story-page--cinematic .story-cloud-modules small,
.story-page--cinematic .story-cloud-modules strong,
.story-page--cinematic .story-cloud-modules span {
  display: block;
}

.story-page--cinematic .story-cloud-modules small {
  color: rgba(184, 204, 230, 0.64);
  font-size: 10px;
  font-weight: 700;
}

.story-page--cinematic .story-cloud-modules strong {
  margin-top: 5px;
  color: #eef9ff;
  font-size: 22px;
  font-weight: 900;
}

.story-page--cinematic .story-cloud-modules span {
  margin-top: 5px;
  color: rgba(181, 221, 207, 0.8);
  font-size: 9px;
}

.story-page--cinematic .story-cloud-modules span i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: #73dcb5;
}

.story-page--cinematic .story-cloud-modules span b {
  font-weight: 700;
}

.story-page--cinematic .story-workflow-ui {
  position: relative;
  display: grid;
  gap: 33px;
  padding: 8px 0;
}

.story-page--cinematic .story-workflow-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(8, 21, 39, 0.78);
  border: 1px solid rgba(173, 153, 255, 0.14);
}

.story-page--cinematic .story-workflow-node > span {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #b9aaff;
  background: rgba(132, 104, 235, 0.12);
}

.story-page--cinematic .story-workflow-node svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.story-page--cinematic .story-workflow-node small {
  color: rgba(187, 204, 230, 0.6);
  font-size: 9px;
  font-weight: 700;
}

.story-page--cinematic .story-workflow-node b {
  margin-top: 3px;
  color: rgba(239, 242, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
}

.story-page--cinematic .story-workflow-line {
  position: absolute;
  z-index: 1;
  left: 35px;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(165, 145, 245, 0.2);
}

.story-page--cinematic .story-workflow-line--one { top: 73px; }
.story-page--cinematic .story-workflow-line--two { top: 171px; }

.story-page--cinematic .story-workflow-line b {
  display: block;
  width: 100%;
  height: 12px;
  background: #ae9cff;
  box-shadow: 0 0 10px rgba(156, 128, 255, 0.45);
}

.story-page--cinematic .story-workflow-footer {
  margin-top: 17px;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  border-radius: 14px;
  color: rgba(198, 214, 236, 0.7);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(173, 153, 255, 0.1);
  font-size: 10px;
}

.story-page--cinematic .story-workflow-footer span i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #9ddac6;
}

.story-page--cinematic .story-support-ticket {
  display: grid;
  grid-template-columns: 42px 1fr 8px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: rgba(7, 22, 38, 0.82);
  border: 1px solid rgba(110, 218, 194, 0.13);
}

.story-page--cinematic .story-support-ticket > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #8fe0c4;
  background: rgba(83, 194, 165, 0.1);
}

.story-page--cinematic .story-support-ticket svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.story-page--cinematic .story-support-ticket small,
.story-page--cinematic .story-support-ticket b {
  display: block;
}

.story-page--cinematic .story-support-ticket small {
  color: rgba(183, 205, 226, 0.62);
  font-size: 9px;
}

.story-page--cinematic .story-support-ticket b {
  margin-top: 4px;
  color: rgba(239, 250, 247, 0.9);
  font-size: 12px;
}

.story-page--cinematic .story-support-ticket > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #78ddb9;
  box-shadow: 0 0 11px rgba(91, 210, 172, 0.5);
}

.story-page--cinematic .story-support-chat {
  min-height: 210px;
  margin-top: 12px;
  padding: 22px 16px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(132, 216, 196, 0.025) 1px, transparent 1px),
    rgba(3, 13, 27, 0.38);
  background-size: 100% 36px;
  border: 1px solid rgba(110, 218, 194, 0.08);
}

.story-page--cinematic .story-support-chat p {
  width: fit-content;
  max-width: 82%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px 14px 14px 4px;
  color: rgba(218, 233, 246, 0.78);
  background: rgba(255, 255, 255, 0.055);
  font-size: 11px;
  line-height: 1.35;
}

.story-page--cinematic .story-support-chat p + p {
  margin: 22px 0 0 auto;
  border-radius: 14px 14px 4px 14px;
  color: #dff8f0;
  background: rgba(78, 184, 155, 0.12);
}

.story-page--cinematic .story-support-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
}

.story-page--cinematic .story-support-timeline::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 5px;
  height: 1px;
  background: rgba(132, 216, 196, 0.14);
}

.story-page--cinematic .story-support-timeline span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(177, 198, 220, 0.52);
  font-size: 9px;
}

.story-page--cinematic .story-support-timeline i {
  width: 10px;
  height: 10px;
  border: 2px solid #173347;
  border-radius: 50%;
  background: #0a1729;
}

.story-page--cinematic .story-support-timeline .is-done i,
.story-page--cinematic .story-support-timeline .is-current i {
  border-color: #82d9c0;
  background: #82d9c0;
}

.story-page--cinematic .story-support-timeline .is-current i {
  box-shadow: 0 0 14px rgba(102, 212, 180, 0.42);
}

.story-page--cinematic .story-orbit__card.is-deck-active .story-cloud-hub {
  animation: story-cloud-breathe 3.8s ease-in-out infinite;
}

.story-page--cinematic .story-orbit__card.is-deck-active .story-workflow-line b {
  animation: story-flow-pulse 1.7s linear infinite;
}

.story-page--cinematic .story-orbit__card.is-deck-active .story-support-timeline .is-current i {
  animation: story-support-pulse 2.2s ease-in-out infinite;
}

@keyframes story-cloud-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.045); }
}

@keyframes story-flow-pulse {
  from { transform: translateY(-14px); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translateY(34px); opacity: 0; }
}

@keyframes story-support-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(102, 212, 180, 0.24); }
  50% { box-shadow: 0 0 18px rgba(102, 212, 180, 0.56); }
}

/* Vie ambiante des cartes hero (complète le bloc « reference » : LED statut, widgets arrière) :
   cascade Murphy, LED Murphy, reflet — uniquement opacité/ombres/pseudo-éléments, jamais les transforms pilotés par le JS du deck. */
.story-murphy-card__status .story-orbit__dot {
  animation: story-orbit-dot-breathe 4.6s ease-in-out infinite;
}

.story-murphy-card__points i {
  animation: story-murphy-point-pulse 3.9s ease-in-out infinite;
}

.story-murphy-card__points li:nth-child(2) i { animation-delay: 1.3s; }
.story-murphy-card__points li:nth-child(3) i { animation-delay: 2.6s; }

.story-orbit__card--front::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 34%;
  background: linear-gradient(100deg, transparent 0%, rgba(158, 216, 255, 0.05) 35%, rgba(206, 240, 255, 0.11) 50%, rgba(158, 216, 255, 0.05) 65%, transparent 100%);
  transform: translateX(-160%) rotate(8deg);
  animation: story-orbit-sheen 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes story-orbit-dot-breathe {
  0%, 100% { opacity: .6; box-shadow: 0 0 6px rgba(61, 255, 154, 0.4); }
  50% { opacity: 1; box-shadow: 0 0 14px rgba(61, 255, 154, 0.9); }
}

@keyframes story-murphy-point-pulse {
  0%, 30%, 100% { opacity: .72; box-shadow: 0 0 6px rgba(90, 160, 255, 0.35); }
  12% { opacity: 1; box-shadow: 0 0 14px rgba(96, 205, 255, 0.85); }
}

@keyframes story-orbit-sheen {
  0%, 78% { transform: translateX(-160%) rotate(8deg); opacity: 0; }
  82% { opacity: 1; }
  92%, 100% { transform: translateX(520%) rotate(8deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .story-murphy-card__status .story-orbit__dot,
  .story-murphy-card__points i {
    animation: none !important;
  }

  .story-orbit__card--front::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-scene__header {
    padding-bottom: 14px;
  }

  .story-page--cinematic .story-cloud-map {
    height: 245px;
  }

  .story-page--cinematic .story-support-chat {
    min-height: 180px;
  }

  .story-page--cinematic .story-workflow-ui {
    gap: 25px;
  }

  .story-page--cinematic .story-workflow-line--one { top: 70px; height: 26px; }
  .story-page--cinematic .story-workflow-line--two { top: 158px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-cloud-hub,
  .story-page--cinematic .story-workflow-line b,
  .story-page--cinematic .story-support-timeline .is-current i {
    animation: none !important;
  }
}

/* ===== SIX-ROW HERO ORCHESTRATION ===== */
.story-page--cinematic .story-orbit,
.story-page--cinematic .story-orbit__stack {
  min-height: 590px;
}

.story-page--cinematic .story-orbit__stack {
  height: 590px;
}

.story-page--cinematic .story-orbit__card--d {
  height: 455px;
}

.story-page--cinematic .story-orbit__card--c {
  height: 485px;
}

.story-page--cinematic .story-orbit__card--b {
  height: 515px;
}

.story-page--cinematic .story-orbit__card--front {
  height: 550px;
  padding: 22px 20px 18px;
}

.story-page--cinematic .story-orbit__title {
  margin-bottom: 14px;
  font-size: clamp(20px, 1.55vw, 25px);
}

.story-page--cinematic .story-orbit__list {
  gap: 6px;
}

.story-page--cinematic .story-orbit__list li {
  grid-template-columns: 34px minmax(0, 1fr) 8px;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
}

.story-page--cinematic .story-orbit__icon {
  width: 34px;
  height: 34px;
}

.story-page--cinematic .story-orbit__icon svg {
  width: 17px;
  height: 17px;
}

.story-page--cinematic .story-orbit__meta strong {
  font-size: 12.5px;
}

.story-page--cinematic .story-orbit__meta small {
  font-size: 9.5px;
  line-height: 1.2;
}

.story-page--cinematic .story-orbit__prompt {
  margin-top: 10px;
  min-height: 42px;
  padding: 10px 13px;
}

/* ===== AMBIENT ECOSYSTEM FIELD ===== */
.story-page--cinematic .story-stack {
  position: relative;
  min-height: clamp(680px, 76vh, 880px);
  padding: clamp(110px, 11vw, 160px) 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Motif hexagonal discret : plus présent sur les côtés, effacé derrière le titre, dérive verticale très lente. */
.story-page--cinematic .story-stack::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -40px 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='206' height='178' viewBox='0 0 206 178'%3E%3Cg fill='none' stroke='%231260a2' stroke-opacity='.42' stroke-width='.8'%3E%3Cpath d='M52 1 102 30v58l-50 29L2 88V30Z'/%3E%3Cpath d='m154 60 50 29v58l-50 29-50-29V89Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: -34px -22px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .5) 32%, rgba(0, 0, 0, .18) 50%, rgba(0, 0, 0, .5) 68%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .5) 32%, rgba(0, 0, 0, .18) 50%, rgba(0, 0, 0, .5) 68%, #000 100%);
  animation: story-stack-hex-drift 26s ease-in-out infinite alternate;
}

.story-page--cinematic .story-stack::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -12%;
  left: 0;
  height: 46%;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 100% at 50% 100%, rgba(0, 190, 255, .09), transparent 70%);
}

@keyframes story-stack-hex-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -16px, 0); }
}

.story-page--cinematic .story-stack > .story-shell {
  position: relative;
  z-index: 4;
  max-width: 820px;
  padding: 44px clamp(24px, 5vw, 72px);
}

.story-page--cinematic .story-stack > .story-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -42% -24%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(6, 14, 28, 0.98) 20%, rgba(6, 14, 28, 0.78) 48%, transparent 76%);
  filter: blur(8px);
}

.story-page--cinematic .story-stack h2 {
  margin-inline: auto;
  max-width: 17ch;
  font-size: var(--cb-title-section);
  line-height: 0.98;
  text-wrap: balance;
}

.story-page--cinematic .story-stack .story-section-lead {
  max-width: 54ch;
  color: rgba(203, 218, 240, 0.78);
}

.story-page--cinematic .story-stack .story-marquee {
  position: absolute;
  z-index: 2;
  left: -10%;
  width: 120%;
  margin: 0;
  overflow: hidden;
  pointer-events: auto;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.story-page--cinematic .story-marquee--back {
  top: 88px;
  opacity: 0.26;
  filter: blur(0.35px);
}

.story-page--cinematic .story-marquee--front {
  bottom: 84px;
  opacity: 0.62;
}

.story-page--cinematic .story-marquee--back .story-marquee__track {
  animation: story-logo-field-reverse 56s linear infinite;
}

.story-page--cinematic .story-marquee--front .story-marquee__track {
  animation: story-logo-field-forward 42s linear infinite;
}

/* Le défilement d'une rangée se met en pause quand elle est survolée. */
.story-page--cinematic .story-stack .story-marquee:hover .story-marquee__track {
  animation-play-state: paused;
}

@keyframes story-logo-field-forward {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes story-logo-field-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Entrée séquencée : contenu puis rangées ; le défilement ne démarre qu'une fois la section révélée. */
.story-page--cinematic .story-stack .story-eyebrow,
.story-page--cinematic .story-stack h2,
.story-page--cinematic .story-stack .story-section-lead {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1);
}

.story-page--cinematic .story-stack .story-marquee {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), translate .8s cubic-bezier(.22, 1, .36, 1);
}

.story-page--cinematic .story-stack .story-marquee__track {
  animation-play-state: paused;
}

.story-page--cinematic .story-stack.is-in .story-eyebrow { opacity: 1; translate: 0 0; transition-delay: .05s; }
.story-page--cinematic .story-stack.is-in h2 { opacity: 1; translate: 0 0; transition-delay: .16s; }
.story-page--cinematic .story-stack.is-in .story-section-lead { opacity: 1; translate: 0 0; transition-delay: .3s; }
.story-page--cinematic .story-stack.is-in .story-marquee--back { opacity: 0.26; translate: 0 0; transition-delay: .46s; }
.story-page--cinematic .story-stack.is-in .story-marquee--front { opacity: 0.62; translate: 0 0; transition-delay: .58s; }

.story-page--cinematic .story-stack.is-in .story-marquee__track {
  animation-play-state: running;
}

.story-page--cinematic .story-stack.is-in .story-marquee:hover .story-marquee__track {
  animation-play-state: paused;
}

.story-page--cinematic .story-stack .story-chip {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(215, 229, 247, 0.9);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
  box-shadow: none;
  text-shadow: 0 0 24px rgba(117, 202, 255, 0.16);
  transition: opacity .24s ease, transform .24s ease, background-color .24s ease, box-shadow .24s ease, color .24s ease;
}

/* Survol d'un outil : la rangée s'estompe, l'outil se détache. */
.story-page--cinematic .story-stack .story-marquee__track:hover .story-chip:not(:hover) {
  opacity: .5;
}

.story-page--cinematic .story-stack .story-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(79, 198, 255, 0.14);
  text-shadow: 0 0 26px rgba(140, 216, 255, 0.4);
  transform: translateY(-4px) scale(1.03);
}

.story-page--cinematic .story-stack .story-chip:hover i {
  box-shadow: 0 0 14px rgba(91, 190, 250, 0.85);
}

.story-page--cinematic .story-stack .story-chip:hover::before {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 18px rgba(64, 196, 255, 0.35);
}

.story-page--cinematic .story-marquee--back .story-chip {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.story-page--cinematic .story-stack .story-chip i {
  display: block;
  width: 5px;
  height: 5px;
  background: #8fd8ff;
  box-shadow: 0 0 10px rgba(91, 190, 250, 0.42);
}

.story-page--cinematic .story-stack .story-chip::before {
  content: "";
  display: none;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.78;
  filter: saturate(0.72) brightness(0.94);
  transition: opacity .24s ease, filter .24s ease, box-shadow .24s ease;
}

.story-page--cinematic .story-marquee--front .story-chip:nth-child(12n + 2)::before,
.story-page--cinematic .story-marquee--back .story-chip:nth-child(12n + 7)::before {
  display: block;
  background-image: url("/assets/menu-solutions/microsoft365/teams.png");
}

.story-page--cinematic .story-marquee--front .story-chip:nth-child(12n + 3)::before,
.story-page--cinematic .story-marquee--back .story-chip:nth-child(12n + 8)::before {
  display: block;
  background-image: url("/assets/menu-solutions/microsoft365/outlook.png");
}

.story-page--cinematic .story-marquee--front .story-chip:nth-child(12n + 8)::before,
.story-page--cinematic .story-marquee--back .story-chip:nth-child(12n + 1)::before {
  display: block;
  background-image: url("/assets/menu-solutions/microsoft365/entra-id.png");
}

.story-page--cinematic .story-marquee--front .story-chip:nth-child(12n + 9)::before,
.story-page--cinematic .story-marquee--back .story-chip:nth-child(12n + 2)::before {
  display: block;
  background-image: url("/assets/menu-solutions/microsoft365/defender.png");
}

.story-page--cinematic .story-marquee--front .story-chip:nth-child(12n + 10)::before,
.story-page--cinematic .story-marquee--back .story-chip:nth-child(12n + 3)::before {
  display: block;
  background-image: url("/assets/menu-solutions/microsoft365/intune.png");
}

.story-page--cinematic .story-marquee--front .story-chip:nth-child(12n + 11)::before,
.story-page--cinematic .story-marquee--back .story-chip:nth-child(12n + 4)::before {
  display: block;
  background-image: url("/assets/menu-solutions/microsoft365/sharepoint.png");
}

.story-page--cinematic .story-marquee--front .story-chip:nth-child(12n + 12)::before,
.story-page--cinematic .story-marquee--back .story-chip:nth-child(12n + 5)::before {
  display: block;
  background-image: url("/assets/menu-solutions/microsoft365/onedrive.png");
}

/* Reduced motion : rangées statiques dédoublonnées, défilement tactile, fond immobile. */
@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-stack::before {
    animation: none;
  }

  .story-page--cinematic .story-stack .story-marquee__track {
    animation: none !important;
  }

  .story-page--cinematic .story-stack .story-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .story-page--cinematic .story-stack .story-marquee .story-chip:nth-child(n + 13) {
    display: none;
  }

  .story-page--cinematic .story-stack .story-eyebrow,
  .story-page--cinematic .story-stack h2,
  .story-page--cinematic .story-stack .story-section-lead,
  .story-page--cinematic .story-stack .story-marquee {
    transition-duration: .01s;
    transition-delay: 0s;
  }

  .story-page--cinematic .story-stack .story-chip:hover {
    transform: none;
  }
}

/* ===== EDITORIAL OFFERS ===== */
.story-page--cinematic .story-pricing {
  padding: clamp(96px, 10vw, 148px) 0;
}

.story-page--cinematic .story-pricing > .story-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.58fr) minmax(620px, 1.42fr);
  gap: clamp(58px, 7vw, 112px);
  align-items: start;
}

.story-page--cinematic .story-pricing > .story-shell > header {
  position: sticky;
  top: calc(var(--header-h) + 38px);
  max-width: 460px;
}

.story-page--cinematic .story-pricing > .story-shell > header::after {
  content: "";
  display: block;
  width: min(210px, 60%);
  height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, rgba(145, 205, 247, 0.5), transparent);
}

.story-page--cinematic .story-pricing h2 {
  max-width: 10ch;
  font-size: var(--cb-title-section);
  line-height: 0.98;
  text-wrap: balance;
}

.story-page--cinematic .story-price-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.story-page--cinematic .story-price {
  --offer-accent: #8fd8ff;
  --offer-glow: rgba(91, 190, 250, 0.11);
  position: relative;
  grid-column: span 6;
  min-height: 280px;
  padding: 28px 26px 24px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 4%, var(--offer-glow), transparent 34%),
    linear-gradient(145deg, rgba(18, 35, 60, 0.88), rgba(7, 16, 31, 0.86));
}

.story-page--cinematic .story-price:nth-child(1) {
  --offer-accent: #8fd8ff;
  --offer-glow: rgba(91, 190, 250, 0.15);
  grid-column: span 7;
}

.story-page--cinematic .story-price:nth-child(2) {
  --offer-accent: #b2a4ff;
  --offer-glow: rgba(128, 102, 242, 0.14);
  grid-column: span 5;
}

.story-page--cinematic .story-price:nth-child(3) {
  --offer-accent: #83c5ff;
  --offer-glow: rgba(59, 133, 227, 0.14);
  grid-column: span 5;
}

.story-page--cinematic .story-price:nth-child(4) {
  --offer-accent: #8fe0c4;
  --offer-glow: rgba(73, 189, 151, 0.12);
  grid-column: span 7;
}

.story-page--cinematic .story-price::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--offer-accent), transparent);
  opacity: 0.72;
}

.story-page--cinematic .story-price::after {
  position: absolute;
  right: 18px;
  bottom: -34px;
  color: var(--offer-accent);
  font-size: 128px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;
  opacity: 0.035;
  pointer-events: none;
}

.story-page--cinematic .story-price:nth-child(1)::after { content: "D"; }
.story-page--cinematic .story-price:nth-child(2)::after { content: "S"; }
.story-page--cinematic .story-price:nth-child(3)::after { content: "O"; }
.story-page--cinematic .story-price:nth-child(4)::after { content: "N"; }

.story-page--cinematic .story-price h3 {
  position: relative;
  z-index: 1;
  color: rgba(247, 250, 255, 0.96);
  font-size: 28px;
}

.story-page--cinematic .story-price__price {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  color: var(--offer-accent);
  font-size: clamp(30px, 2.4vw, 40px);
  line-height: 1;
}

.story-page--cinematic .story-price__price small {
  margin-top: 7px;
  color: rgba(199, 216, 239, 0.7);
  font-size: 12.5px;
}

.story-page--cinematic .story-price > p:not(.story-price__price) {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  max-width: 38ch;
  color: rgba(199, 216, 239, 0.76);
  font-size: 15.5px;
}

.story-page--cinematic .story-price__cta {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-top: 24px;
  color: var(--offer-accent);
  font-size: 13.5px;
}

.story-page--cinematic .story-price:hover {
  border-color: color-mix(in srgb, var(--offer-accent) 42%, transparent);
}

@media (max-width: 1120px) {
  .story-page--cinematic .story-orbit,
  .story-page--cinematic .story-orbit__stack {
    min-height: 550px;
  }

  .story-page--cinematic .story-orbit__stack {
    height: 550px;
  }

  .story-page--cinematic .story-pricing > .story-shell {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .story-page--cinematic .story-pricing > .story-shell > header {
    position: relative;
    top: auto;
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-orbit,
  .story-page--cinematic .story-orbit__stack {
    min-height: 510px;
  }

  .story-page--cinematic .story-orbit__stack {
    height: 510px;
  }

  .story-page--cinematic .story-orbit__card--d { height: 420px; }
  .story-page--cinematic .story-orbit__card--c { height: 440px; }
  .story-page--cinematic .story-orbit__card--b { height: 465px; }

  .story-page--cinematic .story-orbit__card--front {
    height: 500px;
    padding: 18px 15px 14px;
  }

  .story-page--cinematic .story-orbit__title {
    font-size: 19px;
    margin-bottom: 10px;
  }

  .story-page--cinematic .story-orbit__list li {
    grid-template-columns: 30px minmax(0, 1fr) 7px;
    min-height: 43px;
    padding: 5px 8px;
  }

  .story-page--cinematic .story-orbit__icon {
    width: 30px;
    height: 30px;
  }

  .story-page--cinematic .story-orbit__prompt {
    min-height: 38px;
    margin-top: 8px;
    font-size: 11px;
  }

  .story-page--cinematic .story-stack {
    min-height: 540px;
    padding: 110px 0;
  }

  .story-page--cinematic .story-stack > .story-shell {
    padding: 34px 18px;
  }

  .story-page--cinematic .story-marquee--back {
    top: 62px;
  }

  .story-page--cinematic .story-marquee--front {
    bottom: 58px;
  }

  .story-page--cinematic .story-stack .story-chip {
    min-height: 42px;
    padding-inline: 17px;
    font-size: 14px;
  }

  .story-page--cinematic .story-marquee--back .story-chip {
    font-size: 16px;
  }

  .story-page--cinematic .story-pricing {
    padding: 82px 0;
  }

  .story-page--cinematic .story-pricing h2 {
    max-width: 12ch;
    font-size: clamp(40px, 12vw, 54px);
  }

  .story-page--cinematic .story-price-grid {
    grid-template-columns: 1fr;
  }

  .story-page--cinematic .story-price,
  .story-page--cinematic .story-price:nth-child(n) {
    grid-column: 1;
    min-height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-stack .story-marquee__track {
    animation: none !important;
    transform: translate3d(-12%, 0, 0);
  }
}

/* ===== SCROLL-DRIVEN HERO DECK ===== */
.story-page--cinematic .story-hero-pin {
  height: 280vh;
}

.story-page--cinematic .story-orbit {
  min-height: 590px;
}

.story-page--cinematic .story-orbit__stack {
  width: min(100%, 620px);
  height: 560px;
  min-height: 560px;
  transform-style: preserve-3d;
  animation: none !important;
}

.story-page--cinematic .story-orbit__card,
.story-page--cinematic .story-orbit__card--front,
.story-page--cinematic .story-orbit__card--b,
.story-page--cinematic .story-orbit__card--c,
.story-page--cinematic .story-orbit__card--d {
  --deck-x: 0px;
  --deck-y: 0px;
  --deck-depth: 0px;
  --deck-scale: 1;
  --deck-rotate: 0deg;
  --deck-rotate-x: 0deg;
  --deck-rotate-y: 0deg;
  --deck-tilt-x: 0deg;
  --deck-tilt-y: 0deg;
  --deck-opacity: 1;
  --deck-blur: 0px;
  --deck-layer: 1;
  --deck-light-x: 24%;
  --deck-light-y: 4%;
  top: -120px;
  left: 178px;
  width: 358px;
  height: 586px;
  opacity: var(--deck-opacity);
  z-index: var(--deck-layer);
  filter: blur(var(--deck-blur));
  transform:
    translate3d(var(--deck-x), var(--deck-y), var(--deck-depth))
    rotateX(calc(var(--deck-rotate-x) + var(--deck-tilt-x)))
    rotateY(calc(var(--deck-rotate-y) + var(--deck-tilt-y)))
    rotateZ(var(--deck-rotate))
    scale(var(--deck-scale));
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity, filter, background-position;
}

.story-page--cinematic .story-orbit__card.is-deck-active {
  pointer-events: auto;
  border-color: rgba(159, 218, 255, 0.42);
  box-shadow:
    0 44px 95px rgba(0, 0, 0, 0.54),
    0 12px 34px rgba(72, 166, 232, 0.13),
    inset 0 1px 0 rgba(235, 249, 255, 0.14),
    inset 0 0 54px rgba(72, 169, 231, 0.065);
}

.story-page--cinematic .story-orbit__card--b,
.story-page--cinematic .story-orbit__card--c,
.story-page--cinematic .story-orbit__card--d {
  padding: 26px 24px;
  background:
    radial-gradient(circle at var(--deck-light-x) var(--deck-light-y), rgba(133, 213, 255, 0.2), transparent 38%),
    linear-gradient(145deg, rgba(23, 43, 71, 0.96), rgba(7, 17, 33, 0.97));
}

.story-page--cinematic .story-orbit__card--front {
  padding: 21px 20px 20px;
  background:
    radial-gradient(circle at var(--deck-light-x) var(--deck-light-y), rgba(102, 181, 242, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(18, 43, 72, 0.97), rgba(5, 16, 31, 0.98));
}

.story-page--cinematic .story-orbit__coverage {
  width: fit-content;
  min-height: 30px;
  margin: 0 0 18px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(108, 190, 246, 0.08);
  border-radius: 999px;
  color: rgba(226, 237, 253, 0.88);
  background: rgba(67, 134, 196, 0.15);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.story-page--cinematic .story-orbit__coverage i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8e70ff;
  box-shadow: 0 0 10px rgba(142, 112, 255, 0.62);
}

.story-page--cinematic .story-orbit__card--front .story-orbit__title {
  margin: 0 0 7px;
  font-size: 24px;
  line-height: 1.08;
}

.story-page--cinematic .story-orbit__subtitle {
  margin: 0 0 22px;
  color: rgba(205, 219, 240, 0.78);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.story-page--cinematic .story-orbit__card-label {
  font-size: 20px;
  font-weight: 900;
  color: rgba(246, 250, 255, 0.95);
}

.story-page--cinematic .story-orbit__sparkline,
.story-page--cinematic .story-orbit__bars {
  height: 210px;
  margin: 80px 18px 0;
}

.story-page--cinematic .story-orbit__headset {
  min-height: 330px;
  margin-top: 58px;
  border-radius: 20px;
  border: 1px solid rgba(145, 205, 247, 0.1);
  background:
    radial-gradient(circle, rgba(91, 190, 250, 0.13), transparent 54%),
    rgba(255, 255, 255, 0.025);
}

.story-page--cinematic .story-orbit__headset svg {
  width: 104px;
  height: 104px;
}

.story-page--cinematic .story-orbit__card--front .story-orbit__list > li.story-orbit__item--linked {
  display: block;
  padding: 0;
  min-height: 56px;
}

.story-page--cinematic .story-orbit__item--linked > a {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 6px 9px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  outline: 0;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.story-page--cinematic .story-orbit__card--front .story-orbit__list {
  gap: 4px;
}

.story-page--cinematic .story-orbit__card--front .story-orbit__list > li:not(.story-orbit__item--linked) {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 6px 9px;
}

.story-page--cinematic .story-orbit__card--front .story-orbit__prompt {
  min-height: 42px;
  margin-top: 9px;
  padding: 9px 13px;
}

.story-page--cinematic .story-orbit__status {
  min-height: 22px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(54, 246, 170, 0.06);
  border-radius: 999px;
  color: #3af0a7;
  background: rgba(17, 112, 83, 0.32);
  font-size: 9.5px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.story-page--cinematic .story-orbit__status--live {
  padding-right: 7px;
}

.story-page--cinematic .story-orbit__status .story-orbit__dot {
  width: 6px;
  height: 6px;
}

.story-page--cinematic .story-orbit__item--linked > a::after {
  content: "→";
  position: absolute;
  right: 12px;
  top: 50%;
  color: #a5dcff;
  font-size: 13px;
  opacity: 0;
  transform: translate(-5px, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.story-page--cinematic .story-orbit__item--linked > a:hover {
  background: rgba(132, 208, 255, 0.075);
  box-shadow: inset 2px 0 0 rgba(145, 215, 255, 0.5);
  transform: translateX(2px);
}

.story-page--cinematic .story-orbit__item--linked > a:hover .story-orbit__dot,
.story-page--cinematic .story-orbit__item--linked > a:focus-visible .story-orbit__dot {
  opacity: 0;
}

.story-page--cinematic .story-orbit__item--linked > a:hover::after,
.story-page--cinematic .story-orbit__item--linked > a:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.story-page--cinematic .story-orbit__item--linked > a:active {
  transform: translateX(2px) scale(0.992);
}

.story-page--cinematic .story-orbit__item--linked > a:focus-visible {
  background: rgba(132, 208, 255, 0.1);
  box-shadow:
    inset 0 0 0 2px #9edcff,
    inset 3px 0 0 #9edcff;
}

.story-page--cinematic .story-deck-progress {
  position: absolute;
  z-index: 8;
  left: max(20px, calc(50% - 310px));
  right: max(20px, calc(50% - 310px));
  bottom: -8px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  color: rgba(207, 223, 244, 0.58);
  pointer-events: none;
}

.story-page--cinematic .story-deck-progress__rail {
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(145, 205, 247, 0.12);
}

.story-page--cinematic .story-deck-progress__rail i {
  display: block;
  width: var(--deck-progress-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #78cfff, #9f8cff);
  box-shadow: 0 0 14px rgba(114, 199, 255, 0.38);
}

.story-page--cinematic .story-deck-progress b {
  color: rgba(231, 240, 253, 0.82);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.story-page--cinematic .story-deck-progress small {
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1120px) and (min-width: 761px) {
  .story-page--cinematic .story-orbit__card,
  .story-page--cinematic .story-orbit__card--front,
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    top: 0;
    left: 50%;
    transform:
      translate3d(calc(-50% + var(--deck-x)), var(--deck-y), var(--deck-depth))
      rotateX(calc(var(--deck-rotate-x) + var(--deck-tilt-x)))
      rotateY(calc(var(--deck-rotate-y) + var(--deck-tilt-y)))
      rotateZ(var(--deck-rotate))
      scale(var(--deck-scale));
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-hero-pin {
    height: auto;
  }

  .story-page--cinematic .story-hero-pin .story-hero {
    position: relative;
    top: auto;
  }

  .story-page--cinematic .story-orbit {
    display: block;
    min-height: 520px;
    width: 100%;
  }

  .story-page--cinematic .story-orbit__stack {
    display: flex;
    width: calc(100vw - 16px);
    max-width: none;
    height: 520px;
    min-height: 520px;
    margin-inline: calc(50% - 50vw + 8px);
    padding: 5px 24px 8px;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none;
  }

  .story-page--cinematic .story-orbit__stack::-webkit-scrollbar {
    display: none;
  }

  .story-page--cinematic .story-orbit__card,
  .story-page--cinematic .story-orbit__card--front,
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    position: relative;
    flex: 0 0 min(82vw, 310px);
    left: auto;
    top: auto;
    width: min(82vw, 310px);
    height: 500px;
    opacity: 1;
    filter: none;
    transform: none;
    pointer-events: auto;
    scroll-snap-align: center;
  }

  .story-page--cinematic .story-orbit__card--front { order: 1; }
  .story-page--cinematic .story-orbit__card--b { order: 2; }
  .story-page--cinematic .story-orbit__card--c { order: 3; }
  .story-page--cinematic .story-orbit__card--d { order: 4; }

  .story-page--cinematic .story-orbit__card--front {
    padding: 16px 15px 15px;
  }

  .story-page--cinematic .story-orbit__coverage {
    min-height: 25px;
    margin-bottom: 8px;
    padding-inline: 10px;
    font-size: 9.5px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__title {
    margin-bottom: 3px;
    font-size: 21px;
  }

  .story-page--cinematic .story-orbit__subtitle {
    margin-bottom: 11px;
    font-size: 10.5px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__list > li.story-orbit__item--linked,
  .story-page--cinematic .story-orbit__item--linked > a,
  .story-page--cinematic .story-orbit__card--front .story-orbit__list > li:not(.story-orbit__item--linked) {
    min-height: 47px;
  }

  .story-page--cinematic .story-orbit__item--linked > a,
  .story-page--cinematic .story-orbit__card--front .story-orbit__list > li:not(.story-orbit__item--linked) {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 4px 7px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__icon {
    width: 32px;
    height: 32px;
  }

  .story-page--cinematic .story-orbit__status {
    min-height: 19px;
    padding-inline: 6px;
    font-size: 8px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__prompt {
    min-height: 36px;
    margin-top: 7px;
    padding: 7px 10px;
    font-size: 10.5px;
  }

  .story-page--cinematic .story-deck-progress {
    display: none;
  }

  .story-page--cinematic .story-orbit__sparkline,
  .story-page--cinematic .story-orbit__bars {
    height: 180px;
    margin-top: 66px;
  }

  .story-page--cinematic .story-orbit__headset {
    min-height: 290px;
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-hero-pin {
    height: auto;
  }

  .story-page--cinematic .story-deck-progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1121px) {
  .story-page--cinematic .story-orbit__card,
  .story-page--cinematic .story-orbit__card--front,
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    top: -78px;
  }
}

/* ===== FAQ + CLOSING SCENE ===== */
.story-page--cinematic .story-faq {
  width: var(--cb-shell);
  padding: clamp(88px, 9vw, 138px) 0 clamp(78px, 8vw, 118px);
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(560px, 1.28fr);
  gap: clamp(58px, 7vw, 112px);
  align-items: start;
}

.story-page--cinematic .story-faq > header {
  position: sticky;
  top: calc(var(--header-h) + 38px);
  max-width: 470px;
}

.story-page--cinematic .story-faq > header::after {
  content: "";
  display: block;
  width: min(220px, 62%);
  height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, rgba(145, 205, 247, 0.5), transparent);
}

.story-page--cinematic .story-faq h2 {
  max-width: 10ch;
  font-size: var(--cb-title-section);
  line-height: 0.98;
  text-wrap: balance;
}

.story-page--cinematic .story-faq__list {
  width: 100%;
  margin: 0;
  gap: 12px;
  counter-reset: faq-row;
}

.story-page--cinematic .story-faq details {
  position: relative;
  counter-increment: faq-row;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(17, 33, 57, 0.84), rgba(7, 16, 31, 0.8));
  border: 1px solid rgba(145, 205, 247, 0.13);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.story-page--cinematic .story-faq details[open] {
  border-color: rgba(145, 205, 247, 0.31);
  background:
    radial-gradient(circle at 94% 0%, rgba(104, 191, 249, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(22, 43, 72, 0.93), rgba(8, 19, 36, 0.91));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.21),
    inset 3px 0 0 rgba(131, 213, 255, 0.72);
}

.story-page--cinematic .story-faq summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 36px;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  padding: 18px 22px;
  color: rgba(242, 247, 255, 0.94);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 900;
}

.story-page--cinematic .story-faq summary::before {
  content: counter(faq-row, decimal-leading-zero);
  color: rgba(146, 212, 255, 0.58);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.story-page--cinematic .story-faq summary svg {
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  stroke: #a4ddff;
  background: rgba(145, 205, 247, 0.075);
  border: 1px solid rgba(145, 205, 247, 0.12);
}

.story-page--cinematic .story-faq summary:focus-visible {
  outline: 2px solid #9edcff;
  outline-offset: -3px;
  border-radius: 18px;
}

.story-page--cinematic .story-faq details p {
  margin: 0;
  max-width: 66ch;
  padding: 0 26px 27px 76px;
  color: rgba(201, 217, 239, 0.8);
  font-size: 15.5px;
  line-height: 1.62;
}

.story-page--cinematic #main > .story-faq::before {
  inset: -10% -20%;
  opacity: 0.36;
  background:
    radial-gradient(ellipse 48% 68% at 76% 46%, rgba(68, 151, 230, 0.17), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%237ad4ff' stroke-opacity='.22' stroke-width='.7'%3E%3Cpath d='M45 1 89 26v51l-44 25L1 77V26Z'/%3E%3Cpath d='m135 53 44 25v51l-44 25-44-25V78Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center, var(--section-grid-x) var(--section-grid-y);
  background-repeat: no-repeat, repeat;
  mask-image: radial-gradient(ellipse 68% 86% at 76% 48%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 68% 86% at 76% 48%, #000 12%, transparent 76%);
}

.story-page--cinematic .story-cta {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  margin: 0 auto clamp(48px, 5vw, 76px);
  padding: clamp(48px, 5.5vw, 78px);
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.58fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: end;
  overflow: hidden;
  border-radius: 42px;
  border: 1px solid rgba(145, 205, 247, 0.18);
  background:
    linear-gradient(112deg, rgba(9, 22, 42, 0.98), rgba(13, 37, 68, 0.96) 58%, rgba(16, 29, 56, 0.98));
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.story-page--cinematic #main > .story-cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% -14%;
  opacity: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 26%, rgba(107, 202, 255, 0.25), transparent 24%),
    radial-gradient(circle at 92% 74%, rgba(104, 79, 231, 0.18), transparent 32%),
    linear-gradient(122deg, transparent 42%, rgba(158, 220, 255, 0.045) 42.2%, transparent 42.5%);
  mask-image: none;
  -webkit-mask-image: none;
  transform:
    translate3d(var(--section-scroll-x), var(--section-scroll-y), 0)
    scale(1.04);
}

.story-page--cinematic #main > .story-cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -250px;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(163, 221, 255, 0.17);
  box-shadow:
    0 0 0 70px rgba(112, 199, 255, 0.025),
    0 0 90px rgba(91, 183, 247, 0.1);
  background: transparent;
  filter: none;
  opacity: 1;
}

.story-page--cinematic .story-cta > * {
  position: relative;
  z-index: 1;
}

.story-page--cinematic .story-cta h2 {
  max-width: 13ch;
  color: #f5f9ff;
  font-size: var(--cb-title-cta);
  line-height: 1.02;
  text-wrap: balance;
}

.story-page--cinematic .story-cta p {
  max-width: 50ch;
  margin-top: 18px;
  color: rgba(205, 221, 242, 0.78);
  font-size: 17px;
  line-height: 1.55;
}

.story-page--cinematic .story-cta .story-btn--primary {
  min-width: 236px;
  min-height: 56px;
  justify-self: end;
  padding: 16px 22px !important;
  border-radius: 16px !important;
  background: #a8ddff !important;
  color: #07111f !important;
  box-shadow: 0 18px 38px rgba(74, 174, 238, 0.2) !important;
}

.story-page--cinematic .story-cta .story-btn--primary:hover {
  background: #c9ebff !important;
  transform: translateY(-2px);
}

.story-page--cinematic .story-cta .story-btn--primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (max-width: 1120px) {
  .story-page--cinematic .story-faq {
    grid-template-columns: minmax(240px, 0.72fr) minmax(420px, 1.28fr);
    gap: 42px;
  }

  .story-page--cinematic .story-cta {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-faq {
    padding: 76px 0 72px;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .story-page--cinematic .story-faq > header {
    position: relative;
    top: auto;
    max-width: none;
  }

  .story-page--cinematic .story-faq > header::after {
    margin-top: 22px;
  }

  .story-page--cinematic .story-faq h2 {
    max-width: 12ch;
    font-size: clamp(40px, 12vw, 54px);
  }

  .story-page--cinematic .story-faq summary {
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    gap: 10px;
    min-height: 70px;
    padding: 15px 15px;
    font-size: 15px;
  }

  .story-page--cinematic .story-faq summary svg {
    width: 32px;
    height: 32px;
    padding: 8px;
  }

  .story-page--cinematic .story-faq details p {
    padding: 0 18px 22px 53px;
    font-size: 14.5px;
  }

  .story-page--cinematic .story-cta {
    min-height: 410px;
    margin-bottom: 30px;
    padding: 38px 26px 30px;
    grid-template-columns: 1fr;
    gap: 38px;
    align-items: start;
    border-radius: 30px;
  }

  .story-page--cinematic .story-cta h2 {
    max-width: 12ch;
    font-size: clamp(36px, 10vw, 48px);
  }

  .story-page--cinematic .story-cta p {
    font-size: 15.5px;
  }

  .story-page--cinematic .story-cta .story-btn--primary {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic.story-page--logo-fly.is-logo-docked .story-logo-fly__img,
  .story-page--cinematic.story-page--logo-fly.is-logo-docked .story-logo-fly::after,
  .story-page--cinematic.story-page--logo-fly .brand--slot {
    animation: none !important;
  }

  .story-page--cinematic #main > .story-cta::before {
    transform: none !important;
    transition: none !important;
  }

  .story-page--cinematic .story-faq details,
  .story-page--cinematic .story-faq summary svg,
  .story-page--cinematic .story-cta .story-btn--primary {
    transition: none !important;
  }
}

/* ===== CINEMATIC HOMEPAGE POLISH ===== */
.story-page--cinematic .story-brand-lockup {
  width: min(100%, 34.5rem);
  min-height: 38px;
  margin: -8px 0 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.story-page--cinematic .story-brand-lockup__line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(145, 205, 247, 0.08) 28%,
    rgba(145, 205, 247, 0.32) 100%
  );
}

.story-page--cinematic.story-page--logo-fly .story-brand-lockup .story-logo-source {
  flex: 0 0 auto;
  width: 205px;
  height: 34px;
  margin: 0;
}

.story-page--cinematic.story-page--logo-fly .story-logo-fly__img {
  object-fit: contain;
  object-position: right center;
}

.story-page--cinematic.story-page--logo-fly .story-logo-fly {
  animation: none !important;
  opacity: 1;
  transform-origin: right center;
  transition: none;
}

.story-page--cinematic .story-stats {
  gap: 0;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(20, 38, 66, 0.94), rgba(7, 16, 31, 0.97));
  border: 1px solid rgba(145, 205, 247, 0.18);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.story-page--cinematic .story-stat {
  position: relative;
  padding: clamp(34px, 4vw, 52px) 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(106, 190, 255, 0.11), transparent 58%),
    rgba(8, 19, 37, 0.64);
  text-align: center;
  border-right: 1px solid rgba(145, 205, 247, 0.13);
}

.story-page--cinematic .story-stat:last-child {
  border-right: 0;
}

.story-page--cinematic .story-stat strong {
  display: block;
  color: #eaf7ff;
  background: linear-gradient(110deg, #f4fbff 4%, #8ed8ff 55%, #ac9cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.95;
  text-shadow: 0 0 32px rgba(101, 190, 255, 0.16);
}

.story-page--cinematic .story-stat span {
  display: block;
  margin-top: 13px;
  color: rgba(220, 233, 250, 0.82);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.story-page--cinematic .story-hero__trust {
  grid-template-columns: 0.82fr 0.82fr 0.82fr 1.54fr;
}

.story-page--cinematic .story-hero__trust > span b {
  line-height: 1.28;
}

.story-page--cinematic .story-hero__trust > span:last-child {
  justify-content: flex-start;
  padding-inline: 22px;
}

.story-page--cinematic .story-statement {
  padding-top: clamp(88px, 10vw, 144px);
}

.story-page--cinematic .story-statement__kicker,
.story-page--cinematic .story-eyebrow {
  color: rgba(158, 218, 255, 0.82);
}

.story-page--cinematic .story-capabilities__intro,
.story-page--cinematic .story-usecases__intro,
.story-page--cinematic .story-pricing > .story-shell > header,
.story-page--cinematic .story-partners > .story-shell > header {
  max-width: 760px;
}

.story-page--cinematic .story-cap,
.story-page--cinematic .story-use,
.story-page--cinematic .story-price,
.story-page--cinematic .story-partner,
.story-page--cinematic .story-faq details {
  background:
    linear-gradient(145deg, rgba(18, 34, 59, 0.76), rgba(7, 16, 31, 0.72));
  border: 1px solid rgba(145, 205, 247, 0.13);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.story-page--cinematic .story-cap:hover,
.story-page--cinematic .story-use:hover,
.story-page--cinematic .story-price:hover {
  transform: translateY(-5px);
  border-color: rgba(134, 211, 255, 0.34);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.24),
    0 0 42px rgba(83, 171, 235, 0.07);
}

.story-page--cinematic .story-cap::before {
  background: radial-gradient(circle, rgba(95, 190, 255, 0.16), transparent 68%);
}

.story-page--cinematic .story-cap__index,
.story-page--cinematic .story-price__price,
.story-page--cinematic .story-price__cta {
  color: #8fd8ff;
}

.story-page--cinematic .story-cap li,
.story-page--cinematic .story-use li,
.story-page--cinematic .story-price__price small {
  color: rgba(207, 221, 243, 0.74);
}

.story-page--cinematic .story-use__icon {
  background: rgba(111, 195, 255, 0.09);
  color: #93dcff;
  border: 1px solid rgba(145, 205, 247, 0.13);
}

.story-page--cinematic .story-use__arrow {
  background: rgba(255, 255, 255, 0.055);
  color: rgba(229, 240, 255, 0.86);
}

.story-page--cinematic .story-use:hover .story-use__arrow {
  background: #9edcff;
  color: #06101d;
}

.story-page--cinematic .story-proof__card {
  background:
    radial-gradient(circle at 88% 8%, rgba(105, 90, 232, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(18, 34, 59, 0.88), rgba(7, 16, 31, 0.9));
  border: 1px solid rgba(145, 205, 247, 0.14);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.26);
}

.story-page--cinematic .story-proof blockquote {
  color: rgba(244, 248, 255, 0.94);
}

.story-page--cinematic .story-proof figcaption {
  color: rgba(185, 204, 231, 0.72);
}

.story-page--cinematic .story-proof__metric {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(145, 205, 247, 0.1);
}

.story-page--cinematic .story-proof__metric strong {
  color: #8ed8ff;
}

.story-page--cinematic .story-proof__metric span {
  color: rgba(207, 221, 243, 0.76);
}

.story-page--cinematic .story-faq details[open] {
  border-color: rgba(145, 205, 247, 0.26);
  background:
    linear-gradient(145deg, rgba(22, 42, 70, 0.86), rgba(8, 19, 36, 0.84));
}

.story-page--cinematic .story-faq summary {
  color: rgba(242, 247, 255, 0.93);
}

.story-page--cinematic .story-faq details p {
  color: rgba(195, 211, 235, 0.76);
}

.story-page--cinematic .story-cta {
  border: 1px solid rgba(156, 215, 255, 0.18);
  background:
    radial-gradient(circle at 88% 10%, rgba(132, 210, 255, 0.2), transparent 34%),
    radial-gradient(circle at 16% 100%, rgba(99, 78, 236, 0.2), transparent 42%),
    linear-gradient(135deg, rgba(14, 31, 57, 0.98), rgba(13, 25, 51, 0.98));
  box-shadow:
    0 32px 78px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.story-page--cinematic .site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: var(--cb-shell);
  min-height: 0;
  margin: 0 auto 28px;
  padding: clamp(44px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(200px, 0.42fr) minmax(620px, 1.58fr);
  grid-template-rows: auto auto;
  gap: 46px clamp(48px, 6vw, 96px);
  align-items: start;
  color: rgba(196, 212, 235, 0.76);
  border: 1px solid rgba(145, 205, 247, 0.13);
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 8%, rgba(85, 164, 229, 0.13), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(89, 68, 220, 0.1), transparent 38%),
    linear-gradient(145deg, #091426, #050b16 72%);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.story-page--cinematic .site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -40%;
  pointer-events: none;
  opacity: 0.32;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%237ad4ff' stroke-opacity='.22' stroke-width='.7'%3E%3Cpath d='M45 1 89 26v51l-44 25L1 77V26Z'/%3E%3Cpath d='m135 53 44 25v51l-44 25-44-25V78Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: radial-gradient(ellipse 72% 90% at 12% 12%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 72% 90% at 12% 12%, #000, transparent 74%);
}

.story-page--cinematic .site-footer > * {
  position: relative;
  z-index: 1;
}

.story-page--cinematic .site-footer__logo {
  padding: 0;
}

.story-page--cinematic .site-footer__logo img.cb-logo-2026 {
  width: min(210px, 100%);
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(83, 175, 240, 0.14));
}

.story-page--cinematic .footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: clamp(28px, 4vw, 58px);
}

.story-page--cinematic .footer-columns h2 {
  margin: 0 0 18px;
  color: #f2f7ff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.story-page--cinematic .footer-columns a {
  display: block;
  width: fit-content;
  margin-top: 9px;
  color: rgba(196, 212, 235, 0.72);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.story-page--cinematic .footer-columns a:hover,
.story-page--cinematic .footer-columns a:focus-visible,
.story-page--cinematic .footer-legal a:hover,
.story-page--cinematic .footer-legal a:focus-visible {
  color: #9edcff;
  transform: translateX(2px);
  text-decoration: none;
}

.story-page--cinematic .footer-legal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px 32px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(145, 205, 247, 0.11);
}

.story-page--cinematic .footer-legal strong,
.story-page--cinematic .footer-legal p,
.story-page--cinematic .footer-legal small,
.story-page--cinematic .footer-legal a {
  margin: 0;
  color: rgba(190, 207, 231, 0.7);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
}

.story-page--cinematic .footer-legal strong {
  color: rgba(235, 243, 255, 0.88);
  font-weight: 800;
}

.story-page--cinematic .footer-legal p {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
}

@media (max-width: 1120px) {
  .story-page--cinematic .story-hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-page--cinematic .story-hero__trust > span:last-child {
    grid-column: 1 / -1;
    justify-content: center;
    text-align: center;
    border-top: 1px solid rgba(145, 205, 247, 0.11);
  }

  .story-page--cinematic .site-footer {
    grid-template-columns: 1fr;
  }

  .story-page--cinematic .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-page--cinematic .footer-legal {
    grid-column: 1;
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-brand-lockup {
    min-height: 30px;
    margin: 0 0 24px;
    gap: 13px;
  }

  .story-page--cinematic.story-page--logo-fly .story-brand-lockup .story-logo-source {
    width: 158px;
    height: 28px;
    margin: 0;
  }

  .story-page--cinematic .story-stat {
    border-right: 0;
    border-bottom: 1px solid rgba(145, 205, 247, 0.13);
  }

  .story-page--cinematic .story-stat:last-child {
    border-bottom: 0;
  }

  .story-page--cinematic .site-footer {
    width: min(calc(100% - 24px), 720px);
    margin-bottom: 12px;
    padding: 34px 24px 28px;
    border-radius: 26px;
    gap: 34px;
  }

  .story-page--cinematic .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px 22px;
  }

  .story-page--cinematic .footer-columns a {
    font-size: 12.5px;
  }
}

.story-page--cinematic #main > section:not(.story-hero),
.story-page--cinematic #main > .story-stats {
  --section-glow-x: 82%;
  --section-glow-y: 34%;
  --section-grid-x: 0px;
  --section-grid-y: 0px;
  --section-scroll-x: 0px;
  --section-scroll-y: 0px;
  --section-progress: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.story-page--cinematic #main > section:not(.story-hero) > *,
.story-page--cinematic #main > .story-stats > * {
  position: relative;
  z-index: 1;
}

.story-page--cinematic #main > section:not(.story-hero)::before,
.story-page--cinematic #main > .story-stats::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18% -8%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 38% 44% at var(--section-glow-x) var(--section-glow-y),
      rgba(65, 143, 224, 0.16),
      transparent 72%
    ),
    radial-gradient(
      ellipse 28% 36% at calc(100% - var(--section-glow-x)) 74%,
      rgba(81, 53, 255, 0.075),
      transparent 76%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%237ad4ff' stroke-opacity='.25' stroke-width='.75'%3E%3Cpath d='M45 1 89 26v51l-44 25L1 77V26Z'/%3E%3Cpath d='m135 53 44 25v51l-44 25-44-25V78Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position:
    center,
    center,
    var(--section-grid-x) var(--section-grid-y);
  background-repeat: no-repeat, no-repeat, repeat;
  opacity: 0.52;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  transform:
    translate3d(var(--section-scroll-x), var(--section-scroll-y), 0)
    scale(calc(1.025 + var(--section-progress) * 0.018));
  transition: transform 120ms linear;
  will-change: transform, background-position;
}

.story-page--cinematic #main > section:not(.story-hero)::after,
.story-page--cinematic #main > .story-stats::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(60vw, 860px);
  aspect-ratio: 1.8;
  left: calc(var(--section-glow-x) - 30vw);
  top: 4%;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(90, 180, 255, 0.045);
  filter: blur(70px);
  opacity: 0.7;
  transform:
    translate3d(
      var(--section-scroll-y),
      var(--section-scroll-x),
      0
    )
    scale(calc(0.98 + var(--section-progress) * 0.05));
  transition: transform 160ms linear;
  will-change: transform;
}

.story-page--cinematic #main > section:nth-of-type(even),
.story-page--cinematic #main > .story-stats:nth-of-type(even) {
  --section-glow-x: 18%;
  --section-glow-y: 62%;
}

.story-page--cinematic #main > section:nth-of-type(3n),
.story-page--cinematic #main > .story-stats:nth-of-type(3n) {
  --section-glow-x: 68%;
  --section-glow-y: 72%;
}

.story-page--cinematic .story-band::before {
  opacity: 0.44 !important;
}

.story-page--cinematic .story-hero-pin::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -190px;
  height: 380px;
  pointer-events: none;
  opacity: 0.4;
  background:
    radial-gradient(ellipse 54% 80% at 68% 0%, rgba(65, 143, 224, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 70% at 26% 18%, rgba(81, 53, 255, 0.09), transparent 74%);
  filter: blur(24px);
}

.story-page--cinematic #main > .story-logos::before {
  inset: -72% -8% -42%;
  opacity: 0.8;
  background:
    radial-gradient(
      ellipse 58% 82% at 68% 0%,
      rgba(72, 160, 245, 0.23),
      rgba(45, 95, 185, 0.09) 44%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 38% 70% at 22% 18%,
      rgba(81, 53, 255, 0.1),
      transparent 72%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%237ad4ff' stroke-opacity='.34' stroke-width='.8'%3E%3Cpath d='M45 1 89 26v51l-44 25L1 77V26Z'/%3E%3Cpath d='m135 53 44 25v51l-44 25-44-25V78Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position:
    center top,
    center,
    var(--section-grid-x) var(--section-grid-y);
  background-repeat: no-repeat, no-repeat, repeat;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.82) 22%,
    #000 46%,
    rgba(0, 0, 0, 0.78) 68%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.82) 22%,
    #000 46%,
    rgba(0, 0, 0, 0.78) 68%,
    transparent 100%
  );
}

.story-page--cinematic #main > .story-logos {
  z-index: 2;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.story-page--cinematic #main > .story-logos::after {
  top: -28%;
  opacity: 0.92;
  background: rgba(90, 180, 255, 0.09);
  mask-image: radial-gradient(ellipse at center, #000 8%, rgba(0, 0, 0, 0.76) 52%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, rgba(0, 0, 0, 0.76) 52%, transparent 78%);
}

@media (max-width: 760px) {
  .story-page--cinematic #main > section:not(.story-hero)::before,
  .story-page--cinematic #main > .story-stats::before {
    inset: -10%;
    opacity: 0.28;
    background-size: auto, auto, 150px 130px;
  }

  .story-page--cinematic #main > section:not(.story-hero)::after,
  .story-page--cinematic #main > .story-stats::after {
    opacity: 0.42;
    filter: blur(50px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic #main > section:not(.story-hero)::before,
  .story-page--cinematic #main > section:not(.story-hero)::after,
  .story-page--cinematic #main > .story-stats::before,
  .story-page--cinematic #main > .story-stats::after {
    transition: none !important;
    transform: none !important;
  }
}

/* ===== HOMEPAGE HERO — screenshot reference 2026-07-17 ===== */
.story-page--cinematic {
  background: #050b18;
}

.story-page--cinematic .story-hero__atmosphere {
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse 38% 42% at 25% 56%, rgba(18, 94, 146, 0.22), transparent 72%),
    radial-gradient(ellipse 32% 34% at 67% 45%, rgba(29, 75, 139, 0.1), transparent 74%),
    linear-gradient(180deg, rgba(4, 10, 23, 0.08), rgba(3, 9, 20, 0.52));
}

.story-page--cinematic .story-hero__grid {
  inset: 0;
  opacity: 0.065;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='520' viewBox='0 0 620 520'%3E%3Cg fill='none' stroke='%237aaed8' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M0 116 54 157v176L0 374M263 0v82l-74 56v133l74 56v193M620 113l-65 49v169l65 48M455 0v132l-66 49v150l66 52v137'/%3E%3Cpath d='M54 157 147 86l94 71v176l-94 70-93-70M455 132l83-62 82 61M455 383l83 62 82-62'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 620px 520px;
  mask-image: none;
  -webkit-mask-image: none;
}

.story-page--cinematic .story-back-card__header {
  position: relative;
  z-index: 2;
  display: block;
}

.story-page--cinematic .story-orbit__status .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.story-page--cinematic .story-back-card__header > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: rgba(108, 187, 235, 0.55);
}

.story-page--cinematic .story-back-card__header svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-back-card__header h3 {
  margin: 14px 0 0;
  color: rgba(194, 220, 239, 0.7);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.story-page--cinematic .story-back-card__support,
.story-page--cinematic .story-back-card__automation,
.story-page--cinematic .story-back-card__operations {
  position: relative;
  z-index: 2;
  color: rgba(91, 157, 202, 0.28);
}

.story-page--cinematic .story-back-card__divider {
  display: block;
  height: 1px;
  margin: 28px 0 22px;
  background: rgba(107, 171, 216, 0.16);
}

.story-page--cinematic .story-back-card__support {
  display: grid;
  grid-template-columns: 9px 84px;
  gap: 22px 12px;
  align-items: center;
}

.story-page--cinematic .story-back-card__support .story-back-card__divider {
  grid-column: 1 / -1;
}

.story-page--cinematic .story-back-card__support i,
.story-page--cinematic .story-back-card__automation i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(91, 165, 216, 0.34);
}

.story-page--cinematic .story-back-card__support b,
.story-page--cinematic .story-back-card__automation b {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(82, 149, 195, 0.17);
}

.story-page--cinematic .story-back-card__support b:nth-of-type(2) {
  width: 72%;
}

.story-page--cinematic .story-back-card__support b:nth-of-type(3) {
  width: 86%;
}

.story-page--cinematic .story-back-card__automation {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.story-page--cinematic .story-back-card__donut {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    rgba(81, 158, 207, 0.42) 0 29%,
    rgba(50, 103, 145, 0.24) 29% 62%,
    rgba(30, 71, 106, 0.3) 62% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 48%);
  mask: radial-gradient(circle, transparent 0 46%, #000 48%);
}

.story-page--cinematic .story-back-card__automation > div {
  display: grid;
  grid-template-columns: 8px 70px;
  gap: 13px 9px;
  align-items: center;
}

.story-page--cinematic .story-back-card__operations {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 180px 84px;
  gap: 22px;
}

.story-page--cinematic .story-back-card__operations > svg {
  width: 180px;
  height: 116px;
  fill: none;
  stroke: rgba(86, 178, 230, 0.62);
  stroke-width: 2;
}

.story-page--cinematic .story-back-card__operations .story-back-card__axis {
  stroke: rgba(83, 143, 183, 0.13);
  stroke-width: 1;
}

.story-page--cinematic .story-back-card__operations > div {
  padding-top: 44px;
  display: grid;
  grid-template-columns: 8px 64px;
  gap: 16px 8px;
  align-items: center;
}

.story-page--cinematic .story-back-card__operations i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(97, 166, 211, 0.42);
}

.story-page--cinematic .story-back-card__operations b {
  height: 8px;
  border-radius: 99px;
  background: rgba(77, 142, 190, 0.18);
}

@media (min-width: 1121px) {
  .story-page--cinematic {
    --header-h: 100px;
  }

  /* Header 100px aligné sur la topbar produit Deskio. */
  .story-page--cinematic .site-header--cinematic {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 100px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.25s ease, backdrop-filter 0.25s ease;
  }

  .story-page--cinematic .site-header--cinematic.is-scrolled {
    background: rgba(5, 10, 20, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /* La couche mega vit hors du <header> : on l'ancre sous la barre sticky
     (sinon son top:100% se résout sur le viewport et le panneau sort de l'écran). */
  .story-page--cinematic .mega-layer {
    position: fixed;
    top: var(--header-h);
    padding-top: 0;
  }

  .story-page--cinematic .site-header__inner {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100px;
    margin: 0;
    padding: 0 32px;
    grid-template-columns: auto auto 1fr;
    gap: clamp(18px, 2vw, 34px);
    align-items: center;
  }

  .story-page--cinematic .brand--cinematic,
  .story-page--cinematic .header-actions {
    position: relative;
    z-index: 1;
  }

  .story-page--cinematic .brand--cinematic {
    width: clamp(132px, 9.45vw, 158px);
    height: 48px;
  }

  .story-page--cinematic .brand--cinematic .brand__logo-img,
  .story-page--cinematic .brand--cinematic img.cb-logo-2026 {
    width: clamp(132px, 9.45vw, 158px);
    height: auto;
    object-fit: contain;
    object-position: left center;
    transform: none;
    filter: brightness(0) invert(1);
  }

  .story-page--cinematic .site-nav {
    justify-self: start;
    min-height: 48px;
    justify-content: center;
    gap: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .story-page--cinematic .site-nav a,
  .story-page--cinematic .site-nav .nav-trigger,
  .story-page--cinematic .login-link {
    color: rgba(226, 235, 250, 0.92);
    font-size: 15px;
    font-weight: 500;
  }

  .story-page--cinematic .site-nav a,
  .story-page--cinematic .site-nav .nav-trigger {
    padding: 12px 2px;
    border-radius: 7px;
  }

  .story-page--cinematic .nav-trigger svg {
    display: none;
  }

  .story-page--cinematic .header-actions {
    grid-column: 3;
    height: 48px;
    justify-self: end;
    gap: 18px;
    padding: 0;
  }

  .story-page--cinematic .language-select select {
    width: 74px;
    min-height: 42px;
    padding-left: 14px;
    color: rgba(234, 241, 252, 0.94);
    border: 1px solid rgba(148, 178, 213, 0.3);
    border-radius: 8px;
    background: rgba(6, 14, 28, 0.48);
    font-size: 14px;
    font-weight: 400;
  }

  .story-page--cinematic .language-select::after {
    right: 14px;
    border-color: rgba(207, 220, 239, 0.8);
  }

  .story-page--cinematic .header-cta {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 9px !important;
    background: #b9dcfb !important;
    box-shadow: 0 7px 24px rgba(76, 153, 218, 0.17) !important;
    font-size: 15px;
    font-weight: 600;
  }
}

/* Comme Deskio, le header passe en navigation compacte sous 1321px. */
@media (min-width: 1121px) and (max-width: 1320px) {
  .story-page--cinematic .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(18px, 2vw, 26px);
    padding: 0 var(--cb-topbar-pad-x);
  }

  .story-page--cinematic .brand--cinematic {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .story-page--cinematic .header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: clamp(14px, 1.6vw, 22px);
  }

  .story-page--cinematic .menu-toggle {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    width: 111px;
    min-width: 111px;
    height: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid rgba(146, 176, 216, 0.26);
    border-radius: 12px;
    color: rgba(226, 235, 250, 0.92);
    background: rgba(10, 18, 32, 0.42);
    font: inherit;
    cursor: pointer;
  }

  .story-page--cinematic .menu-toggle span {
    position: absolute;
    left: 19px;
    display: block;
    width: 16px;
    height: 2px;
    margin: 0;
    border-radius: 99px;
    background: currentColor;
    transition: top 0.2s ease, opacity 0.16s ease, transform 0.2s ease;
  }

  .story-page--cinematic .menu-toggle span:nth-child(1) { top: 17px; }
  .story-page--cinematic .menu-toggle span:nth-child(2) { top: 23px; }
  .story-page--cinematic .menu-toggle span:nth-child(3) { top: 29px; }

  .story-page--cinematic .menu-toggle b {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
  }

  .story-page--cinematic .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    top: 23px;
    transform: rotate(45deg);
  }

  .story-page--cinematic .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .story-page--cinematic .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 23px;
    transform: rotate(-45deg);
  }

  .story-page--cinematic .site-nav {
    position: fixed;
    inset: 100px 0 auto;
    z-index: 170;
    display: none;
    grid-area: auto;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-height: calc(100svh - 100px);
    gap: 0;
    padding: 12px var(--cb-topbar-pad-x) 20px;
    border: 0;
    border-top: 1px solid rgba(146, 176, 216, 0.14);
    border-radius: 0;
    background: rgba(5, 11, 24, 0.98);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.26);
    overflow-x: hidden;
    overflow-y: auto;
    transform: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .story-page--cinematic .site-nav.is-open {
    display: flex;
  }

  .story-page--cinematic .site-nav a,
  .story-page--cinematic .site-nav .nav-trigger {
    width: 100%;
    min-height: 50px;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(146, 176, 216, 0.14);
    border-radius: 0;
    background: transparent;
  }

  .story-page--cinematic .site-nav .nav-trigger svg {
    display: block;
  }

  .story-page--cinematic .login-link {
    display: inline;
  }

  .story-page--cinematic .site-header--cinematic.has-mobile-menu-open {
    background: rgba(5, 11, 24, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .story-page--cinematic .mega-layer {
    inset: 100px 0 auto;
    width: 100%;
    max-width: none;
    transform: none;
  }
}

/* ≥1321px : trois rails équilibrés, comme la topbar Deskio. */
@media (min-width: 1321px) {
  .story-page--cinematic .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: clamp(20px, 1.8vw, 30px);
    padding: 0 var(--cb-topbar-pad-x);
  }

  .story-page--cinematic .brand--cinematic {
    grid-column: 1;
    margin-left: 0;
    justify-self: center;
  }

  .story-page--cinematic .site-nav {
    position: static;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    min-width: 0;
    justify-self: center;
    gap: clamp(22px, 1.75vw, 36px);
    transform: none;
  }

  .story-page--cinematic .site-nav a,
  .story-page--cinematic .site-nav .nav-trigger,
  .story-page--cinematic .login-link {
    font-size: 16px;
  }

  .story-page--cinematic .login-link {
    margin-left: 10px;
  }

  .story-page--cinematic .header-actions {
    grid-column: 3;
    gap: 20px;
  }

  .story-page--cinematic .language-select select {
    width: 79px;
    min-height: 46px;
  }

  .story-page--cinematic .header-cta {
    min-height: 48px;
    flex-shrink: 0;
    padding: 0 18px;
    font-size: 15px;
    white-space: nowrap;
  }
}

@media (min-width: 1121px) {
  /* Hero ré-épinglé : les quatre cartes circulent dans un deck continu. */
  .story-page--cinematic .story-hero-pin {
    height: 390vh;
  }

  .story-page--cinematic .story-hero-pin .story-hero {
    position: sticky;
    top: 100px;
    height: calc(100svh - 100px);
    min-height: 820px;
    padding: 36px 0 22px;
    justify-content: flex-start;
    overflow: hidden;
  }

  .story-page--cinematic .story-hero__inner {
    width: calc(100% - 120px);
    max-width: 1537px;
    height: auto;
    min-height: 630px;
    flex: 1 1 auto;
    margin: 0 auto;
    padding: 0;
    grid-template-columns: 800px minmax(0, 1fr);
    gap: 80px;
    align-items: start !important;
  }

  .story-page--cinematic.story-page--logo-fly .story-logo-source {
    margin-left: auto;
  }

  .story-page--cinematic .story-orbit {
    width: 800px;
    min-height: 630px;
    height: 630px;
    display: block;
    perspective: 1000px;
  }

  .story-page--cinematic .story-orbit__stack {
    position: relative;
    width: 800px;
    max-width: none;
    height: 630px;
    min-height: 630px;
    margin: 0;
    /* flat + perspective locale : l'empilement suit le z-index (la carte Murphy
       doit passer devant la carte produits aux étapes 2-3 du scroll). */
    transform-style: flat;
    perspective: 1000px;
    animation: reference-deck-float 8s ease-in-out infinite !important;
  }

  .story-page--cinematic .story-orbit__card,
  .story-page--cinematic .story-orbit__card--front,
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    --deck-tilt-x: 0deg;
    --deck-tilt-y: 0deg;
    position: absolute;
    top: 32px;
    left: 333px;
    width: 467px;
    height: 581px;
    margin: 0;
    padding: 48px 28px 30px;
    opacity: var(--deck-opacity, 1);
    z-index: var(--deck-layer, 1);
    filter: blur(var(--deck-blur, 0px));
    border: 1px solid rgba(139, 194, 232, 0.42);
    border-radius: 17px;
    color: #e8effb;
    background:
      radial-gradient(circle at var(--deck-light-x) var(--deck-light-y), rgba(91, 181, 230, 0.16), transparent 46%),
      linear-gradient(145deg, rgba(24, 48, 73, 0.94), rgba(6, 17, 32, 0.97));
    box-shadow:
      -5px 12px 30px rgba(7, 96, 145, 0.13),
      0 35px 70px rgba(0, 0, 0, 0.36),
      inset 4px 0 12px rgba(53, 180, 226, 0.14),
      inset 0 1px 0 rgba(231, 248, 255, 0.09);
    backdrop-filter: blur(19px) saturate(1.05);
    -webkit-backdrop-filter: blur(19px) saturate(1.05);
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity, filter;
    contain: layout paint style;
    transform:
      translate3d(var(--deck-x, 0px), var(--deck-y, 0px), var(--deck-depth, 0px))
      rotateX(var(--deck-tilt-x))
      rotateY(calc(var(--deck-rotate-y, 6deg) + var(--deck-tilt-y)))
      scale(var(--deck-scale, 1));
    transition: background-position 160ms ease-out;
  }

  .story-page--cinematic .story-orbit__card--d {
    --deck-x: -426px;
    --deck-y: 30px;
    --deck-depth: -280px;
    --deck-rotate-y: 14deg;
    --deck-opacity: 0.66;
    --deck-layer: 1;
  }

  .story-page--cinematic .story-orbit__card--c {
    --deck-x: -284px;
    --deck-y: 3px;
    --deck-depth: -220px;
    --deck-rotate-y: 12deg;
    --deck-opacity: 0.78;
    --deck-layer: 2;
  }

  .story-page--cinematic .story-orbit__card--b {
    --deck-x: -142px;
    --deck-y: -15px;
    --deck-depth: -150px;
    --deck-rotate-y: 10deg;
    --deck-opacity: 0.9;
    --deck-layer: 3;
  }

  .story-page--cinematic .story-orbit__card--front {
    --deck-x: 0px;
    --deck-y: 0px;
    --deck-depth: 0px;
    --deck-rotate-y: 6deg;
    --deck-opacity: 1;
    --deck-layer: 4;
    padding: 47px 27px 34px 45px;
    pointer-events: auto;
    background:
      radial-gradient(circle at var(--deck-light-x) var(--deck-light-y), rgba(91, 181, 230, 0.17), transparent 45%),
      linear-gradient(145deg, rgba(20, 43, 68, 0.98), rgba(5, 15, 29, 0.985));
    box-shadow:
      -7px 14px 34px rgba(9, 113, 164, 0.17),
      0 42px 85px rgba(0, 0, 0, 0.48),
      inset 5px 0 14px rgba(67, 194, 232, 0.16),
      inset 0 1px 0 rgba(237, 250, 255, 0.12);
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__title {
    margin: 0 0 16px;
    color: rgba(241, 246, 255, 0.96);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.15;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__list {
    display: grid;
    gap: 8px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__list > li.story-orbit__item--linked {
    display: block;
    min-height: 64px;
    padding: 0;
    border: 1px solid rgba(122, 175, 216, 0.26);
    border-radius: 11px;
    background: rgba(3, 12, 25, 0.29);
  }

  .story-page--cinematic .story-orbit__item--linked > a {
    min-height: 62px;
    grid-template-columns: 44px minmax(0, 1fr) 12px;
    gap: 14px;
    padding: 6px 14px;
    border-radius: 10px;
  }

  .story-page--cinematic .story-orbit__item--linked > a::after {
    display: none;
  }

  .story-page--cinematic .story-orbit__item--linked > a:hover,
  .story-page--cinematic .story-orbit__item--linked > a:focus-visible {
    background: rgba(94, 185, 235, 0.065);
    box-shadow: inset 2px 0 0 rgba(107, 207, 247, 0.45);
    transform: translateX(1px);
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__icon {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    color: #728eff;
    background: transparent;
    box-shadow: none;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__icon svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(91, 127, 255, 0.24));
  }

  .story-page--cinematic .story-orbit__meta strong {
    color: rgba(246, 249, 255, 0.96);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.15;
  }

  .story-page--cinematic .story-orbit__meta small {
    margin-top: 5px;
    color: rgba(183, 199, 222, 0.72);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.2;
  }

  .story-page--cinematic .story-orbit__status {
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
  }

  .story-page--cinematic .story-orbit__status .story-orbit__dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #63e64d;
    box-shadow: 0 0 9px rgba(98, 235, 77, 0.34);
  }

  .story-page--cinematic .story-orbit__status .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .story-page--cinematic .story-orbit__item--linked > a:hover .story-orbit__dot,
  .story-page--cinematic .story-orbit__item--linked > a:focus-visible .story-orbit__dot {
    opacity: 1;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__prompt {
    min-height: 64px;
    margin-top: 16px;
    padding: 0 23px;
    border: 1px solid rgba(122, 175, 216, 0.23);
    border-radius: 11px;
    color: rgba(204, 219, 241, 0.9);
    background: rgba(3, 12, 25, 0.3);
    font-size: 15px;
    font-weight: 400;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__prompt svg {
    width: 23px;
    height: 23px;
    stroke: rgba(205, 226, 250, 0.92);
    stroke-width: 1.7;
  }

  .story-page--cinematic .story-hero__copy {
    width: 100%;
    max-width: 650px;
    margin-top: 53px;
    padding: 0;
  }

  .story-page--cinematic .story-hero__eyebrow {
    display: block;
    margin: 0 0 32px;
    color: rgba(211, 221, 237, 0.88);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
  }

  .story-page--cinematic .story-hero h1 {
    max-width: none;
    color: #cbd7eb;
    font-size: clamp(76px, 5.46vw, 90.5px);
    font-weight: 300;
    letter-spacing: -0.052em;
    line-height: 1.06;
    text-wrap: nowrap;
  }

  .story-page--cinematic .story-title__line {
    display: block;
    white-space: nowrap;
  }

  .story-page--cinematic .story-hero h1 em {
    font-weight: 300;
    background: linear-gradient(90deg, #567eff 0%, #42bbdf 52%, #67e0b9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .story-page--cinematic .story-hero__lead {
    max-width: none;
    margin: 37px 0 0;
    color: rgba(203, 215, 234, 0.78);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -0.018em;
    line-height: 1.52;
    text-wrap: balance;
  }

  .story-page--cinematic .story-hero__lead span {
    display: inline;
  }

  .story-page--cinematic .story-hero__actions {
    margin-top: 35px;
    gap: 48px;
  }

  .story-page--cinematic .story-hero__actions .story-btn--primary {
    min-width: 263px;
    min-height: 60px;
    padding: 0 28px !important;
    border-radius: 9px !important;
    background: #b9dcfb !important;
    box-shadow: 0 7px 24px rgba(76, 153, 218, 0.17) !important;
    font-size: 16px;
    font-weight: 600;
  }

  .story-page--cinematic .story-hero__actions .story-btn--ghost {
    min-height: 60px;
    color: #b9d6ef !important;
    font-size: 16px;
    font-weight: 500;
  }

  .story-page--cinematic .story-hero__actions .story-btn--ghost svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.6;
  }

  .story-page--cinematic .story-hero__trust {
    width: 930px;
    flex: 0 0 auto;
    margin: 24px auto 0;
    padding: 0;
    grid-template-columns: 289px 217px 212px 212px;
    border: 0;
  }

  .story-page--cinematic .story-hero__trust > span,
  .story-page--cinematic .story-hero__trust > span:last-child {
    min-height: 48px;
    justify-content: center;
    gap: 16px;
    padding: 0 24px;
    color: rgba(164, 180, 205, 0.72);
    border-right: 1px solid rgba(135, 162, 194, 0.24);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .story-page--cinematic .story-hero__trust > span:last-child {
    border-right: 0;
  }

  .story-page--cinematic .story-hero__trust > span:nth-child(1) {
    justify-content: flex-start;
    padding-inline: 14px;
  }

  .story-page--cinematic .story-hero__trust > span:nth-child(2) {
    justify-content: flex-start;
    padding-inline: 39px;
  }

  .story-page--cinematic .story-hero__trust > span:nth-child(3) {
    justify-content: flex-start;
    padding-inline: 44px;
  }

  .story-page--cinematic .story-hero__trust > span:nth-child(4) {
    justify-content: flex-start;
    padding-inline: 42px;
  }

  .story-page--cinematic .story-hero__trust svg {
    width: 32px;
    height: 32px;
    stroke: rgba(134, 160, 192, 0.76);
    stroke-width: 1.6;
  }
}

@keyframes reference-deck-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

/* Le mouvement spatial appartient exclusivement au moteur de deck : aucune
   animation CSS concurrente ne vient désynchroniser le scroll ou le tilt. */
@media (min-width: 1121px) {
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    animation: none;
    translate: none;
  }
}

@keyframes reference-dot-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.story-page--cinematic .story-back-card__support i,
.story-page--cinematic .story-back-card__automation i {
  animation: reference-dot-pulse 2.6s ease-in-out infinite;
}

.story-page--cinematic .story-back-card__support i:nth-of-type(2),
.story-page--cinematic .story-back-card__automation i:nth-of-type(2) {
  animation-delay: -0.9s;
}

.story-page--cinematic .story-back-card__support i:nth-of-type(3),
.story-page--cinematic .story-back-card__automation i:nth-of-type(3) {
  animation-delay: -1.7s;
}

@keyframes reference-donut-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.story-page--cinematic .story-back-card__donut {
  animation: reference-donut-spin 16s linear infinite;
}

@keyframes reference-chart-draw {
  0% { stroke-dashoffset: 260; }
  55%, 100% { stroke-dashoffset: 0; }
}

.story-page--cinematic .story-back-card__operations > svg path:not(.story-back-card__axis) {
  stroke-dasharray: 260;
  animation: reference-chart-draw 7s ease-in-out infinite;
}

@keyframes reference-status-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(98, 235, 77, 0.28); }
  50% { box-shadow: 0 0 13px rgba(98, 235, 77, 0.62); }
}

.story-page--cinematic .story-orbit__status .story-orbit__dot {
  animation: reference-status-pulse 2.8s ease-in-out infinite;
}

@keyframes story-placeholder-flow {
  from { background-position: 160% 0; }
  to { background-position: -160% 0; }
}

@media (min-width: 1121px) {
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    padding: 48px 38px 36px;
  }

  .story-page--cinematic .story-orbit__card--c::after,
  .story-page--cinematic .story-orbit__card--d::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: -42%;
    bottom: -42%;
    left: -34%;
    width: 32%;
    opacity: 0;
    background: linear-gradient(100deg, transparent, rgba(191, 229, 255, 0.11), transparent);
    transform: translateX(-180%) rotate(8deg);
    pointer-events: none;
  }

  .story-page--cinematic .story-orbit__card--c.is-deck-active::after,
  .story-page--cinematic .story-orbit__card--d.is-deck-active::after {
    animation: story-orbit-sheen 7.5s ease-in-out infinite;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__header,
  .story-page--cinematic .story-orbit__card--d .story-back-card__header {
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0.58;
    translate: 0 10px;
    transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1), translate 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__header > span,
  .story-page--cinematic .story-orbit__card--d .story-back-card__header > span {
    width: 54px;
    height: 54px;
    color: rgba(108, 196, 244, 0.88);
    filter: drop-shadow(0 0 12px rgba(91, 181, 230, 0.2));
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__header h3,
  .story-page--cinematic .story-orbit__card--d .story-back-card__header h3 {
    margin: 0;
    color: rgba(235, 244, 255, 0.92);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__automation,
  .story-page--cinematic .story-orbit__card--d .story-back-card__support {
    opacity: 0.34;
    translate: 0 24px;
    transition: opacity 0.7s 0.08s cubic-bezier(0.16, 1, 0.3, 1), translate 0.7s 0.08s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__header,
  .story-page--cinematic .story-orbit__card--d.is-deck-active .story-back-card__header,
  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__automation,
  .story-page--cinematic .story-orbit__card--d.is-deck-active .story-back-card__support {
    opacity: 1;
    translate: 0 0;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__automation {
    min-height: 330px;
    margin-top: 62px;
    gap: 38px;
    padding: 34px 26px;
    border: 1px solid rgba(122, 175, 216, 0.13);
    border-radius: 18px;
    background:
      radial-gradient(circle at 22% 50%, rgba(69, 164, 226, 0.1), transparent 38%),
      rgba(3, 13, 27, 0.28);
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__donut {
    width: 132px;
    height: 132px;
    box-shadow: 0 0 34px rgba(63, 154, 215, 0.1);
    animation: none;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__automation > div {
    flex: 1;
    grid-template-columns: 9px minmax(80px, 1fr);
    gap: 25px 13px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__support {
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 29px 14px;
    margin-top: 38px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__divider {
    margin: 16px 0 8px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__support b,
  .story-page--cinematic .story-orbit__card--c .story-back-card__automation b {
    width: 100%;
    height: 11px;
    background:
      linear-gradient(90deg, rgba(73, 139, 188, 0.13) 0%, rgba(112, 194, 240, 0.32) 48%, rgba(73, 139, 188, 0.13) 100%);
    background-size: 220% 100%;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__support::after {
    content: "";
    grid-column: 1 / -1;
    height: 188px;
    margin-top: 4px;
    border: 1px solid rgba(122, 175, 216, 0.1);
    border-radius: 18px;
    background:
      linear-gradient(rgba(145, 205, 247, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(145, 205, 247, 0.035) 1px, transparent 1px),
      radial-gradient(circle at 22% 36%, rgba(76, 170, 224, 0.13), transparent 28%),
      rgba(3, 13, 27, 0.28);
    background-size: 32px 32px, 32px 32px, auto, auto;
  }

  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__donut {
    animation: reference-donut-spin 13s linear infinite;
  }

  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__automation b,
  .story-page--cinematic .story-orbit__card--d.is-deck-active .story-back-card__support b {
    animation: story-placeholder-flow 2.8s linear infinite;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__automation i,
  .story-page--cinematic .story-orbit__card--d .story-back-card__support i {
    animation: none;
  }

  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__automation i,
  .story-page--cinematic .story-orbit__card--d.is-deck-active .story-back-card__support i {
    animation: reference-dot-pulse 2.6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d,
  .story-page--cinematic .story-back-card__support i,
  .story-page--cinematic .story-back-card__automation i,
  .story-page--cinematic .story-back-card__donut,
  .story-page--cinematic .story-back-card__operations > svg path:not(.story-back-card__axis),
  .story-page--cinematic .story-orbit__status .story-orbit__dot,
  .story-page--cinematic .story-orbit__card--c::after,
  .story-page--cinematic .story-orbit__card--d::after,
  .story-page--cinematic .story-orbit__card--c .story-back-card__automation b,
  .story-page--cinematic .story-orbit__card--d .story-back-card__support b {
    animation: none !important;
  }
}

/* ===== Carte Murphy — 2e carte du deck, révélée en 3 étapes au scroll ===== */
.story-orbit__card--murphy {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}

.story-murphy-card__portrait {
  position: absolute;
  z-index: 0;
  top: 4px;
  right: 0;
  width: 278px;
  height: 410px;
  margin: 0;
  overflow: hidden;
  opacity: 0.2;
  filter: saturate(0.82) contrast(1.04);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 65% at 62% 38%, #000 0 48%, rgba(0, 0, 0, 0.78) 63%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 65% at 62% 38%, #000 0 48%, rgba(0, 0, 0, 0.78) 63%, transparent 100%);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1120px) {
  .story-page--cinematic .story-orbit__card--c .story-back-card__header,
  .story-page--cinematic .story-orbit__card--d .story-back-card__header,
  .story-page--cinematic .story-orbit__card--c .story-back-card__automation,
  .story-page--cinematic .story-orbit__card--d .story-back-card__support {
    opacity: 0.58;
    translate: 0 12px;
    transition: opacity 0.58s cubic-bezier(0.16, 1, 0.3, 1), translate 0.58s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__header,
  .story-page--cinematic .story-orbit__card--d.is-deck-active .story-back-card__header,
  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__automation,
  .story-page--cinematic .story-orbit__card--d.is-deck-active .story-back-card__support {
    opacity: 1;
    translate: 0 0;
  }

  .story-page--cinematic .story-orbit__card--c.is-deck-active .story-back-card__donut {
    animation: reference-donut-spin 13s linear infinite;
  }
}

@media (max-width: 1120px) and (min-width: 761px) {
  .story-page--cinematic .story-orbit {
    display: block;
    width: 100%;
    min-height: 620px;
  }

  .story-page--cinematic .story-orbit__stack {
    display: flex;
    width: calc(100vw - 32px);
    max-width: none;
    height: 620px;
    min-height: 620px;
    margin-inline: calc(50% - 50vw + 16px);
    padding: 8px max(28px, calc((100vw - min(62vw, 467px)) / 2)) 14px;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(28px, calc((100vw - min(62vw, 467px)) / 2));
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    transform: none;
  }

  .story-page--cinematic .story-orbit__stack::-webkit-scrollbar {
    display: none;
  }

  .story-page--cinematic .story-orbit__card,
  .story-page--cinematic .story-orbit__card--front,
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 min(62vw, 467px);
    width: min(62vw, 467px);
    height: 581px;
    opacity: 1;
    z-index: auto;
    filter: none;
    transform: none;
    pointer-events: auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .story-page--cinematic .story-orbit__card--front { order: 1; }
  .story-page--cinematic .story-orbit__card--b { order: 2; }
  .story-page--cinematic .story-orbit__card--c { order: 3; }
  .story-page--cinematic .story-orbit__card--d { order: 4; }
}

.story-murphy-card__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 42%;
  transform: scale(1.035);
  transform-origin: 58% 42%;
  will-change: transform;
}

.story-orbit__card--murphy > :not(.story-murphy-card__portrait) {
  position: relative;
  z-index: 2;
}

.story-orbit__card--murphy::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 17, 32, 0.98) 0%, rgba(6, 17, 32, 0.82) 50%, rgba(6, 17, 32, 0.12) 100%),
    linear-gradient(0deg, rgba(6, 17, 32, 0.97) 0%, transparent 46%);
  pointer-events: none;
}

.story-murphy-card__header { display: flex; align-items: center; gap: 13px; }

.story-murphy-card__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  background: linear-gradient(145deg, #2f7bff, #123a8f);
  color: #eaf3ff;
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(47, 123, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.story-murphy-card__header h3 { display: grid; gap: 2px; margin: 0; }
.story-murphy-card__header strong { color: #f2f7ff; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.story-murphy-card__header small { color: rgba(155, 175, 214, 0.85); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

.story-murphy-card__tagline { margin: 13px 0 0; color: rgba(178, 198, 230, 0.88); font-size: 12.5px; font-weight: 500; line-height: 1.5; }

.story-murphy-card__points { display: grid; gap: 12px; margin: 15px 0 0; padding: 0; list-style: none; }
.story-murphy-card__points li { display: flex; align-items: flex-start; gap: 11px; color: rgba(214, 228, 248, 0.92); font-size: 13.5px; font-weight: 500; }
.story-murphy-card__points i { width: 8px; height: 8px; flex: none; margin-top: 5px; border-radius: 50%; background: linear-gradient(135deg, #5aa0ff, #59d1f0); box-shadow: 0 0 8px rgba(90, 160, 255, 0.5); }
.story-murphy-card__points span { display: grid; gap: 1px; min-width: 0; }
.story-murphy-card__points b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.story-murphy-card__points small { color: rgba(155, 175, 214, 0.82); font-size: 11.5px; font-weight: 500; line-height: 1.4; }

.story-murphy-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 15px 0 0; }
.story-murphy-card__stats > div { display: grid; gap: 1px; padding: 8px 11px 7px; border: 1px solid rgba(122, 175, 216, 0.16); border-radius: 10px; background: rgba(47, 123, 255, 0.08); }
.story-murphy-card__stats dt { color: #9cc8ff; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.story-murphy-card__stats dd { margin: 0; color: rgba(178, 198, 230, 0.85); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }

.story-murphy-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(122, 175, 216, 0.18); }
.story-murphy-card__status { display: inline-flex; align-items: center; gap: 8px; color: rgba(199, 216, 240, 0.9); font-size: 12.5px; font-weight: 600; }
.story-murphy-card__status .story-orbit__dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: #63e64d; box-shadow: 0 0 8px rgba(98, 235, 77, 0.4); }
.story-murphy-card__link { display: inline-flex; align-items: center; gap: 8px; color: #9cc8ff; font-size: 13px; font-weight: 700; text-decoration: none; }
.story-murphy-card__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story-murphy-card__link:hover { color: #cfe4ff; }

@keyframes story-murphy-portrait-breathe {
  0%, 100% { transform: scale(1.035) translate3d(0, 0, 0); }
  50% { transform: scale(1.055) translate3d(-2px, -3px, 0); }
}

@media (min-width: 1121px) {
  .story-page--cinematic .story-orbit__card--murphy {
    display: flex;
    flex-direction: column;
  }

  .story-page--cinematic .story-orbit__card--murphy .story-murphy-card__header,
  .story-page--cinematic .story-orbit__card--murphy .story-murphy-card__tagline {
    opacity: 0.45;
    transition: opacity 0.5s ease;
  }

  .story-page--cinematic .story-orbit__card--murphy .story-murphy-card__points li,
  .story-page--cinematic .story-orbit__card--murphy .story-murphy-card__stats > div,
  .story-page--cinematic .story-orbit__card--murphy .story-murphy-card__footer {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.5s ease, translate 0.5s ease;
  }

  .story-page--cinematic .story-orbit__card--murphy.is-step-1 .story-murphy-card__header,
  .story-page--cinematic .story-orbit__card--murphy.is-step-1 .story-murphy-card__tagline { opacity: 1; }

  .story-page--cinematic .story-orbit__card--murphy.is-step-2 .story-murphy-card__points li { opacity: 1; translate: 0 0; }
  .story-page--cinematic .story-orbit__card--murphy.is-step-2 .story-murphy-card__points li:nth-child(2) { transition-delay: 0.12s; }
  .story-page--cinematic .story-orbit__card--murphy.is-step-2 .story-murphy-card__points li:nth-child(3) { transition-delay: 0.24s; }
  .story-page--cinematic .story-orbit__card--murphy.is-step-2 .story-murphy-card__points li:nth-child(4) { transition-delay: 0.36s; }

  .story-page--cinematic .story-orbit__card--murphy.is-step-3 .story-murphy-card__stats > div { opacity: 1; translate: 0 0; }
  .story-page--cinematic .story-orbit__card--murphy.is-step-3 .story-murphy-card__stats > div:nth-child(2) { transition-delay: 0.1s; }
  .story-page--cinematic .story-orbit__card--murphy.is-step-3 .story-murphy-card__footer { opacity: 1; translate: 0 0; transition-delay: 0.18s; }

  .story-page--cinematic .story-orbit__card--murphy.is-step-1 .story-murphy-card__portrait {
    opacity: 0.38;
  }

  .story-page--cinematic .story-orbit__card--murphy.is-step-2 .story-murphy-card__portrait {
    opacity: 0.52;
    filter: saturate(0.96) contrast(1.07);
  }

  .story-page--cinematic .story-orbit__card--murphy.is-step-3 .story-murphy-card__portrait {
    opacity: 0.64;
    filter: saturate(1.08) contrast(1.08);
  }

  .story-page--cinematic .story-orbit__card--murphy.is-deck-active .story-murphy-card__portrait img {
    animation: story-murphy-portrait-breathe 6.8s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-orbit__card--murphy .story-murphy-card__header,
  .story-orbit__card--murphy .story-murphy-card__tagline,
  .story-orbit__card--murphy .story-murphy-card__points li,
  .story-orbit__card--murphy .story-murphy-card__stats > div,
  .story-orbit__card--murphy .story-murphy-card__footer {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }

  .story-page--cinematic .story-orbit__card--murphy {
    pointer-events: auto;
  }

  .story-murphy-card__portrait,
  .story-murphy-card__portrait img {
    opacity: 0.48;
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Bouton plein écran (header homepage, discret) =====
   Positionné en absolu dans la marge droite du header pour ne pas
   élargir la rangée d'actions (elle est déjà au maximum à 1440px). */
.story-page--cinematic .fullscreen-toggle {
  position: fixed;
  top: 119px;
  right: 16px;
  z-index: 130;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(165, 216, 255, 0.16);
  border-radius: 9px;
  background: transparent;
  color: rgba(207, 224, 245, 0.55);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.story-page--cinematic .fullscreen-toggle:hover,
.story-page--cinematic .fullscreen-toggle:focus-visible {
  color: #fff;
  border-color: rgba(165, 216, 255, 0.4);
  background: rgba(90, 140, 255, 0.1);
}

.fullscreen-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fullscreen-toggle .fullscreen-toggle__compress { display: none; }
body.is-fullscreen .fullscreen-toggle .fullscreen-toggle__expand { display: none; }
body.is-fullscreen .fullscreen-toggle .fullscreen-toggle__compress { display: block; }
.fullscreen-toggle[hidden] { display: none !important; }

@media (max-width: 1120px) {
  .story-page--cinematic .fullscreen-toggle { display: none; }
}

@media (max-width: 1120px) {
  .story-page--cinematic .site-header--cinematic {
    height: 72px;
    min-height: 72px;
    background: rgba(5, 11, 24, 0.9);
  }

  .story-page--cinematic .site-header__inner {
    width: 100%;
    max-width: none;
    height: 72px;
    min-height: 72px;
    padding: 0 14px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: 72px;
    gap: 14px;
    align-items: center;
  }

  .story-page--cinematic .brand--cinematic {
    grid-column: 1;
    grid-row: 1;
    width: 126px;
    height: 48px;
    justify-self: start;
  }

  .story-page--cinematic .brand--cinematic .brand__logo-img,
  .story-page--cinematic .brand--cinematic img.cb-logo-2026 {
    width: 126px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    transform: none;
    filter: brightness(0) invert(1);
  }

  .story-page--cinematic .header-actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    width: 82px;
    height: 48px;
    justify-self: end;
    gap: 0;
    padding: 0;
  }

  .story-page--cinematic .header-actions .login-link,
  .story-page--cinematic .header-actions .header-cta,
  .story-page--cinematic .header-actions .fullscreen-toggle {
    display: none;
  }

  .story-page--cinematic .language-select {
    display: flex;
    width: 82px;
    height: 48px;
    margin: 0;
  }

  .story-page--cinematic .language-select select {
    width: 82px;
    min-width: 82px;
    min-height: 48px;
    padding: 0 30px 0 16px;
    border: 1px solid rgba(146, 176, 216, 0.26);
    border-radius: 12px;
    color: #e6eefb;
    background: rgba(10, 18, 32, 0.42);
    font-size: 16px;
    font-weight: 600;
  }

  .story-page--cinematic .language-select::after {
    right: 13px;
    border-color: rgba(230, 238, 251, 0.88);
  }

  .story-page--cinematic .menu-toggle {
    position: relative;
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    width: 103px;
    min-width: 103px;
    height: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(146, 176, 216, 0.26);
    border-radius: 12px;
    color: rgba(226, 235, 250, 0.92);
    background: rgba(10, 18, 32, 0.42);
  }

  .story-page--cinematic .menu-toggle span,
  .story-page--cinematic .menu-toggle span:nth-child(2),
  .story-page--cinematic .menu-toggle span:nth-child(3) {
    position: absolute;
    left: 16px;
    display: block;
    width: 16px;
    height: 2px;
    margin: 0;
    border-radius: 99px;
    background: currentColor;
    transition: top 0.2s ease, opacity 0.16s ease, transform 0.2s ease;
  }

  .story-page--cinematic .menu-toggle span:nth-child(1) { top: 17px; }
  .story-page--cinematic .menu-toggle span:nth-child(2) { top: 23px; }
  .story-page--cinematic .menu-toggle span:nth-child(3) { top: 29px; }

  .story-page--cinematic .menu-toggle b {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
  }

  .story-page--cinematic .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    top: 23px;
    transform: rotate(45deg);
  }

  .story-page--cinematic .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .story-page--cinematic .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 23px;
    transform: rotate(-45deg);
  }

  .story-page--cinematic .site-nav {
    position: fixed;
    inset: 72px 0 auto;
    z-index: 170;
    display: none;
    width: 100%;
    max-height: calc(100svh - 72px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 14px 20px;
    border: 0;
    border-top: 1px solid rgba(146, 176, 216, 0.14);
    border-radius: 0;
    background: rgba(5, 11, 24, 0.98);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.26);
    overflow-x: hidden;
    overflow-y: auto;
    transform: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .story-page--cinematic .site-nav.is-open {
    display: flex;
  }

  .story-page--cinematic .site-nav a,
  .story-page--cinematic .site-nav .nav-trigger {
    width: 100%;
    min-height: 50px;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(146, 176, 216, 0.14);
    border-radius: 0;
    background: transparent;
  }

  .story-page--cinematic .site-nav .nav-trigger svg {
    display: block;
  }

  .story-page--cinematic .mega-layer {
    position: fixed;
    inset: 72px 0 auto;
    z-index: 180;
    width: 100%;
    max-width: none;
    max-height: calc(100svh - 72px);
    transform: none;
    overflow-y: auto;
  }

  .story-page--cinematic .story-hero-pin {
    height: auto;
  }

  .story-page--cinematic .story-hero-pin .story-hero {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
    padding-top: 54px;
    overflow: hidden;
  }

  .story-page--cinematic .story-hero__inner {
    height: auto;
    min-height: 0;
  }

  .story-page--cinematic .story-hero__copy {
    margin-top: 0;
  }

  .story-page--cinematic .story-hero__eyebrow {
    display: block;
    margin-bottom: 20px;
  }

  .story-page--cinematic .story-title__line,
  .story-page--cinematic .story-hero__lead span {
    display: block;
  }

  .story-page--cinematic .story-hero h1 {
    font-weight: 300;
    line-height: 1.02;
  }

  .story-page--cinematic .story-hero h1 em {
    font-weight: 300;
    background: linear-gradient(90deg, #567eff, #42bbdf 55%, #67e0b9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .story-page--cinematic .story-hero__trust {
    width: min(calc(100% - 40px), 720px);
    margin-top: 34px;
  }

  .story-page--cinematic .story-hero__trust > span,
  .story-page--cinematic .story-hero__trust > span:last-child {
    font-weight: 400;
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-hero-pin .story-hero {
    padding: 36px 0 24px;
  }

  .story-page--cinematic .story-hero__inner {
    width: min(calc(100% - 32px), 520px);
    gap: 36px;
  }

  .story-page--cinematic .story-hero__copy {
    text-align: left;
  }

  .story-page--cinematic .story-hero__eyebrow {
    font-size: 12px;
  }

  .story-page--cinematic .story-hero h1 {
    max-width: 100%;
    font-size: clamp(44px, 13vw, 62px);
    letter-spacing: -0.055em;
    text-wrap: balance;
  }

  .story-page--cinematic .story-title__line {
    white-space: normal;
  }

  .story-page--cinematic .story-hero__lead {
    margin-top: 22px;
    font-size: 16px;
  }

  .story-page--cinematic .story-hero__actions {
    margin-top: 26px;
    gap: 12px;
  }

  .story-page--cinematic .story-orbit {
    min-height: 520px;
  }

  .story-page--cinematic .story-orbit__stack {
    height: 520px;
    min-height: 520px;
  }

  .story-page--cinematic .story-orbit__card--front {
    padding-top: 24px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__title {
    font-weight: 400;
  }

  .story-page--cinematic .story-orbit__status {
    width: 10px;
    min-width: 10px;
    min-height: 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .story-page--cinematic .story-orbit__status .story-orbit__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #63e64d;
  }

  .story-page--cinematic .story-back-card__operations {
    grid-template-columns: 1fr;
  }

  .story-page--cinematic .story-hero__trust {
    grid-template-columns: 1fr;
  }

  .story-page--cinematic .story-hero__trust > span,
  .story-page--cinematic .story-hero__trust > span:last-child {
    min-height: 52px;
    justify-content: flex-start;
    grid-column: auto;
    border-right: 0;
    border-top: 1px solid rgba(145, 205, 247, 0.11);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-orbit__stack {
    animation: none !important;
  }

  .story-page--cinematic .story-orbit__card {
    transition: none !important;
  }
}

/* Homepage ecosystem replacement — DOM/SVG, responsive and locale-ready. */
.story-page--cinematic .story-usecases--ecosystem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(38px, 3.5vw, 62px) 0;
  color: #f5f9ff;
  background:
    radial-gradient(ellipse at 68% 50%, rgba(12, 79, 125, .22), transparent 42%),
    radial-gradient(ellipse at 6% 86%, rgba(20, 93, 148, .12), transparent 38%),
    #020b17;
}

.story-page--cinematic .story-usecases--ecosystem::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(30deg, transparent 47%, rgba(48, 134, 202, .19) 48%, rgba(48, 134, 202, .19) 52%, transparent 53%),
    linear-gradient(150deg, transparent 47%, rgba(48, 134, 202, .16) 48%, rgba(48, 134, 202, .16) 52%, transparent 53%);
  background-size: 120px 104px;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.4) 42%, #000);
}

.story-ecosystem__shell {
  width: var(--cb-shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(400px, .82fr) minmax(560px, 1.18fr);
  gap: clamp(24px, 4.5vw, 76px);
  align-items: center;
}

.story-page--cinematic .story-ecosystem__copy { position: relative; z-index: 2; }
.story-page--cinematic .story-ecosystem__copy .story-eyebrow { margin-bottom: 14px; color: #8cbce4; }
.story-page--cinematic .story-ecosystem__copy h2 {
  max-width: 610px;
  margin: 0;
  color: #fff;
  font-size: var(--cb-title-section-side);
  font-weight: var(--cb-display-weight);
  letter-spacing: -.062em;
  line-height: .98;
}
.story-ecosystem__title-accent {
  display: block;
  width: fit-content;
  background: linear-gradient(100deg, #2474ff 0%, #30b8ff 50%, #42e4cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.story-page--cinematic .story-ecosystem__copy .story-section-lead {
  max-width: 400px;
  margin: 22px 0 0;
  color: rgba(204, 220, 243, .82);
  font-size: clamp(17px, 1.28vw, 21px);
  font-weight: 600;
  line-height: 1.48;
}
.story-ecosystem__cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 32px;
  color: #67c6ff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.025em;
  text-decoration: none;
}
.story-ecosystem__cta span:last-child { font-size: 22px; transition: transform .25s ease; }
.story-ecosystem__cta:hover span:last-child { transform: translateX(5px); }
.story-ecosystem__proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
.story-ecosystem__proofs li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  border-left: 1px solid rgba(149, 202, 244, .23);
  color: rgba(220, 231, 246, .83);
  font-size: 12px;
  font-weight: 700;
}
.story-ecosystem__proofs li:first-child { padding-left: 0; border-left: 0; }
.story-ecosystem__proofs svg { width: 27px; height: 27px; fill: none; stroke: #9ccff0; stroke-width: 1.25; }

.story-ecosystem {
  position: relative;
  min-height: 455px;
  color: #eef7ff;
}
.story-ecosystem__circuit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story-ecosystem__hub {
  position: absolute;
  z-index: 3;
  top: 44%;
  left: 51%;
  display: grid;
  width: 190px;
  height: 112px;
  place-content: center;
  border: 1px solid rgba(104, 208, 255, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 33%, #294969, #0a1d31 64%, #04111f);
  box-shadow: 0 0 0 12px rgba(26, 98, 147, .16), 0 0 32px rgba(49, 198, 255, .32), inset 0 0 28px rgba(33, 176, 255, .15);
  text-align: center;
  transform: translate(-50%, -50%);
}
.story-ecosystem__hub::before, .story-ecosystem__hub::after { content: ""; position: absolute; inset: -12px 9px; border: 1px solid rgba(104, 208, 255, .2); border-radius: 50%; }
.story-ecosystem__hub::after { inset: -18px 17px; opacity: .45; }
.story-ecosystem__hub span { font-size: 26px; font-weight: 900; letter-spacing: -.06em; }
.story-ecosystem__hub small { margin-top: 2px; color: rgba(225, 239, 253, .78); font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.story-ecosystem__hub i { position: absolute; bottom: 13px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #63ee71; box-shadow: 0 0 16px #63ee71; transform: translateX(-50%); }

.ecosystem-product {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.ecosystem-product__copy { display: block; width: 130px; }
.ecosystem-product__copy b { display: block; color: #f4f8ff; font-size: 15px; font-weight: 900; letter-spacing: -.04em; }
.ecosystem-product__copy b i { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: #63ee71; box-shadow: 0 0 12px #63ee71; vertical-align: 2px; }
.ecosystem-product__copy small { display: block; margin-top: 5px; color: rgba(205, 220, 239, .77); font-size: 11px; font-weight: 600; line-height: 1.37; }
.ecosystem-product__copy em { display: block; margin-top: 5px; color: #d7e6f6; font-size: 19px; font-style: normal; }
.ecosystem-node {
  position: relative;
  display: grid;
  width: 84px;
  height: 70px;
  place-items: center;
  border: 1px solid rgba(89, 205, 255, .55);
  border-radius: 16px 16px 22px 22px;
  background: linear-gradient(145deg, #1a3652, #081626 70%);
  box-shadow: 0 11px 0 -3px #06111e, 0 17px 0 -6px #11324a, 0 0 24px rgba(35, 190, 255, .28), inset 0 1px 0 rgba(211, 243, 255, .25);
  transform: perspective(160px) rotateX(8deg);
}
.ecosystem-node::after { content: ""; position: absolute; bottom: -9px; left: 15%; width: 70%; height: 9px; border-radius: 50%; background: rgba(20, 163, 243, .28); filter: blur(8px); }
.ecosystem-node svg { width: 49px; height: 49px; fill: none; stroke: #a9e6ff; stroke-width: 1.35; }
.ecosystem-product--deskio { top: 11%; left: 1%; }
.ecosystem-product--deskio .ecosystem-product__copy { text-align: right; }
.ecosystem-product--serenia { top: 0; left: 42%; }
.ecosystem-product--serenia .ecosystem-product__copy { width: 135px; }
.ecosystem-product--ovastack { top: 24%; right: 0; }
.ecosystem-product--ovastack .ecosystem-product__copy { width: 140px; }
.ecosystem-product--neoo { top: 56%; left: 0; }
.ecosystem-product--neoo .ecosystem-product__copy { text-align: right; }
.ecosystem-product--solenio { bottom: 0; left: 37%; }
.ecosystem-product--solenio .ecosystem-product__copy { width: 125px; }
.ecosystem-product--m365 { right: 0; bottom: 15%; }
.ecosystem-product--m365 .ecosystem-product__copy { width: 150px; text-align: right; }
.ecosystem-node--serenia { width: 76px; height: 82px; border-radius: 24px; }
.ecosystem-node--ovastack { display: grid; gap: 5px; width: 72px; height: 88px; padding: 12px 13px; }
.ecosystem-node--ovastack span { height: 15px; border: 1px solid #75daff; border-radius: 4px; background: linear-gradient(145deg, #1f4b70, #0b2033); box-shadow: 0 4px 0 -1px #0a1726; }
.ecosystem-node--ovastack span::after { content: ""; display: block; width: 7px; height: 3px; margin: 5px auto; border-radius: 2px; background: #48d0ff; box-shadow: 0 0 6px #48d0ff; }
.ecosystem-node--neoo { border-radius: 22px; }
.ecosystem-node--solenio { width: 76px; height: 76px; border-radius: 50%; }
.ecosystem-node--m365 { display: grid; grid-template-columns: repeat(2, 18px); grid-template-rows: repeat(2, 18px); gap: 3px; width: 76px; height: 76px; padding: 15px; place-items: stretch; }
.ecosystem-node--m365 span { display: block; }
.ecosystem-node--m365 span:nth-child(1) { background: #f35325; }.ecosystem-node--m365 span:nth-child(2) { background: #81bc06; }.ecosystem-node--m365 span:nth-child(3) { background: #05a6f0; }.ecosystem-node--m365 span:nth-child(4) { background: #ffba08; }

@media (max-width: 1120px) {
  .story-ecosystem__shell { grid-template-columns: 1fr; }
  .story-page--cinematic .story-ecosystem__copy .story-section-lead { max-width: 610px; }
  .story-ecosystem { width: min(100%, 850px); margin: 0 auto; }
}
@media (max-width: 760px) {
  .story-page--cinematic .story-usecases--ecosystem { padding: 72px 0; }
  .story-page--cinematic .story-ecosystem__copy h2 { font-size: var(--cb-title-section-side); }
  .story-ecosystem__proofs { margin-top: 30px; }
  .story-ecosystem__proofs li { width: 100%; padding: 10px 0; border-top: 1px solid rgba(149, 202, 244, .18); border-left: 0; }
  .story-ecosystem__proofs li:first-child { border-top: 0; }
  .story-ecosystem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; gap: 12px; margin-top: 22px; }
  .story-ecosystem__circuit, .story-ecosystem__hub { display: none; }
  .ecosystem-product { position: relative; inset: auto !important; display: block; min-height: 145px; padding: 18px; border: 1px solid rgba(123, 205, 251, .18); border-radius: 18px; background: linear-gradient(145deg, rgba(20, 48, 77, .82), rgba(5, 17, 31, .85)); }
  .ecosystem-product__copy, .ecosystem-product--deskio .ecosystem-product__copy, .ecosystem-product--neoo .ecosystem-product__copy, .ecosystem-product--m365 .ecosystem-product__copy { width: auto; padding-right: 42px; text-align: left; }
  .ecosystem-product__copy b { font-size: 16px; }
  .ecosystem-product__copy small { font-size: 11px; }
  .ecosystem-product__copy em { position: absolute; bottom: 13px; left: 18px; }
  .ecosystem-node { position: absolute; top: 15px; right: 12px; width: 38px; height: 36px; border-radius: 10px; box-shadow: 0 6px 0 -3px #06111e, 0 0 16px rgba(35,190,255,.22); transform: none; }
  .ecosystem-node svg { width: 27px; height: 27px; }
  .ecosystem-node::after { display: none; }
  .ecosystem-node--serenia, .ecosystem-node--solenio, .ecosystem-node--m365 { width: 38px; height: 38px; border-radius: 11px; }
  .ecosystem-node--ovastack { display: grid; gap: 2px; width: 38px; height: 42px; padding: 6px; }
  .ecosystem-node--ovastack span { height: 7px; }
  .ecosystem-node--ovastack span::after { width: 3px; height: 1px; margin: 2px auto; }
  .ecosystem-node--m365 { grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); gap: 2px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-ecosystem__cta span:last-child { transition: none; }
}

/* Homepage Capability Engine — replaces the ecosystem scene with live, localised DOM. */
.story-page--cinematic .story-capabilities--engine {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  margin: 0;
  min-height: 0;
  padding: 0 0 clamp(56px, 5.4vw, 90px);
  background:
    radial-gradient(700px 360px at 72% 4%, rgba(6, 76, 130, .17), transparent 70%),
    radial-gradient(760px 320px at 48% 76%, rgba(0, 123, 191, .08), transparent 76%),
    #020914;
}
.story-page--cinematic .story-capabilities--engine::before {
  opacity: .28;
  background-size: 74px 128px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 66%, transparent 100%);
}
.story-page--cinematic .story-capabilities--engine::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 40%;
  height: 380px;
  opacity: .42;
  background:
    radial-gradient(circle at 15% 22%, #1abdfb 0 2px, transparent 3px),
    radial-gradient(circle at 48% 8%, #1abdfb 0 2px, transparent 3px),
    radial-gradient(circle at 72% 48%, #1abdfb 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 20%, rgba(38,150,220,.2) 20.2% 20.45%, transparent 20.7%) 0 0 / 240px 92px,
    linear-gradient(45deg, transparent 38%, rgba(38,150,220,.16) 38.2% 38.45%, transparent 38.7%) 48px 54px / 290px 118px;
  pointer-events: none;
}
.story-usecases--ecosystem > .story-capabilities[hidden],
.story-usecases__legacy[hidden] { display: none !important; }
.story-capabilities {
  width: min(calc(100% - 80px), 1590px);
  margin: 0 auto;
  padding-top: clamp(34px, 2.2vw, 42px);
}
.story-capabilities--engine .story-capabilities__engine-shell {
  width: min(calc(100% - 80px), 1590px);
  margin: 0 auto;
}
.story-capabilities--engine .story-capabilities__intro { width: min(100%, 640px); margin-bottom: 0; }
.story-capabilities__intro {
  width: min(100%, 640px);
  margin-left: 30px;
  color: #f7fbff;
}
.story-page--cinematic .story-capabilities__intro .story-eyebrow {
  margin: 0 0 16px;
  color: #52c3f1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .19em;
}
.story-page--cinematic .story-capabilities__intro h2 {
  margin: 0;
  color: #f6f8fb;
  font-size: clamp(44px, 4vw, 59px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.08;
}
.story-capabilities__intro h2 > span { display: block; }
.story-capabilities__accent {
  background: linear-gradient(100deg, #087cfe 0%, #11c0ff 56%, #12dfca 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.story-capabilities__intro > p:not(.story-eyebrow) {
  max-width: 600px;
  margin: 17px 0 0;
  color: rgba(218, 229, 242, .86);
  font-size: clamp(17px, 1.28vw, 21px);
  font-weight: 500;
  letter-spacing: -.027em;
  line-height: 1.42;
}
.story-capabilities__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
  color: #39c6ff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}
.story-capabilities__cta > span:last-child { font-size: 24px; font-weight: 400; line-height: .6; transition: transform .25s ease; }
.story-capabilities__cta:hover > span:last-child { transform: translateX(5px); }

.capability-engine {
  position: relative;
  isolation: isolate;
  height: clamp(360px, 24.5vw, 410px);
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(101, 171, 220, .38);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(20, 35, 52, .97) 0%, rgba(5, 15, 27, .98) 86%),
    #07111e;
  box-shadow: 0 0 0 7px rgba(4, 11, 20, .92), 0 0 0 8px rgba(71, 151, 207, .25), 0 22px 38px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(218, 246, 255, .13), inset 0 -18px 28px rgba(0, 0, 0, .42);
  clip-path: polygon(2.8% 0, 32% 0, 33.2% 2.4%, 66.8% 2.4%, 68% 0, 97.2% 0, 100% 7%, 100% 93%, 97.2% 100%, 2.8% 100%, 0 93%, 0 7%);
}
.capability-engine::before,
.capability-engine::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.capability-engine::before {
  inset: 10px;
  border: 1px solid rgba(147, 196, 232, .17);
  clip-path: polygon(2.6% 0, 31.8% 0, 33% 2.4%, 67% 2.4%, 68.2% 0, 97.4% 0, 100% 7%, 100% 93%, 97.4% 100%, 2.6% 100%, 0 93%, 0 7%);
}
.capability-engine::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
  background: linear-gradient(90deg, transparent, rgba(0, 154, 255, .42) 13%, transparent 27%, transparent 72%, rgba(0, 154, 255, .42) 86%, transparent);
  box-shadow: 0 -1px 16px rgba(0, 163, 255, .36);
}
.capability-engine__title {
  position: absolute;
  z-index: 4;
  top: 7px;
  left: 50%;
  min-width: 490px;
  padding: 2px 38px 4px;
  border-bottom: 1px solid rgba(121, 191, 231, .24);
  color: #d7e4ee;
  font-size: clamp(11px, .95vw, 16px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .17em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.capability-engine__rail { position: absolute; z-index: 1; top: 47%; right: -1px; left: -1px; height: 70px; transform: translateY(-50%); pointer-events: none; }
.capability-engine__rail svg { display: block; width: 100%; height: 100%; overflow: visible; }
.capability-engine__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}
.capability-panel {
  position: relative;
  min-width: 0;
  padding: clamp(46px, 3.4vw, 58px) clamp(20px, 2.1vw, 35px) 31px;
  background: linear-gradient(180deg, rgba(13, 27, 43, .04), rgba(7, 14, 25, .17));
}
.capability-panel + .capability-panel { border-left: 1px solid rgba(109, 167, 205, .26); }
.capability-panel::before,
.capability-panel::after { content: ""; position: absolute; pointer-events: none; }
.capability-panel::before { top: 35px; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(126, 183, 220, .2), transparent); }
.capability-panel::after { right: 14px; bottom: 16px; left: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 173, 255, .62), transparent); opacity: .45; }
.capability-panel__number {
  position: absolute;
  top: clamp(49px, 3.7vw, 62px);
  left: clamp(20px, 2.1vw, 35px);
  margin: 0;
  color: #77d5ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .07em;
}
.capability-panel h3 {
  margin: 0 0 4px 42px;
  color: #f4f8fd;
  font-size: clamp(18px, 1.48vw, 23px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.capability-panel__copy {
  max-width: 210px;
  min-height: 44px;
  margin: 0;
  color: rgba(211, 225, 240, .83);
  font-size: clamp(11px, .83vw, 14px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.45;
}
.capability-panel__icon {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(43%, 120px);
  height: auto;
  overflow: visible;
  fill: rgba(15, 71, 112, .25);
  filter: drop-shadow(0 0 9px rgba(0, 193, 255, .85)) drop-shadow(0 10px 8px rgba(0, 0, 0, .65));
  stroke: #89dcff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transform: translateX(-50%);
}
.capability-panel--protect .capability-panel__icon { top: 36%; width: min(43%, 126px); fill: rgba(6, 104, 157, .22); stroke: #64d8ff; stroke-width: 1.7; }
.capability-panel--support .capability-panel__icon { top: 39%; width: min(45%, 126px); fill: rgba(6, 64, 107, .16); }
.capability-panel--automate .capability-panel__icon { top: 39%; width: min(44%, 118px); fill: rgba(10, 67, 109, .18); }
.capability-panel__links {
  position: absolute;
  right: clamp(20px, 2.1vw, 35px);
  bottom: 56px;
  left: clamp(20px, 2.1vw, 35px);
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.capability-panel__links li { position: relative; padding-left: 16px; }
.capability-panel__links li::before { content: ""; position: absolute; top: .56em; left: 0; width: 6px; height: 2px; background: #75d9ff; box-shadow: 0 0 7px rgba(35, 192, 255, .65); }
.capability-panel__links a { color: rgba(223, 234, 246, .83); font-size: clamp(11px, .8vw, 13px); font-weight: 700; line-height: 1.15; text-decoration: none; }
.capability-panel__links a:hover { color: #62d7ff; }
.capability-panel__status {
  position: absolute;
  right: 50%;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(calc(100% - 40px), 176px);
  min-height: 29px;
  padding: 4px 10px;
  border: 1px solid rgba(117, 187, 210, .26);
  border-radius: 100px;
  color: #71eb76;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(50%);
}
.capability-panel__status i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #63ee71; box-shadow: 0 0 12px #63ee71; }

.capability-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(calc(100% - 240px), 1270px);
  min-height: 142px;
  margin: 28px auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(98, 171, 224, .42);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(8, 37, 65, .86), rgba(4, 16, 30, .86));
  box-shadow: inset 0 1px 0 rgba(173, 217, 245, .08), 0 17px 34px rgba(0,0,0,.28);
}
.capability-stats > div {
  display: grid;
  grid-template-columns: 64px auto;
  grid-template-rows: 1fr auto;
  column-gap: 18px;
  align-content: center;
  padding: 22px clamp(22px, 3vw, 46px);
}
.capability-stats > div + div { border-left: 1px solid rgba(107, 173, 212, .22); }
.capability-stats svg { grid-row: 1 / span 2; align-self: center; width: 54px; height: 54px; fill: rgba(5, 42, 71, .22); filter: drop-shadow(0 0 6px rgba(16,190,255,.45)); stroke: #55caff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.capability-stats dt { align-self: end; color: #f5fbff; font-size: clamp(42px, 3.8vw, 58px); font-weight: 400; letter-spacing: -.075em; line-height: .88; }
.capability-stats dd { align-self: start; margin: 7px 0 0; color: rgba(220, 232, 243, .84); font-size: clamp(11px, .83vw, 14px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.capability-stats .story-stat strong { align-self: end; color: #f5fbff; font-size: clamp(42px, 3.8vw, 58px); font-weight: 400; letter-spacing: -.075em; line-height: .88; }
.capability-stats .story-stat span { align-self: start; margin-top: 7px; color: rgba(220, 232, 243, .84); font-size: clamp(11px, .83vw, 14px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }

@media (max-width: 1100px) {
  .story-capabilities { width: min(calc(100% - 48px), 940px); }
  .story-capabilities--engine { width: 100%; }
  .story-capabilities__intro { margin-left: 0; }
  .capability-engine { height: 600px; }
  .capability-engine__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .capability-panel:nth-child(3) { border-left: 0; border-top: 1px solid rgba(109, 167, 205, .26); }
  .capability-panel:nth-child(4) { border-top: 1px solid rgba(109, 167, 205, .26); }
  .capability-panel__icon { top: 34%; }
  .capability-panel--protect .capability-panel__icon { top: 31%; }
  .capability-panel--support .capability-panel__icon, .capability-panel--automate .capability-panel__icon { top: 38%; }
  .capability-stats { width: 100%; }
}
@media (min-width: 1101px) {
  .story-page--cinematic .story-capabilities--engine { padding-bottom: 0; }
}
@media (max-width: 660px) {
  .story-page--cinematic .story-capabilities--engine { padding-bottom: 46px; }
  .story-capabilities { width: min(calc(100% - 32px), 520px); padding-top: 45px; }
  .story-capabilities--engine { width: 100%; }
  .story-page--cinematic .story-capabilities__intro h2 { font-size: clamp(39px, 12.2vw, 51px); line-height: 1.02; }
  .story-capabilities__intro > p:not(.story-eyebrow) { margin-top: 16px; font-size: 17px; line-height: 1.45; }
  .story-capabilities__cta { margin-top: 18px; }
  .capability-engine { height: auto; margin-top: 34px; border-radius: 22px; clip-path: none; }
  .capability-engine::before { clip-path: none; }
  .capability-engine__title { position: relative; top: auto; left: auto; min-width: 0; width: calc(100% - 30px); margin: 13px auto 0; padding: 0 0 7px; font-size: 10px; transform: none; }
  .capability-engine__rail { display: none; }
  .capability-engine__grid { display: block; height: auto; }
  .capability-panel { min-height: 270px; padding: 48px 27px 29px; }
  .capability-panel + .capability-panel, .capability-panel:nth-child(3), .capability-panel:nth-child(4) { border-top: 1px solid rgba(109, 167, 205, .26); border-left: 0; }
  .capability-panel__number { top: 51px; left: 27px; font-size: 12px; }
  .capability-panel h3 { margin-left: 39px; font-size: 21px; }
  .capability-panel__copy { max-width: 190px; font-size: 12px; }
  .capability-panel__icon { top: 26%; left: 74%; width: 100px; }
  .capability-panel--protect .capability-panel__icon { top: 23%; width: 108px; }
  .capability-panel--support .capability-panel__icon, .capability-panel--automate .capability-panel__icon { top: 27%; width: 106px; }
  .capability-panel__links { right: auto; bottom: 55px; left: 27px; }
  .capability-panel__status { right: 27px; bottom: 24px; width: max-content; max-width: calc(100% - 54px); min-height: 28px; font-size: 9px; transform: none; }
  .capability-stats { display: block; width: 100%; min-height: 0; margin-top: 30px; border-radius: 16px; }
  .capability-stats > div { min-height: 115px; padding: 20px 26px; }
  .capability-stats > div + div { border-top: 1px solid rgba(107, 173, 212, .22); border-left: 0; }
  .capability-stats dt { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-capabilities__cta > span:last-child { transition: none; }
}

/* Capability Engine v2 — calibrated against the 1670 × 941 supplied reference.
   Important copy remains live DOM; the reference is sampled only inside the four
   decorative 3D viewports and the circuit backdrop. */
.story-page--cinematic .story-capabilities--engine {
  --cap-reference: url("/scratch/reference-images/home/20260718/capability-engine-target.png");
  min-height: 750px;
  padding: 42px 0 0;
  overflow: hidden;
  background:
    radial-gradient(800px 420px at 69% 18%, rgba(4, 67, 112, .13), transparent 74%),
    linear-gradient(180deg, #010812 0%, #020a16 100%);
}
.story-page--cinematic .story-capabilities--engine::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 37%;
  height: 315px;
  opacity: .34;
  background-image: var(--cap-reference);
  background-repeat: no-repeat;
  background-size: 1670px 941px;
  background-position: right top;
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
  pointer-events: none;
}
.story-page--cinematic .story-capabilities--engine::after { display: none; }
.story-capabilities--engine .story-capabilities__engine-shell {
  width: min(calc(var(--cb-shell) + 70px), calc(100% - 80px));
  max-width: 1590px;
}
.story-capabilities--engine .story-capabilities__intro {
  width: min(100%, 620px);
  margin-left: 28px;
}
.story-page--cinematic .story-capabilities__intro .story-eyebrow {
  margin-bottom: 18px;
  font-size: 11px;
  line-height: 1;
}
.story-page--cinematic .story-capabilities__intro h2 {
  font-family: var(--font-family);
  font-size: var(--cb-title-section-side);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.story-capabilities__intro > p:not(.story-eyebrow) {
  max-width: 570px;
  margin-top: 16px;
  font-size: min(22px, var(--cb-lead-section));
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.42;
}
.story-capabilities__cta {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
}

.story-capabilities--engine .capability-engine {
  height: 422px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(136, 187, 220, .5);
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(98, 148, 185, .025) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(128, 169, 199, .018) 23px 24px),
    linear-gradient(180deg, rgba(17, 31, 46, .985) 0%, rgba(5, 15, 27, .995) 83%, #030b15 100%);
  box-shadow:
    0 0 0 4px #030b14,
    0 0 0 6px rgba(74, 127, 164, .48),
    0 0 0 10px rgba(2, 7, 13, .96),
    0 24px 36px rgba(0, 0, 0, .58),
    inset 0 2px 0 rgba(213, 239, 255, .15),
    inset 0 -22px 32px rgba(0, 0, 0, .7),
    inset 12px 0 20px rgba(0, 0, 0, .45),
    inset -12px 0 20px rgba(0, 0, 0, .45);
  clip-path: polygon(3.5% 0, 33.2% 0, 34.2% 2.2%, 65.8% 2.2%, 66.8% 0, 96.5% 0, 99% 4.2%, 100% 9%, 100% 91%, 99% 95.8%, 96.5% 100%, 3.5% 100%, 1% 95.8%, 0 91%, 0 9%, 1% 4.2%);
}
.story-capabilities--engine .capability-engine::before {
  z-index: 5;
  inset: 9px 14px 12px;
  border: 1px solid rgba(145, 190, 220, .24);
  box-shadow:
    inset 0 0 0 5px rgba(2, 8, 14, .85),
    inset 0 0 0 6px rgba(102, 161, 201, .16),
    inset 0 0 24px rgba(0, 0, 0, .7);
  clip-path: polygon(2.8% 0, 33% 0, 34% 2%, 66% 2%, 67% 0, 97.2% 0, 100% 7%, 100% 93%, 97.2% 100%, 2.8% 100%, 0 93%, 0 7%);
}
.story-capabilities--engine .capability-engine::after {
  z-index: 6;
  right: 30px;
  bottom: 4px;
  left: 30px;
  height: 18px;
  border-top: 1px solid rgba(91, 164, 211, .17);
  background:
    linear-gradient(90deg, transparent 0 13%, #0ebcff 18%, #056ea9 25%, transparent 31% 70%, #056ea9 76%, #0ebcff 82%, transparent 88%);
  opacity: .92;
  filter: drop-shadow(0 0 7px rgba(4, 163, 255, .75));
  clip-path: polygon(0 35%, 21% 35%, 22.5% 65%, 77.5% 65%, 79% 35%, 100% 35%, 100% 55%, 80% 55%, 78.5% 88%, 21.5% 88%, 20% 55%, 0 55%);
}
.story-capabilities--engine .capability-engine__title {
  top: 7px;
  min-width: 490px;
  padding: 2px 38px 6px;
  border-bottom: 1px solid rgba(127, 181, 217, .34);
  color: #d9e1ea;
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .14em;
  text-shadow: 0 1px 8px rgba(145, 215, 255, .2);
}
.story-capabilities--engine .capability-engine__title::before,
.story-capabilities--engine .capability-engine__title::after {
  content: "";
  position: absolute;
  top: -1px;
  width: min(33vw, 500px);
  height: 18px;
  border-top: 1px solid rgba(121, 178, 214, .28);
}
.story-capabilities--engine .capability-engine__title::before { right: 100%; transform: skewX(-45deg); transform-origin: right top; }
.story-capabilities--engine .capability-engine__title::after { left: 100%; transform: skewX(45deg); transform-origin: left top; }
.story-capabilities--engine .capability-engine__rail {
  z-index: 1;
  top: 48%;
  height: 74px;
  opacity: .86;
}
.story-capabilities--engine .capability-engine__grid { z-index: 2; }
.story-capabilities--engine .capability-panel {
  padding-top: 56px;
  background: linear-gradient(180deg, rgba(20, 37, 53, .07), rgba(2, 10, 19, .14));
}
.story-capabilities--engine .capability-panel + .capability-panel { border-left-color: rgba(116, 163, 196, .3); }
.story-capabilities--engine .capability-panel::before {
  top: 34px;
  background: linear-gradient(90deg, transparent, rgba(137, 184, 216, .25) 12% 88%, transparent);
}
.story-capabilities--engine .capability-panel::after { display: none; }
.story-capabilities--engine .capability-panel--host { padding-left: 146px; }
.story-capabilities--engine .capability-panel--protect { padding-left: 108px; }
.story-capabilities--engine .capability-panel--support { padding-left: 56px; }
.story-capabilities--engine .capability-panel--automate { padding-left: 20px; }
.story-capabilities--engine .capability-panel__number {
  top: 57px;
  left: inherit;
  margin-left: 0;
  color: #dce9f3;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
}
.story-capabilities--engine .capability-panel--host .capability-panel__number { left: 146px; }
.story-capabilities--engine .capability-panel--protect .capability-panel__number { left: 108px; }
.story-capabilities--engine .capability-panel--support .capability-panel__number { left: 56px; }
.story-capabilities--engine .capability-panel--automate .capability-panel__number { left: 20px; }
.story-capabilities--engine .capability-panel h3 {
  margin: 0 0 6px 37px;
  color: #edf2f7;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.story-capabilities--engine .capability-panel__copy {
  width: 206px;
  min-height: 42px;
  color: rgba(213, 226, 238, .83);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.43;
}
.story-capabilities--engine .capability-panel__icon {
  top: 116px;
  left: 50%;
  width: 360px;
  height: 174px;
  overflow: hidden;
  background-image: var(--cap-reference);
  background-repeat: no-repeat;
  background-size: 1670px 941px;
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 12px 16px rgba(0, 0, 0, .35));
  stroke: transparent;
  transform: translateX(-50%);
}
.story-capabilities--engine .capability-panel__icon * { opacity: 0; }
.story-capabilities--engine .capability-panel--host .capability-panel__icon { background-position: -116px -451px; }
.story-capabilities--engine .capability-panel--protect .capability-panel__icon { background-position: -473px -451px; }
.story-capabilities--engine .capability-panel--support .capability-panel__icon { background-position: -835px -451px; }
.story-capabilities--engine .capability-panel--automate .capability-panel__icon { background-position: -1196px -451px; }
.story-capabilities--engine .capability-panel__metric {
  position: absolute;
  z-index: 4;
  top: 255px;
  left: 216px;
  display: grid;
  width: 116px;
  min-height: 48px;
  padding: 6px 11px;
  border: 1px solid rgba(111, 150, 181, .2);
  border-radius: 5px;
  background: linear-gradient(150deg, rgba(8, 23, 37, .98), rgba(4, 14, 25, .98));
  color: rgba(216, 226, 237, .78);
  font-size: 9px;
  line-height: 1.15;
  box-shadow: 0 7px 15px rgba(0,0,0,.4);
}
.story-capabilities--engine .capability-panel__metric small { font: inherit; }
.story-capabilities--engine .capability-panel__metric b { color: #d9edf5; font-size: 14px; font-weight: 400; }
.story-capabilities--engine .capability-panel__metric b::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 3px;
  background: linear-gradient(90deg, #69ee78 0 48%, #153927 48%);
}
.story-capabilities--engine .capability-panel__links {
  right: auto;
  bottom: 67px;
  gap: 6px;
}
.story-capabilities--engine .capability-panel--host .capability-panel__links { left: 100px; }
.story-capabilities--engine .capability-panel--protect .capability-panel__links { left: 65px; }
.story-capabilities--engine .capability-panel--support .capability-panel__links { left: 44px; }
.story-capabilities--engine .capability-panel--automate .capability-panel__links { left: 25px; }
.story-capabilities--engine .capability-panel__links a {
  color: rgba(225, 234, 243, .88);
  font-size: 12px;
  font-weight: 400;
}
.story-capabilities--engine .capability-panel__status {
  bottom: 19px;
  width: min(calc(100% - 74px), 190px);
  min-height: 28px;
  border-color: rgba(113, 172, 194, .28);
  background: rgba(4, 16, 27, .6);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .095em;
}

.story-page--cinematic .capability-stats {
  grid-template-columns: repeat(3, 1fr);
  width: min(calc(var(--cb-shell) - 220px), calc(100% - 360px));
  max-width: 1290px;
  min-height: 132px;
  margin: 30px auto 44px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.story-page--cinematic .capability-stats > div {
  grid-template-columns: 82px auto;
  grid-template-rows: 1fr auto;
  column-gap: 28px;
  padding: 20px 38px;
}
.story-page--cinematic .capability-stats > div + div { border-left: 1px solid rgba(135, 174, 199, .36); }
.story-page--cinematic .capability-stats svg {
  width: 78px;
  height: 78px;
  fill: rgba(3, 22, 38, .1);
  stroke: #55caff;
  stroke-width: 1.05;
}
.story-page--cinematic .capability-stats .story-stat strong,
.story-page--cinematic .capability-stats dt {
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -.055em;
}
.story-page--cinematic .capability-stats .story-stat span,
.story-page--cinematic .capability-stats dd {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
}

@media (max-width: 1250px) {
  .story-capabilities--engine .capability-panel--host,
  .story-capabilities--engine .capability-panel--protect,
  .story-capabilities--engine .capability-panel--support,
  .story-capabilities--engine .capability-panel--automate { padding-left: 42px; }
  .story-capabilities--engine .capability-panel--host .capability-panel__number,
  .story-capabilities--engine .capability-panel--protect .capability-panel__number,
  .story-capabilities--engine .capability-panel--support .capability-panel__number,
  .story-capabilities--engine .capability-panel--automate .capability-panel__number { left: 42px; }
  .story-capabilities--engine .capability-panel--host .capability-panel__links,
  .story-capabilities--engine .capability-panel--protect .capability-panel__links,
  .story-capabilities--engine .capability-panel--support .capability-panel__links,
  .story-capabilities--engine .capability-panel--automate .capability-panel__links { left: 36px; }
  .story-capabilities--engine .capability-panel__metric { left: calc(50% + 24px); }
  .story-page--cinematic .capability-stats { width: min(calc(100% - 96px), 1120px); }
}
@media (max-width: 1100px) {
  .story-page--cinematic .story-capabilities--engine { min-height: 1000px; }
  .story-capabilities--engine .story-capabilities__engine-shell { width: min(calc(100% - 48px), 940px); }
  .story-capabilities--engine .story-capabilities__intro { margin-left: 0; }
  .story-capabilities--engine .capability-engine { height: 650px; }
  .story-capabilities--engine .capability-panel__icon { top: 104px; }
  .story-capabilities--engine .capability-panel__metric { top: 244px; }
  .story-page--cinematic .capability-stats { width: min(calc(100% - 48px), 940px); }
}
@media (max-width: 660px) {
  .story-page--cinematic .story-capabilities--engine { min-height: 0; padding: 48px 0 46px; }
  .story-capabilities--engine .story-capabilities__engine-shell { width: min(calc(100% - 28px), 520px); }
  .story-page--cinematic .story-capabilities__intro h2 { font-size: clamp(38px, 11.5vw, 49px); font-weight: 500; }
  .story-capabilities__intro > p:not(.story-eyebrow) { font-size: 18px; }
  .story-capabilities--engine .capability-engine { height: auto; margin-top: 30px; border-radius: 18px; clip-path: none; }
  .story-capabilities--engine .capability-engine::before { clip-path: none; }
  .story-capabilities--engine .capability-engine__title { width: calc(100% - 40px); min-width: 0; font-size: 10px; }
  .story-capabilities--engine .capability-engine__grid { display: block; }
  .story-capabilities--engine .capability-panel { min-height: 360px; padding: 50px 28px 28px; }
  .story-capabilities--engine .capability-panel + .capability-panel { border-top: 1px solid rgba(109, 167, 205, .26); border-left: 0; }
  .story-capabilities--engine .capability-panel--host .capability-panel__number,
  .story-capabilities--engine .capability-panel--protect .capability-panel__number,
  .story-capabilities--engine .capability-panel--support .capability-panel__number,
  .story-capabilities--engine .capability-panel--automate .capability-panel__number { top: 52px; left: 28px; }
  .story-capabilities--engine .capability-panel h3 { margin-left: 40px; font-size: 18px; }
  .story-capabilities--engine .capability-panel__icon { top: 110px; left: 50%; width: 360px; }
  .story-capabilities--engine .capability-panel__metric { top: 248px; left: calc(50% + 58px); }
  .story-capabilities--engine .capability-panel--host .capability-panel__links,
  .story-capabilities--engine .capability-panel--protect .capability-panel__links,
  .story-capabilities--engine .capability-panel--support .capability-panel__links,
  .story-capabilities--engine .capability-panel--automate .capability-panel__links { bottom: 62px; left: 28px; }
  .story-capabilities--engine .capability-panel__status { right: 28px; bottom: 24px; width: max-content; max-width: calc(100% - 56px); transform: none; }
  .story-page--cinematic .capability-stats { display: block; width: min(calc(100% - 32px), 520px); margin-top: 0; }
  .story-page--cinematic .capability-stats > div { min-height: 122px; padding: 22px 28px; }
  .story-page--cinematic .capability-stats > div + div { border-top: 1px solid rgba(107, 173, 212, .22); border-left: 0; }
  .story-page--cinematic .capability-stats .story-stat strong,
  .story-page--cinematic .capability-stats dt { font-size: 48px; }
}

/* Cross-stylesheet locks: story-home.css is loaded after this file. */
.story-page--cinematic .story-capabilities--engine::before {
  inset: 0 0 auto 50% !important;
  height: 315px !important;
  opacity: .34 !important;
  background-image: var(--cap-reference) !important;
  background-repeat: no-repeat !important;
  background-size: 1670px 941px !important;
  background-position: right top !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%) !important;
}
.story-capabilities--engine .capability-panel__icon {
  height: 168px;
  mask-image: radial-gradient(ellipse 82% 78% at 50% 52%, #000 52%, rgba(0,0,0,.92) 66%, rgba(0,0,0,.28) 87%, transparent 100%);
}
.story-capabilities--engine .capability-panel {
  background: linear-gradient(180deg, rgba(13, 28, 44, .98) 0 24%, #020b16 24% 100%);
}
.story-page--cinematic .capability-stats > div {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Homepage priority showcase — faithful to the 2026-07-18 dark fan reference. */
.story-page--cinematic .story-usecases--ecosystem {
  overflow: hidden !important;
  padding: 0;
  background:
    radial-gradient(ellipse at 68% 38%, rgba(4, 70, 112, .2), transparent 38%),
    radial-gradient(ellipse at 57% 82%, rgba(0, 112, 168, .11), transparent 35%),
    linear-gradient(180deg, #010611 0%, #010a16 100%);
}

.story-page--cinematic .story-usecases--ecosystem::before {
  display: none;
}

.priority-showcase {
  position: relative;
  width: 100%;
  padding: 0 0 clamp(54px, 3.7vw, 64px);
}

.priority-showcase__main {
  display: grid;
  grid-template-columns: minmax(470px, 530px) minmax(650px, 1fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  width: var(--cb-shell);
  min-height: 690px;
  margin: 0 auto;
}

.priority-showcase__copy {
  position: relative;
  z-index: 3;
  padding-bottom: 8px;
}

.story-page--cinematic .priority-showcase__copy .story-eyebrow {
  margin: 0 0 28px;
  color: #86a9d2;
  font-size: clamp(11px, .8vw, 14px);
  font-weight: 700;
  letter-spacing: .29em;
  line-height: 1.3;
  text-transform: uppercase;
}

.story-page--cinematic .priority-showcase__copy h2 {
  max-width: 535px;
  margin: 0;
  color: #f4f4f2;
  font-size: var(--cb-title-hero);
  font-weight: var(--cb-display-weight);
  letter-spacing: -.058em;
  line-height: 1.02;
}

.story-page--cinematic .priority-showcase__copy h2 > span {
  display: block;
}

.priority-showcase__title-accent {
  width: max-content;
  max-width: none;
  margin-top: 7px;
  background: linear-gradient(98deg, #1876f2 0%, #138de9 52%, #2ce3d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: .9em;
  white-space: nowrap;
}

.priority-showcase__lead {
  max-width: 445px;
  margin: 27px 0 0;
  color: #aab3bf;
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: 400;
  line-height: 1.5;
}

.priority-showcase__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 14px;
  margin-top: 26px;
  color: #49c8f2;
  font-size: clamp(17px, 1.1vw, 20px);
  font-weight: 600;
  text-decoration: none;
}

.priority-showcase__cta span:last-child {
  font-size: 26px;
  line-height: 1;
  transition: translate .25s cubic-bezier(.16, 1, .3, 1);
}

.priority-showcase__cta:hover span:last-child {
  translate: 6px 0;
}

.priority-showcase__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 440px);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.priority-showcase__benefits li {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 90px;
  place-items: center;
  align-content: space-between;
  padding: 0 20px;
  border-left: 1px solid rgba(130, 164, 198, .24);
  color: #c4cbd4;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.priority-showcase__benefits li:first-child {
  padding-left: 0;
  border-left: 0;
}

.priority-showcase__benefit-icon {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
}

.priority-showcase__benefit-icon svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #c7d7e5;
  stroke-width: 1.35;
}

.priority-showcase__benefits li:nth-child(2) svg {
  stroke: #55c8ff;
}

.priority-showcase__benefit-icon i,
.priority-showcase__facts li i {
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #70ff76;
  box-shadow: 0 0 8px #70ff76;
}

/* Angle unique partagé : pales, orbite et contre-rotation lisent la même variable animée,
   ce qui rend tout déphasage (resize, breakpoint, fullscreen) impossible. */
@property --fan-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.priority-fan {
  --fan-cx: 49%;
  --fan-cy: 45.5%;
  --fan-duration: 42s;
  --fan-angle: 0deg;
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(100%, 920px);
  aspect-ratio: 1000 / 770;
  color: #f7f9fb;
  transform-origin: right center;
  /* Descendu pour que le disque de rotation complet (pointes de pales comprises)
     reste visible : plus de coupe au bord haut de la section. */
  translate: 0 28px;
  scale: 1.043;
  animation: priority-fan-angle var(--fan-duration) linear infinite;
}

.priority-fan__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Voile annulaire statique : éteint les pales du visuel de repos dans la zone de rotation
   (moyeu et fond extérieur préservés), bords feathered pour rester invisible. */
.priority-fan__stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 43% 55.84% at 49% 45.5%, transparent 26%, #010510 34%, #010510 83%, transparent 95%);
}

/* Boîte du rotor : cale la copie paddée (70px de plus en haut) sur le visuel statique. */
.priority-fan__rotorbox {
  position: absolute;
  z-index: 1;
  top: -9.0909%;
  left: 0;
  width: 100%;
  height: 109.0909%;
  pointer-events: none;
}

/* Rotor ADDITIF : copie paddée dont le fond est écrasé au noir (curves ffmpeg) et
   composée en mix-blend-mode:screen — il n'apporte que la lumière des pales, donc
   aucun raccord/tache possible avec le fond statique, quel que soit l'angle. */
.priority-fan__art--rotor {
  transform-origin: 49% 50%;
  transform: rotate(var(--fan-angle));
  will-change: transform;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 43% 51.2% at 49% 50%, transparent 26%, #000 34%, #000 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 43% 51.2% at 49% 50%, transparent 26%, #000 34%, #000 88%, transparent 100%);
}

.priority-fan__orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: var(--fan-cx) var(--fan-cy);
  transform: rotate(var(--fan-angle));
  will-change: transform;
  pointer-events: none;
}

.priority-fan__orbit .priority-fan__product {
  transform: translate(-50%, -50%) rotate(calc(0deg - var(--fan-angle)));
  will-change: transform;
  pointer-events: auto;
}

@keyframes priority-fan-angle {
  from { --fan-angle: 0deg; }
  to { --fan-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .priority-fan {
    animation: none;
  }

  .priority-fan__rotorbox,
  .priority-fan__stage {
    display: none;
  }
}

.priority-fan__product,
.priority-fan__hub,
.priority-fan__orbit-label {
  position: absolute;
  z-index: 2;
}

.priority-fan__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #f6f7f8;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .88);
  transform: translate(-50%, -50%);
  transition: scale .25s cubic-bezier(.16, 1, .3, 1);
}

.priority-fan__product:hover {
  scale: 1.06;
}

.priority-fan__product svg {
  width: 39px;
  height: 39px;
  margin-bottom: 8px;
  fill: none;
  stroke: #f3f7fa;
  stroke-width: 1.9;
}

.priority-fan__product strong {
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-transform: uppercase;
}

.priority-fan__product small {
  margin-top: 4px;
  color: #d3d7dc;
  font-size: clamp(10px, .72vw, 13px);
  font-weight: 400;
  line-height: 1.15;
}

.priority-fan__product--deskio { top: 17%; left: 50%; }
.priority-fan__product--serenia { top: 29%; left: 25%; }
.priority-fan__product--ovastack { top: 33%; left: 72%; }
.priority-fan__product--neoo { top: 63%; left: 24%; }
.priority-fan__product--solenio { top: 64%; left: 73%; }
.priority-fan__product--m365 { top: 78%; left: 49%; }
.priority-fan__product--neoo strong { text-transform: none; }
.priority-fan__product--m365 svg { fill: #f5f7f8; stroke: none; }

.priority-fan__hub {
  top: 45.5%;
  left: 48.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 190px;
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .85);
  transform: translate(-50%, -50%);
}

.priority-fan__hub strong {
  font-size: clamp(23px, 1.75vw, 31px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1;
}

.priority-fan__hub strong::first-letter {
  text-transform: lowercase;
}

.priority-fan__hub small {
  margin-top: 9px;
  color: #eef1f4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.1;
  text-transform: uppercase;
}

.priority-fan__orbit-label {
  color: rgba(53, 153, 213, .64);
  font-size: clamp(9px, .8vw, 13px);
  font-weight: 700;
  letter-spacing: .42em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.priority-fan__orbit-label--team { top: 46%; left: 6.3%; transform: rotate(-82deg); }
.priority-fan__orbit-label--control { top: 45%; right: 1.6%; transform: rotate(82deg); }
.priority-fan__orbit-label--platform { bottom: 2.5%; left: 50%; transform: translateX(-50%); }

.priority-showcase__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: var(--cb-shell);
  min-height: 90px;
  /* Sous le disque de rotation de l'hélice (plus de chevauchement des pointes de pales). */
  margin: 20px auto 0;
  padding: 0 22px;
  border: 1px solid rgba(119, 151, 181, .42);
  border-radius: 22px;
  background: rgba(1, 10, 21, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  list-style: none;
}

.priority-showcase__facts li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 0;
  border-left: 0;
  color: #8cc4eb;
  font-size: clamp(11px, .85vw, 14px);
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.25;
  text-transform: uppercase;
}

.priority-showcase__facts li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 42px;
  background: rgba(116, 149, 180, .25);
  transform: translateY(-50%);
}

.priority-showcase__facts svg {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  fill: none;
  stroke: #78c9f4;
  stroke-width: 1.2;
}

.priority-showcase__facts li i {
  right: auto;
  bottom: 20px;
  left: calc(50% - 56px);
}

@media (max-width: 1280px) {
  .priority-showcase__main {
    grid-template-columns: minmax(410px, 470px) minmax(560px, 1fr);
    gap: 12px;
  }

  .story-page--cinematic .priority-showcase__copy h2 {
    font-size: var(--cb-title-section-side);
  }

  .priority-showcase__facts {
    padding: 0 12px;
  }

  .priority-showcase__facts li {
    gap: 14px;
    letter-spacing: .15em;
  }
}

@media (max-width: 1120px) {
  .priority-showcase {
    padding-top: 82px;
  }

  .priority-showcase__main {
    grid-template-columns: 1fr;
    gap: 46px;
    min-height: 0;
  }

  .priority-showcase__copy {
    width: min(100%, 650px);
  }

  .priority-fan {
    justify-self: center;
    width: min(100%, 900px);
    translate: 0 24px;
    scale: 1;
  }

  .priority-showcase__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px;
    padding: 0 24px;
  }

  .priority-showcase__facts li {
    min-height: 84px;
  }

  .priority-showcase__facts li + li::before {
    display: none;
  }

  .priority-showcase__facts li:nth-child(even) {
    border-left: 1px solid rgba(116, 149, 180, .25);
  }

  .priority-showcase__facts li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(116, 149, 180, .25);
  }

  .priority-showcase__facts li:nth-child(4) {
    border-top: 1px solid rgba(116, 149, 180, .25);
  }
}

@media (max-width: 700px) {
  .priority-showcase__title-accent {
    width: auto;
    max-width: 100%;
    font-size: 0.88em;
    white-space: normal;
  }

  .priority-showcase__lead {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .priority-showcase__benefits li > span:last-child {
    max-width: 100%;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .priority-showcase {
    padding: 72px 0 48px;
  }

  .priority-showcase__main,
  .priority-showcase__facts {
    width: min(calc(100% - 32px), 620px);
  }

  .story-page--cinematic .priority-showcase__copy .story-eyebrow {
    margin-bottom: 22px;
    font-size: 10px;
  }

  .story-page--cinematic .priority-showcase__copy h2 {
    max-width: 100%;
    font-size: var(--cb-title-section-side);
    line-height: 1;
  }

  .priority-showcase__lead {
    margin-top: 24px;
    font-size: 18px;
  }

  .priority-showcase__benefits {
    width: 100%;
  }

  .priority-showcase__benefits li {
    padding: 0 8px;
    font-size: 12px;
  }

  .priority-showcase__benefit-icon {
    scale: .88;
  }

  .priority-fan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-left: 0;
    aspect-ratio: auto;
    translate: 0;
    scale: 1;
  }

  .priority-fan__art {
    position: relative;
    grid-column: 1 / -1;
    inset: auto;
    height: auto;
    aspect-ratio: 1000 / 770;
    margin-bottom: -34px;
  }

  .priority-fan {
    animation: none;
  }

  .priority-fan__rotorbox,
  .priority-fan__stage {
    display: none;
  }

  .priority-fan__orbit {
    display: contents;
  }

  .priority-fan__orbit-label,
  .priority-fan__hub {
    display: none;
  }

  .priority-fan .priority-fan__product {
    position: relative;
    top: auto;
    left: auto;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    min-height: 82px;
    padding: 13px 12px;
    border: 1px solid rgba(90, 180, 225, .24);
    border-radius: 15px;
    background:
      linear-gradient(145deg, rgba(16, 57, 83, .68), rgba(2, 14, 29, .86)),
      radial-gradient(circle at 28% 15%, rgba(28, 218, 255, .15), transparent 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 0, 0, .2);
    text-align: left;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
    transform: none;
  }

  .priority-fan__product svg {
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    margin: 0;
    stroke: #8bdcff;
  }

  .priority-fan__product strong {
    align-self: end;
    font-size: 13px;
    line-height: 1.08;
  }

  .priority-fan__product small {
    align-self: start;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.15;
  }

  .priority-showcase__facts {
    margin-top: 24px;
    padding: 0 10px;
    border-radius: 18px;
  }

  .priority-showcase__facts li {
    justify-content: flex-start;
    gap: 11px;
    padding: 0 10px;
    font-size: 9px;
    letter-spacing: .13em;
  }

  .priority-showcase__facts svg {
    width: 34px;
    height: 34px;
  }

  .priority-showcase__facts li i {
    bottom: 21px;
    left: 39px;
  }
}

@media (max-width: 390px) {
  .priority-showcase__benefits li {
    min-height: 82px;
    font-size: 11px;
  }

  .priority-showcase__facts li {
    padding: 0 6px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .priority-showcase__cta span:last-child,
  .priority-fan__product {
    transition: none;
  }
}

/* Homepage capability flow — clean live-DOM reconstruction of the 2026-07-18 reference. */
.story-page--cinematic .fullscreen-toggle {
  display: none;
}

.story-page--cinematic .story-capabilities--engine {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 69% 41%, rgba(4, 65, 107, .13), transparent 43%),
    linear-gradient(180deg, #00050e 0%, #010914 100%);
}

.story-page--cinematic .story-capabilities--engine::before,
.story-page--cinematic .story-capabilities--engine::after {
  display: none !important;
}

.story-capabilities--engine .story-capabilities__engine-shell {
  position: relative;
  width: min(100%, 1775px);
  max-width: none;
  min-height: 0;
  margin: 0 auto;
  aspect-ratio: 1775 / 886;
}

.story-capabilities--engine .story-capabilities__intro {
  position: absolute;
  z-index: 4;
  top: 4.45%;
  left: 3.66%;
  width: min(33%, 585px);
  margin: 0;
}

.story-page--cinematic .story-capabilities__intro .story-eyebrow {
  margin: 0 0 22px;
  color: #a8d6f5;
  font-size: clamp(10px, .78vw, 14px);
  font-weight: 700;
  letter-spacing: .3em;
  line-height: 1.1;
}

.story-page--cinematic .story-capabilities__intro h2 {
  margin: 0;
  color: #f5f6f7;
  font-family: var(--font-family);
  font-size: var(--cb-title-section-side);
  font-weight: var(--cb-display-weight);
  letter-spacing: -.045em;
  line-height: 1.08;
}

.story-capabilities__intro h2 > span {
  display: block;
}

.story-page--cinematic .story-capabilities__intro .story-capabilities__accent {
  background: linear-gradient(90deg, #167bff 0%, #08aef2 56%, #23ded1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-page--cinematic .story-capabilities__intro > p:not(.story-eyebrow) {
  max-width: 470px;
  margin: 19px 0 0;
  color: rgba(233, 239, 246, .83);
  font-size: clamp(15px, 1.08vw, 20px);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.45;
}

.story-page--cinematic .story-capabilities__cta {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  min-height: 44px;
  margin-top: 18px;
  color: #25cfff;
  font-size: clamp(13px, .86vw, 16px);
  font-weight: 500;
  text-decoration: none;
}

.story-page--cinematic .story-capabilities__cta > span:last-child {
  font-size: 1.45em;
  font-weight: 300;
  transition: transform .2s ease;
}

.story-page--cinematic .story-capabilities__cta:hover > span:last-child,
.story-page--cinematic .story-capabilities__cta:focus-visible > span:last-child {
  transform: translateX(5px);
}

.story-capabilities--engine .capability-flow {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.capability-flow__art {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Overlay énergie : impulsions le long de la trajectoire baked + halos des LED. */
.capability-flow__energy {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.capability-flow__node {
  fill: #7dff8e;
  filter: drop-shadow(0 0 6px rgba(110, 255, 140, .9));
  animation: capability-node-breathe 4.6s ease-in-out infinite;
}

.capability-flow__status i {
  animation: capability-status-breathe 4.6s ease-in-out infinite;
}

.capability-flow__item--protect .capability-flow__status i { animation-delay: -1.15s; }
.capability-flow__item--support .capability-flow__status i { animation-delay: -2.3s; }
.capability-flow__item--automate .capability-flow__status i { animation-delay: -3.45s; }

@keyframes capability-node-breathe {
  0%, 100% { opacity: .16; }
  50% { opacity: .72; }
}

@keyframes capability-status-breathe {
  0%, 100% { opacity: .62; box-shadow: 0 0 4px #62ff79, 0 0 9px rgba(98, 255, 121, .4); }
  50% { opacity: 1; box-shadow: 0 0 6px #62ff79, 0 0 16px rgba(98, 255, 121, .85); }
}

@media (prefers-reduced-motion: reduce) {
  .capability-flow__energy .capability-flow__pulse {
    display: none;
  }

  .capability-flow__node,
  .capability-flow__status i {
    animation: none;
  }
}

.capability-flow__item {
  --links-top: 245px;
  --links-left: 0;
  --status-top: 305px;
  --status-left: 0;
  position: absolute;
  z-index: 2;
  width: min(19%, 320px);
  color: #f4f6f9;
}

.capability-flow__item--host {
  top: 41.6%;
  left: 6.82%;
  --links-top: clamp(185px, 14.1vw, 250px);
  --links-left: 84%;
  --status-top: clamp(239px, 17.4vw, 309px);
  --status-left: 36%;
}

.capability-flow__item--protect {
  top: 33%;
  left: 31.93%;
  --links-top: clamp(231px, 17.4vw, 309px);
  --links-left: 55%;
  --status-top: clamp(283px, 21vw, 373px);
  --status-left: 14%;
}

.capability-flow__item--support {
  top: 29.1%;
  left: 52.25%;
  --links-top: clamp(237px, 17.6vw, 313px);
  --links-left: 36%;
  --status-top: clamp(282px, 20.9vw, 371px);
  --status-left: 20%;
}

.capability-flow__item--automate {
  top: 29.1%;
  left: 73.08%;
  --links-top: clamp(236px, 17.4vw, 309px);
  --links-left: -9%;
  --status-top: clamp(288px, 21.4vw, 380px);
  --status-left: 11%;
}

.capability-flow__heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.capability-flow__number {
  flex: none;
  color: #dce6f0;
  font-size: clamp(11px, .84vw, 15px);
  font-weight: 500;
  letter-spacing: .03em;
}

.capability-flow__item h3 {
  margin: 0;
  color: #f3f5f7;
  font-size: clamp(14px, 1.08vw, 20px);
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.1;
  text-transform: uppercase;
}

.capability-flow__copy {
  max-width: 225px;
  margin: 8px 0 0;
  color: rgba(224, 231, 239, .9);
  font-size: clamp(12px, .93vw, 17px);
  font-weight: 400;
  line-height: 1.38;
}

.capability-flow__links {
  position: absolute;
  top: var(--links-top);
  left: var(--links-left);
  display: grid;
  gap: 7px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-flow__links li {
  display: flex;
  align-items: center;
  gap: 11px;
}

.capability-flow__links li::before {
  content: "";
  width: 6px;
  height: 2px;
  background: #35d8ff;
  box-shadow: 0 0 8px rgba(53, 216, 255, .82);
}

.capability-flow__links a {
  color: rgba(236, 241, 247, .9);
  font-size: clamp(12px, .85vw, 15px);
  font-weight: 400;
  text-decoration: none;
}

.capability-flow__links a:hover,
.capability-flow__links a:focus-visible {
  color: #56dcff;
}

.capability-flow__status {
  position: absolute;
  top: var(--status-top);
  left: var(--status-left);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: clamp(160px, 12.2vw, 220px);
  min-height: 33px;
  padding: 6px 15px;
  border: 1px solid rgba(91, 174, 209, .27);
  border-radius: 999px;
  background: rgba(2, 14, 26, .62);
  color: #5cff77;
  font-size: clamp(9px, .66vw, 12px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.capability-flow__status i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #62ff79;
  box-shadow: 0 0 4px #62ff79, 0 0 13px rgba(98, 255, 121, .76);
}

.story-page--cinematic .story-capabilities--engine .capability-stats {
  position: absolute;
  z-index: 4;
  right: auto;
  bottom: 4.45%;
  left: 21.1%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 59.6%;
  max-width: none;
  min-height: 12.1%;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.story-page--cinematic .story-capabilities--engine .capability-stats > div {
  display: grid;
  grid-template-columns: clamp(62px, 4.5vw, 80px) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(22px, 2.7vw, 48px);
  align-items: center;
  min-height: 100%;
  padding: 0 clamp(22px, 2.5vw, 44px);
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.story-page--cinematic .story-capabilities--engine .capability-stats > div + div {
  border-top: 0;
  border-left: 1px solid rgba(128, 173, 203, .42);
}

.story-page--cinematic .story-capabilities--engine .capability-stats svg {
  grid-row: 1 / 3;
  width: clamp(62px, 4.5vw, 80px);
  height: clamp(62px, 4.5vw, 80px);
  overflow: visible;
  fill: rgba(3, 22, 38, .08);
  stroke: #45c9ff;
  stroke-width: 1.05;
  filter: drop-shadow(0 0 8px rgba(18, 178, 255, .18));
}

.story-page--cinematic .story-capabilities--engine .capability-stats .story-stat strong {
  align-self: end;
  color: #f0f4f8;
  font-size: clamp(38px, 3.15vw, 56px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .95;
}

.story-page--cinematic .story-capabilities--engine .capability-stats .story-stat span {
  align-self: start;
  margin-top: 8px;
  color: rgba(215, 224, 234, .82);
  font-size: clamp(10px, .75vw, 13px);
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .story-page--cinematic .story-capabilities--engine {
    padding: 58px 0 64px;
  }

  .story-capabilities--engine .story-capabilities__engine-shell {
    width: min(calc(100% - 48px), 940px);
    aspect-ratio: auto;
  }

  .story-capabilities--engine .story-capabilities__intro {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 620px);
  }

  .story-page--cinematic .story-capabilities__intro h2 {
    font-size: var(--cb-title-section-side);
  }

  .story-capabilities--engine .capability-flow {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 36px;
    padding-top: min(45vw, 430px);
  }

  .capability-flow__art {
    z-index: 0;
    height: auto;
    max-height: 430px;
    object-fit: contain;
    object-position: center top;
    opacity: .76;
  }

  .capability-flow__energy {
    display: none;
  }

  .capability-flow__item,
  .capability-flow__item--host,
  .capability-flow__item--protect,
  .capability-flow__item--support,
  .capability-flow__item--automate {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    width: auto;
    min-height: 265px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(83, 178, 222, .28);
    border-radius: 28px 12px 28px 12px;
    background:
      radial-gradient(circle at 80% 5%, rgba(18, 192, 255, .16), transparent 44%),
      linear-gradient(145deg, rgba(9, 38, 60, .82), rgba(2, 12, 25, .9));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .1),
      0 18px 40px rgba(0, 0, 0, .2);
  }

  .capability-flow__copy {
    max-width: 320px;
    font-size: 15px;
  }

  .capability-flow__links {
    position: static;
    margin-top: auto;
    padding-top: 25px;
  }

  .capability-flow__links a {
    font-size: 14px;
  }

  .capability-flow__status {
    position: static;
    width: max-content;
    max-width: 100%;
    margin-top: 20px;
    font-size: 10px;
  }

  .story-page--cinematic .story-capabilities--engine .capability-stats {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 140px;
    margin: 46px 0 0;
  }

  .story-page--cinematic .story-capabilities--engine .capability-stats > div {
    padding: 18px 24px;
  }
}

@media (max-width: 660px) {
  .story-page--cinematic .story-capabilities--engine {
    padding: 50px 0 52px;
  }

  .story-capabilities--engine .story-capabilities__engine-shell {
    width: min(calc(100% - 28px), 520px);
  }

  .story-page--cinematic .story-capabilities__intro h2 {
    font-size: var(--cb-title-section-side);
  }

  .story-page--cinematic .story-capabilities__intro > p:not(.story-eyebrow) {
    font-size: 17px;
  }

  .story-capabilities--engine .capability-flow {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: min(55vw, 250px);
  }

  .capability-flow__art {
    max-height: 250px;
    opacity: .7;
  }

  .capability-flow__item,
  .capability-flow__item--host,
  .capability-flow__item--protect,
  .capability-flow__item--support,
  .capability-flow__item--automate {
    min-height: 245px;
    padding: 24px;
    border-radius: 24px 10px 24px 10px;
  }

  .capability-flow__heading {
    gap: 13px;
  }

  .capability-flow__item h3 {
    font-size: 17px;
  }

  .story-page--cinematic .story-capabilities--engine .capability-stats {
    display: block;
    min-height: 0;
    margin-top: 32px;
  }

  .story-page--cinematic .story-capabilities--engine .capability-stats > div {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 122px;
    padding: 20px 24px;
  }

  .story-page--cinematic .story-capabilities--engine .capability-stats > div + div {
    border-top: 1px solid rgba(128, 173, 203, .28);
    border-left: 0;
  }

  .story-page--cinematic .story-capabilities--engine .capability-stats .story-stat strong {
    font-size: 46px;
  }

  .story-page--cinematic .story-capabilities--engine .capability-stats .story-stat span {
    font-size: 12px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-capabilities__cta > span:last-child {
    transition: none;
  }
}

/* ===== HOMEPAGE PRICING — SCREENSHOT REFERENCE 2026-07-19 ===== */
.story-page--cinematic .story-pricing--reference {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 941px;
  padding: 70px 0 83px;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 54% 76% at 76% 46%, rgba(18, 73, 130, .13), transparent 70%),
    radial-gradient(ellipse 42% 68% at 10% 50%, rgba(7, 65, 116, .16), transparent 72%),
    linear-gradient(116deg, #001024 0%, #001126 43%, #000b1c 100%);
}

.story-page--cinematic .story-pricing--reference::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: min(46vw, 770px);
  pointer-events: none;
  opacity: .68;
  background-image:
    radial-gradient(circle at 290px 42px, #168dff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 445px 94px, #168dff 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 285px 817px, #168dff 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 331px 877px, #168dff 0 1.2px, transparent 2.2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='206' height='178' viewBox='0 0 206 178'%3E%3Cg fill='none' stroke='%231260a2' stroke-opacity='.42' stroke-width='.8'%3E%3Cpath d='M52 1 102 30v58l-50 29L2 88V30Z'/%3E%3Cpath d='m154 60 50 29v58l-50 29-50-29V89Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, -69px -55px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .92) 54%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .92) 54%, transparent 100%);
}

.story-page--cinematic .story-pricing--reference::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 720px;
  height: 720px;
  right: -300px;
  top: -420px;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(35, 113, 187, .08);
  filter: blur(90px);
}

.story-page--cinematic .story-pricing--reference > .story-shell {
  position: relative;
  z-index: 1;
  width: var(--cb-shell);
  min-height: 788px;
  padding-inline: 18px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 428px minmax(0, 1fr);
  gap: 68px;
  align-items: start;
}

.story-page--cinematic .story-pricing--reference > .story-shell > header,
.story-page--cinematic .story-pricing--reference > .story-shell > header.story-reveal {
  position: relative;
  top: auto;
  max-width: 428px;
  padding-left: 8px;
  padding-top: 54px;
  box-sizing: border-box;
}

.story-page--cinematic .story-pricing--reference > .story-shell > header::after {
  display: none;
}

.story-pricing--reference .story-pricing__eyebrow {
  display: flex;
  align-items: center;
  gap: 21px;
}

.story-pricing--reference .story-pricing__eyebrow-icon {
  width: 28px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  color: #42d9ff;
}

.story-pricing--reference .story-pricing__eyebrow-icon svg {
  width: 28px;
  height: 32px;
  overflow: visible;
  fill: rgba(6, 65, 118, .16);
  stroke: currentColor;
  stroke-width: 1.45;
  filter: drop-shadow(0 0 8px rgba(44, 193, 255, .25));
}

.story-page--cinematic .story-pricing--reference .story-eyebrow {
  margin: 0;
  color: #5fe0ff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .22em;
}

.story-page--cinematic .story-pricing--reference h2 {
  width: 100%;
  max-width: 420px;
  margin: 43px 0 0;
  color: #f7f9ff;
  font-size: min(var(--cb-title-section), 69px);
  font-weight: var(--cb-display-weight);
  line-height: 1.025;
  letter-spacing: -.058em;
  text-wrap: wrap;
}

.story-page--cinematic .story-pricing--reference .story-section-lead {
  max-width: 372px;
  margin: 61px 0 0;
  color: rgba(216, 226, 247, .88);
  font-size: 20.5px;
  font-weight: 400;
  line-height: 1.61;
  letter-spacing: -.018em;
}

.story-pricing--reference .story-pricing__rule {
  position: relative;
  width: 118px;
  height: 2px;
  margin-top: 31px;
  display: block;
  overflow: hidden;
  background: linear-gradient(90deg, #45dbff 0 58%, rgba(43, 133, 203, .36) 58% 68%, transparent 100%);
  box-shadow: 0 0 12px rgba(69, 219, 255, .22);
}

.story-page--cinematic .story-pricing--reference .story-price-grid {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 468px minmax(0, 1fr);
  grid-template-rows: 398px 366px;
  gap: 24px 26px;
}

.story-page--cinematic .story-pricing--reference .story-price,
.story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
  --offer-accent: #57d6ff;
  --offer-glow: rgba(31, 150, 231, .14);
  position: relative;
  grid-column: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 30px 46px 28px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(83, 164, 233, .68);
  border-radius: 32px;
  color: #f7f9ff;
  background:
    radial-gradient(circle at 8% 3%, rgba(29, 101, 184, .27), transparent 34%),
    radial-gradient(circle at 88% 12%, var(--offer-glow), transparent 40%),
    linear-gradient(137deg, rgba(6, 31, 62, .96), rgba(2, 18, 41, .98) 58%, rgba(1, 14, 33, .99));
  box-shadow:
    inset 0 1px 0 rgba(171, 225, 255, .045),
    0 28px 70px rgba(0, 2, 12, .22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.story-page--cinematic .story-pricing--reference .story-price::before {
  content: "";
  position: absolute;
  left: -8%;
  right: auto;
  top: -34%;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  opacity: 1;
  background: radial-gradient(circle, rgba(47, 150, 242, .11), transparent 70%);
  pointer-events: none;
}

.story-page--cinematic .story-pricing--reference .story-price::after {
  content: attr(data-offer-mark);
  position: absolute;
  right: 25px;
  bottom: -24px;
  color: #b4d8ff;
  font-size: 146px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.08em;
  opacity: .055;
  pointer-events: none;
}

.story-page--cinematic .story-pricing--reference .story-price:hover {
  transform: translateY(-2px);
  border-color: rgba(95, 204, 255, .9);
  box-shadow:
    inset 0 1px 0 rgba(171, 225, 255, .07),
    0 30px 76px rgba(0, 2, 12, .3),
    0 0 30px rgba(36, 160, 233, .06);
}

.story-pricing--reference .story-price__brand {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.story-pricing--reference .story-price__icon {
  width: 56px;
  height: 60px;
  display: block;
  flex: 0 0 56px;
  color: #55d9ff;
  filter: drop-shadow(0 0 13px rgba(53, 182, 255, .18));
}

.story-pricing--reference .story-price__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.story-pricing--reference .story-price__icon-frame {
  fill: rgba(4, 57, 102, .22);
  stroke: #3eacfb;
  stroke-width: 1.25;
}

.story-pricing--reference .story-price__icon-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-pricing--reference .story-price__icon-glyph--fill {
  fill: currentColor;
  stroke: none;
}

.story-page--cinematic .story-pricing--reference .story-price h3 {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  color: #f8f9ff;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.story-page--cinematic .story-pricing--reference .story-price > .story-price__from {
  position: relative;
  z-index: 1;
  margin: 28px 0 0;
  color: rgba(239, 243, 255, .9);
  font-size: 19.5px;
  font-weight: 400;
  line-height: 1.18;
}

.story-page--cinematic .story-pricing--reference .story-price__price {
  position: relative;
  z-index: 1;
  min-height: 0;
  margin: 1px 0 0;
  display: block;
  color: #4dcaff;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-shadow: 0 0 22px rgba(52, 185, 247, .16);
}

.story-page--cinematic .story-pricing--reference .story-price__price strong {
  display: block;
  color: #4dcaff;
  font-size: 72px;
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.052em;
}

.story-page--cinematic .story-pricing--reference .story-price__price small {
  display: block;
  margin-top: 5px;
  color: rgba(236, 241, 255, .88);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
}

.story-page--cinematic .story-pricing--reference .story-price__price--text {
  margin-top: 28px;
}

.story-page--cinematic .story-pricing--reference .story-price__price--text strong {
  font-size: 49px;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.story-pricing--reference .story-price__divider {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 1px;
  display: block;
  margin-top: 12px;
  background: linear-gradient(90deg, rgba(74, 203, 255, .62), rgba(74, 203, 255, .08));
}

.story-page--cinematic .story-pricing--reference .story-price__price--text + .story-price__divider {
  margin-top: 22px;
}

.story-page--cinematic .story-pricing--reference .story-price > p:not(.story-price__price):not(.story-price__from) {
  position: relative;
  z-index: 1;
  max-width: 35ch;
  margin: 22px 0 0;
  color: rgba(222, 229, 248, .88);
  font-size: 18.5px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.014em;
}

.story-page--cinematic .story-pricing--reference .story-price--deskio > p:not(.story-price__price):not(.story-price__from),
.story-page--cinematic .story-pricing--reference .story-price--ovastack > p:not(.story-price__price):not(.story-price__from) {
  max-width: 315px;
}

.story-page--cinematic .story-pricing--reference .story-price--serenia > p:not(.story-price__price):not(.story-price__from) {
  max-width: 300px;
}

.story-page--cinematic .story-pricing--reference .story-price--neoo > p:not(.story-price__price):not(.story-price__from) {
  max-width: 335px;
}

.story-page--cinematic .story-pricing--reference .story-price__cta {
  position: absolute;
  z-index: 2;
  left: 46px;
  bottom: 27px;
  width: fit-content;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #49dcff;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.story-page--cinematic .story-pricing--reference .story-price__cta svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.story-page--cinematic .story-pricing--reference .story-price:hover .story-price__cta svg {
  transform: translateX(5px);
}

.story-page--cinematic .story-pricing--reference .story-price:nth-child(n + 3) .story-price__cta {
  bottom: 30px;
}

@media (max-width: 1440px) {
  .story-page--cinematic .story-pricing--reference {
    min-height: 900px;
    padding: 64px 0;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell {
    min-height: 0;
    padding-inline: 0;
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
    gap: clamp(44px, 5vw, 72px);
  }

  .story-page--cinematic .story-pricing--reference .story-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 370px);
    gap: 22px;
  }

  .story-page--cinematic .story-pricing--reference .story-price,
  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
    padding-inline: 34px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__cta {
    left: 34px;
  }
}

@media (max-width: 1120px) {
  .story-page--cinematic .story-pricing--reference {
    min-height: 0;
    padding: 88px 0;
    border-radius: 0;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell > header,
  .story-page--cinematic .story-pricing--reference > .story-shell > header.story-reveal {
    max-width: 760px;
    padding-top: 0;
  }

  .story-page--cinematic .story-pricing--reference h2 {
    max-width: 10.5ch;
  }

  .story-page--cinematic .story-pricing--reference .story-section-lead {
    max-width: 620px;
  }

  .story-page--cinematic .story-pricing--reference .story-price-grid {
    grid-template-rows: repeat(2, 380px);
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-pricing--reference {
    padding: 74px 0;
  }

  .story-page--cinematic .story-pricing--reference::before {
    width: 100%;
    opacity: .42;
    mask-image: linear-gradient(180deg, #000 0%, transparent 46%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 46%);
  }

  .story-page--cinematic .story-pricing--reference > .story-shell {
    width: min(calc(100% - 32px), 620px);
    gap: 42px;
  }

  .story-page--cinematic .story-pricing--reference .story-eyebrow {
    font-size: 12px;
  }

  .story-page--cinematic .story-pricing--reference h2 {
    max-width: 8ch;
    margin-top: 34px;
    font-size: var(--cb-title-section-side);
    line-height: 1.02;
  }

  .story-page--cinematic .story-pricing--reference .story-section-lead {
    margin-top: 30px;
    font-size: 17.5px;
    line-height: 1.55;
  }

  .story-pricing--reference .story-pricing__rule {
    margin-top: 28px;
  }

  .story-page--cinematic .story-pricing--reference .story-price-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 18px;
  }

  .story-page--cinematic .story-pricing--reference .story-price,
  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
    height: auto;
    min-height: 360px;
    padding: 27px 26px 28px;
    border-radius: 26px;
  }

  .story-pricing--reference .story-price__icon {
    width: 52px;
    height: 56px;
    flex-basis: 52px;
  }

  .story-page--cinematic .story-pricing--reference .story-price h3 {
    font-size: 29px;
  }

  .story-pricing--reference .story-price__from {
    margin-top: 25px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__price strong {
    font-size: 62px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__price--text strong {
    font-size: 42px;
  }

  .story-page--cinematic .story-pricing--reference .story-price > p:not(.story-price__price):not(.story-price__from) {
    max-width: 31ch;
    font-size: 17px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__cta {
    left: 26px;
    bottom: 27px;
    font-size: 16.5px;
  }
}

@media (max-width: 390px) {
  .story-page--cinematic .story-pricing--reference > .story-shell {
    width: min(calc(100% - 24px), 620px);
  }

  .story-page--cinematic .story-pricing--reference .story-price,
  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
    padding-inline: 22px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__cta {
    left: 22px;
    max-width: calc(100% - 44px);
  }
}

/* ——— Partners section : visuel référence ——— */
.story-page--cinematic .story-partners {
  position: relative;
  overflow: hidden;
}

.story-page--cinematic .story-partners::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='196' height='170' viewBox='0 0 196 170'%3E%3Cpath d='M49 3 94 29v52L49 107 4 81V29Z' fill='none' stroke='rgba(124,182,255,0.10)'/%3E%3Cpath d='M147 63l45 26v52l-45 26-45-26V89Z' fill='none' stroke='rgba(124,182,255,0.055)'/%3E%3C/svg%3E");
  background-size: 300px auto;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 78% 30%, #000 0%, transparent 72%);
}

.story-page--cinematic .story-partners > .story-shell {
  position: relative;
  z-index: 1;
}

.story-page--cinematic .story-partners__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.story-page--cinematic .story-partners__eyebrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #6fb9ff;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.story-page--cinematic .story-partners__title em {
  display: block;
  font-style: normal;
  background: linear-gradient(94deg, #3f7dff 8%, #6fc6ff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-page--cinematic .story-partners__lead {
  margin-top: 24px;
  padding-left: 22px;
  border-left: 3px solid rgba(88, 148, 255, 0.85);
  max-width: 56ch;
}

.story-page--cinematic .story-partner {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  border-radius: 20px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.story-page--cinematic .story-partner:hover {
  transform: translateY(-5px);
  border-color: rgba(134, 211, 255, 0.34);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.24),
    0 0 42px rgba(83, 171, 235, 0.07);
}

.story-page--cinematic .story-partner__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.story-page--cinematic .story-partner__head h3 {
  font-size: 21px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.story-page--cinematic .story-partner__icon {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 16px rgba(90, 170, 255, 0.22));
}

.story-page--cinematic .story-partner__hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgba(90, 160, 255, 0.055);
  stroke: rgba(126, 190, 255, 0.55);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.story-page--cinematic .story-partner__glyph {
  position: relative;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #9fd4ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-partner p {
  flex: 1;
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
}

.story-page--cinematic .story-partner__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: #6fb9ff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: color 0.2s ease;
}

.story-page--cinematic .story-partner__link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.story-page--cinematic .story-partner__link:hover {
  color: #a5dcff;
}

.story-page--cinematic .story-partner__link:hover svg {
  transform: translateX(3px);
}

.story-page--cinematic .story-partners__actions {
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: clamp(32px, 4.4vw, 50px);
}

.story-page--cinematic .story-partners__cta {
  min-height: 58px;
  padding: 0 30px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2f7bff, #58b8ff);
  box-shadow:
    0 0 0 1px rgba(150, 210, 255, 0.32),
    0 14px 40px rgba(47, 123, 255, 0.42),
    0 0 62px rgba(88, 184, 255, 0.26);
}

.story-page--cinematic .story-partners__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(170, 220, 255, 0.45),
    0 18px 48px rgba(47, 123, 255, 0.5),
    0 0 72px rgba(88, 184, 255, 0.34);
}

.story-page--cinematic .story-partners__divider {
  width: 1px;
  height: 36px;
  background: rgba(150, 190, 240, 0.25);
}

.story-page--cinematic .story-partners__expert {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #7ec0ff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: color 0.2s ease;
}

.story-page--cinematic .story-partners__expert span {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(126, 192, 255, 0.55);
}

.story-page--cinematic .story-partners__expert svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-partners__expert:hover {
  color: #aadcff;
}

@media (max-width: 900px) {
  .story-page--cinematic .story-partners__actions {
    flex-direction: column;
    gap: 18px;
  }

  .story-page--cinematic .story-partners__divider {
    display: none;
  }
}

@media (max-width: 560px) {
  .story-page--cinematic .story-partner__icon {
    width: 62px;
    height: 62px;
  }

  .story-page--cinematic .story-partner__glyph {
    width: 27px;
    height: 27px;
  }

  .story-page--cinematic .story-partner__head {
    gap: 16px;
  }
}

/* ===== HARMONISATION TYPO — STYLE HERO (2026-07-19) =====
   Toute la home adopte la typo de la hero : titres Cerebri Sans 300, ls -0.052em,
   lh 1.06, encre #cbd7eb ; eyebrows 16px/500/.08em ; leads 300/-0.018em ;
   accents en dégradé hero. Bloc volontairement en fin de fichier pour gagner la cascade. */
.story-page--cinematic {
  --cine-title-ink: #cbd7eb;
  --cine-title-font: var(--cb-display-font);
  --cine-title-weight: var(--cb-display-weight);
  --cine-title-ls: var(--cb-display-tracking);
  --cine-title-lh: var(--cb-display-leading);
  --cine-eyebrow-ink: rgba(211, 221, 237, 0.88);
  --cine-lead-ink: rgba(203, 215, 234, 0.78);
  --cine-accent-gradient: var(--cb-accent-gradient);
}

.story-page--cinematic .story-statement h2,
.story-page--cinematic .story-capabilities h2,
.story-page--cinematic .story-capabilities__intro h2,
.story-page--cinematic .story-usecases h2,
.story-page--cinematic .priority-showcase__copy h2,
.story-page--cinematic .story-stack h2,
.story-page--cinematic .story-proof h2,
.story-page--cinematic .story-pricing h2,
.story-page--cinematic .story-pricing--reference h2,
.story-page--cinematic .story-partners h2,
.story-page--cinematic .story-partners__title,
.story-page--cinematic .story-band h2,
.story-page--cinematic .story-faq h2,
.story-page--cinematic #diagnostic h2 {
  color: var(--cine-title-ink);
  font-family: var(--cine-title-font);
  font-weight: var(--cine-title-weight);
  letter-spacing: var(--cine-title-ls);
  line-height: var(--cine-title-lh);
}

.story-page--cinematic .story-statement em,
.story-page--cinematic .story-capabilities__accent,
.story-page--cinematic .story-capabilities__intro .story-capabilities__accent,
.story-page--cinematic .priority-showcase__title-accent,
.story-page--cinematic .story-partners__title em {
  font-style: normal;
  font-weight: var(--cine-title-weight);
  background: var(--cine-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-page--cinematic .story-eyebrow,
.story-page--cinematic .story-capabilities__intro .story-eyebrow,
.story-page--cinematic .story-pricing--reference .story-eyebrow,
.story-page--cinematic .story-partners__eyebrow {
  color: var(--cine-eyebrow-ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.story-page--cinematic .story-section-lead,
.story-page--cinematic .story-statement__lead,
.story-page--cinematic .story-capabilities__intro > p:not(.story-eyebrow),
.story-page--cinematic .story-stack .story-section-lead,
.story-page--cinematic .story-pricing--reference .story-section-lead {
  color: var(--cine-lead-ink);
  font-weight: 300;
  letter-spacing: -0.018em;
}

.story-page--cinematic .story-stat strong,
.story-page--cinematic .capability-stats .story-stat strong,
.story-page--cinematic .capability-stats dt {
  font-weight: 300;
}

/* ===== ÉCOSYSTÈME D'INTÉGRATIONS — RÉFÉRENCE 2026-07-19 ===== */
.story-page--cinematic .story-stack--integrations {
  position: relative;
  display: block;
  min-height: 704px;
  padding: 91px 0 78px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 54% at 50% 45%, rgba(20, 60, 108, 0.105), transparent 72%),
    linear-gradient(180deg, #030b18 0%, #020a16 100%);
}

.story-page--cinematic .story-stack--integrations::before {
  inset: -72px -30px;
  opacity: 0.23;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='206' height='178' viewBox='0 0 206 178'%3E%3Cg fill='none' stroke='%2316629f' stroke-opacity='.42' stroke-width='.8'%3E%3Cpath d='M52 1 102 30v58l-50 29L2 88V30Z'/%3E%3Cpath d='m154 60 50 29v58l-50 29-50-29V89Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: -38px -20px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.26) 33%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.26) 67%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.26) 33%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.26) 67%, #000 100%);
  animation: story-stack-hex-drift 30s ease-in-out infinite alternate;
}

.story-page--cinematic .story-stack--integrations::after {
  z-index: 0;
  bottom: -26%;
  height: 68%;
  background: radial-gradient(ellipse 52% 82% at 50% 100%, rgba(25, 90, 160, 0.075), transparent 72%);
}

.story-page--cinematic .story-stack--integrations > .story-integrations__intro {
  position: relative;
  z-index: 3;
  width: min(100% - 48px, 1536px);
  max-width: 1536px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.story-page--cinematic .story-stack--integrations > .story-integrations__intro::before {
  display: none;
}

.story-page--cinematic .story-stack--integrations .story-eyebrow {
  margin: 0 0 24px;
  color: #4fb7ed;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.19em;
  line-height: 1.2;
  text-transform: uppercase;
}

.story-page--cinematic .story-stack--integrations h2 {
  max-width: none;
  margin: 0 auto;
  color: #d8e2ef;
  font-size: clamp(42px, 3.05vw, 58px);
  font-weight: 300;
  letter-spacing: -0.052em;
  line-height: 1.05;
  text-wrap: balance;
}

.story-page--cinematic .story-stack--integrations h2 em {
  font-style: normal;
  font-weight: inherit;
  background: linear-gradient(90deg, #567eff 0%, #42bbdf 52%, #67e0b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-page--cinematic .story-stack--integrations .story-section-lead {
  display: grid;
  gap: 2px;
  max-width: 760px;
  margin: 31px auto 0;
  color: rgba(183, 201, 225, 0.74);
  font-size: 21px;
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.45;
}

.story-page--cinematic .story-integrations__carousel {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: 50px;
}

.story-page--cinematic .story-integrations__rail {
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 0 clamp(78px, 5.2vw, 106px) 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: clamp(78px, 5.2vw, 106px);
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.story-page--cinematic .story-integrations__rail::-webkit-scrollbar {
  display: none;
}

.story-page--cinematic .story-integrations__rail:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(92, 151, 255, 0.42);
}

.story-page--cinematic .story-integration-card {
  position: relative;
  display: flex;
  flex: 0 0 144px;
  width: 144px;
  height: 203px;
  padding: 27px 10px 17px;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  border: 1px solid rgba(80, 113, 160, 0.31);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(40, 79, 130, 0.09), transparent 45%),
    linear-gradient(180deg, rgba(6, 17, 33, 0.88), rgba(4, 13, 27, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(171, 211, 255, 0.025),
    0 12px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.64s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.64s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.story-page--cinematic .story-stack--integrations.is-in .story-integration-card {
  opacity: 1;
  translate: 0 0;
}

.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(1) { transition-delay: 0.30s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(2) { transition-delay: 0.34s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(3) { transition-delay: 0.38s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(4) { transition-delay: 0.42s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(5) { transition-delay: 0.46s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(6) { transition-delay: 0.50s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(7) { transition-delay: 0.54s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(8) { transition-delay: 0.58s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(9) { transition-delay: 0.62s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(10) { transition-delay: 0.66s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(11) { transition-delay: 0.70s; }
.story-page--cinematic .story-stack--integrations.is-in .story-integration-card:nth-child(12) { transition-delay: 0.74s; }

.story-page--cinematic .story-integration-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border: 1px solid rgba(73, 104, 151, 0.29);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(8, 21, 42, 0.94), rgba(4, 12, 27, 0.96));
  box-shadow: inset 0 1px 0 rgba(190, 220, 255, 0.03);
}

.story-page--cinematic .story-integration-card__icon img,
.story-page--cinematic .story-integration-card__icon svg {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.story-page--cinematic .story-integration-card__icon--parallels svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #ff505b;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255, 70, 82, 0.32));
}

.story-page--cinematic .story-integration-card__icon--m365 svg {
  width: 37px;
  height: 37px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}

.story-page--cinematic .m365-red { fill: #f25022; }
.story-page--cinematic .m365-green { fill: #7fba00; }
.story-page--cinematic .m365-blue { fill: #00a4ef; }
.story-page--cinematic .m365-yellow { fill: #ffb900; }

.story-page--cinematic .story-integration-card__icon--teams svg circle:first-child { fill: #7f86ec; }
.story-page--cinematic .story-integration-card__icon--teams svg circle:nth-child(2) { fill: #5668d8; }
.story-page--cinematic .story-integration-card__icon--teams svg > path:not(.integration-icon-letter) { fill: #5059b9; }
.story-page--cinematic .story-integration-card__icon--teams svg rect { fill: #6264a7; }

.story-page--cinematic .integration-icon-letter {
  fill: none;
  stroke: #f7f9ff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-integration-card__icon--outlook svg rect:first-child { fill: #1689d8; }
.story-page--cinematic .story-integration-card__icon--outlook svg > path { fill: #32a6ed; }
.story-page--cinematic .story-integration-card__icon--outlook svg rect:nth-of-type(2) { fill: #0876c9; }
.story-page--cinematic .story-integration-card__icon--outlook .integration-icon-letter { stroke-width: 3.2; }

.story-page--cinematic .story-integration-card__icon--entra svg path:first-child { fill: #3baee6; }
.story-page--cinematic .story-integration-card__icon--entra svg path:nth-child(2) { fill: #69d5ef; }
.story-page--cinematic .story-integration-card__icon--entra svg path:nth-child(3) { fill: #247fd0; }

.story-page--cinematic .story-integration-card__icon--defender svg path:first-child {
  fill: #2e8ee9;
  filter: drop-shadow(0 0 5px rgba(46, 142, 233, 0.28));
}
.story-page--cinematic .story-integration-card__icon--defender svg path:nth-child(2) {
  fill: none;
  stroke: #9bd7ff;
  stroke-width: 1.6;
}

.story-page--cinematic .story-integration-card__icon--intune svg {
  fill: rgba(52, 169, 226, 0.12);
  stroke: #61c7ef;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-integration-card__icon--sharepoint svg circle:first-child { fill: #35b9bc; }
.story-page--cinematic .story-integration-card__icon--sharepoint svg circle:nth-child(2) { fill: #159b9e; }
.story-page--cinematic .story-integration-card__icon--sharepoint svg circle:nth-child(3) { fill: #0c727b; }
.story-page--cinematic .story-integration-card__icon--sharepoint svg rect { fill: #087d82; }
.story-page--cinematic .story-integration-card__icon--sharepoint .integration-icon-letter { stroke-width: 2.5; }

.story-page--cinematic .story-integration-card__icon--onedrive svg path:first-child { fill: #1685dc; }
.story-page--cinematic .story-integration-card__icon--onedrive svg path:nth-child(2) { fill: #31a8ef; }

.story-page--cinematic .story-integration-card__icon--winbooks svg {
  width: 40px;
  height: 40px;
  fill: #f2f6ff;
  filter: drop-shadow(0 0 6px rgba(164, 194, 255, 0.16));
}

.story-page--cinematic .story-integration-card__icon--popsy svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #6c7cff;
  stroke-width: 3.2;
  filter: drop-shadow(0 0 6px rgba(78, 101, 255, 0.38));
}

.story-page--cinematic .story-integration-card__icon--popsy svg circle:nth-child(2) {
  fill: #348fe9;
  stroke: none;
}

.story-page--cinematic .story-integration-card__icon--kluwer svg {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 6px rgba(79, 174, 236, 0.22));
}

.story-page--cinematic .kluwer-green { fill: #a6d93e; }
.story-page--cinematic .kluwer-blue { fill: #35a9d8; }
.story-page--cinematic .kluwer-violet { fill: #5967d9; }

.story-page--cinematic .story-integration-card h3 {
  margin: 18px 0 0;
  color: rgba(239, 244, 253, 0.94);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  white-space: nowrap;
}

.story-page--cinematic .story-integration-card__badge {
  display: inline-flex;
  width: 100%;
  max-width: 116px;
  min-height: 34px;
  margin-top: auto;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(68, 96, 139, 0.24);
  border-radius: 999px;
  color: rgba(190, 205, 229, 0.75);
  background: rgba(3, 12, 26, 0.72);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}

.story-page--cinematic .story-integration-card__badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #32a7f4;
  box-shadow: 0 0 8px rgba(50, 167, 244, 0.6);
}

.story-page--cinematic .story-integration-card__badge--native i {
  background: #5ee66c;
  box-shadow: 0 0 8px rgba(94, 230, 108, 0.52);
}

.story-page--cinematic .story-integration-card__badge--sso i {
  background: #9656f5;
  box-shadow: 0 0 8px rgba(150, 86, 245, 0.58);
}

.story-page--cinematic .story-integrations__nav {
  position: absolute;
  z-index: 8;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(64, 113, 175, 0.2);
  border-radius: 50%;
  background: rgba(7, 18, 36, 0.92);
  color: rgba(159, 189, 231, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%);
  cursor: pointer;
  transition: color 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.story-page--cinematic .story-integrations__nav--prev { left: 38px; }
.story-page--cinematic .story-integrations__nav--next { right: 38px; }

.story-page--cinematic .story-integrations__nav svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-integrations__nav:hover,
.story-page--cinematic .story-integrations__nav:focus-visible {
  color: #78c7ff;
  border-color: rgba(58, 155, 247, 0.7);
  background: rgba(10, 31, 62, 0.96);
  box-shadow: 0 0 22px rgba(48, 145, 240, 0.19);
  outline: none;
}

.story-page--cinematic .story-integrations__nav:disabled {
  color: rgba(141, 169, 207, 0.4);
  border-color: rgba(64, 113, 175, 0.12);
  cursor: default;
  box-shadow: none;
}

.story-page--cinematic .story-integrations__cta {
  position: relative;
  z-index: 3;
  display: flex;
  width: fit-content;
  min-height: 32px;
  margin: 45px auto 0;
  align-items: center;
  gap: 18px;
  color: #778ff4;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.012em;
  text-decoration: none;
  transition: color 0.24s ease, transform 0.24s ease;
}

.story-page--cinematic .story-integrations__cta-grid {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #6298ff;
  stroke-width: 1.7;
}

.story-page--cinematic .story-integrations__cta-arrow {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.24s ease;
}

.story-page--cinematic .story-integrations__cta:hover,
.story-page--cinematic .story-integrations__cta:focus-visible {
  color: #9eb3ff;
  transform: translateY(-2px);
  outline: none;
}

.story-page--cinematic .story-integrations__cta:hover .story-integrations__cta-arrow,
.story-page--cinematic .story-integrations__cta:focus-visible .story-integrations__cta-arrow {
  transform: translateX(5px);
}

@media (hover: hover) and (pointer: fine) {
  .story-page--cinematic .story-integration-card:hover {
    translate: 0 -5px;
    border-color: rgba(83, 145, 216, 0.55);
    background:
      radial-gradient(circle at 50% 0%, rgba(46, 101, 169, 0.15), transparent 48%),
      linear-gradient(180deg, rgba(8, 23, 44, 0.96), rgba(4, 14, 29, 0.98));
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(171, 211, 255, 0.05);
  }
}

@media (min-width: 1900px) {
  .story-page--cinematic .story-integration-card {
    flex-basis: 138px;
    width: 138px;
  }
}

@media (max-width: 1100px) {
  .story-page--cinematic .story-stack--integrations {
    min-height: 680px;
    padding-top: 82px;
  }

  .story-page--cinematic .story-stack--integrations h2 {
    max-width: 900px;
    font-size: clamp(40px, 5.2vw, 54px);
  }

  .story-page--cinematic .story-integrations__rail {
    padding-inline: 72px;
    scroll-padding-inline: 72px;
  }

  .story-page--cinematic .story-integrations__nav--prev { left: 18px; }
  .story-page--cinematic .story-integrations__nav--next { right: 18px; }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-stack--integrations {
    min-height: 0;
    padding: 78px 0 72px;
  }

  .story-page--cinematic .story-stack--integrations > .story-integrations__intro {
    width: min(100% - 40px, 620px);
  }

  .story-page--cinematic .story-stack--integrations .story-eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .story-page--cinematic .story-stack--integrations h2 {
    font-size: clamp(38px, 10.5vw, 48px);
    line-height: 1.04;
  }

  .story-page--cinematic .story-stack--integrations .story-section-lead {
    gap: 4px;
    margin-top: 25px;
    font-size: 17px;
    line-height: 1.48;
  }

  .story-page--cinematic .story-integrations__carousel {
    margin-top: 38px;
  }

  .story-page--cinematic .story-integrations__rail {
    gap: 12px;
    padding: 0 24px 10px;
    scroll-padding-inline: 24px;
  }

  .story-page--cinematic .story-integration-card {
    flex-basis: 132px;
    width: 132px;
    height: 190px;
    padding: 23px 9px 15px;
  }

  .story-page--cinematic .story-integration-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .story-page--cinematic .story-integration-card__icon img,
  .story-page--cinematic .story-integration-card__icon svg {
    width: 34px;
    height: 34px;
  }

  .story-page--cinematic .story-integration-card h3 {
    margin-top: 15px;
    font-size: 14.5px;
  }

  .story-page--cinematic .story-integration-card__badge {
    min-height: 31px;
    max-width: 108px;
    padding-inline: 8px;
    font-size: 10.5px;
  }

  .story-page--cinematic .story-integrations__nav {
    display: none;
  }

  .story-page--cinematic .story-integrations__cta {
    margin-top: 34px;
    gap: 13px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-stack--integrations::before {
    animation: none;
  }

  .story-page--cinematic .story-integration-card,
  .story-page--cinematic .story-integrations__cta,
  .story-page--cinematic .story-integrations__cta-arrow {
    transition: none !important;
  }

  .story-page--cinematic .story-stack--integrations .story-integration-card {
    opacity: 1;
    translate: 0 0;
  }
}

/* ===== HOMEPAGE PRICING — REFERENCE FINALE + TYPO GLOBALE 2026-07-19 ===== */
.story-page--cinematic .story-pricing--reference {
  min-height: 941px;
  padding: 49px 0 30px;
  box-sizing: border-box;
  border-radius: 0;
  background:
    radial-gradient(ellipse 45% 72% at 2% 69%, rgba(9, 74, 137, .24), transparent 72%),
    radial-gradient(ellipse 56% 75% at 77% 42%, rgba(10, 58, 112, .12), transparent 72%),
    linear-gradient(116deg, #001025 0%, #001126 45%, #000b1c 100%);
}

.story-page--cinematic .story-pricing--reference::before {
  inset: 0 auto 0 0;
  width: min(43vw, 720px);
  opacity: .46;
  background-image:
    radial-gradient(circle at 290px 42px, #168dff 0 1.25px, transparent 2.3px),
    radial-gradient(circle at 445px 94px, #168dff 0 1.1px, transparent 2.15px),
    radial-gradient(circle at 285px 817px, #168dff 0 1.2px, transparent 2.25px),
    radial-gradient(circle at 331px 877px, #168dff 0 1.1px, transparent 2.15px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='198' height='172' viewBox='0 0 198 172'%3E%3Cg fill='none' stroke='%23145a96' stroke-opacity='.38' stroke-width='.72'%3E%3Cpath d='M49 1 96 28v55l-47 27L2 83V28Z'/%3E%3Cpath d='m149 58 47 27v55l-47 27-47-27V85Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, -51px -51px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 55%, transparent 100%);
}

.story-page--cinematic .story-pricing--reference::after {
  width: 610px;
  height: 610px;
  right: auto;
  left: -305px;
  top: 402px;
  border-radius: 50%;
  background: rgba(19, 101, 203, .15);
  filter: blur(108px);
}

.story-pricing--reference .story-pricing__orbit {
  position: absolute !important;
  z-index: 0 !important;
  display: block;
  left: 0;
  top: 0;
  width: 370px;
  height: 850px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  opacity: 1;
  mask-image: linear-gradient(180deg, transparent 0 54%, #000 63% 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0 54%, #000 63% 94%, transparent 100%);
  pointer-events: none;
}

.story-pricing--reference .story-pricing__orbit::before,
.story-pricing--reference .story-pricing__orbit::after {
  content: "";
  position: absolute;
  left: -168px;
  top: -626px;
  width: 1468px;
  height: 1468px;
  box-sizing: border-box;
  border: 1.5px solid rgba(25, 143, 255, .84);
  border-radius: 50%;
}

.story-pricing--reference .story-pricing__orbit::before {
  box-shadow:
    0 0 9px rgba(17, 135, 255, .42),
    0 0 42px rgba(17, 101, 255, .2);
}

.story-pricing--reference .story-pricing__orbit::after {
  border-width: 9px;
  border-color: rgba(25, 120, 255, .14);
  filter: blur(11px);
}

.story-page--cinematic .story-pricing--reference > .story-shell {
  width: min(calc(100% - 160px), 1344px);
  min-height: 0;
  padding: 0;
  grid-template-columns: 429px minmax(0, 1fr);
  grid-template-rows: 724px 110px;
  column-gap: 64px;
  row-gap: 28px;
  align-items: start;
}

.story-page--cinematic .story-pricing--reference > .story-shell > header,
.story-page--cinematic .story-pricing--reference > .story-shell > header.story-reveal {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 429px;
  padding: 51px 0 0;
}

.story-pricing--reference .story-pricing__eyebrow {
  gap: 21px;
}

.story-pricing--reference .story-pricing__eyebrow-icon {
  width: 28px;
  height: 32px;
  flex-basis: 28px;
}

.story-page--cinematic .story-pricing--reference h2 {
  max-width: 420px;
  margin-top: 50px;
  font-size: min(var(--cb-title-section), 69px);
  text-wrap: wrap;
}

.story-page--cinematic .story-pricing--reference h2 > span,
.story-page--cinematic .story-pricing--reference h2 > em {
  display: block;
}

.story-page--cinematic .story-pricing--reference h2 > em {
  font-style: normal;
  font-weight: inherit;
  background: var(--cine-accent-gradient, linear-gradient(90deg, #567eff 0%, #42bbdf 52%, #67e0b9 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-pricing--reference .story-pricing__rule {
  width: 58px;
  margin-top: 31px;
  background: linear-gradient(90deg, #45dbff 0 72%, #8d65ff 72% 100%);
}

.story-page--cinematic .story-pricing--reference .story-section-lead {
  max-width: 376px;
  margin-top: 38px;
  font-size: 20.5px;
  line-height: 1.55;
}

.story-page--cinematic .story-pricing--reference .story-price-grid {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 374px 330px;
  gap: 20px;
}

.story-page--cinematic .story-pricing--reference .story-price,
.story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
  padding: 30px 38px 26px;
  border-color: rgba(72, 159, 242, .74);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 2%, rgba(25, 100, 190, .32), transparent 36%),
    radial-gradient(circle at 87% 8%, var(--offer-glow), transparent 43%),
    linear-gradient(139deg, rgba(6, 34, 70, .98), rgba(2, 20, 45, .99) 60%, rgba(1, 14, 33, 1));
  box-shadow:
    inset 0 1px 0 rgba(173, 226, 255, .045),
    0 24px 64px rgba(0, 2, 12, .18);
  transition:
    transform .45s cubic-bezier(.16, 1, .3, 1),
    border-color .45s ease,
    box-shadow .45s ease;
}

.story-page--cinematic .story-pricing--reference .story-price::before {
  left: -12%;
  top: -38%;
  width: 76%;
  height: 76%;
  background: radial-gradient(circle, rgba(47, 150, 242, .115), transparent 69%);
}

.story-page--cinematic .story-pricing--reference .story-price::after {
  right: 24px;
  bottom: 2px;
  font-size: 108px;
  letter-spacing: -.075em;
  opacity: .055;
}

.story-page--cinematic .story-pricing--reference .story-price:hover {
  transform: translateY(-3px);
  border-color: rgba(95, 204, 255, .92);
  box-shadow:
    inset 0 1px 0 rgba(171, 225, 255, .08),
    0 28px 72px rgba(0, 2, 12, .3),
    0 0 34px rgba(36, 160, 233, .065);
}

.story-page--cinematic .story-pricing--reference .story-price:focus-visible {
  outline: 2px solid #5cddff;
  outline-offset: 4px;
}

.story-pricing--reference .story-price__brand {
  gap: 18px;
}

.story-pricing--reference .story-price__icon {
  width: 48px;
  height: 54px;
  flex-basis: 48px;
}

.story-page--cinematic .story-pricing--reference .story-price h3 {
  font-size: 30px;
}

.story-page--cinematic .story-pricing--reference .story-price > .story-price__from {
  margin-top: 24px;
  font-size: 17.5px;
}

.story-page--cinematic .story-pricing--reference .story-price__price strong {
  font-size: 66px;
  line-height: .91;
}

.story-page--cinematic .story-pricing--reference .story-price__price small {
  margin-top: 7px;
  font-size: 16.5px;
}

.story-page--cinematic .story-pricing--reference .story-price__price--text {
  margin-top: 28px;
}

.story-page--cinematic .story-pricing--reference .story-price__price--text strong {
  width: fit-content;
  font-size: 43px;
  line-height: 1.08;
  background: linear-gradient(90deg, #43d4ff 0%, #4ba7ff 50%, #a162f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-pricing--reference .story-price__divider {
  width: 48px;
  margin-top: 11px;
}

.story-page--cinematic .story-pricing--reference .story-price__price--text + .story-price__divider {
  margin-top: 20px;
}

.story-page--cinematic .story-pricing--reference .story-price > p:not(.story-price__price):not(.story-price__from) {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.43;
}

.story-page--cinematic .story-pricing--reference .story-price__cta {
  left: 38px;
  bottom: 28px;
  gap: 11px;
  font-size: 16px;
}

.story-page--cinematic .story-pricing--reference .story-price:nth-child(n + 3) .story-price__cta {
  bottom: 27px;
}

.story-pricing--reference .story-pricing__trust {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  height: 110px;
  margin-left: 156px;
  padding: 19px 30px 19px 36px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 520px 209px 190px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(69, 143, 220, .55);
  border-radius: 29px;
  color: rgba(223, 232, 250, .88);
  background:
    radial-gradient(circle at 5% 0%, rgba(20, 91, 168, .18), transparent 36%),
    linear-gradient(105deg, rgba(3, 24, 51, .98), rgba(1, 14, 34, .98));
  box-shadow:
    inset 0 1px 0 rgba(175, 226, 255, .035),
    0 22px 54px rgba(0, 2, 12, .16);
}

.story-pricing--reference .story-pricing__trust-intro,
.story-pricing--reference .story-pricing__trust-item {
  min-width: 0;
  height: 58px;
  display: flex;
  align-items: center;
}

.story-pricing--reference .story-pricing__trust-intro {
  gap: 22px;
  padding-right: 28px;
}

.story-pricing--reference .story-pricing__trust-intro p {
  min-width: 0;
  margin: 0;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -.018em;
}

.story-pricing--reference .story-pricing__trust-intro strong {
  display: block;
  color: #f3f6ff;
  font-weight: 700;
}

.story-pricing--reference .story-pricing__trust-item {
  gap: 14px;
  padding: 0 15px 0 34px;
  border-left: 1px solid rgba(66, 132, 205, .28);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.012em;
}

.story-pricing--reference .story-pricing__trust-item:last-child {
  padding-right: 0;
}

.story-pricing--reference .story-pricing__trust-icon {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  color: #36d9ff;
  filter: drop-shadow(0 0 10px rgba(35, 174, 255, .2));
}

.story-pricing--reference .story-pricing__trust-icon--large {
  width: 54px;
  height: 60px;
  flex-basis: 54px;
}

.story-pricing--reference .story-pricing__trust-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1440px) {
  .story-page--cinematic .story-pricing--reference {
    min-height: 0;
    padding: 64px 0;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell {
    width: min(calc(100% - 96px), 1280px);
    grid-template-columns: minmax(340px, 384px) minmax(0, 1fr);
    grid-template-rows: 710px 108px;
    column-gap: clamp(40px, 3.4vw, 52px);
    row-gap: 26px;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell > header,
  .story-page--cinematic .story-pricing--reference > .story-shell > header.story-reveal {
    max-width: 384px;
    padding-top: 40px;
  }

  .story-page--cinematic .story-pricing--reference h2 {
    max-width: 384px;
    font-size: clamp(54px, 4.7vw, 66px);
  }

  .story-page--cinematic .story-pricing--reference .story-section-lead {
    max-width: 352px;
    font-size: 19px;
  }

  .story-page--cinematic .story-pricing--reference .story-price-grid {
    grid-template-rows: 360px 330px;
    gap: 20px;
  }

  .story-page--cinematic .story-pricing--reference .story-price,
  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
    padding-inline: 32px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__cta {
    left: 32px;
  }

  .story-pricing--reference .story-pricing__trust {
    height: 108px;
    margin-left: 0;
    padding-inline: 28px;
    grid-template-columns: minmax(390px, 1.6fr) repeat(3, minmax(0, 1fr));
  }

  .story-pricing--reference .story-pricing__trust-intro {
    padding-right: 22px;
  }

  .story-pricing--reference .story-pricing__trust-item {
    padding-inline: 16px;
  }
}

@media (max-width: 1120px) {
  .story-page--cinematic .story-pricing--reference {
    padding: 88px 0;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell {
    width: var(--cb-shell);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 52px;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell > header,
  .story-page--cinematic .story-pricing--reference > .story-shell > header.story-reveal {
    grid-column: 1;
    grid-row: auto;
    max-width: 760px;
    padding-top: 0;
  }

  .story-page--cinematic .story-pricing--reference h2 {
    max-width: 10.5ch;
  }

  .story-page--cinematic .story-pricing--reference .story-section-lead {
    max-width: 620px;
  }

  .story-page--cinematic .story-pricing--reference .story-price-grid {
    grid-column: 1;
    grid-row: auto;
    grid-template-rows: 370px 340px;
  }

  .story-pricing--reference .story-pricing__trust {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    min-height: 188px;
    margin-left: 0;
    padding: 22px 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 20px;
  }

  .story-pricing--reference .story-pricing__trust-intro {
    grid-column: 1 / -1;
    height: auto;
    min-height: 58px;
    padding: 0 0 20px;
    border-bottom: 1px solid rgba(66, 132, 205, .28);
  }

  .story-pricing--reference .story-pricing__trust-item:first-of-type {
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-pricing--reference {
    padding: 74px 0;
  }

  .story-page--cinematic .story-pricing--reference::before {
    width: 100%;
    opacity: .34;
    mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
  }

  .story-pricing--reference .story-pricing__orbit {
    left: 0;
    top: 0;
    opacity: .62;
  }

  .story-page--cinematic .story-pricing--reference > .story-shell {
    width: min(calc(100% - 32px), 620px);
    gap: 42px;
  }

  .story-page--cinematic .story-pricing--reference h2 {
    max-width: 9.5ch;
    margin-top: 34px;
    font-size: var(--cb-title-section-side);
  }

  .story-pricing--reference .story-pricing__rule {
    margin-top: 29px;
  }

  .story-page--cinematic .story-pricing--reference .story-section-lead {
    max-width: 34ch;
    margin-top: 31px;
    font-size: 17.5px;
    line-height: 1.55;
  }

  .story-page--cinematic .story-pricing--reference .story-price-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 18px;
  }

  .story-page--cinematic .story-pricing--reference .story-price,
  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
    height: auto;
    min-height: 360px;
    padding: 27px 26px 28px;
    border-radius: 26px;
  }

  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n + 3) {
    min-height: 330px;
  }

  .story-pricing--reference .story-price__icon {
    width: 48px;
    height: 54px;
    flex-basis: 48px;
  }

  .story-page--cinematic .story-pricing--reference .story-price h3 {
    font-size: 29px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__price strong {
    font-size: 62px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__price--text strong {
    font-size: 41px;
  }

  .story-page--cinematic .story-pricing--reference .story-price > p:not(.story-price__price):not(.story-price__from) {
    max-width: 31ch;
    font-size: 17px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__cta {
    left: 26px;
    bottom: 27px;
    font-size: 16px;
  }

  .story-pricing--reference .story-pricing__trust {
    min-height: 0;
    padding: 26px;
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: 26px;
  }

  .story-pricing--reference .story-pricing__trust-intro {
    grid-column: 1;
    min-height: 0;
    padding-bottom: 24px;
  }

  .story-pricing--reference .story-pricing__trust-intro p {
    font-size: 16px;
  }

  .story-pricing--reference .story-pricing__trust-item {
    min-height: 64px;
    height: auto;
    padding: 12px 0;
    border-top: 1px solid rgba(66, 132, 205, .28);
    border-left: 0;
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .story-page--cinematic .story-pricing--reference > .story-shell {
    width: min(calc(100% - 24px), 620px);
  }

  .story-page--cinematic .story-pricing--reference .story-price,
  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n) {
    min-height: 380px;
    padding-inline: 22px;
  }

  .story-page--cinematic .story-pricing--reference .story-price:nth-child(n + 3) {
    min-height: 350px;
  }

  .story-page--cinematic .story-pricing--reference .story-price__cta {
    left: 22px;
    max-width: calc(100% - 44px);
  }

  .story-pricing--reference .story-pricing__trust {
    padding-inline: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-pricing--reference .story-price {
    transition: none !important;
  }
}

/* ===== CONTROL PLANE — REFERENCE "CONSTRUIT POUR COLLABORER" (2026-07-20) ===== */
.story-page--cinematic .story-band--control {
  display: flex;
  min-height: 790px;
  margin: 0;
  padding: 60px 0;
  align-items: center;
  background:
    radial-gradient(ellipse 56% 72% at 76% -10%, rgba(60, 108, 165, 0.28), transparent 72%),
    radial-gradient(ellipse 44% 58% at 99% 108%, rgba(39, 26, 142, 0.42), transparent 70%),
    linear-gradient(112deg, #07101e 0%, #0a1529 42%, #0d1931 68%, #11123f 100%);
}

.story-page--cinematic #main > .story-band--control::before {
  inset: 0;
  opacity: 0.42 !important;
  background:
    radial-gradient(ellipse 52% 66% at 78% 0%, rgba(78, 145, 214, 0.17), transparent 72%),
    radial-gradient(ellipse 34% 48% at 96% 100%, rgba(63, 45, 201, 0.12), transparent 74%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='194' height='112' viewBox='0 0 194 112'%3E%3Cg fill='none' stroke='%235b86b7' stroke-opacity='.29' stroke-width='.8'%3E%3Cpath d='M48.5 1 96 28v55L48.5 110 1 83V28Z'/%3E%3Cpath d='m145.5-55 47.5 27v55l-47.5 27L98 27v-55Z'/%3E%3Cpath d='m145.5 57 47.5 27v55l-47.5 27L98 139V84Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  mask-image: none;
  -webkit-mask-image: none;
  transform: none;
}

.story-page--cinematic #main > .story-band--control::after {
  left: auto;
  right: -16%;
  top: -26%;
  width: 70vw;
  max-width: 1240px;
  opacity: 0.62;
  background: rgba(77, 149, 231, 0.07);
  filter: blur(76px);
}

.story-page--cinematic .story-band--control > .story-shell {
  width: min(calc(100% - 120px), 1574px);
}

.story-page--cinematic .story-band--control .story-band__layout {
  grid-template-columns: minmax(0, 650px) minmax(0, 1fr);
  gap: 62px;
  align-items: center;
}

.story-page--cinematic .story-band--control .story-band__layout > :first-child {
  z-index: 3;
  max-width: 650px;
}

.story-page--cinematic .story-band--control .story-eyebrow {
  margin-bottom: 22px;
  color: var(--cb-eyebrow-ink-dark);
}

.story-page--cinematic .story-band--control h2 {
  max-width: 600px;
  font-size: var(--cb-title-section);
}

.story-page--cinematic .story-band--control .story-band__lead {
  max-width: 632px;
  margin-top: 26px;
  color: rgba(238, 240, 255, 0.78);
  font-size: var(--cb-lead-section);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.story-page--cinematic .story-band--control .story-band__points {
  margin-top: 27px;
  gap: 13px;
}

.story-page--cinematic .story-band--control .story-band__points li {
  gap: 12px;
  color: rgba(238, 240, 255, 0.9);
  font-size: clamp(15px, 0.835vw, 17px);
  line-height: 1.3;
}

.story-page--cinematic .story-band--control .story-band__points svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.story-control {
  position: relative;
  z-index: 2;
  width: 985px;
  max-width: none;
  aspect-ratio: 985 / 662;
  justify-self: start;
  isolation: isolate;
}

.story-control__back {
  position: absolute;
  z-index: 0;
  top: 10%;
  left: 15%;
  width: 84.5%;
  height: 84%;
  overflow: hidden;
  border: 1px solid rgba(116, 170, 255, 0.84);
  border-radius: 21px;
  background:
    linear-gradient(180deg, rgba(24, 44, 84, 0.92), rgba(9, 24, 57, 0.95)),
    #091737;
  box-shadow:
    inset 0 0 0 1px rgba(84, 129, 240, 0.14),
    16px 8px 0 rgba(83, 122, 238, 0.28),
    0 34px 76px rgba(0, 0, 0, 0.34);
  opacity: 0.82;
  transform: perspective(1500px) rotateY(-7deg) rotateZ(-0.5deg);
  transform-origin: right center;
}

.story-control__back::before {
  content: "";
  position: absolute;
  inset: 78px 22px 20px;
  opacity: 0.48;
  background-image: radial-gradient(circle, rgba(64, 141, 246, 0.75) 1.2px, transparent 1.6px);
  background-size: 25px 25px;
  mask-image: linear-gradient(90deg, transparent, #000 34%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000);
}

.story-control__back-bar {
  display: flex;
  height: 62px;
  padding: 0 24px;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid rgba(121, 167, 245, 0.23);
}

.story-control__back-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #7497de;
  box-shadow: 0 0 10px rgba(95, 153, 255, 0.5);
}

.story-control__back-stack {
  position: absolute;
  inset: 89px 22px 24px 42%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 18px;
}

.story-control__back-card {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(89, 139, 229, 0.45);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(26, 48, 91, 0.78), rgba(10, 26, 59, 0.78));
}

.story-control__back-card svg {
  width: 62px;
  fill: none;
  stroke: #367ff0;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 9px rgba(43, 121, 255, 0.72));
}

.story-control__back-card--code {
  padding: 23px 34px;
  place-items: stretch;
  align-content: center;
  gap: 9px;
}

.story-control__back-card--code span {
  display: block;
  height: 5px;
  border-radius: 9px;
  background: linear-gradient(90deg, #1d75eb 0 22%, #2253a7 22% 52%, #37a2dd 52% 70%, transparent 70%);
}

.story-control__back-card--chart {
  grid-template-columns: repeat(6, 13px);
  align-items: end;
  gap: 7px;
  padding-top: 34px;
}

.story-control__back-card--chart i {
  display: block;
  height: 22px;
  background: linear-gradient(180deg, #2a76e7, #122f72);
  box-shadow: 0 0 9px rgba(33, 109, 237, 0.45);
}

.story-control__back-card--chart i:nth-child(2) { height: 38px; }
.story-control__back-card--chart i:nth-child(3) { height: 29px; }
.story-control__back-card--chart i:nth-child(4) { height: 51px; }
.story-control__back-card--chart i:nth-child(5) { height: 43px; }
.story-control__back-card--chart i:nth-child(6) { height: 62px; }

.story-control__frame {
  position: absolute;
  z-index: 2;
  top: -0.3%;
  left: -24.8%;
  display: grid;
  width: 109.1%;
  aspect-ratio: 1075 / 660;
  grid-template-rows: 9.35% 74% 16.65%;
  overflow: hidden;
  border: 1px solid rgba(108, 163, 255, 0.96);
  border-radius: 22px;
  background:
    radial-gradient(circle at 52% 45%, rgba(33, 83, 198, 0.18), transparent 39%),
    linear-gradient(152deg, rgba(10, 25, 59, 0.985), rgba(5, 17, 45, 0.99));
  box-shadow:
    inset -4px 0 0 rgba(62, 116, 244, 0.34),
    inset 0 0 0 1px rgba(39, 94, 205, 0.18),
    12px 8px 0 rgba(54, 91, 215, 0.23),
    0 40px 94px rgba(0, 0, 0, 0.46),
    0 0 36px rgba(29, 95, 255, 0.2);
  transform: perspective(1100px) rotateY(-15deg) rotateZ(-0.3deg) skewY(-0.8deg);
  transform-origin: right center;
}

.story-control__topbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 0 2.8%;
  align-items: center;
  border-bottom: 1px solid rgba(111, 158, 242, 0.38);
  background: linear-gradient(180deg, rgba(26, 47, 87, 0.72), rgba(12, 30, 68, 0.72));
}

.story-control__topbar > strong {
  color: #f4f7ff;
  font-size: clamp(8px, 0.72vw, 14px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.story-control__lights {
  display: flex;
  gap: 9px;
}

.story-control__lights i {
  width: clamp(5px, 0.55vw, 11px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #a9c1ff, #597ccb);
  box-shadow: 0 0 8px rgba(109, 154, 255, 0.45);
}

.story-control__live {
  display: inline-flex;
  justify-self: start;
  margin-left: 18px;
  padding: 4px 9px;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(176, 255, 95, 0.42);
  border-radius: 999px;
  color: #ccff75;
  background: rgba(135, 210, 65, 0.1);
  font-size: clamp(7px, 0.62vw, 12px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.story-control__live > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8ff69;
  box-shadow: 0 0 10px #aaff53;
}

.story-control__network {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(42, 100, 227, 0.24), transparent 29%),
    radial-gradient(circle, rgba(49, 113, 215, 0.38) 1px, transparent 1.35px);
  background-size: auto, 23px 23px;
}

.story-control__network::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 47%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 15.5%, rgba(51, 117, 226, 0.25) 15.8% 16.1%, transparent 16.4% 30%);
  filter: drop-shadow(0 0 22px rgba(28, 86, 211, 0.25));
  transform: translate(-50%, -50%);
}

.story-control__network::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7% 3%;
  background:
    linear-gradient(90deg, transparent 49.88%, rgba(53, 107, 211, 0.32) 50%, transparent 50.12%),
    linear-gradient(transparent 49.82%, rgba(53, 107, 211, 0.28) 50%, transparent 50.18%);
}

.story-control__routes {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateY(3.5%);
}

.story-control__route-glow,
.story-control__route-lines {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-control__route-glow {
  stroke: rgba(191, 255, 100, 0.42);
  stroke-width: 5;
}

.story-control__route-lines {
  stroke: #d0ff83;
  stroke-width: 1.7;
}

.story-control__route-nodes {
  filter: drop-shadow(0 0 6px #b5ff5d);
}

.story-control__service {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 28% minmax(0, 1fr);
  padding: 2.2% 2.2%;
  gap: 2.2%;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(104, 172, 255, 0.84);
  border-radius: 17px;
  color: #eef4ff;
  background:
    radial-gradient(circle at 94% 0%, rgba(83, 133, 218, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(24, 48, 91, 0.96), rgba(8, 23, 53, 0.97));
  box-shadow:
    inset 0 0 0 1px rgba(54, 95, 187, 0.2),
    0 12px 25px rgba(0, 3, 18, 0.38),
    0 0 18px rgba(41, 107, 226, 0.13);
}

.story-control__service::after {
  content: "";
  position: absolute;
  inset: auto -12% -34% 18%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(40, 99, 221, 0.19), transparent 70%);
}

.story-control__service--deskio {
  top: 8%;
  left: 3%;
  width: 29.2%;
  height: 28%;
}

.story-control__service--serenia {
  top: 5%;
  right: 3%;
  width: 27.2%;
  height: 31%;
}

.story-control__service--ovastack {
  left: 3%;
  bottom: 4%;
  width: 29.2%;
  height: 27%;
}

.story-control__service--neoo {
  right: 3%;
  bottom: 6%;
  width: 27.2%;
  height: 27%;
}

.story-control__service-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 62px;
  aspect-ratio: 1;
  place-items: center;
}

.story-control__service-icon::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 12px;
  background: rgba(20, 83, 188, 0.14);
  box-shadow: 0 0 24px rgba(45, 122, 255, 0.31);
}

.story-control__service-icon svg {
  position: relative;
  z-index: 1;
  width: 86%;
  height: 86%;
  fill: none;
  stroke: #579bff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(48, 124, 255, 0.76));
}

.story-control__service-copy {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
}

.story-control__service-copy b,
.story-control__service-copy small {
  display: block;
}

.story-control__service-copy b {
  color: #f4f7ff;
  font-size: clamp(8px, 0.86vw, 17px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.story-control__service-copy small {
  margin-top: 8%;
  color: rgba(217, 226, 247, 0.72);
  font-size: clamp(6.5px, 0.62vw, 12px);
  font-weight: 400;
  line-height: 1.2;
}

.story-control__status {
  position: absolute;
  z-index: 4;
  top: 13%;
  right: 6%;
  width: clamp(5px, 0.62vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #b5ff65;
  box-shadow: 0 0 11px #9dff50, 0 0 20px rgba(183, 255, 101, 0.48);
}

.story-control__hub {
  position: absolute;
  z-index: 4;
  width: 22.7%;
  aspect-ratio: 1;
  left: 50%;
  top: 54.5%;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 91% 24%, 91% 76%, 50% 100%, 9% 76%, 9% 24%);
  background: linear-gradient(145deg, #75a6ff 0%, #276bff 34%, #1241af 100%);
  box-shadow: 0 0 42px rgba(32, 103, 255, 0.94);
  filter: drop-shadow(0 0 14px rgba(38, 111, 255, 0.88));
  transform: translate(-50%, -50%);
}

.story-control__hub::before {
  content: "";
  position: absolute;
  inset: 4%;
  clip-path: inherit;
  background:
    radial-gradient(circle at 50% 38%, rgba(92, 173, 255, 0.46), transparent 42%),
    linear-gradient(155deg, #164ca8, #081d56 72%);
}

.story-control__hub::after {
  content: "";
  position: absolute;
  inset: 12%;
  clip-path: inherit;
  border: 1px solid rgba(109, 189, 255, 0.62);
  background: rgba(4, 23, 67, 0.48);
  box-shadow: inset 0 0 24px rgba(36, 111, 255, 0.46);
}

.story-control__hub-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 72%;
  justify-items: center;
}

.story-control__hub-core svg {
  width: 58%;
  fill: none;
  stroke: #94d9ff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px #4d9cff);
}

.story-control__hub-core strong {
  margin-top: 2%;
  color: #f6f8ff;
  font-size: clamp(8px, 1vw, 20px);
  font-weight: 600;
  letter-spacing: -0.04em;
  text-shadow: 0 0 12px rgba(84, 157, 255, 0.72);
}

.story-control__metrics {
  display: grid;
  grid-template-columns: 1.04fr 1.05fr 0.99fr;
  padding: 1.5% 5% 1.5% 4.2%;
  gap: 2.6%;
  background: linear-gradient(180deg, rgba(6, 20, 50, 0.36), rgba(4, 15, 39, 0.76));
}

.story-control__metrics article {
  display: grid;
  grid-template-columns: auto 1fr;
  min-width: 0;
  padding: 5% 7%;
  gap: 7%;
  align-items: center;
  border: 1px solid rgba(85, 130, 214, 0.55);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(23, 42, 82, 0.84), rgba(7, 21, 50, 0.88));
  box-shadow: inset 0 0 18px rgba(34, 74, 151, 0.13);
}

.story-control__metrics article svg {
  width: clamp(20px, 2.4vw, 47px);
  fill: none;
  stroke: #5d9dff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(57, 124, 255, 0.48));
}

.story-control__metrics article:first-child svg {
  stroke: #b7ff63;
  filter: drop-shadow(0 0 6px rgba(170, 255, 82, 0.5));
}

.story-control__metrics span,
.story-control__metrics strong,
.story-control__metrics small {
  display: block;
  min-width: 0;
}

.story-control__metrics strong {
  overflow: hidden;
  color: #f4f7ff;
  font-size: clamp(9px, 1.25vw, 24px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-control__metrics small {
  margin-top: 4%;
  overflow: hidden;
  color: rgba(214, 224, 246, 0.78);
  font-size: clamp(6.5px, 0.75vw, 14px);
  font-weight: 400;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1500px) {
  .story-page--cinematic .story-band--control > .story-shell {
    width: min(calc(100% - 80px), 1370px);
  }

  .story-page--cinematic .story-band--control .story-band__layout {
    grid-template-columns: minmax(0, 570px) minmax(0, 1fr);
    gap: 36px;
  }

  .story-control {
    width: clamp(720px, calc(100vw - 646px), 820px);
  }

  .story-control__frame {
    top: 0;
    left: -3%;
    width: 100%;
    aspect-ratio: 950 / 660;
    transform: perspective(1350px) rotateY(-9deg) rotateZ(-0.7deg);
  }
}

@media (max-width: 1280px) {
  .story-page--cinematic .story-band--control {
    min-height: 0;
    padding: 84px 0 76px;
  }

  .story-page--cinematic .story-band--control > .story-shell {
    width: var(--cb-shell);
  }

  .story-page--cinematic .story-band--control .story-band__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
  }

  .story-page--cinematic .story-band--control .story-band__layout > :first-child {
    max-width: 720px;
  }

  .story-page--cinematic .story-band--control h2,
  .story-page--cinematic .story-band--control .story-band__lead {
    max-width: 680px;
  }

  .story-control {
    width: min(100%, 900px);
    aspect-ratio: 880 / 620;
    justify-self: center;
  }

  .story-control__back {
    display: none;
  }

  .story-control__frame {
    top: 0;
    left: 50%;
    width: 100%;
    aspect-ratio: 880 / 620;
    transform: translateX(-50%);
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-band--control {
    padding: 66px 0 60px;
  }

  .story-page--cinematic .story-band--control .story-eyebrow {
    margin-bottom: 17px;
  }

  .story-page--cinematic .story-band--control .story-band__lead {
    margin-top: 22px;
    font-weight: 400;
  }

  .story-page--cinematic .story-band--control .story-band__points {
    margin-top: 24px;
  }

  .story-page--cinematic .story-band--control .story-band__points li {
    font-size: 15px;
  }

  .story-page--cinematic .story-band--control .story-band__layout {
    gap: 38px;
  }

  .story-control__topbar {
    padding-inline: 3.3%;
  }

  .story-control__topbar > strong {
    letter-spacing: 0.22em;
  }

  .story-control__live {
    margin-left: 8px;
    padding: 3px 6px;
    gap: 4px;
  }

  .story-control__live > i {
    width: 4px;
    height: 4px;
  }

  .story-control__lights {
    gap: 4px;
  }

  .story-control__service {
    border-radius: 8px;
  }

  .story-control__service-copy small {
    margin-top: 4%;
  }

  .story-control__metrics article {
    border-radius: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-control__frame,
  .story-control__back {
    transition: none !important;
  }
}

/* ===== CONTROL PLANE MOTION — LIVE SVG ORCHESTRATION (2026-07-23) ===== */
.story-page--cinematic .story-band--control {
  --control-bg: #071426;
  --control-bg-secondary: #0a1b38;
  --control-border: #3f82ff;
  --control-hub: #2563eb;
  --control-cyan: #65c7ff;
  --control-flow: #b7ff3c;
  --control-flow-light: #e5ff9a;
  --control-text: #dce8ff;
  --control-muted: #aebbd2;
}

.story-page--cinematic .story-band--control .story-band__lead {
  color: var(--cb-lead-ink-dark);
  font-weight: var(--cb-lead-weight);
  letter-spacing: var(--cb-lead-tracking);
}

.story-control {
  width: min(100%, 820px);
  max-width: 820px;
  aspect-ratio: 1000 / 760;
  justify-self: end;
}

.story-control__back {
  top: 1.6%;
  left: 16px;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 760;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(23, 55, 124, .9), rgba(11, 28, 72, .96));
  box-shadow:
    18px 12px 0 rgba(43, 91, 214, .28),
    0 34px 76px rgba(0, 0, 0, .38),
    0 0 36px rgba(42, 106, 255, .18);
  opacity: .78;
  transform: perspective(1600px) rotateY(-4deg) rotateX(1deg) rotateZ(-1deg);
}

.story-control__back-bar,
.story-control__back-stack {
  display: none;
}

.story-control__frame {
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1000 / 760;
  grid-template-rows: 8% 79% 13%;
  border-radius: 26px;
  background:
    radial-gradient(circle at 52% 44%, rgba(37, 99, 235, .21), transparent 40%),
    linear-gradient(152deg, rgba(10, 27, 63, .985), rgba(5, 18, 42, .99));
  box-shadow:
    inset -4px 0 0 rgba(63, 130, 255, .28),
    inset 0 0 0 1px rgba(63, 130, 255, .18),
    15px 10px 0 rgba(37, 86, 208, .24),
    0 42px 92px rgba(0, 0, 0, .45),
    0 0 38px rgba(37, 99, 235, .18);
  transform: perspective(1600px) rotateY(-4deg) rotateX(1deg) rotateZ(-1deg);
  transform-origin: 72% center;
  will-change: transform, opacity;
}

.story-band--control.is-control-ready .story-control {
  opacity: 0;
  transform: translate3d(0, 30px, 0) rotateZ(.55deg) scale(.985);
}

.story-band--control.is-control-active .story-control {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateZ(0) scale(1);
  transition:
    opacity .82s cubic-bezier(.16, 1, .3, 1),
    transform .96s cubic-bezier(.16, 1, .3, 1);
}

.story-control__network {
  isolation: isolate;
}

.story-control__network::before {
  animation: control-plane-radar 3.2s ease-out 1.2s infinite;
  transform-origin: center;
}

.story-control__routes {
  inset: 0;
  transform: none;
}

.story-control__centerline {
  fill: url(#control-route-node);
  filter: drop-shadow(0 0 5px rgba(183, 255, 60, .72));
}

.story-control__centerline-halo,
.story-control__centerline-main {
  fill: none;
  stroke-linecap: round;
}

.story-control__centerline-halo {
  stroke: rgba(183, 255, 60, .28);
  stroke-width: 15;
  filter: url(#control-route-glow);
}

.story-control__centerline-main {
  stroke: var(--control-flow);
  stroke-width: 2.4;
}

.story-control__centerline-sweep {
  opacity: .78;
  filter: url(#control-route-glow);
}

.story-control__flow {
  opacity: 1;
  transition: opacity .28s cubic-bezier(.16, 1, .3, 1), filter .28s ease;
}

.story-control__flow--deskio { --path-delay: .5s; }
.story-control__flow--ovastack { --path-delay: .68s; }
.story-control__flow--serenia { --path-delay: .82s; }
.story-control__flow--neoo { --path-delay: .96s; }

.story-control__flow-halo,
.story-control__flow-main,
.story-control__flow-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-control__flow-halo {
  stroke: rgba(183, 255, 60, .42);
  stroke-width: 13;
  filter: url(#control-route-glow);
}

.story-control__flow-main {
  stroke: var(--control-flow);
  stroke-width: 3.2;
  filter: drop-shadow(0 0 4px rgba(183, 255, 60, .72));
}

.story-control__flow-core {
  stroke: rgba(255, 255, 238, .76);
  stroke-width: 1;
}

.story-band--control.is-control-ready .story-control__flow-halo,
.story-band--control.is-control-ready .story-control__flow-main,
.story-band--control.is-control-ready .story-control__flow-core {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.story-band--control.is-control-active .story-control__flow-halo,
.story-band--control.is-control-active .story-control__flow-main,
.story-band--control.is-control-active .story-control__flow-core {
  animation: control-plane-draw 1.08s cubic-bezier(.16, 1, .3, 1) var(--path-delay) forwards;
}

.story-control__particle {
  opacity: 0;
  filter: url(#control-particle-glow);
  transition: opacity .35s ease;
}

.story-band--control.is-control-flowing .story-control__particle {
  opacity: 1;
}

.story-control__particle--small { opacity: 0; }
.story-control__particle--faint { opacity: 0; }
.story-band--control.is-control-flowing .story-control__particle--small { opacity: .74; }
.story-band--control.is-control-flowing .story-control__particle--faint { opacity: .48; }

.story-control__particle-halo {
  fill: rgba(183, 255, 60, .34);
}

.story-control__particle-tail {
  fill: rgba(229, 255, 154, .48);
}

.story-control__particle-core {
  fill: #fff;
  stroke: var(--control-flow-light);
  stroke-width: 1.4;
}

.story-control__service {
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transform: translateY(0);
  transform-origin: center;
  transition:
    opacity .42s cubic-bezier(.16, 1, .3, 1),
    transform .32s cubic-bezier(.16, 1, .3, 1),
    border-color .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.story-band--control.is-control-ready .story-control__service {
  opacity: 0;
  transform: translateY(13px) scale(.975);
}

.story-band--control.is-control-active .story-control__service {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.story-band--control.is-control-active .story-control__service--deskio { transition-delay: .84s; }
.story-band--control.is-control-active .story-control__service--ovastack { transition-delay: .98s; }
.story-band--control.is-control-active .story-control__service--serenia { transition-delay: 1.1s; }
.story-band--control.is-control-active .story-control__service--neoo { transition-delay: 1.22s; }

.story-control__service:hover,
.story-control__service:focus-visible {
  z-index: 7;
  border-color: rgba(101, 199, 255, .98);
  box-shadow:
    inset 0 0 0 1px rgba(101, 199, 255, .22),
    0 16px 34px rgba(0, 5, 24, .52),
    0 0 26px rgba(63, 130, 255, .34);
  filter: brightness(1.12);
  transform: translateY(-4px) scale(1.012);
  transition-delay: 0s;
}

.story-control__service:focus-visible {
  outline: 2px solid var(--control-cyan);
  outline-offset: 3px;
}

.story-band--control[data-active-flow] .story-control__flow {
  opacity: .26;
}

.story-band--control[data-active-flow="deskio"] .story-control__flow--deskio,
.story-band--control[data-active-flow="ovastack"] .story-control__flow--ovastack,
.story-band--control[data-active-flow="serenia"] .story-control__flow--serenia,
.story-band--control[data-active-flow="neoo"] .story-control__flow--neoo {
  opacity: 1;
  filter: brightness(1.22);
}

.story-band--control[data-active-flow] .story-control__service:not(.is-flow-active) {
  opacity: .8;
}

.story-control__status {
  transform-origin: center;
}

.story-band--control.is-control-flowing .story-control__service--deskio .story-control__status {
  animation: control-plane-status-source 3.2s ease-in-out 0s infinite;
}

.story-band--control.is-control-flowing .story-control__service--ovastack .story-control__status {
  animation: control-plane-status-source 3.7s ease-in-out -.35s infinite;
}

.story-band--control.is-control-flowing .story-control__service--serenia .story-control__status {
  animation: control-plane-status-arrival 3.4s ease-in-out -.7s infinite;
}

.story-band--control.is-control-flowing .story-control__service--neoo .story-control__status {
  animation: control-plane-status-arrival 4s ease-in-out -1.05s infinite;
}

.story-band--control.is-control-flowing .story-control__service-icon {
  animation: control-plane-icon-breathe 3.1s ease-in-out infinite;
}

.story-band--control.is-control-flowing .story-control__service--ovastack .story-control__service-icon { animation-delay: -.7s; }
.story-band--control.is-control-flowing .story-control__service--serenia .story-control__service-icon { animation-delay: -1.4s; }
.story-band--control.is-control-flowing .story-control__service--neoo .story-control__service-icon { animation-delay: -2.1s; }

.story-control__hub {
  overflow: visible;
  clip-path: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.story-control__hub::before,
.story-control__hub::after {
  clip-path: polygon(50% 0, 91% 24%, 91% 76%, 50% 100%, 9% 76%, 9% 24%);
}

.story-control__hub::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(101, 199, 255, .48), transparent 42%),
    linear-gradient(145deg, #6b9dff 0%, var(--control-hub) 36%, #103ca0 100%);
  box-shadow: 0 0 42px rgba(37, 99, 235, .86);
  filter: drop-shadow(0 0 15px rgba(63, 130, 255, .72));
}

.story-control__hub::after {
  inset: 5%;
  border: 1px solid rgba(101, 199, 255, .66);
  background:
    radial-gradient(circle at 50% 38%, rgba(92, 173, 255, .4), transparent 43%),
    linear-gradient(155deg, #164ca8, #071a4d 72%);
  box-shadow: inset 0 0 28px rgba(37, 99, 235, .5);
}

.story-control__hub-radar {
  position: absolute;
  z-index: -1;
  inset: -23%;
  border: 1px solid rgba(101, 199, 255, .34);
  border-radius: 50%;
  opacity: 0;
}

.story-band--control.is-control-ready .story-control__hub {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.78);
}

.story-band--control.is-control-active .story-control__hub {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity .56s ease .34s,
    transform .72s cubic-bezier(.16, 1, .3, 1) .34s;
}

.story-band--control.is-control-flowing .story-control__hub::before {
  animation: control-plane-hub-glow 3s ease-in-out infinite;
}

.story-band--control.is-control-flowing .story-control__hub-core {
  animation: control-plane-hub-breathe 3s ease-in-out infinite;
}

.story-band--control.is-control-flowing .story-control__hub-radar {
  animation: control-plane-hub-radar 3s ease-out .4s infinite;
}

.story-band--control.is-control-ready .story-control__metrics article {
  opacity: 0;
  transform: translateY(10px);
}

.story-band--control.is-control-active .story-control__metrics article {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .48s ease,
    transform .62s cubic-bezier(.16, 1, .3, 1);
}

.story-band--control.is-control-active .story-control__metrics article:nth-child(1) { transition-delay: 1.02s; }
.story-band--control.is-control-active .story-control__metrics article:nth-child(2) { transition-delay: 1.12s; }
.story-band--control.is-control-active .story-control__metrics article:nth-child(3) { transition-delay: 1.22s; }

@keyframes control-plane-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes control-plane-radar {
  0% { opacity: .16; transform: translate(-50%, -50%) scale(.82); }
  68%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes control-plane-hub-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.025); filter: brightness(1.1); }
}

@keyframes control-plane-hub-glow {
  0%, 100% { filter: drop-shadow(0 0 13px rgba(63, 130, 255, .7)); }
  50% { filter: drop-shadow(0 0 24px rgba(101, 199, 255, .92)); }
}

@keyframes control-plane-hub-radar {
  0% { opacity: .44; transform: scale(.78); }
  72%, 100% { opacity: 0; transform: scale(1.16); }
}

@keyframes control-plane-status-source {
  0%, 12% { transform: scale(1.22); filter: brightness(1.3); }
  22%, 100% { transform: scale(1); filter: brightness(1); }
}

@keyframes control-plane-status-arrival {
  0%, 76% { transform: scale(1); filter: brightness(1); }
  90%, 100% { transform: scale(1.26); filter: brightness(1.35); }
}

@keyframes control-plane-icon-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.035); filter: brightness(1.08); }
}

@media (max-width: 1500px) {
  .story-control__frame {
    left: -3%;
    width: 100%;
    aspect-ratio: 1000 / 760;
    transform: perspective(1600px) rotateY(-3.5deg) rotateX(.8deg) rotateZ(-.7deg);
  }

  .story-control__back {
    left: calc(-3% + 13px);
    width: 100%;
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {
  .story-page--cinematic .story-band--control {
    padding: 72px 0 68px;
  }

  .story-page--cinematic .story-band--control > .story-shell {
    width: min(calc(100% - 64px), 1180px);
  }

  .story-page--cinematic .story-band--control .story-band__layout {
    grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr);
    gap: 28px;
  }

  .story-page--cinematic .story-band--control .story-band__layout > :first-child {
    max-width: 470px;
  }

  .story-control {
    width: 100%;
    aspect-ratio: 1000 / 760;
  }

  .story-control__frame {
    left: 0;
    width: 100%;
    aspect-ratio: 1000 / 760;
    transform: perspective(1500px) rotateY(-2.2deg) rotateX(.5deg) rotateZ(-.35deg);
  }

  .story-control__back {
    left: 12px;
    width: 100%;
  }
}

@media (max-width: 1099px) {
  .story-control {
    width: min(100%, 900px);
    aspect-ratio: 1000 / 760;
    justify-self: center;
  }

  .story-control__frame {
    top: 0;
    left: 50%;
    width: 100%;
    aspect-ratio: 1000 / 760;
    transform: translateX(-50%) perspective(1500px) rotateY(-1.5deg) rotateX(.4deg);
  }
}

@media (max-width: 760px) {
  .story-control {
    aspect-ratio: 1000 / 760;
  }

  .story-control__frame {
    left: 0;
    width: 100%;
    aspect-ratio: 1000 / 760;
    border-radius: 14px;
    transform: none;
  }

  .story-control__service {
    border-radius: 9px;
  }

  .story-control__service:hover,
  .story-control__service:focus-visible {
    transform: translateY(-3px) scale(1.01);
  }

  .story-control__metrics article {
    padding-inline: 5%;
  }

  .story-control__metrics strong,
  .story-control__metrics small {
    overflow: visible;
    text-overflow: clip;
  }

  .story-control__flow-halo {
    stroke-width: 10;
    filter: none;
  }

  .story-control__centerline-halo {
    stroke-width: 10;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-band--control.is-control-ready .story-control,
  .story-band--control.is-control-active .story-control,
  .story-band--control.is-control-ready .story-control__service,
  .story-band--control.is-control-active .story-control__service,
  .story-band--control.is-control-ready .story-control__hub,
  .story-band--control.is-control-active .story-control__hub,
  .story-band--control.is-control-ready .story-control__metrics article,
  .story-band--control.is-control-active .story-control__metrics article {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: opacity .1s linear !important;
  }

  .story-band--control.is-control-ready .story-control__hub,
  .story-band--control.is-control-active .story-control__hub {
    transform: translate(-50%, -50%);
  }

  .story-band--control.is-control-ready .story-control__flow-halo,
  .story-band--control.is-control-ready .story-control__flow-main,
  .story-band--control.is-control-ready .story-control__flow-core,
  .story-band--control.is-control-active .story-control__flow-halo,
  .story-band--control.is-control-active .story-control__flow-main,
  .story-band--control.is-control-active .story-control__flow-core {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none !important;
  }

  .story-control__particle,
  .story-control__centerline-sweep,
  .story-control__hub-radar {
    display: none !important;
  }

  .story-control__network::before,
  .story-control__hub::before,
  .story-control__hub-core,
  .story-control__service-icon,
  .story-control__status {
    animation: none !important;
  }
}

/* ===== Homepage hero cards - Serenia-inspired progressive glass fan ===== */
@keyframes home-serenia-deck-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (min-width: 761px) {
  .story-page--cinematic .story-orbit,
  .story-page--cinematic .story-orbit__stack {
    perspective: 1000px;
  }

  .story-page--cinematic .story-orbit__stack {
    transform-style: preserve-3d;
  }

  .story-page--cinematic .story-orbit__card,
  .story-page--cinematic .story-orbit__card--front,
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    --home-deck-left: 0px;
    --home-deck-top: 0px;
    --home-deck-width: 430px;
    --home-deck-height: 560px;
    position: absolute;
    top: var(--home-deck-top);
    left: var(--home-deck-left);
    width: var(--home-deck-width);
    height: var(--home-deck-height);
    min-width: 0;
    min-height: 0;
    margin: 0;
    flex: none;
    overflow: hidden;
    opacity: var(--deck-opacity, 1);
    z-index: var(--deck-layer, 1);
    filter: blur(var(--deck-blur, 0px));
    border: 1px solid rgba(113, 215, 255, .78);
    border-radius: 20px;
    color: #dfeaf7;
    background:
      radial-gradient(
        circle at var(--deck-light-x, 28%) var(--deck-light-y, 12%),
        rgba(91, 181, 230, .18),
        transparent 46%
      ),
      linear-gradient(120deg, rgba(16, 48, 79, .5), rgba(2, 17, 36, .94) 48%, rgba(4, 15, 35, .99)),
      #031223;
    box-shadow:
      inset 0 0 28px rgba(19, 131, 216, .12),
      0 0 18px rgba(40, 174, 255, .22),
      0 30px 58px rgba(0, 103, 194, .18);
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
    transform:
      perspective(1000px)
      translate3d(var(--deck-x, 0px), var(--deck-y, 0px), var(--deck-depth, 0px))
      rotateX(var(--deck-tilt-x, 0deg))
      rotateY(calc(14deg + var(--deck-rotate-y, 0deg) + var(--deck-tilt-y, 0deg)))
      scale(var(--deck-scale, 1));
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    will-change: transform, opacity, filter, background-position;
    transition:
      border-color .28s cubic-bezier(.16, 1, .3, 1),
      box-shadow .34s cubic-bezier(.16, 1, .3, 1),
      background-position 160ms ease-out;
  }

  .story-page--cinematic .story-orbit__card--d {
    --home-deck-left: 22px;
    --home-deck-top: 150px;
    --home-deck-width: 168px;
    --home-deck-height: 350px;
    --deck-x: -8px;
    --deck-y: 3px;
    --deck-depth: -42px;
    --deck-scale: .988;
    --deck-rotate-y: 6deg;
    --deck-opacity: .72;
    --deck-blur: .35px;
    --deck-layer: 27;
    padding: 27px 16px 22px;
    border-radius: 16px;
  }

  .story-page--cinematic .story-orbit__card--c {
    --home-deck-left: 116px;
    --home-deck-top: 108px;
    --home-deck-width: 224px;
    --home-deck-height: 420px;
    --deck-x: -8px;
    --deck-y: 3px;
    --deck-depth: -28px;
    --deck-scale: .988;
    --deck-rotate-y: 6deg;
    --deck-opacity: .72;
    --deck-blur: .35px;
    --deck-layer: 28;
    padding: 30px 20px 25px;
    border-radius: 18px;
  }

  .story-page--cinematic .story-orbit__card--b {
    --home-deck-left: 238px;
    --home-deck-top: 58px;
    --home-deck-width: 322px;
    --home-deck-height: 500px;
    --deck-x: -8px;
    --deck-y: 3px;
    --deck-depth: -14px;
    --deck-scale: .988;
    --deck-rotate-y: 6deg;
    --deck-opacity: .72;
    --deck-blur: .35px;
    --deck-layer: 29;
    padding: 32px 22px 24px;
    border-radius: 21px;
  }

  .story-page--cinematic .story-orbit__card--front {
    --home-deck-left: 390px;
    --home-deck-top: 80px;
    --home-deck-width: 410px;
    --home-deck-height: 530px;
    --deck-x: 8px;
    --deck-y: -8px;
    --deck-depth: 40px;
    --deck-scale: 1.012;
    --deck-rotate-y: -3deg;
    --deck-opacity: 1;
    --deck-blur: 0px;
    --deck-layer: 50;
    padding: 38px 27px 27px 40px;
    border-color: rgba(166, 151, 255, .82);
    border-radius: 24px;
    pointer-events: auto;
    background:
      radial-gradient(
        circle at var(--deck-light-x, 28%) var(--deck-light-y, 12%),
        rgba(91, 181, 230, .2),
        transparent 45%
      ),
      linear-gradient(120deg, rgba(18, 52, 84, .58), rgba(2, 17, 36, .96) 48%, rgba(4, 15, 35, .995)),
      #031223;
    box-shadow:
      inset 0 0 38px rgba(34, 82, 165, .18),
      0 0 22px rgba(112, 91, 255, .32),
      0 38px 72px rgba(22, 70, 209, .28);
  }

  .story-page--cinematic .story-orbit__card.is-deck-active {
    border-color: rgba(116, 224, 255, .98);
    box-shadow:
      inset 0 0 38px rgba(34, 128, 205, .22),
      0 0 28px rgba(70, 196, 255, .36),
      0 42px 78px rgba(12, 68, 181, .3);
  }

  .story-page--cinematic .story-orbit__card--front:not(.is-deck-active) {
    border-color: rgba(166, 151, 255, .56);
    box-shadow:
      inset 0 0 30px rgba(34, 82, 165, .13),
      0 0 16px rgba(91, 104, 255, .18),
      0 28px 58px rgba(19, 61, 166, .18);
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__title {
    margin-bottom: 14px;
    font-size: 25px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__list {
    gap: 7px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__list > li.story-orbit__item--linked {
    min-height: 57px;
    border-radius: 10px;
  }

  .story-page--cinematic .story-orbit__item--linked > a {
    min-height: 55px;
    grid-template-columns: 40px minmax(0, 1fr) 10px;
    gap: 12px;
    padding: 5px 12px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__icon {
    width: 40px;
    height: 40px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__icon svg {
    width: 36px;
    height: 36px;
  }

  .story-page--cinematic .story-orbit__meta strong {
    font-size: 15px;
  }

  .story-page--cinematic .story-orbit__meta small {
    margin-top: 3px;
    font-size: 11px;
  }

  .story-page--cinematic .story-orbit__card--front .story-orbit__prompt {
    min-height: 54px;
    margin-top: 13px;
    padding-inline: 18px;
    border-radius: 10px;
    font-size: 13.5px;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__header,
  .story-page--cinematic .story-orbit__card--d .story-back-card__header {
    align-items: flex-start;
    gap: 10px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__header {
    display: grid;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__header > span {
    width: 38px;
    height: 38px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__header > span {
    width: 31px;
    height: 31px;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__header h3 {
    font-size: 16px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__header h3 {
    font-size: 13px;
    white-space: normal;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__automation {
    min-height: 255px;
    margin-top: 34px;
    gap: 18px;
    padding: 23px 16px;
    border-radius: 13px;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__donut {
    width: 76px;
    height: 76px;
  }

  .story-page--cinematic .story-orbit__card--c .story-back-card__automation > div {
    grid-template-columns: 7px minmax(42px, 1fr);
    gap: 18px 9px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__support {
    grid-template-columns: 7px minmax(0, 1fr);
    gap: 19px 8px;
    margin-top: 25px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__divider {
    margin: 10px 0 5px;
  }

  .story-page--cinematic .story-orbit__card--d .story-back-card__support::after {
    height: 112px;
    border-radius: 12px;
    background-size: 24px 24px, 24px 24px, auto, auto;
  }

  .story-page--cinematic .story-murphy-card__portrait {
    width: 214px;
    height: 335px;
  }

  .story-page--cinematic .story-murphy-card__mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 20px;
  }

  .story-page--cinematic .story-murphy-card__header {
    gap: 10px;
  }

  .story-page--cinematic .story-murphy-card__header strong {
    font-size: 16px;
  }

  .story-page--cinematic .story-murphy-card__header small {
    font-size: 9px;
  }

  .story-page--cinematic .story-murphy-card__tagline {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.42;
  }

  .story-page--cinematic .story-murphy-card__points {
    gap: 8px;
    margin-top: 11px;
  }

  .story-page--cinematic .story-murphy-card__points li,
  .story-page--cinematic .story-murphy-card__points b {
    font-size: 11.5px;
  }

  .story-page--cinematic .story-murphy-card__points small {
    font-size: 9.5px;
  }

  .story-page--cinematic .story-murphy-card__stats {
    margin-top: 11px;
  }

  .story-page--cinematic .story-murphy-card__stats dt {
    font-size: 14px;
  }

  .story-page--cinematic .story-murphy-card__stats dd {
    font-size: 9px;
  }

  .story-page--cinematic .story-murphy-card__footer {
    padding-top: 11px;
  }

  .story-page--cinematic .story-murphy-card__status,
  .story-page--cinematic .story-murphy-card__link {
    font-size: 10.5px;
  }
}

@media (min-width: 1121px) {
  .story-page--cinematic .story-orbit,
  .story-page--cinematic .story-orbit__stack {
    width: 800px;
    height: 610px;
    min-height: 610px;
  }

  .story-page--cinematic .story-orbit__stack {
    animation: home-serenia-deck-float 8s ease-in-out infinite !important;
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .story-page--cinematic .story-orbit {
    display: block;
    width: 100%;
    min-height: 520px;
    height: 520px;
    overflow: visible;
  }

  .story-page--cinematic .story-orbit__stack {
    position: relative;
    left: 50%;
    display: block;
    width: 800px;
    max-width: none;
    height: 590px;
    min-height: 590px;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
    transform: translateX(-50%) scale(.82);
    transform-origin: top center;
    animation: none !important;
  }
}

@media (min-width: 1121px) and (max-width: 1599px) and (max-height: 960px) {
  .story-page--cinematic .story-hero__copy {
    margin-top: 32px;
  }

  .story-page--cinematic .story-hero__lead {
    margin-top: 28px;
  }

  .story-page--cinematic .story-hero__actions {
    margin-top: 22px;
    row-gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .story-page--cinematic .story-orbit__stack {
    animation: none !important;
  }

  .story-page--cinematic .story-orbit__card,
  .story-page--cinematic .story-orbit__card--front,
  .story-page--cinematic .story-orbit__card--b,
  .story-page--cinematic .story-orbit__card--c,
  .story-page--cinematic .story-orbit__card--d {
    transition: none !important;
  }
}

/* ===== Homepage final diagnostic - content-rich cinematic conclusion ===== */
@keyframes home-cta-signal-pulse {
  0%, 100% { opacity: .72; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.16); }
}

.story-page--cinematic .story-cta {
  width: 100%;
  max-width: none;
  min-height: 640px;
  margin: 0;
  padding: clamp(40px, 4vw, 72px);
  grid-template-columns: 1fr;
  place-items: center;
  align-content: center;
  border-radius: 42px;
}

.story-page--cinematic .story-cta__shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 1520px);
  min-height: min(650px, calc(var(--home-cinema-stage, 780px) - 112px));
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  gap: clamp(44px, 5vw, 82px);
  align-items: stretch;
  padding: clamp(42px, 4vw, 62px);
  overflow: hidden;
  border: 1px solid rgba(128, 206, 255, .24);
  border-radius: 34px;
  background:
    radial-gradient(circle at 4% 100%, rgba(91, 76, 240, .19), transparent 36%),
    radial-gradient(circle at 92% 2%, rgba(91, 184, 235, .18), transparent 32%),
    linear-gradient(128deg, rgba(11, 31, 58, .94), rgba(7, 21, 43, .91) 55%, rgba(7, 17, 36, .96));
  box-shadow:
    0 40px 90px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(238, 248, 255, .07),
    inset 0 0 70px rgba(59, 151, 218, .045);
  backdrop-filter: blur(24px) saturate(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.05);
}

.story-page--cinematic .story-cta__shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .045), transparent 22%, transparent 76%, rgba(112, 211, 255, .04)),
    radial-gradient(circle at 49% 54%, rgba(83, 146, 242, .08), transparent 36%);
}

.story-page--cinematic .story-cta__copy {
  align-self: center;
  max-width: 590px;
}

.story-page--cinematic .story-cta p.story-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  color: var(--cb-eyebrow-ink-dark);
  font-size: var(--cb-eyebrow-size);
  font-weight: var(--cb-eyebrow-weight);
  letter-spacing: var(--cb-eyebrow-tracking);
  line-height: 1;
  text-transform: uppercase;
}

.story-page--cinematic .story-cta__eyebrow i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #67e0b9;
  box-shadow: 0 0 0 5px rgba(103, 224, 185, .09), 0 0 18px rgba(103, 224, 185, .5);
  animation: home-cta-signal-pulse 2.8s ease-in-out infinite;
}

.story-page--cinematic .story-cta h2 {
  max-width: 11.5ch;
  margin: 0;
  color: var(--cb-display-ink-dark);
  font-size: var(--cb-title-section-side);
  font-family: var(--cb-display-font);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.story-page--cinematic .story-cta p.story-cta__lead {
  max-width: 50ch;
  margin: 24px 0 0;
  color: var(--cb-lead-ink-dark);
  font-size: var(--cb-lead-section);
  font-weight: var(--cb-lead-weight);
  letter-spacing: var(--cb-lead-tracking);
  line-height: 1.46;
}

.story-page--cinematic .story-cta__proofs {
  list-style: none;
  margin: 29px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.story-page--cinematic .story-cta__proofs li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(214, 228, 246, .83);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.story-page--cinematic .story-cta__proofs svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid rgba(103, 224, 185, .28);
  border-radius: 50%;
  color: #67e0b9;
  background: rgba(103, 224, 185, .08);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-cta__copy .story-btn--primary {
  min-width: 250px;
  min-height: 58px;
  margin-top: 33px;
  justify-self: start;
  padding: 16px 24px !important;
  border-radius: 13px !important;
  background: #a8ddff !important;
  box-shadow:
    0 18px 38px rgba(74, 174, 238, .2),
    0 0 0 1px rgba(226, 247, 255, .22) inset !important;
}

.story-page--cinematic .story-cta__journey {
  position: relative;
  align-self: stretch;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  padding: clamp(27px, 2.6vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(137, 205, 247, .2);
  border-radius: 27px;
  background:
    radial-gradient(circle at 86% 5%, rgba(79, 165, 230, .15), transparent 29%),
    linear-gradient(145deg, rgba(15, 42, 73, .78), rgba(4, 17, 35, .84));
  box-shadow:
    0 26px 58px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(230, 247, 255, .055);
}

.story-page--cinematic .story-cta__journey::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 28%, transparent 72%, rgba(97, 193, 246, .035));
}

.story-page--cinematic .story-cta__journey > * {
  position: relative;
  z-index: 1;
}

.story-page--cinematic .story-cta__journey-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.story-page--cinematic .story-cta__journey-head p {
  margin: 0 0 8px;
  color: rgba(144, 208, 247, .8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.story-page--cinematic .story-cta__journey-head h3 {
  max-width: 18ch;
  margin: 0;
  color: rgba(240, 246, 255, .95);
  font-size: clamp(24px, 1.65vw, 30px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.story-page--cinematic .story-cta__journey-head > span {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(103, 224, 185, .24);
  border-radius: 999px;
  color: #a7edd5;
  background: rgba(103, 224, 185, .075);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.story-page--cinematic .story-cta__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  counter-reset: none;
}

.story-page--cinematic .story-cta__steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 44px;
  bottom: 44px;
  left: 62px;
  width: 1px;
  background: linear-gradient(180deg, rgba(103, 224, 185, .12), rgba(90, 180, 255, .6), rgba(86, 126, 255, .16));
  box-shadow: 0 0 14px rgba(76, 177, 238, .24);
}

.story-page--cinematic .story-cta__step {
  position: relative;
  z-index: 1;
  min-height: 82px;
  display: grid;
  grid-template-columns: 26px 46px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 13px 16px 13px 13px;
  border: 1px solid rgba(133, 199, 241, .13);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(16, 47, 79, .42), rgba(4, 17, 35, .38));
  box-shadow: inset 0 1px 0 rgba(236, 247, 255, .025);
}

.story-page--cinematic .story-cta__step-number {
  align-self: start;
  padding-top: 3px;
  color: rgba(148, 205, 241, .58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.story-page--cinematic .story-cta__step-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115, 211, 255, .27);
  border-radius: 13px;
  color: #83d7ff;
  background: rgba(63, 164, 224, .1);
  box-shadow: inset 0 0 18px rgba(63, 164, 224, .06);
}

.story-page--cinematic .story-cta__step-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-cta__step h4 {
  margin: 0;
  color: rgba(238, 245, 255, .94);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.018em;
  line-height: 1.2;
}

.story-page--cinematic .story-cta__step p {
  max-width: none;
  margin: 5px 0 0;
  color: rgba(180, 202, 230, .72);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.story-page--cinematic .story-cta__outcome {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(103, 224, 185, .2);
  border-radius: 17px;
  background:
    linear-gradient(110deg, rgba(39, 125, 133, .16), rgba(29, 72, 126, .15)),
    rgba(3, 14, 29, .28);
}

.story-page--cinematic .story-cta__outcome-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #67e0b9;
  background: rgba(103, 224, 185, .1);
  box-shadow: inset 0 0 18px rgba(103, 224, 185, .07);
}

.story-page--cinematic .story-cta__outcome-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-page--cinematic .story-cta__outcome div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.story-page--cinematic .story-cta__outcome div > span {
  color: rgba(145, 218, 205, .72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.story-page--cinematic .story-cta__outcome strong {
  color: rgba(228, 239, 250, .91);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.35;
}

body.home-cinema--enhanced .story-cta__journey,
body.home-cinema--enhanced .story-cta__step,
body.home-cinema--enhanced .story-cta__outcome {
  opacity: .42;
  transform: translate3d(16px, 0, 0);
}

body.home-cinema--enhanced .story-cta.is-home-cinema-active .story-cta__journey,
body.home-cinema--enhanced .story-cta.is-home-cinema-active .story-cta__step,
body.home-cinema--enhanced .story-cta.is-home-cinema-active .story-cta__outcome {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s cubic-bezier(.16, 1, .3, 1),
    transform .72s cubic-bezier(.16, 1, .3, 1);
}

body.home-cinema--enhanced .story-cta.is-home-cinema-active .story-cta__step:nth-child(1) { transition-delay: .08s; }
body.home-cinema--enhanced .story-cta.is-home-cinema-active .story-cta__step:nth-child(2) { transition-delay: .16s; }
body.home-cinema--enhanced .story-cta.is-home-cinema-active .story-cta__step:nth-child(3) { transition-delay: .24s; }
body.home-cinema--enhanced .story-cta.is-home-cinema-active .story-cta__outcome { transition-delay: .3s; }

@media (max-width: 1120px) {
  .story-page--cinematic .story-cta {
    width: 100%;
    min-height: 0;
    margin-bottom: 36px;
    padding: 52px 20px;
  }

  .story-page--cinematic .story-cta__shell {
    width: min(100%, 980px);
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 42px;
  }

  .story-page--cinematic .story-cta__copy {
    max-width: 680px;
  }

  .story-page--cinematic .story-cta h2 {
    max-width: 13ch;
  }
}

@media (max-width: 760px) {
  .story-page--cinematic .story-cta {
    margin-bottom: 20px;
    padding: 38px 12px 28px;
    border-radius: 28px;
  }

  .story-page--cinematic .story-cta__shell {
    width: 100%;
    gap: 30px;
    padding: 29px 20px 22px;
    border-radius: 26px;
  }

  .story-page--cinematic .story-cta p.story-cta__eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .story-page--cinematic .story-cta h2 {
    max-width: none;
    font-size: var(--cb-title-section-side);
  }

  .story-page--cinematic .story-cta p.story-cta__lead {
    margin-top: 19px;
  }

  .story-page--cinematic .story-cta__proofs {
    margin-top: 23px;
  }

  .story-page--cinematic .story-cta__copy .story-btn--primary {
    width: 100%;
    min-width: 0;
    margin-top: 27px;
    justify-self: stretch;
  }

  .story-page--cinematic .story-cta__journey {
    gap: 18px;
    padding: 22px 16px 18px;
    border-radius: 21px;
  }

  .story-page--cinematic .story-cta__journey-head {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .story-page--cinematic .story-cta__journey-head h3 {
    max-width: 18ch;
    font-size: 23px;
  }

  .story-page--cinematic .story-cta__journey-head > span {
    justify-self: start;
  }

  .story-page--cinematic .story-cta__steps::before {
    left: 49px;
  }

  .story-page--cinematic .story-cta__step {
    min-height: 80px;
    grid-template-columns: 24px 40px minmax(0, 1fr);
    gap: 9px;
    padding: 12px 10px;
    border-radius: 14px;
  }

  .story-page--cinematic .story-cta__step-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .story-page--cinematic .story-cta__step-icon svg {
    width: 20px;
    height: 20px;
  }

  .story-page--cinematic .story-cta__step h4 {
    font-size: 14.5px;
  }

  .story-page--cinematic .story-cta__step p {
    font-size: 12.5px;
  }

  .story-page--cinematic .story-cta__outcome {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    padding: 14px 12px;
  }

  .story-page--cinematic .story-cta__outcome-icon {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--cinematic .story-cta__eyebrow i {
    animation: none !important;
  }

  body.home-cinema--enhanced .story-cta__journey,
  body.home-cinema--enhanced .story-cta__step,
  body.home-cinema--enhanced .story-cta__outcome {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}