/* ========== NAVBAR ========== */
.navbar{
  position:sticky;top:0;left:0;right:0;
  background:var(--white);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  z-index:1000;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;height:80px;
}
.brand{font-size:1.5rem;font-weight:800;color:var(--navy);}
.nav-links{
  display:flex;gap:2rem;list-style:none;
}
.nav-links a{font-weight:600;position:relative;}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;
  width:0;height:2px;background:var(--teal);transition:var(--transition);
}
.nav-links a:hover::after{width:100%;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.hamburger span{
  width:25px;height:3px;background:var(--navy);transition:var(--transition);
}
@media(max-width:768px){
  .nav-links{
    position:absolute;top:80px;left:0;right:0;
    background:var(--white);flex-direction:column;
    padding:2rem;box-shadow:0 6px 10px rgba(0,0,0,.05);
    transform:translateY(-150%);transition:var(--transition);
  }
  .nav-links.open{transform:translateY(0);}
  .hamburger{display:flex;}
}
/* ========== FOOTER ========== */
.footer{
  background:var(--navy);color:var(--white);padding:3rem 0 2rem;text-align:center;
}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;text-align:left;
}
.footer h4{margin-bottom:1rem;}
.footer a:hover{color:var(--teal);}
.socials{display:flex;gap:1rem;margin-top:1rem;}
.socials img{width:24px;height:24px;filter:invert(1);}
/* ========== HERO ========== */
.hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6rem 0 4rem;
}
.hero h1{font-size:3rem;margin-bottom:1rem;}
.hero p{max-width:600px;margin-bottom:2rem;font-size:1.1rem;}
/* ========== SECTIONS ========== */
.section{padding:4rem 0;}
.section-head{text-align:center;margin-bottom:3rem;}
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;
}
.card{
  background:var(--gray);padding:2rem;border-radius:var(--radius);
  transition:var(--transition);
}
.card:hover{transform:translateY(-5px);}
/* ========== TESTIMONIALS ========== */
.testimonial{
  background:var(--gray);padding:2rem;border-radius:var(--radius);max-width:700px;margin:auto;
  text-align:center;
}
.testimonial img{
  width:70px;height:70px;border-radius:50%;margin:auto;margin-bottom:1rem;
}
/* ========== PRICING ========== */
.pricing-table{
  display:grid;grid-template-columns:repeat(auto-fit,minmax 260px,1fr);gap:2rem;
}
.plan{
  background:var(--white);border:2px solid var(--teal);border-radius:var(--radius);
  padding:2rem;text-align:center;
}
.plan h3{margin-bottom:1rem;}
.plan .price{font-size:2rem;font-weight:800;color:var(--teal);}
/* ========== FORM ========== */
.form-group{margin-bottom:1.2rem;}
.form-group label{display:block;margin-bottom:.5rem;font-weight:600;}
.form-group input,.form-group textarea{
  width:100%;padding:.8rem;border:1px solid #ccc;border-radius:var(--radius);
  font-family:var(--font);
}
/* ========== BLOG ========== */
.blog-list article{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #eee;}
.blog-list h2 a{color:var(--navy);}
.blog-list h2 a:hover{color:var(--teal);}
/* ========== RESPONSIVE HELPERS ========== */
@media(max-width:600px){
  .hero h1{font-size:2.2rem;}
}