/* яременко. — стили сайта. Токены взяты из брендбука без изменений. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --font-sans: "Space Grotesk", "Arimo", Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  --charcoal: #141210;
  --panel: #1B1815;
  --divider: #2B2724;
  --smoke: #3A342E;
  --bone: #E9E4DC;
  --terracotta: #B4552D;
  --terracotta-hover: #D0703F;
  --terracotta-press: #8E3F1D;
  --ink-on-accent: #191510;
  --muted: #A8A29A;
  --muted-2: #8A8378;
  --muted-3: #6E6862;

  --surface: var(--charcoal);
  --surface-panel: var(--panel);
  --border-hairline: var(--smoke);
  --border-divider: var(--divider);
  --text-strong: var(--bone);
  --text-body: #C3BCB2;
  --text-muted: var(--muted-2);

  --h1-size: clamp(36px, 5.6vw, 76px);
  --h2-size: clamp(26px, 3.2vw, 44px);
  --h3-size: 20px;

  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px;
  --motion: 180ms;
  --ease: cubic-bezier(.2,.6,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--motion) var(--ease); }
a:hover { color: var(--bone); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { max-width: 1184px; margin: 0 auto; padding: 0 var(--s-4); }
.rule { border-top: 1px solid var(--border-divider); }

/* Типографика */
h1 { font-size: var(--h1-size); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
h2 { font-size: var(--h2-size); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 22ch; text-wrap: balance; }
h3 { font-size: var(--h3-size); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
p { color: var(--text-body); max-width: 62ch; text-wrap: pretty; }
.lead { font-size: 18px; }
.lbl {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.accent { color: var(--terracotta); }
.num { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }

/* Шапка */
.site-header { border-bottom: 1px solid var(--border-divider); position: sticky; top: 0; background: var(--surface); z-index: 10; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: 18px; padding-bottom: 18px; }
.logo { font-size: 22px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--bone); white-space: nowrap; }
.logo i { font-style: normal; color: var(--terracotta); }
.nav { display: flex; align-items: center; gap: var(--s-3); }
.nav a { padding: 6px 0; }
.nav a[aria-current="page"] { color: var(--bone); }

/* Кнопки */
.btn {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  background: var(--terracotta); color: var(--ink-on-accent);
  border: 1px solid var(--terracotta); padding: 16px 24px; cursor: pointer;
  transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease), color var(--motion) var(--ease);
}
.btn:hover { background: var(--terracotta-press); border-color: var(--terracotta-press); color: var(--ink-on-accent); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--border-hairline); }
.btn-ghost:hover { background: transparent; border-color: var(--bone); color: var(--bone); }
.btn[disabled] { opacity: 1; background: var(--smoke); border-color: var(--smoke); color: var(--muted-2); cursor: default; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }

/* Секции */
section { padding: var(--s-7) 0; }
.sec-head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
.sec-head .lbl { display: block; }

/* Первый экран */
.hero { padding: var(--s-7) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-6); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.hero h1 { max-width: 12ch; }
.hero-art { border: 1px solid var(--border-divider); background: var(--surface-panel); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-divider); margin-top: var(--s-7); }
.stats > div { padding: var(--s-3) 0; }
.stats > div + div { border-left: 1px solid var(--border-divider); padding-left: var(--s-3); }
.stats .lbl { display: block; margin-top: 6px; }

/* Плиты: сетка с зазором 2px на фоне цвета разделителя */
.plates { display: grid; gap: 2px; background: var(--border-divider); border: 1px solid var(--border-divider); }
.plates > * { background: var(--surface); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.plates.panel > * { background: var(--surface-panel); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plates p { font-size: 15px; }
.plates .push { margin-top: auto; padding-top: var(--s-2); }

/* Карточка услуги на главной */
.svc-card { transition: background var(--motion) var(--ease); }
a.svc-card:hover { background: var(--surface-panel); }
.svc-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: var(--s-1); }
.svc-meta { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; border-top: 1px solid var(--border-divider); padding-top: var(--s-2); }

/* Шаги */
.step-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--text-muted); }

/* Списки с точкой */
.dots li { position: relative; padding-left: 20px; color: var(--text-body); font-size: 15px; }
.dots li + li { margin-top: 10px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 999px; background: var(--muted-3); }

/* Тарифы */
.tier .price { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.tier .price small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-left: 6px; }
.tier .term { border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); padding: 12px 0; }

/* Блок услуги на странице услуг */
.svc { padding: var(--s-7) 0; border-top: 1px solid var(--border-divider); }
.svc-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-6); align-items: start; margin-bottom: var(--s-5); }
.svc-top .copy { display: flex; flex-direction: column; gap: var(--s-3); }
.svc-top img { border: 1px solid var(--border-divider); background: var(--surface-panel); width: 100%; }
.anchors { display: flex; flex-wrap: wrap; gap: 10px var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); margin-top: var(--s-5); }

/* FAQ */
.faq details { border-top: 1px solid var(--border-divider); }
.faq details:last-child { border-bottom: 1px solid var(--border-divider); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-3) 0; display: flex; justify-content: space-between; gap: var(--s-3); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-weight: 400; color: var(--text-muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--s-3); }

/* Финальный призыв */
.final { border-top: 1px solid var(--border-divider); }
.final h2 { max-width: 18ch; font-size: clamp(30px, 4.4vw, 60px); }
.final .inner { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }

/* Подвал */
.site-footer { border-top: 1px solid var(--border-divider); padding: var(--s-5) 0 var(--s-6); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.site-footer .col { display: flex; flex-direction: column; gap: 10px; }
.mark { font-size: 28px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.mark i { font-style: normal; color: var(--terracotta); }

/* Бриф */
.brief-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.picker { display: grid; gap: 2px; background: var(--border-divider); border: 1px solid var(--border-divider); position: sticky; top: 92px; }
.picker button {
  font: inherit; text-align: left; background: var(--surface); color: var(--text-body); border: 0; cursor: pointer;
  padding: 16px 20px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease);
}
.picker button:hover { color: var(--bone); background: var(--surface-panel); }
.picker button[aria-pressed="true"] { background: var(--surface-panel); color: var(--bone); font-weight: 700; }
.picker button span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--text-muted); font-weight: 500; }
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form fieldset { border: 0; border-top: 1px solid var(--border-divider); margin: 0; padding: var(--s-4) 0 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.form legend { padding: 0; float: left; width: 100%; margin-bottom: var(--s-1); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .field > .q { font-size: 15px; color: var(--bone); font-weight: 500; }
.field .hint { font-size: 13px; color: var(--text-muted); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea, .field select {
  font: inherit; font-size: 16px; color: var(--bone); background: var(--surface-panel);
  border: 1px solid var(--border-hairline); border-radius: 0; padding: 13px 14px; width: 100%;
  transition: border-color var(--motion) var(--ease); appearance: none; -webkit-appearance: none;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--bone); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-3); }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted-2) 50%), linear-gradient(135deg, var(--muted-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { cursor: pointer; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: block; font-size: 14px; color: var(--text-body); border: 1px solid var(--border-hairline); padding: 9px 14px; transition: border-color var(--motion) var(--ease), color var(--motion) var(--ease), background var(--motion) var(--ease); }
.choices label:hover span { color: var(--bone); border-color: var(--muted-2); }
.choices input:checked + span { background: var(--bone); border-color: var(--bone); color: var(--charcoal); }
.choices input:focus-visible + span { outline: 1px solid var(--bone); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-body); cursor: pointer; }
.consent input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--bone); flex: none; }
.consent a { color: var(--bone); border-bottom: 1px solid var(--border-hairline); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { border: 1px solid var(--border-hairline); padding: var(--s-3); display: none; flex-direction: column; gap: 10px; }
.form-note.show { display: flex; }
.form-note h3 { font-size: 20px; }
.err { color: var(--bone); font-size: 13px; font-family: var(--font-mono); letter-spacing: .04em; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--bone); }

/* Текстовые страницы */
.prose { display: flex; flex-direction: column; gap: var(--s-3); max-width: 70ch; }
.prose h2 { font-size: 24px; max-width: none; margin-top: var(--s-3); }
.prose a { color: var(--bone); border-bottom: 1px solid var(--border-hairline); }

/* Пример диалога на первом экране */
.demo { display: flex; flex-direction: column; }
.demo-head, .demo-foot { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; padding: 14px var(--s-3); }
.demo-head { border-bottom: 1px solid var(--border-divider); }
.demo-foot { border-top: 1px solid var(--border-divider); margin-top: auto; }
.demo-row { padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border-divider); }
.demo-row:last-of-type { border-bottom: 0; }
.demo-row p { font-size: 15px; line-height: 1.5; color: var(--text-body); max-width: none; }
.demo-row.is-agent { text-align: right; align-items: flex-end; }
.demo-row.is-agent p { color: var(--bone); }

/* Планшет и телефон */
@media (max-width: 960px) {
  .hero-grid, .svc-top, .brief-layout { grid-template-columns: minmax(0, 1fr); }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  section, .svc { padding: var(--s-6) 0; }
  .hero { padding-top: var(--s-6); }
  .stats { margin-top: var(--s-6); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--s-2); }
  .cols-2, .cols-3, .cols-4, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .plates > * { padding: var(--s-3); }
  .nav { gap: 14px; }
  .nav .hide-s { display: none; }
  .lbl { letter-spacing: .12em; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-divider); }
  .sec-head { margin-bottom: var(--s-5); }
  .btn { padding: 15px 20px; }
  .faq summary { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.picker button b { font-weight: inherit; }