.hero {
    position: relative;
    overflow: hidden;
    padding: 160px 40px;
    color: var(--brand-text-light);
     /* adjust path as needed */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
    rgba(6,20,26,0.9) 0%,
    rgba(12,44,58,0.2) 100%
    );
}

.hero-title {
    max-width: 800px;
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    max-width: 750px;
    position: relative;
    z-index: 2;
}

.hero-badges {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.hero-badge {
    background: rgba(255,255,255,0.12);
    padding: 20px 26px;
    border-radius: 10px;
    font-size: 18px;
    backdrop-filter: blur(4px);
    max-width: 380px;
}

.hero-cta {
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

/* Mobile hero */
@media (max-width: 768px) {
    .hero {
        padding: 60px 20px;
    }

    .hero-title {
        font-size: 34px;
        max-width: 100%;
    }

    .hero-subtitle {
        font-size: 18px;
    }
}