.ahero{position:relative;padding-top:130px;padding-bottom:40px}
.ahero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.ahero .copy{display:grid;gap:22px;justify-items:start}
.ahero h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
.ahero h1 span{color:#cdbfb6}
.ahero p{margin:0;color:var(--muted);font-size:1.06rem;max-width:46ch}
.core{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center;display:grid;place-items:center}
.core::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,26,.55),rgba(255,106,26,.12) 55%,transparent);filter:blur(6px)}
.core .orb2{position:relative;width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 30%,#fff1e0,#ffb070 18%,#ff6a1a 48%,#7a2402 100%);box-shadow:0 0 80px rgba(255,106,26,.8),inset -14px -18px 40px rgba(60,10,0,.7)}
.core .orb2 svg{width:52%;height:auto;filter:drop-shadow(0 4px 10px rgba(60,10,0,.5))}
.core .o{position:absolute;border-radius:50%;border:1px solid rgba(255,170,100,.4);box-shadow:0 0 24px rgba(255,106,26,.25)}
.core .o1{width:70%;height:24%;transform:rotate(-18deg)}
.core .o2{width:92%;height:34%;transform:rotate(-8deg);border-color:rgba(255,170,100,.25)}
.core .o3{width:62%;height:62%;border-style:dashed;border-color:rgba(255,170,100,.18);box-shadow:none}
.core .sat{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px rgba(255,140,60,.9)}
.core .s1{left:14%;top:56%}.core .s2{right:6%;top:40%;width:8px;height:8px}
.sec{padding-block:70px}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
.story .box{border-radius:26px;padding:34px}
.story h2,.sh2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.story p{color:#d8c9be;margin:16px 0 0;max-width:54ch}
.story .panel{position:relative;overflow:hidden;border-radius:26px;min-height:320px;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 110%,rgba(255,106,26,.75),rgba(255,106,26,0) 70%),rgba(14,8,5,.7);border:1px solid rgba(255,150,80,.22)}
.story .panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,210,170,.18) 1px,transparent 1.2px);background-size:20px 20px;-webkit-mask:radial-gradient(70% 60% at 50% 0%,#000,transparent);mask:radial-gradient(70% 60% at 50% 0%,#000,transparent)}
.story .panel .devs{position:relative;display:flex;align-items:flex-end;gap:2%;width:92%}
.story .panel .devs svg{height:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.65))}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat{border-radius:22px;padding:26px;display:grid;gap:4px}
.stat b{font-weight:400;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.04em;line-height:1;background:linear-gradient(180deg,#fff,#ffb27a);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.9rem}
.center{text-align:center;display:grid;justify-items:center;gap:14px;margin-bottom:40px}
.center p{margin:0;color:var(--muted);max-width:50ch}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.val{position:relative;overflow:hidden;border-radius:26px;padding:30px 28px;display:grid;gap:14px;min-height:260px;align-content:start;
  background:radial-gradient(110% 70% at 50% 125%,rgba(255,106,26,.6),rgba(255,106,26,0) 60%),linear-gradient(180deg,rgba(28,16,10,.75),rgba(12,7,4,.9));border:1px solid rgba(255,150,80,.2)}
.val .ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#ff9a4a,#c43f05 70%);box-shadow:0 0 0 7px rgba(255,106,26,.12),0 0 34px rgba(255,106,26,.65);color:#fff}
.val .ic svg{width:26px;height:26px}
.val h3{font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.val p{margin:0;color:#cdbcb0;font-size:.95rem}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:31px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,150,80,.55),transparent)}
.step{display:grid;gap:12px;justify-items:start;align-content:start}
.step .n{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:1.1rem;background:#120a06;border:1px solid rgba(255,170,100,.45);box-shadow:0 0 26px -4px rgba(255,106,26,.7)}
.step h3{font-size:1.1rem;font-weight:500}
.step p{margin:0;color:var(--muted);font-size:.92rem;max-width:30ch}
.ask{position:relative;overflow:hidden;border-radius:30px;border:1px solid var(--line2);padding:70px 24px 84px;text-align:center;display:grid;justify-items:center;gap:16px;
  background:radial-gradient(60% 55% at 50% 0%,rgba(255,150,70,.35),rgba(255,106,26,0) 70%),radial-gradient(90% 60% at 50% 115%,rgba(255,106,26,.7),rgba(255,106,26,0) 65%),rgba(14,8,5,.85)}
.ask h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.ask p{margin:0;color:var(--muted);max-width:46ch}
@media (max-width:960px){.ahero .in,.story{grid-template-columns:1fr}.stats,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.values{grid-template-columns:1fr}.steps::before{display:none}}
@media (max-width:520px){.stats,.steps{grid-template-columns:1fr}}

/* story picture uploaded from admin */
.panel.photo{padding:0;overflow:hidden;display:block}
.panel.photo img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover}

/* ===== realistic planet in the hero ===== */
.core.planet{overflow:visible}
.core.planet::before{inset:14%;background:radial-gradient(closest-side,rgba(255,106,26,.32),rgba(255,106,26,.08) 60%,transparent);filter:blur(18px)}
.core.planet canvas{position:absolute;left:-35%;top:-35%;width:170%;height:170%;display:block;pointer-events:none}
.core.planet #ringBack{z-index:1}.core.planet #aboutPlanet{z-index:2}.core.planet #ringFront{z-index:3}
.core.planet.no-gl #aboutPlanet{display:none}
.core.planet.no-gl::after{content:"";position:absolute;width:54%;aspect-ratio:1;border-radius:50%;z-index:2;background:radial-gradient(circle at 32% 30%,#f2b07a,#b8501b 40%,#3a1406 75%);box-shadow:inset -30px -30px 60px rgba(0,0,0,.6),0 0 60px rgba(255,106,26,.45)}

/* ===== our story: 16 brand logos, 4 x 4 ===== */
.story .panel.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;padding:22px;place-items:stretch;align-content:center}
.panel.logos .lgb{position:relative;z-index:1;display:grid;place-items:center;min-height:74px;border-radius:14px;background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 24px -14px rgba(0,0,0,.8);text-decoration:none;color:#1a120d;padding:10px;transition:transform .2s,box-shadow .2s}
.panel.logos .lgb:hover{transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,106,26,.55),0 0 24px -6px rgba(255,106,26,.7)}
.panel.logos .lgb img{max-width:86%;max-height:44px;object-fit:contain}
.panel.logos .lgb b{font-size:.84rem;font-weight:800;letter-spacing:.02em;text-align:center;line-height:1.1}
@media (max-width:520px){.story .panel.logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:14px}.panel.logos .lgb{min-height:60px}}

/* ===== how it works: one step after the other ===== */
.steps.anim::before{transform-origin:left center}
.steps.anim.ready::before{transform:scaleX(0)}
.steps.anim.ready .step{opacity:0;transform:translateY(16px)}
.steps.anim.ready .step .n{box-shadow:none;border-color:rgba(255,170,100,.15)}
.steps.anim.go::before{transform:scaleX(1);transition:transform calc(var(--n,4) * .7s) linear .2s}
.steps.anim.go .step{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i) * .7s + .2s),transform .6s ease calc(var(--i) * .7s + .2s)}
.steps.anim.go .step .n{border-color:rgba(255,170,100,.6);background:radial-gradient(circle at 50% 35%,#ff9a4a,#c43f05 75%);box-shadow:0 0 0 6px rgba(255,106,26,.12),0 0 30px -2px rgba(255,106,26,.85);transition:all .5s ease calc(var(--i) * .7s + .35s)}
@media (max-width:960px){.steps.anim.go .step{transition-delay:calc(var(--i) * .45s)}}
.ahero{overflow-x:clip}@supports not (overflow:clip){.ahero{overflow-x:hidden}}