@layer components {
  /* ==========================================================================
     OfiHQ Page Styles
     Uses .ohq- prefix — teal brand palette for office management
     ========================================================================== */

  /* OfiHQ hero: deep teal brand gradient */
  .hero.ohq-hero {
    background: linear-gradient(135deg, var(--color-ohq-700) 0%, var(--color-ohq-600) 50%, var(--color-ohq-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-ohq-200);
        -webkit-text-fill-color: var(--color-ohq-200);
        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-ohq-700);

      &:hover {
        background: var(--color-ohq-200);
        color: var(--color-ohq-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 ohq hero */
  @media (min-width: 48rem) {
    .ohq-hero .hero-actions {
      justify-content: flex-start;
    }
  }

  /* Hero illustration */
  .ohq-hero .hero-illustration svg {
    filter: drop-shadow(0 4px 20px rgba(15, 118, 110, 0.15));
  }

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

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

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

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

  .ohq-features .service-card:nth-child(5)::before,
  .ohq-features .service-card:nth-child(5)::after {
    background: linear-gradient(135deg, var(--color-ohq-600), var(--color-ohq-400));
  }

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

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

  /* Benefits section: light teal background */
  .ohq-benefits {
    background: var(--color-ohq-50);
  }

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

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

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

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

  /* OfiHQ CTA: teal gradient background */
  .ohq-cta-section.cta-section {
    background: linear-gradient(135deg, var(--color-ohq-700), var(--color-ohq-600), var(--color-ohq-500));
    background-size: 200% 200%;

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

  /* Secondary button on dark CTA background needs white styling */
  .ohq-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 OfiHQ context uses teal */
  .ohq-features .section-badge {
    color: var(--color-ohq-700);
    background: var(--color-ohq-100);
  }

  /* Card headings in OfiHQ use teal */
  .ohq-features .service-card h3,
  .ohq-benefits .service-card h3 {
    color: var(--color-ohq-700);
  }
}