.cloud-hub-hero {
  background: #f5f8fc;
  color: #0b2742;
  padding: 28px 20px 34px;
  text-align: left;
}

.cloud-hub-hero > .container {
  width: 100%;
  max-width: 1280px;
  min-height: 560px;
  margin: 0 auto;
  padding: 64px;
  border: 1px solid rgba(0, 74, 117, 0.1);
  border-radius: 30px;
  background-color: #eef5fb;
  background-image: url("/assets/cloud-main-hero-background-20260814-v3.cb-20260904-rack-v1.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 24px 70px rgba(7, 53, 91, 0.12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.cloud-hub-hero .section-eyebrow {
  color: #c64f00;
  background: rgba(255, 103, 0, 0.11);
  border: 1px solid rgba(255, 103, 0, 0.24);
  border-radius: 999px;
  margin: 0 0 18px;
  padding: 7px 13px;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cloud-hub-hero h1 {
  color: #0b2742;
  max-width: 610px;
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 4.3vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.cloud-hub-hero__sub {
  color: #445d73;
  max-width: 560px;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .cloud-hub-hero {
    padding: 16px 14px 28px;
  }

  .cloud-hub-hero > .container {
    min-height: 540px;
    padding: 40px 30px;
    border-radius: 22px;
    background-position: 58% center;
    box-shadow: 0 18px 42px rgba(7, 53, 91, 0.1);
  }

  .cloud-hub-hero h1 {
    max-width: 560px;
    font-size: clamp(2.05rem, 7vw, 3.2rem);
  }

  .cloud-hub-hero__sub {
    max-width: 510px;
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .cloud-hub-hero > .container {
    min-height: 560px;
    padding: 30px 18px;
    background-position: 60% center;
  }

  .cloud-hub-hero .section-eyebrow {
    margin-bottom: 14px;
  }

  .cloud-hub-hero h1 {
    max-width: 100%;
    margin-bottom: 14px;
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 1.06;
  }

  .cloud-hub-hero__sub {
    max-width: 100%;
  }
}