/* ============================================
   Ilmoora - Responsive Styles
   ============================================ */

/* ============================================
   Mobile First Breakpoints
   ============================================ */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* Typography adjustments */
  .hero-title {\n    font-size: var(--text-5xl);\n  }\n  \n  .section-title {\n    font-size: var(--text-4xl);\n  }\n  \n  /* Button layouts */\n  .hero-ctas {\n    flex-direction: row;\n    justify-content: center;\n  }\n  \n  .cta-actions {\n    flex-direction: row;\n    justify-content: center;\n  }\n  \n  /* Grid adjustments */\n  .industries-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  .modules-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  .pricing-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  .footer-links {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n/* Medium devices (tablets, 768px and up) */\n@media (min-width: 768px) {\n  /* Container padding */\n  :root {\n    --container-padding: 2rem;\n  }\n  \n  /* Section spacing */\n  .section {\n    padding: var(--space-32) 0;\n  }\n  \n  /* Hero adjustments */\n  .hero {\n    padding: calc(72px + var(--space-20)) 0 var(--space-20);\n  }\n  \n  .hero-title {\n    font-size: var(--text-6xl);\n  }\n  \n  /* Steps grid */\n  .steps-grid {\n    grid-template-columns: repeat(4, 1fr);\n  }\n  \n  .steps-line {\n    display: block;\n  }\n  \n  /* Bento grid */\n  .bento-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  /* Analytics layout */\n  .analytics-layout {\n    grid-template-columns: 1fr 1.2fr;\n  }\n  \n  /* FAQ layout */\n  .faq-layout {\n    grid-template-columns: 1fr 2fr;\n    align-items: start;\n  }\n  \n  /* Footer */\n  .footer-grid {\n    grid-template-columns: 1fr 2fr;\n  }\n  \n  .footer-bottom {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n  }\n}\n\n/* Large devices (desktops, 992px and up) */\n@media (min-width: 992px) {\n  /* Typography */\n  .hero-title {\n    font-size: var(--text-6xl);\n  }\n  \n  .section-title {\n    font-size: var(--text-5xl);\n  }\n  \n  /* Hero layout */\n  .hero-content {\n    grid-template-columns: 1fr 1.2fr;\n  }\n  \n  .hero-text {\n    text-align: left;\n  }\n  \n  .hero-ctas {\n    justify-content: flex-start;\n  }\n  \n  .hero-trust {\n    justify-content: flex-start;\n  }\n  \n  .hero-visual {\n    display: block;\n  }\n  \n  /* Navigation */\n  .nav-desktop {\n    display: flex;\n  }\n  \n  .mobile-menu-toggle {\n    display: none;\n  }\n  \n  /* Bento grid */\n  .bento-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  \n  .bento-large {\n    grid-row: span 2;\n  }\n  \n  /* Pricing grid */\n  .pricing-grid {\n    grid-template-columns: repeat(4, 1fr);\n  }\n  \n  /* Footer links */\n  .footer-links {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n\n/* Extra large devices (large desktops, 1200px and up) */\n@media (min-width: 1200px) {\n  /* Container padding */\n  :root {\n    --container-padding: 4rem;\n  }\n  \n  /* Typography */\n  .hero-title {\n    font-size: var(--text-7xl);\n  }\n  \n  .section-title {\n    font-size: var(--text-6xl);\n  }\n  \n  /* Hero scroll indicator */\n  .hero-scroll {\n    display: block;\n  }\n}\n\n/* Extra extra large devices (larger desktops, 1400px and up) */\n@media (min-width: 1400px) {\n  .container {\n    max-width: 1440px;\n  }\n}\n\n/* ============================================\n   Mobile Specific Adjustments (< 768px)\n   ============================================ */\n\n@media (max-width: 767px) {\n  /* Typography */\n  .hero-title {\n    font-size: var(--text-4xl);\n  }\n  \n  .section-title {\n    font-size: var(--text-3xl);\n  }\n  \n  .cta-title {\n    font-size: var(--text-3xl);\n  }\n  \n  /* Hero */\n  .hero {\n    padding: calc(72px + var(--space-12)) 0 var(--space-12);\n  }\n  \n  .hero-visual {\n    display: none;\n  }\n  \n  /* Steps */\n  .steps-grid {\n    gap: var(--space-6);\n  }\n  \n  .step-card {\n    text-align: left;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-4);\n  }\n  \n  .step-icon-wrap {\n    margin: 0;\n    flex-shrink: 0;\n  }\n  \n  .step-content {\n    flex: 1;\n  }\n  \n  /* Industries */\n  .industries-grid {\n    gap: var(--space-4);\n  }\n  \n  .industry-card {\n    flex-direction: row;\n    align-items: center;\n  }\n  \n  .industry-image {\n    width: 120px;\n    flex-shrink: 0;\n    aspect-ratio: 1;\n  }\n  \n  .industry-content {\n    flex: 1;\n  }\n  \n  /* Bento grid */\n  .bento-grid {\n    gap: var(--space-3);\n  }\n  \n  .bento-card {\n    padding: var(--space-4);\n  }\n  \n  /* Analytics */\n  .analytics-kpis {\n    grid-template-columns: 1fr;\n  }\n  \n  /* Testimonials */\n  .testimonial-card {\n    padding: var(--space-6);\n  }\n  \n  .quote-text {\n    font-size: var(--text-lg);\n  }\n  \n  /* Pricing */\n  .pricing-card {\n    padding: var(--space-5);\n  }\n  \n  .pricing-popular {\n    transform: none;\n  }\n  \n  .pricing-popular:hover {\n    transform: translateY(-4px);\n  }\n  \n  /* FAQ */\n  .faq-header {\n    position: static;\n  }\n  \n  /* Footer */\n  .footer-grid {\n    gap: var(--space-8);\n  }\n  \n  .footer-brand {\n    text-align: center;\n    max-width: none;\n  }\n  \n  .footer-social {\n    justify-content: center;\n  }\n  \n  .footer-links {\n    gap: var(--space-6);\n  }\n  \n  .footer-column {\n    text-align: center;\n  }\n}\n\n/* ============================================\n   Small Mobile Adjustments (< 480px)\n   ============================================ */\n\n@media (max-width: 479px) {\n  /* Typography */\n  .hero-title {\n    font-size: var(--text-3xl);\n  }\n  \n  .section-title {\n    font-size: var(--text-2xl);\n  }\n  \n  /* Buttons */\n  .btn-large {\n    padding: var(--space-3) var(--space-5);\n    font-size: var(--text-sm);\n  }\n  \n  /* Trust items */\n  .hero-trust {\n    flex-direction: column;\n    align-items: center;\n  }\n  \n  /* Industry cards */\n  .industry-card {\n    flex-direction: column;\n  }\n  \n  .industry-image {\n    width: 100%;\n    aspect-ratio: 16/9;\n  }\n  \n  .industry-content {\n    text-align: center;\n  }\n  \n  /* Pricing */\n  .pricing-features li {\n    font-size: var(--text-xs);\n  }\n  \n  /* Footer */\n  .footer-legal {\n    flex-direction: column;\n    gap: var(--space-2);\n    text-align: center;\n  }\n}\n\n/* ============================================\n   Tablet Specific (768px - 991px)\n   ============================================ */\n\n@media (min-width: 768px) and (max-width: 991px) {\n  /* Hero */\n  .hero-content {\n    grid-template-columns: 1fr;\n    text-align: center;\n  }\n  \n  .hero-text {\n    text-align: center;\n  }\n  \n  .hero-ctas {\n    justify-content: center;\n  }\n  \n  .hero-trust {\n    justify-content: center;\n  }\n  \n  .hero-visual {\n    display: none;\n  }\n  \n  /* Pricing */\n  .pricing-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  .pricing-popular {\n    grid-column: span 2;\n    max-width: 400px;\n    margin: 0 auto;\n  }\n}\n\n/* ============================================\n   Landscape Mobile\n   ============================================ */\n\n@media (max-height: 500px) and (orientation: landscape) {\n  .hero {\n    min-height: auto;\n    padding: calc(72px + var(--space-8)) 0 var(--space-8);\n  }\n  \n  .hero-title {\n    font-size: var(--text-3xl);\n  }\n  \n  .hero-scroll {\n    display: none;\n  }\n}\n\n/* ============================================\n   High DPI / Retina Displays\n   ============================================ */\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  /* Sharper text rendering */\n  body {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  /* Hide interactive elements */\n  .header,\n  .mobile-menu,\n  .hero-visual,\n  .hero-scroll,\n  .gradient-orb,\n  .testimonials-nav,\n  .pricing-toggle,\n  .footer-social,\n  .btn {\n    display: none !important;\n  }\n  \n  /* Reset colors for print */\n  body {\n    color: black !important;\n    background: white !important;\n  }\n  \n  .hero {\n    background: white !important;\n    min-height: auto;\n    padding: 2rem 0;\n  }\n  \n  .hero-title,\n  .section-title,\n  h1, h2, h3, h4, h5, h6 {\n    color: black !important;\n  }\n  \n  .hero-subtitle,\n  .section-subtitle,\n  p {\n    color: #333 !important;\n  }\n  \n  /* Ensure links are visible */\n  a {\n    color: #000 !important;\n    text-decoration: underline;\n  }\n  \n  a::after {\n    content: \" (\" attr(href) \")\";\n    font-size: 0.8em;\n  }\n  \n  /* Page breaks */\n  .section {\n    page-break-inside: avoid;\n    padding: 1rem 0;\n  }\n  \n  /* Show all cards */\n  .reveal,\n  .reveal-delay-1,\n  .reveal-delay-2,\n  .reveal-delay-3,\n  .reveal-delay-4 {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n\n/* ============================================\n   Dark Mode Media Query (System Preference)\n   ============================================ */\n\n@media (prefers-color-scheme: dark) {\n  /* Only apply if no manual theme is set */\n  html:not(.light):not(.dark) {\n    --glass-bg: var(--glass-bg-dark);\n    --glass-border: var(--glass-border-dark);\n    --glass-shadow: var(--glass-shadow-dark);\n  }\n}\n\n/* ============================================\n   Reduced Motion Preferences\n   ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n  \n  .hero-panel,\n  .gradient-orb,\n  .panel-float {\n    animation: none;\n  }\n  \n  .reveal,\n  .reveal-delay-1,\n  .reveal-delay-2,\n  .reveal-delay-3,\n  .reveal-delay-4 {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n}\n\n/* ============================================\n   Focus Visible (Keyboard Navigation)\n   ============================================ */\n\n@media (hover: none) and (pointer: coarse) {\n  /* Touch device optimizations */\n  .btn:hover {\n    transform: none;\n  }\n  \n  .card-glass:hover,\n  .industry-card:hover,\n  .bento-card:hover,\n  .module-card:hover {\n    transform: none;\n  }\n  \n  /* Larger touch targets */\n  .nav-link,\n  .mobile-nav-link,\n  .btn {\n    min-height: 44px;\n  }\n  \n  .faq-question {\n    padding: var(--space-5);\n  }\n}\n\n/* ============================================\n   Safe Area Insets (Notch Devices)\n   ============================================ */\n\n@supports (padding: max(0px)) {\n  .header-inner {\n    padding-left: max(var(--container-padding), env(safe-area-inset-left));\n    padding-right: max(var(--container-padding), env(safe-area-inset-right));\n  }\n  \n  .container {\n    padding-left: max(var(--container-padding), env(safe-area-inset-left));\n    padding-right: max(var(--container-padding), env(safe-area-inset-right));\n  }\n}\n