/* ===== RESPONSIVE DESIGN ===== */

/* Mobile First Approach */
@media (max-width: 768px) {
    .heading-xl {
        font-size: 32px;
    }
    
    .heading-lg {
        font-size: 28px;
    }
    
    .container {
        padding: 0 16px;
    }
    
    .section-padding {
        padding: 60px 0;
    }
    
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .flex-between {
        flex-direction: column;
        gap: 16px;
    }
    
    .nav-container {
        flex-direction: column;
        gap: 0;
        padding: 0.75rem 1rem;
    }
    
    .nav-top {
        justify-content: space-between;
        width: 100%;
        padding: 1rem 0;
    }
    
    .nav-bottom {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
        background: linear-gradient(135deg, #7C3AED 0%, #9333EA 50%, #A855F7 100%);
        padding: 1rem 0;
    }
    
    .nav-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0.5rem;
    }
    
    .nav-auth {
        gap: 0.75rem;
    }
    
    .nav-auth .btn {
        font-size: 14px;
        padding: 10px 16px;
        min-width: 70px;
    }
    
    .logo {
        font-size: 24px;
    }
    
    .nav-sections {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .nav-section-link {
        padding: 8px 10px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .btn-interest-nav {
        font-size: 13px;
        padding: 8px 12px;
        white-space: nowrap;
    }
    
    .btn {
        padding: 14px 28px;
        font-size: 16px;
        width: 100%;
    }
    
    /* Override for header buttons - don't make them full width */
    .nav-auth .btn,
    .btn-interest-nav {
        width: auto;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .hero {
        padding-top: 240px;
    }
    
    .hero-content h1 {
        font-size: 32px;
    }
    
    .btn-interest {
        font-size: 18px;
        padding: 16px 32px;
        width: auto;
    }
    
    .interest-button-container {
        margin-bottom: 24px;
    }
    
    .hero-map-container {
        margin: 0 -16px 32px -16px;
        border-radius: 0;
        padding: 24px 16px;
    }
    
    .hero-map-container .map-header h2 {
        font-size: 24px;
    }
    
    #map {
        height: 300px;
        width: 100%;
    }
    
    .trust-indicators {
        gap: 24px;
        flex-direction: column;
        align-items: center;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    .how-it-works-container {
        gap: 40px;
    }
    
    .workflow-section {
        padding: 24px;
    }
    
    .workflow-title {
        font-size: 24px;
    }
}

/* Large mobile screens (iPhone 14 Pro Max, Pixel 7, etc.) */
@media (max-width: 768px) and (min-height: 800px) {
    .hero {
        padding-top: 280px;
    }
}

/* iPhone 14 Pro Max specific (430x932) */
@media (max-width: 430px) and (min-height: 900px) {
    .hero {
        padding-top: 300px;
    }
}

/* Extra small mobile screens */
@media (max-width: 400px) {
    .nav-sections {
        gap: 0.25rem;
    }
    
    .nav-section-link {
        font-size: 12px;
        padding: 6px 8px;
    }
    
    .btn-interest-nav {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .nav-auth .btn {
        font-size: 13px;
        padding: 8px 12px;
        min-width: 60px;
    }
    
    .hero {
        padding-top: 220px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .heading-xl {
        font-size: 40px;
    }
    
    .container {
        padding: 0 24px;
    }
    
    #map {
        height: 350px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .hero-buttons {
        flex-direction: row;
    }
    
    #map {
        height: 400px;
    }
}

/* Large screens */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    
    .heading-xl {
        font-size: 52px;
    }
}