:root { --out: 800ms cubic-bezier(.16, 1, .3, 1); }
html {
  color-scheme: dark;
  interpolate-size: allow-keywords;
  scrollbar-width: thin;
  scrollbar-color: #9c6cff #0b0714;
  background: #05050b;
}
html::-webkit-scrollbar { width: 11px; }
html::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #05050b, #0b0714);
  box-shadow: inset 0 0 0 1px rgba(156,108,255,.16);
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6ea3ff, #9c6cff);
  border-radius: 999px;
  border: 2px solid #05050b;
  box-shadow: 0 0 14px rgba(156,108,255,.4);
}
html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8bb6ff, #b38aff); }
html::-webkit-scrollbar-corner { background: #05050b; }

body {
  animation: none !important;
  background: #05050b !important;
  background-image: linear-gradient(180deg, #05050b 0%, #0a0618 42%, #140828 64%, #05050b 66%) !important;
}
.wrap { position: relative; z-index: 1; }
.container { width: min(1280px, calc(100% - 56px)); }

.scene {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: #05050b; --horizon: 66%;
}
.sky {
  position: absolute; left: 0; right: 0; top: 0; height: var(--horizon); overflow: visible;
  background: linear-gradient(180deg, #05050b 0%, #0a0618 55%, #140828 100%);
}
.nebula {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 42% 28% at 28% 38%, rgba(124,58,237,.28), transparent 70%),
    radial-gradient(ellipse 36% 24% at 74% 28%, rgba(59,130,246,.16), transparent 68%),
    radial-gradient(ellipse 50% 22% at 52% 62%, rgba(192,132,252,.22), transparent 72%);
  filter: blur(22px);
}
.field {
  position: absolute; left: 50%; bottom: 6%;
  width: min(720px, 80vw); height: min(280px, 32vw);
  transform: translateX(-50%); border-radius: 50%;
  border: 1px solid rgba(196,181,253,.12);
  box-shadow: 0 0 40px rgba(139,92,246,.12), inset 0 0 50px rgba(124,58,237,.08);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}
.field::before, .field::after {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  border: 1px solid rgba(167,139,250,.1);
}
.field::after { inset: 24%; border-color: rgba(196,181,253,.08); }
.ground { position: absolute; left: 0; right: 0; top: var(--horizon); bottom: 0; background: #05050b; z-index: 2; }
.saturn {
  position: absolute; left: 22%; top: 22%;
  width: min(252px, 33vw); height: min(252px, 33vw); z-index: 1;
}
.saturn-bloom {
  position: absolute; inset: -18% -88%; border-radius: 50%;
  transform: rotate(-14deg) scaleY(.34);
  background: radial-gradient(circle, rgba(196,130,255,.3) 18%, rgba(139,92,246,.12) 50%, transparent 72%);
  filter: blur(18px);
}
.ring-haze {
  position: absolute; inset: -118%; border-radius: 50%; z-index: 0;
  transform: rotate(-14deg) scaleY(.3);
  background: radial-gradient(circle, transparent 36%, rgba(196,181,253,.1) 54%, transparent 72%);
  filter: blur(6px);
}
.rings { position: absolute; inset: -96%; transform: rotate(-14deg); pointer-events: none; }
.rings.back { z-index: 1; clip-path: inset(0 0 49.2% 0); }
.rings.front { z-index: 3; clip-path: inset(50.8% 0 0 0); }
.rings-tilt { width: 100%; height: 100%; transform: scaleY(.3); }
.disk {
  width: 100%; height: 100%; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(76,29,149,0) 0deg 18deg, rgba(46,16,101,.16) 20deg 24deg, rgba(139,92,246,.07) 32deg 36deg, rgba(76,29,149,0) 40deg 58deg),
    radial-gradient(circle, transparent 0 30.8%, rgba(139,92,246,.28) 31.6%, rgba(167,139,250,.38) 34.2%, rgba(76,29,149,.2) 35.2%, rgba(196,181,253,.5) 36.4%, rgba(167,139,250,.46) 40.2%, rgba(124,58,237,.34) 44.2%, rgba(91,33,182,.22) 45.4%, transparent 46.2% 47.8%, rgba(196,181,253,.4) 48.6%, rgba(167,139,250,.3) 51.6%, rgba(109,40,217,.18) 53%, transparent 53.8% 54.4%, rgba(167,139,250,.2) 55%, rgba(124,58,237,.1) 56.6%, transparent 57.4%);
  animation: disk-spin 38s linear infinite;
}
.rings.back .disk { opacity: .58; filter: brightness(.8); }
.rings.front .disk { opacity: .78; }
.planet { position: absolute; inset: 7%; border-radius: 50%; z-index: 2; overflow: hidden; background: #5b21b6; }
.planet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.planet-shade {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(10,4,28,.5) 100%),
    radial-gradient(ellipse 70% 60% at 32% 30%, rgba(255,255,255,.12), transparent 48%);
}
.horizon {
  position: absolute; left: 0; right: 0; top: var(--horizon); height: 2px; z-index: 5;
  background: linear-gradient(90deg, transparent 8%, rgba(196,181,253,.45) 50%, transparent 92%);
  box-shadow: 0 0 14px rgba(167,139,250,.4);
}
.grid-floor {
  position: absolute; left: -25%; right: -25%; top: 0; height: 160%;
  background-image:
    linear-gradient(rgba(176,120,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,163,255,.16) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(520px) rotateX(60deg);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  animation: grid-run 7s linear infinite;
}
.scene-grain {
  position: absolute; inset: 0; opacity: .045; z-index: 6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.particles { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; }
@keyframes grid-run { from { background-position: 0 0; } to { background-position: 0 72px; } }
@keyframes disk-spin { to { transform: rotate(360deg); } }
@keyframes shine {
  from { transform: translateX(-130%) skewX(-12deg); }
  to { transform: translateX(130%) skewX(-12deg); }
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.live { position: relative; overflow: hidden; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.live::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-130%) skewX(-12deg);
}
.live:hover {
  border-color: rgba(196,181,253,.7);
  box-shadow: 0 14px 34px rgba(91,33,182,.28), 0 0 0 1px rgba(196,181,253,.28);
}
.live:hover::before { animation: shine .75s ease; }
a.wide.live:hover, a.cta.live:hover, .light-button.live:hover { transform: translateY(-4px); }
.cta.live::before, .light-button.live::before {
  background: linear-gradient(110deg, transparent 35%, rgba(110,163,255,.4) 50%, transparent 65%);
}
.quiet { transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.quiet:hover {
  border-color: rgba(167,139,250,.6);
  box-shadow: 0 0 28px rgba(139,92,246,.3), inset 0 0 18px rgba(167,139,250,.08);
}

.cta, .light-button {
  display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px 0 16px;
  border-radius: 28px; background: var(--white); color: var(--ink); font-weight: 700; font-size: 13px;
  transition: transform var(--ease), box-shadow var(--ease);
}
.cta i, .light-button span, .light-button i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); font-style: normal; font-size: 13px;
}

.site-header {
  position: sticky; top: 12px; z-index: 20;
  width: min(1280px, calc(100% - 56px));
  margin: 12px auto 0;
  border: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8,10,18,.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.header-inner {
  position: relative;
  height: 68px; display: flex; align-items: center; gap: 20px;
  padding: 0 8px; width: auto; max-width: none;
}
.brand { gap: 10px; font: 19px 'Work Sans', sans-serif; letter-spacing: .09em; transition: filter var(--ease); }
.brand:hover { filter: drop-shadow(0 0 10px rgba(110,163,255,.55)); }
.brand img { width: 40px; height: 40px; }
.main-nav { display: flex; gap: 18px; margin-left: auto; font-size: 14px; color: #e4e7f2; }
.main-nav a { position: static; }
.main-nav a::after { display: none; }
.main-nav a.active, .main-nav a:hover, .main-nav a:focus-visible {
  color: var(--accent); text-shadow: 0 0 12px rgba(167,139,250,.7);
}
.header-cta { flex: 0 0 auto; }
.menu-toggle { margin-left: 0; }

.glass, .box, .faq-glass details, .faq-panel, .product-preview, .product-purchase, .product-info-block, .loader-card {
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(8,10,18,.62); backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

.mascot {
  pointer-events: none; user-select: none; position: relative; z-index: 2;
  filter: drop-shadow(0 0 14px rgba(156,108,255,.4)) drop-shadow(0 12px 14px rgba(0,0,0,.4));
}
.mascot-greet { position: absolute; left: 4px; bottom: 10px; height: 196px; width: auto; animation: mascot-bob 4s ease-in-out infinite; }
.mascot-crate { height: 118px; width: auto; margin: 0 0 -14px; }
.mascot-phone { position: absolute; left: 8px; bottom: 0; height: 198px; width: auto; }
.mascot-chibi { display: block; height: 78px; width: auto; margin: 10px auto 6px; }
.mascot-crouch { position: absolute; right: 8px; top: 8px; height: 152px; width: auto; }
.mascot-face { width: 44px; height: 44px; object-fit: cover; object-position: center 18%; border-radius: 12px; }
.mascot-mood { height: 52px; width: 52px; object-fit: cover; object-position: center 18%; border-radius: 12px; display: none; }
.mascot-mood.on { display: block; }

.hero { min-height: calc(100vh - 268px); padding: 12px 0 20px; border: 0; overflow: visible; }
.hero-inner, .home-hero-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8px; align-items: center; }
.hero-copy { position: relative; padding-bottom: 210px; }
.hero h1, .home-hero-copy h1 { margin: 12px 0 14px; font: 700 clamp(34px, 5vw, 60px)/1.02 'Work Sans', sans-serif; }
.hero p, .home-hero-copy > p:not(.eyebrow) { max-width: 400px; color: var(--muted); }
.hero .cta { margin-top: 26px; height: auto; padding: 14px 18px; gap: 16px; font-size: 16px; }
.hero .cta i { width: 34px; height: 34px; font-size: 18px; }
.home-hero-logo, .hero-mark { display: none; }
.stage { position: relative; height: 540px; }
.stage::before {
  content: ""; position: absolute; inset: 12% 8% 10% 12%;
  background: radial-gradient(ellipse, rgba(110,163,255,.18), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.fan { position: relative; height: 100%; perspective: 1400px; }
.fan .card {
  position: absolute; width: 242px; height: 360px; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); background: #0c1018;
  box-shadow: 0 28px 50px rgba(0,0,0,.45);
  transition: transform var(--out), box-shadow var(--out), border-color var(--out);
}
.fan .card img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(var(--img-z, 1)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1));
  transform-origin: center center;
  transition: transform var(--out), filter var(--out);
}
.fan .card.live:hover img { transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(calc(var(--img-z, 1) * 1.06)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1)); filter: brightness(1.08); }
.fan .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(4,6,12,.9)); }
.fan .card .cap { position: absolute; left: 16px; bottom: 16px; z-index: 1; }
.fan .card .cap b { display: block; font: 700 15px 'Work Sans', sans-serif; }
.fan .card .cap span { color: var(--muted); font-size: 12px; }
.fan .c1 { left: 2%; top: 16%; transform: rotate(-13deg) translateY(16px); z-index: 1; }
.fan .c2 { left: 28%; top: 6%; transform: rotate(-1deg); z-index: 3; }
.fan .c3 { left: 52%; top: 20%; transform: rotate(11deg); z-index: 2; }
.fan .card:hover { z-index: 5; transform: rotate(0) translateY(-16px) scale(1.05); box-shadow: 0 18px 40px rgba(91,33,182,.35), 0 0 0 1px rgba(196,181,253,.35); }

.popular, .features, .faq, .games { padding: 20px 0 56px; border: 0; background: transparent; }
.popular { position: relative; z-index: 2; padding-top: 4px; }
.games { display: none; }
.section-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.section-line h2 { font: 700 clamp(28px, 4vw, 42px)/1 'Work Sans', sans-serif; }
.pop-title { display: flex; align-items: flex-end; gap: 8px; }
.wides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wide {
  position: relative; height: 280px; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line); background: #0c1018;
}
.wide img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(var(--img-z, 1)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1));
  transform-origin: center center;
  transition: transform var(--out);
}
.wide.live:hover img { transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(calc(var(--img-z, 1) * 1.05)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1)); }
.wide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 48%, rgba(4,6,12,.9)); }
.wide .cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; }
.wide b { display: block; font: 700 18px 'Work Sans', sans-serif; }
.wide span { color: var(--muted); font-size: 12px; }

.feat-head, .section-center { text-align: center; margin-bottom: 28px; }
.feat-head h2, .section-center h2 { margin-top: 8px; font: 700 clamp(28px, 4vw, 42px)/1.05 'Work Sans', sans-serif; }
.boxes, .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.box, .feature-grid > div { min-height: 180px; padding: 24px; border-radius: 18px; }
.box em, .feature-grid span { color: var(--accent); font-style: normal; font-size: 13px; letter-spacing: .14em; }
.box h3, .feature-grid h3 { margin: 18px 0 8px; font: 700 22px 'Work Sans', sans-serif; }
.box p, .feature-grid p { color: var(--muted); font-size: 14px; }

.faq { scroll-margin-top: 96px; }
.faq-split, .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq-split h2, .faq-grid h2 { margin: 8px 0 12px; font: 700 clamp(28px, 4vw, 42px)/1.05 'Work Sans', sans-serif; }
.faq-lead { position: relative; padding-bottom: 210px; }
.faq-lead p, .faq-grid > div > p { color: var(--muted); }
.faq-glass details, .faq-list details {
  margin-bottom: 10px; padding: 4px 18px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(8,10,18,.62); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.faq-glass details[open], .faq-list details[open] {
  border-color: rgba(196,181,253,.4);
  box-shadow: 0 0 22px rgba(139,92,246,.16);
}
.faq-list { border: 0; }
.faq-glass summary, .faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; cursor: pointer; list-style: none; font-weight: 600;
}
.faq-list summary > span, .faq-glass summary > span { color: var(--accent); font-size: 22px; transition: transform var(--ease); }
.faq-list details[open] > summary > span,
.faq-glass details[open] > summary > span,
.faq-panel[open] > summary > b,
.faq-panel.is-open > summary > b { transform: rotate(45deg); }
details::details-content { height: 0; overflow: hidden; transition: height var(--out); }
details[open]::details-content { height: auto; }
.faq-glass details p, .faq-list details p { padding: 0 0 14px; color: var(--muted); font-size: 14px; }

.site-foot, footer { padding: 8px 0 40px; }
.footer-card {
  display: block; padding: 12px 0 8px; border: 0; border-radius: 0; background: transparent;
  text-align: center;
}
.foot-center { text-align: center; padding: 12px 0 8px; }
.foot-logo, .footer-logo { font: 22px 'Work Sans', sans-serif; letter-spacing: .1em; }
.foot-center p, .footer-brand p { max-width: 420px; margin: 14px auto 22px; color: var(--muted); font-size: 14px; }
.socials { justify-content: center; }
.foot-center-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 28px 0 18px; }
.foot-center-links a, .footer-card > div:not(.footer-brand) a {
  display: inline; margin: 0; color: var(--muted); font-size: 13px;
  transition: color var(--ease), text-shadow var(--ease);
}
.foot-center-links a:hover, .footer-card > div:not(.footer-brand) a:hover {
  color: var(--accent); text-shadow: 0 0 12px rgba(167,139,250,.7); transform: none;
}
.footer-card h3 { display: none; }
.foot-copy { display: flex; justify-content: center; gap: 16px; color: var(--muted); font-size: 12px; }
.foot-copy span:first-child { color: var(--accent); }

.catalog-page-intro, .cat-intro { position: relative; padding: 40px 210px 20px 0; }
.catalog-page-intro h1, .cat-intro h1 { margin: 10px 0 12px; font: 700 clamp(36px, 6vw, 64px)/1 'Work Sans', sans-serif; }
.cat-tools, .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 22px; }
.cat-head { display: flex; align-items: center; gap: 10px; }
.tools label, .tools select {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8,10,18,.62); backdrop-filter: blur(16px); color: var(--muted);
}
.tools label:focus-within, .tools select:hover, .tools select:focus {
  border-color: rgba(196,181,253,.55);
  box-shadow: 0 0 18px rgba(139,92,246,.18); outline: none;
}
.grid-posters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gposter {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--line); background: #0c1018;
}
.gposter img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(var(--img-z, 1)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1));
  transform-origin: center center;
  transition: transform var(--out);
}
.gposter.live:hover img { transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(calc(var(--img-z, 1) * 1.06)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1)); }
.gposter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 48%, rgba(4,6,12,.94)); }
.gposter .cap { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; }
.gposter b { display: block; font: 700 16px 'Work Sans', sans-serif; }
.gposter span { color: var(--muted); font-size: 12px; }
.prod-banners { display: grid; gap: 14px; }
.banner {
  position: relative; display: block; min-height: 340px; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line); background: #0c1018;
}
.banner img {
  width: 100%; height: 340px; object-fit: contain; object-position: center;
  transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(var(--img-z, 1)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1));
  transform-origin: center center;
  transition: transform var(--out);
}
.banner.live:hover img { transform: translate(calc(var(--img-x, 50%) - 50%), calc(var(--img-y, 50%) - 50%)) scale(calc(var(--img-z, 1) * 1.04)) rotate(var(--img-rot, 0deg)) scaleX(var(--img-sx, 1)) scaleY(var(--img-sy, 1)); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,6,12,.88) 18%, rgba(4,6,12,.2) 70%); }
.banner .cap { position: absolute; left: 28px; bottom: 28px; z-index: 1; max-width: 420px; }
.banner b { display: block; font: 700 36px/1 'Work Sans', sans-serif; }
.banner span { display: block; margin: 8px 0 16px; color: var(--muted); font-size: 14px; }
.banner .go {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 700; font-size: 13px;
}
.empty { margin: 40px 0; color: var(--muted); text-align: center; }

.faq-page { padding: 28px 0 80px; }
.faq-page .faq-split { align-items: start; }
.faq-page-heading { position: relative; padding-bottom: 210px; max-width: none; margin: 0; }
.faq-page-heading h1 { font: 700 clamp(48px, 8vw, 94px)/.9 'Work Sans', sans-serif; }
.faq-sections { width: auto; margin: 0; display: grid; gap: 12px; }
.faq-panel {
  margin: 0; overflow: hidden; transform: none;
  background: rgba(8,10,18,.62); backdrop-filter: blur(16px);
}
.faq-panel summary { overflow: visible; }
.faq-panel:hover, .faq-panel:focus-within { transform: none; border-color: rgba(167,139,250,.6); }
.faq-panel[open], .faq-panel.is-open {
  border-color: rgba(196,181,253,.4);
  box-shadow: 0 0 22px rgba(139,92,246,.16);
  background: rgba(8,10,18,.62);
}
.faq-panel { scroll-margin-top: 96px; }

.product-page { padding: 28px 0 80px; }
.prod-back, .catalog-back a { display: inline-block; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.prod-back:hover, .catalog-back a:hover { color: var(--accent); }
.product-hero { padding: 0 0 18px; border: 0; }
.product-hero-grid { grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.product-hero h1 { margin: 8px 0 6px; font: 700 clamp(36px, 6vw, 64px)/1 'Work Sans', sans-serif; }
.product-status { display: flex; align-items: center; gap: 10px; color: #9ae6c2; }
.product-workspace { grid-template-columns: 1.25fr .75fr; gap: 14px; padding: 0; }
.product-preview, .product-purchase, .product-info-block { border-radius: 18px; background: rgba(8,10,18,.62); backdrop-filter: blur(16px); }
.product-purchase { padding: 24px; top: 96px; }
.price-option { border-radius: 14px; }
.product-buy-button { border-radius: 28px; height: 48px; }
.trial-button { border-radius: 999px; }
.product-info-grid { gap: 12px; margin-top: 14px; padding-bottom: 0; }
.guarantees-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.guarantee { padding: 18px 20px; }
.guarantee em { color: var(--accent); font-style: normal; font-size: 13px; }
.guarantee b { display: block; margin: 8px 0 6px; font: 700 16px 'Work Sans', sans-serif; }
.guarantee p { color: var(--muted); font-size: 13px; }
.trial-modal-content { border-radius: 18px; background: rgba(8,10,18,.92); backdrop-filter: blur(16px); }

.loader-page {
  min-height: calc(100vh - 240px);
  display: grid; place-items: center;
  padding: 56px 0 80px;
  align-content: center;
}
.loader-stage { position: relative; width: min(100%, 400px); }
.loader-logo { display: none; }
.loader-card {
  position: relative; z-index: 1; width: min(100%, 400px); padding: 28px;
  background: rgba(8,10,18,.62);
}
.loader-submit {
  border-radius: 28px;
  background: var(--white);
  font: 700 13px 'Work Sans', sans-serif;
}
.loader-page .mascot-greet { left: -88px; bottom: 8px; z-index: 0; height: 168px; }

@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 76px; left: 8px; right: 8px;
    flex-direction: column; gap: 14px; padding: 16px;
    border: 1px solid var(--line); border-radius: 14px;
    background: rgba(8,10,18,.94);
  }
  .main-nav.open { display: flex; }
  .main-nav { margin-left: 0; }
  .hero-inner, .home-hero-inner, .faq-split, .faq-grid, .wides, .boxes, .feature-grid,
  .product-workspace, .product-info-grid, .guarantees-row, .faq-page .faq-split { grid-template-columns: 1fr; }
  .hero-copy, .faq-lead, .faq-page-heading, .catalog-page-intro, .cat-intro { padding: 0; }
  .mascot-greet, .mascot-phone { position: static; height: 140px; margin-top: 12px; }
  .mascot-crouch { display: none; }
  .stage { height: 420px; }
  .fan .card { width: 180px; height: 270px; }
  .grid-posters { grid-template-columns: 1fr 1fr; }
  .banner img { height: 240px; }
  .product-purchase { position: static; }
  .header-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grid-floor, .disk, .live:hover::before, .mascot-greet { animation: none; }
  details::details-content { transition: none; }
}