html{scroll-behavior:smooth}html[data-theme=dark] body{background:#060e1b;color:#edf5ff}.preview-ribbon{background:#091a2e;color:#80b4df;font-size:10px;letter-spacing:2px;padding:8px 20px}.preview-ribbon span{letter-spacing:0;color:#9fb3cc}html[data-theme=dark] header{background:#081220;border-bottom:1px solid #1c3148}header .header-inner{padding-top:20px;padding-bottom:20px}header nav.wrap{background:transparent;border-top:1px solid #213044;border-radius:0;height:58px}nav>a,nav>button{font-size:14px!important}nav .active{background:transparent!important;color:#6ec5ff!important;border-radius:0;border-bottom:2px solid #43acff!important}nav .calculator-link{color:#83ccff}#themeToggle{display:none!important}.hero{isolation:isolate;background:#061020;overflow:hidden}.hero,.hero-content{min-height:650px!important}.hero-scene{inset:0!important;transform:none!important;width:100%!important;height:100%!important;aspect-ratio:auto!important}.hero-scene>img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.88)!important}.hero-shade{background:linear-gradient(90deg,#030e1df5 0%,#051224e0 22%,#05122455 48%,transparent 72%),linear-gradient(0deg,#060e1b,transparent 20%)!important}.hero-content{display:flex!important;align-items:center!important;position:relative}.hero-copy{padding:68px 0!important;max-width:540px!important;text-shadow:none!important;align-self:center!important}.hero-copy .home-eyebrow{color:#80ccff;font-size:11px;letter-spacing:3px;margin-bottom:26px}.hero-copy h1{font-size:clamp(42px,4.6vw,68px)!important;font-weight:500;line-height:1.32!important;letter-spacing:-1.5px;margin:0 0 22px}.hero-copy h1 span{color:#6ec8ff}.hero-copy>p{font-size:17px!important;color:#b5c8dd!important;max-width:375px;line-height:1.9!important}.hero-copy .hero-cta{position:static!important;margin:30px 0 0!important;max-width:100%!important;text-align:left}.hero-action-row{gap:12px}.hero .primary{background:#137ddd;border:1px solid #3caaff;box-shadow:0 10px 40px #0077ff25;border-radius:4px;padding:15px 26px!important;font-size:15px}.home-secondary{display:inline-block;margin-top:20px;color:#d2e7fa;font-size:13px;border-bottom:1px solid #779db766;padding-bottom:5px}.home-strip{display:flex;justify-content:space-around;gap:25px;padding:28px 6%;border-bottom:1px solid #1a2a3e;background:#091423;color:#5897c5;font-size:12px;letter-spacing:1px}.home-strip b{color:#bacbde;font-weight:400;margin-left:15px;font-size:14px;letter-spacing:0}.section{padding-top:65px!important;padding-bottom:15px}.section-heading{margin-bottom:26px!important}.section-heading .eyebrow{display:block!important;letter-spacing:3px;font-size:10px;margin-bottom:12px;color:#64baf7}.section-heading h2{font-size:30px;font-weight:500}.category-grid{gap:12px}.category{background:#0d1c2e!important;border:1px solid #20344d!important;border-radius:6px!important;padding:16px 8px!important}.category:hover{border-color:#5bbcff!important;transform:translateY(-3px)}.category strong{font-size:13px!important}.product-card{border-radius:9px!important;background:#0b1a2b!important;border-color:#223750!important}.quote-banner{margin-top:65px;margin-bottom:65px;padding:40px;background:linear-gradient(110deg,#12395b,#0a1a2f)!important;border:1px solid #244c71;border-radius:8px}.quote-banner h2{font-size:30px}footer{background:#050b14!important;border-top:1px solid #1b2d42}.primary:active{transform:translateY(2px)}a:focus-visible,button:focus-visible{outline:2px solid #83d4ff;outline-offset:4px}
@media(max-width:900px){header nav.wrap{overflow-x:auto;justify-content:flex-start;gap:10px}nav>a,nav>button{flex-shrink:0}.hero-copy{max-width:440px!important}.hero-shade{background:linear-gradient(90deg,#030e1df0,#051224a0 50%,#05122420)!important}.home-strip{padding:22px;gap:16px}.home-strip b{font-size:12px;margin-left:5px}}
@media(max-width:650px){.hero,.hero-content{min-height:710px!important}.hero-content{align-items:flex-start!important}.hero-copy{padding:35px 0!important;align-self:flex-start!important;max-width:100%!important}.hero-copy h1{font-size:42px!important}.hero-copy>p{font-size:15px!important;max-width:300px}.hero-copy .home-eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:18px}.hero-scene{top:auto!important;bottom:0!important;height:330px!important}.hero-scene>img{object-position:65% center}.hero-shade{background:linear-gradient(180deg,#061020 0%,#061020 49%,transparent 75%)!important}.hero-copy .hero-cta{display:block!important;margin-top:20px!important}.home-secondary{margin-top:12px}.home-strip{display:grid;grid-template-columns:1fr;padding:20px;gap:12px}.section{padding-top:36px!important}.section-heading h2{font-size:24px}.quote-banner{margin:35px 18px!important;padding:25px}.quote-banner h2{font-size:24px}.contact-top{display:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.category{transition:none}}
#hero .hero-logo,#hero .hero-assurances,#hero .hero-cta>p{display:none!important}#hero .hero-scene>img{object-position:right center}#hero .hero-copy{padding:50px 0!important}#hero .hero-copy h1{margin-bottom:20px!important}
/* Preserve original lighting layers together at the source image ratio. */
#hero .hero-scene{left:auto!important;right:0!important;top:auto!important;bottom:0!important;width:max(100%,1625px)!important;height:auto!important;aspect-ratio:1983/793!important}
#hero .hero-scene>img{object-fit:fill!important;filter:brightness(.65)!important}
#hero.lights-on .hero-scene>img{filter:brightness(1.05)!important}
#hero .hero-action-row{flex-wrap:wrap;align-items:center;gap:16px}
#hero .hero-action-row .lighting-control{display:flex!important;position:static!important;margin:0!important}
#hero .hero-action-row #lightToggle{background:#142f49!important;color:#deefff!important;border:1px solid #5d91ba!important;border-radius:24px!important;min-height:46px!important;padding:9px 15px!important;font-size:14px!important;box-shadow:0 3px 16px #0003!important}
#hero .hero-action-row #lightToggle:focus-visible{outline:2px solid #a4dfff!important;outline-offset:4px!important}
#hero.lights-on .hero-action-row #lightToggle{background:#d3efff!important;color:#06325b!important;border-color:#a4dfff!important}
@media(max-width:650px){#hero .hero-scene{width:825px!important;height:330px!important}#hero .hero-action-row{gap:10px}#hero .hero-action-row #lightToggle{min-height:44px!important}}@media(max-width:1100px){header .contact-top{display:none!important}.header-inner{min-width:0}header form[role=search]{min-width:0;flex:1}header nav.wrap{overflow-x:auto;justify-content:flex-start}header nav>a,header nav>button{flex-shrink:0}}
/* Two-line, loopless Thai display headline. */
#hero .hero-copy{max-width:660px!important}
#hero .hero-copy h1{font-family:'Kanit','Noto Sans Thai',Tahoma,sans-serif!important;font-weight:400!important;font-size:clamp(30px,4.1vw,56px)!important;line-height:1.45!important;letter-spacing:0!important}
#hero .hero-copy h1 .headline-line{display:block;white-space:nowrap;color:#f2f7ff}
#hero .hero-copy h1 .headline-accent{color:#6ec8ff}
@media(max-width:650px){#hero .hero-copy h1{font-size:clamp(21px,6.2vw,38px)!important}}
#hero .rgb-globes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:multiply}
#hero.lights-on .rgb-globes{opacity:.9}
#hero .rgb-globe{animation:globeRgbCycle 6s linear infinite;animation-play-state:paused;transform-origin:center}
#hero.lights-on .rgb-globe{animation-play-state:running}
@keyframes globeRgbCycle{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#hero .rgb-globe{animation:none}}
/* Luminous RGB: white-hot diffuser with a pastel edge and emitted glow. */
#hero .rgb-globes{mix-blend-mode:normal}
#hero.lights-on .rgb-globes{opacity:1}
#hero .rgb-globe path{filter:drop-shadow(0 0 5px #ffbdd8) drop-shadow(0 0 13px #ff76b080)}
/* Feather the light, leaving the original white dome and its base untouched. */
#hero .rgb-globes{mix-blend-mode:normal}
#hero .rgb-globe{animation:globeRainbow 9s linear infinite;animation-play-state:paused}
#hero .rgb-globe .globe-halo{filter:blur(11px)}
#hero.lights-on .rgb-globe{animation-play-state:running}
@keyframes globeRainbow{0%,100%{color:#ff4268}16.67%{color:#ffad37}33.33%{color:#88ed50}50%{color:#3ce5d9}66.67%{color:#5488ff}83.33%{color:#ca63ff}}
@media(prefers-reduced-motion:reduce){#hero .rgb-globe{animation:none;color:#86dfff}}
/* Reference: full luminous colour, a gentle halo and light on the surface. */
#hero .rgb-globes{mix-blend-mode:normal}
#hero .rgb-globe{animation:globeRainbowEmissive 3.2s linear infinite;animation-play-state:paused;filter:none}
#hero .rgb-globe .globe-bloom{opacity:.48;filter:blur(15px);mix-blend-mode:screen}
#hero .rgb-globe .globe-reflection{opacity:.22;filter:blur(14px);mix-blend-mode:screen}
#hero.lights-on .rgb-globe{animation-play-state:running}
@keyframes globeRainbowEmissive{0%,100%{color:#ff527c}16.67%{color:#ffe94c}33.33%{color:#69ff72}50%{color:#46f4ff}66.67%{color:#7774ff}83.33%{color:#f26dff}}
@media(prefers-reduced-motion:reduce){#hero .rgb-globe{animation:none;color:#74f4ff}}
#hero .hero-shade{mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 85%)}
#hero .rgb-globe .globe-bloom{opacity:.65;filter:blur(12px)}
#hero .rgb-globe .globe-reflection{opacity:.3}
/* No painted silhouettes, rims or specular spots: only transparent emitted light. */
#hero .rgb-globe .transparent-diffuser{filter:blur(2px);opacity:.65}
#hero .rgb-globe .transparent-bloom{filter:blur(18px);opacity:.16;mix-blend-mode:screen}
#hero .rgb-globe .transparent-reflection{filter:blur(15px);opacity:.13;mix-blend-mode:screen}
/* Increase colour presence while retaining the feathered transparent light. */
#hero .rgb-globe .transparent-diffuser{opacity:.9}
#hero .rgb-globe .transparent-bloom{opacity:.22}
/* Keep the unlit product photo readable without activating emitted light. */
#hero:not(.lights-on) .hero-scene>img{filter:brightness(.88)!important}
/* Stronger rainbow light, with visibly staggered hues across the three lamps. */
#hero .rgb-globe .transparent-diffuser{opacity:1}
#hero .rgb-globe .transparent-bloom{opacity:.28}
@keyframes globeRainbowEmissive{0%,100%{color:#ff244d}14.28%{color:#ff801c}28.57%{color:#ffe721}42.86%{color:#26ff62}57.14%{color:#16e6ff}71.43%{color:#435cff}85.71%{color:#df36ff}}
#hero .globe-copies{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#hero .globe-copy-off{opacity:1;filter:brightness(.88)}
#hero .globe-copy-on{opacity:0;transition:opacity .3s;filter:brightness(1.05)}
#hero.lights-on .globe-copy-on{opacity:1}
#hero .rgb-globe .transparent-diffuser{filter:blur(4px)}
#hero .rgb-globe .transparent-bloom{filter:blur(25px);opacity:.32}
#hero .rgb-globe .transparent-reflection{filter:blur(20px)}
/* Soft coloured diffuser through to the rim, with no white perimeter band. */
#hero .rgb-globe .transparent-diffuser{opacity:.62;filter:none}
#hero .rgb-globe .transparent-bloom{opacity:.22;filter:blur(24px)}
@keyframes globeRainbowEmissive{0%,100%{color:#ff547a}14.28%{color:#ff9c50}28.57%{color:#ffe75b}42.86%{color:#55ed84}57.14%{color:#52ddf5}71.43%{color:#7786ff}85.71%{color:#d86dff}}
/* Static lighting only: retain the on/off switch without running rainbow effects. */
#hero *,#hero *::before,#hero *::after{animation:none!important}
#hero .rgb-globes,#hero .rgb-chase,#hero .approved-rgb,#hero .color-wave-a,#hero .color-wave-b,#hero .rgb-emission{display:none!important}
/* Final integrated on/off photographs: no pasted bases, masks or artificial shadows. */
#hero .hero-scene>#heroImage,#hero .hero-scene>.hero-photo-on{position:absolute;inset:0;width:100%;height:100%;object-fit:fill!important;filter:none!important}
#hero .hero-photo-on{opacity:0;transition:opacity .3s}
#hero.lights-on .hero-photo-on{opacity:1}
#hero:not(.lights-on) .hero-scene>#heroImage{filter:none!important}
/* Only the two requested module lights animate; other products remain photographic. */
#hero .selected-module-rainbow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .25s}
#hero.lights-on .selected-module-rainbow{opacity:1}
#hero .selected-rainbow-lens{animation:selectedModuleRainbow 5s linear infinite!important;animation-play-state:paused!important}
#hero.lights-on .selected-rainbow-lens{animation-play-state:running!important}
#hero .selected-lens-halo{opacity:.38;filter:blur(7px)}
#hero .selected-lens-tint{opacity:.68;filter:blur(1.2px)}
@keyframes selectedModuleRainbow{0%,100%{color:#ff5289}16.67%{color:#ffce48}33.33%{color:#60f889}50%{color:#4ce7ff}66.67%{color:#7789ff}83.33%{color:#e06bff}}
@media(prefers-reduced-motion:reduce){#hero .selected-rainbow-lens{animation:none!important;color:#8be4ff}}
#hero .selected-rainbow-lens{animation-delay:var(--lens-phase,0s)!important}
/* Translucent colour leaves the photographed lens and LED details visible. */
#hero .selected-lens-tint{opacity:.34;filter:blur(.65px)}
#hero .selected-lens-halo{opacity:.24;filter:blur(6px)}
#hero .selected-rainbow-lens>ellipse:last-child{opacity:0}
/* Soft luminous bloom, without a sharply bounded colour disc. */
#hero .selected-lens-tint{opacity:.29;filter:blur(3.6px)}
#hero .selected-lens-halo{opacity:.48;filter:blur(11px)}