/* ==========================================================================
   1. HERO & BASE (PROFESSIONAL GRADE)
   ========================================================================== */
:root {
    --pro-white: #ffffff;
    --pro-dark: #1c1917;
    --pro-orange: #f57539;
    --pro-gray-light: #faf8f5;

    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 15px 40px rgba(245, 117, 57, 0.08);
}

body {
    font-family: 'Inter', sans-serif !important;
    background: var(--pro-white) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif !important;
}

.hero-split {
    position: relative !important;
    /* Allow badge to anchor to full width */
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 60%, rgba(15, 23, 42, 0.1) 100%), url('../images/hero-crane-sunset.png') !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 10rem 5% 6rem !important;
    min-height: 80vh !important;
    /* Ensure enough height to see the image */
    display: flex !important;
    align-items: center !important;
    max-width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .hero-split {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%), url('../images/hero-crane-sunset.png') !important;
        background-size: cover !important;
        background-position: center right !important;
        /* Ensure crane is visible on mobile */
        padding: 8rem 5% 4rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* --- Hero Content --- */
.hero-split-content {
    position: static !important;
    /* Remove relative so badge anchors to hero-split */
    z-index: 10 !important;
    max-width: 700px !important;
    width: 100% !important;
}

.hero-split-content .badge-premium {
    display: inline-block !important;
    color: var(--pro-orange) !important;
    background: rgba(245, 117, 57, 0.1) !important;
    border: 1px solid rgba(245, 117, 57, 0.2) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 1.5rem !important;
}

@media (max-width: 991px) {
    .hero-split-content .badge-premium {
        margin: 0 auto 1.5rem !important;
    }
}

.hero-split-content h1 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -1.5px !important;
}

.hero-split-content h1 .text-gradient {
    background: linear-gradient(90deg, #f57539 0%, #ffaa80 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.hero-split-content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.15rem !important;
    color: #e2e8f0 !important;
    line-height: 1.7 !important;
    margin-bottom: 2.5rem !important;
    max-width: 550px !important;
}

@media (max-width: 991px) {
    .hero-split-content p {
        margin: 0 auto 2.5rem !important;
    }
}

/* --- Hero Actions & Buttons --- */
.hero-actions-dynamic {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}

@media (max-width: 991px) {
    .hero-actions-dynamic {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

.hero-actions-dynamic .btn-dynamic {
    padding: 1rem 2rem !important;
    border-radius: 6px !important;
    /* Corporate crisp corners */
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-actions-dynamic .btn-dynamic-primary {
    background: #f57539 !important;
    /* Explicit hex for orange */
    color: #ffffff !important;
    /* Explicit hex for white text */
    border: 1px solid #f57539 !important;
    box-shadow: 0 4px 6px -1px rgba(245, 117, 57, 0.2), 0 2px 4px -1px rgba(245, 117, 57, 0.1) !important;
}

.hero-actions-dynamic .btn-dynamic-primary:hover {
    background: #e06026 !important;
    /* Slightly darker orange */
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(245, 117, 57, 0.3) !important;
}

.hero-actions-dynamic .btn-dynamic-outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.hero-actions-dynamic .btn-dynamic-outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* --- Quick Paths --- */
.hero-quick-paths {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    font-size: 0.95rem !important;
    /* Slightly larger */
    color: #e2e8f0 !important;
    /* Much lighter, brighter text */
}

@media (max-width: 991px) {
    .hero-quick-paths {
        justify-content: center !important;
    }
}

.hero-quick-paths span {
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.hero-quick-paths a {
    color: #cbd5e1 !important;
    /* Lighter slate */
    text-decoration: none !important;
    transition: color 0.2s, text-shadow 0.2s !important;
}

.hero-quick-paths a:hover {
    color: #22d3ee !important;
    /* Glowing cyan */
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.5) !important;
    /* Light it up */
    text-decoration: none !important;
}

/* --- Hero Visual & Image --- */
.hero-split-visual {
    display: none !important;
    /* Hide inline image as we now use full bg */
}

/* --- Overlap Badge --- */
.hero-overlap-badge {
    position: absolute !important;
    bottom: -40px !important;
    right: 0 !important;
    /* Shifted all the way right */
    margin-right: 2rem !important;
    /* Slight breathing room from edge */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-direction: row !important;
    width: auto !important;
    margin-top: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 1.25rem 2rem !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    gap: 2rem !important;
    z-index: 20 !important;
}

@media (max-width: 991px) {
    .hero-overlap-badge {
        position: relative !important;
        bottom: 0 !important;
        right: auto !important;
        left: auto !important;
        justify-content: center !important;
        margin-top: 3rem !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
}

.overlap-stat {
    display: flex !important;
    flex-direction: column !important;
}

.overlap-stat .val {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
    font-family: 'Outfit', sans-serif !important;
}

.overlap-stat .lbl {
    font-size: 0.8rem !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

.hero-image-wrapper {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
}

.hero-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.floating-badge {
    position: absolute !important;
    bottom: -20px !important;
    left: -20px !important;
    background: var(--pro-white) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 15px !important;
    box-shadow: var(--shadow-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    animation: float 6s ease-in-out infinite !important;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ==========================================================================
   2. PARTNERS MARQUEE (NO STRIP, JUST SLIDING LOGOS)
   ========================================================================== */
.partners-marquee-section {
    background: transparent !important;
    padding: 4rem 0 !important;
    border: none !important;
}

.partners-glow {
    display: none !important;
    /* Remove only the orange glow */
}

/* Restore the text but style it cleanly */
.partners-badge {
    color: var(--pro-orange) !important;
    background: rgba(245, 117, 57, 0.1) !important;
    border: 1px solid rgba(245, 117, 57, 0.2) !important;
    border-radius: 20px !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 1rem !important;
    display: inline-block !important;
}

.badge-pulse {
    display: none !important;
}

.partners-title {
    font-family: 'Outfit', sans-serif !important;
    color: #0f172a !important;
    /* Extremely dark slate */
    font-weight: 800 !important;
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    margin-bottom: 0.75rem !important;
    letter-spacing: -1px !important;
}

.partners-subtitle {
    color: #475569 !important;
    /* Darker slate for better readability */
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

.partners-marquee-section {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
    padding: 4rem 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.partners-marquee-container {
    margin-top: 1.5rem !important;
    position: relative !important;
}

/* Fading edges to blend with the gradient */
.partners-marquee-container::before,
.partners-marquee-container::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 120px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.partners-marquee-container::before {
    left: 0 !important;
    background: linear-gradient(90deg, #f5f8fa 0%, transparent 100%) !important;
}

.partners-marquee-container::after {
    right: 0 !important;
    background: linear-gradient(270deg, #f1f5f9 0%, transparent 100%) !important;
}

.marquee-item img {
    filter: grayscale(100%) opacity(0.85) contrast(1.2) brightness(0.7) !important;
    transition: all 0.3s ease !important;
    height: 60px !important;
    /* Made logos slightly larger */
    margin: 0 4rem !important;
}

.marquee-item img:hover {
    filter: grayscale(0%) opacity(1) contrast(1) brightness(1) !important;
    transform: scale(1.1) !important;
}

/* ==========================================================================
   8. FEATURED PRODUCTS SLIDER (CLEAN CORPORATE)
   ========================================================================== */
.featured-carousel-outer {
    padding: 0 4rem !important;
    position: relative !important;
}

.featured-carousel-track .product-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    /* Crisp corners */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    padding: 1.5rem !important;
    transition: all 0.2s ease !important;
}

.featured-carousel-track .product-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-color: #cbd5e1 !important;
}

.carousel-control {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 4px !important;
    /* Sharp buttons */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

.carousel-control:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.carousel-control.prev {
    left: 0 !important;
}

.carousel-control.next {
    right: 0 !important;
}

.carousel-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 2rem !important;
}

.dot {
    width: 8px !important;
    height: 8px !important;
    background: #cbd5e1 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    padding: 0 !important;
}

.dot.active {
    background: #475569 !important;
    width: 24px !important;
    /* Pill shape for active dot */
}

/* =========================================
   NEW REDESIGN: Transparent Floating
========================================= */

/* 1. Hide Top Bar for Maximum Cleanliness */
.top-bar {
    display: none !important;
    /* Hide to let the floating header shine */
}

/* 2. Transparent Floating Header (Desktop Only) */
@media (min-width: 1024px) {
    body.home-page .site-header {
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .site-header {
        top: 25px !important;
        max-width: 96% !important;
        /* Spans mostly full width so logo is at the side */
        margin: 0 auto !important;
        border-radius: 50px !important;
        padding: 0.25rem 2rem !important;
        /* Extra horizontal padding */
        transition: all 0.4s ease !important;
    }


    .site-header.scrolled {
        top: 15px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Text colors when transparent (not scrolled) */
    .site-header:not(.scrolled):not(.header-solid) .logo-text-main,
    .site-header:not(.scrolled):not(.header-solid) .nav-link-item,
    .site-header:not(.scrolled):not(.header-solid) .cart-btn {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }

    .site-header:not(.scrolled):not(.header-solid) .logo-text-sub {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .site-header:not(.scrolled):not(.header-solid) .cart-btn svg {
        stroke: #ffffff !important;
    }

    /* Keep text white even when scrolled, since there is no white bg anymore */
    .site-header.scrolled .logo-text-main,
    .site-header.scrolled .nav-link-item,
    .site-header.scrolled .cart-btn {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }

    .site-header.scrolled .logo-text-sub {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .site-header.scrolled .cart-btn svg {
        stroke: #ffffff !important;
    }

    .site-header .nav-link-item {
        padding: 0.5rem 1.25rem !important;
        margin: 0 0.1rem !important;
        border-radius: 50px !important;
        /* Prepare for oval layer */
        transition: all 0.3s ease !important;
    }

    .site-header.scrolled .nav-link-item:hover,
    .site-header:not(.scrolled):not(.header-solid) .nav-link-item:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        /* Soft subtle frosted oval */
        color: #ffffff !important;
        text-shadow: none !important;
    }

    /* Active State Highlighter */
    .site-header .nav-link-item.active {
        background: rgba(255, 255, 255, 0.15) !important;
        /* Soft subtle frosted oval */
        color: #ffffff !important;
        position: relative !important;
        text-shadow: none !important;
    }

    /* Hide the old bottom bar since we use an oval background now */
    .site-header .nav-link-item.active::after {
        display: none !important;
    }
}

/* =========================================
   NEW REDESIGN: Industrial Dark Dropdown
========================================= */
.submenu {
    background: #0f172a !important;
    /* Deep industrial slate */
    border-radius: 4px !important;
    /* Sharp, slight rounding */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    padding: 0.25rem 0 !important;
    /* Flush to edges vertically */
    width: 16rem !important;
    transform: translateY(10px) !important;
}

.nav-dropdown:hover .submenu,
.nav-dropdown:focus-within .submenu {
    transform: translateY(0) !important;
}

/* Add a glowing orange top border as an accent */
.submenu::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: #f57539 !important;
    border-radius: 4px 4px 0 0 !important;
}

.submenu::after {
    display: none !important;
}

.submenu a {
    color: #e2e8f0 !important;
    /* Light crisp gray */
    border-radius: 0 !important;
    /* Edge to edge */
    padding: 0.85rem 1.5rem !important;
    margin-bottom: 0 !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.15s ease-out !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.submenu a:last-child {
    border-bottom: none !important;
}

.submenu a:hover {
    background: #f57539 !important;
    /* Bold solid orange on hover */
    color: #ffffff !important;
    padding-left: 1.75rem !important;
    /* Push slightly to the right */
    box-shadow: none !important;
}

/* =========================================
   NEW REDESIGN: Clean White Mobile Perspective
========================================= */
@media (max-width: 1023px) {

    /* Bright Glass Mobile Header */
    .site-header {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }

    .site-header .logo-text-main {
        color: #0f172a !important;
        /* Dark logo text */
    }

    .site-header .logo-text-sub {
        color: #64748b !important;
    }

    /* Mobile Toggle Button (Orange) */
    .mobile-toggle {
        background: rgba(245, 117, 57, 0.1) !important;
        border: 1px solid rgba(245, 117, 57, 0.2) !important;
        border-radius: 8px !important;
    }

    .mobile-toggle span {
        background: #f57539 !important;
        /* Orange lines */
    }

    /* Clean Bright Mobile Panel */
    .mobile-panel {
        background: #ffffff !important;
        /* Solid bright white */
        border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: -20px 0 50px rgba(0, 0, 0, 0.15) !important;
    }

    .mobile-head {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-head-title,
    .mobile-head-sub {
        color: #0f172a !important;
        /* Dark header */
    }

    .mobile-nav a {
        color: #334155 !important;
        /* Slate gray text */
        border-radius: 8px !important;
        /* Clean rounded edges */
        padding: 0.85rem 1.5rem !important;
        margin: 0.25rem 1rem !important;
        transition: all 0.2s ease !important;
        border-bottom: none !important;
    }

    .mobile-nav a svg {
        color: #94a3b8 !important;
        /* Subtle icon color */
    }

    /* Light hover states for mobile */
    .mobile-nav a:hover,
    .mobile-nav a.active {
        background: #f8fafc !important;
        /* Very light slate */
        color: #f57539 !important;
        /* Brand orange text */
    }

    .mobile-nav a:hover svg,
    .mobile-nav a.active svg {
        color: #f57539 !important;
    }
}

/* 3. Deep Modern Footer */
.site-footer {
    background: #020617 !important;
    /* Extremely dark slate */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer-pattern {
    opacity: 0.02 !important;
    /* Subtler pattern */
}

.site-footer h3 {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.site-footer a {
    color: #94a3b8 !important;
}

.site-footer a:hover {
    color: #ffffff !important;
}

.footer-bottom {
    background: #020617 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}