.hero,.hero-content{min-height:clamp(460px,40vw,640px)}.hero-scene{aspect-ratio:1983/793}.hero-copy{align-self:flex-start;padding-top:55px;max-width:430px}.hero h1{font-size:30px}.hero-assurances{width:400px}.hero-cta{left:32px;right:auto;bottom:32px;text-align:left;max-width:280px}.hero-cta p{font-size:16px;margin-bottom:10px}.lighting-control{top:18px;bottom:auto;right:22px}.hero-scene>.rgb-chase{position:absolute;inset:0;opacity:0;pointer-events:none;filter:none;transition:opacity .3s}.hero.lights-on .rgb-chase{opacity:1;animation:rgbWave 4.8s linear infinite}.rgb-chase-0{clip-path:polygon(46% 82.5%,52.6% 77%,53.5% 83%,47.3% 89%)}.rgb-chase-1{clip-path:polygon(54% 80.5%,60.7% 79.2%,61.3% 85.8%,54% 88%)}.rgb-chase-2{clip-path:polygon(60.5% 82.7%,67% 86%,66.8% 92.5%,60.2% 89.4%)}.hero.lights-on .rgb-chase-1{animation-delay:-.3s}.hero.lights-on .rgb-chase-2{animation-delay:-.6s}@keyframes rgbWave{0%{filter:hue-rotate(0deg) brightness(1)}25%{filter:hue-rotate(90deg) brightness(1)}50%{filter:hue-rotate(180deg) brightness(1)}75%{filter:hue-rotate(270deg) brightness(1)}100%{filter:hue-rotate(360deg) brightness(1)}}@media(prefers-reduced-motion:reduce){.hero.lights-on .rgb-chase{animation:none}}@media(max-width:900px){.hero-copy{padding-top:28px;max-width:350px}.hero h1{font-size:25px}.hero-assurances{width:320px}.hero-cta{bottom:22px}}@media(max-width:650px){.hero,.hero-content{min-height:600px}.hero-cta{display:none}.lighting-control{top:auto;bottom:12px}.hero-copy{padding-top:22px}.hero h1{font-size:28px}}
.hero.lights-on .hero-scene>.building-on{opacity:1}
.hero.lights-on .hero-scene>.rgb-chase{opacity:.62}
.hero-scene>.module-fixed-plate{position:absolute;inset:0;clip-path:polygon(30% 75%,44% 75%,45% 78%,67% 78%,67% 94%,30% 94%);pointer-events:none}
.module-emission{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s}.hero.lights-on .module-emission{opacity:1}.rgb-emission{animation:moduleTone 6s linear infinite}.rgb-emission-b{animation-delay:-.6s}.rgb-emission-c{animation-delay:-1.2s}@keyframes moduleTone{to{filter:hue-rotate(360deg)}}@media(prefers-reduced-motion:reduce){.rgb-emission{animation:none}}
.real-products{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(2px 4px 3px #0005)}
.hero-scene>.approved-rgb{position:absolute;inset:0;pointer-events:none;opacity:0}.hero.lights-on .approved-rgb{opacity:1;animation:moduleTone 6s linear infinite}.approved-rgb-0{clip-path:polygon(71.9% 86.1%,81% 81%,81.7% 87.4%,72.5% 93%)}.approved-rgb-1{clip-path:polygon(81.8% 89.7%,91.3% 85.4%,91.8% 92.1%,81.9% 97%)}.hero.lights-on .approved-rgb-1{animation-delay:-.65s}@media(prefers-reduced-motion:reduce){.hero.lights-on .approved-rgb{animation:none}}
.hero-scene>.clean-floodlight{position:absolute;inset:0;clip-path:polygon(80.2% 29.8%,97.3% 30.6%,98.9% 66.5%,94.8% 67%,78.5% 61%);pointer-events:none}.floodlight-emission{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .25s}.hero.lights-on .floodlight-emission{opacity:1}
.hero.lights-on .floodlight-emission>rect{filter:drop-shadow(0 0 2px #e7f8ff) drop-shadow(0 0 5px #d5f0ff)}.hero.lights-on .floodlight-emission>path{opacity:.75;filter:drop-shadow(0 0 9px #d5f0ff)}
.hero-scene>.original-red-tape{position:absolute;inset:0;pointer-events:none;clip-path:polygon(82.4% 74%,87.2% 70%,88.5% 66%,94% 65.8%,99% 75%,98.8% 85.4%,93% 89%,82% 87%)}.hero-scene>.wifi-controller{position:absolute;left:61.5%;top:80.5%;width:9.2%;height:auto;filter:drop-shadow(2px 5px 3px #0007);transform:rotate(8deg)}.hero.lights-on .hero-scene>.wifi-controller{filter:drop-shadow(2px 5px 3px #0007)}
.hero-scene>.wifi-controller{left:59%;top:80%;width:11.5%}.hero-scene>.small-control-bars{position:absolute;inset:0;pointer-events:none;clip-path:polygon(31.7% 65.3%,78.2% 37.4%,79.3% 47.2%,32% 75.6%)}.precise-bar-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.localized-emitters{opacity:0;transition:opacity .3s}.hero.lights-on .localized-emitters{opacity:1}.color-wave-a,.color-wave-b{animation:moduleTone 6s linear infinite}.color-wave-b{animation-delay:-.65s}@media(prefers-reduced-motion:reduce){.color-wave-a,.color-wave-b{animation:none}}
.hero.lights-on .color-wave-a ellipse[filter],.hero.lights-on .color-wave-b ellipse[filter]{opacity:.9;rx:29px;ry:31px}
.hero.lights-on .color-wave-a,.hero.lights-on .color-wave-b{filter:brightness(1.18);animation-name:rgbLensGlow}
@keyframes rgbLensGlow{from{filter:hue-rotate(0deg) brightness(1.18)}to{filter:hue-rotate(360deg) brightness(1.18)}}
.hero.lights-on .precise-bar-lights .color-wave-a ellipse:not([filter]),.hero.lights-on .precise-bar-lights .color-wave-b ellipse:not([filter]){opacity:.12;mix-blend-mode:screen}
.hero.lights-on .precise-bar-lights .color-wave-a ellipse[filter],.hero.lights-on .precise-bar-lights .color-wave-b ellipse[filter]{opacity:.42;rx:25px;ry:27px;mix-blend-mode:screen}
.hero .hero-cta{max-width:390px}
.hero .hero-cta p{font-size:clamp(24px,2.25vw,34px);font-weight:800;line-height:1.35;margin-bottom:16px;text-shadow:0 2px 8px #0009}
.hero .hero-cta p{font-style:normal}
.hero-action-row{display:flex;align-items:center;gap:14px}
.hero .hero-cta .lighting-control{position:static;padding:0;background:transparent;border:0;box-shadow:none}
.hero .hero-cta .lighting-control>span{display:none}
.hero .hero-cta .lighting-control button{min-height:44px;padding:8px 14px;white-space:nowrap}
.hero-action-row .primary{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.hero.lights-on .precise-bar-lights .color-wave-a,.hero.lights-on .precise-bar-lights .color-wave-b{animation:none;filter:none}
.rainbow-lens{animation:rainbowLensTravel 6s linear infinite;animation-delay:var(--rainbow-phase);animation-play-state:paused}
.hero.lights-on .rainbow-lens{animation-play-state:running}
@keyframes rainbowLensTravel{from{filter:hue-rotate(0deg) brightness(1.18)}to{filter:hue-rotate(360deg) brightness(1.18)}}
@media(prefers-reduced-motion:reduce){.hero.lights-on .rainbow-lens{animation-play-state:paused}}
.hero .hero-cta p{font-size:clamp(32px,3vw,44px);font-weight:900;line-height:1.2}
.hero .hero-cta{max-width:480px}
#hero .hero-cta p{font-size:clamp(32px,3vw,44px);font-weight:200;line-height:1.2;font-style:normal}
#hero .hero-cta{max-width:480px}
#hero .hero-cta p{font-family:'Noto Sans Thai',Tahoma,sans-serif;font-weight:200;text-shadow:0 1px 4px #0008}
#hero .lighting-control #lightToggle i{position:relative;display:block;flex:0 0 38px;width:38px;height:22px;border-radius:12px;background:#526579;box-shadow:inset 0 1px 3px #0005;transition:background .25s}
#hero .lighting-control #lightToggle i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#e3e9ef;box-shadow:0 1px 3px #0005;transform:translateX(0);transition:transform .25s ease,background .25s,box-shadow .25s}
#hero.lights-on .lighting-control #lightToggle i{background:#9bdfff}
#hero.lights-on .lighting-control #lightToggle i::after{transform:translateX(16px);background:#008dff;box-shadow:0 0 8px #00baff8a}
@media(prefers-reduced-motion:reduce){#hero .lighting-control #lightToggle i,#hero .lighting-control #lightToggle i::after{transition:none}}
#hero .hero-cta .lighting-control #lightToggle{min-height:34px;padding:5px 10px;gap:7px;font-size:11px;border:0;outline:none;box-shadow:none;background:rgba(226,243,252,.65);color:#23465e;backdrop-filter:blur(6px);transition:background .25s,transform .2s}
#hero .hero-cta .lighting-control #lightToggle:hover{background:rgba(237,248,255,.8)}
#hero .hero-cta .lighting-control #lightToggle:focus-visible{background:rgba(246,252,255,.95);outline:none;box-shadow:none}
#hero .hero-cta .lighting-control #lightToggle:active{transform:scale(.96)}
#hero .hero-cta .lighting-control #lightToggle .sun{font-size:16px}
#hero .hero-cta .lighting-control #lightToggle i{flex-basis:32px;width:32px;height:18px}
#hero .hero-cta .lighting-control #lightToggle i::after{width:12px;height:12px}
#hero.lights-on .hero-cta .lighting-control #lightToggle i::after{transform:translateX(14px)}
.hero-logo-wrap{position:relative;width:245px;max-width:100%}.hero-logo-wrap .hero-logo{display:block;width:100%}
.hero-logo-rainbow{position:absolute;inset:0;pointer-events:none;opacity:0;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;background:linear-gradient(90deg,#ff6099,#ffd36a,#adff86,#6cf2ff,#91a2ff,#f58dff,#ff6099);background-size:200% 100%;mix-blend-mode:color;transition:opacity .3s}
#hero.lights-on .hero-logo-rainbow{opacity:1;animation:brandRainbowFlow 6s linear infinite}
#hero.lights-on .hero-cta p{background:linear-gradient(90deg,#ff86b1,#ffde91,#baff9d,#91f5ff,#a9b6ff,#ffacff,#ff86b1);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;animation:brandRainbowFlow 6s linear infinite}
@keyframes brandRainbowFlow{from{background-position:200% 0}to{background-position:0% 0}}
@media(max-width:650px){.hero-logo-wrap{width:180px}}
@media(prefers-reduced-motion:reduce){#hero.lights-on .hero-logo-rainbow,#hero.lights-on .hero-cta p{animation:none}}