/* Product pages (games.html, web-hosting.html, vps.html, ...). Uses tokens from home.css; reuses .s, .s-head, .feat, .quotes, .x-btn. */
.o-crumb{font:500 13px var(--mono);color:var(--steel);margin:0}
.o-crumb a{color:var(--steel);text-decoration:none}.o-crumb a:hover{color:var(--bone)}
.o-empty{padding:30px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--graphite);color:var(--steel)}
.pp-hero{position:relative;padding:64px 0 40px;overflow:hidden;background:
  radial-gradient(800px 380px at 85% 10%,rgba(63,208,212,.12),transparent 70%),radial-gradient(700px 300px at 10% 0,rgba(242,179,61,.07),transparent 70%)}
.pp-hero h1{font:600 clamp(38px,5.2vw,68px)/1 var(--display);margin:10px 0 16px;max-width:880px;letter-spacing:-.01em}
.pp-hero .lead{color:#b9c5ce;font-size:19px;max-width:680px;margin:0}
.pp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.pp-from{font:500 15px var(--mono);color:var(--steel)}.pp-from b{font:600 30px var(--display);color:#fff;margin:0 2px}
.pp-save{margin:12px 0 0;font:600 13px var(--mono);color:var(--up)}
.pp-trust{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.pp-trust li{background:var(--graphite)}
.pp-trust li>*,.pp-trust li{display:flex;flex-direction:column;gap:3px}
.pp-trust li{padding:16px 18px}.pp-trust a{color:inherit;text-decoration:none}
.pp-trust b{font:600 17px var(--display);color:#fff}.pp-trust span{font-size:13.5px;color:#a9b6c1}
.pp-trust a:hover b{text-decoration:underline;text-decoration-color:var(--fiber);text-underline-offset:4px}

.pp-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:st}
.pp-steps li{counter-increment:st;position:relative;padding:22px 22px 22px 74px;background:var(--graphite);border:1px solid var(--line);border-radius:var(--r-m)}
.pp-steps li::before{content:counter(st);position:absolute;left:22px;top:22px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 15px var(--mono);color:var(--fiber);border:1px solid var(--fiber)}
.pp-steps b{display:block;font:600 20px/1.2 var(--display);color:#fff;margin-bottom:6px}.pp-steps span{color:#a9b6c1;font-size:15px}

.pp-glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pp-glist a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;text-decoration:none;color:var(--bone);background:var(--graphite);border:1px solid var(--line);border-radius:var(--r-s);transition:border-color .18s,background .18s}
.pp-glist a:hover{border-color:var(--fiber);background:#101820}
.pp-glist b{font:600 18px var(--display)}.pp-glist span{font-size:13.5px;color:#a9b6c1}
.pp-glist a.all{border-style:dashed}.pp-glist a.all b{color:var(--fiber)}

.pp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.pp-plans>.o-empty,.pp-plans>.pp-table-wrap{grid-column:1/-1}
.pp-plan{position:relative;display:flex;flex-direction:column;padding:26px;background:var(--graphite);border:1px solid var(--line);border-radius:var(--r-m)}
.pp-plan.pop{border-color:var(--go);background:linear-gradient(170deg,rgba(47,143,216,.14),var(--graphite) 55%)}
.pp-flag{position:absolute;top:-11px;left:22px;padding:3px 10px;border-radius:999px;font:600 11px var(--mono);color:var(--go-ink);background:var(--fiber)}
.pp-plan h3{font:600 24px var(--display);margin:0 0 10px}
.pp-price b{font:600 40px var(--display);color:#fff}.pp-price span{color:var(--steel);font:500 15px var(--mono)}
.pp-year{font:500 13px var(--mono);color:var(--steel);margin:2px 0 14px}
.pp-plan ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;color:#c4cfd7;font-size:15px}
.pp-plan li{padding-left:20px;position:relative}.pp-plan li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px;background:var(--aqua);opacity:.85}
.pp-plan .x-btn{margin-top:auto}
.pp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.pp-table{width:100%;border-collapse:collapse;min-width:620px}
.pp-table th,.pp-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.pp-table thead th{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);background:var(--slate)}
.pp-table tbody th{font:600 20px var(--display);color:#fff;white-space:nowrap}
.pp-table td{color:#b9c5ce;font-size:15px}
.pp-table td a{font:600 20px var(--display);color:#fff;text-decoration:none}.pp-table td a small{font:500 13px var(--mono);color:var(--steel)}
.pp-table td a:hover{color:var(--go-2)}.pp-table .dim{color:#56636e}
.pp-table tr:last-child>*{border-bottom:0}.pp-table tr.classic{background:rgba(242,179,61,.05)}

.pp-feat h3{margin-top:0}
.pp-faq details{border:1px solid var(--line);border-radius:var(--r-s);background:var(--graphite);margin-bottom:10px}
.pp-faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 20px;font:600 18px var(--display);position:relative}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:500 24px var(--mono);color:var(--fiber)}
.pp-faq details[open] summary::after{content:"\2013"}
.pp-faq details p{margin:0;padding:0 20px 18px;color:#b9c5ce;max-width:820px}
.pp-faq .s-head a{color:var(--go-2)}
.pp-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:40px 44px;border:1px solid var(--line);border-radius:var(--r-m);
  background:radial-gradient(600px 240px at 90% 0,rgba(47,143,216,.18),transparent 70%),var(--graphite)}
.pp-band h2{font:600 clamp(28px,3.4vw,40px)/1.05 var(--display);margin:0 0 8px}.pp-band p{margin:0;color:#b9c5ce}
.proof .quotes{grid-template-columns:1fr 1fr}

@media (max-width:900px){.pp-trust{grid-template-columns:1fr 1fr}.pp-steps ol{grid-template-columns:1fr}}
@media (max-width:620px){.pp-hero{padding-top:40px}.pp-band{padding:28px 22px}.proof .quotes{grid-template-columns:1fr}}
@media (max-width:420px){.pp-trust{grid-template-columns:1fr}}

/* ---- game catalogue (games.html) ---- */
.gc-head h2{font:700 clamp(34px,4.4vw,54px)/1 var(--display);margin:0 0 6px}.gc-head h2 span{color:var(--fiber)}
.gc-head p{color:#a9b6c1;margin:0 0 22px}
.gc-genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:22px}
.gc-genres button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:14px;background:var(--graphite);border:1px solid var(--line);color:var(--bone);font:inherit;cursor:pointer;text-align:left;transition:border-color .2s,background .2s,transform .2s}
.gc-genres button:hover{border-color:rgba(160,190,210,.4);transform:translateY(-2px)}
.gc-genres button svg{width:22px;height:22px;fill:var(--fiber);margin-bottom:6px}
.gc-genres button b{font:600 15.5px/1.15 var(--display)}.gc-genres button span{font-size:12.5px;color:var(--steel)}
.gc-genres button[aria-selected=true]{background:linear-gradient(160deg,#f2a33d,#e2722a);border-color:transparent;color:#130a02}.gc-genres button[aria-selected=true] svg{fill:#130a02}.gc-genres button[aria-selected=true] span{color:#3a1d06}
.gc-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.gc-search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--slate);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.gc-search svg{width:18px;height:18px;fill:var(--steel)}.gc-search input{flex:1;background:none;border:0;color:var(--bone);font:500 16px var(--body);padding:13px 0;outline:none}
.gc-sort{display:flex;background:var(--slate);border:1px solid var(--line);border-radius:12px;padding:4px}
.gc-sort button{background:none;border:0;color:#a9b6c1;font:600 14px var(--body);padding:8px 14px;border-radius:8px;cursor:pointer}.gc-sort button.on{background:var(--graphite);color:#fff}
.gc-letters{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px;margin:14px 0 6px}
.gc-letters button{background:none;border:0;color:#dbe4ea;font:600 14px var(--mono);padding:6px 8px;border-radius:6px;cursor:pointer}.gc-letters button:disabled{color:#3d4852;cursor:default}.gc-letters button.on{background:var(--fiber);color:#130a02}
.gc-count{color:#a9b6c1;font-size:14.5px;margin:10px 0 14px}.gc-count b{color:#fff}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gc-card{position:relative;display:block;aspect-ratio:3/2.2;border-radius:16px;overflow:hidden;border:1px solid var(--line);text-decoration:none;color:#fff;isolation:isolate;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.gc-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -22px #000,0 0 0 1px rgba(242,179,61,.5)}
.gc-art,.gc-art svg,.gc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-2}
.gc-card:hover .gc-art svg,.gc-card:hover .gc-art img{transform:scale(1.05);transition:transform .5s}
.gc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(4,7,10,.92) 100%)}
.gc-badges{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px}
.gc-b{font:700 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;font-style:normal;padding:4px 8px;border-radius:6px;background:rgba(4,7,10,.75);border:1px solid rgba(255,255,255,.18)}.gc-b.hot{background:#e8792b;border-color:transparent;color:#120800}.gc-b.x{background:rgba(63,208,212,.2);border-color:rgba(63,208,212,.6)}
.gc-txt{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column}
.gc-txt b{font:700 19px/1.1 var(--display)}.gc-txt small{color:#c4cfd7;font-size:13px}.gc-txt em{font-style:normal;margin-top:6px;color:#c4cfd7;font-size:14px}.gc-txt strong{font:700 18px var(--display);color:#fff}
.gc-more{text-align:center;margin-top:20px}.gc-none{color:#a9b6c1}
/* moving strip */
.gm-pop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:14px;color:#a9b6c1;margin:34px 0 14px}
.gm-pop a{color:#fff;text-decoration:none;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}.gm-pop a:hover{border-color:var(--fiber)}
.gm-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);margin-bottom:12px}
.gm-track{display:flex;gap:12px;width:max-content;animation:gm 60s linear infinite}.gm-row.rev .gm-track{animation-direction:reverse;animation-duration:70s}
[data-marquee].paused .gm-track,.gm-row:hover .gm-track{animation-play-state:paused}
@keyframes gm{to{transform:translateX(-50%)}}
.gm-tile{position:relative;display:flex;align-items:center;justify-content:center;width:190px;height:88px;border-radius:14px;overflow:hidden;border:1px solid var(--line);text-decoration:none;isolation:isolate}
.gm-art,.gm-art svg,.gm-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.gm-tile::after{content:"";position:absolute;inset:0;background:rgba(4,7,10,.45);z-index:-1;transition:background .2s}.gm-tile:hover::after{background:rgba(4,7,10,.15)}
.gm-tile b{font:800 17px/1.05 var(--display);color:#fff;text-align:center;padding:0 10px;text-shadow:0 2px 12px rgba(0,0,0,.8);letter-spacing:.01em;text-transform:uppercase}
.gm-pause{display:block;margin:6px auto 0;background:rgba(255,255,255,.04);border:1px solid var(--line);color:#a9b6c1;border-radius:999px;padding:7px 14px;font:500 13px var(--body);cursor:pointer}
@media (prefers-reduced-motion:reduce){.gm-track{animation:none}}