/* =========================================================
   Intel Creative - Landing page
   Design system tokens
   ========================================================= */

:root {
  /* Surfaces */
  --bg-page: #0e0e0e;
  --bg-surface: #141414;
  --bg-elevated: #1a1a1a;
  --bg-elevated-hi: #202020;
  --bg-line: #2e2e2e;
  --bg-line-soft: rgba(255, 255, 255, 0.06);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #8a8a8a;
  --text-on-light: #212121;

  /* Accents - Fortnite blue/purple palette; token names preserved from round-1, values swapped */
  --accent-red: #2EA8FF;
  --accent-red-deep: #1E7ACC;
  --accent-red-hover: #4FBDFF;
  --accent-orange: #9B7BFF;
  --accent-amber: #B69EFF;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-btn: 15px;

  --pad-section-x: clamp(20px, 5vw, 72px);
  --pad-section-y: clamp(56px, 9vw, 120px);
  --max-content: 1296px;

  --duration-fast: 140ms;
  --duration-base: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Floating pill header offset (top inset + pill height + breathing room) */
  --header-offset: 96px;

  /* Warm-glow palette (used by hero, value-section, bento) - now holding cool blue/purple values */
  --glow-warm-light: rgb(180, 220, 255);
  --glow-warm-mid:   rgba(75, 145, 255, 0.85);
  --glow-warm-deep:  rgba(120, 70, 255, 0.55);
  --gold-star:       #B69EFF;

  /* V6 - bevel + layered drop-shadow */
  --bevel: clamp(24px, 4vw, 64px);
  --section-shadow: drop-shadow(0 20px 48px rgba(0,0,0,0.65)) drop-shadow(0 6px 12px rgba(0,0,0,0.45));

  /* V5 - glow palette (RGB triples for rgba() composition) */
  --glow-rgb-blue: 46, 168, 255;
  --glow-rgb-purple: 155, 123, 255;
  --glow-rgb-lavender: 182, 158, 255;

  /* V5 - per-section glow defaults (overridden per section) */
  --glow-rgb: var(--glow-rgb-blue);
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-alpha: 0.10;
  --glow-radius: 45vw;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (max-width: 720px) {
  :root { --header-offset: 80px; }
}

/* =========================================================
   Reset / base
   ========================================================= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* No top padding - hero is the first section and owns the floating-header clearance
     so its background gradient extends to the very top of the viewport. */
  padding-top: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--accent-red); }

:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--accent-red);
  color: var(--bg-page);
  padding: 8px 12px;
  z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* =========================================================
   Typography scale
   ========================================================= */

.h-display {
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0 0 1.25rem;
}
.h-section {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}
.h-card {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.eyebrow {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin: 0 0 1rem;
}
.eyebrow--testimonials {
  text-shadow: 0 1px 12px rgba(0,0,0,0.6), 0 0 30px rgba(0,0,0,0.4);
}
.lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}
.muted { color: var(--text-secondary); }
.tiny { font-size: 0.875rem; color: var(--text-secondary); }

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent-red);
  /* White text on this blue is ~2.6:1 contrast (fails WCAG AA 4.5:1). Dark text
     against the brand blue clears ~7.5:1 without changing the brand color. */
  color: var(--bg-page);
}
.btn--primary:hover { background: var(--accent-red-hover); color: var(--bg-page); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.16);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
}

.btn--lg {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

/* Hero ghost button - glass treatment so it reads on the gradient backdrop */
.hero .btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* =========================================================
   Container
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--pad-section-x);
}

/* When the .container sits inside the floating pill header, drop its
   max-width and padding - the pill itself already owns those. */
.site-header > .container {
  max-width: none;
  padding-inline: 0;
  height: 100%;
}

section { padding-block: var(--pad-section-y); }

/* =========================================================
   Top nav
   ========================================================= */

.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: min(1140px, calc(100vw - 32px));
  height: 64px;
  padding-inline: clamp(14px, 1.8vw, 24px);
  padding-block: 8px;
  z-index: 50;
  background-color: rgba(14, 14, 14, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(0, 0, 0, 0.3);
  transition: top var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.site-header--scrolled {
  background-color: rgba(14, 14, 14, 0.88);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.brand__dot {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
              0 2px 8px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}
.brand:hover { color: var(--text-primary); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.nav__links a {
  position: relative;
  isolation: isolate;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  padding: 7px 14px;
  white-space: nowrap;
  border-radius: 999px;
  transition:
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0),
    0 6px 18px rgba(46, 168, 255, 0);
  transform: scale(0.82);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--text-primary);
}
.nav__links a:hover::before,
.nav__links a:focus-visible::before {
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(46, 168, 255, 0.14);
  transform: scale(1);
  opacity: 1;
}
.nav__links a:active {
  transform: scale(0.94);
  transition-duration: 110ms;
}
.nav__links a:active::before {
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 4px 12px rgba(46, 168, 255, 0.22);
  transition-duration: 110ms;
}
.nav__links a:focus-visible {
  outline: none;
}
.nav__links a:focus-visible::before {
  box-shadow:
    inset 0 0 0 1px rgba(46, 168, 255, 0.55),
    0 6px 18px rgba(46, 168, 255, 0.18);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.site-header .nav__actions .btn {
  height: 36px;
  padding: 0 18px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 999px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--bg-line);
  color: var(--text-primary);
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top:  6px; }

.nav[data-open="true"] .nav__toggle span { background: transparent; }
.nav[data-open="true"] .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
  display: none;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  /* Top padding clears the floating header (--header-offset = 96px) + breathing room.
     Bottom padding is reduced because the carousel sits inline inside the hero now. */
  padding-block: calc(var(--header-offset) + clamp(28px, 4vw, 56px)) 0;
  overflow: hidden;
  background: var(--bg-page);
}

/* Layered radial glows - warm right + cool ember left + bottom continuity wash for the inline carousel */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55vw 45vw at 88% 25%,
      rgba(180, 220, 255, 0.55) 0%,
      rgba(130, 170, 255, 0.50) 12%,
      rgba(75, 145, 255, 0.45) 30%,
      rgba(120, 70, 255, 0.30) 55%,
      rgba(120, 70, 255, 0.10) 80%,
      rgba(0, 0, 0, 0) 100%),
    radial-gradient(50vw 45vw at 8% 60%,
      rgba(120, 70, 255, 0.40) 0%,
      rgba(75, 145, 255, 0.30) 25%,
      rgba(60, 80, 180, 0.20) 55%,
      rgba(0, 0, 0, 0) 100%),
    radial-gradient(110vw 55vw at 50% 100%,
      rgba(120, 70, 255, 0.48) 0%,
      rgba(75, 145, 255, 0.38) 25%,
      rgba(75, 145, 255, 0.22) 55%,
      rgba(75, 145, 255, 0.10) 80%,
      rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Dark vignette to keep hero copy legible at the center */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 50%,
      rgba(14, 14, 14, 0.35) 0%,
      rgba(14, 14, 14, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero h1 .rot {
  position: relative;
  display: inline-block;
  text-align: left;
  color: var(--accent-red);
  vertical-align: baseline;
  white-space: nowrap;
  --reveal-px: 0px;
  --word-px: 0px;
  --cursor-w: 3px;
}

.hero h1 .rot__reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  width: var(--reveal-px);
  white-space: nowrap;
  will-change: width;
}

/* Until main.js sets data-ready, show the word at its natural width instead of
   the animation's starting width of 0. --reveal-px only becomes meaningful once
   JS has measured the glyphs; before that (slow webfont, slow/blocked JS, JS
   error) the old default clipped the word to nothing and the headline read
   "Cinematic Fortnite promos that get" with the last word missing. The animated
   state is unchanged - data-ready is set immediately before the first sweep. */
.hero h1 .rot:not([data-ready]) .rot__reveal { width: auto; }
.hero h1 .rot:not([data-ready]) .rot__cursor { display: none; }

.hero h1 .rot__word {
  display: inline-block;
  color: var(--accent-red);
  white-space: nowrap;
  background-image: linear-gradient(
    90deg,
    #2EA8FF 0%,
    #4FBDFF 22%,
    #9B7BFF 50%,
    #4FBDFF 78%,
    #2EA8FF 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: rotWordGradient 6s linear infinite;
}

@keyframes rotWordGradient {
  0%   { background-position:   0% 50%; }
  100% { background-position: 220% 50%; }
}

.hero h1 .rot__cursor {
  position: absolute;
  top: 0.12em;
  bottom: 0.18em;
  left: var(--reveal-px);
  width: var(--cursor-w);
  background: var(--accent-red);
  border-radius: 1px;
  pointer-events: none;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero__trust {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__trust strong {
  font-weight: 800;
  font-size: 1.15em;
  background: linear-gradient(100deg, #C77DFF 0%, #9B7BFF 45%, #2EA8FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__trust span { color: rgba(255, 255, 255, 0.72); }

.hero__media {
  position: relative;
  aspect-ratio: 9 / 14;
  max-width: 380px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #0e0e0e);
  border: 1px solid var(--bg-line);
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  display: block;
}
.hero__video { background: #000; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
/* =========================================================
   Section header
   ========================================================= */

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.section-head--left { margin-inline: 0; text-align: left; }
.section-head .lede { margin-inline: auto; text-align: center; }
/* Island-focused heading needs more room than the default 720px or "promotion" wraps to its own line. */
#island-focused .section-head { max-width: none; }
#island-focused .section-head .lede { max-width: 60ch; }

/* =========================================================
   Services 3-up
   ========================================================= */

/* Parent <section.services> gets bg + glow from V6 rules - no explicit bg here
   so the rule does NOT also paint a solid layer on the nested .services--entertainment
   block (which would cover the parent's gradient). */

/* Inner entertainment block: transparent so the parent gradient bleeds through,
   plus top padding so there's clear breathing room between the two card rows. */
.services--entertainment {
  position: relative;
  z-index: 1;
  background: transparent;
  padding-block: clamp(72px, 10vw, 132px) 0;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.service-card {
  position: relative;
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 168, 255, 0.40);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.service-card h3,
.service-card__label {
  text-align: center;
}
.service-card__thumb {
  aspect-ratio: 9 / 16;
  max-width: 220px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #0c1a2a, #0e0e0e);
  overflow: hidden;
  position: relative;
}
.service-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.85;
}
.service-card__thumb--alt { background: linear-gradient(135deg, #1a0c2a, #0e0e0e); }
.service-card__thumb--alt2 { background: linear-gradient(135deg, #1a1a35, #0e0e0e); }
.service-card__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.service-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.service-card__metric {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  text-align: center;
}
.service-card__metric strong {
  color: var(--accent-red);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* =========================================================
   Use cases 6-up grid
   ========================================================= */

.usecases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.usecase {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.usecase:hover {
  border-color: rgba(46, 168, 255, 0.40);
  background: var(--bg-elevated);
}
.usecase__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(46, 168, 255, 0.14);
  color: var(--accent-red);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.875rem;
}
.usecase__icon svg { width: 20px; height: 20px; display: block; }
.usecase__label {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* =========================================================
   Trusted-by (5-star + Google G + pill marquee)
   ========================================================= */

.trustedby {
  /* Lives INSIDE .hero - keep background transparent so the hero gradient bleeds
     continuously through both the headline area and the creator-pill carousel. */
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 88px);
  background: transparent;
}
.trustedby__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.trustedby__stars {
  display: inline-flex;
  gap: 2px;
}
.trustedby__star {
  width: 18px;
  height: 18px;
  fill: var(--gold-star);
}
.trustedby__score {
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0.5rem 0 0.25rem;
}
.trustedby__glogo {
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.trustedby__label {
  color: var(--text-secondary);
}
.trustedby__caption {
  margin: 0.75rem auto 2rem;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  max-width: 60ch;
}

/* Marquee */
.trustedby__carousel {
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.trustedby__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: trustedby-scroll 48s linear infinite;
}
@keyframes trustedby-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  height: 64px;
  padding: 0 18px 0 10px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: 999px;
}
.pill__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background-color: var(--bg-elevated-hi);
  background-size: 115%;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--bg-line-soft);
  /* Belt-and-suspenders: ensure border-radius always clips the image. */
  background-clip: padding-box;
  overflow: hidden;
  isolation: isolate;
}
.pill__copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pill__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pill__role {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* =========================================================
   Value-of-short-form (warm glow with hard-cut)
   ========================================================= */

.value {
  position: relative;
  background: var(--bg-page);
  padding-block: clamp(80px, 10vw, 140px);
  overflow: hidden;
}
.value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50vw 50vw at 80% 130%,
    rgba(180, 220, 255, 0.85) 0%,
    rgba(130, 170, 255, 0.80) 15%,
    rgba(75, 145, 255, 0.75) 35%,
    rgba(120, 70, 255, 0.50) 60%,
    rgba(120, 70, 255, 0.15) 85%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.value > .container { position: relative; z-index: 1; }

.value__head {
  max-width: 880px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.value__title {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 auto 1.25rem;
  max-width: 28ch;
  color: var(--text-primary);
}

.value__sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 auto;
}

.value__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.stat {
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.stat__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.04em;
}
.stat__number {
  font-size: clamp(3rem, 5.5vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent-red);
  margin: 0;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 24px rgba(46, 168, 255, 0.45);
}
.stat__number small {
  font-size: 0.55em;
  font-weight: 500;
  margin-left: 0.05em;
  vertical-align: 0.2em;
}
.stat__caption {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

/* =========================================================
   Testimonials - scattered chat-bubble wall + center glow
   ========================================================= */

.testimonials {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 11vw, 168px) clamp(40px, 4vw, 64px);
}
.testimonials > .container { position: relative; z-index: 1; }

.testimonials .section-head { margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.testimonials .section-head .h-section {
  text-shadow: 0 0 40px rgba(var(--glow-rgb-lavender), 0.55);
}

/* Stage = positioning context for the centred glow + particle canvas; the
   bubble wall sits above both (z-index). */
.t-stage { position: relative; }

/* Centre glow - anchored to the WALL centre, grown large and bleeding out.
   Feathered: every radial reaches full transparency INSIDE its own box
   (closest-side, alpha 0 by ~90%), so neither the box edge nor the section
   overflow clip can leave a hard line. Generous bottom padding above gives
   the downward bloom room to fade before the section's clip. */
.t-stage::before {
  content: "";
  position: absolute;
  inset: -80% -10%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  will-change: transform;
  background:
    radial-gradient(closest-side at 50% 52%,
      rgba(var(--glow-rgb-lavender), 0.95) 0%,
      rgba(var(--glow-rgb-lavender), 0) 26%),
    radial-gradient(closest-side at 50% 52%,
      rgba(var(--glow-rgb-lavender), 0.58) 0%,
      rgba(var(--glow-rgb-lavender), 0.42) 24%,
      rgba(var(--glow-rgb-purple), 0.32) 48%,
      rgba(var(--glow-rgb-purple), 0.16) 72%,
      rgba(var(--glow-rgb-purple), 0) 90%);
}


/* Masonry scatter - variable-width bubbles, non-grid vertical packing. */
.t-wall {
  position: relative;
  z-index: 1;
  column-count: 3;
  column-gap: clamp(18px, 2vw, 34px);
  max-width: 1180px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.t-bubble {
  position: relative;
  z-index: 1;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(18px, 2.4vw, 36px);
  width: min(100%, var(--w, 330px));
}
.t-bubble:nth-child(3n+1) { margin-right: auto; }
.t-bubble:nth-child(3n+2) { margin-left: auto; }
.t-bubble:nth-child(3n)   { margin-inline: auto; }

/* Uniform frame - the wrapper clips every screenshot to the SAME bevel and
   fills behind it (matching the bubbles' #1A1A1E), so per-image corner
   differences disappear.
   Hover is PROXIMITY-driven: JS sets --prox (0..1) by cursor distance; all
   the reaction (lift / ring / glow / border) is expressed here off that one
   variable - no per-element :hover duplication. */
.t-bubble__card {
  --prox: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1a1e;
  border: 1px solid rgba(255, 255, 255, calc(0.08 + var(--prox) * 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 38px rgba(0, 0, 0, 0.52),
    0 6px 14px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--glow-rgb-lavender), calc(var(--prox) * 0.5)),
    0 calc(var(--prox) * 20px) calc(var(--prox) * 46px) rgba(var(--glow-rgb-purple), calc(var(--prox) * 0.42));
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - var(--prox, 0) * 8px), 0);
  will-change: transform;
}
.t-bubble__card img { display: block; width: 100%; height: auto; }

/* Scroll reveal - progressive enhancement (active only once JS adds .js-reveal) */
.t-wall.js-reveal .t-bubble { opacity: 0; transform: translateY(22px); }
.t-wall.js-reveal.is-in .t-bubble {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.t-wall .t-bubble:nth-child(1) { --d: 0ms; }
.t-wall .t-bubble:nth-child(2) { --d: 60ms; }
.t-wall .t-bubble:nth-child(3) { --d: 120ms; }
.t-wall .t-bubble:nth-child(4) { --d: 180ms; }
.t-wall .t-bubble:nth-child(5) { --d: 240ms; }
.t-wall .t-bubble:nth-child(6) { --d: 300ms; }
.t-wall .t-bubble:nth-child(7) { --d: 360ms; }
.t-wall .t-bubble:nth-child(8) { --d: 420ms; }
.t-wall .t-bubble:nth-child(9) { --d: 480ms; }

/* =========================================================
   Bento "Content Infrastructure" (2x2)
   ========================================================= */

.bento {
  background: var(--bg-page);
  padding-block: clamp(80px, 10vw, 140px);
}
.bento__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 440px;
  gap: 20px;
}
.bento-card {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(46, 168, 255, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #1a1a1d 0%, #131316 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  will-change: transform;
}
.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.bento-card > * { position: relative; z-index: 2; }
.bento-card:hover {
  transform: translateY(-8px);
  border-color: rgba(46, 168, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 12px 32px rgba(46, 168, 255, 0.22),
    0 0 0 1px rgba(46, 168, 255, 0.35);
}

.bento-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.bento-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(46, 168, 255, 0.22), rgba(46, 168, 255, 0.1));
  color: var(--accent-red);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(46, 168, 255, 0.25),
    0 6px 16px rgba(46, 168, 255, 0.18);
}
.bento-card__icon svg { width: 22px; height: 22px; }
.bento-card__title {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.bento-card__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 44ch;
}
.bento-card__accent { color: var(--accent-red); font-weight: 700; }

/* Card 1 - Social chips row */
.bento-card__chips {
  display: flex;
  gap: 14px;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.chip {
  flex: 1 1 0;
  min-width: 96px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 12px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.bento-card:hover .chip { transform: translateY(-2px); }
.chip__logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.4);
}
.chip__logo svg { width: 34px; height: 34px; }
.chip__logo--tiktok {
  background: #010101;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.chip__logo--tiktok::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(37, 244, 238, 0.55), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(254, 44, 85, 0.55), transparent 55%);
  pointer-events: none;
}
.chip__logo--tiktok svg { position: relative; z-index: 1; }
.chip__logo--youtube { background: #FF0000; }
.chip__logo--insta {
  background: linear-gradient(135deg, #FEDA75, #FA7E1E 25%, #D62976 55%, #962FBF 75%, #4F5BD5);
}
.chip__name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.chip small {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Card 2 - Dedicated team image */
.bento-card__visual--editors {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-inline: calc(clamp(1.5rem, 2.2vw, 2rem) * -1);
  margin-bottom: calc(clamp(1.5rem, 2.2vw, 2rem) * -1);
  overflow: hidden;
  padding: 1.25rem 1rem 1.5rem;
  min-height: 200px;
}
.bento-card__visual--editors::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 60%, rgba(155, 123, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.bento-card__visual--editors img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  filter: drop-shadow(0 16px 40px rgba(155, 123, 255, 0.35));
}

/* Card 3 - Speed/quality image */
.bento-card__visual--clock {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-inline: calc(clamp(1.5rem, 2.2vw, 2rem) * -1);
  margin-bottom: calc(clamp(1.5rem, 2.2vw, 2rem) * -1);
  overflow: hidden;
  padding: 1.25rem 1rem 1.5rem;
  min-height: 200px;
}
.bento-card__visual--clock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 60%, rgba(46, 168, 255, 0.18), transparent 70%);
  pointer-events: none;
}
.bento-card__visual--clock img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  filter: drop-shadow(0 16px 40px rgba(46, 168, 255, 0.4));
}

/* Card 4 - Phone trio */
.bento-card__visual--phones {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 22px;
  position: relative;
  margin-inline: calc(clamp(1.5rem, 2.2vw, 2rem) * -1);
  margin-bottom: calc(clamp(1.5rem, 2.2vw, 2rem) * -1);
  padding: 1.5rem 1rem 1.5rem;
  min-height: 220px;
}
.bento-card__visual--phones::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 55% at 50% 70%, rgba(255, 60, 110, 0.14), transparent 70%),
    radial-gradient(45% 55% at 50% 70%, rgba(46, 168, 255, 0.1), transparent 70%);
  pointer-events: none;
}
.phone {
  width: 100px; height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #1d1d20, #0e0e10);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.45);
  transition: transform var(--duration-base) var(--ease-out);
}
.phone::before {
  content: "";
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 2;
}
.phone__logo {
  width: 46px;
  height: 46px;
  color: #fff;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}
.bento-card:hover .phone--tiktok { transform: translateY(-4px); }
.bento-card:hover .phone--insta { transform: translateY(-4px); transition-delay: 60ms; }
.bento-card:hover .phone--yt { transform: translateY(-4px); transition-delay: 120ms; }

/* TikTok phone - black with cyan/magenta glow behind logo */
.phone--tiktok::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 32% 65%, rgba(37, 244, 238, 0.42), transparent 50%),
    radial-gradient(circle at 68% 65%, rgba(254, 44, 85, 0.42), transparent 50%);
  pointer-events: none;
}

/* Instagram phone - gradient bg */
.phone--insta {
  background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 55%, #962FBF 78%, #4F5BD5 100%);
  border-color: rgba(255, 255, 255, 0.18);
}
.phone--insta::before { background: rgba(255, 255, 255, 0.35); }

/* YouTube phone - black with red logo glow */
.phone--yt .phone__logo {
  color: #FF0000;
  filter: drop-shadow(0 0 14px rgba(255, 0, 0, 0.65)) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}

/* Responsive - bento collapses to 1-col at <=720px */
@media (max-width: 720px) {
  .bento__grid { grid-template-columns: 1fr; }
  .bento-card { min-height: 280px; }
}

/* =========================================================
   Slogan triplet (Promise) - We Promote / They Watch / You Grow
   ========================================================= */

/* Nested inside .bento section - transparent bg so parent's glow shows through. */
.promise {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px, 8vw, 100px) 0;
  background: transparent;
}
.promise__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.promise-step {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  position: relative;
}
.promise-step__num {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-red);
  margin-bottom: 1.25rem;
}
.promise-step__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.promise-step__body {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   Logo strip
   ========================================================= */

.logostrip {
  padding-block: clamp(36px, 5vw, 56px);
}
.logostrip__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  color: var(--text-tertiary);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.logostrip__rail span {
  font-size: 1rem;
  opacity: 0.7;
  transition: opacity var(--duration-base) var(--ease-out);
}
.logostrip__rail span:hover { opacity: 1; color: var(--text-secondary); }

/* =========================================================
   FAQ accordion
   ========================================================= */

.faq {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 8vw, 100px) clamp(56px, 8vw, 100px);
}

.faq__list {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 0.6rem;
}
.faq__item {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  padding: 1.1rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}
.faq__q[aria-expanded="true"] { color: var(--accent-red-hover); }
.faq__chev {
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform var(--duration-base) var(--ease-out);
}
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(45deg); }
.faq__a {
  padding: 0 1.25rem;
  max-height: 0;
  overflow: hidden;
  color: var(--text-secondary);
  line-height: 1.65;
  transition: max-height var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out);
}
.faq__a[data-open="true"] {
  padding: 0 1.25rem 1.25rem;
  max-height: 600px;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: #0a0a0a;
  border-top: 1px solid var(--bg-line-soft);
  /* Top padding bumped past the V6 drop-shadow falloff (~50px below the previous
     section's rounded edge) so the heavy shadow doesn't conceal footer text. */
  padding-block: clamp(96px, 9vw, 132px) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}
.footer__col h3 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 1rem;
}
.footer__col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.footer__col a:hover { color: var(--text-primary); }
.footer__brand p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  max-width: 36ch;
  margin: 0.75rem 0 0;
}
.footer__bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--bg-line-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}
.footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer__legal a:hover { color: var(--text-primary); }

/* =========================================================
   Legal pages (privacy policy, terms)
   ========================================================= */

.legal-page {
  padding-block: clamp(56px, 9vw, 96px);
  max-width: 76ch;
}
.legal-page .eyebrow { margin-bottom: 0.5rem; }
.legal-page .legal-updated {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin: 0 0 2.5rem;
}
.legal-page h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
}
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.legal-page ul {
  color: var(--text-secondary);
  line-height: 1.7;
  padding-left: 1.25rem;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.4rem;
}
.legal-page a { color: var(--accent-red); }
.legal-page a:hover { color: var(--accent-red-hover); }
.legal-page strong { color: var(--text-primary); }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 280px; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usecases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-wall { column-count: 2; }
  .promise__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .nav__links { display: none; }
  .site-header .nav__actions .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }

  .nav__drawer {
    position: fixed;
    inset: calc(var(--header-offset) + 8px) 16px auto 16px;
    background: var(--bg-page);
    padding: 1.25rem 1.5rem 1.5rem;
    display: none;
    flex-direction: column;
    gap: 1.25rem;
    z-index: 40;
    border: 1px solid var(--bg-line-soft);
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  }
  .nav[data-open="true"] .nav__drawer { display: flex; }
  .nav__drawer a {
    font-size: 1.125rem;
    /* 0.8125rem vertical padding + line-height clears the 44px touch-target minimum */
    padding: 0.8125rem 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--bg-line-soft);
  }
  .nav__drawer .btn { margin-top: 1rem; justify-content: center; }
}

@media (max-width: 480px) {
  .site-header { height: 56px; top: 12px; }
  .site-header .nav__actions .btn--primary { padding: 0 14px; font-size: 0.8125rem; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 12px; }
  .nav { gap: 8px; }
  .nav__actions { gap: 6px; }
  .site-header .nav__actions .btn--primary { padding: 0 12px; font-size: 0.8125rem; }
  .brand { font-size: 0.875rem; gap: 0.375rem; }
}

@media (max-width: 640px) {
  .t-wall { column-count: 1; max-width: 420px; }
  .t-wall .t-bubble { width: 100%; margin-left: auto; margin-right: auto; }
}

@media (max-width: 560px) {
  .services__grid { grid-template-columns: 1fr; }
  .service-card__thumb { max-width: 280px; }
  .usecases__grid { grid-template-columns: 1fr; }
  .value__stats { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
}

/* =========================================================
   Reduced motion
   ========================================================= */

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

  /* Trusted-by marquee → static wrap */
  .trustedby__track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .trustedby__track > [aria-hidden="true"] {
    display: none;
  }

  /* Testimonial wall -> fully visible, no reveal */
  .t-wall .t-bubble { opacity: 1 !important; transform: none !important; }

  /* Hero rotator → static word, no cursor */
  .hero h1 .rot__reveal { width: var(--word-px); }
  .hero h1 .rot__cursor { display: none; }
}

/* ============================================================
   V6 - smooth bevels + visible shadow + visible glow
   ============================================================ */

/* Base: every section inside <main> + footer gets rounded bottom bevels.
   Drop-shadow is NOT applied via filter: drop-shadow because that follows the
   curved corner shape - at corners the shadow dips deep into N+1's exposed
   gradient (reads dark), at the flat middle it has minimal vertical extent
   (reads faint). Result is "two corner pools" instead of a uniform seam.
   Instead, a flat horizontal shadow band is painted on each subsequent
   section's ::after below - uniform across the full width regardless of curve. */
main > section,
footer {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--bevel) var(--bevel);
  background-color: var(--bg-page);
}

/* Stacking: each section sits ON TOP of the next one. Earlier in DOM = higher z-index. */
/* Combined with negative margin-top, this makes section 1 visually overlap section 2, */
/* so section 1's rounded bottom reveals section 2's top, and the drop-shadow falls onto it. */
.hero          { z-index: 30; }
.value         { z-index: 28; }
#services      { z-index: 27; }
#results       { z-index: 26; }
#apply         { z-index: 24; }
#testimonials  { z-index: 22; }
#usecases      { z-index: 20; }
#faq           { z-index: 18; }
footer.site-footer { z-index: 16; }

/* Negative overlap by --bevel so section N+1 tucks under section N's rounded
   bottom corners - exposes N+1's gradient through the curve. */
main > section + section,
footer.site-footer {
  margin-top: calc(var(--bevel) * -1);
}


/* Content stays above the glow layer */
main > section > * {
  position: relative;
  z-index: 1;
}

/* Base propagated glow - hero + value preserved via :not() exclusion. Testimonials has its
   own dedicated center-stage glow (.t-stage::before), so it's excluded to avoid a double glow.
   Sharpened 4-stop falloff. */
main > section:not(.hero):not(.value):not(.testimonials)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    var(--glow-radius) var(--glow-radius) at var(--glow-x) var(--glow-y),
    rgba(var(--glow-rgb), var(--glow-alpha)) 0%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.7)) 20%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.35)) 45%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.10)) 70%,
    rgba(var(--glow-rgb), 0) 100%
  );
}

/* Per-section glow overrides - blue / purple / lavender rotation, V6 cranked alphas.
   Only `main > section` elements get glow (see ::before selector above), so we only
   define overrides for current top-level sections after the group merges. */
/* Section C (Island + Entertainment) is twice as tall as a normal section,
   so override the V6 single-point glow with a 3-point radial system:
   top-left lavender wash, mid-section bridge glow (kills the seam between the
   two card rows), and bottom-right purple→blue anchor. Radii overlap so the
   gradient reads as one cohesive field rather than disconnected blobs. */
#services::before {
  background:
    radial-gradient(85vw 55vw at 10% 8%,
      rgba(var(--glow-rgb-lavender), 0.48) 0%,
      rgba(var(--glow-rgb-lavender), 0.30) 22%,
      rgba(var(--glow-rgb-purple), 0.15) 55%,
      rgba(var(--glow-rgb-purple), 0) 85%),
    radial-gradient(95vw 50vw at 75% 50%,
      rgba(var(--glow-rgb-purple), 0.38) 0%,
      rgba(var(--glow-rgb-purple), 0.22) 28%,
      rgba(var(--glow-rgb-blue), 0.10) 60%,
      rgba(var(--glow-rgb-blue), 0) 90%),
    radial-gradient(80vw 60vw at 15% 95%,
      rgba(var(--glow-rgb-blue), 0.42) 0%,
      rgba(var(--glow-rgb-purple), 0.26) 28%,
      rgba(var(--glow-rgb-purple), 0.12) 60%,
      rgba(var(--glow-rgb-purple), 0) 90%);
}
#process {
  --glow-rgb: var(--glow-rgb-lavender);
  --glow-x: 50%; --glow-y: 5%;
  --glow-alpha: 0.40; --glow-radius: 70vw;
}
/* Section F (Pricing + CTA) is ~2x taller than a normal section, so override
   the V6 single-point glow with a 2-point radial: blue at top (pricing),
   purple/lavender bridge at bottom (CTA). Radii overlap into one cohesive field. */
#apply::before {
  background:
    radial-gradient(85vw 55vw at 12% 12%,
      rgba(var(--glow-rgb-blue), 0.42) 0%,
      rgba(var(--glow-rgb-blue), 0.26) 22%,
      rgba(var(--glow-rgb-purple), 0.13) 55%,
      rgba(var(--glow-rgb-purple), 0) 85%),
    radial-gradient(90vw 55vw at 80% 95%,
      rgba(var(--glow-rgb-purple), 0.38) 0%,
      rgba(var(--glow-rgb-purple), 0.22) 28%,
      rgba(var(--glow-rgb-lavender), 0.10) 60%,
      rgba(var(--glow-rgb-lavender), 0) 90%);
}
#usecases {
  --glow-rgb: var(--glow-rgb-purple);
  --glow-x: 50%; --glow-y: 0%;
  --glow-alpha: 0.36; --glow-radius: 58vw;
}
#faq {
  --glow-rgb: var(--glow-rgb-lavender);
  --glow-x: 50%; --glow-y: 8%;
  --glow-alpha: 0.32; --glow-radius: 60vw;
}

/* Footer is the page terminus - no bevel, no drop-shadow, dedicated tail glow */
footer.site-footer {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  filter: none;
}
footer.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    50vw 50vw at 50% 0%,
    rgba(var(--glow-rgb-blue), 0.26) 0%,
    rgba(var(--glow-rgb-blue), 0.18) 20%,
    rgba(var(--glow-rgb-blue), 0.09) 45%,
    rgba(var(--glow-rgb-blue), 0.03) 70%,
    rgba(var(--glow-rgb-blue), 0) 100%
  );
}
footer.site-footer > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Global film grain - dithers gradient banding so the glow
   rings blend out. Static, pointer-through, sits above page
   content but below the Cal popup (huge z-index).
   ========================================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}



/* =========================================================
   Client Results - placeholder cards
   ========================================================= */
.results { padding-block: clamp(4rem, 7vw, 7rem) clamp(5rem, 8vw, 8rem); }
.results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1160px;
  margin-inline: auto;
  margin-top: clamp(2rem, 3vw, 3rem);
}
.result-card {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 8px 32px rgba(155,123,255,0.12);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  cursor: pointer;
}
/* Gradient border */
.result-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: conic-gradient(from 140deg, #2EA8FF 0deg, #9B7BFF 90deg, #C77DFF 180deg, #9B7BFF 270deg, #2EA8FF 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.45;
  z-index: 1;
  transition: opacity 0.35s ease;
}
/* Shine sweep - keyframe runs exactly once on hover */
@keyframes result-shine {
  0%   { transform: translateX(-150%) skewX(-15deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(250%) skewX(-15deg); opacity: 0; }
}
.result-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 75%;
  border-radius: 24px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%, transparent 100%);
  transform: translateX(-150%) skewX(-15deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.result-card:hover::after {
  animation: result-shine 1.4s ease forwards;
}
.result-card:hover {
  transform: translateY(-7px) scale(1.015);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.65),
    0 10px 40px rgba(155,123,255,0.35),
    0 0 70px rgba(46,168,255,0.14),
    0 0 0 1px rgba(155,123,255,0.3);
}
.result-card:hover::before { opacity: 0.95; }
.result-card picture { display: block; }
.result-card img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 960px) {
  .results__grid { grid-template-columns: 1fr; }
}