/* ============================================================
   VELTRIX — Landing site styling + motion system
   Built on colors_and_type.css tokens. Near-black canvas,
   electric-yellow voltage, Clash Display headlines + Inter body.
   ============================================================ */

/* Characterful display face for headlines (paired with Inter body) */
@import url("https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@1,18..72,400;1,18..72,500&display=swap");

:root {
  --font-display: "Clash Display", "Inter", -apple-system, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* JetBrains Mono removed site-wide — mono token now resolves to Inter */
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --page-pad: clamp(24px, 4.5vw, 96px);
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x: clip on BOTH html and body reliably contains decorative
   overflow (hero glows, the "how we work" orbit) on mobile — where
   overflow-x:hidden on body alone lets html scroll sideways. `clip`
   (unlike `hidden`) does not create a scroll container, so it never
   breaks the position:sticky this page relies on. */
html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
body {
  background: var(--canvas);
  color: var(--body);
  position: relative;
  z-index: 0;
}
/* living, looping brand gradient wash behind all content */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 48% at 20% 26%, rgba(250,255,105,0.78), transparent 70%),
    radial-gradient(44% 54% at 80% 20%, rgba(143,224,107,0.60), transparent 72%),
    radial-gradient(48% 52% at 66% 84%, rgba(255,157,60,0.54), transparent 72%),
    radial-gradient(42% 46% at 16% 82%, rgba(212,242,90,0.58), transparent 72%);
  filter: blur(80px);
  animation: auraDrift 24s ease-in-out infinite;
  will-change: transform;
}
@keyframes auraDrift {
  0%   { transform: translate(0%, 0%) scale(1)    rotate(0deg); }
  25%  { transform: translate(-5%, 3%) scale(1.12) rotate(3deg); }
  50%  { transform: translate(4%, -4%) scale(1.06) rotate(-3deg); }
  75%  { transform: translate(5%, 5%) scale(1.14)  rotate(2deg); }
  100% { transform: translate(0%, 0%) scale(1)    rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
::selection { background: var(--primary); color: var(--on-primary); }

/* GSAP word-split unit */
.g-w { display: inline-block; will-change: transform, opacity; }

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-sans); }

/* ----------------------------------------------------------------
   TYPE — base headings stay on Inter (design system); the characterful
   Clash Display face is used ONLY as an accent on key words (.kw / .em).
   ---------------------------------------------------------------- */
.vx-display {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--on-dark);
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
/* accent key word — elegant italic serif (no highlight) */
.vx-display .kw {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  color: var(--on-dark);
  letter-spacing: -0.005em;
}
.vx-kicker {
  font: var(--weight-medium) 12px/1 var(--font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vx-kicker::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--primary);
  display: inline-block;
}
.vx-index {
  font: var(--weight-medium) 11px/1 var(--font-sans);
  color: var(--muted);
  letter-spacing: 0.2px;
}
.body-lg { font: var(--weight-regular) 18px/1.6 var(--font-sans); letter-spacing: -0.011em; color: var(--body); }

/* ----------------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------------- */
.wrap { max-width: none; margin: 0; padding: 0 var(--page-pad); }
.section { position: relative; padding: 120px 0; }
@media (max-width: 760px) { .section { padding: 80px 0; } }

/* ----------------------------------------------------------------
   AMBIENT MORPHING GLOWS (radial, drifting, organic)
   ---------------------------------------------------------------- */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  will-change: transform, border-radius;
}
.glow--yellow { background: radial-gradient(circle at 50% 50%, rgba(250,255,105,0.55), transparent 68%); }
.glow--lime   { background: radial-gradient(circle at 50% 50%, rgba(143,224,107,0.40), transparent 68%); }
.glow--orange { background: radial-gradient(circle at 50% 50%, rgba(255,157,60,0.32), transparent 68%); }

@keyframes morph {
  0%   { border-radius: 47% 53% 60% 40% / 55% 42% 58% 45%; transform: translate(0,0) rotate(0deg) scale(1); }
  33%  { border-radius: 60% 40% 38% 62% / 45% 60% 40% 55%; transform: translate(4%, -3%) rotate(40deg) scale(1.08); }
  66%  { border-radius: 38% 62% 56% 44% / 60% 38% 62% 40%; transform: translate(-3%, 4%) rotate(-30deg) scale(0.95); }
  100% { border-radius: 47% 53% 60% 40% / 55% 42% 58% 45%; transform: translate(0,0) rotate(0deg) scale(1); }
}
.glow--anim { animation: morph 22s ease-in-out infinite; }
.glow--anim.slow { animation-duration: 30s; }

/* subtle grain / electric noise overlay */
.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--radius-md);
  font: var(--weight-semibold) 15px/1 var(--font-sans);
  cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), filter .2s ease, background .2s ease;
}
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 0 0 0 rgba(250,255,105,0);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px -6px rgba(250,255,105,0.55), 0 0 0 1px rgba(250,255,105,0.4);
}
.btn--primary:active { transform: translateY(0); background: var(--primary-active); }

.btn--ghost {
  background: transparent; color: var(--on-dark);
  border: 1px solid var(--hairline-strong);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }

.btn--on-yellow {
  background: var(--canvas); color: var(--on-dark);
}
.btn--on-yellow:hover { transform: translateY(-2px); box-shadow: 0 12px 36px -8px rgba(0,0,0,0.5); }

.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 32px; font-size: 16px; }

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 72px;
  display: flex; align-items: center;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.hdr.scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.hdr .wrap { display: flex; align-items: center; width: 100%; }
.hdr-nav { display: flex; gap: 32px; margin-left: 48px; }
.hdr-link {
  font: var(--weight-medium) 14px/1 var(--font-sans);
  color: var(--body); position: relative; padding: 6px 0;
  transition: color .2s ease;
}
.hdr-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--primary); transition: width .28s var(--ease-out);
}
.hdr-link:hover { color: var(--on-dark); }
.hdr-link:hover::after { width: 100%; }
@media (max-width: 860px) { .hdr-nav { display: none; } }

/* ----------------------------------------------------------------
   HERO
   ---------------------------------------------------------------- */
.hero { position: relative; padding: 180px 0 120px; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
  position: relative; z-index: 2;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 140px 0 80px; }
  .line-mask { white-space: normal; }
}
.hero h1 { margin: 22px 0 24px; font-size: clamp(38px, 5.2vw, 66px); }
.hero h1 .em { font-family: var(--font-display); font-weight: 600; color: var(--primary); letter-spacing: -1px; position: relative; white-space: nowrap; }
.hero-sub { max-width: 540px; margin: 0 0 36px; color: var(--body-strong); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-micro {
  margin: 22px 0 0; display: flex; align-items: center; gap: 9px;
  font: var(--weight-regular) 14px/1.5 var(--font-sans); color: var(--muted);
}
.hero-micro .spark { color: var(--primary); }

/* kinetic load-in — TRANSFORM-ONLY (opacity stays 1) so content is never
   invisible if the animation timeline is paused (hidden/off-screen tab).
   The frozen state is "visible, slightly offset"; live tabs get the slide. */
.line-mask { display: block; white-space: nowrap; }
.line-mask > span {
  display: block;
  transform: translateY(26px);
  transition: transform 0.9s var(--ease-out);
}
.hero.in .line-mask > span { transform: none; }
.fade-up {
  transform: translateY(20px);
  transition: transform 0.8s var(--ease-out);
}
.hero.in .fade-up { transform: none; }

/* ----------------------------------------------------------------
   HERO — charge orb (graphic motion component)
   ---------------------------------------------------------------- */
.orb-stage { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; width: 100%; }
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
}
.orb-ring.r2 { inset: 13%; border-color: rgba(250,255,105,0.18); }
.orb-ring.r3 { inset: 26%; border-color: rgba(250,255,105,0.10); }
.orb-spin { animation: spin 26s linear infinite; }
.orb-spin.rev { animation: spin 34s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes barPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.66); opacity: 0.75; }
}
.orb-core {
  position: absolute; inset: 33%; border-radius: 50%;
  background: var(--gradient-md);
  filter: blur(2px);
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); filter: blur(2px) brightness(1); }
  50% { transform: scale(1.08); filter: blur(4px) brightness(1.15); }
}
.orb-dot {
  position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px;
  border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 14px 3px rgba(250,255,105,0.7);
}

/* ----------------------------------------------------------------
   SCROLL REVEAL — transform-only (opacity stays 1, freeze-safe)
   ---------------------------------------------------------------- */
.reveal { transform: translateY(26px); transition: transform 0.8s var(--ease-out); }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none !important; }
  .glow--anim, .orb-spin, .orb-core { animation: none !important; }
  .hero .fade-up, .hero .line-mask > span { transform: none !important; }
}

/* ----------------------------------------------------------------
   SECTION HEADS
   ---------------------------------------------------------------- */
.sec-head { max-width: 760px; margin-bottom: 64px; }
.sec-head h2 { margin: 18px 0 0; font-size: clamp(30px, 4.2vw, 52px); }
.sec-head p { margin: 20px 0 0; max-width: 620px; }

/* ----------------------------------------------------------------
   WHAT WE DO — horizontal service rows
   ---------------------------------------------------------------- */
.svc-rows { border-top: 1px solid var(--hairline); }
.svc-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(70px, 0.5fr) 184px minmax(200px, 1fr);
  gap: 36px;
  align-items: center;
  padding: 36px 28px;
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

/* left — icon + title */
.svc-head { display: flex; align-items: center; gap: 18px; }
.svc-ico {
  width: 50px; height: 50px; flex: 0 0 50px; border-radius: var(--radius-md);
  color: #fff;
  /* clean, bright icon-colored tile; white glyph */
  background: var(--ico-c, var(--ink-amber));
  border: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), transform .5s var(--ease-spring);
}
.svc-title { font: var(--weight-semibold) 22px/1.18 var(--font-sans); letter-spacing: -0.03em; color: var(--on-dark); margin: 0; white-space: pre-line; }

/* center — numbering */
.svc-num {
  font: var(--weight-medium) 10px/1 var(--font-mono);
  letter-spacing: 0; color: var(--muted-soft);
  display: flex; align-items: center; justify-content: center;
  transition: color .4s ease;
}

/* right — graphic tile + description */
.svc-right { display: flex; align-items: center; gap: 28px; }
.svc-tile {
  position: relative; overflow: hidden; flex: 0 0 184px;
  width: 184px; height: 244px; border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.svc-tile-glow {
  position: absolute; width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle, var(--g, var(--primary)), transparent 66%);
  filter: blur(30px); opacity: 0.5;
  animation: morph 19s ease-in-out infinite;
}
.svc-tile-ring { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); }
.svc-tile-ring.r2 { width: 168px; height: 168px; border-color: rgba(255,255,255,0.06); }
.svc-tile .svc-tile-ico { position: relative; z-index: 2; color: var(--on-dark); }
.svc-tile-grid {
  position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
}
.svc-desc { margin: 0; color: var(--body); font-size: 15.5px; line-height: 1.62; letter-spacing: -0.011em; max-width: 268px; }

@media (max-width: 900px) {
  .svc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "head num"
      "tile tile"
      "desc desc";
    gap: 24px 18px;
    align-items: start;
    padding: 34px 0;
  }
  .svc-head { grid-area: head; }
  .svc-num { grid-area: num; justify-self: end; }
  .svc-tile {
    grid-area: tile; flex: none;
    width: 100%; max-width: 340px; height: 240px;
    justify-self: start;
  }
  .svc-desc { grid-area: desc; max-width: 560px; }
}

/* ----------------------------------------------------------------
   HOW WE WORK — scroll-driven rotating orbit
   ---------------------------------------------------------------- */
.how-scroll { position: relative; height: 420vh; }
.how-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.how-sticky::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 620px at 6% 2%, rgba(250,255,105,0.34), transparent 60%),
    radial-gradient(700px 700px at 100% 104%, rgba(255,157,60,0.30), transparent 62%),
    radial-gradient(560px 560px at 94% 6%, rgba(143,224,107,0.22), transparent 60%);
}

.how-head { position: absolute; top: 120px; left: var(--page-pad); z-index: 6; max-width: 480px; }
.how-head .vx-kicker { margin-bottom: 16px; }
.how-head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); }

.how-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  z-index: 1; pointer-events: none;
}

.how-conn { position: absolute; width: 1px; background: var(--hairline-strong); transform: translateX(-50%); z-index: 2; }
.how-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: rgb(255,104,0); transform: translate(-50%, -50%); z-index: 3;
}

.how-node {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--canvas); border: 1px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center;
  font: 500 17px/1 var(--font-mono); color: var(--muted); z-index: 4;
  transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .12s linear;
}
.how-node.active {
  color: #ffffff; border-color: rgb(255, 81, 0) !important;
  background: rgb(255, 81, 0);
  box-shadow: 0 0 0 4px rgba(255,81,0,0.16);
}

.how-center {
  position: absolute; transform: translateX(-50%); z-index: 4;
  width: min(460px, 82vw); text-align: center;
}
.how-step {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.how-step.on { opacity: 1; transform: none; }
.how-step-lbl { display: block; font: 500 12px/1 var(--font-mono); letter-spacing: 1.5px; color: var(--ink-amber); margin-bottom: 14px; }
.how-step h3 { font: 300 42px/1.06 var(--font-sans); letter-spacing: -2.4px; color: var(--on-dark); margin: 0; }
.how-step p { margin: 16px auto 0; max-width: 360px; color: var(--body); font: 300 14px/1.6 var(--font-sans); letter-spacing: -0.011em; }

.how-progress {
  position: absolute; bottom: 40px; right: var(--page-pad); z-index: 6;
  font: 500 13px/1 var(--font-mono); letter-spacing: 1.5px; color: var(--muted);
}
@media (max-width: 820px) {
  .how-head { top: 96px; left: var(--page-pad); right: var(--page-pad); }
  .how-progress { right: var(--page-pad); bottom: 28px; }
}

/* ----------------------------------------------------------------
   WHY US — reason grid
   ---------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 32px;
  transition: border-color .3s ease, transform .3s var(--ease-out);
  position: relative;
}
.why-card:hover { transform: translateY(-4px); border-color: var(--hairline-strong); }
.why-card .num { font: var(--weight-medium) 13px/1 var(--font-mono); color: var(--primary); letter-spacing: 1px; }
.why-card h3 { font: var(--weight-semibold) 20px/1.3 var(--font-sans); letter-spacing: -0.02em; color: var(--on-dark); margin: 16px 0 10px; }
.why-card p { margin: 0; color: var(--body); font-size: 12px; line-height: 1.6; letter-spacing: -0.011em; }
.why-card.feature {
  background: var(--gradient-lg); border: 0;
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap;
}
.why-card.feature .num { color: rgba(10,10,10,0.55); }
.why-card.feature h3 { color: var(--on-yellow); font-size: 26px; }
.why-card.feature p { color: #1a1a1a; font-size: 16px; }

/* WHY US — scroll-driven fly-through gallery. Tall section provides scroll
   distance; sticky stage holds the WebGL canvas (photos travel toward you)
   with the centered headline, swapping caption, and 1–4 status bar on top. */
.why-fly { position: relative; height: 420vh; }
.why-fly-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.why-fly-canvas { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.why-fly-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; padding: 13vh 24px 12vh; pointer-events: none;
}
.why-fly-h2 {
  font-weight: 300; font-size: clamp(32px, 4vw, 58px);
  letter-spacing: -1.8px; line-height: 1.04; margin: 0;
  max-width: 760px; color: var(--on-dark);
}

/* swapping caption block (replaces the old paragraph) */
.why-fly-cards { position: relative; width: min(440px, 86vw); height: 150px; margin-top: 0; }

/* centre crosshair + scrub bar — sit BEHIND the cards (low z) */
.why-fly-vline {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  z-index: 1; pointer-events: none;
}
.why-fly-progress {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 1px; background: rgba(255,255,255,0.2);
  z-index: 1; pointer-events: none;
}
.why-fly-progress-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: rgba(255,255,255,0.6); will-change: transform;
}
.why-fly-progress-ticks { position: absolute; inset: 0; display: flex; }
.why-fly-progress-ticks span { flex: 1 1 0; position: relative; }
.why-fly-progress-ticks span:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%);
  width: 1px; height: 7px; background: rgba(255,255,255,0.2);
}
.why-fly-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.why-fly-card.on { opacity: 1; transform: none; }
.why-fly-tag { font: 600 11px/1 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--rc); }
.why-fly-title { font: var(--weight-semibold) 21px/1.12 var(--font-sans); letter-spacing: -0.035em; color: var(--on-dark); margin: 0; }
.why-fly-body { font-size: 14px; line-height: 1.45; font-weight: 300; letter-spacing: -0.012em; color: var(--body); margin: 0; }

/* thematic animated icon in a thin circle (replaces the orange tag) */
.why-fly-ic {
  width: 84px; height: 60px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--rc);
  background: var(--rc);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-primary); margin-bottom: 18px;
}
.why-fly-ic svg, .why-fly-ic i { width: 22px; height: 22px; }
.why-fly-ic--bob svg     { animation: ic-bob 2.6s ease-in-out infinite; }
.why-fly-ic--flicker svg { animation: ic-flicker 1.7s ease-in-out infinite; transform-origin: center; }
.why-fly-ic--spin svg    { animation: ic-spin 7s linear infinite; transform-origin: center; }
.why-fly-ic--tilt svg    { animation: ic-tilt 2.8s ease-in-out infinite; transform-origin: center; }
.why-fly-ic--sway svg    { animation: ic-sway 3.2s ease-in-out infinite; transform-origin: center; }
.why-fly-ic--pulse svg   { animation: ic-pulse 2.4s ease-in-out infinite; transform-origin: center; }
.why-fly-ic--beat svg    { animation: ic-beat 1.9s ease-in-out infinite; transform-origin: center; }
@keyframes ic-bob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ic-flicker { 0%, 100% { transform: scale(1); opacity: 0.85; } 45% { transform: scale(1.14); opacity: 1; } 70% { transform: scale(0.97); } }
@keyframes ic-spin    { to { transform: rotate(360deg); } }
@keyframes ic-tilt    { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes ic-sway    { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ic-pulse   { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.16); opacity: 1; } }
@keyframes ic-beat    { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } 36% { transform: scale(1.13); } 50% { transform: scale(1); } }

/* 1–4 status bar */
.why-fly-bar { display: flex; gap: 10px; margin-top: 30px; pointer-events: auto; }
.why-fly-step {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--surface-card); border: 1px solid var(--hairline-strong);
  color: var(--muted); font: var(--weight-medium) 12px/1 var(--font-sans); letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s ease, color .3s ease, transform .3s var(--ease-spring), box-shadow .3s ease, background .3s ease;
}
.why-fly-step:hover { color: var(--on-dark); border-color: var(--muted); }
.why-fly-step.on {
  background: var(--rc); border-color: var(--rc); color: var(--on-primary); transform: scale(1.12);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc) 24%, transparent);
}

@media (max-width: 900px) {
  .why-fly { height: 360vh; }
  .why-fly-cards { height: 168px; }
}

/* ----------------------------------------------------------------
   QUIZ CTA band
   ---------------------------------------------------------------- */
.quiz-band {
  position: relative; overflow: hidden;
  background: var(--gradient-lg);
  border-radius: var(--radius-lg);
  padding: 72px 64px;
  text-align: center;
}
.quiz-band h2 { color: var(--on-yellow); font-size: clamp(28px, 4vw, 46px); margin: 0 auto 18px; max-width: 760px; }
.quiz-band p { color: #1a1a1a; max-width: 560px; margin: 0 auto 34px; font-size: 16.5px; line-height: 1.55; }
.quiz-band .deco {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(10,10,10,0.12);
  pointer-events: none;
}
@media (max-width: 620px) { .quiz-band { padding: 48px 26px; } }

/* ----------------------------------------------------------------
   QUIZ POPUP
   ---------------------------------------------------------------- */
.q-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,5,5,0.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.q-modal {
  position: relative; width: 100%; max-width: 560px;
  background: var(--surface-card);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 40px;
  overflow: hidden;
  transform: translateY(18px) scale(0.985);
  transition: transform 0.4s var(--ease-out);
}
.q-overlay.open .q-modal { transform: none; }
.q-modal .glow { z-index: 0; }
.q-modal-inner { position: relative; z-index: 2; }
.q-close {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-elevated); border: 1px solid var(--hairline-strong);
  color: var(--body); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s ease;
}
.q-close:hover { color: var(--on-dark); border-color: var(--primary); }

.q-progress { display: flex; gap: 7px; margin-bottom: 28px; }
.q-progress span { height: 4px; flex: 1; border-radius: 99px; background: var(--hairline-strong); overflow: hidden; }
.q-progress span i { display: block; height: 100%; width: 0; background: var(--gradient-sm); transition: width .4s var(--ease-out); }
.q-progress span.done i, .q-progress span.active i { width: 100%; }

.q-step-lbl { font: var(--weight-medium) 13px/1 var(--font-sans); letter-spacing: 0; color: var(--muted); }
.q-q { font: var(--weight-semibold) 27px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--on-dark); margin: 14px 0 28px; }
.q-opts { display: flex; flex-direction: column; gap: 12px; }
.q-opt {
  display: flex; align-items: center; gap: 16px; text-align: left;
  width: 100%; padding: 18px 20px;
  background: var(--canvas); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md); color: var(--on-dark);
  font: var(--weight-medium) 15.5px/1.35 var(--font-sans); cursor: pointer;
  transition: all .22s var(--ease-out);
}
.q-opt:hover { border-color: #ff5100; transform: translateX(4px); }
.q-opt.sel { border-color: #ff5100; background: rgba(255,81,0,0.07); }
.q-opt .tick {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center;
  transition: all .22s var(--ease-out); color: transparent;
}
.q-opt.sel .tick { background: #ff5100; border-color: #ff5100; color: #ffffff; }

.q-field {
  width: 100%; height: 54px; padding: 0 18px;
  background: var(--canvas); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md); color: var(--on-dark);
  font: var(--weight-regular) 16px/1 var(--font-sans);
  transition: border-color .2s ease;
}
.q-field::placeholder { color: var(--muted-soft); }
.q-field:focus { outline: none; border-color: var(--primary); }
.q-consent { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 26px; cursor: pointer; }
.q-consent input { margin-top: 3px; accent-color: var(--primary); width: 17px; height: 17px; flex: 0 0 17px; }
.q-consent span { font: var(--weight-regular) 13.5px/1.5 var(--font-sans); color: var(--muted); }

.q-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; gap: 16px; }
.q-back { background: none; border: 0; color: var(--muted); font: var(--weight-medium) 14px/1 var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; }
.q-back:hover { color: var(--on-dark); }
.q-back:disabled { opacity: 0; pointer-events: none; }

/* success state */
.q-success { text-align: center; padding: 20px 0 8px; }
.q-check {
  width: 76px; height: 76px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.7); transition: transform 0.5s var(--ease-spring);
  box-shadow: 0 0 36px -2px rgba(250,255,105,0.6);
}
.q-success.in .q-check { transform: scale(1); }
.q-success h3 { font: var(--weight-semibold) 30px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--on-dark); margin: 0 0 14px; }
.q-success p { color: var(--body); max-width: 380px; margin: 0 auto 30px; line-height: 1.6; }

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
/* The footer is one big electric-yellow card floating on the dark zone.
   A faint geometric pattern fills the dark margin around it. */
.ft {
  position: relative;
  padding: 56px 0 40px;
  /* dark-on-yellow ink palette used inside the card */
  --ink: #100f04;
  --ink-soft: rgba(16,15,4,0.62);
  --ink-line: rgba(16,15,4,0.16);
}
.ft .wrap { position: relative; z-index: 2; }
/* faint dot/ring lattice behind the card, masked to the section edges */
.ft::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.045) 1px, transparent 1.4px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.ft-card {
  position: relative; z-index: 1;
  background: var(--primary);
  color: var(--ink);
  border-radius: 36px;
  padding: 64px 64px 36px;
  overflow: hidden;
}
@media (max-width: 760px) { .ft-card { padding: 40px 28px 28px; border-radius: 26px; } }

/* upper region — two columns: pitch + CTA (left), nav + socials (right) */
.ft-top {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px 72px;
  padding: 0;
  position: relative; z-index: 2;
}
@media (max-width: 860px) { .ft-top { grid-template-columns: 1fr; gap: 44px; } }

/* ---- left column ---- */
.ft-l { display: flex; flex-direction: column; align-items: flex-start; min-height: 420px; }
.ft-lead {
  margin: 0 0 30px; max-width: 30ch;
  font: var(--weight-medium) clamp(22px, 2.1vw, 28px)/1.28 var(--font-sans);
  letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}
.ft-cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 26px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--primary);
  border-radius: var(--radius-md);
  font: var(--weight-semibold) 15px/1 var(--font-sans); letter-spacing: -0.01em;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ft-cta svg { transition: transform .25s var(--ease-out); }
.ft-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(16,15,4,0.5); }
.ft-cta:hover svg { transform: translate(3px, -3px); }
.ft-cta:active { transform: translateY(0); }

.ft-contacts { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.ft-c {
  display: inline-flex; align-items: center; gap: 14px;
  font: var(--weight-medium) 15.5px/1 var(--font-sans); letter-spacing: -0.01em;
  color: var(--ink); transition: opacity .2s ease;
}
.ft-ic {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--radius-md);
  background: #f1f886; color: var(--ink);
  border: 1px solid rgba(16,15,4,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease-out);
}
.ft-c:hover .ft-ic { transform: translateY(-2px); }

/* big signature bar mark + wordmark lockup, pinned to the bottom-left of the card */
.ft-mark { display: flex; align-items: flex-end; gap: 28px; margin-top: auto; padding-top: 56px; }
.ft-mark-bars { display: flex; align-items: flex-end; gap: 16px; }
.ft-mark i {
  display: block; width: 38px; border-radius: 8px; background: var(--ink);
}
.ft-mark i:nth-child(1) { height: 132px; }
.ft-mark i:nth-child(2) { height: 88px; }
.ft-mark i:nth-child(3) { height: 132px; }
.ft-mark-word {
  font: 700 124px/0.82 var(--font-sans);
  letter-spacing: -0.05em;
  color: var(--ink);
}
@media (max-width: 860px) {
  .ft-l { min-height: 0; }
  .ft-mark { padding-top: 40px; gap: clamp(10px, 3vw, 18px); flex-wrap: nowrap; }
  .ft-mark-bars { gap: clamp(7px, 2.2vw, 12px); }
  .ft-mark i { width: clamp(18px, 6vw, 30px); }
  .ft-mark i:nth-child(1), .ft-mark i:nth-child(3) { height: clamp(58px, 19vw, 100px); }
  .ft-mark i:nth-child(2) { height: clamp(38px, 12.6vw, 66px); }
  .ft-mark-word { font-size: clamp(48px, 16vw, 86px); }
}

/* ---- right column ---- */
.ft-r { display: flex; flex-direction: column; }
.ft-links {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink-line);
}
.ft-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px; border-bottom: 1px solid var(--ink-line);
  color: var(--ink); transition: padding .28s var(--ease-out), opacity .2s ease;
}
.ft-links a span {
  font: var(--weight-medium) clamp(26px, 2.6vw, 36px)/1 var(--font-sans);
  letter-spacing: -0.03em;
}
.ft-links a svg { color: var(--ink); opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.ft-links a:hover { padding-left: 14px; }
.ft-links a:hover svg { opacity: 1; transform: none; }

/* ---- base row: copyright + legal ---- */
.ft-base {
  position: relative; z-index: 2;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--ink-line);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.ft-copy { font: var(--weight-medium) 14px/1 var(--font-sans); color: var(--ink-soft); letter-spacing: -0.01em; }
.ft-base-legal { display: flex; align-items: center; gap: 26px; }
.ft-base-legal a {
  font: var(--weight-medium) 14px/1 var(--font-sans); letter-spacing: -0.01em;
  color: var(--ink-soft); transition: color .2s ease;
}
.ft-base-legal a:hover { color: var(--ink); }
@media (max-width: 560px) { .ft-base-legal { gap: 18px; } }

/* ================================================================
   LIGHT THEME — warm-white canvas + large design-system gradients
   Overrides the dark tokens; brand gradient (yellow→lime→orange)
   becomes the dominant visual through big soft washes.
   ================================================================ */
:root {
  /* warm, barely-yellow white */
  --canvas: #fcfbf3;
  --surface-soft: #f6f4e7;
  --surface-card: #ffffff;
  --surface-elevated: #f2f1e4;
  --hairline: #ebe9da;
  --hairline-strong: #dddac6;
  /* text (these token names mean "primary heading / body" here) */
  --on-dark: #16150d;
  --body: #4c4a3e;
  --body-strong: #232117;
  --muted: #8d8b78;
  --muted-soft: #b7b4a0;
  /* readable amber for small accent text/labels/links on white */
  --ink-amber: #b07900;
}

/* big soft gradient washes — turn the small glows into large gradients */
.glow { filter: blur(110px); }
.glow--yellow { background: radial-gradient(circle at 50% 50%, rgba(250,255,105,0.95), transparent 66%); }
.glow--lime   { background: radial-gradient(circle at 50% 50%, rgba(143,224,107,0.80), transparent 66%); }
.glow--orange { background: radial-gradient(circle at 50% 50%, rgba(255,157,60,0.72), transparent 66%); }

/* a large signature brand-gradient bloom behind the hero (Oxaley-style) */
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -8%; bottom: -32%; width: 1100px; height: 1100px;
  background: radial-gradient(circle at 50% 50%,
    rgba(250,255,105,0.85) 0%,
    rgba(212,242,90,0.55) 26%,
    rgba(143,224,107,0.42) 48%,
    rgba(255,157,60,0.30) 66%,
    transparent 76%);
  filter: blur(40px);
  animation: morph 26s ease-in-out infinite;
  border-radius: 50%;
}
.hero .wrap { position: relative; z-index: 2; }

/* a calmer wash anchoring the lower sections */
#why::before, #what::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 760px; height: 760px; border-radius: 50%; filter: blur(120px);
  background: radial-gradient(circle at 50% 50%, rgba(255,157,60,0.42), rgba(143,224,107,0.22) 45%, transparent 70%);
  animation: morph 30s ease-in-out infinite;
}
#what::before { top: auto; bottom: 6%; left: -22%; }
#why::before  { bottom: -10%; right: -16%; }
#why .wrap, #what .wrap { position: relative; z-index: 2; }

/* header — fully transparent: no fill, no blur, no border. Pills carry their own surface. */
.hdr, .hdr.scrolled {
  background: transparent !important;
  border-bottom-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* small accent text → readable amber on white (yellow reserved for fills) */
.vx-kicker { color: var(--ink-amber); }
.vx-kicker::before { background: var(--gradient-sm); height: 2px; border-radius: 2px; }
.hero-micro .spark, .hero-micro svg { color: var(--ink-amber) !important; }
.step .lbl, .why-card .num { color: var(--ink-amber); }
.svc-ico { color: #fff; background: var(--ico-c, var(--ink-amber)); }
.ft-contact .at { color: var(--ink-amber); }
.ft-col a:hover, .ft-soc:hover { color: var(--ink-amber); }
.ft-soc:hover { border-color: var(--primary); }

/* key-word accent → elegant italic serif (no highlight) */
.vx-display .kw, .hero h1 .em {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  color: var(--on-dark);
  letter-spacing: -0.005em;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* keep CTA-band buttons dark (canvas flipped to white) */
.btn--on-yellow { background: #141306; color: #ffffff; }
.btn--on-yellow:hover { box-shadow: 0 14px 34px -10px rgba(20,18,6,0.45); }

/* soft depth for light surfaces (dark mode used none; light needs a touch) */
.svc-tile, .why-card, .q-modal, .ft-soc {
  box-shadow: 0 2px 8px rgba(30,28,12,0.04), 0 18px 40px -22px rgba(30,28,12,0.12);
}
.svc-tile-ring { border-color: rgba(20,18,8,0.10); }
.svc-tile-ring.r2 { border-color: rgba(20,18,8,0.05); }
.why-card:hover, .svc-tile { border-color: var(--hairline); }

/* step nodes — dark number, gradient ring, on white */
.step-node {
  color: var(--on-dark);
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 4px rgba(255,157,60,0.10), 0 8px 22px -10px rgba(255,157,60,0.5);
}

/* quiz popup scrim stays dark for focus; option states tuned for white */
.q-opt { background: #ffffff; }
.q-opt.sel { background: rgba(255,81,0,0.09); }
.q-field { background: #ffffff; }
.q-close { background: var(--surface-soft); }

/* grain reads as warm paper texture */
.grain::after { opacity: 0.05; mix-blend-mode: multiply; }

/* ================================================================
   POLISHED TYPE SYSTEM — locked site-wide
   Enforces one consistent, refined text treatment (the hero block)
   and neutralizes accidental editor slider patches. !important wins
   over any runtime inline residue so text always renders cleanly.
   ================================================================ */
/* clear stray base tracking applied to the hero section */
.hero { letter-spacing: normal !important; }

/* eyebrow / kicker — identical everywhere */
.vx-kicker, .vx-kicker * {
  font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: 2px !important; opacity: 1 !important;
}

/* hero headline — Inter 700, tight; yellow-highlight accent word */
.hero h1 .line-mask > span,
.hero h1 .line-mask > span > span:not(.em):not(.em *) {
  font-weight: 700 !important; letter-spacing: -0.035em !important;
}
.hero h1 .em, .hero h1 .em * {
  font-weight: 600 !important; letter-spacing: -1px !important;
}

/* lead paragraph */
.hero-sub, .hero-sub * {
  font-size: 18px !important; line-height: 1.6 !important;
  font-weight: 400 !important; letter-spacing: -0.011em !important;
}

/* hero buttons + microcopy */
.hero-cta .btn, .hero-cta .btn * { font-size: 16px !important; letter-spacing: normal !important; font-weight: 600 !important; }
.hero-micro, .hero-micro * { font-size: 14px !important; font-weight: 400 !important; letter-spacing: normal !important; }

/* service descriptions — consistent muted body */
.svc-desc, .svc-desc * {
  font-size: 13px !important; line-height: 1.6 !important;
  font-weight: 400 !important; letter-spacing: -0.011em !important;
  color: var(--body) !important;
}

/* ================================================================
   HEADER — pill nav (logo + search left, pills + CTA right)
   ================================================================ */
.hdr { height: 88px; }
.hdr .wrap { display: flex; align-items: center; gap: 24px; }
.hdr-left { display: flex; align-items: center; gap: 14px; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr-pills {
  display: flex; align-items: center; gap: 2px; height: 52px; padding: 5px;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: 999px; box-shadow: 0 4px 18px -8px rgba(30,28,12,0.18);
}
.hdr-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 42px;
  padding: 0 18px; border-radius: 999px; border: 0; background: transparent;
  font: 600 13.5px/1 var(--font-sans); color: var(--body-strong);
  white-space: nowrap; cursor: pointer;
  transition: background .2s var(--ease-out), color .2s ease, transform .2s ease, border-color .2s ease;
}
.hdr-pills .hdr-pill:hover { background: #ff5100 !important; color: #ffffff !important; }
.hdr-cta {
  height: 52px; background: #141306; color: #ffffff;
  border: 0;
  padding: 0 22px; box-shadow: 0 4px 18px -8px rgba(20,18,6,0.7);
}
.hdr-cta:hover { background: #ff5100 !important; color: #ffffff !important; transform: translateY(-1px); }
@media (max-width: 880px) { .hdr-pills { display: none; } }
@media (max-width: 560px) {
  .hdr-cta { height: 42px !important; padding: 0 16px !important; font-size: 12px !important; gap: 5px; }
  .hdr-cta svg { width: 13px; height: 13px; }
}

/* ================================================================
   HERO — Floema composition: giant centered wordmark + central orb
   ================================================================ */
.hero { position: relative; min-height: 100vh; padding: 0; overflow: hidden; display: flex; align-items: center; }
.hero-stage {
  position: relative; z-index: 2; width: 100%; max-width: none; margin: 0;
  padding: 132px var(--page-pad) 56px; min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
}
.hero-eyebrow {
  position: absolute; top: 128px; left: 32px;
  font: 500 12px/1.4 var(--font-mono); letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-amber); display: inline-flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gradient-sm); border-radius: 2px; }

.hero-mark {
  position: relative; z-index: 1; margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; color: var(--on-dark);
  letter-spacing: -0.045em; line-height: 0.86;
  font-size: clamp(78px, 17.5vw, 264px);
}
.hero-mark .reg { font-size: 0.26em; vertical-align: super; font-weight: 500; letter-spacing: 0; }

.hero-centerpiece {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: clamp(320px, 40vw, 520px);
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.9s var(--ease-out);
}
.hero.in .hero-centerpiece { transform: translate(-50%, -50%) scale(1); }
.shader-stage {
  position: relative; width: 100%; aspect-ratio: 1;
}
.shader-canvas {
  display: block; width: 100%; height: 100%;
}
.orb-canvas { display: block; width: 100%; height: 100%; }

.hero-tagline { position: absolute; left: var(--page-pad); bottom: 56px; z-index: 4; max-width: 332px; }
.hero-tagline p { font: 700 clamp(20px, 2.1vw, 27px)/1.2 var(--font-sans); letter-spacing: -0.03em; color: var(--on-dark); margin: 0 0 16px; }
.hero-tagline .em {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  color: var(--on-dark); letter-spacing: -0.005em;
}
.hero-tagline .rule { display: none; }
.hero-scroll {
  display: inline-flex; align-items: center; gap: 8px; height: 52px;
  padding: 0 22px; border-radius: 999px;
  background: rgb(255, 81, 0); color: #ffffff;
  border: 0;
  font: 600 13.5px/1 var(--font-sans); letter-spacing: -0.01em;
  box-shadow: 0 4px 18px -8px rgba(255,81,0,0.8);
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .25s ease;
}
.hero-scroll:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(255,81,0,0.95); }
.hero-scroll svg { transition: transform .25s var(--ease-out); }
.hero-scroll:hover svg { transform: translateY(3px); }

/* scale the hero tagline + all CTAs up on large desktops (≥1600px) */
@media (min-width: 1600px) {
  .hero-tagline { width: min(1040px, 90vw) !important; }
  .hero-tagline p { font-size: 56px !important; line-height: 1.18 !important; white-space: nowrap !important; text-wrap: nowrap !important; }
  .hero-tagline p .em { font-size: 62px !important; }

  /* buttons */
  .hero-scroll { height: 62px; padding: 0 32px; font-size: 16px !important; gap: 10px; }
  .hero-scroll svg { width: 18px; height: 18px; }
  .hdr { height: 96px; }
  .hdr-pill { height: 48px; padding: 0 22px; font-size: 14px !important; }
  .hdr-cta { height: 56px; padding: 0 26px; }
  .hero-card-btn { height: 54px; font-size: 16px; }
  .ft-cta { height: 62px; padding: 0 30px; font-size: 16.5px; }
}
@media (min-width: 1900px) {
  .hero-tagline { width: min(1280px, 90vw) !important; }
  .hero-tagline p { font-size: 68px !important; line-height: 1.18 !important; white-space: nowrap !important; text-wrap: nowrap !important; }
  .hero-tagline p .em { font-size: 76px !important; }

  .hero-scroll { height: 70px; padding: 0 38px; font-size: 18px !important; }
  .hero-scroll svg { width: 20px; height: 20px; }
  .hdr { height: 104px; }
  .hdr-pill { height: 54px; padding: 0 26px; font-size: 15.5px !important; }
  .hdr-cta { height: 62px; padding: 0 30px; }
  .hero-card-btn { height: 60px; font-size: 17px; }
  .ft-cta { height: 68px; padding: 0 34px; font-size: 18px; }
}

.hero-card {
  position: absolute; right: var(--page-pad); bottom: 56px; z-index: 4; width: 300px;
  border-radius: var(--radius-lg); background: var(--gradient-md);
  padding: 22px 22px 20px; box-shadow: 0 22px 50px -20px rgba(30,28,12,0.3);
}
.hero-card-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(10,10,10,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hero-card p { color: var(--on-yellow); font: 600 14.5px/1.45 var(--font-sans); letter-spacing: -0.01em; margin: 0 0 16px; }
.hero-card-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 46px; border-radius: var(--radius-md); border: 0; background: #141306; color: #fff;
  font: 600 14px/1 var(--font-sans); cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .25s ease;
}
.hero-card-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(20,18,6,0.5); }
.hero-card-btn svg { transition: transform .25s var(--ease-out); }
.hero-card-btn:hover svg { transform: translate(2px, -2px); }

@media (max-width: 980px) {
  .hero-stage { flex-direction: column; justify-content: center; gap: 30px; min-height: auto; padding: 120px var(--page-pad) 64px; }
  .hero-eyebrow { position: static; margin-bottom: 0; }
  .hero-mark { font-size: clamp(60px, 19vw, 132px); }
  .hero-centerpiece { position: static; width: 300px; margin: 4px auto; transform: scale(0.92); }
  .hero.in .hero-centerpiece { transform: scale(1); }
  .hero-tagline, .hero-card { position: static; width: 100%; max-width: 440px; align-self: flex-start; }
}

/* ================================================================
   CUSTOM ANIMATED ILLUSTRATIONS — replace the black tile icons.
   The tile background (grid / rings / glow) is untouched; only the
   centered illustration is animated, looping seamlessly.
   ================================================================ */
.illo-wrap { display: flex; align-items: center; justify-content: center; line-height: 0; }
.illo { display: block; overflow: visible; }

@keyframes illo-float   { 0%, 100% { transform: translateY(0); }    50% { transform: translateY(-6px); } }
@keyframes illo-spin-cw  { to { transform: rotate(360deg); } }
@keyframes illo-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes illo-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* CUBE — floats, the whole cube wobbles, the inner core breathes,
   and the lattice dots twinkle in a staggered loop. */
.illo-cube  { animation: illo-float 6s ease-in-out infinite; }
.cube-spin  { transform-box: fill-box; transform-origin: center; animation: cube-wobble 9s ease-in-out infinite; }
.cube-core  { transform-box: fill-box; transform-origin: center; animation: cube-breathe 4.5s ease-in-out infinite; }
.cube-dots circle { transform-box: fill-box; transform-origin: center; animation: illo-twinkle 3s ease-in-out infinite, cube-drift 4.2s ease-in-out infinite; }
.cube-dots circle:nth-child(2n) { animation-delay: 0.5s, 0.7s; }
.cube-dots circle:nth-child(3n) { animation-delay: 1.0s, 1.4s; }
.cube-dots circle:nth-child(4n) { animation-delay: 1.6s, 2.0s; }
.cube-dots circle:nth-child(5n) { animation-delay: 0.8s, 0.3s; }
@keyframes cube-wobble  { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes cube-breathe { 0%, 100% { transform: scale(1);    opacity: 0.85; } 50% { transform: scale(1.09); opacity: 1; } }
@keyframes cube-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1.6px, -2px); }
  50%  { transform: translate(0, -2.6px); }
  75%  { transform: translate(-1.6px, -1px); }
  100% { transform: translate(0, 0); }
}

/* FLOWER — petals turn slowly clockwise while the inner compass
   counter-rotates and pulses; the whole bloom drifts up and down. */
.illo-flower { animation: illo-float 7s ease-in-out infinite; }
.fl-petals   { transform-box: fill-box; transform-origin: center; animation: illo-spin-cw 26s linear infinite; }
.fl-core     { transform-box: fill-box; transform-origin: center; animation: fl-core-spin 16s ease-in-out infinite; }
@keyframes fl-core-spin {
  0%   { transform: rotate(0deg)    scale(1); }
  50%  { transform: rotate(-180deg) scale(1.12); }
  100% { transform: rotate(-360deg) scale(1); }
}

/* PLANET — the globe lattice rotates like a spinning planet while
   the surrounding stars twinkle; the whole body floats gently. */
.illo-planet { animation: illo-float 6.5s ease-in-out infinite; }
.pl-orbit    { transform-box: fill-box; transform-origin: center; animation: illo-spin-cw 30s linear infinite; }
.pl-stars circle { animation: illo-twinkle 2.6s ease-in-out infinite; }
.pl-stars circle:nth-child(2n) { animation-delay: 0.4s; }
.pl-stars circle:nth-child(3n) { animation-delay: 0.9s; }
.pl-stars circle:nth-child(5n) { animation-delay: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  .illo-cube, .cube-spin, .cube-core, .cube-dots circle,
  .illo-flower, .fl-petals, .fl-core,
  .illo-planet, .pl-orbit, .pl-stars circle { animation: none !important; }
}

/* ================================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
   ================================================================ */
.legal-head {
  position: sticky; top: 0; z-index: 50; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--page-pad);
}
.legal-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.legal-logo .bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.legal-logo .bars i { width: 5px; border-radius: 2px; background: var(--on-dark); display: block; }
.legal-logo .bars i:nth-child(1) { height: 22px; }
.legal-logo .bars i:nth-child(2) { height: 15px; }
.legal-logo .bars i:nth-child(3) { height: 22px; }
.legal-logo .name { font: 700 22px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--on-dark); }
.legal-back {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; white-space: nowrap;
  border-radius: 999px; border: 1px solid var(--on-dark); background: var(--on-dark);
  font: var(--weight-medium) 13.5px/1 var(--font-sans); color: #ffffff; text-decoration: none;
  transition: opacity .2s ease, transform .2s var(--ease-out);
}
.legal-back:hover { opacity: 0.88; transform: translateY(-1px); }

.legal-wrap { max-width: 760px; margin: 0 auto; padding: 56px var(--page-pad) 120px; position: relative; z-index: 2; }
.legal-kicker { font: 600 12px/1 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-amber); }
.legal-title { font: 300 clamp(40px, 6vw, 68px)/1.02 var(--font-sans); letter-spacing: -2.4px; color: var(--on-dark); margin: 16px 0 14px; }
.legal-meta { font-size: 14px; color: var(--muted); margin: 0 0 48px; }
.legal-wrap h2 { font: var(--weight-semibold) 22px/1.2 var(--font-sans); letter-spacing: -0.03em; color: var(--on-dark); margin: 44px 0 14px; }
.legal-wrap p, .legal-wrap li { color: var(--body); font-size: 15.5px; line-height: 1.72; letter-spacing: -0.011em; }
.legal-wrap p { margin: 0 0 16px; }
.legal-wrap ul { margin: 0 0 16px; padding-left: 22px; }
.legal-wrap li { margin: 0 0 8px; }
.legal-wrap a { color: var(--ink-amber); }
.legal-divider { height: 1px; background: var(--hairline); border: 0; margin: 56px 0 0; }
.legal-foot { padding: 26px var(--page-pad); text-align: center; }
.legal-foot span { font-size: 13.5px; color: var(--muted-soft); }

/* ================================================================
   DARK BLOCKS — re-theme specific sections back to the Veltrix
   near-black canvas. Tokens are re-declared on the section scope so
   every descendant inherits dark surfaces/text automatically; accent
   text flips from readable amber to the brand electric yellow.
   Targets: #why ("we're a new team"), #quiz (CTA above footer), .ft.
   ================================================================ */
#why,
#quiz,
.ft {
  /* surfaces */
  --canvas: #0a0a0a;
  --surface-soft: #121212;
  --surface-card: #1a1a1a;
  --surface-elevated: #242424;
  --hairline: #2a2a2a;
  --hairline-strong: #3a3a3a;
  /* text */
  --on-dark: #ffffff;
  --body: #cccccc;
  --body-strong: #e6e6e6;
  --muted: #888888;
  --muted-soft: #5a5a5a;
  /* accents read as brand yellow on dark (was amber on white) */
  --ink-amber: #faff69;
  color: var(--body);
}

/* ---- LIVE AURORA FIELD behind the three dark blocks ----------------
   The three dark sections are wrapped in `.dark-zone`. A single `.aurora`
   layer is pinned (position: sticky) over the whole zone, so the same
   moving field shows behind #why, #quiz AND the footer — continuous, no
   seams, and clipped to the dark zone so it never bleeds onto the cream
   sections above. The negative margin removes the layer from flow so the
   sections start at the top of the zone and paint over it (z-index).
   Each colour blob drifts, scales and overlaps on its own slow loop via
   `transform` (always GPU-smooth) with `screen` blending, so the blooms
   flow into one another like an aurora. */
.dark-zone { background: #0a0a0a; position: relative; }
#why,
#quiz,
.ft { position: relative; z-index: 1; background: transparent; }
#why .why-fly-sticky { background: transparent; }

.aurora {
  position: sticky; top: 0; height: 100vh; width: 100%;
  margin-bottom: -100vh; z-index: 0;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .55s ease;
}
.aurora.on { opacity: 1; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(96px); mix-blend-mode: screen; will-change: transform;
}
.aurora i:nth-child(1) {
  width: 48vw; height: 48vw; left: -8vw; top: -10vh;
  background: radial-gradient(circle, rgba(250,255,105,0.70), transparent 68%);
  animation: aurA 23s ease-in-out infinite;
}
.aurora i:nth-child(2) {
  width: 54vw; height: 54vw; right: -12vw; bottom: -16vh;
  background: radial-gradient(circle, rgba(255,157,60,0.62), transparent 68%);
  animation: aurB 29s ease-in-out infinite;
}
.aurora i:nth-child(3) {
  width: 44vw; height: 44vw; right: 4vw; top: -8vh;
  background: radial-gradient(circle, rgba(143,224,107,0.58), transparent 70%);
  animation: aurC 26s ease-in-out infinite;
}
.aurora i:nth-child(4) {
  width: 42vw; height: 42vw; left: 8vw; bottom: -14vh;
  background: radial-gradient(circle, rgba(212,242,90,0.58), transparent 70%);
  animation: aurD 33s ease-in-out infinite;
}
@keyframes aurA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(34vw, 22vh) scale(1.28); }
  66%  { transform: translate(16vw, 46vh) scale(0.82); }
}
@keyframes aurB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-30vw, -24vh) scale(0.8); }
  66%  { transform: translate(-10vw, -50vh) scale(1.34); }
}
@keyframes aurC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-38vw, 40vh) scale(1.22); }
}
@keyframes aurD {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(34vw, -34vh) scale(0.88); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
}

/* retire the old per-section blooms — they were clipped into hard-edged
   boxes by the sticky/footer overflow. The aurora layer replaces them. */
#why .glow,
#quiz .glow,
.ft .glow,
#why::before { display: none !important; }

/* footer card carries its own dark-on-yellow ink palette (see .ft-card),
   so no dark-theme accent overrides are needed here. */

/* keep the quiz band's yellow CTA card exactly as-is (it sits on the
   new dark floor); its dark button override already reads correctly */