/* ============================================================
   Песента (pesenta.bg) — основен стил
   Палитра: нощно индиго + залезен градиент (розово→оранжево)
   Шрифтове: Unbounded (заглавия), Manrope (текст)
   ============================================================ */

:root {
  --bg: #0b0a1a;
  --bg-soft: #14132b;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --text: #f4f2ff;
  --muted: #a9a4c9;
  /* Два акцента, един градиент. Виолетовото и цианът бяха махнати —
     съществуваха само за да редуват цвета на номерата в „Как работи“,
     тоест разширяваха палитрата без да носят смисъл. */
  --pink: #ff4d8d;
  --orange: #ffa14d;
  --grad: linear-gradient(100deg, var(--pink), var(--orange));
  /* Мастило за текст ВЪРХУ градиента — тъмно, защото розовото и
     оранжевото са светли. Беше hardcode-нато на 4 места. */
  --ink: #16091c;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* --- Типографска скала (беше 28 ad-hoc стойности) ---------------
     Всяка стъпка е видимо различна от съседната. Разлики под 1px
     (0.92 / 0.93 / 0.95rem) не носят йерархия — само шум. */
  --fs-xs: 0.75rem;   /* 12px — чипове, badge-ове, времена */
  --fs-sm: 0.875rem;  /* 14px — hint текст, мета, дребен UI */
  --fs-md: 0.9375rem; /* 15px — вторичен текст в карти */
  --fs-base: 1rem;      /* 16px — бутони, полета, нав */
  --fs-lg: 1.0625rem; /* 17px — основен текст (= body) */
  --fs-xl: 1.25rem;   /* 20px — h3, lead абзац */
  --fs-2xl: 1.5rem;    /* 24px — по-малки заглавия */
  --fs-3xl: 2rem;      /* 32px — цена, акценти */
  /* h1/h2 остават fluid clamp() — те се скалират с екрана */

  /* --- Ритъм на разстоянията, стъпка 4px (беше 29 стойности) ----- */
  --sp-1: 0.25rem;  /*  4px */
  --sp-2: 0.5rem;   /*  8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.25rem;  /* 20px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-8: 2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-24: 6rem;     /* 96px — вертикален отстъп между секции */

  /* --- Движение (беше 12 различни стойности, всички с дефолтен ease)
     Един easing за целия сайт = разпознаваем ритъм. Тази крива има
     бърз старт и мек край — усеща се по-премиум от линейния ease. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Появяването има СВОЯ крива, и това е нарочно изключение от „един easing".
     --ease изминава половината движение в първите 79ms — при hover това е
     точно каквото искаш (усеща се отзивчиво), но при появяване на секция се
     усеща като изстрелване. Тази (easeOutCubic) стига 50% на 124ms и 90% на
     324ms — същият мек край, по-спокойно начало.
     Измерено, не на око: виж бележката в main.js за темпото. */
  --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 160ms;  /* hover, микро-обратна връзка */
  --dur-base: 240ms;  /* смяна на състояние */
  --dur-slow: 600ms;  /* появяване на елемент — 400ms се усещаше рязко (Мирослав, 25.07) */
  /* Fallback-ите с изравнени метрики стоят преди системните шрифтове —
     виж бележката в fonts.css (предотвратяват CLS при смяна на шрифта) */
  --font-display: "Unbounded", "Unbounded-fallback", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Manrope-fallback", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Хедърът е sticky на top:0 и покрива горните ~77px. Без този отстъп
     всичко, до което браузърът скролира сам — котвите от навигацията и
     .focus() върху поле — заставаше ПОД него. При бързата поръчка от
     текстовото поле оставаше видима ивица от 34px. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  /* Един дискретен акцент вместо три наслоени цветни петна (виолетово 22%
     + розово 14% + оранжево 10%). Трите blob-а бяха най-разпознаваемата
     „AI-сайт“ сигнатура; сега светлината пада само там, където е hero-то. */
  background:
    radial-gradient(1200px 820px at 78% -12%, rgba(255, 77, 141, 0.07), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ============================================================
   Фокус при клавиатура
   ------------------------------------------------------------
   Сайтът има 49 фокусируеми елемента (вкл. 8-те реда с песни, които
   са role="button" tabindex="0"), а досега нямаше НИТО ЕДНО правило
   за фокус — оставаше само стандартният пръстен на браузъра.
   Цветът е var(--text), а не var(--pink), и това е решено с числа:
   пръстенът стои извън елемента, тоест върху фона, където розовото
   дава контраст 6.25 — но до розов бутон розов пръстен дава 1.00,
   тоест изчезва. Светлото дава 17.71 върху фона и се отделя ясно от
   акцентните бутони. Понеже е токен, при обръщане на палитрата към
   светъл фон пръстенът се обръща с нея.
   :focus-visible, не :focus — с мишка не се показва нищо.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  /* пръстенът следва формата на елемента (кръгли бутони, заоблени редове) */
  border-radius: inherit;
}
/* Safari/по-стари: гаси пръстена при мишка, ако :focus-visible не се поддържа */
:focus:not(:focus-visible) { outline: none; }

/* Прескачане на навигацията — 7 елемента стоят пред съдържанието.
   Видим е само когато е фокусиран. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-md);
  transition: top var(--dur-fast) var(--ease);
}
/* :focus, не :focus-visible — до skip link се стига единствено с Tab,
   така че разграничението е излишно, а :focus е по-съвместимо. */
.skip-link:focus { top: 0; }

.container { width: min(1120px, 92vw); margin: 0 auto; }

/* ---------- Типография ---------- */

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; }

h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 600; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------
   Номер на секция — контурна цифра до kicker-а
   ------------------------------------------------------------
   Дава редакторски гръбнак: окото вижда докъде е стигнало, без да
   чете. Кухa е нарочно — плътна цифра в този размер щеше да се бие
   с h2 за внимание, а тя е ориентир, не заглавие.

   Номерирани са само седемте „глави" (демо → въпроси). Хероят и
   финалният призив нямат номер — те рамкират арката, не са част
   от нея.

   aria-hidden в HTML-а: „01" преди „Чуй сам" е шум за екранен
   четец. Номерът е визуален ориентир, не съдържание.
   ------------------------------------------------------------ */
.section-eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.sec-no {
  font-family: var(--font-display);
  /* Мерено, не на око: h2 е clamp(1.5rem, 3vw, 2.2rem). Първата версия беше
     clamp(1.6rem, 3.2vw, 2.3rem) — 36.8px срещу 35.2px на десктоп и 25.6
     срещу 24 на телефон, тоест 1.07x. Ориентирът беше по-едър от заглавието,
     което трябва да води. Тази стойност дава 0.90-0.91x в целия диапазон. */
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  flex: none;
  /* Контурът е розов на 55% — същият акцент като --pink, но снижен,
     за да не спори с оранжевия kicker до него. */
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 77, 141, 0.55);
  paint-order: stroke fill;
}

/* Един и същ контур изглежда по-дебел върху по-малка буква — на телефон
   1.4px върху 21.6px глиф затлачва броенето. */
@media (max-width: 640px) {
  .sec-no { -webkit-text-stroke-width: 1.1px; }
}

/* Без text-stroke цифрата би била невидима (color: transparent).
   Firefox я поддържа от 49, но пада тихо — затова резервният вариант. */
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)) {
  .sec-no { color: rgba(255, 77, 141, 0.55); }
}

/* В режим на висок контраст Windows изхвърля собствените цветове —
   прозрачният текст изчезва напълно. Връщаме го като плътен. */
@media (forced-colors: active) {
  .sec-no { color: CanvasText; -webkit-text-stroke: 0; }
}

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

.section { padding: var(--sp-24) 0; }

.section-head { max-width: 640px; margin-bottom: var(--sp-12); }
.section-head p { color: var(--muted); font-size: var(--fs-lg); }

/* ---------- Бутони ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

/* Градиентът е двойно по-широк от бутона и при посочване се плъзга —
   светлината минава през него, вместо да стои. Без анимационен цикъл:
   движи се само докато мишката е отгоре, тоест не яде кадри в покой.
   Сянката е по-плътна и по-близо до бутона; предишната беше 30px разлята
   и се четеше като размазано петно, а не като повдигнат предмет. */
.btn-primary {
  background: linear-gradient(100deg, var(--pink), var(--orange), var(--pink));
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: var(--ink);
  box-shadow: 0 6px 18px -4px rgba(255, 77, 141, 0.45);
  transition: background-position var(--dur-slow) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .btn-primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -6px rgba(255, 77, 141, 0.6);
  }
}
/* Натискането трябва да се усеща. Досега бутонът не реагираше на клик —
   само на посочване, което на телефон значи никаква обратна връзка. */
.btn-ghost:active { transform: translateY(0) scale(0.98); }

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 3px 10px -2px rgba(255, 77, 141, 0.5);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
@media (hover: hover) {
  /* Вторичният бутон получава очертание в цвета на марката при посочване —
     дотук се различаваше само по нюанс сиво. */
  .btn-ghost:hover {
    background: var(--surface-strong);
    border-color: var(--pink);
    transform: translateY(-2px);
  }
}

.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-lg); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ============================================================
   Микрофонът в бутона + пулсиращ ореол
   ------------------------------------------------------------
   Пулсът не е декорация — казва „това говори, натисни и говори“.
   Затова спира при hover: поканата вече е приета и продължаването
   е само шум. Бавен е (2,4 s), защото бърз пулс се чете като
   нотификация, тоест тревога, а смисълът тук е „готов съм да те чуя“.
   Рингът е currentColor, тоест --ink върху розовия бутон — замерен
   контраст 6.15, вижда се ясно.
   ============================================================ */
.mic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
}
.mic svg { position: relative; z-index: 1; }

@keyframes mic-ring {
  0%   { transform: scale(0.7); opacity: 0.5; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.mic-pulse::before,
.mic-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: mic-ring 2.4s var(--ease-reveal) infinite;
}
/* вторият ринг тръгва на половин цикъл — усеща се като дишане, не като мигане */
.mic-pulse::after { animation-delay: 1.2s; }
@media (hover: hover) {
  .btn:hover .mic-pulse::before,
  .btn:hover .mic-pulse::after { animation-play-state: paused; opacity: 0; }
}

/* ---------- Хедър ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(11, 10, 26, 0.75);
  border-bottom: 1px solid var(--border);
}

.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}

.logo img { height: 38px; width: auto; }

.main-nav { display: flex; align-items: center; gap: var(--sp-6); }
/* :not(.btn) — CTA-то „Поръчай песен“ живее вътре в навигацията, но е бутон.
   Без изключението --muted гасеше тъмното мастило върху светлия градиент
   (замерен контраст 1.18:1 върху оранжевото — текстът се четеше едвам) и
   смъкваше размера му от 16px на 15px. Правилото важи за връзки, не за бутони. */
.main-nav a:not(.btn) { color: var(--muted); font-weight: 600; font-size: var(--fs-md); transition: color var(--dur-fast) var(--ease); }
@media (hover: hover) {
  .main-nav a:not(.btn):hover { color: var(--text); }
}
/* Двусловните етикети („Демо песни“, „Как работи“) се чупеха на два реда,
   щом мястото свърши — вдигаха хедъра вместо да пренесат менюто.
   Прагът е решен на 960px по-долу; това е предпазна мрежа, ако
   някой ден се добави още една връзка. */
.main-nav a { white-space: nowrap; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: var(--fs-2xl);
  line-height: 1;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
}

/* ---------- Херо ---------- */

.hero { padding: var(--sp-24) 0 var(--sp-16); }

/* Нисък лаптопски екран. 1366x768 дава около 640px видима височина, а
   hero-то харчи 96px само за падинг отгоре и още 188px за заглавие от
   54px — бутонът за поръчка завършва на 637px, тоест на три пиксела от
   сгъвката. Три пиксела не са запас; при малко по-висока лента на
   браузъра поръчката пада под екрана.
   Мерено: това е така и БЕЗ цената в заглавието — не я е причинила тя,
   просто не бяхме мерили на нисък екран.
   Тук се свива само вертикалният ритъм. Нищо не се крие и текстът остава
   същият — само спира да бъде разреден като на 27-инчов монитор. */
@media (min-width: 861px) and (max-height: 760px) {
  .hero { padding: var(--sp-10) 0 var(--sp-8); }
  .hero h1 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); margin-bottom: var(--sp-4); }
  .hero .lead { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
  .hero-grid { gap: var(--sp-8); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-12);
  align-items: center;
}

.hero p.lead { font-size: var(--fs-xl); color: var(--muted); max-width: 34rem; }

/* Кадърът за телефон и този за десктоп никога не се показват заедно —
   единият винаги е скрит, така че вторият изобщо не се тегли. Границата е
   768px, както е поискано; hero-photo пада на 860px по своя причина
   (квадратното видео заемаше цялата височина на таблет). */
.hero-photo-mobile { display: none; }
.hero-photo-mobile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
@media (max-width: 768px) {
  .hero-photo-mobile { display: block; margin-top: var(--sp-8); }
}

/* Свива се, щом клиентът тръгне да поръчва (text-order.js мери реалната
   височина и слага max-height в inline стил, преди да добави класа —
   виж бележката за forced reflow там, същият проблем като track-hide). */
#hero-intro {
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), margin-bottom var(--dur-slow) var(--ease);
}
#hero-intro.collapsed { max-height: 0 !important; opacity: 0; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  #hero-intro { transition: none; }
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-8) 0 var(--sp-8); }

.hero-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.badge svg { flex: none; }

/* ---------- Демо песни ---------- */

.player { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }

.play-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--grad);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .play-btn:hover { transform: scale(1.07); }
}
.play-btn svg { width: 18px; height: 18px; }

.progress {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--grad);
  border-radius: 3px;
}

.time { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

/* ---------- Как работи ---------- */

.steps-grid {
  display: grid;
  /* 3 стъпки от 26.07.2026 — плащането влезе в първата стъпка и
     „Слушаш и одобряваш“ отпадна (няма демо преди плащане) */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.step-card {
  position: relative;
  padding: var(--sp-6) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.step-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: var(--sp-4);
}

/* Номерът беше квадратче с градиент. Откакто всяка стъпка има градиентна
   икона, двата елемента се биеха — затова тук номерът е тих маркер в ъгъла,
   а иконата носи цвета. */
.step-num {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.step-card p { color: var(--muted); font-size: var(--fs-md); margin: 0; }

/* ---------- Стилове (жанрове) ---------- */

.styles-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-width: 900px; }

.style-chip {
  padding: var(--sp-3) var(--sp-4);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--muted);
  transition: transform, border-color, background, color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .style-chip:hover { color: var(--text); border-color: var(--pink); transform: translateY(-2px); }
}

/* ---------- Поводи (грид карти) ---------- */

/* Поводите също са лента, а не решетка: осем карти на четири колони правеха
   страницата дълга колкото две екранни височини само за този раздел.
   Картата се стеснява от четвърт екран до 250 пиксела — снимката остава
   3:2, просто по-малка. */
.povodi-track {
  display: flex;
  width: max-content;
  padding: var(--sp-2) 0 var(--sp-4);
}
.povodi-track .occasion-card { flex: 0 0 250px; margin-right: var(--sp-6); }

.occasion-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Снимката се уголемява при посочване; без това излиза извън заобления ъгъл. */
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* Амбилайт, същият като при песните: светлината идва от самата снимка.
   Тоновете са ИЗМЕРЕНИ от картинките — най-наситеният чест цвят в кадъра,
   пробван върху 64×43 пиксела — после изсветлени до еднаква сила, защото
   суровите проби на годишнината и юбилея бяха толкова тъмни (#6e2b35,
   #ad510e), че не биха светнали върху тъмния фон.
   Всичките осем излизат топли, между 351 и 39 градуса: снимките наистина
   споделят една гама. Това е свойство на кадрите, не на кода — затова не съм
   раздал изкуствено различни цветове, които биха противоречали на снимката
   под тях. */
.occasion-card { --glow: var(--pink); }
.occasion-card:has([src*="povod-rojden-den"])  { --glow: #EA6C53; }
.occasion-card:has([src*="povod-svatba"])      { --glow: #EA5358; }
.occasion-card:has([src*="povod-ergensko"])    { --glow: #EA8F53; }
.occasion-card:has([src*="povod-godishnina"])  { --glow: #EA5369; }
.occasion-card:has([src*="povod-bebe"])        { --glow: #EA5A53; }
.occasion-card:has([src*="povod-jubilej"])     { --glow: #EA9253; }
.occasion-card:has([src*="povod-firmeno"])     { --glow: #EA5353; }
.occasion-card:has([src*="povod-shega"])       { --glow: #EAB553; }

.occasion-photo { transition: transform var(--dur-base) var(--ease); }

@media (hover: hover) {
  .occasion-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--glow) 55%, transparent);
    box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--glow) 50%, transparent);
  }
  .occasion-card:hover .occasion-photo { transform: scale(1.04); }
}

/* ---------- Кинематичен вход (scrub) ---------- */

/* Височината дава пътя за скрола: 300vh скрол = 8 секунди видео.
   Самата картина е sticky вътре, затова секцията изглежда като един екран,
   докато под нея се навива дължина. */
.scrub { height: 300vh; margin: 0; padding: 0; }

.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадърът се сменя със seek, не с възпроизвеждане — браузърът няма да го
     композира на отделен слой сам, затова му го казваме. Без това всяко
     превъртане прерисува цялата страница. */
  will-change: transform;
}

/* Тъмнината под текста. Отделен слой, а не сянка на буквите: сянката се
   разпада върху светлите петна от лампите, градиентът — не. */
.scrub-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,10,26,0.72) 0%, rgba(11,10,26,0.15) 38%,
                    rgba(11,10,26,0.15) 62%, rgba(11,10,26,0.86) 100%);
  pointer-events: none;
}

/* Локален ореол зад текста. Мереният фон под буквите стигаше 1,26:1 срещу
   цвета на текста — почти бяло върху бяло върху неона и златните частици.
   Общият scrim беше 0,72 отгоре и 0,86 отдолу, но само 0,15 по средата,
   тоест точно там, където седи текстът. Пълното затъмняване на средата щеше
   да скрие видеото, затова тъмнината е тук, около буквите, и изчезва встрани.
   0,72 е измерено, не избрано: при него най-лошата точка дава 6,8:1, а под
   0,62 се появяват пиксели под AA (при 0,15 бяха 17,8%). */
.scrub-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 190%;
  height: 340%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(11, 10, 26, 0.80) 0%,
    rgba(11, 10, 26, 0.72) 55%,
    rgba(11, 10, 26, 0.30) 80%,
    rgba(11, 10, 26, 0) 100%);
}

.scrub-band {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 88vw);
  text-align: center;
  opacity: 0;
  /* Не се анимира с transition: JS-ът задава opacity всеки кадър и преходът
     само би изостанал след скрола. */
  pointer-events: none;
}
.scrub-band.is-live { pointer-events: auto; }

.scrub-band p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.15;
  /* Втори пласт под ореола: хваща отделните ярки частици, които минават
     плътно зад буквите. Сянка, не backdrop-filter — филтърът щеше да се
     преизчислява на всеки кадър, докато видеото се превърта. */
  text-shadow: 0 2px 18px rgba(11, 10, 26, 0.9);
  margin: 0;
  text-wrap: balance;
}
.scrub-band .btn { margin-top: var(--sp-6); }

.scrub-hint {
  position: absolute;
  left: 50%;
  bottom: var(--sp-8);
  transform: translateX(-50%);
  color: var(--muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: scrub-hint 2.4s var(--ease) infinite;
}
@keyframes scrub-hint {
  0%, 100% { opacity: 0.35; transform: translate(-50%, 0); }
  50%      { opacity: 0.9;  transform: translate(-50%, 6px); }
}

/* Долният ръб се слива с фона на страницата, за да няма шев към hero-то. */
.scrub-sticky::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18vh;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* Под 768px секцията не съществува. JS-ът също не пипа видеото там —
   правилото тук е втората брава, ако скриптът се счупи. */
@media (max-width: 767px) {
  .scrub { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub { display: none !important; }
}

/* ---------- Днес празнуват ---------- */

/* ---------- Ленти: общото поведение на трите върволици ----------
   Рождениците, отзивите и поводите се държат еднакво — пълзят сами и се
   влачат на ръка. Механизмът им е един и живее в lenta.js.

   Лентата е ИСТИНСКИ хоризонтален скрол, а не CSS анимация върху transform.
   С transform пръстът и анимацията се бият за едно и също свойство и човек
   няма как да отмести картите. Като скрол влаченето с пръст го върши самият
   браузър — заедно с инерцията — а автоматичното пълзене е scrollLeft, който
   добавяме всеки кадър.

   БЕЗ gap в редиците: при два комплекта карти разстоянията са с едно
   по-малко от картите, тоест половината от лентата не е равна на комплект и
   шевът се вижда при завъртането. Всяка карта носи своя отстъп през
   margin-right и половината съвпада до пиксел. Процент във flex-basis пък
   обърква width: max-content — контейнерът се мери по неувития текст. */
.lenta-rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  /* Без това дърпането наляво на телефон връща предишната страница. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lenta-rail::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lenta-rail { cursor: grab; }
  .lenta-rail.vlacha { cursor: grabbing; }
}
/* Докато влачим с мишка, текстът не бива да се маркира — иначе вместо да
   местиш картите, ги избираш. */
.lenta-rail.vlacha, .lenta-rail.vlacha * { user-select: none; }

/* Картите избледняват към двата ръба, вместо да се отрязват рязко. */
.rojdendni-rail,
.quotes-rail,
.povodi-rail {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.rojdendni-track {
  display: flex;
  width: max-content;
  padding: var(--sp-2) 0;
}
.rojdendni-track .rojden-card { flex: 0 0 210px; margin-right: var(--sp-4); }

/* Картата е <a>, не <article> — цялата води към поръчка с предизбран повод.
   Затова текстът наследява цвета си вместо да стане син подчертан линк. */
.rojden-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .rojden-card:hover { transform: translateY(-3px); border-color: var(--pink); }
}
.rojden-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin: var(--sp-3) 0 var(--sp-1);
}
.rojden-meta { color: var(--muted); font-size: var(--fs-md); margin: 0; }

.rojden-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* Знаците са SVG с еднакъв viewBox, значи и двата заемат една и съща кутия
   независимо какво рисуват — знамето е правоъгълник, планетата е кръг,
   но редът не подскача между картите. */
.rojden-znak {
  display: block;
  width: 26px;
  height: 18px;
  flex: none;
}

/* Възрастта е числото, заради което човек спира да чете — затова е едра и
   в шрифта на заглавията, а не поредна дребна подробност. */
.rojden-age {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rojden-age::after {
  content: "г.";
  font-family: var(--font-body);
  font-size: 0.45em;
  font-weight: 600;
  color: var(--muted);
  margin-left: 2px;
  -webkit-text-fill-color: var(--muted);
}

.rojdendni-more { margin: var(--sp-6) 0 0; }

/* Бутон, който изглежда като връзка: разгъването е действие, не навигация,
   затова е <button> — иначе клавиатурата и екранните четци го четат грешно. */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--orange);
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { color: var(--pink); }

/* display: grid бие атрибута hidden — той е само user-agent правило и всяко
   авторско display го отменя. Без този ред разгънатият списък заема 1195px
   невидимо място под лентата. Същият капан е описан по-горе за .track-row. */
.rojdendni-all[hidden] { display: none; }

.rojdendni-all {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.rojdendni-cta {
  margin-top: var(--sp-10);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(255, 77, 141, 0.16), rgba(255, 161, 77, 0.16));
}
.rojdendni-cta p {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}

@media (max-width: 980px) {
  .rojdendni-all { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* Една на ред, не хоризонтален скрол: картите са само текст и на телефон
     четенето надолу е по-естествено от бутането настрани. */
  .rojdendni-all { grid-template-columns: 1fr; }
}

.occasion-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--grad);
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.occasion-icon svg { width: 22px; height: 22px; }

/* Илюстрация в картата: 3:2, изрязана в центъра, за да са еднакви въпреки
   различните оригинали. Отрицателните полета я долепят до ръба на картата —
   иначе плуваше в padding-а ѝ. */
.occasion-photo {
  display: block;
  width: calc(100% + var(--sp-6) * 2);
  /* Глобалното `img { max-width: 100% }` (ред 101) реже calc-а обратно до
     ширината на съдържанието и снимката оставаше 48px по-тясна от картата.
     Тук нарочно се вдига — това е единственото изображение, което ТРЯБВА
     да излезе извън padding-а на родителя си. */
  max-width: none;
  /* height: auto е задължително — без него атрибутът height="400" от HTML
     остава като твърда височина и aspect-ratio не влиза в сила. Атрибутите
     си стоят, защото пазят мястото, преди изображението да се зареди. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-soft);   /* докато се зареди — вместо празно място */
}

.occasion-card h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.occasion-card p { color: var(--muted); font-size: var(--fs-md); margin: 0; }

/* ---------- Цени ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}

.price-card.featured {
  background: linear-gradient(160deg, rgba(255, 77, 141, 0.12), rgba(255, 161, 77, 0.07)), var(--surface);
  border-color: rgba(255, 77, 141, 0.45);
  box-shadow: var(--shadow);
}

.price-line { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-1); }
.price-line .amount { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800; }
.price-line .curr { color: var(--muted); font-size: var(--fs-md); }
/* Беше .price-bgn — левовата равностойност отпадна на 08.08.2026, когато
   изтече периодът на двойното обозначаване. */
.price-note { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* Отзив над цената. Стои преди картата, защото истинските коментари са в
   секция 07 — след искането за 19,90 €. Който се колебае за цената, не
   стига дотам. Текстът е дословно същият, не нов. */
/* Числото стои над цената, не в hero-то: там на лаптоп 1366x640 всеки
   нов ред връща бутона под сгъвката (мерено). Тук е точно преди
   искането за пари, заедно с отзива — двете правят едно доказателство. */
.proof-count {
  max-width: 34rem;
  margin: 0 auto var(--sp-3);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-md);
}
.proof-count strong {
  font-family: var(--font-display);
  font-size: 1.35em;
  font-weight: 800;
  color: var(--text);
}

.price-quote {
  max-width: 34rem;
  margin: 0 auto var(--sp-6);
  text-align: center;
}
.price-quote blockquote {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--text);
}
.price-quote figcaption { font-size: var(--fs-sm); color: var(--muted); }

/* Гаранцията под бутона — там, където колебанието е най-силно. Зелено,
   защото е обещание, не бележка под линия. */
.price-guarantee {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #6ee7a8;
  text-align: center;
}

.price-card ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; flex: 1; }
.price-card li {
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  position: relative;
  color: var(--muted);
  font-size: var(--fs-md);
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--grad) padding-box;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.5 12.2 2.8 8.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z"/></svg>') center / contain no-repeat;
}

.pricing-note {
  margin-top: var(--sp-8);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-md);
}
.pricing-note strong { color: var(--text); }

/* ---------- Отзиви ---------- */

/* Отзивите текат непрекъснато наляво.
   ------------------------------------------------------------------
   Движението е CSS анимация върху transform, не скролиране с JavaScript.
   Причината: transform се смята от графичния процесор и тече гладко, докато
   местене на scrollLeft по кадри се накъсва — а тук движението е бавно и
   всяко накъсване си личи.

   Безкрайността идва от УДВОЯВАНЕ на картите (прави се в main.js).
   Анимацията измества лентата точно с −50%, тоест в момента на връщането
   на екрана стои същото като в началото и шевът не се вижда. */
.quotes-track {
  display: flex;
  padding: var(--sp-2) 0 var(--sp-4);
  width: max-content;
}

.quote-card {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* margin-right, а не gap — виж бележката при .quotes-track */
  margin: 0 var(--sp-6) 0 0;
}
.quote-card blockquote {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-base);
  flex: 1;
}
.quote-card p { margin: 0 0 var(--sp-4); font-size: var(--fs-base); }
.quote-card .who { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.quote-mark { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--pink); line-height: 1; }

/* Затварящата кавичка липсваше — цитатът се отваряше и не се затваряше.
   Прави се от CSS, не от нов таг в разметката: така не се пипат шестте
   отзива, а и марквеят клонира картите, тоест всяка промяна по тях се
   удвоява. Обръща се на 180°, защото шрифтът няма отделен затварящ знак. */
.quote-card blockquote::after {
  content: "“";
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 0.6;
  color: var(--pink);
  transform: rotate(180deg);
  transform-origin: center;
  width: 1em;
  margin-left: auto;
}

/* ---------- FAQ ---------- */

.faq-list { max-width: 760px; }

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-6);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--orange);
  transition: transform var(--dur-base) var(--ease);
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 var(--sp-6) var(--sp-4); color: var(--muted); font-size: var(--fs-md); }

/* ---------- CTA лента ---------- */

.cta-band {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(255, 77, 141, 0.16), rgba(255, 161, 77, 0.16));
  border: 1px solid var(--border);
}
.cta-band p { color: var(--muted); max-width: 34rem; margin: 0 auto var(--sp-6); }

/* Тъмният слой е част от background-image, не отделен елемент — така текстът
   остава четим без допълнителен ::before и без да се пипа подредбата вътре.
   0.62 е мерено, не на око: най-тъмната точка под абзаца дава 5,86:1 спрямо
   цвета на текста (WCAG AA иска 4,5:1). При 0,72 контрастът е 7,67:1, но
   снимката изчезва напълно и остава само текстура. */
.cta-band-photo {
  background-image:
    linear-gradient(rgba(11, 10, 26, 0.62), rgba(11, 10, 26, 0.62)),
    url("../img/podaruk-moment.jpg");
  background-size: cover;
  background-position: center;
}
.cta-band-photo p { color: #d7d3ea; }

/* ---------- Футър ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-12) 0 var(--sp-8);
  margin-top: var(--sp-10);
  color: var(--muted);
  font-size: var(--fs-md);
}

.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.footer-grid a { display: block; padding: var(--sp-1) 0; }
@media (hover: hover) {
  .footer-grid a:hover { color: var(--text); }
}
.footer-col h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: var(--sp-6); font-size: var(--fs-sm); }

/* ---------- Плаващ бутон за връзка (Viber/имейл) ----------
   Два отделни <a>, показва се само единият — избор чрез CSS media query по
   pointer/hover, без JS. bottom:96px, не 20px, защото на index.html точно
   на 20px седи .intro-pill (z-index:80) — на всички други страници просто
   се вижда малко над долния ръб, нормален вид. */
.float-contact {
  position: fixed;
  bottom: 96px;
  right: 20px;
  z-index: 85;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--ink);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(255, 77, 141, 0.4);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.float-contact svg { width: 26px; height: 26px; }
@media (hover: hover) {
  .float-contact:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(255, 77, 141, 0.5); }
}
@media (hover: none) and (pointer: coarse) { .float-contact--mobile { display: flex; } }
@media (hover: hover) and (pointer: fine) { .float-contact--desktop { display: flex; } }
@media (max-width: 640px) {
  .float-contact { bottom: 84px; width: 50px; height: 50px; }
  .float-contact svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .float-contact { transition: none; }
}

/* Икони към социалните мрежи — кръгли бутони, същият език като .play-btn */
/* Социалните копчета бяха сиви кръгове със сиви икони, които при посочване
   ставаха малко по-светло сиви — не се забелязваха. Сега иконата е в цвета
   на текста, а при посочване копчето се пълни с градиента на марката,
   вдига се и хвърля светлина. 44px, не 40 — това е и минималната цел за
   пръст по указанията на Apple. */
.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Градиентът е отделен слой, който изплува — така преходът е плавен.
   Пряката смяна на background не се анимира между градиенти. */
.footer-social a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.footer-social a svg { position: relative; z-index: 1; }
.footer-social svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .footer-social a:hover {
    color: var(--ink);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -6px rgba(255, 77, 141, 0.5);
  }
  .footer-social a:hover::before { opacity: 1; }
}

/* ============================================================
   Страница „Поръчай“ — wizard
   ============================================================ */

.order-wrap { max-width: 780px; margin: 0 auto; padding: var(--sp-16) 0 var(--sp-24); }

.order-head { text-align: center; margin-bottom: var(--sp-10); }
.order-head p { color: var(--muted); }

.wizard-progress {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.wizard-progress .seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--dur-base) var(--ease);
}
.wizard-progress .seg.active { background: var(--grad); }

.wizard-step { display: none; }
.wizard-step.current { display: block; animation: fadein 0.35s ease; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.step-title { margin-bottom: var(--sp-1); }
.step-sub { color: var(--muted); margin: 0 0 var(--sp-6); font-size: var(--fs-md); }

.field { margin-bottom: var(--sp-6); }
.field label { display: block; font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.field .hint { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); display: block; margin-top: 0.15rem; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
/* Полетата не получават пръстен — рамката им сменя цвета, което е по-ясно
   в контекста на формуляр. :focus-visible пръстенът е за всичко останало. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--pink);
}
.field input.invalid, .field textarea.invalid { border-color: #ff5b5b; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Гласова бърза поръчка */

.fast-voice {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 77, 141, 0.1), rgba(255, 161, 77, 0.08)), var(--surface);
  border: 1px solid rgba(255, 77, 141, 0.4);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-10);
}
.fast-voice-head h2 { margin-bottom: var(--sp-1); font-size: var(--fs-2xl); }
.fast-voice-head p { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--sp-6); }

.fast-or {
  text-align: center;
  margin-top: var(--sp-6);
  position: relative;
}
.fast-or::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--border);
}
.fast-or span {
  position: relative;
  padding: 0 var(--sp-4);
  background: #17142e;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Изход към писмената форма, ГОРЕ до гласовия бутон.
   Разделителят .fast-or стои между двете форми, но на телефон е на
   1720px от началото — замерено при 390px екран, гласовата секция е
   1306px висока. Тоест човек, дошъл от бутона „Поръчай“ на началната
   страница, вижда само гласовата и трябва да скролва 876px, за да
   разбере, че има и писмена. Затова указанието е и тук, отгоре.
   Дискретно е нарочно — не бива да се бори с гласовия бутон. */
.prefer-write {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.prefer-write a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .prefer-write a:hover { color: var(--text); }
}

/* Гласово съобщение */

.voice-box {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  padding: var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.voice-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.voice-btn { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-md); gap: var(--sp-2); }
/* В hero-а бутонът е едновременно .btn-lg и .voice-btn. .voice-btn стои
   по-долу във файла и при равна специфичност би смачкал едрия размер —
   затова го връщаме изрично. */
.btn-lg.voice-btn { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-lg); }
/* Записващото състояние е писано за призрачния бутон: тъмен фон, светло
   червено отгоре. Върху .btn-primary обаче същият цвят ляга светло върху
   светъл градиент и надписът изчезва — затова primary получава собствен
   вид: гаси градиента за тъмна червена повърхност. Така и състоянието се
   различава от поканата „Разкажи с глас“, вместо да я повтаря. */
.voice-btn.recording {
  border-color: #ff5b5b;
  color: #ff8080;
}
.btn-primary.voice-btn.recording {
  background: rgba(255, 91, 91, 0.16);
  color: #ffc2c2;
  box-shadow: none;
}
@media (hover: hover) {
  .btn-primary.voice-btn.recording:hover {
    background: rgba(255, 91, 91, 0.24);
    box-shadow: none;
  }
}
.voice-btn.recording svg { animation: voicepulse 1.2s ease-in-out infinite; }
@keyframes voicepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.voice-status { color: var(--muted); font-size: var(--fs-sm); flex: 1; min-width: 200px; }
.voice-status.err { color: #ff8080; }
.voice-status.rec { color: #ff8080; }
.voice-play { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .voice-btn.recording svg { animation: none; }
}

/* Разгъващи се допълнителни полета */

.more-fields {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: var(--sp-6);
}
.more-fields summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-4);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--orange);
}
.more-fields summary::-webkit-details-marker { display: none; }
.more-fields summary .hint { font-weight: 400; color: var(--muted); }
.more-fields[open] summary { border-bottom: 1px dashed var(--border); margin-bottom: var(--sp-4); }
.more-fields-body { padding: 0 var(--sp-4) var(--sp-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chip {
  padding: var(--sp-2) 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: transform, border-color, background, color var(--dur-fast) var(--ease);
  user-select: none;
}
@media (hover: hover) {
  .chip:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
}
.chip.selected {
  background: var(--grad);
  border-color: transparent;
  color: var(--ink);
  font-weight: 700;
}

.count-note { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-2); }

/* Пакети в wizard-а */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  margin-bottom: var(--sp-6);
}
.toggle-row label { font-weight: 700; cursor: pointer; }
.toggle-row .hint { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
.toggle-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--pink); cursor: pointer; }

.promo-row { display: flex; gap: var(--sp-3); }
.promo-row input { flex: 1; }
.promo-msg { font-size: var(--fs-md); margin-top: var(--sp-2); }
.promo-msg.ok { color: #4ade80; }
.promo-msg.err { color: #ff8080; }

.order-summary {
  margin-top: var(--sp-6);
  padding: var(--sp-6) var(--sp-6);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.order-summary .row { display: flex; justify-content: space-between; padding: var(--sp-1) 0; color: var(--muted); font-size: var(--fs-md); }
.order-summary .row.total { border-top: 1px solid var(--border); margin-top: var(--sp-2); padding-top: var(--sp-3); color: var(--text); font-weight: 800; font-size: var(--fs-xl); }
.order-summary .row.discount { color: #4ade80; }

.review-box {
  padding: var(--sp-6) var(--sp-6);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-md);
}
.review-box h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); margin-bottom: var(--sp-2); }
.review-box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); }
.review-box dt { color: var(--muted); }
.review-box dd { margin: 0; }

.wizard-nav { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); }

.consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-md); color: var(--muted); margin: var(--sp-4) 0; }
.consent input { margin-top: var(--sp-1); width: 18px; height: 18px; accent-color: var(--pink); flex: none; }

.form-error {
  display: none;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: rgba(255, 91, 91, 0.12);
  border: 1px solid rgba(255, 91, 91, 0.4);
  color: #ffb4b4;
  font-size: var(--fs-md);
  margin-top: var(--sp-4);
}
.form-error.show { display: block; }

/* Успех */

.success-box { text-align: center; padding: var(--sp-12) var(--sp-6); }
.success-box .check {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-6);
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
}
.success-box .order-no {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin: var(--sp-3) 0 var(--sp-6);
}
.success-box p { color: var(--muted); max-width: 30rem; margin-left: auto; margin-right: auto; }

/* Моите заявки */

.my-orders { margin-top: var(--sp-16); }
.my-orders h2 { font-size: var(--fs-2xl); }

.order-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
}
.order-item .no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }
.order-item .meta { color: var(--muted); }
.status-pill {
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(255, 161, 77, 0.15);
  color: var(--orange);
  border: 1px solid rgba(255, 161, 77, 0.35);
}

/* ---------- Музикален поздрав (плаваща лента) ---------- */

.intro-pill {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(20, 19, 43, 0.94);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadein 0.4s ease;
  max-width: calc(100vw - 40px);
}
.intro-pill.hide { opacity: 0; transition: opacity var(--dur-slow) var(--ease); }

/* Ползва се от .intro-eq (чертичките в плаващата лента на музикалния
   поздрав, създава се от main.js) — не е свързан с изтрития .eq-bar */
@keyframes eq {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

.intro-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; flex: none; }
.intro-eq i {
  width: 4px;
  border-radius: 2px;
  background: var(--grad);
  height: 60%;
  transform-origin: bottom;
  animation: eq 1.2s ease-in-out infinite;
}
.intro-eq i:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.intro-eq i:nth-child(3) { height: 75%; animation-delay: 0.4s; }

.intro-stop {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0.15rem var(--sp-1);
  flex: none;
}
@media (hover: hover) {
  .intro-stop:hover { color: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-eq i { animation: none; }
}

/* ---------- Новини (блог) ---------- */

.news-wrap { max-width: 900px; margin: 0 auto; padding: var(--sp-16) 0 var(--sp-24); }

.news-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }

.news-card {
  display: block;
  padding: var(--sp-6) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
@media (hover: hover) {
  .news-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.25); }
}
.news-card h2 { font-size: var(--fs-xl); margin: var(--sp-1) 0 var(--sp-2); }
.news-card p { color: var(--muted); font-size: var(--fs-md); margin: 0; }
.news-date {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

.article { max-width: 780px; margin: 0 auto; padding: var(--sp-16) 0 var(--sp-24); }
.article h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 0.4em; }
.article h2 { font-size: var(--fs-2xl); margin-top: 2em; }
.article h3 { font-size: var(--fs-lg); margin-top: 1.6em; }
.article p, .article li { color: var(--muted); font-size: var(--fs-base); line-height: 1.75; }
.article strong { color: var(--text); }
.article .news-date { display: block; margin-bottom: var(--sp-4); }
.article .article-sources { border-top: 1px solid var(--border); margin-top: var(--sp-10); padding-top: var(--sp-4); font-size: var(--fs-md); }
.article .article-sources a { color: var(--orange); }
.article .article-cta {
  margin-top: var(--sp-10);
  padding: var(--sp-6) var(--sp-6);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(255, 77, 141, 0.14), rgba(255, 161, 77, 0.14));
  border: 1px solid var(--border);
}
.article .article-cta p { margin: 0 0 var(--sp-4); color: var(--text); }

/* ---------- Scroll reveal ---------- */

/* Появяване при скрол. Разстоянието беше 24px — толкова голям скок се чете
   като готов „fade-up“ плъгин. 8px е достатъчно да се усети движение, без
   съдържанието да подскача. Групите (песни, стъпки, отзиви) се появяват
   последователно — закъснението се задава от main.js, по 80ms на елемент.
   Кривата е --ease-reveal, не --ease: виж защо в :root. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-reveal), transform var(--dur-slow) var(--ease-reveal);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive — подредено от голям към малък екран
   ------------------------------------------------------------
   Всеки праг е тук по конкретна причина, не по кръгло число:
     960px — двуколонният hero и четириколонните решетки спират
             да дишат; минават на 1 / 2 колони. Тук навигацията
             става падащо меню: 6-те връзки + CTA-то искат 944px,
             за да стоят на един ред (замерено), а под това се
             пренасяха на два реда и вдигаха хедъра от 67 на 104px
     860px — hero видеото вече е твърде малко, за да носи смисъл;
             скрива се (и не се тегли — виж main.js)
     640px — класически телефон: решетките минават на една колона
     560px — тесен телефон: скриваме прогреса на плейъра
             и разпъваме бутоните по цялата ширина
   Прагът за пръст е отделен (pointer: coarse), защото зависи от
   входното устройство, не от ширината.
   ============================================================ */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* В една колона квадратното видео се разтягаше на цялата ширина —
     замерено 828x828 на таблет, тоест 92% от височината на екрана,
     което избутваше бутоните под сгъвката. Ограничаваме го. */
  .hero-photo { max-width: 420px; margin: 0 auto; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  /* На тесен екран картата е по-тясна, за да наднича следващата и да си
     личи, че лентата продължава. Стойността е в пиксели, не в проценти —
     процент тук чупи оразмеряването (виж бележката при .quotes-track). */
  .quote-card { flex-basis: 280px; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-4) 4vw var(--sp-6);
    background: #0b0a1a;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
}

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

@media (max-width: 640px) {
  .section { padding: var(--sp-16) 0; }
  .hero { padding: var(--sp-16) 0 var(--sp-12); }
  .steps-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .track-row .progress { display: none; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .pricing-grid.pricing-single { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* Пулсът спира, но формата остава — един неподвижен ореол вместо
     два движещи се, за да не изчезне указанието „това говори“. */
  .mic-pulse::before { animation: none; opacity: 0.3; transform: scale(1.35); }
  .mic-pulse::after { display: none; }
}

/* ---------- One-pager редизайн (21.07.2026) ---------- */
.hero-photo { border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.hero-photo img,
.hero-photo .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-sub { color: var(--muted); font-size: var(--fs-md); margin-top: var(--sp-4); }


/* gap махнат оттук — спацирането мина на margin-bottom на самите редове,
   защото flex gap не се събира, когато ред се скрие (виж .track-hide):
   разстоянието му преди/след оставаше и списъкът не се "затваряше". */
.tracks-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin: 0;
}
@media (max-width: 980px) { .tracks-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tracks-list { grid-template-columns: repeat(2, 1fr); } }
.track-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  cursor: pointer;
  max-height: 100px;
  overflow: hidden;
  /* opacity/max-height/margin/padding/border-width добавени — нужни за
     плавното свиване при филтъра по-долу (.track-hide), самата логика на
     плейъра си остава непроменена */
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), max-height var(--dur-base) var(--ease), margin-bottom var(--dur-base) var(--ease), padding-top var(--dur-base) var(--ease), padding-bottom var(--dur-base) var(--ease), border-width var(--dur-base) var(--ease);
}
/* Правилата за :hover и .playing на картата живеят по-надолу, в блока
   „Характер на картите“ — тук стояха старите, за списъчния ред, и се
   разминаваха с новите (розово срещу цвета на песента). */

/* ---------- Песните като решетка от корици ----------
   Разметката НЕ се пипа: плейърът търси .player[data-src] с .progress-fill
   и .time вътре и не се интересува от подредбата. Тук всичко е наслагване
   през grid — корицата, бутонът, прогресът и времето лягат в една и съща
   клетка, а заглавието — под нея. Затова същият CSS работи и на осемте
   страници за поводи, без да ги отваряме.
   Корицата беше 48px в списък с максимална ширина 760px — по-тясно от
   всяка друга секция на страницата. Оттам идваше усещането, че песните са
   странична бележка, вместо най-убедителното нещо на сайта. */
.track-row {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  align-items: initial;
  gap: 0;
  padding: 0;
  margin-bottom: 0;
  /* Беше 100px заради анимацията на филтъра. Картата е около 400px —
     старата стойност я режеше наполовина. */
  max-height: 520px;
}

.track-thumb {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
  object-fit: cover;
  display: block;
}

.track-row .play-btn {
  grid-area: 1 / 1;
  place-self: center;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(11, 10, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.track-row.playing .play-btn { background: var(--grad); border-color: transparent; }

/* Прогресът ляга на долния ръб на корицата — тънка линия, както при плейър */
.track-row .progress {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  width: 100%;
  height: 4px;
  border-radius: 0;
}

.track-row .time {
  grid-area: 1 / 1;
  place-self: start end;
  z-index: 2;
  margin: var(--sp-3);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  background: rgba(11, 10, 26, 0.6);
  font-size: var(--fs-xs);
  color: var(--text);
}

.track-info { grid-area: 2 / 1; padding: var(--sp-4) var(--sp-4) var(--sp-5); min-width: 0; }
.track-info h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); line-height: 1.3; }
/* Пряк наследник, не всеки span: 18+ живее ВЪТРЕ в <h3> и общото правило
   го правеше блок, тоест лентата се разпъваше в цялата ширина на картата.
   Специфичността му (0,1,1) биеше .age-chip (0,1,0) независимо от реда. */
.track-info > span { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Характер на картите ----------
   Всяка песен си има цвят още от старите SVG корици и новите илюстрации го
   пазят. Тук картата го поема, за да не е сивата рамка еднаква за всички.
   Цветът се чете от името на файла през :has() — така разметката остава
   недокосната и правилото важи и на осемте страници за поводи, където
   песните са в различен ред. */
.track-row { --glow: var(--pink); }
.track-row:has([src*="cover-vladi"])       { --glow: #4ADE80; }
.track-row:has([src*="cover-habibi"])      { --glow: #FF7A4D; }
.track-row:has([src*="cover-rosen-abi"])   { --glow: #E8563F; }
.track-row:has([src*="cover-rocco"])       { --glow: #38BDF8; }
.track-row:has([src*="cover-napipay"])     { --glow: #C084FC; }
.track-row:has([src*="cover-tutso"])       { --glow: #2DD4BF; }
.track-row:has([src*="cover-veche-nyama"]) { --glow: #7C90C0; }
.track-row:has([src*="cover-api"])         { --glow: #7C5CFF; }
/* Жълтото на торбата — най-честият наситен цвят в самата корица. */
.track-row:has([src*="cover-angel"])       { --glow: #F0A800; }

.track-thumb { transition: transform var(--dur-base) var(--ease); }

/* Прогресът в градиента на песента, не в общото розово */
.track-row .progress-fill { background: linear-gradient(90deg, var(--glow), var(--orange)); }

@media (hover: hover) {
  /* Бутонът стои тих, докато мишката не дойде — илюстрацията е рисувана,
     за да се гледа, не за да носи копче в средата си. */
  .track-row .play-btn { opacity: 0; transform: scale(0.82); }
  .track-row:hover .play-btn,
  .track-row:focus-within .play-btn,
  .track-row.playing .play-btn { opacity: 1; transform: scale(1); }

  .track-row:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--glow) 55%, transparent);
    box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--glow) 50%, transparent);
  }
  .track-row:hover .track-thumb { transform: scale(1.05); }
}

/* Свиреща карта: пръстен в цвета на песента и три подскачащи чертички
   в ъгъла. Така се вижда коя върви, без да се чете текст. */
.track-row.playing {
  border-color: var(--glow);
  background: color-mix(in srgb, var(--glow) 8%, transparent);
}
.track-row.playing::after {
  content: "";
  grid-area: 1 / 1;
  place-self: end start;
  z-index: 2;
  margin: var(--sp-3);
  width: 22px;
  height: 18px;
  background:
    linear-gradient(var(--glow), var(--glow)) 0    100% / 5px 60% no-repeat,
    linear-gradient(var(--glow), var(--glow)) 50%  100% / 5px 100% no-repeat,
    linear-gradient(var(--glow), var(--glow)) 100% 100% / 5px 40% no-repeat;
  animation: eq 900ms steps(1, end) infinite alternate;
}
@keyframes eq {
  0%   { background-size: 5px 60%, 5px 100%, 5px 40%; }
  33%  { background-size: 5px 100%, 5px 35%, 5px 80%; }
  66%  { background-size: 5px 30%, 5px 75%, 5px 100%; }
  100% { background-size: 5px 85%, 5px 45%, 5px 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .track-row:hover { transform: none; }
  .track-row:hover .track-thumb { transform: none; }
  .track-row.playing::after { animation: none; }
}
/* Само червени букви, без рамка: в решетката квадратчето изглеждаше като
   поле за въвеждане, а не като предупреждение. */
.age-chip {
  display: inline;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ff5d5d;
  margin-left: var(--sp-2);
  vertical-align: 1px;
}

/* Демо филтъра — таб „18+“ е нарочно по-тих от розово-оранжевия градиент
   на другите чипове, дори избран. Скриването на картите свива кутията им
   до нула (max-height/padding/margin/border), не само я избледнява — затова
   останалите видими карти реално се "вдигат" на мястото ѝ, вместо да чакат
   празна дупка. hidden атрибутът идва чак след прехода (виж main.js). */
#demo-filters { margin: 0 auto var(--sp-6); max-width: 760px; justify-content: center; }
.chip--muted { color: #ff8a8a; opacity: 0.65; }
.chip--muted.selected { background: rgba(255, 100, 100, 0.22); color: #ff8a8a; opacity: 1; }
.track-row.track-hide {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
/* Идва 240ms след .track-hide, чак когато прехода е свършил — не ползваме
   елемент.hidden, защото .track-row си има собствен display:flex, по-
   специфичен от [hidden] в user-agent таблицата на браузъра (hidden не
   го крие). display:none тук е авторско CSS правило, бие .track-row
   безусловно заради по-високата специфичност (две класи). */
.track-row.track-gone { display: none; }

a.style-chip { text-decoration: none; color: inherit; }
@media (hover: hover) {
  a.style-chip:hover { border-color: var(--pink); color: #fff; }
}

.pricing-single { grid-template-columns: minmax(0, 460px); justify-content: center; }

.article-hero { width: 100%; height: auto; border-radius: 16px; margin: var(--sp-4) 0 var(--sp-6); }

/* Текст на песен. <pre> заради строфите — всеки ред е ред, не поток от думи.
   Затова и се пренася с pre-wrap: без него дългите редове бутат страницата
   настрани на телефон. */
.pesen-tekst {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin: 0 0 var(--sp-6);
  overflow-x: auto;
}
.pesen-stil { color: var(--muted); font-size: var(--fs-md); }


/* Кредитът под снимката НЕ е декорация: CC лицензите изискват видимо
   посочване на автор, източник и лиценз. Затова стои на страницата, а не
   само в alt-а. Снимката отгоре губи долния си margin, за да са двойка.
   Селекторът е .article .photo-credit, а не само .photo-credit: правилото
   .article p е по-специфично и иначе връща основния размер на текста. */
.article-hero + .photo-credit { margin-top: calc(-1 * var(--sp-4)); }
.article .photo-credit { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-6); }
.article .photo-credit a { color: var(--muted); text-decoration: underline; }

/* ============================================================
   Touch устройства — истински 44px цели за пръст
   ------------------------------------------------------------
   Замерено на 375px: footer линковете бяха 33px, логото 38px,
   хамбургерът 42px — под минимума на Apple (44) и Material (48).
   Уголемяваме САМО при пръст (hover:none + pointer:coarse), за да
   не разредим същите елементи на десктоп, където мишката е точна.
   Това е разликата между „мобилно, което е проектирано“ и
   „десктоп, който е смачкан“.
   ============================================================ */
/* ============================================================
   Защо всеки :hover в този файл седи в @media (hover: hover)
   ------------------------------------------------------------
   На тъч устройство браузърът задържа :hover след тап — картата
   остава вдигната, чипът остава подчертан, докато не тапнеш другаде.
   Guard-ът гаси целия клас „залепнали състояния" наведнъж.

   Обвити са НА МЯСТО, не събрани в общ блок накрая: .chip:hover и
   .chip.selected са с еднаква специфичност (0,2,0), както и
   .track-row:hover и .track-row.playing. При еднаква специфичност
   решава редът — местене назад щеше да остави hover да бие
   „избран" и „свири".
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .footer-grid a,
  .main-nav a,
  .footer-bottom a,
  .article-sources a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Логото и хамбургерът са единични цели — центрираме без да чупим реда */
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-toggle { min-height: 44px; min-width: 44px; }
  /* Линковете вътре в изречение остават inline, но с по-голяма зона */
  .consent a, .faq-body a, .pricing-note a { padding: var(--sp-1) 0; }
}

/* founder story */
.founder-story {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.founder-photo { flex: none; }
.founder-photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.founder-text h3 { margin: 0 0 var(--sp-4); }
.founder-text p { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-lg); }
.founder-text .founder-accent {
  font-size: var(--fs-xl);
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.founder-text .founder-sign { margin: 0; color: var(--text); font-weight: 600; }

/* ---------- Снимки в „Зад кулисите“ ---------- */

.studio-pair,
.reactions-grid {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}
.studio-pair { grid-template-columns: repeat(2, 1fr); }
.reactions-grid { grid-template-columns: repeat(3, 1fr); margin: var(--sp-10) 0 0; }

.studio-pair img,
.reactions-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: transform var(--dur-base) var(--ease);
}
@media (hover: hover) {
  .studio-pair img:hover,
  .reactions-grid img:hover { transform: scale(1.02); }
}

@media (max-width: 720px) {
  /* На телефон трите реакции една под друга изяждат цял екран скрол, затова
     стават две в ред; студийните остават една под друга, за да се вижда
     детайлът в тъмното. */
  .studio-pair { grid-template-columns: 1fr; }
  .reactions-grid { grid-template-columns: repeat(2, 1fr); }
  .reactions-grid img:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .founder-story { flex-direction: column; align-items: center; text-align: center; }
}

/* email capture ---------------------------------------------------------
   Тънка лента преди финалния CTA. Ползва съществуващите .btn/.form-error;
   тук са само разположението и полето, защото досега нямаше форма извън
   .field обвивката. */
.email-capture-section { padding: 0 0 var(--sp-16); }

.email-capture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.email-capture h2 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-1); }
.email-capture p { color: var(--muted); font-size: var(--fs-md); margin: 0; }

.email-capture-form { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.email-capture-form input {
  min-width: 240px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
}
.email-capture-form input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Грешката и успехът заемат цялата ширина, за да не мачкат формата. */
.email-capture .form-error { flex-basis: 100%; margin: 0; }
.promo-done { flex-basis: 100%; }
.promo-done p { margin: 0; color: var(--orange); font-weight: 600; }
.promo-done .hint { color: var(--muted); font-weight: 400; margin-top: var(--sp-1); }
/* Кодът трябва да се чете и препише безпогрешно — затова моноширинен,
   уголемен и с разредка. Ползва се веднъж и на ръка. */
.promo-code {
  display: inline-block;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--fs-xl);
  letter-spacing: 0.08em;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  border: 1px dashed var(--pink);
  color: var(--text);
}

@media (max-width: 640px) {
  .email-capture { padding: var(--sp-6); }
  .email-capture-form { width: 100%; }
  .email-capture-form input,
  .email-capture-form .btn { width: 100%; }
}

/* ---------- Амбилайт: светлината идва от самото изображение ----------
   Същият ефект като при песните и поводите — повдигане, лек зум и сянка в
   цвета на кадъра. Тоновете са ИЗМЕРЕНИ: най-наситеният чест цвят в
   картинката, пробван върху 64 на 48 пиксела, после изсветлен до еднаква
   сила, защото суровите проби са твърде тъмни, за да светнат върху тъмен фон.

   Честно за резултата: всички проби на сайта излизат между 350 и 39 градуса.
   Целият фотографски набор е в една топла гама, тоест сиянието тук е ефект, а
   не код — различава се по сила, не по цвят. Стойностите пак са по кадър, за
   да следват снимката, ако някога я сменим. */

.step-card {
  --glow: var(--pink);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.step-card:has([src*="stapka-1"]) { --glow: #EA536C; }
.step-card:has([src*="stapka-2"]) { --glow: #EA6D53; }
.step-card:has([src*="stapka-3"]) { --glow: #EA6D53; }
.step-icon { transition: transform var(--dur-base) var(--ease); }

.studio-pair img, .reactions-grid img {
  --glow: var(--pink);
  /* Правилото по-горе дава преход само на transform. Понеже този блок е
     последен във файла, добавяме останалите две тук, вместо да го гоним. */
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.studio-pair img[src*="studio-1"]      { --glow: #EA5357; }
.studio-pair img[src*="studio-2"]      { --glow: #EA7553; }
.reactions-grid img[src*="reakciya-1"] { --glow: #EA7753; }
.reactions-grid img[src*="reakciya-2"] { --glow: #EA8653; }
.reactions-grid img[src*="reakciya-3"] { --glow: #EA7653; }

@media (hover: hover) {
  .step-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--glow) 55%, transparent);
    box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--glow) 50%, transparent);
  }
  .step-card:hover .step-icon { transform: scale(1.06); }

  .studio-pair img:hover, .reactions-grid img:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: color-mix(in srgb, var(--glow) 55%, transparent);
    box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--glow) 50%, transparent);
  }
}

/* ---------- Покойници в лентата с рождениците ----------
   Числото си остава: заглавието казва „Родени на 11 септември“, тоест то е
   възрастта, която човекът ЩЕШЕ да навърши днес. Смяната е в тона — розово-
   оранжевият градиент пада до тихо сребро — и в четирилъчевата звезда след
   него. Годините стоят в подсказката, за да не удължават реда.
   Звездата е SVG, а не знакът ✦ от шрифта: него го няма във всеки шрифт и
   рискът да излезе празно квадратче не си струва. */
.rojden-vazrast {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
}
.rojden-vazrast.pochinal .rojden-age {
  background: linear-gradient(100deg, #D3D7EA, #9AA0BD);
}
.rojden-zvezda {
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: 3px;
  fill: #9AA0BD;
}

/* Обяснението стои под лентата и се показва само когато в нея има покоен —
   иначе е ред, който обяснява нещо, което не се вижда на екрана. */
.rojden-legenda {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-3) 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.rojden-legenda .rojden-zvezda { margin-top: 0; }

/* ---------- Плейър: превъртане и копче ----------
   Лентата беше 4 пиксела и се криеше напълно под 560px — тоест на телефон
   превъртане просто нямаше. Мерена цел за пръст: поне 24 пиксела. Затова
   лентата е 10 пиксела видима, но кутията ѝ е 22 с прозрачно поле отгоре и
   отдолу: пръстът я хваща, без ивицата да яде от корицата.

   touch-action: none е задължително — иначе браузърът смята влаченето за
   скрол на страницата и отнема събитията по средата на движението. */
.track-row .progress {
  height: 22px;
  padding: 6px 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.track-row .progress::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  background: rgba(11, 10, 26, 0.55);
  backdrop-filter: blur(2px);
  border-radius: 0 0 14px 14px;
}
.track-row .progress-fill {
  inset: 6px 100% 6px 0;
  border-radius: 0;
  z-index: 1;
}
/* Топчето казва „това се тегли“. Без него дебелата лента изглежда просто
   като по-дебела линия, а не като нещо, което се хваща. */
.track-row .progress-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.track-row:hover .progress-fill::after,
.track-row.playing .progress-fill::after,
.track-row .progress:focus-visible .progress-fill::after,
.track-row .progress.scrubbing .progress-fill::after { opacity: 1; }
.track-row .progress.scrubbing .progress-fill::after { transform: translateY(-50%) scale(1.25); }
.track-row .progress:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Копчето беше плътен сив кръг върху илюстрацията. Сега е в цветовете на
   сайта, със заоблени ъгли вместо кръг, и с амбилайт сянка — същият похват
   като при песните на началната страница: сиянието идва в цвета на самото
   копче, не като черен похлупак под него.
   Знакът вътре е в цвета на фона (--ink), не бял: върху розово-оранжев
   градиент тъмният триъгълник се чете по-добре от светъл. */
.track-row .play-btn {
  width: 76px;
  height: 76px;
  border: none;
  border-radius: 24px;
  background: var(--grad);
  backdrop-filter: none;
  color: var(--ink);
  box-shadow:
    0 10px 34px -8px color-mix(in srgb, var(--pink) 70%, transparent),
    0 4px 14px -4px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.track-row .play-btn svg { width: 46%; height: 46%; }
.track-row.playing .play-btn { background: var(--grad); border-color: transparent; }
@media (hover: hover) {
  .track-row:hover .play-btn {
    transform: scale(1.06);
    box-shadow:
      0 14px 44px -8px color-mix(in srgb, var(--pink) 88%, transparent),
      0 4px 14px -4px rgba(0, 0, 0, 0.45);
  }
}

/* Под 560px лентата СЕ ПОКАЗВА. Скриването ѝ там беше точно обратното на
   нужното: телефонът е мястото, където превъртането е най-трудно. */
@media (max-width: 560px) {
  .track-row .progress { display: block; }
}

/* Единична песен на цяла страница: илюстрацията Е плейърът, затова картата
   заема цялата колона на статията, а не една клетка от решетка. Кадърът е
   широк (1200×638), не квадратен като корица — обратното би го отрязало. */
.tracks-list.pesen-solo {
  display: block;
  max-width: 780px;
  margin: var(--sp-8) auto var(--sp-6);
}
.pesen-solo .track-row { margin: 0; }
.pesen-solo .track-thumb { aspect-ratio: 1200 / 638; }
.pesen-solo .play-btn { width: 92px; height: 92px; }

/* На страницата на една песен копчето стои ВИНАГИ видимо. В решетката на
   началната страница то се появява при посочване — там картите са девет и
   девет копчета едновременно са шум. Тук картата е една и илюстрацията Е
   плейърът: ако копчето се крие, нищо не подсказва, че картината се пуска. */
@media (hover: hover) {
  .pesen-solo .play-btn { opacity: 1; transform: none; }
  .pesen-solo .track-row:hover .play-btn { transform: scale(1.06); }
}