:root{
  --bg:#03111f;--bg2:#061a2d;--panel:#071d31;--panel2:#0a2842;
  --line:#17486d;--text:#f6fbff;--muted:#9fb5c8;--blue:#1683ff;
  --green:#11c97b;--orange:#ff8300;--purple:#8158ff;--danger:#ff5353;
  --shadow:0 18px 45px rgba(0,0,0,.30);--radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  radial-gradient(circle at 85% -10%,rgba(22,131,255,.20),transparent 33rem),
  radial-gradient(circle at 0 50%,rgba(0,115,196,.12),transparent 42rem),
  var(--bg);
  color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1180px,calc(100% - 28px));margin:auto}
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(3,17,31,.88);
  border-bottom:1px solid rgba(72,143,194,.22);backdrop-filter:blur(18px)
}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:23px;letter-spacing:.2px}
.brand span:last-child b{color:#2f91ff}
.logo{width:54px;height:54px;filter:drop-shadow(0 0 16px rgba(22,131,255,.30))}
.navlinks{display:flex;gap:8px;align-items:center}
.navlink{
  border:0;background:transparent;color:#bdd0df;padding:12px 15px;border-radius:13px;
  cursor:pointer;transition:.2s
}
.navlink:hover,.navlink.active{color:#fff;background:#0c3152;box-shadow:inset 0 0 0 1px #174e78}
.online{
  display:flex;align-items:center;gap:9px;background:#08243d;border:1px solid #154867;
  color:#dff8ed;padding:11px 14px;border-radius:15px;white-space:nowrap
}
.dot{width:11px;height:11px;border-radius:50%;background:#1be18c;box-shadow:0 0 15px #1be18c}

.hero{
  min-height:440px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:32px;padding:55px 0 32px
}
.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.02;margin:0;letter-spacing:-2px}
.hero h1 span{color:#238aff}
.hero p{font-size:20px;line-height:1.55;color:#bed0de;margin:23px 0 25px;max-width:650px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{padding:10px 13px;border-radius:12px;border:1px solid #1b4d70;background:#071e33;color:#c8dae8}
.hero-art{
  min-height:350px;border-radius:30px;position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(2,14,25,.25),rgba(10,57,94,.18)),
    radial-gradient(circle at 58% 43%,#1677b7 0 5%,#0a3b62 6% 13%,transparent 14%),
    linear-gradient(140deg,#0b2740,#061522 55%,#0a3150);
  border:1px solid #194a6d;box-shadow:var(--shadow)
}
.pipe{position:absolute;background:linear-gradient(#6b8192,#182f43 50%,#7895aa);border-radius:99px;opacity:.72}
.pipe.p1{width:84%;height:15px;left:8%;top:15%}.pipe.p2{width:16px;height:77%;left:18%;top:8%}
.pipe.p3{width:14px;height:65%;right:20%;top:18%}.pipe.p4{width:72%;height:13px;left:18%;bottom:17%}
.boiler{
  position:absolute;width:260px;height:210px;right:14%;top:25%;border-radius:46% 46% 24% 24%;
  background:linear-gradient(140deg,#53708a,#102a40 48%,#06131e);
  border:2px solid #6a8497;box-shadow:inset -20px -22px 35px rgba(0,0,0,.55),0 0 55px rgba(15,133,230,.28)
}
.boiler:before{content:"";position:absolute;width:105px;height:90px;left:-68px;top:70px;border-radius:35px;background:#182f42;border:2px solid #667f92}
.boiler:after{content:"SCADA";position:absolute;right:28px;top:58px;padding:12px;background:#04131f;border:1px solid #147ecc;color:#21a1ff;border-radius:8px;box-shadow:0 0 25px rgba(22,131,255,.45)}
.ground{position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(transparent,rgba(16,83,127,.2));clip-path:polygon(0 38%,100% 0,100% 100%,0 100%)}

.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 0 34px}
.action-card{
  min-height:295px;padding:25px;border-radius:26px;border:1px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s,filter .2s
}
.action-card:hover{transform:translateY(-5px);filter:brightness(1.06)}
.action-card.blue{background:linear-gradient(145deg,#166be0,#07336b)}
.action-card.green{background:linear-gradient(145deg,#12a868,#035637)}
.action-card.orange{background:linear-gradient(145deg,#ff981e,#9b3e00)}
.action-card.purple{background:linear-gradient(145deg,#7953db,#33207d)}
.ribbon{position:absolute;right:-34px;top:20px;transform:rotate(45deg);background:rgba(255,255,255,.18);padding:7px 43px;font-weight:900}
.action-icon{font-size:54px;margin-bottom:15px}
.action-card h2{margin:0 0 10px;font-size:26px}
.action-card p{color:#eef6fc;line-height:1.45;margin:0 0 18px;opacity:.9}
.card-btn{
  margin-top:auto;min-height:51px;border-radius:14px;border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.15);color:white;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px
}

.section{display:none;animation:fade .28s ease}
.section.active{display:block}
@keyframes fade{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel{
  background:linear-gradient(180deg,rgba(8,30,50,.96),rgba(5,22,38,.96));
  border:1px solid #174463;border-radius:26px;box-shadow:var(--shadow);padding:27px;margin-bottom:26px
}
.panel h2{margin:0 0 8px;font-size:28px}.panel-intro{color:var(--muted);margin:0 0 23px}
.install-grid{display:grid;grid-template-columns:1fr 1fr 300px;gap:18px}
.install-box{background:#061a2c;border:1px solid #123d5b;border-radius:20px;padding:22px}
.install-box h3{font-size:23px;margin:0 0 16px}
.install-box ol{margin:0;padding-left:22px;color:#c1d1dd;line-height:1.75}
.qr{text-align:center}.qr img{width:210px;max-width:100%;border:12px solid white;border-radius:20px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.feature{background:#061a2c;border:1px solid #123d5b;border-radius:17px;padding:19px}
.feature b{display:block;margin-bottom:7px}.feature span{color:var(--muted);line-height:1.45}

.steps{display:grid;gap:14px}
.step{display:grid;grid-template-columns:50px 1fr;gap:15px;align-items:start;background:#061a2c;border:1px solid #123d5b;border-radius:18px;padding:18px}
.num{width:42px;height:42px;border-radius:12px;background:#0d6bc6;display:grid;place-items:center;font-weight:900}

.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.support-card{background:#061a2c;border:1px solid #123d5b;border-radius:19px;padding:22px}
.support-card h3{margin:0 0 8px}.support-card p{color:var(--muted)}
.btn{
  border:0;border-radius:14px;padding:14px 18px;cursor:pointer;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:9px
}
.btn-primary{background:#1683ff;color:white}.btn-green{background:#10b970;color:white}
.btn-orange{background:#ed7b00;color:white}.btn-ghost{background:#0b2a45;color:white;border:1px solid #195077}

.bottom-nav{display:none}
.footer{margin:32px 0 100px;color:#88a3b8;text-align:center}

.modal{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);display:none;
  align-items:center;justify-content:center;padding:20px
}
.modal.open{display:flex}.modal-card{
  width:min(520px,100%);background:#071d31;border:1px solid #23608c;border-radius:24px;padding:25px;box-shadow:0 30px 80px rgba(0,0,0,.5)
}
.modal-card h2{margin-top:0}.modal-card p{color:var(--muted);line-height:1.55}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}

.splash{
  position:fixed;inset:0;z-index:999;background:linear-gradient(145deg,#020d18,#06233c);
  display:grid;place-items:center;transition:opacity .45s,visibility .45s
}
.splash.hide{opacity:0;visibility:hidden}
.splash-inner{text-align:center}.splash-logo{width:120px;animation:pulse 1.3s infinite alternate}
.splash h1{margin:15px 0 4px}.splash p{color:#8fb3ce}
@keyframes pulse{to{transform:scale(1.06);filter:drop-shadow(0 0 24px #1683ff)}}

@media(max-width:960px){
  .navlinks{display:none}.hero{grid-template-columns:1fr}.hero-art{min-height:290px}
  .action-grid{grid-template-columns:repeat(2,1fr)}
  .install-grid{grid-template-columns:1fr 1fr}.qr{grid-column:1/-1}
  .feature-grid{grid-template-columns:repeat(2,1fr)}.support-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{width:min(100% - 18px,1180px)}.nav{height:68px}.brand{font-size:18px}.logo{width:46px;height:46px}.online{font-size:12px;padding:9px}
  .hero{padding:30px 0 14px}.hero h1{font-size:40px}.hero p{font-size:17px}.hero-art{min-height:235px}
  .boiler{transform:scale(.72);transform-origin:center;right:2%;top:14%}
  .action-grid{grid-template-columns:1fr}.action-card{min-height:245px}
  .install-grid,.feature-grid{grid-template-columns:1fr}.qr{grid-column:auto}
  .panel{padding:18px;border-radius:20px}.panel h2{font-size:24px}
  .bottom-nav{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:60;left:8px;right:8px;bottom:8px;
    background:rgba(6,27,46,.94);border:1px solid #1a5075;border-radius:20px;backdrop-filter:blur(18px);
    padding:8px;box-shadow:0 15px 50px rgba(0,0,0,.45)
  }
  .bottom-nav button{border:0;background:transparent;color:#9bb2c5;padding:8px 3px;border-radius:13px;font-size:11px}
  .bottom-nav button.active{background:#0d3c63;color:white}.bottom-nav span{display:block;font-size:21px;margin-bottom:3px}
}