/* ============================================================
   QuickMerge — Unified Premium Design System (Dark)
   v3 · 2026
   ------------------------------------------------------------
   This stylesheet is loaded LAST on every page so it becomes the
   single source of truth for the brand. It overrides BOTH legacy
   token vocabularies and restyles every shared component into a
   premium, dark, SaaS-grade experience — without touching any
   page's tool logic or markup.
   ============================================================ */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
   Both historic variable sets are remapped to one dark palette so
   the entire site re-skins consistently.
   --------------------------------------------------------------- */
:root {
  /* ---- Brand ---- */
  --qm-brand-50:  #EEF0FF;
  --qm-brand-300: #A5B4FC;
  --qm-brand-400: #818CF8;
  --qm-brand-500: #6366F1;
  --qm-brand-600: #5145E5;
  --qm-brand-700: #4338CA;
  --qm-violet:    #8B5CF6;
  --qm-cyan:      #22D3EE;
  --qm-pink:      #F472B6;

  /* ---- Surfaces (dark) ---- */
  --qm-bg:        #07080F;   /* page background base */
  --qm-bg-2:      #0B0D17;
  --qm-surface:   #11131F;   /* cards */
  --qm-surface-2: #171A28;   /* elevated / hover */
  --qm-surface-3: #1E2233;
  --qm-glass:     rgba(20, 23, 36, 0.66);
  --qm-glass-brd: rgba(255, 255, 255, 0.09);

  /* ---- Text ---- */
  --qm-text:      #F3F5FB;   /* primary */
  --qm-text-2:    #B4BCD0;   /* secondary */
  --qm-text-3:    #818AA3;   /* muted */
  --qm-text-4:    #5A6280;   /* faint */

  /* ---- Lines ---- */
  --qm-border:    rgba(255, 255, 255, 0.08);
  --qm-border-2:  rgba(255, 255, 255, 0.14);

  /* ---- Semantic ---- */
  --qm-success:   #34D399;
  --qm-warning:   #FBBF24;
  --qm-danger:    #F87171;
  --qm-info:      #38BDF8;

  /* ---- Gradients ---- */
  --qm-grad-brand: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #22D3EE 100%);
  --qm-grad-brand-soft: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.10));
  --qm-grad-text: linear-gradient(120deg, #C7D2FE 0%, #A5B4FC 30%, #67E8F9 100%);

  /* ---- Radii ---- */
  --qm-r-xs: 8px;
  --qm-r-sm: 12px;
  --qm-r-md: 16px;
  --qm-r-lg: 22px;
  --qm-r-xl: 30px;
  --qm-r-full: 999px;

  /* ---- Shadows / glow ---- */
  --qm-sh-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.28);
  --qm-sh-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --qm-sh-lg: 0 24px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.35);
  --qm-glow:  0 0 0 1px rgba(99,102,241,.35), 0 18px 50px rgba(99,102,241,.30);

  /* ---- Motion ---- */
  --qm-ease: cubic-bezier(.22,.61,.36,1);
  --qm-spring: cubic-bezier(.34,1.56,.64,1);
  --qm-t: .28s var(--qm-ease);

  /* ---- Spacing scale (8pt) ---- */
  --qm-s1: 4px;  --qm-s2: 8px;  --qm-s3: 12px; --qm-s4: 16px;
  --qm-s5: 24px; --qm-s6: 32px; --qm-s7: 48px; --qm-s8: 64px;
  --qm-s9: 96px; --qm-s10: 128px;

  /* =========================================================
     Remap legacy "v2" vocabulary (index.html)
     ========================================================= */
  --primary: var(--qm-brand-500);
  --primary-dark: var(--qm-brand-600);
  --primary-light: rgba(99,102,241,.14);
  --accent: var(--qm-cyan);
  --accent-light: rgba(34,211,238,.14);

  --ink-900: var(--qm-text);
  --ink-700: var(--qm-text-2);
  --ink-500: var(--qm-text-3);
  --ink-300: var(--qm-text-4);

  --surface: var(--qm-bg);
  --surface-subtle: var(--qm-bg-2);
  --surface-muted: var(--qm-surface);
  --border: var(--qm-border);

  --success: var(--qm-success);
  --warning: var(--qm-warning);
  --danger: var(--qm-danger);

  --surface-dark: var(--qm-bg);
  --surface-dark-2: var(--qm-surface);
  --ink-inverse: var(--qm-text);

  --radius-sm: var(--qm-r-xs);
  --radius-md: var(--qm-r-sm);
  --radius-lg: var(--qm-r-md);
  --radius-xl: var(--qm-r-lg);
  --radius-full: var(--qm-r-full);
  --shadow-sm: var(--qm-sh-sm);
  --shadow-md: var(--qm-sh-md);
  --shadow-lg: var(--qm-sh-lg);
  --transition: var(--qm-t);

  /* =========================================================
     Remap legacy "v1" vocabulary (all tool/blog/legal pages)
     ========================================================= */
  --bg-dark:  var(--qm-bg);
  --bg-card:  var(--qm-surface);
  --bg-light: var(--qm-surface-2);

  --primary-accent: var(--qm-brand-500);
  --primary-accent-hover: var(--qm-brand-400);
  --secondary-accent: var(--qm-cyan);
  --tertiary-accent: var(--qm-violet);

  --text-light:  var(--qm-text);
  --text-medium: var(--qm-text-2);
  --text-dark:   var(--qm-text-3);
  --border-color: var(--qm-border);

  --error: var(--qm-danger);
  --processing: var(--qm-info);

  --shadow: var(--qm-sh-md);
  --shadow-hover: var(--qm-glow);
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--qm-text-2);
  background-color: var(--qm-bg);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(139,92,246,.12), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(99,102,241,.35); color: #fff; }

/* Custom scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--qm-surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--qm-surface-3); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--qm-surface-2); background-clip: content-box; }

/* ---------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--qm-text); letter-spacing: -.02em; line-height: 1.12; }
h1 { font-weight: 800; }
h2 { font-weight: 750; letter-spacing: -.025em; }
h3 { font-weight: 700; }
p  { color: var(--qm-text-2); }
strong, b { color: var(--qm-text); }
a { color: var(--qm-brand-300); }
small, .small { color: var(--qm-text-3); }

/* Gradient text helper used by headings with .accent / .highlight */
.accent, .highlight, .grad-text {
  background: var(--qm-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------------------------------------------------------------
   4. HEADER / NAV  (glassmorphism, sticky)
   --------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--qm-glass);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--qm-border);
  transition: background var(--qm-t), border-color var(--qm-t), box-shadow var(--qm-t);
}
header.qm-scrolled { background: rgba(9,11,20,.85); box-shadow: 0 8px 30px rgba(0,0,0,.45); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 14px 24px; gap: 24px;
}
.nav-logo a {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.22rem; color: var(--qm-text); letter-spacing: -.02em;
}
.nav-logo i, .nav-logo .fas {
  background: var(--qm-grad-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; padding: 8px 14px; border-radius: var(--qm-r-xs);
  color: var(--qm-text-2); font-weight: 550; font-size: .95rem;
  transition: color var(--qm-t), background var(--qm-t);
}
.nav-links a:hover { color: var(--qm-text); background: rgba(255,255,255,.05); }
.nav-cta .btn { box-shadow: var(--qm-sh-sm); }

/* Mobile menu button */
.mobile-menu-btn {
  display: none; background: rgba(255,255,255,.06); color: var(--qm-text);
  border: 1px solid var(--qm-border); width: 42px; height: 42px;
  border-radius: var(--qm-r-xs); font-size: 1.1rem; cursor: pointer;
  align-items: center; justify-content: center; transition: var(--qm-t);
}
.mobile-menu-btn:hover { background: rgba(255,255,255,.1); }

.mobile-menu {
  display: none; flex-direction: column; gap: 4px; padding: 12px 16px 18px;
  background: rgba(9,11,20,.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--qm-border);
}
.mobile-menu.active { display: flex; animation: qm-slide-down .28s var(--qm-ease); }
.mobile-menu a { padding: 12px 14px; border-radius: var(--qm-r-xs); color: var(--qm-text-2); font-weight: 550; }
.mobile-menu a:hover { background: rgba(255,255,255,.06); color: var(--qm-text); }
.mobile-menu .btn { margin-bottom: 6px; justify-content: center; }

/* ---------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------- */
.btn, .tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 650; font-size: .98rem; line-height: 1;
  padding: 13px 22px; border-radius: var(--qm-r-xs); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--qm-t), box-shadow var(--qm-t), background var(--qm-t), border-color var(--qm-t);
  text-decoration: none; white-space: nowrap;
}
.btn-primary, .tool-btn {
  color: #fff; background: var(--qm-grad-brand); background-size: 160% 160%;
  box-shadow: 0 8px 22px rgba(99,102,241,.35);
}
.btn-primary:hover, .tool-btn:hover:not(:disabled) {
  transform: translateY(-2px); background-position: 100% 0;
  box-shadow: 0 14px 34px rgba(99,102,241,.5);
}
.btn-primary:active, .tool-btn:active { transform: translateY(0); }
.btn-lg { padding: 16px 30px; font-size: 1.06rem; border-radius: var(--qm-r-sm); }

.btn-secondary, .btn.btn-outline, .btn-ghost {
  background: rgba(255,255,255,.04); color: var(--qm-text);
  border: 1px solid var(--qm-border-2); box-shadow: none;
}
.btn-secondary:hover, .btn.btn-outline:hover, .btn-ghost:hover {
  background: rgba(255,255,255,.09); border-color: var(--qm-brand-400); transform: translateY(-2px);
}
.tool-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn i, .btn .fas { transition: transform var(--qm-t); }
.btn:hover i.fa-arrow-right, .btn:hover .fa-arrow-right { transform: translateX(3px); }

/* ---------------------------------------------------------------
   6. CONTAINERS / SECTIONS
   --------------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section-alt, .section-muted { background: rgba(255,255,255,.015); border-block: 1px solid var(--qm-border); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--qm-r-full);
  background: var(--qm-grad-brand-soft); border: 1px solid var(--qm-border-2);
  color: var(--qm-brand-300); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.eyebrow i, .eyebrow .fas { color: var(--qm-cyan); -webkit-text-fill-color: var(--qm-cyan); }

.section-head { text-align: center; max-width: 720px; margin-inline: auto; }
.lead { color: var(--qm-text-2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }

/* ---------------------------------------------------------------
   7. HERO  (animated gradient/mesh + aurora glow)
   --------------------------------------------------------------- */
.hero, .tool-page-hero {
  position: relative; overflow: hidden; isolation: isolate;
}
.hero::before, .tool-page-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 120%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 360px at 20% 18%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(560px 340px at 82% 8%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(620px 420px at 60% 90%, rgba(139,92,246,.22), transparent 60%);
  filter: blur(8px); animation: qm-aurora 16s var(--qm-ease) infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
}
@keyframes qm-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.03); }
}
.hero h1 { letter-spacing: -.035em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Stats bar / trust counters */
.stats-bar, .trust-row { gap: 20px; }
.stat-card, .trust-item {
  background: var(--qm-surface); border: 1px solid var(--qm-border);
  border-radius: var(--qm-r-md); box-shadow: var(--qm-sh-sm);
  transition: transform var(--qm-t), border-color var(--qm-t), box-shadow var(--qm-t);
}
.stat-card:hover, .trust-item:hover { transform: translateY(-4px); border-color: var(--qm-border-2); box-shadow: var(--qm-sh-md); }
.stat-number { background: var(--qm-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }
.stat-icon, .feature-icon, .step-num {
  background: var(--qm-grad-brand-soft); color: var(--qm-brand-300);
  border: 1px solid var(--qm-border-2);
}

/* ---------------------------------------------------------------
   8. CARDS  (tool, feature, step, blog, generic)
   --------------------------------------------------------------- */
.card, .tool-card, .feature-card, .step-card, .content-block, .tool-interface, .blog-card, .post-card {
  background: var(--qm-surface);
  border: 1px solid var(--qm-border);
  border-radius: var(--qm-r-md);
  box-shadow: var(--qm-sh-sm);
  transition: transform var(--qm-t), border-color var(--qm-t), box-shadow var(--qm-t), background var(--qm-t);
}

/* Interactive lift + glow + sheen for clickable cards */
.tool-card, .feature-card, .blog-card, .post-card { position: relative; overflow: hidden; }
.tool-card::after, .feature-card::after, .blog-card::after, .post-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--qm-mx, 50%) var(--qm-my, 0%), rgba(99,102,241,.16), transparent 45%);
  opacity: 0; transition: opacity var(--qm-t);
}
.tool-card:hover, .feature-card:hover, .blog-card:hover, .post-card:hover {
  transform: translateY(-6px); border-color: var(--qm-border-2); box-shadow: var(--qm-sh-lg); background: var(--qm-surface-2);
}
.tool-card:hover::after, .feature-card:hover::after, .blog-card:hover::after, .post-card:hover::after { opacity: 1; }

.tool-icon, .feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--qm-grad-brand-soft); color: var(--qm-brand-300);
  border: 1px solid var(--qm-border-2); border-radius: var(--qm-r-sm);
  transition: transform var(--qm-t);
}
.tool-card:hover .tool-icon, .feature-card:hover .feature-icon { transform: scale(1.08) rotate(-3deg); }
.tool-link { color: var(--qm-brand-300); font-weight: 650; }
.tool-card:hover .tool-link { color: var(--qm-brand-400); }

/* Category chips / filters */
.chip {
  background: rgba(255,255,255,.04); color: var(--qm-text-2);
  border: 1px solid var(--qm-border); border-radius: var(--qm-r-full);
  padding: 9px 18px; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: var(--qm-t);
}
.chip:hover { color: var(--qm-text); border-color: var(--qm-border-2); background: rgba(255,255,255,.07); }
.chip.active { color: #fff; background: var(--qm-grad-brand); border-color: transparent; box-shadow: 0 6px 18px rgba(99,102,241,.4); }
.tool-card.hidden { display: none; }

/* ---------------------------------------------------------------
   9. TOOL INTERFACE + PREMIUM UPLOAD AREA
   --------------------------------------------------------------- */
.tool-interface { padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--qm-sh-md); }

.drag-drop-area {
  position: relative; border: 2px dashed var(--qm-border-2);
  border-radius: var(--qm-r-md); background: rgba(255,255,255,.02);
  transition: border-color var(--qm-t), background var(--qm-t), transform var(--qm-t), box-shadow var(--qm-t);
  overflow: hidden;
}
/* animated gradient ring on hover/drag */
.drag-drop-area::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: var(--qm-grad-brand); opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--qm-t);
}
.drag-drop-area:hover { background: rgba(99,102,241,.06); transform: translateY(-1px); }
.drag-drop-area:hover, .drag-drop-area.active, .drag-drop-area.dragover {
  border-color: transparent; box-shadow: var(--qm-glow);
}
.drag-drop-area:hover::before, .drag-drop-area.active::before, .drag-drop-area.dragover::before { opacity: 1; }
.drag-drop-area.active, .drag-drop-area.dragover {
  background: rgba(99,102,241,.12); transform: scale(1.01);
}
.drag-drop-area .fa-cloud-upload-alt, .drag-drop-area i.fas {
  background: var(--qm-grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; transition: transform var(--qm-t);
}
.drag-drop-area:hover .fa-cloud-upload-alt { transform: translateY(-4px) scale(1.06); }
.drag-drop-area p { color: var(--qm-text); font-weight: 600; }
.drag-drop-area .small { color: var(--qm-text-3); }

.file-input label, .option-group label { color: var(--qm-text); font-weight: 600; }

/* Inputs / selects / textareas */
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
input[type="password"], input[type="url"], select, textarea {
  background: rgba(255,255,255,.03); color: var(--qm-text);
  border: 1px solid var(--qm-border-2); border-radius: var(--qm-r-xs);
  font-family: inherit; transition: border-color var(--qm-t), box-shadow var(--qm-t), background var(--qm-t);
}
input::placeholder, textarea::placeholder { color: var(--qm-text-4); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--qm-brand-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,.25); background: rgba(255,255,255,.05);
}

/* File list rows */
.file-list { scrollbar-width: thin; }
.file-list > * { background: rgba(255,255,255,.03); border: 1px solid var(--qm-border); border-radius: var(--qm-r-xs); }
.file-list-summary { color: var(--qm-text-3); }
.no-files { color: var(--qm-text-3); }

/* Status, progress, spinner */
.status-message {
  border-radius: var(--qm-r-sm); border: 1px solid var(--qm-border-2);
  background: rgba(255,255,255,.03); color: var(--qm-text-2);
}
.status-message.success, .status-message.is-success { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); color: #6ee7b7; }
.status-message.error, .status-message.is-error { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.1); color: #fca5a5; }
.status-message.processing, .status-message.is-processing,
.status-message.info, .status-message.is-info { border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.1); color: #7dd3fc; }

.spinner, .fa-spinner {
  border-color: rgba(255,255,255,.15); border-top-color: var(--qm-brand-400);
}

progress, .progress, .progress-bar { border-radius: var(--qm-r-full); overflow: hidden; }
progress { accent-color: var(--qm-brand-500); }
.progress { background: rgba(255,255,255,.07); }
.progress > *, .progress-bar > * { background: var(--qm-grad-brand); }

/* ---------------------------------------------------------------
   10. FAQ  (premium accordion — preserves max-height mechanism)
   --------------------------------------------------------------- */
.faq-container { max-width: 820px; margin-inline: auto; }
.faq-item {
  background: var(--qm-surface); border: 1px solid var(--qm-border);
  border-radius: var(--qm-r-sm); margin-bottom: 12px; overflow: hidden;
  transition: border-color var(--qm-t), background var(--qm-t);
}
.faq-item:hover { border-color: var(--qm-border-2); }
.faq-item:has(.faq-answer.active), .faq-item.active { border-color: var(--qm-brand-500); background: var(--qm-surface-2); }
.faq-question {
  color: var(--qm-text); font-weight: 650; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color var(--qm-t);
}
.faq-question:hover { color: var(--qm-brand-300); }
.faq-question i, .faq-question .fas { color: var(--qm-brand-400); transition: transform var(--qm-t); }
.faq-answer { color: var(--qm-text-2); }
.faq-answer.active { color: var(--qm-text-2); }

/* ---------------------------------------------------------------
   11. BLOG
   --------------------------------------------------------------- */
.blog-card, .post-card { overflow: hidden; }
.blog-card img, .post-card img { transition: transform .5s var(--qm-ease); }
.blog-card:hover img, .post-card:hover img { transform: scale(1.05); }

/* Article reading width + rhythm */
.blog-article, .article-content, .post-content, .blog-content {
  color: var(--qm-text-2); font-size: 1.075rem; line-height: 1.8;
}
.blog-article h2, .article-content h2, .post-content h2 { margin-top: 2.4em; margin-bottom: .6em; }
.blog-article h3, .article-content h3, .post-content h3 { margin-top: 1.8em; margin-bottom: .5em; }
.blog-article a, .article-content a, .post-content a { color: var(--qm-brand-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(165,180,252,.4); }
.blog-article a:hover, .article-content a:hover { text-decoration-color: var(--qm-brand-300); }
.blog-article blockquote, .article-content blockquote, .post-content blockquote {
  border-left: 3px solid var(--qm-brand-500); background: rgba(99,102,241,.08);
  border-radius: 0 var(--qm-r-sm) var(--qm-r-sm) 0; color: var(--qm-text);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.blog-article code, .article-content code, .post-content code {
  background: rgba(255,255,255,.07); border: 1px solid var(--qm-border);
  border-radius: 6px; padding: .15em .4em; font-size: .9em; color: #c7d2fe;
}
.blog-article pre, .article-content pre, .post-content pre {
  background: var(--qm-bg-2); border: 1px solid var(--qm-border);
  border-radius: var(--qm-r-sm); padding: 1.1rem 1.25rem; overflow-x: auto;
}
.blog-article pre code { background: none; border: none; padding: 0; }

/* Reading progress bar (injected by JS on article pages) */
.qm-read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--qm-grad-brand); z-index: 2000;
  box-shadow: 0 0 12px rgba(99,102,241,.7); transition: width .1s linear;
}

/* Table of contents */
.toc, .table-of-contents {
  background: var(--qm-surface); border: 1px solid var(--qm-border);
  border-radius: var(--qm-r-sm);
}
.toc a, .table-of-contents a { color: var(--qm-text-2); }
.toc a:hover, .table-of-contents a:hover { color: var(--qm-brand-300); }

/* ---------------------------------------------------------------
   12. FOOTER  (single, consistent, premium, site-wide)
   --------------------------------------------------------------- */
footer {
  position: relative; margin-top: var(--qm-s9);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)), var(--qm-bg-2);
  border-top: 1px solid var(--qm-border);
}
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.6), rgba(34,211,238,.5), transparent);
}
footer .container { padding-top: var(--qm-s8); padding-bottom: var(--qm-s5); }
.footer-content {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--qm-s7);
}
.footer-brand p { color: var(--qm-text-3); max-width: 38ch; margin-top: 14px; }
.footer-brand .nav-logo a { font-size: 1.2rem; }
.footer-links h4, .footer-contact h4 {
  color: var(--qm-text); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
}
.footer-links ul, .footer-contact ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a, .footer-contact a {
  color: var(--qm-text-3); font-size: .95rem; transition: color var(--qm-t), padding-left var(--qm-t);
}
.footer-links a:hover, .footer-contact a:hover { color: var(--qm-brand-300); padding-left: 4px; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-top: var(--qm-s7); padding-top: var(--qm-s5); border-top: 1px solid var(--qm-border);
}
.footer-bottom p { color: var(--qm-text-4); font-size: .85rem; }
.footer-links-bottom { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links-bottom a { color: var(--qm-text-3); font-size: .88rem; transition: color var(--qm-t); }
.footer-links-bottom a:hover { color: var(--qm-brand-300); }

/* ---------------------------------------------------------------
   13. COMPARISON TICKS (why-us tables)
   --------------------------------------------------------------- */
.fa-check.yes, .yes .fa-check, .fa-check { color: var(--qm-success); }
.fa-xmark.no, .no .fa-xmark, .fa-times.no { color: var(--qm-danger); }

/* ---------------------------------------------------------------
   14. ALERT BANNERS
   --------------------------------------------------------------- */
.alert, .banner, .notice {
  border-radius: var(--qm-r-sm); border: 1px solid var(--qm-border-2);
  background: var(--qm-grad-brand-soft); color: var(--qm-text); padding: 14px 18px;
}

/* ---------------------------------------------------------------
   15. ANIMATION SYSTEM
   --------------------------------------------------------------- */
/* Scroll reveal — works with existing .fade-in/.visible toggling */
.fade-in, .reveal, [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--qm-ease), transform .7s var(--qm-ease);
  will-change: opacity, transform;
}
.fade-in.visible, .reveal.visible, .reveal.is-visible, [data-reveal].visible {
  opacity: 1; transform: none;
}
/* Stagger children when parent gets .visible */
.qm-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--qm-ease), transform .6s var(--qm-ease); }
.qm-stagger.visible > * { opacity: 1; transform: none; }
.qm-stagger.visible > *:nth-child(2) { transition-delay: .06s; }
.qm-stagger.visible > *:nth-child(3) { transition-delay: .12s; }
.qm-stagger.visible > *:nth-child(4) { transition-delay: .18s; }
.qm-stagger.visible > *:nth-child(5) { transition-delay: .24s; }
.qm-stagger.visible > *:nth-child(6) { transition-delay: .30s; }

@keyframes qm-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes qm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes qm-shimmer { 100% { background-position: 200% 0; } }

/* Loading skeleton helper */
.qm-skeleton, .skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 70%);
  background-size: 200% 100%; animation: qm-shimmer 1.4s infinite; border-radius: var(--qm-r-xs);
}

/* ---------------------------------------------------------------
   16. ACCESSIBILITY
   --------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--qm-brand-600); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--qm-r-xs) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--qm-brand-400); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .fade-in, .reveal, [data-reveal], .qm-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   16b. LEGACY LIGHT-THEME OVERRIDES
   A handful of bespoke pages hardcoded light backgrounds that the
   token remap can't reach. Neutralise them here so the dark theme
   stays consistent everywhere.
   --------------------------------------------------------------- */
.blog-section, .blog-content { background: transparent !important; }
.blog-hero { background: transparent !important; }
::-webkit-scrollbar-track { background: transparent !important; }
.data-editor:focus, .hash-input:focus, .json-input:focus,
textarea:focus, input:focus { background: rgba(255,255,255,.05) !important; }
/* Article body sits on the page; give it comfortable reading rhythm */
.blog-content { color: var(--qm-text-2); }

/* ---------------------------------------------------------------
   17. RESPONSIVE / MOBILE-FIRST
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-content { grid-template-columns: 1fr 1fr; gap: var(--qm-s6); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .container { padding-left: 18px; padding-right: 18px; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 auto; }
  .footer-content { grid-template-columns: 1fr; gap: var(--qm-s5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  h1 { font-size: clamp(2rem, 9vw, 2.9rem); }
  .tool-page-hero h1 { font-size: clamp(2rem, 9vw, 2.9rem) !important; }
}
@media (max-width: 480px) {
  .tool-interface { padding: 1.25rem; }
  .btn, .tool-btn { width: 100%; }
  .nav { padding: 12px 16px; }
}