.hero{
  position: relative;
  min-height: clamp(480px, 70vh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(1200px 600px at -10% 10%, rgba(120,150,255,.08), transparent 60%),
              radial-gradient(900px 600px at 110% 20%, rgba(255,120,180,.09), transparent 60%),
              linear-gradient(180deg, #0d1218, #0b0f14 50%, #0a0e13);
}

.hero-canvas{
  position:absolute; inset:-10% -10% -10% -10%;
  width:120%; height:120%;
  filter: blur(22px) saturate(1.05) contrast(1.05);
  opacity:.9;
  z-index:0;
}

/* Контент поверх */
.hero-inner{
  position: relative;
  z-index:1;
  text-align:center;
  padding-inline: 16px;
}

.hero-title{
  font-weight: 900;
  font-size: clamp(32px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: .2px;
  margin: 0;
  color: #e9eef8;
  /* тонкая подсветка букв из canvas */
  text-shadow: 0 2px 18px rgba(50,110,255,.15);
}

.hero-sub{
  display:block;
  margin-top: 10px;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 500;
  color: #9fb0c9;
}

.hero-cta{
  margin-top: clamp(16px, 3.5vh, 28px);
  display: inline-flex;
  gap: 10px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 12px;
  border:1px solid var(--stroke, #2a2f36);
  text-decoration:none; color: var(--text, #cfd6e4);
}
.btn.primary{
  background: linear-gradient(180deg, #2a7bff, #1a4dcb);
  border-color: rgba(42,123,255,.65);
  color: white;
  box-shadow: 0 10px 26px rgba(42,123,255,.25);
}
.btn.primary:hover{ filter: brightness(1.05); }
.btn.ghost:hover { border-color:#3a4048; }

/* Чтобы под героем не липло */
.hero + section, .hero + .container { margin-top: 24px; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-canvas{ display:none; }
}
.hero{
  min-height: clamp(560px, 85vh, 1000px); /* было ~70vh */
  padding: clamp(40px, 5vw, 72px) 0;      /* чуть больше воздуха сверху/снизу */
}
@media (min-width: 992px){
  .hero, .hero--tall{
    min-height: 90vh;
  }
}