
:root{--y:#ffd400;--r:#e63946;--k:#111;--c:#2ec4f1;--paper:#fffdf5}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--k);font-family:"Rethink Sans",sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:var(--k);color:#fff}
.lg{font-family:"Bangers",cursive;font-size:1.8rem;letter-spacing:.06em}.lg span{color:var(--y)}
.ph{background:var(--y);color:var(--k);padding:8px 14px;font-weight:800;text-decoration:none;border:3px solid #fff}
.hero{position:relative;display:grid;grid-template-columns:1.4fr .6fr;gap:4vw;align-items:center;padding:9vh 5vw;background:var(--y);background-image:radial-gradient(rgba(0,0,0,.18) 22%,transparent 23%);background-size:14px 14px;border-bottom:6px solid var(--k)}
.hc{background:#fff;border:5px solid var(--k);padding:34px;box-shadow:12px 12px 0 var(--k);position:relative}
.kapow{position:absolute;top:-40px;right:-20px;font-family:"Bangers";font-size:2.4rem;color:#fff;background:var(--r);padding:16px 22px;clip-path:polygon(50% 0,61% 22%,85% 8%,78% 35%,100% 45%,78% 58%,90% 85%,62% 74%,50% 100%,38% 74%,10% 85%,22% 58%,0 45%,22% 35%,15% 8%,39% 22%);transform:rotate(8deg)}
h1{font-family:"Bangers",cursive;font-weight:400;font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1;letter-spacing:.02em;margin:0 0 .3em}h1 span{color:var(--r);display:block}
.cap{font-size:1.15rem}
.row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--r);color:#fff;font-family:"Bangers";font-size:1.4rem;letter-spacing:.06em;padding:12px 22px;border:4px solid var(--k);box-shadow:6px 6px 0 var(--k);text-decoration:none}
.btn.alt{background:var(--c);color:var(--k)}
.score{background:var(--k);color:#fff;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;border:6px solid #fff;box-shadow:0 0 0 6px var(--k);transform:rotate(-8deg)}
.score b{font-family:"Bangers";font-size:4.4rem;line-height:1;color:var(--y)}.score span{color:var(--y)}.score small{font-weight:800;font-size:.7rem;letter-spacing:.1em}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:7vh 5vw}
.box{border:4px solid var(--k);padding:22px;background:#fff;box-shadow:8px 8px 0 var(--c)}.box:nth-child(2){box-shadow:8px 8px 0 var(--r)}.box:nth-child(3){box-shadow:8px 8px 0 var(--y)}
.box h3{font-family:"Bangers";font-weight:400;font-size:1.8rem;margin:0;letter-spacing:.04em}.box p{margin:.4em 0 0}
.rv{padding:4vh 5vw 8vh}.rv h2,.area h2{font-family:"Bangers";font-weight:400;font-size:2.6rem;letter-spacing:.05em;margin:0 0 20px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:5px solid var(--k)}
.panel{padding:26px 20px;border-right:5px solid var(--k);position:relative;background:#fff}.panel:last-child{border-right:0}
.p1{background:#e9f9ff}.p3{background:#fff6cc}
.burst{font-family:"Bangers";font-size:1.6rem;color:var(--r);letter-spacing:.05em}
.panel p{font-size:1.05rem;line-height:1.55}
.src{font-size:.85rem;color:#555}
.area{background:var(--k);color:#fff;text-align:center;padding:7vh 5vw}.area h2{color:var(--y)}
footer{padding:20px;text-align:center;font-size:.85rem}
@media(max-width:860px){.hero{grid-template-columns:1fr}.score{width:180px;justify-self:center}.svc{grid-template-columns:1fr}.strip{grid-template-columns:1fr}.panel{border-right:0;border-bottom:5px solid var(--k)}.panel:last-child{border-bottom:0}.kapow{right:6px}}
