*{box-sizing:border-box}
:root{--pink:#ff1f8e;--hot:#ff4db0;--ink:#0b0a0c;--bone:#f4eddc;--yel:#ffe600;--cyan:#27e1ff}
html{color-scheme:dark;background:#0b0a0c;color:var(--bone)}
body{margin:0;font-family:'Courier New',Courier,monospace;font-size:18px;line-height:1.55;background:#0b0a0c;position:relative;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.16;pointer-events:none;z-index:50;mix-blend-mode:screen}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 1px 1px,#ff1f8e22 1.2px,transparent 1.6px) 0 0/9px 9px;pointer-events:none;z-index:0}
main{max-width:1000px;margin:auto;padding:26px 22px 70px;position:relative;z-index:2}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:Impact,'Arial Narrow Bold',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.top span{background:var(--yel);color:#000;padding:4px 10px;transform:rotate(-2deg);display:inline-block}
.top a{color:var(--ink);background:var(--hot);padding:6px 14px;text-decoration:none;transform:rotate(2deg);display:inline-block;box-shadow:3px 3px #000,4px 4px var(--bone)}
.hero{position:relative;padding:48px 0 34px}
.logo{font-family:Impact,'Arial Black',sans-serif;line-height:1;margin:0;font-weight:400;text-transform:uppercase}
.logo .row1{display:block;font-size:clamp(70px,17vw,170px);transform:rotate(-3deg);transform-origin:left}
.logo .row2{display:block;font-size:clamp(46px,11vw,110px);transform:rotate(1.5deg);margin-top:4px}
.r{display:inline-block;padding:0 .06em;margin:0 .02em}
.r.a{background:var(--pink);color:#000;transform:rotate(-4deg)}
.r.b{background:var(--bone);color:#000;transform:rotate(3deg) translateY(.05em)}
.r.c{background:#000;color:var(--hot);transform:rotate(-2deg);outline:3px solid var(--hot);outline-offset:-3px}
.r.d{background:var(--yel);color:#000;transform:rotate(4deg) translateY(-.04em)}
.r.e{color:var(--hot);background:var(--hot);color:#000;transform:rotate(-3deg)}
.sp{display:inline-block;width:.3em}
.scrawl{position:absolute;right:-10px;top:150px;z-index:3;font-size:clamp(24px,2.6vw,32px);max-width:300px;text-align:center;line-height:1.1;font-family:'Brush Script MT','Segoe Script','Comic Sans MS',cursive;font-size:clamp(26px,5vw,48px);color:var(--cyan);transform:rotate(-9deg);text-shadow:2px 2px #000;pointer-events:none}
.tag{display:inline-block;margin:30px 0 22px;background:var(--bone);color:#000;padding:12px 18px;font-weight:700;font-size:clamp(18px,3vw,26px);transform:rotate(-1.2deg);position:relative;box-shadow:6px 6px 0 var(--pink)}
.tag:before,.card:before,form:before{content:"";position:absolute;top:-13px;left:50%;width:84px;height:26px;margin-left:-42px;background:#ffe60099;transform:rotate(-4deg);border-left:2px dashed #0003;border-right:2px dashed #0003}
.btn{display:inline-block;padding:14px 24px;background:var(--pink);color:#000;font-family:Impact,sans-serif;font-size:22px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:3px solid #000;box-shadow:5px 5px 0 var(--bone);cursor:pointer;transform:rotate(1deg)}
.btn:hover{background:var(--yel)}
h2{font-family:Impact,'Arial Black',sans-serif;font-weight:400;font-size:clamp(34px,6vw,58px);text-transform:uppercase;margin:0 0 24px;color:var(--hot);text-shadow:3px 3px #000,5px 5px var(--cyan);transform:rotate(-1.5deg);letter-spacing:.02em}
section{margin-top:72px;position:relative}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;padding:22px 20px;background:#17131a;border:3px solid var(--bone);box-shadow:7px 7px 0 var(--pink)}
.card:nth-child(1){transform:rotate(-1.5deg)}.card:nth-child(2){transform:rotate(1.2deg);background:var(--pink);color:#000;border-color:#000;box-shadow:7px 7px 0 var(--bone)}.card:nth-child(3){transform:rotate(-.8deg)}
.card h3{font-family:Impact,sans-serif;font-weight:400;font-size:28px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}
.card p{margin:0;font-size:17px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:s}
.steps li{counter-increment:s;background:var(--bone);color:#000;padding:14px 16px 14px 74px;position:relative;font-weight:700;transform:rotate(-.6deg)}
.steps li:nth-child(even){transform:rotate(.7deg);margin-left:3%}
.steps li:before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%) rotate(-6deg);font-family:Impact,sans-serif;font-size:42px;background:#000;color:var(--hot);width:48px;height:48px;line-height:48px;text-align:center}
.small{font-size:15px;color:#cfc7b5}
form{position:relative;background:#141016;border:3px solid var(--hot);padding:34px 26px 28px;box-shadow:9px 9px 0 #000,11px 11px 0 var(--pink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label.f,.q label{display:block;font-weight:700}
.hint{display:block;font-weight:400;color:#cfc7b5;font-size:15px}
input,textarea{display:block;width:100%;margin-top:8px;padding:12px;background:#0b0a0c;color:var(--bone);border:2px solid var(--bone);border-radius:0;font:inherit}
textarea{min-height:90px;resize:vertical}
input:focus-visible,textarea:focus-visible,.btn:focus-visible,a:focus-visible{outline:4px solid var(--yel);outline-offset:3px}
.q{margin:24px 0}.n{display:inline-block;background:var(--pink);color:#000;font-family:Impact,sans-serif;padding:0 8px;margin-right:8px;transform:rotate(-4deg)}
.note{padding:16px 18px;border:3px dashed var(--yel);margin:28px 0;font-size:16px;transform:rotate(.4deg)}
.note h3{margin:0 0 6px;font-family:Impact,sans-serif;font-weight:400;font-size:22px;color:var(--yel);letter-spacing:.05em;text-transform:uppercase}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
footer{margin-top:80px;padding-top:20px;border-top:4px dashed var(--pink);font-size:14px;color:#cfc7b5;text-align:center}
@media(max-width:720px){.cards,.grid{grid-template-columns:1fr}form{padding:28px 16px 22px}.scrawl{display:none}.steps li:nth-child(even){margin-left:0}body{font-size:17px}}
@media(prefers-reduced-motion:no-preference){.btn{transition:transform .1s}.btn:hover{transform:rotate(-1deg) scale(1.03)}}
.top nav.menu{display:flex;gap:22px;flex-wrap:wrap}
.top nav.menu a.m1{background:#19e3ff;color:#000;transform:rotate(-2deg)}
.top nav.menu a.m2{background:var(--hot);color:#000;transform:rotate(2deg)}
.hook{font-family:Impact,sans-serif;font-size:clamp(24px,5vw,38px);text-transform:uppercase;margin:.3em 0}
.hook{color:var(--yel);line-height:1.15}
