/* ==========================================================================
   QRToPrint - Landing Page Architecture Stylesheet
   ========================================================================== */

/* Typography Custom Tokens */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-display {
    font-family: 'Space Grotesk', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Tactical Neo-Brutalist Shadow Tokens */
.shadow-cube-sm {
    box-shadow: 2px 2px 0px 0px #0f172a;
}

.shadow-cube {
    box-shadow: 4px 4px 0px 0px #0f172a;
}

.shadow-cube-lg {
    box-shadow: 6px 6px 0px 0px #0f172a;
}

.shadow-cube-xl {
    box-shadow: 8px 8px 0px 0px #0f172a;
}

.shadow-cube-indigo {
    box-shadow: 4px 4px 0px 0px #4f46e5;
}

.shadow-cube-emerald {
    box-shadow: 4px 4px 0px 0px #059669;
}

/* Tactile Button Feedback */
.btn-tactile {
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-tactile:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px 0px #0f172a;
}

.btn-tactile:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px 0px #0f172a;
}

/* Subtle Geometric Dot Grid */
.bg-dot-grid {
    background-size: 24px 24px;
    background-image: radial-gradient(circle, #cbd5e1 1.2px, transparent 1.2px);
}

/* Smooth FAQ Accordion */
.faq-item .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    opacity: 1;
    padding-top: 0.75rem;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Continuous Hardware Marquee - True Gapless Infinite Scroll */
@keyframes marquee-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

.marquee-wrapper {
    display: flex;
    width: max-content;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-right: 1.5rem;
    flex-shrink: 0;
    will-change: transform;
    animation: marquee-scroll 35s linear infinite;
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

/* Responsive Navigation Controls */
@media (min-width: 1024px) {
    #mobile-menu-btn {
        display: none !important;
    }
    #mobile-menu {
        display: none !important;
    }
    #desktop-nav {
        display: flex !important;
        align-items: center;
        gap: 1.15rem;
    }
}

@media (min-width: 1280px) {
    #desktop-nav {
        gap: 1.5rem;
    }
}

@media (min-width: 1440px) {
    #desktop-nav {
        gap: 1.75rem;
    }
}

#desktop-nav a {
    white-space: nowrap !important;
}

.desktop-actions a {
    white-space: nowrap !important;
}

@media (max-width: 1023px) {
    #mobile-menu-btn {
        display: flex !important;
    }
    #desktop-nav {
        display: none !important;
    }
}

@media (max-width: 639px) {
    .desktop-actions {
        display: none !important;
    }
}

/* Legal Modal Dialog Styling */
#legal-modal.hidden {
    display: none !important;
}

#legal-modal:not(.hidden) {
    display: flex !important;
}

.legal-tab-btn.active {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

.legal-tab-content {
    display: none;
}

.legal-tab-content.active {
    display: block;
}

/* Modal Print Styles */
@media print {
    body > *:not(#legal-modal) {
        display: none !important;
    }
    #legal-modal {
        position: static !important;
        background: #ffffff !important;
        padding: 0 !important;
        display: block !important;
    }
    #legal-modal-card {
        border: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
    }
    .no-print {
        display: none !important;
    }
}

/* 3D Perspective Tilt Card Effects */
.tilt-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.15s ease;
    will-change: transform;
}

.tilt-3d:hover {
    box-shadow: 8px 8px 0px 0px #0f172a;
}

/* Active Spooler Laser Animation */
@keyframes laser-sweep {
    0% { transform: translateY(0%); opacity: 0.3; }
    50% { transform: translateY(120px); opacity: 0.95; }
    100% { transform: translateY(0%); opacity: 0.3; }
}

.animate-laser {
    animation: laser-sweep 1.2s ease-in-out infinite;
}

/* ==========================================================================
   Structural Layout & Anti-Glitch Fallback Rules
   ========================================================================== */

/* 1. Bulletproof Sticky Navbar - Always Solid White & Layered on Top */
header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-bottom: 2px solid #0f172a !important;
}

/* 2. Container Maximum Width Enforcement */
.max-w-7xl {
    max-width: 80rem !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Anti-Squish Footer Responsive Multi-Column Grid */
.footer-columns-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .footer-columns-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .footer-columns-grid {
        grid-template-columns: 4fr 2fr 2fr 2fr 2fr !important;
        gap: 2rem !important;
    }
}

/* 4. Hardware 3D Ecosystem Grid & Anti-Squish Rules */
.hardware-ecosystem-card {
    width: 100% !important;
    display: block !important;
}

.hardware-ecosystem-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    .hardware-ecosystem-grid {
        grid-template-columns: 7fr 5fr !important;
    }
}

.hardware-ecosystem-text {
    min-width: 0 !important;
    word-break: normal !important;
}

/* 5. Pricing Guarantee Banner - Clean Separation & No Overlap */
.pricing-guarantee-wrapper {
    margin-top: 3.5rem !important;
    padding-top: 1.5rem !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
    text-align: center !important;
}

/* 6. Utility Grid Column Fallbacks */
.w-full {
    width: 100% !important;
}

@media (min-width: 1024px) {
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4 !important;
    }
    .lg\:col-span-5 {
        grid-column: span 5 / span 5 !important;
    }
    .lg\:col-span-6 {
        grid-column: span 6 / span 6 !important;
    }
    .lg\:col-span-7 {
        grid-column: span 7 / span 7 !important;
    }
    .lg\:col-span-12 {
        grid-column: span 12 / span 12 !important;
    }
}

/* 7. Dual-Track Auto-Scrolling Testimonials */
@keyframes testimonial-scroll-left {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes testimonial-scroll-right {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

.testimonials-marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

.testimonials-marquee-wrapper {
    display: flex;
    width: max-content;
}

.testimonials-track-left {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    padding-right: 1.5rem;
    flex-shrink: 0;
    will-change: transform;
    animation: testimonial-scroll-left 52s linear infinite;
}

.testimonials-track-right {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    padding-right: 1.5rem;
    flex-shrink: 0;
    will-change: transform;
    animation: testimonial-scroll-right 52s linear infinite;
}

.testimonials-marquee-container:hover .testimonials-track-left,
.testimonials-marquee-container:hover .testimonials-track-right {
    animation-play-state: paused;
}