body {
margin: 0;
font-family: Arial;
background: #0b1220;
color: white;
}

/* NAV */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(10px);
}

.nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}

.btn-small {
background: #1e90ff;
padding: 8px 15px;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
}

/* HERO */
.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 80px 60px;
gap: 40px;
}

.hero-right img {
width: 500px;
border-radius: 20px;
transition: 0.4s;
}

.hero-right img:hover {
transform: scale(1.05);
}

/* BUTTONS */
.primary {
background: #1e90ff;
padding: 12px 20px;
border: none;
color: white;
border-radius: 8px;
cursor: pointer;
}

.secondary {
background: transparent;
border: 1px solid white;
padding: 12px 20px;
color: white;
border-radius: 8px;
cursor: pointer;
}

/* STATS */
.stats {
display: flex;
justify-content: space-around;
padding: 50px;
background: #111a2e;
text-align: center;
}

/* SERVICES */
.services {
padding: 60px;
text-align: center;
}

.grid {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}

.card {
background: #111a2e;
padding: 20px;
border-radius: 15px;
width: 250px;
transition: 0.3s;
}

.card:hover {
transform: translateY(-10px);
}

.card img {
width: 100%;
border-radius: 10px;
}

/* WHY */
.why {
display: flex;
justify-content: space-around;
align-items: center;
padding: 60px;
flex-wrap: wrap;
}

.why img {
width: 400px;
border-radius: 15px;
max-width: 100%;
}

/* PRICING */
.pricing {
display: flex;
justify-content: center;
gap: 20px;
padding: 60px;
flex-wrap: wrap;
}

.price-card {
background: #111a2e;
padding: 30px;
border-radius: 15px;
text-align: center;
width: 200px;
transition: 0.3s;
}

.price-card:hover {
transform: scale(1.05);
}

.highlight {
border: 2px solid #1e90ff;
}

/* CTA */
.cta-button {
display: inline-block;
background: #1e90ff;
color: white;
padding: 15px 25px;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
text-decoration: none;
transition: 0.3s;
margin-top: 20px;
}

.cta-button:hover {
background: #0d6efd;
transform: scale(1.05);
}

.cta-button:hover {
background: #0d6efd;
transform: scale(1.05);
}

/* FOOTER */
.footer {
background: black;
padding: 40px;
margin-top: 50px;
}

.footer-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}

.footer a {
display: block;
color: white;
text-decoration: none;
margin: 5px 0;
opacity: 0.8;
}

.footer a:hover {
opacity: 1;
}

.copy {
text-align: center;
margin-top: 20px;
opacity: 0.6;
}

/* =========================
   GLOBAL FIX (IMPORTANT)
========================= */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   HERO FIX
========================= */

.hero {
  flex-wrap: wrap;
}

.hero-left,
.hero-right {
  flex: 1;
  min-width: 280px;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 1024px) {

  .hero {
    padding: 50px 40px;
  }

  .hero-right img {
    width: 100%;
  }

  .stats {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* =========================
   TABLET + MOBILE
========================= */

@media (max-width: 768px) {

  /* NAV FIX */
  .nav {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .nav nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* HERO STACK */
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }

  /* STATS STACK */
  .stats {
    flex-direction: column;
    align-items: center;
  }

  /* WHY SECTION */
  .why {
    flex-direction: column;
    text-align: center;
  }

  .why img {
    margin-top: 20px;
  }

  /* PRICING STACK */
  .pricing {
    flex-direction: column;
    align-items: center;
  }

  /* CARDS FULL WIDTH */
  .card,
  .price-card {
    width: 90%;
  }

  /* CTA BUTTON FULL */
  .cta-button {
    width: 100%;
    text-align: center;
  }

  /* HERO IMAGE */
  .hero-right img {
    width: 100%;
    max-width: 350px;
  }
}

/* =========================
   SMALL MOBILE (VERY IMPORTANT)
========================= */

@media (max-width: 480px) {

  .hero {
    padding: 20px 15px;
  }

  h1 {
    font-size: 22px;
  }

  .cta-button {
    font-size: 16px;
    padding: 12px 15px;
  }

  .btn-small {
    width: 100%;
  }
}
.logo img {
  width: 120px;
  height: auto;
}