/* Запасные шрифты с метриками Manrope / Unbounded / JetBrains Mono (посчитаны по файлам шрифтов, кириллица):
   пока веб-шрифт грузится, текст рисуется системным шрифтом того же размера — без «прыжка» вёрстки при подмене (CLS). */
@font-face{font-family:'Manrope Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');size-adjust:101.2%;ascent-override:105.3%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:'Unbounded Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');size-adjust:137%;ascent-override:72.7%;descent-override:17.9%;line-gap-override:0%}
@font-face{font-family:'JetBrains Fallback';src:local('Courier New'),local('CourierNewPSMT'),local('Menlo'),local('Roboto Mono');size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
/* Shared React Media navigation. Keep this file as the single visual source for the top bar. */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:100px;font-weight:500;font-size:15px;transition:all .4s var(--ease);position:relative;overflow:hidden;letter-spacing:-0.01em;white-space:nowrap}
.btn-primary{background:var(--fg);color:#0a0a0b}
.btn-primary:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 20px 40px var(--glow)}
.btn .arr{display:inline-flex;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:10001;width:calc(100% - 48px);max-width:1400px;transition:all .3s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 20px 14px 24px;background:rgba(15,15,20,0.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--line);border-radius:100px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-0.02em;font-family:'Unbounded','Unbounded Fallback',sans-serif;flex-shrink:0}
.logo-mark{width:30px;height:30px;border-radius:8px;background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent-3),var(--accent));display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;position:relative;animation:spin 8s linear infinite}
.logo-mark::after{content:"";position:absolute;inset:3px;border-radius:6px;background:var(--bg)}
.logo-mark span{position:relative;z-index:1;color:var(--fg);font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:13px}
.nav-links{display:flex;align-items:center;justify-content:center;gap:28px;flex:1 1 auto;min-width:0}
.nav-links a{font-size:14px;color:var(--fg-dim);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--fg)}
.nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-phone{font-family:'JetBrains Mono','JetBrains Fallback',monospace;font-size:13px;color:var(--fg);white-space:nowrap}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:10002;position:relative}
.nav-hamburger span{width:24px;height:2px;background:var(--fg);transition:all 0.3s ease;border-radius:2px}
.nav-hamburger span.active:nth-child(1){transform:rotate(45deg) translate(6px, 6px)}
.nav-hamburger span.active:nth-child(2){opacity:0}
.nav-hamburger span.active:nth-child(3){transform:rotate(-45deg) translate(6px, -6px)}

@media (max-width:1400px){
  .nav-inner{gap:18px;padding:14px 18px 14px 20px}
  .nav-links{gap:22px}
  .nav-cta .btn{padding:14px 22px}
}

@media (max-width:1180px){
  .nav.scrolled .nav-inner{
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .nav{top:14px;width:calc(100% - 32px);max-width:none}
  .nav-inner{width:100%;padding:0;background:transparent;border:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:12px;justify-content:space-between}
  .logo{padding:12px 18px 12px 16px;background:rgba(15,15,20,0.78);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--line);border-radius:999px;min-height:56px}
  .nav-hamburger{display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;background:rgba(15,15,20,0.78);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--line);border-radius:999px;flex-shrink:0}
  .nav-links{display:none}
  .nav-phone{display:none}
  .nav-cta .btn{display:none}
  .nav-cta{display:flex;gap:0;margin-left:auto;margin-right:10px}
  .nav-cta .nav-msgs{gap:8px;margin:0}
  .nav-msg{width:44px;height:44px}
}
@media (max-width:640px){.nav-cta{display:none}}

@media (max-width:640px){
  .nav{top:12px;width:calc(100% - 24px)}
  .nav-inner{gap:10px}
  .logo{padding:10px 16px 10px 14px;min-height:52px}
  .logo{font-size:15px}
  .logo-mark{width:26px;height:26px}
  .nav-hamburger{width:52px;height:52px}
  .btn{padding:12px 20px;font-size:14px}
}

@media (max-width:1180px){
  .nav .nav-inner,
  .nav.scrolled .nav-inner{
    width:100% !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .nav.scrolled .logo,
  .nav .logo{
    background:rgba(15,15,20,0.78) !important;
    border:1px solid var(--line) !important;
    box-shadow:none !important;
  }
}

@media (min-width:1181px){
  .nav .logo,
  .nav.scrolled .logo{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    min-height:0 !important;
  }
  .nav .logo > span:last-child{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
  }
}

/* Octopus logo mark (same as homepage) */
.logo-mark.logo-oct{width:40px;height:40px;background:var(--fg);border-radius:0;animation:none;overflow:visible;-webkit-mask:url(octopus-mark.svg) center/contain no-repeat;mask:url(octopus-mark.svg) center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(216,255,62,.20))}
.logo-mark.logo-oct::after{display:none}
@media (max-width:768px){.logo-mark.logo-oct{width:36px;height:36px}}

/* Mobile drawer (shared) */
.nav-drawer{position:fixed;inset:0;z-index:10000;background:rgba(8,8,10,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:32px;opacity:0;pointer-events:none;transition:opacity .35s}
.nav-drawer.open{opacity:1;pointer-events:auto}
.nav-drawer a{font-family:'Unbounded','Unbounded Fallback',sans-serif;font-size:26px;letter-spacing:-.03em;color:var(--fg-dim);padding:10px 0}
.nav-drawer a:active{color:var(--lime)}
.nav-drawer-msgs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.nav-drawer-msgs a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;border:1px solid var(--line-2);border-radius:100px;font-family:'Manrope','Manrope Fallback',sans-serif;font-size:15px;font-weight:500;letter-spacing:0;color:var(--fg);background:rgba(255,255,255,.03)}
.nav-drawer-msgs a svg{width:18px;height:18px}
.nav-drawer-phone{font-family:'JetBrains Mono','JetBrains Fallback',monospace!important;font-size:16px!important;color:var(--lime)!important;margin-top:14px}

/* Brand marks (Telegram / MAX / phone) */
.brand-ic{display:block;width:100%;height:100%;border-radius:50%}
.nav-msgs{display:flex;align-items:center;gap:8px;margin-right:4px}
.nav-msg{display:inline-flex;width:32px;height:32px;border-radius:50%;transition:transform .2s var(--ease),filter .2s}
.nav-msg:hover{transform:translateY(-1px) scale(1.06);filter:brightness(1.12)}
.nav-drawer-msgs a .brand-ic{width:26px;height:26px}
.nav-drawer-msgs a{padding:8px 18px 8px 9px;font-weight:600}

/* Floating contact dock (shared) */
.contact-dock{position:fixed;right:24px;bottom:24px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.dock-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:50%;border:0;background:transparent;box-shadow:0 12px 32px rgba(0,0,0,.45);cursor:pointer;transition:transform .22s var(--ease),filter .22s}
.dock-btn:hover{transform:translateY(-2px) scale(1.06);filter:brightness(1.1)}
.dock-btn .brand-ic{width:52px;height:52px}
.dock-lbl{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);padding:7px 12px;border-radius:8px;background:var(--fg);color:#08080a;font-family:'Manrope','Manrope Fallback',sans-serif;font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s var(--ease)}
.dock-phone .dock-lbl{font-family:'JetBrains Mono','JetBrains Fallback',monospace;font-weight:500}
.dock-btn:hover .dock-lbl,.dock-btn:focus-visible .dock-lbl{opacity:1;transform:translateY(-50%)}
.dock-btn:focus-visible,.nav-msg:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.dock-main{width:auto;height:auto;border-radius:100px;padding:14px 22px;font-family:'Manrope','Manrope Fallback',sans-serif;font-size:14px;font-weight:500;color:#fff;background:var(--accent);box-shadow:0 10px 40px rgba(99,102,241,.5);margin-top:2px}
.dock-main:hover{background:#fff;color:var(--accent);filter:none}
@media (max-width:960px){
  .contact-dock{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));flex-direction:row;align-items:center;gap:10px}
  .dock-main{flex:1 1 auto;justify-content:center;padding:13px 14px;min-width:0;margin:0}
  .dock-btn{width:48px;height:48px;flex:0 0 48px}
  .dock-btn .brand-ic{width:48px;height:48px}
  .dock-lbl{display:none}
  .contact-dock .dock-main{width:auto;height:auto;flex:1 1 auto;border-radius:100px}
  body{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){.dock-btn,.nav-msg{transition:none}}

/* телефон и планшет: плашки шапки (лого, меню) плотные — без размытия фона сквозь них просвечивал текст страницы */
@media (max-width:1180px){
  html body .nav .logo,html body .nav.scrolled .logo,html body .nav .nav-hamburger{background:rgba(14,14,19,.96)!important}
}
/* iPhone увеличивает страницу при фокусе на поле со шрифтом меньше 16px (чат, форма) и потом её не возвращает */
@media (max-width:1000px){
  input,textarea,select{font-size:16px!important}
}
/* узкие телефоны (≤380px): кнопка «Расчёт за 24 часа» в нижней панели в одну строку */
@media (max-width:380px){
  html body .contact-dock .dock-main{white-space:nowrap;font-size:13px!important;padding-left:14px!important;padding-right:14px!important;gap:8px!important}
}

/* контраст WCAG AA: белый текст на кнопке «Расчёт за 24 часа» (было 4,47:1, стало ~5,5:1) */
html body .dock-main{background:#5457e6!important}

/* ===== Мобильная шкала шрифтов (25.09.2026, по правилам mobile-app-ui-design: мало размеров, ясная иерархия) =====
   11 подписи · 13 мелкий текст · 15 основной · 16 статьи · 17 лид/цитаты · 19 заголовки карточек · 26 разделы/цифры · 30 заголовок страницы.
   Только телефон; первый экран главной (крупный заголовок) и декоративные ленты не трогаем. */
@media (max-width:760px){
  /* 11 — моно-подписи, теги, счётчики */
  html body .eyebrow,html body .tag,html body .ph .tg,html body .pain-l,html body .mock-tag,html body .mc .body .mm span,html body .body>.mm span,
  html body .facts span,html body .team-photo-label span,html body .tbl span,html body .kpi-strip span,html body .cs-th span,html body .calt-num,
  html body .go,html body .ribbon-item,html body .step .k,html body .car-nav .cnt,html body .hero-float-h span,html body .v2-person .tg,
  html body .mono,html body .svc-num,html body .process-step .mono,html body .v3-stat span,html body .fact span,html body .tbl-window{font-size:11px!important;letter-spacing:.08em}
  /* 13 — роли, подписи авторов, метки полей, мелкие ссылки */
  html body .svc-who,html body .team-role,html body .review-co,html body .v2-person span:not(.tg),html body .who span,html body .foot a,html body .foot span,
  html body .footer-badges b,html body .contact-form label,html body .form-agree,html body .footer-col a,html body .footer-links a,html body .cookie-bar p,
  html body .note,html body .crumbs,html body .deck-mini-stat{font-size:13px!important}
  /* 15 — основной текст */
  html body main p:not(.lead):not(.review-quote):not(.fly-chapter):not(.hero-rm-desc):not(.eco):not(.note):not(.tbl-window),html body main li,
  html body .section-copy,html body .calt-task,html body .svc-more p,html body .mc p,html body .hv2-pane p,html body details p,html body .v3-pane p,html body .v2-review p{font-size:15px!important;line-height:1.55!important}
  /* 16 — текст статей блога */
  html body .post p,html body .post li,html body .prose p,html body .prose li{font-size:16px!important;line-height:1.65!important}
  /* 17 — лид под заголовком, цитаты отзывов */
  html body p.lead,html body .hero-rm-desc,html body .review-quote,html body .v2-review p,html body .result p:not(.tbl-window),html body .split-card p.eco{font-size:17px!important;line-height:1.5!important}
  /* 19 — заголовки карточек и шагов */
  html body main h3,html body .svc-title,html body .team-name,html body .v2-person b,html body .mc h3,html body .calt-head,html body summary{font-size:19px!important;line-height:1.2!important}
  /* 26 — заголовки разделов и крупные цифры */
  html body main h2,html body .section-title,html body .kpi-strip strong,html body .facts-row .fact b,html body .v3-stat b,html body .mc .mm strong,html body .body>.mm strong,
  html body .price-card strong,html body .v2-plan .p,html body .proc-n,html body .step .n{font-size:26px!important;line-height:1.1!important}
  html body .mc .mm strong,html body .body>.mm strong{font-size:22px!important}
  /* 30 — заголовок страницы (кроме первого экрана главной) */
  html body main h1:not(.hero-rm-title),html body header h1{font-size:30px!important;line-height:1.08!important;overflow-wrap:break-word}
  /* 15 — значения в паспорте кейса (клиент, ниша, гео): это текст, не цифры */
  html body .facts:not(.facts-row) .fact b{font-size:15px!important;line-height:1.35!important;margin-top:0!important;overflow-wrap:break-word}
}
@media (max-width:760px){
  html body summary{font-size:17px!important}
  /* касания: ссылки в подвале, хлебных крошках и мелкие кнопки не меньше 44px по высоте */
  html body .foot .links a,html body .foot a,html body .crumbs a,html body .footer-link-btn,html body .footer-bottom a{display:inline-block;min-height:44px;line-height:44px!important;padding-top:0!important;padding-bottom:0!important}
  html body .contact-socials a{display:inline-flex!important;align-items:center;min-height:44px;line-height:1.2!important}
  html body .foot .links{row-gap:0!important}
  html body .modal-close{width:44px!important;height:44px!important}
}
@media (max-width:760px){
  html body .v2-hero .v3-hero-grid h1,html body .v2-hero h1{font-size:30px!important;line-height:1.08!important}
  html body main .btn{font-size:15px!important}
}

/* ===== Мобильная дизайн-система: единые токены (25.09.2026) =====
   Края: текст разделов на 24px от края экрана на всех страницах.
   Скругления: 24 — крупные блоки и секции-плиты, 16 — карточки и плитки внутри, 12 — поля ввода, 100 — таблетки.
   Кнопки: 52px высотой. Касания: не меньше 44px. */
@media (max-width:760px){
  html body .btn,html body .hero-rm-pill,html body .hero-rm-ghost,html body a.btn{min-height:52px!important;padding-top:0!important;padding-bottom:0!important;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box}
  html body .form-check{min-height:44px!important;display:inline-flex!important;align-items:center}
  html body .form-agree a,html body .cookie-bar a{display:inline-block;padding:12px 0;margin:-12px 0}
  html body .contact-info-item .val,html body .contact-info-item a,html body .contact-val-msgs a{min-height:44px!important;display:inline-flex!important;align-items:center}
  html body .modal-close{min-width:44px!important;min-height:44px!important}
  html body .svc,html body .v2-logo,html body .v3-stat,html body .row.us,html body .row.bad,html body .v2-price,html body .hv2-pane,html body .v3-pane,html body details,html body .mock-card,html body .prev{border-radius:16px!important}
  html body .form-input,html body input.form-input,html body textarea.form-input{border-radius:12px!important}
}
@media (max-width:760px){html body main .btn,html body main a.btn{height:52px!important}}
/* узкие телефоны: заголовок плиты услуги сжимается с экраном, чтобы длинные слова и обведённые фразы («Таргетированная», «помимо Директа») не выходили за плиту */
@media (max-width:420px){
  html body .v2-hero .v3-hero-grid h1,html body .v2-hero h1,html body main h1:not(.hero-rm-title),html body header h1{font-size:clamp(20px,calc(10.9vw - 14px),30px)!important}
  html body .v3-hero-grid>*{min-width:0}
}
@media (max-width:1180px){html body .nav-cta .btn{display:none !important}}