/* Приложението: меню отляво, панел отдясно. Токените идват от styles.css. */
:root {
  --side-w: 264px;
  --top-h: 60px;
  --bg: #111216;
  --panel: #1a1b20;
  --panel-2: #22242a;
  --line: #2b2d35;
  --glow: #3a3f7a;
}
.app-body {
  background: var(--bg);
}
.no-scroll {
  overflow: hidden;
}
.shell {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100vh;
}
/* Менюто се скрива и показва от бутона горе вляво; състоянието се пази в браузъра. */
@media (min-width: 961px) {
  html.side-off .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Скрито меню: стои извън екрана и се показва, когато мишката доближи левия ръб. */
  html.side-off .side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: var(--side-w);
    transform: translateX(-104%);
    transition: transform 0.2s ease;
    box-shadow: 24px 0 60px -30px rgb(0 0 0 / 0.9);
  }
  html.side-off .side.is-peek {
    transform: none;
  }
  html.side-off .top__brand {
    display: block;
  }
}
.inline {
  display: inline;
}
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linklike:hover {
  color: var(--text);
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.875rem;
}

/* ---------- Меню отляво ---------- */
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  background: #0d0e11;
  border-right: 1px solid var(--line);
}
.side__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 18px;
}
.side__brand {
  font: 800 1.375rem/1 var(--cond);
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}
/* Логото: „Creator“ + знакът X (бяла черта и жълта стрелка), както при ScaleX. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  white-space: nowrap;
}
.brand-x {
  width: 1.05em;
  height: auto;
  flex: none;
}
.side__close {
  display: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.side__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.side__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #c9c7c0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.side__item:hover {
  background: var(--panel);
  color: var(--text);
}
.side__item.is-on {
  background: var(--panel-2);
  color: var(--text);
}
.side__item.is-on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--yellow);
}
.side__item.is-on .side__icon {
  color: var(--yellow);
}
.side__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  color: var(--muted);
}
.side__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side__tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}
.side__head {
  margin: 18px 12px 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.side__bottom {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--line);
}
.side__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.side__user:hover {
  background: var(--panel);
}
.side__username {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
}
.side__out {
  margin-left: 8px;
  font-size: 0.8125rem;
}
.shell__backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.55);
}

/* ---------- Панел отдясно ---------- */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--top-h);
  padding: 0 clamp(16px, 2.5vw, 32px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.top__menu {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.top__brand {
  display: none;
  font: 800 1.375rem/1 var(--cond);
  color: var(--text);
  text-decoration: none;
}
.top__right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.top__quota {
  color: var(--muted);
  font-size: 0.8125rem;
}
.btn--max {
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--yellow);
  color: #111;
  font-size: 1.0625rem;
  font-weight: 800;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--yellow) 70%, transparent);
}
.btn--max:hover {
  background: #ffd43b;
}
.content {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 36px) clamp(16px, 2.5vw, 32px) clamp(48px, 6vw, 80px);
}
.content--wide {
  max-width: 1280px;
}
.content::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -120px;
  width: 900px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--glow) 55%, transparent) 0%, transparent 65%);
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}
.phead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.phead__title {
  font: 800 clamp(1.75rem, 3vw, 2.5rem)/1.05 var(--cond);
  letter-spacing: -0.03em;
}
.phead__lead {
  max-width: 44em;
  margin-top: 8px;
  color: var(--muted);
}
.phead__lead a,
.muted a,
.sub__lead a {
  color: var(--text);
}
.flash {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--teal) 18%, var(--panel));
}
.flash--err {
  background: color-mix(in srgb, var(--playhead) 16%, var(--panel));
}

/* Карта за действие в центъра (като „Add media“ в Captions) */
.action {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.action .drop {
  margin: 0;
  background: var(--panel-2);
}
.action__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.gate {
  padding: 24px 22px;
  border: 1px dashed color-mix(in srgb, var(--yellow) 50%, var(--line));
  border-radius: 16px;
  text-align: center;
}
.gate__title {
  font: 800 1.375rem/1.1 var(--cond);
  letter-spacing: -0.02em;
}
.gate__text {
  margin-top: 8px;
  color: var(--muted);
}
.gate__btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Галерии: стилове, шаблони */
.gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(28px, 4vw, 40px) 0 12px;
}
.gallery__head h2 {
  font: 800 1.25rem/1.1 var(--cond);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.gallery--wide {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.gtile {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
  transition: transform 0.2s, border-color 0.2s;
}
.gtile:hover {
  transform: translateY(-2px);
}
.gtile.is-on {
  border-color: var(--yellow);
}
.gtile img {
  width: 100%;
  height: auto; /* атрибутът height на <img> иначе надделява над aspect-ratio */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.gallery--wide .gtile img {
  aspect-ratio: 1;
}
.gtile__label {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

/* Начало: продуктите в колона */
.plist {
  display: grid;
  gap: 10px;
}
.prow {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.prow:hover {
  border-color: color-mix(in srgb, var(--yellow) 45%, var(--line));
  background: var(--panel-2);
}
.prow__img {
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--panel-2);
}
.prow__kind {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.prow__name {
  margin-top: 2px;
  font: 800 1.5rem/1 var(--cond);
}
.prow__blurb {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 48em;
}
.prow__side {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}
.prow__price {
  font: 800 1.5rem/1 var(--cond);
}
.prow__free {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 20%, var(--panel));
  color: var(--teal);
  font-size: 0.8125rem;
  font-weight: 700;
}
.prow__soon {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
}
.prow .btn {
  min-height: 40px;
}

/* Профил и списъци */
.block {
  margin-top: clamp(32px, 4vw, 44px);
}
.block__title {
  margin-bottom: 12px;
  font: 800 1.625rem/1 var(--cond);
}
.rows,
.tools {
  border-top: 1px solid var(--line);
}
.row,
.tools li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.tools li {
  display: block;
}
.row__name {
  font-weight: 700;
}
.row__meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.row .btn,
.row form {
  flex: none;
}
.pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}
.pill--ok {
  background: color-mix(in srgb, var(--teal) 24%, var(--panel));
  color: var(--teal);
}
.pill--warn {
  background: color-mix(in srgb, var(--yellow) 22%, var(--panel));
  color: var(--yellow);
}
.pill--off {
  background: var(--panel-2);
  color: var(--muted);
}
.pill--soon {
  background: color-mix(in srgb, var(--lav) 20%, var(--panel));
  color: var(--lav);
}

/* Форми за вход */
.auth {
  max-width: 440px;
}
.auth .form {
  margin-top: 24px;
}
.auth__links {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.auth__links a {
  color: var(--text);
}
.form--narrow {
  max-width: 440px;
}
.form__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}
.form__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--yellow);
}
.form__check a {
  color: var(--text);
}
.form .btn--primary:disabled {
  opacity: 0.45;
}
.is-shake {
  animation: shake 0.4s;
}
@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Планове */
.planove {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text);
}
.planove::backdrop {
  background: rgb(0 0 0 / 0.7);
}
.planove__in {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--yellow) 12%, transparent) 0%, transparent 55%);
}
.planove__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.planove__title {
  font: 800 clamp(2rem, 4vw, 2.75rem)/1 var(--cond);
  text-align: center;
}
.planove__lead {
  margin-top: 8px;
  color: var(--muted);
  text-align: center;
}
.planove__tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.planove__tab {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.planove__tab.is-on {
  background: var(--text);
  border-color: var(--text);
  color: var(--ink);
}
.planove__toggle {
  display: inline-flex;
  margin: 16px auto 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}
.planove__toggle button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.planove__toggle button.is-on {
  background: var(--panel-2);
  color: var(--text);
}
.planove__toggle span {
  margin-left: 4px;
  color: var(--teal);
}
.planove__panel {
  display: none;
}
.planove__panel.is-on {
  display: block;
}
.planove__desc {
  margin-top: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 0.9375rem;
}
.plancards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.plancard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.plancard--rec {
  border-color: color-mix(in srgb, var(--yellow) 55%, var(--line));
  background: color-mix(in srgb, var(--yellow) 5%, var(--panel));
}
.plancard__rec {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
}
.plancard__name {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  font-size: 0.875rem;
  font-weight: 700;
  align-self: flex-start;
}
.plancard__price {
  margin-top: 14px;
  color: var(--muted);
}
.plancard__price s {
  margin-right: 6px;
  font-size: 1.125rem;
}
.plancard__price strong {
  color: var(--text);
  font: 800 2.25rem/1 var(--cond);
}
.plancard__note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8125rem;
}
.plancard__list {
  margin: 16px 0 20px;
  display: grid;
  gap: 8px;
  font-size: 0.9375rem;
}
.plancard__list li {
  position: relative;
  padding-left: 24px;
}
.plancard__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 11px;
  height: 7px;
  border-radius: 2px;
  background: var(--teal);
}
.plancard form {
  margin-top: auto;
}
.planove__consent {
  justify-content: center;
  margin-top: 18px;
}
.planove__fine {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

/* Админ */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 8px;
  border-bottom: 1px solid var(--line);
}
.subnav a {
  padding: 10px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.subnav a.is-on,
.subnav a:hover {
  color: var(--text);
  border-bottom-color: var(--yellow);
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.stats li {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.stats strong {
  display: block;
  font: 800 2.25rem/1 var(--cond);
  font-variant-numeric: tabular-nums;
}
.stats span {
  color: var(--muted);
  font-size: 0.875rem;
}
.tablewrap {
  overflow-x: auto;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.tbl th,
.tbl td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.tbl th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8125rem;
}
.tbl a {
  color: var(--text);
}
.searchbar {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.searchbar input {
  flex: 1;
  max-width: 360px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}
.kv div {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.kv dt {
  color: var(--muted);
  font-size: 0.8125rem;
}
.kv dd {
  margin-top: 2px;
  font-weight: 600;
  word-break: break-all;
}
.kv a {
  color: var(--text);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 20px;
}
.inlineform {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.inlineform label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted);
}
.inlineform input {
  width: 72px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* Футър в приложението */
.foot--app {
  border-top: 1px solid var(--line);
  padding: 20px clamp(16px, 2.5vw, 32px) 28px;
  font-size: 0.8125rem;
}
.foot--app .foot__in {
  max-width: 1040px;
  margin-inline: auto;
}

/* Страниците с вход ползват същите заглавия като преди */
.sub__title {
  font: 800 clamp(2.25rem, 4.2vw, 3.25rem)/0.95 var(--cond);
  letter-spacing: -0.006em;
}
.sub__lead {
  max-width: 44em;
  margin-top: 10px;
  color: var(--muted);
}
.sub__h2 {
  margin-top: 40px;
  font: 800 1.75rem/1 var(--cond);
}
.sub__muted {
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.sub__muted a {
  color: var(--text);
}

@media (max-width: 960px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: min(320px, 86vw);
    transform: translateX(-104%);
    transition: transform 0.25s ease;
  }
  .side.is-open {
    transform: none;
  }
  .side__close {
    display: grid;
    place-items: center;
  }
  .top__menu,
  .top__brand {
    display: block;
  }
  .top__quota {
    display: none;
  }
  /* Прозорецът „Планове“ на телефон: лепим го за левия ръб, за да не зависи от центрирането на браузъра. */
  .planove {
    position: fixed;
    left: 16px;
    right: auto;
    top: 16px;
    margin: 0;
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  .plancards {
    grid-template-columns: minmax(0, 1fr);
  }
  .prow {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .prow__img {
    width: 88px;
    height: 66px;
  }
  .prow__side {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    white-space: nowrap;
    text-align: left;
  }
  .row {
    flex-wrap: wrap;
  }
  .row .btn {
    width: 100%;
  }
}

/* ---------- Наръчници ---------- */
.guide {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 28px clamp(28px, 5vw, 64px);
  align-items: start;
}
.guide__cover img {
  width: min(100%, 420px);
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
.guide__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.guide__facts li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.guide__facts strong {
  display: block;
  font: 800 1.375rem/1 var(--cond);
}
.guide__facts span {
  color: var(--muted);
  font-size: 0.8125rem;
}
.viewer--wide {
  max-width: none;
  aspect-ratio: auto;
  padding: 24px;
  align-items: center;
  border-radius: 14px;
}
.viewer--wide::before {
  display: none;
}
.viewer--wide .viewer__subs {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------- Курс ---------- */
.kban {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  padding: 28px;
  border-radius: 20px;
  overflow: hidden;
  background: url('/assets/img/kurs/fon.webp') center right / cover no-repeat #141a24;
}
.kban__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.kban__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(10 10 14 / 0.9) 0%, rgb(10 10 14 / 0.55) 55%, rgb(10 10 14 / 0.1) 100%);
}
.kban__text {
  position: relative;
  max-width: 34em;
}
.kban__new {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--teal);
  color: #0b2a24;
  font-size: 0.8125rem;
  font-weight: 800;
}
.kban__title {
  margin-top: 12px;
  font: 800 clamp(1.9rem, 3.4vw, 2.9rem)/1.05 var(--cond);
  letter-spacing: -0.03em;
}
.kban__lead {
  margin-top: 10px;
  color: #d9d7d0;
}
.kban__apps {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-weight: 700;
}
.kban__app {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.appchip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font: 800 1rem/1 var(--sans);
  letter-spacing: -0.02em;
}
.appchip--pr {
  background: #2a0b2d;
  color: #e8a0ff;
  border: 1px solid #5a2a60;
}
/* Логото на DaVinci Resolve е цветно само по себе си: без фон и рамка. */
.appchip--dr {
  background: none;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
.kban__author {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgb(10 10 14 / 0.6);
  backdrop-filter: blur(6px);
}
.kban__author p {
  font-weight: 700;
  font-size: 0.9375rem;
}
.kban__author span:last-child {
  color: var(--muted);
  font-size: 0.75rem;
}
.kmeta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.kmeta li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.kmeta strong {
  display: block;
  font: 800 1.25rem/1 var(--cond);
}
.kmeta span {
  color: var(--muted);
  font-size: 0.8125rem;
}
.kmod {
  margin-top: 28px;
}
.kmod__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kmod__head h2 {
  font: 800 1.625rem/1 var(--cond);
}
.drop--locked {
  cursor: pointer;
}
@media (max-width: 960px) {
  .guide {
    grid-template-columns: minmax(0, 1fr);
  }
  .kmeta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kban__author {
    position: static;
    margin-top: 16px;
    align-self: flex-start;
  }
}

/* Карта „преди/след“ със стиловете (субтитри) */
.feature {
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.feature__title {
  font: 800 clamp(1.5rem, 2.6vw, 2rem)/1 var(--cond);
}
.feature__lead {
  max-width: 40em;
  margin-top: 8px;
  color: var(--muted);
}
.feature__demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  max-width: 760px;
  margin: 22px auto 0;
}
.feature__phone {
  width: 100%;
  max-width: 230px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.9);
}
.feature__chips {
  display: grid;
  gap: 8px;
  justify-items: center;
}
.chip--on {
  border-color: color-mix(in srgb, var(--teal) 60%, var(--line));
  color: var(--teal);
}
.chip--pick {
  border-color: var(--yellow);
  color: var(--yellow);
}
@media (max-width: 720px) {
  .feature__demo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .feature__chips {
    grid-column: 1 / -1;
    order: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .feature__chips .chip {
    padding: 7px 12px;
    font-size: 0.875rem;
  }
}


/* ---------- Начало: герой, карти и стъпки ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 3.5vw, 44px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 85% 20%, color-mix(in srgb, var(--yellow) 18%, transparent) 0%, transparent 50%),
    linear-gradient(135deg, #1b1d24 0%, #15161b 100%);
  overflow: hidden;
}
.hero__kicker {
  color: var(--yellow);
  font-size: 0.9375rem;
  font-weight: 700;
}
.hero__title {
  margin-top: 10px;
  font: 800 clamp(2rem, 3.6vw, 3.25rem)/1.02 var(--cond);
  letter-spacing: -0.035em;
}
.hero__lead {
  max-width: 34em;
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.0625rem;
}
.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.hero__art {
  position: relative;
  min-height: 380px;
}
.hero__art img {
  position: absolute;
  height: auto; /* иначе атрибутът height на <img> надделява над aspect-ratio */
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9);
  object-fit: cover;
}
.hero__phone {
  width: 31%;
  aspect-ratio: 9 / 16;
}
.hero__phone--a {
  left: 4%;
  top: 12%;
  transform: rotate(-7deg);
  z-index: 1;
}
.hero__phone--b {
  left: 30%;
  top: 2%;
  z-index: 2;
}
.hero__tile {
  right: 2%;
  top: 10%;
  width: 31%;
  aspect-ratio: 9 / 16;
  transform: rotate(6deg);
  z-index: 3;
}
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.pcard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--yellow) 45%, var(--line));
}
.pcard__img {
  width: 100%;
  height: auto; /* атрибутът height иначе надделява над aspect-ratio */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--panel-2);
}
.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.pcard__kind {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pcard__name {
  margin-top: 4px;
  font: 800 1.375rem/1.1 var(--cond);
  letter-spacing: -0.025em;
}
.pcard__blurb {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}
.pcard__price {
  font: 800 1.375rem/1 var(--cond);
  letter-spacing: -0.02em;
}
.pcard__foot .btn,
.pcard__foot .prow__free {
  white-space: nowrap;
}
.pcard__foot .prow__free {
  font-size: 0.75rem;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.step {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.step__n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--yellow) 16%, transparent);
  color: var(--yellow);
  font-weight: 800;
}
.step__title {
  margin-top: 14px;
  font: 800 1.125rem/1.2 var(--cond);
  letter-spacing: -0.02em;
}
.step__text {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
}
@media (max-width: 1100px) {
  .pgrid,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__art {
    min-height: 260px;
  }
}
@media (max-width: 640px) {
  .pgrid,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ---------- Общи блокове по страниците ---------- */
.hero__art--fan img {
  width: 34%;
  aspect-ratio: 9 / 16;
  top: 8%;
}
.hero__art--fan img:nth-child(1) {
  left: 2%;
  transform: rotate(-8deg);
  z-index: 1;
}
.hero__art--fan img:nth-child(2) {
  left: 33%;
  top: 2%;
  z-index: 3;
}
.hero__art--fan img:nth-child(3) {
  right: 2%;
  transform: rotate(8deg);
  z-index: 2;
}
.hero__art--cover {
  display: grid;
  place-items: center;
}
.hero__art--cover img {
  position: static;
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  transform: rotate(3deg);
}
.hero__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  font: 800 2rem/1 var(--cond);
  letter-spacing: -0.03em;
}
.hero__price span {
  color: var(--muted);
  font: 600 0.9375rem/1 var(--sans);
  letter-spacing: 0;
}
.bsec {
  margin-top: 28px;
}
.bgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.bcard {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.bcard__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
  color: var(--yellow);
}
.bcard__title {
  margin-top: 14px;
  font: 800 1.0625rem/1.2 var(--cond);
  letter-spacing: -0.02em;
}
.bcard__text {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.teaser {
  margin-top: 28px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, #1b1d24 0%, #15161b 100%);
}
.teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}
.teaser__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}
.tcard {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.tcard--rec {
  border-color: color-mix(in srgb, var(--yellow) 60%, var(--line));
}
.tcard__name {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
}
.tcard__price {
  margin-top: 6px;
  font: 800 1.75rem/1 var(--cond);
  letter-spacing: -0.03em;
}
.tcard__price span {
  color: var(--muted);
  font: 600 0.875rem/1 var(--sans);
  letter-spacing: 0;
}
.tcard__text {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 14px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.strip img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}
.split__side {
  position: sticky;
  top: calc(var(--top-h) + 16px);
}
.kmeta--guide {
  margin-top: 18px;
}
@media (max-width: 1100px) {
  .bgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split__side {
    position: static;
  }
}
@media (max-width: 640px) {
  .bgrid,
  .teaser__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Горна лента: връзки към страниците (на телефон остава менюто вляво) */
.top__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  overflow-x: auto;
}
.top__link {
  padding: 9px 12px;
  border-radius: 10px;
  color: #c9c7c0;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.top__link:hover {
  background: var(--panel-2);
  color: var(--text);
}
.top__link.is-on {
  background: var(--panel-2);
  color: var(--yellow);
}
.top__right {
  margin-left: auto;
}
@media (max-width: 960px) {
  .top__nav {
    display: none;
  }
}


/* ---------- Корекции: цени в картите, кутии в героя, разговорът, анимации ---------- */
.pcard__price span {
  margin-left: 2px;
  color: var(--muted);
  font: 600 0.875rem/1 var(--sans);
  letter-spacing: 0;
}
.pcard__kind .prow__free {
  margin-left: 8px;
  padding: 3px 9px;
  font-size: 0.75rem;
  vertical-align: 1px;
}
.hero__art--box {
  min-height: 0;
}
.hero__art--box img {
  position: static;
  width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
  border-radius: 18px;
}
.steps--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 14px;
}
.steps--5 .step {
  padding: 18px;
}
.bubbles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin-top: 14px;
}
.bubble {
  align-self: flex-start;
  max-width: 78%;
  padding: 11px 16px;
  border-radius: 18px 18px 18px 6px;
  background: var(--panel-2);
  font-weight: 600;
}
.bubble--you {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: var(--yellow);
  color: #111;
}
@media (max-width: 1100px) {
  .steps--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .steps--5 {
    grid-template-columns: minmax(0, 1fr);
  }
  .bubble {
    max-width: 92%;
  }
}

/* Леки анимации: героят влиза веднъж, колажът плава, картите се появяват при скрол. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes float {
  from { translate: 0 0; }
  to { translate: 0 -8px; }
}
.hero > div:first-child > * {
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero > div:first-child > *:nth-child(2) { animation-delay: 0.08s; }
.hero > div:first-child > *:nth-child(3) { animation-delay: 0.16s; }
.hero > div:first-child > *:nth-child(4) { animation-delay: 0.24s; }
.hero__art {
  animation: rise 0.7s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero__art img:not(.hero__art--box img) {
  animation: float 3.2s ease-in-out infinite alternate;
}
.hero__art img:nth-child(2) { animation-delay: 0.6s; }
.hero__art img:nth-child(3) { animation-delay: 1.2s; }
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero > div:first-child > *, .hero__art, .hero__art img { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ---------- Колелото за отстъпка и полетата за код ---------- */
.kolelo {
  width: min(860px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg);
  color: var(--text);
}
.kolelo::backdrop {
  background: rgb(0 0 0 / 0.72);
}
.kolelo__in {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
}
.kolelo__wheelwrap {
  --r: 108px;
  position: relative;
  width: 300px;
  height: 300px;
  margin-inline: auto;
}
.kolelo__pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  translate: -50% 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 28px solid #fff;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.5));
}
.kolelo__wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid #15161b;
  background: conic-gradient(from 0deg, var(--yellow) 0 60deg, #2a2d34 60deg 120deg, var(--yellow) 120deg 180deg, #2a2d34 180deg 240deg, var(--yellow) 240deg 300deg, #2a2d34 300deg 360deg);
  box-shadow: 0 0 0 2px var(--line), 0 30px 60px -30px rgb(0 0 0 / 0.9);
  transition: transform 4.2s cubic-bezier(0.17, 0.67, 0.12, 1);
  will-change: transform;
}
.kolelo__wheel::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #15161b;
  box-shadow: 0 0 0 3px var(--yellow);
}
.kolelo__label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  margin: -14px 0 0 -45px;
  text-align: center;
  font: 800 1.25rem/1 var(--cond);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r)));
}
.kolelo__title {
  margin-top: 8px;
  font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.05 var(--cond);
  letter-spacing: -0.03em;
}
.kolelo__form {
  margin-top: 16px;
}
.kolelo__form .form__check {
  margin: 10px 0 14px;
  font-size: 0.875rem;
}
.kolelo__msg {
  margin-top: 10px;
}
.kolelo__won {
  margin-top: 16px;
  font: 800 1.5rem/1 var(--cond);
  color: var(--yellow);
}
.kolelo__code {
  display: inline-block;
  margin: 12px 0 16px;
  padding: 12px 20px;
  border: 2px dashed color-mix(in srgb, var(--yellow) 70%, var(--line));
  border-radius: 12px;
  font: 800 1.75rem/1 var(--cond);
  letter-spacing: 0.06em;
}
.order__code {
  margin: 14px 20px 0;
}
.order__codemsg {
  margin: 6px 20px 0;
  color: var(--teal);
  font-size: 0.875rem;
  font-weight: 600;
}
.order__codemsg.is-bad {
  color: #ff7a6b;
}
.planove__code {
  max-width: 340px;
  margin: 6px auto 0;
}
@media (max-width: 760px) {
  .kolelo__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .kolelo__wheelwrap {
    --r: 84px;
    width: 236px;
    height: 236px;
  }
  .kolelo__label {
    font-size: 1.0625rem;
  }
}


/* ---------- Телефон: горна лента, герой, цена, колело ---------- */
@media (max-width: 960px) {
  .kolelo {
    position: fixed;
    left: 16px;
    right: auto;
    top: 16px;
    margin: 0;
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  .kolelo__in {
    padding: 22px 18px;
  }
}
@media (max-width: 640px) {
  .btn--max {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  .btn--max svg {
    display: none;
  }
  .top {
    gap: 8px;
  }
  .hero {
    padding: 22px 18px;
    border-radius: 18px;
  }
  .hero__title {
    font-size: 1.85rem;
  }
  .hero__lead {
    font-size: 1rem;
  }
  .hero__btns .btn {
    width: 100%;
  }
  .hero__price {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 1.75rem;
  }
  .hero__art {
    min-height: 300px;
  }
  .hero__phone {
    width: 34%;
  }
  .hero__tile {
    width: 34%;
  }
  .hero__art--box {
    min-height: 0;
  }
  .pcard__name {
    font-size: 1.25rem;
  }
  .teaser {
    padding: 20px 16px;
  }
  .bgrid, .steps, .steps--5 {
    gap: 10px;
  }
  .bcard, .step {
    padding: 16px;
  }
  .kmeta {
    gap: 10px;
  }
}

.kolelo__msg:empty {
  display: none;
}


/* ---------- Горе вдясно за гости; групи на началото; карти с два бутона ---------- */
.top__guest {
  min-height: 42px;
  white-space: nowrap;
}
@media (min-width: 961px) {
  .side__guest {
    display: none;
  }
}
@media (max-width: 960px) {
  .top__guest {
    display: none;
  }
}
.pgroup {
  margin-top: 32px;
}
.pgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.pgroup .pgrid {
  margin-top: 0;
}
.pcard {
  position: relative;
}
.pcard__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.pcard__foot {
  position: relative;
  z-index: 2;
}
.pcard__btns {
  display: flex;
  gap: 8px;
}
.pcard__btns .btn {
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .pcard__foot {
    flex-wrap: wrap;
  }
  .pcard__btns {
    width: 100%;
  }
  .pcard__btns .btn {
    flex: 1;
  }
}


/* ---------- Инфо карта в групите на началото; горната лента да не се чупи ---------- */
.pinfo {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--line));
  border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--yellow) 10%, var(--panel)) 0%, var(--panel) 60%);
}
.pinfo__title {
  font: 800 1.375rem/1.1 var(--cond);
  letter-spacing: -0.025em;
}
.pinfo__text {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.pinfo__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}
.btn--max,
.top__right .btn {
  white-space: nowrap;
}
.top__nav {
  flex: 1;
  min-width: 0;
}
.top__right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.top__guest {
  min-height: 40px;
  padding: 0 14px;
}
@media (max-width: 1280px) {
  .top__link {
    padding: 8px 9px;
    font-size: 0.875rem;
  }
}

.pcard__foot {
  flex-wrap: wrap;
}
.pcard__btns {
  width: 100%;
  margin-top: 4px;
}
.pcard__btns .btn {
  flex: 1;
}


/* ---------- Героят на началото: пътят стъпка по стъпка ---------- */
.hero--map {
  display: block;
  padding: 0;
  background:
    linear-gradient(90deg, rgb(21 22 27 / 0.96) 0%, rgb(21 22 27 / 0.9) 38%, rgb(21 22 27 / 0.35) 62%, rgb(21 22 27 / 0.15) 100%),
    var(--map) right 40% / cover no-repeat #15161b;
}
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  min-height: 380px;
  padding: clamp(24px, 3.5vw, 44px);
}
.road {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0 clamp(18px, 2.5vw, 28px) clamp(18px, 2.5vw, 28px);
  list-style: none;
  counter-reset: none;
}
.road__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 16px;
  background: rgb(13 14 17 / 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.road__step::after {
  content: '';
  position: absolute;
  top: 30px;
  right: -14px;
  width: 14px;
  border-top: 2px dashed color-mix(in srgb, var(--yellow) 60%, transparent);
}
.road__step:last-child::after {
  display: none;
}
.road__n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--yellow);
  color: #111;
  font-weight: 800;
}
.road__title {
  font: 800 1.0625rem/1.2 var(--cond);
  letter-spacing: -0.02em;
}
.road__text {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.875rem;
}
.road__link {
  margin-top: auto;
  color: var(--yellow);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}
.road__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .road {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .road__step::after {
    display: none;
  }
}
@media (max-width: 900px) {
  .hero--map {
    background:
      linear-gradient(180deg, rgb(21 22 27 / 0.96) 0%, rgb(21 22 27 / 0.9) 55%, rgb(21 22 27 / 0.6) 100%),
      var(--map) center 20% / cover no-repeat #15161b;
  }
  .hero__top {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
}
@media (max-width: 640px) {
  .road {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 14px 14px;
  }
  .hero--map .hero__top {
    padding: 22px 18px;
  }
}


/* ---------- Лента за бранда над постовете ---------- */
.brandbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 18px;
}
.brandbar__pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.brandbar__pick select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: 600 1rem var(--sans);
}

/* Четири карти в „Планове“ (Безплатно, Lite, Pro, Max) на един ред */
.plancards {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}


/* ---------- Горна лента: вход като текст ---------- */
.top__login {
  padding: 0 10px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.top__login:hover {
  color: var(--text);
}

/* ---------- Движение с мярка: пътят се чертае, картите се накланят, бутоните отговарят ---------- */
@keyframes draw {
  from { width: 0; }
  to { width: 14px; }
}
.road__step {
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.14s);
}
.road__step:nth-child(1) { --i: 0; }
.road__step:nth-child(2) { --i: 1; }
.road__step:nth-child(3) { --i: 2; }
.road__step:nth-child(4) { --i: 3; }
.road__step::after {
  animation: draw 0.35s ease-out both;
  animation-delay: calc(0.75s + var(--i, 0) * 0.14s);
}
.road__n {
  transition: transform 0.2s, box-shadow 0.2s;
}
.road__step:hover .road__n {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 22%, transparent);
}
.hero--map {
  background-position: calc(100% + var(--px, 0px)) calc(40% + var(--py, 0px)), 0 0;
  transition: background-position 0.25s ease-out;
}
.btn {
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn--primary:hover,
.btn--max:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--yellow) 80%, transparent);
}
.btn:active {
  transform: translateY(0);
}
.pcard__img {
  transition: transform 0.2s ease-out;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}
.gtile img {
  transition: transform 0.3s ease;
}
.gtile:hover img {
  transform: scale(1.04);
}
.top__link {
  position: relative;
}
.top__link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.top__link:hover::after,
.top__link.is-on::after {
  transform: scaleX(1);
}
.top__link.is-on {
  background: none;
}
.planove[open] .plancard {
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.planove[open] .plancard:nth-child(2) { animation-delay: 0.07s; }
.planove[open] .plancard:nth-child(3) { animation-delay: 0.14s; }
.planove[open] .plancard:nth-child(4) { animation-delay: 0.21s; }
.side__item {
  transition: background-color 0.15s, color 0.15s, padding-left 0.15s;
}
.side__item:hover {
  padding-left: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .road__step, .road__step::after, .planove[open] .plancard { animation: none; }
  .pcard__img, .hero--map, .btn, .gtile img, .side__item { transition: none; transform: none; }
}

.planove__try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 16px;
  text-align: center;
}
.teaser__cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


/* ---------- Футър: powered by ScaleX; начало: кой стои зад и ЧЗВ ---------- */
.foot__by {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.foot__scalex {
  color: var(--text);
  font: 800 1.125rem/1 var(--cond);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 32px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
}
.about p {
  margin-top: 10px;
  max-width: 60ch;
  color: var(--muted);
}
.about p a {
  color: var(--text);
}
.about__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.faq {
  margin-top: 32px;
}
.faq details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  color: var(--yellow);
  font-weight: 800;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding: 0 0 16px;
  color: var(--muted);
  max-width: 70ch;
}
@media (max-width: 760px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ---------- Профил ---------- */
.pf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 85% 20%, color-mix(in srgb, var(--yellow) 18%, transparent) 0%, transparent 50%),
    linear-gradient(135deg, #1b1d24 0%, #15161b 100%);
}
.pf-head__title {
  margin-top: 8px;
  font: 800 clamp(2rem, 3.6vw, 3rem)/1 var(--cond);
  letter-spacing: -0.03em;
}
.pf-head__meta {
  margin-top: 10px;
  color: var(--muted);
}
.pf-head__meta a {
  color: var(--text);
}
.pf-quota {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.qtile {
  min-width: 128px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.qtile strong {
  display: block;
  font: 800 1.75rem/1 var(--cond);
  letter-spacing: -0.02em;
}
.qtile--on strong {
  color: var(--yellow);
}
.qtile span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.pf-sec {
  margin-top: clamp(28px, 4vw, 40px);
}
.pf-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}
.pf-sec__head .block__title {
  margin-bottom: 0;
}
.pf-sec__head p {
  color: var(--muted);
}
.pf-sec .pgrid {
  margin-top: 16px;
}
.pf-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.pf-panel {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.pf-panel h3 {
  font: 800 1.125rem/1.1 var(--cond);
}
.pf-list {
  margin-top: 6px;
}
.pf-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.pf-item:first-child {
  border-top: 0;
}
.pf-item__name {
  font-weight: 700;
}
.pf-item__name a {
  color: var(--text);
  text-decoration: none;
}
.pf-item__name a:hover {
  text-decoration: underline;
}
.pf-item__meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.875rem;
}
.pf-empty {
  margin-top: 10px;
  color: var(--muted);
}
.pf-empty .btn {
  margin-top: 12px;
}
.pf-note {
  margin-top: 12px;
  font-size: 0.9375rem;
}
@media (max-width: 900px) {
  .pf-head,
  .pf-two {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .pf-head {
    padding: 20px 18px;
    border-radius: 18px;
  }
  .qtile {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
  .pf-panel {
    padding: 18px;
  }
}