.hero article {
      background-color: var(--primary);
      color: var(--primary-inverse);
        }
    .hero article {
      text-align: center;
    }
    .hero h1,
    .hero p {
      color: var(--primary-inverse);
    }

    .brand {
      text-decoration: none;
    }

    .brand-main {
      font-weight: 700;
      font-size: 2.5rem;
      letter-spacing: -0.02em;
    }

    .brand-muted {
      opacity: 0.7;
    }

    .brand-sub {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.85rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.55;
    }

    .brand-accent {
      color: var(--primary);
      /* reuse data-green */
    }

    .brand-gradient {
  background: linear-gradient(
    to top,
    #055621 0%,   
    #0ea5e9 70%  
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

    @media (max-width: 768px) {
      .brand-main {
        font-size: 2rem;
      }
    }