/* Interactive site plan (home page section). Ported from the first design; dark section palette. */
.plan-sec{--bacc:#38C6D9;--bf:#FFFFFF;--bline:rgba(255,255,255,.14);--bm:#C7DAE3;--bsurf:rgba(255,255,255,.05);--coral-500:#FF7A59;--cyan-400:#38C6D9;
  --navy-900:#062B47;--navy-950:#041E33;--line-c:#1F4560;--surface:#10324C;--text:#E8F1F5;
  --k-cctv:#38C6D9;--k-access:#F2F7F9;--k-intercom:#7CC4F0;--k-alarm:#FF9C80;--k-parking:#A9C7D6;--k-systems:#5FA8D3;--cut:#041E33}
.plan-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.plan-grid .sec-head{margin-bottom:0}
.plan-grid .sec-head .btn{justify-self:start;margin-top:8px}
@media (max-width:960px){.plan-grid{grid-template-columns:1fr;gap:28px}}
.plan{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s ease forwards}
.draw:nth-child(2){animation-delay:.3s}
.draw:nth-child(3){animation-delay:.6s}
.draw:nth-child(4){animation-delay:.9s}
.draw:nth-child(5){animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}}
@media (max-width:940px){.hero-art{max-width:440px}}
@media (prefers-reduced-motion:reduce){.draw{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes tin{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* interactive floor plan */
.hero-art{display:grid;gap:14px}
.plan-wrap{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.plan{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))}
.plan .soft{stroke-opacity:.4}
.dev{cursor:grab;transition:opacity .35s}
.dev.dragging{cursor:grabbing}
.dev.off{opacity:.08;pointer-events:none}
.dev .core{transition:transform .25s}
.dev:hover .core,.dev:focus-visible .core{transform:scale(1.35)}
.dev .core{transform-box:fill-box;transform-origin:center}
.dev:focus-visible{outline:none}
.dev:focus-visible .core{stroke:#fff;stroke-width:3}
.cone{opacity:.24;transition:opacity .3s}
.dev:hover .cone{opacity:.5}
.dev.pulse-on .halo{animation:halo 1.1s ease-out}
@keyframes halo{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.halo{transform-box:fill-box;transform-origin:center;opacity:0}
.arm{transition:transform .6s cubic-bezier(.3,1.4,.4,1);transform-box:fill-box;transform-origin:0% 100%}
.arm.up{transform:rotate(-80deg)}
.plan-tip{position:absolute;z-index:3;pointer-events:none;max-width:250px;background:var(--navy-950);color:#fff;border:1px solid rgba(56,198,217,.5);border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.55;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);transform:translate(-50%,calc(-100% - 14px));animation:pop .2s ease}
.plan-tip[hidden]{display:none}
.plan-tip b{display:block;color:var(--cyan-400);font-size:15.5px;margin-bottom:2px}
.plan-ui{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.legend{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:#e6f1f6;font:500 14.5px Tajawal,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .25s,opacity .2s}
.chip-btn:hover{transform:translateY(-2px);border-color:var(--cyan-400);background:rgba(56,198,217,.12)}
.chip-btn[aria-pressed=false]{opacity:.5}
.chip-btn .dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--c,#38C6D9)}
.k-cctv{--c:var(--k-cctv)}
.k-access{--c:var(--k-access)}
.k-intercom{--c:var(--k-intercom)}
.k-alarm{--c:var(--k-alarm)}
.k-parking{--c:var(--k-parking)}
.k-systems{--c:var(--k-systems)}
.chip-btn.reset{margin-inline-start:auto;border-style:dashed}
.plan-hint{color:#a9c4d1;font-size:14.5px;line-height:1.6}
@keyframes fadein{from{opacity:0}}
@media (max-width:860px){.plan-ui{gap:6px}.chip-btn{padding-inline:12px;font-size:14px}}
@media (max-width:320px){.legend .chip-btn span{font-size:13px}}
@media (pointer:coarse){.nav a,.chip-btn,.icon-btn{min-height:48px}}
@media (prefers-reduced-motion:reduce){.dev.pulse-on .halo{animation:none}.sheet.opening,.sheet.closing,.lang-menu,.plan-tip{animation:none}}
.chip-btn.lt{color:var(--text);border-color:var(--line-c);background:var(--surface)}
.chip-btn.lt[aria-pressed=false]{opacity:1}
.chip-btn.lt:hover{background:rgba(56,198,217,.14);border-color:var(--cyan-400)}
.chip-btn.lt[aria-pressed=true]{background:var(--navy-900);border-color:var(--cyan-400);color:#fff;opacity:1}
.chip-btn{border-color:var(--bline);background:var(--bsurf);color:var(--bf)}
.chip-btn:hover{border-color:var(--bacc);background:rgba(56,198,217,.14)}
.plan-hint{color:var(--bm)}
.plan .walls{stroke:var(--bacc)}
.plan{filter:drop-shadow(0 24px 40px rgba(6,43,71,.18))}
/* hero network flow */
.flow{fill:none;stroke:var(--bacc);stroke-opacity:.38;stroke-width:1.6;stroke-dasharray:4 7;animation:flow 2.6s linear infinite;transition:opacity .3s}
@keyframes flow{to{stroke-dashoffset:-22}}
.hubdot circle:first-child{fill:var(--coral-500)}
.hubdot .hp-pulse{fill:none;stroke:var(--coral-500);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.flow,.hubdot .hp-pulse{animation:none}}
.hero .plan{filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
/* no glow or shadow behind the plan: lines and devices stay crisp */
.plan-sec .plan{filter:none!important}
.plan-sec .walls path{stroke-width:3.2}
.lt .plan-sec{--k-access:#062B47;--k-parking:#5B7A8C;--k-intercom:#0B5C8A;--cut:#E8F1F5;--bf:#0A2236;--bm:#4E6577;--bline:rgba(6,43,71,.16);--bsurf:rgba(255,255,255,.7);--text:#0A2236}
.lt .plan-sec .walls{stroke:#0B5C8A}
.lt .plan-sec .chip-btn{color:#0A2236;border-color:rgba(6,43,71,.25);background:#fff}
.lt .plan-sec .chip-btn:hover{border-color:#0B5C8A;background:#E3F2F8}
.lt .plan-sec .plan-hint{color:#4E6577}