/* Ryze Cyber v3 : scène du hero, récit au défilement, calculateur, correctifs mobile */
.hg,.two,.doc,.scan{min-width:0}.hg>*,.two>*,.doc>*,.scan>*,.con>*{min-width:0}
.wb .dm em{font-style:normal}
#wipe{position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--ac);opacity:0;clip-path:circle(0 at var(--wx,50%) var(--wy,30%))}
#wipe.go{animation:wipe .75s var(--ez)}
@keyframes wipe{0%{opacity:.5;clip-path:circle(0 at var(--wx,50%) var(--wy,30%))}100%{opacity:0;clip-path:circle(150vmax at var(--wx,50%) var(--wy,30%))}}
/* scène */
.scn{position:relative;border-radius:14px;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ac) 10%,#07080C),#07080C 70%);overflow:hidden}
.scn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ac) 9%,transparent),transparent);height:40%;animation:scanl 4.5s linear infinite}
@keyframes scanl{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.scn svg{width:100%;height:auto}
.s-rg{fill:none;stroke:rgba(255,255,255,.08);stroke-dasharray:2 7}
.s-shd{fill:color-mix(in srgb,#4DA3FF 5%,transparent);stroke:#4DA3FF;stroke-width:1.6;stroke-dasharray:10 8;opacity:0;transform-origin:260px 170px;animation:spin 26s linear infinite;transition:opacity .8s}
body[data-team="blue"] .s-shd{opacity:.9}.s-shd.hit{animation:spin 26s linear infinite,shit .5s ease}
@keyframes shit{30%{stroke-width:4;filter:drop-shadow(0 0 10px #4DA3FF)}}
.s-in{fill:none;stroke:var(--crit);stroke-width:2;stroke-dasharray:118;stroke-dashoffset:118;opacity:0;transition:stroke-dashoffset .7s var(--ez),opacity .3s}
.s-in.on{stroke-dashoffset:0;opacity:.9}
#core rect{fill:#11141B;stroke:var(--ac);stroke-width:1.6;transition:stroke .8s}#core path{fill:none;stroke:var(--tx);stroke-width:1.8;stroke-linejoin:round}
.s-t{fill:var(--tx2);font:500 11px var(--mono)}
.s-dr{--c:var(--mu2)}.s-dr.open{--c:var(--crit)}.s-dr.ok{--c:var(--ok)}
.s-bg{fill:#11141B;stroke:var(--c);stroke-width:1.8;transition:stroke .4s}
.s-pg{fill:var(--c);opacity:0;transform-origin:center;transform-box:fill-box}
.s-dr.open .s-pg{animation:ping 1.6s var(--ez) infinite}.s-dr.ok .s-pg{animation:ping 1s var(--ez) 1}
.s-lk{fill:var(--c);transition:fill .4s}.s-sc,.s-so{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;transition:stroke .4s}
.s-so{display:none}.s-dr.open .s-so{display:block}.s-dr.open .s-sc{display:none}
.s-ad{fill:var(--ac);filter:drop-shadow(0 0 8px var(--ac))}.s-ah{fill:var(--ac);opacity:.22;transform-origin:center;transform-box:fill-box;animation:pul 1.4s infinite}
.s-atk{fill:var(--crit);filter:drop-shadow(0 0 6px var(--crit))}
.s-spk{fill:none;stroke:#fff;stroke-width:2;transform-origin:center;transform-box:fill-box;animation:ping .7s var(--ez) 1 forwards}
.capn{min-height:46px;margin-top:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:14.5px;color:var(--tx);animation:fin .45s var(--ez)}
.capn.bad{border-color:color-mix(in srgb,var(--crit) 55%,transparent);background:color-mix(in srgb,var(--crit) 10%,transparent)}
.capn.good{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pills span{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;border:1px solid var(--line2);font:500 11.5px var(--mono);color:var(--mu);transition:.4s}
.pills span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mu2);transition:.4s}
.pills .open{color:var(--tx);border-color:color-mix(in srgb,var(--crit) 60%,transparent)}.pills .open::before{background:var(--crit);box-shadow:0 0 8px var(--crit)}
.pills .ok{color:var(--tx);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}.pills .ok::before{background:var(--ok)}
.cnt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
/* explication */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vc{padding:26px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.vc>*{position:relative;z-index:1}
.vc.r{--ac:#FF4D5E;--ac2:#B3122A}.vc.b{--ac:#4DA3FF;--ac2:#1D4ED8}
body[data-team="red"] .vc.r,body[data-team="blue"] .vc.b{border-color:color-mix(in srgb,var(--ac) 60%,transparent);box-shadow:0 30px 70px -44px var(--ac)}
.vc .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent)}
.vc .ico svg{width:26px;height:26px;fill:none;stroke:var(--ac);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vc.r .ico svg{animation:pick 2.4s ease-in-out infinite}.vc.b .ico{animation:guard 2.4s ease-in-out infinite}
@keyframes pick{0%,60%,100%{transform:none}70%{transform:rotate(-12deg)}80%{transform:rotate(10deg)}90%{transform:rotate(-6deg)}}
@keyframes guard{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--ac) 14%,transparent)}}
.vc .k{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.vc h3{font-size:24px;font-weight:500;letter-spacing:-.03em}.vc p{color:var(--tx2);font-size:15px}
.vc ul{list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--tx2)}
.vc li{display:flex;gap:10px}.vc li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--ac)}
.vc .btn{align-self:flex-start;margin-top:6px}
/* bandeau défilant */
.mq{overflow:hidden;border-block:1px solid var(--line);padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq div{display:flex;gap:34px;width:max-content;animation:mq 38s linear infinite;font:500 12.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.mq span{display:flex;align-items:center;gap:34px;white-space:nowrap}.mq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ac)}
@keyframes mq{to{transform:translateX(-50%)}}
/* récit */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.stp{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .5s;cursor:pointer}
.stp.on{opacity:1}
.stp .n{font:600 12px var(--mono);letter-spacing:.14em;color:var(--ac)}
.stp h3{font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1.08;margin:8px 0 10px}
.stp p{color:var(--tx2);font-size:16px;max-width:42ch}
.stw{position:sticky;top:96px}
.stage{position:relative;padding:0 0 56px}
.bwf{border-radius:16px;border:1px solid color-mix(in srgb,var(--ac) 28%,var(--line));background:#0C0E14;box-shadow:0 40px 90px -50px var(--ac);overflow:hidden}
.bwt{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line)}.bwt i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.bwt i:nth-child(2){background:#FEBC2E}.bwt i:nth-child(3){background:#28C840}
#bw{position:relative;aspect-ratio:16/10.5}
.phf{position:absolute;right:-6px;bottom:0;width:184px;border-radius:30px;border:1px solid var(--line2);background:#0A0B10;padding:9px;box-shadow:0 30px 60px -20px #000,0 0 0 6px #14161d}
.phf::before{content:"";position:absolute;left:50%;top:15px;transform:translateX(-50%);width:54px;height:15px;border-radius:99px;background:#000;z-index:3}
#ph{position:relative;aspect-ratio:9/17.5;border-radius:22px;background:#10131A;overflow:hidden}
.scr{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s,transform .55s var(--ez);pointer-events:none}
#ph .scr{padding:38px 10px 10px;gap:8px}
.stage[data-step="1"] .scr[data-s="1"],.stage[data-step="2"] .scr[data-s="2"],.stage[data-step="3"] .scr[data-s="3"],.stage[data-step="4"] .scr[data-s="4"]{opacity:1;transform:none}
.url{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:9px;background:rgba(255,255,255,.05);font:500 11.5px var(--mono);color:var(--tx2)}
.url i{width:7px;height:7px;border-radius:50%;background:var(--ok)}.url.bad{color:var(--crit)}.url.bad i{background:var(--crit);animation:pul 1s infinite}
.fk{display:flex;gap:8px}.fk i{height:8px;width:54px;border-radius:9px;background:rgba(255,255,255,.1)}
.fk2{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-content:start}.fk2 b{grid-column:1/-1;height:24px;width:62%;border-radius:8px;background:rgba(255,255,255,.14)}
.fk2 span{height:10px;border-radius:9px;background:rgba(255,255,255,.07)}.fk2 em{grid-column:1/-1;height:74px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.tg{align-self:flex-start;margin-top:auto;padding:4px 10px;border-radius:99px;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.tg.n{--c:var(--mu)}.tg.b{--c:var(--crit)}.tg.g{--c:var(--ok)}
.lg,.ad,.lk,.bl{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;max-width:300px;margin:0 auto;width:100%}
.lg b,.ad p{font-size:14px}.inp{height:30px;border-radius:9px;border:1px solid var(--line2);display:flex;align-items:center;padding:0 10px}
.ty{display:block;height:6px;border-radius:9px;background:var(--tx2);width:0;animation:ty 2.6s steps(9) infinite}.ty.d2{animation-delay:.9s}
@keyframes ty{0%{width:0}50%,100%{width:62%}}
.bt{display:inline-flex;align-items:center;justify-content:center;font-style:normal;padding:7px 11px;border-radius:9px;font-size:12px;font-weight:600;background:rgba(255,255,255,.1);color:var(--tx)}
.bt.hot{background:var(--crit);color:#12080a;animation:hot 1.5s ease-in-out infinite}.bt.off{opacity:.45;text-decoration:line-through}
body[data-team="blue"] .bt.hot{background:var(--ok);color:#06140c}
@keyframes hot{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--crit) 22%,transparent)}}
.rw{height:10px;border-radius:9px;background:rgba(255,255,255,.08)}
.ex{font:500 11.5px var(--mono);color:var(--crit)}.ex i,.lk i{display:block;height:6px;margin-top:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.ex i b,.lk i b{display:block;height:100%;width:0;background:var(--crit);animation:fill 2.8s ease-out infinite}
@keyframes fill{to{width:100%}}
.lk,.bl{align-items:center;text-align:center}.lk svg,.bl svg{width:38px;height:38px;fill:none;stroke:var(--crit);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:pul 1.4s infinite}
.bl svg{stroke:var(--ok);animation:none}.bl.no svg{stroke:var(--ok)}
.lk b,.bl b{font-size:16px}.lk p,.bl p{font-size:12.5px;color:var(--tx2)}.lk i{width:100%}
.hdr{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.ml,.nt{padding:9px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:12px}
.ml span{font:500 9.5px var(--mono);color:var(--mu);word-break:break-all}.ml p,.nt span{color:var(--tx2);font-size:11.5px;line-height:1.35}.ml .wn{color:var(--warn)}
.nt.bad{border-color:color-mix(in srgb,var(--crit) 50%,transparent)}.nt.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.stage[data-step="4"] .nt:nth-child(3){transition-delay:.25s}.stage[data-step="4"] .nt:nth-child(4){transition-delay:.5s}
.yn2{display:flex;gap:6px;margin-top:4px}.yn2 .bt{flex:1}
#sdots{display:flex;gap:6px;margin-top:14px}#sdots i{height:4px;flex:1;border-radius:9px;background:rgba(255,255,255,.1);transition:background .4s}#sdots i.on{background:var(--ac)}
/* calculateur */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.cin{padding:26px}.cin>*,.cout>*{position:relative;z-index:1}
.sl{margin-top:18px}.sl label{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--tx2)}.sl label b{font:600 14px var(--mono);color:var(--tx)}
.sl input{width:100%;margin-top:12px;accent-color:var(--ac);height:28px}
.cout{padding:26px;border-color:color-mix(in srgb,var(--crit) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--crit) 12%,transparent),rgba(255,255,255,.02))}
.cout .big{font-size:clamp(40px,5.4vw,68px);font-weight:500;letter-spacing:-.045em;line-height:1;margin:10px 0 4px;color:var(--crit)}
.cout .big small{font-size:18px;letter-spacing:0;color:var(--tx2);margin-left:8px}
.cmp{margin-top:20px;display:grid;gap:10px;font-size:13.5px;color:var(--tx2)}
.cmp i{display:block;height:9px;margin-top:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.cmp i b{display:block;height:100%;border-radius:99px;transition:width .6s var(--ez)}
.cout .btn{margin-top:20px}
/* push Ryze Systems */
.push{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:24px 28px;margin-top:16px;--ac:#C6F432;--ac2:#65A30D}
.push>*{position:relative;z-index:1}.push p{color:var(--tx2);font-size:14.5px;max-width:60ch;margin-top:4px}
@media (max-width:1040px){.hg,.two,.doc,.scan,.calc{grid-template-columns:minmax(0,1fr)}.story{grid-template-columns:minmax(0,1fr);gap:0}.stw{position:sticky;top:62px;z-index:5;order:-1;margin:0 -16px;padding:10px 16px 12px;background:linear-gradient(180deg,var(--bg) 86%,transparent)}.stage{padding:0 78px 0 0}.phf{width:118px;right:0;border-radius:22px;padding:6px}.phf::before{top:10px;width:36px;height:10px}#ph{border-radius:16px}#ph .scr{padding:24px 6px 6px;gap:5px}.ml,.nt{padding:6px;font-size:10.5px}.ml p,.nt span{font-size:10px}.ml span{display:none}.hdr{font-size:8.5px}.bt{padding:5px 7px;font-size:10px}#bw .scr{padding:10px;gap:7px}.lk b,.bl b{font-size:13.5px}.lk p,.bl p{font-size:11px}.lk svg,.bl svg{width:28px;height:28px}.fk2 em{height:36px}.tg{font-size:9.5px;padding:3px 8px}.stp{min-height:46vh;padding:18px 0}.vs{grid-template-columns:1fr}}
@media (max-width:640px){.wb .dm em{display:none}.s-t{display:none}.capn{font-size:13.5px}.pills span{font-size:10.5px;padding:4px 8px}.vc{padding:20px}.cin,.cout{padding:20px}.push{padding:20px}}
@media (prefers-reduced-motion:reduce){.stp{opacity:1}.scn::after{display:none}}
/* kit de marque */
.kit{padding:130px 0 80px}.kg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.kg.c2{grid-template-columns:1fr 1fr}
.sw{padding:0;overflow:hidden;text-align:left;cursor:pointer}.sw i{display:block;height:92px}.sw div{padding:12px 14px}.sw b{display:block;font-size:14px;font-weight:500}.sw span{font:500 12px var(--mono);color:var(--mu)}
.lgo{display:grid;place-items:center;gap:16px;padding:44px 20px;text-align:center}.lgo.lt{background:#F4F1EC;color:#0A0B10}.lgo svg{width:96px;height:96px}
.wm{font-family:"Chakra Petch",Geist,sans-serif;font-weight:600;font-size:40px;letter-spacing:.01em}.wm b{font-weight:600;background:linear-gradient(90deg,#FF4D5E,#4DA3FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.kit h2{margin-top:64px}.kit .rows{margin-top:6px}.ty1{padding:22px}.ty1 p{color:var(--tx2);font-size:14px;margin-top:6px}
@media (max-width:900px){.kg{grid-template-columns:1fr 1fr}.kg.c2{grid-template-columns:1fr}.wm{font-size:30px}}