/* Deliberate two-line composition with translucent ink over the data-center scene. */
.hero h1.hero-title {
  max-width: 780px;
  font-size: clamp(42px,3.8vw,58px);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-shadow: 0 8px 30px rgb(0 8 20 / .28);
}

.hero-title-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(105deg,rgb(250 253 255 / .9),rgb(192 224 244 / .68));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: .3px rgb(227 245 255 / .18);
}

.hero-title-line-primary {
  background-image: linear-gradient(105deg,rgb(248 252 255 / .82),rgb(174 216 241 / .62));
}

.hero-title-line-secondary {
  margin-top: 6px;
  background-image: linear-gradient(105deg,rgb(255 255 255 / .94),rgb(194 229 248 / .76));
}

.hero-title + .hero-tagline {
  margin-top: 23px;
  color: rgb(159 220 255 / .86);
}

.hero-title ~ .hero-lead {
  color: rgb(213 229 242 / .82);
}

@media (max-width: 760px) {
  .hero h1.hero-title {
    max-width: 100%;
    font-size:31px;
    line-height: 1.14;
    letter-spacing: -.025em;
  }

  .hero-title-line-secondary {
    margin-top: 4px;
  }
}

@media (max-width: 360px) {
  .hero h1.hero-title {
    font-size: 26px;
  }
}