/* ============================================================
   БРЕНД v4 «ЗЕЛЁНЫЙ СВЕТ»
   Слой поверх прежней системы. Здесь перекрыто всё, что в base.css
   и выше было прописано цветами старой тёмной темы.
   Главное правило: огонёк один на экран. Зелёный текстом — только
   #067647 (--acc); яркий #12B76A — огонёк и заливки с графитовым текстом.
   ============================================================ */

/* ---------- огонёк: мягкое мигание, как индикатор на приборе ---------- */
@keyframes go-blink {
  0%, 100% { opacity: 1;   box-shadow: 0 0 10px rgba(18, 183, 106, .75); }
  50%      { opacity: .28; box-shadow: 0 0 2px rgba(18, 183, 106, .2); }
}
.go-light, .tagline b {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--go);
  box-shadow: var(--go-glow);
  animation: go-blink 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .go-light, .tagline b { animation: none; opacity: 1; }
}
/* второй огонёк на первом экране не нужен */
.card .dot { display: none; }

/* ---------- база ---------- */
body { font-size: 17px; letter-spacing: -.01em; background: var(--void); }
::selection { background: var(--go-soft); color: var(--ink); }

/* ---------- заголовки: крупно, плотно, двухтонно ---------- */
.d-1 { font-weight: 700; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.d-2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.04em; }
.d-3 { font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.copy h1 { max-width: 15ch; }
.copy h1 span { color: var(--muted); font-weight: 700; }
.page-hero h1, .not-found h1 { font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.045em; }
.section-heading h2, .cta-band h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.04em; }
.seo-copy h2, .case-body h2, .legal-content h2, .media-copy h2 { font-weight: 700; letter-spacing: -.03em; }
.lede, .page-lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--muted); letter-spacing: -.015em; }

/* подписи-надстрочники: зелёные чернила, без капса */
.mono, .section-kicker, .eyebrow {
  font: 600 14px/1.3 var(--body); letter-spacing: -.005em; text-transform: none; color: var(--acc);
}
/* мелкие метки остаются капсом, но без «машинописной» разрядки */
.card .k, .chip, .road .k, .flow .n, th, .calc-hint, .calc-formats b, .calc-field label,
.calc-price span, .calc-compare-title, .compare-table th, .card-number, .price-label,
.model-badge, .portfolio-card > div > span, .contact-row span span:first-child,
.contact-row a span:first-child, .contact-copy, .work-cat, .file-list li, .steps .n {
  letter-spacing: .04em; font-weight: 600;
}
.model-meta, .mat-link span, .rows dd, .calc-rows dd, .spec-rows dd, td.n, .num { letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- кнопки ---------- */
.btn-1, .button-primary {
  background: var(--ink); color: #fff;
  box-shadow: none;
}
.btn-1:hover, .button-primary:hover { background: #000; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.btn-1::after { display: none; }
.btn-2, .button-secondary {
  background: #fff; color: var(--ink);
  border-color: var(--line-2); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.btn-2:hover, .button-secondary:hover { background: #fff; border-color: var(--ink); }
.btn-3 { color: var(--acc); }

/* ---------- шапка ---------- */
.bar { height: 52px; background: rgba(255, 255, 255, .78); border-bottom: 1px solid var(--line); }
.logo { font: 600 17px/1 var(--body); letter-spacing: -.04em; gap: 9px; }
.logo img { width: 24px; height: 24px; border-radius: 0; }
.bar nav > a, .bar .nav-top { color: rgba(29, 29, 31, .8); font-size: 13px; }
.bar nav > a:hover, .bar .nav-top:hover { color: var(--ink); }
.bar .pill { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.bar .pill:hover { background: #000; border-color: #000; }
.nav-menu {
  background: rgba(255, 255, 255, .94);
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .12);
}
.nav-menu a { color: var(--ink); }
@media (max-width: 760px) {
  .bar nav.open { background: rgba(255, 255, 255, .97); box-shadow: 0 24px 54px rgba(0, 0, 0, .14); }
}

/* ---------- первый экран ---------- */
.hero { background: radial-gradient(ellipse at 62% 45%, #FFFFFF 0%, var(--surface) 72%); border-bottom: 0; }
.halo { background: radial-gradient(circle, rgba(18, 183, 106, .07) 0%, transparent 58%); }
.veil { background: linear-gradient(100deg, rgba(245, 245, 247, .94) 10%, rgba(245, 245, 247, .55) 40%, transparent 64%); }
.tagline {
  background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  font: 600 13px/1 var(--body); letter-spacing: -.005em; text-transform: none; color: var(--ink);
  padding: 8px 14px 8px 11px; gap: 9px;
}
.card { background: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .9); box-shadow: var(--shadow); }
.card .big { font: 700 34px/1 var(--display); letter-spacing: -.045em; }
.card p { color: var(--muted); }
.pin b { color: var(--ink); }
.pin::before { background: linear-gradient(270deg, rgba(29, 29, 31, .6), rgba(29, 29, 31, .04)); }
.pin::after { background: var(--ink); box-shadow: none; }
@media (max-width: 1080px) {
  .veil { background: linear-gradient(180deg, rgba(245, 245, 247, .92) 6%, rgba(245, 245, 247, .6) 40%, rgba(245, 245, 247, .9) 100%); }
}

/* ---------- секции и карточки: плитки без рамок ---------- */
.sec, .section { border-bottom: 0; }
.section-muted { background: var(--surface); border-bottom: 0; }
.section-muted + .section-muted { border-top: 0; }
.road, .mat, .service-card, .detail-card, .price-card, .contact-panel, .process-item,
.model-card, .work-card, .messenger-card, .flow, .faq-list, .spec-rows, .calc-panel, .tw,
.portfolio-card, .model-figure, .case-shots figure, .mat-link {
  border-color: transparent;
}
.road, .mat, .service-card, .detail-card, .price-card, .process-item, .model-card, .work-card,
.messenger-card, .portfolio-card, .calc-panel {
  background: var(--surface);
}
.section-muted .road, .section-muted .mat, .section-muted .service-card, .section-muted .detail-card,
.section-muted .price-card, .section-muted .process-item, .section-muted .model-card,
.section-muted .work-card, .section-muted .messenger-card, .section-muted .portfolio-card,
.paper .panel { background: #fff; }
.road:hover, .mat:hover, .service-card:hover, .detail-card:hover, .model-card:hover, .work-card:hover {
  border-color: transparent; box-shadow: var(--shadow);
}
.road::before { background: radial-gradient(circle, rgba(18, 183, 106, .08), transparent 66%); }
.road li::before, .clean-list li::before, .large-list li::before { border-radius: 50%; width: 6px; height: 6px; background: var(--ink); }
.messenger-card:hover, .mat-link:hover { border-color: transparent; box-shadow: var(--shadow); }
.price-card.featured { border-color: var(--go); background: #fff; box-shadow: inset 0 0 0 2px var(--go); }
.price-card.featured .price-label { color: var(--ink); background: var(--go); }
.price-card p.price-value, .price-value, .calc-price strong { color: var(--ink); font-weight: 700; letter-spacing: -.045em; }
.figs b { font-weight: 700; letter-spacing: -.045em; }
.callout { background: var(--go-soft); border-left-color: var(--go); }
.calc-drop:hover, .calc-drop.is-over { border-color: var(--go); background: var(--go-soft); }
.calc-error { color: var(--bad); border-left-color: var(--bad); }
.calc-viewport { background: radial-gradient(ellipse at 50% 35%, #2C2C2E 0%, #000 75%); border-color: transparent; }
.calc-hint { color: #A1A1A6; }
.rows > .total { background: var(--ink); }
.rows > .total dd { color: var(--go); }
.model-badge { background: rgba(255, 255, 255, .88); border-color: transparent; color: var(--ink); }
.model-badge.is-free { background: var(--go); border-color: var(--go); color: var(--ink); }
.page-hero { background: radial-gradient(ellipse at 50% 0%, #FFFFFF 0%, var(--surface) 80%); border-bottom: 0; }
.page-hero::before { display: none; }
.breadcrumbs a:hover, .foot li a:hover, .contact-row a:hover span:last-child, .sources a:hover { color: var(--acc); }
.faq-list summary::after { color: var(--ink); }
.faq-list summary:hover { color: var(--acc); }

/* фото работ: подпись поверх снимка — светлым по тёмной вуали */
.work figcaption { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, .78)); color: #fff; }
.work figcaption span { color: rgba(255, 255, 255, .82); }

/* ---------- тёмная сцена: кейс и финальное действие ---------- */
.case, .act, .cta-band {
  --void: #000000; --surface: #1D1D1F; --nested: #2C2C2E;
  --ink: #F5F5F7; --ink-2: #D2D2D7; --muted: #A1A1A6;
  --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .22);
  --acc: #12B76A;
  background: #000; color: var(--ink);
}
.case-veil { background: linear-gradient(92deg, #000 14%, rgba(0, 0, 0, .82) 46%, rgba(0, 0, 0, .3) 100%); }
.act h2, .act .d-2, .cta-band h2 { color: var(--ink); }
.act .lede, .cta-band p { color: var(--muted); }
.act .mono, .cta-band .section-kicker, .cta-band .eyebrow { color: var(--go); }
.act .btn-1, .cta-band .button-primary { background: var(--go); color: #1D1D1F; box-shadow: 0 10px 30px rgba(18, 183, 106, .3); }
.act .btn-1:hover, .cta-band .button-primary:hover { background: #2BD483; }
.act .btn-2, .cta-band .button-secondary { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--ink); }
.act .btn-2:hover, .cta-band .button-secondary:hover { border-color: #fff; background: transparent; }
.where { background: #1D1D1F; }

/* ---------- подвал ---------- */
.foot { background: var(--surface); border-top: 1px solid var(--line); }
.foot li { color: var(--ink-2); }
.case .btn-2, .case .button-secondary { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--ink); }
.case .btn-2:hover, .case .button-secondary:hover { border-color: #fff; background: transparent; }
.case .btn-1, .case .button-primary { background: var(--go); color: #1D1D1F; }

/* ============================================================
   v4.1 — правки перед релизом (26.09.2026)
   ============================================================ */

/* ---------- шрифт с собственного сервера (без Google Fonts) ---------- */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-tight-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-tight-latin-wght-normal.woff2) format("woff2");
  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;
}

/* ---------- меню: тёмный текст, контраст ≥ 4.5:1 и на ховере ---------- */
.bar nav > a, .bar .nav-top { color: var(--ink); font-weight: 500; }
.bar nav > a:hover, .bar .nav-top:hover,
.bar nav > a:focus-visible, .bar .nav-top:focus-visible { color: var(--acc); }
.bar .nav-menu a { color: var(--ink); border-radius: 10px; }
.bar .nav-menu a:hover, .bar .nav-menu a:focus-visible { color: #000; background: var(--surface); }
@media (max-width: 760px) {
  .bar nav.open a { color: var(--ink); }
  .bar nav.open .nav-top { color: var(--ink-2); }
}

/* ---------- вертикальные отступы между блоками — вдвое меньше ---------- */
.sec { padding: clamp(30px, 4vw, 52px) 0; }
.section { padding: clamp(26px, 3.5vw, 44px) 0; }
.page-hero + .section { padding-top: clamp(15px, 1.75vw, 23px); }
.case-in { padding: clamp(30px, 4vw, 54px) 0; }
.page-hero { padding: 92px 0 clamp(20px, 2.5vw, 32px); }
.foot { padding: clamp(22px, 3vw, 36px) 0 24px; }
.not-found { padding: clamp(25px, 4vw, 45px) 0; }

/* ---------- «Онлайн-калькулятор»: медленное мягкое дыхание ---------- */
@keyframes calc-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0), 0 0 0 0 rgba(18, 183, 106, 0); background-color: var(--ink); }
  50%      { box-shadow: 0 0 0 3px rgba(18, 183, 106, .16), 0 0 18px 2px rgba(18, 183, 106, .32); background-color: #2C2C2E; }
}
.bar .pill-calc { white-space: nowrap; animation: calc-breathe 3.6s ease-in-out infinite; }
.bar .pill-calc:hover, .bar .pill-calc:focus-visible { animation-play-state: paused; background: #000; }
@media (prefers-reduced-motion: reduce) {
  .bar .pill-calc { animation: none; }
}
@media (max-width: 400px) {
  .bar .pill-calc { padding-left: 11px; padding-right: 11px; font-size: 12.5px; }
}

/* ---------- аттрактор: пелена светлее, облако заметнее ---------- */
.veil { background: linear-gradient(100deg, rgba(245, 245, 247, .92) 8%, rgba(245, 245, 247, .38) 36%, transparent 58%); }
@media (max-width: 760px) {
  .veil { background: linear-gradient(180deg, rgba(245, 245, 247, .9) 8%, rgba(245, 245, 247, .55) 48%, rgba(245, 245, 247, .2) 100%); }
}

/* ---------- подвал: юридические ссылки ---------- */
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); }
.foot-legal a:hover { color: var(--acc); text-decoration-color: currentColor; }

/* ---------- контакты: компактные строки ---------- */
.page-hero-tight { padding: 84px 0 8px; }
.page-hero-tight h1 { font-size: clamp(28px, 3.4vw, 42px); max-width: none; }
.contact-list { border-radius: 14px; }
.contact-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 10px 6px 14px; background: #fff;
}
.contact-row .ci { color: var(--acc); display: grid; place-items: center; }
.contact-row > a, .contact-row > span:not(.ci) {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 10px; min-width: 0;
}
.contact-row span span:first-child, .contact-row a span:first-child {
  font: 600 12px/1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--muted);
}
.contact-row a span:last-child, .contact-row > span > span:last-child { font-size: 15px; line-height: 1.35; }
.contact-copy {
  min-height: 32px; min-width: 104px; padding: 0 10px; border-radius: 9px;
  font: 600 12px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.contact-copy.is-done { color: var(--acc); border-color: var(--acc); }
.messenger-rows { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.messenger-rows .messenger-card {
  display: grid; grid-template-columns: 24px auto minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 14px; font-size: 15px; font-weight: 600; border-radius: 12px;
}
.messenger-rows .messenger-card svg { width: 24px; height: 24px; }
.messenger-rows .messenger-card small { justify-self: end; font-size: 13px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; text-align: right; }
.messenger-rows .messenger-card:hover { transform: none; }
@media (max-width: 420px) {
  .contact-row > a, .contact-row > span:not(.ci) { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- уведомление о cookie ---------- */
.cookie-note {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; margin: 0 auto; max-width: 640px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px 12px 18px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.cookie-note p { margin: 0; flex: 1 1 280px; }
.cookie-note a { color: var(--acc); text-decoration: underline; }
.cookie-note button {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font: 600 14px/1 var(--body); cursor: pointer;
}

/* ---------- тексты с прода внутри нового оформления ---------- */
.legacy .section:first-child { padding-top: clamp(26px, 3.5vw, 44px); }
.bar .pill-calc { min-height: 34px; display: inline-flex; align-items: center; }
/* v4.1: доводка контактов */
.page-hero-tight { background: none; }
.contact-copy { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.contact-row > span > span:last-child span { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.messenger-rows { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 520px) {
  .contact-copy { min-width: 0; padding: 0 9px; }
  .cookie-note { padding: 10px 12px 10px 14px; font-size: 13px; }
  .cookie-note button { min-height: 36px; }
}
/* v4.1: ореол первого экрана привязан к окну, а не к высоте текста — не прыгает при загрузке шрифта */
.hero .halo { top: 50vh; top: 50svh; }
/* v4.1: выпадающее меню — сплошной белый фон, чтобы текст под ним не просвечивал */
.bar .nav-menu { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bar .nav-menu a { font-size: 14px; font-weight: 500; }
@media (max-width: 760px) { .bar nav.open { background: #fff; } }
/* v4.1: заголовки подвала стали h2 — вид прежний */
.foot h2.foot-h { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 13px; line-height: 1.4; }
/* ссылки внутри текста отличаются не только цветом */
.calc-disclaimer a, .note a, .lede a, .page-lead a, .seo-copy a, .legal-content a, .case-text a, .case-body a,
.faq-list a, .sources a, .map-band p a, .form-note a, .detail-card p a {
  text-decoration: underline; text-underline-offset: 2px;
}