:root {
  --yellow:#ffeb3b;
  --orange:#ff9800;
  --green:#2cff9a;
  --dark:#041d16;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:radial-gradient(circle at top,#2cff9a,#031813);
  color:#fff;
  font-family:'Montserrat',sans-serif;
}

/* HEADER */
.header{
  position:fixed;top:0;width:100%;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--yellow);
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 25px;z-index:100;
}
.logo{font-family:'Luckiest Guy',cursive;color:var(--yellow);font-size:1.6rem}
nav a{margin:0 12px;color:#fff;text-decoration:none;font-weight:600;opacity:.85}
nav a:hover{opacity:1}

/* HERO */
.hero{padding:140px 20px 70px;text-align:center}
.banner{max-width:100%;border-radius:24px;box-shadow:0 0 60px rgba(255,215,0,.6)}
h1{font-family:'Luckiest Guy';font-size:4rem;margin-top:25px;text-shadow:4px 4px 0 #000}
.subtitle{font-size:1.3rem;opacity:.9}

/* BUTTONS */
.btn{display:inline-block;border-radius:40px;font-weight:800;text-decoration:none;margin:8px;transition:.15s}
.btn.primary{background:linear-gradient(45deg,var(--orange),var(--yellow));color:#000;padding:14px 34px;box-shadow:0 6px 0 #000}
.btn.secondary{border:3px solid var(--yellow);color:var(--yellow);padding:12px 32px}
.btn.small{padding:8px 18px;font-size:.85rem}
.btn:hover{transform:translateY(-3px)}

/* SECTIONS */
.section{padding:70px 20px;text-align:center}
.section h2{font-family:'Luckiest Guy';font-size:2.6rem;margin-bottom:25px;color:var(--yellow);text-shadow:3px 3px 0 #000}
.glass{background:rgba(0,0,0,.35);border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow)}
.dark{background:var(--dark)}

/* AIRDROP */
.airdrop-section{background:linear-gradient(180deg,#062b20,#041d16)}
.airdrop-card{
  max-width:1100px;margin:0 auto;
  background:rgba(0,0,0,.5);
  border:3px solid var(--orange);
  border-radius:28px;
  padding:30px;
  display:flex;flex-wrap:wrap;gap:30px;align-items:center;
}
.airdrop-card img{
  max-width:420px;width:100%;
  border-radius:20px;
  box-shadow:0 0 30px rgba(255,153,0,.5);
}
.airdrop-text{flex:1;text-align:left}
.airdrop-text h3{font-size:1.8rem;color:var(--yellow);margin-bottom:15px}

/* TOKENOMICS */
.token-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:900px;margin:30px auto}
.token-info div{background:rgba(0,0,0,.45);border:2px solid var(--yellow);border-radius:16px;padding:20px}
.token-info strong{display:block;opacity:.7}
.token-info span{font-size:1.2rem;color:var(--green)}

.tokenomics-visual{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:40px}
.pie{
  width:220px;height:220px;border-radius:50%;
  background:conic-gradient(#ffeb3b 0 40%,#ff9800 40 70%,#2cff9a 70 90%,#fff 90 100%);
  box-shadow:0 0 30px rgba(0,0,0,.6)
}
.legend{list-style:none;margin-left:40px;text-align:left}
.legend li{margin:10px 0}
.legend span{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px}
.c1{background:#ffeb3b}.c2{background:#ff9800}.c3{background:#2cff9a}.c4{background:#fff}

/* ROADMAP */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;max-width:1100px;margin:40px auto}
.step{background:rgba(0,0,0,.45);border:3px solid var(--orange);border-radius:22px;padding:35px;position:relative}
.badge{width:46px;height:46px;border-radius:50%;background:linear-gradient(45deg,var(--orange),var(--yellow));color:#000;font-weight:800;line-height:46px;position:absolute;top:-23px;left:50%;transform:translateX(-50%)}

/* FOOTER */
footer{padding:30px;text-align:center;font-size:.85rem;opacity:.6}