/* ============================================================
   utm.css — Dark theme only
   For Tangent Networks UTM landing page
   ============================================================ */

/* --------------------------------------------
   RESET & BASE STYLES
--------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background-color: #0b0f1a;
  color: #d1d5db;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------
   UTILITY CLASSES (extracted from your HTML)
--------------------------------------------- */

/* Display */
.hidden { display: none !important; }
.block { display: block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* Grid */
.grid { display: grid !important; }

/* Gap */
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }

/* Spacing (margin/padding) */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-2\.5 { padding: 0.625rem !important; }

/* Sizing */
.w-5 { width: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.w-auto { width: auto !important; }
.h-5 { height: 1.25rem !important; }
.h-6 { height: 1.5rem !important; }
.h-16 { height: 4rem !important; }
.max-w-screen-xl { max-width: 1280px !important; }
.max-w-xs { max-width: 20rem !important; }

/* Typography */
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.text-center { text-align: center !important; }

/* Colors (dark theme only) */
.text-blue-400 { color: #60a5fa !important; }
.text-gray-300 { color: #d1d5db !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-white { color: #ffffff !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; }
.bg-gray-800 { background-color: #1f2937 !important; }
.bg-gray-900 { background-color: #111827 !important; }
.bg-white { background-color: #1f2937 !important; }  /* cards become dark */

/* Borders */
.border { border-width: 1px !important; border-style: solid !important; }
.border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.border-gray-200 { border-color: #374151 !important; }
.border-gray-700 { border-color: #374151 !important; }
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* Positioning */
.sticky { position: sticky !important; }
.fixed { position: fixed !important; }
.top-0 { top: 0 !important; }
.bottom-4 { bottom: 1rem !important; }
.bottom-5 { bottom: 1.25rem !important; }
.right-5 { right: 1.25rem !important; }
.left-4 { left: 1rem !important; }
.z-10 { z-index: 10 !important; }
.z-50 { z-index: 50 !important; }

/* Transitions & Opacity */
.transition-colors { transition-property: background-color, border-color, color !important; transition-duration: 150ms !important; }
.transition-all { transition-property: all !important; transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-100 { opacity: 1 !important; }
.invisible { visibility: hidden !important; }
.visible { visibility: visible !important; }

/* Hover states */
.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
.hover\:bg-blue-800:hover { background-color: #1e40af !important; }
.hover\:bg-gray-800:hover { background-color: #1f2937 !important; }
.hover\:text-blue-400:hover { color: #60a5fa !important; }
.hover\:underline:hover { text-decoration: underline !important; }

/* Focus */
.focus\:ring-2:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(59,130,246,0.5) !important; }
.focus\:ring-4:focus { outline: none !important; box-shadow: 0 0 0 4px rgba(59,130,246,0.3) !important; }
.focus\:ring-blue-300:focus { box-shadow: 0 0 0 4px rgba(96,165,250,0.5) !important; }
.focus\:outline-none:focus { outline: none !important; }

/* Responsive: md: (768px and up) */
@media (min-width: 768px) {
  .md\:flex { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:inline-flex { display: inline-flex !important; }
  .md\:items-center { align-items: center !important; }
  .md\:justify-between { justify-content: space-between !important; }
  .md\:mt-0 { margin-top: 0 !important; }
  .md\:space-x-6 > * + * { margin-left: 1.5rem !important; }
  .md\:space-x-8 > * + * { margin-left: 2rem !important; }
}

/* Responsive: sm: (640px and up) */
@media (min-width: 640px) {
  .sm\:text-center { text-align: center !important; }
}

a.rounded-lg,
a.rounded-md,
a.rounded-full,
a.utm-btn-primary,
a.utm-btn-ghost,
a.cta-button,
a.cta-button-white,
a.product-link {
  text-decoration: none !important;
}

/* --------------------------------------------
   UTM DESIGN TOKENS (dark theme only)
--------------------------------------------- */
/* FORCE DARK MODE — ignore system preference */
:root {
  color-scheme: dark;
  --ink: #0b0f1a;
  --ink-mid: #111827;
  --ink-light: #1f2937;
  --ink-border: #374151;
  --slate: #9ca3af;
  --slate-dim: #6b7280;
  --white: #f9fafb;
  --white-dim: #d1d5db;
  --blue: #2563eb;
  --blue-light: #3b82f6;
  --blue-dark: #1d4ed8;
  --blue-glow: #2563eb26;
  --green: #10b981;
  --green-dim: #10b9811f;
  --red: #ef4444;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
}

html, body {
  background-color: #000000 !important; /* Force black */
  color: #ffffff !important;            /* Force white text */
}

/* Light mode — complete override for ALL elements */

html {
  color-scheme: dark !important;
  background-color: #0b0f1a !important;
}


/* --------------------------------------------
   CTA & FOOTER SPACING FIX
--------------------------------------------- */
.utm-cta {
  margin-bottom: 0;
  padding-bottom: 5rem;
}

.utm-footer {
  margin-top: 0;
}

/* --------------------------------------------
   BADGES (solid backgrounds, white text)
--------------------------------------------- */
.utm-badge {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  margin-left: auto;
  font-weight: 500;
  color: #ffffff !important;
}

.utm-badge-blue {
  background: #2563eb !important;
  border: none !important;
}

.utm-badge-green {
  background: #10b981 !important;
  border: none !important;
}

.utm-badge-gray {
  background: #4b5563 !important;
  border: none !important;
}

.utm-badge-violet {
  background: #8b5cf6 !important;
  border: none !important;
}

.utm-badge-blue:hover { background: #1d4ed8 !important; }
.utm-badge-green:hover { background: #059669 !important; }
.utm-badge-gray:hover { background: #374151 !important; }
.utm-badge-violet:hover { background: #7c3aed !important; }

/* --------------------------------------------
   CAROUSEL DOTS
--------------------------------------------- */
.utm-carousel-dot.active {
  background: var(--blue) !important;
  transform: scale(1.3);
}

/* --------------------------------------------
   TICKER ANIMATION
--------------------------------------------- */
@keyframes utmTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.utm-ticker-track {
  display: inline-block;
  animation: utmTicker 35s linear infinite;
}

.utm-ticker-track:hover {
  animation-play-state: paused;
}

/* --------------------------------------------
   FADE-UP ANIMATIONS
--------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: none;
}

.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }

/* --------------------------------------------
   UTM COMPONENTS
--------------------------------------------- */

/*  DESIGN TOKENS ── */
:root {
  --ink:        #0b0f1a;
  --ink-mid:    #111827;
  --ink-light:  #1f2937;
  --ink-border: #374151;
  --slate:      #9ca3af;
  --slate-dim:  #6b7280;
  --white:      #f9fafb;
  --white-dim:  #d1d5db;
  --blue:       #2563eb;
  --blue-light: #3b82f6;
  --blue-dark:  #1d4ed8;
  --blue-glow:  #2563eb26;
  --green:      #10b981;
  --green-dim:  #10b9811f;
  --red:        #ef4444;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
  --font-body:    'IBM Plex Sans', 'Inter', system-ui, sans-serif;
}
/*  LIGHT MODE TOKEN OVERRIDES ─────────────────────────────────────────
   The UTM design uses a named token system (--ink, --white etc) that
   defaults to dark values. This block remaps every token for light mode
   so ALL sections, cards, text and borders automatically adapt.
   Blue/green/red accent colours are unchanged — they work on both.      */
/* --------------------------------------------
   NAVBAR STYLES (Dark mode only)
--------------------------------------------- */

/* Remove all underlines from ALL nav links */
nav a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Active page indicator */
nav a[aria-current="page"] {
  border-bottom: 2px solid #60a5fa !important;
  padding-bottom: 2px;
  font-weight: 600 !important;
  color: #60a5fa !important;
}

/* Inactive links */
nav a:not([aria-current="page"]) {
  border-bottom: none !important;
  font-weight: 400;
  color: #9ca3af;
}

/* Inactive hover state */
nav a:not([aria-current="page"]):hover {
  color: #60a5fa;
}

/* Navbar background */
.utm-nav-bg {
  background: #0b0f1af2;
  backdrop-filter: blur(12px);
}


/*  BOX SIZING RESET (UTM components only) ── */
.utm-hero, .utm-hero *,
.utm-diag, .utm-diag *,
.utm-posture-grid, .utm-posture-cell,
.utm-layer-cards, .utm-layer-card, .utm-layer-left, .utm-layer-right,
.utm-arch-grid, .utm-arch-card,
.utm-priv-diagram, .utm-priv-side, .utm-priv-middle,
.utm-compare-table, .utm-carousel, .utm-lightbox {
  box-sizing: border-box;
}

/*  TYPOGRAPHY HELPERS ── */
.utm-display {
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.utm-display-xl { font-size: clamp(2.6rem, 5.5vw, 4.8rem); }
.utm-display-lg { font-size: clamp(1.8rem, 3.5vw, 3rem); }

.utm-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #67e8f9;
  display: block;
}
.utm-mono { font-family: var(--font-mono); font-size: 0.85em; }

/*  SCROLL ANIMATIONS ── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: none; }
.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }

/*  TEXTURE BACKGROUND ── */
.utm-texture { position: relative; }
.utm-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, #2563eb0a 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, #10b9810a 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C%2Fg%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.utm-texture > * { position: relative; z-index: 1; }

/*  HERO ── */
.utm-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 0 3rem;
  background: var(--ink);
}
.utm-hero::after {
  content: '';
  position: absolute;
  top: -10%; right: -5%;
  width: 55%; height: 120%;
  background: linear-gradient(135deg,
    transparent 0%, transparent 48%,
    #2563eb0a 48%, #2563eb0a 52%,
    transparent 52%
  );
  pointer-events: none;
}
.utm-hero-circuit {
  position: absolute;
  top: 0; right: 0;
  width: 480px; height: 100%;
  opacity: 0.14;
  pointer-events: none;
}
.utm-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.utm-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.utm-hero-eyebrow-line {
  width: 32px; height: 1px;
  background: var(--blue);
  flex-shrink: 0;
}
.utm-hero-title { margin-bottom: 1.5rem; }
.utm-hero-title em { font-style: normal; color: var(--blue-light); }
.utm-hero-subtitle {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--white-dim);
  max-width: 460px;
  margin-bottom: 2.5rem;
  line-height: 1.8;
  font-family: var(--font-body);
}
.utm-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.utm-hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.utm-hero-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.utm-hero-stat-val {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.utm-hero-stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

/*  BUTTONS ── */
.utm-btn-primary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
  text-decoration: none;
}
.utm-btn-primary:hover {
  background: var(--blue-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.utm-btn-ghost {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  background: transparent;
  color: var(--white-dim);
  border: 1px solid var(--ink-border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
  text-decoration: none;
}
.utm-btn-ghost:hover {
  border-color: var(--blue-light);
  color: var(--white);
  text-decoration: none;
}

/*  HERO DIAGRAM ── */
.utm-diag {
  background: var(--ink-light);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}
.utm-diag::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, transparent 100%);
}
.utm-diag-title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b4a3e3;
  margin-bottom: 1.25rem;
}
.utm-diag-layer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.utm-diag-layer:hover { border-color: var(--ink-border); }
.utm-diag-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.75rem;
}
.utm-diag-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--white);
  display: block;
}
.utm-diag-desc { font-size: 0.68rem; color: var(--slate); display: block; }
.utm-diag-arrow {
  text-align: center;
  color: var(--ink-border);
  font-size: 0.85rem;
  margin: 0.05rem 0;
  padding-left: 46px;
}

  /* Hero diagram text */
  .utm-diag-title {
    color: #c1d3ec !important;
  }

  .utm-diag-name {
    color: #c1d3ec !important;
  }

  .utm-diag-desc {
    color: #acf0e6 !important;
  }

  .utm-label {
    color: #00f4f4 !important;
  }

/*  BADGES ── */
.utm-badge {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  margin-left: auto;
  font-weight: 500;
  color: #ffffff !important;
}
.utm-badge-blue {
  background: #082e83 !important;
  border: none !important;
}
.utm-badge-green {
  background: #075a3f !important;
  border: none !important;
}
.utm-badge-gray {
  background: #4b5563 !important;
  border: none !important;
}
.utm-badge-violet {
  background: #8b5cf6 !important;
  border: none !important;
}
.utm-badge-blue:hover { background: #1d4ed8 !important; }
.utm-badge-green:hover { background: #059669 !important; }
.utm-badge-gray:hover { background: #374151 !important; }
.utm-badge-violet:hover { background: #7c3aed !important; }

/*  TICKER ── */
.utm-ticker-wrap {
  background: var(--ink-mid);
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
  padding: 0.6rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.utm-ticker-track {
  display: inline-block;
  animation: utmTicker 35s linear infinite;
}
.utm-ticker-track:hover { animation-play-state: paused; }
.utm-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--slate);
  padding: 0 2.5rem;
}
.utm-ticker-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue-light);
  flex-shrink: 0;
}
@keyframes utmTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/*  SECTIONS ── */
.utm-section      { padding: 5rem 0; }
.utm-section-dark { background: var(--ink-mid); }
.utm-container    { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }

/*  SECURITY POSTURE GRID ── */
.utm-posture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--ink-border);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 3rem;
}
.utm-posture-cell {
  background: var(--ink-mid);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: background 0.25s;
}
.utm-posture-cell:hover { background: var(--ink-light); }
.utm-posture-cell::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: transparent;
  transition: background 0.25s;
}
.utm-posture-cell:hover::after { background: var(--blue); }
.utm-posture-num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--ink-border);
  line-height: 1;
  margin-bottom: 1rem;
  user-select: none;
  transition: color 0.25s;
}
.utm-posture-cell:hover .utm-posture-num { color: var(--ink-light); }
.utm-posture-heading {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.utm-posture-body {
  font-size: 0.86rem;
  color: var(--white-dim);
  line-height: 1.7;
  font-family: var(--font-body);
}

/*  LAYER CARDS ── */
.utm-layers-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3rem;
}
.utm-layer-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-border);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  overflow: hidden;
}
.utm-layer-card {
  background: var(--ink);
  display: grid;
  grid-template-columns: 190px 1fr;
}
.utm-layer-left {
  background: var(--ink-mid);
  padding: 2rem;
  border-right: 1px solid var(--ink-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.utm-layer-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.utm-layer-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.utm-layer-right { padding: 2rem 2.25rem; }
.utm-layer-desc {
  font-size: 0.9rem;
  color: var(--white-dim);
  margin-bottom: 1.25rem;
  line-height: 1.75;
  font-family: var(--font-body);
}
.utm-feature-list {
  list-style: disc;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}
.utm-feature-list li {
  font-size: 0.84rem;
  color: var(--white-dim);
  line-height: 1.65;
  padding-left: 0.25rem;
  font-family: var(--font-body);
}
.utm-feature-list li::marker { color: var(--blue-light); }
.utm-feature-list li strong  { color: var(--white); font-weight: 500; }

/* Layer accent colours */
.utm-layer-pf    .utm-layer-left { border-top: 3px solid var(--blue); }
.utm-layer-e2g   .utm-layer-left { border-top: 3px solid var(--green); }
.utm-layer-dns   .utm-layer-left { border-top: 3px solid #7c9ef0; }
.utm-layer-admin .utm-layer-left { border-top: 3px solid #a78bfa; }

/*  ARCH CARDS ── */
.utm-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
.utm-arch-card {
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.utm-arch-accent {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
}
.utm-arch-card h3 {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}
.utm-arch-card p {
  font-size: 0.86rem;
  color: var(--white-dim);
  line-height: 1.75;
  font-family: var(--font-body);
}
.utm-arch-card ul {
  list-style: none;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.utm-arch-card ul li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--slate);
  padding-left: 1.2rem;
  position: relative;
}
.utm-arch-card ul li::before {
  content: '//';
  position: absolute;
  left: 0;
  color: var(--ink-border);
  font-size: 0.68rem;
}

/*  CALLOUT ── */
.utm-callout {
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-left: 4px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: 2rem 2.5rem;
  margin: 3rem 0;
}
.utm-callout-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.utm-callout-attr {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/*  CAROUSEL ── */
.utm-carousel {
  position: relative;
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
}
.utm-slides {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.utm-slide {
  min-width: 100%;
  position: relative;
  cursor: pointer;
}
.utm-slide img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 520px;
  object-fit: cover;
  object-position: top left;
}
.utm-slide-caption {
  padding: 1rem 1.5rem;
  background: var(--ink-mid);
  border-top: 1px solid var(--ink-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.utm-slide-caption h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 0.2rem;
}
.utm-slide-caption p {
  font-size: 0.82rem;
  color: var(--white-dim);
  font-family: var(--font-body);
}
.utm-slide-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--slate-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.utm-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #111827d9;
  border: 1px solid var(--ink-border);
  color: var(--white-dim);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  z-index: 10;
  user-select: none;
}
.utm-carousel-btn:hover { background: var(--blue-dark); border-color: var(--blue); color: #fff; }
.utm-carousel-prev { left: 1rem; }
.utm-carousel-next { right: 1rem; }
.utm-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  padding: 0 1rem;
}
.utm-carousel-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-border);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none;
  padding: 0;
}
.utm-carousel-dot.active { background: var(--blue); transform: scale(1.3); }
.utm-carousel-dot:hover  { background: var(--blue-light); }

/*  LIGHTBOX ── */
.utm-lightbox {
  position: fixed;
  inset: 0;
  background: #0b0f1af5;
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: pointer;
}
.utm-lightbox.active { opacity: 1; visibility: visible; }
.utm-lightbox-inner {
  max-width: 92vw;
  max-height: 92vh;
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: default;
  display: flex;
  flex-direction: column;
}
.utm-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
.utm-lightbox-caption {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--ink-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.utm-lightbox-caption h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--blue-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.utm-lightbox-caption p {
  font-size: 0.8rem;
  color: var(--white-dim);
  font-family: var(--font-body);
}
.utm-lightbox-close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--slate);
  font-size: 1.1rem;
  transition: all 0.2s;
  z-index: 2;
}
.utm-lightbox-close:hover { border-color: var(--blue); color: var(--blue-light); }
.utm-lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 0.75rem;
  pointer-events: none;
}
.utm-lightbox-nav button {
  pointer-events: all;
  background: #111827e6;
  border: 1px solid var(--ink-border);
  color: var(--white-dim);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s, border-color 0.2s;
}
.utm-lightbox-nav button:hover { background: var(--blue-dark); border-color: var(--blue); color: #fff; }

/*  PRIVILEGE MODEL ── */
.utm-priv-diagram {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: stretch;
}
.utm-priv-side {
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  padding: 2rem;
}
.utm-priv-side h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink-border);
}
.utm-priv-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.utm-priv-icon {
  width: 32px; height: 32px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.utm-priv-name { font-family: var(--font-mono); font-size: 0.76rem; color: var(--white); display: block; }
.utm-priv-desc { font-size: 0.76rem; color: var(--slate); display: block; font-family: var(--font-body); }
.utm-priv-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
}
.utm-priv-boundary {
  width: 2px; flex: 1;
  background: repeating-linear-gradient(
    to bottom, var(--blue) 0px, var(--blue) 5px, transparent 5px, transparent 11px
  );
}
.utm-priv-boundary-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 0.5rem 0;
}
.utm-priv-code {
  margin-top: 1.25rem;
  padding: 0.9rem;
  background: #2563eb0a;
  border: 1px solid #2563eb26;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #cbd5e6;
  line-height: 1.8;
}
.utm-priv-code-root {
  background: #10b9810a;
  border-color: #10b98126;
}

/*  COMPARISON TABLE ── */
.utm-compare-table {
  margin-top: 3rem;
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  overflow: hidden;
}
.utm-compare-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: var(--ink-light);
  border-bottom: 1px solid var(--ink-border);
}
.utm-compare-header-cell {
  padding: 0.85rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d7ddeb;
}
.utm-compare-header-cell.ours { color: #a9ddcc; }
.utm-compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-bottom: 1px solid var(--ink-border);
  transition: background 0.15s;
}
.utm-compare-row:last-child { border-bottom: none; }
.utm-compare-row:hover { background: var(--ink-mid); }
.utm-compare-cell {
  padding: 0.85rem 1.25rem;
  font-size: 0.84rem;
  color: var(--white-dim);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-right: 1px solid var(--ink-border);
  font-family: var(--font-body);
}
.utm-compare-cell:last-child { border-right: none; }
.utm-compare-cell.feature { font-family: var(--font-mono); font-size: 0.78rem; }
.utm-check   { color: var(--green); font-size: 1rem; }
.utm-cross   { color: var(--red);   font-size: 1rem; }
.utm-partial { color: #f59e0b;      font-size: 0.8rem; }

/*  CTA SECTION ── */
.utm-cta {
  background: var(--ink-mid);
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.utm-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, #2563eb0f 0%, transparent 70%);
  pointer-events: none;
}
.utm-cta > * { position: relative; }
.utm-cta p {
  font-size: 1rem;
  color: var(--white-dim);
  max-width: 540px;
  margin: 1rem auto 2.5rem;
  line-height: 1.8;
  font-family: var(--font-body);
}
.utm-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/*  RESPONSIVE ── */
@media (max-width: 900px) {
  .utm-hero-grid    { grid-template-columns: 1fr; }
  .utm-diag         { display: none; }
  .utm-posture-grid { grid-template-columns: 1fr; }
  .utm-layer-card   { grid-template-columns: 1fr; }
  .utm-layer-left   { border-right: none; border-bottom: 1px solid var(--ink-border); padding: 1.5rem; }
  .utm-arch-grid    { grid-template-columns: 1fr; }
  .utm-priv-diagram { grid-template-columns: 1fr; }
  .utm-priv-middle  { display: none; }
  .utm-compare-header, .utm-compare-row { grid-template-columns: 1fr 1fr 1fr; }
  .utm-layers-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .utm-carousel-btn  { width: 36px; height: 36px; font-size: 1rem; }
}
@media (max-width: 640px) {
  .utm-container { padding: 0 1rem; }
  .utm-compare-header, .utm-compare-row { grid-template-columns: 1fr; }
  .utm-compare-cell { border-right: none; border-bottom: 1px solid var(--ink-border); }
}

/* ================================================================
   PATCH SECTION — fixes for tn.css deficiencies
   All three root bugs addressed here.
   ================================================================ */

/*  BUG 1: max-w scale broken by --spacing-* token collision ────
   tn.css maps max-w-xs/sm/lg/xl/2xl/3xl to --spacing-* tokens
   which resolve to 0.5rem–4rem instead of the correct 20rem–48rem.
   These !important overrides restore the standard Tailwind scale.  */
.max-w-xs  { max-width: 20rem !important; }   /* 320px  */
.max-w-sm  { max-width: 24rem !important; }   /* 384px  */
.max-w-md  { max-width: 28rem !important; }   /* 448px  */
.max-w-lg  { max-width: 32rem !important; }   /* 512px  */
.max-w-xl  { max-width: 36rem !important; }   /* 576px  */
.max-w-2xl { max-width: 42rem !important; }   /* 672px  */
.max-w-3xl { max-width: 48rem !important; }   /* 768px  */

/*  BUG 2: body-tag hit-testing on index.html ───────────────────
   utm-texture::before is position:absolute inset:0 and creates a
   paint layer that confuses DevTools element picking. Adding
   isolation:isolate creates a proper stacking context so the
   pseudo-element stays fully contained within the section.        */
.utm-texture { isolation: isolate; }
.utm-hero    { isolation: isolate; }

/*  BUG 3: missing utility classes not compiled into tn.css ─────
   tn.css was scanned against fewer files than are actually in the
   project. The following classes appear in about/services/products/
   contact but were absent from tn.css.                            */

/* Spacing & sizing */
.h-14   { height:  calc(0.25rem * 14); }   /* 3.5rem  */
.w-14   { width:   calc(0.25rem * 14); }   /* 3.5rem  */
.ml-1   { margin-left:   calc(0.25rem * 1); }
.mt-0\.5 { margin-top:   calc(0.25rem * 0.5); }

/* Layout */
.resize-none    { resize: none; }
.rounded-t-2xl  { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }

/* Responsive */
.md\:col-span-2 { @media (width >= 48rem) { grid-column: span 2 / span 2; } }
.md\:gap-6      { @media (width >= 48rem) { gap: calc(0.25rem * 6); } }

/* Focus */
.focus\:border-blue-500:focus { border-color: #3b82f6; }
.focus\:ring-opacity-50:focus { --tw-ring-opacity: 0.5; }

/* Border */
.border-white\/20 { border-color: #ffffff33; }

/* Base colors missing from tn.css */
.bg-amber-100   { background-color: #fef3c7; }
.bg-teal-100    { background-color: #ccfbf1; }
.bg-violet-100  { background-color: #ede9fe; }
.bg-emerald-600 { background-color: #059669; }
.bg-indigo-600  { background-color: #4f46e5; }
.bg-teal-600    { background-color: #0d9488; }
.bg-violet-600  { background-color: #7c3aed; }

/* Text colors */
.text-amber-600   { color: #d97706; }
.text-amber-700   { color: #b45309; }
.text-emerald-700 { color: #047857; }
.text-indigo-700  { color: #4338ca; }
.text-teal-600    { color: #0d9488; }
.text-teal-700    { color: #0f766e; }
.text-violet-600  { color: #7c3aed; }
.text-violet-700  { color: #6d28d9; }

/* Hover text colors */
.hover\:text-amber-700:hover   { color: #b45309; }
.hover\:text-emerald-700:hover { color: #047857; }
.hover\:text-indigo-700:hover  { color: #4338ca; }
.hover\:text-teal-700:hover    { color: #0f766e; }
.hover\:text-violet-700:hover  { color: #6d28d9; }

/* Dark mode — background */
.dark\:bg-blue-700 { background-color: #1d4ed8; }
.dark\:bg-gray-950 { background-color: #030712; }
.dark\:bg-amber-900\/40 { background-color: #78350f66; }
.dark\:bg-emerald-900\/40 { background-color: #064e3b66; }
.dark\:bg-indigo-900\/40 { background-color: #312e8166; }
.dark\:bg-teal-900\/40 { background-color: #134e4a66; }
.dark\:bg-violet-900\/40 { background-color: #4c1d9566; }

/* Dark mode — text */
.dark\:text-amber-300 { color: #fcd34d; }
.dark\:text-amber-400 { color: #fbbf24; }
.dark\:text-emerald-300 { color: #6ee7b7; }
.dark\:text-emerald-400 { color: #34d399; }
.dark\:text-indigo-300 { color: #a5b4fc; }
.dark\:text-indigo-400 { color: #818cf8; }
.dark\:text-teal-300 { color: #5eead4; }
.dark\:text-teal-400 { color: #2dd4bf; }
.dark\:text-violet-300 { color: #c4b5fd; }
.dark\:text-violet-400 { color: #a78bfa; }

/* Dark mode — hover text */
.dark\:hover\:text-amber-300:hover { color: #fcd34d; }
.dark\:hover\:text-emerald-300:hover { color: #6ee7b7; }
.dark\:hover\:text-indigo-300:hover { color: #a5b4fc; }
.dark\:hover\:text-teal-300:hover { color: #5eead4; }
.dark\:hover\:text-violet-300:hover { color: #c4b5fd; }

/* Dark mode — border, hover bg, focus */
.dark\:border-blue-900 { border-color: #1e3a8a; }
.dark\:hover\:bg-gray-800:hover { background-color: #1f2937; }
.dark\:focus\:border-blue-500:focus { border-color: #3b82f6; }
.dark\:focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; }

/* Pseudo-element content (testimonial quotes) */
.before\:content-\['\201C'\]::before { content: '\201C'; }
.after\:content-\['\201D'\]::after   { content: '\201D'; }

/*  INDEX.HTML THEME & CONTRAST FIXES ──────────────────────────
   utm-nav-bg: adaptive navbar background (light/dark)
   UTM section backgrounds stay dark by design — they are self-
   contained dark panels inside a theme-responsive page wrapper.
   Only the navbar and bare body background switch with OS theme.  */

/* Navbar background is always dark — see .utm-nav-bg above */

/* ================================================================
   INDEX PAGE — classes replacing every inline style
   ================================================================ */

/* Body base typography */
.utm-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Nav link typography — desktop */
.utm-nav-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* Nav link typography — mobile */
.utm-nav-link-mobile {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Nav CTA button typography */
.utm-nav-cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Section background — ink colour */
.utm-section-ink {
  background: var(--ink);
}

/* Label with bottom spacing */
.utm-label-spaced {
  margin-bottom: 0.75rem;
}

/* Layers header description paragraph */
.utm-layers-desc {
  font-size: 0.95rem;
  color: var(--white-dim);
  line-height: 1.8;
  align-self: end;
  font-family: var(--font-body);
}

/* Layer card small subtitle */
.utm-layer-subdesc {
  font-size: 0.78rem;
  color: var(--white-dim);
  line-height: 1.6;
  margin-top: 0.4rem;
  font-family: var(--font-body);
}

/* Layer badge wrapper */
.utm-badge-wrap {
  margin-top: 1rem;
}

/* Violet badge — admin layer */
.utm-badge-violet {
  background: #a78bfa1a;
  color: #a78bfa;
  border: 1px solid #a78bfa4d;
}

/* Arch accent colour variants */
.utm-arch-accent-blue   { background: var(--blue); }
.utm-arch-accent-green  { background: var(--green); }
.utm-arch-accent-indigo { background: #7c9ef0; }
.utm-arch-accent-violet { background: #a78bfa; }

/* Section intro paragraphs */
.utm-section-intro {
  max-width: 580px;
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.8;
  font-family: var(--font-body);
}
.utm-section-intro-520 { max-width: 520px; }
.utm-section-intro-540 { max-width: 540px; }

/* Privilege diagram heading colours */
.utm-priv-heading-dim  { color: var(--slate); }
.utm-priv-heading-blue { color: var(--blue-light); }

/* Privilege icon background variants */
.utm-priv-icon-blue  { background: #2563eb1a; }
.utm-priv-icon-green { background: #10b9811a; }

/* Diagram layer background variants */
.utm-diag-layer-blue-dim  { background: #2563eb0f; }
.utm-diag-layer-green-dim { background: #10b9810a; }

/* Diagram icon background variants */
.utm-diag-icon-blue-md { background: #2563eb26; }
.utm-diag-icon-blue    { background: #2563eb1f; }
.utm-diag-icon-green   { background: #10b9811a; }
.utm-diag-icon-indigo  { background: #7c9ef01a; }

/* CTA footnote */
.utm-cta-footnote {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--slate-dim);
  letter-spacing: 0.08em;
}

/* Lightbox slide counter */
.utm-lb-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--slate-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/*  FOOTER  */
.utm-footer {
  background: var(--ink-mid);
  border-top: 1px solid var(--ink-border);
  margin-top: 2rem;
}
.utm-footer > div {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.utm-footer-text {
  color: var(--slate);
  font-size: 0.875rem;
}
.utm-footer-link {
  color: #3bf6ed;
}
.utm-footer-link:hover {
  color: #16F2D1;
}

/* --------------------------------------------
   STATS CARDS GRID
--------------------------------------------- */
.stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.stats-card {
  background: var(--ink-light);
  border: 1px solid var(--ink-border);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}

.stats-card-icon {
  color: var(--blue-light);
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.stats-card-icon svg {
  width: 32px;
  height: 32px;
}

.stats-card-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
}

.stats-card-label {
  font-size: 0.7rem;
  color: var(--slate);
}

/* --------------------------------------------
   TESTIMONIALS GRID
--------------------------------------------- */
.testimonials-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.testimonial-card {
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.testimonial-text {
  color: var(--white-dim);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 2px solid var(--blue);
  object-fit: cover;
}

.testimonial-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
}

.testimonial-company {
  font-size: 0.7rem;
  color: var(--slate);
}

/* --------------------------------------------
   PAGE HEADER (reusable banner)
--------------------------------------------- */
.page-header {
  background: var(--ink-mid);
  border-bottom: 1px solid var(--ink-border);
  padding: 4rem 0;
  text-align: center;
}

.page-header-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1rem;
}

.page-header-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
}

.page-header-subtitle {
  font-size: 1.125rem;
  color: var(--white-dim);
  max-width: 800px;
  margin: 0 auto;
}

/* --------------------------------------------
   SECTION BACKGROUNDS
--------------------------------------------- */
.section-dark {
  background: var(--ink);
  padding: 4rem 0;
}

.section-mid {
  background: var(--ink-mid);
  padding: 4rem 0;
}

.section-blue-cta {
  background: var(--blue);
  padding: 4rem 0;
  text-align: center;
}

/* --------------------------------------------
   CONTAINER
--------------------------------------------- */
.container-xl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --------------------------------------------
   TEXT STYLES
--------------------------------------------- */
.text-center { text-align: center; }
.text-blue-light { color: var(--blue-light); }
.text-white-dim { color: var(--white-dim); }
.text-white { color: var(--white); }
.text-slate { color: var(--slate); }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

.pt-16 { padding-top: 4rem; }
.pb-16 { padding-bottom: 4rem; }

/* --------------------------------------------
   SERVICE CARDS (for services.html)
--------------------------------------------- */
.services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.service-card-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.service-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.service-card-desc {
  font-size: 0.875rem;
  color: var(--white-dim);
  line-height: 1.6;
}

.flex-icon-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* --------------------------------------------
   PRODUCT CARDS (for products.html)
--------------------------------------------- */
.products-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-card {
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.product-card:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.product-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.25rem;
}

.product-accent-blue { background: #56A7E8; }
.product-accent-indigo { background: #4f46e5; }
.product-accent-emerald { background: #10b981; }
.product-accent-amber { background: #f59e0b; }
.product-accent-violet { background: #8b5cf6; }
.product-accent-teal { background: #0d9488; }

.product-icon-box {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--ink-light);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.product-icon-box svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--white);
}

.product-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.product-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.product-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.product-badge-blue { background: #2563eb1a; color: #60a5fa; border: 1px solid #2563eb33; }
.product-badge-indigo { background: #4f46e51a; color: #a5b4fc; border: 1px solid #4f46e533; }
.product-badge-emerald { background: #10b9811a; color: #6ee7b7; border: 1px solid #10b98133; }
.product-badge-amber { background: #f59e0b1a; color: #fcd34d; border: 1px solid #f59e0b33; }
.product-badge-violet { background: #8b5cf61a; color: #c4b5fd; border: 1px solid #8b5cf633; }
.product-badge-teal { background: #0d94881a; color: #5eead4; border: 1px solid #0d948833; }

.product-desc-primary {
  color: var(--white-dim);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.product-desc-secondary {
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-light);
  text-decoration: none;
  white-space: nowrap;
}

.product-link:hover {
  color: var(--blue);
}

/* Products page specific */
.section-title-lg {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--white-dim);
  text-align: center;
}

/* CTA text styles */
.cta-title-white {
  font-size: 1.875rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.cta-text-white {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

/* Product card text spacing */
.product-desc-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.product-desc-primary {
  color: var(--white-dim);
  line-height: 1.6;
  font-size: 0.9375rem;
  margin: 0;
}

/* --------------------------------------------
   HERO STATS (for products.html)
--------------------------------------------- */
.hero-stats-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.hero-stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  backdrop-filter: blur(4px);
}

.hero-stat-number {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
}

.hero-stat-label {
  font-size: 0.875rem;
  color: var(--blue-light);
  margin-top: 0.25rem;
}

/* --------------------------------------------
  ABOUT
--------------------------------------------- */

/* About page specific */
.about-header {
  background: var(--ink-mid);
  border-bottom: 1px solid var(--ink-border);
  padding: 4rem 0;
  text-align: center;
}

.about-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1rem;
}

.about-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.about-subtitle {
  font-size: 1.125rem;
  color: var(--white-dim);
  max-width: 800px;
  margin: 0 auto;
}

/* Who We Are section */
.who-section {
  padding: 4rem 0;
  background: var(--ink);
}

.who-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 1.5rem;
}

.who-text {
  color: var(--white-dim);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.who-text-last {
  color: var(--white-dim);
  line-height: 1.7;
}

/* Stats section (already has stats-grid, stats-card, etc.) */
.stats-section {
  padding: 4rem 0;
  background: var(--ink-mid);
}

/* Testimonials header */
.testimonials-header {
  text-align: center;
  margin-bottom: 3rem;
}

.testimonials-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1rem;
}

.testimonials-divider {
  width: 4rem;
  height: 0.25rem;
  background: var(--blue);
  margin: 0 auto;
  border-radius: 9999px;
}

/* CTA section  */
.cta-subtitle-white {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button-white {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 2rem;
  background: white;
  color: var(--blue);
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s;
}

.cta-button-white:hover {
  background: #f0f4ff;
}

/* Container utilities */
.max-w-1280 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.max-w-800 {
  max-width: 800px;
  margin: 0 auto;
}

.bg-ink {
  background: var(--ink);
}

/* --------------------------------------------
   LEGAL
--------------------------------------------- */

.legal-h5 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Mailto and email links */
.legal-email {
  color: var(--blue-light);
  text-decoration: none;
  font-weight: 500;
}

.legal-email:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* Margin left */
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }

/* Margin right */
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }

/* Margin left auto (push right) */
.ml-auto {
  margin-left: auto;
}

/* Margin right auto (push left) */
.mr-auto {
  margin-right: auto;
}

/* --------------------------------------------
   CONTACT PAGE
--------------------------------------------- */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .contact-grid {
    flex-direction: row;
  }
}

.contact-info-card {
  width: 100%;
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .contact-info-card {
    width: 33.333%;
  }
}

.contact-form-card {
  width: 100%;
  background: var(--ink-mid);
  border: 1px solid var(--ink-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .contact-form-card {
    width: 66.666%;
  }
}

.contact-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-light);
  margin-bottom: 1rem;
}

.contact-text {
  color: var(--white-dim);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.contact-icon-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.contact-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--blue-light);
}

.contact-subheading {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--blue-light);
  margin-left: 0.5rem;
}

.contact-address {
  color: var(--white-dim);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.contact-phone {
  color: var(--white-dim);
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

/* Form styles */
.form-input, .form-textarea {
  width: 100%;
  padding: 0.625rem;
  background: var(--ink-light);
  border: 1px solid var(--ink-border);
  border-radius: 0.5rem;
  color: var(--white);
  font-size: 0.875rem;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.form-textarea {
  resize: vertical;
}

.form-group {
  margin-bottom: 1rem;
}

.form-checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  background: var(--ink-light);
  border: 1px solid var(--ink-border);
  accent-color: var(--blue);
}

.form-checkbox-label {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: var(--white-dim);
}

.form-checkbox-label a {
  color: var(--blue-light);
  text-decoration: none;
}

.form-checkbox-label a:hover {
  text-decoration: underline;
}

.form-submit {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--blue);
  color: white;
  font-weight: 500;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.form-submit:hover {
  background: var(--blue-dark);
}

/* CTA button */
.cta-button {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 2rem;
  background: white;
  color: var(--blue);
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s;
}

.cta-button:hover {
  background: #f0f4ff;
}

/* Hero section (products page) */
.hero-stats-section {
  background: var(--ink-mid);
  padding: 5rem 0;
  text-align: center;
}

.hero-stats-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
}

.hero-stats-subtitle {
  font-size: 1.125rem;
  color: var(--white-dim);
  max-width: 768px;
  margin: 0 auto 2rem auto;
}

/* Process step circle icon */
.process-icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #2563eb1a;
}

.process-icon-circle img {
  width: 1.5rem;
  height: 1.5rem;
}

/* --------------------------------------------
   SERVICES PAGE SPECIFIC
--------------------------------------------- */
.max-w-900 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.max-w-600 {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* What We Do section */
.what-we-do-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 0.5rem;
}

.what-we-do-subtitle {
  color: var(--blue-light);
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.what-we-do-text {
  color: var(--white-dim);
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Process section */
.process-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 3rem;
}

/* CTA section */
.cta-section {
  background: var(--blue);
  padding: 4rem 0;
  text-align: center;
}

.cta-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.cta-subtitle {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero stats for products page */
.hero-stats-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
}

.hero-stats-subtitle {
  font-size: 1.125rem;
  color: var(--white-dim);
  max-width: 768px;
  margin: 0 auto 2rem auto;
}

/* Section backgrounds */
.bg-ink-mid {
  background: var(--ink-mid);
}

.bg-ink {
  background: var(--ink);
}

/* Process icon circle */
.process-icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #2563eb1a;
}

.process-icon-circle img {
  width: 1.5rem;
  height: 1.5rem;
}

/* Products page section title */
.section-title-lg {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--white-dim);
  text-align: center;
}

/* Section padding utilities */
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

/* --------------------------------------------
   COOKIE BANNER
--------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  max-width: 20rem;
  z-index: 50;
  display: none;
}

.cookie-banner-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cookie-banner-text {
  color: #d1d5db;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.cookie-banner-button {
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cookie-banner-button:hover {
  background: #1d4ed8;
}

.cookie-banner-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}


/* Proper body styles */
    body {
      font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
      font-size: 16px;
      line-height: 1.7;
      background: var(--ink);
      color: var(--white);
      margin: 0;
      padding: 0;
    }

    .utm-cta { margin-bottom: 0; padding-bottom: 5rem; }
    .utm-footer { margin-top: 0; }

    .max-w-xs { max-width: 20rem !important; }
    .max-w-sm { max-width: 24rem !important; }
    .max-w-md { max-width: 28rem !important; }
    .max-w-lg { max-width: 32rem !important; }
    .max-w-xl { max-width: 36rem !important; }
    .max-w-2xl { max-width: 42rem !important; }
    .max-w-3xl { max-width: 48rem !important; }
    .max-w-4xl { max-width: 56rem !important; }
    .max-w-5xl { max-width: 64rem !important; }
    .max-w-6xl { max-width: 72rem !important; }
    .max-w-7xl { max-width: 80rem !important; }
    /* FIX 4: Carousel dots visibility */
    .utm-carousel-dot.active { background: var(--blue) !important; transform: scale(1.3); }
    /* FIX 5: Smooth transitions */
    * { transition: background-color 0.2s ease, border-color 0.2s ease; }