@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');
/* Общие стили отраслевых лендингов Visiology.
   Вынесено из инлайновых <style> пакета 2026-07-13 (во всех 38 страницах было идентично).
   ПРАВКИ СТИЛЯ/ПАЛИТРЫ/ШРИФТА — здесь, в одном месте: применяются ко всем 38 страницам.
   Палитра = бренд сайта (INSAIM): акцент #FEE121, чёрный #171717, серый #E8E9E9. Шрифт — Onest. */

:root{--deep:#12351f;--deep2:#1d5230;--ink:#1c2b21;--mut:#5d7264;--bg:#f6faf6;--card:#fff;
        --line:#e0ebe2;--acc:#1e8a4c}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font:16px/1.55 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
  .wrap{max-width:980px;margin:0 auto;padding:0 clamp(15px,4vw,24px)}
  a.btn{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:600;
        padding:13px 26px;border-radius:8px}
  .tag{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
       color:#9fd4b3;margin-bottom:14px}
  header{background:linear-gradient(135deg,var(--deep),#2c6e42);color:#fff;padding:52px 0 40px}
  header h1{font-size:clamp(26px,4vw,38px);line-height:1.18;max-width:820px;font-weight:600}
  header p.lead{margin:16px 0 24px;font-size:18px;color:#cfe6d6;max-width:740px}
  .proofbar{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .proofbar div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;
                padding:10px 16px;font-size:13.5px;color:#dcefe2}
  .proofbar b{display:block;font-size:20px;color:#fff}
  .src{margin-top:10px;font-size:12.5px;color:#93b8a0}
  .shot{display:block;width:100%;border-radius:16px;border:1px solid rgba(11,11,11,.12);
        box-shadow:0 12px 32px rgba(10,30,18,.18);margin-top:26px}
  .shot.small{margin-top:14px;box-shadow:0 6px 18px rgba(10,30,18,.10)}
  section{padding:64px 0 0}
  h2{font-size:clamp(20px,2.6vw,26px);line-height:1.25;font-weight:600;margin-bottom:16px}
  .pains li{list-style:none;padding:9px 0;border-bottom:1px solid var(--line);font-size:16.5px}
  .bridge{margin:38px 0 0;background:#ecf6ee;border:1px solid #cfe7d6;border-left:5px solid var(--acc);
          border-radius:12px;padding:20px 24px;font-size:17px}
  .roles{display:grid;gap:18px;margin-top:6px}
  @media(min-width:769px){.roles{grid-template-columns:1fr 1fr 1fr}}
  .role{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
  .role b{display:block;font-size:12px;letter-spacing:.05em;color:var(--acc);margin-bottom:8px}
  .role p{font-size:14.5px}
  .steps{margin-top:44px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 26px;font-size:16.5px}
  .chips{display:grid;gap:10px;margin-top:6px}
  @media(min-width:769px){.chips{grid-template-columns:1fr 1fr}}
  .chip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:15px}
  .cta{margin:44px 0;background:linear-gradient(135deg,var(--deep2),#2c6e42);color:#fff;border-radius:16px;padding:34px 30px}
  .cta h2{color:#fff}
  .cta p{color:#cfe6d6;max-width:640px;margin-bottom:14px}
  .trust{font-size:14px;color:#b9dcc4;font-style:italic;margin:14px 0 20px}
  footer{padding:26px 0 40px;font-size:13px;color:var(--mut)}

/* Visiology брендбук 2025 (INSAIM): жёлтый #FEE121 — акцент, чёрный #171717,
   серый #E8E9E9, красный #E5341E — функциональный (боли). Onest → Roboto → системный. */
:root{--deep:#171717;--deep2:#242424;--ink:#171717;--mut:#6b7280;--bg:#fafafa;--card:#fff;--line:#e8e9e9;--acc:#171717}
body{font-family:'Onest','Roboto',-apple-system,'Segoe UI',Arial,sans-serif;background:#fafafa;color:#171717}
header{background:linear-gradient(135deg,#171717,#2c2c2c)}
.tag{color:#FEE121}
/* Логотип Visiology в надзаголовке (вместо слова) — белый вариант для тёмного геро */
.tag-logo{height:15px;width:auto;vertical-align:middle;position:relative;top:-1px}
/* Разделитель между логотипом и аудиторией — крупная приглушённая точка.
   Отступ задаёт только точка (у логотипа margin-right убран) → расстояние слева и справа равное. */
.tag-sep{display:inline-block;margin:0 8px;font-size:1.5em;line-height:0;font-weight:400;color:rgba(255,255,255,.4);vertical-align:middle}
header p.lead{color:#d9d9d9}
.src{color:#b8b8b8}
a.btn{background:#FEE121;color:#171717}
a.btn:hover{background:#e6cc1e}
a.btn:focus-visible,.plink:focus-visible{outline:2px solid #FEE121;outline-offset:2px}
/* Текстовые ссылки: основной цвет текста (не синие браузерные), всегда подчёркнуты.
   color:inherit → на светлом фоне тёмный текст, на тёмном CTA — светлый.
   Исключения: кнопки (.btn) и обёртки-ссылки скриншотов (.shotlink). */
a:not(.btn):not(.shotlink){color:inherit;text-decoration:underline}
.proofbar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
@media(max-width:768px){.proofbar{grid-template-columns:1fr}}
.proofbar div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.25);color:#e6e6e6}
.proofbar b{color:#FEE121}
.pains li{border-bottom:1px solid #e8e9e9;border-left:3px solid #E5341E;padding:9px 0 9px 12px}
.pains li b{color:#B3260F}
.bridge{background:#FEE121;border:none;border-left:5px solid #171717;color:#171717;border-radius:12px}
.role{border:1px solid #e8e9e9;display:flex;flex-direction:column}
.role .shotlink{margin-top:auto;padding-top:12px}
.role b{color:#171717;border-bottom:3px solid #FEE121;display:inline-block;padding-bottom:2px;letter-spacing:.05em}
a.shotlink{display:block;cursor:zoom-in}
.steps{border:1px solid #e8e9e9}
.chip{border:1px solid #e8e9e9}
.chip a{color:#171717;font-weight:600;white-space:nowrap}
.cta{background:linear-gradient(135deg,#171717,#2c2c2c)}
.cta p{color:#d9d9d9}
.trust{color:#bdbdbd}
.plink{color:#E8E9E9}
.cta .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.cta .btn.ghost:hover{border-color:#FEE121;color:#FEE121;filter:none}
.flow{display:grid;grid-template-columns:1fr auto 1.05fr auto 1fr;gap:10px;align-items:center;margin:26px 0 0}
.fcol{display:flex;flex-direction:column;gap:8px}
.fchip{background:#fff;border:1px solid #e8e9e9;border-radius:12px;padding:8px 12px;font-size:13.5px}
.fchip.fout{border-left:3px solid #FEE121}
.fcore{background:#171717;color:#fff;border-radius:16px;padding:18px 14px;text-align:center}
.fcore b{display:block;color:#FEE121;font-size:17px;margin-bottom:4px}
.fcore span{font-size:12.5px;color:#cfcfcf}
.farr{color:#171717;font-size:22px;text-align:center}
.fpile{position:relative;height:172px}
.fpile img{position:absolute;width:88%;border-radius:8px;border:1px solid #e2e2df;box-shadow:0 8px 20px rgba(23,23,23,.18);background:#fff}
.fpile img:nth-child(1){left:0;top:20px;transform:rotate(-4deg)}
.fpile img:nth-child(2){right:0;top:10px;transform:rotate(3deg)}
.fpile img:nth-child(3){left:6%;top:0}
.fcap{margin-top:10px;font-weight:650}
.fcap span{display:block;font-weight:400;font-size:12.5px;color:#6b7280;margin-top:2px}
@media(max-width:768px){.flow{grid-template-columns:1fr}.farr{transform:rotate(90deg)}}

/* ===== Анимации появления (пресет B: reveal + stagger + последовательный геро) ===== */
@keyframes lp-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Геро — последовательно на загрузке (чистый CSS; fill:both → без «мигания», работает и без JS) */
header .tag,header h1,header p.lead,header .proofbar div{animation:lp-rise .6s ease both}
header h1{animation-delay:.08s}
header p.lead{animation-delay:.16s}
header .proofbar div{animation-delay:.24s}
header .proofbar div:nth-child(2){animation-delay:.32s}
header .proofbar div:nth-child(3){animation-delay:.40s}
/* Ниже сгиба — появление при скролле (класс .js-anim ставит landing-forms.js; без JS всё видно) */
.js-anim .js-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js-anim .js-reveal.in{opacity:1;transform:none}
/* Stagger карточек сеток и пунктов proofbar, когда ряд въезжает вместе */
.js-anim .role.js-reveal:nth-child(2),.js-anim .chip.js-reveal:nth-child(2){transition-delay:.08s}
.js-anim .role.js-reveal:nth-child(3),.js-anim .chip.js-reveal:nth-child(3){transition-delay:.16s}
.js-anim .chip.js-reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  header .tag,header h1,header p.lead,header .proofbar div,.js-anim .js-reveal{
    animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
}

/* Flow-схема: пошаговое появление слева направо + «поток» через стрелки.
   Стрелки прячем только по opacity (их transform занят rotate(90deg) на мобиле). */
.js-anim .flow.js-reveal{opacity:1;transform:none}
.js-anim .flow.js-reveal>*{opacity:0;transition:opacity .5s ease,transform .5s ease}
.js-anim .flow.js-reveal>.fcol,.js-anim .flow.js-reveal>.fcore{transform:translateY(16px)}
.js-anim .flow.js-reveal.in>*{opacity:1}
.js-anim .flow.js-reveal.in>.fcol,.js-anim .flow.js-reveal.in>.fcore{transform:none}
.js-anim .flow.js-reveal>*:nth-child(2){transition-delay:.14s}
.js-anim .flow.js-reveal>*:nth-child(3){transition-delay:.28s}
.js-anim .flow.js-reveal>*:nth-child(4){transition-delay:.42s}
.js-anim .flow.js-reveal>*:nth-child(5){transition-delay:.56s}
@keyframes lp-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
/* лёгкий бесконечный «поток» стрелок — только десктоп (на мобиле стрелка повёрнута) */
@media(min-width:769px){.js-anim .flow.js-reveal.in .farr{animation:lp-arrow 1.6s ease-in-out 1s infinite}}
@media (prefers-reduced-motion:reduce){
  .js-anim .flow.js-reveal>*{opacity:1!important;transform:none!important;transition:none!important}
  .js-anim .flow.js-reveal .farr{animation:none!important}
}

/* Карточки «Почему Visiology» (.chip): лёгкое увеличение при наведении.
   reveal у .chip — только по opacity (transform свободен под hover-scale). */
.chip{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.js-anim .chip.js-reveal{transform:none;transition:opacity .6s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.chip:hover,.js-anim .chip.js-reveal.in:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(23,23,23,.10)}
@media (prefers-reduced-motion:reduce){.chip:hover,.js-anim .chip.js-reveal.in:hover{transform:none}}

/* Лайтбокс для скриншотов (.shotlink): клик увеличивает картинку в оверлее (не новое окно) */
.shot-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(10,15,12,.85);padding:24px;cursor:zoom-out}
.shot-lightbox.open{display:flex}
.shot-lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}