.hero-aurora {
    background: radial-gradient(600px 320px at 20% 10%, rgba(58, 208, 255, 0.22), transparent 60%),
        radial-gradient(700px 400px at 85% 0%, rgba(0, 117, 201, 0.28), transparent 65%),
        radial-gradient(500px 300px at 70% 80%, rgba(246, 161, 75, 0.18), transparent 60%);
}

.hero-frame {
    border: 1px solid rgba(46, 197, 255, 0.18);
    box-shadow: 0 40px 120px -80px rgba(0, 0, 0, 0.85);
}

.tech-circuit {
    background-image: url('../images/patterns/circuit.svg');
    background-size: 260px 260px;
    opacity: 0.35;
    mix-blend-mode: screen;
}

.hero-network {
    background-image: radial-gradient(circle at 20% 40%, rgba(46, 197, 255, 0.45) 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(46, 197, 255, 0.35) 1px, transparent 1px);
    background-size: 140px 140px, 220px 220px;
    background-position: 0 0, 60px 80px;
    opacity: 0.4;
}

.hero-gridfloor {
    height: 220px;
    background-image: linear-gradient(rgba(46, 197, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 197, 255, 0.2) 1px, transparent 1px);
    background-size: 70px 70px;
    transform: perspective(700px) rotateX(70deg);
    transform-origin: top;
    opacity: 0.35;
}

.hero-cityline {
    height: 200px;
    background: url('../images/patterns/cityline.svg') bottom center / cover no-repeat;
    opacity: 0.55;
}

.aero-grid {
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 90px 90px;
    mask-image: radial-gradient(1200px 600px at 50% -10%, #000 30%, transparent 75%);
}

.orb {
    filter: blur(2px);
    animation: float 8s ease-in-out infinite;
}

.hero-logo {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}