body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #fff; line-height: 1.6;}
        h1 {text-align: center;color: #222;}
        p,h3,li {max-width: 900px;margin: 5%;line-height: 18px;}
        li {line-height: 1px;}
        a {text-decoration:none;}
         /* ===== HEADER ===== */
  header { background: #111827; color: white; padding: 12px 20px; }
  .header-content { display: flex; align-items: center; justify-content: space-between; }
  .header-title { font-size: 20px; font-weight: bold; letter-spacing: 0.5px; }
  .header-social a { display: inline-flex; align-items: center; margin-left: 12px; -webkit-tap-highlight-color: transparent;}
  .header-social img { width: 22px; height: 22px; display: block; transition: filter 0.2s ease; -webkit-tap-highlight-color: transparent;}
  .header-social a:hover img { filter: brightness(1) invert(1) sepia(1) hue-rotate(180deg) saturate(3); }

  /* ===== FOOTER ===== */
  footer { background: #111827; color: white; padding: 20px; font-size: 14px; text-align: center; margin-top: 9%; }
  footer nav { margin-bottom: 8px; }
  footer nav a { color: white; text-decoration: none; margin: 0 10px; -webkit-tap-highlight-color: transparent;}
  footer nav a:hover { text-decoration: underline; }
  img {border-radius: 6px;}