.elementor-6039 .elementor-element.elementor-element-b07f619{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:80px;--padding-right:80px;}.elementor-6039 .elementor-element.elementor-element-b07f619:not(.elementor-motion-effects-element-type-background), .elementor-6039 .elementor-element.elementor-element-b07f619 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(152deg, var( --e-global-color-secondary ) 30%, var( --e-global-color-fe930f8 ) 100%);}.elementor-6039 .elementor-element.elementor-element-d69ca6d{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:80px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-6039 .elementor-element.elementor-element-c82529a{--display:flex;}.elementor-6039 .elementor-element.elementor-element-1cdca58{text-align:start;}.elementor-6039 .elementor-element.elementor-element-1cdca58 .elementor-heading-title{color:var( --e-global-color-1776cab );}.elementor-6039 .elementor-element.elementor-element-9fab492{color:var( --e-global-color-791c1b0 );}.elementor-6039 .elementor-element.elementor-element-e29922e .elementor-button{background-color:var( --e-global-color-fe930f8 );fill:var( --e-global-color-1776cab );color:var( --e-global-color-1776cab );}.elementor-6039 .elementor-element.elementor-element-81a63dd{--display:flex;}.elementor-6039 .elementor-element.elementor-element-2b80cda{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:80px;--padding-right:80px;}.elementor-6039 .elementor-element.elementor-element-8b19c99 .elementor-heading-title{font-weight:bold;text-transform:uppercase;color:var( --e-global-color-fe930f8 );}.elementor-6039 .elementor-element.elementor-element-30d67c0 .elementor-heading-title{font-size:40px;}.elementor-6039 .elementor-element.elementor-element-b7696ed{--display:grid;--e-con-grid-template-columns:2fr 0.32fr 2fr 0.32fr 2fr 0.32fr 2fr;--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-919d750{width:var( --container-widget-width, 15px );max-width:15px;--container-widget-width:15px;--container-widget-flex-grow:0;}.elementor-6039 .elementor-element.elementor-element-919d750.elementor-element{--align-self:center;}.elementor-6039 .elementor-element.elementor-element-919d750 .elementor-icon-wrapper{text-align:center;}.elementor-6039 .elementor-element.elementor-element-919d750.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-919d750.elementor-view-framed .elementor-icon, .elementor-6039 .elementor-element.elementor-element-919d750.elementor-view-default .elementor-icon{color:var( --e-global-color-2b2ae3b );border-color:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-919d750.elementor-view-framed .elementor-icon, .elementor-6039 .elementor-element.elementor-element-919d750.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-919d750 .elementor-icon{font-size:35px;}.elementor-6039 .elementor-element.elementor-element-919d750 .elementor-icon svg{height:35px;}.elementor-6039 .elementor-element.elementor-element-a2aee6e{width:var( --container-widget-width, 15px );max-width:15px;--container-widget-width:15px;--container-widget-flex-grow:0;}.elementor-6039 .elementor-element.elementor-element-a2aee6e.elementor-element{--align-self:center;}.elementor-6039 .elementor-element.elementor-element-a2aee6e .elementor-icon-wrapper{text-align:center;}.elementor-6039 .elementor-element.elementor-element-a2aee6e.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-a2aee6e.elementor-view-framed .elementor-icon, .elementor-6039 .elementor-element.elementor-element-a2aee6e.elementor-view-default .elementor-icon{color:var( --e-global-color-2b2ae3b );border-color:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-a2aee6e.elementor-view-framed .elementor-icon, .elementor-6039 .elementor-element.elementor-element-a2aee6e.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-a2aee6e .elementor-icon{font-size:35px;}.elementor-6039 .elementor-element.elementor-element-a2aee6e .elementor-icon svg{height:35px;}.elementor-6039 .elementor-element.elementor-element-590ecbc{width:var( --container-widget-width, 15px );max-width:15px;--container-widget-width:15px;--container-widget-flex-grow:0;}.elementor-6039 .elementor-element.elementor-element-590ecbc.elementor-element{--align-self:center;}.elementor-6039 .elementor-element.elementor-element-590ecbc .elementor-icon-wrapper{text-align:center;}.elementor-6039 .elementor-element.elementor-element-590ecbc.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-590ecbc.elementor-view-framed .elementor-icon, .elementor-6039 .elementor-element.elementor-element-590ecbc.elementor-view-default .elementor-icon{color:var( --e-global-color-2b2ae3b );border-color:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-590ecbc.elementor-view-framed .elementor-icon, .elementor-6039 .elementor-element.elementor-element-590ecbc.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-2b2ae3b );}.elementor-6039 .elementor-element.elementor-element-590ecbc .elementor-icon{font-size:35px;}.elementor-6039 .elementor-element.elementor-element-590ecbc .elementor-icon svg{height:35px;}.elementor-6039 .elementor-element.elementor-element-6ca5b03{margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;}.elementor-6039 .elementor-element.elementor-element-838f62a{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-6777c0e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-6039 .elementor-element.elementor-element-6777c0e:not(.elementor-motion-effects-element-type-background), .elementor-6039 .elementor-element.elementor-element-6777c0e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A0F1E;}.elementor-6039 .elementor-element.elementor-element-146bd4b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:60px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}.elementor-6039 .elementor-element.elementor-element-7da3dbb{--display:flex;--border-radius:22px 22px 22px 22px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-6039 .elementor-element.elementor-element-7da3dbb:not(.elementor-motion-effects-element-type-background), .elementor-6039 .elementor-element.elementor-element-7da3dbb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at center center, var( --e-global-color-fe930f8 ) 0%, #15143A 100%);}.elementor-6039 .elementor-element.elementor-element-1ee5f17{padding:0% 10% 0% 10%;text-align:center;}.elementor-6039 .elementor-element.elementor-element-1ee5f17 .elementor-heading-title{color:var( --e-global-color-1776cab );}.elementor-6039 .elementor-element.elementor-element-521df9c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0% 10% 0% 10%;text-align:center;color:var( --e-global-color-1776cab );}.elementor-6039 .elementor-element.elementor-element-1eebab7{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-e4aff84 .elementor-button{background-color:var( --e-global-color-fe930f8 );fill:var( --e-global-color-1776cab );color:var( --e-global-color-1776cab );}.elementor-6039 .elementor-element.elementor-element-e4aff84{grid-column:span 1;}.elementor-6039 .elementor-element.elementor-element-e4aff84.elementor-element{--align-self:center;--order:99999 /* order end hack */;}.elementor-6039 .elementor-element.elementor-element-3d31ed9 .elementor-button{background-color:#E2C044;fill:var( --e-global-color-1776cab );color:var( --e-global-color-1776cab );}.elementor-6039 .elementor-element.elementor-element-3d31ed9{grid-column:span 1;}.elementor-6039 .elementor-element.elementor-element-3d31ed9.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}@media(min-width:768px){.elementor-6039 .elementor-element.elementor-element-1eebab7{--content-width:fit-content;}}@media(max-width:1024px){.elementor-6039 .elementor-element.elementor-element-d69ca6d{--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-b7696ed{--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-838f62a{--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-1eebab7{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-6039 .elementor-element.elementor-element-b07f619{--padding-top:0px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-6039 .elementor-element.elementor-element-d69ca6d{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-2b80cda{--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-6039 .elementor-element.elementor-element-b7696ed{--e-con-grid-template-columns:1;--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-838f62a{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6039 .elementor-element.elementor-element-1eebab7{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-19c9fca */.sub{
    color:#E2C044;
    border: 1px solid #E2C044;
    border-radius:22px;
    padding:10px;
    font-size:12px;
    width:fit-content;
    background:rgba(226,192,68,0.15);
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-1cdca58 */.callout{
    color:#E2C044 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fec4eb5 *//* Dashboard card */
    .dash-card {
      background: rgba(255,255,255,0.1); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1); border-radius: 1.5rem;
      padding: 1.25rem; box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    }
    .dash-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
    .dash-metric {
      background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1rem; padding: 1.25rem;
    }
    .dash-metric-label { font-size: 0.8rem; color: #eee; margin-bottom: 0.5rem; }
    .dash-metric-num { font-size: 2.25rem; font-weight: 800; color: #fcd34d;}
    .dash-metric-sub { font-size: 0.8rem; color: #34d399; margin-top: 0.5rem; }

    .dash-panel {
      background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1rem; padding: 1.5rem;
    }
    .dash-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;color: #eee; }
    .dash-panel-title { font-size: 1rem; font-weight: 600; color: #eee; }
    .dash-panel-sub { font-size: 0.8rem; color: #eee; }
    .pulse-dot {
      width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #34d399;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
    
    @media (max-width: 768px) {
      .dash-metrics {
        grid-template-columns: 1fr;
      }
    }
    .dash-row {
      background: #4a5362; border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; color: #eee;
    }
    .dash-row-top { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.5rem; }
    .dash-row-top span:last-child { color: #34d399; }
    .bar-track { height: 0.5rem; background: #334155; border-radius: 9999px; overflow: hidden; }
    .bar-fill { height: 100%; width: 92%; background: #34d399; border-radius: 9999px; }
    .dash-row-note { font-size: 0.75rem; color: #eee; }
    .dash-alert {
      background: rgba(245,158,11,0.1); border: 1px solid rgba(251,191,36,0.2);
      border-radius: 0.75rem; padding: 1rem;
    }
    .dash-alert-title { color: #fcd34d; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.875rem; }
    .dash-alert-body { font-size: 0.875rem; color: #eee; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ff98d16 */.journey-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2rem; }
    .journey-label { font-size: 20px; font-weight: 700; color: #587B7F; margin-bottom: 1rem; }
    .journey-card p { font-size: 14px;color: #15143a; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5d8d59a */.journey-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2rem; }
    .journey-label { font-size: 20px; font-weight: 700; color: #587B7F; margin-bottom: 1rem; }
    .journey-card p { font-size: 14px;color: #15143a; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-88fe248 */.journey-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2rem; }
    .journey-label { font-size: 20px; font-weight: 700; color: #587B7F; margin-bottom: 1rem; }
    .journey-card p { font-size: 14px;color: #15143a; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8f83a4a */.journey-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2rem; }
    .journey-label { font-size: 20px; font-weight: 700; color: #587B7F; margin-bottom: 1rem; }
    .journey-card p { font-size: 14px;color: #15143a; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6ca5b03 *//* comparison */
    .compare-grid { display: grid; grid-template-columns: 1fr; gap: 5rem; }
    @media (min-width: 800px) { .compare-grid { grid-template-columns: repeat(2, 1fr); } }

    .compare-card { border-radius: 1.5rem; border: 1px solid #e2e8f0; padding: 2rem; background: #f8fafc; box-shadow: 0 25px 50px rgba(0,0,0,0.4);}
    .compare-card.highlight {
      border: 2px solid #10b981; background: #f0fdf4;
      box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    }
    .compare-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; }
    .compare-card.highlight h3 { color: #065f46; }
    .compare-card ul { list-style: none; }
    .compare-card ul li { color: #475569; padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .compare-card ul li:last-child { border-bottom: none; }
    .compare-card.highlight ul li { color: #1e293b; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8c7336f *//* dark 3-cards */
    .dark-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; }
    @media (min-width: 1024px) { .dark-grid { grid-template-columns: repeat(3, 1fr); } }

    .dark-card { background: #020617; color: #fff; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 15px 25px rgba(0,0,0,0.4);}
    .dark-card-label { color: #34d399; font-weight: 700; margin-bottom: 0.75rem; }
    .dark-card p { color: #94a3b8; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ed70220 */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    .diagram {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #0a0f1e;
      color: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem 1rem;
    }

    .diagram h2 {
      font-size: 40px;
      font-weight: 700;
      color: #E2C044 !important;
      margin-bottom: 0.4rem;
      text-align: center;
      letter-spacing: -0.02em;
    }
    .subtitle {
      font-size: 0.875rem;
      color: #fff;
      margin-bottom: 2.5rem;
      text-align: center;
    }

    /* ── Outer canvas ── */
    .canvas {
      width: 100%;
      max-width: 1100px;
      position: relative;
      display: flex;
      gap: 3rem;
      align-items: flex-end;
    }

    /* ════════════════════════════
       BUILDING
    ════════════════════════════ */
    .building-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      flex: 0 0 auto;
    }

    /* Roof / HVAC unit */
    .roof {
      width: 440px;
      height: 32px;
      background: linear-gradient(180deg, #1e3a5f 0%, #1e293b 100%);
      border: 1px solid #334155;
      border-bottom: none;
      border-radius: 6px 6px 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      padding: 0 1rem;
    }

    .hvac-unit {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 0.65rem;
      color: #94a3b8;
    }
    .hvac-fan {
      width: 14px; height: 14px;
      border-radius: 50%;
      border: 2px solid #3b82f6;
      display: flex; align-items: center; justify-content: center;
      animation: spin 3s linear infinite;
    }
    .hvac-fan::after {
      content: '';
      width: 6px; height: 6px;
      background: #3b82f6;
      border-radius: 50%;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Building body */
    .building {
      width: 440px;
      border: 1.5px solid #334155;
      border-top: none;
      background: #0f172a;
      overflow: visible;
      position: relative;
    }

    .floor {
      border-top: 1.5px solid #1e3a5f;
      height: 110px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      position: relative;
    }
    .floor:first-child { border-top: none; }

    /* Floor label */
    .floor-label {
      position: absolute;
      left: -3rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.65rem;
      color: #475569;
      font-weight: 600;
      white-space: nowrap;
      text-align: right;
      width: 2.6rem;
    }

    /* Room dividers */
    .room {
      border-right: 1px solid #1e3a5f;
      padding: 0.5rem;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .room:last-child { border-right: none; }

    .room-label {
      font-size: 0.6rem;
      color: #475569;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Windows */
    .windows {
      display: flex;
      gap: 3px;
      justify-content: center;
      padding: 6px 0;
    }
    .window {
      width: 22px; height: 32px;
      background: linear-gradient(135deg, #1e3a5f 0%, #0ea5e9 100%);
      border: 1px solid #0ea5e9;
      border-radius: 2px;
      opacity: 0.6;
    }
    .window.lit {
      background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
      border-color: #fbbf24;
      opacity: 0.85;
      box-shadow: 0 0 6px rgba(251,191,36,0.4);
    }
    .window.dim {
      opacity: 0.2;
    }

    /* Ground / lobby */
    .lobby {
      border-top: 1.5px solid #1e3a5f;
      height: 90px;
      display: flex;
      align-items: flex-end;
      padding: 0 1rem 0;
      gap: 1rem;
      position: relative;
    }
    .door {
      width: 36px; height: 60px;
      background: linear-gradient(180deg, #1e3a5f, #0f172a);
      border: 1.5px solid #334155;
      border-bottom: none;
      border-radius: 3px 3px 0 0;
      margin-left: 1rem;
    }
    .lobby-windows {
      display: flex; gap: 6px; align-items: flex-end; flex: 1;
      justify-content: flex-end; padding-bottom: 0; padding-right: 0.5rem;
    }
    .lobby-window {
      width: 26px; height: 50px;
      background: linear-gradient(135deg, #1e3a5f 0%, #0ea5e9 100%);
      border: 1px solid #0ea5e9; border-radius: 2px; opacity: 0.7;
    }
    .lobby-label {
      position: absolute; left: -3rem; bottom: 1.2rem;
      font-size: 0.65rem; color: #475569; font-weight: 600;
      text-align: right; width: 2.6rem;
    }

    /* Ground line */
    .ground {
      width: 500px;
      height: 6px;
      background: linear-gradient(90deg, transparent, #1e3a5f 10%, #1e3a5f 90%, transparent);
      border-radius: 3px;
    }

    /* ════════════════════════════
       SENSORS / DEVICES
    ════════════════════════════ */
    .device {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      cursor: default;
      z-index: 10;
    }
    .device-icon {
      width: 26px; height: 26px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem;
      border: 1.5px solid;
      position: relative;
    }
    .device-label {
      font-size: 0.55rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
      color: #64748b;
    }

    /* Device types */
    .dev-occupancy .device-icon { background: rgba(16,185,129,0.15); border-color: #10b981; color: #10b981; }
    .dev-temp      .device-icon { background: rgba(239,68,68,0.15);  border-color: #ef4444; color: #ef4444; }
    .dev-hvac      .device-icon { background: rgba(59,130,246,0.15); border-color: #3b82f6; color: #3b82f6; }
    .dev-meter     .device-icon { background: rgba(234,179,8,0.15);  border-color: #eab308; color: #eab308; }
    .dev-light     .device-icon { background: rgba(251,191,36,0.15); border-color: #fbbf24; color: #fbbf24; }
    .dev-door      .device-icon { background: rgba(168,85,247,0.15); border-color: #a855f7; color: #a855f7; }
    .dev-co2       .device-icon { background: rgba(20,184,166,0.15); border-color: #14b8a6; color: #14b8a6; }

    /* Pulse ring on active devices */
    .device-icon::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1.5px solid currentColor;
      opacity: 0;
      animation: ring 3s ease-out infinite;
    }
    @keyframes ring {
      0%   { opacity: 0.8; transform: scale(1); }
      100% { opacity: 0;   transform: scale(1.8); }
    }
    .device:nth-child(2)  .device-icon::after { animation-delay: 0.3s; }
    .device:nth-child(3)  .device-icon::after { animation-delay: 0.9s; }
    .device:nth-child(4)  .device-icon::after { animation-delay: 1.5s; }
    .device:nth-child(5)  .device-icon::after { animation-delay: 0.6s; }
    .device:nth-child(6)  .device-icon::after { animation-delay: 2.1s; }
    .device:nth-child(7)  .device-icon::after { animation-delay: 1.2s; }
    .device:nth-child(8)  .device-icon::after { animation-delay: 0.4s; }
    .device:nth-child(9)  .device-icon::after { animation-delay: 1.8s; }
    .device:nth-child(10) .device-icon::after { animation-delay: 2.4s; }
    .device:nth-child(11) .device-icon::after { animation-delay: 0.7s; }

    /* ════════════════════════════
       SVG WIRES
    ════════════════════════════ */
    .wires {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
    }
    .wire { fill: none; stroke-width: 1; }
    .wire-green  { stroke: #10b981; stroke-dasharray: 4 3; }
    .wire-red    { stroke: #ef4444; stroke-dasharray: 4 3; }
    .wire-blue   { stroke: #3b82f6; stroke-dasharray: 4 3; }
    .wire-yellow { stroke: #eab308; stroke-dasharray: 4 3; }
    .wire-purple { stroke: #a855f7; stroke-dasharray: 4 3; }
    .wire-teal   { stroke: #14b8a6; stroke-dasharray: 4 3; }
    .wire-amber  { stroke: #fbbf24; stroke-dasharray: 4 3; }

    /* Travelling data dot */
    .data-dot {
      r: 3;
      opacity: 0;
    }
    .dot-green  { fill: #10b981; }
    .dot-red    { fill: #ef4444; }
    .dot-blue   { fill: #3b82f6; }
    .dot-yellow { fill: #eab308; }
    .dot-purple { fill: #a855f7; }
    .dot-teal   { fill: #14b8a6; }
    .dot-amber  { fill: #fbbf24; }

    @keyframes travel {
      0%   { opacity: 0; }
      5%   { opacity: 1; }
      90%  { opacity: 1; }
      100% { opacity: 0; }
    }

    /* ════════════════════════════
       GATEWAY BOX
    ════════════════════════════ */
    .gateway-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      position: relative;
      flex: 0 0 auto;
      align-self: stretch;
    }
    .gateway {
      width: 90px;
      background: #0f172a;
      border: 1.5px solid #1e3a5f;
      border-radius: 10px;
      padding: 0.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      box-shadow: 0 0 20px rgba(52,211,153,0.08);
    }
    .gateway-icon {
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(52,211,153,0.1);
      border: 2px solid #34d399;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
    }
    .gateway-label { font-size: 0.6rem; font-weight: 700; color: #34d399; text-align: center; line-height: 1.3; }
    .gateway-sub   { font-size: 0.55rem; color: #475569; text-align: center; }

    /* live blink */
    .live-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #34d399;
      animation: blink 1.2s ease-in-out infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

    /* ════════════════════════════
       DASHBOARD PANEL
    ════════════════════════════ */
    .dashboard {
      flex: 1;
      background: rgb(248,250,252,0.9);
      border: 1.5px solid #34d399;
      border-radius: 14px;
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      align-self: stretch;
      min-width: 220px;
    }
    .dash-platform {
      font-size: 0.6rem;
      font-weight: 700;
      color: #000;
      letter-spacing: 0.1em;
      margin-bottom: 0.2rem;
    }
    .dash-title {
      font-size: 0.75rem;
      font-weight: 700;
      color: #000;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border-bottom: 1px solid #1e293b;
      padding-bottom: 0.5rem;
      display: flex; align-items: center; justify-content: space-between;
    }

    .metric {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .metric-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .metric-name { font-size: 0.65rem; color: #000; font-weight: 600; }
    .metric-val  { font-size: 0.7rem; font-weight: 700; }
    .metric-bar  { height: 4px; background: #1e293b; border-radius: 9999px; overflow: hidden; }
    .metric-fill { height: 100%; border-radius: 9999px; }

    .val-green  { color: #34d399; }
    .val-blue   { color: #60a5fa; }
    .val-yellow { color: #fbbf24; }
    .val-red    { color: #f87171; }
    .val-teal   { color: #2dd4bf; }

    .fill-green  { background: #10b981; }
    .fill-blue   { background: #3b82f6; }
    .fill-yellow { background: #eab308; }
    .fill-red    { background: #ef4444; }
    .fill-teal   { background: #14b8a6; }

    .alert-box {
      background: rgba(239,68,68,0.08);
      border: 1px solid rgba(239,68,68,0.25);
      border-radius: 6px;
      padding: 0.5rem 0.6rem;
      font-size: 0.7rem;
      color: #f87171;
      line-height: 1.4;
    }
    .alert-box strong { color: #f87171; display: block; margin-bottom: 2px; }

    /* ════════════════════════════
       LEGEND
    ════════════════════════════ */
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.5rem;
      justify-content: center;
      margin-top: 2rem;
      max-width: 1100px;
    }
    .legend-item {
      display: flex; align-items: center; gap: 0.4rem;
      font-size: 0.7rem; color: #64748b;
    }
    .legend-dot {
      width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid;
    }
    .ld-green  { border-color: #10b981; background: rgba(16,185,129,0.2); }
    .ld-red    { border-color: #ef4444; background: rgba(239,68,68,0.2); }
    .ld-blue   { border-color: #3b82f6; background: rgba(59,130,246,0.2); }
    .ld-yellow { border-color: #eab308; background: rgba(234,179,8,0.2); }
    .ld-amber  { border-color: #fbbf24; background: rgba(251,191,36,0.2); }
    .ld-purple { border-color: #a855f7; background: rgba(168,85,247,0.2); }
    .ld-teal   { border-color: #14b8a6; background: rgba(20,184,166,0.2); }/* End custom CSS */