:root {
  --bg: #050505;
  --bg-2: #0d0d0f;
  --panel: #141416;
  --panel-2: #1b1b1e;
  --line: #2a2a2e;
  --text: #f2f2f2;
  --muted: #9a9aa2;
  --accent: #ffffff;
  --accent-2: #d0d0d6;
  --radius: 14px;
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

.graffiti {
  font-family: "Bangers", cursive;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: 2px;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.6);
}

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .98rem;
  padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--accent); color: #0a0a0a; box-shadow: 0 8px 26px rgba(255,255,255,.18); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(255,255,255,.28); }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: transparent; transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(8,8,9,.8); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Bangers", cursive; font-size: 1.7rem; letter-spacing: 1.5px; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.nav-links { display: flex; gap: 26px; font-weight: 500; }
.nav-links a { color: #d8d8dc; position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--accent); transition: width .2s; }
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { width:100%; }
.ca-btn { padding: 9px 18px; gap: 10px; font-family: ui-monospace, monospace; position: relative; overflow: hidden; }
.ca-btn .ca-btn-label { font-family:"Bangers",cursive; letter-spacing:1px; font-size:1.05rem; }
.ca-btn .ca-btn-addr { font-size:.85rem; opacity:.85; }
.ca-btn.copied { background: #d7ffd0; }
.ca-btn::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%,60%{ left:-60%; } 100%{ left:130%; } }

/* HERO */
.hero { position: relative; height: 100svh; min-height: 560px; display: grid; place-items: center; overflow: hidden; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.55; filter: grayscale(.2) contrast(1.05); }
.hero-overlay { position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(0,0,0,.15), rgba(0,0,0,.65) 75%),
    linear-gradient(180deg, rgba(5,5,5,.55), rgba(5,5,5,.2) 40%, var(--bg) 98%);
}
.hero-inner { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.hero-peng { width: clamp(120px, 18vw, 190px); margin: 0 auto 6px; filter: drop-shadow(0 16px 30px rgba(0,0,0,.7)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
.hero-title { font-family: "Permanent Marker", cursive; font-size: clamp(4rem, 15vw, 10rem); line-height: .9; color:#fff; animation: glow 3.5s ease-in-out infinite; }
@keyframes glow { 0%,100%{ text-shadow: 0 6px 30px rgba(0,0,0,.6), 0 0 18px rgba(255,255,255,.15); } 50%{ text-shadow: 0 6px 30px rgba(0,0,0,.6), 0 0 34px rgba(255,255,255,.4); } }
.hero-sub { margin-top: 8px; letter-spacing: 6px; font-weight: 600; font-size: clamp(.8rem, 2vw, 1.1rem); color:#e7e7ea; }
.scroll-cue { display:inline-grid; place-items:center; margin-top: 34px; color:#fff; opacity:.85; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }

/* section shell */
section { padding: clamp(70px, 10vw, 130px) clamp(16px, 4vw, 48px); }

/* CULT */
.cult { text-align: center; background: linear-gradient(180deg, var(--bg), #070709); }
.cult-colony { display:flex; justify-content:center; align-items:flex-end; gap: clamp(6px, 2vw, 26px); margin-bottom: 26px; flex-wrap: wrap; }
.colony-peng { width: clamp(80px, 12vw, 150px); filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)); transition: transform .25s ease; animation: bob 4s ease-in-out infinite; }
.colony-peng:nth-child(2){ animation-delay:.5s; } .colony-peng:nth-child(3){ animation-delay:1s; }
.colony-peng:nth-child(4){ animation-delay:1.5s; } .colony-peng:nth-child(5){ animation-delay:2s; }
.colony-peng:hover { transform: translateY(-14px) rotate(-4deg) scale(1.06); }
.colony-peng.big { width: clamp(110px, 16vw, 210px); }
.colony-peng.small { width: clamp(64px, 9vw, 115px); }
.colony-peng.flip { transform: scaleX(-1); }
.colony-peng.flip:hover { transform: scaleX(-1) translateY(-10px) rotate(3deg); }
.cult-sub { color: var(--muted); letter-spacing: 3px; font-weight:600; margin-top: 10px; font-size:.95rem; }
.cult-links { display:flex; justify-content:center; gap: 18px; margin-top: 40px; flex-wrap: wrap; }
.cult-box {
  width: 130px; height: 120px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:#cfcfd4; font-weight:600; transition: transform .18s ease, border-color .18s, background .18s;
}
.cult-box:hover { transform: translateY(-6px) scale(1.03); border-color: var(--accent); background: var(--panel-2); }
.cult-ico { width: 30px; height: 30px; color: #d7d7dc; transition: color .18s, transform .25s; }
.cult-box:hover .cult-ico { color:#fff; transform: scale(1.12) rotate(-4deg); }

/* HOW TO BUY */
.buy { background: var(--bg); }
.steps { max-width: var(--maxw); margin: 46px auto 0; display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.step { position:relative; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 30px 22px; transition: transform .2s ease, border-color .2s ease; }
.step:hover { transform: translateY(-6px); border-color: var(--accent); }
.step-n { font-family:"Bangers",cursive; font-size:2rem; color: var(--accent); letter-spacing:2px; }
.step h3 { margin: 6px 0 8px; font-size: 1.2rem; }
.step p { color: var(--muted); line-height:1.55; }
.step a { color: var(--accent-2); font-weight:600; }
.ca { max-width: 640px; margin: 40px auto 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: var(--panel); border:1px dashed var(--line); border-radius: 12px; padding: 12px 14px; }
.ca-label { font-family:"Bangers",cursive; letter-spacing:1px; color: var(--accent); }
.ca code { font-family: ui-monospace, monospace; color:#e6e6e6; overflow:hidden; text-overflow:ellipsis; }
.copy { margin-left:auto; background: var(--accent); color:#0a0a0a; border:none; padding:8px 16px; border-radius:8px; font-weight:700; cursor:pointer; }

/* CHART */
.chart { text-align:center; background: linear-gradient(180deg, #070709, var(--bg)); }
.chart-sub { color: var(--muted); margin-top: 8px; }
.chart-frame { max-width: 1000px; margin: 36px auto 0; aspect-ratio: 16/9; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--panel); }
.chart-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.chart-placeholder img { width:110px; animation: bob 4s ease-in-out infinite; }
.chart-placeholder p { color: var(--muted); }

/* FORGE PFP */
.pfp { background: var(--bg); }
.pfp-sub { text-align:center; color: var(--muted); margin-top: 10px; max-width: 620px; margin-inline:auto; }
.forge { max-width: var(--maxw); margin: 46px auto 0; display:grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 30px; align-items:start; }
.stage-wrap { position: sticky; top: 90px; }
.stage {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius);
  border: 2px solid var(--accent); background: #0f0f11 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%230f0f11'/%3E%3Cpath d='M0 0h10v10H0z' fill='%23151517'/%3E%3Cpath d='M10 10h10v10H10z' fill='%23151517'/%3E%3C/svg%3E");
  overflow: hidden; touch-action: none; user-select: none;
}
.stage-base { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width: 92%; max-height: 92%; pointer-events:none; }
.stage-row { display:flex; gap: 12px; margin-top: 14px; }
.stage-row .fbtn { flex:1; }

.fbtn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--panel); border:1px solid var(--line); color:#e8e8ea;
  padding: 12px 16px; border-radius: 10px; font-weight:600; cursor:pointer; font-size:.92rem;
  transition: border-color .15s, background .15s, transform .12s;
}
.fbtn:hover { border-color: var(--accent); background: var(--panel-2); }
.fbtn.deploy { background: var(--accent); color:#0a0a0a; border-color: var(--accent); }
.fbtn.deploy:hover { transform: translateY(-2px); }

.armory-title { font-family:"Bangers",cursive; letter-spacing:1px; color: var(--accent); font-size:1.4rem; margin-bottom: 14px; }
.gear-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(64px,1fr)); gap: 10px; }
.gear-btn { aspect-ratio:1; background: var(--panel); border:1px solid var(--line); border-radius: 10px; cursor:pointer; display:grid; place-items:center; padding:8px; transition: border-color .15s, transform .12s, background .15s; }
.gear-btn:hover { border-color: var(--accent); transform: translateY(-3px) scale(1.05); background: var(--panel-2); }
.gear-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events:none; }
.armory-actions { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px; }
.armory-actions .fbtn { flex:1; min-width: 120px; }
.hint { color: var(--muted); font-size:.82rem; margin-top: 14px; }

/* stickers */
.sticker { position:absolute; cursor:grab; touch-action:none; will-change: transform; }
.sticker.selected { outline: 1px dashed var(--accent); outline-offset: 2px; }
.sticker svg, .sticker img, .sticker .stxt { width:100%; height:100%; display:block; pointer-events:none; }
.sticker .stxt { display:flex; align-items:center; justify-content:center; font-family:"Bangers",cursive; color:#fff; -webkit-text-stroke: 2px #000; text-align:center; white-space:nowrap; }
.handle { position:absolute; width:22px; height:22px; border-radius:50%; background: var(--accent); border:2px solid #0a0a0a; display:none; place-items:center; cursor:pointer; z-index:5; }
.sticker.selected .handle { display:grid; }
.handle.resize { right:-11px; bottom:-11px; cursor: nwse-resize; }
.handle.rotate { left:50%; top:-34px; transform: translateX(-50%); cursor: grab; }
.handle.delete { right:-11px; top:-11px; background:#ff5470; font-weight:700; color:#fff; font-size:14px; line-height:1; }
.handle svg { width:12px; height:12px; }

/* FOOTER */
.footer { text-align:center; padding: 54px 20px 44px; border-top:1px solid var(--line); background: #070709; }
.footer img { width: 70px; margin: 0 auto; animation: bob 4s ease-in-out infinite; }
.footer-tag { font-family:"Bangers",cursive; letter-spacing:2px; font-size:1.4rem; margin:10px 0; }
.footer-fine { max-width:620px; margin: 8px auto; color: var(--muted); font-size:.82rem; line-height:1.55; }
.footer-copy { color:#6f6f77; font-size:.85rem; margin-top: 12px; }

/* reveal */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display:none; }
  .burger { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; right:16px; background:#111; border:1px solid var(--line); padding:18px 24px; border-radius:12px; gap:14px; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .forge { grid-template-columns: 1fr; }
  .stage-wrap { position: static; max-width: 460px; margin: 0 auto; width:100%; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .cult-box { width: 44%; }
}