.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem; }

  .hero-section {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
    border-radius: 8px;
    border-radius: 8px; }
    .hero-section .hero-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.2em; }

.hero-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem; }

  .hero-description {
    font-size: 1.2rem;
    color: #34495e;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.6; }

    .features-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem; }

      .feature-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .feature-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }

.feature-icon {
  font-size: 2.5rem;
  color: #3498db;
  margin-bottom: 1rem; }

  .feature-title {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 0.5rem; }

    .feature-description {
      color: #7f8c8d;
      line-height: 1.5; }

      .pricing-section {
        margin-bottom: 3rem; }

        .pricing-title {
          text-align: center;
          font-size: 2rem;
          color: #2c3e50;
          margin-bottom: 2rem; }

          .toc {
            text-align: center;
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 2rem; }

            .pricing-cards {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
              gap: 2rem; }

              .pricing-card {
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                padding: 2rem;
                text-align: center;
                transition: transform 0.3s ease;
                position: relative;
                overflow: hidden; }
                .pricing-card:hover {
                  transform: scale(1.03); }

.pricing-card.popular {
  border: 2px solid #3498db; }

  .popular-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #3498db;
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-bottom-left-radius: 8px; }

    .pricing-type {
      font-size: 1.5rem;
      color: #2c3e50;
      margin-bottom: 0.5rem; }

      .pricing-price {
        font-size: 2.5rem;
        color: #3498db;
        margin-bottom: 1rem; }

        .pricing-period {
          font-size: 0.9rem;
          color: #7f8c8d;
          display: block;
          margin-top: -0.5rem; }

          .pricing-features {
            list-style: none;
            padding: 0;
            margin: 1.5rem 0;
            text-align: left; }
            .pricing-features li {
              padding: 0.5rem 0;
              color: #34495e;
              position: relative;
              padding-left: 1.5rem; }
              .pricing-features li::before {
                content: '✓';
                color: #2ecc71;
                position: absolute;
                left: 0; }
            .pricing-features li.not-included {
              color: #95a5a6; }
              .pricing-features li.not-included::before {
                content: '✕';
                color: #e74c3c; }

.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 1rem; }

  .btn-primary {
    background-color: #3498db;
    color: white; }
    .btn-primary:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4); }

.btn-outline {
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db; }
  .btn-outline:hover {
    background-color: #3498db;
    color: white; }

.faq-section {
  margin-bottom: 3rem; }

  .faq-title {
    text-align: center;
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 2rem; }

    .faq-item {
      margin-bottom: 1.5rem;
      border-bottom: 1px solid #ecf0f1;
      padding-bottom: 1.5rem; }

      .faq-question {
        font-size: 1.2rem;
        color: #2c3e50;
        margin-bottom: 0.5rem;
        font-weight: bold; }

        .faq-answer {
          color: #7f8c8d;
          line-height: 1.6; }

          .contact-section {
            text-align: center;
            background-color: #f8f9fa;
            padding: 2rem;
            border-radius: 8px; }

            .contact-title {
              font-size: 1.5rem;
              color: #2c3e50;
              margin-bottom: 1rem; }

              .contact-description {
                color: #7f8c8d;
                margin-bottom: 1.5rem; }

                video {
                  width: 100%;
                  height: var(--feat-video-height);
                  border-radius: 0.5em;
                  object-fit: cover; }

                  .feature-item {
                    margin: 1em var(--feat-video-margin-h); }
                    .feature-item p {
                      color: #9db7ce; }

.funcs {
  display: grid;
  grid-template-columns: var(--func-col);
  grid-template-rows: var(--func-row); }

  .toc {
    color: var(--primary-color); }