*{box-sizing:border-box}
:root{
  --red:#e50928; --red2:#ff3b5c; --ink:#111; --muted:#666;
  --card:#fff; --border:#eee; --bg:#fff;
}
body{margin:0;font-family:Inter, Arial, sans-serif;color:var(--ink);background:var(--bg)}
.container{width:min(1100px,92%);margin:auto}

/* Hero */
.hero{background:linear-gradient(160deg,var(--red) 0%,var(--red2) 100%);color:#fff;padding:30px 0}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;position:relative;z-index:100}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-family:Rubik}
.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 4px 10px #0003}
.brand span{letter-spacing:.6px}
.menu{display:flex;gap:18px;align-items:center}
.hamburger{display:none;background:transparent;border:none;font-size:22px;color:#fff;z-index:10001}
.topnav a{color:#fff}
.btn{padding:10px 16px;border-radius:14px;font-weight:700;cursor:pointer;transition:.2s}
.btn.primary{background:#fff;color:var(--red);box-shadow:0 8px 20px #0003}
.btn.ghost{border:2px solid #fff;color:#fff;background:transparent}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.copy h1{font-size:48px;margin:6px 0 10px}
.copy .accent{color:#fff}
.lead{font-size:18px;color:#ffeef0}
.actions{display:flex;gap:10px;margin:14px 0}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);padding:6px 10px;border-radius:10px;font-size:14px}
.copybtn{margin-left:6px;padding:3px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;cursor:pointer}
.art img{width:100%;border-radius:20px;box-shadow:0 20px 40px #0006}

/* Spotlight row */
.spotlight{background:#fff;padding:0}
.spot-head{ text-align:center; padding:18px 16px 10px; }
.spot-head h2{
  margin:0 0 6px; font-size:24px; font-weight:900;
  color:var(--red); letter-spacing:.2px;
}
.spot-head p{ margin:0; color:#444; font-size:14px; }

.spot-gifs-row{
  display:flex;
  flex-wrap:nowrap;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%); /* full-bleed */
}
.gif-half{ flex:1 1 50%; margin:0; }
.gif-half img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

/* Desktop: container with rounded edges */
@media (min-width:901px){
  .spot-gifs-row{
    width:min(1000px,92%);
    transform:none;
    margin:0 auto;
    border-radius:20px;
    overflow:hidden;
  }
  .gif-half img{ border-radius:0 }
}

/* Gallery slider */
.gallery{padding:40px 0;background:#fff;color:var(--ink);position:relative}
.gallery h2{text-align:center;font-size:32px;margin-bottom:20px}
.slider{position:relative;overflow:hidden}
.slide-track{display:flex;transition:transform .6s ease}
.slide{min-width:100%;flex:0 0 100%;display:flex;justify-content:center;align-items:center}
.slide img{max-height:420px;width:auto;border-radius:16px;box-shadow:0 10px 20px #0002;transition:transform .3s}
.slide img:hover{transform:scale(1.05)}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--red);color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;opacity:.8}
.prev{left:10px}.next{right:10px}

/* Sections */
.tokenomics{padding:40px 0}
.tokenomics h2{margin-bottom:20px}
.about-box{
  border:3px solid var(--red);
  border-radius:14px;
  padding:20px;
  font-size:18px;
  line-height:1.6;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  text-align:center;
}
.about-box strong{color:var(--red);font-size:20px}
.about-art{
  width:120px;height:auto;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.12);
  display:block;margin:0 auto 14px;
}

.how{padding:40px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.step{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;box-shadow:0 4px 14px #0001}
.step span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(130deg,var(--red),var(--red2));color:#fff;font-weight:900}

.roadmap{padding:40px 0}
.timeline{list-style:none;padding:0;margin:0;line-height:1.8}

/* Footer */
.footer{background:linear-gradient(160deg,var(--red2) 0%,var(--red) 100%);color:#fff;padding:20px 0;margin-top:20px}
.foot{display:flex;align-items:center;justify-content:space-between}
.social{display:flex;gap:16px}
.social a{color:#fff}

/* Mobile menu */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hamburger{display:block}

  .menu{
    position:fixed; inset:0; display:none;
    padding:80px 24px 24px; background:#fff; z-index:99999;
    flex-direction:column; gap:14px; align-items:flex-start; overflow:auto;
  }
  body.menu-open #menu{display:flex}
  .menu a{color:#111 !important;text-decoration:none;font-size:18px;padding:10px 14px;border-radius:12px}
  .menu .btn.primary{background:var(--red);color:#fff !important;box-shadow:none;display:inline-block;margin-top:8px}
  .hamburger{position:relative; z-index:100000}

  .foot{flex-direction:column;align-items:flex-start;gap:10px}
  .social{flex-wrap:wrap;gap:12px 16px}
}

/* iOS safe-area */
@supports (padding: max(0px)){
  .footer{padding-bottom:max(20px, env(safe-area-inset-bottom))}
}