/* landing-spike.css — v1.10.0 — institutional shadcn-dark theme for the
   DeltaStrike v2 migration landing page. Tokens are the CANONICAL shadcn
   dark set already used by user-profile-and-trading-activity.css and
   profile-page.css (--background/--foreground/--card/--card-foreground/
   --muted/--muted-foreground/--border/--radius/--destructive) — reused
   verbatim so this page reads as the same product as the rest of the app,
   not a one-off marketing skin. No gradients, no glow, no display font — a
   quiet, restrained, data-terminal look. Plain CSS (no framework) so the
   generated pages stay pure static files served by Caddy.

   v1.10.0: the .language-switcher* rules (the "🌐 <Language>" pill) moved
   OUT of this file and into web-public-data/shared/language-switcher.css —
   now the single source of truth loaded by every page that shows the
   standalone switcher, landing included, so it's visually identical
   everywhere instead of landing-only. See that file's header comment. */

:root {
  --background: #09090b;
  --foreground: #fafafa;
  --card: #0a0a0c;
  --card-foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --border: #27272a;
  --border-strong: #3f3f46;
  --faint-foreground: #71717a;
  --radius: 0.5rem;
  --destructive: #ef4444;

  /* Trade-tape / ticker semantics — reuse the same greens/reds the rest of
     the app already uses for buy/sell and status (up-status-active,
     destructive), not a new invented palette. */
  --buy: #22c55e;
  --sell: #ef4444;

  --max-width: 1120px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ---------- Header / navbar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 9, 11, 0.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 24px;
}
.brand-wordmark {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 16px;
  flex-shrink: 0;
}
.brand-wordmark-accent { color: var(--muted-foreground); }
.primary-navigation-links {
  display: flex;
  gap: 22px;
  margin-right: auto;
  font-size: 13.5px;
  color: var(--muted-foreground);
}
.primary-navigation-links a:hover { color: var(--foreground); }
.header-action-buttons { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---------- Navbar live BTC price ticker (carried over from the pre-v2
   landing page's hero ticker — same Binance futures trade stream, same
   up/down flash — now living in the sticky header so it stays visible
   the whole time a visitor is on the page). ---------- */
.navbar-live-price-ticker {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  flex-shrink: 0;
}
.navbar-live-price-exchange-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--faint-foreground);
}
.navbar-live-price-value {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--foreground);
  transition: color 120ms ease;
  min-width: 7ch;
  text-align: right;
}
.navbar-live-price-value.price-up { color: var(--buy); }
.navbar-live-price-value.price-down { color: var(--sell); }
@keyframes navbar-live-price-flash { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } }
.navbar-live-price-value.price-flash { animation: navbar-live-price-flash 120ms ease-out; }
.navbar-live-price-pair {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--faint-foreground);
}
@media (max-width: 860px) {
  .navbar-live-price-ticker { display: none; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 550;
  padding: 8px 15px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
  white-space: nowrap;
}
.button-primary {
  background: var(--foreground);
  color: var(--background);
  font-weight: 650;
}
.button-primary:hover { opacity: 0.88; }
.button-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--foreground);
}
.button-ghost:hover { background: var(--muted); border-color: var(--faint-foreground); }
.button-large { padding: 12px 21px; font-size: 14.5px; }
.button-block { width: 100%; margin-top: 20px; }

/* ---------- Language switcher ----------
   MOVED to web-public-data/shared/language-switcher.css (single source of
   truth, loaded here via layouts/base.html.tmpl) so the "🌐 <Language>"
   pill is IDENTICAL on every page, not just the landing page. Do not add
   .language-switcher* rules back here — see that file's header comment. */

/* ---------- Layout primitives ---------- */
main { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
  text-align: center;
}

/* ---------- Hero ---------- */
.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0 88px;
}
.hero-eyebrow {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.hero-headline {
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 680;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.hero-subhead {
  font-size: 16px;
  color: var(--muted-foreground);
  max-width: 30em;
  margin-bottom: 30px;
}
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust-line {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--faint-foreground);
}

/* ---------- Live trade tape ---------- */
.live-trade-tape-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.live-trade-tape-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.live-trade-tape-heading { display: flex; flex-direction: column; gap: 2px; }
.live-trade-tape-title { font-weight: 600; font-size: 14.5px; }
.live-trade-tape-subtitle { font-size: 11.5px; color: var(--faint-foreground); }
.live-trade-tape-last-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: calc(var(--radius) - 2px);
  transition: color 400ms ease;
}
.live-trade-tape-last-price.price-up { color: var(--buy); }
.live-trade-tape-last-price.price-down { color: var(--sell); }
.live-indicator-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--buy);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.live-trade-tape-twenty-four-hour-stats-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint-foreground);
  overflow-x: auto;
  white-space: nowrap;
}
.live-trade-tape-twenty-four-hour-stat { display: inline-flex; align-items: center; gap: 5px; }
.live-trade-tape-twenty-four-hour-stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--faint-foreground);
}
.live-trade-tape-twenty-four-hour-stat-value { color: var(--foreground); font-weight: 600; }
.live-trade-tape-twenty-four-hour-stat-value.price-up { color: var(--buy); }
.live-trade-tape-twenty-four-hour-stat-value.price-down { color: var(--sell); }
.live-trade-tape-column-headings,
.live-trade-row {
  display: grid;
  grid-template-columns: 1.25fr 0.65fr 1fr 0.9fr 1fr;
  gap: 8px;
  padding: 7px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.live-trade-tape-column-headings {
  color: var(--faint-foreground);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}
.live-trade-tape-rows { list-style: none; max-height: 340px; overflow: hidden; }
.live-trade-row { border-bottom: 1px solid var(--border); animation: row-in 260ms ease; }
.live-trade-row .trade-time { color: var(--faint-foreground); }
.live-trade-row .trade-side { font-weight: 700; }
.live-trade-row.is-buy .trade-side, .live-trade-row.is-buy .trade-price { color: var(--buy); }
.live-trade-row.is-sell .trade-side, .live-trade-row.is-sell .trade-price { color: var(--sell); }
.live-trade-row .trade-notional-value-usdt { color: var(--foreground); }
@keyframes row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Terminal proof (real product screenshots) ----------
   Funnel step between the live tape (hook) and the feature grid (value):
   show the ACTUAL terminal the live pipeline feeds. Same card tokens as
   the rest of the page — framed like a terminal window, no marketing chrome. */
.terminal-section { padding: 8px 0 44px; }
.terminal-eyebrow {
  text-align: center;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint-foreground);
  margin-bottom: 14px;
}
.terminal-title { margin-bottom: 12px; }
.terminal-subhead {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 34px;
  font-size: 15px;
  color: var(--muted-foreground);
}
.terminal-shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.terminal-shot-full-width {
  grid-column: 1 / -1;
}
.terminal-shot {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 140ms ease;
}
.terminal-shot:hover { border-color: var(--border-strong); }
.terminal-shot-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}
.terminal-shot-frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.terminal-shot-frame-bar em {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint-foreground);
  font-style: normal;
  margin-left: 8px;
}
.terminal-shot-image { display: block; width: 100%; height: auto; }
.terminal-shot-caption { padding: 14px 16px; }
.terminal-shot-caption b { display: block; font-size: 14.5px; font-weight: 620; }
.terminal-shot-caption span { display: block; font-size: 13px; color: var(--faint-foreground); margin-top: 3px; }

/* ---------- Features ---------- */
.feature-section { padding: 36px 0 76px; }
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 140ms ease;
}
.feature-card:hover { border-color: var(--border-strong); }
.feature-card-title { font-size: 16px; font-weight: 620; margin-bottom: 9px; }
.feature-card-body { font-size: 14px; color: var(--muted-foreground); }

/* ---------- Migration notice banner ---------- */
.migration-notice-banner {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.migration-notice-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 9px 24px;
  text-align: center;
}
.migration-notice-banner-message {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: #f59e0b;
}
.migration-notice-banner-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f59e0b;
  vertical-align: 1px;
  animation: migration-notice-banner-soft-pulse 2.4s ease-in-out infinite;
}
@keyframes migration-notice-banner-soft-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  50% { opacity: 0.55; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .migration-notice-banner-pulse-dot { animation: none; }
}

/* ---------- Migration + member login ---------- */
.migration-member-login-section { padding: 36px 0 92px; }
.migration-member-login-body {
  max-width: 40em;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.migration-member-login-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}
.migration-member-login-button { width: 100%; }
.migration-member-login-note {
  margin: 17px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint-foreground);
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 36px; }
.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer-tagline { font-size: 12.5px; color: var(--muted-foreground); margin-top: 7px; max-width: 34em; }
.site-footer-legal-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.site-footer-legal-links a { font-size: 12.5px; color: var(--muted-foreground); text-decoration: none; }
.site-footer-legal-links a:hover { color: var(--foreground); text-decoration: underline; }
.site-footer-copyright { font-size: 12px; color: var(--faint-foreground); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-section { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 56px; }
  .primary-navigation-links { display: none; }
  .feature-card-grid { grid-template-columns: 1fr; }
  .terminal-shot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* Header buttons wrap onto their own row on narrow phones (see
     justify-content + flex-wrap on .site-header-inner above) — shrink them
     so the wrapped row still fits without any button clipping off-screen. */
  .site-header-inner { padding: 10px 16px; gap: 10px; }
  .header-action-buttons { gap: 8px; }
  .language-switcher-toggle { padding: 6px 9px; font-size: 12px; }
  .header-action-buttons .button { padding: 7px 12px; font-size: 12.5px; }
}

.site-footer-social-links { display: flex; gap: 14px; margin: 14px 0 6px; }
.site-footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm, 0.375rem); transition: border-color 120ms ease; }
.site-footer-social-link svg { width: 16px; height: 16px; fill: var(--muted-foreground, #a1a1aa); transition: fill 120ms ease; }
.site-footer-social-link:hover { border-color: var(--border-strong, #3f3f46); }
.site-footer-social-link:hover svg { fill: var(--foreground); }
.site-footer-powered-by { display: inline-block; margin-bottom: 10px; font-size: 12px; color: var(--muted-foreground, #a1a1aa); text-decoration: none; }
.site-footer-powered-by strong { color: var(--foreground); font-weight: 600; }
.site-footer-powered-by:hover strong { text-decoration: underline; }