/* Home hero styles (migrated from Views/Home/_Hero.cshtml inline <style>) */

/* Subtle gradient overlay on top of the dark overlay you already have */
#hero.overlay-dark::before {
    background: linear-gradient(180deg, rgba(8, 17, 15, 0.50) 0%, rgba(8, 17, 15, 0.80) 100%);
    opacity: 1; /* keep visible */
}

/* Centered hero card */
#hero .hero-card {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 28px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: saturate(130%) blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #fff;
    text-align: center;
}

#hero .brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 auto 14px auto;
}

#hero .hero-title {
    font-weight: 700;
    letter-spacing: 0.2px;
}

#hero .cta .btn {
    text-shadow: none;
}

#hero .btn-outline-light {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
}
#hero .btn-outline-light:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

@media (max-width: 576px) {
    #hero .hero-card { padding: 22px 18px; }
    #hero .hero-title { font-size: 32px; }
    #hero .lead { font-size: 14px; }
    #hero .cta .btn { display: block; width: 100%; margin: 0 0 12px 0; }
    #hero .cta .btn:last-child { margin-bottom: 0; }
}