/* Урбан Модуль: тестовый дизайн главной (19.10.2026). Боевой style.css не трогает. */
:root {
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px rgba(27, 27, 25, 0.10);
  --head: "Montserrat", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1180px;
}
:root, :root[data-palette="graphite"] {
  --ink: #1b1b19; --ink-rgb: 27, 27, 25; --ink-2: #47423c; --muted: #777067;
  --sand: #f5f0e8; --paper: #fffdf9; --paper-rgb: 255, 253, 249; --line: #e6ddcf; --chip-edge: #e3d8c7;
  --brass: #b8925e; --brass-rgb: 184, 146, 94; --brass-dark: #94713f; --brass-soft: #f1e6d5;
  --acc-top: #ccab7b; --acc-bot: #a7824f; --acc-border: #a37f4c; --acc-edge: #8a6838; --acc-rgb: 148, 113, 63; --acc-light: #e7cfa8;
  --dark-top: #3a3833; --dark-mid: #24231f; --dark-edge: #11110f; --on-dark: #f5f0e8; --on-dark-muted: #b9b0a3;
  --hero-rgb: 17, 14, 10; --hero-bg: #191612;
}
:root[data-palette="forest"] {
  --ink: #1f2a24; --ink-rgb: 31, 42, 36; --ink-2: #43514a; --muted: #6d7a72;
  --sand: #eef0ea; --paper: #fbfcf8; --paper-rgb: 251, 252, 248; --line: #dde3da; --chip-edge: #d4dccf;
  --brass: #c49a52; --brass-rgb: 196, 154, 82; --brass-dark: #9c7637; --brass-soft: #e7ecdf;
  --acc-top: #d6b06b; --acc-bot: #b08540; --acc-border: #a97f3e; --acc-edge: #87622a; --acc-rgb: 156, 118, 55; --acc-light: #e5cf9c;
  --dark-top: #34453b; --dark-mid: #26332c; --dark-edge: #141c17; --on-dark: #eef0ea; --on-dark-muted: #aab5ad;
  --hero-rgb: 12, 20, 15; --hero-bg: #121a15;
}
:root[data-palette="terracotta"] {
  --ink: #2a1f1a; --ink-rgb: 42, 31, 26; --ink-2: #54443b; --muted: #85756a;
  --sand: #f7efe7; --paper: #fffaf5; --paper-rgb: 255, 250, 245; --line: #ecdccd; --chip-edge: #e6d2bf;
  --brass: #c0643a; --brass-rgb: 192, 100, 58; --brass-dark: #9b4c27; --brass-soft: #f6e1d3;
  --acc-top: #d47c50; --acc-bot: #ad5530; --acc-border: #a3502c; --acc-edge: #84401f; --acc-rgb: 160, 80, 42; --acc-light: #f0b894;
  --dark-top: #46352c; --dark-mid: #33261f; --dark-edge: #1a120e; --on-dark: #f7efe7; --on-dark-muted: #c4b2a5;
  --hero-rgb: 24, 14, 9; --hero-bg: #1d130e;
}
:root[data-palette="nordic"] {
  --ink: #26313a; --ink-rgb: 38, 49, 58; --ink-2: #4a5762; --muted: #75818a;
  --sand: #f1f3f4; --paper: #ffffff; --paper-rgb: 255, 255, 255; --line: #dfe4e8; --chip-edge: #d5dce1;
  --brass: #d39b3a; --brass-rgb: 211, 155, 58; --brass-dark: #a8771f; --brass-soft: #f6ead3;
  --acc-top: #e2ae55; --acc-bot: #bf8628; --acc-border: #b47e26; --acc-edge: #946519; --acc-rgb: 168, 119, 31; --acc-light: #f1cf8f;
  --dark-top: #3d4a55; --dark-mid: #2c3741; --dark-edge: #161d23; --on-dark: #eef1f3; --on-dark-muted: #aab4bc;
  --hero-rgb: 14, 20, 26; --hero-bg: #121920;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--body); color: var(--ink); background: var(--sand); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--head); letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-dark); }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--brass); }
.section { padding: 96px 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 44px; }
.section-head p { margin: 0; color: var(--ink-2); font-size: 17px; }
.section-head h2 { margin-top: 12px; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease; }
.btn:active { transform: translateY(1px); transition-duration: .06s; }
.btn:focus-visible, .chip:focus-visible { outline: 3px solid rgba(var(--acc-rgb), 0.55); outline-offset: 3px; }
/* кнопки: сплошной цвет, под кнопкой мягкое свечение ее цвета; при наведении поднимается, свечение растет */
.btn:hover { transform: translateY(-3px); }
.btn-brass { color: #fff; background: var(--brass); border-color: var(--brass); box-shadow: 0 8px 24px rgba(var(--brass-rgb), 0.5); }
.btn-brass:hover { background: var(--acc-bot); border-color: var(--acc-bot); box-shadow: 0 14px 36px rgba(var(--brass-rgb), 0.75); }
.btn-brass:active { box-shadow: 0 4px 14px rgba(var(--brass-rgb), 0.5); }
.btn-dark { color: var(--on-dark); background: var(--ink); border-color: var(--ink); box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.38); }
.btn-dark:hover { background: var(--dark-mid); box-shadow: 0 14px 34px rgba(var(--ink-rgb), 0.5), 0 6px 26px rgba(var(--brass-rgb), 0.35); }
.btn-dark:active { box-shadow: 0 4px 12px rgba(var(--ink-rgb), 0.3); }
.btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.24); box-shadow: 0 14px 34px rgba(255, 255, 255, 0.3), 0 10px 24px rgba(0, 0, 0, 0.25); }
.btn-ghost:active { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }

/* test banner + header */
.test-banner { background: var(--ink); color: var(--on-dark-muted); font-size: 13px; text-align: center; padding: 8px 16px; }
.test-banner a { color: var(--on-dark); }
.header { position: sticky; top: 0; z-index: 20; background: rgba(var(--paper-rgb), 0.86); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.header .logo { flex-shrink: 0; }
.header .logo img { height: 22px; width: auto; max-width: none; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 1360px) { .nav { gap: 20px; } .nav .btn { padding: 0 20px; } }
@media (max-width: 1180px) { .nav { gap: 16px; } .nav a { font-size: 14px; } }
@media (max-width: 1000px) { .nav a:not(.btn):not(.msg) { display: none; } }
.nav a:hover { color: var(--ink); }
.header .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
.nav a.btn, .nav a.btn:hover { color: var(--on-dark); }

/* hero */
.hero { position: relative; min-height: 720px; color: #fff; display: flex; align-items: center; overflow: hidden; background: var(--hero-bg); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(var(--hero-rgb), 0.88) 0%, rgba(var(--hero-rgb), 0.72) 42%, rgba(var(--hero-rgb), 0.25) 72%, rgba(var(--hero-rgb), 0.10) 100%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding-top: 72px; padding-bottom: 72px; }
.hero .wrap > div { max-width: 760px; }
.hero .eyebrow { color: var(--acc-light); }
.hero h1 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 600; margin: 18px 0 18px; }
.hero h1 span { display: block; color: var(--acc-light); font-weight: 500; font-size: 0.62em; margin-top: 10px; letter-spacing: 0; }
.hero-sub { font-size: 18px; color: rgba(255, 255, 255, 0.86); max-width: 560px; margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 44px; max-width: 680px; }
.trust div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13.5px; line-height: 1.3; }
.trust img { width: 38px; height: 38px; padding: 5px; border-radius: 50%; background: var(--paper); flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--chip-edge); color: var(--ink); background: #fff; border-radius: 999px; padding: 10px 16px; font: 500 14.5px/1 var(--body); cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--ink-rgb), 0.06); transition: transform .16s ease, box-shadow .16s ease, background .16s, color .16s, border-color .16s; }
.chip:hover { transform: translateY(-3px); border-color: var(--brass); box-shadow: 0 10px 24px rgba(var(--brass-rgb), 0.45); }
.chip:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(var(--ink-rgb), 0.08); }
.chip[aria-pressed="true"] { color: var(--on-dark); border-color: var(--dark-edge); background: var(--ink); box-shadow: 0 8px 20px rgba(var(--ink-rgb), 0.28); }

/* advantages */
.adv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.adv-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 28px; transition: transform .25s, box-shadow .25s; }
.adv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.icon-badge { width: 76px; height: 76px; border-radius: 22px; background: var(--brass-soft); display: grid; place-items: center; margin-bottom: 20px; }
.icon-badge img { width: 56px; height: 56px; }
.adv-card p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }

/* catalog */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.05); }
.badge { position: absolute; left: 14px; top: 14px; background: rgba(var(--paper-rgb), 0.92); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body p { margin: 0; color: var(--ink-2); font-size: 15px; }
.card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.price { font-family: var(--head); font-weight: 600; font-size: 17px; }
.go { width: 40px; height: 40px; border-radius: 50%; color: var(--on-dark); background: var(--ink); display: grid; place-items: center; font-size: 16px; box-shadow: 0 6px 16px rgba(var(--ink-rgb), 0.25); transition: transform .18s, background .18s, box-shadow .18s; }
.card:hover .go { transform: translateY(-3px); background: var(--brass); box-shadow: 0 10px 24px rgba(var(--brass-rgb), 0.7); }
.card[hidden] { display: none; }
.card-cta { background: var(--ink); color: var(--on-dark); border-color: var(--ink); justify-content: space-between; padding: 28px 26px; }
.card-cta h3 { font-size: 24px; line-height: 1.25; }
.card-cta p { color: var(--on-dark-muted); margin: 12px 0 0; }
.card-cta .btn { align-self: flex-start; margin-top: 24px; }
.card-soft { background: var(--brass-soft); border-color: var(--brass-soft); justify-content: space-between; padding: 28px 26px; }
.card-soft h3 { font-size: 24px; line-height: 1.25; }
.card-soft p { color: var(--ink-2); margin: 12px 0 0; }
.card-soft .go { margin-top: 24px; }

/* steps (dark band) */
.dark { background: var(--ink); color: var(--on-dark); }
.dark .section-head p { color: var(--on-dark-muted); }
.dark .eyebrow { color: var(--acc-light); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: s; position: relative; }
.step { position: relative; padding: 24px 20px 26px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); }
.step .num { position: absolute; right: 18px; top: 18px; font-family: var(--head); font-weight: 600; color: rgba(255, 255, 255, 0.25); font-size: 15px; }
.step .icon-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); margin-bottom: 18px; }
.step .icon-badge img { width: 44px; height: 44px; }
.step p { margin: 8px 0 0; color: var(--on-dark-muted); font-size: 14.5px; }

/* prices */
.price-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.pcard .fmt { font-family: var(--head); font-weight: 600; font-size: 17px; }
.pcard .size { color: var(--muted); font-size: 14px; }
.pcard .sum { font-family: var(--head); font-weight: 600; font-size: 19px; line-height: 1.3; margin-top: 8px; }
.pcard .sum .n { white-space: nowrap; }
.pcard .term { font-size: 13.5px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--line); margin-top: auto; }
.pcard.accent { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.pcard.accent .size, .pcard.accent .term { color: var(--on-dark-muted); border-color: rgba(255, 255, 255, 0.15); }
.note { color: var(--muted); font-size: 14px; margin: 18px 0 0; max-width: 860px; }

/* guarantees */
.guar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.guar div { display: flex; gap: 16px; align-items: flex-start; }
.guar .icon-badge { width: 60px; height: 60px; border-radius: 18px; margin: 0; flex: none; }
.guar .icon-badge img { width: 42px; height: 42px; }
.guar b { display: block; font-family: var(--head); font-weight: 600; margin-bottom: 4px; }
.guar span { color: var(--ink-2); font-size: 14.5px; }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq-grid .btn { margin-top: 26px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 22px; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 16.5px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brass-soft); color: var(--brass-dark); display: grid; place-items: center; font-size: 20px; font-weight: 500; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 20px; color: var(--ink-2); }

/* lead */
.lead-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; background: var(--brass-soft); border-radius: 28px; padding: 56px; }
/* фон-фото под формой (ChatGPT): баня справа, слева светлая вуаль под текст; форма — матовое стекло */
.lead-box { position: relative; overflow: hidden; isolation: isolate; background: var(--brass-soft) url(/images/design/lead-bg.webp) 70% 60% / cover no-repeat; }
.lead-box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--paper-rgb), 0.97) 0%, rgba(var(--paper-rgb), 0.92) 36%, rgba(var(--paper-rgb), 0.45) 56%, rgba(var(--paper-rgb), 0.05) 78%); }
.lead-box .form { background: rgba(var(--paper-rgb), 0.84); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 24px 50px rgba(var(--ink-rgb), 0.28); }
.lead-box h2 { margin: 12px 0 16px; }
.lead-box ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.lead-box li { display: flex; gap: 12px; align-items: flex-start; }
.lead-box li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; font-size: 13px; margin-top: 1px; }
.form { background: var(--paper); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.form label { display: block; font-size: 13.5px; font-weight: 600; margin: 16px 0 7px; }
.form label:first-of-type { margin-top: 0; }
.form input, .form select { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: 16px var(--body); background: #fff; color: var(--ink); }
.form input:focus, .form select:focus { outline: none; border-color: var(--brass); }
.form .btn { width: 100%; margin-top: 22px; }
.form .legal { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }
.form .legal a { color: var(--ink-2); }
.form-ok { display: none; text-align: center; padding: 30px 0; }
.form-ok.show { display: block; }
.form-ok.show + form { display: none; }

/* footer */
.footer, .site-footer { background: var(--ink); color: var(--on-dark-muted); padding: 56px 0 40px; font-size: 14.5px; }
.footer .top, .site-footer .top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer .logo img, .site-footer .logo img { height: 22px; width: auto; }
.footer nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer a, .site-footer a { color: var(--on-dark); text-decoration: none; }
.footer a:hover, .site-footer a:hover { color: var(--acc-light); }
.footer p, .site-footer p { margin: 18px 0 0; }

/* sticky mobile CTA */
.mobile-cta { display: none; }

@media (max-width: 1080px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .adv, .guar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid, .lead-box { grid-template-columns: minmax(0, 1fr); }
  .lead-box { background-position: 75% 100%; } .lead-box::before { background: linear-gradient(180deg, rgba(var(--paper-rgb), 0.96) 0%, rgba(var(--paper-rgb), 0.9) 40%, rgba(var(--paper-rgb), 0.35) 100%); }
}
@media (max-width: 860px) {
  .nav a:not(.btn) { display: none; }
  .section { padding: 72px 0; }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .header .wrap { height: 62px; }
  .header .logo img { height: 18px; }
  .header .btn { display: none; }
  .hero { min-height: 0; }
  .hero .wrap { padding-top: 44px; padding-bottom: 48px; gap: 28px; }
  .hero-sub { font-size: 16px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .adv, .guar, .cards, .steps, .price-cards { grid-template-columns: minmax(0, 1fr); }
  .lead-box { padding: 28px 18px; border-radius: 22px; }
  .form { padding: 22px 18px; }
  .footer { padding-bottom: 96px; }
  .mobile-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; transform: translateY(140%); transition: transform .3s ease; }
  .mobile-cta.show { transform: none; }
  .mobile-cta .btn { width: 100%; box-shadow: 0 10px 28px rgba(var(--brass-rgb), 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .go, .card, .adv-card, .card-img img { transition: none !important; }
  .btn:hover, .chip:hover, .card:hover, .adv-card:hover, .card:hover .go, .card:hover .card-img img { transform: none !important; }
}

/* переключатель палитр в тестовой полосе */
.palettes { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; vertical-align: middle; }
.palettes button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #f1ede6; border-radius: 999px; padding: 4px 10px; font: 500 12.5px/1.2 var(--body); cursor: pointer; }
.palettes button[aria-pressed="true"] { background: #f1ede6; color: #1b1b19; }
.palettes i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }

/* ===== блоки по мотивам шаблона (19.10) ===== */
h2 b, h1 b { font-weight: 700; color: var(--ink); }
.dark h2 b, .hero h1 b { color: inherit; }
h2 .light { font-weight: 500; }
.inline-pic { display: inline-block; width: 1.9em; height: 1em; border-radius: 999px; object-fit: cover; vertical-align: -0.12em; margin: 0 0.12em; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); }

/* 1. плашка преимуществ, наезжает на первый экран */
.plate-wrap { position: relative; z-index: 5; margin-top: -64px; }
.plate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border-radius: 22px; box-shadow: 0 24px 50px rgba(var(--ink-rgb), 0.14); overflow: hidden; }
.plate div { padding: 22px 22px 24px; border-left: 1px solid var(--line); }
.plate div:first-child { border-left: 0; }
.plate img { width: 46px; height: 46px; margin-bottom: 12px; }
.plate b { display: block; font-family: var(--head); font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.plate span { color: var(--ink-2); font-size: 14px; line-height: 1.45; }

/* 2. карточки форматов с характеристиками */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.project .card-img { aspect-ratio: 16 / 10; }
.project .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.project h3 { margin-bottom: 14px; }
.specs { margin: 0 0 20px; }
.specs div { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; padding: 6px 0; }
.specs dt { color: var(--muted); flex: none; }
.specs dd { margin: 0; text-align: right; font-weight: 600; flex: none; margin-left: auto; }
.specs div::after { content: ""; order: 1; }
.specs .dots { flex: 1; border-bottom: 1.5px dotted var(--line); transform: translateY(-4px); }
.project .btn { margin-top: auto; width: 100%; }
.project.cta-card { background: var(--ink); color: var(--on-dark); border-color: var(--ink); padding: 28px 26px; justify-content: space-between; }
.project.cta-card p { color: var(--on-dark-muted); }

/* 4. лид-магнит: каталог */
.magnet { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: 34px 40px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.magnet h2 { font-size: clamp(24px, 2.6vw, 32px); }
.magnet p { color: var(--ink-2); margin: 10px 0 20px; }
.magnet form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
.magnet select, .magnet input { height: 52px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; font: 15px var(--body); background: #fff; color: var(--ink); min-width: 0; }
.magnet .legal { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.magnet .legal a { color: var(--ink-2); }
.magnet .mock { justify-self: center; width: 100%; mix-blend-mode: multiply; }
.magnet .pdf { position: absolute; right: 28px; top: 20px; width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.16); display: grid; place-items: center; z-index: 2; }
.magnet .pdf svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 15s linear infinite; }
.magnet .pdf text { font: 600 9.5px var(--head); letter-spacing: 0.18em; fill: var(--muted); opacity: .55; }
.magnet .pdf b { position: relative; font: 700 21px/1 var(--head); color: var(--ink); text-align: center; }
.magnet .pdf b small { display: block; margin-top: 5px; font: 600 12px/1 var(--body); color: var(--brass-dark); }
@keyframes spin { to { transform: rotate(360deg); } }
.sent { display: none; font-weight: 600; color: var(--ink); }
.sent.show { display: block; }

/* 3. что можно включить под ключ */
.turnkey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.turnkey div { display: flex; align-items: center; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; transition: transform .2s, box-shadow .2s; }
.turnkey div:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.08); }
.turnkey img { width: 92px; height: 70px; object-fit: cover; border-radius: 10px; flex: none; }
.turnkey span { font-size: 14.5px; line-height: 1.4; }

/* 5. темная карточка с фото справа */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 26px; overflow: hidden; background: var(--ink); color: var(--on-dark); min-height: 420px; }
.split .txt { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.split h2 { color: var(--on-dark); }
.split p { color: var(--on-dark-muted); margin: 16px 0 28px; max-width: 460px; }
.split .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.split .actions small { color: var(--on-dark-muted); font-size: 13px; max-width: 220px; }
.split img.ph { width: 100%; height: 100%; object-fit: cover; }

/* 7. квиз с консультантом */
.quizbox { display: grid; grid-template-columns: 280px minmax(0, 1fr); background: var(--ink); border-radius: 26px; overflow: hidden; color: var(--on-dark); min-height: 470px; }
.consult { padding: 28px 24px; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.consult img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.12); }
.consult .who b { display: block; margin-top: 12px; font-family: var(--head); font-weight: 600; }
.consult .who span { color: var(--on-dark-muted); font-size: 13px; }
.bubble { position: relative; margin-top: 18px; background: var(--brass-soft); color: var(--ink); border-radius: 4px 16px 16px 16px; padding: 14px 16px; font-size: 14.5px; line-height: 1.45; }
.consult .note-ai { margin-top: 14px; font-size: 11.5px; color: rgba(255, 255, 255, 0.35); }
.qmain { padding: 30px 34px; display: flex; flex-direction: column; position: relative; }
.qbar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(255, 255, 255, 0.08); }
.qbar i { display: block; height: 100%; width: 0; background: var(--brass); transition: width .3s; }
.qstep { display: none; }
.qstep.on { display: block; }
.qstep h3 { font-size: 22px; margin-bottom: 20px; color: var(--on-dark); }
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.opt { background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 0 0 12px; color: var(--on-dark); font: 500 14px/1.35 var(--body); text-align: left; cursor: pointer; overflow: hidden; transition: transform .16s, border-color .16s, background .16s; }
.opt:hover { transform: translateY(-2px); border-color: rgba(var(--acc-rgb), 0.7); }
.opt[aria-pressed="true"] { border-color: var(--brass); background: rgba(var(--acc-rgb), 0.18); }
.opt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 10px; }
.opt span { display: block; padding: 0 12px; }
.opts.text .opt { padding: 16px; }
.qform { display: grid; gap: 12px; max-width: 460px; }
.qform input { height: 52px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--on-dark); padding: 0 16px; font: 16px var(--body); }
.qform input::placeholder { color: var(--on-dark-muted); }
.qform .legal { font-size: 12.5px; color: var(--on-dark-muted); margin: 0; }
.qform .legal a { color: var(--on-dark); }
.qnav { margin-top: auto; padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qnav .cnt { color: var(--on-dark-muted); font-size: 13px; }
.qnav .back { width: 48px; min-height: 48px; padding: 0; }
.qnav .btns { display: flex; gap: 10px; }
.qnav .btn[disabled] { opacity: .45; pointer-events: none; }

/* 6. гарантии вокруг договора */
.guar4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.guar4 .col { display: grid; gap: 48px; }
.guar4 .item .n { font-family: var(--head); font-weight: 600; color: var(--brass); font-size: 18px; }
.guar4 .item h3 { margin: 6px 0 8px; font-size: 20px; }
.guar4 .item p { margin: 0; color: var(--ink-2); font-size: 15px; }
.guar4 .col.right { text-align: right; }
.guar4 .center img { width: 100%; max-width: 440px; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(var(--ink-rgb), 0.18)); }

/* 8. финальный блок */
.final { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 0.9fr); gap: 30px; align-items: center; background: radial-gradient(120% 120% at 0% 0%, var(--dark-top) 0%, var(--ink) 60%); color: var(--on-dark); border-radius: 26px; padding: 56px; overflow: hidden; }
.final h2 { color: var(--on-dark); }
.final p { color: var(--on-dark-muted); margin: 16px 0 28px; }
.final .phone { width: 300px; margin: -80px 0 -110px; }
.contacts { display: grid; gap: 22px; }
.contacts div { display: flex; gap: 14px; align-items: flex-start; }
.contacts .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); display: grid; place-items: center; flex: none; }
.contacts .ic svg { width: 20px; height: 20px; stroke: var(--acc-light); fill: none; stroke-width: 1.8; }
.contacts b { display: block; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); font-weight: 600; margin-bottom: 4px; }
.todo { border-bottom: 1px dashed rgba(255, 255, 255, 0.35); color: var(--on-dark); }

/* 9. мессенджеры в шапке */
.msg { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); transition: transform .16s, box-shadow .16s; }
.msg:hover { transform: translateY(-3px); }
.msg.tg:hover { box-shadow: 0 10px 24px rgba(42, 171, 238, 0.75); }
.msg.wa:hover { box-shadow: 0 10px 24px rgba(37, 211, 102, 0.75); }
.msg.max:hover { box-shadow: 0 10px 24px rgba(110, 70, 255, 0.7); }
.msg img { width: 100%; height: 100%; border-radius: 50%; }
.nav .msgs { display: flex; gap: 8px; }

@media (max-width: 1080px) {
  .plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate div:nth-child(3) { border-left: 0; }
  .plate div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .projects, .turnkey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .magnet { grid-template-columns: minmax(0, 1fr); } .magnet .mock { display: none; } .magnet .pdf { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); } .split img.ph { max-height: 300px; }
  .quizbox { grid-template-columns: minmax(0, 1fr); } .consult { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; gap: 16px; align-items: flex-start; } .bubble { margin-top: 0; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guar4 { grid-template-columns: minmax(0, 1fr); } .guar4 .col.right { text-align: left; } .guar4 .center { order: -1; } .guar4 .col { gap: 26px; }
  .final { grid-template-columns: minmax(0, 1fr); } .final .phone { display: none; }
}
@media (max-width: 860px) { .nav .msgs { display: flex; } }
@media (max-width: 600px) {
  .plate-wrap { margin-top: 18px; } .plate { grid-template-columns: minmax(0, 1fr); } .plate div { border-left: 0 !important; border-top: 1px solid var(--line); } .plate div:first-child { border-top: 0; }
  .projects, .turnkey { grid-template-columns: minmax(0, 1fr); }
  .magnet { padding: 24px 18px; } .magnet form { grid-template-columns: minmax(0, 1fr); }
  .split .txt, .final { padding: 30px 20px; }
  .qmain { padding: 24px 18px; } .consult { padding: 20px 18px; } .consult img { width: 56px; height: 56px; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nav .msg { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .magnet .pdf svg { animation: none; } .opt, .project, .turnkey div, .msg { transition: none; } }
.nav a.msg { display: inline-grid !important; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.split h2 b, .final h2 b, .dark h2 b, .quizbox h3 b { color: var(--acc-light); }
.final .phone { margin: -24px 0 -70px; }
@media (max-width: 600px) {
  .plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate div { padding: 16px 14px; border-top: 0 !important; }
  .plate div:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .plate div:nth-child(n+3) { border-top: 1px solid var(--line) !important; }
  .plate img { width: 36px; height: 36px; margin-bottom: 8px; }
  .plate b { font-size: 14.5px; } .plate span { font-size: 13px; }
}
@media (max-width: 380px) { .header .logo img { height: 16px; } .nav .msgs { gap: 6px; } }
@media (max-width: 340px) { .header .logo img { height: 13px; } .nav .msg { width: 32px; height: 32px; } .nav .msgs { gap: 5px; } }

/* вариант «Градиент» (переключатель в тестовой плашке): диагональный градиент в два близких тона, как на autoiskra.pro, без блика */
:root[data-btn="grad"] .btn-brass { background: linear-gradient(135deg, var(--acc-top), var(--acc-bot)); border-color: transparent; }
:root[data-btn="grad"] .btn-brass:hover { background: linear-gradient(135deg, var(--acc-top), var(--acc-bot)); }
:root[data-btn="grad"] .btn-dark { background: linear-gradient(135deg, var(--dark-top), var(--ink)); }

/* договор: чистый лист под углом из ChatGPT + текст поверх, натянутый по 4 углам листа (matrix3d в координатах 700×700);
   дата сегодня и сдача через 2 месяца — скрипт */
.guar4 .doc { position: relative; max-width: 520px; margin: 0 auto; --k: 0.62; }
.guar4 .doc img { width: 100%; height: auto; max-width: none; mix-blend-mode: multiply; filter: none; }
.guar4 .stage { position: absolute; left: 0; top: 0; width: 700px; height: 700px; transform-origin: 0 0; transform: scale(var(--k)); pointer-events: none; }
.guar4 .sheet { position: absolute; left: 0; top: 0; width: 375px; height: 540px; transform-origin: 0 0; transform: matrix3d(0.992216, 0.166197, 0, 9.60073e-06, -0.230813, 0.824981, 0, -0.000308131, 0, 0, 1, 0, 208, 28, 0, 1); }
.guar4 .sheet .in { position: absolute; inset: 0; padding: 36px 56px 36px 34px; font: 18px/1.35 Georgia, "Times New Roman", serif; color: #2b2a27; }
.guar4 .sheet p { margin: 0; }
.guar4 .sheet .dh { text-align: center; font-weight: 700; font-size: 22px; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; color: #1b1b19; }
.guar4 .sheet .dd { display: flex; justify-content: space-between; margin: 12px 0 24px; font-size: 17px; }
.guar4 .sheet .dt { font: 600 16px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: #6b665e; margin: 0 0 8px; }
.guar4 .sheet .hl { font-weight: 700; font-size: 29px; line-height: 1.15; color: #1b1b19; margin: 0 0 16px; }
.guar4 .sheet .hl { background: linear-gradient(transparent 62%, rgba(var(--brass-rgb), 0.38) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; }
.guar4 .sheet .hl + .bar { margin-top: 18px; }
.guar4 .sheet .due { font-weight: 700; font-size: 24px; color: #1b1b19; margin-bottom: 14px; }
.guar4 .sheet .bar { display: block; height: 10px; margin: 9px 0; border-radius: 3px; background: rgba(27, 27, 25, 0.1); }
.guar4 .sheet .bar.s { width: 64%; margin-bottom: 22px; }
.guar4 .sheet .sign { position: absolute; left: 34px; right: 56px; bottom: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; font-size: 16px; }
.guar4 .sheet .sign span { display: flex; align-items: flex-end; gap: .5em; }
.guar4 .sheet .sign i { flex: 1; height: 1.6em; border-bottom: 1.5px solid rgba(27, 27, 25, 0.5); position: relative; }
.guar4 .sheet .sign svg { position: absolute; left: 4%; bottom: -.15em; width: 92%; height: 2.1em; fill: none; stroke: #2d4a8a; stroke-width: 1.6; stroke-linecap: round; }

/* общий подвал (seo_pass.footer_html) и знак бренда вместо фото консультанта на боевой главной */
.site-footer .footer-links { margin: 0; }
.consult img.mark { background: #fff; object-fit: contain; padding: 10px; }