/* Стили лендинга SCAN analytics.
   Вынесены из index.html, чтобы их могли использовать и другие
   страницы сайта, а браузер кешировал файл между заходами.
   Правила стилевого свода — в DESIGN.md рядом. */

:root{
  /* Шкала размеров текста. Раньше в стилях жили 38 произвольных
     значений, включая дробные (10.5, 14.5, 16.5) — следы подгонки
     на глаз. Теперь девять ступеней, и новый блок берёт размер
     отсюда, а не изобретает свой. */
  --fs-3xs:11px;
  --fs-2xs:13px;
  --fs-xs:15px;
  --fs-sm:17px;
  --fs-md:20px;
  --fs-lg:24px;
  --fs-xl:30px;
  --fs-2xl:38px;
  --fs-3xl:46px;
}



  /* cyrillic */
  @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-cyrillic-400.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:500;font-display:swap;src:url('fonts/manrope-cyrillic-500.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:600;font-display:swap;src:url('fonts/manrope-cyrillic-600.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:700;font-display:swap;src:url('fonts/manrope-cyrillic-700.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:800;font-display:swap;src:url('fonts/manrope-cyrillic-800.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  /* latin */
  @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-latin-400.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}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-latin-500.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}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-latin-600.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}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-latin-700.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}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-latin-800.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}


/* ---------------------------------------------------------- */


  :root{
    --blue:#1e9bf0;        /* яркий синий из лого */
    --blue-deep:#103a5e;   /* тёмно-синий из лого */
    --navy:#103a5e;
    --yellow:#e3b23c;      /* приглушённое золото (спокойнее #ffc400) */
    --red:#f0402c;         /* красный из лого */
    --green:#059669;       /* прибыль, рост, деньги */
    --green-soft:#e6f6f0;  /* фон для позитива */
    --orange:#ff7a00;      /* энергия, действие — кнопки */
    --ink:#103a5e;
    --muted:#5f7189;
    --bg:#f5f7fa;
    --card:#ffffff;
    --line:#e7eef6;
    /* тёмная база «полночной студии» — производные от тёмно-синего из лого */
    --ink-950:#05080f;
    --ink-900:#080e1a;
    --ink-850:#0a1220;
    --ink-800:#0c1728;
    --ink-700:#112038;
    --line-dark:rgba(255,255,255,.10);
    --glow-blue:rgba(30,155,240,.55);
    --radius:16px;
    --shadow:0 4px 16px rgba(16,58,94,.08);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    background:#f5f7fa;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  /* Плавное появление при прокрутке */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  a{color:inherit;text-decoration:none}
  section{padding:88px 0}
  h2{font-size:var(--fs-2xl);line-height:1.1;font-weight:800;letter-spacing:-.5px}
  .sub{color:var(--muted);font-size:var(--fs-md);margin-top:14px;max-width:600px}
  /* Ограничение ширины длинных текстов для читаемости */
  .reports-note,.pricing-note{max-width:720px !important}
  .lead,.lead2,.lead3{max-width:560px}
  .price-foot,.calc-note,.bonus-sub{max-width:620px;margin-left:auto;margin-right:auto}
  .center{text-align:center;margin:0 auto}
  /* Спокойный eyebrow — мягкая плашка, цветной текст (SaaS-стиль) */
  .tag{display:inline-flex;align-items:center;gap:8px;background:#e6f2fe;
       color:#0b6ec2;border:1px solid #cbe4fb;font-weight:700;font-size:var(--fs-2xs);letter-spacing:1.3px;
       text-transform:uppercase;padding:7px 16px;border-radius:var(--r-pill);box-shadow:none}
  .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#1e9bf0;box-shadow:0 0 0 3px rgba(30,155,240,.16);
       animation:tagpulse 2.2s ease-in-out infinite}
  @keyframes tagpulse{0%,100%{box-shadow:0 0 0 0 rgba(30,155,240,.45)}50%{box-shadow:0 0 0 5px rgba(30,155,240,0)}}

  /* --- SaaS-polish: живые карточки (hover-lift + подсветка рамки) --- */
  .card,.aud-card,.report-item{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease}
  .card:hover,.aud-card:hover,.report-item:hover{transform:translateY(-5px);
       box-shadow:var(--sh-lg);border-color:#bfe0fb}
  .case-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
  .aud-card .ic{transition:transform .22s cubic-bezier(.16,1,.3,1)}
  .aud-card:hover .ic{transform:scale(1.07) rotate(-2deg)}
  @media(prefers-reduced-motion:reduce){
    .card:hover,.aud-card:hover,.report-item:hover,.case-card:hover{transform:none}
  }

  /* Buttons */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
       font-weight:700;font-size:var(--fs-sm);padding:16px 30px;border-radius:var(--r-pill);cursor:pointer;
       border:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;white-space:nowrap}
  .btn:hover{transform:translateY(-3px) scale(1.03)}
  .btn:active{transform:translateY(-1px) scale(.99)}
  /* блик, пробегающий по кнопке при наведении */
  .btn::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;pointer-events:none;
       background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-22deg)}
  .btn:hover::after{animation:btnShine .75s ease}
  @keyframes btnShine{to{left:150%}}
  .arw{display:inline-block;transition:transform .2s ease}
  .btn:hover .arw{transform:translateX(4px)}
  @media(prefers-reduced-motion:reduce){.btn:hover{transform:none}.btn:hover::after{animation:none}}
  .btn-yellow{background:linear-gradient(135deg,#ffb200,#ff7a00);color:#3a1d00;font-weight:800;
       box-shadow:var(--sh-md)}
  .btn-yellow:hover{box-shadow:var(--sh-md)}
  .btn-red{background:var(--red);color:#fff;box-shadow:var(--sh-md)}
  .btn-blue{background:var(--blue);color:#fff;box-shadow:var(--sh-md)}
  .btn-white{background:#fff;color:var(--blue-deep)}
  .btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.38);color:#fff;backdrop-filter:blur(6px)}
  .btn-ghost:hover{background:rgba(255,255,255,.2)}
  .btn .arw{transition:transform .18s ease;display:inline-block}
  .btn:hover .arw{transform:translateX(4px)}
  .btn .play{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);
       display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-3xs)}
  .btn-line{background:#fff;border:2px solid var(--line);color:var(--ink)}
  .btn-sm{padding:11px 22px;font-size:var(--fs-xs)}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
         backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:32px;height:72px}
  .logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:var(--fs-lg);color:#16367a}
  .logo svg{height:40px;width:auto;flex:0 0 auto;display:block}
  .logo img{height:40px;width:auto;flex:0 0 auto;display:block}
  footer .logo img{height:38px}
  footer .logo{background:#fff;padding:10px 16px;border-radius:var(--r-md);display:inline-flex}
  .logo .txt{display:flex;flex-direction:column;line-height:1}
  .logo .txt b{font-weight:800;letter-spacing:.5px}
  .logo .txt small{font-size:var(--fs-xs);font-weight:600;color:#2f6bff;letter-spacing:1px;margin-top:2px}
  .menu{display:flex;gap:20px;margin-left:4px}
  .menu a{color:var(--muted);font-weight:600;font-size:var(--fs-xs);transition:color .15s}
  .menu a:hover{color:var(--ink)}
  .nav-cta{margin-left:auto;display:flex;gap:12px;align-items:center}
  .burger{display:none;font-size:var(--fs-lg);background:none;border:0;cursor:pointer}
  .only-mob{display:none}

  /* Hero */
  .hero{background:
      radial-gradient(1000px 620px at 84% -14%,rgba(56,189,248,.42),transparent),
      radial-gradient(760px 520px at 4% 108%,rgba(52,211,153,.16),transparent),
      linear-gradient(180deg,#0d2745 0%,#123255 54%,#14406b 100%);
      color:#fff;padding:54px 0 52px;position:relative;overflow:hidden}
  /* Тонкая сетка-текстура (глубина, SaaS-стиль) */
  .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
       background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
       background-size:56px 56px;
       -webkit-mask-image:radial-gradient(1200px 700px at 70% 0,#000,transparent 80%);
       mask-image:radial-gradient(1200px 700px at 70% 0,#000,transparent 80%)}
  /* низ первого экрана растворяется в цвет синей полосы — стыка не видно */
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:440px;z-index:0;pointer-events:none;
       background:linear-gradient(180deg,rgba(20,64,107,0) 0%,rgba(20,64,107,.32) 38%,rgba(20,64,107,.66) 62%,rgba(20,64,107,.9) 84%,#14406b 100%)}
  .hero .wrap{position:relative;z-index:1}
  /* Восходящие «ступеньки» роста на фоне */
  .hero-bars{position:absolute;left:0;right:0;bottom:0;height:94%;display:flex;align-items:flex-end;gap:9px;padding:0 42px;z-index:0;pointer-events:none;
       -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.35) 82%,transparent 100%);
       mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.35) 82%,transparent 100%)}
  .hero-bars i{flex:1;border-radius:9px 9px 0 0;
       background:linear-gradient(180deg,rgba(104,206,255,.44),rgba(104,206,255,.20) 42%,rgba(30,120,220,0))}
  @media(max-width:640px){ .hero-bars{gap:5px;padding:0 16px;height:42%} }
  .hero-top{display:grid;grid-template-columns:1fr 1.18fr;gap:44px;align-items:center}
  .hero-visual{position:relative}
  .hero-visual img{width:100%;display:block;border-radius:var(--r-md);
       box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.22)}
  /* Живое цветное свечение за дашбордом */
  .hero-visual::after{content:"";position:absolute;inset:-46px -34px;border-radius:var(--r-xl);z-index:-1;
       background:radial-gradient(closest-side,rgba(56,189,248,.38),transparent 70%);filter:blur(14px)}
  /* Плавающий чип «живые данные» */
  .hero-live{position:absolute;left:-14px;bottom:24px;background:#fff;color:var(--navy);
       font-weight:800;font-size:var(--fs-2xs);padding:10px 16px;border-radius:var(--r-pill);
       box-shadow:var(--sh-md);display:flex;align-items:center;gap:8px}
  .hero-live .dot{width:9px;height:9px;border-radius:50%;background:var(--green);
       animation:livepulse 2s ease-in-out infinite}
  @keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}
  .hero h1{font-size:var(--fs-3xl);line-height:1.05;font-weight:800;letter-spacing:-1px}
  .hero h1 .hl{color:var(--yellow)}
  .hero .lead{font-size:var(--fs-md);color:rgba(255,255,255,.9);margin-top:22px;max-width:640px}
  .hero .price{display:inline-block;margin-top:22px;background:rgba(255,255,255,.14);
       border:1px solid rgba(255,255,255,.25);padding:10px 20px;border-radius:var(--r-pill);font-weight:700}
  .hero .price b{color:var(--yellow)}
  .hero-cta{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}
  /* Первый экран: текст слева + плавающие карточки-виджеты справа */
  /* Заголовок сверху, ниже — [текст | дашборд], снизу описание */
  .hero-copy-top{max-width:none}
  .hero-copy-top h1{margin-top:16px;font-size:var(--fs-3xl);line-height:1.08}
  .hero-row{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.7fr);gap:34px;align-items:center;margin-top:26px}
  .hero-row-text{max-width:520px}
  .hero-row-text .lead{margin-top:0}
  .hero-row-text .hero-cta{margin-top:26px;flex-wrap:wrap;gap:13px}
  @media(min-width:901px){ .hero-row-text .hero-cta .btn{flex:1 1 100%;justify-content:center} }
  @media(min-width:1400px){ .hero-cards{margin-right:-90px} }
  @media(max-width:900px){ .hero-row{grid-template-columns:1fr;gap:24px} }
  .hero-fine{margin-top:18px;font-size:var(--fs-xs);color:rgba(255,255,255,.94);line-height:1.55}
  .hero-badges{display:flex;flex-direction:column;gap:13px;margin-top:30px;align-items:flex-start}
  .hero-cards{position:relative}
  .hero-cards::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;
       background:radial-gradient(60% 60% at 58% 44%,rgba(56,189,248,.32),transparent 72%);filter:blur(30px)}
  .hero-main{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.16)}
  .hero-main img{display:block;width:100%;height:auto}
  .fcard{position:absolute;will-change:transform;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
  .fcard-in{display:block;width:100%;border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-lg);
       border:1px solid rgba(255,255,255,.7);animation:floaty var(--dur,6s) ease-in-out infinite;animation-delay:var(--dl,0s)}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
  .fc-label{font-size:var(--fs-2xs);color:#64748b;font-weight:700;display:flex;align-items:center;gap:7px;white-space:nowrap}
  .fc-num{font-size:var(--fs-2xl);font-weight:800;color:var(--navy);line-height:1;margin-top:10px;letter-spacing:-.5px}
  .fc-sub{font-size:var(--fs-2xs);color:#12b76a;font-weight:700;margin-top:9px}
  .donut{width:116px;height:116px;border-radius:50%;position:relative;margin:12px auto 12px}
  .donut::after{content:"";position:absolute;inset:21px;background:#fff;border-radius:50%}
  .donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
  .donut-c b{font-size:var(--fs-md);color:var(--navy);font-weight:800;line-height:1}
  .donut-c span{font-size:var(--fs-3xs);color:#64748b}
  .fc-leg{display:flex;align-items:center;gap:7px;font-size:var(--fs-2xs);color:var(--ink);font-weight:600}
  .fc-leg .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .fbar{height:36px;border-radius:var(--r-sm);display:flex;align-items:center;padding:0 13px;color:#fff;
       font-weight:800;font-size:var(--fs-2xs);margin-top:9px;background:linear-gradient(90deg,#1668dc,#3aa0ff)}
  .fbar.s2{width:66%;background:linear-gradient(90deg,#0e355a,#1e9bf0)}
  @media(max-width:900px){
    .hero-split{grid-template-columns:1fr;gap:10px}
    .hero-copy{max-width:100%}
    .hero-cards{min-height:430px;margin-top:14px;transform:scale(.86);transform-origin:top center}
  }
  .hero-badges div{display:flex;align-items:center;gap:11px;font-size:var(--fs-sm);font-weight:600;color:#fff;text-shadow:0 1px 10px rgba(3,15,40,.35)}
  .hero-badges .ic{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.3);color:#fff;font-weight:800;
       display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs)}

  /* Logos */
  /* Единая синяя полоса: лента логотипов + вкладки — без видимых стыков */
  .blue-band{position:relative;color:#fff;
       background:linear-gradient(180deg,#14406b 0%,#123255 24%,#0f2b4a 56%,#113058 86%,#143b63 100%)}
  /* подсветки заводим только ниже кромки — верх остаётся ровно того же цвета, что низ первого экрана */
  .blue-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
       background:
         radial-gradient(1000px 620px at 88% 24%,rgba(30,155,240,.30),transparent),
         radial-gradient(820px 560px at 2% 70%,rgba(16,185,129,.13),transparent);
       -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%);
       mask-image:linear-gradient(180deg,transparent 0,#000 20%)}
  .blue-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
       background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
       background-size:28px 28px;
       -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 60%,transparent 92%);
       mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 60%,transparent 92%)}
  .blue-band>*{position:relative;z-index:1}
  /* лента логотипов — на синем, как продолжение первого экрана */
  .logos{padding:42px 0 46px;background:transparent}
  .logos p{text-align:center;color:rgba(255,255,255,.86);font-weight:700;font-size:var(--fs-xs);
       letter-spacing:.2px;margin-bottom:26px}
  .logos-marquee{overflow:hidden;position:relative;
       -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
       mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .marquee-track{display:flex;gap:22px;width:max-content;animation:scroll-x 120s linear infinite}
  .logos-marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .logo-ph{flex:0 0 auto;width:210px;height:96px;background:var(--card);border:1px solid var(--line);
       border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;padding:18px;
       box-shadow:var(--shadow)}
  .logo-ph.dark{background:#191919;border-color:#191919}
  .logo-ph img{max-height:56px;max-width:100%;object-fit:contain}

  /* Features */
  .grid3{display:flex;flex-wrap:wrap;gap:18px;margin-top:44px;justify-content:center}
  .grid3 .card{flex:0 1 calc(33.333% - 12px);max-width:calc(33.333% - 12px);min-width:290px}
  .card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
        border-radius:var(--r-lg);padding:26px 26px;box-shadow:var(--shadow);
        display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;
        transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
       background:linear-gradient(90deg,var(--blue),var(--yellow));
       transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent}
  .card:hover::before{transform:scaleX(1)}
  .card .ic{flex:0 0 auto;width:52px;height:52px;border-radius:var(--r-md);
       background:linear-gradient(135deg,var(--blue),#0e355a);color:#fff;
       display:flex;align-items:center;justify-content:center;margin-bottom:0;
       box-shadow:var(--sh-md);transition:transform .2s ease}
  .card .ic svg{width:25px;height:25px}
  .card:hover .ic{transform:scale(1.06) rotate(-3deg)}
  .card h3{flex:1;min-width:0;font-size:var(--fs-md);font-weight:800;margin-bottom:0;letter-spacing:-.3px;line-height:1.25}
  .card p{flex-basis:100%;color:var(--muted);font-size:var(--fs-xs);line-height:1.55;margin-top:14px}

  /* Stats */
  .stats{background:radial-gradient(620px 360px at 82% -12%,rgba(56,189,248,.30),transparent),linear-gradient(158deg,#123255,#0e2a49);color:#fff;border-radius:var(--r-lg);
         padding:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
  .stats .n{font-size:var(--fs-3xl);font-weight:800;color:var(--yellow);line-height:1}
  .stats .l{margin-top:10px;color:rgba(255,255,255,.85);font-size:var(--fs-xs)}

  /* Steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
  .step{position:relative;padding-top:16px}
  .step .num{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:#1a1a1a;
       font-weight:800;font-size:var(--fs-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .step:not(:last-child)::after{content:"";position:absolute;top:39px;left:58px;right:-24px;height:2px;
       background:linear-gradient(90deg,var(--yellow),rgba(255,178,0,.22));z-index:0}
  .step h3{font-size:var(--fs-md);margin-bottom:8px}
  .step p{color:var(--muted);font-size:var(--fs-xs)}
  .support-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:920px;margin:36px auto 0}
  .sb-item{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
       border-radius:var(--r-pill);padding:11px 22px;font-size:var(--fs-xs);font-weight:700;color:var(--navy);
       box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease}
  .sb-item:hover{transform:translateY(-2px);border-color:var(--blue)}
  .sb-item .sd{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}

  /* How-to instruction */
  .howto{max-width:860px;margin:60px auto 0}
  .howto-title{text-align:center;font-size:var(--fs-lg);font-weight:800;margin-bottom:24px;color:var(--navy)}
  .howto ol{margin:6px 0 2px;padding-left:22px}
  .howto li{color:#38455f;font-size:var(--fs-xs);padding:7px 0;line-height:1.55}
  .howto li b{color:var(--ink);font-weight:700}
  .howto-link{display:inline-block;margin-top:14px;color:var(--blue);font-weight:700;font-size:var(--fs-xs)}
  .howto-link:hover{text-decoration:underline}

  /* Reviews */
  .reviews-wrap{background:#f5f7fa}
  .grid-rev{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
  .review{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
  .stars{color:var(--yellow);font-size:var(--fs-md);margin-bottom:14px;letter-spacing:2px}
  .review p{font-size:var(--fs-xs);color:#38455f}
  .review .who{display:flex;align-items:center;gap:14px;margin-top:22px}
  .review .ava{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));
       color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
  .review .who b{display:block;font-size:var(--fs-xs)}
  .review .who span{color:var(--muted);font-size:var(--fs-2xs)}
  /* Screenshot gallery (masonry) */
  .rev-gallery{columns:3;column-gap:22px;margin-top:52px}
  .rev-shot{break-inside:avoid;margin-bottom:22px;border-radius:var(--r-md);overflow:hidden;
       border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;background:#fff;
       transition:transform .18s ease,box-shadow .18s ease}
  .rev-shot:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
  .rev-shot img{width:100%;display:block}
  .rev-shot.ph{height:260px;display:flex;align-items:center;justify-content:center;
       color:#9fb0d0;font-weight:700;border:2px dashed #c9d4ea}
  .rev-shot.ph.tall{height:360px}
  /* Карусель отзывов-скринов */
  .rev-carousel{position:relative;max-width:1160px;margin:52px auto 0;padding:0 58px}
  .rc-viewport{overflow:hidden}
  .rc-track{display:flex;align-items:flex-start;gap:20px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .rc-item{flex:0 0 calc((100% - 20px)/2);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
       box-shadow:var(--shadow);background:#fff;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
  .rc-item:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
  .rc-item img{width:100%;display:block}
  .rc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
       border:1px solid var(--line);background:#fff;color:var(--navy);font-size:var(--fs-lg);line-height:1;cursor:pointer;
       box-shadow:var(--sh-md);z-index:2;display:flex;align-items:center;justify-content:center;
       transition:background .15s ease,opacity .15s ease}
  .rc-arrow:hover{background:#f2f8ff}
  .rc-prev{left:2px} .rc-next{right:2px}
  .rc-arrow:disabled{opacity:.32;cursor:default}
  .rc-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
  .rc-dot{width:9px;height:9px;border-radius:50%;background:#cbd8e8;border:0;cursor:pointer;padding:0;transition:all .2s ease}
  .rc-dot.active{background:var(--blue);width:26px;border-radius:var(--r-pill)}
  @media(max-width:900px){ .rev-carousel{padding:0 46px} .rc-item{flex-basis:calc((100% - 20px)/2)} }
  @media(max-width:560px){ .rev-carousel{padding:0 44px} .rc-item{flex-basis:100%}
    .rc-arrow{width:38px;height:38px;font-size:var(--fs-md)} .rc-prev{left:0} .rc-next{right:0}
    .rc-dots{flex-wrap:wrap;max-width:280px;margin:22px auto 0} }
  .rev-subtitle{text-align:center;font-size:var(--fs-lg);font-weight:800;color:var(--navy);margin:60px 0 8px}
  .rev-videos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:1040px;margin:28px auto 0}
  @media(max-width:900px){ .rev-videos{grid-template-columns:repeat(3,minmax(0,1fr))} }
  /* Карусель видео-отзывов: по 2 в ряд + стрелки */
  .vr-carousel{display:flex;align-items:center;gap:14px;max-width:1080px;margin:28px auto 0}
  .vr-viewport{overflow:hidden;flex:1;min-width:0}
  .vr-track{display:flex;gap:14px;position:relative;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
  .vr-track .rev-video{flex:0 0 176px}
  @media(max-width:1040px){ .vr-track .rev-video{flex:0 0 158px} }
  @media(max-width:820px){ .vr-track .rev-video{flex:0 0 140px} }
  .vr-arrow{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
    background:#fff;color:#1668dc;font-size:var(--fs-lg);line-height:1;font-weight:700;
    box-shadow:var(--sh-md);transition:transform .15s ease,box-shadow .15s ease;
    display:flex;align-items:center;justify-content:center;padding:0}
  .vr-arrow:hover{transform:scale(1.08);box-shadow:var(--sh-md)}
  .vr-arrow:active{transform:scale(.95)}
  @media(max-width:520px){ .vr-carousel{gap:6px} .vr-track .rev-video{flex:0 0 44vw} .vr-arrow{width:38px;height:38px;font-size:var(--fs-lg)} }
  .rev-video{width:100%;max-width:none;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;
       position:relative;cursor:pointer;box-shadow:var(--shadow);
       background:linear-gradient(150deg,#0e355a,#1e9bf0);display:flex;align-items:center;
       justify-content:center;transition:transform .18s ease}
  .rev-video:hover{transform:translateY(-4px)}
  .rev-video.ph{border:2px dashed rgba(255,255,255,.45)}
  .rev-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .rev-video .playbtn{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;
       background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
       color:var(--blue);font-size:var(--fs-md);padding-left:4px;box-shadow:var(--sh-md)}
  .rev-video span{position:absolute;bottom:16px;z-index:2;color:#fff;font-weight:700;font-size:var(--fs-xs);
       text-shadow:0 2px 8px rgba(0,0,0,.4)}
  .lightbox{position:fixed;inset:0;background:rgba(6,16,30,.9);display:none;align-items:center;
       justify-content:center;z-index:200;padding:24px}
  .lightbox.open{display:flex}
  .lightbox img,.lightbox video{max-width:92vw;max-height:90vh;border-radius:var(--r-md);
       box-shadow:var(--sh-lg)}
  .lightbox-close{position:absolute;top:18px;right:30px;color:#fff;font-size:var(--fs-3xl);cursor:pointer;line-height:1}

  /* Pricing */
  .calc-q{font-weight:800;color:var(--navy);font-size:var(--fs-sm);margin-bottom:13px}
  .calc-toggle{display:flex;gap:10px;margin-bottom:22px}
  .calc-toggle button{flex:1;padding:13px 12px;border-radius:var(--r-md);border:2px solid #cfe8fb;background:#fff;
        color:var(--navy);font-weight:700;cursor:pointer;font-size:var(--fs-xs);transition:all .15s ease}
  .calc-toggle button:hover{border-color:var(--blue)}
  .calc-toggle button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
  .calc-result-free .rsum{color:#12b76a}
  .tariff-compare{max-width:720px;margin:32px auto 0;background:var(--card);border:1px solid var(--line);
        border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
  .tc-h{font-weight:800;color:var(--navy);font-size:var(--fs-sm);padding:20px 24px 8px}
  .tc-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
  .tc-table th,.tc-table td{padding:13px 24px;text-align:left;border-top:1px solid var(--line);color:var(--ink)}
  .tc-table th{color:var(--muted);font-weight:700;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.3px}
  .tc-table th:not(:first-child),.tc-table td:not(:first-child){text-align:center;width:130px}
  .tc-table td.yes{color:#12b76a;font-weight:800}
  .tc-table td.no{color:#c4cdd8;font-weight:800}
  .tc-note{color:var(--muted);font-size:var(--fs-2xs);padding:12px 24px 20px;margin:0}
  .pricing-help-cta{margin:14px 0 0;font-size:var(--fs-xs);color:var(--ink)}
  .pricing-help-cta a{color:var(--blue);font-weight:700;text-decoration:underline}
  .grid-price{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;align-items:start}
  .price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
        padding:36px 32px;box-shadow:var(--shadow);position:relative}
  .price-card.hot{border:2px solid var(--blue);transform:scale(1.03)}
  .price-card.hot .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
        background:var(--blue);color:#fff;font-size:var(--fs-2xs);font-weight:700;padding:6px 16px;border-radius:var(--r-pill);text-transform:uppercase}
  .price-card h3{font-size:var(--fs-md);font-weight:700}
  .price-card .amount{font-size:var(--fs-3xl);font-weight:800;margin:16px 0 4px}
  .price-card .amount span{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
  .price-card ul{list-style:none;margin:22px 0 28px}
  .price-card li{padding:9px 0;color:#38455f;font-size:var(--fs-xs);display:flex;gap:10px;align-items:flex-start}
  .price-card li::before{content:"✓";color:var(--blue);font-weight:800}
  .price-card .btn{width:100%}
  /* Pricing table (реальная тарификация) */
  /* Калькулятор стоимости */
  .pricing-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;margin-top:44px;align-items:start}
  .pricing-grid>*{min-width:0}
  .pricing-grid .calc{max-width:none;margin:0}
  .price-card2{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
       padding:30px 30px;box-shadow:var(--sh-lg)}
  .pc2-h{font-weight:800;color:var(--navy);font-size:var(--fs-md);margin-bottom:20px}
  .price-card2 .price-table-wrap{margin:0;max-width:none;box-shadow:none;border:1px solid var(--line)}
  .price-card2 .price-table{min-width:420px}
  .price-card2 .price-table th,.price-card2 .price-table td{padding:11px 18px;font-size:var(--fs-xs)}
  .pricing-mini{max-width:820px;margin:22px auto 0;display:flex;flex-direction:column;gap:14px}
  .pricing-note-inline{display:block;background:#eef4fb;border:1px solid var(--line);border-radius:var(--r-md);
       padding:13px 22px;color:var(--muted);font-size:var(--fs-xs);line-height:1.5;text-align:center}
  .pricing-note-inline b{color:var(--ink)}
  .pc2-sub{font-weight:800;color:var(--navy);font-size:var(--fs-sm);margin:28px 0 16px;padding-top:26px;border-top:1px solid var(--line)}
  .bonus-block{max-width:820px;margin:32px auto 0}
  .bonus-block-h{text-align:center;font-weight:800;color:var(--navy);font-size:var(--fs-md);margin-bottom:20px}
  .bonus-mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .bmini{background:linear-gradient(150deg,#f1f7ff,#ffffff);border:1px solid var(--line);
       border-radius:var(--r-md);padding:16px 12px;text-align:center;transition:transform .15s ease,border-color .15s ease}
  .bmini:hover{transform:translateY(-3px);border-color:var(--blue)}
  .bmini b{display:block;font-size:var(--fs-xs);color:var(--navy);font-weight:800}
  .bmini span{display:block;color:var(--blue);font-weight:800;font-size:var(--fs-md);margin:8px 0 10px}
  .bmini em{font-style:normal;display:inline-block;background:#e6f8ef;color:#0f9d58;font-weight:700;
       font-size:var(--fs-3xs);padding:4px 11px;border-radius:var(--r-pill)}
  .bmini-hot{background:linear-gradient(150deg,#fff6e6,#fffdf8);border-color:#ffd479}
  .bmini-hot span{color:#e07b00}
  .bmini-hot em{background:#fff0d1;color:#c76a00}
  .calc{max-width:660px;margin:44px auto 0;background:#fff;border:1px solid var(--line);
       border-radius:var(--r-lg);padding:42px 38px;box-shadow:var(--sh-lg);text-align:center}
  .calc label{display:block;font-weight:800;color:var(--navy);margin-bottom:24px;font-size:var(--fs-md)}
  .calc-input{display:inline-flex;gap:0;align-items:stretch;border:2px solid #cfe8fb;border-radius:var(--r-md);
       overflow:hidden;background:#f6fbff}
  .calc-input input[type=number]{width:180px;padding:16px 18px;border:0;background:transparent;
       font-size:var(--fs-lg);font-weight:800;text-align:center;color:var(--navy)}
  .calc-input input[type=number]:focus{outline:none}
  .calc-input .cu{display:flex;align-items:center;padding:0 20px;background:#e4f3fd;color:#1273b8;
       font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
  /* Ползунок */
  .calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;
       border-radius:var(--r-sm);background:#e4f3fd;outline:none;margin-top:30px;cursor:pointer}
  .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
       width:28px;height:28px;border-radius:50%;background:var(--blue);border:4px solid #fff;
       box-shadow:var(--sh-sm);cursor:pointer;margin-top:-1px}
  .calc input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
       background:var(--blue);border:4px solid #fff;box-shadow:var(--sh-sm);cursor:pointer}
  .calc-scale{display:flex;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:var(--fs-2xs)}
  /* Результат — яркий блок */
  .calc-result{margin-top:30px;background:linear-gradient(135deg,#0e355a,#1e9bf0);
       border-radius:var(--r-md);padding:28px 24px;color:#fff}
  .calc-result .rlabel{color:rgba(255,255,255,.85);font-size:var(--fs-xs);letter-spacing:.3px}
  .calc-result .rsum{font-size:var(--fs-3xl);font-weight:800;color:var(--yellow);margin-top:6px;line-height:1}
  .calc-result .rsum span{font-size:var(--fs-md);color:rgba(255,255,255,.9);font-weight:600}
  .calc-note{color:rgba(255,255,255,.82);font-size:var(--fs-xs);margin-top:12px}

  /* ===== Стоимость: компактный калькулятор ===== */
  .lcalc{display:grid;grid-template-columns:1.28fr .82fr;gap:0;max-width:960px;margin:36px auto 0;
       background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
       box-shadow:var(--sh-lg)}
  .lcalc-main{padding:28px 30px 26px}
  .lcalc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .lcalc-lb{font-weight:800;color:var(--navy);font-size:var(--fs-sm)}
  .lcalc-num input{width:150px;padding:11px 14px;border:2px solid #cfe8fb;border-radius:var(--r-md);background:#f6fbff;
       font-family:inherit;font-size:var(--fs-md);font-weight:800;text-align:center;color:var(--navy)}
  .lcalc-num input:focus{outline:none;border-color:var(--blue)}
  .lcalc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:9px;border-radius:var(--r-sm);
       background:#e4f3fd;outline:none;margin-top:20px;cursor:pointer}
  .lcalc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
       border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:var(--sh-sm);cursor:pointer}
  .lcalc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blue);
       border:4px solid #fff;box-shadow:var(--sh-sm);cursor:pointer}
  .lcalc-scale{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:var(--fs-2xs)}
  /* ступени тарифов вместо длинной таблицы */
  .lcalc-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;margin-top:18px}
  .pct{appearance:none;cursor:pointer;font-family:inherit;text-align:center;padding:9px 6px;border-radius:var(--r-sm);
       border:1px solid var(--line);background:#f8fbff;transition:.18s ease}
  .pct b{display:block;font-size:var(--fs-2xs);font-weight:800;color:var(--navy);white-space:nowrap}
  .pct span{display:block;font-size:var(--fs-3xs);color:var(--muted);margin-top:2px;white-space:nowrap}
  .pct:hover{border-color:var(--blue);transform:translateY(-2px)}
  .pct.is-on{background:var(--blue);border-color:var(--blue);box-shadow:var(--sh-md)}
  .pct.is-on b,.pct.is-on span{color:#fff}
  .lcalc-period{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:18px}
  .lcalc-period button{appearance:none;cursor:pointer;font-family:inherit;font-size:var(--fs-2xs);font-weight:800;
       color:var(--navy);background:#fff;border:1.5px solid #cfe8fb;border-radius:var(--r-md);padding:10px 6px;transition:.18s ease}
  .lcalc-period button i{display:block;font-style:normal;font-size:var(--fs-3xs);font-weight:700;color:#0f9d58;margin-top:3px}
  .lcalc-period button:hover{border-color:var(--blue)}
  .lcalc-period button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
  .lcalc-period button.is-on i{color:#7ee2b8}
  /* правая колонка — итог */
  .lcalc-out{padding:28px 26px;background:linear-gradient(150deg,#0e355a,#1668dc 62%,#1e9bf0);color:#fff;
       display:flex;flex-direction:column;justify-content:center;gap:2px}
  .pco-lb{font-size:var(--fs-xs);color:rgba(255,255,255,.85)}
  .pco-sum{font-size:var(--fs-2xl);font-weight:800;color:var(--yellow);line-height:1.05;margin-top:6px;
       font-variant-numeric:tabular-nums;letter-spacing:-1px}
  .pco-sum span{font-size:var(--fs-sm);color:rgba(255,255,255,.9);font-weight:600;letter-spacing:0}
  .lcalc-out.is-free .pco-sum{color:#7ee2b8;font-size:var(--fs-2xl)}
  .pco-sub{margin-top:10px;font-size:var(--fs-2xs);color:rgba(255,255,255,.84);line-height:1.45}
  .pco-bonus{margin-top:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
       border-radius:var(--r-md);padding:9px 12px;font-size:var(--fs-2xs);color:#fff}
  .pco-bonus b{color:var(--yellow)}
  .pco-free{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:var(--fs-2xs);
       color:rgba(255,255,255,.9);cursor:pointer;user-select:none}
  .pco-free input{width:17px;height:17px;accent-color:var(--yellow);cursor:pointer}
  .lcalc-out .btn{margin-top:16px;width:100%;justify-content:center;font-size:var(--fs-xs);padding:13px 16px}
  .pco-fine{margin-top:9px;font-size:var(--fs-2xs);color:rgba(255,255,255,.72);text-align:center}
  .lcalc.is-free .lcalc-main{opacity:.45;pointer-events:none;filter:grayscale(.3)}
  /* что входит */
  .pincl{max-width:960px;margin:20px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
       padding:20px 24px 22px;box-shadow:var(--sh-lg)}
  .pincl-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .pincl-h>span{font-weight:800;color:var(--navy);font-size:var(--fs-sm)}
  .pincl-sw{display:flex;gap:4px;background:#eef4fb;border-radius:var(--r-pill);padding:4px}
  .pincl-sw button{appearance:none;cursor:pointer;font-family:inherit;font-size:var(--fs-2xs);font-weight:800;
       color:var(--muted);background:none;border:0;border-radius:var(--r-pill);padding:8px 16px;transition:.2s ease}
  .pincl-sw button.is-on{background:#fff;color:var(--navy);box-shadow:var(--sh-sm)}
  .pincl-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
       gap:10px 22px;margin-top:16px}
  .pincl-list li{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:var(--ink);transition:.22s ease}
  .pincl-list li i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#e6f8ef;position:relative}
  .pincl-list li i::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
       font-size:var(--fs-2xs);font-weight:800;color:#0f9d58}
  .pincl-list li.is-limited i{background:#fff4e0}
  .pincl-list li.is-limited i::after{content:"⏱";font-size:var(--fs-3xs);color:#c76a00}
  .pincl-list li.is-off{color:#a9b4c2}
  .pincl-list li.is-off i{background:#f1f4f8}
  .pincl-list li.is-off i::after{content:"—";color:#c4cdd8}
  .pfoot{max-width:960px;margin:18px auto 0;text-align:center}
  .pfoot-top{margin:26px auto 0}
  @media(max-width:860px){
    .lcalc{grid-template-columns:1fr}
    .lcalc-out{padding:24px}
    .lcalc-period{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:520px){
    .lcalc-main{padding:22px 18px}
    .lcalc-tiers{grid-template-columns:repeat(2,1fr)}
    .pco-sum{font-size:var(--fs-2xl)}
  }

  .pricing-note{max-width:780px;margin:40px auto 0;background:#e4f3fd;border:1px solid #cfe8fb;
       border-radius:var(--r-md);padding:20px 26px;color:#38455f;font-size:var(--fs-xs);text-align:center;line-height:1.55}
  .pricing-note b{color:var(--ink)}
  .price-table-wrap{max-width:780px;margin:28px auto 0;overflow-x:auto;border-radius:var(--r-md);
       box-shadow:var(--shadow);border:1px solid var(--line)}
  .price-table{width:100%;border-collapse:collapse;background:#fff;min-width:540px}
  .price-table th{background:var(--navy);color:#fff;font-size:var(--fs-xs);font-weight:700;padding:18px 24px;text-align:left;white-space:nowrap}
  .price-table th:not(:first-child),.price-table td:not(:first-child){text-align:right}
  .price-table td{padding:15px 24px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink)}
  .price-table td:not(:first-child){font-weight:800;color:var(--navy)}
  .price-table tbody tr:nth-child(even){background:#f6f9fc}
  .price-table tbody tr:hover{background:#f5f7fa}
  .price-foot{text-align:center;margin-top:22px;color:var(--muted);font-size:var(--fs-xs)}
  .price-foot a{color:var(--blue);font-weight:700}
  .pricing-extra{max-width:940px;margin:24px auto 0;background:#eef4fb;border:1px solid var(--line);
       border-radius:var(--r-lg);padding:32px 36px}
  .pricing-extra .pricing-mini{margin:0}
  .pricing-divider{height:1px;background:#d5e3f0;margin:26px 0}
  .pricing-extra .price-bonus{max-width:none;margin:0}
  .pricing-extra .bonus-card{background:#fff}
  .pricing-final{text-align:center;margin-top:40px}
  .pricing-final p{color:var(--muted);font-size:var(--fs-xs);margin-top:14px}
  .pricing-mini-top{margin:22px auto 0}
  .pay-how .bonus-title{margin-bottom:20px}
  .pay-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .pay-step{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);
       border-radius:var(--r-md);padding:16px 18px}
  .pay-step .pay-n{flex:0 0 auto;width:27px;height:27px;border-radius:50%;
       background:linear-gradient(135deg,var(--blue),#0e6fbf);color:#fff;font-weight:800;font-size:var(--fs-xs);
       display:flex;align-items:center;justify-content:center}
  .pay-step p{color:var(--ink);font-size:var(--fs-xs);line-height:1.5;margin:0}
  .price-bonus{max-width:780px;margin:44px auto 0}
  .bonus-title{text-align:center;font-size:var(--fs-lg);font-weight:800;color:var(--navy);margin-bottom:8px}
  .bonus-sub{text-align:center;color:var(--muted);font-size:var(--fs-xs);margin-bottom:24px}
  .bonus-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
  .bonus-card{flex:1 1 220px;max-width:240px;background:#fff;border:1px solid var(--line);
       border-radius:var(--r-md);padding:26px 22px;text-align:center;box-shadow:var(--shadow)}
  .bonus-card b{display:block;font-size:var(--fs-md);color:var(--ink);font-weight:800}
  .bonus-card span{display:block;color:var(--blue);font-weight:700;font-size:var(--fs-sm);margin:10px 0}
  .bonus-card em{font-style:normal;color:#1273b8;font-size:var(--fs-2xs);font-weight:700;
       background:#e4f3fd;padding:4px 14px;border-radius:var(--r-pill);display:inline-block}

  /* FAQ */
  .faq{max-width:820px;margin:52px auto 0}
  details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 26px;margin-bottom:14px;cursor:pointer;
       transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  details:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:#bfe0fb}
  details[open]{box-shadow:var(--sh-md);border-color:#bfe0fb}
  summary{font-weight:700;font-size:var(--fs-sm);list-style:none;display:flex;justify-content:space-between;align-items:center;
       gap:16px;transition:color .18s ease}
  summary:hover{color:var(--blue)}
  summary::-webkit-details-marker{display:none}
  /* Круглая синяя кнопка-стрелка — сразу понятно, куда нажимать */
  summary::after{content:"";flex:0 0 auto;width:36px;height:36px;border-radius:50%;
       background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;
       box-shadow:var(--sh-md);transition:transform .25s ease}
  details:not([open]) summary::after{animation:accBtn 2.2s ease-in-out infinite}
  @keyframes accBtn{0%,100%{box-shadow:var(--sh-md)}
       50%{box-shadow:var(--sh-md)}}
  details[open] summary::after{transform:rotate(180deg);animation:none}
  details p{color:var(--muted);margin-top:14px;font-size:var(--fs-xs)}
  /* Плавное появление контента при раскрытии */
  details[open] > *:not(summary){animation:accFade .28s ease}
  @keyframes accFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  /* Заголовок аккордеона с тизером-превью */
  .sum-head{display:flex;flex-direction:column;gap:5px}
  .sum-teaser{font-weight:500;font-size:var(--fs-2xs);color:var(--muted);line-height:1.4}
  details[open] .sum-teaser{display:none}
  /* Сетка «живого примера» по рекламе */
  .ex-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}
  .ex-cell{background:#f2f8ff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 10px;text-align:center}
  .ex-cell b{display:block;font-size:var(--fs-md);color:var(--navy);font-weight:800;line-height:1.1}
  .ex-cell span{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-top:5px;line-height:1.3}
  .ex-cell.hot{background:#fff6e6;border-color:#ffd479} .ex-cell.hot b{color:#e07b00}
  .ex-cell.green{background:#e9f9f1;border-color:#bfe8d2} .ex-cell.green b{color:#0f9d58}
  .ex-cell.red{background:#fdeeee;border-color:#f3c9c9} .ex-cell.red b{color:#d64545}
  @media(max-width:640px){ .ex-grid{grid-template-columns:repeat(2,1fr)} }
  /* Тёмный раздел «Подробно» — заголовок/подзаголовок светлые, аккордеоны белые «парят» */
  #details h2{color:#fff}
  #details .sub{color:rgba(255,255,255,.82)}
  #details .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#bfe0fb}
  /* Сворачиваемая секция — детали под кнопкой (страница короче, контент весь на месте) */
  details.sect-fold{background:transparent;border:0;box-shadow:none;padding:0;margin:22px 0 0;cursor:default;text-align:center;border-radius:0}
  details.sect-fold:hover{transform:none;box-shadow:none;border-color:transparent}
  .sect-fold>summary{list-style:none;display:inline-flex;align-items:center;gap:9px;
       padding:13px 26px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
       font-weight:800;font-size:var(--fs-xs);color:var(--blue);cursor:pointer;box-shadow:var(--shadow);
       transition:transform .15s ease,border-color .15s ease}
  .sect-fold>summary:hover{border-color:var(--blue);transform:translateY(-2px);color:var(--blue)}
  .sect-fold>summary::-webkit-details-marker{display:none}
  .sect-fold>summary::after{content:"▾";display:inline-flex;align-items:center;justify-content:center;
       width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:var(--fs-xs);line-height:1;margin:0;
       box-shadow:var(--sh-sm);animation:foldPulse 1.8s ease-in-out infinite;transition:transform .25s ease}
  @keyframes foldPulse{0%,100%{box-shadow:var(--sh-sm)}50%{box-shadow:var(--sh-md)}}
  .sect-fold>summary:hover::after{animation:none}
  .sect-fold[open]>summary::after{transform:rotate(180deg);animation:none}
  .sect-fold[open]>summary{margin-bottom:14px}
  .sect-fold>*:not(summary){text-align:left}
  /* Текст кнопки-раскрывашки: «Открыть…» когда свёрнуто, «Скрыть…» когда развёрнуто */
  .sect-fold>summary .fold-when-open{display:none}
  .sect-fold[open]>summary .fold-when-closed{display:none}
  .sect-fold[open]>summary .fold-when-open{display:inline}

  /* Тег без плашки: только белый текст (плашка-овал убрана) */
  /* мелкая юридическая сноска под блоком (Meta и т.п.) */
  .legal-note{margin-top:26px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.55);max-width:820px;text-align:left}
  .tabsec-light .legal-note,.reports-sec .legal-note{color:var(--muted)}
  .tag.tag-plain,
  .hero .tag.tag-plain{background:transparent;border-color:transparent;box-shadow:none;color:#fff;padding-left:0;padding-right:0}
  .fold-stack{display:flex;flex-direction:column}
  .fold-stack .fold-examples{order:2}
  .fold-stack .fold-requests{order:3}
  .req-intro{color:rgba(255,255,255,.82);font-size:var(--fs-xs);line-height:1.5;text-align:center;max-width:760px;margin:0 auto 18px}
  .req-list{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto}
  .req-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:15px 20px;box-shadow:var(--shadow)}
  .req-q{font-weight:800;color:var(--navy);font-size:var(--fs-xs);margin-bottom:6px}
  .req-a{color:#3a4652;font-size:var(--fs-xs);line-height:1.5}
  .req-a b{color:var(--navy)}
  /* Компактная строка «сопровождение» в объединённом блоке запуска */
  .support-strip{display:flex;flex-wrap:wrap;gap:14px;max-width:1060px;margin:34px auto 0;justify-content:center}
  .sup-item{flex:1 1 232px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;box-shadow:var(--shadow);font-size:var(--fs-xs);color:var(--muted);line-height:1.5;text-align:left;transition:transform .15s ease,border-color .15s ease}
  .sup-item:hover{transform:translateY(-3px);border-color:var(--blue)}
  .sup-item b{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:var(--fs-xs);margin-bottom:4px}
  .sup-item .sd{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}

  /* Partner */
  #service .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#bfe0fb}
  .partner-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;margin-top:48px;align-items:stretch}
  .pcalc,.ptiers{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
       border-radius:var(--r-lg);padding:30px 30px;color:#fff}
  .pcalc-h,.ptiers-h{font-weight:800;font-size:var(--fs-md);margin-bottom:22px}
  .pcalc-lab{display:block;color:rgba(255,255,255,.72);font-size:var(--fs-2xs);margin-bottom:14px}
  .pcalc-range{width:100%;accent-color:#34d399;height:6px;cursor:pointer}
  .pcalc-turn{font-weight:700;font-size:var(--fs-sm);margin-top:12px}
  .pcalc-out{margin-top:24px;background:linear-gradient(135deg,rgba(52,211,153,.18),rgba(30,155,240,.10));
       border:1px solid rgba(52,211,153,.32);border-radius:var(--r-md);padding:22px 24px}
  .pcalc-out-lab{color:rgba(255,255,255,.82);font-size:var(--fs-2xs)}
  .pcalc-big{color:#34d399;font-weight:800;font-size:var(--fs-2xl);line-height:1.05;margin-top:6px}
  .pcalc-mo{font-size:var(--fs-sm);color:rgba(255,255,255,.75);font-weight:700}
  .pcalc-note{color:rgba(255,255,255,.6);font-size:var(--fs-2xs);margin-top:8px}
  .ptier{display:flex;justify-content:space-between;align-items:center;border-radius:var(--r-md);
       padding:14px 20px;margin-bottom:11px;border:1px solid rgba(255,255,255,.12)}
  .ptier-n{color:rgba(255,255,255,.92);font-size:var(--fs-xs);font-weight:600}
  .ptier-p{font-weight:800;font-size:var(--fs-md)}
  .ptier.t1{background:rgba(56,189,248,.13)} .ptier.t1 .ptier-p{color:#38bdf8}
  .ptier.t2{background:rgba(52,211,153,.13)} .ptier.t2 .ptier-p{color:#34d399}
  .ptier.t3{background:rgba(251,191,36,.13)} .ptier.t3 .ptier-p{color:#fbbf24}
  .ptier.t4{background:linear-gradient(135deg,rgba(255,178,0,.24),rgba(255,122,0,.14));
       border-color:rgba(255,178,0,.42)} .ptier.t4 .ptier-p{color:#ffb200}
  .ptier{width:100%;font-family:inherit;text-align:left;cursor:pointer;
       transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .18s ease,box-shadow .18s ease}
  .ptier:hover{transform:translateX(3px);border-color:rgba(255,255,255,.34)}
  .ptier.is-on{border-color:rgba(52,211,153,.75);box-shadow:var(--sh-md),0 0 0 1px rgba(52,211,153,.4) inset}
  .ptiers-hint{text-align:center;font-size:var(--fs-2xs);color:rgba(255,255,255,.6);margin-top:10px}
  .ptiers-second{color:var(--yellow);font-weight:700;font-size:var(--fs-xs);margin-top:12px;text-align:center}
  .partner-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
       border-radius:var(--r-lg);padding:40px 32px;text-align:center}
  .partner-stat .pbig{font-size:var(--fs-3xl);font-weight:800;color:#34d399;line-height:1}
  .partner-stat .pl{color:rgba(255,255,255,.85);font-size:var(--fs-xs);margin-top:8px}
  .partner-tiers{margin-top:20px;display:flex;flex-direction:column;gap:8px;text-align:left}
  .partner-tiers div{display:flex;justify-content:space-between;align-items:center;
       background:rgba(255,255,255,.1);border-radius:var(--r-sm);padding:9px 16px}
  .partner-tiers span{color:rgba(255,255,255,.9);font-size:var(--fs-xs)}
  .partner-tiers b{color:#fff;font-weight:800;font-size:var(--fs-sm)}
  .partner-second{margin-top:14px;color:var(--yellow);font-weight:700;font-size:var(--fs-xs)}

  /* Demo call (Zoom) */
  .demo-box{max-width:920px;margin:0 auto;background:radial-gradient(620px 360px at 82% -12%,rgba(56,189,248,.30),transparent),linear-gradient(158deg,#123255,#0e2a49);border:0;border-radius:var(--r-lg);
       padding:52px 44px;text-align:center;color:#fff;box-shadow:var(--sh-lg)}
  .demo-ic{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.16);
       color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
  .demo-ic svg{width:38px;height:38px}
  .demo-box h2{font-size:var(--fs-xl);color:#fff}
  .demo-box .lead3{color:rgba(255,255,255,.9);font-size:var(--fs-sm);max-width:640px;margin:16px auto 0;line-height:1.6}
  .demo-points{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
  .demo-points span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:var(--fs-xs);padding:9px 18px;border-radius:var(--r-pill)}
  .demo-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

  /* Community (Telegram) */
  .community-box{background:radial-gradient(620px 360px at 82% -12%,rgba(56,189,248,.30),transparent),linear-gradient(158deg,#123255,#0e2a49);border-radius:var(--r-lg);padding:60px;
       text-align:center;color:#fff;position:relative;overflow:hidden}
  .tg-icon{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.16);
       display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:#fff}
  .tg-icon svg{width:42px;height:42px}
  .community-box h2{color:#fff;font-size:var(--fs-2xl)}
  .community-box .lead2{color:rgba(255,255,255,.92);font-size:var(--fs-md);max-width:620px;margin:16px auto 0;line-height:1.55}
  .community-topics{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:30px auto 34px;max-width:720px}
  .community-topics span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);
       border-radius:var(--r-pill);padding:9px 18px;font-size:var(--fs-xs);font-weight:600}

  /* CTA */
  .cta-final{background:radial-gradient(760px 430px at 78% -22%,rgba(56,189,248,.32),transparent),linear-gradient(158deg,#123255,#0e2a49);border-radius:var(--r-lg);
       padding:64px;text-align:center;color:#fff;position:relative;overflow:hidden}
  .cta-final h2{font-size:var(--fs-2xl)}
  .cta-final p{color:rgba(255,255,255,.9);font-size:var(--fs-md);margin:14px auto 32px;max-width:560px}
  .cta-final .btn-yellow{padding:18px 44px;font-size:var(--fs-sm)}

  /* Footer */
  footer{background:#0c2c49;color:#a7bad0;padding:64px 0 40px;margin-top:0}
  .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #1c4468}
  footer .logo{color:#fff}
  footer .logo small{color:#7f8db0}
  .foot-col h4{color:#fff;font-size:var(--fs-xs);margin-bottom:16px}
  .foot-col a{display:block;color:#aeb9d4;font-size:var(--fs-xs);padding:6px 0;transition:color .15s}
  .foot-col a:hover{color:#fff}
  .foot-desc{font-size:var(--fs-xs);margin-top:16px;max-width:280px;color:#8b98ba}
  .foot-bottom{padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:var(--fs-2xs);color:#7f8db0}

  .note{background:#fff7cc;border:1px solid #ffe27a;color:#7a5c00;font-size:var(--fs-xs);
        padding:14px 20px;border-radius:var(--r-md);text-align:center;margin:0 auto 0;max-width:1180px}

  /* Problem -> Solution */
  /* ===== Секция с переключателями: «Без SCAN / Со SCAN», «Для кого», «Инструменты роста» ===== */
  .tabsec{color:#fff;scroll-margin-top:88px;background:transparent;padding-top:18px}
  .tabsec h2,.tabsec h3{color:#fff}
  .tabsec .sub{color:rgba(255,255,255,.86)}
  /* заголовки вкладок — в одну-две широкие строки, а не узким столбиком */
  .tabsec .tab-pane>.center{max-width:1000px !important}
  .tabsec .tab-pane>.center .sub{max-width:720px;text-wrap:balance}
  /* строки разбиваются ровно, без коротких «хвостов» */
  .tabsec h2,.tabsec .sub{text-wrap:balance}
  /* синий блок с вкладками вне общей полосы — со своим фоном */
  .blue-solid{position:relative;padding:64px 0 72px;
       background:
         radial-gradient(900px 520px at 12% -8%,rgba(52,211,153,.13),transparent),
         radial-gradient(900px 540px at 88% 6%,rgba(30,155,240,.22),transparent),
         linear-gradient(180deg,#113058 0%,#0f2b4a 48%,#123457 100%)}
  .blue-solid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
       background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
       background-size:56px 56px;
       -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 72%,transparent);
       mask-image:linear-gradient(180deg,transparent,#000 20%,#000 72%,transparent)}
  .blue-solid>*{position:relative;z-index:1}
  .blue-solid .guar-item{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  .blue-solid .guar-item p{color:rgba(255,255,255,.82)}
  .blue-solid .community-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
  /* светлая версия блока с вкладками — для секций на сером фоне */
  .tabsec-light{color:var(--ink);background:#f5f7fa;padding-top:48px}
  .tabsec-light h2,.tabsec-light h3{color:var(--navy)}
  .tabsec-light .sub{color:var(--muted)}
  .tabsec-light .tabs-nav{border-bottom-color:var(--line)}
  .tabsec-light .tab-btn{color:var(--muted)}
  .tabsec-light .tab-btn:hover,.tabsec-light .tab-btn.is-active{color:var(--navy)}
  .tabsec-light .tab-btn::after{background:var(--blue)}
  /* тёмные карточки внутри светлого блока сохраняют белый текст */
  .tabsec-light .demo-box h2,.tabsec-light .demo-box h3,
  .tabsec-light .cta-strip h2,.tabsec-light .cta-strip h3,
  .tabsec-light .community-box h2,.tabsec-light .community-box h3{color:#fff}
  .tabs-nav{display:flex;gap:38px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.24);margin-bottom:46px}
  .tab-btn{appearance:none;background:none;border:0;padding:0 0 15px;margin:0;cursor:pointer;
       font-family:inherit;font-size:var(--fs-md);font-weight:800;letter-spacing:-.2px;
       color:rgba(255,255,255,.62);position:relative;transition:color .2s ease}
  .tab-btn:hover{color:#fff}
  .tab-btn.is-active{color:#fff}
  .tab-btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:var(--r-sm);
       background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.16,1,.3,1)}
  .tab-btn.is-active::after{transform:scaleX(1)}
  .tab-pane{display:none}
  .tab-pane.is-active{display:block;animation:tabIn .38s cubic-bezier(.16,1,.3,1)}
  /* Вкладок больше нет: панели идут одна под другой как самостоятельные темы.
     Разделяем их воздухом и тонкой линией, иначе темы слипаются в одну простыню. */
  .tab-pane.is-active + .tab-pane.is-active{margin-top:78px;padding-top:78px;border-top:1px solid rgba(255,255,255,.14)}
  .tabsec-light .tab-pane.is-active + .tab-pane.is-active{border-top-color:var(--line)}
  .tab-pane[id]{scroll-margin-top:96px}
  @keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  /* карточки внутри — стеклянные, чтобы читались на синем */
  .tabsec .card,.tabsec .aud-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
       box-shadow:var(--sh-lg)}
  .tabsec .card:hover,.tabsec .aud-card:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
  .tabsec .card p,.tabsec .aud-card li,.tabsec .aud-card .aud-lead{color:rgba(255,255,255,.84)}
  .tabsec .aud-card li b,.tabsec .card h3,.tabsec .aud-card h3{color:#fff}
  .tabsec .card .ic,.tabsec .aud-card .ic{background:rgba(255,255,255,.16);color:#fff}
  .tabsec .aud-card .aud-lead{border-bottom-color:rgba(255,255,255,.18)}
  .tabsec .ps-micro{color:rgba(255,255,255,.86)}
  .tabsec .ps-micro b{color:#7ee2b8}
  /* аккордеоны внутри синего блока — стеклянные, со светлым текстом */
  .tabsec:not(.tabsec-light) .faq details{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
  .tabsec:not(.tabsec-light) .faq details:hover,
  .tabsec:not(.tabsec-light) .faq details[open]{border-color:rgba(125,211,252,.5);box-shadow:var(--sh-lg)}
  .tabsec:not(.tabsec-light) .faq details p{color:rgba(255,255,255,.84)}
  .tabsec:not(.tabsec-light) .faq summary:hover{color:#7dd3fc}
  .tabsec:not(.tabsec-light) .faq .sum-teaser{color:rgba(255,255,255,.62)}
  /* стеклянная CTA-полоса — только в тёмных блоках; в светлых остаётся синий градиент */
  .tabsec:not(.tabsec-light) .cta-strip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
  /* схема интеграций внутри синей секции */
  .tabsec .df-group{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);
       box-shadow:var(--sh-lg)}
  .tabsec .df-group-manual{border-style:dashed;border-color:rgba(255,255,255,.34)}
  .tabsec .df-group-h{color:rgba(255,255,255,.66)}
  .tabsec .df-chips span{color:#fff}
  .tabsec .df-wire{background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(125,211,252,.75))}
  .tabsec .df-pkt{background:#7dd3fc;box-shadow:var(--sh-sm)}
  .tabsec .df-wire-out .df-pkt{background:#34d399;box-shadow:var(--sh-sm)}
  .tabsec .df-hub{position:relative;background:linear-gradient(158deg,#3aa4ff 0%,#1668dc 44%,#061529 100%);
       box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.22) inset}
  .tabsec .df-hub::after{content:"";position:absolute;inset:-26px;z-index:-1;border-radius:var(--r-xl);
       background:radial-gradient(52% 52% at 50% 50%,rgba(125,211,252,.5),transparent 72%);
       filter:blur(16px);animation:hubGlow 3.6s ease-in-out infinite}
  @keyframes hubGlow{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
  .tabsec .sect-fold>summary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
  .tabsec .sect-fold>summary:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
  .tabsec .mini-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  .tabsec .mini-card p{color:rgba(255,255,255,.84)}

  /* ===== Живая панель «Без SCAN / Со SCAN» ===== */
  .swx{max-width:1000px;margin:38px auto 0}
  .swx-switch{position:relative;display:flex;gap:4px;padding:5px;width:max-content;margin:0 auto 26px;
       background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);
       box-shadow:var(--sh-md)}
  .swx-opt{position:relative;z-index:2;appearance:none;background:none;border:0;cursor:pointer;
       font-family:inherit;font-size:var(--fs-xs);font-weight:800;letter-spacing:-.2px;color:rgba(255,255,255,.72);
       padding:11px 26px;border-radius:var(--r-pill);transition:color .26s ease}
  .swx-opt.is-on{color:var(--navy)}
  .swx-thumb{position:absolute;z-index:1;top:5px;left:5px;height:calc(100% - 10px);border-radius:var(--r-pill);
       background:#fff;box-shadow:var(--sh-md);
       transition:transform .34s cubic-bezier(.16,1,.3,1),width .34s cubic-bezier(.16,1,.3,1),background .3s ease}
  .swx-panel{position:relative;border-radius:var(--r-lg);overflow:hidden;
       background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
       box-shadow:var(--sh-lg);transition:border-color .4s ease,box-shadow .4s ease}
  .swx-panel[data-mode="on"]{border-color:rgba(125,211,252,.42);box-shadow:var(--sh-lg),0 0 0 1px rgba(125,211,252,.2) inset}
  .swx-chrome{display:flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(3,15,40,.34);
       border-bottom:1px solid rgba(255,255,255,.12)}
  .swx-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.28)}
  .swx-file{margin-left:10px;font-size:var(--fs-2xs);font-weight:700;color:rgba(255,255,255,.72)}
  .swx-state{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-2xs);font-weight:700;
       color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
       padding:5px 12px;border-radius:var(--r-pill);transition:.35s ease}
  .swx-state i{width:8px;height:8px;border-radius:50%;background:#f0402c;box-shadow:0 0 0 4px rgba(240,64,44,.22);transition:.35s ease}
  .swx-panel[data-mode="on"] .swx-state{color:#a7f3d0;background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.4)}
  .swx-panel[data-mode="on"] .swx-state i{background:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.24);animation:swxPulse 1.8s ease-in-out infinite}
  @keyframes swxPulse{0%,100%{box-shadow:0 0 0 4px rgba(18,183,106,.24)}50%{box-shadow:0 0 0 8px rgba(18,183,106,.06)}}
  .swx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
  .swx-kpi{background:rgba(8,26,52,.34);padding:20px 22px 18px;transition:background .4s ease}
  .swx-panel[data-mode="on"] .swx-kpi{background:rgba(8,26,52,.2)}
  .swx-lb{font-size:var(--fs-3xs);font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .swx-val{margin-top:10px;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.8px;line-height:1.05;
       color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;transition:color .4s ease}
  .swx-panel[data-mode="on"] .swx-val{color:#fff}
  .swx-panel[data-mode="on"] .swx-kpi:nth-child(1) .swx-val{color:#5eead4}
  .swx-panel[data-mode="on"] .swx-kpi:nth-child(2) .swx-val{color:#fbbf24}
  .swx-note{margin-top:8px;font-size:var(--fs-2xs);line-height:1.4;color:rgba(255,255,255,.6);transition:color .4s ease}
  .swx-panel[data-mode="on"] .swx-note{color:rgba(255,255,255,.8)}
  .swx-body{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}
  .swx-chart{position:relative;background:rgba(8,26,52,.3);padding:18px 20px 10px}
  .swx-chart-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
  .swx-legend{font-size:var(--fs-2xs);font-weight:700;color:rgba(255,255,255,.55);transition:color .4s ease}
  .swx-panel[data-mode="on"] .swx-legend{color:#7dd3fc}
  .swx-chart svg{width:100%;height:150px;display:block;overflow:visible}
  .swx-grid line{stroke:rgba(255,255,255,.1);stroke-width:1}
  .swx-noise{fill:none;stroke:rgba(255,255,255,.42);stroke-width:2;stroke-linejoin:round;
       stroke-dasharray:5 5;opacity:1;transition:opacity .4s ease}
  .swx-line{fill:none;stroke:#38bdf8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
       filter:drop-shadow(0 4px 12px rgba(56,189,248,.5));
       stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0;transition:opacity .3s ease}
  .swx-area{fill:url(#swxFill);opacity:0;transition:opacity .6s ease .25s}
  .swx-panel[data-mode="on"] .swx-noise{opacity:0}
  .swx-panel[data-mode="on"] .swx-line{opacity:1;animation:swxDraw 1.05s cubic-bezier(.16,1,.3,1) forwards}
  .swx-panel[data-mode="on"] .swx-area{opacity:1}
  @keyframes swxDraw{to{stroke-dashoffset:0}}
  .swx-q{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:var(--fs-3xl);font-weight:800;
       color:rgba(255,255,255,.16);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
  .swx-panel[data-mode="on"] .swx-q{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  .swx-rows{background:rgba(8,26,52,.3);padding:14px 20px 16px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  .swx-row{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:var(--fs-xs)}
  .swx-row+.swx-row{border-top:1px solid rgba(255,255,255,.09)}
  .swx-src{display:flex;align-items:center;gap:9px;font-weight:700;color:rgba(255,255,255,.9);flex:1;min-width:0}
  .swx-src i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .swx-money{font-weight:800;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.45);white-space:nowrap;transition:color .4s ease}
  .swx-panel[data-mode="on"] .swx-money{color:#fff}
  .swx-chip{flex:0 0 auto;font-size:var(--fs-3xs);font-weight:800;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;
       background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.14);transition:.35s ease}
  .swx-chip.is-good{background:rgba(16,185,129,.16);color:#6ee7b7;border-color:rgba(16,185,129,.42)}
  .swx-chip.is-bad{background:rgba(240,64,44,.16);color:#fca5a5;border-color:rgba(240,64,44,.42)}
  .swx-foot{padding:15px 22px;background:rgba(3,15,40,.3);border-top:1px solid rgba(255,255,255,.12);
       font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.78);text-align:center}
  .swx-flash{animation:swxFlash .5s ease}
  @keyframes swxFlash{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
  @media(max-width:820px){
    .swx-kpis{grid-template-columns:repeat(2,1fr)}
    .swx-body{grid-template-columns:1fr}
    .swx-val{font-size:var(--fs-lg)}
  }
  @media(max-width:480px){
    .swx-opt{padding:10px 16px;font-size:var(--fs-xs)}
    .swx-kpi{padding:16px}
    .swx-row{font-size:var(--fs-2xs);flex-wrap:wrap}
  }

  /* ===== Витрина ролей «Для кого»: список слева, живое превью экрана справа ===== */
  .roles{display:grid;grid-template-columns:266px 1fr;gap:22px;margin-top:40px;align-items:start}
  .roles-nav{display:flex;flex-direction:column;gap:8px}
  .role-nav-i{position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;
       appearance:none;cursor:pointer;font-family:inherit;font-size:var(--fs-xs);font-weight:800;color:rgba(255,255,255,.72);
       background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:14px 16px;
       overflow:hidden;transition:background .24s ease,border-color .24s ease,color .24s ease,transform .24s cubic-bezier(.16,1,.3,1)}
  .role-nav-i:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateX(3px)}
  .role-nav-i.is-on{background:rgba(255,255,255,.15);border-color:rgba(125,211,252,.5);color:#fff;
       box-shadow:var(--sh-md)}
  .role-ic{flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
       background:rgba(255,255,255,.14);color:#fff;transition:background .24s ease,transform .24s cubic-bezier(.16,1,.3,1)}
  .role-ic svg{width:19px;height:19px}
  .role-nav-i.is-on .role-ic{background:linear-gradient(150deg,#4fb0ff,#1668dc);transform:scale(1.06)}
  .role-nm{flex:1;min-width:0}
  /* полоска-таймер автопоказа */
  .role-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1);opacity:0}
  .role-nav-i.is-on .role-bar{opacity:1}
  .role-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7dd3fc,#ffcc00)}
  .role-nav-i.is-on.is-timing .role-bar i{animation:roleTick 6s linear forwards}
  @keyframes roleTick{from{width:0}to{width:100%}}

  .roles-stage{position:relative;border-radius:var(--r-lg);background:rgba(255,255,255,.07);
       border:1px solid rgba(255,255,255,.18);box-shadow:var(--sh-lg);overflow:hidden;min-height:404px}
  .role-pane{display:none;grid-template-columns:1fr 1.12fr;gap:0}
  .role-pane.is-on{display:grid;animation:roleIn .45s cubic-bezier(.16,1,.3,1)}
  @keyframes roleIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .role-text{padding:28px 26px 26px}
  .role-text h3{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.4px}
  .role-lead{margin-top:8px;font-size:var(--fs-xs);line-height:1.5;color:rgba(255,255,255,.82)}
  .role-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
  .role-list li{position:relative;padding-left:30px;font-size:var(--fs-xs);line-height:1.45;color:rgba(255,255,255,.88)}
  .role-list li .em{position:absolute;left:0;top:0;font-size:var(--fs-sm)}
  .role-list li b{font-weight:800;color:#fff}
  .role-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .role-chips span{font-size:var(--fs-2xs);font-weight:800;padding:6px 12px;border-radius:var(--r-pill);
       background:rgba(125,211,252,.14);color:#bae6fd;border:1px solid rgba(125,211,252,.34)}
  .role-shot{position:relative;margin:0;padding:22px 22px 22px 0;display:flex;flex-direction:column;justify-content:center;gap:10px}
  .role-shot img{width:100%;display:block;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.2);
       box-shadow:var(--sh-lg);background:#fff;
       animation:roleShot .6s cubic-bezier(.16,1,.3,1) both .1s}
  @keyframes roleShot{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
  .role-shot figcaption{font-size:var(--fs-2xs);font-weight:700;color:rgba(255,255,255,.66);text-align:center}
  @media(max-width:980px){
    .roles{grid-template-columns:1fr;gap:16px}
    .roles-nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
    .role-nav-i{flex:0 0 auto;padding:11px 15px;font-size:var(--fs-xs)}
    .role-nav-i:hover{transform:none}
    .role-ic{width:30px;height:30px;border-radius:var(--r-sm)}
    .role-ic svg{width:16px;height:16px}
    .roles-stage{min-height:0}
    .role-pane.is-on{grid-template-columns:1fr}
    .role-shot{padding:0 22px 22px}
  }

  /* ===== Витрина инструментов: плитки + живое превью экрана ===== */
  .tools{margin-top:38px}
  .tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
  .tool-t{display:flex;align-items:center;gap:11px;text-align:left;appearance:none;cursor:pointer;
       font-family:inherit;font-size:var(--fs-xs);font-weight:800;line-height:1.25;color:rgba(255,255,255,.8);
       background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:12px 14px;
       transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s cubic-bezier(.16,1,.3,1)}
  .tool-t:hover{background:rgba(255,255,255,.13);color:#fff;transform:translateY(-3px)}
  .tool-t.is-on{background:rgba(255,255,255,.16);border-color:rgba(125,211,252,.55);color:#fff;
       box-shadow:var(--sh-lg)}
  .tool-ic{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
       background:rgba(255,255,255,.14);color:#fff;transition:background .22s ease,transform .22s cubic-bezier(.16,1,.3,1)}
  .tool-ic svg{width:17px;height:17px}
  .tool-t.is-on .tool-ic{background:linear-gradient(150deg,#4fb0ff,#1668dc);transform:scale(1.06)}
  .tool-nm{min-width:0;overflow-wrap:break-word}

  .tools-view{display:grid;grid-template-columns:1.35fr 1fr;gap:0;margin-top:16px;border-radius:var(--r-lg);overflow:hidden;
       background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);box-shadow:var(--sh-lg)}
  .tool-shot{margin:0;padding:22px;display:flex;align-items:center}
  .tool-shot img{width:100%;display:block;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.2);
       box-shadow:var(--sh-lg);background:#fff}
  .tool-shot.is-swap img{animation:toolShot .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes toolShot{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  .tool-text{padding:28px 28px 28px 6px;display:flex;flex-direction:column;justify-content:center;
       border-left:1px solid rgba(255,255,255,.12)}
  .tool-text.is-swap>*{animation:toolText .45s cubic-bezier(.16,1,.3,1) both}
  .tool-text.is-swap>*:nth-child(2){animation-delay:.05s}
  .tool-text.is-swap>*:nth-child(3){animation-delay:.1s}
  .tool-text.is-swap>*:nth-child(4){animation-delay:.15s}
  @keyframes toolText{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .tool-kicker{font-size:var(--fs-3xs);font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#7dd3fc}
  .tool-text h3{margin-top:10px;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.4px;line-height:1.2}
  .tool-text p{margin-top:12px;font-size:var(--fs-xs);line-height:1.55;color:rgba(255,255,255,.85)}
  .tool-text p b{color:#fff}
  .tool-cap{margin-top:16px;font-size:var(--fs-2xs);font-weight:700;color:rgba(255,255,255,.6);
       padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
  .tool-hint{margin-top:10px;font-size:var(--fs-2xs);font-weight:700;color:rgba(255,255,255,.45)}
  @media(max-width:900px){
    .tools-view{grid-template-columns:1fr}
    .tool-text{padding:0 22px 24px;border-left:0}
    .tool-hint{display:none}
  }
  @media(max-width:520px){
    .tools-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
    .tool-t{font-size:var(--fs-2xs);padding:10px 12px}
  }

  /* появление содержимого вкладки — по очереди */
  .tab-pane.is-active .df-row,
  .tab-pane.is-active .df-hub,
  .tab-pane.is-active .df-out,
  .tab-pane.is-active .card,
  .tab-pane.is-active .aud-card{animation:tabRise .6s cubic-bezier(.16,1,.3,1) backwards}
  @keyframes tabRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .tab-pane.is-active .df-row:nth-child(1){animation-delay:.06s}
  .tab-pane.is-active .df-row:nth-child(2){animation-delay:.14s}
  .tab-pane.is-active .df-row:nth-child(3){animation-delay:.22s}
  .tab-pane.is-active .df-hub{animation-delay:.3s}
  .tab-pane.is-active .df-out{animation-delay:.42s}
  .tab-pane.is-active .card:nth-child(3n+2),.tab-pane.is-active .aud-card:nth-child(2){animation-delay:.07s}
  .tab-pane.is-active .card:nth-child(3n),.tab-pane.is-active .aud-card:nth-child(3){animation-delay:.14s}
  .tab-pane.is-active .aud-card:nth-child(4){animation-delay:.21s}
  .tab-pane.is-active .aud-card:nth-child(5){animation-delay:.28s}
  @media(prefers-reduced-motion:reduce){
    .tab-pane.is-active *{animation:none !important}
  }
  @media(max-width:640px){
    .tabs-nav{gap:20px;margin-bottom:32px}
    .tab-btn{font-size:var(--fs-xs);padding-bottom:12px}
  }
  /* CTA под блоком */
  .ps-cta{text-align:center;margin-top:38px}
  .btn-pulse{animation:psPulse 2.4s ease-in-out infinite}
  .btn-pulse:hover{animation:none;transform:translateY(-2px)}
  @keyframes psPulse{0%,100%{box-shadow:var(--sh-md)}
       50%{box-shadow:var(--sh-md)}}
  .ps-micro{margin-top:14px;font-size:var(--fs-xs);color:var(--muted);font-weight:600}
  .ps-micro b{color:var(--green);font-weight:800}

  /* ===== Интерактивное демо — реальные скрины SCAN ===== */
  .demo-app{max-width:1120px;margin:46px auto 0;border-radius:var(--r-md);overflow:hidden;
       box-shadow:var(--sh-lg);border:1px solid var(--line);background:#fff}
  .da-chrome{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#0e355a}
  .da-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.35)}
  .da-url{margin-left:12px;font-size:var(--fs-2xs);color:rgba(255,255,255,.8);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .da-badge{margin-left:auto;background:var(--yellow);color:#3a2d00;font-weight:800;font-size:var(--fs-3xs);padding:4px 11px;border-radius:var(--r-pill);letter-spacing:1.2px;flex:0 0 auto}
  .scr-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
       padding:12px 16px;background:#f4faff;border-bottom:1px solid var(--line);text-align:center}
  .scr-hint2{font-size:var(--fs-xs);color:var(--navy);font-weight:700}
  .scr-hint2 b{color:var(--blue)}
  .scr-hint2 .pt{display:inline-block;animation:ptBounce 1.4s ease-in-out infinite}
  @keyframes ptBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
  /* пульс на кликабельных пунктах меню — видно, что экран интерактивный */
  /* нав-пункты подсвечиваем только рамкой (без заливки — текст виден) */
  .scr-hot-nav:hover{animation:none}
  .scr-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .scr-panhint{display:none;align-items:center;justify-content:center;gap:6px;
       font-size:var(--fs-2xs);color:var(--muted);font-weight:600;padding:6px 12px 2px}
  .scr-stage{position:relative;line-height:0;background:#eef3f8}
  .scr-stage img{width:100%;height:auto;display:block}
  .scr-fade{animation:scrFade .35s ease}
  @keyframes scrFade{from{opacity:0}to{opacity:1}}
  /* кликабельные зоны — всегда видимая подсветка (рамка + свечение-пульс) */
  .scr-hot{position:absolute;z-index:2;cursor:pointer;border-radius:var(--r-sm);
       background:transparent;
       box-shadow:0 0 0 2px rgba(30,155,240,.75);
       animation:hotGlow 1.9s ease-in-out infinite;
       transition:background .12s ease,box-shadow .12s ease}
  @keyframes hotGlow{0%,100%{box-shadow:0 0 0 1.5px rgba(30,155,240,.5)}
       50%{box-shadow:0 0 0 3px rgba(30,155,240,.95)}}
  .scr-hot:hover{background:rgba(30,155,240,.14);box-shadow:0 0 0 3px rgba(30,155,240,1);animation:none}
  .scr-hot::after{content:attr(data-tip);position:absolute;left:50%;top:-30px;transform:translateX(-50%);
       background:var(--navy);color:#fff;font-size:var(--fs-3xs);font-weight:700;line-height:1;padding:5px 8px;border-radius:var(--r-sm);
       white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:5}
  .scr-hot:hover::after{opacity:1}
  /* зона «закрыть» (клик по открытой панели → назад) — без сплошной заливки */
  .scr-hot.scr-back{background:transparent;box-shadow:none;animation:none;border-radius:0}
  .scr-hot.scr-back:hover{background:rgba(16,58,94,.06);box-shadow:none}
  .scr-hot.scr-back::after{content:"✕  Кликните в любом месте, чтобы закрыть";display:block;
       left:50%;top:14px;opacity:.95;background:var(--red);font-size:var(--fs-2xs);padding:7px 14px;border-radius:var(--r-pill)}
  /* размытие личных данных (имена, ID) */
  .scr-blur{position:absolute;z-index:1;pointer-events:none;border-radius:var(--r-sm);
       -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(255,255,255,.03)}
  .da-cta{text-align:center;margin-top:30px}
  @media(max-width:620px){.da-url{display:none}.scr-hint{display:none}}

  /* Видео-эмбед */
  .video-embed{position:relative;max-width:820px;margin:44px auto 0;aspect-ratio:16/9;
       border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--line)}
  .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .video-embed video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
  /* Кнопка «наверх» */
  .to-top{position:fixed;right:26px;bottom:26px;width:52px;height:52px;border-radius:50%;
       background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
       font-size:var(--fs-lg);cursor:pointer;border:0;box-shadow:var(--sh-md);
       opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease,transform .2s ease;z-index:90}
  .to-top.show{opacity:1;visibility:visible}
  .to-top:hover{transform:translateY(-3px)}
  /* Sticky-CTA на мобиле */
  .msticky{display:none}
  @media(max-width:640px){
    .msticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;
       background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
       border-top:1px solid var(--line);box-shadow:var(--sh-md);
       padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
       transform:translateY(130%);transition:transform .32s cubic-bezier(.16,1,.3,1)}
    .msticky.show{transform:translateY(0)}
    .msticky .btn{display:flex;width:100%;justify-content:center;padding:15px;font-size:var(--fs-sm)}
    .to-top{bottom:82px;right:16px;width:46px;height:46px}
  }

  /* Кейсы клиентов */
  .cases-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:40px}
  .case-card{flex:1 1 300px;max-width:344px;background:#fff;border:1px solid var(--line);
       border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--shadow);transition:transform .18s ease}
  .case-card:hover{transform:translateY(-4px)}
  .case-card .cnum{font-size:var(--fs-2xl);font-weight:800;color:var(--blue);line-height:1.05}
  .case-card .cnum.red{color:var(--red)}
  .case-card .cnum.green{color:var(--green)}
  .case-card.pos{border-color:#c9ecdb;background:linear-gradient(180deg,#f5fcf8,#fff)}
  .case-card.neg{border-color:#f2d6d6;background:linear-gradient(180deg,#fdf5f5,#fff)}
  .case-card .clabel{color:var(--muted);font-size:var(--fs-2xs);margin:6px 0 18px}
  .case-card h3{font-size:var(--fs-md);font-weight:800;color:var(--navy);margin-bottom:10px}
  .case-card p{color:#38455f;font-size:var(--fs-xs);line-height:1.55}
  .case-card .cwho{margin-top:16px;padding-top:14px;border-top:1px solid #f0f4fa;
       color:var(--muted);font-size:var(--fs-2xs);font-style:italic}

  /* CTA-полоса по ходу страницы */
  .cta-strip{max-width:900px;margin:56px auto 0;background:linear-gradient(135deg,#0e355a,#1e9bf0);
       border-radius:var(--r-lg);padding:34px 40px;display:flex;align-items:center;justify-content:space-between;
       gap:24px;flex-wrap:wrap;color:#fff;box-shadow:var(--sh-lg)}
  .cta-strip .cs-text{flex:1 1 340px}
  .cta-strip h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:6px}
  .cta-strip p{color:rgba(255,255,255,.9);font-size:var(--fs-xs);line-height:1.5}

  .video-title{text-align:center;font-size:var(--fs-lg);font-weight:800;color:var(--navy);margin-top:56px}
  .video-note{text-align:center;color:var(--muted);font-size:var(--fs-xs);margin-top:8px}
  /* Типы отчётов */
  .reports-note{max-width:820px;margin:44px auto 0;background:#fff;border:1px solid #cfe8fb;
       border-radius:var(--r-md);padding:22px 28px;text-align:center;color:#38455f;font-size:var(--fs-sm);line-height:1.6}
  .reports-note b{color:var(--ink)}
  .reports-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:26px}
  .report-item{flex:1 1 280px;max-width:340px;background:#fff;border:1px solid var(--line);
       border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--shadow)}
  .report-item h4{font-size:var(--fs-sm);font-weight:800;color:var(--navy);margin-bottom:9px}
  .report-item .rep-date{display:inline-block;background:#e4f3fd;color:#1273b8;font-size:var(--fs-2xs);
       font-weight:700;padding:4px 12px;border-radius:var(--r-pill);margin-bottom:11px}
  .report-item p{color:var(--muted);font-size:var(--fs-xs);line-height:1.55}
  .report-item .rep-when{display:block;margin-top:11px;padding-top:11px;border-top:1px solid #f0f4fa;
       color:#38455f;font-size:var(--fs-xs);line-height:1.5}
  .report-item .rep-when b{color:var(--navy)}
  /* Атрибуция */
  .attr-shot{max-width:1060px;margin:36px auto 0;border-radius:var(--r-md);overflow:hidden;
       border:1px solid var(--line);box-shadow:var(--sh-lg)}
  .attr-shot img{width:100%;display:block;cursor:pointer}
  .attr-input{max-width:900px;margin:30px auto 0;background:#0e355a;color:#fff;border-radius:var(--r-md);padding:24px 28px}
  .attr-input h4{font-size:var(--fs-sm);font-weight:800;margin-bottom:14px}
  .attr-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
  .attr-row b{font-size:var(--fs-xs);color:rgba(255,255,255,.75);font-weight:600;min-width:110px}
  .attr-row span{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
       border-radius:var(--r-sm);padding:7px 14px;font-size:var(--fs-xs)}
  .attr-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:20px auto 0}
  .attr-col{background:#fff;border:2px solid var(--line);border-radius:var(--r-md);padding:26px;box-shadow:var(--shadow)}
  .attr-col.first{border-color:#9fd0f7}
  .attr-col.last{border-color:#ffd98a}
  .attr-col h4{font-size:var(--fs-md);font-weight:800;color:var(--navy);margin-bottom:6px}
  .attr-col .sub2{color:var(--muted);font-size:var(--fs-xs);margin-bottom:14px}
  .attr-col ul{list-style:none}
  .attr-col li{padding:9px 0;font-size:var(--fs-xs);color:#38455f;border-top:1px solid #f2f5fa}
  .attr-col li:first-child{border-top:none}
  .attr-res{margin-top:14px;background:#e4f3fd;border-radius:var(--r-sm);padding:13px 16px;
       font-weight:700;color:#1273b8;font-size:var(--fs-xs)}
  .attr-when{margin-top:12px;color:var(--muted);font-size:var(--fs-xs);font-style:italic}
  /* Мини-карточки со скриншотом (блоки дашборда, графики, метрики) */
  .mini-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:44px}
  .mini-card{flex:1 1 300px;max-width:360px;background:#fff;border:1px solid var(--line);
       border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease}
  .mini-card:hover{transform:translateY(-4px)}
  .mini-card img{width:100%;display:block;cursor:pointer;background:#f6f9fc}
  .mini-card .mc-body{padding:20px 22px}
  .mini-card h4{font-size:var(--fs-sm);font-weight:800;color:var(--navy);margin-bottom:7px}
  .mini-card p{color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
  .wide-shot{max-width:1000px;margin:36px auto 0;border-radius:var(--r-md);overflow:hidden;
       border:1px solid var(--line);box-shadow:var(--sh-lg)}
  .wide-shot img{width:100%;display:block;cursor:pointer}

  /* Audience "Для кого" */
  .aud-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px;align-items:stretch}
  .aud-grid>*{min-width:0}
  .aud-card{background:#fff;border:1px solid var(--line);
       border-radius:var(--r-lg);padding:22px 18px;box-shadow:var(--shadow);text-align:left}
  .aud-card .ic{width:46px;height:46px;border-radius:var(--r-md);background:#e4f3fd;color:var(--blue);
       display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);margin:0 0 13px}
  .aud-card .ic svg{width:22px;height:22px}
  .aud-card h3{font-size:var(--fs-sm);font-weight:800;margin-bottom:7px;color:var(--navy)}
  .aud-card .aud-lead{color:var(--muted);font-size:var(--fs-2xs);line-height:1.45;margin-bottom:14px;
       padding-bottom:14px;border-bottom:1px solid var(--line)}
  .aud-card ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .aud-card li{position:relative;padding-left:24px;font-size:var(--fs-2xs);line-height:1.4;color:#3a4652}
  .aud-card li .em{position:absolute;left:0;top:0;font-size:var(--fs-xs)}
  .aud-card li b{font-weight:800;color:var(--navy)}
  @media(max-width:1180px){ .aud-grid{grid-template-columns:repeat(3,1fr)} }
  @media(max-width:760px){ .aud-grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:520px){ .aud-grid{grid-template-columns:1fr} }

  /* Integrations */
  /* Поток данных: источники → бегущие точки → SCAN → отчёты */
  .integr-flow{max-width:1150px;margin:14px auto 0}
  .dataflow{display:flex;align-items:center;gap:0;margin:0}
  .df-rows{flex:1.35;display:flex;flex-direction:column;gap:26px}
  .df-row{display:flex;align-items:center}
  .df-node{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:13px 17px;
        box-shadow:var(--shadow);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:var(--fs-xs)}
  .df-node .di{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
  .df-wire{flex:1;height:2px;position:relative;min-width:54px;
        background:linear-gradient(90deg,rgba(30,155,240,.12),rgba(30,155,240,.5))}
  .df-pkt{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--blue);
        box-shadow:var(--sh-sm);transform:translateY(-50%);animation:pktflow 2.2s linear infinite}
  @keyframes pktflow{0%{left:-2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
  .df-row:nth-child(2) .df-pkt{animation-delay:.55s}
  .df-row:nth-child(3) .df-pkt{animation-delay:1.1s}
  .df-hub{flex:0 0 232px;align-self:center;min-height:400px;border-radius:var(--r-lg);color:#fff;
        background:linear-gradient(160deg,#1668dc,#0B1120);box-shadow:var(--sh-lg);
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:26px}
  .df-hub img{width:100%;max-width:180px;height:auto;object-fit:contain;background:#fff;border-radius:var(--r-md);padding:14px 16px}
  .df-hub b{font-size:var(--fs-xl);letter-spacing:.3px}
  .df-hub small{font-size:var(--fs-xs);color:rgba(255,255,255,.78);line-height:1.4}
  .df-wire-out{flex:0 0 44px}
  .df-wire-out .df-pkt{background:#12b76a;box-shadow:var(--sh-sm);animation-delay:.3s}
  .df-node-out{border-color:#bfe6cf}
  .df-rows{gap:22px}
  .df-group{flex:0 0 auto;width:272px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:13px 15px}
  .df-group-manual{border-style:dashed;border-color:#c3d6ea}
  .df-group-h{font-size:var(--fs-3xs);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:11px}
  .df-chips{display:flex;flex-direction:column;gap:9px}
  .df-chips span{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);font-size:var(--fs-xs)}
  .df-chips i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
  .df-out{position:relative;flex:0 0 auto;width:392px}
  .df-out .fcard{z-index:2}
  .df-out-card{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
        box-shadow:var(--sh-lg);overflow:hidden;text-align:center}
  .df-out-card img{width:100%;display:block;border-bottom:1px solid var(--line)}
  .df-out-card span{display:block;padding:16px 12px;font-weight:800;font-size:var(--fs-md);color:var(--navy)}
  @media(max-width:1180px){ .dataflow{transform:scale(.86);transform-origin:center;margin:-26px 0} }
  @media(max-width:980px){ .dataflow{transform:scale(.72);margin:-58px 0} }
  @media(max-width:680px){
    .integr-flow{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:40px 0 56px}
    .dataflow{transform:none;min-width:1020px;margin:20px 0 0}
  }
  /* Callout: гибкость источников (не только автоматика) */
  .integr-note{margin:26px auto 0;max-width:860px;background:linear-gradient(135deg,#f2f8ff,#ffffff);
       border:1px solid var(--line);border-radius:var(--r-md);padding:22px 26px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow)}
  .integr-note .ic{flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-md);
       background:linear-gradient(135deg,var(--blue),#0e355a);color:#fff;
       display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-md)}
  .integr-note .ic svg{width:24px;height:24px}
  .integr-note p{font-size:var(--fs-xs);line-height:1.55;color:var(--muted)}
  .integr-note b{color:var(--ink);font-weight:800}

  .anchor-only{display:block;height:0;scroll-margin-top:90px}
  /* шапка живого демо — текст во всю ширину, без узкого столбика */
  .demo-head h2,.demo-head .sub{text-wrap:balance}
  .demo-head .sub{max-width:820px}

  /* ===== Тёмная секция «студии» ===== */
  .dark-sec{position:relative;color:#fff;
       background:linear-gradient(180deg,#143b63 0%,#123255 34%,#0f2b4a 68%,#113058 100%)}
  /* подсветку вводим ниже кромки — стыка с предыдущим блоком не видно */
  .dark-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
       background:radial-gradient(900px 540px at 82% 26%,rgba(30,155,240,.20),transparent);
       -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 88%,transparent);
       mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 88%,transparent)}
  .dark-sec::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
       background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
       background-size:56px 56px;
       -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 72%,transparent);
       mask-image:linear-gradient(180deg,transparent,#000 26%,#000 72%,transparent)}
  .dark-sec>*{position:relative;z-index:1}
  .dark-sec h2,.dark-sec h3{color:#fff}
  .dark-sec .sub{color:rgba(255,255,255,.82)}
  .dark-sec .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#bfe0fb}
  .dark-sec .sect-fold>summary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
  .dark-sec .sect-fold>summary:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);color:#fff}
  /* экран продукта на тёмном — как подсвеченный монитор */
  .dark-sec .demo-app{box-shadow:var(--sh-lg);border:0}

  /* ===== Микро-взаимодействия: мягкое свечение кнопок ===== */
  .btn-yellow{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,filter .2s ease}
  .btn-yellow:hover{filter:brightness(1.04)}
  .btn-ghost:hover,.btn-line:hover{box-shadow:0 0 0 1px rgba(30,155,240,.5),0 10px 28px rgba(30,155,240,.24)}

  /* ===== Цифры моноширинные — колонки метрик стоят ровно ===== */
  .stats .n,.cnum,.pn-num,.swx-val,.swx-money,.pco-sum,.pct b,.pcalc-big,.pcalc-turn,
  .partner-stat .pbig,.ptier-p,.fc-num,.mk-kpi .v,.df-chips span{font-variant-numeric:tabular-nums}

  /* ===== Характер: мягкие ауры, светящиеся кромки, стекло ===== */
  /* большие размытые пятна — глубина вместо плоской заливки */
  .hero::before,.blue-band::before,.dark-sec::before,.blue-solid::before{z-index:0}
  .aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
  .aura-blue{background:radial-gradient(circle,rgba(56,189,248,.42),transparent 68%)}
  .aura-teal{background:radial-gradient(circle,rgba(52,211,153,.28),transparent 68%)}
  .aura-violet{background:radial-gradient(circle,rgba(129,140,248,.24),transparent 68%)}
  /* светящаяся кромка сверху у тёмных зон — тонкая линия «прибора» */
  .blue-band,.dark-sec,.blue-solid{box-shadow:inset 0 1px 0 rgba(125,211,252,.16)}
  /* стеклянные карточки на тёмном — чуть светлее и с внутренним светом */
  .tabsec:not(.tabsec-light) .card,
  .tabsec:not(.tabsec-light) .aud-card,
  .tabsec:not(.tabsec-light) .df-group,
  .tabsec:not(.tabsec-light) .faq details,
  .role-nav-i,.tool-t,.roles-stage,.tools-view,.swx-panel{
       backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .tabsec:not(.tabsec-light) .card,
  .tabsec:not(.tabsec-light) .aud-card{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);
       box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.14)}
  .tabsec:not(.tabsec-light) .df-group{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24);
       box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.16)}
  /* активная вкладка — жёлтая линия со свечением */
  .tabsec:not(.tabsec-light) .tab-btn.is-active::after{box-shadow:var(--sh-md)}

  /* Guarantee */
  .guar-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:44px}
  .guar-item{flex:1 1 250px;max-width:282px;text-align:center;padding:32px 26px;
       background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
       transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease}
  .guar-item:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:#bfe0fb}
  .guar-item .ic{width:58px;height:58px;border-radius:var(--r-md);background:#e4f3fd;color:var(--blue);
       display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);margin:0 auto 16px}
  .guar-item h3{font-size:var(--fs-sm);font-weight:800;margin-bottom:6px}
  .guar-item p{color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
  /* CTA после гарантий */
  .guar-cta{text-align:center;margin-top:40px}
  .guar-cta .gc-q{font-size:var(--fs-md);font-weight:800;color:var(--navy);margin-bottom:16px}

  /* Responsive */
  @media(max-width:940px){
    .grid3,.grid-rev,.grid-price,.steps,.stats{grid-template-columns:repeat(2,1fr)}
    .rev-gallery{columns:2}
    .partner-box{grid-template-columns:1fr;padding:40px}
    .partner-grid{grid-template-columns:1fr}
    .pricing-grid{grid-template-columns:1fr}
    .logo-row{grid-template-columns:repeat(3,1fr)}
    .logos .logo-row{grid-template-columns:repeat(3,1fr)}
    .foot-top{grid-template-columns:1fr 1fr}
    h2,.hero h1{font-size:var(--fs-2xl)}
    .price-card.hot{transform:none}
  }
  @media(max-width:640px){
    section{padding:60px 0}
    .menu,.nav-cta .btn-line{display:none}
    .menu .only-mob{display:block;color:var(--blue);font-weight:700}
    .burger{display:block}
    .grid3,.grid-rev,.grid-price,.steps,.stats,.logo-row{grid-template-columns:1fr}
    .step::after{display:none}
    .rev-gallery{columns:1}
    .hero h1{font-size:var(--fs-xl)}
    .cta-final{padding:40px 24px}
    .stats{padding:36px 24px}
    /* Мобильные отступы крупных блоков */
    .demo-box{padding:34px 22px}
    .demo-box h2{font-size:var(--fs-lg)}
    .scr-stage{min-width:600px}
    .scr-scroll{border-radius:0 0 14px 14px}
    .scr-panhint{display:flex}
    .price-card2 .price-table{min-width:0}
    .price-card2 .price-table th:nth-child(3),.price-card2 .price-table td:nth-child(3){display:none}
    .pricing-extra{padding:24px 16px}
    .pay-steps{grid-template-columns:1fr}
    .bonus-mini-row{grid-template-columns:1fr}
    .aud-card{min-height:0}
    .community-box{padding:38px 22px}
    .community-box h2{font-size:var(--fs-lg)}
    .partner-box{padding:30px 22px}
    .cta-strip{padding:26px 24px}
    .cta-strip h3{font-size:var(--fs-md)}
    .attr-input{padding:20px}
    .attr-row b{min-width:100%}
    .attr-col{padding:26px 22px}
    .card{padding:24px 22px}
    .video-title,.rev-subtitle,.bonus-title{font-size:var(--fs-md)}
    .price-table th,.price-table td{padding:12px 16px}
    .faq details,details{padding:18px 20px}
    summary{font-size:var(--fs-sm)}
    .reports-note,.pricing-note{padding:18px 20px;font-size:var(--fs-xs)}
  }
  @media(max-width:940px){
    .attr-cols{grid-template-columns:1fr}
    .hero-top{grid-template-columns:1fr;gap:36px}
    .hero h1{font-size:var(--fs-2xl)}
    .hero .lead{max-width:100%}
  }
  @media(max-width:760px){
  }
  @media(max-width:640px){
    .hero-visual:not(.hero-visual-center){display:none}
    .hero-visual-center{margin-top:36px}
  }

  /* --- Мобильная оптимизация (SaaS-уровень) --- */
  @media(max-width:680px){
    section{padding:54px 0}
    h2{font-size:var(--fs-lg);line-height:1.18;letter-spacing:-.4px}
    .sub{font-size:var(--fs-sm)}
    .hero{padding:60px 0 68px}
    .hero h1{font-size:var(--fs-xl)}
    .hero .lead{font-size:var(--fs-sm)}
    /* Кнопки на всю ширину — удобнее пальцем */
    .hero-cta .btn,.cta-final .btn,.cta-strip .btn,.demo-btns .btn{width:100%;justify-content:center}
    .hero-cta,.demo-btns{width:100%}
    .hero-badges{gap:11px;margin-top:22px}
    .hero-badges div{font-size:var(--fs-xs)}
    .tag{font-size:var(--fs-2xs);padding:6px 14px;letter-spacing:1px}
    .nav{height:64px}
    .logo img{height:34px}
    /* CTA-полосы — в столбик, кнопка снизу */
    .cta-strip{flex-direction:column;text-align:center;gap:18px}
    .cta-final h2{font-size:var(--fs-lg)}
    .cta-final p{font-size:var(--fs-sm)}
    /* Калькулятор */
    .calc{padding:28px 20px}
    .calc label{font-size:var(--fs-sm)}
    .calc-input{display:flex;width:100%}
    .calc-input input[type=number]{flex:1;width:auto;font-size:var(--fs-lg)}
    .calc-result{padding:22px 18px}
    .calc-result .rsum{font-size:var(--fs-2xl)}
    /* Партнёрка / сообщество / демо — крупные заголовки меньше */
    .partner-box h2,.community-box h2,.demo-box h2{font-size:var(--fs-lg)}
    .partner-stat .pbig{font-size:var(--fs-3xl)}
    /* Мини-карточки и отчёты — комфортные отступы */
    .mini-card .mc-body,.report-item{padding:20px}
    /* Отзывы: одна колонка */
    .rev-gallery{columns:1}
    .rev-videos{grid-template-columns:repeat(2,1fr);gap:12px;max-width:360px}
  }
  @media(max-width:420px){
    section{padding:44px 0}
    h2{font-size:var(--fs-lg)}
    .hero h1{font-size:var(--fs-lg)}
    .hero .lead{font-size:var(--fs-sm)}
    .calc-result .rsum{font-size:var(--fs-2xl)}
    .cta-final h2{font-size:var(--fs-lg)}
    .stats .n{font-size:var(--fs-2xl)}
  }


/* ---------------------------------------------------------- */


  :root{
    /* скругления — четыре ступени вместо десятка случайных значений */
    --r-sm:10px;
  --r-xl:32px; --r-md:16px; --r-lg:24px; --r-pill:999px;
    /* тени: форму держит граница, тень только намекает на глубину */
    --sh-sm:0 1px 2px rgba(16,58,94,.06);
    --sh-md:0 4px 16px rgba(16,58,94,.08);
    --sh-lg:0 12px 32px rgba(16,58,94,.10);
    /* единый вертикальный ритм секций */
    --rhythm:clamp(64px, 8vw, 96px);
  }

  /* --- Типографика: плавный размер вместо ступенек ---------------- */
  .hero h1{
    /* верхняя граница подобрана так, чтобы заголовок держался
       в две строки на широком экране и не наезжал на кнопки */
    font-size:clamp(30px, 3.6vw, 46px);
    line-height:1.1;
    letter-spacing:-.02em;
  }
  /* Заголовки секций — в одном характере с первым экраном:
     чуть крупнее прежнего, но легче по начертанию (600 вместо 800). */
  section h2, .cta-final h2{
    font-size:clamp(26px, 3vw, 40px);
    font-weight:600;
    line-height:1.14;
    letter-spacing:-.022em;
  }
  h3{ font-weight:700; letter-spacing:-.012em; }

  /* Подзаголовок под H2 — крупнее и спокойнее, с воздухом до контента */
  section .sub{
    font-size:var(--fs-md);
    line-height:1.5;
    margin-top:14px;
    opacity:.86;
  }
  /* подзаголовки были зажаты в 660px и рвались на три-четыре строки —
     даём им больше ширины, текст ложится в две */
  section .sub.center{ max-width:840px; margin-left:auto; margin-right:auto; }
  .dark-sec .sub.center, .blue-band .sub.center{ max-width:880px; }

  /* надзаголовок-метка перед H2 */
  .eyebrow, .tag{ letter-spacing:.09em; }

  /* --- Кнопки: плотный цвет вместо цветного свечения -------------- */
  .btn{
    border-radius:var(--r-pill);
    transition:transform .18s cubic-bezier(.16,1,.3,1), background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .btn-yellow, .btn-blue, .btn-red, .btn-white{ box-shadow:none; }
  .btn-yellow:hover{ background:#F06E00; box-shadow:var(--sh-md); transform:translateY(-1px); }
  .btn-blue:hover{ background:#1789D8; box-shadow:var(--sh-md); transform:translateY(-1px); }
  .btn-red:hover{ background:#D93724; box-shadow:var(--sh-md); transform:translateY(-1px); }
  .btn-line, .btn-white{ box-shadow:none; }
  .btn-line:hover, .btn-white:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }

  /* --- Карточки: граница даёт форму, тень появляется под курсором -- */
  .card, .aud-card, .report-item{
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:none;
  }
  .card:hover, .aud-card:hover, .report-item:hover{
    border-color:rgba(30,155,240,.45);
    box-shadow:var(--sh-md);
    transform:translateY(-2px);
  }

  /* --- Липкая шапка: тонкая линия вместо мягкого облака ------------ */
  header{ box-shadow:var(--sh-sm); }

  /* Декоративные пятна (.aura) вылезали за правый край и давали
     горизонтальную прокрутку всей страницы. Обрезаем их по своему блоку.
     На уровне html этого делать нельзя — там любое ограничение overflow
     ломает липкую шапку. Секции внутри показываются страховкой sweep(). */
  .blue-band, .dark-sec{ overflow:hidden; }

  /* --- Единый вертикальный ритм ------------------------------------
     Раньше отступы секций гуляли: 18, 48, 54, 64, 72, 88, 96 px.
     Теперь одна величина, которая сама сжимается на узких экранах. */
  section{ padding-top:var(--rhythm); padding-bottom:var(--rhythm); }
  .hero{
    padding-top:clamp(28px, 3.4vw, 54px);
    padding-bottom:clamp(28px, 3.4vw, 52px);
  }
  /* у секций с вкладками свои правила отступов — перекрываем их,
     иначе ритм остаётся рваным (48px у «Подключения» и «Кейсов»,
     64/72px у партнёрского блока) */
  section.tabsec, section.tabsec-light, section.blue-solid{
    padding-top:var(--rhythm);
    padding-bottom:var(--rhythm);
  }
  /* демо и «Интеграции» стоят в одной синей полосе — между ними
     ритм половинный, иначе полоса разваливается на две части */
  section#problem{ padding-top:clamp(12px, 1.6vw, 24px); }

  /* --- Призыв к действию: кольцо вместо оранжевого свечения --------
     Пульсация цветной тенью — приём из макетов конца 2010-х.
     Внимание к кнопке привлекает тонкое расходящееся кольцо. */
  .btn-pulse{ animation:none; position:relative; }
  .btn-pulse::after{
    content:""; position:absolute; inset:-2px;
    border-radius:inherit; border:2px solid var(--orange);
    opacity:0; pointer-events:none;
    animation:scanRing 2.8s cubic-bezier(.16,1,.3,1) infinite;
  }
  @keyframes scanRing{
    0%{ transform:scale(1); opacity:.55 }
    70%,100%{ transform:scale(1.14); opacity:0 }
  }
  .btn-pulse:hover::after{ animation:none; opacity:0; }
  @media(prefers-reduced-motion:reduce){ .btn-pulse::after{ animation:none; opacity:0 } }

  /* =================================================================
     СЕКЦИЯ ОТЧЁТОВ — асимметрия вместо центральной оси
     Слева список тем, справа экран продукта, который меняется при
     наведении. Приём от GeneralMind: содержимое и визуал живут в
     разных колонках, а не выстраиваются по центру друг под другом.
     ================================================================= */
  .reports-sec{ background:var(--bg); }
  /* контейнер шире обычного и колонка списка уже — экран продукта
     занимает больше половины ширины и читается без прищура */
  .reports-sec .wrap{ max-width:1360px; }
  .rp-grid{
    display:grid;
    grid-template-columns:minmax(0,0.66fr) minmax(0,1.34fr);
    gap:clamp(28px, 3.2vw, 52px);
    align-items:center;
  }
  .rp-side h2{ margin-top:14px; text-align:left; }
  .rp-lead{
    margin-top:14px;
    font-size:var(--fs-sm);
    color:var(--muted);
    line-height:1.55;
  }

  .rp-list{ margin-top:30px; }
  .rp-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    width:100%;
    text-align:left;
    background:transparent;
    border:0;
    border-top:1px solid var(--line);
    padding:18px 12px 18px 4px;
    cursor:pointer;
    font-family:inherit;
    color:inherit;
    transition:background-color .18s ease, padding-left .18s ease;
  }
  .rp-item:last-child{ border-bottom:1px solid var(--line); }
  .rp-num{
    font-size:var(--fs-2xs);
    font-weight:700;
    color:var(--muted);
    letter-spacing:.06em;
    padding-top:3px;
    min-width:24px;
    transition:color .18s ease;
  }
  .rp-txt{ display:flex; flex-direction:column; gap:5px; }
  .rp-txt b{ font-size:var(--fs-sm); font-weight:600; letter-spacing:-.01em; }
  .rp-txt i{ font-style:normal; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; }

  .rp-item:hover{ background:rgba(24,144,255,.05); padding-left:12px; }
  .rp-item.is-on{
    background:rgba(24,144,255,.07);
    padding-left:12px;
    box-shadow:inset 3px 0 0 var(--orange);
  }
  .rp-item.is-on .rp-num{ color:var(--orange); }
  .rp-item:focus-visible{ outline:none; box-shadow:inset 3px 0 0 var(--orange), 0 0 0 3px rgba(24,144,255,.35); }

  /* экран продукта — на градиентной подложке, как остальные скриншоты */
  .rp-frame{
    background:linear-gradient(135deg, rgba(24,144,255,.16), rgba(255,196,0,.10));
    padding:clamp(10px, 1.2vw, 18px);
    border-radius:var(--r-lg);
    border:1px solid var(--line);
  }
  .rp-frame img{
    display:block;
    width:100%;
    border-radius:var(--r-md);
    border:1px solid rgba(16,58,94,.10);
  }
  .rp-fade{ animation:rpFade .34s cubic-bezier(.16,1,.3,1); }
  @keyframes rpFade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

  @media(max-width:940px){
    .rp-grid{ grid-template-columns:1fr; gap:28px; }
    .rp-side h2{ text-align:center; }
    .rp-side .eyebrow, .rp-lead{ display:block; text-align:center; }
    .rp-stage{ order:-1; }
  }
  @media(prefers-reduced-motion:reduce){
    .rp-fade{ animation:none }
    .rp-item{ transition:none }
  }

  /* =================================================================
     ПАРТНЁРСКАЯ ПРОГРАММА — самостоятельная секция
     Раньше блок жил внутри .tabsec и брал светлый текст оттуда.
     Став отдельной секцией, он потерял эти правила: тёмно-синий
     заголовок оказался на тёмно-синем фоне.
     ================================================================= */
  .partners-sec{ padding:var(--rhythm) 0; color:#fff; }
  .partners-sec h2,
  .partners-sec h3,
  .partners-sec .eyebrow{ color:#fff; }
  .partners-sec .sub,
  .partners-sec .lead2,
  .partners-sec p{ color:rgba(255,255,255,.86); }
  .partners-sec b{ color:#fff; }

  /* панели калькулятора и уровней — стеклянные, как на других тёмных секциях */
  .partners-sec .pcalc-box,
  .partners-sec .ptiers{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-lg);
    box-shadow:none;
  }
  .partners-sec .ptiers-h{ color:#fff; }
  .partners-sec .pcalc-out-lab,
  .partners-sec .pcalc-note,
  .partners-sec .ptiers-hint{ color:rgba(255,255,255,.7); }

  /* =================================================================
     МАРКЕРЫ ВМЕСТО ЭМОДЗИ
     На странице было около восьмидесяти цветных эмодзи — самая
     заметная примета лендинга, собранного на конструкторе. Смысл,
     который они несли, переехал в графические маркеры одного стиля.
     ================================================================= */

  /* =================================================================
     ЖИВАЯ КАРТОЧКА ВЫРУЧКИ НА ПЕРВОМ ЭКРАНЕ
     Вместо снимка метрики — работающий график: линия прорисовывается,
     заливка проявляется, число набегает, точка на конце пульсирует.
     ================================================================= */
  .fcard-live{ background:transparent; box-shadow:none; }
  .lv{
    background:#fff;
    border:1px solid rgba(16,58,94,.10);
    border-radius:var(--r-md);
    box-shadow:0 10px 30px rgba(4,18,38,.18);
    padding:14px 16px 10px;
  }
  .lv-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .lv-cap{ font-size:var(--fs-3xs); color:var(--muted); font-weight:600; }
  .lv-tag{
    font-size:var(--fs-3xs);
    font-weight:700;
    color:var(--green);
    background:rgba(5,150,105,.10);
    border-radius:var(--r-pill);
    padding:3px 8px;
  }
  .lv-val{
    margin-top:6px;
    font-size:var(--fs-md);
    font-weight:700;
    color:var(--ink);
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }
  .lv-val i{ font-style:normal; font-size:var(--fs-xs); color:var(--muted); }
  .lv-chart{ display:block; width:100%; height:60px; margin-top:6px; overflow:visible; }

  .lv-line{
    fill:none;
    stroke:var(--blue);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:var(--len, 600);
    stroke-dashoffset:var(--len, 600);
  }
  .lv-area{ opacity:0; }
  .lv-dot{ fill:var(--blue); opacity:0; }

  /* запуск анимации — класс вешает скрипт, когда экран виден */
  .lv.is-drawn .lv-line{ animation:lvDraw 1.5s cubic-bezier(.16,1,.3,1) forwards; }
  .lv.is-drawn .lv-area{ animation:lvFill .8s ease .9s forwards; }
  .lv.is-drawn .lv-dot{ animation:lvDotIn .4s ease 1.35s forwards, lvPulse 2.4s ease-in-out 1.75s infinite; }

  @keyframes lvDraw{ to{ stroke-dashoffset:0 } }
  @keyframes lvFill{ to{ opacity:1 } }
  @keyframes lvDotIn{ to{ opacity:1 } }
  @keyframes lvPulse{
    0%,100%{ r:3.4; filter:none }
    50%{ r:4.6 }
  }

  @media(prefers-reduced-motion:reduce){
    .lv.is-drawn .lv-line{ animation:none; stroke-dashoffset:0 }
    .lv.is-drawn .lv-area, .lv.is-drawn .lv-dot{ animation:none; opacity:1 }
  }

  /* =================================================================
     ОТДЕЛЬНАЯ СТРАНИЦА РАЗБОРОВ
     Восемь разборов отчётов занимали четверть всего текста лендинга
     (24 тысячи символов, 53 КБ разметки) и жили в одной вкладке.
     Теперь это самостоятельная страница, а на лендинге — анонс.
     ================================================================= */

  /* шапка страницы разборов */
  .rz-hero{
    background:var(--dark);
    color:#fff;
    padding:clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
  }
  .rz-back{
    display:block;
    width:fit-content;
    font-size:var(--fs-2xs);
    font-weight:600;
    color:rgba(255,255,255,.7);
    margin-bottom:22px;
  }
  .rz-back:hover{ color:#fff; }

  /* На странице разборов обёртки-аккордеоны не нужны: человек пришёл
     именно за содержимым, лишний клик только мешает. */
  .rz-body .sect-fold > summary{ display:none; }
  .rz-body .sect-fold > *:not(summary){ display:block !important; }
  .rz-body .fold-stack{ display:grid; gap:clamp(28px, 3vw, 44px); }
  .rz-hero h1{
    font-size:clamp(30px, 3.6vw, 46px);
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.025em;
    margin:14px 0 0;
    max-width:900px;
    color:#fff;
  }
  .rz-lead{
    margin-top:16px;
    max-width:760px;
    font-size:var(--fs-md);
    line-height:1.5;
    color:rgba(255,255,255,.82);
  }

  /* текущий раздел в шапке */
  .menu a.is-here{ color:var(--ink); font-weight:700; }

  /* --- Раскладка страницы разборов: оглавление слева ----------------
     Контейнер уже основного: длинные строки текста читаются тяжело,
     а страница переставала выглядеть полупустой. */
  .rz-body .wrap{ max-width:1120px; }
  .rz-layout{
    display:grid;
    grid-template-columns:minmax(0,210px) minmax(0,1fr);
    gap:clamp(24px, 3vw, 48px);
    align-items:start;
  }
  .rz-toc{
    position:sticky;
    top:96px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .rz-toc-h{
    font-size:var(--fs-3xs);
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:10px;
  }
  .rz-toc a{
    font-size:var(--fs-xs);
    color:var(--muted);
    padding:9px 12px 9px 14px;
    border-left:2px solid var(--line);
    transition:color .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .rz-toc a:hover{ color:var(--ink); background:var(--bg-soft); }
  .rz-toc a.is-on{
    color:var(--ink);
    font-weight:600;
    border-left-color:var(--orange);
    background:var(--bg-soft);
  }

  /* разделы. Это теги <section>, поэтому они подхватывали общий
     вертикальный ритм страницы (96px сверху и снизу) — свёрнутый
     заголовок занимал 271px вместо 80. Ритм здесь не нужен. */
  .rz-sec{ scroll-margin-top:100px; padding:0; }
  .rz-sec + .rz-sec{ margin-top:clamp(28px, 3.4vw, 48px); }
  /* Заголовок раздела — кнопка: раздел сворачивается целиком */
  .rz-sec-h{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    text-align:left;
    appearance:none;
    background:transparent;
    border:0;
    border-bottom:1px solid var(--line);
    padding:0 4px 16px 0;
    margin-bottom:22px;
    cursor:pointer;
    font-family:inherit;
    color:inherit;
  }
  .rz-sec-h:hover h2{ color:var(--blue); }
  .rz-sec-h:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(24,144,255,.35); border-radius:var(--r-sm); }
  .rz-sec-h h2{
    font-size:clamp(22px, 2.2vw, 30px);
    font-weight:600;
    letter-spacing:-.02em;
    margin:0;
    transition:color .18s ease;
  }
  .rz-sec-h p{
    margin:8px 0 0;
    font-size:var(--fs-xs);
    color:var(--muted);
  }
  /* значок состояния */
  .rz-sec-toggle{
    flex:0 0 auto;
    font-size:26px;
    font-weight:300;
    line-height:1;
    color:var(--muted);
    transition:color .18s ease, transform .22s cubic-bezier(.16,1,.3,1);
  }
  .rz-sec-h:hover .rz-sec-toggle{ color:var(--blue); }

  /* свёрнутое состояние: символ меняет скрипт (− / +), поэтому
     поворачивать его не нужно — иначе плюс превращается в крестик */
  .rz-sec.is-closed .rz-sec-body{ display:none; }
  .rz-sec.is-closed .rz-sec-h{ margin-bottom:0; padding-bottom:14px; }
  .rz-sec.is-closed + .rz-sec{ margin-top:8px; }

  @media(max-width:940px){
    .rz-layout{ grid-template-columns:1fr; }
    .rz-toc{
      position:static;
      flex-direction:row;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:8px;
    }
    .rz-toc-h{ width:100%; margin-bottom:4px; }
    .rz-toc a{
      border-left:0;
      border:1px solid var(--line);
      border-radius:var(--r-pill);
      padding:8px 14px;
    }
    .rz-toc a.is-on{ border-color:var(--orange); }
  }

  .rz-body{ background:var(--bg); padding:clamp(40px, 5vw, 72px) 0; }
  /* внутри разборов текст тёмный — блок переехал с тёмной секции */
  .rz-body, .rz-body h2, .rz-body h3, .rz-body h4, .rz-body b{ color:var(--ink); }
  .rz-body p, .rz-body li, .rz-body .sub{ color:var(--muted); }
  .rz-body summary{ color:var(--ink); }
  .rz-body details{ border-bottom-color:var(--line); }
  .rz-body .faq details{ background:transparent; border-bottom:1px solid var(--line); }
  .rz-body summary::after{ color:var(--muted); }
  .rz-body details[open] summary::after{ color:var(--blue); }
  .rz-body .sect-fold > summary{
    background:var(--card);
    border:1px solid var(--line);
    color:var(--navy);
  }
  .rz-body .ex-cell{ background:var(--bg-soft); border:1px solid var(--line); }
  .rz-body .sum-teaser{ color:var(--muted); }

  .rz-cta{ background:var(--bg-soft); padding:clamp(40px, 5vw, 72px) 0; }
  .rz-cta h2{ font-size:clamp(24px, 2.6vw, 34px); }
  .rz-cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

  /* анонс на лендинге вместо вкладки с текстом */
  .rz-promo{ margin-top:30px; display:flex; justify-content:center; }
  .rz-promo-card{
    display:flex;
    align-items:center;
    gap:20px;
    max-width:760px;
    width:100%;
    padding:24px 26px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-lg);
    transition:border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .rz-promo-card:hover{ border-color:rgba(125,211,252,.5); transform:translateY(-2px); }
  .rz-promo-n{
    font-size:44px;
    font-weight:700;
    line-height:1;
    color:var(--blue);
    flex:0 0 auto;
    font-variant-numeric:tabular-nums;
  }
  .rz-promo-t{ display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
  .rz-promo-t b{ font-size:var(--fs-sm); font-weight:600; color:#fff; }
  .rz-promo-t i{ font-style:normal; font-size:var(--fs-2xs); color:rgba(255,255,255,.62); line-height:1.5; }
  .rz-promo-go{
    flex:0 0 auto;
    font-size:var(--fs-2xs);
    font-weight:700;
    color:var(--orange);
    white-space:nowrap;
  }
  @media(max-width:640px){
    .rz-promo-card{ flex-direction:column; align-items:flex-start; gap:12px; }
  }
  @media(prefers-reduced-motion:reduce){ .rz-promo-card:hover{ transform:none } }

  /* =================================================================
     СТЕНА ОТЗЫВОВ
     Тексты вместо скриншотов: читаются на телефоне, попадают в поиск
     и складываются в колонки разной высоты — живее ровной сетки.
     Оригинал переписки открывается по кнопке как подтверждение.
     ================================================================= */
  /* Галерея скринов переписок: плитки разной высоты в колонках —
     видно сразу все отзывы, клик открывает оригинал. */
  .rg{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
    align-items:start;
    margin-top:34px;
  }
  .rg-col{ display:flex; flex-direction:column; gap:16px; }
  .rg-item{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    appearance:none;
    cursor:pointer;
    overflow:hidden;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-md);
    transition:border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .rg-item img{ display:block; width:100%; height:auto; }
  .rg-item:hover{ border-color:rgba(125,211,252,.5); transform:translateY(-2px); }
  .rg-item:focus-visible{ outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(24,144,255,.35); }
  @media(max-width:1024px){ .rg{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
  @media(max-width:640px){ .rg{ grid-template-columns:1fr } }
  @media(prefers-reduced-motion:reduce){ .rg-item:hover{ transform:none } }

  .rw{
    columns:3;
    column-gap:16px;
    margin-top:34px;
  }
  .rw-item{
    break-inside:avoid;
    margin:0 0 16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-md);
    padding:20px 20px 16px;
    transition:border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .rw-item:hover{ border-color:rgba(125,211,252,.45); transform:translateY(-2px); }
  .rw-item p{
    margin:0 0 10px;
    font-size:var(--fs-xs);
    line-height:1.6;
    color:rgba(255,255,255,.88);
  }
  .rw-item p:last-of-type{ margin-bottom:14px; }
  .rw-item b{ color:#fff; }
  .rw-short p{ font-size:var(--fs-sm); }

  .rw-item footer{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:wrap;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .rw-src{ font-size:var(--fs-3xs); color:rgba(255,255,255,.55); }
  .rw-shot{
    appearance:none;
    background:transparent;
    border:1px solid rgba(255,255,255,.22);
    border-radius:var(--r-pill);
    color:rgba(255,255,255,.8);
    font-family:inherit;
    font-size:var(--fs-3xs);
    font-weight:600;
    padding:5px 12px;
    cursor:pointer;
    transition:border-color .18s ease, color .18s ease;
  }
  .rw-shot:hover{ border-color:#fff; color:#fff; }

  /* оставшиеся переписки — компактной лентой превью */
  .rw-more{ margin-top:26px; text-align:center; }
  .rw-more > span{ display:block; font-size:var(--fs-3xs); color:rgba(255,255,255,.5); margin-bottom:12px; }
  .rw-thumbs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .rw-thumb{
    appearance:none; padding:0; cursor:pointer;
    width:110px; height:74px;
    overflow:hidden;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-sm);
    transition:border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .rw-thumb img{ width:100%; height:100%; object-fit:cover; object-position:left top; display:block; }
  .rw-thumb:hover{ border-color:rgba(125,211,252,.5); transform:translateY(-2px); }

  @media(max-width:1024px){ .rw{ columns:2 } }
  @media(max-width:640px){ .rw{ columns:1 } .rw-thumb{ width:92px; height:62px } }
  @media(prefers-reduced-motion:reduce){
    .rw-item:hover, .rw-thumb:hover{ transform:none }
  }

  /* =================================================================
     ПУТЬ КЛИЕНТА
     Показываем, откуда берётся каждый кусок данных и как SCAN
     связывает их в одну строку отчёта. Этапы загораются по очереди,
     в конце появляется собранная строка — это и есть «сквозная».
     ================================================================= */
  .jr{ margin-top:34px; }
  .jr-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap; margin-bottom:26px;
  }
  .jr-lead{
    margin:0;
    max-width:640px;
    font-size:var(--fs-xs);
    line-height:1.55;
    color:rgba(255,255,255,.8);
  }
  .jr-play{
    appearance:none; cursor:pointer;
    font-family:inherit; font-size:var(--fs-2xs); font-weight:700;
    padding:10px 18px;
    background:transparent;
    border:1px solid rgba(255,255,255,.28);
    border-radius:var(--r-pill);
    color:#fff;
    transition:border-color .18s ease, background-color .18s ease;
  }
  .jr-play:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

  /* лента этапов */
  .jr-track{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:12px;
    position:relative;
  }
  .jr-step{
    position:relative;
    padding:18px 16px 16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-md);
    opacity:.4;
    transform:translateY(6px);
    transition:opacity .32s ease, transform .32s cubic-bezier(.16,1,.3,1), border-color .32s ease;
  }
  .jr-step.is-on{ opacity:1; transform:none; border-color:rgba(125,211,252,.4); }
  /* соединительная линия между этапами */
  .jr-step::after{
    content:"";
    position:absolute;
    top:50%; right:-12px;
    width:12px; height:1px;
    background:rgba(255,255,255,.18);
  }
  .jr-step:last-child::after{ display:none; }
  .jr-dot{
    display:block;
    width:8px; height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    margin-bottom:12px;
    transition:background-color .32s ease, box-shadow .32s ease;
  }
  .jr-step.is-on .jr-dot{ background:#7DD3FC; box-shadow:0 0 0 4px rgba(125,211,252,.18); }
  .jr-src{
    display:block;
    font-size:var(--fs-3xs);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
    margin-bottom:8px;
  }
  .jr-step b{ display:block; font-size:var(--fs-xs); font-weight:600; color:#fff; margin-bottom:5px; }
  .jr-step i{ font-style:normal; font-size:var(--fs-3xs); color:rgba(255,255,255,.62); line-height:1.45; }

  /* строка отчёта */
  .jr-out{
    margin-top:22px;
    padding:22px 24px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-lg);
    opacity:0;
    transform:translateY(10px);
    transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
  }
  .jr-out.is-on{ opacity:1; transform:none; }
  .jr-out-cap{
    display:block;
    font-size:var(--fs-3xs);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin-bottom:14px;
  }
  .jr-row{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:1px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-md);
    overflow:hidden;
  }
  .jr-cell{
    background:#0B2239;
    padding:14px 14px 12px;
    display:flex; flex-direction:column; gap:4px;
  }
  .jr-cell b{
    font-size:var(--fs-sm);
    font-weight:700;
    color:#fff;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
  }
  .jr-cell span{ font-size:var(--fs-3xs); color:rgba(255,255,255,.55); }
  .jr-cell-hot b{ color:#34D399; }
  .jr-note{
    margin:14px 0 0;
    font-size:var(--fs-3xs);
    line-height:1.5;
    color:rgba(255,255,255,.6);
    padding-left:12px;
    border-left:2px solid rgba(255,255,255,.2);
  }

  @media(max-width:1024px){
    .jr-track{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .jr-step::after{ display:none; }
    .jr-row{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  }
  @media(max-width:560px){
    .jr-track{ grid-template-columns:1fr; }
    .jr-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
  @media(prefers-reduced-motion:reduce){
    .jr-step, .jr-out{ transition:none; opacity:1; transform:none; }
  }

  /* =================================================================
     КОНСТРУКТОР ПОДКЛЮЧЕНИЙ
     Посетитель отмечает свои источники и сразу видит, какие отчёты
     станут доступны, а чего не хватит. Схема потоков объясняла
     возможности вообще — этот блок объясняет их применительно к
     конкретной школе.
     ================================================================= */
  .ib{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px, 3vw, 44px);
    align-items:start;
    margin-top:34px;
  }

  .ib-lead{
    font-size:var(--fs-xs);
    color:rgba(255,255,255,.78);
    margin:0 0 20px;
  }
  .ib-group{ margin-bottom:20px; }
  .ib-group-h{
    display:block;
    font-size:var(--fs-3xs);
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
    margin-bottom:10px;
  }
  .ib-chip{
    appearance:none;
    font-family:inherit;
    font-size:var(--fs-2xs);
    font-weight:600;
    cursor:pointer;
    padding:9px 15px 9px 32px;
    margin:0 8px 8px 0;
    position:relative;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-pill);
    color:rgba(255,255,255,.72);
    transition:background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  /* галочка-индикатор слева */
  .ib-chip::before{
    content:"";
    position:absolute;
    left:11px; top:50%;
    width:13px; height:13px;
    margin-top:-6.5px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:4px;
    transition:background-color .18s ease, border-color .18s ease;
  }
  .ib-chip::after{
    content:"";
    position:absolute;
    left:15px; top:50%;
    width:4px; height:8px;
    margin-top:-5px;
    border:solid #0E2A46;
    border-width:0 2px 2px 0;
    transform:rotate(45deg) scale(0);
    transition:transform .18s cubic-bezier(.16,1,.3,1);
  }
  .ib-chip:hover{ border-color:rgba(255,255,255,.4); color:#fff; }
  .ib-chip.is-on{
    background:rgba(255,255,255,.12);
    border-color:rgba(125,211,252,.55);
    color:#fff;
  }
  .ib-chip.is-on::before{ background:#7DD3FC; border-color:#7DD3FC; }
  .ib-chip.is-on::after{ transform:rotate(45deg) scale(1); }
  .ib-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(24,144,255,.4); }

  /* панель результата */
  .ib-out{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-lg);
    padding:24px 24px 22px;
  }
  .ib-out-h{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:12px; padding-bottom:14px; margin-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .ib-out-cap{ font-size:var(--fs-sm); font-weight:600; color:#fff; }
  .ib-count{ font-size:var(--fs-2xs); color:rgba(255,255,255,.6); }
  .ib-count b{ color:#7DD3FC; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }

  .ib-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
  .ib-list li{
    display:flex; align-items:flex-start; gap:11px;
    font-size:var(--fs-xs);
    line-height:1.5;
    color:rgba(255,255,255,.86);
    transition:opacity .22s ease;
  }
  .ib-list li b{ color:#fff; font-weight:600; }
  .ib-list li i{
    flex:0 0 auto;
    width:16px; height:16px;
    margin-top:2px;
    border-radius:50%;
    background:var(--green);
    position:relative;
    transition:background-color .22s ease;
  }
  .ib-list li i::after{
    content:"";
    position:absolute;
    left:5.5px; top:3px;
    width:3px; height:7px;
    border:solid #0E2A46;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  /* недоступный пункт */
  .ib-list li.is-off{ opacity:.34; }
  .ib-list li.is-off i{ background:rgba(255,255,255,.25); }
  .ib-list li.is-off i::after{ display:none; }

  .ib-note{
    margin:18px 0 18px;
    font-size:var(--fs-2xs);
    line-height:1.5;
    color:rgba(255,255,255,.7);
    padding-left:12px;
    border-left:2px solid rgba(255,255,255,.24);
  }
  .ib-note.is-warn{ color:#FFC400; border-left-color:#FFC400; }
  .ib-note.is-ok{ color:#34D399; border-left-color:#34D399; }

  @media(max-width:940px){ .ib{ grid-template-columns:1fr; } }
  @media(prefers-reduced-motion:reduce){
    .ib-chip, .ib-list li, .ib-chip::after{ transition:none }
  }

  /* =================================================================
     КАРТА ПОТОКОВ ДАННЫХ
     Была статичная схема с нарисованными проводами. Стало: по линиям
     бежит свет — видно, что данные действительно текут из систем в
     SCAN и дальше в отчёты. При наведении на группу её поток
     подсвечивается, остальные приглушаются.
     ================================================================= */
  .dataflow{ position:relative; }

  /* провода: бегущий световой импульс вместо статичной линии */
  .df-wire{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.14);
  }
  .df-wire::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(125,211,252,0) 35%,
      var(--blue) 50%,
      rgba(125,211,252,0) 65%,
      transparent 100%);
    background-size:220% 100%;
    background-position:120% 0;
    animation:dfFlow 2.6s linear infinite;
    animation-delay:var(--d, 0s);
  }
  .df-row:nth-child(1) .df-wire::after{ --d:0s; }
  .df-row:nth-child(2) .df-wire::after{ --d:.55s; }
  .df-row:nth-child(3) .df-wire::after{ --d:1.1s; }
  .df-wire-out::after{ --d:1.6s; }
  @keyframes dfFlow{ to{ background-position:-120% 0 } }

  /* точка-пакет из старой схемы больше не нужна */
  .df-pkt{ display:none; }

  /* ядро: мягкое дыхание, чтобы центр читался как «живой» */
  .df-hub{ position:relative; }
  .df-hub::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    border:1px solid rgba(125,211,252,.35);
    opacity:0;
    animation:hubRing 3s cubic-bezier(.16,1,.3,1) infinite;
    pointer-events:none;
  }
  @keyframes hubRing{
    0%{ transform:scale(.86); opacity:.55 }
    70%,100%{ transform:scale(1.18); opacity:0 }
  }

  /* наведение на группу источников подсвечивает её поток */
  .df-group{ transition:border-color .2s ease, background-color .2s ease; }
  .dataflow.is-focus .df-row{ transition:opacity .22s ease; }
  .dataflow.is-focus .df-row:not(.is-lit){ opacity:.42; }
  .df-row.is-lit .df-group{
    border-color:rgba(125,211,252,.55);
    background:rgba(255,255,255,.10);
  }
  .df-row.is-lit .df-wire::after{ animation-duration:1.1s; }

  @media(prefers-reduced-motion:reduce){
    .df-wire::after, .df-hub::before{ animation:none; }
    .df-wire::after{ opacity:.5; background-position:50% 0; }
  }

  /* =================================================================
     НОВЫЙ ОБЛИК — СВЕТЛЫЙ МИНИМАЛИЗМ
     Что убрано: девять многослойных синих градиентов, пять размытых
     пятен .aura, стеклянные карточки с backdrop-filter, декоративные
     столбики на первом экране. Это приёмы 2018–2022 годов, они и
     делали страницу «старой» независимо от содержания.
     Что вместо: плотные заливки, границы вместо теней, белое полотно
     и три тёмные секции для ритма — первый экран, демо и кейсы.
     ================================================================= */
  :root{
    --ink:#0F1729;          /* почти чёрный для текста */
    --bg:#FFFFFF;           /* основное полотно */
    --bg-soft:#F7F8FA;      /* чередование секций */
    --line:#E6EAF0;         /* границы */
    --muted:#5B6B80;        /* вторичный текст */
    --dark:#0E2A46;         /* тёмные секции — плотный цвет, не градиент */
    --dark-2:#0B2239;       /* вложенные поверхности на тёмном */
  }

  body{ background:var(--bg); color:var(--ink); }

  /* --- Тёмные секции: плотный цвет вместо градиентов --------------- */
  .hero,
  .blue-band,
  .dark-sec,
  .blue-solid,
  .partners-sec,
  #cases{
    background:var(--dark);
    box-shadow:none;
  }
  /* декоративные слои этих секций больше не нужны */
  .hero::before, .hero::after,
  .blue-band::before, .blue-band::after,
  .dark-sec::before, .dark-sec::after,
  .blue-solid::before, .blue-solid::after{
    display:none !important;
  }
  .aura, .hero-bars{ display:none !important; }

  /* кейсы тоже тёмные — плотным цветом, без градиента */
  section#cases{ background:var(--dark); }

  /* --- Светлые секции ---------------------------------------------- */
  #how, #pricing, #security, .reports-sec, .trust-sec,
  section.tabsec-light, .stats-sec{
    background:var(--bg);
  }
  /* мягкое чередование, чтобы белое не шло сплошной полосой */
  .reports-sec, #security{ background:var(--bg-soft); }

  /* --- Партнёрская программа и блок вкладок стали светлыми ----------
     Тёмных секций оставляем три — первый экран, демо и кейсы. Пятая
     тёмная полоса подряд перед подвалом делала низ страницы глухим. */
  section#partners, section#service{
    background:var(--bg-soft);
    color:var(--ink);
  }
  section#partners h2, section#partners h3,
  section#service h2,  section#service h3{ color:var(--ink); }
  section#partners p, section#service p,
  section#partners .sub, section#service .sub,
  section#partners .lead2, section#service .lead2{ color:var(--muted); }
  section#partners b, section#service b{ color:var(--ink); }

  /* панели внутри — светлые с границей */
  section#partners .pcalc-box, section#partners .ptiers,
  section#service .guar-item, section#service .community-box{
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--ink);
  }
  /* Весь текст этих секций был рассчитан на тёмный фон. Задаём тёмный
     по умолчанию, а цветные акценты (проценты, суммы) оставляем. */
  section#partners *:not(.btn):not(.btn *):not(.ptier-p):not(.pcalc-big):not(.pcalc-big *):not(.ptiers-second),
  section#service  *:not(.btn):not(.btn *){
    color:inherit;
  }
  section#partners, section#service{ color:var(--ink); }
  section#partners .ptiers-h{ color:var(--ink); }
  section#partners .pcalc-lab,
  section#partners .pcalc-out-lab,
  section#partners .pcalc-note,
  section#partners .pcalc-turn,
  section#partners .ptier-n,
  section#partners .ptiers-hint{ color:var(--muted); }
  section#partners .pcalc-box > *:first-child{ color:var(--ink); }
  /* проценты уровней сохраняют свои цвета */
  section#partners .ptier-p{ color:inherit; }
  section#partners .t1 .ptier-p{ color:var(--blue); }
  section#partners .t2 .ptier-p{ color:var(--green); }
  section#partners .t3 .ptier-p{ color:#D97706; }
  section#partners .t4 .ptier-p{ color:var(--orange); }
  section#partners .ptiers-second{ color:var(--orange); }
  section#partners .pcalc-big{ color:var(--green); }
  /* цвет задан прямо в разметке под тёмный фон — перебиваем */
  section#partners p[style*="255,255,255"],
  section#service p[style*="255,255,255"]{ color:var(--muted) !important; }
  section#service .guar-item .ic{ color:var(--blue); }

  /* переключатель вкладок на светлом */
  section#service .tabs-nav{ background:var(--bg); border-color:var(--line); }
  section#service .tab-btn{ color:var(--muted); }
  section#service .tab-btn:hover{ background:var(--bg-soft); color:var(--ink); }
  section#service .tab-btn.is-active{ background:var(--ink); color:#fff; }

  /* аккордеоны FAQ на светлом фоне */
  section#service .faq details{
    border-bottom-color:var(--line);
    background:transparent;
  }
  section#service .faq summary{ color:var(--ink); }
  section#service .faq summary::after{ color:var(--muted); }
  section#service .faq details[open] summary::after{ color:var(--blue); }
  section#service .faq p{ color:var(--muted); }

  /* кнопки-контуры внутри этих секций — тёмные по светлому */
  section#partners .btn-line, section#service .btn-line,
  section#partners .btn-ghost, section#service .btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--ink);
  }
  section#partners .btn-line:hover, section#service .btn-line:hover,
  section#partners .btn-ghost:hover, section#service .btn-ghost:hover{
    border-color:var(--blue);
    color:var(--blue);
    background:transparent;
  }

  /* --- Поверхности: плотные, без стекла ---------------------------- */
  .tabsec:not(.tabsec-light) .card,
  .tabsec:not(.tabsec-light) .aud-card,
  .tabsec:not(.tabsec-light) .df-group,
  .tabsec:not(.tabsec-light) .faq details,
  .role-nav-i, .tool-t, .roles-stage, .tools-view, .swx-panel,
  .partners-sec .pcalc-box, .partners-sec .ptiers,
  #cases .case-card, .guar-item{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .tabsec:not(.tabsec-light) .card,
  .tabsec:not(.tabsec-light) .aud-card,
  .partners-sec .pcalc-box,
  .partners-sec .ptiers,
  #cases .case-card,
  .blue-solid .guar-item{
    background:var(--dark-2);
    border-color:rgba(255,255,255,.10);
    box-shadow:none;
  }

  /* --- Первый экран без декора ------------------------------------- */
  .hero .tag{
    background:rgba(255,255,255,.10);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:none;
  }

  /* --- Кнопки: плотные, без свечения ------------------------------- */
  .btn-yellow{ background:var(--orange); color:#fff; }
  .btn-yellow:hover{ background:#F06E00; }

  /* --- Шапка ------------------------------------------------------- */
  header{
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
    box-shadow:none;
  }

  /* --- Подвал ------------------------------------------------------ */
  footer{ background:var(--dark); }

  /* =================================================================
     ПОДСВЕТКА ЗА КУРСОРОМ НА ТЁМНЫХ СЕКЦИЯХ
     Мягкое пятно света идёт за мышью. Держим его слабым: задача —
     дать ощущение отзывчивой поверхности, а не отвлечь от чтения.
     ================================================================= */
  /* Подсветка живёт в собственном слое, который добавляет скрипт.
     Псевдоэлементы у этих секций уже заняты сеткой и подсветками фона,
     а менять позиционирование детей нельзя — декоративные пятна .aura
     позиционированы абсолютно и от этого рассыпается вся раскладка. */
  .glow-layer{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0;
    transition:opacity .4s ease;
    background:radial-gradient(
      420px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(125,211,252,.12),
      transparent 62%
    );
  }
  .glow-host.glow-on .glow-layer{ opacity:1; }

  @media(hover:none), (prefers-reduced-motion:reduce){
    .glow-layer{ display:none; }
  }

  /* --- Кольцо источников -------------------------------------------
     Каждый сегмент — окружность с обводкой; длина штриха задаёт долю,
     поворот — начало сегмента. При появлении сегменты дорисовываются. */
  .pv, .fv{
    background:#fff;
    border:1px solid rgba(16,58,94,.10);
    border-radius:var(--r-md);
    box-shadow:0 10px 30px rgba(4,18,38,.18);
    padding:13px 15px 12px;
  }
  .pv-cap, .fv-cap{
    display:block;
    font-size:var(--fs-3xs);
    color:var(--muted);
    font-weight:600;
    margin-bottom:10px;
  }
  .pv-body{ display:flex; align-items:center; gap:12px; }
  .pv-ring{ width:74px; height:74px; flex:0 0 auto; transform:rotate(-90deg); }
  .pv-bg{ fill:none; stroke:rgba(16,58,94,.08); stroke-width:13; }
  .pv-seg{
    fill:none;
    stroke-width:13;
    stroke-linecap:butt;
    /* длина окружности при r=38 ≈ 238.8 */
    stroke-dasharray:0 239;
    transition:none;
  }
  .pv-seg.s1{ stroke:#1890FF; }
  .pv-seg.s2{ stroke:#34D399; }
  .pv-seg.s3{ stroke:#A78BFA; }
  .pv-seg.s4{ stroke:#FFC400; }

  /* доли: 46 / 26 / 16 / 12 процентов от 239 */
  .pv.is-drawn .s1{ animation:seg1 .9s cubic-bezier(.16,1,.3,1) .05s forwards; }
  .pv.is-drawn .s2{ animation:seg2 .9s cubic-bezier(.16,1,.3,1) .25s forwards; }
  .pv.is-drawn .s3{ animation:seg3 .9s cubic-bezier(.16,1,.3,1) .45s forwards; }
  .pv.is-drawn .s4{ animation:seg4 .9s cubic-bezier(.16,1,.3,1) .65s forwards; }
  @keyframes seg1{ to{ stroke-dasharray:110 239; stroke-dashoffset:0 } }
  @keyframes seg2{ to{ stroke-dasharray:62 239;  stroke-dashoffset:-110 } }
  @keyframes seg3{ to{ stroke-dasharray:38 239;  stroke-dashoffset:-172 } }
  @keyframes seg4{ to{ stroke-dasharray:29 239;  stroke-dashoffset:-210 } }

  .pv-legend{ list-style:none; margin:0; padding:0; display:grid; gap:5px; flex:1 1 auto; }
  .pv-legend li{
    display:flex; align-items:center; gap:7px;
    font-size:var(--fs-3xs); color:var(--muted);
  }
  .pv-legend i{ width:7px; height:7px; border-radius:2px; flex:0 0 auto; }
  .pv-legend b{ margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; }

  /* --- Воронка ------------------------------------------------------
     Полосы разъезжаются на свою ширину по очереди сверху вниз. */
  .fv-rows{ display:grid; gap:7px; }
  .fv-row{
    position:relative;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:6px 10px;
    border-radius:var(--r-sm);
    font-size:var(--fs-3xs);
    color:var(--ink);
    overflow:hidden;
    isolation:isolate;
  }
  .fv-row::before{
    content:"";
    position:absolute; inset:0 auto 0 0;
    width:0;
    background:linear-gradient(90deg, rgba(24,144,255,.22), rgba(24,144,255,.08));
    border-radius:var(--r-sm);
    z-index:-1;
  }
  .fv.is-drawn .fv-row::before{
    animation:fvGrow .7s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:calc(var(--i) * .14s + .1s);
  }
  @keyframes fvGrow{ to{ width:var(--w) } }
  .fv-row b{ font-variant-numeric:tabular-nums; font-weight:700; }
  .fv-row span{ color:var(--muted); }

  @media(prefers-reduced-motion:reduce){
    .pv.is-drawn .pv-seg{ animation:none }
    .pv.is-drawn .s1{ stroke-dasharray:110 239 }
    .pv.is-drawn .s2{ stroke-dasharray:62 239; stroke-dashoffset:-110 }
    .pv.is-drawn .s3{ stroke-dasharray:38 239; stroke-dashoffset:-172 }
    .pv.is-drawn .s4{ stroke-dasharray:29 239; stroke-dashoffset:-210 }
    .fv.is-drawn .fv-row::before{ animation:none; width:var(--w) }
  }

  /* Иконки вместо эмодзи: тонкая обводка, один вес линии.
     Плашка-подложка больше не нужна — раньше она держала цветной
     эмодзи, теперь иконка рисуется линией и стоит сама по себе. */
  .guar-item .ic, .sec-card .sec-ic{
    background:transparent;
    border:0;
    box-shadow:none;
    width:34px; height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--blue);
    margin-bottom:16px;
    font-size:0;
  }
  .guar-item .ic svg, .sec-card .sec-ic svg{ width:26px; height:26px; }
  /* на тёмном фоне иконка светлее */
  .blue-solid .guar-item .ic,
  .tabsec:not(.tabsec-light) .guar-item .ic{ color:#7DD3FC; }
  /* крупная плитка в блоке безопасности получает иконку побольше */
  .sec-card:nth-child(1) .sec-ic{ width:42px; height:42px; margin-bottom:20px; }
  .sec-card:nth-child(1) .sec-ic svg{ width:32px; height:32px; }

  /* маркер пункта списка */
  .li-dot{
    display:inline-block;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--blue);
    margin-right:10px;
    vertical-align:middle;
    position:relative;
    top:-2px;
    flex:0 0 auto;
  }

  /* маркер в перечнях внутри карточек ролей */
  .em{
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    background:currentColor;
    opacity:.5;
    margin-right:2px;
    flex:0 0 auto;
  }

  /* статусы разборов: было 🟢 / 🟡 / 🔴 */
  .st{
    display:inline-block;
    width:8px; height:8px;
    border-radius:50%;
    margin-right:10px;
    vertical-align:middle;
    position:relative;
    top:-1px;
    flex:0 0 auto;
  }
  .st-good{ background:var(--green); }
  .st-mid{  background:var(--yellow); }
  .st-bad{  background:var(--red); }

  /* =================================================================
     ШАГИ ПОДКЛЮЧЕНИЯ — с экраном продукта
     Было: четыре колонки статичного текста. Стало: слева шаги с
     оценкой времени, справа экран, который меняется при выборе,
     и полоса выполнения — видно, где ты в процессе.
     ================================================================= */
  .sw-grid{
    display:grid;
    grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
    gap:clamp(28px, 3.4vw, 52px);
    align-items:center;
    margin-top:34px;
  }

  .sw-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    width:100%;
    text-align:left;
    background:transparent;
    border:0;
    border-top:1px solid var(--line);
    padding:18px 12px 18px 4px;
    cursor:pointer;
    font-family:inherit;
    color:inherit;
    transition:background-color .18s ease, padding-left .18s ease;
  }
  .sw-item:last-child{ border-bottom:1px solid var(--line); }
  .sw-n{
    font-size:var(--fs-2xs);
    font-weight:700;
    color:var(--muted);
    letter-spacing:.06em;
    padding-top:3px;
    min-width:26px;
    transition:color .18s ease;
  }
  .sw-t{ display:flex; flex-direction:column; gap:5px; }
  .sw-t b{ font-size:var(--fs-sm); font-weight:600; letter-spacing:-.01em; }
  .sw-t i{ font-style:normal; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; }
  .sw-time{
    font-style:normal;
    font-size:var(--fs-3xs);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--green);
    margin-top:2px;
  }

  .sw-item:hover{ background:rgba(24,144,255,.05); padding-left:12px; }
  .sw-item.is-on{
    background:rgba(24,144,255,.07);
    padding-left:12px;
    box-shadow:inset 3px 0 0 var(--orange);
  }
  .sw-item.is-on .sw-n{ color:var(--orange); }
  .sw-item:focus-visible{ outline:none; box-shadow:inset 3px 0 0 var(--orange), 0 0 0 3px rgba(24,144,255,.35); }

  /* Помощь поддержки — приписка под шагами, а не пятый шаг.
     Подключение школа проходит сама; сюда идут, только если
     что-то не сошлось. Поэтому блок стоит отдельно от списка
     и выглядит как заметка, а не как продолжение последовательности. */
  .sw-help{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(16px, 2vw, 32px);
    flex-wrap:wrap;
    max-width:900px;
    margin:clamp(22px, 2.6vw, 36px) auto 0;
    padding:clamp(18px, 2vw, 26px);
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-left:3px solid var(--blue);
    border-radius:var(--r-md);
  }
  .sw-help-txt{ flex:1 1 420px; min-width:0; }
  .sw-help-txt b{
    display:block;
    font-size:var(--fs-sm);
    color:var(--ink);
    margin-bottom:6px;
  }
  .sw-help-txt p{
    margin:0;
    font-size:var(--fs-2xs);
    line-height:1.55;
    color:var(--muted);
  }
  .sw-help .btn{ flex:0 0 auto; }
  @media(max-width:600px){
    .sw-help{ flex-direction:column; align-items:stretch; }
    .sw-help .btn{ justify-content:center; }
  }

  .sw-frame{
    background:linear-gradient(135deg, rgba(24,144,255,.16), rgba(255,196,0,.10));
    padding:clamp(10px, 1.2vw, 18px);
    border-radius:var(--r-lg);
    border:1px solid var(--line);
  }
  .sw-frame img{
    display:block;
    width:100%;
    border-radius:var(--r-md);
    border:1px solid rgba(16,58,94,.10);
  }
  .sw-fade{ animation:swFade .34s cubic-bezier(.16,1,.3,1); }
  @keyframes swFade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

  /* полоса выполнения под экраном */
  .sw-progress{
    height:3px;
    margin-top:16px;
    background:var(--line);
    border-radius:var(--r-pill);
    overflow:hidden;
  }
  .sw-progress i{
    display:block;
    height:100%;
    background:linear-gradient(90deg, var(--blue), var(--orange));
    transition:width .32s cubic-bezier(.16,1,.3,1);
  }

  @media(max-width:940px){
    .sw-grid{ grid-template-columns:1fr; gap:26px; }
    .sw-stage{ order:-1; }
  }
  @media(prefers-reduced-motion:reduce){
    .sw-fade{ animation:none }
    .sw-item, .sw-progress i{ transition:none }
  }

  /* =================================================================
     КЕЙСЫ — разбор вместо трёх текстовых карточек
     Было: три одинаковых прямоугольника, в каждом мелкий текст на
     шесть строк. Стало: слева выбор кейса, справа разбор с крупной
     цифрой и тремя шагами — что случилось, что показал SCAN, вывод.
     ================================================================= */
  .cs-grid{
    display:grid;
    grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
    gap:clamp(28px, 3.4vw, 52px);
    align-items:start;
    margin-top:36px;
  }

  .cs-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    width:100%;
    text-align:left;
    background:transparent;
    border:0;
    border-top:1px solid rgba(255,255,255,.14);
    padding:18px 12px 18px 4px;
    cursor:pointer;
    font-family:inherit;
    color:inherit;
    transition:background-color .18s ease, padding-left .18s ease;
  }
  .cs-item:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
  .cs-i-num{
    font-size:var(--fs-md);
    font-weight:700;
    letter-spacing:-.02em;
    min-width:96px;
    font-variant-numeric:tabular-nums;
  }
  .cs-i-num.red{ color:#FF6B57; }
  .cs-i-num.green{ color:#34D399; }
  .cs-i-txt{ display:flex; flex-direction:column; gap:4px; }
  .cs-i-txt b{ font-size:var(--fs-xs); font-weight:600; }
  .cs-i-txt i{ font-style:normal; font-size:var(--fs-2xs); color:rgba(255,255,255,.6); }

  .cs-item:hover{ background:rgba(255,255,255,.07); padding-left:12px; }
  .cs-item.is-on{
    background:rgba(255,255,255,.09);
    padding-left:12px;
    box-shadow:inset 3px 0 0 var(--orange);
  }
  .cs-item:focus-visible{ outline:none; box-shadow:inset 3px 0 0 var(--orange), 0 0 0 3px rgba(24,144,255,.35); }

  /* правая часть — разбор выбранного кейса */
  .cs-pane{ display:none; }
  .cs-pane.is-on{ display:block; animation:csIn .34s cubic-bezier(.16,1,.3,1); }
  @keyframes csIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

  /* цифра работает как графический элемент, а не как подпись */
  .cs-big{
    font-size:clamp(46px, 6vw, 84px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.035em;
    font-variant-numeric:tabular-nums;
  }
  .cs-big.red{ color:#FF6B57; }
  .cs-big.green{ color:#34D399; }
  .cs-cap{
    margin-top:12px;
    font-size:var(--fs-xs);
    color:rgba(255,255,255,.66);
  }

  /* ряд ключевых чисел кейса — фактура под крупной цифрой */
  .cs-facts{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:1px;
    margin-top:24px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-md);
    overflow:hidden;
  }
  .cs-fact{
    background:rgba(11,32,56,.85);
    padding:14px 14px 13px;
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .cs-fact b{
    font-size:var(--fs-xs);
    font-weight:700;
    letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
    color:#fff;
  }
  .cs-fact.green b{ color:#34D399; }
  .cs-fact span{ font-size:var(--fs-3xs); color:rgba(255,255,255,.55); line-height:1.35; }
  @media(max-width:760px){
    .cs-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }

  .cs-steps{ margin-top:26px; display:grid; gap:0; }
  .cs-step{
    border-top:1px solid rgba(255,255,255,.14);
    padding:16px 0;
  }
  .cs-step:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
  .cs-step-t{
    display:block;
    font-size:var(--fs-3xs);
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
    margin-bottom:7px;
  }
  .cs-step p{
    margin:0;
    font-size:var(--fs-xs);
    line-height:1.55;
    color:rgba(255,255,255,.86);
  }

  @media(max-width:940px){
    .cs-grid{ grid-template-columns:1fr; gap:26px; }
    .cs-i-num{ min-width:88px; }
  }
  @media(prefers-reduced-motion:reduce){
    .cs-pane.is-on{ animation:none }
    .cs-item{ transition:none }
  }

  /* =================================================================
     «ДЛЯ КОГО» — тот же язык, что и в секции отчётов
     Роли были кнопками-карточками в рамках, а контент лежал внутри
     ещё одной большой карточки: три уровня вложенных прямоугольников.
     Теперь роли — список с разделителями, контент дышит без обёртки.
     ================================================================= */
  .roles-nav{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .role-nav-i{
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    text-align:left;
    background:transparent;
    border:0;
    border-top:1px solid rgba(255,255,255,.14);
    border-radius:0;
    padding:16px 12px 16px 4px;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:background-color .18s ease, padding-left .18s ease;
  }
  .role-nav-i:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
  .role-nav-i .role-nm{ font-size:var(--fs-xs); font-weight:600; }
  .role-nav-i .role-ic{
    width:30px; height:30px;
    background:transparent;
    border:0;
    color:rgba(255,255,255,.6);
    box-shadow:none;
    transition:color .18s ease;
  }
  .role-nav-i:hover{ background:rgba(255,255,255,.07); padding-left:12px; }
  .role-nav-i.is-on{
    background:rgba(255,255,255,.09);
    padding-left:12px;
    box-shadow:inset 3px 0 0 var(--orange);
  }
  .role-nav-i.is-on .role-ic{ color:var(--orange); }
  /* полоска-индикатор снизу больше не нужна — её заменил левый маркер */
  .role-nav-i .role-bar{ display:none; }

  /* сцена без карточки-обёртки */
  .roles-stage{
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:0 0 0 clamp(0px, 2vw, 32px);
  }
  /* видна только выбранная роль — display задаём именно активной панели,
     иначе они все раскрываются разом */
  .role-pane{ display:none; }
  .role-pane.is-on{
    display:grid;
    grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
    gap:28px;
    align-items:center;
  }
  .role-pane h3{ margin-top:0; }

  /* скриншот роли — на такой же подложке, как остальные экраны */
  .role-shot{
    margin:0;
    background:linear-gradient(135deg, rgba(24,144,255,.22), rgba(255,255,255,.06));
    padding:clamp(8px, 1vw, 14px);
    border-radius:var(--r-lg);
    border:1px solid rgba(255,255,255,.14);
  }
  .role-shot img{ display:block; width:100%; border-radius:var(--r-md); }
  .role-shot figcaption{
    font-size:var(--fs-2xs);
    color:rgba(255,255,255,.66);
    text-align:center;
    padding:10px 6px 2px;
  }

  @media(max-width:940px){
    .role-pane.is-on{ grid-template-columns:1fr; }
    .roles-stage{ padding-left:0; }
  }

  /* =================================================================
     «ИНСТРУМЕНТЫ РОСТА» — тот же язык
     Механика прежняя (выбрал плитку — сменился экран), меняется
     только подача: плитки-чипы вместо карточек с рамками, экран на
     градиентной подложке без обёртки-карточки.
     ================================================================= */
  .tool-t{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-pill);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:11px 18px;
    transition:background-color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .tool-t:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
  .tool-t.is-on{
    background:#fff;
    border-color:#fff;
    color:var(--navy);
  }
  .tool-t.is-on *{ color:var(--navy); }
  /* иконка в квадратной плашке уступает место простому знаку */
  .tool-t .tool-ic, .tool-t [class*=ic]{
    background:transparent;
    border:0;
    box-shadow:none;
    width:auto; height:auto;
  }

  .tools-view{
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:0;
  }
  .tools-view img{
    border-radius:var(--r-md);
    display:block;
    width:100%;
  }
  /* подложка под экран инструмента */
  .tools-view > *:first-child{
    background:linear-gradient(135deg, rgba(24,144,255,.22), rgba(255,255,255,.06));
    padding:clamp(8px, 1vw, 14px);
    border-radius:var(--r-lg);
    border:1px solid rgba(255,255,255,.14);
  }
  /* Между экраном инструмента и его описанием должен быть воздух:
     раньше текст прижимался к картинке вплотную (padding-left был 6px). */
  .tools-view{gap:clamp(20px, 2.4vw, 40px)}
  .tools-view .tool-text{padding:clamp(18px, 2vw, 34px) clamp(4px, 1vw, 18px) clamp(18px, 2vw, 34px) clamp(6px, 1.2vw, 22px)}

  /* Кнопки «раскрыть» были рассчитаны на тёмный фон — белый текст на
     полупрозрачной заливке. В светлых секциях они становились белым
     по белому и пропадали. Задаём им светлый вариант. */
  .tabsec-light .sect-fold > summary,
  #pricing .sect-fold > summary,
  #how .sect-fold > summary,
  #security .sect-fold > summary,
  .reports-sec .sect-fold > summary{
    background:var(--card);
    border:1px solid var(--line);
    color:var(--navy);
    box-shadow:none;
  }
  .tabsec-light .sect-fold > summary:hover,
  #pricing .sect-fold > summary:hover,
  #how .sect-fold > summary:hover,
  #security .sect-fold > summary:hover,
  .reports-sec .sect-fold > summary:hover{
    border-color:var(--blue);
    color:var(--blue);
  }

  /* =================================================================
     ОСТАЛЬНЫЕ СЕКЦИИ — тот же язык
     Шаги подключения, гарантии, тарифы и партнёрка собирались в
     разное время: где-то жёлтые кружки, где-то карточки с тенью и
     радиусом 24px. Сводим к одному набору приёмов: нумерация как в
     секции отчётов, границы вместо теней, единый радиус.
     ================================================================= */

  /* Шаги подключения: номер набором, а не в цветном кружке */
  .step .num, .step .n, .step-num{
    background:transparent;
    border:0;
    box-shadow:none;
    width:auto; height:auto;
    color:var(--muted);
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.06em;
    display:block;
    line-height:1;
    margin-bottom:14px;
  }
  .step{
    border-top:1px solid var(--line);
    padding-top:18px;
  }
  .step h3, .step b{ font-size:var(--fs-sm); font-weight:600; }
  .step p{ font-size:var(--fs-xs); color:var(--muted); }
  /* пунктирная линия между шагами больше не нужна — её роль
     взяли верхние границы */
  .step::after{ display:none; }

  /* Карточки гарантий и партнёрских блоков — как все остальные */
  .guar-item{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:none;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .guar-item:hover{
    border-color:rgba(24,144,255,.45);
    box-shadow:var(--sh-md);
    transform:translateY(-2px);
  }
  .blue-solid .guar-item, .tabsec:not(.tabsec-light) .guar-item{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16);
  }
  .blue-solid .guar-item:hover, .tabsec:not(.tabsec-light) .guar-item:hover{
    border-color:rgba(255,255,255,.4);
  }

  /* Тарифы: панель калькулятора и таблица — границы вместо заливок */
  .pcalc-box, .plan-box, .pricing-card, .price-panel{
    border-radius:var(--r-lg);
    box-shadow:none;
  }
  .pricing-note, .reports-note{
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:none;
  }

  /* Партнёрские уровни — список с маркером, а не набор плиток */
  .ptier{
    border-radius:var(--r-md);
    box-shadow:none;
    transition:background-color .18s ease, border-color .18s ease;
  }
  .ptier.is-on{ box-shadow:inset 3px 0 0 var(--orange); }

  /* Финальный призыв: без градиентной заливки, спокойная панель */
  .cta-final{
    border-radius:var(--r-lg);
    box-shadow:none;
  }

  @media(prefers-reduced-motion:reduce){
    .guar-item:hover{ transform:none; }
  }

  /* =================================================================
     АККОРДЕОНЫ — список с разделителями вместо карточек
     Приём от GeneralMind: пункты разделены тонкой линией, справа —
     простой плюс. На странице 39 аккордеонов, и каждый был карточкой
     с рамкой, тенью и синим кружком-стрелкой: получалась россыпь
     объектов вместо спокойного перечня.
     ================================================================= */
  details{
    background:transparent;
    border:0;
    border-bottom:1px solid var(--line);
    border-radius:0;
    padding:20px 2px;
    margin-bottom:0;
    transition:none;
  }
  details:hover, details[open]{
    transform:none;
    box-shadow:none;
    border-color:var(--line);
  }
  summary{ font-weight:600; font-size:var(--fs-sm); }
  summary:hover{ color:var(--blue); }
  /* тонкий плюс вместо круглой синей кнопки */
  summary::after{
    content:"+";
    width:auto; height:auto;
    background:none;
    box-shadow:none;
    font-size:26px;
    font-weight:300;
    line-height:1;
    color:var(--muted);
    transition:color .18s ease, transform .18s ease;
    animation:none;
  }
  details[open] summary::after{
    content:"–";
    transform:none;
    color:var(--blue);
  }
  summary:hover::after{ color:var(--blue); }
  details p{ font-size:var(--fs-xs); }

  /* на тёмном фоне разделители светлые */
  .tabsec:not(.tabsec-light) .faq details,
  .dark-sec details, #cases details{
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.16);
    box-shadow:none;
  }
  .tabsec:not(.tabsec-light) .faq details:hover,
  .tabsec:not(.tabsec-light) .faq details[open]{
    box-shadow:none;
    border-color:rgba(255,255,255,.16);
  }
  .tabsec:not(.tabsec-light) .faq summary::after{ color:rgba(255,255,255,.6); }
  .tabsec:not(.tabsec-light) .faq details[open] summary::after{ color:#fff; }

  /* =================================================================
     ПОДЛОЖКИ ПОД СКРИНШОТЫ ПРОДУКТА
     Приём подсмотрен у Sprout Social: скриншот интерфейса не лежит
     на голом фоне, а вписан в мягкую градиентную заливку со своим
     скруглением. Правило — одна заливка на секцию, иначе страница
     превращается в радугу.
     ================================================================= */
  .wide-shot, .attr-shot{
    background:linear-gradient(135deg, rgba(24,144,255,.14), rgba(255,196,0,.10));
    padding:clamp(12px, 1.6vw, 22px);
    border-radius:var(--r-lg);
    border:1px solid var(--line);
  }
  .wide-shot img, .attr-shot img{
    display:block;
    width:100%;
    border-radius:var(--r-md);
    border:1px solid rgba(16,58,94,.10);
  }
  /* на тёмных секциях заливка приглушённая, иначе слепит */
  .tabsec:not(.tabsec-light) .wide-shot,
  .dark-sec .wide-shot,
  #cases .wide-shot{
    background:linear-gradient(135deg, rgba(24,144,255,.22), rgba(255,255,255,.06));
    border-color:rgba(255,255,255,.14);
  }

  /* Главный скриншот первого экрана — та же логика, крупнее */
  .hero-main{
    background:linear-gradient(135deg, rgba(24,144,255,.28), rgba(255,196,0,.12));
    padding:clamp(10px, 1.2vw, 18px);
    border-radius:calc(var(--r-lg) + 6px);
    border:1px solid rgba(255,255,255,.18);
  }
  .hero-main img{
    border-radius:var(--r-lg);
    display:block;
  }

  /* Текстовые ссылки внутри абзацев подчёркиваем — цвет не должен
     быть единственным признаком, что это ссылка */
  section p a:not(.btn), .faq p a:not(.btn), footer p a:not(.btn){
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
  }

  /* =================================================================
     РИТМ СТРАНИЦЫ
     Было две плиты: 3669px тёмного подряд, потом 4262px светлого.
     Внутри плиты секции сливались — глазу не за что зацепиться.
     Стало чередование: тёмный первый экран → светлое доверие →
     тёмное демо и интеграции → светлые подключение и цифры →
     тёмные кейсы → светлые тарифы и безопасность → тёмная
     партнёрка → светлый призыв → тёмный подвал.
     ================================================================= */

  /* =================================================================
     ВКЛАДКИ — переключатель вместо подчёркнутых ссылок
     На странице 15 вкладок, за ними половина содержимого. Раньше они
     выглядели как обычный текст с полоской снизу — посетитель не
     понимал, что это можно нажать. Теперь это явный переключатель:
     группа в рамке, активный пункт — заполненная «пилюля».
     ================================================================= */
  .tabs-nav{
    display:inline-flex;
    gap:4px;
    flex-wrap:wrap;
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--r-pill);
    padding:5px;
    margin-bottom:clamp(28px, 3vw, 44px);
    background:rgba(255,255,255,.05);
  }
  .tab-btn{
    padding:9px 18px;
    border-radius:var(--r-pill);
    font-size:var(--fs-xs);
    font-weight:600;
    letter-spacing:-.01em;
    color:rgba(255,255,255,.72);
    transition:background-color .18s ease, color .18s ease;
  }
  .tab-btn:hover{ background:rgba(255,255,255,.1); color:#fff; }
  .tab-btn.is-active{
    background:#fff;
    color:var(--navy);
  }
  /* полоска-подчёркивание больше не нужна */
  .tab-btn::after{ display:none; }

  /* на светлом фоне переключатель тёмный по светлому */
  .tabsec-light .tabs-nav{
    border-color:var(--line);
    background:var(--card);
  }
  .tabsec-light .tab-btn{ color:var(--muted); }
  .tabsec-light .tab-btn:hover{ background:var(--bg); color:var(--navy); }
  .tabsec-light .tab-btn.is-active{ background:var(--navy); color:#fff; }

  /* группа переключателей стоит по центру секции, как её заголовок */
  .tabsec .wrap > .tabs-nav{ display:flex; margin-left:auto; margin-right:auto; width:fit-content; }

  @media(max-width:640px){
    .tabs-nav{ padding:4px; gap:2px; }
    .tab-btn{ padding:8px 12px; font-size:var(--fs-2xs); }
  }

  /* Логотипы школ — своя светлая секция вместо куска синей полосы */
  .trust-sec{
    background:var(--bg);
    padding:clamp(40px, 4.5vw, 64px) 0;
  }
  .trust-sec .logos{ padding:0; }
  .trust-sec .logos p{
    color:var(--muted);
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  /* на светлом фоне белым плашкам нужна граница, иначе они исчезают */
  .trust-sec .logo-ph{
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:none;
    height:88px;
  }
  .trust-sec .logo-ph.dark{ background:#191919; border-color:#191919; }

  /* Кейсы — тёмные: разбивают светлый монолит из четырёх секций
     подряд, а цифры результатов на тёмном читаются выразительнее */
  #cases{
    background:linear-gradient(180deg,#0f2b4a 0%,#123255 52%,#113058 100%);
    color:#fff;
  }
  #cases h2, #cases h3{ color:#fff; }
  #cases .sub{ color:rgba(255,255,255,.82); }
  /* секция сохранила класс .tabsec-light, поэтому переключатель
     оставался светлым — на тёмном фоне неактивные вкладки пропадали */
  #cases .tabs-nav{
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
  }
  #cases .tab-btn{ color:rgba(255,255,255,.72); }
  #cases .tab-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }
  #cases .tab-btn.is-active{ background:#fff; color:var(--navy); }
  #cases .case-card{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16);
  }
  #cases .case-card:hover{ border-color:rgba(255,255,255,.4); }
  #cases .case-card p{ color:rgba(255,255,255,.8); }

  /* =================================================================
     ПЕРВЫЙ ЭКРАН — новая композиция
     Было: текст слева, скриншоты справа, заголовок 46px весом 800,
     под ним пять строк-галочек. Плотно и мелко.
     Стало: всё по центральной оси, заголовок крупный и лёгкий,
     продукт показан широко под текстом. Воздух вместо плотности.
     ================================================================= */
  .hero .wrap{ max-width:1120px; }

  /* Текст слева, продукт справа. Заголовок ограничен шириной левой
     колонки — иначе он растягивается на весь экран и картинка
     «отваливается» вниз, вместо того чтобы стоять с ним в паре. */
  /* Продукт слева, текст справа. Заголовок прижат к правой колонке
     и ограничен по ширине — иначе он растягивается на весь экран и
     перестаёт стоять в паре с картинкой. */
  /* Заголовок разворачивается над обеими колонками, под ним слева
     кнопки и перечень, справа — экран продукта. */
  .hero .wrap{ max-width:1400px; }
  .hero-copy-top{
    text-align:left;
    max-width:none;
    margin:0;
  }
  .hero h1{
    /* сдержанный вариант: крупнее прежнего, но без плаката.
       Вес 600 вместо 800 — легче, чем было, плотнее, чем 500. */
    font-size:clamp(32px, 4.2vw, 54px);
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.025em;
    margin:20px 0 0;
  }
  .hero h1 .hl{ font-weight:700; }

  /* Две колонки: слева весь текст, справа экран продукта.
     align-items:center держит картинку на одной оси с блоком кнопок,
     чтобы правая часть не «висела» ниже левой. */
  .hero-row{
    display:grid;
    /* картинка крупнее, но правой колонке хватает ширины на две
       кнопки в ряд (им нужно ~590px) */
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(24px, 2.6vw, 40px);
    align-items:stretch;
    margin-top:26px;
  }
  /* текст в левой колонке, картинка в правой */
  .hero-cards{ order:1; align-self:center; }
  .hero-row-text{
    order:0;
    text-align:left;
    max-width:none;
    margin:0;
    /* содержимое разносим по высоте картинки: кнопки идут сверху,
       перечень возможностей прижимается к низу — колонка перестаёт
       выглядеть сжатой в середине */
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:6px 0;
  }
  .hero-cta{
    justify-content:flex-start;
    gap:12px;
  }
  /* в прежней раскладке кнопки тянулись на всю колонку и вставали
     друг под другом — в центральной композиции они идут в ряд */
  @media(min-width:901px){
    .hero-row-text .hero-cta .btn{ flex:0 0 auto; }
  }
  .hero-fine{
    margin-top:18px;
    font-size:var(--fs-xs);
    opacity:.75;
  }

  /* пять галочек столбиком превращаются в одну спокойную строку */
  .hero-badges{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:10px 8px;
    margin-top:24px;
  }
  .hero-badges div{
    font-size:var(--fs-2xs);
    font-weight:600;
    padding:7px 14px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.06);
  }
  .hero-badges .ic{ opacity:.7; }

  /* Продукт занимает правую колонку целиком и слегка выходит за её
     правый край — так он не выглядит аккуратно вставленной картинкой */
  .hero-cards{
    margin:0;
    max-width:none;
    width:100%;
    transform:none;
  }
  /* Заголовок теперь развёрнут над обеими колонками, поэтому картинку
     вверх не подтягиваем — иначе она наезжает на текст. */
  /* слегка выводим продукт за правый край контейнера */
  @media(min-width:1200px){
    .hero-cards{ margin-right:clamp(-60px, -3vw, 0px); }
  }
  .hero-main img{
    width:100%;
    border-radius:var(--r-lg);
  }

  @media(max-width:900px){
    .hero-cards .fcard{ display:none; }   /* плавающие карточки тесно на узком */
  }

  /* =================================================================
     КНОПКИ — три роли вместо шести видов
     Было: yellow, blue, red, white, line, ghost — причём red, white
     и lg в разметке не использовались вовсе. Осталось три роли,
     у всех одинаковая логика состояний и общий стиль фокуса.
     ================================================================= */
  .btn{
    border-radius:var(--r-pill);
    font-weight:700;
    transition:transform .18s cubic-bezier(.16,1,.3,1),
               background-color .18s ease, border-color .18s ease,
               color .18s ease, box-shadow .18s ease;
  }

  /* 1. Главная — оранжевая. На экране должна быть одна. */
  .btn-yellow{ box-shadow:none; }
  .btn-yellow:hover{ background:#F06E00; box-shadow:var(--sh-md); }

  /* 2. Второстепенная — контур. Сюда же переезжает единственная
        синяя кнопка «Записаться на демо»: два ярких призыва рядом
        спорили друг с другом. */
  .btn-line, .btn-blue{
    background:transparent;
    border:1.5px solid var(--line);
    color:var(--ink);
    box-shadow:none;
  }
  .btn-line:hover, .btn-blue:hover{
    border-color:var(--blue);
    color:var(--blue);
    background:transparent;
  }
  /* На тёмном фоне контур светлый. Сюда же входят тёмные панели,
     которые стоят внутри светлых секций (.demo-box, .cta-strip,
     .cta-final, .community-box) — на них тёмный текст пропадал. */
  .dark-sec .btn-line, .blue-band .btn-line, .blue-solid .btn-line,
  .dark-sec .btn-blue, .blue-band .btn-blue, .blue-solid .btn-blue,
  .hero .btn-line, .hero .btn-blue,
  .demo-box .btn-line, .demo-box .btn-blue,
  .cta-strip .btn-line, .cta-strip .btn-blue,
  .cta-final .btn-line, .cta-final .btn-blue,
  .community-box .btn-line, .community-box .btn-blue{
    border-color:rgba(255,255,255,.34);
    color:#fff;
    background:transparent;
  }
  .dark-sec .btn-line:hover, .blue-band .btn-line:hover, .blue-solid .btn-line:hover,
  .dark-sec .btn-blue:hover, .blue-band .btn-blue:hover, .blue-solid .btn-blue:hover,
  .hero .btn-line:hover, .hero .btn-blue:hover,
  .demo-box .btn-line:hover, .demo-box .btn-blue:hover,
  .cta-strip .btn-line:hover, .cta-strip .btn-blue:hover,
  .cta-final .btn-line:hover, .cta-final .btn-blue:hover,
  .community-box .btn-line:hover, .community-box .btn-blue:hover{
    border-color:#fff;
    color:#fff;
    background:rgba(255,255,255,.08);
  }

  /* 3. Вторая на тёмном фоне — полупрозрачная заливка со светлым
        контуром. Именно она стоит рядом с оранжевой на первом экране,
        поэтому должна читаться как кнопка, а не как ссылка. */
  .btn-ghost{
    background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.34);
    color:#fff;
    box-shadow:none;
  }
  .btn-ghost:hover{
    background:rgba(255,255,255,.2);
    border-color:rgba(255,255,255,.6);
    box-shadow:none;
  }
  /* синее свечение из старых стилей на этих кнопках больше не нужно */
  .btn-line:hover{ box-shadow:none; }

  /* Общие состояния для всех трёх ролей */
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  /* Видимый фокус с клавиатуры — раньше его не было вовсе */
  .btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(24,144,255,.45);
  }
  @media(prefers-reduced-motion:reduce){
    .btn:hover, .btn:active{ transform:none; }
  }

  /* =================================================================
     КАРТОЧКИ — один вид для всей страницы
     ================================================================= */

  /* Кейсы: раньше смысл кодировался цветом всей рамки — розовой у
     проблемы, зелёной у роста. Рамка теперь общая, а смысл несёт
     тонкая полоса слева: карточки встают в один ряд с остальными,
     но читаются так же однозначно. */
  .case-card{
    position:relative;
    border-color:var(--line);
    border-radius:var(--r-md);
    box-shadow:none;
    overflow:hidden;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .case-card::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--muted);
  }
  .case-card.neg::before{ background:var(--red); }
  .case-card.pos::before{ background:var(--green); }
  .case-card:hover{
    border-color:rgba(24,144,255,.45);
    box-shadow:var(--sh-md);
    transform:translateY(-2px);
  }

  /* Стеклянные карточки на тёмном: форму держит светлая кромка,
     тень появляется только под курсором. */
  .tabsec:not(.tabsec-light) .card,
  .tabsec:not(.tabsec-light) .aud-card{
    box-shadow:none;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .tabsec:not(.tabsec-light) .card:hover,
  .tabsec:not(.tabsec-light) .aud-card:hover{
    border-color:rgba(255,255,255,.42);
    box-shadow:var(--sh-md);
  }

  @media(prefers-reduced-motion:reduce){
    .case-card:hover{ transform:none; }
  }

  /* --- Полоса прогресса чтения -------------------------------------
     Тонкая линия поверх шапки показывает, сколько страницы пройдено.
     На длинном лендинге даёт ощущение цельного пути, а не набора
     отдельных блоков. */
  .read-progress{
    position:fixed; top:0; left:0; right:0; height:3px;
    z-index:60; pointer-events:none; background:transparent;
  }
  .read-progress i{
    display:block; height:100%; width:0;
    background:linear-gradient(90deg, var(--blue), var(--yellow));
    transition:width .12s linear;
  }
  @media(prefers-reduced-motion:reduce){ .read-progress i{ transition:none } }

  /* плавный переход к якорям меню */
  html{ scroll-behavior:smooth; }
  @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

  /* --- Точные цвета логотипа --------------------------------------
     Значения сняты пипеткой с logo.webp: тёмно-синий #003060,
     синий #1890FF, красный #FF4830, золотой #FFD800.
     Раньше жёлтый на сайте был выцветшим песочным #E3B23C и не
     совпадал с фирменным золотом. */
  :root{
    --blue:#1890FF;
    --yellow:#FFC400;
    --red:#FF4830;
  }

  /* --- Единая тёмная зона -----------------------------------------
     Первый экран, логотипы, демо и «Интеграции» должны читаться как
     одно полотно. Раньше каждый блок рисовал свой градиент, и на
     стыках проступали швы — особенно после переноса демо внутрь
     синей полосы. Теперь фон рисует только .blue-band, вложенные
     секции его наследуют. */
  .blue-band .dark-sec{
    background:none;
    box-shadow:none;
  }
  .blue-band .dark-sec::before{ display:none; }   /* сетка уже есть у полосы */
  .blue-band > section{ background:transparent; }

  /* Стык первого экрана с полосой: убираем светлую кромку,
     из-за которой была видна граница между ними. */
  .blue-band{ box-shadow:none; }
  .hero{ box-shadow:none; }

  /* --- Полоса с цифрами -------------------------------------------
     Была тёмная плашка с градиентом и золотыми цифрами: висела между
     синей полосой и светлой секцией, выпадая из обеих. Теперь это
     спокойная светлая строка, разделённая тонкими линиями. */
  .stats{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    color:var(--ink);
    padding:clamp(26px, 2.6vw, 40px) clamp(12px, 1.6vw, 24px);
    gap:0;
    box-shadow:none;
  }
  .stats > div{
    padding:4px clamp(14px, 1.8vw, 28px);
    border-left:1px solid var(--line);
  }
  .stats > div:first-child{ border-left:0; }
  /* Строка цифр стоит между двумя синими секциями — ей нужен воздух сверху и снизу,
     иначе белая карточка прилипает к синему краю. */
  section.stats-sec{padding:clamp(64px, 6vw, 104px) 0}
  .stats .n{
    color:var(--ink);
    font-size:clamp(28px, 2.8vw, 42px);
    letter-spacing:-.02em;
  }
  .stats .l{
    color:var(--muted);
    font-size:var(--fs-xs);
    line-height:1.45;
    margin-top:8px;
  }
  /* когда колонки складываются, вертикальные линии не нужны */
  @media(max-width:940px){
    .stats > div{ border-left:0; border-top:1px solid var(--line); padding:18px 12px; }
    .stats > div:first-child{ border-top:0; }
    .stats > div:nth-child(2){ border-top:0; }
  }
  @media(max-width:640px){
    .stats > div:nth-child(2){ border-top:1px solid var(--line); }
  }
  /* блок цифр примыкает к предыдущей секции — сверху ритм не нужен */
  .stats-sec{ padding-top:0; padding-bottom:var(--rhythm); }

  /* --- Блок «Безопасность»: bento-сетка ----------------------------
     Четыре одинаковые карточки в ряд — самая узнаваемая шаблонная
     раскладка. Здесь плитки разного размера: первая занимает две
     колонки и две строки, остальные встают вокруг неё. Взгляд
     получает точку входа вместо четырёх равнозначных прямоугольников. */
  #security{ padding:var(--rhythm) 0; }
  /* Карточек стало шесть (добавились «Серверы в России» и «100% точность
     данных»), и раскладка с крупной плиткой на две строки развалилась —
     между блоками зияли пустоты. Теперь ровная сетка: три колонки, все
     карточки одного веса и одной высоты. */
  .sec-grid{
    display:grid; gap:14px; margin-top:36px;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-rows:1fr;
  }
  .sec-card{ grid-column:auto; grid-row:auto; }
  .sec-card{ display:flex; flex-direction:column; justify-content:flex-start; }
  .sec-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:24px 22px;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .sec-card:hover{
    border-color:rgba(30,155,240,.45);
    box-shadow:var(--sh-md);
    transform:translateY(-2px);
  }
  .sec-ic{ font-size:var(--fs-lg); line-height:1; margin-bottom:14px; }
  .sec-card h3{ font-size:var(--fs-md); font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
  .sec-card p{ font-size:var(--fs-xs); line-height:1.55; color:var(--muted); margin:0; }
  .sec-foot{ font-size:var(--fs-xs); color:var(--muted); margin:0; }
  .sec-foot a{ color:var(--blue); font-weight:600; }
  @media(max-width:1024px){ .sec-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media(max-width:520px){ .sec-grid{ grid-template-columns:1fr; } }

  @media(prefers-reduced-motion:reduce){
    .btn:hover, .card:hover, .aud-card:hover, .report-item:hover, .sec-card:hover{ transform:none; }
  }


  /* =================================================================
     СТРАНИЦА ПАРТНЁРСКОЙ ПРОГРАММЫ (partner.html)
     На лендинге партнёрка занимает одну секцию — калькулятор и
     лестница процентов. Здесь разворачиваем её целиком: как
     устроена привязка, что внутри кабинета и как доходят деньги.
     Классы с приставкой pt- живут только на этой странице.
     ================================================================= */

  /* --- Первый экран: четыре главные цифры --- */
  .pt-facts{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:clamp(12px, 1.6vw, 22px);
    margin-top:clamp(28px, 3.2vw, 44px);
  }
  .pt-fact{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:clamp(16px, 1.8vw, 24px);
    box-shadow:var(--sh-sm);
  }
  .pt-fact-n{
    font-size:clamp(30px, 3.4vw, 42px);
    font-weight:800;
    line-height:1.05;
    color:var(--ink);
    letter-spacing:-.02em;
  }
  .pt-fact-n span{
    font-size:.5em;
    font-weight:700;
    color:var(--orange);
    margin-left:2px;
  }
  .pt-fact-l{
    margin-top:8px;
    font-size:var(--fs-2xs);
    line-height:1.45;
    color:var(--muted);
  }

  /* --- Общая обёртка секций страницы --- */
  .pt-sec{ padding:clamp(52px, 6vw, 88px) 0; background:var(--bg); }
  .pt-sec-soft{ background:var(--bg-soft); }
  .pt-sec-dark{ background:var(--dark); color:#fff; }
  .pt-sec-dark h2{ color:#fff; }
  .pt-sec-dark .sub{ color:rgba(255,255,255,.72); }

  /* --- Четыре шага «как это работает» --- */
  .pt-flow{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:clamp(14px, 1.8vw, 24px);
    margin-top:clamp(28px, 3.2vw, 44px);
  }
  .pt-flow-item{
    position:relative;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:clamp(18px, 2vw, 26px);
    box-shadow:var(--sh-sm);
  }
  .pt-flow-n{
    font-size:var(--fs-2xs);
    font-weight:800;
    letter-spacing:.08em;
    color:var(--orange);
    margin-bottom:10px;
  }
  .pt-flow-item h3{
    margin:0 0 8px;
    font-size:var(--fs-sm);
    color:var(--ink);
  }
  .pt-flow-item p{
    margin:0;
    font-size:var(--fs-2xs);
    line-height:1.55;
    color:var(--muted);
  }
  /* Личная ссылка — показываем как код, чтобы формат читался буквально */
  .pt-code{
    display:inline-block;
    margin-top:10px;
    padding:7px 11px;
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:var(--fs-3xs);
    color:var(--ink);
    word-break:break-all;
  }
  .pt-code span{ color:var(--orange); font-weight:700; }

  /* --- Калькулятор на тёмной секции --- */
  .pt-calc{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(20px, 2.6vw, 40px);
    align-items:start;
    margin-top:clamp(28px, 3.2vw, 44px);
  }
  .pt-calc-controls{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-lg);
    padding:clamp(20px, 2.4vw, 32px);
  }
  .pt-field + .pt-field{ margin-top:clamp(20px, 2.2vw, 30px); }
  .pt-lab{
    display:block;
    font-size:var(--fs-2xs);
    color:rgba(255,255,255,.72);
    margin-bottom:12px;
  }
  .pt-range{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:6px;
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.18);
    outline:none;
    cursor:pointer;
  }
  .pt-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:22px; height:22px;
    border-radius:50%;
    background:#fff;
    border:3px solid var(--orange);
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
  }
  .pt-range::-moz-range-thumb{
    width:22px; height:22px;
    border-radius:50%;
    background:#fff;
    border:3px solid var(--orange);
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
  }
  .pt-range:focus-visible{ box-shadow:0 0 0 3px rgba(255,122,0,.45); }
  .pt-val{
    margin-top:12px;
    font-size:var(--fs-md);
    font-weight:800;
    color:#fff;
  }

  /* Лестница уровней — подсвечивается тот, в который попал ползунок */
  .pt-ladder{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    margin-top:clamp(22px, 2.4vw, 32px);
  }
  .pt-rung{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 10px;
    border-radius:var(--r-sm);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    font-size:var(--fs-3xs);
    color:rgba(255,255,255,.6);
    text-align:center;
    transition:background .18s ease, border-color .18s ease, color .18s ease;
  }
  .pt-rung span{
    font-size:var(--fs-sm);
    font-weight:800;
    color:rgba(255,255,255,.75);
  }
  .pt-rung.is-on{
    background:rgba(255,122,0,.18);
    border-color:var(--orange);
    color:#fff;
  }
  .pt-rung.is-on span{ color:var(--orange); }

  /* Результат расчёта */
  .pt-calc-out{
    background:#fff;
    border-radius:var(--r-lg);
    padding:clamp(22px, 2.6vw, 34px);
    box-shadow:var(--sh-lg);
  }
  .pt-out-lab{ font-size:var(--fs-2xs); color:var(--muted); }
  .pt-out-lab b{ color:var(--orange); }
  .pt-out-big{
    margin-top:10px;
    font-size:clamp(34px, 4vw, 52px);
    font-weight:800;
    line-height:1.05;
    color:var(--green);
    letter-spacing:-.02em;
  }
  .pt-out-big i{
    font-style:normal;
    font-size:.34em;
    font-weight:700;
    color:var(--muted);
    margin-left:6px;
  }
  .pt-out-year{
    margin-top:10px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:var(--fs-sm);
    color:var(--muted);
  }
  .pt-out-year b{ color:var(--ink); }
  .pt-out-note{
    margin:14px 0 20px;
    font-size:var(--fs-3xs);
    line-height:1.5;
    color:var(--muted);
  }
  .pt-calc-out .btn{ width:100%; justify-content:center; }

  /* --- Схема двух уровней --- */
  .pt-levels{
    display:flex;
    /* по центру, а не stretch: иначе короткая карточка «Вы» растягивалась
       до высоты самой длинной и снизу оставалась пустота */
    align-items:center;
    justify-content:center;
    gap:clamp(8px, 1.2vw, 18px);
    flex-wrap:wrap;
    margin-top:clamp(28px, 3.2vw, 44px);
  }
  .pt-lvl{
    flex:1 1 210px;
    max-width:280px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:clamp(16px, 1.8vw, 24px);
    box-shadow:var(--sh-sm);
  }
  .pt-lvl-tag{
    font-size:var(--fs-3xs);
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .pt-lvl-body{
    font-size:var(--fs-xs);
    line-height:1.45;
    color:var(--ink);
  }
  .pt-lvl-pct{
    margin-top:12px;
    display:inline-block;
    padding:5px 11px;
    border-radius:var(--r-pill);
    font-size:var(--fs-2xs);
    font-weight:800;
  }
  /* «Вы» — начало цепочки, красим зелёным, как деньги и рост */
  .pt-lvl:first-child .pt-lvl-tag{ color:var(--green); }
  .pt-lvl-1 .pt-lvl-tag{ color:var(--orange); }
  .pt-lvl-1 .pt-lvl-pct{ background:rgba(255,122,0,.12); color:var(--orange); }
  .pt-lvl-2 .pt-lvl-tag{ color:var(--blue); }
  .pt-lvl-2 .pt-lvl-pct{ background:rgba(30,155,240,.12); color:var(--blue); }
  .pt-arrow{
    align-self:center;
    font-size:var(--fs-lg);
    color:var(--line);
    flex:0 0 auto;
  }

  /* --- Вкладки партнёрского кабинета --- */
  .pt-cab{
    display:grid;
    grid-template-columns:minmax(280px, .78fr) 1.22fr;
    gap:clamp(20px, 2.6vw, 40px);
    align-items:start;
    margin-top:clamp(28px, 3.2vw, 44px);
  }
  .pt-tab{
    display:flex;
    flex-direction:column;
    gap:5px;
    width:100%;
    text-align:left;
    background:transparent;
    border:0;
    border-top:1px solid var(--line);
    padding:16px 12px 16px 4px;
    cursor:pointer;
    transition:background .18s ease, padding .18s ease, box-shadow .18s ease;
  }
  .pt-tab:last-child{ border-bottom:1px solid var(--line); }
  .pt-tab b{ font-size:var(--fs-sm); color:var(--ink); font-weight:700; }
  .pt-tab i{ font-style:normal; font-size:var(--fs-2xs); line-height:1.5; color:var(--muted); }
  .pt-tab:hover{ background:rgba(24,144,255,.05); padding-left:12px; }
  .pt-tab.is-on{
    background:rgba(24,144,255,.07);
    padding-left:12px;
    box-shadow:inset 3px 0 0 var(--orange);
  }
  .pt-tab:focus-visible{
    outline:none;
    box-shadow:inset 3px 0 0 var(--orange), 0 0 0 3px rgba(24,144,255,.35);
  }
  /* Раздел, которого ещё нет — не обещаем лишнего */
  .pt-soon{
    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    border-radius:var(--r-pill);
    background:var(--bg-soft);
    border:1px solid var(--line);
    font-size:var(--fs-3xs);
    font-weight:700;
    color:var(--muted);
    vertical-align:middle;
  }
  .pt-tab-soon b{ color:var(--muted); }

  .pt-cab-frame{
    background:linear-gradient(135deg, rgba(24,144,255,.16), rgba(255,196,0,.10));
    padding:clamp(10px, 1.2vw, 18px);
    border-radius:var(--r-lg);
    border:1px solid var(--line);
  }
  .pt-cab-frame img{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--r-md);
    box-shadow:var(--sh-md);
    cursor:zoom-in;
  }
  .pt-cab-adr{
    margin:14px 0 0;
    text-align:center;
    font-size:var(--fs-2xs);
    color:var(--muted);
  }
  .pt-cab-adr b{ color:var(--ink); }
  .pt-fade{ animation:ptFade .34s ease; }
  @keyframes ptFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  /* --- Путь денег: нумерованные шаги с линией --- */
  .pt-path{
    list-style:none;
    counter-reset:ptstep;
    margin:clamp(28px, 3.2vw, 44px) auto 0;
    padding:0;
    max-width:760px;
  }
  .pt-path li{
    position:relative;
    counter-increment:ptstep;
    padding:0 0 clamp(22px, 2.4vw, 32px) clamp(52px, 5vw, 66px);
  }
  .pt-path li::before{
    content:counter(ptstep);
    position:absolute;
    left:0; top:0;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:var(--bg);
    border:2px solid var(--orange);
    font-size:var(--fs-2xs);
    font-weight:800;
    color:var(--orange);
  }
  /* Вертикальная линия между кружками — у последнего шага её нет */
  .pt-path li::after{
    content:'';
    position:absolute;
    left:18px; top:38px; bottom:0;
    width:2px;
    background:var(--line);
  }
  .pt-path-last::after{ display:none; }
  .pt-path h3{
    margin:6px 0 6px;
    font-size:var(--fs-sm);
    color:var(--ink);
  }
  .pt-path p{
    margin:0;
    font-size:var(--fs-xs);
    line-height:1.55;
    color:var(--muted);
  }
  .pt-note{
    max-width:760px;
    margin:clamp(8px, 1vw, 16px) auto 0;
    padding:clamp(16px, 1.8vw, 22px);
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-left:3px solid var(--orange);
    border-radius:var(--r-sm);
    font-size:var(--fs-xs);
    line-height:1.55;
    color:var(--muted);
  }
  .pt-note b{ color:var(--ink); }

  /* --- Где искать школы --- */
  .pt-who{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:clamp(14px, 1.8vw, 24px);
    margin-top:clamp(28px, 3.2vw, 44px);
  }
  .pt-who-item{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:clamp(18px, 2vw, 26px);
    box-shadow:var(--sh-sm);
  }
  .pt-who-item h3{
    margin:0 0 8px;
    font-size:var(--fs-sm);
    color:var(--ink);
  }
  .pt-who-item p{
    margin:0;
    font-size:var(--fs-2xs);
    line-height:1.55;
    color:var(--muted);
  }

  /* --- Вопросы и ссылка на документацию --- */
  .pt-faq{ max-width:820px; margin-left:auto; margin-right:auto; }
  .pt-doc-link{
    margin:clamp(22px, 2.4vw, 32px) auto 0;
    text-align:center;
    font-size:var(--fs-xs);
    color:var(--muted);
  }
  .pt-doc-link a{ color:var(--blue); font-weight:700; text-decoration:none; }
  .pt-doc-link a:hover{ text-decoration:underline; }

  /* --- Узкие экраны --- */
  @media(max-width:1024px){
    .pt-facts, .pt-flow, .pt-who{ grid-template-columns:repeat(2, 1fr); }
    .pt-calc, .pt-cab{ grid-template-columns:1fr; }
    .pt-arrow{ transform:rotate(90deg); }
  }
  @media(max-width:600px){
    .pt-facts, .pt-flow, .pt-who{ grid-template-columns:1fr; }
    .pt-ladder{ grid-template-columns:repeat(2, 1fr); }
    .pt-levels{ flex-direction:column; align-items:stretch; }
    .pt-lvl{ max-width:none; }
  }
  @media(prefers-reduced-motion:reduce){
    .pt-tab, .pt-rung{ transition:none; }
    .pt-fade{ animation:none; }
  }


  /* =================================================================
     МОБИЛЬНАЯ ВЁРСТКА — ПОЧИНКА ПОСЛЕ РЕДИЗАЙНА
     Правила слоя обновления облика писались без медиазапросов и шли
     в файле после старых мобильных правил, поэтому отменяли их.
     Самое заметное: первый экран оставался в две колонки, левая
     колонка сжималась до ~150px, и текст на кнопках обрезался.
     Этот блок стоит последним и возвращает одноколоночную раскладку.
     ================================================================= */

  @media(max-width:900px){
    /* --- Первый экран --- */
    .hero-row{
      grid-template-columns:1fr;      /* было 1fr / 1.15fr — колонка сжималась */
      gap:clamp(20px, 4vw, 32px);
      align-items:stretch;
    }
    .hero-row-text{
      order:0;
      display:block;                  /* flex с распорками тут не нужен */
      max-width:none;
    }
    .hero-cards{
      order:1;
      margin:0;                       /* отрицательный отступ уводил картинку за экран */
      width:100%;
      max-width:none;
      transform:none;
      min-height:0;
    }
    .hero-copy-top h1{ font-size:var(--fs-2xl); line-height:1.12; }

    /* Кнопки: на всю ширину и по центру — иначе текст не помещается */
    .hero-cta{
      width:100%;
      flex-direction:column;
      align-items:stretch;
      gap:10px;
    }
    .hero-cta .btn{
      width:100%;
      justify-content:center;
      white-space:normal;             /* длинная подпись переносится, а не режется */
      padding-left:18px;
      padding-right:18px;
    }

    /* Галочки возможностей — обратно в столбик */
    .hero-badges{
      flex-direction:column;
      align-items:flex-start;
      gap:10px;
    }
    .hero-fine{ font-size:var(--fs-2xs); }
  }

  /* --- Общее правило для всех кнопок на узком экране ---
     Длинные подписи («Попробовать 14 дней бесплатно») не влезали
     в одну строку и обрезались по краям контейнера. */
  @media(max-width:600px){
    .btn{
      white-space:normal;
      text-align:center;
      max-width:100%;
    }
    .cta-final .btn, .cta-strip .btn, .demo-btns .btn,
    .rz-cta-btns .btn, .da-cta .btn, .sw-help .btn{
      width:100%;
      justify-content:center;
    }
    .rz-cta-btns, .demo-btns, .da-cta{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:10px;
    }
  }

  /* --- Подвал: четыре колонки не помещаются --- */
  @media(max-width:640px){
    .foot-top{
      grid-template-columns:1fr;
      gap:26px;
    }
    .foot-desc{ max-width:none; }
    .foot-bottom{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
  }

  /* --- Шаги подключения: список и картинка друг под другом --- */
  @media(max-width:900px){
    .sw-grid{ grid-template-columns:1fr; gap:20px; }
    .sw-item{ padding-right:4px; }
    .sw-t i{ font-size:var(--fs-3xs); }
  }

  /* --- Страница партнёрки --- */
  @media(max-width:900px){
    .pt-calc-controls{ padding:18px; }
    .pt-calc-out{ padding:20px; }
  }

  /* Переход по якорю не должен прятать заголовок под липкую шапку */
  .pt-sec[id], section[id]{ scroll-margin-top:80px; }

  /* --- Шапка на средних экранах ---
     Восемь пунктов меню и три кнопки требуют 1395px, а контейнер
     шапки шире 1180px не бывает. На широком мониторе лишнее просто
     выходило за колонку и было незаметно, но на ноутбуке 1280–1440
     кнопки наезжали на меню. Убираем контурные кнопки: вход и
     поддержка остаются в выпадающем меню. */
  @media(max-width:1360px){
    .nav-cta .btn-line{ display:none; }
    .menu{ gap:15px; }
    .menu a{ font-size:var(--fs-2xs); }
  }

  /* --- Шапка: до 900px меню в строку не помещается ---
     Бургер включался только с 640px, поэтому на планшетах восемь
     пунктов меню плюс три кнопки уезжали за правый край и давали
     горизонтальный скролл всей странице. */
  @media(max-width:900px){
    .menu, .nav-cta .btn-line{ display:none; }
    .menu .only-mob{ display:block; color:var(--blue); font-weight:700; }
    .burger{ display:block; }
    .nav-cta{ gap:10px; }

    /* Выпадающее меню держим на классе, а не на inline-стилях:
       раньше оно оставалось раскрытым после перехода по ссылке
       и не сбрасывалось при повороте экрана. */
    .menu.is-open{
      display:flex;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      flex-direction:column;
      gap:2px;
      margin:0;
      padding:10px 20px 16px;
      background:var(--bg);
      border-bottom:1px solid var(--line);
      box-shadow:var(--sh-md);
      z-index:60;
    }
    .menu.is-open a{
      padding:11px 0;
      font-size:var(--fs-xs);
      border-bottom:1px solid var(--line);
    }
    .menu.is-open a:last-child{ border-bottom:0; }
  }
  /* Шапка — точка отсчёта для выпадающего меню */
  header .nav{ position:relative; }

  /* --- Заголовки: на узком экране крупные ступени слишком велики --- */
  @media(max-width:600px){
    h2{ font-size:var(--fs-xl); line-height:1.18; }
    .sub{ font-size:var(--fs-xs); }
    section{ padding:44px 0; }
    .wrap{ padding-left:16px; padding-right:16px; }
  }


  /* =================================================================
     ФОРМА РЕГИСТРАЦИИ НА САЙТЕ
     Повторяет форму кабинета по составу полей, но в оформлении
     лендинга. Открывается поверх страницы по тем же кнопкам,
     которые раньше уводили на /signup.
     ================================================================= */
  .su-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:clamp(16px, 4vh, 48px) 16px;
    background:rgba(10, 25, 45, .55);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    overflow-y:auto;
    animation:suFade .18s ease;
  }
  .su-overlay[hidden]{ display:none; }
  @keyframes suFade{ from{ opacity:0 } to{ opacity:1 } }

  .su-modal{
    position:relative;
    width:100%;
    max-width:430px;
    margin:auto;
    background:var(--bg);
    border-radius:var(--r-lg);
    box-shadow:0 24px 60px rgba(8, 25, 48, .32);
    padding:clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px);
    animation:suRise .22s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes suRise{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

  .su-close{
    position:absolute;
    top:10px; right:12px;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    background:none;
    border:0;
    border-radius:50%;
    font-size:26px;
    line-height:1;
    color:var(--muted);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .su-close:hover{ background:var(--bg-soft); color:var(--ink); }
  .su-close:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(24,144,255,.35); }

  .su-title{
    margin:0 0 6px;
    font-size:var(--fs-lg);
    text-align:center;
    color:var(--ink);
  }
  .su-sub{
    margin:0 0 20px;
    font-size:var(--fs-2xs);
    line-height:1.5;
    text-align:center;
    color:var(--muted);
  }

  .su-field{ display:block; margin-bottom:13px; }
  .su-label{
    display:block;
    margin-bottom:6px;
    font-size:var(--fs-3xs);
    font-weight:700;
    letter-spacing:.02em;
    color:var(--muted);
  }
  .su-input{
    width:100%;
    padding:12px 14px;
    font-family:inherit;
    font-size:var(--fs-xs);
    color:var(--ink);
    background:var(--bg);
    border:1.5px solid var(--line);
    border-radius:var(--r-sm);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .su-input::placeholder{ color:#9aa8ba; }
  .su-input:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(24,144,255,.14);
  }
  .su-input.is-bad{ border-color:#dc2626; }
  .su-input.is-bad:focus{ box-shadow:0 0 0 3px rgba(220,38,38,.14); }

  /* Сообщение об ошибке занимает место только когда оно есть —
     иначе форма дёргалась бы по высоте на каждой проверке. */
  .su-err{
    display:block;
    font-size:var(--fs-3xs);
    line-height:1.4;
    color:#dc2626;
  }
  .su-err:not(:empty){ margin-top:5px; }

  .su-agree{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:14px 0 4px;
    font-size:var(--fs-3xs);
    line-height:1.5;
    color:var(--muted);
    cursor:pointer;
  }
  .su-agree input{
    flex:0 0 auto;
    width:17px; height:17px;
    margin-top:1px;
    accent-color:var(--orange);
    cursor:pointer;
  }
  .su-agree a{ color:var(--blue); text-decoration:none; }
  .su-agree a:hover{ text-decoration:underline; }

  .su-submit{
    width:100%;
    justify-content:center;
    margin-top:14px;
    padding:14px 20px;
    font-size:var(--fs-xs);
  }
  .su-submit:disabled{ opacity:.7; cursor:default; transform:none; }

  .su-common{
    margin:10px 0 0;
    font-size:var(--fs-3xs);
    line-height:1.45;
    text-align:center;
    color:#dc2626;
  }
  .su-common:empty{ margin:0; }

  .su-login{
    margin:16px 0 0;
    font-size:var(--fs-3xs);
    text-align:center;
    color:var(--muted);
  }
  .su-login a{ color:var(--blue); font-weight:700; text-decoration:none; }
  .su-login a:hover{ text-decoration:underline; }

  @media(max-width:600px){
    .su-overlay{ padding:0; }
    .su-modal{
      max-width:none;
      min-height:100%;
      border-radius:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
  }
  @media(prefers-reduced-motion:reduce){
    .su-overlay, .su-modal{ animation:none; }
  }


  /* =================================================================
     ЮРИДИЧЕСКИЕ СТРАНИЦЫ (оферта, политика обработки данных)
     Раньше жили на Tilda по адресам /terms и /politica. При переезде
     домена они бы пропали, а на них ссылается согласие в форме
     регистрации — поэтому перенесены на сайт.
     Длинный текст: узкая колонка и крупный межстрочный интервал,
     чтобы читалось без напряжения.
     ================================================================= */
  .lg-hero{
    background:var(--dark);
    color:#fff;
    padding:clamp(28px, 4vw, 52px) 0 clamp(24px, 3.4vw, 44px);
  }
  .lg-hero h1{
    margin:14px 0 10px;
    font-size:clamp(26px, 3.4vw, 40px);
    line-height:1.14;
    color:#fff;
  }
  .lg-lead{
    margin:0;
    max-width:70ch;
    font-size:var(--fs-xs);
    line-height:1.55;
    color:rgba(255,255,255,.75);
  }
  .lg-hero .rz-back{ color:rgba(255,255,255,.7); }
  .lg-hero .rz-back:hover{ color:#fff; }

  .lg-sec{ padding:clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); background:var(--bg); }

  .lg-doc{
    max-width:78ch;
    margin:0 auto;
    font-size:var(--fs-xs);
    line-height:1.68;
    color:var(--ink);
  }
  .lg-doc h2{
    margin:clamp(28px, 3vw, 40px) 0 12px;
    padding-top:clamp(20px, 2.4vw, 28px);
    border-top:1px solid var(--line);
    font-size:var(--fs-md);
    line-height:1.25;
    color:var(--ink);
  }
  .lg-doc h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
  .lg-doc p{ margin:0 0 12px; }
  .lg-doc ul{
    margin:0 0 14px;
    padding-left:22px;
  }
  .lg-doc li{ margin-bottom:7px; }
  .lg-doc a{ color:var(--blue); word-break:break-word; }
  .lg-doc a:hover{ text-decoration:underline; }

  /* Дата редакции — в конце документа, приглушённо */
  .lg-rev{
    margin-top:clamp(28px, 3vw, 40px);
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:var(--fs-2xs);
    color:var(--muted);
  }

  @media(max-width:600px){
    .lg-doc{ font-size:var(--fs-2xs); line-height:1.62; }
    .lg-doc h2{ font-size:var(--fs-sm); }
  }

  /* ================================================================
     ПАРТНЁРКА: доход зелёным + плашка акции.
     Плашка .pact временно снята с лендинга (акция августа закончилась),
     стили оставлены — вернуть можно одной строкой разметки.
     ================================================================ */
  .pcalc-big,.pcalc-big .pcalc-mo{color:#34d399}
  .pact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
        max-width:820px;margin:0 auto 30px;padding:16px 22px;border-radius:var(--r-lg);
        background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.42)}
  .pact-badge{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
        color:#0b3b2b;background:#34d399;border-radius:var(--r-pill);padding:6px 14px}
  .pact-text{font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
  .pact-text b{color:#7ee2b8}
  @media (max-width:640px){ .pact{flex-direction:column;text-align:center;gap:10px} }

  /* ================================================================
     АГЕНТСТВА И ПОДРЯДЧИКИ (#agencies) — фильтрация по UTM-меткам.
     Раньше это жило внутри роли «Агентствам» в блоке «Для кого»,
     то есть было видно только тем, кто догадался переключить роль.
     ================================================================ */
  .agc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
  .agc-card{position:relative;padding:26px 26px 24px;border-radius:var(--r-lg);
       background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
  .agc-card h3{margin-top:14px;font-size:var(--fs-md);font-weight:800;letter-spacing:-.3px;color:#fff}
  .agc-card p{margin-top:10px;font-size:var(--fs-xs);line-height:1.6;color:rgba(255,255,255,.84)}
  .agc-card p b{color:#7dd3fc}
  .agc-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
       border-radius:50%;background:rgba(125,211,252,.18);border:1px solid rgba(125,211,252,.5);
       color:#7dd3fc;font-weight:800;font-size:15px}
  .agc-shot{margin:36px auto 0;max-width:900px;padding:clamp(8px,1vw,14px);
       background:linear-gradient(135deg,rgba(24,144,255,.22),rgba(255,255,255,.06));
       border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg)}
  .agc-shot img{width:100%;display:block;border-radius:var(--r-md)}
  .agc-shot figcaption{margin-top:12px;padding:0 6px 4px;font-size:13px;color:rgba(255,255,255,.66);text-align:center}
  @media (max-width:820px){ .agc-grid{grid-template-columns:1fr} }

  /* ================================================================
     СОПРОВОЖДЕНИЕ (#onboarding) — «за руку возьмём» + демо-звонок
     ================================================================ */
  section.onb-sec{background:var(--bg-soft);color:var(--ink)}
  .onb-sec h2{color:var(--navy)}
  .onb-sec .sub{color:var(--muted)}  .onb-item h3{font-size:var(--fs-md);font-weight:800;letter-spacing:-.3px;color:var(--navy)}
  /* Внутри светлой секции заголовки красятся в тёмно-синий, а у .demo-box
     собственный синий фон — текст пропадал. Возвращаем белый. */
  .onb-sec .demo-box h2,
  .onb-sec .demo-box h3{color:#fff}
  .onb-sec .demo-box .lead3{color:rgba(255,255,255,.9)}
  .onb-sec .demo-box .demo-points span{color:#fff}

  /* таймер в форме заявки: до конца текущих суток */
  .su-timer{margin-top:14px;padding:10px 14px;border-radius:var(--r-md);text-align:center;
       background:rgba(255,138,0,.10);border:1px solid rgba(255,138,0,.38);
       font-size:13px;line-height:1.45;color:var(--muted)}
  .su-timer b{font-variant-numeric:tabular-nums;font-weight:800;color:var(--orange);font-size:15px}

  /* ================================================================
     БЕЗ SCAN / СО SCAN — делаем переключатель очевидным.
     С телефона люди не понимали, что по нему надо нажать, и уходили,
     так и не увидев вторую половину сравнения.
     ================================================================ */
  .swx-hint{margin:-14px auto 26px;text-align:center;font-size:13px;color:rgba(255,255,255,.62)}
  /* кнопка «Со SCAN» подсвечивается, пока её не нажали */
  .swx-opt[data-mode="on"]:not(.is-on){color:#7dd3fc;animation:swxCall 2.2s ease-in-out infinite}
  @keyframes swxCall{0%,100%{opacity:.75}50%{opacity:1;text-shadow:0 0 18px rgba(125,211,252,.55)}}
  @media (max-width:760px){
    /* во всю ширину — тогда это читается как переключатель, а не как подпись */
    .swx-switch{width:100%;max-width:420px}
    .swx-opt{flex:1 1 0;text-align:center;padding:13px 10px;font-size:14px}
    .swx-hint{margin:-10px auto 22px;font-size:12.5px;max-width:340px;line-height:1.45}
  }

  /* ================================================================
     ВСТРОЕННАЯ ФОРМА РЕГИСТРАЦИИ в блоке «Подключит любой сотрудник».
     На первом шаге вместо скриншота стоит настоящая форма — та же,
     что открывается по кнопке «Регистрация».
     ================================================================ */
  .sw-form{padding:clamp(20px,2.4vw,34px);background:var(--card);border-radius:var(--r-lg);
       border:1px solid var(--line);box-shadow:var(--sh-md)}
  .sw-form[hidden]{display:none}
  /* правило .sw-frame img задаёт display:block и перебивает атрибут hidden */
  .sw-frame img[hidden]{display:none}
  .su-inline .su-title-inline{font-size:var(--fs-md);font-weight:800;letter-spacing:-.3px;color:var(--navy);margin:0}
  .su-inline .su-sub{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:left;max-width:none}
  .su-inline .su-timer{margin-top:12px}
  .su-inline .su-form{margin-top:14px}
  .su-inline .su-field{margin-top:10px}
  .su-inline .su-agree{font-size:12px;line-height:1.45}
  .su-inline .su-login{font-size:13px}

  /* ================================================================
     ЧЕТЫРЕ СИЛЬНЫХ ИНСТРУМЕНТА (#highlights) — раскрытые блоки
     вместо плиток, которые надо было кликать.
     ================================================================ */
  section.hl-sec{background:var(--bg)}
  .hl-sec h2{color:var(--navy)}
  .hl-sec .sub{color:var(--muted)}
  .hl-row{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,3.4vw,56px);align-items:center;margin-top:clamp(44px,5vw,76px)}
  .hl-row.hl-rev .hl-text{order:2}
  .hl-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue)}
  .hl-text h3{margin-top:12px;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.5px;line-height:1.18;color:var(--navy)}
  .hl-text p{margin-top:14px;font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
  .hl-text p b{color:var(--navy)}
  .hl-list{margin-top:18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .hl-list li{position:relative;padding-left:26px;font-size:var(--fs-xs);line-height:1.5;color:var(--muted)}
  .hl-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
       background:var(--blue);box-shadow:0 0 0 4px rgba(24,144,255,.14)}
  .hl-shot{margin:0;padding:clamp(8px,1vw,14px);border-radius:var(--r-lg);
       background:linear-gradient(135deg,rgba(24,144,255,.14),rgba(24,144,255,.04));border:1px solid var(--line)}
  .hl-shot img{width:100%;display:block;border-radius:var(--r-md);border:1px solid var(--line)}
  .hl-shot figcaption{margin-top:12px;padding:0 4px 2px;font-size:13px;color:var(--muted);text-align:center}
  @media (max-width:900px){
    .hl-row{grid-template-columns:1fr;gap:22px}
    .hl-row.hl-rev .hl-text{order:0}
  }

  /* экран «подтвердите почту» — показывается вместо формы после отправки */
  .su-sent{text-align:center;padding:6px 0 2px}
  .su-sent-ic{font-size:38px;line-height:1;color:var(--blue)}
  .su-sent-t{margin-top:14px;font-size:var(--fs-md);font-weight:800;letter-spacing:-.3px;color:var(--navy)}
  .su-sent-p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted)}
  .su-sent-p b{color:var(--navy);word-break:break-all}
  .su-sent-small{font-size:12.5px}
  .su-sent .btn{margin-top:18px}

  /* ================================================================
     Скрины интерфейса открываются в лайтбоксе по клику — показываем это
     курсором-лупой, иначе увеличение никто не находит.
     ================================================================ */
  .hl-shot img, .agc-shot img, .tool-shot img, .sw-frame img,
  .role-shot img, .df-out-card img, .mini-card img, .wide-shot img{cursor:zoom-in}
  .hl-shot img:hover, .agc-shot img:hover, .tool-shot img:hover,
  .role-shot img:hover{filter:brightness(1.02)}
  .lightbox.open img{cursor:zoom-out}

  /* ================================================================
     ПОДКЛЮЧЕНИЕ (#onboarding) — способы на выбор.
     Слева список способов, справа панель с подробностями. Панель
     фиксированной высоты, поэтому при переключении страница не прыгает.
     ================================================================ */
  .onb-pick{
    display:grid; grid-template-columns:minmax(280px, 360px) 1fr;
    gap:clamp(18px, 2.2vw, 32px); margin-top:36px; align-items:start;
  }
  .onb-list{display:flex; flex-direction:column; gap:8px}
  .onb-opt{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    padding:14px 16px; border-radius:var(--r-lg); cursor:pointer;
    background:var(--card); border:1px solid var(--line);
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .onb-opt:hover{border-color:rgba(24,144,255,.45); transform:translateX(2px)}
  .onb-opt.is-on{background:#fff; border-color:var(--blue); box-shadow:var(--sh-md)}
  .onb-ic{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px;
    background:rgba(24,144,255,.10); color:var(--blue);
    transition:background .2s ease, color .2s ease;
  }
  .onb-ic svg{width:21px; height:21px}
  .onb-opt.is-on .onb-ic{background:var(--blue); color:#fff}
  .onb-t{display:flex; flex-direction:column; gap:2px; min-width:0}
  .onb-t b{font-size:15px; font-weight:700; color:var(--navy); letter-spacing:-.2px}
  .onb-t i{font-style:normal; font-size:13px; color:var(--muted)}

  .onb-pane{
    position:relative; min-height:340px; padding:clamp(24px, 2.6vw, 38px);
    border-radius:var(--r-lg); color:#fff;
    background:radial-gradient(620px 340px at 88% -14%, rgba(56,189,248,.30), transparent),
               linear-gradient(158deg, #123255, #0e2a49);
    border:1px solid rgba(255,255,255,.10);
  }
  .onb-kicker{font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#7dd3fc}
  .onb-pane h3{margin-top:12px; font-size:var(--fs-lg); font-weight:800; letter-spacing:-.5px; line-height:1.2; color:#fff}
  .onb-pane p{margin-top:12px; font-size:var(--fs-sm); line-height:1.6; color:rgba(255,255,255,.86); max-width:62ch}
  .onb-points{margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
  .onb-points li{position:relative; padding-left:26px; font-size:var(--fs-xs); line-height:1.5; color:rgba(255,255,255,.86)}
  .onb-points li::before{
    content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:50%;
    background:#7dd3fc; box-shadow:0 0 0 4px rgba(125,211,252,.18);
  }
  .onb-pane .btn{margin-top:22px}
  .onb-fade{animation:onbFade .32s cubic-bezier(.16,1,.3,1)}
  @keyframes onbFade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

  .onb-foot{margin-top:22px; text-align:center; font-size:13px; color:var(--muted)}

  @media (max-width:900px){
    .onb-pick{grid-template-columns:1fr}
    .onb-list{flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:none}
    .onb-list::-webkit-scrollbar{display:none}
    .onb-opt{flex:0 0 auto; width:auto; padding:10px 14px}
    .onb-t i{display:none}
    .onb-pane{min-height:0}
  }
  @media (prefers-reduced-motion: reduce){
    .onb-fade{animation:none}
    .onb-opt:hover{transform:none}
  }

  /* ================================================================
     Текст в «Четырёх вещах» и в «Для кого» был разрежен: крупный кегль,
     большие интервалы и много воздуха между блоками. Собираем плотнее —
     читается как связный абзац, а не как разбросанные строки.
     ================================================================ */
  .hl-row{margin-top:clamp(30px, 3.4vw, 52px); gap:clamp(20px, 2.6vw, 40px)}
  .hl-text h3{margin-top:8px; font-size:var(--fs-md); line-height:1.22}
  .hl-text p{margin-top:10px; font-size:var(--fs-xs); line-height:1.55; max-width:56ch}
  .hl-list{margin-top:14px; gap:7px}
  .hl-list li{padding-left:22px; line-height:1.45}
  .hl-list li::before{width:6px; height:6px; box-shadow:0 0 0 3px rgba(24,144,255,.14)}
  .hl-shot figcaption{margin-top:9px; font-size:12.5px}

  .role-text h3{font-size:var(--fs-md); line-height:1.22}
  .role-lead{margin-top:6px; line-height:1.45}
  .role-list{gap:7px}
  .role-list li{line-height:1.4; padding-left:26px}
  .role-chips{margin-top:14px; gap:7px}
  .role-chips span{padding:5px 11px}

  /* Кнопка внутри тёмной панели способов: правило .btn-blue в светлых
     секциях делает её прозрачной с тёмной рамкой — на синем фоне текст
     пропадал. Задаём явный контрастный вид. */
  .onb-pane .btn,
  .onb-pane .btn-blue{background:#fff;border:1.5px solid #fff;color:var(--navy);box-shadow:var(--sh-md)}
  .onb-pane .btn:hover,
  .onb-pane .btn-blue:hover{background:#eaf4ff;border-color:#eaf4ff;color:var(--blue-deep)}
  .onb-pane .btn .arw{color:inherit}

  /* ================================================================
     «Один SCAN — и вся команда при деле»: роли переезжают наверх.
     Список слева занимал треть ширины и растягивал блок по высоте —
     текст оказывался в узкой колонке и разъезжался. Теперь роли идут
     строкой над содержимым, а под ними широкая панель: текст слева,
     экран справа.
     ================================================================ */
  .roles{grid-template-columns:1fr; gap:0; margin-top:26px}

  .roles-nav{
    flex-direction:row; flex-wrap:wrap; gap:8px;
    justify-content:center; margin-bottom:22px;
  }
  .role-nav-i{
    width:auto; flex:0 0 auto;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:var(--r-pill) !important;
    padding:9px 16px 9px 12px !important;
    gap:9px;
  }
  .role-nav-i:last-child{border-bottom:1px solid rgba(255,255,255,.16) !important}
  .role-nav-i:hover{background:rgba(255,255,255,.10); padding-left:12px !important; transform:none}
  .role-nav-i.is-on{
    background:rgba(255,255,255,.14);
    border-color:rgba(125,211,252,.55) !important;
  }
  .role-nav-i .role-ic{width:24px; height:24px}
  .role-nav-i .role-ic svg{width:15px; height:15px}
  .role-nav-i .role-nm{font-size:13.5px; font-weight:700; white-space:nowrap}
  /* полоска автопоказа рисовалась слева от пункта списка — в строке она не нужна */
  .role-nav-i .role-bar{display:none}

  /* Панель: текст и экран одной высоты, воздух умеренный */
  .role-pane.is-on{grid-template-columns:1fr 1.05fr; gap:clamp(16px, 2vw, 30px)}
  .role-text{padding:clamp(20px, 2.2vw, 30px) 0 clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px)}
  .role-text h3{font-size:var(--fs-md); line-height:1.2}
  .role-lead{margin-top:6px; font-size:13.5px; line-height:1.45}
  .role-list{margin-top:14px; gap:8px}
  .role-list li{padding-left:26px; font-size:13.5px; line-height:1.4}
  .role-chips{margin-top:14px; gap:7px}
  .role-chips span{font-size:11.5px; padding:5px 11px}
  .role-shot{padding:clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) 0; gap:8px}
  .role-shot figcaption{font-size:12px}

  @media (max-width:980px){
    .roles-nav{justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto}
    .role-pane.is-on{grid-template-columns:1fr}
    .role-text{padding:20px 20px 0}
    .role-shot{padding:16px 20px 20px}
  }

  /* ================================================================
     Короткий блок о конфиденциальности под строкой цифр.
     ================================================================ */
  .privacy-note{
    display:flex; gap:16px; align-items:flex-start;
    max-width:900px; margin:22px auto 0; padding:18px 22px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  }
  .pn-ic{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:12px;
    background:rgba(24,144,255,.10); color:var(--blue);
  }
  .pn-ic svg{width:20px; height:20px}
  .pn-txt b{display:block; font-size:15px; font-weight:800; color:var(--navy); letter-spacing:-.2px}
  .pn-txt p{margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--muted)}
  .pn-txt p b{display:inline; font-size:inherit; color:var(--navy)}
  @media (max-width:620px){
    .privacy-note{flex-direction:column; gap:12px; padding:16px 18px}
  }

  /* Цифр в строке стало пять — раскладка была жёстко на четыре колонки */
  .stats{grid-template-columns:repeat(5, 1fr)}
  @media (max-width:1100px){ .stats{grid-template-columns:repeat(3, 1fr)} }
  @media (max-width:760px){ .stats{grid-template-columns:repeat(2, 1fr)} }
  @media (max-width:460px){ .stats{grid-template-columns:1fr} }

  /* ================================================================
     «Один SCAN — и вся команда при деле»: после переноса ролей наверх
     текст оказался слишком мелким, а между колонками и вокруг панели
     остался лишний воздух. Возвращаем читаемый кегль и подтягиваем
     содержимое друг к другу.
     ================================================================ */
  .role-pane.is-on{grid-template-columns:1.05fr 1fr; gap:clamp(20px, 2.2vw, 34px); align-items:center}
  .role-text{padding:clamp(18px, 2vw, 26px) 0 clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 34px)}
  .role-text h3{font-size:clamp(20px, 1.5vw, 24px); line-height:1.2}
  .role-lead{margin-top:8px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.86)}
  .role-list{margin-top:16px; gap:10px}
  .role-list li{padding-left:28px; font-size:15px; line-height:1.45}
  .role-list li .em{top:.1em}
  .role-chips{margin-top:16px; gap:8px}
  .role-chips span{font-size:12.5px; padding:6px 13px}
  .role-shot{padding:clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 22px) 0; gap:10px}
  .role-shot figcaption{font-size:12.5px}

  /* кнопка под блоком стояла слишком далеко */
  #audience .ps-cta{margin-top:clamp(22px, 2.4vw, 34px)}

  @media (max-width:980px){
    .role-text{padding:20px 20px 0; font-size:15px}
    .role-shot{padding:14px 20px 20px}
  }

  /* Плашка над встроенной формой: предложение читается как акция */
  .su-promo-badge{
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 14px; margin-bottom:12px;
    background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.34);
    border-radius:var(--r-pill);
    font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
    color:#15803d;
  }
  .su-promo-badge::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18);
  }

  /* ================================================================
     ПРЕЗЕНТАЦИЯ (#presentation) — своя секция. Раньше видео жило внутри
     блока живого демо и перетягивало на себя внимание с интерфейса.
     ================================================================ */
  section.pres-sec{background:var(--bg-soft)}
  .pres-sec h2{color:var(--navy)}
  .pres-sec .sub{color:var(--muted)}
  .pres-sec .sect-fold{margin-top:26px}
  .pres-sec .video-embed{margin-top:18px;max-width:900px}

  /* ================================================================
     МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ — последним блоком в файле.
     Правки последних дней дописывались в конец, и правила без
     медиазапроса перебивали мобильные из середины файла: на телефоне
     двухколоночные блоки оставались в две колонки, текст ужимался
     в узкую полосу по два-три слова в строку.
     ================================================================ */
  @media (max-width:980px){
    .role-pane.is-on{grid-template-columns:1fr; gap:0}
    .role-text{padding:20px 18px 0}
    .role-shot{padding:14px 18px 18px}
    .role-text h3{font-size:20px}
    .role-lead,.role-list li{font-size:14.5px}
    /* чипы и скриншот стояли впритык — добавляем воздух между ними */
    .role-chips{margin-bottom:4px}
    .role-shot{padding:26px 18px 20px}
    .role-shot figcaption{margin-top:4px}
  }

  @media (max-width:900px){
    .hl-row{grid-template-columns:1fr; gap:20px}
    .hl-row.hl-rev .hl-text{order:0}
    .onb-pick{grid-template-columns:1fr}
    .tools-view{grid-template-columns:1fr}
    .agc-row{grid-template-columns:1fr}
    .cs-grid{grid-template-columns:1fr}
    .sw-grid{grid-template-columns:1fr}
  }

  @media (max-width:1024px){
    .sec-grid{grid-template-columns:repeat(2, 1fr)}
  }
  @media (max-width:560px){
    .sec-grid{grid-template-columns:1fr}
    .privacy-note{flex-direction:column; gap:12px}
    .cs-facts{grid-template-columns:repeat(2, 1fr)}
  }

  /* Скрины на телефоне не должны вылезать за экран */
  @media (max-width:768px){
    .hl-shot img,.agc-shot img,.role-shot img,.tool-shot img,
    .sw-frame img,.wide-shot img{max-width:100%; height:auto}
    .wrap{padding-left:16px; padding-right:16px}
  }

  /* У картинок появились атрибуты width/height (чтобы место резервировалось
     заранее и вёрстка не прыгала). Чтобы пропорции не ломались там, где
     ширина тянется по контейнеру, высота считается автоматически. */
  .hl-shot img, .agc-shot img, .role-shot img, .tool-shot img,
  .sw-frame img, .wide-shot img, .df-out-card img, .mini-card img,
  .scr-stage img, .sec-shot img, .rev-shot img,
  .fcard img, .fcard-in, .df-hub img, .lightbox img,
  .rz-promo img, .pn-ic img, .su-inline img{height:auto}

  /* ================================================================
     У картинок появились атрибуты width/height. Если в CSS высота не
     задана, браузер берёт её прямо из атрибута — и картинка растягивается
     (плавающие карточки в схеме потоков вытянулись в столбики). Высоту
     считаем от ширины, а тем немногим, кому нужна фиксированная,
     возвращаем её обратно.
     ================================================================ */
  img[width][height]{height:auto}
  header .logo img[width][height]{height:40px;width:auto}
  footer .logo img[width][height]{height:38px;width:auto}
  .rw-thumb img[width][height]{height:100%}
  .logo-ph img[width][height]{max-height:56px;height:auto;width:auto}
  @media (max-width:1024px){ header .logo img[width][height]{height:34px} }

  /* ================================================================
     Горизонтальные ленты на телефоне (роли, способы подключения):
     без подсказки не видно, что их можно листать. Даём затухание
     у правого края и подхват карточек при пролистывании.
     ================================================================ */
  @media (max-width:900px){
    .onb-list, .roles-nav{
      scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;
      scroll-padding-left:2px;
      -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 100%);
      mask-image:linear-gradient(90deg,#000 82%,transparent 100%);
    }
    .onb-opt, .role-nav-i{scroll-snap-align:start}
    /* у последней карточки — небольшой хвост, чтобы затухание не съедало текст */
    .onb-list::after, .roles-nav::after{content:"";flex:0 0 22px}
  }

  /* ================================================================
     На телефоне flex-контейнеры переключаются в колонку, и flex-basis
     начинает задавать ВЫСОТУ: блок «Попробуйте на своих данных» с
     basis 340px раздувался пустотой на треть экрана. Возвращаем
     обычную высоту по содержимому.
     ================================================================ */
  @media (max-width:900px){
    .cta-strip{flex-direction:column;text-align:center;gap:16px;padding:24px 20px;margin-top:34px}
    .cta-strip .cs-text{flex:0 0 auto;width:100%}
    .cta-strip > div{width:100%}
    .sw-help-txt{flex:0 0 auto}
    .bonus-card,.sup-item,.case-card,.report-item,.mini-card,.guar-item{flex:0 0 auto;max-width:none;width:100%}
    /* схема уровней партнёрки: три карточки в столбик, высота по тексту */
    .pt-lvl{flex:0 0 auto;max-width:none;width:100%;padding:16px 18px}
    .pt-levels{gap:10px;align-items:stretch}
    .pt-arrow{transform:rotate(90deg);font-size:20px;margin:2px 0;color:var(--muted)}
    .pt-lvl-body{font-size:14.5px}
    .pt-lvl-pct{margin-top:10px}
  }

  /* ================================================================
     ОКНО ВНУТРЕННИХ СТРАНИЦ (партнёрка, разборы отчётов).
     Страница грузится в рамке поверх лендинга: человек читает и
     возвращается туда же, откуда пришёл.
     ================================================================ */
  .page-modal{
    position:fixed; inset:0; z-index:1200;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(12px, 3vw, 44px);
    background:rgba(9,26,45,.66);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    animation:pmIn .2s ease;
  }
  .page-modal[hidden]{display:none}
  @keyframes pmIn{from{opacity:0} to{opacity:1}}

  /* само окно: не на весь экран, вокруг видно затемнённую страницу */
  .pm-window{
    display:flex; flex-direction:column;
    width:min(1120px, 100%); height:min(88vh, 100%);
    background:#fff; border-radius:var(--r-lg); overflow:hidden;
    box-shadow:0 30px 80px rgba(9,26,45,.45);
    animation:pmUp .26s cubic-bezier(.16,1,.3,1);
  }
  @keyframes pmUp{from{opacity:0; transform:translateY(18px) scale(.99)} to{opacity:1; transform:none}}

  .pm-head{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:12px clamp(14px, 2vw, 24px);
    background:var(--card); border-bottom:1px solid var(--line);
  }
  .pm-title{font-size:var(--fs-sm); font-weight:800; color:var(--navy); letter-spacing:-.2px}
  .pm-close{
    width:34px; height:34px; border-radius:50%;
    border:1px solid var(--line); background:var(--bg);
    font-size:22px; line-height:1; color:var(--muted); cursor:pointer;
    transition:background .18s ease, color .18s ease;
  }
  .pm-close:hover{background:var(--navy); color:#fff; border-color:var(--navy)}

  .pm-body{flex:1 1 auto; min-height:0; background:#fff}
  .pm-body iframe{display:block; width:100%; height:100%; border:0}

  @media (max-width:600px){
    .page-modal{padding:0}
    .pm-window{width:100%; height:100%; border-radius:0}
    .pm-title{font-size:14px}
  }
  @media (prefers-reduced-motion: reduce){
    .page-modal, .pm-window{animation:none}
  }

  /* ================================================================
     ВСТРОЕННЫЙ РЕЖИМ (страница открыта в окне поверх лендинга):
     свои шапка, подвал и липкая кнопка не нужны — они дублируют то,
     что уже есть на странице под окном.
     ================================================================ */
  .is-embed header,
  .is-embed footer,
  .is-embed .msticky,
  .is-embed .totop,
  .is-embed .back-home,
  .is-embed .rz-back{display:none !important}
  .is-embed body{padding-top:0 !important}
  .is-embed section:first-of-type{padding-top:clamp(28px, 3vw, 48px)}

  /* ================================================================
     ОКНО ВХОДА (login-form.js)
     Оформление берём у формы регистрации — классы su-* общие.
     Здесь только то, чего в ней нет: поле пароля с кнопкой
     «Показать» и ссылка «Забыли пароль?».
     ================================================================ */
  .lg-pass{position:relative; display:block}
  .lg-pass .su-input{padding-right:96px}

  .lg-eye{
    position:absolute;
    top:50%; right:8px;
    transform:translateY(-50%);
    padding:6px 8px;
    background:none;
    border:0;
    border-radius:var(--r-sm);
    font-family:inherit;
    font-size:var(--fs-3xs);
    font-weight:700;
    color:var(--blue);
    cursor:pointer;
    transition:background .15s ease;
  }
  .lg-eye:hover{background:var(--bg-soft)}
  .lg-eye:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(24,144,255,.35)}

  .lg-forgot{margin:-4px 0 2px; text-align:right}
  .lg-forgot a{
    font-size:var(--fs-3xs);
    font-weight:700;
    color:var(--blue);
    text-decoration:none;
  }
  .lg-forgot a:hover{text-decoration:underline}

  /* Кнопка возврата на экране «письмо отправлено» — как ссылка-кнопка формы */
  .lg-overlay .su-sent .btn{width:100%; justify-content:center}
  .su-common a{color:var(--blue); font-weight:700; text-decoration:underline; white-space:nowrap}