html, body { background-color: #0b1228; color: #f1f5fb; }

        /* Animated gradient blob backdrop applied globally */
        body { position: relative; }
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                radial-gradient(600px 600px at 10% 20%, rgba(30, 58, 138, 0.35), transparent 60%),
                radial-gradient(600px 600px at 90% 30%, rgba(220, 38, 38, 0.25), transparent 60%),
                radial-gradient(700px 700px at 50% 90%, rgba(249, 115, 22, 0.20), transparent 65%),
                #0b1228;
            animation: blobShift 22s ease-in-out infinite alternate;
        }
        #root, main, footer { position: relative; z-index: 1; }
        main { background-color: #0b1228; }

        @keyframes blobShift {
            0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
            50%  { background-position: 20% 10%, 80% 20%, 40% 80%; }
            100% { background-position: -10% 20%, 110% 10%, 60% 90%; }
        }

        .entrance-fade-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s ease-out forwards;
        }
        @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

        .pulse-accent { animation: pulse-flame 2s infinite; }
        @keyframes pulse-flame {
            0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
            70%  { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
            100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
        }

        @keyframes floatY {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-10px); }
        }
        .float-slow { animation: floatY 7s ease-in-out infinite; }

        /* Glass card treatment for any card-like surface from old HTML */
        .bg-surface-container-lowest,
        .bg-surface-container-low,
        .bg-surface-container,
        .bg-surface-container-high {
            backdrop-filter: blur(10px);
            border-color: rgba(255,255,255,0.10) !important;
        }

        /* Make primary buttons feel like the hero CTA */
        button.bg-primary, .bg-primary {
            background-image: linear-gradient(135deg, #DC2626, #F97316);
        }

        .striped-list li:nth-child(even) {
            background-color: rgba(255,255,255,0.04);
        }

        /* Section reveal on scroll-ish */
        section { animation: fadeUp 0.8s ease-out both; }

        /* Site header: keep nav readable over any page content when scrolled */
        .site-header {
            isolation: isolate;
        }
        .site-header nav a {
            color: #e2e8f0;
        }
        .site-header nav a:hover {
            color: #ffffff;
        }
        .site-header nav a[class*="border-[#F97316]"],
        .site-header nav a.text-white {
            color: #ffffff;
        }

        /* Light surfaces: body text defaults to light-on-dark; force readable dark text */
        .bg-white,
        .bg-surface-bright,
        .bg-inverse-surface {
            color: #0b1228;
        }

        /* Zebra / data tables on light rows */
        tr.bg-white,
        tr.bg-white td,
        .bg-white table td,
        .technical-table tbody tr,
        .technical-table tr:nth-child(even) td {
            color: #0b1228;
        }

        tr.bg-white td.text-secondary,
        tr.bg-white .text-secondary,
        .technical-table tbody .text-secondary,
        .technical-table tr:nth-child(even) .text-secondary {
            color: #1E3A8A;
        }

        /* Dark zebra rows keep light foreground */
        tr.bg-surface-container-low\/30 td,
        tr.bg-surface-container-low\/50 td,
        tr[class*="bg-surface-container-low/"] td {
            color: #f1f5fb;
        }

        tr.bg-surface-container-low\/30 .text-secondary,
        tr.bg-surface-container-low\/50 .text-secondary,
        tr[class*="bg-surface-container-low/"] .text-secondary {
            color: #93c5fd;
        }

        .striped-list li:nth-child(even) {
            color: #0b1228;
        }

        /* Dark promo / CTA cards */
        section.bg-background,
        .bg-background.rounded-xl,
        .bg-background.rounded-3xl {
            color: #f1f5fb;
        }

        /* Guard against inverted Material tokens used as backgrounds */
        .bg-on-background {
            background-color: #0b1228 !important;
            color: #f1f5fb !important;
        }

        /* Vision / dark panel body copy must stay readable */
        .bg-on-background .text-surface-variant,
        .bg-on-background p.text-surface-variant {
            color: #c7d0e6 !important;
        }

        /* Image-backed page heroes (extinguishers, about, etc.) */
        .page-hero {
            color: #f1f5fb;
        }

        .page-hero.elegant-hero h1 {
            text-shadow: 0 4px 40px rgba(11, 18, 40, 0.4);
        }

        .page-hero.elegant-hero p {
            text-shadow: none;
        }

        .page-hero:not(.elegant-hero) h1,
        .page-hero:not(.elegant-hero) p {
            text-shadow: 0 2px 16px rgba(11, 18, 40, 0.55);
        }

        /* ─── Mobile-first app layout ─── */
        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        /* Safe areas for notched phones */
        .site-header {
            padding-top: env(safe-area-inset-top, 0px);
        }

        @media (max-width: 767px) {
            /* Desktop margin (64px) → phone gutter (16px) site-wide */
            .px-margin-desktop {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

            .py-section-gap {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }

            .mt-section-gap {
                margin-top: 3rem !important;
            }

            .gap-gutter {
                gap: 1rem !important;
            }

            /* Headline scale for small screens */
            .text-headline-xl {
                font-size: 1.875rem !important;
                line-height: 2.25rem !important;
            }

            .text-headline-lg {
                font-size: 1.5rem !important;
                line-height: 2rem !important;
            }

            .text-body-lg {
                font-size: 1rem !important;
                line-height: 1.625rem !important;
            }

            /* Compact padding on large padded cards/sections */
            .p-10, .p-12, .md\:p-12, .lg\:p-16 {
                padding: 1.25rem !important;
            }

            .p-8 {
                padding: 1.15rem !important;
            }

            /* Hero height breathing room (header clearance handled in app pt) */
            .page-hero.elegant-hero {
                min-height: auto !important;
            }

            .page-hero.elegant-hero .px-margin-desktop,
            .elegant-hero .relative.z-10 {
                padding-top: 2rem !important;
                padding-bottom: 2.5rem !important;
            }

            /* Forms: stack cramped 2-col inputs; keep taller tap targets */
            form .grid.grid-cols-2 {
                grid-template-columns: 1fr !important;
            }

            input[type="text"],
            input[type="email"],
            input[type="tel"],
            input[type="number"],
            input[type="search"],
            select,
            textarea {
                min-height: 48px;
                font-size: 16px !important; /* prevent iOS zoom */
                border-radius: 0.75rem !important;
            }

            textarea {
                min-height: 120px;
            }

            /* Checkbox / service rows: larger tap zones */
            input[type="checkbox"] {
                width: 1.25rem !important;
                height: 1.25rem !important;
                min-width: 1.25rem;
                min-height: 1.25rem;
                flex-shrink: 0;
            }

            label.flex.items-center.gap-3,
            label.flex.items-start.gap-3 {
                min-height: 44px;
                padding: 0.35rem 0;
            }

            /* Primary CTAs full-bleed thumb targets */
            button.bg-primary,
            a.bg-primary,
            .elegant-cta-primary,
            form button[type="submit"] {
                min-height: 52px;
                width: 100%;
                justify-content: center;
                border-radius: 0.85rem !important;
            }

            .elegant-cta-ghost {
                min-height: 52px;
                width: 100%;
                justify-content: center;
            }

            .hero-actions {
                flex-direction: column !important;
                align-items: stretch !important;
                width: 100%;
            }

            /* Product card action rows stay useful on narrow screens */
            .product-card .grid.grid-cols-2 {
                grid-template-columns: 1fr 1fr !important;
            }

            .product-card button {
                min-height: 44px;
                font-size: 0.7rem !important;
            }

            /* Stats strip: tighter on phones */
            .grid.grid-cols-2.md\:grid-cols-4 {
                gap: 1rem !important;
            }

            /* Tables: allow horizontal scroll without blowing page width */
            .overflow-x-auto {
                -webkit-overflow-scrolling: touch;
                margin-left: -0.25rem;
                margin-right: -0.25rem;
                padding-left: 0.25rem;
                padding-right: 0.25rem;
            }

            /* Bento / custom 12-col grids collapse gracefully */
            .bento-grid {
                grid-template-columns: 1fr !important;
            }

            /* Image blocks that are too tall on phone */
            img.h-\[500px\] {
                height: 260px !important;
            }

            /* Soften floating WhatsApp overlap with footer */
            footer {
                padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
            }

            /* Product CTA button rows (Datasheet / Inquire) */
            .product-card-hover .flex.gap-3,
            .product-card-hover .flex.gap-4,
            .product-card .flex.gap-3,
            .product-card .flex.gap-4 {
                flex-direction: column;
            }

            .product-card-hover button,
            .product-card-hover a {
                width: 100%;
                min-height: 48px;
                justify-content: center;
            }

            /* Contact page hero — less vertical bulk */
            section.hero-pattern {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }

            /* Contact map height */
            section.h-\[500px\] {
                height: 280px !important;
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .px-margin-desktop {
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }

            .py-section-gap {
                padding-top: 4rem !important;
                padding-bottom: 4rem !important;
            }
        }