/**
 * ============================================================================
 * Conmove SaaS - Main Stylesheet
 * File: assets/css/style.css
 * 100% Dynamic Tokens from design-system.css
 * All media queries isolated in responsive.css
 * ============================================================================
 */
body {font-family: var(--font-family); color: var(--color-black); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.hgi-stroke {display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle;}
/* ==========================================================================
   Component: Page Preloader Screen (Dynamic Component Loading Experience)
   ========================================================================== */
.page-preloader {position: fixed; inset: 0; width: 100vw; height: 100vh; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 1; visibility: visible; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, visibility;}
.page-preloader.loaded {opacity: 0; visibility: hidden; pointer-events: none;}
.preloader-content {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 300px; width: 100%; padding: var(--space-4);}
/* Logo & Icon Animation */
.preloader-logo-wrapper {position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);}
.preloader-logo-img {width: var(--size-preloader-logo); height: var(--size-preloader-logo); border-radius: var(--radius-xl); box-shadow: 0 10px 28px var(--color-accent-blue-30); animation: logoBreathing 2.2s ease-in-out infinite alternate; position: relative; z-index: var(--z-glow);}
.preloader-logo-glow {position: absolute; inset: -8px; background: radial-gradient(circle, var(--color-accent-blue-35) 0%, transparent 70%); border-radius: var(--radius-2xl); z-index: var(--z-overlay); animation: glowPulse 2.2s ease-in-out infinite alternate;}
@keyframes logoBreathing {
  0% {transform: scale(0.95) translateY(0); box-shadow: 0 8px 20px var(--color-accent-blue-20);}
  100% {transform: scale(1.05) translateY(-4px); box-shadow: 0 16px 36px var(--color-accent-blue-45);}
}
@keyframes glowPulse {
  0% {opacity: 0.4; transform: scale(0.9);}
  100% {opacity: 1; transform: scale(1.25);}
}
/* Loading Text & Animated Dots */
.preloader-text-wrapper {display: inline-flex; align-items: baseline; margin-bottom: var(--space-3); font-family: var(--font-family); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-accent-blue); letter-spacing: 2.5px; text-transform: uppercase;}
.preloader-dots .dot {display: inline-block; animation: dotBlink 1.4s infinite both; font-size: var(--font-size-sm); line-height: 1;}
.preloader-dots .dot-1 {animation-delay: 0s;}
.preloader-dots .dot-2 {animation-delay: 0.2s;}
.preloader-dots .dot-3 {animation-delay: 0.4s;}
@keyframes dotBlink {
  0%, 80%, 100% {opacity: 0; transform: scale(0.8);}
  40% {opacity: 1; transform: scale(1.2);}
}
/* Horizontal Progress Bar Track & Animated Fill */
.preloader-bar-track {width: var(--size-track-progress); height: 3px; background-color: var(--color-gray-300); border-radius: var(--radius-pill); overflow: hidden; position: relative;}
.preloader-bar-fill {height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-accent-blue) 0%, var(--color-blue-alt) 100%); border-radius: var(--radius-pill); transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); position: relative;}
.preloader-bar-fill::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, var(--color-white-70), transparent); animation: shimmer 1.5s infinite;}
@keyframes shimmer {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(100%);}
}
/* ==========================================================================
   Component: Navigation Bar (Absolute Positioned Transparent Glass)
   ========================================================================== */
.site-header {position: absolute; top: 0; left: 0; right: 0; width: 100%; background-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: var(--border-glass-subtle); z-index: var(--z-header); transition: var(--transition-header);}
.site-header.scrolled {background-color: var(--color-nav-bg-85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: var(--border-glass-medium); box-shadow: var(--shadow-glass-header);}
.site-header .navbar {min-height: var(--header-min-height); padding: 0;}
/* Brand Logo */
.brand-logo-img {height: var(--logo-height); width: auto; transition: var(--transition-smooth);}
.brand-logo-img:hover {transform: scale(1.02);}
/* Navigation Links */
.site-nav {display: flex; align-items: center; gap: var(--space-1);}
.site-nav .nav-link {font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-white-78); padding: var(--space-3) var(--space-5) !important; border-radius: var(--radius-default); display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; transition: var(--transition-fast); white-space: nowrap;}
.site-nav .nav-link:hover {color: var(--color-white);}
.site-nav .nav-link.active {color: var(--color-white); font-weight: var(--font-weight-bold);}
.site-nav .nav-chevron {font-size: var(--font-size-xs); line-height: 1; opacity: 0.8; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;}
/* ==========================================================================
   Navigation Dropdown Menu with Glassmorphism & Hover Animation
   ========================================================================== */
.site-nav .nav-item.dropdown {position: relative;}
/* Remove default bootstrap arrow icon */
.site-nav .dropdown-toggle::after {display: none !important;}
.site-nav .dropdown-menu {display: block; position: absolute; top: 100%; left: 0; min-width: var(--size-phone-w); background: var(--color-nav-bg-95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--border-glass-medium); border-radius: var(--radius-xl); box-shadow: var(--shadow-glass-dropdown), 0 0 0 1px var(--color-white-05); padding: var(--space-3); margin-top: var(--space-3); list-style: none; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.96); transform-origin: top left; transition: var(--transition-dropdown); pointer-events: none; z-index: var(--z-dropdown);}
/* Invisible bridge so mouse doesn't leave hover area */
.site-nav .dropdown-menu::before {content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px;}
/* Open Animation on Hover / Focus */
.site-nav .nav-item.dropdown:hover>.dropdown-menu, .site-nav .nav-item.dropdown:focus-within>.dropdown-menu, .site-nav .dropdown-menu.show {opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;}
.site-nav .nav-item.dropdown:hover .nav-chevron {transform: rotate(180deg); color: var(--color-accent-blue);}
/* Dropdown Menu Items */
.site-nav .dropdown-item {display: flex; align-items: center; justify-content: space-between; padding: 10px var(--space-4); border-radius: var(--radius-default); font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-white-85); text-decoration: none; background: transparent; transition: var(--transition-fast); position: relative;}
.site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus {background-color: var(--color-accent-blue-15); color: var(--color-white); transform: translateX(4px);}
.site-nav .dropdown-item-arrow {font-size: var(--font-size-xs); color: var(--color-accent-blue); opacity: 0; transform: translateX(-6px); transition: var(--transition-fast);}
.site-nav .dropdown-item:hover .dropdown-item-arrow {opacity: 1; transform: translateX(0);}
/* Active State in Solutions Dropdown */
.site-nav .dropdown-item.active, .site-nav .dropdown-item.active:hover {background-color: var(--color-accent-blue-20, var(--color-shadow-blue-22)) !important; color: var(--color-white) !important; font-weight: var(--font-weight-semibold);}
.site-nav .dropdown-item.active .dropdown-item-arrow {opacity: 1 !important; transform: translateX(0) !important; color: var(--color-accent-blue);}
/* Navigation Action Buttons */
.nav-actions {display: flex; align-items: center; gap: var(--space-3);}
.btn-nav-login {display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); background-color: var(--color-white); color: var(--color-primary-dark); font: var(--btn-font-sm); height: var(--btn-height); padding: 0 var(--btn-padding); border-radius: var(--btn-radius); text-decoration: none; border: 1px solid transparent; cursor: pointer; outline: none; transition: var(--transition-smooth); will-change: transform, box-shadow;}
.btn-nav-login:hover {background-color: var(--color-gray-100); color: var(--color-primary-dark); transform: translateY(-2.5px); box-shadow: var(--shadow-btn-white-hover);}
.btn-nav-login:active {transform: translateY(0);}
.btn-nav-cta {display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); background-color: var(--color-accent-blue); color: var(--color-white); font: var(--btn-font-sm); height: var(--btn-height); padding: 0 var(--btn-padding); border-radius: var(--btn-radius); border: none; text-decoration: none; cursor: pointer; outline: none; transition: var(--transition-smooth); will-change: transform, box-shadow, background-color;}
.btn-nav-cta:hover, .btn-nav-cta:focus {background-color: var(--color-blue-hover) !important; color: var(--color-white) !important; transform: translateY(-2.5px); box-shadow: var(--shadow-btn-primary-hover);}
.btn-nav-cta:active {background-color: var(--color-blue-active) !important; color: var(--color-white) !important; transform: translateY(0);}
/* Animated Hamburger & Close (X) Toggler (Hidden on Desktop) */
.navbar-toggler.custom-hamburger {display: none; align-items: center; justify-content: center; width: var(--btn-toggler-size); height: var(--btn-toggler-size); padding: 0; background: var(--color-white-05); border: var(--border-glass-strong); border-radius: var(--radius-default); cursor: pointer; outline: none; transition: var(--transition-smooth);}
.navbar-toggler.custom-hamburger:hover {background: var(--color-white-12); border-color: var(--border-accent-focus); box-shadow: var(--shadow-toggler-hover);}
.navbar-toggler.custom-hamburger:focus {box-shadow: 0 0 0 2px var(--color-accent-blue-20);}
.hamburger-box {width: var(--hamburger-box-width); height: var(--hamburger-box-height); position: relative; display: flex; flex-direction: column; justify-content: space-between;}
.hamburger-line {display: block; width: 100%; height: var(--hamburger-line-height); background-color: var(--color-white); border-radius: 2px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, background-color 0.3s ease; transform-origin: center;}
/* Morph to 'X' (Close Icon) when NOT collapsed (Open State) */
.navbar-toggler.custom-hamburger:not(.collapsed) .hamburger-line.line-1 {transform: translateY(6px) rotate(45deg);}
.navbar-toggler.custom-hamburger:not(.collapsed) .hamburger-line.line-2 {opacity: 0; transform: scaleX(0);}
.navbar-toggler.custom-hamburger:not(.collapsed) .hamburger-line.line-3 {transform: translateY(-6px) rotate(-45deg);}
/* ==========================================================================
   Component: Hero Banner Section (Dynamic Parallax, Glassmorphism & App Showcase)
   ========================================================================== */
.hero-section {position: relative; background-color: var(--color-black); color: var(--color-white); padding-top: calc(var(--header-min-height) + clamp(30px, 4vw, 55px)); padding-bottom: 0; overflow: hidden; min-height: clamp(620px, 86vh, 820px); display: flex; align-items: center;}
/* Mac Laptops Specific: Full 100% Viewport Height (Removes 20px gap on MacBook screens) */
/* Dedicated Background Layer using img37.png */
.hero-bg-layer {position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; background-image: url('../images/img37.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; filter: brightness(0.95); opacity: 0.95; pointer-events: none; z-index: var(--z-bg); transform: translate3d(0, 0, 0); will-change: transform;}
/* Dark Gradient Overlay for optimal contrast */
.hero-overlay-gradient {position: absolute; inset: 0; background: radial-gradient(circle at 75% 40%, var(--color-navy-dark-15) 0%, var(--color-navy-deep-65) 100%); pointer-events: none; z-index: var(--z-overlay);}
/* Interactive Cursor Pointer Spotlight & Ring Animation */
.hero-cursor-spotlight {position: absolute; top: 0; left: 0; width: var(--size-spotlight); height: var(--size-spotlight); border-radius: var(--radius-full); background: radial-gradient(circle, var(--color-accent-blue-16) 0%, var(--color-shadow-blue-06) 45%, transparent 75%); filter: blur(48px); pointer-events: none; opacity: 0; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; will-change: transform, opacity;}
.hero-section:hover .hero-cursor-spotlight {opacity: 1;}
.hero-section .container {position: relative; z-index: var(--z-content);}
.hero-content-col {padding-bottom: clamp(40px, 6vw, 80px);}
/* Left Column: Hero Badge Strip (#paperlessports - mission zero emission) */
.hero-badge {display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: none; padding: 0; margin-bottom: var(--space-20); font-family: var(--font-family); font-size: var(--font-size-15-5); line-height: 1.4;}
.hero-badge-icon {color: var(--color-accent-green); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); line-height: 1; margin-right: 2px;}
.hero-badge-icon i, .hero-badge-icon .hgi-stroke {font-size: var(--font-size-xl); line-height: 1; color: var(--color-accent-green);}
.hero-badge-tag {color: var(--color-accent-green); font-weight: var(--font-weight-medium); letter-spacing: -0.01em;}
.hero-badge-sep {color: var(--color-gray-700); margin: 0 3px;}
.hero-badge-text {color: var(--color-gray-neutral); font-weight: var(--font-weight-regular);}
/* Hero Headline */
.hero-title {font-family: var(--font-family); font-size: clamp(2.4rem, 4.4vw, 56px); font-weight: var(--font-weight-bold); line-height: 1.15; color: var(--color-white); letter-spacing: -0.025em; margin-bottom: var(--space-20);}
/* Hero Description */
.hero-desc {font-family: var(--font-family); font-size: var(--font-size-15-5); font-weight: var(--font-weight-regular); line-height: 1.6; color: var(--color-gray-neutral); max-width: 510px; margin-bottom: 32px;}
/* Hero Actions */
.hero-actions {gap: var(--space-4); margin-bottom: var(--space-20);}
.btn-hero-primary, .btn-hero-secondary {display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); height: var(--btn-height); min-height: var(--btn-height); min-width: 165px; padding: 0 var(--btn-padding-md); border-radius: var(--btn-radius); font: var(--btn-font); cursor: pointer; outline: none; text-decoration: none; transition: var(--transition-smooth); will-change: transform, box-shadow;}
.btn-hero-primary {background-color: var(--color-accent-blue); color: var(--color-white); border: none;}
.btn-hero-primary i, .btn-hero-primary .hgi-stroke {transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);}
.btn-hero-primary:hover, .btn-hero-primary:focus {background-color: var(--color-blue-hover) !important; color: var(--color-white) !important; transform: translateY(-2.5px); box-shadow: var(--shadow-btn-primary-hover);}
.btn-hero-primary:hover i, .btn-hero-primary:hover .hgi-stroke {transform: translateX(4px);}
.btn-hero-primary:active {background-color: var(--color-blue-active) !important; transform: translateY(0);}
.btn-hero-secondary {background-color: var(--color-white); color: var(--color-primary-dark); border: none;}
.btn-hero-secondary i, .btn-hero-secondary .hgi-stroke {transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);}
.btn-hero-secondary:hover, .btn-hero-secondary:focus {background-color: var(--color-gray-100); color: var(--color-primary-dark); transform: translateY(-2.5px); box-shadow: var(--shadow-btn-white-hover);}
.btn-hero-secondary:hover i, .btn-hero-secondary:hover .hgi-stroke {transform: translateX(4px);}
.btn-hero-secondary:active {transform: translateY(0);}
/* Hero Tagline */
.hero-tagline {font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-gray-400); margin-bottom: var(--space-70);}
/* Feature Icons Strip */
.hero-features-strip {gap: 10px;}
.hero-feature-box {width: var(--size-icon-box); height: var(--size-icon-box); border-radius: var(--radius-default); background: var(--color-white-05); border: 1.5px solid var(--color-white-35); display: inline-flex; align-items: center; justify-content: center; color: var(--color-white); backdrop-filter: blur(8px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; cursor: pointer; font-size: var(--font-size-xl); line-height: 1; padding: 0; outline: none; appearance: none; -webkit-appearance: none; text-decoration: none; text-decoration-line: none;}
.hero-feature-box i, .hero-feature-box .hgi-stroke {font-size: var(--font-size-xl); line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;}
.hero-feature-box:hover, .hero-feature-box.auto-active {background: var(--color-accent-blue-20); border-color: var(--color-accent-blue); color: var(--color-white); transform: translateY(-3px); box-shadow: 0 6px 16px var(--color-accent-blue-35);}
.hero-feature-box:hover i, .hero-feature-box:hover .hgi-stroke, .hero-feature-box.auto-active i, .hero-feature-box.auto-active .hgi-stroke {transform: scale(1.1); color: var(--color-white);}
/* Custom Tooltip Styling */
.tooltip {pointer-events: none; z-index: var(--z-dropdown);}
.tooltip .tooltip-inner {background-color: var(--color-primary-darker); color: var(--color-white); font-family: var(--font-family); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: 6px 12px; border-radius: var(--radius-default); border: var(--border-glass-strong); box-shadow: 0 10px 25px var(--color-shadow-black-55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.tooltip.bs-tooltip-top .tooltip-arrow::before {border-top-color: var(--color-primary-darker);}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {border-bottom-color: var(--color-primary-darker);}
/* Right Column: Visual Device & Floating Card Badge */
.hero-visual-col {display: flex; align-items: flex-end; justify-content: flex-end; align-self: flex-end;}
.hero-visual-wrapper {position: relative; display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; margin-bottom: -80px; perspective: 1200px;}
.hero-device-container {position: relative; display: inline-block; max-width: var(--hero-device-width); width: var(--hero-device-width); margin-right: var(--hero-device-margin-right); transform-style: preserve-3d; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform;}
.hero-device-img {width: var(--hero-device-width); max-width: 100%; height: auto; display: block; position: relative; z-index: 2;}
/* Floating Card (img20.svg) */
.hero-floating-card {position: absolute; right: -195px; top: 48%; transform: translateY(-50%); z-index: 3; width: var(--hero-card-width); animation: floatCard 4.5s ease-in-out infinite alternate; will-change: transform;}
@keyframes floatCard {
  0% {transform: translateY(-50%) translateX(0);}
  100% {transform: translateY(-54%) translateX(5px);}
}
.hero-card-img {width: var(--hero-card-width); max-width: 100%; height: auto; display: block; filter: drop-shadow(0 15px 35px var(--color-shadow-black-45));}
/* Ambient Glow */
.hero-device-glow {position: absolute; top: 20%; left: 10%; width: 80%; height: 60%; background: radial-gradient(circle, var(--color-accent-blue-22) 0%, transparent 70%); filter: blur(40px); z-index: 1; pointer-events: none;}
/* ==========================================================================
   Component: Shipping Lines & Partners Marquee Ticker
   ========================================================================== */
.partners-marquee-section {position: relative; width: 100%; padding: var(--marquee-padding-y) 0; background-color: var(--marquee-bg); overflow: hidden; z-index: var(--z-content); border-top: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200);}
.partners-marquee-wrapper {position: relative; width: 100%; overflow: hidden; display: flex; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);}
.marquee-track {display: flex; width: max-content; will-change: transform; animation: marqueeScroll var(--marquee-duration) linear infinite;}
.marquee-track:hover {animation-play-state: paused;}
.marquee-group {display: flex; align-items: center; gap: var(--marquee-gap); padding-top: var(--marquee-group-padding-y); padding-bottom: var(--marquee-group-padding-y); padding-right: var(--marquee-gap); flex-shrink: 0;}
.marquee-card {width: var(--marquee-card-size); height: var(--marquee-card-size); background-color: var(--marquee-card-bg); border-radius: var(--marquee-card-radius); border: 1px solid var(--color-gray-300); display: flex; align-items: center; justify-content: center; padding: var(--space-3); box-shadow: 0 2px 10px var(--color-shadow-black-04); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); cursor: pointer; flex-shrink: 0;}
.marquee-card:hover {border-color: var(--color-accent-blue); box-shadow: 0 4px 18px var(--color-accent-blue-20);}
.marquee-img {max-width: 82%; max-height: 52px; width: auto; height: auto; object-fit: contain; display: block; user-select: none; pointer-events: none;}
@keyframes marqueeScroll {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}
/* ==========================================================================
   Component: Stakeholders We Serve Section
   ========================================================================== */
.stakeholders-section {position: relative; background-color: var(--color-white); padding: clamp(60px, 8vw, 60px) 0; z-index: var(--z-content); padding-bottom: 40px;}
.stakeholders-title {font-family: var(--font-family); font-size: clamp(2rem, 3.8vw, 42px); font-weight: var(--font-weight-bold); color: var(--color-near-black); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--space-4);}
.stakeholders-desc {font-family: var(--font-family); font-size: var(--font-size-15-5); font-weight: var(--font-weight-regular); color: var(--color-gray-800); margin-left: auto; margin-right: auto; margin-bottom: var(--space-48); line-height: 1.6;}
/* Left Column: Role Selector Cards */
.stakeholder-role-card {background-color: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); padding: 20px 24px; transition: background-color 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; position: relative; user-select: none;}
.stakeholder-role-card:hover:not(.active) {border-color: var(--color-accent-blue); box-shadow: 0 6px 20px var(--color-accent-blue-08); transform: translateX(4px);}
.stakeholder-role-card.active {background-color: var(--color-near-black); border-color: var(--color-near-black); box-shadow: 0 10px 28px var(--color-near-black-22); transform: translateX(6px);}
.stakeholder-role-icon {font-size: var(--font-size-3xl); line-height: 1; color: var(--color-near-black); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; transition: color 0.3s ease, transform 0.3s ease;}
.stakeholder-role-card.active .stakeholder-role-icon {color: var(--color-white); transform: scale(1.08);}
.stakeholder-role-title {font-family: var(--font-family); font-size: var(--font-size-17); font-weight: var(--font-weight-bold); color: var(--color-near-black); margin-bottom: var(--space-1); line-height: 1.3; transition: color 0.3s ease;}
.stakeholder-role-card.active .stakeholder-role-title {color: var(--color-white);}
.stakeholder-role-desc {font-family: var(--font-family); font-size: var(--font-size-13-5); font-weight: var(--font-weight-regular); color: var(--color-gray-800); margin-bottom: 0; line-height: 1.45; transition: color 0.3s ease;}
.stakeholder-role-card.active .stakeholder-role-desc {color: var(--color-gray-500);}
/* Right Column: Detail Showcase Panel */
.stakeholder-detail-panel {background-color: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 24px); box-shadow: 0 4px 20px var(--color-shadow-black-03); overflow: hidden; position: relative;}
/* Dynamic Content Smooth Fade & Slide Transition */
.stakeholder-detail-content {opacity: 1; transform: translateY(0); transition: opacity 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform;}
.stakeholder-detail-content.is-transitioning {opacity: 0; transform: translateY(12px);}
.stakeholder-badge {background-color: var(--color-gray-100); color: var(--color-gray-800); font-family: var(--font-family); font-size: var(--font-size-13); font-weight: var(--font-weight-medium); padding: 5px 14px; border-radius: var(--radius-default); display: inline-block; margin-bottom: 22px; border: 1px solid var(--color-gray-300);}
.stakeholder-detail-title {font-family: var(--font-family); font-size: clamp(20px, 2.4vw, 26px); font-weight: var(--font-weight-bold); color: var(--color-near-black); margin-bottom: var(--space-6); line-height: 1.35; letter-spacing: -0.015em;}
.stakeholder-detail-list {list-style: none; padding-left: 0; margin-bottom: 0;}
.stakeholder-detail-list li {font-family: var(--font-family); font-size: var(--font-size-15-5); font-weight: var(--font-weight-regular); color: var(--color-gray-600-alt); margin-bottom: var(--space-14); display: flex; align-items: baseline; gap: 10px; line-height: 1.5;}
.stakeholder-detail-list li:last-child {margin-bottom: 0;}
.detail-dot {color: var(--color-gray-400-alt); font-size: var(--font-size-lg); line-height: 1;}
/* Bottom 6 Logistics Services Grid */
.stakeholder-service-card {position: relative; background-color: var(--stakeholder-service-bg); border: 1px solid var(--stakeholder-service-border); border-radius: var(--radius-lg); padding: 16px 24px; box-shadow: 0 2px 8px var(--color-shadow-black-02); transition: var(--transition-smooth);}
.stakeholder-service-card:hover {transform: translateY(-4px); background-color: var(--color-white); border-color: var(--color-accent-blue); box-shadow: 0 10px 25px var(--color-accent-blue-10);}
.service-card-icon {font-size: var(--font-size-3xl); line-height: 1; color: var(--color-near-black); margin-bottom: var(--space-3); transition: color var(--transition-fast);}
.stakeholder-service-card:hover .service-card-icon {color: var(--color-accent-blue);}
.service-card-title {font-family: var(--font-family); font-size: 17.5px; font-weight: var(--font-weight-bold); color: var(--color-near-black); margin-bottom: var(--space-2); line-height: 1.3;}
.service-card-desc {font-family: var(--font-family); font-size: var(--font-size-13-5); font-weight: var(--font-weight-regular); color: var(--color-gray-800); margin-bottom: 0; line-height: 1.45;}
/* ==========================================================================
   Component: Marine Insurance Banner Section (with Smooth Parallax)
   ========================================================================== */
.marine-insurance-section {position: relative; background-color: var(--color-white); padding: 0 0 clamp(40px, 5vw, 60px) 0; z-index: var(--z-content);}
.marine-insurance-banner {position: relative; border-radius: var(--marine-banner-radius, 16px); overflow: hidden; min-height: var(--marine-banner-min-height, 165px); display: flex; align-items: center; justify-content: center; padding: clamp(24px, 3.5vw, 36px) clamp(20px, 3.5vw, 40px); box-shadow: 0 10px 30px var(--color-rgba-15-37-65-10);}
/* Dedicated Smooth Parallax Background Layer */
.marine-insurance-parallax-bg {position: absolute; top: -35%; left: 0; width: 100%; height: 170%; background-image: url('../images/img14.png'); background-size: cover; background-position: center 38%; background-repeat: no-repeat; transform: translate3d(0, 0, 0); will-change: transform; pointer-events: none; z-index: var(--z-bg);}
/* Dark Tint Overlay with Center Spotlight */
.marine-insurance-overlay {position: absolute; inset: 0; background: var(--marine-banner-overlay, linear-gradient(90deg, var(--color-rgba-6-18-32-78) 0%, var(--color-rgba-10-27-48-60) 45%, var(--color-rgba-10-27-48-60) 55%, var(--color-rgba-6-18-32-78) 100%)); pointer-events: none; z-index: var(--z-overlay);}
/* Content Container */
.marine-insurance-content {position: relative; z-index: var(--z-content); display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.5vw, 24px); text-align: left;}
/* Shield Icon Box */
.marine-insurance-icon-box {display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-white); transition: transform 0.35s ease;}
.marine-insurance-banner:hover .marine-insurance-icon-box {transform: scale(1.08);}
.marine-insurance-icon-img {width: clamp(48px, 5.2vw, 62px); height: auto; display: block; object-fit: contain;}
/* Text Block */
.marine-insurance-text {display: flex; flex-direction: column;}
.marine-insurance-title {font-family: var(--font-primary); font-size: clamp(1.65rem, 3.2vw, 38px); font-weight: 700; color: var(--color-white); line-height: 1.18; letter-spacing: -0.015em; margin-bottom: var(--space-1); text-shadow: 0 2px 8px var(--color-shadow-black-45);}
.marine-insurance-subtitle {font-family: var(--font-primary); font-size: clamp(0.95rem, 1.8vw, 19px); font-weight: 400; color: var(--color-white); line-height: 1.35; margin-bottom: 0; opacity: 0.95; text-shadow: 0 1px 4px var(--color-shadow-black-35);}
/* ==========================================================================
   Component: Intelligent Decision-Making Section (Draggable Carousel)
   ========================================================================== */
.intelligent-decision-section {position: relative; background-color: var(--color-white); padding: clamp(35px, 4vw, 48px) 0; z-index: var(--z-content); overflow: hidden;}
.decision-header {margin: 0 auto clamp(16px, 2.4vw, 40px) auto;}
.decision-title {font-family: var(--font-primary); font-size: clamp(2rem, 3.8vw, 42px); font-weight: 700; color: var(--color-near-black); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--space-4);}
.decision-subtitle {font-family: var(--font-primary); font-size: clamp(13px, 1.2vw, 15px); font-weight: 400; color: var(--color-gray-800); line-height: 1.5; margin-bottom: 0;}
/* Carousel Outer Fluid Wrapper */
.decision-carousel-fluid {width: 100%; overflow: hidden; padding-left: 32px !important;}
.decision-carousel-wrapper {position: relative; width: 100%;}
/* Draggable Scroll Track (Exact same symmetric gap before first card and after last card) */
.decision-carousel-track {display: flex; gap: var(--decision-card-gap); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 6px 40px 14px 40px; cursor: grab; user-select: none; scrollbar-width: none;}
.decision-carousel-track::-webkit-scrollbar {display: none;}
.decision-carousel-track.is-dragging {cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none;}
/* Individual Card (Desktop: 2 full cards + 3rd card sticking to screen edge ~50% peek) */
.decision-card {flex: 0 0 clamp(420px, 35.5vw, 520px); min-width: 320px; scroll-snap-align: start; border-radius: var(--decision-card-radius); padding: var(--decision-card-padding); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease; box-sizing: border-box;}
.decision-card:hover {transform: translateY(-5px); box-shadow: none !important;}
.decision-card:last-child {scroll-snap-align: end;}
/* Card 1: Global Trade Simulator (Blue) */
.decision-card-blue {background: radial-gradient(ellipse 85% 65% at 20% 10%, var(--decision-c1-glow) 0%, transparent 70%), linear-gradient(180deg, var(--decision-c1-bg-start) 0%, var(--decision-c1-bg-end) 100%); border: 1px solid var(--decision-c1-border);}
.decision-card-blue:hover {border-color: var(--color-rgba-96-165-250-50); box-shadow: none !important;}
/* Card 2: Compliance Monitor (Green) */
.decision-card-green {background: radial-gradient(ellipse 85% 65% at 20% 10%, var(--decision-c2-glow) 0%, transparent 70%), linear-gradient(180deg, var(--decision-c2-bg-start) 0%, var(--decision-c2-bg-end) 100%); border: 1px solid var(--decision-c2-border);}
.decision-card-green:hover {border-color: var(--color-rgba-52-211-153-50); box-shadow: none !important;}
/* Card 3: ROI Estimation (Red/Burgundy) */
.decision-card-red {background: radial-gradient(ellipse 85% 65% at 20% 10%, var(--decision-c3-glow) 0%, transparent 70%), linear-gradient(180deg, var(--decision-c3-bg-start) 0%, var(--decision-c3-bg-end) 100%); border: 1px solid var(--decision-c3-border);}
.decision-card-red:hover {border-color: var(--color-rgba-248-113-113-50); box-shadow: none !important;}
/* Card 4: Risk Asset Matrix (Charcoal/Neutral) */
.decision-card-neutral {background: radial-gradient(ellipse 85% 65% at 20% 10%, var(--decision-c4-glow) 0%, transparent 70%), linear-gradient(180deg, var(--decision-c4-bg-start) 0%, var(--decision-c4-bg-end) 100%); border: 1px solid var(--decision-c4-border);}
.decision-card-neutral:hover {border-color: var(--color-white-30); box-shadow: none !important;}
/* Pill Badges */
.decision-badge {display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-pill); font-family: var(--font-primary); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: var(--space-4); width: fit-content;}
.decision-badge-blue {background-color: var(--decision-c1-badge-bg); border: 1px solid var(--decision-c1-badge-border); color: var(--decision-c1-badge-text);}
.decision-badge-green {background-color: var(--decision-c2-badge-bg); border: 1px solid var(--decision-c2-badge-border); color: var(--decision-c2-badge-text);}
.decision-badge-red {background-color: var(--decision-c3-badge-bg); border: 1px solid var(--decision-c3-badge-border); color: var(--decision-c3-badge-text);}
.decision-badge-neutral {background-color: var(--decision-c4-badge-bg); border: 1px solid var(--decision-c4-badge-border); color: var(--decision-c4-badge-text);}
/* Card Titles & Subtitles */
.decision-card-title {font-family: var(--font-primary); font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; color: var(--color-white); line-height: 1.25; margin-bottom: var(--space-2); letter-spacing: -0.015em;}
.decision-card-desc {font-family: var(--font-primary); font-size: 12.5px; color: var(--color-slate-400); line-height: 1.45; margin-bottom: var(--space-14); min-height: auto;}
/* Checklist Group */
.decision-checklist {list-style: none; padding: 0; margin: 0 0 16px 0; display: flex; flex-direction: column; gap: 8px;}
.decision-check-item {display: flex; align-items: center; gap: 9px; font-family: var(--font-primary); font-size: 12.5px; color: var(--color-slate-300); line-height: 1.35;}
/* Square Tick Box */
.decision-check-icon-box {width: 18px; height: 18px; border-radius: var(--radius-feature-bullet); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; line-height: 1;}
.decision-card-blue .decision-check-icon-box {background-color: var(--decision-c1-icon-bg); border: 1px solid var(--decision-c1-icon-border); color: var(--decision-c1-icon-color);}
.decision-card-green .decision-check-icon-box {background-color: var(--decision-c2-icon-bg); border: 1px solid var(--decision-c2-icon-border); color: var(--decision-c2-icon-color);}
.decision-card-red .decision-check-icon-box {background-color: var(--decision-c3-icon-bg); border: 1px solid var(--decision-c3-icon-border); color: var(--decision-c3-icon-color);}
.decision-card-neutral .decision-check-icon-box {background-color: var(--decision-c4-icon-bg); border: 1px solid var(--decision-c4-icon-border); color: var(--decision-c4-icon-color);}
/* Bottom Card Action Button */
.decision-card-btn {margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--color-white-25); color: var(--color-white); font-family: var(--font-primary); font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none; transition: var(--transition-fast);}
.decision-card-btn:hover {background: var(--color-white-12); border-color: var(--color-white-60); color: var(--color-white);}
.decision-card-btn i {font-size: var(--font-size-13); transition: transform 0.2s ease;}
.decision-card-btn:hover i {transform: translateX(3px);}
/* Carousel Controls (Prev/Next Arrows) */
.decision-carousel-controls {margin-top: 22px; padding: 0 4px;}
.decision-carousel-arrows {display: flex; align-items: center; gap: 12px; position: relative;}
.decision-arrow-btn {position: relative; width: 48px; height: 48px; border-radius: 50%; background-color: var(--color-white); border: 1.5px solid var(--color-slate-200); color: var(--color-slate-900); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); cursor: pointer; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 14px var(--color-slate-900-08), 0 1px 3px var(--color-shadow-black-04); outline: none;}
.decision-arrow-btn i {transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; line-height: 1;}
/* Subtle Interactive Attention-Grabbing Pulse & Nudge on Next Arrow */
.decision-next-btn {background-color: var(--color-white); border-color: var(--color-slate-300); animation: nextBtnAttention 3.5s ease-in-out infinite;}
@keyframes nextBtnAttention {
  0%, 70%, 100% {transform: scale(1) translateX(0); box-shadow: 0 4px 14px var(--color-slate-900-08), 0 0 0 0 var(--color-shadow-blue-25);}
  78% {transform: scale(1.08) translateX(4px); box-shadow: 0 6px 18px var(--color-shadow-blue-18), 0 0 0 8px var(--color-shadow-blue-16);}
  86% {transform: scale(1.02) translateX(1px); box-shadow: 0 5px 16px var(--color-shadow-blue-12), 0 0 0 12px var(--color-blue-brand-00);}
}
/* Hover States with Directional Micro-Slide */
.decision-arrow-btn:hover:not(:disabled) {background-color: var(--color-slate-900); border-color: var(--color-slate-900); color: var(--color-white); transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 24px var(--color-slate-900-22); animation: none;}
.decision-prev-btn:hover:not(:disabled) i {transform: translateX(-3px);}
.decision-next-btn:hover:not(:disabled) i {transform: translateX(3px);}
.decision-arrow-btn:active:not(:disabled) {transform: translateY(0) scale(0.96); box-shadow: 0 2px 8px var(--color-slate-900-15);}
.decision-arrow-btn:disabled {opacity: 0.35; cursor: not-allowed; animation: none;}
/* ==========================================================================
   Component: Schedule a Demo / CTA Banner (with Smooth Parallax)
   ========================================================================== */
.schedule-demo-section {position: relative; background-color: var(--color-black); overflow: hidden; padding: clamp(var(--section-padding), 11vw, 100px) var(--card-padding); display: flex; align-items: center; justify-content: center;}
/* Dedicated Parallax Background Layer */
.schedule-demo-parallax-bg {position: absolute; top: -30%; left: 0; width: 100%; height: 160%; background-image: url('../images/img11.png'); background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(0.75) contrast(1.05); transform: translate3d(0, 0, 0); will-change: transform; pointer-events: none; z-index: var(--z-bg);}
/* Pure Black & White Overlay */
.schedule-demo-overlay {position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-black-30) 0%, var(--color-black-60) 70%); pointer-events: none; z-index: var(--z-overlay);}
.schedule-demo-container {position: relative; z-index: var(--z-glow); max-width: 780px; margin: 0 auto;}
.schedule-demo-title {font-family: var(--font-family); font-size: clamp(var(--font-size-5xl), 4.2vw, var(--font-size-7xl)); font-weight: var(--font-weight-bold); line-height: 1.2; color: var(--color-white); letter-spacing: -0.02em; margin-bottom: var(--space-4);}
.schedule-demo-desc {font-family: var(--font-family); font-size: clamp(var(--font-size-md), 1.8vw, var(--font-size-lg)); font-weight: var(--font-weight-regular); line-height: 1.6; color: var(--color-gray-400); max-width: 680px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-6);}
/* Schedule Demo Action Buttons — Equal Width & Inline Alignment */
.schedule-demo-actions {display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%;}
.btn-demo-primary, .btn-demo-outline {display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); height: var(--btn-height); min-height: var(--btn-height); min-width: var(--btn-min-width); padding: 0 var(--btn-padding-md); border-radius: var(--btn-radius); font: var(--btn-font); cursor: pointer; outline: none; text-decoration: none; transition: var(--transition-smooth); will-change: transform, box-shadow;}
.btn-demo-primary {background-color: var(--color-white); color: var(--color-primary-dark); border: none;}
.btn-demo-primary i, .btn-demo-primary .hgi-stroke {transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);}
.btn-demo-primary:hover {background-color: var(--color-gray-100); color: var(--color-primary-dark); transform: translateY(-2.5px); box-shadow: var(--shadow-btn-white-hover);}
.btn-demo-primary:hover i, .btn-demo-primary:hover .hgi-stroke {transform: translateX(4px);}
.btn-demo-primary:active {transform: translateY(0);}
.btn-demo-outline {background-color: transparent; color: var(--color-white); border: var(--border-glass-white-60);}
.btn-demo-outline i, .btn-demo-outline .hgi-stroke {transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);}
.btn-demo-outline:hover {background-color: var(--color-white-15); border-color: var(--color-white); color: var(--color-white); transform: translateY(-2.5px); box-shadow: var(--shadow-btn-outline-hover);}
.btn-demo-outline:hover i, .btn-demo-outline:hover .hgi-stroke {transform: translateX(4px);}
.btn-demo-outline:active {transform: translateY(0);}
/* ==========================================================================
   Component: Footer (with img34.png Background & Interactive Hover)
   ========================================================================== */
.site-footer {position: relative; background-color: var(--color-black); background-image: url('../images/img34.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; color: var(--color-gray-400); padding-top: clamp(60px, 6vw, 90px); padding-bottom: var(--space-6); overflow: hidden;}
/* Dedicated Parallax / Blur Ambient Wave Layer */
.footer-bg-blur {position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background-image: url('../images/img34.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; filter: blur(6px) brightness(1.2); opacity: 0.85; pointer-events: none; z-index: var(--z-bg); transform: translate3d(0, 0, 0) scale(1.03); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease; will-change: transform;}
/* Dark Vignette Overlay */
.footer-overlay-gradient {position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, var(--color-black-10) 0%, var(--color-black-60) 100%); pointer-events: none; z-index: var(--z-overlay);}
/* Interactive Cursor Glow Layer */
.site-footer::before {content: ''; position: absolute; inset: 0; background: radial-gradient(650px circle at var(--footer-mouse-x, 50%) var(--footer-mouse-y, 50%), var(--color-accent-blue-20), transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.5s ease; z-index: var(--z-glow);}
.site-footer:hover::before {opacity: 1;}
.site-footer:hover .footer-bg-blur {filter: blur(3px) brightness(1.35); opacity: 1;}
.site-footer .container {position: relative; z-index: var(--z-content);}
.brand-logo-img {transition: var(--transition-smooth), filter 0.3s ease;}
.brand-logo:hover .brand-logo-img {transform: scale(1.03); filter: drop-shadow(var(--shadow-logo-glow));}
.footer-tagline {font: var(--text-body-sm); color: var(--color-gray-500); line-height: 1.6; max-width: 320px;}
.footer-contact-list {list-style: none; padding: 0; margin: var(--space-5) 0 0 0; display: flex; flex-direction: column; gap: var(--space-2);}
.footer-contact-item {display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; padding: 6px 10px; margin-left: -10px; border-radius: var(--radius-sm); transition: var(--transition-smooth);}
.footer-contact-item:hover {color: var(--color-white); background-color: var(--color-accent-blue-12); transform: translateX(4px);}
.footer-contact-icon {color: var(--color-accent-blue); font-size: var(--icon-lg); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-smooth);}
.footer-contact-item:hover .footer-contact-icon {transform: scale(1.2) rotate(-6deg); color: var(--color-accent-green);}
.footer-col-title {font: var(--text-caption); color: var(--color-white); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-4); font-weight: var(--font-weight-bold);}
.footer-links-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3);}
.footer-link {font-size: var(--font-size-sm); color: var(--color-gray-500); text-decoration: none; display: inline-flex; align-items: center; transition: var(--transition-smooth); position: relative;}
.footer-link::before {content: ''; display: inline-block; width: 0; height: 2px; background-color: var(--color-accent-blue); margin-right: 0; border-radius: 2px; transition: var(--transition-smooth); opacity: 0;}
.footer-link:hover {color: var(--color-white); transform: translateX(6px);}
.footer-link:hover::before {width: 8px; margin-right: 6px; opacity: 1;}
/* Active State in Footer Links */
.footer-link.active, .footer-link.active:hover {color: var(--color-white) !important; font-weight: var(--font-weight-semibold); transform: translateX(4px);}
.footer-link.active::before {width: 10px; margin-right: 8px; background-color: var(--color-accent-blue); opacity: 1;}
.footer-divider {border-top: var(--border-glass-light); margin-top: var(--space-7); padding-top: var(--space-6);}
.footer-copyright {font: var(--text-body-xs); font-size: var(--font-size-xs); color: var(--color-gray-600); margin: 0;}
.footer-social-list {display: flex; align-items: center; gap: var(--space-3); list-style: none; padding: 0; margin: 0;}
.footer-social-btn {display: inline-flex; align-items: center; justify-content: center; width: var(--social-btn-size); height: var(--social-btn-size); border-radius: var(--radius-full); background-color: var(--color-white-08); border: var(--border-glass-medium); color: var(--color-white); font-size: var(--icon-md); text-decoration: none; transition: var(--transition-smooth);}
.footer-social-btn:hover {background-color: var(--color-accent-blue); border-color: var(--color-accent-blue); color: var(--color-white); transform: translateY(-4px) scale(1.1); box-shadow: var(--shadow-social-hover);}
/* Visitor Count Badge (12px Font Size) */
.footer-visitor-counter {display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-white-05); border: var(--border-glass-medium); padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-family); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-gray-400); transition: var(--transition-smooth); backdrop-filter: blur(8px);}
.footer-visitor-counter:hover {background: var(--color-white-08); border-color: var(--border-accent-glow); transform: translateY(-2px); box-shadow: var(--shadow-visitor-badge);}
.visitor-dot {width: var(--visitor-dot-size); height: var(--visitor-dot-size); border-radius: var(--radius-full); background-color: var(--color-accent-green); box-shadow: 0 0 8px var(--color-accent-green); display: inline-block; animation: pulseLive 2s infinite;}
@keyframes pulseLive {
  0% {transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-pulse-green);}
  70% {transform: scale(1.1); box-shadow: 0 0 0 6px var(--color-pulse-green-fade);}
  100% {transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-pulse-green-fade);}
}
.visitor-icon {font-size: var(--icon-sm); color: var(--color-accent-blue); line-height: 1;}
.visitor-label {color: var(--color-gray-500); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);}
.visitor-count {color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.5px;}
/* ==========================================================================
   Component: Track Every Container Across The Globe Section
   ========================================================================== */
.globe-tracking-section {position: relative; background-color: var(--color-white); padding: clamp(45px, 5vw, 68px) 0; z-index: var(--z-content); overflow: hidden; padding-top: 20px;}
.globe-tracking-header {margin: 0 auto clamp(24px, 3.5vw, 44px) auto; max-width: 820px;}
.globe-tracking-title {font-family: var(--font-primary); font-size: clamp(1.9rem, 3.2vw, 38px); font-weight: 800; color: var(--color-near-black); letter-spacing: -0.025em; line-height: 1.25; margin-bottom: var(--space-4);}
.globe-tracking-subtitle {font-family: var(--font-primary); font-size: clamp(13px, 1.2vw, 15px); font-weight: 400; color: var(--color-text-subheading); line-height: 1.55; margin-bottom: 0;}
/* Map Wrapper & Banner */
.globe-map-wrapper {position: relative; width: 100%; border-radius: var(--radius-card-md); overflow: hidden; box-shadow: 0 8px 30px var(--color-shadow-black-06); border: 1px solid var(--color-gray-200-alt); margin-bottom: clamp(28px, 3.5vw, 40px); background-color: var(--color-cyan-light);}
.globe-interactive-map {width: 100%; height: clamp(260px, 23vw, 295px); min-height: 235px; background-color: var(--color-cyan-light); background-image: none !important; position: relative; z-index: 1;}
/* Ensure Leaflet attribution or controls don't overlap custom overlay badges */
.globe-interactive-map .leaflet-control-container {position: relative; z-index: 10;}
/* Custom Port & Vessel Marker Styles */
.map-port-marker {display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;}
/* UAE Green Pulse Beacon */
.map-port-uae .port-dot-outer {position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--color-green-emerald); border: 2.5px solid var(--color-white); box-shadow: 0 0 10px var(--color-rgba-16-185-129-60);}
.map-port-uae .port-dot-outer::after {content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border-radius: 50%; border: 2px solid var(--color-green-emerald); animation: portPulse 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;}
@keyframes portPulse {
  0% {transform: scale(0.6); opacity: 1;}
  100% {transform: scale(2.2); opacity: 0;}
}
/* India Blue Pin Marker */
.map-port-india .port-pin-icon {width: 22px; height: 22px; background: var(--color-btn-brand); color: var(--color-white); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-white); box-shadow: 0 4px 10px var(--color-blue-brand-50);}
.map-port-india .port-pin-inner {width: 7px; height: 7px; background: var(--color-white); border-radius: 50%;}
/* Port Labels */
.map-port-label {font-family: var(--font-primary); font-size: var(--font-size-2xs); font-weight: 700; color: var(--color-gray-900); background: var(--color-white-92); padding: 3px 8px; border-radius: var(--radius-md); box-shadow: 0 2px 8px var(--color-shadow-black-12); border: 1px solid var(--color-shadow-black-08); pointer-events: none;}
/* Moving Cargo Ship Badge */
.map-ship-marker {width: var(--size-icon-box); height: var(--size-icon-box); border-radius: 50%; background: var(--color-blue-soft-light); border: 3px solid var(--color-white); box-shadow: 0 4px 16px var(--color-slate-900-35); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease;}
.map-ship-marker:hover {transform: scale(1.15);}
.map-ship-inner {width: 28px; height: 28px; border-radius: 50%; background: var(--color-slate-800); display: flex; align-items: center; justify-content: center; color: var(--color-white);}
.map-ship-inner svg, .map-ship-inner i {font-size: var(--font-size-15); color: var(--color-white);}
/* Animated Maritime Route Path */
.maritime-route-line {stroke: var(--color-blue-900) !important; stroke-dasharray: 7, 7 !important; animation: maritimeDash 25s linear infinite !important;}
@keyframes maritimeDash {
  to {stroke-dashoffset: -1000;}
}
.maritime-glow-line {stroke: var(--color-shadow-blue-25) !important;}
/* Tooltip styling for vessel */
.vessel-tooltip {font-family: var(--font-primary) !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--color-white) !important; background: var(--color-gray-900) !important; border-radius: var(--radius-default) !important; border: none !important; box-shadow: 0 6px 20px var(--color-black-30) !important; padding: 6px 12px !important;}
.vessel-tooltip::before {border-top-color: var(--color-gray-900) !important;}
/* Map Overlays: BoxEye Badge */
.globe-map-badge {position: absolute; top: 18px; left: 20px; background: var(--color-gray-900); color: var(--color-white); border-radius: var(--radius-xl); padding: 10px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 14px var(--color-shadow-black-25); z-index: 2; transition: transform 0.25s ease;}
.globe-map-badge:hover {transform: translateY(-2px);}
.globe-map-badge i {font-size: var(--font-size-2xl); color: var(--color-white); margin-bottom: 3px; line-height: 1;}
.globe-map-badge span {font-family: var(--font-primary); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-white); text-transform: uppercase;}
/* Map Overlays: 50+ Shipping Lines Search Pill */
.globe-map-search-pill {position: absolute; top: 18px; right: 20px; background: var(--color-gray-900); color: var(--color-white); border-radius: var(--radius-lg); padding: 10px 20px; display: inline-flex; align-items: center; gap: 12px; box-shadow: 0 4px 16px var(--color-shadow-black-25); z-index: 2; cursor: pointer; text-decoration: none; text-decoration-line: none; transition: all 0.25s ease;}
.globe-map-search-pill:hover {background: var(--color-slate-800); transform: translateY(-2px);}
.globe-map-search-pill span {font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-white); letter-spacing: -0.01em;}
.globe-map-search-pill i {font-size: var(--font-size-md); color: var(--color-white);}
/* Map Overlays: Start Free Trial Button */
.globe-map-trial-btn {position: absolute; bottom: 18px; left: 20px; background: var(--color-white); color: var(--color-gray-900); border-radius: var(--radius-default); padding: 10px 22px; font-family: var(--font-primary); font-size: var(--font-size-13-5); font-weight: 600; text-decoration: none; box-shadow: 0 4px 16px var(--color-shadow-black-12); z-index: 2; display: inline-flex; align-items: center; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid var(--color-shadow-black-04);}
.globe-map-trial-btn:hover {background: var(--color-gray-900); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-black-20);}
/* 3 Feature Cards */
.globe-feature-card {background-color: var(--color-theme-card-bg); border-radius: var(--radius-card); padding: clamp(22px, 2.2vw, 28px); height: 100%; display: flex; flex-direction: column; border: 1px solid var(--color-theme-border-subtle); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;}
.globe-feature-card:hover {transform: translateY(-4px); box-shadow: 0 14px 30px var(--color-shadow-black-06); border-color: var(--color-gray-300-alt);}
.globe-card-icon {margin-bottom: var(--space-14); display: inline-flex; align-items: center; justify-content: flex-start;}
.globe-card-icon i {font-size: 26px; color: var(--color-gray-900); line-height: 1;}
.globe-card-title {font-family: var(--font-primary); font-size: var(--font-size-xl); font-weight: 700; color: var(--color-gray-900); letter-spacing: -0.015em; margin-bottom: var(--space-3);}
.globe-card-subtitle {font-family: var(--font-primary); font-size: var(--font-size-13); color: var(--color-gray-700-alt); line-height: 1.45; margin-bottom: 16px; min-height: 38px;}
.globe-card-subtitle p {margin-bottom: 2px;}
.globe-card-subtitle p:last-child {margin-bottom: 0;}
.globe-card-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px;}
.globe-list-item {display: flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: 12.8px; color: var(--color-gray-600-alt); line-height: 1.4;}
.globe-bullet {width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-bullet-dot); flex-shrink: 0; display: inline-block;}
/* ==========================================================================
   Component: App Showcase Section (One Powerful App, Everything Made Simple)
   ========================================================================== */
.app-showcase-section {position: relative; background-color: var(--color-theme-dark-bg); background-image: url('../images/img40.png'); background-repeat: no-repeat; background-position: center right; background-size: cover; padding-top: clamp(0px, 6.5vw, 32px); padding-bottom: 0; overflow: hidden; z-index: var(--z-content);}
/* Subtle Animated Ambient Gradient Glows */
.app-showcase-section::before {content: ''; position: absolute; top: -25%; right: -5%; width: 65vw; height: 65vw; max-width: 850px; max-height: 850px; border-radius: var(--radius-full); background: radial-gradient(circle, var(--color-shadow-blue-28) 0%, var(--color-rgba-59-130-246-16) 40%, var(--color-rgba-99-102-241-8) 65%, transparent 80%); filter: blur(80px); pointer-events: none; z-index: 0; animation: ambientGlowDrift 18s ease-in-out infinite alternate; will-change: transform, opacity;}
.app-showcase-section::after {content: ''; position: absolute; bottom: -20%; left: -8%; width: 50vw; height: 50vw; max-width: 650px; max-height: 650px; border-radius: var(--radius-full); background: radial-gradient(circle, var(--color-rgba-6-182-212-16) 0%, var(--color-blue-brand-10) 45%, transparent 75%); filter: blur(85px); pointer-events: none; z-index: 0; animation: ambientGlowSecondary 22s ease-in-out infinite alternate; will-change: transform, opacity;}
@keyframes ambientGlowDrift {
  0% {transform: translate(0, 0) scale(1); opacity: 0.7;}
  50% {transform: translate(-50px, 25px) scale(1.1); opacity: 0.95;}
  100% {transform: translate(35px, -35px) scale(0.94); opacity: 0.65;}
}
@keyframes ambientGlowSecondary {
  0% {transform: translate(0, 0) scale(0.95); opacity: 0.55;}
  50% {transform: translate(45px, -25px) scale(1.08); opacity: 0.85;}
  100% {transform: translate(-25px, 35px) scale(1); opacity: 0.6;}
}
.app-showcase-section>.container {position: relative; z-index: 1;}
.app-showcase-row {position: relative; min-height: 500px; align-items: center;}
.app-showcase-col-text {display: flex; flex-direction: column; justify-content: center; align-self: center; padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 40px);}
.app-showcase-content {width: 100%;}
.app-showcase-title {font-family: var(--font-primary); font-size: clamp(2.1rem, 3.6vw, 48px); font-weight: var(--font-weight-extrabold); color: var(--color-white); letter-spacing: -0.025em; line-height: 1.16; margin-bottom: clamp(16px, 2vw, 24px);}
.app-showcase-desc {font-family: var(--font-primary); font-size: clamp(14.5px, 1.15vw, 16.5px); font-weight: var(--font-weight-regular); color: var(--color-gray-500, var(--color-gray-500)); line-height: 1.62; margin-bottom: clamp(28px, 3vw, 38px); max-width: var(--size-spotlight);}
.app-showcase-actions {display: flex; align-items: center; gap: var(--gap-lg); flex-wrap: wrap;}
/* Primary CTA Button: Get Started Now! */
.btn-app-primary {background-color: var(--color-btn-brand); color: var(--color-white); font-family: var(--font-primary); font-size: var(--font-size-15); font-weight: var(--font-weight-semibold); padding: 12px 24px; border-radius: var(--radius-btn-md); display: inline-flex; align-items: center; gap: var(--gap-sm); text-decoration: none; box-shadow: 0 4px 14px var(--color-shadow-blue-35); transition: var(--transition-bounce); border: 1px solid transparent;}
.btn-app-primary:hover {background-color: var(--color-btn-brand-hover); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 8px 22px var(--color-shadow-blue-45);}
.btn-app-primary i {font-size: var(--font-size-md); transition: transform 0.2s ease;}
.btn-app-primary:hover i {transform: translateX(3px);}
/* App Store & Google Play Icon Buttons */
.btn-app-store {display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-btn-md); overflow: hidden; transition: var(--transition-bounce), filter 0.25s ease; flex-shrink: 0;}
.btn-app-store:hover {transform: translateY(-2px); filter: drop-shadow(0 6px 14px var(--color-black-40));}
.app-store-icon {width: 46px; height: 46px; display: block; object-fit: contain;}
/* Mockup Wrapper */
.app-showcase-col-mockup {display: flex; justify-content: flex-end; align-items: flex-end;}
.app-mockup-wrapper {position: relative; width: 100%; max-width: 582px; display: flex; justify-content: flex-end; align-items: flex-end; bottom: -50px;}
.app-mockup-img {width: 100%; max-width: 582px; height: auto; display: block; filter: drop-shadow(0 20px 40px var(--color-shadow-black-45));}
/* ==========================================================================
   Component: Beyond Tracking to Transformation & Data Privacy Section
   ========================================================================== */
.beyond-tracking-section {position: relative; background-color: var(--color-white); padding: clamp(55px, 6.5vw, 90px) 0; overflow: hidden; z-index: var(--z-content);}
.beyond-header {max-width: 820px; margin: 0 auto clamp(28px, 3.5vw, 44px) auto;}
.beyond-title {font-family: var(--font-primary); font-size: clamp(2rem, 3.4vw, 42px); font-weight: var(--font-weight-extrabold); color: var(--color-text-heading); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: var(--space-4);}
.beyond-subtitle {font-family: var(--font-primary); font-size: clamp(14px, 1.2vw, 15.5px); font-weight: var(--font-weight-regular); color: var(--color-text-muted); line-height: 1.55; margin-bottom: 0;}
/* 3 Feature Cards */
.beyond-feature-card {background-color: var(--color-white); border: 1px solid var(--color-theme-border); border-radius: var(--radius-card); padding: clamp(26px, 2.5vw, 32px); height: 100%; display: flex; flex-direction: column; box-shadow: 0 4px 20px var(--color-shadow-black-02); transition: var(--transition-bounce);}
.beyond-feature-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--color-theme-border-hover);}
.beyond-card-header {display: flex; align-items: center; gap: var(--gap-md); margin-bottom: var(--space-4);}
.beyond-card-icon {display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-heading);}
.beyond-card-icon i {font-size: var(--font-size-2xl); line-height: 1;}
.beyond-card-title {font-family: var(--font-primary); font-size: 19px; font-weight: var(--font-weight-bold); color: var(--color-text-heading); letter-spacing: -0.015em; margin-bottom: 0;}
.beyond-card-desc {font-family: var(--font-primary); font-size: var(--font-size-13-5); font-weight: var(--font-weight-regular); color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--space-18); min-height: 40px;}
.beyond-card-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gap-sm);}
.beyond-list-item {display: flex; align-items: center; gap: var(--gap-sm); font-family: var(--font-primary); font-size: 12.8px; color: var(--color-text-desc); line-height: 1.4;}
.beyond-bullet {width: 4px; height: 4px; border-radius: var(--radius-full); background-color: var(--color-text-light-muted); flex-shrink: 0; display: inline-block;}
/* Statistics Banner */
.beyond-stats-banner {background-color: var(--color-theme-banner-bg); border-radius: var(--radius-banner); margin: clamp(48px, 5.5vw, 76px) 0 clamp(64px, 7.5vw, 100px) 0; padding: clamp(28px, 3.2vw, 36px) 16px; box-shadow: var(--shadow-banner-dark);}
.beyond-stat-col {position: relative;}
.beyond-stat-col:not(:last-child)::after {content: ''; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background-color: var(--color-white-12);}
.beyond-stat-item {text-align: center; padding: 8px 12px;}
.beyond-stat-val {font-family: var(--font-primary); font-size: clamp(30px, 3.2vw, 42px); font-weight: var(--font-weight-extrabold); color: var(--color-white); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--space-2);}
.beyond-stat-label {font-family: var(--font-primary); font-size: clamp(10.5px, 0.9vw, 11.5px); font-weight: var(--font-weight-semibold); color: var(--color-text-light-muted); letter-spacing: 0.06em; text-transform: uppercase;}
/* Part 2: Secured Data & Global Privacy */
.privacy-block {max-width: 820px; margin: 0 auto;}
.privacy-title {font-family: var(--font-primary); font-size: clamp(1.9rem, 3vw, 36px); font-weight: var(--font-weight-extrabold); color: var(--color-text-heading); letter-spacing: -0.02em; line-height: 1.22; margin-bottom: var(--space-4);}
.privacy-subtitle {font-family: var(--font-primary); font-size: clamp(13.5px, 1.15vw, 15px); font-weight: var(--font-weight-regular); color: var(--color-text-muted); line-height: 1.55; margin-bottom: clamp(30px, 3.5vw, 42px);}
/* Badges Row */
.privacy-logos-row {display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4.5vw, 60px); flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 40px);}
.privacy-logo-item {display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-bounce);}
.privacy-logo-item:hover {transform: translateY(-3px) scale(1.04);}
.privacy-badge-img {height: clamp(52px, 5.5vw, 70px); width: auto; max-width: 130px; object-fit: contain; display: block;}
/* Bottom Privacy Action Buttons */
.privacy-pills-row {display: flex; align-items: center; justify-content: center; gap: var(--gap-xl); flex-wrap: wrap;}
.btn-privacy {font-family: var(--font-primary); font-size: var(--font-size-13-5); padding: 11px 26px; border-radius: var(--radius-btn); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: var(--transition-bounce); outline: none;}
.btn-privacy-dark {background-color: var(--color-theme-dark-bg); color: var(--color-white); border: 1.5px solid var(--color-theme-dark-bg); font-weight: var(--font-weight-semibold); box-shadow: 0 4px 14px var(--color-rgba-11-19-32-18);}
.btn-privacy-dark:hover, .btn-privacy-dark:focus-visible {background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 8px 22px var(--color-rgba-11-19-32-28);}
.btn-privacy-outline {background-color: var(--color-white); color: var(--color-text-heading); border: 1.5px solid var(--color-text-heading); font-weight: var(--font-weight-semibold); box-shadow: 0 2px 8px var(--color-shadow-black-04);}
.btn-privacy-outline:hover, .btn-privacy-outline:focus-visible {background-color: var(--color-text-heading); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 6px 18px var(--color-rgba-17-24-39-20);}
.btn-privacy:active {transform: translateY(0);}
/* ==========================================================================
   Page Component: BoxMove Solution Page
   ========================================================================== */
/* 1. Hero Parallax Banner */
.boxmove-hero-section {position: relative; overflow: hidden; min-height: clamp(380px, 42vw, 490px); display: flex; align-items: center; background-color: var(--color-theme-dark-bg, var(--color-dark-surface)); padding: clamp(110px, 12vw, 145px) 0 clamp(50px, 6vw, 75px) 0; z-index: var(--z-base);}
.boxmove-hero-parallax-bg {position: absolute; top: 10%; left: 0; width: 100%; height: 136%; background-image: url('../images/img07.png'); background-size: cover; background-position: center bottom; will-change: transform; z-index: 1;}
.boxyard-parallax-bg {background-image: url('../images/img16.png') !important; background-position: center center !important;}
.boxeye-parallax-bg {background-image: url('../images/img17.png') !important; background-position: center center !important;}
.boxfreight-parallax-bg {background-image: url('../images/img14-freight.png') !important; background-position: 78% 18% !important; background-size: cover !important;}
.boxrail-parallax-bg {background-image: url('../images/img08.png') !important; background-position: center 75% !important; background-size: cover !important;}
.boxwms-parallax-bg {background-image: url('../images/img04.png') !important; background-position: 80% bottom !important; background-size: cover !important;}
.boxmove-hero-overlay {position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-overlay-dark-40) 0%, var(--color-overlay-dark-78) 100%); z-index: 2;}
.boxmove-hero-content {position: relative; z-index: 3; max-width: var(--width-boxmove-content); color: var(--color-white);}
.boxmove-hero-brand {font-size: var(--font-size-hero-title); font-weight: var(--font-weight-extrabold); letter-spacing: -0.5px; line-height: 1.15; color: var(--color-white); margin-bottom: var(--space-2); display: inline-block;}
.boxmove-brand-accent {color: var(--color-accent-green);}
.boxmove-hero-subtitle {font-size: var(--font-size-hero-subtitle); font-weight: var(--font-weight-bold); color: var(--color-white); margin-bottom: var(--space-4); line-height: 1.3; letter-spacing: -0.2px;}
.boxmove-hero-desc {font-size: var(--font-size-hero-desc); line-height: 1.6; color: var(--color-white-88); max-width: 620px; margin-bottom: 0;}
/* 2. Road Freight Management with BI Insights */
.boxmove-insights-section {position: relative; padding: clamp(60px, 7vw, 95px) 0; background-color: var(--color-white); overflow: hidden;}
.boxmove-section-title {font-size: var(--font-size-section-title); font-weight: var(--font-weight-bold); color: var(--color-slate-900); text-align: center; margin-bottom: var(--space-14); letter-spacing: -0.4px; line-height: 1.25;}
.boxmove-section-lead {font-size: var(--font-size-section-lead); color: var(--color-slate-500); text-align: center; max-width: var(--width-boxmove-lead); margin: 0 auto clamp(40px, 5vw, 64px) auto; line-height: 1.6;}
/* 2. Road Freight Management with BI Insights - Pixel-Perfect Matching Screenshot */
.boxmove-insights-content {display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 1024px; width: 100%; gap: clamp(24px, 4vw, 48px);}
.boxmove-insights-features-col {flex: 0 0 var(--width-boxmove-col-lg); max-width: var(--width-boxmove-col-lg);}
.boxmove-insights-feature-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(28px, 3.8vw, 40px);}
.boxmove-insights-feature-item {display: flex; align-items: flex-start; gap: 16px; cursor: default;}
.boxmove-insights-bullet {flex-shrink: 0; width: 17px; height: 17px; background-color: var(--color-gray-900); border-radius: var(--radius-feature-bullet); margin-top: 5px; transition: transform 0.25s ease, background-color 0.25s ease;}
.boxmove-insights-feature-item:hover .boxmove-insights-bullet {transform: scale(1.15); background-color: var(--color-accent-blue);}
.boxmove-insights-feature-text {font-family: 'Inter', sans-serif; font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; color: var(--color-dark-base); line-height: 1.4; letter-spacing: -0.2px; margin: 0; transition: color 0.2s ease;}
.boxmove-insights-feature-item:hover .boxmove-insights-feature-text {color: var(--color-black);}
/* Right Column: Card with Offset Rounded Backdrop */
.boxmove-insights-card-col {flex: 0 0 360px; display: flex; justify-content: flex-start; align-items: center; padding-right: 40px;}
.boxmove-insights-backdrop-wrapper {position: relative; width: var(--size-card-photo-w); height: var(--size-card-photo-h);}
.boxmove-insights-offset-backdrop {position: absolute; top: -27px; bottom: -27px; left: 14px; right: -38px; background-color: var(--color-gray-border); border-radius: 22px; z-index: 1;}
.boxmove-insights-portrait-card {position: relative; z-index: 2; width: var(--size-card-photo-w); height: var(--size-card-photo-h); border-radius: var(--radius-18); overflow: hidden; background-color: var(--color-dark-surface); box-shadow: none; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);}
.boxmove-insights-portrait-card:hover {transform: translateY(-4px);}
.boxmove-insights-portrait-img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* Fallback styles */
.boxmove-feature-list {display: flex; flex-direction: column; gap: clamp(28px, 3.8vw, 40px); list-style: none; padding: 0; margin: 0;}
.boxmove-feature-item {display: flex; align-items: flex-start; gap: 28px; cursor: default;}
.boxmove-bullet-box {flex-shrink: 0; width: 17px; height: 17px; background-color: var(--color-gray-900); border-radius: var(--radius-feature-bullet); margin-top: 5px; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s ease;}
.boxmove-feature-text {font-family: 'Inter', sans-serif; font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; color: var(--color-dark-base); line-height: 1.4; letter-spacing: -0.2px; margin: 0; transition: color 0.25s ease;}
.boxmove-card-backdrop-wrapper {position: relative; width: var(--size-card-photo-w); height: var(--size-card-photo-h); margin: 0 auto;}
.boxmove-offset-backdrop {position: absolute; top: -27px; bottom: -27px; left: 14px; right: -38px; background-color: var(--color-gray-border); border-radius: 22px; z-index: 1;}
.boxmove-portrait-card {position: relative; z-index: 2; width: 100%; height: 100%; border-radius: var(--radius-18); overflow: hidden; box-shadow: none; background-color: var(--color-dark-surface); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);}
.boxmove-portrait-card:hover {transform: translateY(-4px);}
.boxmove-portrait-img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* 3. Eliminate Manual Dependency CTA Banner */
.boxmove-cta-section {position: relative; padding: clamp(20px, 3vw, 40px) 0; background-color: var(--color-white);}
.boxmove-cta-banner {position: relative; border-radius: var(--radius-card-md); overflow: hidden; background-color: var(--color-slate-900); box-shadow: 0 12px 32px var(--color-slate-900-10);}
.boxmove-cta-parallax-bg {position: absolute; top: -35%; left: 0; width: 100%; height: 170%; background-image: url('../images/img05.png'); background-size: cover; background-position: center 35%; background-repeat: no-repeat; will-change: transform; pointer-events: none; z-index: 0;}
.boxmove-cta-overlay {position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-slate-900-90) 0%, var(--color-slate-900-76) 50%, var(--color-slate-900-46) 100%); z-index: 1;}
.boxmove-cta-content {position: relative; z-index: 2; padding: clamp(32px, 3.8vw, 48px) clamp(24px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.boxmove-cta-title {font-size: clamp(22px, 2.5vw, 29px); font-weight: var(--font-weight-bold); color: var(--color-white); margin-bottom: var(--space-2); line-height: 1.25;}
.boxmove-cta-sub {font-size: clamp(13.5px, 1.15vw, 15.5px); color: var(--color-slate-200); margin: 0; max-width: 540px; line-height: 1.5;}
.boxmove-cta-btn {display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-accent-blue, var(--color-accent-blue)); color: var(--color-white) !important; font-size: var(--font-size-15); font-weight: var(--font-weight-semibold); padding: 13px 28px; border-radius: var(--radius-default); border: none; text-decoration: none; box-shadow: 0 4px 14px var(--color-accent-blue-38); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap;}
.boxmove-cta-btn:hover, .boxmove-cta-btn:focus-visible {background-color: var(--color-primary-blue, var(--color-blue-active-alt)); transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-accent-blue-52);}
.boxmove-cta-btn:active {transform: translateY(0);}
/* 4. Unique Features You Would Like - Pixel-Perfect Matching Screenshot */
.boxmove-unique-features-section {position: relative; padding: clamp(45px, 5vw, 60px) 0 clamp(60px, 7vw, 90px) 0; background-color: var(--color-white); overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;}
.boxmove-unique-title {font-family: 'Inter', sans-serif; font-size: clamp(26px, 2.8vw, 32px); font-weight: 700; color: var(--color-slate-900); text-align: center; margin: 0 auto clamp(40px, 5.2vw, 52px) auto; letter-spacing: -0.4px; line-height: 1.25;}
.boxmove-unique-container {display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 1024px; width: 100%;}
.boxmove-unique-phone-wrapper {flex: 0 0 262px; width: 262px; height: 531px; display: flex; justify-content: center; align-items: center; margin-right: 48px;}
.boxmove-unique-phone-img {width: 262px; height: 531px; display: block; filter: none; object-fit: contain; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);}
.boxmove-unique-phone-img:hover {transform: translateY(-4px);}
.boxmove-unique-features-col {flex: 0 0 440px; max-width: 440px;}
.boxmove-unique-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(38px, 4.8vw, 58px);}
.boxmove-unique-item {display: flex; align-items: flex-start; gap: clamp(16px, 3.8vw, 16px); cursor: default;}
.boxmove-unique-bullet {flex-shrink: 0; width: 18px; height: 17px; background-color: var(--color-gray-900); border-radius: var(--radius-feature-bullet); margin-top: 5px; transition: transform 0.25s ease, background-color 0.25s ease;}
.boxmove-unique-item:hover .boxmove-unique-bullet {transform: scale(1.15); background-color: var(--color-accent-blue);}
.boxmove-unique-text {font-family: 'Inter', sans-serif; font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; color: var(--color-dark-base); line-height: 1.4; letter-spacing: -0.2px; margin: 0; transition: color 0.2s ease;}
.boxmove-unique-item:hover .boxmove-unique-text {color: var(--color-black);}
/* Fallback compatibility */
.boxmove-unique-grid {display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 1024px; width: 100%;}
.boxmove-unique-phone-col {flex: 0 0 262px; width: 262px; display: flex; justify-content: center; align-items: center; margin-right: 48px;}
.boxmove-unique-features-section .boxmove-feature-list {gap: clamp(38px, 4.8vw, 58px);}
.boxmove-unique-features-section .boxmove-feature-item {gap: clamp(24px, 3.8vw, 47px);}
.boxmove-unique-features-section .boxmove-phone-img {filter: none; max-width: 262px;}
.boxmove-phone-wrapper {position: relative; max-width: 360px; margin: 0 auto; text-align: center; display: flex; justify-content: center; align-items: center;}
.boxmove-phone-img {width: 100%; max-width: 340px; height: auto; display: block; filter: none; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);}
.boxmove-phone-img:hover {transform: translateY(-4px);}
/* ==========================================================================
   BoxFreight Unique Features Showcase Grid & Cards
   ========================================================================== */
.boxfreight-unique-grid {display: grid; grid-template-columns: var(--width-boxmove-col-sm) 1fr; gap: 24px; align-items: stretch; width: 100%; max-width: var(--width-boxmove-grid); margin: 0 auto;}
.boxfreight-stack-col {display: flex; flex-direction: column; gap: 20px;}
.boxfreight-aiml-card {background-color: var(--color-primary-darker); border-radius: var(--radius-card-md); padding: var(--pad-card-lg); color: var(--color-white); display: flex; flex-direction: column; justify-content: space-between; flex: 1; box-shadow: 0 4px 20px var(--color-shadow-black-08); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxfreight-aiml-card:hover {transform: translateY(-3px); box-shadow: 0 10px 30px var(--color-shadow-black-16);}
.boxfreight-aiml-icon {margin-bottom: var(--space-18); display: inline-block;}
.boxfreight-aiml-title {font-size: var(--font-size-21); font-weight: 700; color: var(--color-white); margin-bottom: var(--space-3); letter-spacing: -0.2px;}
.boxfreight-aiml-desc {font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-slate-300); margin-bottom: var(--space-6);}
.boxfreight-aiml-desc .accent-green {color: var(--color-accent-green); font-weight: 700;}
.boxfreight-aiml-link {font-size: var(--font-size-13); font-weight: 500; color: var(--color-slate-400); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease, gap 0.2s ease;}
.boxfreight-aiml-link:hover {color: var(--color-white); gap: 10px;}
.boxfreight-insurance-card {background-color: var(--color-gray-200); border-radius: var(--radius-card-md); padding: 28px; color: var(--color-gray-900); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 16px var(--color-shadow-black-03); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxfreight-insurance-card:hover {transform: translateY(-3px); box-shadow: 0 8px 24px var(--color-shadow-black-06);}
.boxfreight-insurance-lead {font-size: var(--font-size-15); color: var(--color-gray-600-alt); font-weight: 500; display: block; margin-bottom: var(--space-1);}
.boxfreight-insurance-title {font-size: var(--font-size-xl); font-weight: 700; color: var(--color-gray-900); margin-bottom: var(--space-3);}
.boxfreight-insurance-sub {font-size: var(--font-size-sm); color: var(--color-slate-500); margin-bottom: 22px;}
.boxfreight-insurance-icons {display: flex; align-items: center; justify-content: space-between; max-width: var(--size-phone-w);}
.boxfreight-insurance-icons i {font-size: 25px; color: var(--color-slate-800); transition: transform 0.2s ease, color 0.2s ease;}
.boxfreight-insurance-icons i:hover {transform: scale(1.18); color: var(--color-btn-brand);}
.boxfreight-showcase-card {background-color: var(--color-blue-periwinkle); border-radius: var(--radius-card-lg); padding: var(--pad-showcase-desktop); display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; box-shadow: 0 8px 24px var(--color-shadow-blue-08); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxfreight-showcase-card:hover {transform: translateY(-3px); box-shadow: 0 14px 36px var(--color-shadow-blue-14);}
.boxfreight-showcase-header {text-align: center; margin-bottom: var(--space-28);}
.boxfreight-showcase-title {font-size: var(--font-size-card-title-lg); font-weight: 700; color: var(--color-gray-900); line-height: 1.25; margin: 0;}
.boxfreight-dashboard-wrapper {width: 100%; border-top-left-radius: var(--radius-card-sm); border-top-right-radius: var(--radius-card-sm); overflow: hidden; box-shadow: 0 -4px 20px var(--color-shadow-black-05); line-height: 0;}
.boxfreight-dashboard-img {width: 100%; height: auto; display: block;}
/* ==========================================================================
   BoxRail Unique Features Showcase Grid & Cards
   ========================================================================== */
.boxrail-unique-grid {display: grid; grid-template-columns: var(--width-boxmove-col-sm) 1fr; gap: 24px; align-items: stretch; width: 100%; max-width: var(--width-boxmove-grid); margin: 0 auto;}
.boxrail-stack-col {display: flex; flex-direction: column; gap: 20px;}
.boxrail-plug-card {background-color: var(--color-primary-darker); border-radius: var(--radius-card-md); padding: var(--pad-card-xl); color: var(--color-white); display: flex; flex-direction: column; justify-content: flex-start; flex: 1; box-shadow: 0 4px 20px var(--color-shadow-black-08); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxrail-plug-card:hover {transform: translateY(-3px); box-shadow: 0 10px 30px var(--color-shadow-black-16);}
.boxrail-plug-icon {font-size: var(--font-size-icon-display); color: var(--color-white); margin-bottom: var(--space-20); display: inline-block; line-height: 1;}
.boxrail-plug-text {font-size: var(--font-size-card-text); font-weight: 500; line-height: 1.4; color: var(--color-white); margin: 0;}
.boxrail-plug-text .accent-green {color: var(--color-accent-green); font-weight: 700;}
.boxrail-erp-card {background-color: var(--color-gray-200); border-radius: var(--radius-card-md); padding: var(--pad-card-lg); color: var(--color-gray-900); display: flex; flex-direction: column; justify-content: space-between; flex: 1; box-shadow: 0 4px 16px var(--color-shadow-black-03); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxrail-erp-card:hover {transform: translateY(-3px); box-shadow: 0 8px 24px var(--color-shadow-black-06);}
.boxrail-erp-title {font-size: var(--font-size-card-title-md); font-weight: 700; color: var(--color-gray-900); line-height: 1.25; margin-bottom: var(--space-6);}
.boxrail-erp-title-sub {font-weight: 400; color: var(--color-gray-700-alt); display: block;}
.boxrail-erp-desc {font-size: clamp(15px, 1.25vw, 17px); color: var(--color-gray-700-alt); line-height: 1.45; margin: 0;}
.boxrail-showcase-card {background-color: var(--color-blue-periwinkle); border-radius: var(--radius-card-lg); padding: var(--pad-showcase-desktop); display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; box-shadow: 0 8px 24px var(--color-shadow-blue-08); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxrail-showcase-card:hover {transform: translateY(-3px); box-shadow: 0 14px 36px var(--color-shadow-blue-14);}
.boxrail-showcase-header {text-align: center; margin-bottom: var(--space-28);}
.boxrail-showcase-title {font-size: var(--font-size-card-title-lg); font-weight: 700; color: var(--color-gray-900); line-height: 1.25; margin: 0;}
.boxrail-dashboard-wrapper {width: 100%; border-top-left-radius: var(--radius-card-sm); border-top-right-radius: var(--radius-card-sm); overflow: hidden; box-shadow: 0 -4px 20px var(--color-shadow-black-06); line-height: 0;}
.boxrail-dashboard-img {width: 100%; height: auto; display: block;}
.boxrail-page .boxmove-cta-btn {background-color: var(--color-amber-gold); color: var(--color-gray-900) !important; font-weight: 700; box-shadow: 0 4px 14px var(--color-shadow-amber-38);}
.boxrail-page .boxmove-cta-btn:hover, .boxrail-page .boxmove-cta-btn:focus-visible {background-color: var(--color-amber-gold-hover); box-shadow: 0 8px 24px var(--color-shadow-amber-52);}
/* ==========================================================================
   BoxWMS Unique Features Showcase Grid & Cards
   ========================================================================== */
.boxwms-unique-grid {display: grid; grid-template-columns: var(--width-boxmove-col-sm) 1fr; gap: 24px; align-items: stretch; width: 100%; max-width: var(--width-boxmove-grid); margin: 0 auto;}
.boxwms-stack-col {display: flex; flex-direction: column; gap: 20px;}
.boxwms-importer-card {background-color: var(--color-primary-darker); border-radius: var(--radius-card-md); padding: var(--pad-card-xl); color: var(--color-white); display: flex; flex-direction: column; justify-content: space-between; flex: 1; box-shadow: 0 4px 20px var(--color-shadow-black-08); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxwms-importer-card:hover {transform: translateY(-3px); box-shadow: 0 10px 30px var(--color-shadow-black-16);}
.boxwms-globe-icon {font-size: var(--font-size-icon-display); color: var(--color-white); margin-bottom: var(--space-20); display: inline-block; line-height: 1;}
.boxwms-importer-text {font-size: var(--font-size-card-text); line-height: 1.4; color: var(--color-slate-200); margin-bottom: var(--space-4);}
.boxwms-importer-text strong, .boxwms-exporter-text strong {color: var(--color-white); font-weight: 700;}
.boxwms-exporter-text {font-size: var(--font-size-card-text); line-height: 1.4; color: var(--color-slate-200); margin-bottom: 22px;}
.boxwms-demo-link {font-size: var(--font-size-13); font-weight: 600; color: var(--color-accent-green); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s ease, gap 0.2s ease;}
.boxwms-demo-link:hover {color: var(--color-green-light); gap: 8px;}
.boxwms-client-card {background-color: var(--color-gray-200); border-radius: var(--radius-card-md); padding: var(--pad-card-lg); color: var(--color-gray-900); display: flex; flex-direction: column; justify-content: space-between; flex: 1; box-shadow: 0 4px 16px var(--color-shadow-black-03); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxwms-client-card:hover {transform: translateY(-3px); box-shadow: 0 8px 24px var(--color-shadow-black-06);}
.boxwms-feature-heading {font-size: var(--font-size-lg); font-weight: 700; color: var(--color-gray-900); margin-bottom: var(--space-1); line-height: 1.3;}
.boxwms-feature-sub {font-size: var(--font-size-15); color: var(--color-gray-600-alt); line-height: 1.45; margin-bottom: var(--space-20);}
.boxwms-showcase-card {background-color: var(--color-blue-periwinkle); border-radius: var(--radius-card-lg); padding: var(--pad-showcase-desktop); display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; box-shadow: 0 8px 24px var(--color-shadow-blue-08); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.boxwms-showcase-card:hover {transform: translateY(-3px); box-shadow: 0 14px 36px var(--color-shadow-blue-14);}
.boxwms-showcase-header {text-align: center; margin-bottom: var(--space-28);}
.boxwms-showcase-title {font-size: var(--font-size-card-title-lg); font-weight: 700; color: var(--color-gray-900); line-height: 1.25; margin: 0;}
.boxwms-dashboard-wrapper {width: 100%; border-top-left-radius: var(--radius-card-sm); border-top-right-radius: var(--radius-card-sm); overflow: hidden; box-shadow: 0 -4px 20px var(--color-shadow-black-06); line-height: 0;}
.boxwms-dashboard-img {width: 100%; height: auto; display: block;}
.boxwms-page .boxmove-cta-btn {background-color: var(--color-amber-gold); color: var(--color-gray-900) !important; font-weight: 700; box-shadow: 0 4px 14px var(--color-shadow-amber-38);}
.boxwms-page .boxmove-cta-btn:hover, .boxwms-page .boxmove-cta-btn:focus-visible {background-color: var(--color-amber-gold-hover); box-shadow: 0 8px 24px var(--color-shadow-amber-52);}
/* ==========================================================================
   Page Component: Contact Us Page
   ========================================================================== */
.contact-hero-parallax-bg {background-image: url('../images/img06.png') !important; background-position: center 30% !important; background-size: cover !important;}
.contact-section {position: relative; background-color: var(--color-white); padding: clamp(54px, 6vw, 84px) 0 clamp(40px, 5vw, 64px) 0; z-index: var(--z-content);}
.contact-form-container {max-width: 840px; margin: 0 auto; width: 100%;}
.contact-form-title {font-family: var(--font-family); font-size: clamp(24px, 3.2vw, 36px); font-weight: var(--font-weight-bold); color: var(--color-near-black); text-align: center; margin-bottom: clamp(36px, 4.5vw, 52px); letter-spacing: -0.02em; line-height: 1.25;}
.contact-field-group {margin-bottom: 20px;}
.contact-label {font-family: var(--font-family); font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-slate-800); margin-bottom: 7px; display: block;}
.contact-label .req {color: var(--color-red-500); margin-left: 2px;}
.contact-input, .contact-textarea {width: 100%; background-color: var(--color-gray-200); border: 1.5px solid transparent; border-radius: var(--radius-default); padding: 12px 16px; font-family: var(--font-family); font-size: 14.5px; color: var(--color-near-black); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; outline: none;}
.contact-input:focus, .contact-textarea:focus {background-color: var(--color-white); border-color: var(--color-accent-blue); box-shadow: 0 0 0 3px var(--color-accent-blue-15);}
.contact-textarea {resize: vertical; min-height: 120px;}
.contact-actions-row {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; flex-wrap: wrap;}
.btn-contact-submit {background-color: var(--color-primary-dark); color: var(--color-white); font-family: var(--font-family); font-size: 15px; font-weight: var(--font-weight-semibold); border: none; border-radius: 6px; padding: 11px 36px; cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; outline: none; display: inline-flex; align-items: center; justify-content: center;}
.btn-contact-submit:hover {background-color: var(--color-primary-darker); transform: translateY(-2px); box-shadow: 0 6px 18px var(--color-rgba-15-37-65-10);}
.btn-contact-submit:active {transform: translateY(0);}
.contact-help-text {font-family: var(--font-family); font-size: 15.5px; color: var(--color-gray-800); margin: 0; display: inline-flex; align-items: center; gap: 6px;}
.contact-help-text a {color: var(--color-near-black); font-weight: 700; text-decoration: none; transition: color 0.2s ease;}
.contact-help-text a:hover {color: var(--color-accent-blue);}
.contact-form-alert {border-radius: 8px; padding: 14px 20px; margin-bottom: 24px; font-family: var(--font-family); font-size: 14px; font-weight: 500; display: none; line-height: 1.5; box-shadow: 0 4px 14px var(--color-shadow-black-05);}
.alert-contact-success {background-color: var(--color-green-50); border: 1.5px solid var(--color-accent-green); color: var(--color-green-800);}
.alert-contact-danger {background-color: var(--color-red-50); border: 1.5px solid var(--color-red-500); color: var(--color-red-800);}
.btn-contact-submit:disabled {opacity: 0.7; cursor: not-allowed; transform: none;}
/* ==========================================================================
   Component: Offices Network Section
   ========================================================================== */
.contact-offices-section {position: relative; background-color: var(--color-white); padding: clamp(40px, 5vw, 60px) 0 clamp(60px, 8vw, 110px) 0; z-index: var(--z-content);}
.contact-offices-title {font-family: var(--font-family); font-size: clamp(26px, 3.2vw, 38px); font-weight: var(--font-weight-bold); color: var(--color-near-black); text-align: center; margin-bottom: 6px; letter-spacing: -0.02em; line-height: 1.25;}
.contact-offices-sub {font-family: var(--font-family); font-size: 16px; color: var(--color-gray-800); text-align: center; margin-bottom: clamp(36px, 4.5vw, 56px);}
.contact-map-wrapper {position: relative; max-width: 980px; margin: 0 auto; width: 100%;}
.contact-map-img {width: 100%; height: auto; display: block;}
.office-pin {position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.office-pin-dot {width: 7px; height: 7px; background-color: var(--color-accent-green); border: 1.5px solid var(--color-white); border-radius: 50%; display: block; position: relative; z-index: 7; box-shadow: 0 0 6px var(--color-accent-green-90);}
.office-ripple {position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin-top: -11px; margin-left: -11px; border-radius: 50%; border: 1.5px solid var(--color-accent-green); background: radial-gradient(circle, var(--color-accent-green-28) 0%, var(--color-accent-green-08) 55%, transparent 75%); pointer-events: none; opacity: 0; will-change: transform, opacity;}
@keyframes rippleWaveSmall {
  0% {transform: scale(0.35); opacity: 0.95; border-color: var(--color-accent-green-95);}
  50% {opacity: 0.6; border-color: var(--color-accent-green-75);}
  100% {transform: scale(1.65); opacity: 0; border-color: var(--color-pulse-green-fade);}
}
.pin-dubai {top: 51.95%; left:61.10%;}
.pin-dubai .ripple-1 {animation: rippleWaveSmall 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 0s;}
.pin-dubai .ripple-2 {animation: rippleWaveSmall 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 0.75s;}
.pin-dubai .ripple-3 {animation: rippleWaveSmall 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 1.5s;}
.pin-navi-mumbai {top: 56.3%; left:68.13%;}
.pin-navi-mumbai .ripple-1 {animation: rippleWaveSmall 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 0.5s;}
.pin-navi-mumbai .ripple-2 {animation: rippleWaveSmall 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 1.4s;}
.pin-navi-mumbai .ripple-3 {animation: rippleWaveSmall 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 2.2s;}
.pin-pune {top: 67.5%; left: 67.2%;}
.pin-pune .ripple-1 {animation: rippleWaveSmall 3s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 1s;}
.pin-pune .ripple-2 {animation: rippleWaveSmall 3s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 2s;}
.pin-pune .ripple-3 {animation: rippleWaveSmall 3s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 3s;}
.office-card {position: absolute; background-color: var(--color-primary-darker); border-radius: 10px; padding: 12px 16px; color: var(--color-white); box-shadow: 0 8px 24px var(--color-shadow-black-22); z-index: 6; min-width: 175px; max-width: 215px; transition: transform 0.25s ease, box-shadow 0.25s ease;}
.office-card:hover {transform: translateY(-3px); box-shadow: 0 12px 30px var(--color-shadow-black-32);}
.office-card-title {font-family: var(--font-family); font-size: 12.5px; font-weight: 700; color: var(--color-accent-green); margin: 0 0 4px 0; line-height: 1.3;}
.office-card-address {font-family: var(--font-family); font-size: 10.5px; line-height: 1.4; color: var(--color-slate-300); margin: 0;}
.card-dubai {top: 35%; left: 38%;}
.card-navi-mumbai {top: 44%; left: 70%;}
.card-pune {top: 61%; left: 70%;}
/* ==========================================================================
   Component: Privacy Policy Section & Accordion
   ========================================================================== */
.privacy-hero-parallax-bg {background-image: url('../images/img05.png') !important; background-position: center 30% !important; background-size: cover !important;}
.privacy-section {position: relative; background-color: var(--color-white); padding: clamp(48px, 6vw, 84px) 0 clamp(60px, 8vw, 110px) 0; z-index: var(--z-content);}
.privacy-content-container {margin: 0 auto; width: 100%;}
.privacy-intro-card {background-color: var(--color-slate-50); border: 1px solid var(--color-slate-200); border-radius: 16px; padding: clamp(24px, 3.5vw, 36px); margin-bottom: clamp(28px, 4vw, 40px); box-shadow: 0 4px 20px var(--color-navy-subtle-04);}
.privacy-intro-badge {display: inline-flex; align-items: center; background-color: var(--color-accent-green-18); color: var(--color-emerald-700); font-family: var(--font-family); font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 6px; margin-bottom: 14px;}
.privacy-intro-title {font-family: var(--font-family); font-size: clamp(22px, 2.8vw, 30px); font-weight: var(--font-weight-bold); color: var(--color-near-black); margin-bottom: 12px; letter-spacing: -0.015em; line-height: 1.3;}
.privacy-intro-text {font-family: var(--font-family); font-size: 15px; line-height: 1.75; color: var(--color-slate-600); margin: 0;}
.privacy-accordion-wrapper {width: 100%;}
.custom-privacy-accordion .privacy-acc-item {background-color: var(--color-white); border: 1px solid var(--color-slate-200); border-radius: 12px !important; margin-bottom: 14px; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease;}
.custom-privacy-accordion .privacy-acc-item:hover {border-color: var(--color-slate-300); box-shadow: 0 6px 20px var(--color-navy-subtle-05);}
.privacy-acc-btn {background-color: var(--color-white); padding: 18px 22px; font-family: var(--font-family); font-size: clamp(15px, 1.8vw, 16.5px); font-weight: 600; color: var(--color-near-black); border: none; box-shadow: none !important; display: flex; align-items: center; gap: 12px; transition: background-color 0.2s ease, color 0.2s ease;}
.privacy-acc-btn:not(.collapsed) {background-color: var(--color-slate-50); color: var(--color-primary-dark); border-bottom: 1px solid var(--color-slate-200);}
.privacy-acc-btn::after {background-size: 14px 14px; width: 14px; height: 14px; transition: transform 0.25s ease;}
.privacy-acc-icon {width: 36px; height: 36px; border-radius: 8px; background-color: var(--color-accent-green-16); color: var(--color-emerald-700); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; font-weight: normal !important;}
.privacy-acc-icon i {font-weight: normal !important; font-style: normal; -webkit-text-stroke: 0;}
.privacy-acc-title {flex-grow: 1; text-align: left; line-height: 1.35;}
.privacy-acc-body {padding: clamp(20px, 3vw, 28px); font-family: var(--font-family); font-size: 15px; line-height: 1.75; color: var(--color-slate-700);}
.privacy-acc-body p {margin-bottom: 14px;}
.privacy-acc-body p:last-child {margin-bottom: 0;}
.privacy-notice-box {background-color: var(--color-slate-50); border-left: 4px solid var(--color-primary-dark); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 16px 0 0 0; display: flex; gap: 12px; align-items: flex-start;}
.privacy-notice-icon {font-size: 20px; color: var(--color-primary-dark); flex-shrink: 0; margin-top: 2px;}
.privacy-notice-text {margin: 0; font-size: 14px; color: var(--color-slate-600); line-height: 1.6;}
.privacy-body-subtitle {font-family: var(--font-family); font-size: 16px; font-weight: 700; color: var(--color-near-black); margin: 20px 0 10px 0;}
.privacy-bullet-list {padding-left: 20px; margin: 10px 0 16px 0;}
.privacy-bullet-list li {margin-bottom: 6px; color: var(--color-slate-700); font-size: 14.5px;}
.privacy-gdpr-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px;}
.privacy-gdpr-card {background-color: var(--color-slate-50); border: 1px solid var(--color-slate-200); border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start;}
.privacy-gdpr-num {width: 26px; height: 26px; border-radius: 50%; background-color: var(--color-primary-dark); color: var(--color-accent-green); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.privacy-gdpr-title {font-family: var(--font-family); font-size: 14px; font-weight: 700; color: var(--color-near-black); margin: 0 0 4px 0;}
.privacy-gdpr-desc {font-family: var(--font-family); font-size: 13px; color: var(--color-slate-500); line-height: 1.5; margin: 0;}
.privacy-inline-link {color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; transition: color 0.2s ease;}
.privacy-inline-link:hover {color: var(--color-accent-green);}
.case-studies-section {padding: clamp(60px, 7vw, 100px) 0; background-color: var(--color-slate-50); position: relative; padding-bottom: 20px;}
.case-section-header {max-width: 700px; margin: 0 auto clamp(36px, 5vw, 56px) auto;}
.case-header-badge {display: inline-flex; align-items: center; background-color: var(--color-accent-green-18); color: var(--color-emerald-700); font-family: var(--font-family); font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;}
.case-section-title {font-family: var(--font-family); font-size: clamp(28px, 3.5vw, 42px); font-weight: var(--font-weight-bold); color: var(--color-near-black); line-height: 1.25; margin-bottom: 14px; letter-spacing: -0.02em;}
.case-section-subtitle {font-family: var(--font-family); font-size: clamp(15px, 1.8vw, 17px); color: var(--color-slate-500); line-height: 1.6; margin: 0 auto;}
.case-card {background-color: var(--color-white); border: 1px solid var(--color-slate-200); border-radius: 18px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease; box-shadow: 0 4px 20px var(--color-theme-banner-04);}
.case-card:hover {transform: translateY(-8px); box-shadow: 0 16px 36px var(--color-theme-banner-12); border-color: var(--color-accent-green-60);}
.case-card-media {position: relative; width: 100%; height: 230px; overflow: hidden; background-color: var(--color-primary-dark);}
.case-card-img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease;}
.case-card:hover .case-card-img {transform: scale(1.06);}
.case-card-overlay {position: absolute; inset: 0; background: linear-gradient(to top, var(--color-theme-banner-75) 0%, var(--color-theme-banner-15) 60%, transparent 100%); pointer-events: none;}
.case-category-tag {position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; background-color: var(--color-theme-banner-85); backdrop-filter: blur(8px); color: var(--color-white); font-family: var(--font-family); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--color-white-15);}
.case-card-body {padding: 24px; display: flex; flex-direction: column; flex-grow: 1;}
.case-client-row {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;}
.case-client-name {font-family: var(--font-family); font-size: 14px; font-weight: 700; color: var(--color-emerald-700); text-transform: uppercase; letter-spacing: 0.04em; margin: 0;}
.case-stat-badge {display: inline-flex; align-items: center; background-color: var(--color-accent-green-16); color: var(--color-emerald-700); font-family: var(--font-family); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px; white-space: nowrap;}
.case-title {font-family: var(--font-family); font-size: clamp(17px, 2vw, 19px); font-weight: 700; color: var(--color-near-black); line-height: 1.35; margin-bottom: 10px;}
.case-desc {font-family: var(--font-family); font-size: 14px; line-height: 1.6; color: var(--color-slate-600); margin-bottom: 16px; flex-grow: 1;}
.case-highlights-list {background-color: var(--color-slate-50); border: 1px solid var(--color-slate-border-light); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px;}
.case-highlight-item {display: flex; align-items: center; gap: 8px; font-family: var(--font-family); font-size: 13px; color: var(--color-slate-700); font-weight: 500;}
.case-highlight-item i {color: var(--color-emerald-700); font-size: 16px; flex-shrink: 0; font-weight: normal !important;}
.case-card-footer {margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-slate-100);}
.case-link-btn {display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-family); font-size: 14px; font-weight: 600; color: var(--color-primary-dark); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease;}
.case-link-btn i {font-size: 16px; transition: transform 0.25s ease; font-weight: normal !important;}
.case-card:hover .case-link-btn {color: var(--color-emerald-700);}
.case-card:hover .case-link-btn i {transform: translateX(4px);}
.case-metrics-section {padding: 0 0 clamp(60px, 7vw, 90px) 0; background-color: var(--color-slate-50);}
.case-category-tag .hgi-stroke {font-weight: normal;}
.case-pdf-modal .modal-dialog {max-width: 1160px; margin: 1.5rem auto; width: 94vw;}
.case-pdf-modal .modal-content {background-color: var(--color-slate-900); border: 1px solid var(--color-white-12); border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px var(--color-black-70); display: flex; flex-direction: column;}
.case-pdf-modal-header {display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background-color: var(--color-slate-800); border-bottom: 1px solid var(--color-white-10); flex-wrap: wrap; gap: 12px;}
.case-pdf-header-left {display: flex; align-items: center; min-width: 220px;}
.case-pdf-modal-title {font-family: var(--font-family); font-size: 15px; font-weight: 700; color: var(--color-white); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px;}
.case-pdf-toolbar {display: flex; align-items: center; gap: 14px; background-color: var(--color-slate-900-60); padding: 4px 12px; border-radius: 8px; border: 1px solid var(--color-white-08);}
.case-pdf-page-controls, .case-pdf-zoom-controls {display: flex; align-items: center; gap: 8px;}
.case-pdf-tool-btn {width: 28px; height: 28px; border-radius: 6px; background-color: var(--color-white-08); border: 1px solid var(--color-white-12); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all 0.15s ease; padding: 0;}
.case-pdf-tool-btn:hover {background-color: var(--color-accent-green-20); color: var(--color-accent-green); border-color: var(--color-accent-green-40);}
.case-pdf-page-info, .case-pdf-zoom-level {font-family: var(--font-family); font-size: 12.5px; color: var(--color-slate-300); font-weight: 500; min-width: 60px; text-align: center;}
.case-pdf-modal-actions {display: flex; align-items: center; gap: 10px;}
.case-pdf-download-btn {display: inline-flex; align-items: center; background-color: var(--color-accent-green-15); color: var(--color-accent-green); font-family: var(--font-family); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 8px; text-decoration: none; border: 1px solid var(--color-accent-green-30); transition: all 0.2s ease;}
.case-pdf-download-btn:hover {background-color: var(--color-accent-green); color: var(--color-primary-dark);}
.case-pdf-close-btn {width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-white-10); border: 1px solid var(--color-white-15); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: all 0.2s ease; padding: 0;}
.case-pdf-close-btn:hover {background-color: var(--color-red-500); border-color: var(--color-red-500); color: var(--color-white); transform: rotate(90deg);}
.case-pdf-modal-body {position: relative; width: 100%; height: 80vh; min-height: 540px; background-color: var(--color-dark-navy-card); padding: 0; overflow: hidden; display: flex; flex-direction: column;}
.case-pdf-loading {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: var(--color-dark-navy-92); z-index: 10;}
.case-pdf-spinner-wrapper {text-align: center;}
.case-pdf-loading-text {font-family: var(--font-family); font-size: 13.5px; color: var(--color-slate-400);}
.case-pdf-viewer-canvas-wrap {width: 100%; height: 100%; overflow: auto; padding: 24px; display: flex; justify-content: center; align-items: flex-start;}
.case-pdf-canvas {box-shadow: 0 10px 30px var(--color-black-60); border-radius: 4px; background-color: var(--color-white); max-width: none;}
.faq-page {background-color: var(--color-slate-50);}
.faq-main-section {background-color: var(--color-slate-50); padding: clamp(40px, 6vw, 80px) 0;}
.faq-items-container {margin: 0 auto;}
.faq-section-group {margin-bottom: 36px;}
.faq-section-heading {display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 10px;}
.faq-section-badge {display: inline-flex; align-items: center; background: var(--color-accent-green-15); color: var(--color-emerald-700); font-family: var(--font-family); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 12px; border-radius: 30px; border: 1px solid var(--color-accent-green-30);}
.faq-section-title {font-family: var(--font-family); font-size: 20px; font-weight: 800; color: var(--color-primary-dark); margin: 0;}
.faq-accordion-item {background: var(--color-white); border: 1.5px solid var(--color-slate-200); border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.25s ease; box-shadow: 0 2px 8px var(--color-theme-banner-03);}
.faq-accordion-item:hover {border-color: var(--color-slate-300); box-shadow: 0 6px 18px var(--color-theme-banner-06);}
.faq-accordion-item.active {border-color: var(--color-accent-green); box-shadow: 0 8px 24px var(--color-accent-green-15);}
.faq-accordion-header {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--color-white); border: none; cursor: pointer; text-align: left; gap: 14px; transition: background-color 0.2s ease;}
.faq-accordion-item.active .faq-accordion-header {background-color: var(--color-slate-50); border-bottom: 1px solid var(--color-slate-100);}
.faq-item-number {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background-color: var(--color-slate-100); color: var(--color-slate-500); font-family: var(--font-family); font-size: 12px; font-weight: 700; flex-shrink: 0; transition: all 0.2s ease;}
.faq-accordion-item.active .faq-item-number {background-color: var(--color-accent-green); color: var(--color-primary-dark);}
.faq-item-title {font-family: var(--font-family); font-size: 15.5px; font-weight: 700; color: var(--color-primary-dark); line-height: 1.45; flex: 1;}
.faq-chevron-wrap {width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-slate-100); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s ease;}
.faq-chevron {font-size: 16px; color: var(--color-slate-500); transition: transform 0.25s ease; font-weight: normal !important;}
.faq-accordion-item.active .faq-chevron-wrap {background-color: var(--color-accent-green-20);}
.faq-accordion-item.active .faq-chevron {transform: rotate(180deg); color: var(--color-emerald-700);}
.faq-accordion-collapse {display: none;}
.faq-accordion-body {padding: 20px 24px; font-family: var(--font-family); font-size: 14.5px; line-height: 1.75; color: var(--color-slate-600); background-color: var(--color-white);}
.faq-accordion-body p:last-child {margin-bottom: 0;}
.faq-bullet-list {padding-left: 20px; margin-top: 10px; margin-bottom: 0;}
.faq-bullet-list li {margin-bottom: 6px; line-height: 1.6; font-size: 14px; color: var(--color-slate-600);}
.faq-bullet-list li strong {color: var(--color-primary-dark); font-weight: 600;}
.faq-help-card {background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-dark-navy-modal) 100%); border-radius: 20px; padding: clamp(28px, 4vw, 40px); color: var(--color-white); box-shadow: 0 20px 40px -10px var(--color-theme-banner-40); border: 1px solid var(--color-white-10); margin: 40px auto 0;}
.faq-help-badge {display: inline-flex; align-items: center; background: var(--color-accent-green-15); color: var(--color-accent-green); font-family: var(--font-family); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 12px; border-radius: 30px; border: 1px solid var(--color-accent-green-30);}
.faq-help-title {font-family: var(--font-family); font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--color-white); margin-bottom: 8px;}
.faq-help-desc {font-family: var(--font-family); font-size: 14.5px; color: var(--color-slate-300); line-height: 1.6;}
.faq-btn-primary {background-color: var(--color-accent-green); color: var(--color-primary-dark) !important; font-family: var(--font-family); font-size: 14.5px; font-weight: 700; padding: 13px 24px; border-radius: 12px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s ease; border: 1px solid var(--color-accent-green); box-shadow: 0 4px 16px var(--color-accent-green-35); text-align: center;}
.faq-btn-primary:hover {background-color: var(--color-green-400); color: var(--color-primary-dark) !important; transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-accent-green-50);}
.faq-btn-secondary {background-color: var(--color-white-10); color: var(--color-white) !important; font-family: var(--font-family); font-size: 14.5px; font-weight: 600; padding: 13px 24px; border-radius: 12px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s ease; border: 1.5px solid var(--color-white-40); text-align: center; backdrop-filter: blur(8px);}
.faq-btn-secondary:hover {background-color: var(--color-white); color: var(--color-primary-dark) !important; border-color: var(--color-white); transform: translateY(-2px); box-shadow: 0 8px 22px var(--color-white-25);}
@media (max-width: 767.98px) {.faq-section-group {margin-bottom: 28px;}}
@media (max-width: 767.98px) {.faq-section-heading {gap: 8px; flex-direction: column; align-items: flex-start; margin-bottom: 12px;}}
@media (max-width: 767.98px) {.faq-section-title {font-size: 17px;}}
@media (max-width: 767.98px) {.faq-accordion-header {padding: 14px 16px; gap: 10px;}}
@media (max-width: 767.98px) {.faq-item-number {width: 24px; height: 24px; font-size: 11px; border-radius: 6px;}}
@media (max-width: 767.98px) {.faq-item-title {font-size: 14px; line-height: 1.4;}}
@media (max-width: 767.98px) {.faq-chevron-wrap {width: 26px; height: 26px;}}
@media (max-width: 767.98px) {.faq-chevron {font-size: 14px;}}
@media (max-width: 767.98px) {.faq-accordion-body {padding: 14px 16px; font-size: 13.5px; line-height: 1.65;}}
@media (max-width: 767.98px) {.faq-bullet-list {padding-left: 16px;}}
@media (max-width: 767.98px) {.faq-bullet-list li {font-size: 13px; margin-bottom: 4px;}}
@media (max-width: 767.98px) {.faq-help-card {padding: 24px 18px; border-radius: 16px; margin-top: 28px;}}
@media (max-width: 767.98px) {.faq-help-title {font-size: 19px;}}
@media (max-width: 767.98px) {.faq-help-desc {font-size: 13.5px;}}
@media (max-width: 767.98px) {.faq-btn-primary, .faq-btn-secondary {width: 100%; justify-content: center; font-size: 14px; padding: 12px 20px;}}
.scale-page {background-color: var(--color-white);}
.scale-hero-section {position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-dark-navy-bg); padding: clamp(100px, 12vh, 140px) 0 clamp(60px, 8vh, 90px) 0; box-sizing: border-box;}
.scale-hero-bg {position: absolute; inset: -40px; background-size: cover; background-position: center 30%; will-change: transform; filter: brightness(1.02) contrast(1.02); pointer-events: none;}
.scale-hero-overlay {position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, var(--color-navy-card-05) 0%, var(--color-navy-card-35) 100%), linear-gradient(180deg, var(--color-navy-card-08) 0%, var(--color-navy-card-38) 100%); pointer-events: none;}
.scale-hero-content {position: relative; z-index: 3; max-width: 900px; margin: 0 auto; text-align: center;}
.scale-hero-title {font-family: var(--font-family); font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; color: var(--color-white); line-height: 1.15; margin-bottom: 18px; letter-spacing: -0.025em; text-shadow: 0 4px 24px var(--color-shadow-black-65);}
.scale-hero-subtitle {font-family: var(--font-family); font-size: clamp(15px, 1.7vw, 17.5px); color: var(--color-white); line-height: 1.55; max-width: 820px; margin: 0 auto 76px auto; font-weight: 400; text-shadow: 0 2px 14px var(--color-black-60);}
.scale-hero-actions {display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;}
.scale-hero-btn-primary {background-color: var(--color-blue-500); color: var(--color-white) !important; font-family: var(--font-family); font-size: 14px; font-weight: 600; padding: 11px 24px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s ease; border: 1px solid var(--color-blue-500); box-shadow: 0 4px 16px var(--color-blue-500-40);}
.scale-hero-btn-primary:hover {background-color: var(--color-btn-brand); color: var(--color-white) !important; transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-blue-500-60);}
.scale-hero-btn-secondary {background-color: var(--color-white); color: var(--color-slate-800) !important; font-family: var(--font-family); font-size: 14px; font-weight: 600; padding: 11px 24px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s ease; border: 1px solid var(--color-white); box-shadow: 0 2px 10px var(--color-black-10);}
.scale-hero-btn-secondary:hover {background-color: var(--color-slate-50); color: var(--color-slate-900) !important; transform: translateY(-2px); box-shadow: 0 6px 18px var(--color-shadow-black-18);}
.scale-counter-wrap {position: relative; z-index: 10; padding: 56px 0;}
.scale-counter-bar {max-width: 1060px; margin: 0 auto; background: var(--color-primary-dark); border: 1px solid var(--color-white-12); border-radius: 12px; padding: 28px 16px; box-shadow: 0 18px 42px -10px var(--color-shadow-black-45); backdrop-filter: blur(12px);}
.scale-counter-col {text-align: center; padding: 0 16px; position: relative;}
.scale-counter-col:not(:last-child) {border-right: 1px solid var(--color-white-15);}
.scale-counter-val {font-family: var(--font-family); font-size: clamp(26px, 3.2vw, 35px); font-weight: 800; color: var(--color-white); line-height: 1.1; margin-bottom: 5px; letter-spacing: -0.02em;}
.scale-counter-lbl {font-family: var(--font-family); font-size: 11px; color: var(--color-slate-placeholder); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0;}
.scale-sec-header {text-align: center; margin: 0 auto clamp(36px, 5vw, 54px) auto;}
.scale-sec-title {font-family: var(--font-family); font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; color: var(--color-near-black); line-height: 1.25; margin-bottom: 14px; letter-spacing: -0.02em;}
.scale-sec-subtitle {font-family: var(--font-family); font-size: clamp(15px, 1.8vw, 17px); color: var(--color-slate-500); line-height: 1.65; margin: 0;}
.scale-suite-section {padding: clamp(40px, 6vw, 70px) 0; background-color: var(--color-white); padding-top:16px;}
.scale-suite-card {position: relative; border-radius: 18px; overflow: hidden; height: clamp(220px, 24vw, 290px); display: block; text-decoration: none; border: 1px solid var(--color-shadow-black-08); box-shadow: 0 10px 30px var(--color-shadow-black-08); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;}
.scale-suite-card:hover {transform: translateY(-6px); box-shadow: 0 18px 40px var(--color-shadow-black-16);}
.scale-suite-img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease;}
.scale-suite-card:hover .scale-suite-img {transform: scale(1.08);}
.scale-suite-overlay {position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-theme-banner-15) 0%, var(--color-theme-banner-85) 85%); pointer-events: none;}
.scale-suite-info {position: absolute; bottom: 20px; left: 24px; right: 24px; z-index: 2; color: var(--color-white);}
.scale-suite-name {font-family: var(--font-family); font-size: clamp(20px, 2.3vw, 24px); font-weight: 800; color: var(--color-white); margin: 0 0 2px 0; letter-spacing: -0.01em;}
.scale-suite-desc {font-family: var(--font-family); font-size: 13px; color: var(--color-white-80); margin: 0;}
.scale-tabs-section {padding: clamp(20px, 7vw, 20px) 0; background-color: var(--color-white);}
.scale-tabs-nav {height: 100%; display: flex; flex-direction: column; gap: 14px; justify-content: space-between;}
.scale-tab-btn {width: 100%; flex: 1; min-height: 62px; display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-radius: 10px; border: 1.5px solid var(--color-slate-200); background: var(--color-white); color: var(--color-primary-dark); font-family: var(--font-family); font-size: 15.5px; font-weight: 700; text-align: left; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box;}
.scale-tab-btn:hover {border-color: var(--color-slate-300); background-color: var(--color-slate-50); color: var(--color-primary-dark); transform: translateX(3px);}
.scale-tab-btn.active {background: var(--color-dark-navy-bg); border-color: var(--color-dark-navy-bg); color: var(--color-white); box-shadow: 0 8px 24px -4px var(--color-navy-card-25); transform: none;}
.scale-tab-icon {font-size: 22px; flex-shrink: 0; color: var(--color-primary-dark); font-weight: normal !important; transition: transform 0.3s ease, color 0.3s ease;}
.scale-tab-btn:hover .scale-tab-icon {transform: scale(1.08);}
.scale-tab-btn.active .scale-tab-icon {color: var(--color-white); transform: scale(1.05);}
.scale-tab-content-card {background: var(--color-white); border: 1.5px solid var(--color-slate-200); border-radius: 12px; padding: clamp(24px, 4vw, 36px) clamp(24px, 4.5vw, 40px); height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;}
.scale-tab-pane {display: none; opacity: 0; transform: translateY(8px); transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);}
.scale-tab-pane.active {display: block; opacity: 1; transform: translateY(0); animation: fadeInScale 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
@keyframes fadeInScale {0% {opacity: 0; transform: translateY(10px);} 100% {opacity: 1; transform: translateY(0);}}
.scale-pane-desc {font-family: var(--font-family); font-size: 15px; line-height: 1.55; color: var(--color-primary-dark); margin-bottom: 24px; font-weight: 500;}
.scale-pane-section-title {font-family: var(--font-family); font-size: 15px; font-weight: 800; color: var(--color-primary-dark); margin: 0 0 10px 0; line-height: 1.4;}
.scale-caps-row {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 36px; margin-bottom: 24px;}
.scale-caps-col {display: flex; flex-direction: column; gap: 8px;}
.scale-cap-text {font-family: var(--font-family); font-size: 14px; color: var(--color-slate-700); line-height: 1.55; margin: 0; font-weight: 500;}
.scale-benefits-wrap {display: flex; flex-direction: column; gap: 6px;}
.scale-benefit-text {font-family: var(--font-family); font-size: 14px; color: var(--color-slate-700); line-height: 1.55; margin: 0; font-weight: 500;}
@media (max-width: 575.98px) {.scale-caps-row {grid-template-columns: 1fr; gap: 8px;}}
.scale-solutions-section {padding: clamp(24px, 6vw, 24px) 0; background-color: var(--color-white);}
.scale-sol-card {background: var(--color-theme-card-bg); border: 1px solid var(--color-slate-border-light); border-radius: 20px; padding: clamp(28px, 4vw, 40px) clamp(24px, 3.5vw, 36px); height: 100%; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 18px var(--color-theme-banner-03);}
.scale-sol-card:hover {transform: translateY(-5px); box-shadow: 0 12px 30px var(--color-theme-banner-08);}
.scale-sol-title {font-family: var(--font-family); font-size: 22px; font-weight: 800; color: var(--color-primary-dark); margin-bottom: 14px; line-height: 1.25;}
.scale-sol-desc {font-family: var(--font-family); font-size: 14.5px; line-height: 1.55; color: var(--color-slate-700); margin-bottom: 24px;}
.scale-sol-list {list-style-type: disc; padding-left: 20px; margin: 0 0 32px 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1;}
.scale-sol-list li {font-family: var(--font-family); font-size: 14px; color: var(--color-slate-800); line-height: 1.5; font-weight: 500;}
.scale-sol-btn {background-color: var(--color-blue-500); color: var(--color-white) !important; font-family: var(--font-family); font-size: 14.5px; font-weight: 700; padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 100%; transition: all 0.25s ease; border: 1px solid var(--color-blue-500); box-shadow: 0 4px 14px var(--color-blue-500-30); text-align: center; margin-top: auto;}
.scale-sol-btn:hover {background-color: var(--color-btn-brand); color: var(--color-white) !important; transform: translateY(-2px); box-shadow: 0 8px 22px var(--color-blue-500-50);}
.scale-intel-section {padding: clamp(30px, 5vw, 55px) 0; background-color: var(--color-white);}
.scale-intel-card {position: relative; border-radius: 20px; overflow: hidden; background-color: var(--color-dark-navy-bg); color: var(--color-white); padding: clamp(50px, 7vw, 75px) clamp(24px, 5vw, 60px); text-align: center; box-shadow: 0 16px 40px -10px var(--color-navy-card-40); border: 1px solid var(--color-white-10);}
.scale-intel-video-wrap {position: absolute; inset: -40px; overflow: hidden; pointer-events: none;}
.scale-intel-video {width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(100%) brightness(1.05) contrast(1.1); will-change: transform; transform: translate3d(0, 0, 0) scale(1.08);}
.scale-intel-overlay {position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--color-navy-card-20) 0%, var(--color-navy-card-55) 100%), linear-gradient(180deg, var(--color-navy-card-15) 0%, var(--color-navy-card-58) 100%); pointer-events: none;}
.scale-intel-content {position: relative; z-index: 2; max-width: 860px; margin: 0 auto; text-shadow: 0 2px 14px var(--color-black-60);}
.scale-intel-title {font-family: var(--font-family); font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--color-white); margin-bottom: 8px; letter-spacing: -0.02em;}
.scale-intel-sub {font-family: var(--font-family); font-size: clamp(14px, 1.6vw, 16px); color: var(--color-slate-100); margin-bottom: 28px; font-weight: 400;}
.scale-intel-desc {font-family: var(--font-family); font-size: clamp(16px, 2vw, 19.5px); line-height: 1.55; color: var(--color-white); margin: 0 auto 48px auto; font-weight: 400;}
.scale-intel-links {display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4.5vw, 64px); flex-wrap: wrap;}
.scale-intel-link-item {font-family: var(--font-family); font-size: clamp(15px, 1.7vw, 17px); font-weight: 700; color: var(--color-white); letter-spacing: -0.01em; transition: all 0.25s ease; cursor: pointer;}
.scale-intel-link-item:hover {color: var(--color-blue-400); transform: translateY(-2px);}
.scale-support-section {padding: clamp(40px, 6vw, 70px) 0; background-color: var(--color-slate-50);}
.scale-support-card {background: var(--color-white); border: 1px solid var(--color-slate-200); border-radius: 16px; padding: clamp(22px, 3vw, 28px); height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 2px 8px var(--color-theme-banner-03);}
.scale-support-card:hover {transform: translateY(-4px); box-shadow: 0 10px 24px var(--color-theme-banner-08); border-color: var(--color-slate-300);}
.scale-support-title {font-family: var(--font-family); font-size: 16.5px; font-weight: 700; color: var(--color-near-black); margin-bottom: 8px;}
.scale-support-desc {font-family: var(--font-family); font-size: 13.5px; line-height: 1.6; color: var(--color-slate-500); margin-bottom: 14px;}
.scale-support-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;}
.scale-support-list li {display: flex; align-items: center; gap: 8px; font-family: var(--font-family); font-size: 13px; color: var(--color-slate-700); font-weight: 500;}
.scale-support-list li i {color: var(--color-emerald-700); font-size: 14px; flex-shrink: 0; font-weight: normal !important;}
.scale-process-section {padding: clamp(50px, 7vw, 85px) 0; background-color: var(--color-white);}
.scale-phase-card {background: var(--color-white); border: 1.5px solid var(--color-slate-200); border-radius: 18px; padding: clamp(24px, 3vw, 30px) 20px; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; box-shadow: 0 4px 16px var(--color-theme-banner-04); position: relative;}
.scale-phase-card:hover {transform: translateY(-6px); box-shadow: 0 16px 36px var(--color-theme-banner-10); border-color: var(--color-blue-500);}
.scale-phase-badge {display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-dark); color: var(--color-white); font-family: var(--font-family); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 12px; border-radius: 20px; margin-bottom: 16px;}
.scale-phase-icon-wrap {width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary-dark); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; box-shadow: 0 4px 12px var(--color-theme-banner-25);}
.scale-phase-title {font-family: var(--font-family); font-size: 16px; font-weight: 700; color: var(--color-near-black); margin-bottom: 4px; line-height: 1.3;}
.scale-phase-duration {font-family: var(--font-family); font-size: 12px; color: var(--color-blue-500); font-weight: 600; margin-bottom: 12px;}
.scale-phase-desc {font-family: var(--font-family); font-size: 13px; line-height: 1.55; color: var(--color-slate-500); margin-bottom: 18px;}
.scale-phase-feats-title {font-family: var(--font-family); font-size: 12.5px; font-weight: 700; color: var(--color-near-black); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; width: 100%; text-align: left;}
.scale-phase-feats-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; margin-top: auto;}
.scale-phase-feats-list li {display: flex; align-items: center; gap: 8px; font-family: var(--font-family); font-size: 12.5px; color: var(--color-slate-600); font-weight: 500;}
.scale-phase-feats-list li i {color: var(--color-emerald-700); font-size: 14px; flex-shrink: 0; font-weight: normal !important;}
@media (max-width: 991.98px) {.scale-counter-item:not(:last-child)::after {display: none;} .scale-counter-item {margin-bottom: 16px;} .scale-counter-wrap {margin-top: -30px;}}
@media (max-width: 767.98px) {.scale-hero-actions {width: 100%; flex-direction: column;} .scale-hero-btn-primary, .scale-hero-btn-secondary {width: 100%; justify-content: center;} .scale-counter-bar {padding: 20px 16px;} .scale-intel-pills {flex-direction: column; width: 100%;} .intel-pill-btn {width: 100%;}}
.quote-modal-backdrop {position: fixed; inset: 0; width: 100vw; height: 100vh; background: var(--color-black-85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 999999; display: flex; align-items: flex-start; justify-content: center; padding: clamp(20px, 4vh, 40px) 16px; opacity: 0; visibility: hidden; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; box-sizing: border-box;}
.quote-modal-backdrop.active {opacity: 1; visibility: visible;}
.quote-backdrop-brand-watermark {position: fixed; bottom: clamp(16px, 3vh, 32px); left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 0; opacity: 0.18; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 25px var(--color-white-25)); transition: opacity 0.4s ease;}
.quote-brand-watermark-img {width: clamp(240px, 45vw, 420px); height: auto; object-fit: contain; filter: brightness(1.3) contrast(1.15);}
@media (max-height: 720px) {.quote-backdrop-brand-watermark {opacity: 0.1; bottom: 8px;} .quote-brand-watermark-img {width: 220px;}}
.quote-modal-container {position: relative; width: 100%; max-width: 530px; background: var(--color-dark-surface-94); backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%); border: 1.5px solid var(--color-white-16); border-radius: 22px; padding: clamp(26px, 4vw, 34px) clamp(22px, 4vw, 32px); box-shadow: 0 35px 80px -10px var(--color-shadow-black-95), inset 0 1px 1px 0 var(--color-white-28); transform: translateY(-70px) scale(0.96); opacity: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; margin: auto; box-sizing: border-box; overflow: hidden; z-index: 2;}
.quote-modal-container::before {content: ''; position: absolute; top: -60%; left: -60%; width: 220%; height: 220%; background: linear-gradient(90deg, transparent 0%, var(--color-white-02) 40%, var(--color-white-09) 50%, var(--color-white-02) 60%, transparent 100%); transform: rotate(25deg); pointer-events: none; animation: glassShineSweep 6s infinite cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;}
.quote-modal-container::after {content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--color-white-12) 0%, transparent 70%); filter: blur(25px); pointer-events: none; animation: ambientOrbFloat 6s infinite ease-in-out; z-index: 0;}
@keyframes glassShineSweep {0% {transform: translateX(-150%) rotate(25deg);} 100% {transform: translateX(250%) rotate(25deg);}}
@keyframes ambientOrbFloat {0%, 100% {transform: translate(0, 0) scale(1); opacity: 0.3;} 50% {transform: translate(12px, -12px) scale(1.2); opacity: 0.65;}}
.quote-modal-backdrop.active .quote-modal-container {transform: translateY(0) scale(1); opacity: 1;}
.quote-modal-close {position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--color-white-10); border: 1px solid var(--color-white-20); color: var(--color-white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; z-index: 10; backdrop-filter: blur(8px);}
.quote-modal-close:hover {background: var(--color-red-500-30); border-color: var(--color-red-500-60); color: var(--color-red-500); transform: rotate(90deg);}
.quote-modal-header {text-align: center; margin-bottom: 20px; padding: 0 20px; position: relative; z-index: 2;}
.quote-modal-title {font-family: var(--font-family); font-size: 24px; font-weight: 800; color: var(--color-white); margin-bottom: 6px; letter-spacing: -0.01em;}
.quote-modal-subtitle {font-family: var(--font-family); font-size: 14.5px; color: var(--color-slate-300); margin: 0; font-weight: 500;}
.quote-form-grid {display: flex; flex-direction: column; gap: 11px;}
.quote-form-row {width: 100%;}
.quote-grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px;}
.quote-grid-3 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.quote-field-wrap {position: relative; width: 100%;}
.quote-input, .quote-select {width: 100%; height: 44px; background: var(--color-white); border: 1px solid var(--color-slate-300); border-radius: 8px; padding: 0 14px; font-family: var(--font-family); font-size: 13.5px; color: var(--color-primary-dark); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; font-weight: 500;}
.quote-input::placeholder {color: var(--color-slate-placeholder); opacity: 1;}
.quote-input:focus, .quote-select:focus {border-color: var(--color-blue-500); box-shadow: 0 0 0 3px var(--color-blue-500-25);}
.quote-select {appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; padding-right: 32px; cursor: pointer;}
.quote-checkbox-row {margin: 3px 0 5px 0;}
.quote-checkbox-label {display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none;}
.quote-custom-check {width: 18px; height: 18px; accent-color: var(--color-green-500); margin-top: 1px; flex-shrink: 0; cursor: pointer; border-radius: 4px;}
.quote-check-text {font-family: var(--font-family); font-size: 12px; line-height: 1.45; color: var(--color-slate-300); font-weight: 400;}
.quote-footer-row {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 5px;}
.btn-quote-submit {background: var(--color-blue-500); color: var(--color-white) !important; font-family: var(--font-family); font-size: 14.5px; font-weight: 700; padding: 11px 32px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 14px var(--color-blue-500-35); min-width: 120px; display: inline-flex; align-items: center; justify-content: center;}
.btn-quote-submit:not(:disabled):hover {background: var(--color-btn-brand); transform: translateY(-2px); box-shadow: 0 8px 22px var(--color-blue-500-50);}
.btn-quote-submit:disabled {background: var(--color-white-12) !important; color: var(--color-white-35) !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; pointer-events: none;}
.quote-help-box {text-align: right;}
.quote-help-title {display: block; font-family: var(--font-family); font-size: 12px; color: var(--color-slate-300); margin-bottom: 2px; font-weight: 500;}
.quote-help-phone {display: block; font-family: var(--font-family); font-size: 14.5px; font-weight: 700; color: var(--color-white); text-decoration: none; transition: color 0.2s ease;}
.quote-help-phone:hover {color: var(--color-white); text-decoration: underline;}
.quote-form-alert {border-radius: 8px; padding: 12px 14px; font-size: 13px; margin-bottom: 14px; line-height: 1.45; font-family: var(--font-family);}
.quote-form-alert.alert-success {background-color: var(--color-emerald-50); border: 1px solid var(--color-emerald-200); color: var(--color-emerald-800);}
.quote-form-alert.alert-danger {background-color: var(--color-red-50); border: 1px solid var(--color-red-200); color: var(--color-red-800);}
@media (max-width: 575.98px) {.quote-grid-2, .quote-grid-3 {grid-template-columns: 1fr; gap: 9px;} .quote-footer-row {flex-direction: column; align-items: stretch; gap: 14px; text-align: center;} .quote-help-box {text-align: center;} .btn-quote-submit {width: 100%;}}
.case-study-wrap {background-color: var(--color-slate-50); padding: 50px 0 70px;}
.case-study-wrap .beyond-stats-banner {margin: 0;}
img {max-width: 100%; height: auto;}
img[loading="lazy"] {content-visibility: auto;}
.hero-feature-img, .app-mockup-img {will-change: transform, opacity; image-rendering: -webkit-optimize-contrast;}
/* ==========================================================================
   Page Component: Blog Intelligence Journal
   ========================================================================== */
.blog-hero-section {position: relative; background-color: var(--color-primary-dark); padding: clamp(120px, 13vw, 155px) 0 clamp(45px, 5vw, 65px) 0; overflow: hidden; color: var(--color-white);}
.blog-hero-ambient-glow {position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 450px; background: radial-gradient(circle, var(--color-blue-500-18) 0%, var(--color-green-500-12) 50%, var(--color-theme-banner-fade) 75%); filter: blur(60px); pointer-events: none; z-index: 1;}
.blog-hero-pattern {position: absolute; inset: 0; background-image: radial-gradient(var(--color-white-08) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.45; pointer-events: none; z-index: 1;}
.blog-hero-content {max-width: 860px; position: relative; z-index: 2;}
.blog-badge-pill {display: inline-flex; align-items: center; background: var(--color-white-06); border: 1px solid var(--color-white-15); border-radius: 9999px; padding: 6px 18px; font-family: var(--font-family); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-slate-200); text-transform: uppercase; margin-bottom: 22px; backdrop-filter: blur(8px);}
.blog-badge-pulse {width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-green-500); margin-right: 8px; box-shadow: 0 0 10px var(--color-green-500); animation: pulseGlow 2s infinite ease-in-out;}
@keyframes pulseGlow {0%, 100% {transform: scale(1); opacity: 1;} 50% {transform: scale(1.35); opacity: 0.65;}}
.blog-hero-title {font-family: var(--font-family); font-size: clamp(2.2rem, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; margin-bottom: 16px; color: var(--color-white);}
.text-gradient-primary {background: linear-gradient(135deg, var(--color-blue-400) 0%, var(--color-sky-400) 50%, var(--color-emerald-400) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.blog-hero-subtitle {font-family: var(--font-family); font-size: clamp(14.5px, 1.25vw, 17px); font-weight: 400; color: var(--color-slate-400); line-height: 1.6; max-width: 720px; margin: 0 auto 32px auto;}
.blog-search-wrap {max-width: 580px; margin-bottom: 26px;}
.blog-search-box {position: relative; display: flex; align-items: center; background: var(--color-white-08); border: 1.5px solid var(--color-white-18); border-radius: 12px; padding: 4px 14px; backdrop-filter: blur(12px); transition: all 0.25s ease;}
.blog-search-box:focus-within {border-color: var(--color-blue-500); background: var(--color-white-12); box-shadow: 0 0 20px var(--color-blue-500-35);}
.blog-search-icon {font-size: 19px; color: var(--color-slate-400); margin-right: 10px; flex-shrink: 0;}
.blog-search-input {width: 100%; background: transparent; border: none; outline: none; color: var(--color-white); font-family: var(--font-family); font-size: 14.5px; padding: 10px 0;}
.blog-search-input::placeholder {color: var(--color-slate-500);}
.blog-search-clear-btn {background: none; border: none; color: var(--color-slate-400); cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: color 0.2s;}
.blog-search-clear-btn:hover {color: var(--color-white);}
.blog-filter-bar {margin-top: 10px;}
.blog-filter-btn {font-family: var(--font-family); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 9999px; background: var(--color-white-05); border: 1px solid var(--color-white-12); color: var(--color-slate-300); cursor: pointer; transition: all 0.25s ease; display: inline-flex; align-items: center;}
.blog-filter-btn:hover {background: var(--color-white-12); color: var(--color-white); border-color: var(--color-white-25); transform: translateY(-1px);}
.blog-filter-btn.active {background: var(--color-blue-500); color: var(--color-white); border-color: var(--color-blue-500); box-shadow: 0 4px 14px var(--color-blue-500-40);}
.blog-filter-count {display: inline-block; background: var(--color-white-20); border-radius: 9999px; padding: 1px 7px; font-size: 11px; margin-left: 6px;}
/* 2. Spotlight Trending Article */
.blog-spotlight-section {padding: 60px 0 35px 0; background: var(--color-slate-50);}
.blog-spotlight-card {background: var(--color-white); border: 1px solid var(--color-slate-200); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 35px var(--color-primary-dark-07); transition: all 0.35s ease;}
.blog-spotlight-card:hover {transform: translateY(-4px); box-shadow: 0 16px 45px var(--color-primary-dark-12); border-color: var(--color-slate-300);}
.blog-spotlight-media {position: relative; height: 100%; min-height: 380px; overflow: hidden; background: var(--color-primary-dark);}
.blog-spotlight-img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);}
.blog-spotlight-card:hover .blog-spotlight-img {transform: scale(1.04);}
.blog-spotlight-overlay {position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-theme-banner-fade) 50%, var(--color-theme-banner-60) 100%); pointer-events: none;}
.blog-spotlight-badge {position: absolute; top: 18px; left: 18px; background: var(--color-theme-banner-85); color: var(--color-white); border: 1px solid var(--color-white-15); border-radius: 9999px; padding: 5px 14px; font-family: var(--font-family); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; backdrop-filter: blur(8px); z-index: 2;}
.blog-spotlight-body {padding: clamp(28px, 3.5vw, 44px);}
.blog-category-tag {font-family: var(--font-family); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 6px;}
.blog-meta-item {font-family: var(--font-family); font-size: 12.5px; color: var(--color-slate-500);}
.blog-spotlight-title {font-family: var(--font-family); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; color: var(--color-primary-dark); line-height: 1.3; margin-bottom: 14px; letter-spacing: -0.015em;}
.blog-spotlight-desc {font-family: var(--font-family); font-size: 14.5px; color: var(--color-slate-600); line-height: 1.6; margin-bottom: 18px;}
.blog-takeaways-box {background: var(--color-slate-100); border-radius: 12px; padding: 14px 18px; border-left: 3.5px solid var(--color-green-500);}
.blog-takeaways-title {font-family: var(--font-family); font-size: 13px; font-weight: 700; color: var(--color-slate-900); margin-bottom: 6px;}
.blog-takeaways-list {list-style: disc; padding-left: 18px; font-family: var(--font-family); font-size: 12.5px; color: var(--color-slate-600); line-height: 1.55;}
.blog-author-avatar {width: 36px; height: 36px; border-radius: 50%; background: var(--color-slate-200); color: var(--color-slate-600); display: flex; align-items: center; justify-content: center; font-size: 16px;}
.blog-author-name {font-family: var(--font-family); font-size: 13px; font-weight: 700; color: var(--color-slate-900); line-height: 1.2;}
.blog-author-role {font-family: var(--font-family); font-size: 11px; color: var(--color-slate-500);}
.btn-blog-read {background: var(--color-primary-dark); color: var(--color-white); font-family: var(--font-family); font-size: 13.5px; font-weight: 600; padding: 10px 22px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 6px;}
.btn-blog-read:hover {background: var(--color-blue-500); transform: translateY(-2px); box-shadow: 0 6px 18px var(--color-blue-500-40); color: var(--color-white);}
/* 3. Modern Creative Blog Grid */
.blog-grid-section {padding: clamp(50px, 6vw, 75px) 0 clamp(60px, 7vw, 90px) 0; background: var(--color-slate-50);}
.blog-grid-heading {font-family: var(--font-family); font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: var(--color-primary-dark); letter-spacing: -0.02em;}
.blog-results-badge {font-family: var(--font-family); font-size: 12.5px; font-weight: 600; color: var(--color-slate-600); background: var(--color-slate-200); padding: 5px 14px; border-radius: 9999px;}
.blog-card {background: var(--color-white); border: 1px solid var(--color-slate-200); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px var(--color-primary-dark-04); transition: all 0.35s ease;}
.blog-card:hover {transform: translateY(-5px); box-shadow: 0 14px 35px var(--color-primary-dark-10); border-color: var(--color-slate-300);}
.blog-card-media {height: 220px; overflow: hidden; background: var(--color-primary-dark);}
.blog-card-img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.blog-card:hover .blog-card-img {transform: scale(1.06);}
.blog-card-overlay {position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--color-theme-banner-45) 100%); pointer-events: none;}
.blog-category-badge {position: absolute; top: 14px; left: 14px; background: var(--color-theme-banner-85); color: var(--color-white); font-family: var(--font-family); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 6px; backdrop-filter: blur(6px); z-index: 2;}
.blog-read-badge {position: absolute; bottom: 12px; right: 12px; background: var(--color-theme-banner-75); color: var(--color-slate-300); font-family: var(--font-family); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; backdrop-filter: blur(6px); z-index: 2;}
.blog-card-meta {font-family: var(--font-family); font-size: 11.5px; color: var(--color-slate-500); font-weight: 500;}
.blog-card-title {font-family: var(--font-family); font-size: 16.5px; font-weight: 700; color: var(--color-primary-dark); line-height: 1.35; letter-spacing: -0.01em;}
.blog-card-desc {font-family: var(--font-family); font-size: 13px; color: var(--color-slate-500); line-height: 1.55;}
.blog-author-sm {font-family: var(--font-family); font-size: 12px; color: var(--color-slate-500); font-weight: 600;}
.author-dot {width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-blue-500);}
.blog-link-btn {background: none; border: none; color: var(--color-blue-500); font-family: var(--font-family); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s, color 0.2s;}
.blog-link-btn:hover {color: var(--color-btn-brand-hover); gap: 8px;}
.blog-no-results-icon {font-size: 48px; color: var(--color-slate-400);}
.blog-no-results-title {font-family: var(--font-family); font-weight: 700; color: var(--color-primary-dark);}
.btn-blog-reset {background: var(--color-primary-dark); color: var(--color-white); border: none; font-family: var(--font-family); font-size: 13px; font-weight: 600; padding: 8px 20px; border-radius: 8px; cursor: pointer; transition: background 0.2s;}
.btn-blog-reset:hover {background: var(--color-blue-500);}
/* 4. Newsletter Subscription */
.blog-newsletter-section {padding: 60px 0 80px 0; background: var(--color-slate-50);}
.blog-newsletter-card {background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-slate-800) 100%); border: 1px solid var(--color-white-10); border-radius: 24px; padding: clamp(32px, 4vw, 56px); color: var(--color-white); box-shadow: 0 20px 45px var(--color-primary-dark-15);}
.blog-newsletter-pattern {position: absolute; inset: 0; background-image: radial-gradient(var(--color-white-07) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; pointer-events: none;}
.blog-newsletter-pill {background: var(--color-blue-500-15); border: 1px solid var(--color-blue-500-35); color: var(--color-blue-400); font-family: var(--font-family); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 9999px;}
.blog-newsletter-title {font-family: var(--font-family); font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: var(--color-white); line-height: 1.25;}
.blog-newsletter-desc {font-family: var(--font-family); font-size: 14.5px; color: var(--color-slate-400); line-height: 1.6;}
.blog-newsletter-input-group {display: flex; gap: 8px; background: var(--color-white-08); border: 1.5px solid var(--color-white-18); border-radius: 12px; padding: 4px 6px; backdrop-filter: blur(8px);}
.blog-newsletter-input {flex-grow: 1; background: transparent; border: none; outline: none; color: var(--color-white); font-family: var(--font-family); font-size: 14px; padding: 8px 12px;}
.blog-newsletter-input::placeholder {color: var(--color-slate-500);}
.btn-newsletter-submit {background: var(--color-blue-500); color: var(--color-white); border: none; font-family: var(--font-family); font-size: 13.5px; font-weight: 700; padding: 10px 22px; border-radius: 8px; cursor: pointer; transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;}
.btn-newsletter-submit:hover {background: var(--color-btn-brand); transform: translateY(-1px); box-shadow: 0 6px 16px var(--color-blue-500-40);}
.blog-newsletter-privacy {font-family: var(--font-family); font-size: 11.5px; color: var(--color-slate-500);}
.newsletter-success-alert {background: var(--color-green-500-15); border: 1px solid var(--color-green-500-35); color: var(--color-green-400); padding: 8px 14px; border-radius: 8px; font-family: var(--font-family); font-size: 12.5px;}
/* 5. Reader Lightbox Modal */
.blog-reader-modal .modal-content {background: var(--color-white); border-radius: 20px; border: 1px solid var(--color-slate-200); box-shadow: 0 25px 60px var(--color-shadow-black-25); overflow: hidden;}
.blog-reader-badge {background: var(--color-blue-50); color: var(--color-btn-brand); font-family: var(--font-family); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 6px;}
.btn-blog-reader-close {background: var(--color-slate-100); border: none; width: 36px; height: 36px; border-radius: 50%; color: var(--color-slate-600); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: all 0.2s;}
.btn-blog-reader-close:hover {background: var(--color-slate-200); color: var(--color-slate-900);}
.blog-reader-inner {max-width: 820px;}
.blog-reader-title {font-family: var(--font-family); font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; color: var(--color-slate-900); line-height: 1.25;}
.blog-author-avatar-lg {width: 44px; height: 44px; border-radius: 50%; background: var(--color-blue-50); color: var(--color-btn-brand); display: flex; align-items: center; justify-content: center; font-size: 20px;}
.blog-share-btn {width: 32px; height: 32px; border-radius: 50%; background: var(--color-slate-100); border: 1px solid var(--color-slate-200); color: var(--color-slate-600); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; transition: all 0.2s; cursor: pointer; padding: 0;}
.blog-share-btn:hover {background: var(--color-blue-500); color: var(--color-white); border-color: var(--color-blue-500);}
.blog-reader-body-content {font-family: var(--font-family); font-size: 15.5px; line-height: 1.75; color: var(--color-slate-700);}
.blog-reader-body-content h3 {font-family: var(--font-family); font-size: 21px; font-weight: 700; color: var(--color-slate-900); margin-top: 28px; margin-bottom: 12px;}
.blog-reader-body-content p {margin-bottom: 18px;}
.blog-reader-body-content ul {padding-left: 20px; margin-bottom: 20px;}
.blog-reader-body-content li {margin-bottom: 8px;}
.blog-reader-cta-card {background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-slate-800) 100%);}