/* Герой головної (H2): інтерактивний намальований телефон. Рух: transform/opacity. Без фото.
   Кожен біт: один головний елемент + до двох допоміжних. Стани сцен: data-s (0 очікує, 1 працює, 2 готово). */
.hp-stage{--w:min(300px,32vw,max(220px,calc((100svh - 255px)/1.95)));width:min(calc(var(--w)*1.15),100%);justify-self:end}
.hp-box{position:relative;height:calc(var(--w)*1.95)}
.hp-ph{--t:max(15px,1.5em);--k:max(13px,1.25em);position:absolute;left:50%;top:0;width:var(--w);height:100%;margin-left:calc(var(--w)/-2);border-radius:calc(var(--w)*.14);z-index:2;
  font-size:calc(var(--w)/28);background:#0b0a08;box-shadow:var(--so-depth-2),0 0 0 .5em #15120e inset}
.hp-scr{position:absolute;inset:.55em;border-radius:calc(var(--w)*.125);overflow:hidden;background:radial-gradient(90% 40% at 50% 0,rgba(124,92,255,.16),transparent 70%),#0c0a08}
.hp-scr::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 36%)}
.hp-notch{position:absolute;left:50%;top:.9em;width:7em;height:1.9em;margin-left:-3.5em;border-radius:1em;background:#000;z-index:3}
:where(.hp-ph) button{font:inherit;color:inherit;border:0;padding:0;margin:0;background:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hp-ph :focus-visible{outline:2px solid var(--so-amber-hi);outline-offset:2px}
.hp-tabs{position:absolute;top:3.3em;left:1.3em;right:1.3em;height:3.2em;display:grid;grid-template-columns:repeat(6,1fr);z-index:2}
.hp-tab{position:relative;display:grid!important;place-items:center;color:rgba(255,255,255,.5);transition:color .32s;z-index:1;min-height:44px;margin:-.1em 0}
.hp-tab svg{width:1.8em;height:1.8em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hp-tab.on,.hp-tab:hover{color:#fff}
.hp-tab:nth-child(6)::after{content:"";position:absolute;top:.6em;right:24%;width:.7em;height:.7em;border-radius:50%;background:var(--so-violet-2);box-shadow:0 0 0 .2em #0c0a08}
.hp-bar{position:absolute;left:0;top:0;width:calc(100%/6);height:100%;border-radius:1em;background:linear-gradient(180deg,rgba(124,92,255,.5),rgba(124,92,255,.18));box-shadow:0 0 0 1px rgba(177,75,216,.55) inset;transition:transform .32s var(--so-ease-io)}
.hp-ttl{position:absolute;top:7.4em;left:1.3em;right:1.3em;display:grid;height:1.5em}
.hp-ttl span{grid-area:1/1;font:500 12px/1.5em var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--so-violet-ink);opacity:0;transform:translateY(.4em);transition:opacity .32s,transform .32s var(--so-ease-out)}
.hp-ttl span.on{opacity:1;transform:none}
.hp-body{position:absolute;inset:9.8em 0 1.6em}
.hp-sc{position:absolute;inset:0;padding:.4em 1.3em 0;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(2.2em,0,0);transition:opacity .32s var(--so-ease-io),transform .32s var(--so-ease-io),visibility 0s .32s}
.hp-sc.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.hp-sc.out{transform:translate3d(-2.2em,0,0)}
.hp-sc b,.hp-sc strong{font-weight:600}
.hp-sc small,.hp-sc em,.hp-sc u{display:block;font-style:normal;text-decoration:none}
.hp-sc small{font:500 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--so-violet-ink)}
.hp-sc p{margin:0}
.hp-pc,.hp-pv,.hp-dr,.hp-bb span,.hp-nets li,.hp-rw,.hp-dy,.hp-kp p{background:var(--so-glass),rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 1em 2em -1em rgba(0,0,0,.7)}
.hp-m{background:radial-gradient(70% 45% at 25% 20%,var(--m1,rgba(255,200,97,.8)),transparent 70%),radial-gradient(80% 55% at 80% 80%,var(--m2,#b14bd8),transparent 72%),linear-gradient(170deg,#2b2060,#120d26)}
.hp-bt{display:grid!important;place-items:center;text-align:center!important;font-weight:600;color:#1b1408!important;background:linear-gradient(180deg,var(--so-amber-hi),var(--so-amber))!important;box-shadow:0 .8em 1.6em -.6em rgba(240,165,0,.55),0 1px 0 rgba(255,255,255,.5) inset;transition:transform .16s var(--so-spring)}
.hp-bt:active{transform:scale(.96)}
.hp-bt>span{grid-area:1/1;display:flex;align-items:center;gap:.6em;transition:opacity .2s}
.hp-bt .b,.hp-bt .c{opacity:0}
.hp-exm{flex:none;font:500 11px/1 var(--sans)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--so-amber-hi);padding:.35em .7em;border-radius:99px;box-shadow:0 0 0 1px rgba(255,200,97,.4) inset}

/* 1 · стратегія */
.hp-h{display:flex;align-items:center;gap:1.1em;margin:0 0 1.6em}
.hp-h>span{flex:1;min-width:0}.hp-h b{display:block;font-size:var(--t)}.hp-h small{margin-top:.4em;color:rgba(255,255,255,.55)}
.hp-orb{display:block;position:relative;flex:none;width:3.8em;height:3.8em;border-radius:50%;background:radial-gradient(circle at 34% 28%,#efe7ff,var(--so-violet-2) 34%,var(--so-violet) 70%,#3b2a9a);box-shadow:0 0 2.6em rgba(124,92,255,.55),0 0 0 .1em rgba(255,255,255,.18) inset}
.hp-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--so-violet-2);opacity:0}
.hp-ps{display:flex;flex-direction:column;gap:1.2em}
.hp-pc{position:relative;display:block!important;height:9em;padding:1.3em 1.4em;border-radius:1.5em;transition:transform .3s var(--so-spring),box-shadow .3s}
.hp-pc b{display:block;margin:.5em 0 .3em;font-size:calc(var(--t)*1.1)}
.hp-pc span{display:block;font-size:var(--k);color:rgba(255,255,255,.62)}
.hp-pc em{position:absolute;right:1.2em;top:1.2em;padding:.3em .8em;border-radius:99px;font:600 12px/1.3 var(--sans);color:#fff;background:var(--so-violet);opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--so-spring)}
@media (hover:hover){.hp-pc:hover{transform:translateY(-.3em);box-shadow:0 0 0 1px rgba(177,75,216,.5) inset,0 1.4em 2.4em -1em rgba(124,92,255,.55)}}
.hp-pc.sel{transform:translateY(-.4em) scale(1.02);background:rgba(124,92,255,.14);box-shadow:0 0 0 2px var(--so-violet-2) inset,0 0 2.4em -.4em rgba(124,92,255,.7)}
.hp-pc.sel em{opacity:1;transform:none}
.hp-pc.fly{transition:transform .6s var(--so-ease-cam),opacity .6s;transform:translate(3em,-9em) scale(.5);opacity:0}

/* 2 · календар */
.hp-cn{display:flex;align-items:center;justify-content:space-between;margin:0 0 1.2em}
.hp-cn b{font-size:var(--t)}
.hp-wkr{display:flex;flex-direction:column;gap:.6em}
.hp-dy{display:flex;align-items:center;gap:.8em;height:4.3em;padding:0 .6em 0 .9em;border-radius:1em;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;transition:box-shadow .2s,background .2s}
.hp-dy>span{width:2.4em;font:500 12px/1 var(--sans);color:rgba(255,255,255,.55);text-transform:uppercase}
.hp-sl{position:relative;flex:1;height:3.3em}
.hp-dy.em{cursor:pointer}
@media (hover:hover){.hp-dy.em:hover{box-shadow:0 0 0 1px rgba(177,75,216,.6) inset,0 0 1.6em -.6em rgba(124,92,255,.7)}}
.hp-dy.tg{background:rgba(124,92,255,.2);box-shadow:0 0 0 2px var(--so-violet-2) inset}
.hp-ch{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 2.6em 0 .9em;border-radius:.8em;cursor:grab;touch-action:none;user-select:none;
  background:linear-gradient(170deg,var(--so-violet-2),var(--so-violet));box-shadow:0 .5em 1em -.4em rgba(124,92,255,.7),0 1px 0 rgba(255,255,255,.35) inset;color:#fff}
.hp-ch u{font:600 12px/1.25 var(--sans)}.hp-ch s{font:400 12px/1.2 var(--mono);opacity:.8;text-decoration:none}
.hp-ch svg{position:absolute;right:.8em;top:50%;width:1.5em;height:1.5em;margin-top:-.75em;color:#fff;opacity:.9}
.hp-ch.dg{cursor:grabbing;z-index:5;box-shadow:0 1.2em 2em -.6em rgba(0,0,0,.8),0 0 0 2px #fff inset}
.hp-hint{margin-top:1em!important;font-size:12px;color:rgba(255,255,255,.55);text-align:center}

/* 3 · студія */
.hp-pt{display:flex;align-items:center;gap:.9em;height:3.8em;padding:0 1.1em;border-radius:2em;color:var(--so-violet-2);background:var(--so-glass),rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(177,75,216,.5) inset}
.hp-pt svg{flex:none;width:1.6em;height:1.6em}
.hp-ty{flex:1;min-width:0;color:#fff;font-size:var(--k);white-space:nowrap;overflow:hidden}.hp-ty i{display:block;font-style:normal}
.hp-cr{width:100%;height:3.8em;margin-top:1.4em;border-radius:1.9em;font-size:var(--t)}
.s3[data-s="0"] .hp-cr .a,.s3[data-s="1"] .hp-cr .b,.s3[data-s="2"] .hp-cr .c{opacity:1}
.hp-gen{display:flex;justify-content:center;margin-top:1.6em}
.hp-fr{position:relative;width:12.6em;height:22.4em;border-radius:1.5em;overflow:hidden;background:#120d26;box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 2em 3em -1.2em rgba(0,0,0,.85)}
.hp-fr>.hp-m{position:absolute;inset:0;opacity:0;transform:scale(1.15);transition:opacity .5s,transform .7s var(--so-ease-out)}
.hp-cv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.5em;padding:1.3em;opacity:0;transform:translateY(1em) scale(.94);transition:opacity .3s,transform .5s var(--so-spring)}
.hp-cv strong{font:500 calc(var(--t)*1.6)/1.05 var(--serif);color:#fff;text-shadow:0 .1em .6em rgba(0,0,0,.4)}.hp-cv small{color:var(--so-amber-hi)}
.s3[data-s="2"] .hp-fr>.hp-m,.s3[data-s="2"] .hp-cv{opacity:1;transform:none}
.s3[data-s="2"] .hp-fr{box-shadow:0 0 0 2px var(--so-amber) inset,0 2em 3em -1.2em rgba(0,0,0,.85),0 0 3em -1em rgba(240,165,0,.5)}
.hp-sh{position:absolute;inset:0;opacity:0;overflow:hidden}
.hp-sh::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(177,148,255,.55),transparent 75%);transform:translateX(-100%)}
.s3[data-s="1"] .hp-sh{opacity:1;background:#17122b}.s3[data-s="1"] .hp-sh::after{animation:hp-shim .8s linear infinite}
.s3[data-s="1"] .hp-ty i{animation:hp-typ .9s steps(30,end) both}
.hp-rb{width:12.6em;height:.4em;margin:1.4em auto 0;border-radius:.3em;background:rgba(255,255,255,.12);overflow:hidden}
.hp-rb i{display:block;height:100%;transform:scaleX(0);transform-origin:0 0;background:linear-gradient(90deg,var(--so-violet),var(--so-amber))}
.s3[data-s="1"] .hp-rb i{transform:scaleX(1);transition:transform 1.4s linear}.s3[data-s="2"] .hp-rb i{transform:none}

/* 4 · публікація */
.hp-pv{position:relative;display:flex;gap:1.1em;padding:1.1em;border-radius:1.4em}
.hp-th{flex:none;width:4.6em;height:6.6em;border-radius:.9em}
.hp-pv>span{flex:1;min-width:0}.hp-pv b{display:block;font-size:var(--t)}
.hp-pv>span small{margin:.4em 0;text-transform:none;letter-spacing:0;font:400 13px/1.35 var(--sans);color:rgba(255,255,255,.7)}
.hp-pv u{font:400 12px/1 var(--mono);color:rgba(255,255,255,.55)}
.hp-sc .hp-st{margin-top:.7em;display:grid;width:max-content}.hp-st i{grid-area:1/1;font:600 12px/1 var(--sans);padding:.4em .7em;border-radius:99px;color:#fff;background:var(--so-violet);white-space:nowrap;transition:opacity .3s}.hp-st .b{background:var(--so-amber);color:#1b1408;opacity:0}
.s4[data-s="2"] .hp-st .b{opacity:1}.s4[data-s="2"] .hp-st .a{opacity:0}
.hp-yw{position:relative;margin-top:1.8em}
.hp-yes{width:100%;height:4.4em;border-radius:2.2em;font-size:calc(var(--t)*1.1)}
.s4[data-s="0"] .hp-yes .a,.s4[data-s="1"] .hp-yes .b,.s4[data-s="2"] .hp-yes .c{opacity:1}
.s4[data-s="2"] .hp-yes{background:linear-gradient(180deg,#ffd98a,var(--so-amber-hi))!important}
.hp-sp{width:1.3em;height:1.3em;border-radius:50%;border:.2em solid rgba(27,20,8,.25);border-top-color:#1b1408;animation:hp-spin .7s linear infinite}
.hp-cur{position:absolute;right:22%;top:1.8em;width:2.4em;height:2.4em;opacity:0;pointer-events:none;filter:drop-shadow(0 .3em .4em rgba(0,0,0,.5))}
.hp-nets{list-style:none;margin:1.6em 0 0;padding:0;display:flex;flex-direction:column;gap:.7em}
.hp-nets li{display:flex;align-items:center;gap:.9em;height:3.2em;padding:0 1em;border-radius:1em}
.hp-nets svg{width:1.8em;height:1.8em;color:#fff}.hp-nets b{flex:1;font-size:var(--k);font-weight:500}
.hp-nets em{width:1.9em;height:1.9em;border-radius:50%;background:var(--so-amber);position:relative;opacity:0;transform:scale(.2);transition:opacity .2s,transform .35s var(--so-spring)}
.hp-nets em::after{content:"";position:absolute;left:.62em;top:.3em;width:.45em;height:.85em;border:solid #1b1408;border-width:0 .22em .22em 0;transform:rotate(45deg)}
.hp-nets li.dn em{opacity:1;transform:none}

/* 5 · вхідні */
.hp-bb{display:flex;gap:.9em;align-items:flex-end;margin-bottom:1.3em}
.hp-av{flex:none;display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:50%;font:600 12px/1 var(--sans);font-style:normal;color:#fff;background:linear-gradient(140deg,#8a6f58,#4a3b30);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.hp-av.t{background:linear-gradient(140deg,#5d7a8c,#2f3f4a)}
.hp-bb span{position:relative;padding:1em 1.2em;border-radius:1.4em 1.4em 1.4em .3em;font-size:var(--k);line-height:1.35}
.hp-bb.ld span{box-shadow:0 0 0 1px rgba(240,165,0,.55) inset;padding-right:5em}
.hp-bb em{position:absolute;right:.8em;top:.8em;padding:.3em .7em;border-radius:99px;font:600 11px/1 var(--sans);color:#1b1408;background:var(--so-amber)}
.hp-dr{position:relative;margin:.4em 0 1.3em;padding:1.3em 1.4em;border-radius:1.4em;background:rgba(124,92,255,.12);box-shadow:0 0 0 1px rgba(177,75,216,.6) inset,0 1.2em 2.4em -1em rgba(124,92,255,.5);transition:transform .6s var(--so-spring),box-shadow .4s,background .4s}
.hp-dr small{display:grid;margin-bottom:.7em}.hp-dr small span{grid-area:1/1;transition:opacity .3s}.hp-dr small .b{opacity:0;color:var(--so-amber-hi)}
.hp-dr p{font-size:var(--k);line-height:1.4}
.hp-snd{height:3.2em;width:8.4em;margin:1.1em 0 0 auto;border-radius:1.6em;font-size:var(--k)}
.s5[data-s="1"] .hp-dr{transform:translateY(-.8em);background:rgba(240,165,0,.1);box-shadow:0 0 0 1px rgba(240,165,0,.6) inset,0 1.2em 2.4em -1em rgba(240,165,0,.4)}
.s5[data-s="1"] .hp-dr small .a,.s5[data-s="1"] .hp-snd .a{opacity:0}.s5[data-s="1"] .hp-dr small .b,.s5[data-s="1"] .hp-snd .b{opacity:1}
.s5[data-s="1"] .hp-snd{pointer-events:none}

/* 6 · аналітика */
.hp-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin-bottom:1.4em}
.hp-kp p{padding:.9em 1em;border-radius:1.2em}
.hp-kp small{color:rgba(255,255,255,.55);white-space:nowrap}.hp-kp b{display:block;margin:.4em 0;font-size:max(14px,1.35em);white-space:nowrap}
.hp-kp u{font:600 11px/1 var(--sans);color:var(--so-amber-hi)}.hp-kp u::before{content:"";display:inline-block;margin-right:.4em;border:.35em solid transparent;border-bottom:.55em solid currentColor;border-top:0}
.hp-cw{position:relative}
.hp-chart{display:block;width:100%;height:auto;overflow:visible}
.hp-ln{stroke-dasharray:1}
.hp-pts circle{fill:#fff;fill-opacity:.55;transition:fill .2s,r .2s}.hp-pts .e{fill:var(--so-amber-hi);fill-opacity:1}
.hp-hit circle{fill:transparent;cursor:pointer}
.hp-pts circle.on{fill:var(--so-amber-hi);fill-opacity:1;r:5.5}
.hp-tip{position:absolute;transform:translate(-50%,-135%);padding:.5em .9em;border-radius:.8em;white-space:nowrap;font:600 12px/1.2 var(--sans);color:#fff;background:#1d1830;box-shadow:0 0 0 1px rgba(177,75,216,.6) inset,0 .8em 1.6em -.4em rgba(0,0,0,.7);pointer-events:none;z-index:4}
.hp-lb{margin-top:1.4em}
.hp-rw{display:grid!important;grid-template-columns:2.8em 1fr 4.2em;column-gap:1em;row-gap:.2em;align-content:center;width:100%;min-height:4.6em;padding:.7em 1em;border-radius:1.2em;transition:box-shadow .2s,transform .3s var(--so-spring)}
.hp-rw i{grid-row:1/3;width:2.8em;height:2.8em;border-radius:.7em}.hp-rw b{font-size:var(--k)}.hp-rw span{font-size:12px;color:rgba(255,255,255,.6)}
.hp-sk{grid-row:1/3;grid-column:3;width:100%;height:auto;align-self:center}
@media (hover:hover){.hp-rw:hover{box-shadow:0 0 0 1px rgba(177,75,216,.6) inset}}
.hp-rw.sel{box-shadow:0 0 0 2px var(--so-violet-2) inset,0 0 2em -.6em rgba(124,92,255,.7);transform:translateX(.3em)}

.hp-fl{position:absolute;top:0;bottom:0;left:0;width:55%;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:translateX(-130%) skewX(-14deg)}

/* підпис кроку: фіолет = працює AI, бурштин = готово */
.hp-cap{position:relative;display:grid;width:max-content;max-width:100%;margin:20px auto 0;padding:12px 22px 12px 40px;border-radius:99px;
  background:var(--so-glass),#1b1814;box-shadow:var(--so-depth-1),0 0 0 1px rgba(255,255,255,.16) inset;font:500 15px/1.3 var(--sans);color:#fff;text-align:center}
.hp-cap span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .32s,transform .32s var(--so-ease-out)}
.hp-cap span.on{opacity:1;transform:none}
.hp-dot{position:absolute;left:18px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--so-violet);box-shadow:0 0 10px var(--so-violet-2);transition:background .3s,box-shadow .3s}
.hp-stage[data-b="3"] .hp-dot,.hp-stage[data-b="5"] .hp-dot{background:var(--so-amber);box-shadow:0 0 10px var(--so-amber)}
.hp-stage .hero-ex{margin-top:12px;color:rgba(255,255,255,.88);font-size:14px;text-align:center}

/* підсвітка за активним кроком: фіолет = AI, бурштин = готово */
.hp-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.hp-glow i{position:absolute;left:50%;top:46%;width:130%;height:72%;transform:translate(-50%,-50%);transition:opacity .6s}
.hp-glow .v{background:radial-gradient(closest-side,rgba(124,92,255,.4),transparent)}.hp-glow .a{background:radial-gradient(closest-side,rgba(240,165,0,.32),transparent);opacity:0}
.hp-stage[data-b="3"] .hp-glow .a,.hp-stage[data-b="5"] .hp-glow .a{opacity:1}.hp-stage[data-b="3"] .hp-glow .v,.hp-stage[data-b="5"] .hp-glow .v{opacity:0}

/* до трьох супутникових карток: повністю поза силуетом телефона, спокійніші за нього */
.hp-fan{display:none}
@media (min-width:1181px){
  .hero-in{grid-template-columns:1fr 1fr}
  .hp-stage{--w:min(300px,27vw,max(220px,calc((100svh - 255px)/1.95)));width:100%;justify-self:stretch}
  .hp-fan{display:block;position:absolute;inset:0;z-index:1}
}
.hp-gl{--d:-14;--r:0deg;position:absolute;width:calc(50% - var(--w)/2 - 1.6em);padding:.8em .9em;border-radius:1.2em;font-size:calc(var(--w)/28);color:#fff;opacity:.62;
  background:var(--so-glass),#14110d;transform:translate3d(calc(var(--px,0)*var(--d)*1px),calc(var(--py,0)*var(--d)*.6px),0) rotate(var(--r));transition:transform .7s var(--so-ease-out),opacity .5s,box-shadow .5s}
.hp-gl small{display:block;margin:0 0 .5em;font:500 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--so-violet-ink)}
.hp-gl p{margin:0;font:500 13px/1.3 var(--sans)}
.hp-gl.hl{opacity:1;box-shadow:0 0 0 1px rgba(177,75,216,.55) inset,0 0 2em -.6em rgba(124,92,255,.6)}
.hp-g1{left:0;top:10%;--d:-12}
.hp-g2{left:0;top:48%;--d:-18}
.hp-g3{right:0;top:30%;--d:-14}
.hp-mw{display:grid;grid-template-columns:repeat(7,1fr);gap:.3em;margin-bottom:.4em}.hp-mw i{height:1.7em;border-radius:.4em;background:rgba(255,255,255,.08)}.hp-mw i.v{background:var(--so-violet)}.hp-mw i.a{background:var(--so-amber)}
.hp-g3 p{padding:.6em .8em;border-radius:.9em .9em .9em .2em;background:rgba(255,255,255,.1)}

/* фон: тиха нахилена сітка тижня */
.hp-wk{position:absolute;right:-8%;top:-12%;width:58%;height:130%;z-index:0;pointer-events:none;overflow:hidden;opacity:.2;transform:rotate(-8deg);
  -webkit-mask:radial-gradient(70% 60% at 62% 50%,#000 20%,transparent 75%);mask:radial-gradient(70% 60% at 62% 50%,#000 20%,transparent 75%)}
.hp-wk-in{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:62px;gap:10px;animation:hp-wk 40s linear infinite}
.hp-wk i{border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.hp-wk i.v{background:rgba(124,92,255,.55)}.hp-wk i.a{background:rgba(240,165,0,.5)}
@keyframes hp-wk{to{transform:translateY(-288px)}}
.hp-paused .hp-wk-in{animation-play-state:paused}

@keyframes hp-in{from{opacity:0;transform:translate3d(0,1.6em,0)}}
@keyframes hp-drop{from{opacity:0;transform:translateY(-3em) scale(.9)}}
@keyframes hp-ring{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
@keyframes hp-flare{0%{opacity:0;transform:translateX(-130%) skewX(-14deg)}20%{opacity:1}100%{opacity:0;transform:translateX(260%) skewX(-14deg)}}
@keyframes hp-shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes hp-typ{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes hp-spin{to{transform:rotate(360deg)}}
@keyframes hp-draw{from{stroke-dashoffset:1}}
@keyframes hp-fade{from{opacity:0}}
@keyframes hp-cura{0%{transform:translate(5em,6em);opacity:0}20%{opacity:1}65%{transform:translate(0,.4em);opacity:1}75%{transform:translate(0,.4em) scale(.85)}100%{transform:translate(0,.4em);opacity:0}}
.hp-live .run .x{animation:hp-in .5s var(--so-spring) backwards;animation-delay:calc(var(--i,0)*70ms + 120ms)}
.hp-live .run .hp-orb::after{animation:hp-ring 1.8s ease-out .3s infinite}
.hp-live .run .hp-ln{animation:hp-draw 1.2s var(--so-ease-io) .2s backwards}
.hp-live .run .hp-ar{animation:hp-fade 1s ease-out .7s backwards}
.hp-live .run :is(.hp-nets li,.hp-kp,.hp-gen,.hp-lb){animation:hp-in .55s var(--so-spring) backwards;animation-delay:.25s}
.hp-nw{animation:hp-drop .38s var(--so-spring)}
.hp-auto .hp-cur{animation:hp-cura 1s var(--so-ease-io) .1s both}
.hp-flare .hp-fl{animation:hp-flare .7s var(--so-ease-io) both}
.hp-paused .hp-orb::after,.hp-paused .hp-sp,.hp-paused .hp-sh::after{animation-play-state:paused}

/* Лумі: уся постать, без обрізки; промені — окремий симетричний шар, що пульсує; тіло лише похитується */
.hp-stage>.crew[data-crew="lumi"]{--cs:96px;top:auto;left:auto;right:0;bottom:36px;z-index:3}
.hp-stage>.crew[data-crew="lumi"] .c-clip{clip-path:none!important}
.hp-stage>.crew[data-crew="lumi"] :is(.c-move,.c-lean,.c-act){transform:none!important;animation:none!important}
.hp-stage>.crew[data-crew="lumi"] .cw{animation:hp-bob 3.4s ease-in-out infinite}
.hp-stage>.crew[data-crew="lumi"] .crew-svg .body{animation:none!important;transform:none!important}
.hp-stage>.crew[data-crew="lumi"] .crew-svg .ly-rays{transform-box:view-box;transform-origin:50% 36%;animation:hp-rays 2.6s ease-in-out infinite!important}
.hp-stage>.crew[data-crew="lumi"] .crew-svg .arm-r{animation:hp-wave 2.2s ease-in-out infinite!important}
@keyframes hp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hp-rays{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@keyframes hp-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}

@media (max-width:980px){.hp-stage{--w:min(300px,78vw);justify-self:center;width:100%}.hp-wk{opacity:.14;right:-30%;width:100%}.hp-stage>.crew[data-crew="lumi"]{bottom:calc(100% - 6px);right:4%}}
@media (prefers-reduced-motion:reduce){
  .hp-stage *,.hp-stage *::before,.hp-stage *::after,.hp-wk-in{animation:none!important;transition:none!important}
  .hp-sc,.hp-sc.out{transform:none}.hp-fl{display:none}
}
@media (min-width:981px){.hero:not(.hero-sub) .hp-stage{margin-top:0}}
.s3:not([data-s="0"]) .hp-cr .a,.s4:not([data-s="0"]) .hp-yes .a{opacity:0}
.hp-kp{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-kp small{text-transform:none;letter-spacing:0;font:500 11px/1.2 var(--sans)}
.hp-av{font-size:0;overflow:hidden}.hp-av::first-letter{font-size:13px}