* { box-sizing: border-box }
html { scroll-behavior: smooth; color-scheme: dark }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow-x: clip;
}
a { text-decoration: none; color: inherit }
button, input, textarea, select { font: inherit }
.container { width: min(var(--max), calc(100% - var(--gutter))); margin: auto }
.section { padding: var(--space-90) 0 }
.section-alt { background: var(--bg-band) }
.dark { background: var(--bg); color: var(--text) }
.dark2 { background: var(--bg2); color: var(--text) }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  font-size: 12px;
  font-weight: 800;
  color: var(--eyebrow);
  margin-bottom: var(--space-14);
}
.dark .eyebrow, .dark2 .eyebrow { color: var(--eyebrow-dark) }
h1, h2, h3, p { margin-top: 0 }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; overflow-wrap: break-word }
h1 {
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: var(--track-h1);
  margin-bottom: var(--space-24);
  max-width: 850px;
}
h2 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: var(--track-h2);
  margin-bottom: var(--space-30);
}
h3 { font-size: 21px; line-height: 1.2; margin-bottom: var(--space-10) }
.lead { font-size: 19px; max-width: 760px; color: var(--lead) }
.dark .lead, .dark2 .lead { color: var(--lead-dark) }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--icon-gap);
  min-height: 50px;
  padding: 0 var(--space-21);
  border: 1px solid var(--line-btn);
  border-radius: var(--radius-btn);
  font-weight: 800;
  cursor: pointer;
  transition: .2s;
}
.btn:hover { transform: translateY(-2px) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--white) }
.btn.primary:hover { background: var(--accent2) }
.btn.dark-btn { border-color: var(--line-btn-dark); color: var(--white); background: var(--transparent) }
.btn.light-btn { background: var(--white); color: var(--ink) }
.btns { display: flex; gap: var(--space-12); flex-wrap: wrap }
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-header);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-header);
  color: var(--white);
}
.nav {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-30);
}
.logo { display: inline-flex; align-items: center; line-height: 0; white-space: nowrap }
.logo picture { display: contents }
.logo img { display: block; height: var(--logo-h); width: auto }
nav { display: flex; justify-content: center; gap: var(--space-22); color: var(--nav); font-size: 14px }
nav a:hover { color: var(--white) }
.header-actions { display: flex; align-items: center; gap: var(--space-12) }
.menu {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 25px;
  cursor: pointer;
}
.hero {
  position: relative;
  background: var(--bg);
  color: var(--white);
  padding: var(--space-120) 0 var(--space-110);
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-overlay);
}
.hero .container { position: relative; z-index: 2 }
.hero-badges { display: flex; gap: var(--space-10); flex-wrap: wrap; margin-top: var(--space-26) }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap);
  border: 1px solid var(--line-badge);
  background: var(--bg-badge);
  color: var(--badge);
  padding: var(--space-9) var(--space-13);
  border-radius: var(--radius-pill);
  font-size: 13px;
  backdrop-filter: blur(8px);
}
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) }
.choice {
  padding: var(--space-30);
  background: var(--panel);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  transition: .2s;
}
.choice:hover { transform: translateY(-4px); border-color: var(--line-card-hover) }
.choice .icon { margin-bottom: var(--space-22) }
.choice p { color: var(--choice); font-size: 14px }
.arrow { font-weight: 900; color: var(--accent) }
.problem { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-45); align-items: center }
.search-box {
  position: relative;
  display: grid;
  gap: var(--space-14);
  padding: var(--space-28);
  background: var(--panel);
  border: 1px solid var(--line-search);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-search);
}
.search-query,
.search-contact { display: grid; gap: var(--space-7); min-width: 0 }
.search-query span,
.search-contact span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.search-query input,
.search-contact input {
  min-width: 0;
  border: 1px solid var(--line-field);
  border-radius: var(--radius-input);
  padding: var(--space-13) var(--space-14);
  outline: none;
  background: var(--bg);
}
.ai-wrap { display: grid; grid-template-columns: .75fr 1.25fr; gap: var(--space-45); align-items: start }
.ai-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1); background: var(--line) }
.ai-card { background: var(--panel); padding: var(--space-27); min-height: 180px; min-width: 0 }
.ai-card p { color: var(--ai-copy); font-size: 14px }
.ai-card .tag { color: var(--cyan); font-size: 12px; font-weight: 800 }
.service-grid, .game-grid { overflow: visible }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) }
.service, .game {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: 50;
  --border-radius: var(--radius-glow);
  --cone-spread: 25;
  --fill-opacity: 0.5;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: translate3d(0, 0, .01px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-white-15);
  border-radius: var(--radius-glow);
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-card);
}
.service { padding: var(--space-25); min-height: 190px }
.game { padding: var(--space-25); min-height: 190px }
.service:hover, .game:hover { z-index: 2 }
.service h3, .game h3 { color: var(--text) }
.service p, .game p { color: var(--card-copy); font-size: 14px }
.service .price, .game strong { color: var(--white); font-weight: 900 }
.service .time { color: var(--time) }
.service-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between }
.price { font-size: 18px; font-weight: 900 }
.time { font-size: 12px; color: var(--dim) }
.glow-inner { display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; min-height: 0 }
.service::before, .service::after, .service > .edge-light,
.game::before, .game::after, .game > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity .25s ease-out;
  z-index: -1;
  pointer-events: none;
}
.service:not(:hover)::before, .service:not(:hover)::after, .service:not(:hover) > .edge-light,
.game:not(:hover)::before, .game:not(:hover)::after, .game:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}
.service::before, .game::before {
  border: 1px solid var(--transparent);
  background:
    linear-gradient(var(--bg-card) 0 100%) padding-box,
    linear-gradient(var(--line-white-0) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(from var(--cursor-angle) at center, var(--mask-on) calc(var(--cone-spread) * 1%), var(--transparent) calc((var(--cone-spread) + 15) * 1%), var(--transparent) calc((100 - var(--cone-spread) - 15) * 1%), var(--mask-on) calc((100 - var(--cone-spread)) * 1%));
}
.service::after, .game::after {
  border: 1px solid var(--transparent);
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, var(--mask-on), var(--mask-on)),
    radial-gradient(ellipse at 50% 50%, var(--mask-on) 40%, var(--transparent) 65%),
    radial-gradient(ellipse at 66% 66%, var(--mask-on) 5%, var(--transparent) 40%),
    radial-gradient(ellipse at 33% 33%, var(--mask-on) 5%, var(--transparent) 40%),
    radial-gradient(ellipse at 66% 33%, var(--mask-on) 5%, var(--transparent) 40%),
    radial-gradient(ellipse at 33% 66%, var(--mask-on) 5%, var(--transparent) 40%),
    conic-gradient(from var(--cursor-angle) at center, var(--transparent) 5%, var(--mask-on) 15%, var(--mask-on) 85%, var(--transparent) 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}
.service > .edge-light, .game > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  mask-image: conic-gradient(from var(--cursor-angle) at center, var(--mask-on) 2.5%, var(--transparent) 10%, var(--transparent) 90%, var(--mask-on) 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.service > .edge-light::before, .game > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow: var(--shadow-edge);
}
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) }
#services, #gaming { overflow: visible }
#services { position: relative; background: var(--services-night) }
#services > .container { position: relative; z-index: 2 }
#services .eyebrow, #services h2 { color: var(--text) }
.ghost-fibers-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ghost-fibers-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pixel-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }
.pixel-cell {
  position: absolute;
  box-sizing: border-box;
  background: var(--services-cover);
  border: 1px solid var(--services-crack);
  transform-origin: center center;
  opacity: 1;
  transform: scale(1);
}
.pixel-cell.is-fading {
  animation: pixel-fade .35s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--cell-delay, 0ms);
}
@keyframes pixel-fade {
  from { opacity: 1; transform: scale(1) }
  to { opacity: 0; transform: scale(.6) }
}
@property --spot-1-x { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --spot-1-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --spot-1-a { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --spot-2-x { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --spot-2-y { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --spot-2-a { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --spot-3-x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --spot-3-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --spot-3-a { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
.pixel-shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1);
  background:
    radial-gradient(200px circle at var(--spot-1-x) var(--spot-1-y), color-mix(in srgb, var(--services-crack-glow) var(--spot-1-a), var(--transparent)), var(--transparent)),
    radial-gradient(200px circle at var(--spot-2-x) var(--spot-2-y), color-mix(in srgb, var(--services-crack-glow) var(--spot-2-a), var(--transparent)), var(--transparent)),
    radial-gradient(200px circle at var(--spot-3-x) var(--spot-3-y), color-mix(in srgb, var(--services-crack-glow) var(--spot-3-a), var(--transparent)), var(--transparent));
  /* 2px полоса по центру стыка: рамки клеток сходятся на origin + n * size. */
  mask-image:
    linear-gradient(to right, var(--mask-on) 0 2px, var(--transparent) 2px),
    linear-gradient(to bottom, var(--mask-on) 0 2px, var(--transparent) 2px);
  mask-size: var(--cell-size) 100%, 100% var(--cell-size);
  mask-position: calc(var(--grid-x) - 1px) 0, 0 calc(var(--grid-y) - 1px);
  mask-repeat: repeat;
  mask-composite: add;
  animation:
    spot-1-x 8s ease-in-out infinite,
    spot-1-y 8s ease-in-out infinite,
    spot-1-a 4s ease-in-out infinite,
    spot-2-x 10s ease-in-out infinite,
    spot-2-y 10s ease-in-out infinite,
    spot-2-a 4s ease-in-out infinite,
    spot-3-x 12s ease-in-out infinite,
    spot-3-y 12s ease-in-out infinite,
    spot-3-a 4s ease-in-out infinite;
  animation-delay: 0s, 0s, 0s, -3.5s, -3.5s, -1.3s, -8s, -8s, -2.7s;
}
.pixel-shimmer.is-fading { opacity: 0 }
@keyframes spot-1-x {
  0%, 100% { --spot-1-x: 0% }
  25% { --spot-1-x: 100% }
  50% { --spot-1-x: 78% }
  75% { --spot-1-x: 0% }
}
@keyframes spot-1-y {
  0%, 100% { --spot-1-y: 0% }
  25% { --spot-1-y: 22% }
  50% { --spot-1-y: 100% }
  75% { --spot-1-y: 64% }
}
@keyframes spot-1-a {
  0%, 100% { --spot-1-a: 55% }
  50% { --spot-1-a: 100% }
}
@keyframes spot-2-x {
  0%, 100% { --spot-2-x: 100% }
  25% { --spot-2-x: 0% }
  50% { --spot-2-x: 16% }
  75% { --spot-2-x: 100% }
}
@keyframes spot-2-y {
  0%, 100% { --spot-2-y: 100% }
  25% { --spot-2-y: 70% }
  50% { --spot-2-y: 0% }
  75% { --spot-2-y: 30% }
}
@keyframes spot-2-a {
  0%, 100% { --spot-2-a: 55% }
  50% { --spot-2-a: 100% }
}
@keyframes spot-3-x {
  0%, 100% { --spot-3-x: 50% }
  33% { --spot-3-x: 100% }
  66% { --spot-3-x: 0% }
}
@keyframes spot-3-y {
  0%, 100% { --spot-3-y: 0% }
  33% { --spot-3-y: 72% }
  66% { --spot-3-y: 100% }
}
@keyframes spot-3-a {
  0%, 100% { --spot-3-a: 55% }
  50% { --spot-3-a: 100% }
}
#order { position: relative; background: var(--bg-black); overflow: hidden }
#order > .container { position: relative; z-index: 1 }
.floating-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; overflow: hidden }
.floating-lines canvas { display: block; width: 100%; height: 100% }
.btn { position: relative }
.btn:active { transform: scale(.97) }
.btn.specular-on { border-color: var(--transparent) }
.specular-fx { position: absolute; inset: calc(var(--space-20) * -1); pointer-events: none; z-index: 1 }
.specular-fx canvas { display: block; width: 100%; height: 100% }
.specular-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap);
}
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); background: var(--bg-steps); border: 1px solid var(--line-soft) }
.step { background: var(--panel); padding: var(--space-25); min-height: 170px }
.step-num { font-size: 12px; color: var(--step); font-weight: 900; margin-bottom: var(--space-28) }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) }
.case {
  background: var(--panel);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line-card);
}
.case-img {
  height: 220px;
  background: var(--case-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--meta);
  font-weight: 800;
}
.case-body { padding: var(--space-24) }
.case-meta { display: grid; gap: var(--space-8); margin-top: var(--space-18); font-size: 13px; color: var(--meta) }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) }
.review {
  background: var(--panel);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  padding: var(--space-26);
}
.stars { color: var(--star); letter-spacing: var(--track-stars); margin-bottom: var(--space-15) }
.choice .icon img,
.btn img,
.badge img {
  display: block;
  flex: none;
  filter: drop-shadow(var(--icon-shadow));
}
.choice .icon img { width: var(--icon-choice); height: var(--icon-choice) }
.btn img { width: var(--icon-btn); height: var(--icon-btn) }
.badge img { width: var(--icon-badge); height: var(--icon-badge) }
.review p { color: var(--review) }
.faq { max-width: 900px }
details { border-top: 1px solid var(--line-faq) }
details:last-child { border-bottom: 1px solid var(--line-faq) }
summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-22) 0;
  font-size: 18px;
  font-weight: 800;
}
summary::-webkit-details-marker { display: none }
details p { color: var(--card-copy); padding: 0 0 var(--space-22); margin: 0 }
.cta {
  background: var(--cta-gradient);
  color: var(--white);
  padding: var(--space-75) 0;
}
.cta h2 { max-width: 750px }
.cta .eyebrow { color: var(--eyebrow-cta) }
.cta p { max-width: 700px; color: var(--cta-copy); font-size: 18px }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-50) }
.contacts { display: grid; gap: var(--space-15) }
.contacts-offset { margin-top: var(--space-35) }
.contact { border-top: 1px solid var(--line-soft); padding-top: var(--space-13) }
.contact strong { display: block }
.contact span { color: var(--meta) }
.contact-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
}
.contact-board .contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-height: 148px;
  margin: 0;
  padding: var(--space-24) var(--space-22);
  background: var(--panel);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
}
.contact-board .contact strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--eyebrow);
}
.contact-board .contact span {
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.contact-board .hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.contact-board .hours > span {
  white-space: nowrap;
  overflow-wrap: normal;
}
.contact-board .contact a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.contact-board .contact a:hover { color: var(--accent) }
.form {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-card);
  border-radius: var(--radius);
  padding: var(--space-28);
  display: grid;
  gap: var(--space-14);
}
.field { display: grid; gap: var(--space-7) }
.field label { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: var(--track-label) }
.field input, .field textarea, .field select {
  border: 1px solid var(--line-field);
  border-radius: var(--radius-input);
  padding: var(--space-13) var(--space-14);
  outline: none;
  background: var(--bg);
  color: var(--text);
}
.search-box input, .search-box textarea { color: var(--text) }
.field input::placeholder,
.field textarea::placeholder,
.search-box input::placeholder,
.search-box textarea::placeholder { color: var(--muted) }
.field textarea { min-height: 130px; resize: vertical }
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  font-size: 12px;
  line-height: 1.45;
  color: var(--consent);
}
.consent input { margin-top: var(--space-1); accent-color: var(--accent); flex: none }
.consent a { color: var(--accent); text-decoration: underline }
.form-note {
  margin: 0;
  padding: var(--space-12) var(--space-14);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.form-note[hidden] { display: none }
.form-note.ok { color: var(--cyan); border-color: var(--cyan) }
.form-note.error { color: var(--text); border-color: var(--accent) }
.form-note.pending { color: var(--muted) }
.form-note a { color: var(--cyan); text-decoration: underline }
.hp {
  position: absolute;
  width: var(--space-1);
  height: var(--space-1);
  overflow: hidden;
  clip-path: inset(50%);
}
.btn:disabled,
.btn:disabled:hover { cursor: default; transform: none }
.btn.primary:disabled,
.btn.primary:disabled:hover {
  background: var(--panel2);
  border-color: var(--line-field);
  color: var(--muted);
}
.legal { max-width: 760px }
.legal h1 {
  max-width: none;
  margin-bottom: var(--space-16);
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.15;
  letter-spacing: var(--track-h2);
}
.legal h2 {
  margin: var(--space-40) 0 var(--space-14);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
}
.legal h2:first-of-type { margin-top: var(--space-28) }
.legal p {
  margin: 0 0 var(--space-16);
  color: var(--lead);
  font-size: 17px;
  line-height: 1.7;
}
.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .15em;
  overflow-wrap: anywhere;
}
.legal-date {
  margin-bottom: var(--space-10);
  color: var(--muted);
  font-size: 14px;
}
footer { background: var(--bg-footer); color: var(--footer); padding: var(--space-48) 0 }
footer .logo img { height: var(--logo-h-footer) }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-30) }
.footer-col { display: grid; align-content: start; gap: var(--space-9); font-size: 14px }
.footer-col strong { color: var(--white); margin-bottom: var(--space-7) }
.footer-lead { margin-top: var(--space-12) }
.copy { border-top: 1px solid var(--line-footer); margin-top: var(--space-35); padding-top: var(--space-22); font-size: 12px; color: var(--copy) }
.requisites { border: 0; margin-bottom: var(--space-14) }
.requisites summary { padding: 0 0 var(--space-8); font-size: inherit; font-weight: 700; color: inherit }
.requisites p { color: inherit; font-size: inherit; padding: 0 0 var(--space-7); margin: 0 }
@media (max-width: 1050px) {
  nav { gap: var(--space-13); font-size: 12px }
  .choice-grid, .contact-board { grid-template-columns: repeat(2, 1fr) }
  .steps { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 850px) {
  nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--bg);
    padding: var(--space-18) var(--space-20);
    flex-direction: column;
    border-bottom: 1px solid var(--line-header);
  }
  nav.open { display: flex }
  .menu { display: block }
  .problem, .ai-wrap, .contact-grid { grid-template-columns: 1fr }
  .hero { padding: var(--space-88) 0; min-height: 520px }
  .hero-overlay { background: var(--hero-overlay-mobile) }
  .service-grid, .game-grid, .case-grid, .review-grid { grid-template-columns: 1fr 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 600px) {
  .container { width: calc(100% - var(--gutter-sm)) }
  .section { padding: var(--space-65) 0 }
  h1 { font-size: 44px }
  h2 { font-size: 36px }
  .choice-grid, .service-grid, .game-grid, .case-grid, .review-grid,
  .steps, .footer-grid, .ai-cards, .contact-board { grid-template-columns: 1fr }
  .contact-board .contact { min-height: 0 }
  .search-box { display: grid }
  .search-box .btn { width: 100% }
  .hero .btn { width: 100% }
  .header-actions .btn { display: none }
  .logo img { height: var(--logo-h-sm) }
}
@media (hover: none) {
  .service::before, .service::after, .service > .edge-light,
  .game::before, .game::after, .game > .edge-light {
    opacity: 0 !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service::before, .service::after, .service > .edge-light,
  .game::before, .game::after, .game > .edge-light {
    opacity: 0 !important;
    transition: none !important;
  }
  .pixel-cell.is-fading { animation: none }
  .btn.primary, .btn.dark-btn { border-color: var(--border-reduced) }
  .btn.light-btn { border-color: var(--border-reduced-light) }
}

nav a { white-space: nowrap }
.cabinet-entry { margin: var(--space-16) 0 0 }
.cabinet-entry a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.field[hidden] { display: none }
.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.chip:focus-visible,
.star-btn:focus-visible,
.filter:focus-visible,
.text-link:focus-visible {
  outline: var(--space-1) solid var(--cyan);
  outline-offset: var(--space-1);
}
.order-details { display: grid; gap: var(--space-14) }
.safe-note {
  margin: 0;
  padding: var(--space-12) var(--space-14);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--cyan);
  font-size: 14px;
  line-height: 1.45;
}
.auth-wrap {
  display: grid;
  justify-items: center;
  gap: var(--space-28);
}
.auth-intro { width: min(100%, var(--panel-narrow)) }
.auth-intro h1,
.cabinet h1,
.order-card h1 {
  max-width: none;
  margin-bottom: var(--space-12);
  font-size: clamp(28px, 4vw, 44px);
}
.auth-card { width: min(100%, var(--panel-narrow)) }
.cabinet { display: grid; gap: var(--space-20) }
.cabinet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.cabinet-head h1 { margin-bottom: var(--space-8) }
.cabinet-head .lead { margin-bottom: 0 }
.cabinet-list, .orders { display: grid; gap: var(--space-16) }
.order-card, .stack-form {
  display: grid;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--panel);
  border: 1px solid var(--line-card);
  border-radius: var(--radius);
}
.stack-form { align-content: start }
.order-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.order-kicker {
  margin: 0 0 var(--space-8);
  color: var(--eyebrow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.order-card h2,
.order-card h3,
.rate-box h3,
.stack-form h2 {
  margin-bottom: var(--space-8);
  font-size: 22px;
}
.order-when { margin: 0; color: var(--muted); font-size: 14px }
.stage-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-28);
  padding: 0 var(--space-12);
  border: 1px solid var(--line-badge);
  border-radius: var(--radius-pill);
  background: var(--bg-badge);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.tracker {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}
.tracker-step {
  display: grid;
  grid-template-columns: var(--space-40) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
  min-height: var(--space-40);
}
.tracker-mark {
  width: var(--space-40);
  height: var(--space-40);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-field);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--muted);
  font-weight: 800;
}
.tracker-step.is-done .tracker-mark {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--bg-black);
}
.tracker-step.is-current .tracker-mark {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 0 var(--space-16) var(--glow-color-40);
}
.tracker-label { color: var(--muted); font-size: 14px; line-height: 1.35 }
.tracker-step.is-done .tracker-label,
.tracker-step.is-current .tracker-label { color: var(--text); font-weight: 800 }
.meta-list { display: grid; gap: var(--space-10); margin: 0 }
.meta-list div {
  display: grid;
  gap: var(--space-7);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line-soft);
}
.meta-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.meta-list dd { margin: 0; overflow-wrap: anywhere }
.stage-body, .stage-actions, .rate-box, .review-box, .actions {
  display: grid;
  gap: var(--space-12);
}
.pay-sum {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: var(--track-h2);
}
.pay-box {
  display: grid;
  justify-items: center;
  gap: var(--space-12);
  padding: var(--space-20);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  background: var(--bg);
  text-align: center;
}
.pay-box .lead { margin: 0 }
.pay-qr {
  width: min(100%, var(--qr-size));
  height: auto;
  padding: var(--space-12);
  border-radius: var(--radius-input);
  background: var(--white);
}
.pay-purpose {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}
.star-row { display: flex; flex-wrap: wrap; gap: var(--space-8) }
.star-btn {
  min-width: var(--space-48);
  min-height: var(--space-48);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-input);
  background: var(--transparent);
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}
.star-btn.is-on { border-color: var(--star); color: var(--star) }
.chosen-stars { margin: 0 }
.stars-off { color: var(--line-field) }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8) }
.chip, .filter {
  border: 1px solid var(--line-field);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  padding: var(--space-8) var(--space-14);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.chip.is-on, .filter.is-on {
  border-color: var(--accent);
  background: var(--panel2);
  color: var(--white);
}
.filters { display: flex; flex-wrap: wrap; gap: var(--space-8) }
.review-text {
  margin: 0;
  color: var(--review);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.order-row {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-16);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  background: var(--panel);
  color: inherit;
}
.order-row:hover { border-color: var(--line-card-hover) }
.order-price { color: var(--muted); font-weight: 800 }
.text-link {
  width: fit-content;
  padding: 0;
  border: 0;
  background: var(--transparent);
  color: var(--cyan);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.actions { grid-template-columns: 1fr }
@media (min-width: 700px) {
  .meta-list div { grid-template-columns: var(--space-120) minmax(0, 1fr); align-items: baseline }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 860px) {
  .tracker { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 }
  .tracker-step {
    position: relative;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-10);
    padding: 0 var(--space-8);
    text-align: center;
  }
  .tracker-mark { position: relative; z-index: 1 }
  .tracker-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: var(--space-20);
    left: calc(50% + var(--space-20));
    width: calc(100% - var(--space-40));
    height: var(--space-1);
    background: var(--line);
  }
  .tracker-step.is-done:not(:last-child)::after { background: var(--cyan) }
}
@media (min-width: 900px) {
  .admin-order {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--space-20);
    align-items: start;
  }
  .order-row {
    grid-template-columns: var(--space-74) minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    gap: var(--space-16);
    align-items: center;
  }
}
@media (max-width: 600px) {
  .auth-card .btn,
  .order-card .btn,
  .stack-form .btn,
  .rate-box .btn,
  .review-box .btn { width: 100% }
  .cabinet-head { align-items: stretch }
  .cabinet-head .btn { width: 100% }
}
@media (prefers-reduced-motion: reduce) {
  .tracker-step,
  .chip,
  .filter,
  .star-btn,
  .order-row,
  .order-card { transition: none }
  .tracker-step.is-current .tracker-mark { box-shadow: none }
}