.container {
  .hero {
    padding: 8.3vw 0;
    overflow: hidden;

    .hero-title {
      line-height: 117%;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      color: #1A1A1A;
      font-size: 3vw;
    }

    .hero-subtitle {
      font-size: 1.3vw;
      line-height: 160%;
      color: #666;
      margin-top: 1.1vw;
    }

    .hero-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: stretch;
      gap: 1.6vw;
      margin-top: 3.3vw;

      .hero-item {
        display: flex;
        flex-direction: column;
        gap: 0.8vw;
        padding: 1.6vw;
        border-radius: 1.6vw;
        background: #F0F0F0;

        img {
          width: 19%;
          padding: 0.8vw;
          border-radius: 0.9vw;
          background: #34d07b26;
        }

        .hero-item-title {
          font-size: 1.3vw;
          line-height: 140%;
          text-transform: uppercase;
          color: #1A1A1A;
        }

        .hero-item-subtitle {
          font-size: 1vw;
          line-height: 157%;
          color: #666;
        }
      }
    }

    .slider {
      width: 100%;
      overflow: visible;
      padding: 8.3vw 0;
      user-select: none;

      .slider-track {
        display: flex;
        gap: 1.6vw;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        cursor: grab;

        .slider-slide {
          flex: 0 0 20.8vw;
          transition: transform 0.4s, opacity 0.4s;
          opacity: 0.45;
          transform: scale(0.88);
          pointer-events: none;
          -webkit-user-drag: none;

          img {
            width: 100%;
            display: block;
            border-radius: 1.7vw;
            -webkit-user-drag: none;
          }
        }

        .slider-slide.active {
          opacity: 1;
          transform: scale(1.5);
          pointer-events: auto;
        }

        .slider-slide.semi-active {
          opacity: 0.75;
          transform: scale(1.25);
          pointer-events: auto;
        }
      }

      .slider-track.dragging {
        transition: none;
        cursor: grabbing;
      }
    }
  }

  .banner {
    display: flex;
    flex-direction: column;
    gap: 2.2vw;
    border-radius: 1.6vw;
    padding: 3.3vw 3.2vw;
    background: #34d07b1a;

    .banner-title {
      font-size: 2vw;
      text-transform: uppercase;
      color: #1A1A1A;
      letter-spacing: 0.02em;

      .mobile-text {
        display: none;
      }
    }

    .banner-subtitle {
      font-size: 1.1vw;
      color: #666;
      line-height: 175%;
      letter-spacing: 0.03em;
    }

    .banner-divider {
      width: 100%;
      height: 1px;
      background: #1a1a1a1a;
    }

    .banner-strong {
      font-size: 1.1vw;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #34D07B;
    }

    .banner-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.6vw;
      list-style: none;

      .banner-item {
        font-weight: 500;
        line-height: 157%;
        font-size: 0.9vw;
        text-transform: uppercase;
        color: #1A1A1A;
        letter-spacing: 0.07em;

        &:nth-child(1):before {
          content: '1';
          padding: 0.6vw 0.9vw;
        }

        &:nth-child(2):before {
          content: '2';
        }

        &:nth-child(3):before {
          content: '3';
        }

        &:nth-child(4):before {
          content: '4';
        }

        &::before {
          border-radius: 100px;
          padding: 0.6vw 0.8vw;
          color: #1A1A1A;
          font-weight: 700;
          letter-spacing: 0.07em;
          background: #34d07b;
          margin-right: 0.8vw;
        }
      }
    }
  }

  .for-coach-btn {
    text-align: center;
    text-decoration: none;
    width: fit-content;
    display: block;
    margin: 3.3vw auto 0;
    cursor: pointer;
    font-size: 1vw;
    border-radius: 100px;
    padding: 1.1vw 2.2vw;
    font-weight: 700;
    border: 0;
    text-transform: uppercase;
    color: #1A1A1A;
    background: #34D07B;
    transition: background 0.5s, color 0.5s;
    margin-bottom: 8.3vw;

    &:hover {
      background: #1A1A1A;
      color: #34D07B;
    }
  }
}

@media (max-width: 768px) {
  .container {
    main {
      .hero {
        display: flex;
        flex-direction: column;
        gap: 6.4vw;
        padding: 8.3vw 0 0;

        .hero-title {
          font-size: 7.4vw;
          margin-bottom: -5vw;
        }

        .hero-subtitle {
          font-size: 3.7vw;
        }

        .hero-list {
          grid-template-columns: repeat(2, 1fr);
          gap: 3.2vw;

          .hero-item {
            gap: 3.2vw;
            padding: 3.3vw;
            border-radius: 4.6vw;

            img {
              padding: 2.4vw 2.7vw;
              border-radius: 3.2vw;
              width: fit-content;
            }

            .hero-item-title {
              font-size: 4.2vw;

              .desktop-text {
                display: none;
              }

              .mobile-text {
                display: block;
              }
            }

            .hero-item-subtitle {
              font-size: 3.2vw;

              .desktop-text {
                display: none;
              }

              .mobile-text {
                display: block;
              }
            }
          }
        }

        .slider {
          padding: 4rem 0;

          .slider-track {
            gap: 1rem;

            .slider-slide {
              flex: 0 0 70vw;
              opacity: 1;
              transform: scale(1.4);

              img {
                border-radius: 12px;
              }
            }

            .slider-slide.active {
              transform: scale(1.2);
            }

            .slider-slide.semi-active {
              opacity: 0.4;
              transform: scale(1);
            }
          }
        }
      }

      .banner {
        padding: 4.8vw;
        border-radius: 3.6vw;
        gap: 3.2vw;

        .banner-title {
          font-size: 4.2vw;

          .desktop-text {
            display: none;
          }

          .mobile-text {
            display: block;
          }
        }

        .banner-subtitle {
          font-size: 3.4vw;
        }

        .banner-strong {
          font-size: 4.2vw;
        }

        .banner-list {
          grid-template-columns: 1fr;
          gap: 4.2vw;

          .banner-item {
            font-size: 3.4vw;

            &:nth-child(1)::before {
              padding: 1.6vw 2.9vw;
            }

            &::before {
              padding: 1.7vw 2.2vw;
              margin-right: 1.6vw;
            }
          }
        }
      }

      .for-coach-btn {
        margin: 8.4vw auto;
        padding: 3.7vw 7.4vw;
        font-size: 3.7vw;
      }
    }
  }
}

.seo-info {
  width: 100%;
  padding: clamp(24px, 3vw, 56px) 0 0;
}

.seo-info-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(28px, 3.2vw, 72px);
  border-radius: clamp(24px, 2vw, 44px);
  background: #f6f8fb;
  overflow: hidden;
}

.seo-info-badge {
  width: fit-content;
  margin: 0 0 clamp(12px, 1vw, 18px);
  padding: clamp(7px, 0.55vw, 12px) clamp(14px, 1.2vw, 24px);
  border-radius: 999px;
  background: #34d07b26;
  color: #34d07b;
  font-size: clamp(12px, 0.75vw, 16px);
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
}

.seo-info-title {
  margin: 0 0 clamp(22px, 2vw, 36px);
  max-width: 1180px;
  color: #151515;
  font-size: clamp(26px, 2.35vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.seo-info-text {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 34px) clamp(24px, 3vw, 64px);
  max-width: 1500px;
}

.seo-info-text p {
  margin: 0;
  color: #4b5563;
  font-size: clamp(15px, 0.95vw, 19px);
  line-height: 1.72;
}

@media (max-width: 1200px) {
  .seo-info-text {
    grid-template-columns: 1fr;
    max-width: 860px;
  }
}

@media (max-width: 768px) {
  .seo-info {
    padding-top: 24px;
  }

  .seo-info-wrapper {
    padding: 28px 20px;
    border-radius: 28px;
  }

  .seo-info-badge {
    padding: 8px 14px;
    font-size: 11px;
  }

  .seo-info-title {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.22;
    letter-spacing: -0.03em;
  }

  .seo-info-text {
    gap: 14px;
  }

  .seo-info-text p {
    font-size: 14px;
    line-height: 1.65;
  }
}

.container .banner .banner-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 2vw, 40px);
}

.container .banner .banner-list .banner-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(10px, 0.8vw, 16px);
  font-size: clamp(14px, 0.82vw, 17px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  word-break: normal;
}

.container .banner .banner-list .banner-item::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2.4vw, 44px);
  height: clamp(32px, 2.4vw, 44px);
  box-sizing: border-box;
  padding: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto;
}

.container .for-coach-btn {
  margin-top: clamp(32px, 3.3vw, 64px);
  margin-bottom: clamp(48px, 5vw, 96px);
}

@media (max-width: 1024px) {
  .container .banner .banner-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .container .banner .banner-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .container .banner .banner-list .banner-item {
    font-size: 14px;
    line-height: 1.45;
    column-gap: 12px;
  }

  .container .banner .banner-list .banner-item::before {
    width: 34px;
    height: 34px;
  }

  .container .for-coach-btn {
    margin-top: 32px;
    margin-bottom: 48px;
  }
}