:root { --lime:#ccff00; --lime-dark:#a8d400; --purple:#2b1a4a; --white:#ffffff; --ink:#14101f; --card-shadow:6px 6px 0 var(--purple); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Bangers', 'Luckiest Guy', 'Arial Black', sans-serif;
  background: linear-gradient(180deg, var(--lime) 0%, #d9ff5e 55%, var(--lime) 100%);
  background-size: 200% 200%;
  animation: bgShift 24s ease-in-out infinite;
  color: var(--ink); letter-spacing: 1px;
}
body > * { position: relative; z-index: 1; }
a { color: var(--purple); text-decoration: none; }
img { display:block; max-width:100%; }

/* wordmark */
.wm { font-family: 'Baloo 2', 'Fredoka', sans-serif; text-transform: uppercase; letter-spacing: 2px; transform: skewX(-6deg); display: inline-block; }
.wm3d { color:#fff; text-shadow: 3px 3px 0 #3a3a3a, 6px 6px 0 rgba(0,0,0,.35); }

/* nav */
.nav { position:sticky; top:0; z-index:50; background:var(--lime); border-bottom:4px solid var(--purple); }
.nav-inner { max-width:1100px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; }
.nav-brand { display:flex; align-items:center; gap:10px; font-size:20px; }
.nav-logo { width:42px; height:42px; }
.nav-links { margin-left:auto; display:flex; gap:16px; font-size:16px; }
.nav-links a { padding:4px 8px; } .nav-links a:hover { background:var(--purple); color:var(--lime); }
.btn { display:inline-block; padding:12px 20px; background:var(--purple); color:var(--lime); font-family:inherit; font-size:18px; text-transform:uppercase; border:3px solid var(--purple); box-shadow:5px 5px 0 rgba(0,0,0,.25); cursor:pointer; }
.btn:hover { transform:translate(2px,2px); }
.btn-outline { background:var(--white); color:var(--purple); }
.btn-small { padding:8px 12px; font-size:14px; }

/* marquee */
.marquee { background:var(--purple); color:var(--lime); border-bottom:4px solid var(--lime); overflow:hidden; }
.marquee-track { display:flex; width:max-content; animation: marquee 22s linear infinite; }
.marquee-track span { font-family:'Luckiest Guy',sans-serif; font-size:20px; padding:10px 0; white-space:nowrap; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* hero */
.hero { text-align:center; padding:26px 20px 48px; }
.hero-banner { width:100%; max-width:1100px; margin:0 auto 18px; border:4px solid var(--purple); box-shadow:var(--card-shadow); }
.hero-logo { width:110px; height:110px; margin:0 auto 12px; }
.hero-title { font-size:44px; color:var(--purple); letter-spacing:3px; margin-bottom:12px; transform:skewX(-4deg); }
.hero-sub { font-size:18px; max-width:680px; margin:0 auto 22px; line-height:1.6; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* sections */
.section { padding:56px 20px; }
.section-alt { background:var(--white); border-top:4px solid var(--purple); border-bottom:4px solid var(--purple); }
.container { max-width:1100px; margin:0 auto; }
.section-title { font-size:34px; color:var(--purple); text-align:center; margin-bottom:12px; }
.section-sub { text-align:center; font-size:16px; margin:0 auto 30px; max-width:720px; line-height:1.6; }
.card { background:var(--white); border:3px solid var(--purple); box-shadow:var(--card-shadow); padding:18px; }

/* mint stats */
.mint-options { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:0 auto 24px; }
.stat-card { text-align:center; padding:20px 10px; }
.stat-num { display:block; font-size:24px; color:var(--purple); margin:8px 0; }
.stat-label { font-size:14px; color:var(--ink); display:block; line-height:1.5; }
.countdown { font-size:16px; }

/* gallery */
.gallery { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.nft-card { padding:8px; text-align:center; }
.nft-card img { border:3px solid var(--purple); width:100%; }
.nft-card span { display:block; margin-top:6px; font-size:14px; color:var(--purple); }

/* utility/roadmap */
.roadmap { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.phase { text-align:center; }
.phase-num { display:block; font-size:18px; color:var(--lime); background:var(--purple); padding:8px 0; margin:-18px -18px 12px; }
.phase h3 { font-size:17px; color:var(--purple); margin-bottom:8px; }
.phase p { font-size:14px; line-height:1.6; }
.tokenomics { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:18px; }
.token-card { text-align:center; }
.token-pct { display:block; font-size:22px; color:var(--lime); background:var(--purple); padding:10px 0; margin:-18px -18px 10px; }
.token-card h3 { font-size:13px; color:var(--purple); }
.token-note { margin-top:20px; }

/* faq */
.faq { display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.faq-item summary { cursor:pointer; font-size:17px; color:var(--purple); }
.faq-item p { font-size:15px; line-height:1.7; margin-top:10px; }

/* footer */
.footer { background:var(--purple); color:var(--lime); text-align:center; padding:22px; font-size:14px; }
.socials { display:flex; gap:12px; justify-content:center; margin-top:12px; }
.socials .btn { font-size:14px; padding:8px 14px; }

/* back to top */
.back-top { position:fixed; bottom:20px; right:20px; z-index:60; width:46px; height:46px; display:none; background:var(--purple); color:var(--lime); border:3px solid var(--lime); font-size:14px; cursor:pointer; }
.back-top.show { display:block; }

/* animated bg */
@keyframes bgShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes pixelFloat { 0%{transform:translateY(0) rotate(0);opacity:0;} 10%{opacity:var(--po,.18);} 90%{opacity:var(--po,.18);} 100%{transform:translateY(-110vh) rotate(180deg);opacity:0;} }
.bg-pixels { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pixel { position:absolute; bottom:-40px; background:var(--pc,var(--purple)); animation:pixelFloat var(--pd,18s) linear infinite; animation-delay:var(--pdl,0s); }

/* bag page */
.hidden { display:none; }
.bag-connect { max-width:640px; margin:0 auto 40px; text-align:center; }
.bag-connect p { font-size:15px; line-height:1.7; margin-bottom:12px; }
.bag-address { color:var(--purple); word-break:break-all; }
.nft-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:40px; }
.nft-bag-card { padding:8px; text-align:center; }
.nft-bag-card img { width:100%; border:3px solid var(--purple); }
.nft-bag-card span { display:block; margin-top:6px; font-size:13px; color:var(--purple); }
.stake-panel { max-width:820px; margin:0 auto; text-align:center; }
.stake-lock { font-size:16px; color:var(--purple); margin-bottom:18px; }
.stake-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.stake-stat { background:var(--lime); border:3px solid var(--purple); padding:14px; }
.stake-value { display:block; font-size:20px; color:var(--purple); margin-top:6px; }
.stake-btn { opacity:.6; cursor:not-allowed; }
.stake-note { font-size:13px; margin-top:14px; }

@media (max-width:900px) {
  .mint-options { grid-template-columns:repeat(2,1fr); }
  .gallery { grid-template-columns:repeat(3,1fr); }
  .roadmap { grid-template-columns:repeat(2,1fr); }
  .tokenomics { grid-template-columns:repeat(2,1fr); }
  .nft-grid { grid-template-columns:repeat(2,1fr); }
  .hero-title { font-size:32px; }
}
@media (max-width:520px) {
  .nav-links { display:none; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .roadmap { grid-template-columns:1fr; }
  .tokenomics { grid-template-columns:1fr; }
  .mint-options { grid-template-columns:1fr; }
  .nft-grid { grid-template-columns:1fr; }
  .stake-grid { grid-template-columns:1fr; }
}