/* ==========================================================================
   DXS FURNITECH — MASTER PREMIUM DESIGN SYSTEM
   Security + Technology + Circular Economy + Sustainability + Corporate Trust
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography & Web Font Imports
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arabic: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-primary: var(--font-sans);

  /* Centralized Brand Palette (Eco-Circular Olive Green) */
  --color-primary:          #698341; /* Brand 500 - Canonical Brand Green */
  --color-primary-hover:    #546b33; /* Brand 600 - Richer hover state */
  --color-primary-active:   #3f5026; /* Brand 700 - Active state */
  --color-primary-dark:     #3f5026; /* High-contrast text on light bg (8.80:1) */
  --color-primary-light:    #e5ecd9; /* Brand 100 */
  --color-primary-subtle:   #f4f7f0; /* Brand 50 */
  --color-primary-muted:    #a6c189; /* Brand 300 */
  --color-primary-border:   #7ea15c; /* Brand 400 */

  /* Centralized Surfaces & Backgrounds (Light Mode) */
  --color-background:        #f8fafc; /* Slate 50 */
  --color-surface:           #ffffff; /* Pure white card/modal surface */
  --color-surface-secondary: #f1f5f9; /* Slate 100 */
  --color-surface-elevated:  #ffffff;

  /* Centralized Text Hierarchy (Light Mode - WCAG Compliant) */
  --color-text-primary:      #0f172a; /* Slate 900 (17.85:1 contrast) */
  --color-text-secondary:    #334155; /* Slate 700 (10.35:1 contrast) */
  --color-text-muted:        #475569; /* Slate 600 (7.58:1 contrast - AAA) */
  --color-text-subtle:       #64748b; /* Slate 500 (4.76:1 contrast - AA) */
  --color-text-disabled:     #94a3b8; /* Slate 400 */

  /* Centralized Borders & Dividers (Light Mode) */
  --color-border:            #e2e8f0; /* Slate 200 */
  --color-border-subtle:     #f1f5f9; /* Slate 100 */
  --color-border-strong:     #cbd5e1; /* Slate 300 */
  --color-border-focus:      #698341; /* Brand 500 */

  /* Form & Interactive Controls (Light Mode) */
  --color-input-bg:          #ffffff;
  --color-input-border:      #cbd5e1;
  --color-input-text:        #0f172a;
  --color-input-placeholder: #64748b; /* Contrast 4.76:1 */

  /* Brand Palette Legacy Tokens (for 100% backward compatibility) */
  --dxs-primary-50:  #f4f7f0;
  --dxs-primary-100: #e5ecd9;
  --dxs-primary-200: #cbdab6;
  --dxs-primary-300: #a6c189;
  --dxs-primary-400: #7ea15c;
  --dxs-primary-500: #698341;
  --dxs-primary-600: #546b33;
  --dxs-primary-700: #3f5026;
  --dxs-primary-800: #2c381b;
  --dxs-primary-900: #1b2210;

  /* Cyber & Technology Accents */
  --dxs-cyber-blue:  #0ea5e9;
  --dxs-cyber-navy:  #0f172a;
  --dxs-cyber-cyan:  #06b6d4;
  --dxs-trust-indigo: #4338ca;

  /* Semantic State Colors */
  --dxs-success: #10b981;
  --dxs-warning: #f59e0b;
  --dxs-danger:  #ef4444;
  --dxs-info:    #3b82f6;

  /* Surfaces & Elevation (Light Mode) */
  --dxs-bg-main:       var(--color-background);
  --dxs-bg-surface:    var(--color-surface);
  --dxs-bg-elevated:   var(--color-surface-elevated);
  --dxs-border-subtle: var(--color-border);
  --dxs-border-strong: var(--color-border-strong);
  --dxs-text-heading:  var(--color-text-primary);
  --dxs-text-body:     var(--color-text-secondary);
  --dxs-text-muted:    var(--color-text-muted);

  /* Independent Light Mode Palette Aliases */
  --bg-primary:     var(--color-surface);
  --bg-secondary:   var(--color-background);
  --surface:        var(--color-surface);
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --heading:        var(--color-text-primary);
  --border:         var(--color-border);
  --accent:         var(--color-primary-dark);
  --button-bg:      var(--color-primary);
  --button-text:    #ffffff;
  --muted:          var(--color-text-muted);

  /* Shadows (Curated Light Elevation) */
  --dxs-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --dxs-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --dxs-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  --dxs-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --dxs-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.18);
  --dxs-shadow-brand: 0 10px 25px -5px rgba(105, 131, 65, 0.35);

  /* Border Radii Tokens */
  --dxs-radius-sm: 0.5rem;   /* 8px */
  --dxs-radius-md: 0.75rem;  /* 12px */
  --dxs-radius-lg: 1rem;     /* 16px */
  --dxs-radius-xl: 1.5rem;   /* 24px */
  --dxs-radius-2xl: 2rem;    /* 32px */
  --dxs-radius-full: 9999px;
}

/* Dark Mode Tokens Override (Independent Dark Palette with Crisp Contrast) */
.dark {
  /* Centralized Brand Palette (Dark Mode Optimized - High Legibility) */
  --color-primary:          #7ea15c; /* Brand 400 (6.07:1 on dark surface) */
  --color-primary-hover:    #a6c189; /* Brand 300 (9.02:1 on dark surface) */
  --color-primary-active:   #cbdab6; /* Brand 200 */
  --color-primary-dark:     #546b33; /* Brand 600 */
  --color-primary-light:    rgba(105, 131, 65, 0.2);
  --color-primary-subtle:   rgba(105, 131, 65, 0.1);
  --color-primary-muted:    rgba(126, 161, 92, 0.4);
  --color-primary-border:   #7ea15c;

  /* Centralized Surfaces & Backgrounds (Dark Mode) */
  --color-background:        #090d16; /* Deep corporate dark navy */
  --color-surface:           #0f172a; /* Slate 900 surface */
  --color-surface-secondary: #1e293b; /* Slate 800 */
  --color-surface-elevated:  #1e293b; /* Elevated card surface */

  /* Centralized Text Hierarchy (Dark Mode - WCAG Compliant) */
  --color-text-primary:      #f8fafc; /* Slate 50 (16.90:1 contrast) */
  --color-text-secondary:    #cbd5e1; /* Slate 300 (12.02:1 contrast) */
  --color-text-muted:        #94a3b8; /* Slate 400 (6.96:1 contrast - AA) */
  --color-text-subtle:       #64748b; /* Slate 500 */
  --color-text-disabled:     #475569; /* Slate 600 */

  /* Centralized Borders & Dividers (Dark Mode - Visible & Structured) */
  --color-border:            #334155; /* Slate 700 - Clean visible border */
  --color-border-subtle:     rgba(255, 255, 255, 0.10);
  --color-border-strong:     #475569; /* Slate 600 */
  --color-border-focus:      #7ea15c;

  /* Form & Interactive Controls (Dark Mode) */
  --color-input-bg:          #1e293b;
  --color-input-border:      #334155;
  --color-input-text:        #f8fafc;
  --color-input-placeholder: #94a3b8; /* Contrast 5.71:1 on #1e293b */

  /* Legacy Tokens Override */
  --dxs-bg-main:       var(--color-background);
  --dxs-bg-surface:    var(--color-surface);
  --dxs-bg-elevated:   var(--color-surface-elevated);
  --dxs-border-subtle: var(--color-border);
  --dxs-border-strong: var(--color-border-strong);
  --dxs-text-heading:  var(--color-text-primary);
  --dxs-text-body:     var(--color-text-secondary);
  --dxs-text-muted:    var(--color-text-muted);

  /* Independent Dark Mode Palette Aliases */
  --bg-primary:     var(--color-background);
  --bg-secondary:   var(--color-surface);
  --surface:        var(--color-surface-elevated);
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --heading:        var(--color-text-primary);
  --border:         var(--color-border);
  --accent:         var(--color-primary-hover);
  --button-bg:      #698341;
  --button-text:    #ffffff;
  --muted:          var(--color-text-muted);

  --dxs-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.4);
  --dxs-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.5);
  --dxs-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.6);
  --dxs-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.7);
  --dxs-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.85);
  --dxs-shadow-brand: 0 10px 30px -5px rgba(126, 161, 92, 0.25);
}



/* Accessibility: Prefers-Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High-Contrast Conversion CTA Section (WCAG AA Compliant) */
.dxs-cta-section {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.dxs-cta-section h2 {
  color: var(--heading) !important;
}

.dxs-cta-section p {
  color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   2. Base Body & Smooth Transitions
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-primary);
  background-color: var(--dxs-bg-main);
  color: var(--dxs-text-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading Defaults */
h1, h2, h3, h4, h5, h6 {
  color: var(--dxs-text-heading);
  letter-spacing: -0.025em;
  font-weight: 800;
}

/* High-contrast headings on dark backgrounds and text-white containers */
.text-white h1:not(.text-transparent),
.text-white h2:not(.text-transparent),
.text-white h3:not(.text-transparent),
.text-white h4:not(.text-transparent),
.text-white h5:not(.text-transparent),
.text-white h6:not(.text-transparent),
.bg-slate-900 h1:not(.text-transparent),
.bg-slate-900 h2:not(.text-transparent),
.bg-slate-900 h3:not(.text-transparent),
.bg-slate-900 h4:not(.text-transparent),
.bg-slate-900 h5:not(.text-transparent),
.bg-slate-900 h6:not(.text-transparent),
.bg-slate-950 h1:not(.text-transparent),
.bg-slate-950 h2:not(.text-transparent),
.bg-slate-950 h3:not(.text-transparent),
.bg-slate-950 h4:not(.text-transparent),
.bg-slate-950 h5:not(.text-transparent),
.bg-slate-950 h6:not(.text-transparent),
.bg-slate-800 h1:not(.text-transparent),
.bg-slate-800 h2:not(.text-transparent),
.bg-slate-800 h3:not(.text-transparent),
.bg-slate-800 h4:not(.text-transparent),
.bg-slate-800 h5:not(.text-transparent),
.bg-slate-800 h6:not(.text-transparent),
[class*="bg-slate-900"] h1:not(.text-transparent),
[class*="bg-slate-900"] h2:not(.text-transparent),
[class*="bg-slate-900"] h3:not(.text-transparent),
[class*="bg-slate-900"] h4:not(.text-transparent),
[class*="bg-slate-900"] h5:not(.text-transparent),
[class*="bg-slate-900"] h6:not(.text-transparent),
[class*="bg-slate-950"] h1:not(.text-transparent),
[class*="bg-slate-950"] h2:not(.text-transparent),
[class*="bg-slate-950"] h3:not(.text-transparent),
[class*="bg-slate-950"] h4:not(.text-transparent),
[class*="bg-slate-950"] h5:not(.text-transparent),
[class*="bg-slate-950"] h6:not(.text-transparent),
h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white,
.hero-dark h1, .hero-dark h2, .hero-dark h3,
[class*="from-slate-900"] h1:not(.text-transparent),
[class*="from-slate-950"] h1:not(.text-transparent),
[class*="to-slate-900"] h1:not(.text-transparent),
[class*="to-slate-950"] h1:not(.text-transparent),
.bg-brand-900 h1:not(.text-transparent),
.bg-brand-950 h1:not(.text-transparent) {
  color: #ffffff !important;
}

/* Light background contrast guarantee: ensure headings & labels on light containers are dark in light mode */
html:not(.dark) .bg-white h1:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-white h2:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-white h3:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-white h4:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-white h5:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-white h6:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-50 h1:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-50 h2:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-50 h3:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-50 h4:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-50 h5:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-50 h6:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-100 h1:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-100 h2:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-100 h3:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-100 h4:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-100 h5:not(.text-white):not(.text-transparent),
html:not(.dark) .bg-slate-100 h6:not(.text-white):not(.text-transparent) {
  color: var(--color-text-primary) !important;
}

/* Light mode form labels contrast guarantee: never allow washed-out grey labels on light backgrounds */
html:not(.dark) label.text-slate-400,
html:not(.dark) .text-slate-400 label,
html:not(.dark) form label.text-slate-400,
html:not(.dark) .bg-white label.text-slate-400,
html:not(.dark) .bg-slate-50 label.text-slate-400,
html:not(.dark) .bg-slate-100 label.text-slate-400 {
  color: #334155 !important; /* Slate 700: 10.35:1 contrast - WCAG AAA */
}

/* Dark mode form labels contrast guarantee: crisp, easily readable light slate */
.dark label.text-slate-400,
.dark .text-slate-400 label,
.dark form label.text-slate-400 {
  color: #cbd5e1 !important; /* Slate 300: 12.02:1 contrast - WCAG AAA */
}

/* --------------------------------------------------------------------------
   3. Custom Modern Scrollbars
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
.dark ::-webkit-scrollbar-track {
  background: #090d16;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--dxs-radius-full);
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dxs-primary-500);
}

/* --------------------------------------------------------------------------
   4. Glassmorphism & High-Tech Blur Filters
   -------------------------------------------------------------------------- */
.glass-effect,
.dxs-glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.dark .glass-effect,
.dark .dxs-glass {
  background: rgba(15, 23, 42, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* High-tech glow overlay */
.dxs-glow-border {
  position: relative;
}
.dxs-glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--dxs-primary-500), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Buttons System
   -------------------------------------------------------------------------- */
.dxs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: var(--dxs-radius-lg);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.dxs-btn:active {
  transform: scale(0.98);
}

/* Button Variants */
.dxs-btn-primary {
  background-color: var(--dxs-primary-500);
  color: #ffffff;
  box-shadow: var(--dxs-shadow-brand);
}
.dxs-btn-primary:hover {
  background-color: var(--dxs-primary-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(105, 131, 65, 0.45);
}

.dxs-btn-secondary {
  background-color: var(--dxs-bg-surface);
  color: var(--dxs-text-heading);
  border: 1px solid var(--dxs-border-strong);
  box-shadow: var(--dxs-shadow-sm);
}
.dxs-btn-secondary:hover {
  background-color: var(--dxs-primary-50);
  border-color: var(--dxs-primary-300);
  color: var(--dxs-primary-700);
  transform: translateY(-2px);
}
.dark .dxs-btn-secondary:hover {
  background-color: #1e293b;
  border-color: var(--dxs-primary-500);
  color: #ffffff;
}

.dxs-btn-cyber {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.25);
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.4);
}
.dxs-btn-cyber:hover {
  border-color: var(--dxs-cyber-blue);
  box-shadow: 0 12px 25px -4px rgba(14, 165, 233, 0.35);
  transform: translateY(-2px);
}

/* Button Sizes */
.dxs-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem; /* 13px */
  border-radius: var(--dxs-radius-md);
}
.dxs-btn-md {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem; /* 14px */
}
.dxs-btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem; /* 16px */
  border-radius: var(--dxs-radius-xl);
}

/* --------------------------------------------------------------------------
   6. Cards & Surface Containers
   -------------------------------------------------------------------------- */
.dxs-card {
  background-color: var(--dxs-bg-surface);
  border: 1px solid var(--dxs-border-subtle);
  border-radius: var(--dxs-radius-xl);
  padding: 2rem;
  box-shadow: var(--dxs-shadow-sm);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.dxs-card:hover {
  border-color: var(--dxs-border-strong);
  box-shadow: var(--dxs-shadow-lg);
}

.dxs-card-interactive {
  cursor: pointer;
}
.dxs-card-interactive:hover {
  transform: translateY(-6px);
  border-color: var(--dxs-primary-400);
  box-shadow: var(--dxs-shadow-xl), var(--dxs-shadow-brand);
}

/* Card 3D Legacy Preservation */
.perspective-1000 {
  perspective: 1000px;
}
.card-3d {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.card-3d:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* --------------------------------------------------------------------------
   7. Form Inputs & Interactive Controls
   -------------------------------------------------------------------------- */
.dxs-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.dxs-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}
.dark .dxs-label {
  color: var(--color-text-secondary);
}

.dxs-input,
.dxs-select,
.dxs-textarea {
  width: 100%;
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  border-radius: var(--dxs-radius-md);
  border: 1px solid var(--color-input-border);
  background-color: var(--color-input-bg);
  color: var(--color-input-text);
  transition: all 0.2s ease;
  outline: none;
}

.dxs-input:focus,
.dxs-select:focus,
.dxs-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(105, 131, 65, 0.25);
}
.dark .dxs-input:focus,
.dark .dxs-select:focus,
.dark .dxs-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(126, 161, 92, 0.25);
}

.dxs-input::placeholder,
.dxs-textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-input-placeholder) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   8. Badges & Micro-Labels
   -------------------------------------------------------------------------- */
.dxs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--dxs-radius-full);
}

.dxs-badge-success {
  background-color: var(--color-primary-subtle);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light);
}
.dark .dxs-badge-success {
  background-color: var(--color-primary-light);
  color: var(--color-primary-hover);
  border-color: var(--color-primary-muted);
}

.dxs-badge-security {
  background-color: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.dark .dxs-badge-security {
  background-color: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.3);
}

.dxs-badge-trust {
  background-color: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.dark .dxs-badge-trust {
  background-color: rgba(67, 56, 202, 0.2);
  color: #a5b4fc;
  border-color: rgba(67, 56, 202, 0.4);
}

/* --------------------------------------------------------------------------
   9. Tables System
   -------------------------------------------------------------------------- */
.dxs-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--dxs-border-subtle);
  border-radius: var(--dxs-radius-xl);
  background-color: var(--dxs-bg-surface);
}

.dxs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}



.dxs-table th {
  padding: 1rem 1.25rem;
  background-color: var(--dxs-bg-main);
  color: var(--dxs-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--dxs-border-subtle);
}

.dxs-table td {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--dxs-border-subtle);
  color: var(--dxs-text-body);
}

.dxs-table tbody tr:last-child td {
  border-bottom: none;
}

.dxs-table tbody tr:hover {
  background-color: rgba(105, 131, 65, 0.04);
}
.dark .dxs-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* --------------------------------------------------------------------------
   10. Modals & Dialog System
   -------------------------------------------------------------------------- */
.dxs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dxs-modal-overlay.active,
.dxs-modal-overlay.flex:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.dxs-modal-container {
  width: 100%;
  max-width: 36rem;
  background-color: var(--dxs-bg-surface);
  border: 1px solid var(--dxs-border-strong);
  border-radius: var(--dxs-radius-2xl);
  padding: 2.25rem;
  box-shadow: var(--dxs-shadow-2xl);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.dxs-modal-overlay.active .dxs-modal-container {
  transform: scale(1) translateY(0);
}

/* --------------------------------------------------------------------------
   11. Layout Containers & Sectioning
   -------------------------------------------------------------------------- */
.dxs-container {
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .dxs-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.dxs-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
@media (min-width: 1024px) {
  .dxs-section {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }
}

.dxs-section-header {
  text-align: center;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}

/* --------------------------------------------------------------------------
   12. Micro-Animations & Interactivity
   -------------------------------------------------------------------------- */
/* Subtle Shimmer for High-Tech Cards */
@keyframes dxs-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-shimmer {
  position: relative;
  overflow: hidden;
}
.animate-shimmer::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.15) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: dxs-shimmer 3s infinite;
}

/* Partner Logo Marquee */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}



/* Intersection Observer Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Loading Screen Animation */
#loading-screen {
  transition: opacity 0.5s ease, visibility 0.5s;
}



/* Disable transitions when switching themes */
.no-transitions * {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   13. DXS Master Navbar & Dropdown Design System
   Guarantees 100% Visual & Layout Stability across All Pages
   -------------------------------------------------------------------------- */
.dxs-header {
  height: 5rem; /* 80px */
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.dxs-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.dxs-nav-link {
  white-space: nowrap !important;
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.25rem 0.375rem 0.25rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

.dark .dxs-nav-link {
  color: #cbd5e1;
}

.dxs-nav-link:hover {
  color: var(--dxs-primary-500);
}

.dark .dxs-nav-link:hover {
  color: var(--dxs-primary-400);
}

.dxs-nav-link.active-nav-link {
  color: var(--dxs-primary-600) !important;
  font-weight: 800 !important;
  border-bottom-color: var(--dxs-primary-600) !important;
}

.dark .dxs-nav-link.active-nav-link {
  color: var(--dxs-primary-400) !important;
  font-weight: 800 !important;
  border-bottom-color: var(--dxs-primary-500) !important;
}

/* Dropdown Container */
.dxs-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

/* Dropdown Menu Popup Box */
.dxs-dropdown-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  width: 22rem; /* 352px */
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1rem;
  padding: 0.625rem;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: top left;
  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;
  pointer-events: none;
}

.dark .dxs-dropdown-menu {
  background: #0f172a;
  border-color: rgba(51, 65, 85, 0.8);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Invisible Hover Bridge: ensures smooth cursor movement without closing */
.dxs-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

/* Open State on Hover, Focus & Click (.is-open) */
.dxs-dropdown-wrapper:hover .dxs-dropdown-menu,
.dxs-dropdown-wrapper:focus-within .dxs-dropdown-menu,
.dxs-dropdown-wrapper.is-open .dxs-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Chevron Rotation */
.dxs-chevron {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dxs-dropdown-wrapper:hover .dxs-chevron,
.dxs-dropdown-wrapper:focus-within .dxs-chevron,
.dxs-dropdown-wrapper.is-open .dxs-chevron {
  transform: rotate(180deg);
}



/* Dropdown Individual Items */
.dxs-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  transition: background-color 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

.dxs-dropdown-item:hover {
  background-color: #f8fafc;
  transform: translateX(2px);
}

.dark .dxs-dropdown-item:hover {
  background-color: #1e293b;
  transform: translateX(2px);
}



.dxs-dropdown-item.active {
  background-color: rgba(105, 131, 65, 0.08) !important;
  border: 1px solid rgba(105, 131, 65, 0.25) !important;
}

.dark .dxs-dropdown-item.active {
  background-color: rgba(105, 131, 65, 0.18) !important;
  border-color: rgba(105, 131, 65, 0.45) !important;
}

/* Security Standards Badges Cards */
.dxs-standard-card {
  background: var(--dxs-bg-surface);
  border: 1px solid var(--dxs-border-subtle);
  border-radius: var(--dxs-radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dxs-standard-card:hover {
  border-color: var(--dxs-primary-400);
  transform: translateY(-3px);
  box-shadow: var(--dxs-shadow-md);
}

/* --------------------------------------------------------------------------
   14. DXS Interactive Simulator Section & SaaS UI Mockup
   -------------------------------------------------------------------------- */
.dxs-simulator-section {
  position: relative;
  background-color: #0b1120;
  color: #f8fafc;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dxs-sim-glow-brand {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(105, 131, 65, 0.22) 0%, rgba(105, 131, 65, 0) 70%);
  border-radius: 9999px;
  filter: blur(50px);
  pointer-events: none;
}

.dxs-sim-glow-cyan {
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0) 70%);
  border-radius: 9999px;
  filter: blur(50px);
  pointer-events: none;
}

/* Glassmorphism Mockup Card */
.dxs-sim-mockup {
  position: relative;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.dxs-sim-mockup:hover {
  transform: translateY(-4px);
  border-color: rgba(126, 161, 92, 0.4);
  box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.75), 0 0 45px -10px rgba(105, 131, 65, 0.3);
}

/* Micro-items in mockup */
.dxs-sim-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.875rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.dxs-sim-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(126, 161, 92, 0.35);
  transform: translateX(3px);
}



/* Valorisation Highlight Box */
.dxs-sim-val-box {
  background: linear-gradient(135deg, rgba(105, 131, 65, 0.16) 0%, rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(126, 161, 92, 0.35);
  border-radius: 1.125rem;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.dxs-sim-val-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(126, 161, 92, 0.8), transparent);
}

/* Floating Badges */
.dxs-sim-float-badge {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f1f5f9;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.4);
}

/* Keyframe animations */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}

.animate-float-slow {
  animation: floatSlow 5s ease-in-out infinite;
}

.animate-float-reverse {
  animation: floatSlowReverse 5.5s ease-in-out infinite;
}

.animate-pulse-dot {
  animation: pulseDot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-float-slow,
  .animate-float-reverse,
  .animate-pulse-dot {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   15. FAQ, Accordions & Global UI Contrast Guarantee (WCAG AA / AAA)
   -------------------------------------------------------------------------- */
.faq-trigger {
  color: var(--color-text-primary);
  transition: color 0.2s ease;
}

.faq-icon {
  color: var(--color-text-subtle);
  transition: transform 0.3s ease, color 0.2s ease;
}

.dark .faq-icon {
  color: var(--color-text-muted);
}

.faq-trigger:hover .faq-icon,
.faq-trigger[aria-expanded="true"] .faq-icon {
  color: var(--color-primary);
}

/* Light mode FAQ answer text contrast */
html:not(.dark) .faq-content {
  color: var(--color-text-secondary);
}

/* Breadcrumb navigation contrast */
nav[aria-label="Breadcrumb"],
.breadcrumb {
  color: var(--color-text-muted);
}

/* Form input placeholder cross-browser guarantee */
::-webkit-input-placeholder {
  color: var(--color-input-placeholder) !important;
  opacity: 1 !important;
}
::-moz-placeholder {
  color: var(--color-input-placeholder) !important;
  opacity: 1 !important;
}
:-ms-input-placeholder {
  color: var(--color-input-placeholder) !important;
  opacity: 1 !important;
}
::placeholder {
  color: var(--color-input-placeholder) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   16. Card & List Headings Link Color Normalization (WCAG & Design Harmony)
   Guarantees that card/article/list titles never default to browser blue/purple
   and strictly adopt the canonical site typography and brand hover behavior.
   -------------------------------------------------------------------------- */
article h2 a,
article h3 a,
article h4 a,
.dxs-card h2 a,
.dxs-card h3 a,
.dxs-card h4 a,
.card-title,
.article-title,
.post-title,
h2 > a,
h3 > a,
h4 > a,
a > h2,
a > h3,
a > h4 {
  color: inherit;
  text-decoration: none;
}

article h2 a:hover,
article h3 a:hover,
article h4 a:hover,
.dxs-card h2 a:hover,
.dxs-card h3 a:hover,
.dxs-card h4 a:hover,
.card-title:hover,
.article-title:hover,
.post-title:hover,
h2 > a:hover,
h3 > a:hover,
h4 > a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.dark article h2 a:hover,
.dark article h3 a:hover,
.dark article h4 a:hover,
.dark .dxs-card h2 a:hover,
.dark .dxs-card h3 a:hover,
.dark .dxs-card h4 a:hover,
.dark .card-title:hover,
.dark .article-title:hover,
.dark .post-title:hover,
.dark h2 > a:hover,
.dark h3 > a:hover,
.dark h4 > a:hover {
  color: var(--color-primary-border);
}

article h2 a:visited,
article h3 a:visited,
article h4 a:visited,
.dxs-card h2 a:visited,
.dxs-card h3 a:visited,
.dxs-card h4 a:visited,
.card-title:visited,
.article-title:visited,
.post-title:visited,
h2 > a:visited,
h3 > a:visited,
h4 > a:visited {
  color: inherit;
}

article h2 a:visited:hover,
article h3 a:visited:hover,
article h4 a:visited:hover,
.dxs-card h2 a:visited:hover,
.dxs-card h3 a:visited:hover,
.dxs-card h4 a:visited:hover,
.card-title:visited:hover,
.article-title:visited:hover,
.post-title:visited:hover,
h2 > a:visited:hover,
h3 > a:visited:hover,
h4 > a:visited:hover {
  color: var(--color-primary);
}

.dark article h2 a:visited:hover,
.dark article h3 a:visited:hover,
.dark article h4 a:visited:hover,
.dark .dxs-card h2 a:visited:hover,
.dark .dxs-card h3 a:visited:hover,
.dark .dxs-card h4 a:visited:hover,
.dark .card-title:visited:hover,
.dark .article-title:visited:hover,
.dark .post-title:visited:hover,
.dark h2 > a:visited:hover,
.dark h3 > a:visited:hover,
.dark h4 > a:visited:hover {
  color: var(--color-primary-border);
}