:root{
  --bg:#0d0b09; --bg2:#12100c; --card:#161310; --ink:#ece5d8; --muted:#9a917f;
  --line:rgba(233,220,200,.13); --line-soft:rgba(233,220,200,.07);
  --accent:#d9a05b; --accent-soft:rgba(217,160,91,.14);
  --display:"Playfair Display",Georgia,serif; --bebas:"Bebas Neue",sans-serif; --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}

.mockup-badge{position:fixed; top:14px; right:14px; z-index:60; font:700 10px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(27,24,21,.62); border:1px solid rgba(255,255,255,.22); padding:7px 12px; border-radius:999px; backdrop-filter:blur(6px)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .pool-anim{animation:none!important}
}

/* TOPBAR */
.topbar{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px 30px; color:var(--ink); background:rgba(13,11,9,.78); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.topbar-logo{font:600 .82rem/1 var(--body); letter-spacing:.3em}
.topbar-label{font:400 .68rem/1 var(--body); letter-spacing:.24em; text-transform:uppercase; opacity:.72}

/* ───────── INTRO ───────── */
.intro{position:relative; padding:170px 40px 46px; max-width:1240px; margin:0 auto}
.intro-kicker{display:block; font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:18px}
.display-line{display:block; font-family:var(--bebas); line-height:.9; letter-spacing:.04em; text-transform:uppercase}
.display-line--lg{font-size:clamp(3.6rem,11vw,8.2rem); color:var(--ink)}
.display-line--accent{color:var(--accent); text-shadow:0 0 70px rgba(217,160,91,.32)}
.intro h1{margin:0}
.intro-lead{max-width:56ch; margin:26px 0 0; font-size:1.06rem; color:var(--muted); font-weight:300}
.intro-lead em{font-family:var(--display); color:var(--ink); font-style:italic}
.intro-meta-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:44px; padding-top:28px; border-top:1px solid var(--line)}
.meta-card{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:8px; background:var(--card); border:1px solid var(--line); opacity:0; transform:translateY(12px); animation:metaCardIn .7s cubic-bezier(.16,1,.3,1) forwards}
.meta-card:nth-child(1){animation-delay:.2s}
.meta-card:nth-child(2){animation-delay:.3s}
.meta-card:nth-child(3){animation-delay:.4s}
.meta-card:nth-child(4){animation-delay:.5s}
.meta-card span{font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.meta-card strong{font-size:.95rem; font-weight:600; color:var(--ink)}
@keyframes metaCardIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.meta-card{opacity:1; transform:none; animation:none}}

/* ───────── SECTION HEADS ───────── */
.section-head{max-width:1240px; margin:0 auto; padding:0 40px}
.head-row{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.head-en{font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); font-weight:600}
.section-head h2{margin:0; font-family:var(--bebas); font-weight:400; font-size:clamp(2.2rem,5vw,3.8rem); letter-spacing:.05em; text-transform:uppercase; line-height:.95}
.section-head p{margin:14px 0 0; color:var(--muted); font-size:1rem; max-width:60ch; font-weight:300}

/* ───────── 01 · LIGHT LAB ───────── */
.lab{padding:96px 0 60px}
.lab-grid{max-width:1400px; margin:44px auto 0; padding:0 40px; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr); gap:26px; align-items:start}

.scene-frame{position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#080a0d; box-shadow:0 40px 90px rgba(0,0,0,.5)}
.scene-wrap{aspect-ratio:16/10}
.scene-wrap svg{display:block; width:100%; height:100%}
.scene-hint{position:absolute; left:14px; bottom:12px; z-index:3; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(236,229,216,.62); background:rgba(10,9,8,.5); padding:6px 11px; border-radius:999px; backdrop-filter:blur(4px); pointer-events:none}
.scene-wrap [data-hit]{cursor:pointer}
.scene-wrap .z{transition:opacity .55s ease}
.scene-wrap .veil{transition:opacity .55s ease}
.pool-anim{animation:poolShimmer 7s ease-in-out infinite alternate}
@keyframes poolShimmer{from{transform:translateX(0)}to{transform:translateX(14px)}}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.kpi span{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.kpi strong{font-family:var(--bebas); font-weight:400; font-size:1.7rem; letter-spacing:.04em; color:var(--ink); font-variant-numeric:tabular-nums}
.kpi small{font-size:.68rem; color:var(--muted)}

/* Panel */
.panel{display:flex; flex-direction:column; gap:14px; position:sticky; top:86px}
.panel-block{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 22px}
.panel-block h3{margin:0; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); font-weight:600}
.panel-block h3 small{font-weight:400; letter-spacing:.1em; text-transform:none; opacity:.7}
.panel-block-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.kelvin-readout{font-family:var(--bebas); color:var(--accent); letter-spacing:.04em}
.kelvin-readout strong{font-size:2rem; font-weight:400; font-variant-numeric:tabular-nums}
.kelvin-readout span{font-size:1rem; margin-left:3px; opacity:.8}
.kelvin-readout--sm strong{font-size:1.5rem}
.kelvin-name{margin:2px 0 14px; font-family:var(--display); font-style:italic; font-size:.95rem; color:var(--ink)}

.range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:rgba(233,220,200,.16); outline:none; cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.55); cursor:grab}
.range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.55); cursor:grab}
.range--kelvin{height:10px}
.kelvin-scale{display:flex; justify-content:space-between; margin-top:10px; font-size:.62rem; letter-spacing:.06em; color:var(--muted); text-align:center; line-height:1.5}
.kelvin-scale span:first-child{text-align:left}
.kelvin-scale span:last-child{text-align:right}
.kelvin-scale em{font-style:normal; opacity:.7; text-transform:uppercase; letter-spacing:.14em; font-size:.56rem}

.preset-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.preset{border:1px solid var(--line); background:transparent; color:var(--ink); font:500 .78rem var(--body); letter-spacing:.03em; padding:9px 15px; border-radius:999px; cursor:pointer; transition:.25s}
.preset:hover{border-color:var(--accent); color:var(--accent)}
.preset.active{background:var(--accent); border-color:var(--accent); color:#171106; font-weight:600}

.zone-list{display:flex; flex-direction:column; margin-top:12px}
.zone-row{padding:14px 0; border-top:1px solid var(--line-soft)}
.zone-row:first-child{border-top:0}
.zone-top{display:flex; align-items:center; gap:12px}
.zone-name{flex:1; min-width:0}
.zone-name b{display:block; font-size:.86rem; font-weight:600; color:var(--ink)}
.zone-name small{font-size:.7rem; color:var(--muted)}
.zone-row.is-off .zone-name b{color:var(--muted)}
.zone-ctrl{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-top:10px}
.zone-row.is-off .zone-ctrl{opacity:.4; pointer-events:none}
.zone-dim-val{font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; width:38px; text-align:right}
.zone-cct{grid-column:1 / -1; justify-self:start}
select.cct-select{background:var(--bg2); color:var(--ink); border:1px solid var(--line); border-radius:6px; font:500 .74rem var(--body); padding:6px 8px; cursor:pointer}
select.cct-select:focus{outline:1px solid var(--accent)}

/* Switch */
.switch{position:relative; display:inline-block; width:42px; height:24px; flex:none}
.switch input{opacity:0; width:0; height:0}
.switch i{position:absolute; inset:0; border-radius:999px; background:rgba(233,220,200,.18); transition:.25s; cursor:pointer}
.switch i::before{content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#c9c0af; transition:.25s}
.switch input:checked + i{background:var(--accent)}
.switch input:checked + i::before{transform:translateX(18px); background:#fff}
.switch input:focus-visible + i{outline:2px solid var(--accent); outline-offset:2px}

/* ───────── 02 · PHOTOMETRIC ENGINE ───────── */
.photolab{padding:96px 0 60px; background:var(--bg2)}
.photo-grid{max-width:1400px; margin:44px auto 0; padding:0 40px; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(330px,1fr); gap:26px; align-items:start}

.photo-stage{display:flex; flex-direction:column; gap:14px}
.viewer3d{position:relative; aspect-ratio:16/10; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#080a0d; box-shadow:0 40px 90px rgba(0,0,0,.5)}
.viewer3d canvas{display:block; width:100%; height:100%}
.viewer3d-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.82rem; letter-spacing:.04em; background:#080a0d; z-index:3}
.viewer3d-hint{position:absolute; left:14px; bottom:12px; z-index:2; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(236,229,216,.6); background:rgba(10,9,8,.5); padding:6px 11px; border-radius:999px; backdrop-filter:blur(4px); pointer-events:none}

.stage-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.mode-switch,.src-switch{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card)}
.mode-switch button,.src-switch button{border:0; background:transparent; color:var(--muted); font:600 .74rem var(--body); letter-spacing:.04em; padding:9px 16px; cursor:pointer; transition:.2s}
.mode-switch button.is-active,.src-switch button.is-active{background:var(--accent); color:#171106}
.stage-toggles{display:flex; gap:8px; flex-wrap:wrap}
.stage-tg{border:1px solid var(--line); background:transparent; color:var(--ink); font:500 .72rem var(--body); letter-spacing:.03em; padding:8px 13px; border-radius:999px; cursor:pointer; transition:.2s}
.stage-tg:hover{border-color:var(--accent); color:var(--accent)}
.stage-tg.is-active{background:var(--accent); border-color:var(--accent); color:#171106; font-weight:600}

.legend{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.legend-title{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.legend-bar{height:12px; border-radius:6px; border:1px solid var(--line-soft)}
.legend-ticks{display:flex; justify-content:space-between; margin-top:6px; font-size:.66rem; color:var(--muted); font-variant-numeric:tabular-nums}

.photo-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.pk{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.pk span{font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.pk strong{font-family:var(--bebas); font-weight:400; font-size:1.55rem; letter-spacing:.04em; color:var(--ink); font-variant-numeric:tabular-nums}
.pk strong i{font-family:var(--body); font-style:normal; font-size:.8rem; color:var(--muted); margin-left:3px}
.pk small{font-size:.66rem; color:var(--muted)}
.pk.ok{border-color:rgba(120,190,120,.4)} .pk.ok strong{color:#8fce87}
.pk.warn{border-color:rgba(224,115,90,.4)} .pk.warn strong{color:#e0906a}

/* Photometric panel */
.photo-panel{display:flex; flex-direction:column; gap:14px; position:sticky; top:86px}
.src-switch{margin:14px 0 6px; width:100%}
.src-switch button{flex:1}
.src-fields{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld>span{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.fld input[type=number],.fld select{background:var(--bg2); color:var(--ink); border:1px solid var(--line); border-radius:6px; font:500 .82rem var(--body); padding:9px 10px; width:100%}
.fld input[type=number]:focus,.fld select:focus{outline:1px solid var(--accent)}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fld-note{margin:10px 0 0; font-size:.72rem; color:var(--muted)}
.file-plain{color:var(--muted); font:500 .74rem var(--body)}
.file-plain::file-selector-button{background:var(--bg2); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:7px 11px; font:500 .74rem var(--body); cursor:pointer; margin-right:10px}

.ies-drop{display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; padding:22px 16px; border:1.5px dashed var(--line); border-radius:10px; cursor:pointer; transition:.2s; background:var(--bg2)}
.ies-drop:hover,.ies-drop.is-drag{border-color:var(--accent); background:var(--accent-soft)}
.ies-drop-title{font-weight:600; font-size:.86rem; color:var(--ink)}
.ies-drop-sub{font-size:.68rem; color:var(--muted); letter-spacing:.04em}
.ies-summary{background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:14px 15px; font-size:.8rem}
.ies-summary b{display:block; margin-bottom:8px; color:var(--ink); font-family:var(--display); font-weight:500}
.ies-kv{display:flex; justify-content:space-between; gap:12px; padding:3px 0; color:var(--muted)}
.ies-kv i{font-style:normal; color:var(--ink); font-variant-numeric:tabular-nums}
.ies-sample{align-self:flex-start; border:1px solid var(--line); background:transparent; color:var(--accent); font:600 .74rem var(--body); padding:8px 14px; border-radius:999px; cursor:pointer; transition:.2s}
.ies-sample:hover{background:var(--accent); border-color:var(--accent); color:#171106}

/* ───────── 03 · TEMPERATURE STUDY ───────── */
.study{padding:96px 0 40px; background:var(--bg)}
.study-grid{max-width:1400px; margin:44px auto 0; padding:0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.study-card{background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
.study-card:hover{transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.45)}
.study-scene{aspect-ratio:16/10; background:#080a0d; pointer-events:none}
.study-scene svg{display:block; width:100%; height:100%}
.study-body{padding:20px 22px 24px}
.study-k{font-family:var(--bebas); font-size:1.05rem; letter-spacing:.1em; color:var(--accent)}
.study-body h3{margin:4px 0 8px; font-family:var(--bebas); font-weight:400; font-size:1.8rem; letter-spacing:.05em; text-transform:uppercase}
.study-body p{margin:0 0 16px; font-size:.86rem; color:var(--muted); font-weight:300}
.study-apply{border:1px solid var(--line); background:transparent; color:var(--ink); font:600 .76rem var(--body); letter-spacing:.06em; padding:10px 16px; border-radius:999px; cursor:pointer; transition:.25s}
.study-apply:hover{background:var(--accent); border-color:var(--accent); color:#171106}

/* ───────── 03 · FIXTURE SCHEDULE ───────── */
.schedule{padding:96px 0 70px}
.sched-list{max-width:1240px; margin:44px auto 0; padding:0 40px; display:flex; flex-direction:column}
.sched-item{display:grid; grid-template-columns:52px 1.4fr 1.6fr auto auto; gap:18px; align-items:center; padding:20px 4px; border-top:1px solid var(--line)}
.sched-item:last-child{border-bottom:1px solid var(--line)}
.sched-num{font-family:var(--bebas); font-size:1.3rem; color:var(--muted); letter-spacing:.06em}
.sched-name b{display:block; font-family:var(--display); font-weight:500; font-size:1.1rem; color:var(--ink)}
.sched-name small{font-size:.74rem; color:var(--muted)}
.sched-spec{font-size:.8rem; color:var(--muted); line-height:1.55}
.sched-qty{font-size:.8rem; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.sched-price{font-weight:600; font-size:.95rem; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right}
.sched-total{max-width:1240px; margin:22px auto 0; padding:0 40px; display:flex; align-items:baseline; justify-content:flex-end; gap:18px}
.sched-total span{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.sched-total strong{font-family:var(--bebas); font-weight:400; font-size:2.2rem; letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums}

/* ───────── CREDITS ───────── */
.credits{max-width:1240px; margin:0 auto; padding:20px 40px 130px}
.credits-title{margin:0 0 8px; font-family:var(--display); font-weight:400; font-size:1.7rem}
.credits-list{list-style:none; margin:0; padding:0}
.credits-list li{border-top:1px solid var(--line)}
.credits-list li:last-child{border-bottom:1px solid var(--line)}
.credits-list dl{display:grid; grid-template-columns:220px 1fr; gap:20px; margin:0; padding:18px 4px}
.credits-list dt{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); align-self:center}
.credits-list dd{margin:0; font-size:.95rem}

/* ───────── RESPONSIVE ───────── */
@media (max-width:1100px){
  .lab-grid{grid-template-columns:1fr}
  .panel,.photo-panel{position:static}
  .photo-grid{grid-template-columns:1fr}
  .study-grid{grid-template-columns:1fr; max-width:720px}
}
@media (max-width:760px){
  .intro{padding:130px 22px 40px}
  .intro-meta-grid{grid-template-columns:repeat(2,1fr)}
  .section-head{padding:0 22px}
  .lab-grid,.study-grid,.sched-list,.sched-total,.credits,.photo-grid{padding-left:22px; padding-right:22px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .photo-kpis{grid-template-columns:repeat(2,1fr)}
  .stage-toolbar{flex-direction:column; align-items:stretch}
  .sched-item{grid-template-columns:1fr auto; grid-template-areas:"num num" "name name" "spec spec" "qty price"; gap:8px}
  .sched-num{grid-area:num}
  .sched-name{grid-area:name}
  .sched-spec{grid-area:spec}
  .sched-qty{grid-area:qty}
  .sched-price{grid-area:price}
  .credits-list dl{grid-template-columns:1fr; gap:4px}
  .topbar{padding:14px 18px}
  .topbar-label{display:none}
}