/* Dark hero (home) and its animated canvas background; .page-hero variant lives in catalogue.css. */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1000px 500px at 85% 10%, rgba(31,138,138,.45), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(227,163,54,.18), transparent 60%),
    linear-gradient(160deg, #0b2a3a 0%, #0e3446 55%, #0b2a3a 100%);
  padding: calc(var(--header-h) + clamp(64px, 10vw, 120px)) 0 clamp(64px, 9vw, 100px);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.lattice { width: 100%; height: 100%; color: rgba(255,255,255,.06);
  mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.hero .lattice { position: absolute; inset: 0; opacity: .6; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; }
.hero .eyebrow { color: #7fd0cc; }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 5.4vw, 4.1rem); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--gold); font-weight: 600; }
.lead { font-size: 1.12rem; color: rgba(255,255,255,.78); max-width: 600px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden; }
.stats li { background: rgba(11,42,58,.65); padding: 26px 22px; backdrop-filter: blur(6px); }
.stats strong { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 600; color: #fff; line-height: 1; margin-bottom: 8px; white-space: nowrap; }
.stats li > span { font-size: .85rem; color: rgba(255,255,255,.65); }

.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* fade behind the headline so text stays crisp */
  mask-image: linear-gradient(100deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 35%, #000 65%);
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 35%, #000 65%);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-canvas { mask-image: none; -webkit-mask-image: none; opacity: .75; }
}