body {
  margin:0;
  font-family:'Segoe UI', Arial, sans-serif;
  background:#0f172a;
  color:#e5e7eb;
  line-height:1.6;
}

.container {
  width:90%;
  max-width:1100px;
  margin:auto;
}

/* HEADER */
header {
  background:#0b1220;
  padding:14px 0;
}

.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo {
  color:#fbbf24;
  font-size:20px;
  font-weight:600;
}

nav a {
  color:#cbd5e1;
  margin-left:16px;
  text-decoration:none;
  font-size:14px;
}

nav a:hover {
  color:#fbbf24;
}

/* HERO */
.hero {
  padding:80px 0;   /* reduced from 120px */
  text-align:center;
  background:linear-gradient(135deg,#0b1220,#1e293b);
}

.hero h1 {
  font-size:36px;
  color:#fbbf24;
  margin-bottom:16px;
}

.hero p {
  max-width:800px;
  margin:10px auto;
}

/* SECTION */
.section {
  padding:40px 0;   /* reduced from 70px */
}

.section h2 {
  margin-bottom:20px;
}

.section p {
  margin-bottom:14px;
}

.section ul {
  margin-bottom:14px;
  padding-left:20px;
}

/* GRID */
.grid-3 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;   /* reduced from 40px */
}

/* FOOTER */
footer {
  background:#0b1220;
  padding:25px 0;
  text-align:center;
  color:#94a3b8;
  font-size:13px;
  margin-top:30px;
}

a {
  color:#fbbf24;
}

/* ===================== */
/* MOBILE OPTIMISATION   */
/* ===================== */

@media screen and (max-width: 768px) {

  /* Keep header structure intact */
  .nav {
    flex-wrap: wrap;
  }

  /* Make nav full width */
  nav {
    width: 100%;
    margin-top: 10px;
  }

  /* Stack menu links vertically */
  nav a {
    display: block;
    margin: 8px 0;
  }

  /* Reduce hero size */
  .hero {
    padding: 60px 0;
  }

  .hero h1 {
    font-size: 26px;
  }

  .hero p {
    font-size: 15px;
  }

  /* Reduce section spacing */
  .section {
    padding: 30px 0;
  }

  /* Tighten grid spacing */
  .grid-3 {
    gap: 20px;
  }

}