:root{--asphalt:#16181d;--asphalt2:#1e2128;--panel:#23272f;--line:#333843;--ink:#f4f5f7;--soft:#a9afbb;--red:#ff2e2e;--red2:#c81f1f;--yellow:#ffd21f;--blue:#2aa8ff;--cut:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--asphalt);color:var(--ink);font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 2px,transparent 2px 46px),radial-gradient(circle at 90% 0%,rgba(255,46,46,.16),transparent 45%),radial-gradient(circle at 0% 60%,rgba(42,168,255,.10),transparent 40%)}
a{color:var(--blue)}
h1,h2,h3,.wordmark,.btn,.badge,.kicker,.num{font-family:"Russo One",system-ui,sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.1}
.checker{height:14px;background:repeating-conic-gradient(#f4f5f7 0 25%,#0d0e11 0 50%) 0 0/14px 14px}
.checker.thin{height:10px;background-size:10px 10px;opacity:.9}

/* nav */
.nav{max-width:1180px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand img{width:48px;height:48px}
.wordmark{font-size:1.75rem;font-style:italic;letter-spacing:1px;position:relative;padding-bottom:2px}
.wordmark::after{content:"";position:absolute;left:4px;right:-6px;bottom:-3px;height:4px;background:linear-gradient(90deg,var(--red) 60%,var(--yellow) 60% 80%,transparent 80%);transform:skewX(-30deg)}
.nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 14px;display:inline-block;transform:skewX(-14deg)}
.nav ul a span{display:inline-block;transform:skewX(14deg)}
.nav ul a:hover{background:var(--red)}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:3px solid var(--red)}
.hero-in{max-width:1180px;margin:0 auto;padding:56px 16px 64px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;position:relative;z-index:1}
.kicker{display:inline-block;background:var(--yellow);color:var(--asphalt);font-size:.85rem;padding:5px 16px;transform:skewX(-14deg);margin-bottom:18px}
.kicker span{display:inline-block;transform:skewX(14deg)}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem);margin:0 0 18px;font-style:italic;text-transform:uppercase;text-shadow:4px 4px 0 #000}
.hero h1 .hot{color:var(--red);display:block}
.hero h1 .d3{color:var(--yellow)}
.lead{color:#c9ced8;font-size:1.13rem;max-width:580px;margin:0 0 22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.tag{border:2px solid var(--line);background:var(--asphalt2);padding:3px 12px;font-weight:700;font-size:.82rem;transform:skewX(-14deg)}
.tag span{display:inline-block;transform:skewX(14deg)}
.btn{display:inline-block;font-size:1rem;color:#fff;background:var(--red);padding:14px 30px;text-decoration:none;transform:skewX(-14deg);box-shadow:6px 6px 0 #000;transition:transform .12s,box-shadow .12s;text-transform:uppercase}
.btn span{display:inline-block;transform:skewX(14deg)}
.btn:hover{transform:skewX(-14deg) translate(-2px,-2px);box-shadow:8px 8px 0 #000}
.btn.alt{background:var(--blue);color:var(--asphalt);margin-left:14px}
.btn.yel{background:var(--yellow);color:var(--asphalt)}

.speed{position:relative;justify-self:center;width:100%;max-width:420px;aspect-ratio:1;display:grid;place-items:center}
.speed::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(255,46,46,.35),transparent 65%)}
.speed img{position:relative;width:78%;filter:drop-shadow(10px 14px 0 rgba(0,0,0,.45));animation:rev 1.6s ease-in-out infinite}
.lines{position:absolute;left:-30%;top:22%;width:70%;height:56%;pointer-events:none}
.lines i{position:absolute;right:0;height:5px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--c,#fff));animation:zip 1.1s linear infinite}
.lines i:nth-child(1){top:8%;width:70%;--c:var(--yellow)}
.lines i:nth-child(2){top:30%;width:95%;--c:#fff;animation-delay:.3s}
.lines i:nth-child(3){top:52%;width:60%;--c:var(--blue);animation-delay:.6s}
.lines i:nth-child(4){top:74%;width:85%;--c:var(--red);animation-delay:.15s}
.lines i:nth-child(5){top:94%;width:50%;--c:#fff;animation-delay:.45s}
@keyframes rev{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(4px,-6px) rotate(1deg)}}
@keyframes zip{0%{transform:translateX(30px);opacity:0}30%{opacity:1}100%{transform:translateX(-60px);opacity:0}}
.hero-stripes{position:absolute;right:-120px;top:0;bottom:0;width:520px;background:repeating-linear-gradient(115deg,transparent 0 40px,rgba(255,46,46,.10) 40px 70px);pointer-events:none}

/* stats band */
.band{background:var(--yellow);color:var(--asphalt);transform:skewY(-2deg);margin:40px 0 20px}
.band-in{transform:skewY(2deg);max-width:1180px;margin:0 auto;padding:22px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.band b{display:block;font-family:"Russo One",sans-serif;font-weight:400;font-size:1.9rem;font-style:italic;line-height:1.1}
.band small{font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}

/* sections */
section{max-width:1180px;margin:0 auto;padding:48px 16px}
.section-title{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:0 0 8px;font-style:italic;text-transform:uppercase}
.section-title::before{content:"";display:inline-block;width:.7em;height:.32em;margin-right:.35em;vertical-align:.18em;background:var(--red);transform:skewX(-30deg);box-shadow:.45em 0 0 var(--yellow)}
.section-sub{color:var(--soft);margin:0 0 30px;max-width:680px}

/* what we make */
.make{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mk{background:var(--panel);padding:20px 20px 18px;position:relative;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));border-left:5px solid var(--red)}
.mk:nth-child(3n+2){border-left-color:var(--yellow)}.mk:nth-child(3n){border-left-color:var(--blue)}
.mk .num{position:absolute;right:18px;top:12px;font-size:2rem;font-style:italic;color:rgba(255,255,255,.08)}
.mk h3{margin:0 0 6px;font-size:1.15rem;font-style:italic;text-transform:uppercase}
.mk p{margin:0;color:var(--soft);font-size:.95rem}

/* games */
.badge{display:inline-block;background:var(--red);color:#fff;font-size:.85rem;padding:6px 16px;transform:skewX(-14deg);margin-bottom:16px;box-shadow:4px 4px 0 #000}
.badge span{display:inline-block;transform:skewX(14deg)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--panel);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));transition:transform .15s}
.card:hover{transform:translateY(-6px)}
.card .art{aspect-ratio:16/11;display:grid;place-items:center;position:relative;overflow:hidden}
.card .art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.10) 22px 30px)}
.card .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-conic-gradient(#f4f5f7 0 25%,#0d0e11 0 50%) 0 0/10px 10px}
.card .art svg{position:relative;width:56%;height:auto;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.35))}
.g1{background:linear-gradient(135deg,#ff2e2e,#8e1010)}.g2{background:linear-gradient(135deg,#ffd21f,#ff7a00)}
.g3{background:linear-gradient(135deg,#2aa8ff,#1446b8)}.g4{background:linear-gradient(135deg,#9a4dff,#ff2e8a)}
.card .body{padding:16px 18px 22px}
.card h3{margin:0 0 6px;font-size:1.2rem;font-style:italic;text-transform:uppercase}
.card p{margin:0 0 12px;color:var(--soft);font-size:.93rem}
.pill{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--yellow);border:2px solid var(--yellow);padding:1px 10px;transform:skewX(-14deg)}
.pill span{display:inline-block;transform:skewX(14deg)}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.about p{color:#c9ced8}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feat{background:var(--asphalt2);border:2px solid var(--line);padding:16px;transform:skewX(-6deg)}
.feat>div{transform:skewX(6deg)}
.feat b{display:block;font-family:"Russo One",sans-serif;font-weight:400;font-style:italic;color:var(--yellow);font-size:1.05rem;text-transform:uppercase}
.feat:nth-child(2) b{color:var(--red)}.feat:nth-child(3) b{color:var(--blue)}
.feat span{color:var(--soft);font-size:.92rem}

/* contact */
.contact{background:linear-gradient(115deg,var(--red) 0 62%,var(--red2) 62%);padding:40px 28px;text-align:center;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));position:relative}
.contact .section-title::before{display:none}
.contact p{margin:0 auto 24px;max-width:560px;color:#fff}
.contact .btn{box-shadow:6px 6px 0 rgba(0,0,0,.6);word-break:break-all}

footer{text-align:center;color:var(--soft);font-size:.9rem;margin-top:30px}
footer .f-in{padding:26px 16px 36px}
footer a{color:var(--soft);margin:0 8px;display:inline-block}

/* legal */
.prose{max-width:840px;margin:0 auto;padding:36px 16px 60px}
.prose h1{font-size:clamp(2rem,6vw,2.8rem);font-style:italic;text-transform:uppercase;margin:0 0 6px}
.prose h2{font-size:1.2rem;color:var(--yellow);margin-top:32px;font-style:italic;text-transform:uppercase}
.prose .meta{color:var(--soft);margin-top:0}
.prose li{margin:4px 0}
.prose .short{background:var(--panel);border-left:5px solid var(--red);padding:6px 20px 6px 0}

@media (max-width:980px){.grid{grid-template-columns:1fr 1fr}.make{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.hero-in{grid-template-columns:1fr;text-align:center;padding-top:36px}.lead{margin-left:auto;margin-right:auto}.tags{justify-content:center}
  .speed{max-width:300px;grid-row:1}.about{grid-template-columns:1fr}.band-in{grid-template-columns:1fr 1fr}.hero-stripes{display:none}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.make{grid-template-columns:1fr}.btn.alt{margin:14px 0 0 0}
  .nav{justify-content:center}.nav ul a{padding:6px 10px;font-size:.9rem}.wordmark{font-size:1.5rem}.brand img{width:42px;height:42px}
  .feats{grid-template-columns:1fr}.band b{font-size:1.5rem}.contact{padding:32px 18px}.contact .btn{padding:12px 18px;font-size:.9rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}