/* ============================================================
   PowerFlow — Modern Premium (TalentBrace-inspired)
   Soft corporate · Spacious · Photo-forward · 2025/26
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    --pf-blue:        #1E5EFF;
    --pf-blue-dark:   #1548D4;
    --pf-blue-soft:   #EEF3FF;
    --pf-navy:        #0B1D3A;
    --pf-navy-mid:    #132D54;
    --pf-white:       #FFFFFF;
    --pf-off:         #F7F9FC;
    --pf-gray-100:    #EEF1F6;
    --pf-gray-200:    #DCE2EC;
    --pf-gray-400:    #8B97AB;
    --pf-gray-600:    #4A5568;
    --pf-heading:     #0B1D3A;
    --pf-body:        #4A5568;
    --pf-muted:       #8B97AB;
    --pf-surface:     #FFFFFF;
    --pf-bg:          #F7F9FC;
    --pf-border:      #E8ECF3;
    --pf-success:     #0D9F6E;
    --pf-error:       #E53E3E;
    --pf-radius:      12px;
    --pf-radius-sm:   8px;
    --pf-radius-lg:   20px;
    --pf-radius-xl:   28px;
    --pf-radius-pill: 100px;
    --pf-shadow:      0 4px 24px rgba(11,29,58,.06);
    --pf-shadow-md:   0 8px 32px rgba(11,29,58,.08);
    --pf-shadow-lg:   0 16px 48px rgba(11,29,58,.10);
    --pf-t:           .25s ease;
    --pf-container:   1560px;
    --pf-nav-h:       72px;
    --pf-font:        'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-theme="dark"] {
    --pf-surface: #111B2E;
    --pf-bg: #0A1220;
    --pf-heading: #F0F4FA;
    --pf-body: #A8B4C8;
    --pf-muted: #6B7A94;
    --pf-border: #1E2A40;
    --pf-off: #111B2E;
    --pf-gray-100: #1A2538;
    --pf-gray-200: #243044;
}
[data-theme="dark"] body { background: var(--pf-bg); color: var(--pf-body); }
[data-theme="dark"] .site-nav .brand-logo { background:#fff; padding:6px 12px; border-radius:8px; }
[data-theme="dark"] .site-nav .dropdown-menu,
[data-theme="dark"] .pf-quote-modal .modal-content { background: var(--pf-surface); border-color: var(--pf-border); }
[data-theme="dark"] .quote-form .form-control,
[data-theme="dark"] .contact-form .form-control { background: var(--pf-gray-100); border-color: var(--pf-border); color: var(--pf-heading); }
[data-theme="dark"] .navbar-toggler-icon, [data-theme="dark"] .btn-close { filter: invert(1) brightness(1.4); }
[data-theme="dark"] .product-card, [data-theme="dark"] .pf-spec-card,
[data-theme="dark"] .feature-card, [data-theme="dark"] .pdp-media,
[data-theme="dark"] .pdp-spec-box, [data-theme="dark"] .accessory-item {
    background: var(--pf-surface); border-color: var(--pf-border);
}
[data-theme="dark"] .alert-custom-success { background:#0A2A1C; border-color:#1A5C38; color:#6FE0A0; }
[data-theme="dark"] .alert-custom-error { background:#2A1414; border-color:#5C2323; color:#F2A0A0; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--pf-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--pf-body);
    background: var(--pf-bg);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pf-blue); text-decoration: none; transition: color var(--pf-t); }
a:hover { color: var(--pf-blue-dark); }
h1,h2,h3,h4,h5,h6 {
    font-family: var(--pf-font);
    color: var(--pf-heading);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 .5em;
}
p { margin: 0 0 1em; }

.container {
    width: 100%;
    max-width: var(--pf-container);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Theme toggle — in header nav (right of Get a Quote) */
.theme-toggle {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--pf-off);
    border: 1px solid var(--pf-border);
    color: var(--pf-heading);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--pf-t); flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--pf-blue-soft);
    border-color: var(--pf-blue);
    color: var(--pf-blue);
}
.theme-toggle .fa-sun { display: none; }
[data-theme="dark"] .theme-toggle {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
    color: #F0F4FA;
}
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(30,94,255,.25);
    border-color: var(--pf-blue);
    color: #7BA3FF;
}
[data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }

/* ========== TOP BAR ========== */
.top-bar {
    background: var(--pf-navy);
    color: rgba(255,255,255,.75);
    font-size: .8rem;
    padding: .45rem 0;
}
.top-bar a {
    color: rgba(255,255,255,.75);
    display: inline-flex; align-items: center; gap: .35rem;
}
.top-bar a:hover { color: #fff; }
.top-bar-left, .top-bar-right {
    display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.35rem;
}
.top-bar i { opacity: .7; font-size: .72rem; }

/* ========== NAV — TalentBrace style: clean white, CTA right ========== */
.site-nav {
    background: var(--pf-surface);
    border-bottom: 1px solid var(--pf-border);
    padding: 0;
    min-height: var(--pf-nav-h);
    box-shadow: 0 1px 0 rgba(11,29,58,.04);
}
.site-nav.sticky-top { z-index: 1030; }
.site-nav .navbar-brand { padding: .7rem 0; margin-right: 1.25rem; }
.site-nav .brand-logo { height: 40px; width: auto; object-fit: contain; }
.site-nav .nav-link {
    color: var(--pf-heading) !important;
    font-weight: 500;
    font-size: .875rem;
    padding: .45rem .55rem !important;
    border-radius: var(--pf-radius-sm);
    transition: all var(--pf-t);
    white-space: nowrap;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active {
    color: var(--pf-blue) !important;
    background: var(--pf-blue-soft);
}
[data-theme="dark"] .site-nav .nav-link { color: #C8D4E8 !important; }
[data-theme="dark"] .site-nav .nav-link:hover,
[data-theme="dark"] .site-nav .nav-link.active {
    color: #7BA3FF !important;
    background: rgba(30,94,255,.15);
}
.site-nav .dropdown-menu {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-lg);
    padding: .5rem;
    min-width: 220px;
    margin-top: .5rem !important;
}
.site-nav .dropdown-item {
    border-radius: var(--pf-radius-sm);
    padding: .55rem .95rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--pf-heading);
}
.site-nav .dropdown-item:hover {
    background: var(--pf-blue-soft);
    color: var(--pf-blue);
}
.site-nav .dropdown-divider { margin: .35rem 0; border-color: var(--pf-border); }
.btn-nav-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--pf-blue) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .8rem;
    padding: .55rem 1.1rem !important;
    border-radius: var(--pf-radius-sm);
    border: none;
    box-shadow: 0 4px 14px rgba(30,94,255,.3);
    transition: all var(--pf-t);
    white-space: nowrap;
}
.btn-nav-cta:hover {
    background: var(--pf-blue-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(30,94,255,.35);
}
.navbar-toggler {
    border: 1px solid var(--pf-border);
    padding: .4rem .55rem;
    border-radius: var(--pf-radius-sm);
}
.navbar-toggler:focus { box-shadow: none; }

/* ========== TYPOGRAPHY ========== */
.section-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pf-blue);
    background: var(--pf-blue-soft);
    padding: .35rem .9rem;
    border-radius: var(--pf-radius-pill);
    margin-bottom: .85rem;
}
.section-title {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 800;
    color: var(--pf-heading);
    letter-spacing: -.025em;
    margin-bottom: .5rem;
    line-height: 1.2;
}
.section-subtitle {
    font-size: 1.05rem;
    color: var(--pf-muted);
    max-width: 540px;
    line-height: 1.7;
}

/* ========== BUTTONS ========== */
.btn-hero, .btn-request-quote, .btn-submit, .btn-catalogue {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600;
    font-size: .9rem;
    padding: .8rem 1.6rem;
    border-radius: var(--pf-radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--pf-t);
    text-decoration: none;
}
.btn-hero {
    background: var(--pf-blue);
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(30,94,255,.35);
}
.btn-hero:hover {
    background: var(--pf-blue-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(30,94,255,.4);
}
.btn-hero-outline {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 600;
    font-size: .9rem;
    padding: .8rem 1.6rem;
    border-radius: var(--pf-radius-sm);
    background: rgba(255,255,255,.12);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.35);
    backdrop-filter: blur(8px);
    transition: all var(--pf-t);
}
.btn-hero-outline:hover {
    background: rgba(255,255,255,.22);
    border-color: #fff;
    color: #fff !important;
}
.btn-request-quote {
    background: var(--pf-blue);
    color: #fff !important;
    padding: .6rem 1.2rem;
    font-size: .825rem;
}
.btn-request-quote:hover {
    background: var(--pf-blue-dark);
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-outline-navy {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600;
    font-size: .875rem;
    padding: .6rem 1.3rem;
    border-radius: var(--pf-radius-sm);
    border: 1.5px solid var(--pf-navy);
    color: var(--pf-navy) !important;
    background: transparent;
    transition: all var(--pf-t);
}
.btn-outline-navy:hover {
    background: var(--pf-navy);
    color: #fff !important;
}
[data-theme="dark"] .btn-outline-navy {
    border-color: var(--pf-blue); color: var(--pf-blue) !important;
}
[data-theme="dark"] .btn-outline-navy:hover {
    background: var(--pf-blue); color: #fff !important;
}
.btn-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--pf-off);
    color: var(--pf-heading) !important;
    border: 1px solid var(--pf-border);
    transition: all var(--pf-t);
    flex-shrink: 0;
}
.btn-arrow:hover {
    background: var(--pf-blue);
    color: #fff !important;
    border-color: var(--pf-blue);
}
.btn-talk-engineer {
    display: inline-flex; align-items: center;
    font-weight: 600;
    font-size: .85rem;
    padding: .6rem 1.2rem;
    border-radius: var(--pf-radius-sm);
    background: var(--pf-off);
    color: var(--pf-heading) !important;
    border: 1px solid var(--pf-border);
    transition: all var(--pf-t);
}
.btn-talk-engineer:hover {
    background: var(--pf-navy);
    color: #fff !important;
    border-color: var(--pf-navy);
}
.btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .9rem;
    padding: .75rem 1.5rem;
    border-radius: var(--pf-radius-sm);
    background: #25D366; color: #fff !important; border: none;
    transition: all var(--pf-t);
}
.btn-whatsapp:hover { background: #1DA851; color: #fff !important; }
.btn-submit { background: var(--pf-blue); color: #fff !important; }
.btn-submit:hover { background: var(--pf-blue-dark); color: #fff !important; }
.btn-catalogue {
    background: rgba(255,255,255,.15);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.3);
    margin-left: .4rem;
    border-radius: var(--pf-radius-sm);
}
.btn-catalogue:hover { background: #fff; color: var(--pf-navy) !important; }
.btn-about {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 600;
    color: var(--pf-blue) !important;
    margin-top: .5rem;
}
.btn-about:hover { gap: .7rem; }

/* ========== HERO — full-bleed photo style like TalentBrace ========== */
.hero-slider { padding: 0 !important; }
.hero-section {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 5.5rem 0 6rem;
    overflow: hidden;
    background: var(--pf-navy);
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(11,29,58,.92) 0%, rgba(11,29,58,.75) 45%, rgba(19,45,84,.55) 100%),
        url('../images/powerflowpumps-slide-background.jpg') center/cover no-repeat;
    z-index: 0;
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to top, rgb(49, 171, 252,  46%), transparent);
    z-index: 1;
    pointer-events: none;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}
.hero-content { color: #fff; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.95);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .4rem 1rem;
    border-radius: var(--pf-radius-pill);
    margin-bottom: 1.35rem;
    backdrop-filter: blur(10px);
}
.hero-content h1 {
    font-size: clamp(2.15rem, 4.5vw, 3.25rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.12;
    margin-bottom: 1.15rem;
}
.hero-content h1 span {
    color: #7BA3FF;
}
.hero-content .lead {
    font-size: 1.1rem;
    color: rgba(255,255,255,.75);
    line-height: 1.7;
    max-width: 460px;
    margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-visual-ring {
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(30,94,255,.12);
    border: 1px solid rgba(255,255,255,.08);
}
.hero-visual img {
    position: relative;
    z-index: 1;
    max-height: 380px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.4));
}

#homeOwl .owl-nav {
    position: absolute; top: 50%; width: 100%;
    transform: translateY(-50%);
    display: flex; justify-content: space-between;
    pointer-events: none; padding: 0 1.25rem;
    z-index: 5;
}
#homeOwl .owl-nav button {
    pointer-events: all;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: #fff !important;
    font-size: 1rem;
    backdrop-filter: blur(8px);
    transition: all var(--pf-t);
}
#homeOwl .owl-nav button:hover {
    background: var(--pf-blue) !important;
    border-color: var(--pf-blue) !important;
}
#homeOwl .owl-dots {
    position: absolute; bottom: 2rem; width: 100%; text-align: center; z-index: 5;
}
#homeOwl .owl-dot span {
    width: 8px; height: 8px;
    background: rgba(255,255,255,.35) !important;
    border-radius: 100px;
    transition: all var(--pf-t);
}
#homeOwl .owl-dot.active span {
    width: 28px;
    background: #fff !important;
}

/* ========== STATS ========== */
.stats-strip {
    background: var(--pf-surface) !important;
    border-bottom: 1px solid var(--pf-border);
    position: relative; z-index: 2;
    margin-top: -1px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}
.stat-item { padding: 1.5rem 1rem; }
.stat-num {
    font-size: 2.35rem;
    font-weight: 800;
    color: var(--pf-heading);
    letter-spacing: -.03em;
    line-height: 1.1;
}
.stat-num span { color: var(--pf-blue); }
.stat-label {
    font-size: .8rem;
    color: var(--pf-muted);
    font-weight: 500;
    margin-top: .3rem;
}

/* ========== FEATURES ========== */
.features-strip {
    padding: 5rem 0;
    background: var(--pf-bg);
}
.feature-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 2rem 1.6rem;
    height: 100%;
    transition: all var(--pf-t);
    box-shadow: var(--pf-shadow);
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pf-shadow-lg);
    border-color: transparent;
}
.feature-icon {
    width: 52px; height: 52px;
    border-radius: var(--pf-radius-sm);
    background: var(--pf-blue-soft);
    color: var(--pf-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}
.feature-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.feature-card p {
    font-size: .925rem;
    color: var(--pf-muted);
    line-height: 1.65;
    margin: 0;
}

/* ========== TAGLINE ========== */
.tagline-section {
    background: var(--pf-navy);
    padding: 4rem 0;
    text-align: center;
}
.tagline-section h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 500;
    color: rgba(255,255,255,.8);
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.6;
}
.tagline-section .highlight { color: #7BA3FF; font-weight: 700; }
.tagline-section .word-rotator { color: #fff; font-weight: 700; }

/* ========== ABOUT ========== */
.about-section {
    padding: 5rem 0;
    background: var(--pf-surface);
}
.about-section h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    margin-bottom: 1rem;
}
.about-section p {
    color: var(--pf-body);
    line-height: 1.75;
    max-width: 520px;
}
.about-image-wrap img {
    max-height: 320px;
    margin: 0 auto;
    filter: drop-shadow(0 16px 40px rgba(11,29,58,.12));
}

/* ========== PRODUCT CARDS ========== */
.products-section {
    padding: 5rem 0;
    background: var(--pf-bg);
}
.pf-spec-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all var(--pf-t);
    box-shadow: var(--pf-shadow);
}
.pf-spec-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--pf-shadow-lg);
    border-color: transparent;
}
.pf-spec-media {
    height: 240px;
    background: linear-gradient(180deg, var(--pf-off) 0%, var(--pf-gray-100) 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 1.75rem;
    overflow: hidden;
    position: relative;
}
.pf-spec-media img {
    max-height: 210px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}
.pf-spec-card:hover .pf-spec-media img { transform: scale(1.06); }
.pf-spec-body {
    padding: 1.4rem 1.5rem 1.55rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pf-spec-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--pf-heading);
}
.pf-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin-bottom: 1.25rem;
    flex: 1;
}
.pf-spec-item { display: flex; flex-direction: column; gap: .15rem; }
.pf-spec-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pf-muted);
}
.pf-spec-value {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pf-heading);
}
.card-actions {
    display: flex; align-items: center; gap: .65rem;
    margin-top: auto;
}

.product-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow: hidden;
    transition: all var(--pf-t);
    box-shadow: var(--pf-shadow);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pf-shadow-lg);
    border-color: transparent;
}
.product-card-media-link {
    display: flex;
    height: 240px;
    background: linear-gradient(180deg, var(--pf-off), var(--pf-gray-100));
    align-items: center; justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}
.product-card .card-img-top {
    max-height: 210px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    transition: transform .35s ease;
}
.product-card:hover .card-img-top { transform: scale(1.06); }
.product-card .card-body { padding: 1.2rem 1.3rem 1.4rem; }
.product-card .card-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .75rem;
}
.product-card-title-link { color: var(--pf-heading) !important; }
.product-card-title-link:hover { color: var(--pf-blue) !important; }

/* ========== ACCESSORIES ========== */
.accessories-section {
    padding: 4.5rem 0;
    background: var(--pf-surface);
}
.accessory-item {
    background: var(--pf-off);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.25rem;
    display: flex; align-items: center; justify-content: center;
    height: 110px;
    transition: all var(--pf-t);
}
.accessory-item:hover {
    border-color: var(--pf-blue);
    box-shadow: var(--pf-shadow);
    transform: translateY(-3px);
}
.accessory-item img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

/* ========== CATALOGUE ========== */
.catalogue-section {
    padding: 0 0 5rem;
    background: var(--pf-bg);
}
.catalogue-box {
    background: linear-gradient(135deg, var(--pf-navy) 0%, var(--pf-navy-mid) 100%);
    border-radius: var(--pf-radius-lg);
    padding: 2.75rem 3rem;
    color: #fff;
    box-shadow: var(--pf-shadow-lg);
}
.catalogue-box h3 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.catalogue-box p {
    color: rgba(255,255,255,.65);
    margin: 0;
    font-size: .95rem;
}

/* ========== PAGE HEADER ========== */
.page-header {
    background: linear-gradient(135deg, var(--pf-navy) 0%, var(--pf-navy-mid) 100%);
    padding: 3rem 0;
    color: #fff;
}
.page-header h1 {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.page-header h1 .text-warning { color: #7BA3FF !important; }
.page-header .breadcrumb {
    background: transparent; margin: 0; padding: 0;
}
.page-header .breadcrumb-item a { color: rgba(255,255,255,.65); }
.page-header .breadcrumb-item a:hover { color: #fff; }
.page-header .breadcrumb-item.active { color: rgba(255,255,255,.9); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }

/* ========== CATEGORY INTRO ========== */
.category-intro {
    padding: 4rem 0;
    background: var(--pf-surface);
}
.category-intro-text p {
    color: var(--pf-body);
    line-height: 1.75;
    margin: 1rem 0 1.5rem;
    max-width: 520px;
}
.category-intro-media {
    background: var(--pf-off);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 2rem;
    display: flex; align-items: center; justify-content: center;
    min-height: 280px;
}
.category-intro-media img {
    max-height: 240px;
    object-fit: contain;
}

/* ========== PDP ========== */
.pdp-breadcrumb {
    background: var(--pf-surface);
    border-bottom: 1px solid var(--pf-border);
    padding: .9rem 0;
}
.pdp-breadcrumb .breadcrumb {
    margin: 0; background: transparent; font-size: .85rem;
}
.pdp-media {
    background: linear-gradient(180deg, var(--pf-off), var(--pf-gray-100));
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 2.75rem;
    display: flex; align-items: center; justify-content: center;
    min-height: 460px;
    position: relative;
    cursor: zoom-in;
    text-decoration: none;
}
.pdp-media img {
    max-height: 420px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.pdp-category {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pf-blue);
    background: var(--pf-blue-soft);
    padding: .3rem .8rem;
    border-radius: var(--pf-radius-pill);
    margin-bottom: .75rem;
}
.pdp-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}
.pdp-desc {
    font-size: 1.05rem;
    color: var(--pf-body);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.pdp-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.pdp-spec-box {
    background: var(--pf-off);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    padding: .9rem 1.05rem;
}
.pdp-spec-box .label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pf-muted);
    margin-bottom: .2rem;
}
.pdp-spec-box .value {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pf-heading);
}
.pdp-features {
    list-style: none;
    margin-bottom: 1.75rem;
}
.pdp-features li {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .4rem 0;
    font-size: .925rem;
    color: var(--pf-body);
}
.pdp-features i {
    color: var(--pf-success);
    margin-top: .15rem;
    flex-shrink: 0;
}
.pdp-actions {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}

/* ========== FOOTER CTA (pump banner above footer) ========== */
.footer-cta {
    background: var(--pf-bg);
    padding: 0 0 0;
}
.footer-cta-inner {
    background: linear-gradient(135deg, var(--pf-blue) 0%, var(--pf-blue-dark) 55%, #0B1D3A 100%);
    border-radius: var(--pf-radius-lg);
    padding: 2.5rem 2.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 12px 40px rgba(30,94,255,.22);
    margin-bottom: 0;
    position: relative;
    top: 2.5rem;
    z-index: 2;
}
.footer-cta-text h3 {
    color: #fff;
    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
    font-weight: 800;
    margin: 0 0 .4rem;
}
.footer-cta-text p {
    color: rgba(255,255,255,.82);
    margin: 0;
    font-size: .95rem;
    max-width: 480px;
    line-height: 1.6;
}
.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}
.footer-cta-btn {
    background: #fff !important;
    color: var(--pf-blue) !important;
    box-shadow: none !important;
}
.footer-cta-btn:hover {
    background: var(--pf-navy) !important;
    color: #fff !important;
}
.footer-cta-wa {
    color: #fff !important;
    border-color: rgba(255,255,255,.4) !important;
    background: rgba(255,255,255,.1) !important;
}
.footer-cta-wa:hover {
    background: rgba(255,255,255,.2) !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* ========== FOOTER ========== */
.site-footer {
    background: var(--pf-navy);
    color: rgba(255,255,255,.7);
    margin-top: 0;
}
.footer-main {
    padding: 4.5rem 0 3rem;
    padding-top: 5rem;
}
.footer-brand {
    height: 42px;
    width: auto;
    background: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 1.15rem;
}
.footer-desc {
    font-size: .9rem;
    line-height: 1.7;
    color: rgba(255,255,255,.55);
    margin: 0 0 1.35rem;
    max-width: 320px;
}
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: all var(--pf-t);
}
.footer-social a:hover {
    background: var(--pf-blue);
    border-color: var(--pf-blue);
    color: #fff !important;
    transform: translateY(-2px);
}
.footer-heading {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.2rem;
}
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links li {
    margin-bottom: .55rem;
}
.footer-links a {
    color: rgba(255,255,255,.55) !important;
    font-size: .9rem;
    transition: color var(--pf-t), padding-left var(--pf-t);
    display: inline-block;
}
.footer-links a:hover {
    color: #fff !important;
    padding-left: 4px;
}
.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .9rem;
    font-size: .875rem;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
}
.footer-contact i {
    margin-top: .2rem;
    color: #7BA3FF;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}
.footer-contact a {
    color: rgba(255,255,255,.7) !important;
}
.footer-contact a:hover {
    color: #fff !important;
}
.footer-phones {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.footer-landline {
    font-style: normal;
    font-size: .75rem;
    opacity: .6;
    margin-left: .25rem;
}
.footer-urdu {
    font-size: .85rem;
    color: rgba(255,255,255,.4);
    font-style: italic;
    margin: 1rem 0 0;
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.15rem 0;
    font-size: .8rem;
    color: rgba(255,255,255,.4);
}
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
}
.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.15rem;
}
.footer-bottom-links a {
    color: rgba(255,255,255,.45) !important;
    font-size: .8rem;
}
.footer-bottom-links a:hover {
    color: #fff !important;
}
.footer-iso {
    color: rgba(255,255,255,.45);
}

[data-theme="dark"] .footer-cta {
    background: var(--pf-bg);
}

@media (max-width: 991.98px) {
    .footer-cta-inner {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
        top: 1.75rem;
    }
    .footer-cta-text p {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-cta-actions {
        justify-content: center;
        width: 100%;
    }
    .footer-cta-btn,
    .footer-cta-wa {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 140px;
    }
}
@media (max-width: 767.98px) {
    .footer-main {
        padding: 3.75rem 0 2rem;
        padding-top: 4.25rem;
    }
    .footer-desc {
        max-width: 100%;
    }
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom-links {
        justify-content: center;
    }
}
@media (max-width: 575.98px) {
    .footer-cta-inner {
        padding: 1.75rem 1.25rem;
        border-radius: var(--pf-radius);
    }
    .footer-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .footer-cta-btn,
    .footer-cta-wa {
        width: 100%;
    }
}

/* ========== MODAL ========== */
.pf-quote-modal .modal-content {
    border: none;
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-lg);
    overflow: hidden;
}
.pf-quote-modal .modal-header {
    background: var(--pf-navy);
    color: #fff;
    border: none;
    padding: 1.5rem 1.75rem;
}
.pf-quote-modal .modal-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
}
.pf-quote-modal .modal-subtitle {
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    margin: .25rem 0 0;
}
.pf-quote-modal .btn-close { filter: invert(1); opacity: .65; }
.pf-quote-modal .modal-body { padding: 1.75rem; }
.quote-form .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--pf-heading);
    margin-bottom: .35rem;
}
.quote-form .form-control {
    border: 1.5px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    padding: .7rem .95rem;
    font-size: .9rem;
    transition: border-color var(--pf-t), box-shadow var(--pf-t);
}
.quote-form .form-control:focus {
    border-color: var(--pf-blue);
    box-shadow: 0 0 0 3px rgba(30,94,255,.12);
    outline: none;
}
.alert-custom-success {
    background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
    border-radius: var(--pf-radius-sm); padding: .85rem 1rem; font-size: .9rem;
}
.alert-custom-error {
    background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B;
    border-radius: var(--pf-radius-sm); padding: .85rem 1rem; font-size: .9rem;
}

/* ========== WHATSAPP ========== */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 24px rgba(37,211,102,.4);
    z-index: 1050;
    transition: all var(--pf-t);
}
.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 32px rgba(37,211,102,.5);
    color: #fff !important;
}

/* ========== FORMS / FAQ ========== */
.contact-form .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--pf-heading);
}
.contact-form .form-control,
.contact-form .form-select {
    border: 1.5px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    padding: .7rem .95rem;
    font-size: .9rem;
}
.contact-form .form-control:focus {
    border-color: var(--pf-blue);
    box-shadow: 0 0 0 3px rgba(30,94,255,.12);
}

.accordion-item {
    border: 1px solid var(--pf-border) !important;
    border-radius: var(--pf-radius) !important;
    margin-bottom: .65rem;
    overflow: hidden;
    background: var(--pf-surface);
}
.accordion-button {
    font-weight: 600;
    font-size: .95rem;
    color: var(--pf-heading);
    background: var(--pf-surface);
    box-shadow: none !important;
    border-radius: var(--pf-radius) !important;
}
.accordion-button:not(.collapsed) {
    background: var(--pf-blue-soft);
    color: var(--pf-blue);
}
.accordion-body {
    font-size: .9rem;
    color: var(--pf-body);
    line-height: 1.7;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 991.98px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    .hero-content .lead { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual-ring { width: 280px; height: 280px; }
    .hero-visual img { max-height: 260px; }
    .hero-section { min-height: auto; padding: 3.5rem 0 4rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .site-nav .navbar-collapse {
        background: var(--pf-surface);
        border: 1px solid var(--pf-border);
        border-radius: var(--pf-radius);
        margin-top: .75rem;
        padding: .75rem;
        box-shadow: var(--pf-shadow-md);
    }
    .site-nav .nav-link { padding: .7rem 1rem !important; }
    .btn-nav-cta { width: 100%; justify-content: center; margin-top: .5rem; }
}

@media (max-width: 767.98px) {
    .top-bar { font-size: .75rem; }
    .top-bar-left span:not(:first-child) { display: none; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-num { font-size: 1.85rem; }
    .pdp-spec-grid { grid-template-columns: 1fr; }
    .pf-spec-grid { grid-template-columns: 1fr; }
    .catalogue-box { padding: 1.75rem; text-align: center; }
    .catalogue-box .text-lg-end { text-align: center !important; margin-top: 1rem; }
    .btn-catalogue { margin: .25rem; }
    .hero-content h1 { font-size: 1.85rem; }
    .footer-main { padding: 2.75rem 0 1.75rem; }
}

@media (max-width: 575.98px) {
    .hero-actions { flex-direction: column; }
    .hero-actions .btn-hero,
    .hero-actions .btn-hero-outline { width: 100%; justify-content: center; }
    .pdp-actions { flex-direction: column; align-items: stretch; }
    .pdp-actions .btn-request-quote,
    .pdp-actions .btn-talk-engineer { width: 100%; justify-content: center; }
}

.bg-light { background: var(--pf-bg) !important; }
.text-muted { color: var(--pf-muted) !important; }
.py-5 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

/* ========== HERO TRUST LINE ========== */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255,255,255,.7);
}
.hero-trust i { color: #7BA3FF; font-size: .85rem; }

/* ========== SOLUTIONS CARDS (TalentBrace style) ========== */
.solutions-section {
    padding: 5rem 0;
    background: var(--pf-surface);
}
.solution-card {
    background: var(--pf-bg);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: all var(--pf-t);
    position: relative;
    overflow: hidden;
}
.solution-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    transition: background var(--pf-t);
}
.solution-card:hover {
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow-lg);
    transform: translateY(-6px);
    border-color: transparent;
}
.solution-card:hover::before { background: var(--pf-blue); }
.solution-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--pf-blue-soft);
    color: var(--pf-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1.35rem;
}
.solution-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .65rem;
}
.solution-card p {
    font-size: .925rem;
    color: var(--pf-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.solution-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--pf-blue) !important;
}
.solution-link:hover { gap: .65rem; color: var(--pf-blue-dark) !important; }

/* ========== ABOUT MEDIA ========== */
.about-media-wrap {
    position: relative;
}
.about-img-main {
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-lg);
}
.about-badge-float {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--pf-blue);
    color: #fff;
    padding: 1.15rem 1.35rem;
    border-radius: var(--pf-radius);
    box-shadow: 0 8px 28px rgba(30,94,255,.4);
    max-width: 160px;
}
.about-badge-num {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .25rem;
}
.about-badge-txt {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    opacity: .9;
    line-height: 1.35;
}
.about-checks {
    list-style: none;
    margin: 1.25rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem 1rem;
}
.about-checks li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--pf-heading);
}
.about-checks i {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--pf-blue-soft);
    color: var(--pf-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem;
    flex-shrink: 0;
}

/* ========== PROCESS STEPS ========== */
.process-section {
    padding: 5rem 0;
    background: var(--pf-surface);
}
.process-step {
    text-align: center;
    padding: 1.5rem 1rem;
}
.process-num {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--pf-blue-soft);
    line-height: 1;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--pf-blue), #7BA3FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.process-step h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.process-step p {
    font-size: .925rem;
    color: var(--pf-muted);
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ========== CTA BANNER ========== */
.cta-banner {
    padding: 0 0 1rem;
    background: var(--pf-bg);
}
.cta-banner-inner {
    background: linear-gradient(135deg, var(--pf-blue) 0%, var(--pf-blue-dark) 100%);
    border-radius: var(--pf-radius-lg);
    padding: 2.75rem 3rem;
    color: #fff;
    box-shadow: 0 12px 40px rgba(30,94,255,.25);
}
.cta-banner-inner h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.cta-banner-inner p {
    color: rgba(255,255,255,.8);
    margin: 0;
    font-size: .95rem;
    max-width: 520px;
}
.cta-banner-inner .btn-hero {
    background: #fff;
    color: var(--pf-blue) !important;
    box-shadow: none;
}
.cta-banner-inner .btn-hero:hover {
    background: var(--pf-navy);
    color: #fff !important;
}

@media (max-width: 767.98px) {
    .about-img-main { height: 260px; }
    .about-checks { grid-template-columns: 1fr; }
    .hero-trust { justify-content: center; }
    .cta-banner-inner { padding: 2rem 1.5rem; text-align: center; }
    .cta-banner-inner .text-lg-end { text-align: center !important; margin-top: 1.25rem; }
    .cta-banner-inner p { margin-left: auto; margin-right: auto; }
}


/* ========== HOME PRODUCT GRIDS ========== */
.home-products-section {
    padding: 4.5rem 0;
    background: var(--pf-bg);
}
.home-products-section.alt {
    background: var(--pf-surface);
}
.home-product-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow: hidden;
    height: 100%;
    transition: all var(--pf-t);
    box-shadow: var(--pf-shadow);
    display: flex;
    flex-direction: column;
}
.home-products-section.alt .home-product-card {
    background: var(--pf-bg);
}
.home-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pf-shadow-lg);
    border-color: transparent;
}
.home-product-media {
    height: 300px;
    background: linear-gradient(180deg, var(--pf-off), var(--pf-gray-100));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
    position: relative;
}
.home-product-media img {
    max-height: 270px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform .35s ease;
    border: 1px solid #d8d7d7;
    border-radius: 20px;
    box-shadow: 1px 1px 0px #00000024;
}
.home-product-card:hover .home-product-media img {
    transform: scale(1.06);
}
.home-product-body {
    padding: 1.1rem 1.15rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.home-product-series {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pf-muted);
    margin-bottom: .25rem;
}
.home-product-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pf-heading);
    margin-bottom: .75rem;
}
.home-product-name a { color: inherit !important; }
.home-product-name a:hover { color: var(--pf-blue) !important; }
.home-product-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: auto;
}


/* ========== WATER LIGHT GRADIENTS ========== */
.water-bg {
    background: linear-gradient(165deg, #F0F7FF 0%, #E8F4FC 40%, #F5FAFF 70%, #EEF6FB 100%) !important;
}
.water-bg-soft {
    background: linear-gradient(180deg, #F7FBFE 0%, #EDF5FB 50%, #F7F9FC 100%) !important;
}
.water-bg-wave {
    background:
        radial-gradient(ellipse 80% 50% at 10% 90%, rgba(30,94,255,.06) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 90% 20%, rgba(14,165,233,.05) 0%, transparent 50%),
        linear-gradient(180deg, #F5FAFF 0%, #EBF4FB 100%) !important;
}

/* Apply water tones to key sections */
.solutions-section {
    background: linear-gradient(165deg, #E3F0FF 0%, #D6EBFA 40%, #EEF6FC 100%) !important;
}
.features-strip {
    background: linear-gradient(180deg, #F7FBFE 0%, #EDF5FB 55%, #F7F9FC 100%) !important;
}
.home-products-section {
    background: linear-gradient(180deg, #E8F3FC 0%, #DFF0FA 45%, #F0F7FC 100%) !important;
}
.home-products-section.alt {
    background: linear-gradient(165deg, #D8ECF8 0%, #E5F2FC 40%, #F0F7FC 100%) !important;
}
.process-section {
    background: linear-gradient(180deg, #F7FBFE 0%, #E8F4FC 100%) !important;
}
.accessories-section {
    background: linear-gradient(165deg, #F5FAFF 0%, #EEF6FB 100%) !important;
}
.catalogue-section {
    background: linear-gradient(180deg, #F7F9FC 0%, #EBF4FB 100%) !important;
}
.cta-banner {
    background: linear-gradient(180deg, #EEF6FB 0%, #F5FAFF 100%) !important;
}

.catalogue-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}
.catalogue-links .btn-catalogue {
    margin-left: 0;
    font-size: .75rem;
    padding: .5rem .9rem;
}
@media (max-width: 991.98px) {
    .catalogue-links { justify-content: center; }
}

/* Dark mode — fix merged/invisible colors & light gradients */
[data-theme="dark"] .solutions-section,
[data-theme="dark"] .features-strip,
[data-theme="dark"] .home-products-section,
[data-theme="dark"] .home-products-section.alt,
[data-theme="dark"] .process-section,
[data-theme="dark"] .accessories-section,
[data-theme="dark"] .catalogue-section,
[data-theme="dark"] .cta-banner,
[data-theme="dark"] .water-bg,
[data-theme="dark"] .water-bg-soft,
[data-theme="dark"] .water-bg-wave,
[data-theme="dark"] .stats-strip,
[data-theme="dark"] .about-section,
[data-theme="dark"] .products-section {
    background: var(--pf-bg) !important;
}
[data-theme="dark"] .solution-card,
[data-theme="dark"] .home-product-card,
[data-theme="dark"] .home-products-section.alt .home-product-card {
    background: var(--pf-surface) !important;
    border-color: var(--pf-border);
}
[data-theme="dark"] .solution-card p,
[data-theme="dark"] .feature-card p,
[data-theme="dark"] .process-step p,
[data-theme="dark"] .section-subtitle {
    color: var(--pf-muted) !important;
}
[data-theme="dark"] .solution-card h3,
[data-theme="dark"] .feature-card h4,
[data-theme="dark"] .process-step h4,
[data-theme="dark"] .home-product-name,
[data-theme="dark"] .pf-spec-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .stat-num,
[data-theme="dark"] .stat-label {
    color: var(--pf-heading) !important;
}
[data-theme="dark"] .stat-label { color: var(--pf-muted) !important; }
[data-theme="dark"] .btn-outline-navy {
    border-color: #7BA3FF !important;
    color: #7BA3FF !important;
}
[data-theme="dark"] .btn-outline-navy:hover {
    background: var(--pf-blue) !important;
    color: #fff !important;
    border-color: var(--pf-blue) !important;
}
[data-theme="dark"] .btn-arrow {
    background: var(--pf-gray-100);
    border-color: var(--pf-border);
    color: var(--pf-heading) !important;
}
[data-theme="dark"] .btn-arrow:hover {
    background: var(--pf-blue);
    color: #fff !important;
}
[data-theme="dark"] .section-label {
    background: rgba(30,94,255,.18);
    color: #7BA3FF;
}
[data-theme="dark"] .solution-icon,
[data-theme="dark"] .feature-icon {
    background: rgba(30,94,255,.18);
    color: #7BA3FF;
}
[data-theme="dark"] .home-product-media,
[data-theme="dark"] .pf-spec-media,
[data-theme="dark"] .product-card-media-link,
[data-theme="dark"] .pdp-media {
    background: linear-gradient(180deg, #152238, #1A2A42) !important;
}
[data-theme="dark"] .top-bar {
    background: #060B14;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
[data-theme="dark"] .site-nav {
    background: var(--pf-surface);
    border-bottom-color: var(--pf-border);
}
[data-theme="dark"] .site-nav .dropdown-item {
    color: var(--pf-heading);
}
[data-theme="dark"] .site-nav .dropdown-item:hover {
    background: rgba(30,94,255,.15);
    color: #7BA3FF;
}
[data-theme="dark"] .about-checks li {
    color: var(--pf-heading);
}
[data-theme="dark"] .about-checks i {
    background: rgba(30,94,255,.18);
    color: #7BA3FF;
}
[data-theme="dark"] .page-header .breadcrumb-item a {
    color: rgba(255,255,255,.7);
}
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .footer-contact a {
    color: rgba(255,255,255,.65) !important;
}
[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] .footer-contact a:hover {
    color: #7BA3FF !important;
}
[data-theme="dark"] .whatsapp-float {
    box-shadow: 0 6px 24px rgba(37,211,102,.35);
}
[data-theme="dark"] #backToTop {
    background: var(--pf-surface);
    color: var(--pf-heading);
    border: 1px solid var(--pf-border);
}

#backToTop {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--pf-border);
    background: var(--pf-surface);
    color: var(--pf-heading);
    box-shadow: var(--pf-shadow);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    transition: all var(--pf-t);
}
#backToTop.visible { display: flex; }
#backToTop:hover {
    background: var(--pf-blue);
    color: #fff;
    border-color: var(--pf-blue);
}

/* ========== ACCESSORIES PAGE ========== */
.acc-page-section { padding: 4rem 0; background: var(--pf-bg); }
.acc-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all var(--pf-t);
    box-shadow: var(--pf-shadow);
}
.acc-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pf-shadow-lg);
    border-color: transparent;
}
.acc-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: linear-gradient(180deg, var(--pf-off), var(--pf-gray-100));
    padding: 1rem;
}
.acc-card-media img {
    max-height: 120px;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease;
}
.acc-card:hover .acc-card-media img { transform: scale(1.06); }
.acc-card-body {
    padding: 1rem 1.1rem 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.acc-card-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--pf-heading);
}
.acc-card-sub {
    font-size: .8rem;
    color: var(--pf-muted);
    margin-bottom: .85rem;
}
.acc-card-actions {
    display: flex;
    gap: .4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: auto;
}
.btn-sm-acc {
    font-size: .75rem !important;
    padding: .4rem .75rem !important;
}

/* ========== INDUSTRIES ========== */
.industries-section {
    padding: 4rem 0;
    background: linear-gradient(165deg, #F0F7FF 0%, #E8F4FC 45%, #F5FAFF 100%);
}
[data-theme="dark"] .industries-section { background: var(--pf-bg) !important; }
.industry-card {
    background: var(--pf-bg);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.5rem 1.25rem;
    height: 100%;
    text-align: center;
    transition: all var(--pf-t);
    box-shadow: var(--pf-shadow);
}
[data-theme="dark"] .industry-card { background: var(--pf-surface); }
.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pf-shadow-lg);
    border-color: transparent;
}
.industry-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--pf-blue-soft);
    color: var(--pf-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    margin: 0 auto 1rem;
}
.industry-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.industry-desc {
    font-size: .85rem;
    color: var(--pf-muted);
    margin: 0;
    line-height: 1.55;
}
.duties-section {
    padding: 4rem 0;
    background: var(--pf-bg);
}
.duty-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.5rem 1.35rem;
    height: 100%;
    transition: all var(--pf-t);
}
.duty-card:hover {
    border-color: transparent;
    box-shadow: var(--pf-shadow-lg);
}
.duty-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.duty-desc {
    font-size: .9rem;
    color: var(--pf-muted);
    margin: 0;
    line-height: 1.6;
}

/* ========== CENTRIFUGAL PAGE ========== */
.cp-content-section { padding: 3.5rem 0 4.5rem; background: var(--pf-bg); }
.cp-panel {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: var(--pf-shadow);
    margin-bottom: 1.25rem;
}
.cp-panel-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.pf-table {
    margin: 0;
    font-size: .9rem;
}
.pf-table thead th {
    background: var(--pf-navy);
    color: #fff;
    font-weight: 600;
    border: none;
    padding: .75rem 1rem;
}
.pf-table tbody td {
    padding: .65rem 1rem;
    border-color: var(--pf-border);
    color: var(--pf-body);
}
.pf-table tbody tr:nth-child(even) {
    background: var(--pf-off);
}
[data-theme="dark"] .pf-table tbody tr:nth-child(even) {
    background: var(--pf-gray-100);
}
.cp-list-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.35rem 1.25rem;
    height: 100%;
}
.cp-list-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .85rem;
}
.cp-list-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cp-list-card li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    color: var(--pf-body);
    margin-bottom: .55rem;
    line-height: 1.45;
}
.cp-list-card li i {
    color: var(--pf-blue);
    margin-top: .2rem;
    font-size: .7rem;
}
.cp-services {
    background: var(--pf-blue-soft);
    border-radius: var(--pf-radius);
    padding: 1.25rem 1.35rem;
}
.cp-services h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.cp-services p {
    margin: 0;
    font-size: .9rem;
    color: var(--pf-body);
}
[data-theme="dark"] .cp-services {
    background: rgba(30,94,255,.12);
}
.cp-side-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow: hidden;
    box-shadow: var(--pf-shadow);
    margin-bottom: 1.25rem;
}
.cp-side-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.cp-side-body {
    padding: 1.25rem;
}
.cp-side-body h5 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.cp-side-body p {
    font-size: .875rem;
    color: var(--pf-muted);
    margin-bottom: 1rem;
}
.cp-side-links {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.25rem;
}
.cp-side-links h6 {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pf-muted);
    margin-bottom: .75rem;
}
.cp-side-links a {
    display: block;
    padding: .55rem 0;
    border-bottom: 1px solid var(--pf-border);
    color: var(--pf-heading) !important;
    font-size: .9rem;
    font-weight: 500;
}
.cp-side-links a:last-child { border-bottom: none; }
.cp-side-links a:hover { color: var(--pf-blue) !important; padding-left: 4px; }

.page-header-sub {
    color: rgba(255,255,255,.75);
    font-size: 1rem;
    margin-top: .5rem;
    max-width: 540px;
}

/* ========== INNER PAGES GLOBAL ========== */
.content-section { padding: 3.5rem 0; background: var(--pf-bg); }
.page-header {
    position: relative;
    overflow: hidden;
}
.page-header .container { position: relative; z-index: 2; }
.category-intro-media {
    border-radius: var(--pf-radius-lg);
    overflow: hidden;
    box-shadow: var(--pf-shadow-lg);
    background: var(--pf-surface);
}
.category-intro-media img {
    width: 100%;
    height: 340px;
    object-fit: contain;
    background: linear-gradient(180deg, var(--pf-off), var(--pf-gray-100));
    padding: 1.5rem;
}
.category-intro {
    padding: 3.5rem 0;
    background: var(--pf-bg);
}

/* Fire fighting page align to brand */
.hero-ff {
    background: linear-gradient(135deg, var(--pf-navy) 0%, #0B1D3A 50%, var(--pf-blue-dark) 100%);
    color: #fff;
    padding: 4rem 0 3.5rem;
}
.hero-ff .hero-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}
.hero-ff .hero-title span { color: #7BA3FF; }
.hero-badge {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .75rem;
}
.btn-gold {
    background: var(--pf-blue) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
}
.btn-gold:hover {
    background: var(--pf-blue-dark) !important;
    color: #fff !important;
}
.section-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    overflow: hidden;
}
.support-card {
    background: var(--pf-navy);
    border-radius: var(--pf-radius);
}
.vision-image {
    min-height: 280px;
    border-radius: var(--pf-radius-lg);
    background-size: cover;
    background-position: center;
}

/* Product listing pages */
.products-grid-section { padding: 3.5rem 0 4rem; background: var(--pf-bg); }

/* Contact form polish */
.contact-form .form-control,
.quote-form .form-control {
    border-radius: var(--pf-radius-sm);
    border: 1px solid var(--pf-border);
    padding: .75rem 1rem;
    font-size: .925rem;
}
.contact-form .form-control:focus,
.quote-form .form-control:focus {
    border-color: var(--pf-blue);
    box-shadow: 0 0 0 3px rgba(30,94,255,.15);
}

/* ========== RESPONSIVE — INNER PAGES ========== */
@media (max-width: 1199.98px) {
    .site-nav .nav-link {
        padding: .4rem .45rem !important;
        font-size: .8rem;
    }
    .btn-nav-cta {
        padding: .45rem .85rem !important;
        font-size: .75rem;
    }
}
@media (max-width: 991.98px) {
    .page-header {
        padding: 2.25rem 0 !important;
        text-align: center;
    }
    .page-header .text-lg-end {
        text-align: center !important;
        margin-top: 1rem;
    }
    .page-header .breadcrumb {
        justify-content: center !important;
    }
    .page-header-sub {
        margin-left: auto;
        margin-right: auto;
    }
    .category-intro-media img {
        height: 260px;
    }
    .category-intro-text {
        text-align: center;
    }
    .category-intro-text .d-flex {
        justify-content: center;
    }
    .about-checks {
        grid-template-columns: 1fr !important;
        text-align: left;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .cp-side-card { margin-top: .5rem; }
    .hero-ff {
        padding: 3rem 0 2.5rem;
        text-align: center;
    }
    .hero-ff .d-flex.gap-3,
    .hero-ff .d-flex.gap-4 {
        justify-content: center;
    }
    .footer-cta-inner { top: 1.5rem; }
}
@media (max-width: 767.98px) {
    .page-header h1 {
        font-size: 1.65rem !important;
    }
    .section-title {
        font-size: 1.45rem !important;
    }
    .category-intro {
        padding: 2.5rem 0;
    }
    .category-intro-media img {
        height: 220px;
    }
    .cp-content-section,
    .acc-page-section,
    .industries-section,
    .duties-section,
    .products-grid-section {
        padding: 2.5rem 0;
    }
    .cp-panel,
    .cp-list-card {
        padding: 1.15rem 1rem;
    }
    .pf-table {
        font-size: .8rem;
    }
    .pf-table thead th,
    .pf-table tbody td {
        padding: .5rem .65rem;
    }
    .product-card .card-body {
        padding: 1rem;
    }
    .home-product-media {
        height: 140px;
    }
    .acc-card-media {
        height: 130px;
    }
    .industry-card {
        padding: 1.15rem .9rem;
    }
    .industry-title {
        font-size: .95rem;
    }
    .top-bar {
        font-size: .7rem;
        text-align: center;
    }
    .top-bar-left,
    .top-bar-right {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }
    .footer-main {
        padding-top: 4rem;
    }
    .site-nav .navbar-collapse {
        background: var(--pf-surface);
        border-radius: var(--pf-radius);
        margin-top: .75rem;
        padding: .75rem;
        box-shadow: var(--pf-shadow-lg);
        border: 1px solid var(--pf-border);
    }
    .site-nav .nav-link {
        padding: .65rem .85rem !important;
        font-size: .9rem !important;
    }
    .btn-nav-cta {
        width: 100%;
        justify-content: center;
        margin-top: .35rem;
    }
    .theme-toggle {
        margin: .5rem auto 0;
    }
}
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .page-header h1 {
        font-size: 1.4rem !important;
    }
    .btn-request-quote,
    .btn-outline-navy,
    .btn-hero {
        font-size: .8rem;
        padding: .55rem 1rem;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .btn-hero,
    .hero-actions .btn-hero-outline {
        width: 100%;
        justify-content: center;
    }
    .col-6 .acc-card-title,
    .col-6 .home-product-name {
        font-size: .85rem;
    }
    .catalogue-links {
        justify-content: center;
    }
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: 1rem;
        right: 1rem;
        font-size: 1.35rem;
    }
    #backToTop {
        bottom: 4.5rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }
}

/* Dark mode inner pages */
[data-theme="dark"] .hero-ff {
    background: linear-gradient(135deg, #060B14 0%, #0A1220 50%, #111B2E 100%);
}
[data-theme="dark"] .section-card,
[data-theme="dark"] .cp-list-card,
[data-theme="dark"] .cp-panel,
[data-theme="dark"] .acc-card,
[data-theme="dark"] .industry-card,
[data-theme="dark"] .duty-card {
    background: var(--pf-surface);
    border-color: var(--pf-border);
}
[data-theme="dark"] .category-intro-media {
    background: var(--pf-gray-100);
}


/* Product image — never crop pipes/pumps; larger frame + lightbox hint */
.product-card-media-link::after,
.home-product-media::after,
.pdp-media::after,
.pf-spec-media::after {
    content: "\f00e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 2;
}
.product-card-media-link:hover::after,
.home-product-media:hover::after,
.pdp-media:hover::after,
.pf-spec-media:hover::after {
    opacity: 1;
}
.acc-card-media {
    min-height: 170px;
    height: 170px;
}
.acc-card-media img {
    max-height: 145px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.cp-side-card img,
.category-intro-media img {
    object-fit: contain !important;
}
@media (max-width: 767.98px) {
    .product-card-media-link { min-height: 180px; }
    .product-card .card-img-top { height: 160px; }
    .home-product-media { height: 170px; }
    .home-product-media img { max-height: 145px; }
    .pdp-media { min-height: 280px; padding: 1.25rem; }
    .pdp-media img { max-height: 240px; }
    .category-intro-media img { height: 240px; }
}

/* ========== PDF / CATALOGUES PAGE ========== */
.pdf-page-section {
    padding: 4rem 0;
    background: var(--pf-bg);
}
.pdf-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.5rem 1.35rem;
    height: 100%;
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    transition: all var(--pf-t);
    box-shadow: var(--pf-shadow);
}
.pdf-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pf-shadow-lg);
    border-color: transparent;
}
.pdf-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(220, 38, 38, .1);
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.pdf-card-body { flex: 1; min-width: 0; }
.pdf-card-type {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pf-blue);
    background: var(--pf-blue-soft);
    padding: .2rem .55rem;
    border-radius: var(--pf-radius-pill);
    margin-bottom: .4rem;
}
.pdf-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .35rem;
    color: var(--pf-heading);
}
.pdf-card-desc {
    font-size: .85rem;
    color: var(--pf-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.pdf-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
[data-theme="dark"] .pdf-card {
    background: var(--pf-surface);
    border-color: var(--pf-border);
}
[data-theme="dark"] .pdf-card-icon {
    background: rgba(220, 38, 38, .18);
    color: #F87171;
}
@media (max-width: 575.98px) {
    .pdf-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .pdf-card-icon { margin: 0 auto; }
    .pdf-card-actions { justify-content: center; }
}

/* ========== GLIGHTBOX TITLE (bottom) ========== */
.glightbox-clean .gslide-title {
    font-size: 1.4em;
    color: #fff !important;
    margin-bottom: 19px;
    line-height: 1.4em;
    background: #000000;
    padding: 1rem;
    text-align: center;
    border-radius: 10px;
    font-weight: 900;
}
.glightbox-clean .gslide-description {
    background: transparent !important;
    bottom: 0 !important;
}
.glightbox-clean .gdesc-inner {
    padding: 12px 16px 20px !important;
}
.gslide-image img {
    border-radius: 8px;
}

/* ========== GLIGHTBOX — bottom title ========== */
.glightbox-clean .gslide-title {
    font-size: 1.4em;
    color: #fff;
    margin-bottom: 19px;
    line-height: 1.4em;
    background: #000000;
    padding: 1rem;
    text-align: center;
    border-radius: 10px;
    font-weight: 900;
}
.glightbox-clean .gslide-description {
    background: transparent;
}
.glightbox-clean .gdesc-inner {
    padding: 12px 20px 20px;
}

/* ========== RESPONSIVE FIXES (global) ========== */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
img, video, iframe, table {
    max-width: 100%;
}
.row { --bs-gutter-x: 1.25rem; }

/* Prevent horizontal scroll from wide tables */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hero / grids on small screens */
@media (max-width: 991.98px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 1.5rem !important;
    }
    .hero-content { order: 1; }
    .hero-visual { order: 2; max-width: 320px; margin: 0 auto; }
    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    .hero-trust { justify-content: center; }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    .footer-cta-actions {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .hero-section { padding: 2.5rem 0 !important; }
    .hero-content h1 {
        font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .stat-num { font-size: 1.5rem !important; }
    .pf-spec-grid {
        grid-template-columns: 1fr !important;
    }
    .card-actions,
    .home-product-actions,
    .acc-card-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
    .section-subtitle {
        max-width: 100% !important;
        padding: 0 .25rem;
    }
    /* Nav mobile spacing */
    .site-nav .navbar-nav {
        padding: .5rem 0;
    }
    .site-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: .75rem;
    }
}

@media (max-width: 575.98px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: .75rem !important;
    }
    .btn-request-quote,
    .btn-outline-navy {
        white-space: nowrap;
    }
    .top-bar-left span:not(:first-child) {
        display: none;
    }
    .top-bar-right a span,
    .top-bar-right a {
        font-size: .7rem;
    }
    /* Catalogue buttons stack */
    .catalogue-box .btn-catalogue {
        display: inline-flex;
        margin: .25rem;
    }
    .footer-cta-inner {
        padding: 1.5rem 1rem !important;
    }
}

/* Fix Bootstrap containers on very small screens */
@media (max-width: 400px) {
    .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }
    .col-6 .pdf-card-actions,
    .col-6 .home-product-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ========== TOP BAR ========== */
.top-bar {
    background: linear-gradient(90deg, #07101F 0%, var(--pf-navy) 45%, #0B1D3A 100%);
    color: rgba(255,255,255,.8);
    font-size: .78rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-bar a {
    color: rgba(255,255,255,.88) !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    transition: background .25s ease, color .25s ease;
}
.top-bar a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1);
}
.top-bar-left, .top-bar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}
.top-bar i {
    opacity: .85;
    font-size: .75rem;
    color: #7BA3FF;
}

/* ========== NAV ========== */
.site-nav {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(11,29,58,.06);
    padding: .15rem 0;
    min-height: var(--pf-nav-h);
    box-shadow: 0 8px 30px rgba(11,29,58,.06);
}
[data-theme="dark"] .site-nav {
    background: rgba(12,18,32,.92);
    border-bottom-color: rgba(255,255,255,.06);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.site-nav.sticky-top { z-index: 1030; }
.site-nav .navbar-brand {
    padding: .65rem 0;
    margin-right: 1.35rem;
    position: relative;
}
.site-nav .brand-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease;
}
.site-nav .navbar-brand:hover .brand-logo {
    transform: scale(1.03);
}
.site-nav .nav-link {
    position: relative;
    color: var(--pf-heading) !important;
    font-weight: 600;
    font-size: .84rem;
    letter-spacing: .01em;
    padding: .55rem .7rem !important;
    border-radius: 10px;
    transition: color .25s ease, background .25s ease;
    white-space: nowrap;
}
.site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .2rem;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pf-blue);
    transform: translateX(-50%);
    transition: width .28s cubic-bezier(.22,1,.36,1);
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active {
    color: var(--pf-blue) !important;
    background: transparent;
}
.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
    width: 55%;
}
.site-nav .nav-link.dropdown-toggle::after {
    /* keep bootstrap caret; our underline is separate */
}
.site-nav .dropdown-toggle.nav-link::after {
    /* bootstrap caret uses border - leave it */
}
[data-theme="dark"] .site-nav .nav-link { color: #C8D4E8 !important; }
[data-theme="dark"] .site-nav .nav-link:hover,
[data-theme="dark"] .site-nav .nav-link.active {
    color: #7BA3FF !important;
    background: transparent;
}
[data-theme="dark"] .site-nav .nav-link::after {
    background: #7BA3FF;
}

.site-nav .dropdown-menu {
    border: 1px solid var(--pf-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(11,29,58,.14);
    padding: .55rem;
    min-width: 230px;
    margin-top: .65rem !important;
    background: var(--pf-surface);
}
.site-nav .dropdown-item {
    border-radius: 10px;
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--pf-heading);
    transition: all .2s ease;
}
.site-nav .dropdown-item:hover {
    background: var(--pf-blue-soft);
    color: var(--pf-blue);
    transform: translateX(3px);
}
.site-nav .dropdown-divider { margin: .35rem 0; border-color: var(--pf-border); }

.btn-nav-cta {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, var(--pf-blue) 0%, #3B7BFF 100%) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: .8rem;
    padding: .6rem 1.2rem !important;
    border-radius: 999px !important;
    border: none;
    box-shadow: 0 6px 18px rgba(30,94,255,.32);
    transition: all .28s cubic-bezier(.22,1,.36,1);
    white-space: nowrap;
}
.btn-nav-cta:hover {
    background: linear-gradient(135deg, var(--pf-blue-dark) 0%, var(--pf-blue) 100%) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(30,94,255,.42);
}
.btn-nav-cta::after { display: none !important; }

.navbar-toggler {
    border: 1px solid var(--pf-border);
    padding: .45rem .6rem;
    border-radius: 10px;
    background: var(--pf-surface);
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(30,94,255,.15); }

/* Theme toggle next to CTA */
.theme-toggle-nav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--pf-border);
    background: var(--pf-off);
    color: var(--pf-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}
.theme-toggle-nav:hover {
    border-color: var(--pf-blue);
    color: var(--pf-blue);
    transform: rotate(12deg);
}

@media (max-width: 991.98px) {
    .site-nav .nav-link::after { display: none; }
    .site-nav .nav-link:hover,
    .site-nav .nav-link.active {
        background: var(--pf-blue-soft);
    }
    .site-nav .navbar-collapse {
        background: var(--pf-surface);
        border: 1px solid var(--pf-border);
        border-radius: 16px;
        margin-top: .75rem;
        padding: .75rem;
        box-shadow: 0 16px 40px rgba(11,29,58,.12);
    }
    .btn-nav-cta {
        width: 100%;
        justify-content: center;
        margin-top: .35rem;
    }
}

/* ========== HOME PRODUCT CARDS — sequential reveal ========== */
.home-product-card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1),
                transform .55s cubic-bezier(.22,1,.36,1),
                box-shadow .28s ease,
                border-color .28s ease;
}
.home-product-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .home-product-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ========== AOS content polish ========== */
[data-aos] {
    pointer-events: auto;
}
/* Images with AOS keep contain layout stable */
.product-card-media-link[data-aos],
.category-intro-media[data-aos],
.pdp-media[data-aos],
.pf-spec-media[data-aos],
.acc-card-media[data-aos] {
    will-change: transform, opacity;
}