:root{ --text:#f3f5f7; --muted:#b4bac4; --border:#ffffff18; --radius:18px; --max:1180px;}
*{box-sizing:border-box}
html{background:#000}
body{margin:0; color:var(--text); background:transparent; font:500 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; position:relative; z-index:1}
.wallpaper{position:fixed; inset:0; z-index:0; background:#000 url('wallpaper.svg') repeat; background-size:520px 180px; background-attachment:fixed}
main, header, footer, section{position:relative; z-index:1}
.container{max-width:var(--max); margin-inline:auto; padding:clamp(16px,2vw,28px)}
.header{position:sticky; top:0; z-index:10; backdrop-filter: blur(10px) saturate(140%); background:#000000f0; border-bottom:1px solid var(--border)}
.nav{display:flex; justify-content:space-between; align-items:center; gap:16px}
.brand{font-weight:800}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{background:#111; border:1px solid var(--border); border-radius:30px; padding:10px 16px; transition:.2s; color:var(--text); text-decoration:none}
.btn:hover{background:#1b1b1b}
.btn.sm{ padding:8px 12px; font-size:.92rem; border-radius:20px }
.hero{ padding:clamp(28px,6vw,72px) 0; }
.hero-grid{ display:grid; grid-template-columns:minmax(260px,420px) 1fr; align-items:center; gap:clamp(18px,5vw,48px) }
.logo-art img{ display:block; width:100%; height:auto; border-radius:12px }
.hero-copy h1{font-size:clamp(36px,6vw,64px); margin:0 0 10px}
.hero-copy .slogan{font-size:clamp(18px,2.4vw,22px); color:#d5d9e2; margin:0}
.section{padding: clamp(30px,6vw,72px) 0; border-top:1px solid var(--border)}
h2{font-size:clamp(24px,4vw,34px); margin:0 0 10px}
.roadmap-container{position:relative; display:flex; justify-content:space-between; gap:20px; margin-top:26px}
.roadmap-line{position:absolute; top:50%; left:0; right:0; height:3px; background:linear-gradient(90deg,#ff6b6b,#ffd166,#06d6a0,#5ea0ff,#9b5cff,#ff6b6b); filter:blur(5px); z-index:0; opacity:.9}
.phase{background:#0d0d0f; border:1px solid var(--border); border-radius:var(--radius); padding:18px; width:32%; text-align:center; position:relative; z-index:1; box-shadow:0 0 10px rgba(0,0,0,.35)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr; text-align:center} .phase{width:100%} .roadmap-line{display:none}}
.page{min-height:60vh}
.center{display:grid; place-items:center; text-align:center; min-height:50vh}
.badge{display:inline-block; padding:10px 14px; border:1px solid var(--border); border-radius:999px; background:#0e0e0e; color:#e7ebf3}
footer{padding:36px 20px; text-align:center; color:#9aa1ad}

/* Dormant coin CSS placeholders */
:root{ --coinSize: min(320px, 60vw); --coinDepth: 20px; }
.coin-scene{ display:none; }
.coin{ width:var(--coinSize); height:var(--coinSize); position:relative; transform-style:preserve-3d; animation:spin 6s linear infinite; }
@keyframes spin{ from{ transform:rotateY(0deg) } to{ transform:rotateY(360deg) } }
.coin .face{ position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:50%; }
.coin .front{ transform:translateZ(calc(var(--coinDepth)/2)); background-image:url('assets/coin_1.png'); }
.coin .back{ transform:rotateY(180deg) translateZ(calc(var(--coinDepth)/2)); background-image:url('assets/coin_2.png'); }
.coin .edge{ position:absolute; inset:0; transform:rotateX(90deg) translateZ(calc(var(--coinSize)/2)); transform-origin:center; width:var(--coinSize); height:var(--coinDepth);
  background: radial-gradient(closest-side, rgba(255,255,255,.08), rgba(0,0,0,0) 60%), repeating-conic-gradient(from 0deg, #151515 0 6deg, #0d0d0d 6deg 12deg);
  border-radius:50%;
}