/* ==========================================================
   Случаи от практиката – визуални истории
   ========================================================== */
.cs,.cs-card{--cs-ink:#0F2E2C;--cs-ink2:#164743;--cs-pain:#FF6B5B;--cs-pain-soft:#FFE4DF;--cs-amber:#F5A524;--cs-calm:#22B98B;--cs-calm-2:#2FD6A1;--cs-calm-soft:#DDF6EC;--cs-line:#E9E2D6;--cs-mute:#8A948F}

/* ---------- Фигурата ---------- */
.cs-fig .spine{stroke:rgba(15,46,44,.30);stroke-width:4}
.cs-fig .z-pain,.cs-fig .z-calm,.cs-fig .z-rip{transform-box:fill-box;transform-origin:center}
.cs-fig .z-calm{opacity:0}
.cs-fig .z-rip{fill:none;stroke:#fff;stroke-width:1.6;opacity:0}
.cs-fig .z-dot{fill:#fff;opacity:.95}
.cs-fig-hero .z-pain{animation:csPain 7s ease-in-out infinite;animation-delay:var(--d)}
.cs-fig-hero .z-calm{animation:csCalm 7s ease-in-out infinite;animation-delay:var(--d)}
.cs-fig-hero .z-rip{animation:csRip 7s ease-out infinite;animation-delay:var(--d)}
.cs-fig-hero .z-rip2{animation-delay:calc(var(--d) + .4s)}
.cs-fig-hero .z-dot{animation:csDot 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes csPain{0%{opacity:.95;transform:scale(.9)}9%{transform:scale(1.1)}18%{transform:scale(.92)}27%{transform:scale(1.1)}40%{opacity:.95;transform:scale(1)}56%{opacity:0;transform:scale(.75)}92%{opacity:0;transform:scale(.75)}100%{opacity:.95;transform:scale(.9)}}
@keyframes csCalm{0%,44%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1)}88%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(.9)}}
@keyframes csRip{0%,38%{opacity:0;transform:scale(.6)}42%{opacity:.95}62%{opacity:0;transform:scale(3.4)}100%{opacity:0}}
@keyframes csDot{0%,40%{fill:#fff}55%,90%{fill:#E9FFF6}100%{fill:#fff}}

/* ---------- Анатомична илюстрация ---------- */
.cs-ana{position:relative;width:100%;max-width:400px;aspect-ratio:880/1168;margin:0 auto}
.cs-ana img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 80%,transparent 100%);filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.sp{position:absolute;left:var(--x);top:var(--y);width:calc(var(--r) * 2);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.sp i{position:absolute;inset:0;border-radius:50%}
.sp-pain{background:radial-gradient(circle,rgba(255,244,214,.98) 0 5%,rgba(255,96,60,.9) 14%,rgba(255,60,40,.5) 36%,rgba(255,60,40,0) 70%);mix-blend-mode:screen}
.sp-calm{opacity:0;background:radial-gradient(circle,rgba(236,255,248,.98) 0 5%,rgba(47,214,161,.9) 15%,rgba(47,214,161,.42) 38%,rgba(47,214,161,0) 70%);mix-blend-mode:screen}
.sp-ring{inset:32%!important;border:2px solid rgba(255,255,255,.85);opacity:0}
.sp b{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,255,255,.65)}
.cs-ana-hero .sp-pain{animation:spPain 7s ease-in-out infinite;animation-delay:var(--d)}
.cs-ana-hero .sp-calm{animation:spCalm 7s ease-in-out infinite;animation-delay:var(--d)}
.cs-ana-hero .sp-ring{animation:spRing 7s ease-out infinite;animation-delay:var(--d)}
.cs-ana-hero .sp-ring2{animation-delay:calc(var(--d) + .45s)}
@keyframes spPain{0%{opacity:.9;transform:scale(.9)}9%{transform:scale(1.12)}18%{transform:scale(.92)}27%{transform:scale(1.12)}40%{opacity:.95;transform:scale(1)}56%{opacity:0;transform:scale(.75)}92%{opacity:0}100%{opacity:.9;transform:scale(.9)}}
@keyframes spCalm{0%,44%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:0;transform:scale(.9)}}
@keyframes spRing{0%,38%{opacity:0;transform:scale(.6)}42%{opacity:.95}64%{opacity:0;transform:scale(3.6)}100%{opacity:0}}
.tag{position:absolute;z-index:2;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(255,255,255,.95);color:#0F2E2C;font:700 13px/1 var(--sans);box-shadow:0 8px 22px rgba(0,0,0,.28);transform:translate(52px,-50%)}
.tag em{width:9px;height:9px;border-radius:50%;background:#FF6B5B;flex:none}
.cs-ana-hero .tag em{animation:tagDot 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tagDot{0%,44%{background:#FF6B5B}60%,88%{background:#22B98B}100%{background:#FF6B5B}}
.tag::before{content:"";position:absolute;top:50%;right:100%;width:44px;height:2px;background:rgba(255,255,255,.85)}
.tag::after{content:"";position:absolute;top:50%;right:calc(100% + 40px);width:7px;height:7px;margin-top:-2.5px;border-radius:50%;background:#fff}
.tag-l{transform:translate(calc(-100% - 52px),-50%)}
.tag-l::before{right:auto;left:100%}
.tag-l::after{right:auto;left:calc(100% + 40px)}
.cs-ana-mini{height:100%;width:auto;max-width:none;margin:0;flex:none}
.cs-ana-mini img{filter:none}
.cs-ana-mini .sp-pain{opacity:.95;transition:opacity .5s}
.cs-ana-mini .sp-calm{transition:opacity .5s .1s}
.cs-ana-mini .sp b{width:6px;height:6px;margin:-3px 0 0 -3px}
.cs-card:hover .cs-ana-mini .sp-pain{opacity:0}
.cs-card:hover .cs-ana-mini .sp-calm{opacity:1}

/* Спокоен режим (без „болка“): само зелено, меко трептене */
.cs-ana.calm .sp-pain,.cs-ana.calm .sp-ring{display:none}
.cs-ana.calm .sp-calm{opacity:.9}
.cs-ana-hero.calm .sp-calm{animation:spTwinkle 4.5s ease-in-out infinite;animation-delay:var(--d)}
.cs-ana.calm .tag em{background:#22B98B;animation:none}
.cs-ana.calm img{-webkit-mask-image:radial-gradient(120% 95% at 50% 45%,#000 62%,transparent 100%);mask-image:radial-gradient(120% 95% at 50% 45%,#000 62%,transparent 100%);border-radius:24px}
@keyframes spTwinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}

/* ---------- Хедър на случая ---------- */
.cs-hero{position:relative;overflow:hidden;color:#fff;padding:54px 0 128px;background:radial-gradient(110% 90% at 85% 15%,#1F6259 0%,#123B37 45%,#0B2321 100%)}
.cs-hero::before,.cs-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
.cs-hero::before{width:420px;height:420px;right:-120px;top:-120px;background:#FF7A59;opacity:.18}
.cs-hero::after{width:520px;height:520px;left:-200px;bottom:-260px;background:#2FD6A1;opacity:.16}
.cs-hero-in{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px;align-items:center}
.cs-k{margin:0;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.cs-k a{color:#9FE3C9;text-decoration:none}
.cs-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.4vw,60px);line-height:1.04;margin:.28em 0 .32em;color:#fff;letter-spacing:-.3px}
.cs-lead{margin:0 0 20px;font-size:clamp(16.5px,1.8vw,19px);line-height:1.55;color:rgba(255,255,255,.84);max-width:34em}
.cs-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cs-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:14.5px;font-weight:600;backdrop-filter:blur(6px)}
.cs-chips .ci{width:16px;height:16px;color:#9FE3C9}
.cs-hero-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.cs-fig-hero{width:100%;max-width:290px;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.cs-legend{display:flex;gap:18px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85)}
.cs-legend span{display:inline-flex;align-items:center;gap:7px}
.cs-legend span::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--cs-pain);box-shadow:0 0 0 3px rgba(255,107,91,.25)}
.cs-legend .lg-calm::before{background:var(--cs-calm-2);box-shadow:0 0 0 3px rgba(47,214,161,.25)}

/* ---------- Преди → след ---------- */
.cs-metrics{position:relative;z-index:2;margin-top:-88px;padding:0 20px}
.cs-metrics-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:14px}
.mt{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--cs-line);border-radius:22px;padding:18px 20px 16px;box-shadow:0 18px 44px rgba(15,46,44,.12)}
.mt-label{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.mt-label .ci{width:18px;height:18px;flex:none;color:#3C7F73}
.mt-big{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-family:var(--sans)}
.mt-from{font-size:26px;font-weight:600;color:#A2AAA6;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(255,107,91,.7)}
.mt-arrow{color:#B7BDB9;font-size:20px}
.mt-big b{font-size:52px;font-weight:700;line-height:1;color:var(--cs-ink);letter-spacing:-1px}
.mt-big small{font-size:16px;font-weight:600;color:var(--muted)}
.mt-scale{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.mt-scale i{height:12px;border-radius:4px;background:#EFE9DF;transition:background .5s calc(var(--i) * 70ms)}
.mt-scale i.keep,.mt-scale i.drop{background:var(--cs-pain)}
.mt.in .mt-scale i.keep{background:var(--cs-calm)}
.mt.in .mt-scale i.drop{background:var(--cs-pain-soft)}
.mt-axis{display:flex;justify-content:space-between;margin:-4px 0 0;font-size:11.5px;color:#9AA39E}
.mt-bars{display:grid;gap:8px}
.br{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px}
.br em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted)}
.br i{position:relative;height:14px;border-radius:7px;background:#F2ECE2;overflow:hidden}
.br span{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:7px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.br-a span{background:var(--cs-pain)}
.br-b span{background:var(--cs-calm);transition-delay:.35s}
.mt.in .br span{width:var(--w)}
.mt-ring{position:relative;width:128px;height:128px;margin:0 auto}
.mt-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mt-ring circle{fill:none;stroke-width:10}
.rg-t{stroke:#EFE9DF}
.rg-v{stroke:var(--cs-calm);stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.mt.in .rg-v{stroke-dashoffset:var(--v)}
.mt-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 34px/1 var(--sans);color:var(--cs-ink);letter-spacing:-.5px}
.mt-drop{position:relative;height:14px;border-radius:7px;background:var(--cs-calm-soft);overflow:hidden}
.mt-drop span{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:7px;background:var(--cs-pain);transition:width 1.2s cubic-bezier(.2,.8,.2,1) .2s}
.mt.in .mt-drop span{width:var(--w)}
.mt-dots{display:grid;gap:7px;margin-top:2px}
.mt-dots .dr{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:8px}
.mt-dots em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted)}
.mt-dots span{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.mt-dots i{aspect-ratio:1;border-radius:50%;background:#EFE9DF}
.mt-dots .dr-a i.on{background:#9BDCC4}
.mt-dots .dr-b i.on{transition:background .4s calc(var(--i) * 90ms + .2s)}
.mt.in .mt-dots .dr-b i.on{background:var(--cs-calm)}
.mt-arc{position:relative;margin-top:-2px}
.mt-arc svg{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
.a-t,.a-f,.a-v{fill:none;stroke-width:12;stroke-linecap:round}
.a-t{stroke:#EFE9DF}
.a-f{stroke:var(--cs-pain-soft);stroke-dasharray:var(--f) 400}
.a-v{stroke:var(--cs-calm);stroke-dasharray:var(--f) 400;transition:stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.mt.in .a-v{stroke-dasharray:var(--t) 400}
.a-arm{transform-origin:100px 100px;transform:rotate(calc(var(--f) * 1deg));transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.mt.in .a-arm{transform:rotate(calc(var(--t) * 1deg))}
.a-arm line{stroke:var(--cs-ink);stroke-width:4;stroke-linecap:round}
.a-arm circle{fill:var(--cs-ink)}
.a-0,.a-180{position:absolute;bottom:-4px;font-size:11px;color:#9AA39E}
.a-0{left:4%}.a-180{right:2%}
.mt-swap{display:flex;align-items:center;gap:14px;margin-top:2px}
.sw-ic{flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--cs-calm-soft);color:var(--cs-calm)}
.sw-ic .ci{width:34px;height:34px}
.mt-swap p{margin:0;display:flex;flex-direction:column;gap:2px}
.mt-swap s{text-decoration:none;font-size:15px;color:#9AA39E;background:linear-gradient(var(--cs-pain),var(--cs-pain)) no-repeat 0 58%/0 2px;transition:background-size .8s .3s;align-self:flex-start}
.mt.in .mt-swap s{background-size:100% 2px}
.mt-swap b{font-size:22px;line-height:1.2;color:var(--cs-ink)}
.mt-note{margin:auto 0 0;padding-top:2px;font-size:13px;line-height:1.45;color:var(--muted)}

/* ---------- Секции ---------- */
.cs-sec{max-width:880px;margin:68px auto 0;padding:0 20px}
.cs-h{font-family:var(--serif);font-weight:700;font-size:clamp(27px,4vw,38px);line-height:1.15;color:var(--cs-ink);text-align:center;margin:0 0 24px}
.cs-h span{color:#17946F}

/* Пътят */
.cs-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:14px}
.cs-steps::before{content:"";position:absolute;left:21px;top:16px;bottom:16px;width:3px;border-radius:3px;background:linear-gradient(var(--cs-pain),var(--cs-amber) 45%,var(--cs-calm))}
.cst{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.cst-dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--sans);color:#fff;background:var(--cs-amber);box-shadow:0 0 0 6px var(--linen)}
.cst-1 .cst-dot{background:var(--cs-pain)}
.cst-3 .cst-dot{background:var(--cs-calm)}
.cst-dot .ci{width:22px;height:22px}
.cst-card{background:#fff;border:1px solid var(--cs-line);border-radius:18px;padding:13px 18px 14px;box-shadow:0 1px 2px rgba(15,46,44,.04)}
.cst-k{margin:0 0 3px;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--cs-mute)}
.cst-t{margin:0;font-size:17px;line-height:1.45;color:var(--ink)}
.cst-res .cst-card{background:linear-gradient(135deg,#E1F7EE,#F4FCF8);border-color:#BDEAD7}
.cst-res .cst-t{font-weight:600;color:var(--cs-ink)}
.cst-badge{display:inline-flex;align-items:center;gap:6px;margin:9px 0 0;padding:4px 11px;border-radius:999px;background:#FFF2D6;color:#94600A;font-size:13px;font-weight:600}
.cst-badge .ci{width:14px;height:14px}
.cst-badge a{color:inherit;text-underline-offset:2px}
.cs-follow{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px 18px;border-radius:18px;border:2px dashed #F2C266;background:#FFF9EC}
.cs-follow .fw-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#FFE7B3;color:#94600A}
.cs-follow .fw-ic .ci{width:22px;height:22px}
.cs-follow p{margin:0;font-size:16.5px;line-height:1.5}
.cs-follow--good{border:0;background:linear-gradient(120deg,#E6F7EF,#F3FBF7);box-shadow:inset 0 0 0 2px #9FDCC1}
.cs-follow--good .fw-ic{background:#22B98B;color:#fff;box-shadow:0 0 0 6px rgba(34,185,139,.16)}
.cs-follow--good .cst-k{color:#127A5A}
.cs-follow--good p:last-child{font-weight:600;color:#0F2E2C}

/* Как протича една сесия – анимация в три сцени */
.cs-how-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:26px;align-items:center;padding:28px;border-radius:28px;color:#fff;background:radial-gradient(90% 120% at 100% 0%,#1F6259 0%,#123B37 50%,#0B2321 100%)}
.cs-how .cs-k{color:#9FE3C9}
.cs-how h2{font-family:var(--serif);font-size:clamp(25px,3.4vw,32px);line-height:1.15;margin:.3em 0 .5em;color:#fff}
.cs-sec.cs-how{max-width:1120px}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.how-steps button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;border-radius:14px;transition:background .35s}
.how-steps button:focus-visible{outline:2px solid #9FE3C9;outline-offset:2px}
.how-steps button:hover{background:rgba(255,255,255,.05)}
.hs-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-weight:700;transition:background .35s,color .35s}
.hs-t b{display:block;font-size:17px}
.hs-t span{display:block;color:#C3DCD3;font-size:14.5px;line-height:1.45}
.hw[data-scene="1"] .how-steps li:nth-child(1) button,.hw[data-scene="2"] .how-steps li:nth-child(2) button,.hw[data-scene="3"] .how-steps li:nth-child(3) button{background:rgba(255,255,255,.1)}
.hw[data-scene="1"] .how-steps li:nth-child(1) .hs-n,.hw[data-scene="2"] .how-steps li:nth-child(2) .hs-n,.hw[data-scene="3"] .how-steps li:nth-child(3) .hs-n{background:#FFD27A;color:#0F2E2C}

.hw-stage{position:relative;aspect-ratio:1344/752;border-radius:20px;overflow:hidden;background:#0B2321;box-shadow:0 24px 50px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.hw-scenes,.hw-sc,.hw-cam{position:absolute;inset:0}
.hw-sc{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.hw[data-scene="1"] .hw-sc1,.hw[data-scene="2"] .hw-sc2,.hw[data-scene="3"] .hw-sc3{opacity:1;visibility:visible;transition:opacity .8s ease}
.hw-cam{transform-origin:50% 45%}
.hw-cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hw-ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hw-sc::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(5,20,18,.55) 100%)}

/* UI: ленти за напредък + пауза */
.hw-ui{position:absolute;left:14px;right:14px;top:12px;z-index:3;display:flex;align-items:center;gap:12px}
.hw-bars{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.hw-bars i{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.hw-bars span{position:absolute;inset:0 auto 0 0;width:0;background:#fff;border-radius:2px}
.hw-bars i.done span{width:100%}
.hw.run .hw-bars i.cur span{animation:hwBar var(--hwd,6.5s) linear forwards}
@keyframes hwBar{from{width:0}to{width:100%}}
.hw-toggle{all:unset;cursor:pointer;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(10,30,28,.55);backdrop-filter:blur(6px);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.hw-toggle:focus-visible{outline:2px solid #9FE3C9;outline-offset:2px}
.hw-toggle svg{width:16px;height:16px;display:block}
.hw-toggle .ic-play,.hw.paused .hw-toggle .ic-pause,.hw:not(.run) .hw-toggle .ic-pause{display:none}
.hw.paused .hw-toggle .ic-play,.hw:not(.run) .hw-toggle .ic-play{display:block}
.hw.paused *,.hw.paused *::before,.hw.paused *::after{animation-play-state:paused!important}
.hw-start{all:unset;cursor:pointer;position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:none;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:#FFD27A;color:#0F2E2C;font-weight:700;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.hw-start svg{width:20px;height:20px}
.hw.wait .hw-start{display:inline-flex}
.hw.wait .hw-ui{opacity:.35}

/* Етикети и джаджи в сцените */
.hw-tag{position:absolute;left:var(--x);top:var(--y);transform:translate(0,-50%);white-space:nowrap;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#0F2E2C;font:700 clamp(10px,1.25vw,13.5px)/1.1 var(--sans);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hw-tag-l{transform:translate(-100%,-50%)}
.hw-meter,.hw-tens{position:absolute;z-index:2;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:rgba(10,30,28,.62);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:clamp(10px,1.2vw,13px)}
.hw-meter b,.hw-tens b{font-weight:600;color:#CFE7DE;text-transform:uppercase;letter-spacing:1px;font-size:.9em}
.hw-meter .mb{display:flex;gap:3px}
.hw-meter .mb i{width:clamp(8px,1.4vw,14px);height:8px;border-radius:2px;background:rgba(255,255,255,.2)}
.hw-meter .mb i.on{background:#5BE6B8}
.hw-meter em{font-style:normal;font-weight:700;color:#5BE6B8}
.hw-chip{position:absolute;z-index:2;left:14px;top:30px;margin:0;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(10,30,28,.62);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:clamp(10px,1.2vw,13px);font-weight:600}
.hw-chip .ci{width:15px;height:15px;color:#FFD27A}
.hw-timer{position:absolute;z-index:2;left:50%;top:31%;width:clamp(78px,15%,130px);aspect-ratio:1;transform:translate(-50%,-50%)}
.hw-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.hw-timer circle{fill:rgba(10,30,28,.45);stroke-width:7}
.tm-t{stroke:rgba(255,255,255,.18)}
.tm-v{fill:none!important;stroke:#FFD27A;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0}
.tm-l{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center}
.tm-l b{grid-area:1/1;font:700 clamp(16px,2.6vw,26px)/1 var(--sans);opacity:0}
.tm-l b.n1{opacity:1}
.tm-l small{grid-area:2/1;font-size:clamp(9px,1vw,11.5px);color:#CFE7DE;text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.hw-breath{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;font-size:clamp(10px,1.2vw,13px);font-weight:600;color:#CFE7DE}
.hw-breath svg{width:100%;height:clamp(18px,3vw,30px);overflow:hidden}
.hw-breath path{fill:none;stroke-width:3;stroke-linecap:round}
.bw-fast{stroke:#FF8A6B}
.bw-slow{stroke:#5BE6B8;opacity:0}
.hw-breath em{font-style:normal;color:#5BE6B8;opacity:0}
.hw-wave{position:absolute;left:-10%;right:-10%;top:0;height:34%;transform:translateY(-110%);background:linear-gradient(180deg,rgba(47,214,161,0),rgba(47,214,161,.42) 45%,rgba(200,255,236,.55) 55%,rgba(47,214,161,0));mix-blend-mode:screen;pointer-events:none}
.h3-sp .c{opacity:0}
.hw-tens{gap:10px}
.hw-tens .tb{position:relative;width:clamp(70px,14vw,150px);height:8px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.hw-tens .tb i{position:absolute;inset:0 auto 0 0;width:85%;border-radius:4px;background:#FF6B5B}
.hw-days{position:absolute;z-index:2;right:14px;bottom:14px;display:flex;gap:6px}
.hw-days span{padding:6px 10px;border-radius:999px;background:rgba(10,30,28,.62);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:clamp(9.5px,1.15vw,12.5px);font-weight:600;color:#CFE7DE}

/* Статичен кадър (когато анимацията не върви) */
.hw:not(.run) .h1-rip{display:none}
.hw:not(.run) .h3-sp .p{opacity:.15}.hw:not(.run) .h3-sp .c{opacity:1}
.hw:not(.run) .hw-tens .tb i{width:25%;background:#2FD6A1}
.hw:not(.run) .hw-days span{background:rgba(34,185,139,.85);color:#fff}

/* Сцена 1: леко движение */
.hw.run[data-scene="1"] .hw-sc1 .hw-cam{animation:hwZoomIn 6.5s ease-in-out both}
@keyframes hwZoomIn{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hw.run[data-scene="1"] .h1-glow circle{transform-box:fill-box;transform-origin:center;animation:h1Glow 6.5s ease-in-out both}
@keyframes h1Glow{0%,10%{opacity:0;transform:scale(.6)}22%{opacity:1;transform:scale(1)}40%{transform:scale(.85)}55%{transform:scale(1.05)}85%{opacity:1}100%{opacity:.6}}
.h1-rip circle{transform-box:fill-box;transform-origin:center;opacity:0}
.hw.run[data-scene="1"] .h1-rip circle{animation:h1Rip 1.7s ease-out 1.2s 3}
.hw.run[data-scene="1"] .h1-rip .d2{animation-delay:1.55s}
.hw.run[data-scene="1"] .h1-rip .d3{animation-delay:1.9s}
@keyframes h1Rip{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
.h1-arr path{stroke-dasharray:110;stroke-dashoffset:0}
.hw.run[data-scene="1"] .h1-arr path{animation:h1Arr 6.5s ease-in-out both}
@keyframes h1Arr{0%,30%{stroke-dashoffset:110;opacity:0}32%{opacity:1}58%{stroke-dashoffset:0}88%{opacity:1}100%{opacity:.85}}
.hw.run[data-scene="1"] .h1-lead .l1,.hw.run[data-scene="1"] .hw-tag.t1{animation:hwFade 6.5s ease both;animation-delay:.9s}
.hw.run[data-scene="1"] .h1-lead .l2,.hw.run[data-scene="1"] .hw-tag.t2{animation:hwFade 6.5s ease both;animation-delay:1.6s}
@keyframes hwFade{0%{opacity:0}10%,100%{opacity:1}}
.hw.run[data-scene="1"] .hw-meter{animation:hwUp 6.5s ease both;animation-delay:.3s}
@keyframes hwUp{0%{opacity:0;transform:translateY(10px)}8%,100%{opacity:1;transform:none}}
.hw.run[data-scene="1"] .hw-meter .mb i.on{animation:h1Bar 6.5s ease both}
.hw.run[data-scene="1"] .hw-meter .mb i.on+i.on{animation-delay:.15s}
@keyframes h1Bar{0%,18%{background:rgba(255,255,255,.2)}24%,100%{background:#5BE6B8}}

/* Сцена 2: пауза */
.hw.run[data-scene="2"] .hw-sc2 .hw-cam{animation:hwPan 6.5s ease-in-out both}
@keyframes hwPan{from{transform:scale(1.1) translateX(2.5%)}to{transform:scale(1.04) translateX(-1.5%)}}
.h2-breath{transform-box:fill-box;transform-origin:center}
.hw.run[data-scene="2"] .h2-breath{animation:h2Breath 3.2s ease-in-out infinite}
@keyframes h2Breath{0%,100%{opacity:.35;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1.15)}}
.h2-sig{opacity:.9}
.hw.run[data-scene="2"] .h2-sig{animation:h2Sig 1.6s linear infinite,hwFade 6.5s ease both}
@keyframes h2Sig{to{stroke-dashoffset:-38}}
.h2-head{transform-box:fill-box;transform-origin:center}
.hw.run[data-scene="2"] .h2-head{animation:h2Head 1.6s ease-in-out infinite}
@keyframes h2Head{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.hw.run[data-scene="2"] .tm-v{animation:h2Ring 6s linear .3s both}
@keyframes h2Ring{from{stroke-dashoffset:0}to{stroke-dashoffset:326.7}}
.hw.run[data-scene="2"] .tm-l b{animation:h2Num 6.5s steps(1) both}
.hw.run[data-scene="2"] .tm-l .n1{animation-name:h2N1}
.hw.run[data-scene="2"] .tm-l .n2{animation-name:h2N2}
.hw.run[data-scene="2"] .tm-l .n3{animation-name:h2N3}
.hw.run[data-scene="2"] .tm-l .n4{animation-name:h2N4}
.hw.run[data-scene="2"] .tm-l .n5{animation-name:h2N5}
@keyframes h2N1{0%{opacity:1}22%,100%{opacity:0}}
@keyframes h2N2{0%{opacity:0}22%{opacity:1}44%,100%{opacity:0}}
@keyframes h2N3{0%,22%{opacity:0}44%{opacity:1}66%,100%{opacity:0}}
@keyframes h2N4{0%,44%{opacity:0}66%{opacity:1}88%,100%{opacity:0}}
@keyframes h2N5{0%,66%{opacity:0}88%,100%{opacity:1}}
.hw.run[data-scene="2"] .bw-fast{animation:bwMove 1.4s linear infinite,bwOut 6.5s ease both}
.hw.run[data-scene="2"] .bw-slow{animation:bwMove2 3.2s linear infinite,bwIn 6.5s ease both}
.hw.run[data-scene="2"] .hw-breath em{animation:bwIn 6.5s ease both}
@keyframes bwMove{to{transform:translateX(-50px)}}
@keyframes bwMove2{to{transform:translateX(-200px)}}
@keyframes bwOut{0%,35%{opacity:1}60%,100%{opacity:0}}
@keyframes bwIn{0%,40%{opacity:0}65%,100%{opacity:1}}
.hw:not(.run) .bw-fast{opacity:0}.hw:not(.run) .bw-slow,.hw:not(.run) .hw-breath em{opacity:1}
.hw.run[data-scene="2"] .hw-chip,.hw.run[data-scene="2"] .hw-timer{animation:hwFade 6.5s ease both}

/* Сцена 3: отговор на тялото */
.hw.run[data-scene="3"] .hw-sc3 .hw-cam{animation:hwZoomOut 7.5s ease-in-out both}
@keyframes hwZoomOut{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.h3-sp circle{transform-box:fill-box;transform-origin:center}
.hw.run[data-scene="3"] .h3-sp .p{animation:h3P 7.5s ease-in-out both}
.hw.run[data-scene="3"] .h3-sp .c{animation:h3C 7.5s ease-in-out both}
.hw.run[data-scene="3"] .h3-r1 circle{animation-delay:.9s}
.hw.run[data-scene="3"] .h3-r2 circle{animation-delay:1.9s}
@keyframes h3P{0%{opacity:.7;transform:scale(.85)}8%{opacity:1;transform:scale(1.1)}16%{transform:scale(.9)}24%{opacity:1;transform:scale(1.08)}38%{opacity:0;transform:scale(.7)}100%{opacity:0}}
@keyframes h3C{0%,26%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}100%{opacity:.95;transform:scale(1)}}
.hw.run[data-scene="3"] .hw-wave{animation:h3Wave 7.5s ease-in-out both}
@keyframes h3Wave{0%,10%{transform:translateY(-110%)}68%{transform:translateY(330%)}100%{transform:translateY(330%)}}
.hw.run[data-scene="3"] .hw-tens .tb i{animation:h3Tens 7.5s ease-in-out both}
@keyframes h3Tens{0%,14%{width:85%;background:#FF6B5B}62%{background:#F5A524}78%,100%{width:25%;background:#2FD6A1}}
.hw.run[data-scene="3"] .hw-days span{animation:h3Day 7.5s ease both}
.hw.run[data-scene="3"] .hw-days .dy1{animation-name:h3D1}
.hw.run[data-scene="3"] .hw-days .dy2{animation-name:h3D2}
.hw.run[data-scene="3"] .hw-days .dy3{animation-name:h3D3}
@keyframes h3D1{0%,60%{background:rgba(10,30,28,.62);color:#CFE7DE}66%,100%{background:rgba(34,185,139,.9);color:#fff}}
@keyframes h3D2{0%,70%{background:rgba(10,30,28,.62);color:#CFE7DE}76%,100%{background:rgba(34,185,139,.9);color:#fff}}
@keyframes h3D3{0%,80%{background:rgba(10,30,28,.62);color:#CFE7DE}86%,100%{background:rgba(34,185,139,.9);color:#fff}}

/* Важно */
.cs-notes-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.nt{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--cs-line)}
.nt-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cs-calm-soft);color:var(--cs-calm)}
.nt-ic .ci{width:21px;height:21px}
.nt p{margin:0;font-size:15.5px;line-height:1.5}
.cs-entry{margin-top:56px}

/* Поява при скрол */
.cs-js .cs-io{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.cs-js .cs-io.in{opacity:1;transform:none}

/* ---------- Карта в списъците ---------- */
.cs-card .cs-card-top{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 24px 0 6px;overflow:hidden;background:radial-gradient(100% 120% at 90% 10%,#1F6259 0%,#123B37 55%,#0B2321 100%)}
.cs-card .cs-fig-mini{height:100%;width:auto;max-height:200px;flex:none}
.cs-fig-mini .z-pain{opacity:.9;transition:opacity .5s}
.cs-fig-mini .z-calm{opacity:0;transition:opacity .5s .1s}
.cs-card:hover .cs-fig-mini .z-pain{opacity:0}
.cs-card:hover .cs-fig-mini .z-calm{opacity:1}
.cs-card .cs-stat{margin:0;text-align:right;color:#fff}
.cs-card .cs-stat b{display:block;color:#fff;font:700 46px/1 var(--sans);letter-spacing:-1px}
.cs-card .cs-stat span{display:block;margin-top:6px;margin-left:auto;max-width:11em;font-size:13.5px;line-height:1.35;color:#BFE9D9}

/* ---------- Мобилни ---------- */
@media (max-width:820px){
  .cs-hero{padding:34px 0 112px}
  .cs-hero-in{grid-template-columns:minmax(0,1fr);gap:18px}
  .cs-hero-fig{flex-direction:row;justify-content:center}
  .cs-fig-hero{max-width:150px}
  .cs-hero-fig .cs-ana{max-width:250px}
  .cs-legend{flex-direction:column;gap:8px}
  .cs-how-card{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}
  .hw-stage{order:-1;border-radius:16px}
}
@media (max-width:560px){
  .cs-metrics{padding:0 14px}
  .cs-metrics-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mt{padding:14px 13px 12px;border-radius:18px;gap:8px}
  .mt-label{font-size:12.5px;gap:6px;align-items:flex-start;line-height:1.3}
  .mt-label .ci{width:15px;height:15px}
  .mt-big{gap:2px 5px}
  .mt-big b{font-size:38px}
  .mt-from{font-size:19px}
  .mt-arrow{font-size:15px}
  .mt-big small{font-size:13px}
  .mt-scale{gap:2px}.mt-scale i{height:10px;border-radius:3px}
  .mt-axis{font-size:10px}.mt-axis span:first-child{max-width:4em}
  .br{grid-template-columns:34px minmax(0,1fr);gap:6px}.br em{font-size:11px}.br i{height:11px}
  .mt-ring{width:92px;height:92px}.mt-ring b{font-size:25px}
  .mt-swap{flex-direction:column;align-items:flex-start;gap:8px}
  .sw-ic{width:46px;height:46px;border-radius:14px}.sw-ic .ci{width:26px;height:26px}
  .mt-swap b{font-size:17px}.mt-swap s{font-size:13px}
  .mt-note{font-size:11.5px}
  .mt:last-child:nth-child(odd){grid-column:1/-1}
  .mt--ring:last-child:nth-child(odd){flex-direction:row;align-items:center;justify-content:space-between}
  .mt--ring:last-child:nth-child(odd) .mt-ring{margin:0}
  .cs-sec{margin-top:54px}
  .cst-t{font-size:16px}
  .tag{font-size:11.5px;padding:6px 9px 6px 8px;transform:translate(30px,-50%)}
  .tag::before{width:24px}.tag::after{right:calc(100% + 21px)}
  .tag-l{transform:translate(calc(-100% - 30px),-50%)}.tag-l::after{left:calc(100% + 21px)}
  .tag-ml{transform:translate(calc(-100% - 30px),-50%)}.tag-ml::before{right:auto;left:100%}.tag-ml::after{right:auto;left:calc(100% + 21px)}
  .hw-days span:not(.dy3){display:none}
  .hw-tag,.h1-lead,.hw-chip{display:none}
  .hw-timer{left:82%;top:46%;width:24%}
  .hw-ui{left:10px;right:10px;top:9px}
  .hw-toggle{width:30px;height:30px}
  .hw-meter,.hw-tens{left:10px;bottom:10px;padding:6px 9px}
  .hw-breath{left:10px;right:10px;bottom:8px}
}

/* ---------- Без движение ---------- */
@media (prefers-reduced-motion:reduce){
  /* По-меко: без пулсиране и разширяване, само плавна смяна на цвета */
  .cs-fig-hero .z-pain,.cs-fig-hero .z-rip,.cs-fig-hero .z-dot,.cs-ana-hero .sp-ring{animation:none;opacity:0}
  .cs-fig-hero .z-calm{animation:none;opacity:1}
  .cs-ana-hero .sp-pain{animation:spPainRM 8s ease-in-out infinite}
  .cs-ana-hero .sp-calm{animation:spCalmRM 8s ease-in-out infinite}
  .cs-ana-hero .tag em{animation:tagDot 8s ease-in-out infinite}
  .cs-js .cs-io{transform:none}
  .hw.run .hw-cam{animation:none!important;transform:none}
}
@keyframes spPainRM{0%,35%{opacity:.95}50%,85%{opacity:0}100%{opacity:.95}}
@keyframes spCalmRM{0%,35%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}

/* Година на случая */
.cs-chips li.cs-chip-y{background:rgba(159,227,201,.16);border-color:rgba(159,227,201,.45)}
.cs-card .cs-year{position:absolute;z-index:3;top:12px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;font:700 13px/1 var(--sans);letter-spacing:.03em;backdrop-filter:blur(6px)}
.cs-card .cs-year .ci{width:14px;height:14px;color:#9FE3C9}