@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 400 900; 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("/fonts/golos-text-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; 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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Pixelify Sans"; src: url("/site/fonts/pixelify-sans-cyrillic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Pixelify Sans"; src: url("/site/fonts/pixelify-sans-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2212; }

:root {
  /* Brand book §2.1 */
  --bg: #071012;
  --bg-outer: #020911;
  --panel: #0b1718;
  --panel-2: #0f1f20;
  --wood: #5f3008;
  --frame: #895311;
  --frame-bright: #c87a08;
  --gold: #d88909;
  --gold-bright: #ffb11b;
  --cyan: #00d9f5;
  --cream: #f6dda5;
  --muted: #b8a77f;
  --success: #4bca67;
  --disabled: #575852;
  /* The monitor's screen (brand book §2.6, shop.cherdak.org) */
  --screen: #00157a;
  --screen-deep: #00041e;
  --screen-glow: #08e0ff;

  --sans: "Golos Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pixel: "Pixelify Sans", var(--mono);
  --gutter: clamp(16px, 5vw, 72px);
  --ribbon-h: 36px;
  --bar-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + var(--ribbon-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--cream); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; }
a { color: inherit; }
code { font-family: var(--mono); font-size: .92em; color: var(--cyan); }
.sprite { display: none; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; flex: none; }
.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }


/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid transparent; border-radius: 2px; font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .08s steps(2), box-shadow .08s steps(2); }
.btn-gold { background: var(--gold-bright); color: #1a0d02; border-color: #ffd27a; box-shadow: inset 0 -3px 0 var(--gold), 4px 4px 0 var(--wood); }
.btn-gold:hover { transform: translate(-2px, -2px); box-shadow: inset 0 -3px 0 var(--gold), 6px 6px 0 var(--wood); }
.btn-gold:active { transform: translate(2px, 2px); box-shadow: inset 0 -3px 0 var(--gold), 2px 2px 0 var(--wood); }
.btn-ghost { background: rgba(7, 16, 18, .6); color: var(--cream); border-color: var(--frame); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- ribbon + bar ---------- */
.bot-ribbon { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--ribbon-h); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; background: var(--wood); border-bottom: 1px solid var(--frame-bright); color: var(--cream); font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; }
.bot-ribbon b { font-weight: 600; color: var(--gold-bright); }
.bot-ribbon b code { color: var(--gold-bright); }
.bot-ribbon:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bar { position: fixed; inset: var(--ribbon-h) 0 auto; z-index: 29; height: var(--bar-h); display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter); transition: background .2s steps(3); }
.bar.is-solid { background: var(--bg); border-bottom: 1px solid #1f2b25; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 20px/1 var(--sans); letter-spacing: -.01em; }
.brand img { border: 1px solid var(--frame); image-rendering: pixelated; }
.bar-nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
.bar-nav a { text-decoration: none; color: var(--muted); }
.bar-nav a:hover { color: var(--cream); }

/* ---------- hero: the attic scene ---------- */
.hero { position: relative; height: 230svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #050a1f; }
.frame {
  --w: max(100vw, 133.334svh);
  --fy: 52svh;
  position: absolute; width: var(--w); aspect-ratio: 1448 / 1086;
  left: clamp(calc(100vw - var(--w)), calc(50vw - var(--w) * .62), 0px);
  top: clamp(calc(100svh - var(--w) * .75), calc(var(--fy) - var(--w) * .46688), 0px);
  transform-origin: 65.19% 62.25%;
  container-type: inline-size;
  will-change: transform;
}
.frame picture { display: contents; }
.scene { width: 100%; height: 100%; image-rendering: pixelated; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(5, 10, 20, .9) 0, rgba(5, 10, 20, .7) 34%, rgba(5, 10, 20, 0) 58%); opacity: var(--copy-o, 1); }

.stars span { position: absolute; width: .42cqw; height: .42cqw; background: #ffe6a0; animation: twinkle var(--d, 4s) steps(1) var(--delay, 0s) infinite; }
@keyframes twinkle { 0%, 70% { opacity: 0; } 72%, 80% { opacity: 1; } 82%, 88% { opacity: .35; } 90% { opacity: 1; } 94% { opacity: 0; } }

.lamp { position: absolute; left: 64.57%; top: 45.76%; width: 24%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 177, 27, .22), rgba(255, 177, 27, .06) 55%, transparent); mix-blend-mode: screen; animation: flicker 5s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: .75; } 43% { opacity: 1; } 67% { opacity: .85; } 69% { opacity: 1; } 88% { opacity: .7; } 89% { opacity: 1; } }

.crt { position: absolute; left: 61.33%; top: 58.38%; width: 7.735%; height: 7.735%; overflow: hidden; background: radial-gradient(ellipse 62% 60% at 50% 50%, #001a8c 0, var(--screen) 45%, #000a45 78%, var(--screen-deep) 100%); }
.face { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--screen-glow); filter: drop-shadow(0 0 .25cqw rgba(8, 224, 255, .75)); transition: opacity .12s steps(2); }
.eyes { transition: transform .18s steps(3); }
.eyes.blink { transform: translateY(16px) scaleY(.2); transform-origin: 0 32px; }
.channel { position: absolute; left: 50%; top: 50%; width: 64%; translate: -50% -50%; image-rendering: pixelated; opacity: 0; }
.crt.on-channel .face { opacity: 0; }
.crt.on-channel .channel { opacity: 1; }
.crt.switching { animation: crt-switch .28s steps(4); }
@keyframes crt-switch { 0% { filter: brightness(2.6); clip-path: inset(48% 0 48% 0); } 50% { filter: brightness(1.6); clip-path: inset(20% 0 20% 0); } 100% { filter: none; clip-path: inset(0); } }
.scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); pointer-events: none; }
.screen-text { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font: 700 clamp(44px, 9vw, 132px)/1 var(--pixel); color: var(--screen-glow); letter-spacing: .02em; opacity: 0; pointer-events: none; text-shadow: 0 0 18px rgba(8, 224, 255, .7); }


.hero-copy { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--ribbon-h) + var(--bar-h)); bottom: 0; width: min(620px, 52vw); display: flex; flex-direction: column; justify-content: center; padding-bottom: 4svh; opacity: var(--copy-o, 1); transform: translateY(var(--copy-y, 0)); }
.hero h1 { margin: 0; font: 800 clamp(40px, 5.4vw, 80px)/.98 var(--sans); letter-spacing: -.035em; color: var(--cream); text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--gold-bright); text-shadow: 3px 3px 0 var(--wood); }
.lede { margin: 22px 0 0; max-width: 34em; color: #d9c79a; font-size: clamp(16px, 1.25vw, 19px); }

.tuner { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.tune { display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 16px 10px 12px; background: rgba(7, 16, 18, .72); border: 1px solid var(--frame); border-radius: 2px; color: var(--cream); font: 600 15px/1.15 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.tune img { grid-row: span 2; image-rendering: pixelated; }
.tune small { font: 500 12px/1.2 var(--mono); color: var(--muted); }
.tune:hover, .tune:focus-visible { border-color: var(--cyan); }
.tune.is-on { border-color: var(--cyan); background: rgba(0, 217, 245, .08); }
.tune.is-on small { color: var(--cyan); }
.tune.is-soon img { filter: grayscale(1) brightness(.8); }
.tune.is-soon span { color: var(--muted); }
.hero-cta { margin-top: 26px; display: flex; align-items: center; gap: 18px; }

/* ---------- sections ---------- */
section.shelf, section.how, section.bot, section.faq { position: relative; padding: clamp(64px, 8vw, 120px) 0; }
section.shelf { padding-top: clamp(40px, 5vw, 72px); }
.shelf { background: linear-gradient(180deg, #00082c 0, var(--bg) 220px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sec-title, .bot h2 { margin: 0; font: 800 clamp(32px, 3.6vw, 52px)/1.04 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.sec-title { margin-bottom: clamp(24px, 3.5vw, 44px); }

/* panel with bronze corner notches (brand book §4) */
.panel, .config, .steps li, .faq details { position: relative; background: var(--panel); border: 1px solid var(--frame); border-radius: 2px; }
.config::before, .config::after, .steps li::before, .steps li::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--frame-bright); pointer-events: none; }
.config::before, .steps li::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.config::after, .steps li::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.channels { display: flex; gap: 10px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 4px; }
.chan { flex: none; display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 12px 16px 12px 12px; background: var(--panel); border: 1px solid #2a2a1c; border-radius: 2px; color: var(--cream); font: 600 16px/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.chan img { width: 40px; height: 40px; image-rendering: pixelated; }
.chan small { display: block; margin-top: 3px; font: 500 13px/1 var(--mono); color: var(--muted); }
.chan:hover { border-color: var(--frame-bright); }
.chan[aria-selected="true"] { border-color: var(--cyan); background: rgba(0, 217, 245, .07); box-shadow: inset 0 -3px 0 var(--cyan); }
.chan[aria-selected="true"] small { color: var(--cyan); }
.chan[data-soon] img { filter: grayscale(1) brightness(.7); }
.chan[data-soon] span { color: var(--muted); }

.config { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); }
.config-monitor { align-self: start; position: sticky; top: calc(var(--ribbon-h) + var(--bar-h) + 24px); }
.mini-crt { aspect-ratio: 4 / 3; padding: 18px; background: #c9b27c; border: 3px solid #6b5326; border-radius: 2px; box-shadow: inset -6px -6px 0 #9c8350, inset 6px 6px 0 #e5cf98, 6px 6px 0 var(--wood); }
.mini-crt img { width: 100%; height: 100%; object-fit: contain; padding: 14%; background: radial-gradient(ellipse 60% 58% at 50% 50%, #001a8c, var(--screen) 50%, var(--screen-deep)); border: 3px solid #3d2e12; image-rendering: pixelated; }
.mini-crt.switching img { animation: crt-switch .28s steps(4); }
.mini-base { width: 46%; height: 16px; margin: 0 auto; background: #9c8350; border: 3px solid #6b5326; border-top: 0; }


.plans { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.plan { display: grid; grid-template-columns: 20px 1fr auto; gap: 4px 14px; align-items: start; padding: 16px 18px; background: var(--panel-2); border: 1px solid #2a2a1c; border-radius: 2px; cursor: pointer; }
.plan input { appearance: none; width: 18px; height: 18px; margin: 3px 0 0; border: 2px solid var(--frame-bright); border-radius: 0; grid-row: span 2; }
.plan input:checked { background: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 0 0 3px var(--panel-2); }
.plan b { font: 700 18px/1.3 var(--sans); }
.plan .price { font: 700 18px/1.3 var(--mono); color: var(--cream); white-space: nowrap; }
.plan p { grid-column: 2 / 4; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; display: none; }
.plan:has(input:checked) p { display: block; }
.plan:hover { border-color: var(--frame-bright); }
.plan:has(input:checked) { border-color: var(--cyan); background: rgba(0, 217, 245, .06); }
.plan:has(input:checked) .price { color: var(--cyan); }
.plan:has(input:disabled) { cursor: not-allowed; opacity: .55; }


.pay-row { display: flex; align-items: center; gap: 12px 20px; margin-top: 28px; flex-wrap: wrap; }
.terms { color: var(--muted); font-size: 15px; }
.bot-price { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 15px; text-decoration: none; }
.bot-price b { color: var(--cyan); font-family: var(--mono); }
.bot-price:hover { color: var(--cream); }
.config.is-soon .pay-row .btn { background: var(--disabled); border-color: var(--disabled); box-shadow: none; color: #1d1d1a; cursor: not-allowed; transform: none; }

/* ---------- how ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.steps li { padding: 26px 24px 28px; counter-increment: step; }
.steps h3 { margin: 18px 0 8px; font: 700 21px/1.2 var(--sans); }
.steps h3::before { content: counter(step); margin-right: 10px; font: 700 14px/1 var(--mono); color: var(--gold-bright); }
.steps p { margin: 0; color: var(--muted); font-size: 16px; }
.step-crt { position: relative; width: 96px; aspect-ratio: 4 / 3; background: radial-gradient(ellipse 60% 58% at 50% 50%, #001a8c, var(--screen) 50%, var(--screen-deep)); border: 6px solid #c9b27c; box-shadow: inset 0 0 0 2px #3d2e12, 4px 4px 0 var(--wood); }
.step-crt i { position: absolute; top: 24%; width: 12%; height: 24%; background: var(--screen-glow); box-shadow: 0 0 6px rgba(8, 224, 255, .7); }
.step-crt i:first-child { left: 28%; }
.step-crt i:nth-child(2) { right: 28%; }
.step-crt b { position: absolute; left: 34%; right: 34%; top: 62%; height: 8%; background: var(--screen-glow); box-shadow: 0 0 6px rgba(8, 224, 255, .7); }
.face-work i { animation: look 1.6s steps(1) infinite; }
@keyframes look { 0%, 100% { translate: 0 0; } 33% { translate: -6px 0; } 66% { translate: 6px 0; } }
.face-work b { left: 42%; right: 42%; height: 12%; }
.face-done b { height: 14%; background: transparent; border: 5px solid var(--screen-glow); border-top: 0; box-shadow: none; }

/* ---------- bot ---------- */
.bot { background: #0a1411; border-block: 1px solid #1f2b25; }
.bot-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.bot p { color: var(--muted); max-width: 32em; margin: 18px 0 28px; }
.bot-art { border: 1px solid var(--frame); box-shadow: 8px 8px 0 var(--wood); image-rendering: pixelated; }

/* ---------- faq ---------- */
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq details { padding: 0 22px; }
.faq summary { padding: 20px 0; font: 600 18px/1.3 var(--sans); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 20px/1 var(--mono); color: var(--gold-bright); }
.faq details[open] summary::after { content: "−"; }
.faq details[open] { border-color: var(--frame-bright); }
.faq details p { margin: 0 0 22px; color: var(--muted); max-width: 46em; }

.foot { padding: 40px 0 56px; border-top: 1px solid #1f2b25; color: var(--muted); font-size: 14px; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.foot-inner span { color: var(--cream); font-weight: 600; margin-right: auto; }
.foot-inner p { flex-basis: 100%; margin: 8px 0 0; font-size: 13px; color: #8a7d5e; }

/* ---------- checkout sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgba(2, 9, 17, .78); }
.sheet[hidden] { display: none; }
.sheet-panel { position: relative; width: min(480px, 100%); height: 100%; overflow-y: auto; padding: 44px 32px 32px; background: var(--panel); border-left: 2px solid var(--frame); animation: sheet-in .22s steps(4); }
@keyframes sheet-in { from { translate: 40px 0; opacity: 0; } }
.sheet h2 { margin: 0 0 14px; font: 800 30px/1.1 var(--sans); letter-spacing: -.02em; }
.sheet-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--frame); border-radius: 2px; color: var(--cream); cursor: pointer; }
.co-summary { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px dashed #3a3220; color: var(--muted); }
.field { display: grid; gap: 8px; margin-bottom: 22px; }
.field span { font-weight: 600; }
.field input { min-height: 48px; padding: 0 14px; background: var(--bg); border: 1px solid var(--frame); border-radius: 2px; color: var(--cream); font: 600 16px var(--mono); }
.field input:focus { border-color: var(--cyan); outline: none; }
.field small { color: var(--muted); font-size: 14px; }
.google { display: block; width: 100%; margin-top: 14px; min-height: 44px; background: none; border: 0; color: var(--muted); font: 500 15px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.google:hover { color: var(--cream); }
.methods { margin: 0 0 16px; padding: 0; border: 0; display: grid; gap: 8px; }
.method { display: grid; grid-template-columns: 18px 28px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--panel-2); border: 1px solid #2a2a1c; border-radius: 2px; cursor: pointer; font-weight: 600; }
.method input { appearance: none; width: 18px; height: 18px; margin: 0; border: 2px solid var(--frame-bright); }
.method input:checked { background: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 0 0 3px var(--panel-2); }
.method small { font: 500 13px/1 var(--mono); color: var(--muted); }
.method:has(input:checked) { border-color: var(--cyan); }
.promo { margin-bottom: 20px; }
.promo summary { cursor: pointer; color: var(--muted); font-size: 15px; padding: 6px 0; }
.promo input { width: 100%; margin-top: 10px; min-height: 48px; padding: 0 14px; background: var(--bg); border: 1px solid var(--frame); border-radius: 2px; color: var(--cream); font: 600 16px var(--mono); text-transform: uppercase; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  :root { --bar-h: 56px; --ribbon-h: 34px; }
  .bot-ribbon { font-size: 12.5px; gap: 8px; }
  .bot-ribbon span { display: none; }
  .bot-ribbon b::before { content: "−5% в боте · "; color: var(--cream); font-weight: 400; }
  .bar-nav { display: none; }
  .hero { height: 200svh; }
  .frame { --w: 93.334svh; left: clamp(calc(100vw - var(--w)), calc(50vw - var(--w) * .652), 0px); top: calc(30svh - var(--w) * .46688); }
  .stage::before { background: linear-gradient(180deg, rgba(5, 10, 20, 0) 40%, var(--bg) 66%); }
  .hero-copy { left: 16px; right: 16px; width: auto; top: auto; bottom: 0; padding-bottom: 28px; justify-content: flex-end; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .lede { margin-top: 14px; font-size: 15.5px; }
  .tuner { margin-top: 18px; }
  .hero-cta { margin-top: 16px; }
  .hero-cta .btn { flex: 1; }
  .config { grid-template-columns: 1fr; }
  .config-monitor { display: none; }
  .pay-row .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .bot-inner { grid-template-columns: 1fr; }
  .sheet { align-items: flex-end; }
  .sheet-panel { height: auto; max-height: 92svh; border-left: 0; border-top: 2px solid var(--frame); padding: 40px 16px 24px; animation-name: sheet-up; }
  @keyframes sheet-up { from { translate: 0 40px; opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100svh; }
  .stars span, .lamp, .face-work i { animation: none; }
  .stars span { opacity: .8; }
  .crt.switching, .mini-crt.switching img, .sheet-panel { animation: none; }
}

/* ---------- product pages: the scene as a band ---------- */
.band { position: relative; padding-top: calc(var(--ribbon-h) + var(--bar-h)); min-height: 62svh; display: flex; align-items: flex-end; overflow: hidden; background: #050a1f; }
.band-scene { position: absolute; inset: 0; }
.band .frame { --w: max(100vw, 133.334svh); left: 50%; top: 50%; translate: -38% -62%; transform: none; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 20, .35) 0, rgba(5, 10, 20, .2) 40%, var(--bg) 100%); pointer-events: none; }
.band-copy { position: relative; z-index: 2; padding: 0 0 clamp(28px, 5vw, 56px); }
.band h1 { margin: 0; font: 800 clamp(38px, 5vw, 72px)/1 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.band h1 em { font-style: normal; color: var(--gold-bright); text-shadow: 3px 3px 0 var(--wood); }
.band .lede { max-width: 32em; }

/* ---------- guides ---------- */
.teaser { padding: clamp(56px, 7vw, 100px) 0; border-top: 1px solid #1f2b25; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.guide-list a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px 20px; background: var(--panel); border: 1px solid #2a2a1c; border-radius: 2px; text-decoration: none; }
.guide-list a:hover { border-color: var(--frame-bright); }
.guide-list b { font-weight: 700; line-height: 1.3; }
.guide-list span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.guide-list-wide { grid-template-columns: 1fr; max-width: 760px; }

.article-wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--ribbon-h) + var(--bar-h) + 40px) 0 80px; display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 24px 56px; align-items: start; }
.article, .article-cta { min-width: 0; }
.article h1 { overflow-wrap: break-word; }
.article h1 { margin: 6px 0 24px; font: 800 clamp(32px, 4vw, 52px)/1.05 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.toc { margin: 0 0 32px; padding: 16px 20px 16px 40px; background: var(--panel); border-left: 3px solid var(--frame-bright); color: var(--muted); }
.toc a { color: var(--cream); }
.prose { font-size: 18px; line-height: 1.65; }
.prose h2 { margin: 44px 0 14px; font: 800 28px/1.15 var(--sans); letter-spacing: -.02em; }
.prose h3 { margin: 30px 0 10px; font: 700 21px/1.25 var(--sans); }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--gold-bright); font-family: var(--mono); }
.prose a { color: var(--cyan); text-underline-offset: 3px; }
.prose strong { color: #fff3d6; }
.prose code { padding: 1px 6px; background: var(--panel); border: 1px solid #2a2a1c; }
.prose figure { margin: 24px 0; }
.prose figure img { max-width: min(100%, 420px); border: 1px solid var(--frame); }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.table-wrap { margin: 0 0 22px; overflow-x: auto; border: 1px solid var(--frame); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #2a2a1c; }
.prose th { background: var(--panel); color: var(--gold-bright); font-weight: 600; }
.article-cta { position: sticky; top: calc(var(--ribbon-h) + var(--bar-h) + 24px); display: grid; gap: 14px; padding: 22px; background: var(--panel); border: 1px solid var(--frame); }
.article-cta p { margin: 0; color: var(--muted); }
.article-cta p b { color: var(--cream); }
.article-cta .bot-price { margin-top: 0; }
.cta-crt { position: relative; width: 84px; aspect-ratio: 4 / 3; background: radial-gradient(ellipse 60% 58% at 50% 50%, #001a8c, var(--screen) 50%, var(--screen-deep)); border: 5px solid #c9b27c; box-shadow: inset 0 0 0 2px #3d2e12, 4px 4px 0 var(--wood); }
.cta-crt i { position: absolute; top: 24%; width: 12%; height: 24%; background: var(--screen-glow); }
.cta-crt i:first-child { left: 28%; }
.cta-crt i:nth-child(2) { right: 28%; }
.cta-crt b { position: absolute; left: 32%; right: 32%; top: 58%; height: 14%; border: 4px solid var(--screen-glow); border-top: 0; }
.related { grid-column: 1 / -1; margin-top: 40px; }
.related h2 { font: 800 26px/1.1 var(--sans); margin: 0 0 16px; }

/* ---------- order page ---------- */
.order-wrap { width: min(640px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--ribbon-h) + var(--bar-h) + 48px) 0 96px; }
.order-crt { position: relative; width: 168px; aspect-ratio: 4 / 3; margin-bottom: 28px; overflow: hidden; background: radial-gradient(ellipse 62% 60% at 50% 50%, #001a8c 0, var(--screen) 45%, #000a45 78%, var(--screen-deep) 100%); border: 8px solid #c9b27c; box-shadow: inset 0 0 0 3px #3d2e12, 6px 6px 0 var(--wood); }
.order-crt .face { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--screen-glow); filter: drop-shadow(0 0 3px rgba(8, 224, 255, .75)); }
.order-crt[data-face="wait"] .mouth rect:nth-child(1), .order-crt[data-face="wait"] .mouth rect:nth-child(3) { display: none; }
.order-crt[data-face="work"] .eyes { animation: look-svg 1.6s steps(1) infinite; }
.order-crt[data-face="work"] .mouth rect:nth-child(1), .order-crt[data-face="work"] .mouth rect:nth-child(3) { display: none; }
.order-crt[data-face="sad"] .mouth { transform: translateY(10px) scaleY(-1); transform-origin: 56px 66px; }
@keyframes look-svg { 0%, 100% { transform: translateX(0); } 33% { transform: translateX(-8px); } 66% { transform: translateX(8px); } }
.order-wrap h1 { margin: 0 0 8px; font: 800 clamp(30px, 4vw, 44px)/1.05 var(--sans); letter-spacing: -.03em; }
.order-status { margin: 0 0 28px; color: var(--muted); font-size: 18px; }
.order-status b { color: var(--cream); }
.order-status a { color: var(--cyan); }
.order-box { margin-bottom: 18px; padding: 22px; background: var(--panel); border: 1px solid var(--frame); }
.order-box h2 { margin: 0 0 12px; font: 700 20px/1.25 var(--sans); }
.order-box p { margin: 0 0 14px; color: var(--muted); }
.order-box ol { margin: 0 0 16px; padding-left: 22px; color: var(--muted); }
.order-box ol li { margin-bottom: 6px; }
.order-box a:not(.btn) { color: var(--cyan); }
.order-box textarea { width: 100%; min-height: 140px; margin-bottom: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--frame); border-radius: 2px; color: var(--cream); font: 500 13px/1.4 var(--mono); resize: vertical; }
.order-box textarea:focus { border-color: var(--cyan); outline: none; }
.order-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 18px; }
.order-facts dt { color: var(--muted); }
.order-facts dd { margin: 0; font-weight: 600; }
.crypto-net { display: grid; gap: 6px; margin-bottom: 14px; padding: 14px; background: var(--bg); border: 1px dashed #3a3220; }
.crypto-net code { word-break: break-all; }
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-row code { word-break: break-all; }
.order-help { color: var(--muted); font-size: 15px; }
.order-help a { color: var(--cyan); }
.link-button { padding: 0; background: none; border: 0; color: var(--cyan); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- checkout extras ---------- */
.co-error { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e15b51; color: #ffb3ad; font-size: 15px; }
.co-error[hidden] { display: none; }
.method i { width: 28px; height: 28px; background: var(--panel); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; transform: none; }

/* ---------- consent ---------- */
.consent { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; display: flex; gap: 14px 18px; align-items: center; flex-wrap: wrap; padding: 14px 16px; background: var(--panel); border: 1px solid var(--frame); box-shadow: 6px 6px 0 rgba(0, 0, 0, .5); font-size: 14px; }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 260px; margin: 0; color: var(--muted); }
.consent a { color: var(--cyan); }
.consent-actions { display: flex; gap: 8px; }

@media (max-width: 860px) {
  .band { min-height: 54svh; }
  .band .frame { --w: 120svh; translate: -57% -66%; }
  .article-wrap { grid-template-columns: 1fr; padding-top: calc(var(--ribbon-h) + var(--bar-h) + 24px); }
  .article-cta { position: static; }
  .prose { font-size: 17px; }
  .order-crt { width: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .order-crt[data-face="work"] .eyes { animation: none; }
}