:root{
  --bg:#0f1410;
  --card:#121a12;
  --accent:#5CFF7C;
  --accent-2:#9AF7A8;
  --text:#EAF6EA;
  --muted:#9fb9a5;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background:
    radial-gradient(60% 40% at 20% 10%, #163316 0%, rgba(15,20,16,0) 60%),
    radial-gradient(60% 40% at 80% 0%, #1b3d1b 0%, rgba(15,20,16,0) 60%),
    var(--bg);
  line-height:1.6;
}
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1100px; padding:0 20px; margin:0 auto}
.btn{
  display:inline-block; padding:14px 22px; border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#05240d; font-weight:800; letter-spacing:.3px; box-shadow:var(--shadow);
}
.btn.outline{background:transparent; border:2px solid var(--accent); color:var(--text)}
.btn.small{padding:10px 14px; font-size:.95rem}
nav{
  position:sticky; top:0; z-index:20;
  background:rgba(15,20,16,.7); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.05)
}
.navbar{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.8px}
.brand img{width:36px; height:36px; border-radius:8px}
.menu{display:flex; gap:18px; align-items:center}
.menu a{color:var(--muted); font-weight:600}
.menu a:hover, .menu a.active{color:var(--text)}
.hamburger{display:none; background:none; border:0; color:var(--text); font-size:26px}
@media (max-width:860px){
  .menu{position:fixed; inset:64px 0 auto 0; background:rgba(18,26,18,.96); flex-direction:column; padding:18px; transform:translateY(-130%); transition:.25s}
  .menu.open{transform:translateY(0)}
  .hamburger{display:block}
}
header.hero{padding:72px 0 30px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.hero h1{font-size:56px; line-height:1.05; margin:0 0 8px}
.hero p.lead{font-size:1.25rem; color:var(--muted); margin:0 0 22px}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap}
.hero .card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.05);
  padding:16px; border-radius:18px;
}
.hero-img{border-radius:24px; border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); width:100%}
.section{padding:70px 0}
.section h2{font-size:36px; margin:0 0 6px}
.section p.sub{color:var(--muted); margin-top:0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:var(--card); border:1px solid rgba(255,255,255,.05); border-radius:18px; padding:22px; box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.tokenomics .num{font-size:36px; font-weight:900}
.kv{display:flex; justify-content:space-between; align-items:center; border-top:1px dashed rgba(255,255,255,.1); padding:10px 0}
.kv:first-child{border-top:0}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.06); padding:18px; border-radius:14px}
.step .badge{display:inline-block; background:var(--accent); color:#05240d; font-weight:800; border-radius:10px; padding:4px 10px; margin-bottom:6px}
.faq details{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px; margin:10px 0}
footer{padding:40px 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted)}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.95rem; padding:10px 12px; background:#0b0f0b; border:1px solid rgba(255,255,255,.06); border-radius:10px}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badges .pill{border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 10px; color:var(--muted)}
.logo-title{display:flex; align-items:center; gap:10px}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .hero h1{font-size:42px}
}