:root{--ember:#d08355;--cool:#6a91b6;--dim:#5b5d61}

.pioneers-section{
  --white:#221c14;--muted:#6b5f4d;--dim:#8a7a5c;--line:#00000020;
  --ember:#a85a2c;--cool:#3f6a91;--paper:#f2ead9;
  position:relative;width:100%;min-height:100vh;min-height:100svh;color:var(--white);
  padding:clamp(80px,10vh,135px) 0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:
  radial-gradient(circle at 18% 12%,#fffdf6 0%,transparent 45%),
  radial-gradient(circle at 85% 90%,#e8dcc0 0%,transparent 50%),
  linear-gradient(180deg,#f4ecd9 0%,#efe4cd 50%,#f4ecd9 100%)}
.pioneers-section .stars{position:absolute;inset:0;z-index:0;opacity:.4;background-image:
  radial-gradient(1px 1px at 8% 22%,#221c14,transparent),
  radial-gradient(1px 1px at 22% 68%,#221c14,transparent),
  radial-gradient(1.5px 1.5px at 34% 12%,#221c14,transparent),
  radial-gradient(1px 1px at 47% 78%,#221c14,transparent),
  radial-gradient(1px 1px at 58% 34%,#221c14,transparent),
  radial-gradient(1.5px 1.5px at 68% 58%,#221c14,transparent),
  radial-gradient(1px 1px at 77% 15%,#221c14,transparent),
  radial-gradient(1px 1px at 88% 44%,#221c14,transparent),
  radial-gradient(1.5px 1.5px at 94% 74%,#221c14,transparent),
  radial-gradient(1px 1px at 4% 88%,#221c14,transparent),
  radial-gradient(1px 1px at 63% 90%,#221c14,transparent),
  radial-gradient(1px 1px at 40% 46%,#221c14,transparent)}

.pioneers-section .p-head{position:relative;z-index:1;display:flex;gap:50px;margin-bottom:78px;padding-inline:7vw}
.pioneers-section .p-head h2{font:clamp(42px,5.6vw,86px)/.92 Pavelt;text-transform:uppercase;letter-spacing:.02em;margin:0 0 22px;text-wrap:balance}
.pioneers-section .p-head p{max-width:460px;color:var(--muted);margin:0;font-size:14.5px;line-height:1.75}
.pioneers-section .p-head .num{font:clamp(52px,6.4vw,100px)/.8 Pavelt;color:#000;flex:none}
.pioneers-section .label{color:var(--muted)!important}

.pioneers-section .timeline{position:relative;z-index:1;padding:6px 7vw 0}
.pioneers-section .timeline svg{position:absolute;left:7vw;right:7vw;top:64px;width:calc(100% - 14vw);height:220px;overflow:visible;pointer-events:none}
.pioneers-section .timeline path{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1)}
.pioneers-section .timeline.visible path{stroke-dashoffset:0}

.pioneers-section .p-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:start}
.pioneers-section .p-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.pioneers-section .p-card.visible{opacity:1}
.pioneers-section .p-card:nth-child(1){transform:translateY(46px)}
.pioneers-section .p-card.visible:nth-child(1){transform:translateY(58px)}
.pioneers-section .p-card:nth-child(2){transform:translateY(0px)}
.pioneers-section .p-card.visible:nth-child(2){transform:translateY(6px)}
.pioneers-section .p-card:nth-child(3){transform:translateY(30px)}
.pioneers-section .p-card.visible:nth-child(3){transform:translateY(40px)}
.pioneers-section .p-card:nth-child(4){transform:translateY(4px)}
.pioneers-section .p-card.visible:nth-child(4){transform:translateY(-14px)}
.pioneers-section .p-card:nth-child(5){transform:translateY(30px)}
.pioneers-section .p-card.visible:nth-child(5){transform:translateY(26px)}

.pioneers-section .medal{position:relative;width:clamp(108px,10.4vw,150px);aspect-ratio:1;border-radius:50%;margin-bottom:22px;transition:transform .85s cubic-bezier(.19,1,.22,1)}
.pioneers-section.in-view .medal{will-change:transform}
.pioneers-section .p-card:hover .medal{transform:scale(1.18)}
.pioneers-section .medal-ring{position:absolute;inset:0;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,var(--ac,var(--ember)),transparent 40%,transparent 60%,var(--ac,var(--ember)))}
.pioneers-section .medal-ring:before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--paper)}
.pioneers-section .portrait{position:absolute;inset:6px;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1c,0 18px 34px -12px #000}
.pioneers-section .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.35) sepia(.16) contrast(1.06) brightness(1.03);transition:filter .5s ease}
.pioneers-section .p-card:hover .portrait img{filter:grayscale(.05) sepia(.06) contrast(1.06) brightness(1.03)}
.pioneers-section .portrait .patch{position:absolute;left:50%;bottom:4%;width:9px;height:9px;transform:translateX(-50%);border-radius:50%;background:var(--ac,var(--ember));box-shadow:0 0 8px var(--ac,var(--ember))}
.pioneers-section .portrait .grain{position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

.pioneers-section .p-name{font:22px/1.05 Pavelt;letter-spacing:.01em;text-transform:uppercase;margin:0 0 6px}
.pioneers-section .p-mission{font-size:11.5px;color:var(--muted);margin:0 0 10px;max-width:20ch}
.pioneers-section .credit{font-size:8px;letter-spacing:.06em;color:var(--dim);opacity:.75;margin:0 0 10px;max-width:20ch}
.pioneers-section .p-meta{display:flex;align-items:center;gap:8px;font:9px/1 Mont,Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--dim)}
.pioneers-section .p-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ac,var(--ember))}
.pioneers-section .p-meta .nation{color:var(--ac,var(--ember))}

.pioneers-section .p-card.us{--ac:var(--cool)}
.pioneers-section .p-card.ussr{--ac:var(--ember)}

.pioneers-section .p-foot{position:relative;z-index:1;margin-top:90px;padding-top:40px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,max-content);gap:6vw;align-items:end;padding-inline:7vw}
.pioneers-section .p-foot b{display:block;font:44px/1 Pavelt;margin-bottom:8px}
.pioneers-section .p-foot span{font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}

@media(max-width:780px){
  .pioneers-section .p-head{flex-direction:column;gap:14px;padding-inline:24px}
  .pioneers-section .p-head .num{display:none}
  .pioneers-section .timeline{padding-inline:24px}
  .pioneers-section .timeline svg{display:none}
  .pioneers-section .p-row{grid-template-columns:repeat(2,1fr);row-gap:52px}
  .pioneers-section .p-card:nth-child(n){transform:translateY(0)!important}
  .pioneers-section .p-foot{grid-template-columns:repeat(2,1fr);gap:34px 10vw;padding-inline:24px}
}
@media(prefers-reduced-motion:reduce){
  .pioneers-section .p-card,.pioneers-section .timeline path{transition:none;opacity:1;transform:none!important;stroke-dashoffset:0}
}