/* ==========================================================================
   OneXit Solutions — Shared Design System
   Used across all pages: index, about, products, contact, industries, clients
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..900;1,9..40,300..900&family=Golos+Text:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   CSS DESIGN TOKENS
   ============================================================ */
:root {
  /* Primary */
  --primary:        #0025E9;
  --primary-rgb:    0, 37, 233;
  --primary-bright: #2C50FF;
  --primary-light:  #5271FF;
  --primary-glow:   rgba(0, 37, 233, 0.28);
  --primary-tint:   rgba(0, 37, 233, 0.08);

  /* Product Accents */
  --vms-color:      #00E5FF;
  --vms-glow:       rgba(0, 229, 255, 0.20);
  --cms-color:      #7B61FF;
  --cms-glow:       rgba(123, 97, 255, 0.20);
  --lams-color:     #00D084;
  --lams-glow:      rgba(0, 208, 132, 0.20);
  --canteen-color:  #FF9900;
  --canteen-glow:   rgba(255, 153, 0, 0.20);
  --hms-color:      #FF4F9A;
  --hms-glow:       rgba(255, 79, 154, 0.20);

  /* Misc Accents */
  --accent-cyan:    #00E5FF;
  --accent-purple:  #7B61FF;
  --accent-green:   #00D084;
  --accent-orange:  #FF9900;
  --accent-pink:    #FF4F9A;
  --danger:         #FF4757;

  /* Dark Mode (Default) */
  --bg:             #070B16;
  --bg-rgb:         7, 11, 22;
  --bg-elevated:    #0D1326;
  --surface:        #121933;
  --surface-rgb:    18, 25, 51;
  --surface-glass:  rgba(18, 25, 51, 0.72);
  --surface-hover:  #192348;
  --surface-card:   #0F162E;
  --text:           #FFFFFF;
  --text-rgb:       255, 255, 255;
  --text-muted:     #8E9BB5;
  --text-dim:       #55627E;
  --border:         rgba(255, 255, 255, 0.09);
  --border-strong:  rgba(0, 37, 233, 0.45);
  --border-glow:    rgba(44, 80, 255, 0.35);
  --nav-bg:         rgba(7, 11, 22, 0.82);
  --shadow-sm:      0 4px 12px rgba(0,0,0,0.25);
  --shadow-md:      0 12px 32px rgba(0,0,0,0.40);
  --shadow-lg:      0 24px 60px -12px rgba(0,0,0,0.65);
  --shadow-primary: 0 14px 40px -10px rgba(0,37,233,0.50);

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* Fonts */
  --font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Golos Text", "Plus Jakarta Sans", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;
}

[data-theme="light"] {
  --bg:             #F4F7FF;
  --bg-rgb:         244, 247, 255;
  --bg-elevated:    #EBF0FC;
  --surface:        #FFFFFF;
  --surface-rgb:    255, 255, 255;
  --surface-glass:  rgba(255,255,255,0.85);
  --surface-hover:  #F2F5FD;
  --surface-card:   #FFFFFF;
  --text:           #080E24;
  --text-rgb:       8, 14, 36;
  --text-muted:     #4A5570;
  --text-dim:       #7C8AA6;
  --border:         rgba(0,37,233,0.10);
  --border-strong:  rgba(0,37,233,0.32);
  --border-glow:    rgba(0,37,233,0.22);
  --nav-bg:         rgba(244,247,255,0.88);
  --shadow-sm:      0 4px 12px rgba(0,37,233,0.06);
  --shadow-md:      0 12px 30px rgba(0,37,233,0.08);
  --shadow-lg:      0 24px 50px -12px rgba(0,37,233,0.12);
  --shadow-primary: 0 14px 36px -10px rgba(0,37,233,0.40);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}
::selection { background: var(--primary); color: #fff; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.028em; line-height: 1.12; color: var(--text); }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-heading); border: none; background: transparent; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 36px;
  position: relative;
  z-index: 2;
}
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

section { position: relative; z-index: 2; }

.section-pad    { padding: 100px 0; }
.section-pad-sm { padding: 70px 0; }

/* ============================================================
   AMBIENT BACKGROUND (reusable)
   ============================================================ */
.ambient-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ambient-grid {
  position: absolute;
  inset: 0;
  background-size: 52px 52px;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 80% 55% at 50% 20%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 20%, #000 30%, transparent 100%);
  opacity: 0.5;
}
.orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.orb-1 { width:800px; height:800px; background: radial-gradient(circle, rgba(0,37,233,0.18) 0%, transparent 70%); top:-300px; right:-200px; animation: floatOrb 24s ease-in-out infinite alternate; }
.orb-2 { width:600px; height:600px; background: radial-gradient(circle, rgba(123,97,255,0.13) 0%, transparent 70%); bottom:10%; left:-200px; animation: floatOrb 18s ease-in-out infinite alternate-reverse; }
.orb-3 { width:420px; height:420px; background: radial-gradient(circle, rgba(0,208,132,0.08) 0%, transparent 70%); top:42%; right:10%; }
@keyframes floatOrb {
  0%  { transform:translate(0,0) scale(1); }
  50% { transform:translate(-40px,50px) scale(1.08); }
  100%{ transform:translate(30px,-30px) scale(0.96); }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 900;
  height: 72px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
.navbar .wrap { height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Logo */
.nav-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:800; font-size:1.18rem; letter-spacing:-0.03em; flex-shrink:0; }
.nav-logo-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--primary-bright),var(--accent-purple)); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; box-shadow:0 0 18px var(--primary-glow); }
.nav-logo-icon svg { color:#fff; }
.nav-logo-name { color:var(--text); }
.nav-logo-accent { color:var(--primary-light); }

/* Logo with Dark/Light Support */
.brand-logo-picture {
  display: flex;
  align-items: center;
}
.brand-logo-img {
  height: 38px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
:root[data-theme="dark"] .brand-logo-light { display: none !important; }
:root[data-theme="dark"] .brand-logo-dark { display: flex !important; }
:root[data-theme="light"] .brand-logo-dark { display: none !important; }
:root[data-theme="light"] .brand-logo-light { display: flex !important; }

/* Links */
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a { padding:8px 14px; border-radius:var(--radius-sm); font-size:0.88rem; font-weight:500; color:var(--text-muted); transition:color 0.2s, background 0.2s; }
.nav-links a:hover, .nav-links a.active { color:var(--text); background:var(--surface-hover); }

/* Dropdown */
.nav-dropdown {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: -14px;
}

/* Invisible hover bridge spanning wide and downwards from trigger */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -50px;
  right: -50px;
  height: 24px;
  background: transparent;
  pointer-events: auto;
  z-index: 999;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(10, 15, 30, 0.96);
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 14px;
  padding: 10px 8px;
  min-width: 265px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 229, 255, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s;
  z-index: 10005;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Invisible bridge on top of the menu to capture fast diagonal movements */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -20px;
  right: -20px;
  height: 24px;
  background: transparent;
  pointer-events: auto;
}

/* Active / Hover States */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.nav-dropdown-item:hover {
  background: rgba(0, 229, 255, 0.12);
  color: #FFFFFF;
  transform: translateX(4px);
}

.nav-dropdown-item:hover .nav-dd-dot {
  transform: scale(1.3);
  box-shadow: 0 0 10px currentColor;
}

.nav-dd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.theme-toggle { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); background:var(--surface); cursor:pointer; transition:all 0.2s; }
.theme-toggle:hover { color:var(--text); border-color:var(--border-strong); }

/* Hamburger */
.nav-hamburger { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--text-muted); border-radius:2px; transition:all 0.25s; }

/* Mobile nav */
.nav-mobile {
  display:none;
  position:fixed;
  top:72px; left:0; right:0;
  background:var(--bg-elevated);
  border-bottom:1px solid var(--border);
  padding:20px;
  z-index:899;
  flex-direction:column;
  gap:4px;
}
.nav-mobile.open { display:flex; }
.nav-mobile a { padding:12px 16px; border-radius:var(--radius-sm); font-size:0.92rem; font-weight:500; color:var(--text-muted); display:block; transition:all 0.18s; }
.nav-mobile a:hover { background:var(--surface-hover); color:var(--text); }

@media (max-width:900px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .btn-ghost-nav { display:none; }
}
@media (max-width:580px) { .btn-nav-demo span { display:none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px;
  border-radius:var(--radius-full);
  font-family:var(--font-heading); font-size:0.9rem; font-weight:600;
  cursor:pointer; transition:all 0.22s cubic-bezier(0.16,1,0.3,1); white-space:nowrap;
  border:1.5px solid transparent;
}
.btn-primary { background:var(--primary-bright); color:#fff; box-shadow:var(--shadow-primary); border-color:transparent; }
.btn-primary:hover { background:var(--primary-light); transform:translateY(-2px); box-shadow:0 16px 44px -10px rgba(0,37,233,0.65); }
.btn-ghost { background:transparent; color:var(--text-muted); border-color:var(--border); }
.btn-ghost:hover { color:var(--text); border-color:var(--border-strong); background:var(--primary-tint); }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-outline:hover { background:var(--primary-tint); }
.btn-lg { padding:14px 32px; font-size:1rem; }
.btn-sm { padding:8px 18px; font-size:0.82rem; }

/* Gradient button */
.btn-gradient {
  background:linear-gradient(135deg, var(--primary-bright), var(--accent-purple));
  color:#fff; border:none;
  box-shadow:0 8px 32px -8px rgba(0,37,233,0.55);
}
.btn-gradient:hover { transform:translateY(-2px); box-shadow:0 14px 44px -8px rgba(0,37,233,0.70); }

/* ============================================================
   SECTION HEADERS (reusable)
   ============================================================ */
.section-header { text-align:center; margin-bottom:60px; }
.section-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-full);
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:16px;
}
.section-title { font-size:clamp(1.9rem,4vw,3rem); font-weight:800; margin-bottom:14px; }
.section-sub { font-size:1rem; color:var(--text-muted); max-width:560px; margin:0 auto; line-height:1.68; }

/* Gradient text */
.grad-text {
  background:linear-gradient(135deg, var(--primary-bright) 0%, var(--accent-cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:all 0.28s cubic-bezier(0.16,1,0.3,1);
}
.card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }

/* Feature icon box */
.feat-icon {
  width:48px; height:48px;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  font-size:1.3rem;
}

/* Badge */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:0.7rem; font-weight:600; font-family:var(--font-mono);
}
.badge-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-green  { background:rgba(0,208,132,0.12); color:var(--accent-green); }
.badge-blue   { background:rgba(44,80,255,0.12);  color:var(--primary-light); }
.badge-orange { background:rgba(255,153,0,0.12);  color:var(--accent-orange); }
.badge-red    { background:rgba(255,71,87,0.10);  color:var(--danger); }
.badge-purple { background:rgba(123,97,255,0.12); color:var(--accent-purple); }
.badge-pink   { background:rgba(255,79,154,0.12); color:var(--hms-color); }

/* Ping dot */
.ping-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-green); box-shadow:0 0 10px var(--accent-green); animation:ping 2.2s infinite; flex-shrink:0; }
@keyframes ping {
  0%  { transform:scale(0.95); box-shadow:0 0 0 0 rgba(0,208,132,0.7); }
  70% { transform:scale(1.1);  box-shadow:0 0 0 8px rgba(0,208,132,0); }
  100%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(0,208,132,0); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:var(--bg-elevated);
  border-top:1px solid var(--border);
  padding:70px 0 32px;
  position:relative;
  z-index:2;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:56px;
}
@media (max-width:900px)  { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px)  { .footer-grid { grid-template-columns:1fr; } }

.footer-brand { }
.footer-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:800; font-size:1.15rem; margin-bottom:16px; }
.footer-logo-icon { width:36px; height:36px; background:linear-gradient(135deg,var(--primary-bright),var(--accent-purple)); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.footer-logo-icon svg { color:#fff; }
.footer-tagline { font-size:0.88rem; color:var(--text-muted); line-height:1.7; max-width:280px; margin-bottom:24px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; font-size:0.82rem; color:var(--text-muted); margin-bottom:10px; }
.footer-contact-item svg { color:var(--primary-light); flex-shrink:0; margin-top:2px; }

.footer-col-title { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin-bottom:18px; font-family:var(--font-mono); }
.footer-links-list { display:flex; flex-direction:column; gap:10px; }
.footer-links-list a { font-size:0.86rem; color:var(--text-muted); transition:color 0.2s; }
.footer-links-list a:hover { color:var(--text); }

.footer-bottom {
  padding-top:28px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-copy { font-size:0.78rem; color:var(--text-dim); }
.footer-social { display:flex; gap:10px; }
.social-btn {
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
  transition:all 0.2s;
}
.social-btn:hover { color:var(--text); border-color:var(--border-strong); background:var(--primary-tint); }

/* ============================================================
   MARQUEE LOGO STRIP (Clients ticker)
   ============================================================ */
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  padding: 16px 0;
}
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.client-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: all 0.25s ease;
}
.client-pill:hover {
  border-color: var(--border-strong);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.client-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-bright);
}

/* ============================================================
   CONTACT & LEAD FORMS
   ============================================================ */
.form-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-group.full-width {
  grid-column: 1 / -1;
}
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-heading);
}
.form-input, .form-select, .form-textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.form-textarea { resize: vertical; min-height: 110px; }

/* ============================================================
   PROCESS STEPS & TIMELINES
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
@media (max-width: 860px) { .process-grid { grid-template-columns: 1fr; } }
.step-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  position: relative;
  transition: all 0.28s;
}
.step-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.step-number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-light);
  background: var(--primary-tint);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-bottom: 18px;
}
.step-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.step-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   HARDWARE & INTEGRATION GRID
   ============================================================ */
.hardware-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .hardware-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .hardware-grid { grid-template-columns: 1fr; } }
.hw-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
  transition: all 0.25s;
}
.hw-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.hw-icon { font-size: 2rem; margin-bottom: 12px; }
.hw-name { font-size: 0.98rem; font-weight: 700; margin-bottom: 6px; }
.hw-desc { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================================
   PRODUCT COLOR UTILITIES
   ============================================================ */
.color-vms     { color:var(--vms-color); }
.color-cms     { color:var(--cms-color); }
.color-lams    { color:var(--lams-color); }
.color-canteen { color:var(--canteen-color); }
.color-hms     { color:var(--hms-color); }

.bg-vms     { background:var(--vms-glow); }
.bg-cms     { background:var(--cms-glow); }
.bg-lams    { background:var(--lams-glow); }
.bg-canteen { background:var(--canteen-glow); }
.bg-hms     { background:var(--hms-glow); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-center { text-align:center; }
.text-muted  { color:var(--text-muted); }
.text-dim    { color:var(--text-dim); }
.mono        { font-family:var(--font-mono); }
.fw-700      { font-weight:700; }
.fw-800      { font-weight:800; }

/* App window chrome (shared across pages) */
.app-window { background:var(--surface-card); border:1px solid var(--border-strong); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg), 0 0 60px -20px var(--primary-glow); overflow:hidden; }
.app-chrome { height:50px; background:var(--bg-elevated); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.chrome-dots { display:flex; gap:8px; }
.chrome-dot { width:11px; height:11px; border-radius:50%; }
.dot-red    { background:#FF5F56; }
.dot-yellow { background:#FFBD2E; }
.dot-green  { background:#27C93F; }
.chrome-url { font-family:var(--font-mono); font-size:0.72rem; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:5px 18px; border-radius:var(--radius-full); display:flex; align-items:center; gap:8px; }

/* ==========================================================================
   HOME-8 SYSTEM ENHANCEMENTS: BACKGROUND, MOUSE EFFECTS, HOVER & TRANSITIONS
   Applied across all pages of OneX IT Solutions
   ========================================================================== */

/* 1. Global Background & Ambient Orbs */
body {
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambient-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  background-size: 54px 54px;
  background-image: 
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, #000 35%, transparent 100%);
  opacity: 0.65;
}

/* Floating Ambient Orbs (Supports .orb-1/.orb-2/.orb-3 and .ambient-glow-1/.ambient-glow-2) */
.ambient-glow-1,
.orb.orb-1,
.ambient-scene .orb-1 {
  position: absolute;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 37, 233, 0.22) 0%, transparent 70%);
  filter: blur(85px);
  top: -240px;
  right: -140px;
  animation: floatOrb 22s ease-in-out infinite alternate;
}

.ambient-glow-2,
.orb.orb-2,
.ambient-scene .orb-2 {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 97, 255, 0.16) 0%, transparent 70%);
  filter: blur(90px);
  bottom: 12%;
  left: -180px;
  animation: floatOrb 18s ease-in-out infinite alternate-reverse;
}

.ambient-glow-3,
.orb.orb-3,
.ambient-scene .orb-3 {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 208, 132, 0.1) 0%, transparent 70%);
  filter: blur(75px);
  top: 45%;
  right: 15%;
}

@keyframes floatOrb {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-40px, 50px) scale(1.08); }
  100% { transform: translate(30px, -30px) scale(0.96); }
}

/* 2. Magnetic Spring Cursor Follower */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.05s linear;
  box-shadow: 0 0 12px var(--accent-cyan);
  display: none;
}

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 229, 255, 0.65);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.25s ease, 
              background-color 0.25s ease,
              box-shadow 0.25s ease;
  display: none;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (pointer: fine) {
  .cursor-dot, .cursor-follower { display: flex; }
}

.cursor-follower.is-hovering {
  width: 66px;
  height: 66px;
  background-color: rgba(0, 37, 233, 0.18);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
  backdrop-filter: blur(2px);
}

.cursor-follower.is-drag {
  width: 80px;
  height: 80px;
  background-color: rgba(0, 37, 233, 0.28);
  border-color: var(--accent-cyan);
}

/* Top Scroll Progress Line */
.scroll-progress-line {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #0025E9 0%, #00E5FF 50%, #00D084 100%);
  width: 0%;
  z-index: 10002;
  box-shadow: 0 0 10px #00E5FF;
}

/* 3. Interactive Card 3D Tilt & Mouse-Spotlight Glow */
.card,
.bento-card,
.hw-card,
.client-box,
.case-study-card,
.industry-card,
.prod-card,
.h6-client-card {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease, 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.card::before,
.bento-card::before,
.hw-card::before,
.client-box::before,
.case-study-card::before,
.industry-card::before,
.prod-card::before,
.h6-client-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(350px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(0, 229, 255, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.card:hover::before,
.bento-card:hover::before,
.hw-card:hover::before,
.client-box:hover::before,
.case-study-card:hover::before,
.industry-card:hover::before,
.prod-card:hover::before,
.h6-client-card:hover::before {
  opacity: 1;
}

.card:hover,
.bento-card:hover,
.hw-card:hover,
.client-box:hover,
.case-study-card:hover,
.industry-card:hover,
.prod-card:hover,
.h6-client-card:hover {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), 0 0 28px rgba(0, 229, 255, 0.18);
  transform: translateY(-4px);
}

/* 4. Button Glow & Hover Transitions matching home-8.html */
.btn-pill {
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s ease, 
              background-color 0.25s ease, 
              border-color 0.25s ease,
              filter 0.25s ease;
  font-family: var(--font-heading);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.btn-pill:active {
  transform: scale(0.97) !important;
}

.btn-primary-glow {
  background: linear-gradient(135deg, #0025E9 0%, #2C50FF 100%);
  color: #fff;
  box-shadow: 0 8px 30px -4px rgba(0, 37, 233, 0.65), 0 0 20px rgba(44, 80, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-primary-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -6px rgba(0, 37, 233, 0.85), 0 0 32px rgba(44, 80, 255, 0.55);
  filter: brightness(1.12);
}

.btn-secondary-outline {
  background: rgba(18, 25, 51, 0.65);
  border: 1px solid rgba(0, 229, 255, 0.35);
  backdrop-filter: blur(10px);
  color: #fff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary-outline:hover {
  background: rgba(18, 25, 51, 0.95);
  border-color: #00E5FF;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.35);
  transform: translateY(-2px);
}

.h6-btn-arrow {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-glow:hover .h6-btn-arrow {
  transform: translateX(4px);
}

/* 5. Smooth Easing Across Interactive Elements */
a, button, .nav-links a {
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   3D PERSPECTIVE FLOATING BROWSER STAGE & DASHBOARD APP SHELL
   ========================================================================== */

.h7-stage-perspective-wrap {
  perspective: 1600px;
  perspective-origin: 50% 25%;
  width: min(1200px, 95vw);
  position: relative;
  margin: 0 auto;
}

.h7-browser-card {
  position: relative;
  background: rgba(7, 12, 28, 0.98);
  border: 1.5px solid rgba(0, 210, 255, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 0 0 1px rgba(0, 210, 255, 0.25),
    0 0 70px -10px rgba(0, 210, 255, 0.4),
    0 35px 90px -15px rgba(0, 0, 0, 0.9),
    0 0 140px -20px rgba(0, 37, 233, 0.5);
  transform: perspective(1600px) rotateX(7deg) scale(0.98);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  backdrop-filter: blur(25px);
  animation: h7BrowserFloat 7s ease-in-out infinite;
}

@keyframes h7BrowserFloat {
  0% { transform: perspective(1600px) rotateX(7deg) translateY(0px) scale(0.98); }
  50% { transform: perspective(1600px) rotateX(4.5deg) translateY(-8px) scale(0.985); }
  100% { transform: perspective(1600px) rotateX(7deg) translateY(0px) scale(0.98); }
}

.h7-browser-card:hover {
  transform: perspective(1600px) rotateX(1.5deg) translateY(-4px) scale(0.99);
  box-shadow: 
    0 0 0 2px rgba(0, 210, 255, 0.7),
    0 40px 110px -10px rgba(0, 0, 0, 0.95),
    0 0 150px -10px rgba(0, 37, 233, 0.65);
}

/* Card Theme Border & Glow Variants */
.card-vms {
  border-color: rgba(0, 210, 255, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.25), 0 0 70px -10px rgba(0, 210, 255, 0.4), 0 35px 90px -15px rgba(0, 0, 0, 0.9), 0 0 140px -20px rgba(0, 37, 233, 0.5) !important;
}
.card-cms {
  border-color: rgba(123, 97, 255, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.25), 0 0 70px -10px rgba(123, 97, 255, 0.4), 0 35px 90px -15px rgba(0, 0, 0, 0.9), 0 0 140px -20px rgba(123, 97, 255, 0.5) !important;
}
.card-lams {
  border-color: rgba(0, 208, 132, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(0, 208, 132, 0.25), 0 0 70px -10px rgba(0, 208, 132, 0.4), 0 35px 90px -15px rgba(0, 0, 0, 0.9), 0 0 140px -20px rgba(0, 208, 132, 0.5) !important;
}
.card-canteen {
  border-color: rgba(255, 153, 0, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(255, 153, 0, 0.25), 0 0 70px -10px rgba(255, 153, 0, 0.4), 0 35px 90px -15px rgba(0, 0, 0, 0.9), 0 0 140px -20px rgba(255, 153, 0, 0.5) !important;
}
.card-hms {
  border-color: rgba(255, 51, 102, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(255, 51, 102, 0.25), 0 0 70px -10px rgba(255, 51, 102, 0.4), 0 35px 90px -15px rgba(0, 0, 0, 0.9), 0 0 140px -20px rgba(255, 51, 102, 0.5) !important;
}

/* Chrome Header Bar */
.h4-chrome {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.h4-chrome-dots {
  display: flex;
  gap: 6px;
  margin-right: 16px;
}
.h4-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.h4-chrome-dot.r { background: #FF5F57; }
.h4-chrome-dot.y { background: #FEBC2E; }
.h4-chrome-dot.g { background: #28C840; }

.h4-address {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 16px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h4-address span {
  white-space: nowrap;
}
.h4-address-lock { color: #00D084; }

.h4-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(0, 208, 132, 0.15);
  border: 1px solid rgba(0, 208, 132, 0.4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #00D084;
}
.h4-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00D084;
  box-shadow: 0 0 6px #00D084;
  animation: h4LiveDotBlink 1.4s infinite;
}
@keyframes h4LiveDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

/* Video Scanline Laser Sweep Effect */
.h4-scanline-sweep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 229, 255, 0.4) 30%, 
    #00E5FF 50%, 
    rgba(44, 80, 255, 0.4) 70%, 
    transparent 100%);
  box-shadow: 0 0 16px 2px rgba(0, 229, 255, 0.7);
  opacity: 0.85;
  pointer-events: none;
  z-index: 15;
  animation: h4ScanlineAnim 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.card-cms .h4-scanline-sweep {
  background: linear-gradient(90deg, transparent 0%, rgba(123, 97, 255, 0.4) 30%, #7B61FF 50%, rgba(167, 139, 250, 0.4) 70%, transparent 100%);
  box-shadow: 0 0 16px 2px rgba(123, 97, 255, 0.7);
}
.card-lams .h4-scanline-sweep {
  background: linear-gradient(90deg, transparent 0%, rgba(0, 208, 132, 0.4) 30%, #00D084 50%, rgba(52, 211, 153, 0.4) 70%, transparent 100%);
  box-shadow: 0 0 16px 2px rgba(0, 208, 132, 0.7);
}
.card-canteen .h4-scanline-sweep {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 153, 0, 0.4) 30%, #FF9900 50%, rgba(251, 191, 36, 0.4) 70%, transparent 100%);
  box-shadow: 0 0 16px 2px rgba(255, 153, 0, 0.7);
}
.card-hms .h4-scanline-sweep {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 51, 102, 0.4) 30%, #FF3366 50%, rgba(251, 113, 133, 0.4) 70%, transparent 100%);
  box-shadow: 0 0 16px 2px rgba(255, 51, 102, 0.7);
}

@keyframes h4ScanlineAnim {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 0.95; }
  90% { opacity: 0.95; }
  100% { top: 100%; opacity: 0; }
}

/* Holographic Virtual Mouse Pointer */
.h4-virtual-cursor {
  position: absolute;
  top: 36%;
  left: 54%;
  z-index: 25;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.h4-cursor-arrow {
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.9));
  transform: rotate(-15deg);
}
.h4-cursor-click-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #00E5FF;
  transform: translate(-10px, -10px) scale(0);
  opacity: 0;
  pointer-events: none;
}
.h4-cursor-click-ring.clicking {
  animation: h4ClickPulse 0.45s ease-out;
}
@keyframes h4ClickPulse {
  0% { transform: translate(-10px, -10px) scale(0.2); opacity: 1; border-color: #00E5FF; box-shadow: 0 0 12px #00E5FF; }
  100% { transform: translate(-10px, -10px) scale(1.6); opacity: 0; border-color: #00D084; box-shadow: none; }
}
.h4-cursor-label {
  background: rgba(0, 37, 233, 0.9);
  border: 1px solid rgba(0, 229, 255, 0.7);
  padding: 4px 11px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #FFFFFF;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Full VMS App Shell Layout */
.v7-app-shell {
  display: flex;
  background: #080E24;
  min-height: 580px;
  max-height: 700px;
  position: relative;
  color: #fff;
  font-family: var(--font-body);
}

/* Sidebar */
.v7-sidebar {
  width: 220px;
  background: #050B1C;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 16px 12px 14px;
  user-select: none;
  z-index: 5;
  text-align: left;
}
.v7-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.v7-brand-left {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}
.v7-brand-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #00D2FF, #0025E9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}
.v7-brand-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v7-brand-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  white-space: nowrap;
}
.v7-brand-sub {
  font-size: 0.62rem;
  color: #6F7F9D;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v7-collapse-btn {
  background: transparent;
  border: none;
  color: #6F7F9D;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s;
}
.v7-collapse-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.v7-nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  flex: 1;
}
.v7-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8E9BB5;
  cursor: pointer;
  transition: all 0.18s ease;
}
.v7-nav-item-left {
  display: flex;
  align-items: center;
  gap: 9px;
}
.v7-nav-item:hover:not(.active) {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.v7-nav-item.active {
  background: #00D2FF;
  color: #040816;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 210, 255, 0.4);
}
.v7-nav-item.active svg {
  stroke: #040816;
}
.v7-nav-arrow {
  font-size: 0.72rem;
  color: #55627E;
  transition: transform 0.2s;
}
.v7-nav-group {
  display: flex;
  flex-direction: column;
}
.v7-nav-group.open .v7-nav-arrow {
  transform: rotate(90deg);
}
.v7-sub-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 28px;
  margin: 3px 0 6px;
}
.v7-sub-item {
  font-size: 0.72rem;
  color: #6F7F9D;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v7-sub-item:hover {
  color: #00E5FF;
  background: rgba(0, 229, 255, 0.08);
}
.v7-sub-item.active {
  color: #00E5FF;
  font-weight: 600;
}
.v7-sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #505F7D;
  text-align: center;
  white-space: nowrap;
}

/* Workspace Layout */
.v7-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #080E24;
  min-width: 0;
  overflow: hidden;
  position: relative;
  text-align: left;
}
.v7-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(10, 17, 40, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 14px;
  flex-shrink: 0;
}
.v7-top-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v7-top-app-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid rgba(0, 210, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00D2FF;
}
.v7-top-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
}
.v7-top-subtitle {
  font-size: 0.64rem;
  color: #6F7F9D;
  font-family: var(--font-mono);
  margin-top: 1px;
}
.v7-top-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v7-barcode-search {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  overflow: hidden;
  height: 30px;
}
.v7-barcode-icon {
  padding-left: 9px;
  color: #6F7F9D;
  display: flex;
  align-items: center;
}
.v7-barcode-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: #fff;
  padding: 4px 8px;
  width: 170px;
}
.v7-barcode-input::placeholder { color: #55627E; }
.v7-btn-scan-gate {
  background: #00D2FF;
  border: none;
  color: #040816;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 11px;
  height: 100%;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.v7-btn-scan-gate:hover { filter: brightness(1.15); }
.v7-station-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 208, 132, 0.1);
  border: 1px solid rgba(0, 208, 132, 0.3);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #00D084;
  white-space: nowrap;
}
.v7-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00D084;
  box-shadow: 0 0 6px #00D084;
  animation: h4LiveDotBlink 1.6s infinite;
}
.v7-top-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8E9BB5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.v7-top-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Scrollable Workspace */
.v7-dash-scroll {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  max-height: 590px;
  padding: 14px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 210, 255, 0.4) rgba(0, 0, 0, 0.25);
}
.v7-dash-scroll::-webkit-scrollbar { width: 7px; }
.v7-dash-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); }
.v7-dash-scroll::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, 0.35); border-radius: 4px; }
.v7-dash-scroll::-webkit-scrollbar-thumb:hover { background: #00D2FF; }

/* KPI Grid */
.v7-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.v7-kpi-card {
  background: rgba(13, 22, 48, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}
.v7-kpi-card:hover {
  border-color: rgba(0, 210, 255, 0.35);
  transform: translateY(-1px);
}
.v7-kpi-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v7-kpi-icon-box.cyan { background: rgba(0, 210, 255, 0.12); color: #00D2FF; }
.v7-kpi-icon-box.green { background: rgba(0, 208, 132, 0.14); color: #00D084; }
.v7-kpi-icon-box.gray { background: rgba(255, 255, 255, 0.06); color: #8E9BB5; }
.v7-kpi-icon-box.purple { background: rgba(123, 97, 255, 0.14); color: #7B61FF; }
.v7-kpi-icon-box.amber { background: rgba(255, 153, 0, 0.14); color: #FF9900; }
.v7-kpi-icon-box.rose { background: rgba(255, 51, 102, 0.14); color: #FF3366; }

.v7-kpi-val {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.v7-kpi-val.green { color: #00D084; text-shadow: 0 0 12px rgba(0, 208, 132, 0.3); }
.v7-kpi-val.cyan { color: #00D2FF; text-shadow: 0 0 12px rgba(0, 210, 255, 0.3); }
.v7-kpi-val.purple { color: #C4B5FD; text-shadow: 0 0 12px rgba(123, 97, 255, 0.3); }
.v7-kpi-val.amber { color: #FFB020; text-shadow: 0 0 12px rgba(255, 153, 0, 0.3); }
.v7-kpi-val.rose { color: #FF6688; text-shadow: 0 0 12px rgba(255, 51, 102, 0.3); }

.v7-kpi-title {
  font-size: 0.7rem;
  color: #8E9BB5;
  margin-top: 3px;
  font-weight: 500;
}

/* Fast-Lane Action Bar */
.v7-fastlane-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.v7-lane-box {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
  background: rgba(13, 22, 48, 0.85);
  border-radius: 8px;
  overflow: hidden;
  padding: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.v7-lane-box.in { border: 1px solid rgba(0, 208, 132, 0.35); }
.v7-lane-box.out { border: 1px solid rgba(255, 71, 87, 0.35); }
.v7-lane-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.v7-lane-badge.in { background: rgba(0, 208, 132, 0.15); color: #00D084; }
.v7-lane-badge.out { background: rgba(255, 71, 87, 0.15); color: #FF4757; }
.v7-lane-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 6px 10px;
  font-size: 0.72rem;
  color: #fff;
  font-family: var(--font-mono);
  min-width: 80px;
}
.v7-lane-input::placeholder { color: #55627E; }
.v7-lane-arrow-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.85rem;
  margin-right: 2px;
  transition: transform 0.15s;
}
.v7-lane-arrow-btn:hover { transform: scale(1.08); }
.v7-lane-arrow-btn.in { background: #00D084; color: #040816; }
.v7-lane-arrow-btn.out { background: #FF4757; color: #fff; }
.v7-btn-issue-pass {
  background: #00D2FF;
  color: #040816;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.35);
  transition: all 0.2s;
}
.v7-btn-issue-pass:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Shared Card Containers */
.v7-card {
  background: rgba(10, 18, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.v7-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.v7-card-title-group {
  display: flex;
  flex-direction: column;
}
.v7-card-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v7-badge-live {
  background: rgba(0, 210, 255, 0.15);
  color: #00D2FF;
  border: 1px solid rgba(0, 210, 255, 0.3);
  font-size: 0.63rem;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 600;
}
.v7-card-sub {
  font-size: 0.67rem;
  color: #6F7F9D;
  font-family: var(--font-mono);
  margin-top: 2px;
}
.v7-card-select-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.68rem;
  color: #8E9BB5;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* Donut Chart Display */
.v7-donut-display-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 0;
}
.v7-donut-svg-wrap {
  position: relative;
  width: 170px;
  height: 170px;
}
.v7-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.v7-donut-svg circle {
  fill: none !important;
}
.v7-donut-ring-outer {
  fill: none;
  stroke: url(#v7CyanGlow);
  stroke-width: 11;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.6));
  transition: stroke-dasharray 0.8s ease;
}
.v7-donut-ring-inner {
  fill: none;
  stroke: url(#v7TealGlow);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(0, 208, 132, 0.6));
  transition: stroke-dasharray 0.8s ease;
}
.v7-donut-center-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.v7-donut-number {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  text-shadow: 0 0 16px rgba(0, 210, 255, 0.4);
}
.v7-donut-status {
  font-size: 0.72rem;
  font-weight: 700;
  color: #00D084;
  margin-top: 2px;
}
.v7-donut-subtext {
  font-size: 0.62rem;
  color: #6F7F9D;
  font-family: var(--font-mono);
  margin-top: 1px;
  white-space: nowrap;
}
.v7-donut-sub-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}
.v7-donut-stat-box {
  background: rgba(6, 12, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}
.v7-substat-label {
  font-size: 0.65rem;
  color: #8E9BB5;
  font-family: var(--font-mono);
}
.v7-substat-val {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 2px 0;
}
.v7-substat-val.green { color: #00D084; }
.v7-substat-desc {
  font-size: 0.62rem;
  color: #55627E;
}
.v7-substat-desc.green { color: #00D084; font-weight: 600; }

/* Active Visitors & Data Tables */
.v7-badge-count {
  background: rgba(0, 208, 132, 0.15);
  color: #00D084;
  border: 1px solid rgba(0, 208, 132, 0.35);
  font-size: 0.64rem;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}
.v7-table-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v7-table-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 8px;
}
.v7-table-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.68rem;
  color: #fff;
  width: 140px;
}
.v7-table-search input::placeholder { color: #55627E; }
.v7-btn-movement-log {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 0.68rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.v7-btn-movement-log:hover { background: rgba(255, 255, 255, 0.1); }

/* Movements Ticker */
.v7-movements-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(5, 10, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  overflow: hidden;
}
.v7-ticker-tag {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
  color: #6F7F9D;
  white-space: nowrap;
}
.v7-ticker-badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  overflow: hidden;
}
.v7-pill-event {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.63rem;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.v7-pill-event.in { background: rgba(0, 208, 132, 0.14); border: 1px solid rgba(0, 208, 132, 0.3); color: #00D084; }
.v7-pill-event.out { background: rgba(255, 71, 87, 0.14); border: 1px solid rgba(255, 71, 87, 0.3); color: #FF4757; }
.v7-ticker-link {
  font-size: 0.66rem;
  color: #00D2FF;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  margin-left: auto;
}
.v7-ticker-link:hover { text-decoration: underline; }

/* Tables */
.v7-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.v7-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.72rem;
  text-align: left;
}
.v7-data-table th {
  background: rgba(255, 255, 255, 0.03);
  color: #6F7F9D;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.v7-data-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s;
}
.v7-data-table tr:hover {
  background: rgba(0, 210, 255, 0.04);
}
.v7-data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.v7-vis-name {
  font-weight: 600;
  color: #FFFFFF;
}
.v7-vis-sub {
  font-size: 0.63rem;
  color: #6F7F9D;
  font-family: var(--font-mono);
}
.v7-vis-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.v7-status-active {
  background: rgba(0, 208, 132, 0.13);
  color: #00D084;
  border: 1px solid rgba(0, 208, 132, 0.3);
  border-radius: 99px;
  padding: 3px 8px;
  font-size: 0.63rem;
  font-family: var(--font-mono);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.v7-act-btns {
  display: flex;
  align-items: center;
  gap: 5px;
}
.v7-btn-co {
  background: #EF4444;
  color: #fff;
  font-size: 0.63rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}
.v7-btn-co:hover { background: #DC2626; }
.v7-btn-bdg {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}
.v7-btn-bdg:hover { background: rgba(255, 255, 255, 0.14); }

/* Floating Satellites */
.h3-sat-card {
  position: absolute;
  background: var(--surface-glass, rgba(10,18,42,0.92));
  border: 1px solid rgba(0, 37, 233, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 16px 48px -10px rgba(0,0,0,0.55), 0 0 30px -10px rgba(0,37,233,0.3);
  backdrop-filter: blur(20px);
  z-index: 10;
  animation: h3Float 4s ease-in-out infinite alternate;
  text-align: left;
}
.h3-sat-card.left {
  left: -40px;
  top: 38%;
  transform: translateY(-50%);
  min-width: 190px;
  animation-delay: 0s;
}
.h3-sat-card.right {
  right: -40px;
  top: 30%;
  transform: translateY(-50%);
  min-width: 240px;
  animation-name: h3FloatRight;
  animation-delay: 1.2s;
}
@keyframes h3Float {
  from { transform: translateY(-50%) translateY(0); }
  to   { transform: translateY(-50%) translateY(-10px); }
}
@keyframes h3FloatRight {
  from { transform: translateY(-50%) translateY(0); }
  to   { transform: translateY(-50%) translateY(-12px); }
}
.h3-sat-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.h3-sat-badge {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(44,80,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
}
.h3-sat-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-heading);
  text-align: center;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  margin-bottom: 6px;
}
.h3-sat-btn.primary { background: linear-gradient(135deg,#0025E9,#2C50FF); color: #fff; box-shadow: 0 4px 14px -4px rgba(0,37,233,0.5); }
.h3-sat-btn.primary:hover { filter: brightness(1.1); }
.h3-sat-btn.ghost { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.12); }
.h3-sat-btn.ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }

.h3-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.h3-alert-item:hover { background: rgba(255,255,255,0.06); }
.h3-alert-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.h3-alert-dot.green { background: #00D084; box-shadow: 0 0 6px #00D084; }
.h3-alert-text { font-size: 0.72rem; color: rgba(255,255,255,0.65); line-height: 1.4; text-align: left; }
.h3-alert-text strong { color: #fff; display: block; font-size: 0.77rem; }

/* Light theme adaptations */
:root[data-theme="light"] .h7-browser-card {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 37, 233, 0.35);
  box-shadow: 
    0 0 0 1px rgba(0, 37, 233, 0.15),
    0 25px 70px -10px rgba(0, 37, 233, 0.18),
    0 0 80px -10px rgba(0, 37, 233, 0.15);
}
:root[data-theme="light"] .h7-browser-card .v7-app-shell { background: #FFFFFF; color: #080E24; }
:root[data-theme="light"] .h7-browser-card .v7-sidebar { background: #F4F7FF; border-right-color: rgba(0, 37, 233, 0.1); }
:root[data-theme="light"] .h7-browser-card .v7-brand-title { color: #080E24; }
:root[data-theme="light"] .h7-browser-card .v7-top-header { background: #FFFFFF; border-bottom-color: rgba(0, 37, 233, 0.1); }
:root[data-theme="light"] .h7-browser-card .v7-workspace { background: #F4F7FF; }
:root[data-theme="light"] .h7-browser-card .v7-kpi-card,
:root[data-theme="light"] .h7-browser-card .v7-card { background: #FFFFFF; border-color: rgba(0, 37, 233, 0.1); }
:root[data-theme="light"] .h7-browser-card .v7-kpi-val,
:root[data-theme="light"] .h7-browser-card .v7-card-title,
:root[data-theme="light"] .h7-browser-card .v7-vis-name,
:root[data-theme="light"] .h7-browser-card .v7-donut-number,
:root[data-theme="light"] .h7-browser-card .v7-top-title { color: #080E24; }
:root[data-theme="light"] .h7-browser-card .v7-lane-box { background: #FFFFFF; }
:root[data-theme="light"] .h7-browser-card .v7-lane-input,
:root[data-theme="light"] .h7-browser-card .v7-barcode-input { color: #080E24; }
:root[data-theme="light"] .h7-browser-card .v7-data-table td { border-bottom-color: rgba(0, 37, 233, 0.08); }
:root[data-theme="light"] .h7-browser-card .v7-data-table tr:hover { background: rgba(0, 37, 233, 0.04); }
:root[data-theme="light"] .h7-browser-card .h4-chrome { background: #EBF0FC; border-bottom-color: rgba(0, 37, 233, 0.12); }
:root[data-theme="light"] .h7-browser-card .h4-address { background: #FFFFFF; color: #080E24; border-color: rgba(0, 37, 233, 0.15); }
:root[data-theme="light"] .h3-sat-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 37, 233, 0.25); }
:root[data-theme="light"] .h3-sat-title,
:root[data-theme="light"] .h3-alert-text strong { color: #080E24; }

@media (max-width: 1140px) {
  .h3-sat-card { display: none !important; }
}
@media (max-width: 960px) {
  .v7-sidebar { display: none; }
  .v7-kpi-row { grid-template-columns: 1fr; }
  .v7-donut-sub-stats { grid-template-columns: 1fr; }
}


/* ==========================================================================
   BANTO / BENTO GRID DESIGN SYSTEM (Advanced Software Ecosystem & Feature Bento)
   Exact visual match to the high-tech glowing frosted card UI specification
   ========================================================================== */
.banto-section {
  position: relative;
  padding: 100px 0;
  z-index: 2;
  overflow: hidden;
}
.banto-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 50% 20%, rgba(44, 80, 255, 0.08) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  background-position: center center;
  pointer-events: none;
  opacity: 0.7;
}

.banto-header {
  text-align: left;
  margin-bottom: 44px;
  position: relative;
  z-index: 2;
}
.banto-header.center {
  text-align: center;
}
.banto-header.center .banto-sub {
  margin-left: auto;
  margin-right: auto;
}
.banto-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.banto-sub {
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.6;
}

/* ── Bento Grid ── */
.banto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
@media (max-width: 960px) {
  .banto-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Bento Card Base ── */
.banto-card {
  position: relative;
  background: rgba(12, 16, 30, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 34px 32px;
  border: 1.2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}
.banto-card:hover {
  transform: translateY(-5px);
}

/* ── Card Themes / Neon Glows ── */
/* Cyan / VMS */
.banto-card-vms {
  border-color: rgba(0, 229, 255, 0.42);
  box-shadow: 0 0 35px -8px rgba(0, 229, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.banto-card-vms::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 70%; height: 180px;
  background: radial-gradient(circle at 12% 15%, rgba(0, 229, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.banto-card-vms:hover {
  border-color: rgba(0, 229, 255, 0.85);
  box-shadow: 0 14px 50px -5px rgba(0, 229, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Purple / CMS */
.banto-card-cms {
  border-color: rgba(168, 85, 247, 0.42);
  box-shadow: 0 0 35px -8px rgba(168, 85, 247, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.banto-card-cms::before {
  content: "";
  position: absolute;
  top: 0; right: 0; width: 70%; height: 180px;
  background: radial-gradient(circle at 88% 15%, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.banto-card-cms:hover {
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 14px 50px -5px rgba(168, 85, 247, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Magenta / LAMS */
.banto-card-lams {
  border-color: rgba(217, 70, 239, 0.42);
  box-shadow: 0 0 35px -8px rgba(217, 70, 239, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.banto-card-lams::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; width: 80%; height: 180px;
  background: radial-gradient(circle at 18% 85%, rgba(217, 70, 239, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.banto-card-lams:hover {
  border-color: rgba(217, 70, 239, 0.85);
  box-shadow: 0 14px 50px -5px rgba(217, 70, 239, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Amber / Canteen */
.banto-card-canteen {
  border-color: rgba(249, 115, 22, 0.42);
  box-shadow: 0 0 35px -8px rgba(249, 115, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.banto-card-canteen::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 70%; height: 180px;
  background: radial-gradient(circle at 12% 15%, rgba(249, 115, 22, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.banto-card-canteen:hover {
  border-color: rgba(249, 115, 22, 0.85);
  box-shadow: 0 14px 50px -5px rgba(249, 115, 22, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Rose / Headcount */
.banto-card-hms {
  border-color: rgba(255, 51, 102, 0.42);
  box-shadow: 0 0 35px -8px rgba(255, 51, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.banto-card-hms::before {
  content: "";
  position: absolute;
  top: 0; right: 0; width: 70%; height: 180px;
  background: radial-gradient(circle at 88% 15%, rgba(255, 51, 102, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.banto-card-hms:hover {
  border-color: rgba(255, 51, 102, 0.85);
  box-shadow: 0 14px 50px -5px rgba(255, 51, 102, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Rose / Electric Blue / Custom Solutions */
.banto-card-custom {
  border-color: rgba(255, 51, 102, 0.45);
  box-shadow: 0 0 35px -8px rgba(255, 51, 102, 0.22), 0 0 25px -5px rgba(44, 80, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.banto-card-custom::before {
  content: "";
  position: absolute;
  top: 0; right: 0; width: 70%; height: 180px;
  background: radial-gradient(circle at 88% 15%, rgba(255, 51, 102, 0.18) 0%, rgba(44, 80, 255, 0.12) 50%, transparent 70%);
  pointer-events: none;
}
.banto-card-custom:hover {
  border-color: rgba(255, 51, 102, 0.85);
  box-shadow: 0 14px 50px -5px rgba(255, 51, 102, 0.4), 0 0 30px rgba(44, 80, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ── Squircle Icon ── */
.banto-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 22px;
  position: relative;
  flex-shrink: 0;
}
.banto-card-vms .banto-icon-box { color: #00E5FF; border-color: rgba(0, 229, 255, 0.55); background: rgba(0, 229, 255, 0.1); }
.banto-card-cms .banto-icon-box { color: #A855F7; border-color: rgba(168, 85, 247, 0.55); background: rgba(168, 85, 247, 0.1); }
.banto-card-lams .banto-icon-box { color: #D946EF; border-color: rgba(217, 70, 239, 0.55); background: rgba(217, 70, 239, 0.1); }
.banto-card-canteen .banto-icon-box { color: #F97316; border-color: rgba(249, 115, 22, 0.55); background: rgba(249, 115, 22, 0.1); }
.banto-card-hms .banto-icon-box { color: #FF3366; border-color: rgba(255, 51, 102, 0.55); background: rgba(255, 51, 102, 0.1); }
.banto-card-custom .banto-icon-box { color: #FF3366; border-color: rgba(255, 51, 102, 0.55); background: linear-gradient(135deg, rgba(255, 51, 102, 0.15), rgba(44, 80, 255, 0.15)); }

/* ── Typography inside Bento Card ── */
.banto-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}
.banto-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 8px;
}
.banto-card-title a {
  color: inherit;
  text-decoration: none;
}
.banto-card-desc {
  font-size: 0.92rem;
  color: #94A3B8;
  line-height: 1.62;
  margin-bottom: 22px;
}

/* ── Twinkling Sparkles ── */
.banto-sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  animation: bantoTwinkle 3.2s ease-in-out infinite;
}
@keyframes bantoTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

/* ── Interactive Pointer / Cursor Cues ── */
.banto-cue-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.banto-cursor-arrow {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  animation: bantoCursorPulse 2.8s ease-in-out infinite;
}
@keyframes bantoCursorPulse {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -3px); }
}

/* ── Branching Tree / Circuit Flow Graphic ── */
.banto-branch-tree {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 20px;
  position: relative;
}
.banto-branch-root {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.banto-branch-lines {
  width: 64px;
  height: 84px;
  flex-shrink: 0;
}
.banto-branch-lines svg {
  width: 100%;
  height: 100%;
  display: block;
}
.banto-branch-nodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.banto-branch-node {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 0.76rem;
  color: #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  transition: all 0.2s ease;
}
.banto-branch-node:hover,
.banto-branch-node.active {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.6);
  color: #FFFFFF;
}

/* ── Mini Dashboard Graphic (Visitor card style) ── */
.banto-mini-dash {
  background: rgba(7, 10, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 18px;
  position: relative;
  overflow: hidden;
}
.banto-mini-dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: #94A3B8;
  font-family: var(--font-mono);
}
.banto-mini-dash-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.banto-mini-wave {
  flex: 1;
  height: 38px;
}
.banto-mini-wave svg {
  width: 100%;
  height: 100%;
}
.banto-mini-radial {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banto-mini-radial svg {
  transform: rotate(-90deg);
  width: 44px;
  height: 44px;
}
.banto-mini-radial-val {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 700;
  color: #00E5FF;
  font-family: var(--font-mono);
}

/* ── Mini POS / Cashless UI (Canteen card style) ── */
.banto-mini-pos-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 10px 0 18px;
}
.banto-mini-pos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  flex: 1;
}
.banto-mini-food-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: #CBD5E1;
}
.banto-mini-nfc-card {
  width: 110px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(249, 115, 22, 0.5);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.banto-mini-nfc-card .card-chip {
  width: 14px;
  height: 10px;
  background: #F97316;
  border-radius: 2px;
  margin-bottom: 6px;
}
.banto-mini-nfc-card .card-amount {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #10B981;
  margin-bottom: 2px;
}
.banto-mini-nfc-card .card-label {
  font-size: 0.58rem;
  color: #94A3B8;
}

/* ── Mini Asset / Bar Chart (LAMS card style) ── */
.banto-mini-bars-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  background: rgba(7, 10, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 10px 0 18px;
  height: 72px;
}
.banto-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.banto-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease;
}
.banto-bar-label {
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: #94A3B8;
}

/* ── Bottom Pills & Tags inside Card ── */
.banto-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
}
.banto-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  font-weight: 600;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
}
.banto-card-vms .banto-tag-pill { color: #00E5FF; border-color: rgba(0, 229, 255, 0.35); background: rgba(0, 229, 255, 0.08); }
.banto-card-cms .banto-tag-pill { color: #A855F7; border-color: rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.08); }
.banto-card-lams .banto-tag-pill { color: #D946EF; border-color: rgba(217, 70, 239, 0.35); background: rgba(217, 70, 239, 0.08); }
.banto-card-canteen .banto-tag-pill { color: #F97316; border-color: rgba(249, 115, 22, 0.35); background: rgba(249, 115, 22, 0.08); }
.banto-card-hms .banto-tag-pill { color: #FF3366; border-color: rgba(255, 51, 102, 0.35); background: rgba(255, 51, 102, 0.08); }
.banto-card-custom .banto-tag-pill { color: #FF6699; border-color: rgba(255, 51, 102, 0.35); background: rgba(255, 51, 102, 0.08); }

/* ── Bottom Exploration Cue Bar ── */
.banto-explore-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 2;
}
.banto-stripes {
  display: flex;
  gap: 4px;
  align-items: center;
}
.banto-stripe-dash {
  width: 4px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  transform: skewX(-24deg);
  border-radius: 1px;
}
.banto-explore-badge {
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #94A3B8;
  text-transform: uppercase;
}
.banto-hover-cues-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  text-decoration: none;
  transition: all 0.2s ease;
}
.banto-hover-cues-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

/* ── Light Mode Adaptations ── */
:root[data-theme="light"] .banto-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 37, 233, 0.14);
  box-shadow: 0 12px 30px rgba(0, 37, 233, 0.08);
}
:root[data-theme="light"] .banto-title {
  color: #080E24;
}
:root[data-theme="light"] .banto-card-title {
  color: #080E24;
}
:root[data-theme="light"] .banto-card-desc {
  color: #4A5570;
}
:root[data-theme="light"] .banto-branch-node {
  background: #F4F7FF;
  border-color: rgba(0, 37, 233, 0.15);
  color: #080E24;
}
:root[data-theme="light"] .banto-mini-dash,
:root[data-theme="light"] .banto-mini-bars-wrap {
  background: #F4F7FF;
  border-color: rgba(0, 37, 233, 0.12);
}
:root[data-theme="light"] .banto-mini-food-tile {
  background: #FFFFFF;
  border-color: rgba(0, 37, 233, 0.1);
  color: #080E24;
}
:root[data-theme="light"] .banto-cue-pill {
  background: #0F172A;
  color: #FFFFFF;
}
:root[data-theme="light"] .banto-explore-bar {
  border-top-color: rgba(0, 37, 233, 0.12);
}
:root[data-theme="light"] .banto-explore-badge {
  background: rgba(0, 37, 233, 0.05);
  border-color: rgba(0, 37, 233, 0.15);
  color: #080E24;
}
:root[data-theme="light"] .banto-hover-cues-btn {
  background: #FFFFFF;
  border-color: rgba(0, 37, 233, 0.2);
  color: #080E24;
}


/* ==========================================================================
   BANTO / BENTO GRID ADAPTATIONS FOR SUPPORTING PAGES (Industries, About, Clients)
   ========================================================================== */
.industry-detail-card {
  position: relative !important;
  background: rgba(12, 16, 30, 0.78) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.2px solid rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 0 32px -8px rgba(0, 229, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease !important;
}
.industry-detail-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 60%; height: 160px;
  background: radial-gradient(circle at 10% 10%, rgba(0, 229, 255, 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.industry-detail-card:nth-child(2) {
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 32px -8px rgba(16, 185, 129, 0.22) !important;
}
.industry-detail-card:nth-child(2)::before {
  background: radial-gradient(circle at 10% 10%, rgba(16, 185, 129, 0.16) 0%, transparent 70%);
}
.industry-detail-card:nth-child(3) {
  border-color: rgba(0, 229, 255, 0.45) !important;
  box-shadow: 0 0 32px -8px rgba(0, 229, 255, 0.22) !important;
}
.industry-detail-card:nth-child(4) {
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 32px -8px rgba(168, 85, 247, 0.22) !important;
}
.industry-detail-card:nth-child(4)::before {
  background: radial-gradient(circle at 10% 10%, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
}
.industry-detail-card:nth-child(5) {
  border-color: rgba(255, 51, 102, 0.45) !important;
  box-shadow: 0 0 32px -8px rgba(255, 51, 102, 0.22) !important;
}
.industry-detail-card:nth-child(5)::before {
  background: radial-gradient(circle at 10% 10%, rgba(255, 51, 102, 0.16) 0%, transparent 70%);
}
.industry-detail-card:nth-child(6) {
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 0 32px -8px rgba(249, 115, 22, 0.22) !important;
}
.industry-detail-card:nth-child(6)::before {
  background: radial-gradient(circle at 10% 10%, rgba(249, 115, 22, 0.16) 0%, transparent 70%);
}
.industry-detail-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 45px -5px rgba(0, 37, 233, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.industry-icon-big {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  font-size: 2rem !important;
}

/* Client & Case Study Bento Grid */
.client-box {
  background: rgba(12, 16, 30, 0.75) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.client-box:hover {
  border-color: rgba(0, 229, 255, 0.6) !important;
  box-shadow: 0 12px 35px -5px rgba(0, 229, 255, 0.22) !important;
  transform: translateY(-4px) !important;
}

/* Light Mode Overrides for Supporting Page Bento Cards */
:root[data-theme="light"] .industry-detail-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 37, 233, 0.18) !important;
  box-shadow: 0 12px 32px rgba(0, 37, 233, 0.08) !important;
}
:root[data-theme="light"] .industry-icon-big {
  background: #F4F7FF !important;
  border-color: rgba(0, 37, 233, 0.15) !important;
}
:root[data-theme="light"] .client-box {
  background: #FFFFFF !important;
  border-color: rgba(0, 37, 233, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 37, 233, 0.06) !important;
}
:root[data-theme="light"] .client-box:hover {
  border-color: rgba(0, 37, 233, 0.4) !important;
  box-shadow: 0 14px 35px rgba(0, 37, 233, 0.12) !important;
}


/* ==========================================================================
   BANTO UNIQUE CARD GRAPHICS (Each Product Has a Unique Visual Representation)
   ========================================================================== */

/* 1. VMS: Digital Badge & Live QR Scanner */
.banto-unique-vms {
  background: rgba(8, 12, 24, 0.82);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0 20px;
  position: relative;
  overflow: hidden;
}
.vms-pass-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.vms-pass-photo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.vms-avatar-icon {
  font-size: 1.3rem;
}
.vms-laser-scan {
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: #00E5FF;
  box-shadow: 0 0 8px #00E5FF;
  animation: vmsLaserSweep 2.2s ease-in-out infinite alternate;
}
@keyframes vmsLaserSweep {
  0% { top: 0; }
  100% { top: calc(100% - 2px); }
}
.vms-pass-data {
  flex: 1;
  min-width: 0;
}
.vms-pass-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #00E5FF;
  letter-spacing: 0.05em;
}
.vms-pass-guest {
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vms-pass-auth {
  font-size: 0.68rem;
  color: #10B981;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.vms-pass-qr {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vms-kiosk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.vms-speed-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 6px;
}

/* 2. CMS: Statutory Compliance Matrix & Quota Lock */
.banto-unique-cms {
  background: rgba(14, 12, 30, 0.82);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0 20px;
}
.cms-quota-header {
  margin-bottom: 12px;
}
.cms-quota-label {
  font-size: 0.72rem;
  color: #CBD5E1;
  font-weight: 600;
  margin-bottom: 6px;
}
.cms-quota-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cms-quota-fill {
  height: 100%;
  background: linear-gradient(90deg, #7B61FF, #A855F7);
  border-radius: 999px;
}
.cms-quota-stats {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #94A3B8;
}
.cms-safe-badge {
  color: #A855F7;
  font-weight: 700;
}
.cms-check-matrix {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cms-matrix-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.73rem;
  color: #E2E8F0;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}
.cms-check-icon {
  color: #10B981;
  font-weight: bold;
  margin-right: 6px;
}
.cms-date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #94A3B8;
}
.cms-matrix-item.gate-active {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.cms-gate-status {
  font-weight: 700;
  color: #FFFFFF;
}

/* CMS Branching Flowchart Tree (from Ecosystem Visual) */
.cms-branch-tree {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cms-branch-root {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #C4B5FD;
  position: relative;
  flex-shrink: 0;
}
.cms-branch-svg {
  width: 26px;
  height: 68px;
  flex-shrink: 0;
}
.cms-branch-nodes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cms-branch-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 4px 9px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #CBD5E1;
  position: relative;
}
.cms-branch-node.active {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.1);
  color: #FFFFFF;
}
.cms-branch-node .banto-cursor-arrow,
.cms-branch-root .banto-cursor-arrow {
  position: absolute;
  right: -5px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* 3. LAMS: Real-Time 3-Shift Turnout Wave & Push Stream */
.banto-unique-lams {
  background: rgba(8, 20, 18, 0.82);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0 20px;
}
.lams-stream-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.lams-radial-gauge {
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lams-radial-gauge svg {
  transform: rotate(-90deg);
  width: 50px;
  height: 50px;
}
.lams-radial-pct {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #10B981;
}
.lams-gauge-num {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
}
.lams-gauge-label {
  font-size: 0.7rem;
  color: #94A3B8;
  margin: 2px 0;
}
.lams-push-live {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #10B981;
}
.lams-shift-wave-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lams-shift-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.lams-shift-tag {
  font-size: 0.65rem;
  color: #94A3B8;
  font-family: var(--font-mono);
}
.lams-meter-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}
.lams-meter-bar div {
  height: 100%;
  border-radius: 99px;
}
.lams-shift-val {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #E2E8F0;
}

/* 4. Canteen: Contactless RFID Tap & Meal Voucher */
.banto-unique-canteen {
  background: rgba(22, 14, 8, 0.82);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0 20px;
}
.canteen-pos-stage {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.canteen-smart-card {
  width: 120px;
  background: linear-gradient(135deg, rgba(30, 24, 18, 0.95), rgba(15, 12, 8, 0.98));
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: 10px;
  padding: 9px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.smart-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.smart-card-chip {
  width: 14px;
  height: 11px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 2px;
}
.smart-card-waves {
  font-size: 0.68rem;
  color: #F97316;
  font-weight: bold;
  letter-spacing: -1px;
}
.smart-card-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #94A3B8;
  margin-bottom: 3px;
}
.smart-card-balance {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #10B981;
}
.canteen-receipt-slip {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-mono);
}
.canteen-receipt-head {
  font-size: 0.68rem;
  font-weight: 700;
  color: #F97316;
  margin-bottom: 2px;
}
.canteen-receipt-item {
  font-size: 0.72rem;
  color: #FFFFFF;
}
.canteen-receipt-time {
  font-size: 0.62rem;
  color: #10B981;
  margin-top: 2px;
}
.canteen-pos-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.canteen-proxy-pill {
  font-size: 0.68rem;
  color: #CBD5E1;
  font-family: var(--font-mono);
}

/* 5. Headcount: Industrial Zone Heatmap & Emergency Roll Call */
.banto-unique-hms {
  background: rgba(24, 8, 14, 0.82);
  border: 1px solid rgba(255, 51, 102, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0 20px;
}
.hms-zones-monitor {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}
.hms-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.hms-zone-name {
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #CBD5E1;
}
.hms-zone-meter {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}
.hms-zone-meter div {
  height: 100%;
  border-radius: 99px;
}
.hms-zone-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #FFFFFF;
  width: 65px;
  text-align: right;
}
.hms-alarm-muster-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hms-siren-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #FF3366;
  font-weight: 700;
}
.hms-siren-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF3366;
  box-shadow: 0 0 8px #FF3366;
  animation: hmsSirenPulse 1.2s infinite;
}
@keyframes hmsSirenPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* 5. Custom Solutions: Bespoke SOP Workflow Visualizer */
.banto-unique-custom {
  background: rgba(18, 12, 32, 0.85);
  border: 1px solid rgba(255, 51, 102, 0.28);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0 20px;
}
.custom-flow-nodes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.custom-flow-node {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: #E2E8F0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.custom-flow-node.highlight {
  background: rgba(255, 51, 102, 0.15);
  border-color: rgba(255, 51, 102, 0.45);
  color: #FF6699;
  font-weight: 700;
}
.custom-flow-arrow {
  color: #64748B;
  font-size: 0.75rem;
}
.custom-flow-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #94A3B8;
}

/* Light Theme Adaptations for Unique Bento Visuals */
:root[data-theme="light"] .banto-unique-vms,
:root[data-theme="light"] .banto-unique-cms,
:root[data-theme="light"] .banto-unique-lams,
:root[data-theme="light"] .banto-unique-canteen,
:root[data-theme="light"] .banto-unique-hms,
:root[data-theme="light"] .banto-unique-custom {
  background: #F8FAFC;
  border-color: rgba(0, 37, 233, 0.15);
}
:root[data-theme="light"] .vms-pass-guest,
:root[data-theme="light"] .cms-quota-label,
:root[data-theme="light"] .cms-gate-status,
:root[data-theme="light"] .lams-gauge-num,
:root[data-theme="light"] .canteen-receipt-item,
:root[data-theme="light"] .hms-zone-count {
  color: #080E24;
}
:root[data-theme="light"] .cms-matrix-item,
:root[data-theme="light"] .hms-zone-row {
  background: #FFFFFF;
}


/* ===================================================================
   SPECIALIZED BENTO GRAPHICS FOR PRODUCT SUBPAGE FEATURES
   =================================================================== */

/* 1. WhatsApp Host Approval & Gate Release */
.banto-feat-whatsapp {
  background: rgba(14, 25, 22, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-wa-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.bf-wa-bubble {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px 10px 10px 2px;
  padding: 8px 11px;
  font-size: 0.74rem;
  color: #E2E8F0;
  line-height: 1.4;
  flex: 1;
}
.bf-wa-sender {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: #10B981;
  margin-bottom: 2px;
}
.bf-wa-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.bf-btn-approve {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.bf-btn-resched {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.7rem;
}
.bf-wa-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #00E5FF;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 8px;
}

/* 2. Security Radar & Overstay Telemetry */
.banto-feat-radar {
  background: rgba(5, 18, 30, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-radar-screen {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.bf-radar-disk {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, rgba(5, 18, 30, 0.9) 70%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bf-radar-disk::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 229, 255, 0.35);
}
.bf-radar-blip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00E5FF;
  box-shadow: 0 0 8px #00E5FF;
  position: absolute;
  top: 14px;
  right: 14px;
  animation: vmsLaserSweep 2s infinite ease-in-out;
}
.bf-radar-info {
  flex: 1;
  min-width: 0;
}
.bf-radar-zone {
  font-size: 0.74rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.bf-radar-timer {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #00E5FF;
}
.bf-radar-log {
  font-size: 0.66rem;
  color: #94A3B8;
  margin-top: 3px;
}

/* 3. Hardware Barrier & Turnstile Relay */
.banto-feat-relay {
  background: rgba(10, 16, 36, 0.85);
  border: 1px solid rgba(44, 80, 255, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-relay-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.bf-relay-cell {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px 10px;
}
.bf-relay-name {
  font-size: 0.68rem;
  color: #94A3B8;
  margin-bottom: 2px;
}
.bf-relay-val {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.bf-relay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #10B981;
}

/* 4. Wage Reconciliation & Ghost Billed Detector */
.banto-feat-reconcile {
  background: rgba(24, 12, 34, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-reconcile-compare {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.bf-reconcile-box {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: var(--font-mono);
}
.bf-reconcile-box.diff {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
}
.bf-reconcile-tag {
  font-size: 0.62rem;
  color: #94A3B8;
  margin-bottom: 2px;
}
.bf-reconcile-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: #FFFFFF;
}
.bf-reconcile-saved {
  font-size: 0.76rem;
  font-weight: 800;
  color: #10B981;
}
.bf-reconcile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.68rem;
}

/* 5. Statutory Government Audit Dossier Visual */
.banto-feat-dossier {
  background: rgba(18, 14, 38, 0.85);
  border: 1px solid rgba(123, 97, 255, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-dossier-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.bf-dossier-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.72rem;
}
.bf-dossier-pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.18);
  color: #C084FC;
}

/* 6. Multi-Shift Timeline & Overtime Matrix */
.banto-feat-rota {
  background: rgba(8, 22, 20, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-rota-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.bf-rota-shift {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
}
.bf-rota-time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #10B981;
}

/* 7. Mobile GPS Geofence & Liveness */
.banto-feat-mobile {
  background: rgba(6, 20, 32, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-mobile-stage {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.bf-mobile-pin {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.bf-mobile-body {
  flex: 1;
  min-width: 0;
}
.bf-mobile-loc {
  font-size: 0.73rem;
  font-weight: 700;
  color: #FFFFFF;
}
.bf-mobile-coords {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #00E5FF;
}

/* 8. Direct ERP Payroll Connector Hub */
.banto-feat-erp {
  background: rgba(20, 10, 32, 0.85);
  border: 1px solid rgba(217, 70, 239, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-erp-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.bf-erp-node {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #E2E8F0;
  text-align: center;
  flex: 1;
}
.bf-erp-arrow {
  color: #D946EF;
  font-weight: bold;
}

/* 9. Subsidy Rule Matrix & Split Calculation */
.banto-feat-subsidy {
  background: rgba(26, 16, 8, 0.85);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-subsidy-table {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.bf-subsidy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
}

/* 10. Kitchen Display System (KDS) Live Demand Monitor */
.banto-feat-kds {
  background: rgba(28, 14, 10, 0.85);
  border: 1px solid rgba(255, 153, 0, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-kds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.bf-kds-orders {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.bf-kds-item {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.7rem;
}

/* 11. Outdoor High-Brightness Safety LED Display Board */
.banto-feat-led {
  background: #02050D;
  border: 1.5px solid #FF9900;
  box-shadow: 0 0 20px rgba(255, 153, 0, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0 18px;
  font-family: var(--font-mono);
}
.bf-led-head {
  font-size: 0.65rem;
  color: #FFA500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bf-led-digits {
  font-size: 1.35rem;
  font-weight: 900;
  color: #00FF66;
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.6);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.bf-led-sub {
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  color: #FFA500;
  border-top: 1px solid rgba(255, 153, 0, 0.3);
  padding-top: 6px;
}

/* 12. Hazardous Area Two-Man Rule Interlock */
.banto-feat-hazard {
  background: rgba(30, 10, 18, 0.85);
  border: 1px solid rgba(255, 51, 102, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-hazard-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.72rem;
}
.bf-hazard-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.bf-hazard-badge {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
}

/* 13. Mobile Emergency Roll Call App & SOS Muster Point */
.banto-feat-muster {
  background: rgba(28, 8, 16, 0.85);
  border: 1px solid rgba(255, 51, 102, 0.35);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.bf-muster-stage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bf-muster-score {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: #10B981;
}
.bf-muster-missing {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #FF3366;
  font-weight: 700;
}
.bf-muster-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.68rem;
}

/* Light Mode Overrides for Feature Bento Graphics */
:root[data-theme="light"] .banto-feat-whatsapp,
:root[data-theme="light"] .banto-feat-radar,
:root[data-theme="light"] .banto-feat-relay,
:root[data-theme="light"] .banto-feat-reconcile,
:root[data-theme="light"] .banto-feat-dossier,
:root[data-theme="light"] .banto-feat-rota,
:root[data-theme="light"] .banto-feat-mobile,
:root[data-theme="light"] .banto-feat-erp,
:root[data-theme="light"] .banto-feat-subsidy,
:root[data-theme="light"] .banto-feat-kds,
:root[data-theme="light"] .banto-feat-hazard,
:root[data-theme="light"] .banto-feat-muster {
  background: #F8FAFC;
  border-color: rgba(0, 37, 233, 0.15);
}
:root[data-theme="light"] .bf-wa-bubble {
  background: rgba(16, 185, 129, 0.08);
  color: #0F172A;
}
:root[data-theme="light"] .bf-radar-zone,
:root[data-theme="light"] .bf-reconcile-num,
:root[data-theme="light"] .bf-mobile-loc {
  color: #0F172A;
}

/* ==========================================================================
   GLOBAL ENTERPRISE LIGHT MODE ENGINE (WCAG AA/AAA CONTRAST)
   Applied automatically across all pages when [data-theme="light"] is active.
   ========================================================================== */

:root[data-theme="light"],
[data-theme="light"] {
  --primary-cyan: #0025E9;
  --text-main: #0A0F26;
  --text-sub: #2D3748;
  --text-muted: #4A5568;
}

:root[data-theme="light"] body,
[data-theme="light"] body {
  background-color: #F8FAFD;
  color: #0A0F26;
}

/* --- 1. NAVBAR & DROPDOWN MENU --- */
:root[data-theme="light"] .navbar,
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(0, 37, 233, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 37, 233, 0.04) !important;
}

:root[data-theme="light"] .nav-links a,
[data-theme="light"] .nav-links a {
  color: #4A5568 !important;
}

:root[data-theme="light"] .nav-links a:hover,
:root[data-theme="light"] .nav-links a.active,
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
  color: #0025E9 !important;
  background: #EFF4FC !important;
}

:root[data-theme="light"] .nav-dropdown-menu,
[data-theme="light"] .nav-dropdown-menu {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 37, 233, 0.16) !important;
  box-shadow: 0 16px 45px rgba(0, 37, 233, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .nav-dropdown-item,
[data-theme="light"] .nav-dropdown-item {
  color: #334155 !important;
}

:root[data-theme="light"] .nav-dropdown-item:hover,
[data-theme="light"] .nav-dropdown-item:hover {
  background: #EFF4FC !important;
  color: #0025E9 !important;
}

:root[data-theme="light"] .nav-dropdown-item:hover .nav-dd-dot,
[data-theme="light"] .nav-dropdown-item:hover .nav-dd-dot {
  box-shadow: 0 0 8px currentColor !important;
}

:root[data-theme="light"] .nav-mobile,
[data-theme="light"] .nav-mobile {
  background: #FFFFFF !important;
  border-bottom: 1.5px solid rgba(0, 37, 233, 0.12) !important;
  box-shadow: 0 14px 35px rgba(0, 37, 233, 0.08) !important;
}

:root[data-theme="light"] .nav-mobile a,
[data-theme="light"] .nav-mobile a {
  color: #334155 !important;
}

:root[data-theme="light"] .nav-mobile a:hover,
:root[data-theme="light"] .nav-mobile a.active,
[data-theme="light"] .nav-mobile a:hover,
[data-theme="light"] .nav-mobile a.active {
  background: #EFF4FC !important;
  color: #0025E9 !important;
}

:root[data-theme="light"] .nav-hamburger span,
[data-theme="light"] .nav-hamburger span {
  background: #1E293B !important;
}

:root[data-theme="light"] .theme-toggle,
[data-theme="light"] .theme-toggle {
  background: #FFFFFF !important;
  border-color: rgba(0, 37, 233, 0.2) !important;
  color: #0025E9 !important;
}

/* --- 2. CARDS, CONTAINERS & SURFACES --- */
:root[data-theme="light"] .card,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .feat3-card,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .industry-detail-card,
:root[data-theme="light"] .case-study-card,
[data-theme="light"] .card,
[data-theme="light"] .form-card,
[data-theme="light"] .feat3-card,
[data-theme="light"] .step-card,
[data-theme="light"] .industry-detail-card,
[data-theme="light"] .case-study-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 37, 233, 0.12) !important;
  box-shadow: 0 8px 30px rgba(0, 37, 233, 0.05) !important;
  color: #0A0F26 !important;
}

:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .feat3-card:hover,
:root[data-theme="light"] .industry-detail-card:hover,
:root[data-theme="light"] .case-study-card:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .feat3-card:hover,
[data-theme="light"] .industry-detail-card:hover,
[data-theme="light"] .case-study-card:hover {
  border-color: rgba(0, 37, 233, 0.3) !important;
  box-shadow: 0 14px 40px rgba(0, 37, 233, 0.1) !important;
}

/* --- 3. 3D BROWSER SHOWCASE & MOCKUP DATA TABLES (FOR ALL PRODUCT PAGES) --- */
:root[data-theme="light"] .h7-browser-card,
[data-theme="light"] .h7-browser-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 37, 233, 0.25) !important;
  box-shadow: 0 25px 70px -10px rgba(0, 37, 233, 0.12), 0 0 0 1px rgba(0, 37, 233, 0.1) !important;
}

:root[data-theme="light"] .v7-app-shell,
[data-theme="light"] .v7-app-shell {
  background: #FFFFFF !important;
  color: #0A0F26 !important;
}

:root[data-theme="light"] .v7-sidebar,
[data-theme="light"] .v7-sidebar {
  background: #F8FAFD !important;
  border-right: 1px solid rgba(0, 37, 233, 0.1) !important;
}

:root[data-theme="light"] .v7-brand-title,
[data-theme="light"] .v7-brand-title {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .v7-brand-sub,
[data-theme="light"] .v7-brand-sub {
  color: #5A6A85 !important;
}

:root[data-theme="light"] .v7-nav-item,
[data-theme="light"] .v7-nav-item {
  color: #4A5568 !important;
}

:root[data-theme="light"] .v7-nav-item.active,
[data-theme="light"] .v7-nav-item.active {
  background: #0025E9 !important;
  color: #FFFFFF !important;
}

:root[data-theme="light"] .v7-nav-item.active svg,
[data-theme="light"] .v7-nav-item.active svg {
  stroke: #FFFFFF !important;
}

:root[data-theme="light"] .v7-top-header,
[data-theme="light"] .v7-top-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0, 37, 233, 0.1) !important;
}

:root[data-theme="light"] .v7-top-title,
[data-theme="light"] .v7-top-title {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .v7-workspace,
[data-theme="light"] .v7-workspace {
  background: #F8FAFD !important;
}

:root[data-theme="light"] .v7-kpi-card,
[data-theme="light"] .v7-kpi-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 37, 233, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 37, 233, 0.04) !important;
}

:root[data-theme="light"] .v7-kpi-val,
[data-theme="light"] .v7-kpi-val {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .v7-kpi-lbl,
:root[data-theme="light"] .v7-kpi-title,
[data-theme="light"] .v7-kpi-lbl,
[data-theme="light"] .v7-kpi-title {
  color: #4A5568 !important;
}

:root[data-theme="light"] .v7-card,
:root[data-theme="light"] .v7-table-card,
:root[data-theme="light"] .v7-donut-card,
[data-theme="light"] .v7-card,
[data-theme="light"] .v7-table-card,
[data-theme="light"] .v7-donut-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 37, 233, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 37, 233, 0.04) !important;
}

:root[data-theme="light"] .v7-card-title,
[data-theme="light"] .v7-card-title {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .v7-data-table th,
[data-theme="light"] .v7-data-table th {
  background: #F1F5F9 !important;
  color: #1E293B !important;
  border-bottom: 1.5px solid rgba(0, 37, 233, 0.14) !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .v7-data-table td,
[data-theme="light"] .v7-data-table td {
  border-bottom: 1px solid rgba(0, 37, 233, 0.07) !important;
  color: #2D3748 !important;
}

:root[data-theme="light"] .v7-vis-name,
[data-theme="light"] .v7-vis-name {
  color: #0A0F26 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .v7-data-table td span[style*="#00D2FF"],
:root[data-theme="light"] .v7-data-table td span[style*="#00E5FF"],
[data-theme="light"] .v7-data-table td span[style*="#00D2FF"],
[data-theme="light"] .v7-data-table td span[style*="#00E5FF"] {
  color: #0025E9 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .v7-data-table td span[style*="#FDE68A"],
:root[data-theme="light"] .v7-data-table td span[style*="#FFCC00"],
[data-theme="light"] .v7-data-table td span[style*="#FDE68A"],
[data-theme="light"] .v7-data-table td span[style*="#FFCC00"] {
  color: #B45309 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .v7-data-table td span[style*="#D5DEEF"],
[data-theme="light"] .v7-data-table td span[style*="#D5DEEF"] {
  color: #1E293B !important;
}

:root[data-theme="light"] .v7-data-table td span[style*="#00D084"],
[data-theme="light"] .v7-data-table td span[style*="#00D084"] {
  color: #047857 !important;
}

:root[data-theme="light"] .h3-sat-card,
[data-theme="light"] .h3-sat-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 37, 233, 0.2) !important;
  box-shadow: 0 16px 40px rgba(0, 37, 233, 0.1) !important;
}

:root[data-theme="light"] .h3-sat-title,
[data-theme="light"] .h3-sat-title {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .h3-alert-item,
[data-theme="light"] .h3-alert-item {
  background: #F8FAFD !important;
  border: 1px solid rgba(0, 37, 233, 0.1) !important;
}

:root[data-theme="light"] .h3-alert-text,
[data-theme="light"] .h3-alert-text {
  color: #4A5568 !important;
}

:root[data-theme="light"] .h3-alert-text strong,
[data-theme="light"] .h3-alert-text strong {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .h4-chrome,
[data-theme="light"] .h4-chrome {
  background: #EBF0FC !important;
  border-bottom: 1px solid rgba(0, 37, 233, 0.12) !important;
}

:root[data-theme="light"] .h4-address,
[data-theme="light"] .h4-address {
  background: #FFFFFF !important;
  color: #1E293B !important;
  border: 1px solid rgba(0, 37, 233, 0.18) !important;
}

/* --- 4. FORMS & INPUTS --- */
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-textarea,
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background: #F8FAFD !important;
  border: 1.5px solid rgba(0, 37, 233, 0.16) !important;
  color: #0A0F26 !important;
}

:root[data-theme="light"] .form-input:focus,
:root[data-theme="light"] .form-select:focus,
:root[data-theme="light"] .form-textarea:focus,
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
  border-color: #0025E9 !important;
  box-shadow: 0 0 0 3px rgba(0, 37, 233, 0.15) !important;
  background: #FFFFFF !important;
}

:root[data-theme="light"] .form-label,
[data-theme="light"] .form-label {
  color: #334155 !important;
  font-weight: 700 !important;
}

/* --- 5. FAQ ITEMS --- */
:root[data-theme="light"] .faq-item,
[data-theme="light"] .faq-item {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 37, 233, 0.12) !important;
}

:root[data-theme="light"] .faq-item.open,
[data-theme="light"] .faq-item.open {
  border-color: rgba(0, 37, 233, 0.35) !important;
  box-shadow: 0 6px 20px rgba(0, 37, 233, 0.08) !important;
}

:root[data-theme="light"] .faq-question,
[data-theme="light"] .faq-question {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .faq-answer,
[data-theme="light"] .faq-answer {
  color: #334155 !important;
}

/* --- 6. FOOTER --- */
:root[data-theme="light"] .site-footer,
[data-theme="light"] .site-footer {
  background: #EFF4FC !important;
  border-top: 1px solid rgba(0, 37, 233, 0.1) !important;
}

:root[data-theme="light"] .site-footer .footer-col-title,
[data-theme="light"] .site-footer .footer-col-title {
  color: #0A0F26 !important;
}

:root[data-theme="light"] .site-footer .footer-links-list a,
[data-theme="light"] .site-footer .footer-links-list a {
  color: #4A5568 !important;
}

:root[data-theme="light"] .site-footer .footer-links-list a:hover,
[data-theme="light"] .site-footer .footer-links-list a:hover {
  color: #0025E9 !important;
}

:root[data-theme="light"] .site-footer .footer-bottom,
[data-theme="light"] .site-footer .footer-bottom {
  border-top: 1px solid rgba(0, 37, 233, 0.1) !important;
  color: #64748B !important;
}