/*!critical-start*/
/* ---------------------------------------------------------------------------
   Inter — свой, не с Google Fonts.
   Внешний шрифт стоил двух подключений к чужим доменам (fonts.googleapis.com
   за таблицей стилей, потом fonts.gstatic.com за файлами), и оба блокировали
   первую отрисовку. Здесь это один файл с того же домена, что и страница.

   Переменное начертание: один файл покрывает всю шкалу от 100 до 900, тогда
   как раньше грузилось пять отдельных весов.

   Разбито на подмножества по unicode-range: португальская страница не тянет
   кириллицу, русская — не тянет то, чего в ней нет. Браузер сам скачивает
   только те файлы, символы которых реально встретились на странице.

   font-display:swap — текст виден сразу системным шрифтом и переключается,
   когда файл дойдёт. Пустая страница в ожидании шрифта хуже смены гарнитуры.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-cyrillic-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-cyrillic-ext-normal.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-cyrillic-italic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-cyrillic-ext-italic.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

  /* ============ TOKENS ============ */
  :root{
    /* raw palette (Apple-derived system) */
    --c-blue-fill:#0071e3;
    --c-blue-link:#0066cc;
    --c-blue-signal:#2997ff;
    --c-carbon:#1d1d1f;
    --c-frost:#f5f5f7;
    --c-ice:#f4f8fb;
    --c-smoke:#333333;
    --c-graphite:#474747;
    /* Был #707070: на светлом фоне подвала давал 3.4 к 1 при 12 пикселях —
       ниже порога 4.5, то есть подписи в подвале плохо читались, и не только
       людям со слабым зрением. #6e6e73 даёт 4.7 на фоне подвала и 5.1 на
       белом, оставаясь тем же приглушённым серым. */
    --c-ash:#6e6e73;
    /* Был #858585: подписи в подвале шли 12 пикселями и давали 3.4 к 1 —
       ниже порога 4.5. Тот же серый на тон глубже даёт 4.7 и остаётся
       приглушённым. В тёмной теме своё значение, там контраст и так проходил. */
    --c-mist:#6e6e73;
    --c-onyx:#000000;
    --c-pebble:#e2e2e5;
    --c-white:#ffffff;
    --c-hairline-light:#d2d2d7;

    /* semantic tokens — light (default) */
    --bg-page:var(--c-frost);
    --bg-elevated:var(--c-ice);
    --bg-surface2:var(--c-pebble);
    --bg-card:var(--c-white);
    --text-primary:var(--c-carbon);
    --text-secondary:var(--c-smoke);
    --text-tertiary:var(--c-ash);
    --text-muted:var(--c-mist);
    --text-inverse:var(--c-frost);
    --border-hair:var(--c-hairline-light);
    --border-strong:var(--c-smoke);
    --nav-bg:var(--c-carbon);
    --nav-text:var(--c-frost);
    --nav-border:var(--c-smoke);
    --accent-fill:var(--c-blue-fill);
    --accent-fill-text:var(--c-frost);
    --accent-outline:var(--c-blue-link);
    --accent-decorative:var(--c-blue-signal);
    --input-bg:var(--c-frost);
    --input-border:var(--c-hairline-light);
    --shadow-product: rgba(0,0,0,0.22) 3px 5px 30px 0px;
    --shadow-soft: rgba(29,29,31,0.10) 0px 12px 40px 0px;

    /* type */
    --font-display:'SF Pro Display','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-text:'SF Pro Text','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

    /* spacing */
    --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px;
    --sp-24:24px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px;

    /* radius */
    --radius-card:8px;
    --radius-img:8px;
    --radius-input:8px;
    --radius-pill:980px;

    --page-max:1440px;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg-page:#000000;
      --bg-elevated:#111317;
      --bg-surface2:#1d1d1f;
      --bg-card:#161618;
      --text-primary:#f5f5f7;
      --text-secondary:#c7c7cc;
      --text-tertiary:#a1a1a6;
      --text-muted:#8e8e93;
      --text-inverse:#1d1d1f;
      --border-hair:#333336;
      --border-strong:#48484a;
      --nav-bg:#000000;
      --nav-text:#f5f5f7;
      --nav-border:#2c2c2e;
      --accent-outline:#4da3ff;
      --input-bg:#1c1c1e;
      --input-border:#3a3a3c;
      --shadow-product: rgba(0,0,0,0.55) 3px 5px 30px 0px;
      --shadow-soft: rgba(0,0,0,0.45) 0px 12px 40px 0px;
    }
  }
  :root[data-theme="dark"]{
    --bg-page:#000000;
    --bg-elevated:#111317;
    --bg-surface2:#1d1d1f;
    --bg-card:#161618;
    --text-primary:#f5f5f7;
    --text-secondary:#c7c7cc;
    --text-tertiary:#a1a1a6;
    --text-muted:#8e8e93;
    --text-inverse:#1d1d1f;
    --border-hair:#333336;
    --border-strong:#48484a;
    --nav-bg:#000000;
    --nav-text:#f5f5f7;
    --nav-border:#2c2c2e;
    --accent-outline:#4da3ff;
    --input-bg:#1c1c1e;
    --input-border:#3a3a3c;
    --shadow-product: rgba(0,0,0,0.55) 3px 5px 30px 0px;
    --shadow-soft: rgba(0,0,0,0.45) 0px 12px 40px 0px;
  }

  /* Accent bands use their own semantic theme tokens. Component rules below
     never depend on a literal colour, so the same markup remains readable in
     both automatic and manually selected themes. */
  :root{
    --feature-blue-start:#dcecff;
    --feature-blue-end:#a8d2ff;
    --feature-blue-ink:#12385f;
    --feature-blue-shape:#0868bd;
    --feature-teal-start:#d8f4ec;
    --feature-teal-end:#a9e1d2;
    --feature-teal-ink:#123f37;
    --feature-teal-shape:#087a67;
    --feature-violet-start:#eee7ff;
    --feature-violet-end:#d3c3f8;
    --feature-violet-ink:#38285f;
    --feature-violet-shape:#6849b9;
    --feature-amber-start:#fff1d4;
    --feature-amber-end:#f6d49b;
    --feature-amber-ink:#50370c;
    --feature-amber-shape:#a86406;
    --feature-graphite-start:#e7e9ed;
    --feature-graphite-end:#cbd0d8;
    --feature-graphite-ink:#24282e;
    --feature-graphite-shape:#5a6470;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --feature-blue-start:#102a44;
      --feature-blue-end:#173f68;
      --feature-blue-ink:#eef7ff;
      --feature-blue-shape:#79baff;
      --feature-teal-start:#0f302b;
      --feature-teal-end:#17483e;
      --feature-teal-ink:#edfffa;
      --feature-teal-shape:#70d9bf;
      --feature-violet-start:#251d42;
      --feature-violet-end:#3a2b63;
      --feature-violet-ink:#f8f4ff;
      --feature-violet-shape:#b9a0ff;
      --feature-amber-start:#3a2b12;
      --feature-amber-end:#5a3e13;
      --feature-amber-ink:#fff8e8;
      --feature-amber-shape:#f5bd62;
      --feature-graphite-start:#202328;
      --feature-graphite-end:#323740;
      --feature-graphite-ink:#f5f7fa;
      --feature-graphite-shape:#aab4c2;
    }
  }
  :root[data-theme="dark"]{
    --feature-blue-start:#102a44;
    --feature-blue-end:#173f68;
    --feature-blue-ink:#eef7ff;
    --feature-blue-shape:#79baff;
    --feature-teal-start:#0f302b;
    --feature-teal-end:#17483e;
    --feature-teal-ink:#edfffa;
    --feature-teal-shape:#70d9bf;
    --feature-violet-start:#251d42;
    --feature-violet-end:#3a2b63;
    --feature-violet-ink:#f8f4ff;
    --feature-violet-shape:#b9a0ff;
    --feature-amber-start:#3a2b12;
    --feature-amber-end:#5a3e13;
    --feature-amber-ink:#fff8e8;
    --feature-amber-shape:#f5bd62;
    --feature-graphite-start:#202328;
    --feature-graphite-end:#323740;
    --feature-graphite-ink:#f5f7fa;
    --feature-graphite-shape:#aab4c2;
  }

  *{box-sizing:border-box;}

  /**
   * Атрибут hidden обязан скрывать элемент.
   *
   * Браузер задаёт для [hidden] display:none в своей встроенной таблице, а она
   * слабее любого правила из нашей. Поэтому .consent{display:flex} молча
   * отменял скрытие: скрипт ставил элементу hidden, а баннер согласия
   * оставался на экране — и после «Принять», и после «Только необходимые», и
   * при следующем заходе у человека, который выбор уже сделал.
   *
   * !important здесь по делу: это не перебивание чужого стиля, а
   * восстановление смысла самого атрибута. Правило стоит в критической части,
   * чтобы работать до загрузки полного файла стилей.
   */
  [hidden]{ display:none !important; }
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

  body{
    margin:0;
    background:var(--bg-page);
    color:var(--text-primary);
    font-family:var(--font-text);
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; text-wrap:balance;}
  p{margin:0;}
  a{color:inherit;}
  ul{margin:0; padding:0; list-style:none;}
  button{font-family:inherit;}

  img,svg{max-width:100%;}

  .wrap{max-width:var(--page-max); margin:0 auto; padding:0 var(--sp-24);}
  .prose-col{max-width:980px; margin:0 auto;}

  /* Воздух — то, что на openai.com делает больше половины впечатления:
     не шрифт, а пустота вокруг него. Раньше секции шли через 64px и
     страница читалась плотной. */
  section{padding:112px 0;}

  .eyebrow{
    font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--text-tertiary);
  }

  /* Крупные заголовки набираются по манере openai.com: вес 500 вместо 600 и
     ОТРИЦАТЕЛЬНЫЙ трекинг. Причина не в моде: чем крупнее кегль, тем шире
     кажутся межбуквенные просветы, и заголовок в 56px с положительным
     трекингом расползается. Трекинг задан в em, поэтому сжатие
     пропорционально размеру и остаётся верным на любом экране. */
  .heading-xl{ font-size:56px; line-height:1.03; letter-spacing:-0.03em; font-weight:500; }
  .heading-lg{ font-size:44px; line-height:1.08; letter-spacing:-0.025em; font-weight:500; }
  .heading{ font-size:40px; line-height:1.1; letter-spacing:-0.022em; font-weight:500; }
  /* Мелкие заголовки остаются плотными по весу: на 28px вес 500 в кириллице
     уже читается как обычный текст и перестаёт делить страницу на разделы. */
  .heading-sm{ font-size:28px; line-height:1.2; letter-spacing:-0.012em; font-weight:600; }
  .subheading{ font-size:21px; line-height:1.35; letter-spacing:-0.1px; font-weight:300; color:var(--text-secondary); }
  .body-text{ font-size:17px; line-height:1.55; letter-spacing:-0.2px; color:var(--text-secondary); }
  .body-sm{ font-size:14px; line-height:1.4; letter-spacing:-0.16px; color:var(--text-tertiary); }
  .caption{ font-size:12px; line-height:1.33; letter-spacing:0.2px; color:var(--text-muted); }

  @media (max-width:820px){
    .heading-xl{font-size:38px; letter-spacing:-0.025em;}
    .heading-lg{font-size:32px;}
    .heading{font-size:30px;}
    .heading-sm{font-size:23px;}
    .subheading{font-size:18px;}
    section{padding:64px 0;}
    .section-head{ margin-bottom:36px; }
  }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:var(--radius-pill);
    font-size:17px; font-weight:400; letter-spacing:-0.1px;
    padding:11px 22px;
    text-decoration:none; cursor:pointer;
    transition:transform .15s ease, opacity .15s ease, background-color .15s ease;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn:active{transform:scale(0.98);}
  .btn:focus-visible{outline:2px solid var(--accent-decorative); outline-offset:2px;}
  /* Чистый белый, а не #f4f8fb: на фирменном синем тот давал 4.4 к 1 —
     чуть ниже порога. Белый даёт 4.7 и не трогает сам синий. */
  .btn-filled{ background:var(--accent-fill); color:#fff; }
  .btn-filled:hover{ opacity:0.88; }
  /* Вторичная кнопка нейтральная, а не синяя: на openai.com цвет несёт только
     ОДНА кнопка на экран, и от этого она и работает. Синяя рамка рядом с синей
     заливкой делила внимание пополам. */
  .btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--text-primary); }
  .btn-outline:hover{ border-color:var(--text-primary); background:color-mix(in srgb, var(--text-primary) 6%, transparent); }
  .btn-ghost{ background:transparent; color:var(--accent-outline); padding:11px 4px; }
  .btn-ghost:hover{ text-decoration:underline; }
  .btn-sm{ padding:8px 15px; font-size:14px; }
  .btn[disabled]{ opacity:0.5; cursor:not-allowed; }

  .btn-row{ display:flex; gap:var(--sp-12); flex-wrap:wrap; align-items:center; }

  /* ============ NAV ============ */
  .nav{
    position:sticky; top:0; z-index:50;
    background:var(--nav-bg); color:var(--nav-text);
    border-bottom:1px solid var(--nav-border);
  }
  .nav-inner{
    max-width:var(--page-max); margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
    height:52px;
  }
  .nav-logo{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--nav-text); text-decoration:none; letter-spacing:-0.2px;}
  .nav-logo .dot{ width:7px; height:7px; border-radius:50%; background:var(--c-blue-fill); flex:none; }
  /* Ссылка «к основному содержанию»: не видна, пока на неё не встал фокус
     с клавиатуры. Прятать через display:none нельзя — тогда фокус на неё
     не встанет вовсе и смысла в ней не будет. */
  .skip-link{ position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--bg-page); color:var(--text-primary); padding:12px 20px;
    border:1px solid var(--border-strong); border-radius:0 0 8px 0; text-decoration:none; font-size:14px; }
  .skip-link:focus{ left:0; }

  .nav-links{ display:flex; gap:26px; }
  .nav-links a{ font-size:12px; font-weight:400; color:var(--nav-text); opacity:0.8; text-decoration:none; }
  .nav-links a:hover{ opacity:1; }
  .nav-links a.active-nav{ opacity:1; color:var(--accent-decorative); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }

  /* Seletor de idioma */
  .lang-switch{ position:relative; }
  .lang-switch-btn{
    font-size:11.5px; font-weight:600; letter-spacing:0.4px; color:var(--nav-text); background:transparent;
    border:1px solid rgba(245,245,247,.28); border-radius:7px; padding:6px 10px; cursor:pointer;
  }
  .lang-switch-btn:hover{ border-color:rgba(245,245,247,.5); }
  .lang-switch-menu{
    display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:150px; z-index:60;
    background:var(--bg-card); border:1px solid var(--border-hair); border-radius:10px;
    padding:6px; flex-direction:column; gap:2px;
  }
  .lang-switch-menu.open{ display:flex; }
  .lang-switch-menu a{ font-size:13px; color:var(--text-secondary); text-decoration:none; padding:8px 10px; border-radius:6px; }
  .lang-switch-menu a:hover{ background:var(--bg-elevated); }
  .lang-switch-menu a.active{ color:var(--accent-fill); font-weight:600; }
  @media (max-width:720px){ .lang-switch-menu{ right:auto; left:0; } }
  .nav-mobile-toggle{
    display:none; background:none; border:0; color:var(--nav-text); cursor:pointer;
    width:32px; height:32px; padding:0; flex:none; position:relative;
  }
  .nav-mobile-toggle span, .nav-mobile-toggle span::before, .nav-mobile-toggle span::after{
    content:''; position:absolute; left:7px; right:7px; height:1.5px; background:currentColor; transition:transform .15s ease, opacity .15s ease;
  }
  .nav-mobile-toggle span{ top:15px; }
  .nav-mobile-toggle span::before{ top:-7px; }
  .nav-mobile-toggle span::after{ top:7px; }
  .nav.open .nav-mobile-toggle span{ background:transparent; }
  .nav.open .nav-mobile-toggle span::before{ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav-mobile-toggle span::after{ transform:translateY(-7px) rotate(-45deg); }
  @media (max-width:1150px){
    .nav-mobile-toggle{ display:block; }
    .nav-links{
      display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:52px;
      background:var(--nav-bg); border-bottom:1px solid var(--nav-border);
      max-height:0; overflow:hidden; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; transition:max-height .2s ease;
    }
    /* calc, não um valor fixo em px: cresce sozinho com o número de itens do menu (não
       partir sempre que se acrescenta uma página nova) e nunca ultrapassa o ecrã visível —
       com scroll interno (overflow-y acima) no caso raro de não caber tudo mesmo assim. */
    .nav.open .nav-links{ max-height:calc(100vh - 52px); }
    .nav-links a{ padding:13px 24px; border-top:1px solid var(--nav-border); opacity:1; }
    .nav-cta .btn{ padding:7px 14px; font-size:13px; }
  }


  /* ---- STEMD: logo + dropdowns do menu principal ---- */
  .nav-logo .logo-ai{ margin-left:5px; padding:2px 5px; border-radius:4px; font-size:10.5px; font-weight:700; letter-spacing:.6px;
    background:var(--c-blue-fill); color:#fff; line-height:1.2; }
  .nav-item{ position:relative; display:flex; align-items:center; }
  .nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
  .nav-item .caret{ width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent;
    border-top:4px solid currentColor; opacity:.65; transition:transform .15s ease; }
  .nav-drop{
    display:none; position:absolute; top:calc(100% + 10px); left:-14px; min-width:236px; z-index:60;
    background:var(--bg-card); border:1px solid var(--border-hair); border-radius:12px;
    padding:7px; flex-direction:column; gap:1px;
  }
  .nav-drop::before{ content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
  .nav-drop a{ font-size:13px; color:var(--text-secondary); text-decoration:none; padding:8px 11px; border-radius:7px; opacity:1; white-space:nowrap; }
  .nav-drop a:hover{ background:var(--bg-elevated); color:var(--text-primary); }
  .nav-item.has-drop:hover > .nav-drop,
  .nav-item.has-drop:focus-within > .nav-drop{ display:flex; }
  .nav-item.has-drop:hover > a .caret{ transform:rotate(180deg); }
  @media (max-width:1150px){
    .nav-item{ display:block; }
    .nav-item > a{ padding:13px 24px; border-top:1px solid var(--nav-border); opacity:1; display:flex; justify-content:space-between; }
    .nav-drop{
      display:flex; position:static; min-width:0; background:transparent; border:0; box-shadow:none;
      border-radius:0; padding:0; gap:0;
    }
    .nav-drop a{ padding:11px 24px 11px 40px; border-top:1px solid var(--nav-border); border-radius:0;
      color:var(--nav-text); opacity:.72; font-size:12.5px; white-space:normal; overflow-wrap:anywhere; }
    .nav-drop a:hover{ background:transparent; opacity:1; }
    .nav-item .caret{ display:none; }
  }


  /* ---- STEMD: listas, grelhas e hero de páginas internas ---- */
  .body-lead{ font-size:17px; line-height:1.55; color:var(--text-secondary); max-width:640px; margin:0 auto var(--sp-24); }
  .hero .body-lead{ margin-left:auto; margin-right:auto; }
  .hero-btns{ justify-content:center; margin-bottom:var(--sp-64); }
  .check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .check-list li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.55; color:var(--text-secondary); }
  .check-list li::before{
    content:''; position:absolute; left:2px; top:7px; width:11px; height:6px;
    border-left:1.6px solid var(--accent-fill); border-bottom:1.6px solid var(--accent-fill);
    transform:rotate(-45deg);
  }
  .num-list{ margin:0; padding-left:0; list-style:none; counter-reset:stemdnum; display:flex; flex-direction:column; gap:12px; }
  .num-list li{ counter-increment:stemdnum; position:relative; padding-left:38px; font-size:14.5px; line-height:1.55; color:var(--text-secondary); }
  .num-list li::before{
    content:counter(stemdnum,decimal-leading-zero); position:absolute; left:0; top:1px;
    font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.5px; color:var(--accent-decorative);
  }
  .os-grid{ grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); }
  .agent-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
  @media (max-width:720px){
    .os-grid, .agent-grid{ grid-template-columns:1fr; }
  }


  /* ---- STEMD: barra de topo em ecrãs pequenos ----
     O botão de CTA em texto longo ("Book an AI CheckUp" / "Заказать AI CheckUp")
     não cabe ao lado do seletor de idioma e do hambúrguer em telemóvel: abaixo de
     900px passa para dentro do menu, como último item. */
  .nav-mobile-cta{ display:none; }
  @media (max-width:1150px){
    .nav-cta > .btn{ display:none; }
    .nav-mobile-cta{ display:block; }
    .nav-mobile-cta > a{ color:var(--c-blue-fill); font-weight:600; }
  }

  /* ============ SUBNAV (navegação interna de uma página longa) ============ */
  .subnav{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; padding:14px 24px; border-bottom:1px solid var(--border-hair); background:var(--bg-elevated); position:sticky; top:52px; z-index:40; }
  .subnav a{ font-size:12.5px; color:var(--text-secondary); text-decoration:none; white-space:nowrap; }
  .subnav a:hover{ color:var(--text-primary); }

  /* ============ HERO ============ */
  .hero{ background:var(--bg-page); padding-top:var(--sp-64); padding-bottom:0; text-align:center; }
  .hero-eyebrow{ margin-bottom:var(--sp-16); }
  .hero h1{ margin-bottom:var(--sp-16); }
  .hero .subheading{ max-width:640px; margin:0 auto var(--sp-24); }
  .hero .btn-row{ justify-content:center; margin-bottom:var(--sp-56); }
  .hero-trust{ margin-top:var(--sp-16); }

  /* Banner de imagem opcional, definido em admin/hero-banners.php */
  .hero.has-image{
    position:relative; isolation:isolate; background-size:cover; background-position:center;
    overflow:hidden; display:flex; flex-direction:column; padding-top:0; padding-bottom:0;
  }
  .hero.has-image::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.62) 45%, rgba(10,10,12,.82) 100%);
  }
  .hero.has-image > .wrap:first-of-type{ position:relative; z-index:1; width:100%; margin-top:auto; margin-bottom:auto; padding-top:var(--sp-56); padding-bottom:var(--sp-56); }
  .hero.has-image .eyebrow{ color:#e5e5ea; }
  .hero.has-image h1, .hero.has-image .subheading{ color:#fff; }
  .hero.has-image .subheading{ color:#e5e5ea; }
  .hero.has-image .btn-outline{ border-color:rgba(255,255,255,.55); color:#fff; }
  .hero.has-image .hero-trust, .hero.has-image .hero-trust *{ color:#d1d1d6; }

  /* Na página inicial, a imagem abre a história sozinha. O conteúdo vem num
     bloco editorial separado logo abaixo, sem texto nem véu sobre o visual. */
  .home-hero__visual.hero.has-image{
    display:block;
    min-height:clamp(420px, 43vw, 680px);
    background-position:center;
  }
  .home-hero__visual.hero.has-image::before{ display:none; }
  .home-hero__visual .hero-video-bg{ z-index:0; }
  .home-hero__copy.hero{
    padding:clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
    text-align:left;
    border-bottom:1px solid var(--border-hair);
  }
  .home-hero__copy.hero h1{
    max-width:1040px;
    margin-bottom:var(--sp-24);
  }
  .home-hero__copy.hero .subheading{
    max-width:720px;
    margin:0 0 var(--sp-24);
  }
  .home-hero__copy.hero .btn-row{
    justify-content:flex-start;
    margin-bottom:0;
  }

  /* Vídeo de fundo (opcional, definido em admin/hero-banners.php) — fica por baixo do
     degradê escuro (::before, z-index:0) para o texto continuar legível por cima. */
  .hero-video-bg{
    position:absolute; inset:0; z-index:-1; width:100%; height:100%;
    object-fit:cover; background:var(--c-carbon);
  }

  /* Кнопка звука поверх первого экрана. Появляется только когда скрипт
     убедился, что видео действительно играет — до этого у неё атрибут
     hidden. Мелкая и полупрозрачная: это не призыв к действию, а вежливая
     возможность. Автоматически звук включить нельзя: браузер запускает сам
     только беззвучное видео. */
  .hero-sound{
    position:absolute; right:18px; bottom:18px; z-index:2;
    width:44px; height:44px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,10,12,.55); border:1px solid rgba(255,255,255,.35);
    color:#fff; cursor:pointer;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:background-color .15s ease, border-color .15s ease;
  }
  .hero-sound:hover{ background:rgba(10,10,12,.75); border-color:rgba(255,255,255,.6); }
  .hero-sound:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
  /* Вес селекторов здесь важен: «.hero-sound svg» весит больше, чем
     «.hero-sound__on», и одиночный класс не смог бы спрятать второй значок —
     в кнопке было видно оба сразу. Поэтому переключение тоже пишется через
     родителя. */
  .hero-sound svg{ width:20px; height:20px; display:block; }
  .hero-sound .hero-sound__on{ display:none; }
  .hero-sound.is-on .hero-sound__off{ display:none; }
  .hero-sound.is-on .hero-sound__on{ display:block; }
  @media (max-width:720px){
    .hero-sound{ right:12px; bottom:12px; width:40px; height:40px; }
  }

  /* Кто просит меньше движения — получает неподвижный кадр, а не зацикленное
     видео. Постер уже стоит фоном самого <header>, поэтому убрать элемент
     достаточно: первый экран остаётся прежним, просто перестаёт двигаться.
     Это не вкусовая настройка — для части людей движущийся фон вызывает
     тошноту и головную боль. */
  @media (prefers-reduced-motion: reduce){
    .hero-video-bg{ display:none; }
  }

  /* Прежде видео на телефоне пряталось стилями ради трафика. Теперь скрипт
     берёт для телефона отдельный облегчённый файл (assets/hero/<slug>-mobile.mp4),
     поэтому прятать нечего — играет он. */

  /* Espaçamento (altura do banner) — só tem efeito visível com imagem de fundo */
  .hero.has-image.pad-compact{ min-height:380px; }
  .hero.has-image.pad-normal{ min-height:560px; }
  .hero.has-image.pad-spacious{ min-height:720px; }
  @media (max-width:720px){
    .hero.has-image.pad-compact{ min-height:320px; }
    .hero.has-image.pad-normal{ min-height:420px; }
    .hero.has-image.pad-spacious{ min-height:520px; }
  }
  .hero:not(.has-image).pad-compact{ padding-top:var(--sp-40); }
  .hero:not(.has-image).pad-normal{ padding-top:var(--sp-64); }
  .hero:not(.has-image).pad-spacious{ padding-top:96px; }

  /* Alinhamento vertical do bloco de texto (só relevante com imagem, que tem altura própria) */
  .hero.has-image.align-v-top > .wrap:first-of-type{ margin-top:0; }
  .hero.has-image.align-v-center > .wrap:first-of-type{ margin-top:auto; margin-bottom:auto; }
  .hero.has-image.align-v-bottom > .wrap:first-of-type{ margin-bottom:0; }

  /* Alinhamento horizontal do texto e dos botões */
  .hero.align-h-left{ text-align:left; }
  .hero.align-h-right{ text-align:right; }
  .hero.align-h-left .subheading{ margin-left:0; margin-right:auto; }
  .hero.align-h-right .subheading{ margin-left:auto; margin-right:0; }
  .hero.align-h-left .btn-row{ justify-content:flex-start; }
  .hero.align-h-right .btn-row{ justify-content:flex-end; }

  /* browser / product mock */
  .mock-shell{
    max-width:1180px; margin:0 auto; text-align:left;
    background:var(--bg-card);
    border:1px solid var(--border-hair);
    border-radius:14px;
    box-shadow:var(--shadow-product);
    overflow:hidden;
  }
  .mock-titlebar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border-hair); }
  .mock-dot{ width:10px; height:10px; border-radius:50%; }
  .mock-dot.r{background:#ff5f57;} .mock-dot.y{background:#febc2e;} .mock-dot.g{background:#28c840;}
  .mock-titlebar span{ margin-left:12px; font-size:12px; color:var(--text-muted); font-family:var(--font-text); }
  .mock-body{ display:grid; grid-template-columns:200px 1fr; min-height:340px; }
  .mock-rail{ border-right:1px solid var(--border-hair); padding:18px 14px; display:flex; flex-direction:column; gap:6px; }
  .mock-rail-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--text-tertiary); }
  .mock-rail-item.active{ background:var(--bg-elevated); color:var(--text-primary); font-weight:500; }
  .mock-rail-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.5; flex:none; }
  .mock-main{ padding:22px 26px; display:flex; flex-direction:column; gap:20px; }
  .mock-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .mock-kpi{ border:1px solid var(--border-hair); border-radius:8px; padding:12px 14px; }
  .mock-kpi .k-label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; }
  .mock-kpi .k-value{ font-family:var(--font-display); font-size:22px; font-weight:600; margin-top:4px; }
  .mock-kpi .k-delta{ font-size:11px; color:#1f9d55; margin-top:2px; font-variant-numeric:tabular-nums; }
  .mock-chart{ border:1px solid var(--border-hair); border-radius:8px; padding:16px; flex:1; display:flex; flex-direction:column; gap:10px;}
  .mock-chart .k-label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; }
  .bars{ display:flex; align-items:flex-end; gap:8px; height:100px; }
  .bars i{ flex:1; background:linear-gradient(180deg, var(--c-blue-signal), var(--c-blue-fill)); border-radius:3px 3px 0 0; display:block; }
  .mock-chat{ position:relative; margin-top:-96px; margin-left:auto; margin-right:24px; width:230px; background:var(--bg-card); border:1px solid var(--border-hair); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-soft); }
  .mock-chat .who{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; margin-bottom:6px;}
  .mock-chat .who .avatar{ width:18px; height:18px; border-radius:50%; background:var(--c-blue-fill);}
  .mock-chat .msg{ font-size:12px; color:var(--text-secondary); line-height:1.4; }
  @media (max-width:820px){
    .mock-body{ grid-template-columns:1fr; }
    .mock-rail{ display:none; }
    .mock-chat{ display:none; }
  }

  /*!critical-end*/
  /* ============ SERVICE BANNERS ============ */
  .svc-section{ padding-top:var(--sp-56); }
  .svc-grid{ display:grid; grid-template-columns:1.15fr 0.85fr 0.85fr 1.15fr; gap:var(--sp-20); }
  @media (max-width:1080px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

  .svc-card{
    position:relative; overflow:hidden; border-radius:var(--radius-card);
    min-height:320px; padding:26px; display:flex; flex-direction:column; justify-content:space-between;
    text-decoration:none; isolation:isolate;
    transition:transform .25s ease;
  }
  .svc-card:hover{ transform:translateY(-3px); }
  .svc-card:focus-visible{ outline:2px solid var(--c-blue-signal); outline-offset:3px; }
  .svc-card .svc-label{ font-size:12px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; opacity:0.75; position:relative; z-index:2; }
  .svc-card h3{ font-size:26px; margin:10px 0 8px; position:relative; z-index:2; }
  .svc-card p{ font-size:14px; line-height:1.5; max-width:34ch; position:relative; z-index:2; }
  .svc-card .svc-cta{
    align-self:flex-start; margin-top:18px; font-size:13px; font-weight:600;
    padding:8px 16px; border-radius:var(--radius-pill); position:relative; z-index:2;
  }

  .svc-card.dark{ background:var(--c-carbon); color:var(--c-frost); }
  .svc-card.dark p{ color:#c7c7cc; }
  .svc-card.dark .svc-cta{ background:var(--c-frost); color:var(--c-carbon); }

  .svc-card.smoke{ background:linear-gradient(155deg, #333333, #1d1d1f); color:var(--c-frost); }
  .svc-card.smoke p{ color:#c7c7cc; }
  .svc-card.smoke .svc-cta{ background:var(--c-blue-fill); color:#f4f8fb; }

  .svc-card.wash-blue{ background:radial-gradient(120% 140% at 15% 0%, #eaf4ff 0%, #d9ecff 55%, #cbe4ff 100%); color:var(--c-carbon); }
  .svc-card.wash-blue p{ color:var(--c-smoke); }
  .svc-card.wash-blue .svc-cta{ background:var(--c-blue-fill); color:#f4f8fb; }

  .svc-card.wash-ice{ background:linear-gradient(160deg, var(--c-ice), var(--c-pebble)); color:var(--c-carbon); }
  .svc-card.wash-ice p{ color:var(--c-smoke); }
  .svc-card.wash-ice .svc-cta{ background:var(--c-carbon); color:var(--c-frost); }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .svc-card.wash-blue{ background:radial-gradient(120% 140% at 15% 0%, #0f2a44 0%, #0c3252 55%, #0a3a63 100%); color:#f5f5f7; }
    :root:not([data-theme="light"]) .svc-card.wash-blue p{ color:#c7c7cc; }
    :root:not([data-theme="light"]) .svc-card.wash-ice{ background:linear-gradient(160deg, #1d1d1f, #101012); color:#f5f5f7; }
    :root:not([data-theme="light"]) .svc-card.wash-ice p{ color:#c7c7cc; }
  }
  :root[data-theme="dark"] .svc-card.wash-blue{ background:radial-gradient(120% 140% at 15% 0%, #0f2a44 0%, #0c3252 55%, #0a3a63 100%); color:#f5f5f7; }
  :root[data-theme="dark"] .svc-card.wash-blue p{ color:#c7c7cc; }
  :root[data-theme="dark"] .svc-card.wash-ice{ background:linear-gradient(160deg, #1d1d1f, #101012); color:#f5f5f7; }
  :root[data-theme="dark"] .svc-card.wash-ice p{ color:#c7c7cc; }

  /* Imagem de banner opcional por cartão (mesma imagem do hero da respetiva página) */
  .svc-image{
    position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
    transition:transform .5s ease;
  }
  .svc-card:hover .svc-image{ transform:scale(1.045); }
  .svc-card.has-image::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.78) 100%);
  }
  .svc-card.has-image .svc-label{ color:#e5e5ea; opacity:0.95; }
  .svc-card.has-image h3, .svc-card.has-image p{ color:#fff; }
  .svc-card.has-image .svc-cta{ background:#fff; color:var(--c-carbon); }

  /* decorative glyphs, absolutely positioned, low-key */
  .svc-glyph{ position:absolute; z-index:1; opacity:0.9; pointer-events:none; }

  .svc-waveform{ display:flex; align-items:flex-end; gap:5px; height:64px; bottom:26px; right:26px; }
  .svc-waveform i{ width:5px; border-radius:3px; background:var(--c-blue-signal); display:block; animation:svcwave 1.6s ease-in-out infinite; }
  .svc-waveform i:nth-child(1){ height:22px; animation-delay:0s; }
  .svc-waveform i:nth-child(2){ height:46px; animation-delay:.12s; }
  .svc-waveform i:nth-child(3){ height:64px; animation-delay:.24s; }
  .svc-waveform i:nth-child(4){ height:34px; animation-delay:.36s; }
  .svc-waveform i:nth-child(5){ height:52px; animation-delay:.48s; }
  .svc-waveform i:nth-child(6){ height:20px; animation-delay:.6s; }
  @keyframes svcwave{ 0%,100%{ transform:scaleY(0.55); opacity:0.55; } 50%{ transform:scaleY(1); opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .svc-waveform i{ animation:none; transform:none; opacity:0.85; } }

  .svc-nodes{ width:130px; height:110px; bottom:20px; right:16px; }
  .svc-nodes svg{ width:100%; height:100%; }
  .svc-nodes circle{ fill:var(--c-blue-fill); }
  .svc-nodes line{ stroke:var(--c-blue-fill); stroke-width:1.2; opacity:0.45; }

  .svc-avatars{ bottom:28px; right:26px; display:flex; }
  .svc-avatars span{ width:34px; height:34px; border-radius:50%; background:var(--c-carbon); border:2px solid var(--c-ice); margin-left:-10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; font-weight:600; color:#fff; }
  .svc-avatars span:first-child{ margin-left:0; }

  .svc-bars2{ display:flex; align-items:flex-end; gap:6px; height:56px; bottom:26px; right:26px; }
  .svc-bars2 i{ width:9px; border-radius:2px 2px 0 0; background:var(--c-blue-signal); display:block; }
  .svc-bars2 i:nth-child(1){ height:20px; } .svc-bars2 i:nth-child(2){ height:38px; }
  .svc-bars2 i:nth-child(3){ height:56px; } .svc-bars2 i:nth-child(4){ height:30px; }

  .svc-appgrid{ bottom:26px; right:26px; display:grid; grid-template-columns:repeat(2,26px); gap:8px; }
  .svc-appgrid i{ width:26px; height:26px; border-radius:8px; background:var(--c-carbon); display:block; opacity:0.9; }
  .svc-appgrid i:nth-child(2){ background:var(--c-blue-fill); }
  .svc-appgrid i:nth-child(3){ background:var(--c-blue-signal); }

  @media (max-width:1080px){ .svc-card{ min-height:280px; } }

  /* Editorial art grid: each agent and project has a living visual metaphor.
     Copy stays outside the image so it remains readable in both themes. */
  .art-grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:clamp(38px, 4.2vw, 64px) clamp(22px, 2.4vw, 36px);
  }
  .art-card{ grid-column:span 6; min-width:0; color:inherit; text-decoration:none; }
  a.art-card{ display:block; }
  .art-card__media{
    position:relative; display:block; overflow:hidden;
    aspect-ratio:4 / 3; border-radius:var(--radius-card);
    background:var(--bg-elevated);
  }
  .art-card__media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    border:1px solid rgba(29,29,31,.09); border-radius:inherit;
  }
  .art-card__media img{
    display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .7s cubic-bezier(.16,1,.3,1), filter .35s ease;
  }
  .art-card__copy{ display:block; padding-top:18px; max-width:58ch; }
  .art-card__copy .svc-label{
    margin-bottom:9px; color:var(--text-tertiary); opacity:1;
    font-size:11px; font-weight:600; letter-spacing:.65px; text-transform:uppercase;
  }
  .art-card__copy h3{
    margin:0 0 9px; color:var(--text-primary);
    font-family:var(--font-display); font-size:clamp(22px, 2vw, 30px); line-height:1.08;
  }
  .art-card__copy > p:last-of-type{
    color:var(--text-tertiary); font-size:14.5px; line-height:1.55;
  }
  .art-card__cta{
    display:inline-flex; align-items:center; gap:8px; margin-top:15px;
    color:var(--text-primary); font-size:13.5px; font-weight:600;
    border-bottom:1px solid var(--border-strong); padding-bottom:3px;
  }
  .art-card__cta span{ transition:transform .25s ease; }
  a.art-card:hover .art-card__media img{ transform:scale(1.035); filter:saturate(1.04); }
  a.art-card:hover .art-card__cta span{ transform:translateX(4px); }
  a.art-card:focus-visible{ outline:2px solid var(--c-blue-signal); outline-offset:6px; border-radius:var(--radius-card); }

  .art-grid--agents .art-card:nth-child(1){ grid-column:span 7; }
  .art-grid--agents .art-card:nth-child(2){ grid-column:span 5; padding-top:clamp(24px, 3vw, 46px); }
  .art-grid--agents .art-card:nth-child(3),
  .art-grid--agents .art-card:nth-child(4),
  .art-grid--agents .art-card:nth-child(5){ grid-column:span 4; }
  .art-grid--agents .art-card:nth-child(6){ grid-column:span 5; padding-top:clamp(18px, 2vw, 34px); }
  .art-grid--agents .art-card:nth-child(7){ grid-column:span 7; }
  .art-grid--agents .art-card:nth-child(8),
  .art-grid--agents .art-card:nth-child(9){ grid-column:span 6; }
  .art-grid--agents .art-card:nth-child(2) .art-card__media,
  .art-grid--agents .art-card:nth-child(6) .art-card__media{ aspect-ratio:1 / 1; }

  .art-grid--projects .art-card:nth-child(1),
  .art-grid--projects .art-card:nth-child(4),
  .art-grid--projects .art-card:nth-child(5){ grid-column:span 7; }
  .art-grid--projects .art-card:nth-child(2),
  .art-grid--projects .art-card:nth-child(3),
  .art-grid--projects .art-card:nth-child(6){ grid-column:span 5; }
  .art-grid--projects .art-card:nth-child(2),
  .art-grid--projects .art-card:nth-child(6){ padding-top:clamp(22px, 3vw, 44px); }
  .art-grid--projects .art-card:nth-child(2) .art-card__media,
  .art-grid--projects .art-card:nth-child(3) .art-card__media,
  .art-grid--projects .art-card:nth-child(6) .art-card__media{ aspect-ratio:1 / 1; }

  /* Eight verticals get an editorial rhythm without turning into a generic card wall. */
  .art-grid--industries .art-card:nth-child(1){ grid-column:span 7; }
  .art-grid--industries .art-card:nth-child(2){ grid-column:span 5; padding-top:clamp(22px, 3vw, 44px); }
  .art-grid--industries .art-card:nth-child(3),
  .art-grid--industries .art-card:nth-child(4),
  .art-grid--industries .art-card:nth-child(5){ grid-column:span 4; }
  .art-grid--industries .art-card:nth-child(6){ grid-column:span 5; padding-top:clamp(20px, 2.5vw, 38px); }
  .art-grid--industries .art-card:nth-child(7){ grid-column:span 7; }
  .art-grid--industries .art-card:nth-child(8){ grid-column:span 12; }
  .art-grid--industries .art-card:nth-child(2) .art-card__media,
  .art-grid--industries .art-card:nth-child(6) .art-card__media{ aspect-ratio:1 / 1; }
  .art-grid--industries .art-card:nth-child(8) .art-card__media{ aspect-ratio:16 / 7; }

  @media (max-width:860px){
    .art-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:42px 22px; }
    .art-grid .art-card{ grid-column:span 1 !important; padding-top:0 !important; }
    .art-grid .art-card__media{ aspect-ratio:4 / 3 !important; }
  }
  @media (max-width:580px){
    .art-grid{ grid-template-columns:1fr; gap:42px; }
    .art-card__copy{ padding-top:15px; }
    .art-card__copy h3{ font-size:24px; }
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .art-card__media::after{ border-color:rgba(255,255,255,.12); }
  }
  :root[data-theme="dark"] .art-card__media::after{ border-color:rgba(255,255,255,.12); }
  @media (prefers-reduced-motion:reduce){
    .art-card__media img, .art-card__cta span{ transition:none; }
    a.art-card:hover .art-card__media img, a.art-card:hover .art-card__cta span{ transform:none; }
  }

  .project-case{ padding:clamp(36px, 5vw, 80px) 0; }
  .project-case__layout{
    display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(280px, .9fr);
    align-items:center; gap:clamp(32px, 5vw, 80px);
  }
  .project-case__visual{ overflow:hidden; border-radius:var(--radius-card); background:var(--bg-elevated); }
  .project-case__visual img{ display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; }
  .project-case__copy .eyebrow{ margin-bottom:var(--sp-16); }
  .project-case__copy h1{ margin-bottom:var(--sp-24); }
  .project-case__copy .subheading{ max-width:58ch; margin-bottom:var(--sp-24); }
  .project-case__copy .btn-row{ justify-content:flex-start; }
  @media (max-width:720px){
    .project-case{ padding:var(--sp-24) 0 var(--sp-48); }
    .project-case__layout{ grid-template-columns:1fr; gap:var(--sp-24); }
    .project-case__copy .btn-row{ align-items:flex-start; }
  }
  .case-points{ list-style:none; margin:0; padding:0; }
  .case-points li{
    display:grid; grid-template-columns:46px minmax(0, 1fr); gap:var(--sp-16);
    align-items:baseline; padding:18px 0; border-top:1px solid var(--border-hair);
  }
  .case-points li:last-child{ border-bottom:1px solid var(--border-hair); }
  .case-points span{ color:var(--text-tertiary); font-size:12px; font-weight:600; letter-spacing:.08em; }
  .case-points p{ margin:0; color:var(--text-primary); font-size:clamp(18px, 2vw, 24px); line-height:1.25; }

  /* ============ ТОЧКИ ПРИСУТСТВИЯ ============
     Пять стран в один ряд на широком экране, по две на планшете, в столбик
     на телефоне. Карточек нет: хватает флага, страны и тонкой линии сверху —
     лишние рамки на пяти одинаковых блоках дают решётку, а не воздух. */
  /* Линии сетки — рамками самих карточек, а не серым фоном контейнера с
     зазором в пиксель: при неполном последнем ряде фон просвечивал пустыми
     серыми прямоугольниками на месте недостающих карточек. */
  .offices{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:0;
    border-top:1px solid var(--border-hair); border-left:1px solid var(--border-hair);
  }
  @media (max-width:560px){ .offices{ grid-template-columns:1fr; } }

  .office{
    background:var(--bg-elevated);
    padding:var(--sp-24) var(--sp-20) 26px;
    display:flex; flex-direction:column; gap:2px;
    border-right:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair);
  }
  .office__flag{
    display:block; margin-bottom:var(--sp-12); line-height:0;
  }
  .office__flag .flag{
    width:26px; height:auto; border-radius:3px;
    box-shadow:0 0 0 1px rgba(0,0,0,.12);
  }
  .office__country{
    font-family:var(--font-display); font-size:17px; font-weight:600;
    color:var(--text-primary); letter-spacing:-.01em;
  }
  .office__city{ font-size:14.5px; color:var(--text-secondary); }
  .office__role{
    font-size:11.5px; font-weight:600; letter-spacing:.9px; text-transform:uppercase;
    color:var(--text-tertiary); margin-top:2px;
  }
  .office__address{
    font-size:13.5px; line-height:1.5; color:var(--text-tertiary); margin-top:var(--sp-12);
  }
  .office__line{ font-size:13.5px; line-height:1.6; margin-top:2px; }
  .office__line:first-of-type{ margin-top:var(--sp-8); }
  .office__line a{ color:var(--accent-outline); text-decoration:none; }
  .office__line a:hover{ text-decoration:underline; }

  /* ============ FEATURE BANDS ============ */
  .feature-band-section{ padding:48px 0; }
  .feature-band{
    --feature-band-start:var(--feature-graphite-start);
    --feature-band-end:var(--feature-graphite-end);
    --feature-band-ink:var(--feature-graphite-ink);
    --feature-band-shape:var(--feature-graphite-shape);
    display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr);
    align-items:center; gap:48px; min-height:440px; overflow:hidden;
    padding:64px 72px; border-radius:var(--radius-card);
    background:linear-gradient(135deg, var(--feature-band-start), var(--feature-band-end));
    color:var(--feature-band-ink);
  }
  .feature-band--blue{
    --feature-band-start:var(--feature-blue-start);
    --feature-band-end:var(--feature-blue-end);
    --feature-band-ink:var(--feature-blue-ink);
    --feature-band-shape:var(--feature-blue-shape);
  }
  .feature-band--teal{
    --feature-band-start:var(--feature-teal-start);
    --feature-band-end:var(--feature-teal-end);
    --feature-band-ink:var(--feature-teal-ink);
    --feature-band-shape:var(--feature-teal-shape);
  }
  .feature-band--violet{
    --feature-band-start:var(--feature-violet-start);
    --feature-band-end:var(--feature-violet-end);
    --feature-band-ink:var(--feature-violet-ink);
    --feature-band-shape:var(--feature-violet-shape);
  }
  .feature-band--amber{
    --feature-band-start:var(--feature-amber-start);
    --feature-band-end:var(--feature-amber-end);
    --feature-band-ink:var(--feature-amber-ink);
    --feature-band-shape:var(--feature-amber-shape);
  }
  .feature-band__copy{ display:flex; flex-direction:column; align-items:flex-start; max-width:760px; }
  .feature-band__eyebrow{
    margin-bottom:18px; color:var(--feature-band-ink);
    font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  }
  .feature-band__copy .heading-lg{ max-width:780px; color:var(--feature-band-ink); }
  .feature-band__text{
    max-width:620px; margin-top:20px; color:var(--feature-band-ink);
    font-size:18px; line-height:1.55; letter-spacing:-.15px;
  }
  .feature-band__cta{
    display:inline-flex; align-items:center; gap:10px; margin-top:28px;
    border-bottom:1px solid currentColor; color:var(--feature-band-ink);
    font-size:16px; font-weight:600; line-height:1.35; text-decoration:none;
    white-space:nowrap;
  }
  .feature-band__cta:hover{ border-bottom-color:transparent; }
  .feature-band__cta:focus-visible{ outline:2px solid currentColor; outline-offset:5px; }
  .feature-band__art{ width:100%; max-width:420px; color:var(--feature-band-shape); }
  .feature-band__art svg{ display:block; width:100%; height:auto; }
  .feature-band--center{ grid-template-columns:1fr; text-align:center; }
  .feature-band--center .feature-band__copy{ align-items:center; margin:0 auto; }
  .feature-band--center .feature-band__art{ max-width:360px; margin:0 auto; }
  @media (max-width:820px){
    .feature-band-section{ padding:32px 0; }
    .feature-band{
      grid-template-columns:1fr; gap:30px; min-height:0;
      padding:44px 36px 32px;
    }
    .feature-band__text{ font-size:17px; }
    .feature-band__art{ width:min(100%, 280px); margin-left:auto; }
  }
  @media (max-width:480px){
    .feature-band-section .wrap{ padding-right:16px; padding-left:16px; }
    .feature-band{ padding:36px 24px 24px; }
    .feature-band__eyebrow{ margin-bottom:14px; }
    .feature-band__text{ margin-top:16px; }
    .feature-band__cta{ margin-top:22px; white-space:normal; }
    .feature-band__art{ width:min(100%, 230px); }
  }

  /* ============ SECTION HELPERS ============ */
  .section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
  .section-head .eyebrow{ margin-bottom:var(--sp-12); }
  .section-head h2{ margin-bottom:var(--sp-16); }

  .surface-elevated{ background:var(--bg-elevated); }
  .surface-page{ background:var(--bg-page); }
  .surface-strong{ background:var(--nav-bg); color:var(--nav-text); }
  .surface-strong .body-text{ color:#c7c7cc; }

  /* three-up problem/system rows — flat, hairline, no cards */
  .flat-grid{ display:grid; gap:0; border-top:1px solid var(--border-hair); }
  .flat-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .flat-row{ padding:var(--sp-40) var(--sp-24); border-bottom:1px solid var(--border-hair); }
  .flat-grid.cols-3 .flat-row{ border-right:1px solid var(--border-hair); }
  .flat-grid.cols-3 .flat-row:last-child{ border-right:none; }
  @media (max-width:820px){
    .flat-grid.cols-3{ grid-template-columns:1fr; }
    .flat-grid.cols-3 .flat-row{ border-right:none; }
  }
  .flat-row .num{ font-family:var(--font-display); font-size:14px; color:var(--accent-decorative); font-weight:600; margin-bottom:var(--sp-16); }
  .flat-row h3{ font-size:21px; margin-bottom:var(--sp-8); }

  /* module grid */
  .module-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-card); overflow:hidden; }
  .module-item{ background:var(--bg-page); padding:var(--sp-24); display:flex; flex-direction:column; gap:var(--sp-12); min-height:172px; text-decoration:none; color:inherit; transition:background .15s ease; }
  .module-item .m-icon{ width:34px; height:34px; border-radius:8px; background:var(--bg-elevated); border:1px solid var(--border-hair); display:flex; align-items:center; justify-content:center; color:var(--accent-fill); flex:none; }
  .module-item h3{ font-size:16px; font-weight:600; }
  .module-item p{ font-size:13.5px; line-height:1.5; color:var(--text-tertiary); }
  a.module-item:hover{ background:var(--bg-elevated); }
  .module-item .m-link-cta{ margin-top:auto; font-size:12.5px; font-weight:600; color:var(--accent-outline); }
  @media (max-width:980px){ .module-grid{ grid-template-columns:repeat(2,1fr);} }
  /* Сетка на две карточки. Обычная module-grid рассчитана на четыре, и две
     в ней оставляют пустую половину — заметную, потому что у сетки общая
     рамка и фон в стыках. */
  .module-grid-2{ grid-template-columns:repeat(2,1fr); }
  .module-grid-3{ grid-template-columns:repeat(3,1fr); }
  @media (max-width:900px){ .module-grid-3{ grid-template-columns:1fr; } }
  @media (max-width:640px){ .module-grid-2{ grid-template-columns:1fr; } }
  /* Карточка-ссылка: показываем, что по ней кликают. */
  .module-item.module-link:hover{ background:var(--bg-elevated); }
  .module-item.module-link .svc-cta{ margin-top:auto; font-size:14px; font-weight:500; color:var(--accent-fill); }
  @media (max-width:560px){ .module-grid{ grid-template-columns:1fr;} }

  /* agents */
  .agent-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-24); }
  .agent-card{ border-top:2px solid var(--accent-decorative); padding-top:var(--sp-16); }
  .agent-card h3{ font-size:16px; margin-bottom:var(--sp-12); }
  .agent-card ul li{ font-size:13.5px; color:var(--text-tertiary); line-height:1.5; padding:4px 0 4px 14px; position:relative; }
  .agent-card ul li::before{ content:""; position:absolute; left:0; top:12px; width:4px; height:4px; border-radius:50%; background:var(--text-muted); }
  @media (max-width:980px){ .agent-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .agent-grid{ grid-template-columns:1fr; } }

  /* Aura workflow */
  .aura-layout{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--sp-56); align-items:center; }
  @media (max-width:980px){ .aura-layout{ grid-template-columns:1fr; } }
  .aura-steps{ display:flex; flex-direction:column; }
  .aura-step{ display:flex; gap:var(--sp-16); padding:var(--sp-16) 0; border-bottom:1px solid var(--border-hair); }
  .aura-step:last-child{ border-bottom:none; }
  .aura-step .n{ font-family:var(--font-display); font-weight:600; color:var(--accent-fill); font-size:14px; width:22px; flex:none; }
  .aura-step h4{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
  .aura-step p{ font-size:13.5px; color:var(--text-tertiary); line-height:1.5; }

  .flow-line{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:var(--sp-24); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-muted); }
  .flow-line b{ color:var(--text-primary); font-weight:600; }
  .flow-line .arrow{ color:var(--accent-decorative); }

  .phone-mock{ max-width:280px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border-hair); border-radius:32px; padding:14px; box-shadow:var(--shadow-product); }
  .phone-screen{ background:var(--bg-elevated); border-radius:20px; padding:18px 14px; min-height:420px; display:flex; flex-direction:column; gap:10px; }
  .phone-call-badge{ text-align:center; padding:16px 0 10px; }
  .phone-call-badge .avatar{ width:52px; height:52px; border-radius:50%; background:var(--c-blue-fill); margin:0 auto 10px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:600; }
  .phone-call-badge .name{ font-weight:600; font-size:15px; }
  .phone-call-badge .status{ font-size:12px; color:var(--text-tertiary); margin-top:2px; }
  .phone-bubble{ background:var(--bg-card); border:1px solid var(--border-hair); border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.45; color:var(--text-secondary); }
  .phone-bubble.me{ background:var(--c-blue-fill); color:#fff; border-color:transparent; align-self:flex-end; max-width:80%; }
  .phone-tag{ display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; background:var(--bg-surface2); color:var(--text-secondary); padding:3px 8px; border-radius:6px; align-self:flex-start; }

  /* journey timeline */
  .timeline{ position:relative; max-width:760px; margin:0 auto; }
  .timeline::before{ content:""; position:absolute; left:19px; top:6px; bottom:6px; width:1px; background:var(--border-hair); }
  .t-item{ position:relative; padding:0 0 var(--sp-40) 56px; }
  .t-item:last-child{ padding-bottom:0; }
  .t-item .t-num{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; background:var(--bg-page); border:1px solid var(--border-hair); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--accent-fill); }
  .t-item h4{ font-size:17px; margin-bottom:4px; }
  .t-item p{ font-size:14.5px; color:var(--text-tertiary); line-height:1.5; }

  /* calculator */
  .calc-panel{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border-hair); border-radius:14px; overflow:hidden; background:var(--bg-card); }
  @media (max-width:820px){ .calc-panel{ grid-template-columns:1fr; } }
  .calc-inputs{ padding:var(--sp-40); display:flex; flex-direction:column; gap:var(--sp-20); border-right:1px solid var(--border-hair); }
  @media (max-width:820px){ .calc-inputs{ border-right:none; border-bottom:1px solid var(--border-hair); } }
  .calc-field label{ display:flex; justify-content:space-between; font-size:13px; font-weight:500; margin-bottom:8px; color:var(--text-secondary); }
  .calc-field label .val{ color:var(--accent-fill); font-variant-numeric:tabular-nums; font-weight:600; }
  .calc-field input[type="range"]{ width:100%; accent-color:var(--c-blue-fill); }
  .calc-field input[type="number"]{
    width:100%; padding:10px 12px; border-radius:var(--radius-input); border:1px solid var(--input-border);
    background:var(--input-bg); color:var(--text-primary); font-size:15px; font-family:var(--font-text);
  }
  .calc-field input:focus-visible{ outline:2px solid var(--accent-decorative); outline-offset:1px; }
  .calc-result{ padding:var(--sp-40); display:flex; flex-direction:column; justify-content:center; gap:var(--sp-16); background:var(--bg-elevated); }
  .calc-result .r-label{ font-size:12px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-tertiary); }
  .calc-result .r-value{ font-family:var(--font-display); font-size:44px; font-weight:600; color:var(--accent-fill); font-variant-numeric:tabular-nums; letter-spacing:-1px; }
  .calc-result .r-sub{ font-size:13.5px; color:var(--text-tertiary); line-height:1.5; }

  /* process */
  .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-24); }
  @media (max-width:980px){ .process-grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .process-grid{ grid-template-columns:1fr;} }
  /* Порядковый номер шага. Был почти невидим: цвет границы под прозрачностью
     0.35 давал контраст 1.97 к светлому фону — ниже минимума 3:1 даже для
     крупного текста. Номера нужны как раз для того, чтобы читалось «сначала
     это, потом то», и нечитаемая нумерация ломает именно этот смысл. Теперь
     цвет берётся из шкалы текста и остаётся приглушённым, но различимым в
     обеих темах. */
  .process-item .p-num{ font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--text-secondary); opacity:0.55; margin-bottom:8px; }
  .process-item h3{ font-size:17px; margin-bottom:6px; }
  .process-item p{ font-size:13.5px; color:var(--text-tertiary); line-height:1.5; }

  /* pricing */
  .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-24); align-items:stretch; }
  .price-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:1080px){ .price-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:980px){ .price-grid{ grid-template-columns:1fr; } }
  .price-card{ border:1px solid var(--border-hair); border-radius:14px; padding:var(--sp-24) 28px 28px; display:flex; flex-direction:column; gap:var(--sp-16); background:var(--bg-card); }
  .price-card.rec{ border-color:var(--c-blue-fill); border-width:2px; position:relative; }
  .price-card .rec-tag{ position:absolute; top:-13px; left:28px; background:var(--c-blue-fill); color:#fff; font-size:11px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
  .price-card h3{ font-size:20px; }
  .price-card .price-amount{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-0.5px; }
  .price-card .price-amount span{ font-size:13px; font-weight:400; color:var(--text-tertiary); }
  .price-card .p-desc{ font-size:13.5px; color:var(--text-tertiary); line-height:1.5; }
  .price-card ul{ display:flex; flex-direction:column; gap:10px; flex:1; }
  .price-card ul li{ font-size:14px; color:var(--text-secondary); padding-left:20px; position:relative; line-height:1.4;}
  .price-card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--c-blue-fill); font-weight:600; font-size:13px; }
  .price-note{ text-align:center; margin-top:var(--sp-24); }

  /* faq */
  .faq-list{ max-width:760px; margin:0 auto; border-top:1px solid var(--border-hair); }
  .faq-item{ border-bottom:1px solid var(--border-hair); }
  .faq-item summary{ cursor:pointer; list-style:none; padding:var(--sp-20) 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:17px; font-weight:500; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .plus{ font-family:var(--font-display); font-size:20px; color:var(--accent-fill); transition:transform .2s ease; flex:none; }
  .faq-item[open] summary .plus{ transform:rotate(45deg); }
  .faq-item .faq-a{ padding:0 4px var(--sp-20); font-size:15px; color:var(--text-tertiary); line-height:1.6; max-width:640px; }

  /* final CTA / form */
  /*!critical-start*/
  .cta-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-56); align-items:start; }
  @media (max-width:980px){ .cta-layout{ grid-template-columns:1fr; } }
  .form-card{ background:var(--bg-card); border:1px solid var(--border-hair); border-radius:16px; padding:var(--sp-40); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); }
  @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
  .field{ margin-bottom:var(--sp-16); }
  .field label{ display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--text-secondary); }
  .field input, .field select, .field textarea{
    width:100%; padding:11px 13px; border-radius:var(--radius-input); border:1px solid var(--input-border);
    background:var(--input-bg); color:var(--text-primary); font-size:15px; font-family:var(--font-text);
  }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--accent-decorative); outline-offset:1px; }
  .field textarea{ resize:vertical; min-height:80px; }
  .form-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:var(--sp-8); flex-wrap:wrap; }
  .form-status{ font-size:13.5px; min-height:18px; }
  /*!critical-end*/
  .form-status.ok{ color:#1f9d55; }
  .form-status.err{ color:#d33; }
  .privacy-note{ font-size:12px; color:var(--text-muted); margin-top:var(--sp-16); line-height:1.5; }

  .contact-alt{ display:flex; flex-direction:column; gap:var(--sp-12); margin-top:var(--sp-24); }
  .contact-alt a{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--text-secondary); text-decoration:none; }
  .contact-alt a:hover{ color:var(--accent-outline); }
  .contact-alt .ic{ width:30px; height:30px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border-hair); display:flex; align-items:center; justify-content:center; flex:none; }

  .contact-whatsapp-ua{ padding-top:0; }
  .contact-whatsapp-ua__panel{
    position:relative; isolation:isolate; overflow:hidden;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,390px); align-items:center; gap:clamp(36px,7vw,88px);
    min-height:560px; padding:clamp(36px,6vw,76px); border-radius:28px;
    background:#090b0f url('/assets/stemd-ua-whatsapp-bg.jpg') center/cover no-repeat;
    box-shadow:0 24px 80px rgba(0,0,0,.18); color:#fff;
  }
  .contact-whatsapp-ua__panel::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(90deg,rgba(5,7,10,.9) 0%,rgba(5,7,10,.68) 52%,rgba(5,7,10,.2) 100%);
  }
  .contact-whatsapp-ua__copy{ display:flex; flex-direction:column; align-items:flex-start; max-width:560px; }
  .contact-whatsapp-ua__copy .eyebrow{ color:#79bfff; margin-bottom:14px; }
  .contact-whatsapp-ua__copy .heading-lg{ color:#fff; margin-bottom:16px; }
  .contact-whatsapp-ua__copy .body-text{ color:rgba(255,255,255,.74); margin-bottom:20px; }
  .contact-whatsapp-ua__brand{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(44px,7vw,84px);
    color:#fff; text-decoration:none; font-family:var(--font-display); font-size:15px; font-weight:600;
  }
  .contact-whatsapp-ua__brand span:last-child{ margin-left:2px; padding:2px 5px; border-radius:4px; background:#fff; color:#05070a; font-size:10px; font-weight:750; letter-spacing:.6px; }
  .contact-whatsapp-ua__dot{ width:7px; height:7px; border-radius:50%; background:#2997ff; box-shadow:0 0 18px rgba(41,151,255,.8); }
  .contact-whatsapp-ua__phone{ margin-bottom:24px; color:#fff; font-size:clamp(20px,2.3vw,28px); font-weight:600; letter-spacing:-.02em; text-decoration:none; }
  .contact-whatsapp-ua__phone:hover{ color:#79bfff; }
  .contact-whatsapp-ua__qr{
    display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px 20px 16px;
    border:1px solid rgba(255,255,255,.22); border-radius:24px; background:rgba(255,255,255,.96);
    color:#5f6368; text-decoration:none; box-shadow:0 20px 54px rgba(0,0,0,.34); backdrop-filter:blur(14px);
  }
  .contact-whatsapp-ua__qr img{ display:block; width:100%; height:auto; border-radius:12px; }
  .contact-whatsapp-ua__qr span{ font-size:13px; font-weight:600; letter-spacing:.01em; }
  @media (max-width:760px){
    .contact-whatsapp-ua__panel{ grid-template-columns:1fr; min-height:0; padding:32px 22px; gap:30px; border-radius:22px; }
    .contact-whatsapp-ua__panel::before{ background:rgba(5,7,10,.74); }
    .contact-whatsapp-ua__brand{ margin-bottom:36px; }
    .contact-whatsapp-ua__qr{ width:min(100%,360px); justify-self:center; }
    .contact-whatsapp-ua__copy .btn{ width:100%; justify-content:center; }
  }

  .thankyou{ display:none; text-align:center; padding:var(--sp-40) 0; }
  .thankyou.show{ display:block; }
  .thankyou .tick{ width:56px; height:56px; border-radius:50%; background:var(--c-blue-fill); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:26px; }

  /* footer */
  footer{ background:var(--bg-page); border-top:1px solid var(--border-hair); padding:var(--sp-56) 0 var(--sp-24); }
  .footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--sp-40); padding-bottom:var(--sp-40); border-bottom:1px solid var(--border-hair); }
  @media (max-width:820px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
  .footer-brand .nav-logo{ color:var(--text-primary); margin-bottom:10px; }
  .footer-brand p{ font-size:13px; color:var(--text-tertiary); max-width:260px; line-height:1.5; }
  /* h2, а не h4: колонки подвала — самостоятельные разделы, а перескок
     с h2 карточек сразу на h4 читалка считает дырой в структуре. Размер
     задаётся стилем, уровень — смыслом. */
  .footer-col h2,
  .footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin-bottom:14px; font-family:var(--font-text); font-weight:600; }
  .footer-col ul{ display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ font-size:13.5px; color:var(--text-tertiary); text-decoration:none; }
  .footer-col a:hover{ color:var(--text-primary); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--sp-20); flex-wrap:wrap; gap:10px; }
  .footer-bottom p{ font-size:12px; color:var(--text-muted); }

  /* ============ BLOG ============ */
  .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-24); }
  @media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){ .blog-grid{ grid-template-columns:1fr; } }
  .blog-card{ display:flex; flex-direction:column; border-radius:16px; overflow:hidden; border:1px solid var(--border-hair); background:var(--bg-card); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
  .blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
  .blog-card-media{ height:170px; background:var(--bg-elevated) linear-gradient(135deg, var(--c-carbon), var(--c-smoke)); background-size:cover; background-position:center; position:relative; }
  .blog-card-glyph{ position:absolute; inset:0; }
  .blog-card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .blog-card-tag{ font-size:11.5px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:var(--accent-decorative); }
  /* h2, а не h3: на странице списка заголовок карточки — раздел под
     заголовком страницы, и пропуск уровня читалка с экрана считает дырой
     в структуре. h3 оставлен в селекторе на случай другой разметки. */
  .blog-card-body h2,
  .blog-card-body h3{ font-size:17px; font-family:var(--font-display); font-weight:600; letter-spacing:-0.1px; line-height:1.35; color:var(--text-primary); }
  .blog-card-body p{ font-size:13.5px; color:var(--text-tertiary); line-height:1.55; flex:1; }
  .blog-card-date{ font-size:12px; color:var(--text-muted); margin-top:4px; }

  .blog-pagination{ display:flex; justify-content:center; gap:8px; margin-top:var(--sp-40); }
  .blog-pagination a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:13px; color:var(--text-tertiary); text-decoration:none; border:1px solid transparent; }
  .blog-pagination a:hover{ border-color:var(--border-hair); }
  .blog-pagination a.active{ background:var(--accent-fill); color:#fff; }

  /* Corpo de um artigo (texto sanitizado, ver includes/blog.php) */
  /* Выжимка и оглавление — до текста статьи.
     Оба блока служебные: они помогают решить, читать ли дальше, и не должны
     конкурировать с самой статьёй по весу. Отсюда приглушённый фон и
     размер шрифта меньше основного. */
  .article-tldr{ border-left:3px solid var(--accent-fill); background:var(--bg-elevated); border-radius:0 12px 12px 0; padding:18px 22px; margin:0 0 28px; }
  .article-tldr p{ margin:0; font-size:16px; line-height:1.65; color:var(--text-primary); }
  .article-tldr-label{ font-size:12px !important; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary) !important; margin-bottom:8px !important; }

  .article-toc{ border:1px solid var(--border-hair); border-radius:12px; padding:18px 22px; margin:0 0 32px; }
  .article-toc-label{ font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 10px; }
  .article-toc ol{ margin:0; padding-left:20px; }
  .article-toc li{ margin:6px 0; font-size:15px; line-height:1.5; }
  .article-toc a{ color:var(--text-secondary); text-decoration:none; border-bottom:1px solid transparent; }
  .article-toc a:hover{ color:var(--text-primary); border-bottom-color:var(--border-strong); }

  /* Клик по оглавлению не должен прятать заголовок под липкую шапку. */
  .article-body h2, .article-body h3{ scroll-margin-top:88px; }

  .article-body{ font-size:16px; line-height:1.75; color:var(--text-secondary); }
  .article-body h2{ font-size:24px; font-family:var(--font-display); font-weight:600; color:var(--text-primary); margin:40px 0 14px; letter-spacing:-0.1px; }
  .article-body h3{ font-size:19px; font-family:var(--font-display); font-weight:600; color:var(--text-primary); margin:32px 0 12px; }
  .article-body h4{ font-size:16px; font-weight:600; color:var(--text-primary); margin:24px 0 8px; }
  .article-body p{ margin-bottom:18px; }
  .article-body a{ color:var(--accent-outline); text-decoration:underline; text-underline-offset:2px; }
  .article-body ul, .article-body ol{ margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
  .article-body blockquote{ margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--accent-decorative); color:var(--text-tertiary); font-style:italic; }
  .article-body img{ max-width:100%; border-radius:12px; margin:24px 0; display:block; }
  .article-body code{ background:var(--bg-elevated); border-radius:4px; padding:2px 6px; font-size:0.9em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  .article-body pre{ background:var(--c-carbon); color:#f4f8fb; border-radius:12px; padding:18px 20px; overflow-x:auto; margin:24px 0; }
  .article-body pre code{ background:none; padding:0; color:inherit; }
  .article-body table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
  .article-body th, .article-body td{ border:1px solid var(--border-hair); padding:10px 12px; text-align:left; }
  .article-body hr{ border:none; border-top:1px solid var(--border-hair); margin:32px 0; }

  .article-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:40px; }
  .article-tags span,
  .article-tags a{ font-size:12px; padding:6px 12px; border-radius:20px; background:var(--bg-elevated); color:var(--text-tertiary); text-decoration:none; }
  .article-tags a{ border:1px solid var(--border-hair); transition:color .15s ease, border-color .15s ease; }
  .article-tags a:hover{ color:var(--text-primary); border-color:var(--border-strong); }

  /* Калькулятор предварительной стоимости. Форма слева, итог справа и
     липнет к экрану на десктопе: человек меняет галочки внизу списка, а
     цифры должны оставаться перед глазами, иначе он их не связывает. */
  .calc{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-24); align-items:start; }
  .calc-form{ display:flex; flex-direction:column; gap:var(--sp-20); }
  .calc-field{ display:flex; flex-direction:column; gap:8px; border:0; padding:0; margin:0; }
  .calc-field > label, .calc-field > legend{ font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary); padding:0; }
  .calc-field select{ width:100%; padding:12px 14px; font:inherit; font-size:15px; color:var(--text-primary);
    background:var(--bg-page); border:1px solid var(--border-hair); border-radius:10px; }
  .calc-field select:focus-visible{ outline:2px solid var(--accent-fill); outline-offset:1px; }
  .calc-checks{ display:flex; flex-wrap:wrap; gap:8px; }
  .calc-check{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text-secondary);
    padding:8px 14px; border:1px solid var(--border-hair); border-radius:20px; cursor:pointer; }
  .calc-check:hover{ border-color:var(--border-strong); }
  .calc-check input{ accent-color:var(--accent-fill); }

  .calc-result{ position:sticky; top:80px; background:var(--bg-elevated); border:1px solid var(--border-hair);
    border-radius:var(--radius-card); padding:var(--sp-24); display:flex; flex-direction:column; gap:12px; }
  .calc-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:15px; color:var(--text-secondary); }
  .calc-row strong{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--text-primary); }
  .calc-row-total{ border-top:1px solid var(--border-hair); padding-top:12px; margin-top:4px; }
  .calc-row-total strong{ font-size:26px; }
  .calc-note{ font-size:13px; line-height:1.5; color:var(--text-tertiary); margin:4px 0 8px; }

  @media (max-width:860px){
    .calc{ grid-template-columns:1fr; }
    /* На телефоне липкий итог занял бы треть экрана — он просто идёт следом. */
    .calc-result{ position:static; }
  }

  /* Похожие статьи в конце материала. Список, а не карточки: карточки с
     обложками спорили бы по весу с самой статьёй, которую человек только что
     дочитал, и выглядели бы как новая витрина вместо продолжения чтения. */
  .article-related{ margin-top:48px; padding-top:32px; border-top:1px solid var(--border-hair); }
  .article-related h2{ font-size:13px !important; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-tertiary); margin:0 0 16px !important; font-family:var(--font-text); }
  .article-related ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  .article-related a{ display:block; padding:14px 16px; margin:0 -16px; border-radius:12px;
    text-decoration:none; transition:background .15s ease; }
  .article-related a:hover{ background:var(--bg-elevated); }
  .article-related-title{ display:block; font-family:var(--font-display); font-size:17px; font-weight:600;
    color:var(--text-primary); line-height:1.35; }
  .article-related-text{ display:block; margin-top:4px; font-size:14px; line-height:1.5; color:var(--text-secondary); }

  /* Баннер согласия на cookie. Внизу, узкий, не перекрывает содержимое:
     человек пришёл читать, а не отвечать на вопросы. Две кнопки одного
     веса — отказ не прячется. */
  .consent{ position:fixed; left:16px; right:16px; bottom:16px; z-index:150; display:flex; justify-content:center; pointer-events:none; }
  .consent-inner{ pointer-events:auto; max-width:920px; width:100%; display:flex; gap:20px; align-items:center; flex-wrap:wrap;
    background:var(--bg-page); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:16px;
    padding:16px 20px; box-shadow:0 12px 40px rgba(0,0,0,.14); }
  .consent-text{ flex:1 1 380px; margin:0; font-size:14px; line-height:1.5; color:var(--text-secondary); }
  .consent-text strong{ color:var(--text-primary); margin-right:6px; }
  /* Ссылка на политику cookie в баннере согласия. Была цветом заливки кнопок
     (#0071e3): на светлом фоне это 4.31 к 1 при минимуме 4.5 — то есть текст
     мелкий, синий и блёклый ровно там, где человек решает, соглашаться ли ему
     на слежение. Цвет ссылок (--accent-outline) даёт 5.11 к 1. Подчёркивание
     возвращено по той же причине: ссылку в абзаце должно быть видно не только
     по оттенку. */
  .consent-text a{ color:var(--accent-outline); text-decoration:underline; margin-left:6px; white-space:nowrap; }
  .consent-actions{ display:flex; gap:8px; flex:0 0 auto; }
  @media (max-width:640px){
    .consent{ left:8px; right:8px; bottom:8px; }
    .consent-actions{ width:100%; }
    .consent-actions .btn{ flex:1; justify-content:center; }
  }

  /* Соседние теги внизу подборки. */
  .tag-cloud{ margin-top:48px; padding-top:32px; border-top:1px solid var(--border-hair); }
  .tag-cloud ul{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
  .tag-cloud a{ display:inline-flex; align-items:center; gap:6px; font-size:14px; padding:8px 14px; border-radius:20px;
    border:1px solid var(--border-hair); color:var(--text-secondary); text-decoration:none; transition:color .15s ease, border-color .15s ease; }
  .tag-cloud a:hover{ color:var(--text-primary); border-color:var(--border-strong); }
  .tag-cloud a span{ font-size:12px; color:var(--text-tertiary); }
  .article-cta{ margin-top:48px; padding-top:32px; border-top:1px solid var(--border-hair); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

  /* widget flutuante de WhatsApp (ver includes/site_footer.php + admin/settings.php) */
  .wa-widget{ position:fixed; right:22px; bottom:22px; z-index:9999; line-height:0; }
  .wa-widget .wa-ball{
    position:relative; width:60px; height:60px; border-radius:50%;
    background:#25d366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.28); text-decoration:none;
    transform-origin:70% 70%; transition:transform .15s ease, box-shadow .15s ease;
  }
  .wa-widget .wa-ball:hover{ transform:scale(1.06); box-shadow:0 10px 28px rgba(0,0,0,.34); }
  .wa-widget .wa-ball svg{ width:30px; height:30px; fill:#fff; position:relative; z-index:2; }
  .wa-widget .wa-ring{
    position:absolute; inset:0; border-radius:50%; background:#25d366;
    opacity:.55; animation:wa-pulse 2.6s ease-out infinite; z-index:1;
  }
  @keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.8); opacity:0; } }
  .wa-widget .wa-ball.wa-buzz{ animation:wa-buzz .8s ease-in-out; }
  @keyframes wa-buzz{
    0%, 100%{ transform:rotate(0) scale(1); }
    10%{ transform:rotate(-14deg) scale(1.05); }
    20%{ transform:rotate(11deg) scale(1.05); }
    30%{ transform:rotate(-9deg); }
    40%{ transform:rotate(9deg); }
    50%{ transform:rotate(-6deg); }
    60%{ transform:rotate(6deg); }
    70%{ transform:rotate(-3deg); }
    80%{ transform:rotate(3deg); }
    90%{ transform:rotate(-1deg); }
  }
  @media (max-width:640px){ .wa-widget{ right:14px; bottom:14px; } .wa-widget .wa-ball{ width:54px; height:54px; } .wa-widget .wa-ball svg{ width:27px; height:27px; } }
  @media (prefers-reduced-motion: reduce){ .wa-widget .wa-ring{ animation:none; } .wa-widget .wa-ball.wa-buzz{ animation:none; } }

/* fim */

  /* ============ СОЦСЕТИ В ПОДВАЛЕ ============ */
  /* Иконки наследуют цвет текста, поэтому одинаково читаются и в светлой,
     и в тёмной теме — отдельных правил под prefers-color-scheme не нужно. */
  .footer-social{
    list-style:none; margin:var(--sp-20) 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:var(--sp-12);
  }
  .footer-social a{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:var(--radius-pill);
    border:1px solid var(--border-hair); color:var(--text-secondary);
    transition:color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .footer-social a:hover{
    color:var(--accent-outline); border-color:var(--accent-outline);
    transform:translateY(-1px);
  }
  .footer-social a:focus-visible{ outline:2px solid var(--accent-outline); outline-offset:2px; }
  .footer-social svg{ width:19px; height:19px; fill:currentColor; display:block; }
  @media (prefers-reduced-motion: reduce){
    .footer-social a{ transition:none; }
    .footer-social a:hover{ transform:none; }
  }

  /* Текст слева на hero с картинкой — ограничиваем ширину колонки, иначе
     длинный заголовок дотягивается до правого края и накрывает то, ради чего
     картинку и ставили. На узких экранах ограничение снимается: там места
     под две колонки всё равно нет. */
  @media (min-width: 900px){
    .hero.has-image.align-h-left h1,
    .hero.has-image.align-h-left .subheading,
    .hero.has-image.align-h-left .body-lead{ max-width:58%; }
    .hero.has-image.align-h-left .subheading,
    .hero.has-image.align-h-left .body-lead{ margin-left:0; }
  }

  /*!critical-start*/
  /* ============ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ============
     Приём с apple.com. Классы .reveal и .is-visible вешает site.js, поэтому
     без JavaScript эти правила не срабатывают вовсе и содержимое видно как
     обычно — анимация не может «спрятать» текст навсегда.
     Флаг .has-reveal на <html> ставит тот же скрипт: он гарантирует, что
     стартовое состояние появится только там, где есть кому его снять. */
  .has-reveal .reveal{
    opacity:0; transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  .has-reveal .reveal.is-visible{ opacity:1; transform:none; will-change:auto; }
  /* Верхний блок виден сразу — анимировать первое, что попадается на глаза,
     значит задержать самое важное. */
  .has-reveal .hero.reveal{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .has-reveal .reveal{ opacity:1; transform:none; transition:none; }
  }
  /*!critical-end*/

  /* ============ ШАПКА ПРИ ПРОКРУТКЕ ============ */
  .nav{ transition:box-shadow .25s ease, background-color .25s ease; }
  .nav.is-scrolled{ box-shadow:0 1px 0 var(--nav-border), 0 8px 24px rgba(0,0,0,.18); }
  /* Полупрозрачная шапка с размытием — только там, где браузер это умеет,
     иначе останется сплошной фон и текст под ней не станет нечитаемым. */
  @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)){
    .nav.is-scrolled{
      background-color:color-mix(in srgb, var(--nav-bg) 82%, transparent);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      backdrop-filter:saturate(180%) blur(20px);
    }
  }

  /* Текст внизу (приём с apple.com): картинка сверху видна целиком, поэтому
     затемнение вверху почти снимаем, а внизу — усиливаем, чтобы заголовок
     оставался читаемым. Общий градиент рассчитан на текст по центру и здесь
     только мешал бы. */
  .hero.has-image.align-v-bottom::before{
    background:linear-gradient(180deg,
      rgba(10,10,12,.10) 0%,
      rgba(10,10,12,.22) 42%,
      rgba(10,10,12,.66) 74%,
      rgba(10,10,12,.88) 100%);
  }
  .hero.has-image.align-v-bottom > .wrap:first-of-type{ padding-bottom:var(--sp-64); }

  /*!critical-start*/
  /* ============ ТЕЛЕФОН: ВЕРХНИЙ БЛОК ============
     На узком экране прежние правила давали три беды сразу: заголовок в 38px
     ломался на три строки и съедал пол-экрана, блок с картинкой растягивался
     под этот текст, а сама картинка при background-size:cover показывала
     середину — то есть пустой фон вместо того, ради чего её ставили. */
  @media (max-width: 720px){
    /* Размер шрифта следует за шириной экрана: на 390px выходит около 29px,
       на 720px — прежние 38px. clamp не даёт ни расплыться, ни ужаться в кашу. */
    .heading-xl{ font-size:clamp(26px, 7.4vw, 38px); line-height:1.08; letter-spacing:-0.02em; }
    .heading-lg{ font-size:clamp(24px, 6.6vw, 32px); line-height:1.15; }
    .hero .subheading{ font-size:16px; line-height:1.5; }

    /* Высоту задаёт содержимое, а не жёсткое число: иначе при длинном
       заголовке блок всё равно вырастет, но уже неуправляемо. */
    .hero.has-image.pad-compact,
    .hero.has-image.pad-normal,
    .hero.has-image.pad-spacious{ min-height:0; }
    .hero.has-image > .wrap:first-of-type{
      padding-top:var(--sp-48); padding-bottom:var(--sp-48);
    }

    /* Смещаем кадр вправо — там крона и ствол. По центру на телефоне
       оказывается пустая часть изображения. */
    .hero.has-image{ background-position:72% center; }

    /* На телефоне колонка одна, поэтому ограничение ширины текста снимаем:
       оно рассчитано на широкий экран, где рядом остаётся место картинке. */
    .hero.has-image.align-h-left h1,
    .hero.has-image.align-h-left .subheading,
    .hero.has-image.align-h-left .body-lead{ max-width:none; }

    /* Кнопки в столбик занимают меньше места и не переносятся по словам. */
    .hero .btn-row{ flex-direction:column; align-items:stretch; gap:var(--sp-12); }
    .hero.align-h-center .btn-row{ align-items:center; }
    .hero .btn-row .btn{ width:100%; max-width:320px; text-align:center; white-space:normal; }

    .home-hero__visual.hero.has-image{
      min-height:clamp(280px, 74vw, 420px);
      background-position:72% center;
    }
    .home-hero__copy.hero{
      padding:var(--sp-40) 0 var(--sp-56);
    }
    .home-hero__copy.hero .btn-row{ align-items:flex-start; }
  }

  /* Плавающая кнопка WhatsApp висит поверх страницы, поэтому последнему
     блоку нужен запас снизу — иначе она закрывает текст, а не пустоту. */
  @media (max-width: 640px){
    footer{ padding-bottom:84px; }
  }

  /* Браузер сам распределяет слова по строкам так, чтобы последняя не была
     сиротой из одного слова. Свойство новое; старые браузеры его игнорируют
     и переносят как раньше — ухудшить оно не может. */
  h1, h2, .heading-xl, .heading-lg, .hero .subheading{ text-wrap:balance; }
  /*!critical-end*/

  /* ============ СПИСОК ИНСТРУМЕНТОВ ============
     Названия продуктов — не перевод, а факты; выводим их плитками, чтобы
     список читался за секунду и не превращался в абзац через запятую. */
  .chip-row{
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .chip-tool{
    padding:9px 16px; border-radius:var(--radius-pill);
    border:1px solid var(--border-hair); background:var(--bg-card);
    color:var(--text-secondary); font-size:14px; font-weight:500;
    white-space:nowrap;
  }

  /* ============ ОТЗЫВЫ И ДОКУМЕНТЫ ============ */
  .quote-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; }
  .quote-card{
    margin:0; padding:26px; border-radius:var(--radius-card);
    background:var(--bg-card); border:1px solid var(--border-hair);
    display:flex; flex-direction:column; gap:18px;
  }
  .quote-card blockquote{
    margin:0; font-size:17px; line-height:1.5; color:var(--text-primary);
  }
  /* Кавычка — декоративная, поэтому в разметке её нет: экранный диктор
     прочитал бы её как символ посреди цитаты. */
  .quote-card blockquote::before{
    content:'"'; display:block; font-size:44px; line-height:0.6;
    color:var(--accent-decorative); margin-bottom:10px;
  }
  .quote-card figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }
  .quote-author{ font-weight:600; font-size:14px; }
  .quote-meta{ font-size:13px; color:var(--text-tertiary); }
  .quote-meta a{ color:var(--accent-outline); }

  .cert-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
  .cert-card{
    padding:24px; border-radius:var(--radius-card);
    background:var(--bg-card); border:1px solid var(--border-hair);
    display:flex; flex-direction:column; gap:12px;
  }
  .cert-card h3{ margin:0; font-size:16px; line-height:1.3; }
  .cert-issuer{ margin:0; font-size:13.5px; color:var(--text-secondary); }
  .cert-meta{ margin:0; display:flex; flex-wrap:wrap; gap:16px; }
  .cert-meta > div{ display:flex; flex-direction:column; gap:2px; }
  .cert-meta dt{ font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); }
  .cert-meta dd{ margin:0; font-size:13.5px; font-variant-numeric:tabular-nums; }
  .cert-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:auto; }
  .cert-actions a{ font-size:13.5px; color:var(--accent-outline); }

  /* ============ ГОЛОСОВОЙ АССИСТЕНТ ============
     Кнопка стоит слева, потому что справа внизу уже висит WhatsApp: две
     плавающие кнопки в одном углу перекрывают друг друга на телефоне. */
  .voice-widget{ position:fixed; left:22px; bottom:22px; z-index:9998; }
  .voice-fab{
    position:relative; width:56px; height:56px; padding:0;
    border-radius:50%; border:1px solid var(--border-hair);
    background:var(--bg-card); cursor:pointer; overflow:visible;
    display:grid; place-items:center;
    transition:transform .15s ease, border-color .15s ease;
  }
  /* Кнопка в простое: маленький шар с тем же светом, что и большой кружок
     в панели, — чтобы одно узнавалось в другом. */
  .voice-dot{
    width:26px; height:26px; border-radius:50%;
    background:radial-gradient(circle at 35% 32%, #cfe0ff 0%, #2E7DFF 55%, #123c86 100%);
  }
  .voice-widget[data-state="connecting"] .voice-dot{ animation:voice-breathe 1.2s ease-in-out infinite; }
  @keyframes voice-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
  @media (prefers-reduced-motion: reduce){ .voice-widget[data-state="connecting"] .voice-dot{ animation:none; } }
  .voice-fab:hover{ transform:translateY(-2px); border-color:var(--accent-outline); }
  .voice-fab:focus-visible{ outline:2px solid var(--accent-outline); outline-offset:3px; }

  /* Пульс только во время разговора — постоянно мигающая кнопка раздражает
     и отвлекает от текста страницы. */
  .voice-pulse{ position:absolute; inset:-4px; border-radius:50%; pointer-events:none; }
  .voice-widget[data-state="live"] .voice-pulse{
    border:2px solid var(--accent-decorative);
    animation:voice-pulse 1.6s ease-out infinite;
  }
  @keyframes voice-pulse{
    0%   { transform:scale(1);    opacity:.9; }
    100% { transform:scale(1.35); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .voice-widget[data-state="live"] .voice-pulse{ animation:none; opacity:.6; }
  }

  .voice-panel{
    position:absolute; bottom:70px; left:0; width:240px;
    padding:20px 18px 18px; text-align:center;
    background:var(--bg-card); border:1px solid var(--border-hair);
    border-radius:16px;
  }
  .voice-orb{ width:120px; height:120px; display:block; margin:0 auto 10px; }
  .voice-title{ margin:0 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); }
  .voice-status{ margin:0; font-size:15px; font-weight:500; color:var(--text-primary); }
  .voice-hint{ margin:8px 0 0; font-size:12.5px; line-height:1.4; color:var(--text-tertiary); }
  .voice-close{
    position:absolute; top:8px; right:10px; padding:4px 8px;
    background:none; border:0; cursor:pointer;
    font-size:20px; line-height:1; color:var(--text-muted);
  }
  .voice-close:hover{ color:var(--text-primary); }

  @media (max-width:640px){
    .voice-widget{ left:14px; bottom:14px; }
    .voice-fab, .voice-fab img{ width:52px; height:52px; }
    .voice-panel{ width:min(72vw, 240px); }
  }

  /* ============ СТРЕЛКА У ВНЕШНИХ ССЫЛОК ============
     Приём с openai.com: ссылка, уводящая с сайта, помечена стрелкой ↗ —
     человек заранее понимает, что уйдёт, и не удивляется новой вкладке.
     Ставится псевдоэлементом, поэтому не попадает в копируемый текст и не
     читается экранным диктором как слово. */
  .body-text a[target="_blank"]::after,
  .cert-actions a::after,
  .quote-meta a[target="_blank"]::after{
    content:'\2197'; margin-left:.25em; font-size:.85em; line-height:1;
    display:inline-block; vertical-align:baseline;
  }

  /* ============ BUSINESS OS: СТОПКА УРОВНЕЙ ============
     Уровни лежат друг на друге, аудит внизу. Каждый следующий чуть уже —
     так стопка читается как стопка, а не как список полос. Сужение задаётся
     переменной --os-inset прямо в разметке, потому что зависит от номера. */
  .os-stack{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .os-step{
    display:flex; gap:20px; align-items:baseline;
    margin:0 var(--os-inset, 0);
    padding:20px 26px;
    background:var(--bg-card); border:1px solid var(--border-hair);
    border-radius:10px;
    transition:border-color .18s ease, transform .18s ease;
  }
  .os-step:hover{ border-color:var(--accent-outline); transform:translateX(2px); }
  .os-step-num{
    flex:0 0 auto; font-variant-numeric:tabular-nums;
    font-size:13px; font-weight:600; letter-spacing:.5px;
    color:var(--text-muted); padding-top:2px;
  }
  .os-step-body h3{ margin:0 0 4px; font-size:17px; font-weight:600; line-height:1.25; }
  .os-step-body p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--text-secondary); }

  /* На телефоне сужение съедает и без того узкую строку — отключаем. */
  @media (max-width:720px){
    .os-step{ margin:0; padding:16px 18px; gap:14px; }
    .os-step-body h3{ font-size:16px; }
  }
  @media (prefers-reduced-motion: reduce){
    .os-step{ transition:none; }
    .os-step:hover{ transform:none; }
  }

  /* Три ведущих агента — шире, чем в сетке из четырёх. */
  .svc-grid-3{ grid-template-columns:repeat(3, 1fr); }
  @media (max-width:1080px){ .svc-grid-3{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .svc-grid-3{ grid-template-columns:1fr; } }

  /* Остальные агенты — строкой: они есть, их видно, но они не спорят
     за внимание с ведущими тремя. */
  .agent-more{
    list-style:none; margin:22px 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center;
  }
  .agent-more a{
    font-size:14.5px; color:var(--text-secondary);
    border-bottom:1px solid transparent; padding-bottom:1px;
    text-decoration:none;
  }
  .agent-more a:hover{ color:var(--text-primary); border-bottom-color:var(--border-strong); }

  /* ============ ОТРАСЛИ СПИСКОМ ============
     Две колонки на широком экране, одна на телефоне. Все восемь помещаются
     на один экран — в сетке карточек их влезало четыре. */
  .ind-list{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:0 40px;
  }
  .ind-list a{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 4px; border-bottom:1px solid var(--border-hair);
    color:var(--text-primary); transition:padding-left .18s ease;
    /* Подчёркивание здесь лишнее: строка целиком и так кликабельна, а
       подчёркнутый текст со стрелкой читается как ссылка внутри абзаца,
       а не как пункт навигации. */
    text-decoration:none;
  }
  .ind-list a:hover{ padding-left:10px; }
  .ind-name{ font-size:16.5px; font-weight:500; }
  .ind-arrow{ color:var(--text-muted); transition:color .18s ease, transform .18s ease; }
  .ind-list a:hover .ind-arrow{ color:var(--accent-outline); transform:translateX(3px); }
  @media (max-width:720px){ .ind-list{ grid-template-columns:1fr; gap:0; } }
  @media (prefers-reduced-motion: reduce){
    .ind-list a, .ind-arrow{ transition:none; }
    .ind-list a:hover{ padding-left:4px; }
    .ind-list a:hover .ind-arrow{ transform:none; }
  }

  /* ============ РЕКЛАМНЫЙ И ПРОДАЮЩИЙ СЛОЙ ============
     Всё ниже добавлено под одну задачу: чтобы человек, пришедший с рекламы,
     мог написать, не листая сайт, а тот, кто уже написал, понимал, что
     дальше. Собственных цветов здесь нет — только переменные темы, иначе
     тёмная тема разъедется. */

  /* --- Полоса действия внизу экрана телефона ---
     Показывается только на телефоне и только между первым экраном и формой:
     логика видимости в assets/site.js. По умолчанию скрыта — если скрипт не
     загрузился, полоса не перекроет содержимое навсегда. */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:none; gap:10px; align-items:center;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg-page) 92%, transparent);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--border-hair);
    transform:translateY(110%);
    transition:transform .22s ease;
  }
  .sticky-cta.is-visible{ transform:translateY(0); }
  .sticky-cta__primary{ flex:1; justify-content:center; }
  .sticky-cta__wa{
    flex:none; width:46px; height:46px; border-radius:50%;
    background:#25d366; display:flex; align-items:center; justify-content:center;
  }
  .sticky-cta__wa svg{ width:24px; height:24px; fill:#fff; }
  @media (max-width:720px){
    .sticky-cta{ display:flex; }
    /* Круглая кнопка WhatsApp и полоса — одно и то же действие дважды.
       На телефоне остаётся полоса: она шире, попасть в неё легче. */
    .wa-widget{ display:none; }
    footer{ padding-bottom:96px; }
  }
  @media (prefers-reduced-motion: reduce){
    .sticky-cta{ transition:none; }
  }

  /* --- Шапка рекламной страницы: логотип, язык, одно действие --- */
  .nav--minimal .nav-cta{ margin-left:auto; }

  /* --- Первый экран рекламной страницы: смысл слева, форма справа ---
     Форма стоит рядом с заголовком, а не в подвале: человек с объявления не
     обязан пролистать страницу, чтобы получить возможность написать. */
  /*!critical-start*/
  .lp-hero{ padding:clamp(40px, 5vw, 76px) 0 clamp(48px, 6vw, 88px); background:var(--bg-page); }
  .lp-hero__grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px, 4vw, 64px);
    align-items:start;
  }
  @media (max-width:980px){ .lp-hero__grid{ grid-template-columns:1fr; } }
  .lp-hero__copy .heading-xl{ margin-bottom:var(--sp-20); }
  .lp-hero__copy .subheading{ max-width:620px; }
  .lp-trust{
    list-style:none; margin:32px 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:10px 22px;
  }
  .lp-trust li{
    position:relative; padding-left:22px;
    font-size:13.5px; color:var(--text-tertiary);
  }
  .lp-trust li::before{
    content:''; position:absolute; left:0; top:6px;
    width:10px; height:5px;
    border-left:1.6px solid var(--accent-fill); border-bottom:1.6px solid var(--accent-fill);
    transform:rotate(-45deg);
  }
  .lp-hero__form .form-card{ position:sticky; top:72px; }
  @media (max-width:980px){ .lp-hero__form .form-card{ position:static; } }
  /*!critical-end*/

  /* --- Три шага вместо четырёх (страница «спасибо», рекламные страницы) --- */
  .process-grid-3{ grid-template-columns:repeat(3,1fr); }
  @media (max-width:900px){ .process-grid-3{ grid-template-columns:1fr; } }

  /* --- Галочка на странице «заявка получена» --- */
  .thanks-mark{
    width:56px; height:56px; border-radius:50%;
    background:var(--accent-fill); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; margin-bottom:var(--sp-24);
  }

  /* --- Калькулятор потерь на первом ответе ---
     Слева три поля, справа сумма. Цифра — самое крупное на блоке: она и есть
     аргумент, всё остальное только объясняет, откуда она взялась. */
  .leak{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:0;
    border:1px solid var(--border-hair); border-radius:16px; overflow:hidden;
    background:var(--bg-card);
  }
  @media (max-width:860px){ .leak{ grid-template-columns:1fr; } }
  /* min-width:0 обязателен обеим колонкам сетки. Без него ширину дорожки
     задаёт самый широкий неразрывный элемент внутри — а это кнопка призыва,
     у которой по общему правилу white-space:nowrap. На телефоне такая кнопка
     растягивала блок примерно до 500 px, и всё правее 390 px обрезалось:
     сумма была видна, а строка под ней и половина пояснения — нет. */
  .leak > *{ min-width:0; }
  .leak-form{ padding:var(--sp-40); display:flex; flex-direction:column; gap:var(--sp-20); }
  .leak-field{ display:flex; flex-direction:column; gap:8px; }
  .leak-field label{
    font-size:12px; font-weight:600; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--text-tertiary);
  }
  .leak-field input, .leak-field select{
    width:100%; padding:12px 14px; font:inherit; font-size:15px;
    color:var(--text-primary); background:var(--input-bg);
    border:1px solid var(--input-border); border-radius:10px;
  }
  .leak-field input:focus-visible, .leak-field select:focus-visible{
    outline:2px solid var(--accent-decorative); outline-offset:1px;
  }
  .leak-result{
    padding:var(--sp-40); background:var(--bg-elevated);
    display:flex; flex-direction:column; justify-content:center; gap:var(--sp-12);
    border-left:1px solid var(--border-hair);
  }
  @media (max-width:860px){ .leak-result{ border-left:0; border-top:1px solid var(--border-hair); } }
  .leak-result .r-label{
    font-size:12px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-tertiary);
  }
  .leak-result .r-value{
    font-family:var(--font-display); font-size:clamp(34px, 5vw, 48px); font-weight:600;
    color:var(--accent-fill); font-variant-numeric:tabular-nums; letter-spacing:-1px;
    line-height:1.05;
  }
  .leak-result .r-sub{ font-size:14px; color:var(--text-secondary); line-height:1.5; }
  .leak-result .r-note{ font-size:12.5px; color:var(--text-muted); line-height:1.5; }
  /* Призыв здесь длинный по смыслу («закрыть утечку», а не «отправить»),
     поэтому ему разрешено переноситься по словам. */
  .leak-result .btn{ white-space:normal; text-align:center; }

  /* ============ ПОЛНЫЙ КАТАЛОГ АГЕНТОВ ПО ПРАЙСУ ============
     Компактнее флагманских карточек: три в ряд, квадратная картинка,
     название, одно предложение и цена. Цена — самое заметное после
     названия: ради неё человек и листает каталог. */
  .catalog-group{ margin-top:clamp(36px, 4vw, 56px); }
  .catalog-group:first-of-type{ margin-top:0; }
  .catalog-group__title{
    font-family:var(--font-display); font-size:clamp(20px, 2vw, 26px); font-weight:600;
    letter-spacing:-.01em; margin:0 0 18px; color:var(--text-primary);
  }
  .catalog-grid{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(22px, 2.6vw, 36px) clamp(18px, 2vw, 28px);
  }
  @media (max-width:980px){ .catalog-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  @media (max-width:560px){ .catalog-grid{ grid-template-columns:1fr; } }
  .catalog-card{ display:block; color:inherit; text-decoration:none; min-width:0; }
  .catalog-card__media{
    position:relative; display:block; overflow:hidden; aspect-ratio:1 / 1;
    border-radius:var(--radius-card); background:var(--bg-page);
  }
  .catalog-card__media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    border:1px solid rgba(29,29,31,.09); border-radius:inherit;
  }
  .catalog-card__media img{
    display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .7s cubic-bezier(.16,1,.3,1);
  }
  .catalog-card__body{ display:block; padding-top:14px; }
  .catalog-card__name{
    display:block; font-family:var(--font-display); font-size:18px; font-weight:600;
    line-height:1.2; color:var(--text-primary); margin-bottom:6px;
  }
  .catalog-card__text{ display:block; font-size:14px; line-height:1.5; color:var(--text-tertiary); }
  .catalog-card__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:12px; }
  .catalog-card__price strong{ font-size:16px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
  .catalog-card__price span{ font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
  .catalog-card__cta{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    font-size:13px; font-weight:600; color:var(--accent-outline);
  }
  .catalog-card__cta span{ transition:transform .25s ease; }
  a.catalog-card:hover .catalog-card__media img{ transform:scale(1.03); }
  a.catalog-card:hover .catalog-card__cta span{ transform:translateX(4px); }
  a.catalog-card:focus-visible{ outline:2px solid var(--accent-decorative); outline-offset:6px; border-radius:var(--radius-card); }
  @media (prefers-reduced-motion: reduce){
    .catalog-card__media img, .catalog-card__cta span{ transition:none; }
  }

  /* Цена под заголовком страницы агента. */
  .agent-price{
    max-width:640px; margin:0 auto var(--sp-24);
    font-size:15px; line-height:1.5; color:var(--text-secondary);
    font-variant-numeric:tabular-nums;
  }