:root {
    --ink: #0d0d0d;
    --paper: #f5f0e8;
    --warm: #e8dcc8;
    --steel: #2a3540;
    --rust: #c44a1a;
    --ice: #d4eaf5;
    --frost: #6aadcc;
    --gold: #c9963a;
    --mid: #6b7a86;
    --gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  #pb{position:fixed;top:0;left:0;height:3px;background:var(--rust);z-index:9999;width:0%;transition:width .1s;pointer-events:none}
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; font-size: 16px; }

  body {
    font-family: 'Golos Text', sans-serif;
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
  }

  /* ──────────── NAV ──────────── */
  nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--steel);
    padding: .75rem var(--gap);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
  }
  .nav-logo {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900; font-size: 1rem;
    color: var(--ice); text-decoration: none; white-space: nowrap;
    letter-spacing: -.02em;
  }
  .nav-logo span { color: var(--rust); }
  .nav-links {
    display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap;
  }
  .nav-links a {
    color: #aec1cd; text-decoration: none; font-size: .85rem;
    font-weight: 500; transition: color .2s;
    white-space: nowrap;
  }
  .nav-links a:hover { color: var(--ice); }

  /* ──────────── HERO ──────────── */
  .hero {
    background: var(--steel);
    color: white;
    padding: clamp(3rem, 8vw, 7rem) var(--gap) clamp(2.5rem, 6vw, 5rem);
    position: relative; overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: 
      radial-gradient(ellipse 60% 80% at 90% 50%, rgba(106,173,204,.15) 0%, transparent 70%),
      radial-gradient(ellipse 40% 60% at 10% 80%, rgba(196,74,26,.08) 0%, transparent 60%);
    pointer-events: none;
  }
  .hero-badge {
    display: inline-block;
    background: rgba(106,173,204,.15);
    border: 1px solid rgba(106,173,204,.35);
    color: var(--frost);
    font-size: .78rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; padding: .35rem .9rem; border-radius: 2rem;
    margin-bottom: 1.5rem;
  }
  .hero h1 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    max-width: 780px;
    margin-bottom: 1.25rem;
  }
  .hero h1 em {
    font-style: normal; color: var(--frost);
    display: block; font-size: .65em; font-weight: 400;
    letter-spacing: .05em; text-transform: uppercase;
    margin-bottom: .4rem;
  }
  .hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: #aec1cd; max-width: 560px; line-height: 1.65;
    margin-bottom: 2.5rem;
  }
  .hero-stats {
    display: flex; gap: 2.5rem; flex-wrap: wrap;
  }
  .stat { display: flex; flex-direction: column; }
  .stat-n {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: white; letter-spacing: -.03em;
  }
  .stat-n span { color: var(--frost); }
  .stat-label { font-size: .8rem; color: #7a9bac; margin-top: .2rem; }

  /* ──────────── SCROLL INDICATOR ──────────── */
  .sections-bar {
    background: var(--warm);
    border-bottom: 2px solid var(--ink);
    padding: .9rem var(--gap);
    display: flex; gap: .75rem; overflow-x: auto;
    scrollbar-width: none;
  }
  .sections-bar::-webkit-scrollbar { display: none; }
  .sections-bar a {
    white-space: nowrap; font-size: .82rem; font-weight: 600;
    color: var(--ink); text-decoration: none;
    padding: .4rem 1rem; border-radius: 2rem;
    border: 1.5px solid var(--ink);
    transition: all .18s;
    flex-shrink: 0;
  }
  .sections-bar a:hover {
    background: var(--ink); color: var(--paper);
  }

  /* ──────────── LAYOUT ──────────── */
  .container {
    max-width: 1200px; margin: 0 auto;
    padding: 0 var(--gap);
  }
  section { padding: clamp(2.5rem, 6vw, 5rem) 0; }

  /* ──────────── SECTION HEADERS ──────────── */
  .section-label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: .9rem;
  }
  .section-label::before {
    content: ''; display: block;
    width: 24px; height: 2px; background: var(--rust);
  }
  h2 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.12; letter-spacing: -.03em;
    margin-bottom: 1rem;
  }
  .lead {
    font-size: 1.05rem; color: #4a5560; line-height: 1.7;
    max-width: 680px; margin-bottom: 2.5rem;
  }

  /* ──────────── WHAT IS ──────────── */
  #chto-eto { background: white; }
  .explainer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: start;
  }
  @media (max-width: 720px) { .explainer-grid { grid-template-columns: 1fr; } }

  .explainer-text p {
    font-size: 1.05rem; line-height: 1.75; color: #333;
    margin-bottom: 1.2rem;
  }
  .explainer-text strong { color: var(--rust); }

  .cutaway {
    background: var(--steel);
    border-radius: 12px; overflow: hidden;
    position: relative;
  }
  .cutaway-title {
    padding: 1.2rem 1.5rem;
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: .85rem;
    color: var(--frost); letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .door-diagram {
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: .6rem;
  }
  .door-layer {
    border-radius: 6px; padding: .9rem 1.1rem;
    display: flex; justify-content: space-between; align-items: center;
    font-size: .88rem;
  }
  .door-layer .layer-name { font-weight: 600; color: white; }
  .door-layer .layer-info { font-size: .78rem; color: rgba(255,255,255,.55); text-align: right; }
  .layer-outer { background: rgba(106,173,204,.2); border: 1px solid rgba(106,173,204,.4); }
  .layer-thermal {
    background: rgba(196,74,26,.25); border: 2px solid var(--rust);
    position: relative;
  }
  .layer-thermal .badge-tr {
    position: absolute; top: -.75rem; right: 1rem;
    background: var(--rust); color: white;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: .2rem .6rem; border-radius: 2rem;
  }
  .layer-insul { background: rgba(201,150,58,.18); border: 1px solid rgba(201,150,58,.4); }
  .layer-inner { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
  .arrow-cold, .arrow-warm {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600; padding: 0 .5rem;
  }
  .arrow-cold { color: var(--frost); }
  .arrow-warm { color: #e07a50; justify-content: flex-end; }

  /* ──────────── HOW IT WORKS ──────────── */
  #kak-rabotaet { background: var(--paper); }
  .mechanism-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem; margin-top: 2rem;
  }
  .mcard {
    background: white;
    border-radius: 12px; padding: 1.75rem;
    border: 1.5px solid #e0d8cc;
    position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
  }
  .mcard:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.07); }
  .mcard::before {
    content: attr(data-n);
    position: absolute; top: -1rem; right: 1rem;
    font-family: 'Unbounded', sans-serif;
    font-weight: 900; font-size: 5rem; color: var(--warm);
    line-height: 1; pointer-events: none;
  }
  .mcard-icon { font-size: 2rem; margin-bottom: 1rem; }
  .mcard h3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: .95rem;
    letter-spacing: -.02em; margin-bottom: .65rem;
  }
  .mcard p { font-size: .9rem; line-height: 1.65; color: #555; }

  /* ──────────── COMPARISON ──────────── */
  #sravnenie { background: var(--steel); color: white; }
  #sravnenie h2, #sravnenie .section-label { color: white; }
  #sravnenie .section-label { color: var(--frost); }
  #sravnenie .section-label::before { background: var(--frost); }
  #sravnenie .lead { color: #aec1cd; }

  .compare-table-wrap { overflow-x: auto; margin-top: 1.5rem; }
  .compare-table {
    width: 100%; border-collapse: collapse;
    font-size: .92rem; min-width: 560px;
  }
  .compare-table th {
    background: rgba(255,255,255,.06);
    padding: .9rem 1.1rem; text-align: left;
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: .78rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--frost);
    border-bottom: 2px solid rgba(106,173,204,.3);
  }
  .compare-table td {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #d0dde5;
  }
  .compare-table tr:hover td { background: rgba(255,255,255,.03); }
  .yes { color: #6acc8f; font-weight: 700; }
  .no { color: #cc6a6a; }
  .partial { color: var(--gold); }
  .best-row td { background: rgba(106,173,204,.1) !important; }
  .best-badge {
    display: inline-block; background: var(--rust);
    color: white; font-size: .72rem; font-weight: 700;
    padding: .15rem .55rem; border-radius: 2rem; margin-left: .4rem;
  }

  /* ──────────── TYPES ──────────── */
  #vidy { background: white; }
  .types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem; margin-top: 2rem;
  }
  .type-card {
    border-radius: 12px; overflow: hidden;
    border: 1.5px solid #e0d8cc;
    transition: transform .2s, box-shadow .2s;
  }
  .type-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
  .type-head {
    padding: 1.5rem 1.5rem 1rem;
    display: flex; align-items: flex-start; gap: 1rem;
  }
  .type-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; flex-shrink: 0;
  }
  .type-card h3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: .95rem;
    letter-spacing: -.02em; margin-bottom: .3rem;
  }
  .type-card .price-range {
    font-size: .82rem; color: var(--rust); font-weight: 600;
  }
  .type-body {
    padding: 0 1.5rem 1.5rem;
    font-size: .88rem; line-height: 1.65; color: #555;
  }
  .type-tags {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem;
  }
  .tag {
    font-size: .75rem; font-weight: 600; padding: .25rem .7rem;
    border-radius: 2rem; border: 1.5px solid;
  }
  .tag-pro { border-color: #6acc8f; color: #2d7a4a; background: #f0fbf4; }
  .tag-con { border-color: #cc6a6a; color: #7a2d2d; background: #fdf0f0; }

  /* ──────────── RATINGS ──────────── */
  #reyting { background: var(--paper); }
  .rating-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; margin-top: 2rem;
  }
  .brand-card {
    background: white; border-radius: 12px; padding: 1.5rem;
    border: 1.5px solid #e0d8cc;
    transition: transform .2s, box-shadow .2s;
  }
  .brand-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.07); }
  .brand-top {
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 1rem;
  }
  .brand-name {
    font-family: 'Unbounded', sans-serif;
    font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em;
  }
  .brand-score {
    background: var(--steel); color: white;
    font-family: 'Unbounded', sans-serif;
    font-weight: 900; font-size: 1.1rem;
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .brand-score.top { background: var(--rust); }
  .brand-series { font-size: .82rem; color: var(--mid); margin-bottom: .9rem; }
  .stars { color: var(--gold); font-size: 1rem; margin-bottom: .7rem; }
  .brand-pros {
    font-size: .85rem; line-height: 1.65;
    color: #444;
  }
  .brand-pros li { margin-bottom: .3rem; padding-left: 1.1rem; position: relative; }
  .brand-pros li::before {
    content: '✓'; position: absolute; left: 0;
    color: #6acc8f; font-weight: 700; font-size: .8rem;
  }
  .brand-price {
    margin-top: 1rem; padding-top: .9rem;
    border-top: 1px solid #e8e0d5;
    font-size: .82rem; color: var(--mid);
  }
  .brand-price strong { color: var(--rust); font-size: .95rem; }

  /* ──────────── SELECTION GUIDE ──────────── */
  #kak-vybrat { background: white; }
  .guide-steps {
    counter-reset: steps;
    margin-top: 2rem; display: flex; flex-direction: column; gap: 0;
  }
  .guide-step {
    counter-increment: steps;
    display: grid; grid-template-columns: auto 1fr;
    gap: 1.5rem; padding: 2rem 0;
    border-bottom: 1px solid #e8e0d5;
  }
  .guide-step:last-child { border-bottom: none; }
  .step-num {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900; font-size: 2.5rem;
    color: var(--warm); line-height: 1;
    min-width: 3.5rem; text-align: center;
    padding-top: .2rem;
  }
  .step-content h3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: 1.05rem;
    letter-spacing: -.02em; margin-bottom: .65rem;
  }
  .step-content p { font-size: .95rem; line-height: 1.7; color: #444; }
  .step-content .highlight-box {
    background: var(--ice); border-left: 3px solid var(--frost);
    padding: .75rem 1rem; border-radius: 0 8px 8px 0;
    margin-top: .75rem; font-size: .88rem; color: var(--steel);
    line-height: 1.65;
  }

  /* ──────────── INSTALLATION ──────────── */
  #ustanovka { background: var(--warm); }
  .install-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem; margin-top: 2rem;
  }
  @media (max-width: 720px) { .install-grid { grid-template-columns: 1fr; } }
  .install-steps { display: flex; flex-direction: column; gap: 1rem; }
  .install-step {
    background: white; border-radius: 10px;
    padding: 1.2rem 1.4rem;
    display: flex; gap: 1rem; align-items: flex-start;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }
  .istep-n {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--steel); color: white;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Unbounded', sans-serif;
    font-weight: 900; font-size: .82rem; flex-shrink: 0;
  }
  .install-step h4 {
    font-weight: 700; font-size: .92rem; margin-bottom: .3rem;
  }
  .install-step p { font-size: .85rem; color: #555; line-height: 1.6; }

  .mistakes-list {
    background: white; border-radius: 12px; padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }
  .mistakes-list h3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: 1rem; margin-bottom: 1.2rem;
    color: var(--rust);
  }
  .mistake {
    display: flex; gap: .75rem;
    padding: .75rem 0; border-bottom: 1px solid #f0ece4;
    font-size: .88rem; line-height: 1.6;
  }
  .mistake:last-child { border-bottom: none; }
  .mistake .emoji { font-size: 1.1rem; flex-shrink: 0; }
  .mistake p { color: #444; }
  .mistake strong { color: var(--ink); }

  /* ──────────── FAQ ──────────── */
  #faq { background: var(--paper); }
  .faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: .6rem; }
  .faq-item {
    background: white; border-radius: 10px;
    border: 1.5px solid #e0d8cc; overflow: hidden;
  }
  .faq-q {
    padding: 1.1rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    cursor: pointer; font-weight: 600; font-size: .95rem;
    user-select: none; transition: background .15s;
  }
  .faq-q:hover { background: var(--warm); }
  .faq-arrow {
    color: var(--rust); font-size: 1.1rem; flex-shrink: 0;
    transition: transform .25s;
  }
  .faq-item.open .faq-arrow { transform: rotate(180deg); }
  .faq-a {
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    font-size: .92rem; line-height: 1.75; color: #444;
  }
  .faq-item.open .faq-a { max-height: 500px; }
  .faq-a-inner { padding: 0 1.5rem 1.25rem; }

  /* ──────────── CITIES ──────────── */
  #goroda { background: white; }
  .cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem; margin-top: 2rem;
  }
  .city-card {
    background: var(--paper); border-radius: 10px;
    padding: 1.2rem; text-align: center;
    border: 1.5px solid #e0d8cc;
    text-decoration: none; color: inherit;
    transition: all .18s;
  }
  .city-card:hover {
    background: var(--steel); color: white;
    border-color: var(--steel); transform: translateY(-2px);
  }
  .city-card:hover .city-sub { color: var(--frost); }
  .city-name {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: .88rem;
    letter-spacing: -.02em; margin-bottom: .3rem;
  }
  .city-sub { font-size: .78rem; color: var(--mid); }

  /* ──────────── GLOSSARY ──────────── */
  #glossariy { background: var(--steel); color: white; }
  #glossariy h2, #glossariy .section-label { color: white; }
  #glossariy .section-label { color: var(--frost); }
  #glossariy .section-label::before { background: var(--frost); }
  #glossariy .lead { color: #aec1cd; }
  .glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem; margin-top: 2rem;
  }
  .gterm {
    background: rgba(255,255,255,.05); border-radius: 10px;
    padding: 1.25rem; border: 1px solid rgba(255,255,255,.08);
  }
  .gterm dt {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: .88rem;
    color: var(--frost); margin-bottom: .5rem;
  }
  .gterm dd { font-size: .87rem; line-height: 1.65; color: #aec1cd; }

  /* ──────────── FOOTER ──────────── */

  /* MOBILE */
  .mob-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.3rem;background:none;border:none}
  .mob-btn span{display:block;width:22px;height:2px;background:var(--ice);border-radius:1px}
  .mob-nav{display:none;position:fixed;inset:0;background:var(--steel);z-index:500;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}
  .mob-nav.open{display:flex}
  .mob-nav a{font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ice);text-decoration:none}
  .mob-nav a:hover{color:var(--frost)}
  .mob-close{position:absolute;top:1.5rem;right:1.5rem;font-size:1.5rem;color:white;cursor:pointer;background:none;border:none}
  @media(max-width:768px){.nav-links{display:none}.mob-btn{display:flex}.hero-stats{gap:1.2rem}}

  /* ALERT BAR */
  .alert-bar{background:linear-gradient(135deg,#1a2a35,#2a3540);color:white;padding:.6rem var(--gap);display:flex;align-items:center;justify-content:center;gap:1rem;font-size:.8rem;flex-wrap:wrap;text-align:center}
  .alert-bar strong{color:var(--frost)}.alert-bar a{color:var(--gold);text-decoration:none;font-weight:600}

  /* AUDIENCE TABS */
  .aud-tabs{display:flex;gap:0;margin-top:1.75rem;border-radius:10px;overflow:hidden;max-width:400px}
  .aud-tab{flex:1;padding:.6rem .85rem;text-align:center;cursor:pointer;font-weight:600;font-size:.79rem;background:rgba(255,255,255,.07);color:#aec1cd;border:none;font-family:'Golos Text',sans-serif;transition:all .2s}
  .aud-tab.active{background:var(--rust);color:white}
  .aud-cnt{display:none;margin-top:.65rem;padding:.85rem 1rem;background:rgba(255,255,255,.06);border-radius:0 0 10px 10px;max-width:400px}
  .aud-cnt.active{display:block}
  .aud-cnt p{font-size:.83rem;color:#aec1cd;line-height:1.65}
  .aud-cnt a{color:var(--frost);text-decoration:none;font-weight:600}
  .hero-btns{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
  .btn-p{background:var(--rust);color:white;padding:.7rem 1.4rem;border-radius:2rem;text-decoration:none;font-weight:700;font-size:.87rem;transition:background .2s;display:inline-block}
  .btn-p:hover{background:#a83c14}
  .btn-s{background:rgba(255,255,255,.08);color:white;padding:.7rem 1.4rem;border-radius:2rem;text-decoration:none;font-weight:600;font-size:.87rem;border:1.5px solid rgba(255,255,255,.2);display:inline-block;transition:all .2s}
  .btn-s:hover{background:rgba(255,255,255,.14)}
  .sections-bar a.active{background:var(--ink);color:var(--paper)}

  /* CALCULATOR */
  #kalkulator{background:white}
  .cw{background:var(--steel);border-radius:16px;overflow:hidden;margin-top:1.75rem}
  .ch{padding:1.3rem 1.7rem;background:rgba(0,0,0,.15);display:flex;align-items:center;gap:1rem}
  .ch-icon{font-size:1.7rem}
  .ch h3{font-family:'Unbounded',sans-serif;font-weight:800;font-size:.95rem;color:white;letter-spacing:-.02em}
  .ch p{font-size:.76rem;color:#7a9bac;margin-top:.12rem}
  .cb{padding:1.4rem 1.7rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  @media(max-width:700px){.cb{grid-template-columns:1fr}}
  .cg label{display:block;font-size:.73rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--frost);margin-bottom:.5rem}
  .cs{width:100%;padding:.68rem .9rem;border-radius:8px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:white;font-family:'Golos Text',sans-serif;font-size:.87rem;outline:none;cursor:pointer}
  .cs option{background:#2a3540;color:white}
  .cr{grid-column:1/-1;background:rgba(0,0,0,.2);border-radius:12px;padding:1.3rem}
  .cri{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
  @media(max-width:580px){.cri{grid-template-columns:1fr 1fr}}
  .cm{text-align:center}
  .cm .v{font-family:'Unbounded',sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:-.03em;margin-bottom:.22rem}
  .cm .l{font-size:.7rem;color:#7a9bac}
  .cv{grid-column:1/-1;padding:.85rem 1rem;border-radius:10px;font-size:.85rem;line-height:1.65;font-weight:500;margin-top:.4rem}
  .vy{background:rgba(45,138,82,.2);border:1.5px solid rgba(45,138,82,.4);color:#a8e8c0}
  .vp{background:rgba(201,150,58,.15);border:1.5px solid rgba(201,150,58,.35);color:#f0d48a}
  .vn{background:rgba(106,173,204,.12);border:1.5px solid rgba(106,173,204,.3);color:#aee0f5}

  /* PRICE TABLE */
  #ceny{background:white}
  .pf{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
  .pf-b{padding:.36rem .95rem;border-radius:2rem;border:1.5px solid #d0c8bc;background:white;font-family:'Golos Text',sans-serif;font-size:.79rem;font-weight:600;cursor:pointer;color:var(--ink);transition:all .15s}
  .pf-b.on,.pf-b:hover{background:var(--steel);color:white;border-color:var(--steel)}
  .pt{width:100%;border-collapse:collapse;font-size:.85rem}
  .pt th{background:var(--steel);color:var(--frost);padding:.78rem .9rem;text-align:left;font-family:'Unbounded',sans-serif;font-weight:700;font-size:.69rem;letter-spacing:.05em;text-transform:uppercase}
  .pt td{padding:.72rem .9rem;border-bottom:1px solid #e8e0d5;color:#333;vertical-align:middle}
  .pt tr:hover td{background:#faf7f2}
  .pt tr.hid{display:none}
  .ptag{font-family:'Unbounded',sans-serif;font-weight:800;font-size:.88rem;color:var(--rust)}
  .pb0{font-size:.68rem;font-weight:700;padding:.16rem .55rem;border-radius:2rem;background:#e8f5fb;color:#1a6a8a}
  .pb1{font-size:.68rem;font-weight:700;padding:.16rem .55rem;border-radius:2rem;background:#fdf5ea;color:#7a4a10}
  .pb2{font-size:.68rem;font-weight:700;padding:.16rem .55rem;border-radius:2rem;background:#faf0f0;color:#7a1a1a}
  .rst{color:var(--gold)}

  /* BRAND FILTER + BADGES */
  .brand-badge{display:inline-block;font-size:.63rem;font-weight:700;padding:.12rem .48rem;border-radius:2rem;margin-bottom:.28rem}
  .bb0{background:#e8f5fb;color:#1a6a8a}
  .bb1{background:#fdf5ea;color:#7a4a10}
  .bb2{background:#faf0f0;color:#7a1a1a}
  .brand-card.hid{display:none}
  .rfilt{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}

  /* CHECKLIST */
  #proverka{background:white}
  .clw{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
  @media(max-width:720px){.clw{grid-template-columns:1fr}}
  .clb{background:var(--paper);border-radius:12px;padding:1.4rem;border:1.5px solid #e0d8cc}
  .clb h3{font-family:'Unbounded',sans-serif;font-weight:700;font-size:.88rem;margin-bottom:1rem;letter-spacing:-.02em}
  .ci{display:flex;align-items:flex-start;gap:.65rem;padding:.52rem 0;border-bottom:1px solid #e8e0d5;cursor:pointer;user-select:none}
  .ci:last-of-type{border-bottom:none}
  .cx{width:18px;height:18px;border-radius:5px;border:2px solid #d0c8bc;flex-shrink:0;margin-top:.1rem;display:flex;align-items:center;justify-content:center;background:white;font-size:.68rem;transition:all .2s}
  .ci.ck .cx{background:#2d8a52;border-color:#2d8a52;color:white}
  .ci.ck .ct{color:#999;text-decoration:line-through}
  .ct{font-size:.82rem;color:#444;line-height:1.5}
  .clpbar{margin-top:.85rem;background:#e8e0d5;border-radius:2rem;height:5px;overflow:hidden}
  .clpfill{height:100%;background:#2d8a52;border-radius:2rem;transition:width .3s}
  .clscore{font-size:.76rem;color:var(--mid);margin-top:.4rem;font-weight:600}

  /* FOR BUSINESS */
  #dlya-biznesa{background:var(--steel);color:white}
  #dlya-biznesa h2,#dlya-biznesa .section-label{color:white}
  #dlya-biznesa .section-label{color:var(--frost)}
  #dlya-biznesa .section-label::before{background:var(--frost)}
  #dlya-biznesa .lead{color:#aec1cd}
  .bizg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin-top:2rem}
  .bizc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.4rem;transition:all .2s}
  .bizc:hover{background:rgba(255,255,255,.09);border-color:rgba(106,173,204,.4);transform:translateY(-2px)}
  .bizi{font-size:1.7rem;margin-bottom:.85rem}
  .bizc h3{font-family:'Unbounded',sans-serif;font-weight:700;font-size:.88rem;color:white;letter-spacing:-.02em;margin-bottom:.5rem}
  .bizc p{font-size:.81rem;color:#aec1cd;line-height:1.65;margin-bottom:.85rem}
  .bizb{display:inline-block;padding:.42rem .95rem;border-radius:2rem;background:rgba(106,173,204,.15);border:1px solid rgba(106,173,204,.4);color:var(--frost);font-size:.76rem;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s}
  .bizb:hover{background:rgba(106,173,204,.3);color:white}
  .bizst{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;padding:1.3rem;background:rgba(0,0,0,.15);border-radius:12px;text-align:center}
  .bisn{font-family:'Unbounded',sans-serif;font-weight:900;font-size:1.4rem;color:white;letter-spacing:-.03em}
  .bisn span{color:var(--frost)}
  .bisl{font-size:.7rem;color:#7a9bac;margin-top:.12rem}

  /* CTA BANNER */
  .cta-ban{background:linear-gradient(135deg,var(--rust),#8a2810);color:white;padding:clamp(2.5rem,5vw,4rem) var(--gap);text-align:center}
  .cta-ban h2{color:white;max-width:650px;margin:0 auto .85rem}
  .cta-ban p{color:rgba(255,255,255,.8);max-width:460px;margin:0 auto 1.75rem;line-height:1.65}
  .cta-acts{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
  .cta-w{background:white;color:var(--rust);padding:.78rem 1.7rem;border-radius:2rem;text-decoration:none;font-weight:800;font-size:.9rem;display:inline-block;transition:all .2s}
  .cta-w:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
  .cta-o{background:transparent;color:white;padding:.78rem 1.7rem;border-radius:2rem;font-weight:700;font-size:.9rem;border:2px solid rgba(255,255,255,.5);display:inline-block;cursor:pointer;transition:all .2s}
  .cta-o:hover{background:rgba(255,255,255,.1);border-color:white}

  footer {
    background: #080e12; color: #7a8f9a;
    padding: 3rem var(--gap) 2rem;
  }
  .footer-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem; margin-bottom: 2.5rem;
  }
  @media (max-width: 680px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
  .footer-brand {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900; font-size: 1.1rem; color: white;
    margin-bottom: .75rem;
  }
  .footer-brand span { color: var(--rust); }
  .footer-desc { font-size: .85rem; line-height: 1.65; }
  .footer-col h4 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: .78rem; letter-spacing: .06em;
    text-transform: uppercase; color: white;
    margin-bottom: 1rem;
  }
  .footer-col a {
    display: block; color: #7a8f9a; text-decoration: none;
    font-size: .85rem; margin-bottom: .55rem; transition: color .15s;
  }
  .footer-col a:hover { color: var(--frost); }
  .footer-bottom {
    max-width: 1200px; margin: 0 auto;
    padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06);
    font-size: .8rem; color: #4a5f6a;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  }

  /* ──────────── ANIMATIONS ──────────── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero h1, .hero-badge, .hero-sub, .hero-stats {
    animation: fadeUp .7s ease both;
  }
  .hero-badge { animation-delay: .05s; }
  .hero h1    { animation-delay: .12s; }
  .hero-sub   { animation-delay: .22s; }
  .hero-stats { animation-delay: .32s; }

  /* Responsive */
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-stats { gap: 1.5rem; }
  }

  /* ──────────── INLINE SECTION BOT ──────────── */


  .msg {
    display: flex; gap: .6rem; align-items: flex-start;
  }


    40% { transform: scale(1.1); opacity: 1; }
  }