/* Тема сайта: тёплая «бумага и ценник» — янтарный акцент, тёмная грифельная шапка,
   шрифт Manrope. Палитра своя: ни одна из сетей (зелёный X5, красный Магнит, синий Ozon,
   фиолетовый WB) в акценте не узнаётся. */
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-cyr.woff2') format('woff2'); font-weight: 400 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-lat.woff2') format('woff2'); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212; }

:root {
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, Consolas, 'Liberation Mono', monospace;
  --gut: clamp(20px, 3.2vw, 76px);

  --bg: #ffffff;
  --surface: #ffffff;
  --tint: #f7f4ee;
  --ink: #221f18;
  --dim: #6e675a;
  --line: #e6e0d4;
  --line-2: #f0ece2;

  --accent: #b45309;
  --accent-h: #92400e;
  --accent-soft: #faf0e2;
  --on-accent: #ffffff;
  --link: #92400e;
  --link-h: #b45309;

  --ok: #23714b;
  --ok-bg: #e9f4ec;
  --ok-line: #bcdcc6;
  --bad: #b03a2b;
  --bad-bg: #fbeeeb;
  --warn: #8a5a12;
  --warn-bg: #fbf2e2;

  --field-bg: #ffffff;
  --field-line: #ddd5c6;
  --chip-bg: #f4f0e7;
  --mark: #ffe8a3;
  --track: #ece7db;
  --opt-bg: #faf8f3;
  --opt-line: #e6e0d4;
  --score-bg: #f4f0e7;

  /* Шапка тёмная, «грифельная доска» подсобки — главное визуальное отличие от родственного каркаса */
  --hdr-bg: rgba(30, 27, 20, .96);
  --hdr-line: rgba(255, 255, 255, .08);
  --hdr-ink: #f5f1e8;
  --hdr-dim: #b3ab99;
  --hdr-active: #f5b04c;

  --foot-bg: #1e1b14;
  --foot-ink: #efe9dc;
  --foot-dim: #a99f8a;
  --foot-active: #f5b04c;
  --foot-line: rgba(255,255,255,.13);

  --tile-ink: #ffffff;
  --tile-ic-bg: rgba(255,255,255,.13);
  --tile-ic: #ffffff;

  --r-block: 14px;
  --r-ctl: 10px;
  --r-tile: 50%;
  --r-chip: 999px;
  --r-mark: 9px;
  --shadow-lg: 0 18px 50px -24px rgba(64, 47, 15, .45);
}

.hdr { backdrop-filter: saturate(140%) blur(8px); }
/* На тёмной шапке акцентная плашка логотипа остаётся янтарной, подпись — светлой */
.logo em { color: var(--hdr-dim); }

.sec--tint { background: var(--tint); }
.cat { box-shadow: 0 1px 2px rgba(34,31,24,.04); }
.cat:hover { box-shadow: 0 10px 26px -18px rgba(64,47,15,.5); }
.logo__mark { border-radius: 9px; }

/* Выделение текста и каретка — из палитры, не браузерные */
::selection { background: #ffe1b0; color: #221f18; }
input, textarea { caret-color: var(--accent); }

/* ---------- Первый экран: тёплый светлый, поиск слева, коллаж справа ---------- */
.hero { background: linear-gradient(180deg, #f8f4ec 0%, #fbf8f2 62%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 72px); padding-block: clamp(40px, 5vw, 76px) clamp(28px, 3vw, 44px); }
.hero h1 { text-wrap: balance; letter-spacing: -.03em; }
/* Подсветка в заголовке — «жёлтый ценник»: плашка, а не просто цвет */
.hero h1 .hl { color: inherit; background: linear-gradient(177deg, #ffdf96 0%, #ffd070 100%); padding: 0 .18em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .lead { max-width: 46ch; }
.hero .hsearch { margin-bottom: 20px; }
.hero .hsearch input { box-shadow: 0 12px 34px -22px rgba(64, 47, 15, .5); }
.hero__cta { margin-top: 0; }
.hero__hint { margin: 16px 0 0; font-size: .88rem; color: var(--dim); }

/* Коллаж: крупный кадр и второй поверх него со сдвигом */
.shots { position: relative; padding: 0 0 46px 0; }
.shots__a { display: block; width: 88%; margin-left: auto; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 32px 70px -38px rgba(56, 42, 14, .55); }
.shots__b { position: absolute; left: 0; bottom: 0; width: 46%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 6px solid var(--bg); box-shadow: 0 26px 52px -30px rgba(56, 42, 14, .5); }

/* Полоса сетей во всю ширину под первым экраном */
.strip { border-top: 1px solid var(--line); background: rgba(255,255,255,.72); }
.strip__in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.strip__i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 6px 18px; text-align: center; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line-2); overflow: hidden;
  transition: background-color .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1); }
.strip__i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.strip__i:hover::after, .strip__i:focus-visible::after { transform: scaleX(1); }
.strip__ic { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.strip__i:hover .strip__ic { transform: translateY(-2px) scale(1.08); }
.strip__i:hover { transform: translateY(-1px); }
.strip__i:last-child { border-right: 0; }
.strip__i:hover { background: #fff; color: var(--ink); }
.strip__i.is-on { background: #fff; }
.strip__i.is-on::after { transform: scaleX(1); }
.strip__ic { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); }
.strip__ic svg { width: 30px; height: 30px; }
.strip__t { font-size: .82rem; line-height: 1.2; font-weight: 500; }
.strip__n { font-size: .74rem; color: var(--dim); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .strip__in { grid-template-columns: repeat(3, 1fr); }
  .strip__i { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .strip__i:nth-child(3n) { border-right: 0; }
  .strip__t { font-size: .76rem; }
}

/* Планшеты: коллаж уходит под текст, колонка одна */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero .lead { max-width: none; }
}

/* До 900px фотография уходит тёмным фоном всего первого экрана */
@media (max-width: 900px) {
  .shots { display: none; }
  .hero { position: relative; isolation: isolate; background: #241f15; }
  .hero::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: #241f15 var(--hero-bg, none) center / cover no-repeat;
  }
  .hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(28,23,13,.6) 0%, rgba(28,23,13,.8) 55%, rgba(28,23,13,.92) 100%);
  }
  .hero__grid { padding-block: 34px 30px; }
  .hero h1 { color: #fff; }
  .hero h1 .hl { color: #221f18; }
  .hero .lead { color: rgba(245,240,230,.88); }
  .hero__hint { color: rgba(245,240,230,.72); }
  .hero .hsearch input { background: #fff; border-color: transparent; }
  .hero .btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .strip { background: #fff; }
}

/* Карточка сети с фотографией: снимок на всю площадь, тёплое затемнение, текст белый */
.cat--pic { border-color: transparent; color: #fff; }
.cat--pic::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: #2b2418 var(--cat-img, none) center / cover no-repeat;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.cat--pic::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(175deg, rgba(34,27,15,.5) 0%, rgba(34,27,15,.8) 42%, rgba(34,27,15,.93) 100%);
}
.cat--pic:hover { color: #fff; box-shadow: 0 24px 50px -30px rgba(34,27,15,.7); }
.cat--pic:hover::before { transform: scale(1.05); }
.cat--pic .cat__ic { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.cat--pic .cat__t { color: #fff; text-shadow: 0 1px 12px rgba(26,20,10,.5); }
.cat--pic .cat__d { color: rgba(246,241,232,.9); }
.cat--pic .cat__n { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .cat--pic::before { transition: none; } .cat--pic:hover::before { transform: none; } }

/* ---------- Темы вопросов на главной: плашки-«ценники» ---------- */
.ttags { display: flex; flex-wrap: wrap; gap: 10px; }
.ttag { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: border-color .18s ease, background-color .18s ease, transform .22s cubic-bezier(.16,1,.3,1); }
.ttag span { font-weight: 500; font-size: .8rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.ttag:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }

/* Сети, в тестах которых встречается вопрос */
.qa__chains { font-size: .88rem; color: var(--dim); }