@import url('fonts.css');
/* страница /new/ — самостоятельный документ, home.css грузится только здесь */
html{overflow-x:hidden}
body{margin:0}
/* =========================================================================
   fmf.ru — новая главная. ВСЁ вложено в .fmf2 — не влияет на другие страницы.
   Базовый слой: токены, reset, примитивы, header, footer, модалка, формы.
   Секционные стили — в assets/css/NN-slug.css
   ========================================================================= */

/* ---------- tokens ---------- */
.fmf2{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --c-ink:#1A1A1A; --c-ink-2:#48474B; --c-ink-3:#707070;
  --c-line:#EBEBEB; --c-bg:#FFFFFF; --c-bg-soft:#F5F4F7;
  --c-dark:#27242E; --c-dark-2:#302E38;
  --c-on-dark:#FFFFFF; --c-on-dark-2:rgba(255,255,255,.6); --c-on-dark-3:rgba(255,255,255,.4);
  --c-line-dark:rgba(255,255,255,.12);
  --c-accent:#6657C2; --c-accent-600:#5648A8; --c-accent-light:#8C7CE9;
  --c-accent-grad:linear-gradient(180deg,#8C7CE9 0%,#6657C2 100%);
  --c-accent-soft:linear-gradient(149deg,#DEEFFF 13%,#EBBCFB 100%);
  --c-green:#00A54D;
  --container:1320px; --pad:60px;
  --radius:16px; --radius-sm:10px; --radius-pill:999px;
  --sect-y:120px;
  font-family:var(--font);
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.fmf2 .container{min-width:0}
@media (max-width:1024px){ .fmf2{ --pad:40px; --sect-y:80px; } }
@media (max-width:640px){ .fmf2{ --pad:20px; --sect-y:60px; --container:100%; } }

/* ---------- reset (scoped) ---------- */
.fmf2 *,.fmf2 *::before,.fmf2 *::after{box-sizing:border-box;margin:0;padding:0}
.fmf2 img,.fmf2 svg{display:block;max-width:100%}
.fmf2 img{height:auto}
.fmf2 a{color:inherit;text-decoration:none}
.fmf2 button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.fmf2 input,.fmf2 textarea,.fmf2 select{font:inherit;color:inherit}
.fmf2 ul,.fmf2 ol{list-style:none}
.fmf2 h1,.fmf2 h2,.fmf2 h3,.fmf2 h4{font-weight:400;line-height:1.1}
.fmf2 p{line-height:1.4}
.fmf2 [hidden]{display:none!important}
.fmf2 :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* ---------- layout primitives ---------- */
.fmf2 .container{width:100%;max-width:calc(var(--container) + (var(--pad) * 2));margin-inline:auto;padding-inline:var(--pad)}
.fmf2 .section{padding-block:var(--sect-y);position:relative}
.fmf2 .section--dark{background:var(--c-dark);color:var(--c-on-dark)}
.fmf2 .section--soft{background:var(--c-bg-soft)}
.fmf2 .section--tight{padding-top:0}
.fmf2 .sect-head{max-width:984px;margin-bottom:56px}
.fmf2 .eyebrow{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:16px;display:block}
.fmf2 .section--dark .eyebrow{color:var(--c-on-dark-3)}
.fmf2 .sect-title{font-size:48px;line-height:1.1}
.fmf2 .sect-title--xl{font-size:64px}
.fmf2 .sect-lead{font-size:18px;font-weight:500;line-height:1.4;color:var(--c-ink-2);margin-top:20px}
.fmf2 .section--dark .sect-lead{color:var(--c-on-dark-2)}
@media (max-width:768px){
  .fmf2 .sect-title{font-size:28px}
  .fmf2 .sect-title--xl{font-size:34px}
  .fmf2 .sect-lead{font-size:16px}
  .fmf2 .sect-head{margin-bottom:36px}
}

/* ---------- buttons / links ---------- */
.fmf2 .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding-inline:28px;border-radius:var(--radius-pill);
  font-size:16px;font-weight:500;white-space:nowrap;transition:.18s ease;
  border:1px solid transparent;
}
.fmf2 .btn--primary{background:var(--c-accent-grad);color:#fff}
.fmf2 .btn--primary:hover{filter:brightness(1.06);box-shadow:0 8px 24px rgba(102,87,194,.35)}
.fmf2 .btn--ghost-dark{border-color:var(--c-on-dark-3);color:#fff}
.fmf2 .btn--ghost-dark:hover{background:rgba(255,255,255,.08);border-color:#fff}
.fmf2 .btn--ghost-light{border-color:var(--c-accent);color:var(--c-accent)}
.fmf2 .btn--ghost-light:hover{background:var(--c-accent);color:#fff}
.fmf2 .btn--sm{height:40px;padding-inline:20px;font-size:14px}
.fmf2 .link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--c-accent)}
.fmf2 .section--dark .link-arrow{color:#fff}
.fmf2 .link-arrow svg{width:18px;height:18px}
.fmf2 .link-arrow:hover{text-decoration:underline}
@media (max-width:430px){
  .fmf2 .btn--block-mobile{width:100%}
}

/* ---------- icon helper (mask, currentColor) ---------- */
.fmf2 .ic{display:inline-block;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--ic) no-repeat center/contain;mask:var(--ic) no-repeat center/contain;flex:none}

/* ---------- reveal anim ---------- */
.fmf2 [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.fmf2 [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fmf2 [data-reveal]{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   00-header
   ===================================================================== */
.fmf2 .site-header{position:absolute;inset:0 0 auto;z-index:60;transition:background .25s,box-shadow .25s}
.fmf2 .site-header.is-scrolled{position:fixed;background:var(--c-dark);box-shadow:0 1px 0 var(--c-line-dark)}
.fmf2 .site-header__row{display:flex;align-items:flex-start;gap:0;height:142px;padding-top:24px;transition:height .25s,padding .25s,align-items .25s}
.fmf2 .site-header__logo{width:312px;height:118px;flex:none;transform-origin:left top;transition:width .25s,height .25s}
.fmf2 .site-header__logo img{width:100%}
.fmf2 .site-nav{display:flex;align-items:flex-start;gap:32px;margin-inline-start:77px;padding-top:8px}
.fmf2 .site-nav a{font-size:18px;font-weight:500;line-height:1.4;color:#fff;opacity:.9;white-space:nowrap}
.fmf2 .site-nav a:hover{opacity:1}

/* услуги: выпадающее меню */
.fmf2 .site-nav__group{position:relative}
.fmf2 .site-nav__toggle{display:inline-flex;align-items:center;gap:6px;font-size:18px;font-weight:500;line-height:1.4;
  color:#fff;opacity:.9;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
.fmf2 .site-nav__toggle:hover,.fmf2 .site-nav__group.is-open .site-nav__toggle{opacity:1}
.fmf2 .site-nav__chevron{width:18px;height:18px;flex:none;transition:transform .2s ease}
.fmf2 .site-nav__chevron *{stroke:currentColor}
.fmf2 .site-nav__group.is-open .site-nav__chevron{transform:rotate(180deg)}
.fmf2 .nav-drop{position:absolute;z-index:70;top:100%;left:-24px;padding-top:18px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.fmf2 .site-nav__group.is-open .nav-drop{opacity:1;visibility:visible;transform:none}
.fmf2 .nav-drop__panel{display:grid;grid-template-columns:repeat(2,minmax(248px,1fr));gap:4px 32px;
  padding:24px;background:var(--c-dark-2);border:1px solid var(--c-line-dark);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.fmf2 .nav-drop__col-name{display:block;margin-bottom:12px;padding-inline:12px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-on-dark-3)}
.fmf2 .nav-drop__list{list-style:none;margin:0;padding:0}
.fmf2 .nav-drop__list a{display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:15px;line-height:1.35;
  white-space:normal;opacity:.85;transition:background .2s ease,opacity .2s ease}
.fmf2 .nav-drop__list a:hover,.fmf2 .nav-drop__list a:focus-visible{background:rgba(255,255,255,.07);opacity:1}
.fmf2 .nav-drop__ic{width:22px;height:22px;flex:none;color:var(--c-accent-light)}
.fmf2 .nav-drop__ic *{stroke:currentColor}
.fmf2 .nav-drop__all{grid-column:1/-1;margin-top:12px;padding:12px 12px 0;border-top:1px solid var(--c-line-dark);
  font-size:15px;color:#fff;opacity:.9}
.fmf2 .nav-drop__all:hover{opacity:1}
.fmf2 .nav-drop__all .ic-svg{width:16px;height:16px}
.fmf2 .nav-drop__all .ic-svg *{stroke:currentColor}
@media (prefers-reduced-motion:reduce){
  .fmf2 .nav-drop{transition:none}
  .fmf2 .site-nav__chevron{transition:none}
}
.fmf2 .site-header__spacer{margin-inline-start:auto}
.fmf2 .lang-switch{display:inline-flex;align-items:center;gap:8px;margin-top:8px;margin-right:16px;color:#fff;font-size:18px;font-weight:500;line-height:1.4;opacity:.9}
.fmf2 .lang-switch svg{width:24px;height:24px}
.fmf2 .lang-switch svg *{fill:currentColor}
.fmf2 .site-header__row>.btn{height:42px;padding-inline:30px}
.fmf2 .burger{position:relative;display:none;width:28px;height:28px;color:#fff}
.fmf2 .mobile-menu{display:none}
.fmf2 .site-header.is-scrolled .site-header__row{height:76px;padding-top:10px;align-items:center}
.fmf2 .site-header.is-scrolled .site-header__logo{width:148px;height:auto}
.fmf2 .site-header.is-scrolled .site-nav{margin-inline-start:48px;padding-top:0}
.fmf2 .site-header.is-scrolled .lang-switch{margin-top:0}
/* компактная шапка на ноутбучных ширинах: навигация с выпадашкой должна помещаться до 1181px */
@media (min-width:1181px) and (max-width:1340px){
  .fmf2 .site-header__logo{width:240px;height:auto}
  .fmf2 .site-nav{margin-inline-start:40px;gap:22px}
  .fmf2 .site-nav a,.fmf2 .site-nav__toggle{font-size:16px}
  .fmf2 .site-nav__chevron{width:16px;height:16px}
  .fmf2 .lang-switch{font-size:16px;margin-right:12px}
  .fmf2 .site-header__row>.btn{padding-inline:24px}
  .fmf2 .nav-drop__panel{grid-template-columns:repeat(2,minmax(228px,1fr));gap:4px 24px}
}
@media (max-width:1180px){
  .fmf2 .site-nav,.fmf2 .lang-switch,.fmf2 .site-header .btn{display:none}
  .fmf2 .burger{display:block;width:36px;height:36px;flex:none}
  .fmf2 .burger .ic-svg{display:none}
  .fmf2 .burger::before,.fmf2 .burger::after{content:"";position:absolute;left:4px;width:28px;height:2px;background:#fff}
  .fmf2 .burger::before{top:13px}
  .fmf2 .burger::after{top:21px}
  .fmf2 .site-header__row{height:88px;padding-top:16px;align-items:center;gap:16px}
  .fmf2 .site-header__logo{width:148px;height:auto}
  .fmf2 .site-header.is-scrolled .site-header__row{height:64px;padding-top:0}
  .fmf2 .site-header.is-scrolled .site-header__logo{width:104px;height:auto}
  .fmf2 .mobile-menu{display:block;position:fixed;inset:0;z-index:80;background:var(--c-dark);color:#fff;
    padding:80px var(--pad) 40px;transform:translateX(100%);transition:transform .3s,visibility .3s;
    visibility:hidden;overflow-y:auto;overflow-x:hidden;max-width:100vw}
  .fmf2 .mobile-menu.is-open{transform:none;visibility:visible}
  .fmf2 .mobile-menu a{display:block;font-size:20px;padding:14px 0;border-bottom:1px solid var(--c-line-dark)}
  .fmf2 .mobile-menu__close{position:absolute;top:20px;right:var(--pad);width:28px;height:28px;color:#fff}
  .fmf2 .mobile-menu .btn{width:100%;margin-top:24px}
  .fmf2 .mobile-menu__sub-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    padding:14px 0;font-size:20px;font-weight:400;line-height:1.4;color:#fff;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--c-line-dark);cursor:pointer}
  .fmf2 .mobile-menu__chevron{width:20px;height:20px;flex:none;transition:transform .2s ease}
  .fmf2 .mobile-menu__chevron *{stroke:currentColor}
  .fmf2 .mobile-menu__group.is-open .mobile-menu__chevron{transform:rotate(180deg)}
  .fmf2 .mobile-menu__sub{padding:4px 0 8px 16px}
  .fmf2 .mobile-menu__sub-name{display:block;padding:12px 0 4px;font-size:12px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--c-on-dark-3)}
  .fmf2 .mobile-menu__sub a{font-size:17px;padding:10px 0;border-bottom:0;opacity:.85}
}

/* =====================================================================
   14-footer
   ===================================================================== */
.fmf2 .site-footer{background:var(--c-bg);border-top:1px solid var(--c-line);padding-block:72px 40px}
.fmf2 .footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.fmf2 .footer-col h4{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:18px}
.fmf2 .footer-col a{display:block;font-size:15px;padding:7px 0;color:var(--c-ink-2)}
.fmf2 .footer-col a:hover{color:var(--c-accent)}
.fmf2 .footer-bottom{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:28px;border-top:1px solid var(--c-line)}
.fmf2 .footer-bottom__logo{width:120px}
.fmf2 .footer-accr{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--c-ink-3);max-width:280px}
.fmf2 .footer-accr img{width:34px;flex:none}
.fmf2 .footer-legal{margin-inline-start:auto;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:var(--c-ink-3)}
.fmf2 .footer-copy{font-size:13px;color:var(--c-ink-3)}
@media (max-width:768px){
  .fmf2 .footer-cols{grid-template-columns:1fr 1fr;gap:24px}
  .fmf2 .footer-legal{margin-inline-start:0;width:100%}
}

/* =====================================================================
   ФОС / модалки
   ===================================================================== */
.fmf2-modal-open{overflow:hidden}
.fmf2-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding:40px 16px;background:rgba(26,24,32,.6);overflow:auto}
.fmf2-modal.is-open{display:flex}
.fmf2-modal__dialog{background:#fff;color:var(--c-ink);width:100%;max-width:520px;border-radius:var(--radius);
  padding:32px;position:relative;font-family:var(--font)}
.fmf2-modal__title{font-size:24px;margin-bottom:20px}
.fmf2-modal__close{position:absolute;top:16px;right:16px;width:28px;height:28px;color:var(--c-ink-3)}
.fmf2-modal__pane{display:none}
.fmf2-modal__pane.is-active{display:block}

/* =====================================================================
   Формы (инлайн, блок 13)
   ===================================================================== */
.fmf2 .field{margin-bottom:22px;position:relative}
.fmf2 .field__label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:8px}
.fmf2 .field input,.fmf2 .field textarea,.fmf2 .field select{
  width:100%;height:44px;border:0;border-bottom:1px solid var(--c-ink);background:transparent;
  font-size:16px;padding:6px 0;transition:border-color .2s}
.fmf2 .field textarea{height:auto;min-height:44px;resize:vertical}
.fmf2 .field input::placeholder,.fmf2 .field textarea::placeholder{color:var(--c-ink-3)}
.fmf2 .field input:focus,.fmf2 .field textarea:focus,.fmf2 .field select:focus{outline:0;border-color:var(--c-accent)}
.fmf2 .field.has-error input,.fmf2 .field.has-error textarea,.fmf2 .field.has-error select{border-color:#D64545}
.fmf2 .field-error{display:none;color:#D64545;font-size:13px;margin-top:6px}
.fmf2 .field.has-error .field-error{display:block}
.fmf2 .consent{font-size:14px;color:var(--c-ink-2);margin:24px 0}
.fmf2 .consent label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.fmf2 .consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--c-accent)}
.fmf2 .consent a{color:var(--c-accent);text-decoration:underline}
.fmf2 .consent .field-error{margin-left:32px}
.fmf2 .consent.has-error .field-error{display:block}
.fmf2 .form-success{display:none}
.fmf2 .form-success.is-visible{display:block}

/* skip-link / a11y */
.fmf2 .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   Секционные стили — заполняются по мере вёрстки блоков
   === 01-hero ===
   === 02-trust ===
   === 03-tasks ===
   === 04-directions ===
   === 05-cases ===
   === 06-process ===
   === 07-why ===
   === 08-reviews ===
   === 09-team ===
   === 10-products ===
   === 11-formats ===
   === 12-faq ===
   === 13-final ===
   ===================================================================== */