/* шрифты локально: без запросов к Google (ФЗ-152, трансграничная передача) */
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGHInHEVA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGGInHEVA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGHInHEVA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGGInHEVA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGHInHEVA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGGInHEVA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQUpDg.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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQUpDg.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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQUpDg.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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/sora-xMQbuFFYT72XzQUpDg.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;
}



/* Manrope — единственный шрифт в сборке с настоящей кириллицей (переменный 200–800).
   Bricolage и Sora кириллицу НЕ содержат: их unicode-range только latin/vietnamese,
   поэтому весь русский текст уходил в системный фолбэк и выглядел мыльным. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


  :root{
    /* near-black canvas, tinted toward the teal hue (oklch hue ~178) */
    --bg:#080a0e;--bg-soft:#0e1116;--card:#1a212c;--card-hi:#232c39;
    --line:#3a4753;--line-soft:#2b3542;--text:#eaf3f0;--muted:#c2ccd4;--faint:#aeb9c2;
    --accent:#5ee9d0;--accent-deep:#2bc7ac;--accent-dim:#1c5249;
    --warn:#e0a36b;--loss:#e0716b;--ok:#5ee9d0;
    --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular","Cascadia Code",Consolas,Menlo,monospace;
    --display:"Bricolage Grotesque","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --sans:"Manrope","Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --shadow-soft:0 24px 60px -34px rgba(0,8,6,.92);
    --shadow-deep:0 48px 110px -46px rgba(0,8,6,.96);
    --ease-out-quint:cubic-bezier(.22,1,.36,1);
    --ease-out-expo:cubic-bezier(.16,1,.3,1);
    --ease-fluid:cubic-bezier(.32,.72,0,1);
    --sp-xs:8px;--sp-sm:12px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--sp-2xl:48px;--sp-3xl:72px;--sp-4xl:104px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;font-size:17px;overflow-x:hidden;font-variant-numeric:tabular-nums}
  a{color:inherit;text-decoration:none}
  ::selection{background:rgba(94,233,208,.22);color:#fff}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .skip-link{position:fixed;top:8px;left:8px;z-index:200;padding:10px 14px;border-radius:10px;
    background:var(--accent);color:#03241e;font-family:var(--mono);font-size:13px;font-weight:700;
    transform:translateY(-160%);transition:transform .2s}
  /* 08.09: было .skip-link:focus — мобильные браузеры ставят :focus и по тапу
     (не только с клавиатуры), из-за чего капсула могла мелькать поверх шапки
     при касании (жалоба Сергея «что за дичь кнопка сверху»). :focus-visible
     показывает её только при реальной клавиатурной/скринридерной навигации. */
  .skip-link:focus-visible{transform:translateY(0)}
  /* 08.09 (второй заход): :focus-visible на iOS Safari всё равно поднимал
     капсулу поверх шапки после тапа/возврата на страницу — Сергей прислал
     два скрина. Skip-link нужен клавиатурной навигации, которой на телефоне
     нет: на устройствах без мыши и с грубым указателем убираем его совсем. */
  @media (hover:none) and (pointer:coarse){.skip-link{display:none}}
  .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
  .mono{font-family:var(--mono)}

  /* fixed film-grain — pointer-events none, never on scroll containers */
  .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* scroll reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease-out-quint),transform .45s var(--ease-out-quint)}
  .reveal.in{opacity:1;transform:none}

  /* ===== fluid island nav ===== */
  .nav-shell{position:sticky;top:0;z-index:40;padding-top:18px;pointer-events:none}
  /* Логотип с двумя строками и подписью шире прежнего — навигации нужен свой
     контейнер, иначе меню упирается в кнопку. Текстовый .wrap остаётся 1180. */
  .nav-shell .wrap{max-width:1300px}
  nav{pointer-events:auto;max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
    background:rgba(11,17,15,.66);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--line);border-radius:100px;padding:9px 9px 9px 22px;box-shadow:0 18px 50px -30px rgba(0,8,6,.9)}
  /* Логотип: знак — три пластины конвейера, название двумя строками с наездом
     (латиница светлым → бирюзовым, кириллица обратным ходом цвета), подпись
     справа за линией — блок растёт в длину, а не в высоту. */
  .logo{display:flex;align-items:center;gap:12px}
  .logo svg{width:36px;height:36px;display:block;flex-shrink:0}
  .logo-lock{display:flex;flex-direction:column;font-family:var(--display);letter-spacing:-.02em;line-height:1}
  .logo-en,.logo-ru{white-space:nowrap}
  .logo-en{font-size:18px}
  .logo-ru{font-size:12.5px;margin-top:.1em}
  .logo-lock i{font-style:normal}
  .logo-en .w1{font-weight:200;color:#eaf3f0}.logo-en .w2{font-weight:300;color:#eaf3f0}
  .logo-en .w3{font-weight:400;color:#eaf3f0}.logo-en .w4{font-weight:500;color:#dff7f1}
  .logo-en .w5{font-weight:600;color:#a9f0e0}.logo-en .w6{font-weight:700;color:#7cebd8}
  .logo-en .w7{font-weight:800;color:var(--accent)}
  .logo-ru .w1{font-weight:200;color:var(--accent)}.logo-ru .w2{font-weight:300;color:var(--accent)}
  .logo-ru .w3{font-weight:400;color:var(--accent)}.logo-ru .w4{font-weight:500;color:#7cebd8}
  .logo-ru .w5{font-weight:600;color:#a9f0e0}.logo-ru .w6{font-weight:700;color:#dff7f1}
  .logo-ru .w7{font-weight:800;color:#eaf3f0}
  .logo-tag{font-family:var(--sans);font-weight:400;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
    line-height:1.7;color:var(--muted);padding-left:11px;border-left:1px solid var(--line);white-space:nowrap}
  @media(max-width:1180px){.logo-tag{display:none}}
  .nav-links{display:flex;gap:17px;font-size:13.5px;color:#b9c3cc;white-space:nowrap}
  .nav-links a{position:relative;white-space:nowrap;transition:color .25s var(--ease-out-quint)}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .35s var(--ease-out-quint)}
  .nav-links a:hover{color:var(--text)}
  .nav-links a:hover::after{right:0}
  .nav-links a[aria-current="page"]{color:var(--accent)}
  .nav-links a[aria-current="page"]::after{right:0;box-shadow:0 0 10px rgba(94,233,208,.5)}
  .nav-help{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin-right:8px;border:1px solid var(--line);border-radius:10px;color:var(--muted);transition:border-color .25s,background .25s,color .25s}
  .nav-help svg{width:17px;height:17px}
  .nav-help:hover{border-color:rgba(94,233,208,.45);background:rgba(94,233,208,.06);color:var(--accent)}
  .nav-help[aria-current="page"]{border-color:rgba(94,233,208,.58);background:rgba(94,233,208,.1);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(94,233,208,.08)}
  .nav-help:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media(max-width:820px){.nav-help{display:none}}
  .nav-cta{pointer-events:auto;font-family:var(--mono);font-size:13px;background:var(--accent);color:#03241e;font-weight:600;
    padding:11px 20px;border-radius:100px;transition:transform .35s var(--ease-fluid),box-shadow .35s var(--ease-fluid);
    box-shadow:0 0 0 0 rgba(94,233,208,.4),0 14px 30px -16px rgba(46,199,172,.6);display:inline-flex;align-items:center;gap:9px}
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(94,233,208,.1),0 20px 40px -18px rgba(46,199,172,.7)}
  .nav-cta:active{transform:scale(.97)}
  @media(max-width:820px),(max-height:500px){.nav-links{display:none}.nav{padding-left:18px}}
  /* На телефоне плотность шапки держалась только на backdrop-filter: в мобильных
     браузерах он слабее, и при прокрутке текст страницы читался прямо сквозь
     капсулу меню (скрин Сергея 08.09.2026). Фон делаем почти непрозрачным, а
     полосу над капсулой закрываем градиентом цвета страницы — иначе строки
     мелькают в зазоре сверху. */
  @media(max-width:820px){
    nav{background:rgba(9,14,12,.97)}
    .nav-shell::before{content:"";position:absolute;inset:0 0 auto;height:calc(100% + 26px);
      background:linear-gradient(180deg,var(--bg) 0,var(--bg) 62%,rgba(3,5,8,0) 100%);z-index:-1;pointer-events:none}
  }

  /* ===== hero ===== */
  .hero{position:relative;padding:88px 0 96px;overflow:hidden;isolation:isolate}
  .hero::before{content:"";position:absolute;z-index:-3;inset:0;background:radial-gradient(1100px 620px at 68% -6%,rgba(94,233,208,.10),transparent 60%),radial-gradient(760px 520px at 8% 18%,rgba(99,102,241,.08),transparent 62%),radial-gradient(900px 700px at 50% 120%,rgba(43,199,172,.06),transparent 60%);pointer-events:none}
  .hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 50% 40%,transparent 58%,rgba(3,5,8,.55) 100%)}
  .hero-orb{position:absolute;z-index:-2;border-radius:50%;filter:blur(8px);pointer-events:none}
  /* декоративные пятна не должны расширять страницу — иначе на телефоне ползунок вбок */
  html,body{overflow-x:clip}
  .hero,#services,#oneoff,#cases,#content{overflow-x:clip}
  .orb-a{top:-240px;right:-180px;width:820px;height:820px;background:radial-gradient(circle,rgba(46,199,172,.22),transparent 60%);mix-blend-mode:screen;filter:blur(14px);animation:drift 22s ease-in-out infinite alternate}
  .orb-b{top:180px;left:-280px;width:640px;height:640px;background:radial-gradient(circle,rgba(99,102,241,.14),transparent 62%);mix-blend-mode:screen;filter:blur(16px);animation:drift 28s ease-in-out infinite alternate-reverse}
  @keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(40px,-30px,0)}}
  .hero-grid-bg{position:absolute;inset:0;z-index:-1;
    background-image:linear-gradient(rgba(94,233,208,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(94,233,208,.025) 1px,transparent 1px);
    background-size:56px 56px;mask:radial-gradient(ellipse 85% 65% at 62% 8%,#000,transparent 76%);-webkit-mask:radial-gradient(ellipse 85% 65% at 62% 8%,#000,transparent 76%)}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
  .hero-grid>*{min-width:0}
  @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:52px}}

  .tag{font-family:var(--mono);font-size:11.5px;color:var(--accent);border:1px solid var(--line);background:rgba(94,233,208,.04);
    padding:7px 8px 7px 14px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;letter-spacing:.02em}
  .tag .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(94,233,208,.6);animation:pulse 2.6s var(--ease-out-quint) infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,233,208,.5)}70%{box-shadow:0 0 0 9px rgba(94,233,208,0)}100%{box-shadow:0 0 0 0 rgba(94,233,208,0)}}
  h1{font-family:var(--display);font-size:clamp(27px,3vw,38px);line-height:1.14;letter-spacing:-.02em;font-weight:600;max-width:30ch;text-wrap:pretty}
  h1 em{font-style:normal;color:var(--accent)}
  .sub{color:var(--muted);font-size:clamp(16px,1.6vw,18.5px);margin-top:26px;max-width:52ch;text-wrap:pretty}
  .cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
  .btn{font-family:var(--mono);font-size:14px;font-weight:600;border-radius:100px;cursor:pointer;border:1px solid transparent;
    display:inline-flex;align-items:center;gap:6px;transition:transform .35s var(--ease-fluid),box-shadow .35s var(--ease-fluid),background .3s,border-color .25s,color .25s}
  .btn:active{transform:scale(.98)}
  /* 27.08: чистый --accent на большой заливке бил по глазам («едкий цвет»).
     Кнопка получает приглушённый градиент того же тона, текст — темнее для контраста. */
  /* контраст текста поднят с 6.25:1 до 7.8:1 по нижней точке градиента (замер WCAG 27.08) */
  .btn-primary{background:linear-gradient(180deg,#5ad7c0,#43bda6);color:#00140f;font-weight:700;padding:7px 7px 7px 22px;
    box-shadow:0 16px 36px -24px rgba(46,199,172,.55)}
  .btn-primary .ring{width:30px;height:30px;border-radius:50%;background:rgba(0,20,15,.20);display:inline-flex;align-items:center;justify-content:center;
    transition:transform .4s var(--ease-fluid),background .3s}
  .btn-primary:hover{transform:translateY(-1px);background:linear-gradient(180deg,#5fdcc6,#46c1aa);
    box-shadow:0 22px 48px -24px rgba(46,199,172,.6)}
  .btn-primary:hover .ring{transform:translate(3px,-1px) scale(1.06);background:rgba(3,36,30,.22)}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--text);padding:14px 24px}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(94,233,208,.04)}
  /* Первый экран: обе кнопки одного размера, левый край по тексту, у каждой свой значок в кружке (Сергей, 27.08.2026) */
  /* Плашка-подпись переехала из левой колонки на верх правой, над терминалом (Сергей, 27.08.2026) */
  .hero-visual{position:relative}
  .hero-visual .tag{position:absolute;top:-84px;left:0;margin:0;display:inline-flex}
  @media (max-width:820px){.hero-visual .tag{position:static;margin:0 0 14px}}
  .hero .cta-row .btn{min-width:246px;justify-content:space-between;
    transition:transform .4s var(--ease-fluid),box-shadow .4s var(--ease-fluid),border-color .3s,background .3s,color .3s}
  .hero .cta-row .btn:hover{transform:translateY(-4px)}
  .hero .cta-row .btn-primary:hover{box-shadow:0 26px 54px -28px rgba(46,199,172,.6)}
  .hero .cta-row .btn-ghost:hover{border-color:var(--accent);color:var(--accent);
    background:rgba(94,233,208,.07);box-shadow:0 30px 60px -34px rgba(94,233,208,.6)}
  .hero .cta-row .btn:hover .ring{transform:translate(3px,-3px) scale(1.06)}
  .hero .cta-row .btn-ghost{padding:7px 7px 7px 22px}
  .hero .cta-row .btn-ghost .ring{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s ease,border-color .3s ease}
  .hero .cta-row .btn-ghost:hover .ring{border-color:var(--accent);transform:translateY(-1px)}
  .hero-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
  .hero-path{min-width:0;border:1px solid var(--line-soft);border-radius:14px;padding:13px 14px;background:rgba(17,25,23,.72);
    transition:border-color .25s,background .25s,transform .35s var(--ease-fluid)}
  .hero-path:hover{border-color:var(--accent);background:var(--card-hi);transform:translateY(-1px)}
  .hero-path b{display:block;font-family:var(--display);font-size:14px;color:var(--text);margin-bottom:4px}
  .hero-path span{display:block;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--faint)}
  .hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:50px;gap:0 22px;align-items:start}
  .hero-meta div{padding-right:22px;border-right:1px solid var(--line-soft);font-family:var(--mono);font-size:12.5px;color:var(--faint);min-width:0;overflow-wrap:anywhere}
  .hero-meta div:last-child{border-right:0;padding-right:0}
  @media(max-width:520px){
    .hero-meta{grid-template-columns:1fr;gap:0}
    .hero-meta div{padding:0 0 12px;margin:0 0 12px;border-right:0;border-bottom:1px solid var(--line-soft)}
    .hero-meta div:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
  }
  .hero-meta b{color:var(--text);font-weight:600;font-size:22px;display:block;font-family:var(--display);letter-spacing:-.02em;margin-bottom:3px}

  /* ===== hero visual: double-bezel terminal + nodes ===== */
  .hero-visual{position:relative}
  .bezel{background:rgba(94,233,208,.03);border:1px solid var(--line);border-radius:24px;padding:7px;box-shadow:var(--shadow-deep)}
  .term{background:linear-gradient(180deg,#0c1311,#080d0c);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;font-family:var(--mono);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.04)}
  .term-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.01)}
  .term-bar .d{width:10px;height:10px;border-radius:50%}
  .d.r{background:#e0716b}.d.a{background:#e0a36b}.d.g{background:#5ee9d0}
  .term-title{margin-left:9px;font-size:11.5px;color:var(--faint)}
  .term-title .live{color:var(--accent)}
  .term-body{padding:16px 18px 18px;font-size:12.5px;line-height:2}
  .term-body .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px)}
  .term-body.run .ln{animation:lnIn .5s var(--ease-out-quint) forwards}
  .term-body.run .ln:nth-child(1){animation-delay:.20s}
  .term-body.run .ln:nth-child(2){animation-delay:.55s}
  .term-body.run .ln:nth-child(3){animation-delay:.90s}
  .term-body.run .ln:nth-child(4){animation-delay:1.25s}
  .term-body.run .ln:nth-child(5){animation-delay:1.60s}
  .term-body.run .ln:nth-child(6){animation-delay:1.95s}
  @keyframes lnIn{to{opacity:1;transform:none}}
  .term-body .mt{color:var(--faint)}
  .term-body .sym{color:#cfe0db}
  .term-body .long{color:var(--accent)}
  .term-body .short{color:var(--warn)}
  .term-body .pos{color:var(--accent)}
  .term-body .neg{color:var(--loss)}
  .term-body .cmt{color:#3f4d49}
  .cursor{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1.1s steps(1) infinite;border-radius:1px}
  @keyframes blink{50%{opacity:0}}

  .float-card{position:absolute;font-family:var(--mono);font-size:11.5px;background:rgba(15,22,20,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line);border-radius:14px;padding:11px 14px;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:9px;color:var(--muted)}
  .float-card b{font-weight:600;color:var(--text)}
  .float-card .ico{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .fc-news{left:-22px;bottom:-18px;animation:bob 7s var(--ease-out-quint) infinite reverse}
  .fc-news .ico{background:var(--accent);box-shadow:0 0 10px var(--accent)}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @media(max-width:540px){.float-card{display:none}}
  @media(max-width:520px){.term-body{font-size:12px;line-height:1.85}.term{overflow-x:hidden}}

  /* ===== section scaffolding ===== */
  section{padding:var(--sp-4xl) 0;position:relative}
  section+section{border-top:1px solid var(--line-soft)}
  .eyebrow{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center}
  h2{font-family:var(--display);font-size:clamp(21px,2.3vw,30px);letter-spacing:-.02em;font-weight:600;max-width:none;text-wrap:balance;line-height:1.15}
  /* Сергей 27.08: тексты не должны стоять «на пол страницы» — вводные идут во всю ширину блока */
  .lead{color:var(--muted);margin-top:18px;max-width:none;text-wrap:pretty}

  /* ===== services — asymmetric bento ===== */
  .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:50px}
  /* ===== «Что делаем»: 16 карточек не должны быть портянкой ===== */
  #services .bento{align-items:start}
  /* свечение под карточными секциями — общий приём, а не эффект одной секции */
  #services,#oneoff,#cases,#content{position:relative;isolation:isolate}
  #services::before,#services::after,#oneoff::before,#cases::before,#content::before{
    content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(150px);pointer-events:none}
  #services::before{width:560px;height:560px;left:-6%;top:22%;background:rgba(94,233,208,.17)}
  #services::after{width:520px;height:520px;right:-4%;top:46%;background:rgba(62,138,214,.13)}
  #oneoff::before{width:520px;height:520px;right:-6%;top:18%;background:rgba(94,233,208,.13)}
  #cases::before{width:540px;height:540px;left:-8%;top:26%;background:rgba(62,138,214,.12)}
  #content::before{width:500px;height:500px;right:-5%;top:30%;background:rgba(94,233,208,.11)}
  #services .card-core{padding:20px 20px 18px}
  /* значок и заголовок — одной строкой, без дыры между ними */
  #services .card-core{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-content:start;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -28px rgba(0,0,0,.9)}
  #services .card:hover .card-core{border-color:rgba(94,233,208,.45)}
  .card:focus-within .card-core{border-color:rgba(94,233,208,.5)}
  .card-add:focus-visible,.more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  /* нижняя плашка — один ряд: слева служебная строка, справа кнопка */
  #services .card .out{display:flex;align-items:center;gap:12px;justify-content:space-between}
  #services .card .out-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #services .card-add{flex:0 0 auto;margin:0;min-height:30px;padding:6px 12px;font-size:11.5px;
    align-self:center;white-space:nowrap}
  #services .card-core>*{grid-column:1/-1}
  #services .card-ico{grid-column:1;grid-row:1;width:46px;height:46px;border-radius:13px;margin:0;align-self:center}
  #services .card-ico svg{width:24px;height:24px}
  #services .card-core h3{grid-column:2;grid-row:1;margin:0;line-height:1.28;align-self:center}
  #services .card-core p{margin-top:14px}
  #services .card-core p{font-size:14.5px;line-height:1.62;margin:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #services .card.open .card-core p{-webkit-line-clamp:unset;overflow:visible}
  #services .card{cursor:pointer}
  .card-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 0;
    min-height:32px;border:0;background:transparent;color:#9df4e4;cursor:pointer;
    font-family:var(--mono);font-size:12px}
  .card-more:hover{color:var(--accent)}
  .card-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  @media(max-width:640px){.card-more{min-height:44px}}

  /* Длинные каталожные карточки: одинаковый короткий обзор, полный текст — по запросу. */
  #works .card.has-more .card-core p{
    flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  #works .card.has-more.open .card-core p{
    display:block;overflow:visible}
  #content .card.has-summary .card-core p{flex:none;display:block;overflow:visible}
  #content .card-copy-details[hidden]{display:none}
  #content .bento:not(:has(.card.open)){grid-auto-rows:1fr}
  #works .card.has-more .card-more,#content .card.has-more .card-more{
    order:1;margin:10px 0 14px;min-height:44px}
  #works .card.has-more .out,#content .card.has-more .out{order:2;margin-top:auto}

  #services .bento:not(.all)>.card:nth-of-type(n+7){display:none}
  @media(max-width:640px){
    #services .bento:not(.all)>.card:nth-of-type(n+5){display:none}
    #services .card-add{min-height:44px;padding:11px 16px;font-size:12.5px}
    .more-btn{min-height:44px}}
  .more-row{display:flex;justify-content:center;margin-top:26px}
  .more-btn{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--text);
    background:var(--card);border:1px solid var(--line);border-radius:999px;padding:11px 22px;cursor:pointer;
    transition:border-color .25s,background .25s,color .25s}
  .more-btn:hover{border-color:var(--accent);color:var(--accent)}
  .bento>*{min-width:0}
  .card{position:relative;background:rgba(94,233,208,.025);border:1px solid var(--line);border-radius:22px;padding:7px;overflow:hidden;
    transition:transform .5s var(--ease-fluid),border-color .4s,box-shadow .5s var(--ease-fluid)}
  .card-core{position:relative;background:linear-gradient(180deg,var(--card-hi),var(--card));border:1px solid var(--line-soft);border-radius:16px;
    padding:24px;box-shadow:inset 0 1px 1px rgba(255,255,255,.03);height:100%;display:flex;flex-direction:column;overflow:hidden}
  .card-core::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s;
    pointer-events:none;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(94,233,208,.12),transparent 44%)}
  .card:hover{transform:translateY(-4px);border-color:#2f413d;box-shadow:var(--shadow-soft)}
  .card:hover .card-core::before{opacity:1}
  .card-ico{position:relative;width:56px;height:56px;border:1px solid rgba(94,233,208,.24);border-radius:15px;
    background:linear-gradient(155deg,rgba(94,233,208,.16),rgba(94,233,208,.03));
    box-shadow:inset 0 1px 0 rgba(94,233,208,.14),0 8px 22px -12px rgba(46,199,172,.5);
    display:flex;align-items:center;justify-content:center;margin-bottom:20px;
    transition:box-shadow .4s,border-color .4s,transform .4s var(--ease-fluid)}
  .card:hover .card-ico{transform:translateY(-2px);border-color:rgba(94,233,208,.4);
    box-shadow:inset 0 1px 0 rgba(94,233,208,.22),0 12px 30px -12px rgba(46,199,172,.75)}
  .card-ico svg{width:32px;height:32px;display:block}
  .card-ico svg [data-draw]{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);transition:stroke-dashoffset .9s var(--ease-out-quint)}
  .card.in .card-ico svg [data-draw]{stroke-dashoffset:0}
  .card h3{font-family:var(--display);font-size:19px;margin-bottom:9px;font-weight:600;letter-spacing:-.015em}
  .card p{color:#c5ced6;font-size:14.5px;flex:1;line-height:1.6}
  .card .out{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin:18px -24px -24px;padding:13px 24px;
    border-top:1px solid var(--line-soft);background:rgba(0,0,0,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .out .ok{color:var(--accent)}.card .out .bad{color:var(--loss)}.card .out .mt{color:#3f4d49}
  /* доказательства, калькулятор, FAQ */
  .lead-note{font-size:13px;line-height:1.6;color:var(--faint);margin-top:16px;max-width:none;
    padding-left:14px;border-left:1px solid var(--line-soft)}
  .shot-wrap{position:relative;display:block}
  .shot-badge{position:absolute;left:14px;bottom:26px;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--text);background:rgba(8,10,14,.75);border:1px solid var(--line);border-radius:100px;padding:4px 10px 4px 8px;backdrop-filter:blur(6px)}
  .shot-badge svg{width:9px;height:9px;fill:var(--accent)}
  @media(max-width:860px){.card .out{white-space:normal;overflow:visible;text-overflow:clip}}
  .honest{border:1px solid var(--line);border-radius:22px;padding:28px 30px;background:linear-gradient(180deg,rgba(94,233,208,.04),transparent)}
  .honest p{color:var(--muted);max-width:none;margin:10px 0 0}
  .honest a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(94,233,208,.4)}
  .shot{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin-bottom:14px;background:#05070a}
  /* снимки продуктов открываются крупно и не выбиваются светлым пятном из тёмной сетки */
  /* яркость снимков НЕ трогаем: фильтр добивал и без того тёмные кадры (ролик уходил в чёрный) */
  #proof .shot{cursor:zoom-in;transition:transform .25s var(--ease-fluid)}
  #proof .bento{align-items:start}
  #proof .shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  /* все кадры раздела одного формата — иначе карточки в ряду встают неровно */
  #proof .shot{aspect-ratio:1520/940;object-fit:contain;background:#0b0f15}
  .lightbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
    padding:32px;background:rgba(4,6,9,.9);backdrop-filter:blur(6px);cursor:zoom-out}
  .lightbox.on{display:flex}
  .lightbox img{max-width:min(1180px,94vw);max-height:88vh;border-radius:14px;border:1px solid var(--line);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
  .lightbox-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--muted);
    font-family:var(--mono);font-size:12.5px;padding:0 24px}
  .card .shot+h3{margin-top:0}
  .calc{border:1px solid var(--line);border-radius:22px;padding:30px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
  .calc-controls label{display:block;margin-bottom:18px;font-size:14px;color:var(--muted)}
  .calc-controls .row{display:flex;align-items:center;gap:14px;margin-top:8px}
  .calc-controls input[type=range]{flex:1;min-height:44px;accent-color:var(--accent);cursor:pointer;touch-action:manipulation}
  .calc-controls output{min-width:3.2em;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
  .calc-out{text-align:center;border:1px solid var(--line);border-radius:16px;padding:26px 18px;background:rgba(94,233,208,.03)}
  .calc-out b{display:block;font-size:38px;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
  .calc-out span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
  .calc-out .formula{margin-top:14px;font-family:var(--mono,monospace);font-size:11.5px;color:var(--muted)}
  @media(max-width:860px){.calc{grid-template-columns:1fr}}
  .faq details{border:1px solid var(--line);border-radius:14px;padding:0 20px;margin-bottom:10px;background:rgba(255,255,255,.012)}
  .faq summary{cursor:pointer;padding:18px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';color:var(--accent);font-weight:400;font-size:20px;line-height:1}
  .faq details[open] summary::after{content:'–'}
  .faq details p{margin:0 0 20px;color:var(--muted);max-width:none}
  .c-7{grid-column:span 7}.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-4{grid-column:span 4}.c-12{grid-column:span 12}
  @media(max-width:860px){.c-7,.c-5,.c-6,.c-4,.c-12{grid-column:span 12}}

  /* svg icon strokes */
  .ic-stroke{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ic-faint{fill:none;stroke:#cfe9e2;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.34}
  .ic-fill{fill:var(--accent)}

  /* ===== cases ===== */
  .cases-wrap{margin-top:46px;display:flex;flex-direction:column;gap:18px}
  .case{position:relative;background:rgba(94,233,208,.02);border:1px solid var(--line);border-radius:24px;padding:7px;overflow:hidden}
  .case-core{background:linear-gradient(180deg,var(--bg-soft),var(--card));border:1px solid var(--line-soft);border-radius:18px;padding:30px 32px;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.025)}
  .case-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
  .case-num{font-family:var(--mono);color:var(--accent);font-size:12.5px;border:1px solid var(--line);border-radius:9px;padding:5px 10px}
  .case h3{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.015em}
  .ba{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
  @media(max-width:680px){.ba{grid-template-columns:1fr}}
  .ba > .panel{padding:20px;border-radius:14px;border:1px solid var(--line)}
  .was{background:rgba(224,163,107,.04)}.now{background:rgba(94,233,208,.05)}
  .ba .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:7px}
  .was .lbl{color:var(--warn)}.now .lbl{color:var(--accent)}
  .ba .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .ba p{font-size:14.5px;color:var(--text);line-height:1.6;font-weight:400}
  .ba-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent)}
  .ba-arrow svg{width:26px;height:26px}
  @media(max-width:680px){.ba-arrow{transform:rotate(90deg);padding:2px 0}}
  .applies{font-size:13.5px;color:var(--faint);margin-top:22px;line-height:1.55}
  .applies b{color:var(--muted);font-weight:600}

  /* ===== offer ===== */
  .offer{display:grid;grid-template-columns:1.18fr .82fr;gap:44px;align-items:start;margin-top:36px}
  @media(max-width:860px){.offer{grid-template-columns:1fr;gap:30px}}
  .steps{counter-reset:s}
  .step{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-soft)}
  .step:last-child{border-bottom:0}
  /* 27.08: в узкой колонке бокс схлопывался до 7px и «01» разрывалось на две строки.
     Сергей: цифру крупнее, ведущий ноль убрать. */
  .step .n{counter-increment:s;font-family:var(--display);color:var(--accent);font-size:30px;font-weight:700;
    line-height:1;letter-spacing:-.02em;padding-top:1px;flex:0 0 auto;white-space:nowrap}
  .step .n::before{content:counter(s);display:inline-block;white-space:nowrap}
  .step b{font-weight:600;font-family:var(--display);font-size:17px;letter-spacing:-.01em}
  .step span{color:var(--muted);font-size:14.5px;display:block;margin-top:5px;font-weight:400}
  .price{position:sticky;top:104px;background:rgba(94,233,208,.025);border:1px solid var(--line);border-radius:22px;padding:7px;box-shadow:var(--shadow-soft)}
  .price-core{background:linear-gradient(180deg,var(--card-hi),var(--card));border:1px solid var(--line-soft);border-radius:16px;padding:24px;box-shadow:inset 0 1px 1px rgba(255,255,255,.03)}
  .price-row{display:flex;justify-content:space-between;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line-soft)}
  .price-row:last-child{border-bottom:0;padding-bottom:0}
  .price-row:first-child{padding-top:0}
  .price-row .v{font-family:var(--mono);color:var(--accent);font-weight:600;white-space:nowrap;padding-left:16px;font-size:14.5px}
  .price-row .k b{font-weight:600;font-family:var(--display);font-size:16px;letter-spacing:-.01em}
  .price-row .k span{display:block;color:var(--faint);font-size:12.5px;margin-top:3px;font-family:var(--mono)}

  /* ===== boundaries ===== */
  .bound{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
  @media(max-width:680px){.bound{grid-template-columns:1fr}}
  .bound .col{background:var(--bg-soft);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
  .bound .col.yes{background:linear-gradient(180deg,rgba(94,233,208,.045),rgba(94,233,208,.012))}
  .bound ul{list-style:none}
  .bound li{padding:10px 0;font-size:14.5px;display:flex;gap:13px;align-items:flex-start;font-weight:400}
  .bound li+li{border-top:1px solid var(--line-soft)}
  .bound .mark{font-family:var(--mono);font-weight:700;flex-shrink:0;font-size:15px;line-height:1.5;width:16px}
  .yes .mark{color:var(--accent)}.no .mark{color:var(--warn)}
  .bound h3{font-size:12px;font-family:var(--mono);margin-bottom:14px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

  /* ===== contact ===== */
  /* 27.08: секция обращения выровнена по левому краю, как остальные (надзаголовки везде слева) */
  .contact{text-align:left;overflow:hidden}
  .contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 58% 110% at 50% 0,rgba(46,199,172,.12),transparent 64%)}
  .contact h2{margin:0}.contact .lead{margin:18px 0 0}.contact .cta-row{justify-content:flex-start}
  .contact .note{margin-top:22px;color:var(--faint);font-size:13px;line-height:1.7;font-family:var(--sans);
    max-width:640px;margin-left:auto;margin-right:auto}

  /* ===== footer ===== */
  footer{border-top:1px solid var(--line-soft);padding:48px 0;color:var(--faint);font-size:14px}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
  .disclaimer{margin-top:24px;font-size:12.5px;color:var(--faint);line-height:1.65;font-weight:500}
  .requisites{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--faint);line-height:1.7;font-weight:500}
  .requisites p{margin:0 0 2px}
  .requisites b{color:#8b98a3;font-weight:500}
  .requisites a{color:#8b98a3;text-decoration:none;border-bottom:1px solid var(--line)}
  .requisites a:hover{color:var(--accent)}

  @media(prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
    .reveal{opacity:1;transform:none;filter:none}
    .term-body .ln{opacity:1;transform:none}
    .card .card-ico svg [data-draw]{stroke-dashoffset:0}
    .card:hover{transform:none}
    .orb-a,.orb-b,.fc-news,.pulse,.cursor{animation:none !important}
  }

  /* Форма заявки. До 24.08 на странице не было ни одной формы: все CTA вели на
     mailto, а MX у домена не настроен — оставить заявку было физически нечем. */
  .lead-form{max-width:560px;margin:34px auto 0;text-align:left}
  .lead-form .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
  .lead-form .row>*{flex:1 1 200px}
  .lead-form label{display:block;font-family:var(--mono);font-size:12.5px;color:#b9c3cc;margin:0 0 7px;letter-spacing:.02em}
  .lead-form input::placeholder,.lead-form textarea::placeholder{color:#8d99a3}
  .lead-form input,.lead-form textarea{width:100%;background:var(--card-hi);color:var(--text);border:1px solid #3a4550;
    border-radius:14px;padding:13px 16px;font-family:var(--sans);font-size:16px;transition:border-color .25s,background .25s}
  .lead-form textarea{min-height:104px;resize:vertical}
  .lead-form input:focus,.lead-form textarea:focus{border-color:var(--accent);background:var(--card-hi)}
  .lead-form input:focus:not(:focus-visible),.lead-form textarea:focus:not(:focus-visible){outline:none}
  .lead-form input:focus-visible,.lead-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .lead-form .field{margin-bottom:14px}
  .field-note{font-size:12.5px;line-height:1.5;color:var(--faint);margin:7px 2px 0}
  .lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .lead-form .submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
  .consent-row{display:flex;gap:11px;align-items:flex-start;margin:18px 0 4px;font-size:14px;color:var(--muted);line-height:1.55;cursor:pointer}
  .consent-row input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
  .consent-row a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .lead-form .form-msg{font-family:var(--mono);font-size:13px;min-height:19px}
  .lead-form .form-msg.err{color:var(--loss)}
  .lead-form .form-msg.ok{color:var(--accent)}
  .lead-form button[disabled]{opacity:.55;cursor:progress}

  /* Канал связи: выбор одним кликом, необязательный — контакт можно оставить и без него
     (иначе форма теряет заявки от тех, кто просто вписал почту). Пилюли повторяют .pk-opt. */
  .lf-channel-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
  .lf-channel-opt{cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:100px;
    padding:11px 16px;min-height:44px;color:var(--text);font-family:var(--sans);font-size:13.5px;
    transition:border-color .2s,background .2s,color .2s}
  .lf-channel-opt:hover{border-color:var(--accent);color:var(--accent)}
  .lf-channel-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#03241e;font-weight:600}
  #lf-contact-hint.warn{color:var(--warn)}


  /* Два входа и подборщик: холодному посетителю нужен вход «не знаю, с чего начать»,
     иначе шестнадцать направлений подряд читаются как «делаем всё» и выбор встаёт. */
  .entry-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .entry{flex:1 1 240px;display:block;text-align:left;cursor:pointer;
    background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;color:var(--text);
    font-family:var(--sans);font-size:14.5px;transition:border-color .25s,background .25s,transform .35s var(--ease-fluid)}
  .entry:hover{border-color:var(--accent);background:var(--card-hi);transform:translateY(-1px)}
  .entry b{display:block;font-size:15px;margin-bottom:2px}
  .entry span{color:var(--faint);font-size:12.5px;font-family:var(--mono)}
  .picker{max-width:760px;margin:0 auto}
  .pk-lead{font-family:var(--sans);font-size:14.5px;color:var(--muted);margin:0 0 20px}
  .pk-prog{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
  .pk-back{display:block;margin-top:16px;background:transparent;border:0;cursor:pointer;color:var(--faint);
    font-family:var(--mono);font-size:12.5px;padding:6px 0}
  .pk-back:hover{color:var(--accent)}
  .pk-q{margin-bottom:26px}
  .pk-q>p{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin:0 0 10px;letter-spacing:.02em}
  .pk-opts{display:flex;gap:10px;flex-wrap:wrap}
  .pk-opt{cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:100px;
    padding:10px 18px;color:var(--text);font-family:var(--sans);font-size:14px;transition:border-color .2s,background .2s,color .2s}
  .pk-opt:hover{border-color:var(--accent);color:var(--accent)}
  .pk-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#03241e;font-weight:600}
  .pk-head{display:flex;justify-content:flex-end;margin-bottom:14px}
  .pk-reset{font-family:var(--mono);font-size:12.5px;color:var(--muted);background:transparent;
    border:1px solid var(--line-soft);border-radius:100px;padding:8px 16px;cursor:pointer;min-height:44px;
    transition:color .2s,border-color .2s}
  .pk-reset:hover{color:var(--text);border-color:var(--line)}
  .pk-result{margin-top:8px}
  .pk-hit{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--accent);
    border-radius:16px;padding:18px 22px;margin-bottom:12px}
  .pk-hit b{display:block;font-size:16px;margin-bottom:6px}
  .pk-limit{border-left-color:var(--warn)}
  .pk-limit b{color:var(--warn)}
  .pk-hit p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
  .pk-note{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:14px}
  /* Конструктор запроса: человек собирает состав работ сам и видит его словами,
     чтобы на разбор прийти со сформулированной задачей, а не с «надо что-то с ИИ». */
  .bld{margin-top:34px;border-top:1px solid var(--line-soft);padding-top:28px}
  .bld h3{font-family:var(--display);font-size:23px;margin:0 0 6px}
  .bld>p.sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}
  .bld-grp{margin-bottom:22px}
  .bld-grp>p{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin:0 0 10px;letter-spacing:.02em}
  .bld-opts{display:flex;gap:10px;flex-wrap:wrap}
  .bld-chip{cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:100px;
    padding:9px 16px;color:var(--text);font-family:var(--sans);font-size:13.5px;transition:border-color .2s,background .2s,color .2s}
  .bld-chip:hover{border-color:var(--accent);color:var(--accent)}
  .bld-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#03241e;font-weight:600}
  .bld-chip{min-height:44px}
  .bld-more{border-style:dashed;color:var(--faint)}
  .bld-out{background:var(--card-hi);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-top:8px}
  .bld-out .eyebrow{margin-bottom:12px}
  .bld-out ul{margin:0 0 14px;padding-left:20px;color:var(--text);font-size:14.5px;line-height:1.7}
  .bld-out p.meta{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.6}
  .bld-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .bld-copied{font-family:var(--mono);font-size:12.5px;color:var(--accent)}
  .card-add{position:relative;z-index:2;margin-top:14px;align-self:flex-start;width:fit-content;cursor:pointer;
    background:transparent;border:1px solid var(--line);border-radius:100px;padding:12px 18px;min-height:44px;
    color:var(--muted);font-family:var(--mono);font-size:12.5px;transition:border-color .2s,color .2s,background .2s}
  .card-add.on{border-color:var(--accent);color:var(--accent);background:rgba(94,233,208,.08)}
  /* Плашка выбора: человек продолжает читать услуги, а счётчик и переход
     к сборке всегда под рукой — вместо прыжка на 17 000 px вниз. */
  .dock{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);z-index:60;
    display:flex;align-items:center;gap:16px;background:rgba(14,17,22,.94);border:1px solid var(--line);
    border-radius:100px;padding:10px 12px 10px 22px;box-shadow:var(--shadow-deep);
    backdrop-filter:blur(10px);transition:transform .45s var(--ease-fluid),opacity .3s;opacity:0}
  .dock.on{transform:translate(-50%,0);opacity:1}
  .dock-n{font-family:var(--mono);font-size:13px;color:var(--text);white-space:nowrap}
  .dock .btn{padding:10px 20px}
  @media(max-width:520px){.dock{left:12px;right:12px;transform:translateY(140%);width:auto;justify-content:space-between}
    .dock.on{transform:translateY(0)}}
  .card-add:hover{border-color:var(--accent);color:var(--accent);background:rgba(94,233,208,.05)}

  /* ===== calm visual order ===== */
  section{padding:88px 0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:42px}
  .bento>.card{grid-column:auto}
  #oneoff .bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  #services .bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  /* мобильные правила должны идти ПОСЛЕ этой строки, иначе она их перебивает */
  @media(max-width:900px){#services .bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:640px){#services .bento{grid-template-columns:1fr}}
  #proof .card:last-child,#content .card:last-child{grid-column:1/-1;width:calc(50% - 9px);justify-self:center}

  .card{padding:1px;border:0;border-radius:20px;
    background:linear-gradient(145deg,rgba(94,233,208,.28),rgba(42,51,61,.72) 34%,rgba(42,51,61,.48));
    box-shadow:0 22px 52px -42px rgba(0,0,0,.95);transition:transform .3s var(--ease-fluid),box-shadow .3s,border-color .3s}
  .card-core{border:0;border-radius:19px;padding:26px;background:linear-gradient(155deg,#181f28,#121821 64%,#10151c)}
  /* карточки тонули в фоне — поверхность светлее, контур и подсветка заметнее */
  /* приём с quantview.ru: стекло поверх цветного свечения, а не заливка другим цветом */
  .card{background:linear-gradient(145deg,rgba(94,233,208,.34),rgba(255,255,255,.1) 38%,rgba(255,255,255,.05))}
  .card-core{background:linear-gradient(180deg,rgba(26,33,44,.72),rgba(12,16,22,.72));
    backdrop-filter:blur(3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 60px -34px rgba(0,0,0,.95)}
  .card:hover{background:linear-gradient(145deg,rgba(94,233,208,.7),rgba(94,233,208,.28) 40%,rgba(74,88,102,.7))}
  .card-ico{width:52px;height:52px;border-radius:14px;margin-bottom:18px}
  .card h3{font-size:19px;line-height:1.28;margin-bottom:10px}
  .card .out{order:2;margin:0 -26px -26px;padding:13px 26px;border-top-color:rgba(94,233,208,.12)}

  .card-add{order:1;margin:18px 0;min-height:44px}
  @media(hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 28px 58px -40px rgba(12,74,66,.62)}}

  .cases-wrap{gap:16px;margin-top:42px}
  .case{padding:1px;border:0;border-radius:20px;background:linear-gradient(145deg,rgba(94,233,208,.24),rgba(42,51,61,.64) 38%,rgba(42,51,61,.42))}
  .case-core{border:0;border-radius:19px;padding:28px 30px;background:linear-gradient(155deg,#151c24,#10161d 68%,#0e1319)}
  /* 27.08: вопросы шли колонкой 900px по центру, а заголовок и соседние блоки — во всю ширину */
  .faq{max-width:none;margin:38px 0 0}
  .faq details{border-radius:16px;border-color:rgba(94,233,208,.14);background:linear-gradient(155deg,rgba(24,31,40,.9),rgba(14,19,25,.94))}
  .faq details[open]{border-color:rgba(94,233,208,.3)}

  #picker{background:linear-gradient(180deg,rgba(94,233,208,.02),transparent 72%)}
  #picker>.wrap>.eyebrow{justify-content:center;margin-left:auto;margin-right:auto}
  #picker>.wrap>h2,#picker>.wrap>.lead{margin-left:auto;margin-right:auto;text-align:center}
  #picker .picker{max-width:800px;margin:38px auto 0;padding:30px;border:1px solid rgba(94,233,208,.18);border-radius:20px;
    background:linear-gradient(155deg,rgba(24,31,40,.94),rgba(14,19,25,.96));box-shadow:0 24px 64px -48px rgba(12,74,66,.68)}
  .pk-q{margin:0;padding:17px 0 20px;border-bottom:1px solid var(--line-soft)}
  .pk-q:last-of-type{border-bottom:0}
  .pk-opt,.bld-chip{min-height:44px}
  .bld{margin-top:26px;padding-top:26px}
  .bld-out{border-color:rgba(94,233,208,.2)}

  @media(max-width:760px){
    section{padding:68px 0}
    .bento,#oneoff .bento{grid-template-columns:1fr;gap:14px;margin-top:34px}
    .card-core{padding:22px}
    .card .out{margin:0 -22px -22px;padding:13px 22px}
    .case-core{padding:24px 20px}
    #picker .picker{margin-top:30px;padding:22px 18px}
    .pk-opt,.bld-chip{width:100%;text-align:left;border-radius:14px}
    #proof .card:last-child,#content .card:last-child{grid-column:auto;width:100%}
  }
  @media(max-width:520px){
    .nav-shell{padding-top:10px}
    .nav-shell .wrap{padding-left:10px;padding-right:10px}
    nav{gap:8px;padding:7px 7px 7px 12px}
    .logo{gap:7px;min-width:0}
    .logo svg{width:30px;height:30px}
    .logo-en{font-size:15.5px}
    .logo-ru{font-size:12px;margin-top:.08em}
    .nav-cta{flex-shrink:0;font-size:11px;padding:9px 12px}
    .tag{max-width:100%;white-space:normal;border-radius:18px;line-height:1.45;align-items:flex-start}
    /* Три колонки на телефоне давали каждой меньше 100 px, и подписи
       слипались в «направления24 900 ₽» (аудит 26.08.2026). На узком
       экране показатели идут столбиком — правило ниже, в блоке 520px. */
    .hero-meta{width:100%}
  }



.group-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 10px}
.group-tab{appearance:none;border:1px solid rgba(94,233,208,.28);background:rgba(94,233,208,.06);color:#e6f3f0;border-radius:999px;padding:12px 18px;font:inherit;font-size:15px;cursor:pointer;min-height:44px;transition:background .2s,border-color .2s}
.group-tab[aria-selected="true"]{background:#5ee9d0;color:#080a0e;border-color:#5ee9d0;font-weight:600}
.group-note{margin:0 0 18px;color:#a9b7b4;max-width:760px}
.price-tag{margin-top:12px;font-weight:600;color:#5ee9d0;font-size:15px}
#services-grid .card[data-group][hidden]{display:none}


/* --- три входа на главной: ветвление «Ваша задача» -> 3 направления ---
   27.08.2026, замечания Сергея: сначала «карточки не красивые, нужно разветвление»,
   затем «схема бедная». Поэтому не просто линии: у каждой ветки свой цвет
   (мятный/голубой/янтарный), по ветке идёт импульс, карточка несёт ауру своего
   цвета, глиф направления и цену отдельным чипом. Коннектор — grid, повторяющий
   колонки .dir-grid, поэтому узлы стоят строго над своими карточками на любой
   ширине. На <=900px ветвление вырождается в вертикальную ленту. */
.dir-flow{margin-top:38px}
.dc-1{--dc:#5ee9d0}
.dc-2{--dc:#7fb4ff}
.dc-3{--dc:#e0a36b}

.dir-hub{display:flex;justify-content:center}
.hub-core{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:100px;
  font-family:var(--mono);font-size:16px;color:var(--text);letter-spacing:.02em;
  background:linear-gradient(180deg,rgba(94,233,208,.10),rgba(10,14,18,.9));
  border:1px solid rgba(94,233,208,.34);box-shadow:0 0 0 6px rgba(94,233,208,.045),0 22px 50px -30px rgba(94,233,208,.5)}
.hub-core::after{content:"";position:absolute;inset:-16px;border-radius:100px;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 50%,rgba(94,233,208,.14),transparent 70%);
  opacity:1;transition:opacity .4s var(--ease-fluid),transform .5s var(--ease-fluid)}
/* Наведение на узел — тот же язык, что у карточек: подъём, свет, усиление ауры */
.hub-core{transition:transform .45s var(--ease-fluid),box-shadow .45s var(--ease-fluid),border-color .3s,background .3s;cursor:default}
.dir-hub:hover .hub-core{transform:translateY(-4px);border-color:rgba(94,233,208,.6);
  background:linear-gradient(180deg,rgba(94,233,208,.18),rgba(10,14,18,.92));
  box-shadow:0 0 0 8px rgba(94,233,208,.07),0 30px 64px -28px rgba(94,233,208,.75)}
.dir-hub:hover .hub-core::after{transform:scale(1.12);opacity:1}
/* Наведение на узел зажигает весь трезубец и кромки всех трёх карточек */
.dir-flow:has(.dir-hub:hover) .db-col::after,
.dir-flow:has(.dir-hub:hover) .db-col:nth-child(2)::before{filter:brightness(1.5) saturate(1.2)}
.dir-flow:has(.dir-hub:hover) .dir-card::after{opacity:1}

.dir-connector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;height:54px;margin-top:2px}
.db-col{position:relative}
.db-col::after{content:"";position:absolute;left:50%;top:18px;bottom:6px;width:2px;transform:translateX(-1px);border-radius:2px;
  background:linear-gradient(180deg,rgba(94,233,208,.22),var(--dc))}
.db-col:nth-child(2)::after{top:0}
.db-col:nth-child(2)::before{content:"";position:absolute;left:calc(-50% - 18px);right:calc(-50% - 18px);top:17px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(94,233,208,.7),rgba(127,180,255,.7),rgba(224,163,107,.7))}
.db-node{position:absolute;left:50%;bottom:0;width:9px;height:9px;border-radius:50%;background:var(--dc);transform:translate(-50%,0);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--dc) 16%,transparent),0 0 16px color-mix(in srgb,var(--dc) 55%,transparent)}
.db-node::before{content:"";position:absolute;left:50%;width:4px;height:4px;border-radius:50%;background:var(--dc);
  transform:translate(-50%,0);animation:dirPulse 3.4s var(--ease-fluid) infinite}
/* Прозрачная полоса вдоль ветки — то, что ловит мышь (сама линия шириной 2px её не поймает) */
.db-hit{position:absolute;left:50%;top:0;bottom:-8px;width:46px;transform:translateX(-50%);cursor:pointer;z-index:3}
.db-col::after,.db-node{transition:filter .3s,box-shadow .35s var(--ease-fluid),transform .35s var(--ease-fluid)}
.db-col:hover::after{filter:brightness(1.6) saturate(1.25)}
.db-col:hover .db-node{transform:translate(-50%,0) scale(1.35);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--dc) 20%,transparent),0 0 24px color-mix(in srgb,var(--dc) 80%,transparent)}
/* Ветка -> своя карточка: наводишь на трезубец, загорается нужное направление */
.dir-flow:has(.db-col:nth-child(1):hover) .dir-card:nth-child(1),
.dir-flow:has(.db-col:nth-child(2):hover) .dir-card:nth-child(2),
.dir-flow:has(.db-col:nth-child(3):hover) .dir-card:nth-child(3){
  border-color:color-mix(in srgb,var(--dc) 50%,rgba(255,255,255,.07));transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 44px 84px -50px color-mix(in srgb,var(--dc) 70%,transparent)}
.dir-flow:has(.db-col:nth-child(1):hover) .dir-card:nth-child(1) .dir-glow,
.dir-flow:has(.db-col:nth-child(2):hover) .dir-card:nth-child(2) .dir-glow,
.dir-flow:has(.db-col:nth-child(3):hover) .dir-card:nth-child(3) .dir-glow{opacity:1}
/* Карточка -> своя ветка: обратная связь, чтобы схема читалась как одно целое */
.dir-flow:has(.dir-card:nth-child(1):hover) .db-col:nth-child(1)::after,
.dir-flow:has(.dir-card:nth-child(2):hover) .db-col:nth-child(2)::after,
.dir-flow:has(.dir-card:nth-child(3):hover) .db-col:nth-child(3)::after{filter:brightness(1.6) saturate(1.25)}
.dir-flow:has(.dir-card:nth-child(1):hover) .db-col:nth-child(1) .db-node,
.dir-flow:has(.dir-card:nth-child(2):hover) .db-col:nth-child(2) .db-node,
.dir-flow:has(.dir-card:nth-child(3):hover) .db-col:nth-child(3) .db-node{transform:translate(-50%,0) scale(1.35);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--dc) 20%,transparent),0 0 24px color-mix(in srgb,var(--dc) 80%,transparent)}
.db-col:nth-child(2) .db-node::before{animation-delay:.35s}
.db-col:nth-child(3) .db-node::before{animation-delay:.7s}
@keyframes dirPulse{0%{bottom:34px;opacity:0}18%{opacity:1}70%{bottom:2px;opacity:.9}100%{bottom:2px;opacity:0}}
@media (prefers-reduced-motion:reduce){.db-node::before{display:none}}

.dir-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:0}
/* Глянец (Сергей 27.08: «фон карточек темнее, как глянец»): почти чёрная
   подложка + мягкий блик по верхней кромке (::before) вместо плоской заливки. */
.dir-card{position:relative;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(163deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 26%,rgba(255,255,255,0) 52%),
    linear-gradient(180deg,#0c1015 0%,#070a0e 62%,#05080b 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -44px rgba(0,0,0,.9);
  transition:border-color .3s,transform .45s var(--ease-fluid),box-shadow .45s var(--ease-fluid)}
.dir-card::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 85%)}
.dir-glow{position:absolute;inset:-40% -30% auto -30%;height:210px;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 60%,color-mix(in srgb,var(--dc) 22%,transparent),transparent 72%);
  opacity:.7;transition:opacity .45s var(--ease-fluid)}
.dir-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--dc),transparent);opacity:.8}
.dir-card:hover{border-color:color-mix(in srgb,var(--dc) 50%,rgba(255,255,255,.07));transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 44px 84px -50px color-mix(in srgb,var(--dc) 70%,transparent)}
.dir-card:hover .dir-glow{opacity:1}

.dir-head{display:flex;align-items:flex-start;gap:12px}
.dir-card h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.22;flex:1 1 auto}
.dir-icon{flex:0 0 auto;width:34px;height:34px;color:var(--dc);opacity:.85;transition:transform .5s var(--ease-fluid),opacity .3s}
.dir-icon svg{width:100%;height:100%;display:block}
.dir-card:hover .dir-icon{transform:translateY(-2px) scale(1.06);opacity:1}

.dir-res{list-style:none;display:flex;flex-direction:column;gap:9px;margin:2px 0 0;padding:0}
.dir-res li{position:relative;padding-left:17px;font-size:14px;color:var(--muted);line-height:1.5}
.dir-res li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--dc);box-shadow:0 0 8px color-mix(in srgb,var(--dc) 55%,transparent)}
.dir-lead{font-size:15px;color:var(--muted);line-height:1.55;margin:0}
.dir-price{margin:auto 0 0;padding:11px 13px;border-radius:12px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--faint);
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.055);text-wrap:balance}
.dir-go{font-family:var(--mono);font-size:13.5px;color:var(--dc);display:inline-flex;align-items:center;gap:9px;min-height:44px}
.dir-arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--dc) 45%,var(--line-soft));background:color-mix(in srgb,var(--dc) 10%,transparent);
  transition:transform .35s var(--ease-fluid)}
.dir-go:hover .dir-arrow{transform:translate(3px,-3px)}

@media(max-width:900px){
  .dir-connector{display:none}
  /* Без .dir-connector (54px) пилюля «Ваш запрос» вставала впритык к первой
     карточке (0px между ними на всех мобильных ширинах, скрин Сергея
     08.09.2026 «ваш запрос на карточку заезжает») — декоративное свечение
     ::after у .hub-core (inset:-16px) визуально сливалось с рамкой карточки. */
  .dir-hub{margin-bottom:32px}
  /* 08.09: вертикальная «ветка» слева от карточек (градиентная полоса 2px
     с узлами) на узком экране читалась не как схема, а как случайная
     полоса у края — Сергей: «слева полоса непонятная». Связи с пилюлей
     «Ваш запрос» она не давала (пилюля по центру, полоса у края) и при
     этом отъедала 26px ширины у карточек. Снята вместе с узлами. */
  .dir-grid{grid-template-columns:1fr;gap:16px}
}
@media(max-width:520px){.dir-card{padding:24px 20px 20px}}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* --- страницы направлений --- */
.dir-hero{padding:120px 0 30px}
.dir-hero h1{font-size:clamp(25px,3vw,34px);max-width:24ch}
.dir-back{font-family:var(--mono);font-size:13px;color:var(--muted);display:inline-flex;min-height:44px;align-items:center}
.dir-back:hover{color:var(--text)}
.dir-pricing{background:linear-gradient(180deg,rgba(94,233,208,.018),transparent)}
.dir-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;margin-top:30px}
.dir-price-grid .price-core{height:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-soft);border-radius:18px;padding:4px 18px}
.dir-price-grid .price-row{flex:1}
.dir-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
@media(max-width:820px){.dir-method-grid{grid-template-columns:1fr}}
@media(max-width:480px){.dir-price-grid{grid-template-columns:1fr}.dir-price-grid .price-core{padding:4px 14px}}


/* --- мобильные ширины 390/412: горизонтальный overflow запрещён (аудит 25.08, п.6) --- */
@media(max-width:480px){
  .wrap{padding:0 16px}
  .tag{white-space:normal;line-height:1.5;padding:8px 14px;border-radius:16px}
  h1{font-size:clamp(23px,7.5vw,30px);max-width:none}
  .sub{max-width:none}
  /* Раскладка показателей на узком экране задана в блоке 520px выше. */
  .hero-meta div:last-child{border-bottom:0;padding-bottom:0}
  .hero-meta b{font-size:19px}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{justify-content:center}
  .hero-paths{grid-template-columns:1fr}
  .entry-row{grid-template-columns:1fr}
  .dir-grid{grid-template-columns:1fr}
  .price-row{flex-wrap:wrap;gap:6px}
  .term,.bezel{max-width:100%}
  .float-card{display:none}
}
/* Широкое содержимое (таблицы, код, схемы) скроллится внутри себя,
   а не растягивает страницу. */
@media(max-width:640px){
  .term-body,.bento,.steps,.offer{max-width:100%}
  pre,table{display:block;overflow-x:auto;max-width:100%}
}


/* Якоря не должны прятаться под липкой шапкой (аудит 25.08, п.7). */
/* 08.09: шаги guide.html — это <li id="step-N">, а правило ниже покрывает
   только section[id], поэтому тап по оглавлению уводил заголовок шага
   под липкую шапку. */
section[id],[id^="services-"],.gd-step[id]{scroll-margin-top:96px}
/* 08.09: 78px не хватало — низ шапки на 390px стоит на 74px, заголовок
   после перехода по якорю всё ещё уходил под неё на 12px. Замерено. */
@media(max-width:480px){section[id],.gd-step[id]{scroll-margin-top:92px}}


/* Кнопка закрытия просмотра снимка (аудит 25.08, п.8). */
.lightbox-close{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:50%;
  background:rgba(15,22,20,.9);border:1px solid var(--line);color:var(--text);font-size:26px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.lightbox-close:hover{border-color:var(--accent);color:var(--accent)}


/* Мобильное меню (аудит 25.08): на узких экранах ссылки прятались вовсе. */
.nav-burger{display:none;background:transparent;border:1px solid var(--line-soft);border-radius:12px;
  width:48px;height:48px;flex:0 0 48px;align-items:center;justify-content:center;cursor:pointer;color:var(--text)}
.nav-burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor}
.nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}
/* 08.09: панель меню была rgba(11,17,15,.97) — на телефоне заголовок страницы
   читался сквозь неё, ровно как раньше сквозь шапку. Фон делаем сплошным,
   а страницу под меню гасим подложкой (z-index ниже шапки, чтобы бургер
   и логотип остались яркими и меню можно было закрыть). */
.mobile-menu{display:none;position:fixed;inset:64px 12px auto 12px;z-index:80;background:#0d1412;
  border:1px solid var(--line);border-radius:20px;padding:14px;backdrop-filter:blur(18px);
  box-shadow:var(--shadow-deep)}
.mobile-menu.on{display:block}
.mobile-menu a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;
  font-size:16px;color:var(--text)}
.mobile-menu a:hover,.mobile-menu a:focus-visible{background:rgba(94,233,208,.08);color:var(--accent)}
.mobile-menu a[aria-current="page"]{background:rgba(94,233,208,.1);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}
@media(max-width:820px),(max-height:500px){
  .nav-burger{display:flex}
  .nav-cta{font-size:12.5px;padding:10px 16px}
}
/* Меню прячется на широких экранах — но только на высоких. На горизонтальном
   телефоне (844x390) ширина больше 821, и это правило гасило меню намертво:
   бургер открывался, а панель оставалась 0x0 — навигации не было вовсе
   (найдено аудитом 26.08.2026, дефект внесён моей же правкой бургера). */
@media(min-width:821px) and (min-height:501px){.mobile-menu{display:none!important}}
/* Мобильная панель: своя кнопка действия — на очень узком экране шапка
   отдаёт место логотипу и бургеру, а CTA живёт внутри меню (аудит 26.08). */
.mobile-menu .mm-cta{margin-top:8px;justify-content:center;background:var(--accent);color:#03241e;
  font-family:var(--mono);font-weight:600;font-size:14px}
.mobile-menu .mm-cta:hover,.mobile-menu .mm-cta:focus-visible{background:#7cebd8;color:#03241e}
/* 320-360 px: логотип и бургер вставали впритык, бургер сжимался до 39 px
   (аудит 26.08). Кнопку из шапки убираем — она есть в меню. */
@media(max-width:380px){
  nav{gap:10px;padding:7px 7px 7px 10px}
  .logo-tag{display:none}
}

/* --- Дорожная карта «от обращения до передачи результата» (Сергей, 27.08.2026:
   «показать в виде дорожной карты», нижний блок с ценами дублировал этапы и снят).
   Линия — псевдоэлемент между узлами, поэтому на любой ширине идёт ровно по центрам точек. */
.rm-more{margin-top:24px}
.roadmap{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 18px;
  margin:40px 0 0;padding:0}
.rm-step{position:relative;padding:34px 16px 0 0;display:flex;flex-direction:column;gap:8px}
.rm-step::before{content:"";position:absolute;left:0;right:-18px;top:9px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),rgba(94,233,208,.28))}
/* Хвост после финиша: линия шла только до узла и правая треть блока пустовала —
   тянем до края колонки с затуханием (Сергей, 27.08.2026). */
.rm-step.rm-last::before{right:16px;width:auto;background:linear-gradient(90deg,var(--accent),rgba(94,233,208,0))}
.rm-dot{position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);
  box-shadow:0 0 0 4px rgba(94,233,208,.10),0 0 18px rgba(94,233,208,.45)}
.rm-num{font-family:var(--display);font-size:26px;font-weight:700;line-height:1;color:var(--accent);
  letter-spacing:-.02em}
.rm-step b{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.rm-text{color:var(--muted);font-size:14px;line-height:1.55}
@media(max-width:1000px){
  .roadmap{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
  .rm-step::before{right:-22px}
  .rm-step:nth-child(2n)::before{right:auto;width:22px;background:rgba(94,233,208,.28)}
}
@media(max-width:620px){
  .roadmap{grid-template-columns:1fr;gap:0}
  .rm-step{padding:0 0 26px 0}
  /* 08.09: в одну колонку рельс шагов превращался в полосу у левого края,
     причём рваную: правило двухколоночной раскладки
     `.rm-step:nth-child(2n)::before{width:22px}` (блок 1000px) специфичнее
     мобильного `.rm-step::before{width:2px}`, поэтому чётные шаги рисовали
     полосу в 22px, а нечётные — в 2px. Сергей дважды спросил «что слева за
     полоса». В столбик шаги и так читаются по крупным номерам — рельс и
     точки на узком экране убраны совсем. */
  .rm-step::before,
  .rm-step:nth-child(2n)::before,
  .rm-step.rm-last::before,
  .rm-dot{display:none}
}

/* --- дорожная карта: состояние «пройдено» при наведении (Сергей, 27.08.2026) ---
   Наводишь на этап N → шаги до него закрашены и помечены галочкой, линия сплошная,
   текущий подсвечен, следующие приглушены. Только :has(), без скриптов. */
.rm-step, .rm-dot, .rm-num, .rm-step::before{transition:opacity .3s var(--ease-fluid),
  background .35s var(--ease-fluid),border-color .3s,color .3s,transform .35s var(--ease-fluid)}
.rm-dot::after{content:"";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#04231e;opacity:0;transition:opacity .25s}
.rm-step:hover .rm-dot{background:var(--accent);border-color:var(--accent);transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(94,233,208,.18),0 0 26px rgba(94,233,208,.85)}
.rm-step:hover .rm-num{color:#a9fff0}
.rm-step:hover::before{background:linear-gradient(90deg,var(--accent),rgba(94,233,208,.45))}
/* Финиш крупнее остальных узлов; центр держим на линии (её верх 9px, значит top = 10 − r) */
.rm-last .rm-dot{width:22px;height:22px;top:-1px;border-width:2.5px}
.rm-last .rm-dot::after{font-size:12px}
.rm-last:hover .rm-dot{transform:scale(1.18)}
.roadmap:has(.rm-step:nth-child(1):hover) .rm-step:nth-child(n+2):not(:hover){opacity:.55}

/* наведение на этап 2: пройдены 1…1 */
.roadmap:has(.rm-step:nth-child(2):hover) .rm-step:nth-child(-n+1) .rm-dot{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(94,233,208,.16),0 0 18px rgba(94,233,208,.55)}
.roadmap:has(.rm-step:nth-child(2):hover) .rm-step:nth-child(-n+1) .rm-dot::after{content:"✓";opacity:1}
.roadmap:has(.rm-step:nth-child(2):hover) .rm-step:nth-child(-n+1)::before{background:var(--accent)}
.roadmap:has(.rm-step:nth-child(2):hover) .rm-step:nth-child(-n+1) .rm-num{color:var(--accent)}
.roadmap:has(.rm-step:nth-child(2):hover) .rm-step:nth-child(n+3):not(:hover){opacity:.55}

/* наведение на этап 3: пройдены 1…2 */
.roadmap:has(.rm-step:nth-child(3):hover) .rm-step:nth-child(-n+2) .rm-dot{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(94,233,208,.16),0 0 18px rgba(94,233,208,.55)}
.roadmap:has(.rm-step:nth-child(3):hover) .rm-step:nth-child(-n+2) .rm-dot::after{content:"✓";opacity:1}
.roadmap:has(.rm-step:nth-child(3):hover) .rm-step:nth-child(-n+2)::before{background:var(--accent)}
.roadmap:has(.rm-step:nth-child(3):hover) .rm-step:nth-child(-n+2) .rm-num{color:var(--accent)}
.roadmap:has(.rm-step:nth-child(3):hover) .rm-step:nth-child(n+4):not(:hover){opacity:.55}

/* наведение на этап 4: пройдены 1…3 */
.roadmap:has(.rm-step:nth-child(4):hover) .rm-step:nth-child(-n+3) .rm-dot{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(94,233,208,.16),0 0 18px rgba(94,233,208,.55)}
.roadmap:has(.rm-step:nth-child(4):hover) .rm-step:nth-child(-n+3) .rm-dot::after{content:"✓";opacity:1}
.roadmap:has(.rm-step:nth-child(4):hover) .rm-step:nth-child(-n+3)::before{background:var(--accent)}
.roadmap:has(.rm-step:nth-child(4):hover) .rm-step:nth-child(-n+3) .rm-num{color:var(--accent)}
.roadmap:has(.rm-step:nth-child(4):hover) .rm-step:nth-child(n+5):not(:hover){opacity:.55}

/* наведение на этап 5: пройдены 1…4 */
.roadmap:has(.rm-step:nth-child(5):hover) .rm-step:nth-child(-n+4) .rm-dot{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(94,233,208,.16),0 0 18px rgba(94,233,208,.55)}
.roadmap:has(.rm-step:nth-child(5):hover) .rm-step:nth-child(-n+4) .rm-dot::after{content:"✓";opacity:1}
.roadmap:has(.rm-step:nth-child(5):hover) .rm-step:nth-child(-n+4)::before{background:var(--accent)}
.roadmap:has(.rm-step:nth-child(5):hover) .rm-step:nth-child(-n+4) .rm-num{color:var(--accent)}

/* Ссылка на раздел работ вместо ролика (27.08.2026: ролики будут отдельные на каждый продукт) */
.works-link{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.works-hint{font-family:var(--mono);font-size:12.5px;color:var(--faint);line-height:1.5}
/* Клик по знаку в шапке ведёт на #top: без этого страница вставала на 82px ниже нуля —
   первый экран показывался обрезанным сверху (Сергей, 27.08.2026). */
#top{scroll-margin-top:0}
html:has(#top:target){scroll-behavior:smooth}

/* --- Карточки собственных продуктов и просмотр видеообзоров. */
#products .section-head{max-width:760px}
#products .section-head p{max-width:680px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.pcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 0 20px;border-radius:20px;overflow:hidden;
  background:linear-gradient(163deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 26%,rgba(255,255,255,0) 52%),
             linear-gradient(180deg,#0c1015 0%,#070a0e 62%,#05080b 100%);
  border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -44px rgba(0,0,0,.9);
  transition:border-color .3s,transform .45s var(--ease-fluid),box-shadow .45s var(--ease-fluid)}
.pcard:hover{border-color:rgba(94,233,208,.45);transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 44px 84px -50px rgba(94,233,208,.5)}
.pcard-media{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,rgba(94,233,208,.12),transparent 70%),#0a0f14;
  border-bottom:1px solid rgba(255,255,255,.06)}
.pcard-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#05070a;color:var(--text);cursor:pointer;overflow:hidden;text-align:left;text-decoration:none}
.pcard-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(3,6,9,.88) 100%);pointer-events:none}
.pcard-play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-fluid),filter .35s}
.pcard-play:hover img{transform:scale(1.025);filter:brightness(1.08)}
.pcard-play:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}
.pcard-play-icon{position:absolute;left:50%;top:50%;z-index:2;width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(5,12,14,.86);border:1px solid rgba(94,233,208,.7);box-shadow:0 16px 36px -18px rgba(94,233,208,.8);transition:transform .3s var(--ease-fluid),background .25s}
.pcard-play-icon::after{content:"";position:absolute;left:23px;top:17px;border-left:17px solid var(--accent);border-top:11px solid transparent;border-bottom:11px solid transparent}
.pcard-play:hover .pcard-play-icon{transform:translate(-50%,-50%) scale(1.08);background:rgba(10,28,27,.96)}
.pcard-play-label{position:absolute;z-index:2;left:18px;right:18px;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:600 13px/1.2 var(--mono);letter-spacing:.01em;color:#eafbf8}
.pcard-play-label small{font:500 11px/1 var(--mono);color:var(--accent);white-space:nowrap}
.pcard h3{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;margin:16px 20px 0}
.pcard-sub{font-family:var(--mono);font-size:12px;color:var(--accent);margin:0 20px;line-height:1.45}
.pcard-text{font-size:14.5px;color:var(--muted);line-height:1.58;margin:4px 20px 0}
.pcard-link{margin:auto 20px 0;padding-top:12px;font-family:var(--mono);font-size:13px;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px;min-height:44px}
.pcard-link:hover{text-decoration:underline;text-underline-offset:3px}
.pcard-arrow{transition:transform .35s var(--ease-fluid)}
.pcard-link:hover .pcard-arrow{transform:translate(2px,-2px)}
.pcard-soon{margin:auto 20px 0;padding-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--faint)}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .pgrid{grid-template-columns:1fr}
  .pcard-text{font-size:15px;line-height:1.6}
  .pcard-play-icon{width:54px;height:54px}
  .pcard-play-icon::after{left:21px;top:16px;border-left-width:16px;border-top-width:10px;border-bottom-width:10px}
}

.video-modal[hidden]{display:none}
.video-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(1,3,5,.88);backdrop-filter:blur(12px)}
.video-modal-dialog{position:relative;z-index:1;width:min(1080px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:20px;border-radius:22px;
  background:linear-gradient(160deg,rgba(23,33,42,.98),rgba(7,11,15,.99));border:1px solid rgba(94,233,208,.28);box-shadow:0 44px 120px rgba(0,0,0,.72)}
.video-modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.video-modal-head span{display:block;margin-bottom:5px;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.video-modal-head h2{margin:0;font-family:var(--display);font-size:24px;line-height:1.25;color:var(--text)}
.video-modal-close{flex:0 0 auto;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--text);font:300 30px/1 var(--sans);cursor:pointer}
.video-modal-close:hover{border-color:var(--accent);color:var(--accent);background:rgba(94,233,208,.08)}
.video-modal-player{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#030507;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.video-modal-dialog.is-portrait{width:min(620px,100%)}
.video-modal-player.is-portrait{width:auto;height:min(68dvh,820px);max-width:100%;aspect-ratio:9/16;margin-inline:auto;object-fit:contain}
.video-modal-dialog>p{margin:14px 2px 0;color:var(--muted);font-size:14px;line-height:1.55}
.video-modal-status{color:var(--accent)!important;font-family:var(--mono);font-size:12px!important}
.video-modal-status[hidden]{display:none}
.video-modal-status.is-error{color:#ffb6a8!important}
.video-modal-direct{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.video-modal-direct:hover{color:var(--text)}
body.video-modal-open{overflow:hidden}
  /* Тот же лок для мобильного меню: фон под открытой панелью не скроллится. */
  body.mobile-menu-open{overflow:hidden}
  body.mobile-menu-open::after{content:"";position:fixed;inset:0;z-index:35;background:rgba(3,5,8,.74);pointer-events:none}
  html.mobile-menu-open{overflow-y:hidden}
@media(max-width:680px){
  .video-modal{padding:10px}
  .video-modal-dialog{max-height:calc(100dvh - 20px);padding:14px;border-radius:18px}
  .video-modal-head{align-items:flex-start;margin-bottom:12px}
  .video-modal-head h2{font-size:19px}
  .video-modal-head span{font-size:10.5px}
  .video-modal-dialog>p{font-size:13px}
  .video-modal-player.is-portrait{height:min(62dvh,680px)}
}
@media(prefers-reduced-motion:reduce){
  .pcard-play img,.pcard-play-icon{transition:none}
  .pcard-play:hover img{transform:none}
}

/* Возврат с внутренней страницы (27.08.2026): ссылка «Назад» над заголовком.
   Скрипт подменяет переход на history.back(), если человек пришёл изнутри сайта. */
.backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
  color:var(--faint);margin-bottom:16px;min-height:36px;transition:color .25s}
.backlink:hover{color:var(--accent)}
.backlink-arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;border:1px solid var(--line-soft);background:rgba(255,255,255,.04);
  transition:transform .3s var(--ease-fluid),border-color .25s}
.backlink:hover .backlink-arrow{transform:translateX(-3px);border-color:var(--accent)}

/* Approved V24 homepage proof and AI signal. */
.ai-rail{position:relative;width:100%;height:40px;display:grid;margin:0 0 13px;
  grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:8px;padding:0 10px;
  color:rgba(218,255,249,.68);font:600 10px/1 var(--mono);letter-spacing:.12em;pointer-events:none}
.ai-node{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ai-node i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(94,233,208,.85)}
.ai-line{position:relative;height:1px;overflow:visible;background:linear-gradient(90deg,rgba(94,233,208,.12),rgba(94,233,208,.58),rgba(94,233,208,.12))}
.ai-line i{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#e7fff9;
  box-shadow:0 0 12px rgba(94,233,208,.95);animation:ai-signal 2.4s linear infinite}
.ai-line:nth-child(4) i{animation-delay:-1.2s}
.ai-core{width:48px;height:32px;border-radius:10px;display:grid;place-content:center;text-align:center;
  color:#eafffa;background:radial-gradient(circle at 50% 35%,rgba(94,233,208,.2),rgba(94,233,208,.04));
  border:1px solid rgba(94,233,208,.42);box-shadow:0 0 28px rgba(94,233,208,.12),inset 0 0 18px rgba(94,233,208,.08)}
.ai-core b{font:700 13px/1 var(--mono);letter-spacing:.08em}.ai-core small{font:600 7px/1.4 var(--mono);color:var(--accent);letter-spacing:.08em}
@keyframes ai-signal{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}

.home-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.home-proof-card{--fx-cx:50%;--fx-cy:50%;position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  color:var(--text);text-decoration:none;transition:transform .42s var(--ease-fluid),border-color .3s,box-shadow .42s var(--ease-fluid)}
.home-proof-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--fx-cx) var(--fx-cy),rgba(94,233,208,.12),transparent 68%);transition:opacity .25s}
.home-proof-card:hover{transform:translateY(-5px);border-color:rgba(94,233,208,.44);box-shadow:0 32px 70px -48px rgba(94,233,208,.6)}
.home-proof-card:hover::after{opacity:1}.home-proof-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.home-proof-media{display:block;aspect-ratio:16/9;overflow:hidden;background:#05080b;border-bottom:1px solid rgba(255,255,255,.06)}
.home-proof-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-fluid),filter .3s}
.home-proof-card:hover img{transform:scale(1.025);filter:brightness(1.07)}
.home-proof-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px;padding:17px 18px 19px}
.home-proof-copy b{font-family:var(--display);font-size:17px;line-height:1.25;font-weight:600}
.home-proof-copy small{font:500 12px/1.45 var(--mono);color:var(--accent)}

.content-price-summary{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-top:22px;padding:15px 18px;
  border:1px solid rgba(94,233,208,.2);border-radius:16px;background:linear-gradient(120deg,rgba(94,233,208,.07),rgba(255,255,255,.018));
  color:var(--muted);font:500 12.5px/1.5 var(--mono)}
.content-price-summary span{display:inline-flex;gap:6px;white-space:nowrap}.content-price-summary b{color:var(--text);font-weight:600}
.content-price-summary a{display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-height:44px;margin-left:auto;color:var(--accent);font-weight:650;text-decoration:none}
.content-price-summary a:hover{text-decoration:underline;text-underline-offset:4px}.content-price-summary a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:5px}

@media(max-width:820px){
  .ai-rail{padding:0}
  .home-proof-grid{grid-template-columns:1fr 1fr}
  .home-proof-card:last-child{grid-column:1/-1;width:calc(50% - 9px);justify-self:center}
}
@media(max-width:600px){
  .ai-rail{grid-template-columns:auto 1fr auto 1fr auto;gap:5px;height:36px;letter-spacing:.07em}
  .ai-core{width:43px;height:30px}.ai-node{font-size:8px;gap:5px}
  .content-price-summary{align-items:stretch;gap:8px;padding:14px 16px}.content-price-summary span{flex-basis:100%;justify-content:space-between;white-space:normal}
  .content-price-summary a{justify-content:flex-start;margin-left:0}
  .home-proof-grid{grid-template-columns:1fr}
  .home-proof-card:last-child{grid-column:auto;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ai-line i{animation:none;left:50%;opacity:.7}
  .home-proof-card,.home-proof-media img{transition:none}
  .home-proof-card:hover{transform:none}.home-proof-card:hover img{transform:none}
}