.hero{
  position:relative;
  overflow:hidden;
  min-height:max(540px, calc(100svh - 194px));
  display:flex;
  align-items:center;
  padding:48px 0 56px;
  background:var(--navy-deep);
  color:#fff;
}
.hero-bg-media{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(
    135deg,
    rgba(8, 12, 65, 0.88) 0%,
    rgba(21, 71, 114, 0.78) 55%,
    rgba(53, 154, 204, 0.45) 100%
  );
}
.hero-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}
.particle{
  position:absolute; bottom:-20px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(53,154,204,.8), rgba(53,154,204,0) 70%);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  10%{ opacity:.9; }
  100%{ transform:translateY(calc(-1 * var(--rise, 620px))) scale(1.4); opacity:0; }
}
.hero-inner{
  position:relative;
  z-index:4;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
  width:100%;
  display:flex;
  justify-content:flex-start;
}
.hero-content{ max-width:760px; }
.hero h1{
  font-size:clamp(2.5rem, 5vw, 4.2rem);
  line-height:1.08;
  margin-top:16px;
  color:#ffffff;
  text-shadow:0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero h1 b{ color:var(--teal-light); font-weight:700; }
.hero p.lead{
  margin-top:22px;
  font-size:1.15rem;
  line-height:1.6;
  color:#e2e8f0;
  max-width:640px;
  text-shadow:0 1px 5px rgba(0, 0, 0, 0.4);
}
.hero-ctas{
  display:flex; gap:14px;
  margin-top:36px;
  flex-wrap:wrap;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:6px 14px; border-radius:30px; font-size:.78rem; margin-bottom:16px;
}
.hero-badge .pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--teal-light); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.4);}}
@media (max-width:980px){
  .hero-inner{justify-content:center; text-align:center;}
  .hero-content{max-width:100%;}
  .hero-ctas{justify-content:center;}
}
@media (max-width:720px){
  .hero{min-height:max(500px, calc(100svh - 88px)); padding:40px 0 48px;}
}