/* ============================================================
   ПЗПР — Дизайн-система (токены, шрифты, reset, типографика)
   Источник токенов: промпт заказчика + README прототипа
   ============================================================ */

/* ---------- Шрифты (локально, assets/fonts/fonts.css) ---------- */
@import url('../assets/fonts/fonts.css');

/* ---------- Токены ---------- */
:root {
  /* Цвета */
  --color-bg:          #FFFFFF;
  --color-bg-light:    #F4F6F9;
  --color-dark:        #1E2530;
  --color-dark-alt:    #191F28;
  --color-steel:       #5B6770;
  --color-steel-light: #8A97A3;
  --color-blue:        #26A9E0;
  --color-blue-hover:  #1E90C4;
  --color-teal:        #00BFB3;
  --color-teal-hover:  #00A99E;

  --border:            #E0E4EB;
  --border-inner:      #EEF1F5;
  --border-dark:       #2C3540;
  --border-dark-2:     #3A4553;
  --input-dark:        #2A3441;
  --muted-on-dark:     #A6B0BA;

  /* Типографика */
  --font-heading: 'Exo 2', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  /* Раскладка */
  --container-width: 1280px;
  --container-pad:   40px;
  --section-padding: 90px 0;
  --radius:          0;
  --radius-pill:     999px;

  /* Тени */
  --shadow-card:    0 2px 10px rgba(30, 37, 48, .05);
  --shadow-product: 0 4px 16px rgba(30, 37, 48, .06);
  --shadow-hover:   0 8px 24px rgba(30, 37, 48, .12);
  --shadow-hover-2: 0 10px 28px rgba(30, 37, 48, .13);

  /* Прочее */
  --transition: .15s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-dark);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-blue-hover); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; color: var(--color-dark); }
p { margin: 0; }
ul, ol { margin: 0; }
::selection { background: var(--color-blue); color: #fff; }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* ---------- Раскладка ---------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.section { padding-top: 90px; padding-bottom: 90px; }
.section--light { background: var(--color-bg-light); }
.section--bordered { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--border-bottom { border-bottom: 1px solid var(--border); }
.section--pb-40 { padding-bottom: 35px; }
.section--pt-40 { padding-top: 35px; }
main { display: block; }

/* ---------- Типографика ---------- */
.h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12;
  letter-spacing: -1px; color: var(--color-dark);
}
.h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(28px, 3.5vw, 38px); line-height: 1.08;
  color: var(--color-dark); margin: 0;
}
.h3 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.25; }
.text-blue { color: var(--color-blue); }
.text-teal { color: var(--color-teal); }
.lead { font-size: 18px; line-height: 1.6; color: var(--color-steel); }

/* Kicker — надсекционный лейбл с голубой чертой */
.kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.kicker::before {
  content: ""; width: 24px; height: 2px; background: var(--color-blue); flex-shrink: 0;
}
.kicker span {
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: 2.5px; color: var(--color-blue); text-transform: uppercase;
}

/* Плейсхолдер незаполненных бизнес-данных (для заказчика) */
.tbd {
  background: #FFF3CD; color: #8A6D1B; padding: 0 6px;
  border-radius: 3px; font-size: .9em; font-style: italic;
}

/* Утилиты */
.icon { display: inline-block; vertical-align: middle; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}