/* layout.css — header/footer, global layout and utilities
   Based on original layout.css. Cleaned and grouped. */

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(148,163,184,0.25);backdrop-filter:blur(20px);
  background:radial-gradient(circle at top left, rgba(15,23,42,0.96), rgba(3,7,18,0.98));
}
.header-inner{max-width:1200px;margin:0 auto;padding:.8rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

/* Logo */
.logo{display:flex;align-items:center;gap:.8rem;color:inherit}
.logo-img{width:50px;height:50px;border-radius:12px;object-fit:contain;box-shadow:0 0 20px rgba(99,102,241,0.45)}
.logo-text-block{display:flex;flex-direction:column}
.logo-title{font-weight:600;font-size:1rem}
.logo-subtitle{font-size:.72rem;color:var(--text-muted)}

/* NAV */
.main-nav{display:flex;align-items:center;gap:.4rem;flex:1;justify-content:center}
.nav-link{border:none;background:transparent;color:rgba(226,232,240,0.8);font-size:.85rem;padding:.42rem .9rem;border-radius:999px;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;transition:background 140ms,color 140ms,transform 140ms}
.nav-link:hover{background:rgba(15,23,42,0.95);color:#e5e7eb;transform:translateY(-1px)}
.nav-link.active{background:linear-gradient(90deg, rgba(102,126,234,0.12), rgba(124,58,237,0.25));color:#e5edff;box-shadow:0 0 0 1px rgba(129,140,248,0.8)}
.nav-dot{width:7px;height:7px;border-radius:999px;background:rgba(148,163,184,0.8);transform:scale(.7);transition:transform 140ms,box-shadow 140ms}

/* header actions */
.header-actions{display:flex;align-items:center;gap:.75rem}

/* MOBILE */
#mobileMenuToggle{display:none}
@media (max-width:900px){
  .header-inner{padding-inline:1.4rem}
  .main-nav{display:none}
  #mobileMenuToggle{display:block;font-size:1.3rem;cursor:pointer}
  .header-actions{gap:.5rem}
}
@media (max-width:640px){.header-actions{display:none}}

/* FOOTER */
.site-footer{margin-top:4rem;border-top:1px solid rgba(255,255,255,0.07);padding:2.4rem 0;background:rgba(15,16,30,0.55);backdrop-filter:blur(18px)}
.footer-inner{max-width:1180px;margin-inline:auto;padding-inline:1.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}
.footer-brand{display:flex;align-items:center;gap:.9rem}
.footer-logo{width:44px;height:44px;object-fit:contain;border-radius:12px;box-shadow:0 0 20px rgba(99,102,241,0.35)}
.footer-title{font-size:1.1rem;font-weight:600}
.footer-sub{font-size:.78rem;opacity:.7}
.footer-links{display:flex;gap:1.4rem}
.footer-links a{font-size:.85rem;color:rgba(240,240,255,0.75);transition:.2s}
.footer-links a:hover{color:#fff;text-shadow:0 0 12px rgba(139,92,246,0.8)}
.footer-meta{text-align:right}
.footer-meta p{font-size:.8rem;opacity:.6}
@media (max-width:840px){
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-brand{justify-content:center}
  .footer-meta{text-align:center}
}

/* CTA button */
.nav-cta-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.2rem;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border-radius:999px;font-weight:600;letter-spacing:.3px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.14);box-shadow:0 8px 25px rgba(109,40,217,0.35)}
.nav-cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(139,92,246,0.5)}

/* small helpers */
.sticky-shadow{box-shadow:0 6px 22px rgba(0,0,0,0.45)}

/* ACTIVE NAV ITEM */
.nav-link.active {
  background: linear-gradient(90deg, rgba(102,126,234,0.12), rgba(124,58,237,0.25));
  color: #e5edff !important;
  box-shadow: 0 0 0 1px rgba(129,140,248,0.8);
  transform: translateY(-1px);
}

/* MOBILE NAV DROPDOWN */
@media (max-width: 900px) {
  .main-nav.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(3,7,18,0.98);
    padding: 1.4rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid rgba(148,163,184,0.2);
    z-index: 50;
  }

  .nav-cta-btn {
    display: inline-flex !important;
    margin-top: .6rem;
    margin-left: .5rem;
  }
}