/* =========================================================
   EMPOWER CONCRETE SOLUTION — Premium Industrial Theme
   Brand Colors:
     Orange #F26B22   |   Navy #0F1B33   |   Soft Cream #F6F2EA
   ========================================================= */

:root{
    /* ---- Primary accent (orange) ----
       Variables keep the --brand-red name for backwards compatibility,
       but resolve to the new orange brand color.                       */
    --brand-red:        #F26B22;   /* vibrant industrial orange */
    --brand-red-dark:   #D45614;   /* deeper orange for hover/press */
    --brand-red-light:  #FB8B43;   /* lighter orange for highlights */
    --brand-orange:     #F26B22;   /* canonical alias */
    --brand-orange-dark:#D45614;
    --brand-orange-light:#FB8B43;

    /* ---- Navy (kept, slightly enriched) ---- */
    --brand-navy:       #0F1B33;
    --brand-navy-2:     #1B2A4A;
    --brand-navy-soft:  #2A3960;

    /* ---- Surfaces (cool modern off-white — no longer pure white, no beige) ----
       Three distinct light tiers so consecutive sections don't blend:
       cream-2 (lightest, body) → cream (mid) → mist (deepest)             */
    --brand-cream:      #E9EDF4;   /* CLEARLY distinct mid surface — section breaks */
    --brand-cream-2:    #F7F8FB;   /* very soft off-white — body / page bg */
    --brand-mist:       #DCE2EC;   /* deeper cool grey — for showcase strips */
    --brand-blush:      #FFD9BE;   /* soft peach accent */
    --brand-red-pale:   #FDE2CF;   /* light tint of orange (pill accents) */
    --brand-line:       #DAE0EA;   /* clean cool divider, slightly darker for visibility */
    --brand-text:       #475569;
}

*{ -webkit-font-smoothing: antialiased; }

html{ scroll-behavior: smooth; }

body{
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--brand-cream-2);
    color: var(--brand-navy);
    overflow-x: hidden;
}

.font-display{ font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }

/* ---------- Reusable utility ---------- */
.text-brand-red    { color: var(--brand-red); }
.text-brand-navy   { color: var(--brand-navy); }
.bg-brand-red      { background-color: var(--brand-red); }
.bg-brand-navy     { background-color: var(--brand-navy); }
.bg-brand-cream    { background-color: var(--brand-cream); }
.bg-brand-cream-2  { background-color: var(--brand-cream-2); }
.bg-brand-blush    { background-color: var(--brand-blush); }
.bg-brand-red-pale { background-color: var(--brand-red-pale); }
.bg-brand-mist     { background-color: var(--brand-mist); }
.border-brand-red  { border-color: var(--brand-red); }
.border-brand-navy { border-color: var(--brand-navy); }
.border-brand-blush{ border-color: var(--brand-blush); }

/* Comfortable but tighter rhythm — halves of neighbouring sections stack */
.section-pad{
    padding-top: 2.375rem;
    padding-bottom: 2.375rem;
}
@media (min-width: 768px){
    .section-pad{
        padding-top: 2.875rem;
        padding-bottom: 2.875rem;
    }
}

/* ---------- Contact page: form / map / locations (contact.php) ---------- */
.contact-main-grid{
    display: grid;
    gap: 2.5rem;
    grid-template-areas:
        "form"
        "locations"
        "mapaside";
}
@media (min-width: 1024px){
    .contact-main-grid{
        grid-template-columns: 1fr 1fr;
        column-gap: 3rem;
        row-gap: 3rem;
        align-items: start;
        grid-template-areas:
            "form mapaside"
            "locations locations";
    }
}
.contact-main-grid__form{ grid-area: form; }
.contact-main-grid__map{ grid-area: mapaside; }
.contact-main-grid__locations{ grid-area: locations; }

.contact-location-cards{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px){
    .contact-location-cards{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Premium Buttons ---------- */
.btn-primary{
    display:inline-flex; align-items:center; gap:.6rem;
    background: var(--brand-red);
    color:#fff; font-weight:700;
    padding:.95rem 1.7rem; border-radius:9999px;
    letter-spacing:.05em;
    box-shadow: 0 10px 25px -10px rgba(242,107,34,.55);
    transition: all .35s ease;
    position:relative; overflow:hidden;
}
.btn-primary:hover{ background:var(--brand-red-dark); transform: translateY(-2px); box-shadow:0 16px 30px -12px rgba(242,107,34,.65); }
.btn-primary::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-110%);
    transition: transform .7s ease;
}
.btn-primary:hover::after{ transform: translateX(110%); }

.btn-ghost{
    display:inline-flex; align-items:center; gap:.6rem;
    background: transparent;
    color: var(--brand-navy);
    border: 1.5px solid var(--brand-navy);
    padding:.9rem 1.6rem; border-radius:9999px;
    font-weight:700; letter-spacing:.05em;
    transition: all .3s ease;
}
.btn-ghost:hover{ background: var(--brand-navy); color:#fff; }

.btn-ghost-light{
    display:inline-flex; align-items:center; gap:.6rem;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.4);
    padding:.9rem 1.6rem; border-radius:9999px;
    font-weight:700; letter-spacing:.05em;
    transition: all .3s ease;
}
.btn-ghost-light:hover{ background:#fff; color: var(--brand-navy); }

/* ---------- Section Heading Eyebrow ---------- */
.eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    color: var(--brand-red);
    font-weight:800; font-size:.7rem;
    letter-spacing:.3em; text-transform:uppercase;
}
.eyebrow::before{
    content:""; width:32px; height:2px; background: var(--brand-red);
}

/* ---------- Mega Menu ---------- */
.has-mega{ position: static; }
.mega-menu{
    position: absolute;
    top:100%; left:0; right:0;
    background:#fff;
    border-top:1px solid var(--brand-line);
    box-shadow: 0 30px 60px -20px rgba(15,27,51,.18);
    opacity:0; visibility:hidden;
    transform: translateY(10px);
    transition: all .35s ease;
    z-index: 60;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu{
    opacity:1; visibility:visible; transform: translateY(0);
}

.mega-card{
    display:flex; gap:1rem;
    padding:1.1rem;
    border-radius:14px;
    border:1px solid transparent;
    transition: all .3s ease;
    background:#fff;
    position:relative;
    overflow:hidden;
}
.mega-card:hover{
    border-color: var(--brand-red);
    background: var(--brand-cream);
    transform: translateY(-2px);
}
.mega-card .thumb{
    flex: 0 0 90px; height: 90px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F1F4FB 0%, #E5EAF5 100%);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    position:relative;
}
.mega-card .thumb img{
    width:100%; height:100%; object-fit: contain; padding: 8px;
    transition: transform .5s ease;
}
.mega-card:hover .thumb img{ transform: scale(1.08); }
.mega-card h6{ font-weight:800; color: var(--brand-navy); font-size: .95rem; margin-bottom:.25rem; }
.mega-card p{ font-size:.78rem; color: var(--brand-text); line-height: 1.4; }
.mega-card .arrow{
    position:absolute; top: 1rem; right: 1rem;
    width:28px; height:28px; border-radius:9999px;
    background: var(--brand-red); color:#fff;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform: translate(-6px,6px);
    transition: all .3s ease;
}
.mega-card:hover .arrow{ opacity:1; transform: translate(0,0); }

/* ---------- Anti-Smog Spray Hero ---------- */
.hero-grad{
    background:
      radial-gradient(1100px 600px at 80% 20%, rgba(242,107,34,.18), transparent 60%),
      radial-gradient(900px 500px at 10% 90%, rgba(43,73,135,.45), transparent 60%),
      linear-gradient(135deg, #0B1428 0%, #0F1B33 50%, #131F3D 100%);
}
.grid-bg{
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* spray cone container */
.spray-stage{
    position:absolute; inset:0;
    pointer-events:none;
    overflow:hidden;
}

/* fog drifting layers */
.fog-layer{
    position:absolute;
    width:200%; height:100%;
    top:0; left:-50%;
    background:
      radial-gradient(600px 280px at 20% 60%, rgba(255,255,255,.10), transparent 60%),
      radial-gradient(500px 220px at 70% 40%, rgba(255,255,255,.07), transparent 60%),
      radial-gradient(700px 300px at 50% 80%, rgba(255,255,255,.05), transparent 60%);
    filter: blur(20px);
    opacity:.8;
    animation: fogDrift 28s linear infinite;
}
.fog-layer.layer-2{
    animation-duration: 40s;
    animation-direction: reverse;
    opacity:.5;
}
@keyframes fogDrift{
    0%   { transform: translate3d(0,0,0); }
    100% { transform: translate3d(25%,0,0); }
}

/* Mist particles spawned by JS in #mist-container */
.mist-particle{
    position:absolute;
    border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 40%, transparent 70%);
    filter: blur(8px);
    pointer-events:none;
    will-change: transform, opacity;
}

/* Spray cone visual */
.spray-cone{
    position:absolute;
    bottom: 18%; right: 8%;
    width: 60%; height: 55%;
    pointer-events:none;
    z-index: 5;
}
.spray-cone .cone{
    position:absolute;
    bottom: 0; right: 0;
    width: 100%; height: 100%;
    background: conic-gradient(from 200deg at 100% 100%, transparent 0deg, rgba(255,255,255,.18) 18deg, rgba(255,255,255,.05) 35deg, transparent 50deg);
    filter: blur(14px);
    transform-origin: bottom right;
    animation: conePulse 3.8s ease-in-out infinite;
}
@keyframes conePulse{
    0%,100%{ opacity:.8; transform: scale(1); }
    50%    { opacity:1;  transform: scale(1.05); }
}

/* small water droplets */
.droplet{
    position:absolute;
    width:3px; height:3px; border-radius:50%;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 8px rgba(255,255,255,.6);
    pointer-events:none;
    will-change: transform, opacity;
}

/* Nozzle pulse glow */
.nozzle-pulse{
    position:absolute;
    bottom: 18%; right: 8%;
    width: 14px; height: 14px;
    border-radius:50%;
    background: var(--brand-red);
    box-shadow: 0 0 0 0 rgba(242,107,34,.7);
    animation: nozzlePulse 1.6s ease-out infinite;
    z-index: 6;
}
@keyframes nozzlePulse{
    0%   { box-shadow: 0 0 0 0 rgba(242,107,34,.7); }
    70%  { box-shadow: 0 0 0 28px rgba(242,107,34,0); }
    100% { box-shadow: 0 0 0 0 rgba(242,107,34,0); }
}

/* ---------- Floating Cards ---------- */
.lift-card{
    box-shadow:
        0 2px 4px rgba(15,27,51,.07),
        0 8px 16px -8px rgba(15,27,51,.1),
        0 20px 44px -24px rgba(15,27,51,.22);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .3s ease;
    will-change: transform;
}
.lift-card:hover{
    transform: translateY(-8px);
    box-shadow:
        0 12px 28px -14px rgba(15,27,51,.14),
        0 22px 48px -22px rgba(15,27,51,.2),
        0 40px 72px -32px rgba(15,27,51,.34);
}

/* product card */
.product-card{
    background:#fff;
    border:1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    overflow:hidden;
    position:relative;
    box-shadow:
        0 1px 2px rgba(15,27,51,.06),
        0 18px 40px -22px rgba(15,27,51,.45);
    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .3s ease;
}
.product-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-red-light));
    transform: scaleX(0); transform-origin: left;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
    z-index: 4;
}
.product-card:hover{
    transform: translateY(-10px);
    box-shadow:
        0 4px 8px rgba(15,27,51,.08),
        0 30px 55px -20px rgba(15,27,51,.55),
        0 0 0 1px rgba(242,107,34,.35);
}
.product-card:hover::before{ transform: scaleX(1); }

.product-card .img-wrap{
    background: linear-gradient(135deg, #F4F6FB 0%, #E9EEF7 100%);
    aspect-ratio: 4/3;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    position:relative;
}
.product-card .img-wrap::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(420px 220px at 50% 100%, rgba(242,107,34,.18), transparent 65%);
    opacity:0; transition: opacity .4s ease;
}
.product-card:hover .img-wrap::after{ opacity:1; }
.product-card .img-wrap img{
    width:82%; height:82%; object-fit:contain;
    filter: drop-shadow(0 12px 18px rgba(15,27,51,.18));
    transition: transform .6s ease, filter .4s ease;
}
.product-card:hover .img-wrap img{
    transform: scale(1.08) rotate(-1.5deg);
    filter: drop-shadow(0 18px 24px rgba(15,27,51,.28));
}
.product-card .tag{
    position:absolute; top: 1rem; left: 1rem;
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color:#fff;
    font-size:.65rem; font-weight:800; letter-spacing:.15em;
    padding:.4rem .8rem; border-radius:9999px;
    text-transform:uppercase;
    box-shadow: 0 8px 18px -6px rgba(242,107,34,.65);
    z-index: 3;
}
/* Arrow indicator that swings in from the right on hover */
.product-card .img-wrap .pc-arrow{
    position:absolute; bottom: 1rem; right: 1rem;
    width: 40px; height: 40px; border-radius: 9999px;
    background: var(--brand-red); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transform: translate(12px, 12px) scale(.7);
    opacity: 0;
    transition: all .45s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 10px 22px -8px rgba(242,107,34,.7);
    z-index: 3;
}
.product-card:hover .pc-arrow{
    transform: translate(0,0) scale(1);
    opacity: 1;
}

/* Catalogue only: allow badge to sit half-in / half-out top-left corner */
.product-card.product-card-catalog{
    overflow: visible;
}
.product-card-catalog .tag-catalog-peek{
    position: absolute;
    top: -0.2rem;
    left: 2.1rem;
    z-index: 25;
    margin: 0;
    pointer-events: none;
    transform: translate(-42%, -42%);
    transform-origin: center center;
    max-width: min(92%, 220px);
    text-align: center;
    line-height: 1.15;
}
/* Catalogue: fill image band edge-to-edge (no 82% side gutters) */
.product-card-catalog .img-wrap img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

/* Catalogue cards: footer row — view details + inline contact strip */
.catalog-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.65rem .75rem;
}
.catalog-card-footer-view{
    color: var(--brand-red);
    text-decoration:none;
    transition: color .2s ease, gap .3s cubic-bezier(.2,.7,.2,1);
}
.catalog-card-footer-view:hover{
    color: var(--brand-red-dark);
}
.catalog-contact-inline{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    flex-shrink:0;
}
.catalog-contact-inline__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:2.375rem;
    height:2.375rem;
    border-radius:12px;
    text-decoration:none;
    transition:
        transform .22s cubic-bezier(.2,.7,.2,1),
        box-shadow .22s ease,
        filter .2s ease,
        background .22s ease,
        border-color .22s ease,
        color .22s ease;
    box-shadow:
        0 2px 6px -2px rgba(15,27,51,.1),
        0 1px 0 rgba(255,255,255,.65) inset;
}
.catalog-contact-inline__btn:hover{
    transform: translateY(-2px) scale(1.04);
}
.catalog-contact-inline__btn:focus-visible{
    outline:2px solid var(--brand-red);
    outline-offset:2px;
}
/* Channel colours — phone */
.catalog-contact-inline__btn--call{
    background: linear-gradient(152deg, rgba(242,107,34,.2) 0%, rgba(251,139,67,.12) 100%);
    border: 1px solid rgba(242,107,34,.42);
    color: var(--brand-red-dark);
}
.catalog-contact-inline__btn--call:hover{
    background: linear-gradient(152deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    border-color: var(--brand-red-dark);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(242,107,34,.48);
}
/* WhatsApp — brand green, white glyph */
.catalog-contact-inline__btn--wa{
    background: linear-gradient(152deg, #25D366 0%, #1fa855 55%, #128C7E 100%);
    border: 1px solid rgba(18,140,126,.85);
    color: #fff;
    box-shadow:
        0 2px 8px -2px rgba(37,211,102,.35),
        0 1px 0 rgba(255,255,255,.22) inset;
}
.catalog-contact-inline__btn--wa:hover{
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -8px rgba(37,211,102,.5);
}
/* Email */
.catalog-contact-inline__btn--mail{
    background: linear-gradient(152deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(59,130,246,.38);
    color: #1d4ed8;
}
.catalog-contact-inline__btn--mail:hover{
    background: linear-gradient(152deg, #3b82f6 0%, #2563eb 100%);
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(37,99,235,.42);
}
.catalog-contact-inline__ico,
.catalog-contact-inline__btn .icon-wa{
    width:1.125rem;
    height:1.125rem;
    flex-shrink:0;
}
.catalog-contact-inline__btn--call svg,
.catalog-contact-inline__btn--mail svg{
    stroke-width:2.35px;
}
.catalog-contact-inline__btn--wa svg{
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}

/* Catalogue cards: compact contact shortcuts (legacy — kept if referenced elsewhere) */
.catalog-contact-ring{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:2.55rem;
    height:2.55rem;
    border-radius:9999px;
    border:1px solid var(--brand-line);
    background:#fff;
    color: var(--brand-navy);
    transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.catalog-contact-ring:hover{
    border-color:rgba(242,107,34,.55);
    background:rgba(247,239,229,.96);
    color: var(--brand-red);
    transform: translateY(-2px);
    box-shadow:0 8px 18px -12px rgba(15,27,51,.25);
}
.catalog-contact-ring.catalog-contact-ring--wa{
    background:rgba(37,211,102,.07);
}
.catalog-contact-ring.catalog-contact-ring--wa:hover{
    border-color:#25D366;
    color:#075E54;
    background:rgba(37,211,102,.14);
}
.catalog-contact-ring svg{
    flex-shrink:0;
}
.catalog-card-arrow{
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .catalog-card-arrow{
    transform: translateX(5px);
}

/* ---------- Stat Counter ---------- */
.stat{
    background:#fff;
    border:1px solid var(--brand-line);
    border-radius: 18px;
    padding: 1.6rem 1.4rem;
    transition: all .35s ease;
}
.stat:hover{ border-color: var(--brand-red); transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(15,27,51,.2); }
.stat-num{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size: 2.6rem; font-weight: 800;
    color: var(--brand-navy);
    letter-spacing:-.02em;
}
.stat-num span{ color: var(--brand-red); }

/* ---------- Why Choose Card ---------- */
.feature-card{
    background:#fff;
    border:1px solid var(--brand-line);
    border-radius: 20px;
    padding: 2rem 1.7rem;
    position:relative; overflow:hidden;
    box-shadow:
        0 2px 4px rgba(15,27,51,.06),
        0 10px 22px -12px rgba(15,27,51,.12),
        0 22px 46px -26px rgba(15,27,51,.22),
        0 40px 72px -42px rgba(15,27,51,.1);
    transition: border-color .45s ease, transform .45s ease, box-shadow .45s ease;
}
.feature-card::before{
    content:""; position:absolute; top:0; left:0; right:0;
    height:3px; background: var(--brand-red);
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s ease;
}
.feature-card:hover{
    border-color: var(--brand-red);
    transform: translateY(-6px);
    box-shadow:
        0 16px 36px -16px rgba(15,27,51,.18),
        0 28px 52px -24px rgba(15,27,51,.22),
        0 44px 76px -34px rgba(15,27,51,.34),
        0 4px 14px -4px rgba(242,107,34,.14);
}
.feature-card:hover::before{ transform: scaleX(1); }
.feature-icon{
    width:54px; height:54px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(242,107,34,.12), rgba(242,107,34,.04));
    color: var(--brand-red);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 1.2rem;
    transition: all .4s ease;
}
.feature-card:hover .feature-icon{
    background: var(--brand-red); color:#fff;
    transform: rotate(-6deg) scale(1.05);
}

/* Homepage · Why Choose (cream band) — deeper separation from bg */
.section-pad.bg-brand-cream .feature-card{
    box-shadow:
        0 3px 6px rgba(15,27,51,.08),
        0 12px 28px -14px rgba(15,27,51,.16),
        0 26px 52px -30px rgba(15,27,51,.28),
        0 48px 80px -44px rgba(15,27,51,.12);
}
.section-pad.bg-brand-cream .feature-card:hover{
    box-shadow:
        0 18px 40px -18px rgba(15,27,51,.22),
        0 32px 58px -26px rgba(15,27,51,.26),
        0 50px 88px -36px rgba(15,27,51,.38),
        0 4px 16px -2px rgba(242,107,34,.16);
}
.section-pad.bg-brand-cream .lift-card{
    box-shadow:
        0 3px 6px rgba(15,27,51,.08),
        0 14px 32px -18px rgba(15,27,51,.2),
        0 32px 56px -34px rgba(15,27,51,.26);
}
.section-pad.bg-brand-cream .lift-card:hover{
    box-shadow:
        0 14px 34px -16px rgba(15,27,51,.18),
        0 28px 54px -26px rgba(15,27,51,.24),
        0 46px 82px -34px rgba(15,27,51,.38);
}

/* ---------- Testimonial ---------- */
.testimonial{
    background:#fff; border:1px solid var(--brand-line);
    border-radius: 22px; padding: 2.2rem;
    position:relative;
    box-shadow:
        0 2px 5px rgba(15,27,51,.07),
        0 10px 26px -14px rgba(15,27,51,.14),
        0 24px 48px -28px rgba(15,27,51,.24),
        0 44px 78px -40px rgba(15,27,51,.11);
    transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.testimonial::before{
    content:"\201C";
    position:absolute; top: 8px; right: 22px;
    font-family: Georgia, serif; font-size: 6rem;
    color: var(--brand-red); opacity:.12; line-height:1;
}
.testimonial:hover{
    border-color: var(--brand-red);
    transform: translateY(-5px);
    box-shadow:
        0 16px 38px -16px rgba(15,27,51,.2),
        0 28px 54px -24px rgba(15,27,51,.24),
        0 46px 82px -34px rgba(15,27,51,.36),
        0 4px 16px -3px rgba(242,107,34,.12);
}

/* Homepage · testimonials carousel (3 cards per slide) */
.testimonials-carousel{
    --tc-slides: 3;
    position:relative;
    padding-inline: clamp(0px, 2vw, 2.75rem);
}
.testimonials-carousel .relative{
    position:relative;
    z-index:1;
}
.testimonials-viewport{
    overflow: hidden;
    border-radius: 4px;
    /* Room for hover translateY + border + box-shadow (overflow:hidden was clipping) */
    padding: clamp(14px, 2.5vw, 22px) clamp(8px, 1.5vw, 14px);
    margin-inline: clamp(0rem, .5vw, .25rem);
    box-sizing: border-box;
}
.testimonials-viewport:focus-visible{
    outline: 2px solid rgba(242,107,34,.55);
    outline-offset: 3px;
}
.testimonials-carousel-track{
    display:flex;
    width: calc(var(--tc-slides) * 100%);
    transform: translateX(0);
    transition: transform 0.62s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
@media (prefers-reduced-motion: reduce){
    .testimonials-carousel-track{ transition-duration: .01ms; }
}
.testimonials-carousel-slide{
    flex: 0 0 calc(100% / var(--tc-slides));
    box-sizing:border-box;
    padding-inline: 0;
}
.testimonials-carousel .testimonials-slide-grid{
    align-items: stretch;
    /* Keeps card hover lift inside slide before viewport clip */
    padding-block: min(10px, 1.25vw);
    padding-inline: 2px;
}
.testimonials-carousel-arrow{
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--brand-line);
    color: var(--brand-navy);
    box-shadow:
        0 3px 8px rgba(15,27,51,.08),
        0 12px 28px -12px rgba(15,27,51,.22),
        0 28px 52px -22px rgba(15,27,51,.3);
    z-index: 4;
    transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease;
}
.testimonials-carousel-arrow:hover{
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
    box-shadow:
        0 8px 22px -10px rgba(242,107,34,.42),
        0 20px 44px -18px rgba(242,107,34,.45),
        0 32px 56px -24px rgba(242,107,34,.22);
}
.testimonials-carousel-arrow:active{ transform: translateY(-50%) scale(.94); }
.testimonials-carousel-prev{ left: 0; }
.testimonials-carousel-next{ right: 0; }
@media (max-width: 767px){
    .testimonials-carousel{ padding-inline: .25rem; }
    .testimonials-carousel-prev{ left: -2px; }
    .testimonials-carousel-next{ right: -2px; }
    .testimonials-carousel-arrow{
        width: 40px; height: 40px;
        background: rgba(255,255,255,.92);
        box-shadow:
            0 4px 10px rgba(15,27,51,.1),
            0 14px 32px -14px rgba(15,27,51,.28),
            0 30px 54px -22px rgba(15,27,51,.36);
    }
}
.testimonials-carousel-dots-wrap{
    display:flex;
    justify-content:center;
    gap: .55rem;
    margin-top: 1.25rem;
}
.testimonials-carousel-dot{
    width: 10px; height: 10px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(15,27,51,.18);
    cursor: pointer;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), background .28s ease, width .32s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.testimonials-carousel-dot:hover{ background: rgba(242,107,34,.5); transform: scale(1.15); }
.testimonials-carousel-dot.is-active{
    width: 2rem;
    background: linear-gradient(90deg, var(--brand-red), #ff8f4d);
    box-shadow:
        0 3px 8px -2px rgba(242,107,34,.4),
        0 10px 22px -8px rgba(242,107,34,.38);
}

.testimonials-carousel .carousel-card.testimonial:hover{
    transform: translateY(-5px);
}

.float-stack{
    position: fixed; right: 18px; bottom: 22px;
    display:flex; flex-direction:column; gap:.7rem;
    z-index: 90;
}
.float-btn{
    width:54px; height:54px; border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    box-shadow: 0 14px 25px -10px rgba(0,0,0,.35);
    transition: all .35s ease;
    position:relative;
    /* default ring color, overridden per variant below */
    --ring-rgb: 255, 255, 255;
}
.float-btn:hover{ transform: translateY(-3px) scale(1.05); }
.float-btn .ring{
    position:absolute; inset:0; border-radius:9999px;
    animation: ring 2.4s ease-out infinite;
}
.float-btn.whatsapp { background:#25D366;            --ring-rgb: 37, 211, 102; }
.float-btn.phone    { background: var(--brand-red);  --ring-rgb: 242, 107, 34; }
.float-btn.email    { background: var(--brand-navy); --ring-rgb: 15, 27, 51;   }
@keyframes ring{
    0%   { box-shadow: 0 0 0 0 rgba(var(--ring-rgb), .55); }
    70%  { box-shadow: 0 0 0 18px rgba(var(--ring-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ring-rgb), 0); }
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: all .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* staggered children */
.reveal-stagger > *{ opacity:0; transform: translateY(20px); transition: all .7s ease; }
.reveal-stagger.in > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .45s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .55s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay: .65s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay: .75s; }
.reveal-stagger.in > *:nth-child(9){ transition-delay: .84s; }
.reveal-stagger.in > *:nth-child(10){ transition-delay: .93s; }
.reveal-stagger.in > *:nth-child(11){ transition-delay: 1.02s; }
.reveal-stagger.in > *:nth-child(12){ transition-delay: 1.1s; }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; }
.marquee-track{
    display:flex; gap: 4rem; align-items:center;
    width: max-content;
    animation: marquee 28s linear infinite;
}
@keyframes marquee{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- Top utility bar ---------- */
.utility-bar{
    background: var(--brand-navy);
    color:#cbd5e1;
    font-size: .72rem;
    letter-spacing: .04em;
}
.utility-bar a{ color:#cbd5e1; transition: color .25s ease; }
.utility-bar a:hover{ color:#fff; }

/* ---------- Header / Nav ---------- */
.main-nav a.nav-link{
    position:relative;
    font-weight:700; font-size: .82rem; letter-spacing:.06em;
    color: var(--brand-navy);
    padding:.4rem 0;
    text-transform: uppercase;
    transition: color .25s ease;
}
.main-nav a.nav-link::after{
    content:""; position:absolute; bottom:-4px; left:0;
    width:0; height:2px; background: var(--brand-red);
    transition: width .35s ease;
}
.main-nav a.nav-link:hover{ color: var(--brand-red); }
.main-nav a.nav-link:hover::after{ width:100%; }
.main-nav a.nav-link.active{ color: var(--brand-red); }
.main-nav a.nav-link.active::after{ width:100%; }

.icon-btn{
    width:40px; height:40px; border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--brand-line);
    color: var(--brand-navy);
    transition: all .3s ease;
    position: relative;
}
.icon-btn:hover{ background: var(--brand-red); color:#fff; border-color: var(--brand-red); transform: translateY(-2px); }

/* WhatsApp icon: continuous wiggle + dual pulse rings */
.icon-btn.whatsapp{
    background: rgba(37,211,102,.10);
    border-color: rgba(37,211,102,.45);
    color: #25D366;
    animation: waWiggle 4.5s ease-in-out infinite;
    overflow: visible;
}
.icon-btn.whatsapp::before{
    content:""; position:absolute; inset:-4px;
    border-radius:9999px;
    border: 2px solid #25D366;
    opacity: 0;
    animation: waRing 2.4s cubic-bezier(.2,.7,.2,1) infinite;
    pointer-events:none;
}
.icon-btn.whatsapp::after{
    content:""; position:absolute; inset:-4px;
    border-radius:9999px;
    border: 2px solid #25D366;
    opacity: 0;
    animation: waRing 2.4s cubic-bezier(.2,.7,.2,1) infinite;
    animation-delay: 1.2s;
    pointer-events:none;
}
.icon-btn.whatsapp:hover{
    background:#25D366; border-color:#25D366; color:#fff;
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.06);
}
.icon-btn.whatsapp .icon-wa{
    animation: waSwing 2.4s ease-in-out infinite;
    transform-origin: 50% 100%;
}
@keyframes waWiggle{
    0%, 65%, 100%{ transform: rotate(0); }
    70%{ transform: rotate(-14deg); }
    74%{ transform: rotate(12deg); }
    78%{ transform: rotate(-10deg); }
    82%{ transform: rotate(8deg); }
    86%{ transform: rotate(-4deg); }
    90%{ transform: rotate(0); }
}
@keyframes waRing{
    0%   { transform: scale(.95); opacity: .8; }
    100% { transform: scale(1.55); opacity: 0; }
}
@keyframes waSwing{
    0%,100%{ transform: rotate(0); }
    50%{ transform: rotate(-6deg); }
}

/* ---------- Page Banner (sub pages) ---------- */
.page-banner{
    position:relative; overflow:hidden;
    background:
      radial-gradient(900px 500px at 20% 80%, rgba(242,107,34,.25), transparent 60%),
      linear-gradient(135deg, #0B1428 0%, #0F1B33 60%, #131F3D 100%);
    color:#fff;
    padding: 3.35rem 0 2.35rem;
}
@media (min-width: 768px){ .page-banner{ padding: 4.35rem 0 3rem; } }
.page-banner::after{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at top, #000, transparent 80%);
}

/* ---------- Form ---------- */
.form-input{
    width:100%;
    background:#fff;
    border:1.5px solid var(--brand-line);
    border-radius: 12px;
    padding: .9rem 1rem;
    color: var(--brand-navy);
    transition: all .25s ease;
    outline:none;
}
.form-input:focus{ border-color: var(--brand-red); box-shadow: 0 0 0 4px rgba(242,107,34,.1); }
.form-input::placeholder{ color:#94A3B8; }

/* ---------- Mobile menu ---------- */
.mobile-menu{ transition: all .35s ease; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: #f1f1f1; }
::-webkit-scrollbar-thumb{ background: var(--brand-navy); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--brand-red); }

/* ---------- Selection ---------- */
::selection{ background: var(--brand-red); color:#fff; }

/* ---------- Helper ---------- */
.gradient-text{
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Section title eyebrow — horizontal drift L↔R + glow (.section-eyebrow-attn) */
@keyframes section-eyebrow-attn{
    0%, 100%{
        transform: translateX(-8px);
        letter-spacing: .28em;
        opacity: .88;
        filter: saturate(1);
        text-shadow: none;
    }
    50%{
        transform: translateX(8px);
        letter-spacing: .38em;
        opacity: 1;
        filter: saturate(1.18);
        text-shadow: 0 6px 32px rgba(242,107,34,.52), 0 0 22px rgba(242,107,34,.38);
    }
}
.eyebrow.section-eyebrow-attn{
    animation: section-eyebrow-attn 5.5s ease-in-out infinite;
}

/* =========================================================
   QUOTE MODAL — opens from header CTA
   ========================================================= */
.qm-overlay{
    position: fixed; inset: 0;
    background: rgba(10, 17, 38, .75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.qm-overlay.open{
    opacity: 1; visibility: visible;
    transition: opacity .35s ease;
}
.qm-dialog{
    background: #fff;
    border-radius: 24px;
    max-width: 1000px; width: 100%;
    overflow: hidden;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,.45);
    transform: translateY(40px) scale(.96);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    position: relative;
    margin: auto;
}
.qm-overlay.open .qm-dialog{ transform: translateY(0) scale(1); }

.qm-header{
    /* Navy base + orange highlights (original dark modal header) */
    background:
        radial-gradient(ellipse 130% 100% at 92% -30%, rgba(251,139,67,.52) 0%, transparent 52%),
        radial-gradient(ellipse 90% 80% at 5% 110%, rgba(242,107,34,.38) 0%, transparent 48%),
        linear-gradient(125deg,
            var(--brand-navy) 0%,
            var(--brand-navy-2) 44%,
            var(--brand-navy-soft) 100%);
    color: #fff;
    padding: 1rem 1.5rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
    isolation: isolate;
}
.qm-header::before{
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 150px; height: 150px;
    background: rgba(242,107,34,.3);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.qm-header::after{
    content: ""; position: absolute; left: -40px; bottom: -40px;
    width: 120px; height: 120px;
    background: rgba(242,107,34,.14);
    border-radius: 50%;
    filter: blur(35px);
    pointer-events: none;
}
.qm-header-tagline{
    margin: .15rem 0 0;
    color: rgba(255,255,255,.78);
}
.qm-header h3,
.qm-header #qmTitle{
    color: #fff;
    text-shadow: 0 1px 3px rgba(15,27,51,.35);
}

.qm-close{
    position: absolute; top: 10px; right: 10px;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-radius: 9999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .35s ease;
    z-index: 50;
    box-shadow: 0 2px 12px -6px rgba(0,0,0,.35);
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}
.qm-close svg,
.qm-close i{
    pointer-events: none;
}
.qm-close:hover{
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
    transform: rotate(90deg);
}

.qm-body{ padding: 1.5rem 1.75rem 1.75rem; }

/* Two-column layout: form left, contact options right */
.qm-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 860px){
    .qm-grid{ grid-template-columns: 1.15fr 1fr; gap: 2rem; }
}

.qm-section-title{
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .5rem .65rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800; color: var(--brand-navy);
    font-size: 1rem; line-height: 1.2;
    margin-bottom: 1rem;
}
.qm-section-title .bar{
    width: 24px; height: 3px;
    background: var(--brand-red);
    border-radius: 2px;
}
/* Light-context pill (when used inside section titles) */
.qm-section-title .qm-pill{
    margin-left: auto;
    background: var(--brand-red-pale);
    border: 1px solid rgba(242,107,34,.25);
    color: var(--brand-red);
    padding: .25rem .6rem;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -6px rgba(242,107,34,.4);
}
.qm-section-title .qm-pill .pulse{
    width: 6px; height: 6px; border-radius: 9999px;
    background: var(--brand-red);
    box-shadow: 0 0 0 0 rgba(242,107,34,.7);
    animation: nozzlePulse 1.6s ease-out infinite;
    display: inline-block;
}

/* ===== Form (left) ===== */
.qm-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.qm-field{ margin-bottom: .65rem; }
.qm-field label{
    display: block;
    font-size: .68rem; font-weight: 800;
    color: #64748B;
    text-transform: uppercase; letter-spacing: .12em;
    margin-bottom: .3rem;
}
.qm-field label .req{ color: var(--brand-red); }
.qm-field input,
.qm-field select,
.qm-field textarea{
    width: 100%;
    padding: .7rem .9rem;
    background: var(--brand-cream);
    border: 1.5px solid transparent;
    border-radius: 10px;
    color: var(--brand-navy);
    font-size: .85rem;
    font-family: inherit;
    transition: all .25s ease;
    outline: none;
}
.qm-field input:focus,
.qm-field select:focus,
.qm-field textarea:focus{
    border-color: var(--brand-red);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(242,107,34,.12);
}
.qm-field input::placeholder,
.qm-field textarea::placeholder{ color: #94A3B8; }
.qm-field textarea{ resize: vertical; min-height: 76px; }
.qm-form-meta{
    display: flex; align-items: center; gap: .4rem;
    font-size: .7rem; color: #64748B;
    margin-top: .55rem;
}
.qm-form-meta i{ color: #25D366; flex-shrink: 0; }

/* ===== Right column: horizontal action rows ===== */
.qm-action-list{
    display: flex; flex-direction: column;
    gap: .55rem;
    margin-bottom: 1rem;
}
.qm-action-h{
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem .85rem;
    border-radius: 12px;
    border: 1.5px solid var(--brand-line);
    background: #fff;
    transition: all .3s ease;
    text-decoration: none;
    position: relative;
}
.qm-action-h:hover{
    transform: translateX(3px);
    box-shadow: 0 12px 22px -14px rgba(15,27,51,.25);
}
.qm-action-h .ico{
    width: 42px; height: 42px;
    border-radius: 11px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s ease;
}
.qm-action-h:hover .ico{ transform: scale(1.08) rotate(-5deg); }
.qm-action-h .text{ flex: 1; min-width: 0; }
.qm-action-h h5{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: var(--brand-navy);
    font-size: .88rem; line-height: 1.2;
}
.qm-action-h p{
    font-size: .74rem;
    color: #64748B;
    margin-top: .15rem;
    word-break: break-all;
    line-height: 1.3;
}
.qm-action-h .arrow{
    color: var(--brand-red);
    transition: transform .3s ease;
    flex-shrink: 0;
}
.qm-action-h:hover .arrow{ transform: translateX(4px); }
.qm-action-h.call .ico{ background: rgba(242,107,34,.1);  color: var(--brand-red); }
.qm-action-h.wa   .ico{ background: rgba(37,211,102,.12);color: #25D366; }
.qm-action-h.mail .ico{ background: rgba(15,27,51,.08);  color: var(--brand-navy); }
.qm-action-h.call:hover{ border-color: var(--brand-red); }
.qm-action-h.wa:hover  { border-color: #25D366; background: rgba(37,211,102,.04); }
.qm-action-h.mail:hover{ border-color: var(--brand-navy); }

/* ===== Info block (right column) ===== */
.qm-info{
    background: var(--brand-cream);
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}
.qm-info-row{
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .5rem 0;
}
.qm-info-row + .qm-info-row{ border-top: 1px dashed var(--brand-line); }
.qm-info-row .qm-ico{
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--brand-red); color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.qm-info-row p.lbl{ font-size: .65rem; font-weight: 800; color: var(--brand-navy); text-transform: uppercase; letter-spacing: .12em; }
.qm-info-row p.val{ color: #475569; font-size: .8rem; margin-top: .15rem; line-height: 1.45; }

@keyframes qmFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }
.qm-pill{
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .25rem .7rem; border-radius: 9999px;
    font-size: .65rem; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase;
    animation: qmFloat 3s ease-in-out infinite;
}

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero-section{ position: relative; }
.hero-slider{
    position: relative;
    display: grid;
    grid-template-areas: "slide";
    z-index: 5;
}
.hero-slide{
    grid-area: slide;
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px) scale(.99);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.2,.7,.2,1),
        visibility 0s linear .9s;
    pointer-events: none;
}
.hero-slide.active{
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.2,.7,.2,1),
        visibility 0s linear 0s;
    pointer-events: auto;
}
.hero-slide.active .slide-anim{ animation: slideContent 1s cubic-bezier(.2,.7,.2,1) both; }
.hero-slide.active .slide-anim-2{ animation: slideContent 1s cubic-bezier(.2,.7,.2,1) .15s both; }
.hero-slide.active .slide-anim-3{ animation: slideContent 1s cubic-bezier(.2,.7,.2,1) .3s both; }
.hero-slide.active .slide-anim-4{ animation: slideContent 1s cubic-bezier(.2,.7,.2,1) .45s both; }
.hero-slide.active .slide-img{ animation: slideImg 1.2s cubic-bezier(.2,.7,.2,1) .2s both; }
@keyframes slideContent{
    0%   { opacity: 0; transform: translateY(28px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideImg{
    0%   { opacity: 0; transform: translateX(40px) scale(.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

.slider-arrow{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 9999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    cursor: pointer;
    z-index: 30;
    transition: all .35s ease;
}
.slider-arrow:hover{
    background: var(--brand-red);
    border-color: var(--brand-red);
    transform: translateY(-50%) scale(1.06);
}
.slider-arrow.prev{ left: 16px; }
.slider-arrow.next{ right: 16px; }
@media(min-width:1024px){
    .slider-arrow.prev{ left: 28px; }
    .slider-arrow.next{ right: 28px; }
}

.slider-dots{
    position: absolute;
    bottom: 26px;
    left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 30;
}
.slider-dot{
    width: 10px; height: 10px; border-radius: 9999px;
    background: rgba(255,255,255,.3);
    border: none; padding: 0; cursor: pointer;
    transition: all .35s ease;
}
.slider-dot:hover{ background: rgba(255,255,255,.55); }
.slider-dot.active{
    width: 36px; background: var(--brand-red);
}

.slider-progress{
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.06);
    z-index: 25;
    overflow: hidden;
}
.slider-progress-bar{
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-red-light));
}

/* slide counter */
.slider-counter{
    position: absolute;
    top: 28px; right: 28px;
    z-index: 30;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    letter-spacing: .15em;
}
.slider-counter b{ color: #fff; font-size: 1.4rem; }

/* =========================================================
   Cursor Spray Effect — fog-cannon style mist on mouse move
   ========================================================= */
#cursor-spray-layer{
    position: fixed; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9998;
}
/* Fine atomised mist — dense core, soft falloff */
.cursor-mist{
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 42%,
        rgba(230, 242, 252, .62) 0%,
        rgba(185, 210, 228, .28) 38%,
        rgba(160, 190, 210, .08) 62%,
        rgba(255,255,255,0) 76%);
    filter: blur(5px) saturate(1.05);
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}
.cursor-mist.tint-blue{
    background: radial-gradient(circle at 40% 40%,
        rgba(165, 215, 240, .52) 0%,
        rgba(120, 185, 215, .22) 42%,
        transparent 72%);
}
.cursor-mist.tint-white{
    background: radial-gradient(circle at 38% 38%,
        rgba(255, 255, 255, .72) 0%,
        rgba(245, 250, 255, .32) 40%,
        transparent 70%);
}
/* Large turbulent bloom — distant fog volume */
.cursor-smoke-bloom{
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse 85% 75% at 48% 42%,
        rgba(248, 252, 255, .38) 0%,
        rgba(210, 225, 238, .14) 45%,
        rgba(180, 200, 218, .05) 68%,
        transparent 82%);
    filter: blur(14px);
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}
/* Elongated wisp — shear + turbulent streak */
.cursor-smoke-wisp{
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse 120% 55% at 35% 45%,
        rgba(255, 255, 255, .48) 0%,
        rgba(200, 218, 232, .16) 50%,
        transparent 78%);
    filter: blur(7px);
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}
/* Occasional spray streak (high-pressure nozzle) */
.cursor-spray-streak{
    position: absolute;
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgba(255,255,255,.75),
        rgba(200, 225, 245, .25),
        transparent);
    filter: blur(1px);
    opacity: .65;
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}
.cursor-droplet{
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(170, 210, 235, .65));
    box-shadow: 0 0 6px rgba(200, 230, 255, .45);
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}

/* =========================================================
   Official WhatsApp icon styling
   ========================================================= */
.icon-wa{ display:inline-block; }

/* tweak utility bar layout for new GST chip */
.gst-chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.15rem .55rem;
    border:1px solid rgba(255,255,255,.15);
    border-radius: 9999px;
    font-weight:700; font-size: .68rem; letter-spacing:.06em;
    color:#fff;
}
.gst-chip .dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--brand-red);
    box-shadow: 0 0 0 0 rgba(242,107,34,.7);
    animation: nozzlePulse 1.6s ease-out infinite;
}

/* =========================================================
   PALETTE REFRESH OVERRIDES
   - Body uses cool soft off-white (--brand-cream-2) so it doesn't
     feel stark white but also doesn't look beige.
   - Full-bleed white sections soften to off-white; cards inside
     stay crisp white so they pop.
   ========================================================= */
section.section-pad.bg-white{
    background-color: var(--brand-cream-2) !important;
}
section.section-pad.bg-white:nth-of-type(even){
    background-color: var(--brand-cream) !important;
}

/* =========================================================
   FEATURED PRODUCT SHOWCASE (homepage)
   Deep navy panel that makes white product cards POP.
   ========================================================= */
.featured-showcase{
    background:
        radial-gradient(900px 500px at 80% 15%, rgba(242,107,34,.18), transparent 60%),
        radial-gradient(800px 460px at 10% 85%, rgba(43,73,135,.45), transparent 60%),
        linear-gradient(135deg, #0B1428 0%, #0F1B33 50%, #131F3D 100%);
    color: #fff;
}
.featured-showcase .eyebrow::before{ background: var(--brand-red-light); }

/* =========================================================
   PRODUCT HERO CARD — used on all 4 product detail pages
   Crisp white card with subtle inset gradient + premium shadow.
   ========================================================= */
.product-hero-card{
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 1px 2px rgba(15,27,51,.05),
        0 30px 60px -30px rgba(15,27,51,.35);
    transition:
        box-shadow .5s ease,
        transform .5s cubic-bezier(.2,.7,.2,1);
}
.product-hero-card::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(135deg, var(--brand-cream-2) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.product-hero-card:hover{
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(15,27,51,.06),
        0 40px 70px -25px rgba(15,27,51,.5);
}
.product-hero-card > *{ position: relative; z-index: 1; }

.product-hero-tag{
    position: absolute;
    top: -16px; left: 24px;
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .15em;
    padding: .45rem .9rem;
    border-radius: 9999px;
    text-transform: uppercase;
    box-shadow: 0 12px 24px -8px rgba(242,107,34,.65);
    z-index: 5;
}

/* =========================================================
   TRUSTED CLIENTS STRIP — deep moss · blends with navy + brand orange
   ========================================================= */
.trusted-strip{
    position: relative;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--brand-navy) 55%, #1a3828 45%) 0%,
            color-mix(in srgb, var(--brand-navy) 62%, #153223 38%) 45%,
            color-mix(in srgb, var(--brand-navy) 76%, #0f241c 24%) 100%
        );
    color: #fff;
    border-top: 2px solid color-mix(in srgb, var(--brand-red) 74%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-red-light) 28%, rgb(173,204,169) 72%);
    box-shadow:
        inset 0 14px 40px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
}
.trusted-strip::before{
    content:""; position:absolute; inset:0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 740px 100% at 50% -8%, rgba(242,107,34,.34), transparent 55%),
        radial-gradient(
            ellipse 760px 90% at 50% 120%,
            rgba(148,217,169,.096),
            transparent 58%
        );
}
.trusted-strip .marquee-track:not(.marquee-track-logos){
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.trusted-strip .marquee-track:not(.marquee-track-logos) .sep{
    color: var(--brand-red-light);
    opacity: .7;
}

/* Client logo marquee — auto drift (JS) + arrows; scrollbar hidden */
.trusted-marquee-wrap{
    --trusted-marquee-px-per-sec: 50;
    --trusted-marquee-hover-factor: 0.36;
}

.trusted-marquee-mask{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.trusted-strip .trusted-marquee-wrap .marquee.trusted-marquee-mask{
    overflow-x: auto;
    overflow-y: hidden;
    cursor: default;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.trusted-strip .trusted-marquee-wrap .marquee.trusted-marquee-mask::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;
}

.trusted-marquee-nav.btn-icon-frost{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.94);
    box-shadow:
        0 8px 28px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .18s ease,
        box-shadow .25s ease;
}
.trusted-marquee-nav.btn-icon-frost:hover{
    background: rgba(255,255,255,.17);
    border-color: rgba(255,255,255,.34);
}
.trusted-marquee-nav.btn-icon-frost:active{
    transform: translateY(-50%) scale(.96);
}
.trusted-marquee-nav.btn-icon-frost:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--brand-red) 85%, transparent);
    outline-offset: 3px;
}
.trusted-marquee-nav--prev{
    left: clamp(8px, 2vw, 18px);
}
.trusted-marquee-nav--next{
    right: clamp(8px, 2vw, 18px);
}

@media (max-width: 640px){
    .trusted-marquee-nav.btn-icon-frost{
        width: 40px;
        height: 40px;
    }
    .trusted-marquee-nav--prev{
        left: max(4px, env(safe-area-inset-left));
    }
    .trusted-marquee-nav--next{
        right: max(4px, env(safe-area-inset-right));
    }
}

/* Trusted-strip headline — lift + spotlight pulse, neon ring spin, sheen + dot halo */
@keyframes trusted-strip-title-rise{
    0%, 100%{
        transform: translateY(0) scale(1);
        box-shadow:
            0 10px 34px rgba(0,0,0,.26),
            inset 0 0 0 1px rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.14);
    }
    38%{
        transform: translateY(-1px) scale(1.015);
        box-shadow:
            0 11px 36px rgba(0,0,0,.3),
            0 0 22px rgba(242,107,34,.26),
            inset 0 0 0 1px rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.2);
    }
    53%{
        transform: translateY(-4px) scale(1.052);
        box-shadow:
            0 18px 52px rgba(0,0,0,.42),
            0 0 52px rgba(242,107,34,.72),
            0 0 110px rgba(242,107,34,.42),
            0 0 2px rgba(255,255,255,.52) inset;
        border-color: rgba(255,255,255,.45);
    }
    71%{
        transform: translateY(-2px) scale(1.028);
        box-shadow:
            0 14px 42px rgba(0,0,0,.36),
            0 0 40px rgba(242,107,34,.5),
            0 0 78px rgba(242,107,34,.35),
            inset 0 0 0 1px rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.34);
    }
    93%{
        transform: translateY(-0.5px) scale(1.008);
        box-shadow:
            0 12px 36px rgba(0,0,0,.3),
            0 0 18px rgba(242,107,34,.22),
            inset 0 0 0 1px rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.21);
    }
}

@keyframes trusted-strip-pill-sheen{
    0%{ background-position: 155% center; opacity: .3; }
    45%{ opacity: .62; }
    100%{ background-position: -155% center; opacity: .3; }
}

@keyframes trusted-strip-dot-burst{
    0%{ transform: scale(.65); opacity: .75; border-width: 2px;}
    100%{ transform: scale(6); opacity: 0; border-width: 1px;}
}

@keyframes trusted-strip-dot-core{
    0%, 100%{ transform: scale(1); box-shadow: 0 0 12px rgba(242,107,34,.82), 0 0 22px rgba(242,107,34,.32);}
    50%{ transform: scale(1.22); box-shadow: 0 0 16px rgba(242,107,34,.94), 0 0 32px rgba(242,107,34,.42);}
}

@keyframes trusted-strip-title-shimmer{
    0%{ background-position: 150% center; }
    100%{ background-position: -150% center; }
}

@keyframes trusted-strip-title-pulseBright{
    0%, 100%{ filter: brightness(1) saturate(1); }
    55%{ filter: brightness(1.24) saturate(1.09); }
}

@keyframes trusted-strip-flair-orange{
    0%{ transform: rotate(-27deg) translateX(-85%); opacity: 0; }
    10%{ opacity: .88; }
    90%{ opacity: .84; }
    100%{ transform: rotate(-27deg) translateX(85%); opacity: 0; }
}
@keyframes trusted-strip-flair-cyan{
    0%{ transform: rotate(-18deg) translateX(78%); opacity: 0; }
    12%{ opacity: .82; }
    88%{ opacity: .78; }
    100%{ transform: rotate(-18deg) translateX(-78%); opacity: 0; }
}

.trusted-strip-title-pill{
    animation: trusted-strip-title-rise 6s cubic-bezier(.45,.06,.42,.98) infinite;
    will-change: transform, box-shadow;
}


.trusted-strip-title-pill::after{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        102deg,
        transparent 37%,
        rgba(255,255,255,.55) 50%,
        transparent 62%
    );
    background-size: 240% 100%;
    opacity: .32;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    animation: trusted-strip-pill-sheen 14s linear infinite;
}

.trusted-strip-title-pill > .trusted-strip-title-flair{
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
}
.trusted-strip-title-flair::before,
.trusted-strip-title-flair::after{
    content: "";
    position: absolute;
    width: 220%;
    height: 3px;
    left: -60%;
    top: 38%;
    border-radius: 999px;
    filter: blur(1.1px);
    opacity: 0;
    transform-origin: center;
}
.trusted-strip-title-flair::before{
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(242,107,34,.96) 45%,
        rgba(253,229,217,.94) 50%,
        rgba(242,107,34,.96) 55%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(242,107,34,.72);
    animation: trusted-strip-flair-orange 3.1s cubic-bezier(.4,.06,.21,.99) infinite;
}
.trusted-strip-title-flair::after{
    top: auto;
    bottom: 32%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(173,239,255,.96) 45%,
        rgba(229,247,253,.94) 50%,
        rgba(173,239,255,.96) 55%,
        transparent 100%
    );
    box-shadow: 0 0 13px rgba(124,229,253,.62);
    animation: trusted-strip-flair-cyan 3.1s cubic-bezier(.4,.06,.21,.99) infinite;
    animation-delay: .72s;
}

.trusted-strip-title-pill > *:not(.trusted-strip-title-flair){
    position: relative;
    z-index: 5;
}

.trusted-strip-title-dot-wrap{
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.trusted-strip-title-dot-wrap::before{
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    margin: auto;
    border-radius: 9999px;
    border: 2px solid rgba(242,107,34,.92);
    box-sizing: border-box;
    animation: trusted-strip-dot-burst 7.5s cubic-bezier(.18,.71,.08,1) infinite;
    pointer-events: none;
    z-index: 0;
}

.trusted-strip-title-dot{
    position: relative;
    z-index: 1;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--brand-red);
    animation: trusted-strip-dot-core 3.35s ease-in-out infinite;
}

.trusted-strip-title-text{
    background: linear-gradient(
        92deg,
        #ffffff 0%,
        rgba(255,237,226,.93) 40%,
        #ffffff 54%,
        rgba(226,239,255,.85) 100%
    );
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        trusted-strip-title-shimmer 7.2s linear infinite,
        trusted-strip-title-pulseBright 5.2s ease-in-out infinite;
}

.trusted-strip .marquee-track.client-logo-marquee{
    gap: 2.5rem;
    animation: none !important;
    color: inherit;
    text-shadow: none;
}

.client-marquee-card{
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    border: 2px solid var(--client-accent, var(--brand-red));
    background: rgba(255,255,255,.07);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.1) inset,
        0 10px 28px -10px rgba(0,0,0,.55),
        0 12px 32px -14px color-mix(in srgb, var(--client-accent) 55%, transparent);
    transition: transform .35s ease, box-shadow .4s ease;
}

.client-marquee-card:hover{
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.12) inset,
        0 14px 36px -10px rgba(0,0,0,.52),
        0 14px 40px -12px color-mix(in srgb, var(--client-accent) 48%, transparent);
}

.client-marquee-card-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 90px;
    margin: 2px;
    padding: 0.45rem 0.95rem;
    box-sizing: border-box;
    border-radius: 11px;
    background: rgba(248, 250, 252, 0.94);
}

.client-marquee-img{
    display: block;
    max-width: 236px;
    max-height: 64px;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    transition: transform .4s cubic-bezier(.25,.8,.25,1);
}

/* Taller caps for logos that need more room inside the marquee tile */
.client-marquee-card[data-logo-slug="shapoorji-pallonji"] .client-marquee-img,
.client-marquee-card[data-logo-slug="ashtech"] .client-marquee-img,
.client-marquee-card[data-logo-slug="super-tech"] .client-marquee-img,
.client-marquee-card[data-logo-slug="noida-authority"] .client-marquee-img,
.client-marquee-card[data-logo-slug="l-and-t"] .client-marquee-img{
    max-width: 296px;
    max-height: 82px;
}

.client-marquee-card:hover .client-marquee-img{
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce){
    .trusted-strip .marquee-track.client-logo-marquee{ animation: none; }
    .trusted-strip-title-pill,
    .trusted-strip-title-text{ animation: none !important; }
    .trusted-strip-title-flair,
    .trusted-strip-title-flair::before,
    .trusted-strip-title-flair::after{
        animation: none !important;
        opacity: 0 !important;
        box-shadow: none !important;
    }
    .trusted-strip-title-pill::after{
        animation: none !important;
        opacity: 0 !important;
    }
    .trusted-strip-title-dot-wrap::before{
        animation: none !important;
        opacity: 0 !important;
    }
    .trusted-strip-title-dot{
        animation: none !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .trusted-strip-title-text{
        background: none;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        color: #fff !important;
        filter: none !important;
    }
    .client-marquee-card,
    .client-marquee-img{ transition: none; }
    .client-marquee-card:hover,
    .client-marquee-card:hover .client-marquee-img{ transform: none; }
}
/* =========================================================
   SUBTLE ACCENT for cream sections — adds a soft orange halo
   in the corner so cream sections don't feel flat / boring.
   ========================================================= */
section.section-pad.bg-brand-cream{
    position: relative;
    overflow: hidden;
}
section.section-pad.bg-brand-cream::before{
    content:""; position:absolute;
    top: -120px; right: -120px;
    width: 380px; height: 380px;
    background: radial-gradient(closest-side, rgba(242,107,34,.08), transparent 70%);
    pointer-events: none;
}
section.section-pad.bg-brand-cream::after{
    content:""; position:absolute;
    bottom: -160px; left: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(closest-side, rgba(15,27,51,.06), transparent 70%);
    pointer-events: none;
}
section.section-pad.bg-brand-cream > *{ position: relative; z-index: 1; }

/* Soft accent halo behind the page-banner so sub-page headers feel
   anchored against the new warm body, not floating. */
.page-banner{
    border-bottom: 1px solid rgba(242,107,34,.18);
}

/* Make sure the eyebrow accent line stays visible on cream */
.eyebrow{ color: var(--brand-red); }
.eyebrow::before{ background: var(--brand-red); }

/* =========================================================
   READING PROGRESS BAR (fixed · sits above sticky site header)
   ========================================================= */
.read-progress-track{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(15,27,51,.08);
    z-index: 100;          /* above sticky header (z-50) */
    overflow: hidden;
    pointer-events: none;
}
.read-progress-bar{
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-red-light) 100%);
    box-shadow: 0 0 14px rgba(242,107,34,.6);
    transition: width .12s ease-out;
}

/* =========================================================
   PAGE BANNER · CHIPS (doc page hero meta)
   ========================================================= */
.banner-chips{
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.banner-chip{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .9rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    transition: all .25s ease;
}
.banner-chip:hover{
    background: rgba(242,107,34,.18);
    border-color: rgba(242,107,34,.5);
    transform: translateY(-1px);
}
.banner-chip i,
.banner-chip svg{ color: var(--brand-red-light); }
.banner-chip strong{ color: #fff; font-weight: 700; }

/* ---------- Doc / legal banners — fade-in --------- */
@keyframes docBannerFadeIn{
    from{ opacity:0; transform: translateY(16px); }
    to  { opacity:1; transform: translateY(0); }
}
.page-banner-doc .page-banner-content > *{
    animation: docBannerFadeIn .75s cubic-bezier(.2,.7,.2,1) both;
}
.page-banner-doc .page-banner-content > nav{ animation-delay: 0s; }
.page-banner-doc .page-banner-content > h1{ animation-delay: .08s; }
.page-banner-doc .page-banner-content > p{ animation-delay: .14s; }
.page-banner-doc .page-banner-content > .banner-chips{ animation-delay: .2s; }
.page-banner-doc .banner-chips .banner-chip:nth-child(1){ animation-delay: .26s; }
.page-banner-doc .banner-chips .banner-chip:nth-child(2){ animation-delay: .32s; }
.page-banner-doc .banner-chips .banner-chip:nth-child(3){ animation-delay: .38s; }
.page-banner-doc .banner-chips .banner-chip:nth-child(4){ animation-delay: .44s; }
.page-banner-doc .banner-chips .banner-chip:nth-child(5){ animation-delay: .5s; }

@media (prefers-reduced-motion: reduce){
    .page-banner-doc .page-banner-content > *,
    .page-banner-doc .banner-chips > *{
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Legal pages — breathable background --------- */
.legal-doc-bg{
    background: linear-gradient(180deg, #F8FAFC 0%, #EFF3F9 42%, var(--cream-2) 100%);
    position: relative;
}
.legal-doc-accent{
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background-image:
        radial-gradient(900px 420px at 12% -8%, rgba(242,107,34,.085), transparent 55%),
        radial-gradient(800px 500px at 98% 18%, rgba(15,27,51,.065), transparent 50%),
        linear-gradient(transparent 0%, rgba(218,224,234,.55) 100%);
}
.legal-doc-accent::before{
    content:"";
    position:absolute; inset:0;
    opacity: .45;
    background-image:
        radial-gradient(rgba(15,27,51,.04) 1px, transparent 1px),
        radial-gradient(rgba(15,27,51,.035) 1px, transparent 1px);
    background-size: 28px 28px, 18px 18px;
    background-position: 0 0, 11px 9px;
}

/* ---------- Mobile TOC pills ---------- */
.doc-toc-mobile{ position: relative; }
.doc-toc-mobile-label{
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--brand-navy);
    margin-bottom: .55rem;
}
.doc-toc-mobile-label i,
.doc-toc-mobile-label svg{ color: var(--brand-red); }
.doc-toc-mobile-scroll{
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: .35rem;
    margin-inline: -.25rem;
    padding-inline: .25rem;
    scrollbar-width: thin;
}
.doc-toc-mobile-scroll::-webkit-scrollbar{ height: 5px; }
.doc-toc-mobile-scroll::-webkit-scrollbar-thumb{
    background: rgba(242,107,34,.38);
    border-radius: 10px;
}
.doc-toc-pill{
    flex: 0 0 auto;
    max-width: 85vw;
    padding: .5rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    color: #475569;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid var(--brand-line);
    background: #fff;
    text-decoration: none;
    transition: all .28s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 2px 8px rgba(15,27,51,.06);
}
.doc-toc-pill:hover{
    border-color: rgba(242,107,34,.48);
    color: var(--brand-navy);
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -12px rgba(15,27,51,.22);
}
.doc-toc-pill.is-active{
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 12px 28px -10px rgba(242,107,34,.62);
}

/* =========================================================
   DOC PAGE LAYOUT (sticky TOC + content)
   ========================================================= */
.doc-layout{
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px){
    .doc-layout{ grid-template-columns: 280px 1fr; }
}

/* ---------- TOC ---------- */
.doc-toc-wrap{ position: relative; }
@media (min-width: 1024px){
    .doc-toc{
        position: sticky;
        top: 110px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }
}
.doc-toc{
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 10px 30px -20px rgba(15,27,51,.15);
}
.doc-toc-head{
    display: flex; align-items: center; gap: .55rem;
    padding-bottom: .9rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--brand-line);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--brand-navy);
}
.doc-toc-head i, .doc-toc-head svg{ color: var(--brand-red); }
.doc-toc-list{
    list-style: none;
    margin: 0; padding: 0;
    counter-reset: toc;
    display: flex; flex-direction: column;
    gap: 2px;
}
.doc-toc-list li{ counter-increment: toc; }
.doc-toc-list a{
    position: relative;
    display: flex; align-items: center;
    padding: .55rem .65rem .55rem 2.25rem;
    border-radius: 10px;
    color: #475569;
    font-size: .87rem;
    line-height: 1.4;
    text-decoration: none;
    transition: all .2s ease;
}
.doc-toc-list a::before{
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: .65rem; top: 50%;
    transform: translateY(-50%);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .68rem;
    font-weight: 800;
    color: #94A3B8;
    transition: color .2s ease;
}
.doc-toc-list a:hover{
    background: rgba(242,107,34,.08);
    color: var(--brand-navy);
}
.doc-toc-list a:hover::before{ color: var(--brand-red); }
.doc-toc-list a.is-active{
    background: linear-gradient(90deg, rgba(242,107,34,.1), transparent);
    color: var(--brand-red);
    font-weight: 700;
}
.doc-toc-list a.is-active::before{
    color: var(--brand-red);
}
.doc-toc-list a.is-active::after{
    content:"";
    position:absolute; right: .65rem; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    background: var(--brand-red);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(242,107,34,.18);
    animation: tocDot .9s ease-in-out infinite alternate;
}
@keyframes tocDot{
    from{ box-shadow: 0 0 0 2px rgba(242,107,34,.18); }
    to  { box-shadow: 0 0 0 6px rgba(242,107,34,.05); }
}
.doc-toc-foot{
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--brand-line);
    display: flex; flex-direction: column;
    gap: .45rem;
}
.doc-toc-action{
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    background: #F7F8FB;
    color: var(--brand-navy);
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid var(--brand-line);
    transition: all .25s ease;
    cursor: pointer;
    text-decoration: none;
}
.doc-toc-action:hover{
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
    transform: translateY(-1px);
}
.doc-toc-action i, .doc-toc-action svg{ color: var(--brand-red); transition: color .2s ease; }
.doc-toc-action:hover i, .doc-toc-action:hover svg{ color: #fff; }

/* ---------- DOC LEAD (intro callout) ---------- */
.doc-lead{
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 2.25rem;
    background: linear-gradient(135deg, #FFF6EE 0%, #FFFFFF 100%);
    border: 1px solid #FDE2CF;
    border-radius: 18px;
    color: #334155;
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: docFadeUp .8s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
.doc-lead::before{
    content:"";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-red), var(--brand-red-light));
    border-radius: 4px 0 0 4px;
}
.doc-lead i, .doc-lead svg{ color: var(--brand-red); }
.doc-lead a{
    color: var(--brand-red);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(242,107,34,.4);
    text-underline-offset: 3px;
}
.doc-lead a:hover{ color: var(--brand-red-dark); }

/* ---------- DOC MAIN COLUMN (readable line length) ---------- */
.doc-content{
    position: relative;
    min-width: 0;
    max-width: 56rem;
}

/* ---------- DOC SECTION (numbered cards) ---------- */
.doc-section{
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: 20px;
    padding: 1.85rem 1.85rem 1.5rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 110px;
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 0.72s cubic-bezier(.2,.7,.2,1),
        transform 0.72s cubic-bezier(.2,.7,.2,1),
        border-color 0.28s ease,
        box-shadow 0.35s ease;
    transition-delay: var(--doc-section-delay, 0ms), var(--doc-section-delay, 0ms), 0ms, 0ms;
    text-rendering: optimizeLegibility;
}
.doc-section.in{
    opacity: 1;
    transform: translateY(0);
}
.doc-section:hover{
    border-color: rgba(242,107,34,.35);
    box-shadow: 0 28px 42px -26px rgba(15,27,51,.16);
}
.doc-section-head{
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px dashed var(--brand-line);
}
.doc-section-num{
    width: 44px; height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .95rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 22px -12px rgba(242,107,34,.6);
    letter-spacing: .03em;
}
.doc-section-icon{
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(242,107,34,.15), rgba(242,107,34,.04));
    color: var(--brand-red);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .35s ease;
}
.doc-section:hover .doc-section-icon{
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-light));
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}
.doc-section-title{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
@media (max-width: 640px){
    .doc-section{ padding: 1.4rem 1.25rem 1.15rem; border-radius: 16px; }
    .doc-section-head{ flex-wrap: wrap; gap: .65rem; }
    .doc-section-num{ width: 38px; height: 38px; border-radius: 12px; font-size: .85rem; }
    .doc-section-icon{ width: 38px; height: 38px; }
    .doc-section-title{ font-size: 1.1rem; flex: 1 1 100%; }
}
.doc-section-body{
    color: #475569;
    font-size: 1.02rem;
    line-height: 1.84;
}
.doc-section-body p{ margin: .65rem 0; }
.doc-section-body p:first-child{ margin-top: 0; }
.doc-section-body strong{ color: var(--brand-navy); font-weight: 700; }
.doc-section-body a{
    color: var(--brand-red);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(242,107,34,.4);
    text-underline-offset: 3px;
}
.doc-section-body a:hover{ color: var(--brand-red-dark); }
.doc-section-body ul{
    list-style: none;
    padding: 0;
    margin: .85rem 0;
    display: flex; flex-direction: column;
    gap: .4rem;
}
.doc-section-body ul > li{
    position: relative;
    padding: .25rem 0 .25rem 1.85rem;
    transition: transform .25s ease;
}
.doc-section-body ul > li::before{
    content: "";
    position: absolute;
    left: 0; top: .65rem;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(242,107,34,.12);
    border: 2px solid rgba(242,107,34,.5);
    transition: all .25s ease;
}
.doc-section-body ul > li::after{
    content: "";
    position: absolute;
    left: 5px; top: 10px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--brand-red);
    transition: all .25s ease;
}
.doc-section-body ul > li:hover{ transform: translateX(3px); }
.doc-section-body ul > li:hover::before{
    background: var(--brand-red);
    border-color: var(--brand-red);
}
.doc-section-body ul > li:hover::after{ background: #fff; }

@keyframes docFadeUp{
    from{ opacity: 0; transform: translateY(20px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* ---------- DOC CONTACT CARD (final block) ---------- */
.doc-contact-card{
    position: relative;
    margin-top: 2rem;
    padding: 2rem 1.85rem;
    background: linear-gradient(135deg, #0F1B33 0%, #1B2A4A 60%, #2A3960 100%);
    color: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 50px -25px rgba(15,27,51,.4);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.doc-contact-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 42px 60px -30px rgba(15,27,51,.52);
}
.doc-contact-card.reveal.in{
    transition-delay: .12s;
}
.doc-contact-card::before{
    content:""; position: absolute;
    top: -50%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(closest-side, rgba(242,107,34,.4), transparent 70%);
    pointer-events: none;
}
.doc-contact-card::after{
    content:""; position: absolute;
    bottom: -40%; left: -10%;
    width: 260px; height: 260px;
    background: radial-gradient(closest-side, rgba(242,107,34,.18), transparent 70%);
    pointer-events: none;
}
.doc-contact-card > *{ position: relative; z-index: 1; }
.doc-contact-card h3{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: .35rem;
}
.doc-contact-card p{ color: rgba(255,255,255,.75); font-size: .95rem; }
.doc-contact-meta{
    margin-top: 1.25rem;
    display: grid;
    gap: .65rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px){ .doc-contact-meta{ grid-template-columns: 1fr 1fr; } }
.doc-contact-meta-row{
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    transition: all .3s ease;
}
.doc-contact-meta-row:hover{
    background: rgba(255,255,255,.1);
    border-color: rgba(242,107,34,.4);
    transform: translateY(-2px);
}
.doc-contact-meta-row .ico{
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(242,107,34,.2);
    color: var(--brand-red-light);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.doc-contact-meta-row .lbl{
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255,255,255,.5);
}
.doc-contact-meta-row .val{
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    word-break: break-word;
}
.doc-contact-meta-row a{ color: #fff; text-decoration: none; }
.doc-contact-meta-row a:hover{ color: var(--brand-red-light); }

/* =========================================================
   SITEMAP · PAGE SHELL & MINI-NAV
   ========================================================= */
.sitemap-shell{
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--cream-2) 0%, #EFF3FB 52%, var(--cream-2) 100%);
}
.sitemap-shell-bg{
    pointer-events: none;
    position: absolute;
    inset: 0;
    background:
        radial-gradient(720px 360px at 8% -5%, rgba(242,107,34,.088), transparent 58%),
        radial-gradient(600px 400px at 92% 12%, rgba(15,27,51,.068), transparent 52%);
}
.sitemap-mini-nav{
    background: linear-gradient(135deg, #fff 0%, #FAFBFE 75%);
    border: 1px solid var(--brand-line);
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    margin-top: 2rem;
    box-shadow: 0 24px 40px -30px rgba(15,27,51,.22);
}
.sitemap-mini-nav-h{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--brand-navy);
    margin-bottom: 1rem;
}
.sitemap-mini-nav-links{
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.mini-nav-chip{
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    padding: .6rem 1.05rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--brand-navy);
    text-decoration: none;
    border: 1px solid var(--brand-line);
    background: #fff;
    transition: all .35s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 2px 12px rgba(15,27,51,.06);
}
.mini-nav-chip i,
.mini-nav-chip svg{
    color: var(--brand-red);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.mini-nav-chip:hover{
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 22px 32px -20px rgba(242,107,34,.52);
}
.mini-nav-chip:hover i,
.mini-nav-chip:hover svg{
    color: #fff;
}

.reveal-sitemap-footer.reveal.in{
    transition-delay: .12s !important;
}

/* =========================================================
   SITEMAP · RICH UI
   ========================================================= */
.sitemap-stats{
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
}
@media (min-width: 768px){ .sitemap-stats{ grid-template-columns: repeat(4, 1fr); } }
.sitemap-stat{
    position: relative;
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    overflow: hidden;
    transition: all .35s ease;
}
.sitemap-stat:hover{
    transform: translateY(-4px);
    border-color: rgba(242,107,34,.45);
    box-shadow: 0 25px 40px -22px rgba(15,27,51,.18);
}
.sitemap-stat::after{
    content:"";
    position: absolute;
    top: -40%; right: -30%;
    width: 140px; height: 140px;
    background: radial-gradient(closest-side, rgba(242,107,34,.12), transparent 70%);
    pointer-events: none;
    transition: all .5s ease;
}
.sitemap-stat:hover::after{
    top: -20%; right: -10%;
}
.sitemap-stat .ss-num{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-navy);
}
.sitemap-stat .ss-num span{
    color: var(--brand-red);
}
.sitemap-stat .ss-lbl{
    margin-top: .35rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #94A3B8;
}

/* ---------- Rich sitemap card ---------- */
.sitemap-card{
    position: relative;
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: 22px;
    padding: 1.65rem;
    transition: all .4s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
    height: 100%;
}
.sitemap-card::before{
    content:"";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-red-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.sitemap-card::after{
    content:"";
    position: absolute;
    bottom: -60px; right: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(closest-side, rgba(242,107,34,.15), transparent 70%);
    opacity: 0;
    transition: all .5s ease;
    pointer-events: none;
}
.sitemap-card:hover{
    border-color: rgba(242,107,34,.5);
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -25px rgba(15,27,51,.22);
}
.sitemap-card:hover::before{ transform: scaleX(1); }
.sitemap-card:hover::after{ opacity: 1; bottom: -40px; right: -40px; }
.sitemap-card > *{ position: relative; }

.sitemap-head{
    display: flex; align-items: center; gap: .9rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--brand-line);
}
.sitemap-head h3{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand-navy);
    flex: 1;
    min-width: 0;
}
.sitemap-head .count{
    background: rgba(242,107,34,.12);
    color: var(--brand-red);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .3rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.sitemap-icon{
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(242,107,34,.18), rgba(242,107,34,.05));
    color: var(--brand-red);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .4s ease;
}
.sitemap-card:hover .sitemap-icon{
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-light));
    color: #fff;
    transform: rotate(-8deg) scale(1.06);
    box-shadow: 0 10px 22px -10px rgba(242,107,34,.55);
}

.sitemap-list{
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: .15rem;
}
.sitemap-list li{ font-size: .9rem; line-height: 1.5; }
.sitemap-list a{
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    transition: all .25s ease;
}
.sitemap-list a:hover{
    background: rgba(242,107,34,.08);
    color: var(--brand-red);
    transform: translateX(4px);
}
.sitemap-list a .arrow{
    margin-left: auto;
    opacity: 0;
    transition: all .25s ease;
    color: var(--brand-red);
}
.sitemap-list a:hover .arrow{
    opacity: 1;
    transform: translateX(2px);
}
.sitemap-list a > i:first-child,
.sitemap-list a > svg:first-child{
    color: var(--brand-red);
    flex-shrink: 0;
}
.sitemap-list .sl-static{
    padding: .55rem .65rem;
    color: #475569;
}
.sitemap-list .sl-static .lbl{
    display: block;
    font-weight: 700;
    color: var(--brand-navy);
    font-size: .9rem;
}
.sitemap-list .sl-static .sub{
    display: block;
    font-size: .76rem;
    color: #94A3B8;
    margin-top: .15rem;
}

/* ---------- Sitemap XML notice ---------- */
.sitemap-xml-card{
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, #0F1B33 0%, #1B2A4A 100%);
    color: #fff;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.sitemap-xml-card::before{
    content:"";
    position: absolute;
    top: -50%; right: -15%;
    width: 320px; height: 320px;
    background: radial-gradient(closest-side, rgba(242,107,34,.3), transparent 70%);
    pointer-events: none;
}
.sitemap-xml-card > *{ position: relative; z-index: 1; }
.sitemap-xml-card .xml-icon{
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 25px -12px rgba(242,107,34,.65);
    flex-shrink: 0;
}
.sitemap-xml-card h4{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}
.sitemap-xml-card p{ font-size: .88rem; color: rgba(255,255,255,.7); margin-top: .15rem; }

/* =========================================================
   PRODUCT DEMO · YOUTUBE VIDEO CARDS
   ========================================================= */
.video-card{
    background:#fff;
    border:1px solid var(--brand-line);
    border-radius: 20px;
    overflow:hidden;
    transition: all .35s cubic-bezier(.2,.7,.2,1);
    display:flex; flex-direction: column;
}
.video-card:hover{
    border-color: rgba(242,107,34,.45);
    box-shadow: 0 30px 50px -25px rgba(15,27,51,.18);
}
.video-frame{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0F1B33;
    overflow: hidden;
}
/* fallback for very old browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
    .video-frame{ padding-top: 56.25%; height: 0; }
    .video-frame > iframe{
        position:absolute; inset:0; width:100%; height:100%;
    }
}
.video-frame iframe{
    width:100%; height:100%;
    border: 0; display: block;
}

/* Homepage · Product demo strip — same family as Featured Products showcase */
.video-section{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(880px 480px at 75% -5%, rgba(242,107,34,.22), transparent 62%),
        radial-gradient(760px 440px at 12% 100%, rgba(43,73,135,.38), transparent 58%),
        linear-gradient(150deg, #080F1F 0%, #0F1B33 46%, #152a4f 100%);
    border-block: 1px solid rgba(242,107,34,.14);
}
.video-section .eyebrow{
    color: var(--brand-red-light);
}
.video-section .eyebrow::before{
    background: var(--brand-red-light);
}

/* Embed cards feel “floated” against the navy field */
.video-section .video-card{
    box-shadow:
        0 1px 0 rgba(255,255,255,.1),
        0 18px 40px -12px rgba(0,0,0,.52);
}
.video-section .video-card:hover{
    box-shadow:
        0 1px 0 rgba(255,255,255,.12),
        0 28px 52px -16px rgba(0,0,0,.62);
}

section.video-section.section-pad{
    padding-top: 2rem;
    padding-bottom: 2rem;
}
@media (min-width: 768px){
    section.video-section.section-pad{
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}
.video-section .video-section-intro .eyebrow{
    letter-spacing: 0.12em;
}
.video-section .video-section-intro p{
    margin-top: 0;
}

.video-section > .max-w-7xl{
    position: relative;
    z-index: 1;
}

/* =========================================================
   PRODUCT DETAIL PAGE (anti-smog-gun & similar)
   ========================================================= */
.product-page-trust-strip{
    background: linear-gradient(90deg, var(--brand-navy) 0%, #152a52 50%, var(--brand-navy) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-line) 80%, var(--brand-navy));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.product-page-trust-strip .trust-item{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255,255,255,.88);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.product-page-trust-strip .trust-item svg,
.product-page-trust-strip .trust-item i{
    color: var(--brand-red-light);
    flex-shrink: 0;
}

.product-page-subnav{
    background: color-mix(in srgb, #fff 88%, var(--brand-cream-2));
    border-bottom: 1px solid var(--brand-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 24px -12px rgba(15,27,51,.12);
}
.product-page-subnav a{
    display: inline-flex;
    align-items: center;
    padding: .5rem .85rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-navy-soft);
    border: 1px solid transparent;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.product-page-subnav a:hover{
    background: #fff;
    color: var(--brand-red);
    border-color: var(--brand-line);
}
.product-page-subnav .subnav-scroll{
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.product-page-subnav .subnav-scroll::-webkit-scrollbar{ display: none; }

.product-summary-glass{
    background: linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 100%);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    box-shadow:
        0 4px 24px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.product-model-card{
    position: relative;
    height: 100%;
    border-radius: 1.25rem;
    border: 1px solid var(--brand-line);
    background: #fff;
    padding: 1.35rem 1.35rem 1.25rem;
    transition:
        box-shadow .35s ease,
        transform .35s cubic-bezier(.2,.7,.2,1),
        border-color .25s ease;
}
.product-model-card:hover{
    box-shadow:
        0 20px 40px -24px rgba(15,27,51,.35),
        0 0 0 1px color-mix(in srgb, var(--brand-red) 22%, transparent);
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--brand-red) 35%, var(--brand-line));
}
.product-model-card--featured{
    border-color: color-mix(in srgb, var(--brand-red) 45%, var(--brand-line));
    box-shadow: 0 18px 36px -20px rgba(242,107,34,.35);
}
.product-model-card--featured::before{
    content: "";
    position: absolute;
    top: 0; left: 1.25rem; right: 1.25rem;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-red-light) 100%);
}
.product-model-card__ribbon{
    position: absolute;
    top: 12px;
    right: -2px;
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .35rem .65rem .35rem .75rem;
    border-radius: 6px 0 0 6px;
    box-shadow: -4px 4px 14px rgba(242,107,34,.4);
}

.product-spec-scroll{
    position: relative;
    border-radius: 1.25rem;
    border: 1px solid var(--brand-line);
    background: #fff;
    box-shadow: 0 24px 48px -32px rgba(15,27,51,.2);
    overflow: hidden;
}
.product-spec-scroll::before,
.product-spec-scroll::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 4;
    pointer-events: none;
}
.product-spec-scroll::before{
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.98), transparent);
}
.product-spec-scroll::after{
    right: 0;
    background: linear-gradient(-90deg, rgba(255,255,255,.98), transparent);
}
@media (min-width: 1024px){
    .product-spec-scroll::before,
    .product-spec-scroll::after{ display: none; }
}
.product-spec-scroll .product-spec-scroll-inner{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.product-spec-table{
    min-width: 720px;
    width: 100%;
    font-size: .875rem;
    border-collapse: collapse;
}
.product-spec-table thead th{
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--brand-navy);
    color: #fff;
    font-family: var(--font-display, "Plus Jakarta Sans", Inter, sans-serif);
    padding: 1rem .75rem;
    text-align: center;
    font-weight: 700;
}
.product-spec-table thead th:first-child{
    text-align: left;
    padding-left: 1.15rem;
    position: sticky;
    left: 0;
    z-index: 6;
    box-shadow: 8px 0 16px -10px rgba(0,0,0,.35);
}
.product-spec-table tbody td{
    padding: .85rem .75rem;
    border-top: 1px solid var(--brand-line);
    vertical-align: top;
    text-align: center;
    color: var(--brand-navy-soft, #475569);
}
.product-spec-table tbody th[scope="row"]{
    position: sticky;
    left: 0;
    z-index: 2;
    font-weight: 700;
    text-align: left;
    color: var(--brand-navy);
    background: #fff;
    padding: .85rem .75rem;
    padding-left: 1.15rem;
    border-top: 1px solid var(--brand-line);
    vertical-align: top;
    box-shadow: 6px 0 12px -8px rgba(15,27,51,.12);
}
.product-spec-table tbody tr:nth-child(even) td{
    background-color: var(--brand-cream-2);
}
.product-spec-table tbody tr:nth-child(even) th[scope="row"]{
    background-color: color-mix(in srgb, var(--brand-cream-2) 94%, #fff);
}

.product-overview-card{
    border-radius: 1rem;
    border: 1px solid var(--brand-line);
    background: #fff;
    padding: 1rem 1.15rem;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.product-overview-card:hover{
    border-color: color-mix(in srgb, var(--brand-red) 28%, var(--brand-line));
    box-shadow: 0 12px 28px -18px rgba(242,107,34,.25);
}

@media (prefers-reduced-motion: reduce){
    .product-model-card:hover{
        transform: none;
    }
}

/* =========================================================
   ACCESSIBILITY · reduce motion overrides
   ========================================================= */
@media (prefers-reduced-motion: reduce){
    .doc-section,
    .doc-section.in{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        --doc-section-delay: 0ms !important;
    }
    .doc-lead{
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .doc-contact-card:hover{ transform: none !important; }
    .doc-toc-pill:hover,
    .mini-nav-chip:hover,
    .sitemap-card:hover,
    .sitemap-stat:hover{
        transform: none !important;
    }
    .page-banner-doc .page-banner-content > *,
    .page-banner-doc .banner-chips .banner-chip{
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .reveal, .reveal.in{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .reveal-stagger > *, .reveal-stagger.in > *{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .testimonials-carousel-track{
        transition: none !important;
    }
    .doc-toc-list a.is-active::after{
        animation: none !important;
    }
    .eyebrow.section-eyebrow-attn{
        animation: none !important;
        transform: none !important;
        text-shadow: none !important;
        filter: none !important;
        letter-spacing: inherit !important;
        opacity: 1 !important;
    }
}