:root{
  --bg:#0f0e17;
  --panel:#fff04d;
  --ink:#141414;
  --paper:#fffdf6;
  --accent:#ff2e63;
  --accent2:#00f5d4;
  --shadow: #0a0a0a;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background: radial-gradient(circle at 20% 15%, #1b1a27 0%, #0f0e17 60%) fixed;
  color:#fefefe;
  font-family: "Bangers", "Comic Sans MS", "Impact", "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@keyframes wobble{0%{transform:rotate(0)}25%{transform:rotate(-1.2deg)}50%{transform:rotate(0.8deg)}75%{transform:rotate(-0.6deg)}100%{transform:rotate(0)}}
@keyframes pop{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1);opacity:1}}
@keyframes halftone-scroll{
  from{background-position:0 0}
  to{background-position:200px 200px}
}

.halftone{
  background-image: radial-gradient(#2a2940 20%, transparent 21%);
  background-size: 12px 12px;
  animation: halftone-scroll 24s linear infinite;
}

.header{
  position:sticky;top:0;z-index:30;
  background: linear-gradient(90deg, #181726, #12111d);
  border-bottom: 6px solid #ffde59;
  box-shadow: 0 6px 0 var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
}
.brand{display:flex;gap:12px;align-items:center}
.logo-burst{
  width:36px;height:36px;border-radius:50%;
  background: conic-gradient(from 15deg, var(--accent), var(--accent2), #ffe15d, var(--accent));
  box-shadow: 0 0 0 4px #000, 0 6px 0 #0008;
}
.brand strong{
  font-size:28px;letter-spacing:1px;text-shadow: 3px 3px 0 #000;
}

.nav a{
  margin-left:16px;
  color:#fffbcc;background:#14131f;border:3px solid #000;
  padding:8px 12px;border-radius:8px;
  box-shadow: 4px 4px 0 #000;
  text-decoration:none;
}
.nav a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}

.hero{
  padding:60px 18px 34px;
  border-bottom:8px solid #000;
  background: linear-gradient(180deg, #2b2a41 0%, #1a192a 60%), radial-gradient(circle at 70% 0%, #ff2e6322 0%, transparent 60%);
  position:relative;overflow:hidden;
}
.container{max-width:1150px;margin:0 auto;padding:0 18px}
.hero .title{
  display:inline-block;
  background: var(--panel);
  color:#000;
  padding:16px 22px; border:6px solid #000; border-radius:14px;
  box-shadow: 8px 8px 0 #000;
  font-size:40px; line-height:1; transform: skew(-2deg);
}
.hero .subtitle{
  margin-top:14px;
  background:#ffffff;
  color:#000;
  display:inline-block;
  padding:10px 14px; border:5px solid #000; border-radius:12px;
  box-shadow:6px 6px 0 #000; font-size:22px;
}
.sticker{
  position:absolute; right:12%; top:10%;
  background: var(--accent); color:#000; padding:12px 16px; border:5px solid #000;
  border-radius:50% 44% 52% 40% / 55% 45% 60% 50%;
  box-shadow: 8px 8px 0 #000; transform: rotate(-8deg);
  font-size:24px;
}
.bubble{
  background: var(--paper); color:#000; border:5px solid #000;
  border-radius:18px; box-shadow: 8px 8px 0 #000; padding:12px 16px;
}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:28px 0}

.panel{
  background:#fffae6; color:#000; border:6px solid #000; border-radius:16px;
  box-shadow: 10px 10px 0 #000; padding:16px; position:relative;
}
.panel .badge{position:absolute; top:-14px; left:-10px; background:var(--accent2); border:5px solid #000; padding:6px 10px; border-radius:12px; box-shadow: 6px 6px 0 #000; font-weight:700}
.card{
  background:#fff; color:#000; border:5px solid #000; border-radius:16px;
  box-shadow: 8px 8px 0 #000; padding:12px; animation: pop .24s ease-out both;
}
.card h3{margin:10px 0 8px 0; font-size:20px}
.product img{width:100%; aspect-ratio:4/3; object-fit:cover; border:5px solid #000; border-radius:12px; box-shadow: 6px 6px 0 #000}
.priceline{display:flex; align-items:center; justify-content:space-between; gap:10px}
.price-tag{background:#ffe15d; border:4px solid #000; padding:6px 8px; border-radius:8px}

.btn{
  display:inline-block; background: var(--accent2); color:#000; font-weight:900;
  padding:10px 14px; border-radius:12px; border:4px solid #000;
  box-shadow: 6px 6px 0 #000; text-decoration:none
}
.btn:hover{transform:translate(-3px,-3px); box-shadow: 9px 9px 0 #000}
.btn.secondary{background:#ff2e63}

.country-toggle{display:flex;gap:10px;margin-top:10px}
.country-toggle button{
  background:#fff04d; color:#000; border:4px solid #000; padding:8px 12px; border-radius:8px;
  box-shadow:4px 4px 0 #000; cursor:pointer; font-weight:900
}
.country-toggle button.active{background:#00f5d4}

.footer{
  background:#14131f; border-top:6px solid #000; box-shadow: 0 -6px 0 #000;
  padding:26px 18px; color:#fffbcc; text-align:center
}
.notice{font-size:12px;color:#333}
.small{font-size:13px}