@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: url('fonts/Comfortaa Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: url('fonts/Comfortaa.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Praktika';
  src: url('fonts/Praktika Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0d13;
  --text: #c9d0e6;
  --muted: #9aa2bd;
  --accent: #34d9a1;
  --accent-2: #2fd2ff;
  --accent-3: #67f1c6;
  --purple: #b270ff;
  --purple-dim: rgba(178, 112, 255, 0.14);
  --text-bright: #eef3ff;
  --muted2: #90a1c1;
  --free: #67f1c6;
  --pro: #2fd2ff;
  --pro-plus: #b270ff;
  --premium: #34d9a1;
  --enterprise: #88d5ff;
  --row-border: rgba(255, 255, 255, 0.06);
  --display: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  --radius: 8px;
  --logo-lockup-width: clamp(360px, 38vw, 620px);
  --hero-subtitle-font-size: clamp(0.78rem, 0.56rem + 0.56vw, 1.02rem);
  --hero-subtitle-letter-spacing: clamp(0.16em, 0.12em + 0.18vw, 0.26em);
  --comfortaa-letter-spacing: 0.03em;
  --topbar-height: 72px;
  --hero-top-padding: clamp(28px, 4.2vh, 44px);
  --hero-bottom-padding: clamp(26px, 4.6vh, 50px);
  --hero-demo-desktop-scale: 1.28;
  --hero-demo-desktop-shift: clamp(-110px, -7.2vw, -58px);
  --text2: #a1c7de;
  --bg-dot-color: rgba(255, 255, 255, 0.08);
  --bg-scanline-color: rgba(255, 255, 255, 0.05);
  --bg-texture-opacity: 0.16;
  --bg-glow-1: rgba(47, 210, 255, 0.18);
  --bg-glow-2: rgba(52, 217, 161, 0.17);
  --bg-glow-3: rgba(103, 241, 198, 0.11);
  --bg-glow-4: rgba(47, 210, 255, 0.09);
  --bg-glow-5: rgba(52, 217, 161, 0.07);
  --orb-core-color: rgba(47, 210, 255, 0.34);
  --orb-halo-color: rgba(52, 217, 161, 0.15);
  --orb-opacity: 0.6;
  --orb-blur: 11px;
  --btn-shadow-color: rgba(52, 217, 161, 0.28);
  --btn-shadow-hover-color: rgba(52, 217, 161, 0.38);
  --btn-sheen-color: rgba(255, 255, 255, 0.35);
  --ghost-border: rgba(255, 255, 255, 0.16);
  --ghost-border-hover: rgba(255, 255, 255, 0.3);
  --ghost-bg: rgba(255, 255, 255, 0.02);
  --hero-sweep-a: rgba(47, 210, 255, 0.2);
  --hero-sweep-b: rgba(52, 217, 161, 0.16);
  --logo-grad-1: #33d7f1;
  --logo-grad-2: #74f2d0;
  --logo-grad-3: #2acda6;
  --logo-sheen-b: #34d9a1;
  --logo-sheen-opacity: 0.05;
  --logo-sheen-x-start: -1.4%;
  --logo-sheen-x-mid: 1.4%;
  --logo-sheen-scale: 1.08;
  --logo-ghost-opacity: 0.1;
  --logo-ghost-blur: 0.6px;
  --logo-ghost2-hue-1: rgba(196, 85, 255, 0.9);
  --logo-ghost2-hue-2: rgba(255, 82, 186, 0.85);
  --logo-ghost2-hue-3: rgba(47, 210, 255, 0.75);
  --logo-ghost1-duration: 2.5s;
  --logo-ghost1-x-start: -1.2%;
  --logo-ghost1-y-start: -0.7%;
  --logo-ghost1-x-mid: 1.2%;
  --logo-ghost1-y-mid: 0.7%;
  --logo-ghost2-duration: 3.3s;
  --logo-ghost2-x-start: 1.4%;
  --logo-ghost2-y-start: -1.1%;
  --logo-ghost2-x-mid: -1.3%;
  --logo-ghost2-y-mid: 1.1%;
  --logo-ghost3-duration: 4.6s;
  --logo-ghost3-x-start: -0.8%;
  --logo-ghost3-y-start: 1.4%;
  --logo-ghost3-x-mid: 1.4%;
  --logo-ghost3-y-mid: -1.4%;
  --logo-shade-top: #ffffff;
  --logo-shade-bottom: #0b0f1b;
  --logo-shade-opacity: 0.3;
  --section-divider-a: rgba(47, 210, 255, 0.45);
  --section-divider-b: rgba(196, 85, 255, 0.4);
  --section-accent-a: rgba(47, 210, 255, 0.75);
  --section-accent-b: rgba(52, 217, 161, 0.7);
  --section-accent-glow: rgba(47, 210, 255, 0.38);
  --signal-line-a: rgba(47, 210, 255, 0.65);
  --signal-line-b: rgba(196, 85, 255, 0.6);
  --signal-dot-a: rgba(47, 210, 255, 0.9);
  --signal-dot-b: rgba(196, 85, 255, 0.5);
  --signal-dot-glow: rgba(47, 210, 255, 0.62);
  --surface-strong-1: rgba(20, 24, 36, 0.88);
  --surface-strong-2: rgba(12, 15, 24, 0.92);
  --surface-soft-1: rgba(20, 24, 36, 0.82);
  --surface-soft-2: rgba(12, 15, 24, 0.92);
  --surface-weak-1: rgba(18, 22, 34, 0.7);
  --surface-weak-2: rgba(12, 15, 24, 0.85);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-border-soft: rgba(255, 255, 255, 0.06);
  --surface-highlight-a: rgba(47, 210, 255, 0.18);
  --surface-highlight-b: rgba(196, 85, 255, 0.08);
  --pricing-featured-border: rgba(196, 85, 255, 0.6);
  --pricing-featured-bg-1: rgba(18, 48, 58, 0.92);
  --pricing-featured-bg-2: rgba(14, 29, 34, 0.88);
  --cta-bg-a: rgba(52, 217, 161, 0.22);
  --cta-bg-b: rgba(47, 210, 255, 0.16);
  --cta-border: rgba(255, 255, 255, 0.12);
  --footer-border: rgba(255, 255, 255, 0.06);
  --panel-bg-1: rgba(22, 26, 40, 0.96);
  --panel-bg-2: rgba(9, 12, 20, 0.98);
  --panel-border-a: rgba(196, 85, 255, 0.55);
  --panel-border-b: rgba(47, 210, 255, 0.4);
  --panel-border-c: rgb(137 252 188 / 29%);
  --panel-label-color: rgba(255, 255, 255, 0.45);
  --panel-dot-color: rgba(255, 255, 255, 0.25);
  --panel-tab-color: rgba(255, 255, 255, 0.16);
  --panel-footer-bar: rgba(255, 255, 255, 0.12);
  --panel-chip-glow: rgba(47, 210, 255, 0.38);
  --panel-row-a: rgba(255, 255, 255, 0.22);
  --panel-row-b: rgba(255, 255, 255, 0.08);
  --panel-row-border: rgba(255, 255, 255, 0.04);
  --panel-map-a: rgba(255, 255, 255, 0.08);
  --panel-map-b: rgba(255, 255, 255, 0.02);
  --panel-map-border: rgba(255, 255, 255, 0.06);
  --panel-map-glow: rgba(52, 217, 161, 0.2);
}

/* ── Scrollbar (window-level, matches docs/portal thumb style) ── */
/* --scrollbar-w is set by smooth-scroll.js to cap track width at zoom > 100% */
::-webkit-scrollbar {
  width: var(--scrollbar-w, 17px);
  height: var(--scrollbar-w, 17px);
  background: url("images/scroll-track-bg.png") center top / 100% auto no-repeat;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0 8px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #3ef6cf 55%, black);
  border-radius: 0 11px;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 1px 1px 0 0 rgba(0, 0, 0, 0.3),
    inset 2px 2px 0 0 rgba(0, 0, 0, 0.15),
    inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
    inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: #3ef6cf;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 1px 1px 0 0 rgba(0, 0, 0, 0.3),
    inset 2px 2px 0 0 rgba(0, 0, 0, 0.22),
    inset 3px 3px 0 0 rgba(0, 0, 0, 0.14),
    inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
    inset -2px -2px 0 0 rgba(0, 0, 0, 0.22),
    inset -3px -3px 0 0 rgba(0, 0, 0, 0.14);
}

/* ── Arrow buttons (SVG pennant shape matching thumb style) ──── */
::-webkit-scrollbar-button {
  display: block;
  background: transparent;
  border: none;
}

/* Cap button dimensions to the same physical-pixel cap as the track */
::-webkit-scrollbar-button:vertical {
  height: var(--scrollbar-w, 17px);
}
::-webkit-scrollbar-button:horizontal {
  width: var(--scrollbar-w, 17px);
}

/* Hide phantom double-buttons and all horizontal buttons */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
}

/* Up arrow — anchored to bottom edge so the cropped tail meets the track-piece flush */
::-webkit-scrollbar-button:vertical:start:decrement {
  background: url("images/scroll-arrow-up.svg") center bottom / 100% auto no-repeat;
}
::-webkit-scrollbar-button:vertical:start:decrement:hover {
  background: url("images/scroll-arrow-up-hover.svg") center bottom / 100% auto no-repeat;
}

/* Down arrow — anchored to top edge so the cropped tail meets the track-piece flush */
::-webkit-scrollbar-button:vertical:end:increment {
  background: url("images/scroll-arrow-down.svg") center top / 100% auto no-repeat;
}
::-webkit-scrollbar-button:vertical:end:increment:hover {
  background: url("images/scroll-arrow-down-hover.svg") center top / 100% auto no-repeat;
}

/* Tail overflow — painted on track-pieces, scales with scrollbar width to stay aligned at any zoom */
::-webkit-scrollbar-track-piece:start {
  background: url("images/scroll-arrow-up-tail.svg") center top / 100% auto no-repeat;
}
::-webkit-scrollbar-track-piece:end {
  background: url("images/scroll-arrow-down-tail.svg") center bottom / 100% auto no-repeat;
}

/* Preserve hidden scrollbar on pricing horizontal scroll */
.pricing-scroll::-webkit-scrollbar { display: none; }
.pricing-scroll::-webkit-scrollbar-button { display: none; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-height) + 18px);
  background: var(--bg);
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--bg-dot-color) 1px, transparent 0),
    repeating-linear-gradient(125deg, var(--bg-scanline-color) 0 1px, transparent 1px 36px);
  background-size: 26px 26px, 100% 100%;
  opacity: var(--bg-texture-opacity);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(900px 540px at 12% 18%, var(--bg-glow-1), transparent 60%),
    radial-gradient(700px 520px at 85% 10%, var(--bg-glow-2), transparent 62%),
    radial-gradient(900px 700px at 78% 82%, var(--bg-glow-3), transparent 70%),
    linear-gradient(120deg, var(--bg-glow-4), transparent 55%),
    linear-gradient(200deg, var(--bg-glow-5), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

header,
main,
footer {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: min(1200px, 90vw);
  margin: 0 auto;
}

/* Tighten horizontal margins on small phones. At 600px viewport the margin
   is 5% each side (90vw width = same as desktop). At 400px viewport it
   collapses to ~1.25% each side (97.5vw width). Fluidly interpolates
   between. Below 400 stays near-edge-to-edge. Gives narrow phones more
   reading width where every pixel counts. (.hero-grid gets a matching
   override lower down — it has its own @media <=900px width declaration
   which would otherwise win on source-order.) */
@media (max-width: 600px) {
  .container {
    width: min(97.5vw, 90px + 75vw);
  }
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--orb-core-color), var(--orb-halo-color) 55%, transparent 72%);
  opacity: var(--orb-opacity);
  filter: blur(var(--orb-blur));
  animation: orbFloat 14s ease-in-out infinite;
}

.orb-1 {
  width: 340px;
  height: 340px;
  top: -80px;
  left: -120px;
}

.orb-2 {
  width: 260px;
  height: 260px;
  top: 140px;
  right: -100px;
  animation-delay: -6s;
}

.orb-3 {
  width: 420px;
  height: 420px;
  bottom: -180px;
  left: 20%;
  animation-delay: -2s;
}

.orb-4 {
  width: 200px;
  height: 200px;
  bottom: 120px;
  right: 12%;
  animation-delay: -10s;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: none;
  margin: 0;
  z-index: 1000;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--topbar-glow-a), var(--topbar-glow-b), transparent);
  opacity: 0.4;
  pointer-events: none;
}

.topbar.scrolled {
  background: var(--topbar-bg-scrolled);
  box-shadow: 0 12px 30px var(--topbar-shadow-color);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--topbar-height) + var(--hero-top-padding)) 0 var(--hero-bottom-padding);
  overflow: visible;
  isolation: isolate;
  z-index: 2;
}

.hero::after {
  content: "";
  position: absolute;
  left: -10%;
  top: 22%;
  width: 120%;
  height: 220px;
  background: linear-gradient(90deg, transparent, var(--hero-sweep-a), var(--hero-sweep-b), transparent);
  filter: blur(28px);
  transform: rotate(-4deg);
  opacity: 0.6;
  animation: heroSweep 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1280px, calc(100vw - 28px));
  margin-left: auto;
  margin-right: 16px;
  margin-top: 0;
  gap: 16px;
  align-items: center;
  grid-template-columns: 55fr 45fr;
}

.hero-copy {
  min-width: 0;
  margin-top: clamp(-28px, -2.2vw, -8px);
}

.logo-lockup {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 15px;
}

/* Logo stencil: PNG masks stacked layers so only letter shapes show */
.logo-stencil-wrap {
  position: relative;
  width: var(--logo-lockup-width);
  aspect-ratio: 2751 / 570;
  display: block;
  overflow: visible;
}

.logo-stencil-wrap [class^="logo-stencil-"] {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("images/Pinako logotype white.png");
  mask-image: url("images/Pinako logotype white.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.logo-stencil-fill {
  background: linear-gradient(135deg, var(--logo-grad-1) 0%, var(--logo-grad-2) 55%, var(--logo-grad-3) 100%);
}

.logo-stencil-shade {
  background: linear-gradient(180deg, var(--logo-shade-top) 0%, var(--logo-shade-bottom) 100%);
  opacity: var(--logo-shade-opacity);
  mix-blend-mode: multiply;
}

.logo-stencil-ghost {
  background: linear-gradient(135deg, var(--logo-grad-3) 0%, var(--logo-grad-1) 60%, var(--logo-grad-2) 100%);
  opacity: var(--logo-ghost-opacity);
  mix-blend-mode: screen;
  filter: blur(var(--logo-ghost-blur));
  animation-name: logoGhost;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.logo-stencil-ghost-1 {
  --ghost-x-start: var(--logo-ghost1-x-start);
  --ghost-y-start: var(--logo-ghost1-y-start);
  --ghost-x-mid: var(--logo-ghost1-x-mid);
  --ghost-y-mid: var(--logo-ghost1-y-mid);
  animation-duration: var(--logo-ghost1-duration);
}

.logo-stencil-ghost-2 {
  background: linear-gradient(135deg, var(--logo-ghost2-hue-1) 0%, var(--logo-ghost2-hue-2) 60%, var(--logo-ghost2-hue-3) 100%);
  --ghost-x-start: var(--logo-ghost2-x-start);
  --ghost-y-start: var(--logo-ghost2-y-start);
  --ghost-x-mid: var(--logo-ghost2-x-mid);
  --ghost-y-mid: var(--logo-ghost2-y-mid);
  animation-duration: var(--logo-ghost2-duration);
}

.logo-stencil-ghost-3 {
  --ghost-x-start: var(--logo-ghost3-x-start);
  --ghost-y-start: var(--logo-ghost3-y-start);
  --ghost-x-mid: var(--logo-ghost3-x-mid);
  --ghost-y-mid: var(--logo-ghost3-y-mid);
  animation-duration: var(--logo-ghost3-duration);
}

.logo-stencil-sheen {
  background: linear-gradient(90deg, transparent 0%, var(--logo-sheen-b) 42%, transparent 70%, transparent 100%);
  opacity: var(--logo-sheen-opacity);
  mix-blend-mode: screen;
  animation: none;
}

.hero-subtitle {
  color: var(--accent-2);
  text-transform: uppercase;
  width: var(--logo-lockup-width);
  text-align: center;
  letter-spacing: var(--hero-subtitle-letter-spacing);
  font-size: var(--hero-subtitle-font-size);
  margin-inline: auto;
  margin-bottom: 20px;
}

.scan-divider {
  position: relative;
  height: 12px;
  width: var(--logo-lockup-width);
  margin: -5.5px auto 10.5px;
}

.scan-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.2) 30%, rgba(224, 64, 160, 0.2) 70%, transparent);
}

.scan-divider span {
  position: absolute;
  top: 50%;
  width: 54px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  color: rgba(0, 212, 170, 0.95);
  background: radial-gradient(
    ellipse at center,
    currentColor 0%,
    color-mix(in srgb, currentColor 36%, transparent) 52%,
    transparent 82%
  );
  filter: blur(0.8px) drop-shadow(0 0 4px rgba(0, 212, 170, 0.58));
  animation: logoScanPulse 6s ease-in-out infinite;
}

.hero-subtitle span {
  display: block;
  width: fit-content;
  margin: 0 auto;
  white-space: nowrap;
}

#hero-description {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.1rem, 1.45vw + 0.6rem, 1.8rem);
  letter-spacing: var(--comfortaa-letter-spacing);
  line-height: 1.4;
  margin-bottom: 18px;
  color: var(--text2);
  text-align: center;
}

.hero-body {
  display: none;
}



.hero-panel {
  position: relative;
  display: grid;
  gap: 20px;
  min-width: 0;
}

.hero-demo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(calc(100% * var(--hero-demo-desktop-scale)), 840px);
  justify-self: start;
  min-height: clamp(430px, 40vw, 660px);
  padding: clamp(18px, 2.2vw, 28px) clamp(10px, 1.4vw, 18px) clamp(24px, 3vw, 40px);
  transform: translateX(var(--hero-demo-desktop-shift));
  margin-top: clamp(-44px, -3.2vw, -14px);
  overflow: visible;
  isolation: isolate;
  z-index: 3;
}

.hero-demo-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hero-demo-wrap.is-loading .hero-demo-loader {
  opacity: 1;
}

.hero-demo-wrap::before {
  content: "";
  position: absolute;
  inset: -1% -55% -9% -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(47, 210, 255, 0.28), transparent 48%),
    radial-gradient(circle at 68% 42%, rgba(224, 64, 160, 0.2), transparent 45%),
    radial-gradient(circle at 50% 70%, rgba(52, 217, 161, 0.16), transparent 52%);
  filter: blur(52px);
  opacity: 0.9;
  transform: scale(1.5);
  transition: opacity 0.45s ease, transform 0.6s ease;
  animation: heroDemoGlowOrbit 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.hero-demo-wrap.offscreen::before {
  animation-play-state: paused;
}

/* Hide video speed controller extension overlays */
.hero-demo-wrap .vsc-controller {
  display: none !important;
}

.hero-demo {
  position: relative;
  z-index: 4;
  width: min(100%, 840px);
  max-height: min(80svh, 700px);
  display: block;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 0 20px rgba(14, 39, 50, 0.7)) drop-shadow(0 0 13px rgba(43, 116, 107, 0.7));
  will-change: filter;
  transition: filter 0.4s ease;
}

.hero-demo-wrap:hover .hero-demo {
  filter: drop-shadow(0 0 20px rgba(14, 39, 50, 0.7)) drop-shadow(0 0 13px rgba(43, 116, 107, 0.7));
}

.hero-demo-wrap .loader-spinner {
  width: 56px;
  height: 56px;
  position: relative;
}

.hero-demo-wrap .loader-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(1 243 200 / 5%);
  box-shadow:
    0 0 6px 1px rgba(165, 44, 221, 0.2),
    inset 0 0 6px 1px rgba(165, 44, 221, 0.2);
}

.hero-demo-wrap .loader-spinner::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 60%,
    rgba(165, 44, 221, 0) 70%,
    rgba(165, 44, 221, 0.7) 86%,
    rgba(255, 255, 255, 0.92) 94%,
    rgba(165, 44, 221, 0.4) 97.5%,
    rgba(165, 44, 221, 0) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 3px), #000 calc(100% - 6px), transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 3px), #000 calc(100% - 6px), transparent 100%);
  filter: blur(3px)
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 10px rgba(165, 44, 221, 0.65));
  animation: loader-spin 0.8s linear infinite;
}

.signal-rail {
  position: absolute;
  right: -16px;
  top: 46px;
  display: grid;
  gap: 22px;
  padding: 6px 0;
  z-index: 2;
}

.signal-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--signal-line-a), var(--signal-line-b), transparent);
  opacity: 0.55;
}

.signal-rail span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--signal-dot-a), var(--signal-dot-b));
  box-shadow: 0 0 14px var(--signal-dot-glow);
  animation: signalPulse 3.6s ease-in-out infinite;
}

.signal-rail span:nth-child(2) {
  animation-delay: 0.4s;
}

.signal-rail span:nth-child(3) {
  animation-delay: 0.8s;
}

.signal-rail span:nth-child(4) {
  animation-delay: 1.2s;
}

.stat-card::before,
.workflow-card::before,
.faq-item::before,
.multi-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--surface-highlight-a), var(--surface-highlight-b) 45%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.stat-card:hover::before,
.workflow-card:hover::before,
.faq-item:hover::before,
.multi-feature-card:hover::before {
  opacity: 1;
}


.section {
  position: relative;
  padding: 90px 0;
}

.section.pricing {
  padding-top: 45px;
}

.intro-section {
  padding: 56px 0 64px;
}

.intro-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin: 0 auto 22px;
  color: var(--accent-2);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: scale(0.15);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1),
    opacity 0.6s ease;
}

.intro-card.is-visible .intro-eyebrow {
  transform: scale(1);
  opacity: 1;
}

.intro-eyebrow::before,
.intro-eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.7));
}

.intro-eyebrow::after {
  background: linear-gradient(90deg, rgba(47, 210, 255, 0.7), transparent);
}

.intro-paragraph {
  max-width: 780px;
  margin: 0 auto;
  font-family: 'Praktika', 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.05rem, 0.53vw + 0.9rem, 1.4rem);
  line-height: 1.6;
  color: var(--text);
  text-align: left;
}

.intro-card {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 40px);
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(20, 26, 42, 0.55), rgba(12, 16, 28, 0.65)),
    radial-gradient(circle at top left, rgba(47, 210, 255, 0.06), transparent 42%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 18px 40px rgba(4, 6, 14, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.intro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Praktika', 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.05rem, 0.53vw + 0.9rem, 1.4rem);
  line-height: 1.55;
  color: var(--text);
  text-align: left;
}

.intro-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.6em;
}

.intro-list li:last-child {
  margin-bottom: 0;
}

.intro-list a {
  color: var(--accent);
  text-decoration: none;
}

.intro-list a:hover {
  text-decoration: underline;
}

.intro-list li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.62em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 600px) {
  .intro-card {
    margin-left: 16px;
    margin-right: 16px;
    padding: 22px 18px;
    border-radius: 22px;
  }
}

@media (max-width: 449px) {
  .intro-paragraph,
  .intro-list {
    font-size: 1.35rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  #hero-description {
    font-size: 1.2rem;
  }
}

.section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(680px, 84vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--section-divider-a), var(--section-divider-b), transparent);
  opacity: 0.35;
}

.section-header {
  position: relative;
  max-width: 720px;
  margin-bottom: 36px;
  padding-left: 0;
  overflow: visible;
}


.section-header h2 {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.3rem);
  letter-spacing: var(--comfortaa-letter-spacing);
  margin-bottom: 16px;
}

.feature .section-header h2,
.feature.reverse .section-header h2 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 1.95rem);
}

.section-header p {
  color: var(--muted);
}


.section:not(.feature-index-section) .section-header > h2,
.section:not(.feature-index-section) .section-header > p:not(.eyebrow) {
  margin-left: 0;
}

.feature-index-section {
  position: relative;
  padding-top: 72px;
  z-index: 1;
}

.feature-index-shell {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(16, 20, 32, 0.9), rgba(10, 13, 22, 0.94)),
    radial-gradient(circle at top left, rgba(47, 210, 255, 0.08), transparent 42%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 26px 60px rgba(4, 6, 14, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.feature-index-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.08), rgba(196, 85, 255, 0.06), transparent),
    radial-gradient(circle at 16% 18%, rgba(52, 217, 161, 0.12), transparent 24%);
  pointer-events: none;
  opacity: 0.9;
}

.feature-index-shell::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.feature-index-header {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  margin-bottom: 28px;
  text-align: left;
}

.feature-index-title {
  width: 100%;
  text-align: center;
}

.feature-index-columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.feature-index-column {
  display: grid;
  gap: 8px;
}

.feature-index-link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(18, 24, 38, 0.82), rgba(10, 14, 24, 0.9));
  box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.35), inset 2px 2px 3px rgba(255, 255, 255, 0.1), inset -1px -1px 4px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(255, 255, 255, 0.05), inset -1px -1px 1px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease;
}

.feature-index-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(47, 210, 255, 0.12), rgba(196, 85, 255, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
}

.feature-index-link:hover {
  transform: translateX(-5px);
  border-color: rgba(47, 210, 255, 0.24);
  background: linear-gradient(160deg, rgba(20, 28, 43, 0.92), rgba(10, 16, 27, 0.96));
  box-shadow: 0 0px 18px rgba(5, 8, 18, 0.34), inset -2px -2px 6px rgba(0, 0, 0, 0.35), inset 2px 2px 3px rgba(255, 255, 255, 0.1), inset -1px -1px 4px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(255, 255, 255, 0.05), inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}

.feature-index-link:hover::before {
  opacity: 1;
}

.feature-index-bullet,
.feature-index-text {
  position: relative;
  z-index: 1;
  transition: transform 0.24s ease;
}

.feature-index-bullet {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.96), rgba(47, 210, 255, 0.88) 40%, rgba(52, 217, 161, 0.55) 68%, rgba(47, 210, 255, 0.08) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(47, 210, 255, 0.3),
    0 0 22px rgba(52, 217, 161, 0.16);
  flex-shrink: 0;
}

.feature-index-bullet::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(47, 210, 255, 0.16);
  opacity: 0.65;
}

.feature-index-text {
  min-width: 0;
  color: var(--text);
  /* Desktop fluid type: 14.94px at 600 → 16px at >=1280. Mobile gets a
     bigger bump via the override below (16px at 320, tapering down to
     14.94px at 600 so the handoff is seamless). */
  font-size: clamp(0.9rem, 0.87rem + 0.17vw, 1rem);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Mobile override: inverse fluid. Starts at 18px on the smallest phones
   (320) and tapers back to 14.94px at the 600 breakpoint where the base
   clamp above picks up. Gives small phones genuinely legible index buttons
   without raising the size at or above 600 viewport. */
@media (max-width: 600px) {
  .feature-index-text {
    font-size: clamp(0.934rem, 1.344rem - 1.094vw, 1.125rem);
  }
}

.feature-index-link:hover .feature-index-bullet,
.feature-index-link:hover .feature-index-text {
  transform: translateX(8px);
}

.feature-stream-section {
  padding-top: 42px;
}

.feature-stream-shell {
  position: relative;
  width: min(1460px, calc(100vw - 44px));
  margin: 0 auto;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 28px;
  background:
    linear-gradient(155deg, rgba(14, 18, 29, 0.92), rgba(9, 12, 21, 0.96)),
    radial-gradient(circle at 12% 16%, rgba(47, 210, 255, 0.08), transparent 28%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 28px 64px rgba(4, 6, 14, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.feature-stream-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.05), rgba(196, 85, 255, 0.05), transparent),
    radial-gradient(circle at 86% 18%, rgba(52, 217, 161, 0.08), transparent 22%);
  pointer-events: none;
}

.feature-stream-header {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-bottom: 20px;
}

.feature-stream-title {
  width: fit-content;
  max-width: 100%;
}

.reveal-lab-section {
  padding-top: 36px;
}

.reveal-lab-shell {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(17, 18, 31, 0.92), rgba(9, 11, 20, 0.96)),
    radial-gradient(circle at 18% 24%, rgba(47, 210, 255, 0.08), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(47, 210, 255, 0.08), transparent 22%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 28px 64px rgba(4, 6, 14, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.reveal-lab-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.06), rgba(196, 85, 255, 0.04), transparent),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04), transparent 28%);
  pointer-events: none;
}

.reveal-lab-header {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 0;
}

.reveal-lab-title {
  width: fit-content;
  max-width: 100%;
}

.feature-stream-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.feature-stream-link {
  --feature-stream-indent: 0px;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-left: var(--feature-stream-indent);
  padding: 4px 0;
  font-size: clamp(0.8rem, 0.72rem + 0.16vw, 0.95rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease;
}

.feature-stream-link:nth-child(even) {
  --feature-stream-indent: clamp(22px, 3.4vw, 62px);
}

.feature-stream-link:hover {
  transform: translateX(8px);
  color: color-mix(in srgb, var(--text), white 6%);
  text-shadow: 0 0 10px rgba(47, 210, 255, 0.18);
}

.feature-stream-bullet {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.96), rgba(47, 210, 255, 0.88) 40%, rgba(52, 217, 161, 0.55) 68%, rgba(47, 210, 255, 0.08) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(47, 210, 255, 0.3),
    0 0 22px rgba(52, 217, 161, 0.16);
  flex-shrink: 0;
}

.feature-stream-bullet::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(47, 210, 255, 0.16);
  opacity: 0.65;
}

.feature-stream-bullet::after {
  content: "";
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  width: 16px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(47, 210, 255, 0.45), rgba(196, 85, 255, 0.08));
  opacity: 0.85;
}

.feature-stream-text {
  min-width: 0;
  color: var(--text);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.feature-emphasis {
  color: var(--accent-2);
}

.feature-sub-heading {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: var(--comfortaa-letter-spacing);
  color: var(--text-bright);
  margin: 24px 0 12px;
  padding-left: 20px; /* align with bullet text (not bullet dots) */
}

#feature-keyboard-shortcuts .feature {
  grid-template-columns: 33fr 67fr;
}

/* Import section: 60% text, 40% slider.
   .feature.reverse puts copy (order 1) in col 1 and media (order 2) in col 2. */
#feature-import .feature {
  grid-template-columns: 60fr 40fr;
}

@media (max-width: 600px) {
  #feature-keyboard-shortcuts .feature,
  #feature-import .feature {
    grid-template-columns: 1fr;
  }
}

.feature-link {
  font-weight: 500;
  text-decoration: none;
  transition: text-shadow 0.25s ease;
}

.feature-link:hover {
  text-decoration: underline solid currentColor 0.8px;
  text-underline-offset: 3px;
  text-shadow: 0 0 8px rgba(47, 255, 236, 0.35);
}

.eyebrow {
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  margin-bottom: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--surface-strong-1), var(--surface-strong-2));
  border: 1px solid var(--surface-border);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.stat-label {
  color: var(--muted);
}

.feature-list {
  display: grid;
  gap: 60px;
}

.feature {
  display: grid;
  gap: 48px;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Mobile control layout: flip vertical controls to horizontal,
     place BETWEEN text and slider in the stacked flow. */
  .feature .feature-copy { order: 1; }
  .feature .feature-slider__controls { order: 2; }
  .feature .feature-media { order: 3; }
  .feature.reverse .feature-media { order: 3; }

  /* Vertical controls → horizontal, static, centered */
  .feature .feature-slider__controls:not(.feature-slider__controls--horizontal) {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin: 0;
    left: auto !important;
    right: auto !important;
  }

  .feature .feature-slider__controls:not(.feature-slider__controls--horizontal) .feature-slider__pips {
    flex-direction: row;
    padding: 0 6px;
  }

  .feature .feature-slider__controls:not(.feature-slider__controls--horizontal) .feature-slider__pips::before {
    top: 50%;
    bottom: auto;
    left: -12px;
    right: -12px;
    width: auto;
    height: 1px;
    transform: translateY(-0.5px);
    background: linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.15) 8%, rgba(47, 210, 255, 0.15) 92%, transparent);
  }

  .feature .feature-slider__controls:not(.feature-slider__controls--horizontal) svg {
    transform: rotate(-90deg);
  }
}

.feature-section {
  padding: 56px 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}

.feature-section-frame {
  position: relative;
}

/* ── Scroll-perspective: continuous 3D tilt driven by scroll position ── */
.feature-index-shell,
.feature-section-frame,
.multi-feature-shell {
  --sp-rotate: 0;
  --sp-scale: 1;
  --sp-origin: center center;
  will-change: transform;
  transform-origin: var(--sp-origin);
  transform: perspective(1200px) rotateX(calc(var(--sp-rotate) * 1deg)) scale(var(--sp-scale));
}

.multi-feature-shell::before {
  content: "";
  position: absolute;
  inset: auto -14% -26% 18%;
  height: 210px;
  background:
    radial-gradient(circle at center, rgba(47, 210, 255, 0.18), transparent 58%),
    radial-gradient(circle at 72% 48%, rgba(196, 85, 255, 0.12), transparent 54%);
  pointer-events: none;
  filter: blur(8px);
}

.multi-feature-shell > * {
  position: relative;
  z-index: 1;
}

.feature.reverse .feature-media {
  order: 2;
}

.feature-media {
  position: relative;
}

.feature.reverse .feature-copy {
  order: 1;
}

/* At mobile, override the reverse ordering so it's always:
   text → controls → slider (regardless of reverse class). */
@media (max-width: 600px) {
  .feature.reverse .feature-copy { order: 1; }
  .feature.reverse .feature-slider__controls { order: 2; }
  .feature.reverse .feature-media { order: 3; }
}

.feature-media .signal-rail {
  top: 32px;
  right: -18px;
}

.feature-copy h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.feature-copy p {
  color: var(--text);
  margin-bottom: 18px;
}

.feature-section-header {
  margin-bottom: 20px;
  overflow: visible;
}

/* ── Waveform distortion reveal (mobile-tabs header) ── */
.waveform-stack {
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: -30px;
  margin-bottom: -14px;
}
.section-header h2.waveform-layer {
  margin: 0;
}
.waveform-layer--white {
  opacity: 0;
}
.section-header h2.waveform-layer--magenta,
.section-header h2.waveform-layer--cyan {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
}
.waveform-layer--magenta { color: #ff50c8; }
.waveform-layer--cyan    { color: #2fd2ff; }

.feature-section-header p:last-child {
  margin-bottom: 0;
}

.feature-section-points {
  margin-top: 0;
}

.feature-points li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  font-weight: 300;
  /* Tiny legibility bump (15.36 → 16) across all widths. Capped at 1rem so
     desktop stays typographically balanced with the section body. */
  font-size: 1rem;
  line-height: 1.41;
  color: var(--text);
}

.feature-points li.feature-point-compact {
  /* Inverse fluid: 14.4px on phones (<=320) → 13.92px on desktop (>=1280).
     Compact bullets are the smallest body text on the page, so they get the
     biggest bump where screen real estate is tight (mobile) and only a slight
     bump on desktop where the compact variant already feels proportionate.
     (Mobile <=600 gets a steeper bump via the override below.) */
  font-size: clamp(0.87rem, 0.91rem - 0.05vw, 0.9rem);
  line-height: 1.32;
  margin-left: 24px;
}

/* Mobile override: inverse fluid for body and compact bullets. Body bumps
   to 18px and compact to ~16.2px at 320px (preserving the 0.9 compact-to-body
   ratio), tapering back to 16px / 14.26px at the 600 breakpoint where the
   base clamps above pick up. Matches the legibility logic for .feature-index-text. */
@media (max-width: 600px) {
  .feature-points li {
    font-size: clamp(1rem, 1.268rem - 0.714vw, 1.125rem);
  }

  .feature-points li.feature-point-compact {
    font-size: clamp(0.87rem, 1.151rem - 0.693vw, 1.0125rem);
  }
}

.feature-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.feature-point-desc {
  display: block;
  color: var(--text);
  margin-top: 4px;
}

.feature-points-nested {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flow-root;
}

.feature-points-nested li {
  padding-left: 20px;
  margin-bottom: 4px;
  position: relative;
  color: var(--text);
}

.feature-points-nested li[data-slide-target] {
  display: flow-root;
}

.feature-points-nested li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Bullet points that control the slider */
.feature-points li[data-slide-target] {
  cursor: pointer;
  transition: color 0.25s ease;
}

.feature-points li[data-slide-target]:not(:has(> .bullet-label)):hover,
.feature-points li[data-slide-target] > .bullet-label:hover,
.feature-points li[data-slide-target]:hover > .feature-point-desc,
.feature-points li[data-slide-target]:hover .feature-points-nested li:not([data-slide-target]) {
  color: #99faf7;
}

.feature-points li[data-slide-target].is-active-bullet:not(:has(> .bullet-label)),
.feature-points li[data-slide-target].is-active-bullet > .bullet-label,
.feature-points li[data-slide-target].is-active-bullet .feature-point-desc,
.feature-points li[data-slide-target].is-active-bullet .feature-points-nested li:not([data-slide-target]) {
  color: var(--text-bright);
  text-decoration: underline solid rgba(0, 128, 147, 0.67) 0.8px;
  text-underline-offset: 3px;
}

.feature-points li[data-slide-target].is-active-bullet::before,
.feature-points li[data-slide-target].is-active-bullet .feature-points-nested li:not([data-slide-target])::before {
  background: var(--accent-2);
  box-shadow: 0 0 6px rgb(47 255 236);
}

/* ── Feature image slider ─────────────────────────────── */
.feature-slider {
  position: relative;
  max-width: 620px;
}

.feature-slider__viewport {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-slider__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 2px;
  background: rgba(8, 12, 20, 0.6);
  box-shadow: 0 20px 50px rgba(4, 6, 14, 0.45);
  transition: width 0.4s ease, height 0.4s ease;
}

.feature-slider__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--panel-border-a), var(--panel-border-b), var(--panel-border-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.feature-slider__slide {
  border-radius: calc(var(--radius) - 2px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  inset: 2px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.feature-slider__slide.is-active {
  position: relative;
  inset: 0;
  height: 100%;
  opacity: 1;
  pointer-events: auto;
}

.feature-slider__controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.feature-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border: none;
  background: none;
  color: rgba(47, 210, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.feature-slider__btn:hover {
  color: rgba(47, 255, 236, 0.85);
  filter: drop-shadow(0 0 6px rgba(47, 255, 236, 0.5));
  transform: scaleY(1.15);
}

.feature-slider__btn:active {
  color: var(--accent-2);
  transform: scaleY(0.9);
}

.feature-slider__pips {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  padding: 6px 0;
  position: relative;
}

.feature-slider__pips::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(180deg, transparent, rgba(47, 210, 255, 0.15) 8%, rgba(47, 210, 255, 0.15) 92%, transparent);
}

.feature-slider__pip {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(47, 210, 255, 0.25);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1;
  transform: rotate(45deg);
  border-radius: 1px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.feature-slider__pip.is-active {
  background: rgba(47, 255, 236, 0.8);
  border-color: rgba(47, 255, 236, 0.6);
  box-shadow: 0 0 8px rgba(47, 255, 236, 0.45), 0 0 2px rgba(47, 255, 236, 0.8);
  transform: rotate(45deg) scale(1.2);
}

.feature-slider__pip:hover:not(.is-active) {
  border-color: rgba(47, 210, 255, 0.5);
  background: rgba(47, 210, 255, 0.15);
}

.multi-feature-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(8, 14, 22, 0.9), rgba(8, 15, 24, 0.82));
  border: 1px solid rgba(117, 192, 241, 0.14);
  box-shadow: 0 28px 70px rgba(4, 8, 16, 0.34);
}

.multi-feature-header {
  margin-bottom: 26px;
  width: 100%;
  max-width: none;
  padding-inline: 10px;
  text-align: center;
}

.multi-feature-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.multi-feature-figure {
  position: relative;
  margin: 0 auto;
  max-width: 55%;
  border-radius: var(--radius);
  padding: 2px;
  background: rgba(8, 12, 20, 0.6);
  box-shadow: 0 20px 50px rgba(4, 6, 14, 0.45);
  cursor: zoom-in;
  transition: box-shadow 0.5s ease;
}

.multi-feature-figure:hover {
  box-shadow: 0 26px 70px rgba(4, 6, 14, 0.55);
}

.multi-feature-figure::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--panel-border-a), var(--panel-border-b), var(--panel-border-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
  transition:
    top 0.5s ease,
    right 0.5s ease,
    bottom 0.5s ease,
    left 0.5s ease,
    padding 0.5s ease,
    opacity 0.5s ease,
    background 0.5s ease,
    border-radius 0.5s ease;
}

.multi-feature-figure:hover::before {
  top: -2px; right: -2px; bottom: -2px; left: -2px;
  padding: 4px;
  border-radius: calc(var(--radius) + 1px);
  opacity: 0.9;
  background: linear-gradient(120deg, rgb(196, 85, 255), rgb(47, 210, 255), rgb(137, 252, 188));
}

.multi-feature-figure__img {
  display: block;
  width: 100%;
  aspect-ratio: 2700 / 1442;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: calc(var(--radius) - 2px);
  position: relative;
}

/* ── Web Portal + Backup section ─────────────────────────── */
.portal-slider-wrap {
  position: relative;
  max-width: 45%;
  margin: clamp(20px, 2.6vw, 36px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portal-slider-wrap .feature-slider {
  max-width: 100%;
  width: 100%;
}

.portal-slider-wrap .feature-slider__viewport {
  width: 100%;
  aspect-ratio: 1700 / 908;
}

/* Click-to-expand hover treatment on the slider frame,
   mirroring .multi-feature-figure in the collab section. */
.portal-slider-wrap[data-lightbox] .feature-slider__frame {
  cursor: zoom-in;
  transition: box-shadow 0.5s ease;
}

.portal-slider-wrap[data-lightbox] .feature-slider__frame:hover {
  box-shadow: 0 26px 70px rgba(4, 6, 14, 0.55);
}

.portal-slider-wrap[data-lightbox] .feature-slider__frame::before {
  top: 0; right: 0; bottom: 0; left: 0;
  transition:
    top 0.5s ease,
    right 0.5s ease,
    bottom 0.5s ease,
    left 0.5s ease,
    padding 0.5s ease,
    opacity 0.5s ease,
    background 0.5s ease,
    border-radius 0.5s ease;
}

.portal-slider-wrap[data-lightbox] .feature-slider__frame:hover::before {
  top: -2px; right: -2px; bottom: -2px; left: -2px;
  padding: 4px;
  border-radius: calc(var(--radius) + 1px);
  opacity: 0.9;
  background: linear-gradient(120deg, rgb(196, 85, 255), rgb(47, 210, 255), rgb(137, 252, 188));
}

.portal-text-block {
}

.portal-block__heading {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.35rem, 1vw + 0.85rem, 1.8rem);
  font-weight: 400;
  letter-spacing: var(--comfortaa-letter-spacing);
  color: var(--text-bright);
  margin: 0 0 14px;
}

.backup-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "L M R";
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(32px, 3.6vw, 48px);
  align-items: start;
}

.backup-col {
  min-width: 0;
}

.backup-col--left  { grid-area: L; }
.backup-col--middle {
  grid-area: M;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.backup-col--right { grid-area: R; }
.backup-col--static-left,
.backup-col--static-right { display: none; }

.backup-col--static-left,
.backup-col--static-right {
  align-items: center;
  justify-content: center;
}

.backup-col--static-left .framed-image,
.backup-col--static-right .framed-image {
  width: 100%;
}

.backup-col .feature-slider {
  max-width: 100%;
  width: 100%;
}

.backup-col .feature-slider__viewport {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 560px;
}

.backup-col__heading {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.2rem, 0.9vw + 0.7rem, 1.55rem);
  font-weight: 400;
  letter-spacing: var(--comfortaa-letter-spacing);
  color: var(--text-bright);
  margin: 0 0 14px;
}

.backup-col .feature-points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.backup-col .feature-points li {
  font-size: 0.92rem;
  line-height: 1.5;
}

.backup-subgroup {
  margin-top: 10px;
}

.backup-subgroup:first-of-type {
  margin-top: 0;
}

.backup-subgroup__title {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

/* Blockchain ledgers list — inline row with leading AND trailing bullet dots */
.backup-col .feature-points-nested {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 6px 0 0;
  list-style: none;
}

.backup-col .feature-points-nested li {
  padding: 0 10px 0 18px;
  margin: 0;
  display: flex;
  align-items: center;
  position: relative;
}

.backup-col .feature-points-nested li::before {
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}


@media (max-width: 960px) {
  .portal-slider-wrap {
    max-width: 80%;
  }

  .backup-columns {
    grid-template-columns: 60fr 40fr;
    grid-template-areas:
      "L sL"
      "R sR";
    column-gap: clamp(20px, 2.4vw, 36px);
  }

  .backup-col--middle { display: none; }
  .backup-col--static-left,
  .backup-col--static-right {
    display: flex;
  }
  .backup-col--static-left  { grid-area: sL; }
  .backup-col--static-right { grid-area: sR; }

  /* Neutralize bullet active-state at tablet — both images are simultaneously
     visible, so no single "active" slide to point to. */
  .backup-col .feature-points li[data-slide-target].is-active-bullet,
  .backup-col .feature-points li[data-slide-target].is-active-bullet > .bullet-label,
  .backup-col .feature-points li[data-slide-target].is-active-bullet .feature-points-nested li:not([data-slide-target]) {
    color: var(--text);
    text-decoration: none;
  }

  .backup-col .feature-points li[data-slide-target].is-active-bullet::before {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  .portal-slider-wrap {
    max-width: 100%;
    /* Controls above slider (between subtitle and image) on mobile */
    flex-direction: column-reverse;
  }

  .backup-columns {
    grid-template-columns: 1fr;
    grid-template-areas:
      "L"
      "sL"
      "R"
      "sR";
  }
}

/* ── Home Tabs row (text left, 2-image slider right) ──────── */
.home-tabs-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: clamp(32px, 3.6vw, 48px);
}

.home-tabs-row__copy { min-width: 0; }
.home-tabs-row__media { min-width: 0; }

.home-tabs-row__heading {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.2rem, 0.9vw + 0.7rem, 1.55rem);
  font-weight: 400;
  letter-spacing: var(--comfortaa-letter-spacing);
  color: var(--text-bright);
  margin: 0 0 14px;
}

.home-tabs-row .feature-slider {
  max-width: 100%;
  width: 100%;
}

.home-tabs-row .feature-slider__viewport {
  width: 100%;
  aspect-ratio: 1700 / 1254;
  max-height: 420px;
}

.home-tabs-row .feature-points li {
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Vertical controls centered in the gap between text and slider */
.home-tabs-row__controls {
  /* inherits .feature-slider__controls: position: absolute; top/left 50%; translate -50%/-50% */
}

/* ── Home Tab Groups row (static image left, text right) ──── */
.home-groups-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: clamp(32px, 3.6vw, 48px);
}

.home-groups-row__copy { min-width: 0; }
.home-groups-row__figure { min-width: 0; }

.home-groups-row__figure .framed-image { width: 100%; }

.home-groups-row__heading {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.2rem, 0.9vw + 0.7rem, 1.55rem);
  font-weight: 400;
  letter-spacing: var(--comfortaa-letter-spacing);
  color: var(--text-bright);
  margin: 0 0 14px;
}

.home-groups-row .feature-points li {
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .home-tabs-row,
  .home-groups-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .home-tabs-row__copy { order: 1; }
  .home-tabs-row__controls {
    order: 2;
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin: 0;
    left: auto !important;
  }
  .home-tabs-row__controls .feature-slider__pips {
    flex-direction: row;
    padding: 0 6px;
  }
  .home-tabs-row__controls .feature-slider__pips::before {
    top: 50%;
    bottom: auto;
    left: -12px;
    right: -12px;
    width: auto;
    height: 1px;
    transform: translateY(-0.5px);
    background: linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.15) 8%, rgba(47, 210, 255, 0.15) 92%, transparent);
  }
  .home-tabs-row__controls svg {
    transform: rotate(-90deg);
  }
  .home-tabs-row__media { order: 3; }
}

/* ── Session Restore — text + static image row ───────────── */
.restore-row {
  display: grid;
  grid-template-columns: 33fr 67fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}

.restore-row__copy {
  min-width: 0;
}

.restore-row__heading {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.35rem, 1vw + 0.85rem, 1.8rem);
  font-weight: 400;
  letter-spacing: var(--comfortaa-letter-spacing);
  color: var(--text-bright);
  margin: 0 0 14px;
}

.restore-row__figure {
  min-width: 0;
  /* Explicit width so auto margins at <=600px resolve correctly. A bare
     max-width on a grid item with auto margins collapses the item to its
     content intrinsic size (here 0, because the inner background-image div
     has only an aspect-ratio and no intrinsic content). */
  width: 100%;
}

.restore-row__figure .framed-image {
  width: 100%;
}

@media (max-width: 600px) {
  .restore-row {
    grid-template-columns: 1fr;
  }

  .restore-row__figure {
    max-width: 80%;
    margin: 0 auto;
  }
}

/* ── Framed static images (reuses slider frame treatment) ── */
.framed-image-stack {
  display: flex;
  flex-direction: column;
  gap: 86px;
  width: 100%;
}

.framed-image {
  position: relative;
  border-radius: var(--radius);
  padding: 2px;
  background: rgba(8, 12, 20, 0.6);
  box-shadow: 0 20px 50px rgba(4, 6, 14, 0.45);
}

.framed-image::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--panel-border-a), var(--panel-border-b), var(--panel-border-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
}

.framed-image__img {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: calc(var(--radius) - 2px);
}

.collab-figure-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 55%) 1fr;
  gap: clamp(18px, 2vw, 32px);
  align-items: end;
}

.collab-figure-row > .multi-feature-figure {
  max-width: none;
  width: 100%;
  margin: 0;
}

.collab-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "tl sl tr";
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

.collab-col--left   { grid-area: tl; }
.collab-col--middle { grid-area: sl; }
.collab-col--right  { grid-area: tr; }
.collab-col--slider-left,
.collab-col--slider-right { display: none; }

.collab-col__heading {
  font-family: "Comfortaa", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.2rem, 0.9vw + 0.7rem, 1.55rem);
  font-weight: 400;
  letter-spacing: var(--comfortaa-letter-spacing);
  color: var(--text-bright);
  line-height: 1.1;
  margin: 0;
}

.collab-col__heading--left  { text-align: left; }
.collab-col__heading--right { text-align: right; }

.collab-col__heading--stacked { display: none; }

.collab-col {
  min-width: 0;
}

.collab-col--middle,
.collab-col--slider-left,
.collab-col--slider-right {
  position: relative;
  align-items: center;
  justify-content: center;
}

.collab-col--middle {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.collab-col--slider-left,
.collab-col--slider-right {
  /* align-items/justify-content only take effect when they become flex at tablet */
}

.collab-col .feature-slider {
  max-width: 100%;
  width: 100%;
}

.collab-col .feature-slider__viewport {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 350px;
  align-items: flex-start;
}

/* Horizontal controls variant (full slider, below image) */
.feature-slider__controls--horizontal {
  position: static;
  transform: none;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

.feature-slider__controls--horizontal .feature-slider__pips {
  flex-direction: row;
  padding: 0 6px;
}

.feature-slider__controls--horizontal .feature-slider__pips::before {
  top: 50%;
  bottom: auto;
  left: -12px;
  right: -12px;
  width: auto;
  height: 1px;
  transform: translateY(-0.5px);
  background: linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.15) 8%, rgba(47, 210, 255, 0.15) 92%, transparent);
}

.feature-slider__controls--horizontal svg {
  transform: rotate(-90deg);
}

/* Compact variant — tighter pip spacing for sliders with many slides */
.feature-slider__controls--compact .feature-slider__pips {
  gap: 10px;
}

.feature-slider__controls--compact .feature-slider__pip {
  width: 7px;
  height: 7px;
}

.collab-col .feature-points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.collab-col .feature-points li {
  font-size: 0.92rem;
  line-height: 1.5;
}

.collab-col__heading--stacked + .feature-points {
  margin-top: 14px;
}

.collab-slider-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px dashed rgba(117, 192, 241, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201, 208, 230, 0.45);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(8, 12, 20, 0.4);
}

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

  .collab-figure-row > .multi-feature-figure {
    max-width: 80%;
    margin: 0 auto;
  }

  .collab-col__heading--inline { display: none; }
  .collab-col__heading--stacked { display: block; }

  /* Stacked right heading reads as a label above its own bullets, so
     left-align it (not mirrored against the figure at desktop). */
  .collab-col__heading--right.collab-col__heading--stacked {
    text-align: left;
  }

  .collab-columns {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tl sL"
      "tr sR";
    column-gap: 48px; /* wide enough to hold the vertical controls */
  }

  .collab-col--middle { display: none; }
  .collab-col--slider-left  { display: flex; grid-area: sL; }
  .collab-col--slider-right { display: flex; grid-area: sR; }

  /* Anchor controls to the left edge of the slider column so they sit in
     the gap between text and slider (same visual role as the controls
     between media and copy columns in standard feature articles). */
  .collab-col--slider-left .feature-slider__controls,
  .collab-col--slider-right .feature-slider__controls {
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 6px;
  }
}

@media (max-width: 600px) {
  .collab-columns {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tl"
      "sL"
      "tr"
      "sR";
  }

  /* Collab half-slider controls: horizontal, above the slider image.
     Mirrors the treatment applied to .feature .feature-slider__controls
     and .home-tabs-row__controls at this breakpoint — outer row +
     pips-as-row + horizontal rail + rotated arrow svgs. */
  .collab-col--slider-left,
  .collab-col--slider-right {
    flex-direction: column;
    gap: 8px;
  }
  .collab-col--slider-left .feature-slider__controls,
  .collab-col--slider-right .feature-slider__controls {
    order: 1;
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin: 0;
    right: auto;
  }
  .collab-col--slider-left .feature-slider__controls .feature-slider__pips,
  .collab-col--slider-right .feature-slider__controls .feature-slider__pips {
    flex-direction: row;
    padding: 0 6px;
  }
  .collab-col--slider-left .feature-slider__controls .feature-slider__pips::before,
  .collab-col--slider-right .feature-slider__controls .feature-slider__pips::before {
    top: 50%;
    bottom: auto;
    left: -12px;
    right: -12px;
    width: auto;
    height: 1px;
    transform: translateY(-0.5px);
    background: linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.15) 8%, rgba(47, 210, 255, 0.15) 92%, transparent);
  }
  .collab-col--slider-left .feature-slider__controls svg,
  .collab-col--slider-right .feature-slider__controls svg {
    transform: rotate(-90deg);
  }
  .collab-col--slider-left .feature-slider,
  .collab-col--slider-right .feature-slider { order: 2; }
}

/* ── Image lightbox ─────────────────────────────────────── */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.image-lightbox.is-open {
  pointer-events: auto;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 12, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition:
    background 0.5s ease,
    backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease;
}

.image-lightbox.is-open .image-lightbox__backdrop {
  background: rgba(2, 5, 12, 0.72);
  backdrop-filter: blur(4px) saturate(105%);
  -webkit-backdrop-filter: blur(4px) saturate(105%);
}

.image-lightbox__figure {
  position: relative;
  padding: 6px;
  border-radius: var(--radius);
  background: rgba(8, 12, 20, 0.85);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
  cursor: zoom-out;
}

.image-lightbox.is-open .image-lightbox__figure {
  opacity: 1;
  transform: scale(1);
}

.image-lightbox__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 6px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgb(196, 85, 255), rgb(47, 210, 255), rgb(137, 252, 188));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}

.image-lightbox__img {
  display: block;
  width: min(88vw, calc((78vh - 12px) * 2700 / 1442));
  aspect-ratio: 2700 / 1442;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: calc(var(--radius) - 6px);
  position: relative;
  z-index: 1;
  transition: background-image 0.35s ease;
}

/* Lightbox nav arrows (shown only when lightbox has multiple slides) */
.image-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(47, 210, 255, 0.25);
  background: rgba(8, 12, 20, 0.65);
  color: rgba(47, 255, 236, 0.85);
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.35s ease 0.1s, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.image-lightbox.is-open .image-lightbox__nav {
  opacity: 1;
}

.image-lightbox__nav:hover {
  background: rgba(14, 20, 30, 0.85);
  color: var(--accent-2);
  filter: drop-shadow(0 0 6px rgba(47, 255, 236, 0.4));
}

.image-lightbox__nav--prev {
  left: -60px;
}

.image-lightbox__nav--next {
  right: -60px;
}

.image-lightbox__nav svg {
  width: 18px;
  height: 14px;
}

.image-lightbox__nav--prev svg {
  transform: rotate(-90deg);
}

.image-lightbox__nav--next svg {
  transform: rotate(90deg);
}

.multi-feature-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--surface-weak-1), var(--surface-weak-2));
  border: 1px solid var(--surface-border-soft);
  display: grid;
  gap: 12px;
}

.multi-feature-card h3 {
  margin-top: 16px;
  margin-bottom: 0;
}

.multi-feature-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.multi-feature-points {
  margin-top: 2px;
}

.workflow-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.workflow-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--surface-strong-1), var(--surface-strong-2));
  border: 1px solid var(--surface-border);
}

.workflow-card .step {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--accent-2);
}

.workflow-card h3 {
  margin-bottom: 10px;
}

.workflow-card p {
  color: var(--muted);
}

/* ── Pricing hero ─────────────────────────────────────────────────── */
.pricing-hero {
  padding: 30px;
  padding-top: 0;
  text-align: center;
}

/* Override the default reveal rise — fade only for h1 and sub */
.pricing-hero[data-reveal] {
  transform: none;
  transition: none;
  opacity: 1;
}

.pricing-hero h2,
.pricing-hero-sub {
  opacity: 0;
  transition: opacity 2.5s ease;
}

.pricing-hero.is-visible h2,
.pricing-hero.is-visible .pricing-hero-sub {
  opacity: 1;
}

/* Eyebrow: scale up from tiny */
.pricing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--accent-2);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: scale(0.15);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1),
    opacity 0.6s ease;
}

.pricing-hero.is-visible .pricing-hero-eyebrow {
  transform: scale(1);
  opacity: 1;
}

.pricing-hero-eyebrow::before,
.pricing-hero-eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.7));
}

.pricing-hero-eyebrow::after {
  background: linear-gradient(90deg, rgba(47, 210, 255, 0.7), transparent);
}

.pricing-hero h2 {
  font-family: var(--display);
  font-size: 2.3rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.hero-sub-break {
  display: block;
  height: 0.5em;
}

.pricing-hero-sub {
  margin-top: 18px;
  max-width: 62ch;
  margin-inline: auto;
  color: var(--muted2);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ── Upgrade button ──────────────────────────────────────────────── */
.upgrade-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 32px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 10%, transparent), color-mix(in srgb, var(--purple) 8%, transparent));
  color: var(--text);
  font-size: 1.01rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.upgrade-btn:hover {
  border-color: color-mix(in srgb, var(--accent-2) 50%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 16%, transparent), color-mix(in srgb, var(--purple) 14%, transparent));
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-2) 15%, transparent);
}

/* ── Pricing shell (gradient-border container) ───────────────────── */
.pricing-shell {
  position: relative;
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(3px, 0.4vw, 6px);
  overflow: hidden;
  background: linear-gradient(
    160deg,
    rgba(47, 210, 255, 0.18),
    rgba(178, 112, 255, 0.14) 40%,
    rgba(52, 217, 161, 0.10) 70%,
    rgba(136, 213, 255, 0.12)
  );
  box-shadow:
    0 40px 100px rgba(3, 6, 14, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.pricing-shell-inner {
  position: relative;
  border-radius: calc(clamp(20px, 2.5vw, 32px) - 3px);
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(11, 14, 24, 0.98), rgba(7, 10, 18, 0.99)),
    radial-gradient(circle at 12% 6%, rgba(47, 210, 255, 0.07), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(178, 112, 255, 0.05), transparent 22%);
}

.pricing-shell-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 210, 255, 0.4), rgba(178, 112, 255, 0.35), transparent);
  z-index: 2;
}

.pricing-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.pricing-scroll::-webkit-scrollbar { display: none; }

/* ── Pricing table ───────────────────────────────────────────────── */
.ptable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ptable col.col-feat  { width: 29%; }
.ptable col.col-tier  { width: 14.2%; }

.ptable thead th {
  border-bottom: 1px solid var(--row-border);
}

.th-tier {
  position: relative;
}

.th-feat {
  padding: clamp(16px, 2.2vw, 28px) clamp(10px, 1.5vw, 20px) clamp(14px, 1.8vw, 24px);
  background: linear-gradient(180deg, rgba(16, 20, 32, 0.98), rgba(10, 13, 22, 0.99));
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--row-border);
}

.th-feat-label {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1rem, 0.5rem + 0.9vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9290b9;
}

.th-tier {
  --plan: var(--accent);
  padding: clamp(8px, 1.2vw, 14px) clamp(4px, 0.6vw, 8px) clamp(8px, 1vw, 12px);
  vertical-align: top;
  background: linear-gradient(180deg, rgba(15, 19, 31, 0.98), rgba(10, 13, 22, 0.99));
  border-right: 1px solid var(--row-border);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.th-tier:last-child { border-right: 0; }

.th-tier[data-plan="free"]       { --plan: var(--free); vertical-align: middle; }
.th-tier[data-plan="pro"]        { --plan: var(--pro); }
.th-tier[data-plan="pro-plus"]   { --plan: var(--pro-plus); }
.th-tier[data-plan="premium"]    { --plan: var(--premium); }
.th-tier[data-plan="enterprise"] { --plan: var(--enterprise); }

.th-tier::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--plan) 14%, transparent), transparent 60%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--plan) 12%, transparent), transparent 50%);
}

.tier-name {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.1rem, 0.25rem + 1.37vw, 1.4rem);
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  padding: 5px clamp(9px, 0.86vw - 0.6px, 12px);
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--plan) 50%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--plan) 13%, transparent), color-mix(in srgb, var(--plan) 3%, transparent));
  line-height: 1.3;
}

.tier-price {
  display: block;
  font-size: clamp(1.2rem, 0.9vw + 0.8rem, 1.6rem);
  font-weight: 700;
  color: color-mix(in srgb, var(--plan) 80%, #fff);
  letter-spacing: 0em;
  line-height: 1;
}

.tier-price-period {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted2);
  margin-left: 1px;
}

.tier-billing {
  display: block;
  font-size: 0.68rem;
  color: var(--muted2);
}

.tier-savings {
  display: block;
  font-size: 0.68rem;
  font-style: italic;
  color: color-mix(in srgb, var(--plan) 70%, #fff);
  margin-top: 1px;
}

.tier-free-trial {
  display: block;
  font-size: 0.73rem;
  font-style: italic;
  color: color-mix(in srgb, var(--plan) 70%, #fff);
  margin-top: 2px;
}

.th-tier:not([data-plan="free"]) .tier-desc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  border-bottom: 1px solid var(--row-border);
}

.th-tier:not([data-plan="free"]) .tier-desc {
  position: relative;
  padding-bottom: 6px;
}

.tier-select-label {
  display: block;
  text-align: left;
  font-size: 0.68rem;
  color: var(--muted2);
  margin-top: 4px;
  padding-left: 4px;
  font-weight: 300;
  margin-bottom: -1px;
}

.th-tier[data-plan="free"] .tier-price-alt {
  margin-top: 11px;
  font-size: clamp(1.26rem, 0.88vw + 0.88rem, 1.7rem);
}

.th-tier[data-plan="free"] .tier-name {
  font-size: clamp(1.18rem, 0.27rem + 1.47vw, 1.5rem);
}

/* ── Interval toggle buttons ──────────────────────────────────────── */
.tier-interval-btn {
  display: block;
  width: calc(100% - 2px);
  margin: 3px auto 0;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.tier-interval-btn.is-selected {
  background: rgba(255, 255, 255, 0.04);
  border-color: color-mix(in srgb, var(--plan) 45%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--plan) 40%, transparent);
}

.tier-interval-btn:not(.is-selected):hover {
  border-color: color-mix(in srgb, var(--plan) 79%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--plan) 50%, transparent);
  transform: translateY(-1px);
}

.tier-price-alt {
  display: block;
  font-size: clamp(1rem, 0.7vw + 0.7rem, 1.35rem);
  font-weight: 700;
  color: color-mix(in srgb, var(--plan) 80%, #fff);
  letter-spacing: 0em;
  line-height: 1;
}

.tier-billing-alt {
  display: block;
  font-size: 0.68rem;
  color: var(--muted2);
  margin-top: 1px;
}

.tier-desc {
  display: block;
  margin-top: clamp(4px, 0.6vw, 8px);
  font-size: clamp(0.65rem, 0.3rem + 0.45vw, 0.76rem);
  line-height: 1.4;
  color: var(--muted);
}

/* ── Pricing table body rows ─────────────────────────────────────── */
.ptable tbody tr {
  transition: background 0.15s ease;
}

.ptable tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.td-feat {
  padding: 3px clamp(10px, 1.5vw, 20px);
  height: 31px;
  border-bottom: 1px solid var(--row-border);
  border-right: 1px solid var(--row-border);
  background: linear-gradient(90deg, rgba(14, 17, 28, 0.6), transparent 80%);
  vertical-align: middle;
}

.feat-name {
  display: block;
  font-size: clamp(0.74rem, 0.4rem + 0.55vw, 1rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: 0.005em;
}

.feat-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.8;
}

.row-section .td-feat,
.row-section .td-tier {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.td-tier {
  --plan: var(--accent);
  position: relative;
  padding: 3px 8px;
  border-bottom: 1px solid var(--row-border);
  border-right: 1px solid var(--row-border);
  text-align: center;
  vertical-align: middle;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.td-tier:last-child { border-right: 0; }

.td-tier[data-plan="free"]       { --plan: var(--free); }
.td-tier[data-plan="pro"]        { --plan: var(--pro); }
.td-tier[data-plan="pro-plus"]   { --plan: var(--pro-plus); }
.td-tier[data-plan="premium"]    { --plan: var(--premium); }
.td-tier[data-plan="enterprise"] { --plan: var(--enterprise); }

.td-tier::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--plan) 12%, transparent), transparent 40%);
}

.td-tier.has-check::after {
  content: "";
  position: absolute;
  inset: 0px 0px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--plan) 15%, transparent),
    color-mix(in srgb, var(--plan) 4%, transparent) 22%,
    transparent 38%
  );
}

.td-tier.has-check.is-active::after { opacity: 1; }

.cell-check {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--plan) 90%, #fff);
}

.cell-text {
  display: block;
  font-size: clamp(0.74rem, 0.5rem + 0.45vw, 0.9rem);
  line-height: 1.3;
  color: #d4ddf4;
  letter-spacing: 0.005em;
}

.td-tier.is-empty::before { display: none; }
.td-tier.is-empty { opacity: 0.5; }

.cell-dash {
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
}

/* ── Pricing column highlight on hover ───────────────────────────── */
.ptable.has-active .th-tier:not(.is-active),
.ptable.has-active .td-tier:not(.is-active) {
  opacity: 1;
}

.ptable.has-active .th-tier:not(.is-active)::before,
.ptable.has-active .td-tier:not(.is-active)::before {
  opacity: 0;
}

.th-tier.is-active,
.td-tier.is-active {
  opacity: 1;
  background: linear-gradient(180deg, rgba(18, 28, 42, 0.95), rgba(10, 15, 25, 0.98));
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--plan) 22%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--plan) 22%, transparent);
}

.th-tier.is-active::before,
.td-tier.is-active::before {
  opacity: 1;
}

.th-tier.is-active {
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--plan) 22%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--plan) 22%, transparent),
    inset 0 2px 0 color-mix(in srgb, var(--plan) 30%, transparent);
}

.th-tier.is-active:last-child {
  border-radius: 0 calc(clamp(20px, 2.5vw, 32px) - 3px) 0 0;
}

.ptable tbody tr:last-child .td-tier.is-active:last-child {
  border-radius: 0 0 calc(clamp(20px, 2.5vw, 32px) - 3px) 0;
}

.ptable tbody tr:last-child .td-tier.is-active {
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--plan) 22%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--plan) 22%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--plan) 30%, transparent);
}

/* ── Coming Soon badges ──────────────────────────────────────────── */
.badge-soon {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--purple-dim);
  border: 1px solid rgba(178, 112, 255, 0.24);
  color: #c99eff;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.feat-soon-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--purple-dim);
  border: 1px solid rgba(178, 112, 255, 0.24);
  color: #c99eff;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── Scroll arrows ───────────────────────────────────────────────── */
.scroll-arrow {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  z-index: 10;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.scroll-arrow--right {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, #55326c 100%);
  border-radius: 0 calc(clamp(20px, 2.5vw, 32px) - 3px) calc(clamp(20px, 2.5vw, 32px) - 3px) 0;
}
.scroll-arrow--right svg { left: 40%; }

.scroll-arrow--right:hover {
  background: linear-gradient(90deg, transparent 0%, #530e83 100%);
}

.scroll-arrow--left {
  left: calc(var(--feat-col-width, 220px) - 1px);
  background: linear-gradient(270deg, transparent 0%, #55326c 100%);
}
.scroll-arrow--left svg { left: 0%; }

.scroll-arrow--left:hover {
  background: linear-gradient(270deg, transparent 0%, #530e83 100%);
}

.scroll-arrow.is-visible { display: flex; }

.scroll-arrow svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}

.scroll-arrow:hover svg {
  stroke: #fff;
}


/* ── Pricing responsive ──────────────────────────────────────────── */
@media (max-width: 999px) {
  .pricing-shell { overflow: visible; }
  .pricing-shell-inner { overflow: visible; }

  .pricing-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: calc(clamp(20px, 2.5vw, 32px) - 3px);
  }

  .ptable {
    min-width: 0;
    table-layout: fixed;
    width: max-content;
  }

  .ptable col.col-feat { width: 220px; }
  .ptable col.col-tier { width: 150px; }

  .th-feat,
  .td-feat {
    position: sticky;
    left: 0;
    z-index: 3;
    background: rgb(11, 14, 24);
  }

  .th-feat::after,
  .td-feat::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
    width: 10px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent);
  }
}

.faq-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.faq-item {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--surface-soft-1), var(--surface-soft-2));
  border: 1px solid var(--surface-border);
}

.faq-item h3 {
  margin-bottom: 10px;
}

.faq-item p {
  color: var(--muted);
}

.cta {
  padding-bottom: 120px;
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  padding: 36px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--cta-bg-a), var(--cta-bg-b));
  border: 1px solid var(--cta-border);
}

.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer {
  padding: 40px 0 60px;
  border-top: 1px solid var(--footer-border);
}

.footer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  color: var(--muted);
}

.footer-brand {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.footer-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.footer a {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.footer a:hover {
  color: var(--text);
}

.footer a.footer-link--social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer a.footer-link--social svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer a.footer-link--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.footer a.footer-link--disabled:hover {
  color: var(--muted);
}

.footer-contact__prompt {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}

.footer-contact__line {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.footer-contact__line a {
  display: inline;
  margin: 0;
  color: var(--accent-2);
  font-size: inherit;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer-contact__line a:hover {
  color: var(--text-bright);
  text-shadow: 0 0 8px rgba(47, 255, 236, 0.35);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--footer-border);
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-copy {
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: 18px;
}

.footer-legal a {
  display: inline;
  margin: 0;
  font-size: 0.85rem;
}

.panel-mock {
  --panel-accent: var(--accent);
  position: relative;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--panel-bg-1), var(--panel-bg-2));
  border: 1px solid var(--surface-border);
  box-shadow: 0 30px 70px rgba(4, 6, 14, 0.55);
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  backdrop-filter: blur(10px);
}

.panel-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--panel-border-a), var(--panel-border-b), var(--panel-border-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
}

.panel-mock::after {
  content: attr(data-panel);
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--panel-label-color);
}

.panel-mock:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px rgba(4, 6, 14, 0.65);
}

.panel-hero {
  --panel-accent: var(--accent-2);
  min-height: 420px;
  animation: panelFloat 10s ease-in-out infinite;
}

.panel-navigator {
  --panel-accent: var(--accent-2);
}

.panel-sessions {
  --panel-accent: var(--accent);
}

.panel-collab {
  --panel-accent: var(--accent-2);
}

.panel-inspector {
  --panel-accent: var(--accent-3);
}

.panel-layout {
  --panel-accent: rgba(255, 255, 255, 0.4);
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-dots {
  display: flex;
  gap: 6px;
}

.panel-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--panel-dot-color);
}

.panel-tabs {
  display: flex;
  gap: 8px;
}

.panel-tabs span {
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: var(--panel-tab-color);
}

.panel-body {
  display: grid;
  gap: 16px;
}

.panel-split {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 10px;
}

.panel-chip {
  width: 40%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--panel-accent), var(--accent-2));
  box-shadow: 0 0 12px var(--panel-chip-glow);
}

.panel-row {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--panel-row-a), var(--panel-row-b));
  box-shadow: inset 0 0 0 1px var(--panel-row-border);
}

.panel-row.short {
  width: 70%;
}

.panel-list {
  display: grid;
  gap: 10px;
}

.panel-footer {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.panel-footer span {
  height: 6px;
  flex: 1;
  border-radius: 999px;
  background: var(--panel-footer-bar);
}

.panel-map {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 12px;
}

.panel-map span {
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--panel-map-a), var(--panel-map-b));
  border: 1px solid var(--panel-map-border);
  box-shadow: inset 0 0 0 1px var(--panel-map-glow);
}

.panel-stack {
  position: relative;
  min-height: 140px;
  display: grid;
  gap: 10px;
}

.stack-card {
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-avatars {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.panel-avatars span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(196, 85, 255, 0.6), rgba(47, 210, 255, 0.4));
}

.panel-columns {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-column {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}

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

/* Inside scroll-perspective sections, non-header children skip the
   blur/fade/translate reveal — the perspective system handles their entrance. */
.feature-section-frame > [data-reveal]:not(.section-header),
.feature-section-frame > .feature-copy > [data-reveal]:not(.section-header),
.feature-index-shell > .feature-index-columns [data-reveal],
.multi-feature-shell > .multi-feature-grid [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }
  33.333% {
    transform: translate(19px, -30px);
  }
  66.666% {
    transform: translate(-23px, 16px);
  }
}

@keyframes heroSweep {
  0%,
  100% {
    transform: translateX(-6%) rotate(-4deg);
    opacity: 0.4;
  }
  50% {
    transform: translateX(6%) rotate(-4deg);
    opacity: 0.75;
  }
}

@keyframes logoGhost {
  0%,
  100% {
    transform: translate(var(--ghost-x-start), var(--ghost-y-start));
  }
  50% {
    transform: translate(var(--ghost-x-mid), var(--ghost-y-mid));
  }
}

@keyframes logoScanPulse {
  0%,
  5% {
    left: -50px;
    opacity: 0;
    color: rgba(0, 212, 170, 0.95);
    filter: blur(0.8px) drop-shadow(0 0 4px rgba(0, 212, 170, 0.58));
  }
  10% {
    opacity: 1;
    color: rgba(0, 212, 170, 0.95);
    filter: blur(0.8px) drop-shadow(0 0 4px rgba(0, 212, 170, 0.58));
  }
  50% {
    color: rgba(140, 138, 185, 0.95);
    filter: blur(0.8px) drop-shadow(0 0 5px rgba(140, 138, 185, 0.58));
  }
  90% {
    opacity: 1;
    color: rgba(224, 64, 160, 0.95);
    filter: blur(0.8px) drop-shadow(0 0 5px rgba(224, 64, 160, 0.58));
  }
  95%,
  100% {
    left: 100%;
    opacity: 0;
    color: rgba(224, 64, 160, 0.95);
    filter: blur(0.8px) drop-shadow(0 0 5px rgba(224, 64, 160, 0.58));
  }
}

@keyframes signalPulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

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

@keyframes panelFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes heroDemoGlowOrbit {
  0% {
    transform: translate(65px, 0) scale(1.5);
  }
  12.5% {
    transform: translate(46px, 46px) scale(1.5);
  }
  25% {
    transform: translate(0, 65px) scale(1.5);
  }
  37.5% {
    transform: translate(-46px, 46px) scale(1.5);
  }
  50% {
    transform: translate(-65px, 0) scale(1.5);
  }
  62.5% {
    transform: translate(-46px, -46px) scale(1.5);
  }
  75% {
    transform: translate(0, -65px) scale(1.5);
  }
  87.5% {
    transform: translate(46px, -46px) scale(1.5);
  }
  100% {
    transform: translate(65px, 0) scale(1.5);
  }
}


@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--topbar-height) + 24px);
  }

  .hero-grid {
    /* At <=600 this is further narrowed by the rule below so the hero
       matches the section containers. */
    width: min(1200px, 90vw);
    margin-inline: auto;
    gap: 24px;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    margin-top: 0;
    max-width: none;
  }

  .hero-panel {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .hero-demo-wrap {
    width: 100%;
    justify-self: stretch;
    transform: none;
    margin-top: -28px;
  }

  .feature-index-columns {
    grid-template-columns: 1fr;
  }

  .feature-stream-shell {
    width: min(1200px, 90vw);
  }

  .feature-stream-link {
    white-space: normal;
  }

  .feature-stream-link:nth-child(even) {
    --feature-stream-indent: clamp(14px, 3vw, 34px);
  }
}

@media (max-width: 640px) {
  :root {
    --logo-lockup-width: min(92vw, 520px);
  }

  .hero-demo-wrap {
    margin-top: -16px;
  }

  .hero-demo-wrap {
    min-height: 300px;
    padding-inline: 0;
  }

  .hero-demo {
    width: min(100%, 520px);
  }

  .feature-index-shell {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .feature-index-link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .feature-index-bullet {
    width: 13px;
    height: 13px;
  }

  .feature-stream-shell {
    width: min(100%, 92vw);
    padding: 22px 18px;
    border-radius: 22px;
  }

  .feature-section {
    padding: 44px 0;
  }

  .multi-feature-shell {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .feature-stream-link,
  .feature-stream-link:nth-child(even) {
    --feature-stream-indent: 0px;
  }

  .feature-stream-link {
    gap: 10px;
    white-space: normal;
  }

  .feature-stream-bullet {
    width: 13px;
    height: 13px;
  }

  .feature-stream-bullet::after {
    width: 10px;
  }


  .cta-inner {
    padding: 24px;
  }

  .section-header {
    padding-left: 0;
  }

  .section-header::before {
    display: none;
  }

}

/* Mirror .container's mobile width override onto .hero-grid. Placed after
   the @media <=900px .hero-grid width rule so it wins on source-order at
   viewports <=600. Gives the hero the same near-edge-to-edge treatment as
   the section containers on small phones. */
@media (max-width: 600px) {
  .hero-grid {
    width: min(97.5vw, 90px + 75vw);
  }

  /* Pull the demo video in from the hero-grid edges to make room for the
     figure-8 float animation (app.js translates the wrap ±3% of its own
     width). Without this runway, at small phone widths where the hero
     gutter is ~5px the animation slides the video past the viewport edge. */
  .hero-demo-wrap {
    width: 92%;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}