/* === /seo/ 01-hero: Figma 369:294 (фон), 369:817, 369:323, 369:815, 369:816, 371:1621;
   mobile 423:2634, 423:4031, 423:2649, 423:3616 === */

/* ---------- секция и фон ----------
   Фон макета — растр 1440×670 с тремя градиентами. Здесь иллюстрация вынесена в <img>
   (правая часть исходника), а градиенты заменены маской картинки и фоном секции:
   сверху почти чёрный #060507, к полосе фактов — #27242E. */
.fmf2 .seo-hero{position:relative;overflow:hidden;color:#fff;padding-bottom:80px;
  background:linear-gradient(180deg,#060507 0,#060507 355px,var(--c-dark) 670px,var(--c-dark) 100%)}
.fmf2 .seo-hero__bg{position:absolute;inset:0 0 auto;height:670px;pointer-events:none}
/* Геометрия из cropTransform: исходник 1915×821 показан как 1622×716, левый край на −43px
   от фрейма 1440, верх +41px. Вырезка начинается с x=800 исходника → 678px от фрейма. */
.fmf2 .seo-hero__art{position:absolute;top:41px;left:calc(50% - 85px);width:945px;max-width:none;height:716px;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 23%,#000 95%,transparent 100%),linear-gradient(180deg,#000 44%,transparent 88%),linear-gradient(180deg,transparent 4.6%,#000 20.5%);
  -webkit-mask-composite:source-in,source-in;
  mask:linear-gradient(90deg,transparent 0,#000 23%,#000 95%,transparent 100%),linear-gradient(180deg,#000 44%,transparent 88%),linear-gradient(180deg,transparent 4.6%,#000 20.5%);
  mask-composite:intersect}

/* Шапка /home/ абсолютная, на десктопе 142px: крошки ниже неё (в макете y=112),
   текст — на своей высоте из макета (y=275). */
.fmf2 .seo-hero__inner{position:relative;z-index:1;padding-top:156px}
.fmf2 .seo-hero__crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  font-size:14px;font-weight:500;line-height:1.2}
.fmf2 .seo-hero__crumbs li{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6)}
.fmf2 .seo-hero__crumbs li+li::before{content:"/";color:rgba(255,255,255,.6)}
.fmf2 .seo-hero__crumbs a{transition:color .2s}
.fmf2 .seo-hero__crumbs a:hover,.fmf2 .seo-hero__crumbs a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fmf2 .seo-hero__crumbs [aria-current]{color:#fff}

.fmf2 .seo-hero__main{max-width:709px;margin-top:102px}
.fmf2 .seo-hero__kicker{font-size:14px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.fmf2 .seo-hero__title{margin-top:8px;font-size:48px;font-weight:400;line-height:1.2;color:#fff}
.fmf2 .seo-hero__lead{max-width:580px;margin-top:24px;font-size:18px;line-height:1.4;color:#fff}
.fmf2 .seo-hero__cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fmf2 .seo-hero__cta .btn{height:50px;padding-inline:40px;border-radius:43px;font-size:16px;font-weight:500;line-height:1.6}
.fmf2 .seo-hero__cta .btn--ghost-dark{border-color:#fff}

/* ---------- полоса фактов ---------- */
.fmf2 .seo-hero__facts{position:relative;z-index:1;margin-top:81px}
.fmf2 .seo-hero__facts-caption{font-size:16px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.6)}
.fmf2 .seo-hero__facts-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px}
.fmf2 .seo-hero__fact{--cut-c:#48474B;display:flex;flex-direction:column;gap:24px;min-height:166px;
  margin:0 -1px -1px 0;padding:24px}
.fmf2 .seo-hero__fact-num{font-size:40px;line-height:1.4;white-space:nowrap}
.fmf2 .seo-hero__fact-text{max-width:250px;font-size:14px;line-height:1.2}

/* ---------- планшет и мобильный: иллюстрация над текстом ----------
   Мобильный макет (375): исходник показан шириной 835px, вырезка — 486px от x=−58, верх 16px;
   текст начинается на y=308 (≈ 16 + 0.596 × ширина вырезки). На планшете ширина ограничена. */
@media (max-width:1180px){
  .fmf2 .seo-hero__art{left:auto;right:calc(var(--pad) - 300px)}
}
@media (max-width:1024px){
  .fmf2 .seo-hero{--art-w:min(129.6vw,760px);
    background:linear-gradient(180deg,#060507 0,#060507 calc(16px + var(--art-w) * .44),var(--c-dark) calc(16px + var(--art-w) * 1.4),var(--c-dark) 100%)}
  .fmf2 .seo-hero__bg{height:auto;bottom:0}
  .fmf2 .seo-hero__art{top:16px;right:auto;left:calc(50% - var(--art-w) * .5);width:var(--art-w);height:auto;
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 8%,#000 55%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask:linear-gradient(180deg,transparent 0,#000 8%,#000 55%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-composite:intersect}
  .fmf2 .seo-hero__inner{padding-top:calc(16px + var(--art-w) * .596)}
  /* крошки — сразу под шапкой (88px), поверх иллюстрации */
  .fmf2 .seo-hero__crumbs{position:absolute;top:104px;left:var(--pad);right:var(--pad)}
  .fmf2 .seo-hero__main{margin-top:0}
  .fmf2 .seo-hero__facts{margin-top:64px}
  .fmf2 .seo-hero__facts-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .fmf2 .seo-hero{padding-bottom:56px}
  .fmf2 .seo-hero__crumbs{top:84px}
  .fmf2 .seo-hero__kicker{font-weight:500;line-height:1.4;color:rgba(255,255,255,.6)}
  .fmf2 .seo-hero__title{margin-top:16px;font-size:32px}
  .fmf2 .seo-hero__br{display:none}
  .fmf2 .seo-hero__lead{margin-top:16px}
  .fmf2 .seo-hero__cta{flex-direction:column;align-items:flex-start}
  .fmf2 .seo-hero__cta .btn{height:46px;padding-block:10px}
  .fmf2 .seo-hero__facts{margin-top:53px}
  .fmf2 .seo-hero__facts-caption{font-weight:400}
  .fmf2 .seo-hero__fact{gap:24px;min-height:171px;padding:16px}
  .fmf2 .seo-hero__fact-num{font-size:32px}
  .fmf2 .seo-hero__fact-text{max-width:none}
}
@media (max-width:360px){
  .fmf2 .seo-hero__fact-num{font-size:28px}
  /* на 320 кнопка с полями 40px шире контейнера */
  .fmf2 .seo-hero__cta .btn{padding-inline:24px;max-width:100%}
}