body { font-family: 'Poppins', sans-serif; margin: 0; padding: 2rem; background: #f8f9fb; color: #1a1a1a; }
    h1 { color: #0066cc; }
    article { max-width: 800px; margin: auto; }
    a { color: #00a6a6; text-decoration: none; }
    a:hover { text-decoration: underline; }
    header { background:#0066cc; color:white; padding:1rem 2rem; text-align:center; }
    header img { max-width:160px; }
    nav { background:white; display:flex; justify-content:center; gap:2rem; padding:1rem 0; box-shadow:0 2px 4px rgba(0,0,0,0.05); }
    nav a { color:#0066cc; text-decoration:none; font-weight:500; }

    .navbar {
      background: white;
      padding: 1rem;
      position: relative;
      text-align: center;
    }

    .menu {
      display: flex;
      gap: 2rem;
      justify-content: center;
      list-style: none;
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
    }

    .menu li a {
      text-decoration: none;
      color: #0066cc;
      font-weight: 500;
    }

    .menu-icon {
      display: none;
      font-size: 2rem;
      cursor: pointer;
      position: absolute;
      top: 1rem;
      right: 1.5rem;
    }

    #menu-toggle {
      display: none;
    }

    @media (max-width: 768px) {
      .navbar {
        padding: 2rem;
      }
      .menu {
        display: none;
        flex-direction: column;
        background: white;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }

      #menu-toggle:checked + .menu-icon + .menu {
        display: flex;
      }

      .menu-icon {
        display: block;
      }
    }