/* ═══════════════════════════════════════════════
   header.css — header.html ONLY
═══════════════════════════════════════════════ */

header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 clamp(16px,4vw,64px);
  transition:background .45s, border-color .45s, box-shadow .45s;
}
header.scrolled {
  background:rgba(2,8,16,.92);
  backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 4px 48px rgba(0,0,0,.65);
}
nav {
  display:flex; align-items:center; justify-content:space-between;
  height:90px; max-width:1440px; margin:0 auto; gap:16px;
}

/* ── Logo ── */
.nav-logo img {
  height:clamp(72px,9.5vw,108px); width:auto; object-fit:contain; display:block;
  filter:drop-shadow(0 0 14px rgba(0,255,136,.5)) drop-shadow(0 0 32px rgba(0,229,255,.18));
  transition:filter .4s, transform .35s;
}
.nav-logo img:hover {
  filter:drop-shadow(0 0 26px rgba(0,255,136,.8)) drop-shadow(0 0 52px rgba(0,229,255,.35));
  transform:scale(1.05);
}

/* ── Nav Links ── */
.nav-links { display:flex; align-items:center; gap:clamp(14px,2vw,34px); }
.nav-links a {
  color:rgba(232,240,255,.50); text-decoration:none; font-family:'Inter',sans-serif;
  font-size:.82rem; font-weight:500; letter-spacing:.3px;
  position:relative; padding:4px 0; transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:50%;
  width:0; height:1.5px;
  background:linear-gradient(90deg,#00ff88,#00e5ff);
  transform:translateX(-50%);
  transition:width .35s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 6px #00ff88;
}
.nav-links a:hover { color:#e8f0ff; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:#e8f0ff; }

/* ── CTA Button ── */
.nav-mag { display:inline-block; }
.nav-cta {
  display:inline-block; font-family:'Inter',sans-serif;
  font-size:.82rem; font-weight:700; letter-spacing:.4px;
  color:#000; text-decoration:none;
  background:linear-gradient(135deg,#00ff88,#00e5ff);
  padding:11px 26px; border-radius:8px; flex-shrink:0;
  position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,255,136,.5),0 4px 24px rgba(0,255,136,.28);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.nav-cta::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%);
  opacity:0; transition:opacity .3s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 0 1px rgba(0,255,136,.9),0 10px 36px rgba(0,255,136,.42); }
.nav-cta:hover::before { opacity:1; }

/* ── Hamburger ── */
.hbg {
  display:none; flex-direction:column; gap:5px;
  width:32px; background:none; border:none;
  cursor:pointer; flex-shrink:0; padding:2px;
}
.hbg span { display:block; height:1.5px; background:#00ff88; border-radius:1px; transition:all .32s cubic-bezier(.16,1,.3,1); }
.hbg.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hbg.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hbg.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
@media(max-width:920px) { .nav-links,.nav-cta,.nav-mag{display:none;} .hbg{display:flex;} }

/* ── Mobile Drawer ── */
.mob-drawer {
  position:fixed; inset:0 0 0 auto; width:min(90%,360px);
  background:rgba(2,8,16,.97);
  backdrop-filter:blur(40px) saturate(200%);
  border-left:1px solid rgba(255,255,255,.07);
  z-index:2000; transform:translateX(110%);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
  overflow-y:auto; display:flex; flex-direction:column;
}
.mob-drawer.open { transform:translateX(0); }
.mob-drawer-inner { flex:1; padding:110px 24px 0; display:flex; flex-direction:column; }
.mob-links { display:flex; flex-direction:column; gap:4px; flex:1; }
.mob-links a {
  display:flex; align-items:center; gap:13px;
  color:rgba(232,240,255,.50); text-decoration:none; font-family:'Inter',sans-serif;
  font-size:.95rem; font-weight:500;
  padding:14px 16px; border-radius:10px;
  border:1px solid transparent; transition:all .25s; min-height:48px;
}
.mob-links a:hover, .mob-links a.active {
  color:#e8f0ff; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);
}
.mob-links a i { color:#00ff88; width:18px; text-align:center; font-size:.9rem; }

/* ── Services Accordion ── */
.mob-accordion { display:flex; flex-direction:column; gap:4px; }
.mob-acc-toggle {
  display:flex; align-items:center; gap:13px;
  color:rgba(232,240,255,.50); font-family:'Inter',sans-serif;
  font-size:.95rem; font-weight:500;
  padding:14px 16px; border-radius:10px;
  border:1px solid transparent; transition:all .25s; min-height:48px;
  background:none; cursor:pointer; width:100%; text-align:left;
}
.mob-acc-toggle:hover, .mob-acc-toggle.open {
  color:#e8f0ff; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);
}
.mob-acc-toggle i.icon { color:#00ff88; width:18px; text-align:center; font-size:.9rem; flex-shrink:0; }
.mob-acc-toggle .arrow { margin-left:auto; font-size:.7rem; color:rgba(232,240,255,.50); transition:transform .3s cubic-bezier(.16,1,.3,1); flex-shrink:0; }
.mob-acc-toggle.open .arrow { transform:rotate(180deg); color:#00ff88; }
.mob-acc-body { max-height:0; overflow:hidden; transition:max-height .38s cubic-bezier(.16,1,.3,1),opacity .3s; opacity:0; }
.mob-acc-body.open { max-height:600px; opacity:1; }
.mob-sub-links { display:flex; flex-direction:column; gap:2px; padding:4px 0 8px 16px; border-left:1px solid rgba(255,255,255,.12); margin:0 0 4px 26px; }
.mob-sub-links a {
  display:flex; align-items:center; gap:10px;
  color:rgba(232,240,255,.50); text-decoration:none; font-family:'Inter',sans-serif;
  font-size:.88rem; font-weight:400;
  padding:10px 12px; border-radius:8px;
  border:1px solid transparent; transition:all .22s; min-height:42px;
}
.mob-sub-links a:hover { color:#e8f0ff; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
.mob-sub-links a i { color:#00e5ff; width:15px; text-align:center; font-size:.8rem; flex-shrink:0; }

/* ── Drawer Footer ── */
.mob-drawer-footer { padding:24px; border-top:1px solid rgba(255,255,255,.07); background:rgba(2,8,16,.97); flex-shrink:0; }
.mob-cta {
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(135deg,#00ff88,#00e5ff);
  color:#000; font-weight:700; text-decoration:none;
  padding:15px; border-radius:10px; font-size:.92rem;
  min-height:52px; box-shadow:0 0 24px rgba(0,255,136,.28);
  transition:opacity .25s, transform .25s cubic-bezier(.16,1,.3,1);
}
.mob-cta:hover { opacity:.9; transform:translateY(-1px); }

/* ── Backdrop ── */
.bkdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  z-index:1500; opacity:0; pointer-events:none;
  transition:opacity .3s; backdrop-filter:blur(4px);
}
.bkdrop.open { opacity:1; pointer-events:auto; }