@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg: #0B0C0A;
  --panel: #181A17;
  --panel2: #22251F;
  --text: #F2F3EF;
  --muted: #7C8079;
  --pink: #CBFB45;
  --pink2: #DFFF78;
  --violet: #88AD35;
  --line: rgba(203, 251, 69, .18);
}

body { background: var(--bg); color: var(--text); }
h1, h2, h3, strong, .brand, .hero-stats, .metric-row, .donut, .allocations, .wp-token, .wp-keyfacts {
  font-family: "Space Grotesk", Inter, Pretendard, "Noto Sans KR", Arial, sans-serif;
}
.site-header.scrolled { background: rgba(11, 12, 10, .9); }
.brand-mark { background: linear-gradient(145deg, #CBFB45, #8FB52C); color: #0B0C0A; box-shadow: 0 0 30px rgba(203, 251, 69, .22); }
.site-header nav a { color: #C8CBC4; }
.header-cta { color: #F2F3EF; }
.eyebrow span, .button.primary, .wp-download, .download-card { color: #0B0C0A; }
.button.primary, .wp-download { box-shadow: 0 0 28px rgba(203, 251, 69, .12); }
.hero { background: #0B0C0A; }
.hero .hero-image { left: auto; right: 0; width: 62%; object-position: 50% 48%; filter: saturate(.82) contrast(1.08) brightness(.78); }
.hero-shade { background: linear-gradient(90deg,#0B0C0A 0%,rgba(11,12,10,.98) 28%,rgba(11,12,10,.62) 48%,rgba(11,12,10,.04) 70%,rgba(11,12,10,.82) 100%),linear-gradient(0deg,#0B0C0A 0%,transparent 38%); }
.hero-stats { background: rgba(17,19,16,.8); }
.hero-lead, .wp-hero p, .service-hero p { color: #D7D9D3; }
.dark-panel { background: #11130F; }
.feature-card:hover { border-color: rgba(203, 251, 69, .62); }
.donut { background: conic-gradient(#CBFB45 0 42%,#A9D33D 42% 62%,#88AD35 62% 79%,#6F8C30 79% 87%,#E4FF96 87% 91%,#B5D78E 91% 95%,#7C8079 95% 98%,#F2F3EF 98% 100%); box-shadow: 0 0 80px rgba(203,251,69,.13); }
.roadmap article:nth-child(5) { background: linear-gradient(145deg,#252C18,var(--panel)); }
.disclaimer, .wp-note, .wp-risk { border-color: rgba(203,251,69,.35); background: rgba(203,251,69,.06); color: #C9CDC3; }
.whitepaper-cta, .next-service { background: linear-gradient(135deg,#212718,#10120E); }
.service-overlay, .wp-hero>div { background: linear-gradient(90deg,rgba(11,12,10,.95),rgba(11,12,10,.38) 58%,rgba(11,12,10,.12)),linear-gradient(0deg,#0B0C0A,transparent 45%); }
.wp-keyfacts>div, .wp-core, .wp-qr-flow>div, .wp-disclosure { background: linear-gradient(145deg,#1E2219,#12140F); }
.wp-model-grid>div { border-color: rgba(203,251,69,.45); }
.wp-doc p, .wp-doc li { color: #B8BCB3; }
.wp-shell input { color: #F2F3EF; }
.wp-shell aside nav a { color: #BEC2B8; }
.wp-utility-table span { color: #E9EBE6; }

.wp-visual { position: relative; margin: 2.5rem 0 0; min-height: 420px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.wp-visual img { width: 100%; height: 480px; object-fit: cover; object-position: center 42%; filter: saturate(.78) contrast(1.04); }
.wp-visual-mono img { object-position: center 48%; filter: grayscale(1) contrast(1.08); }
.wp-visual figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; padding: 1.4rem 1.6rem; background: linear-gradient(90deg,rgba(11,12,10,.96),rgba(11,12,10,.72)); border-top: 1px solid var(--line); }
.wp-visual figcaption b { color: var(--pink2); font-size: .72rem; letter-spacing: .14em; }
.wp-visual figcaption span { color: #D4D7D0; font-size: .84rem; }

@media (max-width: 640px) {
  .hero .hero-image { width: 100%; object-position: 50% 44%; filter: saturate(.78) contrast(1.08) brightness(.65); }
  .hero-shade { background: linear-gradient(0deg,#0B0C0A 0%,rgba(11,12,10,.64) 58%,rgba(11,12,10,.3) 100%); }
  .wp-visual { min-height: 330px; }
  .wp-visual img { height: 390px; }
  .wp-visual figcaption { grid-template-columns: 1fr; gap: .35rem; }
}