/* ==========================================================================
   AMIGOS DIGITAL — CORE STYLESHEET
   @layer для предсказуемой каскадности. Импортирует токены.
   Подход: mobile-first, CSS Grid, логические свойства, clamp(), :focus-visible.
   ========================================================================== */

@import "tokens.css";

@layer reset, base, layout, components, utilities;

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body {
    min-height: 100dvh;
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  :where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }
  p { text-wrap: pretty; }
  :where(h1, h2, h3, h4) { text-wrap: balance; }

  :target { scroll-margin-top: 6rem; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html { scroll-behavior: smooth; overflow-x: clip; }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--c-text);
    background-color: var(--c-bg);
    /* мягкое радиальное свечение фонового слоя */
    background-image:
      radial-gradient(60rem 40rem at 80% -10%, rgba(111,91,255,.10), transparent 60%),
      radial-gradient(50rem 40rem at -10% 10%, rgba(66,179,94,.06), transparent 55%);
    background-attachment: fixed;
    /* overflow-x убран: горизонтальный клип уже даёт html{overflow-x:clip},
       а overflow на body делал body скроллером и ломал window.scrollY */
  }

  h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight);
                   letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
  h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }

  a { transition: color var(--dur-fast) var(--ease); }
  a:hover { color: var(--c-accent); }

  ::selection { background: var(--c-accent); color: var(--c-accent-ink); }

  :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Кастомный скроллбар (поддерживающие браузеры) */
  @supports (scrollbar-color: auto) {
    html { scrollbar-color: var(--c-line) transparent; scrollbar-width: thin; }
  }
}

/* ==========================================================================
   LAYOUT — контейнеры и сетка
   ========================================================================== */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-width: var(--container-narrow); }

  .section { padding-block: var(--section-y); position: relative; }
  .section--soft { background: var(--c-bg-soft); }
  .section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

  /* Универсальная авто-сетка: колонки сами подстраиваются под ширину.
     --min — минимальная ширина карточки. Никаких медиа-запросов не нужно. */
  .grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
  }
  .grid--2 { --min: 440px; }
  .grid--3 { --min: 300px; }
  .grid--4 { --min: 230px; }

  /* Жёсткие колонки для крупных раскладок с управляемым спаном */
  .grid-12 {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(12, 1fr);
  }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
  @media (max-width: 900px) {
    .grid-12 { grid-template-columns: repeat(6, 1fr); }
    .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 6; }
  }
  @media (max-width: 560px) {
    .grid-12 { grid-template-columns: 1fr; }
    .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: 1 / -1; }
  }

  /* Заголовок секции */
  .section-head { max-width: 60ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head .lead { margin-top: var(--space-4); color: var(--c-text-soft);
                        font-size: var(--fs-lead); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* --- Eyebrow (надзаголовок) --------------------------------------- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--c-accent);
  }
  .eyebrow::before {
    content: ""; width: 1.75rem; height: 1px;
    background: currentColor; opacity: .7;
  }
  .eyebrow--center::before { display: none; }

  /* --- Кнопки --------------------------------------------------------- */
  .btn {
    --btn-bg: var(--c-surface-2);
    --btn-fg: var(--c-text);
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: 0.8em 1.4em; min-height: 2.75rem; max-width: 100%;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    line-height: 1.2; text-align: center; white-space: nowrap;
    color: var(--btn-fg); background: var(--btn-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur) var(--ease),
                background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
  }
  .btn .ico { flex: none; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  .btn--primary {
    --btn-bg: var(--c-accent); --btn-fg: var(--c-accent-ink);
    border-color: transparent; font-weight: var(--fw-bold);
  }
  .btn--primary:hover { box-shadow: var(--glow-accent); color: var(--c-accent-ink); }

  .btn--ai {
    --btn-bg: var(--c-accent-2); --btn-fg: #fff; border-color: transparent;
  }
  .btn--ai:hover { box-shadow: var(--glow-ai); color: #fff; }

  .btn--ghost { --btn-bg: transparent; }
  .btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

  .btn--lg { padding: 1.05em 2em; font-size: var(--fs-body); }
  .btn--block { width: 100%; }
  .btn .ico { width: 1.1em; height: 1.1em; }

  /* --- Бейджи / чипы -------------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .35em .75em; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    border-radius: var(--r-pill); border: 1px solid var(--c-line);
    color: var(--c-text-soft); background: var(--c-surface);
  }
  .badge--new { color: var(--c-accent); border-color: rgba(66,179,94,.35);
                background: rgba(66,179,94,.08); }
  .badge--ai  { color: #b9adff; border-color: rgba(111,91,255,.4);
                background: rgba(111,91,255,.12); }
  .badge--hot { color: var(--c-accent-3); border-color: rgba(255,107,92,.4);
                background: rgba(255,107,92,.1); }
  .badge .dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }

  /* --- Карточки ------------------------------------------------------- */
  .card {
    position: relative;
    display: flex; flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    transition: transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background var(--dur) var(--ease);
    overflow: clip;
  }
  .card--link:hover {
    transform: translateY(-4px);
    border-color: var(--c-line);
    background: var(--c-surface-2);
  }
  .card--link:hover .card__icon { color: var(--c-accent); }
  /* верхняя неоновая линия при наведении */
  .card--glow::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--grad-accent); opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .card--glow:hover::before { opacity: 1; }
  .card--ai::before { background: var(--grad-ai); }

  .card__icon {
    width: 3rem; height: 3rem; display: grid; place-items: center;
    border-radius: var(--r-md); color: var(--c-accent);
    background: var(--c-surface-2); border: 1px solid var(--c-line);
    transition: color var(--dur) var(--ease);
  }
  .card__icon svg { width: 1.5rem; height: 1.5rem; }
  .card__icon--ai { color: var(--c-accent-2); }
  .card__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
  .card__text { color: var(--c-text-soft); font-size: var(--fs-sm); }
  .card__link {
    margin-top: auto; display: inline-flex; align-items: center; gap: .4em;
    font-weight: var(--fw-semibold); color: var(--c-text);
    font-size: var(--fs-sm);
  }
  .card__link svg { transition: transform var(--dur) var(--ease); }
  .card--link:hover .card__link { color: var(--c-accent); }
  .card--link:hover .card__link svg { transform: translateX(4px); }

  /* --- Статистика / цифры -------------------------------------------- */
  .stat { display: flex; flex-direction: column; gap: var(--space-1); }
  .stat__num {
    font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
    font-weight: var(--fw-black); line-height: 1;
    letter-spacing: var(--tracking-tight);
    background: var(--grad-accent);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stat__num--ai { background: var(--grad-ai); -webkit-background-clip: text;
                   background-clip: text; color: transparent; }
  .stat__label { color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* --- Метрика кейса (рост в %) -------------------------------------- */
  .metric { display: flex; align-items: baseline; gap: .5ch; }
  .metric__val { font-size: var(--fs-h3); font-weight: var(--fw-bold);
                 color: var(--c-success); }
  .metric__val::before { content: "+"; }
  .metric__unit { color: var(--c-text-muted); font-size: var(--fs-sm); }

  /* --- Формы ---------------------------------------------------------- */
  .field { display: flex; flex-direction: column; gap: var(--space-2); }
  .field label { font-size: var(--fs-sm); font-weight: var(--fw-medium);
                 color: var(--c-text-soft); }
  .input, .textarea, .select {
    width: 100%; padding: 0.85em 1em;
    background: var(--c-bg-soft); color: var(--c-text);
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    font-size: var(--fs-body);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
  }
  .input::placeholder, .textarea::placeholder { color: var(--c-text-muted); }
  .input:focus, .textarea:focus, .select:focus {
    outline: none; border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(66,179,94,.15);
  }
  .textarea { min-height: 7rem; resize: vertical; }
  .input:user-invalid, .textarea:user-invalid {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(255,92,92,.15);
  }
  .field__error { font-size: var(--fs-xs); color: var(--c-danger); display: none; }
  .input:user-invalid ~ .field__error { display: block; }

  .checkbox { display: flex; gap: var(--space-3); align-items: flex-start;
              font-size: var(--fs-xs); color: var(--c-text-muted); }
  .checkbox input { margin-top: .15em; accent-color: var(--c-accent);
                    width: 1.05em; height: 1.05em; flex: none; }
  .checkbox a { color: var(--c-text-soft); text-decoration: underline; }

  /* --- Хедер ---------------------------------------------------------- */
  .header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: color-mix(in srgb, var(--c-bg) 80%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    will-change: transform;
    transition: transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background var(--dur) var(--ease);
  }
  .header[data-scrolled="true"] {
    border-bottom-color: var(--c-line-soft);
    background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  }
  /* «Умная» шапка: спрятана при скролле вниз, появляется при скролле вверх */
  .header[data-hidden="true"] { transform: translateY(-100%); }
  .header__inner {
    display: flex; align-items: center; gap: var(--space-5);
    min-height: var(--header-h);
  }
  .logo { display: inline-flex; align-items: center; gap: .55ch;
          font-weight: var(--fw-black);
          font-size: clamp(0.95rem, 0.82rem + 0.7vw, 1.15rem);
          letter-spacing: -.02em; line-height: 1.05; flex: none; }
  .logo b { color: var(--c-accent); }
  .logo__mark { width: 1.7rem; height: 1.7rem; }

  .nav { display: flex; align-items: center; gap: var(--space-1);
         margin-inline-start: auto; }
  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex; align-items: center; gap: .4ch;
    padding: .6rem .85rem; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-soft);
  }
  .nav__link:hover, .nav__item:focus-within .nav__link { color: var(--c-text); }
  .nav__link .chev { width: .8em; height: .8em; transition: transform var(--dur) var(--ease); }
  .nav__item:hover .chev, .nav__item:focus-within .chev { transform: rotate(180deg); }

  /* Выпадающее меню */
  .dropdown {
    position: absolute; top: calc(100% + .5rem); inset-inline-start: 0;
    min-width: 19rem; padding: var(--space-3);
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur);
    z-index: var(--z-dropdown);
  }
  .nav__item:hover .dropdown, .nav__item:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .dropdown a {
    display: flex; flex-direction: column; gap: 2px;
    padding: .6rem .75rem; border-radius: var(--r-sm); color: var(--c-text-soft);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .dropdown a:hover { background: var(--c-surface-2); color: var(--c-text); }
  .dropdown a strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold);
                       color: var(--c-text); }
  .dropdown a span { font-size: var(--fs-xs); color: var(--c-text-muted); }

  .header__actions { display: flex; align-items: center; gap: var(--space-3);
                     flex: none; }
  .header__phone { font-weight: var(--fw-semibold); font-size: var(--fs-sm);
                   white-space: nowrap; }

  /* Бургер */
  .burger { display: none; width: var(--tap); height: var(--tap); flex: none;
            border-radius: var(--r-sm); border: 1px solid var(--c-line);
            place-items: center; }
  .burger span, .burger span::before, .burger span::after {
    content: ""; display: block; width: 1.1rem; height: 2px; background: var(--c-text);
    border-radius: 2px; transition: transform var(--dur) var(--ease),
                                    opacity var(--dur-fast) var(--ease); position: relative;
  }
  .burger span::before { position: absolute; top: -6px; }
  .burger span::after  { position: absolute; top: 6px; }
  body[data-menu="open"] .burger span { background: transparent; }
  body[data-menu="open"] .burger span::before { transform: translateY(6px) rotate(45deg); }
  body[data-menu="open"] .burger span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* --- HERO ----------------------------------------------------------- */
  .hero { position: relative; padding-block: clamp(3rem, 2rem + 6vw, 6.5rem)
                                            clamp(3rem, 2rem + 5vw, 5.5rem); }
  .hero__grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
                grid-template-columns: 1fr; align-items: center; }
  @media (min-width: 1025px) {
    .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
  }
  .hero__title { font-size: var(--fs-display); font-weight: var(--fw-black);
                 margin-block: var(--space-4) var(--space-5); }
  .hero__title .grad { background: var(--grad-ai); -webkit-background-clip: text;
                       background-clip: text; color: transparent; }
  .hero__lead { font-size: var(--fs-lead); color: var(--c-text-soft);
                max-width: 46ch; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3);
               margin-top: var(--space-6); }
  .hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-5);
                 margin-top: var(--space-7); padding-top: var(--space-5);
                 border-top: 1px solid var(--c-line-soft); }

  /* Визуальная панель hero — «терминал AI-видимости» */
  .hero__panel {
    background: var(--grad-surface); border: 1px solid var(--c-line);
    border-radius: var(--r-xl); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    box-shadow: var(--shadow-lg); position: relative; overflow: clip;
  }
  .hero__panel::after {
    content: ""; position: absolute; inset: -40% 40% auto -20%; height: 60%;
    background: radial-gradient(closest-side, rgba(111,91,255,.25), transparent);
    pointer-events: none;
  }
  .panel__bar { display: flex; align-items: center; gap: .5ch; margin-bottom: var(--space-4); }
  .panel__bar i { width: .65rem; height: .65rem; border-radius: 50%;
                  background: var(--c-line); }
  .panel__bar span { margin-inline-start: auto; font-family: var(--font-mono);
                     font-size: var(--fs-xs); color: var(--c-text-muted); }
  .panel__row { display: flex; align-items: center; justify-content: space-between;
                gap: var(--space-4); padding: .85rem 0;
                border-bottom: 1px dashed var(--c-line-soft); }
  .panel__row:last-child { border-bottom: none; }
  .panel__row b { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
  .panel__row small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
  .panel__score { font-family: var(--font-mono); font-weight: var(--fw-bold);
                  color: var(--c-accent); }
  .panel__barline { height: 6px; border-radius: var(--r-pill); background: var(--c-line);
                    overflow: hidden; flex: 1; max-width: 8rem; }
  .panel__barline i { display: block; height: 100%; border-radius: inherit;
                      background: var(--grad-accent); }

  /* --- Marquee / лента доверия --------------------------------------- */
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent,
             #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg,
             transparent, #000 8%, #000 92%, transparent); }
  .marquee__track { display: flex; gap: var(--space-7); width: max-content;
                    animation: marquee 32s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item { color: var(--c-text-muted); font-weight: var(--fw-semibold);
                   font-size: var(--fs-sm); white-space: nowrap; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* --- Флагман GEO (выделенный блок) --------------------------------- */
  .feature {
    display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border: 1px solid rgba(111,91,255,.3); border-radius: var(--r-xl);
    background:
      radial-gradient(40rem 30rem at 90% 0%, rgba(111,91,255,.14), transparent 60%),
      var(--c-surface);
  }
  @media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; } }
  .feature__list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
  .feature__list li { display: flex; gap: var(--space-3); align-items: flex-start;
                      color: var(--c-text-soft); font-size: var(--fs-sm); }
  .feature__list svg { color: var(--c-accent-2); flex: none; margin-top: .15em;
                       width: 1.2rem; height: 1.2rem; }

  /* --- Кейс-карточка -------------------------------------------------- */
  .case { display: flex; flex-direction: column; gap: var(--space-4); }
  .case__head { display: flex; align-items: center; justify-content: space-between;
                gap: var(--space-3); }
  .case__tag { font-size: var(--fs-xs); color: var(--c-text-muted);
               text-transform: uppercase; letter-spacing: .08em; }
  .case__name { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
  .case__metrics { display: flex; gap: var(--space-6); flex-wrap: wrap;
                   margin-top: auto; padding-top: var(--space-4);
                   border-top: 1px solid var(--c-line-soft); }

  /* --- Процесс (шаги) ------------------------------------------------- */
  .steps { counter-reset: step; display: grid; gap: var(--space-4); }
  .step {
    position: relative;
    --step-py: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem);
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--step-py) clamp(1.25rem, 1rem + .6vw, 1.75rem);
    padding-inline-start: 4rem;
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
  }
  .step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; inset-inline-start: 1.5rem; top: var(--step-py);
    font-family: var(--font-mono); font-weight: var(--fw-bold);
    color: var(--c-accent); font-size: var(--fs-sm); line-height: var(--lh-snug);
  }
  .step h4 { margin-bottom: 0; }
  .step p { color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* --- Аккордеон (FAQ) ------------------------------------------------ */
  .accordion { display: grid; gap: var(--space-3); }
  .acc { border: 1px solid var(--c-line); border-radius: var(--r-md);
         background: var(--c-surface); overflow: clip; }
  .acc summary { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--space-4); padding: 1.1rem 1.25rem; cursor: pointer;
                 font-weight: var(--fw-semibold); list-style: none; }
  .acc summary::-webkit-details-marker { display: none; }
  .acc summary::after { content: "+"; font-size: 1.4em; color: var(--c-accent);
                        transition: transform var(--dur) var(--ease); flex: none; }
  .acc[open] summary::after { transform: rotate(45deg); }
  .acc__body { padding: 0 1.25rem 1.25rem; color: var(--c-text-soft);
               font-size: var(--fs-sm); }

  /* --- CTA-полоса ----------------------------------------------------- */
  .cta {
    text-align: center; padding: clamp(2.5rem, 1.5rem + 5vw, 5rem);
    border-radius: var(--r-xl); position: relative; overflow: clip;
    background:
      radial-gradient(50rem 30rem at 50% 120%, rgba(66,179,94,.18), transparent 60%),
      var(--c-surface);
    border: 1px solid var(--c-line);
  }
  .cta h2 { max-width: 22ch; margin-inline: auto; }
  .cta p { max-width: 50ch; margin: var(--space-4) auto 0; color: var(--c-text-soft);
           font-size: var(--fs-lead); }
  .cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3);
                  justify-content: center; margin-top: var(--space-6); }

  /* --- Футер ---------------------------------------------------------- */
  .footer { border-top: 1px solid var(--c-line-soft); background: var(--c-bg-soft);
            padding-block: var(--space-8) var(--space-6); margin-top: var(--space-9); }
  .footer__grid { display: grid; gap: var(--space-6);
                  grid-template-columns: 1.6fr repeat(3, 1fr); }
  @media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
  .footer h5 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em;
               color: var(--c-text-muted); margin-bottom: var(--space-4); }
  .footer ul { display: grid; gap: var(--space-3); }
  .footer a { color: var(--c-text-soft); font-size: var(--fs-sm); }
  .footer a:hover { color: var(--c-accent); }
  .footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4);
                    justify-content: space-between; align-items: center;
                    margin-top: var(--space-8); padding-top: var(--space-5);
                    border-top: 1px solid var(--c-line-soft);
                    color: var(--c-text-muted); font-size: var(--fs-xs); }

  /* --- Мобильное меню (правый drawer) -------------------------------- */
  .m-backdrop {
    position: fixed; inset: var(--header-h) 0 0; z-index: var(--z-overlay);
    background: rgba(5,6,8,.55); -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .m-backdrop:not([hidden]) { opacity: 1; }

  .m-menu {
    position: fixed; top: var(--header-h); right: 0; left: auto; bottom: 0;
    width: min(92vw, 400px); max-width: 100vw; z-index: calc(var(--z-overlay) + 1);
    background: var(--c-bg-soft);
    border-inline-start: 1px solid var(--c-line);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) clamp(1rem, 4vw, 1.5rem) calc(var(--space-6) + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
    display: flex; flex-direction: column; gap: var(--space-5);
  }
  body[data-menu="open"] .m-menu { transform: translateX(0); visibility: visible; }

  .m-menu__nav { display: flex; flex-direction: column; }

  /* Основные пункты — во всю ширину, одинаковая высота */
  .m-menu__link, .m-menu__parent {
    display: flex; align-items: center; gap: .5em; min-height: 56px;
    padding: .6rem .25rem; font-size: 1.0625rem; font-weight: var(--fw-medium);
    color: var(--c-text); border-bottom: 1px solid var(--c-line-soft);
  }
  .m-menu__link .badge, .m-menu__parent .badge { flex: none; }
  .m-menu__link:hover, .m-menu__parent:hover { color: var(--c-accent); }

  /* Раздел с под-услугами: строка-ссылка + стрелка справа */
  .m-menu__group { border-bottom: 1px solid var(--c-line-soft); }
  .m-menu__row { display: flex; align-items: center; gap: 0; }
  .m-menu__parent { flex: 1; min-width: 0; border-bottom: none; }
  .m-menu__toggle {
    flex: none; width: 56px; min-height: 56px; display: grid; place-items: center;
    color: var(--c-text-soft); border-radius: var(--r-sm);
  }
  .m-menu__toggle:hover { color: var(--c-accent); background: var(--c-surface); }
  .m-menu__toggle .chev { width: 1.25rem; height: 1.25rem;
                          transition: transform var(--dur) var(--ease); }
  /* Только шеврон своей группы (прямой потомок), не вложенных */
  .m-menu__group.is-open > .m-menu__row .m-menu__toggle .chev { transform: rotate(180deg); }

  /* Анимированное раскрытие (grid-rows 0fr→1fr) — строго по своей группе */
  .m-menu__sub {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
  }
  .m-menu__group.is-open > .m-menu__sub { grid-template-rows: 1fr; }
  .m-menu__sub-inner { overflow: hidden; min-height: 0;
                       display: grid; gap: 2px; padding-block: 0; }
  .m-menu__group.is-open > .m-menu__sub > .m-menu__sub-inner { padding-block: var(--space-2) var(--space-3); }

  /* Карточки подсписка — как в десктоп-дропдауне */
  .m-menu__sub-inner a {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    min-height: 52px; padding: .6rem .75rem; border-radius: var(--r-md);
    background: var(--c-surface); border: 1px solid var(--c-line-soft);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .m-menu__sub-inner a:active { background: var(--c-surface-2); }
  .m-menu__sub-inner strong { display: flex; align-items: center; gap: .4em; flex-wrap: wrap;
                              font-size: var(--fs-sm); font-weight: var(--fw-semibold);
                              color: var(--c-text); }
  .m-menu__sub-inner span { font-size: var(--fs-xs); color: var(--c-text-muted);
                            line-height: 1.4; }

  .m-menu__actions { display: grid; gap: var(--space-3); margin-top: auto;
                     padding-top: var(--space-2); }

  /* --- Модальное окно ------------------------------------------------ */
  .modal { position: fixed; inset: 0; z-index: var(--z-modal);
           display: grid; place-items: center; padding: var(--gutter); }
  .modal[hidden] { display: none; }
  .modal__overlay { position: absolute; inset: 0; background: rgba(5,6,8,.65);
                    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
                    opacity: 0; transition: opacity var(--dur) var(--ease); }
  .modal[data-open="true"] .modal__overlay { opacity: 1; }
  .modal__dialog {
    position: relative; width: min(100%, 480px);
    max-height: calc(100dvh - 2 * var(--gutter)); overflow-y: auto;
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
    transform: translateY(16px) scale(.98); opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .modal[data-open="true"] .modal__dialog { transform: none; opacity: 1; }
  .modal__close {
    position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem;
    width: var(--tap); height: var(--tap); display: grid; place-items: center;
    color: var(--c-text-soft); border-radius: var(--r-sm);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .modal__close:hover { color: var(--c-text); background: var(--c-surface-2); }
  .modal__close svg { width: 1.25rem; height: 1.25rem; }
  .modal__title { margin-block: var(--space-3) var(--space-2); font-size: var(--fs-h3); }
  .modal__sub { color: var(--c-text-soft); font-size: var(--fs-sm);
                margin-bottom: var(--space-5); }
  .modal__note { font-size: var(--fs-xs); text-align: center; }

  /* --- Экран успешной отправки (форма исчезает) ---------------------- */
  .form-success { text-align: center; display: grid; gap: var(--space-3);
                  padding: var(--space-4) 0; justify-items: center; }
  .form-success__icon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center;
                        border-radius: 50%; color: var(--c-success);
                        background: rgba(56,224,138,.12);
                        border: 1px solid rgba(56,224,138,.3); }
  .form-success__icon svg { width: 1.75rem; height: 1.75rem; }

  /* --- Кнопка «наверх» ----------------------------------------------- */
  .to-top {
    position: fixed; inset-inline-end: 1.25rem;
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    z-index: var(--z-overlay);
    width: var(--tap); height: var(--tap); display: grid; place-items: center;
    color: var(--c-accent-ink); background: var(--c-accent); border-radius: 50%;
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur), box-shadow var(--dur) var(--ease);
  }
  .to-top[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
  .to-top:hover { box-shadow: var(--glow-accent); color: var(--c-accent-ink);
                  transform: translateY(-2px); }
  .to-top svg { width: 1.4rem; height: 1.4rem; }

  /* --- Куки-баннер (152-ФЗ) ------------------------------------------ */
  .cookie {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-modal);
    max-width: var(--container);
    margin: var(--gutter) auto max(var(--gutter), env(safe-area-inset-bottom));
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    padding: clamp(1rem, .8rem + 1vw, 1.5rem);
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 2rem)); opacity: 0; visibility: hidden;
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease),
                visibility var(--dur-slow);
  }
  .cookie[data-show="true"] { transform: none; opacity: 1; visibility: visible; }
  .cookie__text { flex: 1 1 22rem; min-width: 0; }
  .cookie__text p { font-size: var(--fs-sm); color: var(--c-text-soft); }
  .cookie__text a { color: var(--c-accent); text-decoration: underline; }
  .cookie__actions { display: flex; gap: var(--space-3); flex: none; flex-wrap: wrap; }
  @media (max-width: 560px) {
    .cookie__actions { flex: 1 1 100%; }
    .cookie__actions .btn { flex: 1; }
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; inset-inline-start: 1rem; top: -3rem; z-index: var(--z-modal);
    padding: .6rem 1rem; background: var(--c-accent); color: var(--c-accent-ink);
    border-radius: var(--r-sm); font-weight: var(--fw-semibold);
    transition: top var(--dur) var(--ease);
  }
  .skip-link:focus { top: 1rem; color: var(--c-accent-ink); }

  .text-center { text-align: center; }
  .text-soft { color: var(--c-text-soft); }
  .text-muted { color: var(--c-text-muted); }
  .accent { color: var(--c-accent); }
  .mt-0 { margin-top: 0; }
  .stack > * + * { margin-top: var(--space-4); }
  .stack-sm > * + * { margin-top: var(--space-2); }
  .flex { display: flex; gap: var(--space-3); align-items: center; }
  .wrap { flex-wrap: wrap; }
  .lead { font-size: var(--fs-lead); color: var(--c-text-soft); }

  /* Scroll-reveal: стартовое скрытое состояние, JS добавляет .is-in */
  .reveal { opacity: 0; transform: translateY(24px);
            transition: opacity var(--dur-slow) var(--ease),
                        transform var(--dur-slow) var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: 80ms; }
  .reveal[data-delay="2"] { transition-delay: 160ms; }
  .reveal[data-delay="3"] { transition-delay: 240ms; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
  }

  .hide-desktop { display: none; }
  /* Мобильное меню включается с планшетов вплоть до iPad Pro (≤1024px) */
  @media (max-width: 1024px) {
    .nav, .header__phone { display: none; }
    .burger { display: grid; }
    .header__actions { margin-inline-start: auto; }  /* прижимаем бургер вправо */
    .hide-mobile { display: none !important; }
    .hide-desktop { display: revert; }
  }

  /* --- Тач-цели: на сенсорных устройствах минимум 48×48px (Google) ----
     Применяем по типу указателя, а не по ширине — точнее. */
  @media (pointer: coarse) {
    .btn { min-height: var(--tap); }
    .nav__link, .dropdown a, .header__phone,
    .footer a, .acc summary, .card__link, .checkbox a {
      min-height: var(--tap);
    }
    .footer a { display: inline-flex; align-items: center; }
    .checkbox input { width: 1.35em; height: 1.35em; }
  }

  /* --- Планшеты (портрет/ландшафт) ----------------------------------- */
  @media (min-width: 601px) and (max-width: 1024px) {
    .grid--2 { --min: 320px; }                 /* гарантируем 2 колонки */
    .hero__trust { gap: var(--space-6); }
    .cta { padding-inline: clamp(1.5rem, 4vw, 3rem); }
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer__grid > :nth-child(4) { grid-column: 2 / -1; }
  }

  /* На узких экранах крупные кнопки чуть меньше шрифтом — аккуратнее переносятся */
  @media (max-width: 480px) {
    .btn--lg { font-size: var(--fs-sm); padding-inline: 1.4em; }
  }

  /* --- Узкие телефоны и iPhone SE (≤360px / 320px) ------------------- */
  @media (max-width: 380px) {
    :root { --gutter: 0.9rem; }
    .hero__cta .btn, .cta__actions .btn { width: 100%; }   /* кнопки в столбик */
    .btn--lg { font-size: var(--fs-sm); }
    .hero__cta, .cta__actions { gap: var(--space-2); }
    .hero__trust { gap: var(--space-4) var(--space-5); }
    .badge { font-size: 0.6875rem; }
    .m-menu { width: 100vw; }                               /* drawer на всю ширину */
    .case__metrics { gap: var(--space-4); }
    /* предотвращаем горизонтальный вынос моноширинных панелей */
    .hero__panel p, .panel__score { font-size: var(--fs-xs); }
  }

  /* Универсальная страховка от горизонтального скролла */
  .container, .hero__panel, .feature { min-width: 0; }
  img, svg, .card { max-width: 100%; }
}

/* ==========================================================================
   ДОПОЛНЕНИЯ ДЛЯ ВНУТРЕННИХ СТРАНИЦ (тарифы, активное меню, хлебные крошки)
   ========================================================================== */
@layer components {

  /* Активный пункт навигации */
  .nav__link[aria-current="page"] { color: var(--c-text); }
  .nav__link[aria-current="page"]::after {
    content: ""; display: block; position: absolute; left: .85rem; right: .85rem;
    bottom: .2rem; height: 2px; border-radius: 2px; background: var(--c-accent);
  }
  .nav__item { } /* позиционирование уже relative */
  .m-menu__link[aria-current="page"], .m-menu__parent[aria-current="page"] { color: var(--c-accent); }

  /* Хлебные крошки */
  .crumbs { display: flex; flex-wrap: wrap; gap: .5ch; align-items: center;
            font-size: var(--fs-sm); color: var(--c-text-muted);
            margin-bottom: var(--space-5); }
  .crumbs a { color: var(--c-text-muted); }
  .crumbs a:hover { color: var(--c-accent); }
  .crumbs span[aria-current] { color: var(--c-text-soft); }
  .crumbs .sep { opacity: .5; }

  /* Hero внутренней страницы */
  .page-hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem)
                              clamp(2rem, 1rem + 3vw, 3.5rem); }
  .page-hero__lead { font-size: var(--fs-lead); color: var(--c-text-soft);
                     max-width: 56ch; margin-top: var(--space-4); }
  .page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3);
                    margin-top: var(--space-6); }

  /* Тарифы */
  .price { position: relative; display: flex; flex-direction: column;
           gap: var(--space-4); }
  .price--featured { border-color: rgba(66,179,94,.4); box-shadow: var(--glow-accent); }
  .price__badge { position: absolute; top: -.8rem; inset-inline-end: 1.25rem; }
  .price__name { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
  .price__amount { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
                   font-weight: var(--fw-black); line-height: 1.1; }
  .price__amount small { font-size: .5em; color: var(--c-text-muted);
                         font-weight: var(--fw-medium); }
  .price__note { font-size: var(--fs-sm); color: var(--c-text-muted); }
  .price__list { display: grid; gap: var(--space-3); margin-block: var(--space-2); }
  .price__list li { display: flex; gap: var(--space-3); align-items: flex-start;
                    font-size: var(--fs-sm); color: var(--c-text-soft); }
  .price__list svg { color: var(--c-accent); flex: none; margin-top: .15em;
                     width: 1.1rem; height: 1.1rem; }
  .price .btn { margin-top: auto; }

  /* Контакт-плитки */
  .contact-card { display: flex; gap: var(--space-4); align-items: flex-start; }
  .contact-card .card__icon { flex: none; }
  .contact-card b { display: block; font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
  .contact-card span { color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* Типографика текстовых (юридических) страниц */
  .prose { color: var(--c-text-soft); }
  .prose h2 { color: var(--c-text); margin-block: var(--space-7) var(--space-3);
              font-size: var(--fs-h3); }
  .prose h3 { color: var(--c-text); margin-block: var(--space-5) var(--space-2);
              font-size: var(--fs-h4); }
  .prose p, .prose li { font-size: var(--fs-body); line-height: var(--lh-normal); }
  .prose ul, .prose ol { padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); }
  .prose a { color: var(--c-accent); text-decoration: underline; }
  .prose > * + * { margin-top: var(--space-3); }
  .note-box { padding: var(--space-4) var(--space-5); border-radius: var(--r-md);
              border: 1px solid rgba(255,197,61,.3); background: rgba(255,197,61,.07);
              color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* Контент из текстов переезда: таблицы, нумерованные шаги, изображения, якоря */
  .prose strong { color: var(--c-text); font-weight: var(--fw-semibold); }
  .prose figure { margin-block: var(--space-5); }
  .prose img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--c-line); }
  .prose h2[id], .prose h3[id] { scroll-margin-top: 6rem; }
  .table-wrap { overflow-x: auto; margin-block: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
  .table-wrap th, .table-wrap td { padding: .8rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--c-line); }
  .table-wrap th { color: var(--c-text); background: var(--c-surface); font-weight: var(--fw-semibold); }
  .table-wrap tr:last-child td { border-bottom: 0; }
  .prose ol.steps-list { list-style: none; counter-reset: st; padding-inline-start: 0; gap: var(--space-3); }
  .prose ol.steps-list > li { counter-increment: st; position: relative; padding: var(--space-3) var(--space-4) var(--space-3) 3.4rem;
                              border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
  .prose ol.steps-list > li::before { content: counter(st); position: absolute; inset-inline-start: 1rem; top: .85rem;
                              width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
                              background: var(--c-accent); color: #0A0B0D; font-weight: var(--fw-bold); font-size: var(--fs-xs); }
  .doc-lead p + p { margin-top: var(--space-3); }
  .form-error { color: #ff8a8a; font-size: var(--fs-sm); text-align: center; }
  .lead-block__contacts { margin-top: var(--space-4); color: var(--c-text-soft); font-size: var(--fs-sm); }
}

/* Фикс: плашка «Популярный» выступает над карточкой тарифа — снимаем обрезку */
@layer components {
  .card.price { overflow: visible; }
  .price__badge { top: -.7rem; }
}

/* Фикс: иконка .ico вне кнопок (в карточках-ссылках) растягивалась — задаём размер */
@layer components {
  .ico { width: 1.1em; height: 1.1em; flex: none; }
  .card__link svg { width: 1.1em; height: 1.1em; flex: none; }
}

/* Фикс: плашка «Популярный» — непрозрачный фон, чтобы бордер карточки не просвечивал */
@layer components {
  .price__badge { background: var(--c-surface-2); border-color: rgba(66,179,94,.5);
                  color: var(--c-accent); z-index: 2; }
}

/* Метрика без «+» (для значений-снижений «−50%», «MODX», «2 недели») */
@layer components {
  .metric__val--plain::before { content: none; }
}

/* ==========================================================================
   КОНВЕРСИОННЫЕ КОМПОНЕНТЫ (инлайн-форма, отзывы, команда, магниты, бар)
   ========================================================================== */
@layer components {

  /* Встроенная лид-секция: копи + форма */
  .lead-block { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: start; }
  @media (min-width: 880px) { .lead-block { grid-template-columns: 1.05fr 0.95fr; } }
  .lead-block__copy .lead { margin-top: var(--space-4); }
  .lead-trust { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
  .lead-trust li { display: flex; gap: var(--space-3); align-items: flex-start;
                   color: var(--c-text-soft); font-size: var(--fs-sm); }
  .lead-trust svg { width: 1.2rem; height: 1.2rem; color: var(--c-accent); flex: none; margin-top: .1em; }
  .lead-block__alt { display: flex; align-items: center; gap: var(--space-4);
                     flex-wrap: wrap; margin-top: var(--space-6); }

  .lead-form { display: grid; gap: var(--space-4); }
  .lead-form__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
  .lead-form__note { font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
  .field__legend { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-soft); }

  /* Выбор канала связи (радио-чипы) */
  .choice { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .choice__opt { flex: 1 1 6rem; position: relative; }
  .choice__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .choice__opt span { display: flex; align-items: center; justify-content: center;
                      min-height: 44px; padding: .5rem .75rem; text-align: center;
                      border: 1px solid var(--c-line); border-radius: var(--r-pill);
                      font-size: var(--fs-sm); font-weight: var(--fw-medium);
                      color: var(--c-text-soft); background: var(--c-bg-soft);
                      transition: border-color var(--dur-fast) var(--ease),
                                  color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .choice__opt input:checked + span { border-color: var(--c-accent); color: var(--c-accent);
                                      background: rgba(66,179,94,.1); }
  .choice__opt input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

  /* «Что дальше» после отправки */
  .next-steps { display: grid; gap: var(--space-3); text-align: left;
                margin-top: var(--space-4); }
  .next-steps li { display: flex; gap: var(--space-3); align-items: flex-start;
                   color: var(--c-text-soft); font-size: var(--fs-sm); }
  .next-steps .n { flex: none; width: 1.6rem; height: 1.6rem; display: grid;
                   place-items: center; border-radius: 50%; background: var(--c-surface-2);
                   color: var(--c-accent); font-weight: var(--fw-bold); font-size: var(--fs-xs); }

  /* Отзывы */
  .review { gap: var(--space-3); }
  .review__stars { color: var(--c-warning); letter-spacing: 2px; font-size: 1.1rem; }
  .review__text { color: var(--c-text); font-size: var(--fs-body); line-height: var(--lh-normal); }
  .review__who { margin-top: auto; }
  .review__who b { display: block; }
  .review__who span { color: var(--c-text-muted); font-size: var(--fs-sm); }

  /* Команда */
  .team { text-align: center; align-items: center; gap: var(--space-3); }
  .avatar { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center;
            font-family: var(--font-display); font-weight: var(--fw-bold);
            font-size: var(--fs-sm); letter-spacing: .02em;
            color: var(--c-accent-ink); background: var(--grad-accent); }
  .team figcaption b { display: block; }
  .team figcaption span { color: var(--c-text-muted); font-size: var(--fs-sm); }

  /* Магнит (чек-лист) */
  .magnet { display: flex; align-items: center; justify-content: space-between;
            gap: var(--space-5) var(--space-7); flex-wrap: wrap;
            padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
            border: 1px solid var(--c-line); border-radius: var(--r-xl);
            background:
              radial-gradient(40rem 20rem at 100% 0%, rgba(66,179,94,.12), transparent 60%),
              var(--c-surface); }
  .magnet > div { flex: 1 1 22rem; }
  .magnet .btn { flex: none; }

  /* Замер AI-видимости */
  .ai-check { display: flex; gap: var(--space-3); max-width: 540px;
              margin: var(--space-6) auto 0; flex-wrap: wrap; }
  .ai-check .input { flex: 1 1 12rem; min-width: 0; }
  .ai-check .btn { flex: none; }

  /* Якорь цены в hero услуги */
  .price-anchor { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--c-text-soft); }
  .price-anchor b { color: var(--c-text); }
  .price-anchor a { color: var(--c-accent); }

  /* Контекстные ссылки */
  .related { font-size: var(--fs-sm); }
  .related a { color: var(--c-accent); text-decoration: underline; }

  /* Реквизиты в футере */
  .footer__legal { margin-top: var(--space-6); padding-top: var(--space-4);
                   border-top: 1px solid var(--c-line-soft);
                   color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.6; }
  .footer__legal .text-muted { opacity: .8; }

  /* Липкий мобильный бар: позвонить + заявка */
  .m-cta-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-overlay);
               display: none; gap: var(--space-2);
               padding: var(--space-2) var(--space-3)
                        calc(var(--space-2) + env(safe-area-inset-bottom));
               background: color-mix(in srgb, var(--c-surface) 92%, transparent);
               -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
               border-top: 1px solid var(--c-line); }
  .m-cta-bar .btn { flex: 1; min-height: var(--tap); }
  @media (max-width: 768px) {
    .m-cta-bar { display: flex; }
    body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
    .to-top { inset-block-end: calc(4.5rem + env(safe-area-inset-bottom)); }
    .cookie { margin-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  }
}

/* ==========================================================================
   ИЕРАРХИЯ УСЛУГ: mega-меню (desktop) + вложенное меню (mobile) + списки
   ========================================================================== */
@layer components {

  /* Desktop mega-панель */
  .dropdown--mega {
    min-width: min(44rem, 92vw);
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    padding: var(--space-4);
  }
  .mega__col { display: grid; gap: 1px; align-content: start; }
  .dropdown--mega a {
    display: block; padding: .5rem .7rem; border-radius: var(--r-sm);
    color: var(--c-text-soft); font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .dropdown--mega a:hover { background: var(--c-surface-2); color: var(--c-text); }
  .mega__head { font-weight: var(--fw-bold); color: var(--c-text) !important; }
  .mega__head--mt { margin-top: var(--space-2); border-top: 1px solid var(--c-line-soft);
                    padding-top: .7rem !important; border-radius: 0; }
  .mega__all { color: var(--c-accent) !important; font-weight: var(--fw-semibold);
               margin-top: var(--space-2); }

  /* Mobile: все разделы услуг — единообразные строки (с детьми и без) */
  .m-svc { gap: 0; }
  .m-menu__group--sub { border-bottom: 1px solid var(--c-line-soft); }
  .m-menu__group--sub:last-child { border-bottom: none; }
  .m-menu__group--sub > .m-menu__row { align-items: center; gap: 0; }
  .m-menu__group--sub .m-menu__parent {
    flex: 1; min-width: 0; min-height: 52px; font-size: 1rem;
    flex-direction: row; justify-content: flex-start; gap: .45em;
    font-weight: var(--fw-medium); padding-block: .5rem; border-bottom: none;
  }
  .m-menu__group--sub .m-menu__parent .badge { flex: none; }
  .m-menu__group--sub .m-menu__toggle { flex: none; width: 48px; min-height: 52px; }

  /* Дети раздела: единая направляющая слева, без «плавающих» отступов */
  .m-menu__sub-inner--tight {
    gap: 0; margin: 0; border: none;
    padding: .1rem .25rem .5rem 1.15rem; position: relative;
  }
  .m-menu__sub-inner--tight::before {
    content: ""; position: absolute; inset-block: .3rem .6rem; inset-inline-start: .4rem;
    width: 2px; border-radius: 2px; background: var(--c-line);
  }
  .m-menu__sub-inner--tight a {
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 0; min-height: 42px; min-width: 0;
    padding: .35rem .5rem; border: none; background: transparent; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1.3;
    color: var(--c-text-soft); white-space: normal; overflow-wrap: anywhere;
  }
  .m-menu__sub-inner--tight a:active,
  .m-menu__sub-inner--tight a:hover { background: var(--c-surface); color: var(--c-accent); }

  /* Списки под-услуг (обзор услуг) */
  .sub-list { display: grid; gap: 1px; margin-top: var(--space-3); }
  .sub-list a { display: block; padding: .45rem .6rem; border-radius: var(--r-sm);
                color: var(--c-text-soft); font-size: var(--fs-sm); }
  .sub-list a:hover { background: var(--c-surface-2); color: var(--c-accent); }
}

/* Фильтр кейсов по направлениям и ссылки «кейсы направления» */
@layer components {
  .filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
  .filter__chip {
    display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: .5rem 1.15rem;
    border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-bg-soft);
    color: var(--c-text-soft); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .filter__chip:hover { border-color: var(--c-accent); color: var(--c-text); }
  .filter__chip.is-active { border-color: var(--c-accent); color: var(--c-accent); background: rgba(66,179,94,.1); }
  .filter__chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  .filter__n { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-muted); }
  .filter__chip.is-active .filter__n { color: inherit; opacity: .8; }
  .filter__n--lg { font-size: .5em; vertical-align: middle; margin-left: .3em; }
  [data-case-direction][hidden] { display: none !important; }

  .eyebrow a { color: inherit; }
  .eyebrow a:hover { text-decoration: underline; text-underline-offset: .2em; }

  .card__more { margin-top: var(--space-4); }
  .card__more a { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-sm);
                  font-weight: var(--fw-semibold); color: var(--c-accent); }
  .card__more a:hover { text-decoration: underline; text-underline-offset: .2em; }
  .card__more svg { width: 1.1em; height: 1.1em; flex: none; }
}