/* ─────────────────────────────────────────────────────────────────
   MoveMatic v2 — design exploration
   Standalone stylesheet; does not depend on shared.css.
   Goal: less text, less identical-card-grid, more inline motion.
   ───────────────────────────────────────────────────────────────── */

:root {
  --bg:           #f6f3ec;     /* warm beige to match the new SU site palette */
  --surface:      #ffffff;
  --ink:          #14122a;
  --ink-2:        #5a577a;
  --line:         rgba(20, 18, 42, 0.10);

  --indigo:       #4f46e5;
  --indigo-light: #6c63ff;
  --violet:       #8b5cf6;
  --pink:         #ec4899;
  --pink-light:   #f472b6;
  --peach:        #ffb085;

  --grad-brand:   linear-gradient(135deg, #4f46e5 0%, #8b5cf6 50%, #ec4899 100%);
  --grad-text:    linear-gradient(120deg, #14122a 30%, #4f46e5 70%, #ec4899 100%);

  --shadow-sm:    0 2px 8px rgba(20, 18, 42, 0.06);
  --shadow-md:    0 12px 32px rgba(20, 18, 42, 0.08);
  --shadow-lg:    0 24px 60px rgba(20, 18, 42, 0.14);

  --radius:       18px;
  --radius-sm:    10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d0a1f;
    --surface:   #15122f;
    --ink:       #f5f3ff;
    --ink-2:     #aaa6cc;
    --line:      rgba(255, 255, 255, 0.10);
    --grad-text: linear-gradient(120deg, #f5f3ff 30%, #a5a0ff 70%, #ffb6d5 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  }
}

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

/* `overflow-x: hidden` on the root element along with body — applying
   it only to body can still leak a horizontal scrollbar in some
   browsers when a descendant has explicit width past the viewport. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Background gradient wash to feel "in motion" */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 90% -10%, rgba(236, 72, 153, 0.10), transparent 70%),
    radial-gradient(900px 600px at -10% 30%, rgba(79, 70, 229, 0.12), transparent 70%);
  pointer-events: none;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─────────────────── TOP NAV ─────────────────── */

.topnav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.back-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--indigo);
  font-weight: 500;
}
.back-home svg { width: 14px; height: 14px; }
.nav-sep { opacity: 0.4; }
.nav-title { color: var(--ink); font-weight: 600; }

main { display: block; }

/* ─────────────────── HERO ─────────────────── */

.hero {
  /* 1180px max + 32px padding matches every other section on the
     page (.topnav, .made-for, .feature-rows, .diff-grid, …) so the
     hero text column left-aligns with the rest of the content. */
  max-width: 1180px;
  margin: 40px auto 100px;
  padding: 0 32px;
  display: grid;
  /* `minmax(0, 1fr)` on the right track is critical: plain `1fr`
     defaults to `minmax(auto, 1fr)`, and that `auto` min would
     expand to the image's intrinsic 900px and collapse the text
     column. Explicit `0` min keeps the demo cell at its 1fr share
     and lets the oversized image overflow cleanly off-screen. */
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  overflow: visible;
}

.hero-text { max-width: 460px; }
.hero-icon img {
  display: block;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(48px, 6.5vw, 84px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  font-size: 21px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 32px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn-primary {
  color: #ffffff;
  background: var(--grad-brand);
  box-shadow: 0 10px 28px -6px rgba(79, 70, 229, 0.50);
}
.btn-primary:hover {
  box-shadow: 0 14px 36px -6px rgba(79, 70, 229, 0.65);
}
.btn-large { padding: 16px 36px; font-size: 17px; }

.micro {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 18px;
  opacity: 0.85;
}

/* "Watch the 60-second demo" — quiet inline play link beneath the
   hero CTAs. Indigo play chip + underline-on-hover text. Background
   is transparent so it reads as a link, not a third button. */
.watch-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 6px 4px 6px 0;
  background: transparent;
  border: none;
  color: var(--indigo);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius: 8px;
}
.watch-link:hover { text-decoration: underline; }
.watch-link:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 4px;
}
.watch-link-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  flex-shrink: 0;
}
.watch-link-play svg { width: 10px; height: 10px; transform: translateX(1px); }

/* ─────────────────── VIDEO LIGHTBOX ───────────────────
   Fixed full-viewport overlay. Backdrop is dimmed + blurred. The
   card scales the video to viewport with a max width so it stays
   readable on large monitors. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lightboxIn 180ms ease-out;
}
.video-lightbox[hidden] { display: none; }
.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 12, 30, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.video-lightbox-card {
  position: relative;
  width: 100%;
  max-width: 1100px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}
.video-lightbox-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
}
.video-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.video-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.video-lightbox-close svg { width: 14px; height: 14px; }

@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* HERO SCREENSHOT — light/dark <picture> pair (real MoveMatic editor).
   The screenshot is rendered with its own window chrome (rounded corners,
   traffic lights) and baked-in drop shadow, so the container adds no
   border-radius or shadow on top — those would double up and look fake.

   Explicit large width (well past its grid cell) so the image
   overflows the right side of the layout and bleeds off the viewport.
   The grid item ignores the column's narrower track since width is
   explicit; body's overflow-x: hidden clips the off-screen portion. */
.hero-demo {
  width: 900px;
  max-width: none;
}
.hero-demo picture,
.hero-demo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────────── KICKER (small section labels) ─────────────────── */

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.kicker.centered { text-align: center; }

/* ─────────────────── MADE FOR ─────────────────── */

.made-for {
  max-width: 1180px;
  margin: 0 auto 110px;
  padding: 0 32px;
}

.use-cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.use-case {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.use-case:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.use-vis {
  height: 180px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .use-vis {
    background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 1: App Store preview video — iPhone with content cycling
   ═══════════════════════════════════════════════════════════════ */
.phone-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 86px; height: 158px;
  margin: -79px 0 0 -43px;
  background: #14122a;
  border-radius: 18px;
  padding: 4px;
  box-shadow: 0 12px 24px rgba(20, 18, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone-notch {
  position: absolute;
  top: 7px; left: 50%;
  width: 26px; height: 5px;
  margin-left: -13px;
  background: #14122a;
  border-radius: 3px;
  z-index: 2;
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  border-radius: 14px;
  padding: 14px 8px 10px;
  overflow: hidden;
}

.phone-app-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--grad-brand);
  margin: 4px auto 8px;
  box-shadow: 0 3px 6px rgba(79, 70, 229, 0.35);
  animation: phoneIconPop 5s infinite ease-out;
}
@keyframes phoneIconPop {
  0%, 8%   { transform: scale(0.5); opacity: 0; }
  18%      { transform: scale(1.1); opacity: 1; }
  28%, 100%{ transform: scale(1);   opacity: 1; }
}

.phone-headline {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;     /* stack vertically — phone is too narrow for the words side-by-side */
  align-items: center;
  gap: 1px;
}
.phone-word {
  display: block;
  opacity: 0;
  transform: translateY(6px);
}
.phone-w1 { animation: phoneWord 5s infinite ease-out; animation-delay: 0.3s; }
.phone-w2 { animation: phoneWord 5s infinite ease-out; animation-delay: 0.9s; }
.phone-w3 {
  animation: phoneWord 5s infinite ease-out;
  animation-delay: 1.5s;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes phoneWord {
  0%, 6%   { opacity: 0; transform: translateY(6px); }
  16%, 78% { opacity: 1; transform: translateY(0); }
  92%, 100%{ opacity: 0; transform: translateY(-4px); }
}

.phone-sub {
  height: 4px;
  width: 80%;
  background: var(--ink-2);
  opacity: 0.25;
  border-radius: 2px;
  margin: 4px auto 8px;
}

.phone-progress {
  position: absolute;
  left: 8px; right: 8px;
  bottom: 12px;
  height: 3px;
  background: rgba(20, 18, 42, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.phone-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--grad-brand);
  transform-origin: left;
  transform: scaleX(0);
  animation: phoneProgress 5s infinite linear;
}
@keyframes phoneProgress {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 2: Product demo window — UI with cursor → button + callout
   ═══════════════════════════════════════════════════════════════ */
.demo-window {
  position: absolute;
  inset: 18px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(20, 18, 42, 0.10), 0 0 0 1px var(--line);
  overflow: hidden;
}
.demo-window-bar {
  height: 16px;
  background: linear-gradient(180deg, #f0eef5 0%, #e6e3ee 100%);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
}
.win-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.win-dot--red    { background: #ff5f57; }
.win-dot--yellow { background: #febc2e; }
.win-dot--green  { background: #28c840; }

.demo-content {
  display: flex;
  height: calc(100% - 16px);
}
.demo-sidebar {
  width: 32%;
  padding: 8px 6px;
  background: #faf8ff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.demo-sidebar-row {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-2);
  opacity: 0.3;
}
.demo-sidebar-row.active {
  background: var(--indigo);
  opacity: 1;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

.demo-main {
  flex: 1;
  padding: 10px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.demo-main-title {
  height: 7px;
  width: 70%;
  background: var(--ink);
  opacity: 0.7;
  border-radius: 3px;
}
.demo-main-row {
  height: 4px;
  width: 100%;
  background: var(--ink-2);
  opacity: 0.3;
  border-radius: 2px;
}
.demo-main-row.short { width: 65%; }
/* Button positioned higher in main area + centered horizontally so
   the cursor has a stable, predictable target to land on. */
.demo-main-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 9px;
  padding: 4px 10px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
  animation: demoBtnPulse 4s infinite ease-out;
}
/* All button keyframes carry the centering translate so the button
   stays anchored to (50%, 50%) of .demo-main throughout the scale anim. */
@keyframes demoBtnPulse {
  0%, 55%   { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3); }
  65%       { transform: translate(-50%, -50%) scale(0.92); box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2); }
  75%       { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.55); }
  85%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3); }
}

.demo-callout {
  position: absolute;
  top: 22px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  animation: demoCallout 4s infinite ease-out;
}
.demo-callout-dot {
  width: 6px; height: 6px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}
.demo-callout-line {
  width: 16px;
  height: 1.5px;
  background: var(--pink);
}
.demo-callout-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--pink);
  background: #ffffff;
  border: 1px solid var(--pink);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
@keyframes demoCallout {
  0%, 18%  { opacity: 0; transform: translateX(8px); }
  28%, 80% { opacity: 1; transform: translateX(0); }
  92%, 100%{ opacity: 0; transform: translateX(4px); }
}

/* Cursor lands with its pointer tip on the button center. The tip
   inside the SVG sits at viewBox (2, 2) of (0 0 18 22), so it's
   offset ~1.3px right and ~1.3px down from the cursor element's
   top-left. Cursor element top: 55% / left: 65% puts the tip at
   roughly (66%, 56%) of the window — same point as the button's
   center given the sidebar+main layout. */
.demo-window-cursor {
  position: absolute;
  width: 12px; height: 14px;
  top: 100%; left: 90%;
  z-index: 4;
  animation: demoCursor 4s infinite ease-in-out;
}
.demo-window-cursor svg { width: 100%; height: 100%; }
@keyframes demoCursor {
  0%       { top: 95%; left: 92%; opacity: 0; }
  15%      { top: 82%; left: 80%; opacity: 1; }
  60%, 85% { top: 55%; left: 65%; opacity: 1; }
  100%     { top: 95%; left: 92%; opacity: 0; }
}

/* Pulse ring centers on the button center via negative margins
   (half the ring's width/height) so the existing scale animation
   can stay on the transform property without conflicting. */
.demo-window-pulse {
  position: absolute;
  width: 16px; height: 16px;
  top: 56%; left: 66%;
  margin-top: -8px; margin-left: -8px;
  border: 2px solid var(--pink);
  border-radius: 50%;
  opacity: 0;
  animation: demoPulseRing 4s infinite ease-out;
}
@keyframes demoPulseRing {
  0%, 60%  { opacity: 0; transform: scale(0.6); }
  68%      { opacity: 0.9; transform: scale(1); }
  84%      { opacity: 0; transform: scale(3); }
  100%     { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 3: Social marketing — 1:1 square post with text + emoji.
   Square aspect (vs. the iPhone preview's 9:16) signals "feed post"
   and reads distinctly from the App Store card in the same row.
   ═══════════════════════════════════════════════════════════════ */
.reel-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  margin: -70px 0 0 -70px;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 50%, #ec4899 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.30);
}

.reel-burst {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5), transparent 55%);
  opacity: 0;
  animation: reelBurst 3.6s infinite ease-out;
}
@keyframes reelBurst {
  0%   { opacity: 0; transform: scale(0.4); }
  18%  { opacity: 0.95; transform: scale(0.85); }
  45%  { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}

.reel-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #ffffff;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  padding-bottom: 18px;  /* lift text above the CTA */
}
.reel-line {
  display: block;
  opacity: 0;
  transform: translateY(8px) scale(0.85);
}
.reel-text .reel-line:nth-child(1) {
  animation: reelLine 3.6s infinite ease-out;
  animation-delay: 0.15s;
}
.reel-text .reel-line:nth-child(2) {
  animation: reelLine 3.6s infinite ease-out;
  animation-delay: 0.5s;
  background: linear-gradient(135deg, #fff3cf 0%, #ffd070 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
@keyframes reelLine {
  0%, 5%    { opacity: 0; transform: translateY(8px) scale(0.85); }
  18%, 70%  { opacity: 1; transform: translateY(0) scale(1); }
  86%, 100% { opacity: 0; transform: translateY(-4px) scale(0.95); }
}

.reel-emoji {
  position: absolute;
  font-size: 16px;
  opacity: 0;
  animation: reelEmoji 3.6s infinite ease-out;
}
/* Anchor emoji in the 4 corners of the square. */
.reel-emoji--1 { top: 10px;  left: 10px;  animation-delay: 0.3s; }
.reel-emoji--2 { top: 10px;  right: 10px; animation-delay: 0.55s; }
.reel-emoji--3 { bottom: 38px; left: 10px; animation-delay: 0.8s; }
@keyframes reelEmoji {
  0%, 5%    { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  18%       { opacity: 1; transform: scale(1.15) rotate(0deg); }
  30%       { opacity: 1; transform: scale(1); }
  70%       { opacity: 1; transform: scale(1) translateY(-6px) rotate(8deg); }
  90%, 100% { opacity: 0; transform: scale(0.9) translateY(-12px); }
}

.reel-cta {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: #ffffff;
  color: var(--indigo);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
  opacity: 0;
  animation: reelCta 3.6s infinite ease-out;
  animation-delay: 0.9s;
}
@keyframes reelCta {
  0%, 25%   { opacity: 0; transform: translate(-50%, 10px); }
  38%       { opacity: 1; transform: translate(-50%, -2px); }
  44%       { opacity: 1; transform: translate(-50%, 0); }
  80%       { opacity: 1; transform: translate(-50%, 0); }
  92%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 4: Presentation — slide with hand-drawn arrow + label
   ═══════════════════════════════════════════════════════════════ */
.present-slide {
  position: absolute;
  inset: 16px;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 16px rgba(20, 18, 42, 0.10), 0 0 0 1px var(--line);
  overflow: hidden;
}
.slide-title-bar {
  height: 7px;
  width: 60%;
  background: var(--ink);
  opacity: 0.85;
  border-radius: 3px;
  margin-bottom: 5px;
}
.slide-title-bar.short {
  width: 40%;
  opacity: 0.4;
  margin-bottom: 12px;
}

.slide-bullets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slide-bullet {
  height: 4px;
  width: 80%;
  background: var(--ink-2);
  opacity: 0.35;
  border-radius: 2px;
  position: relative;
  padding-left: 8px;
}
.slide-bullet i {
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--indigo);
}
.slide-bullet:nth-child(2) { width: 65%; }
.slide-bullet:nth-child(3) { width: 75%; }

.slide-target {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35);
  letter-spacing: -0.01em;
  animation: slideTargetPulse 5s infinite ease-out;
}
@keyframes slideTargetPulse {
  0%, 60%  { transform: scale(1); box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35); }
  72%      { transform: scale(1.1); box-shadow: 0 6px 16px rgba(236, 72, 153, 0.6); }
  84%, 100%{ transform: scale(1); box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35); }
}

.slide-arrow {
  position: absolute;
  bottom: 14px;
  left: 8px;
  width: 75%;
  height: 60%;
  pointer-events: none;
}
/* Slightly shorter dash budget for the new shorter path. */
.slide-arrow-path {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: slideArrowDraw 5s infinite ease-out;
}
/* Rounded V arrowhead that grows out from the line endpoint via
   scaleX, matching the language of the arrows-that-draw-themselves
   card. The outer <g> handles placement + tangent rotation; this
   inner group receives only the scaleX. */
.slide-arrow-head {
  opacity: 0;
  animation: slideArrowHead 5s infinite ease-out;
}
@keyframes slideArrowDraw {
  0%, 10%   { stroke-dashoffset: 180; }
  42%       { stroke-dashoffset: 0; }
  78%       { stroke-dashoffset: 0; }
  90%, 100% { stroke-dashoffset: 180; }
}
@keyframes slideArrowHead {
  0%, 30%   { opacity: 0; transform: scaleX(0); }
  42%       { opacity: 1; transform: scaleX(1); }
  78%       { opacity: 1; transform: scaleX(1); }
  92%, 100% { opacity: 0; transform: scaleX(0); }
}

/* Sits between the arrow's endpoint and the Upgrade button, in the
   empty gap the shortened arrow leaves. Labels the button without
   overlapping either the arrow path or the button. */
.slide-handwrite {
  position: absolute;
  bottom: 50px;
  right: 12px;
  font-family: "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
  transform: rotate(-8deg);
  transform-origin: center;
  opacity: 0;
  animation: slideHandwrite 5s infinite ease-out;
}
@keyframes slideHandwrite {
  0%, 48%   { opacity: 0; transform: rotate(-8deg) translateY(6px) scale(0.7); }
  60%       { opacity: 1; transform: rotate(-8deg) translateY(0) scale(1.1); }
  68%       { opacity: 1; transform: rotate(-8deg) translateY(0) scale(1); }
  80%       { opacity: 1; }
  90%, 100% { opacity: 0; }
}

.use-case h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 18px 22px 6px;
}
.use-case p {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ─────────────────── FEATURE ROWS (zigzag) ───────────────────
   Four alternating left/right rows: visibility spans, ripple
   timeline, procedural behaviors, multi-scene documents.
   All flat (no card containers) so the zigzag reads as a unified
   sequence rather than mixed treatments. */

.feature-rows {
  max-width: 1180px;
  margin: 0 auto 80px;
  padding: 0 32px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 120px;
}
.feature-row:last-child { margin-bottom: 0; }

/* Reversed rows: demo first in source, text second; visual order
   stays left-to-right via grid-auto-flow. */
.feature-row.reverse > :first-child { grid-column: 1; }
.feature-row.reverse > :last-child  { grid-column: 2; }

.feature-text h2 {
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 22px;
}
.feature-text h2 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feature-text p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 14px;
}
.feature-text p:last-child { margin-bottom: 0; }
.feature-text kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: #f6f3ec;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .feature-text kbd { background: rgba(255, 255, 255, 0.08); }
}

.feature-demo {
  position: relative;
  min-height: 280px;
}
.span-timeline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.span-track {
  position: relative;
  height: 60px;
  background: #f6f3ec;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .span-track { background: rgba(255, 255, 255, 0.04); }
}
.span-intro {
  position: absolute;
  left: 5%; top: 12px; bottom: 12px;
  width: 18%;
  background: linear-gradient(90deg, transparent 0%, var(--indigo) 100%);
  border-radius: 4px;
}
.span-body {
  position: absolute;
  left: 23%; top: 12px; bottom: 12px;
  width: 54%;
  background: var(--indigo);
  border-radius: 4px;
}
.span-outro {
  position: absolute;
  left: 77%; top: 12px; bottom: 12px;
  width: 18%;
  background: linear-gradient(90deg, var(--indigo) 0%, transparent 100%);
  border-radius: 4px;
}
.span-playhead {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2px;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
  left: 5%;
  animation: playhead 4.5s infinite ease-in-out;
}
@keyframes playhead {
  0%   { left: 4%;  }
  100% { left: 96%; }
}

.span-stage {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-color-scheme: dark) {
  .span-stage { background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%); }
}
.span-object {
  padding: 22px 36px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.85);
  animation: spanObject 4.5s infinite ease-out;
}
@media (prefers-color-scheme: dark) {
  /* Lift the card off the dark stage so the title doesn't sit on a
     near-black background — `--surface` in dark mode is the same
     deep tone as the page card surfaces. Adding a subtle inner
     border keeps the card edge readable against the gradient stage. */
  .span-object { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); }
}
@keyframes spanObject {
  /* Mirror the playhead: intro from 4-23%, body 23-77%, outro 77-96% */
  0%, 4%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  23%      { opacity: 1; transform: scale(1)    translateY(0);    }
  77%      { opacity: 1; transform: scale(1)    translateY(0);    }
  96%, 100%{ opacity: 0; transform: scale(0.92) translateY(-10px);}
}

/* ─────────────────── ROW 2 DEMO: ripple bars ─────────────────── */

.ripple-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 24px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ripple-bar {
  height: 48px;
  flex: 0 0 calc(var(--w) * 1.3%);
  background: var(--grad-brand);
  border-radius: 6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  transform: translateX(0);
  animation: ripple 4s infinite ease-in-out;
}
.ripple-bar:nth-child(1) { animation-delay: 0.5s; }
.ripple-bar.move        { animation-delay: 0s; animation-name: rippleMover; }
.ripple-bar:nth-child(3) { animation-delay: 0.5s; }
.ripple-bar:nth-child(4) { animation-delay: 0.5s; }

@keyframes ripple {
  0%, 30%  { transform: translateX(0); }
  50%, 80% { transform: translateX(36px); }
  100%     { transform: translateX(0); }
}
@keyframes rippleMover {
  0%, 25%  { transform: translateX(0); box-shadow: 0 0 0 rgba(236, 72, 153, 0); }
  45%, 75% { transform: translateX(36px); box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); }
  100%     { transform: translateX(0); }
}

.ripple-cap {
  margin-top: 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}

/* ─────────────────── ROW 3 DEMO: procedural behaviors rack ───────────────────
   Three "tracks" stacked, each showing a property + behavior label
   on the left and a shape continuously animating on the right. */

.behaviors-rack {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.behavior-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 14px 14px 18px;
  background: #f6f3ec;
  border-radius: 10px;
  border: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  .behavior-row { background: rgba(255, 255, 255, 0.04); }
}
.behavior-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.behavior-prop {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.behavior-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--indigo);
}
.behavior-stage {
  position: relative;
  height: 46px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .behavior-stage { background: rgba(255, 255, 255, 0.04); }
}
.behavior-shape {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 8px;
  background: var(--grad-brand);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.30);
}
.behavior-shape--wiggle {
  left: 50%;
  margin-left: -16px;
  animation: behWiggle 1.5s infinite ease-in-out;
}
.behavior-shape--oscillate {
  left: 50%;
  margin-left: -16px;
  border-radius: 6px;
  animation: behOscillate 2s infinite ease-in-out;
}
.behavior-shape--shake {
  left: 50%;
  margin-left: -16px;
  clip-path: polygon(50% 4%, 95% 92%, 5% 92%);
  background: var(--grad-brand);
  animation: behShake 0.32s infinite ease-in-out;
}

/* ─── PROCEDURAL PRIMITIVES (cursor, follow, hotspot) ─── */

/* Cursor that follows an invisible path between two hotspots */
.prim-hotspot {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--indigo) 20%, transparent);
  border: 2px solid var(--indigo);
}
.prim-hotspot--start { left: 14px; }
.prim-hotspot--end   { right: 14px; }
.prim-cursor {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 12px; height: 14px;
  margin-top: -3px;
  animation: primCursorPath 3s infinite ease-in-out;
}
@keyframes primCursorPath {
  0%, 100% { left: 14px; top: 50%; transform: translateY(-3px); }
  50%      { left: calc(100% - 26px); top: 50%; transform: translateY(-3px); }
}

/* Follow Layer: a small dot trails behind a moving leader shape */
.prim-leader {
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  border-radius: 6px;
  background: var(--grad-brand);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.30);
  animation: primLeader 3s infinite ease-in-out;
  left: 18px;
}
.prim-follower {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 6px rgba(236, 72, 153, 0.50);
  animation: primFollower 3s infinite ease-in-out;
  left: 18px;
}
@keyframes primLeader {
  0%, 100% { left: 18px; }
  50%      { left: calc(100% - 40px); }
}
@keyframes primFollower {
  /* Same path as the leader, slightly delayed via a different
     interpolation curve — gives the trailing effect. */
  0%, 100% { left: 18px; }
  6%       { left: 18px; }   /* lag at start */
  56%      { left: calc(100% - 40px); }   /* still behind at midpoint */
  100%     { left: 18px; }
}

@keyframes behWiggle {
  0%, 100% { transform: rotate(0deg);   }
  25%      { transform: rotate(-22deg); }
  50%      { transform: rotate(8deg);   }
  75%      { transform: rotate(-12deg); }
}
@keyframes behOscillate {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px);  }
}
@keyframes behShake {
  0%, 100% { transform: scale(1)    translateX(0);   }
  25%      { transform: scale(1.08) translateX(-2px);}
  50%      { transform: scale(0.94) translateX(2px); }
  75%      { transform: scale(1.06) translateX(-1px);}
}

/* ─────────────────── ROW 4 DEMO: multi-scene deck + audio bed ───────────────────
   Three mini "scenes" in a row connected by transition labels,
   with an audio-waveform strip below and a playhead sweeping
   across that highlights the active scene. */

.scenes-deck {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.scene-mini {
  position: relative;
  height: 90px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: sceneActive 6s infinite ease-in-out;
}
.scene-mini:nth-of-type(1) { animation-delay: 0s; }
.scene-mini:nth-of-type(3) { animation-delay: 2s; }
.scene-mini:nth-of-type(5) { animation-delay: 4s; }
@keyframes sceneActive {
  0%, 25%      { transform: scale(1);    box-shadow: 0 2px 4px rgba(20, 18, 42, 0.04); }
  4%, 14%      { transform: scale(1.06); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25); }
  100%         { transform: scale(1);    box-shadow: 0 2px 4px rgba(20, 18, 42, 0.04); }
}
@media (prefers-color-scheme: dark) {
  .scene-mini { background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%); }
}

/* Scene 1 — title-style content */
.scene-mini-line {
  height: 6px;
  background: var(--ink);
  opacity: 0.7;
  border-radius: 3px;
}
.scene-mini-line.short {
  width: 70%;
  opacity: 0.35;
}
.scene-mini-btn {
  margin-top: 6px;
  width: 40%;
  height: 12px;
  background: var(--grad-brand);
  border-radius: 6px;
}

/* Scene 2 — image placeholder */
.scene-mini--alt {
  align-items: center;
  justify-content: center;
}
.scene-mini-img {
  width: 60%;
  height: 60%;
  background: var(--grad-brand);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.30);
}

/* Scene 3 — CTA */
.scene-mini--cta {
  align-items: center;
  justify-content: center;
}
.scene-mini-cta {
  width: 70%;
  height: 24px;
  background: var(--grad-brand);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
}

/* Transition labels between scenes */
.scene-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
}
.scene-trans-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scene-transition svg {
  width: 26px;
  height: 12px;
  color: var(--indigo);
}

/* Audio strip below the scenes */
.scenes-audio {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 12px 20px;
  box-shadow: var(--shadow-sm);
}
.audio-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  gap: 3px;
}
.audio-bars span {
  flex: 1;
  background: var(--indigo);
  border-radius: 2px;
  opacity: 0.6;
  animation: audioBar 1.2s infinite ease-in-out;
}
.audio-bars span:nth-child(1)  { height: 30%; animation-delay: 0.0s; }
.audio-bars span:nth-child(2)  { height: 55%; animation-delay: 0.05s; }
.audio-bars span:nth-child(3)  { height: 80%; animation-delay: 0.10s; }
.audio-bars span:nth-child(4)  { height: 45%; animation-delay: 0.15s; }
.audio-bars span:nth-child(5)  { height: 70%; animation-delay: 0.20s; }
.audio-bars span:nth-child(6)  { height: 25%; animation-delay: 0.25s; }
.audio-bars span:nth-child(7)  { height: 90%; animation-delay: 0.30s; }
.audio-bars span:nth-child(8)  { height: 50%; animation-delay: 0.35s; }
.audio-bars span:nth-child(9)  { height: 35%; animation-delay: 0.40s; }
.audio-bars span:nth-child(10) { height: 75%; animation-delay: 0.45s; }
.audio-bars span:nth-child(11) { height: 60%; animation-delay: 0.50s; }
.audio-bars span:nth-child(12) { height: 40%; animation-delay: 0.55s; }
.audio-bars span:nth-child(13) { height: 85%; animation-delay: 0.60s; }
.audio-bars span:nth-child(14) { height: 30%; animation-delay: 0.65s; }
.audio-bars span:nth-child(15) { height: 65%; animation-delay: 0.70s; }
.audio-bars span:nth-child(16) { height: 50%; animation-delay: 0.75s; }
.audio-bars span:nth-child(17) { height: 70%; animation-delay: 0.80s; }
.audio-bars span:nth-child(18) { height: 35%; animation-delay: 0.85s; }
.audio-bars span:nth-child(19) { height: 55%; animation-delay: 0.90s; }
.audio-bars span:nth-child(20) { height: 25%; animation-delay: 0.95s; }
.audio-bars span:nth-child(21) { height: 60%; animation-delay: 1.00s; }
.audio-bars span:nth-child(22) { height: 80%; animation-delay: 1.05s; }
.audio-bars span:nth-child(23) { height: 40%; animation-delay: 1.10s; }
.audio-bars span:nth-child(24) { height: 70%; animation-delay: 1.15s; }
.audio-bars span:nth-child(25) { height: 30%; animation-delay: 1.20s; }
@keyframes audioBar {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.1); }
}

.audio-playhead {
  position: absolute;
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  left: 5%;
  animation: audioPlayhead 6s infinite linear;
}
@keyframes audioPlayhead {
  0%   { left: 5%;  }
  100% { left: 95%; }
}

/* ─────────────────── DIFFERENTIATORS GRID ─────────────────── */

.diff-grid {
  max-width: 1180px;
  margin: 0 auto 110px;
  padding: 0 32px;
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.diff-grid > .kicker {
  grid-column: 1 / -1;
}

.diff-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.diff-vis {
  height: 160px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .diff-vis {
    background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%);
  }
}
.diff-card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 20px 22px 6px;
}
.diff-card p {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* PULSE diff visual */
.pulse-circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  background: var(--grad-brand);
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(79, 70, 229, 0.30);
  animation: pulseBeat 2s infinite ease-out;
}
.pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border: 3px solid var(--pink);
  border-radius: 50%;
  opacity: 0;
  animation: pulseRing 2s infinite ease-out;
}
@keyframes pulseBeat {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.18); }
  25%      { transform: scale(1); }
}
@keyframes pulseRing {
  0%   { opacity: 0.7; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* CAMERA ZOOM diff visual */
.zoom-window {
  position: absolute;
  inset: 20px;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(20, 18, 42, 0.10);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  /* Inner border keeps the panel edge visible against the dark
     gradient when both share the same deep tone. */
  .zoom-window {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--line);
  }
}
.zoom-detail {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  background: var(--grad-brand);
  border-radius: 6px;
  animation: zoomDetail 4s infinite ease-in-out;
}
.zoom-frame {
  position: absolute;
  inset: 25% 30%;
  border: 2px dashed var(--pink);
  border-radius: 6px;
  animation: zoomFrame 4s infinite ease-in-out;
}
@keyframes zoomDetail {
  0%, 25%  { transform: scale(1); }
  50%, 75% { transform: scale(2.3); }
  100%     { transform: scale(1); }
}
@keyframes zoomFrame {
  0%, 25%  { opacity: 0.5; }
  50%, 75% { opacity: 0; transform: scale(2); }
  100%     { opacity: 0.5; transform: scale(1); }
}

/* PARTICLES diff visual */
.particles-emitter {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
}
.particle-source {
  position: absolute;
  top: -22px; left: -22px;
  width: 44px; height: 44px;
  background: var(--grad-brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 8px 16px rgba(79, 70, 229, 0.30);
}
/* Per-particle CSS variables (set inline in HTML):
   --angle  emission direction
   --dist   how far it travels before fading
   --size   particle diameter
   --color  base color (also used for the matching glow halo)
   --delay  animation-delay
   Animation: tiny → full size → travel out → fade. */
.p-particle {
  position: absolute;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: var(--color, #ec4899);
  box-shadow: 0 0 6px var(--color, #ec4899);
  opacity: 0;
  animation: emitter 2.4s infinite ease-out;
  animation-delay: var(--delay, 0s);
}
@keyframes emitter {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  12%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% {
    opacity: 0;
    transform: translate(
      calc(cos(var(--angle)) * var(--dist, 55px)),
      calc(sin(var(--angle)) * var(--dist, 55px))
    ) scale(0.2);
  }
}

/* Emission pulse ring from the source. Two are staggered so the
   pulses overlap and feel continuous. */
.emit-pulse {
  position: absolute;
  top: -22px; left: -22px;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 2px solid #ec4899;
  opacity: 0;
  animation: emitPulse 2.4s infinite ease-out;
  animation-delay: var(--delay, 0s);
}
@keyframes emitPulse {
  0%   { opacity: 0.7; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* ─────────────────── DIFF-CARD STATIC VISUALS ───────────────────
   Three of the diff-cards (layer kinds, mix & match, trim sheet)
   use static-illustration visuals instead of animated demos —
   they're the "this is what you get" survey features rather than
   conceptual hooks, so motion would feel noisy. */

/* kbd inside any diff-card paragraph */
.diff-card kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #f6f3ec;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .diff-card kbd { background: rgba(255, 255, 255, 0.08); }
}

/* ANIMATED ARROWS — two curved arrows that draw themselves on,
   each with an anchor dot at the start and an arrowhead that
   pops in when the stroke finishes. */
.arrows-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8px;
}

.arr-path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: arrowDraw 5s infinite ease-in-out;
}
.arr-path--1 { animation-delay: 0s; }
.arr-path--2 { animation-delay: 0.6s; }

/* Arrowheads grow out of the line's endpoint via a horizontal scale.
   Each arrowhead is wrapped in a <g> with an SVG transform="translate(...)"
   placing the group's local (0,0) at the line endpoint. The path inside
   uses LOCAL coordinates relative to that endpoint. CSS scaleX(0) on the
   group then collapses the V back to its base point on top of the line
   end; scaleX(1) extends it to the tip. Wrapping in a translated group
   sidesteps inconsistent browser support for CSS transform-origin on
   raw SVG path elements. */
.arr-head {
  opacity: 0;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.arr-head--1 {
  animation-name: arrowHead1;
  animation-delay: 0s;
}
.arr-head--2 {
  animation-name: arrowHead2;
  animation-delay: 0.6s;
}

.arr-anchor {
  opacity: 0;
  animation: arrowAnchor 5s infinite ease-out;
}
.arr-anchor--1 { animation-delay: 0s; }
.arr-anchor--2 { animation-delay: 0.6s; }

@keyframes arrowDraw {
  0%, 4%    { stroke-dashoffset: 240; }
  42%       { stroke-dashoffset: 0; }
  78%       { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 240; }
}
/* Arrowheads grow out of the line end as the stroke completes.
   The outer SVG <g> handles placement (via the transform attribute);
   THIS inner group receives only the CSS scaleX animation. Since the
   inner group sits at local (0, 0) — which the outer translate maps
   to the line endpoint — scaleX(0) collapses the V at the line end
   and scaleX(1) extends it out to the tip. One keyframe set, both
   arrows use it. */
.arr-head--1,
.arr-head--2 { animation-name: arrowHead; }

@keyframes arrowHead {
  0%, 30%   { opacity: 0; transform: scaleX(0); }
  42%       { opacity: 1; transform: scaleX(1); }
  78%       { opacity: 1; transform: scaleX(1); }
  92%, 100% { opacity: 0; transform: scaleX(0); }
}
@keyframes arrowAnchor {
  0%, 1%    { opacity: 0; transform: scale(0.4); }
  6%        { opacity: 1; transform: scale(1.3); }
  10%, 78%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.8); }
}

/* MIX & MATCH — four tiles whose fills cycle (light animation) */
.mix-match {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: center;
}
.mm-tile {
  height: 70px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  background-size: 200% 200%;
  animation: mmShuffle 6s infinite ease-in-out;
}
.mm-tile--1 {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  animation-delay: 0s;
}
.mm-tile--2 {
  background: linear-gradient(135deg, var(--violet), var(--pink));
  animation-delay: 1.5s;
}
.mm-tile--3 {
  background: linear-gradient(135deg, var(--pink), var(--peach));
  animation-delay: 3s;
}
.mm-tile--4 {
  background: linear-gradient(135deg, var(--peach), var(--indigo));
  animation-delay: 4.5s;
}
@keyframes mmShuffle {
  0%, 100% { transform: scale(1) translateY(0); filter: hue-rotate(0deg); }
  20%      { transform: scale(0.92) translateY(2px); }
  40%      { transform: scale(1.04) translateY(-4px); filter: hue-rotate(40deg); }
  60%      { transform: scale(1)    translateY(0);  filter: hue-rotate(20deg); }
}

/* TRIM SHEET — horizontal filmstrip with In/Out handles bracketing
   a highlighted clip range. Pure layout, no animation. */
.trim-sheet {
  position: absolute;
  inset: 0;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trim-strip {
  display: flex;
  gap: 2px;
  height: 56px;
  padding: 4px;
  background: var(--surface);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.trim-frame {
  flex: 1;
  background: linear-gradient(135deg, #c7c0e6 0%, #d6cce6 100%);
  border-radius: 2px;
  opacity: 0.55;
}
.trim-frame--in,
.trim-frame--mid,
.trim-frame--out {
  background: var(--grad-brand);
  opacity: 1;
}
.trim-handle {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 22px;
  border-radius: 5px;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.40);
  z-index: 2;
}
/* Within .trim-strip the strip is `display: flex; padding: 4px;` so
   the inner usable width starts ~4px in. Position the handles so they
   bracket frames 3 (In) and 7 (Out) in the 9-frame strip. */
.trim-handle--in  { left: 24%; }
.trim-handle--out { right: 24%; }

/* ─────────────────── CTA + SUPPORT (combined) ───────────────────
   Single closing card. Reading order: heading → subhead → small
   requirements line → buttons → quiet support-link row. Putting
   the requirements line ABOVE the buttons gets it out of the
   button drop-shadows where it was being muddied. */

.cta-end {
  /* Align with the content INSIDE the 1180px rail, not the rail
     itself — every other section is `max-width: 1180px; padding: 0
     32px`, so its content sits at 1116px. The CTA card has its own
     internal padding, so set its outer width to match where the
     content above (use-case tiles, feature rows, diff cards) sits. */
  max-width: 1116px;
  margin: 0 auto 80px;
  padding: 56px 48px 44px;
  text-align: center;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
}
.cta-end h2 {
  font-size: clamp(34px, 4.8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.cta-end .cta-sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 12px;
}
.cta-end .cta-req {
  font-size: 13px;
  color: var(--ink-2);
  opacity: 0.7;
  margin: 0 auto 28px;
  letter-spacing: 0.01em;
}
.cta-end .cta {
  justify-content: center;
  margin-bottom: 36px;
}

/* Quiet support link row at the bottom of the CTA card.
   Replaces the separate Support section — three small links
   with bullet separators. Sits well clear of the button shadows. */
.cta-support {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.cta-support a {
  color: var(--indigo);
  text-decoration: none;
  font-weight: 500;
}
.cta-support a:hover { text-decoration: underline; }
.cta-support span { opacity: 0.4; }

/* ─────────────────── FOOTER ─────────────────── */

.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
}

/* ─────────────────── RESPONSIVE ─────────────────── */

@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  /* `min-width: 0` lets grid items shrink below their min-content
     size — without it, the implicit min-width: auto on grid items
     can keep the track at the heading's longest-word width and
     push wrap points past the viewport edge. */
  .hero-text,
  .hero-demo { min-width: 0; max-width: 100%; }
  /* Override the desktop's explicit 900px on .hero-demo. Without
     this, the grid item's intrinsic width forces .hero wider than
     the viewport and the heading + body text get pushed off the
     right edge. Letting the image scale to its column makes the
     whole hero fit any narrow viewport. */
  .hero-demo {
    width: 100%;
  }
  .hero h1,
  .hero .lede { overflow-wrap: break-word; }
  .feature-row { grid-template-columns: 1fr; gap: 36px; margin-bottom: 80px; }
  /* On narrow viewports, force every row to text-on-top, demo-below
     regardless of source order — reads more naturally than alternating. */
  .feature-row.reverse > :first-child { order: 2; grid-column: 1; }
  .feature-row.reverse > :last-child  { order: 1; grid-column: 1; }
  .use-cases { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .three-more-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .hero { padding: 0 20px; margin: 24px auto 60px; }
  .hero-icon img { width: 64px; height: 64px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 44px); margin-bottom: 16px; }
  .hero .lede { font-size: 17px; margin-bottom: 24px; }
  .micro { font-size: 12px; }
  .use-cases { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .scenes-deck { grid-template-columns: 1fr; gap: 8px; }
  .scene-transition { flex-direction: row; }
  .behavior-row { grid-template-columns: 110px 1fr; }
}

/* ─────────────────── ACCESSIBILITY ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}