:root{--ink:#111;--paper:#f7f1e3;--red:#d7263d;--cyan:#1b9aaa;--yellow:#ffd23f;--shadow:6px 6px 0 var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
h1,h2,.mark,.caption,.btn,.kicker{font-family:"Arial Black","Helvetica Neue",Impact,sans-serif;letter-spacing:.02em}
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-bottom:6px solid var(--ink);min-height:88vh;display:flex;flex-direction:column}
.halftone{position:absolute;inset:0;background-image:radial-gradient(var(--red) 28%,transparent 30%);background-size:18px 18px;opacity:.35;-webkit-mask-image:linear-gradient(135deg,#000 0%,transparent 70%);mask-image:linear-gradient(135deg,#000 0%,transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px);pointer-events:none}
.nav{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:18px 24px}
.mark{background:var(--yellow);color:var(--ink);padding:4px 10px;border:3px solid var(--paper);transform:rotate(-3deg)}
.links{display:flex;flex-wrap:wrap;gap:18px}.links a{text-decoration:none;font-weight:700}.links a:hover{color:var(--yellow)}
.hero-inner{position:relative;z-index:1;margin:auto;padding:40px 24px 80px;max-width:1000px;text-align:center}
.kicker{display:inline-block;background:var(--paper);color:var(--ink);padding:4px 12px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--red);transform:rotate(-2deg);margin:0 0 20px}
h1{font-size:clamp(3rem,11vw,7.5rem);line-height:.95;margin:0 0 18px;text-transform:uppercase}
.panel{display:inline-block;background:var(--paper);color:var(--ink);padding:0 .15em;border:6px solid var(--ink);box-shadow:8px 8px 0 var(--red)}
.amp{color:var(--yellow)}
.static{display:inline-block;color:var(--paper);text-shadow:3px 0 var(--red),-3px 0 var(--cyan)}
.tagline{font-size:clamp(1.1rem,2.6vw,1.5rem);margin:0 0 28px}
.btn{display:inline-block;background:var(--red);color:var(--paper);border:4px solid var(--ink);padding:12px 22px;font-size:1rem;text-decoration:none;box-shadow:var(--shadow);cursor:pointer;transition:transform .1s}
.hero .btn{border-color:var(--paper);box-shadow:6px 6px 0 var(--paper)}
.btn:hover{transform:translate(-2px,-2px)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn[disabled],.btn[aria-disabled=true]{cursor:not-allowed;opacity:.75;transform:none}
main{max-width:1100px;margin:0 auto;padding:56px 20px}
.block{margin-bottom:40px}
.grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{position:relative;background:#fff;border:5px solid var(--ink);box-shadow:var(--shadow);padding:44px 26px 28px}
.card::before{content:"";position:absolute;right:0;bottom:0;width:90px;height:90px;background-image:radial-gradient(var(--cyan) 30%,transparent 32%);background-size:12px 12px;opacity:.35;pointer-events:none}
.tilt-l{transform:rotate(-.6deg)}.tilt-r{transform:rotate(.6deg)}
.caption{position:absolute;top:-4px;left:-4px;background:var(--yellow);border:4px solid var(--ink);padding:2px 10px;font-size:.85rem;text-transform:uppercase}
.card h2{margin:0 0 10px;font-size:1.6rem;line-height:1.15}
.card p{margin:0 0 20px}
.footer{background:var(--ink);color:var(--paper);text-align:center;padding:32px 20px;border-top:6px solid var(--red)}
.footer p{margin:4px 0}.small{font-size:.85rem;opacity:.75}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.products{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.product{display:flex;flex-direction:column;background:#fff;border:4px solid var(--ink);box-shadow:var(--shadow);text-decoration:none;transition:transform .1s}
.product:hover{transform:translate(-2px,-2px)}
.product img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--paper);border-bottom:4px solid var(--ink)}
.p-title{font-family:"Arial Black",Impact,sans-serif;padding:12px 14px 2px;line-height:1.25}
.p-price{padding:0 14px 14px;color:var(--red);font-weight:800}