/* ---------- ЛОКАЛЬНЫЕ ШРИФТЫ: САЙТ НЕ ЗАВИСИТ ОТ GOOGLE FONTS ---------- */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('./media/fonts/geologica-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('./media/fonts/geologica-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./media/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./media/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- ДИЗАЙН-СИСТЕМА «НЕОН-ХАМЕЛЕОН» ---------- */
:root{
  --black:#03040a; --g1:#070914; --g2:#0d1020; --g3:#171b31; --g4:#252b43;
  --g5:#69728a; --g6:#9ba3b5; --g7:#d5d9e5; --white:#f7f8fc;
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.2);
  --pink:#f05be5; --violet:#a36cff; --blue:#5d86ff;
  --cyan:#52d9ea; --mint:#62e6b5; --lime:#7eea50;
  --mode-accent:#00d9ff;
  --spectrum:linear-gradient(115deg,var(--pink) 0%,var(--violet) 24%,var(--blue) 46%,var(--cyan) 68%,var(--mint) 84%,var(--lime) 100%);
  --panel:rgba(10,13,27,.72);
  --panel-strong:rgba(7,9,20,.9);
  --shadow:0 24px 80px rgba(0,0,0,.42);
  --h:'Geologica',system-ui,sans-serif; --t:'Onest',system-ui,sans-serif;
  --pad:clamp(16px,4vw,64px);
  --pointer-x:50vw;
  --pointer-y:20vh;
}

/* ---------- ТРИ ЗАЛА: РАЗДЕЛЕННЫЙ ПЛАН + НАСТОЯЩАЯ 360°-ПАНОРАМА ---------- */
#halls.halls {
  min-height: clamp(680px, 86vh, 920px);
  padding: 0 !important;
}

#halls .halls-card {
  display: grid;
  grid-template-columns: minmax(430px, 42%) minmax(0, 58%);
  width: 100%;
  max-width: none;
  min-height: clamp(680px, 86vh, 920px);
  margin: 0;
}

.halls-plan-side {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  padding: clamp(42px, 5vw, 76px) clamp(24px, 4vw, 68px) clamp(26px, 3vw, 46px);
  background: #05070d;
}

.halls-plan-side::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .4;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--mode-accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--mode-accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 4%, transparent) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 16px 16px, 16px 16px;
  mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
}

#halls .halls-head {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 0;
}

#halls .halls-title {
  max-width: 720px;
  font-size: clamp(31px, 3.1vw, 58px);
  white-space: normal;
}

#halls .halls-title span {
  display: block;
}

#halls .halls-title span + span::before {
  content: none;
}

#halls .halls-head .lead {
  max-width: 560px;
  margin-top: 16px;
}

.hall-blueprint {
  min-height: 430px;
  overflow: visible;
}

.hall-blueprint-grid {
  display: none;
}

.hall-model {
  inset: 0 clamp(-44px, -3vw, -18px) 8px;
}

.hall-model-world {
  width: min(132%, 680px);
}

.hall-model-ui {
  right: 0;
  bottom: 0;
  left: 0;
}

.hall-panorama {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #03050a;
  cursor: default;
}

.hall-panorama-viewer,
.hall-panorama-viewer.pnlm-container {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #03050a;
}

.hall-panorama-viewer .pnlm-render-container,
.hall-panorama-viewer .pnlm-ui {
  position: absolute;
  inset: 0;
}

.hall-panorama-viewer .pnlm-dragfix,
.hall-panorama-viewer canvas {
  cursor: grab !important;
}

.hall-panorama-viewer .pnlm-dragfix:active,
.hall-panorama-viewer canvas:active {
  cursor: grabbing !important;
}

.hall-panorama-viewer .pnlm-load-box,
.hall-panorama-viewer .pnlm-about-msg,
.hall-panorama-viewer .pnlm-orientation-button,
.hall-panorama-viewer .pnlm-zoom-controls,
.hall-panorama-viewer .pnlm-fullscreen-toggle-button {
  display: none !important;
}

.hall-panorama-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 5, 10, .82) 0%, rgba(3, 5, 10, .44) 34%, rgba(3, 5, 10, .04) 72%),
    linear-gradient(0deg, rgba(3, 5, 10, .84), transparent 54%);
}

.hall-panorama-drag,
.hall-panorama-copy {
  z-index: 2;
}

.hall-panorama-copy {
  right: clamp(24px, 4vw, 68px);
  bottom: clamp(30px, 5vw, 74px);
  left: clamp(24px, 4vw, 68px);
  max-width: min(560px, 76%);
}

.hall-panorama-copy ul {
  display: grid;
  gap: 7px;
  max-width: 440px;
  margin-top: 18px;
}

.hall-panorama-copy li {
  position: relative;
  padding: 0 0 0 18px;
  border: 0;
  border-radius: 0;
  color: #f2f5fb;
  background: transparent;
  backdrop-filter: none;
  font-size: clamp(12px, 1vw, 15px);
}

.hall-panorama-copy li::before {
  content: "";
  position: absolute;
  top: .52em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mode-accent);
  box-shadow: 0 0 10px var(--mode-accent);
}

.hall-panorama::after {
  z-index: 3;
}

@media (max-width: 980px) {
  #halls .halls-card {
    grid-template-columns: 1fr;
  }

  .halls-plan-side {
    min-height: 650px;
  }

  .hall-panorama {
    min-height: 680px;
  }
}

@media (max-width: 600px) {
  #halls.halls {
    padding: 0 !important;
  }

  .halls-plan-side {
    min-height: 570px;
    padding: 38px 16px 24px;
  }

  #halls .halls-title {
    font-size: clamp(28px, 9vw, 42px);
  }

  .hall-blueprint {
    min-height: 360px;
  }

  .hall-panorama {
    min-height: 620px;
  }

  .hall-panorama-copy {
    max-width: calc(100% - 48px);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--t);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ---------- МЕНЮ ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:14px var(--pad);background:linear-gradient(rgba(10,10,10,.85),rgba(10,10,10,0));transition:background .25s}
.nav.solid{background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.logo-mark{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--white);display:grid;place-items:center}
.logo-mark svg{width:24px;height:24px}
.logo-word{font-family:var(--h);font-weight:700;font-size:15px;letter-spacing:.06em;line-height:1}
.logo-word small{display:block;font-family:var(--t);font-weight:400;font-size:9px;letter-spacing:.14em;color:var(--g6);margin-top:4px}
.msg{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease}
.msg:hover{background:var(--white);color:var(--black)}
.msg svg{width:20px;height:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;
  font-family:var(--h);font-weight:600;font-size:15px;transition:color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease;white-space:nowrap}
.btn-solid{background:var(--white);color:var(--black)}
.btn-solid:hover{background:var(--g7)}
.btn-line{border:1.5px solid var(--white)}
.btn-line:hover{background:rgba(255,255,255,.08)}
.nav .btn{height:42px;padding:0 18px;font-size:14px}
.nav .btn .short{display:none}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:max(100svh,720px);overflow:hidden;isolation:isolate}
.bg{position:absolute;inset:0;z-index:-2}
.layer{position:absolute;inset:0;background-color:var(--tone)}
.layer .pat{position:absolute;inset:0;opacity:.9}
.layer .glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 45%,rgba(255,255,255,.10),transparent 70%)}
.ph-label{position:absolute;right:var(--pad);top:120px;max-width:300px;padding:12px 14px;border:1px dashed var(--line2);
  border-radius:10px;background:rgba(10,10,10,.55);font-size:12px;line-height:1.45;color:var(--g7)}
.ph-label b{display:block;font-family:var(--h);font-size:11px;letter-spacing:.14em;color:var(--white);margin-bottom:4px}
.ph-label i{font-style:normal;color:var(--g6)}
.ph-cross{position:absolute;inset:0;pointer-events:none;opacity:.07}
.shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.75) 34%,rgba(10,10,10,.1) 62%,rgba(10,10,10,0) 100%),
             linear-gradient(0deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,0) 30%)}
.wave{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);pointer-events:none;z-index:-1;
  transform:translate(-50%,-50%);box-shadow:0 0 40px rgba(255,255,255,.25)}

.hero-in{position:relative;min-height:inherit;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;
  padding:120px var(--pad) 48px}
.left{align-self:center;padding-bottom:40px}
.geo{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--g7);margin-bottom:22px}
.geo svg{width:16px;height:16px}
h1{font-family:var(--h);font-weight:800;font-size:clamp(40px,6.4vw,92px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.sub{font-family:var(--h);font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.2;margin-top:20px;max-width:520px}
.offer{display:flex;align-items:center;gap:12px;margin-top:18px;max-width:500px;padding:12px 16px 12px 12px;border:1.5px dashed var(--white);border-radius:16px;background:rgba(10,10,10,.55);font-size:15px;line-height:1.4;color:var(--g7)}
.offer b{color:var(--white);font-weight:600}
.offer-ic{flex:0 0 40px;height:40px;border-radius:12px;background:var(--white);color:var(--black);display:grid;place-items:center}
.offer-ic svg{width:22px;height:22px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border:1px solid var(--line2);border-radius:12px;
  background:rgba(255,255,255,.04);font-family:var(--h);font-weight:600;font-size:15px}
.badge svg{width:22px;height:22px}

/* квиз внутри hero */
.quiz-wrap{margin-top:28px;max-width:520px}
.quiz-toggle{width:100%;justify-content:space-between;height:58px;padding:0 10px 0 26px;font-size:16px}
.quiz-toggle .chev{width:38px;height:38px;border-radius:50%;background:var(--black);color:var(--white);display:grid;place-items:center;transition:transform .3s}
.quiz-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.quiz{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.quiz.open{grid-template-rows:1fr}
.quiz > div{overflow:hidden}
.quiz-card{margin-top:10px;padding:20px;border:1px solid var(--line2);border-radius:18px;background:rgba(14,14,14,.92);backdrop-filter:blur(6px)}
.q-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g6)}
.q-dots{display:flex;gap:6px}
.q-dots span{width:22px;height:4px;border-radius:2px;background:var(--g4)}
.q-dots span.on{background:var(--white)}
.q-title{font-family:var(--h);font-weight:600;font-size:20px;line-height:1.25;margin:14px 0 14px}
.q-opts{display:flex;flex-wrap:wrap;gap:8px}
.q-opt{padding:11px 15px;border:1px solid var(--line2);border-radius:999px;font-size:14.5px;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}
.q-opt:hover{background:var(--white);color:var(--black)}
.q-back{margin-top:14px;font-size:13px;color:var(--g6);text-decoration:underline;text-underline-offset:3px}
.q-res-mode{font-family:var(--h);font-weight:800;font-size:28px;text-transform:uppercase;line-height:1.05;margin:6px 0 8px}
.q-res p{font-size:14.5px;line-height:1.5;color:var(--g7)}
.q-res .alt{margin-top:10px;font-size:13px;color:var(--g6)}
.q-res .alt button{text-decoration:underline;text-underline-offset:3px;color:var(--g7)}
.q-res .row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-top:16px}
.q-book{display:flex;flex-direction:column;gap:6px}
.q-book small{font-size:12.5px;color:var(--g6);text-align:center}
.q-res .btn{height:46px;font-size:14px}

/* мини-слайдер режимов */
.right{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.modes{margin-left:auto;width:min(620px,100%)}
.now{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.now-name{font-family:var(--h);font-weight:700;font-size:22px;line-height:1.1}
.now-name small{display:block;font-family:var(--t);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g6);margin-bottom:6px}
.now-progs{font-size:13.5px;color:var(--g7);margin-top:6px}
.count{font-family:var(--h);font-size:14px;color:var(--g6);white-space:nowrap}
.count b{color:var(--white);font-weight:700}
.track-row{position:relative}
.track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 6px}
.track::-webkit-scrollbar{display:none}
.thumb{flex:0 0 118px;display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;text-align:left;opacity:.55;transition:opacity .2s}
.thumb:hover{opacity:.85}
.thumb.on{opacity:1}
.thumb .pic{display:block;position:relative;height:78px;border-radius:12px;overflow:hidden;border:1.5px solid var(--line);background-color:var(--tone)}
.thumb.on .pic{border-color:var(--white);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.thumb .pic i{position:absolute;inset:0}
.thumb .pic em{position:absolute;left:8px;bottom:6px;font-style:normal;font-family:var(--h);font-size:10px;letter-spacing:.1em;color:var(--g6)}
.thumb .nm{display:block;font-size:12.5px;line-height:1.25;margin-top:7px;color:var(--g7)}
.thumb.on .nm{color:var(--white);font-weight:600}
.arrows{display:flex;gap:8px}
.arr{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}
.arr:hover{background:var(--white);color:var(--black)}
.arr svg{width:16px;height:16px}
.pick{margin-top:14px;width:100%;height:56px}
.pick svg{width:20px;height:20px}


/* ---------- MOBILE ---------- */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:28px;padding-top:96px;padding-bottom:28px}
  .left{padding-bottom:0;align-self:start}
  .shade{background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.7) 50%,rgba(10,10,10,.45) 78%,rgba(10,10,10,.8) 100%)}
  .ph-label{top:auto;bottom:16px;left:var(--pad);right:auto;max-width:none;display:none}
  .modes{width:100%}
  .quiz-wrap{max-width:none}
}
@media (max-width:560px){
  .nav{gap:8px;padding-top:10px;padding-bottom:10px}
  .logo-word{font-size:12px}
  .logo-word small{display:none}
  .logo-mark{width:34px;height:34px}
  .msg{width:38px;height:38px}
  .nav .btn{height:38px;padding:0 14px;font-size:13px}
  .nav .btn .full{display:none}.nav .btn .short{display:inline}
  .thumb{flex-basis:104px}
  .thumb .pic{height:68px}
  .now-name{font-size:19px}
}
/* ---------- БЛОК 2: КАК ЭТО РАБОТАЕТ ---------- */
.how{padding:clamp(72px,9vw,128px) var(--pad);border-top:1px solid var(--line)}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--g6);margin-bottom:16px}
.h2{font-family:var(--h);font-weight:700;font-size:clamp(30px,4vw,56px);line-height:1.04;letter-spacing:-.01em;max-width:900px}
.lead{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--g7);max-width:620px;margin-top:18px}


.console{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:center;
  border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--g1)}
.stage-wrap{position:relative;border-radius:16px;overflow:hidden;background:#0d0d0d;border:1px solid var(--line)}
.stage-top{display:flex;justify-content:flex-end;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--g6)}
.stage-top b{color:var(--white);font-weight:600}
.room{display:block;width:100%;height:auto}
.room .L{opacity:0;transition:opacity .6s ease}
.room.light .L-light,.room.screens .L-screens,.room.decor .L-decor,.room.music .L-music,.room.program .L-program{opacity:1}
.room .off{transition:opacity .4s}
.room.screens .off-screens{opacity:0}
.room .wave-a{animation:pulse 1.2s ease-in-out infinite}
.room .wave-b{animation:pulse 1.2s ease-in-out .3s infinite}
.room .eqb{transform-box:fill-box;transform-origin:bottom;animation:eq .8s ease-in-out infinite alternate}
@keyframes pulse{0%,100%{opacity:.15}50%{opacity:.8}}
@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}

.panel{display:flex;flex-direction:column;min-width:0}
.modebar{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding:clamp(8px,1.5vw,20px) clamp(4px,1vw,12px) 8px}
.mb-title{min-width:0}
.mb-title .h2{font-size:clamp(28px,3.4vw,48px)}
.mb-title .lead{margin-top:12px}
.dots{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:7px;margin-bottom:12px}
.dot{position:relative;width:100%;max-width:38px;aspect-ratio:1;border-radius:50%;background-color:var(--tone);border:1px solid var(--line2);transition:transform .15s,box-shadow .15s}
.dot:hover{transform:scale(1.12)}
.dot.on{box-shadow:0 0 0 2px var(--black),0 0 0 4px var(--white)}
.dot::after{content:attr(data-name);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:8px;
  background:var(--white);color:var(--black);font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;display:none}
.dot:hover::after{display:block}
.dot:nth-last-child(-n+3)::after{left:auto;right:0;transform:none}
.dot:nth-child(-n+3)::after{left:0;transform:none}
.step-lbl{font-family:var(--h);font-weight:700;font-size:clamp(18px,1.6vw,22px)}
.step-lbl small{display:block;font-family:var(--t);font-weight:400;font-size:13px;color:var(--g6);margin-top:3px}
.step-lbl small b{color:var(--white);font-weight:600}
.panel .step-lbl{margin-bottom:10px}
.agesw{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:999px;margin-bottom:22px}
.agesw button{height:44px;border-radius:999px;font-family:var(--h);font-weight:600;font-size:15px;color:var(--g7);transition:color .15s ease,opacity .15s ease}
.agesw button:hover{color:var(--white)}
.agesw button.on{background:var(--white);color:var(--black)}
.dot.off{opacity:.18;cursor:not-allowed}
.dot.off:hover{transform:none}
.ps{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ps-lbl{font-family:var(--h);font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.2}
.ps-lbl small{display:block;font-family:var(--t);font-weight:400;font-size:13px;color:var(--g6);margin-top:3px}
.ps-lbl small b{color:var(--white);font-weight:600}
.ps-nav{display:flex;gap:6px}
.ps-nav .arr{width:34px;height:34px}
.ps-nav .arr svg{width:14px;height:14px}
.ps-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.ps-track::-webkit-scrollbar{display:none}
.pk{flex:0 0 148px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:92px;padding:12px;
  border:1px solid var(--line2);border-radius:14px;background:var(--g1);text-align:left}
.pk b{font-family:var(--h);font-weight:600;font-size:14.5px;line-height:1.25}
.pk small{font-size:12px;color:var(--g6)}
.pk.pick{cursor:pointer;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}
.pk.pick:hover{border-color:var(--white)}
.pk.pick.on{background:var(--white);color:var(--black);border-color:var(--white)}
.pk.pick.on small{color:var(--black);font-weight:600}
.pk.lock{border-style:dashed;background:transparent;cursor:pointer;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}
.pk.lock:hover{border-color:var(--white)}
.pk.lock .bars i{display:block;height:9px;border-radius:5px;background:var(--g3);margin-bottom:6px}
.pk.lock .lk{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center}
.pk.lock .lk svg{width:13px;height:13px}
.pk.lock.more b{font-size:20px}
.panel #uGet{margin-top:14px;width:100%;height:54px;font-size:16px}
.panel .micro{font-size:13px;color:var(--g6);margin-top:8px;text-align:center}

@media (max-width:960px){
  .console{grid-template-columns:1fr;padding:12px;border-radius:20px}
  .modebar{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .stage-top{font-size:10px;padding:8px 10px}
  .modebar{flex-direction:column;align-items:flex-start;gap:10px}
  .dots{gap:5px}
  .dot::after{display:none}
  }
/* ---------- БЛОК 3: ПРОСТРАНСТВО ---------- */
.space{padding:clamp(56px,7vw,96px) var(--pad);border-top:1px solid var(--line)}
.sp-card{border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--g1)}
.sp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;padding:clamp(8px,1.5vw,20px) clamp(4px,1vw,12px) 8px}
.sp-head .h2{font-size:clamp(28px,3.4vw,48px)}
.sp-body{margin-top:20px}
.vid-slot{max-width:820px;margin:0 auto}
.vid{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#121212}
.vid .pat{position:absolute;inset:0;opacity:.6}
.vid .cross{position:absolute;inset:0;opacity:.08}
.vid-top{position:absolute;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g6)}
.vid-top b{color:var(--white);font-weight:600}
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--white);color:var(--black);
  display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.08);transition:transform .2s}
.vid-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.vid-play svg{width:30px;height:30px}
.vid-bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px}
.vid-track{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.vid-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--white);width:0}
.vid-time{font-size:12px;color:var(--g7);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:960px){
  .sp-head{flex-direction:column;align-items:flex-start}
  .sp-body{grid-template-columns:1fr}
  .sp-card{padding:12px;border-radius:20px}
}
@media (max-width:560px){
  .vid-play{width:52px;height:52px;box-shadow:0 0 0 6px rgba(255,255,255,.08)}
  .vid-play svg{width:20px;height:20px}
  .vid-top{left:12px;right:12px;top:10px;font-size:10px}
  .vid-top span:last-child{display:none}
  .vid-bar{left:12px;right:12px;bottom:12px}
}
/* ---------- БЛОК 4: ОТЗЫВЫ (двери режимов) ---------- */
.rv{padding:clamp(56px,7vw,96px) var(--pad);border-top:1px solid var(--line)}
.rv-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(560px,52vw,720px);border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--g1)}
/* фоновый плейсхолдер фото: эмоции гостей; карточки внизу, середина и правая часть — «воздух» под фото */
.rv-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 80% at 72% 40%,#2a2a2a,#141414 75%)}
.rv-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.07}
.rv-bg .ph-label{top:38%;transform:translateY(-50%)}
.rv-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 34%,rgba(10,10,10,0) 60%),linear-gradient(90deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,0) 45%)}
.rv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 40px;padding:clamp(8px,1.5vw,20px) clamp(4px,1vw,12px) 8px}
.rv-head .h2{font-size:clamp(28px,3.4vw,48px)}
.rv-head .lead{margin-top:12px}
.doors{display:flex;gap:10px;margin-top:auto;padding-top:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.doors::-webkit-scrollbar{display:none}
.door{position:relative;flex:0 0 156px;scroll-snap-align:start;height:262px;border-radius:14px 14px 4px 4px;border:2px solid var(--g4);background:#0b0b0b;perspective:900px;overflow:hidden;cursor:pointer;outline:none;transition:border-color .3s}
.door:focus-visible{border-color:var(--white)}
.door.is-open{border-color:var(--g6)}
/* что за дверью: отзыв */
.behind{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;gap:7px;background:var(--g2)}
.who{display:flex;align-items:center;gap:8px}
.av{flex:0 0 32px;height:32px;border-radius:50%;border:1px dashed var(--line2);background:var(--g3);display:grid;place-items:center;font-family:var(--h);font-weight:700;font-size:14px}
.who b{display:block;font-family:var(--h);font-weight:600;font-size:12.5px;line-height:1.2}
.who small{display:block;font-size:10.5px;color:var(--g6);margin-top:2px}
.q{font-size:11.5px;line-height:1.4;color:var(--white)}
.rtag{margin-top:auto;font-size:10px;line-height:1.3;color:var(--g6);padding-top:6px;border-top:1px solid var(--line)}
/* створки */
.leaf{position:absolute;inset:0;z-index:2;background-color:var(--tone);background-size:auto;transition:transform .7s cubic-bezier(.6,0,.2,1);backface-visibility:hidden}
.plate{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;padding:6px 8px;border-radius:8px;background:rgba(10,10,10,.82);border:1px solid var(--line2);transition:opacity .25s;pointer-events:none}
.plate b{display:block;font-family:var(--h);font-weight:600;font-size:11.5px;line-height:1.2}
.door.is-open .plate{opacity:0}
.deco{position:absolute;z-index:4;pointer-events:none;transition:opacity .3s}
.door.is-open .deco{opacity:0}

/* 01 игры: сдвижная sci-fi дверь в стороны */
.t-slide .l1{right:50%;border-right:2px solid rgba(255,255,255,.55)}
.t-slide .l2{left:50%;border-left:2px solid rgba(255,255,255,.55)}
.t-slide .l1::after,.t-slide .l2::after{content:"";position:absolute;top:44%;width:16px;height:30px;border:2px solid rgba(255,255,255,.6);border-radius:3px}
.t-slide .l1::after{right:8px}.t-slide .l2::after{left:8px}
.t-slide .deco{left:50%;top:14px;transform:translateX(-50%);font-size:9px;letter-spacing:.16em;color:#fff;padding:3px 6px;border:1px solid rgba(255,255,255,.6);border-radius:3px;background:#0b0b0b;white-space:nowrap}
.t-slide.is-open .l1{transform:translateX(-102%)}
.t-slide.is-open .l2{transform:translateX(102%)}
/* 02 блогеры: сторис, свайп вверх */
.t-swipe .l1{transition-duration:.55s}
.t-swipe .l1::before{content:"";position:absolute;left:10px;right:10px;top:10px;height:3px;border-radius:2px;background:linear-gradient(90deg,#fff 0 40%,rgba(255,255,255,.3) 40%)}
.t-swipe .deco{left:0;right:0;top:42%;text-align:center;font-family:var(--h);font-weight:700;font-size:13px;color:#fff}
.t-swipe .deco i{display:block;font-style:normal;font-size:22px;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.t-swipe.is-open .l1{transform:translateY(-104%)}
/* 03 бьюти: зеркало с лампочками на петлях */
.t-mirror .l1{transform-origin:left center}
.t-mirror .l1::before{content:"";position:absolute;inset:10px 10px 46px;border-radius:50px 50px 6px 6px;border:4px dotted #e8e8e8;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 60%)}
.t-mirror.is-open .l1{transform:rotateY(-108deg)}
/* 04 хоррор: дверь дёргается и медленно, со скрипом, открывается */
.t-creak .l1{transform-origin:left center;filter:contrast(1.2)}
.t-creak .deco{left:50%;top:22%;transform:translateX(-50%) rotate(-6deg);font-family:var(--h);font-weight:800;font-size:12px;letter-spacing:.1em;color:#0b0b0b;background:#ddd;padding:4px 8px;white-space:nowrap}
.t-creak.is-open .l1{animation:creak 2s cubic-bezier(.3,0,.3,1) forwards}
@keyframes creak{0%{transform:rotateY(0)}8%{transform:rotateY(-7deg)}14%{transform:rotateY(-2deg)}22%{transform:rotateY(-10deg)}30%{transform:rotateY(-6deg)}100%{transform:rotateY(-80deg)}}
.t-creak.is-open .behind{animation:flicker 2s steps(1) forwards}
@keyframes flicker{0%,12%,20%{opacity:.3}10%,16%,24%,100%{opacity:1}}
/* 05 космос: шлюз — створки вверх и вниз */
.t-split .l1{bottom:50%;border-bottom:2px solid #0b0b0b}
.t-split .l2{top:50%}
.t-split .l1::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(45deg,#ddd 0 8px,#0b0b0b 8px 16px)}
.t-split .deco{left:50%;top:20%;width:34px;height:34px;transform:translateX(-50%);border-radius:50%;border:3px solid #ddd;background:radial-gradient(circle,rgba(255,255,255,.25),rgba(0,0,0,.6))}
.t-split.is-open .l1{transform:translateY(-102%)}
.t-split.is-open .l2{transform:translateY(102%)}
/* 06 музыка: сценический занавес */
.t-curtain .l1,.t-curtain .l2{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 5px,rgba(0,0,0,.25) 5px 13px,transparent 13px 18px)!important}
.t-curtain .l1{right:50%;transform-origin:left center}
.t-curtain .l2{left:50%;transform-origin:right center}
.t-curtain .deco{left:0;right:0;top:0;height:22px;background:repeating-radial-gradient(circle at 10px -4px,#ddd 0 9px,transparent 10px 20px);background-size:20px 22px}
.t-curtain.is-open .l1,.t-curtain.is-open .l2{transform:scaleX(.12)}
.t-curtain.is-open .deco{opacity:1}
/* 07 сказки: арка-книга, обложка распахивается */
.t-book{border-radius:70px 70px 4px 4px}
.t-book .l1{transform-origin:left center;transition-duration:1s}
.t-book .l1::before{content:"";position:absolute;inset:8px;border-radius:62px 62px 2px 2px;border:2px solid rgba(255,255,255,.5)}
.t-book .deco{right:22px;top:52%;width:12px;height:24px;background:radial-gradient(circle at 50% 30%,#ddd 0 5px,transparent 6px),linear-gradient(#ddd,#ddd) 50% 100%/4px 12px no-repeat}
.t-book.is-open .l1{transform:rotateY(-165deg)}
/* 08 мафия: сейф — диск крутится, потом дверь */
.t-vault .l1{transform-origin:right center;transition-delay:0s}
.t-vault .deco{left:50%;top:32%;width:48px;height:48px;transform:translateX(-50%);border-radius:50%;border:4px solid #ddd;transition:transform .6s ease,opacity .3s .5s;
  background:conic-gradient(from 0deg,#ddd 0 4deg,transparent 4deg 45deg,#ddd 45deg 49deg,transparent 49deg 90deg,#ddd 90deg 94deg,transparent 94deg 135deg,#ddd 135deg 139deg,transparent 139deg 180deg,#ddd 180deg 184deg,transparent 184deg 225deg,#ddd 225deg 229deg,transparent 229deg 270deg,#ddd 270deg 274deg,transparent 274deg 315deg,#ddd 315deg 319deg,transparent 319deg)}
.t-vault.is-open .deco{transform:translateX(-50%) rotate(300deg)}
.t-vault.is-open .l1{transform:rotateY(110deg);transition-delay:.5s}
/* 09 спорт: рольставня стадиона */
.t-shutter .l1{transform-origin:top center;transition-duration:.8s;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 2px,transparent 2px 14px)!important}
.t-shutter .deco{left:50%;bottom:44px;transform:translateX(-50%);width:40px;height:8px;border-radius:4px;background:#ddd}
.t-shutter.is-open .l1{transform:scaleY(.03)}
/* 10 треш: дверь вышибают */
.t-kick .l1{transform-origin:bottom center}
.t-kick .deco{left:-20%;right:-20%;top:40%;height:22px;transform:rotate(-24deg);background:repeating-linear-gradient(45deg,#ddd 0 10px,#0b0b0b 10px 20px)}
.t-kick.is-open .l1{animation:kick 1s cubic-bezier(.5,0,.6,1) forwards}
@keyframes kick{0%{transform:none}12%{transform:translateX(-5px) rotate(-3deg)}24%{transform:translateX(5px) rotate(3deg)}36%{transform:rotate(-2deg)}100%{transform:translateY(118%) rotate(16deg)}}
/* 11 русская: резные ставни наружу */
.t-shutters .l1{right:50%;transform-origin:left center}
.t-shutters .l2{left:50%;transform-origin:right center}
.t-shutters .l1::before,.t-shutters .l2::before{content:"";position:absolute;left:50%;top:30%;width:36px;height:36px;transform:translateX(-50%) rotate(45deg);border:2px solid #ddd;box-shadow:inset 0 0 0 6px #0b0b0b,inset 0 0 0 8px #ddd}
.t-shutters.is-open .l1{transform:rotateY(-112deg)}
.t-shutters.is-open .l2{transform:rotateY(112deg)}
/* 12: «твоя дверь» — призыв */
.door.mine{cursor:default;border-style:dashed;border-color:var(--line2);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:12px;background:rgba(10,10,10,.6)}
.door.mine b{font-family:var(--h);font-weight:700;font-size:16px;line-height:1.15}
.door.mine p{font-size:13px;line-height:1.45;color:var(--g6)}
.door.mine p{font-size:12px}
.door.mine .btn{height:40px;font-size:13px;padding:0 12px}

@media (max-width:960px){
  .rv-head{flex-direction:column;align-items:flex-start}
  .rv-card{padding:12px;border-radius:20px}
  .doors{gap:10px}
  .rv-card{min-height:600px}
  .rv-head{flex-direction:row;align-items:flex-end}}
@media (max-width:560px){.rv-head .ps-nav{display:none}
}
/* ---------- БЛОК 5: СТОИМОСТЬ (от 18 000 + что можно добавить) ---------- */
.cost{padding:clamp(56px,7vw,96px) var(--pad);border-top:1px solid var(--line)}
.cost-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:20px;border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--g1)}
.cost-l{padding:clamp(8px,1.5vw,20px) clamp(4px,1vw,12px)}
.cost-l .h2{font-size:clamp(28px,3.4vw,48px)}
.from{display:flex;align-items:baseline;gap:12px;margin-top:18px}
.from span{font-size:clamp(18px,1.6vw,22px);color:var(--g6)}
.from b{font-family:var(--h);font-weight:800;font-size:clamp(48px,6vw,84px);line-height:1}
.cost-l .lead{margin-top:14px}
.base{margin-top:22px;padding:16px 18px;border:1px solid var(--line2);border-radius:16px}
.base .t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g6);margin-bottom:10px}
.base ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.base li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.4}
.base li svg{width:18px;height:18px}
.cost-r{border:1px solid var(--line);border-radius:18px;background:var(--g2);padding:20px}
.cost-r .step-lbl{margin-bottom:4px}
.cost-r .hint{font-size:13px;color:var(--g6);margin-bottom:14px}
.adds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.add{position:relative;display:flex;align-items:center;min-height:58px;padding:12px 38px 12px 12px;text-align:left;border:1px solid var(--line2);border-radius:14px;background:var(--g1);transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}
.add:hover{border-color:var(--white)}
.add b{font-family:var(--h);font-weight:600;font-size:14.5px;line-height:1.25}
.add small{font-size:12px;line-height:1.35;color:var(--g6)}
.add .ck{position:absolute;right:10px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--g5);display:grid;place-items:center}
.add .ck svg{width:14px;height:14px;opacity:0}
.add.on{background:var(--white);color:var(--black);border-color:var(--white)}
.add.on small{color:var(--g4)}
.add.on .ck{background:var(--black);border-color:var(--black);color:var(--white)}
.add.on .ck svg{opacity:1}
.cost-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:16px;font-size:14px;color:var(--g7)}
.cost-sum b{color:var(--white);font-weight:600}
.cost-sum button{text-decoration:underline;text-underline-offset:3px;color:var(--g6);font-size:13px}
#costGet{margin-top:12px;width:100%;height:56px;font-size:16px}
.cost-r .micro{font-size:13px;color:var(--g6);margin-top:8px;text-align:center}
@media (max-width:1100px){.adds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .cost-card{grid-template-columns:minmax(0,1fr);padding:12px;border-radius:20px}
  .cost-r{padding:16px 14px}
}
@media (max-width:420px){.add{min-height:54px;padding-right:34px}.add b{font-size:13.5px}}
/* ---------- БЛОК 6: ВОПРОСЫ — ЧАТ С АДМИНИСТРАТОРОМ ---------- */
.faq{padding:clamp(56px,7vw,96px) var(--pad);border-top:1px solid var(--line)}
.faq-card{border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--g1)}
.faq-head{padding:clamp(8px,1.5vw,20px) clamp(4px,1vw,12px) 8px}
.faq-head .h2{font-size:clamp(28px,3.4vw,48px);max-width:820px}
.faq-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:stretch}
.chat{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:18px;background:var(--black);overflow:hidden;min-height:520px}
.chat-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--g2)}
.ava{flex:0 0 40px;height:40px;border-radius:50%;border:1px dashed var(--line2);background:var(--g3);display:grid;place-items:center;font-size:10px;color:var(--g6)}
.chat-top b{display:block;font-family:var(--h);font-weight:600;font-size:15px}
.chat-top small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--g6)}
.online-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth;max-height:420px}
.bub{max-width:82%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.45;animation:bubIn .25s ease}
.bub.adm{align-self:flex-start;background:var(--g2);border:1px solid var(--line);border-bottom-left-radius:5px}
.bub.me{align-self:flex-end;background:var(--white);color:var(--black);border-bottom-right-radius:5px}
.bub.typing{display:flex;gap:4px;padding:13px 14px}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:var(--g6);animation:dotty 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes dotty{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes bubIn{from{opacity:0;transform:translateY(6px)}}
.quick{border-top:1px solid var(--line);padding:12px;display:flex;flex-wrap:wrap;gap:6px;background:var(--g1)}
.quick .ql{width:100%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g6);margin-bottom:2px}
.qb{padding:8px 12px;border-radius:999px;border:1px solid var(--line2);font-size:13.5px;text-align:left;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}
.qb:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.qb.done{opacity:.4}
.side{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--g2)}
.side .ava{width:72px;height:72px;flex:none}
.side h3{font-family:var(--h);font-weight:700;font-size:22px;line-height:1.15}
.side p{font-size:14.5px;line-height:1.5;color:var(--g7)}
.side .btn{width:100%;height:54px;margin-top:auto}
.reach{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reach .msg{width:46px;height:46px}
.on-lbl{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--g7)}

/* ---------- БЛОК 7: CTA + КАРТА ---------- */
.fin{padding:clamp(56px,7vw,96px) var(--pad) clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.fin-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--g1)}
.fin-l{padding:clamp(24px,3vw,44px)}
.fin-l .h2{font-size:clamp(30px,3.6vw,52px)}
.fin-list{list-style:none;margin-top:24px;border-top:1px solid var(--line)}
.fin-list li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.fin-list li span{color:var(--g6);font-size:13px;padding-top:2px}
.fin-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.fin-cta .btn{height:56px;padding:0 28px;font-size:16px}
.map{position:relative;min-height:460px;background:var(--g2)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.map .ph{position:absolute;left:12px;top:12px;z-index:1;font-size:11px;letter-spacing:.12em;color:var(--g6);padding:6px 9px;border:1px dashed var(--line2);border-radius:8px;background:rgba(10,10,10,.75);pointer-events:none}
/* ---------- ПОДВАЛ ---------- */
section[id]{scroll-margin-top:72px}
.foot{border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) var(--pad) 28px;background:var(--black)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px}
.foot .logo{margin:0}
.foot-about{font-size:14px;line-height:1.55;color:var(--g6);margin-top:14px;max-width:300px}
.foot h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g6);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot li{font-size:14.5px;line-height:1.45;color:var(--g7)}
.foot li a:hover{color:var(--white)}
.foot li small{display:block;font-size:12px;color:var(--g5)}
.foot .reach{margin-top:4px}
.foot .reach .msg{width:42px;height:42px}
.foot-cta .btn{margin-top:16px;height:48px;width:100%}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px 32px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--g5)}
.foot-legal{display:flex;flex-direction:column;gap:2px}
.foot-legal a{color:var(--g6);text-decoration:underline;text-underline-offset:3px}
.foot-legal a:hover{color:var(--white)}
.foot-dev{display:flex;flex-direction:column;gap:2px;text-align:right}
.foot-dev a{color:var(--g7);text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:560px){.foot-top{grid-template-columns:minmax(0,1fr);gap:28px}.foot-dev{text-align:left}}

/* ---------- ПОПАП «КАК С ВАМИ СВЯЗАТЬСЯ» ---------- */
.pop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.pop[hidden]{display:none}
.pop-bg{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);animation:fadeIn .2s ease}
.pop-box{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:26px 22px 22px;border:1px solid var(--line2);border-radius:22px;background:var(--g1);animation:popIn .25s ease}
@keyframes fadeIn{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
.pop-x{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--g6)}
.pop-x:hover{background:var(--g3);color:var(--white)}
.pop-x svg{width:18px;height:18px}
.pop h3{font-family:var(--h);font-weight:700;font-size:24px;line-height:1.15;padding-right:36px}
.pop .sub{font-size:14.5px;line-height:1.45;color:var(--g7);margin-top:8px}
.pop .sum{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--g2);font-size:13px;line-height:1.45;color:var(--g6)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin-top:18px;border:1px solid var(--line2);border-radius:999px}
.tabs button{height:40px;border-radius:999px;font-family:var(--h);font-weight:600;font-size:14px;color:var(--g7)}
.tabs button.on{background:var(--white);color:var(--black)}
.pop form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.pop label.f{font-size:13px;color:var(--g6)}
.pop input[type=tel],.pop input[type=text]{width:100%;height:52px;margin-top:6px;padding:0 16px;border-radius:14px;border:1px solid var(--line2);background:var(--black);color:var(--white);font:inherit;font-size:16px}
.pop input:focus{outline:none;border-color:var(--white)}
.consent{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:12px;line-height:1.45;color:var(--g6)}
.consent input{width:18px;height:18px;margin-top:1px;accent-color:#fff}
.consent a{color:var(--g7);text-decoration:underline}
.pop form .btn{height:54px;font-size:16px}
.or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;font-size:13px;color:var(--g6)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pop .reach{justify-content:center}
.pop-ok{padding:24px 0 6px;text-align:center}
.pop-ok .ck{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--white);color:var(--black);display:grid;place-items:center}
.pop-ok .ck svg{width:30px;height:30px}
.pop-ok b{display:block;font-family:var(--h);font-weight:700;font-size:22px}
.pop-ok p{font-size:14.5px;color:var(--g7);margin-top:8px}
.pop-ok small{display:block;font-size:12px;color:var(--g5);margin-top:12px}
body.pop-open{overflow:hidden}

@media (max-width:960px){
  .faq-card{padding:12px;border-radius:20px}
  .faq-body{grid-template-columns:minmax(0,1fr)}
  .chat{min-height:0}
  .msgs{max-height:380px;min-height:300px}
  .fin-card{grid-template-columns:minmax(0,1fr)}
  .map{min-height:340px}
}
@media (max-width:560px){
  .fin-list li{grid-template-columns:minmax(0,1fr);gap:2px}
  .fin-cta .btn{width:100%}
  .bub{max-width:90%;font-size:14px}
}
/* ---------- БЕГУЩАЯ СТРОКА ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--black);padding:18px 0}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding-right:clamp(18px,2.4vw,36px);font-family:var(--h);font-weight:700;font-size:clamp(22px,3vw,40px);text-transform:uppercase;white-space:nowrap}
.ticker-track svg{width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px);color:var(--g5)}
@keyframes tick{to{transform:translateX(-50%)}}
/* ---------- БЛОК: ТРИ ЗАЛА ---------- */
.halls{padding:clamp(56px,7vw,96px) var(--pad);border-top:1px solid var(--line)}
.halls-card{border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--g1)}
.halls-head{padding:clamp(8px,1.5vw,20px) clamp(4px,1vw,12px) 8px}
.halls-head .h2{font-size:clamp(28px,3.4vw,48px)}
.halls-head .lead{margin-top:12px}
.hall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.hall{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:var(--g2)}
.hall-ph{position:relative;aspect-ratio:4/3;background:radial-gradient(80% 90% at 50% 40%,#2c2c2c,#161616)}
.hall-ph svg{position:absolute;inset:0;width:100%;height:100%;opacity:.08}
.hall-ph{overflow:hidden}
.hall-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);background-size:250% 100%;animation:hallSweep 3.5s linear infinite}
@keyframes hallSweep{from{background-position:120% 0}to{background-position:-120% 0}}
.hall-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.12)}
.hall-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;background:var(--white);animation:hallLoop 8s linear infinite}
@keyframes hallLoop{from{width:0}to{width:100%}}
.hall:nth-child(2) .hall-bar::after{animation-delay:-2.7s}
.hall:nth-child(3) .hall-bar::after{animation-delay:-5.3s}
.hall-ph span{z-index:1;position:absolute;left:12px;top:12px;font-size:11px;letter-spacing:.12em;color:var(--g6);padding:5px 8px;border:1px dashed var(--line2);border-radius:8px;background:rgba(10,10,10,.5)}
.hall-in{padding:18px 18px 20px}
.hall h3{font-family:var(--h);font-weight:800;font-size:clamp(20px,1.8vw,24px);text-transform:uppercase;line-height:1.1}
.hall .for{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--g6);margin-top:6px}
.hall ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.hall li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;font-size:15px;line-height:1.4;color:var(--g7)}
.hall li::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--white)}
.halls-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;padding:16px;border:1px solid var(--line2);border-radius:999px;font-family:var(--h);font-weight:600;font-size:clamp(14px,1.4vw,17px);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.halls-foot svg{flex:0 0 16px;width:16px;height:16px;color:var(--g6)}
@media (max-width:960px){
  .halls-card{padding:12px;border-radius:20px}
  .hall-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px}
  .hall-grid::-webkit-scrollbar{display:none}
  .hall{flex:0 0 min(82%,320px);scroll-snap-align:start}
  .halls-foot{border-radius:16px}
}
/* ---------- ЯРЛЫК ПРОМО-ВИДЕО (после блока «Пространство») ---------- */
.vchip{position:fixed;right:16px;bottom:16px;z-index:60;width:136px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line2);
  background:#121212;box-shadow:0 12px 40px rgba(0,0,0,.6);cursor:pointer;opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:opacity .25s,transform .25s}
.vchip.show{opacity:1;transform:none;pointer-events:auto}
.vchip .pat{position:absolute;inset:0;opacity:.6}
.vchip .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:var(--white);color:var(--black);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(255,255,255,.1);animation:chipPulse 2.4s ease-in-out infinite}
.vchip .pl svg{width:14px;height:14px;margin-left:2px}
@keyframes chipPulse{50%{box-shadow:0 0 0 11px rgba(255,255,255,.04)}}
.vchip .x{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:rgba(10,10,10,.75);display:grid;place-items:center;color:var(--g7)}
.vchip .x:hover{color:var(--white)}
.vchip .x svg{width:10px;height:10px}
.vghost{position:fixed;z-index:61;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#121212;pointer-events:none}
.vghost .pat{position:absolute;inset:0;opacity:.6}
.vlb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.vlb[hidden]{display:none}
.vlb-bg{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px);animation:fadeIn .2s ease}
.vlb-box{position:relative;width:min(1100px,100%);animation:popIn .25s ease}
.vlb-x{position:absolute;right:0;top:-48px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--g7);background:var(--g2)}
.vlb-x:hover{color:var(--white)}
.vlb-x svg{width:18px;height:18px}
@media (max-width:560px){.vchip{width:104px;right:12px;bottom:12px}.vchip .pl{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}

/* ========================================================================== 
   SPECTRUM EDITION
   Визуальный слой поверх исходной структуры. Все компоненты наследуют один
   режимный акцент, который JavaScript обновляет при переключении режима.
   ========================================================================== */

html {
  color-scheme: dark;
  scrollbar-color: var(--violet) var(--black);
}

body {
  position: relative;
  isolation: isolate;
  min-width: 320px;
  background:
    radial-gradient(circle at 8% 18%, rgba(240, 91, 229, .1), transparent 28rem),
    radial-gradient(circle at 92% 42%, rgba(82, 217, 234, .08), transparent 32rem),
    var(--black);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(480px circle at var(--pointer-x) var(--pointer-y), color-mix(in srgb, var(--mode-accent) 12%, transparent), transparent 68%),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

::selection {
  color: var(--black);
  background: var(--cyan);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.h2 {
  max-width: 980px;
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lead {
  color: var(--g6);
}

.eyebrow,
.geo,
.base .t,
.quick .ql,
.foot h4 {
  color: var(--cyan);
}

.btn,
.msg,
.arr,
.qb,
.add,
.pk,
.thumb,
.dot {
  -webkit-tap-highlight-color: transparent;
}

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  transition:
    transform .25s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s ease,
    background-color .25s ease,
    border-color .25s ease;
}

.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180%;
  left: -30%;
  width: 24%;
  height: 460%;
  opacity: 0;
  transform: rotate(28deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transition: left .65s ease, opacity .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:hover::after {
  left: 115%;
  opacity: .55;
}

.btn-solid {
  color: #050712;
  background:
    linear-gradient(110deg, #ffffff 0%, #dfe8ff 42%, #c8fff0 100%) padding-box,
    var(--spectrum) border-box;
  box-shadow:
    0 12px 34px color-mix(in srgb, var(--mode-accent) 18%, transparent),
    inset 0 1px 0 #fff;
}

.btn-solid:hover {
  background:
    linear-gradient(110deg, #ffffff 0%, #e6ddff 44%, #d8ffd0 100%) padding-box,
    var(--spectrum) border-box;
  box-shadow:
    0 16px 44px color-mix(in srgb, var(--mode-accent) 27%, transparent),
    inset 0 1px 0 #fff;
}

.btn-line {
  color: var(--white);
  background:
    linear-gradient(rgba(5, 7, 17, .82), rgba(5, 7, 17, .82)) padding-box,
    var(--spectrum) border-box;
  box-shadow: 0 0 28px color-mix(in srgb, var(--mode-accent) 12%, transparent);
}

.btn-line:hover {
  background:
    linear-gradient(rgba(19, 22, 40, .94), rgba(19, 22, 40, .94)) padding-box,
    var(--spectrum) border-box;
}

/* ---------- НАВИГАЦИЯ ---------- */

.nav {
  margin: 10px var(--pad) 0;
  padding: 9px 10px 9px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(4, 5, 13, .5), rgba(4, 5, 13, .5)) padding-box,
    linear-gradient(110deg, rgba(240, 91, 229, .28), rgba(82, 217, 234, .16), rgba(126, 234, 80, .24)) border-box;
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 14px 50px rgba(0, 0, 0, .18);
}

.nav.solid {
  border-color: transparent;
  background:
    linear-gradient(rgba(4, 5, 13, .88), rgba(4, 5, 13, .88)) padding-box,
    var(--spectrum) border-box;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
}

.logo-mark {
  border-color: transparent;
  color: var(--white);
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    conic-gradient(from 20deg, var(--pink), var(--blue), var(--cyan), var(--lime), var(--pink)) border-box;
  box-shadow:
    inset 0 0 22px color-mix(in srgb, var(--mode-accent) 16%, transparent),
    0 0 24px color-mix(in srgb, var(--mode-accent) 16%, transparent);
}

.logo-mark svg {
  filter: drop-shadow(0 0 5px currentColor);
}

.logo-word {
  color: var(--white);
  letter-spacing: .045em;
}

.msg,
.arr {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(12px);
}

.msg:hover,
.arr:hover {
  color: var(--black);
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  box-shadow: 0 0 24px color-mix(in srgb, var(--mode-accent) 30%, transparent);
  transform: translateY(-2px);
}

/* ---------- HERO ---------- */

.hero {
  min-height: max(100svh, 780px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.bg {
  overflow: hidden;
  background: var(--black);
}

.layer {
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 44%, color-mix(in srgb, var(--mode-accent) 18%, transparent), transparent 32%),
    linear-gradient(110deg, var(--black) 0%, var(--tone) 58%, var(--black) 100%);
}

.layer::before {
  content: "";
  position: absolute;
  inset: -3% -2% -3% 38%;
  background-image:
    linear-gradient(90deg, var(--black) 0%, transparent 36%),
    linear-gradient(0deg, var(--black) 0%, transparent 30%),
    var(--scene);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(1.18) contrast(1.04);
  transform: scale(1.05);
  transform-origin: center;
  transition: transform .25s ease-out;
}

.layer::after {
  content: "";
  position: absolute;
  right: -12vw;
  top: -26vw;
  width: min(68vw, 980px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 40%, transparent);
  border-radius: 50%;
  opacity: .34;
  box-shadow:
    0 0 0 5vw color-mix(in srgb, var(--mode-accent) 4%, transparent),
    0 0 0 10vw color-mix(in srgb, var(--mode-accent) 3%, transparent),
    0 0 90px color-mix(in srgb, var(--mode-accent) 24%, transparent);
}

.layer .pat {
  z-index: 1;
  opacity: .13;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, black, transparent 38%, black 82%);
}

.layer .glow {
  z-index: 1;
  background:
    radial-gradient(circle at 68% 48%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 42%),
    radial-gradient(circle at 20% 70%, rgba(240, 91, 229, .13), transparent 30%);
}

.ph-cross,
.layer .ph-label {
  display: none;
}

.shade {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, .98) 0%, rgba(3, 4, 10, .86) 34%, rgba(3, 4, 10, .2) 63%, rgba(3, 4, 10, .05) 100%),
    linear-gradient(0deg, rgba(3, 4, 10, .96) 0%, transparent 42%),
    linear-gradient(180deg, rgba(3, 4, 10, .45), transparent 26%);
}

.hero-in {
  grid-template-columns: minmax(0, .96fr) minmax(440px, 1.04fr);
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 132px;
  padding-bottom: 42px;
}

.left {
  position: relative;
  z-index: 3;
}

.geo {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(8, 10, 22, .48);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .14em;
}

h1 {
  width: min-content;
  max-width: 100%;
  font-size: clamp(50px, 7vw, 108px);
  letter-spacing: -.055em;
  line-height: .86;
  color: transparent;
  background: linear-gradient(
    105deg,
    var(--mode-accent) 0%,
    var(--mode-accent-2) 58%,
    var(--mode-accent) 100%
  );
  background-size: 220% 220%;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--mode-accent) 12%, transparent));
  animation: spectrumFlow 11s ease-in-out infinite alternate;
}

.sub {
  max-width: 560px;
  color: var(--white);
  text-wrap: balance;
}

.offer {
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(rgba(8, 10, 22, .78), rgba(8, 10, 22, .78)) padding-box,
    linear-gradient(110deg, color-mix(in srgb, var(--mode-accent) 85%, var(--pink)), rgba(255, 255, 255, .08)) border-box;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .24);
}

.offer-ic {
  color: var(--black);
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  box-shadow: 0 0 20px color-mix(in srgb, var(--mode-accent) 34%, transparent);
}

.badge {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(8, 10, 22, .56);
  backdrop-filter: blur(12px);
}

.badge svg {
  color: var(--mode-accent);
  filter: drop-shadow(0 0 6px currentColor);
}

.quiz-toggle {
  min-height: 60px;
}

.quiz-card {
  border-color: transparent;
  background:
    linear-gradient(rgba(7, 9, 20, .94), rgba(7, 9, 20, .94)) padding-box,
    var(--spectrum) border-box;
  box-shadow: var(--shadow);
}

.q-dots span.on,
.q-opt:hover {
  background: var(--mode-accent);
}

.q-res-mode {
  color: transparent;
  background: var(--spectrum);
  background-clip: text;
  -webkit-background-clip: text;
}

.right {
  position: relative;
  z-index: 3;
}

.modes {
  position: relative;
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(rgba(7, 9, 20, .7), rgba(7, 9, 20, .7)) padding-box,
    linear-gradient(115deg, rgba(240, 91, 229, .52), rgba(82, 217, 234, .38), rgba(126, 234, 80, .5)) border-box;
  backdrop-filter: blur(22px) saturate(135%);
  box-shadow: var(--shadow);
}

.modes::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: .16;
  background: var(--mode-accent);
  filter: blur(26px);
}

.now-name small {
  color: var(--cyan);
}

.now-name span {
  text-shadow: 0 0 18px color-mix(in srgb, var(--mode-accent) 30%, transparent);
}

.thumb {
  opacity: .6;
}

.thumb .pic {
  height: 84px;
  border-color: rgba(255, 255, 255, .14);
  background: var(--tone);
}

.thumb .pic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(0deg, rgba(3, 4, 10, .8), transparent 62%),
    var(--scene);
  background-position: center;
  background-size: cover;
  filter: saturate(1.12);
}

.thumb .pic i,
.thumb .pic em {
  z-index: 1;
}

.thumb .pic i {
  opacity: .13;
  mix-blend-mode: screen;
}

.thumb .pic em {
  color: rgba(255, 255, 255, .72);
}

.thumb.on .pic {
  border-color: var(--mode-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mode-accent) 24%, transparent),
    0 0 24px color-mix(in srgb, var(--mode-accent) 24%, transparent);
}

.wave {
  border-color: color-mix(in srgb, var(--mode-accent) 82%, white);
  box-shadow:
    0 0 32px var(--mode-accent),
    inset 0 0 28px color-mix(in srgb, var(--mode-accent) 22%, transparent);
}

@keyframes spectrumFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---------- ОБЩИЙ РИТМ СЕКЦИЙ ---------- */

.how,
.halls,
.space,
.rv,
.cost,
.faq,
.fin {
  overflow: hidden;
  border-top-color: rgba(255, 255, 255, .07);
  background:
    radial-gradient(circle at 6% 10%, rgba(240, 91, 229, .07), transparent 25rem),
    radial-gradient(circle at 94% 88%, rgba(82, 217, 234, .06), transparent 28rem);
}

.halls,
.rv,
.faq {
  background:
    radial-gradient(circle at 88% 12%, rgba(126, 234, 80, .055), transparent 24rem),
    radial-gradient(circle at 9% 74%, rgba(163, 108, 255, .075), transparent 30rem),
    rgba(4, 5, 13, .35);
}

.motion-ready .console,
.motion-ready .halls-card,
.motion-ready .sp-card,
.motion-ready .rv-card,
.motion-ready .cost-card,
.motion-ready .faq-card,
.motion-ready .fin-card {
  opacity: 0;
  transform: translateY(42px) scale(.985);
  transition:
    opacity .75s ease,
    transform .9s cubic-bezier(.2, .8, .2, 1);
}

.motion-ready .is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- КОНСОЛЬ ПЕРЕКЛЮЧЕНИЯ ---------- */

.console,
.halls-card,
.sp-card,
.rv-card,
.cost-card,
.faq-card,
.fin-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(125deg, rgba(240, 91, 229, .36), rgba(82, 217, 234, .15) 48%, rgba(126, 234, 80, .34)) border-box;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(125%);
}

.console {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px);
  border-radius: 32px;
}

.console::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 26%, transparent);
  box-shadow:
    0 0 0 34px color-mix(in srgb, var(--mode-accent) 3%, transparent),
    0 0 0 68px color-mix(in srgb, var(--mode-accent) 2%, transparent);
  pointer-events: none;
}

.modebar {
  position: relative;
  z-index: 1;
}

.modebar .h2,
.halls-head .h2,
.sp-head .h2,
.rv-head .h2,
.cost-l .h2,
.faq-head .h2,
.fin-l .h2 {
  color: transparent;
  background: var(--spectrum);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

.stage-wrap {
  border-color: rgba(255, 255, 255, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--mode-accent) 12%, transparent), transparent 50%),
    #050711;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, .46),
    0 0 40px color-mix(in srgb, var(--mode-accent) 9%, transparent);
}

.stage-top {
  background: rgba(7, 9, 20, .76);
  color: var(--g6);
}

.stage-top b {
  color: var(--mode-accent);
}

.room {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--mode-accent) 15%, transparent));
}

.panel {
  position: relative;
  padding: clamp(4px, 1vw, 12px);
}

.step-lbl {
  letter-spacing: -.015em;
}

.step-lbl small,
.ps-lbl small,
.micro {
  color: var(--g6);
}

.agesw {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(2, 3, 9, .42);
}

.agesw button.on,
.tabs button.on {
  color: #050712;
  background: linear-gradient(110deg, var(--cyan), var(--lime));
  box-shadow: 0 0 24px color-mix(in srgb, var(--mode-accent) 24%, transparent);
}

.dot {
  border-color: rgba(255, 255, 255, .16);
  background-color: var(--tone);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .05);
}

.dot.on {
  box-shadow:
    0 0 0 2px var(--black),
    0 0 0 4px var(--mode-accent),
    0 0 22px color-mix(in srgb, var(--mode-accent) 46%, transparent);
}

.dot:disabled {
  cursor: not-allowed;
}

.ps {
  border-top-color: rgba(255, 255, 255, .1);
}

.pk {
  overflow: hidden;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .035);
}

.pk.pick:hover {
  border-color: var(--mode-accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--mode-accent) 15%, transparent);
}

.pk.pick.on {
  color: var(--white);
  border-color: transparent;
  background:
    linear-gradient(rgba(10, 13, 27, .95), rgba(10, 13, 27, .95)) padding-box,
    var(--spectrum) border-box;
}

.pk.pick.on small {
  color: var(--cyan);
}

/* ---------- ТРИ ЗАЛА ---------- */

.halls-card {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px);
  border-radius: 32px;
}

.halls-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}

.halls-head .lead {
  max-width: 430px;
  margin: 0;
  text-align: right;
}

.hall-grid {
  gap: 18px;
}

.hall {
  --hall-accent: var(--pink);
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --spot-x: 50%;
  --spot-y: 36%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(rgba(9, 11, 24, .96), rgba(9, 11, 24, .96)) padding-box,
    linear-gradient(145deg, var(--hall-accent), rgba(255, 255, 255, .08) 42%, color-mix(in srgb, var(--hall-accent) 38%, var(--cyan))) border-box;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .28);
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .2s ease, box-shadow .3s ease;
}

.hall:nth-child(2) {
  --hall-accent: var(--cyan);
}

.hall:nth-child(3) {
  --hall-accent: var(--lime);
}

.hall::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(280px circle at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--hall-accent) 18%, transparent), transparent 65%);
  transition: opacity .25s ease;
}

.hall:hover {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .38),
    0 0 34px color-mix(in srgb, var(--hall-accent) 16%, transparent);
}

.hall:hover::before {
  opacity: 1;
}

.hall-ph {
  aspect-ratio: 4 / 3.7;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hall:nth-child(1) .hall-ph {
  background-image:
    linear-gradient(0deg, rgba(5, 6, 15, .78), transparent 45%),
    url("./media/hall-banquet.webp");
}

.hall:nth-child(2) .hall-ph {
  background-image:
    linear-gradient(0deg, rgba(5, 6, 15, .78), transparent 45%),
    url("./media/hall-game.webp");
}

.hall:nth-child(3) .hall-ph {
  background-image:
    linear-gradient(0deg, rgba(5, 6, 15, .78), transparent 45%),
    url("./media/hall-dopamine.webp");
}

.hall-ph svg {
  display: none;
}

.hall-ph::after {
  background: linear-gradient(105deg, transparent 26%, rgba(255, 255, 255, .13) 50%, transparent 74%);
  background-size: 260% 100%;
}

.hall-ph span {
  top: 14px;
  left: 14px;
  color: var(--white);
  border: 1px solid color-mix(in srgb, var(--hall-accent) 58%, transparent);
  background: rgba(4, 5, 13, .66);
  backdrop-filter: blur(12px);
}

.hall-bar {
  height: 2px;
  background: color-mix(in srgb, var(--hall-accent) 18%, transparent);
}

.hall-bar::after {
  background: linear-gradient(90deg, transparent, var(--hall-accent), var(--white), var(--hall-accent), transparent);
  box-shadow: 0 0 14px var(--hall-accent);
}

.hall-in {
  position: relative;
  z-index: 2;
  transform: translateZ(18px);
}

.hall h3 {
  color: transparent;
  background: linear-gradient(100deg, var(--hall-accent), var(--white));
  background-clip: text;
  -webkit-background-clip: text;
}

.hall li::before {
  background: var(--hall-accent);
  box-shadow: 0 0 8px var(--hall-accent);
}

.halls-foot {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(6, 8, 18, .8), rgba(6, 8, 18, .8)) padding-box,
    var(--spectrum) border-box;
}

.halls-foot svg {
  color: var(--mode-accent);
  filter: drop-shadow(0 0 6px currentColor);
  animation: starPulse 2.8s ease-in-out infinite;
}

/* ---------- ПРОСТРАНСТВО / ВИДЕОПОРТАЛ ---------- */

.sp-card {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px);
  border-radius: 32px;
}

.vid-slot {
  max-width: 1040px;
}

.vid {
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    var(--spectrum) border-box;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .46),
    0 0 46px color-mix(in srgb, var(--mode-accent) 14%, transparent);
}

.vid .pat,
.vchip .pat,
.vghost .pat {
  opacity: 1;
  background-image:
    linear-gradient(90deg, rgba(3, 4, 10, .12), rgba(3, 4, 10, .02)),
    linear-gradient(0deg, rgba(3, 4, 10, .72), transparent 55%),
    url("./media/space-collage.webp") !important;
  background-position: center !important;
  background-size: cover !important;
  filter: saturate(1.16) contrast(1.04);
}

.vid::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 42%, rgba(3, 4, 10, .68));
}

.vid .cross {
  display: none;
}

.vid-top,
.vid-play,
.vid-bar {
  z-index: 2;
}

.vid-top span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(4, 5, 13, .56);
  backdrop-filter: blur(12px);
}

.vid-play {
  color: var(--black);
  border: 1px solid rgba(255, 255, 255, .75);
  background: linear-gradient(135deg, var(--pink), var(--cyan), var(--lime));
  box-shadow:
    0 0 0 10px rgba(255, 255, 255, .06),
    0 0 42px color-mix(in srgb, var(--mode-accent) 58%, transparent);
}

.vid-track {
  cursor: pointer;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}

.vid-fill {
  background: var(--spectrum);
  box-shadow: 0 0 12px var(--mode-accent);
}

@keyframes starPulse {
  50% {
    transform: scale(1.28) rotate(45deg);
    filter: drop-shadow(0 0 12px currentColor);
  }
}

/* ---------- ОТЗЫВЫ / ДВЕРИ РЕЖИМОВ ---------- */

.rv-card {
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 32px;
  background:
    linear-gradient(rgba(5, 7, 16, .72), rgba(5, 7, 16, .9)) padding-box,
    linear-gradient(125deg, rgba(240, 91, 229, .4), rgba(82, 217, 234, .15), rgba(126, 234, 80, .34)) border-box;
}

.rv-bg {
  opacity: .28;
  background:
    linear-gradient(90deg, rgba(3, 4, 10, .84), transparent 62%),
    url("./media/space-collage.webp") center / cover no-repeat;
  filter: saturate(.86) hue-rotate(8deg);
}

.rv-bg svg,
.rv-bg .ph-label {
  display: none;
}

.rv-shade {
  background:
    linear-gradient(180deg, rgba(3, 4, 10, .24), rgba(3, 4, 10, .96) 74%),
    linear-gradient(90deg, rgba(3, 4, 10, .88), transparent 70%);
}

.door {
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(rgba(6, 8, 18, .94), rgba(6, 8, 18, .94)) padding-box,
    linear-gradient(145deg, var(--mode-accent), rgba(255, 255, 255, .1), var(--pink)) border-box;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .34);
}

.behind {
  background:
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--mode-accent) 13%, transparent), transparent 45%),
    rgba(6, 8, 18, .96);
}

.behind .av,
.ava {
  border: 1px solid transparent;
  background:
    linear-gradient(#11152a, #11152a) padding-box,
    var(--spectrum) border-box;
}

.leaf {
  background-color: var(--tone);
  background-blend-mode: screen;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .36);
}

.plate {
  border-top-color: rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(4, 5, 13, .28), rgba(4, 5, 13, .94));
}

.plate b,
.rtag {
  color: var(--white);
  text-shadow: 0 0 16px color-mix(in srgb, var(--mode-accent) 36%, transparent);
}

.door.mine {
  border-color: transparent;
  background:
    linear-gradient(rgba(7, 9, 20, .84), rgba(7, 9, 20, .84)) padding-box,
    repeating-linear-gradient(115deg, var(--pink) 0 14px, var(--cyan) 14px 28px, var(--lime) 28px 42px) border-box;
}

/* ---------- СТОИМОСТЬ ---------- */

.cost-card {
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 32px;
  padding: clamp(14px, 2vw, 28px);
}

.from b {
  color: transparent;
  background: var(--spectrum);
  background-size: 180% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--mode-accent) 18%, transparent));
  animation: spectrumFlow 10s ease-in-out infinite alternate;
}

.base {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(8, 10, 22, .78), rgba(8, 10, 22, .78)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--mode-accent) 72%, var(--cyan)), rgba(255, 255, 255, .08)) border-box;
}

.base li svg {
  color: var(--lime);
  filter: drop-shadow(0 0 6px currentColor);
}

.cost-r {
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mode-accent) 11%, transparent), transparent 46%),
    rgba(5, 7, 17, .66);
}

.add {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
}

.add:hover {
  border-color: var(--mode-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
}

.add.on {
  color: var(--white);
  border-color: transparent;
  background:
    linear-gradient(rgba(12, 15, 30, .96), rgba(12, 15, 30, .96)) padding-box,
    var(--spectrum) border-box;
  box-shadow: 0 0 24px color-mix(in srgb, var(--mode-accent) 16%, transparent);
}

.add.on .ck {
  color: var(--black);
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
}

.cost-sum b {
  color: var(--cyan);
}

/* ---------- FAQ / ЧАТ ---------- */

.faq-card {
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 32px;
  padding: clamp(14px, 2vw, 28px);
}

.chat {
  border-color: rgba(255, 255, 255, .12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(163, 108, 255, .1), transparent 45%),
    rgba(3, 4, 11, .72);
}

.chat-top,
.quick {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(12, 15, 30, .74);
  backdrop-filter: blur(16px);
}

.online-dot {
  background: var(--lime);
  box-shadow:
    0 0 0 3px rgba(126, 234, 80, .14),
    0 0 12px rgba(126, 234, 80, .55);
}

.bub.adm {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(24, 28, 51, .84);
}

.bub.me {
  color: var(--white);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(10, 13, 27, .94), rgba(10, 13, 27, .94)) padding-box,
    var(--spectrum) border-box;
  box-shadow: 0 0 22px color-mix(in srgb, var(--mode-accent) 10%, transparent);
}

.qb {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .025);
}

.qb:hover {
  color: var(--black);
  border-color: transparent;
  background: linear-gradient(110deg, var(--cyan), var(--lime));
}

.side {
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 91, 229, .18), transparent 48%),
    linear-gradient(rgba(12, 15, 30, .88), rgba(12, 15, 30, .88)) padding-box,
    linear-gradient(135deg, rgba(240, 91, 229, .38), rgba(82, 217, 234, .16), rgba(126, 234, 80, .32)) border-box;
}

.side .ava {
  color: var(--cyan);
  box-shadow: 0 0 28px color-mix(in srgb, var(--mode-accent) 18%, transparent);
}

/* ---------- КОНТАКТЫ И ФУТЕР ---------- */

.fin-card {
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 32px;
}

.fin-list {
  border-top-color: rgba(255, 255, 255, .09);
}

.fin-list li {
  border-bottom-color: rgba(255, 255, 255, .08);
}

.fin-list li span {
  color: var(--cyan);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.map {
  overflow: hidden;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 65%),
    var(--g2);
}

.map::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-left: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 60px rgba(3, 4, 10, .66);
}

.map iframe {
  filter: grayscale(1) invert(.92) hue-rotate(180deg) saturate(.55) contrast(.86) brightness(.72);
}

.map .ph {
  color: var(--cyan);
  border-color: rgba(82, 217, 234, .38);
  background: rgba(3, 4, 10, .78);
}

.foot {
  position: relative;
  overflow: hidden;
  border-top-color: rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 90% 18%, rgba(82, 217, 234, .08), transparent 26rem),
    radial-gradient(circle at 8% 100%, rgba(240, 91, 229, .09), transparent 30rem),
    var(--black);
}

.foot::before {
  content: "";
  position: absolute;
  right: -15vw;
  bottom: -22vw;
  width: min(62vw, 860px);
  aspect-ratio: 1;
  border: 1px solid rgba(82, 217, 234, .16);
  border-radius: 50%;
  box-shadow:
    0 0 0 4vw rgba(163, 108, 255, .025),
    0 0 0 8vw rgba(126, 234, 80, .02),
    0 0 0 12vw rgba(240, 91, 229, .018);
  pointer-events: none;
}

.foot-top,
.foot-bot {
  position: relative;
  z-index: 1;
}

.foot li a:hover,
.foot-dev a:hover,
.foot-legal a:hover {
  color: var(--cyan);
}

/* ---------- ТИКЕР, ПОПАПЫ И ВИДЕОЯРЛЫК ---------- */

.ticker {
  position: relative;
  border-color: rgba(255, 255, 255, .08);
  background:
    linear-gradient(90deg, rgba(240, 91, 229, .07), rgba(82, 217, 234, .045), rgba(126, 234, 80, .07)),
    var(--black);
}

.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 12vw;
  pointer-events: none;
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--black), transparent);
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, var(--black), transparent);
}

.ticker-track span {
  color: transparent;
  background: var(--spectrum);
  background-clip: text;
  -webkit-background-clip: text;
}

.ticker-track svg {
  color: var(--mode-accent);
  filter: drop-shadow(0 0 7px currentColor);
}

@property --ticker-white-flash {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Бегущая лента полностью следует палитре активного режима. В цикле весь
   режимный фон становится белым, а текст и разделители одновременно темнеют. */
.ticker {
  --ticker-white-flash: 0;
  border: 0;
  color: var(--mode-on-accent, #f7f8ff);
  background:
    linear-gradient(
      rgba(255, 255, 255, var(--ticker-white-flash)),
      rgba(255, 255, 255, var(--ticker-white-flash))
    ),
    linear-gradient(
      108deg,
      var(--mode-accent) 0%,
      var(--mode-accent-2) 52%,
      var(--mode-accent) 100%
    );
  animation: tickerModeFlash 1.6s linear infinite;
  transition:
    color .38s ease,
    background .48s ease,
    border-color .38s ease;
}

.ticker::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 94%, transparent), transparent);
  animation: tickerEdgeFlash 1.6s linear infinite;
}

.ticker::after {
  background: linear-gradient(-90deg, color-mix(in srgb, var(--mode-accent) 94%, transparent), transparent);
  animation: tickerEdgeFlash 1.6s linear infinite;
}

.ticker-track span {
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.ticker-icon {
  display: inline-block;
  width: clamp(18px, 1.8vw, 26px);
  height: clamp(18px, 1.8vw, 26px);
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("./media/cake2-fill.svg") center / contain no-repeat;
  mask: url("./media/cake2-fill.svg") center / contain no-repeat;
  filter: none;
  transition: background-color .3s ease;
}

@keyframes tickerModeFlash {
  0%,
  49.99%,
  100% {
    --ticker-white-flash: 0;
    color: var(--mode-on-accent, #f7f8ff);
  }

  50%,
  99.99% {
    --ticker-white-flash: 1;
    color: #071018;
  }
}

@keyframes tickerEdgeFlash {
  0%,
  49.99%,
  100% {
    opacity: 1;
  }

  50%,
  99.99% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker,
  .ticker::before,
  .ticker::after {
    animation: none;
  }
}

/* ========================================================================== */
/* FAQ: ПОЛНОШИРИННОЕ ОКНО АДМИНИСТРАТОРА                                    */
/* ========================================================================== */

.faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7vw, 110px) var(--pad) clamp(94px, 10vw, 150px);
  color: #f7f8fc;
  background: #05070d !important;
}

/* Режимный узор расположен только справа и растворяется к центру блока. */
.faq::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: -5%;
  width: min(58vw, 980px);
  height: 100%;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      circle at 100% 36%,
      transparent 0 24px,
      color-mix(in srgb, var(--mode-accent) 18%, transparent) 25px 27px,
      transparent 28px 54px
    ),
    linear-gradient(
      128deg,
      transparent 5%,
      color-mix(in srgb, var(--mode-accent-2) 8%, transparent) 48%,
      color-mix(in srgb, var(--mode-accent) 20%, transparent) 100%
    );
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 26%, #000 76%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 26%, #000 76%);
  opacity: .82;
  transition: background .55s ease;
}

/* Аналог свечения футера, но цвет поднимается от нижней кромки FAQ. */
.faq::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(105px, 13vw, 180px);
  pointer-events: none;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--mode-accent) 58%, #05070d) 0%,
    color-mix(in srgb, var(--mode-accent-2) 24%, transparent) 44%,
    transparent 100%
  );
  opacity: .78;
  transition: background .58s cubic-bezier(.22, .61, .36, 1);
}

.faq-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.faq-head {
  display: grid;
  gap: 12px;
  padding: 0 0 clamp(24px, 3vw, 40px);
}

.faq-kicker {
  width: max-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mode-accent);
  transition: color .35s ease;
}

.faq-head .h2 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(32px, 4.8vw, 74px);
  line-height: .98;
  color: transparent;
  background: linear-gradient(105deg, #fff 0 28%, var(--mode-accent) 70%, var(--mode-accent-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  transition: background .45s ease;
}

.faq-body {
  display: block;
  margin-top: 0;
}

.chat {
  width: 100%;
  min-height: clamp(520px, 62vh, 720px);
  overflow: hidden;
  color: #11141c;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 48%, #c9ceda);
  border-radius: 12px;
  background: #fff !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 255, 255, .16),
    0 0 46px color-mix(in srgb, var(--mode-accent) 12%, transparent);
  transition:
    min-height .32s cubic-bezier(.2, .8, .2, 1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.chat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 0 8px 0 20px;
  color: #151821;
  border: 0 !important;
  border-bottom: 1px solid #d9dce4 !important;
  background: linear-gradient(180deg, #fafbfc, #eef0f4) !important;
  backdrop-filter: none;
}

.chat-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.chat-title b {
  overflow: hidden;
  font-family: var(--h);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-title small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #626a78;
  font-size: 12px;
  white-space: nowrap;
}

.window-actions {
  display: flex;
  align-self: stretch;
  margin-left: auto;
}

.window-action {
  display: grid;
  width: 48px;
  height: 100%;
  min-height: 56px;
  place-items: center;
  color: #252a35;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 19px;
  line-height: 1;
  transition: color .16s ease, background-color .16s ease;
}

.window-action:hover,
.window-action:focus-visible {
  color: #0a0d13;
  background: color-mix(in srgb, var(--mode-accent) 18%, #edf0f5);
}

.window-action-close:hover,
.window-action-close:focus-visible {
  color: #fff;
  background: #e81123;
}

.chat-workspace {
  display: grid;
  grid-template-columns: minmax(300px, .92fr) minmax(480px, 1.35fr);
  grid-template-rows: minmax(350px, 1fr) auto;
  min-height: clamp(462px, calc(62vh - 58px), 662px);
  background: #fff;
}

.msgs {
  min-height: 350px;
  max-height: none;
  padding: clamp(20px, 2.4vw, 36px);
  gap: 12px;
  color: #171b24;
  border-right: 1px solid #e1e4ea;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--mode-accent) 8%, transparent), transparent 42%),
    #f7f8fa;
}

.bub {
  max-width: 88%;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
}

.bub.adm {
  color: #1b2029;
  border: 1px solid #dfe3e9;
  border-bottom-left-radius: 3px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 23, 35, .06);
}

.bub.me {
  color: var(--mode-on-accent, #071018);
  border: 0;
  border-bottom-right-radius: 3px;
  background: linear-gradient(115deg, var(--mode-accent), var(--mode-accent-2));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--mode-accent) 18%, transparent);
}

.bub.typing i {
  background: var(--mode-accent);
}

.quick {
  align-content: start;
  overflow: auto;
  padding: clamp(20px, 2.4vw, 36px);
  gap: 10px;
  border: 0 !important;
  background: #fff !important;
  backdrop-filter: none;
}

.quick .ql {
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--mode-accent) 78%, #111722);
  font-size: 11px;
  font-weight: 800;
}

.qb {
  flex: 1 1 calc(50% - 6px);
  min-height: 56px;
  padding: 12px 14px;
  color: color-mix(in srgb, var(--mode-accent) 60%, #11151e);
  border: 2px solid color-mix(in srgb, var(--mode-accent) 48%, #d3d7df);
  border-radius: 3px;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  transition: color .18s ease, background .2s ease, border-color .2s ease, transform .18s ease;
}

.qb:hover,
.qb:focus-visible {
  color: var(--mode-on-accent, #071018);
  border-color: transparent;
  background: linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2));
  transform: translateY(-2px);
}

.qb.done {
  opacity: .52;
}

.side {
  grid-column: 1 / -1;
  display: flex;
  min-height: 112px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px clamp(20px, 2.4vw, 36px);
  color: #171b24;
  border: 0;
  border-top: 1px solid #e1e4ea;
  border-radius: 0;
  background: #f2f4f7;
}

.side-label {
  display: block;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--mode-accent) 74%, #151a25);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.side h3 {
  color: #121620;
  font-size: clamp(18px, 1.65vw, 25px);
}

.side p {
  max-width: 700px;
  margin-top: 5px;
  color: #5b6370;
  font-size: 13px;
}

.side-actions,
.reach {
  display: flex;
  align-items: center;
  gap: 10px;
}

.side .msg {
  width: 42px;
  height: 42px;
  color: color-mix(in srgb, var(--mode-accent) 72%, #151a25);
  border: 1px solid color-mix(in srgb, var(--mode-accent) 42%, #cdd2dc);
  background: #fff;
  box-shadow: none;
}

.side .msg:hover,
.side .msg:focus-visible {
  color: var(--mode-on-accent, #071018);
  border-color: transparent;
  background: var(--mode-accent);
}

.on-lbl {
  color: #4f5866;
}

.side .btn {
  width: auto;
  min-width: 220px;
  height: 48px;
  margin-top: 0;
  color: var(--mode-on-accent, #071018);
  border-color: transparent;
  background: linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2));
}

.chat.is-minimized {
  min-height: 0;
}

.chat.is-minimized .chat-workspace {
  display: none;
}

.chat.is-maximized .msgs,
.chat.is-maximized .quick {
  min-height: min(58vh, 610px);
}

.faq-reopen {
  min-height: 52px;
  padding: 0 22px;
  color: var(--mode-on-accent, #071018);
  border: 0;
  border-radius: 3px;
  background: linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2));
  font-family: var(--h);
  font-weight: 700;
}

.faq-reopen:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 980px) {
  .chat-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .msgs {
    min-height: 280px;
    max-height: 390px;
    border-right: 0;
    border-bottom: 1px solid #e1e4ea;
  }

  .quick {
    max-height: none;
  }

  .side {
    grid-column: 1;
  }
}

@media (max-width: 680px) {
  .faq {
    padding-right: 12px;
    padding-left: 12px;
  }

  .faq-head .h2 {
    font-size: clamp(30px, 10vw, 48px);
  }

  .chat-title {
    gap: 8px;
  }

  .chat-title small {
    display: none;
  }

  .window-action {
    width: 42px;
  }

  .qb {
    flex-basis: 100%;
  }

  .side,
  .side-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .side .btn {
    width: 100%;
  }
}

.pop-bg,
.vlb-bg {
  background: rgba(1, 2, 7, .78);
  backdrop-filter: blur(18px) saturate(125%);
}

.pop-box,
.vlb-box .vid {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(8, 10, 22, .96), rgba(8, 10, 22, .96)) padding-box,
    var(--spectrum) border-box;
  box-shadow:
    0 32px 100px rgba(0, 0, 0, .56),
    0 0 54px color-mix(in srgb, var(--mode-accent) 16%, transparent);
}

.pop .sum {
  color: var(--g7);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
}

.tabs {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
}

.pop input[type=tel],
.pop input[type=text] {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(2, 3, 9, .72);
}

.pop input:focus {
  border-color: var(--mode-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-accent) 12%, transparent);
}

.vchip,
.vghost {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    var(--spectrum) border-box;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, .52),
    0 0 28px color-mix(in srgb, var(--mode-accent) 16%, transparent);
}

.vchip .pl {
  color: var(--black);
  background: linear-gradient(135deg, var(--pink), var(--cyan), var(--lime));
}

/* ---------- АДАПТИВНОСТЬ ---------- */

@media (max-width: 1180px) {
  .hero-in {
    grid-template-columns: minmax(0, .88fr) minmax(400px, 1.12fr);
  }

  h1 {
    font-size: clamp(50px, 7.6vw, 88px);
  }

  .modes {
    padding: 15px;
  }
}

@media (max-width: 960px) {
  .nav {
    margin: 8px 12px 0;
  }

  .hero {
    min-height: max(100svh, 980px);
  }

  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding-top: 104px;
  }

  .layer::before {
    inset: 6% -8% 28% 22%;
    opacity: .82;
    background-image:
      linear-gradient(180deg, rgba(3, 4, 10, .16), rgba(3, 4, 10, .92) 78%),
      linear-gradient(90deg, rgba(3, 4, 10, .82), transparent 44%),
      var(--scene);
  }

  .layer::after {
    right: -34vw;
    top: -8vw;
    width: 92vw;
  }

  .shade {
    background:
      linear-gradient(180deg, rgba(3, 4, 10, .42) 0%, rgba(3, 4, 10, .68) 48%, rgba(3, 4, 10, .96) 82%),
      linear-gradient(90deg, rgba(3, 4, 10, .78), transparent 72%);
  }

  .left {
    max-width: 680px;
  }

  .right {
    justify-content: flex-end;
  }

  .modes {
    margin: 0;
  }

  .console,
  .halls-card,
  .sp-card,
  .rv-card,
  .cost-card,
  .faq-card,
  .fin-card {
    border-radius: 24px;
  }

  .console {
    padding: 14px;
  }

  .halls-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .halls-head .lead {
    text-align: left;
  }

  .hall {
    transform: none;
  }

  .hall-ph {
    aspect-ratio: 4 / 3.6;
  }

  .map::after {
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  :root {
    --pad: 14px;
  }

  body::before {
    background-size: auto, 44px 44px, 44px 44px;
  }

  .nav {
    gap: 6px;
    padding: 7px;
  }

  .nav .logo {
    gap: 7px;
  }

  .nav .logo-word {
    max-width: 84px;
    font-size: 10px;
    line-height: 1.08;
  }

  .nav .msg {
    width: 34px;
    height: 34px;
  }

  .nav .msg svg {
    width: 16px;
    height: 16px;
  }

  .nav .btn {
    height: 36px;
    padding: 0 11px;
    font-size: 11px;
  }

  .hero {
    min-height: 1040px;
  }

  .hero-in {
    gap: 34px;
    padding-top: 88px;
    padding-bottom: 24px;
  }

  .layer::before {
    inset: 3% -24% 34% 14%;
    opacity: .68;
  }

  .layer::after {
    right: -58vw;
    top: 8vw;
    width: 132vw;
  }

  .geo {
    margin-bottom: 16px;
    padding: 7px 10px;
    font-size: 10px;
  }

  h1 {
    font-size: clamp(46px, 16vw, 68px);
    line-height: .88;
  }

  .sub {
    margin-top: 16px;
    font-size: 18px;
  }

  .offer {
    align-items: flex-start;
    padding: 10px;
    font-size: 13px;
  }

  .offer-ic {
    flex-basis: 36px;
    height: 36px;
  }

  .badge {
    height: 38px;
    padding: 0 13px;
    font-size: 13px;
  }

  .quiz-wrap {
    margin-top: 20px;
  }

  .quiz-toggle {
    min-height: 54px;
    padding-left: 17px;
    font-size: 13px;
  }

  .modes {
    padding: 13px;
    border-radius: 20px;
  }

  .now {
    align-items: flex-start;
  }

  .now-progs {
    max-width: 210px;
    font-size: 12px;
    line-height: 1.4;
  }

  .thumb .pic {
    height: 72px;
  }

  .how,
  .halls,
  .space,
  .rv,
  .cost,
  .faq,
  .fin {
    padding-right: var(--pad);
    padding-left: var(--pad);
  }

  .h2 {
    overflow-wrap: anywhere;
    font-size: clamp(28px, 9vw, 40px);
    line-height: 1;
  }

  .modebar .h2,
  .halls-head .h2,
  .sp-head .h2,
  .rv-head .h2,
  .cost-l .h2,
  .faq-head .h2,
  .fin-l .h2 {
    font-size: clamp(28px, 9vw, 40px);
  }

  .console,
  .halls-card,
  .sp-card,
  .rv-card,
  .cost-card,
  .faq-card,
  .fin-card {
    border-radius: 20px;
  }

  .console::before {
    display: none;
  }

  .hall {
    flex-basis: min(88%, 332px);
    border-radius: 20px;
  }

  .hall-ph {
    aspect-ratio: 4 / 4.1;
  }

  .hall-in {
    padding: 16px;
  }

  .halls-foot {
    gap: 8px;
    padding: 13px 10px;
    font-size: 11px;
    letter-spacing: .04em;
  }

  .vid {
    border-radius: 18px;
  }

  .vid .pat {
    background-position: 42% center !important;
  }

  .adds {
    grid-template-columns: minmax(0, 1fr);
  }

  .add {
    min-height: 52px;
  }

  .chat,
  .side {
    border-radius: 18px;
  }

  .fin-l {
    padding: 22px 16px;
  }

  .map {
    min-height: 300px;
  }

  .ticker {
    padding: 13px 0;
  }

  .ticker-track span {
    font-size: 20px;
  }
}

@media (hover: none) {
  .hall {
    transform: none !important;
  }

  .btn:hover,
  .msg:hover,
  .arr:hover {
    transform: none;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .nav,
  .modes,
  .offer,
  .console,
  .halls-card,
  .sp-card,
  .rv-card,
  .cost-card,
  .faq-card,
  .fin-card {
    background-color: rgba(7, 9, 20, .96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .console,
  .motion-ready .halls-card,
  .motion-ready .sp-card,
  .motion-ready .rv-card,
  .motion-ready .cost-card,
  .motion-ready .faq-card,
  .motion-ready .fin-card {
    opacity: 1;
    transform: none;
  }

  .layer::before,
  .hall {
    transform: none !important;
  }

  .t-creak.is-open .l1 {
    transform: rotateY(-80deg);
  }

  .t-kick.is-open .l1 {
    transform: translateY(118%) rotate(16deg);
  }
}

/* ========================================================================== */
/* ПЕРВЫЙ ЭКРАН И ХЕДЕР: КОМПОЗИЦИЯ С НИЖНЕЙ КАРУСЕЛЬЮ                       */
/* ========================================================================== */

/* Тёмный центральный «остров» в духе Dynamic Island. */
.nav {
  inset: 0 auto auto 50%;
  display: grid;
  grid-template-columns: repeat(2, 38px);
  justify-content: center;
  gap: 7px 10px;
  width: min(860px, calc(100vw - 500px));
  margin: 0 0 0 max(-430px, calc((500px - 100vw) / 2));
  padding: 12px 24px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 0;
  border-radius: 0 0 34px 34px;
  background:
    radial-gradient(circle at 50% -30%, rgba(93, 134, 255, .14), transparent 58%),
    rgba(2, 3, 9, .94);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .56),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: none;
  transform: none;
}

.nav.solid {
  border-color: rgba(255, 255, 255, .14);
  border-top: 0;
  background:
    radial-gradient(circle at 50% -30%, color-mix(in srgb, var(--mode-accent) 18%, transparent), transparent 58%),
    rgba(2, 3, 9, .96);
  box-shadow:
    0 20px 65px rgba(0, 0, 0, .62),
    0 0 34px color-mix(in srgb, var(--mode-accent) 10%, transparent);
}

.nav .logo {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
}

.nav .logo-mark {
  width: 32px;
  height: 32px;
}

.nav .logo-mark svg {
  width: 19px;
  height: 19px;
}

.nav .logo-word {
  font-size: 13px;
  letter-spacing: .08em;
}

.nav .msg {
  position: relative;
  width: 38px;
  height: 38px;
  color: rgba(255, 255, 255, .74);
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
  transition:
    color .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

.nav .msg:nth-of-type(2):hover {
  color: #51d9ff;
  border-color: rgba(81, 217, 255, .72);
  background: rgba(81, 217, 255, .1);
  box-shadow: 0 0 24px rgba(81, 217, 255, .4);
}

.nav .msg:nth-of-type(3):hover {
  color: #ef68ff;
  border-color: rgba(239, 104, 255, .72);
  background: rgba(239, 104, 255, .1);
  box-shadow: 0 0 24px rgba(239, 104, 255, .4);
}

/* Кнопка бронирования живёт отдельно от острова и всегда остаётся в углу. */
.nav > .btn {
  position: fixed;
  top: 18px;
  right: clamp(14px, 2vw, 34px);
  z-index: 52;
  height: 48px;
  padding-inline: 22px;
  font-size: 13px;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, .4),
    0 0 30px color-mix(in srgb, var(--mode-accent) 20%, transparent);
}

/* Первый экран: контент сверху, режимы — отдельной лентой по всей ширине снизу. */
.hero {
  min-height: max(100svh, 900px);
}

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(30px, 5vw, 88px);
  row-gap: 26px;
  width: 100%;
  max-width: none;
  min-height: inherit;
  margin: 0;
  padding: 138px clamp(14px, 2.3vw, 42px) 24px;
}

.left {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-bottom: 0;
}

.left .quiz-wrap {
  width: min(100%, 410px);
  margin-top: 24px;
}

.right {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
}

.modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "status"
    "carousel";
  align-items: end;
  gap: 15px 24px;
  width: 100%;
  margin: 0;
  padding: 17px 18px 16px;
  border-radius: 26px;
}

.modes .now {
  grid-area: status;
  margin: 0;
}

.modes .now > div:last-child {
  min-width: 0;
}

.modes .count {
  margin-right: 2px;
}

.modes .pick {
  position: absolute;
  bottom: calc(100% + 26px);
  left: 430px;
  z-index: 6;
  width: auto;
  min-width: 250px;
  height: 52px;
  margin: 0;
  padding-inline: 24px;
}

.modes .track-row {
  grid-area: carousel;
  min-width: 0;
  padding-inline: 54px;
}

.modes .track {
  gap: 12px;
  padding: 5px 3px 7px;
  overscroll-behavior-inline: contain;
}

/* На широком экране видны ровно шесть крупных карточек. */
.modes .thumb {
  flex: 0 0 calc((100% - 60px) / 6);
  min-width: 0;
}

.modes .thumb .pic {
  height: clamp(94px, 8vw, 132px);
  border-radius: 16px;
}

.modes .thumb .pic em {
  left: 11px;
  bottom: 9px;
  font-size: 9px;
}

.modes .thumb .nm {
  margin-top: 9px;
  font-family: var(--h);
  font-size: clamp(11px, .9vw, 14px);
  line-height: 1.22;
}

/* Стрелки визуально обрамляют ленту, не отнимая место у шести карточек. */
.modes .arrows {
  position: absolute;
  right: 18px;
  bottom: 67px;
  left: 18px;
  z-index: 5;
  justify-content: space-between;
  pointer-events: none;
}

.modes .arr {
  width: 44px;
  height: 44px;
  color: var(--white);
  border-color: rgba(255, 255, 255, .22);
  background: rgba(3, 4, 10, .88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  pointer-events: auto;
}

.modes .arr svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1100px) {
  .hero {
    min-height: max(100svh, 960px);
  }

  .hero-in {
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    padding-top: 132px;
  }

  .modes .thumb {
    flex-basis: calc((100% - 48px) / 5);
  }
}

@media (max-width: 760px) {
  .nav {
    left: calc(50% - 160px);
    width: min(320px, calc(100vw - 28px));
    margin-left: 0;
    padding: 9px 18px 10px;
    border-radius: 0 0 27px 27px;
  }

  .nav .logo-mark {
    width: 28px;
    height: 28px;
  }

  .nav .logo-word {
    max-width: none;
    font-size: 11px;
  }

  .nav .msg {
    width: 33px;
    height: 33px;
  }

  .nav > .btn {
    top: auto;
    right: 12px;
    bottom: 12px;
    height: 44px;
    padding-inline: 18px;
  }

  .hero {
    min-height: max(100svh, 1040px);
  }

  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 24px;
    padding: 126px 12px 18px;
  }

  .left {
    grid-column: 1;
  }

  .left .quiz-wrap {
    width: 100%;
  }

  .modes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "status"
      "action"
      "carousel";
    gap: 12px;
    padding: 14px 12px 13px;
    border-radius: 22px;
  }

  .modes .now {
    align-items: center;
  }

  .modes .pick {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: auto;
    grid-area: action;
    width: 100%;
    min-width: 0;
  }

  .modes .track-row {
    padding-inline: 44px;
  }

  .modes .thumb {
    flex-basis: calc((100% - 12px) / 2);
  }

  .modes .thumb .pic {
    height: 92px;
  }

  .modes .arrows {
    right: 12px;
    bottom: 55px;
    left: 12px;
  }

  .modes .arr {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 390px) {
  .nav {
    left: 10px;
    width: calc(100vw - 20px);
  }

  .nav .logo-word {
    font-size: 10px;
  }

  .modes .thumb {
    flex-basis: 100%;
  }
}

/* ========================================================================== */
/* УТОЧНЕНИЯ ПЕРВОГО ЭКРАНА: ЧИСТАЯ КАРУСЕЛЬ И ГРАФИТОВЫЙ ОСТРОВ             */
/* ========================================================================== */

.nav {
  width: min(900px, calc(100vw - 500px));
  margin-left: max(-450px, calc((500px - 100vw) / 2));
  padding: 14px 34px 16px;
  border: 0;
  border-radius: 0 0 62px 62px;
  background:
    linear-gradient(118deg, rgba(18, 21, 27, .98), rgba(42, 46, 55, .96) 48%, rgba(13, 16, 22, .98)),
    #171a20;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, .48),
    inset 0 -1px 0 rgba(255, 255, 255, .05);
}

.nav.solid {
  border: 0;
  background:
    linear-gradient(118deg, rgba(15, 18, 24, .99), rgba(46, 50, 59, .98) 48%, rgba(11, 13, 19, .99)),
    #171a20;
  box-shadow:
    0 22px 62px rgba(0, 0, 0, .58),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.nav .logo {
  gap: 12px;
  min-width: max-content;
}

.nav .logo-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.nav .logo-mark svg {
  width: 25px;
  height: 25px;
}

.nav .logo-word {
  max-width: none;
  font-size: 16px;
  letter-spacing: .075em;
  white-space: nowrap;
}

.nav .msg {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav .msg svg {
  width: 17px;
  height: 17px;
}

.nav .msg:nth-of-type(2):hover,
.nav .msg:nth-of-type(3):hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-2px) scale(1.12);
}

.modes {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.modes::before {
  display: none;
}

.modes .now {
  margin-top: 8px;
}

.modes .arr {
  border-color: color-mix(in srgb, var(--mode-accent) 34%, rgba(255, 255, 255, .22));
  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.modes .arr:hover {
  color: var(--mode-accent);
  border-color: var(--mode-accent);
  background: rgba(3, 4, 10, .92);
  box-shadow: 0 0 26px color-mix(in srgb, var(--mode-accent) 42%, transparent);
}

/* На десктопе весь hero равен окну, а карусель закреплена в его нижнем ряду. */
@media (min-width: 761px) {
  .hero {
    height: 100svh;
    min-height: 760px;
  }

  .hero-in {
    height: 100%;
    min-height: 0;
    padding-top: 118px;
    padding-bottom: 18px;
    row-gap: 18px;
  }

  .right {
    align-self: end;
  }

  .modes .thumb .pic {
    height: clamp(88px, 6vw, 112px);
  }
}

@media (min-width: 761px) and (max-height: 840px) {
  .hero {
    min-height: 700px;
  }

  .hero-in {
    padding-top: 102px;
    padding-bottom: 12px;
    row-gap: 12px;
  }

  h1 {
    font-size: clamp(48px, 5.5vw, 76px);
  }

  .geo {
    margin-bottom: 12px;
  }

  .sub {
    margin-top: 12px;
    font-size: clamp(18px, 1.8vw, 24px);
  }

  .offer {
    margin-top: 12px;
    padding-block: 9px;
  }

  .badges {
    margin-top: 14px;
  }

  .left .quiz-wrap {
    margin-top: 16px;
  }

  .modes .pick {
    bottom: calc(100% + 16px);
  }

  .modes .thumb .pic {
    height: 78px;
  }
}

@media (max-width: 760px) {
  .nav {
    left: calc(50% - 170px);
    width: min(340px, calc(100vw - 24px));
    margin-left: 0;
    padding: 10px 20px 12px;
    border-radius: 0 0 38px 38px;
  }

  .nav .logo-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .nav .logo-mark svg {
    width: 21px;
    height: 21px;
  }

  .nav .logo-word {
    font-size: 12px;
  }

  .nav .msg {
    width: 23px;
    height: 23px;
  }

  .modes {
    padding: 0;
  }
}

@media (max-width: 390px) {
  .nav {
    left: 12px;
  }
}

/* ========================================================================== */
/* ФИНАЛЬНАЯ КОМПОЗИЦИЯ HERO: КНОПКИ, ФИЛЬТР И ФИКСИРОВАННЫЕ СОЦСЕТИ         */
/* ========================================================================== */

/* Остров содержит только несжатый логотип и повторяет его пропорции. */
.nav {
  left: 50%;
  display: flex;
  justify-content: center;
  width: 320px;
  min-width: 320px;
  margin-left: -160px;
  padding: 12px 28px 14px;
  border-radius: 0 0 38px 38px;
}

.nav .logo {
  width: auto;
  min-width: max-content;
}

/* Соцсети образуют отдельную фиксированную строку под бронированием. */
.nav .msg {
  position: fixed;
  top: 76px;
  z-index: 53;
  width: 25px;
  height: 25px;
  margin: 0;
}

.nav .msg:nth-of-type(2) {
  right: 175px;
}

.nav .msg:nth-of-type(3) {
  right: 137px;
}

/* Описание активного режима находится справа над лентой. */
.modes .now {
  justify-content: flex-end;
  margin-top: 10px;
  text-align: right;
}

.modes .now > div:first-child {
  order: 2;
  margin-left: 18px;
}

.modes .now > div:last-child {
  order: 1;
}

/* Кнопки меняются местами, но остаются на одной горизонтальной линии. */
.modes .pick {
  left: 0;
  width: 410px;
  min-width: 410px;
}

.left .quiz-wrap {
  position: relative;
  z-index: 12;
  width: 320px;
  margin-top: 24px;
  transform: translate(430px, -40px);
}

.left .quiz-toggle {
  min-height: 52px;
  height: 52px;
  padding: 0 7px 0 20px;
  font-size: 14px;
}

.left .quiz-toggle .chev {
  flex: 0 0 38px;
}

/* Фильтр раскрывается вверх поверх hero и не меняет высоту карусели. */
.left .quiz {
  position: absolute;
  right: 0;
  bottom: calc(100% + 28px);
  left: 0;
  z-index: 20;
  width: min(520px, calc(100vw - 28px));
  transform-origin: bottom center;
}

.left .quiz-card {
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 16px;
}

.left .q-title {
  margin: 7px 0 8px;
  font-size: 16px;
}

.left .q-opts {
  gap: 6px;
}

.left .q-opt {
  padding: 7px 10px;
  font-size: 12.5px;
}

.left .q-back {
  margin-top: 8px;
}

/* Карточки становятся заметно выше, включая невысокие desktop-экраны. */
@media (min-width: 761px) {
  .modes .thumb .pic {
    height: clamp(122px, 8vw, 152px);
  }
}

@media (min-width: 761px) and (max-height: 840px) {
  .modes .thumb .pic {
    height: 108px;
  }

  .modes .now {
    margin-top: 4px;
  }

  .modes .pick {
    bottom: calc(100% + 12px);
  }
}

@media (max-width: 760px) {
  .nav {
    left: 12px;
    width: 220px;
    min-width: 220px;
    margin-left: 0;
    padding: 9px 14px 11px;
    border-radius: 0 0 30px 30px;
  }

  .nav .logo {
    gap: 8px;
  }

  .nav .logo-word {
    font-size: 11px;
  }

  .nav > .btn {
    top: 10px;
    right: 10px;
    bottom: auto;
  }

  .nav .msg {
    top: 58px;
  }

  .nav .msg:nth-of-type(2) {
    right: 93px;
  }

  .nav .msg:nth-of-type(3) {
    right: 57px;
  }

  .left .quiz-wrap {
    width: 100%;
    transform: none;
  }

  .left .quiz {
    bottom: calc(100% + 8px);
    width: 100%;
  }

  .modes .pick {
    width: 100%;
    min-width: 0;
  }

  .modes .now {
    text-align: left;
  }

  .modes .now > div:first-child {
    order: 1;
    margin-left: 0;
  }

  .modes .now > div:last-child {
    order: 2;
  }

  .modes .thumb .pic {
    height: 116px;
  }
}

/* Зазор между стрелками и карточками + мягкое альфа-затухание на срезе. */
.modes .track-row {
  padding-inline: 76px;
}

.modes .track {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 26px,
    #000 calc(100% - 26px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 26px,
    #000 calc(100% - 26px),
    transparent 100%
  );
}

.modes .arrows {
  right: 14px;
  left: 14px;
}

@media (max-width: 760px) {
  .modes .track-row {
    padding-inline: 54px;
  }

  .modes .track {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
}

/* ========================================================================== */
/* ПРОЗРАЧНЫЙ ХЕДЕР И ИНТЕРАКТИВНОЕ РАСКРЫТИЕ РЕЖИМОВ                        */
/* ========================================================================== */

/* У логотипа больше нет собственной подложки или тени. */
.nav,
.nav.solid {
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Контрастная иконка подарка: светлая плашка и тёмный знак. */
.offer-ic {
  color: #071018;
  background: #f7f8ff;
  box-shadow: none;
  transition:
    color .28s ease,
    background-color .28s ease,
    transform .28s ease;
}

/* На светлом градиенте контраст кубика инвертируется. */
.offer.is-light .offer-ic {
  color: #f7f8ff;
  background: #071018;
}

.nav > .btn {
  width: 216px;
}

/* Крупные чистые иконки точно по центру кнопки бронирования. */
.nav .msg {
  top: 78px;
  width: 32px;
  height: 32px;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav .msg:hover,
.nav .msg:focus-visible,
.nav.solid .msg,
.nav.solid .msg:hover {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.nav .msg::before,
.nav .msg::after {
  display: none !important;
}

.nav .msg svg {
  width: 23px;
  height: 23px;
}

.nav .msg:nth-of-type(2) {
  right: 147px;
}

.nav .msg:nth-of-type(3) {
  right: 101px;
}

/* Счётчик расположен над подписью и выровнен по её правому краю. */
.modes .now {
  position: static;
}

.modes .now > div:last-child {
  position: static;
}

.modes .count {
  position: absolute;
  top: -12px;
  right: 0;
  margin: 0;
  text-align: right;
}

/* По рисунку фильтр раскрывается вниз в зазор до ленты режимов. */
.left .quiz {
  top: calc(100% + 2px);
  right: 0;
  bottom: auto;
  left: 0;
  transform-origin: top center;
}

/* Индивидуальное раскрытие фотографии внутри каждой карточки режима. */
.modes .thumb {
  --reveal-x: 50%;
  --reveal-y: 50%;
  animation: modeCardEnter .72s cubic-bezier(.2, .78, .2, 1) both;
  animation-delay: calc(var(--card-index, 0) * 55ms);
}

.modes .thumb .pic {
  isolation: isolate;
  background:
    radial-gradient(circle at var(--reveal-x) var(--reveal-y), color-mix(in srgb, var(--mode-accent) 16%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(12, 15, 28, .96), rgba(3, 4, 10, .98));
  transition:
    transform .55s cubic-bezier(.2, .8, .2, 1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.modes .thumb .pic::before {
  clip-path: circle(0% at var(--reveal-x) var(--reveal-y));
  transform: scale(1.14);
  filter: saturate(1.28) contrast(1.06);
  transition:
    clip-path .72s cubic-bezier(.16, .82, .22, 1),
    transform .8s cubic-bezier(.16, .82, .22, 1),
    filter .5s ease;
}

.modes .thumb .pic::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -24%;
  z-index: 2;
  width: 18%;
  opacity: 0;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  pointer-events: none;
}

.modes .thumb.is-revealed .pic,
.modes .thumb:focus-visible .pic,
.modes .thumb.on .pic {
  transform: translateY(-5px);
  border-color: var(--mode-accent);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .42),
    0 0 26px color-mix(in srgb, var(--mode-accent) 28%, transparent);
}

.modes .thumb.is-revealed .pic::before,
.modes .thumb:focus-visible .pic::before,
.modes .thumb.on .pic::before {
  clip-path: circle(150% at var(--reveal-x) var(--reveal-y));
  transform: scale(1);
  filter: saturate(1.14) contrast(1.02);
}

.modes .thumb.is-revealed .pic::after,
.modes .thumb:focus-visible .pic::after {
  animation: modeCardSweep .72s ease both;
}

.modes .thumb:not(.is-revealed):not(.on) .pic i {
  opacity: .34;
}

@keyframes modeCardEnter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modeCardSweep {
  0% {
    left: -24%;
    opacity: 0;
  }
  30% {
    opacity: .7;
  }
  100% {
    left: 112%;
    opacity: 0;
  }
}

@media (hover: none) {
  .modes .thumb .pic::before {
    clip-path: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modes .thumb {
    animation: none;
  }

  .modes .thumb .pic::before {
    clip-path: none;
    transform: none;
  }
}

@media (max-width: 760px) {
  .nav {
    width: 220px;
    min-width: 220px;
  }

  .nav > .btn {
    width: auto;
  }

  .nav .msg {
    top: 60px;
    width: 29px;
    height: 29px;
  }

  .nav .msg svg {
    width: 21px;
    height: 21px;
  }

  .nav .msg:nth-of-type(2) {
    right: 88px;
  }

  .nav .msg:nth-of-type(3) {
    right: 49px;
  }
}

/* ========================================================================== */
/* КОМПАКТНАЯ ЛЕНТА РЕЖИМОВ: СТАТУС И ДЕЙСТВИЯ ВЫНЕСЕНЫ НАД КАРУСЕЛЬЮ        */
/* ========================================================================== */

@media (min-width: 761px) {
  .hero-in {
    --mode-strip-height: 166px;
  }

  /* Информационный блок начинается сразу под центральным логотипом. */
  .left {
    align-self: start;
    margin-top: -38px;
  }

  /* В потоке остаётся только сама лента: её высота больше не зависит от текста. */
  .modes {
    display: block;
    position: relative;
    container-type: inline-size;
  }

  .modes .now {
    position: absolute;
    right: 0;
    bottom: calc(100% + 18px);
    z-index: 7;
    width: min(470px, 42vw);
    margin: 0;
  }

  /* Стрелки остаются по краям самой ленты, хотя статус теперь вынесен из потока. */
  .modes .arrows {
    top: calc(100% + 65px);
    right: 0;
    bottom: auto;
    left: auto;
    width: calc(100vw - 2 * clamp(14px, 2.3vw, 42px));
  }

  .modes .pick {
    bottom: calc(100% + 18px);
    left: 334px;
    width: 250px;
    min-width: 250px;
    padding-inline: 18px;
  }

  /* Кнопка подбора теперь слева и совпадает по центральной линии со второй кнопкой. */
  .left .quiz-wrap {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 24px;
    transform: translate(0, 56px);
  }

  /* Фильтр раскрывается вверх и не закрывает карусель. */
  .left .quiz {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom center;
  }

  /* Счётчик центрируется относительно окна, независимо от ширины описания. */
  .modes .count {
    right: 50cqw;
    left: auto;
    transform: translateX(50%);
  }
}

@media (min-width: 761px) and (max-height: 840px) {
  .hero-in {
    --mode-strip-height: 146px;
  }

  .left {
    margin-top: -22px;
  }

  .modes .now,
  .modes .pick {
    bottom: calc(100% + 12px);
  }

  .modes .arrows {
    top: calc(100% + 49px);
  }

  .left .quiz-wrap {
    transform: translate(0, 42px);
  }
}

/* Индикатор текущего блока страницы. Цвет наследуется от выбранного режима. */
.section-progress {
  position: fixed;
  top: 24px;
  left: 22px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 9px;
}

.section-progress__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #626570;
  box-shadow: none;
  opacity: .68;
  cursor: pointer;
  transition:
    width .28s ease,
    opacity .28s ease,
    transform .28s ease,
    background-color .28s ease,
    box-shadow .28s ease;
}

.section-progress__dot:hover {
  opacity: 1;
  transform: scale(1.2);
}

.section-progress__dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--mode-accent);
  box-shadow:
    0 0 7px var(--mode-accent),
    0 0 20px color-mix(in srgb, var(--mode-accent) 72%, transparent);
  opacity: 1;
}

.section-progress__dot:focus-visible {
  outline: 2px solid var(--mode-accent);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .section-progress {
    top: 112px;
    left: 14px;
    gap: 7px;
  }

  .section-progress__dot {
    width: 7px;
    height: 7px;
  }

  .section-progress__dot.is-active {
    width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-progress__dot {
    transition: none;
  }
}

/* ========================================================================== */
/* ФИНАЛЬНАЯ НАСТРОЙКА HERO: СТАТУСЫ, КВИЗ И ЕДИНАЯ АКТИВАЦИЯ РЕЖИМОВ       */
/* ========================================================================== */

/* Точки секций находятся непосредственно под центральным логотипом. */
.section-progress {
  top: 67px;
  left: 50%;
  transform: translateX(-50%);
}

/* Соцсети стоят слева от фиксированной кнопки бронирования на одной оси. */
.nav .msg {
  top: 26px;
}

.nav .msg:nth-of-type(2) {
  right: calc(clamp(14px, 2vw, 34px) + 264px);
}

.nav .msg:nth-of-type(3) {
  right: calc(clamp(14px, 2vw, 34px) + 224px);
}

/* Вместо двух отдельных плашек — единая шкала с неоновым центром. */
.badges {
  display: grid;
  grid-template-columns: max-content minmax(90px, 1fr) max-content;
  align-items: center;
  gap: 16px;
  width: min(520px, 100%);
}

.badges::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mode-accent) 38%, transparent) 20%,
    var(--mode-accent) 50%,
    color-mix(in srgb, var(--mode-accent) 38%, transparent) 80%,
    transparent
  );
  box-shadow:
    0 0 8px color-mix(in srgb, var(--mode-accent) 72%, transparent),
    0 0 20px color-mix(in srgb, var(--mode-accent) 38%, transparent);
  transition: background .55s ease, box-shadow .55s ease;
}

.badges .badge {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.badges .badge:first-child {
  grid-column: 1;
  grid-row: 1;
}

.badges .badge:last-child {
  grid-column: 3;
  grid-row: 1;
}

.badges .badge svg {
  color: var(--mode-accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mode-accent) 72%, transparent));
  transition: color .55s ease, filter .55s ease;
}

/* Все превью серые; цвет проявляется только после выбора режима. */
.modes .thumb .pic::before,
.modes .thumb.is-revealed:not(.on) .pic::before,
.modes .thumb:focus-visible:not(.on) .pic::before {
  clip-path: none;
  opacity: 1;
  transform: none;
  filter: grayscale(1) saturate(0) brightness(.58) contrast(1.08);
  transition: filter .72s cubic-bezier(.18,.8,.2,1), opacity .45s ease;
}

.modes .thumb.on .pic::before {
  clip-path: none;
  opacity: 1;
  transform: none;
  filter: grayscale(0) saturate(1.2) brightness(1) contrast(1.04);
}

.modes .thumb.is-revealed:not(.on) .pic,
.modes .thumb:focus-visible:not(.on) .pic {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--card-accent) 58%, rgba(255,255,255,.14));
  box-shadow: 0 10px 24px rgba(0,0,0,.36);
}

.modes .thumb .pic::after {
  display: none;
}

.mode-state {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 18px;
  pointer-events: none;
}

.mode-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow:
    0 0 7px var(--card-accent),
    0 0 16px color-mix(in srgb, var(--card-accent) 72%, transparent);
  transition: opacity .25s ease, transform .25s ease;
}

.mode-installed {
  position: absolute;
  right: 0;
  width: max-content;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 64%, transparent);
  border-radius: 999px;
  background: rgba(3, 4, 10, .76);
  color: #fff;
  font-family: var(--t);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(-4px) scale(.92);
  transition: opacity .32s ease .28s, transform .32s ease .28s;
}

.modes .thumb.on .mode-dot {
  opacity: 0;
  transform: scale(0);
}

.modes .thumb.on .mode-installed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mode-sheen {
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -28%;
  z-index: 4;
  width: 16%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}

.modes .track {
  scroll-snap-type: x proximity;
  scroll-behavior: auto;
}

/* Квиз превращается в изолированное окно, остальная страница обесцвечивается. */
body.quiz-open {
  overflow: hidden;
}

body.quiz-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 6, 11, .48);
  backdrop-filter: grayscale(1) brightness(.48) blur(1.5px);
  -webkit-backdrop-filter: grayscale(1) brightness(.48) blur(1.5px);
}

.quiz-wrap.is-modal {
  position: fixed !important;
  top: var(--quiz-modal-top) !important;
  left: var(--quiz-modal-left) !important;
  z-index: 101 !important;
  width: var(--quiz-modal-width) !important;
  margin: 0 !important;
  transform: none !important;
}

.quiz-wrap.is-modal .quiz {
  position: absolute;
  top: auto;
  right: 0;
  bottom: calc(100% + 10px);
  left: auto;
  width: min(520px, calc(100vw - 28px));
  transform-origin: bottom right;
}

.quiz-wrap.is-modal .quiz-card {
  border-color: color-mix(in srgb, var(--mode-accent) 58%, rgba(255,255,255,.16));
  background: rgba(9, 11, 20, .98);
  box-shadow:
    0 24px 80px rgba(0,0,0,.72),
    0 0 38px color-mix(in srgb, var(--mode-accent) 24%, transparent);
}

.modes .now > div:first-child {
  transition: transform .55s cubic-bezier(.18,.8,.2,1), opacity .4s ease;
}

body.quiz-open .modes .now > div:first-child {
  transform: translateY(-220px);
}

.now-name small {
  display: none;
}

@media (min-width: 761px) {
  /* Описание справа, кнопка под ним; выбор режима остаётся слева. */
  .modes .now {
    bottom: calc(100% + 80px);
  }

  .modes .count {
    top: calc(100% + 48px);
    bottom: auto;
  }

  .modes .arrows {
    top: calc(100% + 127px);
  }

  .modes .pick {
    left: 0;
  }

  .left .quiz-wrap {
    z-index: 12;
    transform: translate(calc(100vw - 2 * clamp(14px, 2.3vw, 42px) - 320px), 56px);
  }

  .left .quiz {
    right: 0;
    left: auto;
  }
}

@media (min-width: 761px) and (max-height: 840px) {
  .modes .now {
    bottom: calc(100% + 60px);
  }

  .modes .count {
    top: calc(100% + 34px);
  }

  .modes .arrows {
    top: calc(100% + 97px);
  }

  .left .quiz-wrap {
    transform: translate(calc(100vw - 2 * clamp(14px, 2.3vw, 42px) - 320px), 42px);
  }
}

@media (max-width: 760px) {
  .section-progress {
    top: 66px;
    left: calc(12px + 110px);
    transform: translateX(-50%);
  }

  .nav .msg {
    top: 17px;
  }

  .nav .msg:nth-of-type(2) {
    right: 197px;
  }

  .nav .msg:nth-of-type(3) {
    right: 158px;
  }

  .badges {
    gap: 10px;
  }

  .badges::before {
    min-width: 48px;
  }

  /* На узком экране сохраняется тот же смысловой порядок: выбор слева/раньше,
     подбор — непосредственно после описания активного режима. */
  .modes .pick {
    transform: translateY(-209px);
  }

  .left .quiz-wrap {
    z-index: 12;
    transform: translateY(209px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modes .thumb .pic::before,
  .modes .now > div:first-child {
    transition: none;
  }
}

/* ========================================================================== */
/* Финальная настройка первого экрана: шкала, карточки и единая линия действий */
/* ========================================================================== */

/* Короткая вертикальная риска является центром мягкого горизонтального свечения.
   Текст и пиктограммы лежат поверх градиента. */
.badges {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 72px;
  width: min(440px, 100%);
  min-height: 36px;
}

.badges::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18%;
  left: 18%;
  z-index: -2;
  height: 22px;
  min-width: 0;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mode-accent) 10%, transparent) 16%,
    color-mix(in srgb, var(--mode-accent) 26%, transparent) 42%,
    color-mix(in srgb, var(--mode-accent) 26%, transparent) 58%,
    color-mix(in srgb, var(--mode-accent) 10%, transparent) 84%,
    transparent
  );
  filter: blur(7px);
  box-shadow: none;
}

.badges::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 2px;
  height: 26px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, var(--mode-accent) 24% 76%, transparent);
  box-shadow:
    0 0 8px var(--mode-accent),
    0 0 18px color-mix(in srgb, var(--mode-accent) 64%, transparent);
  transition: background .55s ease, box-shadow .55s ease;
}

.badges .badge,
.badges .badge:first-child,
.badges .badge:last-child {
  position: relative;
  z-index: 1;
  display: inline-flex;
  grid-column: auto;
  grid-row: auto;
  flex: 0 0 auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

/* Колесо мыши больше не перехватывается лентой: режимы меняются карточками
   и отдельными стрелками, а горизонтальный touch-drag остаётся доступным. */
.modes .track {
  overscroll-behavior: auto;
}

/* На карточке остаётся только её внутреннее название; внешняя подпись скрыта. */
.modes .thumb .nm {
  display: none !important;
}

.modes .thumb .mode-card-name {
  right: 42px;
  bottom: 11px;
  left: 11px;
  z-index: 5;
  max-width: none;
  color: rgba(255, 255, 255, .9);
  font-family: var(--h);
  font-size: clamp(10px, .78vw, 13px);
  font-style: normal;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95);
  opacity: 1;
  transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1);
}

.modes .thumb.on .mode-card-name {
  opacity: 0;
  transform: translateY(6px);
}

.mode-state {
  top: 10px;
  right: 10px;
}

.mode-dot,
.modes .thumb.on .mode-dot {
  width: 10px;
  height: 10px;
  opacity: 1;
  transform: none;
  animation: modeDotPulse 1.7s ease-in-out infinite;
}

.mode-active {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  color: #fff;
  font-family: var(--t);
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .11em;
  text-shadow:
    0 0 7px var(--card-accent),
    0 1px 8px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease .28s, transform .35s cubic-bezier(.2,.8,.2,1) .24s;
  pointer-events: none;
}

.modes .thumb.on .mode-active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes modeDotPulse {
  0%, 100% {
    box-shadow: 0 0 5px var(--card-accent), 0 0 12px color-mix(in srgb, var(--card-accent) 55%, transparent);
    transform: scale(.86);
  }
  50% {
    box-shadow: 0 0 10px var(--card-accent), 0 0 26px color-mix(in srgb, var(--card-accent) 86%, transparent);
    transform: scale(1.18);
  }
}

/* Обе кнопки образуют одну строку и имеют одинаковую высоту. */
.hero-in {
  position: relative;
}

.left {
  position: static;
}

.modes .pick {
  left: 0;
  width: 280px;
  min-width: 280px;
  height: 52px;
  min-height: 52px;
  transform: none;
}

.left .quiz-wrap:not(.is-modal) {
  position: absolute;
  top: var(--quiz-inline-top, auto);
  left: var(--quiz-inline-left, auto);
  z-index: 12;
  width: 320px;
  max-width: none;
  height: 52px;
  margin: 0;
  transform: none;
}

.left .quiz-toggle {
  width: 100%;
  height: 52px;
  min-height: 52px;
}

/* Описание стоит над кнопкой подбора и совпадает с ней по правому краю. */
.modes .now > div:first-child {
  position: absolute;
  right: 0;
  bottom: calc(100% + 88px);
  width: 320px;
  margin: 0;
  text-align: right;
}

/* При открытии описание становится частью окна и мягко появляется над вопросом. */
.quiz-wrap.is-modal .quiz {
  right: 0;
  left: auto;
  transform-origin: bottom right;
}

.quiz-wrap.is-modal .quiz > div {
  display: grid;
  gap: 10px;
}

.quiz-wrap.is-modal .quiz-bound-summary {
  position: static;
  width: auto;
  margin: 0;
  padding: 14px 16px 2px;
  text-align: left;
  opacity: 0;
  transform: translateY(14px);
  animation: quizSummaryBind .52s cubic-bezier(.18,.8,.2,1) .12s forwards;
}

.quiz-wrap.is-modal .quiz-bound-summary .now-name {
  font-size: clamp(20px, 2vw, 28px);
}

.quiz-wrap.is-modal .quiz-bound-summary .now-progs {
  margin-top: 7px;
  color: rgba(255,255,255,.68);
}

body.quiz-open .modes .now > div:first-child {
  transform: none;
}

@keyframes quizSummaryBind {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* У фоновой фотографии больше нет декоративных колец, паттернов и бликов поверх неё. */
.layer::after,
.layer .pat,
.layer .glow {
  display: none;
}

/* Фотография занимает весь первый экран. Правый градиент является частью
   фонового слоя, поэтому цветовая волна проходит поверх него, но под контентом. */
.layer::before {
  inset: 0;
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 4, 10, .54) 0%,
      rgba(3, 4, 10, .22) 38%,
      rgba(3, 4, 10, .16) 62%,
      rgba(3, 4, 10, .76) 100%
    ),
    var(--scene);
  background-position: center;
  background-size: cover;
  transform: scale(1.025);
}

.shade {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, .9) 0%, rgba(3, 4, 10, .64) 30%, transparent 60%),
    linear-gradient(0deg, rgba(3, 4, 10, .9) 0%, transparent 38%),
    linear-gradient(180deg, rgba(3, 4, 10, .34), transparent 24%);
}

@media (max-width: 760px) {
  .badges {
    gap: 36px;
  }

  .badges::before {
    right: 12%;
    left: 12%;
  }

  .modes .pick {
    width: calc(50% - 6px);
    min-width: 0;
    padding-inline: 12px;
    font-size: 11px;
  }

  .left .quiz-wrap:not(.is-modal) {
    width: calc(50% - 6px);
  }

  .left .quiz-toggle {
    padding-left: 12px;
    font-size: 10.5px;
  }

  .modes .now > div:first-child {
    right: 0;
    bottom: calc(100% + 84px);
    width: calc(50% - 6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-dot,
  .modes .thumb.on .mode-dot {
    animation: none;
  }
}

/* ========================================================================== */
/* Финальная компоновка hero после настройки анимации                          */
/* ========================================================================== */

/* Фотография снова занимает правую половину и сохраняет почти квадратный кадр.
   Её левый край растворяется в тёмной части первого экрана. */
.layer::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(56vw, 100vh);
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 4, 10, 1) 0%,
      rgba(3, 4, 10, .82) 12%,
      rgba(3, 4, 10, .34) 30%,
      transparent 52%
    ),
    var(--scene);
  background-position: center;
  background-size: cover;
  transform: scale(1.025);
}

.shade {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, .98) 0%, rgba(3, 4, 10, .88) 34%, rgba(3, 4, 10, .22) 56%, transparent 72%),
    linear-gradient(0deg, rgba(3, 4, 10, .92) 0%, transparent 36%),
    linear-gradient(180deg, rgba(3, 4, 10, .36), transparent 24%);
}

/* В неактивной карточке видна только чистая чёрно-белая фотография. */
.modes .thumb .pic {
  background: #05060a !important;
}

.modes .thumb .pic > i,
.modes .thumb:not(.on) .mode-sheen {
  display: none !important;
}

.modes .thumb .pic::before,
.modes .thumb.is-revealed:not(.on) .pic::before,
.modes .thumb:focus-visible:not(.on) .pic::before {
  opacity: 1;
  filter: grayscale(1) saturate(0) brightness(.58) contrast(1.08);
}

.modes .thumb .mode-card-name {
  right: 12px;
  bottom: 12px;
  left: 12px;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 800;
  line-height: 1.12;
}

/* Статус активной карточки располагается по центру фотографии. */
.mode-active {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: #fff;
  font-size: clamp(14px, 1.12vw, 19px);
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-shadow:
    0 0 9px var(--card-accent),
    0 0 22px var(--card-accent),
    0 2px 12px rgba(0, 0, 0, .95);
}

/* Название и программы активного режима центрируются над счётчиком. */
.modes .now > div:first-child {
  right: auto;
  bottom: calc(100% + 94px);
  left: 50%;
  width: min(680px, 62vw);
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
}

.now-name span {
  display: block;
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.now-progs {
  margin-top: 8px;
  font-size: clamp(12px, .92vw, 15px);
  line-height: 1.35;
  text-align: center;
}

/* Кнопка подбора находится слева, кнопка последовательного выбора — справа. */
.modes .pick {
  right: 0;
  left: auto;
}

.left .quiz-wrap:not(.is-modal) {
  right: auto;
  left: var(--quiz-inline-left, auto);
}

@media (max-width: 760px) {
  .layer::before {
    width: 62vw;
  }

  .modes .now > div:first-child {
    right: auto;
    bottom: calc(100% + 88px);
    left: 50%;
    width: min(94vw, 480px);
    transform: translateX(-50%);
  }

  .now-name span {
    font-size: clamp(20px, 6vw, 28px);
  }

  .now-progs {
    font-size: 11px;
  }

  .modes .thumb .mode-card-name {
    font-size: 12px;
  }

  .mode-active {
    font-size: 13px;
  }

  .modes .pick {
    right: auto;
    left: calc(50% + 6px);
  }
}

/* ========================================================================== */
/* Уточнённая типографика режимов                                             */
/* ========================================================================== */

/* Подписи неактивных карточек читаются как самостоятельные заголовки. */
.modes .thumb .mode-card-name {
  right: 14px;
  bottom: 14px;
  left: 14px;
  font-size: clamp(16px, 1.28vw, 22px);
  font-weight: 850;
  line-height: 1.05;
}

/* Выбранный режим получает спокойный текстовый статус без неонового свечения. */
.mode-active {
  flex-direction: column;
  gap: 3px;
  font-size: clamp(15px, 1.18vw, 20px);
  line-height: 1.08;
  letter-spacing: .1em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .92);
}

.mode-active span {
  display: block;
}

/* Информация о программе стоит по центру страницы над центральным счётчиком.
   Контур намеренно открыт сверху, как у интерфейсной скобы. */
.modes .now {
  right: 0;
  left: 0;
  width: 100%;
}

.modes .now > div:first-child {
  right: auto;
  bottom: -2px;
  left: 50%;
  width: min(580px, calc(100vw - 32px));
  padding: 8px 20px 10px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 66%, rgba(255, 255, 255, .22));
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, transparent, rgba(3, 4, 10, .52));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .28),
    inset 0 -1px 0 color-mix(in srgb, var(--mode-accent) 28%, transparent);
  text-align: center;
  transform: translateX(-50%);
}

.now-name span {
  font-size: clamp(20px, 1.75vw, 30px);
  letter-spacing: .055em;
}

.now-progs {
  margin-top: 5px;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(12px, .86vw, 14px);
  text-align: center;
}

.modes .count {
  position: absolute;
  top: auto;
  right: auto;
  bottom: -50px;
  left: 50%;
  margin: 0;
  font-size: 15px;
  text-align: center;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .modes .thumb .mode-card-name {
    right: 10px;
    bottom: 10px;
    left: 10px;
    font-size: 14px;
  }

  .mode-active {
    font-size: 13px;
  }

  .modes .now > div:first-child {
    bottom: 0;
    width: calc(100vw - 24px);
    padding: 7px 14px 9px;
    border-radius: 0 0 15px 15px;
  }

  .now-name span {
    font-size: clamp(17px, 4.8vw, 22px);
  }

  .now-progs {
    margin-top: 4px;
    font-size: 10.5px;
  }

  .modes .count {
    bottom: -46px;
    font-size: 13px;
  }
}

/* ========================================================================== */
/* Финальная компоновка: панорамный фон, световой кант и левый квиз           */
/* ========================================================================== */

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Фоновая фотография заполняет hero целиком. Слева лежит плотная тёмная
   вуаль, справа она полностью растворяется в альфа-канал. */
.layer::before {
  inset: 0;
  width: 100%;
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 4, 10, 1) 0%,
      rgba(3, 4, 10, .96) 20%,
      rgba(3, 4, 10, .72) 38%,
      rgba(3, 4, 10, .25) 62%,
      rgba(3, 4, 10, 0) 100%
    ),
    var(--scene);
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
}

.shade {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, .86), rgba(3, 4, 10, .22) 56%, transparent 82%),
    linear-gradient(0deg, rgba(3, 4, 10, .88), transparent 34%),
    linear-gradient(180deg, rgba(3, 4, 10, .28), transparent 24%);
}

/* Нижнее режимное свечение лежит поверх фотографии и тёмной вуали,
   но строго под всем содержимым hero. */
.hero::after {
  z-index: 1;
  mix-blend-mode: screen;
}

.hero-in {
  z-index: 2;
}

/* Световой кант всегда соответствует текущему режиму и мягко подсвечивает
   всю видимую область, не мешая кликам. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 72%, transparent);
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--mode-accent) 42%, transparent),
    inset 0 0 64px color-mix(in srgb, var(--mode-accent) 18%, transparent);
  opacity: .72;
  transition: border-color .55s ease, box-shadow .55s ease, opacity .3s ease;
  pointer-events: none;
}

body.quiz-open::after {
  opacity: .18;
  filter: grayscale(1);
}

/* Компактный блок программы. */
.modes .now > div:first-child {
  width: min(470px, calc(100vw - 32px));
  padding: 5px 14px 7px;
  border-radius: 0 0 15px 15px;
}

.now-name span {
  font-size: clamp(17px, 1.42vw, 24px);
  letter-spacing: .045em;
}

.now-progs {
  margin-top: 3px;
  font-size: clamp(10px, .74vw, 12px);
}

/* Неактивные названия становятся заметным содержимым карточки. */
.modes .thumb .mode-card-name {
  right: 12px;
  bottom: 12px;
  left: 12px;
  font-size: clamp(19px, 1.55vw, 25px);
  font-weight: 900;
  line-height: 1.02;
}

/* Кнопка подбора следует сразу за шкалой «11 режимов / 3 зала». */
.left .quiz-wrap:not(.is-modal) {
  top: var(--quiz-inline-top, auto);
  right: auto;
  left: var(--quiz-inline-left, auto);
  width: var(--quiz-inline-width, min(440px, 100%));
}

/* Во время квиза страница остаётся на месте. Корневой scrollbar виден,
   но body зафиксирован и не может прокручиваться. */
body.quiz-open {
  position: fixed;
  top: var(--quiz-scroll-lock, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: visible;
}

body.quiz-open::before {
  background: rgba(4, 5, 10, .5);
  backdrop-filter: grayscale(1) brightness(.42) blur(1px);
  -webkit-backdrop-filter: grayscale(1) brightness(.42) blur(1px);
}

.quiz-wrap.is-modal {
  right: auto !important;
}

/* Окно открывается вниз и привязано к левому краю кнопки. */
.quiz-wrap.is-modal .quiz {
  top: calc(100% + 10px);
  right: auto;
  bottom: auto;
  left: 0;
  width: min(520px, calc(100vw - var(--quiz-modal-left) - 18px));
  max-height: calc(100dvh - var(--quiz-modal-top) - 76px);
  overflow-y: auto;
  transform-origin: top left;
  overscroll-behavior: contain;
}

.quiz-wrap.is-modal .quiz-bound-summary {
  padding: 10px 14px 0;
}

.quiz-wrap.is-modal .quiz-bound-summary .now-name span {
  font-size: clamp(17px, 1.5vw, 22px);
}

.quiz-wrap.is-modal .quiz-bound-summary .now-progs {
  margin-top: 4px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .layer::before {
    width: 100%;
  }

  .modes .now > div:first-child {
    width: min(92vw, 430px);
    padding: 5px 11px 7px;
  }

  .now-name span {
    font-size: clamp(16px, 4.4vw, 20px);
  }

  .now-progs {
    font-size: 10px;
  }

  .modes .thumb .mode-card-name {
    right: 9px;
    bottom: 9px;
    left: 9px;
    font-size: 17px;
  }

  .left .quiz-wrap:not(.is-modal) {
    width: min(92vw, var(--quiz-inline-width, 440px));
  }

  .quiz-wrap.is-modal .quiz {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--quiz-modal-top) - 72px);
  }
}

/* ========================================================================== */
/* Квиз: одинаковые кнопки, полностью неподвижный фон и раскрытие вниз         */
/* ========================================================================== */

/* Обе кнопки действий имеют одну геометрию и одну визуальную систему. */
.modes .pick,
.quiz-wrap .quiz-toggle {
  width: 280px;
  min-width: 280px;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(110deg, rgba(40, 12, 54, .96), rgba(10, 47, 44, .94)) padding-box,
    linear-gradient(105deg, var(--pink), var(--blue), var(--mint), var(--lime)) border-box;
  color: #fff;
  font-family: var(--h);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
}

.modes .pick:hover,
.quiz-wrap .quiz-toggle:hover {
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .42),
    0 0 24px color-mix(in srgb, var(--mode-accent) 24%, transparent);
}

.quiz-wrap .quiz-toggle {
  justify-content: space-between;
  gap: 12px;
}

.quiz-wrap .quiz-toggle .chev {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background: rgba(2, 4, 10, .88);
}

.left .quiz-wrap:not(.is-modal) {
  width: 280px;
  min-width: 280px;
}

/* Открытая кнопка сохраняет абсолютно те же размеры после переноса в body. */
.quiz-wrap.is-modal {
  width: var(--quiz-modal-width) !important;
  min-width: var(--quiz-modal-width) !important;
  height: 52px;
}

.quiz-wrap.is-modal .quiz-toggle {
  width: 100%;
  min-width: 100%;
  height: 52px;
  min-height: 52px;
}

/* Окно растёт вправо, но никогда не выходит за рабочую область. Высота
   ограничена нижним краем viewport; при необходимости прокручивается только
   содержимое самого квиза. */
.quiz-wrap.is-modal .quiz {
  top: calc(100% + 10px);
  right: auto;
  bottom: auto;
  left: 0;
  width: min(680px, var(--quiz-modal-space-x));
  min-width: var(--quiz-modal-width);
  max-width: var(--quiz-modal-space-x);
  max-height: var(--quiz-modal-space-y);
  overflow-x: hidden;
  overflow-y: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-14px) scale(.975);
  transform-origin: top left;
  pointer-events: none;
  transition:
    grid-template-rows .46s cubic-bezier(.2, .78, .2, 1),
    opacity .28s ease,
    transform .46s cubic-bezier(.2, .78, .2, 1),
    visibility 0s linear .46s;
}

.quiz-wrap.is-modal .quiz.open {
  overflow-y: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: 0s;
}

.quiz-wrap.is-modal .quiz > div {
  min-width: 0;
  min-height: 0;
}

.quiz-wrap.is-modal .quiz-card {
  width: 100%;
  margin-top: 0;
}

.quiz-wrap.is-modal .q-opts,
.quiz-wrap.is-modal .q-res .row {
  flex-wrap: wrap;
}

.quiz-wrap.is-modal .q-opt {
  white-space: normal;
}

/* Всё за квизом остаётся на прежних координатах, обесцвечивается и перестаёт
   принимать ввод. Полоса прокрутки остаётся видимой благодаря overflow-y у html. */
body.quiz-open::before {
  z-index: 2147483000;
  background: rgba(2, 3, 8, .24);
  backdrop-filter: grayscale(1) saturate(0) brightness(.42);
  -webkit-backdrop-filter: grayscale(1) saturate(0) brightness(.42);
  cursor: default;
  pointer-events: auto;
}

body.quiz-open::after {
  opacity: 0;
}

body.quiz-open > *:not(.quiz-wrap.is-modal),
body.quiz-open > *:not(.quiz-wrap.is-modal) * {
  animation-play-state: paused !important;
  user-select: none;
}

body.quiz-open > *:not(.quiz-wrap.is-modal) {
  filter: grayscale(1) saturate(0) brightness(.46) !important;
}

/* Старые правила квиза не должны снимать центрирующий transform с подписи. */
body.quiz-open .modes .now > div:first-child {
  transform: translateX(-50%);
}

body.quiz-open > .quiz-wrap.is-modal {
  z-index: 2147483001 !important;
  filter: none;
}

@media (max-width: 760px) {
  .modes .pick,
  .left .quiz-wrap:not(.is-modal) {
    width: min(280px, calc(100vw - 32px));
    min-width: 0;
  }

  .quiz-wrap.is-modal .quiz {
    width: var(--quiz-modal-space-x);
    min-width: var(--quiz-modal-width);
    max-width: var(--quiz-modal-space-x);
    max-height: var(--quiz-modal-space-y);
  }
}

/* Светлая CTA-кнопка подбора — в стилистике кнопки бронирования. */
.quiz-wrap .quiz-toggle,
.quiz-wrap .quiz-toggle:hover {
  border-color: transparent;
  background:
    linear-gradient(110deg, #fff 0%, #e8ecff 48%, #c8fff0 100%) padding-box,
    var(--spectrum) border-box;
  color: #050712;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .36),
    0 0 18px color-mix(in srgb, var(--mode-accent) 14%, transparent);
  transform: none;
}

.quiz-wrap .quiz-toggle .chev {
  background: #050712;
  color: #fff;
}

/* ========================================================================== */
/* Финальная полировка первого экрана и геометрическая заморозка квиза        */
/* ========================================================================== */

/* В светлой CTA достаточно воздуха справа, поэтому круг не касается края. */
.quiz-wrap .quiz-toggle,
.quiz-wrap .quiz-toggle:hover {
  width: 320px;
  min-width: 320px;
  padding: 0 10px 0 20px;
}

.left .quiz-wrap:not(.is-modal) {
  width: 320px;
  min-width: 320px;
}

.quiz-wrap .quiz-toggle .chev {
  flex-basis: 36px;
  margin-left: 12px;
}

/* Кнопка выбора: только спектральный контур в покое, строгие углы и
   компактная ширина. При наведении включается заливка и штатный блик .btn. */
.modes .pick {
  width: 232px;
  min-width: 232px;
  height: 48px;
  min-height: 48px;
  padding-inline: 18px;
  border-radius: 4px;
  background:
    linear-gradient(#03040a, #03040a) padding-box,
    linear-gradient(105deg, var(--pink), var(--blue), var(--mint), var(--lime)) border-box;
  box-shadow: none;
}

.modes .pick:hover {
  background:
    linear-gradient(110deg, rgba(110, 34, 126, .92), rgba(26, 84, 111, .94), rgba(22, 101, 72, .9)) padding-box,
    linear-gradient(105deg, var(--pink), var(--blue), var(--mint), var(--lime)) border-box;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .44),
    0 0 28px color-mix(in srgb, var(--mode-accent) 34%, transparent);
}

/* Адрес — чистая белая строка без капсулы и обводки. */
.geo {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.geo svg {
  color: #fff;
  stroke: currentColor;
}

/* Свечение остаётся только у нижней кромки и растворяется вверх без линии. */
body::after {
  inset: auto 0 0;
  width: 100%;
  height: min(32vh, 300px);
  border: 0;
  background: radial-gradient(
    ellipse 92% 100% at 50% 116%,
    color-mix(in srgb, var(--mode-accent) 52%, transparent) 0%,
    color-mix(in srgb, var(--mode-accent) 22%, transparent) 34%,
    transparent 74%
  );
  box-shadow: none;
  opacity: .72;
}

/* Контур блока программы получает короткий цветовой ход, который мягко
   растворяется в альфа-канал к краям. Верхняя сторона по-прежнему открыта. */
.modes .now > div:first-child {
  position: absolute;
  isolation: isolate;
  border-color: transparent;
  background: linear-gradient(180deg, transparent, rgba(3, 4, 10, .55));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .28),
    0 8px 22px color-mix(in srgb, var(--mode-accent) 12%, transparent);
}

.modes .now > div:first-child::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--mode-accent) 64%, transparent) 18%,
    color-mix(in srgb, var(--mode-accent) 94%, rgba(255,255,255,.2)) 50%,
    color-mix(in srgb, var(--mode-accent) 64%, transparent) 82%,
    transparent 100%
  );
  clip-path: polygon(0 2px, 100% 2px, 100% 100%, 0 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Не фильтруем .nav целиком: filter на родителе меняет систему координат
   вложенных position:fixed. Каждый элемент шапки обесцвечивается отдельно. */
body.quiz-open > *:not(.quiz-wrap.is-modal) {
  filter: none !important;
}

body.quiz-open > *:not(.quiz-wrap.is-modal):not(.nav) {
  filter: grayscale(1) saturate(0) brightness(.46) !important;
}

body.quiz-open > .nav > * {
  filter: grayscale(1) saturate(0) brightness(.46) !important;
}

@media (max-width: 760px) {
  .quiz-wrap .quiz-toggle,
  .quiz-wrap .quiz-toggle:hover,
  .left .quiz-wrap:not(.is-modal) {
    width: min(320px, calc(100vw - 32px));
    min-width: 0;
  }

  .modes .pick {
    width: 210px;
    min-width: 210px;
  }
}

/* ========================================================================== */
/* Режимная палитра и правильный порядок фоновых слоёв                        */
/* ========================================================================== */

@property --mode-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #00d9ff;
}

@property --mode-accent-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #6c63ff;
}

@property --mode-tone {
  syntax: "<color>";
  inherits: true;
  initial-value: #071827;
}

@property --mode-on-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #f7f8ff;
}

@property --mode-on-accent-muted {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(247, 248, 255, .76);
}

:root {
  --mode-accent-2: #6c63ff;
  --mode-tone: #071827;
  --mode-on-accent: #f7f8ff;
  --mode-on-accent-muted: rgba(247, 248, 255, .76);
  transition:
    --mode-accent .58s cubic-bezier(.22, .61, .36, 1),
    --mode-accent-2 .58s cubic-bezier(.22, .61, .36, 1),
    --mode-tone .58s cubic-bezier(.22, .61, .36, 1),
    --mode-on-accent .42s ease,
    --mode-on-accent-muted .42s ease;
}

/* Старый глобальный слой отключён: он находился поверх интерфейса. */
body::after {
  display: none;
}

/* Порядок внутри hero:
   .bg с фотографией → .shade с тёмным left-to-alpha градиентом →
   цветное свечение → .hero-in со всем интерфейсом. */
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: min(34vh, 320px);
  background: radial-gradient(
    ellipse 94% 105% at 50% 116%,
    color-mix(in srgb, var(--mode-accent) 46%, transparent) 0%,
    color-mix(in srgb, var(--mode-accent-2) 20%, transparent) 38%,
    transparent 76%
  );
  opacity: .72;
  pointer-events: none;
  transition: background .55s ease, opacity .3s ease;
}

.hero-in {
  z-index: 2;
}

/* У центрального описания остаётся только тонкий контур: без плашки и glow. */
.modes .now > div:first-child {
  background: transparent;
  box-shadow: none;
}

/* Кнопка выбора полностью прозрачна в покое. */
.modes .pick {
  border: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--mode-accent), var(--mode-accent-2), transparent) 1;
  background: transparent;
  box-shadow: none;
  transition:
    color .28s ease,
    background .38s ease,
    box-shadow .38s ease,
    transform .25s cubic-bezier(.2, .8, .2, 1);
}

.modes .pick:hover {
  border-image: linear-gradient(90deg, var(--mode-accent), var(--mode-accent-2)) 1;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--mode-accent) 44%, rgba(5,7,16,.9)),
    color-mix(in srgb, var(--mode-accent-2) 40%, rgba(5,7,16,.9))
  );
  box-shadow: 0 0 28px color-mix(in srgb, var(--mode-accent) 28%, transparent);
}

/* Светлые CTA и управляющие стрелки получают палитру выбранного режима. */
.nav > .btn,
.quiz-wrap .quiz-toggle,
.quiz-wrap .quiz-toggle:hover {
  background:
    linear-gradient(110deg, #fff 0%, #eef2ff 52%, #e5fff5 100%) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
}

.arr:hover {
  background: linear-gradient(135deg, var(--mode-accent), var(--mode-accent-2));
  box-shadow: 0 0 24px color-mix(in srgb, var(--mode-accent) 36%, transparent);
}

.nav .msg:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px) scale(1.1);
}

.nav .msg:nth-of-type(2):hover {
  color: var(--mode-accent);
  filter: drop-shadow(0 0 7px var(--mode-accent));
}

.nav .msg:nth-of-type(3):hover {
  color: var(--mode-accent-2);
  filter: drop-shadow(0 0 7px var(--mode-accent-2));
}

/* Цвет скролбара синхронизирован с активным режимом. */
html {
  scrollbar-color: var(--mode-accent) #070912;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #070912;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #070912;
  border-radius: 999px;
  background: linear-gradient(var(--mode-accent), var(--mode-accent-2));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--mode-accent-2), var(--mode-accent));
}

/* ========================================================================== */
/* Смена режима: WebGL Image Transitions — Demo 3                            */
/* ========================================================================== */

/* Постоянный canvas полностью повторяет жизненный цикл оригинального Demo 3. */
.mode-webgl-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  contain: strict;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.mode-webgl-stage.is-ready {
  opacity: 1;
}

.mode-webgl-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* После готовности WebGL тёмный градиент постоянно рисуется внутри шейдера.
   CSS-слой больше не включается обратно в финальном кадре — это исключает
   мигание при передаче изображения после завершения Demo 3. */
.hero .shade {
  transition: opacity .18s linear;
}

.hero.mode-webgl-ready .shade {
  opacity: 0;
}

/* После завершения перехода фон остаётся строго в последнем кадре: курсор,
   hover и положение указателя больше не влияют на его трансформацию. */
.layer::before {
  transform: scale(1.02) !important;
  transition: none !important;
}

/* Счётчики остаются полностью прозрачными: видимы только иконки, текст
   и центральная световая линия. */
.badges .badge,
.badges .badge:first-child,
.badges .badge:last-child {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Цвет подарочной плашки и её контура растворяется в альфа-канал,
   не переходя в чёрный. */
.offer {
  border: 1px solid transparent;
  color: var(--offer-text, #f7f8ff);
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--mode-accent) 24%, transparent) 0%,
      color-mix(in srgb, var(--mode-accent-2) 13%, transparent) 52%,
      transparent 100%
    ) padding-box,
    linear-gradient(
      90deg,
      var(--mode-accent) 0%,
      color-mix(in srgb, var(--mode-accent-2) 54%, transparent) 48%,
      transparent 100%
    ) border-box;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color .3s ease, background .3s ease;
}

.offer b {
  color: inherit;
}

/* У светлых режимов цветная часть плашки становится плотнее, а текст
   автоматически переключается на тёмный. Фон по-прежнему растворяется
   в прозрачность и не уходит в чёрный. */
.offer.is-light {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--mode-accent) 78%, transparent) 0%,
      color-mix(in srgb, var(--mode-accent-2) 56%, transparent) 66%,
      color-mix(in srgb, var(--mode-accent-2) 18%, transparent) 100%
    ) padding-box,
    linear-gradient(
      90deg,
      var(--mode-accent) 0%,
      color-mix(in srgb, var(--mode-accent-2) 66%, transparent) 58%,
      transparent 100%
    ) border-box;
}

/* Модальные окна всегда выше WebGL-фона, фиксированной шапки, квиза и
   любых декоративных слоёв. Значение намеренно общее для окна заявки и
   видеолайтбокса, а внутренний контент вынесен над собственной подложкой. */
.pop,
.vlb {
  z-index: 2147483646 !important;
  isolation: isolate;
}

.pop-bg,
.vlb-bg {
  z-index: 0;
}

.pop-box,
.vlb-box {
  z-index: 1;
}

body.pop-open .pop,
body.pop-open .pop *,
body.vlb-open .vlb,
body.vlb-open .vlb * {
  animation-play-state: running !important;
  filter: none !important;
  user-select: auto;
}

/* Расширенная в четыре раза левая тёмная зона. Эти правила также служат
   корректным резервным видом до готовности WebGL или при его отключении. */
.layer::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 4, 10, .98) 0%,
      rgba(3, 4, 10, .96) 38%,
      rgba(3, 4, 10, .72) 64%,
      rgba(3, 4, 10, .28) 86%,
      transparent 100%
    ),
    var(--scene);
}

.shade {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, .98) 0 38%, rgba(3, 4, 10, .72) 64%, rgba(3, 4, 10, .28) 86%, transparent 100%),
    linear-gradient(0deg, rgba(3, 4, 10, .88), transparent 34%),
    linear-gradient(180deg, rgba(3, 4, 10, .28), transparent 24%);
}

/* Финальный порядок hero: свечение поверх тёмной вуали, интерфейс поверх
   свечения. Правило находится последним, чтобы старые варианты его не сняли. */
.hero::after {
  z-index: 1;
  mix-blend-mode: screen;
}

.hero-in {
  z-index: 2;
}

/* Чистый скролбар: без дорожки, углов и системных стрелок. */
html {
  scrollbar-color: var(--mode-accent) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
  background: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
  background: transparent;
  box-shadow: none;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(var(--mode-accent), var(--mode-accent-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--mode-accent) 42%, transparent);
}

/* ========================================================================== */
/* Безусловный верхний слой бронирования                                      */
/* ========================================================================== */

/* 2147483647 — максимальный z-index, который стабильно поддерживают Chromium
   и Яндекс Браузер. Окно заявки не участвует в заморозке квиза. */
.pop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  isolation: isolate;
  filter: none !important;
  transform: none !important;
}

.pop-bg {
  z-index: 0;
  pointer-events: auto !important;
}

.pop-box {
  z-index: 2;
  pointer-events: auto !important;
  filter: none !important;
}

body.quiz-open > .pop,
body.quiz-transitioning > .pop,
body.quiz-open > .pop *,
body.quiz-transitioning > .pop * {
  animation-play-state: running !important;
  filter: none !important;
  pointer-events: auto;
  user-select: auto !important;
}

/* ========================================================================== */
/* Плавная быстрая заморозка страницы при открытии квиза                      */
/* ========================================================================== */

body.quiz-open,
body.quiz-transitioning {
  position: fixed;
  top: var(--quiz-scroll-lock, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: visible;
}

body.quiz-transitioning::before,
body.quiz-open::before {
  z-index: 2147483000;
  opacity: 0;
  background: rgba(2, 3, 8, 0);
  backdrop-filter: grayscale(0) saturate(1) brightness(1) blur(0);
  -webkit-backdrop-filter: grayscale(0) saturate(1) brightness(1) blur(0);
  pointer-events: auto;
  transition:
    opacity .12s ease,
    background-color .12s ease,
    backdrop-filter .12s ease,
    -webkit-backdrop-filter .12s ease;
}

body.quiz-open::before {
  opacity: 1;
  background: rgba(2, 3, 8, .24);
  backdrop-filter: grayscale(1) saturate(0) brightness(.42) blur(1px);
  -webkit-backdrop-filter: grayscale(1) saturate(0) brightness(.42) blur(1px);
}

body.quiz-open > *:not(.quiz-wrap.is-modal):not(.nav):not(.pop):not(.vlb),
body.quiz-transitioning > *:not(.quiz-wrap.is-modal):not(.nav):not(.pop):not(.vlb),
body.quiz-open > .nav > *,
body.quiz-transitioning > .nav > * {
  transition: filter .12s ease !important;
}

/* Окно закрывается быстрее, чтобы восстановление страницы не ощущалось
   запаздывающим после исчезновения ЧБ-фильтра. */
.quiz-wrap.is-modal .quiz {
  transition:
    opacity .18s ease,
    transform .28s cubic-bezier(.2, .78, .2, 1),
    visibility 0s linear .28s;
}

.quiz-wrap.is-modal .quiz.open {
  transition-delay: 0s;
}

body.quiz-open > *:not(.quiz-wrap.is-modal):not(.nav):not(.pop):not(.vlb),
body.quiz-open > .nav > * {
  filter: grayscale(1) saturate(0) brightness(.46) !important;
}

body.quiz-transitioning:not(.quiz-open) > *:not(.quiz-wrap.is-modal):not(.nav):not(.pop):not(.vlb),
body.quiz-transitioning:not(.quiz-open) > .nav > * {
  filter: grayscale(0) saturate(1) brightness(1) !important;
}

/* Крупные названия непосредственно внутри неактивных карточек режимов. */
.modes .thumb:not(.on) .mode-card-name {
  right: 12px;
  bottom: 12px;
  left: 12px;
  font-size: clamp(8px, .52vw, 10px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .96);
}

@media (max-width: 760px) {
  .modes .thumb:not(.on) .mode-card-name {
    right: 10px;
    bottom: 10px;
    left: 10px;
    font-size: clamp(7px, 1.3vw, 8px);
  }
}

/* Даже наиболее специфичные правила заморозки квиза не применяются к
   открытому окну бронирования. ID гарантирует приоритет над legacy-правилами. */
html body.quiz-open.pop-open > #pop.pop,
html body.quiz-transitioning.pop-open > #pop.pop,
html body.pop-open > #pop.pop {
  z-index: 2147483647 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  animation-play-state: running !important;
}

html body.pop-open > #pop.pop .pop-bg,
html body.pop-open > #pop.pop .pop-box,
html body.pop-open > #pop.pop .pop-box * {
  filter: none !important;
  pointer-events: auto;
  animation-play-state: running !important;
}

/* Социальные иконки следуют палитре выбранного режима. SVG используются как
   маски, поэтому двухцветный фирменный градиент остаётся видимым и у MAX. */
.social-icon {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  background: #fff;
  opacity: 1;
  transition:
    filter .3s ease,
    transform .3s cubic-bezier(.2, .8, .2, 1);
}

.social-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--mode-accent) 0%,
    var(--mode-accent-2) 52%,
    var(--mode-accent) 100%
  );
  opacity: 0;
  transition: opacity .24s ease;
}

.social-icon-telegram {
  -webkit-mask: url("./media/telegram.svg") center / contain no-repeat;
  mask: url("./media/telegram.svg") center / contain no-repeat;
}

.social-icon-max {
  -webkit-mask: url("./media/max.svg") center / contain no-repeat;
  mask: url("./media/max.svg") center / contain no-repeat;
}

.msg:hover .social-icon,
.msg:focus-visible .social-icon {
  filter:
    drop-shadow(0 0 6px var(--mode-accent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--mode-accent-2) 62%, transparent));
  transform: scale(1.09);
}

.msg:hover .social-icon::after,
.msg:focus-visible .social-icon::after {
  opacity: 1;
}

.nav .msg:hover,
.nav .msg:focus-visible,
.reach .msg:hover,
.reach .msg:focus-visible {
  background: transparent;
  color: inherit;
  transform: none;
}

/* Старые nth-of-type правила подсветки больше не должны перекрашивать
   контейнеры: цвет и свечение теперь отрисовывает сама градиентная иконка. */
.nav .msg:nth-of-type(2):hover,
.nav .msg:nth-of-type(3):hover {
  color: inherit;
  filter: none;
}

/* В шапке используется цельный оригинальный логотип без сжатия. */
.nav {
  isolation: isolate;
  overflow: visible;
}

.nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: min(460px, 100vw);
  height: 130px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(4, 6, 12, .48) 18%,
    rgba(4, 6, 12, .94) 42%,
    rgba(4, 6, 12, .94) 58%,
    rgba(4, 6, 12, .48) 82%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, .72) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, .72) 78%,
    transparent 100%
  );
  pointer-events: none;
  will-change: opacity;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1);
}

.nav.solid::before {
  opacity: 0;
}

.nav,
.nav.solid {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav .logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 132px;
  min-width: 132px;
  line-height: 0;
  transform: translateY(-6px);
}

.nav .header-logo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1641 / 982;
}

.nav .header-logo__color,
.nav .header-logo__white {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.nav .header-logo__color {
  background: linear-gradient(
    125deg,
    var(--mode-accent) 0%,
    var(--mode-accent-2) 48%,
    var(--mode-accent) 100%
  );
  -webkit-mask: url("./media/header-logo-color-mask.webp") center / contain no-repeat;
  mask: url("./media/header-logo-color-mask.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mode-accent) 38%, transparent));
  transition: filter .32s ease;
}

.nav .header-logo__white {
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 760px) {
  .nav::before {
    width: min(330px, 100vw);
    height: 102px;
  }

  .nav .logo {
    width: 98px;
    min-width: 98px;
    transform: translateY(-4px);
  }
}

/* Индикатор секций расположен сразу под компактным логотипом. */
.section-progress {
  top: 96px;
}

@media (max-width: 760px) {
  .section-progress {
    top: 74px;
    left: calc(12px + 110px);
  }
}

/* Чистый наложенный скролбар: страница не резервирует под него полосу, фон
   продолжается под прозрачной дорожкой, системные стрелки отключены. */
html {
  overflow-y: overlay;
  scrollbar-gutter: auto !important;
  scrollbar-color: var(--mode-accent) transparent;
  scrollbar-width: thin;
}

body {
  scrollbar-color: var(--mode-accent) transparent;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: transparent !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical,
::-webkit-scrollbar-button:horizontal,
::-webkit-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: transparent !important;
  -webkit-appearance: none;
}

::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: transparent !important;
  -webkit-appearance: none;
}

::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 0 !important;
  border-radius: 999px;
  background: linear-gradient(var(--mode-accent), var(--mode-accent-2)) !important;
  box-shadow: none !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--mode-accent-2), var(--mode-accent)) !important;
}

/* Нативный scrollbar полностью скрыт. Прокрутку отображает независимая
   интерактивная линия, создаваемая в script.js. */
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.custom-scrollbar {
  position: fixed;
  top: 6px;
  right: 2px;
  bottom: 6px;
  z-index: 2147482000;
  width: 18px;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.custom-scrollbar[hidden] {
  display: none;
}

.custom-scrollbar__thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  min-height: 46px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mode-accent), var(--mode-accent-2));
  box-shadow: none;
  cursor: default;
  will-change: transform, height;
  transition:
    width .2s ease,
    opacity .2s ease;
}

.custom-scrollbar:hover .custom-scrollbar__thumb,
.custom-scrollbar.is-dragging .custom-scrollbar__thumb {
  width: 8px;
}

.custom-scrollbar.is-dragging .custom-scrollbar__thumb {
  cursor: default;
}

body.quiz-open .custom-scrollbar,
body.quiz-transitioning .custom-scrollbar {
  pointer-events: none;
}

body.quiz-open .custom-scrollbar__thumb,
body.quiz-transitioning .custom-scrollbar__thumb {
  filter: grayscale(1) saturate(0) brightness(.46);
  transition: filter .2s ease, width .2s ease, opacity .2s ease;
}

html.custom-scroll-dragging {
  scroll-behavior: auto !important;
}

/* Общая прокрутка не интерполируется браузером: кастомная линия следует за
   колесом и перетаскиванием без накопленной задержки. Нужные переходы между
   секциями по-прежнему запрашивают smooth явно из JavaScript. */
html {
  scroll-behavior: auto;
}

/* ========================================================================== */
/* КВИЗ: ПРОЗРАЧНАЯ ПЛАШКА В ПАЛИТРЕ АКТИВНОГО РЕЖИМА                        */
/* ========================================================================== */

/* Непрозрачная тёмная плашка без цветного градиента. */
.quiz-wrap.is-modal .quiz-card {
  border: 0;
  border-radius: 18px;
  background: #080a12;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Три индикатора вопроса светятся цветом выбранного режима. */
.quiz-wrap.is-modal .q-dots span {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mode-accent) 42%, transparent);
  box-shadow:
    0 0 7px color-mix(in srgb, var(--mode-accent) 68%, transparent),
    0 0 16px color-mix(in srgb, var(--mode-accent-2) 34%, transparent);
  transition: background-color .24s ease, box-shadow .24s ease;
}

.quiz-wrap.is-modal .q-dots span.on {
  background: var(--mode-accent);
  box-shadow:
    0 0 8px var(--mode-accent),
    0 0 20px color-mix(in srgb, var(--mode-accent) 76%, transparent),
    0 0 30px color-mix(in srgb, var(--mode-accent-2) 42%, transparent);
}

/* Варианты ответа окрашены палитрой режима. Финальные действия намеренно
   не входят в этот селектор и сохраняют свой исходный дизайн. */
.quiz-wrap.is-modal .q-opt {
  border: 2px solid color-mix(in srgb, var(--mode-accent) 78%, white 12%);
  background: linear-gradient(120deg, var(--mode-accent), var(--mode-accent-2));
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--mode-accent) 24%, transparent);
  transition:
    color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

.quiz-wrap.is-modal .q-opt:hover,
.quiz-wrap.is-modal .q-opt:focus-visible,
.quiz-wrap.is-modal .q-opt:active,
.quiz-wrap.is-modal .q-opt.is-selected {
  border-color: #fff;
  background: #fff;
  color: #071018;
  box-shadow:
    0 0 12px rgba(255, 255, 255, .42),
    0 0 24px color-mix(in srgb, var(--mode-accent) 22%, transparent);
}

/* Финал окрашивается палитрой найденного режима. Цвет всего обычного текста
   выбирается автоматически по светлоте основной заливки. */
.quiz-wrap.is-modal .quiz-card.is-result {
  color: var(--mode-on-accent, #f7f8ff);
  background: linear-gradient(135deg, var(--mode-accent), var(--mode-accent-2));
  box-shadow: none;
}

.quiz-wrap.is-modal .quiz-card.is-result .q-top,
.quiz-wrap.is-modal .quiz-card.is-result .q-res-mode,
.quiz-wrap.is-modal .quiz-card.is-result .q-res p,
.quiz-wrap.is-modal .quiz-card.is-result .q-res .alt,
.quiz-wrap.is-modal .quiz-card.is-result .q-res .alt button,
.quiz-wrap.is-modal .quiz-card.is-result .q-book small {
  color: inherit;
  text-shadow: none;
}

.quiz-wrap.is-modal .quiz-card.is-result .q-res-mode {
  background: none;
  -webkit-text-fill-color: currentColor;
}

.quiz-wrap.is-modal .quiz-card.is-result #qAgain {
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.quiz-wrap.is-modal .quiz-card.is-result #qAgain:hover,
.quiz-wrap.is-modal .quiz-card.is-result #qAgain:focus-visible {
  border-color: currentColor;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

/* Кнопка выбора режима: переливающаяся заливка работает постоянно, а при
   наведении поверхность сразу становится белой с тёмной пиктограммой. */
.modes .pick {
  border: 1px solid color-mix(in srgb, var(--mode-accent) 72%, white 12%);
  border-image: none;
  background: linear-gradient(
    110deg,
    var(--mode-accent) 0%,
    var(--mode-accent-2) 38%,
    color-mix(in srgb, var(--mode-accent) 72%, white 18%) 64%,
    var(--mode-accent) 100%
  );
  background-size: 220% 220%;
  color: var(--mode-on-accent, #fff);
  box-shadow: 0 0 28px color-mix(in srgb, var(--mode-accent) 28%, transparent);
  animation: spectrumFlow 7s ease-in-out infinite alternate;
  transition:
    color .16s ease,
    border-color .16s ease,
    box-shadow .22s ease,
    transform .22s cubic-bezier(.2, .8, .2, 1);
}

.modes .pick:hover,
.modes .pick:focus-visible {
  border-color: #fff;
  border-image: none;
  background: #fff;
  color: #071018;
  box-shadow:
    0 0 12px rgba(255, 255, 255, .38),
    0 0 24px color-mix(in srgb, var(--mode-accent) 18%, transparent);
  animation: none;
}

.modes .pick:hover::after,
.modes .pick:focus-visible::after {
  opacity: 0;
}

.modes .pick svg {
  color: inherit;
  stroke: currentColor;
}

/* Сохраняем исходное мягкое свечение, меняя только геометрию: риска ближе
   к левому счётчику, а правый счётчик подтянут к риске. */
.badges {
  justify-content: flex-start;
  gap: clamp(72px, 7.3vw, 105px);
  width: min(440px, 100%);
}

.badges::before {
  top: 50%;
  right: 36%;
  left: 7%;
  height: 22px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mode-accent) 10%, transparent) 16%,
    color-mix(in srgb, var(--mode-accent) 26%, transparent) 42%,
    color-mix(in srgb, var(--mode-accent) 26%, transparent) 58%,
    color-mix(in srgb, var(--mode-accent) 10%, transparent) 84%,
    transparent
  );
  filter: blur(7px);
  box-shadow: none;
}

.badges::after {
  left: 38.6%;
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, transparent, var(--mode-accent) 24% 76%, transparent);
}

.badges .badge {
  padding: 0 !important;
  background: transparent !important;
}

/* ========================================================================== */
/* ФУТЕР: ЧИСТАЯ ПАЛИТРА АКТИВНОГО РЕЖИМА                                    */
/* ========================================================================== */

.foot {
  --footer-fg: #d9dce6;
  --footer-hover: var(--mode-accent);
  isolation: isolate;
  overflow: hidden;
  border: 0;
  color: var(--footer-fg);
  background: #060810;
  transition: background-color .35s ease;
}

/* Узкое режимное свечение живёт только у верхней кромки и мягко растворяется
   в непрозрачном тёмном фоне футера. */
.foot::before {
  content: "" !important;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  display: block !important;
  width: auto;
  height: clamp(90px, 11vw, 150px);
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mode-accent) 58%, #060810) 0%,
    color-mix(in srgb, var(--mode-accent-2) 24%, transparent) 44%,
    transparent 100%
  );
  opacity: .78;
  transition: background .58s cubic-bezier(.22, .61, .36, 1);
}

.foot::after {
  content: none !important;
  display: none !important;
}

.foot-top,
.foot-bot {
  position: relative;
  z-index: 1;
}

.foot-logo-link {
  display: block;
  width: min(180px, 100%);
  margin: 0;
  line-height: 0;
}

.foot-logo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1641 / 982;
}

.foot-logo__color,
.foot-logo__white {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.foot-logo__color {
  background: linear-gradient(
    125deg,
    var(--mode-accent) 0%,
    color-mix(in srgb, var(--mode-accent) 72%, white 18%) 48%,
    var(--mode-accent-2) 100%
  );
  -webkit-mask: url("./media/header-logo-color-mask.webp") center / contain no-repeat;
  mask: url("./media/header-logo-color-mask.webp") center / contain no-repeat;
}

.foot-logo__white {
  object-fit: contain;
  pointer-events: none;
  filter: none;
}

.foot-about,
.foot h4,
.foot li,
.foot li small,
.foot-bot,
.foot-legal a,
.foot-dev-line,
.foot-dev-line a,
.foot .on-lbl {
  color: var(--footer-fg);
  opacity: 1;
  transition: color .24s ease;
}

.foot h4 {
  color: var(--footer-fg);
  opacity: 1;
}

.foot a {
  color: inherit;
  transition: color .24s ease, opacity .24s ease, transform .24s ease;
}

.foot a:not(.btn):hover,
.foot a:not(.btn):focus-visible {
  color: var(--footer-hover);
  opacity: 1;
}

.foot-cta .btn {
  width: min(205px, 100%);
  border: 0;
  color: var(--mode-on-accent, #071018);
  font-size: 12px;
  letter-spacing: -.01em;
  background: linear-gradient(
    112deg,
    var(--mode-accent-2) 0%,
    var(--mode-accent) 52%,
    var(--mode-accent-2) 100%
  );
  background-size: 180% 180%;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--mode-on-accent) 18%, transparent);
  animation: spectrumFlow 7s ease-in-out infinite alternate;
}

.foot-cta .btn:hover,
.foot-cta .btn:focus-visible {
  border: 0;
  color: var(--mode-on-accent, #071018);
  background: linear-gradient(
    112deg,
    var(--mode-accent-2) 0%,
    var(--mode-accent) 52%,
    var(--mode-accent-2) 100%
  );
  background-size: 180% 180%;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .38),
    0 0 26px color-mix(in srgb, var(--mode-accent) 34%, transparent);
  animation: spectrumFlow 3.5s ease-in-out infinite alternate;
}

/* Социальные сети повторяют чистую композицию и размеры верхней панели. */
.foot .reach {
  gap: 14px;
  flex-wrap: nowrap;
}

.foot .reach .msg {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.foot .reach .social-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  background: var(--footer-fg);
  transition: background-color .24s ease, filter .24s ease, transform .24s ease;
}

.foot .reach .social-icon::after {
  display: none;
}

.foot .reach .msg:hover .social-icon,
.foot .reach .msg:focus-visible .social-icon {
  background: var(--mode-accent);
  filter: drop-shadow(0 0 8px currentColor);
  transform: scale(1.1);
}

.foot .on-lbl {
  display: none;
}

.foot-bot {
  border: 0;
}

.foot-dev-line {
  white-space: nowrap;
}

.custom-scrollbar__thumb {
  transition:
    width .2s ease,
    opacity .2s ease,
    background .24s ease;
}

.custom-scrollbar.is-over-footer .custom-scrollbar__thumb {
  background: linear-gradient(180deg, var(--mode-accent), var(--mode-accent-2));
}

/* ========================================================================== */
/* КОНТРАСТ КВИЗА И РЕЖИМНЫЕ HOVER-СОСТОЯНИЯ ГЛАВНЫХ CTA                    */
/* ========================================================================== */

/* Текст вариантов следует фактической светлоте всего режимного градиента. */
.quiz-wrap.is-modal .q-opt,
.quiz-wrap.is-modal .q-opt * {
  color: var(--mode-on-accent, #f7f8ff);
}

.quiz-wrap.is-modal .q-opt:hover,
.quiz-wrap.is-modal .q-opt:focus-visible,
.quiz-wrap.is-modal .q-opt:active,
.quiz-wrap.is-modal .q-opt.is-selected,
.quiz-wrap.is-modal .q-opt:hover *,
.quiz-wrap.is-modal .q-opt:focus-visible *,
.quiz-wrap.is-modal .q-opt:active *,
.quiz-wrap.is-modal .q-opt.is-selected * {
  color: #071018;
}

/* В покое обе CTA остаются светлыми и максимально читаемыми. При наведении
   они принимают текущую палитру режима и автоматически меняют контраст. */
.nav > .btn,
.quiz-wrap .quiz-toggle {
  color: #071018;
  background:
    linear-gradient(110deg, #fff 0%, #eef2ff 52%, #e5fff5 100%) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  transition:
    color .2s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .25s cubic-bezier(.2, .8, .2, 1);
}

.nav > .btn:hover,
.nav > .btn:focus-visible,
.quiz-wrap .quiz-toggle:hover,
.quiz-wrap .quiz-toggle:focus-visible {
  color: var(--mode-on-accent, #f7f8ff);
  background:
    linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2)) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .38),
    0 0 28px color-mix(in srgb, var(--mode-accent) 36%, transparent);
}

/* Старый общий блик заменён управляемым: он каждый раз проходит по кнопке
   один раз при входе курсора и не меняет геометрию элементов. */
.nav > .btn::after,
.quiz-wrap .quiz-toggle::after {
  display: none;
}

.nav > .btn::before,
.quiz-wrap .quiz-toggle::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -110%;
  left: -38%;
  width: 22%;
  height: 320%;
  opacity: 0;
  pointer-events: none;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82), transparent);
}

.nav > .btn:hover::before,
.nav > .btn:focus-visible::before,
.quiz-wrap .quiz-toggle:hover::before,
.quiz-wrap .quiz-toggle:focus-visible::before {
  animation: ctaModeShine .72s cubic-bezier(.22, .61, .36, 1) both;
}

.nav > .btn > span,
.quiz-wrap .quiz-toggle .chev {
  position: relative;
  z-index: 3;
}

.quiz-wrap .quiz-toggle:hover .chev,
.quiz-wrap .quiz-toggle:focus-visible .chev {
  color: var(--mode-accent);
  background: var(--mode-on-accent, #f7f8ff);
}

@keyframes ctaModeShine {
  0% {
    left: -38%;
    opacity: 0;
  }

  18% {
    opacity: .9;
  }

  100% {
    left: 122%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav > .btn:hover::before,
  .nav > .btn:focus-visible::before,
  .quiz-wrap .quiz-toggle:hover::before,
  .quiz-wrap .quiz-toggle:focus-visible::before {
    animation: none;
  }
}

/* ---------- НОВЫЙ ПОДХОД: ПОЛНОШИРИННАЯ СЦЕНА + ФИЛЬТР ---------- */
#how.how{width:100%;padding:0;background:#03050a}
#how .console{display:grid;grid-template-columns:minmax(0,58%) minmax(420px,42%);align-items:stretch;gap:0;width:100%;max-width:none;min-height:clamp(650px,78vh,820px);margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
#how .console::before{display:none}
#how .how-visual{position:relative;min-width:0;min-height:100%;overflow:hidden;background:#080a10}
#how .how-visual::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,4,9,.9) 0%,rgba(2,4,9,.64) 30%,rgba(2,4,9,.2) 58%,transparent 82%),linear-gradient(180deg,rgba(2,4,9,.58),transparent 42%)}
#how .modebar{position:absolute;z-index:5;top:0;left:0;display:block;width:min(760px,88%);padding:clamp(34px,4vw,68px) clamp(28px,4vw,72px);pointer-events:none}
#how .mb-title .h2{max-width:720px;font-size:clamp(38px,4.2vw,72px);line-height:.98}
#how .mb-title .lead{max-width:560px;margin-top:14px;color:rgba(247,248,255,.82);text-wrap:balance}
#how .stage-wrap{position:absolute;inset:0;overflow:hidden;border:0;border-radius:0;background:#080a10;box-shadow:none}
#how .stage-top{display:none}
#how .room{display:none}
#how .how-scene,#how .how-scene-img{position:absolute;inset:0;width:100%;height:100%}
#how .how-scene{z-index:1;overflow:hidden;background:#080a10}
#how .how-scene-img{display:block;object-fit:cover;opacity:0;transform:scale(1.015);transition:opacity .34s ease,transform .48s cubic-bezier(.2,.7,.2,1)}
#how .how-scene-img.is-visible{opacity:1;transform:scale(1)}
#how .panel{position:relative;z-index:1;display:flex;justify-content:center;min-width:0;min-height:100%;padding:clamp(38px,4.2vw,74px) clamp(28px,3.6vw,68px);overflow:hidden;isolation:isolate;color:#f7f8ff;background:radial-gradient(circle at 86% 8%,color-mix(in srgb,var(--mode-accent) 24%,transparent),transparent 34%),linear-gradient(155deg,color-mix(in srgb,var(--mode-accent) 15%,#050710) 0%,color-mix(in srgb,var(--mode-accent-2) 10%,#050710) 46%,#03050a 100%)}
#how .panel::before{display:none}
#how .step-lbl,#how .ps-lbl{color:#f7f8ff}
#how .step-lbl small,#how .ps-lbl small,#how .panel .micro{color:rgba(247,248,255,.64)}

/* Шаг 1: режимный трек и плавно скользящий белый бегунок. */
#how .agesw{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;width:min(360px,88%);padding:4px;margin-bottom:26px;overflow:hidden;border:0;border-radius:999px;background:linear-gradient(110deg,var(--mode-accent),var(--mode-accent-2));box-shadow:none}
#how .agesw::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;transform:translateX(0);transition:transform .38s cubic-bezier(.22,.8,.22,1)}
#how .agesw.is-adults::before{transform:translateX(100%)}
#how .agesw button,#how .agesw button:hover,#how .agesw button.on{position:relative;z-index:1;height:46px;color:var(--mode-on-accent,#f7f8ff);background:transparent;box-shadow:none;transition:color .26s ease}
#how .agesw button.on{color:#071018}

/* Шаг 2: режимные круги на белой плашке с увеличением выбранного. */
#how .dots{display:grid;grid-template-columns:repeat(11,minmax(22px,1fr));align-items:center;gap:clamp(5px,.55vw,9px);min-height:54px;margin:3px 0 18px;padding:8px 10px;overflow:visible;border-radius:999px;background:#fff}
#how .dot{position:relative;z-index:1;width:min(30px,100%);max-width:30px;justify-self:center;border:0;box-shadow:none;transition:transform .34s cubic-bezier(.18,.9,.25,1),box-shadow .28s ease,opacity .2s ease}
#how .dot::before{content:"";position:absolute;z-index:-1;inset:-6px;border-radius:50%;background:#fff;transform:scale(.72);opacity:0;transition:transform .34s cubic-bezier(.18,.9,.25,1),opacity .2s ease}
#how .dot:not(.off):hover{z-index:4;transform:scale(1.36);box-shadow:0 4px 16px color-mix(in srgb,var(--dot-a) 32%,transparent)}
#how .dot:not(.off):hover::before{opacity:1;transform:scale(1.2)}
#how .dot.on{z-index:3;transform:scale(1.34);box-shadow:0 4px 16px color-mix(in srgb,var(--mode-accent) 32%,transparent)}
#how .dot.on::before{opacity:1;transform:scale(1.18)}
#how .dot.off{opacity:.2}

/* Шаг 3: тёмные плашки с режимным контуром и светлым выбором. */
#how .ps{margin-top:18px;padding-top:0;border:0}
#how .pk{min-height:96px;color:var(--mode-on-accent,#f7f8ff);border:1px solid color-mix(in srgb,var(--mode-accent) 72%,var(--mode-accent-2));border-radius:12px;background:linear-gradient(135deg,var(--mode-accent),var(--mode-accent-2));backdrop-filter:none}
#how .pk small{color:var(--mode-on-accent-muted,rgba(247,248,255,.72))}
#how .pk.pick:hover,#how .pk.lock:hover{color:#071018;border-color:#fff;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.2)}
#how .pk.pick:hover small,#how .pk.lock:hover small{color:#071018}
#how .pk.pick.on{color:#071018;border-color:#fff;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.2)}
#how .pk.pick.on small{color:#071018}
#how .ps-nav .arr{border-color:color-mix(in srgb,var(--mode-accent) 58%,rgba(255,255,255,.18))}

/* Компактный CTA повторяет поверхность и блик верхней кнопки бронирования. */
#how .panel #uGet{position:relative;align-self:center;width:min(300px,100%);height:48px;margin-top:18px;overflow:hidden;color:#071018;border:1px solid transparent;background:linear-gradient(110deg,#fff 0%,#eef2ff 52%,#e5fff5 100%) padding-box,linear-gradient(105deg,var(--mode-accent),var(--mode-accent-2)) border-box;box-shadow:0 12px 30px rgba(0,0,0,.22)}
#how .panel #uGet::before{content:"";position:absolute;top:-110%;left:-38%;width:22%;height:320%;opacity:0;pointer-events:none;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.84),transparent)}
#how .panel #uGet:hover,#how .panel #uGet:focus-visible{color:var(--mode-on-accent,#f7f8ff);background:linear-gradient(110deg,var(--mode-accent),var(--mode-accent-2)) padding-box,linear-gradient(105deg,var(--mode-accent),var(--mode-accent-2)) border-box;box-shadow:0 0 28px color-mix(in srgb,var(--mode-accent) 32%,transparent)}
#how .panel #uGet:hover::before,#how .panel #uGet:focus-visible::before{animation:ctaModeShine .72s cubic-bezier(.22,.61,.36,1) both}
#how .panel .micro{display:flex;align-self:center;flex-direction:column;width:min(360px,100%);text-align:center}

@media(max-width:1080px){#how .console{grid-template-columns:minmax(0,54%) minmax(390px,46%)}#how .modebar{width:96%}#how .dots{grid-template-columns:repeat(6,1fr);border-radius:24px}}
@media(max-width:820px){#how .console{grid-template-columns:1fr;min-height:0}#how .how-visual{min-height:560px}#how .panel{min-height:auto}}
@media(max-width:560px){#how .how-visual{min-height:480px}#how .modebar{padding:30px 20px}#how .mb-title .h2{font-size:clamp(34px,11vw,48px)}#how .panel{padding:34px 18px 40px}#how .dots{gap:6px;padding:9px}#how .dot{max-width:28px}#how .panel #uGet,#how .panel .micro{width:100%}}
@media(prefers-reduced-motion:reduce){#how .panel::before{animation:none}#how .agesw::before,#how .dot,#how .dot::before{transition-duration:.01ms}}

/* Удалены только композиционные разделители. Контуры интерактивных карточек,
   кнопок и полей остаются частью интерфейса. */
.nav.solid,
.hero,
.how,
.halls,
.space,
.rv,
.cost,
.faq,
.fin,
.stage-top,
.ps,
.rtag,
.chat-top,
.quick,
.fin-list,
.fin-list li,
.ticker {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.map::after {
  border-left: 0 !important;
}

.or::before,
.or::after {
  display: none;
}

@media (max-width: 560px) {
  .foot-logo-link {
    width: 150px;
  }

  .foot-dev-line {
    font-size: 11px;
  }
}

/* ========================================================================== */
/* КОНТАКТЫ: ПОЛНОШИРИННЫЙ РЕЖИМНЫЙ БЛОК И НЕОНОВАЯ КАРТА                   */
/* ========================================================================== */

.fin {
  --fin-ink: var(--mode-on-accent, #071018);
  --fin-icon-hover: #071018;
  padding: 0 !important;
  color: var(--fin-ink);
  background: var(--mode-accent) !important;
  transition:
    color .42s ease,
    background-color .58s cubic-bezier(.22, .61, .36, 1);
}

.fin-l .fin-title {
  width: auto;
  max-width: 590px;
  margin: 0 0 22px;
  padding: 0;
  color: var(--fin-ink);
  background: none !important;
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.052em;
  text-transform: uppercase;
  text-wrap: balance;
  -webkit-text-fill-color: currentColor !important;
}

.fin-l .fin-title span {
  display: block;
  white-space: nowrap;
}

.fin-card {
  display: grid;
  grid-template-columns: minmax(390px, 43%) minmax(0, 57%);
  width: 100%;
  max-width: none;
  min-height: clamp(460px, 32vw, 520px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fin-l {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 2.6vw, 42px) clamp(22px, 3vw, 48px) clamp(28px, 2.6vw, 42px) var(--pad);
}

.fin-kicker {
  margin: 0 0 12px;
  font-family: var(--h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: .72;
}

.fin-intro {
  max-width: 520px;
  margin: 0;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 600;
  line-height: 1.48;
  text-wrap: balance;
}

.fin-list {
  margin-top: 18px;
  border: 0;
}

.fin-list li {
  grid-template-columns: minmax(84px, 108px) minmax(0, 1fr);
  gap: 16px;
  padding: 7px 0;
  border: 0 !important;
  color: var(--fin-ink);
  font-size: 15px;
}

.fin-list li span {
  padding-top: 2px;
  color: var(--fin-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .66;
}

.fin-cta {
  flex-wrap: nowrap;
  margin-top: auto;
  padding-top: 16px;
}

.fin-cta .btn {
  height: 48px;
  padding-inline: 20px;
  border: 0;
  color: var(--mode-accent);
  background: var(--fin-ink);
  box-shadow: 0 14px 34px color-mix(in srgb, #02040a 24%, transparent);
}

.fin-cta .btn:hover,
.fin-cta .btn:focus-visible {
  color: var(--mode-accent);
  background: #fff;
  box-shadow:
    0 16px 40px color-mix(in srgb, #02040a 32%, transparent),
    0 0 28px color-mix(in srgb, var(--fin-ink) 22%, transparent);
}

.fin .reach .msg {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fin .reach .social-icon {
  background: var(--fin-ink);
}

.fin .reach .msg:hover .social-icon,
.fin .reach .msg:focus-visible .social-icon {
  background: var(--fin-icon-hover);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fin-icon-hover) 42%, transparent));
  transform: scale(1.1);
}

.fin .reach .msg:hover .social-icon::after,
.fin .reach .msg:focus-visible .social-icon::after {
  opacity: 0;
}

.mode-is-light .fin {
  --fin-icon-hover: #fff;
}

.fin .on-lbl {
  display: none;
}

.fin .online-dot {
  background: var(--fin-ink);
  box-shadow: 0 0 10px var(--fin-ink);
}

.map {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #090b12;
}

.map iframe {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto;
  filter: grayscale(1) invert(.92) hue-rotate(180deg) saturate(.55) contrast(.86) brightness(.72);
}

.map-base,
.map-accent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-base {
  z-index: 0;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.78);
}

.map-accent {
  z-index: 1;
  display: block;
  background: var(--mode-accent);
  -webkit-mask: url("./media/contact-map-accent.webp") center / cover no-repeat;
  mask: url("./media/contact-map-accent.webp") center / cover no-repeat;
  filter:
    drop-shadow(0 0 8px var(--mode-accent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--mode-accent) 64%, transparent));
  opacity: .94;
  pointer-events: none;
  transition:
    background-color .58s cubic-bezier(.22, .61, .36, 1),
    filter .58s cubic-bezier(.22, .61, .36, 1);
}

.map::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 6, 12, .42) 0%, transparent 16%),
    linear-gradient(180deg, rgba(4, 6, 12, .08), transparent 48%, rgba(4, 6, 12, .62));
}

.map::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 0 !important;
  pointer-events: none;
  box-shadow: inset 0 0 72px rgba(2, 3, 8, .42);
}

.map-actions {
  position: absolute;
  z-index: 4;
  right: clamp(18px, 2.4vw, 42px);
  bottom: clamp(18px, 2.4vw, 38px);
  left: clamp(18px, 2.4vw, 42px);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
}

.map-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 58%, white 16%);
  border-radius: 999px;
  color: #f5f7fb;
  background: rgba(6, 8, 16, .82);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .38),
    0 0 18px color-mix(in srgb, var(--mode-accent) 18%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--h);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  pointer-events: auto;
  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.map-action svg {
  width: 18px;
  height: 18px;
  margin-right: 9px;
  flex: 0 0 18px;
}

.map-action:hover,
.map-action:focus-visible {
  border-color: var(--mode-accent);
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--mode-accent) 54%, transparent);
  transform: translateY(-2px);
}

@media (max-width: 960px) {
  .fin-l .fin-title {
    max-width: 700px;
    font-size: clamp(32px, 7vw, 58px);
  }

  .fin-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .fin-l {
    min-height: 430px;
    padding-right: var(--pad);
  }

  .map {
    min-height: min(56vw, 520px);
  }
}

@media (max-width: 560px) {
  .fin {
    padding-top: 0 !important;
  }

  .fin-l .fin-title {
    margin-bottom: 20px;
    font-size: clamp(28px, 9vw, 42px);
    letter-spacing: -.055em;
  }

  .fin-l .fin-title span {
    white-space: normal;
  }

  .fin-l {
    min-height: 0;
    padding: 30px var(--pad) 38px;
  }

  .fin-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .fin-cta {
    margin-top: 8px;
  }

  .map {
    min-height: 420px;
  }

  .map-actions {
    align-items: flex-end;
  }
}

/* ========================================================================== */
/* ЛОКАЛЬНАЯ OSM-КАРТА: Ч/Б ОСНОВА + РЕЖИМНЫЕ ДОРОГИ И КИРОВА, 167          */
/* ========================================================================== */

.map-viewport {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background:
    radial-gradient(circle at 64% 42%, #20232a 0%, #12141a 58%, #090a0e 100%);
}

.map-viewport.is-dragging {
  cursor: grabbing;
}

.map-stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.map-raster,
.map-vector,
.map-vector svg {
  display: block;
  width: 100%;
  height: 100%;
}

.map-raster,
.map-vector {
  position: absolute;
  inset: 0;
}

.map-raster {
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
}

.map-vector {
  z-index: 1;
  pointer-events: none;
}

.map-vector svg {
  overflow: visible;
}

.map-load-error {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, 78%);
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  transform: translate(-50%, -50%);
}

.map-vector .osm-land {
  fill: #20242a;
  stroke: #30343b;
  stroke-width: 1;
}

.map-vector .osm-water {
  fill: #171c23;
  stroke: #454b55;
  stroke-width: 1.5;
}

.map-vector .osm-buildings {
  fill: #30333a;
  stroke: #4a4e57;
  stroke-width: 1.1;
}

.map-vector .osm-roads {
  fill: none;
  stroke: #a2a5ab;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5;
}

.map-vector .osm-rails {
  fill: none;
  stroke: #9699a0;
  stroke-width: 1.35;
  stroke-dasharray: 7 7;
  opacity: .38;
}

.map-vector .osm-road-accent {
  fill: none;
  stroke: var(--mode-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mode-accent) 64%, transparent));
  transition:
    stroke .58s cubic-bezier(.22, .61, .36, 1),
    filter .58s cubic-bezier(.22, .61, .36, 1);
}

.map-vector .osm-road-labels text {
  fill: rgba(244, 246, 251, .78);
  font-family: var(--b);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-anchor: middle;
  paint-order: normal;
  stroke: none;
}

.map-vector .osm-target-building {
  fill: var(--mode-accent);
  stroke: color-mix(in srgb, var(--mode-accent) 72%, white 28%);
  stroke-width: 4;
  filter:
    drop-shadow(0 0 8px var(--mode-accent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--mode-accent) 66%, transparent));
  transition:
    fill .58s cubic-bezier(.22, .61, .36, 1),
    stroke .58s cubic-bezier(.22, .61, .36, 1),
    filter .58s cubic-bezier(.22, .61, .36, 1);
}

.map-controls {
  position: absolute;
  z-index: 5;
  top: clamp(14px, 1.5vw, 24px);
  right: clamp(14px, 1.5vw, 24px);
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(6, 8, 14, .82);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.map-controls button {
  display: grid;
  width: 42px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  background: transparent;
  font: 700 22px/1 var(--h);
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}

.map-controls button:last-child {
  border-bottom: 0;
  font-size: 18px;
}

.map-controls button:hover,
.map-controls button:focus-visible {
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
}

.map-attribution {
  position: absolute;
  z-index: 5;
  bottom: 12px;
  left: 14px;
  padding: 5px 8px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .68);
  background: rgba(4, 6, 11, .76);
  font-size: 10px;
  line-height: 1.2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.map-attribution a {
  color: inherit;
  text-decoration: none;
}

.map-attribution a:hover,
.map-attribution a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .map-actions {
    flex-wrap: wrap;
  }

  .map-action {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 11px;
  }

  .map-attribution {
    bottom: 116px;
  }
}

/* FAQ расположен выше старых общих правил соцсетей: фиксируем режимные
   пиктограммы на светлой панели окна в самом конце каскада. */
#faq .side .msg {
  border: 1px solid color-mix(in srgb, var(--mode-accent) 42%, #cdd2dc);
  background: #fff;
}

#faq .side .social-icon {
  background: color-mix(in srgb, var(--mode-accent) 74%, #121722);
  transition: background-color .24s ease, filter .24s ease, transform .24s ease;
}

#faq .side .social-icon::after {
  display: none;
}

#faq .side .msg:hover,
#faq .side .msg:focus-visible {
  border-color: transparent;
  background: var(--mode-accent);
}

#faq .side .msg:hover .social-icon,
#faq .side .msg:focus-visible .social-icon {
  background: var(--mode-on-accent, #071018);
  filter: none;
}

/* FAQ без плашек: заголовок и Windows-окно лежат прямо на фоне секции. */
#faq .faq-head .h2 {
  color: #f7f8fc;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}

#faq .chat,
#faq .chat-workspace,
#faq .msgs,
#faq .quick,
#faq .side {
  background: transparent !important;
  box-shadow: none;
}

#faq .chat {
  border-color: color-mix(in srgb, var(--mode-accent) 60%, rgba(255, 255, 255, .2));
}

#faq .chat-top {
  color: #f7f8fc;
  border-bottom-color: rgba(255, 255, 255, .15) !important;
  background: transparent !important;
}

#faq .chat-title small,
#faq .side p,
#faq .on-lbl {
  color: rgba(247, 248, 252, .66);
}

#faq .window-action {
  color: #f7f8fc;
}

#faq .window-action:hover,
#faq .window-action:focus-visible {
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
}

#faq .window-action-close:hover,
#faq .window-action-close:focus-visible {
  color: #fff;
  background: #e81123;
}

#faq .msgs {
  color: #f7f8fc;
  border-right-color: rgba(255, 255, 255, .13);
}

#faq .bub.adm {
  color: #f7f8fc;
  border-color: color-mix(in srgb, var(--mode-accent) 28%, rgba(255, 255, 255, .14));
  background: rgba(6, 9, 16, .66);
  backdrop-filter: blur(12px);
}

#faq .quick {
  border-color: rgba(255, 255, 255, .13) !important;
}

#faq .side {
  color: #f7f8fc;
  border-top-color: rgba(255, 255, 255, .13);
}

#faq .side h3 {
  color: #f7f8fc;
}

#faq .side .msg {
  border-color: color-mix(in srgb, var(--mode-accent) 52%, rgba(255, 255, 255, .2));
  background: transparent;
}

@media (max-width: 980px) {
  #faq .msgs {
    border-bottom-color: rgba(255, 255, 255, .13);
  }
}

#faq .window-action svg {
  display: block;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#faq .window-action-static {
  opacity: .48;
  pointer-events: none;
  cursor: default;
}

#faq .window-action:not(.window-action-static) {
  cursor: pointer;
}

#faq .side .msg {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border-radius: 4px;
}

#faq .side .social-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

#faq::after {
  content: none;
  display: none;
}

/* Системные знаки окна декоративны: реагируют визуально, но не кликаются. */
#faq .window-action-static {
  opacity: .7;
  pointer-events: auto;
  cursor: default;
  user-select: none;
}

#faq .window-action-static:hover {
  opacity: 1;
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
}

#faq .window-action-static.window-action-close:hover {
  color: #fff;
  background: #e81123;
}

/* Финальная композиция FAQ: секция пропускает общий фон и круговой узор,
   а само окно администратора снова остаётся светлым. */
#faq {
  background: transparent !important;
}

#faq .faq-head .h2 {
  max-width: 980px;
  font-size: clamp(30px, 4vw, 62px);
  line-height: .96;
  color: transparent;
  background: linear-gradient(
    105deg,
    #fff 0 28%,
    var(--mode-accent) 70%,
    var(--mode-accent-2) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#faq .chat {
  color: #11141c;
  background: #fff !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 255, 255, .16);
}

#faq .chat-top {
  color: #151821;
  border-bottom-color: #d9dce4 !important;
  background: linear-gradient(180deg, #fafbfc, #eef0f4) !important;
}

#faq .chat-title small {
  color: #626a78;
}

#faq .window-action {
  color: #252a35;
}

#faq .chat-workspace,
#faq .quick {
  background: #fff !important;
}

#faq .msgs {
  color: #171b24;
  border-right-color: #e1e4ea;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--mode-accent) 8%, transparent), transparent 42%),
    #f7f8fa !important;
}

#faq .bub.adm {
  color: #1b2029;
  border-color: #dfe3e9;
  background: #fff;
  backdrop-filter: none;
}

#faq .side {
  color: #171b24;
  border-top-color: #e1e4ea;
  background: #f2f4f7 !important;
}

#faq .side h3 {
  color: #121620;
}

#faq .side p,
#faq .on-lbl {
  color: #5b6370;
}

#faq .side .msg {
  background: #fff;
}

@media (max-width: 980px) {
  #faq .msgs {
    border-bottom-color: #e1e4ea;
  }
}

/* ========================================================================== */
/* FAQ — ФИНАЛЬНОЕ ТЁМНОЕ ОКНО БЕЗ ЗАЛИВКИ ЗА ЗАГОЛОВКОМ                    */
/* ========================================================================== */

/* У фиксированного логотипа нет фонового градиента на любом участке скролла. */
.nav::before,
.nav.solid::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

#faq,
#faq .faq-card,
#faq .faq-head,
#faq .faq-body {
  background: transparent !important;
  box-shadow: none !important;
}

#faq .faq-head::before,
#faq .faq-head::after {
  content: none !important;
  display: none !important;
}

/* Только контурные круги — без второго градиентного слоя и прямоугольной
   цветовой плашки, которая раньше перекрывала линии. */
#faq::before {
  right: -7%;
  width: min(72vw, 1280px);
  background: repeating-radial-gradient(
    circle at 100% 34%,
    transparent 0 30px,
    color-mix(in srgb, var(--mode-accent) 22%, transparent) 31px 33px,
    transparent 34px 68px
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .52) 24%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .52) 24%, #000 52%);
  opacity: .78;
}

#faq::after {
  content: none !important;
  display: none !important;
}

#faq .faq-head .h2 {
  max-width: 940px;
  font-size: clamp(29px, 3.65vw, 56px);
  line-height: .96;
  color: transparent;
  background: linear-gradient(
    105deg,
    #fff 0 28%,
    var(--mode-accent) 70%,
    var(--mode-accent-2) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#faq .chat {
  height: clamp(570px, 68vh, 720px);
  min-height: 0;
  color: #f5f7fb;
  border-color: color-mix(in srgb, var(--mode-accent) 62%, rgba(255, 255, 255, .18));
  background: #070a11 !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 255, 255, .035);
}

#faq .chat-top {
  flex: 0 0 58px;
  color: #f7f8fc;
  border-bottom-color: rgba(255, 255, 255, .1) !important;
  background: #10141e !important;
}

#faq .chat-title small,
#faq .side p,
#faq .on-lbl {
  color: rgba(238, 241, 248, .62);
}

#faq .chat-workspace {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #080b13 !important;
}

#faq .msgs {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #f7f8fc;
  border-right-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--mode-accent) 10%, transparent), transparent 45%),
    #070a11 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--mode-accent) transparent;
}

#faq .msgs::-webkit-scrollbar {
  width: 6px;
}

#faq .msgs::-webkit-scrollbar-track {
  background: transparent;
}

#faq .msgs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mode-accent), var(--mode-accent-2));
}

#faq .quick {
  min-height: 0;
  overflow-y: auto;
  border-color: rgba(255, 255, 255, .1) !important;
  background: #0a0e17 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--mode-accent) transparent;
}

#faq .bub.adm {
  color: #eef1f7;
  border-color: rgba(255, 255, 255, .11);
  background: #151a26;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

#faq .bub.me {
  color: var(--mode-on-accent, #071018);
  background: linear-gradient(115deg, var(--mode-accent), var(--mode-accent-2));
}

#faq .qb {
  color: color-mix(in srgb, var(--mode-accent) 76%, #f7f8fc);
  border-color: color-mix(in srgb, var(--mode-accent) 58%, rgba(255, 255, 255, .16));
  background: rgba(255, 255, 255, .018);
}

#faq .qb:hover,
#faq .qb:focus-visible {
  color: var(--mode-on-accent, #071018);
  border-color: transparent;
  background: linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2));
}

#faq .side {
  min-height: 112px;
  color: #f7f8fc;
  border-top-color: rgba(255, 255, 255, .1);
  background: #0e121c !important;
}

#faq .side h3 {
  color: #f7f8fc;
}

#faq .side .msg {
  color: var(--mode-accent);
  border-color: color-mix(in srgb, var(--mode-accent) 52%, rgba(255, 255, 255, .16));
  background: transparent;
}

#faq .side .social-icon {
  background: color-mix(in srgb, var(--mode-accent) 78%, #fff);
}

/* CTA инвертирует логику кнопки бронирования: режимная в покое, белая при hover. */
#faq #askBtn {
  position: relative;
  overflow: hidden;
  color: var(--mode-on-accent, #071018);
  border: 1px solid transparent;
  background: linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--mode-accent) 18%, transparent);
  transition: color .2s ease, background .25s ease, box-shadow .25s ease, transform .2s ease;
}

#faq #askBtn:hover,
#faq #askBtn:focus-visible {
  color: #071018;
  background: linear-gradient(110deg, #fff 0%, #eef2ff 52%, #e5fff5 100%);
  box-shadow: 0 15px 36px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

/* Все три системные знака декоративны; подсветка остаётся только визуальной. */
#faq .window-actions {
  align-items: center;
  gap: 5px;
  padding: 7px;
}

#faq .window-action,
#faq .window-action-static {
  width: 42px;
  height: 42px;
  min-height: 42px;
  color: rgba(247, 248, 252, .68);
  border-radius: 8px;
  opacity: 1;
}

#faq .window-action-static:hover {
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
}

#faq .window-action-static.window-action-close:hover {
  color: #fff;
  background: #e81123;
}

/* Живой статус пульсирует зелёным, офлайн-статус остаётся красным. */
#faq [data-live-status]:not(.is-offline) .online-dot {
  background: #35e46b;
  box-shadow: 0 0 0 3px rgba(53, 228, 107, .12), 0 0 14px rgba(53, 228, 107, .78);
  animation: faqStatusPulse 1.65s ease-in-out infinite;
}

#faq [data-live-status].is-offline .online-dot {
  background: #ff354d;
  box-shadow: 0 0 0 3px rgba(255, 53, 77, .12), 0 0 12px rgba(255, 53, 77, .55);
  animation: none;
}

@keyframes faqStatusPulse {
  0%, 100% { opacity: .58; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 980px) {
  #faq .chat {
    height: auto;
    min-height: 680px;
  }

  #faq .chat-workspace {
    grid-template-rows: minmax(260px, 38vh) auto auto;
  }

  #faq .msgs {
    border-bottom-color: rgba(255, 255, 255, .1);
  }
}

/* FAQ: снаружи нет ни одного залитого слоя — только линии. */
#faq {
  background: none !important;
  background-color: transparent !important;
}

#faq > .faq-card,
#faq > .faq-card > .faq-head,
#faq > .faq-card > .faq-body {
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

#faq::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
  background-image: repeating-radial-gradient(
    circle at 92% 38%,
    transparent 0 30px,
    color-mix(in srgb, var(--mode-accent) 21%, transparent) 31px 33px,
    transparent 34px 68px
  ) !important;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .72;
}

#faq .faq-head .h2 {
  line-height: 1.08;
  padding-bottom: .12em;
  overflow: visible;
  background-size: 100% 100%;
}

/* Единственная сплошная плашка во всём блоке — само окно чата. */
#faq .chat {
  overflow: hidden;
  border-radius: 18px;
  background: #070a11 !important;
}

/* Заголовок вынесен из старой карточки: за ним физически нет залитого блока. */
#faq > .faq-head {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#faq > .faq-card {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Цвет логотипа сохраняется, но режимное свечение вокруг него отключено. */
.nav .header-logo__color {
  filter: none !important;
}

body::before {
  transition: opacity .24s ease;
}

body.faq-in-view::before {
  opacity: 0 !important;
}

/* Кнопки остаются визуально стабильными: режимный градиент сохраняется,
   но его бесконечное движение больше не воспринимается как мерцание. */
.modes .pick,
.foot-cta .btn,
#faq #askBtn {
  animation: none !important;
  background-position: 50% 50%;
}

/* Стабильный hover социальных иконок. Отдельный полупрозрачный слой поверх
   SVG-mask в Chromium/Yandex мог мигнуть на один кадр при уходе курсора. */
.nav .social-icon::after,
.reach .social-icon::after {
  display: none !important;
}

.nav .social-icon,
.reach .social-icon {
  filter: none !important;
  transform: none !important;
  backface-visibility: hidden;
  transition: background-color .18s ease !important;
}

.nav .msg:hover .social-icon,
.nav .msg:focus-visible .social-icon {
  background: linear-gradient(135deg, var(--mode-accent), var(--mode-accent-2)) !important;
  filter: none !important;
  transform: none !important;
}

.foot .reach .msg:hover .social-icon,
.foot .reach .msg:focus-visible .social-icon,
.fin .reach .msg:hover .social-icon,
.fin .reach .msg:focus-visible .social-icon,
#faq .side .msg:hover .social-icon,
#faq .side .msg:focus-visible .social-icon {
  filter: none !important;
  transform: none !important;
}

/* FAQ: кольца неподвижны геометрически, но режимный градиент обходит их по
   окружности. Так появляется ощущение вращения без сдвига контента. */
@property --faq-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}

#faq::before {
  --faq-ring-angle: 0turn;
  background-color: transparent !important;
  background-image: conic-gradient(
    from var(--faq-ring-angle) at 92% 38%,
    transparent 0 7%,
    color-mix(in srgb, var(--mode-accent) 78%, transparent) 18%,
    color-mix(in srgb, var(--mode-accent-2) 92%, transparent) 32%,
    transparent 46%,
    color-mix(in srgb, var(--mode-accent) 88%, transparent) 62%,
    color-mix(in srgb, var(--mode-accent-2) 72%, transparent) 78%,
    transparent 94% 100%
  ) !important;
  -webkit-mask-image: repeating-radial-gradient(
    circle at 92% 38%,
    transparent 0 30px,
    #000 31px 33px,
    transparent 34px 68px
  ) !important;
  mask-image: repeating-radial-gradient(
    circle at 92% 38%,
    transparent 0 30px,
    #000 31px 33px,
    transparent 34px 68px
  ) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: faqRingOrbit 10s linear infinite;
}

@keyframes faqRingOrbit {
  to { --faq-ring-angle: 1turn; }
}

@media (prefers-reduced-motion: reduce) {
  #faq::before { animation: none; }
}

/* Фиксированный логотип всегда остаётся чистым: без подложки, свечения или
   тени независимо от секции, находящейся под ним во время прокрутки. */
.nav::before,
.nav::after,
.nav .logo::before,
.nav .logo::after,
.nav .header-logo::before,
.nav .header-logo::after {
  content: none !important;
  display: none !important;
}

.nav,
.nav.solid,
.nav .logo,
.nav .header-logo,
.nav .header-logo__color,
.nav .header-logo__white {
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Стоимость: открытая композиция без внешней карточки. Слева режимный цвет
   мягко растворяется в прозрачность, справа за контентом падают монеты. */
.cost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
}

.cost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mode-accent) 34%, #03050c) 0%,
    color-mix(in srgb, var(--mode-accent-2) 23%, transparent) 28%,
    color-mix(in srgb, var(--mode-accent) 9%, transparent) 52%,
    transparent 78%
  );
}

.cost-card {
  position: relative;
  z-index: 2;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cost-r {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cost-coins {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(52vw, 820px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 100%);
}

.cost-coins i {
  position: absolute;
  top: -64px;
  left: var(--x);
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border: 1px solid color-mix(in srgb, var(--mode-accent) 68%, white 14%);
  border-radius: 50%;
  color: color-mix(in srgb, var(--mode-accent) 74%, white 18%);
  background: color-mix(in srgb, var(--mode-accent-2) 17%, rgba(3, 5, 12, .5));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--mode-accent) 12%, transparent),
    0 0 15px color-mix(in srgb, var(--mode-accent) 24%, transparent);
  font-family: var(--h);
  font-size: calc(var(--size) * .47);
  font-style: normal;
  font-weight: 800;
  opacity: 0;
  will-change: transform, opacity;
  animation: costCoinFall var(--duration) linear var(--delay) infinite;
}

@keyframes costCoinFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -80px, 0) rotateY(0deg) rotateZ(0deg);
  }
  12% { opacity: .58; }
  78% { opacity: .4; }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 760px, 0) rotateY(540deg) rotateZ(120deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cost-coins i { animation: none; }
}

@media (max-width: 760px) {
  .cost-coins {
    width: 72vw;
    opacity: .62;
  }
}

/* Глобальная сетка и курсорное свечение удалены со всего сайта, поэтому за
   фиксированным логотипом на любой секции остаётся только чистый фон блока. */
body::before,
body.faq-in-view::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Стоимость занимает всю доступную видимую область и остаётся открытой —
   без внешнего контейнера. */
.cost {
  --cost-text: color-mix(in srgb, var(--mode-accent) 68%, #fff 32%);
  --cost-muted: color-mix(in srgb, var(--mode-accent) 34%, #d8dce7 66%);
  display: flex;
  min-height: 100svh;
  padding: clamp(96px, 12vh, 150px) var(--pad) clamp(64px, 8vh, 100px);
  align-items: center;
  color: var(--cost-text);
  transition: color .48s ease;
}

.cost-card {
  grid-template-columns: minmax(340px, .84fr) minmax(0, 1.36fr);
  gap: clamp(42px, 6vw, 120px);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.cost-l .h2,
.cost-r .step-lbl,
.cost-sum,
.cost .base .t {
  color: var(--cost-text);
  transition: color .48s ease;
}

.cost-l .lead,
.cost-r .hint,
.cost-r .micro {
  color: var(--cost-muted);
  transition: color .48s ease;
}

.cost .base li svg,
.cost-sum b {
  color: var(--mode-accent);
  transition: color .48s ease;
}

/* Объёмный жетон: внешний repeating-conic-gradient формирует рифлёное ребро,
   лицевая часть и внутреннее кольцо лежат на разных Z-плоскостях. */
.cost-coins {
  perspective: 850px;
}

.cost-coins i {
  border: 0;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--mode-accent) 88%, white 12%) 0 4deg,
    color-mix(in srgb, var(--mode-accent-2) 62%, #02040a) 4deg 8deg
  );
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .38),
    0 0 18px color-mix(in srgb, var(--mode-accent) 20%, transparent);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.cost-coins i::before,
.cost-coins i::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cost-coins i::before {
  inset: 4px;
  background:
    radial-gradient(circle at 30% 23%, rgba(255, 255, 255, .8), transparent 17%),
    radial-gradient(circle at 50% 52%,
      color-mix(in srgb, var(--mode-accent) 72%, white 15%) 0 23%,
      color-mix(in srgb, var(--mode-accent-2) 84%, #090b14) 25% 52%,
      color-mix(in srgb, var(--mode-accent) 70%, #02040a) 54% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    inset -5px -6px 10px rgba(0, 0, 0, .32),
    inset 4px 4px 9px rgba(255, 255, 255, .14);
  transform: translateZ(3px);
}

.cost-coins i::after {
  inset: 27%;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 76%, white 24%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mode-accent-2) 22%, transparent),
    inset 0 0 6px rgba(255, 255, 255, .16);
  transform: translateZ(5px);
}

@keyframes costCoinFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -90px, 0) rotateX(64deg) rotateY(0deg) rotateZ(0deg);
  }
  10% { opacity: .7; }
  78% { opacity: .48; }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 104vh, 0) rotateX(64deg) rotateY(900deg) rotateZ(180deg);
  }
}

@media (max-width: 900px) {
  .cost {
    min-height: auto;
  }

  .cost-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* Компактнее по высоте, сохраняя полноширинную композицию. */
.cost {
  min-height: 86svh;
  padding-top: clamp(68px, 8vh, 96px);
  padding-bottom: clamp(46px, 6vh, 72px);
}

/* На светлой режимной палитре цена чёрная, на тёмной — белая. */
.cost .from b {
  color: var(--mode-on-accent, #f7f8ff) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: color .48s ease;
}

/* Усиливаем заливку слева, чтобы чёрная цена сохраняла контраст на светлых
   режимах; справа цвет по-прежнему полностью уходит в альфа-канал. */
.cost::before {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mode-accent) 72%, #03050c) 0%,
    color-mix(in srgb, var(--mode-accent-2) 34%, transparent) 30%,
    color-mix(in srgb, var(--mode-accent) 10%, transparent) 54%,
    transparent 78%
  );
}

/* Реальная визуальная толщина: рифлёный нижний слой, промежуточное ребро и
   отдельная лицевая плоскость. Монета больше не разворачивается ребром в ноль. */
.cost-coins i {
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
}

.cost-coins i::before {
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--mode-accent) 92%, white 8%) 0 2px,
    color-mix(in srgb, var(--mode-accent-2) 54%, #03050c) 2px 4px
  );
  box-shadow:
    0 7px 12px rgba(0, 0, 0, .38),
    0 0 14px color-mix(in srgb, var(--mode-accent) 19%, transparent);
  transform: translate3d(0, 7px, -5px);
}

.cost-coins i::after {
  inset: 1px;
  z-index: 1;
  border: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mode-accent) 64%, white 12%),
    color-mix(in srgb, var(--mode-accent-2) 70%, #03050c)
  );
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .38);
  transform: translate3d(0, 4px, -2px);
}

.cost-coins i > span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 74%, white 26%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .88), transparent 16%),
    radial-gradient(circle at 50% 52%,
      color-mix(in srgb, var(--mode-accent) 76%, white 12%) 0 25%,
      color-mix(in srgb, var(--mode-accent-2) 82%, #0a0c14) 27% 55%,
      color-mix(in srgb, var(--mode-accent) 67%, #02040a) 57% 100%);
  box-shadow:
    inset 4px 4px 8px rgba(255, 255, 255, .16),
    inset -6px -7px 10px rgba(0, 0, 0, .36);
  transform: translateZ(4px);
}

.cost-coins i > span::before {
  content: "";
  position: absolute;
  inset: 25%;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 72%, white 28%);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mode-accent-2) 20%, transparent),
    inset 0 0 7px rgba(255, 255, 255, .18);
}

@keyframes costCoinFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -90px, 0) rotateX(56deg) rotateY(-16deg) rotateZ(0deg);
  }
  10% { opacity: .76; }
  48% {
    opacity: .62;
    transform: translate3d(calc(var(--drift) * .45), 48vh, 0) rotateX(46deg) rotateY(17deg) rotateZ(185deg);
  }
  80% { opacity: .5; }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 96vh, 0) rotateX(56deg) rotateY(-16deg) rotateZ(360deg);
  }
}

/* Та же логика, что у верхней кнопки бронирования: светлая в покое,
   режимная с автоматическим контрастом и бликом при наведении. */
#costGet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(440px, 100%);
  height: 48px;
  margin: 14px auto 0;
  color: #071018;
  background:
    linear-gradient(110deg, #fff 0%, #eef2ff 52%, #e5fff5 100%) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

#costGet:hover,
#costGet:focus-visible {
  color: var(--mode-on-accent, #f7f8ff);
  background:
    linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2)) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .38),
    0 0 28px color-mix(in srgb, var(--mode-accent) 30%, transparent);
}

/* Выбранное дополнение целиком принимает режимный цвет. Контраст текста и
   самой галочки рассчитывается тем же --mode-on-accent, что и у CTA. */
.cost .add.on {
  color: var(--mode-on-accent, #f7f8ff);
  border-color: color-mix(in srgb, var(--mode-on-accent) 28%, transparent);
  background: linear-gradient(115deg, var(--mode-accent), var(--mode-accent-2));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--mode-accent) 25%, transparent);
}

.cost .add.on b,
.cost .add.on small {
  color: inherit;
}

.cost .add.on .ck {
  color: var(--mode-accent);
  border-color: var(--mode-on-accent, #f7f8ff);
  background: var(--mode-on-accent, #f7f8ff);
}

.cost .add.on .ck svg {
  opacity: 1;
  color: inherit;
  stroke: currentColor;
}

/* Реальная GLB-модель монеты: canvas занимает только правую часть блока и
   остаётся под интерфейсом стоимости. */
.cost-coins canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.cost-coins .cost-coins-far {
  z-index: 0;
  opacity: .52;
  filter: blur(2.4px);
}

.cost-coins .cost-coins-near {
  z-index: 1;
}

/* Кнопка и пояснение образуют одну центральную вертикальную ось. */
.cost-r > .micro {
  width: min(440px, 100%);
  margin: 8px auto 0;
  text-align: center;
}

/* Стоимость — более компактная финальная композиция. */
.cost {
  min-height: 76svh;
  padding-top: clamp(44px, 5.5vh, 68px);
  padding-bottom: clamp(36px, 4.5vh, 56px);
}

/* Заголовок повторяет высоту FAQ, но направление градиента зеркальное. */
.cost-l .h2 {
  font-size: clamp(29px, 3.65vw, 56px);
  line-height: 1.08;
  padding-bottom: .12em;
  color: transparent;
  background: linear-gradient(
    105deg,
    var(--mode-accent-2) 0%,
    var(--mode-accent) 30%,
    #fff 72%,
    #fff 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* На светлой палитре цена соединяет строгий тёмный цвет с цветом режима.
   На тёмной палитре прежняя белая цена сохраняется. */
.mode-is-light .cost .from b {
  color: transparent !important;
  background: linear-gradient(
    105deg,
    #071018 0%,
    color-mix(in srgb, var(--mode-accent-2) 58%, #071018 42%) 48%,
    var(--mode-accent) 100%
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Описание без промежуточных оттенков: строго тёмное или строго белое. */
.cost-l .lead {
  color: var(--mode-on-accent, #f7f8ff);
}

/* Неактивные дополнения остаются тёмными, но получают едва заметный оттенок
   текущего режима. */
.cost .add:not(.on) {
  color: #f7f8ff;
  border-color: color-mix(in srgb, var(--mode-accent) 28%, rgba(255, 255, 255, .1));
  background: color-mix(in srgb, #050812 91%, var(--mode-accent) 9%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.cost .add:not(.on) .ck {
  color: var(--mode-accent);
  border-color: color-mix(in srgb, var(--mode-accent) 48%, #5b6270);
  background: color-mix(in srgb, #070a12 92%, var(--mode-accent) 8%);
}

/* Тёмная версия блока: никаких цветовых заливок фона, режим проявляется
   только в типографике, контурах, активных плашках и 3D-монетах. */
.cost {
  --cost-text: var(--mode-accent);
  --cost-muted: color-mix(in srgb, var(--mode-accent) 72%, var(--mode-accent-2) 28%);
  color: var(--mode-accent);
  background: #05070d !important;
  transition: color .42s ease, background-color .42s ease;
}

.cost::before,
.cost::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.cost-l .h2 {
  background: linear-gradient(
    105deg,
    var(--mode-accent-2) 0%,
    var(--mode-accent) 30%,
    #fff 72%,
    #fff 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cost .from span,
.cost-l .lead,
.cost .base .t,
.cost .base li,
.cost-r .step-lbl,
.cost-r .hint,
.cost-sum,
.cost-sum button,
.cost-r > .micro {
  color: var(--mode-accent) !important;
}

.cost .from b,
.mode-is-light .cost .from b {
  color: transparent !important;
  background: linear-gradient(
    105deg,
    #fff 0%,
    #fff 28%,
    var(--mode-accent) 70%,
    var(--mode-accent-2) 100%
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.cost .base,
.cost .add:not(.on) {
  border-color: color-mix(in srgb, var(--mode-accent) 42%, transparent);
  background: color-mix(in srgb, #070a12 94%, var(--mode-accent) 6%);
}

.cost .add:not(.on),
.cost .add:not(.on) b,
.cost .add:not(.on) small {
  color: var(--mode-accent);
}

#costGet {
  color: var(--mode-on-accent, #071018);
  background:
    linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2)) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .38),
    0 0 28px color-mix(in srgb, var(--mode-accent) 30%, transparent);
}

#costGet:hover,
#costGet:focus-visible {
  color: #071018;
  background:
    linear-gradient(110deg, #fff 0%, #eef2ff 52%, #e5fff5 100%) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

/* FAQ продолжает тёмный фон блока стоимости. Круговой рисунок и его
   анимация остаются отдельным псевдоэлементом поверх этой заливки. */
#faq {
  background: #05070d !important;
  background-color: #05070d !important;
}

/* ========================================================================== 
   ПОЛНОШИРИННЫЙ ВИДЕОПЛЕЕР
   ========================================================================== */

#space.space {
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: #020309 !important;
}

#space .vid-slot {
  width: 100%;
  max-width: none;
  margin: 0;
}

#space .vid {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: min(56.25vw, 100svh);
  max-height: 100svh;
  border: 0;
  border-radius: 0;
  background: #020309;
  box-shadow: none;
  isolation: isolate;
  outline: none;
  cursor: default;
}

#space .vid .pat {
  background-position: center !important;
  background-size: cover !important;
}

#space .vid::after {
  background:
    linear-gradient(0deg, rgba(2, 3, 9, .58), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(2, 3, 9, .3));
}

.vid-play,
.vid-bar {
  transition: opacity .18s ease, transform .2s ease;
}

.vid-play {
  z-index: 4;
  width: clamp(64px, 6.5vw, 104px);
  height: clamp(64px, 6.5vw, 104px);
  border: 0;
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
  box-shadow:
    0 0 0 9px color-mix(in srgb, var(--mode-accent) 12%, transparent),
    0 0 42px color-mix(in srgb, var(--mode-accent) 58%, transparent);
}

.vid-play:hover,
.vid-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
}

.vid-play svg {
  width: clamp(24px, 2.2vw, 36px);
  height: clamp(24px, 2.2vw, 36px);
}

.vid-bar {
  z-index: 5;
  left: clamp(14px, 2.5vw, 42px);
  right: clamp(14px, 2.5vw, 42px);
  bottom: clamp(14px, 2vw, 30px);
  gap: clamp(8px, 1vw, 15px);
  padding: 9px 10px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(2, 3, 9, .72), rgba(2, 3, 9, .42));
  backdrop-filter: blur(12px);
}

.vid-mini-toggle,
.vid-fullscreen {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--mode-accent);
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.vid-mini-toggle:hover,
.vid-mini-toggle:focus-visible,
.vid-fullscreen:hover,
.vid-fullscreen:focus-visible {
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
}

.vid-mini-toggle svg,
.vid-fullscreen svg {
  width: 19px;
  height: 19px;
}

.vid-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  box-shadow: none;
  touch-action: none;
}

.vid-fill {
  overflow: visible;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mode-accent-2), var(--mode-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--mode-accent) 72%, transparent);
}

.vid-thumb {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(var(--vid-progress, 0) * 1%);
  width: 13px;
  height: 13px;
  border: 2px solid var(--mode-on-accent, #071018);
  border-radius: 50%;
  background: var(--mode-accent);
  box-shadow: 0 0 12px var(--mode-accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.vid-time {
  min-width: 76px;
  color: #fff;
  text-align: center;
}

.vid.is-playing:not(.is-controls-visible) .vid-play,
.vid.is-playing:not(.is-controls-visible) .vid-bar {
  opacity: 0;
  pointer-events: none;
}

.vid.is-playing:not(.is-controls-visible) {
  cursor: none;
}

.vid:fullscreen,
.vid:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  aspect-ratio: auto;
  background: #020309;
}

.vid:fullscreen .pat,
.vid:-webkit-full-screen .pat {
  background-size: cover !important;
}

/* Мини-плеер наследует активную палитру режима. */
.vchip {
  border: 2px solid var(--mode-accent);
  background: #020309;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .62),
    0 0 22px color-mix(in srgb, var(--mode-accent) 28%, transparent);
}

.vchip .pl {
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--mode-accent) 13%, transparent);
}

.vchip .x {
  background: rgba(2, 3, 9, .72);
}

.vghost {
  border-color: var(--mode-accent);
}

.vlb-box {
  width: min(1280px, 100%);
}

.vlb-box .vid {
  border-color: var(--mode-accent);
}

@media (max-width: 640px) {
  #space .vid {
    min-height: 58vw;
  }

  .vid-bar {
    padding: 6px;
    border-radius: 10px;
  }

  .vid-time {
    display: none;
  }

  .vid-mini-toggle,
  .vid-fullscreen {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}

/* ========================================================================== 
   «ТРИ ЗАЛА»: 3D-ПЛАН + ПАНОРАМНЫЙ ПРОСМОТР
   ========================================================================== */

#halls.halls {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(58px, 6vw, 94px) var(--pad) !important;
  border: 0;
  background: #05070d !important;
}

#halls.halls::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .44;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--mode-accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--mode-accent) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 3%, transparent) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  mask-image: linear-gradient(90deg, #000 0 62%, transparent 100%);
}

#halls .halls-card {
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#halls .halls-head {
  display: block;
  width: 100%;
  padding: 0 0 clamp(22px, 3vw, 38px);
}

#halls .halls-title {
  margin: 0;
  color: #fff;
  background: none;
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-fill-color: currentColor;
}

#halls .halls-title span {
  display: inline;
}

#halls .halls-title span + span::before {
  content: " ";
}

#halls .halls-title span:last-child {
  color: transparent;
  background: linear-gradient(105deg, #fff 0 22%, var(--mode-accent) 68%, var(--mode-accent-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#halls .halls-head .lead {
  max-width: 520px;
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--mode-accent) 48%, #d8deec);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.5;
  text-align: left;
}

.hall-explorer {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
  min-height: clamp(520px, 44vw, 680px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 34%, transparent);
  border-radius: 28px;
  background: #05070d;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
}

.hall-blueprint {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
}

.hall-blueprint-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(color-mix(in srgb, var(--mode-accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--mode-accent) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
}

.hall-blueprint-grid::after {
  content: none;
  position: absolute;
  inset: 34px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 16%, transparent);
  clip-path: polygon(0 0, 24% 0, 24% 1px, 76% 1px, 76% 0, 100% 0, 100% 38%, calc(100% - 1px) 38%, calc(100% - 1px) 62%, 100% 62%, 100% 100%, 72% 100%, 72% calc(100% - 1px), 28% calc(100% - 1px), 28% 100%, 0 100%, 0 65%, 1px 65%, 1px 35%, 0 35%);
}

.hall-model {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1050px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.hall-model,
.hall-model * {
  -webkit-user-drag: none;
}

.hall-model:active {
  cursor: grabbing;
}

.hall-model:focus-visible {
  outline: 1px solid var(--mode-accent);
  outline-offset: -7px;
}

.hall-model-world {
  --hall-rx: 60deg;
  --hall-rz: -45deg;
  position: relative;
  width: min(128%, 650px);
  aspect-ratio: 1269 / 950;
  transform-style: preserve-3d;
  transform: rotateX(var(--hall-rx)) rotateZ(var(--hall-rz));
  transition: transform .12s linear;
  will-change: transform;
}

.hall-model.is-resetting .hall-model-world {
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.hall-model.is-dragging .hall-model-world {
  transition: none;
}

.plan-room {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  color: #dfe7f5;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%) translateZ(12px);
  transform-style: preserve-3d;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease, filter .25s ease;
}

.plan-room::before,
.plan-room::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.plan-room::before {
  inset: 5px;
  border-radius: inherit;
  background: #929aa8;
  box-shadow: none;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.plan-room::after {
  inset: -9px;
  border: 1px solid color-mix(in srgb, #aab2c0 42%, transparent);
  border-radius: inherit;
  animation: hallPointPulse 1.8s ease-out infinite;
}

.plan-room span {
  display: none;
}

.plan-room span b {
  color: var(--mode-accent);
  font-size: 10px;
  letter-spacing: .18em;
}

.plan-room:hover,
.plan-room:focus-visible,
.plan-room.is-active {
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.plan-room:hover::before,
.plan-room:focus-visible::before,
.plan-room.is-active::before {
  background: var(--mode-accent);
  box-shadow: 0 0 14px var(--mode-accent);
  transform: scale(1.15);
}

.plan-room.is-active::after {
  border-color: color-mix(in srgb, var(--mode-accent) 72%, transparent);
}

.plan-room-volume {
  display: none;
}

.hall-arrow-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.hall-room-arrow {
  position: absolute;
  display: block;
  width: 22px;
  height: 28px;
  color: #f4f7ff;
  font-style: normal;
  line-height: 1;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, .5));
  transform: translate(-50%, -100%);
  animation: hallArrowFloat 1.25s ease-in-out infinite;
}

.hall-room-arrow::before {
  content: "↓";
  display: block;
  font-family: var(--h);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

.hall-room-arrow.is-hidden {
  display: none;
}

@keyframes hallPointPulse {
  0% { opacity: .8; transform: scale(.62); }
  72%, 100% { opacity: 0; transform: scale(1.45); }
}

@keyframes hallArrowFloat {
  0%, 100% { opacity: .7; transform: translate(-50%, calc(-100% - 3px)); }
  50% { opacity: 1; transform: translate(-50%, calc(-100% + 3px)); }
}

.plan-room.is-active span b,
.plan-room:hover span b,
.plan-room:focus-visible span b {
  color: inherit;
}

.plan-room--banquet {
  left: 30%;
  top: 58.8%;
}

.plan-room--game {
  left: 77.7%;
  top: 26.8%;
}

.plan-room--dopamine {
  left: 76.4%;
  top: 45%;
}

.plan-core,
.plan-core-depth {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--mode-accent);
  -webkit-mask: url("./media/hall-plan-exact.svg") center / contain no-repeat;
  mask: url("./media/hall-plan-exact.svg") center / contain no-repeat;
}

.plan-core {
  z-index: 1;
  filter: none;
  transform: translateZ(12px);
}

.plan-core-depth {
  display: none;
}

.plan-core::after {
  content: none;
}

.plan-stairs {
  display: none;
}

.plan-stairs i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 12%;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 72%, #fff 8%);
  background: color-mix(in srgb, var(--mode-accent) 14%, #080b13);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--mode-accent) 18%, #02030a);
}

.plan-stairs i:nth-child(1){top:0;transform:translateZ(26px)}
.plan-stairs i:nth-child(2){top:10%;transform:translateZ(20px)}
.plan-stairs i:nth-child(3){top:20%;transform:translateZ(14px)}
.plan-stairs i:nth-child(4){top:30%;transform:translateZ(8px)}
.plan-stairs i:nth-child(5){top:40%;transform:translateZ(2px)}
.plan-stairs i:nth-child(6){top:50%;transform:translateZ(-4px)}
.plan-stairs i:nth-child(7){top:60%;transform:translateZ(-10px)}
.plan-stairs i:nth-child(8){top:70%;transform:translateZ(-16px)}
.plan-stairs i:nth-child(9){top:80%;transform:translateZ(-22px)}

.hall-model-ui {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: 15px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8e9aaf;
  font-size: 11px;
  letter-spacing: .04em;
}

.hall-model-ui span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hall-model-ui span i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mode-accent);
  box-shadow: 0 0 10px var(--mode-accent);
}

.hall-model-ui button {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 34%, transparent);
  border-radius: 999px;
  color: var(--mode-accent);
  font-size: 11px;
}

.hall-model-ui button:hover,
.hall-model-ui button:focus-visible {
  color: var(--mode-on-accent, #071018);
  background: var(--mode-accent);
}

.hall-panorama {
  --pan-x: 50%;
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  background: #03050a;
  cursor: ew-resize;
  touch-action: pan-y;
  outline: none;
}

.hall-panorama:focus-visible {
  box-shadow: inset 0 0 0 2px var(--mode-accent);
}

.hall-panorama-image {
  position: absolute;
  z-index: -3;
  inset: -4%;
  background-image: url("./media/hall-banquet.webp");
  background-repeat: no-repeat;
  background-position: var(--pan-x) center;
  background-size: 165% auto;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.05);
  transition: opacity .3s ease, filter .3s ease;
  will-change: background-position;
}

.hall-panorama.is-switching .hall-panorama-image {
  opacity: .25;
  filter: blur(8px) saturate(.7);
}

.hall-panorama-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 5, 10, .9) 0%, rgba(3, 5, 10, .54) 42%, rgba(3, 5, 10, .12) 78%),
    linear-gradient(0deg, rgba(3, 5, 10, .88), transparent 48%);
}

.hall-panorama::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--mode-accent), var(--mode-accent-2), transparent);
  box-shadow: 0 0 24px var(--mode-accent);
}

.hall-panorama-drag {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .7);
  background: rgba(3, 5, 10, .42);
  backdrop-filter: blur(10px);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hall-panorama-drag span {
  color: var(--mode-accent);
  font-family: var(--h);
  font-weight: 800;
}

.hall-panorama-copy {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 52px);
  left: clamp(20px, 4vw, 56px);
  max-width: 520px;
  color: #fff;
}

.hall-panorama-count {
  color: var(--mode-accent);
  font-family: var(--h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}

.hall-panorama-copy h3 {
  margin-top: 9px;
  font-family: var(--h);
  font-size: clamp(30px, 3.5vw, 58px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.hall-panorama-for {
  margin-top: 10px;
  color: color-mix(in srgb, var(--mode-accent) 66%, #fff);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hall-panorama-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  list-style: none;
}

.hall-panorama-copy li {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 48%, transparent);
  border-radius: 999px;
  color: #e7ebf5;
  background: rgba(3, 5, 10, .46);
  backdrop-filter: blur(9px);
  font-size: 12px;
}

@media (max-width: 980px) {
  #halls .halls-head {
    width: 100%;
  }

  .hall-explorer {
    grid-template-columns: 1fr;
  }

  .hall-blueprint {
    min-height: 500px;
    border: 0;
  }

  .hall-panorama {
    min-height: 560px;
  }
}

@media (max-width: 600px) {
  #halls.halls {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  #halls .halls-title {
    font-size: clamp(24px, 7.3vw, 42px);
  }

  .hall-explorer {
    border-radius: 19px;
  }

  .hall-blueprint {
    min-height: 410px;
  }

  .hall-model {
    inset: 0;
  }

  .hall-model-world {
    width: min(120%, 520px);
  }

  .hall-model-ui span {
    max-width: 190px;
  }

  .hall-panorama {
    min-height: 520px;
  }

  .hall-panorama-image {
    background-size: 205% auto;
  }

  .hall-panorama-copy h3 {
    font-size: clamp(30px, 10vw, 44px);
  }
}

/* Финальные приоритеты компоновки блока залов. */
#halls.halls {
  min-height: clamp(680px, 86vh, 920px);
  padding: 0 !important;
}

#halls .halls-card {
  display: grid;
  grid-template-columns: minmax(430px, 42%) minmax(0, 58%);
  width: 100%;
  max-width: none;
  min-height: clamp(680px, 86vh, 920px);
  margin: 0;
}

#halls .halls-head {
  width: 100%;
  padding: 0;
}

#halls .halls-title {
  font-size: clamp(31px, 3.1vw, 58px);
  white-space: normal;
}

#halls .halls-title span {
  display: block;
}

#halls .halls-title span + span::before {
  content: none;
}

.halls-plan-side {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  padding: clamp(42px, 5vw, 76px) clamp(24px, 4vw, 68px) clamp(26px, 3vw, 46px);
  background: #05070d;
}

.hall-blueprint {
  min-height: 430px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.hall-blueprint-grid {
  display: none;
}

.hall-panorama {
  min-height: 100%;
  border: 0;
  border-radius: 0;
}

.hall-panorama-viewer,
.hall-panorama-viewer.pnlm-container {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hall-panorama-shade { z-index: 1; }
.hall-panorama-drag,
.hall-panorama-copy { z-index: 2; }
.hall-panorama::after { z-index: 3; }

.hall-panorama-copy ul {
  display: grid;
  gap: 7px;
  max-width: 440px;
}

.hall-panorama-copy li {
  position: relative;
  padding: 0 0 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.hall-panorama-copy li::before {
  content: "";
  position: absolute;
  top: .52em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mode-accent);
  box-shadow: 0 0 10px var(--mode-accent);
}

@media (max-width: 980px) {
  #halls .halls-card { grid-template-columns: 1fr; }
  .halls-plan-side { min-height: 650px; }
  .hall-panorama { min-height: 680px; }
}

@media (max-width: 600px) {
  #halls.halls { padding: 0 !important; }
  .halls-plan-side { min-height: 570px; padding: 38px 16px 24px; }
  .hall-blueprint { min-height: 360px; }
  .hall-panorama { min-height: 620px; }
}

/* Естественная 360°-подача и увеличенный план. */
.hall-model {
  inset: -20px clamp(-96px, -6vw, -42px) 4px;
}

.hall-model-world {
  width: min(142%, 740px);
}

.hall-panorama-shade,
.hall-panorama-drag,
.hall-panorama-copy {
  pointer-events: none;
}

.hall-panorama-viewer .pnlm-dragfix,
.hall-panorama-viewer canvas {
  touch-action: none;
}

.halls-ticker {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 0;
  padding: 9px 0;
}

.halls-ticker .ticker-track {
  animation-duration: 32s;
}

.halls-ticker .ticker-track span {
  gap: clamp(9px, 1.2vw, 18px);
  padding-right: clamp(9px, 1.2vw, 18px);
  font-size: clamp(11px, 1.5vw, 20px);
}

.halls-ticker .ticker-icon {
  width: clamp(9px, .9vw, 13px);
  height: clamp(9px, .9vw, 13px);
}

/* У 360°-панорам нет отдельной нижней подсветки. */
.hall-panorama::after {
  content: none;
  display: none;
}

@media (max-width: 600px) {
  .hall-model {
    inset: -10px -52px 8px;
  }

  .hall-model-world {
    width: min(146%, 650px);
  }
}

/* ========================================================================== */
/* ОТЗЫВЫ: ОТКРЫТЫЙ ЗАГОЛОВОК, 5-КАРТОЧНАЯ КАРУСЕЛЬ И РЕЖИМНЫЕ РЕАКЦИИ     */
/* ========================================================================== */

#reviews.rv {
  position: relative;
  isolation: isolate;
  min-height: auto;
  padding: clamp(58px, 7vw, 104px) var(--pad) clamp(52px, 6vw, 88px);
  overflow: hidden;
  background: #05070d !important;
}

#reviews .rv-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 clamp(26px, 3vw, 46px);
  padding: 0;
  text-align: center;
}

#reviews .rv-head .h2 {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 .12em;
  font-size: clamp(18px, 3.2vw, 50px);
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(
    105deg,
    var(--mode-accent-2) 0%,
    var(--mode-accent) 30%,
    #fff 72%,
    #fff 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#reviews .rv-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: clamp(42px, 3.5vw, 58px) minmax(0, 1fr) clamp(42px, 3.5vw, 58px);
  align-items: center;
  gap: clamp(8px, 1vw, 18px);
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#reviews .rv-track-wrap {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

#reviews .rv-track-wrap::before,
#reviews .rv-track-wrap::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  width: clamp(22px, 3.6vw, 72px);
  pointer-events: none;
  transition: opacity .2s ease;
}

#reviews .rv-track-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #05070d 0%, rgba(5, 7, 13, .74) 26%, transparent 100%);
}

#reviews .rv-track-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, #05070d 0%, rgba(5, 7, 13, .74) 26%, transparent 100%);
}

#reviews .rv-track-wrap.is-at-end::after {
  opacity: 0;
}

#reviews .doors {
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 2px 14px;
  overflow-x: auto;
  scroll-padding-inline: clamp(22px, 3.6vw, 72px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#reviews .door {
  flex: 0 0 calc((100% - 40px) / 5);
  min-width: 0;
  height: clamp(300px, 19vw, 360px);
  scroll-snap-align: start;
  border: 0 !important;
  border-radius: 18px;
  background: #080b13;
  box-shadow: none;
}

#reviews .door:focus-visible {
  border: 0 !important;
  outline: 2px solid var(--mode-accent);
  outline-offset: -2px;
}

#reviews .behind {
  padding: clamp(13px, 1.1vw, 20px);
  gap: 10px;
  border: 0;
  background:
    radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--mode-accent) 15%, transparent), transparent 46%),
    #080b13;
}

#reviews .av {
  flex-basis: 38px;
  height: 38px;
  font-size: 16px;
}

#reviews .who b { font-size: clamp(13px, .86vw, 16px); }
#reviews .who small { font-size: clamp(10px, .68vw, 12px); }
#reviews .review-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#reviews .review-byline {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

#reviews .review-author {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #f7f8ff;
  font-family: var(--h);
  font-size: clamp(12px, .82vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .2s ease;
}

#reviews .review-author:hover,
#reviews .review-author:focus-visible {
  color: var(--mode-accent);
  outline: none;
}

#reviews .review-source {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--h);
  font-size: clamp(7px, .5vw, 9px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
}

#reviews .review-source[data-source="2gis"] { color: #69e148; }
#reviews .review-source[data-source="vk"] { color: #5d9cec; }

#reviews .review-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  margin-top: 6px;
  margin-bottom: 4px;
}

#reviews .review-stars > i {
  position: relative;
  display: block;
  width: clamp(9px, .66vw, 12px);
  aspect-ratio: 1;
  background: linear-gradient(
    90deg,
    var(--mode-accent) 0 var(--review-star-fill),
    rgba(255, 255, 255, .16) var(--review-star-fill) 100%
  );
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mode-accent) 84%, transparent));
}

#reviews .q { font-size: clamp(12px, .76vw, 14px); line-height: 1.48; }
#reviews .rtag { font-size: clamp(10px, .65vw, 12px); }
#reviews .plate { border: 0; }
#reviews .plate b { font-size: clamp(12px, .77vw, 14px); }

/* Фото отзывов и локальные WebGL-переходы Demo 1, 2, 4–8. */
#reviews .review-card {
  cursor: default;
  isolation: isolate;
  background: #060910;
}

#reviews .review-image-button {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: inherit;
  color: #fff;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity .08s ease-out, visibility 0s linear;
}

#reviews .review-image-button:focus-visible {
  outline: 2px solid var(--mode-accent);
  outline-offset: -3px;
}

#reviews .review-image-button > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.01);
}

#reviews .review-card.is-webgl-running .review-image-button > img,
#reviews .review-card.is-webgl-running .review-image-shade,
#reviews .review-card.is-webgl-running .review-image-button .plate {
  opacity: 0;
}

#reviews .review-image-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 44%, rgba(2, 4, 9, .66) 100%),
    linear-gradient(90deg, rgba(2, 4, 9, .22), transparent 58%);
}

#reviews .review-image-button .plate {
  z-index: 6;
  color: #fff;
  background: rgba(3, 5, 11, .72);
}

#reviews .review-webgl-host,
#reviews .review-webgl-stage,
#reviews .review-webgl-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#reviews .review-webgl-host {
  z-index: 3;
  pointer-events: none;
}

#reviews .review-webgl-stage {
  display: block;
  opacity: 0;
  transition: opacity .08s ease-out;
  will-change: opacity;
}

/* При открытии первый уже отрисованный WebGL-кадр подменяет фотографию
   без fade-in из прозрачности. Плавное растворение сохраняется только
   для обратной передачи кадра статичному изображению. */
#reviews .review-card.is-review-opening .review-webgl-stage {
  transition-duration: 0s;
}

#reviews .review-webgl-stage.is-active {
  opacity: 1;
}

#reviews .review-webgl-stage canvas {
  display: block;
}

#reviews .review-card.is-transition-complete .review-image-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .08s ease-out, visibility 0s linear .08s;
}

#reviews .review-card.is-transitioning {
  cursor: progress;
}

#reviews .rv-arrow {
  position: relative;
  z-index: 9;
  align-self: center;
  width: clamp(42px, 3.5vw, 58px);
  height: clamp(42px, 3.5vw, 58px);
  border: 1px solid color-mix(in srgb, var(--mode-accent) 72%, transparent);
  color: var(--mode-accent);
  background: rgba(5, 7, 13, .64);
  box-shadow: 0 0 20px color-mix(in srgb, var(--mode-accent) 12%, transparent);
}

#reviews .rv-arrow:hover,
#reviews .rv-arrow:focus-visible {
  color: var(--mode-on-accent, #071018);
  border-color: transparent;
  background: linear-gradient(120deg, var(--mode-accent), var(--mode-accent-2));
}

#reviews .rv-arrow svg {
  width: 22px;
  height: 22px;
}

.rv-reactions {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .32;
}

.rv-reaction {
  position: absolute;
  top: calc(-1 * var(--rv-size));
  left: var(--rv-x);
  display: block;
  width: var(--rv-size);
  height: var(--rv-size);
  color: var(--mode-accent);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mode-accent) 42%, transparent));
  animation: rvReactionFall var(--rv-duration) linear var(--rv-delay) infinite;
  transition: color .45s ease, filter .45s ease;
}

.rv-reaction--heart,
.rv-reaction--thumb {
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.rv-reaction--heart {
  -webkit-mask-image: url("./media/heart-fill.svg");
  mask-image: url("./media/heart-fill.svg");
}

.rv-reaction--thumb {
  -webkit-mask-image: url("./media/thumb-up-fill.svg");
  mask-image: url("./media/thumb-up-fill.svg");
}

.rv-reaction--smile {
  border: max(2px, calc(var(--rv-size) * .075)) solid currentColor;
  border-radius: 50%;
}

.rv-reaction--smile::before {
  content: "";
  position: absolute;
  inset: 20% 18% 46%;
  background: currentColor;
  -webkit-mask-image: url("./media/star-fill.svg"), url("./media/star-fill.svg");
  -webkit-mask-position: left center, right center;
  -webkit-mask-size: 34% 100%, 34% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("./media/star-fill.svg"), url("./media/star-fill.svg");
  mask-position: left center, right center;
  mask-size: 34% 100%, 34% 100%;
  mask-repeat: no-repeat;
}

.rv-reaction--smile::after {
  content: "";
  position: absolute;
  right: 23%;
  bottom: 19%;
  left: 23%;
  height: 22%;
  border-bottom: max(2px, calc(var(--rv-size) * .075)) solid currentColor;
  border-radius: 0 0 999px 999px;
}

@keyframes rvReactionFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10vh, 0) rotate(-12deg) scale(.76);
  }
  10% { opacity: .76; }
  82% { opacity: .48; }
  100% {
    opacity: 0;
    transform: translate3d(var(--rv-drift), 112vh, 0) rotate(28deg) scale(1.08);
  }
}

@media (max-width: 760px) {
  #reviews.rv { padding-right: 12px; padding-left: 12px; }
  #reviews .rv-card { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 6px; }
  #reviews .rv-arrow { width: 38px; height: 38px; }
  #reviews .door { flex-basis: min(78vw, 280px); height: 360px; }
  #reviews .rv-track-wrap::before,
  #reviews .rv-track-wrap::after { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-reaction { animation: none; opacity: .18; }
}

/* Отзыв полностью освобождается от декоративной створки после раскрытия. */
#reviews .door .leaf {
  opacity: 1;
  visibility: visible;
  transition-property: transform, opacity, visibility;
  transition-duration: .7s, .22s, 0s;
  transition-timing-function: cubic-bezier(.6, 0, .2, 1), ease, linear;
  transition-delay: 0s, 0s, 0s;
}

#reviews .door.is-open .leaf {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, .48s, .7s;
}

#reviews .door.is-open .deco,
#reviews .door.is-open .plate {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease .34s, visibility 0s linear .56s;
}

#reviews .behind {
  color: #f7f8ff;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--mode-accent) 10%, transparent), transparent 42%),
    #060910;
}

#reviews .behind .av.review-smile {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--mode-accent);
  background: transparent;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--mode-accent) 54%, transparent),
    inset 0 0 9px color-mix(in srgb, var(--mode-accent) 18%, transparent);
  animation: reviewSmileBounce 1.8s ease-in-out infinite;
  transition: color .42s ease, box-shadow .42s ease;
}

#reviews .review-smile::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 9px;
  width: 5px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 15px 0 0 currentColor;
  animation: reviewSmileEyes 1.8s ease-in-out infinite;
}

#reviews .review-smile i {
  position: absolute;
  right: 8px;
  bottom: 7px;
  left: 8px;
  height: 12px;
  overflow: hidden;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 999px 999px;
  transform-origin: 50% 0;
  animation: reviewSmileMouth 1.8s ease-in-out infinite;
}

#reviews .review-smile i::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -3px;
  left: 4px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

#reviews .rtag {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 0 !important;
  color: #f7f8ff;
}

#reviews .rtag span {
  display: block;
  overflow: visible;
  font-family: var(--h);
  font-size: clamp(7px, .58vw, 11px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--mode-accent);
  white-space: nowrap;
}

#reviews .rtag b {
  display: block;
  font-family: var(--h);
  font-size: clamp(10px, .68vw, 13px);
  font-weight: 700;
  line-height: 1.2;
  color: #f7f8ff;
}

#reviews .q {
  font-size: clamp(10.5px, .7vw, 13px);
  line-height: 1.4;
}

@keyframes reviewSmileBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  45% { transform: translateY(-2px) rotate(2deg) scale(1.04); }
  55% { transform: translateY(0) rotate(-1deg) scale(.98); }
}

@keyframes reviewSmileEyes {
  0%, 38%, 62%, 100% { transform: scaleY(1); }
  46%, 54% { transform: scaleY(.24); }
}

@keyframes reviewSmileMouth {
  0%, 100% { transform: scaleY(.68); }
  42%, 58% { transform: scaleY(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  #reviews .behind .review-smile,
  #reviews .review-smile::before,
  #reviews .review-smile i {
    animation: none;
  }
}

@media (max-width: 560px) {
  #reviews .rv-head .h2 {
    font-size: clamp(13px, 4.1vw, 20px);
  }
}

/* Финальная карточка карусели: весь призыв собран по центральной оси. */
#reviews .door.mine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(14px, 1.3vw, 22px);
  text-align: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#reviews .door.mine::before,
#reviews .door.mine::after {
  display: none !important;
}

#reviews .door.mine > b {
  width: 100%;
  color: #f7f8ff;
  font-size: clamp(15px, 1vw, 19px);
  text-align: center;
}

#reviews .door.mine > p {
  width: 100%;
  margin: 0;
  color: color-mix(in srgb, var(--mode-accent) 42%, #f7f8ff 58%);
  font-size: clamp(11px, .72vw, 13px);
  line-height: 1.45;
  text-align: center;
}

#reviews .door.mine .rv-booking {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(148px, 100%);
  height: 42px;
  margin: 2px auto 0;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #071018;
  font-size: clamp(10px, .7vw, 13px);
  white-space: nowrap;
  background:
    linear-gradient(110deg, #fff 0%, #eef2ff 52%, #e5fff5 100%) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
  transition: color .2s ease, background .28s ease, box-shadow .28s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}

#reviews .door.mine .rv-booking:hover,
#reviews .door.mine .rv-booking:focus-visible {
  color: var(--mode-on-accent, #f7f8ff);
  background:
    linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2)) padding-box,
    linear-gradient(105deg, var(--mode-accent), var(--mode-accent-2)) border-box;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .38),
    0 0 26px color-mix(in srgb, var(--mode-accent) 34%, transparent);
  transform: translateY(-1px);
}

#reviews .door.mine .rv-booking::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -110%;
  left: -38%;
  width: 22%;
  height: 320%;
  opacity: 0;
  pointer-events: none;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82), transparent);
}

#reviews .door.mine .rv-booking:hover::before,
#reviews .door.mine .rv-booking:focus-visible::before {
  animation: ctaModeShine .72s cubic-bezier(.22, .61, .36, 1) both;
}

#reviews .door.mine .rv-booking > span {
  position: relative;
  z-index: 2;
}

/* ---------- ФИНАЛЬНАЯ ПОЛИРОВКА: КАПЛИ РЕЖИМОВ И ПЛАШКА 360° ---------- */
#how .how-visual::after {
  background:
    linear-gradient(90deg, rgba(2,4,9,.96) 0%, rgba(2,4,9,.82) 34%, rgba(2,4,9,.56) 58%, rgba(2,4,9,.2) 82%, transparent 100%),
    linear-gradient(180deg, rgba(2,4,9,.62), transparent 48%);
}

#how .mb-title .h2 {
  color: transparent;
  background: linear-gradient(112deg, var(--mode-accent), var(--mode-accent-2));
  background-clip: text;
  -webkit-background-clip: text;
}

#how .mb-title .lead {
  color: #fff;
}

#how .agesw button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#how .agesw button span {
  display: inline-grid;
  min-width: 30px;
  height: 24px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-family: var(--h);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

/* Цветной круг и белая капля — отдельные слои. Белый слой всегда ниже. */
#how .dot {
  isolation: isolate;
  overflow: visible;
  background: transparent !important;
  transform: none;
  box-shadow: none;
}

#how .dot::before,
#how .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
}

#how .dot::before {
  z-index: 0;
  opacity: 0;
  background: #fff;
  transform: scale(.82);
  transition:
    transform .32s cubic-bezier(.22,.82,.22,1) .09s,
    opacity .12s ease .07s;
}

#how .dot::after {
  z-index: 1;
  opacity: 1;
  background: linear-gradient(145deg, var(--dot-a), var(--dot-b));
  transform: scale(1);
  transition: transform .28s cubic-bezier(.2,.86,.24,1);
}

#how .dot:not(.off):hover,
#how .dot.on {
  transform: none;
  box-shadow: none;
}

#how .dot:not(.off):hover::after,
#how .dot.on::after {
  transform: scale(1.38);
}

#how .dot:not(.off):hover::before,
#how .dot.on::before {
  z-index: 0;
  opacity: 1;
  transform: scale(1.78);
}

#how .dot.off::after {
  filter: grayscale(1);
}

/* Возраст вынесен из переключателя в воздушный водяной знак фильтра. */
#how .how-age-mark {
  position: absolute;
  z-index: 0;
  top: clamp(-300px, -18vw, -180px);
  right: clamp(-220px, -12vw, -90px);
  display: grid;
  width: clamp(500px, 46vw, 720px);
  height: clamp(500px, 46vw, 720px);
  box-sizing: border-box;
  place-items: center;
  padding-top: clamp(76px, 6.5vw, 112px);
  border: clamp(7px, .7vw, 12px) solid currentColor;
  border-radius: 50%;
  color: var(--mode-accent);
  font-family: var(--h);
  font-size: clamp(176px, 17.5vw, 286px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.08em;
  opacity: .075;
  pointer-events: none;
  user-select: none;
  transition: color .32s ease, opacity .25s ease;
}

#how .panel > :not(.how-age-mark) {
  position: relative;
  z-index: 1;
}

/* Белая подложка заметно крупнее высоты плашки и начинает расти после
   цветного круга, поэтому получается последовательный эффект капли. */
#how .dot::before {
  transition:
    transform .34s cubic-bezier(.2,.86,.24,1) .12s,
    opacity .12s ease .1s;
}

#how .dot:not(.off):hover::before,
#how .dot.on::before {
  transform: scale(2.28);
}

/* Недоступный режим — нейтральный перечёркнутый круг без цветовой заливки. */
#how .dot.off {
  opacity: 1;
  cursor: not-allowed;
}

#how .dot.off::before {
  display: none;
}

#how .dot.off::after {
  opacity: .58;
  border: 2px solid rgba(7,16,24,.42);
  background:
    linear-gradient(45deg, transparent 44%, rgba(7,16,24,.48) 45% 55%, transparent 56%);
  filter: none;
  transform: scale(.88);
}

/* Центральная подсказка панорамы: счётчик → 360° → инструкция. */
.hall-panorama-guide {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: calc(100% - 40px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 1;
  filter: blur(0);
  transition:
    opacity .18s ease-out,
    transform .22s cubic-bezier(.2,.8,.2,1),
    filter .18s ease-out;
}

.hall-panorama-copy .hall-panorama-count {
  display: block;
  width: max-content;
  margin: 0 0 9px;
  color: var(--mode-accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--mode-accent) 70%, transparent);
}

.hall-panorama-guide .hall-panorama-drag {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: min(280px, calc(100vw - 56px));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.78);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: center;
  letter-spacing: .07em;
}

.hall-panorama-guide .hall-panorama-drag span {
  color: var(--mode-accent);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--mode-accent) 72%, transparent);
}

.hall-panorama-guide .hall-panorama-drag small {
  color: rgba(255,255,255,.78);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hall-panorama.is-interacting .hall-panorama-guide {
  opacity: 0;
  filter: blur(2px);
  transform: translate(-50%, calc(-50% + 8px)) scale(.96);
}

/* Стабильные состояния интерактивных элементов. Фоновые градиенты меняются
   атомарно, а не интерполируются через тёмный промежуточный кадр. */
.btn,
.msg,
.arr,
.q-opt,
.qb,
.add,
.map-action,
.window-action,
.window-action-static,
.rv-arrow,
.plan-room,
.hall-model-ui button {
  transition-property: color, border-color, box-shadow, transform, opacity, filter;
  transition-duration: .18s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

.nav > .btn,
.quiz-wrap .quiz-toggle,
#how .panel #uGet,
#costGet,
#askBtn,
.foot-cta .btn,
.fin-cta .btn,
#reviews .rv-booking {
  transition-property: color, border-color, box-shadow, transform, opacity, filter;
  transition-duration: .2s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

#how .pk.pick,
#how .pk.lock {
  transition-property: color, border-color, box-shadow, transform, opacity;
  transition-duration: .16s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

/* Неподвижный краевой градиент скрывает обрезы прокручиваемых карточек,
   как в основной карусели режимов. */
#how .ps-track-shell {
  position: relative;
  min-width: 0;
}

#how .ps-track-shell::before,
#how .ps-track-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 2px;
  width: clamp(22px, 3.2vw, 48px);
  pointer-events: none;
  opacity: 1;
  transition: opacity .18s ease-out;
}

#how .ps-track-shell::before {
  left: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mode-accent) 10%, #03050a) 0%,
    transparent 100%
  );
}

#how .ps-track-shell::after {
  right: 0;
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--mode-accent) 10%, #03050a) 0%,
    transparent 100%
  );
}

/* Последняя карточка больше не прячется под правой дымкой. */
#how .ps-track-shell.is-end::after {
  opacity: 0;
}

#how .pk b,
#how .pk small,
#how .pk .lk,
#how .pk .bars i {
  transition: color .16s ease-out, border-color .16s ease-out, opacity .16s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hall-panorama-guide {
    transition: none;
  }
}

/* ========================================================================== */
/* ЕДИНОЕ ОКНО ЗАЯВКИ — СИСТЕМНАЯ СТИЛИСТИКА FAQ                            */
/* ========================================================================== */

.pop {
  padding: clamp(12px, 2vw, 28px);
}

.pop-bg {
  background: rgba(1, 2, 7, .8);
  backdrop-filter: blur(14px) saturate(92%);
  -webkit-backdrop-filter: blur(14px) saturate(92%);
}

.pop-box {
  position: relative;
  isolation: isolate;
  width: min(760px, 100%);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  color: #f5f7fb;
  background: #080b13;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .72);
}

/* Мягкое свечение находится за окном и не образует световой контур. */
.pop-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 8% -8%;
  border-radius: 30%;
  pointer-events: none;
  opacity: .32;
  background: radial-gradient(ellipse, var(--mode-accent), var(--mode-accent-2) 38%, transparent 72%);
  filter: blur(58px);
}

.pop-titlebar {
  display: flex;
  min-height: 58px;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px 15px 0 0;
  background: #10141e;
}

.pop-caption {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 9px 16px;
}

.pop-caption b {
  overflow: hidden;
  font-family: var(--h);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop-caption small {
  overflow: hidden;
  color: rgba(238, 241, 248, .58);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop-window-actions {
  display: flex;
  align-self: stretch;
  margin-left: auto;
}

.pop-window-action {
  display: grid;
  width: 48px;
  min-width: 48px;
  height: 100%;
  min-height: 58px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: rgba(247, 248, 252, .7);
  background: transparent;
  cursor: default;
  transition: color .16s ease, background-color .16s ease;
}

.pop-window-action svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.45;
}

.pop-window-action:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.pop-window-close {
  cursor: pointer;
  border-radius: 0 15px 0 0;
}

.pop-window-close:hover,
.pop-window-close:focus-visible {
  color: #fff;
  background: #e81123;
  outline: none;
}

.pop-content {
  max-height: calc(100dvh - 108px);
  padding: clamp(18px, 2.2vw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mode-accent) transparent;
}

.pop-path {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 10px clamp(18px, 2.2vw, 28px);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .17);
  border-radius: 0;
  background: transparent;
}

.pop-path-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: var(--mode-accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mode-accent) 62%, transparent));
}

.pop-path code {
  overflow-wrap: anywhere;
  padding: 0;
  border: 0;
  color: rgba(247, 248, 252, .84);
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(11px, .9vw, 13px);
  line-height: 1.5;
}

.pop form.pop-form {
  display: grid;
  gap: 14px;
  margin-top: 0;
}

.pop-contact-fields {
  display: grid;
  gap: 10px;
}

.pop label.f {
  display: grid;
  grid-template-columns: minmax(92px, 118px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: rgba(247, 248, 252, .72);
  font-size: 12px;
}

.pop label.f > span {
  font-family: var(--h);
  font-weight: 650;
}

.pop input[type="tel"],
.pop input[type="text"] {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.pop input[type="tel"]:focus,
.pop input[type="text"]:focus {
  border-bottom-color: var(--mode-accent);
  outline: none;
  box-shadow: 0 5px 9px -8px var(--mode-accent);
}

.pop-error,
.pop-consent-error {
  margin: -4px 0 0 clamp(104px, 8vw, 130px);
  color: #ff4d61;
  font-size: 11px;
}

.pop-consent-error {
  margin-top: -10px;
  margin-left: 28px;
}

.pop .consent {
  align-items: flex-start;
  margin: 0;
  color: rgba(247, 248, 252, .64);
  font-size: 11px;
  line-height: 1.45;
}

.pop .consent input {
  accent-color: var(--mode-accent);
}

.pop .consent a {
  color: var(--mode-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pop-submit-zone {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 2px 0 18px;
}

.pop-submit-main {
  position: relative;
  display: block;
  align-self: center;
}

.pop-submit-main .btn {
  width: 100%;
  height: 48px;
  color: var(--mode-on-accent, #071018);
  border: 0;
  background: linear-gradient(110deg, var(--mode-accent), var(--mode-accent-2));
  box-shadow: none;
}

.pop-submit-main .btn:hover,
.pop-submit-main .btn:focus-visible {
  color: #071018;
  background: #fff;
  box-shadow: none;
}

.pop-submit-main .on-lbl {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  justify-content: center;
  color: rgba(247, 248, 252, .64);
  font-size: 11px;
}

.pop-submit-main .on-lbl:not(.is-offline) .online-dot {
  background: #4bea72;
  box-shadow: 0 0 0 3px rgba(75, 234, 114, .14), 0 0 12px rgba(75, 234, 114, .62);
  animation: liveDotPulse 1.8s ease-in-out infinite;
}

.pop-submit-main .on-lbl.is-offline .online-dot {
  background: #ff4058;
  box-shadow: 0 0 0 3px rgba(255, 64, 88, .12), 0 0 12px rgba(255, 64, 88, .48);
  animation: none;
}

.pop-or {
  align-self: center;
  justify-self: center;
  transform: translateX(34px);
  color: rgba(247, 248, 252, .36);
  font-size: 11px;
  text-transform: uppercase;
}

.pop-direct {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  justify-self: stretch;
  gap: 10px;
  text-align: center;
  color: rgba(247, 248, 252, .64);
  font-size: 11px;
  line-height: 1.35;
}

.pop-direct .reach {
  justify-content: center;
  gap: 14px;
}

.pop-direct .reach .msg {
  width: 32px;
  height: 32px;
  color: #fff;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.pop-direct .reach .msg:hover,
.pop-direct .reach .msg:focus-visible {
  color: inherit;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.pop-direct .reach .msg::before,
.pop-direct .reach .msg::after {
  display: none !important;
}

.pop-direct .reach .msg .social-icon {
  width: 23px;
  height: 23px;
  background: #fff;
}

/* В окне бронирования красим саму SVG-маску. Это надёжно работает и в
   Chromium-браузерах, где градиент вложенного псевдоэлемента может не
   отрисоваться внутри mask. */
.pop-direct .reach .msg .social-icon::after {
  display: none;
}

.pop-direct .reach .msg:hover .social-icon,
.pop-direct .reach .msg:focus-visible .social-icon {
  background: linear-gradient(
    135deg,
    var(--mode-accent) 0%,
    var(--mode-accent-2) 52%,
    var(--mode-accent) 100%
  );
  filter:
    drop-shadow(0 0 6px var(--mode-accent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--mode-accent-2) 62%, transparent));
  transform: scale(1.09);
}

.pop-ok {
  padding: clamp(34px, 5vw, 64px) 12px;
}

.pop-ok .ck {
  color: var(--mode-on-accent, #071018);
  background: linear-gradient(135deg, var(--mode-accent), var(--mode-accent-2));
}

.pop-ok small {
  display: block;
  max-width: 540px;
  margin: 16px auto 0;
  overflow-wrap: anywhere;
  color: rgba(247, 248, 252, .5);
  font-family: Consolas, "Courier New", monospace;
}

@media (max-width: 650px) {
  .pop-window-action {
    width: 40px;
    min-width: 40px;
  }

  .pop-caption {
    padding-right: 8px;
    padding-left: 12px;
  }

  .pop-caption small {
    max-width: 42vw;
  }

  .pop label.f {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .pop-error,
  .pop-consent-error {
    margin-left: 0;
  }

  .pop-submit-zone {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 0;
  }

  .pop-submit-main {
    margin-bottom: 18px;
  }

  .pop-or {
    display: none;
    transform: none;
  }

  .pop-direct {
    align-items: center;
  }
}

/* Юридические документы открываются поверх живого сайта: подложка не
   пересоздаётся, поэтому сохраняются прокрутка, формы и открытые окна. */
.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
  background: #fff;
  opacity: 1;
}

.legal-overlay[hidden] {
  display: none;
}

.legal-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

body.legal-open {
  overflow: hidden;
}