/* ============================================================
   TradeDelight marketing site - design system
   Dark fintech aesthetic: near-black canvas, indigo signal,
   green/rose P&L, monospaced numerics, fine grid lines.
   ============================================================ */

:root {
  /* canvas */
  --bg: #08090c;
  --bg-2: #0b0d12;
  --surface: #0f1117;
  --surface-2: #13141a;
  --surface-3: #191c27;
  --card: #101219;
  --card-hover: #161926;

  /* lines */
  --line: #1c1f2b;
  --line-strong: #2a2e3d;
  --grid: rgba(255, 255, 255, 0.028);

  /* signal */
  --accent: #6366f1;
  --accent-light: #818cf8;
  --accent-dark: #4f46e5;
  --accent-a: rgba(99, 102, 241, 0.14);
  --accent-glow: rgba(99, 102, 241, 0.35);

  --up: #22c55e;
  --up-light: #4ade80;
  --up-a: rgba(34, 197, 94, 0.12);
  --down: #f43f5e;
  --down-light: #fb7185;
  --down-a: rgba(244, 63, 94, 0.12);
  --gold: #f59e0b;

  /* text */
  --text: #eef0f6;
  --text-2: #a2a5ba;
  --text-3: #676a85;
  --text-4: #3f4257;
  --inverse: #08090c;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 9px;

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 0 1px var(--accent-a), 0 30px 80px -30px var(--accent-glow);

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  --maxw: 1180px;

  color-scheme: dark;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* subtle animated grid + glow backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 100%);
}

body::after {
  content: '';
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  z-index: -2;
  background: radial-gradient(
    circle at center,
    rgba(99, 102, 241, 0.16),
    transparent 62%
  );
  filter: blur(30px);
  pointer-events: none;
}

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

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

::selection {
  background: var(--accent-a);
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
}

p {
  margin: 0;
  line-height: 1.62;
  color: var(--text-2);
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 108px 0;
  position: relative;
}

.section-tight {
  padding: 72px 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--accent-a);
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 10px var(--accent-glow);
}

.h-xl {
  font-size: clamp(2.5rem, 5.4vw, 4.35rem);
  letter-spacing: -0.035em;
  font-weight: 800;
}
.h-lg {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.h-md {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--text-2);
  max-width: 620px;
}
.text-grad {
  background: linear-gradient(100deg, #fff 10%, var(--accent-light) 55%, #a78bfa 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}
.center {
  text-align: center;
}
.section-head {
  max-width: 680px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.section-head p {
  font-size: 1.08rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: 11px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease,
    border-color 0.16s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  color: #fff;
  box-shadow: 0 10px 30px -12px var(--accent-glow), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.btn-primary:hover {
  box-shadow: 0 16px 40px -12px var(--accent-glow);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--text-4);
}
.btn-lg {
  padding: 15px 26px;
  font-size: 1rem;
  border-radius: 13px;
}
.btn-block {
  width: 100%;
}

/* ---------- generic card ---------- */
.card {
  background: linear-gradient(180deg, var(--card), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(8, 9, 12, 0.66);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(8, 9, 12, 0.86);
}
.nav-inner {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--accent-light), var(--accent-dark));
  box-shadow: 0 6px 18px -6px var(--accent-glow);
}
.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.35));
}
.brand-wordmark {
  height: 46px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 0.92rem;
  color: var(--text-2);
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover,
.nav-link.active {
  color: var(--text);
  background: var(--surface-2);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-toggle {
  display: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 84px 0 64px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
}
.hero h1 {
  margin-top: 22px;
}
.hero .lede {
  margin-top: 22px;
}
.hero-cta {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-proof {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 0.86rem;
}
.hero-proof .avatars {
  display: flex;
}
.hero-proof .avatars span {
  position: relative;
  overflow: hidden;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -8px;
  background: linear-gradient(135deg, var(--accent), var(--down));
}
.hero-proof .avatars span::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.92;
  background: center / 62% no-repeat
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>");
}
.hero-proof .avatars span:nth-child(2) {
  background: linear-gradient(135deg, var(--up), var(--accent-light));
}
.hero-proof .avatars span:nth-child(3) {
  background: linear-gradient(135deg, var(--gold), var(--down-light));
}
.hero-proof .avatars span:nth-child(4) {
  background: linear-gradient(135deg, var(--accent-light), #a78bfa);
}
.stars {
  color: var(--gold);
  letter-spacing: 2px;
}

/* ============================================================
   PRODUCT MOCKUP (built in HTML/SVG, no stock art)
   ============================================================ */
.mock {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #0e1017, #0a0b10);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  position: relative;
}
.mock-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mock-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line-strong);
  display: block;
}
.mock-bar i:nth-child(1) {
  background: #f43f5e;
}
.mock-bar i:nth-child(2) {
  background: #f59e0b;
}
.mock-bar i:nth-child(3) {
  background: #22c55e;
}
.mock-bar span {
  margin-left: 12px;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--mono);
}
.mock-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}
.mock-hero-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 0% 0%, rgba(99, 102, 241, 0.14), transparent 55%),
    linear-gradient(180deg, #12131c, #0b0c12);
  padding: 18px;
}
.mock-label {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.mock-pnl {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: -0.02em;
}
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--up-a);
  color: var(--up-light);
  margin-left: 10px;
}
.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mock-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px;
}
.mock-stat .v {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 3px;
}
.mock-ai {
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.1), transparent);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.mock-ai .icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
}
.mock-ai p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.mock-ai b {
  color: var(--text);
}

/* floating badge on mockup */
.mock-float {
  position: absolute;
  right: -18px;
  bottom: 40px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
.mock-float .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 10px var(--up);
}
.mock-float small {
  color: var(--text-3);
  font-size: 11px;
  display: block;
}
.mock-float b {
  font-family: var(--mono);
  font-size: 13px;
}

/* ---------- logo / trust strip ---------- */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  opacity: 0.75;
}
.trust-inner span {
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: -0.01em;
  font-size: 1.02rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feat {
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--surface));
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.feat:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  background: linear-gradient(180deg, var(--card-hover), var(--surface));
}
.feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--accent-a);
  color: var(--accent-light);
  border: 1px solid rgba(99, 102, 241, 0.25);
  margin-bottom: 16px;
}
.feat h3 {
  font-size: 1.14rem;
  margin-bottom: 8px;
}
.feat p {
  font-size: 0.95rem;
}
.feat.span-2 {
  grid-column: span 2;
}

/* ============================================================
   ALTERNATING SHOWCASE ROWS
   ============================================================ */
.show-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.show-row + .show-row {
  margin-top: 96px;
}
.show-row.rev .show-text {
  order: 2;
}
.show-text h2 {
  margin: 16px 0 16px;
}
.show-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 14px;
}
.show-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-2);
  font-size: 0.98rem;
}
.show-list .tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--up-a);
  color: var(--up-light);
  margin-top: 1px;
}

/* insight cards used inside showcase visuals */
.insight {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface);
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.insight + .insight {
  margin-top: 12px;
}
.insight .tag {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
}
.insight.warn .tag {
  background: rgba(245, 158, 11, 0.14);
  color: var(--gold);
}
.insight.good .tag {
  background: var(--up-a);
  color: var(--up-light);
}
.insight.bad .tag {
  background: var(--down-a);
  color: var(--down-light);
}
.insight h4 {
  font-size: 0.96rem;
  margin-bottom: 3px;
}
.insight p {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* stat tiles row */
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.metric {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--surface));
  padding: 20px 18px;
  text-align: left;
}
.metric .v {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.metric .l {
  color: var(--text-3);
  font-size: 0.82rem;
  margin-top: 6px;
}

/* ============================================================
   STEPS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card), var(--surface));
  position: relative;
}
.step-n {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light);
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: var(--accent-a);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.step h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.step p {
  font-size: 0.94rem;
}

/* ============================================================
   PRICING
   ============================================================ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.price {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card), var(--surface));
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.price.hot {
  border-color: rgba(99, 102, 241, 0.5);
  background: radial-gradient(120% 90% at 50% 0%, rgba(99, 102, 241, 0.14), transparent 60%),
    linear-gradient(180deg, var(--card), var(--surface));
  box-shadow: var(--shadow-glow);
}
.price-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-name h3 {
  font-size: 1.25rem;
}
.badge-hot {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: var(--accent-a);
  border: 1px solid rgba(99, 102, 241, 0.35);
  padding: 4px 9px;
  border-radius: 999px;
}
.price-amt {
  margin: 20px 0 6px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.price-amt .num {
  font-family: var(--mono);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.price-amt .per {
  color: var(--text-3);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.price > p {
  font-size: 0.92rem;
  min-height: 42px;
}
.price ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
  display: grid;
  gap: 12px;
}
.price li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-2);
}
.price li .tick {
  color: var(--up-light);
  flex: none;
  margin-top: 2px;
}
.price .btn {
  margin-top: auto;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes {
  columns: 3;
  column-gap: 18px;
}
.quote {
  break-inside: avoid;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card), var(--surface));
}
.quote p {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
}
.quote-by {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.quote-av {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  flex: none;
}
.quote-av::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.92;
  background: center / 60% no-repeat
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>");
}
.quote-by .n {
  font-weight: 600;
  font-size: 0.92rem;
}
.quote-by .r {
  color: var(--text-3);
  font-size: 0.8rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
}
.faq-q .chev {
  transition: transform 0.2s;
  color: var(--text-3);
  flex: none;
}
.faq-item.open .faq-q .chev {
  transform: rotate(180deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.faq-a-inner {
  padding: 0 22px 22px;
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-band {
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  text-align: center;
  background: radial-gradient(120% 130% at 50% 0%, rgba(99, 102, 241, 0.2), transparent 60%),
    linear-gradient(180deg, var(--card), var(--surface));
  box-shadow: var(--shadow-glow);
  position: relative;
  overflow: hidden;
}
.cta-band h2 {
  margin-bottom: 16px;
}
.cta-band .lede {
  margin: 0 auto 30px;
}
.cta-band .hero-cta {
  justify-content: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
}
.footer p {
  font-size: 0.9rem;
  margin-top: 14px;
  max-width: 280px;
}
.footer h5 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  color: var(--text-2);
  font-size: 0.92rem;
  padding: 5px 0;
  transition: color 0.15s;
}
.footer-col a:hover {
  color: var(--text);
}
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 0.86rem;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: all 0.15s;
}
.footer-social a:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--surface-2);
}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-head {
  padding: 72px 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.page-head .lede {
  margin: 0 auto;
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.post-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card), var(--surface));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
}
.post-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.post-cover {
  aspect-ratio: 16 / 9;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.post-cover .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 9, 12, 0.7);
  border: 1px solid var(--line-strong);
  color: var(--text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.post-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-body .meta {
  color: var(--text-3);
  font-size: 0.8rem;
  font-family: var(--mono);
}
.post-body h3 {
  font-size: 1.18rem;
  margin: 10px 0;
  letter-spacing: -0.02em;
}
.post-body p {
  font-size: 0.93rem;
  flex: 1;
}
.post-read {
  margin-top: 16px;
  color: var(--accent-light);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-feature {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
}
.post-feature .post-cover {
  aspect-ratio: auto;
  height: 100%;
  min-height: 300px;
}
.post-feature .post-body {
  padding: 40px;
  justify-content: center;
}
.post-feature .post-body h3 {
  font-size: 1.9rem;
}

/* article */
.article {
  max-width: 760px;
  margin: 0 auto;
}
.article-head {
  text-align: center;
  padding: 20px 0 40px;
}
.article-head .meta {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.86rem;
  margin-bottom: 18px;
}
.article-head h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
}
.article-cover {
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 44px;
}
.prose {
  color: var(--text-2);
  font-size: 1.06rem;
  line-height: 1.78;
}
.prose h2 {
  color: var(--text);
  font-size: 1.6rem;
  margin: 44px 0 16px;
  letter-spacing: -0.02em;
}
.prose h3 {
  color: var(--text);
  font-size: 1.25rem;
  margin: 32px 0 12px;
}
.prose p {
  margin: 0 0 20px;
  font-size: inherit;
  color: var(--text-2);
}
.prose a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose ul,
.prose ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.prose li {
  margin: 8px 0;
  color: var(--text-2);
}
.prose strong {
  color: var(--text);
}
.prose blockquote {
  margin: 26px 0;
  padding: 4px 22px;
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 1.15rem;
  font-style: italic;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 6px;
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  overflow-x: auto;
  margin: 0 0 22px;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
}
.prose img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: 26px 0;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* ---------- contact / forms ---------- */
.form {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 7px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-a);
}
.field textarea {
  min-height: 140px;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-note {
  text-align: center;
  color: var(--text-3);
  font-size: 0.86rem;
}
.form-ok {
  padding: 16px;
  border-radius: 11px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: var(--up-a);
  color: var(--up-light);
  text-align: center;
  font-weight: 500;
}

/* about values */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}

/* not found */
.nf {
  text-align: center;
  padding: 120px 0;
}
.nf .code {
  font-family: var(--mono);
  font-size: 6rem;
  font-weight: 700;
  color: var(--accent-light);
  letter-spacing: -0.04em;
}

/* fade-in on scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid,
  .show-row,
  .show-row.rev .show-text,
  .post-feature {
    grid-template-columns: 1fr;
  }
  .show-row.rev .show-text {
    order: 0;
  }
  .feat-grid,
  .steps,
  .price-grid,
  .blog-grid,
  .values,
  .quotes {
    grid-template-columns: 1fr;
  }
  .quotes {
    columns: 1;
  }
  .feat.span-2,
  .post-feature {
    grid-column: auto;
  }
  .metric-row,
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .mock-float {
    display: none;
  }
  .nav-links {
    position: fixed;
    inset: 66px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 12px;
    gap: 4px;
    transform: translateY(-140%);
    transition: transform 0.25s ease;
  }
  .nav-links.open {
    transform: none;
  }
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
  }
  .nav-cta .btn-ghost {
    display: none;
  }
  .section {
    padding: 72px 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .mock-stats {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  /* Keep the header from letting "Start free" crowd/overlap the logo */
  .nav-inner {
    gap: 12px;
  }
  .brand {
    min-width: 0;
  }
  .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-wordmark {
    height: 30px;
    max-width: 44vw;
    object-fit: contain;
  }
  .nav-cta {
    gap: 8px;
    flex: none;
  }
  .nav-cta .btn-primary {
    padding: 8px 13px;
    font-size: 0.86rem;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .nav-cta .btn-primary {
    padding: 7px 11px;
    font-size: 0.8rem;
  }
  .brand {
    font-size: 0.98rem;
    gap: 7px;
  }
  .brand-logo {
    width: 28px;
    height: 28px;
  }
  .brand-wordmark {
    height: 30px;
    max-width: 32vw;
    object-fit: contain;
  }
  .nav-toggle {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Back-to-top floating button (added on every page by main.js) */
.to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--accent);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:60;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent-dark)}

/* Nav "Tools" dropdown */
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd-btn{background:none;border:none;font:inherit;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0}
.nav-dd-btn:hover{color:var(--text)}
.nav-dd-chev{display:inline-block;transition:transform .2s ease;opacity:.85}
.nav-dd:hover .nav-dd-chev,.nav-dd:focus-within .nav-dd-chev{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:70}
/* Bridge the 10px gap so the menu doesn't close when the cursor crosses it */
.nav-dd::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.nav-dd-item{display:block;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.95rem;font-weight:600}
.nav-dd-item:hover,.nav-dd-item.active{background:var(--accent-a);color:var(--accent-light)}
/* Mobile stacked menu: Tools is a click accordion - the down arrow shows, and
   the items stay hidden until you tap Tools (arrow rotates open). Placed AFTER
   the base rules above so it wins the cascade. Toggled by .open in main.js. */
@media (max-width: 960px) {
  .nav-dd{display:block;width:100%}
  .nav-dd-btn{width:100%;justify-content:space-between;padding:8px 13px;font-size:.92rem;font-weight:500}
  .nav-dd::after{display:none}
  .nav-dd.open .nav-dd-chev{transform:rotate(180deg)}
  .nav-dd-menu{position:static;min-width:0;background:none;border:none;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none;padding:0}
  .nav-dd.open .nav-dd-menu{display:block;padding:2px 0 4px}
  .nav-dd-item{padding:8px 13px 8px 26px;font-size:.9rem}
}

/* Risk calculator */
.calc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr}}
.calc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.calc-chip{border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);border-radius:999px;padding:7px 14px;font-size:.85rem;font-weight:600;cursor:pointer}
.calc-chip.active{border-color:var(--accent);background:var(--accent-a);color:var(--accent-light)}
.calc-result{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.calc-result:first-child{border-top:none}
.calc-result .lbl{color:var(--text-3);font-size:.9rem}
.calc-result .val{color:var(--text);font-weight:700;font-family:'JetBrains Mono',monospace}
.calc-result .val.big{font-size:1.6rem;color:var(--accent-light)}
.calc-hint{color:var(--text-3);font-size:.82rem;margin-top:10px;line-height:1.5}
.calc-err{color:#f43f5e;font-size:.85rem;margin-top:8px;display:none}

/* Risk calculator - added controls + app promo */
.calc-lbl{display:block;color:var(--text-2);font-size:.85rem;font-weight:600;margin-bottom:8px}
.calc-lbl-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.calc-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);padding:2px}
.calc-toggle button{border:none;background:none;color:var(--text-3);font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:999px;cursor:pointer}
.calc-toggle button.active{background:var(--accent);color:#fff}
.calc-promo{padding:34px;background:linear-gradient(135deg,var(--accent-a),transparent);border-color:var(--accent-a)}
.calc-promo-feats{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:22px}
.calc-promo-feats span{color:var(--text-2);font-size:.95rem;font-weight:600}
.calc-promo-cta{display:flex;flex-wrap:wrap;gap:12px}
.calc-size{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:2rem;color:var(--accent-light);padding:4px 0 16px;line-height:1.1}
.calc-select{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--text);font:inherit;font-size:.95rem;cursor:pointer}
.calc-select:focus{outline:none;border-color:var(--accent)}

/* ---------- Economic calendar page ---------- */
.econ-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.econ-toolbar-hint{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3)}
/* Match the app's economic-calendar card background exactly (#13141A) on every
   layer behind TradingView's widget so its transparent area never shows white. */
.econ-cal{min-height:660px;background:var(--surface-2);border-radius:var(--radius-sm);overflow:hidden}
.econ-cal .tradingview-widget-container,
.econ-cal .tradingview-widget-container__widget,
.econ-cal iframe{background:var(--surface-2) !important}
.tradingview-widget-copyright{margin-top:12px;font-size:12px;text-align:center}
.tradingview-widget-copyright a{color:var(--text-3);text-decoration:none}
.tradingview-widget-copyright a:hover{color:var(--text-2)}