/* 
 * Tecxo.io — Responsive Styles
 */

/* Large Tablets (1024px) */
@media (max-width: 1024px) {
    h1 { font-size: 44px; }
    h2 { font-size: 34px; }
    
    .hero-text h1 { font-size: 42px; }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    
    .engagement-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hero-image {
        flex: 0.8;
    }
    
    .service-detail-block {
        gap: 40px;
    }
}

/* Tablets (768px) */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }
    
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    
    .hero-text h1 { font-size: 34px; }
    
    /* Header & Mobile Nav */
    .mobile-toggle {
        display: block;
    }
    
    #header-cta {
        display: none;
    }
    
    .main-nav {
        position: fixed;
        top: 66px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 66px);
        background: var(--white);
        transition: var(--transition-fast);
        overflow-y: auto;
        padding: 24px;
    }
    
    .main-nav.open {
        left: 0;
    }
    
    .main-nav .nav-list {
        flex-direction: column;
        gap: 0;
    }
    
    .nav-link {
        font-size: 18px;
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-link::after {
        display: none;
    }
    
    /* Hamburger Icon */
    .hamburger {
        display: block;
        width: 28px;
        height: 2px;
        background: var(--dark-bg);
        position: relative;
        transition: var(--transition-fast);
    }
    
    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: inherit;
        left: 0;
        transition: var(--transition-fast);
    }
    
    .hamburger::before { top: -8px; }
    .hamburger::after { top: 8px; }
    
    .mobile-toggle[aria-expanded="true"] .hamburger {
        background: transparent;
    }
    
    .mobile-toggle[aria-expanded="true"] .hamburger::before {
        top: 0;
        transform: rotate(45deg);
    }
    
    .mobile-toggle[aria-expanded="true"] .hamburger::after {
        top: 0;
        transform: rotate(-45deg);
    }
    
    /* Hero */
    .hero-section {
        padding: 60px 0;
        text-align: center;
    }
    
    .hero-section::after {
        display: none;
    }
    
    .hero-split {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    /* Sections */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .split-container {
        flex-direction: column;
    }
    
    .niche-grid {
        width: 100%;
    }
    
    .engagement-grid {
        grid-template-columns: 1fr;
    }
    
    .engagement-card {
        min-height: 280px;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .about-split {
        flex-direction: column !important;
        gap: 32px;
        text-align: center;
    }

    .service-detail-block {
        flex-direction: column-reverse !important;
        gap: 32px;
        text-align: center;
    }

    .service-detail-content ul li {
        justify-content: center;
    }
    
    .service-icon-box {
        max-width: 200px;
        aspect-ratio: 1;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-form-wrapper {
        padding: 32px 20px;
    }
    
    .contact-form .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .site-footer {
        padding: 60px 0 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
    }
    
    .page-header {
        padding: 60px 0;
    }
    
    .hero-section.hero-centered h1 {
        font-size: 34px;
    }
}

/* Mobile Phones (480px) */
@media (max-width: 480px) {
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    
    .hero-text h1 { font-size: 28px; }

    
    .niche-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
}