/* =====================================================
   GTECH ENGINEERING
   STYLE.CSS - PRODUCTION v4.1
   Fixes: skip-link, logo containment, lightbox gallery styling
   Adds: trust strip, flow-line signature element
===================================================== */

/* CSS Layers */
@layer reset, base, components, utilities;

@layer reset{
    :where(*, *::before, *::after){box-sizing:border-box;}
    :where(*){margin:0;padding:0;}
    :where(ul){list-style:none;}
}

@layer base{
    :root{
        color-scheme: light;
        --primary:#0B1F3A;
        --secondary:#ff9800;
        --secondary-dark:#e68900;
        --steel:#8A94A6;
        --rust:#B23A24;
        --light:#f5f7fa;
        --surface:#ffffff;
        --white:#ffffff;
        --text:#333;
        --text-light:#666;
        --radius:16px;
        --radius-pill:50px;
        --shadow-small:0 8px 20px rgba(0,0,0,.08);
        --shadow-large:0 10px 30px rgba(11,31,58,.15);
        --header-height:80px;
        --container-width:1200px;
        --max-text:800px;
        --tap-min:44px;
        --tap-min-coarse:48px;
        --transition-fast:.2s ease;
        --transition:.35s ease;
        --transition-slow:.6s ease;
    }

    @media (prefers-contrast: more){
        :root{
            --secondary:#ff8a00;
            --text:#000;
            --text-light:#222;
        }
    }

    @view-transition{
        navigation: auto;
    }

    html{
        scroll-behavior:smooth;
        scroll-padding-top:100px;
        text-rendering:optimizeLegibility;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        font-kerning:normal;
        font-feature-settings:"kern";
        scrollbar-color:var(--primary) #f1f1f1;
        scrollbar-width:thin;
    }

    html:focus-within{scroll-behavior:smooth;}

    @media (prefers-reduced-motion: reduce){
        *,
        *::before,
        *::after{
            animation:none !important;
            transition:none !important;
            scroll-behavior:auto !important;
        }
    }

    body{
        font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
        background:var(--light);
        color:var(--text);
        line-height:1.7;
        overflow-x:hidden;
        min-block-size:100vh;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    body.menu-open{
        overflow:hidden;
    }

    a{
        text-decoration:none;
        color:inherit;
        transition:color var(--transition);
    }

    img{
        display:block;
        max-inline-size:100%;
        block-size:auto;
        image-rendering:auto;
        backface-visibility:hidden;
        transition:opacity var(--transition), transform var(--transition);
    }

    img.loading{
        opacity:0;
        visibility:hidden;
    }
    img.loaded{
        opacity:1;
        visibility:visible;
    }

    :where(button),
    .btn,
    .quote-btn,
    #navbar a{
        min-block-size:var(--tap-min);
        display:inline-flex;
        align-items:center;
    }

    @media (pointer:coarse){
        .btn,
        .quote-btn,
        #navbar a{
            min-block-size:var(--tap-min-coarse);
            padding-block:18px;
        }
    }

    :where(button){
        font:inherit;
        border:none;
        background:none;
        cursor:pointer;
    }

    input,textarea,select{font:inherit;}

    :focus:not(:focus-visible){
        outline:none;
    }
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    a:focus-visible,
    button:focus-visible{
        outline:none;
        box-shadow:
            0 0 0 3px var(--white),
            0 0 0 6px var(--secondary);
        border-radius:6px;
    }

    h1,h2,h3,h4,h5,h6{
        line-height:1.2;
        font-weight:700;
    }

    @supports (text-wrap: balance){
        h1,h2,h3,h4,h5,h6{
            text-wrap: balance;
        }
    }

    h2{font-size:clamp(2rem,4vw,2.5rem);}
    h3{font-size:clamp(1.5rem,3vw,1.75rem);}
    
    p{
        color:var(--text-light);
        overflow-wrap:break-word;
    }
    @supports (text-wrap:pretty){
        p{
            text-wrap:pretty;
        }
    }
}

@layer components{
    .container{
        inline-size:min(90%, var(--container-width));
        margin-inline:auto;
    }

    section{scroll-margin-block-start:100px;}
    .section p{max-inline-size:var(--max-text);margin-inline:auto;}
    ::selection{background:var(--secondary);color:var(--white);}

    /* Skip link — hidden until keyboard focus, per accessibility best practice */
    .skip-link{
        position:absolute;
        inset-block-start:-100px;
        inset-inline-start:8px;
        background:var(--secondary);
        color:var(--primary);
        padding-block:10px;
        padding-inline:18px;
        border-radius:8px;
        font-weight:700;
        z-index:2000;
        transition:top var(--transition-fast);
    }
    .skip-link:focus{
        inset-block-start:8px;
    }

    .fade{
        opacity:0;
        transform:translateY(30px);
        transition:opacity var(--transition-slow), transform var(--transition-slow);
    }
    .fade.show{
        opacity:1;
        transform:none;
    }
    body:not(.loaded) .fade{
        opacity:1;
        transform:none;
        transition:none;
    }
    @media (prefers-reduced-motion: reduce){
        .fade{
            opacity:1;
            transform:none;
            transition:none;
        }
    }

    @supports (animation-timeline: view()){
        .fade{
            opacity:0;
            transform:translateY(30px);
            animation:fadeIn var(--transition-slow) both;
            animation-timeline: view();
            animation-range: entry 0% cover 20%;
        }
        @keyframes fadeIn{
            to{opacity:1;transform:none;}
        }
    }

    .header{
        position:sticky;
        top:0;
        inset-block-start:0;
        inset-inline:0;
        block-size:var(--header-height);
        background:rgba(11,31,58,.96);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
        box-shadow:var(--shadow-small);
        z-index:1000;
        display:flex;
        align-items:center;
        padding-block:18px;
        padding-inline:8%;
        transition:background-color var(--transition), box-shadow var(--transition);
        backface-visibility:hidden;
    }
    @supports not (backdrop-filter:blur(6px)){
        .header{background:#0B1F3A;}
    }
    .header.scrolled{
        background:rgba(11,31,58,.98);
        box-shadow:0 12px 35px rgba(0,0,0,.25);
    }
    .header .container{
        inline-size:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .header::after{
        content:"";
        position:absolute;
        inset-inline:0;
        inset-block-end:0;
        block-size:1px;
        background:rgba(255,255,255,.05);
    }

    /* Logo — contained so an oversized source image can never overflow the header */
    .logo{
        display:flex;
        align-items:center;
        flex-shrink:0;
        overflow:hidden;
        max-block-size:var(--header-height);
    }
    .logo a{display:flex;align-items:center;color:var(--white);}
    .logo img{
        inline-size:auto;
        max-inline-size:180px;
        block-size:auto;
        max-block-size:52px;
        object-fit:contain;
        transition:transform var(--transition), filter var(--transition);
    }
    @media (hover: hover) and (pointer: fine){
        .logo:hover img{transform:scale(1.03);}
    }
    .logo h1{display:none;}
    .logo-text{color:#fff;font-size:clamp(1.5rem,3vw,1.75rem);font-weight:700;letter-spacing:.5px;}

    #navbar{
        display:flex;
        align-items:center;
        gap:30px;
        transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
    }
    #navbar a{
        position:relative;
        color:var(--white);
        font-weight:600;
        font-size:16px;
        white-space:nowrap;
        transition:color var(--transition);
        padding-inline:4px;
    }
    #navbar a::after{
        content:"";
        position:absolute;
        inset-inline-start:0;
        inset-block-end:-8px;
        inline-size:0;
        block-size:2px;
        background:var(--secondary);
        transition:inline-size var(--transition);
    }
    #navbar a:hover::after,
    #navbar a.active::after,
    #navbar a:focus-visible::after{inline-size:100%;}
    #navbar a:hover,
    #navbar a.active,
    #navbar a:focus-visible{color:var(--secondary);}

    .btn,
    .quote-btn{
        user-select:none;
        -webkit-user-select:none;
    }
    .quote-btn{
        background:var(--secondary);
        color:var(--white)!important;
        padding-block:12px;
        padding-inline:22px;
        border-radius:6px;
        transition:background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    @media (hover: hover) and (pointer: fine){
        .quote-btn:hover{
            background:var(--secondary-dark);
            transform:translate3d(0,-2px,0);
            box-shadow:0 8px 18px rgba(255,152,0,.35);
        }
    }
    .quote-btn.active{background:var(--secondary-dark);}
    .quote-btn:active{transform:scale(.97);}

    .menu-toggle{
        display:none;
        background:none;
        border:none;
        color:var(--white);
        font-size:30px;
        cursor:pointer;
        transition:color var(--transition), transform var(--transition);
        min-inline-size:var(--tap-min);
        min-block-size:var(--tap-min);
        justify-content:center;
    }
    @media (hover: hover) and (pointer: fine){
        .menu-toggle:hover{color:var(--secondary);transform:rotate(90deg);}
    }
    .menu-toggle:active{transform:scale(.9);}

    .hero{
        position:relative;
        overflow:hidden;
        min-height:90vh;
        min-block-size:max(90dvh,90svh);
        display:flex;
        justify-content:center;
        align-items:center;
        text-align:center;
        color:var(--white);
        padding-block:40px;
        padding-inline:40px;
        isolation:isolate;
        contain:layout style paint;
        background: url("../images/hero.jpg") center/cover no-repeat;
    }
    @supports (background-image:image-set(url("") type("image/avif"))){
        .hero{
            background-image: image-set(
                url("../images/hero.avif") type("image/avif"),
                url("../images/hero.webp") type("image/webp"),
                url("../images/hero.jpg") type("image/jpeg")
            );
        }
    }
    @supports not (background-image:image-set(url("") type("image/avif"))){
        @supports (background-image:image-set(url("") type("image/webp"))){
            .hero{
                background-image: image-set(
                    url("../images/hero.webp") type("image/webp"),
                    url("../images/hero.jpg") type("image/jpeg")
                );
            }
        }
    }
    .hero-overlay{
        position:absolute;
        inset:0;
        background:linear-gradient(rgba(11,31,58,.82), rgba(11,31,58,.72));
        z-index:1;
        pointer-events:none;
    }
    .hero-content{
        position:relative;
        z-index:2;
        max-inline-size:900px;
    }
    .hero h2{
        font-size:clamp(2.8rem,5vw,4.2rem);
        font-weight:700;
        line-height:1.15;
        margin-block-end:20px;
        color:var(--white);
    }
    .hero p{
        max-inline-size:760px;
        margin-inline:auto;
        font-size:clamp(18px,2vw,22px);
        color:rgba(255,255,255,.95);
        line-height:1.8;
    }
    .hero-trust{
        margin-block-start:18px;
        font-size:15px;
        font-style:italic;
        color:rgba(255,255,255,.80);
    }
    .hero-buttons{
        margin-block-start:38px;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:20px;
        flex-wrap:wrap;
    }

    .btn{
        padding-block:16px;
        padding-inline:38px;
        border-radius:var(--radius-pill);
        font-weight:700;
        font-size:15px;
        text-transform:uppercase;
        letter-spacing:.6px;
    }
    .btn--primary{
        background:var(--secondary);
        color:var(--white);
        box-shadow:0 12px 25px rgba(255,152,0,.35);
        transition:background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    @media (hover: hover) and (pointer: fine){
        .btn--primary:hover{
            background:var(--secondary-dark);
            transform:translate3d(0,-4px,0);
            box-shadow:0 18px 35px rgba(255,152,0,.45);
        }
    }
    .btn--secondary{
        border:2px solid var(--white);
        color:var(--white);
        background:transparent;
        transition:background-color var(--transition), color var(--transition), transform var(--transition);
    }
    @media (hover: hover) and (pointer: fine){
        .btn--secondary:hover{
            background:var(--white);
            color:var(--primary);
            transform:translate3d(0,-4px,0);
        }
    }
    .btn--secondary-dark{
        border:2px solid var(--primary);
        color:var(--primary);
        background:transparent;
        transition:background-color var(--transition), color var(--transition), transform var(--transition);
    }
    @media (hover: hover) and (pointer: fine){
        .btn--secondary-dark:hover{
            background:var(--primary);
            color:var(--white);
            transform:translate3d(0,-4px,0);
        }
    }
    .btn:active{transform:scale(.97);}

    /* Signature element: thin amber "flow line" — a nod to pipeline flow.
       Used once per section boundary, never as decoration elsewhere. */
    .flow-divider{
        position:relative;
        block-size:3px;
        inline-size:100%;
        background:linear-gradient(90deg, transparent, var(--secondary), transparent);
        overflow:hidden;
    }
    .flow-divider::after{
        content:"";
        position:absolute;
        inset-block:0;
        inline-size:120px;
        background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
        animation:flowMove 3.5s linear infinite;
    }
    @keyframes flowMove{
        from{inset-inline-start:-120px;}
        to{inset-inline-start:100%;}
    }
    @media (prefers-reduced-motion: reduce){
        .flow-divider::after{animation:none;display:none;}
    }

    /* Trust strip — badge row beneath the hero */
    .trust-strip{
        background:var(--surface);
        padding-block:36px;
        padding-inline:8%;
        border-block-end:1px solid rgba(11,31,58,.06);
    }
    .trust-strip .container{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:24px;
    }
    .trust-item{
        display:flex;
        align-items:center;
        gap:14px;
        padding-block:10px;
    }
    .trust-item .trust-icon{
        flex-shrink:0;
        inline-size:44px;
        block-size:44px;
        border-radius:50%;
        background:var(--light);
        display:flex;
        align-items:center;
        justify-content:center;
        color:var(--secondary);
        font-size:20px;
        font-weight:700;
    }
    .trust-item h4{
        color:var(--primary);
        font-size:15px;
        font-weight:700;
        margin-block-end:2px;
    }
    .trust-item p{
        color:var(--steel);
        font-size:13px;
        margin:0;
    }

    .stats{background:var(--primary);padding-block:60px;padding-inline:8%;}
    .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;text-align:center;align-items:center;}
    .stat-item{padding:10px;transition:transform var(--transition);}
    @media (hover: hover) and (pointer: fine){.stat-item:hover{transform:translate3d(0,-6px,0);}}
    .stat-item h3{color:var(--secondary);font-size:clamp(2rem,5vw,2.625rem);font-weight:700;margin-block-end:10px;line-height:1;}
    .stat-item p{color:var(--white);font-size:16px;opacity:.92;}

    .about,.products,.why-us,.section{
        padding-block:clamp(60px,8vw,100px);
        padding-inline:8%;
        max-inline-size:1600px;
        margin-inline:auto;
        contain:layout paint;
    }
    @supports (content-visibility:auto){
        .about,
        .products,
        .why-us,
        .section{
            content-visibility:auto;
            contain-intrinsic-size:800px;
        }
        footer{
            content-visibility:auto;
            contain-intrinsic-size:400px;
        }
    }
    .about{background:var(--surface);text-align:center;}
    .products{background:var(--light);}
    .why-us{background:var(--surface);}

    .about h2,.products h2,.why-us h2,.cta-section h2{
        position:relative;
        display:inline-block;
        inset-inline-start:50%;
        transform:translateX(-50%);
        text-align:center;
        font-size:clamp(2rem,4vw,2.5rem);
        color:var(--primary);
        margin-block-end:50px;
        font-weight:700;
    }
    .about h2::after,.products h2::after,.why-us h2::after,.cta-section h2::after{
        content:"";
        display:block;
        inline-size:70px;
        block-size:4px;
        margin-block:14px auto 0;
        border-radius:30px;
        background:var(--secondary);
    }
    .about p{max-inline-size:860px;margin:0 auto 20px;font-size:18px;line-height:1.9;color:#555;}
    .about p:last-child{margin-block-end:0;}
    .section p{color:#666;line-height:1.8;}

    .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;align-items:stretch;}
    .product-card{
        position:relative;
        display:flex;
        flex-direction:column;
        block-size:100%;
        background:var(--surface);
        border-radius:var(--radius);
        padding:30px;
        text-align:center;
        overflow:hidden;
        overflow-wrap:anywhere;
        border:1px solid rgba(0,0,0,.05);
        box-shadow:var(--shadow-small);
        transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        isolation:isolate;
        contain:layout style paint;
    }
    @supports (content-visibility:auto){
        .product-card{
            content-visibility:auto;
            contain-intrinsic-size:500px;
        }
    }
    .product-card::before{
        content:"";
        position:absolute;
        inset-block-start:0;
        inset-inline:0;
        block-size:4px;
        background:var(--secondary);
        transform:scaleX(0);
        transform-origin:left;
        transition:transform var(--transition);
    }
    @media (hover: hover) and (pointer: fine){
        .product-card:hover::before{transform:scaleX(1);}
        .product-card:hover{
            transform:translate3d(0,-8px,0);
            border-color:var(--secondary);
            box-shadow:var(--shadow-large);
        }
    }
    .product-card img{
        display:block;
        inline-size:100%;
        max-inline-size:100%;
        max-block-size:240px;
        aspect-ratio:1;
        object-fit:contain;
        object-position:center;
        background:var(--surface);
        padding:15px;
        border-radius:var(--radius);
        margin-block-end:20px;
        transition:transform var(--transition), filter var(--transition);
        filter:drop-shadow(0 6px 15px rgba(0,0,0,.08));
        overflow:hidden;
    }
    @supports not (aspect-ratio: 1){
        .product-card img{
            height:240px;
        }
    }
    @media (hover: hover) and (pointer: fine){
        .product-card:hover img{
            transform:scale(1.08);
            filter:drop-shadow(0 12px 20px rgba(0,0,0,.12));
        }
    }
    .product-card h3{
        color:var(--primary);
        font-size:clamp(1.25rem,2.5vw,1.5rem);
        margin-block-end:15px;
        min-block-size:58px;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        overflow-wrap:anywhere;
    }
    .product-card p{
        color:#555;
        font-size:16px;
        line-height:1.8;
        margin-block-end:20px;
        overflow-wrap:anywhere;
    }
    .product-card h4{color:var(--secondary);font-size:clamp(1.625rem,3vw,1.875rem);font-weight:700;letter-spacing:1px;margin-block-end:20px;overflow-wrap:anywhere;}
    .product-card .btn{margin-block-start:auto;inline-size:100%;}
    .product-badge{
        position:absolute;
        inset-block-start:18px;
        inset-inline-end:18px;
        background:var(--secondary);
        color:var(--white);
        padding-block:8px;
        padding-inline:14px;
        border-radius:50px;
        font-size:12px;
        font-weight:700;
        letter-spacing:.5px;
        text-transform:uppercase;
        box-shadow:0 8px 15px rgba(255,152,0,.35);
    }

    .search-box{background:var(--surface);padding:30px;border-radius:var(--radius);box-shadow:var(--shadow-small);margin-block-end:45px;}
    .search-form{display:grid;grid-template-columns:2fr 1fr auto;gap:15px;align-items:center;}
    @media (max-width:900px){
        .search-form{grid-template-columns:1fr;}
    }
    .search-form input,.search-form select{
        inline-size:100%;
        padding:15px 18px;
        border:1px solid #ddd;
        border-radius:8px;
        font-size:16px;
        outline:none;
        background:#fff;
        transition:border-color var(--transition), box-shadow var(--transition);
        appearance:none;
        -webkit-appearance:none;
    }
    .search-form input:focus,.search-form select:focus{border-color:var(--secondary);box-shadow:0 0 0 4px rgba(255,152,0,.15);}
    .search-form button{border:none;cursor:pointer;}
    .product-count{margin-block-start:20px;text-align:center;font-size:17px;color:#666;}
    .product-gallery{
        margin-block-end:35px;
        text-align:center;
        content-visibility:auto;
        contain-intrinsic-size:700px;
    }
    .main-image{
        inline-size:100%;
        max-inline-size:650px;
        aspect-ratio:auto;
        border-radius:var(--radius);
        margin-inline:auto;
        display:block;
        background:#fff;
        box-shadow:0 10px 30px rgba(0,0,0,.12);
        transition:transform var(--transition), opacity var(--transition);
    }
    @media (hover: hover) and (pointer: fine){.main-image:hover{transform:scale(1.02);}}
    .thumbnail-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-block-start:22px;}
    .thumbnail{
        inline-size:90px;
        block-size:90px;
        aspect-ratio:1;
        object-fit:cover;
        border-radius:8px;
        cursor:pointer;
        border:2px solid #ddd;
        transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    @media (hover: hover) and (pointer: fine){
        .thumbnail:hover{border-color:var(--secondary);transform:scale(1.05);box-shadow:0 10px 20px rgba(0,0,0,.12);}
    }
    .thumbnail.active{border-color:var(--secondary);box-shadow:0 8px 18px rgba(255,152,0,.35);}
    .product-details{max-inline-size:900px;margin-inline:auto;text-align:start;}
    .product-details h2{color:var(--primary);font-size:clamp(1.75rem,3vw,2.125rem);margin-block-end:20px;overflow-wrap:anywhere;}
    .product-details p{
        font-size:18px;
        line-height:1.9;
        color:#555;
        margin-block-end:20px;
        overflow-wrap:anywhere;
    }
    .product-details strong{color:var(--primary);font-weight:700;}
    .product-details .btn{margin-block-start:25px;}

    .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;}
    .why-card{
        background:#f8f9fb;
        padding:35px;
        border-radius:var(--radius);
        text-align:center;
        box-shadow:var(--shadow-small);
        transition:transform var(--transition), box-shadow var(--transition), background-color var(--transition);
        contain:layout paint;
        overflow-wrap:anywhere;
    }
    @media (hover: hover) and (pointer: fine){
        .why-card:hover{transform:translate3d(0,-8px,0);box-shadow:var(--shadow-large);}
    }
    .why-card i{font-size:50px;color:var(--secondary);margin-block-end:20px;}
    .why-card h3{color:var(--primary);font-size:clamp(1.25rem,2.5vw,1.5rem);margin-block-end:15px;overflow-wrap:anywhere;}
    .why-card p{color:#666;font-size:17px;line-height:1.8;overflow-wrap:anywhere;}
    
    .cta-section{background:var(--light);text-align:center;padding-block:80px;padding-inline:8%;contain:layout paint;}
    .cta-section h2{color:var(--primary);font-size:clamp(1.875rem,3.5vw,2.25rem);margin-block-end:18px;}
    .cta-section p{color:#555;font-size:18px;line-height:1.8;max-inline-size:700px;margin-inline:auto;margin-block-end:35px;}

    footer{
        isolation:isolate;
        background:#04101d;
        border-block-start:4px solid var(--secondary);
        color:var(--white);
        padding-block:70px;
        padding-inline:20px;
        padding-block-end:30px;
        contain:layout paint;
    }
    .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;margin-block-end:40px;text-align:start;}
    .footer-col{min-inline-size:0;}
    .footer-col h3{color:var(--secondary);font-size:clamp(1.25rem,2vw,1.375rem);margin-block-end:15px;}
    .footer-col h4{
        color:var(--white);
        font-size:17px;
        text-transform:uppercase;
        letter-spacing:.5px;
        margin-block-end:18px;
        text-wrap:balance;
    }
    .footer-col p{color:#c5cbdb;line-height:1.8;overflow-wrap:break-word;}
    .footer-col ul{list-style:none;}
    .footer-contact{display:flex;flex-direction:column;gap:10px;}
    .footer-col a{
        color:#c5cbdb;
        display:inline-flex;
        align-items:center;
        transition:color var(--transition);
        overflow-wrap:anywhere;
        word-break:break-word;
        min-block-size:var(--tap-min);
    }
    @media (hover: hover) and (pointer: fine){.footer-col a:hover{color:var(--secondary);}}
    .footer-bottom{text-align:center;padding-block-start:25px;border-block-start:1px solid rgba(255,255,255,.10);}
    .footer-bottom p{color:#c5cbdb;opacity:.85;font-size:15px;line-height:1.8;}
    .footer-bottom p:last-child{margin-block-start:10px;font-size:14px;}
    .footer-bottom strong{color:var(--secondary);}
    .footer-bottom a{
        color:#c5cbdb;
        display:inline-flex;
        align-items:center;
        transition:color var(--transition);
        overflow-wrap:anywhere;
        word-break:break-word;
        min-block-size:var(--tap-min);
    }
    @media (hover: hover) and (pointer: fine){.footer-bottom a:hover{color:var(--secondary);}}

    .back-to-top{
        position:fixed;
        inset-inline-end:30px;
        inset-block-end:30px;
        inline-size:50px;
        block-size:50px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:none;
        border-radius:50%;
        background:var(--secondary);
        color:var(--white);
        font-size:20px;
        cursor:pointer;
        box-shadow:0 10px 25px rgba(0,0,0,.25);
        transition:opacity var(--transition), visibility var(--transition), transform var(--transition), background-color var(--transition);
        opacity:0;
        visibility:hidden;
        transform:translateY(20px);
        z-index:999;
    }
    .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
    @media (hover: hover) and (pointer: fine){.back-to-top:hover{background:var(--secondary-dark);transform:translateY(-4px);}}
    iframe[src*="tawk.to"],iframe[title*="chat"]{z-index:2147483647 !important;}

    /* Lightbox — full-screen product image viewer with prev/next/close controls */
    .lightbox{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.92);
        display:none;
        align-items:center;
        justify-content:center;
        z-index:3000;
        padding:20px;
    }
    .lightbox.active{display:flex;}
    .lightbox img{
        max-width:90vw;
        max-height:85vh;
        object-fit:contain;
        border-radius:8px;
    }
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next{
        position:absolute;
        background:rgba(255,255,255,.15);
        color:var(--white);
        border:none;
        border-radius:50%;
        width:48px;
        height:48px;
        font-size:22px;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:background-color .2s ease;
    }
    .lightbox-close:hover,
    .lightbox-prev:hover,
    .lightbox-next:hover{
        background:rgba(255,255,255,.3);
    }
    .lightbox-close{
        top:20px;
        right:20px;
    }
    .lightbox-prev{
        left:20px;
        top:50%;
        transform:translateY(-50%);
    }
    .lightbox-next{
        right:20px;
        top:50%;
        transform:translateY(-50%);
    }
    @media (max-width:600px){
        .lightbox-close,.lightbox-prev,.lightbox-next{
            width:40px;
            height:40px;
            font-size:18px;
        }
    }

    ::-webkit-scrollbar{inline-size:8px;}
    ::-webkit-scrollbar-track{background:#f1f1f1;}
    ::-webkit-scrollbar-thumb{background:var(--primary);border-radius:30px;}
    @media (hover: hover) and (pointer: fine){::-webkit-scrollbar-thumb:hover{background:var(--secondary);}}

    @media print{
        .hero{background:none !important;}
        .header,.menu-toggle,.back-to-top,footer{display:none !important;}
        body{background:#fff;color:#000;}
        .product-card{box-shadow:none;border:1px solid #ccc;}
        .product-card img{filter:none;}
    }
}

@layer utilities{
    @media (max-width:1024px){#navbar{gap:18px;}#navbar a{font-size:15px;}}
    @media (max-width:992px){.logo img{max-inline-size:150px;}}
    @media (max-width:768px){
        :root{--header-height:70px;}
        .header{block-size:var(--header-height);padding-block:12px;padding-inline:20px;}
        .logo img{max-inline-size:130px;max-block-size:42px;}
        .menu-toggle{display:flex;}
        #navbar{
            position:fixed;
            inset-block-start:var(--header-height);
            inset-inline:0;
            inset-block-end:0;
            background:var(--primary);
            display:flex;
            flex-direction:column;
            justify-content:flex-start;
            align-items:center;
            gap:22px;
            padding:30px 20px;
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;
            z-index:999;
            opacity:0;
            visibility:hidden;
            transform:translate3d(100%,0,0);
            transition:opacity var(--transition), visibility var(--transition), transform var(--transition);
        }
        #navbar.opening{
            will-change:transform;
        }
        #navbar.show{opacity:1;visibility:visible;transform:translate3d(0,0,0);}
        #navbar a{font-size:18px;color:#fff;inline-size:100%;justify-content:center;}
        .quote-btn{inline-size:220px;text-align:center;}
        .hero{min-height:70vh;min-block-size:max(70dvh,70svh);padding-block:80px;padding-inline:20px;text-align:center;}
        .hero h2{font-size:clamp(2rem,6vw,2.5rem);}
        .hero p{font-size:16px;}
        .hero-buttons{flex-direction:column;align-items:center;gap:15px;}
        .btn{inline-size:100%;max-inline-size:300px;}
        .trust-strip{padding-block:28px;padding-inline:20px;}
        .stats{padding-block:50px;padding-inline:20px;}
        .stats-grid{grid-template-columns:repeat(2,1fr);gap:25px;}
        .stat-item h3{font-size:clamp(1.875rem,5vw,2.125rem);}
        .stat-item p{font-size:15px;}
        .about,.products,.why-us{padding-block:70px;padding-inline:20px;}
        .about h2,.products h2,.why-us h2{font-size:clamp(1.75rem,4vw,2rem);margin-block-end:35px;}
        .about p{font-size:16px;}
        .product-grid{grid-template-columns:1fr;gap:25px;}
        .product-card{padding:24px;}
        .product-card img{max-block-size:220px;}
        .product-card h3{font-size:clamp(1.125rem,3vw,1.375rem);}
        .product-card h4{font-size:clamp(1.5rem,3vw,1.75rem);}
        .search-form{grid-template-columns:1fr;}
        .search-box{padding:22px;}
        .product-details{text-align:start;}
        .product-details h2{font-size:clamp(1.5rem,4vw,1.75rem);}
        .product-details p{font-size:16px;}
        .thumbnail{inline-size:75px;block-size:75px;}
        .main-image{max-inline-size:100%;}
        .why-grid{grid-template-columns:1fr;}
        .why-card{padding:28px;}
        .cta-section{padding-block:70px;padding-inline:20px;}
        .cta-section h2{font-size:clamp(1.625rem,4vw,1.875rem);}
        .cta-section p{font-size:16px;}
        .footer-grid{text-align:center;}
        .back-to-top{inset-inline-end:20px;inset-block-end:20px;inline-size:45px;block-size:45px;font-size:18px;}
        .footer-bottom{padding-block-start:20px;}
        .footer-bottom p{font-size:14px;}
    }

    @media (max-width:480px){
        .stats-grid{grid-template-columns:1fr;}
        .stat-item h3{font-size:clamp(1.75rem,6vw,1.875rem);}
        .hero h2{font-size:clamp(1.75rem,7vw,2rem);}
        .hero p{font-size:15px;}
        .product-card{padding:20px;}
        .product-card img{max-block-size:190px;}
        .product-card h3{font-size:clamp(1rem,4vw,1.25rem);}
        .product-card p{font-size:15px;}
        .product-card h4{font-size:clamp(1.375rem,4vw,1.625rem);}
        .thumbnail{inline-size:65px;block-size:65px;}
        .product-details h2{font-size:clamp(1.25rem,5vw,1.5rem);}
        .footer-col h3{font-size:clamp(1.125rem,4vw,1.25rem);}
    }
}
/* =====================================================
   END OF FILE v4.1
===================================================== */