/* ═══════════════════════════════════════════════════════ */
/* INSOURCES ARAMID B2B THEME OVERRIDES (BOOTSTRAP 5)      */
/* ═══════════════════════════════════════════════════════ */

:root {
    /* Brand Colors */
    --bs-primary: #F47920;
    --bs-primary-rgb: 244, 121, 32;
    --bs-link-color: #F47920;
    --bs-link-hover-color: #D4631A;
    
    --orange: #F47920;
    --orange-dark: #D4631A;
    --orange-subtle: rgba(244, 121, 32, 0.05);

    /* Neutrals */
    --black: #0A0A0A;
    --gray-900: #212529;
    --gray-700: #495057;
    --gray-500: #adb5bd;
    --gray-300: #dee2e6;
    --gray-200: #e9ecef;
    --gray-100: #f8f9fa;
    --gray-50: #fafafa;
    --white: #FFFFFF;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Layout */
    --section-padding: clamp(70px, 8vw, 100px);
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── BASE STYLES ─── */
*, *::before, *::after {
    border-radius: 0 !important;
}

/* Re-allow circular badge dots, list bullets, and scroll wheel */
.hero__badge-dot,
.product-card__specs li::before,
.scroll-wheel {
    border-radius: 50% !important;
}
.scroll-mouse {
    border-radius: 10px !important;
}

/* Re-allow border radius for chatbot elements */
.chatbot-toggle-btn {
    border-radius: 26px !important;
}
.chatbot-toggle-avatar {
    border-radius: 50% !important;
}
.chatbot-widget {
    border-radius: 16px !important;
}
.chatbot-avatar {
    border-radius: 50% !important;
}
.chatbot-input-wrapper {
    border-radius: 24px !important;
}
.chatbot-send-btn {
    border-radius: 50% !important;
}
.chatbot-suggestion-chip {
    border-radius: 8px !important;
}
.chatbot-whatsapp-strip a {
    border-radius: 20px !important;
}
.message-content {
    border-radius: 12px !important;
}
.typing-dot {
    border-radius: 50% !important;
}
.header-cta-btn {
    border-radius: 24px !important;
}



body {
    font-family: var(--font-primary);
    color: var(--gray-900);
    background: var(--white);
    line-height: 1.65;
}

/* ─── BUTTON CUSTOM OVERRIDES ─── */
/* Base button layout resets for premium micro-interactions */
.btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none !important; /* Completely remove borders from all buttons */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s ease, 
                color 0.3s ease, 
                background-color 0.3s ease;
    outline: none !important;
}

/* Base Hover Scale-up and Lift (Impulse physics) */
.btn:hover {
    transform: translateY(-3px) scale(1.02);
    border: none !important;
}

/* Base Click/Press scale-down physical feedback */
.btn:active {
    transform: translateY(-1px) scale(0.98) !important;
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
}

/* Primary Button Slide-over Effect */
.btn-primary {
    background-color: var(--orange) !important;
    color: var(--white) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(244, 121, 32, 0.15);
    border: none !important;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: var(--white) !important;
    border: none !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.btn-primary:focus, 
.btn-primary:active {
    background-color: var(--black) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15) !important;
}

/* Outline Light Button Slide-over Effect */
.btn-outline-light {
    background-color: rgba(255, 255, 255, 0.12) !important; /* Soft transparent background instead of border */
    color: var(--white) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
    border: none !important;
}

.btn-outline-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-outline-light:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    color: var(--black) !important;
    border: none !important;
}

.btn-outline-light:hover {
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25) !important;
}

.btn-outline-light:focus,
.btn-outline-light:active {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15) !important;
}

/* ─── SECTION STYLING ─── */
.section {
    padding: var(--section-padding) 0;
    border-bottom: 1px solid var(--gray-200);
}

.section--light {
    background: var(--white);
}



.section--specs {
    background: var(--gray-100);
}



.section__header {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 48px);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--orange);
    margin-bottom: 12px;
    padding: 4px 12px;
    background: var(--orange-subtle);
    border: 1px solid rgba(244, 121, 32, 0.2);
    border-radius: var(--radius-sm);
}

.section__title {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--black);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.section__description {
    font-size: 14px;
    color: var(--gray-700);
}

/* ─── GLASSMORPHIC HEADER / NAVIGATION ─── */
.site-header.floating-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    background-color: rgba(15, 16, 17, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    z-index: 1050;
    box-shadow: none; /* No shadow effect */
    padding: 0;
    transition: background-color 300ms ease, border-bottom-color 300ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.floating-header.header-hidden {
    transform: translateY(-100%);
}

/* Glassmorphic header scrolled state (more opaque background over content) */
.site-header.floating-header.scrolled {
    background-color: rgba(15, 16, 17, 0.78) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Container limits width and handles flex alignments */
.site-header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    padding: 10px 24px;
    margin: 0 auto;
}

/* Text Logo Component styling */
.site-logo {
    display: flex;
    align-items: center;
    padding: 0;
    text-decoration: none;
}

.site-logo .logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    transition: color 250ms ease;
    line-height: 1;
    white-space: nowrap;
}

.site-logo:hover .logo-text {
    color: var(--orange);
}

.site-header .navbar {
    padding: 0;
    width: 100%;
}

.site-header .navbar-nav {
    display: flex;
    align-items: center;
    gap: 3px;
}

.site-header .nav-link {
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 6px 10px !important;
    transition: color 250ms ease, background-color 250ms ease;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.site-header .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05);
}

.site-header .nav-link.active {
    color: #ffffff !important;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.08);
}

.site-header .dropdown-item:hover {
    color: #ffffff;
    background-color: rgba(244, 121, 32, 0.15);
}

/* Contact Us Button on far right */
.header-cta-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background-color: var(--orange) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    padding: 8px 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important; /* No shadow effect */
    transition: background-color 250ms ease, transform 250ms ease !important;
    white-space: nowrap;
}

.header-cta-btn:hover {
    background-color: #e26715 !important;
    transform: translateY(-1.5px);
    box-shadow: none !important; /* No shadow effect */
}

.chevron-right-icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    transition: transform 250ms ease;
}

.header-cta-btn:hover .chevron-right-icon {
    transform: translateX(2px);
}

/* Custom Hamburger Toggle Button for mobile viewports */
.site-header .navbar-toggler {
    border: none !important;
    padding: 8px;
    background: transparent !important;
    display: none;
}

.navbar-toggler-icon-custom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 14px;
}

.toggler-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 1px;
    transition: transform 300ms ease, opacity 300ms ease;
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    .site-header.floating-header {
        top: 0;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
        padding: 4px 0;
    }
    
    .site-header .header-container {
        padding: 8px 16px;
        flex-wrap: wrap;
    }
    
    .site-header .navbar-toggler {
        display: block;
    }
    
    .site-header .navbar-collapse {
        width: 100%;
        background-color: rgba(17, 18, 19, 0.98);
        border-radius: 8px;
        margin-top: 12px;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: none; /* No shadow effect */
    }
    
    .site-header .navbar-nav {
        align-items: flex-start;
        width: 100%;
        gap: 4px;
        margin-bottom: 16px;
    }
    
    .site-header .nav-link {
        width: 100%;
        padding: 10px 14px !important;
    }
    
    .site-header .dropdown-menu {
        border: none;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.03);
        margin-top: 4px !important;
        width: 100%;
        padding-left: 12px;
    }
    
    .header-cta {
        width: 100%;
    }
    
    .header-cta-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Toggle active animation lines */
    .site-header .navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .site-header .navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(2) {
        opacity: 0;
    }
    .site-header .navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

/* ═══════════════════════════════════════════════════════ */
/* HERO — CINEMATIC VIDEO BACKGROUND & APPLICATION CARDS */
/* ═══════════════════════════════════════════════════════ */

.hero {
    min-height: 100vh;
    background-color: #0b0c0d;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}

/* ─ Video Background & Overlay ─ */
.hero__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(11, 12, 13, 0.4) 0%, rgba(11, 12, 13, 0.82) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ─ Container & centered content ─ */
.hero__container {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero__content-wrap {
    width: 100%;
    padding: 0 15px;
}

/* ─ Typography ─ */
.hero__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(34px, 5.5vw, 68px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

.hero__subtitle {
    font-size: clamp(14px, 1.8vw, 17px);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ─ Rotating word animation ─ */
.hero__rotating-wrap {
    position: relative;
    display: inline-block;
    color: var(--orange);
    border-bottom: 4px solid var(--orange);
    padding-bottom: 2px;
    margin-left: 5px;
    text-align: center;
    vertical-align: bottom; /* Aligns wrapper correctly with preceding static text */
}

.hero__rotating-word {
    position: absolute;
    bottom: 2px; /* Positions word just above the border-bottom line */
    left: 0;
    right: 0;
    width: 100%;
    text-align: center; /* Center aligning rotating words inside the wrapper box */
    opacity: 0;
    transform: translateY(8px); /* Subtle sleek slide up */
    transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    white-space: nowrap;
    display: none; /* Hide inactive words to avoid layout anomalies */
}

.hero__rotating-word.active {
    position: relative; /* Defines parent container width dynamically */
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero__rotating-word.exit {
    position: absolute;
    display: inline-block;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─ CTAs ─ */
.hero__cta-group {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}

.hero__btn {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 13px 26px;
    border-radius: 50px;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms ease, background 200ms ease;
    border: none;
}

.hero__btn--primary {
    background: var(--orange);
    color: #ffffff;
}

.hero__btn--primary:hover {
    background: var(--orange-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(244,121,32,0.45);
}

.hero__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.9);
}

.hero__btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff;
    transform: translateY(-2px);
}



/* ─ Lower cards container (Horizontal Ribbon Format) ─ */
.hero__bottom-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: auto;
}

.hero__cards-ribbon-container {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

.hero__cards-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE/Edge */
    margin: 0;
    padding: 0;
}

.hero__cards-track::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

.hero__card--vertical {
    background: rgba(13, 15, 16, 0.7);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* For contiguous border collapse, use negative margin-right */
    margin-right: -1px;
    border-radius: 0px; /* Sharp corners for clean contiguous ribbon */
    overflow: hidden;
    cursor: pointer;
    transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
    display: flex;
    flex-direction: column;
    flex: 0 0 25vw; /* Desktop: 4 cards visible */
    scroll-snap-align: center;
    position: relative;
    z-index: 1;
}

/* Add slight rounding to the far left and right edges on large viewports */
@media (min-width: 992px) {
    .hero__card--vertical:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .hero__card--vertical:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        margin-right: 0;
    }
}

.hero__card-img-wrap {
    width: 100%;
    height: 250px; /* Increased image height */
    overflow: hidden;
    position: relative;
    background-color: #0b0c0d;
}

.hero__card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.0);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__card-content {
    padding: 16px 20px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.hero__card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
    margin-bottom: 6px;
    transition: color 250ms ease;
}

.hero__card-meta {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    letter-spacing: 0.02em;
    transition: color 250ms ease;
}

/* Card hover and active states */
.hero__card--vertical:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(244, 121, 32, 0.5);
    z-index: 3; /* Lift above neighbors so borders display fully */
}

.hero__card--vertical:hover .hero__card-img-wrap img {
    transform: scale(1.06);
}

.hero__card--vertical.active {
    background-color: rgba(244, 121, 32, 0.12);
    border-color: var(--orange);
    z-index: 5; /* Lift active card borders above all others */
    box-shadow: 
        inset 0 0 15px rgba(244, 121, 32, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.4);
}

.hero__card--vertical.active .hero__card-title {
    color: #ffffff;
}

.hero__card--vertical.active .hero__card-meta {
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .hero__card--vertical {
        flex: 0 0 33.33vw; /* Tablet: 3 cards visible */
    }
    .hero__card-img-wrap {
        height: 210px; /* Increased tablet image height */
    }
}

@media (max-width: 768px) {
    .hero__card--vertical {
        flex: 0 0 70vw; /* Mobile: 1.4 cards visible */
    }
    .hero__card-img-wrap {
        height: 170px; /* Increased mobile image height */
    }
    .hero__card-content {
        padding: 12px 14px 14px;
    }
    .hero__card-title {
        font-size: 13px;
    }
    .hero__card-meta {
        font-size: 10px;
    }
}

/* ─ Ticker marquee strip ─ */
.hero2__marquee-wrap {
    overflow: hidden;
    padding: 12px 0;
    width: 100%;
    position: relative;
    z-index: 2;
}
.hero2__marquee-track {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    width: max-content;
    animation: hero2-marquee 32s linear infinite;
}
@keyframes hero2-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hero2__marquee-track:hover { animation-play-state: paused; }
.hero2__marquee-item {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.hero2__marquee-sep {
    color: var(--orange);
    font-size: 16px;
    opacity: 0.5;
}

/* ─ Responsive ─ */
@media (max-width: 767px) {
    .hero__rotating-wrap {
        display: inline-block;
        margin-left: 0;
        text-align: center;
        border-bottom: 2px solid var(--orange);
        margin-top: 8px;
    }
    .hero__cta-group {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero__cta-group .hero__btn {
        width: 100%;
    }
    .hero__spacer {
        height: 70px !important;
    }
}

.hero__stats {
    display: flex;
    gap: 32px;
}

.hero__stat {
    display: flex;
    flex-direction: column;
}

.hero__stat-number {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    font-family: var(--font-mono);
}

.hero__stat-suffix {
    color: var(--orange);
    font-weight: 600;
}

.hero__stat-label {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}


/* ─── FEATURE CARDS ─── */
.feature-card {
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--orange) !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.feature-card:hover {
    border-color: var(--orange);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.feature-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-subtle);
    border-radius: var(--radius-sm);
    color: var(--orange);
}

.feature-card__title {
    font-size: 16px;
    color: var(--black);
}

/* ─── PRODUCT CATALOG TABS & CARDS ─── */
.product-tab {
    background-color: var(--gray-100) !important;
    border: 1px solid var(--gray-300) !important;
    color: var(--gray-700) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 20px;
    transition: all var(--transition);
    text-transform: uppercase;
}

.product-tab:hover {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}

.product-tab.active {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: var(--white) !important;
}

.product-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.product-card:hover {
    border-color: var(--orange);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.product-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__image img.img-contain {
    object-fit: contain;
    background-color: #ffffff;
    padding: 8px;
}

.product-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.1em;
    user-select: none;
    transition: all var(--transition);
}

.product-card:hover .product-card__placeholder {
    color: rgba(255, 255, 255, 0.75);
    transform: scale(1.03);
}

.placeholder-am { background-color: #1a365d; }
.placeholder-apa { background-color: #2c3e50; }
.placeholder-ah { background-color: #2b1b3d; }
.placeholder-aha { background-color: #1b1029; }
.placeholder-ytcm { background-color: #5c3e21; }
.placeholder-yt7540 { background-color: #4b5563; }
.placeholder-cords { background-color: #2d3e2d; }
.placeholder-fullseries { background-color: #1f2d24; }

.product-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--orange);
    color: var(--white);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}

.product-card__info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card__brand {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--orange);
    margin-bottom: 4px;
}

.product-card__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 2px;
}

.product-card__desc {
    font-size: 12px;
    margin-bottom: 12px;
    min-height: 36px;
}

.product-card__details {
    font-size: 11.5px !important;
    font-weight: 500;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: auto;
}

.product-card__specs {
    list-style: none;
    padding-left: 0;
    margin-bottom: 16px;
    flex-grow: 1;
}

.product-card__specs li {
    color: var(--gray-700);
    padding: 3px 0;
    padding-left: 12px;
    position: relative;
}

.product-card__specs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    background: var(--orange);
    border-radius: 50%;
}

/* ─── APPLICATIONS GRID ─── */
.app-card {
    transition: all var(--transition);
    cursor: pointer;
}

.app-card img {
    transition: transform 0.5s ease;
}

.app-card:hover img {
    transform: scale(1.04);
}

.app-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    transition: background var(--transition);
}

.app-card:hover .app-card__overlay {
    background: rgba(0, 0, 0, 0.8);
}

.app-card__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--orange);
}

.app-card__title {
    font-size: 16px;
    font-weight: 700;
}

.app-card__text {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 300ms ease;
}

.app-card:hover .app-card__text {
    max-height: 60px;
    opacity: 1;
}




/* ─── WHY INSOURCES REDESIGN ─── */
.why-section {
    padding: var(--section-padding) 0;
}

.why-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--orange);
}

.why-title {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.25;
    color: var(--black);
    letter-spacing: -0.02em;
}

.why-subtitle {
    color: var(--gray-700) !important;
}

.why-feature-card {
    border-top: 2px solid var(--orange);
    padding-top: 20px;
    height: 100%;
}

.why-feature-card__number {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.why-feature-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
    line-height: 1.4;
}

.why-feature-card__text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--gray-700);
    margin-bottom: 0;
}

.why-footer {
    border-top: 1px solid var(--gray-300);
}

.why-footer-text {
    font-family: var(--font-primary);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gray-500) !important;
}

/* ─── MATERIAL SELECTION TABLE ─── */
.selection-table-wrap {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
}

/* ─── TECHNICAL SELECTION MATRIX & SPECIFICATIONS ─── */
.matrix-tabs-container {
    background-color: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 32px;
    border-bottom: 2px solid var(--gray-200);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.matrix-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    outline: none !important;
    color: var(--gray-700);
    padding: 12px 8px;
    margin-bottom: -2px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.matrix-tab-btn:hover {
    color: var(--orange);
    border-bottom-color: rgba(244, 121, 32, 0.3) !important;
    background: transparent !important;
}

.matrix-tab-btn.active {
    background-color: transparent !important;
    color: var(--orange) !important;
    border-bottom-color: var(--orange) !important;
    font-weight: 700;
    box-shadow: none;
}

@media (max-width: 576px) {
    .matrix-tabs-container {
        gap: 16px;
    }
    .matrix-tab-btn {
        font-size: 13px;
        padding: 10px 4px;
    }
}

.matrix-tab-content {
    margin-top: 30px;
}

.matrix-tab-pane {
    display: none;
}

.matrix-tab-pane.active {
    display: block;
    animation: fadeInTab 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Precise German-engineering grid */
.matrix-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    border: none;
}

.matrix-table th {
    background-color: var(--black) !important;
    border-bottom: 2px solid var(--black);
    color: var(--white) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 16px;
    text-align: center;
    border-right: none;
}

.matrix-table th small {
    color: rgba(255, 255, 255, 0.6) !important;
}

.matrix-table th:first-child,
.matrix-table th:nth-child(2) {
    text-align: left;
}

.matrix-table td {
    padding: 12px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--gray-200);
    border-right: none;
    text-align: center;
}

.matrix-table td:first-child,
.matrix-table td:nth-child(2) {
    text-align: left;
}

.matrix-table td:first-child {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--black);
    font-size: 14px;
}

.matrix-table tr:hover {
    background-color: rgba(244, 121, 32, 0.02) !important;
}

/* Crosshair column highlighting - Only apply to td to prevent th text blending */
.matrix-table td.column-highlight {
    background-color: rgba(244, 121, 32, 0.025) !important;
}

/* Indicators */
.compat-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.compat-dot-primary {
    width: 10px;
    height: 10px;
    background-color: var(--orange);
    border-radius: 50%;
}

.compat-dot-secondary {
    width: 10px;
    height: 10px;
    border: 2px solid var(--orange);
    border-radius: 50%;
}

.compat-none {
    color: var(--gray-400);
    font-size: 14px;
}



.spec-note {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.5;
}

/* Pressboard Grid Card System */
.pb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.pb-card {
    border: 1px solid var(--gray-200);
    padding: 16px;
    background-color: var(--white);
    transition: all 0.2s ease;
}

.pb-card:hover {
    border-color: var(--orange);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.pb-card-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 6px;
}

.pb-spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--gray-600);
}

.pb-spec-list li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--gray-100);
}

.pb-spec-list li:last-child {
    border-bottom: none;
}

.pb-spec-list span.active {
    color: var(--orange);
    font-weight: 700;
}

@media (max-width: 991px) {
    .spec-layout {
        flex-direction: column;
    }
    .spec-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--gray-200);
    }
    .spec-sidebar-btn {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 10px 16px;
    }
    .spec-sidebar-btn.active {
        border-bottom-color: var(--orange);
    }
}


/* ─── REDESIGNED CTA SECTION ─── */
.section--cta-dark {
    background-color: #111416;
    color: var(--white);
    padding: 80px 0 50px 0;
}

.cta-dark-content {
    max-width: 800px;
    margin-bottom: 50px;
}

.cta-dark-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--orange);
}

.cta-dark-title {
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.cta-dark-description {
    font-size: 15px;
    line-height: 1.7;
    color: #94a3b8; /* light gray-blue */
    max-width: 650px;
}

.cta-dark-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-whatsapp-btn {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: var(--white) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.15);
}

.cta-whatsapp-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #128C7E;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-whatsapp-btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.cta-whatsapp-btn:hover {
    color: var(--white) !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35) !important;
}

.cta-dark-info-row {
    margin-top: 30px;
}

.cta-dark-info-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #64748b; /* medium gray-blue */
}

.cta-dark-info-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    transition: color 200ms ease;
}

a.cta-dark-info-value:hover {
    color: var(--orange);
}

.cta-dark-footer-row {
    border-top: 1px solid #2d3748;
}

.cta-dark-footer-text {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #64748b;
    text-transform: uppercase;
}

/* ─── ULTRA-CLEAN FAQ SECTION ─── */
.faq-section {
    background-color: var(--white) !important;
    padding: 80px 0 !important;
}

.faq-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--orange);
    padding: 4px 12px;
    background: var(--orange-subtle);
    border: 1px solid rgba(244, 121, 32, 0.15);
    border-radius: var(--radius-sm);
}

.faq-title {
    font-size: clamp(28px, 4vw, 38px);
    color: var(--black);
    letter-spacing: -0.02em;
    margin-top: 15px;
}

.faq-item {
    border-bottom: 1px solid #eaeaea;
    transition: border-color var(--transition);
}

.faq-item:first-child {
    border-top: 1px solid #eaeaea;
}

.faq-item.active-item {
    border-bottom-color: rgba(244, 121, 32, 0.35);
}

.faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    padding: 18px 24px;
    margin: 0;
    border-radius: 0;
    text-align: left;
    color: var(--orange) !important;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: none;
}

/* Only the Technical Datasheet accordion triggers get the solid orange background hover effect */
#datasheetAccordion .faq-trigger:hover {
    background-color: var(--orange) !important;
    color: var(--white) !important;
}

.faq-question {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding-right: 20px;
    color: var(--orange);
}

#datasheetAccordion .faq-trigger:hover .faq-question {
    color: var(--white) !important;
    transform: translateX(4px);
}

/* General hover behavior (like on the FAQ accordion triggers) has no orange background hover */
.faq-trigger:hover .faq-question {
    transform: translateX(4px);
}

/* Override inline background color of vertical accent bar on hover */
.faq-trigger:hover .faq-question span[style*="background"] {
    background-color: var(--white) !important;
    background: var(--white) !important;
}

.faq-trigger:not(.collapsed) .faq-question {
    color: var(--orange);
    font-weight: 700;
}

.faq-trigger:not(.collapsed):hover .faq-question {
    color: var(--white) !important;
}

/* Wrapper for hint and toggle icon */
.faq-action-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Micro-interaction typography cue for expand action */
.faq-hint {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.75;
    user-select: none;
    transition: color var(--transition), opacity var(--transition);
}

/* Dynamic text depending on collapse state */
.faq-trigger.collapsed .faq-hint::before {
    content: "[ expand ]";
}

.faq-trigger:not(.collapsed) .faq-hint::before {
    content: "[ collapse ]";
    color: var(--orange);
}

/* Responsive click instructions for wider devices */
@media (min-width: 576px) {
    .faq-trigger.collapsed .faq-hint::before {
        content: "[ click to expand ]";
    }
    .faq-trigger:not(.collapsed) .faq-hint::before {
        content: "[ click to collapse ]";
    }
}

#datasheetAccordion .faq-trigger:hover .faq-hint {
    opacity: 1;
    color: var(--white) !important;
}

#datasheetAccordion .faq-trigger:not(.collapsed):hover .faq-hint::before {
    color: var(--white) !important;
}

/* General/FAQ hover hint turns orange, not white */
.faq-trigger:hover .faq-hint {
    opacity: 1;
    color: var(--orange) !important;
}

.faq-trigger:not(.collapsed):hover .faq-hint::before {
    color: var(--orange) !important;
}

/* Custom Plus/Minus animated icon */
.faq-icon-wrapper {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.faq-trigger:hover .faq-icon-wrapper {
    transform: scale(1.2);
}

.faq-icon-wrapper::before,
.faq-icon-wrapper::after {
    content: '';
    position: absolute;
    background-color: var(--orange);
    transition: transform 300ms ease, background-color 300ms ease, opacity 200ms ease;
}

/* Horizontal line */
.faq-icon-wrapper::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

/* Vertical line */
.faq-icon-wrapper::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}

/* Rotate vertical line to 90deg (making it disappear) when expanded */
.faq-trigger:not(.collapsed) .faq-icon-wrapper::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-trigger:not(.collapsed) .faq-icon-wrapper::before {
    background-color: var(--orange);
    transform: rotate(180deg);
}

#datasheetAccordion .faq-trigger:not(.collapsed):hover .faq-icon-wrapper::before {
    background-color: var(--white) !important;
}

#datasheetAccordion .faq-trigger:hover .faq-icon-wrapper::before,
#datasheetAccordion .faq-trigger:hover .faq-icon-wrapper::after {
    background-color: var(--white) !important;
}

/* General/FAQ hover icon turns orange, not white */
.faq-trigger:not(.collapsed):hover .faq-icon-wrapper::before {
    background-color: var(--orange) !important;
}

.faq-trigger:hover .faq-icon-wrapper::before,
.faq-trigger:hover .faq-icon-wrapper::after {
    background-color: var(--orange) !important;
}

.faq-answer {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-700) !important;
    animation: fadeIn 350ms ease;
    padding: 0 24px 20px 24px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── UTILITIES & ANIMATIONS ─── */
#scroll-progress {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: var(--orange);
    z-index: 1060;
    transition: width 50ms linear;
    width: 0;
}


/* ─── RESPONSIVENESS OVERRIDES ─── */
@media (max-width: 992px) {
    .specs-layout, 
    .cta-layout {
        grid-template-columns: 1fr;
    }
}

/* ─── SCROLL UP / DOWN BUTTONS & ANIMATIONS ─── */
.scroll-mouse {
    width: 20px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    position: relative;
    margin-top: 6px;
    transition: all var(--transition);
}

.scroll-wheel {
    width: 4px;
    height: 7px;
    background-color: var(--orange);
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel-slide 1.8s ease-in-out infinite;
}

@keyframes scroll-wheel-slide {
    0% {
        top: 6px;
        opacity: 1;
    }
    50% {
        top: 18px;
        opacity: 0.3;
    }
    100% {
        top: 6px;
        opacity: 1;
    }
}

.hero__scroll-down {
    transition: opacity 300ms ease;
}

.hero__scroll-down:hover a {
    color: var(--white) !important;
}

.hero__scroll-down:hover .scroll-mouse {
    border-color: var(--white);
    transform: translateY(2px);
}







/* ─── MANUFACTURING SECTION ─── */
.manufacturing-section {
    min-height: 650px;
    padding: var(--section-padding) 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--gray-200);
}

.manufacturing-section__bg {
    background-image: url('images/1a_11a.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(98%);
    z-index: 0;
    height: 130% !important;
    top: -15% !important;
    will-change: transform;
}

.manufacturing-section__overlay {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (max-width: 768px) {
    .manufacturing-section {
        min-height: auto;
    }
    .manufacturing-section__overlay {
        background: rgba(255, 255, 255, 0.85); /* fallback for mobile where text overlaps heavily */
    }
}

.datasheet-card {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-top: 4px solid var(--orange) !important;
    border-radius: 0 !important;
    transition: transform var(--transition), box-shadow var(--transition);
}

.datasheet-card:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.datasheet-card__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-subtle);
    border-radius: 0 !important;
}

.datasheet-card .btn {
    border-radius: 0 !important;
}

.manufacturing-section__tag {
    font-family: var(--font-primary);
    font-size: 11px;
    color: var(--orange);
    letter-spacing: 0.15em;
}

.manufacturing-section__title {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.2;
    color: #111111;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95);
}

.manufacturing-section__text {
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.7;
    color: #333333 !important;
    max-width: 480px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* ─── APPLICATIONS SECTION (STICKY HORIZONTAL SCROLL) ─── */
.applications-section {
    position: relative;
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}

.applications-sticky {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 80px 0;
}

.applications-section__tag {
    font-size: 11px;
    letter-spacing: 0.15em;
}

.applications-section__title {
    font-size: clamp(32px, 4.5vw, 42px);
    letter-spacing: -0.02em;
    color: var(--black);
}

.applications-track-wrapper {
    width: 100%;
    overflow: hidden;
}

.applications-track {
    display: flex;
    width: max-content;
    /* Left padding aligns first card with container layout */
    padding-left: max(2rem, calc((100vw - 1140px) / 2));
    padding-right: max(2rem, calc((100vw - 1140px) / 2));
    will-change: transform;
    transition: transform 150ms cubic-bezier(0.1, 0.8, 0.25, 1);
}

.application-card {
    position: relative;
    width: 380px;
    height: 480px;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--black);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.application-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
}

.application-card__image-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.application-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(88%) contrast(92%);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease;
}

.application-card:hover .application-card__image {
    transform: scale(1.06);
    filter: brightness(95%) contrast(95%);
}

.application-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 35px 30px;
    /* Soft dark gradient at the bottom to guarantee white text visibility */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.88) 100%);
    z-index: 1;
}

.application-card__title {
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: 10px;
}

.application-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.application-card__tags .badge-outline {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 0 !important;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.application-card:hover .badge-outline {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ─── RESPONSIVE BEHAVIOR (MOBILE SWIPE FALLBACK) ─── */
@media (max-width: 991px) {
    .applications-section {
        height: auto !important;
    }

    .applications-sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        overflow: visible !important;
        padding-top: var(--section-padding);
        padding-bottom: var(--section-padding);
    }

    .applications-track-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Custom scrollbar hiding but keeping scrolling functional */
        scrollbar-width: none;
    }
    
    .applications-track-wrapper::-webkit-scrollbar {
        display: none;
    }

    .applications-track {
        transform: none !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 16px;
    }

    .application-card {
        width: 300px;
        height: 380px;
    }
    
    .application-card__content {
        padding: 24px 20px;
    }
    
    .application-card__title {
        font-size: 17px;
    }
}

/* ─── CUSTOMER TRUST SECTION ─── */
.testimonials-section {
    background: linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
    position: relative;
    padding: var(--section-padding) 0;
}

/* Testimonials Refinements */
.testimonial-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 300ms;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(244, 121, 32, 0.08);
    border-color: rgba(244, 121, 32, 0.25);
}

.testimonial-quote-icon {
    margin-bottom: 20px;
}

.testimonial-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gray-700);
    font-style: italic;
    margin-bottom: 24px;
}

.testimonial-author {
    margin-top: auto;
    border-top: 1px solid var(--gray-100);
    padding-top: 16px;
}

.testimonial-author-role {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--black);
}

.testimonial-author-org {
    font-size: 12px;
    color: var(--orange);
    font-weight: 600;
    margin-top: 2px;
}

/* Trust Stats */
.trust-stat-val {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 6px;
    color: var(--orange);
}

.trust-stat-lbl {
    letter-spacing: 0.05em;
    font-size: 11px;
}



/* Scroll reveal framework */
[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), 
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-up"].visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade-left"] {
    transform: translateX(30px);
}

[data-animate="fade-left"].visible {
    opacity: 1;
    transform: translateX(0);
}

[data-animate="fade-right"] {
    transform: translateX(-30px);
}

[data-animate="fade-right"].visible {
    opacity: 1;
    transform: translateX(0);
}

[data-delay="100"] { transition-delay: 100ms !important; }
[data-delay="200"] { transition-delay: 200ms !important; }
[data-delay="300"] { transition-delay: 300ms !important; }
[data-delay="400"] { transition-delay: 400ms !important; }
[data-delay="500"] { transition-delay: 500ms !important; }
[data-delay="600"] { transition-delay: 600ms !important; }

/* Custom animation override for this section's row */
.testimonials-section .row[data-animate] {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), 
                transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonials-section .row[data-animate].visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}



/* Parallax element styling */
.parallax-element {
    will-change: transform;
    transition: transform 250ms cubic-bezier(0.1, 0.8, 0.25, 1);
}



/* Lenis smooth scrolling helper styles */
html.lenis, html.lenis body {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis-stopped {
  overflow: hidden;
}

.lenis-scrolling iframe {
  pointer-events: none;
}


/* ─── DARK ENQUIRY MODAL STYLING ─── */
.modal-content.bg-dark {
    background: rgba(18, 21, 23, 0.75) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5) !important;
}

.modal-content.bg-dark .modal-header,
.modal-content.bg-dark .modal-body,
.modal-content.bg-dark .modal-footer {
    border: none !important;
    border-radius: 0 !important;
}

.modal-content.bg-dark .form-control,
.modal-content.bg-dark .form-select,
.modal-content.bg-dark .btn,
.modal-content.bg-dark .bg-dark-input {
    border-radius: 0 !important;
}

.modal-content.bg-dark .bg-dark-input {
    background-color: rgba(13, 15, 16, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.modal-content.bg-dark .bg-dark-input:focus {
    background-color: rgba(13, 15, 16, 0.65) !important;
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(244, 121, 32, 0.2) !important;
}

.text-muted-light {
    color: #94a3b8 !important;
}

.bg-dark-input {
    background-color: #0d0f10 !important;
    border-color: #2d3748 !important;
    color: var(--white) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.bg-dark-input::placeholder {
    color: #4b5563 !important;
}

.bg-dark-input:focus {
    background-color: #0d0f10 !important;
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(244, 121, 32, 0.25) !important;
    color: var(--white) !important;
}

.bg-dark-input option {
    background-color: #121517 !important;
    color: var(--white) !important;
}

.form-select.bg-dark-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.modal-header .btn-close-white {
    opacity: 0.6;
    transition: opacity var(--transition);
}

.modal-header .btn-close-white:hover {
    opacity: 1;
}

/* Spinner Icon Rotation Animation */
.spin-icon {
    animation: spin 1s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ─── FOOTER CTA BUTTONS ─── */
.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 250ms ease,
                color 250ms ease;
}

.footer-cta-btn__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.footer-cta-btn__icon svg {
    width: 18px;
    height: 18px;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Orange / Quote button --- */
.footer-cta-btn--primary {
    background-color: var(--orange);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(244, 121, 32, 0);
}

.footer-cta-btn--primary:hover {
    background-color: var(--orange-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(244, 121, 32, 0.35);
}

.footer-cta-btn--primary:hover .footer-cta-btn__icon svg {
    transform: translateX(4px);
}

.footer-cta-btn--primary:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(244, 121, 32, 0.25);
}

/* --- WhatsApp / Ghost button --- */
.footer-cta-btn--whatsapp {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 0 #25d366;
}

.footer-cta-btn--whatsapp:hover {
    background-color: #25d366;
    border-color: #25d366;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.3);
}

.footer-cta-btn--whatsapp:active {
    transform: translateY(-1px);
}

/* ─── PREMIUM B2B FOOTER ─── */
.main-footer {
    background-color: #111416 !important;
    padding-bottom: 40px;
    font-family: var(--font-primary);
}

.footer-huge-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(32px, 9.5vw, 138px);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.02em;
    white-space: nowrap;
    margin: 0;
    padding-bottom: 10px;
    display: block;
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.08) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-font-smoothing: antialiased;
}

.main-footer .text-orange {
    color: var(--orange) !important;
}

.main-footer h2.fw-bold {
    font-family: 'Inter', sans-serif;
    color: var(--white);
}

.main-footer .btn-whatsapp {
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms ease;
}
.main-footer .btn-whatsapp:hover {
    background-color: #20ba5a !important;
    transform: translateY(-3px) scale(1.02);
}
.main-footer .btn-whatsapp:active {
    transform: translateY(-1px) scale(0.98);
}

.main-footer .border-secondary-subtle {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.main-footer a.text-white {
    transition: color 200ms ease;
}
.main-footer a.text-white:hover {
    color: var(--orange) !important;
}

@media (max-width: 767px) {
    .main-footer {
        padding-bottom: 30px;
    }
}

/* ─── INTERACTIVE YT510 DATASHEET STYLING ─── */
.yt510 {
    font-family: var(--font-primary);
    color: var(--black);
    background: var(--white);
    line-height: 1.6;
    margin-top: 20px;
    width: 100%;
}

.yt510 .ys-sec {
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-200);
}

.yt510 .ys-sec:last-of-type {
    border-bottom: none;
}

.yt510 .ys-sub {
    font-size: 13.5px;
    color: var(--gray-500);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Thickness picker */
.yt510 .ys-pick-wrap {
    background-color: var(--white);
    padding: 0;
    border: none;
}

.yt510 .ys-pick-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    margin-bottom: 12px;
}

/* Thickness Slider Wrapper */
.ys-slider-wrap {
    margin-top: 15px;
    margin-bottom: 25px;
    background: var(--gray-50);
    padding: 24px;
    border: 1px solid var(--gray-200);
}

/* Digital telemetric readout of the active slider value */
.ys-slider-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-mono);
    margin-bottom: 20px;
}

.ys-slider-value .val-mil {
    font-size: 24px;
    font-weight: 700;
    color: var(--orange);
}

.ys-slider-value .val-sep {
    font-size: 18px;
    color: var(--gray-400);
}

.ys-slider-value .val-mm {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
}

/* Custom Styled Range Slider */
.ys-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, var(--orange) 0%, var(--orange) 50%, var(--gray-300) 50%, var(--gray-300) 100%);
    outline: none;
    margin: 0;
    cursor: pointer;
    border-radius: 3px;
}

/* Chrome/Safari Thumb */
.ys-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--white);
    border: 3px solid var(--orange);
    border-radius: 50% !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), background-color 150ms, border-color 150ms;
}

.ys-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    background-color: var(--orange);
    border-color: var(--orange);
}

/* Firefox Thumb */
.ys-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--white);
    border: 3px solid var(--orange);
    border-radius: 50% !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), background-color 150ms, border-color 150ms;
}

.ys-slider::-moz-range-thumb:hover {
    transform: scale(1.25);
    background-color: var(--orange);
    border-color: var(--orange);
}

/* Slider bottom tick labels */
.ys-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 4px;
}

.ys-slider-labels span {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: color var(--transition), font-weight var(--transition);
}

.ys-slider-labels span:hover {
    color: var(--orange);
}

.ys-slider-labels span.active-label {
    color: var(--orange);
    font-weight: 700;
}

.yt510 .ys-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

@media (min-width: 768px) {
    .yt510 .ys-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.yt510 .ys-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--orange);
    border-radius: 0;
    padding: 16px;
    transition: all 0.2s ease;
}

.yt510 .ys-card:hover {
    border-color: var(--gray-300);
    border-left-color: var(--orange);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.yt510 .ys-card .k {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    font-weight: 700;
}

.yt510 .ys-card .v {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 24px;
    color: var(--black);
    line-height: 1.1;
    margin-top: 6px;
}

.yt510 .ys-card .u {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
    margin-top: 2px;
}

/* Tables */
.yt510 .ys-tscroll {
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    margin-top: 10px;
}

.yt510 table.ys-t {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-size: 13.5px;
}

.yt510 table.ys-t th,
.yt510 table.ys-t td {
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.yt510 table.ys-t thead th {
    background: var(--black) !important;
    color: var(--white) !important;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-right: none;
}

.yt510 table.ys-t .rowhead {
    text-align: left;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--black);
    position: sticky;
    left: 0;
    border-right: 1px solid var(--gray-200);
    box-shadow: 1px 0 0 var(--gray-200);
}

.yt510 table.ys-t .rowhead small {
    display: block;
    font-weight: 500;
    color: var(--gray-500);
    font-size: 11px;
    margin-top: 2px;
}

.yt510 table.ys-t tbody tr:nth-child(even) td {
    background: var(--gray-50);
}

.yt510 table.ys-t tbody tr:nth-child(even) .rowhead {
    background: var(--gray-100);
}

.yt510 table.ys-t td.on {
    background-color: rgba(244, 121, 32, 0.06) !important;
    color: var(--orange) !important;
    font-weight: 700;
}

.yt510 table.ys-t thead th.on {
    background: var(--orange) !important;
    color: var(--white) !important;
}

.yt510 .ys-std {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 500;
    font-family: var(--font-mono);
}

/* Charts */
.yt510 .ys-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

.yt510 .ys-chart-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    padding: 20px;
}

.yt510 .ys-ct {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 2px;
}

.yt510 .ys-cs {
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 16px;
}

.yt510 .ys-canvas-wrap {
    position: relative;
    height: 280px;
}

/* Chemical Stability */
.yt510 .ys-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.yt510 .ys-fact {
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--orange);
    border-radius: 4px;
    padding: 16px 20px;
    background: var(--gray-50);
}

.yt510 .ys-fact .fv {
    font-size: 20px;
    font-weight: 800;
    color: var(--black);
}

.yt510 .ys-fact .fl {
    font-size: 12.5px;
    color: var(--gray-500);
    margin-top: 4px;
    line-height: 1.4;
}

/* Note & Footer */
.yt510 .ys-note {
    background: var(--black);
    color: var(--gray-400);
    border-radius: 4px;
    padding: 20px;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 30px;
}

.yt510 .ys-note b {
    color: var(--orange);
}

.yt510 .ys-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin-top: 20px;
    font-size: 12px;
    color: var(--gray-500);
}

.yt510 .ys-foot strong {
    color: var(--black);
}

@media (max-width: 767px) {
    .yt510 .ys-grid2 {
        grid-template-columns: 1fr;
    }
}

/* Testimonials Carousel Pagination Adjustments */
.testimonials-section {
    padding-bottom: 120px !important;
}

.carousel-indicators {
    bottom: -45px !important;
    margin-bottom: 0 !important;
}

.carousel-indicators [data-bs-target] {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: var(--orange) !important;
    border: none !important;
    opacity: 0.35;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-indicators .active {
    opacity: 1 !important;
    transform: scale(1.25);
}

/* Product Overview / About Us Section Styling */
.overview-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--orange);
    padding: 6px 16px;
    background: var(--orange-subtle);
    border: 1px solid rgba(244, 121, 32, 0.15);
    border-radius: 20px;
    text-transform: uppercase;
}

.overview-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.02em;
}

.overview-paragraph {
    color: var(--gray-700);
}

.overview-link {
    color: var(--orange);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 250ms ease, transform 250ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.overview-link::after {
    content: "→";
    transition: transform 250ms ease;
}

.overview-link:hover {
    color: var(--black);
}

.overview-link:hover::after {
    transform: translateX(4px);
}

/* About Us Product Grid Styling */
.about-product-item {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--orange);
    padding: 16px 20px;
    border-radius: 0;
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 250ms ease, 
                background-color 250ms ease,
                box-shadow 250ms ease;
}

.about-product-item:hover {
    transform: translateY(-3px);
    border-color: var(--orange);
    background: var(--white);
    box-shadow: 0 6px 18px rgba(244, 121, 32, 0.08);
}

.about-product-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.4;
}

/* ─── ENQUIRY SECTION INLINE FORM & FEATURES ─── */
#enquiry {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.enquiry-section__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/1a_11a.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
}

.enquiry-section__overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(11, 13, 14, 0.65) 0%, rgba(17, 20, 22, 0.5) 100%) !important;
    z-index: 1 !important;
}

/* Force Square Edges on form inputs, selects, buttons, and card */
#enquiry .form-control,
#enquiry .form-select,
#enquiry .btn,
#enquiry .enquiry-submit-btn,
#enquiry .enquiry-card-glass {
    border-radius: 0 !important;
}

.enquiry-card-glass {
    background: rgba(13, 15, 16, 0.55);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.enquiry-card-glass:hover {
    border-color: rgba(244, 121, 32, 0.25);
    box-shadow: 0 30px 60px rgba(244, 121, 32, 0.07);
}

.feature-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(244, 121, 32, 0.1);
    border: 1px solid rgba(244, 121, 32, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}

.enquiry-features > div:hover .feature-icon-wrapper {
    background: rgba(244, 121, 32, 0.18);
    transform: scale(1.08);
}

.enquiry-submit-btn {
    background: var(--orange) !important;
    border: none !important;
    color: var(--white) !important;
    font-weight: 700;
    transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition) !important;
    box-shadow: 0 4px 16px rgba(244, 121, 32, 0.3);
}

.enquiry-submit-btn:hover {
    transform: translateY(-2px);
    background: #ff6e29 !important;
    box-shadow: 0 8px 24px rgba(244, 121, 32, 0.5);
}

.enquiry-submit-btn:active {
    transform: translateY(0);
}

/* ─── CHATBOT FLOATING WIDGET (AGENTFORCE STYLE) ─── */
.chatbot-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 8px 8px;
    height: 52px;
    border-radius: 26px;
    background-color: #F47920;
    color: var(--white);
    border: none;
    box-shadow: 0 8px 24px rgba(244, 121, 32, 0.4);
    cursor: pointer;
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, box-shadow 0.3s ease;
}

.chatbot-toggle-btn:hover {
    transform: translateY(-2px) scale(1.03);
    background-color: #D4631A;
    box-shadow: 0 10px 28px rgba(244, 121, 32, 0.5);
}

.chatbot-toggle-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.toggle-avatar-svg {
    width: 100%;
    height: 100%;
}

.chatbot-toggle-text {
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--font-primary);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .chatbot-toggle-btn {
        bottom: 16px;
        right: 16px;
        height: 44px;
        padding: 6px 14px 6px 6px;
        gap: 8px;
    }
    .chatbot-toggle-avatar {
        width: 30px;
        height: 30px;
        padding: 2px;
    }
    .chatbot-toggle-text {
        font-size: 13px;
    }
    .chatbot-widget {
        bottom: 72px;
        right: 16px;
    }
}


/* Chatbot Widget Container */
.chatbot-widget {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 420px;
    max-width: 90vw;
    height: 520px;
    display: flex;
    flex-direction: column;
    background: rgba(13, 15, 16, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    z-index: 999;
    overflow: hidden;
    animation: chat-widget-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chat-widget-in {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.chatbot-header {
    padding: 16px 20px;
    background: rgba(20, 22, 24, 0.95);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chatbot-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.robot-face-svg {
    width: 100%;
    height: 100%;
}

.chatbot-title-block {
    display: flex;
    flex-direction: column;
}

.chatbot-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
}

.chatbot-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chatbot-minimize-btn,
.chatbot-maximize-btn,
.chatbot-reset-btn {
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.chatbot-minimize-btn:hover,
.chatbot-maximize-btn:hover,
.chatbot-reset-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chatbot-minimize-btn:active,
.chatbot-maximize-btn:active,
.chatbot-reset-btn:active {
    transform: scale(0.92);
}

.chatbot-minimize-btn .minimize-icon {
    width: 16px;
    height: 16px;
}

.chatbot-maximize-btn .maximize-icon {
    width: 14px;
    height: 14px;
}

.chatbot-reset-btn .reset-icon {
    width: 14px;
    height: 14px;
}

/* Toggle Expand/Restore Paths inside SVG */
.chatbot-widget.maximized .expand-path {
    display: none;
}
.chatbot-widget:not(.maximized) .restore-path {
    display: none;
}

/* Maximized Widget Styles */
.chatbot-widget.maximized {
    width: 650px;
    height: 80vh;
    max-height: 850px;
    bottom: 24px;
    right: 24px;
    border-radius: 20px !important;
}

@media (max-width: 768px) {
    .chatbot-widget.maximized {
        width: calc(100% - 32px);
        height: calc(100vh - 100px);
        bottom: 80px;
        right: 16px;
    }
}

@media (max-width: 480px) {
    .chatbot-widget.maximized {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0 !important;
        z-index: 9999;
    }
}

/* Chat Body (Message area) */
.chatbot-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.chatbot-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Message Bubbles */
.chat-message {
    display: flex;
    max-width: 80%;
}

.chat-message.user {
    align-self: flex-end;
}

.chat-message.agent {
    align-self: flex-start;
}

.chat-message .message-content {
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    border-radius: 12px;
}

.chat-message.user .message-content {
    background-color: rgba(244, 121, 32, 0.15);
    color: rgba(255, 255, 255, 0.95);
    border-bottom-right-radius: 2px;
}

.chat-message.agent .message-content {
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-bottom-left-radius: 2px;
}

/* Typing Indicator */
.chat-message.agent.typing .message-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: typing-dot-bounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-dot-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
}

/* Footer (Input & Suggestions) */
.chatbot-footer {
    padding: 12px 16px 16px;
    background: rgba(10, 12, 13, 0.4);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sparkles Input Bar */
.chatbot-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 4px 6px 4px 14px;
}

.chatbot-input-wrapper .sparkles-icon {
    width: 18px;
    height: 18px;
    color: rgba(244, 121, 32, 0.8);
    margin-right: 8px;
    flex-shrink: 0;
}

.chatbot-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 13.5px;
    color: #ffffff;
    outline: none;
}

.chatbot-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.chatbot-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.chatbot-input-wrapper input:valid + .chatbot-send-btn,
.chatbot-send-btn:hover {
    background-color: rgba(244, 121, 32, 0.2);
    color: #F47920;
}

.chatbot-send-btn .send-icon {
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    margin-left: -2px;
    margin-top: -1px;
}

/* Suggestions Stack - Redesigned to be horizontal tags */
.chatbot-suggestions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.chatbot-suggestion-chip {
    width: auto;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chatbot-suggestion-chip:hover {
    background: rgba(244, 121, 32, 0.15);
    border-color: rgba(244, 121, 32, 0.3);
    color: var(--white);
    transform: translateY(-1px);
}



/* WhatsApp / Talk to Humans Strip */
.chatbot-whatsapp-strip {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 4px;
}

.chatbot-whatsapp-strip a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #3aa56a;
    color: #f0fbf5;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(58, 165, 106, 0.2);
}

.chatbot-whatsapp-strip a:hover {
    background: #2e8b54;
    color: #f0fbf5;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46, 139, 87, 0.3);
}

.chatbot-whatsapp-strip .whatsapp-icon {
    width: 18px;
    height: 18px;
}

/* Sticky WhatsApp Sidebar Button */
.sticky-whatsapp-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9990;
    width: 48px;
    height: 48px;
    background-color: #25D366; /* WhatsApp Green */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.sticky-whatsapp-sidebar:hover {
    background-color: #128c7e;
    width: 140px;
}

.sticky-whatsapp-sidebar .sticky-whatsapp-icon {
    width: 24px;
    height: 24px;
    color: #ffffff;
    flex-shrink: 0;
}

.sticky-whatsapp-sidebar .sticky-whatsapp-text {
    color: #ffffff;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sticky-whatsapp-sidebar:hover .sticky-whatsapp-text {
    opacity: 1;
    transition-delay: 0.1s;
}

@media (max-width: 768px) {
    .sticky-whatsapp-sidebar {
        width: 42px;
        height: 42px;
        padding: 0 9px;
    }
    .sticky-whatsapp-sidebar .sticky-whatsapp-icon {
        width: 24px;
        height: 24px;
    }
    .sticky-whatsapp-sidebar:hover {
        width: 42px;
    }
    .sticky-whatsapp-sidebar:hover .sticky-whatsapp-text {
        opacity: 0;
    }
}

.hover-orange {
    transition: color 0.2s ease-in-out;
}
.hover-orange:hover {
    color: #F47920 !important;
}

.product-card__image-link {
    display: block;
    overflow: hidden;
}
.product-card__image-link img {
    transition: transform 0.3s ease-in-out;
}
.product-card__image-link:hover img {
    transform: scale(1.05);
}

.btn-outline-primary {
    border: 1.5px solid var(--orange) !important;
    background-color: transparent !important;
    color: var(--orange) !important;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--orange) !important;
    color: var(--white) !important;
    border-color: var(--orange) !important;
    box-shadow: 0 4px 12px rgba(244, 121, 32, 0.2) !important;
}







/* INSOURCES logo in the header. The artwork is 486x120; height is set and the
   width left auto so the aspect ratio is never distorted. The light variant is
   used because the header is dark in both its resting and scrolled states. */
.site-logo .logo-img {
  display: block;
  height: 30px;
  width: auto;
  transition: opacity 250ms ease;
}
.site-logo:hover .logo-img { opacity: .82; }

@media (max-width: 991px) {
  .site-logo .logo-img { height: 26px; }
}


/* The footer wordmark was set type at display size; it is the logo now. Width
   is capped rather than fixed so it scales down on a phone without a media
   query, and height stays auto so the lockup is never distorted. */
.footer-logo {
  display: block;
  width: min(420px, 72vw);
  height: auto;
  margin: 0 auto;
}