/* Benerra site — общие стили. Вёрстка по дизайн-системе Benerra:
   карточки 20px с полупрозрачной серой заливкой, hairline-линии, воздух,
   контейнеры почти во всю ширину экрана. */

/* ---- Fonts (self-hosted) ---- */
@font-face { font-family:"Inter Tight"; src:url("assets/fonts/InterTight-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter Tight"; src:url("assets/fonts/InterTight-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Inter Tight"; src:url("assets/fonts/InterTight-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Roboto Serif"; src:url("assets/fonts/RobotoSerif-Light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Roboto Serif"; src:url("assets/fonts/RobotoSerif-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Roboto Serif"; src:url("assets/fonts/RobotoSerif-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }

/* ---- Tokens ---- */
:root {
  --red-500:#DC0A26; --ink-900:#151414; --ink-800:#1A1A1A; --ink-700:#2E2C2C;
  --gray-500:#6E6B6B; /* приглушённый текст на светлом: контраст ≥ 4.5:1 */
  --gray-400:#898686; --gray-200:#E1E1E1; --paper:#F6F4F4; --white-50:#F9F9F8; --white:#fff;
  --card-tint:rgba(225,225,225,0.6); --hairline:rgba(46,44,44,0.12); --hairline-inverse:rgba(249,249,248,0.14);
  --font-serif:"Roboto Serif", ui-serif, Georgia, serif;
  --font-sans:"Inter Tight", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm:10px; --r-md:20px; --r-pill:100px;
  --hover-accent:#C40921;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --max-w:1720px;
  --pad-x:clamp(24px, 5vw, 100px);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink-800); font-family:var(--font-sans); font-weight:400; line-height:1.4; }
img, svg { display:block; }
a { color:inherit; }

.wrap { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x); }

/* ---- Type ---- */
.eyebrow { font-size:14px; letter-spacing:.06em; color:var(--gray-500); text-transform:lowercase; }
.hero .eyebrow, .page-hero .eyebrow, .blk.dark .eyebrow { color:var(--gray-400); }
h1, h2, h3 { font-family:var(--font-serif); font-weight:400; margin:0; color:var(--ink-900); }
h1 { font-size:clamp(34px, 4.2vw, 60px); line-height:1.05; letter-spacing:-.02em; }
h2 { font-size:clamp(24px, 2.8vw, 38px); line-height:1.1; letter-spacing:-.02em; }
h3 { font-size:clamp(18px, 1.5vw, 22px); line-height:1.2; }
.lead { font-size:clamp(16px, 1.3vw, 18px); line-height:1.5; color:var(--ink-700); max-width:640px; }
.accent { color:var(--red-500); }
.num { font-family:var(--font-serif); font-weight:300; font-size:15px; color:var(--gray-500); letter-spacing:.02em; }
.blk.dark .num, .result-panel .num { color:var(--gray-400); }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-sans); font-weight:500; font-size:16px;
       padding:14px 26px; border-radius:var(--r-pill); border:none; cursor:pointer; text-decoration:none;
       transition:background .2s var(--ease-out), transform .12s var(--ease-out), opacity .2s; }
.btn:active { transform:scale(.97); transition-duration:.12s; }
.btn-primary { background:var(--red-500); color:var(--paper); }
.btn-primary:hover { background:var(--hover-accent); }
.btn-ghost { background:transparent; color:var(--ink-900); box-shadow:inset 0 0 0 1px var(--ink-700); }
.btn-ghost:hover { opacity:.7; }
.btn-ghost-dark { background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1px var(--hairline-inverse); }
.btn-ghost-dark:hover { opacity:.8; }

/* ---- Header ---- */
header.site { position:sticky; top:0; z-index:50; background:rgba(21,20,20,.92); backdrop-filter:blur(10px);
              border-bottom:1px solid var(--hairline-inverse); }
.nav { max-width:var(--max-w); margin:0 auto; padding:0 clamp(20px, 3vw, 48px); display:flex; align-items:center; gap:28px; height:68px; }
.nav .logo img { height:28px; }
.nav nav { display:flex; gap:22px; flex:1; justify-content:center; flex-wrap:wrap; position:relative; }
.nav nav a { font-size:14px; text-decoration:none; color:var(--gray-400); position:relative; z-index:1; padding:6px 0; }
/* скользящая «пилюля»-подсветка: создаётся из JS, перетекает между пунктами */
.nav-pill { position:absolute; left:0; top:50%; height:32px; margin-top:-16px; border-radius:var(--r-pill);
            background:rgba(249,249,248,.08); opacity:0; pointer-events:none;
            transition:transform .25s var(--ease-out), width .25s var(--ease-out), opacity .2s; }
.nav nav a:hover, .nav nav a.on { color:var(--paper); }
.nav .auth { display:flex; align-items:center; gap:18px; }
/* переключатель валют в шапке */
.cur-switch { display:flex; gap:2px; padding:3px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--hairline-inverse); }
.cur-switch button { width:30px; height:26px; border:none; border-radius:var(--r-pill); background:transparent;
                     color:var(--gray-400); font-family:var(--font-sans); font-size:13px; font-weight:500; cursor:pointer;
                     transition:background .2s, color .2s; }
.cur-switch button:hover { color:var(--paper); }
.cur-switch button.on { background:var(--red-500); color:var(--paper); }
.nav .auth .login { font-size:14px; text-decoration:none; color:var(--white-50); }
.nav .btn { padding:9px 20px; font-size:14px; }
@media (max-width:900px){ .nav nav { display:none; } }

/* ---- Hero главной (тёмный, во весь экран, пульсирующее свечение) ---- */
.hero { position:relative; overflow:hidden; background:var(--ink-900); min-height:calc(100vh - 68px);
        display:flex; align-items:center; padding:clamp(48px, 5vw, 80px) 0; }
.hero-wrap { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr); gap:clamp(32px, 4vw, 72px); align-items:center; }
@media (max-width:900px){ .hero-grid { grid-template-columns:1fr; } }
.hero h1 { color:var(--paper); }
.hero .lead { color:var(--gray-400); }
.hero-left { display:flex; flex-direction:column; gap:28px; position:relative; z-index:1; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
/* aurora: два сильно размытых красных слоя медленно дрейфуют с разными периодами —
   непериодическое «дыхание» вместо ритмичной пульсации */
.hero-glow { position:absolute; top:50%; right:-8%; transform:translateY(-50%); width:min(56vw, 900px); aspect-ratio:1; pointer-events:none; }
.hero-glow .red { position:absolute; inset:-20%; border-radius:45%; mix-blend-mode:screen; opacity:.68;
  background:
    radial-gradient(38% 38% at 32% 40%, rgba(220,10,38,.9) 0%, rgba(220,10,38,0) 70%),
    radial-gradient(30% 30% at 68% 62%, rgba(220,10,38,.65) 0%, rgba(220,10,38,0) 70%);
  filter:blur(28px); }
.hero-glow .core { position:absolute; inset:-25%; border-radius:45%; mix-blend-mode:screen; opacity:.42;
  background:
    radial-gradient(24% 24% at 55% 45%, rgba(246,244,244,.55) 0%, rgba(246,244,244,0) 60%),
    radial-gradient(34% 34% at 40% 66%, rgba(220,10,38,.6) 0%, rgba(220,10,38,0) 70%);
  filter:blur(28px); }
@media (prefers-reduced-motion: no-preference) {
  .hero-glow .red  { animation:aurora-a 9s ease-in-out infinite alternate; }
  .hero-glow .core { animation:aurora-b 11s ease-in-out infinite alternate; }
}
@keyframes aurora-a { from { transform:translate3d(-10%,-4%,0) rotate(-8deg); } to { transform:translate3d(12%,-10%,0) rotate(18deg); } }
@keyframes aurora-b { from { transform:translate3d(8%,6%,0) rotate(10deg); }  to { transform:translate3d(-12%,4%,0) rotate(-14deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Hero внутренних страниц: тёмная полоса со свечением ---- */
.page-hero { position:relative; overflow:hidden; background:var(--ink-900); padding:clamp(56px,7vw,110px) 0; }
.page-hero .hero-glow { right:-16%; width:min(44vw,700px); }
.page-hero .eyebrow { display:block; margin-bottom:18px; position:relative; z-index:1; }
.page-hero h1 { color:var(--paper); position:relative; z-index:1; }
.page-hero .lead { color:var(--gray-400); margin-top:18px; position:relative; z-index:1; }

/* ---- Секции ---- */
section.blk { padding:clamp(64px, 7vw, 120px) 0; }
.blk-head { display:flex; flex-direction:column; gap:20px; margin-bottom:clamp(36px, 4vw, 60px); }
section.blk.dark { background:var(--ink-900); color:var(--paper); }
.blk.dark h2, .blk.dark h3 { color:var(--paper); }
.blk.dark .lead { color:var(--gray-400); }

/* ---- Карточки по DS ---- */
.card { background:var(--card-tint); border:1px solid var(--hairline); border-radius:var(--r-md); padding:clamp(26px, 2.4vw, 38px);
        position:relative; box-shadow:0 1px 2px rgba(21,20,20,.06); }
/* двухслойная hover-тень заранее отрисована на ::after — на hover анимируется только opacity */
.card::after { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
               box-shadow:0 4px 12px rgba(21,20,20,.08), 0 16px 40px rgba(21,20,20,.12);
               transition:opacity .3s ease-out; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; }
.card h3 { margin:14px 0 10px; }
.card p { margin:0; color:var(--ink-700); font-size:15px; line-height:1.55; }
.card .more { display:inline-block; margin-top:20px; font-weight:500; font-size:15px; color:var(--red-500); text-decoration:none; }
.card .more:hover { color:var(--hover-accent); }
.blk.dark .card { background:rgba(249,249,248,.05); border-color:var(--hairline-inverse); }
.blk.dark .card p { color:var(--gray-400); }
.blk.dark .card h3 { color:var(--paper); }

/* ---- Открытая полоса метрик ---- */
.stats { display:flex; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.stats .cell { flex:1; padding:34px 32px; }
.stats .cell:first-child { padding-left:0; }
.stats .cell + .cell { border-left:1px solid var(--gray-200); }
.stats .v { font-family:var(--font-serif); font-size:clamp(24px, 2.2vw, 34px); color:var(--ink-900); line-height:1; font-variant-numeric:tabular-nums; }
.stats .l { margin-top:12px; font-size:14px; color:var(--gray-500); line-height:1.45; }
.blk.dark .stats .l { color:var(--gray-400); }
@media (max-width:800px){ .stats { flex-direction:column; } .stats .cell { padding:22px 0; } .stats .cell + .cell { border-left:none; border-top:1px solid var(--gray-200); } }
.blk.dark .stats { border-color:var(--hairline-inverse); }
.blk.dark .stats .cell + .cell { border-color:var(--hairline-inverse); }
.blk.dark .stats .v { color:var(--paper); }

.badge { width:48px; height:48px; border-radius:var(--r-pill); background:var(--red-500); color:var(--paper);
         display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:19px; flex:none; }

/* ---- Фильтры / чипы ---- */
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.chip { padding:9px 16px; border-radius:var(--r-pill); font-size:14px; border:1px solid var(--hairline);
        background:transparent; color:var(--ink-700); cursor:pointer; font-family:inherit; }
.chip.active { background:var(--ink-900); color:var(--paper); border-color:var(--ink-900); }

/* ---- Карточки звонков / плеер ---- */
.call-card { display:flex; flex-direction:column; gap:12px; }
.call-card .tag { font-size:12px; letter-spacing:.06em; color:var(--gray-500); text-transform:lowercase; }
.call-card h3 { margin:0; }
.call-card p { flex:1; }
.player { display:flex; align-items:center; gap:12px; margin-top:16px; padding:10px 14px;
          background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-sm); }
.player .play { width:34px; height:34px; border-radius:50%; background:var(--red-500); border:none; cursor:pointer;
                display:flex; align-items:center; justify-content:center; flex:none; transition:background .2s; }
.player .play:hover { background:var(--hover-accent); }
.player .play svg { width:12px; height:12px; fill:var(--paper); margin-left:2px; }
.player .track { flex:1; height:4px; border-radius:2px; background:var(--gray-200); position:relative; overflow:hidden; }
.player .track i { position:absolute; inset:0 72% 0 0; background:var(--red-500); border-radius:2px; }
.player .t { font-size:12px; color:var(--gray-400); }

/* ---- Тарифные строки ---- */
.price-table { border-top:1px solid var(--gray-200); }
.price-row { display:grid; grid-template-columns:minmax(200px,1.1fr) 2fr auto; gap:24px; align-items:center;
             padding:26px 0; border-bottom:1px solid var(--gray-200); }
.price-row .name { font-family:var(--font-serif); font-size:18px; color:var(--ink-900); line-height:1.25; }
.price-row .name small { display:block; font-family:var(--font-sans); font-size:12px; letter-spacing:.06em; color:var(--gray-400); margin-top:6px; text-transform:lowercase; }
.price-row .desc { font-size:14px; color:var(--ink-700); line-height:1.5; }
.price-row .price { font-family:var(--font-serif); font-size:clamp(20px, 1.8vw, 26px); color:var(--red-500); white-space:nowrap; }
.price-row .price small { font-family:var(--font-sans); font-size:12px; color:var(--gray-400); display:block; text-align:right; }
@media (max-width:760px){ .price-row { grid-template-columns:1fr; gap:10px; } .price-row .price small { text-align:left; } }

/* ---- Панель «оплата за результат» / акцентные тёмные панели ---- */
.result-panel { position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--ink-700); margin-top:40px; padding:clamp(32px,3.4vw,48px); }
/* свечение приглушено (текст поверх должен оставаться контрастным);
   селектор — только прямой потомок, чтобы не задеть контент с классом .red */
.result-panel > .red { position:absolute; width:56%; aspect-ratio:1; right:-18%; top:-42%; border-radius:50%;
                       background:var(--red-500); filter:blur(100px); opacity:.5; pointer-events:none; }
.result-panel > div { position:relative; z-index:1; }
.result-panel h3 { color:var(--paper); margin:0 0 10px; }
.result-panel p { color:var(--white-50); opacity:.85; margin:0; max-width:620px; font-size:15px; line-height:1.5; }

.principles { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0; margin-top:40px;
              border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.principles > div { padding:28px 32px; }
.principles > div:first-child { padding-left:0; }
.principles > div + div { border-left:1px solid var(--gray-200); }
.principles b { display:block; font-weight:600; font-size:15px; color:var(--ink-900); margin-bottom:8px; }
.principles p { margin:0; font-size:14px; color:var(--ink-700); line-height:1.5; }
@media (max-width:900px){ .principles > div { padding:22px 0; } .principles > div + div { border-left:none; border-top:1px solid var(--gray-200); } }

/* ---- Списки и слоганы ---- */
.exp-list { list-style:none; margin:16px 0 0; padding:0; }
.exp-list li { padding:14px 0; border-top:1px solid var(--hairline); font-size:15px; line-height:1.5; color:var(--ink-700); }
.blk.dark .exp-list li { border-top-color:var(--hairline-inverse); color:var(--gray-400); }
.statement { margin-top:clamp(44px, 5vw, 80px); text-align:center; }
.statement p { font-family:var(--font-serif); font-size:clamp(22px, 2.4vw, 34px); line-height:1.25; letter-spacing:-.02em;
               color:var(--ink-900); margin:0 auto; max-width:900px; }
.blk.dark .statement p { color:var(--paper); }

/* ---- Мок-экраны платформы ---- */
.screen { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.screen .mock { height:180px; background:var(--white); border-bottom:1px solid var(--hairline); position:relative; overflow:hidden; flex:none; }
.screen .mock .bar { position:absolute; left:20px; right:20px; height:9px; border-radius:5px; background:var(--gray-200); }
.screen .mock .bar.b1 { top:22px; width:40%; }
.screen .mock .bar.b2 { top:46px; }
.screen .mock .bar.b3 { top:70px; right:30%; }
.screen .mock .blk-el { position:absolute; border-radius:6px; background:var(--card-tint); border:1px solid var(--hairline); }
.screen .mock .blk-el.k1 { left:20px; top:96px; width:34%; height:56px; }
.screen .mock .blk-el.k2 { left:calc(34% + 32px); top:96px; width:34%; height:56px; }
.screen .mock .red-bar { position:absolute; left:20px; bottom:20px; width:46%; height:7px; border-radius:4px; background:var(--red-500); }
.screen .body { padding:22px 26px 26px; }
.screen .body b { display:block; font-weight:600; font-size:15px; color:var(--ink-900); margin-bottom:6px; }
.screen .body p { margin:0; font-size:14px; color:var(--ink-700); line-height:1.5; }

/* ---- Строки-боли (тёмная секция) ---- */
.pain-list { border-top:1px solid var(--hairline-inverse); }
.pain-item { display:grid; grid-template-columns:80px 1fr 1.6fr; gap:22px; padding:28px 0;
             border-bottom:1px solid var(--hairline-inverse); align-items:baseline; }
.pain-item .n { font-family:var(--font-serif); font-weight:300; font-size:30px; color:var(--gray-400); }
.pain-item b { font-family:var(--font-serif); font-weight:400; font-size:19px; color:var(--paper); }
.pain-item p { margin:0; color:var(--gray-400); font-size:15px; line-height:1.5; }
@media (max-width:800px){ .pain-item { grid-template-columns:56px 1fr; } .pain-item p { grid-column:2; } }
.pain-close { margin-top:40px; font-family:var(--font-serif); font-size:clamp(19px, 1.8vw, 26px); line-height:1.3; color:var(--paper); max-width:860px; }

/* ---- FAQ ---- */
.faq { border-top:1px solid var(--gray-200); }
.faq details { border-bottom:1px solid var(--gray-200); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
               padding:22px 0; font-family:var(--font-serif); font-size:clamp(16px, 1.4vw, 19px); color:var(--ink-900); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-sans); font-weight:400; font-size:24px; color:var(--red-500); transition:transform .2s var(--ease-out); flex:none; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .a { padding:0 0 26px; max-width:840px; color:var(--ink-700); font-size:15px; line-height:1.55; }

/* ---- Финальный CTA / шаги / форма ---- */
.cta-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px, 4vw, 80px); align-items:start; }
@media (max-width:900px){ .cta-grid { grid-template-columns:1fr; } }
.steps { margin-top:30px; }
.step { display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--hairline-inverse); align-items:baseline; }
.step .n { font-family:var(--font-serif); font-weight:300; font-size:20px; color:var(--gray-400); flex:none; width:34px; }
.step p { margin:0; color:var(--white-50); opacity:.85; font-size:15px; line-height:1.5; }
.form.card-form { background:var(--paper); border-radius:var(--r-md); padding:clamp(28px, 3vw, 40px); }
.form h3 { margin:0 0 20px; }
.form label { display:block; font-size:12px; letter-spacing:.06em; color:var(--gray-400); margin:16px 0 7px; text-transform:lowercase; }
.form input[type=text], .form input[type=tel], .form input[type=number] { width:100%; padding:13px 15px; font-family:var(--font-sans); font-size:15px;
      border:1px solid var(--hairline); border-radius:var(--r-sm); background:var(--white); color:var(--ink-900); }
.form input:focus { outline:none; border-color:var(--red-500); }
.form .agree { display:flex; gap:10px; align-items:flex-start; margin:20px 0; font-size:12px; color:var(--gray-400); line-height:1.45; }
.form .agree input { margin-top:2px; accent-color:var(--red-500); }
.form .btn { width:100%; justify-content:center; }

/* ---- Футер ---- */
footer.site { background:var(--ink-900); color:var(--paper); border-top:1px solid var(--hairline-inverse); }
.foot { max-width:var(--max-w); margin:0 auto; padding:clamp(44px, 5vw, 64px) var(--pad-x) 32px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--hairline-inverse); }
@media (max-width:800px){ .foot-grid { grid-template-columns:1fr; } }
.foot-grid .about img { height:30px; margin-bottom:18px; }
.foot-grid .about p { color:var(--gray-400); font-size:15px; line-height:1.5; max-width:320px; margin:0; }
.foot-grid h4 { font-family:var(--font-sans); font-weight:400; font-size:12px; letter-spacing:.06em; color:var(--gray-400);
                text-transform:lowercase; margin:0 0 16px; }
.foot-grid ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-grid a { color:var(--white-50); opacity:.85; text-decoration:none; font-size:15px; }
.foot-grid a:hover { color:var(--red-500); opacity:1; }
.foot-bottom { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px;
               font-size:13px; color:var(--gray-400); }
.foot-bottom a { color:var(--gray-400); text-decoration:none; margin-left:20px; }
.foot-bottom a:first-child { margin-left:0; }
.foot-bottom a:hover { color:var(--paper); }

/* ---- Статьи блога ---- */
.article { max-width:840px; margin:0 auto; padding:clamp(48px,5vw,80px) var(--pad-x); }
.article .meta { font-size:13px; letter-spacing:.04em; color:var(--gray-400); margin-bottom:14px; text-transform:lowercase; }
.article h1 { font-size:clamp(30px, 3.4vw, 46px); }
.article h2 { margin-top:clamp(32px,3.4vw,48px); }
.article h3 { margin-top:28px; }
.article p, .article li { font-size:16px; line-height:1.65; color:var(--ink-800); }
.article p { margin:18px 0 0; }
.article ul, .article ol { margin:18px 0 0; padding-left:24px; }
.article blockquote { margin:24px 0 0; padding:18px 24px; border-left:2px solid var(--red-500);
                      background:var(--card-tint); border-radius:0 var(--r-sm) var(--r-sm) 0; font-style:normal; }

/* ============================================================
   Демо-диалог нейро-агента (hero) — виджет cdw в палитре Benerra
   ============================================================ */
.cdw { width:min(480px,100%); height:600px;
       background:radial-gradient(rgba(249,249,248,0.05) 1px,transparent 1.4px) 0 0/22px 22px, rgba(21,20,20,.55);
       box-shadow:inset 0 0 0 1px var(--hairline-inverse); color:var(--white-50); border-radius:var(--r-md);
       display:flex; flex-direction:column; gap:18px; padding:28px; position:relative; overflow:hidden; }
.cdw-flourish { position:absolute; right:-20px; top:-14px; width:180px; opacity:.05; filter:brightness(0) invert(1); pointer-events:none; }
.cdw-head { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; flex:none; }
.cdw-brand { display:flex; align-items:center; gap:10px; }
.cdw-brand img { width:30px; }
.cdw-brand b { font-size:14px; font-weight:500; letter-spacing:-.01em; }
.cdw-status { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-400); }
.cdw-status[hidden] { display:none; }
.cdw-dot { width:7px; height:7px; border-radius:50%; background:var(--red-500); display:block; animation:fpl-dot 1.1s ease-in-out infinite; }
.cdw-feed { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1;
            padding-right:4px; scrollbar-width:none; }
.cdw-feed::-webkit-scrollbar { width:0; height:0; }
.cdw-stage { display:flex; align-items:center; gap:12px; padding:8px 2px 4px; animation:fpl-rise .42s var(--ease-out) both; }
.cdw-stage .ln { flex:1; height:1px; background:var(--hairline-inverse); }
.cdw-stage .lbl { font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--red-500); white-space:nowrap; }
.cdw-row { display:flex; align-items:flex-start; }
.cdw-row.agent { justify-content:flex-end; }
.cdw-row.client { justify-content:flex-start; }
.cdw-ms { align-self:center; margin-right:10px; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.cdw-ms .v { font-size:13px; font-weight:600; color:var(--red-500); font-variant-numeric:tabular-nums; line-height:1; }
.cdw-ms .c { font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gray-400); }
.cdw-bubble { position:relative; max-width:82%; padding:12px 15px; border-radius:var(--r-sm); animation:fpl-rise .42s var(--ease-out) both; }
.cdw-row.agent .cdw-bubble { background:rgba(220,10,38,0.12); box-shadow:inset 0 0 0 1px rgba(220,10,38,0.45); color:var(--white-50); }
.cdw-row.client .cdw-bubble { background:rgba(249,249,248,0.05); box-shadow:inset 0 0 0 1px rgba(249,249,248,0.13); color:#E9E9E7; }
.cdw-label { font-size:10.5px; letter-spacing:.05em; margin-bottom:5px; text-transform:uppercase; }
.cdw-row.agent .cdw-label { color:#F26B7C; }
.cdw-row.client .cdw-label { color:var(--gray-400); }
.cdw-text { font-size:14px; line-height:1.42; letter-spacing:-.01em; min-height:1.42em; }
.cdw-caret { display:inline-block; width:2px; height:15px; background:var(--red-500); margin:0 1px; vertical-align:-2px; animation:fpl-blink 1s step-end infinite; }
.cdw-wave { position:absolute; left:15px; right:15px; top:30px; bottom:12px; display:flex; align-items:center; justify-content:center; gap:5px; overflow:hidden; }
.cdw-wave i { width:5px; height:30%; border-radius:2px; background:var(--red-500); display:block; }
.cdw-foot { display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; flex:none; }
.cdw-line { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--gray-400);
            padding:11px 14px; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--hairline-inverse); }
.cdw-phone { color:var(--paper); font-weight:500; font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
.cdw-phone:hover { color:var(--red-500); }
.cdw-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px 22px;
           font-family:inherit; font-size:15px; font-weight:500; line-height:1; border-radius:var(--r-pill); cursor:pointer;
           border:none; background:var(--red-500); color:var(--paper);
           box-shadow:0 0 12px rgba(220,10,38,.5), 0 0 32px rgba(220,10,38,.14);
           transition:transform .12s var(--ease-out), background .2s; }
.cdw-btn:hover { background:var(--hover-accent); transform:translateY(-1px); }
.cdw-ic { position:relative; display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; }
.cdw-ring { position:absolute; inset:0; border:1px solid currentColor; border-radius:50%; animation:fpl-ring 1.4s ease-out infinite; }
@keyframes fpl-rise { 0%{opacity:0; transform:translateY(8px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes fpl-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes fpl-dot { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes fpl-ring { 0%{transform:scale(1); opacity:.55} 70%{transform:scale(2.4); opacity:0} 100%{opacity:0} }
@media (max-width:560px){ .cdw { height:clamp(440px, 68vh, 560px); padding:20px; } }

/* ============================================================
   «Поток диалога» — скролл-сцена (палитра Benerra)
   ============================================================ */
[data-dialogflow] { position:relative; height:380vh; }
@keyframes df-pulseBreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }
@keyframes df-hintBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes df-wvA { 0%,100%{transform:scaleY(0.28)} 50%{transform:scaleY(1)} }
@keyframes df-wvB { 0%,100%{transform:scaleY(0.5)} 45%{transform:scaleY(0.16)} 70%{transform:scaleY(0.78)} }
@keyframes df-wvC { 0%,100%{transform:scaleY(0.7)} 40%{transform:scaleY(0.24)} 60%{transform:scaleY(1)} }
@keyframes df-sttType { 0%{width:0ch} 55%{width:24ch} 100%{width:24ch} }
@keyframes df-sttCaret { 0%,100%{border-color:currentColor} 50%{border-color:transparent} }

/* ============================================================
   Моушен-слой: входы, scroll-reveal, hover-lift
   Вся декоративная анимация — только при no-preference;
   движение — исключительно transform/opacity (+ blur на входе заголовка)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 1. blur-to-sharp по словам для hero-заголовка (спаны создаёт JS) */
  .blur-reveal .w { display:inline-block; opacity:0; filter:blur(7px); transform:translateY(10px);
                    animation:blur-in .7s cubic-bezier(.22,1,.36,1) forwards;
                    animation-delay:calc(80ms + var(--wi, 0) * 40ms); }
  @keyframes blur-in { to { opacity:1; filter:blur(0); transform:none; } }

  /* 2. каскадный вход первого экрана (класс и --i ставит JS) */
  .intro-rise { opacity:0; transform:translateY(18px);
                animation:rise .5s cubic-bezier(.16,1,.3,1) forwards;
                animation-delay:calc(250ms + var(--i, 0) * 100ms); }
  @keyframes rise { to { opacity:1; transform:none; } }

  /* 3. scroll-reveal с каскадом внутри сеток (наблюдатель в JS, один раз).
     Транзишен объявлен только на целевом состоянии: скрытие при инициализации
     мгновенное (без вспышки контента), анимируется только появление */
  .reveal { opacity:0; transform:translateY(24px); }
  .reveal.is-visible { opacity:1; transform:none;
                       transition:opacity .5s ease-out, transform .55s cubic-bezier(.16,1,.3,1);
                       transition-delay:calc(var(--i, 0) * 80ms); }

  /* 6. hover-lift карточек (только точные указатели) */
  @media (hover:hover) and (pointer:fine) {
    .card { transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s; }
    .card:hover { transform:translateY(-5px); }
    .card:hover::after { opacity:1; }
    .blk.dark .card:hover { border-color:rgba(249,249,248,.28); }
  }

  /* 5. scroll-driven затухание hero при уходе вниз (прогрессив, easing задаёт скролл) */
  @supports (animation-timeline: view()) {
    .hero, .page-hero { view-timeline-name:--hero; }
    .hero .hero-grid, .page-hero .wrap { animation:hero-out linear both;
                                         animation-timeline:--hero; animation-range:exit 0% exit 90%; }
    @keyframes hero-out { to { opacity:0; transform:scale(.97) translateY(-14px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow .red, .hero-glow .core, .cdw-dot, .cdw-ring, .cdw-caret { animation:none; }
}