/* iqoptiongpt.com — QEDS (dark) subset + ChatGPT connector page styles.
 * Single bundled stylesheet served at /assets/css/site.css. Sources:
 *   tokens  ← ../iqoption-mcp-guide/assets/css/tokens.css   (:root vars, @font-face fallback)
 *   base    ← ../iqoption-mcp-guide/assets/css/qeds.css     (resets, .qeds-button, focus)
 *   shared  ← ../iqoption-mcp-guide/assets/css/styles.css   (header/nav/hero/cards/steps/faq/chat/toast)
 * Pasted verbatim where class names match the template, then the page-specific
 * additions follow. Self-contained: no @import — this is the only stylesheet request. */

/* ===== 1. TOKENS (from tokens.css :root + @font-face) ===== */

/* Metric-matched fallback so async-loaded Inter swaps in with no layout shift */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Roboto'), local('Helvetica Neue');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
}

:root {
  color-scheme: dark;

  --bg-app: #0C1326;
  --bg-surface: #162033;
  --bg-elevated: #1A2545;
  --bg-code: #0A0F1E;
  --border: #222F47;
  --border-strong: #2E3D5C;

  --accent: #FF8A00;
  --accent-soft: #FFB000;
  --accent-bright: #FFA947;

  --success: #00B370;
  --success-bright: #00E68B;
  --cyan: #5EDAFF;
  --purple: #A78BFA;
  --gold: #FFD166;
  --warning: #FFB000;
  --danger: #EF454A;
  --danger-bright: #FF6B70;

  --text-strong: #F4F8FA;
  --text-base: #D5DDE2;
  --text-soft: #B8C5CC;
  --text-mute: #7A8993;
  --text-fade: #71808C;   /* WCAG AA: 4.55:1 on --bg-app */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Focus ring — high-contrast cyan, distinct from the orange accent */
  --ring: #5EDAFF;
  --ring-shadow: 0 0 0 3px rgba(94, 218, 255, 0.35);

  /* ── Motion · "Smooth & elegant" personality ──────────────────────
     Custom curves: the browser defaults are too weak to feel intentional. */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);    /* easeOutQuint — graceful settle */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);    /* easeOutCubic — gentle hovers   */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);    /* easeInOutCubic — on-screen move */
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.5, 1);   /* subtle overshoot — success pops */

  --dur-press: 150ms;   /* button press feedback        */
  --dur-fast:  200ms;   /* hover / colour               */
  --dur-base:  260ms;   /* dropdowns, tabs, accordions  */
  --dur-slow:  480ms;   /* scroll reveals               */
  --dur-hero:  640ms;   /* hero entrance steps          */
}

/* ===== 2. BASE + QEDS button + a11y helpers (from qeds.css / styles.css) ===== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }  /* clear the sticky header on anchor jumps */
body {
  background: var(--bg-app);
  color: var(--text-strong);
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}

code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: fixed;
  left: 16px; top: -100px;
  z-index: 1001;
  background: var(--accent);
  color: #0C1326;
  font-weight: 800;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(255,138,0,0.6);
  transition: top 0.22s ease;
}
.skip-link:focus { top: 16px; color: #0C1326; }

.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;
}

/* Keyboard focus rings (mouse clicks stay clean) */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Lucide icon sprite glyph */
.ic {
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ----- QEDS button (from qeds.css; display-p3 + data-attr variants) ----- */
.qeds-button{
  appearance: none;
  margin: 0;
  font-family: inherit;
  cursor: pointer;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  isolation: isolate;
  user-select: none;

  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;

  height: var(--qeds-btn-h, 48px);
  min-height: var(--qeds-btn-h, 48px);
  padding-inline: var(--qeds-btn-px, 20px);
  font-size: var(--qeds-btn-fs, 18px);
  line-height: var(--qeds-btn-lh, 25px);
  border-radius: var(--qeds-btn-r, 12px);

  background: var(--qeds-btn-bg, transparent);
  color: var(--qeds-btn-fg, currentColor);
  border: var(--qeds-btn-stroke-w, 0) solid var(--qeds-btn-stroke-c, transparent);

  transition: opacity 150ms ease, color 100ms ease;
}
.qeds-button::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  transition: background-color 100ms ease;
  pointer-events: none;
  z-index: 0;
}
.qeds-button > *{ position: relative; z-index: 1; }
.qeds-button:not(:disabled):not([data-loading]):hover::before{
  background: var(--qeds-btn-overlay-hover, transparent);
}
.qeds-button:not(:disabled):not([data-loading]):active::before{
  background: var(--qeds-btn-overlay-active, transparent);
}
.qeds-button:focus-visible{
  outline: 2px solid color(display-p3 0.91547 0.94016 0.98367 / 0.45);
  outline-offset: 2px;
}
.qeds-button:disabled{
  cursor: not-allowed;
  opacity: 0.4;
}
.qeds-button__label{ display: inline-flex; align-items: center; }
.qeds-button{ --qeds-btn-h: 48px; --qeds-btn-px: 20px; --qeds-btn-fs: 18px; --qeds-btn-lh: 25px; --qeds-btn-r: 12px; --qeds-btn-icon: 24px; }
.qeds-button[data-size="lg"]{ --qeds-btn-h: 48px; --qeds-btn-px: 20px; --qeds-btn-fs: 18px; --qeds-btn-lh: 25px; --qeds-btn-r: 12px; --qeds-btn-icon: 24px; }
.qeds-button[data-size="md"]{ --qeds-btn-h: 40px; --qeds-btn-px: 16px; --qeds-btn-fs: 16px; --qeds-btn-lh: 22px; --qeds-btn-r: 12px; --qeds-btn-icon: 20px; }
.qeds-button[data-size="sm"]{ --qeds-btn-h: 32px; --qeds-btn-px: 12px; --qeds-btn-fs: 14px; --qeds-btn-lh: 20px; --qeds-btn-r:  8px; --qeds-btn-icon: 16px; }
.qeds-button[data-context="general"][data-prominence="primary"],
.qeds-button:not([data-context]):not([data-prominence]){
  --qeds-btn-bg: color(display-p3 0.39324 0.44504 0.5876);
  --qeds-btn-fg: color(display-p3 0.95718 0.9757 0.99754);
  --qeds-btn-overlay-hover:  color(display-p3 0.91547 0.94016 0.98367 / 0.05);
  --qeds-btn-overlay-active: color(display-p3 0.98824 0.98824 0.98824 / 0.15);
}
.qeds-button[data-context="general"][data-prominence="tertiary"]{
  --qeds-btn-bg: transparent;
  --qeds-btn-fg: color(display-p3 0.95718 0.9757 0.99754);
  --qeds-btn-stroke-c: color(display-p3 0.39324 0.44504 0.5876);
  --qeds-btn-stroke-w: 1.2px;
  --qeds-btn-overlay-hover:  color(display-p3 0.12818 0.16719 0.29243);
  --qeds-btn-overlay-active: color(display-p3 0.15634 0.19844 0.32722);
}
.qeds-button[data-context="accent"][data-prominence="primary"]{
  --qeds-btn-bg: color(display-p3 0.90185 0.45292 0.20083);
  --qeds-btn-fg: color(display-p3 0.95718 0.9757 0.99754);
  --qeds-btn-overlay-hover:  color(display-p3 0.91547 0.94016 0.98367 / 0.05);
  --qeds-btn-overlay-active: color(display-p3 0.98824 0.98824 0.98824 / 0.15);
}
.qeds-button[data-context="accent"][data-prominence="tertiary"]{
  --qeds-btn-bg: transparent;
  --qeds-btn-fg: color(display-p3 0.94717 0.6409 0.4663);
  --qeds-btn-stroke-c: color(display-p3 0.90185 0.45292 0.20083);
  --qeds-btn-stroke-w: 1.2px;
  --qeds-btn-overlay-hover:  color(display-p3 0.27535 0.12463 0.0417);
  --qeds-btn-overlay-active: color(display-p3 0.3309 0.16093 0.06976);
}
.qeds-button[data-context="accent"][data-prominence="tertiary"]:not(:disabled):not([data-loading]):active{
  color: color(display-p3 0.97747 0.86777 0.80168);
}

/* Browsers without display-p3: keep the brand button readable on a fallback */
@supports not (color: color(display-p3 1 1 1)) {
  .qeds-button[data-context="accent"][data-prominence="primary"]{
    --qeds-btn-bg: var(--accent); --qeds-btn-fg: var(--text-strong);
  }
  .qeds-button[data-context="general"][data-prominence="primary"],
  .qeds-button:not([data-context]):not([data-prominence]){
    --qeds-btn-bg: #5a6890; --qeds-btn-fg: var(--text-strong);
  }
  .qeds-button[data-context="general"][data-prominence="tertiary"]{
    --qeds-btn-fg: var(--text-strong); --qeds-btn-stroke-c: #5a6890; --qeds-btn-stroke-w: 1.2px;
  }
  .qeds-button[data-context="accent"][data-prominence="tertiary"]{
    --qeds-btn-fg: var(--accent-bright); --qeds-btn-stroke-c: var(--accent); --qeds-btn-stroke-w: 1.2px;
  }
}

/* ===== 3. SHARED COMPONENTS reused by class name (from styles.css) ===== */

/* ----- Sticky frosted header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid transparent;
  transition: background      var(--dur-base) var(--ease-out),
              border-color    var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.site-header.nav-scrolled {
  background: rgba(12, 19, 38, 0.72);              /* --bg-app @ 72% */
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}

/* ----- Nav ----- */
.nav {
  position: relative;
  gap: 20px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;          /* keep logo left, cluster the rest right */
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}
.logo-mark {
  width: 32px; height: 32px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(255, 119, 0, 0.45));
  transition: transform var(--dur-base) var(--ease-out);
}
.site-header.nav-scrolled .logo-mark { transform: scale(0.9); }
.nav-links {
  display: flex; gap: 28px;
  font-size: 13px; font-weight: 600;
  color: var(--text-soft);
}
.nav-links a { color: var(--text-soft); transition: color 0.18s; }
.nav-links a:hover { color: var(--text-strong); }

/* Nav CTA — label on desktop, icon-only on small screens */
.nav-cta { white-space: nowrap; }
.nav-cta .ic { display: none; width: 16px; height: 16px; }

/* Mobile nav toggle (hamburger → dropdown of section anchors) */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.07); color: var(--text-strong); border-color: var(--border-strong); }
.nav-toggle .ic { width: 22px; height: 22px; }

/* Hero entrance: nav fades down on first paint */
.site-header .nav { border-bottom: 0; animation: navIn var(--dur-hero) var(--ease-out) both; }
@keyframes navIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ----- Animated hero background shell ----- */
.hero-shell {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
/* Merged hero: the .hero padding gives the top breathing room; the stats row
   and disclaimer are siblings of .hero-split, so trim .hero's bottom padding
   here and let the shell carry the closing space. */
.hero-shell .hero { padding-bottom: 0; }
.hero-shell > .container { padding-bottom: 64px; }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg::before, .hero-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: floatA 16s ease-in-out infinite alternate;
}
.hero-bg::before {
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, #FF8A00 0%, transparent 70%);
  top: -20vw; left: -10vw;
}
.hero-bg::after {
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, #00B370 0%, transparent 70%);
  bottom: -15vw; right: -10vw;
  animation-delay: -8s;
}
@keyframes floatA {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.15); }
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  z-index: 1;
}

/* Pointer-reactive hero glow (decorative; spring-followed in JS) */
.hero-cursor-glow {
  position: absolute;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,0,0.16) 0%, rgba(255,138,0,0) 62%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  will-change: transform;
}
.hero-shell:hover .hero-cursor-glow { opacity: 1; }

/* ----- Hero (visual block: badge / sub / trust / stats) ----- */
.hero {
  padding: 80px 0 100px;
  text-align: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 138, 0, 0.12);
  border: 1px solid rgba(255, 138, 0, 0.35);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 138, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0); }
}
.hero-sub {
  margin: 24px auto 0;
  max-width: 680px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-soft);
  font-weight: 400;
}

/* Trust strip under the hero copy */
.trust-strip {
  margin: 30px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.trust-chip .ic { width: 16px; height: 16px; }
.trust-strip .trust-chip:nth-child(1) .ic { color: var(--success-bright); }
.trust-strip .trust-chip:nth-child(2) .ic { color: var(--accent); }
.trust-strip .trust-chip:nth-child(3) .ic { color: var(--cyan); }

/* Hero entrance choreography (first paint) */
.hero .badge,
.hero .hero-sub,
.hero .trust-strip { animation: heroIn var(--dur-hero) var(--ease-out) both; }
.hero .badge       { animation-delay: 60ms; }
.hero .hero-sub    { animation-delay: 220ms; }
.hero .trust-strip { animation-delay: 410ms; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ----- Hero stats ----- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 72px;
  background: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.hstat {
  padding: 22px 18px;
  background: rgba(22, 32, 51, 0.85);
  backdrop-filter: blur(8px);
  text-align: center;
}
.hstat-num {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--accent);
}
.hstat-num.green { color: var(--success-bright); }
.hstat-num.cyan { color: var(--cyan); }
.hstat-num.gold { color: var(--gold); }
.hstat-label {
  margin-top: 8px;
  font-size: 11px;
  color: #8C99A3;            /* WCAG AA 5.45:1 on the stat tile */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ----- Section scaffolding ----- */
section {
  padding: 100px 0;
  position: relative;
}
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.section-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}
.section-title {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 720px;
}
.section-sub {
  margin-top: 20px;
  max-width: 640px;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.55;
}
.section-sub code,
.answer-define code, .answer-context code {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--accent);
}

/* Large faint section numerals for rhythm */
section[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: 26px;
  right: max(24px, calc(50% - 600px + 32px));   /* align to container right edge */
  font-size: clamp(64px, 11vw, 150px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--border-strong);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
section[data-num] .container { position: relative; z-index: 1; }
@media (max-width: 600px) { section[data-num]::before { opacity: 0.35; top: 14px; } }

/* Distinct band so security section reads apart while scrolling */
section#security {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Repeated mid-page conversion CTA */
.cta-band { display: flex; justify-content: center; padding: 4px 20px 60px; }

/* ----- Capabilities cards ----- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.cap-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft);
}
.cap-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
@media (hover: none) { .cap-card:hover { transform: none; } }
.cap-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  margin-bottom: 18px;
}
.cap-ic .ic { width: 22px; height: 22px; }
.cap-ic.orange { background: rgba(255,138,0,0.12); color: var(--accent); border: 1px solid rgba(255,138,0,0.32); }
.cap-ic.green { background: rgba(0,179,112,0.12); color: var(--success-bright); border: 1px solid rgba(0,179,112,0.32); }
.cap-ic.cyan { background: rgba(94,218,255,0.12); color: var(--cyan); border: 1px solid rgba(94,218,255,0.32); }
.cap-card h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.cap-card p {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* ----- Steps ----- */
.steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 56px;
}
.step {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
}
.step-num {
  display: inline-block;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF8A00 0%, #FFB000 100%);
  color: #0C1326;
  font-weight: 900;
  font-size: 18px;
  line-height: 42px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px -6px rgba(255,138,0,0.55);
}
.step h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.step p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.65;
}
.step ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: substep;
}
.step ol li {
  counter-increment: substep;
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.step ol li:last-child { border-bottom: 0; }
.step ol li::before {
  content: counter(substep);
  position: absolute;
  left: 0; top: 7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,138,0,0.12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 18px;
  font-family: 'JetBrains Mono', monospace;
}
.step code {
  background: rgba(255,138,0,0.13);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}
/* Gap connectors between step cards */
.steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 53px; right: -19px;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(255,138,0,0.15));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2;
}
.steps.is-inview .step:nth-child(1)::after { animation: railDraw 0.4s var(--ease-out) 0.30s forwards; }
.steps.is-inview .step:nth-child(2)::after { animation: railDraw 0.4s var(--ease-out) 0.48s forwards; }
@keyframes railDraw { to { transform: scaleX(1); } }
@media (max-width: 880px) { .steps .step:not(:last-child)::after { display: none; } }
/* Setup numbers pop in sequence on scroll-in */
.steps.is-inview .step-num { animation: numPop 0.55s var(--ease-spring); }
.steps.is-inview .step:nth-child(2) .step-num { animation-delay: 0.18s; }
.steps.is-inview .step:nth-child(3) .step-num { animation-delay: 0.36s; }
@keyframes numPop {
  0%   { transform: scale(0.5); box-shadow: 0 0 0 0 rgba(255,138,0,0.6); }
  60%  { box-shadow: 0 8px 30px -4px rgba(255,138,0,0.85); }
  100% { transform: scale(1); }
}

/* ----- Markets / server cards + Copy connector URL ----- */
.servers-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.srv-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.srv-card.green { border-left-color: var(--success-bright); }
.srv-card.cyan { border-left-color: var(--cyan); }
.srv-card.gold { border-left-color: var(--gold); }
.srv-info {
  flex: 1; min-width: 200px;
}
.srv-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.srv-name .ic { width: 16px; height: 16px; color: var(--text-soft); }
.srv-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  word-break: break-all;
}
.copy-btn {
  background: rgba(255,255,255,0.04);
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: transform   var(--dur-press) var(--ease-out),
              background   var(--dur-fast)  var(--ease-out-soft),
              border-color var(--dur-fast)  var(--ease-out-soft),
              color        var(--dur-fast)  var(--ease-out-soft);
}
.copy-btn .ic { width: 14px; height: 14px; }
.copy-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--border-strong); }
.copy-btn:active { transform: scale(0.96); }
.copy-btn.copied {
  background: rgba(0, 179, 112, 0.15);
  color: var(--success-bright);
  border-color: rgba(0, 179, 112, 0.4);
  animation: pop var(--dur-base) var(--ease-spring);
}
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
.copy-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  box-shadow: var(--ring-shadow);
}
.srv-card .copy-btn { min-height: 44px; }

/* One-token tip callout */
.one-token-tip {
  margin-top: 28px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255,138,0,0.08) 0%, rgba(22,32,51,0.4) 100%);
  border: 1px solid rgba(255,138,0,0.25);
  border-radius: var(--radius-md);
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 14.5px;
  color: var(--text-base);
}
.one-token-tip strong { color: var(--text-strong); }
.info-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,138,0,0.18);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 800;
  flex-shrink: 0;
}
.info-ic .ic { width: 18px; height: 18px; }

/* ----- Safety / trust cards ----- */
.safety-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.safety-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display: flex;
  gap: 18px;
}
.safety-card.warn { border-color: rgba(255,176,0,0.3); background: linear-gradient(135deg, rgba(255,176,0,0.04) 0%, var(--bg-surface) 60%); }
.safety-card.danger { border-color: rgba(239,69,74,0.3); background: linear-gradient(135deg, rgba(239,69,74,0.04) 0%, var(--bg-surface) 60%); }
.safety-card.ok { border-color: rgba(0,179,112,0.3); background: linear-gradient(135deg, rgba(0,179,112,0.04) 0%, var(--bg-surface) 60%); }
.safety-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.safety-ic .ic { width: 22px; height: 22px; }
.safety-card.ok .safety-ic { background: rgba(0,179,112,0.14); color: var(--success-bright); border: 1px solid rgba(0,179,112,0.32); }
.safety-card.warn .safety-ic { background: rgba(255,176,0,0.14); color: var(--warning); border: 1px solid rgba(255,176,0,0.32); }
.safety-card.danger .safety-ic { background: rgba(239,69,74,0.14); color: var(--danger-bright); border: 1px solid rgba(239,69,74,0.32); }
.safety-card.info .safety-ic { background: rgba(94,218,255,0.14); color: var(--cyan); border: 1px solid rgba(94,218,255,0.32); }
.safety-card h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
}
.safety-card p {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* ----- Permission callout (token responsibility note) ----- */
.perm-callout {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.perm-callout.ok { border-left: 3px solid var(--success-bright); }
.perm-callout.warn { border-left: 3px solid var(--accent); }
.perm-callout.info { border-left: 3px solid var(--cyan); }
.perm-callout h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.perm-callout h4 .ic { width: 18px; height: 18px; color: var(--accent); }
.perm-callout p {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.6;
}
.perm-callout p code {
  background: rgba(255,138,0,0.13);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}

/* ----- FAQ ----- */
.faq {
  margin-top: 48px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
details.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 20px 28px;
  cursor: pointer;
}
details.faq-item:last-child { border-bottom: 0; }
details.faq-item summary {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,138,0,0.12);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
details.faq-item p {
  margin-top: 14px;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.65;
}
details.faq-item[open] > *:not(summary) { animation: faqOpen var(--dur-base) var(--ease-out); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details.faq-item p code {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--accent);
}

/* ----- AI conversation mock ----- */
.chat-mock {
  width: 100%;
  margin: 40px 0 52px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 28px 64px -28px rgba(0,0,0,0.65);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.chat-avatar {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF8A00 0%, #FFB000 100%);
  color: #0C1326;
}
.chat-avatar .ic { width: 17px; height: 17px; }
.chat-name { font-weight: 800; font-size: 14px; color: var(--text-strong); }
.chat-dot {
  width: 8px; height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--success-bright);
  box-shadow: 0 0 0 3px rgba(0,230,139,0.16);
}
.chat-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; }
.chat-msg { max-width: min(480px, 86%); }
.chat-msg p {
  margin: 0;
  padding: 11px 15px;
  font-size: 14.5px;
  line-height: 1.5;
  border-radius: 14px;
}
.chat-msg.user { align-self: flex-end; }
.chat-msg.user p {
  background: linear-gradient(135deg, #FF8A00 0%, #FFB000 100%);
  color: #0C1326;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}
.chat-msg.ai { align-self: flex-start; }
.chat-msg.ai p {
  background: var(--bg-elevated);
  color: var(--text-base);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
/* The chat "builds" itself: messages arm hidden, JS reveals them */
.chat-mock.chat-armed .chat-msg {
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.chat-mock.chat-armed .chat-msg.show { opacity: 1; transform: none; }
.chat-typing { align-self: flex-start; max-width: min(480px, 86%); }
.chat-typing .bubble {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 13px 15px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px; border-bottom-left-radius: 4px;
}
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-mute);
  animation: typingBlink 1.2s var(--ease-in-out) infinite;
}
.chat-typing i:nth-child(2) { animation-delay: 0.18s; }
.chat-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingBlink {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* ════════════════════════════════════════════════════════════════════
   CONCEPT A HERO — two-column "live chat that trades itself"
   ════════════════════════════════════════════════════════════════════ */

/* Two-column hero grid; stacks on mobile via the .hero-cta rule + the
   .hero-split media query below. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  text-align: left;
}
.hero-left { min-width: 0; }
.hero-right { min-width: 0; }

/* The single <h1> is the hero headline now — sized for the left column. */
.hero-shell .hero-title {
  margin: 16px 0 0;
  font-size: clamp(30px, 3.7vw, 50px);
  line-height: 1.06;
}
/* Answer capsule reads as the hero subhead — the #1 GEO citation lever. */
.hero-shell .answer-capsule {
  margin: 16px 0 0;
  max-width: 52ch;
  color: var(--text-soft);
}
/* Legacy visual headline (no longer used in the hero, kept for safety) */
.hero-headline {
  margin: 18px 0 0;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}
.hero-headline-grad {
  background: linear-gradient(100deg, var(--accent), var(--gold) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-split .hero-sub { margin: 18px 0 0; max-width: 56ch; }
.hero-split .hero-cta { margin: 26px 0 0; }
.hero-split .trust-strip { margin: 22px 0 0; justify-content: flex-start; }
.hero-split .crumbs { margin-bottom: 16px; }

/* Stats row + disclaimer sit below the two columns, still inside the hero. */
.hero-shell .answer-facts { margin: 44px 0 0; }
.hero-shell .lead-disclaimer { margin: 18px 0 0; max-width: none; }
.lead-updated { color: var(--text-mute); }

/* Token CTA helper microcopy */
.cta-token-micro {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 21st.dev "blur-fade-up": staggered spring entrance for the hero left column */
.hero-fade {
  animation: blurFadeUp var(--dur-hero) var(--ease-spring) both;
}
.hero-left .crumbs         { animation-delay: 40ms; }
.hero-left .badge          { animation-delay: 90ms; }
.hero-left .hero-title     { animation-delay: 150ms; }
.hero-left .answer-capsule { animation-delay: 240ms; }
.hero-left .hero-cta       { animation-delay: 330ms; }
.hero-left .cta-token-micro{ animation-delay: 390ms; }
.hero-left .prompt-pills   { animation-delay: 450ms; }
.hero-left .trust-strip    { animation-delay: 520ms; }
.hero-shell .answer-facts  { animation-delay: 600ms; }
.hero-shell .lead-disclaimer { animation-delay: 660ms; }
@keyframes blurFadeUp {
  from { opacity: 0; transform: translateY(20px); filter: blur(11px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Prompt-suggestion pills — static chips that reinforce "things you can say" */
.prompt-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.prompt-pill {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.prompt-pill::before {
  content: '“';
  color: var(--accent);
  margin-right: 1px;
  font-weight: 800;
}
.prompt-pill::after { content: '”'; color: var(--accent); margin-left: 1px; font-weight: 800; }

/* Light-beam / radial spotlight accents behind the chat card */
.hero-beams {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-beams::before, .hero-beams::after {
  content: '';
  position: absolute;
  top: -30%;
  right: 4%;
  width: 46%;
  height: 150%;
  background: linear-gradient(180deg, rgba(255,138,0,0.10) 0%, rgba(255,138,0,0) 70%);
  transform: rotate(18deg);
  filter: blur(6px);
}
.hero-beams::after {
  right: 18%;
  width: 28%;
  background: linear-gradient(180deg, rgba(94,218,255,0.08) 0%, rgba(94,218,255,0) 70%);
  transform: rotate(-12deg);
}

/* Hero chat mock as focal centerpiece */
.chat-mock.chat-hero {
  margin: 0;
  box-shadow: 0 40px 90px -36px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,138,0,0.06);
}

/* ----- Tool-call card (the highest-leverage "it's real" element) ----- */
.chat-msg.chat-tool { align-self: stretch; max-width: 100%; }
.chat-tool-card {
  border: 1px solid rgba(0,179,112,0.35);
  background: linear-gradient(135deg, rgba(0,179,112,0.07) 0%, var(--bg-elevated) 60%);
  border-radius: 14px;
  padding: 13px 15px;
}
.chat-tool-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-tool-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: -0.01em;
}
.chat-tool-check {
  margin-left: auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--success-bright);
  color: #0C1326;
}
.chat-tool-check .ic { width: 13px; height: 13px; stroke-width: 3; }
.chat-tool-result { margin-top: 10px; }
.chat-tool-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--success-bright);
  background: rgba(0,179,112,0.12);
  border: 1px solid rgba(0,179,112,0.3);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
}
/* The tool card gets a subtle spring pop when revealed */
.chat-mock.chat-armed .chat-msg.chat-tool.show .chat-tool-card {
  animation: toolPop var(--dur-base) var(--ease-spring) both;
}
@keyframes toolPop {
  from { transform: scale(0.96); }
  to   { transform: scale(1); }
}

/* ----- .cta-token pulsing ring (reserve solid accent for token CTAs only) ----- */
.cta-token { position: relative; }
.cta-token::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,138,0,0.55);
  animation: tokenRing 2.4s var(--ease-out) infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes tokenRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,138,0,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(255,138,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,138,0,0); }
}

/* Typewriter caret on the first user message */
.chat-msg[data-typewriter] .tw-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: twBlink 0.9s steps(1) infinite;
}
@keyframes twBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ----- #token "Open AI integrations" CTA row ----- */
.token-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.token-cta-note { font-size: 13px; color: var(--text-mute); line-height: 1.5; max-width: 46ch; }
.token-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.token-link strong { color: var(--accent); }
.token-link:hover { color: var(--accent-bright); }

/* ════════════════════════════════════════════════════════════════════
   CONCEPT B — "Plug ChatGPT into the markets" cable diagram (in #markets)
   ════════════════════════════════════════════════════════════════════ */
.market-flow {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255,138,0,0.05) 0%, var(--bg-surface) 55%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.market-flow-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--text-strong);
}
.market-flow-sub { font-size: 15px; color: var(--text-soft); line-height: 1.6; margin: 0 0 22px; max-width: 46ch; }
.market-diagram { min-width: 0; }
.flow-svg { width: 100%; height: auto; display: block; overflow: visible; }
.flow-label { fill: var(--text-soft); font-size: 13px; font-weight: 700; font-family: inherit; }
.flow-hub-glyph { color: #0C1326; stroke: #0C1326; }
.flow-node-name { fill: var(--text-strong); font-size: 14px; font-weight: 800; font-family: inherit; }
.flow-node-sub  { fill: var(--text-mute); font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }

/* Cable draw-on: stroke-dashoffset reveal (pathLength normalized to 100 in JS) */
.flow-cable {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.85;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 4px rgba(255,138,0,0.35));
}
.market-flow.is-inview .flow-cable { animation: cableDraw 1s var(--ease-out) forwards; }
.market-flow.is-inview .flow-cable:nth-child(2) { animation-delay: 0.12s; }
.market-flow.is-inview .flow-cable:nth-child(3) { animation-delay: 0.24s; }
.market-flow.is-inview .flow-cable:nth-child(4) { animation-delay: 0.36s; }
@keyframes cableDraw { to { stroke-dashoffset: 0; } }

/* Market tiles power on in sequence; pulses hidden until cables drawn */
.flow-node { opacity: 0; transform: translateX(8px); }
.market-flow.is-inview .flow-node { animation: nodeOn 0.5s var(--ease-out) forwards; }
.market-flow.is-inview .flow-node[data-node="1"] { animation-delay: 0.5s; }
.market-flow.is-inview .flow-node[data-node="2"] { animation-delay: 0.66s; }
.market-flow.is-inview .flow-node[data-node="3"] { animation-delay: 0.82s; }
.market-flow.is-inview .flow-node[data-node="4"] { animation-delay: 0.98s; }
@keyframes nodeOn { to { opacity: 1; transform: none; } }
.flow-pulses { opacity: 0; }
.market-flow.is-inview .flow-pulses { animation: fadeInPulse 0.6s ease 1.1s forwards; }
@keyframes fadeInPulse { to { opacity: 1; } }

/* Micro candlestick sparklines inside each tile */
.flow-spark .cs.cs-up { fill: var(--success-bright); }
.flow-spark .cs.cs-dn { fill: var(--danger-bright); }
.flow-spark .csw { stroke: var(--text-mute); stroke-width: 1; }
.flow-spark .cs, .flow-spark .csw { opacity: 0; }
.market-flow.is-inview .flow-node[data-node="1"] .flow-spark .cs,
.market-flow.is-inview .flow-node[data-node="1"] .flow-spark .csw { animation: sparkOn 0.4s ease 0.7s forwards; }
.market-flow.is-inview .flow-node[data-node="2"] .flow-spark .cs,
.market-flow.is-inview .flow-node[data-node="2"] .flow-spark .csw { animation: sparkOn 0.4s ease 0.86s forwards; }
.market-flow.is-inview .flow-node[data-node="3"] .flow-spark .cs,
.market-flow.is-inview .flow-node[data-node="3"] .flow-spark .csw { animation: sparkOn 0.4s ease 1.02s forwards; }
.market-flow.is-inview .flow-node[data-node="4"] .flow-spark .cs,
.market-flow.is-inview .flow-node[data-node="4"] .flow-spark .csw { animation: sparkOn 0.4s ease 1.18s forwards; }
@keyframes sparkOn { to { opacity: 1; } }

/* ----- Footer ----- */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 36px;
  text-align: center;
  background: var(--bg-surface);
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.foot-disclaimer {
  max-width: 720px;
  margin: 0 auto 20px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.7;
}
.foot-bottom {
  color: #8C99A3;            /* WCAG AA 5.59:1 on --bg-surface */
  font-size: 12px;
}

/* ----- Toast (copy feedback live region) ----- */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(135deg, #00B370 0%, #00E68B 100%);
  color: #0C1326;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 12px 30px -8px rgba(0, 179, 112, 0.5);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  z-index: 99;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ----- Scroll progress + back-to-top (JS-injected page chrome) ----- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #FF8A00 0%, #FFB000 50%, #FFD166 100%);
  box-shadow: 0 0 12px rgba(255,138,0,0.5);
  z-index: 1000;
  will-change: transform;
}
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              background 0.18s var(--ease-out-soft), color 0.18s var(--ease-out-soft), border-color 0.18s var(--ease-out-soft);
  z-index: 999;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--bg-surface); border-color: var(--accent); color: var(--accent); }
.to-top:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: var(--ring-shadow); }
@media (max-width: 520px) { .to-top { right: 14px; bottom: 14px; } }

/* ----- Reveal-on-scroll ----- */
.reveal { opacity: 0; }
.reveal.in {
  opacity: 1;
  animation: revealUp var(--dur-slow) var(--ease-out) backwards;
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
}
.cap-grid .cap-card:nth-child(2).in, .steps .step:nth-child(2).in { animation-delay: 70ms; }
.cap-grid .cap-card:nth-child(3).in, .steps .step:nth-child(3).in { animation-delay: 140ms; }

/* Icons draw themselves on reveal (delight) */
.cap-card.in .cap-ic .ic,
.safety-grid.is-inview .safety-ic .ic { animation: iconDraw 0.9s var(--ease-out) backwards; }
.cap-grid .cap-card:nth-child(2).in .cap-ic .ic { animation-delay: 0.10s; }
.cap-grid .cap-card:nth-child(3).in .cap-ic .ic { animation-delay: 0.20s; }
.safety-grid.is-inview .safety-card:nth-child(2) .safety-ic .ic { animation-delay: 0.10s; }
.safety-grid.is-inview .safety-card:nth-child(3) .safety-ic .ic { animation-delay: 0.20s; }
.safety-grid.is-inview .safety-card:nth-child(4) .safety-ic .ic { animation-delay: 0.30s; }
@keyframes iconDraw {
  from { stroke-dasharray: 100; stroke-dashoffset: 100; }
  to   { stroke-dasharray: 100; stroke-dashoffset: 0; }
}

/* Press feedback for the brand button */
.qeds-button {
  transition: transform var(--dur-press) var(--ease-out), opacity 150ms ease, color 100ms ease;
}
.qeds-button:not(:disabled):not([data-loading]):active { transform: scale(0.97); }

/* ===== 4. NEW ChatGPT-page classes (authored here) ===== */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;color:var(--text-mute);font-size:13px;margin-bottom:18px}
.hero-title{font-size:clamp(30px,5vw,52px);line-height:1.08;font-weight:800;color:var(--text-strong);margin:0 0 18px;letter-spacing:-0.02em}
.hero-grad{background:linear-gradient(100deg,var(--accent),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.answer-capsule{font-size:clamp(17px,2.4vw,21px);line-height:1.55;color:var(--text-base);max-width:62ch;margin:0 0 12px}
.answer-updated{font-size:13px;color:var(--text-mute);margin:0 0 20px}
.answer-define,.answer-context{max-width:70ch;line-height:1.65;color:var(--text-soft);margin:0 0 16px}
.answer-context q{color:var(--text-base);font-style:italic}
.answer-facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;padding:0;margin:20px 0 26px}
.answer-facts li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.af-num{font-size:26px;font-weight:800;color:var(--accent)}
.af-num.green{color:var(--success-bright)} .af-num.cyan{color:var(--cyan)} .af-num.gold{color:var(--gold)}
.af-label{font-size:13px;color:var(--text-mute);line-height:1.4}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 22px}
.lead-disclaimer{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:var(--text-mute);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;max-width:80ch}
.lead-disclaimer .ic{color:var(--accent);flex:0 0 auto;margin-top:2px}
.prereq-box{display:flex;gap:14px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:18px 20px;margin:8px 0 28px}
.prereq-ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:rgba(255,138,0,0.18);color:var(--accent);display:grid;place-items:center}
.prereq-ic .ic{width:18px;height:18px}
.prereq-box h3{margin:0 0 8px;font-size:16px;color:var(--text-strong)}
.prereq-box ul{margin:0;padding-left:18px;line-height:1.6;color:var(--text-soft)}
.token-howto{display:grid;gap:18px;margin-top:18px}
.token-steps{line-height:1.7;color:var(--text-soft);max-width:70ch;padding-left:20px}
.token-steps li{margin:0 0 6px}
.token-steps strong{color:var(--text-strong)}
.cmp-wrap{margin-top:34px;overflow-x:auto}
.cmp-title{font-size:18px;color:var(--text-strong);margin:0 0 12px}
.cmp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.cmp-table th,.cmp-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)}
.cmp-table thead th{color:var(--text-strong);font-weight:600;border-bottom:1px solid var(--border-strong)}
.cmp-table tbody th{font-weight:500;color:var(--text-base)}
.cmp-table td.yes{color:var(--success-bright)} .cmp-table td.no{color:var(--danger-bright)} .cmp-table td.muted{color:var(--text-mute)}
.cmp-note{font-size:13.5px;color:var(--text-mute);margin-top:12px;max-width:80ch}
.final-cta{text-align:center;padding:72px 0 96px}
.final-cta .section-title,.final-cta .section-sub{margin-left:auto;margin-right:auto}
.final-cta .hero-cta{justify-content:center}

/* ===== 5. RESPONSIVE ===== */
@media (min-width: 600px) and (max-width: 880px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .safety-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .container { padding: 0 20px; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px); right: 0;
    flex-direction: column; align-items: stretch;
    gap: 2px;
    min-width: 220px;
    padding: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 44px -12px rgba(0,0,0,0.7);
    z-index: 1000;
  }
  .nav-open .nav-links { display: flex; }
  .nav-links a { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text-base); }
  .nav-links a:hover { background: rgba(255,255,255,0.06); color: var(--text-strong); }
  .nav-toggle { display: inline-flex; }
  .hero { padding: 60px 0 70px; }
  .hero-sub { font-size: 16px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  /* Concept A hero stacks: copy first, chat below (server-rendered order) */
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .hero-split .trust-strip { justify-content: flex-start; }
  /* Concept B cable diagram stacks */
  .market-flow { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  section { padding: 64px 0; }
  .hero-shell > .container { padding-bottom: 48px; }
  .hero-shell .answer-facts { margin-top: 32px; }
  .cap-grid { grid-template-columns: 1fr; }
  .servers-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr; }
  .section-title { font-size: 28px; }
}
@media (max-width: 520px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .qeds-button { justify-content: center; }
  .nav-cta .qeds-button__label { display: none; }
  .nav-cta .ic { display: inline-block; }
}

/* ===== 6. REDUCED MOTION — respect globally ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .hero-bg::before, .hero-bg::after { animation: none !important; }
  .badge-dot { animation: none !important; box-shadow: none; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .scroll-progress { display: none !important; }
  .cap-card .cap-ic .ic, .safety-card .safety-ic .ic { animation: none !important; stroke-dasharray: 0 !important; }
  .steps .step-num { animation: none !important; transform: none !important; }
  .steps .step:not(:last-child)::after { animation: none !important; transform: scaleX(1); }
  .chat-mock.chat-armed .chat-msg { opacity: 1 !important; transform: none !important; }
  .chat-mock.chat-armed .chat-msg.chat-tool .chat-tool-card { animation: none !important; transform: none !important; }
  .chat-typing { display: none !important; }
  .copy-btn.copied { animation: none !important; }
  .hero-cursor-glow { display: none !important; }

  /* ── Concept A hero: blur-fade-up, token ring, typewriter neutralize ── */
  .hero-fade { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .cta-token::after { animation: none !important; box-shadow: none !important; }
  .chat-msg[data-typewriter] .tw-caret { animation: none !important; display: none !important; }

  /* ── Concept B cable diagram: draw-on, nodes, candlesticks, pulses static ── */
  .flow-cable { stroke-dashoffset: 0 !important; animation: none !important; }
  .flow-node { opacity: 1 !important; transform: none !important; animation: none !important; }
  .flow-spark .cs, .flow-spark .csw { opacity: 1 !important; animation: none !important; }
  .flow-pulses { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER  (ported from iqoption-mcp-guide; QEDS dark)
   A pill toggle in the nav that opens a dropdown of locale homes. Text
   labels only (no flag images) — relative links between locales. The
   page is EN-only today; the menu lists every locale the build emits.
   ════════════════════════════════════════════════════════════════════ */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-name { display: inline-flex; align-items: center; line-height: 1; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.lang-toggle:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.lang-toggle:focus-visible,
.lang-menu a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lang-caret { font-size: 10px; opacity: 0.8; transition: transform var(--dur-base) var(--ease-out); }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 188px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px -12px rgba(0,0,0,0.7);
  z-index: 1000;
  transform-origin: top right;
  animation: langMenuIn var(--dur-base) var(--ease-out);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-base);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.14s, color 0.14s;
}
.lang-menu a:hover { background: rgba(255,255,255,0.06); color: var(--text-strong); }
.lang-menu a[aria-current="true"] { color: var(--accent); background: rgba(255,138,0,0.10); }
.lang-menu a[aria-current="true"]::after { content: "✓"; font-weight: 800; }
.lang-toggle:active { transform: scale(0.94); }
.lang-menu a:active { transform: scale(0.98); }

@keyframes langMenuIn {
  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* RTL: anchor the dropdown to the left edge for right-to-left locales */
[dir="rtl"] .lang-menu { right: auto; left: 0; transform-origin: top left; }

@media (max-width: 880px) {
  /* keep the switcher beside the hamburger, before the nav-links dropdown */
  .lang-toggle { padding: 7px 10px; font-size: 12.5px; }
  .lang-menu { min-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-menu { animation: none !important; }
  .lang-caret { transition: none !important; }
  .lang-toggle:active, .lang-menu a:active { transform: none !important; }
}