/* Responsive Design */

/* Large Tablets and Small Desktops */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-4);
    }

    .hero-content {
        gap: var(--space-12);
        min-height: 500px;
    }

    .screenshot-slider {
        max-width: 450px;
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .platform-title {
        font-size: var(--font-size-2xl);
    }

    .download-title {
        font-size: var(--font-size-2xl);
    }
}

/* Tablets */
@media (max-width: 768px) {

    /* Header adjustments */
    .header {
        padding: var(--space-4) 0;
    }

    /* Navbar height fix for mobile */
    .section-anchor::before {
        height: 140px;
        margin-top: -140px;
    }

    .header-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: left;
    }

    .header-brand {
        order: 1;
        flex-direction: column;
    }

    .header-cta {
        order: 2;
    }

    .brand-logo {
        flex-direction: row;
        gap: var(--space-2);
    }

    .header-logo-img {
        width: 40px;
        height: 40px;
    }

    .header-brand-title {
        font-size: var(--font-size-xl);
    }

    .header-tagline {
        font-size: var(--font-size-xs);
        text-align: left;
    }

    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-xs);
    }

    /* Hero adjustments */
    .hero {
        padding: var(--space-16) 0;
    }

    .hero .container {
        padding: 0 var(--space-4);
    }

    /* Hero content - stack vertically */
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: left;
    }

    .platform-info {
        order: 1;
        padding: var(--space-6);
        max-width: none;
    }

    .platform-visual {
        order: 2;
        display: none;
        /* Hide feature showcase on mobile */
    }

    .platform-features {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    /* Feature Showcase mobile adjustments */
    .feature-showcase {
        max-width: 100%;
    }

    .feature-tabs {
        padding: var(--space-1);
        gap: var(--space-1);
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .feature-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
        min-width: auto;
        flex-shrink: 0;
    }

    .tab-text {
        font-weight: 600;
    }

    .feature-description {
        padding: var(--space-4);
        min-height: 100px;
    }

    .description-content h3 {
        font-size: var(--font-size-base);
    }

    .description-content p {
        font-size: var(--font-size-xs);
    }

    /* Mobile apps - stack vertically */
    .app-showcase {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: left;
    }

    .app-showcase.reverse {
        grid-template-columns: 1fr;
    }

    .app-visual.left,
    .app-visual.right {
        justify-content: center;
        order: 1;
    }

    .app-content.left,
    .app-content.right {
        text-align: left;
        order: 2;
    }

    .app-buttons {
        justify-content: flex-start;
        flex-direction: row;
    }

    .app-mockup {
        width: 200px;
        max-height: 350px;
    }

    /* Reduce section padding */
    .mobile-apps {
        padding: var(--space-16) 0;
    }

    /* Footer links stack */
    .footer-links {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-3);
    }

    /* Header mobile */
    .header {
        padding: var(--space-3) 0;
    }

    /* Navbar height fix for mobile phones */
    .section-anchor::before {
        height: 120px;
        margin-top: -120px;
    }

    .header-brand {
        flex-direction: column;
    }

    .brand-logo {
        flex-direction: row;
        gap: var(--space-2);
    }

    .header-logo-img {
        width: 35px;
        height: 35px;
    }

    .header-brand-title {
        font-size: var(--font-size-lg);
        line-height: 1.2;
    }

    .header-tagline {
        font-size: var(--font-size-xs);
        text-align: left;
    }

    /* Hero mobile */
    .hero {
        padding: var(--space-32) 0;
    }

    .hero .container {
        padding: 0 var(--space-3);
    }

    /* Hero content mobile */
    .hero-content {
        gap: var(--space-6);
        text-align: left;
    }

    .platform-visual {
        display: none;
        /* Keep hidden on mobile phones */
    }

    /* Feature Showcase mobile */
    .feature-showcase {
        border-radius: var(--radius-lg);
    }

    .tab-btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .feature-description {
        padding: var(--space-3);
        min-height: 80px;
    }

    .description-content h3 {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-1);
    }

    .description-content p {
        font-size: 0.7rem;
        line-height: 1.4;
    }

    .platform-title {
        font-size: var(--font-size-xl);
    }

    .platform-description {
        font-size: var(--font-size-base);
    }

    .btn-large {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-sm);
        width: 100%;
    }

    /* App showcase mobile */
    .app-showcase {
        padding: var(--space-6);
        margin: 0;
        text-align: left;
    }

    .app-mockup {
        width: 150px;
        max-height: 280px;
    }

    .app-title {
        font-size: var(--font-size-2xl);
    }

    .app-description {
        font-size: var(--font-size-base);
    }

    .app-features li {
        font-size: var(--font-size-sm);
    }

    .app-buttons {
        flex-direction: column;
        gap: var(--space-3);
        justify-content: flex-start;
        align-items: flex-start;
    }

    .store-badge {
        height: 40px;
    }



    /* Footer mobile */
    .footer-links {
        flex-direction: column;
        gap: var(--space-3);
    }

    /* Reduce all section padding on mobile */
    .mobile-apps {
        padding: var(--space-12) 0;
    }

    .footer {
        padding: var(--space-8) 0 var(--space-6) 0;
    }

    /* Legal pages mobile */
    .legal-content {
        padding: var(--space-12) 0;
    }

    .legal-wrapper {
        margin: 0 var(--space-3);
        border-radius: var(--radius-lg);
    }

    .legal-header {
        padding: var(--space-6) var(--space-4);
    }

    .legal-title {
        font-size: var(--font-size-xl);
    }

    .legal-subtitle {
        font-size: var(--font-size-sm);
    }

    .legal-body {
        padding: var(--space-4) var(--space-4);
    }

    .section-title {
        font-size: var(--font-size-lg);
    }

    .section-text {
        font-size: var(--font-size-xs);
    }

    .legal-list li {
        padding-left: var(--space-5);
        font-size: var(--font-size-xs);
    }

    .legal-footer {
        padding: var(--space-4) var(--space-4);
    }
}

/* Very Small Phones */
@media (max-width: 320px) {
    .container {
        padding: 0 var(--space-2);
    }

    .hero-title {
        font-size: var(--font-size-xl);
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: center;
        min-height: auto;
    }

    .platform-title {
        font-size: 2.5rem;
    }

    .platform-features {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .screenshot-slider {
        max-width: 400px;
    }

    .app-card {
        padding: var(--space-4);
    }

    .platform-features,
    .app-features {
        font-size: var(--font-size-xs);
    }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        padding: var(--space-28) 0 var(--space-12) 0;
    }

    .mobile-apps {
        padding: var(--space-8) 0;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .logo-img,
    .app-image,
    .platform-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}