/* ========================================
   RESPONSIVE STYLES
   Springs AI Solutions
   ======================================== */

/* Large Desktop */
@media (min-width: 1400px) {
    :root {
        --container-max: 1320px;
    }
}

/* Desktop */
@media (max-width: 1200px) {
    :root {
        --container-max: 960px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --spacing-20: 4rem;
        --spacing-16: 3rem;
    }

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

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

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

/* Small Tablet / Large Mobile */
@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
        --spacing-20: 3rem;
        --spacing-16: 2.5rem;
        --spacing-12: 2rem;
    }

    /* Typography adjustments */
    body {
        font-size: var(--text-sm);
    }

    h1, .hero-title {
        font-size: var(--text-3xl);
    }

    h2, .section-title, .page-title {
        font-size: var(--text-2xl);
    }

    h3 {
        font-size: var(--text-xl);
    }

    /* Navigation */
    .nav-container {
        padding: 0 var(--spacing-4);
    }

    /* Hero */
    .hero {
        padding-top: calc(var(--nav-height) + var(--spacing-8));
        padding-bottom: var(--spacing-12);
    }

    .hero-subtitle {
        font-size: var(--text-base);
    }

    .hero-cta {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Sections */
    .demo-section,
    .services-preview,
    .about-section,
    .services-section,
    .contact-section,
    .faq-section {
        padding: var(--spacing-12) var(--spacing-4);
    }

    /* Proof Metrics */
    .proof-metrics {
        flex-direction: column;
        gap: var(--spacing-6);
    }

    .metric-value {
        font-size: var(--text-3xl);
    }

    /* Cards */
    .services-grid,
    .beliefs-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* Service Cards */
    .service-card {
        padding: var(--spacing-6);
    }

    /* Contact */
    .contact-container {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer {
        padding: var(--spacing-10) 0 var(--spacing-6);
    }

    .footer-nav {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-container {
        padding: 0 var(--spacing-4);
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --spacing-8: 1.5rem;
        --spacing-6: 1rem;
    }

    /* Navigation */
    .logo-text {
        font-size: var(--text-lg);
    }

    /* Hero */
    .hero-title {
        font-size: var(--text-2xl);
    }

    .hero-hint {
        font-size: var(--text-xs);
        padding: var(--spacing-2) var(--spacing-3);
    }

    /* Cards */
    .service-card,
    .belief-card,
    .pricing-card,
    .faq-item,
    .contact-option {
        padding: var(--spacing-5);
    }

    .card-icon,
    .option-icon {
        font-size: var(--text-2xl);
    }

    /* Buttons */
    .btn {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--text-xs);
    }

    .btn-large {
        padding: var(--spacing-3) var(--spacing-5);
        font-size: var(--text-sm);
    }

    /* Chat Widget */
    .chat-widget {
        bottom: var(--spacing-3);
        right: var(--spacing-3);
    }

    .chat-widget-toggle {
        width: 50px;
        height: 50px;
    }

    .chat-widget-panel {
        left: var(--spacing-3);
        right: var(--spacing-3);
        bottom: 60px;
        height: 70vh;
    }
}

/* Small Mobile */
@media (max-width: 375px) {
    .hero-title {
        font-size: calc(var(--text-2xl) * 0.9);
    }

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

    .pricing-card .price-amount {
        font-size: var(--text-2xl);
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--spacing-4));
        padding-bottom: var(--spacing-4);
    }

    .hero-cta {
        flex-direction: row;
    }

    .chat-widget-panel {
        height: 85vh;
    }
}

/* High DPI / Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders for high DPI */
    .service-card,
    .pricing-card,
    .belief-card,
    .nav {
        border-width: 0.5px;
    }
}

/* ========================================
   ANIMATION STATES FOR SCROLL
   ======================================== */

/* Elements that animate on scroll */
.service-card,
.belief-card,
.pricing-card,
.faq-item,
.service-block,
.about-section .section-container {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.service-card.animate-in,
.belief-card.animate-in,
.pricing-card.animate-in,
.faq-item.animate-in,
.service-block.animate-in,
.about-section .section-container.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for grids */
.services-grid .service-card:nth-child(2),
.beliefs-grid .belief-card:nth-child(2),
.pricing-grid .pricing-card:nth-child(2),
.faq-grid .faq-item:nth-child(2) {
    transition-delay: 0.1s;
}

.services-grid .service-card:nth-child(3),
.beliefs-grid .belief-card:nth-child(3),
.pricing-grid .pricing-card:nth-child(3),
.faq-grid .faq-item:nth-child(3) {
    transition-delay: 0.2s;
}

.faq-grid .faq-item:nth-child(4) {
    transition-delay: 0.1s;
}

.faq-grid .faq-item:nth-child(5) {
    transition-delay: 0.2s;
}

.faq-grid .faq-item:nth-child(6) {
    transition-delay: 0.3s;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .service-card,
    .belief-card,
    .pricing-card,
    .faq-item,
    .service-block,
    .about-section .section-container {
        opacity: 1;
        transform: none;
    }

    .chat-widget-toggle::before {
        animation: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --color-border: rgba(0, 255, 255, 0.8);
        --color-text-secondary: #ffffff;
        --color-text-tertiary: #cccccc;
    }

    .btn-primary {
        border: 2px solid var(--color-bg-void);
    }
}

/* Focus Visible */
:focus-visible {
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
}

.btn:focus-visible,
.nav-link:focus-visible,
.chat-widget-toggle:focus-visible {
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary-400);
    color: var(--color-bg-deep);
    padding: var(--spacing-2) var(--spacing-4);
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}