/* TeleTV Player — bondez.ru
   Тёмная «ночная» тема под неоновую иконку приложения.
   Один акцент (cyan) на экран: CTA + мелкие маркеры. Violet — только в свечении фона. */

:root {
  --bg: #06090f;
  --bg-2: #080c14;
  --panel: rgba(255, 255, 255, 0.028);
  --panel-2: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.16);
  --fg: #e8eef6;
  --muted: #93a3b6;
  --muted-2: #6d7f93;
  --cyan: #22d3ee;
  --blue: #2aabee;
  --violet: #7c5cff;
  --ok: #34d399;
  --warn: #fbbf24;

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --wrap: 1180px;
  --gut: 24px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  /* hidden делает body скролл-контейнером и ломает sticky-шапку —
     clip обрезает то же самое, но sticky продолжает работать */
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body::before {
  /* мягкое свечение фона: violet слева сверху, cyan справа */
  content: "";
  position: fixed;
  top: -20%;
  left: 0;
  right: 0;
  height: 900px;
  background:
    radial-gradient(46% 44% at 18% 22%, rgba(124, 92, 255, 0.18), transparent 70%),
    radial-gradient(42% 40% at 82% 8%, rgba(34, 211, 238, 0.16), transparent 72%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--cyan);
  color: #04141a;
  font-weight: 700;
  transition: top 0.18s ease;
}

.skip:focus {
  top: 16px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
  position: relative;
  z-index: 1;
}

[id] {
  scroll-margin-top: 88px;
}

code,
.mono {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--muted);
}

/* ── шапка ─────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(6, 9, 15, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(6, 9, 15, 0.9);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 6px 18px rgba(34, 211, 238, 0.18);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 18px;
}

.nav-links a {
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 15px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover {
  color: var(--fg);
  background: var(--panel-2);
}

.nav-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}

.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.6px;
  background: var(--fg);
  border-radius: 2px;
}

/* ── кнопки ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn-primary {
  background: linear-gradient(180deg, #35d8f0, #14b8d4);
  color: #02212b;
  box-shadow: 0 10px 26px rgba(34, 211, 238, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(34, 211, 238, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-ghost {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--fg);
}

.btn-ghost:hover {
  background: var(--panel-2);
  border-color: rgba(255, 255, 255, 0.26);
}

.btn-sm {
  padding: 9px 15px;
  font-size: 14.5px;
  border-radius: 10px;
}

.btn[aria-disabled="true"],
.btn.is-soon {
  cursor: default;
  color: var(--muted);
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

.btn[aria-disabled="true"]:hover {
  transform: none;
  background: var(--panel);
}

/* ── hero ─────────────────────────────────────────────── */

.hero {
  padding: 64px 0 40px;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 52px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.hero h1 {
  font-size: clamp(31px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.hero h1 .glow {
  background: linear-gradient(96deg, #7ef0ff 6%, #22d3ee 42%, #7c5cff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  margin-top: 22px;
  font-size: clamp(17px, 1.35vw, 19.5px);
  color: var(--muted);
  max-width: 540px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted-2);
}

.hero-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.hero-specs .chip {
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 12.5px;
  color: #b9c7d6;
  letter-spacing: 0.01em;
}

.chip b {
  color: var(--fg);
  font-weight: 600;
}

/* телевизор в hero */
.tv {
  position: relative;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.6));
}

.tv::before {
  content: "";
  position: absolute;
  inset: -14% -8% -18% -8%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(34, 211, 238, 0.16), transparent 70%);
  filter: blur(30px);
  z-index: 0;
}

.tv-frame {
  position: relative;
  z-index: 1;
  padding: 9px;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.tv-screen {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  background: #04070b;
  aspect-ratio: 16 / 9;
}

.tv-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tv-stand {
  position: relative;
  z-index: 1;
  width: 34%;
  height: 8px;
  margin: 10px auto 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
}

/* ── секции ───────────────────────────────────────────── */

.section {
  padding: 84px 0;
  position: relative;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 700px;
  margin-bottom: 40px;
}

.section-head h2 {
  font-size: clamp(27px, 3.1vw, 40px);
}

.section-head p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
}

/* возможности */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card {
  padding: 24px 22px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.card-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.09);
  border: 1px solid rgba(34, 211, 238, 0.22);
}

.card-ico svg {
  width: 20px;
  height: 20px;
}

.card h3 {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15.2px;
  line-height: 1.55;
}

/* как это работает */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}

.step-num {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--cyan);
  letter-spacing: 0.16em;
  margin-bottom: 14px;
  display: block;
}

.step h3 {
  font-size: 17.5px;
}

.step p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

.qr-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 11px;
  border-radius: 9px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.2);
  font-family: var(--mono);
  font-size: 12px;
  color: #a9ecf7;
}

/* галерея */
.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.shot {
  margin: 0;
}

.shot .tv-frame {
  padding: 7px;
}

.shot .tv-screen {
  border-radius: 9px;
}

.shot figcaption {
  margin-top: 12px;
  font-size: 14.2px;
  color: var(--muted);
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.shot figcaption span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.1em;
}

/* форматы */
.formats {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
}

.format-box {
  padding: 24px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}

.format-box h3 {
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: #cfdae6;
}

.tag.accent {
  border-color: rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.1);
  color: #a9ecf7;
}

.format-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted-2);
}

/* приватность */
.privacy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}

.privacy li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15.6px;
  color: #cdd9e6;
}

.privacy li svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--cyan);
}

/* FAQ */
.faq {
  max-width: 860px;
}

.faq details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
  color: var(--fg);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
  flex: none;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.faq summary:hover {
  color: #fff;
}

.faq .answer {
  padding: 0 26px 20px 0;
  color: var(--muted);
  font-size: 15.8px;
  max-width: 74ch;
}

/* установка */
.install {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  padding: 32px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(70% 120% at 8% 0%, rgba(34, 211, 238, 0.1), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(124, 92, 255, 0.12), transparent 65%),
    var(--bg-2);
  box-shadow: var(--shadow);
}

.install h2 {
  font-size: clamp(24px, 2.6vw, 32px);
}

.install p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15.8px;
}

.install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.install-meta {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-left: 26px;
  border-left: 1px solid var(--line);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.meta-row dt {
  color: var(--muted-2);
}

.meta-row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: #cfdae6;
  text-align: right;
}

.meta-foot {
  margin-top: 10px;
  font-size: 12.6px;
  color: var(--muted-2);
  line-height: 1.5;
}

/* подвал */
.footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 32px;
  margin-top: 20px;
  font-size: 14.6px;
  color: var(--muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}

.footer h3,
.footer h4 {
  font-size: 12.5px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: 14px;
}

.footer li + li {
  margin-top: 9px;
}

.footer a:hover {
  color: var(--fg);
}

.footer-bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-2);
}

.disclaimer {
  margin-top: 14px;
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 68ch;
}

/* страница политики */
.doc {
  max-width: 820px;
  padding: 56px 0 72px;
}

.doc h1 {
  font-size: clamp(29px, 3.6vw, 42px);
  letter-spacing: -0.035em;
}

.doc .doc-meta {
  margin-top: 16px;
  color: var(--muted-2);
  font-size: 14px;
}

.doc h2 {
  font-size: 21px;
  margin: 38px 0 12px;
  letter-spacing: -0.02em;
}

.doc p,
.doc li {
  color: #c6d2e0;
  font-size: 16px;
  line-height: 1.68;
}

.doc p + p {
  margin-top: 12px;
}

/* абзац после списка/карточки не должен слипаться с последним пунктом */
.doc ul + p,
.doc ol + p,
.doc .card + p,
.doc .note-box + p,
.doc .pay-box + p {
  margin-top: 14px;
}

.doc ul {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.doc li {
  padding-left: 18px;
  position: relative;
}

.doc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.8;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 14.8px;
}

.doc th,
.doc td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: #c6d2e0;
}

.doc th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  font-weight: 600;
}

.doc a {
  color: #9fe9f6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 14.5px;
  color: var(--muted);
}

.doc-back:hover {
  color: var(--fg);
}

@media (max-width: 700px) {
  /* таблица политики на телефоне: строка = карточка, у каждой ячейки своя подпись */
  .doc table,
  .doc tbody,
  .doc tr,
  .doc td {
    display: block;
    width: 100%;
  }

  .doc thead {
    display: none;
  }

  .doc tr {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
  }

  .doc td {
    padding: 5px 0;
    border: 0;
  }

  .doc td + td {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 9px;
  }

  .doc td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
}

/* появление при скролле — включается только если есть .js */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── адаптив ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero {
    padding: 40px 0 24px;
  }

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

  .formats,
  .install {
    grid-template-columns: 1fr;
  }

  .install-meta {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 20px;
  }

  .steps,
  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shots .shot:last-child {
    grid-column: 1 / -1;
    max-width: 620px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 12px var(--gut) 18px;
    background: #070b12;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.95);
  }

  .nav.is-open .nav-links a {
    padding: 12px 10px;
    font-size: 16px;
  }

  .nav-right .btn {
    display: none;
  }

  .nav.is-open .nav-right .btn {
    display: inline-flex;
    margin: 6px var(--gut) 0;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 16.4px;
  }

  .section {
    padding: 60px 0;
  }

  .cards,
  .steps,
  .shots,
  .privacy,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .shots .shot:last-child {
    max-width: none;
  }

  .install {
    padding: 24px 20px;
  }

  .hero-specs .chip {
    font-size: 11.8px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ═══ СЦЕНА: устройство в тёмном пространстве ═══════════════
   Свет, глубина и отражение сделаны только на CSS — внутри экрана
   всегда настоящий скриншот приложения, никаких нарисованных дашбордов. */

.hero-stack {
  padding: 44px 0 8px;
  position: relative;
}

.hero-stack::before {
  /* верхний свет: диагональная полоса, чтобы текст не висел в пустоте */
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 72%;
  height: 120%;
  background:
    radial-gradient(42% 38% at 68% 24%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%),
    linear-gradient(196deg, rgba(255, 255, 255, 0.07), transparent 42%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.hero-stack h1 {
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.042em;
  max-width: 21ch;
  margin-top: 18px;
}

.dl-sub a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-stack h1 .glow {
  background: linear-gradient(96deg, #7ef0ff 6%, #22d3ee 42%, #7c5cff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-listen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.hero-listen a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 14.3px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.hero-listen a:hover {
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.26);
}

.hero-listen a:focus-visible {
  outline: 2px solid #f472b6;
  outline-offset: 2px;
}

.hero-listen a.is-radio {
  border-color: rgba(244, 114, 182, 0.34);
  background: rgba(244, 114, 182, 0.1);
  color: #fbcfe8;
}

.hero-listen a.is-radio:hover {
  border-color: rgba(244, 114, 182, 0.6);
  background: rgba(244, 114, 182, 0.16);
}

.hero-listen a.is-support {
  background: rgba(255, 255, 255, 0.03);
}

.hl-play {
  font-size: 10px;
  color: #f472b6;
}

.hl-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(251, 207, 232, 0.62);
}

@media (max-width: 520px) {
  .hero-listen a {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .hl-note {
    flex-basis: 100%;
  }
}

.hero-stack .lead {
  margin-top: 22px;
  color: var(--muted);
  font-size: clamp(16.5px, 1.35vw, 19px);
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.scene {
  position: relative;
  margin: 44px auto 0;
  max-width: 1060px;
  padding: 0 8px;
  perspective: 1500px;
  perspective-origin: 50% 20%;
}

.scene::before {
  /* объёмное свечение за устройством */
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -6%;
  bottom: 18%;
  background:
    radial-gradient(50% 52% at 50% 46%, color-mix(in srgb, var(--cyan) 34%, transparent), transparent 72%),
    radial-gradient(44% 46% at 22% 18%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 74%);
  filter: blur(46px);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.scene::after {
  /* «пол»: мягкая дорожка света под устройством */
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6%;
  height: 90px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 72%);
  filter: blur(24px);
  z-index: 0;
  pointer-events: none;
}

.device {
  position: relative;
  z-index: 1;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0.12));
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 60px -12px color-mix(in srgb, var(--cyan) 40%, transparent);
  transform: rotateX(4.5deg) rotateY(-9deg) rotateZ(0.35deg);
  transform-style: preserve-3d;
  animation: device-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.device-screen {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #04070b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.device-screen img {
  display: block;
  width: 100%;
  height: auto;
  animation: screen-on 1.2s ease-out 0.15s both;
}

.device-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 42%, transparent 78%, rgba(255, 255, 255, 0.07) 100%);
  mix-blend-mode: screen;
}

.device-reflection {
  position: relative;
  z-index: 0;
  margin: -2px 1.5% 0;
  overflow: hidden;
  max-height: 26vh;
  opacity: 0.34;
  filter: blur(4px) saturate(0.85);
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 62%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 62%);
  pointer-events: none;
}

.device-reflection img {
  display: block;
  width: 100%;
  height: auto;
}

/* хаб: три экрана в одной сцене */
.scene.wall {
  max-width: 1180px;
}

.scene.wall .device-main {
  width: min(100%, 860px);
  margin: 0 auto;
}

.scene.wall .wall-side {
  position: absolute;
  top: 12%;
  width: 46%;
  max-width: 540px;
  z-index: 0;
  opacity: 0.72;
  filter: saturate(0.92);
  pointer-events: none;
}

.scene.wall .wall-side .device {
  animation: none;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.wall-left {
  left: -1%;
  transform: rotate(-8deg);
}

.wall-right {
  right: -1%;
  transform: rotate(8deg);
}

.scene.wall .device-reflection {
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  .scene.wall .wall-side {
    display: none;
  }
}

@keyframes device-in {
  from {
    opacity: 0;
    transform: rotateX(10deg) rotateY(-16deg) translateY(26px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: rotateX(4.5deg) rotateY(-9deg) rotateZ(0.35deg);
  }
}

@keyframes screen-on {
  from {
    filter: brightness(0.25) saturate(0.6);
  }
  to {
    filter: none;
  }
}

/* зерно поверх фона — оживляет градиенты */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .device {
    transform: none;
    animation: none;
  }

  .device-reflection {
    display: none;
  }

  .scene {
    perspective: none;
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device,
  .device-screen img {
    animation: none;
  }
}

/* компактная шапка юридических страниц */
.doc-hero {
  padding: 40px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.doc-hero h1 {
  font-size: clamp(29px, 3.6vw, 44px);
  letter-spacing: -0.035em;
  max-width: 24ch;
}

.doc-hero .doc-meta {
  margin-top: 14px;
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .scene::before {
    background: radial-gradient(50% 52% at 50% 46%, rgba(34, 211, 238, 0.34), transparent 72%);
  }
}

/* ═══ многостраничный каркас bondez.ru ═══════════════════
   Акцент задаётся классом body: каждый продукт получает свой цвет,
   компоненты читают --cyan/--violet, поэтому перекрашиваются целиком. */

body.p-hub     { --cyan: #22d3ee; --violet: #8b5cf6; }
body.p-recneon { --cyan: #a78bfa; --violet: #22d3ee; }
body.p-teletv  { --cyan: #22d3ee; --violet: #7c5cff; }
body.p-neonbit { --cyan: #f472b6; --violet: #22d3ee; }

/* знак студии в шапке: без картинки, только css */
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  background:
    linear-gradient(150deg, var(--cyan), var(--violet));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 18px rgba(34, 211, 238, 0.18);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #06101a;
  letter-spacing: -0.03em;
}

.brand small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 3px;
}

.nav-links a.is-active {
  color: var(--fg);
  background: var(--panel-2);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

/* ── хаб ─────────────────────────────────────────────── */

.hub-hero {
  padding: 60px 0 28px;
}

.hub-hero h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.hub-hero .lead {
  margin-top: 18px;
  color: var(--muted);
  font-size: 18px;
  max-width: 62ch;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--panel);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.product-card .p-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.product-card .p-top img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.product-card h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.product-card .p-kind {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 3px;
}

.product-card p {
  color: var(--muted);
  font-size: 15.2px;
  line-height: 1.55;
}

.product-card .p-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 18px;
}

.product-card .p-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 620;
  font-size: 15px;
  color: var(--cyan);
}

.product-card .p-go svg {
  width: 16px;
  height: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--mono);
  font-size: 11.5px;
  color: #b9c7d6;
  letter-spacing: 0.02em;
}

.badge-live {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.1);
  color: #8ce8bf;
}

.badge-soon {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.09);
  color: #f0cd7a;
}

/* ── блок «что общего» ────────────────────────────────── */

.common {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.common div {
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 14.8px;
  color: #cdd9e6;
}

.common b {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
  font-weight: 600;
}

/* ── страница продукта ────────────────────────────────── */

.prod-hero {
  padding: 48px 0 20px;
}

.prod-hero .ph-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 48px;
  align-items: center;
}

.prod-hero h1 {
  font-size: clamp(30px, 3.5vw, 46px);
  letter-spacing: -0.035em;
}

.prod-hero .ph-sub {
  margin-top: 16px;
  color: var(--muted);
  font-size: 17.5px;
  max-width: 52ch;
}

.prod-hero .ph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.prod-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* телефонная рамка для скриншотов 360x640 */
.phone {
  width: min(100%, 250px);
  padding: 8px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: var(--shadow);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 19px;
  display: block;
}

.phones {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}

.phones .phone {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.phones::-webkit-scrollbar {
  height: 8px;
}

.phones::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

/* ── две платформы (Android / Windows) ────────────────── */

.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.platform {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.platform h3 {
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.platform .pl-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 3px 7px;
}

.platform p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15.2px;
}

.checklist {
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.checklist li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14.8px;
  color: #c9d6e4;
  line-height: 1.5;
}

.checklist svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 4px;
  color: var(--cyan);
}

/* ── цена и покупка ───────────────────────────────────── */

.price-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(70% 120% at 6% 0%, rgba(139, 92, 246, 0.16), transparent 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(34, 211, 238, 0.12), transparent 65%),
    var(--bg-2);
  box-shadow: var(--shadow);
}

.price-card .pc-price {
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-card .pc-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.8px;
  max-width: 56ch;
}

.note-box {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(34, 211, 238, 0.22);
  background: rgba(34, 211, 238, 0.06);
  font-size: 14.6px;
  color: #cfe8ee;
}

.note-box b {
  color: #eaf7fa;
}

/* ── подвал в четыре колонки ──────────────────────────── */

.footer-grid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}

.footer .f-mail {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1024px) {
  .product-grid,
  .common,
  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prod-hero .ph-grid {
    grid-template-columns: 1fr;
  }

  .price-card {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .product-grid,
  .common,
  .platforms {
    grid-template-columns: 1fr;
  }

  .hub-hero {
    padding: 36px 0 18px;
  }
}

/* ── условия покупки: цена и блок оплаты ЮKassa ──────────────── */

.doc .price {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 4px 0 10px;
}

.pay-box {
  margin: 18px 0 10px;
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  text-align: center;
}

/* логотип ЮKassa — серый svg, ему нужна светлая подложка */
.pay-box .ym-logo {
  background: #fff;
  border-radius: 8px;
  padding: 6px 9px;
  height: 29px;
  width: auto;
}

.pay-title {
  font-weight: 650;
  font-size: 16px;
  color: var(--fg);
  margin-bottom: 14px;
}

.pay-note {
  margin-top: 14px;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.55;
}

.doc .card {
  margin: 14px 0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}

.doc .card p:last-child {
  margin-bottom: 0;
}

/* ── конверсия: кнопки скачивания, доверие, автотур ───────── */

.btn-lg {
  padding: 15px 22px;
  font-size: 16.5px;
  border-radius: 12px;
}

.dl {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.dl-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-sub {
  padding-left: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12.4px;
  color: var(--muted);
}

.trust b {
  color: #e2ecf6;
  font-weight: 600;
}

.trust .sep {
  color: rgba(255, 255, 255, 0.22);
}

.trust a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* автотур по реальным экранам: смена кадров без выдуманного контента */
.tour {
  position: relative;
  background: #04070b;
  overflow: hidden;
}

.tour > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.tour > img.is-on {
  opacity: 1;
}

.tour-dot {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(4, 7, 11, 0.62);
  font-family: var(--mono);
  font-size: 10.5px;
  color: #cfdae6;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}

.tour-dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 8px #f87171;
  animation: rec-blink 1.6s ease-in-out infinite;
}

@keyframes rec-blink {
  50% {
    opacity: 0.25;
  }
}

.scene .phone-lg {
  width: min(100%, 288px);
  margin: 0 auto;
}

.scene .phone-lg .phone {
  width: 100%;
  padding: 9px;
  border-radius: 30px;
}

.scene .phone-lg .tour {
  border-radius: 21px;
}

.scene .phone-lg .tour > img {
  border-radius: 21px;
}

/* быстрые ответы */
.qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.qa article {
  padding: 20px 20px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}

.qa h3 {
  font-size: 16.5px;
  letter-spacing: -0.015em;
}

.qa p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.8px;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .qa {
    grid-template-columns: 1fr;
  }

  .dl {
    gap: 10px;
  }

  .dl .btn-lg {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour > img {
    transition: none;
  }

  .tour-dot i {
    animation: none;
  }
}

/* витрина реальных экранов на главной */
.showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.showcase figure {
  margin: 0;
}

.showcase .frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #05080d;
}

.showcase .frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* витрина с автотуром: кадры лежат друг на друге, как в сцене */
.showcase .frame.tour > img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

.showcase .tour-dot {
  left: 9px;
  bottom: 8px;
  padding: 3px 8px;
  font-size: 10px;
}

.showcase figcaption {
  margin-top: 10px;
  font-size: 13.8px;
  color: var(--muted);
}

.showcase figcaption b {
  color: #e6eef7;
  font-weight: 620;
}

.showcase .tagp {
  margin-right: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc, var(--cyan));
}

.showcase figure.pc-recneon {
  --pc: #a78bfa;
}

.showcase figure.pc-teletv {
  --pc: #22d3ee;
}

.showcase figure.pc-neonbit {
  --pc: #f472b6;
}

/* акцент продукта на карточках хаба */
.product-card.pc-recneon {
  --pc: #a78bfa;
}

.product-card.pc-teletv {
  --pc: #22d3ee;
}

.product-card.pc-neonbit {
  --pc: #f472b6;
}

.product-card {
  border-top-color: var(--pc, var(--line));
}

.product-card .p-go {
  color: var(--pc, var(--cyan));
}

.product-card .p-top img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 22px -6px var(--pc, #000);
}

@media (max-width: 900px) {
  .showcase {
    grid-template-columns: 1fr;
  }
}

/* ==== веб-плеер радио на странице NEONbit ==== */
.radio {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.radio-now {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.radio-eq {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.radio-eq i {
  width: 4px;
  height: 40%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  opacity: 0.55;
}

.radio-eq i:nth-child(1) { height: 42%; }
.radio-eq i:nth-child(2) { height: 68%; }
.radio-eq i:nth-child(3) { height: 52%; }
.radio-eq i:nth-child(4) { height: 84%; }

.radio.is-playing .radio-eq i {
  opacity: 1;
  animation: radio-eq 900ms ease-in-out infinite alternate;
}

.radio.is-playing .radio-eq i:nth-child(2) { animation-duration: 700ms; animation-delay: -200ms; }
.radio.is-playing .radio-eq i:nth-child(3) { animation-duration: 1100ms; animation-delay: -400ms; }
.radio.is-playing .radio-eq i:nth-child(4) { animation-duration: 830ms; animation-delay: -120ms; }

@keyframes radio-eq {
  from { height: 18%; }
  to { height: 92%; }
}

.radio-meta { flex: 1 1 240px; min-width: 0; }
.radio-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.radio-title {
  margin-top: 6px;
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 650;
  line-height: 1.2;
  color: var(--fg);
}
.radio-sub { margin-top: 5px; font-family: var(--mono); font-size: 12.2px; color: var(--muted); }

.radio-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.radio-vol-icon {
  display: inline-flex;
  color: var(--muted);
}
.radio-vol-icon svg {
  width: 19px;
  height: 19px;
}

.radio-btn {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--cyan) 70%, transparent);
  transition: transform 0.15s ease;
}
.radio-btn svg { width: 22px; height: 22px; fill: #071018; }
.radio-btn .i-pause { display: none; }
.radio.is-playing .radio-btn .i-pause { display: block; }
.radio.is-playing .radio-btn .i-play { display: none; }
.radio-btn:hover:not(:disabled) { transform: translateY(-1px); }
.radio-btn:disabled { opacity: 0.45; cursor: default; }
.radio-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.radio-vol { width: 108px; accent-color: var(--cyan); cursor: pointer; }

.radio-status {
  margin-top: 14px;
  min-height: 1.4em;
  font-family: var(--mono);
  font-size: 12.4px;
  color: var(--muted);
}
.radio.is-error .radio-status { color: #fca5a5; }

.radio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.radio-search {
  flex: 1 1 240px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}
.radio-search:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.radio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12.6px;
  cursor: pointer;
}
.chip:hover { color: var(--fg); border-color: rgba(255, 255, 255, 0.22); }
.chip.is-on { color: #08131b; background: var(--cyan); border-color: transparent; font-weight: 600; }

.radio-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.radio-list li { min-width: 0; }

.radio-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.radio-item:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.045); }
.radio-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.radio-item.is-on {
  border-color: color-mix(in srgb, var(--cyan) 65%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.radio-item.is-bad { opacity: 0.45; }
.ri-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e9f1f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ri-meta {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.8px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radio-empty { grid-column: 1 / -1; padding: 14px 2px; color: var(--muted); font-size: 14px; }
.radio-note { margin-top: 14px; font-size: 12.6px; line-height: 1.55; color: var(--muted-2); }

@media (max-width: 980px) {
  .radio-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .radio-list { grid-template-columns: 1fr; max-height: 320px; }
  .radio-now { gap: 12px; }
  .radio-actions { width: 100%; justify-content: space-between; }
  .radio-vol { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .radio.is-playing .radio-eq i { animation: none; height: 60%; }
  .radio-btn { transition: none; }
}

/* ── правки по итогам проверки: мобильные мелочи ───────────
   Кнопки-CTA в столбик одной ширины, подписи не выходят за экран,
   жанры радио листаются в одну строку, подвал — в одну колонку. */

/* бургер превращается в крестик, когда меню открыто */
.nav-toggle span {
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.nav.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg);
}

.nav.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg);
}

/* на телефонах убираем blur шапки: он пересчитывается при каждой прокрутке
   и стоит дороже, чем даёт визуально */
@media (max-width: 900px) {
  .nav,
  .nav.is-stuck {
    backdrop-filter: none;
    background: rgba(6, 9, 15, 0.94);
  }
}

@media (max-width: 860px) {
  .dl {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .dl-item {
    width: 100%;
    max-width: 100%;
  }

  .dl-item .btn {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 620px) {
  .radio-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .radio-chips::-webkit-scrollbar {
    display: none;
  }

  .radio-chips .chip {
    flex: 0 0 auto;
  }
}

/* Печать: сайт тёмный, поэтому на бумаге всё принудительно переводится
   в светлую тему — иначе текст остаётся светло-серым на белом. */
@media print {
  body::before,
  .radio,
  .nav,
  .footer,
  .tv::before,
  .scene,
  .tour-dot,
  .hero-listen,
  .skip,
  .pay-box .ym-logo {
    display: none;
  }

  html,
  body {
    background: #fff !important;
    color: #111 !important;
  }

  body {
    font-size: 11.5pt;
    line-height: 1.45;
  }

  h1, h2, h3, h4, h5,
  p, li, dt, dd, th, td, code, small, b, strong, summary, figcaption, div,
  .muted, .doc-meta, .doc-back, .price, .pay-note, .hero-note,
  .meta-foot, .disclaimer, .pl-tag, .badge, .tag, .eyebrow, .lead, .trust,
  .tagp, .hl-note {
    color: #111 !important;
  }

  a:not(.btn) {
    color: #0b4ea2 !important;
    text-decoration: underline;
  }

  .btn {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }

  /* кнопка ЮKassa печатается светлой — фон по умолчанию не печатается */
  .ym-btn-pay,
  .ym-btn-pay * {
    color: #111 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .ym-btn-pay {
    border: 1px solid #999 !important;
  }

  .card, .note-box, .pay-box, .platform, .format-box, .meta-row,
  .price-card, .product-card, .qa article, .step, .install,
  .badge, .tag, .frame, .tv-frame, .device {
    background: #fff !important;
    border-color: #bbb !important;
    box-shadow: none !important;
  }

  /* раскрытые вопросы печатаем целиком, даже если на экране они свёрнуты */
  details > summary ~ * {
    display: block !important;
  }

  img {
    max-width: 100% !important;
  }

  h2, h3 {
    break-after: avoid;
  }

  .card, .platform, .note-box, details, .meta-row {
    break-inside: avoid;
  }
}

/* ==== NEON TRAIL ==== */
/* Обновлено: 2026-10-28 · зелёная тема страницы продукта, сцена лучей на главной */

/* акцент четвёртого продукта на карточках хаба */
.product-card.pc-neontrail {
  --pc: #7be38b;
}

/* ── зелёная тема страницы Neon Trail ─────────────────────────────── */

body.p-neontrail {
  --cyan: #7be38b;
  --violet: #34d399;
}

body.p-neontrail .card-ico {
  color: #7be38b;
  background: rgba(123, 227, 139, 0.09);
  border-color: rgba(123, 227, 139, 0.24);
}

body.p-neontrail .btn-primary {
  background: linear-gradient(180deg, #a4f3b2, #57cf78);
  color: #06210f;
  box-shadow: 0 10px 26px rgba(123, 227, 139, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.p-neontrail .btn-primary:hover {
  box-shadow: 0 14px 32px rgba(123, 227, 139, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.p-neontrail .hero-stack h1 .glow,
.hero-trail h1 .glow {
  background: linear-gradient(96deg, #e6ffe9 4%, #7be38b 44%, #34d399 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.p-neontrail .step-num {
  color: #7be38b;
}

body.p-neontrail .scan-line,
body.p-neontrail .badge-live {
  color: #7be38b;
}

/* ── первый экран: неоновая дымка и два телефона ──────────────────── */

.hero-trail {
  overflow: hidden;
  padding-bottom: 10px;
}

.hero-trail .aurora {
  position: absolute;
  top: -36%;
  left: -12%;
  right: -12%;
  height: 152%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-trail .aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(32% 26% at 22% 26%, rgba(126, 255, 158, 0.42), transparent 72%),
    radial-gradient(40% 30% at 64% 16%, rgba(90, 226, 130, 0.32), transparent 74%),
    radial-gradient(44% 34% at 40% 62%, rgba(56, 190, 110, 0.26), transparent 76%),
    radial-gradient(28% 24% at 84% 34%, rgba(150, 255, 180, 0.2), transparent 74%);
  filter: blur(52px);
}

.hero-trail .aurora-stars {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  background-image:
    radial-gradient(1.5px 1.5px at 14px 22px, rgba(236, 255, 242, 0.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 62px 96px, rgba(200, 255, 220, 0.8), transparent 60%),
    radial-gradient(1.7px 1.7px at 118px 48px, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 158px 132px, rgba(214, 255, 230, 0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 196px 74px, rgba(230, 255, 238, 0.6), transparent 60%);
  background-size: 260px 260px, 320px 320px, 380px 380px, 440px 440px, 520px 520px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 32%, #000 26%, transparent 88%);
  mask-image: radial-gradient(72% 62% at 50% 32%, #000 26%, transparent 88%);
}

.hero-trail .hero-stack::before,
.hero-trail::before {
  display: none;
}

.hero-trail-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 44px;
  align-items: center;
  padding-top: 24px;
}

.hero-trail h1 {
  font-size: clamp(31px, 4vw, 57px);
  line-height: 1.06;
  max-width: 16ch;
  margin-top: 16px;
}

.hero-trail .lead {
  max-width: 50ch;
}

.hero-trail-phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 6px;
}

.hero-trail-phones .phone {
  background: linear-gradient(168deg, rgba(190, 255, 210, 0.24), rgba(255, 255, 255, 0.03) 44%, rgba(123, 227, 139, 0.16));
  border-color: rgba(180, 255, 205, 0.24);
}

.hero-trail-phones .phone-main {
  width: min(64%, 318px);
  z-index: 2;
  box-shadow:
    0 44px 90px -34px rgba(0, 0, 0, 0.92),
    0 0 90px -18px rgba(96, 220, 140, 0.42);
  animation: trail-phone-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-trail-phones .phone-side {
  width: min(46%, 228px);
  margin-left: -54px;
  margin-bottom: 38px;
  transform: rotate(-3.5deg);
  opacity: 0.94;
  z-index: 1;
  animation: trail-phone-in 1.15s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both;
}

@keyframes trail-phone-in {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-1deg);
  }
}

@media (max-width: 980px) {
  .hero-trail-in {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-trail-phones {
    padding-top: 6px;
  }

  .hero-trail-phones .phone-main {
    width: min(58%, 290px);
  }

  .hero-trail-phones .phone-side {
    width: min(42%, 210px);
  }
}

@media (max-width: 560px) {
  .hero-trail-phones .phone-side {
    display: none;
  }

  .hero-trail-phones .phone-main {
    width: min(80%, 300px);
  }
}

/* ── сцена лучей на главной (референс: вертикальные лучи из светящейся лужи) ── */

.scene.beam {
  max-width: 1180px;
  margin-top: 8px;
}

.hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 46px;
  align-items: center;
}

.hero-hub h1 {
  font-size: clamp(30px, 3.35vw, 48px);
  max-width: 26ch;
  margin-top: 14px;
}

.hero-hub .lead {
  margin-top: 18px;
  max-width: 48ch;
}

.hero-hub .dl {
  gap: 12px;
  margin-top: 22px;
}

.hero-hub .scene {
  margin: 0;
  max-width: none;
  padding: 0;
}

.hero-hub .scene .device-main {
  width: 88%;
  margin: 0 auto;
}

.hero-hub .beam-stage {
  top: -40%;
  width: 122%;
  height: 160%;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hero-chips .btn {
  font-weight: 560;
  color: var(--muted);
}

.hero-chips .btn:hover {
  color: var(--fg);
}

@media (max-width: 980px) {
  .hub-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-hub .scene {
    width: min(100%, 560px);
    max-width: none;
    margin: 0 auto;
  }
}

.scene.beam::before,
.scene.beam::after {
  display: none;
}

.beam-stage {
  position: absolute;
  left: 50%;
  top: -46%;
  width: min(1420px, 152%);
  height: 154%;
  transform: translateX(-50%);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.beam-haze {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96%;
  height: 94%;
  transform: translateX(-50%);
  background:
    radial-gradient(42% 44% at 50% 88%, rgba(96, 232, 150, 0.18), transparent 72%),
    radial-gradient(62% 40% at 50% 100%, rgba(60, 190, 120, 0.12), transparent 76%);
  filter: blur(34px);
}

.beam-curtain {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: min(1080px, 100%);
  height: 96%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    90deg,
    rgba(150, 255, 190, 0) 0 4px,
    rgba(160, 255, 200, 0.62) 4px 5px,
    rgba(150, 255, 190, 0) 5px 11px,
    rgba(200, 255, 216, 0.42) 11px 12px,
    rgba(150, 255, 190, 0) 12px 19px,
    rgba(120, 240, 170, 0.55) 19px 20px,
    rgba(150, 255, 190, 0) 20px 29px
  );
  filter: blur(0.8px);
  -webkit-mask-image: radial-gradient(60% 118% at 50% 100%, #000 22%, rgba(0, 0, 0, 0.62) 58%, transparent 92%);
  mask-image: radial-gradient(60% 118% at 50% 100%, #000 22%, rgba(0, 0, 0, 0.62) 58%, transparent 92%);
}

.beam-core {
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: min(340px, 32%);
  height: 94%;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(210, 255, 228, 0.5) 42%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(210, 255, 228, 0.5) 58%,
    transparent
  );
  filter: blur(7px);
  opacity: 0.95;
  box-shadow: 0 0 90px 28px rgba(120, 255, 170, 0.1);
  -webkit-mask-image: linear-gradient(to top, #000 32%, rgba(0, 0, 0, 0.35) 76%, transparent 98%);
  mask-image: linear-gradient(to top, #000 32%, rgba(0, 0, 0, 0.35) 76%, transparent 98%);
}

.beam-pool {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: min(520px, 66%);
  height: 64px;
  transform: translate(-50%, 50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.82),
    rgba(150, 255, 190, 0.5) 42%,
    transparent 74%
  );
  filter: blur(24px);
}

.beam-floor {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -4%;
  height: 38%;
  background:
    repeating-linear-gradient(to right, rgba(140, 255, 180, 0.26) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(to bottom, rgba(140, 255, 180, 0.2) 0 1px, transparent 1px 58px);
  transform: perspective(460px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 6%, rgba(0, 0, 0, 0.5) 52%, transparent 86%);
  mask-image: linear-gradient(to top, #000 6%, rgba(0, 0, 0, 0.5) 52%, transparent 86%);
}

.scene.beam .device-main {
  position: relative;
  z-index: 1;
}

.scene.beam .device-reflection {
  position: relative;
  z-index: 1;
  opacity: 0.26;
}

@media (max-width: 700px) {
  .beam-curtain {
    width: 92%;
  }

  .beam-pool {
    height: 54px;
  }
}

/* ── блок-примечание и мелкие детали страницы продукта ────────────── */

.trail-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(240, 163, 60, 0.28);
  background: rgba(240, 163, 60, 0.07);
  color: #e8d5b8;
  font-size: 14.8px;
  line-height: 1.55;
}

.trail-note svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: #f0a33c;
}

.trail-shot {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: clamp(190px, 22vw, 240px);
  margin: 0;
}

.trail-shot figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  text-align: center;
}

.phones.trail-gallery {
  justify-content: center;
  gap: 22px;
  padding-bottom: 4px;
}

.phones.trail-gallery .phone {
  width: 100%;
}

.phones.trail-gallery .trail-shot figcaption {
  font-size: 12px;
}

@media (max-width: 760px) {
  .phones.trail-gallery {
    justify-content: flex-start;
  }

  .phones.trail-gallery .trail-shot {
    width: 62vw;
  }
}

/* ==== /NEON TRAIL ==== */