/* ==========================================================================
   tacticstrade.ai — landing page
   Tokens transcribed from design-kit.png; components follow 1screen–5screen.
   Dark-only by design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Primary */
  --gold:   #f5b000;
  --orange: #ff8a00;
  --purple: #7c3aed;
  --blue:   #3b82f6;
  --green:  #22c55e;

  /* Neutrals */
  --n-900: #0b0d10;
  --n-800: #11151c;
  --n-700: #1a1f29;
  --n-600: #252a36;
  --n-500: #334155;
  --n-400: #475569;
  --n-200: #e5e7eb;
  --n-050: #f8fafc;

  /* Semantic */
  --success: #22c55e;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --info:    #3b82f6;

  /* Gradients */
  --grad-gold:   linear-gradient(135deg, #f5b000 0%, #ff8a00 100%);
  --grad-purple: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  --grad-green:  linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --grad-dark:   linear-gradient(135deg, #f5b000 0%, #000000 100%);

  /* Page surfaces */
  --bg:        #050608;
  --surface-1: var(--n-900);
  --surface-2: var(--n-800);
  --surface-3: var(--n-700);

  /* Lines */
  --line:      rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-gold: rgba(245, 176, 0, 0.38);

  /* Text */
  --fg:       var(--n-050);
  --fg-muted: #98a2b3;
  --fg-dim:   #6b7583;

  /* Radius */
  --r-4: 4px;  --r-8: 8px;   --r-12: 12px;
  --r-16: 16px; --r-24: 24px; --r-32: 32px; --r-full: 999px;

  /* Spacing (8px base) */
  --s-4: 4px;   --s-8: 8px;   --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px;
  --s-80: 80px; --s-96: 96px; --s-128: 128px;

  /* Rhythm */
  --shell: 1240px;
  --gutter: 24px;
  --section-y: clamp(72px, 8vw, 112px);

  /* Type */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Body copy one step below --fg */
  --fg-body: #e5e7eb;

  /* Chart semantics. Red/blue, not red/green: blue is the standard accessible
     substitution for green and keeps red reading as "down". */
  --chart-up:   #3b82f6;
  --chart-down: #ef4444;

  /* Accent text — readable on the current background */
  --accent-purple: #a78bfa;
  --accent-blue:   #60a5fa;

  /* Themeable surfaces */
  --fill-1: rgba(255, 255, 255, 0.015);
  --fill-2: rgba(255, 255, 255, 0.02);
  --fill-3: rgba(255, 255, 255, 0.05);
  --tint-gold:    rgba(245, 176, 0, 0.07);
  --tint-gold-hi: rgba(245, 176, 0, 0.1);
  --panel-grad:       linear-gradient(180deg, #0c0e12 0%, #08090c 100%);
  --panel-grad-solid: #0a0b0e;
  --card-grad:        linear-gradient(180deg, rgba(17, 21, 28, 0.72), rgba(8, 9, 12, 0.72));
  --card-grad-strong: linear-gradient(180deg, rgba(17, 21, 28, 0.86), rgba(8, 9, 12, 0.86));
  --cta-grad:         linear-gradient(180deg, rgba(20, 16, 6, 0.92), rgba(8, 9, 12, 0.92));
  --header-bg:  rgba(5, 6, 8, 0.86);
  --overlay-bg: rgba(5, 6, 8, 0.98);
  --footer-bg:  #030405;
  --avatar-bg: #ffffff;
  --avatar-fg: #16181d;
  --logo-ink:  #ffffff;
  --btn-sec-border:    rgba(255, 255, 255, 0.22);
  --btn-sec-border-hi: rgba(255, 255, 255, 0.45);
  --btn-sec-bg-hi:     rgba(255, 255, 255, 0.04);

  /* Code block */
  --code-bg:   rgba(0, 0, 0, 0.45);
  --code-fg:   #cfd6e4;
  --code-ln:   #3f4756;
  --code-kw:   #c792ea;
  --code-fn:   #82aaff;
  --code-num:  #22c55e;
  --code-punc: #7e879b;

  /* Chart chrome */
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-axis: rgba(255, 255, 255, 0.12);
  --curve-end:  #ffffff;

  /* Decoration. On dark, gold reads. On light it disappears at any alpha that
     is not garish, so the mesh and arcs go neutral grey there instead — gold
     stays only where it carries meaning (buttons, badges, active states). */
  --decor-opacity: 1;
  --decor-filter: opacity(var(--decor-opacity));
  --arc-strong: rgba(245, 176, 0, 0.5);
  --arc-mid:    rgba(245, 176, 0, 0.42);
  --arc-soft:   rgba(245, 176, 0, 0.12);
  --arc-glow:   rgba(245, 176, 0, 0.3);
  --rule-accent: rgba(245, 176, 0, 0.55);
  --panel-border: var(--line-gold);

  /* Effects */
  --shadow-panel: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }

::selection { background: rgba(245, 176, 0, 0.32); color: #fff; }

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

.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; top: -100px; left: 16px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-8);
  background: var(--gold); color: #14100a; font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. Typography scale (design-kit)
   -------------------------------------------------------------------------- */
.h1 { font-size: clamp(40px, 5.2vw, 64px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; }
.h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.16; }
.h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; }
.h4 { font-size: 20px; font-weight: 600; line-height: 1.3; }

.g        { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-solid  { color: var(--gold); }
.g-purple { color: var(--accent-purple); }
.g-blue   { color: var(--accent-blue); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1360px; }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--flush-top { padding-top: 0; }
.section--pull-bottom { padding-bottom: clamp(40px, 4vw, 56px); }
.section--pull-top    { padding-top: clamp(40px, 4vw, 56px); }
/* Sections carrying a bleeding mesh/arc decoration must clip it, otherwise the
   decoration widens the document and creates a horizontal scrollbar. */
.section--clip { overflow: hidden; }
.section > .shell { position: relative; z-index: 1; }

.section-head { text-align: center; max-width: 780px; margin: 0 auto clamp(40px, 4.5vw, 56px); }
.section-head .h2 { margin-top: var(--s-24); }
.section-lede { margin-top: var(--s-16); color: var(--fg-muted); font-size: 16px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   5. Eyebrow badge
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-gold);
  background: var(--tint-gold);
  color: var(--gold);
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
.badge svg { width: 15px; height: 15px; flex: none; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  font-size: 15px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn--primary { background: var(--grad-gold); color: #14100a; box-shadow: 0 10px 26px -14px rgba(245, 176, 0, 0.9); }
.btn--primary:hover { box-shadow: 0 16px 40px -14px rgba(245, 176, 0, 0.75); }

.btn--secondary { background: transparent; border-color: var(--btn-sec-border); color: var(--fg); }
.btn--secondary:hover { border-color: var(--btn-sec-border-hi); background: var(--btn-sec-bg-hi); }

.btn--ghost { background: transparent; color: var(--fg-muted); }
.btn--ghost:hover { color: var(--fg); }

.btn--outline-purple { background: transparent; border-color: rgba(124, 58, 237, 0.5); color: var(--accent-purple); }
.btn--outline-purple:hover { border-color: var(--purple); background: rgba(124, 58, 237, 0.1); }

.btn--outline-blue { background: transparent; border-color: rgba(59, 130, 246, 0.5); color: var(--accent-blue); }
.btn--outline-blue:hover { border-color: var(--blue); background: rgba(59, 130, 246, 0.1); }

.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--block { width: 100%; }

.btn--icon { width: 46px; height: 46px; padding: 0; background: var(--grad-gold); color: #14100a; }
.btn--icon svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   7. Decorative mesh + arcs
   -------------------------------------------------------------------------- */
.decor { position: absolute; pointer-events: none; z-index: 0; }
.decor img {
  width: 100%; height: auto;
  filter: var(--decor-filter);
  /* Every decoration sits inside a `.section--clip`. Without a mask the mesh
     ends on that clip edge as a hard straight line, which is what makes the
     screens read as stacked slabs instead of one continuous page. Feathering
     all four edges lets each section bleed into the next. */
  -webkit-mask-image: radial-gradient(ellipse 46% 40% at 47% 50%, #000 20%, rgba(0, 0, 0, 0.5) 55%, transparent 88%);
          mask-image: radial-gradient(ellipse 46% 40% at 47% 50%, #000 20%, rgba(0, 0, 0, 0.5) 55%, transparent 88%);
}

.decor--hero    { left: -6%;  bottom: -10%; width: 80%; opacity: 0.95; }
.decor--ai-l    { left: -8%;  bottom: -10%; width: 70%; opacity: 0.9; }
.decor--ai-r    { right: -8%; bottom: -12%; width: 62%; opacity: 0.55; transform: scaleX(-1); }
.decor--bt-r    { right: -16%; top: 4%;      width: 44%; opacity: 0.3; }
.decor--price-l { left: -22%;  top: 8%;      width: 48%; opacity: 0.45; transform: rotate(-12deg); }
.decor--price-r { right: -22%; top: 8%;      width: 48%; opacity: 0.45; transform: rotate(12deg) scaleX(-1); }

/* Large concentric arcs behind the markets band (2screen). */
.arcs {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
  opacity: var(--decor-opacity);
  /* Same reasoning as .decor img — fade the arcs out before the section ends. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 76%, transparent 100%);
}
/* Two huge circles per side. Sized and offset in vw so the visible bulge lands
   ~350px inside the left/right margins at any viewport, instead of the arc's
   geometry drifting with the section's height. */
.arc { position: absolute; border-radius: 50%; aspect-ratio: 1 / 1; width: 200vw; border: 1px solid var(--arc-mid); }
.arc--1 { left:  -177vw; top: -78vw; border-color: var(--arc-strong); box-shadow: 0 0 34px var(--arc-glow); }
.arc--2 { left:  -198vw; top: -72vw; width: 210vw; border-color: var(--arc-soft); }
.arc--3 { right: -177vw; top: -78vw; border-color: var(--arc-mid); box-shadow: 0 0 34px var(--arc-glow); }
.arc--4 { right: -198vw; top: -72vw; width: 210vw; border-color: var(--arc-soft); }

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.header.is-stuck {
  background: var(--header-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line-soft);
}
.header__inner { display: flex; align-items: center; gap: 32px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand__mark { width: 34px; height: 30px; color: var(--logo-ink); }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.brand__name .dot { color: var(--gold); }

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: 34px; }
.nav__link { position: relative; font-size: 15px; font-weight: 500; color: var(--fg-body); transition: color 0.18s ease; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  border-radius: 2px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.header__login { font-size: 15px; font-weight: 500; color: var(--fg-body); transition: color 0.18s ease; }
.header__login:hover { color: var(--fg); }

.burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-8); cursor: pointer;
}
.burger__box { position: relative; width: 18px; height: 12px; }
.burger__box span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--fg); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 5px; }
.burger__box span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 76px 0 0; z-index: 99;
  display: none; flex-direction: column; gap: 2px;
  padding: 24px var(--gutter) 40px;
  background: var(--overlay-bg);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-soft);
  overflow-y: auto;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a:not(.btn) {
  padding: 15px 4px; font-size: 17px; font-weight: 500;
  color: var(--fg-body); border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:not(.btn):hover { color: var(--fg); }

/* The drawer carries its own theme switch: on narrow viewports the header row
   has no space left for one next to the brand, CTA and burger. */
.mobile-nav__theme {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 4px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--fg-body);
  font-size: 17px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.mobile-nav__theme:hover { color: var(--fg); }
.mobile-nav__theme span { flex: 1 1 auto; }
.mobile-nav__theme svg { width: 19px; height: 19px; }
.mobile-nav__theme .i-sun { display: none; }
[data-theme="light"] .mobile-nav__theme .i-sun  { display: block; }
[data-theme="light"] .mobile-nav__theme .i-moon { display: none; }
.mobile-nav .btn { margin-top: 24px; }

/* --------------------------------------------------------------------------
   9. Hero (1screen)
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(40px, 5vw, 64px) clamp(90px, 11vw, 160px); overflow: hidden; }
.hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.hero__title { margin-top: var(--s-24); }
.hero__title span { display: block; }
.hero__lede { margin-top: var(--s-24); max-width: 44ch; color: var(--fg-body); font-size: 16px; line-height: 1.75; opacity: 0.86; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s-40); }
.hero__pills { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: var(--s-48); }

.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-body); }
.pill svg { width: 16px; height: 16px; color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   10. App mock — shared panel chrome
   -------------------------------------------------------------------------- */
.mock {
  position: relative;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-16);
  background: var(--panel-grad);
  box-shadow: var(--shadow-panel), 0 0 90px -30px rgba(245, 176, 0, 0.35);
  overflow: hidden;
}
.mock--plain { border-color: var(--line); box-shadow: var(--shadow-panel); }

.mock__bar { display: flex; align-items: center; gap: 11px; padding: 18px 22px; }
.mock__bar .brand__mark { width: 26px; height: 23px; }
.mock__bar .brand__name { font-size: 16px; }

.mock__body { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 14px; padding: 0 18px 18px; }
.mock__side { display: flex; flex-direction: column; gap: 2px; }

.mock__nav {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-8);
  font-size: 14px; font-weight: 500; color: var(--fg-muted);
}
.mock__nav .ico {
  width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-4);
}
.mock__nav .ico svg { width: 14px; height: 14px; }
.mock__nav.is-active { background: var(--tint-gold-hi); color: var(--gold); font-weight: 600; }
.mock__nav.is-active .ico { border-color: var(--line-gold); }

.mock__panel {
  min-width: 0; padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-12);
  background: var(--fill-1);
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.row--top { align-items: flex-start; }

.select {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 13px;
  border: 1px solid var(--line); border-radius: var(--r-8);
  font-size: 13px; color: var(--fg-body);
}
.select svg { width: 14px; height: 14px; opacity: 0.7; }

.seg { display: inline-flex; gap: 6px; }
.seg button {
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r-8);
  background: transparent;
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.seg button:hover { color: var(--fg); border-color: var(--btn-sec-border); }
.seg button[aria-pressed="true"] { color: var(--gold); border-color: var(--line-gold); background: var(--tint-gold-hi); }
.seg--purple button[aria-pressed="true"] { color: var(--accent-purple); border-color: rgba(124, 58, 237, 0.5); background: rgba(124, 58, 237, 0.12); }

.metric__k { font-size: 13px; color: var(--fg-muted); }
.metric__v { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--chart-up); letter-spacing: -0.5px; }

/* Charts */
.chart { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.chart__y {
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 0 22px;
  font-size: 11px; color: var(--fg-muted); text-align: right;
}
.chart__plot { position: relative; min-width: 0; }
.chart__svg { width: 100%; height: auto; overflow: visible; }
.chart__x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--fg-muted); }

.curve { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curve--purple { stroke: #a855f7; }
.curve--glow { filter: drop-shadow(0 0 5px rgba(245, 176, 0, 0.6)); }
.curve--animate { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-revealed .curve--animate { animation: draw 2.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.grid-line { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 3 5; }
.axis-line { stroke: var(--chart-axis); stroke-width: 1; }
.curve-end { fill: var(--curve-end); filter: drop-shadow(0 0 7px rgba(245, 176, 0, 0.95)); }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.tile { padding: 13px 13px; border: 1px solid var(--line-soft); border-radius: var(--r-12); background: var(--fill-2); }
.tile__k { font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; }
.tile__v { margin-top: 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }
.tile__v--up { color: var(--chart-up); }
.tile__v--down { color: var(--chart-down); }

/* --------------------------------------------------------------------------
   11. Markets (2screen)
   -------------------------------------------------------------------------- */
.markets__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; max-width: 1080px; margin-inline: auto;
}

.market-card {
  padding: 26px 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  background: var(--card-grad);
  text-align: center;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.market-card:hover { transform: translateY(-3px); }
.market-card--gold:hover   { border-color: var(--line-gold); }
.market-card--purple:hover { border-color: rgba(124, 58, 237, 0.45); }

.market-card__head {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.market-card--gold   .market-card__head { color: var(--gold); }
.market-card--purple .market-card__head { color: var(--accent-purple); }
.market-card__head .ico {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid currentColor;
}
.market-card__head .ico svg { width: 17px; height: 17px; }

.tokens { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 22px; }
.token {
  width: 54px; height: 54px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
}
.token svg { width: 30px; height: 30px; }
.token--btc  { background: #f7931a; }
.token--eth  { background: #fff; color: #16181d; border: 1px solid var(--line); }
.token--sol  { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.12); }
.token--bnb  { background: rgba(245, 176, 0, 0.14); border: 1px solid var(--gold); color: var(--gold); }
.token--poly { background: #2b5cff; }
.token--kalshi  { background: linear-gradient(135deg, #0b3b46, #12b4c7); }
.token--kalshi2 { background: linear-gradient(135deg, #0d3b2e, #1fbf7a); }
.token--limitless { background: #7c3aed; }
.token--more {
  width: auto; height: 44px; padding-inline: 18px;
  border-radius: var(--r-full);
  background: var(--fill-3);
  color: var(--fg-body); font-size: 14px; font-weight: 500;
}

.market-card__meta { font-size: 15px; line-height: 1.75; color: var(--fg-body); opacity: 0.85; }

/* --------------------------------------------------------------------------
   12. Feature grid (2screen)
   -------------------------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.feature {
  padding: 28px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--card-grad);
  text-align: center;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.feature:hover { border-color: var(--line-gold); transform: translateY(-4px); }
.feature__icon { width: 46px; height: 46px; margin: 0 auto 18px; color: var(--gold); }
.feature__icon svg { width: 100%; height: 100%; }
.feature__title { font-size: 13.5px; font-weight: 700; }
.feature__rule { display: block; width: 34px; height: 2px; margin: 12px auto 14px; border-radius: 2px; background: var(--grad-gold); opacity: 0.7; }
.feature__text { font-size: 13.5px; line-height: 1.7; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   13. Backtest / strategy IDE (3screen)
   -------------------------------------------------------------------------- */
.bt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.4fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.ide__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.crumbs { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fg-muted); }
.crumbs b { color: var(--fg); font-weight: 600; }
.crumbs svg { width: 14px; height: 14px; opacity: 0.5; }
.ide__bar-actions { display: flex; gap: 10px; }

.ide__body { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 16px; padding: 16px; }
.ide__col { min-width: 0; display: grid; gap: 14px; align-content: start; }

.card { border: 1px solid var(--line-soft); border-radius: var(--r-12); background: var(--fill-1); }
.card__pad { padding: 16px; }

.tabs { display: flex; gap: 4px; padding: 4px 8px 0; border-bottom: 1px solid var(--line-soft); }
.tab {
  padding: 10px 14px 12px;
  border: 0; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--fg-muted);
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }

/* Code block with a line-number gutter */
.code {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px;
  padding: 16px 18px;
  font-family: var(--mono); font-size: 13px; line-height: 1.85;
  overflow-x: auto;
}
.code__ln { font-variant-numeric: tabular-nums; color: var(--code-ln); text-align: right; user-select: none; white-space: pre; }
.code__src { margin: 0; white-space: pre; color: var(--code-fg); }
.code .k { color: var(--code-kw); }
.code .f { color: var(--code-fn); }
.code .n { color: var(--code-num); }
.code .c { color: var(--code-num); }
.code .p { color: var(--code-punc); }
.code__expand { position: absolute; top: 14px; right: 14px; color: var(--fg-dim); }
.code__expand svg { width: 15px; height: 15px; }

.field-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; overflow: hidden; white-space: nowrap;
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-8);
  background: var(--fill-2);
  font-size: 13px; color: var(--fg-body);
}
.field svg { width: 14px; height: 14px; opacity: 0.6; flex: none; }
.field__unit { color: var(--fg-muted); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }

.assets { display: flex; gap: 2px; padding: 0 4px; border-bottom: 1px solid var(--line-soft); }
.asset {
  padding: 11px 15px;
  border: 0; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--fg-muted);
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.asset:hover { color: var(--fg); }
.asset[aria-pressed="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.asset--add { color: var(--fg-dim); display: inline-flex; align-items: center; gap: 6px; }
.asset--add svg { width: 13px; height: 13px; }

/* Trades strip */
.trades__head { display: flex; align-items: center; justify-content: space-between; }
.trades__legend { font-size: 12px; font-weight: 700; }
.trades__legend--buy { color: var(--chart-up); }
.trades__legend--sell { color: var(--chart-down); }
.trades__track { position: relative; height: 26px; margin: 6px 0; }
.trades__axis { position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--chart-axis); }
.trades__dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.trades__dot--buy { background: var(--chart-up); }
.trades__dot--sell { background: var(--chart-down); }

.bt__copy .split__text { margin-top: var(--s-24); color: var(--fg-muted); font-size: 15.5px; line-height: 1.75; }
.checks { display: grid; gap: 16px; margin-top: var(--s-32); }
.checks li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.checks svg { width: 21px; height: 21px; color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   14. Trusted strip (4screen)
   -------------------------------------------------------------------------- */
.trusted__label {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gold);
}
.trusted__label::before, .trusted__label::after {
  content: ""; height: 1px; width: clamp(40px, 8vw, 110px);
  background: linear-gradient(90deg, transparent, var(--rule-accent));
}
.trusted__label::after { background: linear-gradient(90deg, var(--rule-accent), transparent); }

.wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: var(--s-32); }
.wall__item {
  display: inline-flex; align-items: center; gap: 12px;
  padding-inline: clamp(18px, 3vw, 40px);
  font-size: 20px; font-weight: 600; letter-spacing: -0.3px;
  color: var(--fg-body); opacity: 0.85;
  transition: opacity 0.22s ease;
}
.wall__item + .wall__item { border-left: 1px solid var(--line); }
.wall__item:hover { opacity: 1; }
.wall__item svg { width: 28px; height: 28px; flex: none; }
.wall__item small { display: block; font-size: 9px; letter-spacing: 2.2px; font-weight: 600; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   15. AI assistant (4screen-v2)
   -------------------------------------------------------------------------- */
.ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) minmax(0, 0.74fr);
  gap: 28px; align-items: start;
}
.ai__copy .h1 { margin-top: var(--s-24); }
.ai__copy .h1 span { display: block; }
.ai__lede { margin-top: var(--s-24); color: var(--fg-muted); font-size: 16px; line-height: 1.75; }
.ai__copy .btn { margin-top: var(--s-32); }

.chat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.chat__head-l { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; }
.chat__head .brand__mark { width: 26px; height: 23px; }
.chat__close { color: var(--fg-muted); }
.chat__close svg { width: 18px; height: 18px; }

.chat__log { padding: 22px; display: grid; gap: 20px; }

.msg { display: flex; gap: 14px; }
.msg--user { justify-content: flex-end; }
.msg__bubble {
  max-width: 86%; padding: 14px 18px;
  border-radius: var(--r-12);
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  font-size: 15px; line-height: 1.6; color: var(--fg-body);
}
.msg--bot .msg__bubble { background: transparent; border-color: transparent; padding: 0; max-width: 100%; }
.msg__avatar {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-fg);
}
.msg__avatar svg { width: 20px; height: 18px; }

.code-card { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: var(--r-12); background: var(--code-bg); overflow: hidden; }
.code-card__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-muted);
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line); border-radius: var(--r-8);
  background: transparent; color: var(--fg-body);
  font-family: var(--font); font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.copy-btn:hover { border-color: var(--btn-sec-border-hi); color: var(--fg); }
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn.is-done { color: var(--chart-up); border-color: rgba(59, 130, 246, 0.55); }

.logic { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--r-12); background: var(--fill-1); }
.logic__title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.logic ol { display: grid; gap: 10px; counter-reset: step; }
.logic li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--fg-body); }
.logic li::before {
  counter-increment: step; content: counter(step);
  width: 21px; height: 21px; flex: none; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-gold);
  color: var(--gold); font-size: 11px; font-weight: 700;
}

.chat__input {
  display: flex; align-items: center; gap: 12px;
  margin: 0 22px 22px;
  padding: 12px 12px 12px 18px;
  border: 1px solid var(--line); border-radius: var(--r-12);
  background: var(--fill-2);
  font-size: 15px; color: var(--fg-dim);
}
.chat__input .sparkle { width: 18px; height: 18px; color: var(--gold); flex: none; }
.chat__input span { flex: 1 1 auto; }

/* Ticker cards */
.tickers { display: grid; gap: 20px; }
.ticker { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface-1); }
.ticker__head { display: flex; align-items: center; gap: 12px; }
.ticker__head .token { width: 38px; height: 38px; }
.ticker__head .token svg { width: 21px; height: 21px; }
.ticker__name { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.ticker__sub { font-size: 14px; color: var(--fg-muted); }
.ticker__price { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.ticker__price b { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; }
.ticker__delta { font-size: 15px; font-weight: 600; color: var(--chart-up); }
.ticker__spark { margin-top: 10px; width: 100%; height: auto; }
.ticker__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.ticker__stats > div + div { border-left: 1px solid var(--line-soft); padding-left: 10px; }
.ticker__stats dt { font-size: 12px; color: var(--fg-muted); }
.ticker__stats dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; }

.quote-card { padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface-1); }
.quote-card__mark { color: var(--gold); font-size: 30px; line-height: 1; font-weight: 800; }
.quote-card p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--fg-body); }
.quote-card cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   16. Pricing (5screen)
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  background: var(--card-grad-strong);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.plan:hover { transform: translateY(-4px); }
.plan--pro { border-color: var(--line-gold); box-shadow: 0 30px 70px -40px rgba(245, 176, 0, 0.7); }
.plan__tag {
  position: absolute; top: 20px; right: 20px;
  padding: 4px 10px; border-radius: var(--r-4);
  background: var(--grad-gold); color: #14100a;
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
}
.plan__name { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.plan--pro  .plan__name { color: var(--gold); }
.plan--team .plan__name { color: var(--accent-purple); }
.plan--ent  .plan__name { color: var(--accent-blue); }
.plan__note { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--fg-muted); min-height: 3.1em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.plan__amount { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; }
.plan--pro  .plan__amount { color: var(--gold); }
.plan--team .plan__amount { color: var(--accent-purple); }
.plan--ent  .plan__amount { color: var(--accent-blue); }
.plan__per { font-size: 14px; color: var(--fg-muted); }

.plan__list { display: grid; gap: 11px; margin: 22px 0 26px; }
.plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--fg-body); }
.plan__list svg { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--gold); }
.plan--team .plan__list svg { color: var(--accent-purple); }
.plan--ent  .plan__list svg { color: var(--accent-blue); }
.plan .btn { margin-top: auto; }

/* Testimonial strip */
.loved { text-align: center; font-size: 20px; font-weight: 700; margin-top: var(--s-48); }
.quotes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-24);
  border: 1px solid var(--line); border-radius: var(--r-16);
  background: var(--card-grad);
  overflow: hidden;
}
.quote { display: flex; gap: 14px; padding: 22px 20px; }
.quote + .quote { border-left: 1px solid var(--line); }
.quote__ico { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.quote__ico svg { width: 20px; height: 20px; }
.quote__ico--gold   { background: rgba(245, 176, 0, 0.14); color: var(--gold); }
.quote__ico--purple { background: #7c3aed; color: #fff; }
.quote__ico--orange { background: #f7931a; color: #fff; }
.quote__ico--blue   { background: #1d4ed8; color: #fff; }
.quote p { font-size: 13.5px; line-height: 1.6; color: var(--fg-body); }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   17. CTA banner (5screen)
   -------------------------------------------------------------------------- */
.cta-banner {
  display: flex; align-items: center; gap: 24px;
  padding: 28px 32px;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-16);
  background:
    radial-gradient(120% 180% at 50% 120%, rgba(245, 176, 0, 0.16), transparent 60%),
    var(--cta-grad);
  box-shadow: 0 30px 80px -40px rgba(245, 176, 0, 0.6);
}
.cta-banner__ico {
  width: 64px; height: 64px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-gold); border-radius: var(--r-12);
  background: rgba(245, 176, 0, 0.06); color: var(--gold);
}
.cta-banner__ico svg { width: 32px; height: 32px; }
.cta-banner__body { flex: 1 1 auto; min-width: 0; }
.cta-banner__title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.4px; }
.cta-banner__text { margin-top: 6px; font-size: 15px; color: var(--fg-muted); }
.cta-banner__actions { display: flex; gap: 12px; flex: none; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; border-top: 1px solid var(--line-soft); background: var(--footer-bg); padding-block: var(--s-64) var(--s-24); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 0.8fr)) minmax(0, 1.3fr);
  gap: 32px;
}
.footer::before {
  content: "";
  position: absolute;
  inset: auto 0 100% 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, var(--footer-bg));
  pointer-events: none;
}

.footer__about { margin-top: 16px; font-size: 13.5px; line-height: 1.7; color: var(--fg-muted); max-width: 32ch; }
.social { display: flex; gap: 16px; margin-top: 22px; }
.social a { color: var(--fg-dim); transition: color 0.18s ease, transform 0.18s ease; }
.social a:hover { color: var(--gold); transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; }

.footer__col h4 { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: 13.5px; color: var(--fg-muted); transition: color 0.18s ease; }
.footer__col a:hover { color: var(--gold); }

.footer__note { font-size: 13.5px; line-height: 1.65; color: var(--fg-muted); margin-bottom: 16px; }
.subscribe { display: flex; gap: 10px; }
.subscribe input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-8);
  background: var(--fill-2);
  color: var(--fg); font-size: 14px;
}
.subscribe input::placeholder { color: var(--fg-dim); }
.subscribe input:focus { outline: none; border-color: var(--gold); }

.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: var(--s-48); padding-top: var(--s-24);
  border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--fg-muted);
}
.footer__made { display: inline-flex; align-items: center; gap: 7px; }
.footer__made svg { width: 15px; height: 15px; color: var(--gold); }

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

.no-js .reveal { opacity: 1; transform: none; }
.no-js .curve--animate { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .curve--animate { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .ai__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ai__copy { grid-column: 1 / -1; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote:nth-child(3) { border-left: 0; }
  .quote:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand, .footer__news { grid-column: span 2; }
}

@media (max-width: 1024px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .nav, .header__login { display: none; }
  .burger { display: inline-flex; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ai__grid { grid-template-columns: minmax(0, 1fr); }
  .tickers { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cta-banner { flex-wrap: wrap; }
  .cta-banner__actions { width: 100%; }
  .cta-banner__actions .btn { flex: 1 1 0; }
}

@media (max-width: 960px) {
  .header__actions > .theme-toggle { display: none; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .markets__cards { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ide__body { grid-template-columns: minmax(0, 1fr); }
  .mock__body { grid-template-columns: minmax(0, 1fr); }
  .mock__side { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .mock__side::-webkit-scrollbar { display: none; }
  .mock__nav { white-space: nowrap; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
  .plan--pro { order: -1; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .quote + .quote { border-left: 0; border-top: 1px solid var(--line); }
  .wall__item + .wall__item { border-left: 0; }
  .wall { gap: 20px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__base { justify-content: center; text-align: center; }
  .decor--price-l, .decor--price-r, .decor--bt-r { display: none; }
}

@media (max-width: 520px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .tickers { grid-template-columns: minmax(0, 1fr); }
  .hero__cta .btn { width: 100%; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .tokens { gap: 10px; }
  .token { width: 44px; height: 44px; }
  .token svg { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------------
   21. Theme toggle
   -------------------------------------------------------------------------- */
.theme-toggle {
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--btn-sec-border-hi); background: var(--btn-sec-bg-hi); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-sun  { display: block; }
[data-theme="light"] .theme-toggle .i-moon { display: none; }

/* --------------------------------------------------------------------------
   22. Light theme

   The whole palette is a token swap — every component above reads surfaces,
   lines and copy colours from variables, so nothing here touches a selector
   that isn't :root.

   The resolved theme is written to <html data-theme> by the inline script in
   <head>, which reads the stored choice and falls back to the OS preference.
   Doing it in JS rather than in a duplicated `prefers-color-scheme` block
   keeps this list single-sourced; with JS off the page stays dark, which is
   the brand default anyway.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --bg:        #f4f7fb;
  --surface-1: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e9eef5;

  --line:      rgba(11, 13, 16, 0.15);
  --line-soft: rgba(11, 13, 16, 0.09);
  --line-gold: rgba(181, 126, 0, 0.6);

  --fg:       #0b0d10;
  --fg-body:  #374151;
  --fg-muted: #4b5563;
  --fg-dim:   #6b7280;

  /* Gold is darkened for text and icons; the gradient keeps the brand hue
     because it only ever appears behind dark text on a filled button. */
  --gold: #b57e00;

  --chart-up:   #2563eb;
  --chart-down: #dc2626;

  --accent-purple: #6d28d9;
  --accent-blue:   #1d4ed8;

  --fill-1: rgba(11, 13, 16, 0.022);
  --fill-2: rgba(11, 13, 16, 0.035);
  --fill-3: rgba(11, 13, 16, 0.055);
  --tint-gold:    rgba(245, 176, 0, 0.14);
  --tint-gold-hi: rgba(245, 176, 0, 0.18);

  --panel-grad:       linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  --panel-grad-solid: #fdfdff;
  --card-grad:        linear-gradient(180deg, #ffffff, #f7f9fc);
  --card-grad-strong: linear-gradient(180deg, #ffffff, #f5f8fc);
  --cta-grad:         linear-gradient(180deg, #fffaef, #ffffff);

  --header-bg:  rgba(244, 247, 251, 0.86);
  --overlay-bg: rgba(244, 247, 251, 0.98);
  --footer-bg:  #eaeff6;

  --avatar-bg: #0b0d10;
  --avatar-fg: #ffffff;
  --logo-ink:  #0b0d10;

  --btn-sec-border:    rgba(11, 13, 16, 0.18);
  --btn-sec-border-hi: rgba(11, 13, 16, 0.38);
  --btn-sec-bg-hi:     rgba(11, 13, 16, 0.04);

  --code-bg:   #f6f8fb;
  --code-fg:   #334155;
  --code-ln:   #a1abb8;
  --code-kw:   #7c3aed;
  --code-fn:   #2563eb;
  --code-num:  #0f766e;
  --code-punc: #64748b;

  --chart-grid: rgba(11, 13, 16, 0.08);
  --chart-axis: rgba(11, 13, 16, 0.18);
  --curve-end:  #0b0d10;

  --shadow-panel: 0 30px 60px -34px rgba(11, 13, 16, 0.32);

  /* Grey, and therefore actually visible, instead of invisible gold. The mesh
     is a flat SVG loaded as an image, so it is recoloured with a filter rather
     than a fill. */
  --decor-opacity: 0.8;
  --decor-filter: grayscale(1) brightness(0.45) opacity(0.62);
  --arc-strong: rgba(51, 65, 85, 0.42);
  --arc-mid:    rgba(51, 65, 85, 0.32);
  --arc-soft:   rgba(51, 65, 85, 0.14);
  --arc-glow:   rgba(51, 65, 85, 0.12);
  --rule-accent: rgba(181, 126, 0, 0.5);
  --panel-border: rgba(11, 13, 16, 0.14);
}

/* A few places need more than a token swap in light mode. */
/* On light, cards need a shadow to separate from the page — a hairline alone
   reads as noise at this contrast. */
:root[data-theme="light"] .mock,
:root[data-theme="light"] .market-card,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .ticker,
:root[data-theme="light"] .quote-card,
:root[data-theme="light"] .quotes {
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.05), 0 18px 44px -28px rgba(11, 13, 16, 0.28);
}
:root[data-theme="light"] .mock {
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.05), 0 30px 70px -34px rgba(11, 13, 16, 0.32);
}
:root[data-theme="light"] .plan--pro { box-shadow: 0 1px 2px rgba(11, 13, 16, 0.05), 0 26px 56px -34px rgba(245, 176, 0, 0.75); }
:root[data-theme="light"] .cta-banner { box-shadow: 0 26px 60px -40px rgba(245, 176, 0, 0.8); }
:root[data-theme="light"] .token--sol { border-color: transparent; }
:root[data-theme="light"] ::selection { background: rgba(245, 176, 0, 0.28); color: #0b0d10; }

/* --------------------------------------------------------------------------
   23. Modal shell
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.is-open { display: grid; place-items: center; padding: clamp(12px, 3vw, 32px); }

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
:root[data-theme="light"] .modal__backdrop { background: rgba(11, 13, 16, 0.45); }

.modal__dialog {
  position: relative;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-24);
  background: var(--panel-grad);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9), 0 0 90px -40px rgba(245, 176, 0, 0.4);
}
:root[data-theme="light"] .modal__dialog {
  box-shadow: 0 40px 100px -40px rgba(11, 13, 16, 0.45);
}
.modal__dialog--wide   { max-width: 1180px; }
.modal__dialog--narrow { max-width: 620px; }

.modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-8);
  background: transparent; color: var(--fg-muted); cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.modal__close:hover { color: var(--fg); background: var(--fill-3); }
.modal__close svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   24. Booking modal
   -------------------------------------------------------------------------- */
.booking { display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.booking__aside { padding: clamp(20px, 2.4vw, 28px); }
.booking__aside .brand { margin-bottom: 18px; }
.booking__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold);
}
.booking__title { margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
.booking__lede { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--fg-muted); }

.fieldset { margin-top: 16px; }
.fieldset__label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.req { color: var(--gold); }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > svg {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--fg-dim); pointer-events: none;
}
.input {
  width: 100%; min-width: 0;
  padding: 13px 14px 13px 44px;
  border: 1px solid var(--line); border-radius: var(--r-8);
  background: var(--fill-2); color: var(--fg); font-size: 15px;
}
.input::placeholder { color: var(--fg-dim); }
.input:focus { outline: none; border-color: var(--gold); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.hint { margin-top: 8px; font-size: 13px; color: var(--fg-muted); }
.hint--error { color: var(--danger); }

.binfo { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-12); overflow: hidden; }
.binfo__row { display: flex; align-items: center; gap: 14px; padding: 11px 15px; }
.binfo__row + .binfo__row { border-top: 1px solid var(--line-soft); }
.binfo__row > svg { width: 20px; height: 20px; flex: none; color: var(--fg-muted); }
.binfo__k { font-size: 15px; font-weight: 700; }
.binfo__v { font-size: 13px; color: var(--fg-muted); }

.secure { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--fg-muted); }
.secure svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }

.booking__panel {
  margin: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) 0;
  border: 1px solid var(--line-soft); border-radius: var(--r-16);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
}
.booking__col { padding: 22px; min-width: 0; }
.booking__col + .booking__col { border-left: 1px solid var(--line-soft); }
.booking__step { font-size: 16px; font-weight: 600; margin-bottom: 18px; }

/* Calendar */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal__month { font-size: 17px; font-weight: 600; }
.cal__nav {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-8);
  background: transparent; color: var(--fg-muted); cursor: pointer;
}
.cal__nav:hover:not(:disabled) { color: var(--fg); background: var(--fill-3); }
.cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal__nav svg { width: 17px; height: 17px; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dow { text-align: center; font-size: 13px; color: var(--fg-muted); padding-bottom: 6px; }
.cal__day {
  aspect-ratio: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--fg-body);
  font-size: 15px; font-family: inherit; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cal__day--out { color: var(--fg-dim); }
.cal__day:disabled { color: var(--fg-dim); cursor: default; }
.cal__day--free { border-color: var(--line-gold); color: var(--gold); }
.cal__day--free:hover { background: var(--tint-gold); }
.cal__day[aria-pressed="true"] {
  background: var(--grad-gold); border-color: transparent;
  color: #14100a; font-weight: 700;
}

.cal__tz { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--fg-muted); }
.cal__tz > svg { width: 18px; height: 18px; flex: none; }
.cal__tz b { color: var(--fg); font-weight: 500; }

.cal__conv {
  margin-top: 10px; padding: 11px 14px;
  border: 1px solid var(--line-gold); border-radius: var(--r-8);
  background: var(--tint-gold);
  font-size: 13.5px; line-height: 1.5; color: var(--fg-body);
}
.cal__conv b { color: var(--gold); }

/* Time slots */
.slots { display: grid; gap: 10px; max-height: 372px; overflow-y: auto; padding-right: 6px; }
.slot {
  padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r-12);
  background: transparent; color: var(--fg-body);
  font-size: 15px; font-weight: 600; font-family: inherit;
  text-align: center; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.slot:hover { border-color: var(--btn-sec-border-hi); }
.slot[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--tint-gold); }
.slots__empty { font-size: 14px; color: var(--fg-muted); padding: 8px 2px; }

.booking__foot {
  display: flex; align-items: center; gap: 20px;
  padding: 20px clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line-soft);
}
.booking__foot-ico {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--fill-3); color: var(--fg-muted);
}
.booking__foot-ico svg { width: 20px; height: 20px; }
.booking__foot-text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.booking__foot-actions { display: flex; gap: 12px; flex: none; }

/* --------------------------------------------------------------------------
   25. Thank-you modal
   -------------------------------------------------------------------------- */
.thanks { padding: clamp(26px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(22px, 2.6vw, 28px); text-align: center; }
.thanks__badge {
  position: relative;
  width: 84px; height: 84px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border: 2px solid var(--gold); border-radius: 50%;
  color: var(--gold);
  box-shadow: 0 0 46px rgba(245, 176, 0, 0.4), inset 0 0 34px rgba(245, 176, 0, 0.12);
}
.thanks__badge svg { width: 40px; height: 40px; }
.thanks__title { font-size: clamp(28px, 3.4vw, 34px); font-weight: 800; letter-spacing: -1px; }
.thanks__sub { margin-top: 3px; font-size: clamp(19px, 2.3vw, 23px); font-weight: 700; color: var(--gold); letter-spacing: -0.4px; }
.thanks__lede { margin-top: 11px; font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); }

.thanks__rows { margin: 18px 0 16px; border: 1px solid var(--line); border-radius: var(--r-12); overflow: hidden; text-align: left; }
.thanks__row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; font-size: 14.5px; }
.thanks__row + .thanks__row { border-top: 1px solid var(--line-soft); }
.thanks__row > svg { width: 20px; height: 20px; flex: none; color: var(--fg-muted); }
.thanks__k { flex: 1 1 auto; color: var(--fg-muted); }
.thanks__v { font-weight: 600; text-align: right; }
.thanks__v--link { display: inline-flex; align-items: center; gap: 7px; color: var(--success); }
.thanks__v--link svg { width: 15px; height: 15px; }

.thanks__actions { display: grid; gap: 10px; }
.thanks__foot { margin-top: 14px; font-size: 13.5px; color: var(--fg-muted); }
.thanks__foot a { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--gold); font-weight: 600; }
.thanks__foot svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   26. Error pages (404 / 500)
   -------------------------------------------------------------------------- */
.errpage { position: relative; text-align: center; padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); overflow: hidden; }
.errcode {
  font-size: clamp(88px, 13vw, 180px); font-weight: 800;
  letter-spacing: -6px; line-height: 1;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.errtitle { margin-top: 2px; font-size: clamp(28px, 4.2vw, 50px); font-weight: 800; letter-spacing: -1.2px; }
.errtext { margin: 18px auto 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--fg-muted); }
/* Drawn art, not an emoji glyph: the system emoji font is a bitmap and looks
   visibly pixelated once scaled to this size. */
.erremoji {
  width: clamp(150px, 20vw, 250px);
  height: auto;
  margin: clamp(20px, 3.5vw, 44px) auto;
  filter: drop-shadow(0 24px 56px rgba(245, 176, 0, 0.32));
}
.errcta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.helpcard {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-16);
  background: var(--card-grad);
  text-align: left;
}
.helpcard__top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.helpcard__ico {
  width: 56px; height: 56px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--tint-gold-hi); color: var(--gold);
}
.helpcard__ico svg { width: 24px; height: 24px; }
.helpcard__body { flex: 1 1 260px; min-width: 0; }
.helpcard__title { font-size: 19px; font-weight: 700; }
.helpcard__text { margin-top: 4px; font-size: 14px; color: var(--fg-muted); }
.helpcard__search { flex: 1 1 320px; display: flex; gap: 10px; }
.helpcard__search .input { padding-left: 14px; }

.helpcard__rule { height: 1px; margin: 22px 0 18px; background: var(--line-soft); }
.helpcard__kicker { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.poplist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.popitem {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-12);
  font-size: 14px; font-weight: 600;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.popitem:hover { border-color: var(--line-gold); background: var(--tint-gold); }
.popitem > svg:first-child { width: 18px; height: 18px; flex: none; color: var(--gold); }
.popitem span { flex: 1 1 auto; }
.popitem > svg:last-child { width: 15px; height: 15px; flex: none; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   27. Disabled controls
   -------------------------------------------------------------------------- */
.header__login[disabled],
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
.header__login {
  border: 0; background: transparent; font-family: inherit;
}

/* --------------------------------------------------------------------------
   28. Modal / error responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .booking { grid-template-columns: minmax(0, 1fr); }
  .booking__panel { margin: 0 clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px); }
  .poplist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .booking__panel { grid-template-columns: minmax(0, 1fr); }
  .booking__col + .booking__col { border-left: 0; border-top: 1px solid var(--line-soft); }
  .slots { max-height: 260px; }
  .booking__foot { flex-wrap: wrap; }
  .booking__foot-actions { width: 100%; }
  .booking__foot-actions .btn { flex: 1 1 0; }
  .modal.is-open { place-items: start center; }
  .thanks__row { flex-wrap: wrap; }
  .thanks__v { text-align: left; }
}

@media (max-width: 520px) {
  .poplist { grid-template-columns: minmax(0, 1fr); }
  .helpcard__search { flex-basis: 100%; }
  .errcta .btn { width: 100%; }
}

/* Error-page decoration: a wave entering from each side, feathered like the rest. */
.decor--err-l { left: -14%; top: 34%; width: 62%; opacity: 0.8; }
.decor--err-r { right: -14%; top: 30%; width: 62%; opacity: 0.7; transform: scaleX(-1); }
@media (max-width: 760px) { .decor--err-l, .decor--err-r { display: none; } }

/* --------------------------------------------------------------------------
   29. Modal scrolling without visible scrollbars

   The chrome is hidden, not the scrolling. Hiding a scrollbar also removes the
   only cue that content continues, so the slot list gets a bottom fade to keep
   that signal — otherwise people simply do not find the later times.
   -------------------------------------------------------------------------- */
.modal__dialog,
.slots {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge */
}
.modal__dialog::-webkit-scrollbar,
.slots::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Fading the list's own pixels beats painting a panel-coloured rectangle over
   it: no colour to keep in sync with the theme, and no visible band edge. The
   class is only applied while there is actually more to scroll to, so the last
   option is never dimmed once it is reached. */
.slots { padding-right: 0; }
.slots.is-faded {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent);
}