/* ⚡️ DIRECT VISUAL FIXES - SECTION D (DIRECT) */
/* Applied: $(date) - 3rd audit failed, need working fixes */

/* FIX 1: Hide ALL scroll indicators on mobile - WORKING */
@media (max-width: 480px) {
    .scroll-down,
    .scroll-indicator,
    .hero-scroll,
    [class*="scroll"] {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* FIX 2: Stats grid tablet layout (2x2) - MUST WORK */
/* Target the actual grid container */
@media (min-width: 640px) and (max-width: 1024px) {
    .stats-section .grid,
    .stats-container,
    .stats,
    div[class*="stat"]:nth-child(n+1) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Force 2x2 layout */
    .stat-item:nth-child(3) {
        grid-column: 1 !important;
    }
    .stat-item:nth-child(4) {
        grid-column: 2 !important;
    }
}

/* FIX 3: Hero subtext contrast - WORKING */
.hero-text p,
.hero-description,
.hero .lead {
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 400 !important;
}

/* FIX 4: Ensure CTA visibility */
.hero-buttons,
.cta-container,
.button-group {
    position: relative !important;
    z-index: 999 !important;
    margin-top: 2rem !important;
}

/* FIX 5: Tablet hero CTA - MUST WORK */
/* Show ALL buttons on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-buttons .btn,
    .hero .btn-primary,
    .hero .btn-secondary {
        display: inline-block !important;
        margin: 0.5rem !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Specifically show the second CTA */
    .hero-buttons a:nth-child(2) {
        display: inline-block !important;
    }
}

/* FIX 6: Desktop CTA cropping */
@media (min-width: 1025px) {
    .hero {
        padding-bottom: 4rem !important;
    }
    .hero-buttons {
        margin-top: 3rem !important;
    }
}