/* ==========================================================================
   InventorysHub — style.css
   Complete custom stylesheet
   ========================================================================== */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Backgrounds — 3-tier clean light palette */
  --bg-primary:       #FFFFFF;        /* pure white */
  --bg-secondary:     #F8FAFC;        /* off-white, subtle distinction */
  --bg-card:          rgba(0, 0, 0, 0.04);
  --bg-card-hover:    rgba(0, 0, 0, 0.06);
  --bg-glass:         rgba(255, 255, 255, 0.90);

  --accent:           #6366F1;
  --accent-hover:     #4F46E5;
  --accent-light:     rgba(99, 102, 241, 0.10);
  --accent-glow:      rgba(99, 102, 241, 0.20);

  --success:          #10B981;
  --success-light:    rgba(16, 185, 129, 0.12);
  --warning:          #F59E0B;
  --warning-light:    rgba(245, 158, 11, 0.12);
  --danger:           #EF4444;
  --danger-light:     rgba(239, 68, 68, 0.12);

  /* Text — dark on light */
  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-muted:       #94A3B8;
  --text-dark:        #1E293B;

  /* Borders — dark on light */
  --border:           rgba(0, 0, 0, 0.09);
  --border-hover:     rgba(0, 0, 0, 0.18);

  --font-primary:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      9999px;

  --shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:        0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:        0 12px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow:      0 0 50px rgba(99, 102, 241, 0.15);
  --shadow-card:      0 0 0 1px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.08);

  --transition:       0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* More generous whitespace */
  --section-py:       60px;
  --container-max:    1200px;
}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--accent-light);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: #4F46E5;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #384155;
}

.gradient-text {
  background: linear-gradient(135deg, #0F172A 0%, #4F46E5 40%, #6366F1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   4. UTILITY CLASSES
   ========================================================================== */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent-light);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-full);
  color: #6366F1;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.section-header {
  margin-bottom: 64px;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.875rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.7;
}

.section-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 28px;
}

.text-success { color: var(--success) !important; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-accent {
  background: #0453a7;
  color: #fff;
  padding: 12px 24px;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-accent:hover {
  background: #1768be;
  color: #fff;
  transform: translateY(-2px);
 box-shadow: 0 8px 28px rgb(23 104 190 / 20%);
}

.btn-accent.btn-lg {
  padding: 15px 32px;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

.btn-accent-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-accent-sm:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost-hero {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
  padding: 14px 28px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  font-size: 1rem;
}

.btn-ghost-hero:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.20);
}

.btn-ghost-dark {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 11px 22px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
}

.btn-ghost-dark:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.btn-nav-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-nav-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

.btn-nav-accent {
  background: var(--accent);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-nav-accent:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-text-link {
  background: none;
  color: var(--text-secondary);
  padding: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
}

.btn-text-link:hover {
  color: var(--accent);
}

.btn-cta-primary {
  background: var(--accent);
  color: #fff;
  padding: 16px 36px;
  border-radius: var(--radius-lg);
  font-size: 1.0625rem;
  font-weight: 700;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.30);
}

.btn-cta-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(99, 102, 241, 0.40);
}

.btn-cta-ghost {
  background: rgba(99, 102, 241, 0.07);
  color: var(--text-secondary);
  padding: 15px 32px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-lg);
  font-size: 1.0625rem;
  font-weight: 600;
}

.btn-cta-ghost:hover {
  background: rgba(99, 102, 241, 0.12);
  color: var(--text-primary);
  border-color: rgba(99, 102, 241, 0.40);
}

/* ==========================================================================
   6. SCROLL ANIMATIONS
   ========================================================================== 
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up.is-visible { opacity: 1; transform: translateY(0); }

.fade-in {
  opacity: 0;
  transition: opacity 0.65s ease;
}

.fade-in.is-visible { opacity: 1; }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
*/
/* ==========================================================================
   7. ANNOUNCEMENT BAR
   ========================================================================== */
.announcement-bar {
    background: #1b2140;
    background-size: 200% 100%;
    animation: slideGradient 4s linear infinite;
    color: #fff;
    padding: 5px 0;
    position: relative;
    z-index: 200;
    font-size: 13px;
}

@keyframes slideGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.announcement-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 32px;
  flex-wrap: wrap;
}

.announcement-icon { font-size: 1rem; }

.announcement-link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.announcement-link:hover { color: #E0E7FF; }

.announcement-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  font-size: 0.875rem;
  transition: color var(--transition);
}

.announcement-close:hover { color: #fff; }

/* ==========================================================================
   8. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--transition), backdrop-filter var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  background: #fff;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: #fff;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
}

.navbar {
  padding: 0;
}

/* Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent), #4F46E5);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.brand-accent {
  color: var(--accent);
}
.brand-logo img {
    height: 40px;
}
/* Nav links */
.navbar-nav .nav-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar-nav .nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

.nav-chevron {
  font-size: 0.75rem;
  transition: transform var(--transition);
}

.mega-item:hover .nav-chevron {
  transform: rotate(180deg);
}

/* Mega Menu */
.mega-item {
  position: static;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 820px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}

.mega-item:hover .mega-menu,
.mega-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 8px;
}

.mega-col {
  padding: 16px;
}

.mega-col:not(:last-child) {
  border-right: 1px solid var(--border);
}

.mega-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition);
  margin-bottom: 4px;
}

.mega-link:hover {
  background: var(--bg-card);
}

.mega-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.mli-blue   { background: rgba(59,130,246,0.10); color: #2563EB; }
.mli-purple { background: var(--accent-light); color: #6366F1; }
.mli-green  { background: var(--success-light); color: #059669; }
.mli-orange { background: rgba(249,115,22,0.10); color: #EA580C; }
.mli-teal   { background: rgba(20,184,166,0.10); color: #0D9488; }
.mli-pink   { background: rgba(236,72,153,0.10); color: #DB2777; }

.mega-link-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.mega-link-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.mega-col-cta {
  display: flex;
  align-items: center;
}

.mega-cta-card {
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(99,102,241,0.05));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  text-align: center;
}

.mega-cta-icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.mega-cta-card h6 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.mega-cta-card p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Mobile toggler */
.custom-toggler {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background var(--transition);
}

.custom-toggler:hover { background: var(--bg-card-hover); }

.toggler-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-cta-group .btn-nav-accent, .nav-cta-group .btn-accent-sm{
    background: #fff;
    color: #0453a7;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1.5px solid #0453a7;
}
.nav-cta-group .btn-nav-accent:hover, .nav-cta-group .btn-accent-sm:hover{background:#0453a7; color:#fff;}
/* ==========================================================================
   9. HERO SECTION
   ========================================================================== */
.section-hero {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 40px 0;
  background: linear-gradient(170deg, #F0F4FF 0%, #FAFBFF 55%, #EEF2FF 100%);
}
.section-hero .hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-glow-1 {
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 68%);
  top: -250px;
  left: -250px;
}

.hero-glow-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.09) 0%, transparent 68%);
  bottom: -150px;
  right: -150px;
}

.hero-container {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 780px;
  margin: 0 auto;
  padding-bottom: 60px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-full);
  color: #6366F1;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 28px;
  cursor: default;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.3); }
}

.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hero-cta-group .btn-accent{background: #0453a7;color: #fff;}
.hero-cta-group .btn-accent:hover {background: #1768be;color: #fff;}
.btn-ghost-hero .btn-ghost-hero{}
.btn-ghost-hero .btn-ghost-hero:hover{background: #0453a7;color: #fff;}
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.hero-trust span { display: flex; align-items: center; gap: 4px; }

/* ---- Hero Mockup ---- */
.hero-mockup-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* Floating badges */
.float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0,0,0,0.04);
  z-index: 10;
  white-space: nowrap;
}

.float-badge-1 {
  top: -20px;
  left: -20px;
  animation: floatUp 3s ease-in-out infinite;
}

.float-badge-2 {
  top: 60px;
  right: -24px;
  animation: floatDown 3.5s ease-in-out infinite;
}

.float-badge-3 {
  bottom: 60px;
  left: -24px;
  animation: floatUp 4s ease-in-out infinite 0.5s;
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes floatDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.float-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.fbi-green  { background: var(--success-light); color: var(--success); }
.fbi-purple { background: var(--accent-light); color: var(--accent); }

.float-badge-status {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.float-badge-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.float-badge-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Browser mockup */
.browser-mockup {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-hover);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-lg), 0 0 80px rgba(99,102,241,0.08);
  transform: perspective(1200px) rotateX(3deg);
  transition: transform 0.8s ease;
}

.browser-mockup:hover {
  transform: perspective(1200px) rotateX(0deg);
}

.browser-bar {
  background: #F1F5F9;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.bd-red, .bd-yellow, .bd-green {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.bd-red    { background: #FF5F57; }
.bd-yellow { background: #FFBD2E; }
.bd-green  { background: #28CA41; }

.browser-url-bar {
  flex: 1;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  margin: 0 auto;
}

/* ---- Dashboard Window ---- */
.dash-window {
  display: flex;
  height: 400px;
  background: #FFFFFF;
}

/* Sidebar */
.dash-sidebar {
  width: 52px;
  background: #F1F5F9;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 6px;
  flex-shrink: 0;
}

.dash-logo-dot {
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 0 12px var(--accent-glow);
}

.dash-sidenav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.dash-nav-item {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
}

.dash-nav-item:hover {
  background: var(--bg-card);
  color: var(--text-secondary);
}

.dash-nav-active {
  background: var(--accent-light);
  color: var(--accent);
}

.dash-nav-bottom {
  margin-top: auto;
}

/* Dashboard main area */
.dash-main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(248, 250, 252, 0.95);
}

.dash-search-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 180px;
}

.dash-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-notif-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  position: relative;
}

.notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
}

.dash-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #4F46E5);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-page-header {
  padding: 10px 16px 6px;
}

.dash-page-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dash-page-subtitle {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 16px;
}

.dash-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-stat-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.dsi-blue   { background: rgba(59,130,246,0.10); color: #2563EB; }
.dsi-green  { background: var(--success-light); color: var(--success); }
.dsi-yellow { background: var(--warning-light); color: var(--warning); }
.dsi-purple { background: var(--accent-light); color: #6366F1; }

.dash-stat-num {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.dash-stat-lbl {
  font-size: 0.625rem;
  color: var(--text-muted);
}

.dash-stat-change {
  font-size: 0.6rem;
  font-weight: 600;
  margin-top: 2px;
}

.dash-change-up   { color: var(--success); }
.dash-change-down { color: var(--danger); }

.dash-content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 16px;
  flex: 1;
  min-height: 0;
}

.dash-chart-card,
.dash-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
}

.dash-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dash-chart-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dash-chart-badge {
  font-size: 0.5625rem;
  background: var(--accent-light);
  color: #A5B4FC;
  padding: 2px 6px;
  border-radius: 10px;
}

.dash-view-all {
  font-size: 0.5625rem;
  color: var(--accent);
  cursor: pointer;
}

/* Bar chart bars */
.dash-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 65px;
  padding-bottom: 14px;
}

.dash-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 3px;
}

.dash-bar-wrap span {
  font-size: 0.5rem;
  color: var(--text-muted);
}

.mock-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, var(--accent-hover), var(--accent));
}

/* Specific bar heights using nth-child */
.dash-bar-wrap:nth-child(1) .mock-bar { height: 55%; }
.dash-bar-wrap:nth-child(2) .mock-bar { height: 75%; }
.dash-bar-wrap:nth-child(3) .mock-bar { height: 42%; }
.dash-bar-wrap:nth-child(4) .mock-bar { height: 88%; }
.dash-bar-wrap:nth-child(5) .mock-bar { height: 65%; }
.dash-bar-wrap:nth-child(6) .mock-bar { height: 38%; }
.dash-bar-wrap:nth-child(7) .mock-bar { height: 72%; }

/* Alert table */
.dash-table-rows { display: flex; flex-direction: column; gap: 5px; }

.dash-table-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border-radius: 5px;
  background: rgba(0,0,0,0.02);
}

.dash-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-red    { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.dot-yellow { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.dot-green  { background: var(--success); box-shadow: 0 0 6px var(--success); }

.dash-row-info { flex: 1; min-width: 0; }
.dash-row-name { font-size: 0.625rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-sku  { font-size: 0.5rem; color: var(--text-muted); }

.dash-row-badge {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.badge-out { background: var(--danger-light); color: var(--danger); }
.badge-low { background: var(--warning-light); color: var(--warning); }
.badge-ok  { background: var(--success-light); color: var(--success); }

.inventory-ecosystem{position:relative;width:100%;max-width:520px;height:440px;margin:0 auto}

.ecosystem-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.ecosystem-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,#023f80,#0453a7,#0369c7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;animation:ihub-pulse 2.5s ease-in-out infinite;z-index:2}
.ecosystem-hub-icon{font-size:1.9rem;color:#fff}
.ecosystem-hub-title{font-size:.5rem;font-weight:800;color:rgba(255,255,255,.88);letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.4}

.ecosystem-module{position:absolute;width:106px;text-align:center;transform:translate(-50%,-50%)}
.module-inventory{left:82.7%;top:50%}
.module-analytics{left:66.3%;top:13.2%}
.module-warehouse{left:33.7%;top:13.2%}
.module-purchase{left:17.3%;top:50%}
.module-asset{left:33.7%;top:86.8%}
.module-sales{left:66.3%;top:86.8%}

.ecosystem-card{border-radius:14px;padding:12px 8px;backdrop-filter:blur(8px);border:1.5px solid}
.ecosystem-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px; color:#fff;}
.ecosystem-icon i{color:#fff;font-size:.82rem}
.ecosystem-label{font-size:.6rem;font-weight:700;color:#384155;line-height:1.35}

/* Inventory */
.inventory-card{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.45)}
.inventory-icon{background:#3b82f6}

/* Analytics */
.ecosystem-card.analytics-card{background: rgba(234, 88, 12, 0.15);
    border: 1.5px solid rgba(234, 88, 12, 0.45);
    border-radius: 14px;
    padding: 12px 8px;
    backdrop-filter: blur(8px);}
.ecosystem-card .analytics-icon{background:#ea580c}

/* Warehouse */
.warehouse-card{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.45)}
.warehouse-icon{background:#8b5cf6}

/* Purchase Orders */
.purchase-card{background:rgba(13,148,136,.15);border-color:rgba(13,148,136,.45)}
.purchase-icon{background:#0d9488}

/* Asset Tracking */
.asset-card{background:rgba(22,163,74,.15);border-color:rgba(22,163,74,.45)}
.asset-icon{background:#16a34a}

/* Multi Channel Sales */
.sales-card{background:rgba(190,24,93,.15);border-color:rgba(190,24,93,.45)}
.sales-icon{background:#be185d}

.ecosystem-glow{fill:url(#hero-hub-glow)}

.ecosystem-line{stroke-width:1.5;stroke-dasharray:7 5;opacity:.65;fill:none;animation:ecosystem-flow 1.6s linear infinite}
.line-inventory{stroke:#3b82f6}
.line-analytics{stroke:#ea580c;animation-duration:1.8s}
.line-warehouse{stroke:#8b5cf6;animation-duration:1.6s}
.line-purchase{stroke:#0d9488;animation-duration:1.5s}
.line-asset{stroke:#16a34a;animation-duration:1.7s}
.line-sales{stroke:#be185d;animation-duration:1.3s}

.inventory-dot{fill:#3b82f6}
.analytics-dot{fill:#ea580c}
.warehouse-dot{fill:#8b5cf6}
.purchase-dot{fill:#0d9488}
.asset-dot{fill:#16a34a}
.sales-dot{fill:#be185d}

.ecosystem-dot{opacity:.9}

@keyframes ecosystem-flow{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-18}
}

@keyframes ihub-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.05)}
}

/* ==========================================================================
   10. TRUSTED / INTEGRATIONS
   ========================================================================== */
.section-trusted {
  padding: 48px 0 68px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.trusted-label {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 28px;
}

.trusted-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.trust-logo {
  padding: 10px 20px;
  opacity: 0.4;
  transition: opacity var(--transition);
}

.trust-logo:hover { opacity: 0.7; }

.trust-logo span {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.tl-shopify  { color: #96BF48; }
.tl-amazon   { color: #FF9900; }
.tl-woo      { color: #9B5C8F; }
.tl-qb       { color: #2CA01C; }
.tl-xero     { color: #13B5EA; }
.tl-sf       { color: #00A1E0; }
.tl-stripe   { color: #635BFF; }
.tl-slack    { color: #E01E5A; }

.trusted-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.trusted-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px;
  gap: 4px;
}

.trusted-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

.ts-num {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
}

.ts-plus { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.ts-label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; }

/* ==========================================================================
   11. DASHBOARD PREVIEW SECTION
   ========================================================================== */
.section-preview {
  padding: var(--section-py) 0;
  background: var(--bg-secondary);
}

.preview-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.preview-tab {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-primary);
}

.preview-tab:hover { background: var(--bg-card); color: var(--text-primary); }
.preview-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.preview-window-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.preview-window {
  display: flex;
  height: 520px;
  background: #F8FAFC;
}

.preview-sidebar {
  width: 200px;
  background: #F1F5F9;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex-shrink: 0;
}

.preview-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.preview-brand i { color: var(--accent); font-size: 1.1rem; }

.preview-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
  flex: 1;
}

.pnav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.pnav-item:hover { background: var(--bg-card); color: var(--text-secondary); }
.pnav-item.pnav-active { background: var(--accent-light); color: var(--accent); }
.pnav-item i { font-size: 0.9rem; width: 16px; flex-shrink: 0; }

.preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
  gap: 16px;
}

.preview-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.preview-page-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.preview-page-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.preview-header-actions {
  display: flex;
  gap: 8px;
}

.preview-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-primary);
}

.preview-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.preview-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.preview-btn-primary:hover { background: var(--accent-hover); }

.preview-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.preview-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.ps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ps-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

.ps-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.psi-blue   { background: rgba(59,130,246,0.10); color: #2563EB; }
.psi-green  { background: var(--success-light); color: var(--success); }
.psi-yellow { background: var(--warning-light); color: var(--warning); }
.psi-purple { background: var(--accent-light); color: #6366F1; }

.ps-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.ps-trend {
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}

.trend-up   { color: var(--success); }
.trend-down { color: var(--warning); }

.preview-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.preview-chart-box,
.preview-table-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  overflow: hidden;
}

.preview-chart-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.preview-linechart { height: 70px; overflow: hidden; }

.preview-svg-chart {
  width: 100%;
  height: 100%;
}

.preview-mini-table { display: flex; flex-direction: column; gap: 4px; }

.pmt-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  font-size: 0.75rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.pmt-row:last-child { border-bottom: none; }

.pmt-head {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   12. FEATURES SECTION
   ========================================================================== */
.section-features {
  padding: var(--section-py) 0;
  background: var(--bg-primary);
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  height: 100%;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.feature-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.feature-card:hover::before { opacity: 1; }

.feature-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.fic-blue   { background: rgba(59,130,246,0.12); color: #60A5FA; }
.fic-purple { background: var(--accent-light); color: #A5B4FC; }
.fic-green  { background: var(--success-light); color: var(--success); }
.fic-orange { background: rgba(249,115,22,0.12); color: #FB923C; }
.fic-teal   { background: rgba(20,184,166,0.12); color: #2DD4BF; }
.fic-pink   { background: rgba(236,72,153,0.12); color: #F472B6; }

.feature-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.feature-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--transition);
}

.feature-link:hover { gap: 10px; color: #818CF8; }

/* ==========================================================================
   13. SPLIT SECTIONS (Alternating layout)
   ========================================================================== */
.section-split {
  padding: var(--section-py) 0;
}

.section-automation { background: var(--bg-secondary); }
.section-barcode    { background: var(--bg-primary); }
.section-warehouse  { background: var(--bg-secondary); }
.section-analytics  { background: var(--bg-primary); }

.section-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Feature list */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.fl-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.fli-green  { background: var(--success-light); color: var(--success); }
.fli-purple { background: var(--accent-light); color: #A5B4FC; }
.fli-pink   { background: rgba(236,72,153,0.12); color: #F472B6; }

.feature-list li strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.feature-list li p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.65;
}

/* ---- Split visuals ---- */
.split-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Automation visual */
.sv-automation {
  padding: 0;
}

.auto-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.auto-card-main { }

.auto-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.auto-header-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
}

.auto-header-badge {
  margin-left: auto;
  background: var(--success-light);
  color: var(--success);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.auto-rules {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auto-rule {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}

.auto-rule-sku  { font-size: 0.6875rem; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.auto-rule-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }

.auto-rule-threshold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.auto-threshold-bar {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.07);
  border-radius: 3px;
  overflow: hidden;
}

.auto-threshold-fill {
  height: 100%;
  border-radius: 3px;
}

.atf-red    { width: 4%;  background: var(--danger); }
.atf-yellow { width: 12%; background: var(--warning); }
.atf-green  { width: 78%; background: var(--success); }

.auto-rule-stock {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.auto-rule-action {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.action-triggered { background: var(--accent-light); color: var(--accent); }
.action-pending   { background: var(--warning-light); color: var(--warning); }
.action-ok        { background: var(--success-light); color: var(--success); }

.auto-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-top: 12px;
}

.auto-notif-icon { color: var(--success); font-size: 1.1rem; flex-shrink: 0; }
.auto-notif-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.auto-notif-sub   { font-size: 0.75rem; color: var(--text-muted); }

/* ---- Automation page: activity feed + rule builder ---- */
.auto-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent);
  white-space: nowrap;
  margin-left: auto;
}
.ab-green {
  background: var(--success-light);
  color: var(--success);
}

.auto-threshold-label { font-size: 0.75rem; color: var(--text-muted); }
.auto-threshold-val   { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); margin-left: auto; }

.atf-94 { width: 94%; background: var(--success); }

/* Auto-rule with icon + body + status layout */
.auto-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.auto-rule:last-child { margin-bottom: 0; }

.auto-rule-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.ari-green  { background: rgba(16,185,129,0.12);  color: #10B981; }
.ari-blue   { background: rgba(59,130,246,0.12);   color: #60A5FA; }
.ari-orange { background: rgba(249,115,22,0.12);   color: #FB923C; }
.ari-purple { background: rgba(139,92,246,0.12);   color: #A78BFA; }
.ari-teal   { background: rgba(20,184,166,0.12);   color: #2DD4BF; }

.auto-rule-body { flex: 1; min-width: 0; }
.auto-rule-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.auto-rule-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }

.auto-rule-status {
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.ars-green  { background: var(--success-light); color: var(--success); }
.ars-yellow { background: var(--warning-light); color: var(--warning); }

/* Rule builder interactive options */
.rule-option {
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-lg) !important;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.rule-option:hover {
  border-color: var(--accent) !important;
  background: rgba(99,102,241,0.05) !important;
}

/* Feed item subtle animation on update */
.feed-item { transition: opacity 0.3s; }

/* Benefit stat card (ROI section) */
.benefit-stat-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.benefit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.bsc-icon { font-size: 1.75rem; color: var(--accent); margin-bottom: 0.75rem; }
.bsc-num  { font-size: 2.75rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.bsc-plus { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.bsc-label { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem; display: block; }

/* Benefit card extra icon variants */
.bci-purple { background: rgba(139,92,246,0.12); color: #A78BFA; }
.bci-teal   { background: rgba(20,184,166,0.12);  color: #2DD4BF; }

/* ---- Barcode visual ---- */
.sv-barcode {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.barcode-phone {
  width: 220px;
  background: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(99,102,241,0.15);
  position: relative;
}

.phone-notch {
  width: 80px;
  height: 20px;
  background: #F8FAFC;
  border-radius: 0 0 14px 14px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  border: 1px solid #E2E8F0;
  border-top: none;
}

.phone-screen {
  padding: 0 12px 16px;
  min-height: 340px;
}

.phone-screen-header {
  text-align: center;
  padding: 8px 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.phone-scan-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scan-frame {
  width: 150px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sf-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--accent);
  border-style: solid;
}

.sf-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.sf-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.sf-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.sf-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.scan-line {
  width: 140px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: scanMove 1.5s linear infinite;
  position: absolute;
}

@keyframes scanMove {
  0%   { top: 10px; opacity: 1; }
  90%  { top: 110px; opacity: 1; }
  100% { top: 110px; opacity: 0; }
}

.scan-result {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--success-light);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  width: 100%;
}

.scan-result-icon { color: var(--success); font-size: 1rem; }
.scan-product-name { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); }
.scan-product-sku  { font-size: 0.625rem; color: var(--text-muted); }

.phone-action-row {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.phone-btn {
  flex: 1;
  padding: 7px;
  border-radius: var(--radius-md);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font-primary);
}

.pb-primary   { background: var(--accent); color: #fff; }
.pb-secondary { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); }

.barcode-info-card {
  position: absolute;
  bottom: 20px;
  right: 0;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(12px);
}

.bic-icon { color: var(--warning); font-size: 1.2rem; }
.bic-stat  { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.bic-label { font-size: 0.6875rem; color: var(--text-muted); }

/* ---- Warehouse visual ---- */
.sv-warehouse { padding: 0; }

.warehouse-map {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-lg);
}

.warehouse-map-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.wh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wh-zone {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.wz-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 10px;
}

.wh-bins {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.wh-bin {
  flex: 1;
  height: 36px;
  border-radius: 5px;
  transition: opacity var(--transition);
}

.wb-full  { background: var(--success); opacity: 0.85; }
.wb-mid   { background: var(--warning); opacity: 0.7; }
.wb-low   { background: var(--danger); opacity: 0.7; }
.wb-empty { background: rgba(0,0,0,0.10); }

.wz-count {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Warehouse feature grid */
.warehouse-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.wf-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: border-color var(--transition);
}

.wf-item:hover { border-color: var(--border-hover); }

.wf-icon {
  font-size: 1.25rem;
  color: var(--accent);
  margin-bottom: 8px;
}

.wf-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.wf-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ---- Warehouse Management page ---- */

/* Hero stat strip */
.wh-hero-stat {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.whs-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.whs-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Floor plan wrapper */
.wh-floor-wrap {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.wh-floor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.wh-floor-title { font-weight: 600; }
.wh-floor-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--success);
  background: var(--success-light);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

/* Floor grid layout */
.wh-floor {
  display: grid;
  grid-template-areas:
    "receiving receiving dispatch"
    "zone-a    zone-b    dispatch"
    "cold      zone-c    dispatch";
  grid-template-columns: 1fr 1fr 0.7fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
  padding: 12px;
}

/* Zone blocks */
.wh-floor-zone {
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  border: 2px solid transparent;
  user-select: none;
}
.wh-floor-zone:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08);
}
.wh-floor-zone.wfz-active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.12) !important;
  transform: scale(1.01);
}

/* Zone colour schemes */
.wfz-receiving { grid-area: receiving; background: rgba(16,185,129,0.06); }
.wfz-a         { grid-area: zone-a;   background: rgba(99,102,241,0.06); }
.wfz-b         { grid-area: zone-b;   background: rgba(59,130,246,0.05); }
.wfz-c         { grid-area: zone-c;   background: rgba(249,115,22,0.05); }
.wfz-cold      { grid-area: cold;     background: rgba(20,184,166,0.07); }
.wfz-dispatch  { grid-area: dispatch; background: rgba(139,92,246,0.06); }

.wfz-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

/* Mini bin dots inside zones */
.wfz-bins {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 6px;
}
.wfz-bin {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(0,0,0,0.08);
}
.wfzb-full     { background: var(--success); opacity: 0.85; }
.wfzb-mid      { background: var(--warning); opacity: 0.8; }
.wfzb-low      { background: var(--danger);  opacity: 0.8; }
.wfzb-empty    { background: rgba(0,0,0,0.08); }
.wfzb-active   { background: var(--accent);  opacity: 0.85; }
.wfzb-cold     { background: #2DD4BF; opacity: 0.85; }
.wfzb-dispatch { background: #A78BFA; opacity: 0.85; }

.wfz-util {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Legend */
.wh-floor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.wfl-item { display: flex; align-items: center; gap: 5px; }
.wfl-dot {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}
.wfl-full  { background: var(--success); }
.wfl-mid   { background: var(--warning); }
.wfl-low   { background: var(--danger); }
.wfl-empty { background: rgba(0,0,0,0.12); }
.wfl-cold  { background: #2DD4BF; }

/* Zone detail panel */
.wh-detail-panel {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  min-height: 320px;
}
.wdp-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1.25rem;
}
.wdp-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: var(--radius-lg);
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.wdp-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.wdp-sub   { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

.wdp-stat {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  text-align: center;
}
.wdp-stat-num   { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
.wdp-stat-label { font-size: 0.6875rem; color: var(--text-muted); font-weight: 500; }

.wdp-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ac-metric-box (used in cycle count demo) */
.ac-metric-box {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  text-align: center;
}
.ac-metric-val   { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
.ac-metric-label { font-size: 0.75rem; color: var(--text-muted); }

/* Pick route simulator */
.pick-grid-wrap {
  padding: 16px;
}
.pick-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}
.pick-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  transition: background 0.3s, transform 0.2s, border-color 0.3s;
}
.pc-item {
  background: rgba(99,102,241,0.1);
  border-color: var(--accent);
  color: var(--accent);
}
.pc-item .pc-num {
  width: 18px; height: 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; font-weight: 800;
}
.pc-current {
  background: rgba(245,158,11,0.18) !important;
  border-color: var(--warning) !important;
  transform: scale(1.15);
  z-index: 1;
}
.pc-picked {
  background: rgba(16,185,129,0.12) !important;
  border-color: var(--success) !important;
  color: var(--success);
}
.pc-check { font-size: 0.875rem; color: var(--success); }

.pick-grid-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  font-size: 0.625rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}

/* Warehouse feature list */
.wh-feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.wh-feature-list li {
  padding: 6px 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

/* mb-6 utility */
.mb-6 { margin-bottom: 4rem; }

/* ---- Analytics visual ---- */
.sv-analytics { padding: 0; }

.analytics-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.ac-main { padding: 22px; }

.analytics-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ac-title { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); }
.ac-period { font-size: 0.75rem; color: var(--text-muted); }

.analytics-kpis { display: flex; flex-direction: column; gap: 14px; }

.akpi-value { font-size: 1.375rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; }
.akpi-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; margin-bottom: 7px; }

.akpi-bar {
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.akpi-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1.5s ease;
}

.abf-green  { width: 0; background: var(--success); }
.abf-blue   { width: 0; background: var(--accent); }
.abf-yellow { width: 0; background: var(--warning); }

.akpi-bar-fill.is-animated.abf-green  { width: 94%; }
.akpi-bar-fill.is-animated.abf-blue   { width: 83%; }
.akpi-bar-fill.is-animated.abf-yellow { width: 21%; }

.ac-secondary {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.ac-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.ac-mini-bar {
  width: 8px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  opacity: 0.7;
}

.acmb-1 { height: 50%; }
.acmb-2 { height: 70%; }
.acmb-3 { height: 55%; }
.acmb-4 { height: 90%; }
.acmb-5 { height: 75%; }
.acmb-6 { height: 100%; }

.ac-mini-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.industry-selector{padding:32px 20px 24px}

.industry-title{font-size:.58rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.18em;margin-bottom:18px}

.industry-nav{list-style:none;padding:0;margin:0}

.industry-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.industry-icon i{font-size:.8rem}

.industry-content{flex:1}

.industry-name{font-size:.82rem;font-weight:700;line-height:1.3}
.industry-desc{font-size:.6rem;opacity:.42;margin-top:2px}

.iuc-tab-chevron{font-size:.55rem;opacity:.28;flex-shrink:0}

/* Color Variants */
.industry-icon-blue{background:rgba(59,130,246,.2)}
.industry-icon-blue i{color:#60a5fa}

.industry-icon-orange{background:rgba(234,88,12,.2)}
.industry-icon-orange i{color:#fb923c}

.industry-icon-purple{background:rgba(139,92,246,.2)}
.industry-icon-purple i{color:#a78bfa}

.industry-icon-teal{background:rgba(13,148,136,.2)}
.industry-icon-teal i{color:#2dd4bf}

.industry-icon-green{background:rgba(22,163,74,.2)}
.industry-icon-green i{color:#4ade80}
/* ===================================
   COMMON TAB STYLES
=================================== */

.tab-pane{height:100%}

.industry-pane{height:100%;padding:40px 40px 36px}

.industry-header{display:flex;align-items:flex-start;gap:18px;margin-bottom:22px}

.industry-feature-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.industry-feature-icon svg{font-size:1.35rem}

.industry-pane-title{font-size:1.2rem;font-weight:800;color:#1a1a2e;margin:0 0 5px;line-height:1.3}

.industry-pane-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}

.industry-pane-desc{color:#475569;line-height:1.85;margin-bottom:28px;font-size:.97rem;max-width:600px}

.industry-feature-card{display:flex;align-items:center;gap:12px;border-radius:12px;padding:13px 16px}

.industry-feature-card-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.industry-feature-card-icon i{color:#fff;font-size:.75rem}

.industry-feature-text{font-size:.875rem;font-weight:600}

/* ===================================
   WAREHOUSE
=================================== */

.warehouse-pane{border-top:3px solid #3b82f6}
.warehouse-feature-icon{background:#eff6ff}
.warehouse-feature-icon svg,
.warehouse-badge{color:#3b82f6}
.warehouse-feature-card{background:#eff6ff}
.warehouse-card-icon{background:#3b82f6; color: #fff;}
.warehouse-feature-text{color:#1e3a5f}

/* ===================================
   RETAIL
=================================== */

.retail-pane{border-top:3px solid #ea580c}
.retail-feature-icon{background:#fff7ed}
.retail-feature-icon svg,
.retail-badge{color:#ea580c}
.retail-feature-card{background:#fff7ed}
.retail-card-icon{background:#ea580c; color: #fff;}
.retail-feature-text{color:#431407}

/* ===================================
   MANUFACTURING
=================================== */

.manufacturing-pane{border-top:3px solid #8b5cf6}
.manufacturing-feature-icon{background:#f0f8ff}
.manufacturing-feature-icon svg,
.manufacturing-badge{color:#8b5cf6}
.manufacturing-feature-card{background:#f0f8ff}
.manufacturing-card-icon{background:#8b5cf6; color: #fff;}
.manufacturing-feature-text{color:#2e1065}

/* ===================================
   HEALTHCARE
=================================== */

.healthcare-pane{border-top:3px solid #0d9488}
.healthcare-feature-icon{background:#f0fdfa}
.healthcare-feature-icon svg,
.healthcare-badge{color:#0d9488}
.healthcare-feature-card{background:#f0fdfa}
.healthcare-card-icon{background:#0d9488; color: #fff;}
.healthcare-feature-text{color:#042f2e}

/* ===================================
   LOGISTICS
=================================== */

.logistics-pane{border-top:3px solid #16a34a}
.logistics-feature-icon{background:#f0fdf4}
.logistics-feature-icon svg,
.logistics-badge{color:#16a34a}
.logistics-feature-card{background:#f0fdf4}
.logistics-card-icon{background:#16a34a; color: #fff;}
.logistics-feature-text{color:#052e16}

.industry-sidebar-footer{
    margin-top:auto;
    padding:20px;
    border-top:1px solid #e2e8f0;
}

.industry-footer-status{
    display:flex;
    align-items:center;
    gap:8px;
}

.industry-footer-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#16a34a;
    display:block;
    animation:ihub-pulse 2s ease-in-out infinite;
}

.industry-footer-text{
    font-size:.6rem;
    color:#94a3b8;
    line-height:1.5;
}
/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:767px){
  .industry-pane{padding:24px 20px}
  .industry-header{gap:14px}
  .industry-feature-icon{width:48px;height:48px}
  .industry-feature-icon i{font-size:1.15rem}
  .industry-pane-title{font-size:1rem}
  .industry-pane-desc{font-size:.9rem}
}
/* ==========================================================================
   14. MULTI-LOCATION SECTION
   ========================================================================== */
.section-multilocation {
  padding: var(--section-py) 0;
  background: var(--bg-secondary);
}

.multiloc-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: center;
}

.multiloc-map {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.multiloc-map-inner {
  height: 300px;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(99,102,241,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(16,185,129,0.10) 0%, transparent 50%),
    #EEF2FF;
}

.map-point {
  position: absolute;
  cursor: pointer;
}

.mp-1 { top: 35%; left: 68%; }
.mp-2 { top: 28%; left: 42%; }
.mp-3 { top: 55%; left: 18%; }
.mp-4 { top: 65%; left: 62%; }

.map-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), 0 0 16px var(--accent-glow);
  cursor: pointer;
}

.map-dot::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.5;
  animation: ripple 2s ease-out infinite;
}

@keyframes ripple {
  0%   { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

.map-tooltip {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13, 21, 36, 0.95);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}

.map-tooltip span { color: var(--text-muted); font-weight: 400; }
.map-point:hover .map-tooltip { opacity: 1; }

.multiloc-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mlstat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color var(--transition);
}

.mlstat-card:hover { border-color: var(--border-hover); }

.mlstat-num {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

.mlstat-label { font-size: 0.8125rem; color: var(--text-muted); }

.mlstat-highlight {
  border-color: rgba(99,102,241,0.3);
  background: var(--accent-light);
}

.mlstat-highlight .mlstat-num { color: var(--accent); }

/* ==========================================================================
   15. BENEFITS
   ========================================================================== */
.section-benefits {
  padding: var(--section-py) 0;
  background: var(--bg-primary);
}

.benefits-stats-row {
  margin-bottom: 48px;
}

.benefit-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 20px;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}

.benefit-stat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.bsc-icon {
  font-size: 1.75rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.bsc-num {
  display: inline;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.04em;
}

.bsc-plus {
  display: inline;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.bsc-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.benefit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition);
}

.benefit-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.bc-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}

.bci-green  { background: var(--success-light); color: var(--success); }
.bci-blue   { background: rgba(59,130,246,0.12); color: #60A5FA; }
.bci-orange { background: rgba(249,115,22,0.12); color: #FB923C; }

.bc-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.bc-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ==========================================================================
   16. COMPARISON TABLE
   ========================================================================== */
.section-comparison {
  padding: var(--section-py) 0;
  background: var(--bg-secondary);
}

.comparison-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.comparison-table-wrapper {
  min-width: 700px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.comparison-table thead tr {
  background: #F8FAFC;
  border-bottom: 1px solid var(--border);
}

.comparison-table thead th {
  padding: 18px 22px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
}

.ct-feature-col {
  text-align: left !important;
  width: 34%;
}

.ct-highlight {
  background: rgba(99, 102, 241, 0.08);
  border-left: 1px solid rgba(99, 102, 241, 0.2);
  border-right: 1px solid rgba(99, 102, 241, 0.2);
  color: var(--text-primary) !important;
}

.ct-highlight-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ct-best-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.comparison-table tbody tr:last-child { border-bottom: none; }
.comparison-table tbody tr:hover { background: rgba(0,0,0,0.02); }

.comparison-table tbody td {
  padding: 14px 22px;
  font-size: 0.875rem;
  text-align: center;
}

.ct-feature {
  text-align: left !important;
  font-weight: 500;
  color: var(--text-primary);
}

.ct-yes {
  color: var(--success);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ct-yes span { font-size: 0.8125rem; }

.ct-no {
  color: var(--danger);
  opacity: 0.7;
}

.ct-partial {
  color: var(--warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.ct-partial span { font-size: 0.75rem; }
.ct-neutral { color: var(--text-muted); font-size: 0.8125rem; }

.ct-highlight {
  background: rgba(99, 102, 241, 0.05) !important;
  border-left: 1px solid rgba(99, 102, 241, 0.15) !important;
  border-right: 1px solid rgba(99, 102, 241, 0.15) !important;
}

/* ==========================================================================
   17. TESTIMONIALS
   ========================================================================== */
.section-testimonials {
  padding: var(--section-py) 0;
  background: var(--bg-primary);
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.tc-featured {
  border-color: rgba(99,102,241,0.3);
  background: rgba(99,102,241,0.05);
  position: relative;
}

.tc-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #818CF8, var(--accent));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.tc-stars { color: #FBBF24; font-size: 0.875rem; display: flex; gap: 2px; }

.tc-quote {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  font-style: normal;
  margin: 0;
}

.tc-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.tc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.ta-blue   { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.ta-purple { background: linear-gradient(135deg, var(--accent), #4F46E5); }
.ta-green  { background: linear-gradient(135deg, var(--success), #059669); }

.tc-name { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); }
.tc-role { font-size: 0.8125rem; color: var(--text-muted); }

.testimonials-bottom {
  margin-top: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.reviews-aggregate {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.ra-stars { color: #FBBF24; font-size: 1rem; display: flex; gap: 2px; }
.ra-score { font-size: 1.0625rem; font-weight: 800; color: var(--text-primary); }
.ra-count { font-size: 0.875rem; color: var(--text-muted); }

.review-platforms {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.rp-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ==========================================================================
   18. FAQ SECTION
   ========================================================================== */
.section-faq {
  padding: var(--section-py) 0;
  background: var(--bg-secondary);
}

.faq-contact-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-sidebar-cta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 28px;
}

.faq-accordion { display: flex; flex-direction: column; gap: 8px; }

.faq-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: border-color var(--transition);
}

.faq-item:hover { border-color: var(--border-hover) !important; }

.faq-button {
  background: transparent !important;
  color: var(--text-primary) !important;
  font-family: var(--font-primary) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  padding: 18px 20px !important;
  box-shadow: none !important;
  border: none !important;
}

.faq-button:not(.collapsed) {
  color: var(--accent) !important;
  background: rgba(99,102,241,0.05) !important;
}

.faq-button::after {
  filter: none !important;
  opacity: 0.6;
}

.faq-body {
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
  padding: 0 20px 18px !important;
  border-top: 1px solid var(--border);
}
/* ── FAQ ─────────────────────────────────────────────────────────────────── */.hm-faq{background:#fff;padding:80px 0;border-top:1px solid #e2e8f0;}.hm-faq-wrap{max-width:780px;margin:48px auto 0;}.hm-faq-item{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;margin-bottom:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}.hm-faq-item.open{border-color:#bfdbfe;box-shadow:0 2px 12px rgba(4,83,167,.06);}.hm-faq-q{padding:18px 22px;font-size:0.93rem;font-weight:700;color:#0f172a;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.45;}.hm-faq-item.open .hm-faq-q{color:#0453a7;}.hm-faq-icon{width:30px;height:30px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0453a7;font-size:0.8rem;transition:all .2s;}.hm-faq-item.open .hm-faq-icon{background:#dbeafe;border-color:#bfdbfe;transform:rotate(45deg);}.hm-faq-a{display:none;padding:0 22px 18px;font-size:0.875rem;color:#475569;line-height:1.88;}.hm-faq-a a{color:#0453a7;font-weight:600;text-decoration:none;}.hm-faq-a a:hover{text-decoration:underline;}.hm-faq-item.open .hm-faq-a{display:block;}
/* ==========================================================================
   19. BLOG SECTION
   ========================================================================== */
.section-blog {
  padding: var(--section-py) 0;
  background: #F8FAFC;
}

.section-blog .section-badge {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.2);
  color: var(--accent);
}

.section-blog .section-title {
  color: var(--text-dark);
}

.section-blog .gradient-text {
  background: linear-gradient(135deg, #1E293B 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.post-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  border-color: #c7d2fe;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(99,102,241,0.1), 0 4px 10px rgba(0,0,0,0.05);
}

.post-thumbnail {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pt-blue   { background: linear-gradient(135deg, #EEF2FF, #E0E7FF); }
.pt-purple { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); }
.pt-green  { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); }

.pt-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}

.pt-blue .pt-icon   { color: var(--accent); }
.pt-purple .pt-icon { color: #7C3AED; }
.pt-green .pt-icon  { color: var(--success); }

.post-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-category {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(99,102,241,0.08);
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

.post-date { font-size: 0.75rem; color: #94A3B8; }

.post-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  margin: 0;
  flex: 1;
}

.post-title a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color var(--transition);
}

.post-title a:hover { color: var(--accent); }

.post-excerpt {
  font-size: 0.875rem;
  color: #64748B;
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
  margin-top: auto;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pa-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #4F46E5);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa-name { font-size: 0.8125rem; font-weight: 600; color: #475569; }

.post-read-more {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}

.post-read-more:hover { gap: 8px; color: #4F46E5; }

/* ==========================================================================
   20. CTA BANNER
   ========================================================================== */
.section-cta {
  padding: var(--section-py) 0;
  background: linear-gradient(170deg, #EEF2FF 0%, #F5F3FF 55%, #E0E7FF 100%);
  position: relative;
  overflow: hidden;
}

.cta-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cta-glow-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 68%);
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
}

.cta-glow-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
  bottom: -100px;
  right: 10%;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

.cta-icon-wrap {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 20px;
  display: block;
  filter: drop-shadow(0 0 20px var(--accent-glow));
}

.cta-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.cta-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 36px;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.cta-trust span { display: flex; align-items: center; gap: 5px; }

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
   /* ==========================================================================
   Pre-Footer CTA
   ========================================================================== */
.prefooter-cta {
  padding: 40px 0;
  background: #fff;
}

.prefooter-cta-card {
  background: linear-gradient(135deg,#f0f8ff 0%,#eff6ff 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: 24px;
  padding: 56px 52px;
  position: relative;
  overflow: hidden;
}

.prefooter-cta-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117, 79, 206, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.prefooter-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(117, 79, 206, 0.10);
  border: 1px solid rgba(117, 79, 206, 0.22);
  color: #754fce;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.prefooter-cta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.prefooter-cta-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #384155;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 14px;
}

.prefooter-grad {
  background: linear-gradient(135deg, #384155 0%, #0453a7 40%, #6366F1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.prefooter-cta-sub {
  font-size: 0.9375rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 480px;
}

.prefooter-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.prefooter-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.prefooter-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #475569;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.prefooter-btn-ghost:hover {
    color: #0453a7;
    border-color: rgb(4 83 167);
    transform: translateY(-2px);
    text-decoration: none;
}

.prefooter-trust-note {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.site-footer {
  background: #07101E;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  /* Scope dark-theme vars for this isolated dark section */
  --text-primary:   #F1F5FB;
  --text-secondary: #A8BDD4;
  --text-muted:     #7A90A8;
  --border:         rgba(255, 255, 255, 0.11);
  --border-hover:   rgba(255, 255, 255, 0.22);
  --bg-card:        rgba(255, 255, 255, 0.065);
  --bg-card-hover:  rgba(255, 255, 255, 0.10);
}

.footer-top {
  padding: 72px 0 60px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer-top .footer-brand img {
 height: 35px;
}
.footer-desc {
  font-size: 0.875rem;
  color: #fff;
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: all var(--transition);
  text-decoration: none;
}

.social-link:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.footer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-badge-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.footer-heading {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-primary);
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: "";
    display: block;
    width: 55%;
    height: 1.5px;
    background-color: #0453a7;
    margin-top: 6px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  font-size: 0.85rem;
  color: #fff;
  text-decoration: none;
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--text-primary); }

.footer-newsletter-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.6;
}

.fn-input-wrap {
  display: flex;
  gap: 0;
}

.fn-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: var(--font-primary);
  transition: border-color var(--transition);
  outline: none;
}

.fn-input:focus { border-color: var(--accent); }
.fn-input::placeholder { color: var(--text-muted); }

.fn-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 16px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--transition);
}

.fn-btn:hover { background: var(--accent-hover); }

.fn-note {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 7px;
  margin-bottom: 0;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal a {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-legal a:hover { color: var(--text-primary); }

/* ==========================================================================
   22. STICKY CTA (Mobile)
   ========================================================================== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  border-top: 1px solid var(--border);
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.sticky-cta.is-visible {
  transform: translateY(0);
}
.navbar-logo{display:none;}
.platform-command-center{
    position:relative;
    width:100%;
    max-width:480px;
    margin:0 auto;
    padding:20px 20px 24px;
}

/* ==========================================================================
   24. PRINT / ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up, .fade-in {
    opacity: 1;
    transform: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Section */
.why-choose-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f0f8ff 0%, #eff6ff 100%);
    
}

/* Header */
.why-choose-section .section-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    font-weight: 600;
    margin-bottom: 15px;
}

.section-title {
    color: #111827;
    font-weight: 700;
    margin-bottom: 50px;
}



/* Card */
.why-card {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    padding: 28px 24px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

.why-card h5 {
    font-size: 1rem;
    font-weight: 400;
    color: #1e293b;
    line-height: 1.6;
    margin: 0;
}

/* Icon Box */
.icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 1.1rem;
}

/* Variants */
.icon-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.icon-green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.icon-purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.icon-teal {
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
}


/* Future Platform Section */
.future-platform-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f0f8ff 0%, #eff6ff 100%);
    
}

/* Card */
.future-card {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    padding: 28px 24px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
}

.future-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

.future-card h5 {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}


.capability-highlight { position: relative; overflow: hidden; padding: 40px 48px; border-radius: 20px; margin-top: 0; background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); border: 1px solid #dbeafe; } .capability-circle { position: absolute; top: -20px; right: -20px; width: 120px; height: 120px; border-radius: 50%; background: rgba(37, 99, 235, 0.05); } .capability-heading { position: relative; z-index: 1; margin: 0; color: #0f172a; font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 800; line-height: 1.4; } .gradient-highlight { background: linear-gradient(90deg, #2563eb, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .capability-description { margin: 20px 0; color: #64748b; font-size: 1.05rem; line-height: 1.85; }

@keyframes ihub-pulse{0%,100%{box-shadow:0 0 0 0 rgba(4,83,167,.5),0 16px 60px rgba(4,83,167,.4)}50%{box-shadow:0 0 0 24px rgba(4,83,167,.04),0 16px 60px rgba(4,83,167,.4)}}
@keyframes ihub-flow{to{stroke-dashoffset:-18}}
.iuc-tab{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;width:100%;background:#fff;border:1px solid #e2e8f0;color:#64748b;cursor:pointer;transition:all .2s;text-align:left;}
.iuc-tab:hover{background:#f0f8ff;color:#1a1a2e;border-color:#bfdbfe;}
.iuc-tab.active{background:#dbeafe;color:#0453a7;border-color:#bfdbfe;box-shadow:0 0 0 1px rgba(4,83,167,0.08) inset;}
.iuc-tab.active .iuc-tab-chevron{opacity:0.9;}
.iuc-mob-tab{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:50px;padding:6px 16px;color:#64748b;font-size:0.75rem;font-weight:600;cursor:pointer;transition:all .2s;}
.iuc-mob-tab.active,.iuc-mob-tab:hover{background:#dbeafe;color:#0453a7;border-color:#bfdbfe;}

/* ── CUSTOMER LOGOS ──────────────────────────────────────────────────────── */
.hm-logos{background:#fff;border-bottom:1px solid #f0f4ff;padding:44px 0;}
.hm-logos-label{text-align:center;font-size:0.7rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.16em;margin-bottom:24px;}
.hm-logos-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 40px;}
.hm-logo-item{display:flex;align-items:center;gap:8px;opacity:.58;transition:opacity .2s;}
.hm-logo-item:hover{opacity:.9;}
.hm-logo-dot{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight: 700;color:#fff;flex-shrink:0;}
.hm-logo-name{font-size:0.88rem;font-weight:800;color:#475569;letter-spacing:.015em;white-space:nowrap;}
.hm-logos-sub{text-align:center;font-size:0.72rem;color:#b0b9c8;margin-top:20px;font-weight:500;}

/* ── TESTIMONIALS ────────────────────────────────────────────────────────── */
.hm-tst{background:#f8fafc;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;padding:80px 0;}
.hm-tst-strip{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:20px 0;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;margin-bottom:48px;}
.hm-tst-strip-num{display:block;font-size:1.5rem;font-weight: 700;color:#0453a7;line-height:1;}
.hm-tst-strip-lbl{display:block;font-size:0.7rem;color:#94a3b8;font-weight:600;margin-top:3px;}
.hm-tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hm-tst-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 2px 8px rgba(100,116,139,.06);transition:box-shadow .2s,border-color .2s;}
.hm-tst-card:hover{box-shadow:0 8px 28px rgba(4,83,167,.08);border-color:#bfdbfe;}
.hm-tst-stars{color:#f59e0b;font-size:0.88rem;letter-spacing:2px;}
.hm-tst-pill{display:inline-flex;align-items:center;gap:6px;background:#dbeafe;color:#0453a7;border-radius:6px;padding:4px 11px;font-size:0.7rem;font-weight:800;}
.hm-tst-quote{font-size:0.86rem;color:#475569;line-height:1.85;font-style:italic;flex:1;margin:0;}
.hm-tst-author{display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid #f0f4ff;}
.hm-tst-av{width:38px;height:38px;border-radius:50%;color:#fff;font-size:0.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hm-tst-name{font-size:0.82rem;font-weight:700;color:#0f172a;line-height:1.3;}
.hm-tst-role{font-size:0.71rem;color:#94a3b8;}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.hm-faq{background:#fff;padding:80px 0;border-top:1px solid #e2e8f0;}
.hm-faq-wrap{max-width:780px;margin:48px auto 0;}
.hm-faq-item{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;margin-bottom:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.hm-faq-item.open{border-color:#bfdbfe;box-shadow:0 2px 12px rgba(4,83,167,.06);}
.hm-faq-q{padding:18px 22px;font-size:0.93rem;font-weight:700;color:#0f172a;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.45;}
.hm-faq-item.open .hm-faq-q{color:#0453a7;}
.hm-faq-icon{width:30px;height:30px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0453a7;font-size:0.8rem;transition:all .2s;}
.hm-faq-item.open .hm-faq-icon{background:#dbeafe;border-color:#bfdbfe;transform:rotate(45deg);}
.hm-faq-a{display:none;padding:0 22px 18px;font-size:0.875rem;color:#475569;line-height:1.88;}
.hm-faq-a a{color:#0453a7;font-weight:600;text-decoration:none;}
.hm-faq-a a:hover{text-decoration:underline;}
.hm-faq-item.open .hm-faq-a{display:block;}

/* ── EDUCATIONAL SEO ─────────────────────────────────────────────────────── */
.hm-edu{background:#f8fafc;border-top:1px solid #e2e8f0;padding:80px 0;}
.hm-edu-inner{max-width:880px;margin:0 auto;}
.hm-edu-h{font-size:clamp(1.5rem,3vw,2rem);font-weight: 700;color:#0f172a;letter-spacing:-0.5px;margin:0 0 14px;line-height:1.25;}
.hm-edu-lead{font-size:1rem;color:#64748b;line-height:1.85;margin:0 0 36px;max-width:720px;}
.hm-edu-body h3{font-size:1rem;font-weight:800;color:#0f172a;margin:32px 0 10px;padding-left:14px;border-left:3px solid #0453a7;}
.hm-edu-body p{font-size:0.88rem;color:#475569;line-height:1.9;margin-bottom:14px;}
.hm-edu-body a{color:#0453a7;font-weight:600;text-decoration:none;}
.hm-edu-body a:hover{text-decoration:underline;}
.hm-edu-callout{background:#fff;border:1.5px solid #bfdbfe;border-left:4px solid #0453a7;border-radius:10px;padding:16px 20px;margin:20px 0;}
.hm-edu-callout p{margin:0;font-size:0.86rem;color:#374151;line-height:1.8;}
.hm-edu-callout strong{color:#0453a7;}
.hm-edu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0 28px;}
.hm-edu-pt{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;}
.hm-edu-pt-ico{width:32px;height:32px;border-radius:9px;background:#dbeafe;color:#0453a7;font-size:0.78rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.hm-edu-pt-body strong{display:block;font-size:0.84rem;color:#0f172a;font-weight:700;margin-bottom:3px;}
.hm-edu-pt-body span{font-size:0.8rem;color:#64748b;line-height:1.65;}
.hm-edu-cta{background:linear-gradient(135deg,#f0f8ff 0%,#eff6ff 100%);border:1.5px solid #bfdbfe;border-radius:16px;padding:28px 32px;margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.hm-edu-cta h4{font-size:1rem;font-weight:800;color:#0f172a;margin:0 0 6px;}
.hm-edu-cta p{font-size:0.83rem;color:#64748b;margin:0;line-height:1.6;}

/* ── RESPONSIVE ADDITIONS ────────────────────────────────────────────────── */
@media(max-width:992px){.hm-tst-grid{grid-template-columns:repeat(2,1fr);}.hm-edu-grid{grid-template-columns:1fr;}}
@media(max-width:768px){.hm-tst-grid{grid-template-columns:1fr;}.hm-logos-row{gap:10px 24px;}.hm-tst-strip{gap:20px 32px;}.hm-edu-cta{flex-direction:column;align-items:flex-start;}}
@media(max-width:576px){}

.pre-cta-section{
    background:#bfdbfe;
    padding:64px 0;
}

.pre-cta-badge{
    font-size:.72rem;
    font-weight:700;
    color:#0453a7;
    text-transform:uppercase;
    letter-spacing:.14em;
    margin-bottom:12px;
}

.pre-cta-title{
    font-size:clamp(1.5rem,3vw,2rem);
    font-weight:700;
    color:#0f172a;
    line-height:1.25;
    letter-spacing:-.5px;
    margin:0;
}

.pre-cta-title span{
    color:#0453a7;
}

.pre-cta-section .free_trail_btn{
    padding:14px 32px;
}

.pre-cta-note{
    font-size:.78rem;
    color:#475569;
    margin-top:8px;
    text-align:right; display:none; visibility:hidden;
}


/* FAQ CTA Section */
.faq-cta-section{
    background:#bfdbfe;
    padding:64px 0;
}

.faq-cta-badge{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    color:#0453a7;
    text-transform:uppercase;
    letter-spacing:.14em;
    margin-bottom:12px;
}

.faq-cta-title{
    font-size:clamp(1.3rem,2.5vw,1.8rem);
    font-weight: 700;
    color:#0f172a;
    line-height:1.3;
    margin:0 0 10px;
}

.faq-cta-description{
    max-width:650px;
    margin:0 auto 28px;
    color:#475569;
    font-size:.95rem;
    line-height:1.7;
}

.faq-cta-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.faq-cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 26px;
    border-radius:10px;
    font-size:.9rem;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
}

.faq-cta-btn i{
    font-size:.95rem;
}

/* Contact Support Button */
.faq-cta-btn-outline{
    background:#ffffff;
    border:1px solid #cbd5e1;
    color:#0f172a;
    box-shadow:0 2px 10px rgba(15,23,42,.05);
}

.faq-cta-btn-outline:hover{
    background:#f8fafc;
    border-color:#94a3b8;
    color:#0f172a;
    transform:translateY(-2px);
}

/* Free Trial Button */
.faq-cta-btn-primary{
    background:linear-gradient(90deg,#0453a7,#0369c7);
    border:1px solid transparent;
    color:#fff;
    box-shadow:0 6px 18px rgba(4,83,167,.25);
}

.faq-cta-btn-primary:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(4,83,167,.35);
}

.stats-strip{background:#fff;border-top:1px solid #f0f0f4;border-bottom:1px solid #f0f0f4;padding:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats-item{padding:28px 20px;text-align:center}
.stats-border{border-right:1px solid #f0f0f4}
.stats-number{font-size:1.5rem;font-weight:700;color:#384155;line-height:1;letter-spacing:-1px}
.stats-number span{color:#0453a7}
.stats-label{font-size:.75rem;color:#64748b;font-weight:500;margin-top:6px}


.inventory-visibility-box{position:relative;overflow:hidden;margin-top:52px;padding:40px 48px;background:linear-gradient(135deg,#f0f8ff 0%,#eff6ff 100%);border-radius:20px;border-left:4px solid #0453a7}
.inventory-visibility-circle{position:absolute;border-radius:50%;pointer-events:none}
.inventory-circle-top{top:-20px;right:-20px;width:120px;height:120px;background:rgba(4,83,167,.06)}
.inventory-circle-bottom{right:40px;bottom:-30px;width:80px;height:80px;background:rgba(59,130,246,.06)}
.inventory-visibility-title{position:relative;z-index:1;margin:0;color:#1a1a2e;font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:800;line-height:1.4;letter-spacing:-.5px}
.inventory-visibility-highlight{background:linear-gradient(90deg,#0453a7,#0369c7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.inventory-visibility-text{position:relative;z-index:1;max-width:600px;margin:12px 0 0;color:#64748b;font-size:1rem;line-height:1.8}

@media(max-width:768px){
  .inventory-visibility-box{padding:28px 24px;margin-top:40px}
  .inventory-visibility-title{font-size:1.25rem}
  .inventory-visibility-text{font-size:.95rem;line-height:1.7}
}

.platform-overview-section{background:#f8fafc;padding:80px 0;border-top:1px solid #e2e8f0}
.platform-overview-badge{display:inline-flex;align-items:center;gap:10px;background:#dbeafe;border:1px solid #bfdbfe;border-radius:50px;padding:8px 20px;margin-bottom:24px}
.platform-overview-badge i{color:#0453a7;font-size:.8rem}
.platform-overview-badge span{font-size:.72rem;font-weight:700;color:#0453a7;text-transform:uppercase;letter-spacing:.12em}
.platform-overview-title{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:#0f172a;line-height:1.2;letter-spacing:-1px;margin-bottom:16px}
.platform-overview-title span{background:linear-gradient(90deg,#0453a7,#0369c7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.platform-overview-description{color:#475569;font-size:1.05rem;max-width:560px;margin:0 auto;line-height:1.8}

.platform-feature-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:16px;padding:28px 24px;height:100%;transition:border-color .25s,box-shadow .25s,transform .25s;box-shadow:0 2px 8px rgba(100,116,139,.06)}
.platform-feature-card:hover{border-color:#bfdbfe;box-shadow:0 10px 25px rgba(15,23,42,.08);transform:translateY(-3px)}

.platform-feature-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.platform-feature-icon svg{font-size:1.1rem}

.platform-feature-icon-blue{background:#eff6ff}
.platform-feature-icon-blue svg{color:#3b82f6}

.platform-feature-icon-orange{background:#fff7ed}
.platform-feature-icon-orange svg{color:#ea580c}

.platform-feature-icon-teal{background:#f0fdfa}
.platform-feature-icon-teal svg{color:#0d9488}

.platform-feature-icon-primary{background:#f0f8ff}
.platform-feature-icon-primary svg{color:#0453a7}

.platform-feature-icon-green{background:#f0fdf4}
.platform-feature-icon-green svg{color:#16a34a}

.platform-feature-icon-pink{background:#fff1f2}
.platform-feature-icon-pink svg{color:#e11d48}

.platform-feature-title{font-size:1rem;font-weight:700;color:#0f172a;margin-bottom:8px}
.platform-feature-text{color:#64748b;font-size:.9rem;line-height:1.7;margin:0}

.platform-btn-primary{padding:14px 32px;font-size:1rem}

.platform-btn-demo{display:inline-flex;align-items:center;gap:8px;color:#0453a7;font-size:.95rem;font-weight:600;text-decoration:none;border:1px solid rgba(4,83,167,.25);border-radius:16px;padding:14px 28px;transition:.2s ease}
.platform-btn-demo:hover{border-color:#0453a7;color:#0453a7}
.platform-btn-demo svg{font-size:.8rem}

.promise-strip-section{background:#fff;border-top:1px solid #f0f4ff;border-bottom:1px solid #f0f4ff;padding:0}
.promise-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}

.promise-item{display:flex;align-items:flex-start;gap:16px;padding:32px 24px}
.promise-border{border-right:1px solid #f0f4ff}

.promise-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.promise-icon svg{font-size:1rem}

.promise-icon-primary{background:#f0f8ff}
.promise-icon-primary svg{color:#0453a7}

.promise-icon-blue{background:#eff6ff}
.promise-icon-blue svg{color:#3b82f6}

.promise-icon-green{background:#f0fdf4}
.promise-icon-green svg{color:#16a34a}

.promise-icon-orange{background:#fff7ed}
.promise-icon-orange svg{color:#ea580c}

.promise-title{font-size:.92rem;font-weight:700;color:#1a1a2e;margin-bottom:5px}
.promise-text{font-size:.8rem;color:#64748b;line-height:1.6}




.solution-item{display:flex;align-items:flex-start;gap:24px;padding:24px 0}
.solution-border{border-bottom:1px solid #e5e7eb}
.solution-content{flex:1}

.solution-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px}
.solution-icon svg{font-size:1rem}

.solution-icon-blue{background:#eff6ff}
.solution-icon-blue svg{color:#3b82f6}

.solution-icon-primary{background:#f0f8ff}
.solution-icon-primary svg{color:#8b5cf6}

.solution-icon-green{background:#f0fdf4}
.solution-icon-green svg{color:#16a34a}

.solution-icon-yellow{background:#fefce8}
.solution-icon-yellow svg{color:#ca8a04}

.solution-icon-orange{background:#fff7ed}
.solution-icon-orange svg{color:#ea580c}

.solution-icon-teal{background:#f0fdfa}
.solution-icon-teal svg{color:#0d9488}

.solution-category{font-size:.68rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.solution-title{font-size:.97rem;font-weight:700;color:#1a1a2e;margin-bottom:6px;line-height:1.4}
.solution-title a{color:inherit;text-decoration:none;transition:color .2s ease}
.solution-title a:hover{color:#0453a7}

.solution-description{color:#64748b;font-size:.875rem;line-height:1.7;margin-bottom:10px}

.solution-inline-link{color:#0453a7;text-decoration:none;transition:color .2s ease}
.solution-inline-link:hover{color:#023f7e;text-decoration:underline}

.solution-link{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:#0453a7;text-decoration:none;transition:all .2s ease}
.solution-link:hover{color:#023f7e;gap:8px}
.solution-link i{font-size:.7rem}


.trial-cta{text-align:center;margin-top:36px}

.trial-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border-radius:12px;background:linear-gradient(90deg,#0453a7,#0369c7);color:#fff;font-size:.9rem;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(4,83,167,.25);transition:all .2s ease}
.trial-cta-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(4,83,167,.3)}
.trial-cta-btn i{font-size:.78rem}

.trial-cta-note{margin-top:10px;font-size:.72rem;font-weight:500;color:#94a3b8}



/* ==========================================================================
   23. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 991px) {
:root { --section-py: 72px; }

.section-hero { min-height: auto; padding: 60px 0 40px; }
.hero-content { padding-bottom: 40px; }
.site-header.is-scrolled{backdrop-filter: none;}
.mega-menu { display: none; }
.announcement-bar{ display: none; }
.site-header {border-bottom-color: transparent;z-index: 1060;}
    .navbar-logo {
        display: block;
        height: 30px;
    }
#mainNav{z-index: 1060;}
.menu-overlay{z-index: 1040;}
    #mainNav{
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100%;
        background: #fff;
        padding: 20px 20px 20px;
        z-index: 1050;
        overflow-y: auto;
        transition: all .35s ease;
        box-shadow: 0 0 20px rgba(0,0,0,.15);
        display: block !important;
    }

#mainNav.show{left: 0;}
.navbar-nav{ flex-direction: column;gap: 0 !important; margin-top:40px;}

.nav-cta-group{margin-top: 20px;display: flex;flex-direction: column;gap: 12px;}

/* Overlay */
.menu-overlay{ position: fixed;inset: 0; background: rgba(0,0,0,.5);z-index: 1040;opacity: 0; visibility: hidden;transition: .3s;}
.menu-overlay.show{opacity: 1;visibility: visible;}
.navbar-nav .nav-link { padding: 10px 12px; }
.nav-cta-group {padding-top: 12px;border-top: 1px solid var(--border);justify-content: center;}
.float-badge-1 { top: -15px; left: -10px; }
.float-badge-2 { top: 30px; right: -10px; }
.float-badge-3 { display: none; }

  .browser-mockup { transform: none; }

  .multiloc-grid {grid-template-columns: 1fr;}

  .multiloc-map-inner { height: 200px; }

  .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
  .dash-content-row { grid-template-columns: 1fr; }

  .preview-window { height: auto; flex-direction: column; }
  .preview-sidebar { width: 100%; height: 60px; flex-direction: row; padding: 0 16px; align-items: center; }
  .preview-nav { flex-direction: row; overflow-x: auto; flex: 1; }
  .pnav-item { white-space: nowrap; }
  .preview-brand { border-bottom: none; padding-bottom: 0; margin-bottom: 0; padding-right: 16px; border-right: 1px solid var(--border); }
  .preview-body { padding: 16px; }
  .preview-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .preview-charts-row { grid-template-columns: 1fr; }
  .preview-window { height: auto; }

  .analytics-card.ac-secondary { flex-direction: column; }
  
   .promise-strip-grid{grid-template-columns:repeat(2,1fr)}
  .promise-border{border-right:none}
  .promise-item{border-bottom:1px solid #f0f4ff}
  
   .pre-cta-title{text-align:center;}
   .pre-cta-badge{text-align:center;}
}

@media (max-width: 767px) {
  :root { --section-py: 56px; }
   .brand-logo img {height: 30px;}
   .hero-badge{font-size: 0.6rem; margin-bottom: 20px;}
   
   .section-hero .hero-title{ font-size: 1.75rem; }
  .section-title { font-size: 1.75rem; margin-bottom: 20px;}

  .hero-cta-group { flex-direction: column; align-items: center; }
  .hero-cta-group .btn { width: 100%; max-width: 320px; justify-content: center; }

  .trusted-stat { padding: 0 20px; }
  .trusted-divider { height: 30px; }
  .ts-num { font-size: 1.75rem; }

  .warehouse-feature-grid { grid-template-columns: 1fr; }

  .float-badge { display: none; }
  .float-badge-1 { display: none; }
  .float-badge-2 { display: none; }

  .dash-window { height: 320px; }
  .dash-stats-row { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 6px 10px; }
  .dash-content-row { padding: 6px 10px; }

  .comparison-table thead th { padding: 14px 14px; font-size: 0.8125rem; }
  .comparison-table tbody td { padding: 12px 14px; }

  .testimonials-bottom { flex-direction: column; }

  .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-legal { justify-content: center; }

  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  .section-blog .section-header { flex-direction: column; align-items: flex-start; }

  .trusted-logos { gap: 2px; }
  .trust-logo { padding: 8px 12px; }
  .trust-logo span { font-size: 0.875rem; }

  .section-cta-group { flex-direction: column; align-items: flex-start; }
  .switcher-box span.form-switch-promotion-container{display:none;}
  
  .hm-logos-row{justify-content: normal;}
  .hm-logo-item{width: 46%;}
  .section-badge{font-size: 0.6rem;}
  
    .solution-item{gap:16px;padding:20px 0}
  .solution-icon{width:38px;height:38px}
  .solution-category{font-size:.65rem}
  .solution-title{font-size:.9rem}
  .solution-description{font-size:.82rem}
  .solution-link{font-size:.78rem}
  
    .promise-strip-grid{grid-template-columns:1fr}
  .promise-item{padding:24px 20px}
  .promise-item:last-child{border-bottom:none}
  
    .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-item{padding:20px 15px}
  .stats-number{font-size:1.25rem}
  .stats-border{border-right:none}
  .stats-item{border-bottom:1px solid #f0f0f4}
  .stats-item:nth-last-child(-n+2){border-bottom:none}
  
    .faq-cta-section{
        padding:48px 0;
    }

    .faq-cta-actions{
        flex-direction:column;
        align-items:center;
    }

    .faq-cta-btn{
        width:100%;
        max-width:280px;
    }
}
@media(max-width:576px){
  .trial-cta-btn{padding:12px 22px;font-size:.85rem}
  .trial-cta-note{line-height:1.7;padding:0 10px}
  .platform-command-center{padding:16px;}
  .hm-logos-row{gap:8px 16px;}.hm-logo-name{font-size:0.78rem;}
}

@media (max-width: 480px) {
  .hero-title { font-size: 2rem; }
  .hero-trust { gap: 10px; font-size: 0.75rem; }

  .trusted-stats { gap: 0; }
  .trusted-stat { padding: 0 14px; }

  .faq-sidebar-cta .btn { width: 100%; justify-content: center; }

  .review-platforms { gap: 6px; }
}