@layer pages {
  .vlt-cta {
    padding: var(--vlt-spacing-3xl) 0;
    text-align: center;
  }

  .vlt-cta h2 {
    color: var(--vlt-color-text);
    margin-bottom: var(--vlt-spacing-lg);
    font-size: var(--vlt-font-size-5xl);
  }

  .vlt-gameplay {
    padding: var(--vlt-spacing-3xl) 0;
  }

  .vlt-gameplay h2 {
    text-align: center;
    color: var(--vlt-color-primary);
    margin-bottom: var(--vlt-spacing-2xl);
  }

  .vlt-guide {
    padding: var(--vlt-spacing-3xl) 0;
    background-color: var(--vlt-color-surface);
  }

  .vlt-guide h2 {
    text-align: left;
    color: var(--vlt-color-text);
    margin-bottom: var(--vlt-spacing-lg);
    font-size: var(--vlt-font-size-5xl);
  }

  .vlt-guide > p {
    text-align: left;
    color: var(--vlt-color-text-muted);
    margin-bottom: var(--vlt-spacing-2xl);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .vlt-guide-content {
    display: flex;
    align-items: center;
    gap: var(--vlt-spacing-2xl);
    flex-wrap: wrap;
    justify-content: center;
  }

  .vlt-guide-text {
    flex: 1;
    min-width: 300px;
  }

  .vlt-guide-text ul {
    list-style: none;
    padding: 0;
    margin-top: var(--vlt-spacing-xl);
  }

  .vlt-guide-text ul li {
    margin-bottom: var(--vlt-spacing-sm);
    font-size: var(--vlt-font-size-lg);
    color: var(--vlt-color-text);
    position: relative;
    padding-left: var(--vlt-spacing-lg);
  }

  .vlt-guide-text ul li::before {
    content: "•"; /* Bullet point */
    color: var(--vlt-color-primary);
    position: absolute;
    left: 0;
    font-size: 1.2em;
    line-height: 1;
  }

  .vlt-guide-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .vlt-guide-image img {
    max-width: 100%;
    height: auto;
  }

  @media (min-width: 1024px) {
    .vlt-guide-content {
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    .vlt-guide-text {
      max-width: 50%;
    }
  }

  .vlt-mythology-stories,
  .vlt-chronicles-timeline,
  .vlt-gods-gallery,
  .vlt-gallery-main,
  .vlt-gallery-categories,
  .vlt-contact-form,
  .vlt-faq {
    padding: var(--vlt-spacing-3xl) 0;
  }

  .vlt-mythology-stories h2,
  .vlt-chronicles-timeline h2,
  .vlt-gods-gallery h2,
  .vlt-gallery-main h2,
  .vlt-gallery-categories h2,
  .vlt-contact-form h2,
  .vlt-faq h2 {
    text-align: center;
    color: var(--vlt-color-primary);
    margin-bottom: var(--vlt-spacing-2xl);
  }

  .vlt-gods-gallery {
    background-color: var(--vlt-color-surface);
  }


  .vlt-faq {
    background-color: var(--vlt-color-surface);
  }

  @scroll-timeline hero-scroll {
    source: auto;
    orientation: block;
  }

  .vlt-hero-image {
    animation: hero-float 3s ease-in-out infinite alternate;
  }

  @keyframes hero-float {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-10px);
    }
  }

  .vlt-feature-card {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .vlt-hero-image {
      animation: none;
    }

    .vlt-feature-card {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}