#state-it-premium{container-type:inline-size;font-family:"Segoe UI",Arial,sans-serif;--brand-amber:#ffa21c;--brand-ink:#0c1011;--brand-white:#fff1dd}
#state-it-premium .scene{position:relative;aspect-ratio:1.08;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse at 50% 62%,#44301b 0%,#1b1b17 30%,#0c1011 68%);isolation:isolate}
#state-it-premium .foundation{position:absolute;left:50%;top:74%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%) rotateX(75deg);z-index:3}
#state-it-premium .brand-mark{position:absolute;inset:12%;border-radius:50%;overflow:hidden;background:white}
#state-it-premium .brand-mark img{position:absolute;left:-28%;top:-28%;width:156%;height:156%;max-width:none}
#state-it-premium .business-label{position:absolute;top:46%;left:19%;right:19%;color:var(--brand-white);text-align:center;font-size:clamp(25px,4.7cqw,36px);font-weight:500;letter-spacing:.2px;line-height:1.2;white-space:nowrap;text-shadow:0 2px 8px #000,0 0 20px #000,0 2px 20px #ffad3430;z-index:10;opacity:1;pointer-events:none;animation:premium-business-float 2.3s cubic-bezier(.2,.65,.25,1) both}
#state-it-premium .brand-name{position:absolute;top:92%;left:20%;right:20%;text-align:center;color:var(--brand-white);font-size:clamp(20px,3.4cqw,28px);font-weight:500;letter-spacing:.3px}
#state-it-premium .brand-name em{color:var(--brand-amber);font-style:normal}
#state-it-premium .dome{position:absolute;left:3%;top:2%;width:94%;height:88%;background-image:url('/assets/business-protection-dome-v1.webp');background-size:100% 100%;background-repeat:no-repeat;z-index:4;pointer-events:none;transform-origin:50% 85%;animation:premium-dome-rise 2.4s 4.8s both}
#state-it-premium .service{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:22%;min-height:67px;box-sizing:border-box;padding:10px 6px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fce9ce;text-align:center;font-size:clamp(11px,1.8cqw,14px);line-height:1.25;border-radius:12px;border:1px solid #be873b;background:linear-gradient(145deg,#4b3a25 0%,#252c2c 32%,#151b1c 68%,#303027);box-shadow:inset 0 1px 0 #fff3,0 5px 0 #0a0d0e,0 6px 0 #7c582c,0 10px 20px #0007;z-index:5;animation:premium-service 2s cubic-bezier(.2,.65,.25,1) var(--delay) both}
#state-it-premium .service:after{content:"";position:absolute;bottom:5px;left:calc(50% - 10px);width:20px;height:2px;background:#ffad34;box-shadow:0 0 8px #ffa21c}
#state-it-premium .service i{color:#ffb544;filter:drop-shadow(0 0 5px #ff9d1844)}
#state-it-premium .threat{position:absolute;left:var(--x);top:var(--y);width:9%;aspect-ratio:1;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#ed8873;background:radial-gradient(circle at 35% 25%,#593129,#251c1c 70%);border:1px solid #9d5449;border-radius:13px;box-shadow:inset 0 1px 0 #ffb6a32a,0 7px 15px #0008;opacity:0;z-index:8;animation:premium-deflect-left 2.6s var(--delay) both}
#state-it-premium .threat.right{animation-name:premium-deflect-right}
#state-it-premium .threat svg{width:25px;height:25px;stroke-width:1.5}
#state-it-premium .spark{position:absolute;left:var(--x);top:var(--y);width:24px;height:24px;border:2px solid #ffc36c;border-radius:50%;opacity:0;z-index:9;box-shadow:0 0 18px #ffa21c;animation:premium-spark 2.6s var(--delay) both}
#state-it-premium .controls{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:10px;flex-wrap:wrap}
#state-it-premium .pause-label{display:flex;align-items:center;gap:8px;min-height:44px;color:#303030;font-size:14px}
#state-it-premium:has(.pause-input:checked) .scene *{animation-play-state:paused}
@keyframes premium-arrival{0%{opacity:0;transform:translateY(-170px) scale(.8)}25%{opacity:1}80%{transform:translateY(7px) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes premium-business-float{0%{transform:translateY(-140px) scale(.9)}80%{transform:translateY(5px) scale(1)}100%{transform:translateY(0) scale(1)}}
@keyframes premium-service{0%{left:50%;top:74%;opacity:0;transform:translate(-50%,-50%) scale(.25)}15%{opacity:1}100%{left:var(--endx,var(--x));top:var(--endy,var(--y));opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes premium-deploy{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes premium-dome-rise{from{opacity:0;transform:scaleY(.02)}20%{opacity:.5}to{opacity:1;transform:scaleY(1)}}
@keyframes premium-reveal{from{opacity:0}to{opacity:1}}
@keyframes premium-deflect-left{0%{opacity:0;transform:translate(-190%,-100%) rotate(-20deg)}15%{opacity:1}45%{opacity:1;transform:translate(30%,-50%) rotate(0)}55%{opacity:1;transform:translate(5%,-70%) rotate(-12deg)}100%{opacity:0;transform:translate(-220%,-210%) rotate(-65deg)}}
@keyframes premium-deflect-right{0%{opacity:0;transform:translate(190%,-100%) rotate(20deg)}15%{opacity:1}45%{opacity:1;transform:translate(-130%,-50%) rotate(0)}55%{opacity:1;transform:translate(-105%,-70%) rotate(12deg)}100%{opacity:0;transform:translate(220%,-210%) rotate(65deg)}}
@keyframes premium-spark{0%,40%{opacity:0;transform:translate(-50%,-50%) scale(.2)}47%{opacity:1}85%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@container(max-width:460px){#state-it-premium .scene{aspect-ratio:.72}#state-it-premium .business-label{top:49%;left:18%;right:18%}#state-it-premium .service{min-height:57px;width:27%;gap:4px;padding:8px 3px}#state-it-premium .service i{display:none}#state-it-premium .service{--endx:var(--mx);--endy:var(--my);left:var(--mx);top:var(--my)}#state-it-premium .foundation{width:88%;top:74%}#state-it-premium .dome{left:0;width:100%;top:2%;height:88%}#state-it-premium .brand-name{top:91%}#state-it-premium .threat{width:11%}#state-it-premium .threat svg{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){#state-it-premium .scene *{animation:none!important}#state-it-premium .threat,#state-it-premium .spark{display:none}}

#state-it-premium{max-width:760px;margin:0 auto 38px}
#state-it-premium .service i{display:flex;flex-shrink:0}
#state-it-premium .service svg{width:20px;height:20px;stroke-width:1.6}
#state-it-premium .protection-replay{font:inherit;font-size:14px;background:#111;color:#fff;border:1px solid #111;border-radius:5px;padding:9px 18px;cursor:pointer}
#state-it-premium .protection-replay:hover{background:#333}
#state-it-premium.is-waiting .scene *{animation-play-state:paused}