/* ============================================================================
   DAZZBOR Pulse — стили публичного лендинга платформы. ИСТОЧНИК ПРАВДЫ.
   Вынесены из platform_landing.py фазой А (docs/СПЕКА_ДИЗАЙН_ЦИКЛ.md):
   правятся как обычный CSS, в т.ч. циклом через claude.ai/design.

   Сюда НЕ входят правила переключателя ниш демо-витрины: их генерирует
   _demo_css() в platform_landing.py под фактическое число ниш, и они
   остаются инлайн-блоком <style> в шаблоне (плейсхолдер __NZ_CSS__).

   Версию для сброса кэша (?v=) считает Python от содержимого файла.
   ============================================================================ */

 /* Onest — САМОХОСТ (ни одного внешнего запроса), 4 подмножества. Литерально из theme.py. */
 @font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;
   src:url("/static/fonts/onest-latin.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:"Onest";font-style:normal;font-weight:100 900;font-display:swap;
   src:url("/static/fonts/onest-latin-ext.woff2") format("woff2");
   unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
 @font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;
   src:url("/static/fonts/onest-cyrillic.woff2") format("woff2");
   unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
 @font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;
   src:url("/static/fonts/onest-cyrillic-ext.woff2") format("woff2");
   unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
 :root{
   /* Палитра Pulse — литерально из theme.py */
   --bg:#fafafa; --panel:#ffffff; --panel2:#f4f4f5;
   --line:#ececee; --line2:#f4f4f6; --line3:#dcdce0;
   --txt:#101014; --muted:#6f6f78; --faint:#a4a4ad;
   --ink:#16161a; --ink2:#26262c;
   --a1:#5b5bd6; --a2:#00b3c6;
   --aurora:linear-gradient(120deg,#5b5bd6 0%,#3b7dd8 52%,#00b3c6 100%);
   --aurora-soft:linear-gradient(120deg,rgba(91,91,214,.09),rgba(0,179,198,.09));
   --a-text:#4747c2; --a-bg:#f0f0fd; --a-line:#d9d9f6;
   --glow:0 10px 32px -12px rgba(75,86,210,.45);
   --green:#0a9e6e; --red:#e5484d; --amber:#d98a06;
   --shadow-sm:0 1px 2px rgba(16,16,20,.04),0 6px 16px -12px rgba(16,16,20,.08);
   --shadow:0 1px 2px rgba(16,16,20,.05),0 14px 34px -18px rgba(16,16,20,.14);
   --r-lg:18px; --r-md:13px; --r-sm:10px;
   --spring:cubic-bezier(.34,1.4,.4,1);
   --spring-soft:cubic-bezier(.3,1.18,.35,1);
   --lux:cubic-bezier(.22,1,.36,1);
   --easeout:cubic-bezier(.2,.85,.25,1);
   --t-fast:.2s; --t-med:.34s; --t-slow:.55s;
 }
 *{box-sizing:border-box}
 html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
 body{margin:0;font-family:"Onest",-apple-system,Segoe UI,Roboto,sans-serif;color:var(--txt);
   background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
   line-height:1.55;overflow-x:hidden}
 a{color:var(--a-text);text-decoration:none}
 h1,h2,h3{margin:0;letter-spacing:-.02em}
 img{max-width:100%;display:block}
 .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
 .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
   clip:rect(0 0 0 0);white-space:nowrap;border:0}

 /* ── Брендмарка «падающий кластер» ── */
 .dzz{width:30px;height:30px;flex:0 0 auto;display:block;overflow:visible}
 .foot-brand .brand .dzz{width:22px;height:22px}
 .dzz .bar,.dzz .dot{transform-box:fill-box}
 .dzz .bar{transform-origin:50% 0}
 .dzz .dot{transform-origin:50% 50%}
 .brand .word{font-weight:650;letter-spacing:.18em;color:#2b2f55;text-transform:uppercase}
 .foot-brand .brand .word{font-size:15px}
 html.anim .dzz.go .bar{
   animation-name:dzz-fall,dzz-eq;animation-duration:.9s,2.8s;
   animation-timing-function:var(--spring),ease-in-out;
   animation-iteration-count:1,infinite;
   animation-fill-mode:both,none;animation-direction:normal,alternate}
 html.anim .dzz.go .b-b{animation-delay:0ms,1s;    animation-duration:.9s,2.7s}
 html.anim .dzz.go .b-d{animation-delay:90ms,1.1s; animation-duration:.9s,3.4s}
 html.anim .dzz.go .b-c{animation-delay:180ms,.9s; animation-duration:.9s,3s}
 html.anim .dzz.go .b-a{animation-delay:270ms,1.2s;animation-duration:.9s,3.7s}
 html.anim .dzz.go .b-e{animation-delay:360ms,1s;  animation-duration:.9s,2.4s}
 html.anim .dzz.go .dot{
   animation-name:dzz-drop,dzz-pulse;animation-duration:.5s,3.4s;
   animation-timing-function:var(--spring),ease-in-out;
   animation-iteration-count:1,infinite;animation-fill-mode:both,none;
   animation-delay:470ms,1.2s}
 @keyframes dzz-fall{from{transform:translateY(-8px) scaleY(.4)}to{transform:none}}
 @keyframes dzz-eq{from{transform:scaleY(1)}to{transform:scaleY(.6)}}
 @keyframes dzz-drop{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
 @keyframes dzz-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

 /* ── Навбар ── */
 /* background-COLOR лонгхандом — по той же причине, что у `.nz-tab` ниже. */
 .nav{position:sticky;top:0;z-index:50;transition:background-color var(--t-med) var(--easeout),
   backdrop-filter var(--t-med) var(--easeout)}
 .nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
   opacity:0;transition:opacity var(--t-med) var(--easeout)}
 .nav.stuck{background-color:rgba(250,250,250,.84);backdrop-filter:blur(14px) saturate(1.2);
   -webkit-backdrop-filter:blur(14px) saturate(1.2)}
 .nav.stuck::after{opacity:1}
 .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
 .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;
   letter-spacing:-.03em;color:var(--txt)}
 .brand .pill{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--a-text);
   background:var(--a-bg);border:1px solid var(--a-line);border-radius:999px;padding:2px 8px}
 .nav-links{display:flex;align-items:center;gap:4px}
 .nav-links a.anch{position:relative;color:var(--muted);font-weight:600;font-size:14px;
   padding:8px 12px;border-radius:9px;transition:color var(--t-med) var(--easeout)}
 .nav-links a.anch::after{content:"";position:absolute;left:12px;right:100%;bottom:5px;height:2px;
   border-radius:2px;background:var(--aurora);transition:right var(--t-med) var(--spring-soft)}
 .nav-links a.anch:hover{color:var(--txt)}
 .nav-links a.anch:hover::after{right:12px}

 /* ── Кнопки ── */
 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
   font-weight:700;font-size:14.5px;border-radius:11px;padding:11px 18px;cursor:pointer;
   border:1px solid transparent;background:var(--ink);color:#fff;text-decoration:none;
   min-height:44px;touch-action:manipulation;
   transition:transform var(--t-med) var(--spring),box-shadow var(--t-med) var(--easeout),
     background-position var(--t-slow) var(--easeout),opacity var(--t-fast) var(--easeout)}
 .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(16,16,22,.5)}
 .btn:active{transform:translateY(0)}
 .btn.aurora{background:var(--aurora);background-size:180% 180%;background-position:20% 50%;
   color:#fff;border:0}
 .btn.aurora:hover{background-position:80% 50%;box-shadow:var(--glow)}
 .btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
 .btn.wide{width:100%;margin-top:6px;font-size:15.5px;padding:13px 18px;min-height:50px}
 .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
   font-size:14.5px;border-radius:11px;padding:11px 18px;cursor:pointer;min-height:44px;
   font-family:inherit;touch-action:manipulation;background:var(--panel);color:var(--txt);
   border:1px solid var(--line);text-decoration:none;
   transition:transform var(--t-med) var(--spring),border-color var(--t-med) var(--easeout),
     box-shadow var(--t-med) var(--easeout)}
 .btn-ghost:hover{transform:translateY(-2px);border-color:var(--line3);box-shadow:var(--shadow-sm)}
 .btn.sm{padding:9px 15px;font-size:13.5px;min-height:44px}
 :where(a,button,input,label.nz-tab):focus-visible{outline:none;
   box-shadow:0 0 0 4px rgba(91,91,214,.35)}

 /* ── Hero ── */
 .hero{position:relative;display:flex;align-items:center;padding:44px 0 66px;overflow:hidden}
 /* .wrap здесь — флекс-элемент: без width/min-width он раздувается до min-content своего
    содержимого и на узком экране вылезает за край (спасал только overflow:hidden выше). */
 .hero>.wrap{width:100%;min-width:0}
 .hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:52px;
   align-items:center;width:100%}
 .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
 .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16}
 .blob.b1{width:520px;height:520px;top:-150px;left:-120px;
   background:radial-gradient(circle,#5b5bd6,transparent 70%);animation:float1 20s ease-in-out infinite}
 .blob.b2{width:560px;height:560px;bottom:-200px;right:-140px;
   background:radial-gradient(circle,#00b3c6,transparent 70%);animation:float2 26s ease-in-out infinite}
 .hero-grid-lines{position:absolute;inset:0;opacity:.35;
   background-image:linear-gradient(rgba(16,16,20,.05) 1px,transparent 1px),
     linear-gradient(90deg,rgba(16,16,20,.05) 1px,transparent 1px);
   background-size:44px 44px;
   -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 78%);
   mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 78%)}
 @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}}
 @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,-26px) scale(1.1)}}
 .hero-copy{position:relative;z-index:1}
 .status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650;
   color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;
   padding:6px 13px 6px 11px;box-shadow:var(--shadow-sm)}
 .status .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
   box-shadow:0 0 0 0 rgba(10,158,110,.45);animation:pulse 2.1s infinite}
 @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(10,158,110,0)}100%{box-shadow:0 0 0 0 rgba(10,158,110,0)}}
 h1.title{font-size:clamp(32px,5.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.05;
   margin:20px 0 0}
 h1.title .ln{display:block;overflow:hidden}
 h1.title .ln>span{display:block}
 h1.title .accent{background:var(--aurora);-webkit-background-clip:text;background-clip:text;
   -webkit-text-fill-color:transparent;color:transparent}
 .lead{font-size:clamp(15px,1.7vw,18px);color:var(--muted);margin:22px 0 0;max-width:34em;
   line-height:1.6}
 .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
 .trust{margin:16px 0 0;font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:7px}
 .trust svg{width:15px;height:15px;stroke:var(--faint);flex:0 0 auto}

 /* ── Hero-визуал: «пульт» — три канала стекаются в один кабинет ── */
 .board-wrap{position:relative;z-index:1}
 .board{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
   box-shadow:var(--shadow);overflow:hidden;max-width:430px;margin:0 auto}
 .board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
   padding:14px 16px;border-bottom:1px solid var(--line2);
   background:linear-gradient(180deg,#fff,#fcfcfd)}
 .board-head b{font-size:14px;font-weight:750;letter-spacing:-.01em}
 .board-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
   color:var(--green)}
 .board-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
 .board-list{padding:10px;display:flex;flex-direction:column;gap:8px}
 .brow{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-md);
   border:1px solid var(--line2);background:linear-gradient(180deg,#fcfcfd,#fff)}
 .bch{font-size:10.5px;font-weight:750;letter-spacing:.02em;color:var(--a-text);
   background:var(--a-bg);border:1px solid var(--a-line);border-radius:7px;padding:3px 7px;
   flex:0 0 auto}
 .btxt{flex:1 1 auto;min-width:0;font-size:13px;color:var(--txt);overflow:hidden;
   text-overflow:ellipsis;white-space:nowrap}
 .bsec{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--green);
   font-variant-numeric:tabular-nums}
 .board-foot{display:flex;align-items:center;gap:8px;padding:12px 16px 14px;
   border-top:1px solid var(--line2);background:var(--panel2)}
 .fstep{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;
   color:var(--muted)}
 .fstep i{width:8px;height:8px;border-radius:50%;background:var(--a-line);display:block}
 .fstep.on i{background:var(--a1)}
 .fsep{flex:1 1 auto;height:1px;background:var(--line3);min-width:8px}
 html.anim .brow{opacity:0;transform:translateY(8px);
   animation:brow-in .6s var(--lux) forwards}
 html.anim .brow:nth-child(1){animation-delay:.45s}
 html.anim .brow:nth-child(2){animation-delay:.6s}
 html.anim .brow:nth-child(3){animation-delay:.75s}
 @keyframes brow-in{to{opacity:1;transform:none}}

 /* ── Полоса фактов ── */
 .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 0;
   border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .stat-top{display:flex;align-items:baseline;gap:3px;font-weight:800;letter-spacing:-.03em}
 .stat-pre,.stat-n{font-size:clamp(28px,4vw,40px);font-variant-numeric:tabular-nums}
 .stat-u{font-size:17px;font-weight:700;color:var(--a-text)}
 .stat-l{margin-top:4px;font-size:13px;color:var(--muted);font-weight:550;line-height:1.35}

 /* ── Секции ── */
 section{padding:74px 0}
 .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
   color:var(--faint);margin:0 0 10px}
 h2.sect{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
 .sect-lead{color:var(--muted);font-size:15.5px;margin:12px 0 0;max-width:44em}

 /* ── Проблема / решение ── */
 .vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
 .vs-card{border-radius:var(--r-lg);padding:26px;border:1px solid var(--line);
   background:var(--panel)}
 .vs-card.good{background:var(--aurora-soft);border-color:var(--a-line)}
 .vs-card h3{font-size:16.5px;font-weight:750;margin:0 0 4px}
 .vs-card .vs-sub{font-size:12.5px;color:var(--muted);margin:0 0 16px}
 .vs-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
 .vs-card li{display:flex;gap:11px;font-size:14px;line-height:1.5;color:var(--txt)}
 .li-ic{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;
   justify-content:center;margin-top:1px}
 .li-ic svg{width:14px;height:14px}
 .vs-card.bad .li-ic{background:rgba(229,72,77,.1)}
 .vs-card.bad .li-ic svg{stroke:var(--red)}
 .vs-card.good .li-ic{background:rgba(10,158,110,.12)}
 .vs-card.good .li-ic svg{stroke:var(--green)}

 /* ── Возможности ── */
 .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
 .feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
   transition:transform var(--t-med) var(--spring),border-color var(--t-med) var(--easeout),
     box-shadow var(--t-med) var(--easeout)}
 .feat:hover{transform:translateY(-3px);border-color:var(--line3);box-shadow:var(--shadow)}
 .feat-ic{width:46px;height:46px;border-radius:12px;background:var(--aurora-soft);
   border:1px solid var(--a-line);display:inline-flex;align-items:center;justify-content:center;
   transition:transform var(--t-med) var(--spring)}
 .feat-ic svg{width:23px;height:23px;stroke:var(--a-text)}
 .feat:hover .feat-ic{transform:scale(1.06) rotate(-3deg)}
 .feat h3{font-size:16.5px;font-weight:700;margin:16px 0 7px;letter-spacing:-.01em}
 .feat p{font-size:13.7px;color:var(--muted);margin:0;line-height:1.55}

 /* ── Как это работает ── */
 .steps-wrap{position:relative;margin-top:44px}
 .steps-line{position:absolute;top:23px;left:14%;right:14%;height:2px;background:var(--a-line);
   transform:scaleX(0);transform-origin:left;transition:transform .8s var(--easeout)}
 .steps-line.in{transform:scaleX(1)}
 .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
   gap:26px;position:relative}
 .step{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
 .step-ic{width:46px;height:46px;border-radius:50%;background:var(--panel);
   border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
   box-shadow:var(--shadow-sm)}
 .step-ic svg{width:22px;height:22px;stroke:var(--a-text)}
 .step-n{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;
   background:var(--aurora);-webkit-background-clip:text;background-clip:text;
   -webkit-text-fill-color:transparent;color:transparent}
 .step-t{font-size:16px;font-weight:750;letter-spacing:-.01em}
 .step-p{font-size:13.7px;color:var(--muted);line-height:1.55}

 /* ── ДЕМО-ВИТРИНА ── */
 .demo-sect{background:var(--panel2);border-top:1px solid var(--line);
   border-bottom:1px solid var(--line)}
 .nz{border:0;padding:0;margin:34px 0 0;min-width:0;position:relative}
 .nz .nzr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
   clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .nz-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
 /* Анимируем background-COLOR (лонгханд), а не шорткат `background`: шорткат тянет за собой
    background-image — «дискретное» свойство, которое плавно не анимируется, поэтому браузер
    делает по нему резкий скачок и зря гоняет лишние подсвойства. Активное правило чипа
    (`_demo_css`) по той же причине задаёт background-color, а не `background`. */
 .nz-tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
   padding:10px 16px;border-radius:999px;background-color:var(--panel);
   border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--txt);cursor:pointer;
   touch-action:manipulation;
   transition:background-color var(--t-fast) var(--easeout),color var(--t-fast) var(--easeout),
     border-color var(--t-fast) var(--easeout),transform var(--t-fast) var(--spring)}
 .nz-tab:hover{border-color:var(--line3);transform:translateY(-1px)}
 .nz-stage{margin-top:26px}
 .nz-stage>.pane{display:none}
 .demo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
   box-shadow:var(--shadow);overflow:hidden;max-width:440px;margin:0 auto}
 .demo-head{display:flex;align-items:center;gap:11px;padding:14px 16px;
   border-bottom:1px solid var(--line2);background:linear-gradient(180deg,#fff,#fcfcfd)}
 .demo-av{width:38px;height:38px;border-radius:50%;background:var(--aurora);color:#fff;
   display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
   flex:0 0 auto}
 .demo-who{flex:1 1 auto;min-width:0}
 .demo-who b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
 .demo-who>span{font-size:12px;color:var(--green);font-weight:600;display:inline-flex;
   align-items:center;gap:5px}
 .demo-who>span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
 .demo-ch{flex:0 0 auto;font-size:10.5px;font-weight:750;color:var(--muted);
   background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:3px 8px}
 .chat{padding:16px;display:flex;flex-direction:column;gap:9px;min-height:376px;
   background:linear-gradient(180deg,#fafafb,#fff)}
 .msg{display:flex;max-width:84%}
 .msg.in{align-self:flex-start}
 .msg.out{align-self:flex-end;justify-content:flex-end}
 .bub{position:relative;padding:9px 13px;font-size:13.5px;line-height:1.42;border-radius:15px;
   box-shadow:var(--shadow-sm)}
 .msg.in .bub{background:var(--panel);border:1px solid var(--line);
   border-bottom-left-radius:5px;color:var(--txt)}
 .msg.out .bub{background:var(--panel2);border:1px solid var(--line2);
   border-bottom-right-radius:5px;color:var(--txt)}
 .bub.dots{display:flex;gap:4px;padding:12px 14px}
 .bub.dots i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:dot 1.1s infinite}
 .bub.dots i:nth-child(2){animation-delay:.16s}
 .bub.dots i:nth-child(3){animation-delay:.32s}
 @keyframes dot{0%,60%,100%{transform:scale(.7);opacity:.5}30%{transform:scale(1.15);opacity:1}}
 .book{align-self:stretch;max-width:100%;display:flex;align-items:center;gap:11px;padding:12px 14px;
   background:var(--panel);border:1px solid var(--a-line);border-radius:13px;
   box-shadow:var(--shadow-sm)}
 .book-ck{width:30px;height:30px;border-radius:50%;background:rgba(10,158,110,.12);flex:0 0 auto;
   display:flex;align-items:center;justify-content:center}
 .book-ck svg{width:18px;height:18px}
 .book-ck path{stroke:var(--green);stroke-width:2.4;fill:none;stroke-linecap:round;
   stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;
   animation:draw-ck .5s var(--easeout) .1s forwards}
 @keyframes draw-ck{to{stroke-dashoffset:0}}
 .book b{font-size:13.5px;font-weight:700;display:block;line-height:1.25}
 .book>span>span{font-size:12px;color:var(--muted)}
 .msg,.book{animation:pop .34s var(--spring) both}
 @keyframes pop{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
 .demo-cap{text-align:center;margin:14px auto 0;font-size:13px;color:var(--muted);max-width:34em}
 .demo-note{text-align:center;margin:8px auto 0;font-size:12.5px;color:var(--faint);max-width:38em}

 /* ── ЖИВОЙ ДЕМО-ЧАТ (секции нет, пока не задан PLATFORM_DEMO_CHAT_URL) ── */
 /* Витрина выше — карточка по центру; здесь намеренно другой ритм: текст слева, живое окно
    справа. Иначе две соседние секции читались бы как одна и «живой» шаг потерялся бы. */
 .live-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:52px;
   align-items:center}
 .live-copy .sect-lead{max-width:31em}
 .live-try{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
 .live-try li{font-size:13.5px;font-weight:650;color:var(--a-text);background:var(--a-bg);
   border:1px solid var(--a-line);border-radius:999px;padding:7px 13px}
 /* Честная оговорка про демо — НЕ мелким серым «по требованию юриста»: её должны прочесть,
    поэтому цвет обычного вторичного текста, а не `--faint`, которым набраны сноски. */
 .live-note{margin:18px 0 0;font-size:13px;color:var(--muted);max-width:31em;line-height:1.5}
 .live-copy .btn-ghost{margin-top:20px}
 .live-copy .btn-ghost svg{width:16px;height:16px;stroke:var(--muted)}
 /* Свечение под рамкой — единственная «живая» деталь секции: запись выше подана плоско,
    настоящий бот — с подсветкой. Декор, поэтому за пределами потока и без событий мыши. */
 .live-stage{position:relative;justify-self:center;width:100%;max-width:440px}
 .live-glow{position:absolute;inset:-34px -26px -22px;border-radius:40px;pointer-events:none;
   background:radial-gradient(58% 54% at 28% 10%,rgba(91,91,214,.22),transparent 70%),
     radial-gradient(54% 50% at 80% 90%,rgba(0,179,198,.2),transparent 70%);
   filter:blur(22px)}
 .live-frame{position:relative;height:620px;border-radius:var(--r-lg);overflow:hidden;
   background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
 .live-if{display:block;width:100%;height:100%;border:0}

 /* ── Доверие ── */
 .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
 .tcard{display:flex;gap:12px;align-items:flex-start}
 .tcard .ck{width:30px;height:30px;border-radius:9px;background:var(--panel);
   border:1px solid var(--a-line);flex:0 0 auto;display:flex;align-items:center;
   justify-content:center}
 .tcard .ck svg{width:17px;height:17px;stroke:var(--a-text)}
 .tcard b{display:block;font-size:15px;font-weight:750;margin-bottom:3px}
 .tcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
 .honest{margin-top:30px;padding:16px 18px;border-radius:var(--r-md);background:var(--panel);
   border:1px dashed var(--line3);font-size:13.5px;color:var(--muted);line-height:1.55}
 .honest b{color:var(--txt)}

 /* ── Заявка ── */
 .apply{background:var(--ink);color:#fff;position:relative;overflow:hidden}
 .apply::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
   top:-240px;right:-140px;filter:blur(90px);opacity:.45;
   background:radial-gradient(circle,#5b5bd6,transparent 68%)}
 .apply::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
   bottom:-240px;left:-120px;filter:blur(90px);opacity:.38;
   background:radial-gradient(circle,#00b3c6,transparent 68%)}
 .apply .wrap{position:relative;z-index:1}
 .apply-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;
   align-items:start}
 .apply h2{font-size:clamp(25px,3.4vw,36px);font-weight:800;letter-spacing:-.03em;color:#fff;
   line-height:1.12}
 .apply .eyebrow{color:rgba(255,255,255,.5)}
 .apply-lead{color:rgba(255,255,255,.74);font-size:15.5px;margin:14px 0 0;max-width:32em}
 .apply-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
 .apply-list li{display:flex;gap:12px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.5}
 .apply-list .n{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;
   align-items:center;justify-content:center;font-size:12px;font-weight:750;color:#fff;
   background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
 .card{background:var(--panel);border-radius:var(--r-lg);padding:26px;
   box-shadow:0 30px 60px -30px rgba(0,0,0,.6);color:var(--txt)}
 .form{position:relative;display:flex;flex-direction:column;gap:15px}
 .pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}
 .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
 .fld label{font-size:13px;font-weight:700;color:var(--txt)}
 .fld .req{color:var(--red)}
 .fld .opt{font-weight:500;color:var(--faint)}
 .fld input{font-family:inherit;font-size:16px;color:var(--txt);background:var(--panel);
   border:1px solid var(--line3);border-radius:var(--r-sm);padding:12px 13px;min-height:48px;
   width:100%;transition:border-color var(--t-fast) var(--easeout),
     box-shadow var(--t-fast) var(--easeout)}
 .fld input:hover{border-color:var(--muted)}
 .fld input:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 4px rgba(91,91,214,.16)}
 .fld .hint{font-size:12px;color:var(--faint);line-height:1.4}
 /* Текст ошибки приходит с сервера и может оказаться длинной строкой без пробелов —
    переносим где угодно, чтобы карточка формы не разъехалась вбок. */
 .fld .err{font-size:12.5px;color:var(--red);font-weight:650;line-height:1.4;
   overflow-wrap:anywhere}
 .fld.bad input{border-color:var(--red)}
 .fld.bad input:focus{box-shadow:0 0 0 4px rgba(229,72,77,.18)}
 .form-alert{border-radius:var(--r-sm);border:1px solid rgba(229,72,77,.35);
   background-color:rgba(229,72,77,.07);padding:13px 15px;font-size:13.5px;color:var(--txt);
   overflow-wrap:anywhere}
 .form-alert b{display:block;font-size:14px;margin-bottom:4px}
 .form-alert ul{margin:0;padding-left:18px}
 .form-alert p{margin:0;color:var(--muted)}
 .fine{margin:2px 0 0;font-size:12px;color:var(--faint);line-height:1.5}
 /* Honeypot: человеку не видно и не поймать табом; боты заполняют всё подряд — и попадаются. */
 .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;
   pointer-events:none}
 .thanks{text-align:center;padding:8px 0}
 .thanks-ck{width:56px;height:56px;border-radius:50%;background:rgba(10,158,110,.12);
   display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
 .thanks-ck svg{width:28px;height:28px;stroke:var(--green)}
 .thanks h3{font-size:21px;font-weight:800;letter-spacing:-.02em}
 .thanks p{margin:10px auto 0;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:30em}
 .thanks-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}

 /* ── Футер ── */
 footer{padding:50px 0 40px;border-top:1px solid var(--line)}
 .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
 .foot-brand .brand{margin-bottom:12px}
 .foot-brand p{font-size:13.5px;color:var(--muted);max-width:30em;margin:0;line-height:1.55}
 .foot-col h3{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
   color:var(--faint);margin:0 0 12px}
 .foot-col a,.foot-col p{display:block;font-size:13.7px;color:var(--muted);margin:0 0 9px;
   line-height:1.4}
 .foot-col a{transition:color var(--t-fast) var(--easeout)}
 .foot-col a:hover{color:var(--txt)}
 .foot-bot{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);display:flex;
   justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--faint)}

 /* ── Скролл-reveal (скрытое стартовое состояние — только когда движение разрешено) ── */
 .reveal{opacity:1}
 .anim .reveal{opacity:0;transform:translateY(14px);
   transition:opacity var(--t-slow) var(--lux),transform var(--t-slow) var(--lux)}
 .anim .reveal.in{opacity:1;transform:none}
 .anim .hero .ent{opacity:0;transform:translateY(18px);
   transition:opacity var(--t-slow) var(--lux),transform var(--t-slow) var(--lux)}
 .anim .hero.go .ent{opacity:1;transform:none}
 .anim .hero .ent.d0{transition-delay:0s}
 .anim .hero .ent.d1{transition-delay:.08s}
 .anim .hero .ent.d2{transition-delay:.16s}
 .anim .hero .ent.d3{transition-delay:.24s}
 .anim .hero .ent.d4{transition-delay:.34s}
 .anim h1.title .ln>span{transform:translateY(110%);
   transition:transform var(--t-slow) var(--lux)}
 .anim .hero.go h1.title .ln>span{transform:none}
 .anim h1.title .ln:nth-child(1)>span{transition-delay:.12s}
 .anim h1.title .ln:nth-child(2)>span{transition-delay:.20s}

 /* ── prefers-reduced-motion: страница статична ── */
 @media (prefers-reduced-motion: reduce){
   *,*::before,*::after{animation:none!important;transition:none!important}
   html{scroll-behavior:auto}
   .reveal,.hero .ent,h1.title .ln>span,.brow{opacity:1!important;transform:none!important}
   .steps-line{transform:scaleX(1)!important}
   .book-ck path{stroke-dashoffset:0!important}
 }

 /* ── Адаптив ── */
 @media (max-width:1023px){
   .hero-grid{grid-template-columns:1fr;gap:34px}
   .hero{padding:24px 0 54px}
   .hero-copy{text-align:center}
   .lead{margin-left:auto;margin-right:auto}
   .cta-row,.trust{justify-content:center}
   .board{max-width:400px}
   .feats{grid-template-columns:repeat(2,1fr)}
   .apply-grid{grid-template-columns:1fr;gap:32px}
   .live-grid{grid-template-columns:1fr;gap:32px}
 }
 @media (max-width:768px){
   section{padding:56px 0}
   .nav-links .anch{display:none}
   .stats{grid-template-columns:repeat(2,1fr);gap:20px 16px}
   .feats{grid-template-columns:1fr}
   .vs{grid-template-columns:1fr}
   .steps{grid-template-columns:1fr;gap:22px}
   .steps-line{display:none}
   .trust-grid{grid-template-columns:1fr}
   .foot-grid{grid-template-columns:1fr;gap:24px}
   .card{padding:20px}
   .pair{grid-template-columns:1fr}
   .chat{min-height:0}
   /* Живое окно на телефоне — во всю ширину и по высоте экрана (dvh: адресная строка iOS
      съезжает, и 70vh отдавало бы обрезанную ленту). Свечение убираем: на узком экране оно
      только красит края. */
   .live-stage{max-width:none}
   .live-glow{display:none}
   .live-frame{height:70vh;height:70dvh}
 }
 @media (max-width:420px){
   .wrap{padding:0 18px}
   .brand{font-size:16px}
   .brand .pill{display:none}
   .nz-tab{font-size:13.5px;padding:10px 13px}
 }