/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:340px;border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:calc(84px + env(safe-area-inset-top)) 24px 68px;
  z-index:0;
}
.hero-bg{position:absolute;inset:0;height:100%;overflow:hidden;border-radius:0;z-index:-1}
.hero-bg{background:linear-gradient(110deg,#1b5a5f 0%,#23757a 55%,#31979a 100%);--mx:50%;--my:50%}
#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(143,217,200,.18),transparent 70%)}
.hero-logo{position:absolute;top:33px;left:50%;transform:translateX(-50%);width:107px;height:29px;object-fit:cover}
.hero-text{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:100%}
.hero h1{font-weight:500;font-size:clamp(27px,8vw,32px);line-height:1.2;color:#fff;text-wrap:balance}
.hero h1 em{font-style:italic}
.hero h1 strong{font-weight:700}
.hero-text p{font-size:13px;line-height:1.5;color:#fde3c0;max-width:340px;text-wrap:balance}
.hero h1 b{font-weight:700}
@media(min-width:600px){
  .hero{min-height:372px;padding-top:96px}
  .hero h1{font-size:44px}
  .hero-text p{font-size:15px;max-width:480px}
    .hero-logo{width:140px;height:38px}
}
@media(min-width:1024px){
  .hero{min-height:436px;padding-top:110px}
  .hero h1{font-size:60px}
  .hero-text{max-width:760px}
  .hero-text p{font-size:17px;max-width:560px}
    .hero-logo{width:180px;height:48px;top:40px}
}

/* Light on-load entrance */
@keyframes hero-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
.hero-logo{animation:hero-fade .8s ease-out .05s both}
.hero-text h1{animation:hero-in .8s cubic-bezier(.2,.7,.2,1) .15s both}
.hero-text p{animation:hero-in .8s cubic-bezier(.2,.7,.2,1) .32s both}
.hero .join{animation:hero-in .8s cubic-bezier(.2,.7,.2,1) .48s both}
@media(prefers-reduced-motion:reduce){.hero-logo,.hero-text h1,.hero-text p,.hero .join{animation:none}}
