/* Vexa v4 - premium dark, cinematic scroll */

:root {
  --bg: #050509;
  --bg-2: #0a0a14;
  --panel: #0f0f1a;
  --panel-2: #14132a;
  --ink: #f5f0ff;
  --muted: #8a8499;
  --soft: #c9c2e0;
  --cyan: #25c6ff;
  --violet: #9658ff;
  --pink: #ff4dac;
  --amber: #ffcf5a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: #050509;
}

body {
  background: #050509;
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: 'ss01';
}

/* ----- Ambient bg glow that fades on scroll ----- */
.bg-aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(37,198,255,0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 5%, rgba(255,77,172,0.14), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 90%, rgba(150,88,255,0.10), transparent 60%);
}
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
}

/* ----- Top bar ----- */
.urgency {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  height: 34px;
  padding: 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(7,7,12,0.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
}
.urgency .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 999px;
  margin-right: 8px;
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 40px);
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8,8,14,0.7);
  backdrop-filter: blur(24px) saturate(140%);
  /* Distance each chip needs to slide to reach the page edge when collapsed */
  --chip-spread: max(0px, (100vw - 880px) / 2 - 4px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  justify-self: start;
}
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(150,88,255,0.45));
}
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: conic-gradient(from 0deg at 50% 50%, var(--cyan), var(--violet), var(--pink), var(--cyan));
  box-shadow: 0 0 20px rgba(150,88,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.2);
  position: relative;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 4px;
  background: #050509;
}
.nav-links {
  display: flex;
  gap: 2px;
  justify-self: center;
}
.nav-links a {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--soft);
  transition: 200ms ease;
}
.nav-links a:hover {
  color: white;
  background: rgba(255,255,255,0.06);
}
.nav-actions {
  display: flex;
  gap: 8px;
  justify-self: end;
  align-items: center;
  border: 1px solid transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: 200ms ease;
  white-space: nowrap;
}
.btn-ghost {
  color: var(--soft);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: rgba(255,255,255,0.05); color: white; }
.btn-primary {
  color: white;
  background: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 50%, var(--pink) 100%);
  box-shadow: 0 8px 30px rgba(150,88,255,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 600ms ease;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ----- Sections ----- */
section { position: relative; z-index: 1; }
.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(37,198,255,0.3);
  border-radius: 999px;
  background: rgba(37,198,255,0.06);
  color: #c6f0ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow .dot { width: 6px; height: 6px; background: var(--cyan); border-radius: 999px; box-shadow: 0 0 8px var(--cyan); }

h1, h2, h3 { letter-spacing: -0.03em; font-weight: 600; margin: 0; }
h1 { font-size: clamp(48px, 7.5vw, 104px); line-height: 0.95; }
h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.0; }
h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }

.gradient-text {
  background: linear-gradient(95deg, #fff 0%, #c4f0ff 30%, #c8a8ff 65%, #ffaad6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  color: var(--soft);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  max-width: 580px;
  font-weight: 400;
}

/* ----- HERO + CINEMATIC AVATAR REVEAL (sticky stack) ----- */
/* Tall stage: 400vh container with sticky inner that morphs based on scroll progress */
.cinema {
  position: relative;
  height: auto;
  margin-top: 0;
  z-index: 2;
  padding: 110px 24px 20px;
}
.cinema-stick {
  position: static;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  width: 100%;
}

/* Layered scenes inside the sticky frame */
.scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  padding: 0;
  width: 100%;
}
.scene::-webkit-scrollbar { display: none; }
.scene.active { pointer-events: auto; }

/* Hero scene */
.hero-content {
  text-align: center;
  width: min(1100px, 100%);
  padding: 0 24px 0;
  transform: translateY(var(--hero-y, 0px));
  opacity: var(--hero-op, 1);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border-radius: 999px;
  background: rgba(8, 8, 14, 0.6);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
  margin-bottom: 18px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.hero-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(100deg, var(--cyan), var(--violet) 50%, var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.hero-eyebrow-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.hero-title { font-size: clamp(36px, 5.6vw, 84px); line-height: 0.98; }
.hero-lede {
  color: var(--soft);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  max-width: 820px;
  margin: 22px auto 0;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

/* Avatar pair floating at hero scene */
.hero-avatars {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: end;
}
.avatar-card {
  position: relative;
  width: 200px;
  text-align: center;
}
.avatar-img {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  position: relative;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: avatar-bob 4s ease-in-out infinite;
}
.avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 30px var(--accent-glow, rgba(150,88,255,0.5)))
          drop-shadow(0 15px 30px rgba(0,0,0,0.5));
}
.avatar-card:nth-child(2) .avatar-img { animation-delay: -2s; }
@keyframes avatar-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.avatar-img::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow, rgba(150,88,255,0.4)) 0%, transparent 60%);
  z-index: -1;
  filter: blur(25px);
  opacity: 0.5;
  animation: pulse-glow 3s ease-in-out infinite;
}
/* Empty slot (no <img> inside) - the floating avatar carries the glow instead */
.avatar-img:empty::after { display: none; }
.avatar-img:empty { animation: none; }
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.05); }
}
.avatar-card .avatar-name {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
}
.avatar-card .avatar-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* Avatar showcase scene - single hero avatar centered, dashboard mock around it */
.showcase {
  width: min(1200px, 100%);
  padding: 0 24px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.showcase-portrait {
  position: relative;
  display: grid;
  place-items: center;
  height: 520px;
  transition: filter 200ms ease, transform 200ms ease;
}
.showcase-portrait img,
.showcase-portrait video {
  width: 520px;
  height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 0 80px var(--accent-glow, rgba(150,88,255,0.6)))
          drop-shadow(0 30px 50px rgba(0,0,0,0.5));
}
.showcase-portrait-static {
  transition: opacity 200ms ease;
  transform-origin: center;
  will-change: transform, opacity;
}
.showcase-portrait-static video,
.showcase-portrait-static img { animation: none; }
.showcase-alien {
  transform-origin: center;
  animation: alien-pulse 3.6s ease-in-out infinite;
  will-change: transform, filter;
}

/* ---- Agent section: sticky stage so the avatar can scroll into the frame --- */
.agent-section {
  position: relative;
  height: 220vh;
  z-index: 2;
}
.agent-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ---- Stage section: TWO side-by-side video frames, each with a centered slot.
   Hero avatar slots and stage center slots share the same X positions so the
   avatars travel straight down at constant size. Section is just over 1 viewport
   so once the avatars arrive, the user cannot scroll the box further; any extra
   scroll moves into the next section. */
.stage-section {
  position: relative;
  height: 100vh;
  z-index: 2;
}
.stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}
.stage-frames {
  display: flex;
  gap: 60px;
  justify-content: center;
  align-items: flex-start;
}
.stage-frame-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.stage-frames.has-playing .is-inactive-wrap {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.stage-frame {
  position: relative;
  width: 600px;
  height: 600px;
  border-radius: 26px;
  overflow: hidden;
  background: #06060c;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(150,88,255,0.18),
    0 50px 110px -30px rgba(0,0,0,0.7),
    0 0 180px -40px rgba(150,88,255,0.32);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1), height 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stage-frame.is-playing {
  width: min(1100px, 92vw);
  height: min(620px, 65vh);
  box-shadow:
    0 0 0 1px var(--accent-glow, rgba(150,88,255,0.45)),
    0 60px 120px -20px rgba(0,0,0,0.75),
    0 0 220px -40px var(--accent-glow, rgba(150,88,255,0.6));
}
.stage-frame-nara.is-playing { --accent-glow: rgba(120,160,255,0.55); }
.stage-frame-cato.is-playing { --accent-glow: rgba(200,140,255,0.55); }
.stage-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(120,160,255,0.10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px);
  z-index: 1;
  transition: opacity 320ms ease;
}
.stage-frame-cato::before {
  background:
    radial-gradient(circle at 50% 35%, rgba(200,140,255,0.10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px);
}
.stage-frame.is-playing::before { opacity: 0; }

.stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 2;
}
.stage-frame.is-playing .stage-video { opacity: 1; }

.stage-frame .op-video-corners span {
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(255,255,255,0.5);
  opacity: 0.55;
  z-index: 3;
}
.stage-frame .op-video-corners span:nth-child(1) { top: 12px; left: 12px;  border-right: none; border-bottom: none; }
.stage-frame .op-video-corners span:nth-child(2) { top: 12px; right: 12px; border-left:  none; border-bottom: none; }
.stage-frame .op-video-corners span:nth-child(3) { bottom: 12px; left: 12px;  border-right: none; border-top: none; }
.stage-frame .op-video-corners span:nth-child(4) { bottom: 12px; right: 12px; border-left:  none; border-top: none; }

/* Static avatar centered in each frame. No entry animation - just sits there.
   Hides quickly when video starts playing. */
.stage-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: auto;
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 60px var(--accent-glow, rgba(150,88,255,0.65)))
    drop-shadow(0 24px 40px rgba(0,0,0,0.55));
  pointer-events: none;
  z-index: 3;
  transition: opacity 220ms ease;
}
.stage-frame.is-playing .stage-avatar {
  opacity: 0;
}
.stage-frame-nara .stage-avatar {
  filter:
    drop-shadow(0 0 60px rgba(120,160,255,0.7))
    drop-shadow(0 24px 40px rgba(0,0,0,0.55));
}
.stage-frame-cato .stage-avatar {
  filter:
    drop-shadow(0 0 60px rgba(200,140,255,0.7))
    drop-shadow(0 24px 40px rgba(0,0,0,0.55));
}

.stage-cta {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  border: 1px solid var(--line-2);
  background: rgba(8,8,14,0.85);
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 0 var(--accent-glow, rgba(150,88,255,0.4));
  transition: box-shadow 240ms ease, transform 240ms cubic-bezier(0.4, 0, 0.2, 1), border-color 240ms ease, background 240ms ease;
}
.stage-cta:focus,
.stage-cta:focus-visible {
  outline: none;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 0 4px var(--accent-glow, rgba(150,88,255,0.25));
}
.stage-cta:hover {
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px var(--accent-glow, rgba(150,88,255,0.18));
}
.stage-cta:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 0 0 2px var(--accent-glow, rgba(150,88,255,0.4));
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.stage-cta.is-active {
  background: linear-gradient(100deg, var(--cyan), var(--violet) 50%, var(--pink));
  border-color: transparent;
  box-shadow: 0 12px 36px -8px var(--accent-glow, rgba(150,88,255,0.55));
}
.stage-cta.is-active:focus,
.stage-cta.is-active:focus-visible,
.stage-cta.is-active:hover {
  border-color: transparent;
  box-shadow: 0 14px 42px -6px var(--accent-glow, rgba(150,88,255,0.65));
}
.stage-cta .mono { font-size: 11px; opacity: 0.8; }

/* Description panel that slides in when "See workflow" is pressed */
.stage-info {
  position: absolute;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(6, 6, 12, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 360ms ease 200ms, transform 420ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
  pointer-events: none;
  z-index: 4;
}
.stage-info.on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.stage-info-name {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stage-info-headline {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 8px;
  color: white;
}
.stage-info-copy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--soft);
  margin: 0;
}

@media (max-width: 720px) {
  .stage-info { right: 12px; bottom: 12px; left: 12px; max-width: none; padding: 12px 14px; }
  .stage-info-headline { font-size: 14px; }
  .stage-info-copy { font-size: 12px; }
}

/* Floating avatars: img + name + role stacked vertically. They travel as one unit. */
.floating-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  user-select: none;
}
.floating-avatar-img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  filter:
    drop-shadow(0 0 60px rgba(150,88,255,0.55))
    drop-shadow(0 24px 40px rgba(0,0,0,0.5));
}
.floating-avatar-nara .floating-avatar-img {
  filter:
    drop-shadow(0 0 60px rgba(120,160,255,0.7))
    drop-shadow(0 24px 40px rgba(0,0,0,0.5));
}
.floating-avatar-cato .floating-avatar-img {
  filter:
    drop-shadow(0 0 60px rgba(200,140,255,0.7))
    drop-shadow(0 24px 40px rgba(0,0,0,0.5));
}
.floating-avatar-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: white;
  margin-top: 4px;
  transition: opacity 320ms ease, font-size 320ms ease, letter-spacing 320ms ease;
}
.floating-avatar-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--soft);
  text-transform: uppercase;
  transition: opacity 320ms ease, font-size 320ms ease;
}
/* When morphed to top-left badge: collapse the name/role labels so the img fills the box */
.floating-avatar.morphed .floating-avatar-name,
.floating-avatar.morphed .floating-avatar-role {
  opacity: 0;
  flex-basis: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

@media (max-width: 720px) {
  .stage-section { height: 200vh; }
  .stage-frames { flex-direction: column; gap: 24px; width: 92vw; }
  .stage-frame { aspect-ratio: 1 / 1; max-width: none; }
  .stage-slot-center { width: 70%; height: 65%; }
  .stage-slot-morph { width: 64px; height: 64px; top: 10px; left: 10px; }
  .stage-cta { padding: 9px 14px; font-size: 12px; bottom: 14px; }
  .floating-avatar-name { font-size: 12px; }
  .floating-avatar-role { font-size: 10px; }
}

/* ---- Agent scene: alien morphs into a video corner badge -------------- */
.agent-stage {
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.agent-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px var(--accent-glow, rgba(150,88,255,0.25)),
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 0 120px -20px var(--accent-glow, rgba(150,88,255,0.4));
}
.agent-video-frame .op-video-placeholder {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1) 80ms;
}
.agent-stage.morphed .agent-video-frame .op-video-placeholder { opacity: 1; }

.agent-alien {
  position: absolute;
  /* Default (un-morphed): centered, large */
  top: 50%;
  left: 50%;
  width: 60%;
  height: auto;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  filter:
    drop-shadow(0 0 80px var(--accent-glow, rgba(150,88,255,0.7)))
    drop-shadow(0 30px 50px rgba(0,0,0,0.55));
  animation: alien-pulse 3.6s ease-in-out infinite;
  transition:
    top 700ms cubic-bezier(0.7, 0, 0.2, 1),
    left 700ms cubic-bezier(0.7, 0, 0.2, 1),
    width 700ms cubic-bezier(0.7, 0, 0.2, 1),
    transform 700ms cubic-bezier(0.7, 0, 0.2, 1);
}
.agent-stage.morphed .agent-alien {
  top: 16px;
  left: 16px;
  width: 88px;
  transform: translate(0, 0) scale(1);
  animation: none;
}
.agent-badge {
  position: absolute;
  top: 22px;
  left: 120px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  background: rgba(8,8,14,0.6);
  backdrop-filter: blur(12px);
  color: var(--ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 400ms ease 240ms, transform 400ms ease 240ms;
  pointer-events: none;
}
.agent-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.agent-stage.morphed .agent-badge {
  opacity: 1;
  transform: translateX(0);
}
.agent-caption {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--soft);
  text-align: center;
  margin: 4px 0 0;
  opacity: 0;
  transition: opacity 400ms ease 280ms;
}
.agent-stage.morphed .agent-caption { opacity: 1; }

@media (max-width: 720px) {
  .agent-stage { gap: 12px; }
  .agent-video-frame { aspect-ratio: 4 / 5; border-radius: 16px; }
  .agent-alien { width: 70%; }
  .agent-stage.morphed .agent-alien { top: 10px; left: 10px; width: 64px; }
  .agent-badge { top: 14px; left: 86px; padding: 6px 10px; font-size: 10px; }
  .agent-caption { font-size: 12px; }
}
@keyframes alien-pulse {
  0%, 100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 60px var(--accent-glow, rgba(150,88,255,0.55)))
      drop-shadow(0 30px 50px rgba(0,0,0,0.5));
  }
  50% {
    transform: scale(1.045);
    filter:
      drop-shadow(0 0 110px var(--accent-glow, rgba(150,88,255,0.85)))
      drop-shadow(0 30px 50px rgba(0,0,0,0.5));
  }
}
@keyframes showcase-bob {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-10px) rotate(0.4deg); }
}
.showcase-portrait::after {
  content: '';
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent-glow, rgba(150,88,255,0.4)) 0%, transparent 65%);
  filter: blur(70px);
  z-index: -1;
  animation: pulse-glow 4s ease-in-out infinite;
}
.showcase-meta { padding-left: 8px; }
.showcase-meta .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--accent, rgba(37,198,255,0.4));
  border-radius: 999px;
  background: var(--accent-bg, rgba(37,198,255,0.08));
  color: var(--accent-text, #c6f0ff);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.showcase-meta h2 {
  font-size: clamp(44px, 5vw, 68px);
  margin-bottom: 18px;
}
.showcase-meta p {
  color: var(--soft);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 460px;
}
.showcase-meta .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 460px;
}
.stat .num {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: white;
}
.stat .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* Avatar floating particles around hero */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--cyan);
  border-radius: 999px;
  box-shadow: 0 0 8px var(--cyan);
  opacity: 0.7;
  animation: float 8s ease-in-out infinite;
}
.particle.v { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.particle.p { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-30px) translateX(15px); }
}

/* Stage progress dots */
.scene-dots {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transition: opacity 300ms ease;
}
.scene-dots.visible { opacity: 1; }
.scene-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  transition: 300ms ease;
}
.scene-dots .dot.active {
  background: white;
  box-shadow: 0 0 10px white;
  height: 18px;
}

/* ----- Animated UI "video" frames ----- */
.video-section {
  padding: 140px 0;
}
.video-frame {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a14;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
}
.video-frame .chrome {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
}
.video-frame .chrome .light { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.15); }
.video-frame .chrome .light.r { background: #ff5f57; }
.video-frame .chrome .light.y { background: #ffbd2e; }
.video-frame .chrome .light.g { background: #28c840; }
.video-frame .chrome .url {
  margin-left: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.video-frame .body {
  padding: 28px;
  min-height: 460px;
  position: relative;
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.price-card {
  position: relative;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transition: 300ms ease;
}
.price-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-4px); }
.price-card.featured {
  background: linear-gradient(180deg, rgba(150,88,255,0.12), rgba(255,77,172,0.06));
  border-color: rgba(150,88,255,0.4);
}
.price-card .ribbon {
  position: absolute;
  top: -12px; left: 32px;
  padding: 4px 12px;
  background: linear-gradient(100deg, var(--cyan), var(--violet), var(--pink));
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
}
.price-card .name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 14px;
}
.price-card .price {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-card .price small { font-size: 16px; font-weight: 400; color: var(--muted); }
.price-card p { color: var(--soft); font-size: 15px; line-height: 1.5; margin: 16px 0 24px; min-height: 80px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 28px; }
.price-card li {
  font-size: 14px;
  color: var(--soft);
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}
.price-card li::before {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--cyan);
  width: 14px;
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.testimonial {
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
}
.testimonial blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: white;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.testimonial blockquote::before { content: '"'; color: var(--violet); font-size: 36px; line-height: 0; vertical-align: -10px; margin-right: 4px; }
.testimonial .who {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.testimonial .who .av {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}
.testimonial .who .name { font-size: 14px; font-weight: 600; }
.testimonial .who .title { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* FAQ */
.faq-list { margin-top: 48px; max-width: 820px; margin-left: auto; margin-right: auto; }
.faq-item {
  border-top: 1px solid var(--line-2);
  padding: 22px 0;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq-q .icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--cyan);
  transition: 250ms ease;
}
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease, margin 350ms ease;
  color: var(--soft);
  line-height: 1.6;
  font-size: 16px;
}
.faq-item.open .faq-a { max-height: 320px; margin-top: 14px; }

/* Footer */
footer {
  margin-top: 100px;
  padding: 80px 0 50px;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
.footer-grid h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 6px 0; font-size: 14px; color: var(--soft); }
.footer-grid li a:hover { color: white; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Final CTA */
.final-cta {
  padding: 140px 0;
  text-align: center;
  position: relative;
}
.final-cta .stamp {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  opacity: 0.9;
}

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }

/* Section heading */
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 24px;
}
.section-head .left { max-width: 700px; }
.section-head .left p { color: var(--soft); margin: 18px 0 0; font-size: 18px; line-height: 1.5; }
.section-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}

/* How it works steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.step {
  padding: 28px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  position: relative;
  overflow: hidden;
}
.step .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.step h3 { margin: 14px 0 12px; font-size: 22px; }
.step p { color: var(--soft); font-size: 14px; line-height: 1.5; margin: 0; }
.step-video-placeholder {
  margin-top: 18px;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(150,88,255,0.18) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 10px, transparent 10px 20px),
    rgba(8, 8, 14, 0.55);
  display: grid;
  place-items: center;
}
.step-video-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.5);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
}

/* ---- How it helps to scale (3-col with floating device) ----------------- */
.scale-section .section-head p {
  color: var(--soft);
  font-size: 16px;
  max-width: 580px;
  margin: 14px auto 0;
}
.scale-grid {
  max-width: 1200px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  gap: 28px;
  align-items: center;
}
.scale-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scale-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(8, 8, 14, 0.6);
  backdrop-filter: blur(10px);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  transition: transform 240ms ease, border-color 240ms ease;
}
.scale-card:hover {
  transform: translateY(-2px);
  border-color: rgba(150, 88, 255, 0.45);
}
.scale-check {
  flex-shrink: 0;
  color: #5cf2a8;
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}

/* Flowing connection line from each card toward the phone (data-flow effect).
   Gap from the card so the line never touches the card edge. No end-cap dot. */
.scale-card::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 44px;
  height: 2px;
  transform: translateY(-50%);
  background-size: 200% 100%;
  border-radius: 2px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(150, 88, 255, 0.6));
}
.scale-col-left .scale-card::after {
  right: -62px; /* 16px gap from card, ends ~6px before phone */
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 25%,
    rgba(120, 160, 255, 0.85) 50%,
    rgba(150, 88, 255, 0.85) 80%,
    transparent 100%
  );
  animation: scale-flow-right 1.6s linear infinite;
}
.scale-col-right .scale-card::after {
  left: -62px; /* 16px gap from card, ends ~6px before phone */
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(150, 88, 255, 0.85) 20%,
    rgba(200, 140, 255, 0.85) 50%,
    transparent 75%,
    transparent 100%
  );
  animation: scale-flow-left 1.6s linear infinite;
}
@keyframes scale-flow-right {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes scale-flow-left {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Center "device" mockup with glowing pills */
.scale-center {
  display: grid;
  place-items: center;
}
.scale-device {
  position: relative;
  width: 280px;
  height: 460px;
  border-radius: 36px;
  background: linear-gradient(180deg, #0a0a14, #050509);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(150, 88, 255, 0.25),
    0 0 120px -20px rgba(150, 88, 255, 0.4);
  padding: 14px;
}
.scale-device::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 18px;
  border-radius: 999px;
  background: #050509;
  z-index: 2;
}
.scale-device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(150, 88, 255, 0.35) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(37, 198, 255, 0.25) 0%, transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 12px, transparent 12px 24px),
    #06060c;
  overflow: hidden;
}
.scale-device-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(150, 88, 255, 0.4) 0%, transparent 60%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.scale-device-pill {
  position: absolute;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 8, 14, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: white;
  white-space: nowrap;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
  animation: scale-float 5s ease-in-out infinite;
}
.scale-pill-1 {
  top: 14%; left: 14%;
  border-color: rgba(120, 160, 255, 0.5);
  color: #cfd8ff;
  animation-delay: 0s;
}
.scale-pill-2 {
  top: 34%; right: 12%;
  border-color: rgba(200, 140, 255, 0.5);
  color: #e8d4ff;
  animation-delay: -1.2s;
}
.scale-pill-3 {
  bottom: 30%; left: 12%;
  border-color: rgba(37, 198, 255, 0.5);
  color: #b5ecff;
  animation-delay: -2.4s;
}
.scale-pill-4 {
  bottom: 12%; right: 14%;
  border-color: rgba(255, 77, 172, 0.45);
  color: #ffd1e6;
  animation-delay: -3.6s;
}
@keyframes scale-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.scale-stats-tagline {
  max-width: 920px;
  margin: 70px auto 0;
  text-align: center;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-top: 40px;
  border-top: 1px solid var(--line-2);
}
.scale-stats {
  max-width: 920px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: center;
}

/* 99+ languages cinematic flag marquee */
.scale-languages {
  max-width: 1100px;
  margin: 36px auto 0;
  text-align: center;
}
.scale-languages-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  padding: 8px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 8, 14, 0.6);
  backdrop-filter: blur(10px);
  margin-bottom: 22px;
}
.scale-languages-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink));
  box-shadow: 0 0 12px rgba(150, 88, 255, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.scale-flags-marquee {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.scale-flags-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scale-flags-scroll 40s linear infinite;
  will-change: transform;
}
.scale-flags-marquee:hover .scale-flags-track {
  animation-play-state: paused;
}
.scale-flag {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(150, 88, 255, 0.18));
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 320ms ease;
  cursor: default;
}
.scale-flag:hover {
  transform: translateY(-6px) scale(1.25);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(150, 88, 255, 0.45));
}
@keyframes scale-flags-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .scale-flag { font-size: 30px; }
  .scale-flags-track { gap: 18px; animation-duration: 30s; }
  .scale-languages-label { font-size: 10px; padding: 7px 14px; }
}
.scale-stat-num {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.scale-stat-lbl {
  margin-top: 10px;
  color: var(--soft);
  font-size: 14px;
  letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
  .scale-grid { grid-template-columns: 1fr; gap: 32px; }
  .scale-col { gap: 12px; }
  .scale-center { order: -1; margin-bottom: 8px; }
  /* Lines don't make sense when cards stack vertically */
  .scale-card::after { display: none; }
}
@media (max-width: 720px) {
  .scale-device { width: 220px; height: 360px; padding: 10px; }
  .scale-device::before { width: 60px; height: 14px; top: 10px; }
  .scale-device-screen { border-radius: 20px; }
  .scale-device-pill { font-size: 10px; padding: 6px 10px; }
  .scale-pill-1 { top: 14%; left: 10%; }
  .scale-pill-2 { top: 34%; right: 10%; }
  .scale-pill-3 { bottom: 30%; left: 10%; }
  .scale-pill-4 { bottom: 12%; right: 10%; }
  .scale-stats { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; margin-top: 50px; }
}

/* ---- How Vexa works (vertical timeline) ---------------------------------- */
.how-vexa-list {
  max-width: 920px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative;
}
/* Connector line: only between circles. Doesn't extend above 01 or below the last. */
.how-vexa-step {
  position: relative;
}
.how-vexa-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 40px;
  top: calc(50% + 52px);
  bottom: -50px;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(150, 88, 255, 0.45),
    rgba(37, 198, 255, 0.25));
  pointer-events: none;
}
.how-vexa-step {
  display: grid;
  grid-template-columns: 80px 1fr 360px;
  gap: 32px;
  align-items: center;
}
.how-vexa-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--soft);
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(8, 8, 14, 0.85);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}
.how-vexa-body { padding-right: 12px; }
.how-vexa-title {
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 10px;
  color: white;
}
.how-vexa-copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--soft);
}
.how-vexa-visual {
  width: 100%;
}
.how-vexa-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(150, 88, 255, 0.18) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 20px),
    rgba(8, 8, 14, 0.55);
  display: grid;
  place-items: center;
}

@media (max-width: 900px) {
  .how-vexa-list { gap: 32px; }
  .how-vexa-step { grid-template-columns: 60px 1fr; gap: 18px; }
  .how-vexa-step:not(:last-child)::before { left: 30px; transform: translateX(-50%); top: calc(50% + 38px); bottom: -28px; }
  .how-vexa-num { width: 60px; height: 60px; font-size: 20px; }
  .how-vexa-title { font-size: 20px; }
  .how-vexa-copy { font-size: 14px; }
  .how-vexa-visual { grid-column: 1 / -1; padding-left: 78px; }
}
@media (max-width: 560px) {
  .how-vexa-step { grid-template-columns: 1fr; }
  .how-vexa-step:not(:last-child)::before { display: none; }
  .how-vexa-num { margin-bottom: 4px; }
  .how-vexa-visual { padding-left: 0; }
}

/* Scroll-stage video - sticky scenes that swap */
.scroll-video {
  position: relative;
  height: 320vh;
}
.scroll-video-stick {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 24px;
}
.svid-track {
  width: min(1100px, 100%);
}
.svid-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.svid-progress {
  display: flex;
  gap: 6px;
}
.svid-progress .seg {
  width: 60px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  position: relative;
}
.svid-progress .seg .fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 200ms linear;
}
.svid-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 18px;
  overflow: hidden;
  background: #07070d;
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 120px rgba(0,0,0,0.7);
}
.svid-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 500ms ease, transform 500ms ease;
}
.svid-scene.active {
  opacity: 1;
  transform: scale(1);
}
.svid-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.svid-caption {
  margin-top: 22px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 30px;
}
.svid-caption h3 { font-size: 24px; max-width: 560px; }
.svid-caption .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* CRT scan line decoration */
.crt-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 20%, transparent 80%, rgba(0,0,0,0.3));
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Mobile */
@media (max-height: 620px) {
  .scene { padding-top: 110px; }
  .hero-eyebrow-row { display: none; }
  .hero-avatars { margin-top: 16px; }
  .avatar-img { width: 110px; height: 110px; }
  .avatar-card { width: 130px; }
  .hero-actions { margin-top: 20px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .showcase { grid-template-columns: 1fr; gap: 30px; }
  .showcase-portrait { height: 360px; }
  .showcase-portrait img,
  .showcase-portrait video { width: 320px; height: 320px; }
  .showcase-portrait::after { width: 340px; height: 340px; }
  .pricing-grid, .testimonial-grid, .steps, .footer-grid { grid-template-columns: 1fr; }
  .hero-avatars { gap: 16px; }
  .avatar-card { width: 150px; }
  .avatar-img { width: 130px; height: 130px; }
  .cinema { height: 380vh; }
  .scroll-video { height: 260vh; }
  .scene-dots { display: none; }
}

/* ===== UPDATES ===== */

/* Centered hero CTA with extra-large primary button */
.hero-actions-centered { justify-content: center; }
.btn-xl {
  font-size: 18px;
  padding: 22px 40px;
  letter-spacing: 0.02em;
  font-weight: 600;
  border-radius: 999px;
}

/* Bigger, clickable hero avatars */
.hero-avatars-xl {
  margin-top: 36px;
  gap: 56px;
}
.avatar-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-link:hover {
  transform: translateY(-6px) scale(1.04);
}
.avatar-link:hover .avatar-img {
  filter: drop-shadow(0 0 60px var(--accent-glow, rgba(150,88,255,0.55)))
          drop-shadow(0 25px 50px rgba(0,0,0,0.6));
}
.avatar-link:active { transform: translateY(-2px) scale(1.01); }
.hero-avatars-xl .avatar-card { width: 460px; display: flex; flex-direction: column; align-items: center; }
.hero-avatars-xl .avatar-img { width: 460px; height: 310px; }
.hero-avatars-xl { margin-top: 12px; gap: 40px; }

/* Trust bullets under the Buy now button */
.hero-bullets {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 16px;
  color: var(--soft);
  font-size: 14px;
}
.hero-bullets .check {
  color: #5cf2a8;
  margin-right: 6px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .hero-bullets { gap: 12px; font-size: 13px; }
}

/* "See workflow" button under each hero avatar */
.hero-avatar-cta {
  margin-top: 14px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(8, 8, 14, 0.7);
  color: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.hero-avatar-cta:hover,
.hero-avatar-cta:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px var(--accent-glow, rgba(150, 88, 255, 0.18));
}
.hero-avatar-cta:active {
  transform: translateY(0) scale(0.97);
  transition: transform 80ms ease;
}
.hero-avatar-cta .mono { font-size: 11px; opacity: 0.85; }

/* Avatar image as a button (clickable to open modal) */
.avatar-img-button {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), filter 240ms ease;
}
.avatar-img-button:hover { transform: translateY(-4px) scale(1.02); }
.avatar-img-button:active { transform: translateY(-1px) scale(0.99); }
.avatar-img-button img { width: 100%; height: 100%; object-fit: contain; }

/* Workflow modal */
.workflow-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(16px) saturate(120%);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  animation: workflow-fade-in 280ms ease;
}
@keyframes workflow-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.workflow-modal {
  position: relative;
  width: min(1100px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: #06060c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px var(--accent-glow, rgba(150, 88, 255, 0.4)),
    0 60px 140px -30px rgba(0, 0, 0, 0.75),
    0 0 240px -40px var(--accent-glow, rgba(150, 88, 255, 0.5));
  animation: workflow-pop-in 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes workflow-pop-in {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.workflow-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 10;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(8, 8, 14, 0.7);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  transition: background 200ms ease, border-color 200ms ease, transform 240ms ease;
}
.workflow-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);
}

/* Header: avatar morphs in from a small scale, info slides next to it */
.workflow-modal-header {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 36px 40px 28px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 50%, var(--accent-glow, rgba(150,88,255,0.18)) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8, 8, 14, 0.95), rgba(6, 6, 12, 1));
}
.workflow-modal-avatar-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  perspective: 600px;
}
.workflow-modal-avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 60px var(--accent-glow, rgba(150,88,255,0.7))) drop-shadow(0 24px 40px rgba(0,0,0,0.55));
  /* Morph entrance: pop from below, scale up */
  animation: avatar-morph-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes avatar-morph-in {
  0%   { opacity: 0; transform: translateY(40px) scale(0.55) rotate(-6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.workflow-modal-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Description slides in from the right after avatar lands */
  animation: info-slide-in 480ms cubic-bezier(0.4, 0, 0.2, 1) 220ms both;
}
@keyframes info-slide-in {
  0%   { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}
.workflow-modal-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.workflow-modal-name .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.workflow-modal-headline {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.workflow-modal-copy {
  margin: 0;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.6;
}
.workflow-modal-bullets {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workflow-modal-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
  opacity: 0;
  transform: translateX(12px);
  animation: bullet-pop 380ms cubic-bezier(0.4, 0, 0.2, 1) var(--bullet-delay, 0ms) both;
}
@keyframes bullet-pop {
  0%   { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}
.workflow-modal-bullets .check {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
  text-shadow: 0 0 12px currentColor;
}

/* Video: appears AFTER the description has been read (~900ms delay) */
.workflow-modal-video-wrap {
  position: relative;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  /* Collapsed by default (height 0). Expands when phase = 'video' */
  max-height: 0;
  opacity: 0;
  transition:
    max-height 600ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 400ms ease 200ms;
}
.workflow-modal.phase-video .workflow-modal-video-wrap {
  max-height: 60vh;
  opacity: 1;
}
.workflow-modal-video {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  object-fit: cover;
}

@media (max-width: 720px) {
  .workflow-modal-header { grid-template-columns: 1fr; padding: 28px 22px 20px; gap: 20px; }
  .workflow-modal-avatar-wrap { width: 160px; height: 160px; margin: 0 auto; }
  .workflow-modal.phase-video .workflow-modal-video-wrap { max-height: 50vh; }
}

@media (max-width: 900px) {
  .hero-avatars-xl { gap: 24px; margin-top: 28px; }
  .hero-avatars-xl .avatar-card { width: 170px; }
  .hero-avatars-xl .avatar-img { width: 150px; height: 150px; }
  .btn-xl { font-size: 16px; padding: 18px 32px; }
}

/* Scroll-video - single video frame, no progress dots, no caption */
.svid-frame-video {
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 0;
}
.svid-video-wrap {
  position: absolute;
  inset: 36px 0 0 0;
  background: #0a0916;
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.svid-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}
.svid-video-wrap video[poster]:not([src]),
.svid-video-wrap video:not([src]) {
  display: none;
}
.svid-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(150,88,255,0.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px),
    #0a0916;
  z-index: 1;
}
.placeholder-inner {
  text-align: center;
  padding: 40px;
  max-width: 520px;
}
.placeholder-icon {
  font-size: 56px;
  color: var(--violet);
  opacity: 0.55;
  margin-bottom: 16px;
  text-shadow: 0 0 40px rgba(150,88,255,0.5);
}
.placeholder-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 10px;
}
.placeholder-sub {
  font-size: 14px;
  color: var(--soft);
  line-height: 1.6;
}
.placeholder-sub .mono {
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* ===== Premium plan switch ===== */
.plan-switch {
  position: relative;
  display: flex;
  margin: 40px auto 12px;
  padding: 6px;
  width: max-content;
  max-width: 100%;
  background: linear-gradient(180deg, rgba(20,18,42,0.9), rgba(12,11,28,0.9));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 40px -10px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.02);
  isolation: isolate;
  backdrop-filter: blur(20px);
}
.plan-switch::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%, rgba(150,88,255,0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.plan-switch-thumb {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 55%, var(--pink) 100%);
  box-shadow:
    0 8px 28px -4px rgba(150,88,255,0.55),
    0 4px 12px -2px rgba(37,198,255,0.35),
    0 1px 0 rgba(255,255,255,0.25) inset;
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}
.plan-switch[data-plan="quarterly"] .plan-switch-thumb { transform: translateX(0); left: 6px; }
.plan-switch[data-plan="annual"]    .plan-switch-thumb { transform: translateX(100%); left: 6px; }

/* 3-option variant */
.plan-switch-3 .plan-switch-thumb { width: calc((100% - 12px) / 3); }
.plan-switch-3[data-plan="monthly"]   .plan-switch-thumb { transform: translateX(0);    left: 6px; }
.plan-switch-3[data-plan="quarterly"] .plan-switch-thumb { transform: translateX(100%); left: 6px; }
.plan-switch-3[data-plan="annual"]    .plan-switch-thumb { transform: translateX(200%); left: 6px; }
.plan-switch-opt {
  position: relative;
  z-index: 1;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--soft);
  padding: 16px 26px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-content: center;
  transition: color 220ms ease;
  white-space: nowrap;
}
.plan-switch-3 .plan-switch-opt { min-width: 168px; padding: 16px 18px; }
.plan-switch-opt:hover { color: var(--ink); }
.plan-switch-opt.active { color: white; }
.plan-switch-opt.active .plan-switch-save {
  background: rgba(255,255,255,0.18);
  color: white;
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
.plan-switch-label { font-size: 14px; }
.plan-switch-save {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,255,136,0.10);
  color: #6effb5;
  border: 1px solid rgba(0,255,136,0.22);
  transition: all 220ms ease;
}

/* Two-col pricing (Subscription + Custom) */
.pricing-grid-2 {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  gap: 24px;
}
.pricing-grid-2 > .price-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Featured Subscription card · violet/cyan accent */
.price-card.price-card-subscription {
  background: linear-gradient(180deg,
    rgba(150,88,255,0.14),
    rgba(37,198,255,0.08) 60%,
    rgba(255,77,172,0.05));
  border-color: rgba(150,88,255,0.45);
  box-shadow:
    0 30px 60px -20px rgba(150,88,255,0.4),
    0 0 0 1px rgba(150,88,255,0.25) inset;
}
.price-card.price-card-subscription:hover {
  transform: translateY(-4px);
  border-color: rgba(150,88,255,0.65);
}
.price-card.price-card-subscription .price {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 55%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card.price-card-subscription .price small {
  background: none;
  -webkit-text-fill-color: var(--soft);
  color: var(--soft);
}

@media (max-width: 900px) {
  .pricing-grid-2 { grid-template-columns: 1fr; }
}

/* Three-col pricing (Single + Both + Custom) */
.pricing-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  gap: 22px;
}
.pricing-grid-3 > .price-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1100px) {
  .pricing-grid-3 { grid-template-columns: 1fr; max-width: 540px; }
}

/* Single-operator toggle (Nara / Cato) */
.single-toggle {
  display: inline-flex;
  padding: 4px;
  background: rgba(8, 8, 14, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin: 4px 0 16px;
  gap: 2px;
  width: max-content;
}
.single-toggle-opt {
  appearance: none;
  outline: none;
  border: 0;
  background: transparent;
  color: var(--soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease;
}
.single-toggle-opt:hover { color: var(--ink); }
.single-toggle-opt.active {
  background: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--pink));
  color: white;
  box-shadow: 0 4px 14px -4px rgba(150, 88, 255, 0.55);
}


.price-custom {
  font-size: 56px;
  background: linear-gradient(100deg, var(--cyan), var(--violet), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-note {
  color: var(--soft);
  font-size: 13px;
  margin: 8px 0 24px !important;
  min-height: 38px;
  animation: plan-fade 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.price-card .price {
  animation: price-pop 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes price-pop {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes plan-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.plan-strike {
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 6px;
}
.price-card.price-card-subscription .price {
  transition: filter 240ms ease;
}

@media (max-width: 900px) {
  .plan-switch { flex-direction: column; gap: 4px; padding: 6px; border-radius: 24px; }
  .plan-switch-thumb { display: none; }
  .plan-switch-opt { min-width: 200px; padding: 14px 22px; }
  .plan-switch-opt.active {
    background: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 60%, var(--pink) 100%);
    border-radius: 999px;
  }
}

/* Static scroll-video override (no sticky / no scroll-tied animation) */
.scroll-video-static { height: auto; padding: 60px 24px 100px; }
.scroll-video-static .scroll-video-stick {
  position: relative;
  height: auto;
  top: auto;
  display: block;
}
.scroll-video-static .svid-track {
  max-width: 1280px;
  margin: 0 auto;
}


/* =====================================================================
   MOBILE-FRIENDLY PASS  ·  hamburger nav, stacked hero, sticky CTA,
   carousels, accent theming, tighter type, scroll-snap.
   ===================================================================== */

/* ---- Accent theming (data-accent on <html>) ---------------------------- */
:root[data-accent="cyan"]   { --accent-grad: linear-gradient(100deg, #18d6ff 0%, #25c6ff 50%, #74e8ff 100%); }
:root[data-accent="violet"] { --accent-grad: linear-gradient(100deg, #25c6ff 0%, #9658ff 55%, #ff4dac 100%); }
:root[data-accent="pink"]   { --accent-grad: linear-gradient(100deg, #ff4dac 0%, #ff79b8 55%, #ffb84d 100%); }
:root[data-accent="amber"]  { --accent-grad: linear-gradient(100deg, #ffcf5a 0%, #ff8a4d 50%, #ff4dac 100%); }
:root[data-accent="cyan"]   .btn-primary { background: var(--accent-grad); box-shadow: 0 8px 30px rgba(37,198,255,0.4); }
:root[data-accent="pink"]   .btn-primary { background: var(--accent-grad); box-shadow: 0 8px 30px rgba(255,77,172,0.4); }
:root[data-accent="amber"]  .btn-primary { background: var(--accent-grad); box-shadow: 0 8px 30px rgba(255,160,80,0.4); color: #1a0f00; }
:root[data-accent="amber"]  .btn-primary { color: #1a0f00; }

/* ---- Scroll-snap mode (Tweak) ----------------------------------------- */
:root[data-snap="on"] main { scroll-snap-type: y proximity; }
:root[data-snap="on"] main > section,
:root[data-snap="on"] main > .cinema { scroll-snap-align: start; scroll-snap-stop: normal; }

/* ---- Hamburger button ------------------------------------------------- */
.hamburger {
  display: none;
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  width: 44px; height: 44px;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: 200ms ease;
}
.hamburger:hover { background: rgba(255,255,255,0.08); }
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.5); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile menu drawer (full-screen overlay) -------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 9, 0.92);
  backdrop-filter: blur(28px) saturate(140%);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  overflow-y: auto;
  padding: 110px 24px 40px;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu-inner { max-width: 520px; margin: 0 auto; }
.mobile-menu-inner a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  color: white;
  text-decoration: none;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transform: translateY(20px);
  opacity: 0;
  transition: all 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-menu.open .mobile-menu-inner a { transform: translateY(0); opacity: 1; }
.mobile-menu.open .mobile-menu-inner a:nth-child(1) { transition-delay: 60ms; }
.mobile-menu.open .mobile-menu-inner a:nth-child(2) { transition-delay: 100ms; }
.mobile-menu.open .mobile-menu-inner a:nth-child(3) { transition-delay: 140ms; }
.mobile-menu.open .mobile-menu-inner a:nth-child(4) { transition-delay: 180ms; }
.mobile-menu.open .mobile-menu-inner a:nth-child(5) { transition-delay: 220ms; }
.mobile-menu-inner .arrow {
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  transition: transform 200ms ease;
}
.mobile-menu-inner a:hover .arrow,
.mobile-menu-inner a:active .arrow { transform: translateX(4px); color: white; }
.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 280ms;
}
.mobile-menu.open .mobile-menu-actions { opacity: 1; transform: translateY(0); }
.mobile-menu-actions .btn { width: 100%; justify-content: center; padding: 18px 28px; font-size: 16px; }
.mobile-menu-foot {
  margin-top: 28px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Sticky CTA (mobile only) ----------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 45;
  display: none;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms ease;
}
.sticky-cta.show { transform: translateY(0); opacity: 1; }
.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  background: rgba(8, 8, 14, 0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 14px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(150,88,255,0.15);
}
.sticky-cta-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sticky-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}
.sticky-cta-pill .dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 1.6s ease-in-out infinite;
}
.sticky-cta-price { font-size: 13px; color: white; font-weight: 500; }
.sticky-cta-price strong { font-weight: 600; }
.btn-sticky { padding: 12px 20px !important; font-size: 13px !important; flex-shrink: 0; }

/* ---- Sign-in button hides on small screens (Buy now stays) ------------- */
@media (max-width: 720px) {
  .nav-actions .btn-signin { display: none; }
}

/* ---- ≤720px : hamburger replaces nav, sticky CTA shows ----------------- */
@media (max-width: 720px) {
  .nav {
    top: 8px;
    width: calc(100% - 16px);
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 14px;
    gap: 8px;
  }
  .nav .brand { justify-self: auto; margin-right: auto; }
  .nav-links { display: none !important; }
  .nav-actions {
    gap: 6px;
    justify-self: auto;
    margin-left: auto;
  }
  .nav-actions .btn-buy { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  .sticky-cta { display: block; }
}

/* ---- ≤720px : Hero ---------------------------------------------------- */
@media (max-width: 720px) {
  .cinema { height: auto !important; min-height: auto; }
  .cinema-stick {
    position: relative !important;
    height: auto !important;
    min-height: auto;
    padding-top: 64px;
    padding-bottom: 40px;
  }
  .scene { position: relative !important; padding: 0 16px; opacity: 1 !important; pointer-events: auto !important; }
  /* Hide the 2nd cinema scene (showcase) - desktop scroll-tied animation doesn't fit mobile */
  .cinema .scene + .scene { display: none; }
  .scene-dots { display: none !important; }
  .particles { display: none; }

  .hero-content {
    transform: none !important;
    padding: 0 !important;
  }
  .hero-title { font-size: clamp(38px, 11vw, 60px) !important; line-height: 1.02; letter-spacing: -0.04em; }
  .hero-lede { font-size: 16px !important; max-width: 100% !important; padding: 0; }
  .hero-eyebrow-row { margin-bottom: 14px; }
  .hero-actions-centered { margin-top: 24px !important; }
  .btn-xl { font-size: 16px; padding: 18px 28px; }

  /* Stacked mobile hero (default): title -> lede -> actions -> avatars */
  :root[data-mobile-hero="stacked"] .hero-content {
    display: flex; flex-direction: column;
  }
  :root[data-mobile-hero="stacked"] .hero-avatars-xl {
    order: 4;
    margin: 28px 0 0 !important;
    gap: 14px !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  :root[data-mobile-hero="stacked"] .hero-avatars-xl .avatar-card { width: 44vw; max-width: 200px; }
  :root[data-mobile-hero="stacked"] .hero-avatars-xl .avatar-img {
    width: 100%; height: auto; aspect-ratio: 1; max-width: 200px;
    filter: none !important;
    animation: none !important;
  }
  :root[data-mobile-hero="stacked"] .hero-avatars-xl .avatar-img img {
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
  }
  :root[data-mobile-hero="stacked"] .hero-avatars-xl .avatar-img::after { display: none; }

  /* Side-by-side small avatars + headline */
  :root[data-mobile-hero="side"] .hero-avatars-xl {
    margin: 28px 0 0 !important;
    gap: 12px !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  :root[data-mobile-hero="side"] .hero-avatars-xl .avatar-card { width: 40vw; max-width: 180px; }
  :root[data-mobile-hero="side"] .hero-avatars-xl .avatar-img {
    width: 100%; height: auto; aspect-ratio: 1;
  }

  /* Morph: just one centered avatar */
  :root[data-mobile-hero="morph"] .hero-avatars-xl {
    margin: 0 0 28px !important;
    transform: none !important;
    opacity: 1 !important;
    justify-content: center;
    filter: none !important;
  }
  :root[data-mobile-hero="morph"] .hero-avatars-xl .avatar-link:last-child { display: none; }
  :root[data-mobile-hero="morph"] .hero-avatars-xl .avatar-card { width: 60vw; max-width: 240px; }
  :root[data-mobile-hero="morph"] .hero-avatars-xl .avatar-img {
    width: 100%; height: auto; aspect-ratio: 1;
    animation: morph-swap 6s ease-in-out infinite;
  }
  @keyframes morph-swap {
    0%, 45% { filter: drop-shadow(0 0 60px rgba(120,160,255,0.6)) drop-shadow(0 25px 50px rgba(0,0,0,0.55)); }
    55%, 100% { filter: drop-shadow(0 0 60px rgba(200,140,255,0.6)) drop-shadow(0 25px 50px rgba(0,0,0,0.55)); }
  }
}

/* ---- ≤720px : Section paddings + heads ---------------------------------- */
@media (max-width: 720px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  main > section.wrap { padding-top: 70px !important; padding-bottom: 70px !important; }
  .section-head { display: block; margin-top: 24px; }
  .section-head h2 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.05; letter-spacing: -0.03em; }
  .section-head p { font-size: 15px !important; max-width: 100% !important; margin-top: 12px; }
  .section-num { font-size: 11px; }
  h2 { font-size: clamp(30px, 8vw, 44px); }
  h3 { font-size: 18px; }
}

/* ---- ≤720px : Scroll-video frame ------------------------------------- */
@media (max-width: 720px) {
  .scroll-video-static { padding: 30px 16px 60px; }
  .svid-frame-video { aspect-ratio: 4 / 5; }
  .placeholder-icon { font-size: 40px; margin-bottom: 10px; }
  .placeholder-label { font-size: 11px; }
  .placeholder-sub { font-size: 11px; }
  .chrome { padding: 8px 12px; }
  .chrome .url { font-size: 11px; }
}

/* ---- ≤720px : How-it-works steps stack vertically ---------------------- */
@media (max-width: 720px) {
  .steps {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    gap: 14px !important;
    padding: 8px 0 0;
    margin: 24px 0 0;
  }
  .step {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }
}

/* ---- ≤720px : Pricing grid stacks (already covered ≤900) -------------- */
@media (max-width: 720px) {
  .plan-switch.plan-switch-3 {
    flex-direction: row !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    width: 100%;
    overflow: hidden;
  }
  .plan-switch-3 .plan-switch-thumb {
    display: block !important;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3) !important;
    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .plan-switch-3[data-plan="monthly"]   .plan-switch-thumb { transform: translateX(0) !important; }
  .plan-switch-3[data-plan="quarterly"] .plan-switch-thumb { transform: translateX(100%) !important; }
  .plan-switch-3[data-plan="annual"]    .plan-switch-thumb { transform: translateX(200%) !important; }
  .plan-switch-3 .plan-switch-opt {
    min-width: 0 !important;
    flex: 1 1 0;
    padding: 11px 6px !important;
    font-size: 12px;
    background: transparent !important;
    border-radius: 999px;
    flex-direction: column;
    gap: 4px !important;
  }
  .plan-switch-3 .plan-switch-opt .plan-switch-label { font-size: 12px; }
  .plan-switch-3 .plan-switch-opt .plan-switch-save {
    font-size: 9px;
    padding: 2px 6px;
  }
  .price-card { padding: 22px !important; }
  .price-card .price {
    font-size: 44px !important;
    transition: opacity 220ms ease;
  }
  .price-card p { min-height: 0 !important; }
  .price-card .plan-note {
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
  }
}

/* ---- ≤720px : Testimonials stack vertically ---------------------------- */
@media (max-width: 720px) {
  .testimonial-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    gap: 14px !important;
    padding: 8px 0 0;
    margin: 24px 0 0;
  }
  .testimonial {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }
  .testimonial blockquote { font-size: 17px; }
}

/* ---- ≤720px : FAQ tighter ---------------------------------------------- */
@media (max-width: 720px) {
  .faq-item { padding: 18px 0 !important; }
  .faq-q { font-size: 16px !important; padding-right: 24px; }
  .faq-a { font-size: 14px; }
}

/* ---- ≤720px : Final CTA + Footer -------------------------------------- */
@media (max-width: 720px) {
  .final-cta { padding: 70px 16px 110px !important; }
  .final-cta h2 { font-size: clamp(40px, 11vw, 64px) !important; }
  .final-cta p { font-size: 16px !important; }
  .final-cta > div:last-child { flex-direction: column; gap: 10px !important; }
  .final-cta .btn { width: 100%; justify-content: center; padding: 18px 28px; }
  footer { padding-bottom: 100px; }
  footer .footer-grid { gap: 28px !important; }
  footer .footer-bottom {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
}

/* ---- ≤720px : Footer hide tweaks panel by default ---------------------- */
@media (max-width: 720px) {
  /* Make Tweaks panel a bottom-sheet style on mobile so it doesn't block the sticky CTA */
  .tweaks-panel,
  [class*="TweaksPanel"] {
    bottom: 80px !important;
  }
}


/* ---- Nav collapses to brand + Buy on scroll-down ----------------------
   Approach: parent .nav stays at the same compact width the whole time.
   On collapse, only the parent's BACKGROUND fades and the chips slide out
   to the page edges via transform. Symmetric, no width animation, no flop. */
.nav {
  grid-template-columns: 1fr auto 1fr;
  transition:
    background-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav .nav-links {
  overflow: hidden;
  max-width: 600px;
  transition:
    opacity 160ms ease,
    max-width 520ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
    visibility 0s 0s;
}
.nav .nav-actions .btn-signin {
  overflow: hidden;
  transition:
    opacity 160ms ease,
    max-width 520ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
    padding 520ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
    margin 520ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
    border-width 80ms ease 80ms,
    visibility 0s 0s;
}

/* Collapsed state: parent dissolves, chips slide out to page edges */
.nav.nav-collapsed {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.nav.nav-collapsed .nav-links {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  max-width: 0;
  transition:
    opacity 160ms ease,
    max-width 520ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s 160ms;
}
.nav.nav-collapsed .nav-actions .btn-signin {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  border-width: 0;
  white-space: nowrap;
  transition:
    opacity 160ms ease,
    max-width 520ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 520ms cubic-bezier(0.4, 0, 0.2, 1),
    margin 520ms cubic-bezier(0.4, 0, 0.2, 1),
    border-width 80ms ease,
    visibility 0s 160ms;
}

/* Brand chip: stays in grid cell; on collapse, slides to page-left and gains chip styling */
.nav .brand {
  border: 1px solid transparent;
  border-radius: 999px;
  transform: translateX(0);
  transition:
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-collapsed .brand {
  transform: translateX(calc(-1 * var(--chip-spread)));
  border-color: var(--line-2);
  background: rgba(8, 8, 14, 0.78);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.6);
}

/* Buy-now chip: stays in grid cell; on collapse, slides to page-right + chip styling */
.nav .nav-actions {
  border-radius: 999px;
  transform: translateX(0);
  transition:
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
    gap 420ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 420ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-collapsed .nav-actions {
  transform: translateX(var(--chip-spread));
  gap: 0;
  padding: 6px;
  border-color: var(--line-2);
  background: rgba(8, 8, 14, 0.78);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.6);
}

/* On mobile: also disconnect, hide hamburger when collapsed */
@media (max-width: 720px) {
  .nav.nav-collapsed { grid-template-columns: auto 1fr auto; width: calc(100% - 16px); }
  .nav.nav-collapsed .hamburger {
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    width: 0 !important;
    border-width: 0;
    margin-left: -6px;
    transform: scale(0.8);
    overflow: hidden;
  }
  .nav.nav-collapsed .brand { padding: 8px 14px 8px 12px; font-size: 15px; }
  .nav.nav-collapsed .brand .brand-mark { width: 24px; height: 24px; }
  .nav.nav-collapsed .nav-actions .btn-buy { padding: 10px 16px; font-size: 13px; }
}


/* ---- Showcase: oversized name + role replaces headline ---------------- */
.showcase-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
.showcase-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--accent-text, white);
  text-shadow: 0 0 60px var(--accent-glow, rgba(150,88,255,0.35));
}
.showcase-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text, var(--soft));
  opacity: 0.85;
  position: relative;
  padding-left: 14px;
}
.showcase-role::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.showcase-copy {
  color: var(--soft);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 560px;
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .showcase-title-row { gap: 8px 14px; margin-bottom: 18px; }
  .showcase-name { font-size: clamp(48px, 14vw, 72px); }
  .showcase-role { font-size: 11px; padding-bottom: 4px; }
  .showcase-copy { font-size: 15px; }
}


/* ---- Operating-video scene (act 3 / act 5) -------------------------- */
.op-video {
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform-origin: center;
  will-change: transform, filter;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), filter 220ms ease;
}
.op-video-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.op-video-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
}
.op-video-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: op-pulse 1.6s ease-in-out infinite;
}
@keyframes op-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.85); }
}
.op-video-caption {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
  margin: 0;
  max-width: 720px;
}
.op-video-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px var(--accent-glow, rgba(150,88,255,0.25)),
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 0 120px -20px var(--accent-glow, rgba(150,88,255,0.4));
  aspect-ratio: 16 / 10;
}
.op-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.op-video-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, var(--accent-glow, rgba(150,88,255,0.35)) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 12px, transparent 12px 24px),
    #0a0a12;
}
.op-video-placeholder-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
  padding: 10px 16px;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 999px;
}
.op-video-corners span {
  position: absolute;
  width: 20px; height: 20px;
  border: 1.5px solid var(--accent-glow, rgba(255,255,255,0.6));
  opacity: 0.7;
}
.op-video-corners span:nth-child(1) { top: 12px; left: 12px;  border-right: none; border-bottom: none; }
.op-video-corners span:nth-child(2) { top: 12px; right: 12px; border-left:  none; border-bottom: none; }
.op-video-corners span:nth-child(3) { bottom: 12px; left: 12px;  border-right: none; border-top: none; }
.op-video-corners span:nth-child(4) { bottom: 12px; right: 12px; border-left:  none; border-top: none; }

@media (max-width: 720px) {
  .op-video { width: 100%; }
  .op-video-frame { aspect-ratio: 4 / 5; }
  .op-video-caption { font-size: 18px; }
}


/* ---- Testimonials See more / less ----------------------------------- */
.testimonial-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.testimonial-more {
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  color: white;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 14px 26px;
  border-radius: 100px;
  cursor: pointer;
  transition: 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.testimonial-more:hover {
  border-color: rgba(150,88,255,0.5);
  background: rgba(150,88,255,0.08);
  transform: translateY(-1px);
}
.testimonial-more .tm-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  background: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 60%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.testimonial-more .mono {
  opacity: 0.7;
  font-family: 'JetBrains Mono', monospace;
}

/* extra (revealed) testimonials fade in nicely */
.testimonial.tm-extra {
  animation: tm-fade-in 380ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.testimonial.tm-extra:nth-child(4)  { animation-delay: 30ms; }
.testimonial.tm-extra:nth-child(5)  { animation-delay: 60ms; }
.testimonial.tm-extra:nth-child(6)  { animation-delay: 90ms; }
.testimonial.tm-extra:nth-child(7)  { animation-delay: 120ms; }
.testimonial.tm-extra:nth-child(8)  { animation-delay: 150ms; }
.testimonial.tm-extra:nth-child(9)  { animation-delay: 180ms; }
.testimonial.tm-extra:nth-child(10) { animation-delay: 210ms; }
.testimonial.tm-extra:nth-child(11) { animation-delay: 240ms; }
.testimonial.tm-extra:nth-child(12) { animation-delay: 270ms; }
.testimonial.tm-extra:nth-child(13) { animation-delay: 300ms; }
@keyframes tm-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- See them in action (product demo cards) ----------------------------- */
.inaction-section .section-head p {
  max-width: 580px;
  margin: 14px auto 0;
  color: var(--soft);
  font-size: clamp(15px, 1.2vw, 17px);
}
.inaction-grid {
  margin: 0 auto;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.inaction-card {
  position: relative;
  border-radius: 28px;
  padding: 32px 28px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  isolation: isolate;
}
.inaction-nara {
  background: linear-gradient(160deg, #1a0d2e 0%, #3a1772 35%, #150a26 100%);
}
.inaction-cato {
  background: linear-gradient(160deg, #061a2c 0%, #0f4f8a 35%, #050f1c 100%);
}
.inaction-glow {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 60%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.7;
}
.inaction-nara .inaction-glow {
  background: radial-gradient(ellipse at 50% 50%, rgba(180,90,255,0.55), transparent 60%);
}
.inaction-cato .inaction-glow {
  background: radial-gradient(ellipse at 50% 50%, rgba(80,180,255,0.55), transparent 60%);
}
.inaction-top {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.inaction-quote {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 14px;
}
.inaction-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0 0 22px;
  max-width: 92%;
}
.inaction-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
  min-height: 320px;
}
.inaction-phone {
  position: relative;
  width: 240px;
  height: 360px;
  border-radius: 32px 32px 0 0;
  background: linear-gradient(180deg, #0a0a14, #050509);
  border: 1px solid rgba(255,255,255,0.14);
  border-bottom: 0;
  padding: 22px 12px 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 60px rgba(150,88,255,0.15);
  margin-bottom: 0;
}
.inaction-cato .inaction-phone {
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 60px rgba(80,180,255,0.18);
}
.inaction-phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 14px;
  border-radius: 999px;
  background: #050509;
  z-index: 3;
}
.inaction-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25));
  padding: 16px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  border-bottom: 0;
}
.inaction-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inaction-bubble {
  font-size: 11.5px;
  padding: 9px 12px;
  border-radius: 14px;
  max-width: 90%;
  line-height: 1.4;
  border: 1px solid rgba(255,255,255,0.06);
  animation: inaction-bubble-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.inaction-bubble-final { animation-delay: 0.2s; }
@keyframes inaction-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.inaction-bubble-you {
  align-self: flex-start;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  border-radius: 14px 14px 14px 4px;
}
.inaction-bubble-nara {
  align-self: flex-end;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(180,90,255,0.55), rgba(225,110,210,0.45));
  border-color: rgba(225,110,210,0.30);
}
.inaction-bubble-cato {
  align-self: flex-end;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(80,180,255,0.55), rgba(120,140,255,0.45));
  border-color: rgba(80,180,255,0.30);
}
.inaction-avatar {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 130px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  animation: inaction-avatar-float 4.6s ease-in-out infinite;
}
.inaction-avatar-nara {
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(180,90,255,0.55));
}
.inaction-avatar-cato {
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(80,180,255,0.55));
}
@keyframes inaction-avatar-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* result blocks rendered in the phone screen */
.inaction-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.inaction-result-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  margin: 4px 0 2px;
}
.inaction-chip,
.inaction-angle,
.inaction-email-card,
.inaction-ads-grid {
  opacity: 0;
  transform: translateY(8px);
  animation: inaction-result-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes inaction-result-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Nara: subject-line chips + scheduled email card */
.inaction-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
}
.inaction-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #c084ff, #ff6fc7);
  box-shadow: 0 0 8px rgba(200,120,255,0.7);
  flex: none;
}
.inaction-email-card {
  margin-top: 6px;
  padding: 10px 10px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(180,90,255,0.18), rgba(225,110,210,0.14));
  border: 1px solid rgba(225,110,210,0.28);
}
.inaction-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #fff;
}
.inaction-email-icon { font-size: 14px; line-height: 1; }
.inaction-email-time { flex: 1; font-weight: 500; }
.inaction-email-status {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(120,230,170,0.18);
  color: #6fe6a3;
  border: 1px solid rgba(120,230,170,0.30);
}
.inaction-email-bar {
  margin-top: 8px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.inaction-email-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c084ff, #ff6fc7);
  animation: inaction-bar-grow 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1.9s;
}
@keyframes inaction-bar-grow {
  to { width: 100%; }
}

/* Cato: angle rows + ad-creative grid */
.inaction-angle {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: #fff;
}
.inaction-angle-rank {
  font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
}
.inaction-angle-label { font-weight: 500; }
.inaction-angle-stat {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(80,180,255,0.18);
  color: #8fd4ff;
  border: 1px solid rgba(80,180,255,0.28);
}
.inaction-angle-stat-cpa {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.10);
}
.inaction-ads-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.inaction-ad-tile {
  aspect-ratio: 1;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(80,180,255,0.30), rgba(120,140,255,0.20));
  border: 1px solid rgba(80,180,255,0.25);
  opacity: 0;
  transform: scale(0.85);
  animation: inaction-tile-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  position: relative;
  overflow: hidden;
}
.inaction-ad-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: inaction-tile-shimmer 2.4s ease-in-out infinite;
  animation-delay: 2.6s;
}
@keyframes inaction-tile-pop {
  to { opacity: 1; transform: scale(1); }
}
@keyframes inaction-tile-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 880px) {
  .inaction-grid { grid-template-columns: 1fr; max-width: 480px; }
  .inaction-card { min-height: 560px; padding: 28px 22px 0; }
  .inaction-phone { width: 220px; height: 320px; }
  .inaction-avatar { width: 110px; right: -6px; bottom: -6px; }
}

/* ---- Why this works (vs manual) ------------------------------------------ */
.why-works-section .section-head h2 br { display: block; }
.why-toggle {
  position: relative;
  margin: 0 auto 28px;
  display: inline-flex;
  align-items: stretch;
  padding: 5px;
  border-radius: 999px;
  background: rgba(8, 8, 14, 0.6);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  width: fit-content;
}
.why-card { display: flex; flex-direction: column; align-items: center; }
.why-card-inner { width: 100%; animation: why-card-swap 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.why-toggle-btn {
  position: relative;
  z-index: 2;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--soft);
  border-radius: 999px;
  transition: color 280ms ease;
}
.why-toggle-btn.active { color: #fff; }
.why-toggle-btn:hover:not(.active) { color: var(--ink); }
.why-toggle-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(150,88,255,0.95), rgba(54,197,240,0.85));
  box-shadow: 0 8px 22px rgba(150,88,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1), background 380ms ease;
  z-index: 1;
}
.why-toggle.is-with .why-toggle-thumb {
  transform: translateX(100%);
  background: linear-gradient(135deg, rgba(120,230,170,0.95), rgba(54,197,240,0.85));
  box-shadow: 0 8px 22px rgba(120,230,170,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.why-toggle.is-without .why-toggle-thumb {
  transform: translateX(0);
  background: linear-gradient(135deg, rgba(255,95,126,0.95), rgba(255,160,140,0.85));
  box-shadow: 0 8px 22px rgba(255,95,126,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.why-works-single {
  margin: 32px auto 0;
  max-width: 560px;
}
.why-card {
  position: relative;
  padding: 28px 32px 32px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 420ms ease, box-shadow 420ms ease;
}
.why-card-win  { border-color: rgba(120, 230, 170, 0.22); box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 40px rgba(120,230,170,0.06), inset 0 1px 0 rgba(255,255,255,0.05); }
.why-card-fail { border-color: rgba(255, 95, 126, 0.18); box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 40px rgba(255,95,126,0.06), inset 0 1px 0 rgba(255,255,255,0.05); }
@keyframes why-card-swap {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.why-avatar {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-avatar-bg {
  position: absolute;
  inset: 50% 0 0 0;
  margin: 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.why-avatar-bg-fail {
  background: radial-gradient(circle, rgba(255, 110, 130, 0.40), rgba(255, 110, 130, 0.05) 70%);
}
.why-avatar-bg-win {
  background: radial-gradient(circle, rgba(120, 230, 170, 0.45), rgba(120, 230, 170, 0.05) 70%);
  box-shadow: 0 0 60px rgba(120, 230, 170, 0.30);
  animation: why-bg-pulse 3.4s ease-in-out infinite;
}
@keyframes why-bg-pulse {
  0%, 100% { box-shadow: 0 0 60px rgba(120, 230, 170, 0.28); }
  50%      { box-shadow: 0 0 90px rgba(120, 230, 170, 0.50); }
}
.why-avatar img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.why-avatar-dim img {
  filter: grayscale(1) brightness(0.55) contrast(1.05);
  opacity: 0.85;
}
.why-avatar-glow img {
  filter: drop-shadow(0 0 18px rgba(80, 180, 255, 0.45)) drop-shadow(0 0 30px rgba(120, 230, 170, 0.25));
  animation: why-glow-pulse 2.8s ease-in-out infinite;
}
@keyframes why-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(80, 180, 255, 0.40)) drop-shadow(0 0 28px rgba(120, 230, 170, 0.22)); }
  50%      { filter: drop-shadow(0 0 24px rgba(80, 180, 255, 0.65)) drop-shadow(0 0 40px rgba(120, 230, 170, 0.40)); }
}
.why-card-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--ink);
  text-align: left;
}
.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--soft);
}
.why-x, .why-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
.why-x     { background: rgba(255, 95, 126, 0.15); color: #ff6f8a; }
.why-check { background: rgba(120, 230, 170, 0.18); color: #6fe6a3; }

@media (max-width: 560px) {
  .why-toggle-btn { padding: 9px 16px; font-size: 13px; }
  .why-avatar { width: 180px; height: 180px; }
  .why-avatar-bg { width: 150px; height: 150px; }
  .why-card { padding: 30px 22px 26px; }
}

/* ---- Integrations: "Fully integrated with your stack" ---------------------- */
.integrations-section .section-head p {
  max-width: 640px;
  margin: 14px auto 0;
  color: var(--soft);
  font-size: clamp(15px, 1.2vw, 17px);
}
.integrations-stage {
  position: relative;
  margin: 60px auto 0;
  max-width: 1100px;
  height: 520px;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  overflow: hidden;
}
.integrations-floor {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%) rotateX(62deg);
  transform-origin: center bottom;
  width: 1200px;
  height: 700px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
}
.integrations-tiles {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  width: 100%;
  height: 100%;
}
.integration-tile {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: integration-tile-pulse 4.2s ease-in-out infinite;
}
.integrations-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 720px;
  height: 360px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(150,88,255,0.32) 0%, rgba(150,88,255,0.10) 35%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.integrations-orbs {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integration-orb {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  --tx: 0px;
  --ty: 0px;
  transform: translate(var(--tx), var(--ty));
  animation: integration-orb-float 5.2s ease-in-out infinite;
}
.integration-orb-logo {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 28px rgba(150,88,255,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 360ms ease;
}
.integration-orb-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.integration-orb:hover .integration-orb-logo {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 26px 50px rgba(0,0,0,0.55), 0 0 40px rgba(150,88,255,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.integration-orb-label {
  font-size: 12px;
  color: var(--soft);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.integration-center {
  position: relative;
  z-index: 5;
  animation: integration-orb-float 4s ease-in-out infinite;
}
.integration-center img {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(150,88,255,0.55), 0 0 60px rgba(150,88,255,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  background: linear-gradient(135deg, rgba(150,88,255,0.2), rgba(54,197,240,0.2));
}

@keyframes integration-orb-float {
  0%, 100% { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
  50%      { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 12px)); }
}
@keyframes integration-tile-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}

@media (max-width: 900px) {
  .integrations-stage { height: 460px; }
  .integration-orb-logo { width: 58px; height: 58px; padding: 11px; border-radius: 16px; }
  .integration-center img { width: 70px; height: 70px; border-radius: 20px; }
  .integration-orb-label { font-size: 10px; }
  .integrations-floor { width: 900px; height: 540px; }
}
@media (max-width: 720px) {
  .integrations-stage { height: 420px; }
  .integration-orb { transform: translate(calc(var(--tx) * 0.55), calc(var(--ty) * 0.7)); }
  @keyframes integration-orb-float {
    0%, 100% { transform: translate(calc(var(--tx, 0px) * 0.55), calc(var(--ty, 0px) * 0.7)); }
    50%      { transform: translate(calc(var(--tx, 0px) * 0.55), calc((var(--ty, 0px) * 0.7) - 8px)); }
  }
}