/* Шрифт — со своего сервера (быстрее и без передачи данных посетителей в Google). Один файл на все начертания. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-latin-wght-normal.woff2) format("woff2"); 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; }
/* Запасной шрифт подогнан по ширине под Manrope — пока грузится основной, текст не «прыгает» */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 102%; ascent-override: 104%; descent-override: 29%; line-gap-override: 0%; }
/* Базовые токены (общие для сайта и админки). Светлая мягкая тема, золото из логотипа — только на главных действиях. */
:root {
  /* Палитра СТО: задаём мы при настройке (data.js → theme), сервер подставляет её в страницу */
  --brand-rgb: 245, 197, 24; --brand: #f5c518; --brand-2: #ffd447; --brand-dark: #9a7000; --on-brand: #16130a;
  --mist: #eceff2;
  --paper: #ffffff;
  --soft: #f5f6f8;
  --ink: #1e2228;
  --graphite: #23272e;
  --slate: #6a707a;
  --line: #dde1e6;
  --honey: var(--brand);
  --honey-2: var(--brand-2);
  --honey-soft: #fff4d1;
  --honey-ink: var(--brand-dark);
  --ok: #1f9d5c;
  --bad: #d9473b;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --on-honey: var(--on-brand);
  --headbg: rgba(236, 239, 242, .86);
  --pop: #ffffff;
  color-scheme: light;
}
/* Тёмная тема: по системе или по выбору (theme.js ставит data-theme) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mist: #0d0e11; --paper: #16171b; --soft: #1e1f24; --ink: #efebe2; --graphite: #111215; --slate: #94918a; --line: rgba(255,255,255,.1); --honey: var(--brand); --honey-2: var(--brand-2); --honey-soft: rgba(var(--brand-rgb), .12); --honey-ink: var(--brand); --ok: #3fcf83; --bad: #ff6b5e; --headbg: rgba(13,14,17,.84); --pop: #23242a; color-scheme: dark; } }
:root[data-theme="dark"] { --mist: #0d0e11; --paper: #16171b; --soft: #1e1f24; --ink: #efebe2; --graphite: #111215; --slate: #94918a; --line: rgba(255,255,255,.1); --honey: var(--brand); --honey-2: var(--brand-2); --honey-soft: rgba(var(--brand-rgb), .12); --honey-ink: var(--brand); --ok: #3fcf83; --bad: #ff6b5e; --headbg: rgba(13,14,17,.84); --pop: #23242a; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; background: var(--mist); color: var(--ink); transition: background-color .3s, color .3s; font-family: var(--font); font-size: 17px; line-height: 1.55; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, iframe { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .7); outline-offset: 2px; }
.ic { width: 22px; height: 22px; flex: none; }

/* Кнопки */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; min-width: 0; max-width: 100%; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s, box-shadow .25s var(--ease), transform .2s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-honey { background: var(--honey); color: var(--on-honey); box-shadow: 0 6px 18px -8px rgba(var(--brand-rgb), .9); }
.btn-honey:hover { background: var(--honey-2); box-shadow: 0 10px 24px -8px rgba(var(--brand-rgb), .95); }
.btn-ink { background: var(--ink); color: var(--mist); }
.btn-ink:hover { opacity: .88; }
.btn-line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-sm { min-height: 44px; padding: 7px 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; flex: none; }
/* Переключатель темы — неприметный */
[data-theme-toggle] { width: 34px !important; min-height: 34px !important; padding: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: inherit; opacity: .5; transition: opacity .2s; }
[data-theme-toggle]:hover, [data-theme-toggle]:focus-visible { opacity: 1; transform: none; }
[data-theme-toggle] .ic { width: 18px; height: 18px; }

/* Поля с поднимающейся подписью */
.fl { position: relative; min-width: 0; }
.fl .input, .fl .select, .fl .textarea { padding-top: 22px; }
.fl > label { position: absolute; left: 16px; top: 15px; font-size: 16px; color: var(--slate); pointer-events: none; transform-origin: left top; transition: transform .2s var(--ease), color .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 52px); }
.fl.up > label, .fl .input:focus + label, .fl .textarea:focus + label, .fl .input:not(:placeholder-shown) + label, .fl .textarea:not(:placeholder-shown) + label { transform: translateY(-9px) scale(.78); color: var(--honey-ink); }
.fl .tick { position: absolute; right: 14px; top: 17px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; transform: scale(0); transition: transform .25s var(--ease); }
.fl .tick .ic { width: 14px; height: 14px; stroke-width: 3; }
.fl.ok .tick { transform: scale(1); }
.input, .select, .textarea { width: 100%; min-width: 0; min-height: 56px; padding: 14px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; outline: none; appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .25s var(--ease), background .2s; }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .22); }
.input.err { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(217, 71, 59, .12); animation: shake .35s; }
.textarea { min-height: 104px; resize: vertical; }
.select option { background: var(--pop); color: var(--ink); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236a707a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--slate); line-height: 1.45; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .cbox { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); background: var(--paper); flex: none; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.check .cbox .ic { width: 15px; height: 15px; stroke-width: 3; color: var(--on-honey); transform: scale(0); transition: transform .2s var(--ease); }
.check input:checked + .cbox { background: var(--honey); border-color: var(--honey); }
.check input:checked + .cbox .ic { transform: scale(1); }
.check input:focus-visible + .cbox { outline: 3px solid rgba(var(--brand-rgb), .7); outline-offset: 2px; }
.check a { color: var(--ink); }

/* Тост */
#toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); width: max-content; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 16px; background: var(--ink); color: var(--mist); font-weight: 500; font-size: 15px; box-shadow: 0 16px 40px -12px rgba(30, 34, 40, .5); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); z-index: 200; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { #toast { bottom: 32px; } }

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

/* Длинный текст никогда не вылезает: заголовки и подписи переносятся по словам */
h1, h2, h3, b, p, li, label, .chip { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }

/* Фоновый декор (Decor в common.js): строго за содержимым */
.deco-layer { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; color: var(--ink); }
.deco-layer svg, .deco-layer img { position: absolute; opacity: .08; }
.deco-layer img.dl { opacity: .05; filter: grayscale(1); }
/* скрытый текст для поисковиков и экранных дикторов */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* логотип вместо заголовка первого экрана (SITE.heroLogo) */
.hero h1.h1-logo { display: block; max-width: min(620px, 100%); -webkit-line-clamp: unset; }
.hero h1.h1-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)); }