/* Маркетосы — основа сайта: токены брендбука (07_МАРКЕТИНГ/_ЗНАНИЯ/Брендбук/brand-tokens.css) + компоненты.
   Отступления от брендбука — ради правил QA дизайн-цеха: текст кнопок 16 px (в брендбуке 14), розовая кнопка — только
   крупная (белый на #E83E67 — 3,95:1, норма для обычного текста 4,5:1, для крупного жирного — 3:1). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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;
}

:root {
  --purple-900: #220D3B; --purple-800: #3B1762; --purple-700: #5B2A8A; --purple-600: #7B3DAF; --purple-500: #9B59C5;
  --purple-400: #B47FD4; --purple-300: #C89FE0; --purple-200: #DEC5EE; --purple-100: #EFE4FA; --purple-50: #FAF5FF;
  --pink-800: #C01D4A; --pink-700: #E03060; --pink-600: #E83E67; --pink-500: #F06090; --pink-100: #FCE7EE; --pink-50: #FFF0F4;
  --neutral-900: #1A1625; --neutral-800: #2D2840; --neutral-700: #4A4560; --neutral-600: #6B6780; --neutral-500: #9490A0;
  --neutral-300: #D4D2DC; --neutral-200: #E8E6EF; --neutral-100: #F5F4F8; --neutral-0: #FFFFFF;

  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-primary: var(--purple-500);
  --color-primary-dark: var(--purple-700);
  --color-cta: var(--pink-600);
  --color-cta-dark: var(--pink-800);
  --color-border: var(--neutral-300);
  --color-bg: var(--neutral-0);
  --color-bg-subtle: var(--neutral-100);
  --color-surface: var(--purple-50);
  --color-surface-brand: var(--purple-100);
  --color-success: #117A42; --color-success-bg: #EDFAF3;
  --color-dark: #120E19; --color-dark-card: var(--neutral-900); --color-dark-line: var(--neutral-800);
  --gradient-brand: linear-gradient(90deg, var(--pink-600) 0%, var(--purple-500) 100%);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-btn: 10px; --radius-input: 12px; --radius-card: 16px; --radius-card-lg: 20px; --radius-full: 9999px;
  --shadow-md: 0 4px 12px rgba(26, 22, 37, .10);
  --shadow-lg: 0 8px 24px rgba(26, 22, 37, .12);
  --shadow-brand: 0 8px 24px rgba(155, 89, 197, .25);
  --shadow-cta: 0 8px 24px rgba(232, 62, 103, .30);
  --ease: .2s ease;
  --container: 1280px;
  --pad: 80px;
  --section: 80px;
}
@media (max-width: 1024px) { :root { --pad: 48px; } }
@media (max-width: 768px) { :root { --pad: 24px; --section: 56px; } }
@media (max-width: 480px) { :root { --pad: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.6 var(--font); color: var(--color-text); background: var(--color-bg); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary-dark); text-underline-offset: 3px; }
a:hover { color: var(--color-primary); }
:focus-visible { outline: 3px solid var(--purple-300); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--section) 0; }
.section--subtle { background: var(--color-bg-subtle); }
.section--brand { background: var(--color-surface-brand); }
.section--dark { background: var(--color-dark); color: var(--neutral-0); }
.section--dark .muted { color: var(--neutral-500); }

/* Типографика: размеры брендбука на десктопе, на 390 — H1 не мельче 28 px (QA, п. 12) */
.display { font-size: clamp(36px, 6vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.h1 { font-size: clamp(30px, 4.4vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -.005em; }
.h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 700; line-height: 1.2; }
.h3 { font-size: clamp(21px, 2.6vw, 24px); font-weight: 600; line-height: 1.25; }
.h4 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.lead { font-size: 18px; line-height: 1.6; }
.small { font-size: 14px; line-height: 1.5; }
.label { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.muted { color: var(--color-text-muted); }
.accent { color: var(--color-primary); }
.accent-cta { color: var(--color-cta); }
.gradient-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-btn);
  font: 600 16px/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn--cta { background: var(--color-cta); color: #fff; min-height: 56px; padding: 0 30px; font-size: 19px; font-weight: 700; }
.btn--cta:hover { background: var(--color-cta-dark); color: #fff; box-shadow: var(--shadow-cta); }
.btn--gradient { background: var(--gradient-brand); color: #fff; min-height: 56px; padding: 0 30px; font-size: 19px; font-weight: 700; }
.btn--gradient:hover { color: #fff; box-shadow: var(--shadow-brand); }
.btn--secondary { background: #fff; color: var(--color-primary-dark); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-surface-brand); color: var(--color-primary-dark); }
.btn--ghost { background: var(--color-surface); color: var(--color-primary-dark); }
.btn--ghost:hover { background: var(--color-surface-brand); color: var(--color-primary-dark); }
.btn--outline-dark { background: transparent; color: var(--purple-300); border-color: var(--purple-500); }
.btn--outline-dark:hover { background: var(--color-dark-line); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.btn--lg { min-height: 56px; padding: 0 30px; }

/* Бейджи */
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge--purple { background: var(--color-surface-brand); color: var(--color-primary-dark); }
.badge--brand { background: var(--color-primary); color: #fff; }
.badge--pink { background: var(--pink-100); color: var(--pink-800); }
.badge--green { background: var(--color-success-bg); color: var(--color-success); }
.badge--dark { background: var(--neutral-900); color: #fff; }

/* Поля */
.field { display: grid; gap: 6px; }
.field__label { font-size: 14px; font-weight: 600; }
.input {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: #fff; font: 400 16px var(--font); color: var(--color-text); transition: border-color var(--ease), box-shadow var(--ease);
}
.input::placeholder { color: var(--neutral-500); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.input--error { border-color: var(--color-cta); }
.field__error { font-size: 14px; color: var(--pink-800); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--color-border);
  border-radius: 5px; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color var(--ease); }
.check input:checked { background-color: var(--color-primary); border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Карточки */
.card { background: #fff; border: 1px solid var(--color-surface-brand); border-radius: var(--radius-card); padding: 24px; }
.card--hover { transition: box-shadow var(--ease), transform var(--ease); }
.card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card--brand { background: var(--color-surface); border-color: var(--purple-300); }
.card--dark { position: relative; overflow: hidden; background: var(--color-dark-card); border-color: var(--color-dark-line); color: #fff; }
.card--dark::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gradient-brand); }

.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

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