/* ============================================================
   КОНТРОЛ ДОМ — styles.css
   Палитра: тъмно синьо / графит / бяло / ледено синьо /
   електрик син акцент / топло златисто за светлина
   ============================================================ */

:root{
  --bg:        #070d18;
  --bg-2:      #0b1626;
  --bg-3:      #101d31;
  --ink:       #eef5fd;
  --muted:     #9db3ca;
  --ice:       #a8d8f5;
  --accent:    #2f9df4;
  --accent-2:  #56c2ff;
  --gold:      #ffca7a;
  --danger:    #ff5b5b;
  --ok:        #22d3a5;
  --glass:     rgba(255,255,255,.055);
  --glass-2:   rgba(255,255,255,.09);
  --stroke:    rgba(168,216,245,.16);
  --shadow:    0 24px 60px rgba(2,8,20,.55);
  --radius:    18px;
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  /* Цвят на декоративния LED върху снимката (сменя се от script.js) */
  --led: #ffb35c;
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3{ font-family:var(--font-display); line-height:1.15; letter-spacing:-.02em; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); font-weight:800; }
h3{ font-size:1.1rem; font-weight:700; }

.eyebrow{
  display:inline-block;
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:.7rem;
}
.section-head{ max-width:760px; margin:0 auto 2.6rem; text-align:center; padding:0 1.4rem; }
.section-sub{ color:var(--muted); margin-top:.9rem; font-size:1.02rem; }
section{ padding:5.5rem 0; }

/* ---------- Бутони ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:.75rem 1.4rem; border-radius:999px; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-lg{ padding:.95rem 1.8rem; font-size:1.02rem; }
.btn-sm{ padding:.5rem 1rem; font-size:.85rem; }
.btn-primary{
  background:linear-gradient(135deg, var(--accent), #1668c9);
  color:#fff;
  box-shadow:0 8px 26px rgba(47,157,244,.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(47,157,244,.5); }
.btn-ghost{
  background:rgba(10,20,36,.55); color:var(--ink);
  border-color:var(--stroke);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{ background:var(--glass-2); transform:translateY(-2px); }

:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(7,13,24,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(168,216,245,.08);
}
.header-inner{
  max-width:1240px; margin:0 auto; padding:.65rem 1.4rem;
  display:flex; align-items:center; gap:1.4rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand-logo{ height:44px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ font-family:var(--font-display); font-weight:800; letter-spacing:.06em; font-size:.98rem; }
.brand-text small{ font-size:.62rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.main-nav{ display:flex; gap:1.35rem; }
.main-nav a{
  font-size:.9rem; font-weight:500; color:var(--muted);
  transition:color .15s ease;
}
.main-nav a:hover{ color:var(--ice); }
.nav-toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; padding:.5rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO — върху реалната снимка на къщата
   ============================================================ */
.hero{
  position:relative;
  display:flex; align-items:center;
  padding:9.5rem 0 4.5rem;
  background:
    linear-gradient(180deg, rgba(7,13,24,.88) 0%, rgba(7,13,24,.72) 45%, rgba(7,13,24,.94) 100%),
    url("assets/hero.webp") center 35% / cover no-repeat;
}
.hero-inner{ position:relative; max-width:900px; margin:0 auto; padding:0 1.4rem; text-align:center; }
.hero-eyebrow{
  font-family:var(--font-display); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-size:.8rem; color:var(--gold); margin-bottom:1.1rem;
}
.hero h1{ font-size:clamp(2.2rem, 5.4vw, 4rem); font-weight:800; text-shadow:0 4px 30px rgba(2,8,20,.7); }
.grad{
  background:linear-gradient(100deg, var(--accent-2), var(--ice));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ color:#c6d6e8; font-size:clamp(1rem, 1.6vw, 1.15rem); max-width:720px; margin:1.3rem auto 0; text-shadow:0 2px 18px rgba(2,8,20,.8); }
.hero-badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem;
  margin:1.7rem auto 0; max-width:760px;
}
.hero-badges li{
  font-size:.8rem; font-weight:500; color:var(--ice);
  background:rgba(10,20,36,.6); border:1px solid var(--stroke);
  padding:.42rem .85rem; border-radius:999px;
  backdrop-filter:blur(8px);
}
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:2.1rem; }
.hero-hint{ margin-top:2rem; font-size:.85rem; color:var(--muted); }

/* Плавна поява при зареждане */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.anim-1,.anim-2,.anim-3,.anim-4,.anim-5{ animation:fadeUp .7s ease both; }
.anim-2{ animation-delay:.12s; } .anim-3{ animation-delay:.24s; }
.anim-4{ animation-delay:.36s; } .anim-5{ animation-delay:.48s; }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   ИНТЕРАКТИВНА КЪЩА (реална снимка + ефектни слоеве)
   ============================================================ */
.demo{ padding-top:2.5rem; }
.house-stage{
  position:relative;
  max-width:1240px; margin:0 auto; padding:0 1.4rem;
}
.house-frame{
  position:relative;
  border-radius:26px; overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  background:var(--bg-2);
}
/* Снимката на къщата — сменя се в index.html (.house-photo src) */
.house-photo{ display:block; width:100%; height:auto; }
.demo-caption{ text-align:center; color:var(--muted); font-size:.88rem; margin-top:1.1rem; padding:0 1.4rem; }

/* --- Ефектни слоеве върху снимката --- */
.fx-zones{ position:absolute; inset:0; pointer-events:none; }
.fx-zones > *{ position:absolute; }

.win-zone{ overflow:hidden; border-radius:4px; }
.win-zone > *{ position:absolute; inset:0; }
.win-dark{
  background:linear-gradient(180deg, rgba(9,16,29,.9), rgba(12,21,37,.96));
  opacity:0;
  transition:opacity .4s ease;
}
.win-glow{
  background:radial-gradient(ellipse 60% 80% at 50% 55%, rgba(255,214,150,.85), rgba(255,196,110,.25) 70%, transparent);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .4s ease;
}
.blind-cover{
  top:0; height:0%; bottom:auto;
  background:
    repeating-linear-gradient(180deg,
      rgba(24,34,50,.97) 0 9px,
      rgba(44,58,80,.97) 9px 11px);
  border-bottom:2px solid rgba(120,150,190,.7);
  transition:height .5s ease;
}

#heatGlow{
  background:radial-gradient(ellipse 70% 90% at 50% 80%, rgba(255,150,80,.75), transparent 70%);
  mix-blend-mode:screen;
  filter:blur(6px);
  opacity:0;
  transition:opacity .5s ease;
}
.led-strip{
  background:var(--led);
  filter:blur(4px);
  mix-blend-mode:screen;
  border-radius:999px;
  opacity:1;
  transition:background .35s ease, opacity .35s ease;
}
#poolTint{
  background:radial-gradient(ellipse 70% 60% at 50% 45%, var(--led), transparent 75%);
  mix-blend-mode:overlay;
  opacity:.5;
  transition:background .35s ease, opacity .35s ease;
  border-radius:20%;
}

.fx-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* Пръскачки */
.sprk .jet, .sprk .drop{ opacity:0; transition:opacity .25s ease; }
.sprk .drop{ fill:#cfe9ff; }
.house-frame.irrigating .sprk .jet{ opacity:.9; animation:jetflow 1.1s ease-in-out infinite; }
.house-frame.irrigating .sprk .drop{ animation:dropfall 1.2s ease-in infinite; }
.house-frame.irrigating .sprk .drop.d2{ animation-delay:.35s; }
.house-frame.irrigating .sprk .drop.d3{ animation-delay:.7s; }
@keyframes jetflow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes dropfall{ 0%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(46px); opacity:0; } }

/* Вентилация — въздушни линии */
.air{ stroke:#9fdcff; stroke-width:5; stroke-dasharray:16 26; opacity:0; transition:opacity .3s ease; }
.house-frame.vent-on .air{ opacity:.55; animation:flow var(--vent-speed,1.8s) linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-84; } }

/* Wi-Fi вълни */
#wifiWaves .wave{ opacity:0; transition:opacity .3s ease; }
.house-frame.wifi-on #wifiWaves .wave{ animation:wifi 1.8s ease-out infinite; }
.house-frame.wifi-on #wifiWaves .w2{ animation-delay:.3s; }
.house-frame.wifi-on #wifiWaves .w3{ animation-delay:.6s; }
@keyframes wifi{ 0%{ opacity:0; } 30%{ opacity:.95; } 100%{ opacity:0; } }

/* Аудио пулсации */
#audioRings .spk{ fill:#cfe9ff; opacity:0; transition:opacity .25s ease; }
#audioRings .ring{ fill:none; stroke:var(--accent-2); stroke-width:4; opacity:0; }
#audioRings g.on .spk{ opacity:.95; }
.house-frame.audio-playing #audioRings g.on .ring{ animation:ringout 1.4s ease-out infinite; }
@keyframes ringout{ 0%{ opacity:.9; r:12; } 100%{ opacity:0; r:52; } }

/* Теч и камера */
#leakFlash{ transition:opacity .3s ease; }
.house-frame.leak #leakFlash{ opacity:1; animation:blink .8s steps(2) infinite; }
#camDot{ transition:fill .25s ease; }
@keyframes blink{ 50%{ opacity:.25; } }

/* --- Балончета (оригиналните иконки от сайта) --- */
.hotspot-layer{ position:absolute; inset:0; }
.hotspot{
  position:absolute; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  padding:0; border:0; background:transparent;
  filter:drop-shadow(0 6px 16px rgba(2,8,20,.6));
  transition:transform .18s ease;
}
.hotspot img{
  width:100%; height:100%; object-fit:contain; border-radius:50%;
}
.badge-svg{
  display:flex; width:100%; height:100%; border-radius:50%;
  align-items:center; justify-content:center;
  color:#dceeff;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.28) 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.22) 1.2px, transparent 2px),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,.2) 1px, transparent 1.8px),
    radial-gradient(circle at 35% 40%, #2b6cb8 0%, #123564 55%, #0b2347 100%);
  border:3px solid #f2f7fc;
  box-shadow:inset 0 0 14px rgba(0,10,30,.55);
}
.badge-svg svg{ width:52%; height:52%; }
.hotspot::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  animation:pulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{ transform:scale(.82); opacity:.9; }
  70%{ transform:scale(1.22); opacity:0; }
  100%{ transform:scale(1.22); opacity:0; }
}
.hotspot:hover, .hotspot:focus-visible, .hotspot.active{
  transform:translate(-50%,-50%) scale(1.14);
}
.hotspot.active{ filter:drop-shadow(0 0 14px rgba(86,194,255,.85)); }
.hotspot.featured{ width:66px; height:66px; }
.hotspot.featured .badge-svg{ border-color:var(--gold); color:#ffe3b0; }
.hotspot.featured::after{ border-color:rgba(255,202,122,.75); }
.hotspot .tip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  background:rgba(8,16,30,.94); border:1px solid var(--stroke);
  color:var(--ink); font-size:.74rem; font-weight:600; white-space:nowrap;
  padding:.32rem .7rem; border-radius:8px;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:5;
}
.hotspot:hover .tip, .hotspot:focus-visible .tip{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --- Мобилна лента с карти --- */
.hotspot-rail{
  display:none;
  gap:.6rem; overflow-x:auto; padding:1rem .2rem .4rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rail-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  min-width:106px;
  background:var(--glass); border:1px solid var(--stroke); border-radius:14px;
  color:var(--ice); font-size:.72rem; font-weight:600;
  padding:.7rem .6rem;
  transition:border-color .15s ease, background .15s ease;
}
.rail-card img, .rail-card .badge-svg{ width:40px; height:40px; }
.rail-card .badge-svg{ border-width:2px; }
.rail-card.active{ border-color:var(--accent-2); background:rgba(47,157,244,.14); }

/* --- Контролен панел (glassmorphism) --- */
.control-panel{
  position:absolute; top:1.2rem; right:2.4rem; z-index:20;
  width:min(372px, calc(100% - 3rem));
  max-height:calc(100% - 2.4rem);
  overflow-y:auto;
  background:rgba(10,19,34,.84);
  border:1px solid var(--stroke);
  border-radius:20px;
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  padding:1.1rem 1.2rem 1.2rem;
  animation:panelIn .32s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes panelIn{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
.panel-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.panel-icon{ flex:none; width:42px; height:42px; }
.panel-icon img{ width:100%; height:100%; object-fit:contain; }
.panel-icon .badge-svg{ border-width:2px; }
.panel-head h3{ font-size:1.02rem; margin-right:auto; }
.panel-close{
  background:var(--glass); border:1px solid var(--stroke); color:var(--muted);
  width:32px; height:32px; border-radius:9px; font-size:.85rem;
  transition:color .15s ease, border-color .15s ease;
  flex:none;
}
.panel-close:hover{ color:var(--ink); border-color:var(--accent-2); }
.panel-text{ color:var(--muted); font-size:.86rem; margin-top:.95rem; }
.panel-foot{ margin-top:1rem; }
.panel-backdrop{ display:none; }

/* --- Контроли в панела --- */
.ctl{ margin-bottom:.85rem; }
.ctl:last-child{ margin-bottom:0; }
.ctl-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.ctl-label{ font-size:.84rem; font-weight:600; color:var(--ice); }
.ctl-value{ font-family:var(--font-display); font-weight:700; font-size:.86rem; color:var(--ink); }

.switch{
  position:relative; width:48px; height:26px; border-radius:999px;
  background:rgba(168,216,245,.18); border:1px solid var(--stroke);
  transition:background .18s ease;
  flex:none;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#dfeaf6; transition:transform .18s ease, background .18s ease;
}
.switch[aria-checked="true"]{ background:linear-gradient(135deg, var(--accent), #1668c9); }
.switch[aria-checked="true"]::after{ transform:translateX(22px); background:#fff; }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent) var(--fill,50%), rgba(168,216,245,.18) var(--fill,50%));
  outline-offset:4px;
  margin-top:.45rem;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(2,8,20,.5); cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--accent); cursor:pointer;
}

.seg{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.seg button{
  flex:1 1 auto;
  background:var(--glass); border:1px solid var(--stroke); color:var(--muted);
  font-size:.78rem; font-weight:600; padding:.48rem .6rem; border-radius:10px;
  transition:all .15s ease;
}
.seg button[aria-pressed="true"]{
  background:rgba(47,157,244,.2); border-color:var(--accent-2); color:var(--ink);
}
.chips{ display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{
  background:var(--glass); border:1px solid var(--stroke); color:var(--muted);
  font-size:.76rem; font-weight:600; padding:.4rem .75rem; border-radius:999px;
  transition:all .15s ease;
}
.chip[aria-pressed="true"]{ background:rgba(34,211,165,.16); border-color:var(--ok); color:#c8f5e8; }
.chip.chip-accent[aria-pressed="true"]{ background:rgba(47,157,244,.18); border-color:var(--accent-2); color:var(--ice); }

.swatches{ display:flex; gap:.55rem; margin-top:.45rem; }
.swatch{
  width:40px; height:40px; border-radius:12px; border:2px solid transparent;
  display:flex; align-items:flex-end; justify-content:center;
  font-size:.56rem; font-weight:700; color:rgba(255,255,255,.85); padding-bottom:3px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  transition:transform .15s ease, border-color .15s ease;
}
.swatch:hover{ transform:translateY(-2px); }
.swatch[aria-pressed="true"]{ border-color:#fff; box-shadow:0 0 0 3px rgba(86,194,255,.3); }

.thermo{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  background:var(--glass); border:1px solid var(--stroke); border-radius:16px;
  padding:.9rem;
}
.thermo-temp{ font-family:var(--font-display); font-size:2.1rem; font-weight:800; min-width:110px; text-align:center; }
.thermo-temp small{ font-size:1rem; color:var(--muted); font-weight:600; }
.round-btn{
  width:42px; height:42px; border-radius:50%;
  background:var(--glass-2); border:1px solid var(--stroke); color:var(--ink);
  font-size:1.25rem; font-weight:700;
  transition:all .15s ease;
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.round-btn:hover{ border-color:var(--accent-2); transform:scale(1.06); }
.round-btn svg{ width:20px; height:20px; }

.status-line{
  display:flex; align-items:center; gap:.55rem;
  background:var(--glass); border:1px solid var(--stroke); border-radius:12px;
  padding:.6rem .8rem; font-size:.82rem; font-weight:600;
}
.status-dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
.status-line.warn .status-dot{ background:var(--danger); animation:blink 1s steps(2) infinite; }
.status-line.warn{ border-color:rgba(255,91,91,.5); color:#ffd7d7; }
.status-line.scan .status-dot{ background:var(--accent-2); animation:blink .7s steps(2) infinite; }

.zones-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.45rem; }
.zone{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--glass); border:1px solid var(--stroke); border-radius:10px;
  padding:.5rem .65rem; font-size:.76rem; font-weight:600; color:var(--muted);
  transition:all .15s ease;
}
.zone[aria-pressed="true"]{ border-color:var(--accent-2); color:var(--ice); background:rgba(47,157,244,.13); }
.zone .z-dot{ width:7px; height:7px; border-radius:50%; background:rgba(168,216,245,.3); }
.zone[aria-pressed="true"] .z-dot{ background:var(--accent-2); box-shadow:0 0 8px var(--accent-2); }

/* Аудио waveform */
.wave-bars{ display:flex; align-items:flex-end; gap:3.5px; height:30px; flex:1; }
.wave-bars i{
  flex:1; max-width:6px; border-radius:3px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  height:22%;
}
.playing .wave-bars i{ animation:wave .9s ease-in-out infinite; }
.wave-bars i:nth-child(2n){ animation-delay:.15s; }
.wave-bars i:nth-child(3n){ animation-delay:.3s; }
.wave-bars i:nth-child(4n){ animation-delay:.45s; }
@keyframes wave{ 0%,100%{ height:18%; } 50%{ height:95%; } }

/* Мини карти (мрежа, табло) и гаражна мини-сцена */
.net-map{ background:var(--glass); border:1px solid var(--stroke); border-radius:14px; padding:.7rem; }
.net-map svg{ width:100%; height:auto; display:block; }
.garage-stage{ background:var(--glass); border:1px solid var(--stroke); border-radius:14px; overflow:hidden; }
.garage-stage svg{ width:100%; height:auto; display:block; }
.g-door{ transition:transform 1.5s cubic-bezier(.5,.05,.4,1); }
.garage-stage.g-open .g-door{ transform:translateY(-91px); }
.g-beam{ opacity:0; transition:opacity .3s ease; }
.garage-stage.g-scan .g-beam{ opacity:.95; animation:scanline .8s linear infinite; }
@keyframes scanline{ to{ stroke-dashoffset:-26; } }
.g-plate{ transition:fill .3s ease; }
.garage-stage.g-ok .g-plate, .garage-stage.g-open .g-plate{ fill:#8ff3cf; }

/* ============================================================
   SOLUTIONS GRID
   ============================================================ */
.solutions{ background:linear-gradient(180deg, var(--bg), var(--bg-2) 40%, var(--bg)); }
.solutions-grid{
  max-width:1240px; margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem;
}
.sol-card{
  text-align:left;
  background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius);
  padding:1.25rem 1.2rem;
  color:var(--ink);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
  display:flex; flex-direction:column; gap:.55rem;
}
.sol-card:hover{ transform:translateY(-5px); border-color:rgba(86,194,255,.45); background:var(--glass-2); }
.sol-card .sol-ico{
  width:48px; height:48px;
  transition:transform .25s ease;
}
.sol-card .sol-ico img{ width:100%; height:100%; object-fit:contain; }
.sol-card .sol-ico .badge-svg{ border-width:2px; }
.sol-card:hover .sol-ico{ transform:scale(1.12) rotate(-4deg); }
.sol-card h3{ font-size:.98rem; }
.sol-card p{ font-size:.83rem; color:var(--muted); }
.sol-card .sol-try{ font-size:.76rem; font-weight:700; color:var(--accent-2); margin-top:auto; opacity:0; transition:opacity .2s ease; }
.sol-card:hover .sol-try{ opacity:1; }

/* ============================================================
   BMS СЕКЦИЯ
   ============================================================ */
.bms-wrap{
  max-width:1240px; margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:1.05fr 1fr; gap:3.4rem; align-items:center;
}
.bms-copy p{ color:var(--muted); margin:.9rem 0 1.4rem; }
.local-first{ margin-top:2.2rem; background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.local-first h3{ margin-bottom:.8rem; color:var(--ice); }
.local-first li{ font-size:.9rem; color:var(--muted); padding:.4rem 0 .4rem 1.4rem; position:relative; }
.local-first li::before{ content:"▸"; position:absolute; left:0; color:var(--accent-2); }
.local-first strong{ color:var(--ink); }

.tablet-frame{
  background:#0a121f; border:1px solid rgba(168,216,245,.22); border-radius:26px;
  padding:14px; box-shadow:var(--shadow);
  transform:rotate(1.6deg);
}
.tablet-screen{
  background:linear-gradient(160deg, #0e1b2e, #0a1322);
  border-radius:16px; padding:1rem; min-height:320px;
}
.mini-dash-head{
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:600; color:var(--ice); margin-bottom:.9rem;
}
.mini-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); }
.mini-time{ margin-left:auto; color:var(--muted); font-weight:500; }
.mini-dash-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.6rem; }
.mini-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(168,216,245,.12); border-radius:13px;
  padding:.8rem .85rem; display:flex; flex-direction:column; gap:.15rem;
}
.mini-card.on{ border-color:rgba(86,194,255,.4); background:rgba(47,157,244,.1); }
.mc-ico{ font-size:1.05rem; }
.mc-name{ font-size:.8rem; font-weight:700; }
.mc-val{ font-size:.7rem; color:var(--muted); }

/* ============================================================
   ПРОЦЕС
   ============================================================ */
.process-steps{
  max-width:1240px; margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1rem;
}
.process-steps li{
  position:relative;
  background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius);
  padding:1.3rem 1.2rem 1.2rem;
}
.step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; margin-bottom:.7rem;
  background:rgba(47,157,244,.16); border:1px solid rgba(86,194,255,.3);
  font-family:var(--font-display); font-weight:800; color:var(--accent-2);
}
.process-steps h3{ font-size:.95rem; margin-bottom:.35rem; }
.process-steps p{ font-size:.83rem; color:var(--muted); }

/* ============================================================
   ЗА НАС
   ============================================================ */
.about{ background:linear-gradient(180deg, var(--bg), var(--bg-2) 45%, var(--bg)); }
.about-wrap{
  max-width:1240px; margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:1.25fr 1fr; gap:3rem; align-items:start;
}
.about-copy p{ color:var(--muted); margin-top:1rem; }
.about-copy blockquote{
  margin:1.5rem 0; padding:1rem 1.3rem;
  border-left:3px solid var(--gold);
  background:rgba(255,202,122,.06); border-radius:0 14px 14px 0;
  color:var(--ice); font-style:italic;
}
.about-bullets{ margin-top:1.4rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; }
.about-bullets li{ font-size:.88rem; color:var(--muted); padding-left:1.35rem; position:relative; }
.about-bullets li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; }
.fit{
  background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.3rem;
}
.fit h3{ margin-bottom:1rem; color:var(--ice); }
.fit-list li{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.9rem; color:var(--muted);
  padding:.55rem 0;
  border-bottom:1px solid rgba(168,216,245,.08);
}
.fit-list li:last-child{ border-bottom:0; }
.fit-list span{ flex:none; }

/* ============================================================
   КОНТАКТ
   ============================================================ */
.contact-card{
  max-width:860px; margin:0 auto; padding:3rem 2.4rem; text-align:center;
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(47,157,244,.14), transparent 70%),
    var(--glass);
  border:1px solid var(--stroke); border-radius:26px;
}
.contact-card p{ color:var(--muted); max-width:620px; margin:1rem auto 0; }
.contact-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:1.9rem; }
.contact-mail{ margin-top:1.7rem; font-size:.95rem; }
.contact-mail a{ color:var(--accent-2); font-weight:600; }
.copy-mail{
  margin-left:.6rem; background:var(--glass); border:1px solid var(--stroke); color:var(--muted);
  font-size:.74rem; font-weight:600; padding:.28rem .7rem; border-radius:999px;
  transition:all .15s ease;
}
.copy-mail:hover{ color:var(--ink); border-color:var(--accent-2); }
.copy-ok{ margin-left:.5rem; font-size:.78rem; color:var(--ok); font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top:1px solid rgba(168,216,245,.08); padding:2.6rem 0 2.2rem; }
.footer-inner{ max-width:1240px; margin:0 auto; padding:0 1.4rem; text-align:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.footer-brand .brand-logo{ height:64px; }
.footer-brand p{ color:var(--gold); font-family:var(--font-display); font-weight:600; font-size:.92rem; }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; margin:1.4rem 0 1rem; }
.footer-nav a{ font-size:.85rem; color:var(--muted); }
.footer-nav a:hover{ color:var(--ice); }
.footer-note{ font-size:.78rem; color:rgba(157,179,202,.65); }

/* ============================================================
   BMS OVERLAY DASHBOARD
   ============================================================ */
.bms-overlay{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:1.4rem; }
.bms-overlay-backdrop{ position:absolute; inset:0; background:rgba(4,8,16,.72); backdrop-filter:blur(8px); }
.bms-shell{
  position:relative; width:min(1020px, 100%); max-height:92vh; overflow-y:auto;
  background:rgba(9,17,31,.92);
  border:1px solid rgba(168,216,245,.24);
  border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  padding:1.4rem 1.5rem 1.2rem;
  animation:panelIn .34s cubic-bezier(.2,.9,.3,1) both;
}
.bms-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.bms-head-left{ display:flex; align-items:center; gap:.9rem; }
.bms-logo{ height:44px; }
.bms-head h3{ font-size:1.05rem; }
.bms-sub{ font-size:.76rem; color:var(--muted); }
.bms-head-right{ display:flex; align-items:center; gap:.6rem; }
.bms-chip{
  background:var(--glass); border:1px solid var(--stroke); border-radius:999px;
  font-size:.78rem; font-weight:600; padding:.4rem .8rem; color:var(--ice);
}
.bms-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:.85rem;
}
.bms-card{
  background:rgba(255,255,255,.045); border:1px solid rgba(168,216,245,.14); border-radius:16px;
  padding:1rem 1rem .95rem;
}
.bms-card > h4{
  font-family:var(--font-display); font-size:.85rem; font-weight:700;
  display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; color:var(--ice);
}
.bms-card > h4 svg{ width:17px; height:17px; color:var(--accent-2); flex:none; }
.bms-card .ctl:last-child{ margin-bottom:0; }
.bms-note{ margin-top:1.1rem; text-align:center; font-size:.74rem; color:rgba(157,179,202,.6); }
.energy-bars{ display:flex; align-items:flex-end; gap:5px; height:44px; margin-top:.4rem; }
.energy-bars i{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--accent-2), rgba(47,157,244,.25)); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .bms-wrap, .about-wrap{ grid-template-columns:1fr; gap:2.2rem; }
  .tablet-frame{ transform:none; max-width:520px; margin:0 auto; }
}
@media (max-width: 900px){
  .main-nav{
    position:fixed; top:60px; right:0; left:0;
    flex-direction:column; gap:0;
    background:rgba(7,13,24,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--stroke);
    padding:.6rem 1.4rem 1rem;
    transform:translateY(-130%); transition:transform .25s ease;
  }
  .main-nav.open{ transform:none; }
  .main-nav a{ padding:.75rem 0; border-bottom:1px solid rgba(168,216,245,.07); }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
}
@media (max-width: 860px){
  section{ padding:4rem 0; }
  .hero{ padding-top:7.5rem; }
  /* Мобилен режим на демонстрацията: swipe карти вместо балончета */
  .hotspot-layer{ display:none; }
  .hotspot-rail{ display:flex; }
  .control-panel{
    position:fixed; inset:auto 0 0 0; z-index:90;
    width:100%; max-height:72vh;
    border-radius:20px 20px 0 0;
    animation:sheetIn .3s cubic-bezier(.2,.9,.3,1) both;
  }
  .panel-backdrop{
    display:block; position:fixed; inset:0; z-index:85;
    background:rgba(4,8,16,.55);
  }
  .about-bullets{ grid-template-columns:1fr; }
  .contact-card{ padding:2.2rem 1.4rem; }
}
@keyframes sheetIn{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
@media (max-width: 480px){
  .brand-text small{ display:none; }
  .hero-badges li{ font-size:.72rem; }
  .mini-dash-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hotspot::after{ display:none; }
}

/* ============================================================
   V3 — ПЕРСПЕКТИВНИ ПРОЗОРЦИ, СЦЕНИ, НОВ BMS, МАПЕР
   ============================================================ */

/* Прозорци (SVG четириъгълници в перспектива) */
.w-glow{ fill:#ffd396; mix-blend-mode:screen; opacity:0; transition:opacity .4s ease; }
.w-dark{ fill:#0a1424; opacity:0; transition:opacity .4s ease; }
.w-led{ fill:var(--led); mix-blend-mode:overlay; opacity:0; transition:opacity .35s ease, fill .35s ease; }
.wb-fill{ fill:rgba(28,40,60,.96); }
.wb-slat{ stroke:rgba(98,122,156,.9); stroke-width:3; }
.wb-bar{ stroke:#a9c2e2; stroke-width:5; stroke-linecap:round; }

/* Покривало на басейна */
.pc-fill{ fill:rgba(171,195,213,.9); }
.pc-slat{ stroke:rgba(116,146,172,.85); stroke-width:3; }
.pc-bar{ stroke:#eef6fc; stroke-width:6; stroke-linecap:round; }

/* Джакузи мехурчета */
.bubble{ fill:rgba(255,255,255,.85); opacity:0; }
.house-frame.spa-on .bubble{ animation:bub linear infinite; }
@keyframes bub{
  0%{ transform:translateY(0); opacity:0; }
  14%{ opacity:.9; }
  100%{ transform:translateY(-64px); opacity:0; }
}

/* Камина — зона релакс */
.fire-glow{ fill:#ff9a3c; mix-blend-mode:screen; filter:blur(10px); opacity:0; }
.house-frame.fire-on .fire-glow{ animation:flick 1.3s ease-in-out infinite; }
@keyframes flick{ 0%,100%{ opacity:.5; } 40%{ opacity:.85; } 70%{ opacity:.65; } }
.fire-cover{ fill:#141c24; filter:blur(6px); opacity:0; transition:opacity .4s ease; }
.house-frame:not(.fire-on) .fire-cover{ opacity:.95; }

/* Сцени */
.scene-bar{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.scene-toast{
  margin:.7rem auto 0; max-width:760px; text-align:center;
  background:rgba(10,20,36,.92); border:1px solid var(--stroke); border-radius:12px;
  padding:.65rem 1rem; font-size:.85rem; font-weight:600; color:var(--ice);
}
.scene-toast.warn{ border-color:rgba(255,91,91,.6); color:#ffd7d7; background:rgba(48,14,18,.85); }

/* Списъци по прозорци в панелите */
.win-list{ border-top:1px solid rgba(168,216,245,.1); padding-top:.7rem; }
.win-list .ctl{ margin-bottom:.6rem; }
.win-row{ margin-bottom:.75rem; }
.win-row .ctl{ margin-bottom:.15rem; }
.chip-open[aria-pressed="true"]{
  background:rgba(255,202,122,.14); border-color:var(--gold); color:#ffe3b0;
}

/* Мрежова статистика */
.net-stats{ display:flex; flex-direction:column; gap:.4rem; }
.net-stats > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:.8rem;
  background:var(--glass); border:1px solid var(--stroke); border-radius:10px;
  padding:.5rem .7rem;
}
.net-stats span{ font-size:.76rem; color:var(--muted); font-weight:600; }
.net-stats strong{ font-size:.8rem; color:var(--ice); text-align:right; }
.net-stats small{ color:var(--muted); font-weight:500; }

/* BMS: подменюта вляво + жива мини-къща вдясно */
.bms-shell{ width:min(1280px, 100%); }
.bms-body{ display:grid; grid-template-columns:400px 1fr; gap:1.2rem; align-items:start; }
.bms-left{ max-height:68vh; overflow-y:auto; padding-right:.35rem; }
.bms-scenes{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem; }
.bms-left .scene-toast{ margin:.5rem 0 0; max-width:none; text-align:left; }
.bms-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.8rem 0; }
.bms-grid{ grid-template-columns:1fr; }
.bms-house{ position:sticky; top:0; }
.bms-house-hint{ font-size:.76rem; color:var(--muted); margin-bottom:.55rem; }
.house-frame.mini{ border-radius:18px; }
.house-frame.mini .hotspot-layer{ display:none; }

@media (max-width: 1000px){
  .bms-body{ grid-template-columns:1fr; }
  .bms-house{ order:-1; position:static; }
  .bms-left{ max-height:none; overflow:visible; }
}

/* ?map — калибрационен режим */
.map-poly{ fill:rgba(86,194,255,.08); stroke:#56c2ff; stroke-width:3; stroke-dasharray:12 9; }
.map-handle{ fill:#ffffff; stroke:#2f9df4; stroke-width:5; cursor:grab; }
.map-handle:active{ cursor:grabbing; }
.map-label{ fill:#9fe0ff; font:600 32px Inter, sans-serif; paint-order:stroke; stroke:rgba(4,10,20,.8); stroke-width:6; }
.map-code{
  position:fixed; left:12px; bottom:12px; z-index:200;
  width:min(600px, 92vw); height:160px;
  background:rgba(8,16,30,.96); color:#bfe3ff;
  border:1px solid #2f9df4; border-radius:10px;
  font:12px/1.5 ui-monospace, monospace; padding:10px; resize:vertical;
}
.house-frame.mapping .hotspot-layer{ display:none; }

/* ============================================================
   V4 — по-малки балончета, реалистични щори, отражения,
   3 поливни зони, custom цвят, таблет dashboard, разширен мапер
   ============================================================ */

/* По-малки балончета (по-точно позициониране) */
.hotspot{ width:44px; height:44px; }
.hotspot.featured{ width:54px; height:54px; }
.badge-svg{ border-width:2.5px; }
.hotspot::after{ inset:-6px; }

/* По-тъмни, реалистични щори (текстилен градиент) */
.wb-fill{ fill:url(#blindGrad); }
.wb-slat{ stroke:rgba(52,66,90,.8); stroke-width:2.5; }
.wb-bar{ stroke:#5f7494; stroke-width:5; }

/* Отражения във водата — винаги полупрозрачни + леко размити */
.reflection{ opacity:.34; filter:blur(2.5px); }
.reflection .wb-bar{ stroke-width:4; }

/* Custom цвят (color wheel) */
.swatch-custom{
  position:relative; overflow:hidden; cursor:pointer;
  background:conic-gradient(#ff5b5b,#ffca7a,#8be96b,#56c2ff,#7a6bff,#ff6bd5,#ff5b5b);
}
.swatch-custom input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.swatch-custom[aria-pressed="true"]{ border-color:#fff; box-shadow:0 0 0 3px rgba(86,194,255,.3); }

/* 3 поливни зони */
.zones-grid.zones-3{ grid-template-columns:1fr; }
.house-frame.irrigating-z1 .sprk.z1 .jet,
.house-frame.irrigating-z2 .sprk.z2 .jet,
.house-frame.irrigating-z3 .sprk.z3 .jet{
  opacity:.9; animation:jetflow 1.1s ease-in-out infinite;
}
.house-frame.irrigating-z1 .sprk.z1 .drop,
.house-frame.irrigating-z2 .sprk.z2 .drop,
.house-frame.irrigating-z3 .sprk.z3 .drop{
  animation:dropfall 1.2s ease-in infinite;
}
.house-frame.irrigating-z1 .sprk.z1 .drop.d2,
.house-frame.irrigating-z2 .sprk.z2 .drop.d2,
.house-frame.irrigating-z3 .sprk.z3 .drop.d2{ animation-delay:.35s; }
.house-frame.irrigating-z1 .sprk.z1 .drop.d3,
.house-frame.irrigating-z2 .sprk.z2 .drop.d3,
.house-frame.irrigating-z3 .sprk.z3 .drop.d3{ animation-delay:.7s; }

/* BMS: бутон за режим + таблет вариант (12" стенен таблет) */
.bms-mode-btn{ cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.bms-mode-btn:hover{ border-color:var(--accent-2); color:var(--ink); }
.bms-shell.tablet .bms-body{ grid-template-columns:1fr; }
.bms-shell.tablet .bms-house{ display:none; }
.bms-shell.tablet .bms-tabs{ display:none; }
.bms-shell.tablet .bms-left{ max-height:none; overflow:visible; }
.bms-shell.tablet .bms-grid{
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}

/* Мапер — нови елементи */
.map-poly-refl{ stroke:#8be9ff; stroke-dasharray:5 6; fill:rgba(139,233,255,.06); }
.map-box{ fill:rgba(255,202,122,.08); stroke:var(--gold); stroke-width:3; stroke-dasharray:10 8; }
.map-handle-sm{ fill:#ffe3b0; stroke:#c98a2e; stroke-width:4; }
.map-handle-jac{ fill:#a7f3d0; stroke:#059669; stroke-width:4; }
.map-handle-spr{ fill:#bfe3ff; stroke:#1d7fd4; stroke-width:4; }
.map-handle-sys{ fill:#f3c6ff; stroke:#a03ad4; stroke-width:4; }
.map-label-sm{ font-size:24px; }
.map-label-sys{ fill:#f3c6ff; }
.mapping .hotspot-layer{ display:block; pointer-events:none; opacity:.45; }
.mapping .hotspot::after{ display:none; }
.map-names{
  position:fixed; right:12px; top:74px; z-index:200;
  display:flex; flex-direction:column; gap:.4rem;
  background:rgba(8,16,30,.96); border:1px solid #2f9df4; border-radius:10px;
  padding:.8rem .9rem; width:min(280px, 40vw);
}
.map-names h4{ font-family:var(--font-display); font-size:.85rem; color:var(--ice); margin-bottom:.2rem; }
.map-names label{ display:flex; align-items:center; gap:.5rem; }
.map-names label span{ font:600 11px ui-monospace, monospace; color:#7fd0ff; width:24px; }
.map-names input{
  flex:1; background:rgba(255,255,255,.06); border:1px solid var(--stroke);
  border-radius:7px; color:var(--ink); font-size:.8rem; padding:.3rem .5rem;
}
.map-names input:focus{ outline:1px solid var(--accent-2); }

/* ============================================================
   V5 — слънце и ден/нощ, HA термостат, party вентилация,
   drag панели, форма с валидация, слоеве в мапера
   ============================================================ */

/* Слънце */
#sunFx{ cursor:grab; }
#sunFx:active{ cursor:grabbing; }
.sun-disc{ fill:#fff3cf; stroke:rgba(255,255,255,.85); stroke-width:3; transition:fill .3s ease; }
.sun-glow{ fill:#fff3cf; opacity:.35; filter:blur(26px); transition:fill .3s ease; }

/* Ден/нощ тониране на снимката */
#sunWarm, #sunDark{ position:absolute; inset:0; pointer-events:none; transition:opacity .25s ease; }
#sunWarm{
  background:linear-gradient(180deg, rgba(255,148,66,.9), rgba(255,120,60,.3) 55%, rgba(255,120,60,.08));
  mix-blend-mode:soft-light;
  opacity:0;
}
#sunDark{
  background:linear-gradient(180deg, rgba(5,10,28,.95), rgba(7,13,32,.78) 55%, rgba(9,15,34,.88));
  opacity:0;
}

/* Соларно сияние на покрива */
#solarGlow{
  background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(255,244,200,.95), rgba(255,230,160,.35) 65%, transparent);
  mix-blend-mode:screen;
  filter:blur(5px);
  opacity:0;
  transition:opacity .3s ease;
}

/* Вентилация: Party — горните потоци спират, a3 се забързва */
.house-frame[data-vent="party"] .air.a1,
.house-frame[data-vent="party"] .air.a2{ animation:none !important; opacity:.1 !important; }
.house-frame[data-vent="party"].vent-on .air.a3{
  animation-duration:.3s !important;
  opacity:.95 !important;
  stroke-width:7;
}

/* HA-стил термостат */
.ha-thermo{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.ht-svg{ width:min(230px, 100%); touch-action:none; cursor:pointer; }
.ht-track{ fill:none; stroke:rgba(168,216,245,.14); stroke-width:14; stroke-linecap:round; }
.ht-val{ fill:none; stroke:url(#thermoGrad); stroke-width:14; stroke-linecap:round; }
.ht-dot{ fill:#fff; stroke:var(--accent); stroke-width:4; }
.ht-temp{ fill:var(--ink); font:800 44px var(--font-display); }
.ht-sub{ fill:var(--muted); font:600 14px var(--font-body); }
.ht-lim{ fill:rgba(157,179,202,.55); font:600 12px var(--font-body); }
.ht-btns{ display:flex; gap:2.6rem; margin-top:-1.6rem; }

/* Форма за запитване / оглед */
.contact-form{ max-width:640px; margin:1.9rem auto 0; text-align:left; }
.form-type{ margin-bottom:1rem; }
.form-type button{ font-size:.88rem; padding:.6rem .8rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem .9rem; }
.contact-form label{
  display:flex; flex-direction:column; gap:.32rem;
  font-size:.8rem; font-weight:600; color:var(--ice);
}
.contact-form label:first-child{ grid-column:1 / -1; }
.form-addr, .form-msg{ grid-column:1 / -1; }
.contact-form input, .contact-form textarea{
  background:rgba(255,255,255,.055); border:1px solid var(--stroke);
  border-radius:11px; color:var(--ink);
  font-family:var(--font-body); font-size:.92rem;
  padding:.65rem .8rem;
  transition:border-color .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent-2);
}
.contact-form input.invalid{ border-color:var(--danger); }
.ferr{ font-size:.74rem; font-weight:600; color:#ffb0b0; min-height:0; }
.form-submit{ margin-top:1.1rem; width:100%; }
.form-note{ margin-top:.7rem; font-size:.76rem; color:rgba(157,179,202,.7); text-align:center; }
@media (max-width: 620px){ .form-grid{ grid-template-columns:1fr; } }

/* Мапер: слоеве + нови дръжки */
.map-layers{
  position:fixed; left:12px; top:74px; z-index:200;
  display:flex; flex-direction:column; gap:.35rem;
  background:rgba(8,16,30,.96); border:1px solid #2f9df4; border-radius:10px;
  padding:.7rem .8rem; width:170px;
}
.map-layers h4{ font-family:var(--font-display); font-size:.8rem; color:var(--ice); margin-bottom:.2rem; }
.map-layers .chip{ text-align:left; }
.map-air{ fill:none; stroke:#9fdcff; stroke-width:4; stroke-dasharray:10 8; opacity:.85; }
.map-sun{ fill:none; stroke:#ffca7a; stroke-width:4; stroke-dasharray:14 10; opacity:.9; }
.map-handle-air{ fill:#d6f0ff; stroke:#2b7fc0; stroke-width:4; }
.map-handle-sun{ fill:#ffe9b0; stroke:#e08a1e; stroke-width:4; }
.energy-flow strong.ok{ color:#8ff3cf; }

/* Панелът се влачи за заглавието */
.panel-head{ cursor:grab; user-select:none; touch-action:none; }
.panel-head:active{ cursor:grabbing; }

/* ============================================================
   V6 — слънчеви стрелки, HA color wheel, LED quad-ове,
   свиваеми списъци, плътен таблет режим, добавяне в мапера
   ============================================================ */

/* Стрелки под слънцето */
.sun-arrow{
  fill:rgba(255,255,255,.92); cursor:pointer;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  opacity:.8; transition:opacity .15s ease;
}
.sun-arrow:hover{ opacity:1; }

/* LED ленти като перспективни quad-ове */
.led-quad{
  fill:var(--led);
  mix-blend-mode:screen;
  filter:blur(4px);
  transition:opacity .35s ease, fill .35s ease;
}

/* HA-стил цветно колело (hue по ъгъла, бял център) */
.color-wheel-wrap{ display:flex; justify-content:center; }
.color-wheel{
  position:relative; width:196px; height:196px; border-radius:50%;
  background:
    radial-gradient(circle closest-side, #fff, rgba(255,255,255,0) 74%),
    conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor:crosshair; touch-action:none;
  box-shadow:0 4px 18px rgba(2,8,20,.5), inset 0 0 0 1px rgba(255,255,255,.12);
}
.cw-dot{
  position:absolute; width:20px; height:20px; border-radius:50%;
  transform:translate(-50%,-50%);
  border:3px solid #10151d;
  box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.5);
  pointer-events:none;
}

/* Свиваеми списъци по стаи */
.win-details summary{
  cursor:pointer; list-style:none;
  font-size:.84rem; font-weight:600; color:var(--ice);
  background:var(--glass); border:1px solid var(--stroke); border-radius:10px;
  padding:.55rem .8rem;
  transition:border-color .15s ease;
}
.win-details summary:hover{ border-color:var(--accent-2); }
.win-details summary::-webkit-details-marker{ display:none; }
.win-details summary::after{ content:" ▾"; color:var(--muted); float:right; }
.win-details[open] summary::after{ content:" ▴"; }
.win-details .win-list{ margin-top:.7rem; border-top:0; padding-top:0; }

/* Таблет режим: плътно подреждане без празен въздух */
.bms-shell.tablet .bms-grid{
  display:block;
  columns:288px;
  column-gap:.85rem;
}
.bms-shell.tablet .bms-card{
  break-inside:avoid;
  margin-bottom:.85rem;
  padding:.85rem .9rem .8rem;
}
.bms-shell.tablet .bms-card .ctl{ margin-bottom:.6rem; }
.bms-shell.tablet .ht-svg{ width:172px; }
.bms-shell.tablet .bms-left{ max-height:calc(92vh - 132px); overflow-y:auto; }

/* Мапер: LED дръжки, добавяне, премахване */
.map-poly-led{ stroke:#c26bff; fill:rgba(194,107,255,.1); }
.map-handle-led{ fill:#ecd5ff; stroke:#8c34c9; stroke-width:4; }
.map-add{ display:flex; gap:.4rem; margin-top:.4rem; }
.map-add .btn{ flex:1; padding:.4rem .5rem; font-size:.76rem; }
.map-del{
  flex:none; width:24px; height:24px; border-radius:7px;
  background:rgba(255,91,91,.12); border:1px solid rgba(255,91,91,.45);
  color:#ffb0b0; font-size:.72rem; font-weight:700; cursor:pointer;
  transition:background .15s ease;
}
.map-del:hover{ background:rgba(255,91,91,.28); }

/* ============================================================
   V7 — карта с колче за оглед
   ============================================================ */
.form-map-wrap{ grid-column:1 / -1; display:flex; flex-direction:column; gap:.4rem; }
.form-map-hint{ font-size:.78rem; font-weight:500; color:var(--muted); }
.visit-map{
  height:280px; border-radius:12px; overflow:hidden;
  border:1px solid var(--stroke);
  background:var(--bg-3);
  z-index:0;
}
.visit-map:focus-visible{ outline:2px solid var(--accent-2); }
.form-coords{ font-size:.8rem; font-weight:600; color:var(--ice); min-height:1.1em; }

/* ============================================================
   V8 — тониране в перспектива, влачимо слънце навсякъде
   ============================================================ */
.fx-quad{ pointer-events:none; transition:opacity .35s ease; }
.fxq-heat{ fill:#ff9650; mix-blend-mode:screen; filter:blur(10px); opacity:0; }
.fxq-pool{ fill:var(--led); mix-blend-mode:overlay; filter:blur(16px); opacity:.5; transition:opacity .35s ease, fill .35s ease; }
.fxq-solar{ fill:#fff0c0; mix-blend-mode:screen; filter:blur(8px); opacity:0; }
.map-poly-box{ stroke:var(--gold); fill:rgba(255,202,122,.08); }
#sunFx{ touch-action:none; }

/* ============================================================
   V9 — слоят с балончета пропуска мишката към слънцето
   ============================================================ */
/* Div-ът покрива цялата снимка и блокираше SVG слоя под него —
   сега пропуска събитията, а само балончетата ги хващат */
.hotspot-layer{ pointer-events:none; }
.hotspot{ pointer-events:auto; }
.sun-hit{ fill:transparent; }

/* ============================================================
   V10 — снимка на смарт таблото в панела
   ============================================================ */
.panel-photo img{
  display:block; width:100%; height:auto;
  border-radius:14px; border:1px solid var(--stroke);
  box-shadow:0 8px 24px rgba(2,8,20,.4);
}

/* ============================================================
   V11 — 🧌 + директно изпращане на формата
   ============================================================ */
.troll{
  position:absolute; top:74%; left:-12%; width:7.5%;
  z-index:14; cursor:pointer;
  transform:scaleX(-1);
  animation:trollRun 7s linear forwards;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
@keyframes trollRun{ from{ left:-12%; } to{ left:106%; } }
.house-frame.mapping .troll{ display:none; }

.troll-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.troll-backdrop{ position:absolute; inset:0; background:rgba(4,8,16,.7); backdrop-filter:blur(6px); }
.troll-card{
  position:relative; width:min(440px,100%); text-align:center;
  background:rgba(10,19,34,.97);
  border:1px solid var(--gold); border-radius:20px;
  padding:1.6rem 1.5rem 1.4rem;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:panelIn .3s cubic-bezier(.2,.9,.3,1) both;
}
.troll-pic{ width:88px; height:88px; margin:0 auto .3rem; }
.troll-card h3{ font-size:1.25rem; margin-bottom:.6rem; }
.troll-card p{ font-size:.88rem; color:var(--muted); margin-bottom:.6rem; }
.troll-code{ display:flex; align-items:center; justify-content:center; gap:.6rem; }
.troll-code code{
  font:700 1.15rem ui-monospace, monospace; letter-spacing:.14em;
  color:var(--gold);
  background:rgba(255,202,122,.1);
  border:1px dashed rgba(255,202,122,.5);
  border-radius:10px; padding:.4rem .9rem;
}
.troll-count{ font-size:.74rem; color:rgba(157,179,202,.6); }
.troll-close{ margin-top:.4rem; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note.ok{ color:#8ff3cf; font-weight:600; }

/* ============================================================
   V12 — трол по крива (без CSS анимация), слой в мапера
   ============================================================ */
.troll{
  top:auto; left:auto;
  animation:none;
  transform:translate(-50%,-92%);
}
.map-troll{ fill:none; stroke:#8aff9d; stroke-width:4; stroke-dasharray:12 9; opacity:.9; }
.map-handle-troll{ fill:#d6ffd9; stroke:#2ea043; stroke-width:4; }

/* ============================================================
   V13 — реален dashboard, трол с хит-зона, мапер извън кадъра
   ============================================================ */

/* Реалният клиентски dashboard в секцията BMS */
.tablet-screen-photo{ padding:6px; min-height:0; }
.dash-shot{ display:block; width:100%; height:auto; border-radius:12px; }
.dash-cap{
  margin-top:.8rem; text-align:center;
  font-size:.8rem; color:var(--muted);
}

/* Тролът: div с фонова анимация + невидим кръг за по-лесно кликане */
.troll{
  aspect-ratio:1 / 1;
  background:url("assets/troll.webp") center / contain no-repeat;
}
.troll::after{
  content:""; position:absolute; inset:-38%;
  border-radius:50%;
  /* невидим, но кликаем ореол около тролчето */
}

/* ?map: дръжките се виждат и местят и извън снимката */
.house-frame.mapping{ overflow:visible; z-index:30; }
.house-frame.mapping .fx-svg{ overflow:visible; z-index:30; }