:root {
    --bg:           #F6F6F6;
    --bg-alt:       #E4E4E4;
    --card:         #E2E2E2;
    --card-soft:    #E9E9E9;
    --card-dark:    #D6D6D6;
    --green:        #46B04A;
    --green-hover:  #3DA241;
    --green-soft:   #D2ECD3;
    --green-pale:   #E6F2E6;
    --green-tint:   #C9E7CB;
    --ink:          #0B0B0B;
    --muted:        #6B6B6B;
    --muted-2:      #9A9A9A;
    --border:       rgba(0,0,0,.08);
    --coal:         #262626;
    --coal-deep:    #1E1E1E;
    --coal-soft:    #2E2E2E;
    --radius-xl:    32px;
    --radius-lg:    24px;
    --radius-md:    16px;
    --pill:         999px;

    /* Ритм между экранами (fluid, масштабируется на мобиле).
       Видимый зазор контента между секциями = 2 × --screen-gap. */
    --screen-gap:    clamp(56px, 7vw, 120px);
    --screen-rise:   clamp(24px, 3vw, 40px);
    --screen-radius: clamp(28px, 3vw, 44px);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* html тёмный (--coal-deep), чтобы overscroll-баунс снизу был чёрным (как футер);
     body остаётся светлым — контент не меняется. Сверху при оттягивании тоже тёмный. */
  html { background: var(--coal-deep); }
  body { background: var(--bg); color: var(--ink); }
  body {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: "ss01", "cv11";
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body.landing-body {
    background: #eef4fc url('/images/landing-hero-bg.png') center top / cover no-repeat;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 56px;
  }
  @media (max-width: 900px) { .container { padding: 0 20px; } }

  /* =========== HEADER =========== */
  /* Шапка обычная (в потоке): видна на первом экране и уезжает при скролле вниз. */
  .top {
    padding: 20px 0 12px;
    background: transparent;
  }
  .top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.02em;
  }
  .logo b { font-weight: 800; }
  .logo i { font-style: normal; color: var(--muted); font-weight: 500; }
  .logo-img { height: 48px; width: auto; display: block; }
  .logo-mark-img { width: 64px; height: 64px; object-fit: cover; object-position: center; border-radius: 50%; }
  .logo-text { color: #123f78; font-size: 28px; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
  .logo-text span { color: #159ca0; font-style: italic; font-weight: 600; }

  .top-cta {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .btn-login, .btn-register {
    --btn-h: 48px;
    height: var(--btn-h);
    padding: 0 calc(var(--btn-h) * 0.5);
    border-radius: calc(var(--btn-h) * 0.22);
    display: inline-flex; align-items: center;
    font-weight: 600;
    font-size: 16px;
    transition: background .15s;
  }
  .btn-login {
    background: #fff;
    color: var(--ink);
  }
  .btn-login:hover { background: var(--bg); }
  .btn-register {
    background: var(--coal);
    color: #fff;
  }
  .btn-register:hover { background: #333333; }
  @media (max-width: 480px) {
    .btn-login, .btn-register { --btn-h: 42px; padding: 0 16px; font-size: 15px; }
    .top-cta { gap: 6px; }
    .logo-mark-img { width: 54px; height: 54px; }
    .logo-text { font-size: 21px; }
  }

  /* =========== HERO =========== */
  .hero {
    padding: 56px 0 var(--screen-gap);
    position: relative;
    background: transparent;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 56px;
    align-items: center;
  }
  .hero-cta-btn {
    margin-top: 0;
    background: var(--coal);
    color: #fff;
  }
  .hero-cta-btn:hover { background: #333333; }

  /* Тёмная форма экспресс-проверки в герое (.form.hero-form — выше специфичности .form) */
  .hero-form.form {
    position: relative;
    align-self: start;
    background: var(--coal);
    padding: 44px 40px 40px;
    box-shadow: 0 40px 70px -34px rgba(0,0,0,.5), 30px 26px 90px -42px rgba(70,176,74,.5);
  }
  .hf-body { position: relative; padding-right: 250px; }
  .hf-glow {
    position: absolute;
    top: 20px; right: -18px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(70,176,74,.55) 0%, rgba(70,176,74,.16) 46%, transparent 70%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
  }
  .hf-head, .hf-lead, .hf-list { position: relative; z-index: 1; }
  .hf-art {
    position: absolute;
    top: -34px; right: -34px;
    width: 350px; height: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 26px 28px rgba(0,0,0,.55));
  }
  @media (max-width: 620px) {
    .hero-form.form { padding: 36px 22px 26px; }
    .hf-body { padding-right: 0; }
    .hf-glow {
      display: block;
      left: 50%; right: auto; top: -14px;
      transform: translateX(-50%);
      width: 300px; height: 270px;
    }
    .hf-art { position: relative; z-index: 1; inset: auto; display: block; width: 248px; height: auto; margin: 0 auto 20px; transform: none; }
    .hf-cta { font-size: 16px; }
  }
  .hf-title { font-size: 23px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.18; }
  .hf-title .accent { color: var(--green); }
  .hf-lead {
    margin-top: 22px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 16px; line-height: 1.5;
    color: rgba(255,255,255,.72);
  }
  .hf-list {
    margin-top: 18px;
    display: grid; gap: 14px; list-style: none;
    padding-left: 0;
  }
  .hf-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; color: rgba(255,255,255,.92); line-height: 1.4; }
  .hf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 8px; }
  .hero-form .input { background: rgba(255,255,255,.08); color: #fff; }
  .hero-form .input::placeholder { color: rgba(255,255,255,.45); }
  .hero-form .input:focus { background: rgba(255,255,255,.14); }
  .hero-form .btn { width: 100%; margin-top: 16px; }
  .hero-form .form-foot { color: rgba(255,255,255,.55); font-size: 14px; }
  .hero-form .form-foot b { color: #fff; }
  .hf-cta { margin-top: 24px; }

  /* =========== ПОПАП ЭКСПРЕСС-ПРОВЕРКИ =========== */
  .modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .modal[hidden] { display: none; }
  .modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(11,11,11,.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: modal-fade .2s ease;
  }
  .modal-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px;
    background: var(--coal);
    border-radius: var(--radius-xl);
    padding: 38px 36px;
    animation: modal-pop .22s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes modal-fade { from { opacity: 0; } }
  @keyframes modal-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  .modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff;
    font-size: 20px; line-height: 1;
    display: grid; place-items: center;
    transition: background .15s;
  }
  .modal-close:hover { background: rgba(255,255,255,.2); }
  .modal-title { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
  .modal-desc { margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.45; }
  .modal-form .input { background: rgba(255,255,255,.08); color: #fff; margin-top: 14px; }
  .modal-form .input::placeholder { color: rgba(255,255,255,.45); }
  .modal-form .input:focus { background: rgba(255,255,255,.14); }
  .modal-form .btn { width: 100%; margin-top: 18px; }
  .modal-foot { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.55); text-align: center; }
  .modal-foot b { color: #fff; font-weight: 600; }

  /* ── Состояние отправки формы (ok / error) ── */
  .form-state {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    min-height: 1px;
  }
  .form-state:empty {
    display: none;
    margin-top: 0;
    min-height: 0;
  }
  .form-state[data-state="ok"]    { color: #2BAE34; }
  .form-state[data-state="error"] { color: #E5392E; }
  .modal-form .form-state[data-state="ok"]    { color: #6BD371; }
  .modal-form .form-state[data-state="error"] { color: #FF7A6E; }
  .lead-form .form-state { text-align: left; }
  .h1 {
    font-size: clamp(34px, 3.7vw, 54px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--ink);
    text-wrap: balance;
  }
  .h1 .accent { color: var(--green); }
  .hero-sub {
    margin-top: 28px;
    font-size: 24px;
    line-height: 1.45;
    color: var(--ink);
    max-width: 660px;
  }
  /* Кнопки: единая пропорция — радиус = 22% высоты, гор. отступ = 50% высоты.
     Меняем только --btn-h, остальное считается само. */
  .btn {
    --btn-h: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--btn-h);
    padding: 0 calc(var(--btn-h) * 0.5);
    border-radius: calc(var(--btn-h) * 0.22);
    font-weight: 700;
    font-size: 18px;
    transition: transform .15s, background .15s;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn-primary {
    background: var(--green);
    color: #fff;
  }
  .btn-primary:hover { background: var(--green-hover); }
  /* Decorative shapes around image-slot */
  .hero-illu .blob {
    position: absolute;
    inset: 6% -4% 4% 2%;
    background: radial-gradient(60% 60% at 65% 45%, var(--green-tint) 0%, var(--green-pale) 55%, transparent 80%);
    filter: blur(2px);
  }
  image-slot { width: 100%; height: 100%; }

  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .hero { padding: 24px 0 56px; }
  }

  /* =========== SECTION TITLE =========== */
  /* Alfa-переход экранов: каждая секция «наезжает» скруглёнными ВЕРХНИМИ
     углами на предыдущую (отрицательный margin = --screen-rise), и в уголках
     виден фон предыдущего экрана. Низ всегда прямой — нижнего перехода нет.
     Единый ритм: видимый зазор контента = 2 × --screen-gap на всех секциях. */
  .section, .section-tight {
    position: relative;
    background: var(--bg);
    border-radius: var(--screen-radius) var(--screen-radius) 0 0;
    margin-top: calc(-1 * var(--screen-rise));
    padding: calc(var(--screen-gap) + var(--screen-rise)) 0 var(--screen-gap);
  }
  .h2 {
    font-size: clamp(28px, 3.4vw, 50px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 800;
  }
  .section-lede {
    font-size: 22px;
    color: var(--muted);
    margin-top: 24px;
    line-height: 1.4;
  }

  /* =========== НАМ ДОВЕРЯЮТ (лента клиентов под тарифами) =========== */
  .trusted { margin-top: 56px; }
  .trusted-cap {
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted-2);
    text-align: center;
  }
  .clients-marquee {
    margin-top: 28px;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .clients-track {
    display: flex; align-items: flex-start;
    width: max-content;
    animation: clients-scroll 40s linear infinite;
  }
  .clients-marquee:hover .clients-track { animation-play-state: paused; }
  @keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .client {
    flex: none; width: 260px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
    padding: 0 24px;
  }
  .client-logo {
    max-height: 46px; max-width: 100%; width: auto; height: auto; object-fit: contain;
    filter: grayscale(1); opacity: .6;
    transition: filter .25s, opacity .25s;
  }
  .client:hover .client-logo { filter: grayscale(0); opacity: 1; }
  .client-name { font-size: 14px; line-height: 1.35; color: var(--muted); }
  @media (prefers-reduced-motion: reduce) { .clients-track { animation: none; } }
  @media (max-width: 600px) { .client { width: 210px; padding: 0 16px; } }

  /* =========== FREE CHECK =========== */
  .check {
    background: var(--green-pale);
    border-radius: var(--radius-xl);
    padding: 64px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .check-left h2 { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
  .check-left .accent { color: var(--green); }
  .check-left p { margin-top: 24px; font-size: 18px; color: rgba(255,255,255,.72); line-height: 1.45; max-width: 480px; }
  .check-list { margin-top: 28px; display: grid; gap: 14px; }
  .check-list li {
    display: flex; align-items: center; gap: 14px;
    font-size: 18px;
    list-style: none;
    color: rgba(255,255,255,.92);
  }
  .check-list .chk {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
  }
  .check-list .chk svg { display: none; }

  .form {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
  }
  .form h3 { font-size: 28px; letter-spacing: -0.02em; font-weight: 800; }
  .form .desc { margin-top: 10px; color: var(--muted); font-size: 16px; }
  .field { margin-top: 20px; }
  .field label {
    display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; padding-left: 4px;
  }

  .input {
    width: 100%;
    background: var(--bg-alt);
    border: 0;
    outline: 0;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 17px;
    color: var(--ink);
    transition: background .15s;
  }
  .input::placeholder { color: var(--muted-2); }
  .input:focus { background: var(--card); }
  .form .btn { width: 100%; margin-top: 20px; }
  .form-foot { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }
  .form-foot b { color: var(--ink); font-weight: 600; }

  @media (max-width: 980px) {
    .check { grid-template-columns: 1fr; padding: 40px 24px; gap: 36px; }
    .form { padding: 24px; }
  }

  /* =========== STEPS =========== */
  .steps {
    display: grid;
    gap: 14px;
    margin-top: 48px;
  }
  .step {
    background: var(--card-soft);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 56px 72px 1fr;
    align-items: center;
    gap: 24px;
  }
  .step-num {
    width: 48px; height: 48px;
    background: var(--card);
    color: var(--muted);
    border-radius: 50%;
    font-weight: 700;
    font-size: 20px;
    display: grid; place-items: center;
  }
  .step-ico {
    width: 64px; height: 64px;
    background: var(--green-pale);
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    color: var(--green-hover);
  }
  .step-ico svg { width: 30px; height: 30px; }
  .step h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
  .step p { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.4; }

  @media (max-width: 720px) {
    .step { grid-template-columns: 44px 1fr; padding: 20px; }
    .step-ico { display: none; }
  }
  .stat .num {
    font-size: clamp(64px, 8vw, 120px);
    line-height: 0.9;
    font-weight: 800;
    color: var(--green);
    letter-spacing: -0.04em;
  }
  .stat .lbl {
    margin-top: 18px;
    color: var(--ink);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
    max-width: 280px;
  }

  /* =========== MOSAIC (Alfa «ваш результат» pattern) =========== */
  .mosaic {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 250px;
    gap: 14px;
  }
  /* Читаемый порядок: 3 карточки сверху (1·2·3), 2 шире снизу (4·5) */
  .mosaic > .mz:nth-child(-n+3) { grid-column: span 2; }
  .mosaic > .mz:nth-child(n+4) { grid-column: span 3; }
  .mz {
    border-radius: var(--radius-xl);
    padding: 36px;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 16px;
  }
  .mz h3 {
    font-size: clamp(22px, 1.9vw, 30px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .mz p {
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--ink);
    max-width: 460px;
  }
  .mz .mz-body { display: flex; flex-direction: column; }
  .mz .mz-num {
    font-size: clamp(48px, 4.6vw, 72px);
    line-height: 0.82;
    font-weight: 900;
    letter-spacing: -0.07em;
    color: var(--green);
    align-self: flex-start;
  }
  /* Брендовая гамма мозаики: тёмная / серая / зелёные тинты — без синего и мятного */
  .mz.is-dark { background: var(--coal); color: #fff; }
  .mz.is-dark h3 { color: #fff; }
  .mz.is-dark h3 .accent { color: var(--green); }
  .mz.is-dark p { color: rgba(255,255,255,.78); }
  .mz.is-grey { background: var(--card-dark); }
  .mz.is-grey p { color: var(--muted); }
  .mz.is-sky { background: var(--green-pale); }
  .mz.is-sky p { color: var(--muted); }
  .mz.is-mint { background: var(--green-tint); }
  .mz.is-mint p { color: var(--muted); }
  .mz-shape.s-doc {
    right: -20px; bottom: -30px;
    width: 200px; height: 240px;
    background: linear-gradient(135deg, #fff 0%, var(--card-soft) 100%);
    border-radius: 16px;
    transform: rotate(-12deg);
    box-shadow: -8px -8px 0 var(--green), -20px -20px 0 color-mix(in srgb, var(--green) 78%, #fff);
  }
  .mz-shape.s-shield {
    right: 24px; bottom: 24px;
    width: 120px; height: 140px;
    background: var(--green);
    clip-path: polygon(50% 0, 100% 20%, 100% 65%, 50% 100%, 0 65%, 0 20%);
  }
  .mz-shape.s-shield::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: #fff;
    display: grid; place-items: center;
    font-size: 60px;
    font-weight: 800;
  }
  .mz-shape.s-ring {
    right: -40px; top: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at center, transparent 38%, rgba(70,176,74,.55) 40%, rgba(70,176,74,.55) 48%, transparent 50%);
  }
  .mz-shape.s-dot {
    right: 30px; bottom: 30px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--green);
  }

  @media (max-width: 980px) {
    .mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
    /* Сброс десктопных спанов мозаики — иначе 1–3 (span 2) и 4–5 (span 3)
       в одноколоночной сетке получают разную ширину и «вылезают». */
    .mosaic > .mz:nth-child(-n+3),
    .mosaic > .mz:nth-child(n+4) { grid-column: auto; }
    .mz { min-height: 260px; }
  }

  /* =========== STEPS VARIANTS =========== */
  #steps-area { margin-top: 48px; }
  .sv { display: none; }
  #steps-area[data-variant="mosaic"] .sv-mosaic { display: grid; }

  /* =========== REVIEWS =========== */
  .reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

  .reviews {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-top: 40px; align-items: stretch;
  }
  .review-exp summary { list-style: none; cursor: pointer; color: var(--green-hover); font-weight: 600; font-size: 15px; width: max-content; }
  .review-exp summary::-webkit-details-marker { display: none; }
  .review-exp summary::after { content: " →"; }
  .review-exp[open] summary { color: var(--muted); }
  .review-exp[open] summary::after { content: " ↑"; }
  .review-exp p { margin-top: 14px; }
  .review {
    background: var(--card-soft);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    display: flex; flex-direction: column;
    gap: 24px;
    min-height: 390px;
  }
  .review .quote-ico {
    width: 40px; height: 40px;
    color: var(--green);
  }
  .review p {
    font-size: 26px;
    line-height: 1.45;
    color: var(--ink);
  }
  .reviewer {
    display: flex; align-items: flex-start; gap: 14px;
    padding-top: 20px; margin-top: auto;
    min-height: 104px;
  }
  .reviewer-pic {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .reviewer-info b { display: block; font-size: 17px; font-weight: 700; }
  .reviewer-info span { font-size: 20px; color: var(--muted); }

  @media (max-width: 980px) {
    .reviews { grid-template-columns: 1fr; }
    .reviewer { min-height: 0; }
  }
  .compare-price .unit {
    margin-left: 10px;
    display: inline-block;
    font-size: 14px;
    background: var(--card);
    color: var(--muted);
    padding: 6px 12px;
    border-radius: var(--pill);
    vertical-align: middle;
    font-weight: 500;
    letter-spacing: 0;
  }
  .is-highlight .compare-price .unit { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
  .compare-price .unit.is-best { background: var(--green); color: #fff; }
  .compare-row .lbl { color: var(--muted); display: flex; align-items: center; gap: 10px; }
  .is-highlight .compare-row .lbl { color: rgba(255,255,255,.6); }
  .compare-row .val { font-weight: 600; }
  .compare-row .lbl svg { width: 18px; height: 18px; }
  .tag.is-good {
    background: var(--green-soft);
    color: var(--green-hover);
  }
  .tag.is-good::before {
    content: "+";
    font-size: 15px;
    line-height: 1;
    color: var(--green);
  }
  .is-highlight .tag.is-good {
    background: rgba(255,255,255,.1);
    color: #fff;
  }

  /* Карточки сравнения «3 способа» (market). Обводка только у выигрышной (зелёной). */
  .market { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 48px; }
  .market-card { background: #fff; border-radius: var(--radius-xl); padding: 36px; display: flex; flex-direction: column; position: relative; }
  .market-card.is-win { background-color: var(--coal); color: #fff; background-image: radial-gradient(90% 150% at 100% -8%, rgba(70,176,74,.5) 0%, rgba(70,176,74,.26) 30%, rgba(70,176,74,.1) 58%, rgba(70,176,74,.03) 80%, transparent 95%); }
  .m-name { font-size: 20px; font-weight: 700; color: var(--muted); }
  .is-win .m-name { color: #fff; }
  .is-win .m-price { color: #fff; }
  .is-win .m-price span { color: rgba(255,255,255,.78); }
  .is-win .m-desc { color: rgba(255,255,255,.85); }
  .m-price { margin-top: 16px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.02; }
  .m-price span { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
  .m-desc { margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--muted); }
  @media (max-width: 980px) { .market { grid-template-columns: 1fr; } }

  /* =========== CABINET =========== */
  .cab {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 40px;
    align-items: center;
    position: relative;
  }
  .cab > div:first-child { align-self: start; }
  .cab-arrow3d { position: absolute; left: calc(20% - 60px); bottom: 40px; width: 15%; max-width: 180px; height: auto; transform: scaleX(-1); transform-origin: center; pointer-events: none; }
  @media (max-width: 980px) { .cab-arrow3d { display: none; } }
  .cab-points .chk {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .cab-art-wrap { display: flex; align-items: center; justify-content: center; }
  .cab-art { width: 100%; height: auto; display: block; }
  .cab-art-phone { display: none; }
  @media (max-width: 620px) {
    .cab-art-laptop { display: none; }
    .cab-art-wrap {
      position: relative;
      padding: 30px 0 46px;
      background: radial-gradient(ellipse 82% 60% at 50% 44%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.45) 36%, rgba(255,255,255,0) 64%);
    }
    .cab-art-phone {
      display: block; position: relative; z-index: 1;
      width: auto; max-width: 326px; height: auto; margin: 0 auto;
      filter: drop-shadow(0 32px 50px rgba(0,0,0,.38));
    }
  }
  .cab-mock h3 .accent { color: var(--green); }
  .cab-mock .sub {
    margin-top: 16px;
    color: var(--muted);
    font-size: 16px;
    max-width: 460px;
    line-height: 1.4;
  }
  .cab-chip .dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid; place-items: center;
  }
  .cab-chip .dot svg { width: 8px; height: 8px; }

  /* fake doc preview */
  .docs-preview {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 0.7fr 1fr 0.7fr;
    gap: 14px;
    align-items: flex-end;
  }
  .doc-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    aspect-ratio: 0.78/1;
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .doc-card.mid { aspect-ratio: 0.68/1; transform: translateY(-12px); }
  .doc-title { font-size: 13px; font-weight: 700; }
  .doc-card.mid .doc-title { font-size: 16px; }
  .doc-line { height: 7px; border-radius: 4px; background: #EFEDE6; margin-top: 4px; }
  .doc-line.w70 { width: 70%; }
  .doc-line.w50 { width: 50%; }
  .doc-line.w85 { width: 85%; }
  .doc-line.is-green { background: var(--green); width: 30%; }
  .doc-tab {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--green-pale);
    color: var(--green-hover);
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 6px;
    font-weight: 600;
    align-self: flex-start;
  }
  .doc-tab svg { width: 10px; height: 10px; }

  @media (max-width: 980px) {
    .cab { grid-template-columns: 1fr; }
  }

  /* =========== FAQ =========== */
  .faq { margin-top: 48px; display: grid; gap: 12px; }
  details.faq-item {
    background: var(--card-soft);
    border-radius: var(--radius-lg);
    padding: 4px 8px;
    transition: background .15s;
  }
  details.faq-item[open] { background: var(--card); }

  /* On alternate (darker) sections, cards become lighter so they read */
  .section[style*="--bg-alt"] .step,
  .section[style*="--bg-alt"] .review,
  .section[style*="--bg-alt"] .cab-mock,
  .section[style*="--bg-alt"] details.faq-item {
    background: var(--bg);
  }
  .section[style*="--bg-alt"] details.faq-item[open] { background: #fff; }
  .section[style*="--bg-alt"] .input { background: var(--card-soft); }
  .section[style*="--bg-alt"] .nav-btn { background: var(--bg); }
  .section[style*="--bg-alt"] .nav-btn:hover { background: #fff; }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 23px;
    font-weight: 600;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "";
    width: 28px; height: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .2s;
    flex-shrink: 0;
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-body {
    padding: 0 32px 30px;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.5;
    max-width: 900px;
  }

  /* =========== LEAD / CONSULTATION CTA =========== */
  .lead {
    background: var(--coal-soft);
    border-radius: var(--radius-xl);
    padding: 56px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
  }
  .lead-head { display: flex; gap: 22px; align-items: flex-start; }
  .lead-ico {
    flex: none;
    width: 64px; height: 64px; border-radius: 18px;
    background: var(--green); color: #fff;
    display: grid; place-items: center;
  }
  .lead-ico svg { width: 32px; height: 32px; }
  .lead h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #fff; }
  .lead p { margin-top: 14px; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.45; }
  .lead-form { display: grid; gap: 14px; }
  .lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .lead-input {
    height: 60px;
    background: rgba(255,255,255,.08);
    border: 0; outline: 0;
    border-radius: var(--radius-md);
    padding: 0 20px;
    font-family: inherit; font-size: 16px;
    color: #fff;
    transition: background .15s;
  }
  .lead-input::placeholder { color: rgba(255,255,255,.5); }
  .lead-input:focus { background: rgba(255,255,255,.14); }
  .lead-form .btn { width: 100%; }
  /* ── Чекбокс согласия внутри форм (модалы + футер-форма) ── */
  .form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
  }
  /* Чекбокс согласия: серая плитка без обводки, при выборе — сплошной
     зелёный квадрат без галочки внутри. Никаких border, никаких ::after. */
  .form-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin: 1px 0 0 0;
    border: 0;
    border-radius: 5px;
    background: var(--bg-alt);
    flex-shrink: 0;
    cursor: pointer;
    transition: background .15s;
  }
  .form-consent input[type="checkbox"]:hover { background: var(--card-dark, #d4d4d4); }
  .form-consent input[type="checkbox"]:checked {
    background: var(--green);
  }
  .form-consent input[type="checkbox"]:checked:hover {
    background: var(--green-hover);
  }
  .form-consent a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color .15s, border-color .15s;
  }
  .form-consent a:hover { color: var(--green); border-color: var(--green); }

  /* В модалах фон тёмный — нужны белые тона */
  .modal-form .form-consent { color: rgba(255,255,255,.72); }
  .modal-form .form-consent input[type="checkbox"] {
    background: rgba(255,255,255,.08);
    border: 0;
  }
  .modal-form .form-consent input[type="checkbox"]:hover { background: rgba(255,255,255,.14); }
  .modal-form .form-consent input[type="checkbox"]:checked { background: var(--green); }
  .modal-form .form-consent input[type="checkbox"]:checked:hover { background: var(--green-hover); }
  .modal-form .form-consent a { color: rgba(255,255,255,.92); }
  .modal-form .form-consent a:hover { color: #fff; border-color: #fff; }

  /* В футер-форме фон угольный — тоже белые тона */
  .lead-form .form-consent { color: rgba(255,255,255,.6); }
  .lead-form .form-consent input[type="checkbox"] {
    background: rgba(255,255,255,.08);
    border: 0;
  }
  .lead-form .form-consent input[type="checkbox"]:checked { background: var(--green); }
  .lead-form .form-consent input[type="checkbox"]:checked:hover { background: var(--green-hover); }
  .lead-form .form-consent a { color: rgba(255,255,255,.85); }
  .lead-form .form-consent a:hover { color: #fff; border-color: #fff; }

  /* Кнопка submit, пока согласие не отмечено */
  .btn[disabled],
  .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
  }
  @media (max-width: 860px) {
    .lead { grid-template-columns: 1fr; padding: 40px 24px; gap: 30px; }
    .lead-fields { grid-template-columns: 1fr; }
  }

  /* =========== FOOTER (тёмная зона) ===========
     Последняя светлая секция (#faq) скругляет НИЖНИЕ углы, а тёмный футер
     поднимается под неё (отрицательный margin + меньший z-index) — в уголках
     виден тёмный фон. Зеркало верхнего «наезда» секций. */
  .section-to-footer {
    border-bottom-left-radius: var(--screen-radius);
    border-bottom-right-radius: var(--screen-radius);
    z-index: 2;
  }
  footer {
    position: relative;
    z-index: 1;
    background: var(--coal-deep);
    color: #fff;
    margin-top: calc(-1 * var(--screen-radius));
    padding: calc(var(--screen-radius) + 72px) 0 44px;
  }
  footer .lead { margin-bottom: 56px; }
  .footer-row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 24px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .footer-brand { display: inline-flex; }
  .footer-brand img { height: 30px; width: auto; display: block; }
  .footer-docs { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
  .footer-docs-cap {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }
  .footer-links {
    display: flex; gap: 28px; flex-wrap: wrap;
    justify-content: flex-end;
  }
  .footer-links a {
    color: rgba(255,255,255,.6);
    font-size: 14px;
    transition: color .15s;
  }
  .footer-links a:hover { color: #fff; }
  .footer-meta { margin-top: 20px; color: rgba(255,255,255,.35); font-size: 14px; }
  @media (max-width: 720px) {
    .footer-row { flex-direction: column; align-items: flex-start; gap: 28px; }
    .footer-docs { align-items: flex-start; }
    .footer-links { justify-content: flex-start; gap: 8px 24px; }
  }
  /* image-slot styling */
  image-slot[data-empty] {
    background: transparent;
  }

  /* =========== PLANS / ТАРИФЫ =========== */
  .plans { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .plan-card { background: #fff; border-radius: var(--radius-xl); padding: 38px 30px; display: flex; flex-direction: column; position: relative; }
  .plan-card.is-featured { background: #fff; color: var(--ink); }
  .plan-card.is-premium { background: #fff; box-shadow: none; }
  .plan-name { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
  .is-featured .plan-aud { color: rgba(255,255,255,.9); }
  .plan-price { margin-top: 24px; font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
  .plan-note { margin-top: 8px; font-size: 14px; color: var(--muted); }
  .is-featured .plan-note { color: var(--muted); }
  .plan-feats { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 14px; margin-bottom: 28px; }
  .is-featured .plan-feats { border-top-color: var(--border); }
  .plan-feats li { display: flex; gap: 12px; font-size: 15px; line-height: 1.4; }
  .plan-feats li.more { font-weight: 700; }
  .plan-feats li svg { flex: none; width: 20px; height: 20px; color: var(--green); margin-top: 1px; }
  .is-featured .plan-feats li svg { color: var(--green); }
  .plan-card .btn { --btn-h: 56px; margin-top: auto; width: 100%; font-size: 16px; }
  .plan-card:not(.is-featured) .btn { background: var(--green); color: #fff; }
  .plan-card:not(.is-featured) .btn:hover { background: var(--green-hover); }
  .is-featured .btn { background: var(--green); color: #fff; }
  @media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

  /* =========== ГЛУБИНА ФОНА (всё статично) =========== */
  /* 1. Зернистость поверх всего — тонкая «плёнка» */
  body::after {
    content: "";
    position: fixed; inset: 0; z-index: 300;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 150px 150px;
  }
  /* 2. Статичное зелёное свечение + объём в тёмной зоне (футер) */
  footer {
    background-image:
      radial-gradient(55% 45% at 82% 8%, rgba(70,176,74,.16), transparent 62%),
      radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.03), transparent 55%);
  }
  /* 3. Лёгкий градиент-объём на тёмных панелях (свет сверху) */
  .mz.is-dark, .compare-card.is-highlight, .lead {
    background-image: radial-gradient(115% 85% at 50% -12%, rgba(255,255,255,.05), transparent 56%);
  }
  /* форма героя: зелёное свечение в правом верхнем углу над иконкой + свет сверху */
  .hero-form.form {
    background-image:
      radial-gradient(56% 46% at 92% 4%, rgba(70,176,74,.24), transparent 58%),
      radial-gradient(115% 85% at 50% -12%, rgba(255,255,255,.05), transparent 56%);
  }
  @media (prefers-reduced-motion: reduce) { body::after { opacity: .03; } }