/* ===== Base / Noise Texture ===== */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
.grid-bg {
  background-image: linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ===== Navbar ===== */
#navbar.scrolled { background: rgba(10,14,23,0.92)!important; backdrop-filter: blur(20px)!important; box-shadow: 0 4px 30px rgba(0,0,0,0.4); border-bottom: 1px solid rgba(0,212,255,0.12); }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:#00d4ff; transition:width 0.3s; }
.nav-link:hover::after { width:100%; }

/* ===== Hamburger (mobile) ===== */
@media(max-width:1023px){
  .nav-wrap{display:none!important;flex-direction:column;width:100%;padding:12px 24px 20px;border-top:1px solid rgba(0,212,255,0.12);position:absolute;top:72px;left:0;background:rgba(10,14,23,0.95);backdrop-filter:blur(20px);z-index:999}
  .nav-wrap.open{display:flex!important;gap:0!important}
  .nav-wrap a{display:block;padding:14px 0;font-size:15px;border-bottom:1px solid rgba(0,212,255,0.12)}
  .nav-wrap a::after{display:none}
  .nav-wrap li:last-child a{border-bottom:none}
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Text / Utilities ===== */
.accent-text { background:linear-gradient(135deg,#00d4ff,#00e5c8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-dot { box-shadow:0 0 6px #00e5c8; }

/* ===== Reveal Animation ===== */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===== Hero ===== */
.hero-overlay::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(10,14,23,0.7) 0%, rgba(10,14,23,0.35) 50%, rgba(10,14,23,0.15) 100%), linear-gradient(180deg, rgba(10,14,23,0.6) 0%, transparent 30%, transparent 70%, rgba(10,14,23,0.85) 100%);
}
.hero-overlay > * { position: relative; z-index: 1; }

/* ===== Service Cards ===== */
.svc-card::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:80%; height:1px; background:linear-gradient(90deg,transparent,#00d4ff,transparent); opacity:0; transition:opacity 0.4s; }
.svc-card:hover::before { opacity:1; }

/* ===== Terminal Dots ===== */
.t-dot:nth-child(1){background:#ff5f57}
.t-dot:nth-child(2){background:#ffbd2e}
.t-dot:nth-child(3){background:#28ca41}

/* ===== LED / Dashboard ===== */
.led-on { box-shadow:0 0 4px #00e5c8; }
.led-warn { background:#ffbd2e!important; box-shadow:0 0 4px #ffbd2e; }
.bar-fill { background:linear-gradient(90deg,#0099bb,#00d4ff); }

/* ===== Particles ===== */
.particle { position:absolute; width:2px; height:2px; background:#00d4ff; border-radius:50%; opacity:0; animation:floatP 8s ease-in-out infinite; }
@keyframes floatP { 0%{opacity:0;transform:translateY(100vh) scale(0)} 20%{opacity:0.6} 80%{opacity:0.3} 100%{opacity:0;transform:translateY(-20vh) scale(1)} }

/* ===== Light Shimmer ===== */
.hero-shimmer {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;
}
.hero-shimmer::before {
  content:''; position:absolute; top:-50%; left:-50%;
  width:40%; height:200%;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 55%, transparent 60%);
  animation:shimmer-sweep 8s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0%   { transform:translateX(-20%) rotate(15deg); }
  50%  { transform:translateX(320%) rotate(15deg); }
  100% { transform:translateX(320%) rotate(15deg); }
}

/* ===== Staff / Career Table ===== */
.career { width:100%; text-align:left; border-collapse:collapse; }
.career > tbody > tr > th {
  padding:14px 16px; background:rgba(0,212,255,0.04); border:1px solid rgba(0,212,255,0.12);
  color:#00d4ff; font-size:13px; font-weight:600; white-space:nowrap; vertical-align:top; width:120px;
}
.career > tbody > tr > td {
  padding:14px 16px; border:1px solid rgba(0,212,255,0.12);
  color:#d8d2d4; font-size:13.5px; line-height:1.8; vertical-align:top;
}
.career .border-no { width:100%; border-collapse:collapse; }
.career .border-no td { padding:4px 8px 4px 0; border:none; vertical-align:top; font-size:13px; color:#d8d2d4; }
.career .border-no td:first-child { white-space:nowrap; color:#8a94a6; padding-right:16px; }
.career .border-under { width:100%; border-collapse:collapse; }
.career .border-under td { padding:12px 0; border-bottom:1px solid rgba(0,212,255,0.08); font-size:13px; line-height:1.8; color:#d8d2d4; }
.career .date { color:#00d4ff; font-weight:500; font-family:'JetBrains Mono',monospace; font-size:12px; }
.career .auxiliary { color:#8a94a6; font-size:12px; }
.career a { color:#00d4ff; text-decoration:none; transition:opacity 0.3s; }
.career a:hover { opacity:0.7; text-decoration:underline; }
@media(max-width:640px){
  .career > tbody > tr { display:flex; flex-direction:column; }
  .career > tbody > tr > th { width:100%; white-space:normal; }
  .career > tbody > tr > td { width:100%; }
}

/* ===== Modals ===== */
.modal-overlay { display:none; }
.modal-overlay.open { display:flex; }
.modal-scroll::-webkit-scrollbar { width:4px; }
.modal-scroll::-webkit-scrollbar-thumb { background:rgba(0,212,255,0.3); border-radius:2px; }