
.ak-demo-section{padding-top:92px;padding-bottom:112px;overflow:hidden}
.ak-demo-header{display:grid;grid-template-columns:1fr .72fr;gap:50px;align-items:end;margin-bottom:34px}
.ak-demo-kicker{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ak-demo-kicker i{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 18px rgba(186,218,34,.55)}
.ak-demo-header h2{font-size:clamp(48px,6vw,78px);line-height:.98;margin:14px 0 0}
.ak-demo-header p{margin:0;color:var(--muted);font-size:15px;line-height:1.7;max-width:540px;justify-self:end}
.ak-demo-shell{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr);gap:16px;align-items:stretch}
.ak-demo-stage{min-width:0;padding:12px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}
.ak-demo-room{position:relative;width:100%;aspect-ratio:16/9;min-height:0;overflow:hidden;border-radius:22px;background:#0d171f;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ak-demo-room>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;display:block}
.ak-demo-room:after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border:1px solid rgba(255,255,255,.14);border-radius:inherit;box-shadow:inset 0 -100px 120px rgba(0,0,0,.18)}
.ak-demo-room .ak-demo-light,.ak-demo-room .ak-demo-climate-flow,.ak-demo-room .ak-demo-curtain-visual,.ak-demo-room .ak-demo-hotspot,.ak-demo-room .ak-demo-status{position:absolute}

.ak-demo-stage-top{display:flex;justify-content:space-between;align-items:center;padding:6px 9px 12px}.ak-demo-stage-top small{display:block;color:var(--muted);font-size:8px;letter-spacing:.16em;font-weight:800}.ak-demo-stage-top strong{display:block;font-family:"Plus Jakarta Sans";font-size:18px;margin-top:2px}.ak-demo-live{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:9px;font-weight:800;letter-spacing:.08em}.ak-demo-live i{width:7px;height:7px;border-radius:50%;background:#48e38d;box-shadow:0 0 14px rgba(72,227,141,.65)}
#akDemoRoom .ak-demo-overlay-plane{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:1774/887;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);z-index:2;pointer-events:none;overflow:visible;isolation:isolate}
#akDemoRoom .ak-demo-overlay-plane .ak-demo-light{position:absolute;inset:0;pointer-events:none;transition:opacity .24s ease,visibility .24s ease;mix-blend-mode:screen;opacity:var(--demo-layer-opacity,0);background-repeat:no-repeat;background-size:100% 100%;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:opacity,visibility}
#akDemoRoom .ak-demo-overlay-plane .ak-demo-light.is-off{opacity:0!important;visibility:hidden!important;mix-blend-mode:normal!important}
#akDemoRoom .ak-demo-overlay-plane .ak-demo-light--chandelier{background-image:url("assets/light-avize.svg")}
#akDemoRoom .ak-demo-overlay-plane .ak-demo-light--left,
#akDemoRoom .ak-demo-overlay-plane .ak-demo-light--right{background-image:url("assets/light-aplik.svg")}
#akDemoRoom .ak-demo-overlay-plane .ak-demo-light--led{background-image:url("assets/light-led.svg")}
.ak-demo-overlay-plane .ak-demo-climate-flow{position:absolute;left:82%;top:22.5%;width:16%;height:40%;z-index:3;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ak-demo-overlay-plane .ak-demo-climate-flow i{position:absolute;top:0;width:6px;height:85%;border-radius:999px;filter:blur(2px);transform-origin:top center;opacity:0}
.ak-demo-room.climate-on .ak-demo-climate-flow{opacity:.88}
.ak-demo-room:not(.climate-on) .ak-demo-climate-flow,.ak-demo-room:not(.climate-on) .ak-demo-climate-flow i{opacity:0!important;animation:none!important}
.ak-demo-room.climate-on.climate-cool .ak-demo-climate-flow i{background:linear-gradient(180deg,rgba(125,230,255,.95),rgba(56,189,248,.75) 45%,rgba(14,165,233,0));animation:ak-demo-flow-cool var(--flow-speed,1.8s) ease-in-out infinite}
.ak-demo-room.climate-on.climate-cool .ak-demo-climate-flow i:nth-child(1){left:35%;transform:rotate(-15deg);animation-delay:0s}
.ak-demo-room.climate-on.climate-cool .ak-demo-climate-flow i:nth-child(2){left:52%;transform:rotate(-9deg);animation-delay:.35s}
.ak-demo-room.climate-on.climate-cool .ak-demo-climate-flow i:nth-child(3){left:68%;transform:rotate(-3deg);animation-delay:.7s}
.ak-demo-room.climate-on.climate-heat .ak-demo-climate-flow i{background:linear-gradient(180deg,rgba(254,215,170,.95),rgba(249,115,22,.85) 45%,rgba(234,88,12,0));animation:ak-demo-flow-heat var(--flow-speed,2.0s) ease-in-out infinite}
.ak-demo-room.climate-on.climate-heat .ak-demo-climate-flow i:nth-child(1){left:35%;transform:rotate(-12deg);animation-delay:0s}
.ak-demo-room.climate-on.climate-heat .ak-demo-climate-flow i:nth-child(2){left:52%;transform:rotate(-6deg);animation-delay:.4s}
.ak-demo-room.climate-on.climate-heat .ak-demo-climate-flow i:nth-child(3){left:68%;transform:rotate(0deg);animation-delay:.8s}
@keyframes ak-demo-flow-cool{0%{transform:translate3d(0,0,0) scaleY(.4) rotate(-8deg);opacity:0}30%{opacity:.95}100%{transform:translate3d(-40px,95px,0) scaleY(1.18) rotate(-16deg);opacity:0}}
@keyframes ak-demo-flow-heat{0%{transform:translate3d(0,0,0) scaleY(.4) rotate(-5deg);opacity:0}30%{opacity:.95}100%{transform:translate3d(-30px,105px,0) scaleY(1.22) rotate(-10deg);opacity:0}}
.ak-demo-hotspot{position:absolute;z-index:5;padding:6px 9px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(6,15,22,.58);backdrop-filter:blur(10px);color:#fff;font-size:8px;font-weight:800;letter-spacing:.08em}.hot-avize{left:45%;top:26%}.hot-klima{right:7%;top:15%}.hot-aplik{left:22%;top:34%}.hot-curtain{right:21%;top:44%}
.ak-demo-status{position:absolute;left:14px;bottom:14px;z-index:6;display:flex;gap:8px;flex-wrap:wrap}.ak-demo-status>span{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(6,15,22,.62);backdrop-filter:blur(12px);color:#fff}.ak-demo-status b{font-family:"Plus Jakarta Sans";font-size:12px}.ak-demo-status small{font-size:8px;color:rgba(255,255,255,.7)}
.ak-demo-stage-foot{display:flex;justify-content:space-between;padding:11px 8px 4px;color:var(--muted);font-size:9px}.ak-demo-stage-foot>span:last-child{display:flex;gap:6px;align-items:center}.ak-demo-stage-foot i{width:6px;height:6px;border-radius:50%;background:#4de093;box-shadow:0 0 10px rgba(77,224,147,.55)}
.ak-demo-panel{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px;border-radius:26px;background:linear-gradient(150deg,#09151e,#0e1d28);color:#eef7fa;box-shadow:0 30px 70px rgba(0,0,0,.22);overflow:hidden}.ak-demo-panel-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}.ak-demo-panel-head small{display:block;color:#7f97a5;font-size:8px;font-weight:800;letter-spacing:.14em}.ak-demo-panel-head strong{display:block;font:700 21px "Plus Jakarta Sans";margin-top:5px}.ak-demo-panel-head>span{display:flex;align-items:center;gap:6px;color:#9eb1ba;font-size:8px;font-weight:800}.ak-demo-panel-head>span i{width:7px;height:7px;border-radius:50%;background:#4de093;box-shadow:0 0 10px rgba(77,224,147,.55)}
.ak-demo-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.ak-demo-scene{min-height:56px;padding:7px 4px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025);color:#8ea3b1;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease}.ak-demo-scene span{display:block;font-size:15px;margin-bottom:3px;line-height:1}.ak-demo-scene b{font-size:8.5px;letter-spacing:.02em;white-space:nowrap}.ak-demo-scene.is-active{border-color:#55d7ff;background:linear-gradient(145deg,rgba(85,215,255,.18),rgba(85,215,255,.04));color:#fff;box-shadow:0 10px 25px rgba(85,215,255,.10)}
.ak-demo-card{padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035)}.ak-demo-card-title{display:flex;align-items:center;gap:9px}.ak-demo-card-title>div{flex:1}.ak-demo-card-title b{display:block;font-size:12px}.ak-demo-card-title small{display:block;margin-top:2px;color:#7f96a3;font-size:8px}.ak-demo-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(186,218,34,.11);color:#d9f063;font-size:16px}.ak-demo-icon.climate{background:rgba(85,215,255,.10);color:#6fe2ff}.ak-demo-power{width:30px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#cfe0e6;cursor:pointer}.ak-demo-device-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}.ak-demo-device{padding:9px 5px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0c1a24;color:#7f96a3;cursor:pointer;text-align:left}.ak-demo-device span{display:block;font-size:15px;color:#9bb2bf}.ak-demo-device b{display:block;font-size:9px;margin-top:4px}.ak-demo-device.active{border-color:#6fd8ff;background:rgba(85,215,255,.08);color:#fff}.ak-demo-device.is-selected{box-shadow:0 0 0 1px rgba(111,216,255,.45)}.ak-demo-slider{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin-top:12px;color:#8ea4b0;font-size:8px;font-weight:700}.ak-demo-slider output{color:#fff;font-size:9px}.ak-demo-slider input{grid-column:1/-1;width:100%;accent-color:#55d7ff}.ak-demo-mode{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.ak-demo-mode button{padding:10px 8px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#0b1924;color:#9aacb7;cursor:pointer}.ak-demo-mode button span{margin-right:5px}.ak-demo-mode button.is-active{border-color:#ff7e48;background:rgba(255,126,72,.10);color:#ffae89}.ak-demo-mode button[data-ak-climate="cool"].is-active{border-color:#55b8ff;background:rgba(85,184,255,.10);color:#79c9ff}.ak-demo-temp{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.ak-demo-temp button{width:34px;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:#0b1924;color:#d3e0e5;font-size:20px;cursor:pointer}.ak-demo-temp strong{font:700 22px "Plus Jakarta Sans"}.ak-demo-curtains{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}.ak-demo-curtains button{padding:8px 5px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#0b1924;color:#8399a6;cursor:pointer}.ak-demo-curtains button span{display:block;font-size:16px}.ak-demo-curtains button b{display:block;font-size:8px;margin-top:5px}.ak-demo-curtains button.is-active{border-color:#8ce6e9;background:rgba(85,215,255,.10);color:#fff}
html[data-theme="light"] .ak-demo-panel{background:linear-gradient(155deg,#f7fbfc,#edf3f5);color:#0d1720;box-shadow:0 24px 65px rgba(9,25,35,.10)}
html[data-theme="light"] .ak-demo-stage{background:linear-gradient(145deg,#ffffff,#eef4f6)}
html[data-theme="light"] .ak-demo-panel-head{border-color:rgba(13,23,32,.08)}
html[data-theme="light"] .ak-demo-panel-head small{color:#71828c}
html[data-theme="light"] .ak-demo-panel-head>span{color:#6b7c85}
html[data-theme="light"] .ak-demo-scenes .ak-demo-scene,html[data-theme="light"] .ak-demo-card{border-color:rgba(13,23,32,.08);background:rgba(255,255,255,.84);color:#0d1720;box-shadow:0 7px 20px rgba(16,36,48,.05)}
html[data-theme="light"] .ak-demo-scene{color:#61727d}
html[data-theme="light"] .ak-demo-scene.is-active{color:#0d1720;border-color:#55b8e8;background:linear-gradient(145deg,rgba(85,215,255,.18),rgba(85,215,255,.06))}
html[data-theme="light"] .ak-demo-card-title small,html[data-theme="light"] .ak-demo-slider{color:#70818a}
html[data-theme="light"] .ak-demo-slider output{color:#0d1720}
html[data-theme="light"] .ak-demo-device,html[data-theme="light"] .ak-demo-mode button,html[data-theme="light"] .ak-demo-temp button,html[data-theme="light"] .ak-demo-curtains button,html[data-theme="light"] .ak-demo-power{background:#edf3f5;border-color:rgba(13,23,32,.08);color:#566975}
html[data-theme="light"] .ak-demo-device.active{background:rgba(85,215,255,.10);border-color:#55b8e8;color:#0d1720}
html[data-theme="light"] .ak-demo-device.is-selected{box-shadow:0 0 0 1px rgba(85,184,232,.55)}
html[data-theme="light"] .ak-demo-mode button.is-active{background:rgba(255,126,72,.12);border-color:#ff8b65;color:#ce5c2c}
html[data-theme="light"] .ak-demo-mode button[data-ak-climate="cool"].is-active{background:rgba(85,184,255,.12);border-color:#55b8ff;color:#1675b9}
html[data-theme="light"] .ak-demo-curtains button.is-active{background:rgba(85,215,255,.12);border-color:#55b8e8;color:#0d1720}
html[data-theme="light"] .ak-demo-temp strong{color:#0d1720}
@media (max-width:1000px){.ak-demo-header{grid-template-columns:1fr}.ak-demo-header p{justify-self:start}.ak-demo-shell{grid-template-columns:1fr}.ak-demo-panel{display:grid;grid-template-columns:1fr 1fr;align-content:start}.ak-demo-panel-head,.ak-demo-scenes{grid-column:1/-1}.ak-demo-card{min-width:0}}
@media (max-width:640px){.ak-demo-section{padding-top:68px}.ak-demo-header h2{font-size:48px}.ak-demo-stage{padding:8px;border-radius:22px}.ak-demo-room{aspect-ratio:4/3}.ak-demo-hotspot{display:none}.ak-demo-status{left:8px;bottom:8px}.ak-demo-status>span{padding:7px 8px}.ak-demo-status small{font-size:7px}.ak-demo-panel{grid-template-columns:1fr;padding:12px;border-radius:21px}.ak-demo-scenes{grid-column:auto}.ak-demo-card{padding:11px}}

/* Precise Window Shading Curtain Calibration (Calibrated to 1774x887 master architecture) */
.ak-demo-overlay-plane .ak-demo-curtain-visual {
  position: absolute;
  z-index: 1;
  top: 34.8%;
  height: 25.7%;
  width: 20.4%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2%;
  padding-top: 3px;
  border-top: 3px solid rgba(22, 28, 32, 0.96);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.28));
  pointer-events: none;
  overflow: hidden;
}
.ak-demo-overlay-plane .ak-demo-curtain-visual--left {
  left: 30.6%;
}
.ak-demo-overlay-plane .ak-demo-curtain-visual--right {
  left: 51.0%;
}
.ak-demo-curtain {
  position: relative;
  height: var(--curtain-level, 0%);
  overflow: visible;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 2px, rgba(78,72,64,.10) 3px, transparent 15px),
              linear-gradient(90deg, rgba(151,146,136,.96), rgba(224,220,210,.97) 48%, rgba(139,134,125,.96));
  box-shadow: inset 0 -1px rgba(255,255,255,.42), inset 7px 0 12px rgba(255,255,255,.08), 2px 0 5px rgba(0,0,0,.15);
  transition: height 2.6s cubic-bezier(.42,0,.25,1);
  will-change: height;
}
.ak-demo-curtain:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 18%, rgba(63,57,50,.09));
  opacity: .82;
}
.ak-demo-curtain:after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -4px;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d8d4ca, #77736c);
  box-shadow: 0 3px 5px rgba(0,0,0,.28);
}
.ak-demo-room.curtain-moving .ak-demo-curtain {
  filter: brightness(1.05);
}

/* Layering inside overlay plane */
.ak-demo-overlay-plane .ak-demo-light--chandelier {
  z-index: 2;
  transition: opacity .32s cubic-bezier(.2,.8,.2,1), visibility .32s ease;
}

.carousel-meta{position:relative;justify-content:center}.carousel-count{position:absolute;right:0}.references-all-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)!important;text-decoration:none}.references-all-btn:hover{border-color:var(--blue);color:var(--text)!important;box-shadow:0 10px 24px rgba(0,0,0,.10)}
@media (max-width:760px){.carousel-count{position:static;margin-left:18px}.carousel-meta{justify-content:center}.references-all-btn{min-height:38px}}

.ak-demo-room > img{pointer-events:none}
.ak-demo-room .ak-demo-hotspot{z-index:9}.ak-demo-room .ak-demo-status{z-index:10}

/* Calibrated hotspot locations for master photograph */
#akDemoRoom .hot-avize{left:50%;top:28%;transform:translateX(-50%)}
#akDemoRoom .hot-klima{right:4.2%;top:20.5%}
#akDemoRoom .hot-aplik{left:25.8%;top:42%}
#akDemoRoom .hot-curtain{left:64%;top:40%}

@media (max-width:760px){
  #akDemoRoom .hot-avize,#akDemoRoom .hot-klima,#akDemoRoom .hot-aplik,#akDemoRoom .hot-curtain{display:none}
  #akDemoRoom .ak-demo-overlay-plane{height:100%;aspect-ratio:1774/887}
}

/* Unified Integrated Scenario Bar (Prominent Scenario Deck) */
.ak-scenario-deck {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.scenario-pill-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.scenario-pill-btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  background: var(--surface-2);
}
.scenario-pill-btn.is-active {
  border-color: var(--primary);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: 0 10px 28px rgba(186,218,34,.18);
}
.scenario-pill-btn.is-active:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}
.scenario-pill-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 6px;
}
.scenario-pill-icon {
  font-size: 18px;
  color: var(--primary);
  line-height: 1;
}
.scenario-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: .2s;
}
.scenario-pill-btn.is-active .scenario-pill-dot {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
.scenario-pill-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 3px;
}
.scenario-pill-sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .ak-scenario-deck {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .ak-scenario-deck {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .scenario-pill-btn {
    padding: 10px 11px;
    border-radius: 14px;
  }
  .scenario-pill-title {
    font-size: 11.5px;
  }
  .scenario-pill-sub {
    font-size: 9px;
  }
}
