.prodex-page-hero-outer{position:relative;min-height:430px;overflow:hidden;background:linear-gradient(135deg,#071426 0%,#0b2948 55%,#063826 130%)}

.prodex-page-hero{position:relative;z-index:1;padding-top:196px;padding-bottom:56px;min-height:430px;display:flex;align-items:center}
.prodex-page-hero .container{width:100%}

/* animated hub backdrop */
.prodex-page-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-grid{position:absolute;inset:-20% -10%;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:30px 30px;opacity:.55;animation:heroGridDrift 26s linear infinite}
.hero-nodes{position:absolute;inset:0;background-image:
    linear-gradient(120deg,transparent 49.4%,rgba(18,201,151,.14) 49.7%,rgba(18,201,151,.14) 50.1%,transparent 50.4%),
    linear-gradient(60deg,transparent 49.4%,rgba(98,84,245,.12) 49.7%,rgba(98,84,245,.12) 50.1%,transparent 50.4%);
    background-size:210px 210px,260px 260px;opacity:.35;animation:heroGridDrift 40s linear infinite reverse}
.hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:heroOrbFloat 9s ease-in-out infinite}
.hero-orb-a{top:-60px;right:8%;width:280px;height:280px;background:radial-gradient(circle,rgba(18,201,151,.55),transparent 70%);animation-duration:11s}
.hero-orb-b{bottom:-90px;left:6%;width:320px;height:320px;background:radial-gradient(circle,rgba(98,84,245,.45),transparent 70%);animation-duration:13s;animation-delay:1.2s}
.hero-orb-c{top:30%;left:38%;width:220px;height:220px;background:radial-gradient(circle,rgba(0,168,121,.35),transparent 70%);animation-duration:15s;animation-delay:.5s}

@keyframes heroGridDrift{0%{background-position:0 0}100%{background-position:260px 180px}}
@keyframes heroOrbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,16px) scale(1.08)}}

/* breadcrumb */
.prodex-breadcrumb{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;margin-bottom:22px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);opacity:0;animation:heroFadeUp .7s ease forwards}
.prodex-breadcrumb a{display:inline-flex;align-items:center;gap:7px;color:#cfe0dc;font-size:12.5px;font-weight:600;text-decoration:none;transition:.2s}
.prodex-breadcrumb a:hover{color:#3ee6b4}
.prodex-breadcrumb a i{font-size:11px;color:#8fa6a0}
.prodex-breadcrumb-sep{font-size:9px;color:#5c7a72}
.prodex-breadcrumb .is-current{color:#3ee6b4;font-size:12.5px;font-weight:800}

.prodex-page-hero-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:#3ee6b4;font-size:12.5px;font-weight:800;letter-spacing:.2px;opacity:0;animation:heroFadeUp .7s ease .08s forwards}
.prodex-page-hero-kicker i{font-size:10px;animation:heroSpin 3.2s linear infinite}

.prodex-page-hero-inner h1{margin:0 0 16px;color:#fff;font-size:42px;font-weight:900;line-height:1.4;opacity:0;animation:heroFadeUp .75s ease .16s forwards}
.prodex-page-hero-inner p{max-width:640px;margin:0;color:#bcd0cc;font-size:15px;line-height:2;opacity:0;animation:heroFadeUp .75s ease .26s forwards}

@keyframes heroFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
    .hero-grid,.hero-nodes,.hero-orb,.prodex-page-hero-kicker i{animation:none}
    .prodex-breadcrumb,.prodex-page-hero-kicker,.prodex-page-hero-inner h1,.prodex-page-hero-inner p{animation:none;opacity:1;transform:none}
}

@media(max-width:767px){
    .prodex-page-hero{padding-top:150px;padding-bottom:40px;min-height:340px}
    .prodex-page-hero-outer{min-height:340px}
    .prodex-page-hero-inner h1{font-size:29px}
    .prodex-page-hero-inner p{font-size:13px}
}