/* 50% black foundations, 40% blue surfaces, 10% glass accents. */
:root { --bg:#04070d; --bg-2:#08162a; --surface:#0d1d34; --blue:#439dff; --blue-soft:#83beff; --accent-rgb:67,157,255; --glass:rgba(21,43,72,.42); --muted:#a0b3cc; --line:rgba(124,176,236,.19); }
body { background:#04070d; }
html { scrollbar-gutter:stable; }
body:has(#checkout-dialog[open]) { overflow:hidden; }
body::before {
  inset:-15%; filter:blur(35px); opacity:.85;
  background:radial-gradient(ellipse 35% 30% at 85% 20%,#0d3561 0,transparent 75%),radial-gradient(ellipse 32% 30% at 15% 65%,#0b2749 0,transparent 78%),linear-gradient(135deg,#03060b 35%,#071427 70%,#03060b);
  animation:blue-atmosphere 16s ease-in-out infinite alternate;
}
body::after {
  background-image:linear-gradient(rgba(117,177,240,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(117,177,240,.055) 1px,transparent 1px);
  background-size:96px 96px; opacity:.7;
  mask-image:radial-gradient(ellipse at 50% 25%,#000 15%,transparent 75%);
}
.hero::before {
  background:radial-gradient(ellipse 40% 55% at 84% 40%,rgba(39,122,229,.35),transparent 74%),radial-gradient(ellipse 35% 42% at 15% 60%,rgba(33,112,199,.2),transparent 75%);
  filter:blur(36px); opacity:.85;
}
.hero::after { display:none; }
.hero h1 { letter-spacing:.005em; }
.hero-title-kerning { font-style:normal; margin-inline:.03em; }
.hero h1 span { text-shadow:none; }
.hero-stars { opacity:.85; }
.hero-star { width:clamp(2px,calc(var(--star-size) * .35),4px); height:clamp(2px,calc(var(--star-size) * .35),4px); animation-name:round-star-drift; animation-timing-function:linear; animation-duration:calc(var(--star-duration) * 2); }
.hero-star::before { clip-path:none; border-radius:50%; background:#d6eaff; box-shadow:0 0 6px rgba(86,167,255,.4); }
.hero-star::after { display:none; }
.scene-light { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; mask-image:linear-gradient(#000 65%,transparent); }
.scene-light span { position:absolute; width:55%; height:40%; border-radius:50%; filter:blur(65px); opacity:.5; will-change:transform; animation:light-flow 12s ease-in-out infinite alternate; }
.scene-light span:nth-child(1) { top:10%; right:-8%; background:linear-gradient(120deg,transparent,rgba(19,126,255,.62),rgba(60,166,255,.22)); }
.scene-light span:nth-child(2) { left:-20%; top:48%; background:linear-gradient(60deg,rgba(22,111,207,.32),rgba(50,156,250,.45),transparent); animation-delay:-5s; animation-duration:15s; }
.scene-light span:nth-child(3) { width:36%; height:10%; left:26%; top:65%; background:rgba(42,135,243,.2); animation-delay:-7s; }
@keyframes blue-atmosphere { from { transform:translate(-2%,0); } to { transform:translate(3%,-3%); } }
@keyframes light-flow { from { transform:translate3d(-10%,8%,0) rotate(-12deg) scale(.85); opacity:.3; } to { transform:translate3d(12%,-15%,0) rotate(12deg) scale(1.2); opacity:.7; } }
@keyframes round-star-drift { 0% { transform:translate3d(-24px,16px,0); opacity:.25; } 50% { opacity:.95; } 100% { transform:translate3d(32px,-24px,0); opacity:.35; } }
.button--primary { background:linear-gradient(180deg,#59afff,#287bdb); box-shadow:inset 0 1px 0 #a3d3ff,0 10px 30px #0966cf30; color:#061224; }
.site-header { background:rgba(5,13,25,.7); }
.category-card { background:linear-gradient(150deg,#10233f,#080f1c 85%); border-color:#254265; }
.category-card__art { background:radial-gradient(ellipse at 50% 60%,#1b3c69,transparent 80%),#081222; }
.tactile-card { position:relative; transform-style:preserve-3d; transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .24s ease,box-shadow .24s,border-color .24s; }
.tactile-card.is-tilting { transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-3px); transition:transform .08s linear,box-shadow .24s; }
.tactile-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,50%),rgba(115,188,255,.15),transparent 58%); opacity:0; pointer-events:none; transition:opacity .2s; z-index:2; }
.tactile-card.is-tilting::after { opacity:1; }
.catalog-tools { gap:10px; flex-wrap:wrap; }
.catalog-select { color:#c1d4eb; background:#0b192c; border:1px solid #29425f; border-radius:12px; min-height:42px; padding:0 32px 0 14px; font-size:12px; cursor:pointer; max-width:100%; }
.catalog-select option { background:#0b192c; }
.filter-row { display:flex; align-items:center; margin:20px 0; flex-wrap:wrap; gap:8px; }
.filter-row .catalog-select { margin-left:auto; }
.filter-chip { min-height:38px; font-size:12px; padding-inline:18px; border-radius:999px; }
.filter-chip.is-active { background:#183e6b; border-color:#3e8ce5; box-shadow:inset 0 1px 0 #7fb5ec33; }
.catalog-meta { display:flex; gap:20px; justify-content:space-between; align-items:center; margin:0 0 16px; font-size:12px; color:#9ab1cd; }
.catalog-meta b { color:#cde5ff; font-weight:600; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; background:#143258; margin-left:6px; }
.catalog-demo { color:#8298b3; font-size:11px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.product-card { display:block; overflow:hidden; border:1px solid #234060; border-radius:22px; background:linear-gradient(150deg,#0e2039,#080f1c 80%); box-shadow:0 12px 28px #0004; }
.product-card[hidden] { display:none; }
.product-card { animation:catalog-arrive .5s cubic-bezier(.2,.8,.3,1) both; }
.product-card:nth-child(3n+2) { animation-delay:.06s; }
.product-card:nth-child(3n+3) { animation-delay:.12s; }
@keyframes catalog-arrive { from { opacity:0; translate:0 14px; } to { opacity:1; translate:0 0; } }
.product-card.is-highlighted { border-color:#59acff; box-shadow:0 0 22px #268eff55,0 0 58px #126beb28,inset 0 0 22px #287ddd16,0 15px 30px #0003; }
.product-card.is-top { border-color:#e3b74e; box-shadow:0 0 20px #e6b44240,0 0 45px #b8861920,0 12px 28px #0003; }
.product-card.is-top.is-highlighted { border-color:#ffd36d; box-shadow:0 0 24px #ffc64d66,0 0 60px #dba72c30,inset 0 0 20px #ffc64d14,0 15px 30px #0003; }
.product-card:hover { border-color:#71b9ff; box-shadow:0 18px 35px #0005,0 0 30px #278aea4d; }
.product-card.is-top:hover { border-color:#ffe59d; box-shadow:0 0 30px #f5c65766,0 18px 35px #0005; }
.product-card__image { height:190px; min-height:0; position:relative; overflow:hidden; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 70%,#234779 0,transparent 70%),#0a1525; }
.product-card__image--rust { background:radial-gradient(ellipse at 50% 70%,#65382e 0,transparent 75%),linear-gradient(135deg,#162638,#101725); }
.product-card__image--fortnite { background:radial-gradient(ellipse at 50% 70%,#185780 0,transparent 75%),#0a172a; }
.product-card__image--cs2 { background:radial-gradient(ellipse at 50% 70%,#3a487b 0,transparent 75%),#0c192c; }
.product-card__image::before { content:""; position:absolute; inset:0; background-image:linear-gradient(#a3c9ff08 1px,transparent 1px),linear-gradient(90deg,#a3c9ff08 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse,#000,transparent 85%); }
.product-card__image .game-logo { position:relative; width:96px; height:96px; object-fit:contain; border-radius:21px; filter:none; opacity:1; box-shadow:0 10px 30px #0003; transition:transform .3s; }
.product-card:hover .game-logo { transform:translateY(-3px) scale(1.04); }
.product-badges { position:absolute; z-index:3; top:14px; left:14px; display:flex; flex-wrap:wrap; gap:6px; }
.product-status,.top-badge,.trust-badge { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; border-radius:999px; min-height:30px; padding:5px 11px; font-size:11px; font-weight:800; letter-spacing:.065em; line-height:1.2; border:1px solid currentColor; }
.product-status { color:#65e5aa; background:#08251ee8; border-color:#53be8f55; }
.product-status i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 7px currentColor; }
.status-on-update { color:#8cbcff; background:#122d50e8; border-color:#68a8fc55; }
.status-risk { color:#ffc86d; background:#3b2a13e8; border-color:#edb55055; }
.status-detect { color:#ff9393; background:#3d1a24e8; border-color:#ef797955; }
.top-badge { background:#ffd66b; color:#3c2b0a; border-color:#ffe59c; box-shadow:0 0 15px #fac74d35; }
.top-badge>span { font-size:14px; }
.trust-badge { color:#91c8ff; background:linear-gradient(135deg,#102f4deF,#10243beF); border-color:#65b3ff80; box-shadow:0 0 13px #3998ff24; }
.trust-badge>span { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; color:#061629; background:#8bd2ff; font-size:11px; letter-spacing:0; }
.product-card__content { padding:20px; }
.product-kicker { display:flex; justify-content:flex-end; font-size:9px; letter-spacing:.1em; color:#7894b5; }
.product-card h3 { font-size:22px; margin:6px 0 5px; letter-spacing:-.02em; text-shadow:none; }
.product-card p { font-size:12px; min-height:0; margin:0; }
.product-rating { display:flex; align-items:center; gap:8px; min-height:19px; color:#f6cb66; }
.product-rating>span { font-size:12px; line-height:1; letter-spacing:.07em; text-shadow:0 0 12px #edb84c44; }
.product-rating strong { color:#d8e5f4; font-size:12px; font-weight:700; }
.product-card__footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; padding-top:13px; margin-top:13px; border-top:1px solid #829fc41b; }
.product-price { display:grid; justify-items:start; gap:3px; line-height:1.25; }
.product-price strong { color:var(--price-color,#4ade80); font-size:24px; letter-spacing:-.035em; text-shadow:0 0 14px rgba(74,222,128,.4); }
.product-price small { color:#9fb5d0; font-size:11px; }
.product-open { display:inline-flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; min-height:46px; font-weight:700; font-size:12px; padding:12px 16px; color:#d9ecff; background:#183d64; border:1px solid #497caf; border-radius:12px; transition:background .2s; }
.product-open>span { font-size:16px; line-height:1; }
.product-open:hover { background:#215493; }
.catalog-editor { margin-top:24px; border:1px solid #29415c; border-radius:16px; background:#081222; overflow:hidden; }
.catalog-editor summary { cursor:pointer; padding:16px 20px; font-size:13px; color:#acc5e2; }
.catalog-editor summary>span:first-child { margin-right:8px; }
.editor-tag { margin-left:10px; font-size:8px; color:#7d9abc; border:1px solid #345172; border-radius:5px; padding:3px 5px; letter-spacing:.06em; }
#catalog-editor-body { padding:0 20px 20px; }
#catalog-editor-body>p { color:#8aa0bb; font-size:12px; }
.catalog-editor-row { display:grid; grid-template-columns:1fr 180px repeat(3,max-content); gap:20px; align-items:center; padding:12px 0; border-bottom:1px solid #223750; font-size:12px; }
.catalog-editor-row label { display:flex; align-items:center; gap:8px; color:#a3bbd7; }
.catalog-editor-row label>span { font-size:10px; }
.catalog-editor-row select { min-width:105px; padding:7px; border:1px solid #365378; border-radius:7px; background:#12233b; color:#d6e6f7; font-size:10px; }
.editor-check { white-space:nowrap; }
.editor-check input { accent-color:#5cabff; }
.editor-reset { margin-top:16px; padding:8px 14px; border:1px solid #345373; border-radius:8px; background:#142945; font-size:11px; }
.checkout-dialog { width:min(540px,calc(100% - 28px)); max-height:calc(100svh - 40px); padding:30px; border:1px solid #37638f; border-radius:24px; background:linear-gradient(150deg,#122e50,#0a1424 65%); color:#edf5ff; box-shadow:0 35px 100px #0009; overflow:auto; }
.checkout-dialog::backdrop { background:#020710c9; backdrop-filter:blur(9px); }
.checkout-close { position:absolute; right:16px; top:16px; width:32px; height:32px; border-radius:9px; border:1px solid #3a587b; background:#19324c; color:#adbfda; font-size:21px; }
.checkout-kicker { display:flex; align-items:center; gap:10px; color:#89bbf2; font-size:10px; letter-spacing:.12em; padding-right:30px; }
.checkout-kicker span { border:1px solid #385578; padding:3px 6px; border-radius:5px; color:#adc0d8; font-size:8px; }
.checkout-dialog h2 { margin:12px 0; font-size:28px; line-height:1.15; text-shadow:none; }
.checkout-product-status { display:flex; gap:7px; }
.checkout-dialog h3 { margin:24px 0 12px; font-size:13px; font-weight:600; color:#bed3ec; }
.plan-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.plan-options button { display:grid; gap:8px; padding:14px 8px; text-align:center; font-size:11px; color:#91a9c7; border:1px solid #2d4665; background:#0b172b; border-radius:12px; }
.plan-options strong { font-size:15px; color:#deedff; }
.plan-options .is-selected { color:#d3e8ff; border-color:#529ff3; background:#173d65; box-shadow:inset 0 0 0 1px #529ff322; }
.payment-regions { display:flex; gap:6px; padding:5px; border-radius:11px; background:#030c1c80; }
.payment-regions button { flex:1; min-height:35px; padding:7px 9px; border-radius:8px; border:1px solid transparent; color:#8eaacb; background:none; font-size:11px; }
.payment-regions .is-selected { color:#eaf3ff; background:#1a3a5f; border-color:#3d6895; }
.payment-methods { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }
.payment-methods button { display:flex; align-items:center; gap:8px; padding:12px; color:#b7d0ef; border:1px solid #2c4767; background:#0b192d; border-radius:11px; font-size:11px; }
.payment-methods .is-selected { border-color:#629de0; background:#142e4b; }
.method-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; color:#90caff; background:#28517680; font-size:18px; }
.method-check { margin-left:auto; color:#79baff; }
.checkout-summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 0; margin-top:15px; border-top:1px solid #29425e; }
.checkout-summary>span { font-size:12px; color:#a8bfdc; }
.checkout-summary small { display:block; margin-top:4px; font-size:10px; color:#7292b8; }
.checkout-summary strong { font-size:26px; letter-spacing:-.03em; }
.checkout-submit { display:flex; align-items:center; justify-content:center; gap:20px; width:100%; min-height:48px; border:1px solid #7abbff; border-radius:13px; color:#031325; background:linear-gradient(#67b4ff,#398cdf); font-size:13px; font-weight:800; }
.checkout-submit { text-decoration:none; }
.checkout-description { color:#a8bed8; font-size:13px; line-height:1.65; margin:12px 0 0; }
.checkout-submit:disabled { border-color:#3d4b5e; background:#273648; color:#8b9cad; cursor:not-allowed; }
.checkout-note { color:#7e98b7; font-size:10px; line-height:1.6; margin:13px 0 0; text-align:center; }
.checkout-warning { padding:10px 12px; border-radius:9px; font-size:11px; line-height:1.6; margin:15px 0 0; }
.checkout-success { padding:20px 0 0; text-align:center; }
.checkout-success>p:not(.checkout-note) { font-size:13px; color:#94adc9; line-height:1.7; }
.success-icon { display:grid; place-items:center; width:62px; height:62px; margin:auto auto 20px; color:#a4d3ff; background:#214e79; border:1px solid #528bc1; border-radius:50%; font-size:28px; }
.order-preview { display:grid; gap:9px; padding:20px; margin:24px 0; border:1px solid #2c4866; border-radius:12px; background:#0b1929; }
.order-preview>span { color:#95aecc; font-size:12px; }
.order-preview>b { font-size:26px; }
.plan-options strong,.checkout-summary strong,.order-preview>b { color:var(--price-color,#4ade80); }
:is(.catalog-select,.editor-reset,.product-open,.catalog-editor summary,.checkout-close,.plan-options button,.payment-regions button,.payment-methods button,.checkout-submit):focus-visible { outline:2px solid #9cccff; outline-offset:3px; }
@media(min-width:1500px) { .product-card__image { height:220px; } }
@media(max-width:1000px) { .catalog-tools .search-field { width:210px; } .catalog-demo { max-width:270px; text-align:right; } .product-open { font-size:12px; padding:11px 13px; } .product-price strong { font-size:21px; } }
@media(max-width:780px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .catalog-editor-row { grid-template-columns:1fr 1fr; gap:12px; } .catalog-tools { justify-content:flex-start; } .catalog-meta { align-items:flex-start; } }
@media(max-width:540px) { .product-grid { grid-template-columns:1fr; } .product-card__image { height:190px; } .product-card__content { padding:20px; } .catalog-tools { width:100%; } .catalog-tools .search-field { flex:1; width:auto; min-width:155px; } .catalog-select { padding-inline:10px 24px; min-height:40px; font-size:11px; } .filter-row { gap:6px; } .filter-chip { padding-inline:12px; font-size:11px; } .filter-row .catalog-select { margin-left:0; flex-basis:100%; } .catalog-meta { flex-direction:column; gap:5px; } .catalog-demo { max-width:none; text-align:left; } .checkout-dialog { padding:24px 18px; border-radius:20px; } .checkout-dialog h2 { font-size:26px; } .payment-regions button { padding:8px 4px; font-size:10px; } .catalog-editor-row>strong { font-size:11px; } .catalog-editor-row label { gap:5px; } .catalog-editor-row label>span { display:none; } .product-price strong { font-size:26px; } .product-open { font-size:12px; padding:12px 16px; } }
@media(prefers-reduced-motion:reduce) {
  .scene-light span { animation-duration:24s!important; }
  body .hero .hero-stars .hero-star { animation-duration:12s!important; }
  .tactile-card,.tactile-card.is-tilting { transform:none; }
}

/* Crisp holographic network and restrained code rain for the opening scene. */
.hero-stars { display:none; }
.site-header .brand { min-height:100%; }
@media(min-width:681px) { .site-header { padding-inline:clamp(20px,2.2vw,36px); } }
.brand__logo { display:block; width:72px; height:72px; flex:0 0 auto; object-fit:contain; object-position:center; }
.site-header .brand__logo { filter:none; }
.brand--footer .brand__logo { width:72px; height:72px; }
.site-header .brand__logo--mascot { width:60px; height:60px; }
.brand--footer .brand__logo--mascot { width:60px; height:60px; }
.site-header .brand__logo { width:68px; height:68px; }
.site-header .brand__logo--wordmark { width:238px; height:auto; }
.brand--footer .brand__logo--wordmark { width:220px; height:auto; }
.brand__logo--wordmark { transform:skewX(17deg); }
.brand__word--solid { color:#fff!important; -webkit-text-fill-color:#fff!important; -webkit-text-stroke:0!important; text-shadow:none!important; filter:none!important; font-size:27px!important; font-weight:800!important; letter-spacing:-.045em!important; }
.site-header .brand { gap:8px; }
.site-footer .brand--footer { gap:9px; }
.hero::before {
  filter:blur(34px) saturate(120%);
  opacity:.58;
}
.scene-light span { filter:blur(48px); opacity:.28; }
.hero-hologram {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.36) 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.36) 86%,transparent 100%);
  background-image:
    linear-gradient(rgba(74,160,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,160,255,.075) 1px,transparent 1px);
  background-size:72px 72px;
}
.hero-hologram canvas { display:block; width:100%; height:100%; opacity:.94; }
.hero__copy,.hero-scroll-cue { position:relative; z-index:3; }
.hero__copy { isolation:isolate; }
.hero__copy::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-24px -44px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(3,8,17,.62),rgba(3,8,17,.28) 48%,transparent 74%);
  pointer-events:none;
}
@media(max-width:680px) {
  .hero-hologram { background-size:54px 54px; }
  .hero__copy::before { inset:-20px -10px; }
  .site-header .brand__logo { width:60px; height:60px; }
  .site-header .brand__logo--mascot { width:44px; height:44px; }
  .site-header .brand__logo--wordmark { width:160px; height:auto; }
  .site-header .brand__word--solid { font-size:22px!important; }
}
@media(max-width:540px) {
  .site-header .brand__logo--mascot { width:36px; height:36px; }
  .site-header .brand__logo--wordmark { width:126px; }
}
@media(max-width:420px) {
  .site-header .brand { gap:4px; }
  .site-header .brand__logo--mascot { width:28px; height:28px; }
  .site-header .brand__logo--wordmark { width:100px; }
  .site-header .header-actions { gap:2px; }
}
@media(max-width:360px) {
  .site-header .header-support, .site-header .currency-select { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-hologram canvas { opacity:.55; }
}