/* Red, Grey & Blue Hero Gradient */
.hero-gradient {
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(230, 57, 70, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 82, 165, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%) !important;
}

[data-theme="light"] .hero-gradient {
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(185, 28, 28, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 82, 165, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(200, 200, 200, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%) !important;
}

/* Red, Grey & Blue bottom stripe */
.hero-gradient::after {
    background: linear-gradient(90deg, 
        #e63946 0%, 
        #e63946 33%, 
        #888888 33%, 
        #888888 66%, 
        #0052a5 66%, 
        #0052a5 100%
    ) !important;
}

/* Larger logo */
.site-logo .logo-image {
    height: 80px !important;
    max-width: 360px !important;
}

@media (max-width: 768px) {
    .site-logo .logo-image {
        height: 64px !important;
        max-width: 280px !important;
    }
}

@media (max-width: 480px) {
    .site-logo .logo-image {
        height: 52px !important;
        max-width: 220px !important;
    }
}

/* Reduced hero height */
.hero {
    min-height: 220px !important;
    padding: var(--space-4) var(--space-6) !important;
}

@media (max-width: 640px) {
    .hero {
        min-height: 160px !important;
        padding: var(--space-3) var(--space-4) !important;
    }
}

/* Red, Grey & Blue Hero with Images */
.hero-with-images {
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(230, 57, 70, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 82, 165, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%) !important;
}

[data-theme="light"] .hero-with-images {
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(185, 28, 28, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 82, 165, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(200, 200, 200, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%) !important;
}

/* Red, Grey & Blue bottom stripe for hero with images */
.hero-with-images::after {
    background: linear-gradient(90deg, 
        #e63946 0%, 
        #e63946 33%, 
        #888888 33%, 
        #888888 66%, 
        #0052a5 66%, 
        #0052a5 100%
    ) !important;
}