.hero{text-align:center;padding:14px 20px 10px;position:relative}
#sphere{display:block;margin:0 auto;width:min(76vw,380px);height:min(76vw,380px);filter:drop-shadow(0 20px 30px var(--sh))}
.brand{display:table;margin:0 auto 12px;padding:6px 18px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(145deg,var(--hi),transparent),var(--card);box-shadow:0 10px 18px -10px var(--sh),inset 0 1px 0 var(--hi);font-weight:800;font-size:15px}
.brand span{background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1{font-size:clamp(28px,5vw,48px);font-weight:700;margin:0 0 10px;text-shadow:0 8px 24px var(--sh)}
.hero p{color:var(--mu);max-width:580px;margin:0 auto 22px;line-height:1.95}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.btn.free{background:linear-gradient(180deg,#34d399,#059669);color:#fff;padding:14px 28px;margin:6px 0 4px;font-size:16px}
.btn.free small{display:inline-block;background:rgba(0,0,0,.22);border-radius:10px;padding:1px 9px;margin-right:8px;font-size:12px;font-weight:600}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}
.feat{padding:20px}.feat b{display:block;margin:8px 0 4px}.feat span{color:var(--mu);font-size:14px;line-height:1.85}
.feat i{font-style:normal;font-size:28px;display:inline-block;filter:drop-shadow(0 6px 6px var(--sh))}
footer.f{text-align:center;color:var(--mu);font-size:12px;padding:30px 20px 36px;line-height:2}
footer.f .credit{font-size:13px;margin:6px 0 0}

.hero-logo{display:block;margin:0 auto 10px;width:min(62vw,260px);height:auto;border-radius:28px;filter:drop-shadow(0 18px 30px var(--sh))}