<style>

    /* Resetowanie stylów domyślnych */

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }






    body {

      font-family: 'Poppins', sans-serif;

      background: var(--dark-bg);

      color: var(--text-light);

      line-height: 1.6;

      overflow-x: hidden;

    }



    a {

      color: inherit;

      text-decoration: none;

      transition: var(--transition);

    }



    a:hover {

      color: var(--accent-light);

    }



    img {

      display: block;

      max-width: 100%;

      height: auto;

    }



    .container {

      width: 100%;

      max-width: 1200px;

      margin: 0 auto;

      padding: 0 20px;

    }



    section {

      padding: 100px 0;

    }



    .section-title {

      font-size: 2.5rem;

      font-weight: 700;

      margin-bottom: 60px;

      color: var(--text-light);

      text-align: center;

      position: relative;

    }



    .section-title::after {

      content: '';

      display: block;

      width: 80px;

      height: 4px;

      background: var(--accent-blue);

      margin: 15px auto 0;

      border-radius: 2px;

    }



    .btn {

      display: inline-block;

      padding: 14px 32px;

      font-weight: 600;

      border-radius: 50px;

      cursor: pointer;

      border: none;

      transition: var(--transition);

      text-align: center;

      font-size: 1rem;

      box-shadow: 0 4px 15px rgba(0,0,0,0.3);

      background: var(--accent-blue);

      color: white;

      text-transform: uppercase;

      letter-spacing: 1px;

    }



    .btn:hover {

      transform: translateY(-3px);

      box-shadow: 0 6px 20px rgba(30, 144, 255, 0.4);

      background: var(--accent-light);

    }



    .btn-secondary {

      background: transparent;

      color: var(--accent-blue);

      border: 2px solid var(--accent-blue);

    }



    .btn-secondary:hover {

      background: rgba(30, 144, 255, 0.1);

    }

    ee-plan {

  background:  linear-gradient(180deg, rgba(30,30,30,0.6), rgba(20,20,20,0.7));

  border: 1px solid rgba(77,166,255,0.06);

  border-radius: 16px;

  padding: 28px;

  display: flex;

  gap: 30px;

  align-items: center;

  justify-content: space-between;

  box-shadow: 0 10px 30px rgba(2,12,27,0.6);

  color: var(--text-light);

}



/* kontener treści i media */

.free-plan__content {

  flex: 1 1 48%;

  min-width: 260px;

  padding-right: 10px;

}





    /* Hero Section */

      .hero-section {

            min-height: 100vh;

            display: flex;

            align-items: center;

            position: relative;

            overflow: hidden;

            padding: 0 5%;

        }



        .hero-container {

            display: flex;

            align-items: center;

            justify-content: space-between;

            width: 100%;

            max-width: 1400px;

            margin: 0 auto;

            position: relative;

            z-index: 2;

        }



        .hero-content {

            flex: 1;

            padding-right: 50px;

            max-width: 650px;

        }



        .hero-title {

            font-size: 3.5rem;

            font-weight: 800;

            line-height: 1.1;

            margin-bottom: 1.5rem;

            position: relative;

        }



        .hero-title span {

            color: var(--accent-blue);

        }



        .hero-subtitle {

            font-size: 1.5rem;

            color: var(--accent-light-blue);

            margin-bottom: 1rem;

            font-weight: 300;

        }



        .hero-description {

            font-size: 1.1rem;

            line-height: 1.8;

            margin-bottom: 2.5rem;

            color: var(--text-gray);

            max-width: 600px;

        }



        .cta-button {

            display: inline-block;

            background: linear-gradient(135deg, var(--accent-blue), var(--accent-light-blue));

            color: white;

            padding: 15px 35px;

            font-size: 1.1rem;

            font-weight: 600;

            border-radius: 50px;

            text-decoration: none;

            transition: all 0.3s ease;

            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);

            border: none;

            cursor: pointer;

            letter-spacing: 1px;

        }



        .cta-button:hover {

            transform: translateY(-3px);

            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.5);

        }



        .hero-image-container {

            flex: 1;

            display: flex;

            justify-content: flex-end;

            position: relative;

        }



        .hero-image {

            width: 120%;

            height: 120%;

            max-width: 500px;

            border-radius: 20px;

            overflow: hidden;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

            position: relative;

            z-index: 2;

        }



        .hero-image img {

            width: 100%;

            height: auto;

            display: block;

            transition: transform 0.5s ease;

        }



        .hero-image:hover img {

            transform: scale(1.05);

        }



        /* Dekoracje */

        .decorations {

            position: absolute;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

            pointer-events: none;

            z-index: 1;

        }



        .circle {

            position: absolute;

            border-radius: 50%;

            background: radial-gradient(circle, rgba(52, 152, 219, 0.15) 0%, rgba(52, 152, 219, 0) 70%);

        }



        .circle-1 {

            width: 250px;

            height: 250px;

            top: 10%;

            left: 5%;

        }



        .circle-2 {

            width: 400px;

            height: 400px;

            bottom: 10%;

            right: 10%;

        }



        .leaf {

            position: absolute;

            opacity: 0.15;

            color: var(--accent-light-blue);

        }



        .leaf-1 {

            font-size: 10rem;

            top: 15%;

            right: 25%;

            transform: rotate(45deg);

        }



        .leaf-2 {

            font-size: 8rem;

            bottom: 20%;

            left: 15%;

            transform: rotate(-20deg);

        }



        .dumbbell {

            position: absolute;

            font-size: 4rem;

            color: var(--accent-blue);

            opacity: 0.1;

            transform: rotate(45deg);

        }



        .dumbbell-1 {

            top: 40%;

            left: 30%;

        }



        .dumbbell-2 {

            bottom: 30%;

            right: 35%;

        }



        .wave {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%;

            overflow: hidden;

            line-height: 0;

            transform: rotate(180deg);

            z-index: 1;

        }



        .wave svg {

            position: relative;

            display: block;

            width: calc(100% + 1.3px);

            height: 150px;

        }



        .wave .shape-fill {

            fill: var(--secondary-dark);

        }



        /* Responsywność */

        @media (max-width: 992px) {

            .hero-container {

                flex-direction: column;

                text-align: center;

                padding: 100px 0;

            }



            .hero-content {

                padding-right: 0;

                margin-bottom: 50px;

                max-width: 100%;

            }



            .hero-description {

                max-width: 100%;

            }



            .hero-title {

                font-size: 2.8rem;

            }



            .hero-subtitle {

                font-size: 1.3rem;

            }



            .leaf-1, .leaf-2 {

                display: none;

            }

        }



        @media (max-width: 576px) {

            .hero-title {

                font-size: 2.2rem;

            }



            .hero-subtitle {

                font-size: 1.1rem;

            }



            .hero-description {

                font-size: 1rem;

            }



            .cta-button {

                padding: 12px 30px;

                font-size: 1rem;

            }

        }



    /* About Section */

     .about-section {

            min-height: 100vh;

            display: flex;

            align-items: center;

            position: relative;

            overflow: hidden;

            padding: 100px 5%;

            background-color: var(--secondary-dark);

        }



        .about-container {

            display: flex;

            align-items: center;

            justify-content: space-between;

            width: 100%;

            max-width: 1400px;

            margin: 0 auto;

            position: relative;

            z-index: 2;

        }



        .about-image-container {

            flex: 1;

            display: flex;

            justify-content: center;

            position: relative;

        }



        .portrait-frame {

            width: 85%;

            max-width: 400px;

            border-radius: 20px;

            overflow: hidden;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

            position: relative;

            z-index: 2;

            border: 5px solid rgba(52, 152, 219, 0.2);

        }



        .portrait-frame img {

            width: 100%;

            height: auto;

            display: block;

            transition: transform 0.5s ease;

        }



        .portrait-frame:hover img {

            transform: scale(1.03);

        }



        .about-content {

            flex: 1;

            padding-left: 50px;

            max-width: 650px;

        }



        .section-title {

            font-size: 2.8rem;

            font-weight: 800;

            line-height: 1.1;

            margin-bottom: 1.5rem;

            position: relative;

        }



        .section-title span {

            color: var(--accent-blue);

        }



        .about-description {

            font-size: 1.1rem;

            line-height: 1.8;

            margin-bottom: 1.5rem;

            color: var(--text-gray);

        }



        .highlight {

            color: var(--accent-light-blue);

            font-weight: 500;

        }



        .signature {

            display: flex;

            flex-direction: column;

            margin-top: 30px;

        }



        .signature-name {

            font-size: 1.4rem;

            font-weight: 600;

            color: var(--accent-blue);

            margin-bottom: 5px;

        }



        .signature-title {

            font-size: 0.9rem;

            color: var(--text-gray);

            font-style: italic;

        }



        /* Dekoracje */

        .decorations {

            position: absolute;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

            pointer-events: none;

            z-index: 1;

        }



        .circle {

            position: absolute;

            border-radius: 50%;

            background: radial-gradient(circle, rgba(52, 152, 219, 0.15) 0%, rgba(52, 152, 219, 0) 70%);

        }



        .circle-1 {

            width: 200px;

            height: 200px;

            top: 20%;

            left: 10%;

        }



        .circle-2 {

            width: 300px;

            height: 300px;

            bottom: 15%;

            right: 15%;

        }



        .leaf {

            position: absolute;

            opacity: 0.15;

            color: var(--accent-light-blue);

        }



        .leaf-1 {

            font-size: 8rem;

            top: 10%;

            right: 20%;

            transform: rotate(25deg);

        }



        .leaf-2 {

            font-size: 6rem;

            bottom: 20%;

            left: 20%;

            transform: rotate(-30deg);

        }



        .dumbbell {

            position: absolute;

            font-size: 3rem;

            color: var(--accent-blue);

            opacity: 0.1;

            transform: rotate(45deg);

        }



        .dumbbell-1 {

            top: 50%;

            left: 25%;

        }



        .dumbbell-2 {

            bottom: 40%;

            right: 30%;

        }



        .heart {

            position: absolute;

            font-size: 2.5rem;

            color: #e74c3c;

            opacity: 0.2;

        }



        .heart-1 {

            top: 65%;

            left: 15%;

        }



        .heart-2 {

            bottom: 25%;

            right: 20%;

        }



        .wave-top {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            overflow: hidden;

            line-height: 0;

        }



        .wave-top svg {

            position: relative;

            display: block;

            width: calc(100% + 1.3px);

            height: 150px;

        }



        .wave-top .shape-fill {

            fill: var(--primary-dark);

        }



        .wave-bottom {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%;

            overflow: hidden;

            line-height: 0;

            transform: rotate(180deg);

        }



        .wave-bottom svg {

            position: relative;

            display: block;

            width: calc(100% + 1.3px);

            height: 150px;

        }



        .wave-bottom .shape-fill {

            fill: var(--primary-dark);

        }



        /* Responsywność */

        @media (max-width: 992px) {

            .about-container {

                flex-direction: column;

                text-align: center;

            }



            .about-content {

                padding-left: 0;

                margin-top: 50px;

                max-width: 100%;

            }



            .portrait-frame {

                max-width: 400px;

            }



            .signature {

                align-items: center;

            }



            .leaf-1, .leaf-2 {

                display: none;

            }

        }



    /* Services Section */

    .services {

      background-color: var(--dark-bg);

    }



    .services-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      gap: 30px;

      margin-top: 50px;

    }



    .service-card {

      background: var(--card-bg);

      border-radius: 10px;

      padding: 40px 30px;

      text-align: center;

      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

      transition: var(--transition);

      position: relative;

      overflow: hidden;

      z-index: 1;

      border: 1px solid rgba(77, 166, 255, 0.1);

    }



    .service-card::before {

      content: '';

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 4px;

      background: linear-gradient(to right, var(--accent-blue), var(--accent-light));

      transform: scaleX(0);

      transform-origin: left;

      transition: transform 0.3s ease;

    }



    .service-card:hover {

      transform: translateY(-10px);

      box-shadow: 0 15px 40px rgba(30, 144, 255, 0.4);

    }



    .service-card:hover::before {

      transform: scaleX(1);

    }



    .service-icon {

      font-size: 3.5rem;

      margin-bottom: 25px;

      color: var(--accent-blue);

    }



    .service-title {

      font-weight: 700;

      font-size: 1.5rem;

      margin-bottom: 20px;

      color: var(--text-light);

    }



    .service-desc {

      font-size: 1.1rem;

      color: var(--text-gray);

      line-height: 1.7;

      margin-bottom: 30px;

    }

    /* Free Plan Section */
/* Free Plan Section */
.free-plan {
  background: linear-gradient(180deg, rgba(30,30,30,0.8), rgba(20,20,20,0.9));
  border: 1px solid rgba(77,166,255,0.1);
  border-radius: 16px;
  padding: 60px 30px;
  box-shadow: 0 10px 30px rgba(2,12,27,0.6);
  color: var(--text-light);
  text-align: center;
}

.free-plan-desc {
  font-size: 1.1rem;
  color: var(--text-gray);
  margin-bottom: 30px;
}

.free-plan-actions {
  margin-top: 20px;
}

.btn-download {
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-light));
}

.btn-download i {
  margin-right: 10px;
}




  </style>