#lighting-hero{--paper:#f5f3ee;--ink:#202322;--muted:#686c68;--line:#dedfd7;--red:#df1437;--radius:22px}
#lighting-hero *{box-sizing:border-box}
#lighting-hero{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
#lighting-hero button,#lighting-hero input{font:inherit}
#lighting-hero button,#lighting-hero a,#lighting-hero input{-webkit-tap-highlight-color:transparent}
#lighting-hero button{cursor:pointer}
#lighting-hero a{color:inherit}
#lighting-hero button:focus-visible,#lighting-hero a:focus-visible,#lighting-hero input:focus-visible{outline:3px solid #ed1539;outline-offset:5px}
#lighting-hero button{color:inherit}
#lighting-hero svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#lighting-hero .shell{max-width:1600px;margin:auto;padding:0 44px}
#lighting-hero .header{display:flex;align-items:center;justify-content:space-between;gap:20px;height:90px;border-bottom:1px solid var(--line)}
#lighting-hero .brand{text-decoration:none;font-size:var(--text-heading);letter-spacing:-1.3px;font-weight:700;white-space:nowrap}
#lighting-hero .brand span{color:var(--red)}
#lighting-hero .header-note{font-size:var(--text-caption);color:var(--muted);letter-spacing:.03em}
#lighting-hero .header-link{text-decoration:none;font-size:var(--text-small);display:flex;align-items:center;gap:12px}
#lighting-hero .hero{padding:46px 0 36px;position:relative}
#lighting-hero .hero-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:38px;align-items:center}
#lighting-hero .copy{min-width:0;overflow-wrap:anywhere}
#lighting-hero .copy{padding:0 2px 56px 0}
#lighting-hero .eyebrow{font-size:var(--text-caption);line-height:1.6;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:#5c635d;font-weight:700}
#lighting-hero .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0}
#lighting-hero h1{font-size:var(--text-display);line-height:1.07;letter-spacing:-.055em;font-weight:700;margin:25px 0 22px}
#lighting-hero h1 em{font-style:normal;color:var(--red)}
#lighting-hero .lead{max-width:335px;font-size:var(--text-body);line-height:1.75;color:var(--muted);margin:0 0 30px}
#lighting-hero .lead strong{color:var(--ink);font-weight:500}
#lighting-hero .actions{display:flex;flex-wrap:wrap;gap:16px}
#lighting-hero .primary{border:0;background:var(--red);border-radius:12px;color:white;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 22px;font-size:var(--text-small);font-weight:700;min-height:52px;transition:background .2s,transform .2s}
#lighting-hero .primary:hover{background:#ce1330;transform:translateY(-1px)}
#lighting-hero .text-link{display:inline-flex;gap:12px;align-items:center;font-size:var(--text-small);text-decoration:none;min-height:44px;border-bottom:1px solid #a1a59e}
#lighting-hero .copy-foot{border-top:1px solid var(--line);padding-top:20px;margin-top:38px;display:flex;gap:13px;align-items:flex-start;max-width:315px}
#lighting-hero .copy-foot svg{flex-shrink:0;width:25px;height:25px;color:#777e71}
#lighting-hero .copy-foot p{margin:0;color:var(--muted);font-size: var(--text-small);line-height:1.6}
#lighting-hero .copy-foot strong{color:var(--ink);font-weight:700}
#lighting-hero .showcase{min-width:0}
#lighting-hero .frame{position:relative;aspect-ratio:1.48;background:#212521;border-radius:var(--radius);overflow:hidden;isolation:isolate;touch-action:pan-y pinch-zoom}
#lighting-hero .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .85s ease;pointer-events:none}
#lighting-hero .photo.visible{opacity:1}
#lighting-hero .veil{position:absolute;inset:0;z-index:1;background:#081118;opacity:0;pointer-events:none;transition:opacity 1.9s cubic-bezier(.2,.65,.25,1)}
#lighting-hero .veil.manual{transition:opacity .1s linear}
#lighting-hero .shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 25%,transparent 49%,rgba(0,0,0,.73));pointer-events:none}
#lighting-hero .frame-top{position:absolute;top:24px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;z-index:3;color:white;font-size:var(--text-caption);letter-spacing:.03em}
#lighting-hero .scene-number{display:inline-flex;align-items:center;gap:9px}
#lighting-hero .scene-number i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fbdcb0;box-shadow:0 0 12px #fbdcb0}
#lighting-hero .temperature{border:1px solid #ffffff50;padding:8px 12px;border-radius:30px;background:#1117;backdrop-filter:blur(8px)}
#lighting-hero .caption{position:absolute;bottom:30px;left:30px;right:30px;color:white;z-index:3;pointer-events:none}
#lighting-hero .scene-category{text-transform:uppercase;letter-spacing:.17em;font-size:var(--text-caption);font-weight:500;color:#eadbc7}
#lighting-hero .caption h2{color:#fff;font-size:var(--text-title);font-weight:500;letter-spacing:-.045em;line-height:1.12;margin:10px 0}
#lighting-hero .caption p{font-size:var(--text-body);line-height:1.65;max-width:380px;color:#f2e9de;margin:0}
#lighting-hero .loading{position:absolute;z-index:4;left:50%;top:45%;transform:translate(-50%,-50%);font-size:var(--text-small);color:white;background:#171918d9;border-radius:30px;padding:10px 18px}
#lighting-hero .loading[hidden]{display:none}
#lighting-hero .controls{display:flex;align-items:center;gap:24px;padding:18px 0 17px;border-bottom:1px solid var(--line)}
#lighting-hero .power{display:flex;align-items:center;gap:10px;border:0;padding:0;background:none;font-size:var(--text-small);min-height:44px;white-space:nowrap}
#lighting-hero .switch-track{position:relative;width:46px;height:26px;background:#cbcfc7;border:1px solid #c1c5bc;border-radius:30px;transition:background .3s;flex-shrink:0}
#lighting-hero .switch-track:before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;transition:transform .3s}
#lighting-hero .power[aria-pressed=true] .switch-track{background:#222b24;border-color:#222b24}
#lighting-hero .power[aria-pressed=true] .switch-track:before{transform:translateX(20px);background:#f4e5c8}
#lighting-hero .dimmer{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:#72786f}
#lighting-hero .dimmer svg{width:16px;height:16px;flex-shrink:0}
#lighting-hero .dimmer input{width:100%;min-width:30px;height:32px;accent-color:#374238;cursor:pointer}
#lighting-hero .dimmer output{width:35px;flex-shrink:0;font-size:var(--text-small);color:var(--muted);font-variant-numeric:tabular-nums}
#lighting-hero .arrows{display:flex;gap:7px}
#lighting-hero .arrow{width:38px;height:38px;display:grid;place-items:center;border:1px solid #d6d9d0;border-radius:50%;background:transparent}
#lighting-hero .arrow:hover{background:white}
#lighting-hero .scene-tabs{display:flex;gap:5px;padding-top:14px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b9bfb3 transparent}
#lighting-hero .scene-tab{flex:1;min-width:max-content;border:1px solid transparent;border-radius:9px;padding:12px 10px;background:transparent;text-align:left;display:flex;align-items:center;gap:8px;color:#656a64;font-size:var(--text-small);white-space:nowrap;min-height:44px}
#lighting-hero .scene-tab span{font-size:var(--text-caption);font-variant-numeric:tabular-nums;color:#8c9288}
#lighting-hero .scene-tab[aria-pressed=true]{background:#e5e8df;border-color:#dbe0d3;color:#1f2920}
#lighting-hero .scene-tab[aria-pressed=true] span{color:#4e6249}
#lighting-hero .scene-tab:hover{background:#eaece5}
#lighting-hero .under{display:flex;justify-content:space-between;gap:22px;border-top:1px solid var(--line);padding:25px 0;margin-top:24px}
#lighting-hero .under p{margin:0;max-width:450px;font-size: var(--text-body);line-height:1.7;color:#7d8179}
#lighting-hero .under strong{font-size: var(--text-body);color:#535c50;font-weight:500}
#lighting-hero .under a{font-size:var(--text-small);white-space:nowrap;text-decoration:none}
#lighting-hero .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#lighting-hero dialog{max-width:440px;width:calc(100% - 32px);padding:30px;border:0;border-radius:20px;background:var(--paper);color:var(--ink)}
#lighting-hero dialog::backdrop{background:#10191399;backdrop-filter:blur(4px)}
#lighting-hero dialog h2{font-size:var(--text-heading);letter-spacing:-.04em}
#lighting-hero dialog p{font-size:var(--text-body);line-height:1.7;color:var(--muted)}
#lighting-hero dialog button{margin-top:10px}
#lighting-hero .close{float:right;border:0;background:transparent;font-size:25px;min-width:40px;min-height:40px}
#lighting-hero .caption,#lighting-hero .copy{animation:lighting-hero-appear .7s both}
@keyframes lighting-hero-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1600px){#lighting-hero .hero{padding-top:66px}
#lighting-hero .hero-grid{gap:48px}
#lighting-hero .frame{aspect-ratio:1.53}
}
@media(max-width:1100px){#lighting-hero .shell{padding:0 28px}
#lighting-hero .hero-grid{gap:25px;grid-template-columns:minmax(0,1fr)}
#lighting-hero h1{font-size:var(--text-display)}
#lighting-hero .frame{aspect-ratio:1.48}
#lighting-hero .copy{padding-bottom:30px}
#lighting-hero .scene-tab{font-size:var(--text-small);padding:11px 7px}
#lighting-hero .scene-tab span{display:none}
#lighting-hero .controls{gap:12px}
#lighting-hero .lead{font-size:var(--text-body)}
#lighting-hero .copy-foot{margin-top:26px}
}
@media(max-width:760px){#lighting-hero .shell{padding:0 20px}
#lighting-hero .header{height:72px}
#lighting-hero .header-note{display:none}
#lighting-hero .brand{font-size:var(--text-subtitle)}
#lighting-hero .header-link{font-size:var(--text-small)}
#lighting-hero .hero{padding:30px 0 12px}
#lighting-hero .hero-grid{grid-template-columns:1fr;gap:26px}
#lighting-hero .copy{padding:0}
#lighting-hero .eyebrow{font-size:var(--text-caption)}
#lighting-hero h1{font-size:var(--text-display);margin:17px 0 16px;max-width:540px}
#lighting-hero h1 br{display:none}
#lighting-hero .lead{max-width:540px;font-size:var(--text-body);margin-bottom:20px;line-height:1.65}
#lighting-hero .actions{align-items:center;gap:20px}
#lighting-hero .primary{padding:14px 18px;min-height:48px;font-size:var(--text-small);gap:15px}
#lighting-hero .copy-foot{display:none}
#lighting-hero .frame{aspect-ratio:1.12;border-radius:18px}
#lighting-hero .caption{left:22px;right:22px;bottom:24px}
#lighting-hero .caption h2{font-size:var(--text-title)}
#lighting-hero .caption p{font-size:var(--text-body);max-width:270px}
#lighting-hero .frame-top{left:20px;right:20px;top:18px}
#lighting-hero .controls{padding:10px 0;gap:12px}
#lighting-hero .power{font-size:var(--text-small);gap:8px}
#lighting-hero .arrows{display:none}
#lighting-hero .scene-tabs{gap:4px;padding-top:10px}
#lighting-hero .scene-tab{flex:0 0 auto;padding:10px 12px;font-size:var(--text-small)}
#lighting-hero .under{margin-top:8px;padding-top:20px;display:block}
#lighting-hero .under a{display:inline-block;margin-top:15px}
#lighting-hero .under p{font-size: var(--text-body)}
#lighting-hero .temperature{font-size:var(--text-caption)}
#lighting-hero .dimmer{gap:6px}
}
@media(prefers-reduced-motion:reduce){#lighting-hero *,#lighting-hero *:before,#lighting-hero *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
#lighting-hero .photo{object-fit:initial}
#lighting-hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#lighting-hero .light-on{opacity:var(--light-level,1);transition:opacity 2.3s cubic-bezier(.22,.68,.25,1)}
#lighting-hero .frame.manual .light-on{transition:opacity .08s linear}
#lighting-hero .photo img.light-on{pointer-events:none}
@media(max-width:760px){#lighting-hero .catalog-long{display:none}
#lighting-hero .actions{gap:18px}
}
@media(max-width:430px){#lighting-hero .scene-meta{display:none}
}
#lighting-hero .frame .photo .light-on{transition:none}
#lighting-hero .playback{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;font-size: var(--text-small);color:var(--muted)}
#lighting-hero .playback button{border:1px solid var(--line);border-radius:30px;padding:9px 14px;background:transparent;font-size:var(--text-small);min-height:38px;white-space:nowrap}
#lighting-hero .playback button:hover{background:#e5e8df}


#lighting-hero .shell{width:100%;max-width:1600px}#lighting-hero .home-hero{min-height:0;background:none}#lighting-hero .home-hero::before{display:none}#lighting-hero h1{max-width:none}#lighting-hero .scene-tab{box-shadow:none}#lighting-hero .photo{margin:0}#lighting-hero button{box-shadow:none}#lighting-hero .hero-note{font-size:var(--text-caption);line-height:1.6;color:#777e71;margin:14px 0 0}
