/* ==========================================================================
   SanDez Control — base.css
   Токены дизайна, сброс, базовая типографика.
   Любые цвета и отступы в других CSS-файлах только через var(--*).
   ========================================================================== */

/* ---------- @font-face: Clash Display + Onest (self-hosted) -------------- */
/* Self-hosted в /assets/fonts/. Suбсет-файлы с unicode-range — браузер
   качает ТОЛЬКО те .woff2, которые нужны для видимых глифов страницы.
   RU-страница грузит cyrillic (14KB) + Clash Display latin (29KB) ≈ 43KB.
   KZ-страница дополнительно cyrillic-ext (2KB) для ә/ғ/қ/ң/ө/ұ/ү/і.
   font-display: swap — текст виден сразу, шрифт подменяется после загрузки. */

/* Clash Display — только display (заголовки, крупные CTA). Latin-only:
   для кириллических глифов браузер автоматически переходит к следующему
   семейству в font-family (Onest). */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

/* Onest — body + кириллические заголовки. Четыре subset'а через unicode-range. */
@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Variable-cyrillic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Variable-cyrillic-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ---------- Токены (HEX fallback) ----------------------------------------- */

:root {
  /* Основные */
  --bg:          #FAF6F0;
  --bg-soft:     #F2ECE1;
  --bg-muted:    #EEE6D8;
  --bg-dark:     #1A1815;
  --ink:         #26221E;
  --ink-soft:    #6B6459;
  --ink-muted:   #A39B90;
  --border:      #E1DAD0;
  --border-soft: #EDE6DC;

  /* Акценты */
  --accent:       #EE5C34;  /* томатно-оранжевый CTA */
  --accent-hover: #DC4B25;
  --accent-soft:  #FBE5DC;
  --accent-ghost: rgba(238, 92, 52, 0.08);
  --trust:        #4E9A5C;  /* mint green — гарантии */
  --trust-soft:   #DDEDD9;
  --highlight:    #F0D568;

  /* WhatsApp бренд-зелёный — оставляем ТОЛЬКО для финального CTA («Контакты»)
     и фиксированной мобильной нижней панели. Это «официальные» точки,
     где зелёный WhatsApp-логотип уместен и узнаваем. */
  --wa-brand:     #25D366;
  --wa-brand-dk:  #128C7E;

  /* Бирюзовый CTA-цвет: используется во всех CTA, ведущих в WhatsApp
     (карточки услуг, калькулятор, DIY, мобильная нижняя панель). Лучше
     сочетается с акцентным оранжевым, чем кислотно-зелёный.
     • soft — мягкий бирюзовый фон под trust-блоки (replaces --trust-soft
       в местах, где раньше был мятный «гарантия»-зелёный). */
  --cta-teal:       #128C7E;
  --cta-teal-hover: #0D7062;
  --cta-teal-soft:  #DCEFEC;

  /* Semantic */
  --success: #3E9B50;
  --warning: #DBA22A;
  --error:   #D64A2E;

  /* Easing + durations */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    560ms;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(26, 24, 21, 0.04);
  --shadow-2: 0 6px 18px rgba(26, 24, 21, 0.06), 0 1px 3px rgba(26, 24, 21, 0.04);
  --shadow-3: 0 18px 48px rgba(26, 24, 21, 0.12), 0 4px 12px rgba(26, 24, 21, 0.05);
  --shadow-focus: 0 0 0 3px rgba(238, 92, 52, 0.25);

  /* Радиусы */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Шрифты */
  --font-display: 'Clash Display', 'Migra', 'Onest', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Onest', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Контейнер */
  --container-max: 1400px;
  --container-pad: clamp(20px, 4vw, 56px);

  /* Safe-area */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Mobile bottom bar высота (для padding-bottom на странице) */
  --m-bottom-bar-h: calc(64px + env(safe-area-inset-bottom, 0px));

  color-scheme: light;
}

/* Wide-gamut OKLCH для современных браузеров */
@supports (color: oklch(0 0 0)) {
  :root {
    --bg:          oklch(97% 0.008 80);
    --bg-soft:     oklch(94% 0.012 75);
    --bg-muted:    oklch(92% 0.014 75);
    --bg-dark:     oklch(16% 0.008 60);
    --ink:         oklch(20% 0.008 60);
    --ink-soft:    oklch(45% 0.010 60);
    --ink-muted:   oklch(65% 0.010 60);
    --border:      oklch(88% 0.010 75);
    --border-soft: oklch(93% 0.008 75);

    --accent:       oklch(65% 0.180 35);
    --accent-hover: oklch(60% 0.190 32);
    --accent-soft:  oklch(92% 0.040 35);
    --trust:        oklch(55% 0.120 150);
    --trust-soft:   oklch(93% 0.040 150);
    --highlight:    oklch(88% 0.160 95);
  }
}

/* ---------- Сброс ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* HTML-атрибут `hidden` ОБЯЗАН прятать элемент даже когда автор задал
   display: grid/flex/block. По умолчанию user-agent выставляет
   `display: none`, но любой author display перебивает его. !important —
   единственный честный способ гарантировать поведение `hidden` независимо
   от того, какие display-правила добавятся позже. */
[hidden] { display: none !important; }

/* Утилитарные <br> с показом по брейкпоинту: контролируемый перенос
   строки на нужном размере вьюпорта без хаков с font-size/width. */
.br-desktop { display: none; }
@media (min-width: 1024px) { .br-desktop { display: inline; } }

.br-tablet-up { display: none; }
@media (min-width: 640px) { .br-tablet-up { display: inline; } }

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hanging-punctuation: first last;
  overflow-x: clip;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1vw, 1rem);
  line-height: 1.55;
  font-weight: 400;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

svg { fill: currentColor; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button { cursor: pointer; }

/* touch-action: manipulation на всех интерактивных элементах отключает
   double-tap-to-zoom на мобильном — это: (1) убирает раздражающий зум при
   частых тапах по бургеру/логотипу и (2) снимает стандартную ~300 мс задержку
   click, из-за которой одиночный тап по логотипу на телефоне мог не
   срабатывать вовсе. Пинч-зум контента при этом остаётся доступен. */
a, button, [role="button"], summary, label {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

/* Focus ring рисуется через box-shadow и повторяет собственный border-radius
   элемента — поэтому здесь НЕ задаём border-radius, чтобы pill-кнопки
   (.header__menu-btn, .btn) не превращались в квадратные при фокусе. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}

ul, ol { list-style: none; }

figure, blockquote { margin: 0; }

table { border-collapse: collapse; }

/* iOS: не зумить при фокусе input если font-size < 16 */
input, textarea, select {
  font-size: max(16px, 1rem);
}

/* Visually hidden — для screen reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
  z-index: 9999;
  border-radius: var(--r-md);
}
.skip-link:focus { left: 8px; }

/* ---------- Типографика ---------------------------------------------------- */

.display-xl,
.display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-wrap: balance;
}

h3, h4 { letter-spacing: -0.018em; line-height: 1.2; }

.display-xl {
  font-size: clamp(2.5rem, 9vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.display {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.02;
}

h1 { font-size: clamp(1.75rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem);  line-height: 1.15; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 1.4vw, 1.375rem); }

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

em, i { font-style: italic; }

small { font-size: 0.875em; }

/* tabular цифры для денег / статистики */
.num, .price, time, [data-num] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Caption */
.caption {
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Ссылки в тексте */
.prose a,
a.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.prose a:hover,
a.text-link:hover {
  color: var(--accent);
  text-decoration-thickness: 3px;
}

/* Выделенное слово в заголовке (hand-drawn squiggle) */
.hl-squiggle {
  position: relative;
  white-space: nowrap;
}
.hl-squiggle::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.15em;
  height: 0.18em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' fill='none'><path d='M2 9 Q 25 3, 50 7 T 100 6 T 150 8 T 198 5' stroke='%23EE5C34' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  pointer-events: none;
  /* Стабилизируем squiggle от «дёргания» на мобильном скролле:
     (1) translateZ(0) — promote в отдельный compositor-слой, и SVG-фон
         перестаёт перерисовываться при каждом репэйнте родителя;
     (2) contain: paint — изоляция области перерисовки, repaints шапки
         адресной строки не тащат за собой пересчёт подчёркивания. */
  transform: translateZ(0);
  contain: paint;
}

/* ---------- Утилиты контейнера -------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: 1080px; }

.section {
  padding-block: clamp(56px, 8vw, 120px);
  position: relative;
}

.section--dark {
  background: var(--bg-dark);
  color: var(--bg);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--bg); }

.section--soft { background: var(--bg-soft); }

/* Grain / зерно на тёмных секциях */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Secton header */
.s-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(32px, 5vw, 64px);
  max-width: 900px;
}

.s-header__sub {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--ink-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Утилита для переноса фразы на отдельную строку на планшете+десктопе.
   Применяется точечно внутри .s-header__sub — читается как два этапа
   мысли (проблема → предложение), а не «каша» из одной длинной строки. */
.s-header__sub-break { display: inline; }
@media (min-width: 640px) {
  .s-header__sub-break { display: block; margin-top: 6px; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Save-data / slow connection: класс добавляется из JS */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Space between page and fixed bottom-bar на mobile */
@media (max-width: 767px) {
  body { padding-bottom: var(--m-bottom-bar-h); }
}