/* -------------------------------------------------------------
   RESPONSIVE.CSS — KashAndaz Landing Website
   Adaptive media queries for laptops, tablets, mobile, and ultra-wide.
   ------------------------------------------------------------- */

/* --- ULTRA-WIDE MONITOR SCALE --- */
@media (min-width: 1800px) {
    .container {
        max-width: 1600px;
    }
    
    .hero-title {
        font-size: 5.5rem;
    }
    
    body {
        font-size: 18px;
    }
}

/* --- LAPTOP STYLES (Max 1200px) --- */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.75rem;
    }
    
    .timeline-card {
        width: 42%;
    }
}

/* --- TABLET STYLES (Max 992px) --- */
@media (max-width: 992px) {
    :root {
        --space-5xl: 80px;
        --space-4xl: 60px;
        --space-3xl: 48px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-3xl);
    }

    .hero-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-mockup-wrapper {
        margin-top: var(--space-xl);
    }
    
    .floating-card-1 {
        left: -15%;
    }
    
    .floating-card-2 {
        right: -10%;
    }

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

    .why-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }
}

/* --- SMALL TABLET & MOBILE LANDSCAPE (Max 768px) --- */
@media (max-width: 768px) {
    .section-title {
        font-size: 2.2rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(3, 7, 18, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        gap: var(--space-2xl);
        z-index: 100;
        transform: translateY(-150%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        border-top: 1px solid var(--glass-border);
    }

    .nav-menu.mobile-active {
        transform: translateY(0);
    }

    .hamburger {
        display: flex;
    }

    /* Transform burger lines when menu active */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Timeline Switch to 1-Column layout (Left-aligned) */
    .timeline-line {
        left: 20px;
        transform: none;
    }

    .timeline-line-fill {
        left: 20px;
        transform: none;
    }

    .timeline-dot {
        left: 20px;
        transform: translateY(-50%);
    }

    .timeline-item {
        justify-content: flex-start;
        margin-bottom: var(--space-2xl);
    }

    .timeline-item:nth-child(even) {
        justify-content: flex-start;
    }

    .timeline-card {
        width: calc(100% - 50px);
        margin-left: 50px;
    }

    .timeline-item:nth-child(even) .timeline-card {
        text-align: left;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .slider-wrapper {
        width: 250px;
        height: 500px;
    }
    
    .slide-item.prev {
        transform: scale(0.8) translateX(-90%) rotateY(10deg);
    }
    
    .slide-item.next {
        transform: scale(0.8) translateX(90%) rotateY(-10deg);
    }

    .cta-title {
        font-size: 2.25rem;
    }
}

/* --- MOBILE PORTRAIT (Max 480px) --- */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-lg);
    }

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

    .hero-description {
        font-size: 1.05rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .floating-glass-card {
        display: none; /* Hide floating widgets on small mobile to avoid overlays */
    }

    .hero-mockup-container {
        width: 260px;
        height: 520px;
    }
    
    .slider-wrapper {
        width: 200px;
        height: 400px;
    }
    
    .slide-item.prev {
        transform: scale(0.75) translateX(-80%);
        opacity: 0.3;
    }
    
    .slide-item.next {
        transform: scale(0.75) translateX(80%);
        opacity: 0.3;
    }

    .upi-glass-card {
        height: 180px;
        padding: var(--space-lg);
    }

    .card-number {
        font-size: 1.15rem;
        margin-bottom: var(--space-sm);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
    
    .legal-content {
        padding: var(--space-xl);
    }
}