* {margin: 0; padding: 0; box-sizing: border-box;}
    body {font-family: 'Segoe UI', sans-serif; color: #333; background-color: #f8f9fa; line-height: 1.6; scroll-behavior: smooth;}
    h1, h2, h3 {line-height: 1.2;}
    a {text-decoration: none;}

    /* Nagłówek */
    header {background-color: #0d6efd; color: white; padding: 60px 20px;}
    .header-container {display: flex; align-items: center; justify-content: center; gap: 40px; max-width: 1100px; margin: auto; flex-wrap: wrap;}
    .header-text {flex: 1; min-width: 280px;}
    .header-text h1 {font-size: 2.2rem; margin-bottom: 5px;}
    .subtitle {font-size: 1.5rem; color: rgba(255, 255, 255, 0.95); margin-bottom: 8px; font-weight: 650;}
    .header-text p {font-size: 1.1rem;}
    .profile-img {width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 5px solid white; box-shadow: 0 0 15px rgba(0,0,0,0.15);}
    .cta-button {display: inline-block; margin-top: 20px; padding: 12px 24px; background-color: #ffc107; color: #333; border-radius: 4px; font-weight: bold; transition: background 0.3s;}
    .cta-button:hover {background-color: #e0a800;}

    /* Menu */
    nav {background-color: #0a58ca; display: flex; justify-content: center; gap: 20px; padding: 12px; flex-wrap: wrap;}
    nav a {color: white; font-weight: bold; transition: 0.3s;}
    nav a:hover {text-decoration: underline;}

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-around;
      width: 30px;
      height: 24px;
      cursor: pointer;
    }
    .hamburger div {
      width: 30px;
      height: 3px;
      background-color: white;
      border-radius: 3px;
      transition: all 0.3s linear;
      position: relative;
      transform-origin: 1px;
    }
    .hamburger.active div:nth-child(1) {
      transform: rotate(45deg);
    }
    .hamburger.active div:nth-child(2) {
      opacity: 0;
      transform: translateX(20px);
    }
    .hamburger.active div:nth-child(3) {
      transform: rotate(-45deg);
    }

    /* Sekcje */
    section {padding: 50px 20px; max-width: 1000px; margin: auto; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;}
    section.visible {opacity: 1; transform: translateY(0);}
    h2 {text-align: left; margin-bottom: 20px; color: #0d6efd;}

    /* Oś doświadczenia */
    .timeline {border-left: 3px solid #0d6efd; padding-left: 20px;}
    .timeline-item {margin-bottom: 30px;}
    .timeline-item h3 {margin-bottom: 5px; color: #343a40;} /* ciemniejszy kolor */
    .timeline-item span {font-size: 0.9em; color: #555;}

    /* Kompetencje */
    .skills-list {list-style: none; padding-left: 0;}
    .skills-list li {background: white; padding: 15px; margin-bottom: 10px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;}
    .skills-list li:hover {transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}

    /* W czym mogę pomóc */
    .help-section {display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 20px;}
    .help-block {background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;}
    .help-block:hover {transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
    .help-block h3 {color: #343a40; margin-bottom: 10px;} /* ciemniejszy kolor */
    .cta-button-secondary {display: none; margin-top: 20px; padding: 12px 24px; background-color: #0d6efd; color: white; border-radius: 4px; font-weight: bold; transition: background 0.3s;}
    .cta-button-secondary:hover {background-color: #0b5ed7;}

    /* Formularz */
    form {display: flex; flex-direction: column;}
    input, textarea {padding: 10px; margin-bottom: 15px; border-radius: 4px; border: 1px solid #ccc; font-size: 16px;}
    button {background-color: #0d6efd; color: white; padding: 12px; border: none; font-size: 16px; border-radius: 4px; cursor: pointer; transition: 0.3s;}
    button:hover {background-color: #0b5ed7;}

    /* Stopka */
    footer {
      text-align: center;
      padding: 20px;
      background-color: #0a58ca;
      color: white;
      margin-top: 40px;
      font-family: 'Segoe UI', sans-serif;
    }
    footer p {
      margin: 5px 0;
    }
    footer a {
      color: white;
      text-decoration: underline;
    }
    footer .github-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    footer .github-icon {
      width: 20px;
      height: 20px;
      fill: white;
    }

    /* Przycisk do góry */
    #toTop {position: fixed; bottom: 20px; right: 20px; display: none; background: #0d6efd; color: white; padding: 10px 15px; border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-size: 18px;}
    #toTop:hover {background: #0b5ed7;}

    /* Responsywność */
    @media (max-width: 768px) {
      .header-container {flex-direction: column; text-align: center;}
      .profile-img {margin-bottom: 20px;}
      nav {
        display: none;
        flex-direction: column;
        gap: 10px;
        padding: 12px 20px;
        background-color: #0a58ca;
      }
      nav.active {
        display: flex;
      }
      nav a {padding: 10px 0;}
      .hamburger {
        display: flex;
        position: fixed;
        top: 18px;
        right: 20px;
        z-index: 1000;
      }
    }

    /* Sekcja dokumentów */
    .document-thumb {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-align: center;
    }
    .document-thumb:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    }
    .document-thumb svg {
      width: 60px;
      height: 80px;
      fill: #E53935; /* czerwony PDF */
      margin-bottom: 10px;
    }
    .document-thumb p {
      font-weight: bold;
      color: #333;
      margin: 0;
    }