@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 .hero-image-mobile { display: none; }
.hero-lead-mobile { display: none; }
.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 { min-height: 935px; align-items: start; }
  .hero .hero-image-desktop { display: none; }
  .hero .hero-image-mobile {
    display: block;
    left: auto;
    right: 0;
    top: 72px;
    width: 68%;
    height: 578px;
    object-fit: cover;
    object-position: 27% center;
    filter: saturate(1.01) contrast(1.01) brightness(1.25);
    -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.92) 88%,rgba(0,0,0,.35) 96%,transparent 100%);
    mask-image: linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.92) 88%,rgba(0,0,0,.35) 96%,transparent 100%);
  }
  .hero-shade {
    background:
      linear-gradient(90deg,#0B0C0A 0%,rgba(11,12,10,.99) 29%,rgba(11,12,10,.76) 47%,rgba(11,12,10,.06) 72%,transparent 100%),
      linear-gradient(0deg,#0B0C0A 17%,rgba(11,12,10,.58) 30%,rgba(11,12,10,.06) 58%,rgba(11,12,10,.13) 100%);
  }
  .hero-copy { width: calc(100% - 48px); padding: 145px 0 300px; }
  .hero h1 { max-width: 330px; font-size: 3rem; line-height: .91; letter-spacing: -.065em; }
  .hero-lead-desktop { display: none; }
  .hero-lead-mobile { display: block; max-width: none; margin-top: 1.7rem; font-size: 1rem; line-height: 1.7; }
  .hero-lead-mobile span { display: block; white-space: nowrap; }
  .hero .actions { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 198px; gap: .55rem; margin-top: 1.55rem; }
  .hero .button { position: relative; min-height: 44px; padding: .6rem 2.7rem .6rem 1rem; border-radius: 7px; }
  .hero .button.ghost { border-color: rgba(203,251,69,.82); }
  .hero .button::after { content: "\2192"; position: absolute; right: 1.25rem; top: 50%; translate: 0 -50%; font-size: 1.45rem; line-height: 1; }
  .hero-stats { bottom: 62px; background: rgba(11,12,10,.88); }
  .hero-stats div { padding: 1rem; }
  .wp-visual { min-height: 330px; }
  .wp-visual img { height: 390px; }
  .wp-visual figcaption { grid-template-columns: 1fr; gap: .35rem; }
}