:root {
    --primary: #0063dc;
    --dark: #000c2d;
    --accent: #00b4b3;
    --text: #333;
    --light: #f4f4f4;
  }
  * { box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; color: var(--text); line-height: 1.6; }
  header { background: #fff; padding: 20px; text-align: center; border-bottom: 1px solid #eee; }
  .logo-text { font-size: 24px; font-weight: bold; color: var(--dark); text-decoration: none; display: block; margin-bottom: 15px; }
  nav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
  nav a { color: var(--primary); text-decoration: none; font-weight: 500; }
  .hero { background: var(--dark); color: #fff; padding: 100px 20px; text-align: center; }
  .hero-img { width: 100%; max-width: 800px; height: 300px; background-size: cover; background-position: center; margin: 20px auto; }
  .container { max-width: 1024px; margin: 0 auto; padding: 40px 20px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
  .card { border: 1px solid #ddd; padding: 20px; text-align: center; border-radius: 8px; }
  .card-img { width: 100%; height: 200px; background: #eee; margin-bottom: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .btn { display: inline-block; background: var(--primary); color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 5px; margin-top: 15px; }
  footer { background: var(--dark); color: #fff; text-align: center; padding: 40px; }
  @media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } }