:root{--bk:#0F0F0F;--wh:#F2EFE9;--or:#FF5A1F;--gr:#8a8a8a;--h:'Anton','Bebas Neue',Impact,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font:400 1rem/1.6 Inter,system-ui,sans-serif;background:var(--wh);color:var(--bk);overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,.logo,.btn,.tag,.stats b{font-family:var(--h);text-transform:uppercase;font-weight:400;letter-spacing:.02em}
h2{font-size:clamp(2.6rem,8vw,5rem);line-height:1;margin-bottom:1.5rem}
.wrap{max-width:1150px;margin:auto;padding:0 20px}
section{padding:80px 0}
.dark{background:var(--bk);color:var(--wh)}.light{background:var(--wh)}
.cut{clip-path:polygon(0 0,100% 4vw,100% 100%,0 calc(100% - 4vw));margin-top:-4vw;padding:calc(4vw + 70px) 0}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
/* buttons */
.btn{display:inline-block;background:var(--or);color:var(--bk);border:3px solid var(--bk);box-shadow:5px 5px 0 var(--bk);padding:14px 26px;font-size:1.2rem;transition:.15s;text-align:center}
.dark .btn,.nav .btn{border-color:var(--or);box-shadow:5px 5px 0 var(--wh)}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--bk)}
.btn-sm{padding:8px 16px;font-size:1rem;box-shadow:3px 3px 0 var(--wh)}
.btn-lg{font-size:1.6rem;padding:18px 34px;min-height:60px}
.btn-dark{background:var(--bk);color:var(--wh);border-color:var(--bk);box-shadow:5px 5px 0 var(--wh)!important}
/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bk);color:var(--wh);border-bottom:3px solid var(--or)}
.logo{font-size:1.5rem}.logo b{color:var(--or);font-weight:400}
.nav nav{display:flex;align-items:center;gap:26px;font-weight:600}
.nav nav a:not(.btn):hover{color:var(--or)}
#burger{display:none;background:none;border:2px solid var(--or);padding:10px;width:48px;height:44px;cursor:pointer}
#burger span{display:block;height:3px;background:var(--or);margin:4px 0}
/* hero */
.hero{min-height:calc(100vh - 64px);display:flex;align-items:center;padding:40px 0 9vw;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 7vw))}
.hero .wrap{max-width:1300px}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
h1{font-size:clamp(3.5rem,min(15vw,17vh),9rem);line-height:.9}
h1 span{display:block}.o{color:var(--or)}
.lead{max-width:520px;margin:18px 0 24px;font-size:1.1rem}
.cta-row{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.tags{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tag{display:inline-block;background:var(--bk);border:3px solid var(--or);padding:6px 12px;font-size:1rem;box-shadow:4px 4px 0 var(--or)}
.t1{transform:rotate(-3deg)}.t2{transform:rotate(2deg) translateX(18px)}.t3{transform:rotate(-1.500deg)}
.t4{background:var(--or);color:var(--bk);border-color:var(--wh);transform:rotate(3deg);box-shadow:4px 4px 0 var(--wh);transition:opacity .4s,transform .4s}
.t4.out{opacity:0;transform:rotate(3deg) translateY(8px)}
.phone{height:min(560px,70vh);aspect-ratio:9/17;justify-self:center;border:5px solid var(--or);background:#1c1c1c;transform:rotate(6deg);box-shadow:10px 10px 0 var(--or);padding:10px}
.screen{height:100%;background:var(--bk);border:2px solid #333;display:flex;flex-direction:column;justify-content:space-between;padding:16px;clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
.screen{overflow:hidden;gap:10px}.screen .tags{gap:12px;align-items:flex-start}.screen .tag{font-size:1rem;box-shadow:3px 3px 0 var(--or)}.screen .t2{transform:rotate(2deg) translateX(10px)}.screen b{font:2rem/1 var(--h)}.screen i{font:1.3rem/1.1 var(--h);color:var(--or)}
/* stats */
.stats{background:var(--or);color:var(--bk);padding:34px 0;margin-top:-7vw;position:relative;clip-path:polygon(0 0,100% 4vw,100% 100%,0 100%);padding-top:calc(4vw + 30px)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stats b{display:block;font-size:clamp(2.4rem,7vw,4.5rem);line-height:1}
.stats span{font-weight:800;text-transform:uppercase;font-size:.8rem}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split p{font-size:1.2rem;margin-bottom:14px;max-width:480px}
.img{aspect-ratio:4/3;background:var(--bk);color:var(--or);border:4px solid var(--or);box-shadow:10px 10px 0 var(--bk);display:grid;place-items:center;text-align:center;font:2rem var(--h);clip-path:polygon(0 0,100% 0,100% 85%,90% 100%,0 100%)}
/* games */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.card{border:4px solid var(--or);box-shadow:8px 8px 0 var(--or);background:#1a1a1a;display:flex;flex-direction:column}
.card .art{aspect-ratio:16/10;display:grid;place-items:center;font:3.2rem/1 var(--h);background:var(--or);color:var(--bk);text-align:center;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.card .body{padding:18px}.card h3{font-size:2rem}
.badge{display:inline-block;background:var(--or);color:var(--bk);font:1rem var(--h);padding:3px 10px;margin-bottom:8px;letter-spacing:.05em}
.card.soon{border-color:#555;box-shadow:8px 8px 0 #444;filter:grayscale(1);opacity:.7}
.card.soon .art{background:#444;color:#aaa}.card.soon .badge{background:#555;color:#ddd}
/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
.steps li{border:4px solid var(--bk);background:#fff;padding:22px;box-shadow:8px 8px 0 var(--or)}
.steps b{display:block;font:4.5rem/1 var(--h);color:var(--or)}
.steps h3{font-size:1.8rem}
.steps li:not(:last-child)::after{content:"";position:absolute;top:50%;width:30px;height:4px;background:var(--bk);margin-left:0}
/* download */
.download{background:var(--or);color:var(--bk);text-align:center}
.download p{max-width:560px;margin:18px auto 0;font-weight:600}
.download .meta{font:1.4rem var(--h);letter-spacing:.05em}
/* about */
.tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.tabs button{font:1.2rem var(--h);text-transform:uppercase;padding:12px 20px;border:3px solid var(--bk);background:#fff;cursor:pointer;min-height:48px}
.tabs button.on{background:var(--or);box-shadow:4px 4px 0 var(--bk)}
.panel{display:none;border:3px solid var(--bk);background:#fff;padding:24px;max-height:60vh;overflow:auto}
.panel.on{display:block}.panel h3{font-size:2rem;margin-bottom:10px}.panel p{max-width:75ch}
/* footer */
footer{background:#000;color:#ccc;padding:50px 0 30px;font-size:.9rem}
footer .logo{color:#fff}
.frow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.flinks{display:flex;gap:20px}.flinks a:hover,footer p a:hover{color:var(--or)}
.social{display:flex;gap:12px}
.social a{width:46px;height:46px;border:2px solid var(--or);display:grid;place-items:center;color:var(--or)}
.social a:hover{background:var(--or);color:#000}
.social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.disc{margin-top:16px;font-size:.78rem;color:#888;max-width:800px}
/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:.7s}.rv.in{opacity:1;transform:none}
@media(max-width:820px){
  #burger{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bk);padding:20px;gap:18px;border-bottom:3px solid var(--or)}
  .nav nav.open{display:flex}
  .hero-grid,.split,.cards,.steps{grid-template-columns:1fr}
  .phone{height:min(560px,70vh);aspect-ratio:9/17;justify-self:center;border:5px solid var(--or);background:#1c1c1c;transform:rotate(6deg);box-shadow:10px 10px 0 var(--or);padding:10px}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .steps li::after{display:none}
  .btn-lg{width:100%}
  section{padding:60px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.t4{transition:none}}

.panel p{margin-bottom:12px}.panel a{color:var(--or);font-weight:600}
.aboutf{max-width:760px;margin-bottom:34px;padding-bottom:26px;border-bottom:2px solid #333}.aboutf p{margin-bottom:12px;color:#bbb}

.screen{padding:16px 16px 34px}
.aintro{font-size:1.2rem;max-width:560px;margin-bottom:28px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:36px}
.feats>div{border:3px solid var(--bk);background:#fff;padding:18px;box-shadow:6px 6px 0 var(--or)}
.feats h3{font-size:1.6rem}
.tbtn{font:1.2rem var(--h);text-transform:uppercase;padding:12px 22px;border:3px solid var(--bk);background:var(--or);box-shadow:4px 4px 0 var(--bk);cursor:pointer;min-height:48px}
.tbtn[aria-expanded=true]{background:var(--bk);color:var(--wh)}
.panel{margin-top:22px}
@media(max-width:820px){
  .phone{height:auto;aspect-ratio:auto;width:min(300px,82vw);transform:rotate(4deg);margin:24px auto 0}
  .screen{min-height:0;padding-bottom:40px}
  .screen .tags{margin:18px 0}
  .feats{grid-template-columns:1fr}
}

.img img{width:72%;height:auto;max-height:86%;object-fit:contain}