:root {
  --space: #06031A;
  --night: #0E0729;
  --surface: #1A0F38;
  --surface-2: #241349;
  --violet: #A78BFA;
  --violet-strong: #8B5CF6;
  --magenta: #D946EF;
  --magenta-strong: #C026D3;
  --pink: #EC4899;
  --cyan: #22D3EE;
  --cyan-strong: #06B6D4;
  --silver: #D4C8FB;
  --silver-strong: #E8DDFE;
  --white: #FFFFFF;
  --line: rgba(196, 181, 253, 0.10);
  --line-strong: rgba(217, 70, 239, 0.42);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  --content: min(1240px, calc(100vw - 48px));
  --font-serif: "Fraunces", "Tiempos", Georgia, serif;
  --font-display: "Fraunces", "Tiempos", Georgia, serif;
  --font-hero: "Fraunces", "Tiempos", Georgia, serif;
  --font-brand: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Harmony framework — a Fibonacci spacing scale used as the invisible
     rhythm behind section breathing, card padding and micro-gaps. Adjacent
     steps relate by ~1.618, so the whole layout settles on one proportion. */
  --s-8: 8px;
  --s-13: 13px;
  --s-21: 21px;
  --s-34: 34px;
  --s-55: 55px;
  --s-89: 89px;
  --s-144: 144px;
  --phi: 1.618;
  /* Aurora reserved for rare manifesto moments only (not for every accent) */
  --grad-aurora: linear-gradient(120deg, #8B5CF6 0%, #D946EF 50%, #EC4899 100%);
  --grad-aurora-soft: linear-gradient(120deg, rgba(139, 92, 246, 0.6), rgba(217, 70, 239, 0.6));
  --cursor-x: 50vw;
  --cursor-y: 30vh;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.18), transparent 40rem),
    radial-gradient(ellipse at 80% 30%, rgba(217, 70, 239, 0.12), transparent 36rem),
    radial-gradient(ellipse at 20% 70%, rgba(34, 211, 238, 0.08), transparent 32rem),
    linear-gradient(180deg, var(--space), #030115 50%, var(--space));
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--cursor-x) var(--cursor-y),
    rgba(217, 70, 239, 0.08),
    transparent 18rem
  );
}

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

/* === FOCUS-VISIBLE === */
:focus { outline: none; }

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

.site-nav a:focus-visible,
.text-link:focus-visible,
.service-card-link:focus-visible,
.footer-col a:focus-visible {
  outline-offset: 4px;
}

.button:focus-visible,
.header-cta:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.25);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 50;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  background: var(--night);
  color: var(--white);
  transform: translateY(-140%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-shell { position: relative; isolation: isolate; }

.global-grid, .global-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.global-grid {
  background-image:
    linear-gradient(rgba(196, 181, 253, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 181, 253, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 80%);
}

/* === AMBIENT MOTION === */
.ambient-mesh {
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 32% at 18% 28%, rgba(139, 92, 246, 0.16), transparent 62%),
    radial-gradient(ellipse 38% 28% at 82% 18%, rgba(217, 70, 239, 0.13), transparent 62%),
    radial-gradient(ellipse 34% 34% at 62% 72%, rgba(34, 211, 238, 0.10), transparent 62%),
    radial-gradient(ellipse 30% 26% at 30% 82%, rgba(236, 72, 153, 0.08), transparent 62%);
  filter: blur(28px);
  animation: meshDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-3%, 2.5%) scale(1.1) rotate(2deg); }
  100% { transform: translate(2.5%, -2%) scale(1.05) rotate(-1.5deg); }
}

.ambient-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.ambient-particle {
  position: absolute;
  bottom: -10px;
  width: var(--p-size, 2px);
  height: var(--p-size, 2px);
  border-radius: 50%;
  background: var(--p-color, rgba(217, 70, 239, 0.7));
  box-shadow: 0 0 6px var(--p-color, rgba(217, 70, 239, 0.5));
  opacity: 0;
  animation: floatUp var(--p-dur, 18s) linear infinite;
  animation-delay: var(--p-delay, 0s);
  will-change: transform, opacity;
}

@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: var(--p-opacity, 0.7); }
  92%  { opacity: var(--p-opacity, 0.7); }
  100% { transform: translateY(-104vh) translateX(var(--p-drift, 20px)); opacity: 0; }
}

.global-noise {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='16' cy='20' r='1'/%3E%3Ccircle cx='84' cy='34' r='1'/%3E%3Ccircle cx='144' cy='50' r='1'/%3E%3Ccircle cx='36' cy='110' r='1'/%3E%3Ccircle cx='122' cy='136' r='1'/%3E%3Ccircle cx='162' cy='160' r='1'/%3E%3Ccircle cx='190' cy='90' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* === HEADER === */
.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  width: var(--content);
  min-height: 64px;
  padding: 0 22px;
  border: 1px solid var(--line);
  background: rgba(14, 7, 41, 0.7);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(22px);
  transform: translateX(-50%);
  transition: min-height 200ms ease, background 200ms ease, border-color 200ms ease;
  border-radius: 100px;
}

/* === LANGUAGE TOGGLE === */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 3, 26, 0.5);
}

.lang-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.lang-toggle button:hover { color: var(--white); }

.lang-toggle button[aria-pressed="true"] {
  background: var(--grad-aurora);
  color: var(--white);
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.35);
}

.lang-toggle button:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.site-header.is-compact {
  min-height: 54px;
  border-color: rgba(217, 70, 239, 0.28);
  background: rgba(6, 3, 26, 0.88);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-aurora);
  box-shadow: 0 0 22px rgba(217, 70, 239, 0.5);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--space);
  border: 1px solid rgba(217, 70, 239, 0.6);
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 50% 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 8px var(--magenta);
  z-index: 1;
}

.brand-name,
.brand-word,
.brand-tld {
  font-family: var(--font-brand);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
}

/* When the brand uses the wordmark composition (Through + mark + .com)
   the gap tightens so the trio reads as one mark, and the magenta
   dot in .com mirrors the hero treatment */
.brand:has(.brand-word) { gap: 8px; }

.brand-tld .brand-dot {
  color: var(--magenta);
  font-weight: 500;
}

.site-nav { display: flex; justify-content: center; gap: 32px; }

.site-nav a, .header-cta {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-nav a {
  color: var(--silver);
  transition: color 180ms ease;
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--magenta);
  transform: translateX(-50%);
  transition: width 200ms ease;
  box-shadow: 0 0 6px var(--magenta);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="true"] { color: var(--white); }

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="true"]::after { width: 100%; }

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 36px;
  padding: 0 18px;
  border: 1px solid transparent;
  background: linear-gradient(var(--night), var(--night)) padding-box, var(--grad-aurora) border-box;
  border-radius: 999px;
  color: var(--white);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.header-cta:hover, .header-cta:focus-visible {
  background: var(--grad-aurora);
  color: var(--white);
  box-shadow: 0 0 32px rgba(217, 70, 239, 0.55);
  transform: translateY(-1px);
}

/* === HERO === */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  min-height: 100svh;
  padding: var(--s-144) max(var(--s-21), calc((100vw - 1240px) / 2)) var(--s-89);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* Hero top (tagline + h1) — tighter internal stack */
.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-top .hero-tagline {
  margin: 0 0 22px;
}

.hero-top .hero-brand-title {
  margin: 0;
}

/* Hero bottom (slogan + lead + buttons) */
.hero-bottom .hero-slogan {
  margin: 0 auto;
}

.hero-bottom .hero-lead {
  margin: 22px auto 0;
}

.hero-bottom .hero-actions {
  margin-top: 32px;
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(217, 70, 239, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 35% at 75% 25%, rgba(34, 211, 238, 0.12), transparent 60%),
    linear-gradient(180deg, #08051A 0%, #100537 35%, #1A0A4A 55%, #0E0729 100%);
}

/* nebula */
.scene-nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 20% at 22% 18%, rgba(217, 70, 239, 0.35), transparent 70%),
    radial-gradient(ellipse 35% 25% at 78% 14%, rgba(139, 92, 246, 0.45), transparent 70%),
    radial-gradient(ellipse 25% 18% at 50% 8%, rgba(236, 72, 153, 0.2), transparent 70%);
  filter: blur(40px);
  opacity: 0.7;
}

/* stars */
.scene-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 14%, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 18% 24%, rgba(167, 139, 250, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 8%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 18%, rgba(236, 72, 153, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 32%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 10%, rgba(34, 211, 238, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.7) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 88% 14%, rgba(217, 70, 239, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 38%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 95% 32%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 5% 8%, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 2px);
  animation: starsTwinkle 6s ease-in-out infinite;
}

/* shooting stars */
.scene-shooter {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--white);
}
.scene-shooter::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--white));
  transform-origin: right center;
  transform: rotate(20deg);
}
.scene-shooter-1 { top: 12%; left: 18%; animation: shoot 14s ease-in infinite; }
.scene-shooter-2 { top: 20%; right: 22%; animation: shoot 18s ease-in infinite 7s; }

/* moon */
.scene-moon {
  position: absolute;
  top: 18%;
  right: 8%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(196, 181, 253, 0.7) 40%, rgba(139, 92, 246, 0.3) 70%);
  box-shadow:
    inset -18px -12px 40px rgba(80, 30, 120, 0.6),
    0 0 60px rgba(196, 181, 253, 0.35);
  opacity: 0.92;
}

.scene-moon::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, transparent 60%, rgba(80, 30, 120, 0.4));
}

/* city silhouette */
.scene-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(6, 3, 26, 0.6) 50%, var(--space));
}

.scene-city-back, .scene-city-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--space);
}

.scene-city-back {
  height: 70%;
  opacity: 0.6;
  clip-path: polygon(
    0 100%, 0 60%, 3% 60%, 3% 45%, 6% 45%, 6% 70%, 10% 70%, 10% 38%, 14% 38%, 14% 58%, 18% 58%, 18% 30%, 22% 30%, 22% 55%, 26% 55%, 26% 42%, 30% 42%, 30% 22%, 35% 22%, 35% 50%, 40% 50%, 40% 28%, 45% 28%, 45% 18%, 48% 18%, 48% 38%, 52% 38%,
    52% 30%, 56% 30%, 56% 14%, 60% 14%, 60% 35%, 64% 35%, 64% 20%, 68% 20%, 68% 45%, 72% 45%, 72% 26%, 76% 26%, 76% 50%, 80% 50%, 80% 38%, 84% 38%, 84% 58%, 88% 58%, 88% 32%, 92% 32%, 92% 60%, 96% 60%, 96% 48%, 100% 48%, 100% 100%
  );
  filter: brightness(0.5);
}

.scene-city-front {
  height: 100%;
  clip-path: polygon(
    0 100%, 0 70%, 2% 70%, 2% 56%, 5% 56%, 5% 75%, 8% 75%, 8% 50%, 12% 50%, 12% 68%, 15% 68%, 15% 42%, 19% 42%, 19% 60%, 22% 60%, 22% 38%, 25% 38%, 25% 55%, 28% 55%, 28% 30%, 32% 30%, 32% 50%,
    36% 50%, 36% 36%, 40% 36%, 40% 22%, 43% 22%, 43% 42%, 46% 42%,
    46% 14%, 49% 14%, 49% 30%, 52% 30%, 52% 8%, 55% 8%, 55% 26%, 58% 26%,
    58% 14%, 61% 14%, 61% 36%, 64% 36%, 64% 22%, 67% 22%, 67% 44%, 71% 44%,
    71% 30%, 74% 30%, 74% 52%, 78% 52%, 78% 38%, 82% 38%, 82% 60%,
    86% 60%, 86% 44%, 90% 44%, 90% 64%, 94% 64%, 94% 50%, 98% 50%, 98% 70%, 100% 70%, 100% 100%
  );
}

/* city windows */
.scene-windows {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 26%;
  background-image:
    radial-gradient(circle at 4% 80%, rgba(217, 70, 239, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 7% 70%, rgba(34, 211, 238, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 75%, rgba(236, 72, 153, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 16% 50%, rgba(167, 139, 250, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 20% 65%, rgba(34, 211, 238, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 25% 45%, rgba(217, 70, 239, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 36% 55%, rgba(139, 92, 246, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 35%, rgba(34, 211, 238, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 47% 50%, rgba(236, 72, 153, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 53% 30%, rgba(217, 70, 239, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 65%, rgba(167, 139, 250, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 40%, rgba(34, 211, 238, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 55%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 45%, rgba(217, 70, 239, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 65%, rgba(34, 211, 238, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 50%, rgba(236, 72, 153, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 94% 70%, rgba(139, 92, 246, 0.9) 0 1px, transparent 1.5px);
  filter: blur(0.4px);
  opacity: 0.9;
  animation: windowsFlicker 4s ease-in-out infinite;
}

/* mountains/hills sides */
.scene-hill {
  position: absolute;
  bottom: 0;
  height: 22%;
  background: var(--space);
}

.scene-hill-left {
  left: 0;
  width: 32%;
  clip-path: polygon(0 100%, 0 0, 30% 38%, 60% 18%, 100% 60%, 100% 100%);
  box-shadow: inset -20px 20px 40px rgba(139, 92, 246, 0.15);
}

.scene-hill-right {
  right: 0;
  width: 32%;
  clip-path: polygon(0 60%, 40% 18%, 70% 38%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 20px 20px 40px rgba(217, 70, 239, 0.15);
}

.scene-hill-glow {
  position: absolute;
  bottom: 0;
  height: 22%;
  background-image:
    radial-gradient(circle at 8% 70%, rgba(217, 70, 239, 0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 12% 80%, rgba(236, 72, 153, 0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 18% 60%, rgba(34, 211, 238, 0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 24% 75%, rgba(139, 92, 246, 0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 70%, rgba(217, 70, 239, 0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 84% 80%, rgba(34, 211, 238, 0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 92% 65%, rgba(236, 72, 153, 0.8) 0 1.5px, transparent 2px);
  opacity: 0.8;
  filter: blur(0.3px);
}

.scene-hill-glow-left { left: 0; width: 32%; }
.scene-hill-glow-right { right: 0; width: 32%; }

/* === PORTAL === */
.portal-stage {
  position: relative;
  width: min(30vw, 280px);
  aspect-ratio: 1;
  flex-shrink: 0;
  z-index: 3;
  opacity: 0.95;
}

@media (max-width: 760px) {
  .portal-stage { width: min(56vw, 220px); }
}

.portal-glow {
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(217, 70, 239, 0.3) 0%, rgba(139, 92, 246, 0.18) 28%, rgba(34, 211, 238, 0.08) 50%, transparent 64%);
  filter: blur(44px);
  animation: portalGlow 8s ease-in-out infinite;
}

/* === 3D orbiting satellites === */
.portal-orbits {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 720px;
}

.portal-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(196, 181, 253, 0.12);
}

.portal-orbit .portal-sat {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan), 0 0 4px #fff;
}

.portal-orbit-1 {
  inset: -21%;
  border-color: rgba(217, 70, 239, 0.16);
  animation: orbit1 13s linear infinite;
}
.portal-orbit-1 .portal-sat { background: var(--magenta); box-shadow: 0 0 12px var(--magenta), 0 0 4px #fff; }

.portal-orbit-2 {
  inset: -34%;
  border-color: rgba(34, 211, 238, 0.14);
  animation: orbit2 21s linear infinite;
}
.portal-orbit-2 .portal-sat { width: 6px; height: 6px; margin-left: -3px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.portal-orbit-3 {
  inset: -8%;
  border-color: rgba(236, 72, 153, 0.18);
  animation: orbit3 8s linear infinite;
}
.portal-orbit-3 .portal-sat { width: 5px; height: 5px; margin-left: -2.5px; background: var(--pink); box-shadow: 0 0 10px var(--pink); }

@keyframes orbit1 {
  from { transform: rotateX(74deg) rotateZ(0deg); }
  to   { transform: rotateX(74deg) rotateZ(360deg); }
}
@keyframes orbit2 {
  from { transform: rotateX(66deg) rotateY(18deg) rotateZ(0deg); }
  to   { transform: rotateX(66deg) rotateY(18deg) rotateZ(-360deg); }
}
@keyframes orbit3 {
  from { transform: rotateX(80deg) rotateZ(0deg); }
  to   { transform: rotateX(80deg) rotateZ(360deg); }
}

/* === core pulse — energy ripples emitting outward === */
.portal-core-pulse {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

.portal-core-pulse::before,
.portal-core-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: corePulse 3.6s ease-out infinite;
}

.portal-core-pulse::after { animation-delay: 1.8s; }

@keyframes corePulse {
  0%   { transform: scale(0.4); opacity: 0.8; border-color: rgba(255, 255, 255, 0.6); }
  100% { transform: scale(2.4); opacity: 0; border-color: rgba(217, 70, 239, 0); }
}

.portal-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(217, 70, 239, 0.9),
      rgba(139, 92, 246, 0.6),
      rgba(34, 211, 238, 0.7),
      rgba(236, 72, 153, 0.9),
      rgba(217, 70, 239, 0.9));
  padding: 8px;
  box-shadow:
    0 0 50px rgba(217, 70, 239, 0.5),
    0 0 100px rgba(139, 92, 246, 0.35);
  animation: portalSpin 30s linear infinite;
  will-change: transform;
}

.portal-ring-outer::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--space);
}

.portal-ring-outer::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px dashed rgba(217, 70, 239, 0.35);
  animation: portalSpin 80s linear infinite reverse;
}

.portal-ring-mid {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(217, 70, 239, 0.55);
  box-shadow:
    inset 0 0 30px rgba(217, 70, 239, 0.25),
    0 0 25px rgba(139, 92, 246, 0.4);
}

.portal-ring-mid::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border-top: 2px solid var(--magenta);
  border-right: 2px solid var(--pink);
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  animation: portalSpin 10s linear infinite;
  filter: drop-shadow(0 0 8px rgba(217, 70, 239, 0.9));
}

/* electric content inside portal */
.portal-electric {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 40%, rgba(217, 70, 239, 0.6), transparent 60%),
    radial-gradient(circle at 65% 60%, rgba(139, 92, 246, 0.55), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.18), transparent 70%),
    linear-gradient(135deg, rgba(217, 70, 239, 0.3), rgba(139, 92, 246, 0.4));
}

.portal-electric::before,
.portal-electric::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      27deg,
      transparent 0,
      transparent 5px,
      rgba(255, 255, 255, 0.06) 5px,
      rgba(255, 255, 255, 0.06) 6px
    ),
    repeating-linear-gradient(
      63deg,
      transparent 0,
      transparent 4px,
      rgba(217, 70, 239, 0.08) 4px,
      rgba(217, 70, 239, 0.08) 5px
    );
  mix-blend-mode: screen;
  animation: electric 3.5s linear infinite;
}

.portal-electric::after {
  background-image:
    repeating-linear-gradient(
      113deg,
      transparent 0,
      transparent 6px,
      rgba(255, 255, 255, 0.08) 6px,
      rgba(255, 255, 255, 0.08) 7px
    );
  animation-duration: 5s;
  animation-direction: reverse;
  opacity: 0.6;
}

.portal-bolt {
  position: absolute;
  width: 2px;
  height: 70%;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--white) 30%, rgba(217, 70, 239, 0.8) 70%, transparent);
  filter: blur(0.5px);
  box-shadow: 0 0 20px var(--white);
  opacity: 0.6;
  animation: boltFlicker 0.4s ease-in-out infinite;
}

.portal-bolt-2 {
  width: 1px;
  left: 38%;
  height: 60%;
  top: 22%;
  transform: rotate(-12deg);
  animation-delay: 0.15s;
  opacity: 0.4;
}

.portal-bolt-3 {
  width: 1px;
  left: 62%;
  height: 55%;
  top: 18%;
  transform: rotate(8deg);
  animation-delay: 0.3s;
  opacity: 0.4;
}

/* vertical beam through portal — confined to portal area only */
.portal-beam {
  position: absolute;
  left: 50%;
  top: -55%;
  bottom: -8%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 30%,
    var(--white) 50%,
    rgba(217, 70, 239, 0.6) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.5),
    0 0 36px rgba(217, 70, 239, 0.32);
  z-index: 3;
  animation: beamPulse 4s ease-in-out infinite;
  will-change: opacity, filter;
  pointer-events: none;
}

.portal-beam::before,
.portal-beam::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  filter: blur(2px);
}

.portal-beam::before { top: 0; bottom: 0; }
.portal-beam::after {
  top: 30%;
  bottom: 30%;
  width: 12px;
  background: linear-gradient(180deg, transparent, rgba(217, 70, 239, 0.4), transparent);
  filter: blur(8px);
}

.portal-burst {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 14%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--white), rgba(217, 70, 239, 0.8) 30%, transparent 70%);
  border-radius: 50%;
  filter: blur(2px);
  z-index: 4;
  animation: portalGlow 3s ease-in-out infinite;
}

/* neon road / runway */
.scene-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  perspective: 600px;
  perspective-origin: 50% 0%;
  z-index: 1;
}

.road-streak {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  border-radius: 999px;
  transform-origin: top center;
  filter: blur(0.5px);
}

.road-streak-1 {
  background: linear-gradient(180deg, transparent, rgba(217, 70, 239, 0.9), var(--magenta));
  box-shadow: 0 0 14px var(--magenta);
  transform: translateX(-50%) rotateX(78deg) rotateZ(0deg) scaleY(2.5);
}

.road-streak-2 {
  background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.95), var(--pink));
  box-shadow: 0 0 14px var(--pink);
  transform: translateX(-50%) rotateX(78deg) rotateZ(-6deg) scaleY(2.5) translateX(-40px);
  width: 2px;
}

.road-streak-3 {
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.95), var(--cyan));
  box-shadow: 0 0 14px var(--cyan);
  transform: translateX(-50%) rotateX(78deg) rotateZ(6deg) scaleY(2.5) translateX(40px);
  width: 2px;
}

.road-streak-4 {
  background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.9), var(--violet-strong));
  box-shadow: 0 0 14px var(--violet);
  transform: translateX(-50%) rotateX(78deg) rotateZ(-14deg) scaleY(2.5) translateX(-90px);
  width: 2px;
  opacity: 0.7;
}

.road-streak-5 {
  background: linear-gradient(180deg, transparent, rgba(217, 70, 239, 0.85), var(--magenta));
  box-shadow: 0 0 14px var(--magenta);
  transform: translateX(-50%) rotateX(78deg) rotateZ(14deg) scaleY(2.5) translateX(90px);
  width: 2px;
  opacity: 0.7;
}

.road-streak-6 {
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.8), var(--cyan));
  box-shadow: 0 0 14px var(--cyan);
  transform: translateX(-50%) rotateX(78deg) rotateZ(-22deg) scaleY(2.5) translateX(-160px);
  width: 1.5px;
  opacity: 0.55;
}

.road-streak-7 {
  background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.8), var(--pink));
  box-shadow: 0 0 14px var(--pink);
  transform: translateX(-50%) rotateX(78deg) rotateZ(22deg) scaleY(2.5) translateX(160px);
  width: 1.5px;
  opacity: 0.55;
}

.scene-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0%, rgba(217, 70, 239, 0.3), transparent 70%),
    linear-gradient(180deg, transparent, var(--space) 80%);
  z-index: 2;
}

/* HUD readouts */
.hero-readout {
  position: absolute;
  min-width: 168px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--magenta);
  background: rgba(14, 7, 41, 0.78);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono);
  z-index: 5;
}

.hero-readout-label {
  display: block;
  margin-bottom: 4px;
  color: var(--silver);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-readout-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--magenta);
  font-size: 0.95rem;
  font-weight: 500;
}

.hero-readout-value .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
  animation: pulse 1.6s ease-in-out infinite;
}

.hero-readout-1 { left: 5%; top: 22%; border-left-color: var(--magenta); }
.hero-readout-1 .hero-readout-value { color: var(--magenta); }
.hero-readout-2 { right: 5%; top: 30%; border-left-color: var(--cyan); }
.hero-readout-2 .hero-readout-value { color: var(--cyan); }
.hero-readout-2 .hero-readout-value .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* === HERO CONTENT === */
.hero-content {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 1240px;
  text-align: center;
  padding-bottom: 7vh;
}

.hero-brand-title {
  margin: 0 0 24px;
  font-family: var(--font-brand);
  font-size: clamp(3.2rem, 10vw, 8.2rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-transform: none;
  color: var(--white);
  /* refined glow — single magenta, low alpha */
  filter: drop-shadow(0 0 40px rgba(217, 70, 239, 0.18));
}

.js .hero-brand-title {
  animation: brandReveal 1.2s var(--ease) both;
}

@keyframes brandReveal {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); letter-spacing: 0.08em; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: -0.045em; }
}

.hero-brand-title .brand-dot {
  color: var(--magenta);
  font-weight: 500;
}

/* ============================================================
   HERO WORDMARK — Through  ⟨portal⟩  .com
   horizontal composition where the animated portal sits between
   the brand word and its TLD as a visual character on the baseline
   ============================================================ */
/* Grid 1fr · auto · 1fr ensures the portal is centred on the
   viewport instead of the trio. 'Through' (wider word) and '.com'
   (narrower TLD) hug the portal from each side without shifting
   the portal off-centre. This also pushes '.com' away from the
   right-edge Transit accuracy readout. */
.hero-wordmark {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: clamp(10px, 1.8vw, 28px);
  align-items: center;
  width: 100%;
  margin: 8px 0 36px;
  position: relative;
}

/* Through is THE primary brand word — typographic hierarchy is
   Through (dominant) ▸ portal (visual centrepiece) ▸ .com (suffix).
   Through hugs the right edge of its left column to sit flush
   against the portal */
.hero-wordmark .hero-brand-title {
  margin: 0;
  justify-self: end;
  font-size: clamp(3rem, 9vw, 8.4rem);
  line-height: 0.95;
  filter: drop-shadow(0 0 36px rgba(217, 70, 239, 0.2));
}

/* Portal grows slightly so it stays visually proportionate to a
   bigger 'Through' without feeling like a small dot between two
   giant words */
.hero-wordmark .portal-stage {
  justify-self: center;
  width: min(24vw, 280px);
}

/* .com is the TLD suffix — clearly smaller than Through so the
   wordmark reads 'Through ▸ portal ▸ .com' as a hierarchy, not as
   three equal characters */
.hero-brand-tld {
  display: inline-block;
  justify-self: start;
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--white);
  filter: drop-shadow(0 0 28px rgba(217, 70, 239, 0.16));
}

.hero-brand-tld .brand-dot {
  color: var(--magenta);
  font-weight: 500;
}

.js .hero-brand-tld {
  animation: brandReveal 1.2s var(--ease) both;
  animation-delay: 500ms;
}

/* Tablet: trio still horizontal, sizes scale down preserving the hierarchy */
@media (max-width: 1024px) {
  .hero-wordmark { column-gap: 14px; }
  .hero-wordmark .portal-stage { width: min(26vw, 230px); }
  .hero-wordmark .hero-brand-title { font-size: clamp(2.6rem, 8vw, 6rem); }
  .hero-brand-tld { font-size: clamp(1.6rem, 4.5vw, 3.4rem); }
}

/* Mobile: stack the trio vertically so the brand stays readable */
@media (max-width: 760px) {
  .hero-wordmark {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 4px;
    margin: 0 0 24px;
  }
  .hero-wordmark .hero-brand-title,
  .hero-wordmark .portal-stage,
  .hero-brand-tld { justify-self: center; }
  .hero-wordmark .hero-brand-title { font-size: 4.4rem; }
  .hero-wordmark .portal-stage { width: min(58vw, 240px); }
  .hero-brand-tld { font-size: 2.2rem; }
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 36px;
  padding: 7px 16px;
  border: 1px solid rgba(217, 70, 239, 0.22);
  border-radius: 999px;
  background: rgba(14, 7, 41, 0.5);
  color: var(--silver-strong);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  backdrop-filter: blur(10px);
}

.hero-tagline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
  animation: pulse 1.8s ease-in-out infinite;
}

.hero-slogan {
  margin: 0 auto;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 300;
  font-variation-settings: "opsz" 60, "wght" 320;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--silver-strong);
}

.hero-slogan .accent {
  font-style: italic;
  font-variation-settings: "opsz" 60, "wght" 320;
  color: var(--magenta);
  -webkit-text-fill-color: currentColor;
}

.hero-lead {
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--silver);
  font-size: 1.02rem;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 172px;
  min-height: 50px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    background 240ms var(--ease),
    color 240ms var(--ease),
    box-shadow 240ms var(--ease),
    transform 240ms var(--ease),
    border-color 240ms var(--ease);
}

.button:hover, .button:focus-visible { transform: translateY(-1px); }

.button-primary {
  background: var(--grad-aurora);
  color: var(--white);
  box-shadow: 0 0 32px rgba(217, 70, 239, 0.4), 0 8px 24px rgba(139, 92, 246, 0.3);
}

.button-primary:hover, .button-primary:focus-visible {
  box-shadow: 0 0 50px rgba(217, 70, 239, 0.6), 0 12px 32px rgba(139, 92, 246, 0.45);
}

.button-secondary {
  background: rgba(14, 7, 41, 0.6);
  color: var(--white);
  border: 1px solid rgba(217, 70, 239, 0.28);
  backdrop-filter: blur(10px);
}

.button-secondary:hover, .button-secondary:focus-visible {
  background: rgba(217, 70, 239, 0.08);
  border-color: rgba(217, 70, 239, 0.55);
}

.button-ghost {
  background: transparent;
  color: var(--silver-strong);
  border: 1px solid rgba(196, 181, 253, 0.18);
  min-width: auto;
  padding: 12px 22px;
}

.button-ghost:hover, .button-ghost:focus-visible {
  color: var(--white);
  border-color: rgba(196, 181, 253, 0.45);
  background: rgba(255, 255, 255, 0.025);
}

/* === TL;DR aside === */
.tldr {
  position: relative;
  width: var(--content);
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 0 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.tldr-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--magenta);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.tldr-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--magenta);
}

.tldr-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "wght" 400;
  letter-spacing: -0.005em;
  line-height: 1.55;
  color: var(--silver-strong);
  max-width: 660px;
}

.tldr-text strong {
  color: var(--white);
  font-weight: 500;
  font-variation-settings: "opsz" 36, "wght" 500;
}

.tldr-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--magenta);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transition: gap 240ms var(--ease), color 240ms var(--ease);
}

.tldr-link svg {
  width: 14px;
  height: 14px;
  transition: transform 240ms var(--ease);
}

.tldr-link:hover,
.tldr-link:focus-visible {
  color: var(--pink);
  gap: 14px;
}

.tldr-link:hover svg {
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .tldr {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 48px 0 56px;
  }
}

/* === TRUST STRIP === */
.trust-strip {
  position: relative;
  z-index: 3;
  width: var(--content);
  margin: 0 auto;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}

.trust-label {
  display: block;
  margin-bottom: 28px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-align: center;
}

.trust-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}

.trust-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  color: var(--silver);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.55;
  transition: opacity 200ms ease, color 200ms ease;
}

.trust-logo:hover { opacity: 1; color: var(--magenta); }

/* === STATS === */
.stats-band {
  width: var(--content);
  margin: 120px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.stats-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--magenta);
  opacity: 0.4;
}

.stat {
  padding: 36px 28px;
  background: var(--night);
  transition: background 240ms ease;
}

.stat:hover { background: var(--surface); }

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.5vw, 4rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "wght" 300;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--white);
}

.stat-value .unit {
  color: var(--magenta);
  font-size: 0.45em;
  font-weight: 300;
  margin-left: 4px;
}

.stat-label {
  display: block;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* === LIVE DEPARTURES BOARD === */
.departures {
  width: var(--content);
  margin: 0 auto;
  padding: var(--s-144) 0 var(--s-89);
}

.departures-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.departures-title-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.departures-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--magenta);
  font-weight: 600;
}

.departures-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 10px var(--magenta);
  animation: pulse 1.5s ease-in-out infinite;
}

.departures-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 380;
  letter-spacing: -0.022em;
  color: var(--white);
}

.departures-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.departures-meta-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}

.departures-clock {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.departures-board {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(36, 19, 73, 0.35), rgba(6, 3, 26, 0.5));
  box-shadow: var(--shadow);
}

.dep-row {
  display: grid;
  grid-template-columns: 80px 1fr 160px;
  gap: 24px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  align-items: center;
  transition: background 240ms var(--ease);
}

.dep-row:last-child { border-bottom: 0; }
.dep-row[data-dep-row]:hover { background: rgba(217, 70, 239, 0.04); }

.dep-row-head {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--silver);
  padding-top: 16px;
  padding-bottom: 16px;
  background: rgba(217, 70, 239, 0.04);
  border-bottom: 1px solid var(--line-strong);
}

.dep-portal-num {
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.dep-dest.is-flipping {
  display: inline-block;
  transform-origin: center top;
  animation: depFlap 420ms var(--ease);
}

.dep-dest {
  color: var(--silver-strong);
  font-family: var(--font-body);
  font-size: 0.98rem;
  letter-spacing: -0.005em;
}

.dep-status {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  transform-origin: center top;
}

.dep-status.is-scheduled { color: var(--silver); }
.dep-status.is-boarding  { color: var(--cyan); }
.dep-status.is-phaselock { color: var(--violet); }
.dep-status.is-transit   { color: var(--magenta); }
.dep-status.is-returned  { color: #8ee6b0; }
.dep-status.is-hold      { color: var(--pink); }

.dep-label { white-space: nowrap; }

.dep-status.is-flipping .dep-label {
  animation: depFlap 420ms var(--ease);
  transform-origin: center top;
  display: inline-block;
}

@keyframes depFlap {
  0%   { transform: rotateX(-88deg); opacity: 0.2; }
  55%  { transform: rotateX(12deg);  opacity: 1; }
  100% { transform: rotateX(0);      opacity: 1; }
}

/* === ANIMATED MINI-PORTAL STATUS GLYPHS === */
.dep-viz {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  color: inherit;
}

.dep-viz::before,
.dep-viz::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}

/* faint base ring shared by most states */
.dep-viz {
  border: 1.5px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* — SCHEDULED — idle dashed ring, slow rotation */
.is-scheduled .dep-viz {
  border: 1.5px dashed color-mix(in srgb, currentColor 50%, transparent);
  animation: vizSpin 9s linear infinite;
}

/* — BOARDING — loading arc sweeping around */
.is-boarding .dep-viz::before {
  inset: -1.5px;
  border: 1.5px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
  animation: vizSpin 1.1s linear infinite;
}
.is-boarding .dep-viz::after {
  inset: 9px;
  background: currentColor;
  opacity: 0.6;
}

/* — PHASE LOCK — two rings counter-rotating + locked core */
.is-phaselock .dep-viz {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.is-phaselock .dep-viz::before {
  inset: 3.5px;
  border: 1.5px dashed currentColor;
  animation: vizSpin 2.4s linear infinite reverse;
}
.is-phaselock .dep-viz::after {
  inset: 10.5px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: vizCorePulse 1.6s ease-in-out infinite;
}

/* — IN TRANSIT — bright pulsing core + fast spinning energy + glow */
.is-transit .dep-viz {
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, currentColor 55%, transparent);
}
.is-transit .dep-viz::before {
  inset: -1.5px;
  border: 1.5px solid transparent;
  border-top-color: currentColor;
  filter: drop-shadow(0 0 5px currentColor);
  animation: vizSpin 0.7s linear infinite;
}
.is-transit .dep-viz::after {
  inset: 6px;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  animation: vizCorePulse 0.9s ease-in-out infinite;
}

/* — RETURNED — solid ring + checkmark, steady */
.is-returned .dep-viz {
  border-color: currentColor;
  box-shadow: inset 0 0 6px color-mix(in srgb, currentColor 30%, transparent);
}
.is-returned .dep-viz::before {
  /* checkmark */
  content: "";
  inset: 0;
  border-radius: 0;
  width: 9px;
  height: 5px;
  margin: auto;
  position: absolute;
  top: -1px; left: 0; right: 0; bottom: 0;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  animation: vizCheck 0.5s var(--ease) both;
}

/* — HOLD — slow blink + pause bars */
.is-hold .dep-viz {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  animation: vizBlink 1.4s ease-in-out infinite;
}
.is-hold .dep-viz::before {
  inset: 0;
  width: 2.5px; height: 9px;
  margin: auto;
  border-radius: 1px;
  position: absolute;
  top: 0; bottom: 0; left: 8px;
  background: currentColor;
}
.is-hold .dep-viz::after {
  inset: 0;
  width: 2.5px; height: 9px;
  margin: auto;
  border-radius: 1px;
  position: absolute;
  top: 0; bottom: 0; right: 8px; left: auto;
  background: currentColor;
}

@keyframes vizSpin { to { transform: rotate(360deg); } }
@keyframes vizCorePulse {
  0%, 100% { transform: scale(0.8); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes vizBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes vizCheck {
  0%   { opacity: 0; transform: rotate(-45deg) scale(0.4); }
  100% { opacity: 1; transform: rotate(-45deg) scale(1); }
}

.departures-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--silver);
}

.departures-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.departures-counter strong {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.departures-disclaimer {
  text-align: right;
  opacity: 0.8;
  max-width: 360px;
}

@media (max-width: 760px) {
  .departures-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .departures-disclaimer { text-align: left; }
}

@media (max-width: 760px) {
  .departures { padding: 80px 0; }
  .departures-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .departures-meta { align-items: flex-start; text-align: left; flex-direction: row; gap: 14px; align-items: baseline; }
  .dep-row { grid-template-columns: 60px 1fr 120px; gap: 12px; padding: 14px 16px; font-size: 0.82rem; }
  .dep-dest { font-size: 0.88rem; }
  .dep-status { font-size: 0.68rem; }
}

/* === SERVICE CARDS === */
.portal-cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: var(--content);
  margin: 0 auto 100px;
}

.service-card {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.5), rgba(14, 7, 41, 0.55));
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--magenta);
  opacity: 0;
  transition: opacity 240ms ease;
}

.service-card:hover {
  border-color: rgba(217, 70, 239, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.service-card:hover::before { opacity: 1; }

.service-card-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--silver);
  letter-spacing: 0.14em;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.icon {
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.18), rgba(139, 92, 246, 0.18));
  border: 1px solid rgba(217, 70, 239, 0.4);
  box-shadow: 0 0 20px rgba(217, 70, 239, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-inner {
  width: 22px;
  height: 22px;
  position: relative;
}

.icon-inner.portal {
  border-radius: 50%;
  border: 1.5px solid var(--magenta);
}
.icon-inner.portal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
}

.icon-inner.diamond {
  transform: rotate(45deg);
  border: 1.5px solid var(--magenta);
}
.icon-inner.diamond::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid var(--cyan);
}

.icon-inner.shield {
  clip-path: polygon(50% 0, 100% 18%, 86% 78%, 50% 100%, 14% 78%, 0 18%);
  background: var(--magenta);
}
.icon-inner.shield::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--space);
  clip-path: polygon(50% 0, 100% 18%, 86% 78%, 50% 100%, 14% 78%, 0 18%);
}

.icon-inner.globe {
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
}
.icon-inner.globe::before,
.icon-inner.globe::after {
  content: "";
  position: absolute;
}
.icon-inner.globe::before { inset: 0 7px; border-left: 1.5px solid var(--cyan); border-right: 1.5px solid var(--cyan); border-radius: 50%; }
.icon-inner.globe::after { inset: 7px 0; border-top: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); }

.service-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--white);
}

.service-card p {
  margin: 0 0 24px;
  color: var(--silver);
  font-size: 0.92rem;
  line-height: 1.6;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: gap 200ms ease, color 200ms ease;
}

.service-card-link::after { content: "→"; }
.service-card:hover .service-card-link { gap: 14px; color: var(--pink); }

/* === QUOTE BANDS === */
.quote-band {
  position: relative;
  width: var(--content);
  max-width: 920px;
  margin: 60px auto;
  padding: 64px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.quote-band::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--magenta);
}

.quote-band-intro {
  display: block;
  margin-bottom: 22px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--magenta);
  font-weight: 600;
}

.quote-band-main {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 60, "wght" 320;
  line-height: 1.38;
  letter-spacing: -0.018em;
  color: var(--white);
}

@media (max-width: 760px) {
  .quote-band { padding: 48px 20px; margin: 40px auto; }
}

/* === SECTION === */
.section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
  width: var(--content);
  margin: 0 auto;
  padding: var(--s-144) 0;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  color: var(--magenta);
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.section-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--magenta);
  /* removed the glow — pure line, more institutional */
}

.section-copy h2,
.cta-band h2,
.destinations-header h2 {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 380;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--white);
}

.section-copy h2 .accent,
.cta-band h2 .accent,
.destinations-header h2 .accent {
  /* Italic Fraunces, solid magenta — one accent, not a rainbow */
  color: var(--magenta);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 60, "wght" 320;
  -webkit-text-fill-color: currentColor;
}

.section-copy p {
  max-width: 520px;
  margin: 24px 0 28px;
  color: var(--silver);
  font-size: 1rem;
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: gap 200ms ease, color 200ms ease;
}

.text-link::after { content: "→"; }
.text-link:hover { gap: 14px; color: var(--pink); }

/* === SAFETY === */
.safety-section { align-items: start; }

.safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.safety-card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.45), rgba(14, 7, 41, 0.5));
  transition: border-color 240ms ease;
}

.safety-card:hover { border-color: rgba(217, 70, 239, 0.32); }

.safety-card-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
  font-weight: 600;
}

.safety-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--white);
}

.safety-card-num {
  color: var(--magenta);
  -webkit-text-fill-color: currentColor;
  background: none;
}

.safety-card p {
  margin: 0;
  color: var(--silver);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* === PROCESS STACK (used by the Company section) === */
.process-stack {
  display: grid;
  gap: 14px;
}

.process-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.35), rgba(14, 7, 41, 0.45));
  transition: border-color 240ms var(--ease), transform 240ms var(--ease);
}

.process-step:hover {
  border-color: rgba(217, 70, 239, 0.3);
}

.process-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--magenta);
  font-weight: 500;
  padding-top: 2px;
  white-space: nowrap;
}

.process-step-content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.process-step-content h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
}

.process-step-content p {
  margin: 0;
  color: var(--silver-strong);
  font-size: 0.92rem;
  line-height: 1.6;
}

.process-spec {
  display: grid;
  gap: 4px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--silver);
  min-width: 96px;
  padding-top: 4px;
  white-space: nowrap;
}

.process-spec strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
  font-style: normal;
  text-transform: none;
}

@media (max-width: 760px) {
  .process-step { grid-template-columns: auto minmax(0, 1fr); padding: 20px 22px; gap: 18px; }
  .process-spec { display: none; }
}

/* ============================================================
   VERIFIED DESTINATION ATLAS
   ============================================================ */

.atlas-section {
  width: var(--content);
  margin: 0 auto;
  padding: var(--s-144) 0 var(--s-89);
  border-top: 1px solid var(--line);
}

.atlas-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.atlas-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 380;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--white);
}

.atlas-header h2 .accent {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 300;
}

.atlas-subtitle {
  margin: 18px auto 0;
  max-width: 620px;
  color: var(--silver-strong);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* === GRID === */
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* === CARD BASE === */
.atlas-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20, 12, 45, 0.55), rgba(9, 5, 26, 0.7));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 240ms var(--ease),
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease);
}

.atlas-card:hover {
  border-color: rgba(217, 70, 239, 0.32);
  transform: translateY(-3px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(217, 70, 239, 0.08);
}

.atlas-card:hover .atlas-ambient { opacity: 1; transform: scale(1.04); }

/* ambient layer — gets a unique background per .dest-* */
.atlas-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.65;
  pointer-events: none;
  transition: opacity 420ms var(--ease), transform 600ms var(--ease);
}

.atlas-ambient::after {
  /* subtle film-grain noise to break up the gradients */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.85 0 0 0 0 0.95 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.atlas-card > *:not(.atlas-ambient) { position: relative; z-index: 1; }

/* ============================================================
   Optional photographic layer — opt-in via .has-photo on .atlas-card
   ============================================================ */
.atlas-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  z-index: 0;
  transition: transform 600ms var(--ease), filter 420ms var(--ease);
  filter: saturate(1.05) contrast(1.02);
}

.atlas-photo-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* darken the bottom half so meta block stays readable */
    linear-gradient(180deg,
      rgba(8, 4, 18, 0) 0%,
      rgba(8, 4, 18, 0) 32%,
      rgba(8, 4, 18, 0.55) 68%,
      rgba(10, 5, 22, 0.92) 100%),
    /* soft warm vignette to keep visual consistency with palette */
    radial-gradient(circle at 78% 22%, rgba(255, 200, 130, 0.10), transparent 60%);
  transition: background 420ms var(--ease);
}

/* ============================================================
   PREMIUM PHOTO CARD LAYOUT
   Image-on-top + content panel below — replaces the cramped
   "text-over-photo + 2x2 spec grid" approach with a clear
   editorial split that reads at a glance.
   ============================================================ */

/* Card outer: no outer padding, content blocks manage their own */
.atlas-card.has-photo {
  padding: 0;
  gap: 0;
}

/* Image zone — fixed height at the top of the card */
.atlas-card.has-photo .atlas-ambient {
  position: relative;       /* was absolute; image is now a top-of-card block */
  inset: auto;
  width: auto;
  height: 220px;
  flex: 0 0 auto;
  opacity: 1;
  background: transparent;  /* the <img> IS the background now */
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

/* Scrim: text no longer sits on the image, so we only need a soft
   bottom blend to smooth the cut into the content panel + the
   warm signature vignette at top-right */
.atlas-card.has-photo .atlas-photo-scrim {
  background:
    linear-gradient(180deg,
      rgba(8, 4, 18, 0) 0%,
      rgba(8, 4, 18, 0) 72%,
      rgba(8, 4, 18, 0.55) 100%),
    radial-gradient(circle at 78% 22%, rgba(255, 200, 130, 0.10), transparent 60%);
}

/* Nocturne keeps its violet undertone instead of the warm vignette */
.atlas-card.has-photo.dest-nocturne .atlas-photo-scrim {
  background:
    linear-gradient(180deg,
      rgba(8, 4, 18, 0) 0%,
      rgba(8, 4, 18, 0) 70%,
      rgba(10, 5, 22, 0.62) 100%),
    radial-gradient(circle at 50% 30%, rgba(180, 90, 220, 0.12), transparent 65%);
}

/* Code + status badge: float over the image as a premium chrome pair */
.atlas-card.has-photo .atlas-card-head {
  position: absolute;
  top: 16px;
  left: 22px;
  right: 22px;
  z-index: 5;
}

/* The code mark becomes a glass pill so it stays readable on any image */
.atlas-card.has-photo .atlas-code {
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(8, 4, 18, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--white);
  font-weight: 500;
}

/* Status badge: pill gets a real dark backdrop so the tint reads */
.atlas-card.has-photo .atlas-status {
  padding: 5px 11px;
  background:
    color-mix(in srgb, var(--status-color, var(--silver)) 14%, rgba(8, 4, 18, 0.55));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  font-size: 0.59rem;
  font-weight: 600;
}

/* Content area — clean panel beneath the image */
.atlas-card.has-photo .atlas-card-body {
  padding: 26px 26px 0;
  flex: 1;
  min-height: 90px;
}

/* Refined editorial title — bigger, more breathing room */
.atlas-card.has-photo .atlas-card-body h3 {
  font-size: 1.55rem;
  font-variation-settings: "opsz" 48, "wght" 440;
  letter-spacing: -0.022em;
  line-height: 1.14;
  margin: 0 0 8px;
}

.atlas-card.has-photo .atlas-card-body p {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--silver-strong);
  margin: 0;
}

/* META block — restored to 2-col stacked, but much more generous */
.atlas-card.has-photo .atlas-meta {
  padding: 20px 26px 24px;
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
}

.atlas-card.has-photo .atlas-meta > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.atlas-card.has-photo .atlas-meta dt {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(186, 188, 199, 0.55);
  font-weight: 500;
  white-space: nowrap;
}

.atlas-card.has-photo .atlas-meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Long values get a slightly smaller size so they fit without ellipsis */
.atlas-card.has-photo .atlas-meta dd:not(.is-redacted) {
  font-size: 0.92rem;
}

.atlas-card.has-photo:hover .atlas-photo {
  filter: saturate(1.12) contrast(1.05) brightness(1.05);
}

/* Responsive overrides for the photo cards specifically */
@media (max-width: 1100px) {
  .atlas-card.has-photo .atlas-ambient { height: 240px; }
}

@media (max-width: 640px) {
  .atlas-card.has-photo .atlas-ambient { height: 210px; }
  .atlas-card.has-photo .atlas-card-head { top: 14px; left: 18px; right: 18px; }
  .atlas-card.has-photo .atlas-card-body { padding: 22px 22px 0; }
  .atlas-card.has-photo .atlas-meta {
    padding: 18px 22px 22px;
    grid-template-columns: 1fr 1fr;  /* keep 2-col on small mobile too */
    gap: 16px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-photo { transition: none; }
  .atlas-card.has-photo:hover .atlas-photo { filter: saturate(1.05) contrast(1.02); }
}

/* Per-destination crop: pick the most iconic slice for portrait card */
.dest-helios   .atlas-photo { object-position: 62% 38%; }
.dest-meridian .atlas-photo { object-position: 35% 50%; }
.dest-pier-c   .atlas-photo { object-position: 65% 55%; }
.dest-verdant  .atlas-photo { object-position: 42% 50%; }
.dest-copper   .atlas-photo { object-position: 42% 55%; }
.dest-lagrange .atlas-photo { object-position: 50% 50%; }
.dest-nocturne .atlas-photo { object-position: 50% 50%; }

/* Nocturne scrim: replace the warm vignette with a violet undertone
   so the sealed/black-level mood isn't broken by a warm spot */
.dest-nocturne .atlas-photo-scrim {
  background:
    linear-gradient(180deg,
      rgba(8, 4, 18, 0) 0%,
      rgba(8, 4, 18, 0.05) 28%,
      rgba(8, 4, 18, 0.62) 68%,
      rgba(10, 5, 22, 0.96) 100%),
    radial-gradient(circle at 50% 28%, rgba(180, 90, 220, 0.12), transparent 65%);
}

/* Nocturne photo is intentionally darker — push contrast down a touch
   so the silhouette stays ominous rather than punchy */
.dest-nocturne .atlas-photo { filter: saturate(0.95) contrast(0.95) brightness(0.92); }
.dest-nocturne.has-photo:hover .atlas-photo { filter: saturate(1.0) contrast(1.0) brightness(0.98); }

/* === HEAD: code + status badge === */
.atlas-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
}

.atlas-code {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--silver);
  text-transform: uppercase;
  font-weight: 500;
}

.atlas-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--status-color, var(--silver));
  white-space: nowrap;
}

.atlas-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* status color codes */
.atlas-card[data-atlas-status="active"]     { --status-color: var(--cyan); }
.atlas-card[data-atlas-status="supervised"] { --status-color: var(--violet); }
.atlas-card[data-atlas-status="restricted"] { --status-color: var(--pink); }
.atlas-card[data-atlas-status="archived"]   { --status-color: var(--silver); }
.atlas-card[data-atlas-status="blacklevel"] { --status-color: var(--magenta); }

/* === BODY === */
.atlas-card-body { display: grid; gap: 10px; flex: 1; }

.atlas-card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  font-variation-settings: "opsz" 36, "wght" 420;
  letter-spacing: -0.018em;
  color: var(--white);
}

.atlas-card-body p {
  margin: 0;
  color: var(--silver-strong);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* === META: 4 metrics === */
.atlas-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.atlas-meta > div { display: grid; gap: 4px; min-width: 0; }

.atlas-meta dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 500;
}

.atlas-meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* redacted values (Nocturne Gate) */
.atlas-meta dd.is-redacted {
  display: inline-block;
  padding: 2px 9px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(15, 0, 25, 0.95));
  border: 1px solid rgba(217, 70, 239, 0.35);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(217, 70, 239, 0.7);
  position: relative;
}

/* ============================================================
   PER-DESTINATION AMBIENTS — each card has its own atmosphere
   ============================================================ */

/* HLS-01 — warm solar anchorage, gold sun top-right */
.dest-helios .atlas-ambient {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 195, 110, 0.55), transparent 38%),
    radial-gradient(circle at 82% 18%, rgba(255, 130, 50, 0.32), transparent 65%),
    linear-gradient(160deg, rgba(80, 50, 20, 0.25), transparent 60%);
}

/* QMD-02 — quiet meridian, cool blue calm, horizontal horizon */
.dest-meridian .atlas-ambient {
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(120, 175, 215, 0.16) 56%, rgba(70, 110, 160, 0.18) 100%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(140, 195, 230, 0.22), transparent 70%);
}

/* PCA-03 — Pier C, industrial sodium fog */
.dest-pier-c .atlas-ambient {
  background:
    radial-gradient(ellipse 70% 60% at 30% 85%, rgba(255, 170, 80, 0.18), transparent 60%),
    radial-gradient(circle at 75% 25%, rgba(200, 200, 230, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(30, 26, 40, 0.5), rgba(15, 10, 30, 0.5));
}

/* VDA-04 — Verdant Archive, bioluminescent dots */
.dest-verdant .atlas-ambient {
  background:
    radial-gradient(circle at 22% 35%, rgba(120, 235, 165, 0.32), transparent 14%),
    radial-gradient(circle at 78% 60%, rgba(80, 220, 195, 0.28), transparent 16%),
    radial-gradient(circle at 60% 22%, rgba(155, 245, 180, 0.2), transparent 12%),
    radial-gradient(circle at 30% 78%, rgba(95, 230, 170, 0.22), transparent 18%),
    linear-gradient(160deg, rgba(15, 40, 30, 0.35), transparent 70%);
}

/* CPD-05 — Copper Dunes, oxidised desert horizon */
.dest-copper .atlas-ambient {
  background:
    radial-gradient(ellipse 90% 50% at 50% 95%, rgba(195, 95, 40, 0.45), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 70%, rgba(230, 140, 70, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(45, 25, 15, 0.35), transparent 60%);
}

/* LGC-06 — Lagrange Cathedral, violet silver megastructure */
.dest-lagrange .atlas-ambient {
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(170, 145, 230, 0.28), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(220, 215, 245, 0.1), transparent 30%),
    conic-gradient(from 200deg at 50% 60%, rgba(120, 90, 180, 0.18), transparent 60%, rgba(180, 150, 220, 0.18));
  filter: blur(0.5px);
}

/* NGT-07 — Nocturne Gate, sealed black-violet redaction */
.dest-nocturne .atlas-ambient {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.55) 0 12px,
      transparent 12px 32px
    ),
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(80, 25, 130, 0.45), transparent 70%),
    linear-gradient(180deg, rgba(8, 0, 20, 0.7), rgba(20, 5, 35, 0.65));
}

.dest-nocturne {
  border-color: rgba(217, 70, 239, 0.32);
}

.dest-nocturne .atlas-card-body p {
  color: var(--silver);
  font-style: italic;
}

/* ARCHIVED slight desaturation */
.atlas-card[data-atlas-status="archived"] {
  opacity: 0.94;
}

.atlas-card[data-atlas-status="archived"]:hover { opacity: 1; }

/* ============================================================
   ATLAS POLICY — "Not every route is public"
   ============================================================ */

.atlas-policy {
  width: var(--content);
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 0 110px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}

.atlas-policy-head h3 {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 380;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--white);
}

.atlas-policy-head p {
  margin: 0;
  color: var(--silver-strong);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 460px;
}

/* Document excerpt panel — looks like an internal charter excerpt */
.atlas-policy-excerpt {
  position: relative;
  padding: 26px 30px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20, 12, 45, 0.42), rgba(9, 5, 26, 0.58));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* hairline frame inside the panel (faint inner border) */
.atlas-policy-excerpt::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(217, 70, 239, 0.07);
  border-radius: 10px;
  pointer-events: none;
}

/* opening + closing document tags */
.atlas-policy-excerpt-tag,
.atlas-policy-excerpt-end {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(217, 70, 239, 0.55);
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(217, 70, 239, 0.18);
}

.atlas-policy-excerpt-end {
  padding-bottom: 0;
  padding-top: 10px;
  border-bottom: none;
  border-top: 1px dashed rgba(217, 70, 239, 0.18);
  text-align: right;
  color: rgba(217, 70, 239, 0.4);
}

/* numbered policy list */
.atlas-policy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.atlas-policy-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: baseline;
}

.atlas-policy-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--magenta);
  padding-top: 3px;
}

.atlas-policy-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  font-variation-settings: "opsz" 36, "wght" 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}

.atlas-policy-list p {
  margin: 0;
  color: var(--silver-strong);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-policy { grid-template-columns: 1fr; gap: 32px; padding-bottom: 90px; }
  .atlas-policy-head p { max-width: none; }
}

@media (max-width: 640px) {
  .atlas-section { padding: 100px 0 70px; }
  .atlas-grid { grid-template-columns: 1fr; }
  .atlas-meta { grid-template-columns: 1fr; gap: 10px; }
  .atlas-card { padding: 22px 20px 20px; }
  .atlas-policy { padding: 50px 0 90px; }
  .atlas-policy-excerpt { padding: 22px 18px 18px; }
  .atlas-policy-list { gap: 18px; }
  .atlas-policy-list li { grid-template-columns: 36px 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-card:hover { transform: none; }
  .atlas-card:hover .atlas-ambient { transform: none; }
}

/* === PRICING === */
.pricing-section {
  width: var(--content);
  margin: 0 auto;
  padding: var(--s-144) 0;
  border-top: 1px solid var(--line);
}

.pricing-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.pricing-header h2 {
  max-width: 580px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.pricing-header h2 .accent {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 300;
}

.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--silver);
}

.pricing-toggle strong {
  color: var(--white);
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.45), rgba(14, 7, 41, 0.5));
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
  overflow: hidden;
}

.pricing-card:hover {
  border-color: rgba(217, 70, 239, 0.32);
  transform: translateY(-2px);
}

.pricing-card-featured {
  border-color: transparent;
  background:
    linear-gradient(var(--night), var(--night)) padding-box,
    var(--grad-aurora) border-box;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(217, 70, 239, 0.18);
}

.pricing-card-featured::before {
  content: "Most requested";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grad-aurora);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.pricing-tier {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 500;
}

.pricing-name {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 400;
  letter-spacing: -0.02em;
  color: var(--white);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

/* Bitcoin-equivalent line under the main fiat price */
.pricing-price-btc {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(247, 165, 90, 0.78);
}

.pricing-btc-mark {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(247, 165, 90, 0.92);
  text-shadow: 0 0 14px rgba(247, 147, 26, 0.28);
  line-height: 1;
}

.pricing-btc-value {
  color: var(--white);
  letter-spacing: 0.02em;
}

.pricing-price-btc [data-i18n="price.period"] {
  color: rgba(247, 165, 90, 0.6);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.pricing-price-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pricing-price-currency {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--silver);
}

.pricing-price-period {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-desc {
  margin: 0 0 24px;
  color: var(--silver);
  font-size: 0.92rem;
  line-height: 1.6;
}

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

.pricing-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1;
}

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--silver-strong);
}

.pricing-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--magenta) 0 3px, transparent 4px),
    rgba(217, 70, 239, 0.15);
  border: 1px solid rgba(217, 70, 239, 0.4);
}

.pricing-list li.is-locked {
  color: rgba(196, 181, 253, 0.4);
  text-decoration: line-through;
}

.pricing-list li.is-locked::before {
  background: transparent;
  border-color: rgba(196, 181, 253, 0.2);
}

.pricing-card .button {
  margin-top: auto;
  width: 100%;
}

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-header { flex-direction: column; align-items: flex-start; }
}

/* === TESTIMONIALS (3-card grid) === */
.testimonials-section {
  width: var(--content);
  margin: 0 auto;
  padding: 120px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.testimonials-header {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.testimonials-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 380;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--white);
}

.testimonials-header h2 .accent {
  color: var(--magenta);
  font-style: italic;
  font-weight: 300;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.3), rgba(14, 7, 41, 0.4));
  transition: border-color 240ms var(--ease);
}

.testimonial-card:hover {
  border-color: rgba(217, 70, 239, 0.28);
}

.testimonial-mark {
  display: inline-flex;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--magenta);
  font-style: italic;
  line-height: 0.4;
  opacity: 0.5;
}

.testimonial-card blockquote {
  flex: 1;
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 36, "wght" 380;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--white);
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.82rem;
}

.testimonial-author strong {
  color: var(--white);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.testimonial-author span {
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

@media (max-width: 1100px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* === WALLPAPERS === */
.wallpapers-section {
  width: var(--content);
  margin: 0 auto;
  padding: var(--s-144) 0;
  border-top: 1px solid var(--line);
}

.wallpapers-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.wallpapers-header h2 {
  max-width: 580px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.wallpapers-header h2 .accent {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 300;
}

.wallpapers-header p {
  max-width: 420px;
  margin: 12px 0 0;
  color: var(--silver);
  font-size: 0.95rem;
  line-height: 1.65;
}

.wallpapers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.wallpaper-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
  width: 100%;
}

.wallpaper-card:hover {
  border-color: rgba(217, 70, 239, 0.38);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}

.wallpaper-card:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 4px;
}

.wallpaper-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--night);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wallpaper-card:hover .wallpaper-thumb {
  transform: scale(1.04);
}

.wallpaper-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(6, 3, 26, 0.6) 100%);
  pointer-events: none;
}

.wallpaper-thumb-nexus { background-image: url("wallpaper-nexus.svg"); }
.wallpaper-thumb-meridian { background-image: url("wallpaper-meridian.svg"); }
.wallpaper-thumb-pier-c { background-image: url("wallpaper-pier-c.svg"); }

.wallpaper-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(14, 7, 41, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 70, 239, 0.4);
  color: var(--white);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms ease, transform 240ms ease, background 240ms ease;
  pointer-events: none;
}

.wallpaper-card:hover .wallpaper-expand,
.wallpaper-card:focus-visible .wallpaper-expand {
  opacity: 1;
  transform: translateY(0);
}

.wallpaper-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.5), rgba(14, 7, 41, 0.6));
  border-top: 1px solid var(--line);
}

.wallpaper-meta-text {
  display: grid;
  gap: 4px;
}

.wallpaper-code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.wallpaper-meta h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wallpaper-dims {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--silver);
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .wallpapers-grid { grid-template-columns: repeat(2, 1fr); }
  .wallpapers-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .wallpapers-grid { grid-template-columns: 1fr; }
}

/* === WALLPAPER VIEWER (fullscreen lightbox) === */
.wp-viewer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 280ms ease, visibility 280ms ease;
  background: rgba(3, 1, 12, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.wp-viewer.is-open {
  visibility: visible;
  opacity: 1;
}

.wp-viewer-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 3, 26, 0.6);
  backdrop-filter: blur(14px);
}

.wp-viewer-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.wp-viewer-info-meta { display: grid; gap: 2px; }

.wp-viewer-info-code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.wp-viewer-info-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
}

.wp-viewer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wp-viewer-actions .button {
  min-width: auto;
  min-height: 40px;
  padding: 8px 18px;
  font-size: 0.72rem;
}

.wp-viewer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--silver);
  font-size: 1.4rem;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms ease;
}

.wp-viewer-close:hover,
.wp-viewer-close:focus-visible {
  border-color: var(--magenta);
  color: var(--magenta);
  background: rgba(217, 70, 239, 0.08);
  transform: rotate(90deg);
}

.wp-viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  position: relative;
}

.wp-viewer-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(217, 70, 239, 0.12), transparent 70%);
  pointer-events: none;
}

.wp-viewer-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(217, 70, 239, 0.18);
  transform: scale(0.98);
  opacity: 0;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms ease;
}

.wp-viewer.is-open .wp-viewer-image {
  transform: scale(1);
  opacity: 1;
}

.wp-viewer-thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  border-top: 1px solid var(--line);
  background: rgba(6, 3, 26, 0.6);
}

.wp-viewer-thumb {
  position: relative;
  width: 80px;
  height: 50px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}

.wp-viewer-thumb:hover {
  border-color: rgba(217, 70, 239, 0.5);
  transform: translateY(-2px);
}

.wp-viewer-thumb.is-active {
  border-color: transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  box-shadow: 0 0 0 2px var(--magenta), 0 0 16px rgba(217, 70, 239, 0.4);
}

.wp-viewer-counter {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--silver);
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .wp-viewer-bar { padding: 14px 18px; gap: 12px; }
  .wp-viewer-info { gap: 14px; }
  .wp-viewer-info-name { font-size: 0.95rem; }
  .wp-viewer-actions .button { padding: 6px 12px; font-size: 0.65rem; min-height: 34px; }
  .wp-viewer-actions .button span:last-child { display: none; }
  .wp-viewer-close { width: 34px; height: 34px; }
  .wp-viewer-stage { padding: 16px; }
  .wp-viewer-thumbs { padding: 12px 16px; }
  .wp-viewer-thumb { width: 60px; height: 38px; }
}

/* === FAQ === */
.faq-section {
  width: var(--content);
  margin: 0 auto;
  padding: var(--s-144) 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}

.faq-section .section-copy h2 {
  max-width: 460px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.faq-section .section-copy h2 .accent {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 300;
}

.faq-section .section-copy p {
  margin: 24px 0 24px;
  max-width: 420px;
  color: var(--silver);
  font-size: 1rem;
  line-height: 1.7;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.35), rgba(14, 7, 41, 0.4));
  overflow: hidden;
  transition: border-color 240ms ease, background 240ms ease;
}

.faq-item:hover {
  border-color: rgba(217, 70, 239, 0.25);
}

.faq-item[open] {
  border-color: rgba(217, 70, 239, 0.4);
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.55), rgba(14, 7, 41, 0.5));
}

.faq-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  font-variation-settings: "opsz" 36, "wght" 400;
  letter-spacing: -0.015em;
  color: var(--white);
  list-style: none;
  user-select: none;
}

.faq-summary::-webkit-details-marker { display: none; }

.faq-summary-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--magenta);
  font-weight: 500;
  flex-shrink: 0;
  width: 36px;
}

.faq-summary-text { flex: 1; }

.faq-summary-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.faq-summary-icon::before,
.faq-summary-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--magenta);
  box-shadow: 0 0 6px rgba(217, 70, 239, 0.6);
  transform: translate(-50%, -50%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-summary-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-summary-icon::after {
  transform: translate(-50%, -50%) rotate(0);
}

.faq-content {
  padding: 0 24px 22px 84px;
  color: var(--silver-strong);
  font-size: 0.94rem;
  line-height: 1.7;
}

.faq-content p { margin: 0 0 10px; }
.faq-content p:last-child { margin: 0; }

@media (max-width: 1100px) {
  .faq-section { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
  .faq-summary { padding: 18px 18px; gap: 14px; font-size: 0.95rem; }
  .faq-summary-num { width: 26px; font-size: 0.65rem; }
  .faq-content { padding: 0 18px 20px 60px; }
}

/* === CTA === */
.cta-band {
  position: relative;
  width: var(--content);
  margin: 80px auto;
  padding: 100px 60px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(217, 70, 239, 0.2), transparent 70%),
    radial-gradient(ellipse 50% 35% at 20% 50%, rgba(139, 92, 246, 0.15), transparent 70%),
    linear-gradient(180deg, var(--night), var(--space));
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-aurora);
}

.cta-band-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: center;
}

.cta-band p {
  max-width: 460px;
  margin: 20px 0 0;
  color: var(--silver);
  font-size: 1rem;
  line-height: 1.65;
}

.cta-band .button { justify-self: end; }

/* === FOOTER === */
.site-footer {
  width: var(--content);
  margin: 0 auto;
  padding: 80px 0 32px;
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand p {
  margin: 16px 0 0;
  color: var(--silver);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 280px;
}

.footer-col h3,
.footer-col h4 {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--silver);
  font-weight: 500;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer-col a {
  color: var(--white);
  font-size: 0.9rem;
  transition: color 180ms ease;
}

.footer-col a:hover { color: var(--magenta); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-credit {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(196, 181, 253, 0.10);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(186, 188, 199, 0.5);
}
.footer-credit a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
  padding: 4px 0;
  border-bottom: 1px dashed transparent;
}
.footer-credit a strong {
  color: var(--silver);
  font-weight: 600;
  margin-left: 4px;
  transition: color 200ms ease;
}
.footer-credit a:hover {
  color: var(--silver-strong);
}
.footer-credit a:hover strong {
  color: var(--magenta);
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
  animation: pulse 2s ease-in-out infinite;
}

/* === PERFORMANCE — pause hero animations when off-screen === */
.hero.is-paused .portal-ring-outer,
.hero.is-paused .portal-ring-mid::before,
.hero.is-paused .portal-electric::before,
.hero.is-paused .portal-electric::after,
.hero.is-paused .portal-bolt,
.hero.is-paused .portal-beam,
.hero.is-paused .portal-burst,
.hero.is-paused .portal-glow,
.hero.is-paused .portal-orbit,
.hero.is-paused .portal-core-pulse::before,
.hero.is-paused .portal-core-pulse::after,
.hero.is-paused .scene-stars,
.hero.is-paused .scene-windows,
.hero.is-paused .scene-shooter {
  animation-play-state: paused !important;
}

/* low-power mode: kill the most expensive layers */
html.low-power .scene-shooter,
html.low-power .portal-bolt,
html.low-power .portal-burst,
html.low-power .ambient-particles,
html.low-power .portal-core-pulse {
  display: none;
}

html.low-power .portal-electric::before,
html.low-power .portal-electric::after,
html.low-power .ambient-mesh {
  animation: none;
}

html.low-power .body::before {
  display: none;
}

/* === MODAL === */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at 50% 50%, rgba(217, 70, 239, 0.18), transparent 70%),
    rgba(6, 3, 26, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.modal-shell {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--night), var(--night)) padding-box,
    var(--grad-aurora) border-box;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(217, 70, 239, 0.18);
  transform: translateY(20px) scale(0.98);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal.is-open .modal-shell { transform: translateY(0) scale(1); }

.modal-shell::-webkit-scrollbar { width: 8px; }
.modal-shell::-webkit-scrollbar-track { background: transparent; }
.modal-shell::-webkit-scrollbar-thumb {
  background: rgba(217, 70, 239, 0.3);
  border-radius: 4px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 32px 20px;
}

.modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.modal-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
  animation: pulse 1.8s ease-in-out infinite;
}

.modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  font-variation-settings: "opsz" 60, "wght" 380;
  letter-spacing: -0.02em;
  color: var(--white);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--silver);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms ease;
}

.modal-close:hover, .modal-close:focus-visible {
  border-color: var(--magenta);
  color: var(--magenta);
  background: rgba(217, 70, 239, 0.08);
  transform: rotate(90deg);
}

.modal-progress {
  position: relative;
  height: 2px;
  margin: 0 32px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.modal-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.33%;
  background: var(--grad-aurora);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.6);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-form {
  display: contents;
}

.modal-step {
  display: none;
  margin: 0;
  padding: 28px 32px 32px;
  border: 0;
}

.modal-step.is-active {
  display: block;
  animation: stepIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-step-title {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--magenta);
}

.modal-step-lead {
  margin: 0 0 28px;
  color: var(--silver);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* options (radio cards) */
.modal-options {
  display: grid;
  gap: 10px;
  margin-bottom: 32px;
}

.modal-option {
  display: block;
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.35), rgba(14, 7, 41, 0.35));
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.modal-option:hover {
  border-color: rgba(217, 70, 239, 0.32);
  background: linear-gradient(180deg, rgba(36, 19, 73, 0.5), rgba(14, 7, 41, 0.45));
}

.modal-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modal-option:has(input:checked) {
  border-color: transparent;
  background:
    linear-gradient(var(--night), var(--night)) padding-box,
    var(--grad-aurora) border-box;
  background-origin: border-box;
  box-shadow: 0 0 30px rgba(217, 70, 239, 0.18);
}

.modal-option:has(input:focus-visible) {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.modal-option-content {
  display: grid;
  gap: 4px;
}

.modal-option-code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--magenta);
  font-weight: 500;
  text-transform: uppercase;
}

.modal-option-content strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
}

.modal-option-content span:last-child {
  color: var(--silver);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* fields */
.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.modal-field { display: grid; gap: 8px; }
.modal-field-full { grid-column: 1 / -1; }

.modal-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--silver);
}

.modal-field-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7rem;
  opacity: 0.7;
}

.modal-field input,
.modal-field select,
.modal-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(14, 7, 41, 0.7);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.modal-field textarea {
  resize: vertical;
  min-height: 84px;
  font-family: var(--font-body);
}

.modal-field input::placeholder,
.modal-field textarea::placeholder {
  color: rgba(196, 181, 253, 0.4);
}

.modal-field input:hover,
.modal-field select:hover,
.modal-field textarea:hover {
  border-color: rgba(217, 70, 239, 0.3);
}

.modal-field input:focus-visible,
.modal-field select:focus-visible,
.modal-field textarea:focus-visible {
  outline: none;
  border-color: var(--magenta);
  background: rgba(36, 19, 73, 0.5);
  box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.18);
}

.modal-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D946EF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.modal-checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(14, 7, 41, 0.5);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--silver);
  transition: border-color 200ms ease, background 200ms ease;
}

.modal-checkbox:hover { border-color: rgba(217, 70, 239, 0.3); }

.modal-checkbox input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--magenta);
  flex-shrink: 0;
}

/* inline error (Formspree failures) */
.modal-error {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(236, 72, 153, 0.42);
  border-radius: 8px;
  background: rgba(236, 72, 153, 0.08);
  color: var(--pink);
  font-size: 0.88rem;
  line-height: 1.5;
  font-family: var(--font-body);
}

.modal-error[hidden] { display: none; }

/* actions */
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 24px;
}

.modal-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.modal-secure > span:first-child {
  color: var(--magenta);
  font-size: 0.95rem;
}

.button-ghost {
  background: transparent;
  color: var(--silver);
  border: 1px solid var(--line);
  min-width: auto;
  padding: 12px 22px;
}

.button-ghost:hover, .button-ghost:focus-visible {
  color: var(--white);
  border-color: rgba(217, 70, 239, 0.4);
  background: rgba(217, 70, 239, 0.06);
}

.button[disabled], .button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* success */
.modal-success {
  padding: 48px 32px;
  text-align: center;
  display: none;
}

.modal-success[data-active] { display: block; animation: stepIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }

.modal-success-mark {
  display: inline-flex;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 16px rgba(217, 70, 239, 0.5));
}

.modal-success h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  background: linear-gradient(180deg, var(--white), var(--silver));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal-success p {
  margin: 0 auto 28px;
  max-width: 420px;
  color: var(--silver);
  font-size: 0.95rem;
  line-height: 1.6;
}

.modal-success p strong {
  color: var(--magenta);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* body lock */
body.is-locked { overflow: hidden; }

@media (max-width: 600px) {
  .modal { padding: 16px; align-items: flex-end; }
  .modal-shell { max-height: 92vh; border-radius: 14px; }
  .modal-header { padding: 22px 22px 14px; gap: 12px; }
  .modal-title { font-size: 1.35rem; }
  .modal-step { padding: 22px; }
  .modal-progress { margin: 0 22px; }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .modal-actions .button { width: 100%; }
  .modal-secure { justify-content: center; }
}

/* === COMMAND PALETTE (⌘K) === */
.cmdk-hint {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(14, 7, 41, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease);
}

.cmdk-hint:hover, .cmdk-hint:focus-visible {
  border-color: rgba(217, 70, 239, 0.5);
  color: var(--white);
  transform: translateY(-1px);
}

.cmdk-hint kbd {
  font: inherit;
  color: var(--magenta);
  font-weight: 600;
}

@media (max-width: 700px) { .cmdk-hint { right: 12px; bottom: 12px; padding: 7px 10px; font-size: 0.66rem; } }

.cmdk {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 24px 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 240ms var(--ease), visibility 240ms var(--ease);
}

.cmdk.is-open { visibility: visible; opacity: 1; }

.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 40% at 50% 30%, rgba(217, 70, 239, 0.14), transparent 70%),
    rgba(6, 3, 26, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.cmdk-panel {
  position: relative;
  width: min(580px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--night), var(--night)) padding-box,
    var(--grad-aurora) border-box;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 40px rgba(217, 70, 239, 0.18);
  transform: translateY(-8px);
  transition: transform 280ms var(--ease);
}

.cmdk.is-open .cmdk-panel { transform: translateY(0); }

.cmdk-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.cmdk-search-icon { width: 16px; height: 16px; color: var(--silver); flex-shrink: 0; }

.cmdk-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.98rem;
  letter-spacing: -0.005em;
}

.cmdk-input::placeholder { color: rgba(196, 181, 253, 0.45); }

.cmdk-kbd, .cmdk-foot kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.cmdk-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}

.cmdk-list::-webkit-scrollbar { width: 8px; }
.cmdk-list::-webkit-scrollbar-thumb { background: rgba(217, 70, 239, 0.3); border-radius: 4px; }

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--silver-strong);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.cmdk-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(217, 70, 239, 0.08);
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
}

.cmdk-item-body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.cmdk-item-label { color: var(--white); font-size: 0.92rem; font-weight: 500; }
.cmdk-item-hint { color: var(--silver); font-size: 0.75rem; }

.cmdk-item-key {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--silver);
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.cmdk-item.is-active,
.cmdk-item:hover {
  background: rgba(217, 70, 239, 0.08);
}

.cmdk-item.is-active .cmdk-item-key { opacity: 1; color: var(--magenta); }

.cmdk-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--silver);
  font-size: 0.88rem;
}

.cmdk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--silver);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cmdk-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-foot kbd { font-size: 0.62rem; padding: 2px 6px; }

@media (max-width: 600px) {
  .cmdk { padding: 6vh 12px 12px; }
  .cmdk-foot { display: none; }
}

/* === REVEAL === */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.992);
  filter: blur(5px);
  transition:
    opacity 760ms var(--ease),
    transform 760ms var(--ease),
    filter 760ms var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.js .hero-content.reveal { opacity: 1; transform: none; filter: none; }

/* === KEYFRAMES === */
@keyframes portalSpin { to { transform: rotate(360deg); } }

@keyframes portalGlow {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes electric {
  0% { transform: translate(0, 0); }
  100% { transform: translate(4px, 4px); }
}

@keyframes boltFlicker {
  0%, 100% { opacity: 0.6; }
  20% { opacity: 0.2; }
  40% { opacity: 0.8; }
  60% { opacity: 0.3; }
  80% { opacity: 0.7; }
}

@keyframes beamPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; filter: brightness(1.3); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes windowsFlicker {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.7; }
}

@keyframes shoot {
  0% { transform: translate(0, 0) rotate(20deg); opacity: 0; }
  4% { opacity: 1; }
  10% { transform: translate(-260px, 100px) rotate(20deg); opacity: 0; }
  100% { transform: translate(-260px, 100px) rotate(20deg); opacity: 0; }
}

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .site-header { grid-template-columns: auto 1fr auto auto; gap: 12px; }
  .site-nav { display: none; }
  .hero { min-height: 92svh; padding-top: 120px; }
  .portal-stage { width: 380px; top: 40%; }
  .hero-readout-1, .hero-readout-2 { display: none; }
  .portal-cards { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .section, .cta-band-content { grid-template-columns: 1fr; gap: 40px; }
  .destinations-grid { grid-template-columns: repeat(2, 1fr); }
  .destinations-header { flex-direction: column; align-items: flex-start; }
  .cta-band .button { justify-self: start; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-logos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  :root { --content: min(100vw - 28px, 1240px); }
  .site-header { top: 10px; padding: 0 10px; min-height: 54px; gap: 8px; }
  .brand-name, .brand-word, .brand-tld { font-size: 1rem; }
  .header-cta { min-width: 90px; height: 32px; font-size: 0.6rem; padding: 0 12px; }
  .lang-toggle { padding: 3px; }
  .lang-toggle button { min-width: 28px; height: 24px; padding: 0 6px; font-size: 0.6rem; }
  .hero { padding-top: 110px; padding-bottom: 30px; }
  .hero-brand-title { font-size: 3.6rem; }
  .hero-slogan { font-size: 1.2rem; }
  .hero-lead { font-size: 0.95rem; }
  .portal-stage { width: 280px; top: 30%; }
  .scene-moon { width: 60px; height: 60px; top: 12%; right: 5%; }
  .portal-cards, .safety-grid, .destinations-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr; }
  .stat { padding: 28px 24px; }
  .section, .destinations-section, .testimonial-section { padding: 80px 0; }
  .cta-band { padding: 60px 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .trust-logos { grid-template-columns: repeat(2, 1fr); }
  .destinations-header { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  body::before { display: none; }
  .scene-shooter, .portal-bolt, .portal-burst, .ambient-particles, .portal-orbit, .portal-core-pulse { display: none; }
  .portal-electric::before, .portal-electric::after { background-image: none; }
  .scene-stars, .scene-windows, .ambient-mesh { animation: none; }
  .modal-shell { transform: none !important; }
}

/* ============================================================
   STICKY CTA — fixed pill bottom-centre, appears past the hero
   and tucks itself away when the access section is visible
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(8, 4, 18, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(217, 70, 239, 0.22);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(217, 70, 239, 0.12);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 320ms var(--ease),
    opacity 320ms var(--ease),
    box-shadow 320ms var(--ease);
  max-width: calc(100vw - 28px);
  white-space: nowrap;
}

.sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-cta:hover {
  box-shadow:
    0 14px 48px rgba(0, 0, 0, 0.55),
    0 0 44px rgba(217, 70, 239, 0.22);
}

.sticky-cta-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 500;
}

.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background 180ms ease, transform 180ms ease;
}

.sticky-cta-btn:hover {
  background: var(--magenta-strong);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .sticky-cta {
    bottom: 12px;
    padding: 6px 6px 6px 18px;
    gap: 12px;
  }
  .sticky-cta-label {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }
  .sticky-cta-btn {
    padding: 9px 14px;
    font-size: 0.62rem;
  }
}

@media (max-width: 380px) {
  .sticky-cta-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: opacity 200ms ease; }
}

/* ============================================================
   EASTER EGG #1 — Hidden ORÆ portal triggered by clicking on
   the small atlas-code chip (HLS-01, QMD-02 …) inside any
   destination card. Click the image to cross to or-ae.com.
   ============================================================ */
.atlas-code {
  cursor: help;
  transition: color 200ms ease, text-shadow 200ms ease;
}
.atlas-code:hover {
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(217, 70, 239, 0.5);
}

.orae-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 1, 8, 0.93);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 380ms var(--ease);
  padding: 24px;
}
.orae-overlay.is-open { display: flex; opacity: 1; }
.orae-overlay a {
  display: block;
  position: relative;
  transform: scale(0.94);
  transition: transform 460ms var(--ease);
  border-radius: 14px;
}
.orae-overlay.is-open a { transform: scale(1); }
.orae-overlay a:hover { transform: scale(1.02); }
.orae-overlay img {
  display: block;
  max-width: min(94vw, 1500px);
  max-height: 86vh;
  border-radius: 14px;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.8),
    0 0 100px rgba(139, 92, 246, 0.32);
  cursor: pointer;
}
.orae-overlay-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(217, 70, 239, 0.78);
  pointer-events: none;
  text-shadow: 0 0 12px rgba(217, 70, 239, 0.4);
}
.orae-overlay-close {
  position: absolute;
  top: 22px; right: 24px;
  appearance: none;
  background: rgba(8, 4, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--white);
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background 200ms ease, border-color 200ms ease;
}
.orae-overlay-close:hover {
  background: rgba(217, 70, 239, 0.30);
  border-color: rgba(217, 70, 239, 0.50);
}

/* ============================================================
   EASTER EGG #2 — Konami code (↑↑↓↓←→←→BA) triggers a brief
   "portal unstable" glitch on the hero + toast notification
   ============================================================ */
.hero.is-glitching {
  animation: konamiShake 240ms ease 12 alternate;
}
@keyframes konamiShake {
  0%   { transform: translate(0, 0);    filter: hue-rotate(0deg)   saturate(1); }
  20%  { transform: translate(-3px, 2px); filter: hue-rotate(60deg)  saturate(1.4); }
  40%  { transform: translate(3px, -2px); filter: hue-rotate(-40deg) saturate(1.3); }
  60%  { transform: translate(-2px, 3px); filter: hue-rotate(80deg)  saturate(1.5); }
  80%  { transform: translate(2px, -3px); filter: hue-rotate(-60deg) saturate(1.4); }
  100% { transform: translate(0, 0);    filter: hue-rotate(0deg)   saturate(1); }
}
.konami-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  background: rgba(217, 70, 239, 0.92);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow:
    0 12px 40px rgba(217, 70, 239, 0.4),
    0 0 28px rgba(217, 70, 239, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  z-index: 9998;
}
.konami-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   BTC live indicator — small pulsing orange dot + tooltip
   ============================================================ */
.pricing-price-btc {
  position: relative;
}
.pricing-btc-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(247, 147, 26, 0.95);
  box-shadow: 0 0 8px rgba(247, 147, 26, 0.65);
  animation: pulse 1.6s ease-in-out infinite;
  margin-right: 7px;
  vertical-align: middle;
}
.pricing-price-btc[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: rgba(8, 4, 18, 0.96);
  color: var(--silver-strong);
  padding: 7px 11px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid rgba(247, 147, 26, 0.34);
  pointer-events: none;
  z-index: 5;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-btc-live { animation: none; }
  .hero.is-glitching { animation: none; }
}
    

/* === View Transitions API — automatic cross-fade on navigation ===
   Supported in Chrome/Edge 126+, Safari 18.2+, Firefox 132+.
   Browsers without support just navigate normally — graceful degradation. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-fade-in  { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* === PRINT STYLESHEET — clean black-on-white reading copy ====== */
@media print {
  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  body::before, body::after { display: none !important; }

  /* Hide all UI chrome from the printed page */
  .site-header,
  .header-back,
  .lang-toggle,
  .lang-toggle-404,
  .sticky-cta,
  .konami-toast,
  .orae-overlay,
  .compare-overlay,
  .compare-bin,
  .compare-controls,
  .compare-card-pick,
  .glossary-controls,
  .modal,
  .cmdk,
  .cmdk-hint,
  .reading-progress,
  .footer-credit,
  .wp-translate-fr,
  .wp-lang-notice,
  .footer-status,
  .ambient-mesh,
  .ambient-particles,
  .global-grid,
  .global-noise,
  .scene-stars,
  .scene-nebula,
  .scene-moon,
  .scene-shooter,
  .hero-readout,
  .portal-stage,
  .skip-link {
    display: none !important;
  }

  /* Show every link's target after the link text */
  a[href^="http"]::after,
  a[href^="/"]::after,
  a[href^="./"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  /* Don't bloat in-page anchors with their URL */
  a[href^="#"]::after { content: ""; }

  /* Body content readable on paper */
  h1, h2, h3, h4 {
    color: #000 !important;
    page-break-after: avoid;
  }
  h2, .legal-section, .doc-section, .journal-entry, .careers-position,
  .press-section, .glossary-term { page-break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }

  pre, code, .legal-card, .legal-callout, .legal-summary {
    background: #F4F4F4 !important;
    color: #000 !important;
    border-color: #CCC !important;
  }

  /* Restore link styling */
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Footers print as small grey rule */
  .site-footer, .doc-footer {
    border-top: 1px solid #CCC !important;
    color: #444 !important;
    background: none !important;
    page-break-before: avoid;
  }
}

/* ============================================================
   UNIFIED PREMIUM NAV — multi-page architecture (.tp-nav)
   Sticky top bar, glassmorphism, desktop links + mobile drawer.
   ============================================================ */
.tp-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 4, 18, 0.74);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.tp-nav-inner {
  width: var(--content);
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.tp-nav .brand { text-decoration: none; }
.tp-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
}
.tp-nav-links a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  padding: 6px 0;
  transition: color 180ms ease;
  white-space: nowrap;
}
.tp-nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--magenta);
  transition: width 200ms var(--ease);
}
.tp-nav-links a:hover,
.tp-nav-links a:focus-visible,
.tp-nav-links a[aria-current="page"] { color: var(--white); }
.tp-nav-links a:hover::after,
.tp-nav-links a:focus-visible::after,
.tp-nav-links a[aria-current="page"]::after { width: 100%; }

.tp-nav-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.tp-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 18px;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
  white-space: nowrap;
}
.tp-nav-cta:hover, .tp-nav-cta:focus-visible { background: var(--magenta-strong); transform: translateY(-1px); color: var(--white); }

.tp-nav-burger {
  display: none;
  width: 40px; height: 40px;
  appearance: none; background: rgba(20,12,45,0.4);
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.tp-nav-burger span {
  display: block; width: 17px; height: 1.5px;
  background: var(--silver-strong); position: relative;
}
.tp-nav-burger span::before, .tp-nav-burger span::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 1.5px; background: var(--silver-strong);
  transition: transform 220ms var(--ease), top 220ms var(--ease);
}
.tp-nav-burger span::before { top: -6px; }
.tp-nav-burger span::after  { top: 6px; }
.tp-nav-burger[aria-expanded="true"] span { background: transparent; }
.tp-nav-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.tp-nav-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
.tp-drawer {
  position: fixed; inset: 64px 0 0 0;
  z-index: 55;
  background: rgba(6, 3, 22, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column;
  padding: 28px 24px 40px;
  transform: translateY(-12px);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  overflow-y: auto;
}
.tp-drawer.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tp-drawer a {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 17px 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 420;
  font-variation-settings: "opsz" 40, "wght" 420;
  color: var(--white); text-decoration: none;
  letter-spacing: -0.015em;
}
.tp-drawer a .idx { font-family: var(--font-mono); font-size: 0.66rem; color: var(--magenta); letter-spacing: 0.1em; }
.tp-drawer a[aria-current="page"] { color: var(--magenta); }
.tp-drawer .tp-nav-cta { margin-top: 26px; height: 50px; justify-content: center; font-size: 0.74rem; }

@media (max-width: 900px) {
  .tp-nav-links { display: none; }
  .tp-nav-actions .tp-nav-cta { display: none; }
  .tp-nav-actions .lang-toggle { display: none; }
  .tp-nav-burger { display: inline-flex; }
}
@media (min-width: 901px) {
  .tp-drawer { display: none; }
}
body.tp-drawer-open { overflow: hidden; }

/* ============================================================
   BREADCRUMB — subtle wayfinding on internal pages
   ============================================================ */
.tp-breadcrumb {
  width: var(--content);
  margin: 0 auto;
  padding-top: var(--s-21);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(186, 188, 199, 0.5);
}
.tp-breadcrumb a { color: var(--silver); text-decoration: none; transition: color 160ms ease; }
.tp-breadcrumb a:hover { color: var(--magenta); }
.tp-breadcrumb .sep { margin: 0 9px; opacity: 0.4; }
.tp-breadcrumb .cur { color: var(--silver-strong); }

/* ============================================================
   GENERIC INTERNAL PAGE HERO (.page-hero)
   ============================================================ */
.page-hero {
  width: var(--content);
  margin: 0 auto;
  padding: var(--s-55) 0 var(--s-34);
}
.page-hero-kicker {
  display: inline-block;
  padding: 5px 13px;
  margin-bottom: var(--s-21);
  border: 1px solid rgba(217, 70, 239, 0.28);
  border-radius: 999px;
  background: rgba(14, 7, 41, 0.5);
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--silver-strong);
}
.page-hero h1 {
  margin: 0 0 var(--s-21);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "wght" 380;
  letter-spacing: -0.03em; line-height: 1.03;
  color: var(--white);
  max-width: 16em;
}
.page-hero h1 .accent { color: var(--magenta); }
.page-hero-lead {
  margin: 0;
  max-width: 40em;
  font-size: 1.05rem; line-height: 1.65;
  color: var(--silver-strong);
}
.page-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-21);
  margin-top: var(--s-34);
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(186, 188, 199, 0.7);
}
.page-hero-meta strong { color: var(--white); font-weight: 500; }

/* generic section wrapper for internal pages */
.tp-section { width: var(--content); margin: 0 auto; padding: var(--s-89) 0; }
.tp-section-head { margin-bottom: var(--s-34); }
.tp-section-kicker {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--magenta);
  display: block; margin-bottom: var(--s-13);
}
.tp-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 400; font-variation-settings: "opsz" 60, "wght" 400;
  letter-spacing: -0.022em; line-height: 1.15; color: var(--white);
}
.tp-section-title .accent { color: var(--magenta); }

@media (max-width: 760px) {
  .page-hero { padding: var(--s-34) 0 var(--s-21); }
  .tp-section { padding: var(--s-55) 0; }
}

/* ============================================================
   HOME PREVIEW FOOTERS + OVERSIGHT FIGURES (landing previews)
   ============================================================ */
.preview-foot {
  width: var(--content);
  margin: var(--s-21) auto 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-top: var(--s-21);
  border-top: 1px solid var(--line);
}
.preview-foot-note {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(186, 188, 199, 0.55);
}
.text-link {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--magenta); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 180ms ease, color 180ms ease;
}
.text-link:hover { color: var(--magenta-strong); border-bottom-color: var(--magenta); }

.oversight-figures {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.ov-fig {
  padding: 22px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 12, 45, 0.4), rgba(9, 5, 26, 0.55));
  display: flex; flex-direction: column; gap: 8px;
}
.ov-fig-v {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 420;
  font-variation-settings: "opsz" 48, "wght" 420; letter-spacing: -0.02em;
  color: var(--white);
}
.ov-fig-l {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(186, 188, 199, 0.65); line-height: 1.5;
}
@media (max-width: 760px) {
  .oversight-figures { grid-template-columns: 1fr; }
  .preview-foot { flex-direction: column; align-items: flex-start; }
}