:root{
  --primary:#1e40af;
  --secondary:#2563eb;
  --dark:#0f172a;
  --muted:#64748b;
  --light:#f8fafc;
  --border:#e5e7eb;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,Arial,sans-serif;color:var(--dark);line-height:1.65}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:auto;padding:80px 20px}
img{max-width:100%}

/* HEADER */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:100}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:auto;padding:16px 20px}
.brand{font-weight:800;font-size:18px}
.nav ul{list-style:none;display:flex;gap:24px;font-size:14px}
.nav-toggle{display:none;font-size:26px;cursor:pointer}
.cta{background:var(--secondary);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600}

/* MOBILE MENU */
@media(max-width:900px){
  .nav ul{
    position:absolute;top:70px;left:0;right:0;
    background:#fff;
    flex-direction:column;
    padding:24px;
    display:none;
    border-bottom:1px solid var(--border)
  }
  .nav ul.show{display:flex}
  .nav-toggle{display:block}
}

/* HERO */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.hero h1{font-size:44px;line-height:1.15}
.hero p{font-size:18px;color:var(--muted)}
.hero-box{
  height:360px;border-radius:var(--radius);
  background:linear-gradient(135deg,#dbeafe,#e0f2fe);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--primary)
}

/* SECTIONS */
.trust{background:var(--light);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-bar{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;font-weight:600}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}
.card{border:1px solid var(--border);padding:28px;border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,.06)}
.card h3{color:var(--primary);margin-bottom:10px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* FOOTER */
footer{background:#020617;color:#94a3b8}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
footer h4{color:#fff;margin-bottom:10px}

/* RESPONSIVE */
@media(max-width:1024px){.hero h1{font-size:36px}}
@media(max-width:900px){.hero,.two-col{grid-template-columns:1fr}.hero-box{height:260px}}
@media(max-width:600px){.container{padding:56px 16px}.hero h1{font-size:28px}}


@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }

  .hero h1 {
    font-size: 3.2rem;
  }

  .section-title {
    font-size: 2.3rem;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .hero {
    gap: 2rem;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) and (min-width: 600px) {
  .hero h1 {
    font-size: 2.2rem;
  }

  .section {
    padding: 3rem 0;
  }

  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) and (min-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }

  .hero-box {
    padding: 2rem;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    text-align: center;
  }

  .hero-actions {
    flex-direction: column;
  }
}


@media (max-width: 479px) and (min-width: 360px) {
  body {
    font-size: 0.95rem;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .nav {
    padding: 0 0.5rem;
  }
}


@media (max-width: 359px) {
  body {
    font-size: 0.9rem;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .brand {
    font-size: 1rem;
  }

  .hero-box {
    padding: 1.5rem;
  }

  .section {
    padding: 2.5rem 0;
  }
}


@media (max-width: 768px) {
  .nav-menu.active {
    display: flex;
  }
}




/* FOOTER */
.site-footer {
  background: #020617;
  color: #cbd5f5;
  padding: 3rem 0 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-grid a {
  display: block;
  margin-top: 0.5rem;
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #94a3b8;
}