@layer pages {

  /* =========================
     HERO (home + page heroes)
     ========================= */
  .hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    background: url('../svg/hero-shapes.svg') center/cover no-repeat;
    opacity: 0.9;
    pointer-events: none;
    z-index: -1;
  }

  .hero__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    grid-template-columns: 1fr;
  }

  .hero__content { max-width: 36rem; }

  .hero__title {
    font-size: clamp(2.5rem, 6.5vw, 4.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-block: 1rem 1.25rem;

    & .gradient-text { display: inline-block; }
  }

  .hero__subtitle {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--color-text-muted);
    max-width: 36rem;
    margin-block-end: 2rem;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hero__image {
    aspect-ratio: 1;
    border-radius: 24px;
    overflow: hidden;
    background: var(--gradient-brand-soft);
    box-shadow: var(--shadow-card-hover);

    & img, & svg { width: 100%; height: 100%; object-fit: cover; }
  }

  @media (min-width: 1024px) {
    .hero__grid { grid-template-columns: 1.1fr 1fr; }
  }

  /* Inner page hero — keeps things compact so the next section peeks in */
  .hero.is-compact {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  }

  .page-hero {
    text-align: center;
    padding-block: 1.5rem 1rem;
    position: relative;

    & .page-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.35rem 0.9rem;
      border-radius: var(--radius-pill);
      background: var(--color-accent);
      color: var(--color-primary);
      font-size: 0.85rem;
      font-weight: 600;
      margin-block-end: 1rem;

      & i, & svg { width: 14px; height: 14px; }
    }

    & .page-hero__title {
      font-size: clamp(2.25rem, 5vw, 3.5rem);
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    & .page-hero__subtitle {
      max-width: 50ch;
      margin-inline: auto;
      margin-block-start: 0.75rem;
      color: var(--color-text-muted);
      font-size: 1.125rem;
    }
  }

  /* Clickable scroll indicator pointing to next section */
  .scroll-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: 1.75rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 0;
    font: inherit;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 12px;
    transition: transform var(--transition), color var(--transition);

    & .scroll-cue__dot {
      width: 28px;
      height: 44px;
      border: 2px solid var(--color-primary);
      border-radius: 14px;
      position: relative;
      transition: border-color var(--transition);

      &::after {
        content: '';
        position: absolute;
        inset-block-start: 6px;
        inset-inline-start: 50%;
        width: 4px;
        height: 8px;
        background: var(--color-primary);
        border-radius: 2px;
        transform: translateX(-50%);
        animation: scrollCue 1.6s ease-in-out infinite;
      }
    }

    &:hover {
      transform: translateY(-3px);
      color: var(--color-primary-hover);
      & .scroll-cue__dot { border-color: var(--color-primary-hover); }
    }
    &:active { transform: translateY(-1px); }
    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 4px;
    }
  }

  @keyframes scrollCue {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    60%  { transform: translate(-50%, 14px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-cue__dot::after { animation: none; }
    .scroll-cue { transition: none; }
  }

  /* Keep scroll target visible under the fixed navbar */
  main > * { scroll-margin-block-start: 110px; }

  /* =========================
     STATS (dark band)
     ========================= */
  .stats {
    background: var(--color-dark);
    color: white;
    padding-block: clamp(3rem, 5vw, 5rem);
  }

  .stats__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .stat__value {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-block-end: 0.5rem;
  }

  .stat__label {
    color: var(--color-on-dark);
    opacity: 0.85;
    font-size: 1rem;
  }

  @media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }

  /* =========================
     SERVICES (3-up cards)
     ========================= */
  .services__head { text-align: center; margin-block-end: 3rem; }

  .services__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .services__grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* =========================
     PRODUCTS (flagship)
     ========================= */
  .flagship {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: 1fr;
    container-type: inline-size;
  }

  .flagship__media {
    border-radius: 12px;
    overflow: hidden;
    background: var(--gradient-brand-soft);

    & img, & svg { width: 100%; height: auto; display: block; }
  }

  .flagship__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-block: 0.75rem 0.5rem;
  }

  .flagship__subtitle { color: var(--color-text-muted); margin-block-end: 1rem; }

  .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.25rem 1.75rem; }
  .tag {
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .tag.is-cyan { background: color-mix(in oklch, var(--color-secondary) 15%, white); color: var(--color-secondary-hex); }
  .tag.is-amber { background: #FEF3C7; color: #B45309; }
  .tag.is-green { background: #DCFCE7; color: #15803D; }

  @container (min-width: 720px) {
    .flagship { grid-template-columns: 1fr 1fr; }
  }

  /* =========================
     WHY AFRIX (4 grid)
     ========================= */
  .why { background: var(--color-bg-alt); }

  .why__head { text-align: center; margin-block-end: 3rem; }

  .why__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .why__item {
    background: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 1.75rem;
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);

    &:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

    & .why__emoji {
      font-size: 2rem;
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: var(--color-accent);
      display: grid;
      place-items: center;
      margin-block-end: 1rem;
    }

    & h3 { font-size: 1.15rem; font-weight: 700; margin-block-end: 0.5rem; }
    & p { color: var(--color-text-muted); }
  }

  @media (min-width: 768px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }

  /* =========================
     CTA BANNER
     ========================= */
  .cta-banner {
    background: var(--gradient-brand);
    color: white;
    text-align: center;
    padding-block: clamp(3rem, 6vw, 5rem);

    & h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      max-width: 24ch;
      margin-inline: auto;
    }
    & p {
      margin-block: 0.75rem 2rem;
      font-size: 1.125rem;
      opacity: 0.95;
    }
  }

  /* =========================
     ABOUT — mission/vision
     ========================= */
  .mv-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
  }
  .mv-card {
    padding: 2.5rem;
    border-radius: var(--radius-card);
    background: var(--color-bg);
    border: 1px solid var(--color-border);

    & .eyebrow { color: var(--color-primary); }
    & h2 { font-size: 1.75rem; font-weight: 800; margin-block-end: 0.75rem; }
    & p { color: var(--color-text-muted); font-size: 1.05rem; }
  }
  .mv-card:nth-child(2) {
    background: var(--gradient-brand);
    color: white;
    border: none;

    & .eyebrow, & h2, & p { color: white; }
    & .eyebrow { opacity: 0.85; }
    & p { opacity: 0.92; }
  }
  @media (min-width: 768px) { .mv-grid { grid-template-columns: repeat(2, 1fr); } }

  /* About story */
  .story-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
    grid-template-columns: 1fr;
  }
  .story__media { border-radius: var(--radius-card); overflow: hidden; }
  @media (min-width: 1024px) { .story-grid { grid-template-columns: 1.1fr 1fr; } }

  /* Values */
  .values__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .values__grid { grid-template-columns: repeat(4, 1fr); } }

  /* Team */
  .team-card {
    background: var(--color-bg);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;

    & .team-card__media { background: var(--gradient-brand-soft); }
    & .team-card__media svg, & .team-card__media img { width: 100%; height: 100%; object-fit: cover; }
    & .team-card__body { padding: 2.5rem; }
    & h2 { font-size: 1.75rem; font-weight: 800; margin-block: 0.5rem 1rem; }
    & p { color: var(--color-text-muted); font-size: 1.05rem; }
  }
  @media (min-width: 768px) { .team-card { grid-template-columns: 1fr 1.2fr; } }

  /* =========================
     SERVICES PAGE — alternating
     ========================= */
  .service-block {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    grid-template-columns: 1fr;
    padding-block: var(--space-section-sm);

    & .service-block__media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3/2; }
    & .service-block__title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin-block: 0.5rem 1rem; }
    & .service-block__text { color: var(--color-text-muted); margin-block-end: 1.5rem; font-size: 1.05rem; }

    & ul { display: grid; gap: 0.75rem; }
    & li { display: flex; align-items: flex-start; gap: 0.75rem; }
    & li::before {
      content: '';
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-accent);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
      background-size: 14px;
      background-position: center;
      background-repeat: no-repeat;
      flex-shrink: 0;
      margin-block-start: 0.1rem;
    }
  }

  @media (min-width: 1024px) {
    .service-block { grid-template-columns: 1fr 1fr; }
    .service-block.is-reversed .service-block__media { order: 2; }
  }

  /* =========================
     PRODUCTS PAGE
     ========================= */
  .product-detail {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    align-items: start;
  }
  .product-detail__media { display: grid; gap: 1rem; }
  .product-detail__media .mock { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }

  .modules-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-block-start: 1.5rem;
  }
  .module-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--color-bg-alt);
    border-radius: 10px;
    font-weight: 500;

    & i, & svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
  }

  @media (min-width: 640px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .product-detail { grid-template-columns: 1.2fr 1fr; } }

  .coming-soon {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-card);
    padding: 3rem 2rem;
    text-align: center;
    background: var(--color-bg-alt);

    & .coming-soon__icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--color-accent);
      display: grid;
      place-items: center;
      margin-inline: auto;
      margin-block-end: 1rem;
      color: var(--color-primary);

      & i, & svg { width: 32px; height: 32px; }
    }
    & h3 { font-size: 1.5rem; font-weight: 800; margin-block-end: 0.5rem; }
    & p { color: var(--color-text-muted); max-width: 40ch; margin-inline: auto; }
  }

  /* =========================
     CONTACT PAGE
     ========================= */
  .contact-section { background: var(--color-bg-alt); }

  .contact-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
  }

  .contact-form {
    background: var(--color-bg);
    padding: 2.5rem;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);

    & .form-row { margin-block-end: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
    & label { font-size: 0.9rem; font-weight: 600; }
    & input, & select, & textarea {
      width: 100%;
      padding: 0.85rem 1rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-btn);
      background: var(--color-bg);
      transition: border-color var(--transition), box-shadow var(--transition);

      &:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-hex) 15%, transparent);
      }
    }
    & textarea { min-height: 140px; resize: vertical; }
    & button[type="submit"] { width: 100%; justify-content: center; margin-block-start: 0.5rem; }
  }

  .contact-info {
    & h2 { font-size: 1.5rem; font-weight: 800; margin-block-end: 1.5rem; }

    & .contact-info__item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.25rem 0;
      border-block-end: 1px solid var(--color-border);

      & .contact-info__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--color-accent);
        color: var(--color-primary);
        display: grid;
        place-items: center;
        flex-shrink: 0;

        & i, & svg { width: 20px; height: 20px; }
      }
      & .contact-info__label { font-size: 0.85rem; color: var(--color-text-muted); margin-block-end: 0.1rem; }
      & a, & p { font-weight: 600; color: var(--color-text); }
    }

    & .contact-info__socials {
      display: flex;
      gap: 0.75rem;
      margin-block-start: 1.5rem;
    }
    & .contact-info__socials a {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      display: grid;
      place-items: center;
      color: var(--color-primary);
      transition: background var(--transition), color var(--transition), border-color var(--transition);

      & i, & svg { width: 20px; height: 20px; }

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

  @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.2fr 1fr; } }

  /* =========================
     Reveal animation
     ========================= */
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;

    &.is-revealed { opacity: 1; transform: none; }
  }
}