/* ---------- Futuristic hero device (shared: homepage + auth pages) ---------- */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1200px;
    min-height: 420px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
}
.hero-aura {
    position: absolute;
    inset: -10% -5%;
    background:
        radial-gradient(40% 45% at 30% 35%, rgba(56, 189, 248, 0.38), transparent 70%),
        radial-gradient(40% 45% at 75% 70%, rgba(129, 140, 248, 0.34), transparent 70%),
        radial-gradient(30% 30% at 55% 15%, rgba(52, 230, 176, 0.22), transparent 70%);
    filter: blur(28px);
    animation: heroAura 9s ease-in-out infinite alternate;
    pointer-events: none;
}
.hero-device {
    position: relative;
    width: min(100%, 440px);
    border-radius: 30px;
    padding: 2px;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.95), rgba(129, 140, 248, 0.55) 45%, rgba(52, 230, 176, 0.85));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 30px 80px -20px rgba(2, 132, 199, 0.65),
        0 0 60px -10px rgba(56, 189, 248, 0.55);
    transform: rotateY(calc(-9deg + var(--tilt-y))) rotateX(calc(4deg + var(--tilt-x)));
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out;
    animation: heroFloat 6s ease-in-out infinite;
    overflow: hidden;
}
.hero-device img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
    filter: saturate(1.15) contrast(1.06);
}
.hero-device::after { /* neon tint + fade into the dark page */
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(11, 15, 25, 0) 55%, rgba(11, 15, 25, 0.75) 100%),
        linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.14) 60%, transparent);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.hero-scan {
    position: absolute;
    left: 2px; right: 2px;
    top: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.32), transparent);
    border-bottom: 1px solid rgba(125, 211, 252, 0.7);
    animation: heroScan 4.8s linear infinite;
    z-index: 2;
    pointer-events: none;
}
.hud {
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid #7dd3fc;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9));
    z-index: 3;
    pointer-events: none;
}
.hud-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.hud-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.hud-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.hud-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

@keyframes heroFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}
@keyframes heroScan {
    0%   { top: -15%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
@keyframes heroAura {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

@media (max-width: 991px) {
    .hero-visual { min-height: 0; padding: 0.5rem 0 1.5rem; }
    .hero-device { width: min(86%, 380px); }
}

/* Banner variant: full-width brand banner (homepage + auth side panel) */
.hero-visual--banner { min-height: 0; padding: 0; width: 100%; }
.hero-visual--banner .hero-aura { inset: -4% -3%; }
.hero-visual--banner .hero-device {
    width: 100%;
    border-radius: 22px;
    transform: rotateY(calc(-3deg + var(--tilt-y))) rotateX(calc(1.5deg + var(--tilt-x)));
}
.hero-visual--banner .hero-device img { border-radius: 20px; }
.hero-visual--banner .hero-device::after {
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(129, 140, 248, 0.08) 60%, transparent);
}
.hero-visual--banner .hud { width: 18px; height: 18px; }

@media (max-width: 768px) {
    .hero-visual--banner .hero-device {
        transform: none !important;
        animation: none !important;
        border-radius: 16px;
    }
    .hero-visual--banner .hero-device img {
        border-radius: 14px;
    }
    .hero-visual--banner .hud {
        width: 14px;
        height: 14px;
    }
    .hero-aura {
        inset: -2% -1%;
        filter: blur(18px);
    }
}