/* Responsive Styles for QuantVault */

/* Tablet Styles */
@media (max-width: 968px) {
    .nav-menu {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(15, 20, 25, 0.98);
        flex-direction: column;
        padding: 30px;
        gap: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .mobile-toggle {
        display: flex;
    }
    
    .mobile-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    .hero-headline {
        font-size: 48px !important;
    }
    
    .problem-grid {
        grid-template-columns: 1fr;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .case-study-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item,
    .timeline-item:nth-child(even) {
        flex-direction: row;
    }
    
    .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px;
    }
    
    .timeline-dot {
        left: 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .founder-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .drops-grid {
        grid-template-columns: 1fr;
    }
    
    /* Demo section responsive */
    .demo-showcase-section .section-container > div:last-child > div:last-of-type {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Styles */
@media (max-width: 640px) {
    .nav-container {
        padding: 18px 20px;
    }
    
    .brand-type {
        font-size: 22px;
    }
    
    .brand-mark {
        width: 32px;
        height: 32px;
    }
    
    .hero {
        padding: 120px 20px 80px;
    }
    
    .hero-headline {
        font-size: 36px !important;
        letter-spacing: -1px;
        line-height: 1.2 !important;
    }
    
    .hero-description {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
    
    .hero-badge {
        font-size: 11px !important;
        padding: 6px 14px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 25px;
    }
    
    .stat-item {
        border-left: none;
        border-top: 2px solid rgba(94, 179, 214, 0.3);
        padding-left: 0;
        padding-top: 20px;
    }
    
    .stat-item:first-child {
        border-top: none;
        padding-top: 0;
    }
    
    .stat-value {
        font-size: 28px !important;
    }
    
    .stat-label {
        font-size: 13px !important;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-description {
        font-size: 18px;
    }
    
    .problem-section,
    .solution-section,
    .products-section,
    .process-section,
    .testimonials-section,
    .case-study-section,
    .drops-section,
    .cta-section,
    .demo-showcase-section {
        padding: 80px 20px;
    }
    
    .problem-card {
        padding: 30px 25px;
    }
    
    .problem-number {
        font-size: 36px;
    }
    
    .problem-title {
        font-size: 20px;
    }
    
    .approach-card {
        padding: 35px 25px;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .product-card {
        padding: 30px;
    }
    
    .product-card.featured {
        transform: scale(1);
    }
    
    .product-tabs {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial {
        padding: 30px;
    }
    
    .timeline-content {
        padding: 25px;
    }
    
    .contact-container {
        padding: 0 20px;
    }
    
    .footer-content {
        gap: 40px;
    }
    
    .footer-column {
        text-align: left;
    }
    
    .cta-title {
        font-size: 32px;
    }
    
    .cta-subtitle {
        font-size: 18px;
    }
    
    /* Founder section specific */
    .founder-photo {
        width: 100px;
        height: 100px;
    }
    
    /* Monthly drops specific */
    .drops-title {
        font-size: 32px;
    }
    
    .drops-subtitle {
        font-size: 18px;
    }
    
    .drop-item {
        padding: 25px 20px;
    }
    
    /* Countdown responsive */
    .countdown {
        gap: 15px;
    }
    
    .countdown-value {
        font-size: 24px;
    }
    
    .countdown-label {
        font-size: 10px;
    }
    
    /* Demo section responsive */
    .demo-showcase-section .section-container > div:last-child > div:last-of-type {
        grid-template-columns: 1fr;
    }
    
    /* Demo terminal window */
    .demo-showcase-section div[style*="height: 500px"] {
        height: 350px !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-headline {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    .hero-description {
        font-size: 16px !important;
    }
    
    .hero-badge {
        font-size: 10px !important;
        padding: 5px 12px;
    }
    
    .stat-value {
        font-size: 24px !important;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .product-price {
        font-size: 36px;
    }
    
    .btn {
        padding: 14px 28px;
        font-size: 15px;
    }
    
    .product-tabs {
        gap: 10px;
    }
    
    .tab-button {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Demo metrics cards */
    .demo-showcase-section .section-container > div:last-child > div:last-of-type {
        gap: 15px;
    }
    
    .demo-showcase-section .section-container > div:last-child > div:last-of-type > div {
        padding: 20px 15px;
    }
    
    .demo-showcase-section .section-container > div:last-child > div:last-of-type > div > div:first-child {
        font-size: 28px !important;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 100px 40px 60px;
    }
    
    .hero-headline {
        font-size: 38px !important;
    }
    
    .coming-soon-container {
        padding: 20px;
    }
    
    .coming-soon-title {
        font-size: 32px;
    }
    
    .countdown {
        margin-top: 15px;
    }
    
    .countdown-value {
        font-size: 24px;
    }
}

/* High Resolution Displays */
@media (min-width: 1920px) {
    .section-container,
    .hero-container,
    .nav-container {
        max-width: 1600px;
    }
    
    .hero-headline {
        font-size: 84px;
    }
    
    .section-title {
        font-size: 56px;
    }
}

/* Print Styles */
@media print {
    .navigation,
    .particles,
    .hero-actions,
    .form-submit,
    .drops-section,
    .cta-section {
        display: none;
    }
    
    body {
        color: black;
        background: white;
    }
    
    .hero,
    .problem-section,
    .solution-section,
    .products-section {
        background: white;
        color: black;
        padding: 40px 20px;
    }
    
    .section-title,
    .hero-headline {
        color: black;
    }
    
    .problem-card,
    .approach-card,
    .product-card {
        border: 1px solid #ddd;
        background: white;
    }
}

/* Ensure text doesn't get auto-shrunk on iOS */
@media (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%;
    }
}