/* Shared header/footer shell for all pages */

:root{
  --c-text-tertiary: #64748b;
}

body{
  padding-top: 78px;
}

header.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: saturate(1.3) blur(25px);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  border-bottom: 2px solid rgba(124, 58, 237, .4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
header.nav.scrolled{
  box-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}
header.nav .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.45rem 0;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
header.nav.scrolled .inner{
  padding:0.25rem 0;
}
header.nav .container{
  width:min(1400px, 94%);
  margin-inline:auto;
  max-width: 100%;
  padding: 0;
}
.logo{
  display:flex;
  gap:.8rem;
  align-items:center;
  font-weight:700;
  letter-spacing:.3px;
  color:#fff;
  font-size:1.1rem;
}
.logo img{
  height:62px;
  width:auto;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(1.1);
}
header.nav.scrolled .logo img{
  height:50px;
}
.logo:hover img{
  transform:scale(1.05);
}

header.nav nav{
  display:flex;
  gap:.4rem;
  align-items:center;
}
header.nav nav a{
  color: rgba(255, 255, 255, 0.85);
  padding:.5rem .9rem;
  border-radius:10px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
header.nav nav a:hover,
header.nav nav a:focus-visible{
  color:#fff;
  outline:none;
  background: rgba(124, 58, 237, .3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .4);
}
header.nav nav a.btn-primary{
  color:#fff;
  padding:.5rem 1.1rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:0.875rem;
}
header.nav nav a.btn-primary:hover{
  transform: translateY(-2px) scale(1.02);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1rem 1.6rem;
  border-radius:14px;
  font-weight:700;
  border:2px solid rgba(124, 58, 237, .25);
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 30px rgba(124, 58, 237, .15);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  color:#1e293b;
  font-size:1rem;
}
.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(124, 58, 237, .25);
  border-color: rgba(124, 58, 237, .4);
}
.btn-primary{
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color:#fff;
  border-color: transparent;
  box-shadow: 0 8px 30px rgba(124, 58, 237, .4);
}
.btn-primary:hover{
  box-shadow: 0 12px 40px rgba(124, 58, 237, .5);
  transform: translateY(-4px) scale(1.02);
}

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:60;
}
.menu-toggle span{
  display:block;
  width:28px;
  height:3px;
  background:#fff;
  border-radius:3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle.active span:nth-child(1){
  transform: rotate(45deg) translate(8px, 8px);
}
.menu-toggle.active span:nth-child(2){
  opacity:0;
}
.menu-toggle.active span:nth-child(3){
  transform: rotate(-45deg) translate(7px, -7px);
}

footer.site-footer{
  padding:60px 0;
  border-top:3px solid rgba(124, 58, 237, .2);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(20px);
}
footer.site-footer .container{
  width:min(1400px, 94%);
  margin-inline:auto;
  max-width: 100%;
  padding: 0;
}
footer.site-footer p{
  color:#475569;
  margin:10px 0;
  font-size:1rem;
}
footer.site-footer a{
  color:#7c3aed;
  font-weight:600;
  transition: all .3s ease;
  text-decoration: none;
}
footer.site-footer a:hover{
  color:#6d28d9;
  transform: translateX(2px);
  display:inline-block;
}
.social-links{
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  background: rgba(124, 58, 237, .1);
  border:2px solid rgba(124, 58, 237, .3);
  border-radius:12px;
  transition: all .3s ease;
  font-weight:700;
}
.social-links a:hover{
  background:#7c3aed;
  color:#fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3);
}

@media (max-width: 980px){
  header.nav .inner{
    flex-direction:row;
    gap:0;
    text-align:left;
    padding:0.5rem 0;
  }
  .logo img{height:45px;}
  .menu-toggle{display:flex;}
  header.nav nav{
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 80px 24px 24px;
    gap: 0;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 30px rgba(0, 0, 0, .3);
    overflow-y: auto;
    z-index: 55;
  }
  header.nav nav.active{right:0;}
  header.nav nav a{
    width:100%;
    padding:1rem 1.2rem;
    font-size:1.05rem;
    text-align:left;
    border-bottom:1px solid rgba(124, 58, 237, .2);
  }
  header.nav nav a.btn-primary{
    margin-top:12px;
    border-bottom:none;
    justify-content:center;
  }
}

@media (min-width: 1600px){
  header.nav .container,
  footer.site-footer .container{
    width:min(1600px, 92%);
    margin-inline:auto;
  }
}

@media (min-width: 2000px){
  header.nav .container,
  footer.site-footer .container{
    width:min(1800px, 90%);
    margin-inline:auto;
  }
}

@media (max-width: 640px){
  .logo img{height:40px;}
  header.nav nav{width:100%; padding:70px 20px 20px;}
  header.nav nav a{padding:0.9rem 1rem; font-size:1rem;}
}