/* ══════════════════════════════════════
   SHOWCASE — герой: лінійка розробок + дані обраної
   ══════════════════════════════════════
   Підключати ПІСЛЯ layout.css.

   Зверху — сцена: обрана платформа крупно по центру, решта менші обабіч,
   під нею крапки (js/carousel.js). Знизу — назва й опис по
   центру, картки характеристик по боках. Секція має вміщатися в екран
   цілком (так працює scroll-pager.js): сцена займає решту висоти. */

.showcase {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Крок відступів — 8px: 24 під шапкою, 40 з боків, 32 знизу */
  padding: calc(var(--nav-h) + 24px) 40px 32px;
  /* Ширина стовпчиків карток характеристик — одним джерелом для грида. Не вужче
     232px: стільки займає найширша картка («188×135×90», цифри не переносяться) —
     у вужчий стовпчик вона вилазила й налазила на опис */
  --spec-w: clamp(232px, 14vw, 260px);
  /* Було img/vignette.png — 1.09 МБ РАСТРА заради двоколірного градієнта
     (заміри: суцільна альфа 255, сусідні пікселі різняться на 0.25, тобто
     ані прозорості, ані зерна). Еліпс затемнення від нижнього центру
     відтворено стопами: 0 байт замість найважчого файлу сторінки. */
  background: radial-gradient(
    ellipse 50% 88% at 50% 100%,
    #121111 0%,
    #171616 29%,
    #1b1a1a 43%,
    #1f1e1e 57%,
    #242323 71%,
    var(--c-surface) 100%
  );
}

/* ══ Сцена платформ — як до 29.09 ══
   Платформи йдуть замкненим колом GORA → VALKYRIE → DRAKAR → Nexus AI → KerMO → GORA…:
   ліворуч попередня, далі обрана, праворуч наступні. Сцена ділиться на --n
   відрізків — число платформ, округлене вгору до непарного (4 → 5; ставить
   js/carousel.js), щоб обрана стояла в середньому, рівно по центру. Середній
   відрізок у 1.5 раза ширший за інші: seg = 100% / (n + 0.5). Кожна платформа —
   в центрі свого відрізка, а її коробка — не ширша за відрізок мінус --gap: коробки
   не перекриваються ніколи (раніше обрана заходила в сусідні відрізки). Місце (data-slot на <li>) ставить
   js/carousel.js; рух — по прямій, змінюються лише left і ширина. */
.showcase__lineup-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}

/* Large background text — за платформами, на осі сцени */
.showcase__bg-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 8px;
  /* Назви пишемо як є: KerMO має змішаний регістр, решта вже великими */
  text-transform: none;
  z-index: 0;
  /* Зміна назви: згасає й проявляється по S-кривій (ease-in-out), 0.17 + 0.17 с;
     текст міняється в повній прозорості — BG_FADE_MS у js/carousel.js */
  transition: opacity 0.17s cubic-bezier(0.65, 0, 0.35, 1);
}

.showcase__bg-text.is-fading { opacity: 0; }

/* Висота коробки платформи — у % від висоти сцени (для absolute вона визначена
   завжди): на низькому екрані платформа не лізе в дані під нею, без заміру в JS. */
.showcase__lineup {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  list-style: none;
  --active-h: 84%;
  /* Висота невибраних — частка від висоти обраної (+46px під підпис); 0.48 =
     колишні 0.32 × 1.5 */
  --side-k: 0.48;
  /* Відрізки сцени: --n перевизначає js/carousel.js, --c — номер середнього (0…n−1),
     середній — 1.5·seg */
  --n: 5;
  --c: calc((var(--n) - 1) / 2);
  --seg: calc(100% / (var(--n) + 0.5));
  --gap: 24px;
  /* Коробки: обрана — середній відрізок, решта — свій, мінус проміжок */
  --cw: calc(var(--seg) * 1.5 - var(--gap));
  --sw: calc(var(--seg) - var(--gap));
}

/* Усі коробки стоять на спільній «підлозі» — нижній край на одній лінії (низ
   обраної): платформи різної висоти не висять одна вище за іншу. 16px знизу —
   до крапок. Висота бічної —
   та сама частка від висоти обраної, плюс однакове місце під підпис. */
.showcase__lineup > li {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: var(--sw);
  height: calc(var(--active-h) * var(--side-k) + 46px);
  transform: translateX(-50%);
  z-index: 1;
}

/* Прокрутка — один рух тривалістю --move-dur (js/carousel.js: 0.68 с на одне місце,
   +0.15 с на кожне наступне), крива easeOutQuart — різкий старт, м'яке гальмування */
.showcase--ready .showcase__lineup > li {
  --move-ease: cubic-bezier(0.25, 1, 0.5, 1);
  transition: left var(--move-dur, 0.684s) var(--move-ease),
              width var(--move-dur, 0.684s) var(--move-ease),
              height var(--move-dur, 0.684s) var(--move-ease),
              opacity var(--move-dur, 0.684s) var(--move-ease);
}

/* Центри відрізків: лівіше середнього — (k + ½)·seg; середній — (c + ¾)·seg;
   правіше — ще на пів-seg далі (середній ширший на половину) */
.showcase__lineup > li[data-slot="left"]      { left: calc(var(--seg) * (var(--c) - 0.5)); z-index: 2; }
.showcase__lineup > li[data-slot="center"] {
  left: calc(var(--seg) * (var(--c) + 0.75));
  width: var(--cw);
  height: var(--active-h);
  z-index: 5;
}
.showcase__lineup > li[data-slot="right"]     { left: calc(var(--seg) * (var(--c) + 2)); z-index: 2; }
.showcase__lineup > li[data-slot="far-right"] { left: calc(var(--seg) * (var(--c) + 3)); }
.showcase__lineup > li[data-slot="far-left"]  { left: calc(var(--seg) * (var(--c) - 1.5)); }

/* Третя від обраної (коло з 6+ платформ) — за краєм сцени, видно крапкою */
.showcase__lineup > li[data-slot="out-left"]  { left: calc(var(--seg) * -0.5); opacity: 0; pointer-events: none; }
.showcase__lineup > li[data-slot="out-right"] { left: calc(100% + var(--seg) * 0.5); opacity: 0; pointer-events: none; }

/* ?grid — налагодження: відрізки (рожеві), контейнери (червоні), місце під
   зображення (блакитні), сам файл зображення чи заглушка (жовті) */
.showcase__grid-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  outline: 1px dashed #ff4fd8;
  outline-offset: -1px;
  pointer-events: none;
}
.showcase--grid .showcase__lineup > li { outline: 2px solid #ff3b3b; outline-offset: -2px; }
.showcase--grid .showcase__lineup > li::after {
  content: attr(data-slot);
  position: absolute;
  top: 2px;
  left: 4px;
  font: 11px/1 monospace;
  color: #ff3b3b;
}
.showcase--grid .showcase__dev-media { outline: 1px solid #3bd5ff; outline-offset: -1px; }
.showcase--grid .showcase__dev-media img,
.showcase--grid .showcase__ph { outline: 1px solid #ffd400; outline-offset: -1px; }

/* Бічна платформа пригашена яскравістю, а НЕ прозорістю: напівпрозора
   пропускала б напис на тлі. Активна не реагує на наведення — клік по ній
   відкриває ролик (js/video.js). */
.showcase__dev {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  filter: brightness(0.5);
  transition: filter 0.35s;
  -webkit-tap-highlight-color: transparent;
}

.showcase__dev:not(.showcase__dev--active):hover { filter: brightness(0.75); }

/* Тінь під платформою — filter, а не ::after: він іде за силуетом зображення */
.showcase__dev--active {
  filter: drop-shadow(0 0 9px rgba(160, 160, 160, 0.15))
          drop-shadow(0 0 2px rgba(160, 160, 160, 0.1))
          drop-shadow(0 14px 12px rgba(0, 0, 0, 0.45));
}

.showcase__dev-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* <picture> — лише обгортка для <source>; display: contents прибирає її з
   розкладки, щоб flex-елементом лишалось саме зображення. */
.showcase__dev-media picture {
  display: contents;
}

/* Ширина — від коробки, а не від природного розміру файлу: з srcset природний
   розмір залежить від того, яку версію браузер узяв при завантаженні. Коробку
   задає сцена, object-fit вписує зображення без спотворень. */
.showcase__dev-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
}

.showcase__dev-name {
  font-family: var(--font-display);
  /* Коробка бічної — 15% ширини: на вузькому вікні довгі назви (VALKYRIE)
     злипались із сусідньою */
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: clamp(1px, 0.28vw, 4px);
  text-transform: none;
  color: var(--c-text);
}

/* Під центральною підпис не потрібен — її назва стоїть у даних нижче */
.showcase__dev--active .showcase__dev-name,
.showcase__dev--active .showcase__dev-label { visibility: hidden; opacity: 0; }

/* Назва, під нею статус «в розробці» — стовпчиком по центру */
.showcase__dev-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Місце під підпис однакове в усіх — і з рядком «в розробці», і без: інакше
   зображення платформи з коротшим підписом опускалось нижче за сусідні. */
.showcase__dev-label,
.showcase__dev > .showcase__dev-name {
  min-height: 46px;
}

.showcase__dev-status {
  padding: 2px 8px;
  border: 1px solid rgba(255, 205, 0, 0.6);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-accent);
  white-space: nowrap;
}

/* Обрана заглушка — суцільна, без прозорого поля, як у рендерів: вужча, щоб
   не торкатися сусідів */
.showcase__lineup > li[data-slot="center"] .showcase__ph { width: 70%; }

/* Заглушка платформи без рендера (DRAKAR, Nexus AI, KerMO) — SVG з viewBox 16:10: вписується
   в коробку як зображення (preserveAspectRatio meet), тож не сплющується на
   низькому екрані й не квадратиться на широкому. */
.showcase__ph {
  position: relative;
  z-index: 1;
  width: 84%;
  height: 100%;
  overflow: visible;
}

.showcase__ph-box {
  fill: var(--c-surface-2);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.showcase__ph-logo {
  color: var(--c-muted);
  opacity: 0.5;
}

.showcase__ph-note {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1.4px;
  fill: var(--c-muted);
}

/* Крапки під сценою — як на старій. Кнопка 44×44 з крапкою 12px усередині:
   візуально крапка, а тач-ціль відповідає мінімуму. Від'ємні поля — щоб ряд
   займав у розкладці ~10px, а не 44. */
.showcase__dots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -17px 0;
}

.showcase__dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.showcase__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--c-muted);
  background: transparent;
  transition: background var(--transition), border-color var(--transition);
}

.showcase__dot:hover::before { border-color: var(--c-accent); }

.showcase__dot.active::before {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* Scroll hint */
.showcase__scroll-hint {
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--c-muted);
  opacity: 0.5;
  animation: bounceDown 2s infinite;
  z-index: 3;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ══ Дані обраної платформи ══ */
.showcase__info {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  /* На всю ширину героя: картки по краях, опис по центру — не ширший за 820px.
     Два ряди: назва (з Brave1) над описом, а опис і картки — в одному ряду, тож
     висоту карток задає опис: верх і низ врівень без підгонки в px. Стовпчик
     карток — за шириною тексту (fit-content), але не ширше 280px: верхня й нижня
     картки одного стовпчика однакові, бо обидві тягнуться на його ширину. */
  grid-template-columns: fit-content(280px) minmax(0, 1fr) fit-content(280px);
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 12px;
  align-items: stretch;
  width: 100%;
  padding-top: 24px;
}

.showcase__info > .showcase__stack--left  { grid-column: 1; grid-row: 2; align-items: stretch; }
.showcase__info > .showcase__stack--right { grid-column: 3; grid-row: 2; align-items: stretch; }

/* Стопка: дані всіх платформ в одній клітинці, видно лише активні */
.showcase__stack {
  display: grid;
  /* Колонка стопки — не ширша за її клітинку: інакше найширша прихована
     картка (кути повороту VALKYRIE) розпирала стопку за межі сітки */
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  justify-items: stretch;
}

.showcase__stack > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.showcase__stack > .is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Обгортка центру не бере участі в сітці: її дві стопки (назва й опис) стають
   окремими клітинками — інакше висота ряду включала б назву, і картки тягнулись
   би до неї */
.showcase__center {
  display: contents;
}

.showcase__center > .showcase__stack {
  grid-column: 2;
  min-width: 0;
  justify-items: center;
}

.showcase__center > .showcase__stack:first-child { grid-row: 1; }
.showcase__center > .showcase__stack:last-child  { grid-row: 2; align-items: stretch; }

/* Spec cards */
.showcase__specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Дві картки ділять висоту опису порівну; текст — не більше двох рядків */
.showcase__spec-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffb700;
  color: #0f0f0f;
  border-radius: 12px;
  padding: 6px 16px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.showcase__spec-val {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  color: #0f0f0f;
  line-height: 1.15;
  white-space: nowrap;
}

.showcase__spec-key {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-surface);
  margin-top: 4px;
}

/* Картка-властивість замість числа (VALKYRIE): фраза, тож кегль менший */
.showcase__spec-card--text .showcase__spec-val {
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}

/* Кути повороту (VALKYRIE): вісь зліва, діапазон справа — табличкою по
   центру картки, підпис знизу, як в інших картках */
.showcase__spec-card--angles {
  padding-top: 8px;
  padding-bottom: 8px;
}

.showcase__angles {
  margin: 0;
  display: grid;
  /* В один рядок (PITCH … · YAW …) + підпис: картка — максимум два рядки */
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  align-items: baseline;
  column-gap: 5px;
}

.showcase__angles dd + dt { margin-left: 6px; }

.showcase__angles dt {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-surface);
  text-align: left;
}

.showcase__angles dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  color: #0f0f0f;
  text-align: right;
  white-space: nowrap;
}

.showcase__spec-card--angles .showcase__spec-key {
  margin-top: 5px;
}

/* Label */
.showcase__label {
  font-family: var(--font-display);
  /* 34 проти 22 у цифр карток: заголовок не сперечається з даними */
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-accent);
  letter-spacing: 6px;
  text-transform: none;
  text-align: center;
}

/* Статус платформи окремим рядком під назвою, по центру — так само, як
   кнопка Brave1 Market під «НРК GORA» */
.showcase__label-status {
  display: block;
  width: max-content;
  margin: 8px auto 0;
  padding: 3px 10px;
  border: 1px solid rgba(255, 205, 0, 0.45);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-accent);
  line-height: 1.4;
  white-space: nowrap;
}

/* Description box */
.showcase__desc-box {
  background: #ffb700;
  color: #0f0f0f;
  border-radius: 12px;
  /* Компактніший на чверть (164 → ~123px): менші поля й інтерліньяж */
  padding: 10px 24px;
  max-width: 820px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.showcase__desc-title {
  font-family: var(--font-display);
  font-size: 15.4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 6px;
  position: relative;
}

.showcase__desc-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0f0f0f 30%, #0f0f0f 70%, transparent);
}

/* Дисплейний шрифт — свідоме рішення дизайну героя, повернуто після заміни
   на Inter: у макеті опис платформи набраний саме ним. */
.showcase__desc-text {
  font-family: var(--font-display);
  font-size: 14.4px;
  line-height: 1.45;
  color: var(--c-surface);
}

/* Дані ще не оприлюднені (DRAKAR, Nexus AI, KerMO): картки й опис — пунктирні рамки */
.showcase__spec-card.is-ph,
.showcase__desc-box.is-ph {
  background: transparent;
  box-shadow: none;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}

.showcase__spec-card.is-ph .showcase__spec-val,
.showcase__spec-card.is-ph .showcase__spec-key {
  color: var(--c-muted);
}

.showcase__desc-box.is-ph .showcase__desc-title { color: var(--c-white); }

/* Заголовок опису — великими літерами, але KerMO пишеться як є */
.showcase__desc-title .keep-case { text-transform: none; }
.showcase__desc-box.is-ph .showcase__desc-text { color: var(--c-muted); }

.showcase__desc-box.is-ph .showcase__desc-title::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.25) 70%, transparent);
}

/* ── Showcase на вузьких екранах ── */
/* Вужчий опис переноситься на більше рядків — лишаємо зображенням менше */
@media (max-width: 900px) {
  /* Картки не вміщуються обабіч опису — стають під ним, двома стовпчиками */
  .showcase__info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .showcase__center > .showcase__stack { grid-column: 1 / -1; }
  .showcase__info > .showcase__stack--left  { grid-column: 1; grid-row: 3; }
  .showcase__info > .showcase__stack--right { grid-column: 2; grid-row: 3; }
  .showcase__spec-card { flex: 0 0 auto; }

  /* Тут картки вузькі — кути знову двома рядками (PITCH / YAW) */
  .showcase__angles { grid-template-columns: auto auto; row-gap: 1px; }
  .showcase__angles dd + dt { margin-left: 0; }
}

@media (max-width: 768px) {
  .showcase {
    padding: calc(var(--nav-h) + 12px) 16px 16px;
  }

  /* Телефон — лише обрана, 88% ширини: бічні виходили 51×22px і заглушка не
     вміщала власного підпису. Інші — крапками. */
  .showcase__lineup { --cw: 88%; }
  .showcase__lineup > li:not([data-slot="center"]) { opacity: 0; pointer-events: none; }
  .showcase__scroll-hint { display: none; }

  .showcase__label {
    font-size: 24px;
    letter-spacing: 4px;
  }

  .showcase__desc-box {
    padding: 12px 16px;
  }

  .showcase__desc-title { font-size: 13px; }

  .showcase__desc-text {
    font-size: 12.5px;
    line-height: 1.5;
  }

  /* 78: стільки займає найвища картка — з підписом у два рядки («Вантажо-підйомність»,
     «Дані уточнюються»); картки двох стовпчиків стоять поруч, і їхні верхи мають збігатися */
  .showcase__spec-card { min-height: 78px; padding: 10px 8px; }
  .showcase__spec-val { font-size: 18px; white-space: normal; }
  .showcase__spec-key { font-size: 10px; letter-spacing: 0.5px; }
  .showcase__spec-card--text .showcase__spec-val { font-size: 11.5px; }
  .showcase__spec-card--angles { padding-top: 8px; padding-bottom: 8px; }
  .showcase__angles { column-gap: 8px; }
  .showcase__angles dt { font-size: 10px; letter-spacing: 0.5px; }
  .showcase__angles dd { font-size: 13px; }
}

/* Посилання на картку платформи в Brave1 Market — «пігулка» окремим рядком
   під назвою, по центру; тієї ж форми, що статус «в розробці», але
   заповнюється при наведенні */
.showcase__market {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 6px 12px 6px 14px;
  border: 1px solid rgba(255, 205, 0, 0.6);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

/* Ряд кнопок під назвою: Brave1 Market і «Дивитися відео» — однакові «пігулки» */
.showcase__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.showcase__actions > .showcase__market { margin: 0; }

.showcase__video {
  background: none;
  cursor: pointer;
}

.showcase__market svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.showcase__market:hover {
  background: var(--c-accent);
  color: var(--c-bg);
  box-shadow: 0 0 18px rgba(255, 205, 0, 0.3);
}

@media (max-width: 768px) {
  .showcase__market {
    margin: 8px auto 0;
    padding: 5px 10px 5px 12px;
    font-size: 10px;
  }
}

/* Суцільна прокрутка: main уже починається під шапкою (css/layout.css),
   тож запас зверху під прозору шапку герою більше не потрібен */
.page-frame:has(> main.is-scrolling) .showcase {
  padding-top: 20px;
}

@media (max-width: 768px) {
  .page-frame:has(> main.is-scrolling) .showcase {
    padding-top: 12px;
  }
}

/* ══ Ролик з YouTube поверх сторінки (js/video.js) ══ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-modal[hidden] { display: none; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
}

.video-modal__box {
  position: relative;
  /* 16:9 і не вище за екран — на телефоні в альбомній орієнтації теж */
  width: min(960px, 100%, calc((100vh - 140px) * 16 / 9));
  padding: 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.video-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.video-modal__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--c-accent);
}

.video-modal__close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: transparent;
  color: var(--c-white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.video-modal__close:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__soon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .video-modal { padding: 12px; }
  .video-modal__box { padding: 10px; }
  .video-modal__title { font-size: 15px; letter-spacing: 2px; }
}

/* Brave1 + order buttons side by side under the platform name */
.showcase__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.showcase__actions .showcase__market { margin: 10px 0 0; }