@font-face { font-family: "Unbounded"; font-weight: 900; src: url("assets/Unbounded-Black.ttf"); font-display: swap; }
@font-face { font-family: "Unbounded"; font-weight: 800; src: url("assets/Unbounded-ExtraBold.ttf"); font-display: swap; }
:root { --ink:#0B0B0F; --ink2:#16161D; --paper:#F4F1EA; --lime:#D6FF3A; --heat:#FF3D81; --volt:#7A5CFF; --chalk:#fff; --mute:rgba(255,255,255,.62); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--ink); color:var(--chalk); font:17px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:
  radial-gradient(60vw 60vw at 8% 0%, rgba(122,92,255,.45), transparent 60%),
  radial-gradient(50vw 50vw at 100% 40%, rgba(255,61,129,.32), transparent 60%),
  radial-gradient(40vw 40vw at 30% 100%, rgba(214,255,58,.12), transparent 60%); }
a { color:var(--lime); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
header.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo { font:900 24px "Unbounded",sans-serif; letter-spacing:.5px; color:var(--lime); text-decoration:none; text-shadow:2.5px 2.5px 0 var(--heat); }
nav a { color:var(--chalk); text-decoration:none; margin-left:20px; font-weight:600; }
h1,h2,h3 { font-family:"Unbounded",sans-serif; text-transform:uppercase; line-height:1.02; letter-spacing:-.5px; margin:0 0 16px; }
h1 { font-weight:900; font-size:clamp(36px,6.2vw,72px); }
h2 { font-weight:900; font-size:clamp(28px,5vw,48px); }
h3 { font-weight:800; font-size:20px; }
h1 em, h2 em { font-style:normal; color:var(--lime); }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; padding:36px 0 56px; }
.hero p.lead { color:var(--mute); font-size:20px; max-width:34ch; }
.stickers { position:relative; height:420px; }
.stickers img { position:absolute; filter:drop-shadow(5px 6px 0 #000); }
.stickers img:nth-child(1) { width:190px; left:4%; top:2%; transform:rotate(-8deg); animation:float 5s ease-in-out infinite; }
.stickers img:nth-child(2) { width:220px; right:0; top:14%; transform:rotate(7deg); animation:float 6s ease-in-out -1s infinite; }
.stickers img:nth-child(3) { width:170px; left:26%; bottom:4%; transform:rotate(-5deg); animation:float 4.5s ease-in-out -2s infinite; }
.stickers img:nth-child(4) { width:150px; right:6%; bottom:0; transform:rotate(10deg); animation:float 5.5s ease-in-out -3s infinite; }
@keyframes float { 0%,100% { translate:0 0 } 50% { translate:0 -12px } }
.btn { display:inline-block; background:var(--lime); color:var(--ink); font:800 16px "Unbounded",sans-serif; text-transform:uppercase; text-decoration:none; padding:18px 28px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); box-shadow:inset 0 0 0 2px var(--ink); position:relative; transition:transform .09s; }
.btn:active { transform:translate(4px,4px); }
.btn-wrap { display:inline-block; filter:drop-shadow(4px 4px 0 #fff); }
.ticker { background:var(--lime); color:var(--ink); transform:rotate(-1.5deg); margin:24px -20px; overflow:hidden; white-space:nowrap; font:800 16px "Unbounded",sans-serif; padding:9px 0; }
.ticker span { display:inline-block; animation:marquee 18s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0 64px; }
.card { background:var(--paper); color:var(--ink); padding:22px; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--volt);
  clip-path:none; }
.card:nth-child(2) { box-shadow:6px 6px 0 var(--heat); } .card:nth-child(3) { box-shadow:6px 6px 0 var(--lime); }
.card p { margin:0; font-weight:600; }
.doc { max-width:760px; padding:20px 0 80px; }
.doc h1 { font-size:clamp(34px,6vw,56px); } .doc h2 { font-size:22px; margin-top:36px; } .doc p, .doc li { color:rgba(255,255,255,.86); }
footer { border-top:1px solid rgba(255,255,255,.14); padding:28px 0 48px; color:var(--mute); font-size:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } .stickers { height:340px; } .grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .stickers img, .ticker span { animation:none; } }