/* 26 MAISI — вариант D. Подключается ПОСЛЕ landing.css, переопределяет только
   перечисленное в задании: типографический hero, тёплая тема, кнопки-пилюли,
   CTA «за порогом», hover-свечение карточек, антиква в h2. */

/* ---------- 1. тёплая тема: токены ---------- */
[data-variant="d"] {
  --bg-0: #F4EFE7;
  --bg-1: #EBE4D8;
  --bg-2: #1E1B17;
  --bg-3: #141210;
  --fg-0: #1E1B17;
  --fg-2: #6B6259;
  --accent-warm: #B5562F;
  --line-1: rgba(30,27,23,.14);
}

/* тёмные секции (проекты, контакты, футер) держим тёмными через bg-2/bg-3 —
   в базовой теме они читали bg-0/bg-1, которые в варианте D стали кремовыми */
[data-variant="d"] .section--dark { background: var(--bg-2); color: #fff; }
[data-variant="d"] .section--light { background: var(--bg-1); color: var(--fg-0); }
[data-variant="d"] .section--footer,
[data-variant="d"] .footer { background: var(--bg-3); color: #fff; }
[data-variant="d"] .form-panel { background: var(--bg-2); }
[data-variant="d"] .ctaband { background: var(--bg-1); color: var(--fg-0); }

/* полоса цифр: фон bg-0, цифры accent-warm */
[data-variant="d"] .stats { background: var(--bg-0); }
[data-variant="d"] .stat__n { color: var(--accent-warm); }

/* точечное восстановление контраста там, где элементы жёстко читают fg-0/fg-2
   (в базовой теме это «белый на тёмном», в D — «тёмный на светлом») и при этом
   остаются на тёмной поверхности */
[data-variant="d"] .logo,
[data-variant="d"] .hbtn--secondary,
[data-variant="d"] .hbtn--lang,
[data-variant="d"] .drawer a,
[data-variant="d"] .drawer button,
[data-variant="d"] .card,
[data-variant="d"] .step__n,
[data-variant="d"] .field__input,
[data-variant="d"] .field--phone input,
[data-variant="d"] .note a,
[data-variant="d"] .sticky-bar .bar-call,
[data-variant="d"] .toast,
[data-variant="d"] .hero__stack {
  color: #fff;
}
[data-variant="d"] .note,
[data-variant="d"] .field__label,
[data-variant="d"] .footer__copy {
  color: rgba(255,255,255,.6);
}
[data-variant="d"] .field__input::placeholder { color: rgba(255,255,255,.4); }

/* ---------- 2. типографический hero ---------- */
[data-variant="d"] .hero__stack {
  left: 64px;
  right: 24px;
  top: auto;
  bottom: 72px;
  max-width: 900px;
}
[data-variant="d"] .hero__typo {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
[data-variant="d"] .hero__num {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(160px, 26vw, 380px);
  line-height: .85;
  color: var(--fg-on-photo, #fff);
}
[data-variant="d"] .hero__word {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-on-photo, #fff);
}
[data-variant="d"] .hero__sub {
  margin: 14px 0 0;
  font: 400 18px/1.4 var(--font-family-body);
  color: rgba(255,255,255,.82);
  max-width: 60ch;
}
[data-variant="d"] .hero__ctas {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

/* ---------- 3. пилюли ---------- */
[data-variant="d"] .hbtn,
[data-variant="d"] .ghost,
[data-variant="d"] .ghost-light,
[data-variant="d"] .hero__cta,
[data-variant="d"] .submit,
[data-variant="d"] .sticky-bar a {
  border-radius: 999px;
}
[data-variant="d"] .hero__cta,
[data-variant="d"] .ghost-light,
[data-variant="d"] .submit,
[data-variant="d"] .form-ok .ghost {
  height: 52px;
  padding: 0 28px;
  width: auto;
  max-width: none;
}
[data-variant="d"] .hero__cta {
  margin: 0;
}
[data-variant="d"] .hero__cta--primary,
[data-variant="d"] .ghost-light,
[data-variant="d"] .submit {
  background: var(--accent-warm);
  color: #fff;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 260ms ease, border-color 260ms ease;
}
[data-variant="d"] .hero__cta--primary:hover,
[data-variant="d"] .ghost-light:hover,
[data-variant="d"] .submit:hover {
  background: color-mix(in oklab, var(--accent-warm) 92%, black);
  color: #fff;
  border-color: transparent;
}
[data-variant="d"] .hero__cta--secondary,
[data-variant="d"] .form-ok .ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 260ms ease, border-color 260ms ease;
}
[data-variant="d"] .hero__cta--secondary:hover,
[data-variant="d"] .form-ok .ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}
/* secondary-контур на светлой поверхности (шапка «Связаться») */
[data-variant="d"] .hbtn--secondary {
  border: 1px solid rgba(255,255,255,.6);
  background: transparent;
}
[data-variant="d"] .hbtn--primary {
  background: var(--accent-warm);
  color: #fff;
}
[data-variant="d"] .hbtn--primary:hover {
  background: color-mix(in oklab, var(--accent-warm) 92%, black);
}

/* ---------- 4. hover-свечение карточек проектов/типов ---------- */
[data-variant="d"] .card {
  transition: box-shadow 260ms ease;
}
[data-variant="d"] .card:hover {
  box-shadow: 0 0 0 1px var(--accent-warm), 0 0 24px rgba(181,86,47,.35);
}

/* ---------- 5. заголовки секций — антиква ---------- */
[data-variant="d"] .h2,
[data-variant="d"] .ctaband h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: normal;
}
[data-variant="d"] .section--dark .h2,
[data-variant="d"] .footer .h2 {
  color: #fff;
}
[data-variant="d"] .section--light .h2,
[data-variant="d"] .ctaband h2 {
  color: var(--fg-0);
}

/* ---------- 6. mobile ≤ 959px ---------- */
@media (max-width: 959px) {
  [data-variant="d"] .hero__stack {
    left: 24px;
    right: 24px;
    bottom: 96px;
    top: auto;
  }
  [data-variant="d"] .hero__num { font-size: 160px; }
  [data-variant="d"] .hero__ctas {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  [data-variant="d"] .hero__cta,
  [data-variant="d"] .ghost-light {
    width: 100%;
  }
  [data-variant="d"] .h2,
  [data-variant="d"] .ctaband h2 {
    font-size: 32px;
    line-height: 1.1;
  }
}