/* NaaSAdvisor : home-page-only hero extras.
   Loaded after naas-styles.css on index.html only.

   The inverted navy palette itself is no longer here — it moved into
   naas-styles.css when the treatment went site-wide, so .hero-req and
   .cmp-hero share one source of truth. What is left is the handful of things
   only the home page has: the install animation behind the copy, the scrim
   that keeps the text legible over it, and the three proof claims. */

.hero-req { padding: 74px 0 78px; }

/* Scrim rather than a mask on the art: the copy side needs to be darkened, not
   the artwork removed, or the scene stops reading as one continuous room. */
.hero-req::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0,38,60,0.88) 0%, rgba(0,38,60,0.84) 34%,
      rgba(0,38,60,0.66) 58%, rgba(0,38,60,0.16) 80%, rgba(0,38,60,0.26) 100%),
    linear-gradient(180deg, rgba(0,38,60,0.06), rgba(0,38,60,0.28));
}
.hero-req > .wrap { z-index: 2; }

.hero-req .hero-art {
  opacity: 0.9;
  filter: saturate(1.1) contrast(1.06) brightness(1.04);
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-req h1 { font-size: 51px; }
/* Capped well short of the artwork: the paragraph is the smallest text in the
   hero, so it is the first thing to lose contrast over a bright patch. */
.hero-req .sub { max-width: 560px; }

/* The three claims, carried on a hairline rule the way the sibling site does.
   Wider than the light hero's column so they stay on one line. */
.hero-req .hero-copy { max-width: 700px; }
.hero-req .hero-proof {
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--h-rule-inv);
}
.hero-req .hero-proof div { flex: 1 1 180px; max-width: 210px; }
.hero-req .hero-proof strong {
  display: block; font: 600 15px/1.2 var(--font-mono); color: var(--h-signal-bright);
}
.hero-req .hero-proof span {
  display: block; margin-top: 5px; font-size: 13.5px; color: var(--h-ink-inv-2);
}

.hero-req .hero-chips { margin-top: 30px; }

@media (max-width: 1080px) {
  .hero-req .hero-art { opacity: 0.6; }
}
/* Below 900px the art stays hidden (naas-styles.css does that). Measured on a
   throttled phone it was the most expensive thing on the page — 3.7s of main
   thread — to render texture at 30% opacity behind the copy. The navy gradient
   carries the hero on its own there. */
@media (max-width: 900px) {
  .hero-req { padding: 56px 0 56px; }
  .hero-req h1 { font-size: 38px; }
}
@media (max-width: 600px) {
  .hero-req h1 { font-size: 31px; }
  .hero-req .hero-proof { gap: 22px; }
}