/* NAVBAR COMPACT + ACTIVE */
nav{padding:12px 0}
.nav-links{gap:12px;flex-wrap:nowrap}
nav a.active{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px
}

/* Mobile-first dropdown menu (works with assets/js/main.js data-open toggle) */
@media (max-width: 900px){
  /* keep header tidy */
  .site-header .nav{position:relative}
  .site-header .brand-title span{display:none}
  .site-header .brand img{height:34px !important}

  /* collapse CTAs into menu to avoid overflow */
  .site-header .cta{display:none}

  /* hide links by default; show only when data-open=true */
  .site-header .nav-links{
    display:none !important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top:10px;
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    white-space:normal;
    background:rgba(5,7,17,.96);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
  }
  .site-header .nav-links[data-open="true"]{display:flex !important}
  .site-header .nav-links a{
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
  }
  .site-header .nav-links a.active{
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.08);
  }
}

/* FAQ */
.faq-a{display:none}
.faq-item.open .faq-a{display:block}
.faq-q{cursor:pointer;font-weight:600}

/* SOCIAL */
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social a{
  height:38px;width:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  color:#fff
}
.footer-social a:hover{background:rgba(255,255,255,.08)}

/* RESPONSIVE */
@media(max-width:768px){
  .grid{grid-template-columns:1fr!important}
  /* menu is handled via dropdown above */
}



/* === MEGA FOOTER (XploreByte-like layout) === */
.footer.footer--mega{padding:40px 0 26px}
.footer-mega{
  display:grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap:28px;
  align-items:start;
  padding-top:18px;
}
.footer-brand-row{display:flex;gap:12px;align-items:center}
.footer-logo{height:42px;width:auto}
.footer-brand-name{font-weight:800;font-size:18px;color:var(--text)}
.footer-brand-tag{font-size:12px;color:var(--muted);margin-top:2px}
.footer-desc{margin:14px 0 0;color:var(--muted);line-height:1.55;max-width:520px}
.footer-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.footer-cols{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:18px;
}
.footer-col h4{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.footer-col a{
  display:block;
  color:var(--muted);
  text-decoration:none;
  padding:6px 0;
  font-size:14px;
}
.footer-col a:hover{color:#fff}
.footer-col i{width:18px;opacity:.85;margin-right:8px}

.footer-bottom{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.10);
  margin-top:26px;
  padding-top:18px;
  flex-wrap:wrap;
}
.footer-copy{color:var(--muted);font-size:13px}
.footer-bottom-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.footer-bottom-links a{color:var(--muted);text-decoration:none;font-size:13px}
.footer-bottom-links a:hover{color:#fff}
.footer-bottom-links .dot{opacity:.45}

/* Social icons like screenshot: rounded squares, single row */
.footer.footer--mega .footer-social{
  display:flex;
  gap:10px;
  margin:0;
  flex-wrap:wrap;
}
.footer.footer--mega .footer-social a{
  height:44px;width:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  text-decoration:none;
  transition:.2s ease;
}
.footer.footer--mega .footer-social a:hover{
  background:rgba(255,255,255,.10);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1100px){
  .footer-mega{grid-template-columns:1fr}
  .footer-cols{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px){
  .footer-cols{grid-template-columns:1fr}
  .footer.footer--mega .footer-social a{height:42px;width:42px;border-radius:12px}
}