/* Home v10 hero OPTIONS A/B/C (preview only: /home-v10/?hero=a|b|c). One screen at 1440x800, works at 390. */
.ho{position:relative;overflow:hidden;min-height:calc(100svh - var(--hdr,84px));display:flex;align-items:center;padding:0!important;isolation:isolate}
.ho .v5-wrap{position:relative;z-index:2;width:100%}
.ho-h1{font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:14px 0 16px;text-wrap:balance}
.ho-sub{font-size:18px;line-height:1.5;max-width:34em;margin:0 0 18px;text-wrap:pretty}
.ho-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ho-btn{font-size:18.5px;min-height:64px;padding:0 40px}
.ho-under{margin:0;font-size:14.5px;font-weight:600;opacity:.85}
.ho-urgent{display:flex;align-items:center;gap:10px;font-weight:700;margin:0 0 22px;font-size:16px}
.ho-urgent span{width:10px;height:10px;border-radius:50%;background:#DB4B46;box-shadow:0 0 0 0 rgba(219,75,70,.6);animation:hoPing 1.6s infinite}
@keyframes hoPing{70%{box-shadow:0 0 0 12px rgba(219,75,70,0)}100%{box-shadow:0 0 0 0 rgba(219,75,70,0)}}

/* ---- A: cinematic dark facility, money leaking ---- */
.ho-a{background:radial-gradient(120% 90% at 70% 40%,#16223d 0,#0a1020 55%,#05080f 100%);color:#fff}
.ho-a .ho-h1{font-size:clamp(40px,4.6vw,68px);max-width:9.6em;color:#fff}
.ho-a .ho-h1 span{display:block;color:#DB4B46}
.ho-a .ho-sub{color:#c6cfe2;max-width:28em}
.ho-a__copy{max-width:1240px}
.ho-a__copy>*{max-width:560px}
.ho-a__scene{position:absolute;right:-4%;top:50%;width:66%;aspect-ratio:1800/965;transform:translateY(-46%);z-index:1}
.ho-a__bld{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) brightness(.95)}
.ho-leak{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.ho-leak i{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,rgba(219,75,70,.95) 0,rgba(219,75,70,.35) 45%,transparent 70%);animation:hoGlow 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*.35s)}
.ho-leak b{position:absolute;left:-6px;top:-10px;font:800 15px/1 inherit;color:#F7CA50;opacity:0;text-shadow:0 0 10px rgba(247,202,80,.7);animation:hoRise 3s ease-out infinite;animation-delay:calc(var(--i)*.4s)}
.ho-leak b+b{animation-delay:calc(var(--i)*.4s + 1s);left:2px}.ho-leak b+b+b{animation-delay:calc(var(--i)*.4s + 2s);left:-12px}
@keyframes hoGlow{50%{transform:scale(1.5);opacity:.6}}
@keyframes hoRise{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-64px)}}
.ho-tag{position:absolute;left:18px;top:-18px;white-space:nowrap;font-style:normal;font-size:12px;color:#c6cfe2;background:rgba(10,16,32,.86);border:1px solid rgba(219,75,70,.55);border-radius:10px;padding:6px 10px;display:flex;flex-direction:column;line-height:1.3;backdrop-filter:blur(4px)}
.ho-tag strong{color:#fff;font-size:13px}.ho-tag span{position:absolute;right:-10px;top:-12px;background:#DB4B46;color:#fff;font-weight:800;border-radius:999px;padding:2px 8px;font-size:12px}
.ho-a__meter{position:absolute;right:6%;bottom:-6%;background:rgba(10,16,32,.9);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;min-width:250px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ho-a__meter small{display:block;font-size:11.5px;color:#8f9ab5;text-transform:uppercase;letter-spacing:.08em}
.ho-a__meter small:last-child{text-transform:none;letter-spacing:0;margin-top:6px}
.ho-a__meter b{display:block;font-size:44px;font-weight:800;color:#DB4B46;font-variant-numeric:tabular-nums;line-height:1.1}
.ho-a__meter i{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}.ho-a__meter i em{display:block;height:100%;width:0;background:linear-gradient(90deg,#F7CA50,#DB4B46)}

/* ---- B: huge example counter ---- */
.ho-b{background:#0a1020;color:#fff;text-align:center}
.ho-b__in{display:flex;flex-direction:column;align-items:center}
.ho-b .ho-h1{color:#fff;font-size:clamp(30px,3vw,44px);margin:12px 0 4px}.ho-b .ho-h1 span{color:#F7CA50}
.ho-b__num{margin:0;font-weight:800;font-size:clamp(76px,11vw,168px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 20%,#DB4B46 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ho-b__cap{margin:4px 0 18px;font-size:19px;color:#c6cfe2;font-weight:600}
.ho-b__parts{list-style:none;padding:0;margin:0 0 18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ho-b__parts li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--c);border-radius:14px;padding:10px 14px;font-size:13.5px;color:#c6cfe2;max-width:250px;text-align:left}
.ho-b__parts b{display:block;color:#fff;font-size:16px}
.c-red{--c:#DB4B46}.c-yellow{--c:#F7CA50}.c-blue{--c:#4DAAE8}
.ho-b .ho-sub{color:#c6cfe2;max-width:40em;margin-inline:auto;font-size:16.5px}
.ho-b .ho-cta{align-items:center}
.ho-foot{margin:14px 0 0;font-size:12px;color:#7d88a3}
.ho-b__rain{position:absolute;inset:0;z-index:1;pointer-events:none}
.ho-b__rain i{position:absolute;left:var(--x);top:-40px;font-style:normal;font-weight:800;font-size:calc(28px*var(--s));color:rgba(152,195,85,.18);animation:hoFall 9s linear infinite;animation-delay:calc(var(--d)*-1.5)}
@keyframes hoFall{to{transform:translateY(calc(100svh + 80px)) rotate(40deg)}}

/* ---- C: Aldermoor hot spots, alert, big figure ---- */
.ho-c{background:linear-gradient(180deg,#f5f8fd,#eaf1fb);color:#0E1424}
.ho-c__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;align-items:center}
.ho-c .ho-h1{font-size:clamp(38px,4vw,58px)}.ho-c .ho-h1 span{display:block;color:#1353E9}
.ho-c .ho-sub{color:#3d4763}
.ho-c__scene{position:relative}
.ho-c__bld{width:118%;margin-left:-6%;height:auto;display:block}
.ho-c__scene .ho-hot{position:absolute;left:calc(-6% + var(--x)*1.18);top:var(--y);width:calc(70px*var(--s));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:multiply;animation:hoGlow 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)}
.ho-hot--r{background:radial-gradient(circle,rgba(219,75,70,.9),rgba(219,75,70,.3) 45%,transparent 70%)}
.ho-hot--y{background:radial-gradient(circle,rgba(247,202,80,.95),rgba(247,202,80,.3) 45%,transparent 70%)}
.ho-c__alert{position:absolute;left:-2%;top:-2%;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #f3c9c7;border-left:5px solid #DB4B46;border-radius:14px;padding:12px 16px;box-shadow:0 18px 40px rgba(14,20,36,.14);max-width:330px}
.ho-c__alert small{display:block;font-size:11.5px;font-weight:800;color:#DB4B46;text-transform:uppercase;letter-spacing:.08em}
.ho-c__alert b{display:block;font-size:16px}.ho-c__alert span:not(.ho-c__dot){font-size:13.5px;color:#5b6582}
.ho-c__dot{flex:none;margin-top:4px;width:12px;height:12px;border-radius:50%;background:#DB4B46;animation:hoPing 1.6s infinite}
.ho-c__money{position:absolute;right:-2%;bottom:-4%;background:#0f172a;color:#fff;border-radius:18px;padding:16px 20px;max-width:300px;box-shadow:0 24px 50px rgba(14,20,36,.3)}
.ho-c__money small{display:block;font-size:11.5px;color:#98C355;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.ho-c__money b{display:block;font-size:46px;font-weight:800;line-height:1.05;color:#F7CA50}.ho-c__money span{display:block;font-size:13.5px;color:#c6cfe2;margin:4px 0 8px}
.ho-c__money em{display:flex;gap:6px;align-items:center;font-style:normal;font-size:13px;font-weight:700;color:#98C355}.ho-c__money svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}
.ho-c__note{position:absolute;left:0;bottom:-8%;margin:0;font-size:11.5px;color:#5b6582}

/* entrance */
.ho [class*="__alert"],.ho [class*="__money"],.ho-a__meter,.ho-tag{animation:hoIn .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.5s}
.ho-c__money{animation-delay:.9s}
@keyframes hoIn{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.ho *,.ho *::before{animation:none!important}.ho-leak b{opacity:0}.ho-b__rain{display:none}}

/* phone */
@media (max-width:767px){
	.ho{align-items:flex-start;padding:22px 0 26px!important}
	.ho-sub{font-size:15.5px;margin-bottom:14px}.ho-btn{width:100%;font-size:16.5px;min-height:58px;padding:0 16px}.ho-cta{align-items:stretch;text-align:center}
	.ho-a{flex-direction:column}.ho-a .ho-h1{font-size:38px}
	.ho-a__scene{position:relative;right:auto;top:auto;transform:none;width:118%;margin:0 -9% 8px;order:-1}
	.ho-tag{font-size:10.5px;padding:4px 7px}.ho-tag strong{font-size:11px}.ho-leak:nth-child(3) .ho-tag,.ho-leak:nth-child(5) .ho-tag{display:none}
	.ho-a__meter{right:9%;bottom:-14%;min-width:0;padding:8px 12px}.ho-a__meter b{font-size:28px}
	.ho-a .ho-urgent{font-size:14.5px;margin-bottom:14px}.ho-a__copy{margin-top:30px}
	.ho-b .ho-h1{font-size:28px}.ho-b__num{font-size:68px}.ho-b__cap{font-size:15.5px;margin-bottom:12px}
	.ho-b__parts{gap:6px}.ho-b__parts li{padding:7px 10px;font-size:12px;max-width:none;width:100%}.ho-b__parts b{font-size:14px;display:inline;margin-right:6px}
	.ho-c__grid{grid-template-columns:1fr;gap:6px}.ho-c__scene{order:-1;margin:44px 0 54px}.ho-c .ho-h1{font-size:34px}
	.ho-c__alert{top:-44px;max-width:270px;padding:8px 12px}.ho-c__alert b{font-size:14px}
	.ho-c__money{bottom:-58px;padding:10px 14px;max-width:210px}.ho-c__money b{font-size:30px}.ho-c__money span{display:none}.ho-c__note{display:none}
}

/* ---- A1/A2/A3: Hero A tune-ups (size switch + coming failure on Ice compressor 2). Scoped to .ho-ax so A stays as is. ---- */
.ho-ax{--sp:3s;--gs:1;--fc:#98C355;--rem:1}
.ho-ax .ho-leak b{animation-duration:var(--sp)}
.ho-ax .ho-leak i{scale:var(--gs);transition:scale .6s ease}
.hx-meter{bottom:-9%;padding:12px 16px 12px;min-width:286px}
.hx-meter b{font-size:40px}
.hx-size{display:flex;gap:4px;padding:3px;margin:0 0 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.hx-size button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:46px;padding:4px 6px 5px;border:0;border-radius:9px;background:transparent;color:#8f9ab5;font-family:inherit;font-weight:600;font-size:12.5px;line-height:1;cursor:pointer;transition:background .25s,color .25s}
.hx-size svg{width:30px;height:24px;fill:currentColor;opacity:.75}
.hx-size button:hover{color:#fff}
.hx-size button[aria-pressed="true"]{background:#4DAAE8;color:#06101f}
.hx-size button[aria-pressed="true"] svg{opacity:1}
.hx-size button:focus-visible{outline:2px solid #F7CA50;outline-offset:2px}
.hx-meter .hx-cap{display:block;margin-top:7px;font-size:11.5px;line-height:1.35;color:#8f9ab5;text-transform:none;letter-spacing:0;max-width:260px}
.hx-meter .hx-cap span{color:#c6cfe2;font-weight:600}

.hx-fx{position:absolute;left:var(--x);top:var(--y);z-index:3;transform:translate(26px,-50%)}
.hx-fx::before{content:"";position:absolute;right:100%;top:50%;width:22px;border-top:1px dashed var(--fc);opacity:.8}
.hx-card{display:flex;align-items:center;gap:11px;padding:10px 13px 10px 11px;border-radius:14px;background:rgba(9,14,28,.86);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--fc);box-shadow:0 16px 40px rgba(0,0,0,.45);backdrop-filter:blur(6px);transition:border-color .5s;animation:hoIn .7s cubic-bezier(.2,.8,.2,1) both .7s}
.hx-body{display:flex;flex-direction:column;min-width:150px}
.hx-body strong{color:#fff;font-size:13.5px;line-height:1.25}
.hx-body small{color:#8f9ab5;font-size:11.5px;line-height:1.3}
.hx-state{margin-top:3px;font-size:12.5px;font-weight:700;color:var(--fc);display:flex;align-items:center;gap:6px;transition:color .5s}
.hx-motor{flex:none;width:40px;height:32px;fill:none;stroke:#c6cfe2;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hx-motor rect:first-child{fill:rgba(77,170,232,.12)}
.hx-motor .hx-fin{stroke:rgba(198,207,226,.5)}
.hx-motor .hx-rot{transform-origin:35px 16px;transform-box:view-box;animation:hxSpin .5s linear infinite;stroke:var(--fc)}
@keyframes hxSpin{to{rotate:360deg}}
[data-lv="2"] .hx-motor{animation:hxShake .14s linear infinite}
@keyframes hxShake{25%{translate:.8px 0}75%{translate:-.8px 0}}
/* A1 bar */
.hx-bar{display:block;height:6px;margin-top:6px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.hx-bar em{display:block;height:100%;width:calc(var(--rem)*100%);border-radius:inherit;background:var(--fc);transition:background .5s;box-shadow:0 0 10px var(--fc)}
[data-lv="2"] .hx-bar em{animation:hxBlink 1s ease-in-out infinite}
@keyframes hxBlink{50%{opacity:.45}}
/* A2 ring */
.hx-ring{position:relative;flex:none;width:58px;height:58px;display:grid;place-items:center}
.hx-ring svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.hx-ring circle{fill:none;stroke-width:4.5}
.hx-ring__bg{stroke:rgba(255,255,255,.1)}
.hx-ring__fg{stroke:var(--fc);stroke-linecap:round;transition:stroke .5s;filter:drop-shadow(0 0 4px var(--fc))}
.hx-ring .hx-motor{width:30px;height:24px}
.hx-warn{display:none;width:17px;height:17px;border-radius:50%;background:#DB4B46;color:#fff;font-size:11.5px;line-height:17px;text-align:center;animation:hoPing 1.2s infinite}
[data-lv="1"] .hx-warn{display:inline-block;background:#F7CA50;color:#06101f;animation:none}
[data-lv="2"] .hx-warn{display:inline-block}
[data-lv="2"] .hx-card{animation:hxAlarm 1.2s ease-in-out infinite}
@keyframes hxAlarm{50%{box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 3px rgba(219,75,70,.35)}}
/* A3 vibration trace + heat */
.hx-wave{display:block;width:160px;height:24px;margin-top:3px;overflow:visible}
.hx-wave path{fill:none;stroke:var(--fc);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--fc))}
.hx-heat{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:1}
.hx-heat i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(219,75,70,.55),rgba(247,202,80,.18) 50%,transparent 70%);scale:calc(.5 + (1 - var(--rem))*1.6);opacity:calc(.25 + (1 - var(--rem))*.75);mix-blend-mode:screen}
.hx-heat i+i{animation:hxRipple 2.2s ease-out infinite;background:none;border:1.5px solid rgba(219,75,70,.6)}
.hx-heat i+i+i{animation-delay:1.1s}
@keyframes hxRipple{from{scale:.4;opacity:.9}to{scale:calc(1.4 + (1 - var(--rem))*1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hx-meter,.hx-card{animation:none!important}}
@media (max-width:1100px) and (min-width:768px){.hx-fx{transform:translate(18px,-50%) scale(.88);transform-origin:left center}}
@media (max-width:767px){
	.ho-ax .ho-a__scene{transform:none;margin-bottom:14px}
	.hx-fx{transform:translate(14px,-50%) scale(.78);transform-origin:left center}
	.hx-fx::before{width:14px}
	.ho-ax .ho-leak:nth-child(4) .ho-tag{display:none}
	.hx-meter{position:relative;right:auto;bottom:auto;margin:-4px 11% 0;min-width:0;padding:8px 10px 9px}
	.hx-meter .hx-size{margin:0 0 6px}
	.hx-size button{flex-direction:row;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:13px}
	.hx-size svg{width:22px;height:18px}
	.hx-meter>div[aria-hidden]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 10px}
	.hx-meter>div[aria-hidden] small{grid-column:1}.hx-meter>div[aria-hidden] b{grid-column:2;grid-row:1/3;justify-self:end;font-size:26px}
	.hx-meter>div[aria-hidden] i{grid-column:1/-1;margin-top:5px}
	.hx-meter .hx-cap{margin-top:5px;font-size:10.5px;max-width:none}
	.ho-ax .ho-a__copy{margin-top:16px}
}
.ho-ax .ho-a__copy{pointer-events:none}.ho-ax .ho-a__copy>*{pointer-events:auto}
@media (min-width:768px) and (max-height:700px){.hx-size svg{display:none}.hx-size button{min-height:34px}.hx-meter{bottom:-4%;padding:9px 14px}.hx-meter b{font-size:32px}.hx-size{margin-bottom:6px}}

/* ---- A4: combined compressor card, story cards, a different example facility per size ---- */
.ho-a4 .hx4-img{position:absolute;inset:0;opacity:0;scale:.94;transition:opacity .9s ease,scale 1.1s cubic-bezier(.2,.8,.2,1)}
.ho-a4 .hx4-img--m{position:relative}
.ho-a4 .hx4-img.is-on{opacity:1;scale:1}
.ho-a4 .hx4-img--l:not(.is-on){scale:1.06}
.ho-a4 .hx4-pt{transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1),opacity .4s}
.ho-a4 .hx4-pt[hidden]{display:block;opacity:0;pointer-events:none;visibility:hidden}
.ho-a4 .ho-leak.is-hot i{background:radial-gradient(circle,rgba(247,202,80,.95) 0,rgba(219,75,70,.45) 45%,transparent 70%)}
.hx4-comp{transform:translate(24px,-50%)}
.hx4-comp.is-flip{transform:translate(calc(-100% - 24px),-50%)}
.hx4-comp.is-flip::before{right:auto;left:100%}
.hx4-card{flex-direction:column;align-items:stretch;gap:6px;width:236px;padding:10px 13px 11px}
.hx4-head{display:flex;align-items:center;gap:10px}
.hx4-head div{display:flex;flex-direction:column}
.hx4-head strong{color:#fff;font-size:13.5px;line-height:1.2}
.hx4-head small,.hx4-row small{color:#8f9ab5;font-size:11px;line-height:1.3}
.hx4-row{display:flex;flex-direction:column;padding-top:5px;border-top:1px solid rgba(255,255,255,.07)}
.hx4-row .hx-wave{width:100%;height:22px}
.hx4-row .hx-bar{height:7px}
.hx4-row .hx-state{margin-top:4px}
/* story cards: one at a time, above their point */
.hx4-story{position:absolute;left:var(--x);top:var(--y);z-index:4;width:0;height:0;pointer-events:none}
.hx4-sc{position:absolute;left:0;bottom:16px;translate:-50% 0;width:196px;padding:9px 11px 8px;border-radius:14px;background:rgba(9,14,28,.88);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--sc,#F7CA50);box-shadow:0 16px 40px rgba(0,0,0,.45);backdrop-filter:blur(6px);display:flex;flex-direction:column;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.hx4-sc::after{content:"";position:absolute;left:50%;top:100%;height:14px;border-left:1px dashed var(--sc,#F7CA50);opacity:.8}
.hx4-story.is-on .hx4-sc{opacity:1;transform:none}
.hx4-sc strong{color:#fff;font-size:13px;line-height:1.2}
.hx4-sc small{color:#8f9ab5;font-size:11px;line-height:1.3}
.hx4-svg{width:100%;height:auto;margin-top:5px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hx4-svg text{font:800 14px/1 inherit;stroke:none}
.hx4-frame{stroke:rgba(198,207,226,.45);stroke-width:1.4}
[data-story="heat"]{--sc:#DB4B46}[data-story="light"]{--sc:#F7CA50}[data-story="pool"]{--sc:#4DAAE8}
/* heaters */
.hx4-cal circle{fill:rgba(198,207,226,.45)}
.hx4-cell{fill:rgba(198,207,226,.16)}
.hx4-empty{stroke:#DB4B46;stroke-width:1.4;stroke-dasharray:2 2;animation:hx4Blink 1.4s ease-in-out infinite}
.hx4-heater rect{fill:rgba(219,75,70,.18);stroke:#DB4B46;stroke-width:1.4}.hx4-heater path{stroke:rgba(219,75,70,.7);stroke-width:1.2}
.hx4-waves path{stroke:#F7CA50;stroke-width:1.8;animation:hx4Rise var(--sp,3s) ease-out infinite;filter:drop-shadow(0 0 3px #DB4B46)}
.hx4-waves path:nth-child(2){animation-delay:calc(var(--sp,3s)*-.33)}.hx4-waves path:nth-child(3){animation-delay:calc(var(--sp,3s)*-.66)}
.hx4-fill{fill:#98C355;transform-box:fill-box;transform-origin:50% 100%;animation:hx4Drain calc(var(--sp,3s)*2.4) cubic-bezier(.5,0,.9,.6) infinite}
.hx4-tank text{fill:#fff}
/* lights */
.hx4-clock circle:not(.hx4-frame){fill:#c6cfe2}
.hx4-late{stroke:#DB4B46;stroke-width:3;stroke-dasharray:0 100;animation:hx4Late calc(var(--sp,3s)*2.4) linear infinite}
.hx4-close{stroke:#fff;stroke-width:2}
.hx4-hand{stroke:#fff;stroke-width:1.8;transform-origin:30px 36px;animation:hx4Hand calc(var(--sp,3s)*2.4) linear infinite}
.hx4-hand2{stroke:#c6cfe2;stroke-width:2.2;transform-origin:30px 36px;animation:hx4Hand2 calc(var(--sp,3s)*2.4) linear infinite}
.hx4-moon path{fill:#c6cfe2;stroke:none;opacity:.8}
.hx4-wire{stroke:rgba(198,207,226,.45);stroke-width:1.2}
.hx4-bulb{fill:#F7CA50;filter:drop-shadow(0 0 6px #F7CA50);animation:hx4Glow 1.2s ease-in-out infinite;animation-delay:var(--d)}
.hx4-ray{stroke:#F7CA50;stroke-width:1.6;animation:hx4Blink 1.2s ease-in-out infinite;animation-delay:var(--d)}
.hx4-coins ellipse{fill:#F7CA50;stroke:#a77f15;stroke-width:1}
.hx4-coins g{opacity:0;animation:hx4Coin calc(var(--sp,3s)*2.4) ease-out infinite;animation-delay:calc(var(--j)*var(--sp,3s)*.4)}
.hx4-coins text{fill:#F7CA50}
/* pool */
.hx4-arc{stroke:rgba(198,207,226,.18);stroke-dasharray:2 4}
.hx4-moon2{offset-path:path("M4 18c30-16 80-16 110 0");animation:hx4Moon calc(var(--sp,3s)*3) linear infinite}.hx4-moon2 path{fill:#c6cfe2;stroke:none}
.hx4-imp{transform-origin:37px 45px;animation:hxSpin calc(var(--sp,3s)*.12) linear infinite}.hx4-imp circle{stroke:#4DAAE8;stroke-width:1.4}.hx4-imp path{stroke:#4DAAE8;stroke-width:1.6}
.hx4-pipe{stroke:rgba(77,170,232,.6);stroke-width:2.2}
.hx4-water path{stroke:#4DAAE8;stroke-width:1.6;opacity:.75;animation:hx4Flow 1.2s linear infinite}.hx4-water path+path{opacity:.4;animation-duration:1.6s}
.hx4-drops text{fill:#F7CA50;opacity:0;animation:hx4Drop calc(var(--sp,3s)*.8) ease-in infinite;animation-delay:calc(var(--j)*var(--sp,3s)*.2)}
.hx4-pile{fill:#F7CA50;transform-box:fill-box;transform-origin:50% 100%;animation:hx4Pile calc(var(--sp,3s)*3) linear infinite}
@keyframes hx4Blink{50%{opacity:.35}}
@keyframes hx4Glow{50%{filter:drop-shadow(0 0 11px #F7CA50);opacity:.85}}
@keyframes hx4Rise{0%{opacity:0;transform:translateY(6px)}30%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes hx4Drain{0%{scale:1 1;fill:#98C355}55%{fill:#F7CA50}85%,100%{scale:1 .04;fill:#DB4B46}}
@keyframes hx4Late{0%,30%{stroke-dasharray:0 100}100%{stroke-dasharray:100 100}}
@keyframes hx4Hand{from{rotate:-120deg}to{rotate:90deg}}
@keyframes hx4Hand2{from{rotate:30deg}to{rotate:47deg}}
@keyframes hx4Coin{0%{opacity:0;translate:0 -10px}12%,80%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes hx4Moon{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes hx4Flow{to{translate:-16px 0}}
@keyframes hx4Drop{0%{opacity:0;translate:0 -6px}30%{opacity:1}100%{opacity:0;translate:0 18px}}
@keyframes hx4Pile{from{scale:1 .1}to{scale:1 1}}
@media (prefers-reduced-motion:reduce){.ho-a4 .hx4-img,.ho-a4 .hx4-pt,.hx4-sc{transition:none}.hx4-svg *{animation:none!important}.hx4-coins g,.hx4-drops text{opacity:1}.hx4-late{stroke-dasharray:60 100}.hx4-moon2{offset-distance:60%}}
@media (max-width:1100px) and (min-width:768px){.hx4-comp{transform:translate(18px,-50%) scale(.86);transform-origin:left center}.hx4-comp.is-flip{transform:translate(calc(-100% - 18px),-50%) scale(.86);transform-origin:right center}.hx4-sc{scale:.86;transform-origin:50% 100%}}
@media (max-width:767px){
	.hx4-comp{transform:translate(12px,-50%) scale(.68);transform-origin:left center}
	.hx4-comp.is-flip{transform:translate(calc(-100% - 12px),-50%) scale(.68);transform-origin:right center}
	.hx4-sc{width:170px;scale:.8;transform-origin:50% 100%;bottom:12px}
	.hx4-story.is-flip .hx4-sc{translate:-82% 0}
}