/* ============================================================================
   A БАНК — Premium 3D Scrolling Experience
   Design tokens, global system, scene-by-scene styles.
   ============================================================================ */

/* ============================================================================
   DESIGN TOKENS — calibrated to feel hand-crafted by a studio (not generated).
   Anchor references: facilpay.io, urpal.com, superconscious-app.webflow.io.
   ============================================================================ */
:root {
  /* Surfaces */
  --bg-main: #000005;       /* deep near-black — matches vault & blackout */
  --bg-deep: #050506;       /* deeper black for sections that recede */
  --bg-paper: #efeae2;      /* warm paper for light sections (alternation) */
  --bg-card: #111114;
  --bg-elevated: #18181c;

  /* Text */
  --text-main: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.62);
  --text-muted: rgba(245, 245, 247, 0.40);
  --text-on-paper: #1a1a1f;
  --text-on-paper-secondary: rgba(26, 26, 31, 0.62);

  /* Lines & glass */
  --line: rgba(245, 245, 247, 0.08);
  --line-strong: rgba(245, 245, 247, 0.16);
  --line-paper: rgba(26, 26, 31, 0.08);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);

  /* Brand accent — Tiffany (the colour the user explicitly asked to keep). */
  --accent: #0ABAB5;            /* Tiffany — primary brand */
  --accent-soft: #7df9ff;       /* lighter halo */
  --accent-deep: #086e6c;       /* depth */
  --accent-violet: #7c3aed;     /* secondary, used sparingly */
  --grad-accent: linear-gradient(135deg, #086e6c 0%, #0ABAB5 50%, #7df9ff 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(10,186,181,0.20) 0%, rgba(125,249,255,0.20) 100%);

  /* Status (kept for backward-compat with some existing UI bits) */
  --warn: #f5b75a;
  --err: #fb6f8c;

  /* Motion */
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.5, -0.2, 0.2, 1.4);

  /* Geometry */
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --container: 1320px;
  --container-tight: 1080px;
  --nav-h: 72px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 32px -12px rgba(0,0,0,0.4);
  --shadow-elevated: 0 30px 80px -24px rgba(0,0,0,0.6);
  --shadow-glow: 0 30px 90px -28px rgba(10, 186, 181, 0.45);
}

/* ---------- RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100vh;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
a {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
a {
  text-decoration: none;
  cursor: pointer;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- TYPOGRAPHY ---------- */
.heading-xl {
  font-family: "Sora", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
}
.heading-l {
  font-family: "Sora", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 0.6em;
}
.text-body {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  color: var(--text-secondary);
  margin: 0;
}
.text-secondary {
  color: var(--text-secondary);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
}
.glow-accent {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(10, 186, 181, 0.35);
}
/* Numbered section chips ("01 / Проблема" etc.) — visually muted to almost
   gone per the user's "remove text on top" feedback. The composition tells
   the story; the eyebrow stays semantically for screen readers. */
.eyebrow {
  display: none;
}

/* Verbose descriptive sub-headlines that sit directly under the section
   H2 — removed in favour of pure visual storytelling. The user said
   "убери … заглавия блоков, пользователь сам должен понимать".
   The H2 above stays as a single-line statement; the visuals below
   carry the rest. Hero / footer text is unaffected (different markup). */
.heading-l + .text-secondary,
.heading-l + .text-body {
  display: none;
}

/* Same idea for the problem points checklist that duplicates the
   chaotic visual cards next to it. */
.problem-text .problem-points {
  display: none;
}

/* Stencil markings, vault plate, and dial digits — REMOVED from the design.
   The vault speaks visually, not via labels. */
.vault__stencil,
.vault__plate { display: none !important; }
.vault__dial span { font-size: 0 !important; } /* keep tick marks, drop digits */

/* Hide only legacy CSS-vault leaves we don't render anymore. The new
   premium SVG vault classes (.vault, .vault__wall, .vault__door,
   .vault__interior, .vault__wheel, .vault__hinge, .vault__door-wrap,
   .vault__cam, .vault__stage, .vault__interior-glow, .vault__interior-rays)
   are defined further down and must NOT be killed here. */
.vault__main, .vault__lock,
.vault__dial, .vault__lever, .vault__handle, .vault__indicator,
.vault__plate, .vault__rivet, .vault__collar, .vault__hinges,
.vault__ring, .vault__bolt, .vault__keyhole, .vault__shelves,
.vault__stencil, .vault__rivets, .vault__spoke, .vault__hub { display: none !important; }

/* ============================================================================
   STUDIO-GRADE COMPOSITION HELPERS — patterned after facilpay / urpal /
   superconscious. Big stacked headlines, marquees, bento, paper sections.
   ============================================================================ */

/* Manifesto-scale display headings: each line on its own, very tight tracking,
   line-height ≈ 0.9 — gives that "studio designed" billboard feel. */
.display-mega {
  font-family: "Sora", "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: clamp(3.2rem, 10vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
}
.display-xl {
  font-family: "Sora", "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
}
.display-l {
  font-family: "Sora", "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
}
.display-stack > * { display: block; }
.display-stack > * + * { margin-top: 0.05em; }

/* Gradient ink — single accent applied as text-fill */
.text-grad {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.text-muted-display { color: var(--text-secondary); }

/* "Scroll to explore" indicator — subtle vertical breadcrumb */
.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Sora", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-hint::before {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--text-muted), transparent);
  animation: scrollHintPulse 2.4s ease-in-out infinite;
}
@keyframes scrollHintPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50%      { opacity: 1;   transform: scaleY(1.1); }
}

/* Container helpers */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.container--tight {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* Paper-tone section (alternation pattern from facilpay/superconscious) */
.section--paper {
  background: var(--bg-paper);
  color: var(--text-on-paper);
}
.section--paper .text-secondary,
.section--paper .text-muted {
  color: var(--text-on-paper-secondary);
}
.section--paper .display-mega,
.section--paper .display-xl,
.section--paper .display-l {
  color: var(--text-on-paper);
}
.section--paper .scroll-hint { color: var(--text-on-paper-secondary); }
.section--paper .scroll-hint::before {
  background: linear-gradient(to bottom, transparent, rgba(26,26,31,0.4), transparent);
}

/* ============================================================================
   MARQUEE — infinite logo strip (CSS-only, GPU friendly)
   ============================================================================ */
.marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) 0;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.04), transparent 50%, rgba(6, 182, 212, 0.04));
}
.marquee__track {
  display: flex;
  gap: clamp(40px, 6vw, 80px);
  width: max-content;
  animation: marqueeSlide 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Sora", sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: -0.015em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.marquee__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-accent);
}
@keyframes marqueeSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Edge fade so the strip "breathes" into the surrounding section */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 8vw, 160px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-main), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-main), transparent);
}
.section--paper .marquee {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.04), transparent 50%, rgba(6, 182, 212, 0.04));
  border-block-color: var(--line-paper);
}
.section--paper .marquee::before { background: linear-gradient(to right, var(--bg-paper), transparent); }
.section--paper .marquee::after  { background: linear-gradient(to left,  var(--bg-paper), transparent); }
.section--paper .marquee__item   { color: var(--text-on-paper-secondary); }

/* ============================================================================
   TRIPLE-STATEMENT — "Chat. Pay. Confirm." style cluster
   ============================================================================ */
.triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(80px, 12vh, 160px) 0;
}
.triple__cell {
  display: grid;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.triple__cell h3 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
}
.triple__cell p {
  margin: 0;
  color: var(--text-secondary);
  max-width: 32ch;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
}
.triple__cell .num {
  font-family: "Sora", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .triple { grid-template-columns: 1fr; gap: 32px; padding: 64px 0 80px; }
}

/* ============================================================================
   BENTO GRID — clean cards with one accent tile
   ============================================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 18px;
}
.bento__card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: transform 400ms var(--easing), border-color 400ms ease;
}
.bento__card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}
.bento__card.is-feature {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, 0.18), transparent 50%),
    radial-gradient(120% 120% at 100% 100%, rgba(6, 182, 212, 0.18), transparent 50%),
    var(--bg-card);
  border-color: rgba(124, 58, 237, 0.25);
}
.bento__card.is-wide   { grid-column: span 4; }
.bento__card.is-narrow { grid-column: span 2; }
.bento__card.is-half   { grid-column: span 3; }
.bento__card .num {
  font-family: "Sora", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.bento__card h3 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.bento__card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.5;
}
.section--paper .bento__card {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--line-paper);
}
.section--paper .bento__card.is-feature {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, 0.10), transparent 50%),
    radial-gradient(120% 120% at 100% 100%, rgba(6, 182, 212, 0.10), transparent 50%),
    rgba(255, 255, 255, 0.65);
  border-color: rgba(124, 58, 237, 0.18);
}
.section--paper .bento__card .num,
.section--paper .bento__card p { color: var(--text-on-paper-secondary); }
.section--paper .bento__card h3 { color: var(--text-on-paper); }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card.is-wide,
  .bento__card.is-narrow,
  .bento__card.is-half { grid-column: span 2; }
}

/* ============================================================================
   BUTTONS — refined, minimal, single accent
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: "Sora", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 220ms var(--easing), background 220ms ease, color 220ms ease, box-shadow 220ms ease;
  user-select: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--text-main);
  color: var(--bg-main);
  border: 1px solid var(--text-main);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 18px 40px -18px rgba(124, 58, 237, 0.5);
}
.btn--ghost {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.3);
}
.section--paper .btn--primary {
  background: var(--text-on-paper);
  color: var(--bg-paper);
  border-color: var(--text-on-paper);
}
.section--paper .btn--ghost {
  color: var(--text-on-paper);
  border-color: rgba(26,26,31,0.18);
}
.section--paper .btn--ghost:hover {
  background: rgba(26,26,31,0.04);
  border-color: rgba(26,26,31,0.32);
}

/* ============================================================================
   HERO v3 — full-bleed, big typography centred, 3D centrepiece behind
   ============================================================================ */
.hero--v3 {
  position: relative;
  /* Hero is silent — only orb + wordmark. Exactly 100vh so the fade
     into the next scene happens cleanly at the bottom of the viewport. */
  min-height: 100vh;
  display: block;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000005;
  /* Soft mask at the bottom so particles + wordmark dissolve into the next
     section instead of being chopped by a hard horizontal seam. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(
    to bottom,
    #000 0%, #000 78%, transparent 100%);
}

/* Marquee that follows the hero — no top-edge of its own; particles fade
   into it via the hero mask, and the marquee items themselves sit on a
   transparent strip with a soft top blur so the join reads as continuous
   darkness rather than a stacked-cards edge. */
.marquee--top {
  background: transparent !important;
  margin-top: -120px;       /* pull up under the hero fade */
  padding-top: 80px;
  position: relative;
  z-index: 2;
}
.marquee--top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 5, 0)   0%,
    rgba(0, 0, 5, 0.4) 35%,
    rgba(0, 0, 5, 0.85) 70%,
    #000005 100%);
  pointer-events: none;
  z-index: -1;
}

/* Whisper-thin scroll cue: a single vertical line that pulses downwards.
   Sits at the bottom centre. Fades on scroll (driven by app.js / CSS
   based on scroll position). */
/* ============================================================================
   HERO BRAND MARK — readable «А БАНК» that shatters into tiles on scroll.
   The mark is rendered as real HTML (chip + wordmark text). On scroll JS
   covers it with a generated tile grid that flies away in 3D space.
   ============================================================================ */
.hero-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  /* Hard cap on width so the wordmark always fits the viewport with
     comfortable side margins, regardless of font metrics. */
  max-width: 88vw;
  white-space: nowrap;
  pointer-events: none;
  perspective: 1200px;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}
.hero-mark__chip {
  /* Sized as a fraction of the wordmark — chip ≈ word height × 0.78 */
  width: clamp(54px, 6.6vw, 96px);
  aspect-ratio: 1 / 1;
  border-radius: clamp(12px, 1.3vw, 20px);
  filter: drop-shadow(0 18px 48px rgba(10, 186, 181, 0.35));
  flex-shrink: 0;
}
.hero-mark__chip svg { display: block; width: 100%; height: 100%; }
.hero-mark__word {
  font-family: "Sora", "Inter Tight", system-ui, sans-serif;
  font-weight: 700;
  /* Tightened so 4 chars × Sora 700 fits inside max-width 88vw with the chip.
     vw cap chosen so total visible width never exceeds the viewport. */
  font-size: clamp(42px, 7.2vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-shadow:
    0 2px 24px rgba(125, 249, 255, 0.18),
    0 0 1px rgba(255, 255, 255, 0.5);
}
@media (max-width: 480px) {
  .hero-mark { gap: 10px; }
  .hero-mark__word { font-size: clamp(38px, 11.5vw, 56px); }
  .hero-mark__chip { width: clamp(40px, 11vw, 56px); border-radius: 12px; }
}

/* Tile grid spawned by JS — sits on top of the hero-mark and absorbs it
   when shattering starts. */
.hero-mark__tiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.hero-mark__tile {
  position: absolute;
  background-position: var(--bgx) var(--bgy);
  background-repeat: no-repeat;
  background-size: var(--bgw) var(--bgh);
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: drop-shadow(0 6px 14px rgba(10, 186, 181, 0.18));
}

.hero3d__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 56px);
  transform: translateX(-50%);
  z-index: 3;
  width: 1px;
  height: 56px;
  pointer-events: none;
  opacity: 0.7;
}
.hero3d__cue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(10, 186, 181, 0.45) 50%,
    transparent 100%
  );
}
.hero3d__cue span {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(10, 186, 181, 0.6);
  animation: heroCueDrop 2.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes heroCueDrop {
  0%   { transform: translateY(0);    opacity: 0;   }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(40px); opacity: 0;   }
}

/* ============================================================================
   CINEMATIC SHADOW VIGNETTE — fixed top + bottom dark gradients across the
   entire viewport. Every scene therefore "emerges from shadow" at the top
   of the screen and "dissolves into shadow" at the bottom as you scroll,
   exactly the feel the user asked for: «плавно из тени переходим
   от части к части». Pointer-events disabled so it never blocks input. */
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 22vh;
  z-index: 30;
  pointer-events: none;
  transition: opacity 500ms ease;
}
body::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    #000005 0%,
    rgba(0, 0, 5, 0.85) 30%,
    rgba(0, 0, 5, 0.45) 65%,
    rgba(0, 0, 5, 0) 100%
  );
}
body::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    #000005 0%,
    rgba(0, 0, 5, 0.85) 30%,
    rgba(0, 0, 5, 0.45) 65%,
    rgba(0, 0, 5, 0) 100%
  );
}
/* The vignette stays in cinema-mode too, but slightly darker so the vault
   feels like a true close-up. */
body.cinema-mode::before,
body.cinema-mode::after { opacity: 1; }

/* When the intro loader is on, vignette is hidden (loader handles its own
   black canvas). */
body.is-loading::before,
body.is-loading::after { opacity: 0; }

.hero3d__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero3d__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(110vmin, 1400px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -52%);
  background:
    radial-gradient(closest-side, rgba(10,186,181,0.32), transparent 65%),
    radial-gradient(closest-side at 70% 70%, rgba(125,249,255,0.20), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: heroHaloDrift 18s ease-in-out infinite alternate;
}
@keyframes heroHaloDrift {
  0%   { transform: translate(-52%, -55%) scale(1);   opacity: 0.85; }
  100% { transform: translate(-48%, -49%) scale(1.05); opacity: 1; }
}

.hero3d__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  padding-top: clamp(40px, 8vh, 100px);
  padding-bottom: clamp(40px, 6vh, 80px);
  text-align: center;
  justify-items: center;
}

.hero3d__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(245, 245, 247, 0.04);
  backdrop-filter: blur(20px);
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.hero3d__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(6,182,212,0.5);
  animation: heroPulse 2s ease-out infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(10,186,181,0.55); }
  100% { box-shadow: 0 0 0 12px rgba(10,186,181,0); }
}

.hero3d__headline {
  margin: 0;
  text-align: center;
}
.hero3d__headline .display-mega {
  display: block;
}

.hero3d__lead {
  max-width: 36ch;
  margin: 8px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.55;
  color: var(--text-secondary);
}

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

.hero3d__floor {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.hero3d__metrics {
  display: flex;
  gap: clamp(20px, 4vw, 56px);
}
.hero3d__metrics > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.hero3d__metrics b {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.hero3d__metrics i {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .hero3d__floor { justify-content: flex-start; }
  .hero3d__metrics { flex-wrap: wrap; gap: 20px 32px; }
}

/* ---------- LAYOUT ----------
   IMPORTANT: never apply `perspective` or `transform-style` to ancestors
   that contain GSAP-pinned elements — it breaks position:fixed of the pin.
   3D perspective is set only on small isolated containers that need it
   (e.g. .vault-cinema__pin, .benefit-grid, .clean-ui-wrapper). */
.page-wrapper {
  position: relative;
  z-index: 1;
}
.section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: clip;
}
.scene-stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(80px, 10vh, 140px) clamp(20px, 5vw, 80px);
}
.scene-stage--block {
  display: block;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ---------- BACKGROUND ----------
   Studio-grade aesthetic: solid near-black canvas with extremely subtle
   noise layer. Heavy gradient/glow lives ONLY on the hero halo. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-main);
}
.aurora__blob { display: none; }
.grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- GLASS UTILITIES ---------- */
.glass-pill,
.glass-nav,
.glass-card {
  background: var(--glass-strong);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---------- BUTTONS ---------- */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: #042423;
  background: linear-gradient(180deg, #1de7e2 0%, var(--accent) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 10px 30px -10px rgba(10, 186, 181, 0.7),
    0 0 60px -10px rgba(10, 186, 181, 0.5);
  transition:
    transform 0.3s var(--easing),
    box-shadow 0.3s var(--easing),
    filter 0.3s var(--easing);
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 80% at 50% -20%,
    rgba(255, 255, 255, 0.7) 0%,
    transparent 60%
  );
  opacity: 0.6;
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 20px 50px -10px rgba(10, 186, 181, 0.85),
    0 0 90px -8px rgba(10, 186, 181, 0.7);
}
.btn-primary--sm {
  padding: 10px 16px;
  font-size: 0.85rem;
}
.btn-primary--xl {
  padding: 22px 36px;
  font-size: 1.05rem;
  border-radius: var(--radius-pill);
}
.btn-primary__pulse {
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(10, 186, 181, 0.5);
  pointer-events: none;
  animation: ctaPulse 2.6s var(--easing-soft) infinite;
}
@keyframes ctaPulse {
  0% { transform: scale(0.85); opacity: 0.8; }
  60% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.3s var(--easing), border-color 0.3s var(--easing);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(10, 186, 181, 0.6);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #1de7e2 0%, var(--accent) 100%);
  color: #042423;
  font-weight: 600;
  font-size: 0.82rem;
  border: 0;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.pill:hover {
  filter: brightness(1.08);
}
.pill.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  border: 1px solid var(--line-strong);
}

/* ---------- NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(10, 10, 11, 0.55);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.nav.glass-nav { /* override the legacy glass styling */
  background: rgba(10, 10, 11, 0.55);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.nav__brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--grad-accent);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: none;
}
.nav__brand-text { font-size: 0.95rem; }
.nav__links {
  display: flex;
  gap: clamp(14px, 1.8vw, 28px);
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.nav__links a {
  position: relative;
  transition: color 0.2s ease;
  padding: 4px 0;
}
.nav__links a:hover { color: var(--text-main); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.3s var(--easing);
}
.nav__links a:hover::after { width: 100%; }

@media (max-width: 760px) {
  .nav__links {
    display: none;
  }
}

/* ---------- SCENE RAIL ---------- */
.scene-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 8px;
  border-radius: var(--radius-pill);
  background: rgba(10, 14, 40, 0.4);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.scene-rail__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
  transition: background 0.3s var(--easing), transform 0.3s var(--easing);
}
.scene-rail__dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.3s var(--easing);
}
.scene-rail__dot:hover {
  background: var(--accent-soft);
}
.scene-rail__dot.is-active {
  background: var(--accent);
  transform: scale(1.2);
}
.scene-rail__dot.is-active::before {
  border-color: rgba(10, 186, 181, 0.55);
  animation: railPulse 2s ease-in-out infinite;
}
@keyframes railPulse {
  50% { transform: scale(1.4); opacity: 0; }
}
@media (max-width: 760px) {
  .scene-rail { display: none; }
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: rgba(255, 255, 255, 0.05);
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-soft) 60%, var(--accent));
  box-shadow: 0 0 14px rgba(10, 186, 181, 0.7);
  transform-origin: 0 50%;
}

/* ============================================================================
   🎬 CINEMA MODE — when the vault pin is active, fade out everything except
   the vault itself: top nav, side dots, scroll progress.
   ============================================================================ */
/* ============================================================================
   CINEMA MODE — total focus on the vault. Hides nav, side dots, progress
   bar, aurora backdrop, and grain. Only the pinned vault remains visible.
   ============================================================================ */
.nav,
.scene-rail,
.scroll-progress,
.aurora,
.grain {
  transition: opacity 500ms ease, transform 500ms ease;
  will-change: opacity;
}
html body.cinema-mode .nav.glass-nav,
html body.cinema-mode .nav {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(-24px);
}
html body.cinema-mode .scene-rail {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateX(40px);
}
html body.cinema-mode .scroll-progress { opacity: 0 !important; }
html body.cinema-mode .aurora,
html body.cinema-mode .grain { opacity: 0 !important; }
html body.cinema-mode { background: #000005 !important; }

/* ============================================================================
   SCENE 1 — HERO / AWAKENING
   ============================================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero .scene-stage {
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  padding-top: clamp(120px, 14vh, 180px);
}
.hero-3d-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 920px;
  display: grid;
  gap: 22px;
  justify-items: center;
}
.hero__logo-space {
  width: 100%;
  height: clamp(220px, 32vh, 340px);
}
.hero__poem {
  font-family: "Sora", sans-serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  margin: 0 auto;
}
.hero__eyebrow {
  margin: 0 auto;
}
.dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
.logo-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  justify-content: center;
}
.logo-wordmark__a {
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(10, 186, 181, 0.5));
}
.logo-wordmark__bank {
  color: #fff;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.18);
}
.hero__poem {
  font-family: "Sora", sans-serif;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.hero__sub {
  display: grid;
  gap: 6px;
  max-width: 720px;
  margin: 6px auto 0;
}
.hero__claim {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
.hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.hero__scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 3;
}
.hero__scroll-line {
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line span {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--accent);
  animation: scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { top: -30%; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ============================================================================
   SCENE 2 — PROBLEM / OUTDATED CHAOS
   ============================================================================ */
.problem .scene-stage {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.ui-chaos-wrapper {
  position: relative;
  width: 100%;
  height: clamp(520px, 68vh, 720px);
  perspective: 1400px;
  transform-style: preserve-3d;
}
.ui-fragment {
  position: absolute;
  background: rgba(15, 18, 50, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}
.ui-fragment header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.ui-fragment header b {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.ui-fragment .err { color: var(--err); }
.ui-fragment .warn { color: var(--warn); }

.ui-fragment--legacy {
  width: 320px;
  top: 6%;
  left: 4%;
  transform: rotate(-7deg) translateZ(0);
}
.ui-fragment__rows .row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: center;
}
.ui-fragment__rows .row i {
  display: block;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
}
.ui-fragment__rows .row em { font-style: normal; color: rgba(255, 255, 255, 0.7); }
.ui-fragment__rows .row em.err { color: var(--err); font-weight: 700; }

.ui-fragment--ledger {
  width: 280px;
  top: 12%;
  right: -2%;
  transform: rotate(5deg);
}
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
  font-size: 10px;
}
.ledger-grid > span:nth-child(-n+4) {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ui-fragment--chart {
  width: 280px;
  bottom: 12%;
  left: 0%;
  transform: rotate(4deg);
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
  margin: 8px 0;
}
.chart-bars span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.08));
  border-radius: 2px 2px 0 0;
}
.chart-bars span.err {
  background: linear-gradient(180deg, var(--err), rgba(255, 92, 138, 0.2));
}
.chart-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}
.chart-foot em { font-style: normal; }

.ui-fragment--terminal {
  width: 340px;
  bottom: 4%;
  right: 4%;
  transform: rotate(-4deg);
}
.ui-fragment--terminal pre {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.6);
}

.ui-fragment--alerts {
  width: 240px;
  top: 38%;
  left: 36%;
  transform: rotate(-3deg);
}
.ui-fragment--alerts ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
}
.ui-fragment--alerts ul li span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn);
}
.ui-fragment--alerts ul li span.err { background: var(--err); }

.ui-fragment--popup {
  width: 220px;
  top: 56%;
  right: 24%;
  transform: rotate(8deg);
  background: rgba(10, 13, 36, 0.96);
}
.ui-fragment--popup .popup b {
  display: block;
  color: var(--err);
  font-size: 13px;
  font-family: "Inter", sans-serif;
  margin-bottom: 6px;
}
.ui-fragment--popup .popup p {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.ui-fragment--popup .popup__btn {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.9);
}

.glitch-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--err), transparent);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.glitch-bar--a { top: 22%; animation: glitchBar 4.2s 0.4s ease-in-out infinite; }
.glitch-bar--b { top: 56%; animation: glitchBar 5.8s 1.6s ease-in-out infinite; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.glitch-bar--c { top: 78%; animation: glitchBar 7.1s 0.9s ease-in-out infinite; }
@keyframes glitchBar {
  0%, 92%, 100% { opacity: 0; transform: scaleX(0); }
  93% { opacity: 1; transform: scaleX(1); }
  95% { opacity: 0.6; transform: translateY(-2px) scaleX(1); }
  97% { opacity: 0; }
}

.problem-text {
  position: relative;
  z-index: 2;
  max-width: 540px;
}
.problem-points {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.problem-points li {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.problem-points .dot {
  width: 8px; height: 8px;
  background: var(--err);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--err);
}

@media (max-width: 960px) {
  .problem .scene-stage { grid-template-columns: 1fr; }
  .ui-chaos-wrapper { height: 460px; order: 2; }
}

/* ============================================================================
   SCENE 3 — SOLUTION / CLEAN UI
   ============================================================================ */
.solution .scene-stage {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.solution-text {
  max-width: 540px;
}
.clean-ui-wrapper {
  position: relative;
  width: 100%;
  height: clamp(560px, 70vh, 760px);
  perspective: 1600px;
  transform-style: preserve-3d;
}
.floating-card {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 18px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(10,186,181,0.04) inset;
  font-size: 0.85rem;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
.floating-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.floating-card .muted { color: var(--text-muted); font-size: 0.8rem; }
.floating-card .chip {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid var(--line);
}
.floating-card .chip--up {
  color: var(--accent);
  background: rgba(10,186,181,0.1);
  border-color: rgba(10,186,181,0.35);
}

.floating-card--balance {
  width: 270px;
  top: 4%;
  left: 4%;
}

/* ============================================================================
   FACE SCANNER — biometric KYC card (replaces the "balance" floating card
   in the Solution scene). Premium, dark, Tiffany-only.
   ============================================================================ */
.floating-card--face {
  width: 320px;
  top: 4%;
  left: 4%;
  padding: 18px;
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, rgba(8,12,28,0.92), rgba(4,7,18,0.92));
  border: 1px solid rgba(125, 249, 255, 0.12);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.face-scan header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.face-scan__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.face-scan__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0ABAB5;
  box-shadow: 0 0 0 0 rgba(10, 186, 181, 0.6);
  animation: faceDot 1.6s ease-out infinite;
}
@keyframes faceDot {
  0%   { box-shadow: 0 0 0 0 rgba(10, 186, 181, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(10, 186, 181, 0); }
}

.face-scan__viewport {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(10, 186, 181, 0.06) 0%,
      rgba(0, 0, 5, 0.6) 70%,
      #000005 100%);
  box-shadow:
    inset 0 0 0 1px rgba(125, 249, 255, 0.10),
    inset 0 0 32px rgba(10, 186, 181, 0.05);
}
.face-scan__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(10, 186, 181, 0.25));
}

/* 4 corner brackets — animated pulse-in */
.face-scan__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #0ABAB5;
  filter: drop-shadow(0 0 6px rgba(10, 186, 181, 0.55));
  animation: faceCorner 2.4s ease-in-out infinite;
}
.face-scan__corner--tl { top: 10px;    left: 10px;    border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.face-scan__corner--tr { top: 10px;    right: 10px;   border-left: 0;  border-bottom: 0; border-radius: 0 4px 0 0; }
.face-scan__corner--bl { bottom: 10px; left: 10px;    border-right: 0; border-top: 0;    border-radius: 0 0 0 4px; }
.face-scan__corner--br { bottom: 10px; right: 10px;   border-left: 0;  border-top: 0;    border-radius: 0 0 4px 0; }
@keyframes faceCorner {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

/* Mesh dots — staggered fade so it feels like a live scan */
.face-scan__mesh circle {
  r: 1.6;
  filter: drop-shadow(0 0 4px rgba(125, 249, 255, 0.6));
  animation: faceMesh 2.6s ease-in-out infinite;
}
.face-scan__mesh circle:nth-child(2n)  { animation-delay: -0.5s; }
.face-scan__mesh circle:nth-child(3n)  { animation-delay: -1.0s; }
.face-scan__mesh circle:nth-child(5n)  { animation-delay: -1.6s; }
.face-scan__mesh circle:nth-child(7n)  { animation-delay: -2.1s; }
@keyframes faceMesh {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Scanning beam — runs top→bottom, leaves a Tiffany trail */
.face-scan__beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  top: -60px;
  background:
    linear-gradient(to bottom,
      rgba(10, 186, 181, 0)      0%,
      rgba(10, 186, 181, 0.10)   45%,
      rgba(125, 249, 255, 0.55)  50%,
      rgba(10, 186, 181, 0.10)   55%,
      rgba(10, 186, 181, 0)      100%);
  filter: blur(0.5px);
  animation: faceBeam 3.2s cubic-bezier(0.6, 0.1, 0.4, 0.9) infinite;
  pointer-events: none;
}
@keyframes faceBeam {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(360px); opacity: 0; }
}

.face-scan__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.face-scan__metric {
  display: flex;
  flex-direction: column;
  font-family: "Sora", sans-serif;
}
.face-scan__metric em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.face-scan__metric i {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.face-scan__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 186, 181, 0.12);
  color: #0ABAB5;
  font-family: "Sora", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.floating-card--balance .balance {
  font-family: "Sora", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.floating-card--balance .balance span {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 400;
}
.floating-card--balance .micro-chart svg { width: 100%; height: 60px; }
.floating-card--balance footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 10px;
}

.floating-card--card {
  width: 280px;
  bottom: 18%;
  left: 14%;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.bank-card {
  width: 100%;
  aspect-ratio: 1.586/1;
  border-radius: 22px;
  padding: 22px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(125, 249, 255, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #0e1543 0%, #050722 60%, #0a1c4a 100%);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 60px -20px rgba(10,186,181,0.6),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  color: #fff;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  font-family: "Sora", sans-serif;
}
.bank-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 100% 0%, rgba(10,186,181,0.5), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}
.bank-card__chip {
  width: 38px; height: 28px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.18), rgba(255,255,255,0.18) 1px, transparent 2px, transparent 5px),
    linear-gradient(135deg, #d4d4f3 0%, #8a90c2 100%);
  position: relative;
  z-index: 1;
}
.bank-card__brand {
  position: absolute;
  top: 22px;
  right: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  z-index: 1;
}
.bank-card__num {
  align-self: end;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  z-index: 1;
}
.bank-card__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.6);
  z-index: 1;
}

.floating-card--tx {
  width: 280px;
  top: 28%;
  right: 6%;
}
.tx-list {
  display: grid;
  gap: 10px;
}
.tx-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.tx-list li:last-child { border-bottom: 0; }
.tx-icon {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  font-size: 0.85rem;
}
.tx-icon.up { color: var(--accent); background: rgba(10,186,181,0.12); }
.tx-list em { font-style: normal; color: var(--text-secondary); }
.tx-list em.up { color: var(--accent); }

.floating-card--ai {
  width: 290px;
  top: 56%;
  right: 16%;
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.ai-badge i {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: dotPulse 1.6s infinite;
}
.ai-msg {
  margin: 10px 0 14px;
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.5;
}
.ai-actions { display: flex; gap: 8px; }

.floating-card--goal {
  width: 240px;
  bottom: 4%;
  right: 6%;
}
.goal-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin: 12px 0 10px;
}
.goal-bar span {
  display: block;
  height: 100%;
  width: var(--p);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%);
  box-shadow: 0 0 12px rgba(10,186,181,0.6);
}
.floating-card--goal footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

@media (max-width: 960px) {
  .solution .scene-stage { grid-template-columns: 1fr; }
  .clean-ui-wrapper { height: 600px; }
}

/* ============================================================================
   SCENE 4 — MOBILE APP / 3D PHONE
   ============================================================================ */
.mobile .scene-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.mobile-text {
  max-width: 520px;
}
.feature-list {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.feature-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  transition: border-color 0.4s var(--easing), background 0.4s var(--easing), transform 0.4s var(--easing);
  align-items: flex-start;
  cursor: default;
}
.feature-item__num {
  font-family: "Sora", sans-serif;
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.feature-item h4 {
  margin: 0 0 4px;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
}
.feature-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.feature-item.is-active {
  border-color: rgba(10,186,181,0.55);
  background: linear-gradient(180deg, rgba(10,186,181,0.08), rgba(10,186,181,0.02));
  box-shadow: 0 20px 60px -25px rgba(10,186,181,0.5);
}
.feature-item.is-active .feature-item__num { color: var(--accent); }

.phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 2200px;
  perspective-origin: 50% 50%;
}
.phone-3d {
  position: relative;
  /* Aspect-locked, scales with viewport so the phone always fits the section
     without being cropped. ~46% × ~84vh works on every screen we tested. */
  width: clamp(240px, 24vw, 320px);
  aspect-ratio: 320 / 660;
  max-height: 78vh;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(6deg) rotateZ(-2deg);
  will-change: transform;
}
.phone-3d__shell {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 48px;
  background:
    linear-gradient(160deg, #232b56 0%, #0c1136 50%, #1a2050 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.06) inset,
    0 60px 120px -40px rgba(0,0,0,0.75),
    0 0 80px -10px rgba(10,186,181,0.4);
  padding: 14px;
  transform-style: preserve-3d;
}
.phone-3d__notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 30px;
  border-radius: 999px;
  background: #060828;
  z-index: 4;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.phone-3d__notch::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a4f6e, #050722 70%);
  box-shadow: 0 0 0 1px rgba(125,249,255,0.18);
}
.phone-3d__sidebtn,
.phone-3d__volup,
.phone-3d__voldown {
  position: absolute;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06));
  border-radius: 4px;
}
.phone-3d__sidebtn {
  right: -3px;
  top: 180px;
  width: 4px;
  height: 80px;
}
.phone-3d__volup {
  left: -3px;
  top: 160px;
  width: 4px;
  height: 50px;
}
.phone-3d__voldown {
  left: -3px;
  top: 220px;
  width: 4px;
  height: 80px;
}
.phone-3d__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: radial-gradient(120% 100% at 50% 0%, #11163d 0%, #060828 70%);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.screen {
  position: absolute;
  inset: 0;
  padding: 60px 20px 24px;
  display: grid;
  align-content: start;
  gap: 14px;
  font-family: "Sora", "Inter", sans-serif;
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.98);
  transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
  pointer-events: none;
}
.screen.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}
.screen__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.screen .muted { color: var(--text-muted); font-size: 0.7rem; }
.screen__hello {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.screen__balance {
  display: grid;
  gap: 6px;
}
.screen__balance b {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.screen__balance .chip {
  justify-self: start;
  background: rgba(10,186,181,0.12);
  color: var(--accent);
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.screen__quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.screen__quick button {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text-secondary);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}
.screen__quick button span {
  font-size: 1.1rem;
  color: var(--accent);
}
.screen__card {
  margin-top: 4px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10,186,181,0.18), rgba(10,186,181,0.04));
  border: 1px solid rgba(10,186,181,0.3);
  display: grid;
  gap: 8px;
}
.screen__card-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.screen__card-amt {
  font-size: 1.1rem;
  font-weight: 600;
}

.transfer-flow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}
.node-from, .node-to {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.node-from i, .node-to i {
  display: block;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #232b56 0%, #0c1136 100%);
  border: 1px solid rgba(10,186,181,0.45);
  box-shadow: 0 0 16px rgba(10,186,181,0.25);
}
.flow-svg { width: 100%; height: 50px; }
.transfer-amt {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.transfer-btn {
  margin-top: 10px;
  padding: 14px 0;
  width: 100%;
  border-radius: 14px;
  background: linear-gradient(180deg, #1de7e2, var(--accent));
  color: #042423;
  font-weight: 600;
  font-size: 0.9rem;
  border: 0;
  box-shadow: 0 14px 30px -10px rgba(10,186,181,0.7);
}

.analytics-ring {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 6px auto;
}
.analytics-ring svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 14px rgba(10,186,181,0.45));
}
.analytics-ring__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.analytics-ring__center b {
  font-size: 1.6rem;
  font-weight: 700;
}
.cat {
  display: grid;
  gap: 8px;
}
.cat li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  font-size: 0.78rem;
  align-items: center;
  color: var(--text-secondary);
}
.cat .dt { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 4px; }
.cat .dt.c2 { background: var(--accent-soft); }
.cat .dt.c3 { background: #5f6eff; }
.cat em { font-style: normal; color: var(--text-main); font-weight: 600; }

.ai-card {
  background: linear-gradient(180deg, rgba(10,186,181,0.14), rgba(10,186,181,0.02));
  border: 1px solid rgba(10,186,181,0.35);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.ai-card__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.ai-card__head i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: dotPulse 1.6s infinite;
}
.ai-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-main);
}
.ai-card__btns { display: flex; gap: 8px; }
.sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sec-grid > div {
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
}
.sec-grid b { font-size: 0.85rem; font-weight: 600; }

.phone-3d__shadow {
  position: absolute;
  inset: auto 10% -40px 10%;
  height: 80px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10,186,181,0.45) 0%, transparent 70%);
  filter: blur(20px);
  z-index: -1;
}
.phone-3d__halo {
  position: absolute;
  inset: -15%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10,186,181,0.35) 0%, transparent 70%);
  filter: blur(60px);
  z-index: -2;
  opacity: 0.7;
}

@media (max-width: 960px) {
  .mobile .scene-stage { grid-template-columns: 1fr; }
  .phone-3d { transform: rotateY(0) rotateX(0) rotateZ(0); }
}

/* ============================================================================
   SCENE 5 — UNDER THE HOOD: lifecycle pipeline + 3D BANK VAULT centerpiece
   KYC → POS → AML → Core → VAULT (opens) → Operator (2 clicks)
   ============================================================================ */
.flow .scene-stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 56px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.flow-text {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.flow-text h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.01em;
  line-height: 1.12;
}
.flow-text p {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
}

/* Pipeline grid: 4 small steps → arrow → vault → arrow → operator */
.flow-pipeline {
  display: grid;
  gap: 36px;
  position: relative;
}

/* Top row of 4 small step nodes */
.flow-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
.flow-track::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(125, 255, 255, 0.28) 20%,
    rgba(125, 255, 255, 0.28) 80%,
    transparent);
  z-index: 0;
}
.flow-node {
  position: relative;
  padding: 22px 18px 20px;
  background: linear-gradient(160deg, rgba(15, 18, 50, 0.78) 0%, rgba(11, 15, 47, 0.6) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: center;
  transition: transform 0.4s var(--ease), border-color 0.4s;
  z-index: 1;
  backdrop-filter: blur(10px);
}
.flow-node:hover {
  transform: translateY(-5px);
  border-color: rgba(125, 255, 255, 0.32);
  box-shadow: 0 20px 40px -20px rgba(10, 186, 181, 0.35);
}
.flow-node__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10, 186, 181, 0.2), rgba(10, 186, 181, 0.04));
  border: 1px solid rgba(125, 255, 255, 0.2);
  display: grid;
  place-items: center;
  color: var(--accent-soft);
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
.flow-node__num {
  font-family: "Sora", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-top: 4px;
}
.flow-node h4 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-main);
}
.flow-node p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.4;
}

/* POS terminal mini-illustration */
.flow-node__icon--pos {
  width: 80px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0a1028 0%, #060828 100%);
  border-color: rgba(125, 255, 255, 0.22);
  display: block;
  position: relative;
  overflow: hidden;
}
.pos-screen {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 64px;
  padding: 4px 6px 3px;
  background: rgba(125, 255, 255, 0.1);
  border-radius: 4px;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: var(--accent-soft);
  text-align: center;
  line-height: 1.1;
  border: 1px solid rgba(125, 255, 255, 0.25);
}
.pos-screen i {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 7px;
  color: rgba(125, 255, 255, 0.55);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 1px;
}
.pos-card {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  width: 46px;
  height: 28px;
  background: linear-gradient(135deg, #2a334e 0%, #0a1028 100%);
  border: 1px solid rgba(125, 255, 255, 0.3);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 14px rgba(125, 255, 255, 0.18);
  animation: posCardBob 2.2s ease-in-out infinite;
}
.pos-card::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 9px;
  height: 6px;
  background: linear-gradient(135deg, #ffd87a 0%, #c89538 100%);
  border-radius: 1px;
}
@keyframes posCardBob {
  0%, 100% { transform: translateX(-50%) rotate(-12deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(-9deg) translateY(-3px); }
}
.pos-spark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 78%, rgba(125, 255, 255, 0.45) 0%, transparent 55%);
  opacity: 0;
  animation: posSpark 2.2s ease-in-out infinite;
}
@keyframes posSpark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 0.9; transform: scale(1.15); }
}

/* Mini server rack */
.flow-node__icon--server {
  background: transparent;
  border: none;
  padding: 0;
}
.rack {
  width: 64px;
  height: 64px;
  background: linear-gradient(180deg, #0a1028, #060828);
  border: 1px solid rgba(125, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px 6px;
  display: grid;
  gap: 5px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}
.rack span {
  height: 9px;
  background: linear-gradient(90deg, #1a223e, #2a334e);
  border-radius: 2px;
  position: relative;
}
.rack span::before, .rack span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
  transform: translateY(-50%);
  box-shadow: 0 0 6px var(--accent-soft);
  animation: rackBlink 1.6s ease-in-out infinite;
}
.rack span::before { left: 5px; }
.rack span::after  { right: 5px; animation-delay: 0.4s; }
.rack span:nth-child(2)::before { animation-delay: 0.2s; }
.rack span:nth-child(3)::before { animation-delay: 0.6s; }
.rack span:nth-child(4)::before { animation-delay: 0.9s; }
@keyframes rackBlink {
  0%, 70%, 100% { opacity: 0.25; }
  30%           { opacity: 1; }
}

/* Glowing data stream connector (vertical flow between groups) */
.flow-stream {
  position: relative;
  width: 2px;
  height: 60px;
  margin: 0 auto;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(125, 255, 255, 0.5) 20%,
    rgba(125, 255, 255, 0.5) 80%,
    transparent 100%);
}
.flow-stream i {
  position: absolute;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 12px var(--accent-soft), 0 0 24px rgba(125, 255, 255, 0.4);
  animation: streamDown 1.6s linear infinite;
}
.flow-stream i:nth-child(1) { animation-delay: 0s; }
.flow-stream i:nth-child(2) { animation-delay: 0.32s; }
.flow-stream i:nth-child(3) { animation-delay: 0.64s; }
.flow-stream i:nth-child(4) { animation-delay: 0.96s; }
.flow-stream i:nth-child(5) { animation-delay: 1.28s; }
@keyframes streamDown {
  0%   { top: -10px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 70px; opacity: 0; }
}

/* ============================================================================
   THE 3D BANK VAULT — cinematic pinned scroll-through experience.
   As the user scrolls, GSAP scrubs through the timeline:
     1) lever rotates 360° + handle spins
     2) heavy door swings open on its left hinges
     3) the camera flies INSIDE the vault — vault scales 3.5x, surrounding
        cells fade away, and the interior shelves fill the whole screen.
   ============================================================================ */

/* The pinned cinema container — long scroll length for buttery pacing. */
.vault-cinema {
  position: relative;
  width: 100%;
  height: 380vh;                /* longer track → silkier scrub + dark hold */
  margin: 0;
  background: #000005;
}
.vault-cinema__pin {
  position: sticky;
  top: 0;
  /* Slightly TALLER than viewport so even at peak scaling there is no chance
     of seeing the next section bleed in at the bottom edge. */
  height: 102vh;
  margin: -1vh 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  padding: 0;
  perspective: 2400px;
  transform-style: preserve-3d;
  overflow: hidden;
  background: #000005;
}
/* ============================================================================
   PREMIUM VAULT — fully custom hand-drawn SVG vault with a real 3D door
   swing driven by CSS perspective + JS scroll. No external 3D models, no
   iframes — every pixel is intentional.

   Anatomy:
     .vault             — outer wrapper, sized into the cinema pin
     .vault__cam        — 3D perspective rig (camera fly-in via translateZ)
     .vault__stage      — the actual scene (preserve-3d)
     .vault__wall       — SVG of the wall + doorway opening + rivets + hinge
     .vault__door-wrap  — 3D-rotated wrapper around the door (left-edge hinge)
     .vault__door       — SVG of the door (concentric rings, dial, wheel)
     .vault__interior   — Tiffany light revealed inside the doorway
   ============================================================================ */
.vault {
  position: relative;
  width: min(94vmin, 1100px);
  aspect-ratio: 1 / 1;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vault__cam {
  position: absolute;
  inset: 0;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.vault__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.vault__wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7));
}
.vault__door-wrap {
  position: absolute;
  /* The door matches the inner doorway radius. Wall opening is r=280
     of viewBox 800 → 70% diameter. Smaller than before so the "void"
     when door opens is less dominant; the new 3D interior fills it. */
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  transform-style: preserve-3d;
  /* Rotate around the LEFT edge so it swings open like a real vault. */
  transform-origin: 0% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.vault__door {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.85))
    drop-shadow(2px 0 4px rgba(0, 0, 0, 0.5));
  backface-visibility: hidden;
}
.vault__wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   INTERIOR — a real CSS-3D vault chamber visible THROUGH the doorway.
   Anatomy: a 700×700 cube with five visible faces (floor, ceiling,
   left wall, right wall, back wall). Side walls hold a grid of safety-
   deposit-box doors. The back wall holds a tiny "echo" vault door + a
   warm Tiffany ceiling light. The whole chamber sits behind the door
   (translateZ -RD) so when the camera dives in (.vault__stage), it
   really feels like flying inside.
   --------------------------------------------------------------------------- */
.vault__interior {
  position: absolute;
  /* Smaller doorway: matches the wall opening at r=280 / 400 = 70% */
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-radius: 50%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  transform-style: preserve-3d;
  /* Soft ambient backdrop so the doorway is never "void black". */
  background:
    radial-gradient(circle at 50% 56%,
      #0d2825 0%,
      #08171a 45%,
      #04090c 80%);
  /* Dim by default; opacity is driven up by JS as the door swings open. */
  opacity: 0.55;
  transition: opacity 220ms linear;
}

/* The 3D chamber. Centred inside the round doorway clip. Fixed pixel
   size so translateZ values stay meaningful regardless of viewport. */
.vault__room {
  --rd: 350px;                   /* half-side of the chamber cube */
  position: absolute;
  width: calc(var(--rd) * 2);
  height: calc(var(--rd) * 2);
  left: 50%; top: 50%;
  margin-left: calc(var(--rd) * -1);
  margin-top:  calc(var(--rd) * -1);
  transform-style: preserve-3d;
  /* Push the whole room back a bit so the back wall is "deep". */
  transform: translateZ(calc(var(--rd) * -1));
}
.vault__room > * {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

/* Back wall — the deepest face. Holds a mini "echo" vault + spotlight. */
.vault__room-back {
  background:
    radial-gradient(circle at 50% 38%,
      rgba(125, 249, 255, 0.55) 0%,
      rgba(10, 186, 181, 0.20) 14%,
      rgba(8, 26, 28, 0.95) 36%,
      #051113 75%);
  transform: translateZ(calc(var(--rd) * -1));
}
.vault__room-back::before {
  /* Tiny circular vault door inset on back wall — visual echo */
  content: "";
  position: absolute;
  width: 36%; height: 36%;
  left: 32%; top: 38%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%,
      #6a7588 0%,
      #2a313e 38%,
      #0b1014 75%);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.55),
    inset 0 0 0 8px rgba(125,249,255,0.12),
    0 0 36px rgba(10, 186, 181, 0.35);
}
.vault__room-back::after {
  /* Tiffany core in the centre of the echo vault */
  content: "";
  position: absolute;
  width: 8%; height: 8%;
  left: 46%; top: 52%;
  border-radius: 50%;
  background: radial-gradient(circle, #b8eee9 0%, #0ABAB5 60%, transparent 100%);
  box-shadow: 0 0 30px rgba(125, 249, 255, 0.85);
}

/* Floor — perspective grid receding to vanishing point. */
.vault__room-floor {
  background:
    /* faint Tiffany glow leaking from far end */
    linear-gradient(to top, #04090c 0%, rgba(10,186,181,0.10) 100%),
    /* tile lines crosswise */
    repeating-linear-gradient(to top,
      transparent 0px, transparent 38px,
      rgba(125,249,255,0.10) 38px, rgba(125,249,255,0.10) 39px),
    /* tile lines lengthwise */
    repeating-linear-gradient(to right,
      transparent 0px, transparent 60px,
      rgba(125,249,255,0.06) 60px, rgba(125,249,255,0.06) 61px);
  background-color: #07181a;
  background-blend-mode: normal, screen, screen;
  transform: rotateX(90deg) translateZ(calc(var(--rd) * -1));
  transform-origin: 50% 100%;
}

/* Ceiling — slim band of warm light at the far end. */
.vault__room-ceiling {
  background:
    radial-gradient(ellipse 70% 30% at 50% 100%,
      rgba(125, 249, 255, 0.30) 0%,
      rgba(10, 186, 181, 0.08) 40%,
      transparent 70%),
    #07181a;
  transform: rotateX(-90deg) translateZ(calc(var(--rd) * -1));
  transform-origin: 50% 0%;
}

/* Side walls — each holds a grid of small safety-deposit-box doors,
   drawn entirely via stacked CSS gradients. Cheap, sharp, and identical
   on every device. */
.vault__room-left,
.vault__room-right {
  background:
    /* Tiffany rim along the back edge */
    linear-gradient(to right,
      #04090c 0%, #04090c 70%, rgba(10,186,181,0.18) 100%),
    /* Per-box centre handle (small Tiffany dot) */
    radial-gradient(circle 4px at 24px 24px, #0ABAB5 0%, #0ABAB5 60%, transparent 70%),
    /* Box vertical grout */
    repeating-linear-gradient(to right,
      #1d2a2c 0px, #1d2a2c 47px,
      #050b0c 47px, #050b0c 48px),
    /* Box horizontal grout */
    repeating-linear-gradient(to bottom,
      #1d2a2c 0px, #1d2a2c 47px,
      #050b0c 47px, #050b0c 48px);
  background-size: 100% 100%, 48px 48px, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
.vault__room-left {
  transform: rotateY(90deg) translateZ(calc(var(--rd) * -1));
  transform-origin: 0% 50%;
}
.vault__room-right {
  transform: rotateY(-90deg) translateZ(calc(var(--rd) * -1));
  transform-origin: 100% 50%;
}

/* Volumetric Tiffany rays leaking out of the doorway — sit OVER the
   chamber, behind the door (which gets z-stacked above by transform). */
.vault__interior-rays {
  position: absolute;
  inset: -10%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(125, 249, 255, 0.18) 6deg,
      transparent 14deg,
      transparent 30deg,
      rgba(125, 249, 255, 0.12) 36deg,
      transparent 44deg,
      transparent 90deg,
      rgba(125, 249, 255, 0.22) 96deg,
      transparent 104deg,
      transparent 180deg,
      rgba(125, 249, 255, 0.14) 186deg,
      transparent 194deg,
      transparent 270deg,
      rgba(125, 249, 255, 0.18) 276deg,
      transparent 284deg,
      transparent 360deg);
  mix-blend-mode: screen;
  opacity: 0;
  animation: vaultRaySpin 22s linear infinite;
  filter: blur(1px);
}
@keyframes vaultRaySpin { to { transform: rotate(360deg); } }

/* Strong radial vignette over the pin — keeps the centre of the vault
   visible while the edges fade to pure black so neither the previous nor
   the next section can ever leak in around the door. */
.vault-cinema__pin::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 7;
  background:
    radial-gradient(ellipse at 50% 50%,
      transparent 28%,
      rgba(0, 0, 5, 0.55) 55%,
      rgba(0, 0, 5, 0.92) 78%,
      #000005 100%);
}

/* Caption sits on the upper-left, fades out as we fly in */
.vault-cinema__caption {
  position: absolute;
  top: clamp(20px, 4vh, 44px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: min(640px, 88vw);
  display: grid;
  gap: 8px;
  justify-items: center;
  z-index: 6;
  pointer-events: none;
  will-change: opacity, transform;
}
.vault-cinema__caption h3 {
  font-size: clamp(20px, 2.2vw, 28px) !important;
  margin: 0 !important;
}
.vault-cinema__caption p {
  font-size: clamp(13px, 1.1vw, 15px) !important;
  margin: 0 !important;
  line-height: 1.5;
  max-width: 540px;
}
.vault-cinema__caption h3::before { display: none; }
.vault-cinema__caption .vault-tags { justify-content: center; }
.vault-cinema__caption .flow-node__num {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
}
.vault-cinema__caption h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.vault-cinema__caption h3::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 7px;
}
.vault-cinema__caption p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.vault-cinema__hint {
  position: absolute;
  bottom: clamp(28px, 6vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(125, 255, 255, 0.22);
  color: var(--accent-soft);
  font-family: "Sora", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
  animation: vaultHintBob 2.4s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes vaultHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ☀️ GOD-RAYS — volumetric light pouring out of the opened vault door.
   Hidden initially; GSAP scales + fades it in during the fly-in phase. */
.vault-cinema__rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vmin;
  height: 120vmin;
  margin: -60vmin 0 0 -60vmin;
  transform: scale(0.35);
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  filter: blur(2px);
  will-change: transform, opacity;
}
.vault-cinema__rays::before,
.vault-cinema__rays::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Soft, eye-friendly core glow — no over-exposed centre, just a calm
   Tiffany-tinted lamp deep inside the vault. Was using pure white at 95%,
   now muted teal at 38% peak. */
.vault-cinema__rays::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(180, 240, 235, 0.38) 0%,
      rgba(125, 230, 225, 0.28) 14%,
      rgba(10, 186, 181, 0.18) 32%,
      rgba(10, 186, 181, 0.06) 55%,
      transparent 78%);
}
/* Spinning conic god-rays — much dimmer (peak ~22% vs 55%) so they read
   as soft volumetric light, never as a flare. */
.vault-cinema__rays::after {
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(125, 230, 225, 0.18) 0deg,
      transparent 10deg,
      rgba(180, 240, 235, 0.22) 24deg,
      transparent 36deg,
      rgba(125, 230, 225, 0.14) 60deg,
      transparent 72deg,
      rgba(180, 240, 235, 0.20) 105deg,
      transparent 118deg,
      rgba(125, 230, 225, 0.16) 148deg,
      transparent 162deg,
      rgba(180, 240, 235, 0.22) 195deg,
      transparent 210deg,
      rgba(125, 230, 225, 0.14) 238deg,
      transparent 252deg,
      rgba(180, 240, 235, 0.20) 285deg,
      transparent 300deg,
      rgba(125, 230, 225, 0.16) 330deg,
      transparent 350deg,
      rgba(180, 240, 235, 0.20) 360deg);
  animation: rayDrift 14s linear infinite;
  mask-image: radial-gradient(circle at 50% 50%,
    black 8%, black 42%, transparent 72%);
}
@keyframes rayDrift {
  to { transform: rotate(360deg); }
}

/* 💥 White-flash — full-screen overexposure at peak of the dive.
   Driven by GSAP, pure opacity + scale tween. */
.vault-cinema__flash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 255, 255, 1) 0%,
      rgba(220, 252, 251, 0.95) 25%,
      rgba(125, 255, 255, 0.5) 55%,
      rgba(10, 186, 181, 0.0) 85%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  will-change: opacity;
  mix-blend-mode: screen;
}

/* BLACKOUT — solid #000005 over the entire pin. Driven from JS at the very
   end of the vault open / start + end of vault close timelines so the pin
   always releases on a fully dark frame, blending seamlessly into the
   next section without any visible "frame" or horizon line. */
.vault-cinema__blackout {
  position: absolute;
  inset: -2px;             /* tiny outset removes any sub-pixel edge */
  background: #000005;
  opacity: 0;
  pointer-events: none;
  z-index: 8;              /* above flash + rays + door */
  will-change: opacity;
}

/* 🚪 INSIDE — the operator workspace that emerges from the light at the
   very end of the cinema. We've "entered" the vault and arrived at work. */
.vault-cinema__inside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: min(720px, 86vw);
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(11, 15, 47, 0.85), rgba(8, 12, 36, 0.92));
  border: 1px solid rgba(125, 255, 255, 0.22);
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(10, 186, 181, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  backdrop-filter: blur(12px);
  will-change: opacity, transform;
}
.vault-cinema__inside-eyebrow {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-soft);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 14px rgba(125, 255, 255, 0.5);
}
.vault-cinema__inside-window {
  background: rgba(11, 15, 47, 0.88);
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.vault-cinema__inside-cta {
  margin: 0;
  text-align: center;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.vault-tags {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vault-tags li {
  padding: 6px 12px;
  background: rgba(10, 186, 181, 0.08);
  border: 1px solid rgba(125, 255, 255, 0.22);
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-soft);
}

/* ============================================================================
   THE 3D BANK SAFE-DEPOSIT WALL
   A 5×5 grid of metal cells. The CENTER 3×3 cell is the main one — it has a
   hinged door that swings open on left hinges, the lever rotates, and the
   interior reveals shelves with deposits, bonuses, cashback, referrals.
   ============================================================================ */
/* The whole vault — fills the pin, contains both wall + circular door */
.vault {
  position: relative;
  width: 100%;
  height: 100%;
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  transform-style: preserve-3d;
  perspective: 2400px;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

/* THE WALL — concrete + steel chamber wall, full bleed.
   Made from layered radial + linear + repeating gradients to look like
   reinforced steel plates with brushed texture. */
.vault__wall {
  position: absolute;
  inset: 0;
  background:
    /* center vignette to focus eye on door */
    radial-gradient(ellipse at 50% 50%,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 70%,
      rgba(0, 0, 0, 0.85) 100%),
    /* large steel plate seam — vertical lines */
    repeating-linear-gradient(90deg,
      transparent 0 calc(33.33% - 1px),
      rgba(0, 0, 0, 0.55) calc(33.33% - 1px) 33.33%,
      transparent 33.33% calc(66.66% - 1px),
      rgba(0, 0, 0, 0.55) calc(66.66% - 1px) 66.66%),
    /* brushed-steel diagonal texture */
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 4px),
    /* base steel-blue gradient */
    linear-gradient(180deg,
      #1f2849 0%,
      #14193a 30%,
      #0a0e2a 65%,
      #050720 100%);
  box-shadow:
    inset 0 0 160px rgba(0, 0, 0, 0.9),
    inset 0 6px 0 rgba(255, 255, 255, 0.04),
    inset 0 -6px 0 rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* Top edge highlight + floor shadow on the wall */
.vault__wall::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 12%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 100%);
  pointer-events: none;
}
.vault__wall::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* Industrial bolts on the wall corners */
.vault__bolt {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  transform: translate(-50%, -50%);
  width: clamp(14px, 1.5vw, 22px);
  height: clamp(14px, 1.5vw, 22px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      #7a8aab 0%, #3a4566 45%, #0a0e2a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.6);
}
.vault__bolt::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Stencil markings on the wall */
.vault__stencil {
  position: absolute;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.32em;
  color: rgba(125, 255, 255, 0.18);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.vault__stencil--left  { left: 4%;  bottom: 6%; }
.vault__stencil--right { right: 4%; top: 6%; }

/* THE MAIN — recessed circular cavity in the wall, holds the door + interior.
   Centered so the camera dives straight into the door. */
.vault__main {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Massively bigger door — full focus on the centre per the brief. */
  width: min(82vmin, 760px);
  height: min(82vmin, 760px);
  transform: translate(-50%, -50%) translateZ(0);
  border-radius: 50%;
  transform-style: preserve-3d;
  perspective: 1800px;
  will-change: transform;
  /* Recessed shadow — gives the impression the door is set INTO the wall */
  box-shadow:
    /* dark cavity behind the door (visible at edges) */
    0 0 0 6px #050720,
    /* outer shadow on the wall */
    0 0 80px 8px rgba(0, 0, 0, 0.85),
    /* ambient cyan glow when door opens */
    0 0 160px rgba(10, 186, 181, 0.0);
  transition: box-shadow 1.2s ease;
}

/* Outer steel collar embedded in the wall, framing the door */
.vault__collar {
  position: absolute;
  inset: -3.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%,
      #5a6a90 0%, #3a4566 35%, #14193a 70%, #050720 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.07),
    inset 0 0 30px rgba(0, 0, 0, 0.6),
    0 8px 32px rgba(0, 0, 0, 0.7);
  z-index: 0;
}
.vault__collar::before,
.vault__collar::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.vault__collar::after {
  inset: 8%;
  border-color: rgba(0, 0, 0, 0.5);
}

/* Interior — the dark circular "room" behind the door, only visible when
   the door swings open. Sits BEHIND the door (z-index 1) so depth is right. */
.vault__interior {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0a1640 0%, #03051c 70%, #01020e 100%);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.95),
    inset 0 0 0 4px #131838,
    inset 0 0 0 2px rgba(255, 255, 255, 0.04);
  transform: translateZ(-30px);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 1;
}
.vault__interior-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(125, 255, 255, 0.28) 0%,
      rgba(10, 186, 181, 0.1) 35%,
      transparent 70%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
@keyframes vaultGlowPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

.vault__shelves {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 26px 22px;
  width: 100%;
  height: 100%;
  align-content: center;
  z-index: 2;
}
.vault__shelf {
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 9px 12px;
  background:
    linear-gradient(135deg, rgba(10, 186, 181, 0.2), rgba(10, 186, 181, 0.04));
  border: 1px solid rgba(125, 255, 255, 0.32);
  border-radius: 8px;
  color: var(--text-main);
  opacity: 0;
  transform: translateZ(-30px) scale(0.6) rotateX(20deg);
  box-shadow: 0 0 24px rgba(10, 186, 181, 0.18);
  min-width: 0;
  will-change: opacity, transform;
}
.vault__shelf b {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--accent-soft);
  white-space: nowrap;
}
.vault__shelf em {
  display: block;
  font-style: normal;
  font-family: "Sora", sans-serif;
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 2px;
}
.vault__shelf--gold {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(255, 200, 100, 0.2), rgba(255, 200, 100, 0.05));
  border-color: rgba(255, 220, 130, 0.42);
}
.vault__shelf--gold b { color: #ffd87a; }

/* THE CIRCULAR DOOR — heavy steel disc, hinged on the LEFT.
   Pivots open from the right edge; transform driven by GSAP scrub timeline. */
.vault__door {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: 0% 50%;
  transform: rotateY(0deg);
  background:
    /* highlight glow at top-left */
    radial-gradient(circle at 30% 28%,
      rgba(160, 180, 220, 0.45) 0%,
      transparent 35%),
    /* dark falloff at bottom-right */
    radial-gradient(circle at 75% 80%,
      rgba(0, 0, 0, 0.6) 0%,
      transparent 50%),
    /* base brushed-steel gradient */
    radial-gradient(circle at 50% 50%,
      #5a6589 0%,
      #3a4570 25%,
      #2a334e 55%,
      #1a2238 80%,
      #0a1028 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.08),
    inset 0 0 0 8px #0a0e2a,
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    inset 16px 0 32px rgba(0, 0, 0, 0.5),
    inset -4px -4px 14px rgba(0, 0, 0, 0.45),
    0 18px 60px rgba(0, 0, 0, 0.8);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  z-index: 3;
}
/* Subtle brushed-metal sheen (single conic gradient, no repeats — cheap) */
.vault__door::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.18) 60deg,
    rgba(255, 255, 255, 0.04) 110deg,
    transparent 160deg,
    transparent 360deg);
  pointer-events: none;
  opacity: 0.7;
}
/* Inner depth ring */
.vault__door::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Ring of rivets around the perimeter — positioned via polar coords on the
   transform: 16 rivets at r=44% from center using individual angle vars. */
.vault__rivet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(14px, 1.6vw, 22px);
  height: clamp(14px, 1.6vw, 22px);
  margin: calc(clamp(14px, 1.6vw, 22px) / -2) 0 0 calc(clamp(14px, 1.6vw, 22px) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      #aab6d8 0%, #5a6589 40%, #1a2238 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  /* Rotate by --ang then push outward to ~44% of the door radius */
  transform: rotate(var(--ang)) translateY(calc(-1 * min(25vmin, 235px)));
  pointer-events: none;
}
.vault__rivet::before {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}

/* Number plate — riveted to the top arc of the door */
.vault__plate {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 2px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(125, 255, 255, 0.28);
  border-radius: 4px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 18px rgba(125, 255, 255, 0.18);
  z-index: 4;
}

/* Number plate at the TOP of the door — "A · БАНК / VAULT 001" */
.vault__plate {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(125, 255, 255, 0.22);
  border-radius: 4px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 12px rgba(125, 255, 255, 0.1);
  z-index: 2;
}
.vault__plate em {
  font-family: "Sora", sans-serif;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.42em;
  color: rgba(125, 255, 255, 0.6);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(125, 255, 255, 0.3);
}
.vault__plate b {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent-soft);
  text-shadow: 0 0 8px rgba(125, 255, 255, 0.45);
}

/* ============================================================================
   THE COMBINATION LOCK — massive spoked wheel in the center of the door
   (handle = the whole 4-spoke wheel; lever = wrapper that GSAP rotates).
   Built so existing GSAP code that targets .vault__handle / .vault__lever
   keeps working — both rotate together as the wheel.
   ============================================================================ */
.vault__lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 28vmin, 280px);
  height: clamp(180px, 28vmin, 280px);
  z-index: 5;
}
/* Outer numbered DIAL — slowly rotates while wheel spins */
.vault__dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #14193a 0%, #0a0e2a 70%, #131838 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 0 0 4px #050720,
    inset 0 0 18px rgba(0, 0, 0, 0.6);
}
.vault__dial span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(9px, 1.1vmin, 12px);
  color: rgba(180, 200, 230, 0.65);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  transform: rotate(var(--ang)) translateY(calc(-1 * clamp(80px, 12vmin, 124px)));
  letter-spacing: 0.05em;
}
/* Subtle inner ring as visual depth (replaces expensive tick marks) */
.vault__dial::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5);
}

/* THE WHEEL (== handle in JS) — 4 spokes + central hub, rotates as a whole */
.vault__handle,
.vault__wheel {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 38% 32%,
      #d8dff0 0%,
      #98a8c8 22%,
      #5a6589 50%,
      #2a334e 78%,
      #131838 100%);
  box-shadow:
    inset -3px -4px 10px rgba(0, 0, 0, 0.55),
    inset 3px 4px 10px rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.65);
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 2;
}

/* Decorative inner ring on the wheel */
.vault__handle::before,
.vault__wheel::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      #2a334e 0%,
      #131838 60%,
      #06092a 100%);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Spokes on the wheel — 4 thick steel bars */
.vault__spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(120px, 22vmin, 200px);
  height: clamp(14px, 2vmin, 20px);
  margin: calc(-1 * clamp(7px, 1vmin, 10px)) calc(-1 * clamp(60px, 11vmin, 100px));
  border-radius: 6px;
  background:
    linear-gradient(180deg,
      #d8dff0 0%,
      #98a8c8 35%,
      #5a6589 65%,
      #1a2238 100%);
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.55);
  transform: rotate(var(--ang));
  transform-origin: 50% 50%;
  z-index: 3;
}
/* Knob at the end of each spoke */
.vault__spoke::before,
.vault__spoke::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(20px, 2.6vmin, 30px);
  height: clamp(20px, 2.6vmin, 30px);
  margin-top: calc(-1 * clamp(10px, 1.3vmin, 15px));
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #e4e9f5 0%, #98a8c8 40%, #3a4566 80%, #131838 100%);
  box-shadow:
    inset -1px -2px 3px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.6);
}
.vault__spoke::before { left: -8%; }
.vault__spoke::after  { right: -8%; }

/* Central HUB — chrome cap with cyan glow indicator */
.vault__hub {
  position: absolute;
  width: clamp(36px, 5vmin, 60px);
  height: clamp(36px, 5vmin, 60px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #e4e9f5 0%,
      #98a8c8 30%,
      #4a5475 65%,
      #131838 100%);
  box-shadow:
    inset -2px -3px 6px rgba(0, 0, 0, 0.55),
    inset 2px 3px 6px rgba(255, 255, 255, 0.3),
    0 0 22px rgba(125, 255, 255, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.6);
  z-index: 4;
}
.vault__hub::before {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #cbf6f4 0%, #0abab5 50%, #02575b 95%);
  box-shadow:
    inset -1px -1px 2px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(125, 255, 255, 0.85);
  animation: vaultHubBreathe 3s ease-in-out infinite;
}
@keyframes vaultHubBreathe {
  0%, 100% { box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.4), 0 0 12px rgba(125, 255, 255, 0.6); }
  50%      { box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.4), 0 0 28px rgba(125, 255, 255, 1); }
}

/* Top status indicator (red triangle marker that points to current dial position) */
.vault__indicator {
  position: absolute;
  left: 50%;
  top: -2%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #ff3b5c;
  filter: drop-shadow(0 0 6px rgba(255, 70, 100, 0.7));
  z-index: 5;
}

/* LEVER — kept as JS-rotation target. It's the OUTER dial/spoke wrapper that
   rotates when the user "unlocks" the safe. Empty by itself, used by GSAP. */
.vault__lever {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* KEYHOLE — small slot below the lock (kept for visual richness) */
.vault__keyhole {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(20px, 2vmin, 28px);
  height: clamp(28px, 2.8vmin, 38px);
  border-radius: 5px 5px 50% 50%;
  background: radial-gradient(circle at 50% 30%, #02041a 0%, #131838 80%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  z-index: 4;
}
.vault__keyhole i {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: #02041a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7);
  transform: translateX(-50%);
}
.vault__keyhole em {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 14%;
  height: 50%;
  background: #02041a;
  border-radius: 1px;
  transform: translateX(-50%);
}

/* HINGES — three big steel cylinders on the LEFT edge of the circular door */
.vault__hinges {
  position: absolute;
  left: -2.5%;
  top: 12%;
  bottom: 12%;
  width: clamp(14px, 1.8vmin, 22px);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6%;
  z-index: 4;
  pointer-events: none;
}
.vault__hinges span {
  position: relative;
  width: 100%;
  border-radius: 4px;
  background:
    linear-gradient(90deg,
      #0a0e2a 0%,
      #5a6589 30%,
      #c8d2e8 50%,
      #5a6589 70%,
      #0a0e2a 100%);
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.6);
}
.vault__hinges span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e4e9f5 0%, #4a5475 60%, #131838 100%);
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.55),
    0 0 4px rgba(0, 0, 0, 0.4);
}

/* Outer brushed-metal seam ring just outside the lock */
.vault__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 1;
}
.vault__ring::before,
.vault__ring::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.vault__ring::after {
  inset: -8%;
  border-color: rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   OPERATOR (final step) — minimal app window with auto-cursor and 2-click
   ============================================================================ */
.flow-final {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 0.85fr);
  gap: 50px;
  align-items: center;
  margin-top: 10px;
}
/* "Landed" hand-off — appears right after the cinema's emerge so the user
   feels they've arrived inside the work. Centered, glowing, no op-window
   (cinema already showed it). */
.flow-final--landed {
  grid-template-columns: 1fr;
  margin-top: 40px;
  padding: 64px 24px 32px;
  text-align: center;
  position: relative;
}
.flow-final--landed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80vw);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(125, 255, 255, 0.55) 50%,
    transparent 100%);
}
.flow-final--landed::after {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 92vw);
  height: 320px;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(125, 255, 255, 0.22) 0%,
    rgba(10, 186, 181, 0.10) 35%,
    transparent 70%);
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
}
.op-text--landed {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.op-text--landed h3 {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(180deg, #fff 30%, #c9f5f3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.op-text--landed p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
}
.op-window {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(15, 18, 50, 0.78) 0%, rgba(11, 15, 47, 0.65) 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.op-window__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.op-window__bar > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.op-window__bar > span:nth-child(2) { background: rgba(255, 200, 100, 0.6); }
.op-window__bar > span:nth-child(3) { background: rgba(10, 186, 181, 0.7); }
.op-window__bar em {
  margin-left: auto;
  font-style: normal;
  font-family: "Sora", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}
.op-window__body {
  padding: 18px 22px 22px;
  display: grid;
  gap: 8px;
}
.op-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 8px;
  font-size: 13px;
}
.op-row b {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.op-row i {
  font-style: normal;
  color: var(--text-main);
  font-family: "Sora", sans-serif;
  font-weight: 500;
}
.op-row i.ok  { color: var(--accent-soft); font-weight: 600; }
.op-row i.num { color: var(--accent-soft); font-weight: 700; }
.op-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.op-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.op-btn:hover {
  border-color: rgba(125, 255, 255, 0.32);
  transform: translateY(-1px);
}
.op-btn--primary {
  background: linear-gradient(135deg, #0abab5 0%, #07918d 100%);
  color: #02211e;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(10, 186, 181, 0.32);
  position: relative;
  overflow: hidden;
}
.op-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.4), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s;
}
.op-btn--primary:hover::after { opacity: 1; }

.op-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 20px;
  background: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  clip-path: polygon(0 0, 0 76%, 28% 56%, 50% 100%, 70% 92%, 48% 48%, 80% 48%);
  pointer-events: none;
  animation: opCursorMove 5.2s ease-in-out 1s infinite;
  z-index: 5;
  opacity: 0;
}
@keyframes opCursorMove {
  0%   { transform: translate(70px, 60px); opacity: 0; }
  10%  { opacity: 1; }
  35%  { transform: translate(80px, 130px); opacity: 1; }
  55%  { transform: translate(140px, 220px); opacity: 1; }
  72%  { transform: translate(140px, 220px); opacity: 1; }
  90%  { transform: translate(140px, 220px); opacity: 0.8; }
  100% { opacity: 0; }
}
.op-clicks {
  position: absolute;
  display: flex;
  gap: 5px;
  top: 230px;
  left: 130px;
  z-index: 6;
  pointer-events: none;
}
.op-clicks i {
  font-style: normal;
  font-size: 10px;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #02211e;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: opClick 5.2s ease-in-out 1s infinite;
}
.op-clicks i:nth-child(1) { animation-delay: 2.6s; }
.op-clicks i:nth-child(2) { animation-delay: 3.4s; }
@keyframes opClick {
  0%, 100%   { opacity: 0; transform: scale(0.4); }
  6%         { opacity: 1; transform: scale(1.5); }
  12%        { transform: scale(1); }
  60%        { opacity: 0.9; }
}
.op-text {
  display: grid;
  gap: 10px;
  align-content: center;
}
.op-text h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
}
.op-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

/* ============================================================================
   PERSONAS — three audiences benefit (employee / bank / owner)
   ============================================================================ */
.personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 20px;
  padding-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.persona {
  position: relative;
  padding: 26px 24px 28px;
  background: linear-gradient(160deg, rgba(15, 18, 50, 0.7), rgba(11, 15, 47, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
  overflow: hidden;
}
.persona::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(125, 255, 255, 0) 0%,
    rgba(125, 255, 255, 0) 60%,
    rgba(125, 255, 255, 0.18) 100%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.persona:hover {
  transform: translateY(-5px);
  border-color: rgba(125, 255, 255, 0.28);
  box-shadow: 0 24px 60px -28px rgba(10, 186, 181, 0.32);
}
.persona:hover::before { opacity: 1; }
.persona__num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.18);
}
.persona__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(10, 186, 181, 0.2), rgba(10, 186, 181, 0.05));
  border: 1px solid rgba(125, 255, 255, 0.22);
  display: grid;
  place-items: center;
  color: var(--accent-soft);
  margin-bottom: 4px;
}
.persona h5 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--text-main);
}
.persona p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.persona--bank .persona__icon {
  color: #ffd87a;
  background: linear-gradient(135deg, rgba(255, 200, 100, 0.18), rgba(255, 200, 100, 0.04));
  border-color: rgba(255, 220, 130, 0.26);
}
.persona--owner .persona__icon {
  color: #c5b6ff;
  background: linear-gradient(135deg, rgba(170, 140, 255, 0.18), rgba(170, 140, 255, 0.04));
  border-color: rgba(190, 170, 255, 0.26);
}

/* Responsive */
@media (max-width: 1100px) {
  .vault-cinema__caption { top: 24px; max-width: 92vw; }
  .vault-cinema__caption h3 { font-size: clamp(22px, 4vw, 28px); }
  .flow-final { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .vault-cinema { height: 240vh; }
  .vault__main { width: min(78vmin, 440px); height: min(78vmin, 440px); top: 56%; }
  .vault__rivet { transform: rotate(var(--ang)) translateY(-34vmin); }
  .vault__plate b { font-size: 11px; }
  .vault__plate em { font-size: 8px; }
  .vault__shelves { padding: 18px 14px; gap: 6px; }
  .vault__stencil { font-size: 9px; letter-spacing: 0.22em; }
  .vault-cinema__caption { padding: 0 18px; }
  .vault-cinema__caption h3 { font-size: 24px; }
  .vault-cinema__caption p { font-size: 14px; }
  .flow-track { grid-template-columns: repeat(2, 1fr); }
  .flow-track::before { display: none; }
  .personas { grid-template-columns: 1fr; }
}

/* ============================================================================
   SCENE 6 — ADMIN DASHBOARD
   ============================================================================ */
.admin .scene-stage {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 40px;
  align-content: center;
  max-width: var(--container);
  margin: 0 auto;
}
.admin-text {
  max-width: 760px;
  display: grid;
  gap: 8px;
  justify-self: start;
}

.dashboard-3d {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  perspective: 1800px;
  transform-style: preserve-3d;
  padding: 8px;
}
.kpi {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.kpi b {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.kpi .muted { color: var(--text-muted); font-size: 0.78rem; }
.kpi .chip {
  justify-self: start;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}
.kpi .chip--up {
  background: rgba(10,186,181,0.12);
  color: var(--accent);
  border: 1px solid rgba(10,186,181,0.3);
}
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.panel header b {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.92rem;
}
.panel--chart { grid-column: 1 / span 2; }
.panel--chart header { flex-wrap: wrap; row-gap: 4px; }
.panel--chart .legend {
  display: flex;
  gap: 12px;
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.panel--chart .lg {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.lg--a { background: var(--accent); }
.lg--b { background: var(--accent-soft); }
.big-chart {
  width: 100%;
  height: 220px;
}
.big-chart .grid line {
  stroke: rgba(255,255,255,0.05);
  stroke-dasharray: 2 4;
}
.chart-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.chart-line--a { animation: drawLine 2.4s var(--easing) 0.2s forwards; }
.chart-line--b { animation: drawLine 2.6s var(--easing) 0.4s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.panel--stream { grid-column: 3; grid-row: 2 / span 1; }
.stream {
  display: grid;
  gap: 8px;
  font-size: 0.72rem;
}
.stream li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--text-secondary);
  opacity: 0;
  animation: streamIn 0.6s var(--easing) forwards;
  white-space: nowrap;
}
.stream li > span:nth-of-type(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stream li:nth-child(1) { animation-delay: 0.1s; }
.stream li:nth-child(2) { animation-delay: 0.3s; }
.stream li:nth-child(3) { animation-delay: 0.5s; }
.stream li:nth-child(4) { animation-delay: 0.7s; }
.stream li:nth-child(5) { animation-delay: 0.9s; }
.stream li:nth-child(6) { animation-delay: 1.1s; }
.stream li i.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.stream em { font-style: normal; color: var(--accent); font-weight: 600; }
.stream em.warn { color: var(--warn); }
@keyframes streamIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.panel--nodes { grid-column: 1 / span 3; }
.nodes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.node-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.78rem;
}
.node-card b {
  grid-column: 1;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
}
.node-card .dot {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.node-card .dot--ok {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: dotPulse 2s infinite;
}
.node-card .muted {
  grid-column: 1 / span 2;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.data-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.data-lines .data-line {
  stroke-dasharray: 6 220;
  animation: dataFlow 4s linear infinite;
}
.data-lines .data-line:nth-child(2) { animation-delay: -1s; }
.data-lines .data-line:nth-child(3) { animation-delay: -2s; }
.data-lines .data-line:nth-child(4) { animation-delay: -3s; }
@keyframes dataFlow {
  to { stroke-dashoffset: -440; }
}

@media (max-width: 1100px) {
  .nodes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .panel--chart, .panel--nodes { grid-column: 1 / span 3; }
  .panel--stream { grid-column: 1 / span 3; grid-row: auto; }
  .nodes { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   SCENE 6 — ARCHITECTURE
   ============================================================================ */
.architecture .scene-stage {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 30px;
  align-content: center;
  text-align: center;
}
.architecture-text {
  max-width: 720px;
  margin: 0 auto;
}
.architecture-text .heading-l { text-align: center; }
.architecture-text .text-secondary { text-align: center; }

.network {
  position: relative;
  width: 100%;
  height: clamp(440px, 60vh, 640px);
  display: grid;
  place-items: center;
}
.network__svg {
  width: 100%;
  height: 100%;
  max-width: 1000px;
}
.network__svg .connection {
  stroke: url(#edge);
  stroke-width: 1.4;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0.6;
}
.network__svg .nodes-svg text {
  font-family: "Sora", sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: var(--accent-soft);
  font-weight: 600;
  pointer-events: none;
}
.network__svg .node circle:first-child {
  filter: drop-shadow(0 0 12px rgba(10,186,181,0.5));
}
.node--core circle:nth-child(2) {
  filter: drop-shadow(0 0 24px rgba(10,186,181,0.8));
}
.node-pulse {
  fill: var(--accent);
  opacity: 0;
}
.net-caption {
  position: absolute;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  white-space: nowrap;
  background: rgba(10, 14, 40, 0.5);
  border: 1px solid var(--line-strong);
  color: var(--text-secondary);
}
.net-caption--1 { top: 12%; left: 12%; }
.net-caption--2 { top: 22%; right: 14%; }
.net-caption--3 { bottom: 18%; left: 22%; }

@media (max-width: 760px) {
  .net-caption { display: none; }
}

/* ============================================================================
   SCENE 7 — BENEFITS / ADVANTAGES
   ============================================================================ */
.benefits .scene-stage {
  display: grid;
  gap: 56px;
  align-content: center;
  max-width: var(--container);
  margin: 0 auto;
}
.benefits__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  perspective: 1600px;
  transform-style: preserve-3d;
}
.benefit-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.benefit-card {
  position: relative;
  padding: 32px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(16px);
  transition:
    transform 0.5s var(--easing),
    border-color 0.5s var(--easing),
    box-shadow 0.5s var(--easing);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  gap: 14px;
  align-content: start;
}
.benefit-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(10,186,181,0.35), transparent 50%);
  opacity: 0;
  transition: opacity 0.5s var(--easing);
  pointer-events: none;
}
.benefit-card:hover,
.benefit-card:focus-visible {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(10,186,181,0.4);
  box-shadow: 0 30px 80px -20px rgba(10,186,181,0.4);
  outline: none;
}
.benefit-card:hover::before,
.benefit-card:focus-visible::before { opacity: 0.7; }
.benefit-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(10,186,181,0.16), rgba(10,186,181,0.04));
  border: 1px solid rgba(10,186,181,0.3);
  color: var(--accent);
}
.benefit-card h3 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  margin: 0;
}
.benefit-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.benefit-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.benefit-meta li {
  display: grid;
  gap: 2px;
}
.benefit-meta b {
  font-family: "Sora", sans-serif;
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.benefit-meta span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .benefit-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   SCENE 8 — FUTURE / ORBITAL SYSTEM
   ============================================================================ */
.future .scene-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.future-text { max-width: 520px; }
.future-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.future-tags li {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.orbit-system {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 580px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.orbit-system__core {
  position: relative;
  width: 130px;
  height: 170px;
  display: grid;
  place-items: center;
  color: var(--accent);
  z-index: 5;
  filter: drop-shadow(0 0 24px rgba(10,186,181,0.5));
}
.orbit-system__pulse {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,186,181,0.3) 0%, transparent 60%);
  animation: corePulse 3.4s var(--easing-soft) infinite;
}
@keyframes corePulse {
  0%, 100% { transform: scale(0.85); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.9; }
}
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(10,186,181,0.18);
  pointer-events: none;
}
.orbit-ring--1 { width: 56%; height: 56%; }
.orbit-ring--2 { width: 78%; height: 78%; border-color: rgba(125,249,255,0.15); }
.orbit-ring--3 { width: 96%; height: 96%; border-color: rgba(255,255,255,0.08); }

.orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.orbit-pos {
  position: absolute;
  display: inline-flex;
}
/* Anchor each item to a side; the wrapper handles centering offsets */
.orbit-pos--top    { top: 4%;    left: 50%;  transform: translateX(-50%); }
.orbit-pos--right  { top: 50%;   right: 2%;  transform: translateY(-50%); }
.orbit-pos--bottom { bottom: 4%; left: 50%;  transform: translateX(-50%); }
.orbit-pos--left   { top: 50%;   left: 2%;   transform: translateY(-50%); }
.orbit-pos--tr     { top: 14%;   right: 12%; }
.orbit-pos--bl     { bottom: 14%; left: 12%; }

.orbit-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: rgba(11, 15, 47, 0.7);
  border: 1px solid var(--line-strong);
  color: var(--text-main);
  font-size: 0.85rem;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px -10px rgba(10,186,181,0.35);
  pointer-events: auto;
  will-change: transform;
}
.orbit-item svg { color: var(--accent); flex-shrink: 0; }

.orbit--1 { animation: orbitSpin 24s linear infinite; }
.orbit--2 { animation: orbitSpin 30s linear infinite reverse; }
.orbit--3 { animation: orbitSpin 36s linear infinite; }
.orbit--4 { animation: orbitSpin 28s linear infinite reverse; }
.orbit--5 { animation: orbitSpin 40s linear infinite; }
.orbit--6 { animation: orbitSpin 34s linear infinite reverse; }

@keyframes orbitSpin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
/* Counter-rotate items so they remain readable while orbiting */
.orbit--1 .orbit-item { animation: orbitItem 24s linear infinite reverse; }
.orbit--2 .orbit-item { animation: orbitItem 30s linear infinite; }
.orbit--3 .orbit-item { animation: orbitItem 36s linear infinite reverse; }
.orbit--4 .orbit-item { animation: orbitItem 28s linear infinite; }
.orbit--5 .orbit-item { animation: orbitItem 40s linear infinite reverse; }
.orbit--6 .orbit-item { animation: orbitItem 34s linear infinite; }
@keyframes orbitItem {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 960px) {
  .future .scene-stage { grid-template-columns: 1fr; }
}

/* ============================================================================
   SCENE 9 — FINAL CTA
   ============================================================================ */
.cta .scene-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  text-align: center;
}
.cta-wrapper {
  position: relative;
  display: grid;
  gap: 22px;
  justify-items: center;
  padding: 80px 24px 60px;
  max-width: 880px;
  margin: 0 auto;
}
.cta__halo {
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,186,181,0.45) 0%, transparent 60%);
  filter: blur(40px);
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: haloBreathe 4s var(--easing-soft) infinite;
}
.cta__halo--2 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(125,249,255,0.4) 0%, transparent 70%);
  animation-duration: 3.2s;
  animation-delay: -1s;
}
@keyframes haloBreathe {
  0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
}
.cta__lockup {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.cta__mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  background: linear-gradient(160deg, var(--accent) 0%, #086e6c 100%);
  box-shadow:
    0 0 80px rgba(10,186,181,0.55),
    0 0 0 1px rgba(255,255,255,0.18) inset;
  color: #fff;
  letter-spacing: -0.02em;
}
.cta__wordmark {
  font-size: clamp(3rem, 7vw, 6rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(10,186,181,0.45));
}
.cta__claim {
  margin: 4px 0 0;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 720px;
}
.cta__trust {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  margin-top: 12px;
  padding: 18px 28px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.cta__trust li { display: grid; gap: 2px; text-align: center; }
.cta__trust b {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--accent);
}
.cta__trust span { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- FOOTER ---------- */
.footer {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 30px;
  padding: 40px 8px 20px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__logo {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}
.footer h5 {
  margin: 0 0 4px;
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.footer a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.footer a:hover { color: var(--accent); }
.footer__col--meta {
  align-self: end;
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .footer { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   REVEAL UTILITIES
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--easing), transform 0.9s var(--easing);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .phone-3d { transform: none; }
}

/* ============================================================================
   INTRO LOADER — full-bleed, centred А mark, Tiffany pulse.
   Hidden via .is-gone (fades out + slides up) when JS removes it.
   While visible, pointer-events block the page below.
   ============================================================================ */
.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #050506;
  pointer-events: all;
  isolation: isolate;
  overflow: hidden;
  transition:
    opacity 700ms cubic-bezier(0.65, 0, 0.35, 1),
    transform 900ms cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0s linear 900ms;
}
.intro-loader.is-gone {
  opacity: 0;
  transform: translateY(-12px) scale(1.04);
  pointer-events: none;
  visibility: hidden;
}

/* Soft Tiffany halo behind the logo */
.intro-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(10,186,181,0.40), transparent 60%),
    radial-gradient(closest-side at 50% 50%, rgba(125,249,255,0.18), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  animation: introHaloDrift 4s ease-in-out infinite alternate;
}
@keyframes introHaloDrift {
  from { transform: scale(0.96); opacity: 0.7; }
  to   { transform: scale(1.06); opacity: 1; }
}

/* Big subtle ring around the A — premium "loading" hint without text */
.intro-loader__ring {
  position: absolute;
  width: clamp(280px, 38vmin, 420px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(125, 249, 255, 0.18);
  z-index: 1;
  animation: introRingPulse 2.6s ease-in-out infinite;
}
.intro-loader__ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--accent);
  animation: introRingSpin 1.8s linear infinite;
}
@keyframes introRingPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.65; }
  50%      { transform: scale(1.04); opacity: 1; }
}
@keyframes introRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The mark itself — huge, gradient-filled А */
.intro-loader__mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(180px, 26vmin, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 28%;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(120% 120% at 30% 30%, rgba(10,186,181,0.35), transparent 60%),
    #08080a;
  box-shadow:
    0 0 0 1px rgba(125,249,255,0.18) inset,
    0 60px 120px -30px rgba(10,186,181,0.4),
    0 0 80px -10px rgba(10,186,181,0.4);
  animation: introMarkBreath 3.2s ease-in-out infinite;
}
.intro-loader__mark span {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(96px, 14vmin, 180px);
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(10,186,181,0.5));
  transform: translateY(-2%);
}
@keyframes introMarkBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* Tiny pulse dot at the bottom — single accent point per the rule */
.intro-loader__pulse {
  position: absolute;
  bottom: clamp(40px, 8vh, 80px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(10,186,181,0.55);
  z-index: 3;
  animation: introDotPulse 1.6s ease-out infinite;
}
@keyframes introDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(10,186,181,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(10,186,181,0); }
}

/* Lock body scroll while loader is shown */
body.is-loading {
  overflow: hidden;
}

/* ============================================================================
   VAULT END MARK — emerges over the closed door at the very end of the story
   ============================================================================ */
.vault-end-mark {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  pointer-events: none;
  opacity: 0;            /* GSAP fades it in */
  transform: translateY(12px);
  will-change: opacity, transform;
}
.vault-end-mark__chip {
  width: clamp(96px, 12vmin, 140px);
  aspect-ratio: 1 / 1;
  border-radius: 28%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(10,186,181,0.4), transparent 60%),
    #08080a;
  box-shadow:
    0 0 0 1px rgba(125,249,255,0.22) inset,
    0 30px 60px -10px rgba(10,186,181,0.45);
}
.vault-end-mark__chip span {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vmin, 84px);
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vault-end-mark__word {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.vault-cinema__caption--end .num { color: var(--accent); }
.vault-cinema__caption--end h3 {
  font-size: clamp(28px, 3.6vw, 48px) !important;
  line-height: 1.05 !important;
}


/* ============================================================================
   PHONE-PINNED STORY  (replaces the old vault cinema)
   Ref aesthetics: facilpay.io · superconscious-app.webflow.io · urpal.com
   Pattern: sticky-pinned phone in centre, captions slide in on alternating
   sides, screen content cross-fades between four states.
   ============================================================================ */
.phone-story {
  position: relative;
  width: 100%;
  height: 360vh;       /* tall track lets us pace 4 screen swaps comfortably */
  margin: clamp(60px, 10vh, 140px) 0;
}
.phone-story__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(20,20,28,0.6), transparent 70%);
}

/* Massive ghost type behind everything (seen at facilpay/urpal). */
.phone-story__bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 18rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: rgba(245, 245, 247, 0.04);
  text-align: center;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  user-select: none;
}

/* Soft accent halo behind the phone (Tiffany) */
.phone-story__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(420px, 50vmin, 680px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(10,186,181,0.34), transparent 65%),
    radial-gradient(closest-side at 70% 70%, rgba(125,249,255,0.18), transparent 60%);
  filter: blur(50px);
  z-index: 1;
  pointer-events: none;
  animation: heroHaloDrift 22s ease-in-out infinite alternate;
}

/* The phone shell — clean, solid, premium */
.phone-story__device {
  position: relative;
  z-index: 3;
  width: clamp(260px, 26vw, 340px);
  height: clamp(540px, 64vh, 700px);
  background: linear-gradient(180deg, #1a1a22 0%, #0f0f15 100%);
  border-radius: 46px;
  padding: 8px;
  box-shadow:
    0 50px 120px -40px rgba(0,0,0,0.75),
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(255,255,255,0.04) inset,
    0 0 0 1px rgba(255,255,255,0.06);
  transform: translateZ(0); /* gpu-promote */
  will-change: transform;
}
.phone-story__notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 24px;
  background: #050507;
  border-radius: 999px;
  z-index: 5;
}
.phone-story__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124,58,237,0.16), transparent 60%),
    linear-gradient(180deg, #0a0a14 0%, #050507 100%);
  isolation: isolate;
}

/* Stacked screens: only the active one is visible. */
.phone-story__view {
  position: absolute;
  inset: 0;
  padding: 64px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity 600ms var(--easing),
    transform 600ms var(--easing);
  pointer-events: none;
}
.phone-story__view.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.psv__head {
  font-family: "Sora", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.psv__big {
  font-family: "Sora", sans-serif;
  font-size: clamp(2.1rem, 2.8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 4px 0 2px;
  line-height: 1;
}
.psv__sub {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.psv__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  padding: 10px 0;
  border-top: 1px solid rgba(245,245,247,0.06);
  color: var(--text-secondary);
}
.psv__row:first-of-type { border-top: none; }
.psv__row b {
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.psv__row b.ok {
  color: var(--accent-soft);
}
.psv__bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
}
.psv__bar i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(245,245,247,0.08);
  position: relative;
  overflow: hidden;
}
.psv__bar i::after {
  content: "";
  position: absolute;
  inset: 0 calc(100% - var(--p, 0%)) 0 0;
  background: var(--grad-accent);
  border-radius: 999px;
  transition: inset 600ms var(--easing);
}
.psv__bar span {
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Step counter, top-right of the pinned viewport */
.phone-story__counter {
  position: absolute;
  top: clamp(20px, 4vh, 36px);
  right: clamp(20px, 4vw, 56px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: "Sora", sans-serif;
}
.phone-story__counter em {
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.phone-story__counter b {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.phone-story__counter b span {
  display: inline-block;
  min-width: 28px;
  text-align: right;
}

/* Captions: alternating left/right of the device. */
.phone-story__captions {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 4;
  pointer-events: none;
}
.phone-story__captions li {
  position: absolute;
  width: clamp(280px, 24vw, 360px);
  display: grid;
  gap: 10px;
  padding: 22px 26px;
  background: rgba(20, 20, 24, 0.7);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--easing),
    transform 700ms var(--easing);
}
.phone-story__captions li.is-active {
  opacity: 1;
  transform: translateY(0);
}
/* alternating positions: 1+3 left, 2+4 right; vertically staggered */
.phone-story__captions li[data-step="1"] { top: 24%; left: clamp(20px, 8vw, 120px); }
.phone-story__captions li[data-step="2"] { top: 24%; right: clamp(20px, 8vw, 120px); }
.phone-story__captions li[data-step="3"] { bottom: 24%; left: clamp(20px, 8vw, 120px); }
.phone-story__captions li[data-step="4"] { bottom: 24%; right: clamp(20px, 8vw, 120px); }

.phone-story__captions .num {
  font-family: "Sora", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.phone-story__captions h4 {
  font-family: "Sora", sans-serif;
  font-size: 1.45rem;
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text-main);
}
.phone-story__captions p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (max-width: 960px) {
  .phone-story { height: 320vh; }
  .phone-story__bg-text { font-size: clamp(3rem, 14vw, 8rem); }
  .phone-story__captions li {
    position: absolute;
    width: min(82vw, 380px);
    padding: 16px 18px;
  }
  .phone-story__captions li[data-step="1"],
  .phone-story__captions li[data-step="2"],
  .phone-story__captions li[data-step="3"],
  .phone-story__captions li[data-step="4"] {
    left: 50%; right: auto;
    top: auto; bottom: clamp(20px, 5vh, 56px);
    transform: translate(-50%, 24px);
  }
  .phone-story__captions li.is-active {
    transform: translate(-50%, 0);
  }
  .phone-story__counter { top: 14px; right: 14px; }
}

/* ============================================================================
   ============================================================================
   APPLE-STYLE REBUILD — clean product story, monochrome canvas, single focal
   point per scene, Tiffany only as the brand accent. Loaded last so it wins
   over every legacy rule above.
   ============================================================================
   ============================================================================ */

/* Kill every leftover noise element from the cinematic build. */
body.ap .aurora,
body.ap .grain,
body.ap .scene-rail,
body.ap .nav,            /* legacy nav, replaced by .ap-nav */
body.ap .scroll-progress { display: none !important; }
body.ap::before,
body.ap::after { display: none !important; }

/* Reset the canvas to Apple's product-page black. */
body.ap {
  background: #000 !important;
  color: #f5f5f7;
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", system-ui, sans-serif;
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.ap * { box-sizing: border-box; }
body.ap a { color: inherit; text-decoration: none; }

/* Hairline scroll-progress — re-enabled in Apple style only */
body.ap .scroll-progress {
  display: block !important;
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,0.04);
  z-index: 80;
}
body.ap .scroll-progress span {
  display: block; height: 100%; width: 0;
  background: #0ABAB5;
}

/* ----- Top bar ---------------------------------------------------------- */
.ap-nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 4vw, 56px);
  z-index: 60;
  font-size: 13px;
  letter-spacing: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ap-nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.005em;
  color: #f5f5f7;
}
.ap-nav__mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: #0ABAB5; color: #000;
  display: grid; place-items: center;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700; font-size: 13px;
  line-height: 1;
}
.ap-nav__links {
  display: flex; align-items: center; gap: 28px;
  margin-left: auto;
  color: rgba(245,245,247,0.86);
}
.ap-nav__links a:hover { color: #fff; }
.ap-nav__cta {
  padding: 7px 14px; border-radius: 980px;
  background: #0ABAB5; color: #000;
  font-weight: 600; font-size: 12px; letter-spacing: 0.01em;
  transition: transform 200ms cubic-bezier(.32,.72,0,1);
}
.ap-nav__cta:hover { transform: scale(1.04); }
@media (max-width: 720px) {
  .ap-nav__links { display: none; }
}

/* ----- Reusable atoms --------------------------------------------------- */
.ap-eyebrow {
  margin: 0 0 14px;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0ABAB5;
}
.ap-h2 {
  margin: 0;
  font-family: "Sora", "Inter Tight", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #f5f5f7;
}
.ap-h2--center { text-align: center; }
.ap-lede {
  margin: 22px 0 0;
  max-width: 640px;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(245,245,247,0.72);
  font-weight: 400;
}

.ap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 980px;
  font-weight: 500; font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.32,.72,0,1),
              background-color 220ms ease,
              color 220ms ease;
  white-space: nowrap;
}
.ap-btn--primary {
  background: #0ABAB5; color: #000;
}
.ap-btn--primary:hover { transform: scale(1.03); background: #1ed1cb; }
.ap-btn--ghost {
  background: transparent;
  color: #0ABAB5;
}
.ap-btn--ghost:hover { color: #1ed1cb; }
.ap-btn--xl {
  padding: 18px 32px; font-size: 18px;
}

/* ----- Layout shells ---------------------------------------------------- */
.ap-main {
  display: block;
  position: relative;
  padding-top: 50px;             /* breathing room under the fixed nav */
}
.ap-main > section {
  position: relative;
  padding-left: clamp(20px, 6vw, 80px);
  padding-right: clamp(20px, 6vw, 80px);
}

/* ===========================================================================
   HERO
   =========================================================================== */
.ap-hero {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(24px, 4vh, 56px);
  padding-top: clamp(40px, 9vh, 100px);
  padding-bottom: clamp(40px, 8vh, 80px);
  text-align: center;
}
.ap-hero__copy {
  max-width: 1080px;
  margin: 0 auto;
}
.ap-title {
  margin: 0;
  font-family: "Sora", "Inter Tight", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: #f5f5f7;
}
/* Solid color version — robust to splitWordsForReveal nesting.
   Gradient-text clipping is fragile once each word is wrapped in its
   own span: the parent loses direct text nodes and there is nothing
   to clip the background to, leaving the inner words invisible. */
.ap-title__accent {
  color: #b8eee9;
}
.ap-title__accent .ap-word {
  color: #b8eee9;
}
.ap-hero .ap-lede {
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.ap-hero__ctas {
  margin-top: 28px;
  display: inline-flex; gap: 18px; flex-wrap: wrap;
  justify-content: center;
}

.ap-hero__product {
  align-self: center;
  display: flex; justify-content: center;
  margin-top: 8px;
}

.ap-scrollcue {
  position: relative;
  display: inline-block;
  width: 1px; height: 36px;
  margin: 0 auto;
  background: linear-gradient(to bottom,
    transparent, rgba(255,255,255,0.4), transparent);
  align-self: center;
  justify-self: center;
}
.ap-scrollcue span {
  position: absolute; left: -2px; top: 0;
  width: 5px; height: 12px; border-radius: 999px;
  background: #0ABAB5;
  animation: apCue 1.8s cubic-bezier(.6,.2,.4,1) infinite;
}
@keyframes apCue {
  0%   { transform: translateY(0);  opacity: 1; }
  60%  { transform: translateY(20px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ===========================================================================
   PHONE PRODUCT — clean, monochrome, premium
   =========================================================================== */
.ap-phone {
  position: relative;
  width: clamp(240px, 26vw, 340px);
  aspect-ratio: 320 / 660;
  max-height: 76vh;
  user-select: none;
}
.ap-phone--hero {
  width: clamp(260px, 28vw, 360px);
}
.ap-phone__shell {
  position: absolute;
  inset: 0;
  border-radius: clamp(36px, 4vw, 48px);
  background:
    radial-gradient(ellipse at 50% 0%, #2a2c33 0%, #1a1c22 30%, #0e1014 80%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 6px #0a0c10,
    0 30px 80px rgba(0,0,0,0.65),
    0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.ap-phone__notch {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 26px;
  background: #000;
  border-radius: 999px;
}
.ap-phone__screen {
  position: absolute;
  top: 14px; left: 14px; right: 14px; bottom: 14px;
  border-radius: clamp(28px, 3.4vw, 36px);
  background: #000;
  overflow: hidden;
}
.ap-phone__sidebtn,
.ap-phone__volup,
.ap-phone__voldown {
  position: absolute; right: -2px;
  width: 3px;
  background: linear-gradient(to right, #0e1014, #2a2c33);
  border-radius: 2px;
}
.ap-phone__sidebtn { top: 26%; height: 80px; }
.ap-phone__volup   { left: -2px; right: auto; top: 24%; height: 56px; }
.ap-phone__voldown { left: -2px; right: auto; top: 36%; height: 90px; }

.ap-phone__floor {
  position: absolute;
  left: -20%; right: -20%;
  bottom: -8%; height: 26%;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(10, 186, 181, 0.18) 0%,
    rgba(10, 186, 181, 0.05) 35%,
    transparent 70%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

/* Screens (one visible at a time) */
.ap-screen {
  position: absolute; inset: 0;
  padding: 28px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 11px;
  color: #f5f5f7;
  opacity: 0;
  transition: opacity 380ms cubic-bezier(.32,.72,0,1);
}
.ap-screen.is-active { opacity: 1; }
.ap-screen__top {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(245,245,247,0.55);
}
.ap-screen__icons { letter-spacing: 2px; }
.ap-screen__hello {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 600; font-size: 18px;
  letter-spacing: -0.02em;
}
.ap-screen__balance {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
}
.ap-screen__balance b {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 22px; font-weight: 600; letter-spacing: -0.03em;
}
.ap-screen__muted { color: rgba(245,245,247,0.5); font-size: 10px; }
.ap-screen__chip {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(10, 186, 181, 0.18);
  color: #b8eee9;
  font-size: 10px;
}
.ap-screen__quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 8px;
}
.ap-screen__quick button {
  background: rgba(255,255,255,0.05);
  border: none; color: #f5f5f7;
  border-radius: 12px;
  padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9px;
  font-family: inherit;
}
.ap-screen__quick button span {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: #0ABAB5; color: #000;
  font-weight: 700; font-size: 11px;
}
.ap-screen__card {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(120deg, #1a1c22 0%, #2a2c33 100%);
  border: 1px solid rgba(255,255,255,0.06);
}
.ap-screen__card-line {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(245,245,247,0.5);
}
.ap-screen__card-amt {
  margin-top: 4px;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
}

.ap-transfer {
  display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center;
  margin-top: 12px;
}
.ap-transfer__node {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  font-size: 10px;
  margin: 0 auto;
}
.ap-transfer__line { width: 100%; height: 36px; }
.ap-transfer__amt {
  text-align: center; margin-top: 14px;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em;
}
.ap-transfer__btn {
  margin-top: 14px;
  border: none; border-radius: 999px;
  padding: 12px 0; width: 100%;
  background: #0ABAB5; color: #000;
  font-weight: 600; font-size: 12px;
  font-family: inherit;
}

.ap-ring {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  display: grid; place-items: center;
  margin-top: 6px;
}
.ap-ring svg { width: 64%; height: 64%; }
.ap-ring__center {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 2px;
  text-align: center;
}
.ap-ring__center b {
  display: block;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.03em;
}
.ap-ring__center span {
  font-size: 9px; color: rgba(245,245,247,0.5);
}
.ap-cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 10px; }
.ap-cat li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; }
.ap-cat li i { width: 8px; height: 8px; border-radius: 50%; background: #0ABAB5; }
.ap-cat li i.c2 { background: #7df9ff; }
.ap-cat li i.c3 { background: rgba(245,245,247,0.4); }
.ap-cat li em { font-style: normal; color: rgba(245,245,247,0.6); }

/* ===========================================================================
   PINNED STAGE (Chapter 1)
   =========================================================================== */
.ap-stage {
  position: relative;
  /* Tall enough for the pinned timeline (~3 viewports) */
  min-height: 320vh;
  padding: 0 !important;
}
.ap-stage__pin {
  position: relative;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px) 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 80px);
  padding: 0 clamp(20px, 6vw, 80px);
}
.ap-stage__title {
  text-align: right;
  max-width: 480px;
  justify-self: end;
}
.ap-stage__product {
  display: flex; align-items: center; justify-content: center;
}
.ap-stage__product .ap-phone {
  will-change: transform;
}
.ap-stage__captions {
  position: relative;
  height: 200px;
  max-width: 380px;
  align-self: center;
}
.ap-cap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms cubic-bezier(.32,.72,0,1),
              transform 520ms cubic-bezier(.32,.72,0,1);
}
.ap-cap.is-active { opacity: 1; transform: translateY(0); }
.ap-cap h3 {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #f5f5f7;
}
.ap-cap p {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.45;
  color: rgba(245,245,247,0.6);
}
@media (max-width: 1024px) {
  .ap-stage__pin {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 100dvh;
    padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 56px);
    gap: 32px;
  }
  .ap-stage__title { text-align: center; justify-self: center; }
  .ap-stage__captions { height: auto; max-width: 480px; margin: 0 auto; text-align: center; }
  .ap-cap { position: static; opacity: 0; height: 0; overflow: hidden; }
  .ap-cap.is-active { height: auto; }
}

/* ===========================================================================
   BIG NUMBER SECTIONS
   =========================================================================== */
.ap-num {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding-top: clamp(60px, 12vh, 140px);
  padding-bottom: clamp(60px, 12vh, 140px);
}
.ap-num--alt { background: linear-gradient(180deg, #000 0%, #050b0c 50%, #000 100%); }
.ap-num__big {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(120px, 22vw, 360px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: #f5f5f7;
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
}
.ap-num__big span {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(245,245,247,0.7);
  text-transform: lowercase;
  margin-left: 12px;
  align-self: center;
}
.ap-num__sub {
  margin: 28px auto 0;
  max-width: 680px;
  font-size: clamp(17px, 1.6vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(245,245,247,0.7);
}

/* ===========================================================================
   PLATFORM (admin dashboard)
   =========================================================================== */
.ap-platform {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  gap: clamp(40px, 6vh, 80px);
  padding-top: clamp(60px, 12vh, 140px);
  padding-bottom: clamp(60px, 12vh, 140px);
  text-align: center;
}
.ap-platform__copy {
  max-width: 880px; margin: 0 auto;
}
.ap-platform .ap-h2 { text-align: center; }
.ap-platform .ap-lede { margin-left: auto; margin-right: auto; text-align: center; }
.ap-platform__screen {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.ap-dash {
  border-radius: clamp(14px, 1.6vw, 22px);
  background: #0a0c10;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 50px 120px rgba(0,0,0,0.6);
  overflow: hidden;
}
.ap-dash__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #14161c;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ap-dash__chrome span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.ap-dash__chrome span:first-child { background: #ff5f56; }
.ap-dash__chrome span:nth-child(2) { background: #ffbd2e; }
.ap-dash__chrome span:nth-child(3) { background: #27c93f; }
.ap-dash__chrome em {
  margin-left: 14px;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
  font-size: 12px; color: rgba(245,245,247,0.45);
}
.ap-dash__body {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: 460px;
}
.ap-dash__nav {
  background: #0a0c10;
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 18px 0;
  display: grid; align-content: start; gap: 2px;
  font-size: 13px;
  color: rgba(245,245,247,0.65);
  text-align: left;
}
.ap-dash__nav span {
  padding: 9px 22px;
  cursor: default;
}
.ap-dash__nav .is-active {
  background: rgba(255,255,255,0.05);
  color: #f5f5f7;
  border-left: 2px solid #0ABAB5;
  padding-left: 20px;
}
.ap-dash__main { padding: 22px 26px; display: grid; gap: 22px; text-align: left; }
.ap-dash__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ap-dash__kpi {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
}
.ap-dash__kpi span {
  display: block; font-size: 12px; color: rgba(245,245,247,0.55);
}
.ap-dash__kpi b {
  display: block;
  margin-top: 6px;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
}
.ap-dash__kpi em {
  font-style: normal; font-size: 11px;
  color: rgba(245,245,247,0.55);
}
.ap-dash__kpi em.up { color: #0ABAB5; }

.ap-dash__chart svg { width: 100%; height: 160px; display: block; }
.ap-dash__list {
  display: grid; gap: 1px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
}
.ap-dash__list-row {
  display: grid; grid-template-columns: 8px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  background: #0a0c10;
  font-size: 13px;
}
.ap-dash__list-row i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #0ABAB5;
}
.ap-dash__list-row em { font-style: normal; color: rgba(245,245,247,0.7); }
.ap-dash__list-row time { font-size: 11px; color: rgba(245,245,247,0.45); }

@media (max-width: 720px) {
  .ap-dash__body { grid-template-columns: 1fr; }
  .ap-dash__nav { display: none; }
  .ap-dash__row { grid-template-columns: 1fr; }
}

/* ===========================================================================
   QUOTE / SECURITY
   =========================================================================== */
.ap-quote {
  min-height: 70dvh;
  display: grid; align-content: center; justify-items: center;
  text-align: center;
  padding: clamp(80px, 16vh, 200px) clamp(20px, 6vw, 80px);
}
.ap-quote__text {
  margin: 0; max-width: 1100px;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #f5f5f7;
}
.ap-quote__dim { color: rgba(245,245,247,0.5); }

/* ===========================================================================
   SPECS GRID
   =========================================================================== */
.ap-specs {
  min-height: 80dvh;
  display: grid; align-content: center; gap: clamp(40px, 6vh, 80px);
  padding: clamp(80px, 14vh, 160px) clamp(20px, 6vw, 80px);
}
.ap-specs__grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  width: 100%;
  max-width: 1280px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ap-specs__grid > div {
  padding: 28px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: grid; align-content: start; gap: 8px;
}
.ap-specs__grid dt {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.45);
  font-weight: 500;
}
.ap-specs__grid dd {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.015em;
  color: #f5f5f7;
}

/* ===========================================================================
   CTA
   =========================================================================== */
.ap-cta {
  min-height: 80dvh;
  display: grid; align-content: center; justify-items: center; gap: 22px;
  text-align: center;
  padding: clamp(80px, 14vh, 160px) clamp(20px, 6vw, 80px);
  background: radial-gradient(ellipse at 50% 60%,
    rgba(10, 186, 181, 0.10) 0%,
    transparent 60%);
}
.ap-cta__title {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #f5f5f7;
}
.ap-cta__sub {
  margin: 0;
  max-width: 560px;
  font-size: clamp(15px, 1.2vw, 19px);
  color: rgba(245,245,247,0.66);
  line-height: 1.5;
}
.ap-cta__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 600;
  color: rgba(10, 186, 181, 0.9);
}
.ap-cta__row {
  margin-top: 8px;
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.ap-cta__contact {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(245,245,247,0.48);
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.ap-cta__contact a {
  color: rgba(245,245,247,0.72);
  text-decoration: none;
  transition: color 200ms ease;
}
.ap-cta__contact a:hover { color: #1ed1cb; }
.ap-btn--xl {
  padding: 18px 32px;
  font-size: 16px;
}

/* ===========================================================================
   FOOTER
   =========================================================================== */
.ap-foot {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px clamp(20px, 6vw, 80px);
  display: grid; gap: 12px;
  font-size: 12px;
  color: rgba(245,245,247,0.5);
}
.ap-foot__row {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
}
.ap-foot__row a:hover { color: #f5f5f7; }
.ap-foot__meta { color: rgba(245,245,247,0.35); }

/* ===========================================================================
   Reduced motion: kill all transitions/animations
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.ap *,
  body.ap *::before,
  body.ap *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   APPLE-STYLE EFFECTS LAYER (v51)
   Adds: hero scroll-zoom, per-word reveal, count-up state, color-shift canvas,
   horizontal pinned scroll-section, depth pop on stage caption swap.
   ============================================================================ */

/* Word-by-word reveal — applied via JS by wrapping each word in <span.ap-word>.
   Default: dimmed; the active state is applied as scroll progresses. */
.ap-word {
  display: inline-block;
  opacity: 0.18;
  transform: translateY(8px);
  transition: opacity 220ms cubic-bezier(.32,.72,0,1),
              transform 380ms cubic-bezier(.32,.72,0,1);
  will-change: opacity, transform;
}
.ap-word.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance — phone scales DOWN from 1.32 → 1, lifts from below + un-blurs.
   Title and lede use the per-word reveal driven on load. */
.ap-hero__product {
  --enter: 1;        /* 1 = pre-load, 0 = settled */
  transform-style: preserve-3d;
  perspective: 1400px;
}
.ap-hero__product .ap-phone {
  transform:
    translateY(calc(var(--enter) * 32px))
    scale(calc(1 + var(--enter) * 0.32));
  filter: blur(calc(var(--enter) * 14px));
  opacity: calc(1 - var(--enter) * 0.4);
  transition:
    transform 1500ms cubic-bezier(.16,.84,.22,1),
    filter   1500ms cubic-bezier(.16,.84,.22,1),
    opacity  1100ms cubic-bezier(.32,.72,0,1);
  will-change: transform, filter, opacity;
}

/* Color-shift body. Each chapter gets a tint we crossfade between via JS. */
body.ap {
  transition: background-color 900ms cubic-bezier(.32,.72,0,1);
}
body.ap[data-active-tint="hero"]        { background-color: #000000 !important; }
body.ap[data-active-tint="design"]      { background-color: #04090c !important; }
body.ap[data-active-tint="speed"]       { background-color: #050d0e !important; }
body.ap[data-active-tint="reliability"] { background-color: #061416 !important; }
body.ap[data-active-tint="simplicity"]  { background-color: #050b0c !important; }
body.ap[data-active-tint="platform"]    { background-color: #04090c !important; }
body.ap[data-active-tint="security"]    { background-color: #03070a !important; }
body.ap[data-active-tint="inside"]      { background-color: #060f12 !important; }
body.ap[data-active-tint="specs"]       { background-color: #02060a !important; }
body.ap[data-active-tint="cta"]         { background-color: #04090c !important; }

/* ===========================================================================
   STAGE CHAPTER — extra Apple polish: phone tilts in 3D + caption "depth pop"
   =========================================================================== */
.ap-stage__product { perspective: 1600px; }
.ap-stage__pin .ap-phone {
  transition: transform 380ms cubic-bezier(.32,.72,0,1);
}
.ap-cap {
  filter: blur(6px);
}
.ap-cap.is-active { filter: blur(0); }

/* ===========================================================================
   BIG NUMBER — count-up state. The number sits at .ap-num__value (animated
   by JS), with the unit pinned to the right. Inline unit (%) sits adjacent.
   =========================================================================== */
.ap-num__big {
  /* re-declared because we changed the children */
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-variant-numeric: tabular-nums;
}
.ap-num__value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  /* No baseline shift while text changes during count-up */
  min-width: 1.4ch;
}
.ap-num__unit {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(245,245,247,0.7);
  text-transform: lowercase;
  margin-left: 14px;
  align-self: center;
}
.ap-num__unit--inline {
  margin-left: 0;
  font-size: clamp(60px, 11vw, 180px);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #f5f5f7;
  text-transform: none;
  font-family: "Sora", system-ui, sans-serif;
  align-self: baseline;
}

/* ===========================================================================
   HORIZONTAL PINNED SCROLL — "Что внутри"
   =========================================================================== */
.ap-hscroll {
  /* Tall enough to pin and scroll all four cards horizontally with breathing
     room. JS pins .ap-hscroll__sticky and translates the track. */
  position: relative;
  height: 480vh;
  padding: 0 !important;
}
.ap-hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 4vh, 48px);
  padding: clamp(80px, 12vh, 120px) clamp(20px, 6vw, 80px) 36px;
  overflow: hidden;
}
.ap-hscroll__header {
  max-width: 880px;
}
.ap-hscroll__header .ap-h2 {
  font-size: clamp(28px, 4vw, 56px);
}
.ap-hscroll__track {
  display: flex;
  gap: clamp(20px, 2.5vw, 40px);
  align-items: stretch;
  will-change: transform;
  /* Width is content-driven; JS computes and animates the X offset. */
}
.ap-hcard {
  flex: 0 0 clamp(280px, 40vw, 520px);
  background: #0a0c10;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  padding: clamp(24px, 2.2vw, 36px);
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  gap: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.ap-hcard__visual {
  position: relative;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, #14201f 0%, #060c0d 70%);
  min-height: 260px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ap-hcard__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: #0ABAB5;
}
.ap-hcard__title {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #f5f5f7;
}
.ap-hcard__body {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  color: rgba(245,245,247,0.66);
  max-width: 44ch;
}

/* Card visual 1 — chip */
.ap-chip {
  position: relative;
  width: 56%; aspect-ratio: 1/1;
  background: linear-gradient(135deg, #1d2229 0%, #0d1014 60%, #1d2229 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 30px 60px rgba(10,186,181,0.15);
  display: grid; place-items: center;
}
.ap-chip__core {
  position: relative;
  width: 60%; aspect-ratio: 1/1;
  border-radius: 12px;
  background: linear-gradient(135deg, #0ABAB5 0%, #036b67 100%);
  display: grid; place-items: center;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #000;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18),
              0 0 0 8px rgba(10,186,181,0.06);
}
.ap-chip__pins {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to right,
      transparent 0px, transparent 12px,
      rgba(125,249,255,0.18) 12px, rgba(125,249,255,0.18) 13px),
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 12px,
      rgba(125,249,255,0.18) 12px, rgba(125,249,255,0.18) 13px);
  mask: radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 71%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 71%);
  pointer-events: none;
}

/* Card visual 2 — API tree */
.ap-api {
  position: relative;
  width: 80%; height: 78%;
}
.ap-api__node {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #0ABAB5;
  box-shadow: 0 0 24px rgba(10,186,181,0.7);
  transform: translate(-50%, -50%);
}
.ap-api__line {
  position: absolute;
  left: 50%; top: 50%;
  width: 38%; height: 1px;
  background: linear-gradient(to right, #0ABAB5, transparent);
  transform-origin: 0 50%;
}
.ap-api__line--1 { transform: translateY(-50%) rotate(-30deg); }
.ap-api__line--2 { transform: translateY(-50%) rotate( 30deg); }
.ap-api__line--3 { transform: translateY(-50%) rotate(150deg); }
.ap-api__line--4 { transform: translateY(-50%) rotate(210deg); }
.ap-api__leaf {
  position: absolute;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #f5f5f7;
  background: rgba(10,186,181,0.12);
  border: 1px solid rgba(10,186,181,0.35);
  padding: 5px 10px;
  border-radius: 999px;
}
.ap-api__leaf--1 { right: -4%;  top: 24%; }
.ap-api__leaf--2 { right: -4%;  bottom: 24%; }
.ap-api__leaf--3 { left:  -4%;  top: 24%; }
.ap-api__leaf--4 { left:  -4%;  bottom: 24%; }

/* Card visual 3 — bio */
.ap-bio { position: relative; width: 60%; aspect-ratio: 1/1; }
.ap-bio svg { width: 100%; height: 100%; }
.ap-bio__beam {
  position: absolute;
  left: 0; right: 0;
  top: 38%; height: 2px;
  background: linear-gradient(90deg, transparent, #0ABAB5, transparent);
  filter: blur(0.5px);
  animation: apBioScan 2.4s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes apBioScan {
  0%   { transform: translateY(-30%); opacity: 0.0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { transform: translateY(60%); opacity: 0.0; }
}

/* Card visual 4 — launch bars */
.ap-launch {
  width: 70%;
  display: flex; align-items: end; gap: 12%;
  height: 70%;
}
.ap-launch__bar {
  flex: 1;
  width: 100%;
  height: var(--w);
  background: linear-gradient(to top, #0ABAB5 0%, #7df9ff 100%);
  border-radius: 6px 6px 2px 2px;
  box-shadow: 0 0 24px rgba(10,186,181,0.4);
}

/* Horizontal scroll progress hairline */
.ap-hscroll__progress {
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  max-width: 280px;
}
.ap-hscroll__progress span {
  display: block; height: 100%; width: 0;
  background: #0ABAB5;
  transition: width 80ms linear;
}

@media (max-width: 760px) {
  .ap-hscroll { height: auto; padding: clamp(60px,10vh,100px) clamp(20px,6vw,40px) !important; }
  .ap-hscroll__sticky { position: static; height: auto; padding: 0; gap: 24px; }
  .ap-hscroll__track { flex-direction: column; }
  .ap-hcard { flex: 1 1 auto; }
  .ap-hscroll__progress { display: none; }
}

/* Reduced motion — disable hero zoom and dampen everything */
@media (prefers-reduced-motion: reduce) {
  .ap-hero__product .ap-phone { transition: none !important; }
  .ap-word { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   v52 — Motion One driven page. Native CSS sticky for both pinned chapters
   so we don't need any JS pinning library; Motion One drives everything else.
   ============================================================================ */
.ap-stage__pin {
  position: sticky;
  top: 0;
}
@media (max-width: 1024px) {
  /* On phones the stage is no longer pinned — content stacks naturally. */
  .ap-stage__pin { position: relative; }
  .ap-stage { min-height: auto; }
}

/* Stage phone gets a baseline transform so Motion One's animate() lerp from
   identity to scrolled state has a nice starting point (slight tilt-in). */
.ap-stage__pin .ap-phone {
  transform: rotateX(-2deg) rotateY(-6deg);
}

/* Hero phone starts pre-entrance — Motion One animates it on load. */
.ap-hero__product .ap-phone {
  opacity: 0;
  transform: translateY(40px) scale(1.32);
  filter: blur(18px);
}
/* Override the previous v51 transition so Motion One owns it. */
.ap-hero__product { --enter: 0; }
.ap-hero__product .ap-phone {
  transition: none;
}

/* Word reveal initial state — Motion One toggles via animate() */
.ap-word { display: inline-block; }

/* Count-up wrapper — keep tabular numerics aligned so the digits don't jitter */
.ap-num__value {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ============================================================================
   v53 — CINEMATIC PROLOGUE (ch 1..4)
   Each .ap-cine is a tall scroll-section with a sticky .ap-cine__pin
   inside. A <video data-cine-scrub> or still <img> fills the pin;
   overlay copy fades in/out. Scroll-scrub is wired by app.js.
   ============================================================================ */

.ap-cine {
  position: relative;
  height: 300vh;            /* default scrub length (~3 viewports per chapter) */
  padding: 0 !important;
}
.ap-cine--hero       { height: 180vh; }     /* hero needs less */
.ap-cine--scrub      { height: 300vh; }
.ap-cine--phone      { height: 380vh; }   /* long enough to hold the Расходы page */

.ap-cine__pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #000;
}
/* Each chapter "enters" through a brief brightness ramp so the eye is
   guided into the new lighting/colour palette instead of slapping the
   user with a hard cut between AI-generated clips that have wildly
   different lighting. Applied by JS via an IntersectionObserver when
   the pin first appears in view. Asymmetric: rapid out (~80 ms), slow
   in (~360 ms). Net effect: feels like a film cut, hides mismatches. */
/* Chapter entrance transitions.

   Default state: pin is fully visible (opacity:1). When JS adds
   `.ap-cine--active` (on first IntersectionObserver entry), one of
   two animations plays — variant chosen via `data-transition` on
   the section:

     data-transition="blur"   — soft "focus pull": picture racks
                                from heavy blur to sharp. Best for
                                phone-to-phone cuts where the SUBJECT
                                doesn't change, only the action.
     data-transition="dark"   — "out of shadow": picture lifts from
                                near-black with a scale settle. Best
                                for scene changes where the environment
                                flips (studio → vault → admin).

   First-share defaults: if no attribute, falls back to a quick opacity
   fade (260 ms). */
.ap-cine__pin {
  opacity: 1;
  will-change: opacity, filter, transform;
}
/* v111 — The 720-760 ms time-based entrance keyframes (blur/dark) were
   removed: they ran on a wall-clock the moment a chapter became active,
   while the user's scroll was already pushing the chapter forward. The
   result was a sub-second "dark-to-bright" ramp playing _behind_ the
   scrub action, which the user reads as "the slide is rewinding".
   Now the dim-in / dim-out is handled scroll-side by the bridges, so it
   stays 1:1 with the wheel. We keep one ultra-short opacity fade as a
   first-paint safety net for the case where the IntersectionObserver
   fires before the scroll callback wires up.                              */
.ap-cine--active .ap-cine__pin {
  animation: apCinePinEnterFade 220ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes apCinePinEnterFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* NFC clip: subject is framed slightly right of centre — pull the crop
   left so the phone sits in the middle of the viewport. */
#cine-nfc .ap-cine__media--video,
#cine-nfc .ap-cine__media--canvas { object-position: 42% center; }

/* When the scrub uses a JPEG-frame canvas instead of the <video> decoder
   (Apple iPhone-style), keep the same cover-fit and prevent the browser
   from anti-aliasing too aggressively on integer scale factors. */
.ap-cine__media--canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Media (video or still img) fills the pin, cover-fit, centered. */
.ap-cine__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #000;
  /* Override per-scene below for off-centre crops. */
  object-position: center center;
  /* No scale-in transform: it forced GPU sub-pixel resampling and softened
     the picture. The HD 1080p sources already crop to fill via object-fit. */
  /* Light unifying grade: a touch of contrast to make blacks darker
     (which masks per-clip noise differences) and a slight saturation
     bump — no brightness/hue shift this time so the user actually sees
     the picture the way it was rendered. */
  filter: contrast(1.04) saturate(1.02);
  transition: opacity 280ms cubic-bezier(.32,.72,0,1);
}
.ap-cine__media--still {
  /* hero key art — slow parallax-zoom feel */
  animation: apHeroZoom 14s cubic-bezier(.32,.72,0,1) forwards;
}
@keyframes apHeroZoom {
  0%   { transform: scale(1.10); }
  100% { transform: scale(1.00); }
}

/* Soft veils to hide the hard edges of the cover-fit video and
   guarantee smooth fade-between-chapters (Apple does this on every
   scroll-scrub on iphone-17-pro). */
/* Veils were heavy black-gradient overlays at top/bottom that hid the
   first/last 26vh of each scene. They cut into the composition too
   aggressively. Disabled; the colour-grade filter on .ap-cine__media
   does the heavy lifting for unifying scenes. */
.ap-cine__veil {
  display: none !important;
  position: absolute;
  left: 0; right: 0;
  height: 26vh;
  pointer-events: none;
  z-index: 2;
}
.ap-cine__veil--top {
  top: 0;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
}
.ap-cine__veil--bot {
  bottom: 0;
  background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
}

/* Overlay text — three positions */
/* Overlays sit at the LEFT edge with a capped width so the centred
   phone composition is never overlapped. Previously max-width was 1080px
   and text-align center, which pushed text right into the phone area. */
.ap-cine__overlay {
  position: relative;
  z-index: 3;
  text-align: left;
  padding: 0 clamp(20px, 4vw, 56px);
  max-width: min(42vw, 520px);
  pointer-events: none;
}
.ap-cine__overlay > * { pointer-events: auto; }
.ap-cine__overlay--top {
  align-self: start;
  justify-self: start;
  margin-top: clamp(48px, 9vh, 120px);
}
.ap-cine__overlay--bottom {
  align-self: end;
  justify-self: start;
  margin-bottom: clamp(48px, 9vh, 110px);
}
.ap-cine__overlay--side {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  bottom: clamp(48px, 10vh, 120px);
  text-align: left;
  max-width: min(40vw, 480px);
}
.ap-h2--cine {
  /* Capped at 64px — at 96px two-word titles like «Возвращается» or
     «Весь банк» smear over the centred phone. */
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.032em;
}
.ap-cine__sub {
  margin: 16px 0 0;
  color: rgba(245,245,247,0.76);
  font-size: clamp(14px, 1vw, 17px);
  max-width: 34ch;
  line-height: 1.45;
}
.ap-cine__ctas {
  margin-top: 28px;
  display: inline-flex; gap: 18px; flex-wrap: wrap;
  justify-content: center;
}

/* Mobile collapse */
@media (max-width: 720px) {
  .ap-cine, .ap-cine--scrub, .ap-cine--phone { height: 240vh; }
  .ap-cine--hero { height: 160vh; }
  .ap-h2--cine { font-size: clamp(28px, 7.2vw, 48px); }
  /* Mobile: overlays no longer try to sit beside the phone — they
     drop UNDER it (top variant) or sit ABOVE (bottom variant). Full
     viewport width with safe padding, so titles don't clip. */
  .ap-cine__overlay {
    max-width: calc(100vw - clamp(32px, 8vw, 48px));
    padding: 0 clamp(16px, 4vw, 24px);
  }
  .ap-cine__overlay--top {
    margin-top: clamp(24px, 6vh, 56px);
  }
  .ap-cine__overlay--bottom {
    margin-bottom: clamp(24px, 6vh, 56px);
  }
  .ap-cine__overlay--side {
    left: clamp(16px, 5vw, 28px);
    bottom: clamp(40px, 8vh, 80px);
    max-width: calc(100vw - clamp(32px, 10vw, 56px));
  }
  .ap-cine__sub {
    font-size: clamp(13px, 3.4vw, 16px);
    max-width: 36ch;
  }
  /* Phone shrinks on mobile so it leaves room above/below for copy. */
  .ap-cine__phone {
    width: clamp(180px, 56vw, 240px) !important;
  }
}

/* ============================================================================
   CH 4 — PHONE ELONGATES
   The phone sits centred. As you scroll its aspect-ratio grows from
   9:19.5 → 9:24 (lengthens), and inside its screen a tall strip of two
   real screenshots translates upward (parallax). A Tiffany finger drifts.
   ============================================================================ */
.ap-cine--phone .ap-cine__pin {
  background: radial-gradient(ellipse at 50% 60%, #06181a 0%, #000 70%);
}
.ap-cine__phone {
  position: relative;
  width: clamp(220px, 24vw, 320px);
  /* Driven by JS via the --grow variable: 0 = compact, 1 = elongated */
  --grow: 0;
  aspect-ratio: calc(9 / (19.5 + var(--grow) * 4.5));
  max-height: 84dvh;
  transform: scale(calc(1 + var(--grow) * 0.18));
  transition: aspect-ratio 80ms linear, transform 80ms linear;
  will-change: transform, aspect-ratio;
  filter: drop-shadow(0 60px 120px rgba(0,0,0,0.55));
}
.ap-cine__phone-shell {
  position: absolute; inset: 0;
  border-radius: clamp(36px, 4vw, 52px);
  background: radial-gradient(ellipse at 50% 0%, #2a2c33 0%, #1a1c22 30%, #0e1014 80%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 0 0 6px #0a0c10;
  overflow: hidden;
}
.ap-cine__phone-notch {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 26px;
  background: #000;
  border-radius: 999px;
  z-index: 3;
}
.ap-cine__phone-screen {
  position: absolute;
  inset: 12px;
  border-radius: clamp(26px, 3.4vw, 38px);
  background: #000;
  overflow: hidden;
  /* Clip any positioned descendant — including the strip image and
     the expenses page — strictly to the screen rounded rectangle so
     no content can render below the phone bezel. */
  isolation: isolate;
  clip-path: inset(0 round clamp(26px, 3.4vw, 38px));
}
.ap-cine__phone-screen > img:not(.ap-cine__phone-strip) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* ONE seamless screen strip (a single tall JPG combining both home
   screens at the same width). Width fills the screen; height keeps
   the natural 900:2931 ratio. JS sets --max-y (in pixels) on each
   scroll tick to allow translateY to scroll the strip cleanly. */
.ap-cine__phone-strip {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 900 / 2931;
  --slide: 0;
  --max-y: 0px;
  transform: translateY(calc(var(--slide) * var(--max-y) * -1));
  transition: transform 80ms linear;
  will-change: transform;
  user-select: none;
  pointer-events: none;
}

/* Finger pointer — sits over the screen, drifts vertically with scroll */
.ap-cine__finger {
  position: absolute;
  left: 50%;
  --y: 30%;
  top: var(--y);
  transform: translate(-50%, -50%);
  width: clamp(28px, 5vw, 56px);
  aspect-ratio: 1/1;
  pointer-events: none;
  z-index: 4;
  transition: top 80ms linear, opacity 200ms ease;
  opacity: 0.92;
  mix-blend-mode: screen;
}

.ap-cine__phone-floor {
  position: absolute;
  left: -20%; right: -20%;
  bottom: -10%;
  height: 30%;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(10,186,181,0.30) 0%,
    rgba(10,186,181,0.08) 35%,
    transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ----- Расходы tile halo + tap target ------------------------------------
   The bottom-left tile in the strip (Расходы / donut / 28 921 ₽) is at
   roughly y=1500..1820 in the original 900×2931 strip, which maps to
   the lower-left quadrant when the strip is fully slid (--slide=1).
   We position the halo to land on that tile in % of the inner SCREEN
   (not the strip), so it stays stable as the strip translates. */
.ap-cine__hot {
  position: absolute;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms linear;
  z-index: 2;
}
.ap-cine__hot--exp {
  /* In the screen viewport, the Расходы tile sits in the bottom-left at
     about: left 4%, top 70%, width 46%, height 22% (visual fit at
     slide=1). The halo is invisible until phase C, then pulses. */
  left: 4%;
  top: 70%;
  width: 46%;
  height: 22%;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(125,249,255,0.35) 0%,
      rgba(10,186,181,0.18)  40%,
      rgba(10,186,181,0)     75%);
  box-shadow:
    0 0 0 2px rgba(125,249,255,0.55),
    0 12px 36px rgba(10,186,181,0.32);
}

/* ----- Full Expenses page ------------------------------------------------ */
.ap-cine__exp {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #0d1b1d 0%, #050a0c 50%, #000 90%);
  z-index: 3;
  /* Slides up from the bottom of the screen and fades in. Driven by
     --reveal (0..1) from JS. */
  --reveal: 0;
  transform: translateY(calc((1 - var(--reveal)) * 100%));
  opacity: var(--reveal);
  display: grid;
  grid-template: auto auto auto / 1fr;
  gap: 6%;
  padding: 8% 6% 6%;
  color: #f5f5f7;
  pointer-events: none;
  will-change: transform, opacity;
}
.ap-cine__exp-bar {
  display: flex;
  align-items: center;
  gap: 4%;
}
.ap-cine__exp-back {
  width: 11%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #7df9ff;
  display: grid;
  place-items: center;
  padding: 2%;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.ap-cine__exp-back:hover,
.ap-cine__exp-back:focus-visible { background: rgba(125,249,255,0.18); }
.ap-cine__exp-back:active { transform: scale(0.94); background: rgba(125,249,255,0.28); }
.ap-cine__exp-title {
  font-family: "Sora", "Inter Tight", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 3.4cqi, 22px);
  letter-spacing: -0.01em;
}
.ap-cine__exp-donut {
  position: relative;
  width: 70%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.ap-cine__exp-arc {
  --p: 0;
  /* circumference = 2π·50 ≈ 314.16. Each arc draws its own portion.
     The dash patterns below are SCALED by --p (0..1). */
  transition: stroke-dashoffset 80ms linear;
}
.ap-cine__exp-arc--1 { stroke-dasharray: calc(75 * var(--p)) 314.16; stroke-dashoffset: 0; }
.ap-cine__exp-arc--2 { stroke-dasharray: calc(60 * var(--p)) 314.16; stroke-dashoffset: 0; }
.ap-cine__exp-arc--3 { stroke-dasharray: calc(50 * var(--p)) 314.16; stroke-dashoffset: 0; }
.ap-cine__exp-arc--4 { stroke-dasharray: calc(70 * var(--p)) 314.16; stroke-dashoffset: 0; }
.ap-cine__exp-total {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2%;
  text-align: center;
}
.ap-cine__exp-total-label {
  font-size: clamp(10px, 2.4cqi, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.6);
}
.ap-cine__exp-total-value {
  font-family: "Sora", "Inter Tight", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4cqi, 28px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ap-cine__exp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2%;
}
.ap-cine__exp-list li {
  display: grid;
  grid-template: auto / 14px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 3% 4%;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  font-size: clamp(10px, 2.6cqi, 14px);
}
.ap-cine__exp-list li i {
  width: 10px; height: 10px;
  border-radius: 999px;
  display: block;
}
.ap-cine__exp-list li b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ap-cine__phone-screen { container-type: inline-size; }

/* Color tints for new chapters (already in v51 list; re-iterate for safety). */
body.ap[data-active-tint="hero"]        { background-color: #000000 !important; }
body.ap[data-active-tint="design"]      { background-color: #04090c !important; }
body.ap[data-active-tint="speed"]       { background-color: #050d0e !important; }
body.ap[data-active-tint="reliability"] { background-color: #061416 !important; }

/* ============================================================================
   v54 — HERO as scroll-scrub video. The hero is now a tall section
   (500vh) with a sticky 100dvh stage. Title sits at the top of the
   stage; mid-scrub caption sits at the bottom. A hairline progress bar
   gives a tactile "scroll = scrub" feeling.
   ============================================================================ */

/* Allow the hero variant to be MUCH taller than the original 180vh */
.ap-cine--hero.ap-cine--scrub      { height: 500vh; }
@media (max-width: 720px) {
  .ap-cine--hero.ap-cine--scrub    { height: 360vh; }
}

/* Hero overlay sits at the top, centered (legacy "center" variant). */
.ap-cine__overlay--hero {
  position: absolute;
  inset: clamp(80px, 14vh, 140px) 0 auto 0;
  align-self: unset;
  margin: 0 auto;
  z-index: 4;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 80px);
  max-width: 980px;
  /* JS will drive opacity/translate over scrub progress. */
  will-change: opacity, transform;
}
.ap-cine__overlay--hero .ap-title {
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-shadow:
    0 2px 24px rgba(0,0,0,0.55),
    0 0 60px rgba(0,0,0,0.35);
}
.ap-cine__overlay--hero .ap-lede {
  margin: 22px auto 0;
  max-width: 32ch;
  color: rgba(245,245,247,0.86);
  text-shadow: 0 2px 16px rgba(0,0,0,0.65);
}
.ap-cine__overlay--hero .ap-eyebrow {
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}

/* Hero v61 — "side" mode. Title hugs the LEFT margin, vertically
   centred against the vault. No lede, no inline CTA — pure Apple. */
.ap-cine__overlay--hero-side {
  position: absolute;
  inset: 50% auto auto clamp(24px, 5vw, 80px);
  top: 50%;
  right: clamp(24px, 5vw, 80px);
  bottom: auto;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: min(46vw, 580px);
  text-align: left;
  align-self: unset;
  --tx: 0px;
  transform: translate(var(--tx), -50%);
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
  background: none;
}
.ap-cine__overlay--hero-side .ap-title {
  /* Capped at 72px so two-line title fits inside max-width without
     `white-space: nowrap` clipping at narrow viewports. */
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.036em;
  margin: 8px 0 0;
  color: #f5f5f7;
}
.ap-cine__overlay--hero-side .ap-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(245,245,247,0.82);
}
@media (max-width: 720px) {
  .ap-cine__overlay--hero-side {
    inset: auto auto clamp(56px, 12vh, 140px) clamp(18px, 5vw, 28px);
    top: auto;
    transform: none;
    width: auto;
    max-width: 18ch;
  }
  .ap-cine__overlay--hero-side .ap-title {
    font-size: clamp(34px, 8.6vw, 60px);
  }
}

/* Mid-scrub caption (bottom). JS fades it in late. */
.ap-cine__overlay--bottom[data-hero-caption] {
  z-index: 4;
  opacity: 0;
  will-change: opacity, transform;
}
.ap-cine__overlay--bottom .ap-h2--cine,
.ap-cine__overlay--bottom .ap-eyebrow {
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}

/* Live scroll-scrub progress bar — Apple iphone-17-pro style hairline */
.ap-cine__scrub {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 5;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.ap-cine__scrub-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0ABAB5 0%, #7df9ff 100%);
  box-shadow: 0 0 8px rgba(10,186,181,0.5);
  transition: width 80ms linear;
}

/* Veil intensity for hero — slightly softer so the lock area glows through */
.ap-cine--hero .ap-cine__veil--top { height: 36vh; }
.ap-cine--hero .ap-cine__veil--bot { height: 22vh; }

/* ============================================================================
   v57 — overlays move LEFT, the hairline becomes a whisper,
   chapter 4 gets a back-arrow tap state, chapter 5 (NFC) is added.
   ============================================================================ */

/* Bottom-center overlays now anchor to the LEFT side of the stage. */
.ap-cine__overlay--bottom {
  align-self: end;
  text-align: left;
  margin: 0 auto 0 0;
  padding-left: clamp(20px, 6vw, 80px);
  padding-right: clamp(20px, 6vw, 80px);
  margin-bottom: clamp(60px, 12vh, 140px);
  max-width: 36ch;
}
.ap-cine__overlay--bottom .ap-eyebrow,
.ap-cine__overlay--bottom .ap-h2--cine {
  text-align: left;
}

/* The hairline scrub-progress bar is now whisper-thin (1px) and only
   reaches ~30% opacity when idle — present, not screaming. */
.ap-cine__scrub {
  height: 1px;
  background: rgba(255,255,255,0.04);
  opacity: 0.7;
}
.ap-cine__scrub-fill {
  box-shadow: none;
}

/* ----- CH 4 — Back arrow pulse (phase C) -------------------------------- */
.ap-cine__back {
  position: absolute;
  top: 12px;
  left: 12px;
  width: clamp(22px, 4vw, 34px);
  height: clamp(22px, 4vw, 34px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10,18,22,0.5);
  border: 1px solid rgba(125,249,255,0.0);
  opacity: 0;
  /* Phase C will tint and pulse via JS using these CSS vars */
  --pulse: 0;
  --light: 0;
  transition: opacity 200ms ease;
  z-index: 6;
  backdrop-filter: blur(4px);
}
.ap-cine__back::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(125,249,255,0.7);
  transform: scale(calc(1 + var(--pulse) * 0.6));
  opacity: calc((1 - var(--pulse)) * var(--light));
  pointer-events: none;
}
.ap-cine__back svg {
  width: 60%; height: 60%;
  opacity: calc(0.5 + var(--light) * 0.5);
}

/* The finger pointer also gets used in CH 4 phase C: it lands on the
   back arrow. We already have .ap-cine__finger styles. */

/* ----- CH 5 — NFC payment ----------------------------------------------- */
.ap-cine--nfc .ap-cine__pin {
  background:
    radial-gradient(ellipse at 50% 60%, #05111a 0%, #000 70%);
}
.ap-cine__phone--still {
  /* No --grow var; the phone stays at fixed 9:19.5 aspect ratio and
     a single scale that matches the END of CH 4 (so the transition
     between sections is seamless). */
  --grow: 0;
  aspect-ratio: 9 / 19.5;
  transform: scale(1.0);
  transition: transform 800ms cubic-bezier(.32,.72,0,1);
}
.ap-cine__nfc-home {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* NFC ring nest — centred over the "А-БОНУС" card region of the home
   screen (which sits roughly mid-screen at 58 % from top, 30 % from
   left in the screenshot). */
.ap-cine__nfc {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
  /* JS-driven */
  --p: 0;          /* overall phase progress 0..1 */
  --tap: 0;        /* 0..1, brief 0→1→0 around the moment the tap lands */
  --ringA: 0;      /* per-ring expansions */
  --ringB: 0;
  --ringC: 0;
  --check: 0;
}
.ap-cine__nfc-core {
  position: absolute;
  top: -8px; left: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #7df9ff;
  box-shadow: 0 0 20px rgba(125,249,255,0.9);
  transform: scale(calc(0.6 + var(--tap) * 0.6));
  opacity: var(--p);
}
.ap-cine__nfc-ring {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-radius: 50%;
  border: 2px solid #7df9ff;
  box-shadow: 0 0 12px rgba(125,249,255,0.45);
  /* Each ring uses --ringA/B/C via parent variable index lookup */
  transform: translate(-50%, -50%) scale(1);
  /* By default keep them collapsed; JS sets w/h via vars in :nth-child. */
}
.ap-cine__nfc-ring:nth-child(1) {
  width: calc(var(--ringA) * 120px);
  height: calc(var(--ringA) * 120px);
  opacity: calc(1 - var(--ringA));
}
.ap-cine__nfc-ring:nth-child(2) {
  width: calc(var(--ringB) * 160px);
  height: calc(var(--ringB) * 160px);
  opacity: calc(1 - var(--ringB));
}
.ap-cine__nfc-ring:nth-child(3) {
  width: calc(var(--ringC) * 220px);
  height: calc(var(--ringC) * 220px);
  opacity: calc(1 - var(--ringC));
}
.ap-cine__nfc-check {
  position: absolute;
  top: -32px; left: -32px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(125,249,255,0.18);
  box-shadow: 0 0 30px rgba(125,249,255,0.5),
              inset 0 0 0 2px rgba(125,249,255,0.7);
  transform: scale(calc(0.4 + var(--check) * 0.6));
  opacity: var(--check);
  transition: opacity 200ms ease;
}
.ap-cine__finger--nfc {
  /* Starts off-screen-right, drifts to the card location */
  left: var(--nfc-finger-x, 80%);
  top:  var(--nfc-finger-y, 70%);
  transition: left 60ms linear, top 60ms linear, opacity 200ms ease;
}

/* Mobile collapse for new chapters */
@media (max-width: 720px) {
  .ap-cine--nfc { height: 220vh; }
  .ap-cine__overlay--bottom {
    padding-left: clamp(16px, 5vw, 28px);
    margin-bottom: clamp(40px, 8vh, 80px);
  }
}

/* ============================================================================
   v58 — Quick wins while Phase-A videos are being generated.
   ============================================================================ */

/* ---- 1. Hero scrim: a radial darkening behind the title block so
   "Банк. Переосмыслен." reads cleanly against the metallic vault
   texture, without putting a black box around the text. ------------------- */
.ap-cine__overlay--hero {
  /* The scrim is a wide soft radial centred behind the title;
     it doesn't read as a "box" — just a quiet darkening. */
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 38%,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.35) 35%,
      rgba(0,0,0,0.10) 65%,
      rgba(0,0,0,0)    100%
    );
}

/* ---- 2. CTA — Tiffany echo ring(s) behind the button, closing the
   visual motif we opened with the NFC rings. ------------------------------ */
.ap-cta {
  position: relative;
  overflow: hidden;
}
.ap-cta__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
}
.ap-cta__halo span {
  position: absolute;
  top: 50%; left: 50%;
  width: 280px; height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  border: 1px solid rgba(10,186,181,0.32);
  box-shadow: 0 0 30px rgba(10,186,181,0.18);
  animation: apCtaHalo 6s ease-in-out infinite;
}
.ap-cta__halo span:nth-child(1) { animation-delay: 0s;   width: 220px; height: 220px; margin: -110px 0 0 -110px; }
.ap-cta__halo span:nth-child(2) { animation-delay: 1.2s; width: 320px; height: 320px; margin: -160px 0 0 -160px; }
.ap-cta__halo span:nth-child(3) { animation-delay: 2.4s; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-color: rgba(10,186,181,0.18); }
@keyframes apCtaHalo {
  0%, 100% { opacity: 0.18; transform: scale(0.94); }
  50%      { opacity: 0.55; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-cta__halo span { animation: none; }
}
.ap-cta > * { position: relative; z-index: 1; }

/* ---- 3. Footer — lift the copyright contrast from near-invisible
   to readable muted-grey, while keeping it humble. ------------------------ */
.ap-foot__meta {
  color: rgba(245,245,247,0.55);
}
.ap-foot__row a,
.ap-foot__row span {
  color: rgba(245,245,247,0.78);
}
.ap-foot__row a:hover {
  color: #0ABAB5;
}

/* ============================================================================
   v59 — CH 6 (3D dashboard carousel + floating KPIs) and CH 7 (return).
   The page now closes cleanly with vault-closes-CTA-footer instead of
   the legacy text/spec blocks.
   ============================================================================ */

/* --- CH 5 — Semicircle carousel of admin screenshots + KPIs --- */
.ap-cine--carousel { height: 400vh; }
@media (max-width: 720px) { .ap-cine--carousel { height: 260vh; } }
.ap-cine--carousel .ap-cine__pin {
  background:
    radial-gradient(ellipse at 50% 70%, #02141a 0%, #000 60%);
  perspective: 1800px;
  perspective-origin: 50% 50%;
}

/* Carousel chapter: the SCREENS are the heroes, the phone is an accent.
   Phone is shrunk to roughly half its hero size, lifted above the
   visual centre and tilted slightly, so the three dashboard cards
   below/around it dominate the frame. */
.ap-cine__phone--carousel {
  position: relative;
  z-index: 5;
  --lift: 0;
  --tilt: 0;
  /* Hard override of the shared `.ap-cine__phone` width: this phone
     is intentionally small here so the dashboards read first. */
  width: clamp(140px, 13vw, 200px) !important;
  transform:
    translateY(calc(-14vh + var(--lift) * -3vh))
    rotateX(calc(2deg + var(--tilt) * 3deg));
  transition: transform 100ms linear;
  will-change: transform;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.55));
}

/* The arc — a 3D semicircle of admin screens curving BEHIND the phone.
   The cards rotate around a virtual axis just behind the camera. */
.ap-carousel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  transform-style: preserve-3d;
}
.ap-carousel__stage {
  position: relative;
  width: 1px;
  height: 1px;
  transform-style: preserve-3d;
  /* Tighter arc: cards come forward and read big.
     Was clamp(360px, 38vw, 620px) — too far back, cards looked like
     postage stamps next to the phone. */
  --R: clamp(280px, 26vw, 460px);
  --r: 0;
  --enter: 0;
  transform:
    /* Sit the arc lower in the frame so the lifted phone hovers above
       it. rotateX a touch more so the back card rises into view. */
    translateY(4vh)
    rotateX(10deg)
    rotateY(calc(var(--r) * 14deg));
  opacity: var(--enter);
  will-change: transform, opacity;
  transition: opacity 200ms ease;
}
/* Each card is positioned on the arc by its own --ang variable.
   Math: rotate around centre by --ang, then push backwards by --R
   along that direction → card lands on the cylinder wall facing the
   centre. Adding a --shift along Y raises/lowers the arc.
   We also rotate the card so it faces the camera through the centre
   (rotateY(--ang) cancels its rotation back to "facing camera"). */
.ap-carousel__card {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Cards enlarged so the dashboards are legible from a normal viewing
     distance. Was clamp(280px, 28vw, 480px). */
  width: clamp(380px, 38vw, 620px);
  aspect-ratio: 16 / 10;
  margin-left: 0;
  margin-top: 0;
  border-radius: 18px;
  background: #0e1117;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(125,249,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
  transform-style: preserve-3d;
  --ang: 0deg;
  --depth: var(--R);
  transform:
    translate3d(-50%, -50%, 0)
    rotateY(var(--ang))
    translateZ(calc(var(--depth) * -1))
    rotateY(calc(var(--ang) * -0.55));
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  transition: filter 180ms ease;
}
/* Subtle depth shading — the side cards read as slightly darker so the
   centre card is the visual anchor without changing the arc geometry. */
.ap-carousel__card[data-i="0"]::after,
.ap-carousel__card[data-i="2"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 1;
}
.ap-carousel__card[data-i="2"]::after {
  background: linear-gradient(250deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 60%);
}
.ap-carousel__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.ap-carousel__card figcaption {
  position: absolute;
  left: 16px; bottom: 14px;
  font: 500 12px/1 "Inter Tight", system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: #7df9ff;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
@media (max-width: 720px) {
  .ap-carousel__stage { --R: clamp(180px, 44vw, 320px); }
  .ap-carousel__card { width: clamp(240px, 70vw, 360px); }
  .ap-cine__phone--carousel {
    width: clamp(110px, 22vw, 150px) !important;
    transform:
      translateY(calc(-10vh + var(--lift) * -3vh))
      rotateX(calc(2deg + var(--tilt) * 3deg));
  }
}

/* Floating KPI badges */
.ap-kpi {
  position: absolute;
  z-index: 4;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(10,18,22,0.62);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(125,249,255,0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  color: #f5f5f7;
  font-family: "Inter Tight", system-ui, sans-serif;
  --y: 0;
  --o: 0;
  opacity: var(--o);
  transform: translateY(calc(var(--y) * -1px));
  transition: opacity 220ms ease, transform 180ms ease;
  pointer-events: none;
  min-width: 9.5rem;
}
.ap-kpi b {
  display: block;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #7df9ff;
  line-height: 1;
}
.ap-kpi b i {
  font-style: normal;
  color: rgba(245,245,247,0.85);
  font-size: 0.7em;
  margin-left: 0.1em;
}
.ap-kpi em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.62);
}
/* Three positions around the phone (centre-bottom of stage) */
.ap-kpi--a { top: 30%; left:  14%; }
.ap-kpi--b { top: 18%; right: 14%; }
.ap-kpi--c { top: 58%; right:  8%; }
@media (max-width: 720px) {
  .ap-kpi { padding: 10px 12px; min-width: 0; }
  .ap-kpi b { font-size: 22px; }
  .ap-kpi--a { top: 14%; left:  6%; }
  .ap-kpi--b { top: 14%; right: 6%; }
  .ap-kpi--c { top: 64%; right: 6%; }
}

/* CH 7 — same scrub mechanics, no special css beyond base .ap-cine--scrub. */

/* ============================================================================
   v60 — Chapter-to-chapter BRIDGES.
   At the start of each HTML chapter (3 phone-elongate, 5 carousel), a
   full-bleed image of the PREVIOUS video's LAST frame stays on top
   while the HTML content fades in underneath. At the end of each HTML
   chapter, a full-bleed image of the NEXT video's FIRST frame fades
   in, so the user is already looking at the next frame the moment the
   scrub video takes over. No more visual "cuts".
   ============================================================================ */

/* v111 — Bridges are back, but reborn as **scroll-driven** dark cross-
   fades. Previous incarnation looked like a "flash of black" because it
   was on a hard 80 ms CSS opacity transition AND it competed with a
   one-shot 760 ms entrance keyframe. Now the opacity is written each
   scroll tick by `bootCineBridges`, so there is no CSS transition at
   all — the dim follows the user's scroll velocity 1:1 and reads as
   one long film dissolve, not a cut. The fade window is also longer
   (~16 % of each chapter on both ends) so the eye has time to settle
   into the new lighting/colour palette. We also tint with a soft
   radial vignette so the centre stays slightly more open than the
   edges — exactly like a real lens fade-to-black. */
.ap-cine__bridge {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0.78) 0%,
                                          rgba(0,0,0,0.94) 55%,
                                          #000 100%),
    #000;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  will-change: opacity;
  /* NO CSS transition — opacity is driven each scroll tick by JS.
     A transition here would smear the fade behind the wheel and
     break the 1:1 link with the scroll position that makes the
     dissolve feel like film, not Powerpoint. */
}
.ap-cine__bridge--in     { opacity: 1; }   /* starts visible, fades to 0 */
.ap-cine__bridge--out    { opacity: 0; }   /* starts hidden, fades to 1 */
.ap-cine__bridge--black  { background-color: #000; }

/* Center the HTML phone EXACTLY where the video phones sit (mid-screen).
   This is what kills the perceived "jump" between video and HTML. */
.ap-cine--phone .ap-cine__pin,
.ap-cine--carousel .ap-cine__pin {
  /* grid was: place-items: center — keep it, just tighten the box. */
  align-content: center;
  justify-content: center;
}
.ap-cine--phone .ap-cine__phone,
.ap-cine--carousel .ap-cine__phone {
  /* Pin to exact centre regardless of parent grid quirks */
  position: relative;
  z-index: 5;
}

/* v61: carousel layout fully redefined above as a true 3D semicircle.
   No more legacy fan transforms here. */

/* ============================================================================
   CH 5.5 — tokenSpot · CRYPTO EXCHANGE INSIDE THE BANK APP
   Centre phone with a trading screen (ticker, price, mini chart, buy/sell,
   order book). Left rail of other tickers, right candle chart silhouette,
   floating "1-click" badge, animated chart line.
   Driven by JS via CSS variables on individual elements (--enter, etc.).
   ============================================================================ */
.ap-cine--tokenspot { height: 360vh; }
@media (max-width: 720px) { .ap-cine--tokenspot { height: 280vh; } }

.ap-cine--tokenspot .ap-cine__pin {
  background:
    radial-gradient(ellipse at 50% 55%, #06151b 0%, #000 65%);
  overflow: hidden;
}
.ap-ts-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 480px at 22% 38%, rgba(125,249,255,0.10), transparent 70%),
    radial-gradient(700px 420px at 78% 64%, rgba(80,180,200,0.10), transparent 72%);
  z-index: 1;
  pointer-events: none;
}

/* -- Center phone — slightly larger so screen content is legible. */
.ap-cine__phone--tokenspot {
  position: relative;
  z-index: 5;
  width: clamp(240px, 26vw, 320px) !important;
  aspect-ratio: 9 / 19.5 !important;
  max-height: 84dvh;
  filter: drop-shadow(0 50px 100px rgba(0,0,0,0.6));
}
.ap-cine__phone--tokenspot .ap-cine__phone-screen {
  background: #0b0d10;
}

/* -- Screen content. Pure HTML, no images. */
.ap-ts-screen {
  position: absolute;
  inset: 0;
  padding: 22px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #f5f5f7;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(125,249,255,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #0b0d10 0%, #06080a 100%);
  font-family: "Inter Tight", "Sora", system-ui, sans-serif;
}
.ap-ts-screen__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.6);
}
.ap-ts-screen__brand { color: #7df9ff; font-weight: 700; }
.ap-ts-screen__time { font-variant-numeric: tabular-nums; }

.ap-ts-screen__sym {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.ap-ts-screen__sym-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #1a0f00;
  font-weight: 800;
  font-size: 18px;
}
.ap-ts-screen__sym strong { display: block; font-size: 14px; font-weight: 700; }
.ap-ts-screen__sym em { display: block; font-size: 10px; color: rgba(245,245,247,0.5); font-style: normal; }

.ap-ts-screen__price {
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ap-ts-screen__price-cur { color: rgba(245,245,247,0.5); font-size: 16px; font-weight: 600; }
.ap-ts-screen__chg {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11px;
}
.ap-ts-screen__chg-up { color: #10c886; font-weight: 600; }
.ap-ts-screen__chg-pct { color: rgba(245,245,247,0.5); }

.ap-ts-screen__chart {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 2px;
}
.ap-ts-screen__chart-line {
  --len: 1000;
  stroke-dasharray: var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - var(--ts-draw, 0)));
  filter: drop-shadow(0 0 4px rgba(125,249,255,0.6));
}
.ap-ts-screen__chart-fill {
  opacity: var(--ts-draw, 0);
}

.ap-ts-screen__cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 2px;
}
.ap-ts-btn {
  appearance: none; border: 0;
  padding: 10px 0;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em;
  cursor: default;
}
.ap-ts-btn--buy {
  background: linear-gradient(180deg, #10c886, #0a9c69);
  color: #03150c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 6px 18px rgba(16,200,134,0.30);
}
.ap-ts-btn--sell {
  background: rgba(255,255,255,0.06);
  color: #f5f5f7;
  border: 1px solid rgba(255,255,255,0.10);
}

.ap-ts-screen__book {
  margin-top: 2px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ap-ts-book-row {
  display: flex; justify-content: space-between;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: rgba(245,245,247,0.7);
  opacity: var(--ts-book-op, 0);
  transform: translateX(calc((1 - var(--ts-book-op, 0)) * -8px));
  transition: opacity 80ms linear, transform 80ms linear;
}
.ap-ts-book-row--mid {
  background: rgba(125,249,255,0.10);
  color: #7df9ff;
  border: 1px solid rgba(125,249,255,0.25);
}
.ap-ts-book-row i { font-style: normal; opacity: 0.7; }

/* -- LEFT: vertical ticker rail. */
.ap-ts-tickers {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  width: clamp(220px, 22vw, 300px);
  pointer-events: none;
}
.ap-ts-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(10,18,22,0.55);
  border: 1px solid rgba(125,249,255,0.10);
  backdrop-filter: blur(14px) saturate(140%);
  color: rgba(245,245,247,0.85);
  font-family: "Inter Tight", system-ui, sans-serif;
  opacity: var(--ts-row-op, 0);
  transform: translateX(calc((1 - var(--ts-row-op, 0)) * -16px));
  transition: opacity 80ms linear, transform 80ms linear;
}
.ap-ts-row__sym {
  grid-row: 1 / span 2;
  font-weight: 800;
  font-size: 13px;
  color: #7df9ff;
  letter-spacing: 0.04em;
}
.ap-ts-row__name {
  font-size: 11px;
  color: rgba(245,245,247,0.5);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ap-ts-row__price {
  grid-column: 2;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ap-ts-row__chg {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ap-ts-row__chg--up   { color: #10c886; }
.ap-ts-row__chg--down { color: #ef4458; }

/* -- RIGHT: candle chart silhouette. */
.ap-ts-candles {
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  top: 50%;
  width: clamp(240px, 24vw, 340px);
  height: clamp(160px, 22vh, 220px);
  padding: 16px 18px;
  z-index: 4;
  border-radius: 18px;
  background: rgba(10,18,22,0.55);
  border: 1px solid rgba(125,249,255,0.10);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: var(--ts-candles-op, 0);
  /* `translateX` is driven by JS via --ts-candles-op so the panel
     slides in from the right; `translateY(-50%)` keeps it vertically
     centred on the viewport. Single `transform` rule, not two. */
  transform: translate(calc((1 - var(--ts-candles-op, 0)) * 16px), -50%);
  transition: opacity 100ms linear, transform 100ms linear;
}
.ap-ts-candles__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.6);
}
.ap-ts-candles__live {
  color: #10c886;
  font-weight: 600;
}
.ap-ts-candles__rail {
  position: relative;
  margin-top: 14px;
  height: calc(100% - 30px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}
.ap-ts-candle {
  position: relative;
  display: block;
  flex: 1;
  height: var(--h, 30%);
  top: var(--top, 30%);
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(var(--ts-candles-op, 0));
  transition: transform 140ms cubic-bezier(.22,1,.36,1);
}
.ap-ts-candle--up { background: #10c886; box-shadow: 0 0 8px rgba(16,200,134,0.4); }
.ap-ts-candle--dn { background: #ef4458; box-shadow: 0 0 8px rgba(239,68,88,0.4); }

/* -- Floating "Купить за 1 клик" badge. */
.ap-ts-badge {
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  bottom: clamp(28px, 6vh, 64px);
  z-index: 4;
  display: flex; flex-direction: column;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(16,200,134,0.16);
  border: 1px solid rgba(16,200,134,0.30);
  backdrop-filter: blur(14px) saturate(160%);
  color: #f5f5f7;
  max-width: 240px;
  opacity: var(--ts-badge-op, 0);
  transform: translateY(calc((1 - var(--ts-badge-op, 0)) * 12px));
  transition: opacity 120ms linear, transform 120ms linear;
}
.ap-ts-badge__dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10c886;
  box-shadow: 0 0 12px #10c886;
  animation: tsLive 1.6s ease-in-out infinite;
}
.ap-ts-badge strong {
  font-size: 14px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.ap-ts-badge em {
  font-style: normal;
  font-size: 11px;
  color: rgba(245,245,247,0.65);
  line-height: 1.35;
}
@keyframes tsLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Mobile collapse for tokenSpot. Side rails dock above/below the
   phone with reduced size so everything fits in 100dvh. */
@media (max-width: 720px) {
  .ap-cine__phone--tokenspot { width: clamp(220px, 60vw, 280px) !important; }
  .ap-ts-tickers {
    left: clamp(12px, 4vw, 20px);
    top: clamp(20px, 4vh, 32px);
    transform: none;
    width: clamp(140px, 42vw, 200px);
    gap: 6px;
  }
  .ap-ts-row { padding: 8px 10px; }
  .ap-ts-row__name { display: none; }
  .ap-ts-row__price { font-size: 11px; }
  .ap-ts-candles {
    right: clamp(12px, 4vw, 20px);
    top: auto;
    bottom: clamp(96px, 18vh, 160px);
    /* Mobile: no -50% Y; the slide-in still drives the X. */
    transform: translate(calc((1 - var(--ts-candles-op, 0)) * 16px), 0);
    width: clamp(140px, 42vw, 200px);
    height: clamp(120px, 16vh, 160px);
  }
  .ap-ts-badge {
    right: clamp(12px, 4vw, 20px);
    bottom: clamp(20px, 4vh, 36px);
    max-width: clamp(180px, 46vw, 220px);
  }
}