/* =============================================================================
   Responsive Design
   ============================================================================= */
@media (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .capability-card--wide {
        grid-column: span 2;
    }
    
    .status-badges {
        gap: var(--spacing-sm);
    }
}

@media (max-width: 1024px) {
    .hero-split {
        grid-template-columns: 1fr;
        /* Guaranteed minimum 32px gap between SVG and title when stacked */
        gap: clamp(32px, 5vh, 64px);
        text-align: center;
    }
    
    .hero-content {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
        margin-left: 0; /* Reset */
        margin-right: 0; /* Reset overflow */
        /* Minimum top spacing maintained even in stacked layout */
        padding-top: clamp(16px, 3vh, 32px);
    }
    
    .hero-brand {
        justify-content: center;
    }
    
    .hero-subtitle {
        margin: 0 auto var(--spacing-xl);
    }
    
    .hero-content .waitlist-form {
        margin: 0 auto;
    }
    
    .hero-artifact {
        order: -1;
        margin-left: 0; /* Reset overflow on tablet */
        margin-top: 0;
        justify-content: center;
        align-items: center;
    }
    
    .artifact-container {
        max-width: 320px;
    }
    
    .artifact-image {
        width: 100%;
        max-width: 400px;
    }
}

/* Short viewport height - compact other elements, keep SVG clearance safe */
@media (max-height: 800px) and (min-width: 1025px) {
    .hero {
        padding: 80px 0 40px;
    }
    
    /* Keep minimum 240px to prevent SVG overlap - compact other elements instead */
    .hero-tagline {
        font-size: clamp(32px, 4.5vw, 48px);
        margin-bottom: var(--spacing-sm);
    }
    
    .hero-subtitle {
        margin-bottom: var(--spacing-md);
        font-size: 15px;
    }
    
    .hero-banner {
        margin-top: clamp(12px, 2vh, 24px);
    }
    
    .form-group {
        padding: 3px;
    }
}

/* Very short viewport - aggressive compacting of text/form, never SVG clearance */
@media (max-height: 700px) and (min-width: 1025px) {
    .hero-tagline {
        font-size: clamp(28px, 4vw, 42px);
        margin-bottom: var(--spacing-xs);
    }
    
    .hero-subtitle {
        font-size: 14px;
        margin-bottom: var(--spacing-sm);
    }
    
    .hero-banner {
        margin-top: var(--spacing-sm);
        padding: 6px 16px;
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    /* Navbar logo - ALWAYS visible on mobile */
    .nav-logo {
        margin-left: 0; /* Reset on mobile */
        display: flex !important;
        visibility: visible !important;
    }
    
    .logo-mark {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    
    .logo-text {
        display: inline !important;
        font-size: 15px;
    }
    
    .nav-actions {
        margin-right: 0; /* Reset on mobile */
    }
    
    .hero {
        padding: 100px 0 60px;
        min-height: auto; /* Allow natural height on mobile */
        justify-content: flex-start; /* Align to top */
    }
    
    /* Hero title - larger and bolder for mobile impact */
    .hero-tagline {
        font-size: clamp(32px, 10vw, 44px);
        line-height: 1.1;
        margin-bottom: var(--spacing-md);
        letter-spacing: -0.02em;
    }
    
    .tagline-line {
        white-space: normal; /* Allow wrapping on mobile */
    }
    
    .hero-subtitle {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: var(--spacing-xl);
        max-width: 100%;
    }
    
    .hero-content {
        padding-top: var(--spacing-lg); /* Comfortable top spacing */
        text-align: center;
    }
    
    .hero-banner {
        padding: 8px 16px;
        font-size: 10px;
        margin: var(--spacing-xl) auto 0;
    }
    
    .hero-artifact {
        display: none;
    }
    
    .form-group {
        flex-direction: column;
        padding: var(--spacing-xs);
        min-width: auto; /* Reset min-width on mobile */
    }
    
    .form-group .btn-primary {
        width: 100%;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
    
    .capability-card--wide {
        grid-column: span 1;
    }
    
    .capability-content-wide {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .capability-metrics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    .status-badges {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .status-badge {
        width: 100%;
        justify-content: center;
    }
    
    .audience-list {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .audience-separator {
        display: none;
    }
    
    .vision-brackets {
        flex-direction: column;
        align-items: center;
    }
    
    .bracket {
        font-size: 48px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .cookie-banner-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-banner-buttons {
        width: 100%;
    }
    
    .cookie-btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-md: 16px;
        --spacing-lg: 24px;
        --spacing-xl: 32px;
        --spacing-2xl: 48px;
        --spacing-3xl: 64px;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Navbar logo - guaranteed visible on small screens */
    .nav-logo {
        display: flex !important;
        gap: 6px;
    }
    
    .logo-mark {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }
    
    .logo-text {
        display: inline !important;
        font-size: 14px;
    }
    
    .brand-title {
        font-size: 48px;
    }
    
    .hero-tagline {
        font-size: clamp(28px, 9vw, 36px);
        line-height: 1.15;
    }
    
    .hero-subtitle {
        font-size: 15px;
        margin-bottom: var(--spacing-lg);
    }
    
    .section-headline {
        font-size: 20px;
    }
    
    .card {
        padding: var(--spacing-md);
    }
    
    .badge-ring {
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}