/* Section "Home: Hero with Africa–Asia map" (patterns/home-hero.php). */

.hero{position:relative;min-height:min(100svh,920px);background:radial-gradient(120% 90% at 80% 30%,#2E2A86 0%,#1B1850 45%,#0C0B28 100%);color:#fff;overflow:hidden;display:flex;flex-direction:column}
.hero__map{position:absolute;right:1%;top:15%;width:min(50vw,840px);opacity:.95}
.map .dw{stroke:#3B3790;stroke-width:4.4;stroke-linecap:round}
.map .da{stroke:#3CD6C4;stroke-width:4.4;stroke-linecap:round;opacity:.8}
.map .arc{fill:none;stroke:var(--tide);stroke-width:2.2}
.map .arcf{fill:none;stroke:rgba(60,214,196,.35);stroke-width:1.2;stroke-dasharray:3 6}
.map .nd{fill:var(--tide)}
.map .nr{fill:#1B1850;stroke:var(--tide);stroke-width:2}
.map .lb{font:700 15px var(--f);fill:#fff;letter-spacing:.06em;text-transform:uppercase}
.map .ls{font:500 12.5px var(--f);fill:#B9B6DD}
.map .pulse{fill:none;stroke:var(--tide);stroke-width:1.2;opacity:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,40,.92) 0%,rgba(12,11,40,.55) 30%,rgba(12,11,40,0) 48%);pointer-events:none}
.hero__in{width:100%;position:relative;z-index:2;flex:1;display:flex;align-items:center;padding-top:150px;padding-bottom:60px}
.hero h1{color:#fff;font-size:clamp(44px,5.8vw,90px);max-width:14ch}
.hero p{font-size:clamp(17px,1.35vw,20px);color:#D4D2EE;max-width:50ch;margin:30px 0 40px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__rail{position:relative;z-index:2;border-top:1px solid var(--line-d);background:rgba(12,11,40,.35);backdrop-filter:blur(6px)}
.hero__rail .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.hero__rail .wrap > div{padding:24px 0;display:flex;flex-direction:column;gap:2px}
.hero__rail .wrap > div + div{padding-left:32px;border-left:1px solid var(--line-d)}
.hero__rail b{font-weight:800;font-stretch:78%;font-variation-settings:'wdth' 78;font-size:clamp(22px,2.2vw,30px);text-transform:uppercase;line-height:1}
.hero__rail span{font-size:14px;color:var(--on-d2)}
@media (prefers-reduced-motion:no-preference){
  .arcm{stroke-dasharray:720;stroke-dashoffset:720;animation:draw 2.4s .6s cubic-bezier(.6,.1,.2,1) forwards}
  .late{opacity:0;animation:fade .8s 2.6s forwards}
  .pulse{animation:pulse 3.2s 3.2s infinite}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes fade{to{opacity:1}}
  @keyframes pulse{0%{r:8;opacity:.9}100%{r:34;opacity:0}}
}

@media (max-width:980px){
  .hero__map{width:120vw;right:-40vw;top:auto;bottom:90px;opacity:.55}
}

@media (max-width:640px){
  .hero__rail .wrap{grid-template-columns:1fr}
  .hero__rail .wrap > div{padding:14px 0}
  .hero__rail .wrap > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line-d)}
}