/* ══════════════════════════════════════════════════════════════
   Stradalo — сайт-визитка. Все стили сайта.
   Цвета — только через var(--...) из colors.css (подключается
   отдельным <link> ПЕРЕД этим файлом).
   Шрифт — Nunito, локально (без Google Fonts, GDPR-чисто).
   Демо-экраны в «телефонах» — видеозаписи реального приложения
   (.phone > .phone__video), никакой CSS-вёрстки экранов тут нет.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito_800ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* якоря (#why и т.п.) не прячутся под фикс-шапкой */
}

body {
  font-family: 'Nunito', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--dark);
  background: var(--background);
  padding-top: 64px; /* высота фикс-шапки — контент начинается под ней */
}

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

a { color: var(--orange-stroke); }
a:hover { color: var(--dark); }

/* ── Шапка (фиксированная; min-height — чтобы была одинаковой на всех страницах) ── */

.site-header {
  background: var(--dark);
  padding: 12px 20px;
  position: fixed;   /* всегда видна при скролле (sticky у Ани уезжала) */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(20, 22, 25, .35);
}
.site-header__inner {
  max-width: 960px;
  margin: 0 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.logo span { color: var(--orange); }
.logo:hover { color: var(--orange); }

/* Переключатель языков — ссылки между языковыми версиями (a.lang-btn), генерит build.mjs */
.lang-switch {
  display: flex;
  gap: 6px;
  background: var(--dark-stroke);
  border-radius: 100px;
  padding: 4px;
}
.lang-switch .lang-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.lang-switch .lang-btn:hover { color: var(--white); }
.lang-switch .lang-btn.active {
  background: var(--orange);
  color: var(--dark);
}

/* ── Стор-бейджи ───────────────────────────────────────────── */

/* Бейдж стора — как настоящий: тёмный, иконка + две строки */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--black);
  border: 1.5px solid var(--tertiary-stroke);
  border-radius: 14px;
  padding: 10px 20px;
  text-decoration: none;
  min-width: 190px;
  transition: transform .08s ease;
}
.store-badge:hover { transform: translateY(2px); }
.store-badge img { width: 30px; height: 30px; }
/* Иконка Apple в ассетах тёмная — на чёрном бейдже перекрашиваем в белый */
.store-badge--apple img { filter: brightness(0) invert(1); }
.store-badge div { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-badge small { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
.store-badge strong { font-size: 20px; color: var(--white); font-weight: 700; }

/* ── Герой ─────────────────────────────────────────────────── */

.hero {
  background: var(--dark);
  color: var(--white);
  padding: 48px 20px 64px;
  overflow: hidden;
}
.hero__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 32px;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.1;
  text-transform: uppercase;
}
.hero h1 .accent { color: var(--orange); }
.hero__sub {
  margin-top: 16px;
  font-size: 20px;
  color: var(--text-tertiary);
}
.hero__buttons {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__mascot { justify-self: center; }
.hero__mascot img { width: min(400px, 85vw); height: auto; }
/* Маскоты мягко «плавают» вверх-вниз. Анимация на ОБЁРТКЕ, а не на img —
   на самой картинке transform занят параллаксом от мышки (effects.js). */
.hero__mascot { animation: mascot-float 6s ease-in-out infinite; }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mascot { animation: none; }
}

@media (max-width: 720px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__buttons { justify-content: center; }
  .hero__mascot { order: -1; }
  .hero__mascot img { width: min(300px, 75vw); }
}

/* ── Секции ────────────────────────────────────────────────── */

.section {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 20px;
}
.section h2 {
  font-weight: 800;
  font-size: clamp(26px, 4vw, 36px);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 36px;
}

/* ── Карточки-фичи в стиле CardClue приложения ─────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr; /* все карточки одной высоты */
  gap: 20px;
}
@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

.clue-card {
  background: var(--c-bg);
  border: 2px solid var(--c-stroke);
  box-shadow: 0 3px 0 var(--c-stroke);
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* Наведение: карточка приподнимается, «ступенька» тени растёт */
.clue-card:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--c-stroke); }
.clue-card--purple { --c-bg: var(--purple);       --c-stroke: var(--purple-stroke);       --c-title: var(--purple-adding); }
.clue-card--orange { --c-bg: var(--orange-light); --c-stroke: var(--orange-light-stroke); --c-title: var(--orange-stroke); }
.clue-card--green  { --c-bg: var(--green-light);  --c-stroke: var(--green-light-stroke);  --c-title: var(--green-stroke); }
.clue-card--red    { --c-bg: var(--red-light);    --c-stroke: var(--red-light-stroke);    --c-title: var(--red-adding); }

.clue-card__top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.clue-card__icon { font-size: 34px; line-height: 1; }
.clue-card__icon img { width: 40px; height: 40px; }
.clue-card__badge {
  background: var(--view-bg);
  border: 2px solid var(--c-stroke);
  border-radius: 100px;
  padding: 4px 14px;
  font-weight: 700;
  font-size: 14px;
  color: var(--dark);
  white-space: nowrap;
}
.clue-card h3 {
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--c-title);
}
.clue-card p { font-size: 17px; color: var(--dark); }

/* ── «Как это выглядит» — скроллер телефонов ───────────────── */

.showcase-wrap { position: relative; }
.showcase-track {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 18px;
  scrollbar-width: none;
}
.showcase-track::-webkit-scrollbar { display: none; }
/* Ширина блока = ширине телефона (260 экран + рамка 8×2 = 276), фиксированная,
   чтобы блоки были одинаковые, гапы ровные, а подпись не тянула блок шире рамки. */
.showcase-item {
  flex: 0 0 276px;
  width: 276px;
  scroll-snap-align: center;
  text-align: center;
}
/* Стрелки — СБОКУ от ленты, за пределами телефонов, по вертикальному центру
   (не перекрывают экраны). Когда сбоку места нет (узкий экран) — не прячем,
   а переносим под ленту, см. media-запрос ниже. */
.showcase-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.showcase-arrows .scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}
.scroll-arrow--left  { left: -66px; }
.scroll-arrow--right { right: -66px; }
/* Мало места сбоку — стрелки НЕ исчезают, а встают под ленту по центру. */
@media (max-width: 1100px) {
  .showcase-arrows {
    position: static;
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
  }
  .showcase-arrows .scroll-arrow { position: static; transform: none; }
}
.scroll-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--dark);
  box-shadow: 0 3px 0 var(--dark-stroke);
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-arrow:hover { background: var(--orange); color: var(--dark); box-shadow: 0 3px 0 var(--orange-stroke); }

.demo__caption {
  margin-top: 16px;
  font-weight: 700;
  font-size: 17px;
  /* не шире телефона — иначе подпись торчит за рамку */
  max-width: 100%;
}
.demo__caption small {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-secondary);
}

/* ── «Телефон»: рамка, внутри — видеозапись приложения ─────── */

.phone {
  box-sizing: content-box; /* рамка НАРУЖУ от ширины/высоты, а не съедает их изнутри */
  width: 260px;
  height: 564px;
  background: var(--background);
  border: 8px solid var(--dark-stroke); /* SecondaryStroke */
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
/* Видео-запись реального приложения внутри рамки телефона.
   Ролик 375×812 чуть выше рамки 375×800 — cover срезает ~1% по краям. */
.phone__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--background);
}

/* ── Тёмная секция «для иностранцев» (словарь) ─────────────── */

.dark-section {
  background: var(--dark);
  color: var(--white);
  padding: 64px 20px;
  margin-top: 24px;
}
.dark-section__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 40px;
}
.dark-section h2 {
  font-weight: 800;
  font-size: clamp(26px, 4vw, 36px);
  text-transform: uppercase;
  line-height: 1.15;
}
.dark-section h2 .accent { color: var(--orange); }
.dark-section p { margin-top: 16px; font-size: 18px; color: var(--text-tertiary); }
@media (max-width: 720px) {
  .dark-section__inner { grid-template-columns: 1fr; text-align: center; }
  .dark-section .phone { margin-top: 10px; }
}

/* ── Маскоты ───────────────────────────────────────────────── */

.mascots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.mascot {
  background: var(--view-bg);
  border: 1px solid var(--stroke);
  box-shadow: 0 3px 0 var(--stroke);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mascot:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--stroke); }
.mascot img { height: 160px; width: auto; margin: 0 auto 16px; }
.mascot h3 { font-weight: 800; font-size: 20px; text-transform: uppercase; }
.mascot p { color: var(--text-secondary); font-size: 15px; margin-top: 6px; }

/* ── FAQ ───────────────────────────────────────────────────── */

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: var(--view-bg);
  border: 1px solid var(--stroke);
  box-shadow: 0 3px 0 var(--stroke);
  border-radius: 20px;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  padding: 18px 52px 18px 20px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--dark);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq details[open] summary::after { content: '–'; }
.faq details p {
  padding: 0 20px 18px;
  color: var(--text-secondary);
}

/* ── Финальный призыв ──────────────────────────────────────── */

.cta {
  background: var(--orange);
  border-radius: 32px;
  max-width: 920px;
  margin: 0 auto 56px;
  padding: 48px 24px;
  text-align: center;
}
.cta h2 {
  font-weight: 800;
  font-size: clamp(24px, 4vw, 34px);
  text-transform: uppercase;
}
.cta p { margin-top: 10px; opacity: .8; }
.cta__buttons {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 960px) { .cta { margin-left: 20px; margin-right: 20px; } }

/* ── Подвал ────────────────────────────────────────────────── */

.site-footer {
  background: var(--dark);
  color: var(--text-tertiary);
  padding: 40px 20px;
  font-size: 15px;
}
.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer__brand { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.site-footer__logo-icon { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 10px; }
.site-footer__brand .logo { font-size: 20px; }
.site-footer__brand p { margin-top: 3px; }
@media (max-width: 640px) { .site-footer__brand { text-align: left; align-items: flex-start; } }

/* Узкая полоса юр.ссылок под подвалом — фон = SecondaryStroke приложения (#141619, == --dark-stroke) */
.legal-bar { background: var(--dark-stroke); padding: 16px 20px; }
.legal-bar__nav {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 48px;
}
.legal-bar__nav a { color: var(--white-muted); text-decoration: none; font-size: 13px; }
.legal-bar__nav a:hover { color: var(--white); }

/* ── Страницы документов и контактов ───────────────────────── */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}
.doc h1 {
  font-weight: 800;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  margin-bottom: 12px;
}
.doc h2 {
  font-weight: 800;
  font-size: 22px;
  margin: 36px 0 12px;
}
.doc h3 { font-weight: 700; font-size: 18px; margin: 24px 0 8px; }
.doc p { margin: 10px 0; }
.doc ul { margin: 10px 0 10px 24px; }
.doc li { margin: 6px 0; }
.doc strong { font-weight: 700; }

.doc__meta { color: var(--text-secondary); margin-bottom: 24px; }

/* Таблицы в документах */
.table-wrap { overflow-x: auto; margin: 14px 0; }
.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  background: var(--view-bg);
  border-radius: 16px;
  overflow: hidden;
  font-size: 16px;
}
.doc th, .doc td {
  border: 1px solid var(--stroke);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.doc th { background: var(--orange-light); font-weight: 700; }

/* Карточка на странице контактов */
.contact-card {
  background: var(--view-bg);
  border: 1px solid var(--stroke);
  box-shadow: 0 3px 0 var(--stroke);
  border-radius: 20px;
  padding: 20px;
  margin: 16px 0;
}
.contact-card h2 { margin: 0 0 8px; font-size: 20px; }

.contacts-mascot { width: 240px; height: auto; margin: 0 auto; display: block; }
/* Обёртка Конетто: плавание — на ней, параллакс (effects.js) — на самой
   картинке. Тот же приём, что у героя: transform не конфликтуют. */
.contacts-mascot-wrap { margin: 24px 0; animation: mascot-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .contacts-mascot-wrap { animation: none; }
}

/* Ссылка «назад» на служебных страницах (доки, контакты) */
.back-link {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--orange-stroke);
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover { color: var(--dark); }

/* Круглая кнопка «наверх» — появляется при скролле, стиль как у .scroll-arrow */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--dark);
  box-shadow: 0 3px 0 var(--dark-stroke);
  color: var(--white);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 100;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--orange); color: var(--dark); box-shadow: 0 3px 0 var(--orange-stroke); }

/* ── Scroll-reveal: секции проявляются при прокрутке ────────────
   Классы навешивает effects.js (только главная). Без JS страница
   выглядит как обычно — скрытого состояния в разметке нет. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }