@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 80px;
        text-align: center;
    }
    .hero-cta-group {
        justify-content: center;
    }
    .bo-1 { left: 0; }
    .bo-3 { right: 0; }
    
    .grid-4-col { grid-template-columns: repeat(2, 1fr); }
    .grid-3-col { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.8rem;
    }
    .site-header {
        padding: 16px 0;
        background: rgba(255, 255, 255, 0.95);
    }
    .mobile-nav-toggle {
        display: block;
    }
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid #E2E8F0;
        padding: 24px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.05);
        display: none;
        flex-direction: column;
        gap: 20px;
    }
    .main-navigation.active-mobile-menu {
        display: flex;
    }
    .nav-links {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    .nav-cta {
        width: 100%;
    }
    .grid-4-col, .grid-3-col, .grid-2-col {
        grid-template-columns: 1fr;
    }
    .section-padding {
        padding: 60px 0;
    }
    .badge-overlay {
        position: static;
        margin: 10px auto;
        width: max-content;
    }
    .premium-frame {
        padding: 6px;
    }
    .floating-actions {
        bottom: 20px;
        right: 20px;
    }
    .float-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}