/* ============================================================
   TradingMapClaw — terminal-console art direction
   Dark-first, monospace accents, single teal accent (running process)
   ============================================================ */

:root, [data-theme="light"] {
  --color-bg: #f5f4ef;
  --color-surface: #faf9f6;
  --color-surface-2: #eeece6;
  --color-border: #d8d5cd;
  --color-divider: #e4e1da;
  --color-text: #1e1d1a;
  --color-text-muted: #6c6b66;
  --color-text-faint: #a7a6a0;
  --color-text-inverse: #faf9f6;
  --color-primary: #0a6b5f;
  --color-primary-hover: #085247;
  --color-accent-glow: rgba(10, 107, 95, 0.12);
  --color-amber: #b26a00;
  --color-success: #3f7a22;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(30,29,26,0.06);
  --shadow-md: 0 6px 20px rgba(30,29,26,0.08);
  --shadow-lg: 0 18px 48px rgba(30,29,26,0.12);

  --content-narrow: 680px;
  --content-default: 1000px;
  --content-wide: 1200px;

  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
  --font-body: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --text-hero: clamp(2.5rem, 1rem + 5.5vw, 5.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
}

[data-theme="dark"] {
  --color-bg: #0d0f0e;
  --color-surface: #141817;
  --color-surface-2: #1a201e;
  --color-border: #283230;
  --color-divider: #1f2725;
  --color-text: #dfe3e0;
  --color-text-muted: #8a938f;
  --color-text-faint: #5a635f;
  --color-text-inverse: #0d0f0e;
  --color-primary: #34d0b4;
  --color-primary-hover: #56e0c6;
  --color-accent-glow: rgba(52, 208, 180, 0.14);
  --color-amber: #e0a343;
  --color-success: #6dc24a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0d0f0e; --color-surface: #141817; --color-surface-2: #1a201e;
    --color-border: #283230; --color-divider: #1f2725; --color-text: #dfe3e0;
    --color-text-muted: #8a938f; --color-text-faint: #5a635f; --color-text-inverse: #0d0f0e;
    --color-primary: #34d0b4; --color-primary-hover: #56e0c6;
    --color-accent-glow: rgba(52,208,180,0.14); --color-amber: #e0a343; --color-success: #6dc24a;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 5rem;
}
body {
  min-height: 100dvh; line-height: 1.6; font-family: var(--font-body);
  font-size: var(--text-base); color: var(--color-text); background: var(--color-bg);
  -webkit-text-size-adjust: none; text-size-adjust: none;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
ul[role="list"] { list-style: none; }
::selection { background: var(--color-accent-glow); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.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; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); }
.narrow { max-width: var(--content-narrow); }
section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-primary); display: inline-flex; align-items: center; gap: var(--space-2);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--color-primary); display:inline-block; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-divider);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); letter-spacing: -0.01em; }
.brand svg { color: var(--color-primary); }
.brand-name { color: var(--color-text); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-muted); transition: color var(--transition); }
.nav-links a:hover { color: var(--color-text); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
[data-theme-toggle] { display:grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-full); border:1px solid var(--color-border); color:var(--color-text-muted); transition: all var(--transition); }
[data-theme-toggle]:hover { color: var(--color-text); border-color: var(--color-text-faint); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500; padding:var(--space-3) var(--space-5); border-radius:var(--radius-md); transition: all var(--transition); white-space: nowrap; }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { border: 1px solid var(--color-border); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(var(--space-16), 9vw, var(--space-24)); padding-bottom: clamp(var(--space-12),6vw,var(--space-20)); position: relative; overflow: hidden; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 78% -5%, var(--color-accent-glow), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in oklab, var(--color-divider) 40%, transparent) 39px 40px);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  opacity: 0.6;
}
.hero .wrap { position: relative; z-index: 1; }
.status-line { display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-full); background: var(--color-surface); }
.dot { width:8px; height:8px; border-radius:50%; background: var(--color-success); box-shadow: 0 0 0 0 var(--color-success); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--color-success) 60%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.hero h1 { font-size: var(--text-hero); margin-top: var(--space-6); max-width: 15ch; }
.hero .lede { font-size: var(--text-lg); color: var(--color-text-muted); margin-top: var(--space-6); max-width: 56ch; }
.slogan { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-primary); margin-top: var(--space-5); letter-spacing: 0.02em; }
.hero-cta { display:flex; flex-wrap:wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-note { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-faint); font-family: var(--font-mono); }

/* ---------- stats bar ---------- */
.stats { border-block: 1px solid var(--color-divider); background: var(--color-surface); }
.stats .wrap { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat { padding: var(--space-6) var(--space-4); border-left: 1px solid var(--color-divider); }
.stat:first-child { border-left: none; }
.stat .val { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; color: var(--color-text); letter-spacing: -0.02em; }
.stat .lab { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.stat .note { font-size: var(--text-xs); color: var(--color-text-faint); font-family: var(--font-mono); }
@media (max-width: 900px) { .stats .wrap { grid-template-columns: repeat(3,1fr); } .stat:nth-child(4){border-left:none;} }
@media (max-width: 520px) { .stats .wrap { grid-template-columns: repeat(2,1fr); } .stat:nth-child(odd){border-left:none;} }

/* ---------- section head ---------- */
.section-head { max-width: 60ch; margin-bottom: var(--space-12); }
.section-head h2 { font-size: var(--text-xl); margin-top: var(--space-4); }
.section-head p { color: var(--color-text-muted); margin-top: var(--space-4); }

/* ---------- how it works / architecture ---------- */
.arch { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.arch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.layer { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; transition: border-color var(--transition), transform var(--transition); }
.layer:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.layer .num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-primary); }
.layer h3 { font-size: var(--text-base); margin-top: var(--space-3); }
.layer p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }
.layer .tags { display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-4); }
.tag { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-divider); }
@media (max-width: 900px) { .arch-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .arch-grid { grid-template-columns: 1fr; } }

/* ---------- products ---------- */
.filters { display:flex; gap:var(--space-2); margin-bottom: var(--space-8); flex-wrap: wrap; }
.filter-btn { font-family:var(--font-mono); font-size:var(--text-xs); padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); border:1px solid var(--color-border); color:var(--color-text-muted); transition: all var(--transition); }
.filter-btn.active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.filter-btn:not(.active):hover { border-color: var(--color-text-faint); color: var(--color-text); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card { display:flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-top { display:flex; align-items:center; justify-content: space-between; margin-bottom: var(--space-4); }
.card-cat { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; color: var(--color-text-faint); }
.badge { font-family:var(--font-mono); font-size:var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--color-accent-glow); color: var(--color-primary); font-weight: 500; }
.card h3 { font-size: var(--text-lg); }
.card .tagline { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); flex-grow: 0; }
.card .desc { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: var(--space-4); line-height: 1.55; flex-grow: 1; }
.card-foot { display:flex; align-items:center; justify-content: space-between; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
.price { font-family:var(--font-mono); font-size: var(--text-xl); font-weight: 500; }
.price .cur { color: var(--color-text-faint); font-size: var(--text-base); }
.soon { font-family:var(--font-mono); font-size:var(--text-xs); color: var(--color-amber); border:1px solid color-mix(in oklab,var(--color-amber) 40%, transparent); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }

/* ---------- live feed ---------- */
.feed { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.feed-list { display:flex; flex-direction: column; gap: var(--space-4); }
.feed-item { display:grid; grid-template-columns: 140px 1fr; gap: var(--space-6); padding: var(--space-6); background: var(--color-bg); border:1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--transition); }
.feed-item:hover { border-color: var(--color-primary); }
.feed-meta { font-family:var(--font-mono); font-size:var(--text-xs); color: var(--color-text-faint); }
.feed-meta .ftype { color: var(--color-primary); display:block; margin-bottom: var(--space-1); }
.feed-body h3 { font-size: var(--text-base); }
.feed-body p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.feed-tickers { display:flex; gap:var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.ticker { font-family:var(--font-mono); font-size:var(--text-xs); padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text-muted); }
.feed-compliance { font-family:var(--font-mono); font-size:var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-3); }
@media (max-width: 620px) { .feed-item { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- story ---------- */
.story .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.story-quote { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.story-quote .hl { color: var(--color-primary); }
.story-body p { color: var(--color-text-muted); margin-top: var(--space-4); }
.story-body p:first-child { margin-top: 0; }
.story-tag { font-family:var(--font-mono); font-size:var(--text-sm); color: var(--color-primary); margin-top: var(--space-6); }
@media (max-width: 820px) { .story .wrap { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- contact / footer ---------- */
.cta-band { background: var(--color-text); color: var(--color-bg); border-radius: var(--radius-lg); padding: clamp(var(--space-10), 5vw, var(--space-20)); text-align: center; }
[data-theme="dark"] .cta-band { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); }
.cta-band h2 { font-size: var(--text-xl); max-width: 22ch; margin-inline: auto; }
.cta-band p { color: color-mix(in oklab, var(--color-bg) 70%, var(--color-text)); margin-top: var(--space-4); max-width: 48ch; margin-inline: auto; }
[data-theme="dark"] .cta-band p { color: var(--color-text-muted); }
.cta-band .btn-primary { margin-top: var(--space-8); }
[data-theme="dark"] .cta-band .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }

.site-footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-12); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
.footer-grid h4 { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom: var(--space-4); }
.footer-links { display:flex; flex-direction:column; gap: var(--space-2); }
.footer-links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--color-primary); }
.footer-bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); display:flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom p { font-family:var(--font-mono); font-size:var(--text-xs); color: var(--color-text-faint); }
.disclaimer { background: var(--color-surface-2); border:1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-4); font-family:var(--font-mono); font-size:var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-8); line-height: 1.6; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }