:root {
  --bg: #05070f;
  --bg-soft: #0c1222;
  --panel: rgba(12, 18, 34, 0.84);
  --line: rgba(255, 255, 255, 0.1);
  --text: #f4f0e8;
  --muted: rgba(244, 240, 232, 0.72);
  --gold-1: #f6cf7a;
  --gold-2: #c58a2b;
  --green: #44d37e;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(246, 207, 122, 0.12), transparent 24%),
    radial-gradient(circle at top left, rgba(53, 118, 255, 0.09), transparent 18%),
    linear-gradient(180deg, #060913 0%, #04060d 100%);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.site-shell { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; }
.topbar {
  position: sticky; top: 12px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 22px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: 22px;
  background: rgba(7, 10, 18, 0.75); backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.topbar.compact { position: relative; top: 0; }
.brand img { height: 60px; width: auto; object-fit: contain; }
.nav { display: flex; gap: 22px; color: var(--muted); font-weight: 500; }
.nav a:hover, .footer-links a:hover { color: var(--gold-1); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 16px; font-weight: 700;
  transition: 0.25s ease; border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  color: #120d05;
  background: linear-gradient(135deg, #f7db98 0%, #dda84a 48%, #c48320 100%);
  box-shadow: 0 18px 40px rgba(197, 138, 43, 0.22);
}
.btn-outline, .btn-dark {
  border-color: rgba(246, 207, 122, 0.22);
  background: rgba(255,255,255,0.03);
  color: var(--text);
}
.btn.full { width: 100%; }
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center;
  padding: 34px 8px 50px;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid rgba(246, 207, 122, 0.2);
  background: rgba(246, 207, 122, 0.08); color: var(--gold-1); font-weight: 700; font-size: 14px;
}
.hero h1 {
  margin: 18px 0 12px; font-size: clamp(56px, 10vw, 120px); line-height: 0.92;
  letter-spacing: -0.05em; font-weight: 900;
  background: linear-gradient(180deg, #ffeac0 0%, #f3cb72 48%, #bf7c19 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle { font-size: clamp(24px, 3vw, 36px); margin: 0 0 18px; font-weight: 800; }
.body-copy { color: var(--muted); max-width: 640px; font-size: 18px; line-height: 1.9; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0; }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 620px;
}
.stat-card, .launch-box, .feature-card {
  border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,0.03);
  padding: 18px 20px;
}
.stat-card span, .launch-box span, .section-kicker {
  display: block; color: rgba(244, 240, 232, 0.55); font-size: 12px; letter-spacing: 0.22em; font-weight: 700;
}
.stat-card strong, .launch-box strong { display: block; margin-top: 10px; font-size: 18px; }
.hero-visual-wrap { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.hero-glow {
  position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 207, 122, 0.25) 0%, rgba(246, 207, 122, 0.08) 35%, transparent 72%);
  filter: blur(10px);
}
.hero-visual {
  position: relative; width: min(100%, 620px); border-radius: 38px; box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.panel {
  border: 1px solid var(--line); border-radius: 30px; background: var(--panel);
  padding: 30px; box-shadow: var(--shadow);
}
.panel h2, .whitepaper-copy h2, .document-page h1 { margin: 10px 0 14px; font-size: clamp(28px, 4vw, 52px); }
.panel p, .document-page p, .document-page li, .whitepaper-copy p { color: var(--muted); line-height: 1.9; font-size: 17px; }
.launch-panel { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 28px; margin: 12px 0 26px; }
.launch-grid, .feature-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two-col-section { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 24px; margin: 26px 0; }
.feature-card h3 { margin: 0 0 10px; font-size: 22px; }
.feature-card p { margin: 0; }
.chart-section { margin: 26px 0; }
.chart-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.chart-placeholder {
  min-height: 350px; border-radius: 28px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246, 207, 122, 0.07), rgba(246, 207, 122, 0.01));
  background-size: 60px 60px, 60px 60px, auto;
}
.chart-line {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Cpath d='M0 315 C80 300, 120 220, 200 235 S350 320, 430 260 S560 160, 650 190 S790 295, 860 240 S980 160, 1050 120 S1140 80, 1200 52' fill='none' stroke='%23f6cf7a' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M0 315 C80 300, 120 220, 200 235 S350 320, 430 260 S560 160, 650 190 S790 295, 860 240 S980 160, 1050 120 S1140 80, 1200 52 L1200 400 L0 400 Z' fill='rgba(246,207,122,0.20)'/%3E%3C/svg%3E") center/cover no-repeat;
  opacity: 0.95;
}
.chart-note {
  position: absolute; right: 24px; bottom: 24px; max-width: 360px; padding: 22px;
  border-radius: 24px; background: rgba(4, 6, 13, 0.76); border: 1px solid rgba(246, 207, 122, 0.14);
}
.chart-note h3 { margin: 0 0 8px; font-size: 26px; }
.whitepaper-section { display: grid; grid-template-columns: 320px 1fr; gap: 24px; margin: 26px 0; }
.whitepaper-menu ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.whitepaper-menu li {
  border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,0.03);
  padding: 14px 16px; color: var(--muted);
}
.whitepaper-copy article { margin-top: 28px; }
.whitepaper-copy h3, .document-page h2 { margin: 0 0 10px; font-size: 28px; }
.footer {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  margin-top: 30px; padding: 24px 6px 0; color: var(--muted);
}
.footer strong { color: var(--text); display: block; margin-bottom: 6px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.whitepaper-page { max-width: 980px; }
.document-page { padding: 38px; }
.document-page .lead { font-size: 18px; margin-bottom: 28px; }
.document-page section { margin-top: 26px; }
.document-page ul { padding-left: 22px; }

@media (max-width: 980px) {
  .nav { display: none; }
  .hero, .launch-panel, .two-col-section, .whitepaper-section { grid-template-columns: 1fr; }
  .hero-visual-wrap { min-height: auto; }
}

@media (max-width: 700px) {
  .site-shell { width: min(100% - 20px, 1200px); }
  .topbar { padding: 14px; border-radius: 18px; }
  .brand img { height: 50px; }
  .hero { padding-top: 18px; }
  .stats-grid, .launch-grid, .feature-grid { grid-template-columns: 1fr; }
  .chart-header, .footer { flex-direction: column; align-items: flex-start; }
  .panel, .document-page { padding: 22px; }
  .chart-note { position: relative; right: auto; bottom: auto; margin: 20px; max-width: none; }
}