/* ===========================================================
   JAY KISHAN POLYMERS — Logo-Aligned Premium Theme
   Palette derived from logo: #424733 / #727d48 / #8e8b6a
   Warm amber accent (#c89b3c) for premium industrial feel
   =========================================================== */

/* ----------  ROOT TOKENS  ---------- */
:root{
    /* Logo-derived olive scale */
    --olive-deepest: #1f2317;
    --olive-deep:    #2b3020;
    --olive:         #424733;     /* logo cls-1 */
    --olive-2:       #545b3d;
    --moss:          #727d48;     /* logo cls-2 */
    --moss-2:        #8a9655;
    --moss-light:    #aab57a;
    --khaki:         #8e8b6a;     /* logo cls-3 */
    --sand:          #e6e2d0;
    --cream:         #f7f4ec;
    --bg-alt:        #efeada;
    --paper:         #fbfaf5;

    /* Warm amber accent (complements olive beautifully) */
    --amber:         #c89b3c;
    --amber-2:       #e0b958;
    --amber-soft:    rgba(200,155,60,.12);
    --rust:          #b8602e;

    /* Semantic legacy names (mapped so PHP inline styles still work) */
    --navy:        var(--olive);
    --navy-2:      var(--olive-2);
    --navy-deep:   var(--olive-deep);
    --cyan:        var(--moss);
    --cyan-2:      var(--moss-2);
    --orange:      var(--amber);
    --orange-2:    var(--amber-2);
    --steel:       var(--khaki);
    --steel-light: var(--sand);

    --white:       #ffffff;
    --bg:          var(--cream);
    --text:        #2d3424;
    --muted:       #6b6f5a;

    --radius:      14px;
    --radius-lg:   22px;
    --shadow-sm:   0 6px 18px rgba(31,35,23,.08);
    --shadow:      0 14px 40px rgba(31,35,23,.12);
    --shadow-lg:   0 24px 60px rgba(31,35,23,.18);

    --grad-primary: linear-gradient(135deg,#2b3020 0%,#424733 55%,#727d48 130%);
    --grad-moss:    linear-gradient(135deg,#727d48 0%,#8a9655 100%);
    --grad-amber:   linear-gradient(135deg,#c89b3c 0%,#e0b958 100%);
    --grad-sand:    linear-gradient(135deg,#e6e2d0 0%,#cfc9b0 100%);
    --grad-hero:    linear-gradient(120deg, rgba(31,35,23,.92) 0%, rgba(66,71,51,.78) 60%, rgba(114,125,72,.55) 100%);

    --font-heading: 'Poppins', sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
}

/* ----------  BASE  ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    overflow-x:hidden;
    line-height:1.65;
    font-size:16px;
}
h1,h2,h3,h4,h5,h6{
    font-family: var(--font-heading);
    font-weight:700;
    color: var(--olive);
    letter-spacing:-.01em;
}
a{color:var(--moss); text-decoration:none; transition:.3s;}
a:hover{color:var(--amber);}
img{max-width:100%; height:auto; display:block;}
section{position:relative;}
.container{max-width:1280px;}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#e8e4d3;}
::-webkit-scrollbar-thumb{background:var(--grad-primary); border-radius:10px;}

/* ----------  PAGE LOADER  ---------- */
#page-loader{
    position:fixed; inset:0;
    background: var(--grad-primary);
    z-index:9999;
    display:flex; align-items:center; justify-content:center;
    transition: opacity .6s, visibility .6s;
}
#page-loader.hidden{opacity:0; visibility:hidden;}
.loader-content{text-align:center; color:#fff;}
.loader-logo{width:150px; max-width:60vw; filter:brightness(0) invert(1); margin-bottom:20px; animation: pulseLogo 1.4s ease-in-out infinite;}
.loader-ring{
    width:70px; height:70px; border:4px solid rgba(255,255,255,.2);
    border-top-color: var(--amber-2); border-radius:50%; margin:0 auto 20px;
    animation: spin 1s linear infinite;
}
.loader-content p{letter-spacing:2px; font-size:.8rem; text-transform:uppercase;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulseLogo{50%{transform:scale(1.05);}}

/* ----------  TOP BAR  ---------- */
.topbar{
    background: var(--olive-deepest);
    color:#d4d1bc; padding:8px 0; font-size:.85rem;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar a{color:#d4d1bc;}
.topbar a:hover{color:var(--amber-2);}
.topbar-left span{margin-right:22px;}
.topbar-left i,.topbar-right i{color:var(--moss-2); margin-right:6px;}
.topbar-right .divider{margin:0 12px; opacity:.4;}
.social-mini a{margin-left:10px;}

/* ----------  HEADER / NAV  ---------- */
.main-header{
    position:sticky; top:0; z-index:1000;
    background: rgba(251,250,245,.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(31,35,23,.05);
    transition:.4s;
}
.main-header.scrolled{
    background:#fff;
    box-shadow:0 8px 30px rgba(31,35,23,.12);
}
.main-header .navbar{padding:10px 0;}
.navbar-brand{display:flex; align-items:center; padding:0;}
.navbar-brand .brand-logo{
    height:60px; width:auto; max-width:240px;
    transition:.3s; object-fit:contain;
}
.main-header.scrolled .navbar-brand .brand-logo{height:54px;}

.navbar-nav .nav-link{
    color: var(--olive);
    font-weight:600;
    padding: 10px 16px !important;
    position:relative;
    font-size:.95rem;
}
.navbar-nav .nav-link::after{
    content:""; position:absolute; left:16px; right:16px; bottom:4px;
    height:2px; background:var(--grad-amber);
    transform:scaleX(0); transform-origin:left; transition:.35s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{color:var(--moss);}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{transform:scaleX(1);}

.btn-call{
    display:inline-flex; align-items:center; gap:12px;
    background: var(--grad-amber);
    color:#fff; padding:10px 20px; border-radius:50px;
    margin-left:14px;
    box-shadow: 0 8px 22px rgba(200,155,60,.35);
    transition:.3s;
}
.btn-call:hover{transform:translateY(-3px); color:#fff; box-shadow:0 14px 30px rgba(200,155,60,.5);}
.btn-call i{font-size:1.05rem;}
.btn-call small{display:block; font-size:.68rem; opacity:.9; text-transform:uppercase; line-height:1;}
.btn-call strong{font-size:.92rem; display:block; line-height:1.2; margin-top:2px;}

/* Hamburger */
.navbar-toggler{border:none; padding:8px; box-shadow:none !important;}
.toggler-bar{display:block; width:26px; height:3px; background:var(--olive); margin:5px 0; border-radius:2px; transition:.3s;}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2){opacity:0;}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ----------  BUTTONS  ---------- */
.btn-industrial{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    background: var(--grad-amber);
    color:#fff; font-weight:600;
    padding: 14px 28px; border-radius:50px; border:none;
    box-shadow:0 10px 26px rgba(200,155,60,.35);
    transition:.35s ease;
    position:relative; overflow:hidden;
    min-height:48px; font-size:.95rem;
    text-decoration:none;
}
.btn-industrial::before{
    content:""; position:absolute; inset:0;
    background: var(--grad-primary);
    transform: translateX(-100%); transition:.4s;
}
.btn-industrial span,.btn-industrial i{position:relative; z-index:1;}
.btn-industrial:hover{color:#fff; transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,35,23,.35);}
.btn-industrial:hover::before{transform:translateX(0);}

.btn-outline-light-industrial{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    border:2px solid rgba(255,255,255,.55); color:#fff;
    padding:12px 26px; border-radius:50px; font-weight:600; transition:.3s;
    min-height:48px; font-size:.95rem;
}
.btn-outline-light-industrial:hover{background:#fff; color:var(--olive); border-color:#fff;}

.btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--olive); font-weight:600; padding:10px 0;
}
.btn-ghost i{transition:.3s;}
.btn-ghost:hover i{transform:translateX(6px);}

/* ----------  SECTION HELPERS  ---------- */
.section{padding: 100px 0;}
.section-sm{padding: 70px 0;}
.section-title{
    text-align:center; max-width: 720px; margin: 0 auto 60px;
}
.section-title .eyebrow{
    display:inline-block; padding:6px 18px; border-radius:30px;
    background: rgba(114,125,72,.12); color: var(--moss);
    font-weight:600; font-size:.78rem; letter-spacing:2px; text-transform:uppercase;
    margin-bottom:14px;
}
.section-title h2{font-size:clamp(1.65rem, 3vw, 2.55rem); margin-bottom:14px; line-height:1.2;}
.section-title h2 span{color:var(--amber);}
.section-title p{color:var(--muted); font-size:clamp(.95rem, 1.2vw, 1.05rem);}
.divider-line{
    width:80px; height:4px; background:var(--grad-amber);
    border-radius:30px; margin: 14px auto;
}

/* ----------  HERO  ---------- */
.hero{
    position:relative; min-height: 100vh;
    background:
        radial-gradient(ellipse at 75% 40%, rgba(170,181,122,.18), transparent 55%),
        radial-gradient(ellipse at 15% 80%, rgba(200,155,60,.16), transparent 55%),
        linear-gradient(135deg, #1f2317 0%, #2b3020 50%, #424733 100%);
    color:#fff;
    display:flex; align-items:center;
    overflow:hidden;
}
.hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px);
    opacity:.7;
}
.hero::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 18% 30%, rgba(138,150,85,.28), transparent 50%),
                radial-gradient(circle at 82% 70%, rgba(200,155,60,.22), transparent 50%);
    pointer-events:none;
}
.hero-content{position:relative; z-index:2; padding: 120px 0 80px;}
.hero .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 18px; border-radius:30px;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    font-size:.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--amber-2);
    margin-bottom:22px; backdrop-filter:blur(8px);
}
.hero h1{
    color:#fff;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height:1.08; margin-bottom:20px;
    font-weight:800;
}
.hero h1 .accent{
    background: linear-gradient(135deg, #c8d690 0%, #e0b958 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.hero h1 .accent-2{color: var(--amber-2);}
.hero p.lead-text{font-size:clamp(.98rem, 1.3vw, 1.15rem); max-width:580px; color:rgba(255,255,255,.85); margin-bottom:30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-stats{
    display:flex; gap:30px; margin-top:50px; padding-top:30px;
    border-top:1px solid rgba(255,255,255,.12);
    flex-wrap:wrap;
}
.hero-stats > div{flex:1 1 130px; min-width:120px;}
.hero-stats .stat-num{font-size:clamp(1.6rem, 2.5vw, 2.2rem); font-weight:800; color:var(--amber-2); font-family:var(--font-heading); line-height:1;}
.hero-stats .stat-label{font-size:.78rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:1.5px; margin-top:6px;}

/* Floating granule visual */
.hero-visual{position:relative; z-index:2; perspective:1000px;}
.granule-cluster{
    position:relative; width:100%; aspect-ratio:1; max-width:480px; margin:auto;
}
.granule-cluster .ring{
    position:absolute; inset:0;
    border: 2px dashed rgba(255,255,255,.18);
    border-radius:50%;
    animation: spin 30s linear infinite;
}
.granule-cluster .ring.r2{inset:14%; animation-duration:22s; animation-direction:reverse; border-style:dotted;}
.granule-cluster .ring.r3{inset:28%; animation-duration:16s; border-color: rgba(170,181,122,.35);}
.granule-cluster .core{
    position:absolute; inset:34%;
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, var(--moss-2), var(--olive));
    box-shadow: 0 30px 80px rgba(114,125,72,.55), inset 0 0 60px rgba(255,255,255,.08);
    animation: pulseLogo 3s ease-in-out infinite;
}
.granule-cluster .pellet{
    position:absolute; width:42px; height:30px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #fbfaf5, #d4cfb8);
    box-shadow: 0 6px 14px rgba(0,0,0,.3);
    transform-origin:center;
}
.granule-cluster .pellet:nth-child(5){top:4%;  left:48%; background:radial-gradient(circle at 30% 30%, var(--amber-2), var(--amber));}
.granule-cluster .pellet:nth-child(6){top:48%; right:2%;  background:radial-gradient(circle at 30% 30%, var(--moss-light), var(--moss));}
.granule-cluster .pellet:nth-child(7){bottom:4%; left:50%; background:radial-gradient(circle at 30% 30%, var(--amber-2), var(--amber));}
.granule-cluster .pellet:nth-child(8){top:50%; left:0;    background:radial-gradient(circle at 30% 30%, var(--moss-light), var(--moss));}
.granule-cluster .pellet:nth-child(9){top:18%; right:14%;}
.granule-cluster .pellet:nth-child(10){bottom:18%; left:14%;}
.granule-cluster .pellet:nth-child(11){top:18%; left:14%;}
.granule-cluster .pellet:nth-child(12){bottom:18%; right:14%;}
.granule-cluster .pellet{animation: bob 5s ease-in-out infinite;}
.granule-cluster .pellet:nth-child(odd){animation-delay:-2.5s;}
@keyframes bob{50%{transform:translateY(-12px);}}

/* Scroll cue */
.scroll-cue{
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.7); text-align:center; z-index:3;
    font-size:.7rem; letter-spacing:3px; text-transform:uppercase;
}
.scroll-cue .mouse{
    width:24px; height:38px; border:2px solid rgba(255,255,255,.6);
    border-radius:14px; margin:0 auto 8px; position:relative;
}
.scroll-cue .mouse::before{
    content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:4px; height:8px; background:#fff; border-radius:2px;
    animation: dropDot 1.6s infinite;
}
@keyframes dropDot{0%{opacity:0; transform:translate(-50%,-6px);} 50%{opacity:1;} 100%{opacity:0; transform:translate(-50%,10px);}}

/* ----------  ABOUT PREVIEW  ---------- */
.about-preview .img-stack{position:relative;}
.about-preview .img-stack img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%;}
.about-preview .img-stack .badge-experience{
    position:absolute; bottom:-24px; left:-20px;
    background: var(--grad-amber); color:#fff;
    padding: 20px 26px; border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.about-preview .badge-experience strong{font-size:2.2rem; line-height:1; font-family:var(--font-heading);}
.about-preview .badge-experience small{display:block; text-transform:uppercase; letter-spacing:1.5px; font-size:.68rem; margin-top:6px;}
.feature-tick{
    display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;
}
.feature-tick .ico{
    flex:0 0 42px; width:42px; height:42px; border-radius:12px;
    background: var(--grad-moss); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 20px rgba(114,125,72,.35);
}
.feature-tick h6{margin-bottom:4px; font-size:1rem;}
.feature-tick p{color:var(--muted); margin:0; font-size:.92rem;}

/* ----------  COUNTERS  ---------- */
.counter-bar{
    background: var(--grad-primary);
    padding: 70px 0; color:#fff;
    position:relative; overflow:hidden;
}
.counter-bar::before{
    content:""; position:absolute; inset:0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.05) 0 6px, transparent 7px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,.04) 0 5px, transparent 6px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,.04) 0 5px, transparent 6px);
    background-size: 80px 80px, 60px 60px, 70px 70px;
    opacity:.7;
}
.counter-item{text-align:center; position:relative;}
.counter-item i{font-size:2rem; color:var(--moss-light); margin-bottom:12px;}
.counter-item .num{font-size:clamp(1.8rem, 3vw, 2.7rem); font-weight:800; font-family:var(--font-heading); display:inline-block;}
.counter-item .suffix{font-size:clamp(1.2rem, 2vw, 1.7rem); color:var(--amber-2); margin-left:4px;}
.counter-item p{margin:6px 0 0; text-transform:uppercase; letter-spacing:2px; font-size:.75rem; color:rgba(255,255,255,.8);}

/* ----------  PRODUCT CARDS  ---------- */
.product-card{
    background:#fff; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow: var(--shadow-sm); transition:.4s ease;
    position:relative; height:100%;
    display:flex; flex-direction:column;
    cursor:pointer;
}
.product-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.product-card .img-wrap{
    position:relative; aspect-ratio: 16/11; overflow:hidden;
    background: var(--grad-primary);
}
.product-card .img-wrap::before{
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, transparent 40%, rgba(31,35,23,.55));
}
.product-card .img-wrap img{width:100%; height:100%; object-fit:cover; transition: .8s ease; opacity:.85;}
.product-card:hover .img-wrap img{transform:scale(1.08);}
.product-card .tag{
    position:absolute; top:14px; left:14px; z-index:2;
    background: var(--grad-amber); color:#fff;
    padding: 5px 14px; border-radius:30px;
    font-size:.68rem; letter-spacing:2px; text-transform:uppercase; font-weight:600;
}
.product-card .badge-grade{
    position:absolute; top:14px; right:14px; z-index:2;
    background: rgba(255,255,255,.95); color:var(--olive);
    padding: 5px 12px; border-radius:6px;
    font-size:.7rem; font-weight:700;
}
.product-card .pellets-overlay{
    position:absolute; bottom:14px; left:14px; z-index:2;
    display:flex; gap:6px;
}
.product-card .pellets-overlay span{
    width:18px; height:18px; border-radius:50%;
    background: #fff; box-shadow:0 2px 6px rgba(0,0,0,.3);
    border: 2px solid rgba(255,255,255,.6);
}
.product-card .body{padding: 22px 22px 26px; flex:1; display:flex; flex-direction:column;}
.product-card .body h4{font-size:1.2rem; margin-bottom:8px;}
.product-card .body .desc{color:var(--muted); font-size:.92rem; margin-bottom:14px; flex:1;}
.product-card .meta{
    display:flex; justify-content:space-between; align-items:center;
    gap:10px;
    border-top:1px solid #eef0e6; padding-top:14px;
}
.product-card .meta .apps{color:var(--moss); font-weight:600; font-size:.82rem; line-height:1.3;}
.product-card .meta .arrow{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background: var(--sand); color:var(--olive);
    display:flex; align-items:center; justify-content:center; transition:.3s;
}
.product-card:hover .meta .arrow{background:var(--grad-amber); color:#fff;}

/* ----------  WHY CHOOSE US  ---------- */
.why-card{
    background:#fff; border-radius:var(--radius-lg);
    padding: 32px 24px; text-align:center; height:100%;
    box-shadow:var(--shadow-sm); transition:.4s;
    border-top: 4px solid transparent;
    position:relative; overflow:hidden;
}
.why-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background: var(--grad-amber);
    transform:scaleX(0); transform-origin:left; transition:.4s;
}
.why-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.why-card:hover::before{transform:scaleX(1);}
.why-card .ico-circle{
    width:76px; height:76px; border-radius:50%;
    background: var(--grad-primary);
    color:#fff; display:flex; align-items:center; justify-content:center;
    margin: 0 auto 18px; font-size:1.9rem;
    box-shadow: 0 14px 30px rgba(31,35,23,.25);
    transition:.4s;
}
.why-card:hover .ico-circle{transform:rotateY(180deg); background:var(--grad-amber);}
.why-card h5{margin-bottom:10px; font-size:1.1rem;}
.why-card p{color:var(--muted); font-size:.92rem; margin:0;}

/* ----------  APPLICATIONS GRID  ---------- */
.app-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:16px;}
.app-card{
    background:#fff; padding:26px 16px; border-radius:var(--radius);
    text-align:center; transition:.4s; cursor:default;
    box-shadow: var(--shadow-sm);
}
.app-card i{
    font-size:2rem; color:var(--moss); margin-bottom:12px;
    display:inline-block; transition:.4s;
}
.app-card h6{margin:0; font-size:.95rem; color:var(--olive);}
.app-card:hover{background: var(--grad-primary); transform:translateY(-6px);}
.app-card:hover i,.app-card:hover h6{color:#fff;}
.app-card:hover i{transform:scale(1.2);}

/* ----------  PROCESS TIMELINE  ---------- */
.process-section{background:var(--olive-deep); color:#fff; overflow:hidden;}
.process-section .section-title h2{color:#fff;}
.process-section .section-title p{color:rgba(255,255,255,.7);}
.process-timeline{position:relative;}
.process-timeline::before{
    content:""; position:absolute; top:55px; left:6%; right:6%; height:2px;
    background: linear-gradient(90deg, transparent, var(--moss-2) 20%, var(--amber) 80%, transparent);
}
.process-step{
    text-align:center; position:relative; padding-top:140px;
}
.process-step .num{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:110px; height:110px; border-radius:50%;
    background: var(--olive-deepest);
    border:2px solid rgba(170,181,122,.45);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading); font-weight:800; color:var(--moss-light);
    font-size:1.5rem; transition:.4s;
    z-index:1;
}
.process-step:hover .num{
    background: var(--grad-amber); border-color: var(--amber); color:#fff;
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 14px 36px rgba(200,155,60,.5);
}
.process-step h5{color:#fff; margin: 0 0 8px; font-size:1.05rem;}
.process-step p{color:rgba(255,255,255,.65); font-size:.88rem; margin:0;}

/* ----------  TESTIMONIALS  ---------- */
.testimonial-card{
    background:#fff; padding: 32px 28px; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); position:relative; height:100%;
}
.testimonial-card .quote-mark{
    position:absolute; top:22px; right:26px;
    font-size:3rem; color:var(--moss); opacity:.15; line-height:1;
}
.testimonial-card p{color:var(--muted); font-size:.97rem; font-style:italic; margin-bottom:22px;}
.testimonial-card .person{display:flex; align-items:center; gap:14px;}
.testimonial-card .avatar{
    width:50px; height:50px; border-radius:50%; flex-shrink:0;
    background: var(--grad-primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.05rem;
}
.testimonial-card .name{font-weight:700; color:var(--olive); display:block; font-size:.95rem;}
.testimonial-card .role{font-size:.82rem; color:var(--muted);}
.testimonial-card .stars{color:var(--amber); margin-bottom:14px;}
.swiper-pagination-bullet-active{background: var(--amber) !important;}

/* ----------  CTA BANNER  ---------- */
.cta-banner{
    position:relative;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(200,155,60,.25), transparent 60%),
        linear-gradient(120deg, #1f2317 0%, #2b3020 40%, #545b3d 100%);
    color:#fff; padding: 80px 0;
    text-align:center; overflow:hidden;
}
.cta-banner::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 28px);
}
.cta-banner h2{color:#fff; font-size:clamp(1.55rem,3vw,2.5rem); margin-bottom:14px;}
.cta-banner p{color:rgba(255,255,255,.85); max-width:640px; margin: 0 auto 28px; font-size:clamp(.95rem,1.2vw,1.05rem);}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ----------  PAGE BANNER  ---------- */
.page-banner{
    padding: 140px 0 70px;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(200,155,60,.18), transparent 55%),
        linear-gradient(135deg, #1f2317 0%, #2b3020 50%, #424733 100%);
    color:#fff; text-align:center; position:relative;
}
.page-banner::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 24px);
}
.page-banner::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 100%, rgba(170,181,122,.3), transparent 60%);
}
.page-banner .container{position:relative; z-index:1;}
.page-banner h1{color:#fff; font-size:clamp(1.8rem,4vw,3.2rem); margin-bottom:14px;}
.page-banner .breadcrumb{
    display:inline-flex; padding:8px 22px; border-radius:30px;
    background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(10px); margin:0; font-size:.9rem;
}
.page-banner .breadcrumb a{color:var(--amber-2);}
.page-banner .breadcrumb-item.active{color:#fff;}
.page-banner .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5);}

/* ----------  ABOUT PAGE  ---------- */
.vm-card{
    background:#fff; padding:32px 26px; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); height:100%;
    border-left:5px solid var(--moss); transition:.3s;
}
.vm-card.mission{border-left-color: var(--amber);}
.vm-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.vm-card .ico{
    width:62px; height:62px; border-radius:14px;
    background: var(--grad-moss); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; margin-bottom:16px;
}
.vm-card.mission .ico{background:var(--grad-amber);}
.vm-card h4,.vm-card h5{font-size:1.2rem; margin-bottom:10px;}
.vm-card p{color:var(--muted); margin:0;}

/* Journey Timeline */
.journey-timeline{position:relative; padding: 30px 0;}
.journey-timeline::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:3px; background:linear-gradient(180deg, var(--moss), var(--amber));
    transform:translateX(-50%);
}
.journey-item{
    width:50%; padding: 20px 36px; position:relative;
}
.journey-item:nth-child(odd){margin-left:auto; text-align:left;}
.journey-item:nth-child(even){text-align:right;}
.journey-item .card-j{
    background:#fff; padding:22px 24px; border-radius:var(--radius);
    box-shadow:var(--shadow-sm); transition:.3s;
}
.journey-item .card-j:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.journey-item .year{color:var(--amber); font-weight:800; font-family:var(--font-heading); font-size:1.1rem;}
.journey-item h6{margin: 6px 0 6px; font-size:1.05rem;}
.journey-item p{margin:0; color:var(--muted); font-size:.92rem;}
.journey-item::before{
    content:""; position:absolute; top:36px;
    width:16px; height:16px; border-radius:50%;
    background: var(--amber); border:4px solid #fff;
    box-shadow:0 0 0 3px var(--moss);
}
.journey-item:nth-child(odd)::before{left:-8px;}
.journey-item:nth-child(even)::before{right:-8px;}

/* Team */
.team-card{
    background:#fff; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-sm); transition:.4s; text-align:center;
}
.team-card:hover{transform:translateY(-8px); box-shadow:var(--shadow);}
.team-card .photo{
    height: 240px; background:var(--grad-primary);
    display:flex; align-items:center; justify-content:center; color:#fff;
    font-size:4.5rem;
}
.team-card .info{padding:20px;}
.team-card h6{margin-bottom:4px; font-size:1.05rem;}
.team-card .role{color:var(--muted); font-size:.84rem;}
.team-card .socials{margin-top:12px;}
.team-card .socials a{
    width:34px; height:34px; border-radius:50%;
    background: var(--sand); color:var(--olive);
    display:inline-flex; align-items:center; justify-content:center;
    margin:0 4px; transition:.3s;
}
.team-card .socials a:hover{background:var(--grad-amber); color:#fff;}

/* Certifications */
.cert-item{
    background:#fff; padding: 24px 18px; border-radius:var(--radius);
    text-align:center; box-shadow: var(--shadow-sm); transition:.3s;
}
.cert-item:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.cert-item .badge-ico{
    width:60px; height:60px; border-radius:50%;
    background: var(--grad-amber); color:#fff;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 12px; font-size:1.4rem;
}
.cert-item h6{margin:0 0 4px; font-size:1rem;}
.cert-item small{color:var(--muted);}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px;}
.gallery-item{
    position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
    cursor:pointer; box-shadow:var(--shadow-sm);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:.5s;}
.gallery-item:hover img{transform:scale(1.12);}
.gallery-item::after{
    content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.6rem;
    background: linear-gradient(180deg, transparent, rgba(31,35,23,.7));
    opacity:0; transition:.4s;
}
.gallery-item:hover::after{opacity:1;}

/* ----------  PRODUCTS PAGE  ---------- */
.product-filters{
    display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:40px;
}
.filter-btn{
    background:#fff; border:none; color:var(--olive);
    padding: 10px 20px; border-radius:50px; font-weight:600;
    box-shadow: var(--shadow-sm); transition:.3s; cursor:pointer; font-size:.88rem;
    min-height: 42px;
}
.filter-btn:hover{background:var(--sand);}
.filter-btn.active{background:var(--grad-primary); color:#fff; box-shadow: 0 10px 24px rgba(31,35,23,.25);}

.color-swatches{display:flex; flex-wrap:wrap; gap:10px;}
.swatch{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; padding:8px 14px; border-radius:30px;
    border:1px solid #ecead8; font-size:.82rem; font-weight:500; color:var(--text);
}
.swatch .dot{width:18px; height:18px; border-radius:50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.05); flex-shrink:0;}

.spec-table{width:100%; border-collapse:collapse; font-size:.92rem;}
.spec-table th,.spec-table td{padding: 12px 14px; border-bottom:1px solid #ecead8; text-align:left;}
.spec-table th{background:var(--sand); font-weight:600; color:var(--olive); text-transform:uppercase; font-size:.74rem; letter-spacing:1.5px;}

.product-popup-trigger{cursor:pointer;}

/* ----------  INFRASTRUCTURE  ---------- */
.infra-card{
    background:#fff; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-sm); transition:.4s; height:100%;
}
.infra-card:hover{transform:translateY(-8px); box-shadow:var(--shadow);}
.infra-card .img{height: 210px; overflow:hidden; position:relative;}
.infra-card .img img{width:100%; height:100%; object-fit:cover; transition:.6s;}
.infra-card:hover .img img{transform:scale(1.1);}
.infra-card .img::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent, rgba(31,35,23,.5));
}
.infra-card .body{padding:22px;}
.infra-card .body i{
    width:46px; height:46px; border-radius:12px;
    background:var(--grad-moss); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    margin-bottom:12px;
}
.infra-card h5{margin-bottom:8px; font-size:1.1rem;}
.infra-card p{color:var(--muted); margin:0; font-size:.92rem;}

.video-frame{
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    aspect-ratio:16/9; background:#000;
    box-shadow: var(--shadow-lg);
    cursor:pointer;
}
.video-frame img{width:100%; height:100%; object-fit:cover; opacity:.85;}
.video-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:80px; height:80px; border-radius:50%;
    background: var(--grad-amber); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; box-shadow: 0 20px 50px rgba(200,155,60,.5);
    cursor:pointer; transition:.3s;
}
.video-play::before{
    content:""; position:absolute; inset:-12px; border-radius:50%;
    border:2px solid rgba(200,155,60,.5);
    animation: ripple 2s linear infinite;
}
@keyframes ripple{
    0%{transform:scale(1); opacity:1;}
    100%{transform:scale(1.5); opacity:0;}
}
.video-play:hover{transform:translate(-50%,-50%) scale(1.1);}

.section-dark{background: var(--olive-deep); color:#fff;}
.section-dark h2,.section-dark h3,.section-dark h4,.section-dark h5,.section-dark h6{color:#fff;}
.section-dark p{color:rgba(255,255,255,.78);}

.safety-list{list-style:none; padding:0;}
.safety-list li{
    display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;
    color:var(--text);
}
.section-dark .safety-list li,
.process-section .safety-list li{color:rgba(255,255,255,.88);}
.safety-list i{
    flex:0 0 32px; width:32px; height:32px; border-radius:50%;
    background:var(--grad-moss); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:.78rem;
}

/* ----------  CONTACT  ---------- */
.contact-card{
    background:#fff; padding: 26px 20px; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); text-align:center; height:100%; transition:.3s;
}
.contact-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.contact-card .ico{
    width:68px; height:68px; border-radius:50%;
    background:var(--grad-primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 16px; font-size:1.4rem;
}
.contact-card.warm .ico{background:var(--grad-amber);}
.contact-card h6{margin-bottom:8px; font-size:1.02rem;}
.contact-card p,.contact-card a{color:var(--muted); margin:0; display:block; font-size:.92rem; word-break:break-word;}
.contact-card a:hover{color:var(--amber);}

.contact-form-wrap{
    background:#fff; padding: 36px; border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}
.contact-form-wrap h3{font-size:1.5rem;}
.contact-form-wrap .form-control{
    border: 1.5px solid #e8e5d4; border-radius:10px;
    padding: 12px 16px; font-size:.95rem; transition:.3s;
    background:#fbfaf3;
    min-height: 46px;
}
.contact-form-wrap textarea.form-control{min-height: 110px;}
.contact-form-wrap .form-control:focus{
    border-color: var(--moss); box-shadow: 0 0 0 4px rgba(114,125,72,.14);
    background:#fff;
}
.contact-form-wrap label{font-weight:600; color:var(--olive); font-size:.88rem; margin-bottom:6px;}

.alert-success-jkp{
    background: linear-gradient(135deg, rgba(114,125,72,.15), rgba(114,125,72,.05));
    border:1px solid rgba(114,125,72,.3); color: var(--olive);
    padding: 14px 18px; border-radius:10px; margin-bottom:18px;
}
.alert-danger-jkp{
    background: linear-gradient(135deg, rgba(184,96,46,.12), rgba(184,96,46,.04));
    border:1px solid rgba(184,96,46,.3); color: var(--rust);
    padding: 14px 18px; border-radius:10px; margin-bottom:18px;
}

.faq-accordion .accordion-item{
    border:none; margin-bottom:12px; border-radius:var(--radius) !important;
    overflow:hidden; box-shadow:var(--shadow-sm);
}
.faq-accordion .accordion-button{
    background:#fff; font-weight:600; color:var(--olive);
    padding:16px 22px; box-shadow:none !important; font-size:.96rem;
}
.faq-accordion .accordion-button:not(.collapsed){
    background: var(--grad-primary); color:#fff;
}
.faq-accordion .accordion-button:not(.collapsed)::after{filter: brightness(0) invert(1);}
.faq-accordion .accordion-body{padding:18px 22px; color:var(--muted); font-size:.93rem;}

.map-wrap iframe{
    width:100%; height:340px; border-radius:var(--radius-lg);
    box-shadow:var(--shadow); border:0;
    display:block;
}

/* Compact info card next to map */
.info-card{
    background:#fff; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); padding: 24px 26px;
}
.info-card .info-block + .info-block{margin-top:0;}
.info-card .info-block h6{
    color:var(--olive); margin:0 0 10px; font-size:1rem;
    display:flex; align-items:center; gap:10px;
}
.info-card .info-block h6 i{
    width:34px; height:34px; border-radius:10px;
    background:var(--grad-amber); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.85rem; flex-shrink:0;
}
.info-card .info-block:nth-child(3) h6 i{background:var(--grad-moss);}
.info-card .info-block p{
    color:var(--muted); font-size:.92rem; margin:0 0 4px;
    padding-left:44px;
}
.info-card .info-divider{
    height:1px; background:#ecead8; margin:18px 0;
}

/* ----------  FOOTER  ---------- */
.main-footer{background: var(--olive-deepest); color:#cfccb8;}
.footer-top{padding: 70px 0 35px;}
.footer-brand img{height:60px; max-width:100%; filter: brightness(0) invert(1); margin-bottom:16px;}
.footer-about{color:rgba(255,255,255,.7); font-size:.9rem; margin-bottom:18px;}
.footer-title{
    color:#fff; font-size:1.02rem; margin-bottom:20px; padding-bottom:12px;
    position:relative;
}
.footer-title::after{
    content:""; position:absolute; left:0; bottom:0;
    width:40px; height:3px; background:var(--grad-amber); border-radius:30px;
}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:8px;}
.footer-links a{color:rgba(255,255,255,.7); font-size:.9rem; transition:.3s; display:inline-flex; align-items:center; gap:8px;}
.footer-links a i{color:var(--amber); font-size:.68rem; transition:.3s;}
.footer-links a:hover{color:var(--amber-2); transform:translateX(4px);}

.footer-contact{list-style:none; padding:0; margin:0;}
.footer-contact li{display:flex; gap:12px; margin-bottom:12px; font-size:.88rem; color:rgba(255,255,255,.75);}
.footer-contact i{
    flex:0 0 36px; width:36px; height:36px; border-radius:10px;
    background: rgba(170,181,122,.18); color: var(--moss-light);
    display:flex; align-items:center; justify-content:center;
}
.footer-contact a{color:rgba(255,255,255,.75); word-break:break-word;}
.footer-contact a:hover{color:var(--amber-2);}

.footer-social{display:flex; gap:10px; flex-wrap:wrap;}
.footer-social a{
    width:38px; height:38px; border-radius:50%;
    background: rgba(255,255,255,.08); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:.3s;
}
.footer-social a:hover{background: var(--grad-amber); transform:translateY(-3px);}

.newsletter-form{margin-top:16px;}
.newsletter-form h6{color:#fff; margin-bottom:10px; font-size:.95rem;}
.newsletter-form .input-wrap{
    position:relative; background:rgba(255,255,255,.07);
    border-radius:50px; padding: 4px;
}
.newsletter-form input{
    width:100%; background:transparent; border:none; color:#fff;
    padding: 10px 50px 10px 16px; outline:none; font-size:.9rem;
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5);}
.newsletter-form button{
    position:absolute; right:4px; top:4px; bottom:4px; width:42px;
    border:none; border-radius:50px; background:var(--grad-amber); color:#fff;
}
.newsletter-msg{display:block; margin-top:8px; min-height:18px; color:var(--moss-light); font-size:.82rem;}

.footer-map iframe{filter: grayscale(.4) brightness(.7) contrast(1.1); transition:.4s;}
.footer-map iframe:hover{filter:none;}

.footer-bottom{
    background:#161812; padding: 16px 0;
    border-top:1px solid rgba(255,255,255,.05);
    color:rgba(255,255,255,.6); font-size:.83rem;
}
.footer-bottom p{margin:0;}

/* ----------  FLOATING WHATSAPP  ---------- */
.float-whatsapp{
    position:fixed; bottom:28px; left:24px; z-index:900;
    width:58px; height:58px; border-radius:50%;
    background:#25d366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; box-shadow: 0 16px 40px rgba(37,211,102,.5);
    transition:.3s;
}
.float-whatsapp:hover{color:#fff; transform:scale(1.1);}
.float-whatsapp .pulse{
    position:absolute; inset:-8px; border-radius:50%;
    border:2px solid rgba(37,211,102,.5);
    animation:ripple 2s linear infinite;
}

/* ----------  SCROLL TOP  ---------- */
#scrollTopBtn{
    position:fixed; bottom:28px; right:24px; z-index:900;
    width:48px; height:48px; border-radius:50%;
    background: var(--grad-primary); color:#fff;
    border:none; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 30px rgba(31,35,23,.4);
    opacity:0; visibility:hidden; transform:translateY(20px);
    transition:.3s;
}
#scrollTopBtn.visible{opacity:1; visibility:visible; transform:translateY(0);}
#scrollTopBtn:hover{background: var(--grad-amber);}

/* ----------  INQUIRY MODAL  ---------- */
.inquiry-modal{border-radius:var(--radius-lg); overflow:hidden; border:none;}
.modal-side{
    background: var(--grad-primary); color:#fff; padding: 40px 30px;
    display:flex; flex-direction:column; justify-content:center;
}
.modal-side h4{color:#fff; margin-bottom:10px;}
.modal-side p{color:rgba(255,255,255,.8); margin-bottom:20px; font-size:.92rem;}
.modal-side ul{list-style:none; padding:0; margin:0;}
.modal-side ul li{margin-bottom:10px; font-size:.9rem;}
.modal-side ul i{color:var(--amber-2); margin-right:10px;}
.modal-body-wrap{padding:32px 28px; background:#fff;}
.modal-body-wrap h5{margin-bottom:16px;}
.btn-close-modal{
    position:absolute; top:12px; right:12px; z-index:5;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.95); border:none; color:var(--olive);
    display:flex; align-items:center; justify-content:center;
}

/* ===========================================================
   RESPONSIVE BREAKPOINTS — Mobile First Friendly
   =========================================================== */

/* Tablet & below (≤991px) */
@media (max-width: 991.98px){
    .section{padding: 70px 0;}
    .section-title{margin-bottom:42px;}

    /* Navbar collapse */
    .main-header .navbar{padding:10px 0;}
    .navbar-collapse{
        background:#fff; margin-top:14px;
        border-radius:14px; padding:14px;
        box-shadow:0 14px 40px rgba(31,35,23,.12);
        max-height: calc(100vh - 120px);
        overflow-y:auto;
    }
    .navbar-nav{padding:6px 0; gap:2px;}
    .navbar-nav .nav-link{padding:12px 14px !important; border-radius:8px;}
    .navbar-nav .nav-link::after{display:none;}
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active{background: var(--sand); color:var(--olive);}
    .nav-cta{margin-top:14px;}
    .btn-call{margin-left:0; justify-content:center;}

    /* Hero */
    .hero{min-height: auto;}
    .hero-content{padding: 60px 0 50px;}
    .hero-stats{gap:18px; margin-top:36px; padding-top:24px;}
    .hero-stats > div{flex:1 1 calc(50% - 12px); min-width:0;}
    .scroll-cue{display:none;}

    /* Process */
    .process-timeline::before{display:none;}
    .process-step{padding-top:24px; margin-bottom:24px;}
    .process-step .num{position:relative; transform:none; left:auto; margin:0 auto; width:84px; height:84px; font-size:1.25rem;}

    /* Journey */
    .journey-timeline::before{left:20px;}
    .journey-item{width:100%; padding:14px 0 14px 50px; text-align:left !important; margin-left:0 !important;}
    .journey-item:nth-child(even)::before,
    .journey-item:nth-child(odd)::before{left:12px; right:auto;}

    /* About preview */
    .about-preview .img-stack .badge-experience{
        bottom:-18px; left:-12px; padding:14px 20px;
    }
    .about-preview .badge-experience strong{font-size:1.8rem;}

    /* Counters */
    .counter-bar{padding:50px 0;}

    /* Modal */
    .modal-side{padding:32px 24px;}
    .modal-body-wrap{padding:28px 22px;}
}

/* Mobile (≤767px) */
@media (max-width: 767.98px){
    body{font-size:15px;}
    .section{padding: 56px 0;}
    .section-title{margin-bottom:36px;}
    .section-title .eyebrow{font-size:.7rem; padding:5px 14px;}

    /* Hero */
    .hero-content{padding: 50px 0 40px;}
    .hero .eyebrow{font-size:.7rem; letter-spacing:2px;}
    .hero h1{font-size: 2rem; line-height:1.12;}
    .hero p.lead-text{font-size: .98rem;}
    .hero-actions{gap:10px;}
    .hero-actions .btn-industrial,
    .hero-actions .btn-outline-light-industrial{width:100%; padding:13px 22px;}
    .hero-stats{gap:14px; margin-top:30px;}
    .hero-stats > div{flex:1 1 calc(50% - 8px);}

    /* About preview img */
    .about-preview .img-stack{margin-bottom:30px;}
    .about-preview .img-stack .badge-experience{
        position:relative; bottom:auto; left:auto; margin: 14px 0 0;
        display:inline-block;
    }
    .about-preview .badge-experience strong{font-size:1.6rem;}

    /* Buttons */
    .btn-industrial,
    .btn-outline-light-industrial{padding:12px 22px; font-size:.92rem;}

    /* Cards */
    .product-card .body{padding:18px 18px 22px;}
    .product-card .body h4{font-size:1.1rem;}
    .why-card{padding:28px 22px;}
    .why-card .ico-circle{width:68px; height:68px; font-size:1.6rem;}
    .vm-card{padding:26px 22px;}
    .testimonial-card{padding:26px 22px;}
    .contact-form-wrap{padding:26px 20px;}
    .contact-form-wrap h3{font-size:1.3rem;}

    /* App grid */
    .app-grid{grid-template-columns:repeat(2, 1fr); gap:12px;}
    .app-card{padding:22px 14px;}
    .app-card i{font-size:1.7rem;}
    .app-card h6{font-size:.88rem;}

    /* Gallery */
    .gallery-grid{grid-template-columns:repeat(2, 1fr); gap:10px;}

    /* Counters */
    .counter-item{padding:0 8px;}
    .counter-item i{font-size:1.6rem; margin-bottom:8px;}

    /* Filters */
    .product-filters{gap:6px; margin-bottom:30px;}
    .filter-btn{padding:8px 16px; font-size:.82rem;}

    /* Footer */
    .footer-top{padding:50px 0 24px;}
    .footer-brand img{height:54px;}
    .footer-title{margin-bottom:16px; font-size:1rem;}
    .footer-map iframe{height:200px;}

    /* Page banner */
    .page-banner{padding:110px 0 50px;}
    .page-banner .breadcrumb{font-size:.82rem; padding:6px 18px;}

    /* CTA */
    .cta-banner{padding:60px 0;}
    .cta-actions{gap:10px;}
    .cta-actions .btn-industrial,
    .cta-actions .btn-outline-light-industrial{width:100%; max-width:320px;}

    /* Topbar hidden anyway, but ensure */
    .topbar{display:none !important;}

    /* Map height */
    .map-wrap iframe{height:280px;}

    /* Floating widgets */
    .float-whatsapp{width:54px; height:54px; font-size:1.45rem; left:16px; bottom:16px;}
    #scrollTopBtn{width:46px; height:46px; right:16px; bottom:16px;}

    /* Modal — full width on mobile */
    .modal-side{padding:28px 22px;}

    /* Process steps stack */
    .process-step{padding-top:18px;}

    /* Spec table — keep horizontal scroll */
    .spec-table{font-size:.85rem;}
    .spec-table th,.spec-table td{padding:10px 12px;}

    /* Inquiry modal cols stack */
    .modal-side{text-align:center;}
}

/* Small mobile (≤575px) */
@media (max-width: 575.98px){
    .container{padding-left:18px; padding-right:18px;}

    .navbar-brand .brand-logo{height:44px; max-width:170px;}

    .section{padding: 48px 0;}
    .section-title{margin-bottom:30px;}
    .section-title h2{font-size:1.55rem;}

    .hero-content{padding: 40px 0 30px;}
    .hero .eyebrow{margin-bottom:14px;}
    .hero h1{font-size: 1.75rem;}
    .hero p.lead-text{margin-bottom:22px;}
    .hero-stats{gap:10px; margin-top:24px; padding-top:18px;}
    .hero-stats > div{flex:1 1 calc(50% - 6px); padding:6px;}
    .hero-stats .stat-num{font-size:1.4rem;}
    .hero-stats .stat-label{font-size:.65rem; letter-spacing:1px;}

    .feature-tick{gap:10px;}
    .feature-tick .ico{flex-basis:36px; width:36px; height:36px;}

    .counter-item .num{font-size:1.7rem;}
    .counter-item .suffix{font-size:1.1rem;}
    .counter-item p{font-size:.68rem; letter-spacing:1.2px;}

    .why-card{padding:24px 18px;}
    .product-card .body{padding:16px;}

    /* App grid 2-up still */
    .app-grid{grid-template-columns:repeat(2, 1fr);}

    /* CTA */
    .cta-banner h2{font-size:1.4rem;}

    /* Process num */
    .process-step .num{width:72px; height:72px; font-size:1.1rem;}
    .process-step h5{font-size:.98rem;}
    .process-step p{font-size:.82rem;}

    /* Footer map */
    .footer-map iframe{height:180px;}

    /* Newsletter */
    .newsletter-form input{font-size:.85rem;}

    /* Modal close button safety */
    .btn-close-modal{top:10px; right:10px;}

    /* Spec table tiny */
    .spec-table{font-size:.8rem;}
    .spec-table th,.spec-table td{padding:8px 10px;}

    /* Modal popup product img */
    #productModal .pm-img{min-height:240px;}

    /* Page banner */
    .page-banner h1{font-size:1.7rem;}

    /* Buttons full width inside hero */
    .hero-actions{flex-direction:column; width:100%;}
    .hero-actions > *{width:100%;}
}

/* Extra small (≤380px) */
@media (max-width: 380px){
    .navbar-brand .brand-logo{height:38px; max-width:140px;}
    .hero h1{font-size:1.6rem;}
    .section-title h2{font-size:1.4rem;}
    .why-card .ico-circle{width:62px; height:62px; font-size:1.4rem;}
    .filter-btn{padding:7px 14px; font-size:.78rem;}
}

/* Large desktop (≥1400px) */
@media (min-width: 1400px){
    .container{max-width:1320px;}
}

/* Print */
@media print{
    .main-header,.main-footer,.float-whatsapp,#scrollTopBtn,.cta-banner{display:none !important;}
    body{background:#fff; color:#000;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
}