/* === Global layout variables: unified gutters and width cap (match navbar) === */
:root {
  --gutter-x: clamp(1rem, calc(1rem + 5vw), 5rem);
  --content-max: 1766px; /* matches navbar cap on desktop */
  --nav-height: 92px !important;
  --nav-height-mobile: 92px !important;
}

/* === Final global: apply unified gutters and width cap to all pages === */
:where(
  /* Core wrappers */
  .container-inner,
  header .container-inner,
  nav .container-inner,
  main .container-inner,
  section .container-inner,
  footer .container-inner,
  /* Banners and page heroes */
  .banner .container-inner,
  .banner-ecosystem .container-inner,
  .banner-material-handling .container-inner,
  .banner2 .container-inner,
  .talk-to-us .banner .container-inner,
  .talk-to-us .banner2 .container-inner,
  /* Page-specific groups */
  .why-dbot-section,
  .why-dbot-container,
  .why-dbot-content-wrapper,
  .sales-contact-sections .container-inner,
  .middle-container.container-inner,
  .bottom-area.container-inner,
  .slider-container .container-inner,
  .gradient-section .container-inner,
  #social-connect .container-inner
) {
  padding-left: var(--gutter-x) !important;
  padding-right: var(--gutter-x) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.talk-to-us .form {
    max-width: 50vw !important;
}
@media (min-width: 1100px) {
  :where(
    .container-inner,
    header .container-inner,
    nav .container-inner,
    main .container-inner,
    section .container-inner,
    footer .container-inner,
    .banner .container-inner,
    .banner-ecosystem .container-inner,
    .banner-material-handling .container-inner,
    .banner2 .container-inner,
    .talk-to-us .banner .container-inner,
    .talk-to-us .banner2 .container-inner,
    .why-dbot-section,
    .why-dbot-container,
    .why-dbot-content-wrapper,
    .sales-contact-sections .container-inner,
    .middle-container.container-inner,
    .bottom-area.container-inner,
    .slider-container .container-inner,
    .gradient-section .container-inner,
    #social-connect .container-inner
  ) {
    max-width: var(--content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.slider-container{
    background: none!important;
}
/* Fallback for pages/sections without inner wrappers (avoid full-bleed unless explicitly .full-width) */
:where(section:not(.full-width), .section:not(.full-width), main > section:not(.full-width)) {
  padding-left: var(--gutter-x) !important;
  padding-right: var(--gutter-x) !important;
  box-sizing: border-box !important;
}
@media (min-width: 1100px) {
  :where(section:not(.full-width), .section:not(.full-width), main > section:not(.full-width)) {

    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ================== UPDATED NAVIGATION MENU STYLES - LEFT ALIGNED DROPDOWNS ================== */

/* Add more spacing between navigation buttons (scoped to nav only) */
nav .nav-item, .nav-block .nav-item {
    margin: 0 2rem !important; /* Increase spacing between nav buttons */
}

/* Remove any unintended margins from footer links */
footer .footer-link .nav-item {
    margin: 0 !important;
}

.nav-link {
    padding: 0.8rem 1rem !important; /* Adjust padding for better spacing */
}

/* Hide dropdown arrows completely */
.dropdown-arrow {
    display: none !important; /* Remove arrow icons */
}

.nav-item.has-dropdown .dropdown-arrow {
    display: none !important; /* Ensure arrows are completely hidden */
}

/* === DROPDOWN MENU CONTAINERS === */
/* Remove border radius from dropdown menus and add top borders - LEFT ALIGNED */
nav .dropdown-menu,
.nav-block .dropdown-menu,
.nav-item.has-dropdown .dropdown-menu {
    border-radius: 0 !important;
    border-top: 0.1875rem solid #00aaff !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: linear-gradient(135deg, #003366 0%, #004080 30%, #004d99 60%, #1a4d47 85%, #2d5a3f 100%) !important;
    left: 0 !important;
    transform: translateX(0) translateY(0.625rem) !important;
    min-width: 15.625rem !important;
    padding: 0 !important; /* Critical: no padding on container */
    margin: 0 !important;
    overflow: hidden !important; /* Clip overflow */
    box-sizing: border-box !important;
}

/* === DROPDOWN MENU ITEMS === */
/* All dropdown items styling */
nav .dropdown-menu > a,
nav .dropdown-menu > .dropdown-item,
.nav-block .dropdown-menu > a,
.nav-block .dropdown-menu > .dropdown-item,
.dropdown-menu > a,
.dropdown-menu > .dropdown-item {
    display: block !important; /* Use block instead of flex to avoid width issues */
    border-bottom: none !important;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.15) !important;
    padding: 0.875rem 1.5rem !important;
    min-height: 2.75rem !important;
    line-height: 1.5 !important;
    color: #ffffff !important; /* White by default */
    border-radius: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    position: relative !important;
}

/* CRITICAL: Remove gradient line pseudo-elements from style.css that create center-origin effect */
nav .dropdown-menu > a::before,
nav .dropdown-menu > a::after,
nav .dropdown-menu > .dropdown-item::before,
nav .dropdown-menu > .dropdown-item::after,
.nav-block .dropdown-menu > a::before,
.nav-block .dropdown-menu > a::after,
.nav-block .dropdown-menu > .dropdown-item::before,
.nav-block .dropdown-menu > .dropdown-item::after,
.dropdown-menu > a::before,
.dropdown-menu > a::after,
.dropdown-menu > .dropdown-item::before,
.dropdown-menu > .dropdown-item::after,
nav .dropdown-menu .nav-link::before,
nav .dropdown-menu .nav-link::after,
.dropdown-menu .nav-link::before,
.dropdown-menu .nav-link::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Remove top border from first item */
nav .dropdown-menu > a:first-child,
nav .dropdown-menu > .dropdown-item:first-child,
.nav-block .dropdown-menu > a:first-child,
.nav-block .dropdown-menu > .dropdown-item:first-child,
.dropdown-menu > a:first-child,
.dropdown-menu > .dropdown-item:first-child {
    border-top: none !important;
}

/* Hover state - green text, no gradients, no transforms */
nav .dropdown-menu > a:hover,
nav .dropdown-menu > .dropdown-item:hover,
.nav-block .dropdown-menu > a:hover,
.nav-block .dropdown-menu > .dropdown-item:hover,
.dropdown-menu > a:hover,
.dropdown-menu > .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #99ffa9 !important; /* Green on hover */
    border-radius: 0 !important;
    background-image: none !important;
    transform: none !important; /* No transform on dropdown items */
}

/* CRITICAL: Remove hover pseudo-elements that create gradient lines */
nav .dropdown-menu > a:hover::before,
nav .dropdown-menu > a:hover::after,
nav .dropdown-menu > .dropdown-item:hover::before,
nav .dropdown-menu > .dropdown-item:hover::after,
.nav-block .dropdown-menu > a:hover::before,
.nav-block .dropdown-menu > a:hover::after,
.nav-block .dropdown-menu > .dropdown-item:hover::before,
.nav-block .dropdown-menu > .dropdown-item:hover::after,
.dropdown-menu > a:hover::before,
.dropdown-menu > a:hover::after,
.dropdown-menu > .dropdown-item:hover::before,
.dropdown-menu > .dropdown-item:hover::after,
nav .dropdown-menu .nav-link:hover::before,
nav .dropdown-menu .nav-link:hover::after,
.dropdown-menu .nav-link:hover::before,
.dropdown-menu .nav-link:hover::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Modern dropdown menu styles - LEFT ALIGNED, NO BORDER RADIUS */
.nav-item.has-dropdown .dropdown-menu {
    border-radius: 0 !important;
    border-top: 0.1875rem solid #00aaff !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: linear-gradient(135deg, #003366 0%, #004080 25%, #004d99 50%, #005ab3 75%, #1a4d47 95%, #2d5a3f 100%) !important;
    left: 0 !important;
    transform: translateX(0) translateY(0) !important;
    top: calc(100% + 0.5rem) !important;
    min-width: 15.625rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Show dropdown on hover - LEFT ALIGNED */
.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown.active .dropdown-menu,
.nav-item.has-dropdown .dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) translateY(0) !important;
}

/* Language dropdown menu - LEFT ALIGNED, NO BORDER RADIUS */
.lang-dropdown-menu {
    border-radius: 0 !important;
    border-top: 0.1875rem solid #00aaff !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: linear-gradient(135deg, #003366 0%, #004080 30%, #004d99 60%, #1a4d47 85%, #2d5a3f 100%) !important;
    left: 0 !important;
    transform: translateX(0) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Language dropdown items */
.lang-dropdown-menu > a {
    display: block !important;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    min-height: 2.75rem !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.lang-dropdown-menu > a:first-child {
    border-top: none !important;
}

.lang-dropdown-menu > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #99ffa9 !important;
    border-radius: 0 !important;
}

/* Mobile menu adjustments removed - now handled by 48rem breakpoint below */

/* Ensure consistent styling across all screen sizes - LEFT ALIGNED */
@media (min-width: 48rem) {
    /* Desktop nav button spacing */
    nav .nav-item, .nav-block .nav-item {
        margin: 0 !important; /* Let gap handle spacing */
    }

    /* Desktop dropdown containers */
    nav .dropdown-menu,
    .nav-item.has-dropdown .dropdown-menu,
    .lang-dropdown-menu {
        border-radius: 0 !important;
        border-top: 0.1875rem solid #00aaff !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        background: linear-gradient(135deg, #036 0%, #004080 25%, #0d3a66 50%, #14406c 75%, #1a4d47 95%, #2d5a3f 100%) !important;
        left: 0 !important;
        transform: translateX(0) translateY(0) !important;
        min-width: 15.625rem !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Desktop dropdown items */
    nav .dropdown-menu > a,
    nav .dropdown-menu > .dropdown-item,
    .nav-item.has-dropdown .dropdown-menu > a,
    .nav-item.has-dropdown .dropdown-menu > .dropdown-item,
    .lang-dropdown-menu > a {
        display: block !important;
        min-height: 2.75rem !important;
        line-height: 1.5 !important;
        padding: 0.875rem 1.5rem !important;
        color: #ffffff !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    /* Desktop dropdown hover */
    nav .dropdown-menu > a:hover,
    nav .dropdown-menu > .dropdown-item:hover,
    .nav-item.has-dropdown .dropdown-menu > a:hover,
    .nav-item.has-dropdown .dropdown-menu > .dropdown-item:hover,
    .lang-dropdown-menu > a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #99ffa9 !important;
        border-radius: 0 !important;
    }
}

/* === Slow, Soft Glow & Hover Background Removal Overrides (nav buttons) === */
nav .nav-link:hover,
.nav-item .nav-link:hover {
    background: none !important;
    transform: none !important;
    color: #b9eb5f !important;
}

nav .nav-link:active,
.nav-item .nav-link:active {
    background: none !important;
}

nav .nav-link.active,
.nav-item .nav-link.active {
    background: none !important;
}

/* Provide underline animation compatibility if base style.css present */
@keyframes navShineSweep {
    0% {
        left: -160%;
        opacity: 0;
    }
    10% {
        opacity: .95;
    }
    70% {
        left: 115%;
        opacity: .9;
    }
    85% {
        left: 130%;
        opacity: .55;
    }
    100% {
        left: 140%;
        opacity: 0;
    }
}

@keyframes navPulseGlow {
    0% {
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(0, 180, 255, 0);
        opacity: 0;
    }
    25% {
        text-shadow: 0 0 6px rgba(255, 255, 255, .55), 0 0 12px rgba(0, 168, 255, .45);
        opacity: .85;
    }
    50% {
        text-shadow: 0 0 14px rgba(255, 255, 255, .85), 0 0 26px rgba(0, 168, 255, .6);
        box-shadow: 0 0 18px 4px rgba(0, 168, 255, .42);
        opacity: 1;
    }
    75% {
        text-shadow: 0 0 10px rgba(255, 255, 255, .55), 0 0 18px rgba(0, 168, 255, .4);
        box-shadow: 0 0 12px 3px rgba(0, 168, 255, .3);
        opacity: .7;
    }
    100% {
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(0, 180, 255, 0);
        opacity: 0;
    }
}

nav .nav-link.nav-shine-active::after {
    animation: navShineSweep 2.1s cubic-bezier(.4, .15, .3, .9) forwards !important;
    filter: blur(1px) !important;
}

nav .nav-link.nav-shine-pulse {
    animation: navPulseGlow 2.4s ease-in-out forwards !important;
}

@keyframes navInviteColor {
    0% {
        color: #ffffff;
        text-shadow: 0 0 0 rgba(185, 235, 95, 0);
    }
    18% {
        color: #b9eb5f;
        text-shadow: 0 0 4px rgba(185, 235, 95, .4), 0 0 8px rgba(0, 168, 255, .3);
    }
    40% {
        color: #b9eb5f;
        text-shadow: 0 0 12px rgba(185, 235, 95, .75), 0 0 22px rgba(0, 168, 255, .5), 0 0 34px rgba(0, 168, 255, .2);
    }
    60% {
        color: #b9eb5f;
        text-shadow: 0 0 16px rgba(185, 235, 95, .9), 0 0 30px rgba(0, 168, 255, .55);
    }
    82% {
        color: #b9eb5f;
        text-shadow: 0 0 10px rgba(185, 235, 95, .55), 0 0 18px rgba(0, 168, 255, .35);
    }
    100% {
        color: #ffffff;
        text-shadow: 0 0 0 rgba(185, 235, 95, 0);
    }
}

@keyframes navInviteUnderline {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    20% {
        transform: scaleX(.25);
        opacity: .25;
    }
    45% {
        transform: scaleX(1);
        opacity: .6;
    }
    65% {
        transform: scaleX(1);
        opacity: .55;
    }
    85% {
        transform: scaleX(.55);
        opacity: .3;
    }
    100% {
        transform: scaleX(0);
        opacity: 0;
    }
}

@keyframes navInviteHalo {
    0% {
        opacity: 0;
        transform: translate(-50%, -45%) scale(.25);
        filter: blur(10px);
    }
    22% {
        opacity: .38;
        transform: translate(-50%, -50%) scale(.9);
        filter: blur(13px);
    }
    48% {
        opacity: .52;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(15px);
    }
    68% {
        opacity: .42;
        transform: translate(-50%, -50%) scale(.92);
        filter: blur(13px);
    }
    88% {
        opacity: .18;
        transform: translate(-50%, -50%) scale(.75);
        filter: blur(11px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -55%) scale(.55);
        filter: blur(9px);
    }
}

nav .nav-link.nav-invite {
    animation: navInviteColor 3.8s ease-in-out forwards !important;
}

nav .nav-link.nav-invite::before {
    animation: navInviteUnderline 3.8s ease-in-out forwards !important;
}

nav .nav-link.nav-invite::after {
    animation: navInviteHalo 3.8s ease-in-out forwards !important;
}

@media (prefers-reduced-motion: reduce) {
    nav .nav-link.nav-shine-active::after, nav .nav-link.nav-shine-pulse, nav .nav-link.nav-invite, nav .nav-link.nav-invite::before, nav .nav-link.nav-invite::after {
        animation: none !important;
        opacity: 1;
        filter: none;
    }
}

/* === Sticky scroll-reveal navigation (added) === */
body > nav.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    width: 100%;
    transform: translateY(-120%);
    transition: transform .48s cubic-bezier(.4, .15, .25, 1);
    will-change: transform;
}

body > nav.nav-fixed.nav-visible {
    transform: translateY(0);
}

.nav-placeholder {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    body > nav.nav-fixed {
        transition: none;
        transform: translateY(0) !important;
    }
}

/* === Scroll-triggered nav (shared) === */
.nav-scroll-triggered {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(25, 39, 68, 0.87) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /*box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;*/
    z-index: 9999;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
}

.nav-scroll-triggered.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.nav-scroll-triggered.hide {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

.nav-scroll-triggered .nav-link {
    color: #ffffff !important;
}

.nav-scroll-triggered .nav-link:hover {
    color: #00aaff !important;
}

/* Keep top nav transparent */
body > nav.nav-transparent {
    background: transparent !important;
    box-shadow: none !important;
}

/* Applications icons: center column layout (global override) */
.applications .content .icon-image {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
}

/* Center-align Google reCAPTCHA widget globally (applies to all forms and modals) */
.g-recaptcha {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* === Global container width & padding (laptop+ screens) - 15% wider === */
@media (min-width: 1200px) {
    /* Apply to the most common top-level wrappers */
    .container-inner,
    nav .container-inner,
    header .container-inner,
    .top-block .container-inner,
    .introducing-block .container-inner,
    .features .container-inner,
    .applications .container-inner,
    .info .container-inner,
    .ecosystem-infobox .container-inner,
    .banner-ecosystem .container-inner,
    .banner-material-handling .container-inner,
    .bottom-area.container-inner,
    .middle-container.container-inner,
    .slider-container .container-inner,
    .gradient-section .container-inner {
        width: 100% !important;
        max-width: var(--content-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: var(--gutter-x) !important;
        padding-right: var(--gutter-x) !important;
        box-sizing: border-box !important;
    }

    /* Apply same dimensions to all sections */
    section,
    section > div,
    section > .container,
    section > .container-fluid,
    .section,
    main,
    main > section {
        box-sizing: border-box !important;
    }

    /* Ensure section children use the same width and padding as navbar */
    section .container-inner,
    section > .content,
    section > div > .content,
    .section .container-inner,
    .section > .content,
    main section .container-inner,
    main section > .content {
        max-width: var(--content-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--gutter-x) !important;
        padding-right: var(--gutter-x) !important;
        box-sizing: border-box !important;
    }
}

/* === Normal desktop screens (1100px-1199px) - Match navbar dimensions === */
@media (min-width: 1100px) and (max-width: 1199.98px) {
    /* All container-inner elements match navbar width */
    .container-inner,
    section .container-inner,
    section > .content,
    section > div > .content,
    .section .container-inner,
    main section .container-inner,
    #social-connect .container-inner,
    footer .container-inner,
    .top-block .container-inner,
    .introducing-block .container-inner,
    .features .container-inner,
    .applications .container-inner,
    .info .container-inner,
    .ecosystem-infobox .container-inner,
    .banner .container-inner,
    .bottom-area.container-inner,
    .middle-container.container-inner,
    .slider-container .container-inner,
    .gradient-section .container-inner {
        max-width: 1766px !important; /* Match navbar: 1536 * 1.15 = 1766px */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 5rem !important; /* Match navbar horizontal padding */
        padding-right: 5rem !important;
        box-sizing: border-box !important;
    }

    /* For sections without container-inner, constrain their direct content */
    section:not(.full-width),
    .section:not(.full-width),
    main > section:not(.full-width) {
        max-width: 1766px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 5rem !important;
        padding-right: 5rem !important;
        box-sizing: border-box !important;
    }
}

/* === Apply consistent width to all desktop screens (≥1100px) === */
@media (min-width: 1100px) {
    /* Ensure all content areas respect the max-width constraint */
    body > section,
    body > main > section,
    .wrapper > section,
    main section {
        width: 100% !important;
    }

    /* Grid and flex containers inside sections should not exceed navbar width */
    section .grid,
    section .flex-container,
    section .row,
    .section .grid,
    .section .flex-container,
    .section .row {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* === Navbar width cap for normal (desktop) screens - 15% wider === */
@media (min-width: 1100px) {
    nav .container-inner,
    .nav-block .container-inner,
    #scrollNav.nav-block .container-inner {
        max-width: 1766px !important; /* 15% wider: 1536 * 1.15 = 1766.4px */
        width: 100% !important; /* keep fluid within the cap */
        margin-left: auto !important;
        margin-right: auto !important;
        /* keep existing horizontal padding from earlier rules */
        box-sizing: border-box !important;
    }

    /* Match content/footer/social gutters to navbar width */
    #social-connect .container-inner,
    footer .container-inner,
    .top-block .container-inner,
    .introducing-block .container-inner,
    .features .container-inner,
    .applications .container-inner,
    .info .container-inner,
    .ecosystem-infobox .container-inner,
    .banner-ecosystem .container-inner,
    .banner-material-handling .container-inner,
    .bottom-area.container-inner,
    .middle-container.container-inner,
    .slider-container .container-inner,
    .gradient-section .container-inner {
        max-width: 1766px !important; /* align with navbar */
    }
}

/* === Global Typography System (site-wide, keep out of style.css) === */
:root {
  /* Font families */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Scales */
  --fs-body: clamp(1.00rem, 0.96rem + 0.25vw, 1.12rem);
  --fs-small: clamp(0.88rem, 0.84rem + 0.20vw, 0.98rem);
  /* Reduced h1 ~20% from previous clamp(2.8rem, 1.8rem + 4.2vw, 5.0rem) */
  --fs-h1: clamp(2.24rem, 1.44rem + 3.36vw, 4.0rem);
  --fs-h2: clamp(2.0rem, 1.2rem + 2.6vw, 3.4rem);
  --fs-h3: clamp(1.45rem, 1.15rem + 1.4vw, 2.00rem);
  --fs-h4: clamp(1.25rem, 1.05rem + 0.8vw, 1.50rem);
  --fs-h5: clamp(1.10rem, 1.02rem + 0.4vw, 1.25rem);
  --fs-h6: clamp(1.00rem, 0.96rem + 0.2vw, 1.10rem);
  /* Rhythm */
  --lh-body: 1.60;
  --lh-heading: 1.10;
  --sp-after: 0.75em;
}

/* Base text smoothing and font */
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font-sans), Arial, Helvetica, sans-serif !important; }

/* Paragraphs and list content */
:where(p, li, dd, address) {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 var(--sp-after) !important;
  font-family: var(--font-sans), Arial, Helvetica, sans-serif !important;
}
:where(ul, ol) { padding-left: 1.25em; margin: 0 0 var(--sp-after); }

/* Headings scale (normalized across pages) */
:where(h1) { font-size: var(--fs-h1) !important; line-height: var(--lh-heading) !important; font-weight: 800 !important; margin: 0 0 0.5em !important; letter-spacing: .01em; }
:where(h2) { font-size: var(--fs-h2) !important; line-height: var(--lh-heading) !important; font-weight: 800 !important; margin: 0 0 0.6em !important; }
:where(h3) { font-size: var(--fs-h3) !important; line-height: var(--lh-heading) !important; font-weight: 700 !important; margin: 0 0 0.65em !important; }
:where(h4) { font-size: var(--fs-h4) !important; line-height: var(--lh-heading) !important; font-weight: 700 !important; margin: 0 0 0.7em !important; }
:where(h5) { font-size: var(--fs-h5) !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 0 0 0.75em !important; }
:where(h6) { font-size: var(--fs-h6) !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 0 0 0.8em !important; }

/* Captions and supporting text */
:where(caption, figcaption, .caption) {
  font-size: var(--fs-small) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  opacity: .95;
  padding-bottom: 0.6rem !important;
  margin: 0 !important;
}

/* Lead/Subtitle/Eyebrow helpers used across sections */
:where(.lead) { font-size: clamp(1.10rem, 0.98rem + 0.6vw, 1.40rem) !important; font-weight: 500 !important; line-height: 1.55 !important; }
:where(.subtitle, .sub-title) { font-size: clamp(1.00rem, 0.94rem + 0.45vw, 1.20rem) !important; font-weight: 600 !important; line-height: 1.45 !important; opacity: .92; }
:where(.eyebrow, .overline, .kicker) { font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.92rem) !important; font-weight: 700 !important; letter-spacing: .10em !important; text-transform: uppercase !important; opacity: .9; }

/* Normalize small and emphasis */
:where(small) { font-size: var(--fs-small) !important; line-height: 1.4 !important; }
:where(strong, b) { font-weight: 700 !important; }
:where(em, i) { font-style: italic !important; }

/* Links inherit body sizing unless explicitly styled */
:where(a) { font: inherit !important; text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; }

/* Section descriptions often use .description; unify paragraph sizing inside */
:where(.description) p { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; }

/* Prevent giant inline font-size overrides from breaking layout in common blocks */
:where(.banner, .banner2, .talk-to-us, .introducing-block, .introducing-block-info, .applications, .gradient-section, .social-connect, #social-connect) :where(p, h1, h2, h3, h4, h5, h6, caption, figcaption) {
  font-family: var(--font-sans), Arial, Helvetica, sans-serif !important;
}

/* === Global Typography Extensions: lists, tables, accordions === */
/* Lists: consistent spacing and sizing everywhere */
:where(.description) li,
:where(section, .section, main) :where(ul li, ol li) {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  margin: 0.25em 0 !important;
}
:where(ul, ol) { list-style-position: outside; }

/* Generic tables (avoid specs table which has its own design) */
:where(table):not(.specifications-table) {
  font-family: var(--font-sans), Arial, Helvetica, sans-serif !important;
  font-size: var(--fs-body) !important;
  border-collapse: collapse;
}
:where(table):not(.specifications-table) :where(th, td) {
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important; /* th will bump below */
  padding: 0.6rem 0.8rem !important;
}
:where(table):not(.specifications-table) th {
  font-weight: 700 !important;
}
:where(table):not(.specifications-table) caption { /* leverage caption base */
  padding-bottom: 0.6rem !important;
}

/* Accordions/FAQ: unify question/answer typography across pages */
:where(.faq-box, .accordion, .accordion-list) {
  font-family: var(--font-sans), Arial, Helvetica, sans-serif !important;
}
:where(.faq-box .faq-question, .accordion .accordion-header) {
  font-size: clamp(1.05rem, 0.98rem + 0.6vw, 1.35rem) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}
:where(.faq-box .faq-answer, .accordion .accordion-body, .accordion .accordion-content) {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}

/* Figure captions used across product pages */
:where(figure > figcaption) { font-size: var(--fs-small) !important; line-height: 1.35 !important; font-weight: 600 !important; }

/* Tighten headings inside common title classes without changing colors */
:where(.bottom-line) { line-height: var(--lh-heading) !important; letter-spacing: .01em; }

/* Prevent accidental overrides from inline styles by normalizing style attributes on typical content blocks */
:where(.introducing-block, .introducing-block-info, .gradient-section, .features, .info, .content, .text-area, .text-area-2) :where(p, li, h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans), Arial, Helvetica, sans-serif !important;
}
/* === End Typography Extensions === */

/* === Global Accent Variables (template-aligned) === */
:root {
  --accent-cyan: #0087dc;
  --accent-cyan-2: #53d3ff;
  --accent-green: #b9eb5f;
}

/* === Template-aligned Heading Accent Line (for .bottom-line headings) === */
:where(h1.bottom-line, h2.bottom-line, .bottom-line) {
  position: relative;
  padding-bottom: 0.1em !important;
}
:where(h1.bottom-line, h2.bottom-line, .bottom-line)::after {
  content: "";
  display: block;
  width: clamp(120px, 12vw, 220px);
  height: 6px;
  margin-top: 0.35em;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-cyan-2) 45%, var(--accent-green) 100%);
  border-radius: 3px;
}

/* === Emphasis in body copy matches template (green highlights) === */
:where(p, li) :where(strong, b) {
  color: var(--accent-green) !important;
  font-weight: 700 !important;
}

/* === Bullet list rhythm and clarity (template spacing) === */
:where(section, .section, main) :where(ul, ol) {
  margin: 0.4rem 0 1.1rem !important;
  padding-left: 1.25em !important;
}
:where(section, .section, main) :where(ul li, ol li) {
  margin: 0.28em 0 !important;
  line-height: var(--lh-body) !important;
}

/* Hide Home icon button injected by site-search.js across all pages */
.site-home-btn,
.site-home-btn img[alt="Home"],
nav .logo + a.site-home-btn,
img[src$="/assets/index-assets/home-icon.png"],
img[src*="index-assets/home-icon.png"] {
  display: none !important;
}

/* Enforce reduced H1 size across hero sections (override page-level clamps */
.banner .description h1,
.banner-material-handling .description h1,
.banner-ecosystem .description h1,
.news-hero h1,
.talk-to-us .banner2 .description h1,
h1.partner-hero-title {
  font-size: var(--fs-h1) !important;
}

/* === Global Social Connect unification (match index.html) === */
#social-connect .sc-icon {
  width: 54px !important;
  height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: #129fff !important;
  color: #129fff !important; /* used by SVG rect fill */
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.55) !important;
  transition: .35s transform, .35s box-shadow, .35s background !important;
  margin-right: 12px !important;
}
#social-connect .sc-icon:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.65) !important;
  background: #129fff !important;
}
#social-connect .sc-cta {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  padding: 18px 34px !important;
  border-radius: 46px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  background: #129fff !important; /* unified with index overrides */
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.6) !important;
  transition: box-shadow .35s, transform .35s !important;
  color: #0c2d52 !important;
}
#social-connect .sc-cta:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.65) !important;
}
/* Consistent social icon spacing across all pages */
#social-connect .sc-icon {
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}
/* Ensure gap property doesn't override if inline styles exist */
#social-connect div[style*="display:flex"] {
  gap: 0 !important;
}

/* === Center Talk to Us form (ensure "Stay in contact" is exactly centered) === */
.talk-to-us .bottom-area {
  /* bottom-area is already display:flex; ensure horizontal centering of column children */
  align-items: center !important;
}
.talk-to-us .bottom-area .form {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === Z-INDEX LAYERING: Ensure nav submenus appear above site search panel globally === */
/* The site search panel uses z-index: 10000 in site-search-overrides.css. Keep nav and its dropdowns above it. */
.nav-block,
nav.nav-block {
  position: relative; /* create stacking context if not positioned */
  z-index: 12000 !important; /* above search panel (10000) */
}

/* Scroll-triggered sticky nav should also be above search panel */
.nav-scroll-triggered {
  z-index: 12000 !important; /* override earlier value to stay on top of search */
}

/* Dropdown menus and language menu should be the very top within nav */
nav .dropdown-menu,
.nav-block .dropdown-menu,
.nav-item.has-dropdown .dropdown-menu,
.lang-dropdown-menu {
  z-index: 12010 !important; /* above nav container and search panel */
}

/* On mobile, ensure dropdown overlays remain above any panels */
@media (max-width: 1099px) {
  nav .dropdown-menu,
  .nav-block .dropdown-menu,
  .lang-dropdown-menu {
    z-index: 12010 !important;
  }
}

/* === Mobile navbar: new hamburger and left-aligned menu (<=1099.98px) === */
@media (max-width: 1099.98px) {
  /* Ensure hamburger is visible */
  .menu-toggle { display: flex !important; }

  /* Mobile links panel hidden by default; shown when active or data-open=true */
  nav .links,
  .nav-block .links {
    position: fixed !important;
    top: var(--nav-height-mobile, 92px) !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - var(--nav-height-mobile, 92px)) !important;
    background: linear-gradient(132deg, #031a3a 0%, #04244d 40%, #073a65 70%, #0a5a5a 100%) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 18px var(--gutter-x) 24px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    z-index: 10030 !important;
  }
  nav .links.active,
  nav .links[data-open="true"],
  .nav-block .links.active,
  .nav-block .links[data-open="true"] {
    display: flex !important;
  }

  /* Each nav item spans full width; text left-aligned */
  nav .links .nav-item,
  .nav-block .links .nav-item { width: 100% !important; margin: 0 !important; }
  nav .links .nav-link,
  .nav-block .links .nav-link { width: 100% !important; text-align: left !important; padding: 12px 0 !important; }

  /* Dropdown menus behave inline (under parent), left-aligned */
  nav .links .dropdown-menu,
  .nav-block .links .dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none !important; /* hidden until parent is active/show */
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
  }
  /* Show dropdown when toggled */
  .nav-item.has-dropdown.active > .dropdown-menu,
  .nav-item.has-dropdown > .dropdown-menu.show { display: block !important; }

  /* Language dropdown inside the panel behaves similarly */
  #dropdownMenu,
  #dropdownMenuScroll { position: static !important; transform: none !important; }

  /* Prevent desktop hover behaviors from interfering on mobile */
  .nav-item.has-dropdown:hover > .dropdown-menu { display: none !important; }
}

/* Legacy target-based overlay: coerce to new mobile panel style on mobile */
@media (max-width: 1099.98px) {
  #popup-overlay:target {
    display: flex !important;
    position: fixed !important;
    top: var(--nav-height-mobile, 92px) !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - var(--nav-height-mobile, 92px)) !important;
    background: linear-gradient(132deg, #031a3a 0%, #04244d 40%, #073a65 70%, #0a5a5a 100%) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 18px var(--gutter-x) 24px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    z-index: 10030 !important;
  }
}

/* Ensure hamburger bars are visible and animated on mobile across all navs */
@media (max-width: 1099.98px) {
  nav .menu-toggle,
  .nav-block .menu-toggle,
  #scrollNav .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 40px !important;
    height: 32px !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 12050 !important; /* above dropdowns */
    cursor: pointer !important;
  }
  nav .menu-toggle span,
  .nav-block .menu-toggle span,
  #scrollNav .menu-toggle span {
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 3px !important;
    transition: transform .28s ease, opacity .28s ease, background .28s ease !important;
  }
  /* reset default extra margins if any */
  nav .menu-toggle span + span,
  .nav-block .menu-toggle span + span,
  #scrollNav .menu-toggle span + span { margin-top: 6px !important; }

  /* Open/close animation */
  nav .menu-toggle.active span:nth-child(1),
  .nav-block .menu-toggle.active span:nth-child(1),
  #scrollNav .menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
  }
  nav .menu-toggle.active span:nth-child(2),
  .nav-block .menu-toggle.active span:nth-child(2),
  #scrollNav .menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(.6) !important;
  }
  nav .menu-toggle.active span:nth-child(3),
  .nav-block .menu-toggle.active span:nth-child(3),
  #scrollNav .menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
  }
}

/* Mobile submenu accordion behavior: push-down, clickable, animated */
@media (max-width: 1099.98px) {
  nav .links .nav-item.has-dropdown { position: relative !important; overflow: visible !important; }
  nav .links .nav-item.has-dropdown > .dropdown-menu,
  .nav-block .links .nav-item.has-dropdown > .dropdown-menu {
    position: static !important;
    display: block !important;           /* be part of flow */
    max-height: 0 !important;            /* collapsed */
    overflow: hidden !important;          /* hide when collapsed */
    pointer-events: none !important;      /* not clickable when collapsed */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    background: transparent !important;   /* inherit panel gradient */
    transition: max-height .35s ease !important;
    z-index: 0 !important;                /* in-flow under its parent; no overlay */
  }
  /* Expanded state: allow clicks and reveal content */
  nav .links .nav-item.has-dropdown.active > .dropdown-menu,
  nav .links .nav-item.has-dropdown > .dropdown-menu.show,
  .nav-block .links .nav-item.has-dropdown.active > .dropdown-menu,
  .nav-block .links .nav-item.has-dropdown > .dropdown-menu.show {
    max-height: 1200px !important;        /* enough to show submenu */
    pointer-events: auto !important;
  }
  /* Submenu items spacing inside accordion */
  nav .links .nav-item.has-dropdown > .dropdown-menu > a,
  .nav-block .links .nav-item.has-dropdown > .dropdown-menu > a {
    padding: 10px 0 10px 16px !important;
    border-top: 0.0625rem solid rgba(255,255,255,.12) !important;
  }
  nav .links .nav-item.has-dropdown > .dropdown-menu > a:first-child,
  .nav-block .links .nav-item.has-dropdown > .dropdown-menu > a:first-child {
    border-top: none !important;
  }
  /* Prevent hover rules from collapsing accordion on touch */
  nav .links .nav-item.has-dropdown:hover > .dropdown-menu,
  .nav-block .links .nav-item.has-dropdown:hover > .dropdown-menu {
    max-height: 1200px !important;
    pointer-events: auto !important;
  }
}

/* === Ensure navbar logo never shrinks below designed size across site === */
nav .logo {
  min-width: 150px !important; /* match current normal size */
  flex-shrink: 0 !important;   /* prevent flexbox from squeezing it */
}
nav .logo img {
  height: auto !important;
  width: 100% !important;      /* fill the logo container width */
  max-width: 100% !important;  /* avoid additional intrinsic shrinking */
}

/* Ensure logo does not shrink below its natural width */
.nav-block .logo img { min-width: 180px; height: auto; }
/* Scroll nav variant */
#scrollNav .logo img { min-width: 180px; height: auto; }