/* ═══════════════════════════════════════════════════════════
   XMPRO DESIGN SYSTEM
   Added by GitHub-managed design system.
   Do not edit above this line — chatbot CSS is managed separately.
   ═══════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES — DESIGN TOKENS

   These mirror the Flatsome theme_mods values as CSS variables.
   Flatsome shortcodes use theme settings directly — these vars
   are for Tier 2/3 custom components only.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand colors — from theme_mods_xmpro-child */
  --xm-primary: #003952;
  --xm-secondary: #009fde;
  --xm-success: #00a698;
  --xm-alert: #EC8629;
  --xm-danger: #cc3333;
  --xm-text: #3a3a3a;
  --xm-text-muted: #919191;
  --xm-white: #ffffff;

  /* Surfaces — industrial/HMI inspired */
  --xm-surface: #F0F0F0;
  --xm-surface-mid: #E8E8E8;
  --xm-surface-dark: #D8D8D8;
  --xm-surface-panel: #1a1a2e;
  --xm-border: #AAAAAA;
  --xm-border-light: #DDDDDD;

  /* Typography */
  --xm-font: 'futura-pt', 'Jost', sans-serif;
  --xm-radius: 2px;

  /* Spacing */
  --xm-space-xs: 4px;
  --xm-space-sm: 8px;
  --xm-space-md: 16px;
  --xm-space-lg: 24px;
  --xm-space-xl: 40px;

  /* Glass surface tokens */
  --xm-radius: 8px;
  --xm-glass-bg: rgba(255, 255, 255, 0.65);
  --xm-glass-border: rgba(0, 0, 0, 0.08);
  --xm-glass-blur: 16px;
  --xm-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --xm-glass-header: rgba(255, 255, 255, 0.45);
  --xm-glass-header-border: rgba(0, 0, 0, 0.05);

  /* ── AD Platform Tokens (light mode defaults) ──────────── */
  /* Derived from XMPro App Designer theme.css              */
  --xm-ad-bg: #ffffff;
  --xm-ad-bg-card: #F4F4F4;
  --xm-ad-bg-header: #f0f0f0;
  --xm-ad-text: #333333;
  --xm-ad-text-muted: #959595;
  --xm-ad-border: #dddddd;
  --xm-ad-shadow: 0px 0px 8px #DCE1E5;
  --xm-ad-radius: 4px;

  /* AD status colors (from platform) */
  --xm-ad-good: #88A872;
  --xm-ad-caution: #D6AA42;
  --xm-ad-critical: #E55253;
  --xm-ad-info: #3384B7;

  /* AD accent/theme (teal default) */
  --xm-ad-accent: #18777c;
  --xm-ad-accent-dark: #115356;

  /* AD gauge colors */
  --xm-ad-gauge-bg: #e0e0e0;
  --xm-ad-gauge-needle: #333333;

  /* AD chart series colors */
  --xm-ad-series-1: #3384B7;
  --xm-ad-series-2: #88A872;
  --xm-ad-series-3: #D6AA42;
  --xm-ad-series-4: #E55253;
  --xm-ad-series-5: #18777c;
}

/* ── Dark mode overrides ─────────────────────────────────
   Flatsome adds .dark class to sections with dark="true".
   AD components inside dark sections auto-switch.
   ─────────────────────────────────────────────────────── */
.dark {
  --xm-ad-bg: #202020;
  --xm-ad-bg-card: #2A2A2A;
  --xm-ad-bg-header: #282d32;
  --xm-ad-text: #DEDEDE;
  --xm-ad-text-muted: #959595;
  --xm-ad-border: #3d4247;
  --xm-ad-shadow: 0px 0px 8px #222;
  --xm-ad-gauge-bg: #3d4247;
  --xm-ad-gauge-needle: #DEDEDE;
}


/* ═══════════════════════════════════════════════════════════
   2. TYPOGRAPHY — xm-text-* and xm-heading-*

   Complete type scale for custom HTML components [ux_html].
   For Flatsome shortcodes, use font_size="" attribute instead.
   ═══════════════════════════════════════════════════════════ */

/* Body text scale (+20% from standard — CEO feedback) */
.xm-text-xs   { font-size: 0.9rem; line-height: 1.5; }      /* ~14px — meta, timestamps */
.xm-text-sm   { font-size: 1.05rem; line-height: 1.5; }     /* ~17px — captions, small body */
.xm-text      { font-size: 1.2rem; line-height: 1.6; }      /* ~19px — default body */
.xm-text-lg   { font-size: 1.35rem; line-height: 1.6; }     /* ~22px — large body, lead */
.xm-text-xl   { font-size: 1.5rem; line-height: 1.5; }      /* ~24px — intro paragraphs */

/* Heading scale */
.xm-heading-sm  { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }   /* 20px — card titles */
.xm-heading     { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }    /* 24px — section heading */
.xm-heading-lg  { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }  /* 30px — page section */
.xm-heading-xl  { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }   /* 36px — page title */
.xm-heading-2xl { font-size: 3rem; font-weight: 700; line-height: 1.1; }      /* 48px — hero */

/* Subtitle / eyebrow */
.xm-subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.5;
  color: var(--xm-secondary);
}

/* All typography inherits font family */
[class^="xm-text"], [class^="xm-heading"], .xm-subtitle {
  font-family: var(--xm-font);
  color: var(--xm-text);
}

/* Color modifiers */
.xm-text-primary { color: var(--xm-primary); }
.xm-text-secondary { color: var(--xm-secondary); }
.xm-text-muted { color: var(--xm-text-muted); }
.xm-text-white { color: #ffffff; }

/* Weight modifiers */
.xm-font-normal { font-weight: 400; }
.xm-font-medium { font-weight: 500; }
.xm-font-bold { font-weight: 700; }


/* ═══════════════════════════════════════════════════════════
   3. UTILITY CLASSES — xm-* namespace

   For use inside [ux_html] blocks in Tier 2/3 components.
   Flatsome shortcodes handle their own styling — don't apply
   these to Flatsome elements.
   ═══════════════════════════════════════════════════════════ */

/* Text utilities */
.xm-label {
  font-family: var(--xm-font);
  font-size: 10px;
  color: var(--xm-text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

.xm-label--primary { color: var(--xm-primary); }
.xm-label--secondary { color: var(--xm-secondary); }
.xm-label--success { color: var(--xm-success); }
.xm-label--alert { color: var(--xm-alert); }
.xm-label--danger { color: var(--xm-danger); }

.xm-heading {
  font-family: var(--xm-font);
  font-weight: 700;
  color: var(--xm-primary);
  margin: 0;
}

.xm-body {
  font-family: var(--xm-font);
  color: var(--xm-text);
  line-height: 1.6;
}

.xm-muted {
  color: var(--xm-text-muted);
}


/* ═══════════════════════════════════════════════════════════
   3. TIER 2/3 COMPONENT CLASSES — Frosted Glass Industrial

   Futuristic industrial components with frosted glass surfaces,
   8px radius, and subtle glows. Works on both light and dark
   backgrounds via backdrop-filter. Brand-tinted variants available.
   ═══════════════════════════════════════════════════════════ */

/* ── Panel Card ─────────────────────────────────────────── */

.xm-panel {
  background: rgba(0, 57, 82, 0.04);
  backdrop-filter: blur(var(--xm-glass-blur));
  -webkit-backdrop-filter: blur(var(--xm-glass-blur));
  border: 1px solid rgba(0, 57, 82, 0.12);
  border-radius: var(--xm-radius);
  box-shadow: 0 8px 32px rgba(0, 57, 82, 0.06);
  overflow: hidden;
}

.xm-panel__header {
  background: rgba(0, 57, 82, 0.06);
  border-bottom: 1px solid rgba(0, 57, 82, 0.08);
  padding: 10px var(--xm-space-md);
  display: flex;
  align-items: center;
  gap: var(--xm-space-sm);
}

.xm-panel__title {
  font-family: var(--xm-font);
  font-size: 11px;
  color: var(--xm-text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  flex: 1;
}

.xm-panel__status {
  font-family: var(--xm-font);
  font-size: 11px;
  font-weight: 600;
}

.xm-panel__status--online { color: var(--xm-success); }
.xm-panel__status--active { color: var(--xm-secondary); }
.xm-panel__status--alert { color: var(--xm-alert); }
.xm-panel__status--danger { color: var(--xm-danger); }

.xm-panel__body {
  padding: var(--xm-space-lg);
}

/* Panel — brand-tinted glass variants */
.xm-panel--primary {
  background: rgba(0, 57, 82, 0.06);
  border-color: rgba(0, 57, 82, 0.15);
}
.xm-panel--secondary {
  background: rgba(0, 159, 222, 0.06);
  border-color: rgba(0, 159, 222, 0.15);
}
.xm-panel--success {
  background: rgba(0, 166, 152, 0.06);
  border-color: rgba(0, 166, 152, 0.15);
}

/* Panel — dark context (inside Flatsome dark="true" sections) */
.dark .xm-panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .xm-panel__header {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .xm-panel__title { color: rgba(255, 255, 255, 0.5); }
.dark .xm-panel__body p,
.dark .xm-panel__body .xm-body { color: rgba(255, 255, 255, 0.8); }


/* ── Metric Card ────────────────────────────────────────── */

.xm-metric {
  background: rgba(0, 57, 82, 0.04);
  backdrop-filter: blur(var(--xm-glass-blur));
  -webkit-backdrop-filter: blur(var(--xm-glass-blur));
  border: 1px solid rgba(0, 57, 82, 0.12);
  border-radius: var(--xm-radius);
  box-shadow: 0 8px 32px rgba(0, 57, 82, 0.06);
  padding: var(--xm-space-lg);
  text-align: center;
}

.xm-metric--accent-primary { border-top: 3px solid var(--xm-primary); }
.xm-metric--accent-secondary { border-top: 3px solid var(--xm-secondary); }
.xm-metric--accent-success { border-top: 3px solid var(--xm-success); }
.xm-metric--accent-alert { border-top: 3px solid var(--xm-alert); }

.xm-metric__label {
  font-family: var(--xm-font);
  font-size: 11px;
  color: var(--xm-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 var(--xm-space-xs) 0;
}

.xm-metric__value {
  font-family: var(--xm-font);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.xm-metric__value--primary { color: var(--xm-primary); }
.xm-metric__value--secondary { color: var(--xm-secondary); }
.xm-metric__value--success { color: var(--xm-success); }
.xm-metric__value--alert { color: var(--xm-alert); }

.xm-metric__suffix {
  font-size: 18px;
  color: var(--xm-text-muted);
}

.xm-metric__sublabel {
  font-family: var(--xm-font);
  font-size: 11px;
  color: var(--xm-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: var(--xm-space-sm) 0 0 0;
}

/* Metric — dark context */
.dark .xm-metric {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.dark .xm-metric__label,
.dark .xm-metric__sublabel { color: rgba(255, 255, 255, 0.5); }


/* ── Highlight Card ─────────────────────────────────────── */

.xm-highlight {
  border: 1px solid var(--xm-glass-border);
  border-radius: var(--xm-radius);
  padding: var(--xm-space-lg);
  backdrop-filter: blur(var(--xm-glass-blur));
  -webkit-backdrop-filter: blur(var(--xm-glass-blur));
}

.xm-highlight--info {
  border-color: rgba(0, 159, 222, 0.3);
  background: rgba(0, 159, 222, 0.06);
}
.xm-highlight--warning {
  border-color: rgba(236, 134, 41, 0.3);
  background: rgba(236, 134, 41, 0.06);
}
.xm-highlight--success {
  border-color: rgba(0, 166, 152, 0.3);
  background: rgba(0, 166, 152, 0.06);
}
.xm-highlight--danger {
  border-color: rgba(204, 51, 51, 0.3);
  background: rgba(204, 51, 51, 0.06);
}

.xm-highlight__title {
  font-family: var(--xm-font);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--xm-space-sm) 0;
}

.xm-highlight--info .xm-highlight__title { color: var(--xm-secondary); }
.xm-highlight--warning .xm-highlight__title { color: var(--xm-alert); }
.xm-highlight--success .xm-highlight__title { color: var(--xm-success); }
.xm-highlight--danger .xm-highlight__title { color: var(--xm-danger); }


/* ── Status Dot ─────────────────────────────────────────── */

.xm-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.xm-dot--online {
  background: var(--xm-success);
  box-shadow: 0 0 8px rgba(0, 166, 152, 0.5);
}
.xm-dot--active {
  background: var(--xm-secondary);
  box-shadow: 0 0 8px rgba(0, 159, 222, 0.5);
}
.xm-dot--warning {
  background: var(--xm-alert);
  box-shadow: 0 0 8px rgba(236, 134, 41, 0.5);
}
.xm-dot--danger {
  background: var(--xm-danger);
  box-shadow: 0 0 8px rgba(204, 51, 51, 0.5);
}
.xm-dot--offline { background: var(--xm-text-muted); }


/* ── Section Header (accent bar) ────────────────────────── */

.xm-section-header {
  display: flex;
  align-items: center;
  gap: var(--xm-space-sm);
  margin-bottom: 12px;
}

.xm-section-header__bar {
  width: 4px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
}

.xm-section-header__bar--primary { background: var(--xm-primary); }
.xm-section-header__bar--secondary { background: var(--xm-secondary); }
.xm-section-header__bar--success { background: var(--xm-success); }
.xm-section-header__bar--alert { background: var(--xm-alert); }


/* ── Data Row ───────────────────────────────────────────── */

.xm-row {
  display: flex;
  align-items: center;
  gap: var(--xm-space-md);
  padding: 14px var(--xm-space-md);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.2s ease;
}

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

.xm-row:hover { background: rgba(0, 159, 222, 0.04); }

.xm-row__label {
  font-family: var(--xm-font);
  font-size: 11px;
  color: var(--xm-text-muted);
  width: 56px;
  flex-shrink: 0;
  font-weight: 600;
}

.xm-row__content { flex: 1; }

.xm-row__action {
  font-family: var(--xm-font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* Row — dark context */
.dark .xm-row { border-color: rgba(255, 255, 255, 0.08); }
.dark .xm-row:hover { background: rgba(255, 255, 255, 0.04); }


/* ── Dark Panel (for dashboards/interactive islands) ────── */

.xm-dark-panel {
  background: var(--xm-surface-panel);
  color: var(--xm-white);
  font-family: var(--xm-font);
  padding: var(--xm-space-lg);
  border-radius: var(--xm-radius);
}

.xm-dark-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

@media (max-width: 768px) {
  .xm-dark-panel__grid { grid-template-columns: repeat(2, 1fr); }
}

.xm-dark-panel__tile {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--xm-radius);
  padding: 15px;
}

.xm-dark-panel__tile-label {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.xm-dark-panel__tile-value {
  font-size: 32px;
  font-weight: 700;
  margin-top: 5px;
}

.xm-dark-panel__nav {
  display: flex;
  gap: 10px;
  margin-bottom: var(--xm-space-lg);
  flex-wrap: wrap;
}

.xm-dark-panel__nav-btn {
  padding: var(--xm-space-sm) 18px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  border-radius: var(--xm-radius);
  cursor: pointer;
  font-family: var(--xm-font);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.xm-dark-panel__nav-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
}

.xm-dark-panel__nav-btn--active {
  background: rgba(0, 159, 222, 0.2);
  border-color: var(--xm-secondary);
  color: var(--xm-white);
}


/* ── Alert Row ────────────────────────────────────────────── */

.xm-alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--xm-space-md);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.xm-alert-row--critical { border-left: 3px solid var(--xm-danger); }
.xm-alert-row--warning { border-left: 3px solid var(--xm-alert); }
.xm-alert-row--info { border-left: 3px solid var(--xm-secondary); }

/* ── Marketing-Scale Modifier (.xm-lg) ────────────────────
   Wrap a parent container with .xm-lg to scale up xm-*
   components for marketing pages. Dashboard defaults unchanged.
   ────────────────────────────────────────────────────────── */

.xm-lg .xm-panel__title { font-size: 13px; letter-spacing: 2.5px; }
.xm-lg .xm-panel__body { padding: 28px; }
.xm-lg .xm-panel__body p,
.xm-lg .xm-panel__body .xm-body { font-size: 1.2rem; line-height: 1.6; }
.xm-lg .xm-metric__label { font-size: 12px; letter-spacing: 2px; }
.xm-lg .xm-metric__sublabel { font-size: 12px; }
.xm-lg .xm-row { padding: 18px 20px; }
.xm-lg .xm-row__label { font-size: 13px; width: 72px; }
.xm-lg .xm-row__content p:first-child { font-size: 1.05rem; }
.xm-lg .xm-row__content p:last-child { font-size: 0.95rem; }
.xm-lg .xm-row__action { font-size: 12px; }
.xm-lg .xm-dot { width: 10px; height: 10px; }
.xm-lg .xm-lb-item__title { font-size: 1.1rem; }
.xm-lg .xm-lb-item__desc { font-size: 1rem; }


/* ═══════════════════════════════════════════════════════════
   4. PAGE-LEVEL COMPONENTS — xm-* namespace

   For building full marketing pages inside [ux_html].
   Buttons, grids, ticker, stats, comparison lists, etc.
   All use CSS custom properties for theming consistency.
   ═══════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────── */

.xm-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--xm-radius, 8px);
  font-family: var(--xm-font, 'Jost', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}

.xm-btn--primary {
  background: var(--xm-secondary, #009fde);
  color: #fff !important;
  border: 2px solid var(--xm-secondary, #009fde);
}
.xm-btn--primary:hover {
  background: #0089c2;
  border-color: #0089c2;
}

.xm-btn--outline {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.6);
}
.xm-btn--outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.xm-btn--outline-dark {
  background: transparent;
  color: var(--xm-primary, #003952) !important;
  border: 2px solid rgba(0,57,82,0.25);
}
.xm-btn--outline-dark:hover {
  background: rgba(0,57,82,0.06);
  border-color: rgba(0,57,82,0.4);
}


/* ── Responsive Grids ─────────────────────────────────────── */

.xm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.xm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.xm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 900px) {
  .xm-grid-3 { grid-template-columns: 1fr; }
  .xm-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .xm-grid-2 { grid-template-columns: 1fr; }
  .xm-grid-4 { grid-template-columns: 1fr; }
}


/* ── Operational Ticker ───────────────────────────────────── */

@keyframes xm-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.xm-ticker {
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--xm-font, 'Jost', sans-serif);
  background: rgba(0,57,82,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,159,222,0.2);
  padding: 8px 0;
}
.xm-ticker__track {
  display: inline-flex;
  gap: 48px;
  animation: xm-ticker-scroll 50s linear infinite;
}
.xm-ticker:hover .xm-ticker__track {
  animation-play-state: paused;
}
.xm-ticker__item {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.xm-ticker__item strong {
  color: rgba(255,255,255,0.75);
}


/* ── Pulsing Status Dot ───────────────────────────────────── */

.xm-dot--pulse { animation: xm-pulse 2s ease-in-out infinite; }
@keyframes xm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* ── Eyebrow with accent bar ──────────────────────────────── */

.xm-subtitle--bar::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--xm-secondary, #009fde);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: middle;
}


/* ── Comparison Check List ────────────────────────────────── */

.xm-check-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,57,82,0.06);
  font-family: var(--xm-font, 'Jost', sans-serif);
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--xm-text, #3a3a3a);
}
.xm-check-item:last-child { border-bottom: none; }
.xm-check-x { color: var(--xm-danger, #cc3333); font-weight: 700; margin-right: 12px; }
.xm-check-ok { color: var(--xm-success, #00a698); font-weight: 700; margin-right: 12px; }


/* ── HAS Scale Row ────────────────────────────────────────── */

.xm-has-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,57,82,0.08);
  transition: background 0.2s ease;
  font-family: var(--xm-font, 'Jost', sans-serif);
}
.xm-has-row:last-child { border-bottom: none; }
.xm-has-row:hover { background: rgba(0,159,222,0.04); }

.xm-has-row__level {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--xm-text-muted, #919191);
  width: 68px;
  flex-shrink: 0;
  letter-spacing: 1px;
}
.xm-has-row__content { flex: 1; }
.xm-has-row__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--xm-primary, #003952);
  margin: 0;
}
.xm-has-row__desc {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--xm-text-muted, #919191);
  margin: 4px 0 0;
}
.xm-has-row__tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* HAS row — dark context */
.dark .xm-has-row,
.xm-bg-dark .xm-has-row { border-color: rgba(255,255,255,0.1); }
.dark .xm-has-row:hover,
.xm-bg-dark .xm-has-row:hover { background: rgba(255,255,255,0.04); }
.dark .xm-has-row__title,
.xm-bg-dark .xm-has-row__title { color: #fff; }
.dark .xm-has-row__level,
.xm-bg-dark .xm-has-row__level { color: rgba(255,255,255,0.4); }
.dark .xm-has-row__desc,
.xm-bg-dark .xm-has-row__desc { color: rgba(255,255,255,0.45); }


/* ── Stat Display ─────────────────────────────────────────── */

.xm-stat { text-align: center; font-family: var(--xm-font, 'Jost', sans-serif); }
.xm-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--xm-text-muted, #919191);
  margin: 0 0 4px;
}
.xm-stat__value {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--xm-secondary, #009fde);
  margin: 0;
}
.xm-stat__sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--xm-text-muted, #919191);
  margin: 6px 0 0;
}


/* ── Video Wrapper ────────────────────────────────────────── */

.xm-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: var(--xm-radius, 8px);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,57,82,0.15);
}
.xm-video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}


/* ── Divider ──────────────────────────────────────────────── */

.xm-divider {
  height: 1px;
  background: rgba(0,57,82,0.08);
  margin: 0;
  border: none;
}
.dark .xm-divider,
.xm-bg-dark .xm-divider { background: rgba(255,255,255,0.1); }


/* ── Background Utilities ─────────────────────────────────── */

.xm-bg-light { background: #f5f5f5; }
.xm-bg-industrial { background: var(--xm-surface, #F0F0F0); }
.xm-bg-dark {
  background: var(--xm-primary, #003952);
  color: #fff;
}
.xm-bg-dark .xm-subtitle { color: var(--xm-secondary, #009fde); }


/* ── Container ────────────────────────────────────────────── */

.xm-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--xm-font, 'Jost', sans-serif);
}
.xm-container--wide { max-width: 1200px; }


/* ── Section Spacing ──────────────────────────────────────── */

.xm-page-section { padding: 100px 0; }
.xm-page-section--sm { padding: 60px 0; }

@media (max-width: 768px) {
  .xm-page-section { padding: 60px 0; }
  .xm-page-section--sm { padding: 40px 0; }
}