/* ============================================
   DOJO MAX — Design Tokens
   Dark, cinematic, powerhouse aesthetic
   ============================================ */
:root {
  /* Pure-black space base with subtle teal-tinted raised surfaces */
  --bg: #000000;
  --bg-2: #030706;
  --bg-raised: #0a1310;
  --ink: #f0f7f4;
  --ink-dim: #7c8f89;
  --ink-soft: #3f4a46;

  /* Halo system — cool white / icy blue (space, power) */
  --halo: #ffffff;
  --halo-soft: #d8ecff;
  --halo-deep: #5d8ca8;
  --halo-ice: #b4ddff;

  /* Dojo brand teal/mint — the primary UI accent */
  --teal: #1fe0a8;
  --teal-bright: #6de8c0;
  --teal-deep: #0a3a35;
  --teal-glow: rgba(31, 224, 168, 0.45);

  /* Legacy alias kept for existing rules — points to teal now */
  --cyan: #1fe0a8;
  --warm: #ff8d5a;

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.18);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius: 18px;
  --radius-lg: 28px;

  --max-w: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

em {
  font-style: italic;
  font-weight: inherit;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================
   NAV
   ============================================ */
#navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 5, 7, 0.5);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
#navbar.scrolled {
  border-bottom-color: var(--line);
  background: rgba(5, 5, 7, 0.8);
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
}
.logo span {
  background: linear-gradient(120deg, var(--halo-soft), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 0.35em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  font-size: 0.9rem;
}
.nav-links a { color: var(--ink-dim); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  color: var(--teal-deep) !important;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal));
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 0 24px -6px var(--teal);
  transition: transform .2s, box-shadow .3s;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px -4px var(--teal);
}
@media (max-width: 720px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* Nav over the light-background video section */
#navbar.nav-light {
  background: rgba(245, 243, 239, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
#navbar.nav-light .logo { color: #0a0a0a; }
#navbar.nav-light .logo span {
  background: linear-gradient(120deg, #0a3a35, #1fe0a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#navbar.nav-light .nav-links a { color: #6a6a6a; }
#navbar.nav-light .nav-links a:hover { color: #0a0a0a; }
#navbar.nav-light .nav-cta {
  color: #fff !important;
  background: linear-gradient(120deg, #0a3a35, #1a6b58);
  box-shadow: 0 0 24px -6px rgba(10, 58, 53, 0.5);
}

/* ============================================
   STAGE 1 — DARK VOID HERO WITH HALO RING
   ============================================ */
.stage-void {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(31, 224, 168, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at center, #020b09 0%, #000 60%, #000 100%);
}

.void-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* The Halo Rig — glowing ring stack */
.halo-rig {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vmin, 720px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.halo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    radial-gradient(circle, transparent 62%, rgba(180, 221, 255, 0.0) 63%) padding-box,
    conic-gradient(from 0deg,
      rgba(180, 221, 255, 0),
      var(--halo-soft) 15%,
      var(--cyan) 35%,
      var(--halo) 55%,
      rgba(31, 224, 168, 0.85) 70%,
      var(--halo-soft) 85%,
      rgba(180, 221, 255, 0)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: blur(0.3px) drop-shadow(0 0 18px var(--halo));
  animation: halo-spin 28s linear infinite;
}
.halo-ring-outer { inset: 0; border-width: 1px; opacity: 0.65; animation-duration: 38s; }
.halo-ring-mid   { inset: 8%; border-width: 2px; filter: blur(0.5px) drop-shadow(0 0 28px var(--halo)); animation-duration: 22s; animation-direction: reverse; }
.halo-ring-inner { inset: 18%; border-width: 1px; opacity: 0.85; filter: blur(0.2px) drop-shadow(0 0 14px var(--cyan)); animation-duration: 14s; }

.halo-core {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,255,255,0.85) 0%,
      rgba(216, 236, 255, 0.55) 15%,
      rgba(180, 221, 255, 0.25) 35%,
      rgba(31, 224, 168, 0.08) 55%,
      transparent 72%);
  filter: blur(14px);
  animation: halo-pulse 4.2s ease-in-out infinite;
}

.halo-beam {
  position: absolute;
  inset: 45% 0 0 0;
  background: radial-gradient(ellipse at center top,
    rgba(180, 221, 255, 0.35) 0%,
    rgba(180, 221, 255, 0.08) 28%,
    transparent 60%);
  filter: blur(30px);
  opacity: 0.7;
}

@keyframes halo-spin {
  to { transform: rotate(360deg); }
}
@keyframes halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* Product Teaser in Hero */
.hero-teaser-container {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  z-index: 1; /* Behind text, above halo */
  pointer-events: none;
  opacity: 0;
  filter: blur(40px);
}
@media (max-width: 768px) {
  .hero-teaser-container {
    max-width: 85%;
    top: 50%;
  }
}
.hero-teaser-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.85; /* Keep it subtle */
}

/* Void content (headline) */
.void-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
  max-width: 1200px;
}
.void-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--teal-bright);
  margin-bottom: 1.75rem;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up 1s .3s ease-out forwards;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(216,236,255,0.3);
  border-radius: 999px;
  background: rgba(10,10,15,0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: halo-pulse 1.6s ease-in-out infinite;
}
.void-sub {
  margin-top: 1.75rem;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink-dim);
  opacity: 0;
  animation: fade-up 1s .85s ease-out forwards;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
}
.void-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(180, 221, 255, 0.35);
  opacity: 0;
  animation: fade-up 1.2s .55s ease-out forwards;
}
/* ---- Launch status row (pre-launch scarcity signal) ---- */
.launch-status {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-top: 2.25rem;
  padding: 0.75rem 1.25rem;
  background: rgba(8, 42, 38, 0.4);
  border: 1px solid rgba(31, 224, 168, 0.2);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  animation: fade-up 1s 1.0s ease-out forwards;
}
.launch-status-item {
  padding: 0 1.25rem;
  text-align: left;
  min-width: 0;
}
.launch-status-item:first-child { padding-left: 0.25rem; }
.launch-status-item:last-child  { padding-right: 0.25rem; }
.launch-status-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.2vw, 0.98rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.launch-status-label {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.launch-status-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(216, 236, 255, 0.18), transparent);
}
.launch-status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 10px var(--teal-bright);
  animation: halo-pulse 1.6s ease-in-out infinite;
}
@media (max-width: 560px) {
  .launch-status {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    width: 100%;
    max-width: 360px;
  }
  .launch-status-item {
    padding: 0.5rem 0;
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .launch-status-item:first-child { padding-top: 0; }
  .launch-status-item:last-child  { padding-bottom: 0; }
  .launch-status-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 236, 255, 0.18), transparent);
  }
  .launch-status-label { margin-top: 0; }
}

.void-scroll-cue {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--teal-bright);
  text-transform: uppercase;
  z-index: 20;
  opacity: 0;
  animation: fade-up 1s 1.2s ease-out forwards;
}
.scroll-line {
  width: 2px;
  height: 65px;
  background: linear-gradient(var(--teal-bright), transparent);
  animation: scroll-trace 1.8s ease-in-out infinite;
  border-radius: 99px;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-trace {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   HERO SCROLL SEQUENCE — Cinematic text frames
   ============================================ */
.hero-static-intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  padding: 0 var(--gutter);
  will-change: opacity, filter;
}

.hero-text-container {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30vh;
  padding: 30vh 0;
}

.hero-text-frame {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 0 var(--gutter);
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.hero-text-frame .void-headline {
  animation: none;
  opacity: 1;
  position: relative;
}

.hero-text-frame .void-cta-meta {
  animation: none;
  opacity: 1;
}

/* Removed hold-indicator styles */

/* CTA row in hero */
.void-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  opacity: 0;
  animation: fade-up 1s 1.15s ease-out forwards;
}
.void-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 2.4rem;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal));
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  box-shadow: 0 0 32px -8px var(--teal);
  transition: transform 0.2s, box-shadow 0.3s;
}
.void-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 44px -6px var(--teal);
}
.void-cta-meta {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================

   GO MAX VIDEO SHOWCASE — light-to-dark transition
   The background mirrors the product transition
   ============================================ */
.stage-video {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* Smooth fade overlap connecting the dark void into the light showcase */
.stage-video::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(150px, 30vh, 400px);
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 100%);
  z-index: 10;
  pointer-events: none;
}

/* Light base layer — warm white */
.video-bg-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, #ffffff 0%, #f5f3ef 35%, #e8e4de 70%, #d4cfc7 100%);
  z-index: 0;
}

/* Dark overlay that fades in on scroll (JS sets --vp) */
.video-bg-dark {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 70%, #050808 0%, #020303 40%, #000 100%);
  z-index: 1;
  opacity: var(--vp, 0);
  transition: opacity 0.05s linear;
}

/* Subtle grain overlay */
.video-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.video-showcase-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) var(--gutter) clamp(4rem, 8vh, 6rem);
  max-width: 1100px;
  width: 100%;
}

/* Eyebrow — dark text initially, transitions with background */
.video-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  /* Starts dark on light bg, JS toggles .is-dark to switch */
  color: #0a3a35;
  border: 1px solid rgba(10, 58, 53, 0.3);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color 0.6s, border-color 0.6s, background 0.6s;
}
.stage-video.is-dark .video-eyebrow {
  color: var(--teal-bright);
  border-color: rgba(216, 236, 255, 0.3);
  background: rgba(10, 10, 15, 0.6);
}
.video-eyebrow .eyebrow-dot {
  background: #0a3a35;
  box-shadow: 0 0 10px rgba(10, 58, 53, 0.5);
  transition: background 0.6s, box-shadow 0.6s;
}
.stage-video.is-dark .video-eyebrow .eyebrow-dot {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

/* Headline — starts dark, fades to light */
.video-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #0a0a0a;
  transition: color 0.6s;
}
.video-headline em {
  background: linear-gradient(120deg, #0a3a35, #1fe0a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stage-video.is-dark .video-headline {
  color: var(--ink);
}
.stage-video.is-dark .video-headline em {
  background: linear-gradient(120deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
}

.video-sub {
  margin-top: 1.25rem;
  max-width: 560px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #4a4a4a;
  transition: color 0.6s;
}
.stage-video.is-dark .video-sub {
  color: var(--ink-dim);
}

/* Video frame container */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: auto;
}

/* Glow behind video */
.video-frame-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at center,
    rgba(31, 224, 168, 0.15) 0%,
    rgba(180, 221, 255, 0.08) 35%,
    transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.8s;
}
.stage-video.is-dark .video-frame-glow {
  opacity: 1;
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.8s;
}
.stage-video.is-dark .video-frame video {
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.9),
    0 0 60px -20px rgba(180, 221, 255, 0.15),
    0 0 0 1px rgba(216, 236, 255, 0.08);
}

/* Subtle premium border overlay */
.video-frame-border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
  transition: border-color 0.6s;
}
.stage-video.is-dark .video-frame-border {
  border-color: rgba(216, 236, 255, 0.1);
}

/* Colour selector chips */
.video-colours {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vh, 3rem);
}

.colour-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3a3a3a;
  transition: color 0.6s;
}
.stage-video.is-dark .colour-chip {
  color: var(--ink-dim);
}

.colour-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  transition: border-color 0.6s, box-shadow 0.6s;
}
.colour-swatch.swatch-white {
  background: #f3f1ec;
}
.colour-swatch.swatch-dark {
  background: #0a0a0a;
  border-color: rgba(0, 0, 0, 0.3);
}
.stage-video.is-dark .colour-swatch {
  border-color: rgba(255, 255, 255, 0.2);
}
.stage-video.is-dark .colour-swatch.swatch-dark {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.18);
}

.colour-divider {
  color: rgba(0, 0, 0, 0.15);
  font-size: 0.8rem;
  font-weight: 300;
  transition: color 0.6s;
}
.stage-video.is-dark .colour-divider {
  color: rgba(255, 255, 255, 0.12);
}

/* ============================================
   STAGE 2 — HALO AWAKENING (scroll-driven CSS)
   Scroll progress sets --p (0 → 1) on .halo-sticky.
   Every visual in this scene reads from --p.
   ============================================ */
.stage-halo {
  position: relative;
  /* Reduced height to 230vh to slightly quicken scroll transition */
  height: 230vh;
  background: #000;
}
.halo-sticky {
  --p: 0;            /* scroll progress, set by JS */
  --p-ease: 0;       /* eased version for nonlinear intensity */
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(ellipse at center,
    #04040a 0%,
    #020206 60%,
    #000 100%);
  perspective: 1200px;
}

/* ---- Atmospheric layers (behind everything) ---- */
.atmos { position: absolute; inset: 0; pointer-events: none; }

/* Starfield / dust behind the halo */
.atmos-stars {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.5px 1.5px at 28% 62%, rgba(216,236,255,0.55), transparent 55%),
    radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,0.5), transparent 55%),
    radial-gradient(1.8px 1.8px at 72% 38%, rgba(31,224,168,0.45), transparent 55%),
    radial-gradient(1px 1px at 82% 72%, rgba(255,255,255,0.45), transparent 55%),
    radial-gradient(1.5px 1.5px at 58% 82%, rgba(216,236,255,0.4), transparent 55%),
    radial-gradient(1px 1px at 92% 22%, rgba(255,255,255,0.35), transparent 55%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.45), transparent 55%);
  opacity: calc(0.25 + var(--p) * 0.75);
  transform: scale(calc(1 + var(--p) * 0.12));
}

/* Radial glow behind the device — intensifies with scroll */
.atmos-radial {
  background: radial-gradient(circle at 50% 52%,
    rgba(216,236,255,0.55) 0%,
    rgba(180,221,255,0.35) 12%,
    rgba(31,224,168,0.18) 28%,
    rgba(180,221,255,0.08) 45%,
    transparent 65%);
  opacity: calc(var(--p-ease) * 1);
  transform: scale(calc(0.35 + var(--p-ease) * 1.3));
  filter: blur(calc(20px + var(--p) * 30px));
  transform-origin: center 52%;
}

.atmos-vignette {
  background:
    radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,0.6) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.65) 100%);
  z-index: 5;
}

/* ---- Halo stack — centered behind the device ---- */
.halo-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vmin, 820px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Conic rays that rotate slowly — scale and brighten with scroll */
.halo-rays {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(216,236,255,0.18) 8deg,
    transparent 20deg,
    transparent 38deg,
    rgba(31,224,168,0.12) 46deg,
    transparent 58deg,
    transparent 82deg,
    rgba(216,236,255,0.15) 92deg,
    transparent 106deg,
    transparent 140deg,
    rgba(109, 232, 192, 0.14) 150deg,
    transparent 164deg,
    transparent 200deg,
    rgba(216,236,255,0.18) 212deg,
    transparent 226deg,
    transparent 260deg,
    rgba(31,224,168,0.14) 270deg,
    transparent 286deg,
    transparent 320deg,
    rgba(216,236,255,0.16) 330deg,
    transparent 346deg);
  -webkit-mask: radial-gradient(circle at center, black 20%, transparent 70%);
          mask: radial-gradient(circle at center, black 20%, transparent 70%);
  opacity: calc(var(--p-ease) * 0.9);
  transform: scale(calc(0.55 + var(--p-ease) * 0.85)) rotate(calc(var(--p) * 90deg));
  animation: halo-spin 38s linear infinite;
  filter: blur(calc(4px - var(--p) * 2px));
}

/* Sweeping gradient highlight that rotates counter-direction */
.halo-sweep {
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    transparent 0deg,
    rgba(216,236,255,0.35) 60deg,
    rgba(31,224,168,0.25) 90deg,
    rgba(216,236,255,0.3) 140deg,
    transparent 200deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 42%, black 48%, black 58%, transparent 66%);
          mask: radial-gradient(circle at center, transparent 42%, black 48%, black 58%, transparent 66%);
  opacity: calc(var(--p-ease) * 1);
  transform: scale(calc(0.4 + var(--p-ease) * 1.2)) rotate(calc(var(--p) * -140deg));
  animation: halo-spin 22s linear infinite reverse;
  filter: blur(calc(2px + (1 - var(--p)) * 3px));
}

/* Crisp halo rings — scale dramatically with scroll */
.halo-scene-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    conic-gradient(from 0deg,
      rgba(180,221,255,0),
      var(--halo-soft) 15%,
      var(--cyan) 35%,
      var(--halo) 55%,
      rgba(31, 224, 168, 0.9) 70%,
      var(--halo-soft) 85%,
      rgba(180,221,255,0)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 calc(6px + var(--p-ease) * 40px) var(--halo));
  will-change: transform, opacity;
}
.ring-outer {
  transform: scale(calc(0.12 + var(--p-ease) * 2.4));
  opacity: calc(0.15 + var(--p-ease) * 0.85);
  border-width: calc(1px + var(--p) * 1px);
  animation: halo-spin 40s linear infinite;
}
.ring-mid {
  transform: scale(calc(0.18 + var(--p-ease) * 1.65));
  opacity: calc(0.25 + var(--p-ease) * 0.75);
  border-width: calc(1.5px + var(--p) * 1.5px);
  animation: halo-spin 24s linear infinite reverse;
  filter: drop-shadow(0 0 calc(10px + var(--p-ease) * 50px) var(--halo));
}
.ring-inner {
  transform: scale(calc(0.22 + var(--p-ease) * 1.1));
  opacity: calc(0.4 + var(--p-ease) * 0.6);
  border-width: 1px;
  animation: halo-spin 14s linear infinite;
  filter: drop-shadow(0 0 calc(6px + var(--p-ease) * 30px) var(--cyan));
}

/* Core white-hot glow — emerges late */
.halo-scene-core {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.9) 0%,
    rgba(216,236,255,0.65) 15%,
    rgba(180,221,255,0.35) 35%,
    rgba(31,224,168,0.12) 55%,
    transparent 75%);
  filter: blur(20px);
  opacity: calc(var(--p-ease) * 1);
  transform: scale(calc(0.4 + var(--p-ease) * 1.4));
}

/* ---- The device PNG ---- */
.halo-device {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(65vmin, 700px);
  z-index: 3;
  display: grid;
  place-items: center;
}
@media (max-width: 768px) {
  .halo-device {
    width: min(85vw, 600px);
  }
}
.device-img {
  width: 100%;
  height: auto;
  /* Device lifts and brightens as scroll progresses */
  transform: translateY(calc((1 - var(--p-ease)) * 40px)) scale(calc(0.92 + var(--p-ease) * 0.12));
  filter:
    brightness(calc(0.55 + var(--p-ease) * 0.55))
    contrast(calc(0.95 + var(--p) * 0.08))
    drop-shadow(0 calc(20px + var(--p-ease) * 40px) calc(30px + var(--p-ease) * 60px) rgba(180,221,255, calc(0.25 + var(--p-ease) * 0.55)))
    drop-shadow(0 0 calc(var(--p-ease) * 60px) rgba(216,236,255, calc(var(--p-ease) * 0.6)));
  transition: none;
  will-change: transform, filter;
}
.device-shadow {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 80%;
  height: 12%;
  transform: translateX(-50%) scaleX(calc(0.6 + var(--p-ease) * 0.5));
  background: radial-gradient(ellipse at center, rgba(180,221,255, calc(0.35 + var(--p-ease) * 0.4)), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

.caption-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--teal-bright);
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(216, 236, 255, 0.35);
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 1.25rem;
}

/* ============================================
   SECTION 4: THE ARCHITECTURE / FEATURES
   ============================================ */
.features-section {
  background: radial-gradient(ellipse at center, rgba(180,221,255,0.05), transparent 70%), var(--bg);
}

.features-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  perspective: 1000px;
}

@media (max-width: 960px) {
  .features-card-grid {
    grid-template-columns: 1fr;
    perspective: 1200px; /* Keep 3D active for mobile */
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
  
  .feature-box {
    /* Step 2 (Option A): Subtle 3D depth to prevent squishing out of bounds */
    transform: rotateY(-8deg) scale(0.96) translateZ(-20px);
    padding: 2.5rem 1.8rem;
  }
  
  .feature-box:hover, .feature-box:active {
    /* Gentle lift on tap rather than a violent swing */
    transform: rotateY(0deg) scale(1.02) translateZ(10px);
    box-shadow: -10px 15px 30px rgba(0,0,0,0.6);
  }
}

.feature-box {
  position: relative;
  /* Step 1: Lighter contrast matching the Video section hue to pop against the black background */
  background: linear-gradient(180deg, rgba(32,44,56,0.85), rgba(12,16,22,0.95));
  border: 1px solid rgba(216,236,255,0.12);
  padding: 3rem 2.5rem;
  border-radius: var(--radius);
  /* Dramatically tilted 3D state, tucked away */
  transform-origin: center right;
  transform: rotateY(-40deg) scale(0.92) translateZ(-50px);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, z-index 0s;
  will-change: transform;
  z-index: 1;
}

.feature-box:hover {
  /* Face the user and lift out */
  transform: rotateY(0deg) scale(1.05) translateZ(40px);
  border-color: rgba(216, 236, 255, 0.25);
  box-shadow: -20px 20px 50px rgba(0,0,0,0.6);
  z-index: 10;
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, z-index 0s;
}

.feature-box h3 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0;
  letter-spacing: -0.02em;
  color: #fff;
  transition: margin 0.5s ease;
}

.feature-box p {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  line-height: 1.6;
  color: var(--ink-soft);
  transition: opacity 0.5s ease, max-height 0.6s cubic-bezier(0.2, 1, 0.3, 1), margin 0.5s ease;
}

.feature-box:hover h3 {
  margin-bottom: 1rem;
}

.feature-box:hover p {
  opacity: 1;
  max-height: 200px;
  margin-top: 1rem;
}


/* ============================================
   MARQUEE
   ============================================ */
.marquee-strip {
  position: relative;
  padding: 2.4rem 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #050508, #0a0a12 50%, #050508);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  letter-spacing: -0.02em;
  animation: marquee 22s linear infinite;
  padding-left: 3rem;
}
.marquee-track span:not(.dot) {
  background: linear-gradient(120deg, var(--ink), var(--halo-soft) 60%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marquee-track .dot { color: var(--halo); font-size: 0.6em; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================
   SHARED SECTION STYLES
   ============================================ */
.section {
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-head {
  max-width: 820px;
  margin-bottom: 4rem;
}
.section-head.narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.42em;
  color: var(--teal-bright);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
}
.section-lede {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--ink-dim);
  max-width: 640px;
}

/* ============================================
   POWER SECTION — SPEC CARDS
   ============================================ */
.power-section {
  background: radial-gradient(ellipse at top, rgba(180,221,255,0.08), transparent 60%), var(--bg);
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 960px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .spec-grid { grid-template-columns: 1fr; } }

.spec-card {
  position: relative;
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, rgba(15,15,21,0.95), rgba(10,10,15,0.95));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s ease, border-color .3s ease;
}
.spec-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, transparent 40%, rgba(180,221,255,0.4), transparent 70%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}
.spec-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 236, 255, 0.25);
}
.spec-card:hover::before { opacity: 1; }
.spec-card.accent {
  background:
    linear-gradient(180deg, rgba(8,42,38,0.55), rgba(10,10,15,0.95)),
    radial-gradient(ellipse at top, rgba(180,221,255,0.35), transparent 60%);
  border-color: rgba(216, 236, 255, 0.25);
}
.spec-huge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--ink), var(--halo-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}
.spec-unit {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--ink-dim);
  -webkit-text-fill-color: var(--ink-dim);
  margin-left: 0.15em;
}
.spec-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 1rem;
}
.spec-card p {
  color: var(--ink-dim);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* ============================================
   SPEED SECTION — VERSUS TABLE
   ============================================ */
.speed-section {
  padding-top: clamp(4rem, 10vh, 7rem);
  padding-bottom: clamp(5rem, 12vh, 9rem);
}
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.versus-col {
  padding: 2.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,15,21,0.75), rgba(10,10,15,0.9));
}
.versus-old { opacity: 0.72; }
.versus-max {
  border-color: rgba(216,236,255,0.35);
  background:
    linear-gradient(180deg, rgba(8,42,38,0.55), rgba(10,10,15,0.9)),
    radial-gradient(ellipse at top right, rgba(31,224,168,0.15), transparent 60%);
  box-shadow: 0 0 80px -20px var(--halo);
}
.versus-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal-bright);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.versus-old .versus-tag { color: var(--ink-soft); }
.versus ul { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.versus li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.versus li:last-child { border-bottom: none; }
.vs-metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
}
.versus-max .vs-metric {
  background: linear-gradient(120deg, var(--halo-soft), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vs-what {
  color: var(--ink-dim);
  font-size: 0.92rem;
  text-align: right;
}
.versus-divider {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  position: relative;
}
.versus-divider span {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
}
@media (max-width: 820px) {
  .versus { grid-template-columns: 1fr; }
  .versus-divider { padding: 0.5rem 0; }
}

/* ============================================
   HALO SHOWCASE — full-bleed breath between sections
   ============================================ */
.halo-showcase {
  position: relative;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter);
  background: linear-gradient(180deg, #000 0%, #05050a 50%, #000 100%);
  overflow: hidden;
}
.halo-showcase::before,
.halo-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(216,236,255,0.08), transparent 60%);
  pointer-events: none;
}
.halo-showcase-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.halo-showcase img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.9),
    0 0 80px -20px var(--halo);
}
.halo-showcase-copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0.5rem 0 1rem;
}
.halo-showcase-copy p {
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  max-width: 480px;
}
@media (max-width: 820px) {
  .halo-showcase-inner { grid-template-columns: 1fr; }
}

/* ============================================
   DESIGN SECTION — DEVICE SHOWCASE
   ============================================ */
.design-section { padding-top: clamp(4rem, 10vh, 7rem); }
.design-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .design-frame { grid-template-columns: 1fr; }
}
.overview-checklist {
  list-style: none;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.overview-checklist li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--teal-bright);
  background: linear-gradient(90deg, rgba(31,224,168,0.08), transparent);
  color: var(--ink-dim);
  font-size: 1.05rem;
}
.overview-checklist svg {
  color: var(--teal-bright);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.overview-checklist span {
  display: block;
}
.overview-checklist strong {
  color: var(--ink);
  font-weight: 600;
}

/* Real product hero for Design section */
.design-hero {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.design-hero::before {
  content: '';
  position: absolute;
  inset: -8%;
  background: radial-gradient(ellipse at center,
    rgba(180,221,255,0.35) 0%,
    rgba(31,224,168,0.12) 30%,
    transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  animation: halo-pulse 5s ease-in-out infinite;
}
.design-hero-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.9))
    drop-shadow(0 0 60px rgba(180,221,255,0.25));
}

/* Stylised device illustration (CSS only — no image) */
.design-device {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.device-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at center,
    rgba(180,221,255,0.45) 0%,
    rgba(31,224,168,0.15) 30%,
    transparent 60%);
  filter: blur(40px);
  animation: halo-pulse 5s ease-in-out infinite;
}
.device-shell {
  position: absolute;
  inset: 8% 14%;
  border-radius: 34px;
  background:
    linear-gradient(145deg, #2a2a35 0%, #0d0d12 40%, #050508 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.12),
    inset 0 -1px 1px rgba(0,0,0,0.6),
    0 40px 80px -20px rgba(0,0,0,0.9),
    0 0 60px -20px var(--halo);
  overflow: hidden;
}
.device-screen {
  position: absolute;
  inset: 6% 6% 22% 6%;
  background: radial-gradient(ellipse at top,
    rgba(8,42,38,0.9) 0%,
    #050508 70%);
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.device-ui {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 1rem;
}
.device-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
  background: linear-gradient(120deg, var(--ink), var(--halo-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.device-status {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--teal-bright);
  margin-bottom: 2rem;
}
.device-ring {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(216,236,255,0.4);
  position: relative;
  animation: halo-pulse 1.6s ease-in-out infinite;
}
.device-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo-soft) 0%, transparent 70%);
}
.device-reflect {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.08) 45%,
    transparent 55%);
  pointer-events: none;
}

/* ============================================
   BUILT FOR — VERTICAL GRID
   ============================================ */
.built-for {
  padding-top: clamp(4rem, 10vh, 7rem);
}
.verticals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.vertical {
  padding: 1.75rem 1.5rem;
  background: linear-gradient(180deg, rgba(15,15,21,0.9), rgba(10,10,15,0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
  position: relative;
  overflow: hidden;
}
.vertical::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 45%, rgba(180,221,255,0.4), transparent 75%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}
.vertical:hover {
  transform: translateY(-4px);
  border-color: rgba(216,236,255,0.25);
}
.vertical:hover::before { opacity: 1; }
.vertical h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  background: linear-gradient(120deg, var(--ink), var(--halo-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vertical p {
  color: var(--ink-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}
@media (max-width: 1000px) { .verticals { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .verticals { grid-template-columns: 1fr; } }

/* ============================================
   PRICING CARDS (inside CTA)
   ============================================ */
.pricing {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 0 auto 2.5rem;
  max-width: 480px;
  flex-wrap: wrap;
}
.price-card {
  flex: 1;
  min-width: 180px;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, rgba(8,42,38,0.45), rgba(10,10,15,0.85));
  border: 1px solid rgba(216,236,255,0.25);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--dojo-neon);
  box-shadow: 0 10px 25px rgba(31, 224, 168, 0.15);
}
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: rgba(31, 224, 168, 0.1);
  color: var(--dojo-neon);
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  border: 1px solid rgba(31, 224, 168, 0.2);
}
.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--dojo-neon);
  border-radius: 50%;
  animation: pulse-badge 2s infinite ease-in-out;
}
@keyframes pulse-badge {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(31, 224, 168, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(31, 224, 168, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(31, 224, 168, 0); }
}
.price-colour {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.75rem;
}
.swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
}
.swatch-black { background: #0a0a0a; box-shadow: inset 0 1px 2px rgba(255,255,255,0.18); }
.swatch-white { background: #f3f1ec; }
.price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, var(--ink), var(--halo-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.price-strike {
  font-size: 1.2rem;
  color: #666;
  text-decoration: line-through;
  -webkit-text-fill-color: #666;
  font-weight: 500;
}
.price-unit {
  font-size: 0.4em;
  color: var(--dojo-neon);
  -webkit-text-fill-color: var(--dojo-neon);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.2em;
}
.price-alt {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 600;
  transition: color 0.2s ease;
}
.price-card:hover .price-alt {
  color: var(--dojo-neon);
}
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  position: relative;
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) var(--gutter);
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(180,221,255,0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(31,224,168,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.cta-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
.cta-lede {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--ink-dim);
  margin-bottom: 2.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.cta-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.cta-form input {
  flex: 1;
  padding: 1rem 1.25rem;
  background: rgba(15,15,21,0.8);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color .2s;
}
.cta-form input:focus { border-color: var(--teal-bright); }
.cta-form input::placeholder { color: var(--ink-soft); }
.cta-form button {
  padding: 1rem 1.75rem;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal));
  color: var(--teal-deep);
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 0 28px -6px var(--teal);
  transition: transform .2s, box-shadow .3s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cta-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 36px -4px var(--teal);
}
.cta-success {
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;
  right: 0;
  color: var(--cyan);
  font-size: 0.9rem;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(-6px);
  transition: all .4s;
}
.cta-success.show { opacity: 1; transform: translateY(0); }
.cta-meta {
  margin-top: 3rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.15em;
}
@media (max-width: 540px) {
  .cta-form { flex-direction: column; }
  .cta-form button { justify-content: center; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: 3rem var(--gutter);
  background: #030304;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
}
.footer-brand span {
  background: linear-gradient(120deg, var(--halo-soft), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 0.35em;
}
.footer-meta { color: var(--ink-soft); font-size: 0.85rem; }

/* ============================================
   SCROLL REVEAL (set by JS when in view)
   ============================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================
   CURTAIN REVEAL — lives INSIDE #haloScene / .halo-sticky
   Panels overlay the halo+device. Behold text sits between them.
   z-layering (bottom → top):
     atmos → halo-stack (2) → halo-device / captions (3) →
     atmos-vignette (5) → curtain-behind (8) → curtain-panel (10)
   ============================================ */
.curtain-behind {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  z-index: 8;
  opacity: 0;                 /* GSAP scrubs this 0 → 1 → 0 */
  pointer-events: none;
  will-change: opacity, transform;
}
.curtain-reveal-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 6px 60px rgba(0,0,0,0.9), 0 0 80px rgba(216,236,255,0.15);
}
.curtain-reveal-sub {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
.curtain-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  z-index: 10;
  background: linear-gradient(180deg, #050807 0%, #000 100%);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  will-change: transform;
}
.curtain-left  { left: 0;  justify-content: flex-end;   padding-right: clamp(2rem, 6vw, 6rem); border-right: 1px solid rgba(216,236,255,0.08); }
.curtain-right { right: 0; justify-content: flex-start; padding-left:  clamp(2rem, 6vw, 6rem); border-left:  1px solid rgba(216,236,255,0.08); }
.curtain-panel h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 14vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--ink) 0%, var(--teal-bright) 120%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 80px rgba(216,236,255,0.08);
}

/* ============================================
   STICKY CARD STACK — Power section
   Each card pins at top, next slides over as you scroll
   ============================================ */
.stack-field {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 0 clamp(2rem, 4vh, 3rem) 0;
}
.stack-card {
  position: sticky;
  top: 100px;
  padding: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2rem;
  min-height: 380px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(8,42,38,0.55), rgba(5,5,7,0.95)),
    radial-gradient(ellipse at top right, rgba(31,224,168,0.2), transparent 60%);
  border: 1px solid rgba(216,236,255,0.1);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.9),
    0 0 80px -40px rgba(31,224,168,0.3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: flex-end;
  overflow: hidden;
  will-change: transform, opacity;
}
.stack-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at top left, rgba(216,236,255,0.08), transparent 60%);
  pointer-events: none;
}
/* Staggered sticky-top so each card peeks below the previous */
.stack-card:nth-child(1) { top: 80px;  z-index: 1; }
.stack-card:nth-child(2) { top: 100px; z-index: 2; }
.stack-card:nth-child(3) { top: 120px; z-index: 3; }
.stack-card:nth-child(4) { top: 140px; z-index: 4; }
.stack-card-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: auto;
  position: relative;
  z-index: 2;
}
.stack-card-huge {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.8rem, 9vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--ink) 0%, var(--teal-bright) 80%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}
.stack-card-unit {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--ink-dim);
  -webkit-text-fill-color: var(--ink-dim);
  margin-left: 0.18em;
}
.stack-card h3 {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stack-card p {
  position: relative;
  z-index: 2;
  color: var(--ink-dim);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  max-width: 50ch;
}

/* ============================================
   ODOMETER — rolling digit counter
   ============================================ */
.odometer {
  display: inline-flex;
  justify-content: center;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: -0.02em;
  vertical-align: baseline;
}
.odo-digit {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  position: relative;
}
.odo-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.odo-strip span {
  display: block;
  height: 1em;
  line-height: 1;
}
.odo-inline { color: inherit; }

/* ============================================
   ARSENAL BENTO GRID
   Premium media-rich cards
   ============================================ */
.arsenal-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  padding: 0 var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}
.bento-card {
  position: relative;
  background: linear-gradient(180deg, #090e0c 0%, #030504 100%);
  border: 1px solid rgba(216,236,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}
.bento-card:hover {
  transform: translateY(-6px);
  border-color: rgba(31,224,168,0.25);
}
.bento-tall {
  grid-column: span 5;
  grid-row: span 1;
  min-height: 480px;
}
.bento-wide {
  grid-column: span 7;
  grid-row: span 1;
}
.bento-square {
  grid-column: span 7;
  grid-row: span 1;
  min-height: 400px;
}
.tap-to-pay-card {
  grid-column: span 5;
  grid-row: span 1;
  min-height: 400px;
}

/* Base content inside bento */
.bento-content {
  position: relative;
  z-index: 2;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}
.bento-media {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #030504;
}

.bento-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 0.75rem;
}
.bento-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.bento-card p {
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.55;
  max-width: 38ch;
}

/* Cashback Custom BG */
.cashback-card {
  background: radial-gradient(circle at 80% 20%, rgba(31,224,168,0.08) 0%, #030504 60%);
}

.cashback-card-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 2rem;
}

.cashback-media {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.css-dojo-card {
  width: 90%;
  max-width: 320px;
  aspect-ratio: 1.586 / 1;
  background: #022c22; /* Very dark green/teal */
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  transform: rotate(-4deg) translateY(-10px);
  transition: transform 0.4s ease;
  overflow: hidden;
}

/* Semi-circle cutout on the left edge */
.css-dojo-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 24px;
  height: 24px;
  background: #030504; /* Matches bento card background */
  border-radius: 50%;
  transform: translateY(-50%);
}

.cashback-card:hover .css-dojo-card {
  transform: rotate(-1deg) translateY(-15px) scale(1.02);
}

.dojo-card-top {
  display: flex;
  justify-content: flex-end;
}
.card-partner {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: -0.02em;
}

.dojo-card-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.2rem;
  color: var(--teal-bright);
  letter-spacing: -0.02em;
}
.card-chip {
  width: 38px;
  height: 28px;
  background: linear-gradient(135deg, #d4d4d8 0%, #a1a1aa 100%);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.card-chip::after {
  content: "";
  position: absolute;
  top: 5px; bottom: 5px; left: 10px; right: 10px;
  border-left: 1px solid rgba(0,0,0,0.2);
  border-right: 1px solid rgba(0,0,0,0.2);
}
.card-chip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 12px; height: 1px;
  background: rgba(0,0,0,0.2);
}

.dojo-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.card-circles {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  position: absolute;
  bottom: -15px;
  left: 30px;
}
.card-circles span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0));
}
.card-network {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}
.card-network strong {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -1px;
  position: relative;
}
.card-network strong::before {
  content: "";
  position: absolute;
  top: 0; left: -10px; width: 100%; height: 2px;
  background: #fff;
  border-top-left-radius: 2px;
}
.card-network span {
  font-size: 0.6rem;
  color: #fff;
  opacity: 0.8;
  margin-top: 2px;
}

.cashback-card:hover .dojo-cc-img {
  transform: rotate(-1deg) translateY(-15px) scale(1.02);
}

.cashback-arrow {
  margin-top: 1.5rem;
  animation: bounceRotate 2s infinite ease-in-out;
  opacity: 0.8;
  position: absolute;
  right: -10px;
  bottom: 2rem;
}

@keyframes bounceRotate {
  0%, 100% { transform: translateY(0) rotate(15deg); opacity: 0.5; }
  50% { transform: translateY(8px) rotate(15deg); opacity: 1; }
}

@media (max-width: 768px) {
  .cashback-card-inner {
    flex-direction: column;
    gap: 1rem;
  }
  .cashback-media {
    width: 100%;
    margin-top: 2rem;
  }
  .cashback-arrow {
    right: 50%;
    margin-right: -20px;
    bottom: -1rem;
    animation: bounceRotateMobile 2s infinite ease-in-out;
  }
  @keyframes bounceRotateMobile {
    0%, 100% { transform: translateY(0) rotate(90deg); opacity: 0.5; }
    50% { transform: translateY(10px) rotate(90deg); opacity: 1; }
  }
}
.cashback-calculator {
  margin-top: 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.5rem;
}
.calc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.calc-top label {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.slider-val {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink);
}
.styled-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  outline: none;
  margin-bottom: 1.5rem;
}
.styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-bright);
  cursor: pointer;
  box-shadow: 0 0 15px rgba(31,224,168,0.6);
}
.calc-result {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1rem;
}
.calc-result span {
  font-size: 0.9rem;
  color: var(--ink-dim);
}
.result-val {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--teal-bright);
  text-shadow: 0 0 20px rgba(31,224,168,0.3);
}

/* Tap To Pay Fake Graphic */
.tap-to-pay-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(31,224,168,0.05), transparent 70%);
}
.iphone-mockup {
  width: 80px;
  height: 160px;
  border: 3px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iphone-mockup::before {
  content:'';
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 5px; border-radius: 10px;
  background: rgba(255,255,255,0.2);
}
.nfc-waves {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  transform: translateY(-20px);
}
.nfc-waves span {
  display: block;
  border: 2px solid var(--teal-bright);
  border-radius: 50% 50% 0 0;
  border-bottom: none;
  opacity: 0;
  animation: nfcPulse 2s infinite ease-out;
}
.nfc-waves span:nth-child(1) { width: 40px; height: 20px; animation-delay: 0.4s; }
.nfc-waves span:nth-child(2) { width: 30px; height: 15px; animation-delay: 0.2s; }
.nfc-waves span:nth-child(3) { width: 20px; height: 10px; animation-delay: 0s; }

@keyframes nfcPulse {
  0% { opacity: 0; transform: translateY(10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@media (max-width: 1024px) {
  .arsenal-bento { grid-template-columns: 1fr; }
  .bento-tall, .bento-wide, .bento-square, .tap-to-pay-card {
    grid-column: span 1;
    grid-row: auto;
    min-height: 400px;
  }
}

/* ============================================
   ZOOM-PARALLAX — design hero image
   ============================================ */
.design-hero {
  perspective: 1200px;
}
.design-hero-img {
  transform-origin: center center;
  will-change: transform;
}

/* ============================================
   GSAP REVEAL STATES — smooth section entry
   ============================================ */
.glide-in {
  opacity: 0;
  transform: translateY(40px);
}

/* ============================================
   INTELLIGENCE SECTION — hero number + viz cards
   ============================================ */

/* hero-num: solid teal colouring (no background-clip trick).
   The odometer creates nested spans with overflow:hidden + transforms;
   background-clip: text doesn't clip reliably to those, so we use
   direct colour for bulletproof rendering across browsers. */
.hero-num {
  display: inline-flex;
  align-items: baseline;
  font-style: italic;
  font-weight: inherit;
  color: var(--teal-bright);
  text-shadow: 0 0 24px rgba(31, 224, 168, 0.25);
}
.hero-num .odometer,
.hero-num .odo-digit,
.hero-num .odo-strip,
.hero-num .odo-strip span {
  color: var(--teal-bright);
}
.hero-num-inline {
  font-size: 1.05em;
  font-weight: 700;
}
.intel-eyebrow {
  color: var(--teal-bright);
}

/* ---- Dojo Intelligence product badge ----
   Sits above the section head to make it clear this is a real product
   in the Dojo lineup, not a marketing buzzword. */
.intel-product-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto clamp(2rem, 4vh, 3rem);
  padding: 0.6rem 1rem 0.6rem 1.4rem;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(31, 224, 168, 0.4);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 42, 38, 0.8), rgba(5, 12, 10, 0.95));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 0 40px -12px rgba(31, 224, 168, 0.35);
  animation: badge-breathe 4s ease-in-out infinite;
  position: relative;
}

@keyframes badge-breathe {
  0%, 100% { 
    box-shadow: 0 0 30px -10px rgba(31, 224, 168, 0.4), 0 0 0 1px rgba(31, 224, 168, 0.2); 
    border-color: rgba(31, 224, 168, 0.3);
  }
  50% { 
    box-shadow: 0 0 60px -5px rgba(31, 224, 168, 0.7), 0 0 0 1px rgba(31, 224, 168, 0.5); 
    border-color: rgba(31, 224, 168, 0.6);
  }
}

.intel-product-badge-host {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-base);
  white-space: nowrap;
}

.intel-product-badge-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal));
  color: var(--teal-deep);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.3s;
  text-decoration: none;
  box-shadow: 0 0 24px -2px rgba(31, 224, 168, 0.6);
}

.intel-product-badge-link::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shine-sweep 4s ease-in-out infinite;
  transform: skewX(-20deg);
}

@keyframes shine-sweep {
  0%, 60% { left: -100%; }
  100% { left: 200%; }
}

.intel-product-badge-link:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 32px 2px rgba(31, 224, 168, 0.8);
}

.intel-product-badge-link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-deep);
  box-shadow: 0 0 8px rgba(10, 58, 53, 0.8);
  animation: badge-dot-pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes badge-dot-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

.intel-product-plus {
  color: var(--teal-bright);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  opacity: 0.8;
}

@media (max-width: 560px) {
  .intel-product-badge { padding: 0.5rem 0.75rem 0.5rem 1rem; gap: 0.5rem; }
  .intel-product-badge-host { font-size: 0.65rem; letter-spacing: 0.25em; }
  .intel-product-badge-link { padding: 0.4rem 0.8rem; font-size: 0.7rem; }
  .intel-product-plus { font-size: 0.85rem; }
}

/* ---- Three pillars: Customers / Competitors / Business ---- */
.intel-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: clamp(2.5rem, 5vh, 4rem) auto;
  padding: 0 var(--gutter);
}
@media (max-width: 760px) {
  .intel-pillars { grid-template-columns: 1fr; }
}

.intel-pillar {
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(216, 236, 255, 0.06);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(8, 42, 38, 0.25), rgba(5, 5, 7, 0.6)),
    radial-gradient(ellipse at top, rgba(31, 224, 168, 0.06), transparent 60%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s;
}
.intel-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 224, 168, 0.2);
}

.intel-pillar-icon {
  margin: 0 auto 1.25rem;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 224, 168, 0.06);
  border: 1px solid rgba(31, 224, 168, 0.15);
}
.intel-pillar-icon svg {
  width: 36px;
  height: 36px;
}

.intel-pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.65rem;
}

.intel-pillar-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 32ch;
  margin: 0 auto;
}

/* ---- Intelligence statement — full-width data power moment ---- */
.intel-statement {
  max-width: 1100px;
  margin: clamp(3rem, 6vh, 5rem) auto 0;
  padding: 0 var(--gutter);
}

.intel-statement-inner {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.intel-statement-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.intel-statement-text {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--ink-dim);
  max-width: 600px;
  text-align: left;
  line-height: 1.55;
}
.intel-statement-text em {
  font-style: normal;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.intel-statement-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(8, 42, 38, 0.45), rgba(5, 5, 7, 0.85)),
    radial-gradient(ellipse at center, rgba(31, 224, 168, 0.08), transparent 60%);
  border: 1px solid rgba(31, 224, 168, 0.15);
  box-shadow: 0 0 60px -20px rgba(31, 224, 168, 0.2);
}
@media (max-width: 760px) {
  .intel-statement-bar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .intel-statement-divider { display: none; }
}

.intel-statement-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  padding: 0 clamp(0.5rem, 1.5vw, 1.5rem);
}

.intel-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--ink) 0%, var(--teal-bright) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intel-stat-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.intel-statement-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(31, 224, 168, 0.3), transparent);
}

/* ---- Grid of visual explainer cards ---- */
.intel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: clamp(3rem, 6vh, 5rem) auto 0;
}
@media (max-width: 760px) {
  .intel-grid { grid-template-columns: 1fr; }
}

.intel-card {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background:
    linear-gradient(180deg, rgba(8,42,38,0.5), rgba(5,5,7,0.92)),
    radial-gradient(ellipse at top right, rgba(31,224,168,0.15), transparent 55%);
  border: 1px solid rgba(216,236,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s;
}
.intel-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 40%, rgba(31,224,168,0.25), transparent 75%);
  opacity: 0;
  transition: opacity 0.4s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}
.intel-card:hover {
  transform: translateY(-4px);
  border-color: rgba(31,224,168,0.3);
}
.intel-card:hover::after { opacity: 1; }

.intel-card-tag {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-bright);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(31,224,168,0.3);
  border-radius: 999px;
  background: rgba(8,42,38,0.4);
}
.intel-card-title {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.intel-card-text {
  margin-top: 0.5rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 38ch;
}

/* ---- Visualization container ---- */
.intel-viz {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(31,224,168,0.08), transparent 65%),
    linear-gradient(180deg, #05100d 0%, #020504 100%);
  border: 1px solid rgba(216,236,255,0.06);
}
.intel-viz svg { display: block; width: 100%; height: 100%; }
.intel-viz-chip {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-bright);
  background: rgba(5,12,10,0.8);
  border: 1px solid rgba(31,224,168,0.25);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.intel-viz-chip-pin { top: auto; bottom: 0.9rem; left: 0.9rem; right: auto; }
.intel-viz-chip-up { top: 0.9rem; left: 0.9rem; right: auto; color: var(--ink); border-color: rgba(216,236,255,0.2); }

/* ---- Radar viz ---- */
.intel-viz-radar svg circle.radar-pulse {
  transform-origin: 100px 100px;
  animation: radar-pulse 2.8s ease-out infinite;
}
@keyframes radar-pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  80%  { transform: scale(7);    opacity: 0; }
  100% { transform: scale(7);    opacity: 0; }
}
.intel-viz-radar .radar-dot {
  transform-origin: center;
  animation: radar-dot-blink 3.2s ease-in-out infinite;
}
.intel-viz-radar .radar-dot:nth-child(7)  { animation-delay: 0.3s; }
.intel-viz-radar .radar-dot:nth-child(8)  { animation-delay: 0.9s; }
.intel-viz-radar .radar-dot:nth-child(9)  { animation-delay: 1.5s; }
.intel-viz-radar .radar-dot:nth-child(10) { animation-delay: 2.1s; }
@keyframes radar-dot-blink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}

/* ---- Bars viz ---- */
.intel-viz-bars .bar {
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.intel-viz-bars .bar:nth-child(1) { transition-delay: 0.05s; }
.intel-viz-bars .bar:nth-child(2) { transition-delay: 0.12s; }
.intel-viz-bars .bar:nth-child(3) { transition-delay: 0.19s; }
.intel-viz-bars .bar:nth-child(4) { transition-delay: 0.26s; }
.intel-viz-bars .bar:nth-child(5) { transition-delay: 0.33s; }
.intel-viz-bars .bar:nth-child(6) { transition-delay: 0.40s; }
.intel-viz-bars .bar:nth-child(7) { transition-delay: 0.47s; }
.intel-viz-bars .bar:nth-child(8) { transition-delay: 0.54s; }
.intel-viz-bars .bar:nth-child(9) { transition-delay: 0.61s; }
.intel-viz.is-in .bar { transform: scaleY(1); }

/* ---- Heatmap grid viz ---- */
.intel-viz-grid { display: grid; place-items: center; padding: 1rem; }
.heat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 320px;
}
.heat-grid span {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  transition: background 0.6s ease, transform 0.6s ease;
  transform: scale(0.4);
  opacity: 0;
}
.intel-viz-grid.is-in .heat-grid span { transform: scale(1); opacity: 1; }
.heat-grid .h1 { background: rgba(31,224,168,0.08); }
.heat-grid .h2 { background: rgba(31,224,168,0.18); }
.heat-grid .h3 { background: rgba(31,224,168,0.35); }
.heat-grid .h4 { background: rgba(31,224,168,0.58); }
.heat-grid .h5 { background: rgba(109,232,192,0.85); box-shadow: 0 0 8px rgba(31,224,168,0.5); }
.heat-grid .heat-hot {
  background: #ffffff;
  box-shadow: 0 0 16px rgba(255,255,255,0.6), 0 0 24px rgba(31,224,168,0.7);
  animation: heat-pulse 2s ease-in-out infinite;
}
@keyframes heat-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,255,255,0.6), 0 0 24px rgba(31,224,168,0.7); }
  50%      { box-shadow: 0 0 24px rgba(255,255,255,0.9), 0 0 40px rgba(31,224,168,0.9); }
}
/* Stagger cells in */
.heat-grid span:nth-child(n)    { transition-delay: 0.02s; }
.heat-grid span:nth-child(2n)   { transition-delay: 0.08s; }
.heat-grid span:nth-child(3n)   { transition-delay: 0.14s; }
.heat-grid span:nth-child(5n)   { transition-delay: 0.20s; }
.heat-grid span:nth-child(7n)   { transition-delay: 0.26s; }

/* ---- Line chart viz ---- */
.intel-viz-line .line-path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.intel-viz-line .line-area {
  opacity: 0;
  transition: opacity 1s ease 1s;
}
.intel-viz-line circle {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.intel-viz-line circle:nth-of-type(1) { transition-delay: 1.1s; }
.intel-viz-line circle:nth-of-type(2) { transition-delay: 1.3s; }
.intel-viz-line circle:nth-of-type(3) { transition-delay: 1.5s; }
.intel-viz-line circle:nth-of-type(4) { transition-delay: 1.7s; }
.intel-viz.is-in .line-path { stroke-dashoffset: 0; }
.intel-viz.is-in .line-area { opacity: 1; }
.intel-viz.is-in .line-line circle,
.intel-viz.is-in circle { opacity: 1; transform: scale(1); }

/* ============================================
   H-CARD ICON — SVG icons in capability cards
   ============================================ */
.h-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  opacity: 0.85;
}
.h-card-7::before { background: radial-gradient(circle at 35% 25%, rgba(180,221,255,0.2), transparent 55%), radial-gradient(circle at 80% 85%, rgba(31,224,168,0.25), transparent 55%); }
.h-card-8::before { background: radial-gradient(circle at 25% 30%, rgba(109,232,192,0.22), transparent 55%), radial-gradient(circle at 80% 80%, rgba(216,236,255,0.18), transparent 55%); }

/* ============================================
   COMMERCIAL HOOKS — Deal-closing section
   ============================================ */
.commercial-section {
  background: #030303;
  position: relative;
}

.commercial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: clamp(3rem, 6vh, 5rem) auto 0;
}
@media (max-width: 760px) {
  .commercial-grid { grid-template-columns: 1fr; }
}

.commercial-card {
  position: relative;
  padding: clamp(2rem, 3.5vw, 3rem);
  background:
    linear-gradient(180deg, rgba(8, 42, 38, 0.35), rgba(5, 5, 7, 0.9)),
    radial-gradient(ellipse at top right, rgba(31, 224, 168, 0.1), transparent 55%);
  border: 1px solid rgba(216, 236, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s;
}
.commercial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 224, 168, 0.3);
}

.commercial-card-hero {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, rgba(8, 42, 38, 0.6), rgba(5, 5, 7, 0.95)),
    radial-gradient(ellipse at 30% 20%, rgba(31, 224, 168, 0.2), transparent 55%);
  border-color: rgba(31, 224, 168, 0.2);
  box-shadow: 0 0 60px -20px rgba(31, 224, 168, 0.15);
}

.commercial-icon {
  margin-bottom: 1.25rem;
}

.commercial-badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(31, 224, 168, 0.35);
  border-radius: 999px;
  background: rgba(31, 224, 168, 0.08);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 1rem;
}

.commercial-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.commercial-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 60ch;
}

/* ============================================
   TRUSTPILOT REVIEWS — Social proof section
   ============================================ */
.reviews-section {
  background: #000;
  position: relative;
}

.trustpilot-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vh, 3rem);
}

.tp-score {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.tp-stars {
  display: flex;
  gap: 0.25rem;
}

.tp-rating {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.tp-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.tp-label {
  font-size: 1rem;
  color: var(--ink-dim);
}

.tp-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
}

.tp-verdict {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--teal-bright);
}

.tp-count {
  font-size: 0.9rem;
  color: var(--ink-dim);
}
.tp-count strong { color: var(--ink); }

.tp-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--teal-bright);
  text-decoration: none;
  transition: color 0.2s;
}
.tp-link:hover { color: var(--ink); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: clamp(2.5rem, 5vh, 4rem) auto 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); perspective: 800px; }
}
@media (max-width: 560px) {
  .reviews-grid { grid-template-columns: 1fr; perspective: none; }
}

.review-card {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background:
    linear-gradient(180deg, rgba(8, 42, 38, 0.3), rgba(5, 5, 7, 0.85));
  border: 1px solid rgba(216, 236, 255, 0.06);
  border-radius: var(--radius-lg);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s, border-color 0.4s;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 8px 32px -8px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Staggered depth — each card floats at a different z-level */
.review-card:nth-child(1) { animation: cardFloat1 6s ease-in-out infinite; }
.review-card:nth-child(2) { animation: cardFloat2 7s ease-in-out infinite; animation-delay: -1.5s; }
.review-card:nth-child(3) { animation: cardFloat3 5.5s ease-in-out infinite; animation-delay: -3s; }
.review-card:nth-child(4) { animation: cardFloat4 6.5s ease-in-out infinite; animation-delay: -0.8s; }

@keyframes cardFloat1 {
  0%, 100% { transform: translateZ(0px) rotateX(0deg) rotateY(0deg) translateY(0px); }
  50%      { transform: translateZ(20px) rotateX(1.5deg) rotateY(-1deg) translateY(-8px); }
}
@keyframes cardFloat2 {
  0%, 100% { transform: translateZ(0px) rotateX(0deg) rotateY(0deg) translateY(0px); }
  50%      { transform: translateZ(30px) rotateX(-1deg) rotateY(1.5deg) translateY(-12px); }
}
@keyframes cardFloat3 {
  0%, 100% { transform: translateZ(0px) rotateX(0deg) rotateY(0deg) translateY(0px); }
  50%      { transform: translateZ(15px) rotateX(1deg) rotateY(1deg) translateY(-6px); }
}
@keyframes cardFloat4 {
  0%, 100% { transform: translateZ(0px) rotateX(0deg) rotateY(0deg) translateY(0px); }
  50%      { transform: translateZ(25px) rotateX(-1.5deg) rotateY(-1.5deg) translateY(-10px); }
}

.review-card:hover {
  transform: translateZ(40px) rotateX(0deg) rotateY(0deg) translateY(-12px) scale(1.03) !important;
  border-color: rgba(31, 224, 168, 0.25);
  box-shadow:
    0 24px 64px -12px rgba(31, 224, 168, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.4);
  animation-play-state: paused;
}

.review-stars {
  font-size: 1.1rem;
  color: var(--teal-bright);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.review-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink);
  margin-bottom: 0.65rem;
  font-style: italic;
}

.review-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}

.review-author {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink);
}
.review-author span {
  font-weight: 400;
  color: var(--ink-dim);
}

/* ---- Light-mode variant for reviews (visual break) ---- */
.reviews-light {
  background: linear-gradient(180deg, #f4f2ef 0%, #eae7e2 100%);
}
.reviews-light .section-title,
.reviews-light .tp-number,
.reviews-light .review-title,
.reviews-light .review-author {
  color: #0a0a0c;
}
.reviews-light .section-lede,
.reviews-light .tp-label,
.reviews-light .tp-count,
.reviews-light .review-text,
.reviews-light .review-author span {
  color: #444;
}
.reviews-light .tp-count strong { color: #0a0a0c; }
.reviews-light .tp-verdict { color: #0d9b71; }
.reviews-light .tp-link { color: #0d9b71; }
.reviews-light .tp-link:hover { color: #0a0a0c; }
.reviews-light .eyebrow { color: #0d9b71 !important; }
.reviews-light .review-card {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  box-shadow:
    0 8px 32px -8px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}
.reviews-light .review-card:hover {
  border-color: rgba(13, 155, 113, 0.3);
  box-shadow:
    0 24px 64px -12px rgba(13, 155, 113, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.1);
}
.reviews-light .review-stars { color: #0d9b71; }
.reviews-light .tp-stars svg polygon { fill: #0d9b71; }

/* ============================================
   CTA HOOKS — commercial bullets in CTA
   ============================================ */
.cta-hooks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: center;
  margin: clamp(1.5rem, 3vh, 2rem) 0;
}

.cta-hook {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--teal-bright);
  padding: 0.5rem 1rem;
  border: 1px solid rgba(31, 224, 168, 0.25);
  border-radius: 999px;
  background: rgba(31, 224, 168, 0.06);
  white-space: nowrap;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .halo-ring, .halo-core, .device-ring, .marquee-track, .scroll-line { animation: none !important; }
  .reveal, .glide-in { opacity: 1; transform: none; }
  .curtain-left  { transform: translateX(-110%) !important; }
  .curtain-right { transform: translateX( 110%) !important; }
  .curtain-behind { opacity: 1 !important; }
  .stack-card { position: static !important; }
  .h-scroll-track { flex-wrap: wrap; }
  .h-card { width: 100%; height: auto; }
}

/* ============================================
   MOBILE OPTIMISATION (≤768px)
   Kill GPU-heavy effects, simplify layout
   ============================================ */
@media (max-width: 768px) {

  /* -- Hero -- */
  .void-headline { font-size: clamp(2rem, 8vw, 3rem); }
  .void-sub { font-size: 0.92rem; max-width: 100%; }
  .launch-status { flex-direction: column; gap: 0.75rem; }
  .launch-status-divider { width: 40px; height: 1px; }

  /* -- Halo ring: reduce to single ring -- */
  .halo-ring-outer,
  .halo-ring-mid { display: none; }
  .halo-ring-inner { width: 280px; height: 280px; }
  .halo-core { width: 160px; height: 160px; }
  .halo-beam { display: none; }

  /* -- Video section -- */
  .video-headline { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .video-frame { max-width: 100%; }
  .video-frame video { border-radius: 12px; }

  /* -- Intelligence section -- */
  .intel-pillars { grid-template-columns: 1fr; gap: 1rem; }
  .intel-statement-bar { flex-direction: column; gap: 1.25rem; }
  .intel-statement-bar .stat-box { min-width: unset; }

  /* -- H-scroll: convert to native horizontal scroll -- */
  .h-scroll-section { height: auto !important; }
  .h-scroll-sticky {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .h-scroll-track {
    padding-bottom: 1rem;
    width: max-content;
  }
  .h-card {
    width: 280px;
    height: auto;
    min-height: 320px;
  }
  .h-scroll-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .h-progress { display: none; }

  /* -- Commercial section -- */
  .commercial-grid { grid-template-columns: 1fr; }
  .commercial-card-hero { grid-column: 1; }
  .commercial-title { font-size: 1.2rem; }

  /* -- Reviews: Kill 3D, simplify -- */
  .reviews-grid {
    grid-template-columns: 1fr;
    perspective: none;
    transform-style: flat;
    gap: 1rem;
  }
  .review-card {
    transform-style: flat;
    will-change: auto;
    animation: none !important;
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.3);
  }
  .review-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.35);
  }

  /* -- Light reviews: drop backdrop-filter -- */
  .reviews-light .review-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.1);
  }

  /* -- Design section -- */
  .design-frame {
    flex-direction: column;
    gap: 2rem;
  }
  .design-copy { max-width: 100%; }
  .design-hero-img { transform: scale(1) !important; }

  /* -- Built-for verticals -- */
  .verticals { grid-template-columns: 1fr; }

  /* -- CTA section -- */
  .cta-hooks { flex-direction: column; align-items: center; }
  .cta-hook { white-space: normal; text-align: center; }
  .cta-form { flex-direction: column; }
  .cta-form input,
  .cta-form button { width: 100%; }

  /* -- Global: reduce padding on mobile -- */
  .section { padding: clamp(3rem, 10vh, 5rem) var(--gutter); }
  .section-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }

  /* -- Marquee: slow down -- */
  .marquee-track { animation-duration: 30s; }

  /* -- Stack cards: disable sticky stacking -- */
  .stack-card {
    position: static !important;
    margin-bottom: 1rem;
  }
}

/* ============================================
   SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .void-headline { font-size: 1.8rem; }
  .section-title { font-size: 1.5rem; }
  .h-card { width: 260px; min-height: 290px; }
  .commercial-card { padding: 1.25rem; }
  .review-card { padding: 1rem; }
  .tp-number { font-size: 2.2rem; }
  .tp-score { flex-direction: column; gap: 0.5rem; }
  .intel-pillar { padding: 1.5rem; }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255,255,255,0.1), inset 0 0 10px rgba(255,255,255,0.05); transform: scale(1); }
  50% { box-shadow: 0 0 35px rgba(255,255,255,0.3), inset 0 0 20px rgba(255,255,255,0.1); transform: scale(1.02); border-color: rgba(255,255,255,0.5); }
}

/* ============================================
   SOCIAL PROOF TOASTS
   ============================================ */
#social-proof-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.social-toast {
  background: rgba(14, 14, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: toastSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform-origin: bottom left;
}
.social-toast.fade-out {
  animation: toastFadeOut 0.5s ease forwards;
}
.toast-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--teal-bright);
  box-shadow: 0 0 8px rgba(31, 224, 168, 0.8);
  flex-shrink: 0;
  animation: toastPulse 2s infinite;
}
.toast-text {
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}
.toast-text strong {
  font-weight: 700;
  color: var(--teal-bright);
}
@keyframes toastPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* ============================================
   EVERGREEN COUNTDOWN
   ============================================ */
#evergreen-countdown {
  display: inline-block;
  background: rgba(31, 224, 168, 0.1);
  border: 1px solid rgba(31, 224, 168, 0.3);
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  text-transform: uppercase;
}
#evergreen-countdown span {
  color: var(--dojo-neon);
  font-weight: 800;
  margin-left: 0.5rem;
  font-family: monospace;
  font-size: 1rem;
}

/* ============================================
   APPLICATION MODAL
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 6, 8, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background: linear-gradient(145deg, #0f141a, #040608);
  border: 1px solid rgba(216, 236, 255, 0.15);
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  border-radius: 16px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.modal-close:hover {
  opacity: 1;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.modal-sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.modal-sub strong {
  color: var(--dojo-neon);
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.form-group input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--dojo-neon);
  background: rgba(31, 224, 168, 0.05);
}
.modal-submit {
  width: 100%;
  background: var(--dojo-neon);
  color: #000;
  border: 2px solid transparent;
  border-radius: 30px;
  padding: 1.1rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(31, 224, 168, 0.4), inset 0px 2px 4px rgba(255, 255, 255, 0.4);
}
.modal-submit:hover {
  background: #fff;
  border-color: var(--dojo-neon);
  box-shadow: 0 8px 25px rgba(31, 224, 168, 0.6);
  transform: translateY(-2px);
}
.modal-submit.loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: wait;
}
.modal-success {
  display: none;
  background: rgba(31, 224, 168, 0.1);
  border: 1px solid rgba(31, 224, 168, 0.3);
  color: var(--dojo-neon);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  font-weight: 600;
  text-align: center;
}
.modal-success.show {
  display: block;
}

@media (max-width: 768px) {
  #social-proof-container {
    bottom: auto;
    top: 24px;
    left: 16px;
    right: 16px;
  }
  
  .pricing {
    flex-direction: column;
    padding: 0 1rem;
  }
  
  .price-card {
    min-width: 100%;
  }

  .modal-content {
    padding: 1.5rem;
    width: 95%;
  }
  
  .modal-title {
    font-size: 1.4rem;
  }
  
  .modal-sub {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }
}