/* ============================================================
   ORLENCIK — "ARCADE POP" · bold neo-brutalist system
   Cream paper, thick ink borders, hard offset shadows,
   sticker badges, bright color blocks. Archivo Black + Figtree.
   ============================================================ */
:root{
  --paper:#fbf3e2;
  --card:#fffdf6;
  --ink:#15120d;
  --ink-2:#413a2e;
  --blue:#2f4bf2;
  --coral:#ff5b39;
  --yellow:#ffcf33;
  --mint:#12b886;
  --violet:#7b5cff;
  --bd:3px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --disp:"Archivo Black",system-ui,sans-serif;
  --body:"Figtree",system-ui,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:88px 0}
.disp{font-family:var(--disp)}

/* dotted paper backdrop */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--ink) 1.1px,transparent 1.1px);background-size:26px 26px;opacity:.05}
main,.topbar,.foot{position:relative;z-index:1}

/* sticker badge */
.sticker{display:inline-block;font-family:var(--disp);font-size:.68rem;letter-spacing:.02em;text-transform:uppercase;padding:7px 13px;border:var(--bd);border-radius:100px;box-shadow:var(--sh-sm);background:var(--yellow)}
.sticker.blue{background:var(--blue);color:#fff}
.sticker.coral{background:var(--coral);color:#fff}
.sticker.mint{background:var(--mint);color:#fff}
.sticker.violet{background:var(--violet);color:#fff}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--bd)}
.bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:1.4rem}
.brand .blk{width:20px;height:20px;background:var(--coral);border:var(--bd);border-radius:6px;transform:rotate(-8deg)}
.nav{display:flex;gap:4px;align-items:center;font-weight:700;font-size:.92rem}
.nav a{padding:8px 14px;border:2px solid transparent;border-radius:100px;transition:.15s}
.nav a:hover{border-color:var(--ink);background:var(--card)}
.nav a.on{background:var(--blue);color:#fff;border-color:var(--ink);box-shadow:var(--sh-sm)}
.burger{display:none;flex-direction:column;gap:4px;background:var(--card);border:var(--bd);border-radius:10px;padding:9px;cursor:pointer;box-shadow:var(--sh-sm)}
.burger span{width:20px;height:2.5px;background:var(--ink);border-radius:2px}

.drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,330px);background:var(--card);border-left:var(--bd);transform:translateX(100%);transition:.32s cubic-bezier(.2,.8,.2,1);z-index:80;padding:24px;display:flex;flex-direction:column;gap:8px}
.drawer.open{transform:none}
.drawer a{font-weight:700;font-size:1rem;padding:13px 15px;border:var(--bd);border-radius:12px;background:var(--paper)}
.drawer a:hover{background:var(--yellow);box-shadow:var(--sh-sm)}
.drawer .x{align-self:flex-end;font-size:1.5rem;background:var(--coral);color:#fff;border:var(--bd);border-radius:10px;width:40px;height:40px;cursor:pointer}
.veil{position:fixed;inset:0;background:rgba(21,18,13,.35);opacity:0;visibility:hidden;transition:.3s;z-index:70}
.veil.on{opacity:1;visibility:visible}

/* ---------- buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:.82rem;text-transform:uppercase;letter-spacing:.01em;padding:15px 26px;border:var(--bd);border-radius:100px;background:var(--card);box-shadow:var(--sh);cursor:pointer;transition:.13s}
.pill:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.pill:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.pill.blue{background:var(--blue);color:#fff}
.pill.coral{background:var(--coral);color:#fff}
.pill.yellow{background:var(--yellow)}
.pill .arw{transition:.15s}
.pill:hover .arw{transform:translateX(3px)}

/* ---------- section head ---------- */
.shead{max-width:640px;margin-bottom:52px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{font-family:var(--disp);font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.02;margin:16px 0 12px}
.shead p{color:var(--ink-2);font-size:1.05rem}

/* ---------- hero ---------- */
.hero3{padding:70px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.hero-badges .sticker:nth-child(1){transform:rotate(-3deg)}
.hero-badges .sticker:nth-child(2){transform:rotate(2deg)}
.hero-badges .sticker:nth-child(3){transform:rotate(-1deg)}
.hero-h{font-family:var(--disp);font-size:clamp(2.7rem,7vw,5rem);line-height:.98;letter-spacing:-.01em}
.hero-h .mk{background:var(--yellow);border:var(--bd);border-radius:14px;padding:0 12px;box-shadow:var(--sh);display:inline-block;transform:rotate(-1.5deg)}
.hero-h .mk.blue{background:var(--blue);color:#fff}
.hero-sub{max-width:46ch;font-size:1.12rem;color:var(--ink-2);margin:26px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-media{position:relative}
.hero-card{border:var(--bd);border-radius:22px;overflow:hidden;box-shadow:10px 10px 0 var(--ink);background:var(--card);transform:rotate(1.5deg)}
.hero-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.hero-float{position:absolute;left:-20px;bottom:26px;background:var(--mint);color:#fff;border:var(--bd);border-radius:16px;box-shadow:var(--sh);padding:14px 18px;transform:rotate(-4deg)}
.hero-float .n{font-family:var(--disp);font-size:1.7rem}
.hero-float .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* ---------- stat bar ---------- */
.statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.statbox{border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:26px;background:var(--card)}
.statbox:nth-child(1){background:var(--coral);color:#fff}
.statbox:nth-child(2){background:var(--blue);color:#fff}
.statbox:nth-child(3){background:var(--yellow)}
.statbox .n{font-family:var(--disp);font-size:2.6rem;line-height:1}
.statbox .l{font-weight:700;margin-top:8px}

/* ---------- lineup (games) ---------- */
.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gcard{border:var(--bd);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--sh-sm);transition:.15s}
.gcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.gcard .gimg{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:var(--bd)}
.gcard .gimg img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gcard:hover .gimg img{transform:scale(1.05)}
.gcard .gsc{position:absolute;top:10px;right:10px;font-family:var(--disp);font-size:.95rem;background:var(--yellow);border:var(--bd);border-radius:100px;padding:4px 12px;box-shadow:var(--sh-sm)}
.gcard .grank{position:absolute;top:10px;left:10px;font-family:var(--disp);font-size:.8rem;background:var(--ink);color:var(--paper);border-radius:100px;padding:4px 11px}
.gcard .gbody{padding:16px}
.gcard .gg{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}
.gcard h3{font-family:var(--disp);font-size:1.02rem;line-height:1.1;margin:6px 0 6px}
.gcard .gm{font-size:.82rem;color:var(--ink-2)}

/* ---------- rigs (consoles) ---------- */
.rigs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rig{border:var(--bd);border-radius:20px;overflow:hidden;background:var(--card);box-shadow:var(--sh)}
.rig .rtop{padding:10px 16px;border-bottom:var(--bd);font-family:var(--disp);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}
.rig:nth-child(1) .rtop{background:var(--blue);color:#fff}
.rig:nth-child(2) .rtop{background:var(--violet);color:#fff}
.rig:nth-child(3) .rtop{background:var(--coral);color:#fff}
.rig:nth-child(4) .rtop{background:var(--mint);color:#fff}
.rig:nth-child(5) .rtop{background:var(--yellow)}
.rig .rimg{aspect-ratio:16/11;overflow:hidden;border-bottom:var(--bd)}
.rig .rimg img{width:100%;height:100%;object-fit:cover}
.rig .rbody{padding:20px}
.rig h3{font-family:var(--disp);font-size:1.25rem}
.rig .rt{color:var(--ink-2);font-size:.9rem;margin:6px 0 14px}
.rspec{display:flex;flex-direction:column;gap:0;margin-bottom:14px}
.rspec .r{display:flex;justify-content:space-between;padding:8px 0;border-top:2px dashed var(--ink);font-size:.85rem}
.rspec .r:first-child{border-top:0}
.rspec dt{font-weight:700;color:var(--ink-2)}
.rspec dd{font-weight:800}
.rig .price{font-family:var(--disp);font-size:1.4rem}

/* ---------- whys ---------- */
.whys{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why{border:var(--bd);border-radius:18px;padding:28px;background:var(--card);box-shadow:var(--sh-sm)}
.why .ic{width:52px;height:52px;border:var(--bd);border-radius:14px;display:grid;place-items:center;font-family:var(--disp);font-size:1.3rem;box-shadow:var(--sh-sm);margin-bottom:18px}
.why:nth-child(1) .ic{background:var(--coral);color:#fff}
.why:nth-child(2) .ic{background:var(--blue);color:#fff}
.why:nth-child(3) .ic{background:var(--mint);color:#fff}
.why h3{font-family:var(--disp);font-size:1.2rem;margin-bottom:10px}
.why p{color:var(--ink-2);font-size:.94rem}

/* ---------- shout (statement) ---------- */
.shout{border:var(--bd);border-radius:26px;box-shadow:10px 10px 0 var(--ink);background:var(--blue);color:#fff;padding:64px 48px;text-align:center}
.shout .sticker{background:var(--yellow);color:var(--ink)}
.shout h2{font-family:var(--disp);font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.1;margin:20px 0 16px;max-width:20ch;margin-left:auto;margin-right:auto}
.shout p{max-width:52ch;margin:0 auto;color:#e7ecff}
.shout-stats{display:flex;justify-content:center;gap:52px;flex-wrap:wrap;margin-top:40px}
.shout-stats .n{font-family:var(--disp);font-size:2.6rem;color:var(--yellow)}
.shout-stats .l{font-weight:700;font-size:.85rem}

/* ---------- accordion ---------- */
.qa{display:flex;flex-direction:column;gap:14px;max-width:820px}
.qi{border:var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--sh-sm);padding:2px 22px;transition:.15s}
.qi[open]{background:var(--yellow)}
.qi summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-family:var(--disp);font-size:1.05rem}
.qi summary::-webkit-details-marker{display:none}
.qi .plus{width:30px;height:30px;flex-shrink:0;border:var(--bd);border-radius:8px;display:grid;place-items:center;background:var(--paper);transition:.2s;font-size:1.1rem}
.qi[open] .plus{transform:rotate(45deg);background:var(--coral);color:#fff}
.qi .qb{padding:0 0 22px;color:var(--ink-2);max-width:72ch}

/* ---------- page header ---------- */
.phead{padding:64px 0 44px;border-bottom:var(--bd)}
.phead .crumbs{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:18px}
.phead .crumbs a:hover{color:var(--blue)}
.phead h1{font-family:var(--disp);font-size:clamp(2.4rem,6.5vw,4.4rem);line-height:.98}
.phead p{max-width:60ch;color:var(--ink-2);margin-top:20px;font-size:1.08rem}

/* ---------- compare table ---------- */
.ctable{width:100%;border-collapse:separate;border-spacing:0;border:var(--bd);border-radius:18px;overflow:hidden;box-shadow:var(--sh);font-size:.92rem;background:var(--card)}
.ctable th,.ctable td{padding:15px 14px;text-align:left;border-bottom:2px solid var(--ink)}
.ctable thead th{background:var(--ink);color:var(--paper);font-family:var(--disp);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.ctable td:first-child{font-weight:800;color:var(--ink-2)}
.ctable tbody tr:nth-child(even) td{background:rgba(47,75,242,.05)}
.ctable tbody tr:last-child td{border-bottom:0}

/* ---------- prose ---------- */
.doc{max-width:74ch}
.doc .stamp{display:inline-block;font-family:var(--disp);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;background:var(--yellow);border:var(--bd);border-radius:100px;padding:6px 14px;box-shadow:var(--sh-sm);margin-bottom:24px}
.doc h2{font-family:var(--disp);font-size:1.35rem;margin:32px 0 12px}
.doc h3{font-family:var(--disp);font-size:1rem;margin:20px 0 8px}
.doc p,.doc li{color:var(--ink-2);margin-bottom:12px}
.doc ul{padding-left:20px}
.doc a{color:var(--blue);text-decoration:underline;font-weight:700}
.doc em{color:var(--ink);font-style:italic}

/* ---------- form ---------- */
.fgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.fbox{border:var(--bd);border-radius:20px;box-shadow:var(--sh);background:var(--card);padding:32px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--disp);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:var(--bd);border-radius:12px;background:var(--paper);font-family:var(--body);font-size:.95rem;color:var(--ink)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;box-shadow:var(--sh-sm)}
.info .ir{padding:15px 0;border-bottom:2px dashed var(--ink)}
.info .ik{font-family:var(--disp);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.info .iv{font-weight:800;font-size:1.05rem;margin-top:5px}

/* ---------- footer ---------- */
.foot{border-top:var(--bd);background:var(--card);padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px;padding-bottom:44px}
.foot .brand{margin-bottom:14px}
.foot-blurb{color:var(--ink-2);font-size:.92rem;max-width:34ch}
.foot-col h4{font-family:var(--disp);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.foot-col a{display:block;color:var(--ink-2);font-weight:600;padding:6px 0}
.foot-col a:hover{color:var(--blue)}
.foot-mark{font-family:var(--disp);font-size:clamp(2.6rem,13vw,8.5rem);line-height:.85;border-top:var(--bd);padding:24px 0 8px;letter-spacing:-.02em}
.legal{border-top:var(--bd);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 0;font-weight:600;font-size:.82rem;color:var(--ink-2)}

/* ---------- back to top / cookie ---------- */
#up{position:fixed;right:22px;bottom:22px;width:50px;height:50px;border:var(--bd);border-radius:14px;background:var(--yellow);font-size:1.2rem;cursor:pointer;box-shadow:var(--sh);opacity:0;visibility:hidden;transition:.2s;z-index:50}
#up.on{opacity:1;visibility:visible}
#up:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
#ck{position:fixed;left:22px;right:22px;bottom:22px;max-width:560px;background:var(--card);border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:22px;z-index:90;display:none}
#ck.show{display:block}
#ck strong{font-family:var(--disp)}
#ck a{color:var(--blue);text-decoration:underline;font-weight:700}
#ck .row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}

/* ---------- reveal ---------- */
[data-fade]{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
[data-fade].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-media{max-width:400px}
  .lineup{grid-template-columns:repeat(2,1fr)}
  .rigs,.whys{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav{display:none}
  .burger{display:flex}
  .sec{padding:64px 0}
  .statbar,.lineup,.rigs,.whys{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .shout{padding:44px 24px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-fade]{opacity:1;transform:none}}