@font-face{font-family:'Unbounded';src:url('/assets/fonts/unbounded-700-cyrillic.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Unbounded';src:url('/assets/fonts/unbounded-700-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Golos Text';src:url('/assets/fonts/golos-text-cyrillic.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos Text';src:url('/assets/fonts/golos-text-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

:root{
  --ink:#110E0C;--ink-2:#191411;--surface:#221A15;--surface-2:#2B211B;
  --line:#3B2E25;--cream:#F7EDE0;--muted:#B7A28C;--dim:#8C7A68;
  --glaze:#F6A32A;--glaze-deep:#C87A12;--berry:#E4486B;--mint:#5BC9A2;
  --radius:16px;--radius-sm:10px;--maxw:1160px;
  --display:'Unbounded','Trebuchet MS',system-ui,sans-serif;
  --body:'Golos Text','Segoe UI',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);
  font-size:17px;line-height:1.6;letter-spacing:.005em;position:relative;overflow-x:hidden;
}
/* Atmosphere: a warm glow behind the top of the page and a grain tile over it. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 80% -10%,rgba(246,163,42,.20),transparent 60%),
             radial-gradient(90% 60% at 0% 0%,rgba(228,72,107,.14),transparent 55%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");mix-blend-mode:overlay;
}
main,header,footer{position:relative;z-index:1}
a{color:var(--glaze);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--cream)}
/* Keyboard focus only, and quiet about it. A dashed cream box read as a broken
   element when a browser kept it after a mouse click (owner, 2026-08-04); the
   logo carries no ring at all, since it is the first thing on the page and
   nobody needs a box to find it. */
:focus-visible{outline:2px solid var(--glaze);outline-offset:2px;border-radius:4px}
.brand:focus,.brand:focus-visible{outline:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ------------------------------------------------------------------ header */
.top{position:sticky;top:0;z-index:5;backdrop-filter:blur(12px);
  background:rgba(17,14,12,.82);border-bottom:1px solid var(--line)}
.top__in{display:flex;gap:18px;align-items:center;min-height:66px;flex-wrap:wrap;padding-block:10px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;
  font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  text-decoration:none;white-space:nowrap}
/* The mark takes its colour from `color`, which is why it is inlined rather
   than fetched as an image. Optical centring: the wordmark's letters sit on a
   baseline, the pretzel on its own centre, so it is nudged up a hair. */
.brand__mark{width:30px;height:30px;flex:none;color:var(--glaze);transform:translateY(-1px)}
.brand__word span{color:var(--glaze)}
.top nav{display:flex;gap:16px;flex-wrap:wrap;font-size:15px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--cream)}
.search{margin-left:auto;display:flex;gap:8px;flex:1 1 220px;max-width:340px}
.search input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);color:var(--cream);
  border-radius:999px;padding:9px 16px;font:inherit;font-size:15px}
.search input::placeholder{color:var(--dim)}

/* ------------------------------------------------------------------- hero */
.hero{padding:56px 0 28px;display:grid;grid-template-columns:1fr;gap:34px;align-items:end}
.hero h1{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(38px,7.4vw,74px);margin:0 0 18px}
.hero h1 em{font-style:normal;background:linear-gradient(180deg,transparent 62%,rgba(246,163,42,.42) 62%);
  padding:0 .06em}
.hero p{margin:0;color:var(--muted);font-size:clamp(16px,2.1vw,20px);max-width:52ch}
.hero__facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;list-style:none;padding:0}
.hero__facts li{border:1px solid var(--line);background:var(--ink-2);border-radius:999px;
  padding:7px 15px;font-size:14px;color:var(--muted)}
.hero__facts b{color:var(--cream);font-weight:600}
.stack{display:grid;gap:12px}
.stack a{display:flex;justify-content:space-between;align-items:center;gap:14px;text-decoration:none;
  color:var(--cream);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;transition:transform .18s ease,border-color .18s ease}
.stack a:nth-child(odd){transform:rotate(-.7deg)}
.stack a:nth-child(even){transform:rotate(.5deg)}
.stack a:hover{transform:rotate(0) translateX(4px);border-color:var(--glaze)}
.stack b{font-family:var(--display);font-size:16px;letter-spacing:.01em}
.stack span{color:var(--dim);font-size:14px;white-space:nowrap}
@media(min-width:900px){.hero{grid-template-columns:1.35fr .8fr;padding:78px 0 34px}}

/* ------------------------------------------------------------------ cards */
.sec{padding:34px 0}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);padding-top:18px;margin-bottom:22px;flex-wrap:wrap}
.sec__head h2{font-family:var(--display);font-weight:700;font-size:clamp(21px,3vw,30px);margin:0;
  letter-spacing:-.01em}
.sec__head a{font-size:15px;white-space:nowrap}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--cream);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);border-color:var(--glaze);
  box-shadow:0 14px 34px -20px rgba(246,163,42,.75)}
/* The denomination is the picture: no photography exists for these goods. */
.nom{position:relative;aspect-ratio:16/10;display:grid;place-items:center;padding:12px;overflow:hidden;
  background:linear-gradient(145deg,var(--tint-a),var(--tint-b))}
.nom::after{content:'';position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(115deg,#000 0 2px,transparent 2px 9px)}
.nom b{position:relative;font-family:var(--display);font-weight:700;color:#14100C;
  font-size:clamp(24px,5.2vw,38px);line-height:.98;text-align:center;letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.28);word-break:break-word;hyphens:auto}
.nom small{position:absolute;left:12px;top:11px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(20,16,12,.62)}
/* Brand marks: what is inside the card, so a customer finds Xbox by its logo
   and not by reading 66 titles. The slab is light and several official marks
   are black or white, so the mark sits on its own dark chip — that keeps the
   contrast honest without recolouring anybody's logo. */
.mark{position:absolute;right:10px;top:10px;width:30px;height:30px;padding:5px;border-radius:10px;
  background:rgba(17,14,12,.82);box-shadow:0 2px 10px rgba(0,0,0,.35);object-fit:contain;z-index:1}
.mark--letter{display:grid;place-items:center;font-family:var(--display);font-weight:700;
  color:var(--glaze);font-size:15px;line-height:1;padding:0}
.product__aside .mark{width:44px;height:44px;right:14px;top:14px;padding:8px}
.stack .mark{position:static;width:26px;height:26px;padding:4px;flex:0 0 auto;border-radius:8px}
.stack a b{flex:1}
.card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__title{font-size:15px;line-height:1.35;font-weight:500}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-family:var(--display);font-weight:700;font-size:19px;white-space:nowrap}
.price s{color:var(--dim);font-size:14px;font-weight:400;margin-right:6px}
.tag{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  white-space:nowrap}
.tag--stock{color:var(--mint);border-color:rgba(91,201,162,.4)}
.tag--thin{color:var(--berry);border-color:rgba(228,72,107,.45)}

/* ---------------------------------------------------------------- product */
.crumbs{font-size:14px;color:var(--dim);padding:22px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cream)}
.product{display:grid;gap:28px;padding:14px 0 40px;grid-template-columns:1fr}
@media(min-width:960px){.product{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:44px;align-items:start}
  .product__aside{position:sticky;top:88px}}
.product h1{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(26px,4.2vw,40px);margin:8px 0 14px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.panel+.panel{margin-top:16px}
.panel h2,.panel h3{font-family:var(--display);font-weight:700;margin:0 0 12px;
  font-size:17px;letter-spacing:0}
.bigprice{font-family:var(--display);font-weight:700;font-size:clamp(30px,5.6vw,44px);line-height:1;
  margin:0 0 6px}
.bigprice small{font-size:15px;color:var(--muted);font-weight:400;font-family:var(--body)}
.facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--muted)}
.facts b{color:var(--cream);font-weight:600}
.prose{font-size:16px;color:var(--muted)}
.prose h2{font-family:var(--display);font-weight:700;color:var(--cream);font-size:clamp(19px,2.6vw,24px);
  margin:30px 0 12px}
.prose p{margin:0 0 12px}
.prose ol,.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin:0 0 7px}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding-left:46px;color:var(--muted)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--glaze)}
.faq{margin-top:10px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--cream);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--glaze);font-family:var(--display)}
.faq details[open] summary::after{content:'–'}
.faq p{margin:10px 0 0;color:var(--muted)}

/* ------------------------------------------------------------------ forms */
.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field em{display:block;font-style:normal;font-size:13px;color:var(--dim);margin-top:5px;line-height:1.45}
.field input,.field textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);
  color:var(--cream);border-radius:var(--radius-sm);padding:12px 14px;font:inherit;font-size:16px}
.field input:focus,.field textarea:focus{border-color:var(--glaze);outline:none}
.field--bad input{border-color:var(--berry)}
.err{color:var(--berry);font-size:13px;margin-top:6px;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--glaze);color:#1B1206;border:none;border-radius:999px;padding:15px 24px;
  font-family:var(--display);font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;
  box-shadow:0 0 0 rgba(228,72,107,0);transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{color:#1B1206;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--berry)}
.btn:active{transform:translate(0,0);box-shadow:0 0 0 var(--berry)}
.btn--ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}
.btn--ghost:hover{color:var(--cream);box-shadow:4px 4px 0 var(--line)}
.note{font-size:14px;color:var(--dim);margin-top:12px;line-height:1.5}
.banner{border:1px solid var(--line);border-left:3px solid var(--glaze);background:var(--ink-2);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:15px;color:var(--muted);margin:0 0 18px}
.banner--warn{border-left-color:var(--berry)}
.banner b{color:var(--cream)}

/* ------------------------------------------------------------------ order */
.state{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
  font-size:14px;letter-spacing:.02em;border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.state::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--glaze)}
.state--paid::before{background:var(--mint)}
.state--dead::before{background:var(--berry)}
.kv{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px;font-size:15px}
.kv li{display:flex;justify-content:space-between;gap:18px;border-bottom:1px dashed var(--line);
  padding-bottom:10px;color:var(--muted)}
.kv b{color:var(--cream);font-weight:600;text-align:right;word-break:break-word}
code.copy{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--ink-2);
  border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:15px}

/* ----------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 46px;color:var(--dim);font-size:14px}
.foot__cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot h3{font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--cream)}
.foot__legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);line-height:1.6}
.empty{padding:60px 0;text-align:center;color:var(--muted)}
.pager{display:flex;gap:12px;justify-content:center;margin-top:26px}

/* -------------------------------------------------------------- animation */
@media(prefers-reduced-motion:no-preference){
  .stagger>*{animation:rise .5s cubic-bezier(.22,.7,.3,1) both}
  .stagger>*:nth-child(2){animation-delay:.05s}
  .stagger>*:nth-child(3){animation-delay:.1s}
  .stagger>*:nth-child(4){animation-delay:.15s}
  .stagger>*:nth-child(n+5){animation-delay:.2s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media print{.top,.foot,.btn{display:none}body{background:#fff;color:#000}}