/* =========================================================================
   ScanBridge — Immersive sci-fi promo site
   Dark cinematic · holographic glassmorphism · neon gradients
   ========================================================================= */

:root {
  /* Deep-space backdrop */
  --bg-0: #03040c;
  --bg-1: #06081a;
  --bg-2: #0a0e25;
  --bg-3: #0e1433;

  /* Neon spectrum */
  --cyan:    #22d3ee;
  --cyan-2:  #67e8f9;
  --blue:    #3b82f6;
  --indigo:  #6366f1;
  --violet:  #8b5cf6;
  --magenta: #e879f9;
  --pink:    #f472b6;

  /* Glass */
  --glass:      rgba(146, 170, 255, 0.045);
  --glass-2:    rgba(146, 170, 255, 0.08);
  --glass-brd:  rgba(150, 180, 255, 0.14);
  --glass-brd2: rgba(150, 180, 255, 0.28);

  /* Text */
  --text-hi:  #f2f6ff;
  --text:     #b7c2e0;
  --text-mid: #8e9bc4;
  --text-dim: #626f99;

  /* Signature gradients */
  --grad-neon: linear-gradient(120deg, #22d3ee 0%, #6366f1 45%, #e879f9 100%);
  --grad-neon-soft: linear-gradient(120deg, rgba(34,211,238,0.9), rgba(139,92,246,0.9), rgba(232,121,249,0.9));
  --grad-line: linear-gradient(90deg, transparent, #22d3ee, #8b5cf6, transparent);

  /* Glow shadows */
  --glow-cyan:   0 0 0 1px rgba(34,211,238,0.25), 0 18px 50px rgba(34,211,238,0.18);
  --glow-violet: 0 0 0 1px rgba(139,92,246,0.25), 0 18px 50px rgba(139,92,246,0.22);
  --shadow-lg:   0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-md:   0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm:   0 6px 20px rgba(0, 0, 0, 0.4);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --container: 1200px;
  --nav-h: 76px;

  --t-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: var(--cyan); text-decoration: none; transition: color var(--t-fast); }
button { font-family: inherit; }

::selection { background: rgba(139, 92, 246, 0.4); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cyan), var(--violet));
  border-radius: 999px;
  border: 3px solid var(--bg-0);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================================
   Immersive background
   ========================================================================= */
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(232, 121, 249, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 40%, var(--bg-0) 100%);
}

.fx-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

/* Flowing aurora ribbons */
.aurora {
  position: absolute;
  width: 70vw;
  height: 70vw;
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  filter: blur(90px);
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora-1 {
  top: -25%; left: -15%;
  background: conic-gradient(from 90deg, rgba(34,211,238,0.55), rgba(99,102,241,0.35), rgba(34,211,238,0));
  animation: auroraDrift 26s ease-in-out infinite;
}
.aurora-2 {
  bottom: -30%; right: -20%;
  background: conic-gradient(from 220deg, rgba(232,121,249,0.5), rgba(139,92,246,0.4), rgba(232,121,249,0));
  animation: auroraDrift 32s ease-in-out infinite reverse;
}
@keyframes auroraDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(6vw, 4vh) rotate(60deg) scale(1.12); }
  66% { transform: translate(-5vw, -3vh) rotate(140deg) scale(0.95); }
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform;
}
.orb-1 {
  top: -160px; left: -100px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.7), transparent 70%);
  animation: floatY 18s ease-in-out infinite;
}
.orb-2 {
  top: 28%; right: -160px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.6), transparent 70%);
  animation: floatY 22s ease-in-out infinite reverse;
}
.orb-3 {
  bottom: -220px; left: 28%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(232, 121, 249, 0.4), transparent 70%);
  animation: floatX 28s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-60px) translateX(34px); }
}
@keyframes floatX {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(50px) scale(1.08); }
}

.grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(120, 160, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 160, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7), transparent 70%);
}

/* Perspective grid floor — depth illusion */
.grid-floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -10%;
  height: 60vh;
  background-image:
    linear-gradient(to right, rgba(34, 211, 238, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139, 92, 246, 0.18) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(420px) rotateX(70deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  opacity: 0.55;
  animation: gridScroll 14s linear infinite;
}
@keyframes gridScroll {
  to { background-position: 0 70px, 0 70px; }
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 100%);
}

/* =========================================================================
   Navigation
   ========================================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(6, 8, 22, 0.45);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.nav.scrolled {
  background: rgba(6, 8, 22, 0.78);
  border-bottom-color: var(--glass-brd);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-hi);
}
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 8px 24px rgba(34, 211, 238, 0.3);
}
.brand-name {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text-hi);
}
.brand-accent {
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  color: var(--text-mid);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--grad-neon);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
  transition: width var(--t-base);
}
.nav-links a:hover { color: var(--text-hi); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { display: inline-flex; align-items: center; gap: 10px; }
.nav-mobile-cta { display: none !important; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-sm);
  width: 42px; height: 42px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text-hi);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 26px; font-size: 1rem; border-radius: 13px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--grad-neon);
  background-size: 200% 100%;
  color: #04060f;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 12px 34px rgba(99, 102, 241, 0.45);
}
.btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.6), 0 18px 48px rgba(139, 92, 246, 0.6);
  transform: translateY(-2px);
}

.btn-outline {
  background: rgba(150, 180, 255, 0.03);
  color: var(--text-hi);
  border-color: var(--glass-brd2);
}
.btn-outline:hover {
  border-color: var(--cyan);
  color: var(--cyan-2);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { color: var(--text-hi); }

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  padding: 90px 0 110px;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 11px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.06);
  color: var(--cyan-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(34, 211, 238, 0.25);
  backdrop-filter: blur(6px);
}
.eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18), 0 0 12px var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,211,238,0.18), 0 0 12px var(--cyan); }
  50% { box-shadow: 0 0 0 9px rgba(34,211,238,0.02), 0 0 18px var(--cyan); }
}

.hero h1 {
  margin: 24px 0 22px;
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  font-weight: 800;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

.gradient-text {
  position: relative;
  background: var(--grad-neon);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hueFlow 8s linear infinite;
}
@keyframes hueFlow {
  to { background-position: 200% center; }
}

.lead {
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 34px;
  max-width: 560px;
}

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

.hero-meta {
  list-style: none;
  padding: 26px 0 0;
  margin: 50px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--glass-brd);
}
.hero-meta li { display: flex; flex-direction: column; gap: 3px; }
.hero-meta strong {
  font-size: 1.18rem;
  color: var(--text-hi);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-meta span { font-size: 0.85rem; color: var(--text-dim); }

/* Hero holographic visual stack */
.hero-visual {
  position: relative;
  height: 600px;
  perspective: 1400px;
}
.visual-stack {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.vc {
  position: absolute;
  background: linear-gradient(160deg, rgba(18, 26, 60, 0.72), rgba(8, 12, 30, 0.6));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 18px;
}
.vc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(34,211,238,0.5), transparent 40%, transparent 60%, rgba(232,121,249,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.float-1 { animation: float 7s ease-in-out infinite; }
.float-2 { animation: float 9s ease-in-out infinite 1s; }
.float-3 { animation: float 8s ease-in-out infinite 2s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.vc-browser { top: 0; left: 0; width: 62%; z-index: 3; }
.vc-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-brd);
}
.vc-browser-bar > span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.vc-browser-bar > span:nth-child(1) { background: #ff5f57; }
.vc-browser-bar > span:nth-child(2) { background: #febc2e; }
.vc-browser-bar > span:nth-child(3) { background: #28c840; }
.vc-url {
  margin-left: 10px;
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-brd);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  color: var(--cyan-2);
  font-family: "JetBrains Mono", monospace;
}
.vc-browser-body { padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.vc-row { display: flex; align-items: center; gap: 14px; }
.vc-label { font-size: 0.8rem; color: var(--text-dim); width: 90px; flex-shrink: 0; }
.vc-value {
  font-size: 0.9rem; color: var(--text-hi); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.vc-pill {
  font-size: 0.7rem;
  background: rgba(34, 211, 238, 0.14);
  color: var(--cyan-2);
  border: 1px solid rgba(34, 211, 238, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.vc-bar {
  flex: 1; height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.vc-bar span {
  display: block; height: 100%;
  background: var(--grad-neon);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  animation: barFill 2.5s ease-in-out infinite;
}
@keyframes barFill {
  0%, 100% { transform: scaleX(1); transform-origin: left; }
  50% { transform: scaleX(0.85); transform-origin: left; }
}
.vc-chips { display: flex; gap: 6px; }
.chip {
  font-size: 0.75rem; padding: 4px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-mid);
  border: 1px solid var(--glass-brd);
}
.chip-active {
  background: rgba(34, 211, 238, 0.16);
  color: var(--cyan-2);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.3);
}
.vc-pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.vc-page {
  aspect-ratio: 3 / 4;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-brd);
  border-radius: 6px;
  background-image:
    linear-gradient(transparent 22%, rgba(120,160,255,0.18) 22%, rgba(120,160,255,0.18) 24%, transparent 24%),
    linear-gradient(transparent 36%, rgba(120,160,255,0.18) 36%, rgba(120,160,255,0.18) 38%, transparent 38%),
    linear-gradient(transparent 50%, rgba(120,160,255,0.18) 50%, rgba(120,160,255,0.18) 52%, transparent 52%),
    linear-gradient(transparent 64%, rgba(120,160,255,0.18) 64%, rgba(120,160,255,0.18) 66%, transparent 66%);
}
.vc-page-add {
  background: transparent;
  border: 1.5px dashed var(--glass-brd2);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-2);
  font-weight: 600; font-size: 1.1rem;
  background-image: none;
}
.vc-cta {
  margin-top: 6px;
  background: var(--grad-neon);
  color: #04060f;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
.vc-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #04060f;
  box-shadow: 0 0 0 0 rgba(4, 6, 15, 0.6);
  animation: ctaPulse 1.6s ease-out infinite;
}
@keyframes ctaPulse {
  0% { box-shadow: 0 0 0 0 rgba(4, 6, 15, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(4, 6, 15, 0); }
}

.vc-service {
  bottom: 132px; right: 0; width: 56%;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(13, 20, 52, 0.92), rgba(8, 12, 30, 0.82));
  color: var(--text-hi);
  z-index: 4;
}
.vc-service-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-2);
  flex-shrink: 0;
}
.vc-service-title { font-weight: 600; font-size: 0.95rem; }
.vc-service-sub { font-size: 0.8rem; color: var(--text-dim); font-family: "JetBrains Mono", monospace; }
.vc-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem;
  color: var(--cyan-2);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.vc-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}

.vc-device {
  bottom: 0; right: 20px; width: 60%;
  display: flex; align-items: center; gap: 14px;
  color: var(--text-hi);
  z-index: 2;
}
.vc-device svg { color: var(--violet); }
.vc-device-title { font-weight: 600; font-size: 0.95rem; }
.vc-device-sub { font-size: 0.8rem; color: var(--text-dim); }

.vc-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.line {
  fill: none;
  stroke: url(#lineGrad);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.8));
  animation: dashFlow 2s linear infinite;
}
.line-b { animation-delay: 1s; }
@keyframes dashFlow { to { stroke-dashoffset: -32; } }

.hero-scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 2px solid var(--glass-brd2);
  border-radius: 12px;
  display: flex; justify-content: center;
  padding-top: 6px;
}
.hero-scroll span {
  width: 3px; height: 8px; border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* =========================================================================
   Stats strip
   ========================================================================= */
.stats { padding: 24px 0 64px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 30px 34px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
}
.stats-grid > div { border-right: 1px solid var(--glass-brd); padding-right: 24px; }
.stats-grid > div:last-child { border-right: none; }
.stat-num {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { margin-top: 4px; font-size: 0.92rem; color: var(--text); font-weight: 500; }
.stat-label span { display: block; font-size: 0.8rem; color: var(--text-dim); font-weight: 400; }

/* =========================================================================
   Sections - shared
   ========================================================================= */
.section { position: relative; padding: 104px 0; }
.section-soft {
  background: linear-gradient(180deg, rgba(10, 14, 37, 0.5), rgba(6, 8, 22, 0.2));
  border-top: 1px solid var(--glass-brd);
  border-bottom: 1px solid var(--glass-brd);
}
.section-dark {
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(34, 211, 238, 0.10), transparent 55%),
    radial-gradient(900px 600px at 80% 100%, rgba(232, 121, 249, 0.10), transparent 55%),
    linear-gradient(160deg, rgba(10, 14, 37, 0.7), rgba(8, 12, 30, 0.4));
  border-top: 1px solid var(--glass-brd);
  border-bottom: 1px solid var(--glass-brd);
  color: var(--text);
  overflow: hidden;
}
.section-dark .container { position: relative; z-index: 1; }

.section-head { max-width: 780px; margin: 0 auto 60px; text-align: center; }
.section-eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-eyebrow.accent { opacity: 0.95; }
.section-head h2 {
  margin: 0 0 16px;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--text-hi);
}
.section-lead { margin: 0; font-size: 1.08rem; color: var(--text-mid); }

/* Shared glass card surface */
.problem-card, .feature-card, .step, .usecase, .plan, .stats-grid {
  position: relative;
}

/* =========================================================================
   Problem
   ========================================================================= */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.problem-card {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  padding: 34px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 50% -20%, rgba(34, 211, 238, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.problem-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-brd2);
  box-shadow: var(--glow-cyan);
}
.problem-card:hover::before { opacity: 1; }
.problem-card > * { position: relative; }
.problem-num {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  font-family: "JetBrains Mono", monospace;
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.problem-card h3 { margin: 0 0 10px; font-size: 1.18rem; color: var(--text-hi); font-weight: 700; letter-spacing: -0.01em; }
.problem-card p { margin: 0; color: var(--text-mid); }
.problem-card strong { color: var(--cyan-2); }

/* =========================================================================
   Solution / architecture diagram
   ========================================================================= */
.arch {
  display: grid;
  grid-template-columns: 1fr auto 1.1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 42px 34px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  margin-bottom: 44px;
}
.arch-node {
  text-align: center;
  padding: 30px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-md);
  position: relative;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.arch-node:hover {
  transform: translateY(-5px);
  border-color: var(--glass-brd2);
  box-shadow: var(--glow-violet);
}
.arch-icon {
  width: 58px; height: 58px;
  border-radius: 15px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cyan-2);
  margin-bottom: 16px;
}
.arch-icon.glow {
  background: var(--grad-neon);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.5), 0 14px 40px rgba(99, 102, 241, 0.55);
}
.arch-icon.glow img { border-radius: 8px; }
.arch-node h4 { margin: 0 0 6px; font-size: 1.04rem; font-weight: 600; color: var(--text-hi); }
.arch-node p { margin: 0; font-size: 0.86rem; color: var(--text-mid); line-height: 1.5; }
.arch-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(232, 121, 249, 0.14);
  border: 1px solid rgba(232, 121, 249, 0.35);
  color: var(--magenta);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.arch-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-mid);
  min-width: 110px;
}
.arch-arrow svg { width: 100%; height: 24px; color: var(--cyan); }
.arch-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.7));
  animation: dashFlow 1.6s linear infinite;
}
.arch-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-weight: 600;
}
.solution-bullets {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}
.solution-bullets li {
  display: flex; gap: 12px;
  font-size: 0.98rem;
  color: var(--text);
  align-items: flex-start;
  position: relative;
  padding-left: 34px;
}
.solution-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}
.solution-bullets li::after {
  content: "";
  position: absolute;
  left: 6px; top: 11px;
  width: 8px; height: 5px;
  border-left: 2px solid var(--cyan-2);
  border-bottom: 2px solid var(--cyan-2);
  transform: rotate(-45deg);
}
.solution-bullets li span { color: var(--text-hi); font-weight: 600; margin-right: 4px; }

/* =========================================================================
   Features
   ========================================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  backdrop-filter: blur(12px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(34,211,238,0.4), transparent 35%, transparent 65%, rgba(232,121,249,0.4));
  opacity: 0;
  transition: opacity var(--t-base);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.feature-card:hover::before { opacity: 1; }
.feature-card > * { position: relative; }
.feature-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(139, 92, 246, 0.14));
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--cyan-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature-card h3 { margin: 0 0 8px; font-size: 1.04rem; color: var(--text-hi); font-weight: 700; letter-spacing: -0.005em; }
.feature-card p { margin: 0; color: var(--text-mid); font-size: 0.9rem; line-height: 1.55; }

/* =========================================================================
   Steps
   ========================================================================= */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 34px; left: 12%; right: 12%;
  height: 2px;
  background: var(--grad-line);
  opacity: 0.5;
}
.step {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  backdrop-filter: blur(12px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.step:hover { transform: translateY(-6px); border-color: var(--glass-brd2); box-shadow: var(--glow-cyan); }
.step-num {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--grad-neon);
  color: #04060f;
  font-weight: 800;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.5);
  font-family: "JetBrains Mono", monospace;
}
.step h3 { margin: 0 0 8px; font-size: 1.12rem; color: var(--text-hi); font-weight: 700; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--text-mid); font-size: 0.95rem; }

.how-callout {
  margin-top: 50px;
  background: linear-gradient(135deg, rgba(13, 20, 52, 0.8), rgba(8, 12, 30, 0.6));
  border: 1px solid var(--glass-brd);
  color: var(--text-hi);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  position: relative; overflow: hidden;
  backdrop-filter: blur(12px);
}
.how-callout::before {
  content: "";
  position: absolute;
  top: -120px; right: -100px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(232, 121, 249, 0.4), transparent 70%);
  pointer-events: none;
}
.how-callout strong { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.how-callout span { color: var(--text-mid); font-size: 0.95rem; }

/* =========================================================================
   Use cases
   ========================================================================= */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.usecase {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(12px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  overflow: hidden;
}
.usecase::after {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.usecase:hover { transform: translateY(-6px); border-color: var(--glass-brd2); box-shadow: var(--glow-violet); }
.usecase:hover::after { opacity: 1; }
.usecase-tag {
  display: inline-block; width: fit-content;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 600;
  background: var(--grad-neon);
  color: #04060f;
  padding: 4px 10px;
  border-radius: 6px;
  position: relative;
}
.usecase h4 { margin: 0; color: var(--text-hi); font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; position: relative; }
.usecase p { margin: 0; color: var(--text-mid); font-size: 0.9rem; position: relative; }

/* =========================================================================
   Comparison table
   ========================================================================= */
.compare-wrap { max-width: 980px; }
.compare {
  background: var(--glass);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-brd);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.compare-table th, .compare-table td { text-align: left; padding: 16px 24px; }
.compare-table thead th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-mid);
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 1px solid var(--glass-brd);
}
.compare-table thead th.us {
  background: var(--grad-neon);
  color: #04060f;
}
.compare-table tbody tr { border-bottom: 1px solid var(--glass-brd); }
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.compare-table td:first-child { color: var(--text-mid); font-weight: 500; }
.compare-table td { color: var(--text); }
.compare-table td.us {
  background: rgba(34, 211, 238, 0.06);
  color: var(--text-hi);
  font-weight: 600;
}
.compare-table td.us .check { display: inline-flex; align-items: center; gap: 8px; }
.compare-table td.us .check::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-neon);
  background-image:
    linear-gradient(45deg, transparent 40%, #04060f 40%, #04060f 50%, transparent 50%),
    linear-gradient(-45deg, transparent 40%, #04060f 40%, #04060f 60%, transparent 60%);
  background-size: 50% 50%, 50% 50%;
  background-position: 50% 30%, 30% 70%;
  background-repeat: no-repeat;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}

/* =========================================================================
   Pricing
   ========================================================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.plan {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  display: flex; flex-direction: column; gap: 18px;
  backdrop-filter: blur(12px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--glass-brd2); }
.plan-featured {
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(139, 92, 246, 0.25), transparent 60%),
    linear-gradient(160deg, rgba(16, 22, 55, 0.9), rgba(10, 14, 37, 0.8));
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: var(--glow-violet);
  transform: scale(1.03);
}
.plan-featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--grad-neon);
  opacity: 0.5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}
.plan-featured:hover { transform: scale(1.03) translateY(-6px); }
.plan > * { position: relative; }
.plan-badge {
  position: absolute;
  top: -14px; right: 24px;
  background: var(--grad-neon);
  color: #04060f;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.5);
  z-index: 2;
}
.plan-head h3 { margin: 0; font-size: 1.24rem; letter-spacing: -0.01em; color: var(--text-hi); font-weight: 700; }
.plan-head p { margin: 4px 0 0; color: var(--text-dim); font-size: 0.9rem; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price .amount {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text-hi);
}
.plan-featured .plan-price .amount {
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-price .period { color: var(--text-dim); font-size: 0.95rem; font-weight: 500; }
.plan-alt { font-size: 0.85rem; color: var(--text-dim); }
.plan-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 11px; flex: 1;
}
.plan-list li {
  position: relative;
  padding-left: 30px;
  color: var(--text);
  font-size: 0.93rem;
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.35);
}
.plan-list li::after {
  content: "";
  position: absolute;
  left: 6px; top: 7px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--cyan-2);
  border-bottom: 2px solid var(--cyan-2);
  transform: rotate(-45deg);
}
.plan-featured .plan-list li::after { border-color: var(--magenta); }
.plan-featured .btn-primary {
  background: #fff;
  color: #04060f;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.18);
}
.plan-featured .btn-primary:hover { background: #fff; box-shadow: 0 14px 40px rgba(255, 255, 255, 0.3); }

/* =========================================================================
   CTA
   ========================================================================= */
.cta {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 70px 52px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  border: 1px solid var(--glass-brd2);
}
.cta-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10, 14, 37, 0.96) 0%, rgba(16, 22, 55, 0.92) 50%, rgba(8, 12, 30, 0.96) 100%);
  z-index: -1;
}
.cta-bg::before, .cta-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
}
.cta-bg::before {
  top: -120px; left: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.7), transparent 70%);
  animation: floatY 14s ease-in-out infinite;
}
.cta-bg::after {
  bottom: -120px; right: -120px;
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(232, 121, 249, 0.6), transparent 70%);
  animation: floatY 18s ease-in-out infinite reverse;
}
.cta-content { max-width: 720px; position: relative; }
.cta h2 {
  margin: 12px 0 16px;
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  letter-spacing: -0.025em;
  line-height: 1.16;
  color: #fff;
}
.cta p { margin: 0 0 28px; color: rgba(255, 255, 255, 0.78); font-size: 1.06rem; }
.cta-grid {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cta-grid li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.cta-grid li span {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.4);
  position: relative; flex-shrink: 0;
}
.cta-grid li span::after {
  content: "";
  position: absolute;
  left: 9px; top: 11px;
  width: 8px; height: 5px;
  border-left: 2px solid var(--cyan-2);
  border-bottom: 2px solid var(--cyan-2);
  transform: rotate(-45deg);
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  background: linear-gradient(180deg, rgba(3, 4, 12, 0.4), var(--bg-0));
  border-top: 1px solid var(--glass-brd);
  color: var(--text-mid);
  padding: 70px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer-brand .brand { color: var(--text-hi); }
.footer-brand .brand-name { color: var(--text-hi); }
.footer-brand p { margin: 16px 0 0; max-width: 320px; font-size: 0.93rem; color: var(--text-dim); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-cols h4 { color: var(--text-hi); margin: 0 0 14px; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; }
.footer-cols a {
  display: block;
  color: var(--text-dim);
  font-size: 0.93rem;
  padding: 4px 0;
  transition: color var(--t-fast);
}
.footer-cols a:hover { color: var(--cyan-2); }
.footer-bottom { border-top: 1px solid var(--glass-brd); padding: 22px 0; }
.footer-bottom-inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--text-dim);
}

/* =========================================================================
   Reveal animations
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }

.problem-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.problem-grid .reveal:nth-child(2) { transition-delay: 100ms; }
.problem-grid .reveal:nth-child(3) { transition-delay: 200ms; }

.feature-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.feature-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.feature-grid .reveal:nth-child(3) { transition-delay: 120ms; }
.feature-grid .reveal:nth-child(4) { transition-delay: 180ms; }
.feature-grid .reveal:nth-child(5) { transition-delay: 240ms; }
.feature-grid .reveal:nth-child(6) { transition-delay: 300ms; }
.feature-grid .reveal:nth-child(7) { transition-delay: 360ms; }
.feature-grid .reveal:nth-child(8) { transition-delay: 420ms; }

.usecase-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.usecase-grid .reveal:nth-child(2) { transition-delay: 80ms; }
.usecase-grid .reveal:nth-child(3) { transition-delay: 160ms; }
.usecase-grid .reveal:nth-child(4) { transition-delay: 240ms; }
.usecase-grid .reveal:nth-child(5) { transition-delay: 320ms; }
.usecase-grid .reveal:nth-child(6) { transition-delay: 400ms; }

.steps .reveal:nth-child(1) { transition-delay: 0ms; }
.steps .reveal:nth-child(2) { transition-delay: 150ms; }
.steps .reveal:nth-child(3) { transition-delay: 300ms; }

.pricing-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.pricing-grid .reveal:nth-child(2) { transition-delay: 120ms; }
.pricing-grid .reveal:nth-child(3) { transition-delay: 240ms; }

/* =========================================================================
   Mobile menu open state
   ========================================================================= */
.nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { height: 600px; max-width: 600px; margin: 0 auto; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arch { grid-template-columns: 1fr; gap: 14px; }
  .arch-arrow {
    transform: none;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
  }
  .arch-arrow svg { display: none; }
  .arch-label { font-size: 0.72rem; text-align: center; }
  .arch-arrow::after {
    content: "";
    width: 13px; height: 13px;
    border-right: 2px solid var(--cyan);
    border-bottom: 2px solid var(--cyan);
    transform: rotate(45deg);
    margin-top: -2px;
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.7));
  }
}

/* The navigation goes to the menu button at 1120, not at 880 with everything
   else. This bar carries seven section links and two buttons, twice what the
   home page's does, and it stops fitting long before 880: measured at 1024 the
   bar's content needed 1035px, so Get support hung 21px past the right edge and
   the whole page scrolled sideways, all the way from 1080 down to 881. The bar
   needs 1076px in all, so 1120 leaves it 44 rather than the 5 that 1081 left.

   Nothing is lost by hiding them, because every link in the bar is a section of
   this page and the table of contents down the left carries the same list. */
@media (max-width: 1120px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav.menu-open .nav-links {
    display: flex;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 20px;
    gap: 4px;
    background: rgba(6, 8, 22, 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--glass-brd);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav.menu-open .nav-links a { padding: 14px 12px; border-radius: 10px; font-size: 1rem; }
  .nav.menu-open .nav-links a:hover,
  .nav.menu-open .nav-links a:focus { background: rgba(255, 255, 255, 0.04); }
  .nav.menu-open .nav-links a::after { display: none; }
  .nav.menu-open .nav-mobile-cta {
    display: inline-flex !important;
    margin-top: 10px;
    padding: 14px 20px;
    justify-content: center;
  }
}

@media (max-width: 880px) {
  .hero { padding: 60px 0 80px; }
  .hero h1 { font-size: clamp(2rem, 7vw, 2.9rem); }
  .hero-actions .btn { flex: 1 1 auto; min-width: 180px; }

  .hero-visual { height: auto; max-width: 480px; margin: 0 auto; }
  .visual-stack { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .vc { position: relative; inset: auto; width: 100%; }
  .float-1, .float-2, .float-3 { animation: none; }
  .vc-lines { display: none; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid > div:nth-child(2) { border-right: none; }
  .stats-grid > div:nth-child(1),
  .stats-grid > div:nth-child(2) { padding-bottom: 20px; border-bottom: 1px solid var(--glass-brd); }
  .stats-grid > div:nth-child(3),
  .stats-grid > div:nth-child(4) { padding-top: 20px; }

  .problem-grid, .feature-grid, .usecase-grid, .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .plan-featured { transform: none; }
  .plan-featured:hover { transform: translateY(-6px); }

  .how-callout { flex-direction: column; align-items: flex-start; }
  .how-callout > div { width: 100%; }
  .section-head { margin-bottom: 44px; }
}

@media (max-width: 600px) {
  .container { padding: 0 18px; }
  .nav-inner { padding: 0 18px; gap: 12px; }
  .brand-name { font-size: 1.05rem; }

  .section { padding: 72px 0; }
  .hero { padding: 44px 0 60px; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); margin-top: 18px; }
  .lead { font-size: 1rem; margin-bottom: 26px; }
  .hero-actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; padding-top: 22px; }
  .hero-meta li { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .hero-meta strong { font-size: 1rem; }
  .hero-scroll { display: none; }
  .grid-floor { display: none; }

  .stats { padding-top: 8px; }
  .stats-grid { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
  .stats-grid > div { border-right: none; border-bottom: 1px solid var(--glass-brd); padding: 0 0 18px; }
  .stats-grid > div:nth-child(1),
  .stats-grid > div:nth-child(2) { padding-bottom: 18px; }
  .stats-grid > div:nth-child(3),
  .stats-grid > div:nth-child(4) { padding-top: 0; }
  .stats-grid > div:last-child { border-bottom: none; padding-bottom: 0; }

  .problem-grid, .feature-grid, .usecase-grid, .pricing-grid { grid-template-columns: 1fr; }
  .problem-card { padding: 28px 24px; }
  .feature-card { padding: 24px 22px; }

  .arch { padding: 30px 20px; }
  .solution-bullets { grid-template-columns: 1fr; }

  .step { padding: 28px 24px; }
  .how-callout { padding: 26px 24px; }
  .how-callout strong { font-size: 1.25rem; }

  /* Comparison table → stacked comparison cards */
  .compare-wrap { padding: 0; }
  .compare {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    backdrop-filter: none;
  }
  .compare-table { min-width: 0; display: block; }
  .compare-table thead { display: none; }
  .compare-table tbody { display: block; }
  .compare-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    overflow: hidden;
    backdrop-filter: blur(12px);
  }
  .compare-table tbody tr:hover { background: var(--glass); }
  .compare-table td {
    display: block;
    padding: 13px 16px;
    border: none;
    font-size: 0.92rem;
  }
  .compare-table td:first-child {
    grid-column: 1 / -1;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-hi);
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid var(--glass-brd);
  }
  .compare-table td.us {
    background: rgba(34, 211, 238, 0.06);
    color: var(--text-hi);
  }
  .compare-table td:last-child {
    border-left: 1px solid var(--glass-brd);
    color: var(--text-mid);
  }
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 7px;
  }
  .compare-table td.us[data-label]::before {
    background: var(--grad-neon);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .plan { padding: 30px 24px; }
  .plan-badge { right: 18px; top: -12px; font-size: 0.7rem; padding: 5px 12px; }
  .plan-price .amount { font-size: 2.1rem; }

  .cta { padding: 44px 24px; border-radius: var(--radius-lg); }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }

  /* The band between the last block of the guide and the wordmark was 124px on
     a 520px screen: 72 of padding under the content and 52 above the footer.
     That is a third of a phone screen of black. The home page's own rhythm at
     this width is about 70px between two sections, so both halves come down to
     36 and the two together make the same 72. */
  .footer { padding-top: 36px; }
  .footer-inner { gap: 32px; padding-bottom: 32px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom-inner { flex-direction: column; gap: 8px; text-align: left; }
}

@media (max-width: 380px) {
  .nav-inner { gap: 8px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-name { font-size: 1rem; }
  .hero h1 { font-size: 1.75rem; }
  .footer-cols { grid-template-columns: 1fr; }
}

/* Lighten heavy background compositing on phones (prevents first-load jank) */
@media (max-width: 768px) {
  .aurora {
    filter: blur(55px);
    opacity: 0.32;
    mix-blend-mode: normal;
    animation-duration: 40s;
  }
  .aurora-2 { display: none; }
  .orb {
    filter: blur(70px);
    opacity: 0.4;
    mix-blend-mode: normal;
  }
  .orb-3 { display: none; }
  .scanlines { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .fx-particles { display: none; }
}