/* =====================================================================
   Кадры будущего, сезон 2026. Общие стили всех страниц сайта:
   шрифты, дизайн-токены, база, шапка, футер, кнопки, примитивы.
   Подключается первым на каждой странице, дальше страничный css:
   landing.css (главная), apply.css (заявка), policy.css (политика ПДн).
   Кабинет заявок (app/static/admin.css) держит те же токены отдельно,
   т.к. отдается FastAPI без доступа к этому файлу.
   Источник: unz/*.dc.html + spec/design_tokens.css. Чистый CSS, без сборщиков.
   ===================================================================== */

/* ---------- Шрифты (self-hosted, /assets/fonts) ---------- */
@font-face { font-family: 'Humanist 521'; src: url('../fonts/Humanist521-Light.woff2') format('woff2');   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Humanist 521'; src: url('../fonts/Humanist521-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Humanist 521'; src: url('../fonts/Humanist521-Bold.woff2') format('woff2');    font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Токены (spec/design_tokens.css) ---------- */
:root {
  /* поверхности */
  --c-bg: #F4EFE9;
  --c-surface: #FFFFFF;
  --c-surface-pink: #FBE3EC;
  --c-ink: #2B1F2C;
  --c-ink-2: #3A2B3C;
  --c-divider: #EEE8E1;
  /* текст */
  --c-text: #2B1F2C;
  --c-text-soft: #5E5460;
  --c-text-muted: #756A73;   /* S2-FIX #23: 5.17:1 на белом, 4.52:1 на фоне (было #8A7E88, 3.87) */
  --c-placeholder: #756A73;  /* S2-FIX #23: «Выбери район» в select читается как значение */
  --c-on-dark-soft: #C9BFC7;
  --c-text-on-dark-soft: #C9BFC7;
  --c-pink-text: #F6B9D0;
  --c-green: #237F47;        /* S2-FIX #23: 5.0:1 (было #2E9E5B, 3.41) */
  /* бренд */
  --c-magenta-1: #EA4C6E;
  --c-magenta-2: #CC0E81;
  --c-magenta-hover: #B00B70;
  --grad-brand: linear-gradient(135deg, #EA4C6E, #CC0E81);
  --grad-line: linear-gradient(90deg, #EA4C6E, #CC0E81);
  /* полупрозрачности, тени, кольца */
  --a-ink-75: rgba(43,31,44,.75);
  --a-header-bg: rgba(244,239,233,.88);
  --ring-focus: 0 0 0 3px rgba(204,14,129,.85);  /* S2-FIX #24: кольцо фокуса ≥3:1 (было .25, 1.54:1) */
  --ring-error: 0 0 0 3px rgba(204,14,129,.45);
  --shadow-hover: 0 18px 40px rgba(43,31,44,.10);
  --shadow-hover-dark: 0 18px 40px rgba(43,31,44,.22);
  --shadow-segment: 0 2px 8px rgba(43,31,44,.12);
  /* шрифт */
  --font-sans: 'Humanist 521', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* радиусы */
  --r-card: 44px;
  --r-inner: 28px;
  --r-box: 24px;
  --r-row: 22px;
  --r-field: 18px;
  --r-seg: 14px;
  --r-check: 9px;
  --r-pill: 999px;
  /* сетка */
  --container: 1280px;
  --gutter: 32px;
  --section-gap: 72px;
  --grid-gap: 16px;
  --pad-card: 40px;
  /* анимация */
  --t-fast: all .2s ease;
  --t-hover: transform .35s ease, box-shadow .35s ease;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--c-magenta-2); text-decoration: none; }
a:hover { color: var(--c-magenta-hover); }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
svg { display: block; }
input, textarea, button, select { font-family: inherit; font-size: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only, .vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Примитивы ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: var(--section-gap) var(--gutter) 0; }
.section { scroll-margin-top: 90px; }
.rel { position: relative; }
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.wm { position: absolute; fill: rgba(255,255,255,.06); pointer-events: none; }
.wm--05 { fill: rgba(255,255,255,.05); }
.wm--16 { fill: rgba(255,255,255,.16); }
.wm--18 { fill: rgba(255,255,255,.18); }

.card { border-radius: var(--r-card); background: var(--c-surface); }
.card--dark { background: var(--c-ink); color: #fff; }
.card--pink { background: var(--c-surface-pink); }
.card--grad { background: var(--grad-brand); color: #fff; }
.card--clip { position: relative; overflow: hidden; }

.kicker { font-weight: 400; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-muted); }
.kicker--soft { color: var(--c-on-dark-soft); }
.kicker--white { color: rgba(255,255,255,.9); }

.btn {
  display: inline-block; font-weight: 700; font-size: 17px; color: #fff;
  background: var(--grad-brand); border: 0; border-radius: var(--r-pill); padding: 16px 28px;
  transition: filter .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { color: #fff; filter: brightness(1.06); }
.btn--ghost { font-weight: 400; background: rgba(255,255,255,.12); }
.btn--ghost:hover { filter: none; background: rgba(255,255,255,.2); }
.btn--white { color: var(--c-magenta-2); background: #fff; }
.btn--white:hover { color: var(--c-magenta-hover); filter: none; }
.btn--outline { font-weight: 400; background: transparent; border: 1.5px solid rgba(255,255,255,.6); padding: 15px 28px; }
.btn--outline:hover { filter: none; background: rgba(255,255,255,.12); }

/* ---------- Шапка (одна на все страницы) ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--a-header-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.header__inner {
  max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo { display: flex; align-items: center; gap: 12px; color: var(--c-text); }
.logo:hover { color: var(--c-text); }
.logo__tile {
  width: 44px; height: 44px; border-radius: 14px; background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.logo__tile svg { width: 22px; height: 20px; fill: #fff; }
.logo__text { font-weight: 700; font-size: 20px; line-height: 1; white-space: nowrap; }
.header__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav__link, .nav__back {
  font-weight: 400; font-size: 15px; color: var(--c-text); background: #fff;
  border-radius: var(--r-pill); padding: 11px 18px; white-space: nowrap; transition: background .2s ease;
}
.nav__link:hover, .nav__back:hover { background: var(--c-surface-pink); color: var(--c-text); }
.nav__cta {
  font-weight: 700; font-size: 15px; color: #fff; background: var(--grad-brand);
  border-radius: var(--r-pill); padding: 11px 20px; white-space: nowrap; transition: filter .2s ease;
}
.nav__cta:hover { color: #fff; filter: brightness(1.06); }

/* ---------- Футер (один на все страницы) ---------- */
.footer { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 32px; }
.footer__card {
  position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--c-ink); padding: 40px 44px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; color: #fff;
}
.footer__brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.footer__logo { display: flex; align-items: center; gap: 14px; }
.footer__logo-tile { width: 56px; height: 56px; border-radius: 18px; background: var(--grad-brand); display: flex; align-items: center; justify-content: center; flex: none; }
.footer__logo-tile svg { width: 26px; height: 24px; fill: #fff; }
.footer__logo-text { font-weight: 700; font-size: 24px; color: #fff; }
.footer__tagline { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--c-on-dark-soft); }
.footer__col { position: relative; }
.footer__mail { display: block; font-weight: 700; font-size: 20px; color: #fff; margin-top: 10px; }
.footer__mail:hover { color: var(--c-pink-text); }
.footer__phone { display: block; font-weight: 400; font-size: 16px; color: #fff; margin-top: 8px; }
.footer__phone:hover { color: var(--c-pink-text); }
.footer__vk {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 16px; color: #fff; margin-top: 12px;
  background: rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 9px 16px; transition: background .2s ease;
}
.footer__vk:hover { color: #fff; background: rgba(255,255,255,.18); }
.footer__links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; align-items: flex-start; }
.footer__links a { font-weight: 400; font-size: 16px; color: #fff; }
.footer__links a:hover { color: var(--c-pink-text); }
.footer__links a.is-accent { font-weight: 700; color: var(--c-pink-text); }
.footer__links a.is-accent:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-weight: 400; font-size: 13px; color: var(--c-text-muted); margin-top: 18px; padding: 0 8px; }
.footer__bottom a { display: inline-block; color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { color: var(--c-magenta-2); }

/* ---------- Фокус с клавиатуры (S2-FIX #24: видимое кольцо, контраст к белому 4.5:1) ---------- */
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* S2-FIX #1: сброс браузерных стилей fieldset/legend (форма заявки). Плавающий legend не «рендерится на рамке»
   и ведет себя как обычный блок внутри flex-контейнера. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { float: left; width: 100%; padding: 0; margin: 0; }

/* =====================================================================
   Адаптив общих частей. В макете media queries нет; правила по design_tokens.css § breakpoints.
   ===================================================================== */

/* ---------- Планшет: 768..1023 ---------- */
@media (max-width: 1023px) {
  :root { --gutter: 24px; }

  /* Шапка: логотип + действие в строке, пилюли разделов второй строкой (горизонтальный скролл при нехватке места) */
  .header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 12px var(--gutter) 10px; }
  .header__right { display: contents; }
  .nav__cta, .nav__back { grid-column: 2; grid-row: 1; }
  .nav {
    grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 calc(var(--gutter) + 12px) 0 var(--gutter);
    /* S2-FIX #3: подсказка о скролле пилюль: правый край плавно гаснет */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .section { scroll-margin-top: 130px; }

  .footer__card { grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; padding: 36px; }
}

/* ---------- Телефон: до 767 (390) ---------- */
@media (max-width: 767px) {
  :root { --gutter: 16px; --r-card: 32px; --pad-card: 24px; }

  /* S2-FIX #3: цели нажатия не ниже 40px */
  .nav__cta { padding: 11px 16px; font-size: 14px; min-height: 40px; }
  .nav__link, .nav__back { padding: 11px 16px; font-size: 14px; min-height: 40px; }
  .logo__text { font-size: 18px; }
  .logo__tile { width: 40px; height: 40px; border-radius: 12px; }

  .footer { padding: 32px var(--gutter) 24px; }
  .footer__card { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
  .footer__brand { gap: 18px; }
  .footer__logo-text { font-size: 22px; }
  .footer__links { gap: 10px; }
  .footer__links a { padding: 4px 0; }
  .footer__bottom { flex-direction: column; gap: 8px; padding: 0 4px; }
  .footer__bottom a { padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}