.hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    /* soft accent glows: behind the ecosystem, top-left and bottom edge */
    radial-gradient(42% 58% at 74% 48%, rgba(44, 45, 116, 0.75) 0%, rgba(44, 45, 116, 0) 70%),
    radial-gradient(38% 50% at 8% 12%, rgba(44, 45, 116, 0.55) 0%, rgba(44, 45, 116, 0) 70%),
    radial-gradient(50% 40% at 30% 110%, rgba(32, 33, 88, 0.9) 0%, rgba(32, 33, 88, 0) 70%),
    radial-gradient(28% 34% at 88% 92%, rgba(255, 152, 0, 0.08) 0%, rgba(255, 152, 0, 0) 70%),
    linear-gradient(125deg, #15163d 0%, #1a1b4a 45%, #202158 100%);
}
/* ---------- Animated background layers ---------- */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* soft glows that drift very slowly */
.hg { position: absolute; border-radius: 50%; filter: blur(40px); }
.hg-1 { width: 46vw; aspect-ratio: 1; right: 4%; top: 6%; background: radial-gradient(circle, rgba(58, 59, 140, 0.55), transparent 65%); }
.hg-2 { width: 34vw; aspect-ratio: 1; left: -6%; top: -12%; background: radial-gradient(circle, rgba(44, 45, 116, 0.5), transparent 65%); }
.hg-3 { width: 26vw; aspect-ratio: 1; right: 10%; bottom: -8%; background: radial-gradient(circle, rgba(242, 146, 24, 0.12), transparent 65%); }

/* minimal dotted texture, strongest behind the ecosystem and fading out */
.hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 75% at 72% 45%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
  mask-image: radial-gradient(60% 75% at 72% 45%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
}

/* layered waves along the bottom; each SVG is two identical periods wide so a -50% shift loops seamlessly */
.hw { position: absolute; left: 0; bottom: 0; width: 200%; height: 42%; }

@media (prefers-reduced-motion: no-preference) {
  .hw-1 { animation: wave-drift 20s linear infinite; }
  .hw-line { animation: wave-drift 24s linear infinite; }
  .hw-2 { animation: wave-drift 17s linear infinite reverse; }
  .hw-3 { animation: wave-drift 28s linear infinite; }
  .hero-dots { animation: dots-drift 22s linear infinite; }
  .hg-1 { animation: glow-a 18s ease-in-out infinite; }
  .hg-2 { animation: glow-b 22s ease-in-out infinite; }
  .hg-3 { animation: glow-a 16s ease-in-out -6s infinite reverse; }
}
@keyframes wave-drift { to { transform: translateX(-50%); } }
@keyframes dots-drift { to { background-position: 26px 26px; } }
@keyframes glow-a { 0%, 100% { transform: translate(0, 0); opacity: 0.85; } 50% { transform: translate(-4vw, 3vh); opacity: 1; } }
@keyframes glow-b { 0%, 100% { transform: translate(0, 0); opacity: 0.8; } 50% { transform: translate(5vw, 4vh); opacity: 1; } }

.hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(2rem, 4vw, 4.5rem);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
}
.hero-copy { min-width: 0; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 3.3vw, 3.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em;
  margin-top: 1.3rem; padding-bottom: 0.12em; max-width: 24ch; text-wrap: balance;
}
.hero h1 .hl { color: var(--orange); position: relative; white-space: nowrap; }
.hero h1 .hl svg { position: absolute; left: 0; bottom: -0.18em; width: 100%; height: 0.28em; overflow: visible; }
.hero .lead { margin-top: 1.6rem; font-size: clamp(1.1rem, 1.35vw, 1.28rem); color: rgba(232, 232, 248, 0.82); line-height: 1.7; max-width: 36rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

.trust {
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.85rem 1.8rem;
  margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.trust li { display: flex; align-items: center; gap: 0.65rem; font-weight: 600; font-size: 0.98rem; color: #fff; }
.trust .tk {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--orange-600); border: 1px solid #fbe0bd; box-shadow: 0 6px 14px -8px rgba(230, 137, 0, 0.5);
}
.trust .tk .i { width: 1.05rem; height: 1.05rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(18px); animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.18s; } .d3 { animation-delay: 0.3s; } .d4 { animation-delay: 0.42s; }
  .hero h1 .hl path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 1.2s cubic-bezier(0.6, 0.1, 0.2, 1) 0.9s forwards; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-in { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { max-width: 760px; }
}
@media (max-width: 760px) {
  .hero-cta .btn { flex: 1 1 100%; }
  .trust { grid-template-columns: 1fr; }
}