@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: distinctive HQ blue brand gradient */
  .thq-hero {
    background: linear-gradient(135deg, var(--color-hq-blue-50), var(--color-hq-blue-100), var(--color-hq-blue-50));
    animation: none;
    text-align: center;

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

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

      & em {
        font-style: normal;
        background: linear-gradient(135deg, var(--color-hq-blue-500), var(--color-hq-blue-700), var(--color-hq-blue-500));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  /* Override desktop left-align for thq hero (keep centered) */
  @media (min-width: 48rem) {
    .thq-hero {
      text-align: center;

      & h1 {
        margin-inline: auto;
      }
    }

    .thq-hero .hero-subtitle {
      margin-inline: auto;
    }

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

  /* 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%;
  }

  /* 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);
  }
}