@layer components {
  /* ==========================================================================
     TalentoHQ Page Styles
     Uses .thq- prefix to avoid collision with home page .talentohq-section
     Only page-specific styles — shared classes come from home.css
     ========================================================================== */

  /* TalentoHQ hero: deep violet-blue brand gradient */
  .hero.thq-hero {
    background: linear-gradient(135deg, var(--color-hq-blue-700) 0%, var(--color-hq-blue-600) 50%, var(--color-hq-blue-500) 100%);
    animation: none;

    &::before,
    &::after {
      display: none;
    }

    & h1 {
      font-size: clamp(2rem, 4vw, 3.5rem);
      color: var(--color-white);

      & em {
        font-style: italic;
        color: var(--color-hq-pink-400);
        -webkit-text-fill-color: var(--color-hq-pink-400);
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
      }
    }

    & .hero-subtitle {
      color: rgba(255, 255, 255, 0.75);
    }

    & .btn-primary {
      background: var(--color-white);
      color: var(--color-hq-blue-700);

      &:hover {
        background: var(--color-hq-pink-400);
        color: var(--color-hq-blue-700);
      }
    }

    & .btn-secondary {
      color: var(--color-white);
      border-color: rgba(255, 255, 255, 0.4);

      &:hover {
        background: rgba(255, 255, 255, 0.12);
        color: var(--color-white);
        border-color: rgba(255, 255, 255, 0.7);
        box-shadow: none;
      }
    }
  }

  /* Override desktop left-align for thq hero (keep centered) */
  @media (min-width: 48rem) {
    .thq-hero .hero-actions {
      justify-content: flex-start;
    }
  }

  /* Hero illustration */
  .thq-hero .hero-illustration svg {
    filter: drop-shadow(0 4px 20px rgba(16, 3, 163, 0.15));
  }

  /* Features section: override card gradient to HQ blue */
  .thq-features .service-card::before,
  .thq-features .service-card::after {
    background: linear-gradient(135deg, var(--color-hq-blue-600), var(--color-hq-blue-400));
  }

  .thq-features .service-card:nth-child(2)::before,
  .thq-features .service-card:nth-child(2)::after {
    background: linear-gradient(135deg, var(--color-hq-blue-500), var(--color-hq-blue-300));
  }

  .thq-features .service-card:nth-child(3)::before,
  .thq-features .service-card:nth-child(3)::after {
    background: linear-gradient(135deg, var(--color-hq-blue-400), var(--color-hq-blue-700));
  }

  .thq-features .service-card:nth-child(4)::before,
  .thq-features .service-card:nth-child(4)::after {
    background: linear-gradient(135deg, var(--color-hq-pink-700), var(--color-hq-pink-400));
  }

  .thq-features .service-card:nth-child(5)::before,
  .thq-features .service-card:nth-child(5)::after {
    background: linear-gradient(135deg, var(--color-hq-blue-700), var(--color-hq-blue-500));
  }

  /* Staggered reveal for 4th and 5th feature cards */
  .is-visible .thq-features .service-card:nth-child(4) {
    transition-delay: 450ms;
  }

  .is-visible .thq-features .service-card:nth-child(5) {
    transition-delay: 600ms;
  }

  /* Benefits section: light HQ blue background */
  .thq-benefits {
    background: var(--color-hq-blue-50);
  }

  .thq-benefits .service-card::before,
  .thq-benefits .service-card::after {
    background: linear-gradient(135deg, var(--color-hq-blue-600), var(--color-hq-blue-400));
  }

  .thq-benefits .service-card:nth-child(2)::before,
  .thq-benefits .service-card:nth-child(2)::after {
    background: linear-gradient(135deg, var(--color-hq-blue-500), var(--color-hq-blue-300));
  }

  .thq-benefits .service-card:nth-child(3)::before,
  .thq-benefits .service-card:nth-child(3)::after {
    background: linear-gradient(135deg, var(--color-hq-pink-700), var(--color-hq-pink-400));
  }

  .thq-benefits .service-card:nth-child(4)::before,
  .thq-benefits .service-card:nth-child(4)::after {
    background: linear-gradient(135deg, var(--color-hq-blue-400), var(--color-hq-blue-700));
  }

  /* TalentoHQ CTA: HQ blue gradient background */
  .thq-cta-section.cta-section {
    background: linear-gradient(135deg, var(--color-hq-blue-700), var(--color-hq-blue-600), var(--color-hq-blue-500));
    background-size: 200% 200%;

    & .hero-actions {
      justify-content: center;
    }
  }

  /* Secondary button on dark CTA background needs white styling */
  .thq-cta-section .btn-secondary {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);

    &:hover {
      background: rgba(255, 255, 255, 0.15);
      color: var(--color-white);
      border-color: var(--color-white);
      box-shadow: none;
    }
  }

  /* Badge in TalentoHQ context uses HQ blue */
  .thq-features .section-badge {
    color: var(--color-hq-blue-600);
    background: var(--color-hq-blue-100);
  }

  /* Card headings in TalentoHQ use HQ blue */
  .thq-features .service-card h3,
  .thq-benefits .service-card h3 {
    color: var(--color-hq-blue-700);
  }
}