@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #050505;
  --muted: #686b65;
  --line: rgba(5, 5, 5, .14);
  --line-strong: rgba(5, 5, 5, .28);
  --paper: #f4f4ed;
  --white: #ffffff;
  --blue: #050505;
  --blue-dark: #22231f;
  --blue-soft: #efffc0;
  --lime: #c7ff00;
  --coral: #ff6240;
  --cyan: #42e8e0;
  --yellow: #ffdd31;
  --green: #00c805;
  --red: #e54235;
  --violet: #956dff;
  --shadow: 0 24px 70px rgba(5,5,5,.12);
  --radius: 18px;
  --pad: clamp(22px, 4.6vw, 72px);
}

body {
  background: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 15%), rgba(199,255,0,.12), transparent 75%);
}

.noise { opacity: .018; }

.topbar {
  height: 76px;
  color: white;
  background: rgba(5,5,5,.94);
  border-bottom-color: rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}

.brand { gap: 12px; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: none;
}
.brand-mark svg { width: 26px; height: 26px; fill: var(--ink); }
.wordmark { font-size: 14px; letter-spacing: -.02em; font-weight: 700; }

.desktop-nav a { color: #aaa; font-size: 13px; font-weight: 500; }
.desktop-nav a:hover, .desktop-nav a.active { color: white; }
.desktop-nav a::after { background: var(--lime); bottom: -11px; }
.icon-button { color: white; background: #181916; border-color: rgba(255,255,255,.15); }
.keycap { color: #aaa; background: #2b2c28; }
.wallet-button { color: var(--ink); background: var(--lime); box-shadow: 0 0 0 0 rgba(199,255,0,.35); }
.wallet-button:hover { color: var(--ink); background: #d7ff50; box-shadow: 0 0 0 6px rgba(199,255,0,.13); }
.wallet-dot { background: var(--ink); box-shadow: none; }
.mobile-menu-button { border-color: rgba(255,255,255,.2); }
.mobile-menu-button span { background: white; }
.mobile-nav { background: rgba(5,5,5,.98); color: white; border-color: rgba(255,255,255,.12); }
.mobile-nav a { border-color: rgba(255,255,255,.12); }

.eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; }
.live-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(0,200,5,.13); }

.hood-hero {
  min-height: calc(100svh - 76px);
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(46px, 6vw, 96px);
  padding-top: clamp(54px, 7.5vh, 90px);
  padding-bottom: clamp(54px, 7.5vh, 90px);
  background:
    linear-gradient(90deg, transparent 49.95%, rgba(5,5,5,.08) 50%, transparent 50.05%),
    var(--paper);
}

.hero-copy { position: relative; z-index: 2; }
.hero h1, .route-hero h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(70px, 7.2vw, 118px);
  line-height: .82;
  letter-spacing: -.045em;
  margin: 30px 0 34px;
}
.hero h1 em, .route-hero h1 em {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: .13em;
  text-underline-offset: -.02em;
  text-decoration-skip-ink: none;
}
.hero-lede {
  max-width: 550px;
  font-size: 17px;
  line-height: 1.7;
  color: #4d504a;
}
.hero-actions { margin-top: 34px; }
.button {
  border-radius: 999px;
  min-height: 52px;
  padding: 0 24px;
  font-size: 14px;
  box-shadow: none;
}
.button.primary {
  color: var(--ink);
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: none;
}
.button.primary:hover { color: white; background: var(--ink); border-color: var(--ink); }
.button.ghost { border-color: var(--ink); }
.button.ghost:hover { color: white; background: var(--ink); }
.button.ghost span { color: inherit; }
.trust-row {
  margin-top: 50px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 0;
  color: var(--ink);
}
.trust-row span { padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--line); font-size: 12px; }
.trust-row span:last-child { border: 0; }
.trust-row i { color: var(--muted); font: 500 9px 'DM Mono', monospace; }

.market-terminal {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  color: white;
  background: #080908;
  border: 1px solid #2d2f29;
  border-radius: 28px;
  box-shadow: 0 35px 100px rgba(5,5,5,.24);
  padding: 27px;
  isolation: isolate;
}
.market-terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 85% 12%, rgba(199,255,0,.13), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 32%);
}
.terminal-glow {
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -120px;
  bottom: -130px;
  border-radius: 50%;
  background: var(--lime);
  filter: blur(85px);
  opacity: .16;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .28; transform: scale(1.18); } }
.terminal-topline { display: flex; justify-content: space-between; color: #8d9187; font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; }
.terminal-quote { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-top: 44px; }
.terminal-quote span { color: var(--lime); font: 500 12px 'DM Mono', monospace; }
.terminal-quote h2 { margin: 6px 0 0; font: 400 clamp(46px, 4.6vw, 76px)/.9 'Instrument Serif', serif; letter-spacing: -.035em; }
.terminal-price { text-align: right; }
.terminal-price strong { display: block; font-size: 29px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.terminal-price small { display: block; margin-top: 7px; color: var(--green); font: 500 11px 'DM Mono', monospace; }
.terminal-chart-wrap { position: relative; height: 255px; margin: 34px -27px 0; overflow: hidden; }
.chart-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 64px 52px; mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); }
#hero-market-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#hero-market-chart .hero-area { fill: url(#heroFade); }
#hero-market-chart .hero-line { fill: none; stroke: var(--lime); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(199,255,0,.45)); animation: drawLine 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drawLine { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
.chart-cursor { position: absolute; right: 17%; top: 24%; width: 1px; height: 62%; background: rgba(255,255,255,.22); animation: cursorSweep 6s ease-in-out infinite; }
.chart-cursor::before { content: ''; position: absolute; left: -5px; top: 44%; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(199,255,0,.18); }
.chart-cursor span { position: absolute; top: calc(44% - 15px); right: 10px; padding: 6px 8px; border-radius: 6px; color: var(--ink); background: var(--lime); font: 500 9px 'DM Mono', monospace; }
@keyframes cursorSweep { 0%,100% { transform: translateX(22px); opacity: .6; } 50% { transform: translateX(-150px); opacity: 1; } }
.terminal-ranges { display: flex; gap: 8px; margin-top: 6px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 19px; }
.terminal-ranges button { color: #777b72; background: transparent; border: 0; border-radius: 5px; padding: 5px 7px; font: 500 9px 'DM Mono', monospace; }
.terminal-ranges button.active { color: var(--ink); background: var(--lime); }
.terminal-watchlist { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 18px 0; }
.hero-symbol { min-width: 0; padding: 12px; text-align: left; color: white; background: #151714; border: 1px solid transparent; border-radius: 11px; transition: background .2s, border-color .2s, transform .2s; }
.hero-symbol:hover { transform: translateY(-2px); border-color: #4d5147; }
.hero-symbol.active { color: var(--ink); background: var(--lime); }
.hero-symbol span, .hero-symbol b, .hero-symbol i { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hero-symbol span { color: #858a80; font: 500 9px 'DM Mono', monospace; }
.hero-symbol.active span { color: #4e5f00; }
.hero-symbol b { margin-top: 6px; font-size: 11px; }
.hero-symbol i { margin-top: 5px; color: var(--green); font: 500 9px 'DM Mono', monospace; font-style: normal; }
.hero-symbol.active i { color: #314100; }
.terminal-trade { width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; color: var(--ink); background: var(--lime); border: 0; border-radius: 999px; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.terminal-trade:hover { transform: scale(.99); background: white; }
.terminal-trade i { font-style: normal; font-size: 19px; }

.ticker-wrap { color: white; background: var(--ink); border-color: #252621; }
.ticker-item { border-color: #2b2c28; }
.ticker-item small { color: #858a80; }
.ticker-item b { color: white; }

.section-space { padding-top: clamp(90px, 9vw, 145px); padding-bottom: clamp(90px, 9vw, 145px); }
.section-head h2, .faq-intro h2 { font: 400 clamp(54px, 6vw, 94px)/.92 'Instrument Serif', serif; letter-spacing: -.045em; }
.text-link { border: 0; padding: 12px 18px; border-radius: 999px; color: white; background: var(--ink); }
.text-link:hover { color: var(--ink); background: var(--lime); }
.featured-grid { grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; }
.featured-card { background: white; border-color: var(--line); border-radius: 14px; box-shadow: none; }
.featured-card:first-child { background: var(--lime); }
.featured-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(5,5,5,.1); }
.featured-card::before { display: none; }
.market-code { color: white; background: var(--ink); }
.featured-card:first-child .market-code { color: var(--lime); }
.featured-card .mini-chart .line { stroke-width: 2.4; }
.featured-card:first-child .mini-chart .line { stroke: var(--ink); }

.manifesto { color: var(--ink); background: var(--lime); }
.manifesto::before { width: 700px; height: 700px; right: -260px; top: -330px; background: transparent; border: 1px solid rgba(5,5,5,.25); box-shadow: 0 0 0 75px rgba(5,5,5,.04), 0 0 0 150px rgba(5,5,5,.03); }
.manifesto-number, .manifesto > p { color: #465900; }
.manifesto > h2 { max-width: 1160px; color: var(--ink); font-family: 'Instrument Serif', serif; font-weight: 400; }
.manifesto-grid { border-color: rgba(5,5,5,.25); }
.manifesto-grid article { border-color: rgba(5,5,5,.25); }
.manifesto-grid b { color: #465900; }
.manifesto-grid p { color: #344100; }

.cta-band { min-height: 450px; color: white; background: var(--ink); }
.cta-band h2 { font-family: 'Instrument Serif', serif; font-weight: 400; }
.round-arrow { color: var(--ink); background: var(--lime); }
.round-arrow:hover { color: white; background: #252621; }

.route-hero { min-height: 430px; color: var(--ink); background: var(--lime); border: 0; }
.route-hero h1 { font-size: clamp(64px, 7.8vw, 116px); }
.route-hero h1 em { text-decoration-color: white; }
.route-stat { background: var(--ink); color: white; border-color: var(--ink); box-shadow: none; }
.route-stat span, .route-stat small { color: #979b91; }
.route-stat strong { color: var(--lime); }

.market-workspace { background: var(--paper); }
.filters { top: 92px; background: rgba(244,244,237,.94); border-color: var(--line-strong); border-radius: 999px; backdrop-filter: blur(15px); }
.search-field { border-color: var(--line-strong); border-radius: 999px; }
.filter-pills button { border-radius: 999px; }
.filter-pills button.active { color: var(--ink); background: var(--lime); }
.market-list-head { border-color: var(--line-strong); }
.market-row { border-color: var(--line); }
.market-row:hover { background: white; }
.market-avatar { border-radius: 50%; background: var(--ink) !important; color: var(--lime) !important; }
.row-chart path { stroke: var(--green) !important; }
.row-actions button { color: var(--ink); background: var(--lime); border-radius: 999px; }
.row-actions button:hover { color: white; background: var(--ink); }

.portfolio-hero, .build-hero, .learn-hero { color: white; background: var(--ink); }
.portfolio-hero h1 em, .build-hero h1 em, .learn-hero h1 em { color: white; text-decoration-color: var(--lime); }
.build-hero > p, .learn-hero > p { color: #adb0a8; }
.balance-card, .cash-card, .holdings-card { border-radius: 14px; }
.balance-card { color: white; background: var(--ink); border-color: var(--ink); }
.balance-card > span { color: #92968c; }
.chart-range button { color: #898d84; }
.chart-range button.active { color: var(--ink); background: var(--lime); }
.cash-card { background: var(--lime); border-color: var(--lime); }
.cash-card span { color: #3c4b00; }
.allocation-ring { background: conic-gradient(var(--ink) var(--invested, 0%), rgba(255,255,255,.45) 0); }
.button.soft { color: white; background: var(--ink); }
.empty-orbit { border-color: var(--ink); }
.empty-orbit span { color: var(--ink); background: var(--lime); }

.builder-catalogue, .builder-canvas, .index-preview { border-radius: 14px; }
.builder-step > span { color: var(--ink); background: var(--lime); }
.builder-market button.selected { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.index-name-wrap { background: #f1f1eb; }
.allocation-item input[type=range] { accent-color: var(--green); }
.index-preview { background: var(--ink); }
.preview-card { background: radial-gradient(circle at 50% 45%, rgba(199,255,0,.15), transparent 38%), #11130f; }
.composition-orbit { box-shadow: 0 0 65px rgba(199,255,0,.22); }

.steps article { border-radius: 14px; }
.steps article:nth-child(2) { color: var(--ink); background: var(--lime); }
.steps article:nth-child(3) { color: white; background: var(--ink); }
.steps article:nth-child(2) p { color: #344100; }
.steps article:nth-child(3) p { color: #a9ada4; }
.steps article:nth-child(2) .step-icon { color: var(--ink); background: rgba(255,255,255,.5); box-shadow: none; }
.steps article:nth-child(3) .step-icon { color: var(--ink); background: var(--lime); }
.faq-shell { background: white; }
.faq-item button i { color: var(--green); }

.footer { background: var(--ink); }
.footer-brand .brand-mark { background: var(--lime); }
.footer-brand .brand-mark svg { fill: var(--ink); }
.footer-links b { color: #7f837a; }
.footer-bottom { border-color: #2b2c28; }

.modal { border-radius: 18px; }
.modal-orb, .wallet-option-icon { color: var(--ink); background: var(--lime); }
.wallet-option:hover { border-color: var(--ink); background: #f4f7e9; }
.trade-tabs button.active { color: var(--ink); box-shadow: none; }
.trade-tabs { background: #eceee7; }
.amount-field { border-color: var(--line-strong); }
.quick-amounts button { border-radius: 999px; }
.quick-amounts button:hover { color: var(--ink); border-color: var(--ink); background: var(--lime); }
.command-result:hover, .command-result.active { background: var(--blue-soft); }
.toast { color: var(--ink); background: var(--lime); }
.toast i { color: white; background: var(--ink); }
.tour-visual { background: radial-gradient(circle, rgba(199,255,0,.72), rgba(244,244,237,.5) 50%, transparent 72%); }
.tour-center { color: var(--ink); background: var(--lime); box-shadow: 0 15px 45px rgba(199,255,0,.28); }

@media (max-width: 1100px) {
  .hood-hero { grid-template-columns: 1fr; background: var(--paper); }
  .hero-copy { max-width: 850px; }
  .market-terminal { min-height: 640px; }
}

@media (max-width: 760px) {
  .topbar { height: 70px; }
  .hood-hero { padding-top: 44px; }
  .hero h1, .route-hero h1 { font-size: clamp(58px, 18vw, 82px); line-height: .84; }
  .hero-lede { font-size: 16px; }
  .trust-row { display: grid; grid-template-columns: repeat(3,1fr); }
  .trust-row span { display: grid; gap: 6px; margin: 0; padding: 0 10px; text-align: center; border-right: 1px solid var(--line); }
  .market-terminal { min-height: 565px; padding: 19px; border-radius: 18px; }
  .terminal-quote { margin-top: 32px; }
  .terminal-quote h2 { font-size: 54px; }
  .terminal-price strong { font-size: 21px; }
  .terminal-chart-wrap { height: 215px; margin-left: -19px; margin-right: -19px; }
  .terminal-watchlist { grid-template-columns: repeat(2,1fr); }
  .hero-symbol:nth-child(n+3) { display: none; }
  .featured-grid { grid-template-columns: 1fr; }
  .manifesto::before { display: none; }
  .filters { top: 82px; border-radius: 18px; }
  .route-hero { min-height: 390px; }
}