.top-scene{background:linear-gradient(180deg,rgba(8,9,15,.12),transparent 70%,var(--bg) 100%),url('img/hero-fluon-2d.png') center center/cover no-repeat;background-color:#0a1028}
.top-scene .hero-copy{max-width:640px}
.top-scene .hero-brand{font-size:clamp(58px,8.2vw,100px);letter-spacing:-3px;filter:drop-shadow(0 3px 14px rgba(4,8,22,.85))}
.top-scene .hero h1{font-size:clamp(48px,7vw,82px);letter-spacing:-2.2px;filter:drop-shadow(0 3px 14px rgba(4,8,22,.85))}
.top-scene .hero-brand span,
.top-scene .hero h1 .grad-text{
  background:linear-gradient(100deg,#f4f1ff 0%,#d7ccff 42%,#b7d4ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.top-scene .hero p.sub{color:#eef1fb;font-size:clamp(20px,2.35vw,28px);max-width:620px;line-height:1.45}
.top-scene .hero-platforms{color:#e4e9f6;font-size:16px}
.top-scene .hero .cta .btn{font-size:18px;padding:16px 28px}
.top-scene .hero .btn-ghost{color:#fff;background:rgba(8,12,28,.82);border-color:rgba(255,255,255,.7)}
@media(max-width:760px){
  .top-scene{background:linear-gradient(180deg,#0b1025 0%,#0b1025 50%,transparent 70%,var(--bg) 100%),url('img/hero-fluon-2d.png') 73% bottom/auto 390px no-repeat;background-color:#0b1025}
  .top-scene .hero{padding-bottom:340px;min-height:0;padding-top:28px}
  .top-scene .hero-grid{display:block}
  .top-scene .hero-copy{max-width:640px}
  .top-scene .hero h1{font-size:46px}
  .top-scene .hero-brand{font-size:62px}
  .top-scene .hero .cta .btn{font-size:17px;padding:15px 22px}
}
@media(max-width:380px){
  .top-scene .hero h1{font-size:40px}
  .top-scene .hero-brand{font-size:52px}
}