/* ==========================================================================
   OLYMP поверх шаблона Nexsas.
   Разметка, классы и анимации - из шаблона (assets/main.css, assets/main.js).
   Здесь только бренд: цвета приложения вместо фиолетового, Manrope и TBC вместо
   Inter Tight, и блоки, которых в шаблоне нет: переключатель языка, рамки
   скриншотов, шаги старта, фото-композиции, футер. Свои классы - o-*.
   ========================================================================== */

/* ---------- шрифты ----------
   TBC Contractica CAPS набирает только грузинские буквы и знак лари, латиница и
   цифры в обеих локалях - Manrope. Метрики TBC выровнены как на экране входа. */
@font-face {
  font-family: "TBC Contractica";
  src: url("../fonts/TBCContracticaCAPS-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  ascent-override: 106%;
  descent-override: 31%;
  line-gap-override: 0%;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F, U+20BE;
}
@font-face {
  font-family: "TBC Contractica";
  src: url("../fonts/TBCContracticaCAPS-Medium.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
  ascent-override: 106%;
  descent-override: 31%;
  line-gap-override: 0%;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F, U+20BE;
}
@font-face {
  font-family: "TBC Contractica";
  src: url("../fonts/TBCContracticaCAPS-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
  ascent-override: 106%;
  descent-override: 31%;
  line-gap-override: 0%;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F, U+20BE;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- токены шаблона → цвета OLYMP ----------
   Переменные шаблона объявлены в @layer theme, поэтому объявления здесь без слоя
   их перекрывают. Васильковый - акцент светлой темы приложения, лайм - акцент его
   тёмной темы: он встаёт на место зелёного шаблона. */
:root {
  --font-inter-tight: "TBC Contractica", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;

  --color-primary-50: #f0f3fe;
  --color-primary-100: #e6ecfd;
  --color-primary-200: #cdd9fb;
  --color-primary-300: #a9bcf8;
  --color-primary-400: #7593f6;
  --color-primary-500: #4668ee;
  --color-primary-600: #3857e3;
  --color-secondary: #16171a;

  --color-background-1: #fcfcfd;
  --color-background-2: #f9fafb;
  --color-background-3: #f4f5f7;
  --color-background-4: #eef0f3;
  --color-background-5: #131417;
  --color-background-6: #1c1d21;
  --color-background-7: #16171a;
  --color-background-8: #0e0f11;
  --color-background-9: #25272c;
  --color-stroke-5: #202227;
  --color-stroke-6: #25272c;
  --color-stroke-7: #2a2c31;
  --color-stroke-8: #33363d;

  --color-ns-cyan: #dce5fd;
  --color-ns-cyan-light: #eef2fe;
  /* Лаймовый акцент шаблона заменён на васильковый: на странице один акцентный
     цвет. Имена токенов оставлены шаблонные - их используют его же классы. */
  --color-ns-green: #4668ee;
  --color-ns-green-light: #dce5fd;
  /* Светлый оттенок для акцента на тёмном фоне: график, чипы, бейдж цены. */
  --o-accent-soft: #8aa4f7;
}
.dark {
  --color-primary-400: #8aa4f7;
  --color-primary-500: #5e81f4;
  --color-ns-green: #5e81f4;
}

/* Грузинские заглавные TBC крупнее латиницы того же кегля: шкала на ступень
   меньше, строки свободнее. */
html[lang="ka"] {
  --text-heading-1: 3.1rem;
  --text-heading-1--line-height: 125%;
  --text-heading-2: 2.45rem;
  --text-heading-2--line-height: 128%;
  --text-heading-3: 2rem;
  --text-heading-3--line-height: 130%;
  --text-heading-4: 1.65rem;
  --text-heading-4--line-height: 135%;
  --text-heading-5: 1.28rem;
  --text-heading-5--line-height: 145%;
  --text-heading-6: 1.1rem;
  --text-tagline-1: 0.94rem;
  --text-tagline-1--line-height: 165%;
  --text-tagline-2: 0.84rem;
  --text-tagline-2--line-height: 170%;
  --text-tagline-3: 0.74rem;
}

main section[id] {
  scroll-margin-top: 100px;
}

/* ---------- ритм секций ----------
   У шаблона до 200px сверху и снизу у каждой секции - между блоками выходили
   пустые экраны. Утилиты шаблона лежат в @layer, поэтому правила без слоя их
   перекрывают. */
main > section {
  padding-block: clamp(56px, 7vw, 96px);
}
main > #top {
  padding-top: clamp(120px, 12vw, 160px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
main > section[aria-labelledby="sports-title"] {
  padding-top: 0;
}
main > section .md\:mb-\[70px\] {
  margin-bottom: clamp(32px, 4vw, 56px);
}
#features .lg\:space-y-\[100px\] > :not(:last-child) {
  margin-block: 0 clamp(40px, 5vw, 64px);
}

/* ---------- шапка ----------
   Своя разметка вместо header-one шаблона: тот менял top через transition: all.
   Плашка непрозрачная и без backdrop-filter - размытие под фиксированной шапкой
   пересчитывается на каждом кадре прокрутки. При прокрутке (.is-scrolled из
   landing.js) меняются только тень и top. */
.o-header {
  position: fixed;
  z-index: 50;
  top: 16px;
  right: 0;
  left: 0;
  padding-inline: 16px;
  pointer-events: none;
  transition: top 0.35s ease;
  animation: o-header-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.o-header.is-scrolled {
  top: 8px;
}
@keyframes o-header-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
}
.o-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1180px;
  height: 64px;
  margin-inline: auto;
  padding: 0 8px 0 14px;
  border: 1px solid #16171a0f;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px #1018280a, 0 8px 24px -16px #10182826;
  pointer-events: auto;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.o-header.is-scrolled .o-header-bar {
  border-color: #16171a14;
  box-shadow: 0 1px 2px #1018280f, 0 18px 40px -18px #10182852;
}
.dark .o-header-bar {
  border-color: #ffffff12;
  background: var(--color-background-6);
  box-shadow: 0 8px 24px -16px #000000b3;
}
.dark .o-header.is-scrolled .o-header-bar {
  border-color: #ffffff1a;
  box-shadow: 0 18px 40px -16px #000000e6;
}

.o-header-logo {
  display: flex;
  align-items: center;
  justify-self: start;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.o-header-logo:hover {
  transform: rotate(-12deg);
}
.o-header-logo .o-mark {
  width: 36px;
  height: 36px;
}

/* Навигация - дорожка с «пилюлей», которая едет к наведённому пункту и
   возвращается к разделу, который сейчас на экране. */
.o-nav {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-background-3);
}
.dark .o-nav {
  background: var(--color-background-7);
}
.o-nav a {
  position: relative;
  z-index: 1;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
  transition: color 0.25s ease;
}
.dark .o-nav a {
  color: color-mix(in oklab, var(--color-accent) 60%, transparent);
}
.o-nav a:hover,
.o-nav a[aria-current] {
  color: var(--color-secondary);
}
.dark .o-nav a:hover,
.dark .o-nav a[aria-current] {
  color: var(--color-accent);
}
.o-nav-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px #1018281a, 0 0 0 1px #16171a0a;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.4s cubic-bezier(0.3, 0.7, 0.2, 1),
    opacity 0.25s ease;
}
.dark .o-nav-pill {
  background: var(--color-background-9);
  box-shadow: 0 0 0 1px #ffffff0d;
}

.o-header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
}
.o-header-actions .o-lang {
  margin-right: 4px;
}
.o-header-signin {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-secondary);
  transition: background-color 0.25s ease;
}
.dark .o-header-signin {
  color: var(--color-accent);
}
.o-header-signin:hover {
  background: var(--color-background-3);
}
.dark .o-header-signin:hover {
  background: var(--color-background-7);
}
.o-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 7px 0 20px;
  border-radius: 999px;
  background: var(--color-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.dark .o-header-cta {
  background: var(--color-accent);
  color: var(--color-secondary);
}
.o-header-cta:hover,
.dark .o-header-cta:hover {
  background: var(--color-primary-500);
  color: #fff;
}
.o-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-ns-green);
  color: #fff;
  font-size: 16px;
  transition: transform 0.3s ease, background-color 0.25s ease, color 0.25s ease;
}
.o-header-cta:hover .o-cta-arrow {
  transform: translateX(3px);
}
/* На наведении сама кнопка синяя - кружок со стрелкой становится белым. */
.o-header-cta:hover .o-cta-arrow,
.o-menu-cta:hover .o-cta-arrow {
  background: #fff;
  color: var(--color-primary-500);
}
html[lang="ka"] .o-nav a,
html[lang="ka"] .o-header-signin,
html[lang="ka"] .o-header-cta {
  font-size: 13px;
}

.o-burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding-right: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--color-secondary);
  cursor: pointer;
}
.dark .o-burger {
  background: var(--color-accent);
}
.o-burger i {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.25s ease;
}
.o-burger i:last-of-type {
  width: 11px;
}
.o-burger:hover i:last-of-type {
  width: 18px;
}
/* Открытое меню: две полоски сходятся в крестик (центры в 7px друг от друга). */
.o-burger[aria-expanded="true"] i:first-of-type {
  transform: translateY(3.5px) rotate(45deg);
}
.o-burger[aria-expanded="true"] i:last-of-type {
  width: 18px;
  transform: translateY(-3.5px) rotate(-45deg);
}
.dark .o-burger i {
  background: var(--color-secondary);
}

/* ---------- мобильное меню ----------
   Карточка под шапкой (top ставит landing.js по низу плашки), под ней
   затемнение. Шапка остаётся сверху (z-index 50), бургер становится крестиком. */
html.o-menu-lock {
  overflow: hidden;
}
.o-menu {
  position: fixed;
  z-index: 45;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s 0.4s;
}
.o-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
.o-menu-backdrop {
  position: absolute;
  inset: 0;
  background: #0e0f1159;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.dark .o-menu-backdrop {
  background: #000000a6;
}
.o-menu.is-open .o-menu-backdrop {
  opacity: 1;
}
.o-menu-panel {
  position: absolute;
  top: 84px;
  right: 12px;
  left: 12px;
  max-width: 480px;
  max-height: calc(100dvh - 100px);
  margin-left: auto;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #16171a0f;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 60px -24px #10182866;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dark .o-menu-panel {
  border-color: #ffffff12;
  background: var(--color-background-6);
  box-shadow: 0 30px 60px -20px #000;
}
.o-menu.is-open .o-menu-panel {
  opacity: 1;
  transform: none;
}
.o-menu-nav {
  display: grid;
  gap: 2px;
}
.o-menu-nav a,
.o-menu-actions {
  opacity: 0;
  transform: translateY(8px);
}
.o-menu-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 18px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-secondary);
  transition: background-color 0.2s ease, opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.o-menu-actions {
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Пункты появляются лесенкой. У ссылок первое свойство - фон, ему задержка не нужна. */
.o-menu.is-open .o-menu-nav a {
  opacity: 1;
  transform: none;
  transition-delay: 0s, calc(80ms + var(--i) * 45ms), calc(80ms + var(--i) * 45ms);
}
.o-menu.is-open .o-menu-actions {
  opacity: 1;
  transform: none;
  transition-delay: calc(80ms + var(--i) * 45ms);
}
html[lang="ka"] .o-menu-nav a {
  font-size: 17px;
}
.dark .o-menu-nav a {
  color: var(--color-accent);
}
.o-menu-nav a:hover,
.o-menu-nav a:focus-visible,
.o-menu-nav a[aria-current] {
  outline: none;
  background: var(--color-background-3);
}
.dark .o-menu-nav a:hover,
.dark .o-menu-nav a:focus-visible,
.dark .o-menu-nav a[aria-current] {
  background: var(--color-background-7);
}
.o-menu-num {
  min-width: 22px;
  font-family: "Manrope", var(--font-inter-tight);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--color-secondary) 40%, transparent);
}
.dark .o-menu-num {
  color: #fcfcfc66;
}
.o-menu-nav .ic {
  margin-left: auto;
  font-size: 18px;
  opacity: 0.3;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.o-menu-nav a:hover .ic,
.o-menu-nav a[aria-current] .ic {
  opacity: 1;
  transform: translateX(2px);
}
.o-menu-actions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 4px 4px;
  border-top: 1px solid #16171a0f;
}
.dark .o-menu-actions {
  border-top-color: #ffffff12;
}
.o-menu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 9px 0 24px;
  border-radius: 999px;
  background: var(--color-secondary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.dark .o-menu-cta {
  background: var(--color-accent);
  color: var(--color-secondary);
}
.o-menu-cta:hover,
.dark .o-menu-cta:hover {
  background: var(--color-primary-500);
  color: #fff;
}
.o-menu-cta .o-cta-arrow {
  width: 40px;
  height: 40px;
}
.o-menu-row {
  display: flex;
  gap: 8px;
}
.o-menu-signin {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 1px solid #16171a1a;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-secondary);
  transition: background-color 0.2s ease;
}
.dark .o-menu-signin {
  border-color: #ffffff1f;
  color: var(--color-accent);
}
.o-menu-signin:hover {
  background: var(--color-background-3);
}
.dark .o-menu-signin:hover {
  background: var(--color-background-7);
}
.o-menu-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-background-3);
  color: var(--color-secondary);
  font-size: 22px;
  transition: transform 0.2s ease;
}
.dark .o-menu-icon {
  background: var(--color-background-7);
  color: #fff;
}
.o-menu-icon:hover {
  transform: translateY(-2px);
}
@media (min-width: 1024px) {
  .o-menu {
    display: none;
  }
}
/* Раздел получает фокус после прокрутки к нему (для клавиатуры и скринридеров) - без рамки. */
main section[tabindex="-1"]:focus {
  outline: none;
}

/* Четыре пункта + действия не влезают в 1024-1279px (особенно грузинский):
   «Войти» есть в первом экране и в футере, в шапке его здесь прячем. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .o-header-signin {
    display: none;
  }
  .o-nav a {
    padding-inline: 14px;
  }
}
@media (max-width: 1023.98px) {
  .o-header-bar {
    grid-template-columns: auto 1fr;
  }
  .o-nav {
    display: none;
  }
  .o-burger {
    display: flex;
  }
}
@media (max-width: 767.98px) {
  .o-header {
    top: 12px;
    padding-inline: 12px;
  }
  .o-header-bar {
    height: 60px;
    padding: 0 6px 0 10px;
  }
  .o-header-signin {
    display: none;
  }
}
@media (max-width: 559.98px) {
  .o-header-cta {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .o-header,
  .o-nav-pill,
  .o-header-bar,
  .o-burger i,
  .o-menu,
  .o-menu-backdrop,
  .o-menu-panel,
  .o-menu-nav a,
  .o-menu-actions {
    animation: none;
    transition: none;
  }
}

/* Английская версия ждёт словаря, но не дольше 1.2 с - если JS не загрузился. */
html.i18n-wait body {
  visibility: hidden;
  animation: o-unhide 0s 1.2s forwards;
}
@keyframes o-unhide {
  to {
    visibility: visible;
  }
}

/* Кнопки шаблона пишут текст строчными - названия мессенджеров оставляем как есть. */
.btn.keep-case {
  text-transform: none;
}

/* В английской версии сохраняем регистр из i18n (Sign In, Payments и т.д.). */
html[lang="en"] .btn,
html[lang="en"] .badge {
  text-transform: none;
}
html[lang="en"] .btn span:first-letter,
html[lang="en"] .badge:first-letter {
  text-transform: none;
}

/* ---------- иконки из спрайта ---------- */
.ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  vertical-align: middle;
}
.wa {
  color: #25d366;
}

/* ---------- логотип ---------- */
.o-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.o-mark {
  width: 40px;
  height: 40px;
}

/* ---------- переключатель языка ---------- */
.o-lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--color-background-4);
}
.dark .o-lang {
  background: var(--color-background-7);
}
.o-lang button {
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.dark .o-lang button {
  color: color-mix(in oklab, var(--color-accent) 60%, transparent);
}
.o-lang button[aria-pressed="true"] {
  background: #fff;
  color: var(--color-secondary);
  box-shadow: 0 1px 2px #1018280d;
}
.dark .o-lang button[aria-pressed="true"] {
  background: var(--color-background-9);
  color: var(--color-accent);
}

/* ---------- рамки скриншотов ---------- */
.o-browser {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-stroke-1);
  border-radius: 16px;
  background: #fff;
}
.dark .o-browser {
  border-color: var(--color-stroke-7);
  background: var(--color-background-6);
}
.o-browser-bar {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 7px);
  height: clamp(24px, 3.2vw, 44px);
  padding-inline: clamp(10px, 1.4vw, 18px);
  border-bottom: 1px solid var(--color-stroke-4);
}
.dark .o-browser-bar {
  border-bottom-color: var(--color-stroke-7);
}
.o-browser-bar i {
  width: clamp(7px, 0.8vw, 11px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5f57;
}
.o-browser-bar i:nth-child(2) {
  background: #febc2e;
}
.o-browser-bar i:nth-child(3) {
  background: #28c840;
}
.o-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42%;
  margin-inline: auto;
  padding: 3px 14px;
  border-radius: 8px;
  background: var(--color-background-3);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(8px, 0.9vw, 13px);
  color: color-mix(in oklab, var(--color-secondary) 70%, transparent);
  transform: translateX(-20px);
}
.dark .o-url {
  background: var(--color-background-7);
  color: #fcfcfcb3;
}
.o-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top left;
  background: var(--color-background-3);
}
.dark .o-shot {
  background: var(--color-background-7);
}
.o-stack-back .o-browser {
  height: 100%;
}
.o-stack-back .o-shot {
  height: calc(100% - clamp(24px, 3.2vw, 44px));
  aspect-ratio: auto;
}
.o-phone {
  position: relative;
  padding: clamp(4px, 0.55vw, 8px);
  border-radius: clamp(20px, 3vw, 40px);
  background: #0b0c0e;
  box-shadow: inset 0 0 0 1px #ffffff1a, 0 30px 60px -30px #10182873;
}
.o-phone .o-shot {
  aspect-ratio: 390 / 844;
  border-radius: clamp(16px, 2.4vw, 32px);
}

/* ---------- лента видов спорта ---------- */
.o-sport {
  position: relative;
  flex: none;
  width: clamp(170px, 16vw, 220px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-background-4);
}
.o-sport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.o-sport figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fcfcfcf2;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-secondary);
}
.dark .o-sport figcaption {
  background: #16171af2;
  color: var(--color-accent);
}

/* ---------- оплаты: график и статусы ---------- */
.o-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, 0.8vw, 10px);
  height: clamp(150px, 16vw, 210px);
}
.o-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 8px 8px 4px 4px;
  background: #fcfcfc1f;
}
.o-bars span.is-now {
  background: var(--o-accent-soft);
}
.o-bars-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 12px;
  color: #fcfcfc80;
}
.o-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.o-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
}
.o-pill b {
  font-weight: 600;
}
.o-pill--ok {
  background: #dcf2e3;
  color: #0f5323;
}
.dark .o-pill--ok {
  background: #213328;
  color: #7ee2a8;
}
.o-pill--due {
  background: #fbefd5;
  color: #8a5c00;
}
.dark .o-pill--due {
  background: #302f25;
  color: #d9a441;
}
.o-pill--late {
  background: #ffe3e1;
  color: #82071e;
}
.dark .o-pill--late {
  background: #3b2426;
  color: #ffc9c4;
}
/* Фон тёмной плашки SMS - картинка шаблона, перекрашенная из бирюзы в васильковый. */
.o-hue {
  filter: hue-rotate(62deg) saturate(1.15);
}

/* ---------- фото-композиции в духе шаблона ---------- */
.o-circle {
  position: relative;
  width: 100%;
  aspect-ratio: 485 / 540;
}
.o-circle-photo {
  position: absolute;
  right: 3%;
  bottom: 0;
  left: 3%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  /* Фото лежит через multiply: по насыщенному синему круг уходил в чёрное,
     поэтому здесь светлый оттенок акцента. */
  background: var(--color-primary-300);
}
.o-circle-photo img,
.o-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
}
.o-circle-photo img {
  object-position: center 25%;
}
.o-photo-block {
  position: relative;
  width: 100%;
  aspect-ratio: 684 / 600;
}
.o-photo-block .o-block {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70%;
  height: 76%;
  border-radius: 28px;
  background: var(--color-ns-green);
}
.o-photo {
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 50%;
  height: 94%;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background: var(--color-background-4);
}
.o-photo img {
  mix-blend-mode: normal;
  object-position: center top;
}
.o-float {
  position: absolute;
  z-index: 2;
  padding: clamp(12px, 1.4vw, 20px) clamp(14px, 1.8vw, 24px);
  border-radius: clamp(14px, 1.6vw, 22px);
  box-shadow: 0 24px 48px -24px #10182866;
  transform: rotate(var(--r, 0deg));
  white-space: nowrap;
}
.o-float--dark {
  background: var(--color-secondary);
  color: var(--color-accent);
}
.dark .o-float--dark {
  background: var(--color-background-8);
  box-shadow: inset 0 0 0 1px var(--color-stroke-7), 0 24px 48px -24px #000;
}
.o-float--light {
  background: var(--color-background-1);
  color: var(--color-secondary);
}
.dark .o-float--light {
  background: var(--color-background-6);
  color: var(--color-accent);
}
.o-float small {
  display: block;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.4;
  opacity: 0.75;
}
.o-float b {
  display: block;
  font-family: "Manrope", var(--font-inter-tight);
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.o-float b .gel {
  font-family: "TBC Contractica", "Manrope", sans-serif;
}
.o-float .lime {
  color: var(--o-accent-soft);
}
.o-yellow {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-ns-green);
  font-size: clamp(12px, 1.1vw, 15px);
  color: #fff;
}
.o-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
}
.o-trend .ic {
  padding: 3px;
  border-radius: 50%;
  background: var(--color-ns-green);
  color: #fff;
  font-size: 18px;
}

/* ---------- как начать: три шага ----------
   Вместо вкладок со скриншотами: экраны показывали адреса и разделы приложения. */
.o-steps {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .o-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.o-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: 20px;
  background: var(--color-background-1);
}
.dark .o-step {
  background: var(--color-background-6);
}
.o-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(8px, 1.6vw, 28px);
}
.o-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-ns-green);
  color: #fff;
  font-size: 24px;
}
.o-step-num {
  font-family: "Manrope", var(--font-inter-tight);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in oklab, var(--color-secondary) 12%, transparent);
}
.dark .o-step-num {
  color: #fcfcfc1f;
}

/* ---------- почему Olymp: мини-карточка ---------- */
.o-why-visual {
  position: relative;
  padding: 0 12% 14% 0;
}
.o-why-visual .o-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
}

/* ---------- скрины на телефоне ----------
   Десктоп целиком в 340px не читается: landing.js подставляет фрагмент из frag/,
   пропорции фрагмента - в style="--frag" у картинки. Задний скрин в hero прячем,
   телефон в «почему» уводим под окно браузера, чтобы он не закрывал строки. */
@media (max-width: 639px) {
  .o-shot[data-frag] {
    aspect-ratio: var(--frag);
  }
  .o-stack-back {
    display: none;
  }
  .o-hero-shots {
    max-width: calc(100% - 32px);
  }
  .o-why-visual {
    padding: 0 0 56% 0;
  }
  .o-why-visual .o-phone {
    right: 2%;
    width: 30%;
  }
}

/* ---------- цены ---------- */
.o-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;
}
.o-price-num {
  font-family: "Manrope", var(--font-inter-tight);
  font-size: clamp(72px, 9vw, 112px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-accent);
}
.o-price-num .gel {
  margin-left: 0.04em;
  font-family: "TBC Contractica", "Manrope", sans-serif;
  font-size: 0.6em;
  letter-spacing: 0;
}
.o-price-unit {
  padding-bottom: 8px;
  line-height: 1.35;
  color: #fcfcfc99;
}
.o-free {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-ns-green);
  color: #fff;
}
/* Бейдж «Цена» лежит на тёмной картинке - берём светлый оттенок акцента. */
.badge-blur.text-ns-green {
  color: var(--o-accent-soft);
}
.o-free .ic {
  font-size: 20px;
}
.o-price-card {
  max-width: 640px;
  margin-inline: auto;
}

/* ---------- футер: одна строка ----------
   Справа отступ под фиксированную кнопку темы шаблона. */
.o-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-block: 32px;
}
.o-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-tagline-2);
  color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
}
.dark .o-footer-brand {
  color: #fcfcfc99;
}
.o-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.o-footer-links a {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-tagline-2);
  color: var(--color-secondary);
  transition: opacity 0.2s;
}
.dark .o-footer-links a {
  color: var(--color-accent);
}
.o-footer-links a:hover {
  opacity: 0.6;
}
.o-footer-links .ic {
  font-size: 22px;
}
@media (min-width: 640px) {
  .o-footer {
    padding-right: 56px;
  }
}
@media (max-width: 639.98px) {
  .o-footer {
    flex-direction: column;
    padding-bottom: 88px;
  }
}

/* ---------- мелочи ---------- */
.o-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.o-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}