/* ==========================================================================
   КАРКАС 36 — дизайн-система
   Арт-дирекция: «Архитектурная мастерская», warm-editorial
   Токены → база → компоненты. Без градиентов, без эмодзи в UI.
   ========================================================================== */

:root{
  /* Цвет: бумага / чернила / один акцент (медь) */
  --paper:        #F5F2EC;
  --paper-2:      #EDE7DC;
  --paper-3:      #E3DCCE;
  --ink:          #14171A;
  --ink-2:        #2A2F35;
  --ink-soft:     #3E454C;
  --muted:        #74797F;
  --line:         #DCD4C6;
  --line-dark:    rgba(245,242,236,.16);
  --accent:       #9E5B2A;   /* медь — единственный акцент */
  --accent-dark:  #7C4519;
  --accent-soft:  rgba(158,91,42,.10);
  --ok:           #3F6B4A;

  /* Типографика */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-text:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Сетка и ритм */
  --wrap:   1280px;
  --gutter: clamp(18px, 4vw, 40px);
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 132px;

  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(20,23,26,.05), 0 8px 24px -16px rgba(20,23,26,.18);
  --shadow-md: 0 2px 4px rgba(20,23,26,.06), 0 18px 48px -24px rgba(20,23,26,.28);

  --t-fast: 160ms cubic-bezier(.4,0,.2,1);
  --t-base: 260ms cubic-bezier(.4,0,.2,1);
  --t-slow: 620ms cubic-bezier(.22,.61,.36,1);

  --z-header: 60; --z-float: 70; --z-menu: 80; --z-modal: 90;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 var(--font-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.015em; }
p{ margin:0 0 1em; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--accent); color:#fff; }

/* ── Типографическая шкала ─────────────────────────────────────────────── */
.h-hero{ font-size:clamp(38px, 6.4vw, 84px); line-height:1.03; letter-spacing:-.03em; }
.h-1{ font-size:clamp(32px, 4.4vw, 56px); }
.h-2{ font-size:clamp(26px, 3.1vw, 40px); }
.h-3{ font-size:clamp(21px, 2.1vw, 27px); line-height:1.22; }
.h-4{ font-size:19px; line-height:1.3; font-family:var(--font-text); font-weight:600; letter-spacing:-.01em; }
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; display:block; }
.lead{ font-size:clamp(17px,1.35vw,21px); line-height:1.6; color:var(--ink-soft); }
.muted{ color:var(--muted); }
.small{ font-size:14.5px; line-height:1.6; }
.tiny{ font-size:13px; line-height:1.55; }
.serif-em{ font-style:italic; font-family:var(--font-display); }

/* ── Каркас страницы ───────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.wrap--narrow{ max-width:940px; }
.section{ padding:var(--sp-6) 0; position:relative; }
.section--tight{ padding:var(--sp-5) 0; }
.section--paper2{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink .lead, .section--ink .muted{ color:rgba(245,242,236,.72); }
.section--ink .eyebrow{ color:#D79A62; }
.grid{ display:grid; gap:var(--sp-4); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.section--ink .rule{ background:var(--line-dark); }
.sec-head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-5); align-items:end; }
.sec-head__title{ grid-column:1 / span 6; }
.sec-head__aside{ grid-column:9 / span 4; }
@media (max-width:900px){
  .sec-head{ grid-template-columns:1fr; }
  .sec-head__title,.sec-head__aside{ grid-column:1 / -1; }
}

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; min-height:50px; border:1px solid transparent; border-radius:var(--radius-sm);
  font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer; text-align:center;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-dark); }
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ background:var(--ink-2); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(20,23,26,.04); }
.section--ink .btn--ghost{ border-color:var(--line-dark); color:var(--paper); }
.section--ink .btn--ghost:hover{ border-color:var(--paper); background:rgba(245,242,236,.08); }
.btn--block{ width:100%; }
.btn--sm{ padding:11px 18px; min-height:42px; font-size:14px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
[href].btn, .link-arrow{ cursor:pointer; }
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600;
  padding-bottom:3px; border-bottom:1px solid var(--line); transition:border-color var(--t-fast), gap var(--t-fast);
}
.link-arrow:hover{ border-color:var(--accent); gap:12px; }
.link-arrow svg{ width:15px; height:15px; }

/* ── Хедер ─────────────────────────────────────────────────────────────── */
.header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(245,242,236,.86); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color var(--t-base), background var(--t-base);
}
.header.is-stuck{ border-bottom-color:var(--line); background:rgba(245,242,236,.96); }
.header__bar{ display:flex; align-items:center; gap:18px; min-height:76px; }
.logo{ display:flex; align-items:center; gap:12px; flex:none; }
.logo__mark{ width:34px; height:34px; flex:none; }
.logo__text{ line-height:1.05; }
.logo__name{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em; }
.logo__sub{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__link{
  padding:9px 9px; border-radius:var(--radius-sm); font-size:15px; font-weight:500;
  color:var(--ink-soft); transition:color var(--t-fast), background var(--t-fast); cursor:pointer;
  white-space:nowrap;
}
.nav__link:hover{ color:var(--ink); background:rgba(20,23,26,.05); }
.nav__link.is-active{ color:var(--ink); }
.nav__drop{ position:relative; }
.nav__menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:270px; padding:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu{ opacity:1; visibility:visible; transform:none; }
.nav__menu a{ display:block; padding:9px 12px; border-radius:var(--radius-sm); font-size:15px; color:var(--ink-soft); }
.nav__menu a:hover{ background:var(--accent-soft); color:var(--accent-dark); }
.nav__menu span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.header__cta{ display:flex; align-items:center; gap:12px; }
.header__phone{ font-size:16px; font-weight:600; white-space:nowrap; }
.header__phone span{ display:block; font-size:11.5px; font-weight:400; color:var(--muted); }
.burger{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

.mobile-nav{
  position:fixed; inset:0; z-index:var(--z-menu); background:var(--paper);
  transform:translateX(100%); visibility:hidden; transition:transform var(--t-base), visibility var(--t-base);
  overflow-y:auto; padding:var(--sp-4) var(--gutter) var(--sp-6);
}
.mobile-nav.is-open{ transform:none; visibility:visible; }
.mobile-nav__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.mobile-nav a{ display:block; padding:16px 0; border-bottom:1px solid var(--line); font-size:19px; font-family:var(--font-display); }
.mobile-nav__close{ width:46px; height:46px; border:1px solid var(--line); background:transparent; border-radius:var(--radius-sm); cursor:pointer; font-size:20px; }

@media (max-width:1480px){
  .header__phone{ display:none; }
  .nav__link{ padding:9px 10px; font-size:14.5px; }
}
@media (max-width:1220px){
  .logo__sub{ display:none; }
}
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  .header__cta{ margin-left:auto; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding-top:var(--sp-6); padding-bottom:0; }
.hero__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--sp-4); align-items:center; }
.hero__text{ grid-column:1 / span 6; padding-bottom:var(--sp-6); }
.hero__badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; margin-bottom:var(--sp-3);
  border:1px solid var(--line); border-radius:100px; font-size:13px; color:var(--ink-soft); background:rgba(255,255,255,.5);
}
.hero__badge b{ color:var(--accent); font-weight:600; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--sp-4); }
.hero__media{ grid-column:7 / span 6; position:relative; }
.hero__media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.hero__caption{
  position:absolute; left:-40px; bottom:38px; max-width:280px; padding:16px 18px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
}
.hero__caption strong{ font-family:var(--font-display); font-size:26px; display:block; line-height:1.1; }
@media (max-width:980px){
  .hero__text{ grid-column:1 / -1; padding-bottom:var(--sp-3); }
  .hero__media{ grid-column:1 / -1; }
  .hero__caption{ position:static; margin-top:16px; max-width:none; }
}
.stats{ border-top:1px solid var(--line); margin-top:var(--sp-5); }
.stats__row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats__item{ padding:var(--sp-3) var(--sp-3) var(--sp-3) 0; border-right:1px solid var(--line); }
.stats__item:last-child{ border-right:0; }
.stats__num{ font-family:var(--font-display); font-size:clamp(26px,2.6vw,38px); line-height:1; }
.stats__label{ font-size:13.5px; color:var(--muted); margin-top:8px; }
@media (max-width:820px){
  .stats__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats__item{ border-right:0; border-bottom:1px solid var(--line); }
}

/* ── Карточки проектов ─────────────────────────────────────────────────── */
.models{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--sp-4); }
.card{
  grid-column:span 4; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover{ border-color:var(--paper-3); box-shadow:var(--shadow-md); }
.card--wide{ grid-column:span 6; }
.card--tall .card__media{ aspect-ratio:4/5; }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.card:hover .card__media img{ transform:scale(1.03); }
.card__tag{
  position:absolute; top:14px; left:14px; padding:6px 11px; background:rgba(245,242,236,.94);
  border-radius:100px; font-size:12px; font-weight:600; letter-spacing:.04em;
}
.card__body{ padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card__title{ font-family:var(--font-display); font-size:24px; line-height:1.15; }
.card__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:var(--muted); }
.card__meta b{ color:var(--ink-soft); font-weight:500; }
.card__specs{ display:flex; gap:20px; padding-top:14px; border-top:1px solid var(--line); margin-top:auto; }
.card__spec span{ display:block; font-size:12px; color:var(--muted); }
.card__spec strong{ font-size:15.5px; font-weight:600; }
.card__price{ font-family:var(--font-display); font-size:23px; color:var(--accent-dark); }
@media (max-width:1080px){ .card, .card--wide{ grid-column:span 6; } }
@media (max-width:720px){ .card, .card--wide{ grid-column:1 / -1; } }

/* ── Фичи / преимущества ───────────────────────────────────────────────── */
.feature{ display:flex; flex-direction:column; gap:12px; padding:var(--sp-3) 0; border-top:1px solid var(--line); }
.feature__icon{ width:42px; height:42px; color:var(--accent); }
.feature__icon svg{ width:100%; height:100%; }
.feature p{ margin:0; color:var(--ink-soft); font-size:15.5px; }
.num-list{ counter-reset:n; display:grid; gap:0; }
.num-list li{ counter-increment:n; display:grid; grid-template-columns:64px 1fr; gap:var(--sp-3); padding:var(--sp-3) 0; border-top:1px solid var(--line); }
.num-list li::before{
  content:counter(n,decimal-leading-zero); font-family:var(--font-display); font-size:20px; color:var(--accent);
}
.num-list h3{ margin-bottom:6px; }
.num-list p{ margin:0; color:var(--ink-soft); }

/* ── Портфолио ─────────────────────────────────────────────────────────── */
.tiles{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.tile{ position:relative; overflow:hidden; border-radius:var(--radius-md); grid-column:span 2; aspect-ratio:1/1; }
.tile--w{ grid-column:span 4; aspect-ratio:16/10; }
.tile img{ width:100%; height:100%; object-fit:cover; }
.tile__cap{
  position:absolute; inset:auto 0 0 0; padding:22px; color:#fff;
  background:linear-gradient(to top, rgba(10,12,14,.78), rgba(10,12,14,0));
}
.tile__cap strong{ font-family:var(--font-display); font-size:20px; display:block; }
.tile__cap span{ font-size:13.5px; opacity:.85; }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tile,.tile--w{ grid-column:span 1; aspect-ratio:1/1; } }

/* ── Отзывы ────────────────────────────────────────────────────────────── */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--sp-3); display:flex; flex-direction:column; gap:16px; }
.quote__stars{ display:flex; gap:3px; color:var(--accent); }
.quote__stars svg{ width:16px; height:16px; }
.quote p{ font-size:16.5px; margin:0; color:var(--ink-soft); }
.quote__author{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }
.quote__avatar{ width:42px; height:42px; border-radius:50%; background:var(--paper-3); display:grid; place-items:center; font-family:var(--font-display); font-size:18px; }
.quote__author strong{ display:block; font-size:15px; }
.quote__author span{ font-size:13px; color:var(--muted); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  padding:22px 44px 22px 0; position:relative; font-family:var(--font-display);
  font-size:clamp(18px,1.7vw,22px); line-height:1.3; color:var(--ink);
}
.faq__q::after{
  content:''; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-7px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 13px no-repeat;
  transition:transform var(--t-base);
}
.faq__item.is-open .faq__q::after{ transform:rotate(45deg); }
.faq__a{ overflow:hidden; height:0; transition:height var(--t-base); }
.faq__a > div{ padding:0 60px var(--sp-3) 0; color:var(--ink-soft); font-size:16px; }

/* ── Формы ─────────────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.field label{ font-size:13.5px; font-weight:500; color:var(--ink-soft); }
.field .req{ color:var(--accent); }
.input, .select, .textarea{
  width:100%; padding:14px 15px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); font-size:16px; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
.textarea{ min-height:104px; resize:vertical; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-soft); cursor:pointer; }
.check input{ margin-top:4px; accent-color:var(--accent); width:17px; height:17px; }
.form-note{ font-size:13px; color:var(--muted); margin-top:12px; }
.form-status{ margin-top:14px; padding:14px 16px; border-radius:var(--radius-sm); font-size:15px; display:none; }
.form-status.is-ok{ display:block; background:rgba(63,107,74,.1); color:#2F5A3A; border:1px solid rgba(63,107,74,.3); }
.form-status.is-err{ display:block; background:rgba(158,42,42,.08); color:#8C2A2A; border:1px solid rgba(158,42,42,.28); }
.field.is-invalid .input, .field.is-invalid .textarea{ border-color:#B44A3A; }

/* ── Калькулятор ───────────────────────────────────────────────────────── */
.calc{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-4); align-items:start; }
.calc__panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--sp-3); }
.calc__row{ margin-bottom:22px; }
.calc__row:last-child{ margin-bottom:0; }
.calc__label{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; font-weight:500; margin-bottom:10px; }
.calc__label output{ font-family:var(--font-display); font-size:21px; color:var(--accent-dark); }
input[type=range]{ width:100%; accent-color:var(--accent); height:26px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{
  display:block; padding:10px 15px; border:1px solid var(--line); border-radius:100px;
  font-size:14px; cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.chip input:checked + span{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.calc__result{ background:var(--ink); color:var(--paper); border-radius:var(--radius-md); padding:var(--sp-3); position:sticky; top:100px; }
.calc__total{ font-family:var(--font-display); font-size:clamp(30px,3.4vw,44px); line-height:1.05; margin:6px 0 4px; }
.calc__break{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-dark); font-size:14.5px; }
.calc__break li{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.calc__break b{ font-weight:600; }
@media (max-width:980px){ .calc{ grid-template-columns:1fr; } .calc__result{ position:static; } }

/* ── CTA-полоса ────────────────────────────────────────────────────────── */
.cta-band{ background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); padding:clamp(28px,4vw,60px); display:grid; grid-template-columns:1.4fr .6fr; gap:var(--sp-4); align-items:center; }
.cta-band .btn--accent{ justify-self:end; }
@media (max-width:860px){ .cta-band{ grid-template-columns:1fr; } .cta-band .btn--accent{ justify-self:start; } }

/* ── Футер ─────────────────────────────────────────────────────────────── */
.footer{ background:var(--ink); color:rgba(245,242,236,.72); padding:var(--sp-6) 0 var(--sp-3); font-size:15px; }
.footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--sp-4); }
.footer h4{ color:var(--paper); font-family:var(--font-text); font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.footer li{ padding:6px 0; }
.footer .logo__name{ color:var(--paper); }
.footer .logo__sub{ color:rgba(245,242,236,.55); }
.footer__bottom{ margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; font-size:13.5px; }
.footer__legal{ max-width:760px; color:rgba(245,242,236,.5); }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* ── Плавающие кнопки: «Задать вопрос»/«Оставить заявку» (механика «Ателье») + мессенджеры ── */
.float{ position:fixed; right:22px; bottom:22px; z-index:var(--z-float); display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.float--left{ position:fixed; left:22px; bottom:22px; z-index:var(--z-float); display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.wgt{
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px 10px 11px; border:1px solid transparent;
  border-radius:100px; font:600 14.5px/1 var(--font-text); letter-spacing:.01em; cursor:pointer;
  box-shadow:0 8px 22px rgba(20,23,26,.25); position:relative;
  opacity:0; transform:translateY(28px); pointer-events:none;
}
.wgt.is-in{ opacity:1; transform:none; pointer-events:auto; transition:opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.wgt__ico{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; }
.wgt__ico svg{ width:17px; height:17px; }
.wgt--chat{ background:var(--paper); color:var(--ink); border-color:var(--line); }
.wgt--chat .wgt__ico{ background:var(--accent-soft); color:var(--accent-dark); }
.wgt--lead{ background:var(--accent); color:#fff; }
.wgt--lead .wgt__ico{ background:rgba(255,255,255,.18); color:#fff; }
.wgt__dot{ position:absolute; top:8px; right:8px; width:10px; height:10px; border-radius:50%; background:#E25B3E; border:2px solid var(--paper); display:none; }
.wgt.is-in.wgt--chat{ animation:wgtGlowA 7s ease-in-out 1.1s infinite; }
.wgt.is-in.wgt--lead{ animation:wgtGlowB 9.5s ease-in-out 2.4s infinite; }
@keyframes wgtGlowA{ 0%,16%,100%{ box-shadow:0 8px 22px rgba(20,23,26,.25); } 5%{ box-shadow:0 8px 22px rgba(20,23,26,.25), 0 0 0 10px rgba(158,91,42,.26); } 10%{ box-shadow:0 8px 22px rgba(20,23,26,.25), 0 0 0 4px rgba(158,91,42,.13); } }
@keyframes wgtGlowB{ 0%,14%,100%{ box-shadow:0 8px 22px rgba(20,23,26,.25); } 4%{ box-shadow:0 8px 22px rgba(20,23,26,.25), 0 0 0 10px rgba(158,91,42,.30); } 8%{ box-shadow:0 8px 22px rgba(20,23,26,.25), 0 0 0 4px rgba(158,91,42,.15); } }
@media (prefers-reduced-motion:reduce){ .wgt{ opacity:1; transform:none; pointer-events:auto; } .wgt.is-in{ animation:none; } }
.float__icons{ display:flex; gap:10px; }
.fbtn{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 22px rgba(20,23,26,.22); transition:transform var(--t-fast);
}
.fbtn:hover{ transform:translateY(-2px); }
.fbtn svg{ width:22px; height:22px; }
.fbtn--tg{ background:#2AABEE; }
.fbtn--wa{ background:#25D366; }
.fbtn--up{ background:var(--ink); color:var(--paper); }
.chat-panel{ position:fixed; left:22px; bottom:206px; z-index:var(--z-float); width:372px; max-width:calc(100vw - 28px); height:540px; max-height:calc(100vh - 236px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-md); overflow:hidden; transform:translateY(14px) scale(.985); opacity:0; pointer-events:none; transition:transform .22s ease, opacity .22s ease; }
.chat-panel.is-open{ transform:none; opacity:1; pointer-events:auto; }
.chat-panel__head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; letter-spacing:.01em; }
.chat-panel__close{ background:none; border:0; color:var(--paper); font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.chat-panel__close:hover{ color:#D79A62; }
.chat-panel iframe{ border:0; width:100%; height:calc(100% - 46px); display:block; }
@media (max-width:720px){
  .float{ right:14px; bottom:14px; gap:8px; }
  .wgt{ padding:8px 15px 8px 9px; font-size:13px; }
  .wgt__ico{ width:28px; height:28px; } .wgt__ico svg{ width:15px; height:15px; }
  .fbtn{ width:42px; height:42px; } .fbtn svg{ width:20px; height:20px; }
  .float--left{ left:14px; bottom:14px; gap:8px; }
  .chat-panel{ left:14px; bottom:172px; height:calc(100vh - 196px); }
}

/* ── Хлебные крошки и герой внутренних страниц ─────────────────────────── */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); padding:22px 0 0; }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ opacity:.5; }
.page-head{ padding:var(--sp-4) 0 var(--sp-5); border-bottom:1px solid var(--line); }
.page-head__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--sp-4); align-items:end; margin-top:var(--sp-3); }
.page-head h1{ grid-column:1 / span 7; }
.page-head__aside{ grid-column:9 / span 4; }
@media (max-width:900px){ .page-head h1,.page-head__aside{ grid-column:1 / -1; } }

/* ── Контентные страницы ───────────────────────────────────────────────── */
.prose h2{ margin:var(--sp-5) 0 var(--sp-2); }
.prose h3{ margin:var(--sp-4) 0 var(--sp-2); }
.prose ul{ margin:0 0 var(--sp-3); }
.prose ul li{ position:relative; padding:6px 0 6px 26px; color:var(--ink-soft); }
.prose ul li::before{ content:''; position:absolute; left:2px; top:16px; width:8px; height:1px; background:var(--accent); }
.prose--cols{ columns:2; column-gap:var(--sp-4); }
@media (max-width:820px){ .prose--cols{ columns:1; } }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; }
table.price{ width:100%; border-collapse:collapse; font-size:15px; min-width:640px; }
table.price th, table.price td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
table.price th{ background:var(--paper-2); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
table.price tr:last-child td{ border-bottom:0; }
table.price td:last-child, table.price th:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.price tbody tr:nth-child(even) td{ background:rgba(237,231,220,.35); }
table.price tbody tr:hover td{ background:rgba(237,231,220,.6); }
/* Таблицы сравнения в статьях блога: ровные колонки, без «ценовой» стилистики последней колонки */
.prose table.price{ table-layout:fixed; }
.prose table.price th:first-child, .prose table.price td:first-child{ width:26%; font-weight:600; color:var(--ink-soft); }
.prose table.price th:last-child, .prose table.price td:last-child{ text-align:left; white-space:normal; font-variant-numeric:normal; }
.badge-line{ display:inline-block; padding:5px 10px; border:1px solid var(--line); border-radius:100px; font-size:12.5px; color:var(--ink-soft); }

/* ── Утилиты ───────────────────────────────────────────────────────────── */
.mt-0{ margin-top:0; } .mt-2{ margin-top:var(--sp-2); } .mt-3{ margin-top:var(--sp-3); }
.mt-4{ margin-top:var(--sp-4); } .mt-5{ margin-top:var(--sp-5); }
.mb-0{ margin-bottom:0; } .mb-3{ margin-bottom:var(--sp-3); } .mb-4{ margin-bottom:var(--sp-4); }
.center{ text-align:center; } .flex{ display:flex; } .between{ justify-content:space-between; }
.items-center{ align-items:center; } .gap-2{ gap:var(--sp-2); } .gap-3{ gap:var(--sp-3); }
.wrap-flex{ flex-wrap:wrap; } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sticky-side{ position:sticky; top:100px; }

/* ── Появление при скролле ─────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity var(--t-slow), transform var(--t-slow);
  transition-delay:var(--d, 0ms);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .card:hover .card__media img{ transform:none; }
}

/* ── Мобильная перестройка сеток ───────────────────────────────────────
   12-колоночные сетки с крупным gap не сжимаются ниже ~440px:
   на узких экранах переводим их в одну колонку.
   min-width:0 обязателен: без него grid-элемент с таблицей 640px не сжимается. */
.grid > *, .models > *, .calc > *, .tiles > *, .stats__row > *, .footer__grid > *{ min-width:0; }
.table-wrap{ min-width:0; }
@media (max-width:980px){
  .hero__grid, .sec-head, .page-head__grid, .models{ grid-template-columns:1fr; gap:var(--sp-3); }
  .hero__text, .hero__media, .sec-head__title, .sec-head__aside,
  .page-head h1, .page-head__aside, .card, .card--wide{ grid-column:1 / -1; }
  .hero__caption{ left:auto; }
  .grid{ gap:var(--sp-3); }
  .grid--3, .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .calc{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  body{ font-size:16.5px; }
  .grid--2, .grid--3, .grid--4, .tiles{ grid-template-columns:1fr; }
  .tile, .tile--w{ grid-column:1 / -1; aspect-ratio:4/3; }
  .stats__row{ grid-template-columns:1fr; }
  .stats__item{ border-right:0; border-bottom:1px solid var(--line); }
  .cta-band{ padding:26px 22px; }
  .feature__icon{ width:38px; height:38px; }
  .header__bar{ min-height:68px; gap:10px; }
  .logo__name{ font-size:18px; }
  .logo__sub{ font-size:9.5px; letter-spacing:.1em; }
}


.page[hidden]{ display:none !important; }
.onefile-note{ position:fixed; left:0; right:0; bottom:0; z-index:99; padding:6px 14px; font-size:12px; letter-spacing:.04em; text-align:center; color:rgba(255,255,255,.55); background:rgba(20,23,26,.92); border-top:1px solid rgba(255,255,255,.1); }


/* Многостраничная сборка */
.page{ display:block; }