*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --bg:#02070d;
  --panel:rgba(3,12,22,.78);
  --panel-strong:rgba(4,17,30,.92);
  --blue:#00aaff;
  --blue-soft:#55c9ff;
  --blue-dark:#003c73;
  --white:#f2f7ff;
  --muted:#8ca7bd;
  --line:rgba(73,190,255,.28);
  --line-strong:rgba(90,205,255,.58);
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  background:#000;
  color:var(--white);
  font-family:Arial,"Microsoft JhengHei",sans-serif;
  overflow:hidden;
}

/* Background */
.site-bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,8,18,.25),rgba(0,0,0,.76)),
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.72)),
    url("../assets/images/bg-map-desktop.png") center/cover no-repeat;
  z-index:-3;
}

.site-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 52%,rgba(0,170,255,.18),transparent 34%),
    radial-gradient(circle at 85% 20%,rgba(0,170,255,.12),transparent 28%),
    radial-gradient(circle at 15% 18%,rgba(0,170,255,.1),transparent 25%);
  animation:bgPulse 6s ease-in-out infinite;
}

@keyframes bgPulse{
  0%,100%{opacity:.65;}
  50%{opacity:1;}
}

.scanline{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode:screen;
  opacity:.16;
  z-index:20;
}

/* Dynamic Network Overlay */
.network-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.network-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.72;
}

.network-lines path{
  fill:none;
  stroke:rgba(0,180,255,.32);
  stroke-width:.18;
  stroke-dasharray:2.8 2.2;
  filter:drop-shadow(0 0 6px rgba(0,170,255,.8));
  animation:lineFlow 5s linear infinite;
}

.network-lines path:nth-child(2){
  animation-duration:6.8s;
  opacity:.55;
}

.network-lines path:nth-child(3){
  animation-duration:7.4s;
  opacity:.45;
}

.network-lines path:nth-child(4){
  animation-duration:5.8s;
  opacity:.5;
}

@keyframes lineFlow{
  from{stroke-dashoffset:0;}
  to{stroke-dashoffset:-36;}
}

.net-node{
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#00c8ff;
  box-shadow:
    0 0 12px rgba(0,200,255,.95),
    0 0 28px rgba(0,160,255,.55);
  animation:nodePulse 2.6s ease-in-out infinite;
}

.net-node::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(0,190,255,.45);
  animation:nodeRing 2.6s ease-out infinite;
}

.net-node span{
  position:absolute;
  left:20px;
  top:-5px;
  white-space:nowrap;
  color:rgba(210,245,255,.82);
  font-size:11px;
  letter-spacing:1.4px;
  text-shadow:0 0 10px rgba(0,170,255,.9);
  background:rgba(0,10,20,.38);
  border:1px solid rgba(90,205,255,.16);
  padding:4px 7px;
  border-radius:999px;
}

.node-1{left:18%;top:32%;animation-delay:.1s;}
.node-2{left:36%;top:46%;animation-delay:.4s;}
.node-3{left:52%;top:38%;animation-delay:.8s;}
.node-4{left:70%;top:52%;animation-delay:1.1s;}
.node-5{left:84%;top:35%;animation-delay:1.4s;}
.node-6{left:42%;top:68%;animation-delay:1.7s;}

@keyframes nodePulse{
  0%,100%{
    transform:scale(.88);
    opacity:.62;
  }
  50%{
    transform:scale(1.25);
    opacity:1;
  }
}

@keyframes nodeRing{
  0%{
    transform:scale(.45);
    opacity:.85;
  }
  100%{
    transform:scale(1.8);
    opacity:0;
  }
}

/* Main Layout */
.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px 1fr 330px;
  gap:20px;
  padding:26px;
  position:relative;
  z-index:2;
}

/* Left Side Panel */
.side-panel{
  background:linear-gradient(180deg,rgba(3,15,28,.86),rgba(2,8,15,.72));
  border:1px solid var(--line);
  box-shadow:
    0 0 35px rgba(0,170,255,.12),
    inset 0 0 28px rgba(0,170,255,.06);
  border-radius:18px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:calc(100vh - 52px);
  backdrop-filter:blur(10px);
}

.brand-block{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-bottom:32px;
  border-bottom:1px solid rgba(120,210,255,.16);
}

.brand-block > div{
  display:none;
}

.brand-logo{
  width:100%;
  max-width:220px;
  height:auto;
  display:block;
  margin:0 auto;
  filter:
    drop-shadow(0 0 22px rgba(0,170,255,.78))
    drop-shadow(0 0 42px rgba(0,110,255,.38));
}

.control-nav{
  margin-top:36px;
  display:grid;
  gap:12px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  border:1px solid rgba(90,205,255,.18);
  background:rgba(0,13,26,.35);
  color:#bcd8ea;
  padding:15px 14px;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  transition:.25s;
}

.nav-item:hover,
.nav-item.active{
  border-color:var(--line-strong);
  background:linear-gradient(90deg,rgba(0,140,255,.28),rgba(0,20,40,.28));
  color:#fff;
  box-shadow:0 0 18px rgba(0,170,255,.18);
  transform:translateX(4px);
}

.nav-icon{
  color:var(--blue);
  font-size:20px;
  text-shadow:0 0 12px rgba(0,170,255,.85);
}

.side-status{
  margin-top:34px;
  padding:16px;
  border:1px solid rgba(90,205,255,.18);
  border-radius:12px;
  background:rgba(0,10,20,.44);
}

.status-title{
  font-size:13px;
  color:var(--muted);
  letter-spacing:1.5px;
  margin-bottom:12px;
  text-transform:uppercase;
}

.status-line{
  display:flex;
  justify-content:space-between;
  color:#cfeeff;
  font-size:13px;
}

.status-line strong{
  color:var(--blue);
  text-shadow:0 0 12px rgba(0,170,255,.8);
}

.mini-bars{
  margin-top:15px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:34px;
}

.mini-bars span{
  flex:1;
  background:linear-gradient(180deg,var(--blue),rgba(0,170,255,.15));
  border-radius:4px 4px 0 0;
  animation:barMove 1.8s ease-in-out infinite;
}

.mini-bars span:nth-child(1){height:45%;animation-delay:.1s;}
.mini-bars span:nth-child(2){height:75%;animation-delay:.3s;}
.mini-bars span:nth-child(3){height:55%;animation-delay:.5s;}
.mini-bars span:nth-child(4){height:90%;animation-delay:.7s;}
.mini-bars span:nth-child(5){height:62%;animation-delay:.9s;}

@keyframes barMove{
  0%,100%{
    opacity:.45;
    transform:scaleY(.82);
  }
  50%{
    opacity:1;
    transform:scaleY(1);
  }
}

/* Main Stage */
.main-stage{
  position:relative;
  min-height:calc(100vh - 52px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.top-bar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  z-index:4;
}

.mobile-brand{
  display:none;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(0,10,20,.62);
  box-shadow:0 0 18px rgba(0,170,255,.12);
}

.lang-switch button{
  border:none;
  background:transparent;
  color:#9db9ce;
  padding:8px 12px;
  border-radius:7px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:1px;
}

.lang-switch button.active,
.lang-switch button:hover{
  background:rgba(0,170,255,.18);
  color:#fff;
  box-shadow:0 0 12px rgba(0,170,255,.22);
}

.mobile-menu-btn{
  display:none;
  border:1px solid var(--line);
  background:rgba(0,10,20,.65);
  color:#fff;
  border-radius:9px;
  padding:9px 13px;
  font-size:22px;
  cursor:pointer;
}

.hero-center{
  text-align:center;
  max-width:760px;
  padding:40px 20px;
  animation:heroIn .8s ease both;
}

@keyframes heroIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hud-label{
  display:inline-flex;
  border:1px solid rgba(90,205,255,.35);
  padding:8px 18px;
  border-radius:999px;
  color:var(--blue-soft);
  font-size:13px;
  letter-spacing:3px;
  background:rgba(0,12,24,.55);
  box-shadow:0 0 18px rgba(0,170,255,.14);
  margin-bottom:18px;
}

.hero-center h1{
  font-size:86px;
  letter-spacing:8px;
  line-height:.95;
  background:linear-gradient(180deg,#ffffff 0%,#9bb7c9 42%,#3b4c59 58%,#f7fbff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 24px rgba(0,170,255,.2),
    0 10px 22px rgba(0,0,0,.75);
  margin-bottom:22px;
}

.hero-subtitle{
  font-size:24px;
  letter-spacing:5px;
  color:#e7f6ff;
  margin-bottom:16px;
  text-shadow:0 0 16px rgba(0,170,255,.35);
}

.hero-desc{
  color:#c1d5e2;
  font-size:17px;
  line-height:1.8;
  max-width:660px;
  margin:0 auto 28px;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.primary-btn,
.outline-btn{
  min-width:220px;
  padding:15px 24px;
  border-radius:10px;
  font-size:17px;
  font-weight:800;
  letter-spacing:.5px;
  cursor:pointer;
  text-decoration:none;
  transition:.25s;
}

.primary-btn{
  color:#fff;
  background:linear-gradient(180deg,rgba(0,190,255,.95),rgba(0,72,140,.95));
  border:1px solid rgba(130,225,255,.75);
  box-shadow:
    0 0 22px rgba(0,170,255,.55),
    inset 0 0 18px rgba(255,255,255,.16);
}

.outline-btn{
  color:#dff6ff;
  background:rgba(0,10,20,.45);
  border:1px solid rgba(120,210,255,.55);
  box-shadow:0 0 16px rgba(0,170,255,.12);
}

.primary-btn:hover,
.outline-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 30px rgba(0,170,255,.55);
}

/* Data Stream */
.data-stream{
  position:absolute;
  left:50%;
  bottom:128px;
  transform:translateX(-50%);
  width:min(760px,calc(100% - 40px));
  overflow:hidden;
  border:1px solid rgba(90,205,255,.26);
  border-radius:999px;
  background:rgba(0,10,20,.62);
  box-shadow:
    0 0 18px rgba(0,170,255,.18),
    inset 0 0 18px rgba(0,170,255,.08);
  backdrop-filter:blur(8px);
  z-index:3;
}

.data-stream::before,
.data-stream::after{
  content:"";
  position:absolute;
  top:0;
  width:70px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.data-stream::before{
  left:0;
  background:linear-gradient(90deg,rgba(0,10,20,.95),transparent);
}

.data-stream::after{
  right:0;
  background:linear-gradient(270deg,rgba(0,10,20,.95),transparent);
}

.ticker-track{
  display:flex;
  width:max-content;
  gap:34px;
  padding:11px 0;
  animation:tickerMove 22s linear infinite;
}

.ticker-track span{
  color:#bfeaff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.7px;
  text-shadow:0 0 10px rgba(0,170,255,.65);
  white-space:nowrap;
}

.ticker-track span::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00ffb0;
  box-shadow:0 0 10px #00ffb0;
  margin-right:10px;
  vertical-align:middle;
}

@keyframes tickerMove{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Bottom Dock */
.bottom-dock{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:22px;
  padding:14px 18px;
  background:rgba(0,8,18,.6);
  border:1px solid rgba(90,205,255,.18);
  border-radius:18px;
  backdrop-filter:blur(8px);
}

.bottom-dock button{
  width:84px;
  height:84px;
  border-radius:50%;
  border:1px solid rgba(90,205,255,.4);
  background:radial-gradient(circle,rgba(0,170,255,.22),rgba(0,10,24,.9));
  color:#fff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:
    0 0 18px rgba(0,170,255,.22),
    inset 0 0 18px rgba(0,170,255,.18);
  transition:.25s;
}

.bottom-dock button:hover{
  transform:translateY(-6px);
  box-shadow:0 0 26px rgba(0,170,255,.55);
}

.bottom-dock span{
  color:var(--blue);
  font-size:24px;
  text-shadow:0 0 14px rgba(0,170,255,.9);
}

.bottom-dock em{
  font-style:normal;
  color:#bed7e8;
  font-size:12px;
}

/* Right Status Panel */
.status-panel{
  background:linear-gradient(180deg,rgba(3,15,28,.86),rgba(2,8,15,.72));
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  min-height:calc(100vh - 52px);
  box-shadow:
    0 0 35px rgba(0,170,255,.12),
    inset 0 0 28px rgba(0,170,255,.06);
  backdrop-filter:blur(10px);
}

.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#dff6ff;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:14px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(120,210,255,.16);
}

.panel-header i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#00ffb0;
  box-shadow:0 0 14px #00ffb0;
}

.status-card{
  margin-top:16px;
  padding:18px 88px 18px 18px;
  min-height:94px;
  border:1px solid rgba(90,205,255,.18);
  border-radius:12px;
  background:rgba(0,10,20,.46);
  position:relative;
  overflow:hidden;
}

.status-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(0,170,255,.09),transparent);
  transform:translateX(-100%);
  animation:cardSweep 4s linear infinite;
  z-index:1;
}

@keyframes cardSweep{
  0%{transform:translateX(-100%);}
  55%,100%{transform:translateX(100%);}
}

.status-card::after{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  border-radius:12px;
  clip-path:polygon(
    25% 0%,
    75% 0%,
    100% 25%,
    100% 75%,
    75% 100%,
    25% 100%,
    0% 75%,
    0% 25%
  );
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(0,220,255,.36),rgba(0,20,42,.94) 62%),
    linear-gradient(180deg,rgba(90,220,255,.28),rgba(0,40,80,.82));
  border:1px solid rgba(130,230,255,.75);
  color:#e7fbff;
  font-size:28px;
  font-weight:900;
  text-shadow:
    0 0 10px rgba(0,200,255,1),
    0 0 22px rgba(0,170,255,.75);
  box-shadow:
    0 0 18px rgba(0,190,255,.45),
    0 0 38px rgba(0,120,255,.22),
    inset 0 0 18px rgba(0,200,255,.22),
    inset 0 0 4px rgba(255,255,255,.35);
  z-index:2;
  transition:.25s;
}

.status-card:nth-child(2)::after{content:"⬢";}
.status-card:nth-child(3)::after{content:"◎";}
.status-card:nth-child(4)::after{content:"⇆";}
.status-card:nth-child(5)::after{content:"⟠";}
.status-card:nth-child(6)::after{content:"▲";}

.status-card:hover::after{
  transform:translateY(-50%) scale(1.08);
  box-shadow:
    0 0 24px rgba(0,220,255,.68),
    0 0 52px rgba(0,130,255,.32),
    inset 0 0 22px rgba(0,210,255,.28),
    inset 0 0 5px rgba(255,255,255,.42);
}

.status-card small{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1.5px;
  margin-bottom:8px;
  position:relative;
  z-index:3;
}

.status-card strong{
  color:var(--blue-soft);
  font-size:25px;
  letter-spacing:1px;
  text-shadow:0 0 14px rgba(0,170,255,.55);
  position:relative;
  z-index:3;
}

.signal-line{
  margin-top:12px;
  height:24px;
  background:
    linear-gradient(90deg,
      rgba(0,170,255,.15) 10%,
      rgba(0,170,255,.7) 12%,
      rgba(0,170,255,.15) 14%,
      rgba(0,170,255,.45) 28%,
      rgba(0,170,255,.15) 30%,
      rgba(0,170,255,.75) 48%,
      rgba(0,170,255,.15) 50%,
      rgba(0,170,255,.45) 75%,
      rgba(0,170,255,.15) 78%);
  border-radius:4px;
  opacity:.85;
  position:relative;
  z-index:3;
}

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:50;
}

.modal-overlay.active{
  display:flex;
}

.modal-box{
  width:min(760px,100%);
  max-height:88vh;
  overflow:auto;
  background:linear-gradient(180deg,rgba(4,18,34,.96),rgba(1,7,13,.96));
  border:1px solid rgba(90,205,255,.55);
  border-radius:18px;
  padding:34px;
  box-shadow:
    0 0 50px rgba(0,170,255,.26),
    inset 0 0 28px rgba(0,170,255,.08);
  position:relative;
  animation:modalIn .25s ease both;
}

@keyframes modalIn{
  from{
    opacity:0;
    transform:scale(.96) translateY(14px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(90,205,255,.5);
  background:rgba(0,15,30,.9);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

.modal-content{
  display:none;
}

.modal-content.active{
  display:block;
}

.modal-label{
  color:var(--blue);
  letter-spacing:3px;
  font-size:13px;
  font-weight:800;
  margin-bottom:12px;
}

.modal-content h2{
  font-size:34px;
  margin-bottom:16px;
  background:linear-gradient(180deg,#fff,#8db8cf);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.modal-content p{
  color:#c7d9e5;
  line-height:1.9;
  font-size:16px;
  margin-bottom:22px;
}

.modal-grid,
.service-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.modal-grid div,
.service-list div{
  padding:18px;
  border:1px solid rgba(90,205,255,.2);
  background:rgba(0,12,24,.45);
  border-radius:12px;
}

.modal-grid strong,
.service-list strong{
  display:block;
  color:#eaf8ff;
  font-size:17px;
  margin-bottom:8px;
}

.modal-grid span,
.service-list span{
  color:#a9c2d2;
  line-height:1.7;
  font-size:14px;
}

.capability-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.capability-list span{
  padding:15px 16px;
  border:1px solid rgba(90,205,255,.22);
  border-left:3px solid var(--blue);
  border-radius:10px;
  background:rgba(0,12,24,.48);
  color:#d8f3ff;
}

.contact-box{
  display:grid;
  gap:14px;
}

.contact-box a{
  color:#dff6ff;
  text-decoration:none;
  border:1px solid rgba(90,205,255,.28);
  background:rgba(0,12,24,.48);
  padding:16px;
  border-radius:10px;
  transition:.25s;
}

.contact-box a:hover{
  color:#fff;
  border-color:var(--line-strong);
  box-shadow:0 0 18px rgba(0,170,255,.18);
}

/* Mobile Menu */
.mobile-menu{
  display:none;
}

/* Footer */
.site-footer{
  position:fixed;
  left:26px;
  bottom:10px;
  right:26px;
  display:flex;
  justify-content:center;
  gap:28px;
  color:rgba(215,235,248,.55);
  font-size:13px;
  pointer-events:none;
}

/* Tablet / Mobile Layout */
@media(max-width:1180px){
  body{
    overflow:auto;
  }

  .side-panel,
  .status-panel{
    display:none;
  }

  .network-overlay,
  .data-stream{
    display:none;
  }

  .site-bg{
    background:
      linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.92)),
      linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,20,40,.22),rgba(0,0,0,.65)),
      url("../assets/images/bg-map-mobile.png") center/cover no-repeat;
  }

  .site-bg::after{
    opacity:.28;
  }

  .scanline{
    opacity:.08;
  }

  .app-shell{
    grid-template-columns:1fr;
    padding:18px;
  }

  .main-stage{
    min-height:100vh;
    justify-content:flex-start;
    padding-top:92px;
  }

  .top-bar{
    position:fixed;
    top:10px;
    left:10px;
    right:10px;
    z-index:100;
    height:66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px;
    overflow:visible;
    background:rgba(0,10,20,.68);
    border:1px solid rgba(90,205,255,.22);
    border-radius:16px;
    backdrop-filter:blur(10px);
  }

  .mobile-brand{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    min-width:0;
  }

  .mobile-brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    flex-shrink:0;
    filter:drop-shadow(0 0 10px rgba(0,170,255,.38));
    animation:mobileLogoGlow 4s ease-in-out infinite;
  }

  @keyframes mobileLogoGlow{
    0%,100%{
      filter:drop-shadow(0 0 10px rgba(0,170,255,.38));
    }
    50%{
      filter:drop-shadow(0 0 18px rgba(0,190,255,.72));
    }
  }

  .mobile-brand span{
    font-size:15px;
    letter-spacing:1.5px;
    white-space:nowrap;
    font-weight:900;
  }

  .lang-switch{
    flex-shrink:1;
    gap:3px;
    padding:5px;
  }

  .lang-switch button{
    padding:6px 7px;
    font-size:11px;
    min-width:auto;
  }

  .mobile-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    padding:0;
    flex-shrink:0;
    z-index:101;
  }

  .mobile-menu{
    position:fixed;
    top:86px;
    left:10px;
    right:10px;
    z-index:99;
    background:rgba(0,10,20,.94);
    border:1px solid rgba(90,205,255,.25);
    border-radius:14px;
    padding:12px;
    backdrop-filter:blur(10px);
  }

  .mobile-menu.active{
    display:grid;
    gap:10px;
  }

  .mobile-menu button{
    border:1px solid rgba(90,205,255,.22);
    background:rgba(0,20,40,.55);
    color:#fff;
    padding:14px;
    border-radius:10px;
    text-align:left;
    font-weight:800;
    letter-spacing:1px;
  }

  .hero-center{
    width:100%;
    margin-top:28px;
    padding:28px 18px 22px;
    background:rgba(0,10,22,.54);
    border:1px solid rgba(90,205,255,.22);
    border-radius:18px;
    box-shadow:
      0 0 24px rgba(0,170,255,.14),
      inset 0 0 24px rgba(0,170,255,.06);
    backdrop-filter:blur(8px);
    animation:mobilePanelGlow 4s ease-in-out infinite;
  }

  @keyframes mobilePanelGlow{
    0%,100%{
      box-shadow:
        0 0 22px rgba(0,170,255,.12),
        inset 0 0 20px rgba(0,170,255,.05);
    }
    50%{
      box-shadow:
        0 0 34px rgba(0,170,255,.24),
        inset 0 0 26px rgba(0,170,255,.1);
    }
  }

  .hud-label{
    font-size:10px;
    letter-spacing:1.5px;
    padding:7px 11px;
    margin-bottom:14px;
  }

  .hero-center h1{
    font-size:42px;
    letter-spacing:3px;
    margin-bottom:14px;
    text-shadow:
      0 0 14px rgba(0,170,255,.38),
      0 8px 18px rgba(0,0,0,.75);
  }

  .hero-subtitle{
    font-size:16px;
    letter-spacing:2px;
    line-height:1.5;
    margin-bottom:12px;
  }

  .hero-desc{
    font-size:14px;
    line-height:1.7;
    margin-bottom:22px;
  }

  .hero-actions{
    gap:12px;
    flex-direction:column;
    align-items:stretch;
  }

  .primary-btn,
  .outline-btn{
    width:100%;
    min-width:0;
    padding:14px 18px;
    font-size:15px;
    border-radius:10px;
  }

  .primary-btn{
    animation:mobileButtonPulse 3s ease-in-out infinite;
  }

  @keyframes mobileButtonPulse{
    0%,100%{
      box-shadow:
        0 0 18px rgba(0,170,255,.35),
        inset 0 0 14px rgba(255,255,255,.12);
    }
    50%{
      box-shadow:
        0 0 30px rgba(0,190,255,.65),
        inset 0 0 18px rgba(255,255,255,.18);
    }
  }

  .bottom-dock{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
    margin:18px auto 40px;
    padding:12px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    background:rgba(0,10,20,.58);
    border-radius:16px;
  }

  .bottom-dock button{
    width:100%;
    height:64px;
    border-radius:12px;
    flex-direction:row;
    gap:10px;
    animation:mobileDockPulse 4.5s ease-in-out infinite;
  }

  .bottom-dock button:nth-child(2){animation-delay:.4s;}
  .bottom-dock button:nth-child(3){animation-delay:.8s;}
  .bottom-dock button:nth-child(4){animation-delay:1.2s;}

  @keyframes mobileDockPulse{
    0%,100%{
      box-shadow:
        0 0 14px rgba(0,170,255,.16),
        inset 0 0 16px rgba(0,170,255,.12);
    }
    50%{
      box-shadow:
        0 0 24px rgba(0,190,255,.34),
        inset 0 0 22px rgba(0,170,255,.18);
    }
  }

  .bottom-dock span{
    font-size:20px;
  }

  .bottom-dock em{
    font-size:13px;
  }

  .modal-overlay{
    padding:14px;
  }

  .modal-box{
    max-height:86vh;
    padding:26px 18px;
    border-radius:16px;
  }

  .modal-content h2{
    font-size:26px;
  }

  .modal-content p{
    font-size:14px;
    line-height:1.8;
  }

  .modal-grid,
  .service-list,
  .capability-list{
    grid-template-columns:1fr;
  }

  .site-footer{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    padding:22px 20px 28px;
    flex-direction:column;
    align-items:center;
    gap:8px;
    font-size:12px;
  }
}

@media(max-width:640px){
  .app-shell{
    padding:12px;
  }

  .hero-center h1{
    font-size:40px;
  }

  .modal-box{
    padding:26px 18px;
  }
}

/* Desktop Right Panel 23% + Ops Terminal */
@media(min-width:1181px){

  .app-shell{
    grid-template-columns:280px 1fr minmax(330px,23%);
  }

  .ops-terminal{
    margin-top:18px;
    height:340px;
    border:1px solid rgba(90,205,255,.28);
    border-radius:14px;
    background:
      linear-gradient(180deg,rgba(0,14,28,.78),rgba(0,5,12,.92));
    box-shadow:
      0 0 24px rgba(0,170,255,.14),
      inset 0 0 22px rgba(0,170,255,.08);
    overflow:hidden;
    position:relative;
  }

  .terminal-header{
    height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    border-bottom:1px solid rgba(90,205,255,.22);
    background:rgba(0,18,36,.65);
    color:#bfeaff;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;
  }

  .terminal-header i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#00ffb0;
    box-shadow:0 0 12px #00ffb0;
  }

  #opsCode{
    height:298px;
    padding:14px;
    overflow:hidden;
    color:#74d9ff;
    font-size:12px;
    line-height:1.65;
    font-family:"Consolas","Courier New",monospace;
    white-space:pre-wrap;
    text-shadow:0 0 8px rgba(0,170,255,.45);
  }

  .ops-terminal::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42px;
    background:linear-gradient(180deg,transparent,rgba(0,5,12,.96));
    pointer-events:none;
  }
}
/* Left 8 Menu Adjustment */
@media(min-width:1181px){
  .control-nav{
    gap:9px;
    margin-top:24px;
  }

  .nav-item{
    padding:12px 13px;
    font-size:13px;
  }

  .nav-icon{
    font-size:18px;
  }

  .side-status{
    margin-top:22px;
  }
}
/* Move Bottom Dock To Right Panel On Desktop */
@media(min-width:1181px){

  .main-stage > .bottom-dock{
    display:none;
  }

  .status-panel .right-side-dock{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
    margin:18px 0 0;
    padding:14px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    border-radius:14px;
    background:rgba(0,10,20,.54);
    border:1px solid rgba(90,205,255,.22);
    backdrop-filter:blur(8px);
  }

  .status-panel .right-side-dock button{
    width:100%;
    height:72px;
    border-radius:12px;
    flex-direction:row;
    gap:10px;
  }

  .status-panel .right-side-dock span{
    font-size:22px;
  }

  .status-panel .right-side-dock em{
    font-size:13px;
  }
}

@media(max-width:1180px){
  .status-panel .right-side-dock{
    display:none;
  }
}
/* Mobile Menu Click Fix */
@media(max-width:1180px){

  .top-bar{
    z-index:300;
  }

  .mobile-menu{
    z-index:299;
    pointer-events:auto;
  }

  .mobile-menu.active{
    display:grid;
    pointer-events:auto;
  }

  .mobile-menu button{
    pointer-events:auto;
    cursor:pointer;
  }

  .modal-overlay{
    z-index:500;
  }
}
/* Secure Comm Contact Adaptive Cards */
.contact-grid{
  display:grid;
  gap:16px;
}

.contact-grid.contact-count-1{
  grid-template-columns:1fr;
}

.contact-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px;
  min-height:150px;
  border-radius:16px;
  border:1px solid rgba(90,205,255,.32);
  background:
    linear-gradient(135deg,rgba(0,170,255,.16),rgba(0,10,22,.72)),
    rgba(0,12,24,.56);
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  box-shadow:
    0 0 26px rgba(0,170,255,.16),
    inset 0 0 24px rgba(0,170,255,.08);
  transition:.25s;
}

.contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(0,190,255,.14),transparent);
  transform:translateX(-100%);
  animation:contactSweep 4s linear infinite;
}

@keyframes contactSweep{
  0%{transform:translateX(-100%);}
  55%,100%{transform:translateX(100%);}
}

.contact-card:hover{
  transform:translateY(-4px);
  border-color:rgba(130,230,255,.68);
  box-shadow:
    0 0 34px rgba(0,190,255,.32),
    inset 0 0 28px rgba(0,170,255,.12);
}

.contact-icon{
  position:relative;
  z-index:2;
  width:72px;
  height:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:
    radial-gradient(circle,rgba(0,220,255,.36),rgba(0,20,42,.92));
  border:1px solid rgba(130,230,255,.62);
  color:#e7fbff;
  font-size:34px;
  text-shadow:
    0 0 12px rgba(0,200,255,1),
    0 0 24px rgba(0,170,255,.8);
  box-shadow:
    0 0 20px rgba(0,190,255,.38),
    inset 0 0 18px rgba(0,200,255,.18);
}

.contact-icon img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 10px rgba(0,200,255,.55));
}

.contact-info{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1;
}

.contact-info strong{
  font-size:24px;
  letter-spacing:1px;
  color:#f2fbff;
}

.contact-info span{
  font-size:22px;
  color:#55c9ff;
  font-weight:900;
  text-shadow:0 0 14px rgba(0,170,255,.6);
}

.contact-info em{
  font-style:normal;
  color:#aac7d9;
  line-height:1.6;
  font-size:14px;
}

.contact-action{
  position:relative;
  z-index:2;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(90,205,255,.38);
  color:#dff6ff;
  background:rgba(0,15,30,.62);
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
}

@media(max-width:640px){
  .contact-card{
    flex-direction:column;
    align-items:flex-start;
    padding:22px;
  }

  .contact-icon{
    width:62px;
    height:62px;
    font-size:30px;
  }

  .contact-info strong{
    font-size:22px;
  }

  .contact-info span{
    font-size:20px;
  }

  .contact-action{
    width:100%;
    text-align:center;
  }
}