/* ============================================================
   iFusion Systems — site.css
   Premium Apple-style marketing layer on top of tokens.css.
   Light page rhythm punctuated by immersive near-black sections.
   ============================================================ */

:root {
  --black: #080808;          /* brief hero black */
  --black-2: #0C0F14;
  --ink-on-dark: #EFF2F7;
  --muted-on-dark: rgba(239, 242, 247, 0.62);
  --faint-on-dark: rgba(239, 242, 247, 0.40);
  --hairline-dark: rgba(255, 255, 255, 0.10);
  --glow-blue: rgba(38, 113, 247, 0.55);
  --nav-h: 64px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; }

/* Visually-hidden, still accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection { background: var(--blue-200); color: var(--dark-900); }

/* Skip to main content — first focusable element, revealed on keyboard focus */
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000;
  transform: translateY(-160%);
  padding: 10px 18px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none; box-shadow: var(--shadow-3);
  transition: transform var(--dur-base) var(--ease-swift);
}
.skip-link:focus { transform: translateY(0); color: #fff; text-decoration: none; outline: none; box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-3); }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Cut the 300ms tap delay on interactive elements (no visual change) */
a, button, .btn, [role="button"], input, select, textarea, label.check { touch-action: manipulation; }

/* Touch devices: meet the 44px minimum tap target (desktop visuals unchanged) */
@media (pointer: coarse) {
  .nav__burger { min-height: 44px; }
  .switcher button { min-height: 44px; }
  .check { min-height: 44px; }
}

/* Group "label" not tied to a single control (renders like .field label) */
.field .flabel { display: block; font-size: 13px; font-weight: 600; color: var(--fg-2); }

/* Icons: the sprite's stroke styling lives on a <g> that <use> does NOT clone,
   so apply the line-icon presentation here (inherits into every <use> instance).
   The orbital .mark sets its own fill/stroke, so it's excluded. */
svg[aria-hidden="true"]:not(.mark) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
@media (max-width: 720px) { .wrap { padding-inline: 20px; } }

.section { padding-block: 112px; position: relative; }
.section--tight { padding-block: 80px; }
@media (max-width: 720px) { .section { padding-block: 72px; } }

.section--dark {
  background: var(--black);
  color: var(--ink-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: #fff; }
.section--ink { background: var(--dark-800); color: var(--ink-on-dark); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--soft { background: var(--surface-1); }

/* Eyebrow / kicker */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 20px;
}
.section--dark .kicker { color: var(--blue-300); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { letter-spacing: -0.025em; }
.section-head .lede { margin-top: 20px; font-size: 20px; line-height: 1.5; color: var(--fg-3); text-wrap: pretty; }
.section--dark .section-head .lede { color: var(--muted-on-dark); }

.balance { text-wrap: balance; }

/* ------------------------------------------------------------
   BUTTONS — extends tokens .btn
   ------------------------------------------------------------ */
.btn { text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--xl { padding: 16px 28px; font-size: 16px; }
.btn--arrow svg { transition: transform var(--dur-base) var(--ease-swift); }
.btn--arrow:hover svg { transform: translateX(3px); }

/* Glass CTA — translucent, for dark backgrounds */
.btn--glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px -12px rgba(0,0,0,0.6);
}
.btn--glass:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.btn--glass:active { background: rgba(255,255,255,0.10); }

/* Blue CTA gets a soft halo on dark */
.section--dark .btn--blue,
.btn--halo { box-shadow: 0 10px 30px -10px var(--glow-blue); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Buttons are <a> — neutralise the global a:hover colour so labels never
   collapse into the background on hover. Keep each variant's own colour. */
a.btn, a.btn:hover, a.btn:focus, a.btn:active { color: var(--_fg); text-decoration: none; }
a.btn--outline, a.btn--outline:hover, a.btn--ghost, a.btn--ghost:hover { color: var(--_bd); }
a.btn--outline.btn--white, a.btn--outline.btn--white:hover,
a.btn--ghost.btn--white, a.btn--ghost.btn--white:hover { color: var(--fg-1); }
a.btn--glass, a.btn--glass:hover, a.btn--glass:focus, a.btn--glass:active { color: #fff; }

/* Text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 15px; color: var(--accent);
}
.tlink svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-swift); }
.tlink:hover { text-decoration: none; }
.tlink:hover svg { transform: translateX(3px); }
.section--dark .tlink { color: var(--blue-300); }

/* ------------------------------------------------------------
   NAVIGATION — frosted, fixed
   ------------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--dur-base) var(--ease-swift),
              border-color var(--dur-base) var(--ease-swift),
              backdrop-filter var(--dur-base) var(--ease-swift);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding-inline: 32px;
  display: flex; align-items: center; gap: 32px;
}
/* Logomark: inline orbital node mark, inherits currentColor */
svg.mark { display: block; height: 27px; width: auto; color: inherit; }
.nav__logo { display: flex; align-items: center; gap: 10px; height: 30px; text-decoration: none; color: #fff; }
.nav__logo:hover, .nav__logo:hover .wm { text-decoration: none; }
/* Official lockup: white version over the dark hero, dark version once the nav turns solid. */
.nav__logo-img { display: block; height: 30px; width: auto; }
.nav__logo-img--dark { display: none; }
.nav.is-solid .nav__logo-img--light { display: none; }
.nav.is-solid .nav__logo-img--dark { display: block; }
@media (max-width: 600px) { .nav__logo-img { height: 27px; } }
.nav__logo .wm { font-family: var(--font-sans); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: inherit; }
.nav.is-solid .nav__logo { color: var(--fg-1); }
.prose p + p { margin-top: 18px; }
.prose p { color: var(--fg-3); font-size: 17px; line-height: 1.62; }
.section--dark .prose p { color: var(--muted-on-dark); }
.lead-statement { font-size: clamp(24px,3vw,34px); line-height: 1.32; letter-spacing:-0.02em; font-weight: 600; color: var(--fg-1); text-wrap: balance; }
.section--dark .lead-statement { color: #fff; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav__link {
  position: relative;
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-on-dark); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-swift), background var(--dur-fast) var(--ease-swift);
  cursor: pointer;
}
.nav__link:hover { text-decoration: none; background: rgba(255,255,255,0.10); color:#fff; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__signin { font-size: 14px; font-weight: 500; color: var(--ink-on-dark); padding: 8px 12px; text-decoration: none; }
.nav__signin:hover { text-decoration: none; color: #fff; }

/* Scrolled / on-light state */
.nav.is-solid {
  background: var(--chrome-bg);
  backdrop-filter: blur(var(--chrome-blur)) saturate(var(--chrome-saturate));
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(var(--chrome-saturate));
  border-bottom-color: var(--border);
}
.nav.is-solid .nav__link, .nav.is-solid .nav__signin { color: var(--fg-2); }
.nav.is-solid .nav__link:hover { background: var(--surface-2); color: var(--fg-1); }

/* dropdown mega-menu */
.nav__item { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 460px; padding: 12px;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-swift), transform var(--dur-base) var(--ease-swift);
}
/* transparent bridge so the cursor can travel from trigger to menu without losing hover */
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__menu a {
  display: flex; gap: 12px; padding: 12px; border-radius: 10px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-swift);
}
.nav__menu a:hover { background: var(--surface-1); text-decoration: none; }
.nav__menu .mi-ico {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft);
}
.nav__menu .mi-ico svg { width: 20px; height: 20px; }
.nav__menu .mi-t { display: block; font-size: 14px; font-weight: 600; color: var(--fg-1); }
.nav__menu .mi-d { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }

.nav__burger { display: none; }

@media (max-width: 940px) {
  .nav__links, .nav__signin { display: none; }
  .nav__burger {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px; border-radius: 10px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff;
    font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  }
  .nav__burger svg { width: 18px; height: 18px; }
  .nav.is-solid .nav__burger { background: var(--surface-2); border-color: var(--border-strong); color: var(--fg-1); }
}

/* Mobile sheet */
.msheet {
  position: fixed; inset: 0; z-index: 200; background: var(--black);
  display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)) 24px;
  transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.msheet.open { transform: translateY(0); }
/* Header: official lockup left, close button right, optically aligned */
.msheet__top { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 12px; }
.msheet__brand { display: inline-flex; align-items: center; text-decoration: none; }
.msheet__brand img { display: block; height: 30px; width: auto; }
.msheet__close { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-swift); }
.msheet__close:hover, .msheet__close:active { background: rgba(255,255,255,0.16); }
/* Menu rows — clean, spacious, with a subtle chevron affordance (Apple-style) */
.msheet > a:not(.msheet__cta) {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: #fff; text-decoration: none;
  padding: 18px 4px; border-bottom: 1px solid var(--hairline-dark);
  transition: opacity var(--dur-fast) var(--ease-swift);
}
.msheet > a:not(.msheet__cta)::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 2px;
  border-right: 2px solid rgba(255,255,255,0.35); border-bottom: 2px solid rgba(255,255,255,0.35);
  transform: rotate(-45deg); transition: border-color var(--dur-fast) var(--ease-swift), transform var(--dur-fast) var(--ease-swift);
}
.msheet > a:not(.msheet__cta):active { opacity: 0.6; }
.msheet > a:not(.msheet__cta):hover::after { border-color: var(--blue-300); transform: rotate(-45deg) translate(2px, 2px); }
.msheet .msheet__cta { margin-top: auto; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .msheet { transition: none; } }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative; background: var(--black); color: var(--ink-on-dark);
  padding-top: calc(var(--nav-h) + 96px); padding-bottom: 112px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
}
.hero__glow {
  position: absolute; width: 900px; height: 900px; right: -200px; top: -300px;
  background: radial-gradient(circle, rgba(38,113,247,0.28) 0%, rgba(38,113,247,0.08) 35%, transparent 65%);
  filter: blur(20px);
}
.hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
@media (max-width: 720px){ .hero__inner { padding-inline: 20px; } }

.hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  font-size: 13px; color: var(--ink-on-dark); margin-bottom: 28px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero__pill b { color: #fff; font-weight: 600; }
.hero__pill .tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--blue-700); color: #fff;
}
.hero__pill .arr { color: var(--faint-on-dark); display: inline-flex; }

.hero h1 {
  font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 700; color: #fff; max-width: 16ch; text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(100deg, #fff 0%, #BFD4FF 55%, var(--blue-400) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin-top: 28px; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5;
  color: var(--muted-on-dark); max-width: 56ch; text-wrap: pretty;
}
.hero__cta { margin-top: 40px; }

/* Stats bar */
.statbar {
  margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--hairline-dark);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.statbar .stat .num {
  font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.03em;
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.statbar .stat .suffix { color: var(--blue-400); }
.statbar .stat .lbl { margin-top: 12px; font-size: 14px; color: var(--muted-on-dark); }
@media (max-width: 720px){ .statbar { grid-template-columns: 1fr; gap: 28px; } }

/* ------------------------------------------------------------
   SPOTLIGHT CARDS (adapted GlowCard — iFusion blue)
   ------------------------------------------------------------ */
.glow-grid { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px){ .cols-3, .cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.spot {
  position: relative; border-radius: 20px; padding: 28px;
  background: var(--surface-0); border: 1px solid var(--border);
  overflow: hidden; isolation: isolate;
  transition: transform var(--dur-base) var(--ease-swift), box-shadow var(--dur-base) var(--ease-swift), border-color var(--dur-base) var(--ease-swift);
}
.spot::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 0%),
    rgba(38,113,247,0.16), transparent 70%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-swift);
}
.spot::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px;
  background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 0%),
    rgba(38,113,247,0.65), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-swift); pointer-events: none;
}
.spot:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* dark spotlight variant */
.section--dark .spot, .spot--dark {
  background: rgba(255,255,255,0.025); border-color: var(--hairline-dark); color: var(--ink-on-dark);
}
.spot--dark::before { background: radial-gradient(220px 220px at var(--mx,50%) var(--my,0%), rgba(38,113,247,0.28), transparent 70%); }

.spot .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 20px;
}
.spot--dark .ico, .section--dark .spot .ico { background: rgba(38,113,247,0.14); color: var(--blue-300); }
.spot .ico svg { width: 24px; height: 24px; }
.spot h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 10px; }
.spot--dark h3, .section--dark .spot h3 { color: #fff; }
.spot p { font-size: 15px; line-height: 1.55; color: var(--fg-3); }
.spot--dark p, .section--dark .spot p { color: var(--muted-on-dark); }
.spot .spot-foot { margin-top: 20px; }

/* ------------------------------------------------------------
   AUDIENCE / SOLUTION cards (3-up, taller)
   ------------------------------------------------------------ */
.aud { display: flex; flex-direction: column; min-height: 300px; }
.aud .ico { margin-bottom: auto; }
.aud h3 { margin-top: 24px; }

/* ------------------------------------------------------------
   PRODUCT SHOWCASE (spatial, orbit rings + device switcher)
   ------------------------------------------------------------ */
.showcase { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 940px){ .showcase { grid-template-columns: 1fr; gap: 40px; } }

.stage {
  position: relative; aspect-ratio: 1/1; display: grid; place-items: center;
  border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #141B25 0%, #080808 70%);
  border: 1px solid var(--hairline-dark);
}
.stage__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.10); }
.stage__ring.r1 { inset: 8%; animation: spin 60s linear infinite; }
.stage__ring.r2 { inset: 20%; border-style: solid; border-color: rgba(255,255,255,0.06); animation: spin 90s linear infinite reverse; }
.stage__halo {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(38,113,247,0.35), transparent 60%); filter: blur(30px);
  animation: pulse 5s var(--ease-swift) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }

.stage__device { position: relative; z-index: 2; width: 56%; }
/* Real product renders sitting on the orbital stage */
.stage__device img { width: 100%; height: auto; display: block; border-radius: 28px; filter: drop-shadow(0 40px 80px rgba(0,0,0,0.55)); }
.stage__label {
  position: absolute; z-index: 3; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted-on-dark);
  background: rgba(8,8,8,0.7); border: 1px solid var(--hairline-dark);
  backdrop-filter: blur(8px);
}
.stage__label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-500); box-shadow: 0 0 8px var(--success-500); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

.switcher { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); margin-bottom: 28px; flex-wrap: wrap; }
.section--dark .switcher { background: rgba(255,255,255,0.06); border: 1px solid var(--hairline-dark); }
.switcher button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--fg-3); transition: all var(--dur-base) var(--ease-swift);
}
.section--dark .switcher button { color: var(--muted-on-dark); }
.switcher button.active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px -4px var(--glow-blue); }

.spec-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline-dark); }
.spec-row:last-child { border-bottom: 0; }
.spec-row svg { width: 18px; height: 18px; color: var(--blue-300); flex: none; }
.spec-row span { font-size: 15px; color: var(--ink-on-dark); }

/* ------------------------------------------------------------
   CSS DEVICE MOCKUPS (placeholders for real renders)
   ------------------------------------------------------------ */
.dev { position: relative; }
.dev-screen {
  border-radius: 18px; background: linear-gradient(160deg, #1b2230, #0d1118);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 14px;
}
.dev-glass {
  border-radius: 10px; aspect-ratio: 4/3; position: relative; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 0%, #15233f 0%, #0a1322 60%, #060a12 100%);
  display: grid; place-items: center;
}
.dev-glass .rd {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--blue-400); box-shadow: 0 0 24px var(--glow-blue), inset 0 0 12px rgba(38,113,247,0.4);
  display: grid; place-items: center; color: #fff;
}
.dev-glass .rd svg { width: 28px; height: 28px; }
.dev-fare { position: absolute; top: 14px; left: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--blue-200); }
.dev-ok { position: absolute; bottom: 14px; right: 16px; font-size: 11px; color: var(--success-500); font-weight:600; }

/* ------------------------------------------------------------
   MERLIN node network band
   ------------------------------------------------------------ */
.merlin { position: relative; overflow: hidden; }
.merlin canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.9; }
.merlin .wrap { position: relative; z-index: 2; }
.merlin__halo {
  position: absolute; z-index: 1; width: 760px; height: 760px; left: 50%; top: 40%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(38,113,247,0.18), transparent 60%); filter: blur(30px); pointer-events: none;
}

/* The Observe/Reason/Act triad */
.triad { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; counter-reset: step; }
@media (max-width: 760px){ .triad { grid-template-columns: 1fr; } }
.triad .step .n {
  font-family: var(--font-mono); font-size: 13px; color: var(--blue-300);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.triad .step .n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-400); box-shadow: 0 0 10px var(--glow-blue); }

/* ------------------------------------------------------------
   METRICS strip
   ------------------------------------------------------------ */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
@media (max-width: 760px){ .metrics { grid-template-columns: repeat(2,1fr); gap: 36px 24px; } }
.metric .num { font-size: clamp(40px, 4.6vw, 56px); font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.metric .num .suffix { color: var(--blue-400); }
.metric .lbl { margin-top: 14px; font-size: 14px; color: var(--muted-on-dark); }

/* ------------------------------------------------------------
   LOGO STRIP
   ------------------------------------------------------------ */
.logostrip { display: flex; flex-wrap: wrap; gap: 12px 56px; align-items: center; justify-content: center; }
.logostrip .lg { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; color: var(--faint-on-dark); }

/* Partner logo strip — uniform white treatment on the dark band.
   Needs transparent-background logos (SVG preferred). */
.partners { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: center; justify-content: center; }
.partners li { display: flex; }
.partners .plogo {
  display: block; height: 30px; width: auto; max-width: 160px; object-fit: contain;
  filter: brightness(0) invert(1);     /* render any logo as solid white */
  opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease-swift);
}
.partners .plogo:hover { opacity: 1; }
@media (max-width: 600px) { .partners { gap: 22px 36px; } .partners .plogo { height: 26px; } }

/* ------------------------------------------------------------
   TESTIMONIAL
   ------------------------------------------------------------ */
.quote { max-width: 880px; margin-inline: auto; text-align: center; }
.quote blockquote {
  font-size: clamp(24px, 3vw, 34px); line-height: 1.3; letter-spacing: -0.02em;
  font-weight: 500; color: var(--fg-1); margin: 0; text-wrap: balance;
}
.section--dark .quote blockquote { color: #fff; }
.quote .by { margin-top: 32px; display: inline-flex; align-items: center; gap: 14px; }
.quote .av { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-weight: 700; color: var(--fg-1); }
.section--dark .quote .av { background: rgba(255,255,255,0.1); color: #fff; }
.quote .who { text-align: left; font-size: 14px; }
.quote .who b { display: block; color: var(--fg-1); }
.section--dark .quote .who b { color: #fff; }
.quote .who span { color: var(--fg-4); }
.section--dark .quote .who span { color: var(--muted-on-dark); }
.ph-note { font-size: 11px; color: var(--fg-5); font-style: italic; }

/* ------------------------------------------------------------
   CTA BAND
   ------------------------------------------------------------ */
.ctaband {
  position: relative; overflow: hidden;
  background: var(--black); border-radius: 28px; padding: 80px 48px; text-align: center;
}
.ctaband .hero__glow { right: 50%; top: -40%; transform: translateX(50%); }
.ctaband > * { position: relative; z-index: 2; }
.ctaband h2 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.03em; color: #fff; max-width: 18ch; margin-inline: auto; }
.ctaband p { margin-top: 20px; font-size: 19px; color: var(--muted-on-dark); max-width: 48ch; margin-inline: auto; }
.ctaband .cta-row { justify-content: center; margin-top: 36px; }
@media (max-width:720px){ .ctaband { padding: 56px 24px; border-radius: 20px; } }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.foot { background: var(--black); color: var(--muted-on-dark); padding: 72px 0 40px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 48px; }
@media (max-width: 940px){ .foot__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }
.foot__brand .lock { display: flex; align-items: center; color: #fff; }
.foot__brand .lock .foot__logo { display: block; height: 36px; width: auto; }
.foot__brand p { margin-top: 18px; font-size: 13.5px; color: var(--muted-on-dark); max-width: 30ch; line-height: 1.6; }
.foot__brand .contact { margin-top: 20px; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.foot__brand .contact a { color: var(--ink-on-dark); }
.foot__col h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot__col a { font-size: 13.5px; color: var(--muted-on-dark); text-decoration: none; }
.foot__col a:hover { color: #fff; text-decoration: none; }
.foot__bar { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hairline-dark); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-on-dark); }
.foot__bar a { color: var(--muted-on-dark); }
.foot__bar a:hover { color: #fff; }

/* ------------------------------------------------------------
   FORMS (contact)
   ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.field label .req { color: var(--danger-500); }
.field .input, .field textarea, .field select { font-family: var(--font-sans); }
.field textarea { min-height: 130px; resize: vertical; padding: 12px 14px; border:1px solid var(--border); border-radius: 8px; background: var(--surface-0); color: var(--fg-1); }
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px){ .grid-2 { grid-template-columns: 1fr; } }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; transition: all var(--dur-fast) var(--ease-swift); }
.check input { accent-color: var(--accent); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--blue-700); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--fg-3); }
.consent input { margin-top: 3px; accent-color: var(--accent); }

/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: 0.08s; }
.reveal[data-d="2"]{ transition-delay: 0.16s; }
.reveal[data-d="3"]{ transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1; transform: none; transition: none; }
  .stage__ring, .stage__halo, .stage__label .dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* breadcrumb */
.crumb { display:flex; gap:8px; align-items:center; font-size:13px; color: var(--muted-on-dark); margin-bottom: 22px; }
.crumb a { color: var(--muted-on-dark); }
.crumb a:hover { color:#fff; }
.crumb span { color: var(--muted-on-dark); }

/* generic prose two-col split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 880px){ .split { grid-template-columns: 1fr; gap: 32px; } }
.split--center { align-items: center; }

/* spec table */
.spectable { width: 100%; border-collapse: collapse; }
.spectable td { padding: 16px 0; border-bottom: 1px solid var(--hairline-dark); font-size: 15px; vertical-align: top; }
.spectable td:first-child { color: var(--muted-on-dark); width: 38%; padding-right: 24px; }
.spectable td:last-child { color: #fff; }

/* pill list */
.taglist { display: flex; flex-wrap: wrap; gap: 10px; }
.taglist .badge { padding: 7px 14px; font-size: 13px; }

/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */
h1, h2, h3, h4 { overflow-wrap: break-word; }

@media (max-width: 1024px) {
  .nav__menu { min-width: 400px; }
  .showcase { gap: 48px; }
}

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

@media (max-width: 768px) {
  h2 { font-size: 34px; line-height: 1.14; letter-spacing: -0.02em; }
  h3 { font-size: 24px; }
  /* subsection heads that opt into the H3 token shrink too */
  .section h2[style*="--t-h3"] { font-size: 28px !important; }
  .section { padding-block: 72px; }
  .section--tight { padding-block: 56px; }
  .section-head { margin-bottom: 40px; }
  .section-head .lede, .lede { font-size: 18px; line-height: 1.5; }
  .split { gap: 32px; }
  .hero { padding-bottom: 80px; }
  .statbar { margin-top: 56px; }
  .ctaband { padding: 56px 28px; }
  .triad { gap: 28px; }
}

@media (max-width: 600px) {
  .wrap { padding-inline: 20px; }
  .nav__inner { padding-inline: 20px; }
  /* primary CTA lives in the mobile sheet; keep the bar clean */
  .nav__actions { display: none; }
  .nav__burger { margin-left: auto; }
  .hero { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 64px; }
  .hero h1 { letter-spacing: -0.03em; }
  .hero__pill { font-size: 12px; }
  .statbar { grid-template-columns: 1fr; gap: 26px; padding-top: 32px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* full-width, stacked CTAs read better on phones */
  .cta-row .btn { width: 100%; justify-content: center; }
  .hero__cta.cta-row { flex-direction: column; align-items: stretch; }
  .switcher { width: 100%; justify-content: center; }
  .quote blockquote { font-size: 24px; }
}

@media (max-width: 420px) {
  h2 { font-size: 28px; }
  .section h2[style*="--t-h3"] { font-size: 24px !important; }
  .foot__grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
}

/* ============================================================
   LEGAL / POLICY PAGES — privacy, terms, cookies
   ============================================================ */
.legal { padding-block: 88px; }
.legal__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .legal__grid { grid-template-columns: 1fr; gap: 36px; } }

/* sticky table of contents */
.legal__toc { position: sticky; top: calc(var(--nav-h) + 28px); }
@media (max-width: 900px) { .legal__toc { position: static; } }
.legal__toc-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 16px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal__toc li { counter-increment: toc; margin: 0; }
.legal__toc a {
  display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.4;
  color: var(--fg-3); border-left: 2px solid transparent; padding-left: 14px; margin-left: -16px;
  transition: color var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift);
}
.legal__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--fg-5); font-variant-numeric: tabular-nums; font-weight: 600; }
.legal__toc a:hover { color: var(--fg-1); text-decoration: none; border-left-color: var(--border-strong); }
.legal__toc a.is-active { color: var(--accent); border-left-color: var(--accent); }

/* document body */
.legal__doc { max-width: 70ch; }
.legal__doc > section { padding-top: 16px; }
.legal__doc > section + section { margin-top: 52px; padding-top: 52px; border-top: 1px solid var(--divider); }
.legal__doc h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: var(--t-h4); line-height: 1.15; letter-spacing: -0.02em; color: var(--fg-1); margin-bottom: 20px; scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legal__doc h2 .legal__num { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }
.legal__doc h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-1); margin: 32px 0 12px; }
.legal__doc p { font-size: 16.5px; line-height: 1.68; color: var(--fg-3); }
.legal__doc p + p { margin-top: 16px; }
.legal__doc ul, .legal__doc ol.legal__list { margin: 16px 0 0; padding-left: 0; list-style: none; }
.legal__doc li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.62; color: var(--fg-3); margin-top: 11px; }
.legal__doc ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal__doc ol.legal__list { counter-reset: ll; }
.legal__doc ol.legal__list > li { counter-increment: ll; }
.legal__doc ol.legal__list > li::before { content: counter(ll) "."; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.legal__doc li strong, .legal__doc p strong { color: var(--fg-1); }
.legal__doc a { font-weight: 500; }

/* definition / contact callout */
.legal__card {
  margin-top: 22px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--surface-1);
}
.legal__card p { font-size: 15.5px; }
.legal__card .legal__card-h { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 10px; }

/* simple data table */
.legal__table { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; }
.legal__table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal__table th { background: var(--surface-1); text-align: left; padding: 13px 16px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-4); font-weight: 600; border-bottom: 1px solid var(--border); }
.legal__table td { padding: 13px 16px; border-bottom: 1px solid var(--divider); color: var(--fg-3); line-height: 1.5; vertical-align: top; }
.legal__table tr:last-child td { border-bottom: 0; }
.legal__table td:first-child { color: var(--fg-1); font-weight: 500; white-space: nowrap; }
@media (max-width: 560px) { .legal__table td:first-child { white-space: normal; } }

/* meta line under hero h1 */
.legal__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 14px; color: var(--muted-on-dark); }
.legal__meta b { color: #fff; font-weight: 600; }

/* ============================================================
   3D SCROLL HERO SCENE  (.scene)
   Base styles = static stacked layout (no-JS / reduced-motion
   fallback, fully SEO-readable). JS adds .is-3d to upgrade it
   to the sticky scroll-driven 3D experience on capable desktops.
   ============================================================ */
.scene { position: relative; background: #050508; color: var(--ink-on-dark); transition: background-color 0.5s linear; }
.scene__sticky { position: relative; padding: calc(var(--nav-h) + 64px) 0 88px; }
.scene__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene__grid {
  position: absolute; inset: -10% 0;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 20%, transparent 80%);
}
.scene__glow {
  position: absolute; width: min(1000px, 120vw); height: min(900px, 110vh);
  left: 50%; top: 42%; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(60px);
  background: radial-gradient(circle, rgba(38,113,247,0.22) 0%, rgba(38,113,247,0.04) 50%, transparent 70%);
}

/* hero copy */
.scene__copy { position: relative; z-index: 3; max-width: 1000px; margin: 0 auto; padding-inline: 32px; text-align: center; }
.scene__copy h1 { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; color: #fff; max-width: 18ch; margin: 22px auto 0; text-wrap: balance; }
.scene__copy .grad { background: linear-gradient(100deg, #fff 0%, #BFD4FF 55%, var(--blue-400) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scene__copy .hero__sub { margin-left: auto; margin-right: auto; }
.scene__copy .cta-row { justify-content: center; margin-top: 34px; }
.scene__copy .statbar { max-width: 760px; margin-inline: auto; }
@media (max-width: 600px) { .scene__copy .hero__cta.cta-row { flex-direction: column; align-items: stretch; } .scene__copy .hero__cta .btn { width: 100%; justify-content: center; } }

/* product stage — STATIC default: a responsive grid of product cards */
.scene__stage { position: relative; z-index: 2; max-width: 1120px; margin: 64px auto 0; padding-inline: 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 32px; align-items: start; }
/* The finale is its own full-width block within the static product grid (not a column),
   and its cards must be allowed to shrink so nothing forces horizontal overflow on mobile. */
.scene__stage > .finale { grid-column: 1 / -1; min-width: 0; }
.finale__grid, .vcard { min-width: 0; }
.scene__rings { display: none; }
.prod { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.prod__card { position: relative; width: 100%; border: 1px solid rgba(255,255,255,0.1); border-radius: 32px;
  background: rgba(255,255,255,0.02); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7); overflow: hidden; padding: 5px; }
.prod__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(38,113,247,0.10), transparent 60%); opacity: 0.8; }
.prod__card--red::after  { background: linear-gradient(135deg, rgba(239,68,68,0.10), transparent 60%); }
.prod__card--green::after{ background: linear-gradient(135deg, rgba(16,185,129,0.10), transparent 60%); }
.prod__card img { width: 100%; height: auto; display: block; border-radius: 27px; }
.prod figcaption { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-on-dark); font-weight: 600; }

/* finale */
.finale { position: relative; z-index: 2; max-width: 1000px; margin: 72px auto 0; padding-inline: 24px; }
.finale__head { text-align: center; max-width: 640px; margin: 0 auto 8px; }
.finale__head h2 { font-size: clamp(26px, 4vw, 46px); color: #fff; letter-spacing: -0.02em; }
.finale__head p { margin-top: 10px; color: var(--muted-on-dark); font-size: 14px; line-height: 1.5; }
.finale__wizard { position: relative; width: min(420px, 100%); height: 170px; margin: 12px auto 28px; display: flex; align-items: center; justify-content: center; }
.wizard { position: relative; z-index: 2; display: block; width: 130px; height: 130px; animation: floaty 4s ease-in-out infinite; }
.wizard img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 30px rgba(129,140,248,0.5)); display: block; }
/* Glow sits on the star at the wand tip — anchored as a % of the image so it stays aligned at any size. */
.wizard__tip { position: absolute; z-index: 3; left: 78.9%; top: 17%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 24px rgba(129,140,248,1); animation: tip 1.6s ease-in-out infinite; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }

.finale__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto; }
.vcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; padding: 20px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 50px -24px rgba(0,0,0,0.6);
  transition: transform var(--dur-base) var(--ease-swift), border-color var(--dur-base) var(--ease-swift), background var(--dur-base) var(--ease-swift); }
.vcard:hover { transform: translateY(-3px); background: rgba(255,255,255,0.025); }
.vcard--bus:hover   { border-color: rgba(59,130,246,0.30); }
.vcard--tram:hover  { border-color: rgba(239,68,68,0.30); }
.vcard--train:hover { border-color: rgba(16,185,129,0.30); }
.vcard--taxi:hover  { border-color: rgba(234,179,8,0.30); }
.vcard__img { width: 84px; height: 84px; margin-bottom: 12px; }
.vcard__img img { width: 100%; height: 100%; object-fit: contain; }
.vcard h3 { font-size: 15px; color: #fff; margin-bottom: 6px; }
.vcard p { font-size: 11.5px; line-height: 1.5; color: var(--muted-on-dark); margin-bottom: 14px; }
.vcard__hud { width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; }
.vcard__hud > div { display: flex; justify-content: space-between; gap: 8px; }
.vcard__hud dt { color: var(--muted-on-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.vcard__hud dd { margin: 0; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.vcard__hud dd.ok { color: var(--success-500); font-weight: 600; }
@media (max-width: 760px) { .finale__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .finale__grid { grid-template-columns: minmax(0, 1fr); } }

/* HUD label + scroll cue (only meaningful in 3D mode) */
.scene__hud { display: none; }
.scene__label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-300); }
.scene__label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-500); box-shadow: 0 0 8px var(--success-500); animation: blink 2s infinite; }
.scene__cue { width: 22px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: center; padding-top: 6px; }
.scene__cue span { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-400); animation: cue 1.5s ease-in-out infinite; }

@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes tip { 0%, 100% { opacity: 0.7; box-shadow: 0 0 8px #fff, 0 0 16px rgba(129,140,248,0.9); } 50% { opacity: 1; box-shadow: 0 0 16px #fff, 0 0 30px rgba(129,140,248,1); } }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } }

/* ---------- 3D MODE — capable desktops with motion allowed.
   Driven by a media query (NOT a JS-added class) so the 500vh layout is in place
   at first paint. This prevents the large layout shift (CLS) that occurred when
   JS changed the height after load. JS only adds the scroll-driven transforms. ---------- */
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .scene { height: 500vh; }
  .scene__sticky { position: sticky; top: 0; height: 100vh; min-height: 600px; padding: 0; overflow: hidden; }
  .scene__grid { will-change: transform; }
  .scene__glow { will-change: transform, opacity; }
  .scene__copy { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; padding-top: calc(var(--nav-h) + 56px); will-change: transform, opacity; }
  .scene__stage { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; perspective: 1500px; pointer-events: none; }
  .scene__rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .scene__rings .ring { position: absolute; border-radius: 50%; }
  .ring.r1 { width: 600px; height: 550px; border: 1px dashed rgba(255,255,255,0.06); animation: spin 120s linear infinite; }
  .ring.r2 { width: 450px; height: 400px; border: 1px solid rgba(255,255,255,0.05); animation: spin 80s linear infinite reverse; }
  .prod { position: absolute; inset: 0; margin: auto; opacity: 0; transform-style: preserve-3d; will-change: transform, opacity; }
  .prod--x { width: min(500px, 86vw); height: min(400px, 56vh); }
  .prod--p { width: min(360px, 70vw); height: min(500px, 66vh); }
  .prod--t { width: min(420px, 78vw); height: min(420px, 58vh); }
  .prod__card { width: 100%; height: 100%; border-radius: 48px; padding: 4px; }
  .prod__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 44px; }
  .prod figcaption { display: none; }
  .finale { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; will-change: transform, opacity; }
  .finale__grid { width: 100%; }
  .scene__hud { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .scene__tubes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard, .scene__label .dot, .scene__cue span, .scene__rings .ring { animation: none; }
}

/* ============================================================
   TUBES CURSOR hero background (Merlin) — self-hosted WebGL,
   lazy-loaded; skipped for reduced-motion.
   ============================================================ */
.hero--tubes { background: #050509; }
.tubes-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero--tubes .hero__glow { display: none; }
/* Edge vignette over the tubes so the headline stays legible (centre stays clear) */
.hero--tubes .hero__bg { background: radial-gradient(120% 85% at 50% 42%, transparent 28%, rgba(5,5,9,0.62) 100%); }
.hero--tubes .hero__inner { position: relative; z-index: 2; text-shadow: 0 2px 30px rgba(0,0,0,0.65); }
.hero--tubes .hero__inner .btn { text-shadow: none; }

/* ============================================================
   DARK-SURFACE TEXT LEGIBILITY (global)
   .section--ink is a dark background just like .section--dark, so it
   must share the same light text treatment. This closes the gap where
   ledes/paragraphs on ink sections rendered dark-grey-on-dark.
   ============================================================ */
.section--ink .kicker { color: var(--blue-300); }
.section--ink .section-head .lede,
.section--ink .lede,
.section--dark .lede { color: var(--muted-on-dark); }
.section--ink p,
.section--ink .prose p { color: var(--muted-on-dark); }
.section--ink .tlink { color: var(--blue-300); }
.section--ink strong, .section--ink b { color: #fff; }
/* Inline-styled body text that points at a light-mode token would be invisible on ink;
   force legibility for plain paragraphs that carry no explicit colour of their own. */
.section--ink p:not([style*="color"]) { color: var(--muted-on-dark); }

/* Scroll-reactive tubes background for the homepage scene (3D mode only).
   Colour + fade are driven by scroll progress in site.js; behind the products. */
.scene__tubes { display: none; }
/* (shown via the 3D-mode media query above) */