/* ============================================================
   Digitalage imagery layer
   Background-image hero + section visuals with dark gradient
   overlay. Opt-in via .hero--bg / .section--bg modifier classes
   plus a `--bg-image` CSS variable on the element.
   ============================================================ */

/* -- HERO ----------------------------------------------------- */
.hero.hero--bg {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 6rem var(--gutter) 5.5rem;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #0a0a0a;
  overflow: hidden;
  color: #fff;
}
.hero.hero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.72) 35%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.45) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero.hero--bg > * {
  position: relative;
  z-index: 2;
}

.hero.hero--bg .hero__grid {
  grid-template-columns: minmax(0, 720px);
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0;
  gap: 0;
  align-items: start;
}
.hero.hero--bg .hero__inner {
  max-width: var(--max-page);
  margin: 0 auto;
}
.hero.hero--bg .hero__inner > *:not(.hero-deco) {
  max-width: 720px;
}
.hero.hero--bg .hero__right { display: none; }
.hero.hero--bg .hero-deco { display: none; }

/* Light text overrides */
.hero.hero--bg .eyebrow {
  color: rgba(255,255,255,0.65);
}
.hero.hero--bg .eyebrow--cyan {
  color: var(--cyan-light);
}
.hero.hero--bg h1.headline {
  color: #ffffff;
}
.hero.hero--bg h1.headline em {
  background: linear-gradient(180deg, #BFE0F0 0%, #4A9DCC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero.hero--bg .subheadline {
  color: rgba(255,255,255,0.82);
}
.hero.hero--bg .hero__credibility,
.hero.hero--bg .hero__quote,
.hero.hero--bg .hero__ticker,
.hero.hero--bg .hero__status {
  color: rgba(255,255,255,0.78);
  border-left-color: var(--cyan);
}
.hero.hero--bg .hero__credibility strong {
  color: #fff;
}

/* Buttons over dark hero */
.hero.hero--bg .btn--primary {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}
.hero.hero--bg .btn--primary:hover {
  background: #f1f1ee;
  border-color: #f1f1ee;
  box-shadow: 0 8px 22px -10px rgba(74,157,204,0.55), 0 1px 2px rgba(0,0,0,0.18);
}
.hero.hero--bg .btn--secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.35);
}
.hero.hero--bg .btn--secondary:hover {
  border-color: #ffffff;
  background: rgba(255,255,255,0.08);
}

/* Mobile tightening */
@media (max-width: 768px) {
  .hero.hero--bg {
    padding: 3.5rem var(--gutter) 3rem;
    background-position: center right;
    overflow-x: hidden;
  }
  .hero.hero--bg::before {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.78) 55%,
      rgba(0,0,0,0.62) 100%);
  }
  .hero.hero--bg .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero.hero--bg .hero__inner {
    max-width: 100%;
    min-width: 0;
  }
  .hero.hero--bg h1.headline {
    font-size: clamp(32px, 8.5vw, 44px);
    line-height: 1.08;
    max-width: 100%;
  }
  .hero.hero--bg .subheadline {
    max-width: 100%;
  }
  .hero.hero--bg .hero__credibility,
  .hero.hero--bg .hero__quote,
  .hero.hero--bg .hero__ticker,
  .hero.hero--bg .hero__status {
    max-width: 100%;
  }
  .hero.hero--bg .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero.hero--bg .hero__ctas .btn {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* -- SECTION (mid-page) -------------------------------------- */
.section.section--bg {
  position: relative;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0a0a0a;
  color: #fff;
  border-top: 0;
  overflow: hidden;
}
.section.section--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.72) 35%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 0;
}
.section.section--bg > * {
  position: relative;
  z-index: 1;
}
.section.section--bg .eyebrow {
  color: rgba(255,255,255,0.65);
}
.section.section--bg .eyebrow--cyan {
  color: var(--cyan-light);
}
.section.section--bg .section-headline,
.section.section--bg h2 {
  color: #ffffff;
}
.section.section--bg .section-headline em,
.section.section--bg h2 em {
  background: linear-gradient(180deg, #BFE0F0 0%, #4A9DCC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* When a dark section already had a gradient, the image replaces the
   ambient gradient — keep the brand-color glow subtle. */
.section--dark.section--bg::before {
  background: linear-gradient(90deg,
    rgba(10,10,10,0.94) 0%,
    rgba(10,10,10,0.74) 40%,
    rgba(10,10,10,0.42) 75%,
    rgba(10,10,10,0.58) 100%);
}
.section--dark.section--bg .closing-cta__line em,
.section--dark.section--bg .thesis em {
  background: linear-gradient(180deg, #BFE0F0 0%, #4A9DCC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 768px) {
  .section.section--bg::before {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.86) 0%,
      rgba(0,0,0,0.74) 55%,
      rgba(0,0,0,0.62) 100%);
  }
  .section--dark.section--bg::before {
    background: linear-gradient(180deg,
      rgba(10,10,10,0.90) 0%,
      rgba(10,10,10,0.78) 55%,
      rgba(10,10,10,0.64) 100%);
  }
}