/* Mobile-optimized styles - minimal critical CSS only */
@media (max-width: 768px) { 
    .section-spacer { padding: 2rem 0; }
    .h-80, .h-72 { height: 50vw !important; min-height: 200px !important; max-height: 280px !important; }
    .max-w-7xl, .max-w-6xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-md { max-width: 100vw !important; padding-left: 1rem !important; padding-right: 1rem !important; }
    .rounded-xl { border-radius: 1rem !important; }
    .px-4, .px-6, .px-8, .px-10, .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-4, .py-6, .py-8, .py-10, .py-12, .py-14, .py-20, .py-24 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .text-4xl, .text-5xl, .text-6xl { font-size: 2.25rem !important; line-height: 1.2 !important; }
    .text-3xl { font-size: 1.75rem !important; line-height: 1.3 !important; }
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4, .lg\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-4 { grid-template-columns: 1fr !important; }
    .flex-row, .md\:flex-row, .lg\:flex-row { flex-direction: column !important; }
    .gap-8, .gap-10, .gap-12, .gap-16 { gap: 1.5rem !important; }
    .mx-auto, .mx-4, .mx-6, .mx-8, .mx-10, .mx-12 { margin-left: auto !important; margin-right: auto !important; }
    .w-full, .w-96, .w-80, .w-72, .w-64, .w-56, .w-48, .w-40, .w-32 { width: 100% !important; }
    .h-14, .h-12, .h-10, .h-8, .h-6, .h-4 { height: 2.5rem !important; }
    .text-lg, .text-xl, .text-2xl { font-size: 1.125rem !important; line-height: 1.4 !important; }
    nav .container { flex-direction: row; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; }
    nav .hidden.md\:flex.flex-1 { display: none !important; }
    nav .flex-shrink-0.hidden.md\:flex.items-center { display: none !important; }
    nav { padding: 0.75rem 1rem; background: rgba(24, 25, 26, 0.95); backdrop-filter: blur(10px); }
    nav .container { min-height: 48px; }
    .mobile-menu { padding: 2rem 1rem; background: rgba(0, 0, 0, 0.98); }
    .mobile-menu a { font-size: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100%; text-align: center; }
    .section-header { font-size: 1.75rem; margin-bottom: 1rem; padding: 0 1rem; }
    .section-underline { width: 3rem; height: 3px; margin-bottom: 1.5rem; }
    #gallery-carousel { height: 60vw; min-height: 220px; padding: 0.5rem; }
    #gallery-carousel img { height: 60vw; min-height: 220px; max-width: 90vw; margin: 0 0.5rem; }
    #contact .grid { gap: 2rem; padding: 0 1rem; }
    #contact iframe { height: 180px; border-radius: 1rem; }
    footer { padding: 2rem 1rem; }
    footer .grid { gap: 2rem; }
    .sales-funnel-cta { font-size: 1rem; padding: 0.75rem 1.5rem; width: 90%; max-width: 320px; margin: 0 auto; }
    .mobile-phone-btn { font-size: 1rem; padding: 0.6rem 1rem; width: 90%; max-width: 280px; }
    .sales-funnel-cta, .cta-nav { font-size: 0.95rem !important; padding: 0.55rem 1.1rem !important; border-radius: 1.2rem !important; min-width: 0 !important; box-shadow: 0 2px 6px rgba(255,255,255,0.10); }
    .service-card { padding: 1.5rem; margin: 0 1rem; }
    .service-card i { font-size: 2.5rem; margin-bottom: 1rem; }
    .process-card-dark { padding: 1.5rem; margin: 0 1rem 1rem 1rem; }
    .process-card-dark img { height: 200px; object-fit: cover; }
    .vision-solar-card-dark { padding: 1.5rem; margin: 0 1rem; }
    #ppf video { max-width: 100%; height: auto; margin: 0 1rem; }
    .review-card { margin: 0 1rem 1.5rem 1rem; padding: 1.5rem; }
    .review-avatar { width: 48px !important; height: 48px !important; }
    .review-username { font-size: 1.1rem; }
    .review-stars { font-size: 1rem; }
    .promise-card { padding: 1.5rem; margin: 0 1rem 1rem 1rem; }
    .promise-number { font-size: 2rem; }
    .promise-title { font-size: 1.1rem; }
    .certified-logos-row { gap: 1rem; padding: 0 1rem; }
    .certified-logo-box { width: calc(50% - 1rem); min-width: 140px; height: 80px; }
    .fixed.bottom-6.right-6.z-50.flex.flex-col.space-y-3 { bottom: 1rem !important; right: 1rem !important; }
    .fixed.bottom-6.right-6.z-50.flex.flex-col.space-y-3 a { padding: 0.5rem 0.75rem !important; font-size: 0.9rem !important; width: auto !important; }
    .tesla-video-embed { max-width: 100vw !important; width: 100vw !important; left: 50% !important; transform: translateX(-50%) !important; padding-top: 60% !important; min-height: 220px !important; }
    .fixed.bottom-6.right-6.z-50.flex.flex-col.space-y-1\.5 a { width: 70vw !important; max-width: 160px !important; min-width: 0 !important; font-size: 0.95rem !important; padding: 0.38rem 0.7rem !important; border-radius: 1rem !important; margin: 0.3rem 0 0.3rem 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.10); display: block; text-align: center; }
    img[src*="lifetime-warranty"] { max-width: 120px !important; width: 100% !important; height: auto !important; margin-bottom: 1.5rem !important; }
    #residential-commercial .sales-funnel-cta { max-width: 320px !important; width: 90vw !important; margin: 1.2rem auto 0 auto !important; font-size: 1rem !important; padding: 0.7rem 1.2rem !important; border-radius: 1.5rem !important; display: block; text-align: center; }
    #xpel-offer .offer-caption { font-size: 0.72rem !important; line-height: 1.3 !important; }
}
@media (max-width: 480px) { 
    .section-spacer { padding: 1.5rem 0; }
    .text-4xl, .text-5xl, .text-6xl { font-size: 2rem !important; }
    .text-3xl { font-size: 1.5rem !important; }
    .text-lg, .text-xl, .text-2xl { font-size: 1rem !important; }
    .sales-funnel-cta, .cta-nav { font-size: 0.9rem !important; padding: 0.5rem 1rem !important; }
    .mobile-phone-btn { font-size: 0.9rem !important; padding: 0.5rem 0.75rem !important; }
    .certified-logo-box { width: calc(50% - 0.75rem); min-width: 120px; height: 70px; }
    .review-card { padding: 1.25rem; }
    .promise-card { padding: 1.25rem; }
    .process-card-dark img { height: 180px; }
}
@media (max-width: 640px) {
   #hero-bg-img { background: linear-gradient(135deg, #222 60%, #444 100%); background-size: cover; background-position: center; display: block; }
   #home h1 { font-size: 2rem; line-height: 1.2; }
   #home p { font-size: 1rem; line-height: 1.4; }
   .service-card { padding: 1.5rem; }
   .service-card i { font-size: 2.5rem; }
   .process-card-dark { padding: 1rem; }
   .process-card-dark img { height: 200px; }
   .vision-solar-card-dark { padding: 1.5rem; }
   #ppf video { max-width: 100%; height: auto; }
}
@media (max-width: 400px) {
    .section-spacer { padding: 1rem 0; }
    .fixed.bottom-6.right-6.z-50.flex.flex-col.space-y-3 { bottom: 1rem !important; right: 0.75rem !important; }
    .fixed.bottom-6.right-6.z-50.flex.flex-col.space-y-3 a { padding: 0.5rem 0.75rem !important; font-size: 0.9rem !important; }
    .sales-funnel-content { padding: 1rem !important; width: 95vw !important; }
    .sales-funnel-cta, .cta-nav { font-size: 0.85rem !important; padding: 0.4rem 0.7rem !important; border-radius: 1rem !important; }
    .text-base, .font-medium, .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl { font-size: 0.95rem !important; }
    nav { padding: 0.5rem 0.75rem; }
    nav .container { min-height: 40px; }
    .mobile-menu { padding: 1.5rem 0.75rem; }
    .mobile-menu a { font-size: 1.25rem; padding: 0.5rem 0; }
    .section-header { font-size: 1.5rem; margin-bottom: 0.75rem; }
    .section-underline { width: 2.5rem; height: 2px; margin-bottom: 1rem; }
    #gallery-carousel { height: 50vw; min-height: 180px; }
    #gallery-carousel img { height: 50vw; min-height: 180px; max-width: 85vw; }
    #contact .grid { gap: 1.5rem; }
    #contact iframe { height: 120px; }
    footer { padding: 1.5rem 0.75rem; }
    footer .grid { gap: 1.5rem; }
    .service-card { padding: 1.25rem; margin: 0 0.75rem; }
    .service-card i { font-size: 2.25rem; margin-bottom: 0.75rem; }
    .process-card-dark { padding: 1.25rem; margin: 0 0.75rem 0.75rem 0.75rem; }
    .process-card-dark img { height: 180px; object-fit: cover; }
    .vision-solar-card-dark { padding: 1.25rem; margin: 0 0.75rem; }
    #ppf video { max-width: 100%; height: auto; margin: 0 0.75rem; }
    .review-card { margin: 0 0.75rem 1.25rem 0.75rem; padding: 1.25rem; }
    .review-avatar { width: 40px !important; height: 40px !important; }
    .review-username { font-size: 1rem; }
    .review-stars { font-size: 0.9rem; }
    .promise-card { padding: 1.25rem; margin: 0 0.75rem 0.75rem 0.75rem; }
    .promise-number { font-size: 1.75rem; }
    .promise-title { font-size: 1rem; }
    .certified-logos-row { gap: 0.75rem; padding: 0 0.75rem; }
    .certified-logo-box { width: calc(50% - 0.75rem); min-width: 120px; height: 70px; }
    .tesla-video-embed { max-width: 100vw !important; width: 100vw !important; left: 50% !important; transform: translateX(-50%) !important; padding-top: 60% !important; min-height: 200px !important; }
    .fixed.bottom-6.right-6.z-50.flex.flex-col.space-y-1\.5 a { width: 70vw !important; max-width: 160px !important; min-width: 0 !important; font-size: 0.85rem !important; padding: 0.35rem 0.65rem !important; border-radius: 0.9rem !important; margin: 0.25rem 0 0.25rem 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.10); display: block; text-align: center; }
    img[src*="lifetime-warranty"] { max-width: 100px !important; width: 100% !important; height: auto !important; margin-bottom: 1.25rem !important; }
    #residential-commercial .sales-funnel-cta { max-width: 300px !important; width: 90vw !important; margin: 1rem auto 0 auto !important; font-size: 0.9rem !important; padding: 0.6rem 1rem !important; border-radius: 1.25rem !important; display: block; text-align: center; }
    #xpel-offer .offer-caption { font-size: 0.65rem !important; line-height: 1.2 !important; }
}
@media (max-width: 767px) {
    .mobile-socials a { font-size: 1.5rem; padding: 0 0.15rem; }
}