/* ==========================================================================
   Viking Media & Software — Core stylesheet
   Dark aurora theme. Motion-first, accessibility-aware.
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons & pills
   6.  Background FX (aurora, grain, grid, cursor)
   7.  Preloader & scroll progress
   8.  Header / navigation
   9.  Hero
   10. Marquee
   11. Cards (service, work, value, team, post)
   12. Process timeline
   13. Stats
   14. Testimonials
   15. Accordion (FAQ)
   16. Pricing
   17. Contact & forms
   18. CTA band
   19. Footer
   20. Page header (interior pages)
   21. Reveal / motion utilities
   22. Responsive
   23. Reduced motion & print
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Surfaces */
  --void: #05060d;
  --ink: #080a14;
  --surface: #0e1120;
  --surface-2: #141830;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text: #eef1ff;
  --muted: #99a1c4;
  --dim: #6c749a;

  /* Aurora palette */
  --mint: #00f0b5;
  --cyan: #29c5ff;
  --violet: #7c5cff;
  --pink: #ff3d9a;
  --gold: #ffc53d;

  /* Gradients */
  --grad-brand: linear-gradient(120deg, #00f0b5 0%, #29c5ff 34%, #7c5cff 66%, #ff3d9a 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(0, 240, 181, .16), rgba(124, 92, 255, .16) 60%, rgba(255, 61, 154, .16));
  --grad-cool: linear-gradient(135deg, #29c5ff, #7c5cff);
  --grad-warm: linear-gradient(135deg, #ff3d9a, #ffc53d);
  --grad-glass: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Depth */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .45);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, .6);
  --glow-cool: 0 0 60px rgba(41, 197, 255, .35);
  --glow-violet: 0 0 70px rgba(124, 92, 255, .4);

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);
  --maxw: 1240px;
  --maxw-narrow: 780px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .55s;

  /* Fonts */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ------------------------------------------------------- 2. Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* iOS paints an opaque grey box on tap by default. Use a brand-tinted one
     instead of removing it — feedback on touch is worth keeping. */
  -webkit-tap-highlight-color: rgba(41, 197, 255, .18);
}

body {
  min-height: 100%;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

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

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol { list-style: none; padding: 0; }

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

::selection {
  background: rgba(124, 92, 255, .45);
  color: #fff;
}

/* Custom scrollbar — Chromium/WebKit */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violet), var(--cyan));
  border: 3px solid var(--void);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--pink), var(--violet)); }

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--violet);
  color: #fff;
  border-radius: var(--r-sm);
  transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------ 3. Layout primitives */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

.shell--narrow { max-width: var(--maxw-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 46rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.section__head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.section__head--split > div { max-width: 42rem; }

/* Tracks are minmax(0, 1fr) everywhere: a bare 1fr keeps min-width:auto, which
   lets unbreakable content (long emails, code) push a track wider than its
   container and give the whole page a horizontal scrollbar. */
.grid { display: grid; gap: clamp(1.1rem, 2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Fills the row with however many cards exist, rather than leaving an empty
   track when a section has fewer items than its fixed column count. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.stack { display: flex; flex-direction: column; }
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---------------------------------------------------- 4. Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.75rem, 8.5vw, 6.5rem);
  line-height: .96;
  letter-spacing: -.045em;
}

.h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); }
.h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -.02em; }
.h4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.015em; }

.lede {
  font-size: clamp(1.05rem, 1.1rem + .35vw, 1.35rem);
  color: var(--muted);
  line-height: 1.65;
  text-wrap: pretty;
}

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.center { text-align: center; }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Keep descenders from clipping on some engines */
  padding-bottom: .06em;
}

.grad-text--warm { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mint);
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint));
}

.section__head--center .eyebrow::after {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--mint), transparent);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem .45rem .6rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
}

.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(0, 240, 181, .7);
  animation: pulse-ring 2.4s infinite;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 240, 181, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 240, 181, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 240, 181, 0); }
}

/* ------------------------------------------------ 5. Buttons & pills */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out),
              border-color .3s var(--ease-out), background-color .3s var(--ease-out);
  white-space: nowrap;
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn:active { transform: scale(.97); }

/* Primary — gradient fill with a light sweep */
.btn--primary {
  color: #05060d;
  background: var(--grad-brand);
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: 0 10px 34px rgba(41, 197, 255, .28);
  transition: background-position .7s var(--ease-out), transform .35s var(--ease-spring), box-shadow .35s var(--ease-out);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 16px 50px rgba(124, 92, 255, .45);
  transform: translateY(-2px);
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(120%); }

/* Ghost — glass with gradient border on hover */
.btn--ghost {
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-strong);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-2px);
}

/* Text link with an animated underline */
.btn--link {
  padding: .35rem 0;
  color: var(--text);
  border-radius: 0;
  background: none;
}
.btn--link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.btn--link:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--link:hover svg { transform: translateX(4px); }
.btn--link svg { transition: transform .35s var(--ease-out); }

.btn--sm { padding: .65rem 1.2rem; font-size: .875rem; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.03rem; }
.btn--block { width: 100%; }

/* Chips / filters */
.chip {
  padding: .5rem 1.05rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .3s var(--ease-out);
}
.chip:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-2px); }
.chip[aria-pressed='true'],
.chip:has(input:checked) {
  color: #05060d;
  background: var(--grad-brand);
  border-color: transparent;
  font-weight: 600;
}

/* The checkbox inside a chip is visually hidden, so surface its focus ring here. */
.chip:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.tag {
  padding: .3rem .7rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

/* -------------------------------------------------- 6. Background FX */
.fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Drifting aurora blobs */
.fx__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}

.fx__aurora--1 {
  width: 46vw;
  height: 46vw;
  top: -12vw;
  left: -8vw;
  background: radial-gradient(circle, rgba(124, 92, 255, .85), transparent 65%);
  animation: drift-a 26s var(--ease-in-out) infinite;
}

.fx__aurora--2 {
  width: 40vw;
  height: 40vw;
  top: 18vh;
  right: -10vw;
  background: radial-gradient(circle, rgba(41, 197, 255, .7), transparent 65%);
  animation: drift-b 32s var(--ease-in-out) infinite;
}

.fx__aurora--3 {
  width: 38vw;
  height: 38vw;
  bottom: -14vw;
  left: 22vw;
  background: radial-gradient(circle, rgba(255, 61, 154, .55), transparent 65%);
  animation: drift-c 29s var(--ease-in-out) infinite;
}

.fx__aurora--4 {
  width: 28vw;
  height: 28vw;
  top: 52vh;
  left: 8vw;
  background: radial-gradient(circle, rgba(0, 240, 181, .5), transparent 65%);
  animation: drift-b 37s var(--ease-in-out) infinite reverse;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(14vw, 9vh, 0) scale(1.18); }
  66%      { transform: translate3d(5vw, 20vh, 0) scale(.9); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-16vw, 12vh, 0) scale(1.22); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(12vw, -14vh, 0) scale(.88); }
  75%      { transform: translate3d(-8vw, -6vh, 0) scale(1.15); }
}

/* Faint engineering grid */
.fx__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
}

/* Film grain */
.fx__grain {
  position: absolute;
  inset: -200%;
  width: 500%;
  height: 500%;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 4%); }
  40%  { transform: translate(4%, -2%); }
  60%  { transform: translate(-2%, -4%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Constellation canvas */
#stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
}

/* Cursor glow — hidden on touch via JS */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 460px;
  height: 460px;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, .17), rgba(41, 197, 255, .07) 42%, transparent 68%);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity .5s ease;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

/* Everything above the FX layer */
.page {
  position: relative;
  z-index: 2;
}

/* -------------------------------------- 7. Preloader & scroll progress */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  gap: 1.5rem;
  background: var(--void);
  transition: opacity .7s var(--ease-out), visibility .7s;
  /* Failure-safe. This overlay covers the whole page, and only JS adds
     .is-done — so if main.js is blocked, fails to load, or throws before
     initPreloader() dismisses it, the page would be sealed off for good.
     Fade it out on a timer that needs no JS at all. The normal path clears
     it in well under a second, so this never fires in practice.
     (JS disabled entirely is handled by the noscript block in the page.) */
  animation: preloader-failsafe .6s var(--ease-out) 3s forwards;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes preloader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
}

.preloader__mark {
  animation: mark-pulse 1.6s var(--ease-in-out) infinite;
}

@keyframes mark-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(41, 197, 255, .4)); }
  50%      { transform: scale(1.09); filter: drop-shadow(0 0 26px rgba(124, 92, 255, .8)); }
}

.preloader__bar {
  width: 190px;
  height: 2px;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.preloader__fill {
  height: 100%;
  width: 0%;
  background: var(--grad-brand);
  transition: width .3s ease;
}

.preloader__word {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--dim);
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 2px;
  background: transparent;
}
.progress__fill {
  height: 100%;
  width: 0;
  background: var(--grad-brand);
  box-shadow: 0 0 14px rgba(124, 92, 255, .8);
  transition: width .1s linear;
}

/* --------------------------------------------- 8. Header / navigation */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  padding-block: 1.15rem;
  transition: padding .4s var(--ease-out), background-color .4s var(--ease-out),
              border-color .4s var(--ease-out), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  padding-block: .6rem;
  background: rgba(6, 7, 15, .72);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--line);
}

.header.is-hidden { transform: translateY(-110%); }
.header { transition-property: transform, padding, background-color, border-color; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: 1.06rem;
  line-height: 1.15;
}

.brand__mark {
  width: 38px;
  height: 38px;
  flex: none;
  transition: transform .6s var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.08); }

.brand__name { display: flex; flex-direction: column; }
.brand__name small {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(14px);
}

.nav__link {
  position: relative;
  padding: .5rem 1.05rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-pill);
  transition: color .3s var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .07);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-spring);
}
.nav__link:hover::before { opacity: 1; transform: scale(1); }
.nav__link.is-active {
  color: var(--text);
  background: var(--grad-brand-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.nav__actions { display: flex; align-items: center; gap: .6rem; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  place-items: center;
}

.nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 3px auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .25s;
}
.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem var(--gutter) 3rem;
  background: rgba(5, 6, 13, .96);
  backdrop-filter: blur(24px);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .6s var(--ease-out), visibility .6s;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }

.drawer__links { display: flex; flex-direction: column; gap: .25rem; }

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.035em;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.drawer.is-open .drawer__link { opacity: 1; transform: translateY(0); }
.drawer.is-open .drawer__link:nth-child(1) { transition-delay: .1s; }
.drawer.is-open .drawer__link:nth-child(2) { transition-delay: .16s; }
.drawer.is-open .drawer__link:nth-child(3) { transition-delay: .22s; }
.drawer.is-open .drawer__link:nth-child(4) { transition-delay: .28s; }
.drawer.is-open .drawer__link:nth-child(5) { transition-delay: .34s; }
.drawer__link:hover { color: var(--cyan); }
.drawer__link span {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--dim);
  letter-spacing: .2em;
}

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s .42s var(--ease-out), transform .5s .42s var(--ease-out);
}
.drawer.is-open .drawer__foot { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------ 9. Hero */
.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex;
  align-items: center;
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

/* No width here — this element also carries .shell, and a later `width: 100%`
   would override the shell's max-width and let the hero span the full viewport. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__copy { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; }

.hero__title {
  font-size: clamp(2.9rem, 7.4vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.045em;
}

/* Per-word entrance mask */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.reveal-word > span {
  display: inline-block;
  transform: translateY(105%);
  animation: word-up .9s var(--ease-out) forwards;
}
@keyframes word-up { to { transform: translateY(0); } }

/* Rotating headline word */
.rotator {
  position: relative;
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  padding-bottom: .1em;
}
/* The gradient lives on each item, not on .rotator. A transformed child is
   painted in its own stacking context and is skipped by an ancestor's
   background-clip:text, which would render the word invisible. */
.rotator__item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(70%) rotateX(-45deg);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  white-space: nowrap;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em;
}
.rotator__item.is-in { opacity: 1; transform: translateY(0) rotateX(0); }
.rotator__item.is-out { opacity: 0; transform: translateY(-70%) rotateX(45deg); }

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: .75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  width: 100%;
}

.hero__proof-item { display: flex; flex-direction: column; gap: .15rem; }
.hero__proof-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
.hero__proof-label {
  font-size: .78rem;
  color: var(--dim);
  letter-spacing: .04em;
}

/* Hero visual — floating device stack */
.hero__visual {
  position: relative;
  height: clamp(380px, 46vw, 560px);
  perspective: 1400px;
}

.float {
  position: absolute;
  border-radius: var(--r-lg);
  background: var(--grad-glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
  will-change: transform;
}

.float--phone {
  top: 50%;
  left: 50%;
  width: clamp(180px, 21vw, 235px);
  aspect-ratio: 9 / 18.5;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  padding: 9px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  box-shadow: var(--shadow-lg), var(--glow-violet);
  animation: bob 7s var(--ease-in-out) infinite;
  z-index: 3;
}

.float--phone .screen {
  height: 100%;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(124, 92, 255, .55), transparent 60%),
    radial-gradient(100% 70% at 90% 100%, rgba(0, 240, 181, .45), transparent 60%),
    #0a0c18;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.4rem .85rem .85rem;
}

.screen__notch {
  position: absolute;
  top: .5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 5px;
  background: rgba(0, 0, 0, .55);
  border-radius: var(--r-pill);
}

.screen__row {
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  animation: shimmer-row 2.6s var(--ease-in-out) infinite;
}
/* Children of .screen are: notch, row, row, row, tile — so the rows are 2–4. */
.screen__row:nth-child(2) { width: 84%; animation-delay: .1s; }
.screen__row:nth-child(3) { width: 62%; animation-delay: .25s; }
.screen__row:nth-child(4) { width: 48%; animation-delay: .4s; }

@keyframes shimmer-row {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}

.screen__tile {
  margin-top: auto;
  height: 38%;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(41, 197, 255, .5), rgba(255, 61, 154, .45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: hue 9s linear infinite;
}

@keyframes hue {
  to { filter: hue-rotate(360deg); }
}

.float--card {
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
  z-index: 4;
}

.float--card-1 {
  top: 8%;
  left: -4%;
  animation: bob 6s var(--ease-in-out) infinite .4s;
}
.float--card-2 {
  bottom: 12%;
  right: -6%;
  animation: bob 8s var(--ease-in-out) infinite .9s;
}
.float--card-3 {
  bottom: 2%;
  left: 2%;
  animation: bob 7.5s var(--ease-in-out) infinite 1.4s;
}

.float__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--grad-cool);
  color: #05060d;
}
.float__icon svg { width: 18px; height: 18px; }
.float__icon--warm { background: var(--grad-warm); }
.float__icon--mint { background: linear-gradient(135deg, var(--mint), var(--cyan)); }

.float__meta { display: flex; flex-direction: column; line-height: 1.3; }
.float__meta b { font-family: var(--font-display); font-size: .92rem; }
.float__meta span { color: var(--dim); font-size: .75rem; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(1deg); }
}
/* The phone keeps its centring transform while bobbing */
.float--phone { animation-name: bob-center; }
@keyframes bob-center {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  50%      { transform: translate(-50%, calc(-50% - 16px)) rotate(1.2deg); }
}

.hero__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120%, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 50%;
  animation: spin 40s linear infinite;
}
.hero__ring::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 18px var(--mint);
}
.hero__ring--inner {
  width: min(90%, 380px);
  animation-duration: 28s;
  animation-direction: reverse;
  border-color: rgba(255, 255, 255, .08);
}
.hero__ring--inner::after { background: var(--pink); box-shadow: 0 0 18px var(--pink); }

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.scroll-hint {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
}
.scroll-hint__line {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  animation: scroll-line 2.2s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes scroll-line {
  0%       { transform: scaleY(0); opacity: 0; }
  40%      { transform: scaleY(1); opacity: 1; }
  100%     { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* -------------------------------------------------------- 10. Marquee */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  user-select: none;
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-right: clamp(2rem, 5vw, 4rem);
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }

@keyframes slide { to { transform: translateX(-100%); } }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--dim);
  white-space: nowrap;
  transition: color .3s var(--ease-out);
}
.marquee__item:hover { color: var(--text); }
.marquee__item svg { width: 20px; height: 20px; opacity: .8; }

.marquee--big .marquee__item {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .18);
}
.marquee--big .marquee__item:hover {
  color: transparent;
  -webkit-text-stroke: 1px var(--cyan);
}
.marquee--big .marquee__item em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
}

/* ---------------------------------------------------------- 11. Cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--grad-glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease-out), border-color .4s var(--ease-out), box-shadow .5s var(--ease-out);
}

/* Pointer-tracked spotlight (coords set in JS) */
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, .22), transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.card:hover::before { opacity: 1; }

.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  color: var(--cyan);
  transition: transform .5s var(--ease-spring), background-color .4s, color .4s, border-color .4s;
}
.card__icon svg { width: 26px; height: 26px; }
.card:hover .card__icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  background: var(--grad-cool);
  border-color: transparent;
  color: #05060d;
}

.card__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }
.card__text { color: var(--muted); font-size: .95rem; }

.card__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.card__list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .875rem;
  color: var(--muted);
}
.card__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: .58em;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
}

.card__num {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  transition: color .5s var(--ease-out);
}
.card:hover .card__num { color: rgba(255, 255, 255, .1); }

/* Cards that highlight themselves */
.card--feature {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(124, 92, 255, .2), transparent 55%),
    var(--grad-glass);
}

.card--wide { grid-column: span 2; }

/* Gradient hairline border on hover */
.card--edge::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: var(--grad-brand);
  -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;
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.card--edge:hover::after { opacity: .9; }

/* --- Work / portfolio cards --- */
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .55s var(--ease-out), border-color .4s, box-shadow .55s;
}
.work-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.work-card__art {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.work-card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 6, 13, .85));
}

.work-card__glyph {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .92);
  mix-blend-mode: overlay;
  transition: transform .7s var(--ease-out);
}
.work-card:hover .work-card__glyph { transform: scale(1.12) rotate(-3deg); }

/* Art backdrops */
.art-1 { background: linear-gradient(135deg, #7c5cff, #29c5ff); }
.art-2 { background: linear-gradient(135deg, #ff3d9a, #ffc53d); }
.art-3 { background: linear-gradient(135deg, #00f0b5, #29c5ff); }
.art-4 { background: linear-gradient(135deg, #7c5cff, #ff3d9a); }
.art-5 { background: linear-gradient(135deg, #ffc53d, #00f0b5); }
.art-6 { background: linear-gradient(135deg, #29c5ff, #7c5cff 60%, #ff3d9a); }

.work-card__art .orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  filter: blur(2px);
  animation: bob 9s var(--ease-in-out) infinite;
}
.work-card__art .orb:nth-of-type(1) { width: 38%; aspect-ratio: 1; top: -12%; right: -8%; }
.work-card__art .orb:nth-of-type(2) { width: 24%; aspect-ratio: 1; bottom: 6%; left: 8%; animation-delay: 1.2s; }

.work-card__body {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.4rem 1.5rem 1.6rem;
}

.work-card__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.work-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.025em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.work-card__title svg {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: all .4s var(--ease-out);
}
.work-card:hover .work-card__title svg { opacity: 1; transform: translate(0, 0); }

.work-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }

.work-card.is-hidden { display: none; }

/* --- Value / small stat cards --- */
.value {
  display: flex;
  gap: 1rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .025);
  transition: background-color .4s, border-color .4s, transform .4s var(--ease-out);
}
.value:hover { background: rgba(255, 255, 255, .05); border-color: var(--line-strong); transform: translateY(-4px); }
.value__k {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--cyan);
  flex: none;
  padding-top: .18rem;
}

/* --- Team --- */
.member { text-align: center; display: flex; flex-direction: column; gap: .85rem; align-items: center; }
.member__avatar {
  position: relative;
  width: clamp(120px, 16vw, 165px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: #05060d;
  transition: transform .55s var(--ease-spring), box-shadow .55s;
}
.member:hover .member__avatar { transform: translateY(-6px) scale(1.04); box-shadow: var(--glow-violet); }
.member__avatar::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 50%;
  animation: spin-simple 22s linear infinite;
}
@keyframes spin-simple { to { transform: rotate(360deg); } }
.member__role {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ----------------------------------------------- 12. Process timeline */
.steps { position: relative; display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.steps::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px;
  width: 1px;
  background: linear-gradient(180deg, var(--mint), var(--violet), var(--pink));
  opacity: .35;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.25rem 0;
}

.step__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--cyan);
  transition: all .5s var(--ease-spring);
}
.step:hover .step__dot {
  background: var(--grad-cool);
  color: #05060d;
  border-color: transparent;
  transform: scale(1.1);
  box-shadow: var(--glow-cool);
}

.step__body { display: flex; flex-direction: column; gap: .55rem; padding-top: .5rem; }
.step__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.025em; }
.step__meta {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------------------------------------------------------- 13. Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: rgba(10, 12, 24, .75);
  backdrop-filter: blur(10px);
  transition: background-color .45s var(--ease-out);
}
.stat:hover { background: rgba(20, 24, 48, .9); }

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { font-size: .85rem; color: var(--muted); }

/* -------------------------------------------------- 14. Testimonials */
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: clamp(300px, 34vw, 430px);
  flex: none;
  padding: 1.75rem;
  background: var(--grad-glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  white-space: normal;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: .6;
  color: var(--violet);
}
.quote__text { color: var(--text); font-size: .98rem; }
.quote__who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.quote__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: #05060d;
  background: var(--grad-cool);
}
.quote__name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.quote__co { font-size: .78rem; color: var(--dim); }

.stars { display: flex; gap: .15rem; color: var(--gold); }
.stars svg { width: 15px; height: 15px; }

/* -------------------------------------------------- 15. FAQ accordion */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.015em;
  cursor: pointer;
  transition: color .3s var(--ease-out);
}
.faq__q:hover { color: var(--cyan); }

.faq__sign {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform .45s var(--ease-out), background-color .4s, border-color .4s;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease-out), opacity .3s;
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded='true'] .faq__sign { transform: rotate(180deg); background: var(--grad-cool); border-color: transparent; color: #05060d; }
.faq__q[aria-expanded='true'] .faq__sign::after { opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.faq__a > div { overflow: hidden; }
.faq__q[aria-expanded='true'] + .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding-bottom: 1.6rem; color: var(--muted); max-width: 62ch; }

/* -------------------------------------------------------- 16. Pricing */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--grad-glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}
.plan:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.plan--best {
  border-color: rgba(124, 92, 255, .5);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 92, 255, .22), transparent 60%),
    var(--grad-glass);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .2), var(--shadow-md);
}

.plan__flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .85rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #05060d;
  background: var(--grad-brand);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.035em;
}
.plan__price small { font-family: var(--font-body); font-size: .85rem; font-weight: 400; color: var(--dim); letter-spacing: 0; }

.plan__features { display: flex; flex-direction: column; gap: .7rem; }
.plan__features li { display: flex; gap: .65rem; font-size: .92rem; color: var(--muted); }
.plan__features svg { width: 17px; height: 17px; flex: none; margin-top: .22em; color: var(--mint); }

/* --------------------------------------------- 17. Contact & forms */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form { display: flex; flex-direction: column; gap: 1.15rem; }

.field { display: flex; flex-direction: column; gap: .5rem; }

.field label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .9rem 1.1rem;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .3s var(--ease-out), background-color .3s, box-shadow .3s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--surface); color: var(--text); }

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: rgba(124, 92, 255, .7);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .14);
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: var(--pink); }

.field__error {
  font-size: .78rem;
  color: var(--pink);
  min-height: 1em;
}

.field--select { position: relative; }
.field--select::after {
  content: '';
  position: absolute;
  right: 1.15rem;
  bottom: 2.4rem;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.form__note { font-size: .82rem; color: var(--dim); }

.form__status {
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  font-size: .9rem;
  border: 1px solid transparent;
  display: none;
}
.form__status.is-ok {
  display: block;
  color: var(--mint);
  background: rgba(0, 240, 181, .08);
  border-color: rgba(0, 240, 181, .3);
}
.form__status.is-bad {
  display: block;
  color: var(--pink);
  background: rgba(255, 61, 154, .08);
  border-color: rgba(255, 61, 154, .3);
}

.contact-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: rgba(10, 12, 24, .7);
  transition: background-color .35s var(--ease-out);
}
.contact-item:hover { background: rgba(20, 24, 48, .9); }
.contact-item__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  color: var(--cyan);
}
.contact-item__icon svg { width: 19px; height: 19px; }
.contact-item__meta { display: flex; flex-direction: column; }
.contact-item__meta span { font-size: .75rem; color: var(--dim); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.contact-item__meta b { font-weight: 600; font-size: .96rem; overflow-wrap: anywhere; }
.contact-item__meta { min-width: 0; }

/* ------------------------------------------------------- 18. CTA band */
.cta {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(124, 92, 255, .3), transparent 60%),
    radial-gradient(70% 100% at 100% 100%, rgba(255, 61, 154, .22), transparent 60%),
    rgba(10, 12, 24, .7);
}

.cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.cta::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -10%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  transform: rotate(18deg);
  animation: sweep 7s var(--ease-in-out) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-40%) rotate(18deg); }
  60%  { transform: translateX(180%) rotate(18deg); }
  100% { transform: translateX(180%) rotate(18deg); }
}

/* ---------------------------------------------------------- 19. Footer */
.footer {
  position: relative;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: 2rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(124, 92, 255, .06));
}

.footer__grid {
  display: grid;
  /* Last column is wider so the contact email fits on one line. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}

.footer__col { display: flex; flex-direction: column; gap: 1rem; }
.footer__title {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer__links { display: flex; flex-direction: column; gap: .6rem; }
.footer__links a {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: .93rem;
  color: var(--muted);
  transition: color .3s var(--ease-out), transform .3s var(--ease-out);
}
.footer__links a:hover { color: var(--text); transform: translateX(4px); }

.socials { display: flex; gap: .6rem; }
.social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: all .35s var(--ease-out);
}
.social svg { width: 18px; height: 18px; }
.social:hover {
  color: #05060d;
  background: var(--grad-cool);
  border-color: transparent;
  transform: translateY(-3px);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--dim);
}
.footer__bottom a:hover { color: var(--text); }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 15vw, 11rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .85;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
  user-select: none;
  padding-block: 1.5rem 1rem;
}

/* ------------------------------------------------- 20. Page header */
.page-head {
  position: relative;
  padding-top: clamp(9rem, 18vh, 13rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.page-head__inner { display: flex; flex-direction: column; gap: 1.4rem; max-width: 54rem; }

.crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.crumbs a:hover { color: var(--cyan); }
.crumbs span { opacity: .5; }

/* ------------------------------------------ 21. Reveal / motion utils */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal='left']  { transform: translateX(-42px); }
[data-reveal='right'] { transform: translateX(42px); }
[data-reveal='scale'] { transform: scale(.93); }
[data-reveal='blur']  { filter: blur(10px); transform: translateY(24px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-parallax] { will-change: transform; }

.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt > * { transform: translateZ(28px); }

.magnetic { will-change: transform; }

.glow-hover { transition: filter .4s var(--ease-out); }
.glow-hover:hover { filter: drop-shadow(0 0 22px rgba(41, 197, 255, .55)); }

/* ------------------------------------------------------ 22. Responsive */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { height: clamp(340px, 60vw, 460px); order: -1; }
  .hero__copy { align-items: flex-start; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Horizontal entrance offsets are fine for narrow grid children but push
     full-width blocks (like a legal page's prose column) past the viewport
     edge on small screens, so reveal them vertically instead. */
  [data-reveal='left'],
  [data-reveal='right'] { transform: translateY(28px); }

  .nav__links { display: none; }
  .nav__toggle { display: grid; }
  .nav__actions .btn--primary { display: none; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section__head--split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .card--wide { grid-column: span 1; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .float--card-1 { left: -2%; top: 4%; }
  .float--card-2 { right: -2%; }
  .float--card-3 { display: none; }
  .hero__proof { gap: 1.4rem 2rem; }
  .step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .step__dot { width: 44px; height: 44px; }
  .steps::before { left: 21px; }
  .quote { width: min(84vw, 380px); }
}

/* ------------------------------------------------ 24. Product cards ---- */
/* Our own published products, not client work: each carries the platforms it
   ships on and how it is paid for. */
.product__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.product__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 17px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #05060d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .55s var(--ease-spring);
}
.card:hover .product__icon { transform: translateY(-3px) rotate(-5deg) scale(1.05); }

.price-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  flex: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
}
.price-badge--sub { color: var(--violet); border-color: rgba(124, 92, 255, .45); background: rgba(124, 92, 255, .1); }
.price-badge--once { color: var(--mint); border-color: rgba(0, 240, 181, .4); background: rgba(0, 240, 181, .08); }
.price-badge--free { color: var(--cyan); border-color: rgba(41, 197, 255, .4); background: rgba(41, 197, 255, .08); }
.price-badge--soon { color: var(--gold); border-color: rgba(255, 197, 61, .4); background: rgba(255, 197, 61, .08); }

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.notice {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 197, 61, .35);
  background: rgba(255, 197, 61, .07);
  font-size: .92rem;
  color: var(--muted);
}
.notice svg { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: .1rem; }
.notice strong { color: var(--text); }

/* ------------------------------------------------- 25. Prose (legal) ---- */
.prose {
  max-width: 74ch;
  color: var(--muted);
}

.prose > * + * { margin-top: 1.15rem; }

.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--text);
  scroll-margin-top: 7rem;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.1rem;
  color: var(--text);
}

.prose a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--mint); }

.prose ul,
.prose ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li::marker { color: var(--violet); }

.prose strong { color: var(--text); font-weight: 600; }

.prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: .15em .45em;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}

.prose hr {
  border: 0;
  height: 1px;
  margin-block: 2.5rem;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.toc {
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--grad-glass);
}
.toc p {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .6rem;
}
.toc a {
  padding: .4rem .55rem;
  font-size: .87rem;
  color: var(--muted);
  border-radius: 7px;
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.toc a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}

/* ------------------------------------------------- 26. Touch devices ---- */
/* ------------------------------------------------ 27. Calculator (tools) */
.calc { gap: 1.75rem; padding: clamp(1.5rem, 4vw, 2.25rem); }

/* minmax(0, 1fr), never a bare 1fr: a bare one keeps min-width: auto, and the
   number inputs are wide enough to push a scrollbar onto the page. */
.calc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.15rem;
  width: 100%;
}

.calc__pair { display: flex; align-items: stretch; gap: .5rem; }
.calc__pair input { flex: 1 1 auto; min-width: 0; }
.calc__pair select { flex: 0 0 auto; width: auto; padding-inline: .75rem; }

.calc__unit {
  display: inline-flex;
  align-items: center;
  padding: 0 .85rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
}

.calc__out { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.calc__out[hidden] { display: none; }

.calc__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1rem;
  width: 100%;
}

.calc__figure {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
}
.calc__figure strong { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; }
.calc__figure--lead { border-color: rgba(41, 197, 255, .4); background: rgba(41, 197, 255, .07); }
.calc__figure--lead strong { font-size: 2.1rem; color: var(--cyan); }

.calc__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.syringe { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; margin: 0; }
.syringe__svg { max-width: 100%; height: auto; color: var(--text); }

.calc__note {
  padding: .85rem 1rem;
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 197, 61, .07);
  font-size: .93rem;
}
.calc__note + .calc__note { margin-top: .6rem; }

.calc__share input { font-family: var(--font-mono); font-size: .82rem; }

.calc__disclaimer {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .93rem;
  color: var(--muted);
}

/* A four-column table does not fit a 320px screen at a readable size, so it
   scrolls inside its own box. The page body must never scroll sideways. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}

.table-wrap table { width: 100%; border-collapse: collapse; min-width: 30rem; }

.table-wrap th,
.table-wrap td {
  padding: .8rem 1rem;
  text-align: left;
  font-size: .93rem;
  border-bottom: 1px solid var(--line);
}

.table-wrap th {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(255, 255, 255, .03);
  white-space: nowrap;
}

.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap td { font-variant-numeric: tabular-nums; }

/* Measured on a 4x-throttled 390x844 phone, the site ran at 12fps. The cost was
   almost entirely the four .fx__aurora blobs: large elements carrying
   filter: blur(90px) while animating transform and scale, which forces the
   compositor to re-rasterise a huge blurred surface every frame. Removing the
   whole .fx layer took it to 37fps.
   
   So on touch devices the animated blobs, the grain and the canvas are replaced
   by static radial gradients. They cost nothing to paint, and at 90px blur the
   original was already an indistinct colour wash — this looks the same and
   scrolls three times faster. */
@media (hover: none), (pointer: coarse) {
  .fx__aurora,
  .fx__grain,
  #stars { display: none; }

  .fx {
    background:
      radial-gradient(70vw 70vw at 10% 4%, rgba(124, 92, 255, .32), transparent 62%),
      radial-gradient(65vw 65vw at 94% 26%, rgba(41, 197, 255, .24), transparent 62%),
      radial-gradient(70vw 70vw at 46% 74%, rgba(255, 61, 154, .20), transparent 62%),
      radial-gradient(55vw 55vw at 6% 96%, rgba(0, 240, 181, .16), transparent 62%);
  }

  /* Decorative and expensive: a blurred, spinning ring behind the hero. */
  .hero__ring { display: none; }

  /* backdrop-filter on a scrolling sticky header is costly on mobile GPUs.
     A near-opaque background reads the same and is essentially free. */
  .header.is-stuck {
    background: rgba(6, 7, 15, .94);
    backdrop-filter: none;
  }

  /* Touch targets. Apple asks for 44pt; WCAG 2.2 SC 2.5.8 asks for 24px.
     These were 19–38px tall, which is a genuine miss on a phone. */
  .brand,
  .btn--link,
  .footer__col a,
  .footer__links a,
  .crumbs a,
  .toc a,
  .drawer__foot a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Links sitting inside a sentence are exempt from the target-size rule
     (WCAG 2.2 SC 2.5.8), and padding them out would wreck the line spacing. */
  .faq__a p a,
  .prose p a,
  .prose li a {
    min-height: 0;
    display: inline;
  }

  .footer__links { gap: .1rem; }
}

/* The longest rotating word ("mobile games.") overflowed the shell on a 320px
   screen and was clipped by the hero's overflow:hidden. */
@media (max-width: 360px) {
  .hero__title { font-size: 2.25rem; }
}

/* The investor CTA's button is labelled with the whole email address, which at
   .btn's white-space:nowrap measured 330px against a 214px container on a
   320px screen — .cta's overflow:hidden then clipped the address mid-string
   rather than pushing the page sideways, which is why the overflow sweep
   missed it. Full width removes the left-alignment mismatch at the same time. */
@media (max-width: 560px) {
  .cta .btn--lg {
    width: 100%;
    padding-inline: 1.1rem;
    font-size: .95rem;
    white-space: normal;
    overflow-wrap: anywhere;
    /* Below ~360px the address wraps whatever we do -- 29 characters do not fit
       214px at any readable size. Centre the lines so it reads as a choice. */
    text-align: center;
  }
}

/* ------------------------------------------ 23. Reduced motion & print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal-word > span { transform: none; }
  .cursor-glow { display: none; }
  .fx__grain { display: none; }
  .marquee__track { animation: none; }
}

@media print {
  .fx, .cursor-glow, .preloader, .progress, .header, .drawer, .scroll-hint { display: none !important; }
  body { background: #fff; color: #000; }
  .page { z-index: auto; }
}