:root{--bg:#020b14;--panel:#071827;--line:#12344b;--blue:#16bfff;--cyan:#17f1ee;--orange:#ff8a00;--yellow:#ffd21a;--text:#f4f8fc;--muted:#9db2c4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 65% 5%,#082844 0,#020b14 36%,#01070d 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}.progress{position:fixed;z-index:99;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));width:0}.nav{height:104px;position:sticky;top:0;z-index:50;display:flex;align-items:center;padding:12px 5%;gap:34px;background:rgba(2,11,20,.9);backdrop-filter:blur(18px);border-bottom:1px solid #14334a}.brand{display:flex;align-items:center;min-width:340px}.brand img{width:330px;height:75px;object-fit:cover;object-position:left center}.brand-mobile{display:none}.nav nav{display:flex;gap:30px;margin-left:auto}.nav a{color:#d8e4ed;text-decoration:none}.nav nav a{padding:10px 0;position:relative}.nav nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue);transition:.3s}.nav nav a:hover:after{width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #1fb7ff;background:linear-gradient(135deg,#087bea,#0aa6ff);box-shadow:0 0 24px #087bea33;border-radius:9px;color:white!important;padding:15px 24px;text-decoration:none;font-weight:800;cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px #0aa6ff55}.ghost{background:#06111d;border-color:#3b657e}.menu{display:none}.hero{min-height:700px;position:relative;overflow:hidden;padding:100px 6% 120px;border-bottom:1px solid #0d4667;background:linear-gradient(90deg,rgba(1,8,15,.96) 0%,rgba(1,8,15,.82) 37%,rgba(3,20,35,.35) 65%,rgba(3,20,35,.8) 100%)}#network{position:absolute;inset:0;width:100%;height:100%;opacity:.65}.hero-copy{position:relative;z-index:5;max-width:620px}.eyebrow{font-size:13px;letter-spacing:4px;font-weight:800;color:#2fc4ff}.hero h1{font-size:70px;line-height:.98;letter-spacing:-2px;margin:18px 0 24px;font-weight:900}.hero h1 em,h2 em{font-style:normal;color:#19c8ff}.lead{font-size:19px;line-height:1.65;color:#c2d0dc;max-width:560px}.actions{display:flex;gap:14px;margin-top:32px}.globe{position:absolute;width:660px;height:660px;right:8%;top:30px;perspective:900px;opacity:.85}.earth{position:absolute;inset:60px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3bc8ff 0 2%,#07538a 13%,#022847 38%,#00101d 70%);box-shadow:inset -80px -50px 100px #000c,0 0 70px #1cbcff66,0 0 160px #067ac744}.earth:before,.earth:after{content:"";position:absolute;inset:12%;border-radius:48% 52% 55% 45%;background:linear-gradient(135deg,transparent 20%,#e8a94c66 22%,transparent 24%,transparent 44%,#8bb9d155 46%,transparent 49%);filter:blur(1px);transform:rotate(23deg)}.earth:after{transform:rotate(115deg);opacity:.5}.orbit{position:absolute;inset:90px 20px;border:1px solid #29c8ff99;border-radius:50%;transform:rotate(25deg);box-shadow:0 0 10px #22cfff}.o2{transform:rotate(72deg);inset:40px 130px}.o3{transform:rotate(-18deg);inset:140px 0}.hud{position:absolute;z-index:5;right:5%;top:170px;width:285px;display:grid;gap:10px}.hud>div{display:flex;align-items:center;gap:13px;padding:13px 15px;background:linear-gradient(90deg,#09233ad9,#06111ddd);border:1px solid #24516d;clip-path:polygon(7% 0,100% 0,100% 100%,7% 100%,0 72%,0 28%);box-shadow:inset 0 0 20px #0a8ccc12}.hud b{font-size:28px;color:var(--blue)}.hud div:nth-child(1) b{color:var(--yellow)}.hud div:nth-child(2) b{color:var(--orange)}.hud div:nth-child(4) b{color:var(--cyan)}.hud span{font-size:13px;font-weight:800}.hud small{display:block;color:#8fa7b8;font-weight:400;margin-top:3px}.hud i{margin-left:auto;width:34px;height:25px;background:repeating-linear-gradient(90deg,var(--blue) 0 4px,transparent 4px 7px);animation:bars 1.5s infinite alternate}.service-strip{position:absolute;z-index:7;bottom:0;left:3%;right:3%;min-height:96px;border:1px solid #123b58;border-radius:55px 55px 0 0;background:#03101ce8;backdrop-filter:blur(12px);display:grid;grid-template-columns:repeat(4,1fr);align-items:center}.service-strip>div{display:flex;gap:14px;justify-content:center;align-items:center;font-size:34px;border-right:1px solid #35566c}.service-strip>div:last-child{border:0}.service-strip b{display:block;font-size:16px}.service-strip small{display:block;font-size:13px;color:#9fb4c5}.section{padding:110px 7%;max-width:1600px;margin:auto}.about{text-align:center}.section-title{max-width:930px;margin:auto}.section h2{font-size:52px;line-height:1.08;margin:14px 0 24px}.section-title>p:last-child,.heading>p:last-child{color:var(--muted);font-size:18px;line-height:1.7}.metrics{margin:55px auto 0;max-width:850px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#05131f}.metrics div{padding:28px;border-right:1px solid var(--line)}.metrics div:last-child{border:0}.metrics strong{display:block;font-size:38px;color:var(--blue)}.metrics span{font-size:12px;color:#86a0b3}.heading{max-width:760px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:45px}.card{min-height:350px;padding:30px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#071b2b,#030d16);position:relative;overflow:hidden;transition:.3s}.card:before{content:"";position:absolute;inset:auto -20% -50% -20%;height:60%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.12}.card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 15px 45px #0008}.card span{font-size:10px;letter-spacing:2px;color:var(--accent)}.card .icon{font-size:54px;color:var(--accent);margin:40px 0 20px}.card h3{font-size:23px}.card p{color:var(--muted);line-height:1.65}.card a{position:absolute;bottom:28px;color:var(--accent);text-decoration:none;font-weight:700}.solar{--accent:#ffd21a}.electrical{--accent:#ff8a00}.automation{--accent:#18bfff}.network{--accent:#17f1ee}.system{max-width:none;background:linear-gradient(#03101c,#020911)}.dashboard{max-width:1250px;margin:50px auto 0;border:1px solid #12567a;border-radius:20px;overflow:hidden;position:relative;box-shadow:0 0 80px #0878b322}.dashboard img{display:block;width:100%}.scan{position:absolute;left:0;right:0;height:2px;top:0;background:#31e9ff;box-shadow:0 0 20px #31e9ff;animation:scan 5s linear infinite}.live{position:absolute;top:18px;right:22px;padding:9px 12px;background:#03131ddd;border:1px solid #1e7396;border-radius:7px;color:#39f3b2;font-size:11px;letter-spacing:1px}.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px}.steps>div{padding:30px;border-top:1px solid #28506a;border-right:1px solid #183a50}.steps b{font-size:44px;color:#0c7eb5}.steps p{color:var(--muted);line-height:1.6}.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.contact-copy>a{font-size:22px;color:var(--blue);text-decoration:none}.mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.mini span{border:1px solid var(--line);padding:7px 10px;font-size:10px;letter-spacing:1px}.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#05131f;border:1px solid var(--line);border-radius:16px;padding:30px}.form label{font-size:12px;color:#a9bdcb;display:grid;gap:8px}.form input,.form select,.form textarea{width:100%;background:#020b13;border:1px solid #21435a;color:white;border-radius:7px;padding:14px;font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #16bfff12}.full{grid-column:1/-1}.hp{position:absolute!important;left:-9999px!important}.status{margin:0;color:#8fd7ff}footer{border-top:1px solid #15394f;padding:45px 6%;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;background:#01070c;color:#8098aa}footer img{width:300px;height:75px;object-fit:cover;object-position:left}footer b,footer a{display:block;color:#c9d8e3;text-decoration:none;margin-bottom:10px}footer small{grid-column:1/-1;border-top:1px solid #112838;padding-top:20px}.reveal{opacity:0;transform:translateY(28px);transition:.8s ease}.reveal.show{opacity:1;transform:none}@keyframes scan{to{top:100%}}@keyframes bars{to{transform:scaleY(.45)}}@media(max-width:1100px){.nav{height:84px}.brand{min-width:220px}.brand img{width:220px;height:55px}.nav nav{display:none;position:absolute;top:84px;left:0;right:0;background:#020b14;padding:25px;flex-direction:column}.nav nav.open{display:flex}.menu{display:block;margin-left:auto;background:none;border:0;color:white;font-size:25px}.quote{display:none}.hero{padding-top:80px}.hero h1{font-size:56px}.globe{right:-250px;opacity:.45}.hud{display:none}.cards{grid-template-columns:1fr 1fr}.service-strip{left:0;right:0;border-radius:0}.service-strip>div{font-size:24px}.contact{grid-template-columns:1fr}}@media(max-width:700px){.nav{padding:10px 4%}.brand img{display:none}.brand-mobile{display:block;font-weight:900}.brand-mobile b{color:var(--blue)}.hero{min-height:780px;padding:70px 6% 190px}.hero h1{font-size:43px}.globe{width:500px;height:500px;right:-270px;top:190px}.service-strip{grid-template-columns:1fr 1fr;border-radius:20px 20px 0 0}.service-strip>div{padding:12px;border-bottom:1px solid #27455a}.section{padding:75px 6%}.section h2{font-size:36px}.cards,.metrics,.steps{grid-template-columns:1fr}.metrics div,.steps>div{border-right:0;border-bottom:1px solid var(--line)}.form{grid-template-columns:1fr}.full{grid-column:auto}footer{grid-template-columns:1fr}.actions{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* Exact reference composition */
.reference-home{position:relative;width:100%;background:#020b14;overflow:hidden;border-bottom:1px solid #0d4667}.reference-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.reference-hotspots{position:absolute;inset:0;z-index:8}.hot{position:absolute;display:block;background:transparent;border-radius:8px}.hot:focus-visible{outline:2px solid #20c9ff;outline-offset:2px;background:#16bfff16}.hot.home{left:40.7%;top:4.3%;width:5.1%;height:7.2%}.hot.about{left:46.1%;top:4.3%;width:5%;height:7.2%}.hot.services{left:51.2%;top:4.3%;width:5.8%;height:7.2%}.hot.system{left:57.5%;top:4.3%;width:5.6%;height:7.2%}.hot.process{left:63.6%;top:4.3%;width:5.6%;height:7.2%}.hot.projects{left:69.6%;top:4.3%;width:5.8%;height:7.2%}.hot.contact{left:75.4%;top:4.3%;width:5.4%;height:7.2%}.hot.quote{left:81.7%;top:3.4%;width:13.2%;height:7.6%}.hot.our-services{left:5.7%;top:57.5%;width:13.6%;height:7.2%}.hot.hero-quote{left:19.8%;top:57.5%;width:13%;height:7.2%}.mobile-reference-copy{display:none}.about-continuation{padding-top:0}.section.about{padding-top:80px}
@media(max-width:900px){.reference-art{width:1250px;max-width:none;position:relative;left:50%;transform:translateX(-50%)}.reference-hotspots{display:none}.reference-home{height:760px;background:radial-gradient(circle at 70% 30%,#0a3858 0,#03101d 42%,#01070d 75%)}.reference-home:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-230px;top:160px;background:radial-gradient(circle at 35% 30%,#25bfff,#064c83 15%,#02223b 45%,#000c15 72%);box-shadow:0 0 80px #18bfff55}.mobile-reference-copy{display:block;position:relative;z-index:5;padding:40px 6%;max-width:620px}.mobile-reference-copy img{width:min(430px,90vw);height:auto;display:block;margin-bottom:90px}.mobile-reference-copy>p{font-size:12px;letter-spacing:3px;color:#35c8ff;font-weight:800}.mobile-reference-copy h1{font-size:52px;line-height:.96;margin:16px 0;color:white}.mobile-reference-copy h1 em{font-style:normal;color:#19d6ff}.mobile-reference-copy>span{display:block;color:#b8cada;font-size:15px;margin:20px 0 30px}.mobile-reference-copy>div{display:flex;gap:12px;flex-wrap:wrap}}
@media(max-width:560px){.reference-home{height:690px}.mobile-reference-copy img{width:300px;margin-bottom:75px}.mobile-reference-copy h1{font-size:42px}.section.about{padding-top:65px}}

/* Exact approved hero: only the satellites move */
.reference-art{animation:none!important;transform:none!important;filter:none!important}
.satellite-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.satellite{position:absolute;width:34px;height:14px;transform-origin:center;filter:drop-shadow(0 0 6px #4dd9ff);will-change:transform}
.satellite i{position:absolute;left:12px;top:3px;width:10px;height:8px;border:1px solid #bdefff;background:linear-gradient(135deg,#eafaff,#2b94d0);border-radius:2px;box-shadow:0 0 7px #34cfff}
.satellite b,.satellite span{position:absolute;top:4px;width:11px;height:6px;border:1px solid #36c8ff;background:repeating-linear-gradient(90deg,#0a4e80 0 3px,#31cfff 3px 4px)}
.satellite b{left:0}.satellite span{right:0}
.satellite:after{content:"";position:absolute;left:16px;top:-5px;width:1px;height:7px;background:#9beaff;box-shadow:0 0 4px #2bcfff}
.sat-a{left:0;top:0}.sat-b{left:0;top:0;transform:scale(.78)}.sat-c{left:0;top:0;transform:scale(.58)}
.hot.hud-solar{left:80.0%;top:16.0%;width:15.3%;height:6.7%}.hot.hud-electrical{left:80.0%;top:23.2%;width:15.3%;height:6.7%}.hot.hud-automation{left:80.0%;top:30.5%;width:15.3%;height:6.7%}.hot.hud-network{left:80.0%;top:37.8%;width:15.3%;height:6.7%}
.hot.strip-solar{left:4.0%;top:67.1%;width:21.3%;height:8.7%}.hot.strip-electrical{left:25.5%;top:67.1%;width:21.5%;height:8.7%}.hot.strip-automation{left:47.2%;top:67.1%;width:25.5%;height:8.7%}.hot.strip-network{left:72.8%;top:67.1%;width:23.0%;height:8.7%}
.hot:hover{background:rgba(21,191,255,.045);box-shadow:inset 0 0 0 1px rgba(49,213,255,.14)}
@media(max-width:900px){.satellite-layer{display:none}}
@media(prefers-reduced-motion:reduce){.satellite-layer{display:none}}

/* Responsive refinement — approved desktop composition preserved */
@media (min-width: 901px) and (max-width: 1280px){
  .reference-home{aspect-ratio:16/9;height:auto;min-height:0}
  .reference-art{width:100%;height:auto;left:auto;transform:none}
  .section{padding-left:5%;padding-right:5%}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  body{background:#020b14}
  .nav{display:none!important}
  .reference-home{height:auto;min-height:100svh;padding:0 0 28px;background:radial-gradient(circle at 76% 27%,#0a3c61 0,#041728 30%,#020b14 66%,#01070d 100%)}
  .reference-art{display:none}
  .reference-hotspots{display:none}
  .mobile-reference-copy{display:flex;min-height:100svh;flex-direction:column;justify-content:center;padding:30px clamp(20px,6vw,54px) 38px;max-width:none}
  .mobile-reference-copy img{width:min(520px,92vw);max-height:145px;object-fit:contain;object-position:left center;margin:0 0 clamp(70px,12vh,125px)}
  .mobile-reference-copy>p{font-size:clamp(10px,2.4vw,13px);letter-spacing:.24em;margin:0 0 16px}
  .mobile-reference-copy h1{font-size:clamp(44px,10.8vw,74px);line-height:.93;letter-spacing:-.035em;margin:0;max-width:720px}
  .mobile-reference-copy>span{max-width:600px;font-size:clamp(15px,3.1vw,19px);line-height:1.65;margin:24px 0 30px}
  .mobile-reference-copy>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(540px,100%)}
  .mobile-reference-copy .btn{min-height:52px;padding:13px 18px}
  .section{padding:72px clamp(20px,6vw,54px)}
  .section h2{font-size:clamp(34px,7vw,50px)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{min-height:320px}
  .metrics{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr;gap:38px}
  footer{grid-template-columns:1fr 1fr;padding:42px clamp(20px,6vw,54px)}
  footer>div:first-child{grid-column:1/-1}
}

@media (max-width:620px){
  .mobile-reference-copy{justify-content:flex-start;padding-top:26px}
  .mobile-reference-copy img{width:min(360px,90vw);max-height:105px;margin-bottom:clamp(95px,18vh,155px)}
  .mobile-reference-copy h1{font-size:clamp(40px,12.5vw,58px)}
  .mobile-reference-copy>div{grid-template-columns:1fr}
  .mobile-reference-copy .btn{width:100%}
  .cards,.metrics,.steps{grid-template-columns:1fr}
  .card{min-height:290px}
  .metrics div,.steps>div{border-right:0}
  .dashboard{border-radius:12px}
  .live{top:10px;right:10px;font-size:9px;padding:7px 9px}
  .form{padding:20px;gap:14px}
  footer{grid-template-columns:1fr}
  footer img{width:min(300px,100%);height:auto}
}

@media (max-width:390px){
  .mobile-reference-copy{padding-left:18px;padding-right:18px}
  .mobile-reference-copy img{margin-bottom:80px}
  .mobile-reference-copy h1{font-size:40px}
  .section{padding-left:18px;padding-right:18px}
}

/* Prevent wide content from creating horizontal scroll */
img,svg,canvas,video{max-width:100%}
input,select,textarea,button{min-width:0}