/* ============================================================================
   JDX MARKETS, Global Stylesheet
   "The JDX Protocol" · Master the unseen liquidity.
   Aesthetic: private-bank luxury × institutional trading terminal.
   Obsidian + champagne gold · Fraunces / Hanken Grotesk / JetBrains Mono
   Vanilla CSS · custom properties · heavy kinetic motion system
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. Design Tokens
---------------------------------------------------------------------------- */
:root {
  /* Obsidian scale */
  --obsidian: #050506;
  --ink-900: #08080a;
  --ink-800: #0c0c10;
  --ink-700: #121217;
  --ink-600: #1a1a21;
  --ink-500: #24242d;

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --line-gold: rgba(233, 196, 106, 0.22);

  /* Champagne gold, the brand accent */
  --gold: #e9c46a;
  --gold-bright: #f4d585;
  --gold-deep: #c79a3a;
  --gold-glow: rgba(233, 196, 106, 0.5);

  /* Restrained secondary highlights */
  --platinum: #e8eef2;
  --ice: #9fd6e0;          /* used only for "LIVE"/data glints */
  --emerald: #34d399;      /* P&L up */
  --rose: #fb7185;         /* P&L down */

  /* Text, warm white luxury (tuned for WCAG-AA contrast on obsidian) */
  --text: #f6f3ec;
  --text-soft: #d6d1c5;
  --text-muted: #aaa392;
  --text-faint: #7b7567;

  /* Glass */
  --glass: rgba(14, 14, 18, 0.55);
  --glass-strong: rgba(10, 10, 13, 0.82);

  /* Shadows / glows */
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.6);
  --glow-gold: 0 0 30px rgba(233, 196, 106, 0.35);

  /* Typography */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Motion (per bencium MOTION-SPEC) */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spatial scale (4px base) */
  --container: 1280px;

  /* Z-index
     The nav sits ABOVE the full-screen menu on purpose: the burger turns into
     the close button, so it has to stay clickable while the menu is open. */
  --z-bg: -10;
  --z-grain: 1;
  --z-menu: 68;
  --z-nav: 72;
  --z-cursor: 200;
  --z-loader: 300;
}

/* ----------------------------------------------------------------------------
   1. Reset & Base
---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background-color: var(--obsidian);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; height: 100vh; }

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
ul { list-style: none; }

::selection { background: var(--gold); color: #1a1303; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-deep), #6e5520);
  border-radius: 6px;
  border: 2px solid var(--obsidian);
}

/* ----------------------------------------------------------------------------
   2. Atmospheric background layers
---------------------------------------------------------------------------- */
#webgl-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-bg);
  pointer-events: none;
}

/* Layered gradient mesh + vignette beneath the particles */
.bg-atmos {
  position: fixed;
  inset: 0;
  z-index: -11;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(233, 196, 106, 0.10), transparent 70%),
    radial-gradient(50% 45% at 85% 110%, rgba(159, 214, 224, 0.05), transparent 70%),
    radial-gradient(45% 40% at 10% 90%, rgba(233, 196, 106, 0.05), transparent 70%),
    var(--obsidian);
}
.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: -9;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 100% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.72) 100%);
}

/* Film grain overlay (premium tactile texture) */
.grain {
  position: fixed;
  inset: -200%;
  width: 500%;
  height: 500%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-8%, 4%); }
  40% { transform: translate(4%, -10%); }
  60% { transform: translate(-6%, 6%); }
  80% { transform: translate(8%, -4%); }
  100% { transform: translate(0, 0); }
}

/* Reusable CSS grid backdrop */
.grid-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 25%, transparent 78%);
}

/* ----------------------------------------------------------------------------
   3. Preloader
---------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--obsidian);
  display: grid;
  place-items: center;
  transition: opacity 0.8s var(--ease-lux), visibility 0.8s var(--ease-lux);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; width: min(360px, 76vw); }
.loader__mark { width: 60px; height: 60px; margin: 0 auto 26px; }
.loader__name {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 0.5em;
}
.loader__bar {
  margin-top: 22px;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-radius: 2px;
}
.loader__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 12px var(--gold-glow);
}
.loader__pct {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
}

/* ----------------------------------------------------------------------------
   4. Layout primitives & typography
---------------------------------------------------------------------------- */
#smooth-content { will-change: transform; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section { position: relative; padding-block: clamp(84px, 12vw, 168px); }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-size: clamp(2.3rem, 5.2vw, 4.4rem);
}
.section-lead {
  max-width: 62ch;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.7;
}

.text-gold { color: var(--gold); }
.text-italic { font-style: italic; }
.text-gradient {
  background: linear-gradient(105deg, var(--text) 0%, var(--gold-bright) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mono { font-family: var(--font-mono); }
.up { color: var(--emerald); }
.down { color: var(--rose); }

.stack-head { max-width: 64ch; }
.stack-head.center { margin-inline: auto; text-align: center; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-s { margin-top: 18px; }
.mt-m { margin-top: 30px; }
.mt-l { margin-top: 52px; }

/* ----------------------------------------------------------------------------
   5. Surfaces
---------------------------------------------------------------------------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
          backdrop-filter: blur(20px) saturate(125%);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.glass-strong {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
          backdrop-filter: blur(26px) saturate(135%);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
}
.panel {
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  border: 1px solid var(--line);
  border-radius: 20px;
}

/* Gold top-edge accent used on premium cards */
.edge-gold { position: relative; }
.edge-gold::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

/* ----------------------------------------------------------------------------
   6. Buttons (magnetic)
---------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux),
    background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
  will-change: transform;
  overflow: hidden;
  min-height: 48px;
}
.btn svg { width: 18px; height: 18px; }
.btn__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }

.btn--gold {
  background: linear-gradient(120deg, var(--gold-bright), var(--gold-deep));
  color: #1a1303;
  box-shadow: 0 10px 34px rgba(233, 196, 106, 0.26);
}
.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #fff, transparent 40%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.btn--gold:hover { box-shadow: 0 14px 50px rgba(233, 196, 106, 0.5); }
.btn--gold:hover::after { opacity: 0.25; }

.btn--ghost {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-strong);
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(233, 196, 106, 0.08); border-color: var(--gold); color: var(--gold-bright); }

.btn--outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
}
.btn--outline:hover { background: var(--gold); color: #1a1303; }

.btn--block { width: 100%; }
.btn--lg { padding: 18px 38px; font-size: 1rem; }

.magnetic { display: inline-block; }

/* underline filament link */
.link-line {
  position: relative;
  color: var(--text-soft);
  transition: color 0.3s var(--ease-lux);
}
.link-line::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-lux);
}
.link-line:hover { color: var(--gold-bright); }
.link-line:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------------------------
   8. Navigation, high-contrast floating glass pill
---------------------------------------------------------------------------- */
#navbar {
  position: fixed;
  top: clamp(14px, 2vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: min(var(--container), calc(100% - 32px));
  transition: top 0.5s var(--ease-lux);
}
.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 16px 16px 24px;
  border-radius: 100px;
  background: rgba(8, 8, 10, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
          backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: padding 0.5s var(--ease-lux), border-color 0.5s var(--ease-lux), background 0.5s var(--ease-lux);
}
#navbar.is-scrolled .nav-shell {
  padding-block: 9px;
  border-color: var(--line-gold);
  background: rgba(6, 6, 8, 0.86);
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand:hover .brand__mark { filter: drop-shadow(0 0 9px var(--gold-glow)); }
/* Image-based brand (JDX logo mark + wordmark).
   The logo art has the rising candles/arrow above the "JDX" letters, so we lift
   the whole mark up a few px and pull the wordmark in tight so the "JDX" in the
   logo sits on the same line as the "JDX MARKETS" wordmark beside it. */
.brand { gap: 6px; }
.brand__logo { height: 58px; width: auto; flex-shrink: 0; display: block; transform: translateY(-5px); }
.brand__wordmark { height: 28px; width: auto; display: block; }
.brand:hover .brand__logo { filter: drop-shadow(0 0 10px var(--gold-glow)); }
.loader__logo { height: 92px; width: auto; margin: 0 auto 14px; display: block; }
.loader__wordmark { height: 34px; width: auto; margin: 0 auto 26px; display: block; }
@media (max-width: 760px) {
  .brand__logo { height: 48px; }
  .brand__wordmark { height: 22px; }
}
@media (max-width: 430px) {
  .brand__wordmark { display: none; }
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
}
.brand__name b { color: var(--gold); font-weight: 600; }
.brand__name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 500;
}

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  position: relative;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-soft);
  padding: 9px 16px;
  border-radius: 100px;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-lux);
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--gold-bright); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-signin { font-size: 0.86rem; font-weight: 500; color: var(--text-soft); transition: color 0.3s var(--ease-out); padding: 8px 6px; }
.nav-signin:hover { color: var(--gold-bright); }
.nav-actions .btn { padding: 11px 22px; min-height: 0; font-size: 0.85rem; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.4s var(--ease-lux), opacity 0.3s var(--ease-out); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile/tablet: collapse to logo + Get Access + burger. Burger never shows on desktop. */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-actions .nav-signin { display: none; }
  .nav-actions .btn { display: inline-flex; }
  .nav-toggle { display: flex; }
}
@media (max-width: 420px) {
  .brand__name small { display: none; }
  .nav-actions .btn { padding: 10px 16px; font-size: 0.8rem; }
  .nav-shell { padding: 10px 10px 10px 16px; gap: 12px; }
}

/* Full-screen menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(5, 5, 6, 0.96);
  -webkit-backdrop-filter: blur(28px);
          backdrop-filter: blur(28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Clear the floating nav pill at the top and the home indicator at the
     bottom, and scroll rather than clip if the list ever outgrows the screen. */
  padding: clamp(96px, 16vh, 140px) 24px calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-lux), visibility 0.5s var(--ease-lux);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 3.2rem);
  font-weight: 500;
  color: var(--text-soft);
  padding: 10px 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition: color 0.3s var(--ease-out);
}
.mobile-menu.is-open a { animation: menuIn 0.6s var(--ease-lux) forwards; }
.mobile-menu.is-open a:nth-child(1) { animation-delay: 0.08s; }
.mobile-menu.is-open a:nth-child(2) { animation-delay: 0.14s; }
.mobile-menu.is-open a:nth-child(3) { animation-delay: 0.2s; }
.mobile-menu.is-open a:nth-child(4) { animation-delay: 0.26s; }
.mobile-menu.is-open a:nth-child(5) { animation-delay: 0.32s; }
.mobile-menu.is-open a:nth-child(6) { animation-delay: 0.38s; }
.mobile-menu a:hover { color: var(--gold-bright); }
@keyframes menuIn { to { opacity: 1; transform: translateY(0); } }

/* ----------------------------------------------------------------------------
   9. Hero
---------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 20px 90px;
  overflow: hidden;
}
/* Soft radial veil behind hero copy so expanding particles never wash out the text */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 54% at 50% 46%,
    rgba(5, 5, 6, 0.86) 0%, rgba(5, 5, 6, 0.62) 38%, rgba(5, 5, 6, 0.25) 58%, transparent 72%);
}
/* lift all hero content above the veil (and the particle canvas) */
.hero > :not(.grid-backdrop):not(.hero__veil) { position: relative; z-index: 2; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 100px;
  border: 1px solid var(--line-gold);
  background: rgba(233, 196, 106, 0.05);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__tag .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }

.hero__headline {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.96;
  font-size: clamp(2.9rem, 10.5vw, 9rem);
  letter-spacing: -0.03em;
}
/* Solid gold (not gradient) so it stays visible when split into inline-block chars */
.hero__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-bright);
  text-shadow: 0 0 44px rgba(233, 196, 106, 0.4);
}
.hero__headline .line { display: block; overflow: hidden; }
.hero__headline .word { display: inline-block; white-space: nowrap; }
.hero__headline .char { display: inline-block; will-change: transform, opacity; }
@media (max-width: 600px) { .hero__headline { font-size: clamp(2.6rem, 13vw, 4rem); } }
/* keep hero copy crisp over the particle field */
.hero__headline { text-shadow: 0 2px 46px rgba(0, 0, 0, 0.55); }
.hero__sub, .hero__proof { text-shadow: 0 1px 18px rgba(5, 5, 6, 0.7); }
.hero__tag { text-shadow: none; }

.hero__sub {
  margin: 30px auto 0;
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  color: var(--text-soft);
  line-height: 1.7;
}
.hero__cta { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.hero__proof {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.hero__proof b { color: var(--text); font-weight: 600; }
.hero__proof .sep { width: 1px; height: 26px; background: var(--line-strong); }

.hero__scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--text-muted);
}
.hero__scroll .rail { width: 1px; height: 50px; background: rgba(255, 255, 255, 0.12); position: relative; overflow: hidden; }
.hero__scroll .rail::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--gold); animation: railPulse 2.2s var(--ease-lux) infinite; }
@keyframes railPulse { 0% { top: -50%; } 100% { top: 120%; } }

/* ----------------------------------------------------------------------------
   10. Marquee ticker
---------------------------------------------------------------------------- */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12,12,16,0.7), rgba(8,8,10,0.7));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow: hidden;
  padding-block: 15px;
  position: relative;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--obsidian), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--obsidian), transparent); }
.ticker__track { display: flex; gap: 46px; width: max-content; animation: tickerScroll 48s linear infinite; font-family: var(--font-mono); font-size: 0.82rem; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 10px; color: var(--text-soft); }
.ticker__sym { color: var(--text); font-weight: 600; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* word marquee (about / cta) */
.word-marquee { overflow: hidden; padding-block: 8px; }
.word-marquee__track {
  display: flex; gap: 40px; width: max-content;
  animation: tickerScroll 38s linear infinite;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(2.2rem, 6vw, 4.5rem); color: transparent;
  -webkit-text-stroke: 1px rgba(233,196,106,0.4);
}
.word-marquee__track span { display: inline-flex; align-items: center; gap: 40px; }
.word-marquee__track .dot { -webkit-text-stroke: 0; color: var(--gold); font-style: normal; }

/* ----------------------------------------------------------------------------
   11. Reveal defaults
---------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; }
[data-reveal="up"] { transform: translateY(38px); }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: scale(0.94); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* line-mask reveal (for headings split by JS) */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; will-change: transform; }

/* ----------------------------------------------------------------------------
   12. Live metrics / order book
---------------------------------------------------------------------------- */
.metrics-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 24px; }
@media (max-width: 900px) { .metrics-grid { grid-template-columns: 1fr; } }

.orderbook { padding: 26px; }
.orderbook__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.orderbook__title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.live-dot { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--emerald); letter-spacing: 0.12em; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px var(--emerald); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.order-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 0.84rem; padding: 9px 12px; border-radius: 8px; position: relative; overflow: hidden; }
.order-row .depth { position: absolute; inset: 0; transform-origin: right; opacity: 0.13; }
.order-row.buy .depth { background: var(--emerald); }
.order-row.sell .depth { background: var(--rose); }
.order-row > * { position: relative; z-index: 1; }
.order-row .price.buy { color: var(--emerald); }
.order-row .price.sell { color: var(--rose); }
.order-row .size { color: var(--text-soft); }
.order-row .total { color: var(--text-muted); text-align: right; }
.order-mid { display: flex; align-items: center; justify-content: space-between; background: rgba(233,196,106,0.06); border-block: 1px solid var(--line-gold); margin-block: 6px; padding: 10px 12px; border-radius: 8px; font-family: var(--font-mono); }

.stat-stack { display: flex; flex-direction: column; gap: 18px; }
.stat-card { padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.stat-card .label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.stat-card .value { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; }
.stat-card .delta { font-family: var(--font-mono); font-size: 0.8rem; }
.spark { width: 100%; height: 52px; margin-top: 8px; }

/* Live price chart card */
.chart-card { padding: 26px; margin-bottom: 24px; }
.chart-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.chart-card__id { display: flex; align-items: center; gap: 14px; }
.chart-card__pair { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1; }
.chart-card__meta { display: flex; flex-direction: column; }
.chart-card__price { font-family: var(--font-mono); font-size: 1.5rem; color: var(--text); line-height: 1.1; }
.chart-card__chg { font-family: var(--font-mono); font-size: 0.82rem; }
.chart-card__tabs { display: flex; gap: 6px; }
.chart-card__tabs button { font-family: var(--font-mono); font-size: 0.72rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--text-muted); transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out); }
.chart-card__tabs button.is-active { color: var(--gold); border-color: var(--line-gold); background: rgba(233, 196, 106, 0.08); }
.chart-canvas-wrap { position: relative; }
.price-chart { width: 100%; height: 300px; display: block; }
@media (max-width: 560px) { .price-chart { height: 220px; } .chart-card__pair { font-size: 1.3rem; } }

/* ----------------------------------------------------------------------------
   13. Feature / bento grid (cursor spotlight)
---------------------------------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  --mx: 50%; --my: 50%;
  position: relative;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(26,26,33,0.6), rgba(10,10,13,0.6));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.5s var(--ease-lux), border-color 0.4s var(--ease-out);
}
.feature-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(233,196,106,0.8), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.feature-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(233,196,106,0.1), transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.feature-card:hover { transform: translateY(-5px); }
.feature-card:hover::before, .feature-card:hover::after { opacity: 1; }
.feature-card .icon {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px;
  background: rgba(233,196,106,0.08); border: 1px solid var(--line-gold); color: var(--gold);
  margin-bottom: 22px;
}
.feature-card .icon svg { width: 26px; height: 26px; }
.feature-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: 10px; letter-spacing: -0.01em; }
.feature-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; }
.feature-card .tag { margin-top: 20px; display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.feature-card.span-2 { grid-column: span 2; }
@media (max-width: 620px) { .feature-card.span-2 { grid-column: span 1; } }

/* ----------------------------------------------------------------------------
   14. Steps / protocol
---------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 32px 28px; border-radius: 18px; border: 1px solid var(--line); background: rgba(12,12,16,0.5); overflow: hidden; }
.step__no { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-gold); margin-bottom: 16px; }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 0.93rem; }
.step__glow { position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(233,196,106,0.18), transparent 70%); }

/* ----------------------------------------------------------------------------
   15. Stat band
---------------------------------------------------------------------------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
@media (max-width: 720px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }
.stat-band__cell { padding: 38px 26px; border-right: 1px solid var(--line); text-align: center; }
.stat-band__cell:last-child { border-right: none; }
@media (max-width: 720px) {
  .stat-band__cell:nth-child(2) { border-right: none; }
  .stat-band__cell:nth-child(1), .stat-band__cell:nth-child(2) { border-bottom: 1px solid var(--line); }
}
.stat-band__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; color: var(--gold-bright); }
.stat-band__label { margin-top: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }

/* ----------------------------------------------------------------------------
   16. Pricing
---------------------------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 920px) { .pricing { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.price-card { position: relative; padding: 34px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(170deg, var(--ink-700), var(--ink-900)); display: flex; flex-direction: column; transition: transform 0.5s var(--ease-lux), border-color 0.4s var(--ease-out); }
.price-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.price-card.is-featured { border-color: var(--gold); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--gold-deep) inset; }
.price-card.is-featured::before { content: "Most chosen"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1a1303; background: linear-gradient(120deg, var(--gold-bright), var(--gold-deep)); padding: 6px 16px; border-radius: 100px; }
.price-card__name { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.price-card__price { font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; margin-top: 16px; }
.price-card__price small { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); font-weight: 400; }
.price-card__desc { color: var(--text-muted); font-size: 0.92rem; margin-top: 10px; }
.price-card ul { margin-top: 24px; margin-bottom: 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price-card li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.92rem; color: var(--text-soft); }
.price-card li svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 1px; }

/* ----------------------------------------------------------------------------
   17. Testimonials
---------------------------------------------------------------------------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 920px) { .testi-grid { grid-template-columns: 1fr; } }
.testi { padding: 30px; border-radius: 18px; border: 1px solid var(--line); background: rgba(12,12,16,0.5); }
.testi__stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 16px; }
.testi__stars svg { width: 16px; height: 16px; }
.testi__quote { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.45; color: var(--text); margin-bottom: 22px; }
.testi__who { display: flex; align-items: center; gap: 13px; }
.testi__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-gold); }
.testi__name { font-weight: 600; font-size: 0.92rem; }
.testi__role { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }

/* ----------------------------------------------------------------------------
   18. FAQ
---------------------------------------------------------------------------- */
.faq { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: rgba(12,12,16,0.5); overflow: hidden; transition: border-color 0.3s var(--ease-out); }
.faq-item.is-open { border-color: var(--line-gold); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; text-align: left; font-size: 1.05rem; font-weight: 500; color: var(--text); }
.faq-q .ico { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.faq-q .ico::before, .faq-q .ico::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--gold); transition: transform 0.4s var(--ease-lux); }
.faq-q .ico::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-q .ico::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-q .ico::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-lux); }
.faq-a__inner { padding: 0 24px 24px; color: var(--text-muted); line-height: 1.7; }

/* ----------------------------------------------------------------------------
   19. Course Vault ,  moved
   The gated member player, lesson dock and progress components now live in
   assets/css/app.css, which is the only stylesheet that renders them. Keeping
   duplicate (and now stale) definitions here caused the two files to fight over
   padding and grid tracks, so they have been removed rather than left to rot.
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   20. Timeline (about)
---------------------------------------------------------------------------- */
.timeline { position: relative; }
.timeline__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,0.08); overflow: hidden; }
.timeline__progress { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(var(--gold-bright), var(--gold-deep)); box-shadow: var(--glow-gold); }
@media (max-width: 760px) { .timeline__track { left: 18px; } }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; margin-bottom: 72px; }
@media (max-width: 760px) { .tl-item { grid-template-columns: 48px 1fr; } }
.tl-node { grid-column: 2; justify-self: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-600); border: 2px solid var(--text-faint); z-index: 2; transition: all 0.4s var(--ease-lux); }
.tl-item.is-lit .tl-node { background: var(--gold); border-color: var(--gold); box-shadow: var(--glow-gold); }
@media (max-width: 760px) { .tl-node { grid-column: 1; justify-self: center; } }
.tl-card { padding: 28px; border-radius: 18px; }
.tl-item:nth-child(odd) .tl-card { grid-column: 1; }
.tl-item:nth-child(even) .tl-card { grid-column: 3; }
@media (max-width: 760px) { .tl-item:nth-child(odd) .tl-card, .tl-item:nth-child(even) .tl-card { grid-column: 2; } }
.tl-year { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 10px; }
.tl-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: 8px; }
.tl-card p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.65; }

/* ----------------------------------------------------------------------------
   21. Forms / auth
---------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
.split__visual { position: relative; overflow: hidden; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 56px); }
@media (max-width: 940px) { .split__visual { min-height: 40vh; } }
.terminal-canvas { position: absolute; inset: 0; z-index: 0; opacity: 0.85; }
.split__visual > * { position: relative; z-index: 1; }
.split__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.18; max-width: 16ch; letter-spacing: -0.01em; }
.split__quote em { font-style: italic; color: var(--gold); }
.split__form-wrap { display: flex; align-items: center; justify-content: center; padding: clamp(40px,6vw,64px) 24px; }
.auth-card { width: 100%; max-width: 460px; }
.auth-head { margin-bottom: 32px; }
.auth-head h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.02em; }
.auth-head p { color: var(--text-muted); margin-top: 8px; }

.field { position: relative; margin-bottom: 24px; }
.field input, .field select, .field textarea { width: 100%; padding: 22px 16px 9px; background: rgba(255,255,255,0.025); border: 1px solid var(--line-strong); border-radius: 13px; color: var(--text); outline: none; transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.field textarea { min-height: 130px; resize: vertical; }
.field label { position: absolute; left: 16px; top: 18px; color: var(--text-muted); pointer-events: none; transition: transform 0.25s var(--ease-lux), color 0.25s var(--ease-out); transform-origin: left; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--line-gold); background: rgba(233,196,106,0.04); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:valid + label {
  transform: translateY(-11px) scale(0.76); color: var(--gold);
}
.field__underline { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: transform 0.4s var(--ease-lux); border-radius: 100px; }
.field input:focus ~ .field__underline, .field textarea:focus ~ .field__underline, .field select:focus ~ .field__underline { transform: scaleX(1); }
.field__error { font-family: var(--font-mono); font-size: 0.72rem; color: var(--rose); margin-top: 7px; min-height: 14px; display: block; }
.field select { appearance: none; cursor: pointer; }
.field .chev { position: absolute; right: 16px; top: 22px; pointer-events: none; color: var(--text-muted); }

.auth-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 26px; }
.checkbox { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--gold); }
.auth-alt { margin-top: 26px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.form-note { margin-top: 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(52,211,153,0.35); background: rgba(52,211,153,0.08); color: var(--emerald); font-size: 0.88rem; display: none; align-items: center; gap: 10px; }
.form-note.is-visible { display: flex; }
.form-note svg { width: 18px; height: 18px; flex-shrink: 0; }

.trust-row { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row .dot-ok { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }

/* ----------------------------------------------------------------------------
   22. Contact node grid
---------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }
.node-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 520px) { .node-grid { grid-template-columns: 1fr; } }
.node { position: relative; padding: 24px; border-radius: 15px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); text-align: left; overflow: hidden; transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.3s var(--ease-lux); }
.node:hover { transform: translateY(-3px); border-color: var(--line-gold); }
.node.is-selected { border-color: var(--gold); background: rgba(233,196,106,0.07); }
.node__icon { color: var(--gold); margin-bottom: 14px; }
.node__icon svg { width: 26px; height: 26px; }
.node__title { font-weight: 600; margin-bottom: 4px; }
.node__desc { font-size: 0.84rem; color: var(--text-muted); }
.node__pulse { position: absolute; top: 16px; right: 16px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--text-faint); transition: all 0.3s var(--ease-out); }
.node.is-selected .node__pulse { background: var(--gold); border-color: var(--gold); box-shadow: var(--glow-gold); }
.contact-terminal { font-family: var(--font-mono); font-size: 0.82rem; overflow: hidden; border-radius: 20px; }
.terminal-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text-muted); }
.terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-dot.r { background: #ff5f57; } .terminal-dot.y { background: #febc2e; } .terminal-dot.g { background: #28c840; }
.terminal-head span { margin-left: 8px; letter-spacing: 0.1em; }
.terminal-body { padding: 22px; }
.node-map { position: relative; height: 230px; border-radius: 15px; overflow: hidden; border: 1px solid var(--line); margin-top: 22px; background: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px), var(--ink-800); background-size: 32px 32px, 32px 32px, auto; }
.map-node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: mapPulse 2.6s ease-in-out infinite; }
.map-node.ice { background: var(--ice); box-shadow: 0 0 12px var(--ice); }
@keyframes mapPulse { 50% { transform: scale(1.6); opacity: 0.5; } }

/* ----------------------------------------------------------------------------
   23. CTA band
---------------------------------------------------------------------------- */
.cta-band { position: relative; text-align: center; padding: clamp(56px, 8vw, 104px); border-radius: 28px; overflow: hidden; }
.cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 5.5vw, 4rem); line-height: 1.04; margin-bottom: 18px; letter-spacing: -0.02em; }
.cta-band p { color: var(--text-soft); max-width: 56ch; margin: 0 auto 34px; }

/* ----------------------------------------------------------------------------
   24. Interior page hero
---------------------------------------------------------------------------- */
.page-hero { position: relative; padding: clamp(150px, 20vh, 240px) 0 clamp(48px, 8vw, 88px); text-align: center; overflow: hidden; }
.page-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.7rem, 7.5vw, 6rem); line-height: 1; letter-spacing: -0.03em; }
.page-hero h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.page-hero p { margin: 24px auto 0; max-width: 58ch; color: var(--text-soft); font-size: clamp(1rem, 1.4vw, 1.18rem); }

/* ----------------------------------------------------------------------------
   25. Footer
---------------------------------------------------------------------------- */
.footer { position: relative; border-top: 1px solid var(--line); padding-block: 72px 38px; background: linear-gradient(180deg, transparent, rgba(8,8,10,0.6)); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 52px; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand p { color: var(--text-muted); max-width: 36ch; margin-top: 18px; font-size: 0.92rem; line-height: 1.65; }
.footer__col h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.footer__col a { display: block; color: var(--text-soft); font-size: 0.92rem; margin-bottom: 12px; transition: color 0.25s var(--ease-out); }
.footer__col a:hover { color: var(--gold-bright); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 30px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-muted); flex-wrap: wrap; }
.footer__social { display: flex; gap: 13px; }
.footer__social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--text-soft); transition: all 0.3s var(--ease-lux); }
.footer__social a:hover { color: var(--gold-bright); border-color: var(--line-gold); box-shadow: var(--glow-gold); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__disclaimer { margin-top: 26px; font-size: 0.74rem; color: var(--text-faint); line-height: 1.6; max-width: 90ch; }
.footer__credit { margin-top: 18px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--text-muted); }
.footer__credit a { color: var(--gold); transition: color 0.25s var(--ease-out); display: inline-block; padding: 6px 4px; }
.footer__credit a:hover { color: var(--gold-bright); }

/* ----------------------------------------------------------------------------
   25b. RESPONSIVE SYSTEM
   ----------------------------------------------------------------------------
   Desktop is the reference design; everything below re-flows it for tablet and
   phone. Four deliberate tiers rather than one catch-all breakpoint:

     <= 1180px   large tablet landscape / small laptop, tighten the grids
     <= 1024px   tablet portrait & landscape, two-up becomes one-up, nav collapses
     <=  768px   large phone / small tablet, single column, type steps down
     <=  480px   phone, edge-to-edge, minimum touch targets, effects trimmed

   Plus: dynamic viewport units (so mobile browser chrome can't crop the hero),
   iOS safe areas, coarse-pointer hit targets, and hover-free interactions.
---------------------------------------------------------------------------- */

/* ---- Dynamic viewport: the URL bar must never crop a full-height section --- */
@supports (height: 100dvh) {
  .hero { min-height: 100dvh; }
  .split { min-height: 100dvh; }
}

/* ---- Large tablet landscape / small laptop -------------------------------- */
@media (max-width: 1180px) {
  :root { --container: 1080px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
  .page-hero { padding-top: clamp(140px, 18vh, 200px); }
}

/* ---- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section { padding-block: clamp(68px, 10vw, 120px); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card.span-2 { grid-column: span 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__line { display: none; }
  .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .node-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The split auth pages stack: form first, atmosphere below. */
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__visual { min-height: 46vh; border-right: none; border-bottom: 1px solid var(--line); }
  .split__form-wrap { padding-block: clamp(44px, 8vw, 72px); }

  /* Cursor-follow glows are meaningless without a cursor. */
  .feature-card::before, .feature-card::after,
  .step::after, .price-card::after, .testi::after, .node::after, .tl-card::after { display: none; }

  /* The scroll cue is absolutely positioned at the bottom of the hero and
     collided with the proof row once the hero got shorter. Touch users don't
     need to be told a page scrolls. */
  .hero__scroll { display: none; }
}

/* ---- Large phone / small tablet ------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 15.5px; }

  .section { padding-block: clamp(56px, 13vw, 92px); }
  .section--tight { padding-block: clamp(40px, 9vw, 68px); }
  .container { padding-inline: 20px; }

  .hero { padding: 118px 20px 84px; }
  .hero__headline { margin-top: 24px; }
  .hero__sub { margin-top: 22px; font-size: 1rem; }
  .hero__cta { margin-top: 34px; width: 100%; gap: 12px; }
  .hero__cta .btn { flex: 1 1 240px; justify-content: center; }
  .hero__proof { margin-top: 40px; gap: 14px 22px; font-size: 0.74rem; }
  .hero__scroll { display: none; }

  .feature-grid, .steps, .testi-grid, .pricing { grid-template-columns: minmax(0, 1fr); }
  .feature-card.span-2 { grid-column: span 1; }
  .feature-card, .step, .price-card, .testi, .glass.orderbook, .stat-card, .chart-card, .tl-card { padding: 22px; }
  .feature-card h3 { font-size: 1.3rem; }
  .feature-card .icon { width: 46px; height: 46px; margin-bottom: 16px; }

  .cta-band { padding: 44px 22px; }
  .word-marquee__track { font-size: clamp(1.7rem, 8vw, 2.6rem); gap: 26px; }
  .word-marquee__track span { gap: 26px; }

  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .faq-q { padding: 18px 18px; font-size: 0.98rem; }
  .faq-a__inner { padding: 0 18px 20px; font-size: 0.92rem; }

  .node-grid { grid-template-columns: minmax(0, 1fr); }
  .node-map { height: 180px; }
  .terminal-body { padding: 18px; }

  /* Timeline goes single-rail on the left instead of alternating sides. */
  .timeline__track { left: 15px; }
  .tl-item { grid-template-columns: 40px minmax(0, 1fr); margin-bottom: 40px; }
  .tl-node { grid-column: 1; justify-self: center; }
  .tl-item:nth-child(odd) .tl-card,
  .tl-item:nth-child(even) .tl-card { grid-column: 2; }

  .footer { padding-block: 52px 30px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-bottom: 34px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---- Phone ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding-inline: 18px; }

  .hero { padding: 108px 18px 72px; }
  .hero__tag { font-size: 0.62rem; padding: 7px 13px 7px 10px; letter-spacing: 0.14em; }
  .hero__proof { flex-direction: column; gap: 9px; }
  .hero__proof .sep { display: none; }

  .btn { padding: 14px 22px; font-size: 0.88rem; }
  .btn--lg { padding: 16px 26px; font-size: 0.94rem; }

  .order-row, .ticker__track, .contact-terminal { font-size: 0.76rem; }
  .order-row { grid-template-columns: 1fr auto; gap: 10px; }
  .order-row .total { display: none; }
  .ticker__track { gap: 30px; }
  .ticker::before, .ticker::after { width: 56px; }

  .stat-band { grid-template-columns: 1fr; }
  .stat-band__cell { padding: 24px 16px; border-right: none; border-bottom: 1px solid var(--line); }
  .stat-band__cell:last-child { border-bottom: none; }

  .testi__quote { font-size: 1.04rem; }
  .page-hero { padding-top: 122px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__social a { width: 44px; height: 44px; }

  .split__visual { min-height: 34vh; padding: 26px 20px; }
  .split__quote { font-size: clamp(1.5rem, 7vw, 2rem); max-width: 100%; }
  .auth-card { max-width: 100%; }
}

/* ---- Very small phones (SE / Galaxy A-series) ------------------------------ */
@media (max-width: 360px) {
  .hero__headline { font-size: clamp(2.2rem, 12.5vw, 3rem); }
  .section-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .price-card__price { font-size: 2.4rem; }
  .nav-shell { padding: 8px 8px 8px 12px; }
}

/* ---- Landscape phone: the hero must not demand a full 100vh --------------- */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 940px) {
  .hero { min-height: auto; padding-block: 104px 60px; }
  .split__visual { min-height: 0; padding-block: 30px; }
  .mobile-menu { padding-block: 84px 24px; justify-content: flex-start; }
  .mobile-menu a { font-size: 1.4rem; padding: 6px 0; min-height: 40px; }
}

/* ---- iOS safe areas (notch / home indicator) ------------------------------ */
@supports (padding: max(0px)) {
  #navbar { top: max(clamp(14px, 2vw, 22px), env(safe-area-inset-top)); }
  .container { padding-left: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left));
               padding-right: max(clamp(20px, 4vw, 40px), env(safe-area-inset-right)); }
  .footer { padding-bottom: max(38px, env(safe-area-inset-bottom)); }
}

/* ---- Touch / coarse pointer ----------------------------------------------- */
@media (pointer: coarse) {
  /* Everything tappable clears the 44px minimum. */
  .nav-links a, .nav-signin, .footer__col a, .faq-q, .chart-card__tabs button,
  .speed-pills button, .node { min-height: 44px; }
  .chart-card__tabs button { padding: 11px 16px; }
  .footer__col a { padding-block: 6px; }
  .footer__credit a { padding: 10px 6px; }
  /* Standalone links (not the ones sitting mid-sentence) get a real hit area. */
  .footer__bottom .link-line,
  .auth-meta .link-line,
  .auth-alt .link-line,
  a[href^="mailto:"],
  a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 40px; }
  /* Hover-only reveals would be permanently stuck open on touch. */
  .link-line::after { transform: scaleX(0); }
}

@media (hover: none) {
  .feature-card:hover, .price-card:hover, .node:hover, .mod-row:hover { transform: none; }
  .ticker:hover .ticker__track { animation-play-state: running; }
}

/* ---- Mobile performance ---------------------------------------------------
   The grain sweep and the two blurred orbs are beautiful on a desktop GPU and
   expensive on a phone. Below the tablet breakpoint the grain stops animating
   and the orbs stop drifting, the atmosphere stays, the battery drain doesn't.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .grain { animation: none; opacity: 0.035; }
  .orb { animation: none; opacity: 0.42; filter: blur(60px); }
  .word-marquee__track { animation-duration: 26s; }
}

/* Prevent any horizontal overflow site-wide */
html, body { max-width: 100%; overflow-x: hidden; }
/* Long unbroken strings (references, emails) must wrap rather than widen the page. */
p, li, td, dd, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ----------------------------------------------------------------------------
   25c. Kinetic motion system
---------------------------------------------------------------------------- */
/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 65; will-change: transform;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 14px var(--gold-glow);
}

/* Ambient drifting light orbs (injected globally, sit behind all content) */
.orb {
  position: fixed; width: 48vw; height: 48vw; max-width: 720px; max-height: 720px;
  border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: -8;
  opacity: 0.6; will-change: transform;
}
.orb--gold { background: radial-gradient(circle, rgba(233,196,106,0.17), transparent 68%); top: -12vh; left: -8vw; animation: orbDrift 24s ease-in-out infinite; }
.orb--ice  { background: radial-gradient(circle, rgba(159,214,224,0.10), transparent 68%); bottom: -14vh; right: -8vw; animation: orbDrift 30s ease-in-out infinite reverse; }
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(7vw, 9vh) scale(1.12); }
  66% { transform: translate(-6vw, -7vh) scale(0.94); }
}

/* Volumetric shimmer sweep across gold gradient text */
.text-gradient { background-size: 220% auto; animation: textShimmer 7s ease-in-out infinite; }
@keyframes textShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* 3D perspective so card assembly reveals read with real depth */
.feature-grid, .steps, .pricing, .testi-grid { perspective: 1500px; }

/* Universal cursor-follow glow on every card type */
.step, .price-card, .testi, .node, .tl-card { --mx: 50%; --my: 50%; position: relative; }
.step::after, .price-card::after, .testi::after, .node::after, .tl-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(233,196,106,0.13), transparent 60%);
  opacity: 0; transition: opacity 0.45s var(--ease-out);
}
.step:hover::after, .price-card:hover::after, .testi:hover::after, .node:hover::after, .tl-card:hover::after { opacity: 1; }

/* Animated draw-line connecting the protocol steps */
.steps { position: relative; }
.steps__line {
  position: absolute; top: 50%; left: 0; height: 1px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4; pointer-events: none;
}
@media (max-width: 860px) { .steps__line { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .orb, .text-gradient { animation: none !important; }
  .scroll-progress { display: none; }
}

/* ----------------------------------------------------------------------------
   25d. NyViA assistant widget (bottom-right, two channels)
---------------------------------------------------------------------------- */
.nyvia-root { --wa-green: #25d366; font-family: var(--font-body); }
.nyvia-root * { box-sizing: border-box; }

/* Launcher bubble */
.nyvia-bubble {
  position: fixed; right: 24px; bottom: 24px; z-index: 58;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1303; box-shadow: 0 12px 34px rgba(233,196,106,0.4), 0 4px 12px rgba(0,0,0,0.5);
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), opacity 0.3s var(--ease-out);
}
.nyvia-bubble:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 46px rgba(233,196,106,0.55); }
.nyvia-bubble.is-hidden { opacity: 0; transform: scale(0.6); pointer-events: none; }
.nyvia-bubble__icon { width: 30px; height: 30px; display: grid; place-items: center; position: relative; z-index: 2; }
.nyvia-bubble__icon svg { width: 30px; height: 30px; }
.nyvia-bubble__pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: 0.5; animation: nyviaPulse 2.6s ease-out infinite; }
@keyframes nyviaPulse { 0% { transform: scale(1); opacity: 0.45; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.nyvia-badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--rose); color: #fff; font-size: 0.66rem; font-weight: 700;
  display: none; align-items: center; justify-content: center; border: 2px solid var(--obsidian);
}
.nyvia-badge.is-visible { display: flex; }

/* Proactive tooltip */
.nyvia-proactive {
  position: fixed; right: 24px; bottom: 98px; z-index: 57; max-width: 250px;
  padding: 13px 36px 13px 16px; border-radius: 14px 14px 4px 14px;
  background: var(--glass-strong); border: 1px solid var(--line-gold);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--text-soft); font-size: 0.86rem; line-height: 1.4; cursor: pointer;
  box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.96);
  transition: opacity 0.4s var(--ease-lux), transform 0.4s var(--ease-lux), visibility 0.4s var(--ease-lux);
}
.nyvia-proactive.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nyvia-proactive__txt b { color: var(--gold-bright); }
.nyvia-proactive__close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--text-muted); }
.nyvia-proactive__close svg { width: 12px; height: 12px; }
.nyvia-proactive__close:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* Widget panel */
.nyvia-widget {
  position: fixed; right: 24px; bottom: 24px; z-index: 58;
  width: 384px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line-gold);
  background: rgba(9, 9, 12, 0.94);
  -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%);
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 60px rgba(233,196,106,0.08);
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.96); transform-origin: bottom right;
  transition: opacity 0.45s var(--ease-lux), transform 0.45s var(--ease-lux), visibility 0.45s var(--ease-lux);
}
.nyvia-widget.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.nyvia-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(233,196,106,0.06), transparent); }
.nyvia-id { display: flex; align-items: center; gap: 12px; }
.nyvia-avatar { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(233,196,106,0.1); border: 1px solid var(--line-gold); color: var(--gold); flex-shrink: 0; }
.nyvia-avatar svg { width: 22px; height: 22px; }
.nyvia-avatar.is-wa { background: var(--wa-green); border-color: var(--wa-green); color: #04210f; }
.nyvia-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1; }
.nyvia-status { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }
.nyvia-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }
.nyvia-close { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--text-muted); transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out); }
.nyvia-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nyvia-close svg { width: 18px; height: 18px; }

.nyvia-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.nyvia-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 11px; font-size: 0.84rem; font-weight: 500; color: var(--text-muted); border: 1px solid transparent; transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.nyvia-tab svg { width: 16px; height: 16px; }
.nyvia-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nyvia-tab.is-active { color: var(--gold-bright); background: rgba(233,196,106,0.1); border-color: var(--line-gold); }

.nyvia-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nyvia-panel[hidden] { display: none; }

.nyvia-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.nyvia-messages::-webkit-scrollbar { width: 6px; }
.nyvia-messages::-webkit-scrollbar-thumb { background: rgba(233,196,106,0.3); border-radius: 6px; border: none; }
.nyvia-msg { display: flex; }
.nyvia-msg--user { justify-content: flex-end; }
.nyvia-msg__bubble { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: 0.9rem; line-height: 1.55; }
.nyvia-msg--assistant .nyvia-msg__bubble { background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--text-soft); border-bottom-left-radius: 5px; }
.nyvia-msg--user .nyvia-msg__bubble { background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #1a1303; border-bottom-right-radius: 5px; font-weight: 500; }
.nyvia-msg__bubble strong { color: var(--text); font-weight: 600; }
.nyvia-msg--user .nyvia-msg__bubble strong { color: #1a1303; }

.nyvia-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.nyvia-quick-btn { font-size: 0.8rem; padding: 8px 13px; border-radius: 100px; border: 1px solid var(--line-gold); background: rgba(233,196,106,0.05); color: var(--gold-bright); transition: background 0.25s var(--ease-out), transform 0.2s var(--ease-out); }
.nyvia-quick-btn:hover { background: rgba(233,196,106,0.15); transform: translateY(-1px); }

.nyvia-typing { display: flex; gap: 5px; padding: 12px 16px; align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 5px; }
.nyvia-typing__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: nyviaTyping 1.3s infinite; }
.nyvia-typing__dot:nth-child(2) { animation-delay: 0.18s; }
.nyvia-typing__dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes nyviaTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.nyvia-wa-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; border-radius: 100px; background: var(--wa-green); color: #04210f; font-weight: 600; font-size: 0.85rem; transition: filter 0.25s var(--ease-out); }
.nyvia-wa-btn:hover { filter: brightness(1.08); }
.nyvia-wa-btn--mail { background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #1a1303; }
.nyvia-wa-btn svg { width: 15px; height: 15px; }
.nyvia-retry-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--text-soft); font-size: 0.8rem; align-self: flex-start; }
.nyvia-retry-btn:hover { border-color: var(--gold); color: var(--gold-bright); }

.nyvia-composer { display: flex; align-items: flex-end; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.nyvia-input { flex: 1; resize: none; max-height: 110px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); color: var(--text); font-size: 0.9rem; line-height: 1.45; outline: none; transition: border-color 0.25s var(--ease-out); }
.nyvia-input:focus { border-color: var(--line-gold); }
.nyvia-input::placeholder { color: var(--text-faint); }
.nyvia-send { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #1a1303; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
.nyvia-send:hover:not(:disabled) { transform: translateY(-1px); }
.nyvia-send:disabled { opacity: 0.4; cursor: not-allowed; }
.nyvia-send svg { width: 18px; height: 18px; }
.nyvia-foot { padding: 0 14px 12px; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); text-align: center; }

/* WhatsApp form */
.wa-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.wa-intro { font-size: 0.88rem; color: var(--text-soft); line-height: 1.5; }
.wa-field { display: flex; flex-direction: column; gap: 6px; }
.wa-field label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.wa-field input, .wa-field textarea { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); color: var(--text); font-size: 0.9rem; outline: none; resize: none; transition: border-color 0.25s var(--ease-out); }
.wa-field input:focus, .wa-field textarea:focus { border-color: var(--wa-green); }
.wa-field.is-invalid input, .wa-field.is-invalid textarea { border-color: var(--rose); }
.wa-field input::placeholder, .wa-field textarea::placeholder { color: var(--text-faint); }
.wa-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; padding: 14px; border-radius: 100px; background: var(--wa-green); color: #04210f; font-weight: 600; font-size: 0.92rem; transition: filter 0.25s var(--ease-out), transform 0.3s var(--ease-lux); }
.wa-submit:hover { filter: brightness(1.08); transform: translateY(-2px); }
.wa-submit svg { width: 18px; height: 18px; }

.wa-success { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wa-success__ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.4); color: var(--wa-green); }
.wa-success__ico svg { width: 28px; height: 28px; }
.wa-success h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.wa-success p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; max-width: 30ch; }
.wa-success__again { margin-top: 6px; color: var(--gold-bright); font-size: 0.86rem; }
.wa-success__again:hover { text-decoration: underline; }

/* Mobile widget */
@media (max-width: 480px) {
  .nyvia-bubble { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .nyvia-widget { right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 88vh; max-height: 88vh; border-radius: 22px 22px 0 0; }
  .nyvia-proactive { right: 16px; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .nyvia-bubble__pulse, .nyvia-typing__dot { animation: none; }
}

/* ----------------------------------------------------------------------------
   26. Accessibility & utilities
---------------------------------------------------------------------------- */
.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; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 400; padding: 11px 18px; border-radius: 10px; background: var(--gold); color: #1a1303; font-weight: 600; transition: top 0.25s var(--ease-out); }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
  .loader { display: none; }
}