/* Root & reset */
:root{
  --clr-primary:#2563eb;
  --clr-dark:#1e293b;
  --clr-light:#fff;
  --clr-gray:#64748b;
  --radius:8px;
  --shadow:0 4px 8px rgb(0 0 0/.08);
  --trans:.3s ease;
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font:400 1rem/1.6 'Inter',sans-serif;color:var(--clr-dark);background:var(--clr-light)}

/* Utility */
.container{width:min(92%,1200px);margin-inline:auto}
.section{padding:4rem 0}
.section__title{text-align:center;font-size:clamp(1.6rem,2vw+1rem,2.4rem);margin-bottom:2.5rem;color:var(--clr-dark)}

/* Header */
.header{position:sticky;top:0;background:#fff;box-shadow:var(--shadow);z-index:999}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.logo{font-weight:700;font-size:1.5rem;color:var(--clr-primary);text-decoration:none}
.nav__toggle{display:block;background:none;border:0;cursor:pointer}
.nav__toggle span{display:block;width:24px;height:3px;background:var(--clr-dark);margin:5px 0;transition:var(--trans)}
.nav__menu{list-style:none;display:none}
.nav__menu a{display:block;padding:1rem;color:var(--clr-dark);text-decoration:none;transition:var(--trans)}
.nav__menu a:hover{color:var(--clr-primary)}
.nav__menu.active{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:var(--shadow)}

/* Hero */
.hero{background:linear-gradient(130deg,var(--clr-primary),var(--clr-gray));color:#fff;min-height:55vh;display:grid;place-items:center;text-align:center;padding:3rem 1rem}
.hero__content h1{font-size:clamp(2rem,3vw+1.5rem,3rem);margin-bottom:1rem}
.hero__content p{font-size:1.1rem;margin-bottom:2rem;opacity:.9}

/* Buttons */
.btn{display:inline-block;padding:.9rem 1.8rem;border:0;border-radius:var(--radius);background:#fff;color:var(--clr-primary);font-weight:600;text-decoration:none;cursor:pointer;transition:var(--trans)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--primary{background:var(--clr-light);color:var(--clr-primary)}

/* Services */
.services__grid{display:grid;gap:2rem}
.card{background:#fff;padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;transition:var(--trans)}
.card:hover{transform:translateY(-4px)}
.card h3{margin-bottom:1rem;color:var(--clr-primary)}

/* About */
.about p{max-width:60ch;margin-inline:auto;font-size:1.1rem}

/* Testimonials */
.testimonials__grid{display:grid;gap:2rem}
.quote{background:#f8fafc;padding:1.5rem;border-left:4px solid var(--clr-primary);border-radius:var(--radius);font-style:italic}
.quote cite{display:block;margin-top:.75rem;color:var(--clr-gray);font-style:normal}

/* Contact */
.contact__grid{display:grid;gap:2rem}
.contact__info{font-size:1.05rem}
.contact__text a{color:var(--clr-primary);text-decoration:none}
.contact__form{display:flex;flex-direction:column;gap:1rem}
.contact__form input,.contact__form textarea{padding:.8rem;border:2px solid #e2e8f0;border-radius:var(--radius);font-family:inherit}
.contact__form input:focus,.contact__form textarea:focus{outline:none;border-color:var(--clr-primary)}
.form-notice{color:var(--clr-primary);margin-top:.5rem}

/* Footer */
.footer{background:var(--clr-dark);color:#fff;text-align:center;padding:1.5rem}

/* Media Queries */
@media(min-width:768px){
 .nav__toggle{display:none}
 .nav__menu{display:flex;gap:1rem;position:static}
 .services__grid{grid-template-columns:repeat(2,1fr)}
 .contact__grid{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
 .services__grid{grid-template-columns:repeat(4,1fr)}
}