@layer components {
  /* ==========================================================================
     Products Hero — dark theme (mirrors services hero)
     ========================================================================== */
  .products-hero {
    background: radial-gradient(ellipse at 50% 30%, #1E1E2E, #0A0A0A);
    color: var(--color-white);
    animation: none;
    text-align: center;
    position: relative;
    overflow: hidden;

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

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

      & em {
        font-style: normal;
        color: #9B4A5E;
      }
    }

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

    & .hero-badge {
      color: #9B4A5E;
    }

    & .btn-primary {
      background: var(--color-white);
      color: #0A0A0A;

      &:hover {
        background: var(--color-white);
        color: #0A0A0A;
        opacity: 0.9;
      }
    }
  }

  /* Decorative grid + glow background */
  .products-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.04) 0,
          rgba(255, 255, 255, 0.04) 1px,
          transparent 1px,
          transparent 60px
        ),
        repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.04) 0,
          rgba(255, 255, 255, 0.04) 1px,
          transparent 1px,
          transparent 60px
        );
      animation: grid-pulse 10s ease-in-out infinite;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse 50% 60% at 50% 40%,
        rgba(155, 74, 94, 0.12) 0%,
        transparent 70%
      );
    }
  }

  /* Desktop: centered text */
  @media (min-width: 48rem) {
    .products-hero {
      text-align: center;

      & h1 {
        margin-inline: auto;
      }
    }

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

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

  /* ==========================================================================
     Flagship Cards — Tier 1 (TalentoHQ + OfiHQ)
     ========================================================================== */
  .products-flagship-section {
    padding-block: var(--spacing-xl);
  }

  .flagship-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    background: var(--color-white);
    border: 1px solid #E5E5E5;
    overflow: hidden;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      pointer-events: none;
    }
  }

  .flagship-card + .flagship-card {
    margin-block-start: var(--spacing-lg);
  }

  .flagship-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .flagship-card-body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    & h2 {
      font-size: var(--font-size-2xl);
      color: var(--color-primary);
      margin-block-end: var(--spacing-xs);
    }

    & p {
      color: var(--color-gray-600);
      line-height: 1.7;
      margin-block-end: var(--spacing-md);
    }
  }

  /* Brand tints */
  .flagship-card-body--thq {
    background: var(--color-hq-blue-50);
  }

  .flagship-card:has(.flagship-card-body--thq)::before {
    background: var(--color-hq-blue-600);
  }

  .flagship-card-body--ohq {
    background: var(--color-ohq-50);
  }

  .flagship-card:has(.flagship-card-body--ohq)::before {
    background: var(--color-ohq-600);
  }

  /* Badges */
  .flagship-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-block-end: var(--spacing-xs);
  }

  .flagship-badge--thq {
    color: var(--color-hq-blue-600);
  }

  .flagship-badge--ohq {
    color: var(--color-ohq-600);
  }

  /* Scroll-reveal stagger for flagship cards */
  [data-controller="scroll-reveal"] .flagship-card {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--duration-reveal) var(--ease-out-expo),
      transform var(--duration-reveal) var(--ease-out-expo);
  }

  [data-controller="scroll-reveal"].is-visible .flagship-card {
    opacity: 1;
    transform: translateY(0);
  }

  .is-visible .flagship-card:nth-child(1) { transition-delay: 0ms; }
  .is-visible .flagship-card:nth-child(2) { transition-delay: 200ms; }

  /* Desktop: 2-column split layout */
  @media (min-width: 48rem) {
    .flagship-card {
      grid-template-columns: 1fr 1fr;
    }

    .flagship-card-body {
      padding: var(--spacing-lg);

      & h2 {
        font-size: var(--font-size-3xl);
      }
    }

    /* Reversed: image right, content left */
    .flagship-card--reversed .flagship-card-image {
      order: 2;
    }
  }

  /* ==========================================================================
     Secondary Card — Tier 2 (Happy Mood Score)
     ========================================================================== */
  .secondary-card {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0;
    max-width: 50rem;
    margin-inline: auto;
    background: var(--color-hms-50);
    border: 1px solid #E5E5E5;
    overflow: hidden;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--color-hms-500);
      pointer-events: none;
    }
  }

  .secondary-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .secondary-card-body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    & h3 {
      font-size: var(--font-size-xl);
      color: var(--color-primary);
      margin-block-end: var(--spacing-xs);
    }

    & p {
      color: var(--color-gray-600);
      line-height: 1.7;
      margin-block-end: var(--spacing-md);
    }
  }

  .secondary-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-hms-600);
    margin-block-end: var(--spacing-xs);
  }

  @media (min-width: 48rem) {
    .secondary-card {
      grid-template-columns: 1fr 1fr;
    }

    .secondary-card-body {
      padding: var(--spacing-lg);

      & h3 {
        font-size: var(--font-size-2xl);
      }
    }
  }

  /* ==========================================================================
     Open Source Card — Tier 2.5 (between secondary and compact)
     ========================================================================== */
  .opensource-card {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0;
    max-width: 50rem;
    margin-inline: auto;
    background: var(--color-oss-50);
    border: 1px solid #E5E5E5;
    overflow: hidden;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--color-oss-500);
      pointer-events: none;
    }
  }

  .opensource-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--color-oss-100);
  }

  .opensource-card-image svg {
    display: block;
    width: 100%;
    max-width: 24rem;
  }

  .opensource-card-body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    & h3 {
      font-size: var(--font-size-xl);
      color: var(--color-primary);
      margin-block-end: var(--spacing-xs);
    }

    & p {
      color: var(--color-gray-600);
      line-height: 1.7;
      margin-block-end: var(--spacing-md);
    }
  }

  .opensource-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-oss-600);
    margin-block-end: var(--spacing-xs);
  }

  @media (min-width: 48rem) {
    .opensource-card {
      grid-template-columns: 1fr 1fr;
    }

    .opensource-card-body {
      padding: var(--spacing-lg);

      & h3 {
        font-size: var(--font-size-2xl);
      }
    }
  }

  /* ==========================================================================
     Compact Card — Tier 3 (Horario Web)
     ========================================================================== */
  .compact-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 50rem;
    margin-inline: auto;
    padding: var(--spacing-md);
    background: var(--color-white);
    border: 1px solid #E5E5E5;
    border-left: 3px solid var(--color-hw-500);
    position: relative;

    & h4 {
      font-size: var(--font-size-lg);
      color: var(--color-primary);
      margin-block-end: var(--spacing-xs);
    }

    & p {
      color: var(--color-gray-600);
      line-height: 1.7;
      margin-block-end: 0;
    }
  }

  .compact-card-body {
    flex: 1;
  }

  .compact-card-actions {
    flex-shrink: 0;
  }

  @media (min-width: 48rem) {
    .compact-card {
      flex-direction: row;
      align-items: center;
      padding: var(--spacing-md) var(--spacing-lg);
    }
  }

  /* Outline button for product cards */
  .btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    align-self: flex-start;

    &:hover {
      background: var(--color-primary);
      color: var(--color-bg);
    }
  }

  /* ==========================================================================
     Reduced motion
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .products-hero .hero-badge {
      opacity: 1;
      transform: none;
      animation: none;
    }

    .products-hero-bg::before {
      animation: none;
      opacity: 0.04;
    }

    .products-hero .btn-primary:hover {
      opacity: 1;
    }

    [data-controller="scroll-reveal"] .flagship-card {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}