/* A single continuous hero surface. Canvas is ambient, never a grid item. */
.hero {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-height: 0;
  padding-block: clamp(3.5rem, 5.5vw, 5rem);
  background-color: var(--bvq-dark);
  background-image: radial-gradient(ellipse at 95% 38%, rgba(36,77,234,.12), transparent 67%);
}
.hero__content { position: relative; z-index: 2; width: 53%; max-width: 40rem; }
.hero .hero__art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  opacity: 1;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 90%, transparent 100%);
}
.hero .hero__canvas { width: 100%; height: 100%; transition: opacity 240ms var(--bvq-ease); }
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bvq-dark) 7%, rgba(8,13,24,.94) 31%, rgba(8,13,24,.56) 49%, rgba(8,13,24,.06) 72%, transparent 100%);
}
@media (min-width: 601px) and (max-width: 1050px) {
  .hero { padding-block: 3.25rem; }
  .hero__content { width: 63%; max-width: 34rem; }
  .hero .display { font-size: clamp(3rem, 5.7vw, 3.75rem); }
  .hero__lead { max-width: 29rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero__content { width: 75%; max-width: 32rem; }
  .hero::after { background: linear-gradient(90deg, var(--bvq-dark), rgba(8,13,24,.92) 34%, rgba(8,13,24,.5) 66%, rgba(8,13,24,.08)); }
}
@media (max-width: 600px) {
  .hero { padding-block: 2.5rem; }
  .hero__content { width: 100%; max-width: 34rem; }
  .hero .hero__art { opacity: .9; }
  .hero::after { background: linear-gradient(105deg, var(--bvq-dark) 3%, rgba(8,13,24,.93) 36%, rgba(8,13,24,.66) 68%, rgba(8,13,24,.25) 100%); }
  .hero__lead { max-width: 30rem; }
  .hero__detail { max-width: 27rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__canvas { transition: none; }
}