/*
 * Q-Hub Webflow Theme — Design Tokens V2
 * Inject into: Webflow → Site Settings → Custom Code → Head
 *
 * Modern CSS: oklch() colors, @property animations, fluid spacing,
 * cascade layers, color-mix(), prefers-contrast
 *
 * Fonts: Satoshi (display) + Inter (body) — both self-hosted
 * Colour pattern: hex fallback FIRST, oklch override SECOND
 */

/* ── Cascade Layers — controls specificity hierarchy ── */
@layer reset, tokens, base, components, utilities, overrides;

/* ── @property — enables animating custom properties (gradients, colors) ── */
@property --qh-gradient-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

/* Removed orphaned @property: --qh-gradient-stop, --qh-glow-opacity, --qh-hue-accent */

/* ── Satoshi Variable Font — display headings ── */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/theme/assets/fonts/satoshi-variable.woff2') format('woff2');
}

/* ── Inter Variable Font — body text ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme/assets/fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  :root {
    /* ── Colors: Primary (hex fallback + oklch override) ── */
    --qh-dark: #091D6B;
    --qh-dark: oklch(0.28 0.12 262);
    --qh-dark-end: #050D30;
    --qh-dark-end: oklch(0.17 0.08 262);
    --qh-accent: #3B82F6;
    --qh-accent: oklch(0.58 0.19 255);
    --qh-accent-hover: #2563EB;
    --qh-accent-hover: oklch(0.49 0.17 255);
    --qh-accent-light: #60A5FA;
    --qh-accent-light: oklch(0.72 0.14 255);
    --qh-secondary: #8B5CF6;
    --qh-secondary: oklch(0.56 0.18 290);

    /* ── Colors: Warm Accent (hex fallback + oklch override) ── */
    --qh-warm: #E5A835;
    --qh-warm: oklch(0.78 0.15 80);
    --qh-warm-light: #F5D77E;
    --qh-warm-light: oklch(0.89 0.10 90);
    --qh-star: #facc15;
    --qh-star: oklch(0.88 0.15 95);

    /* ── Colors: Semantic (hex fallback + oklch override) ── */
    --qh-success: #10B981;
    --qh-success: oklch(0.68 0.16 160);
    --qh-warning: #F59E0B;
    --qh-warning: oklch(0.78 0.17 80);
    --qh-error: #EF4444;
    --qh-error: oklch(0.63 0.22 25);
    --qh-info: #06B6D4;
    --qh-info: oklch(0.70 0.12 200);

    /* ── Colors: Neutral (hex fallback + oklch override) ── */
    --qh-white: #ffffff;
    --qh-white: oklch(1 0 0);
    --qh-ghost: #f4f6fa;
    --qh-ghost: oklch(0.97 0.01 270);
    --qh-border: #e2e8f0;
    --qh-border: oklch(0.92 0.02 270);
    --qh-border-med: #c8cbdf;
    --qh-border-med: oklch(0.84 0.03 270);
    --qh-body: #475569;
    --qh-body: oklch(0.45 0.03 260);
    --qh-muted: #64748b;
    --qh-muted: oklch(0.55 0.03 260);
    --qh-heading: #0f172a;
    --qh-heading: oklch(0.18 0.04 260);
    --qh-surface-dark: #0C1847;
    --qh-surface-dark: oklch(0.20 0.10 262);
    --qh-body-light: rgba(255,255,255,0.65);     /* Body text on dark sections */
    --qh-body-dark: rgba(255,255,255,0.7);       /* Body text on dark surfaces */
    --qh-body-dark-muted: rgba(255,255,255,0.5); /* Muted text on dark surfaces */
    --qh-on-dark: #ffffff;                        /* Headings on dark surfaces */
    --qh-on-dark-border: rgba(255,255,255,0.1);  /* Borders on dark surfaces */
    --qh-table-stripe: #eef0f8;                   /* Alternating table row bg */
    --qh-table-stripe: oklch(0.95 0.02 270);
    --qh-code-block-bg: #1e293b;                  /* Code block background */
    --qh-code-block-bg: oklch(0.22 0.03 260);

    /* ── Colors: Semantic backgrounds (color-mix for tinting) ── */
    --qh-success-bg: color-mix(in oklch, var(--qh-success) 10%, transparent);
    --qh-warning-bg: color-mix(in oklch, var(--qh-warning) 10%, transparent);
    --qh-error-bg: color-mix(in oklch, var(--qh-error) 10%, transparent);
    --qh-info-bg: color-mix(in oklch, var(--qh-info) 10%, transparent);
    --qh-warm-bg: color-mix(in oklch, var(--qh-warm) 10%, transparent);

    /* ── Colors: Callout backgrounds ── */
    --qh-callout-info-bg: #f0fdfa;
    --qh-callout-info-bg: oklch(0.98 0.02 180);
    --qh-callout-tip-bg: #f0fdf4;
    --qh-callout-tip-bg: oklch(0.98 0.02 145);
    --qh-callout-warn-bg: #fffbeb;
    --qh-callout-warn-bg: oklch(0.99 0.02 90);
    --qh-callout-important-bg: #eff6ff;
    --qh-callout-important-bg: oklch(0.97 0.02 260);

    /* ── Colors: macOS window chrome ── */
    --qh-window-close: #ff5f57;
    --qh-window-minimize: #febc2e;
    --qh-window-maximize: #28c840;

    /* ── Gradients (using @property-animated angle) ── */
    --qh-gradient-hero: linear-gradient(var(--qh-gradient-angle), var(--qh-dark) 0%, var(--qh-dark-end) 100%);
    --qh-gradient-radial: radial-gradient(ellipse at 30% 20%, color-mix(in oklch, var(--qh-accent) 15%, transparent) 0%, transparent 60%);
    --qh-gradient-accent: linear-gradient(var(--qh-gradient-angle), var(--qh-accent) 0%, var(--qh-secondary) 100%);
    /* Removed orphaned: --qh-gradient-light, --qh-gradient-card-shine, --qh-gradient-features */
    --qh-gradient-cta: linear-gradient(135deg, var(--qh-dark) 0%, oklch(0.18 0.12 290) 60%, var(--qh-dark-end) 100%);
    --qh-gradient-stats: linear-gradient(180deg, var(--qh-dark) 0%, var(--qh-surface-dark) 100%);
    --qh-gradient-footer: linear-gradient(180deg, var(--qh-dark-end) 0%, oklch(0.10 0.05 262) 100%);

    /* ── Spacing (8px base, fluid at larger sizes via clamp) ── */
    --qh-space-1: 4px;
    --qh-space-2: 8px;
    --qh-space-3: 12px;
    --qh-space-4: 16px;
    --qh-space-5: 24px;
    --qh-space-6: 32px;
    --qh-space-7: clamp(32px, 2vw + 16px, 40px);
    --qh-space-8: clamp(36px, 2.5vw + 16px, 48px);
    --qh-space-9: clamp(40px, 3vw + 16px, 56px);
    --qh-space-10: clamp(48px, 3.5vw + 16px, 64px);
    --qh-space-11: clamp(56px, 4vw + 20px, 80px);
    --qh-space-12: clamp(64px, 5vw + 20px, 96px);
    --qh-space-13: clamp(80px, 6vw + 24px, 120px);

    /* ── Typography ── */
    --qh-font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --qh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --qh-font: var(--qh-font-body);
    --qh-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Transitions ── */
    --qh-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --qh-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --qh-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --qh-duration-fast: 150ms;
    --qh-duration: 200ms;
    --qh-duration-slow: 300ms;
    --qh-duration-premium: 450ms;

    /* ── Shadows (oklch alpha for consistency) ── */
    --qh-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
    --qh-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -1px oklch(0 0 0 / 0.06);
    --qh-shadow-md: 0 8px 32px oklch(0 0 0 / 0.08);
    --qh-shadow-lg: 0 24px 48px oklch(0 0 0 / 0.12);
    --qh-shadow-xl: 0 32px 64px oklch(0 0 0 / 0.18);
    --qh-shadow-dark: 0 24px 48px oklch(0.28 0.12 262 / 0.2);
    --qh-shadow-focus: 0 0 0 3px color-mix(in oklch, var(--qh-accent) 15%, transparent);

    /* ── Border Radii ── */
    --qh-radius-sm: 6px;
    --qh-radius: 8px;
    --qh-radius-md: 12px;
    --qh-radius-lg: 16px;
    --qh-radius-xl: 24px;
    --qh-radius-full: 100px;

    /* ── Grid ── */
    --qh-grid-max: 1264px;
    --qh-grid-gutter: 32px;
    --qh-grid-cols: 12;
  }
}

/* ── Dark Mode Token Overrides (dormant — uncomment to activate) ── */
/*
@layer tokens {
  @media (prefers-color-scheme: dark) {
    :root {
      --qh-white: #0f172a;
      --qh-ghost: #1e293b;
      --qh-border: #334155;
      --qh-border-med: #475569;
      --qh-body: #94a3b8;
      --qh-muted: #64748b;
      --qh-heading: #f1f5f9;
      --qh-table-stripe: #1e293b;
      --qh-code-block-bg: #0f172a;
      --qh-callout-info-bg: oklch(0.22 0.03 180);
      --qh-callout-tip-bg: oklch(0.22 0.03 145);
      --qh-callout-warn-bg: oklch(0.22 0.03 80);
      --qh-callout-important-bg: oklch(0.22 0.03 260);
      --qh-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
      --qh-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.3);
      --qh-shadow-md: 0 8px 32px oklch(0 0 0 / 0.25);
      --qh-shadow-lg: 0 24px 48px oklch(0 0 0 / 0.35);
    }
  }
}
*/

/* ── Base Reset ── */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer base {
  /* Touch feedback — brand-tinted tap highlight */
  a, button, [role="button"], .qh-btn { -webkit-tap-highlight-color: rgba(33, 111, 237, 0.15); }

  html {
    font-family: var(--qh-font-body);
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'calt' 1, 'kern' 1;
    scroll-behavior: smooth;
  }

  /* Brand-colored text selection */
  ::selection {
    background: color-mix(in oklch, var(--qh-accent) 20%, transparent);
    color: var(--qh-heading);
  }
  .is-dark-section ::selection {
    background: color-mix(in oklch, var(--qh-accent-light) 30%, transparent);
    color: var(--qh-white);
  }

  body {
    color: var(--qh-body);
    background: var(--qh-white);
    line-height: 1.6;
  }

  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

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

  /* ── High Contrast ── */
  @media (prefers-contrast: more) {
    :root {
      --qh-border: oklch(0.70 0.03 270);
      --qh-body: oklch(0.35 0.03 260);
      --qh-shadow-md: 0 8px 32px oklch(0 0 0 / 0.2);
    }
  }

  /* ── Focus Styles (keyboard-only via :focus-visible) ── */
  :focus-visible {
    outline: 3px solid var(--qh-accent);
    outline-offset: 2px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: var(--qh-ghost); }
  ::-webkit-scrollbar-thumb { background: var(--qh-border-med); border-radius: var(--qh-radius-sm); }
  ::-webkit-scrollbar-thumb:hover { background: var(--qh-muted); }
  html { scrollbar-width: thin; scrollbar-color: var(--qh-border-med) var(--qh-ghost); }
}
/*
 * Q-Hub Webflow Theme — Full Stylesheet (Modernized)
 * Host externally on Webflow Assets / CDN.
 * Link via: <link rel="stylesheet" href="[CDN_URL]/qh-theme.css">
 *
 * Modern CSS: oklch(), color-mix(),
 * content-visibility, logical properties, :has()
 *
 * Structure:
 *   1. Typography
 *   2. Layout & Container
 *   3. Sections
 *   4. Navigation (C01, C03)
 *   5. Heroes (C04, C05, C06)
 *   6. Content Components (C07–C18)
 *   7. Cards (C19–C22)
 *   8. CTA Sections (C23, C24)
 *   9. UI Components (C25–C30)
 *  10. Utility / Combo Classes
 *  11. Animations
 *  12. Responsive
 */

/* ========================================================================
   1. TYPOGRAPHY
   ======================================================================== */

/* ── Fluid Type Scale (clamp) ──
   All sizes scale smoothly between 375px and 1440px viewport.
   No breakpoint jumps — typography is always perfectly sized.
   Formula: clamp(mobile, linear-scale, desktop)                  */

.qh-display-1 {
  font-family: var(--qh-font-display);
  font-size: clamp(36px, 3.6vw + 12px, 76px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--qh-heading);
  text-wrap: balance;
}

.qh-display-2 {
  font-family: var(--qh-font-display);
  font-size: clamp(32px, 2.6vw + 12px, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--qh-heading);
  text-wrap: balance;
}

.qh-display-3 {
  font-family: var(--qh-font-display);
  font-size: clamp(28px, 2.3vw + 12px, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--qh-heading);
  text-wrap: balance;
}

.qh-h1 {
  font-family: var(--qh-font-display);
  font-size: clamp(28px, 1.8vw + 12px, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--qh-heading);
  text-wrap: balance;
}

.qh-h2 {
  font-family: var(--qh-font-display);
  font-size: clamp(24px, 1.4vw + 10px, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--qh-heading);
  text-wrap: balance;
}

.qh-h3 {
  font-family: var(--qh-font-display);
  font-size: clamp(22px, 0.8vw + 10px, 28px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--qh-heading);
  text-wrap: balance;
}

.qh-h4 {
  font-family: var(--qh-font-body);
  font-size: clamp(20px, 0.4vw + 10px, 22px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--qh-heading);
}

.qh-h5 {
  font-family: var(--qh-font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--qh-heading);
}

.qh-body-lg {
  font-family: var(--qh-font-body);
  font-size: clamp(18px, 0.3vw + 14px, 20px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--qh-body);
  text-wrap: pretty;
}

.qh-body {
  font-family: var(--qh-font-body);
  font-size: clamp(16px, 0.2vw + 14px, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--qh-body);
  text-wrap: pretty;
}

.qh-body-sm {
  font-family: var(--qh-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--qh-body);
  text-wrap: pretty;
}

.qh-caption {
  font-family: var(--qh-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--qh-body);
}

.qh-overline {
  font-family: var(--qh-font-display);
  font-size: clamp(11px, 0.1vw + 10px, 12px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qh-body);
}

/* Tabular numbers for stats/metrics — digits align in columns */
.qh-stat__number,
.qh-stats-strip__number,
.qh-featured-case-study__metric-value {
  font-feature-settings: 'tnum' 1, 'calt' 1;
}

/* Dark context: typography picks up remapped tokens from .is-dark-section (Section 10) */
/* Special overline treatment — accent-light instead of muted on dark backgrounds */
.is-dark-section .qh-overline {
  color: var(--qh-accent-light);
}

/* Gradient text utility — Stripe-style blue→purple headline fills */
.qh-gradient-text {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #60A5FA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.is-dark-section .qh-hero__headline .qh-display-1,
.is-dark-section .qh-hero__headline .qh-display-2 {
  background: linear-gradient(135deg, #ffffff 0%, #60A5FA 60%, #8B5CF6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================================================
   2. LAYOUT & CONTAINER
   ======================================================================== */

.qh-container {
  width: 100%;
  max-width: var(--qh-grid-max);
  margin: 0 auto;
  padding: 0 var(--qh-space-6);
}

.qh-grid {
  display: grid;
  grid-template-columns: repeat(var(--qh-grid-cols), 1fr);
  gap: var(--qh-space-6);
}

.qh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.qh-grid-3 { grid-template-columns: repeat(3, 1fr); }
.qh-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Modifier pattern: .qh-grid.is-N-col (used by page templates) */
.qh-grid.is-2-col { grid-template-columns: repeat(2, 1fr); }
.qh-grid.is-3-col { grid-template-columns: repeat(3, 1fr); }
.qh-grid.is-4-col { grid-template-columns: repeat(4, 1fr); }
.qh-grid.is-2x2  { grid-template-columns: repeat(2, 1fr); }
.qh-grid.is-8-4  { grid-template-columns: 8fr 4fr; gap: var(--qh-space-8); }

.qh-col-span-4 { grid-column: span 4; }
.qh-col-span-5 { grid-column: span 5; }
.qh-col-span-6 { grid-column: span 6; }
.qh-col-span-8 { grid-column: span 8; }
.qh-col-span-10 { grid-column: span 10; }
.qh-col-span-12 { grid-column: span 12; }

.qh-flex {
  display: flex;
  align-items: center;
}

.qh-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qh-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qh-flex-col {
  display: flex;
  flex-direction: column;
}

/* ========================================================================
   3. SECTIONS
   ======================================================================== */

.qh-section {
  padding: var(--qh-space-11) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.qh-section.is-dark-section {
  background: var(--qh-gradient-hero);
  color: var(--qh-white);
}

.qh-section.is-ghost {
  background: var(--qh-ghost);
}

.qh-section.is-narrow .qh-container {
  max-width: 680px;
}

.qh-section.is-wide .qh-container {
  max-width: 1048px;
}

.qh-section.is-white {
  background: var(--qh-white);
}

.qh-section.is-compact {
  padding: var(--qh-space-7) 0;
}

.qh-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--qh-space-8);
}

.qh-section-header .qh-overline {
  margin-bottom: var(--qh-space-4);
}

.qh-section-header .qh-h2 {
  margin-bottom: var(--qh-space-4);
}

/* ========================================================================
   5. HEROES — C04: Dark Gradient Hero
   ======================================================================== */

.qh-hero {
  position: relative;
  padding: var(--qh-space-13) 0 var(--qh-space-12);
  overflow: hidden;
}

.qh-hero.is-dark-section {
  background: var(--qh-gradient-hero);
  color: var(--qh-white);
}

.qh-hero.is-dark-section .qh-hero__headline,
.qh-hero.is-dark-section .qh-h1,
.qh-hero.is-dark-section .qh-h2,
.qh-hero.is-dark-section .qh-display-1,
.qh-hero.is-dark-section .qh-display-2 {
  color: var(--qh-white);
}

.qh-hero.is-dark-section .qh-hero__subheadline {
  color: var(--qh-body-dark);
}

.qh-hero.is-dark-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--qh-gradient-radial);
  pointer-events: none;
}

/* Auto-detect dark hero via mesh gradient child (builder convention) */
.qh-hero:has(.qh-hero__mesh) {
  background: var(--qh-gradient-hero);
  color: var(--qh-white);
}
.qh-hero:has(.qh-hero__mesh) .qh-hero__headline,
.qh-hero:has(.qh-hero__mesh) .qh-h1,
.qh-hero:has(.qh-hero__mesh) .qh-h2,
.qh-hero:has(.qh-hero__mesh) .qh-display-1,
.qh-hero:has(.qh-hero__mesh) .qh-display-2 {
  color: var(--qh-white);
}
.qh-hero:has(.qh-hero__mesh) .qh-hero__subheadline {
  color: var(--qh-body-dark);
}
.qh-hero:has(.qh-hero__mesh)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--qh-gradient-radial);
  pointer-events: none;
}

/* Hero mesh gradient layer */
.qh-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background:
    radial-gradient(ellipse at 20% 80%, oklch(0.45 0.2 290 / 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, oklch(0.5 0.18 340 / 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, oklch(0.4 0.15 260 / 0.3) 0%, transparent 60%);
  animation: qh-hero-mesh 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes qh-hero-mesh {
  0%   { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1.05); }
}

.qh-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.qh-hero__content.is-centered {
  margin: 0 auto;
  text-align: center;
}

.qh-hero__overline {
  margin-bottom: var(--qh-space-4);
}

.is-dark-section .qh-hero__overline {
  color: var(--qh-accent-light);
}

.qh-hero__headline {
  margin-bottom: var(--qh-space-5);
}

.qh-hero__subheadline {
  max-width: 560px;
  margin-bottom: var(--qh-space-6);
}

.qh-hero__content.is-centered .qh-hero__subheadline {
  margin-inline: auto;
}

.qh-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--qh-space-5);
  flex-wrap: wrap;
}

.qh-hero__content.is-centered .qh-hero__actions {
  justify-content: center;
}

.qh-hero__image {
  position: relative;
  z-index: 1;
  max-width: 640px;
  border-radius: var(--qh-radius-md);
  box-shadow: 0 24px 48px oklch(0 0 0 / 0.3);
  will-change: transform;
}

/* Two-column hero layout */
.qh-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-10);
  align-items: center;
}

/* Hero left column — copy */
.qh-hero__copy {
  position: relative;
  z-index: 2;
}
.qh-hero__sub {
  color: oklch(1 0 0 / 0.7);
  margin-bottom: var(--qh-space-6);
}

/* Hero trust badges row */
.qh-hero__trust {
  display: flex;
  align-items: center;
  gap: var(--qh-space-4);
  margin-top: var(--qh-space-6);
  font-size: 14px;
  color: oklch(1 0 0 / 0.6);
}
.qh-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qh-hero__trust-icon {
  width: 16px;
  height: 16px;
  color: var(--qh-accent);
  flex-shrink: 0;
}
.qh-hero__trust-value {
  font-weight: 700;
  color: var(--qh-white);
}
.qh-hero__trust-sep {
  width: 1px;
  height: 16px;
  background: oklch(1 0 0 / 0.15);
}

/* ── Hero right column — Device composition ── */
.qh-hero__media {
  position: relative;
  z-index: 1;
  perspective: 1200px;
  min-height: 420px;
}

/* Desktop browser frame */
.qh-hero__desktop {
  background: oklch(0.14 0.04 265);
  border-radius: var(--qh-radius-md);
  overflow: hidden;
  box-shadow:
    0 25px 60px oklch(0 0 0 / 0.4),
    0 0 0 1px oklch(1 0 0 / 0.06);
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transition: transform var(--qh-duration-premium) var(--qh-ease-spring);
}
.qh-hero__desktop:hover {
  transform: perspective(1200px) rotateY(0) rotateX(0);
}

/* macOS window bar */
.qh-hero__window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: oklch(0.12 0.03 265);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.12);
}
.qh-hero__window-dot:nth-child(1) { background: var(--qh-window-close); }
.qh-hero__window-dot:nth-child(2) { background: var(--qh-window-minimize); }
.qh-hero__window-dot:nth-child(3) { background: var(--qh-window-maximize); }
.qh-hero__window-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: oklch(1 0 0 / 0.4);
  letter-spacing: 0.02em;
}

/* Window body */
.qh-hero__window-body {
  padding: 0;
}

/* Dashboard layout */
.qh-hero__dashboard {
  display: grid;
  grid-template-columns: 44px 1fr;
}

/* Sidebar */
.qh-hero__dash-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  background: oklch(0.11 0.03 265);
  border-right: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__dash-sidebar-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--qh-radius-sm);
  color: oklch(1 0 0 / 0.35);
  transition: all var(--qh-duration-fast) var(--qh-ease);
}
.qh-hero__dash-sidebar-icon:hover {
  background: oklch(1 0 0 / 0.06);
  color: oklch(1 0 0 / 0.6);
}
.qh-hero__dash-sidebar-icon.is-active {
  background: oklch(from var(--qh-accent) l c h / 0.15);
  color: var(--qh-accent);
}

/* Main content area */
.qh-hero__dash-main {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Header with tabs */
.qh-hero__dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qh-hero__dash-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--qh-white);
}
.qh-hero__dash-tabs {
  display: flex;
  gap: 2px;
  background: oklch(1 0 0 / 0.05);
  border-radius: var(--qh-radius-sm);
  padding: 2px;
}
.qh-hero__dash-tab {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--qh-radius-sm);
  color: oklch(1 0 0 / 0.4);
  cursor: pointer;
  transition: all var(--qh-duration-fast) var(--qh-ease);
}
.qh-hero__dash-tab.is-active {
  background: oklch(1 0 0 / 0.1);
  color: var(--qh-white);
  font-weight: 600;
}

/* Stat cards row */
.qh-hero__dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.qh-hero__dash-stat {
  background: oklch(1 0 0 / 0.04);
  border-radius: var(--qh-radius);
  padding: 10px;
  border: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__dash-stat-label {
  font-size: 9px;
  color: oklch(1 0 0 / 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.qh-hero__dash-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--qh-white);
  font-feature-settings: 'tnum' 1;
}
.qh-hero__dash-stat-trend {
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.qh-hero__dash-stat-trend.is-up {
  color: var(--qh-success);
}
.qh-hero__dash-stat-trend.is-down {
  color: var(--qh-success);
}

/* Charts row */
.qh-hero__dash-charts-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}
.qh-hero__dash-chart {
  background: oklch(1 0 0 / 0.03);
  border-radius: var(--qh-radius);
  padding: 10px;
  border: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__dash-chart-label {
  font-size: 10px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.5);
  margin-bottom: 8px;
}
.qh-hero__dash-chart-line {
  width: 100%;
  height: 60px;
  display: block;
}
.qh-hero__dash-donut-wrap {
  background: oklch(1 0 0 / 0.03);
  border-radius: var(--qh-radius);
  padding: 10px;
  border: 1px solid oklch(1 0 0 / 0.06);
  text-align: center;
}
.qh-hero__dash-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.qh-hero__dash-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: oklch(1 0 0 / 0.5);
}
.qh-hero__dash-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bottom 2-column: Activity + Audits */
.qh-hero__dash-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qh-hero__dash-activity {
  background: oklch(1 0 0 / 0.03);
  border-radius: var(--qh-radius);
  padding: 10px;
  border: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__dash-activity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.04);
}
.qh-hero__dash-activity-row:last-child { border-bottom: none; }
.qh-hero__dash-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qh-hero__dash-activity-text {
  font-size: 10px;
  color: oklch(1 0 0 / 0.6);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qh-hero__dash-activity-time {
  font-size: 9px;
  color: oklch(1 0 0 / 0.3);
  flex-shrink: 0;
}

/* Upcoming audits */
.qh-hero__dash-audits {
  background: oklch(1 0 0 / 0.03);
  border-radius: var(--qh-radius);
  padding: 10px;
  border: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__dash-audit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.04);
}
.qh-hero__dash-audit-row:last-child { border-bottom: none; }
.qh-hero__dash-audit-name {
  font-size: 10px;
  color: oklch(1 0 0 / 0.6);
  flex: 1;
}
.qh-hero__dash-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--qh-radius-sm);
  flex-shrink: 0;
}
.qh-hero__dash-badge.is-info {
  background: oklch(from var(--qh-accent) l c h / 0.15);
  color: var(--qh-accent);
}
.qh-hero__dash-badge.is-warning {
  background: oklch(from var(--qh-warning) l c h / 0.15);
  color: var(--qh-warning);
}
.qh-hero__dash-badge.is-success {
  background: oklch(from var(--qh-success) l c h / 0.15);
  color: var(--qh-success);
}

/* Compliance by site — progress bars */
.qh-hero__dash-sites {
  background: oklch(1 0 0 / 0.03);
  border-radius: var(--qh-radius);
  padding: 10px;
  border: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__dash-site-row {
  display: grid;
  grid-template-columns: 50px 1fr 30px;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
}
.qh-hero__dash-site-name {
  font-size: 10px;
  color: oklch(1 0 0 / 0.5);
}
.qh-hero__dash-bar {
  height: 6px;
  background: oklch(1 0 0 / 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.qh-hero__dash-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.qh-hero__dash-bar-fill.is-success {
  background: var(--qh-success);
}
.qh-hero__dash-bar-fill.is-warning {
  background: var(--qh-warning);
}
.qh-hero__dash-site-pct {
  font-size: 10px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.6);
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

/* ── Mobile phone overlay ── */
.qh-hero__mobile {
  position: absolute;
  bottom: -20px;
  left: -30px;
  width: 200px;
  background: oklch(0.14 0.04 265);
  border-radius: var(--qh-radius-xl);
  overflow: hidden;
  box-shadow:
    0 25px 60px oklch(0 0 0 / 0.5),
    0 0 0 1px oklch(1 0 0 / 0.08);
  z-index: 3;
  transform: perspective(1200px) rotateY(3deg);
  transition: transform var(--qh-duration-premium) var(--qh-ease-spring);
}
.qh-hero__mobile:hover {
  transform: perspective(1200px) rotateY(0);
}
.qh-hero__mobile-notch {
  width: 80px;
  height: 5px;
  background: oklch(0.08 0.02 265);
  border-radius: 3px;
  margin: 8px auto 0;
}
.qh-hero__mobile-body {
  padding: 12px 14px 16px;
}
.qh-hero__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.qh-hero__mobile-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--qh-white);
}
.qh-hero__mobile-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--qh-accent), oklch(0.5 0.18 340));
}

/* Compliance ring */
.qh-hero__mobile-ring-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.qh-hero__mobile-ring-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.qh-hero__mobile-ring {
  width: 100%;
  height: 100%;
}
.qh-hero__mobile-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--qh-white);
}
.qh-hero__mobile-ring-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qh-hero__mobile-ring-label {
  font-size: 11px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.6);
}
.qh-hero__mobile-ring-sub {
  font-size: 10px;
  font-weight: 600;
}

/* Mobile stats */
.qh-hero__mobile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.qh-hero__mobile-stat {
  background: oklch(1 0 0 / 0.04);
  border-radius: var(--qh-radius);
  padding: 8px;
  border: 1px solid oklch(1 0 0 / 0.06);
}
.qh-hero__mobile-stat-label {
  font-size: 9px;
  color: oklch(1 0 0 / 0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qh-hero__mobile-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--qh-white);
  font-feature-settings: 'tnum' 1;
}

/* Mobile section label */
.qh-hero__mobile-section-label {
  font-size: 10px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* Mobile action list */
.qh-hero__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qh-hero__mobile-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: oklch(1 0 0 / 0.03);
  border-radius: var(--qh-radius-sm);
}
.qh-hero__mobile-list-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qh-hero__mobile-list-text {
  font-size: 10px;
  color: oklch(1 0 0 / 0.6);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qh-hero__mobile-list-badge {
  font-size: 8px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Hero diagonal slice ── */
.qh-hero__slice {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  overflow: hidden;
  z-index: 2;
}
.qh-hero__slice-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--qh-white);
  clip-path: polygon(0 100%, 100% 40%, 100% 100%);
}
.qh-hero__slice-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    currentColor 3px,
    currentColor 4px
  );
}

/* C05: Light Hero */
.qh-hero.is-light {
  background: var(--qh-white);
}

.qh-hero.is-light .qh-hero__headline {
  color: var(--qh-heading);
}

.qh-hero.is-light .qh-hero__subheadline {
  color: var(--qh-body);
}

/* C06: Split Form Hero */
.qh-hero.is-split {
  background: var(--qh-gradient-hero);
}

.qh-hero.is-split .qh-hero__grid {
  grid-template-columns: 55fr 45fr;
}

.qh-hero__form-card {
  background: var(--qh-white);
  padding: var(--qh-space-8);
  border-radius: var(--qh-radius-lg);
  box-shadow: var(--qh-shadow-lg);
}

/* ========================================================================
   6. CONTENT COMPONENTS
   ======================================================================== */

/* C07: Feature Row */
.qh-feature-row {
  display: block;
  grid-template-columns: none;
}

.qh-feature-row.is-reversed {
  grid-template-columns: none;
}

.qh-feature-row.is-reversed .qh-feature-row__text {
  order: 2;
}

.qh-feature-row.is-reversed .qh-feature-row__media {
  order: 1;
}

.qh-feature-row__text .qh-overline {
  margin-bottom: var(--qh-space-3);
}

.qh-feature-row__text .qh-h2 {
  margin-bottom: var(--qh-space-4);
}

.qh-feature-row__text .qh-body {
  margin-bottom: var(--qh-space-5);
}

.qh-feature-row__media {
  overflow: hidden;
  border-radius: var(--qh-radius-md);
  box-shadow: var(--qh-shadow-md);
}
.qh-feature-row__media img {
  width: 100%;
  display: block;
  will-change: transform;
  transition: transform var(--qh-duration-fast) linear;
}

.qh-feature-row__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-5);
}

.qh-feature-row__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--qh-space-3);
  font-size: 16px;
  color: var(--qh-body);
}

.qh-feature-row__list li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--qh-success);
  margin-top: 2px;
}

/* C08: Feature Grid */
.qh-feature-grid {
  display: block;
  grid-template-columns: none;
}

/* Column variants apply to __grid, not the section */

.qh-feature-grid__item {
  position: relative;
  padding: var(--qh-space-5);
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  transition: transform var(--qh-duration-slow) var(--qh-ease-bounce),
              box-shadow 300ms var(--qh-ease),
              border-color 300ms var(--qh-ease);
}
.qh-feature-grid__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--qh-gradient-accent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--qh-duration-slow) var(--qh-ease);
  pointer-events: none;
}

.qh-feature-grid__item:hover::before { opacity: 1; }
.qh-feature-grid__item:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow:
    0 8px 24px color-mix(in oklch, var(--qh-dark) 8%, transparent),
    0 24px 48px color-mix(in oklch, var(--qh-dark) 6%, transparent);
}

.is-dark-section .qh-feature-grid__item {
  background: oklch(1 0 0 / 0.04);
  border-color: oklch(1 0 0 / 0.08);
}

.is-dark-section .qh-feature-grid__item:hover {
  background: oklch(1 0 0 / 0.06);
  border-color: oklch(1 0 0 / 0.15);
  box-shadow:
    0 8px 24px oklch(0 0 0 / 0.2),
    0 24px 48px oklch(0 0 0 / 0.15);
}

.qh-feature-grid__icon {
  width: 48px;
  height: 48px;
  color: var(--qh-accent);
  margin-bottom: var(--qh-space-4);
}

.is-dark-section .qh-feature-grid__icon {
  color: var(--qh-accent-light);
}

.qh-feature-grid__item .qh-h4 {
  margin-bottom: var(--qh-space-2);
}

/* C09: Stats Strip */
.qh-stats-strip {
  padding: var(--qh-space-8) 0;
}

.qh-stats-strip.is-dark-section {
  background: var(--qh-gradient-stats);
  position: relative;
  overflow: hidden;
}
.qh-stats-strip.is-dark-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 50%, color-mix(in oklch, var(--qh-accent) 12%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 50%, oklch(0.45 0.14 305 / 0.1) 0%, transparent 50%);
  animation: qh-stats-bg-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qh-stats-bg-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.qh-stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.qh-stats-strip__item {
  position: relative;
  padding: 0 var(--qh-space-5);
}

.qh-stats-strip__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: oklch(1 0 0 / 0.1);
}

.qh-stats-strip:not(.is-dark-section) .qh-stats-strip__item:not(:last-child)::after {
  background: var(--qh-border);
}

.qh-stats-strip__number {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--qh-white);
}
.qh-stats-strip.is-dark-section .qh-stats-strip__number {
  background: linear-gradient(135deg, #fff 30%, var(--qh-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.qh-stats-strip:not(.is-dark-section) .qh-stats-strip__number {
  color: var(--qh-accent);
}

.qh-stats-strip__label {
  font-size: 16px;
  color: oklch(1 0 0 / 0.6);
  margin-top: var(--qh-space-2);
}

.qh-stats-strip:not(.is-dark-section) .qh-stats-strip__label {
  color: var(--qh-body);
}

/* Builder-convention stats (short-name variant of stats-strip) */
.qh-stats {
  padding: var(--qh-space-8) 0;
  background: var(--qh-gradient-stats);
  position: relative;
  overflow: hidden;
}
.qh-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 50%, color-mix(in oklch, var(--qh-accent) 12%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 50%, oklch(0.45 0.14 305 / 0.1) 0%, transparent 50%);
  animation: qh-stats-bg-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
.qh-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.qh-stats__item {
  position: relative;
  padding: 0 var(--qh-space-5);
}
.qh-stats__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: oklch(1 0 0 / 0.1);
}
.qh-stats__number {
  font-size: clamp(32px, 2.6vw + 12px, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1, 'calt' 1;
  background: linear-gradient(135deg, #fff 30%, var(--qh-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.qh-stats__label {
  font-size: 16px;
  color: oklch(1 0 0 / 0.6);
  margin-top: var(--qh-space-2);
}

/* C10: Logo Marquee */
.qh-logo-marquee {
  padding: var(--qh-space-8) 0;
  overflow: hidden;
}

.qh-logo-marquee__caption {
  text-align: center;
  margin-bottom: var(--qh-space-5);
}

.qh-logo-marquee__track {
  display: flex;
  gap: var(--qh-space-10);
  animation: qh-marquee-scroll linear infinite;
}

.qh-logo-marquee__logo {
  height: 32px;
  flex-shrink: 0;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity var(--qh-duration) var(--qh-ease),
              filter var(--qh-duration) var(--qh-ease);
}

.qh-logo-marquee__logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

.qh-logo-marquee__track:hover {
  animation-play-state: paused;
}

@keyframes qh-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-width, 50%))); }
}

/* C11: Testimonial Carousel — see HOMEPAGE VISUAL RHYTHM section below */

/* C12: Testimonial Grid */
.qh-testimonial-grid {
  display: block;
  grid-template-columns: none;
}

.qh-testimonial-grid__card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
  box-shadow:
    0 1px 3px color-mix(in oklch, var(--qh-dark) 4%, transparent),
    0 4px 12px color-mix(in oklch, var(--qh-dark) 6%, transparent);
  transition: transform var(--qh-duration-slow) var(--qh-ease-bounce),
              box-shadow 300ms var(--qh-ease),
              border-color 300ms var(--qh-ease);
}

.qh-testimonial-grid__card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklch, var(--qh-accent) 15%, transparent);
  box-shadow:
    0 2px 4px color-mix(in oklch, var(--qh-dark) 4%, transparent),
    0 12px 32px color-mix(in oklch, var(--qh-dark) 10%, transparent);
}

.qh-testimonial-grid__card:active { transform: scale(0.98); }

.qh-testimonial-grid__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--qh-space-3);
  color: var(--qh-star);
}

.qh-testimonial-grid__text {
  font-size: 18px;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-5);
}

.qh-testimonial-grid__footer {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
}

.qh-testimonial-grid__logo {
  height: 24px;
  opacity: 0.6;
}

/* C13: Comparison Table */
.qh-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.qh-comparison-table thead {
  position: sticky;
  top: 72px;
  z-index: 10;
}

.qh-comparison-table th {
  background: var(--qh-dark);
  color: var(--qh-white);
  font-weight: 600;
  font-size: 18px;
  padding: var(--qh-space-4);
  text-align: start;
}

.qh-comparison-table th.is-highlighted {
  border-top: 3px solid var(--qh-accent);
}

.qh-comparison-table td {
  padding: var(--qh-space-4);
  border-bottom: 1px solid var(--qh-border);
  color: var(--qh-body);
}

.qh-comparison-table td:not(:first-child),
.qh-comparison-table th:not(:first-child) {
  text-align: center;
}

.qh-comparison-table tr:nth-child(even) td {
  background: var(--qh-table-stripe);
}

.qh-comparison-table .qh-check {
  color: var(--qh-success);
}

.qh-comparison-table .qh-cross {
  color: var(--qh-border);
}

/* C14: Pricing Cards */
.qh-pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--qh-space-6);
  align-items: start;
}

.qh-pricing-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-xl);
  padding: var(--qh-space-7);
  transition: transform var(--qh-duration) var(--qh-ease),
              box-shadow var(--qh-duration) var(--qh-ease);
}

.qh-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--qh-shadow-lg);
}

.qh-pricing-card:active { transform: scale(0.98); }

.qh-pricing-card.is-featured {
  background: var(--qh-dark);
  color: var(--qh-white);
  border: none;
  box-shadow: var(--qh-shadow-dark);
}

.qh-pricing-card__badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--qh-accent);
  color: var(--qh-white);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--qh-radius-full);
  margin-bottom: var(--qh-space-4);
}

.qh-pricing-card__name {
  font-size: 22px;
  font-weight: 600;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-3);
}

.qh-pricing-card.is-featured .qh-pricing-card__name {
  color: var(--qh-white);
}

.qh-pricing-card__price {
  font-size: clamp(36px, 2.3vw + 12px, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--qh-heading);
}

.qh-pricing-card.is-featured .qh-pricing-card__price {
  color: var(--qh-white);
}

.qh-pricing-card__period {
  font-size: 16px;
  font-weight: 400;
  color: var(--qh-body);
}

.qh-pricing-card__description {
  font-size: 16px;
  color: var(--qh-body);
  margin: var(--qh-space-4) 0 var(--qh-space-5);
}

.qh-pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-6);
}

.qh-pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--qh-space-3);
  font-size: 16px;
  color: var(--qh-body);
}

.qh-pricing-card__features li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: var(--qh-success);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}

.qh-pricing-card.is-featured .qh-pricing-card__features li::before {
  background: var(--qh-accent-light);
}

.qh-pricing-card__features li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--qh-success);
}

.qh-pricing-card.is-featured .qh-pricing-card__features li {
  color: oklch(1 0 0 / 0.7);
}

.qh-pricing-card.is-featured .qh-pricing-card__features li svg {
  color: var(--qh-accent-light);
}

.qh-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-8);
}

.qh-pricing-toggle__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--qh-body);
}

.qh-pricing-toggle__label.is-active {
  color: var(--qh-heading);
}

.qh-pricing-toggle__switch {
  width: 48px;
  height: 24px;
  background: var(--qh-border);
  border-radius: var(--qh-radius-md);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background var(--qh-duration) var(--qh-ease);
}

.qh-pricing-toggle__switch.is-active {
  background: var(--qh-accent);
}

.qh-pricing-toggle__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--qh-white);
  border-radius: 50%;
  transition: transform var(--qh-duration) var(--qh-ease);
}

.qh-pricing-toggle__switch.is-active::after {
  transform: translateX(24px);
}

.qh-pricing-toggle__badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--qh-success);
  background: var(--qh-success-bg);
  padding: 2px 8px;
  border-radius: var(--qh-radius-full);
}

/* C15: Accordion / FAQ */
.qh-accordion {
  max-width: 832px;
  margin: 0 auto;
}

.qh-accordion__item {
  border-bottom: 1px solid var(--qh-border);
}

.qh-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--qh-space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  color: var(--qh-heading);
  text-align: start;
  transition: color var(--qh-duration) var(--qh-ease);
}

.qh-accordion__trigger:hover,
.qh-accordion__trigger[aria-expanded="true"] {
  color: var(--qh-accent);
}

.qh-accordion__trigger:active {
  transform: scale(0.99);
}

.qh-accordion__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--qh-duration) var(--qh-ease);
}

.qh-accordion__trigger[aria-expanded="true"] .qh-accordion__icon {
  transform: rotate(180deg);
}

.qh-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--qh-duration-slow) var(--qh-ease);
}

.qh-accordion__panel.is-open {
  max-height: 500px;
}

.qh-accordion__answer {
  padding: 0 0 var(--qh-space-4);
  font-size: 18px;
  line-height: 1.6;
  color: var(--qh-body);
}

/* C16: Tab Set */
.qh-tabs__bar {
  position: relative;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--qh-border);
  overflow-x: auto;
}

.qh-tabs__button {
  padding: var(--qh-space-3) var(--qh-space-5);
  font-size: 16px;
  font-weight: 500;
  color: var(--qh-body);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--qh-duration) var(--qh-ease),
              border-color var(--qh-duration) var(--qh-ease);
}

.qh-tabs__button:hover {
  color: var(--qh-heading);
}

.qh-tabs__button[aria-selected="true"] {
  color: var(--qh-accent);
  border-bottom-color: var(--qh-accent);
}

.qh-tabs__button:active {
  transform: scale(0.98);
}

.qh-tabs__panel {
  display: none;
  padding: var(--qh-space-6) 0;
  animation: qh-fade-in var(--qh-duration) var(--qh-ease);
}

.qh-tabs__panel.is-active {
  display: block;
}

/* C17: Callout Box */
.qh-callout {
  padding: var(--qh-space-5);
  border-radius: var(--qh-radius-md);
  display: flex;
  gap: var(--qh-space-3);
}

.qh-callout__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.qh-callout__text {
  font-size: 16px;
  color: var(--qh-heading);
  line-height: 1.5;
}

.qh-callout.is-info {
  background: var(--qh-callout-info-bg);
  border-inline-start: 4px solid var(--qh-info);
}

.qh-callout.is-info .qh-callout__icon { color: var(--qh-info); }

.qh-callout.is-tip {
  background: var(--qh-callout-tip-bg);
  border-inline-start: 4px solid var(--qh-success);
}

.qh-callout.is-tip .qh-callout__icon { color: var(--qh-success); }

.qh-callout.is-warning {
  background: var(--qh-callout-warn-bg);
  border-inline-start: 4px solid var(--qh-warning);
}

.qh-callout.is-warning .qh-callout__icon { color: var(--qh-warning); }

.qh-callout.is-important {
  background: var(--qh-callout-important-bg);
  border-inline-start: 4px solid var(--qh-accent);
}

.qh-callout.is-important .qh-callout__icon { color: var(--qh-accent); }

/* C18: Code / Data Block */
.qh-code-block {
  background: var(--qh-code-block-bg);
  border-radius: var(--qh-radius-md);
  overflow: hidden;
}

.qh-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qh-space-3) var(--qh-space-5);
  border-bottom: 1px solid oklch(1 0 0 / 0.1);
}

.qh-code-block__dots {
  display: flex;
  gap: 6px;
}

.qh-code-block__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.15);
}

.qh-code-block__filename {
  font-family: var(--qh-font-mono);
  font-size: 13px;
  color: oklch(1 0 0 / 0.5);
}

.qh-code-block__copy {
  background: none;
  border: 1px solid oklch(1 0 0 / 0.15);
  border-radius: var(--qh-radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: oklch(1 0 0 / 0.6);
  cursor: pointer;
  transition: border-color var(--qh-duration) var(--qh-ease),
              color var(--qh-duration) var(--qh-ease);
}

.qh-code-block__copy:hover {
  border-color: oklch(1 0 0 / 0.4);
  color: var(--qh-white);
}

.qh-code-block__body {
  padding: var(--qh-space-5);
  overflow-x: auto;
}

.qh-code-block__body pre {
  font-family: var(--qh-font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--qh-border);
  margin: 0;
}

.qh-code-block__line-numbers {
  float: left;
  text-align: end;
  padding-inline-end: var(--qh-space-4);
  color: oklch(1 0 0 / 0.3);
  user-select: none;
}

/* ========================================================================
   7. CARDS — C19: Resource Card
   ======================================================================== */

.qh-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--qh-shadow);
  transition: transform var(--qh-duration-slow) var(--qh-ease-spring),
              box-shadow var(--qh-duration-slow) var(--qh-ease),
              border-color var(--qh-duration-slow) var(--qh-ease);
}

/* Gradient top border — fades in on hover */
.qh-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--qh-gradient-accent);
  opacity: 0;
  transition: opacity var(--qh-duration-slow) var(--qh-ease);
  z-index: 1;
}

.qh-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--qh-shadow-lg);
}

.qh-card:active { transform: scale(0.98); }

.qh-card:hover::before {
  opacity: 1;
}

/* C19: Resource Card */
.qh-card.is-resource .qh-card__thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.qh-card.is-resource .qh-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--qh-duration-slow) var(--qh-ease);
}

.qh-card.is-resource:hover .qh-card__thumbnail img {
  transform: scale(1.02);
}

.qh-card__body {
  padding: var(--qh-space-5);
}

.qh-card__category {
  margin-bottom: var(--qh-space-2);
}

.qh-card__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qh-card__description {
  font-size: 16px;
  color: var(--qh-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--qh-space-4);
}

.qh-card__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--qh-space-1);
}

.qh-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* C20: Case Study Card */
.qh-card.is-case-study {
  padding: var(--qh-space-6);
}

.qh-card.is-case-study:hover {
  border-color: var(--qh-accent);
}

.qh-card.is-case-study .qh-card__logo {
  height: 48px;
  filter: grayscale(1);
  opacity: 0.6;
  margin-bottom: var(--qh-space-4);
}

.qh-card.is-case-study .qh-card__quote {
  font-size: 16px;
  font-style: italic;
  color: var(--qh-heading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--qh-space-5);
}

.qh-card.is-case-study .qh-card__metric {
  margin-bottom: var(--qh-space-4);
}

.qh-card.is-case-study .qh-card__metric-number {
  font-size: 28px;
  font-weight: 600;
  color: var(--qh-heading);
}

.qh-card.is-case-study .qh-card__metric-label {
  font-size: 14px;
  color: var(--qh-body);
}

/* C21: Module Card */
.qh-card.is-module {
  background: var(--qh-ghost);
  border: 1px solid transparent;
  padding: var(--qh-space-6);
  text-align: start;
}

.qh-card.is-module:hover {
  background: var(--qh-white);
  border-color: var(--qh-border);
}

.qh-card.is-module .qh-card__icon {
  width: 48px;
  height: 48px;
  color: var(--qh-accent);
  margin-bottom: var(--qh-space-4);
}

.qh-card.is-ghost {
  background: transparent;
  border: 1px dashed var(--qh-border);
  box-shadow: none;
}

.qh-card.is-ghost:hover {
  transform: none;
  border-color: var(--qh-accent);
}

.qh-card.is-bordered {
  border: 2px solid var(--qh-border);
}

.qh-card__icon {
  width: 48px;
  height: 48px;
  color: var(--qh-accent);
  margin-bottom: var(--qh-space-4);
}

/* C22: Author Byline */
.qh-author-byline {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
}

.qh-author-byline__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.qh-author-byline__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--qh-heading);
}

.qh-author-byline__role {
  font-size: 14px;
  color: var(--qh-body);
}

/* ========================================================================
   8. CTA SECTIONS — C23: Dark CTA
   ======================================================================== */

.qh-cta-section {
  padding: var(--qh-space-12) 0;
  text-align: center;
}

.qh-cta-section.is-dark-section {
  background: var(--qh-gradient-cta);
  position: relative;
}

.qh-cta-section.is-dark-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--qh-gradient-radial);
  pointer-events: none;
}

.qh-cta-section__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.qh-cta-section .qh-h2 {
  margin-bottom: var(--qh-space-4);
}

.qh-cta-section .qh-body-lg {
  margin-bottom: var(--qh-space-6);
}

/* C24: Light CTA */
.qh-cta-section.is-light {
  background: var(--qh-ghost);
}

.qh-cta-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-xl);
  padding: var(--qh-space-10) var(--qh-space-8);
  max-width: 800px;
  margin: 0 auto;
}

/* ========================================================================
   9. UI COMPONENTS — C25: Breadcrumb
   ======================================================================== */

.qh-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--qh-space-2);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--qh-space-4);
}

.qh-breadcrumb__link {
  color: var(--qh-body);
  text-decoration: none;
}

.qh-breadcrumb__link:hover {
  color: var(--qh-accent);
}

.qh-breadcrumb__separator {
  color: var(--qh-border);
}

.qh-breadcrumb__current {
  color: var(--qh-heading);
}

/* C26: Badge / Tag */
.qh-badge {
  display: inline-block;
  padding: var(--qh-space-1) var(--qh-space-3);
  border-radius: var(--qh-radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qh-badge.is-default {
  background: var(--qh-ghost);
  color: var(--qh-body);
}

.qh-badge.is-accent {
  background: color-mix(in oklch, var(--qh-accent) 10%, transparent);
  color: var(--qh-accent);
}

.qh-badge.is-success {
  background: var(--qh-success-bg);
  color: var(--qh-success);
}

.qh-badge.is-warning {
  background: var(--qh-warning-bg);
  color: var(--qh-warning);
}

.qh-badge.is-new {
  background: var(--qh-accent);
  color: var(--qh-white);
}

.qh-badge.is-primary {
  background: color-mix(in oklch, var(--qh-accent) 10%, transparent);
  color: var(--qh-accent);
}

.qh-badge.is-neutral {
  background: var(--qh-ghost);
  color: var(--qh-body);
}

.qh-badge.is-info {
  background: var(--qh-info-bg);
  color: var(--qh-info);
}

.qh-badge.is-small {
  padding: 2px var(--qh-space-2);
  font-size: 11px;
}

/* C27: Form Components */
.qh-form-group {
  margin-bottom: var(--qh-space-5);
}

.qh-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-2);
}

.qh-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--qh-space-4);
  font-family: var(--qh-font);
  font-size: 16px;
  color: var(--qh-heading);
  background: var(--qh-ghost);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
  transition: border-color var(--qh-duration) var(--qh-ease),
              box-shadow var(--qh-duration) var(--qh-ease);
}

.qh-input:active {
  transform: scale(0.995);
}

.qh-input:focus {
  border-color: var(--qh-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--qh-accent) 10%, transparent);
  outline: none;
}

.qh-input.is-error {
  border-color: var(--qh-error);
  box-shadow: 0 0 0 3px var(--qh-error-bg);
}

.qh-input.is-success {
  border-color: var(--qh-success);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--qh-success) 10%, transparent);
}

.qh-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--qh-space-3) var(--qh-space-4);
  font-family: var(--qh-font);
  font-size: 16px;
  color: var(--qh-heading);
  background: var(--qh-ghost);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
  resize: vertical;
  transition: border-color var(--qh-duration) var(--qh-ease),
              box-shadow var(--qh-duration) var(--qh-ease);
}

.qh-textarea:focus {
  border-color: var(--qh-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--qh-accent) 10%, transparent);
  outline: none;
}

.qh-select {
  width: 100%;
  height: 48px;
  padding: 0 var(--qh-space-4);
  font-family: var(--qh-font);
  font-size: 16px;
  color: var(--qh-heading);
  background: var(--qh-ghost);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-inline-end: 40px;
  transition: border-color var(--qh-duration-fast) var(--qh-ease),
              box-shadow var(--qh-duration-fast) var(--qh-ease);
}

.qh-select:focus {
  border-color: var(--qh-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--qh-accent) 10%, transparent);
  outline: none;
}

.qh-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-sm);
  appearance: none;
  cursor: pointer;
  transition: background var(--qh-duration) var(--qh-ease),
              border-color var(--qh-duration) var(--qh-ease);
}

.qh-checkbox:checked {
  background: var(--qh-accent);
  border-color: var(--qh-accent);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.qh-error-message {
  font-size: 14px;
  color: var(--qh-error);
  margin-top: var(--qh-space-1);
}

/* :has() — parent-aware state detection (no JS needed) */
.qh-form-group:has(:focus) .qh-label {
  color: var(--qh-accent);
  transition: color var(--qh-duration-fast) var(--qh-ease);
}

.qh-form-group:has(.is-error) .qh-label {
  color: var(--qh-error);
}

.qh-form-group:has(:user-invalid) .qh-label {
  color: var(--qh-error);
}

/* Dark section form overrides */
.is-dark-section .qh-input,
.is-dark-section .qh-textarea,
.is-dark-section .qh-select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--qh-white);
}

.is-dark-section .qh-input::placeholder,
.is-dark-section .qh-textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.is-dark-section .qh-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E");
}

/* Buttons */
.qh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-2);
  padding: var(--qh-space-3) var(--qh-space-6);
  font-family: var(--qh-font);
  font-size: 18px;
  font-weight: 600;
  border-radius: var(--qh-radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--qh-duration) var(--qh-ease),
              transform var(--qh-duration) var(--qh-ease-bounce),
              box-shadow var(--qh-duration) var(--qh-ease),
              border-color var(--qh-duration) var(--qh-ease);
}

.qh-btn:hover {
  transform: translateY(-2px);
}

.qh-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Arrow/icon slide-right on hover */
.qh-btn svg,
.qh-btn .qh-btn__arrow {
  transition: transform var(--qh-duration) var(--qh-ease);
}

.qh-btn:hover svg,
.qh-btn:hover .qh-btn__arrow {
  transform: translateX(4px);
}

/* Primary — gradient background (accent → secondary) */
.qh-btn.is-primary {
  background: var(--qh-gradient-accent);
  color: var(--qh-white);
  box-shadow: 0 4px 14px color-mix(in oklch, var(--qh-accent) 25%, transparent),
              inset 0 1px 0 oklch(1 0 0 / 0.15);
}

.qh-btn.is-primary:hover {
  box-shadow: 0 4px 16px color-mix(in oklch, var(--qh-accent) 35%, transparent);
}

/* Secondary — outline on light sections */
.qh-btn.is-secondary {
  background: transparent;
  color: var(--qh-heading);
  border: 1.5px solid var(--qh-border);
}

.qh-btn.is-secondary:hover {
  color: var(--qh-accent);
  border-color: var(--qh-accent);
  background: color-mix(in oklch, var(--qh-accent) 4%, transparent);
}

/* Secondary on dark sections — white outline */
.is-dark-section .qh-btn.is-secondary {
  color: oklch(1 0 0 / 0.9);
  border-color: oklch(1 0 0 / 0.25);
}

.is-dark-section .qh-btn.is-secondary:hover {
  color: var(--qh-white);
  border-color: oklch(1 0 0 / 0.5);
  background: oklch(1 0 0 / 0.06);
}

/* Ghost — transparent with white border (explicit dark-only button) */
.qh-btn.is-ghost {
  background: oklch(1 0 0 / 0.04);
  color: var(--qh-white);
  border: 1.5px solid oklch(1 0 0 / 0.35);
}

.qh-btn.is-ghost:hover {
  background: oklch(1 0 0 / 0.10);
  border-color: oklch(1 0 0 / 0.6);
  box-shadow: 0 4px 16px oklch(1 0 0 / 0.10);
}

.qh-btn.is-outline {
  background: transparent;
  color: var(--qh-accent);
  border: 1.5px solid var(--qh-accent);
}

.qh-btn.is-outline:hover {
  background: color-mix(in oklch, var(--qh-accent) 6%, transparent);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--qh-accent) 12%, transparent);
}

.qh-btn.is-full-width {
  width: 100%;
}

.qh-btn.is-sm {
  padding: var(--qh-space-2) var(--qh-space-5);
  font-size: 16px;
}

.qh-btn.is-lg {
  padding: var(--qh-space-4) var(--qh-space-7);
  font-size: 20px;
}

.qh-btn.is-small {
  padding: var(--qh-space-2) var(--qh-space-5);
  font-size: 14px;
}

.qh-btn.is-secondary-dark {
  background: transparent;
  color: var(--qh-white);
  border: 1px solid oklch(1 0 0 / 0.25);
}

.qh-btn.is-secondary-dark:hover {
  background: oklch(1 0 0 / 0.08);
  border-color: oklch(1 0 0 / 0.5);
}

.qh-text-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--qh-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--qh-space-1);
  transition: color var(--qh-duration-fast) var(--qh-ease);
}

.qh-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--qh-accent-hover);
}

.qh-text-link:active {
  opacity: 0.8;
}

.qh-text-link {
  position: relative;
  text-decoration: none;
}
.qh-text-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 200ms var(--qh-ease);
}
.qh-text-link:hover::after {
  width: 100%;
}

/* Light variant: white text for dark backgrounds */
.qh-text-link.is-light,
.qh-text-link.is-on-dark,
.is-dark-section .qh-text-link {
  color: var(--qh-white);
}

.qh-text-link.is-light:hover,
.qh-text-link.is-on-dark:hover,
.is-dark-section .qh-text-link:hover {
  color: oklch(1 0 0 / 0.8);
}

/* C28: Video Modal — see HOMEPAGE VISUAL RHYTHM section below */

/* C29: Cookie Banner */
.qh-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  background: var(--qh-white);
  box-shadow: 0 -4px 16px oklch(0 0 0 / 0.08);
  padding: var(--qh-space-4) 0;
  transform: translateY(0);
  transition: transform var(--qh-duration-slow) var(--qh-ease);
}

.qh-cookie-banner.is-dismissed {
  transform: translateY(100%);
}

.qh-cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qh-space-5);
  max-width: var(--qh-grid-max);
  margin: 0 auto;
  padding: 0 var(--qh-space-6);
}

.qh-cookie-banner__text {
  font-size: 16px;
  color: var(--qh-body);
}

.qh-cookie-banner__actions {
  display: flex;
  gap: var(--qh-space-3);
  flex-shrink: 0;
}

/* C30: Notification Bar */
.qh-notification-bar {
  height: 40px;
  background: var(--qh-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: qh-slide-down 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}
@keyframes qh-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.qh-notification-bar__text {
  font-size: 14px;
  color: var(--qh-white);
  text-align: center;
}

.qh-notification-bar__link {
  color: var(--qh-white);
  font-weight: 600;
  text-decoration: underline;
}

.qh-notification-bar__close {
  position: absolute;
  right: var(--qh-space-3);
  width: 32px;
  height: 32px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--qh-white);
  cursor: pointer;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--qh-duration-fast) var(--qh-ease);
}

.qh-notification-bar__close:hover {
  opacity: 1;
}

/* ========================================================================
   10. UTILITY / COMBO CLASSES
   ======================================================================== */

/* ── Skip to Content (a11y) ── */
.qh-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--qh-accent);
  color: var(--qh-white);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--qh-radius);
  z-index: 10000;
  text-decoration: none;
}

.qh-skip-link:focus {
  top: 16px;
}

/* ── Dark Section Context — token remapping ──
   Apply .is-dark-section to any section with a dark background.
   All child components automatically adapt via remapped CSS variables.
   Does NOT apply to: hero (explicit rgba values), footer (Deep Void treatment). */
.is-dark-section {
  /* Text */
  --qh-heading: #ffffff;
  --qh-body: rgba(255, 255, 255, 0.65);
  --qh-muted: rgba(255, 255, 255, 0.45);

  /* Borders */
  --qh-border: rgba(255, 255, 255, 0.08);
  --qh-border-med: rgba(255, 255, 255, 0.15);

  /* Surfaces */
  --qh-ghost: rgba(255, 255, 255, 0.04);
  --qh-white: var(--qh-surface-dark);

  /* Shadows (brand-tinted, deeper on dark) */
  --qh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --qh-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --qh-shadow-md: 0 24px 48px oklch(0.28 0.12 262 / 0.2);
  --qh-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.4);

  /* Links (brighten on dark) */
  --qh-accent: var(--qh-accent-light);
  --qh-accent-hover: #93bbfd;

  /* Semantic backgrounds (stronger tint for visibility on dark) */
  --qh-success-bg: rgba(16, 185, 129, 0.15);
  --qh-warning-bg: rgba(245, 158, 11, 0.15);
  --qh-error-bg: rgba(239, 68, 68, 0.15);
  --qh-info-bg: rgba(6, 182, 212, 0.15);
}

/* Dark section focus rings — brighter for visibility */
.is-dark-section :focus-visible {
  outline-color: var(--qh-accent-light);
}

.is-centered { text-align: center; }
.is-narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
.is-wide { max-width: 1048px; }
.has-border { border: 1px solid var(--qh-border); }
.has-shadow { box-shadow: var(--qh-shadow); }
.has-radius { border-radius: var(--qh-radius); }

.gap-sm { gap: var(--qh-space-4); }
.gap-md { gap: var(--qh-space-6); }
.gap-lg { gap: var(--qh-space-8); }

/* ── Article / Editorial ── */
.qh-article-body {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--qh-heading);
  overflow-wrap: break-word;
  word-break: break-word;
}

.qh-article-body p {
  margin-bottom: var(--qh-space-5);
}

.qh-article-body h2 {
  font-size: clamp(24px, 1.4vw + 10px, 36px);
  font-weight: 600;
  margin-top: var(--qh-space-8);
  margin-bottom: var(--qh-space-4);
  color: var(--qh-heading);
}

.qh-article-body h3 {
  font-size: 28px;
  font-weight: 600;
  margin-top: var(--qh-space-6);
  margin-bottom: var(--qh-space-3);
  color: var(--qh-heading);
}

.qh-article-body ul,
.qh-article-body ol {
  padding-inline-start: var(--qh-space-5);
  margin-bottom: var(--qh-space-5);
}

.qh-article-body li {
  margin-bottom: var(--qh-space-2);
}

.qh-article-body blockquote {
  border-inline-start: 4px solid var(--qh-accent);
  padding-inline-start: var(--qh-space-5);
  font-style: italic;
  color: var(--qh-heading);
  margin: var(--qh-space-6) 0;
}

.qh-article-body img {
  width: 100%;
  border-radius: var(--qh-radius-md);
  margin: var(--qh-space-6) 0;
}

.qh-article-body a {
  color: var(--qh-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.qh-article-body a:hover {
  color: var(--qh-accent-hover);
}

/* ── TOC ── */
.qh-toc {
  position: sticky;
  top: 104px;
}

.qh-toc__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qh-body);
  margin-bottom: var(--qh-space-4);
}

.qh-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-2);
}

.qh-toc a {
  font-size: 14px;
  font-weight: 400;
  color: var(--qh-body);
  text-decoration: none;
  transition: color var(--qh-duration-fast) var(--qh-ease);
  display: block;
  padding: 2px 0;
}

.qh-toc a:hover,
.qh-toc a.is-active {
  color: var(--qh-accent);
}

.qh-toc a.is-h3 {
  padding-inline-start: var(--qh-space-4);
  color: var(--qh-border-med);
}

.qh-toc a.is-h3.is-active {
  color: var(--qh-accent);
}

/* ── Footer ── */
.qh-footer {
  background: var(--qh-gradient-footer);
  padding: var(--qh-space-10) 0 var(--qh-space-6);
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

.qh-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--qh-space-6);
  margin-bottom: var(--qh-space-6);
}

.qh-footer__logo {
  height: 28px;
  margin-bottom: var(--qh-space-4);
}

.qh-footer__tagline {
  font-size: 16px;
  color: var(--qh-body-dark-muted);
  max-width: 240px;
  line-height: 1.5;
}

.qh-footer__heading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qh-white);
  margin-bottom: var(--qh-space-4);
}

.qh-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-2);
}

.qh-footer__link {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color var(--qh-duration-fast) var(--qh-ease);
}

.qh-footer__link:hover {
  color: var(--qh-white);
}

.qh-footer__divider {
  height: 1px;
  background: var(--qh-on-dark-border);
  margin: var(--qh-space-6) 0;
}

.qh-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qh-footer__legal {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}

.qh-footer__legal a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
}

.qh-footer__legal a:hover {
  color: var(--qh-white);
}

.qh-footer__social {
  display: flex;
  gap: var(--qh-space-4);
}

.qh-footer__social a {
  color: var(--qh-body-dark-muted);
  transition: color var(--qh-duration-fast) var(--qh-ease);
}

.qh-footer__social a:hover {
  color: var(--qh-white);
}

.qh-footer__social svg {
  width: 20px;
  height: 20px;
}

/* ========================================================================
   11. ANIMATIONS
   ======================================================================== */

@keyframes qh-gradient-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(5%, -8%); }
  50% { transform: translate(-4%, 6%); }
  75% { transform: translate(7%, -4%); }
}

@keyframes qh-gradient-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-6%, 5%); }
  66% { transform: translate(4%, -7%); }
}

@keyframes qh-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes qh-mega-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes qh-slide-in {
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes qh-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes qh-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qh-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Scroll reveal base state */
.qh-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.qh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — container needs display:contents so the stagger
   wrapper does not disrupt parent grid/flex layout */
.qh-stagger {
  display: contents;
}

.qh-scale-reveal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.qh-scale-reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Fallback: if JS hasn't added .is-visible after 4s, show content anyway.
   Prevents invisible content if JS fails or loads slowly. */
@keyframes qh-reveal-fallback {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.qh-reveal,
.qh-scale-reveal {
  animation: qh-reveal-fallback 0s 4s forwards;
}

/* ── Diagonal section dividers (Stripe-style clip-path transitions) ── */

/* Dark → Light transition */
.qh-section.is-dark-section + .qh-section:not(.is-dark-section):not(.is-ghost),
.qh-hero.is-dark-section + .qh-section:not(.is-dark-section):not(.is-ghost) {
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  margin-top: -40px;
  padding-top: calc(var(--qh-space-11) + 40px);
}

/* Light → Dark transition */
.qh-section:not(.is-dark-section) + .qh-section.is-dark-section,
.qh-section:not(.is-dark-section) + .qh-cta-section.is-dark-section {
  clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%);
  margin-top: -40px;
  padding-top: calc(var(--qh-space-11) + 40px);
}

/* ── Floating decorative shapes on dark sections ── */

.qh-hero.is-dark-section::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--qh-accent) 8%, transparent) 0%, transparent 70%);
  top: -150px;
  right: -150px;
  pointer-events: none;
  z-index: 0;
  animation: qh-float 25s ease-in-out infinite;
}

.qh-cta-section.is-dark-section::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--qh-secondary) 6%, transparent) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
  pointer-events: none;
  z-index: 0;
  animation: qh-float-reverse 30s ease-in-out infinite;
}

@keyframes qh-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, 15px) scale(1.05); }
  66% { transform: translate(10px, -10px) scale(0.98); }
}

@keyframes qh-float-reverse {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15px, -20px) scale(0.97); }
  66% { transform: translate(-10px, 10px) scale(1.03); }
}

/* ========================================================================
   EXTENDED COMPONENTS — Page-Specific & Standalone Variants
   ======================================================================== */

/* ── Hero Dark (Standalone BEM component) ── */

.qh-hero-dark {
  position: relative;
  padding: var(--qh-space-13) 0 var(--qh-space-12);
  background: var(--qh-gradient-hero);
  overflow: hidden;
}

.qh-hero-dark__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-10);
  align-items: center;
}

.qh-hero-dark__content {
  position: relative;
  z-index: 1;
}

.qh-hero-dark__overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qh-accent-light);
  margin-bottom: var(--qh-space-4);
}

.qh-hero-dark__headline {
  margin-bottom: var(--qh-space-5);
}

.qh-hero-dark__subheadline {
  max-width: 560px;
  margin-bottom: var(--qh-space-6);
  color: oklch(1 0 0 / 0.7);
}

.qh-hero-dark__sub {
  max-width: 560px;
  margin-bottom: var(--qh-space-6);
  color: oklch(1 0 0 / 0.7);
}

.qh-hero-dark__actions {
  display: flex;
  align-items: center;
  gap: var(--qh-space-5);
  flex-wrap: wrap;
}

/* Hero-dark compact variant (reduced padding) */
.qh-hero-dark.is-compact {
  padding: var(--qh-space-10) 0 var(--qh-space-8);
}

/* Hero-dark centered variant */
.qh-hero-dark__content.is-centered {
  text-align: center;
  margin: 0 auto;
}

.qh-hero-dark__content.is-centered .qh-hero-dark__subheadline,
.qh-hero-dark__content.is-centered .qh-hero-dark__sub {
  margin-inline: auto;
}

.qh-hero-dark__actions.is-centered {
  justify-content: center;
}

.qh-hero-dark__media {
  position: relative;
  z-index: 1;
}

.qh-hero-dark__image {
  width: 100%;
  border-radius: var(--qh-radius-md);
  box-shadow: 0 24px 48px oklch(0 0 0 / 0.3);
}

.qh-hero-dark__screenshot {
  width: 100%;
  border-radius: var(--qh-radius-md);
  box-shadow: 0 24px 48px oklch(0 0 0 / 0.3);
}

.qh-hero-dark__photo {
  width: 100%;
  border-radius: var(--qh-radius-lg);
  object-fit: cover;
}

.qh-hero-gradient-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ── Hero Product (light, product-led, epic) ── */
.qh-hero-product {
  position: relative;
  padding: var(--qh-space-13) 0 var(--qh-space-12);
  background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 60%);
  overflow: hidden;
}

/* WebGL helix canvas (inserted by JS after glow) */
.qh-hero-product__helix {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: qh-helix-fade 1.2s var(--qh-ease) 0.3s forwards;
}
@keyframes qh-helix-fade {
  to { opacity: 1; }
}

/* Soft radial glow behind screenshot area */
.qh-hero-product__glow {
  position: absolute;
  top: 10%;
  right: -5%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, color-mix(in oklch, var(--qh-accent) 8%, transparent) 0%, color-mix(in oklch, var(--qh-secondary) 5%, transparent) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.qh-hero-product__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--qh-space-10);
  align-items: center;
  position: relative;
  z-index: 1;
}

.qh-hero-product__content {
  position: relative;
}

/* Glowing badge */
.qh-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--qh-accent);
  background: color-mix(in oklch, var(--qh-accent) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--qh-accent) 15%, transparent);
  border-radius: var(--qh-radius-full);
  margin-bottom: var(--qh-space-5);
}

.qh-hero-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qh-accent);
  animation: qh-badge-pulse 2s ease-in-out infinite;
}

@keyframes qh-badge-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklch, var(--qh-accent) 40%, transparent); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px transparent; }
}

.qh-hero-product__headline {
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-5);
}

.qh-hero-product__sub {
  color: var(--qh-body);
  max-width: 520px;
  margin-bottom: var(--qh-space-6);
}

.qh-hero-product__actions {
  display: flex;
  align-items: center;
  gap: var(--qh-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--qh-space-6);
}

/* Trust badges row */
.qh-hero-product__trust {
  display: flex;
  align-items: center;
  gap: var(--qh-space-5);
  opacity: 0.5;
  transition: opacity var(--qh-duration-slow) var(--qh-ease);
}
.qh-hero-product__trust:hover { opacity: 0.8; }
.qh-hero-product__trust img { height: 24px; width: auto; }

/* ── Floating screenshot composition ── */
.qh-hero-product__media {
  position: relative;
  min-height: 480px;
  perspective: 1200px;
}

.qh-hero-product__screenshot {
  position: absolute;
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  background: var(--qh-white);
  transition: transform var(--qh-duration-premium) var(--qh-ease), box-shadow var(--qh-duration-premium) var(--qh-ease);
}

.qh-hero-product__screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--qh-radius-lg);
}

/* Primary screenshot — dashboard, larger, slightly rotated */
.qh-hero-product__screenshot.is-primary {
  top: 0;
  right: 0;
  width: 85%;
  z-index: 1;
  box-shadow: 0 25px 60px -12px oklch(0 0 0 / 0.12), 0 0 0 1px oklch(0 0 0 / 0.04);
  transform: rotateY(-4deg) rotateX(2deg);
  animation: qh-float-primary 6s ease-in-out infinite;
}

/* Secondary screenshot — form, smaller, overlaps from left, different angle */
.qh-hero-product__screenshot.is-secondary {
  bottom: -20px;
  left: -30px;
  width: 55%;
  z-index: 2;
  box-shadow: 0 20px 50px -10px oklch(0 0 0 / 0.15), 0 0 0 1px oklch(0 0 0 / 0.04);
  transform: rotateY(6deg) rotateX(-2deg);
  animation: qh-float-secondary 6s ease-in-out infinite;
  animation-delay: -3s;
}

/* Subtle floating animation — screenshots gently bob */
@keyframes qh-float-primary {
  0%, 100% { transform: rotateY(-4deg) rotateX(2deg) translateY(0); }
  50% { transform: rotateY(-4deg) rotateX(2deg) translateY(-12px); }
}

@keyframes qh-float-secondary {
  0%, 100% { transform: rotateY(6deg) rotateX(-2deg) translateY(0); }
  50% { transform: rotateY(6deg) rotateX(-2deg) translateY(-8px); }
}

/* Hover: screenshots lift + shadow deepens */
.qh-hero-product__screenshot:hover {
  transform: rotateY(0) rotateX(0) translateY(-8px) scale(1.02) !important;
  box-shadow: 0 30px 70px -15px oklch(0 0 0 / 0.18), 0 0 0 1px oklch(0 0 0 / 0.04);
  z-index: 10;
  animation-play-state: paused;
}

/* Entrance delay — secondary slides in 200ms after primary */
.qh-hero-product__screenshot.is-secondary[data-entrance] {
  transition-delay: 0.2s;
}

/* ── Hero Light (Standalone BEM component) ── */

.qh-hero-light {
  padding: var(--qh-space-13) 0 var(--qh-space-12);
  background: var(--qh-white);
}

.qh-hero-light__content {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.qh-hero-light__overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qh-accent);
  margin-bottom: var(--qh-space-4);
}

.qh-hero-light__headline {
  margin-bottom: var(--qh-space-5);
  color: var(--qh-heading);
}

.qh-hero-light__subheadline {
  max-width: 560px;
  margin: 0 auto var(--qh-space-6);
  color: var(--qh-body);
}

/* ── Hero Split (Standalone BEM component — contact/form pages) ── */

.qh-hero-split {
  padding: var(--qh-space-13) 0 var(--qh-space-12);
  background: var(--qh-gradient-hero);
}

.qh-hero-split__inner {
  position: relative;
  z-index: 1;
}

.qh-hero-split__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--qh-space-10);
  align-items: start;
}

.qh-hero-split__left {
  display: flex;
  flex-direction: column;
}

.qh-hero-split__right {
  display: flex;
  flex-direction: column;
}

.qh-hero-split__content {
  max-width: 520px;
}

.qh-hero-split__headline {
  margin-bottom: var(--qh-space-5);
  color: var(--qh-white);
}

.qh-hero-split__sub {
  max-width: 480px;
  margin-bottom: var(--qh-space-6);
  color: oklch(1 0 0 / 0.7);
}

.qh-hero-split__form-card {
  background: var(--qh-white);
  padding: var(--qh-space-8);
  border-radius: var(--qh-radius-lg);
  box-shadow: var(--qh-shadow-lg);
}

.qh-hero-split__contact-methods {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-4);
  margin-top: var(--qh-space-6);
}

.qh-hero-split__office {
  padding: var(--qh-space-5);
  background: oklch(1 0 0 / 0.05);
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: var(--qh-radius-md);
  color: oklch(1 0 0 / 0.7);
}

.qh-hero__search {
  max-width: 560px;
  margin: var(--qh-space-6) auto 0;
}

/* ── CTA Dark (Standalone BEM component) ── */

.qh-cta-dark {
  padding: var(--qh-space-12) 0;
  background: var(--qh-gradient-cta);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.qh-cta-dark__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.qh-cta-dark__headline {
  margin-bottom: var(--qh-space-4);
  color: var(--qh-white);
}

.qh-cta-dark__sub {
  margin-bottom: var(--qh-space-6);
  color: var(--qh-body-dark);
}

.qh-cta-dark__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-5);
  flex-wrap: wrap;
}

/* Builder-convention dark CTA (short-name variant of cta-section/cta-dark) */
.qh-cta {
  padding: var(--qh-space-12) 0;
  background: var(--qh-gradient-cta);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.qh-cta__glow {
  position: absolute;
  width: 60%;
  height: 60%;
  top: -20%;
  left: 20%;
  background: radial-gradient(circle, oklch(0.45 0.14 305 / 0.3) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.qh-cta__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.qh-cta__content .qh-h2 {
  margin-bottom: var(--qh-space-4);
  color: var(--qh-white);
}
.qh-cta__content .qh-body-lg {
  margin-bottom: var(--qh-space-6);
  color: var(--qh-body-dark);
}
.qh-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-5);
  flex-wrap: wrap;
}

/* ── CTA Block (Light CTA standalone) ── */

.qh-cta-block {
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-xl);
  padding: var(--qh-space-10) var(--qh-space-8);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.qh-cta-block__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-5);
  flex-wrap: wrap;
  margin-top: var(--qh-space-6);
}

/* ── CTA Section Extensions ── */

.qh-cta-section__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.qh-cta-section__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-5);
  flex-wrap: wrap;
}

/* ── Section Extensions ── */

.qh-section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--qh-space-8);
}

.qh-section__footer {
  text-align: center;
  margin-top: var(--qh-space-8);
}

.qh-section-header__sub {
  margin-top: var(--qh-space-3);
  color: var(--qh-body);
}

/* ── Feature Row Extensions ── */

.qh-feature-row__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--qh-space-10);
  align-items: center;
}

.qh-feature-row__grid.is-reversed {
  grid-template-columns: 6fr 5fr;
}

.qh-feature-row__content {
  display: flex;
  flex-direction: column;
}

.qh-feature-row__image {
  width: 100%;
  border-radius: var(--qh-radius-md);
  box-shadow: var(--qh-shadow-md);
}

/* ── Feature Grid Extensions ── */

.qh-feature-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

.qh-feature-grid__grid.is-2col {
  grid-template-columns: repeat(2, 1fr);
}

.qh-feature-grid__grid.is-4col {
  grid-template-columns: repeat(4, 1fr);
}

.qh-feature-grid__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-2);
}

.qh-feature-grid__desc {
  font-size: 16px;
  color: var(--qh-body);
  line-height: 1.5;
}

/* ── Featured Case Study ── */

.qh-featured-case-study {
  padding: var(--qh-space-8) 0;
}

.qh-featured-case-study__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-10);
  align-items: center;
}

.qh-featured-case-study__content {
  display: flex;
  flex-direction: column;
}

.qh-featured-case-study__logo {
  height: 48px;
  filter: grayscale(1);
  opacity: 0.6;
  margin-bottom: var(--qh-space-5);
}

.qh-featured-case-study__media {
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
}

.qh-featured-case-study__metric {
  display: flex;
  align-items: baseline;
  gap: var(--qh-space-2);
  margin-bottom: var(--qh-space-3);
}

/* ── Feature Comparison ── */

.qh-feature-comparison {
  overflow-x: auto;
}

/* ── Accordion/FAQ Extensions ── */

.qh-accordion__list {
  max-width: 832px;
  margin: 0 auto;
}

.qh-accordion__content {
  padding: 0 0 var(--qh-space-4);
  font-size: 18px;
  line-height: 1.6;
  color: var(--qh-body);
}

.qh-faq {
  max-width: 832px;
  margin: 0 auto;
}

/* ── Tabs Extensions ── */

.qh-tabs {
  width: 100%;
}

.qh-tabs__list {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--qh-border);
  overflow-x: auto;
}

.qh-tabs__tab {
  padding: var(--qh-space-3) var(--qh-space-5);
  font-size: 16px;
  font-weight: 500;
  color: var(--qh-body);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--qh-duration) var(--qh-ease),
              border-color var(--qh-duration) var(--qh-ease);
}

.qh-tabs__tab:hover {
  color: var(--qh-heading);
}

.qh-tabs__tab.is-active,
.qh-tabs__tab[aria-selected="true"] {
  color: var(--qh-accent);
}

.qh-tabs__content {
  padding: var(--qh-space-6) 0;
}

.qh-tabs__panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-8);
  align-items: center;
}

.qh-tabs__features {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-3);
}

.qh-tabs__media {
  border-radius: var(--qh-radius-md);
  overflow: hidden;
}

.qh-tabs__media img {
  width: 100%;
  border-radius: var(--qh-radius-md);
}

/* ── Breadcrumb Extensions ── */

.qh-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--qh-space-2);
  font-size: 14px;
  list-style: none;
}

.qh-breadcrumb__item {
  display: flex;
  align-items: center;
}

.qh-breadcrumb__item.is-current {
  color: var(--qh-heading);
  font-weight: 500;
  pointer-events: none;
  gap: var(--qh-space-2);
  color: var(--qh-body);
}

/* ── Article Layout ── */

.qh-article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--qh-space-8);
  align-items: start;
}

.qh-article-header {
  margin-bottom: var(--qh-space-6);
}

.qh-article-header__inner {
  max-width: 680px;
}

.qh-article-header__meta {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-4);
  font-size: 14px;
  color: var(--qh-body);
}

.qh-article-header__badges {
  display: flex;
  gap: var(--qh-space-2);
  margin-bottom: var(--qh-space-4);
}

.qh-article-header__reading-time {
  font-size: 14px;
  color: var(--qh-body);
}

.qh-article-content {
  max-width: 680px;
}

.qh-article-sidebar {
  position: sticky;
  top: 104px;
}

.qh-article-footer {
  max-width: 680px;
  margin-top: var(--qh-space-8);
  padding-top: var(--qh-space-6);
  border-top: 1px solid var(--qh-border);
}

.qh-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qh-space-2);
}

.qh-article-cta {
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
  margin-top: var(--qh-space-6);
  text-align: center;
}

.qh-article-feedback {
  margin-top: var(--qh-space-6);
  padding: var(--qh-space-5);
  text-align: center;
}

.qh-article-feedback__buttons {
  display: flex;
  justify-content: center;
  gap: var(--qh-space-3);
  margin-top: var(--qh-space-3);
}

.qh-article-feedback__thanks {
  display: none;
  color: var(--qh-success);
  font-weight: 500;
  margin-top: var(--qh-space-3);
}

/* ── Author Byline Extensions ── */

.qh-author-byline__info {
  display: flex;
  flex-direction: column;
}

.qh-author-byline__meta {
  display: flex;
  align-items: center;
  gap: var(--qh-space-2);
  font-size: 14px;
  color: var(--qh-body);
}

.qh-author-byline__share {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  margin-left: auto;
}

.qh-author-byline__share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--qh-border);
  background: var(--qh-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qh-body);
  transition: border-color var(--qh-duration) var(--qh-ease),
              color var(--qh-duration) var(--qh-ease);
}

.qh-author-byline__share-btn:hover {
  border-color: var(--qh-accent);
  color: var(--qh-accent);
}

/* ── Sidebar Components ── */

.qh-sidebar-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-5);
  margin-bottom: var(--qh-space-5);
}

.qh-sidebar-cta {
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-5);
  text-align: center;
}

.qh-sidebar-cta__icon {
  width: 48px;
  height: 48px;
  color: var(--qh-accent);
  margin: 0 auto var(--qh-space-3);
}

.qh-sidebar-card.is-cta {
  background: var(--qh-gradient-accent);
  border: none;
  color: var(--qh-white);
}

.qh-sidebar-links {
  margin-bottom: var(--qh-space-5);
}

.qh-sidebar-links__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-2);
}

/* ── TOC Extensions ── */

.qh-toc__link {
  font-size: 14px;
  color: var(--qh-body);
  text-decoration: none;
  display: block;
  padding: 2px 0;
  transition: color var(--qh-duration-fast) var(--qh-ease);
}

.qh-toc__link:hover {
  color: var(--qh-accent);
}

.qh-toc__sticky {
  position: sticky;
  top: 104px;
}

/* ── Form Components (Standalone BEM) ── */

.qh-form {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-5);
}

.qh-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-2);
}

.qh-form__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--qh-heading);
}

.qh-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-4);
}

.qh-form__privacy {
  font-size: 14px;
  color: var(--qh-body);
  line-height: 1.5;
}

.qh-form-card {
  background: var(--qh-white);
  padding: var(--qh-space-8);
  border-radius: var(--qh-radius-lg);
  box-shadow: var(--qh-shadow-lg);
}

.qh-form-error {
  font-size: 14px;
  color: var(--qh-error);
  margin-top: var(--qh-space-1);
}

.qh-form-success {
  padding: var(--qh-space-5);
  background: var(--qh-success-bg);
  border: 1px solid var(--qh-success);
  border-radius: var(--qh-radius);
  color: var(--qh-success);
  text-align: center;
}

.qh-label__required {
  color: var(--qh-error);
  margin-left: 2px;
}

.qh-required {
  color: var(--qh-error);
}

.qh-checkbox__box {
  width: 20px;
  height: 20px;
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-sm);
  flex-shrink: 0;
}

.qh-checkbox__label {
  font-size: 16px;
  color: var(--qh-heading);
}

.qh-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--qh-space-3);
  font-size: 16px;
  color: var(--qh-heading);
  cursor: pointer;
}

.qh-select-wrapper {
  position: relative;
}

.qh-select-wrapper__icon {
  position: absolute;
  right: var(--qh-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--qh-body);
  pointer-events: none;
}

/* ── Card Extensions ── */

.qh-card-grid {
  padding: var(--qh-space-8) 0;
}

.qh-card-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

.qh-card-grid__filters {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-6);
  flex-wrap: wrap;
}

.qh-card-grid__pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--qh-space-8);
}

/* ── Resource Card (Standalone BEM) ── */

.qh-resource-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  transition: transform var(--qh-duration-slow) var(--qh-ease-bounce),
              box-shadow 300ms var(--qh-ease),
              border-color 300ms var(--qh-ease);
}

.qh-resource-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklch, var(--qh-accent) 15%, transparent);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--qh-dark) 10%, transparent);
}

.qh-resource-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.qh-resource-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--qh-duration-slow) var(--qh-ease);
}

.qh-resource-card:hover .qh-resource-card__image img {
  transform: scale(1.02);
}

.qh-resource-card.is-featured {
  border-color: var(--qh-accent);
  box-shadow: 0 0 0 1px var(--qh-accent), var(--qh-shadow-md);
}

.qh-resource-card__body {
  padding: var(--qh-space-5);
}

.qh-resource-card__meta {
  display: flex;
  align-items: center;
  gap: var(--qh-space-2);
  font-size: 14px;
  color: var(--qh-body);
  margin-bottom: var(--qh-space-3);
}

.qh-resource-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qh-space-3) var(--qh-space-5);
  border-top: 1px solid var(--qh-border);
}

.qh-resource-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.qh-resource-card__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--qh-space-1);
}

.qh-resource-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Case Study Card (Standalone BEM) ── */

.qh-case-study-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  transition: transform var(--qh-duration-slow) var(--qh-ease-bounce),
              box-shadow 300ms var(--qh-ease);
}

.qh-case-study-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--qh-dark) 10%, transparent);
}

.qh-case-study-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.qh-case-study-card__body {
  padding: var(--qh-space-5);
}

.qh-case-study-card__logo {
  height: 32px;
  filter: grayscale(1);
  opacity: 0.6;
  margin-bottom: var(--qh-space-3);
}

.qh-case-study-card__stats {
  display: flex;
  gap: var(--qh-space-5);
  margin-bottom: var(--qh-space-4);
}

.qh-case-study-card__stat {
  display: flex;
  flex-direction: column;
}

.qh-case-study-card__stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--qh-heading);
}

.qh-case-study-card__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-accent);
  text-decoration: none;
}

.qh-case-study-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ── Badge Card ── */

.qh-badge-card {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  padding: var(--qh-space-4);
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
}

.qh-badge-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--qh-accent);
}

.qh-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qh-space-2);
}

/* ── Module Card (Standalone BEM) ── */

.qh-module-card {
  background: var(--qh-ghost);
  border: 1px solid transparent;
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
  transition: background var(--qh-duration) var(--qh-ease),
              border-color var(--qh-duration) var(--qh-ease),
              transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qh-module-card:hover {
  background: var(--qh-white);
  border-color: var(--qh-border);
  transform: translateY(-4px);
}

.qh-module-card__icon {
  width: 48px;
  height: 48px;
  color: var(--qh-accent);
  margin-bottom: var(--qh-space-4);
}

.qh-module-card__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--qh-space-1);
  margin-top: var(--qh-space-4);
}

.qh-module-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.qh-module-cards {
  padding: var(--qh-space-8) 0;
}

.qh-module-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

/* ── Testimonial (Standalone single card) ── */

.qh-testimonial {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.qh-testimonial__quote {
  font-size: 28px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-5);
}

.qh-testimonial__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-3);
}

.qh-testimonial__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--qh-heading);
}

.qh-testimonial__role {
  font-size: 14px;
  color: var(--qh-body);
}

.qh-testimonial-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

.qh-testimonial-grid__cta {
  text-align: center;
  margin-top: var(--qh-space-8);
}

/* ── Social Proof Strip ── */

.qh-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-5);
  padding: var(--qh-space-4) 0;
}

.qh-social-proof__rating {
  display: flex;
  align-items: center;
  gap: var(--qh-space-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-heading);
}

/* ── Trust Strip — see HOMEPAGE VISUAL RHYTHM section below ── */

/* ── Stats (Standalone elements) ── */

.qh-stat {
  text-align: center;
}

.qh-stat__number,
.qh-stat__value {
  font-size: clamp(36px, 2.3vw + 12px, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--qh-accent);
}

.qh-stat__label {
  font-size: 16px;
  color: var(--qh-body);
  margin-top: var(--qh-space-2);
}

.qh-stats-strip__divider {
  width: 1px;
  height: 48px;
  background: var(--qh-border);
}

/* ── Pagination ── */

.qh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-2);
}

.qh-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--qh-radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-body);
  text-decoration: none;
  transition: background var(--qh-duration) var(--qh-ease),
              color var(--qh-duration) var(--qh-ease);
}

.qh-pagination__link:hover {
  background: var(--qh-ghost);
  color: var(--qh-heading);
}

.qh-pagination__link.is-active {
  background: var(--qh-accent);
  color: var(--qh-white);
}

.qh-pagination__link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.qh-pagination__ellipsis {
  font-size: 14px;
  color: var(--qh-body);
  padding: 0 var(--qh-space-1);
}

/* ── Pill ── */

.qh-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--qh-space-2);
  padding: 6px 14px;
  border-radius: var(--qh-radius-full);
  font-size: 14px;
  font-weight: 500;
  background: color-mix(in oklch, var(--qh-accent) 10%, transparent);
  color: var(--qh-accent);
}

.qh-pill:hover {
  filter: brightness(0.95);
}

.qh-pill.is-active {
  background: var(--qh-accent);
  color: var(--qh-white);
}

.qh-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Logo Marquee Extensions ── */

.qh-logo-marquee__label {
  font-size: 14px;
  color: var(--qh-body);
  text-align: center;
  margin-bottom: var(--qh-space-4);
}

.qh-logo-marquee__slide {
  display: flex;
  align-items: center;
  gap: var(--qh-space-10);
  flex-shrink: 0;
}

.qh-logo-marquee-track {
  display: flex;
  gap: var(--qh-space-10);
  animation: qh-marquee-scroll linear infinite;
}

/* ── Pricing Card Extensions ── */

.qh-pricing-card__header {
  margin-bottom: var(--qh-space-5);
}

.qh-pricing-toggle__option {
  font-size: 16px;
  font-weight: 500;
  color: var(--qh-body);
  cursor: pointer;
}

.qh-pricing-toggle__option.is-active {
  color: var(--qh-heading);
}

/* ── Notification Bar Extensions ── */

.qh-notification-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-3);
  max-width: var(--qh-grid-max);
  margin: 0 auto;
  padding: 0 var(--qh-space-6);
}

/* ── Navbar Extensions ── */

  display: flex;
  align-items: center;
  gap: var(--qh-space-2);
  font-size: 14px;
  font-weight: 500;
  color: oklch(1 0 0 / 0.7);
  text-decoration: none;
  transition: color var(--qh-duration-fast) var(--qh-ease);
}

  color: var(--qh-white);
}

/* ── Footer Extensions ── */

.qh-footer__legal-links {
  display: flex;
  gap: var(--qh-space-4);
}

.qh-footer__legal-link {
  font-size: 14px;
  color: oklch(1 0 0 / 0.4);
  text-decoration: none;
  transition: color var(--qh-duration-fast) var(--qh-ease);
}

.qh-footer__legal-link:hover {
  color: var(--qh-white);
}

/* Footer minimal variant (just logo + copyright, no nav columns) */
.qh-footer.is-minimal .qh-footer__grid {
  display: none;
}

.qh-footer.is-minimal .qh-footer__bottom {
  border-top: none;
  padding-top: 0;
}

/* ── Code Block Extensions ── */

.qh-code-block__code {
  font-family: var(--qh-font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--qh-border);
}

.qh-code-block__pre {
  margin: 0;
  overflow-x: auto;
}

.qh-code-block__lang {
  font-family: var(--qh-font-mono);
  font-size: 12px;
  color: oklch(1 0 0 / 0.4);
}

.qh-code-block__copy-label {
  font-size: 12px;
  color: oklch(1 0 0 / 0.6);
}

.qh-code-block__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.1);
}

.qh-code-inline,
.qh-inline-code {
  font-family: var(--qh-font-mono);
  font-size: 0.875em;
  padding: 2px 6px;
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-sm);
  color: var(--qh-heading);
}

/* ── Blockquote ── */

.qh-blockquote {
  border-inline-start: 4px solid var(--qh-accent);
  padding-inline-start: var(--qh-space-5);
  font-style: italic;
  font-size: 18px;
  color: var(--qh-heading);
  margin: var(--qh-space-6) 0;
}

/* ── Callout Extensions ── */

.qh-callout__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-2);
}

.qh-callout__content {
  font-size: 16px;
  color: var(--qh-body);
  line-height: 1.5;
}

/* ── Check List ── */

.qh-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-3);
}

.qh-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--qh-space-3);
  font-size: 16px;
  color: var(--qh-body);
}

.qh-check-list li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--qh-success);
  margin-top: 2px;
}

/* ── Benefit List ── */

.qh-benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-4);
}

.qh-benefit-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--qh-space-3);
}

.qh-benefit-list__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--qh-success);
  margin-top: 2px;
}

/* ── Detail List ── */

.qh-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-4);
}

.qh-detail-list dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--qh-heading);
}

.qh-detail-list dd {
  font-size: 16px;
  color: var(--qh-body);
}

/* ── Link Grid ── */

.qh-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--qh-space-4);
}

/* ── Image Placeholder ── */

.qh-image-placeholder {
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qh-border-med);
  aspect-ratio: 16 / 9;
}

/* ── Table Components ── */

.qh-table-wrapper {
  overflow-x: auto;
  border-radius: var(--qh-radius-md);
  border: 1px solid var(--qh-border);
}

.qh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.qh-table th {
  text-align: start;
  padding: var(--qh-space-3) var(--qh-space-4);
  font-weight: 600;
  color: var(--qh-heading);
  background: var(--qh-ghost);
  border-bottom: 1px solid var(--qh-border);
}

.qh-table td {
  padding: var(--qh-space-3) var(--qh-space-4);
  color: var(--qh-body);
  border-bottom: 1px solid var(--qh-border);
}

/* ── Video Components Extensions ── */

.qh-video-embed {
  aspect-ratio: 16 / 9;
  border-radius: var(--qh-radius-md);
  overflow: hidden;
}

.qh-video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Video modal extensions — consolidated into HOMEPAGE VISUAL RHYTHM section */

/* ── Empty State ── */

.qh-empty-state {
  text-align: center;
  padding: var(--qh-space-10) var(--qh-space-6);
  color: var(--qh-body);
}

/* ── Status Row ── */

.qh-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qh-space-3) 0;
  border-bottom: 1px solid var(--qh-border);
}

/* ── Skip Link ── */
/* (already defined at top of file, but skipping as it's in the missing list erroneously) */

/* ── Stagger ── */
/* (animation class — defined in animations section, no additional properties needed) */

/* ========================================================================
   SEARCH & HELP CENTER COMPONENTS
   ======================================================================== */

.qh-help-search {
  max-width: 640px;
  margin: 0 auto;
}

.qh-help-search__wrapper {
  position: relative;
}

.qh-help-search__icon {
  position: absolute;
  left: var(--qh-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--qh-body);
  pointer-events: none;
}

.qh-help-search__input {
  width: 100%;
  height: 56px;
  padding: 0 var(--qh-space-4) 0 var(--qh-space-9);
  font-family: var(--qh-font);
  font-size: 18px;
  color: var(--qh-heading);
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-md);
  box-shadow: var(--qh-shadow-sm);
  transition: border-color var(--qh-duration) var(--qh-ease),
              box-shadow var(--qh-duration) var(--qh-ease);
}

.qh-help-search__input:focus {
  border-color: var(--qh-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--qh-accent) 10%, transparent);
  outline: none;
}

.qh-help-search__filters {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  margin-top: var(--qh-space-4);
  flex-wrap: wrap;
}

.qh-help-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

.qh-help-category-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform var(--qh-duration-slow) var(--qh-ease-bounce),
              box-shadow 300ms var(--qh-ease),
              border-color 300ms var(--qh-ease);
}

.qh-help-category-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklch, var(--qh-accent) 15%, transparent);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--qh-dark) 8%, transparent);
}

.qh-help-category-card__icon {
  width: 48px;
  height: 48px;
  color: var(--qh-accent);
  margin: 0 auto var(--qh-space-4);
}

.qh-popular-articles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-3);
}

.qh-search-results {
  margin-top: var(--qh-space-6);
}

.qh-search-result {
  padding: var(--qh-space-4);
  border-bottom: 1px solid var(--qh-border);
}

.qh-search-result:last-child {
  border-bottom: none;
}

.qh-search-loading {
  text-align: center;
  padding: var(--qh-space-8);
  color: var(--qh-body);
}

.qh-search-no-results {
  text-align: center;
  padding: var(--qh-space-8);
  color: var(--qh-body);
}

.qh-search-initial {
  text-align: center;
  padding: var(--qh-space-8);
  color: var(--qh-body);
}

/* ========================================================================
   CHANGELOG COMPONENTS
   ======================================================================== */

.qh-changelog-timeline {
  max-width: 800px;
  margin: 0 auto;
}

.qh-changelog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qh-space-4);
  margin-bottom: var(--qh-space-6);
}

.qh-changelog-filters {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  flex-wrap: wrap;
}

.qh-changelog-month {
  margin-bottom: var(--qh-space-8);
}

.qh-changelog-month__heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-5);
  padding-bottom: var(--qh-space-3);
  border-bottom: 1px solid var(--qh-border);
}

.qh-changelog-entry {
  padding: var(--qh-space-5) 0;
  border-bottom: 1px solid var(--qh-border);
}

.qh-changelog-entry:last-child {
  border-bottom: none;
}

.qh-changelog-entry__header {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-3);
}

.qh-changelog-entry__badges {
  display: flex;
  gap: var(--qh-space-2);
}

.qh-changelog-entry__body {
  font-size: 16px;
  color: var(--qh-body);
  line-height: 1.6;
}

.qh-changelog-entry__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-2);
  margin-top: var(--qh-space-3);
}

.qh-changelog-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--qh-space-8);
}

/* ========================================================================
   API DOCUMENTATION COMPONENTS
   ======================================================================== */

.qh-api-docs {
  padding: var(--qh-space-8) 0;
}

.qh-api-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--qh-space-8);
  align-items: start;
}

.qh-api-sidebar {
  position: sticky;
  top: 104px;
}

.qh-api-nav {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-1);
}

.qh-api-nav__section {
  margin-bottom: var(--qh-space-4);
}

.qh-api-nav__link {
  display: block;
  padding: var(--qh-space-2) var(--qh-space-3);
  font-size: 14px;
  color: var(--qh-body);
  text-decoration: none;
  border-radius: var(--qh-radius-sm);
  transition: background var(--qh-duration-fast) var(--qh-ease),
              color var(--qh-duration-fast) var(--qh-ease);
}

.qh-api-nav__link:hover {
  background: var(--qh-ghost);
  color: var(--qh-heading);
}

.qh-api-nav__link.is-active {
  background: color-mix(in oklch, var(--qh-accent) 8%, transparent);
  color: var(--qh-accent);
}

.qh-api-content {
  max-width: 800px;
}

.qh-api-examples {
  background: #1e293b;
  border-radius: var(--qh-radius-md);
  padding: var(--qh-space-5);
  overflow-x: auto;
}

.qh-endpoint-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-md);
  margin-bottom: var(--qh-space-5);
  overflow: hidden;
}

.qh-endpoint-card__header {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  padding: var(--qh-space-4) var(--qh-space-5);
  background: var(--qh-ghost);
  border-bottom: 1px solid var(--qh-border);
}

/* ========================================================================
   ROI CALCULATOR COMPONENTS
   ======================================================================== */

.qh-roi-calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-8);
  align-items: start;
}

.qh-roi-calculator__form {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
}

.qh-roi-calculator__results {
  position: sticky;
  top: 104px;
}

.qh-roi-results-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
}

.qh-roi-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--qh-space-4);
  margin-bottom: var(--qh-space-5);
}

.qh-roi-result {
  text-align: center;
  padding: var(--qh-space-4);
  background: var(--qh-ghost);
  border-radius: var(--qh-radius);
}

.qh-roi-result__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--qh-accent);
}

.qh-roi-chart {
  margin: var(--qh-space-5) 0;
  aspect-ratio: 2 / 1;
}

.qh-roi-results-cta {
  text-align: center;
  margin-top: var(--qh-space-5);
}

/* ========================================================================
   PARTNER & CAREER COMPONENTS
   ======================================================================== */

.qh-partner-form {
  padding: var(--qh-space-8) 0;
}

.qh-partner-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-8);
  align-items: start;
}

.qh-partner-form__info {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-5);
}

.qh-partner-form__card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
}

.qh-partner-form__checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-3);
}

.qh-partner-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

/* ── Job Listings ── */

.qh-job-listings {
  padding: var(--qh-space-8) 0;
}

.qh-job-listings__filters {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-6);
  flex-wrap: wrap;
}

.qh-job-listings__grid {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-4);
}

.qh-job-listings__empty {
  text-align: center;
  padding: var(--qh-space-10);
  color: var(--qh-body);
}

/* ========================================================================
   MEDIA & PRESS COMPONENTS
   ======================================================================== */

.qh-media-kit {
  padding: var(--qh-space-8) 0;
}

.qh-media-kit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

.qh-media-kit__card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-5);
  text-align: center;
}

.qh-media-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-8);
  align-items: center;
}

.qh-media-contact__content {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-4);
}

/* ── Photo Grid ── */

.qh-photo-grid {
  padding: var(--qh-space-8) 0;
}

.qh-photo-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-4);
}

.qh-photo-grid__img {
  width: 100%;
  border-radius: var(--qh-radius-md);
  object-fit: cover;
  aspect-ratio: 1;
}

/* ========================================================================
   CONTACT & SUPPORT COMPONENTS
   ======================================================================== */

.qh-contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

.qh-contact-channel {
  display: flex;
  align-items: flex-start;
  gap: var(--qh-space-3);
  padding: var(--qh-space-5);
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
}

.qh-contact-channel__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--qh-accent);
}

.qh-contact-method {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  padding: var(--qh-space-3) 0;
  color: oklch(1 0 0 / 0.7);
}

.qh-support-channels {
  padding: var(--qh-space-8) 0;
}

.qh-support-channels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
}

.qh-support-channels__card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
  text-align: center;
  transition: transform var(--qh-duration-slow) var(--qh-ease-bounce),
              box-shadow 300ms var(--qh-ease);
}

.qh-support-channels__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--qh-dark) 8%, transparent);
}

/* ========================================================================
   TIMELINE & HISTORY COMPONENTS
   ======================================================================== */

.qh-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.qh-timeline__track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--qh-border);
  transform: translateX(-50%);
}

.qh-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: var(--qh-space-8);
  margin-bottom: var(--qh-space-8);
}

.qh-timeline__year {
  font-size: 18px;
  font-weight: 700;
  color: var(--qh-accent);
  text-align: center;
  position: relative;
  z-index: 1;
  background: var(--qh-white);
  padding: var(--qh-space-2) var(--qh-space-4);
  margin: 0 auto var(--qh-space-6);
  border-radius: var(--qh-radius-full);
  border: 2px solid var(--qh-accent);
  display: inline-block;
}

.qh-timeline__card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-5);
}

/* ── Step Tracker ── */

.qh-step-tracker {
  margin-bottom: var(--qh-space-6);
}

.qh-step-tracker__list {
  display: flex;
  align-items: center;
  gap: var(--qh-space-4);
  list-style: none;
  counter-reset: step;
}

.qh-step-tracker__item {
  display: flex;
  align-items: center;
  gap: var(--qh-space-2);
  flex: 1;
}

.qh-step-tracker__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  background: var(--qh-ghost);
  color: var(--qh-body);
  flex-shrink: 0;
}

.qh-step-tracker__item.is-active .qh-step-tracker__number {
  background: var(--qh-accent);
  color: var(--qh-white);
}

.qh-step-tracker__item.is-completed .qh-step-tracker__number {
  background: var(--qh-success);
  color: var(--qh-white);
}

.qh-step-tracker__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-body);
}

.qh-step-tracker__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-accent);
  text-decoration: none;
}

/* ── Onboarding Step ── */

.qh-onboarding-step {
  padding: var(--qh-space-6);
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  margin-bottom: var(--qh-space-5);
}

.qh-onboarding-step__header {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
  margin-bottom: var(--qh-space-4);
}

.qh-onboarding-step__number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  background: var(--qh-accent);
  color: var(--qh-white);
  flex-shrink: 0;
}

/* ========================================================================
   CERTIFICATION & TEAM COMPONENTS
   ======================================================================== */

.qh-certification-grid {
  padding: var(--qh-space-8) 0;
}

.qh-certification-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--qh-space-5);
}

.qh-certification-grid__item {
  text-align: center;
  padding: var(--qh-space-5);
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
}

.qh-team-grid {
  padding: var(--qh-space-8) 0;
}

.qh-team-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--qh-space-6);
}

/* ========================================================================
   GLOSSARY & LETTER NAV
   ======================================================================== */

.qh-glossary-group {
  margin-bottom: var(--qh-space-6);
}

.qh-glossary-term {
  padding: var(--qh-space-3) 0;
  border-bottom: 1px solid var(--qh-border);
}

.qh-letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qh-space-2);
  margin-bottom: var(--qh-space-6);
}

.qh-letter-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--qh-radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--qh-body);
  text-decoration: none;
  transition: background var(--qh-duration-fast) var(--qh-ease),
              color var(--qh-duration-fast) var(--qh-ease);
}

.qh-letter-nav__link:hover {
  background: var(--qh-ghost);
  color: var(--qh-accent);
}

.qh-letter-nav__link.is-active {
  background: var(--qh-accent);
  color: var(--qh-white);
}

.qh-letter-nav__link.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ========================================================================
   DEMO & ONBOARDING
   ======================================================================== */

.qh-demo-expect {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-5);
  margin-top: var(--qh-space-6);
}

/* ── Canny Embed ── */

.qh-canny-embed {
  min-height: 600px;
  border-radius: var(--qh-radius-md);
  overflow: hidden;
}

/* ── Related Modules ── */

.qh-related-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-6);
  margin-top: var(--qh-space-6);
}

/* ========================================================================
   12. RESPONSIVE
   ======================================================================== */

/* ── Laptop: 1024-1439px ── */
/* Font sizes + spacing now handled by clamp() — layout-only overrides below */

/* ── Tablet: 768-1023px ── */
@media (max-width: 1023px) {
  /* Font sizes now handled by clamp() */

  /* Navbar — collapse to hamburger on tablet (mega menu needs full width) */

  .qh-container { padding: 0 var(--qh-space-5); }
  .qh-section { padding: var(--qh-space-9) 0; }

  .qh-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .qh-grid-4 { grid-template-columns: repeat(2, 1fr); }

  .qh-feature-row__grid { grid-template-columns: 1fr; gap: var(--qh-space-7); }
  .qh-feature-row__grid.is-reversed .qh-feature-row__text { order: 1; }
  .qh-feature-row__grid.is-reversed .qh-feature-row__media { order: 2; }

  .qh-hero__grid { grid-template-columns: 1fr; }
  .qh-hero.is-split .qh-hero__grid { grid-template-columns: 1fr; }

  .qh-pricing-cards { grid-template-columns: repeat(2, 1fr); max-width: 100%; margin: 0 auto; }
  .qh-pricing-card.is-featured { transform: none; }

  .qh-testimonial-grid__grid { grid-template-columns: 1fr; }

  .qh-stats-strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--qh-space-5); }
  .qh-stats-strip__item:nth-child(2)::after { display: none; }
  .qh-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--qh-space-5); }
  .qh-stats__item:nth-child(2)::after { display: none; }

  /* Grid modifier aliases — tablet collapse */
  .qh-grid.is-3-col { grid-template-columns: repeat(2, 1fr); }
  .qh-grid.is-4-col { grid-template-columns: repeat(2, 1fr); }
  .qh-grid.is-8-4  { grid-template-columns: 1fr; }

  /* Standalone BEM grids — tablet collapse */
  .qh-hero-dark__grid { grid-template-columns: 1fr; }

  /* Product hero — tablet */
  .qh-hero-product__grid { grid-template-columns: 1fr; gap: var(--qh-space-8); }
  .qh-hero-product__content { text-align: center; }
  .qh-hero-product__sub { max-width: none; margin-left: auto; margin-right: auto; }
  .qh-hero-product__actions { justify-content: center; }
  .qh-hero-product__trust { justify-content: center; }
  .qh-hero-product__media { min-height: 380px; }
  .qh-hero-product__screenshot.is-primary { width: 75%; right: 5%; }
  .qh-hero-product__screenshot.is-secondary { width: 50%; left: 0; }
  .qh-hero-split__grid { grid-template-columns: 1fr; }
  .qh-article-layout { grid-template-columns: 1fr; }
  .qh-article-sidebar { display: none; }
  .qh-featured-case-study__grid { grid-template-columns: 1fr; gap: var(--qh-space-6); }
  .qh-featured-case-study__metric { flex-direction: column; align-items: flex-start; }
  .qh-testimonial-carousel__quote { font-size: 24px; }
  .qh-trust-strip__logos { gap: var(--qh-space-5); }
  .qh-video-modal__close { top: var(--qh-space-3); right: var(--qh-space-3); }
  .qh-partner-form__grid { grid-template-columns: 1fr; }
  .qh-roi-calculator { grid-template-columns: 1fr; }
  .qh-api-layout { grid-template-columns: 1fr; }
  .qh-help-categories { grid-template-columns: repeat(2, 1fr); }
  .qh-module-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-team-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-certification-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-contact-channels { grid-template-columns: 1fr; }
  .qh-media-kit__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-photo-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-support-channels__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-related-modules { grid-template-columns: repeat(2, 1fr); }
  .qh-card-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-partner-cards__grid { grid-template-columns: repeat(2, 1fr); }

  /* Timeline — stack on tablet */
  .qh-timeline__item { grid-template-columns: 1fr; }
  .qh-timeline__track { left: 20px; }
}

/* ── Mobile: 320-767px ── */
@media (max-width: 767px) {
  /* Font sizes now handled by clamp() */

  .qh-container { padding: 0 var(--qh-space-4); }
  .qh-section { padding: var(--qh-space-7) 0; }
  .qh-hero { padding: var(--qh-space-12) 0 var(--qh-space-10); }


  .qh-grid-2,
  .qh-grid-3,
  .qh-grid-4 { grid-template-columns: 1fr; }

  /* Grid modifier aliases — mobile collapse */
  .qh-grid.is-2-col,
  .qh-grid.is-3-col,
  .qh-grid.is-4-col,
  .qh-grid.is-2x2 { grid-template-columns: 1fr; }

  .qh-feature-grid__grid { grid-template-columns: 1fr; }
  .qh-feature-grid__grid.is-2col { grid-template-columns: 1fr; }
  .qh-feature-grid__grid.is-4col { grid-template-columns: 1fr; }

  .qh-logo-marquee__logo { height: 24px; }

  .qh-cookie-banner__inner { flex-direction: column; text-align: center; }

  /* Buttons — mobile touch targets */
  .qh-btn {
    padding: 14px 24px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }
  .qh-btn.is-lg {
    padding: 16px 28px;
    font-size: 18px;
  }
  .qh-btn.is-small {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px;
  }
  /* Text links — add tap padding for 44px touch target */
  .qh-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
  }

  .qh-hero__actions { flex-direction: column; align-items: stretch; }
  .qh-hero__trust { flex-wrap: wrap; justify-content: center; gap: var(--qh-space-3); }
  .qh-hero__trust-sep { display: none; }
  .qh-hero__media { display: none !important; }
  .qh-hero__copy { text-align: center; }
  .qh-hero__headline, .qh-display-hero { font-size: clamp(28px, 8vw, 44px); word-break: break-word; }
  .qh-hero__sub { text-align: center; }
  .qh-hero-dark__actions { flex-direction: column; align-items: stretch; }
  .qh-hero-split__grid { grid-template-columns: 1fr; }

  /* Standalone BEM grids — mobile single column */
  .qh-help-categories,
  .qh-module-cards__grid,
  .qh-team-grid__grid,
  .qh-certification-grid__grid,
  .qh-media-kit__grid,
  .qh-photo-grid__grid,
  .qh-support-channels__grid,
  .qh-related-modules,
  .qh-card-grid__grid,
  .qh-partner-cards__grid,
  .qh-job-listings__grid { grid-template-columns: 1fr; }

  /* Step tracker — stack vertically */
  .qh-step-tracker__list { flex-direction: column; }
  .qh-step-tracker__item { flex-direction: row; gap: var(--qh-space-3); }

  /* Stats strip — single column */
  .qh-stats-strip__grid { grid-template-columns: 1fr; }
  .qh-stats__grid { grid-template-columns: 1fr; }
  /* Hero-dark — reduced padding */
  .qh-hero-dark { padding: var(--qh-space-10) 0 var(--qh-space-8); }

  /* Product hero — mobile */
  .qh-hero-product { padding: var(--qh-space-10) 0 var(--qh-space-8); }
  .qh-product-hero { padding: var(--qh-space-10) 0 var(--qh-space-8); }
  .qh-product-hero__grid { grid-template-columns: 1fr; }
  .qh-product-hero__ctas { flex-direction: column; align-items: stretch; }

  /* Solution hero — mobile */
  .qh-solution-hero { padding: var(--qh-space-10) 0 var(--qh-space-8); }
  .qh-solution-hero__grid { grid-template-columns: 1fr; }
  .qh-solution-hero__ctas { flex-direction: column; align-items: stretch; }

  .qh-hero-product__media { min-height: 300px; perspective: none; }
  .qh-hero-product__screenshot.is-primary {
    position: relative;
    width: 90%;
    margin: 0 auto;
    transform: none;
    animation: none;
  }
  .qh-hero-product__screenshot.is-secondary {
    position: relative;
    width: 70%;
    margin: -40px auto 0;
    left: auto;
    bottom: auto;
    transform: none;
    animation: none;
  }
  .qh-hero-product__actions { flex-direction: column; align-items: stretch; }
  .qh-hero-product__trust { flex-wrap: wrap; gap: var(--qh-space-3); }
  .qh-hero-product__trust img { height: 20px; }

  .qh-sticky-nav { top: 64px; }
  .qh-toc { position: static; }

  .qh-accordion__trigger { font-size: 18px; }

  /* Letter nav — wrap tighter on mobile */
  .qh-letter-nav { gap: var(--qh-space-1); }
  .qh-letter-nav__link { min-width: 36px; min-height: 36px; font-size: 12px; }

  /* Pagination — smaller on mobile */
  .qh-pagination { gap: var(--qh-space-1); }
  .qh-pagination__link { min-width: 32px; min-height: 32px; font-size: 13px; }

  /* Disable diagonal dividers on mobile (wastes vertical space) */
  .qh-section.is-dark-section + .qh-section:not(.is-dark-section):not(.is-ghost),
  .qh-hero.is-dark-section + .qh-section:not(.is-dark-section):not(.is-ghost),
  .qh-section:not(.is-dark-section) + .qh-section.is-dark-section,
  .qh-section:not(.is-dark-section) + .qh-cta-section.is-dark-section {
    clip-path: none;
    margin-top: 0;
    padding-top: var(--qh-space-7);
  }

  /* Disable floating shapes on mobile (performance) */
  .qh-hero.is-dark-section::before,
  .qh-cta-section.is-dark-section::before {
    display: none;
  }

  /* Disable gradient text on mobile (can be hard to read at small sizes) */
  .qh-gradient-text,
  .is-dark-section .qh-hero__headline .qh-display-1,
  .is-dark-section .qh-hero__headline .qh-display-2 {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: inherit;
    background-clip: unset;
  }

  /* ── New sections — mobile polish ── */
  .qh-testimonial-carousel__quote { font-size: 20px; line-height: 1.5; }
  .qh-testimonial-carousel__nav { gap: var(--qh-space-3); }
  .qh-testimonial-carousel__dot { width: 12px; height: 12px; }
  .qh-testimonial-carousel__arrow { width: 44px; height: 44px; }
  .qh-trust-strip__logos { gap: var(--qh-space-4); }
  .qh-trust-strip img { width: 56px; height: auto; }
  .qh-video-modal__content { width: 95vw; }
  .qh-video-modal__close { top: var(--qh-space-2); right: var(--qh-space-2); }
  .qh-featured-case-study.is-dark-section .qh-display-2 {
    -webkit-text-fill-color: inherit;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--qh-accent-light);
  }

  /* Disable 3D tilt on mobile (no hover, wastes GPU) */
  .qh-hero-dark__media { perspective: none; }
  .qh-hero-dark__screenshot { will-change: auto; }
}


/* ========================================================================
   PREMIUM INTERACTIONS
   ======================================================================== */

/* Feature 5: Word-by-word hero headline stagger */
.qh-stagger-words .qh-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: qh-word-in var(--qh-duration-premium) var(--qh-ease) forwards;
  animation-delay: calc(var(--i) * 0.06s + 0.2s);
}
@keyframes qh-word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Feature 2: Screenshot 3D tilt + glow */
.qh-hero-dark__media {
  perspective: 1000px;
}
.qh-hero-dark__screenshot {
  transition: transform var(--qh-duration-slow) var(--qh-ease);
  will-change: transform;
}
.qh-hero-dark__glow {
  position: absolute;
  inset: 0;
  border-radius: var(--qh-radius-md);
  pointer-events: none;
  transition: background var(--qh-duration-slow) var(--qh-ease);
}

/* Feature 3: Tab sliding indicator */
.qh-tabs__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--qh-gradient-accent);
  border-radius: 3px 3px 0 0;
  transition: transform var(--qh-duration-slow) var(--qh-ease), width var(--qh-duration-slow) var(--qh-ease);
  pointer-events: none;
}

/* Feature 4: Feature card gradient borders */
.qh-feature-grid__item {
  position: relative;
  background: var(--qh-white);
  border-radius: var(--qh-radius-md);
  transition: transform var(--qh-duration-slow) var(--qh-ease), box-shadow var(--qh-duration-slow) var(--qh-ease);
}
.qh-feature-grid__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--qh-gradient-accent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--qh-duration-slow) var(--qh-ease);
  pointer-events: none;
}
.qh-feature-grid__item:hover::before { opacity: 1; }
.qh-feature-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--qh-shadow-md);
}


/* ========================================================================
   HOMEPAGE VISUAL RHYTHM — New Sections
   ======================================================================== */

/* ── Featured Case Study (dark variant) ── */
.qh-featured-case-study.is-dark-section {
  background: var(--qh-gradient-hero);
  color: var(--qh-white);
}

.qh-featured-case-study.is-dark-section .qh-featured-case-study__logo {
  filter: grayscale(1) brightness(2);
  opacity: 0.8;
}

.qh-featured-case-study.is-dark-section .qh-display-2 {
  background: var(--qh-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Video Modal ── */
.qh-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--qh-duration-slow) var(--qh-ease);
}

.qh-video-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.qh-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.85);
}

.qh-video-modal__content {
  position: relative;
  width: 90vw;
  max-width: 960px;
  transform: scale(0.95);
  transition: transform var(--qh-duration-slow) var(--qh-ease);
}

.qh-video-modal__content.is-open {
  transform: scale(1);
}

.qh-video-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  opacity: 0.7;
  transition: opacity var(--qh-duration) var(--qh-ease);
}

.qh-video-modal__close:hover { opacity: 1; }

.qh-video-modal__embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
  border-radius: var(--qh-radius-md);
  overflow: hidden;
}

.qh-video-modal__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Video Trigger Hover ── */
.qh-video-trigger {
  position: relative;
  cursor: pointer;
  border-radius: var(--qh-radius-md);
  overflow: hidden;
}

.qh-video-trigger__thumb {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s var(--qh-ease);
}

.qh-video-trigger:hover .qh-video-trigger__thumb {
  transform: scale(1.03);
}

.qh-video-trigger__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: var(--qh-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--qh-duration-slow) var(--qh-ease), box-shadow var(--qh-duration-slow) var(--qh-ease);
}

.qh-video-trigger:hover .qh-video-trigger__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--qh-accent) 40%, transparent);
}

/* ── Testimonial Carousel ── */
.qh-testimonial-carousel {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  min-height: 200px;
}

.qh-testimonial-carousel__slide {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.4s var(--qh-ease);
  text-align: center;
}

.qh-testimonial-carousel__slide.is-active {
  opacity: 1;
  position: relative;
}

.qh-testimonial-carousel__quote {
  font-family: var(--qh-font);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-5);
}

.qh-testimonial-carousel__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-3);
}

.qh-testimonial-carousel__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.qh-testimonial-carousel__name {
  font-weight: 600;
  color: var(--qh-heading);
}

.qh-testimonial-carousel__role {
  font-size: 14px;
  color: var(--qh-body);
  opacity: 0.7;
}

.qh-testimonial-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-4);
  margin-top: var(--qh-space-5);
}

.qh-testimonial-carousel__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--qh-border);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--qh-body);
  transition: border-color var(--qh-duration) var(--qh-ease), background-color var(--qh-duration) var(--qh-ease);
}

.qh-testimonial-carousel__arrow:hover {
  border-color: var(--qh-accent);
  background-color: color-mix(in oklch, var(--qh-accent) 5%, transparent);
}

.qh-testimonial-carousel__dots {
  display: flex;
  gap: var(--qh-space-2);
}

.qh-testimonial-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--qh-border);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--qh-duration) var(--qh-ease), transform var(--qh-duration) var(--qh-ease);
}

.qh-testimonial-carousel__dot.is-active {
  background: var(--qh-accent);
  transform: scale(1.25);
}

/* ── Dark Section Helpers ── */
.qh-section.is-dark-section {
  background: var(--qh-gradient-hero);
  color: var(--qh-white);
}

.qh-section.is-dark-section .qh-overline.is-light,
.qh-section.is-dark-section .qh-h2.is-light {
  color: var(--qh-white);
}

.qh-section.is-dark-section .qh-body-lg.is-light {
  color: oklch(1 0 0 / 0.7);
}

/* ── Trust Strip ── */
.qh-trust-strip {
  padding: var(--qh-space-6) 0;
  text-align: center;
}

.qh-trust-strip__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-7);
  flex-wrap: wrap;
}

.qh-trust-strip img {
  filter: grayscale(1);
  opacity: 0.5;
  transition: opacity var(--qh-duration-slow) var(--qh-ease), filter var(--qh-duration-slow) var(--qh-ease);
}

.qh-trust-strip img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ========================================================================
   SCROLL-TRIGGERED ENTRANCES
   ======================================================================== */

/* Scroll progress bar — fixed at top of viewport */
.qh-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--qh-gradient-accent);
  z-index: 9998;
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
}

/* Notification bar entrance */
.qh-notification-bar {
  animation: qh-slide-down var(--qh-duration-premium) var(--qh-ease) forwards;
}

@keyframes qh-slide-down {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section entrance: fade-up (default for all new sections) */
[data-entrance] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--qh-ease), transform 0.7s var(--qh-ease);
}

[data-entrance].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section entrance: fade-in (no vertical shift) */
[data-entrance="fade-in"] {
  transform: none;
}

[data-entrance="fade-in"].is-visible {
  opacity: 1;
}

/* Section entrance: slide-left (content from left) */
[data-entrance="slide-left"] {
  transform: translateX(-40px);
}

[data-entrance="slide-left"].is-visible {
  transform: translateX(0);
}

/* Section entrance: slide-right (media from right) */
[data-entrance="slide-right"] {
  transform: translateX(40px);
}

[data-entrance="slide-right"].is-visible {
  transform: translateX(0);
}

/* Section entrance: scale-up (for impact metrics) */
[data-entrance="scale-up"] {
  transform: scale(0.9);
}

[data-entrance="scale-up"].is-visible {
  transform: scale(1);
}

/* Stagger children (trust strip badges, feature cards) */
[data-entrance-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--qh-duration-premium) var(--qh-ease), transform var(--qh-duration-premium) var(--qh-ease);
}

[data-entrance-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-entrance-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-entrance-stagger].is-visible > *:nth-child(2) { transition-delay: 0.07s; }
[data-entrance-stagger].is-visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-entrance-stagger].is-visible > *:nth-child(4) { transition-delay: 0.21s; }
[data-entrance-stagger].is-visible > *:nth-child(5) { transition-delay: 0.28s; }
[data-entrance-stagger].is-visible > *:nth-child(6) { transition-delay: 0.35s; }

/* ── Reduced Motion Overrides ── */
@media (prefers-reduced-motion: reduce) {
  .qh-video-modal,
  .qh-video-modal__content,
  .qh-testimonial-carousel__slide,
  .qh-testimonial-carousel__dot,
  .qh-testimonial-carousel__arrow,
  .qh-video-trigger__play,
  .qh-video-trigger__thumb,
  .qh-feature-grid__item,
  .qh-feature-grid__item::before,
  .qh-trust-strip img {
    transition-duration: 0.01ms !important;
  }

  .qh-notification-bar { animation: none; }

  [data-entrance],
  [data-entrance-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .qh-scroll-progress { display: none; }

  /* Product hero — no floating, no badge pulse */
  .qh-hero-product__screenshot.is-primary,
  .qh-hero-product__screenshot.is-secondary {
    animation: none !important;
    transform: none !important;
  }
  .qh-hero-badge__dot { animation: none; }
  .qh-hero-product__helix { animation: none; opacity: 1; }
}

/* ========================================================================
   BUILDER CLASS BRIDGE
   Legacy bridge classes (.qh-btn-primary / .qh-btn-secondary) removed.
   All buttons now use canonical System 1: .qh-btn + .is-primary / .is-secondary
   ======================================================================== */

/* ── Navbar layout fix: __bar → __inner equivalent ── */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--qh-grid-max);
  margin: 0 auto;
  padding: 0 var(--qh-space-6);
}

  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
}

  position: relative;
  list-style: none;
}

  position: static;
  display: flex;
  align-items: center;
}

  font-size: 16px;
  font-weight: 500;
  color: var(--qh-heading);
  text-decoration: none;
  transition: color var(--qh-duration) var(--qh-ease);
}
  color: oklch(1 0 0 / 0.7);
}
  color: var(--qh-white);
}

  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}


/* Typography bridge */
.qh-display-hero {
  font-size: clamp(36px, 3.6vw + 12px, 76px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ── Logo Strip ── */
.qh-logos {
  padding: var(--qh-space-6) 0;
  overflow: hidden;
  background: var(--qh-white);
}
.qh-logos__label {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--qh-space-4);
}
.qh-logos__track {
  display: flex;
  align-items: center;
  gap: var(--qh-space-8);
  animation: qh-logos-scroll 30s linear infinite;
  width: max-content;
}
@keyframes qh-logos-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.qh-logos__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--qh-heading);
  white-space: nowrap;
  opacity: 0.5;
  flex-shrink: 0;
}
.qh-logos__mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--qh-accent);
}
.qh-logos__fade,
.qh-logos__fade--left,
.qh-logos__fade--right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
.qh-logos__fade--left { left: 0; background: linear-gradient(90deg, var(--qh-white), transparent); }
.qh-logos__fade--right { right: 0; background: linear-gradient(270deg, var(--qh-white), transparent); }
.qh-logos { position: relative; }

/* ── Feature Cards Grid ── */
.qh-features {
  padding: var(--qh-space-10) 0;
  background: var(--qh-white);
}
.qh-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-5);
}
.qh-features__card {
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
  transition: transform var(--qh-duration) var(--qh-ease),
              box-shadow var(--qh-duration) var(--qh-ease);
}
.qh-features__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.08);
}
.qh-features__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--qh-accent) 10%, transparent);
  border-radius: var(--qh-radius-md);
  color: var(--qh-accent);
  margin-bottom: var(--qh-space-4);
}
.qh-features__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--qh-space-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--qh-accent);
  text-decoration: none;
}

/* ── Feature Row Product Mockups ── */
.qh-mock {
  background: oklch(0.14 0.04 265);
  border-radius: var(--qh-radius-md);
  overflow: hidden;
  box-shadow: 0 25px 60px oklch(0 0 0 / 0.25);
}
.qh-mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: oklch(0.12 0.03 265);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.qh-mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.12);
}
.qh-mock__dot:nth-child(1) { background: var(--qh-window-close); }
.qh-mock__dot:nth-child(2) { background: var(--qh-window-minimize); }
.qh-mock__dot:nth-child(3) { background: var(--qh-window-maximize); }
.qh-mock__bar-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: oklch(1 0 0 / 0.4);
}
.qh-mock__body {
  padding: 16px;
}
.qh-mock__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--qh-radius-sm);
}
.qh-mock__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.qh-mock__status--pass { background: oklch(from var(--qh-success) l c h / 0.15); color: var(--qh-success); }
.qh-mock__status--pass .qh-mock__status-dot { background: var(--qh-success); }
.qh-mock__status--warn { background: oklch(from var(--qh-warning) l c h / 0.15); color: var(--qh-warning); }
.qh-mock__status--warn .qh-mock__status-dot { background: var(--qh-warning); }
.qh-mock__status--info { background: oklch(from var(--qh-accent) l c h / 0.15); color: var(--qh-accent); }
.qh-mock__status--info .qh-mock__status-dot { background: var(--qh-accent); }
.qh-mock__status--fail { background: oklch(from var(--qh-error) l c h / 0.15); color: var(--qh-error); }
.qh-mock__status--fail .qh-mock__status-dot { background: var(--qh-error); }

/* QMS mock — document table */
.qh-mock-qms__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qh-mock-qms__title { font-size: 13px; font-weight: 600; color: var(--qh-white); }
.qh-mock-qms__badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--qh-radius-sm); background: oklch(from var(--qh-accent) l c h / 0.15); color: var(--qh-accent); }
.qh-mock-qms__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: oklch(1 0 0 / 0.6);
}
.qh-mock-qms__table th {
  text-align: left;
  font-weight: 600;
  color: oklch(1 0 0 / 0.4);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
  padding: 6px 8px;
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.qh-mock-qms__table td {
  padding: 8px;
  border-bottom: 1px solid oklch(1 0 0 / 0.04);
}

/* DMS mock — document timeline */
.qh-mock-dms__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qh-mock-dms__title { font-size: 13px; font-weight: 600; color: var(--qh-white); }
.qh-mock-dms__timeline { display: flex; flex-direction: column; gap: 8px; }
.qh-mock-dms__entry { background: oklch(1 0 0 / 0.03); border-radius: var(--qh-radius); padding: 10px; border: 1px solid oklch(1 0 0 / 0.06); }
.qh-mock-dms__entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qh-mock-dms__version { font-size: 11px; font-weight: 700; color: var(--qh-accent); }
.qh-mock-dms__date { font-size: 10px; color: oklch(1 0 0 / 0.4); }
.qh-mock-dms__desc { font-size: 11px; color: oklch(1 0 0 / 0.6); margin-bottom: 4px; }
.qh-mock-dms__file { font-size: 10px; color: oklch(1 0 0 / 0.4); }
.qh-mock-dms__author { display: flex; align-items: center; gap: 6px; font-size: 10px; color: oklch(1 0 0 / 0.5); margin-top: 4px; }
.qh-mock-dms__avatar { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--qh-accent), oklch(0.5 0.18 340)); }

/* HSE mock — incident form */
.qh-mock-hse { padding: 16px; }
.qh-mock-hse__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qh-mock-hse__title { font-size: 13px; font-weight: 600; color: var(--qh-white); }
.qh-mock-hse__severity { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--qh-radius-sm); }
.qh-mock-hse__field { margin-bottom: 8px; }
.qh-mock-hse__label { display: block; font-size: 10px; font-weight: 600; color: oklch(1 0 0 / 0.4); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.qh-mock-hse__value { font-size: 12px; color: oklch(1 0 0 / 0.7); padding: 6px 8px; background: oklch(1 0 0 / 0.04); border-radius: var(--qh-radius-sm); border: 1px solid oklch(1 0 0 / 0.06); }
.qh-mock-hse__photo-row { display: flex; gap: 6px; margin-top: 8px; }
.qh-mock-hse__photo { width: 48px; height: 48px; border-radius: var(--qh-radius-sm); background: oklch(1 0 0 / 0.06); }
.qh-mock-hse__btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 11px; font-weight: 600; background: var(--qh-accent); color: var(--qh-white); border-radius: var(--qh-radius-sm); border: none; margin-top: 8px; }

/* Audit mock */
.qh-mock-audit__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qh-mock-audit__title { font-size: 13px; font-weight: 600; color: var(--qh-white); }
.qh-mock-audit__list { display: flex; flex-direction: column; gap: 6px; }
.qh-mock-audit__item { display: flex; align-items: center; gap: 8px; padding: 8px; background: oklch(1 0 0 / 0.03); border-radius: var(--qh-radius-sm); border: 1px solid oklch(1 0 0 / 0.06); }
.qh-mock-audit__check { width: 16px; height: 16px; border-radius: var(--qh-radius-sm); border: 1.5px solid oklch(1 0 0 / 0.15); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.qh-mock-audit__item-text { font-size: 11px; color: oklch(1 0 0 / 0.6); flex: 1; }
.qh-mock-audit__item-tag { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.qh-mock-audit__item.is-checked { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); }
.qh-mock-audit__item.is-checked .qh-mock-audit__check { background: var(--qh-success); border-color: var(--qh-success); }
.qh-mock-audit__item.is-checked .qh-mock-audit__item-text { color: var(--qh-body); text-decoration: line-through; }
.qh-mock-audit__progress-wrap { margin-top: 12px; }
.qh-mock-audit__progress-text { display: flex; justify-content: space-between; font-size: 10px; color: oklch(1 0 0 / 0.4); margin-bottom: 4px; }
.qh-mock-audit__progress-bar { height: 6px; background: oklch(1 0 0 / 0.06); border-radius: 3px; overflow: hidden; }
.qh-mock-audit__progress-fill { height: 100%; background: var(--qh-success); border-radius: 3px; }

/* ── Tabs Section ── */
.qh-tabs-section {
  padding: var(--qh-space-10) 0;
  background: var(--qh-white);
}
.qh-tabs__panels {
  display: grid;
  gap: var(--qh-space-6);
}
.qh-tabs__panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-4);
}
.qh-tabs__panel-item {
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-5);
}
.qh-tabs__panel-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--qh-space-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--qh-accent);
  text-decoration: none;
}

/* ── Expandable Case Studies ── */
.qh-expandable-section {
  padding: var(--qh-space-10) 0;
  background: var(--qh-ghost);
}
.qh-expandable {
  background: var(--qh-white);
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  margin-bottom: var(--qh-space-3);
  border: 1px solid var(--qh-border);
  transition: box-shadow var(--qh-duration) var(--qh-ease);
}
.qh-expandable:hover {
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.06);
}
.qh-expandable__summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--qh-space-4);
  padding: var(--qh-space-5) var(--qh-space-6);
  cursor: pointer;
}
.qh-expandable__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--qh-radius-md);
  background: var(--qh-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qh-expandable__text {
  font-size: 16px;
  font-weight: 600;
  color: var(--qh-heading);
}
.qh-expandable__meta {
  font-size: 14px;
  color: var(--qh-body);
}
.qh-expandable__metric {
  text-align: right;
}
.qh-expandable__metric-label {
  font-size: 11px;
  color: var(--qh-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qh-expandable__toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--qh-ghost);
  transition: transform var(--qh-duration) var(--qh-ease);
}
.qh-expandable__detail {
  padding: 0 var(--qh-space-6) var(--qh-space-6);
  display: none;
}
.qh-expandable__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-4);
  margin-bottom: var(--qh-space-4);
}
.qh-expandable__quote {
  font-size: 15px;
  font-style: italic;
  color: var(--qh-body);
  padding-left: var(--qh-space-4);
  border-left: 3px solid var(--qh-accent);
}

/* ── Testimonials ── */
.qh-testimonials-section {
  padding: var(--qh-space-10) 0;
  background: var(--qh-ghost);
}
.qh-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qh-space-5);
}
.qh-testimonial__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--qh-body);
  margin-bottom: var(--qh-space-4);
}
.qh-testimonial__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--qh-space-3);
  color: var(--qh-warning);
}
.qh-testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--qh-accent), oklch(0.5 0.18 340));
}
.qh-testimonial__divider {
  width: 40px;
  height: 2px;
  background: var(--qh-border);
  margin: var(--qh-space-3) 0;
}
.qh-testimonial__quote-mark {
  font-size: 48px;
  line-height: 1;
  color: var(--qh-accent);
  opacity: 0.2;
}

/* ── Carousel (Testimonial slider) ── */
.qh-carousel-section {
  padding: var(--qh-space-10) 0;
  background: var(--qh-white);
}
.qh-carousel {
  position: relative;
  overflow: hidden;
}
.qh-carousel__card {
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-lg);
  padding: var(--qh-space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--qh-space-5);
  align-items: center;
}
.qh-carousel__image {
  width: 120px;
  height: 120px;
  border-radius: var(--qh-radius-md);
  background: oklch(0.95 0 0);
  overflow: hidden;
  flex-shrink: 0;
}
.qh-carousel__image-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--qh-accent);
}
.qh-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--qh-space-3);
}
.qh-carousel__metric {
  font-size: 14px;
  font-weight: 600;
  color: var(--qh-success);
}
.qh-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qh-space-3);
  margin-top: var(--qh-space-5);
}
.qh-carousel__nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--qh-border);
  background: var(--qh-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--qh-duration) var(--qh-ease);
}
.qh-carousel__nav-btn:hover {
  border-color: var(--qh-accent);
  color: var(--qh-accent);
}

/* ── Promo Cards ── */
.qh-promo-section {
  padding: var(--qh-space-10) 0;
  background: var(--qh-ghost);
}
.qh-promo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qh-space-5);
}
.qh-promo-card {
  background: var(--qh-white);
  border-radius: var(--qh-radius-xl);
  padding: var(--qh-space-8);
  position: relative;
  overflow: hidden;
  transition: transform var(--qh-duration) var(--qh-ease),
              box-shadow var(--qh-duration) var(--qh-ease);
}
.qh-promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.08);
}
.qh-promo-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--qh-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--qh-space-4);
}
.qh-promo-card--indigo .qh-promo-card__icon { background: color-mix(in oklch, var(--qh-accent) 10%, transparent); color: var(--qh-accent); }
.qh-promo-card--cyan .qh-promo-card__icon { background: oklch(0.85 0.1 200); color: oklch(0.45 0.15 200); }
.qh-promo-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--qh-heading);
  margin-bottom: var(--qh-space-2);
}
.qh-promo-card__desc {
  font-size: 15px;
  color: var(--qh-body);
  line-height: 1.6;
  margin-bottom: var(--qh-space-5);
}
.qh-promo-card__deco {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  opacity: 0.04;
}
.qh-promo-card--indigo .qh-promo-card__deco { background: var(--qh-accent); }
.qh-promo-card--cyan .qh-promo-card__deco { background: oklch(0.45 0.15 200); }

/* ── FAQ Section ── */
.qh-faq-section {
  padding: var(--qh-space-10) 0;
  background: var(--qh-white);
}

/* ── Footer extras ── */
.qh-footer__brand-desc {
  font-size: 14px;
  color: oklch(1 0 0 / 0.75);
  line-height: 1.6;
  margin-top: var(--qh-space-3);
  max-width: 280px;
}
.qh-footer__socials {
  display: flex;
  gap: var(--qh-space-3);
  margin-top: var(--qh-space-4);
}
.qh-footer__copy {
  font-size: 13px;
  color: oklch(1 0 0 / 0.35);
  margin-top: var(--qh-space-6);
  padding-top: var(--qh-space-5);
  border-top: 1px solid oklch(1 0 0 / 0.06);
}
.qh-footer__contact-link {
  color: oklch(1 0 0 / 0.7);
  text-decoration: none;
}
.qh-footer__contact-link:hover {
  color: var(--qh-on-dark);
}
.qh-footer__address {
  margin-top: var(--qh-space-3);
  font-size: 11px;
  color: oklch(1 0 0 / 0.4);
  line-height: 1.5;
}
.qh-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--qh-radius);
  background: oklch(1 0 0 / 0.06);
  border: 1px solid oklch(1 0 0 / 0.08);
  color: oklch(1 0 0 / 0.4);
  transition: all var(--qh-duration) var(--qh-ease);
}
.qh-footer__social-link:hover {
  background: oklch(1 0 0 / 0.12);
  color: oklch(1 0 0 / 0.8);
}
.qh-footer__badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(1 0 0 / 0.08);
  color: oklch(1 0 0 / 0.5);
}

/* ── Mega menu missing subclasses ── */

/* ── CTA link ── */
.qh-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: oklch(1 0 0 / 0.5);
  text-decoration: none;
  margin-top: var(--qh-space-3);
}
.qh-cta__link:hover { color: oklch(1 0 0 / 0.8); }

/* ── Feature row link ── */
.qh-feature-row__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--qh-accent);
  text-decoration: none;
  margin-top: var(--qh-space-4);
}
.qh-feature-row__link:hover { gap: 10px; }

/* ── Hero slice white variant ── */
.qh-hero__slice-white {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--qh-white);
  clip-path: polygon(0 100%, 100% 40%, 100% 100%);
}

/* ── Scroll-triggered reveal ── */
.qh-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.qh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Fallback: show content if JS hasn't run after 2s */
@supports (animation-timeline: view()) {
  .qh-reveal {
    opacity: 1;
    transform: none;
  }
}
/* Simple fallback — make visible anyway after load */
.qh-reveal {
  opacity: 1;
  transform: none;
}
.qh-reveal-stagger > * {
  opacity: 1;
}

/* ── Builder responsive adjustments ── */
@media (max-width: 1023px) {
  .qh-features__grid { grid-template-columns: repeat(2, 1fr); }
  .qh-testimonials { grid-template-columns: repeat(2, 1fr); }
  .qh-promo-pair { grid-template-columns: 1fr; }
  .qh-tabs__panel-grid { grid-template-columns: repeat(2, 1fr); }
  .qh-hero__grid { grid-template-columns: 1fr; }
  .qh-hero__media { display: none; }
  .qh-expandable__summary { grid-template-columns: auto 1fr auto; }
  .qh-expandable__metric { display: none; }
}

@media (max-width: 767px) {
  .qh-features__grid { grid-template-columns: 1fr; }
  .qh-testimonials { grid-template-columns: 1fr; }
  .qh-carousel__card { grid-template-columns: 1fr; }
  .qh-tabs__panel-grid { grid-template-columns: 1fr; }
  .qh-expandable__row { grid-template-columns: 1fr; }
  .qh-expandable__summary { grid-template-columns: 1fr; gap: var(--qh-space-3); }
  .qh-hero__dash-stats { grid-template-columns: repeat(2, 1fr); }
  .qh-hero__dash-bottom { grid-template-columns: 1fr; }
}

    /* ================================================================
       Q-HUB DESIGN SYSTEM V2 — HOMEPAGE HERO PROTOTYPE
       Self-contained: all tokens, fonts, styles inline.
       North star: Stripe.com — premium through spatial confidence.
       ================================================================ */

    /* ── Font Faces ── */
    @font-face {
      font-family: 'Satoshi';
      font-style: normal;
      font-weight: 300 900;
      font-display: swap;
      src: url('/theme/assets/fonts/satoshi-variable.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/theme/assets/fonts/inter-variable.woff2') format('woff2');
    }

    /* ── Design Tokens ── */
    :root {
      /* Colors: Primary — deep sapphire with luminous accents */
      --qh-dark: #091D6B;
      --qh-dark-end: #050D30;
      --qh-accent: #3B82F6;
      --qh-accent-hover: #2563EB;
      --qh-accent-light: #60A5FA;
      --qh-secondary: #8B5CF6;

      /* Colors: Warm Accent */
      --qh-warm: #E5A835;
      --qh-warm-hover: #C78F2A;
      --qh-warm-light: #F5D77E;

      /* Colors: Semantic */
      --qh-success: #10B981;
      --qh-warning: #F59E0B;
      --qh-error: #EF4444;
      --qh-info: #06B6D4;

      /* Colors: Neutral */
      --qh-white: #ffffff;
      --qh-ghost: #f4f6fa;
      --qh-border: #e2e8f0;
      --qh-body: #475569;
      --qh-heading: #0f172a;
      --qh-surface-dark: #0C1847;

      /* Typography */
      --qh-font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
      --qh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      /* Spacing */
      --qh-grid-max: 1264px;
      --qh-grid-gutter: 32px;

      /* Transitions */
      --qh-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
      --qh-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
      --qh-duration: 200ms;
      --qh-duration-slow: 300ms;

      /* Shadows */
      --qh-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --qh-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
      --qh-shadow-md: 0 8px 32px rgba(0,0,0,0.08);
      --qh-shadow-lg: 0 24px 48px rgba(0,0,0,0.12);
      --qh-shadow-xl: 0 32px 64px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.08);

      /* Radii */
      --qh-radius-sm: 6px;
      --qh-radius: 8px;
      --qh-radius-md: 12px;
      --qh-radius-lg: 16px;
      --qh-radius-xl: 24px;
    }

    /* ── Reset ── */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      font-family: var(--qh-font-body);
      font-size: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      scroll-behavior: smooth;
    }

    body {
      color: var(--qh-body);
      background: var(--qh-white);
      line-height: 1.6;
      overflow-x: hidden;
    }

    ::selection {
      background: rgba(59, 130, 246, 0.2);
      color: var(--qh-heading);
    }

    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }

    /* ── Focus Styles ── */
    :focus-visible {
      outline: 3px solid var(--qh-accent);
      outline-offset: 2px;
    }
    :focus:not(:focus-visible) { outline: none; }

    /* ── Skip Link ── */
    .qh-skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      padding: 8px 16px;
      background: var(--qh-accent);
      color: var(--qh-white);
      font-size: 14px;
      font-weight: 500;
      border-radius: var(--qh-radius);
      z-index: 10000;
    }
    .qh-skip-link:focus { top: 16px; }

    /* ── Container ── */
    .qh-container {
      width: 100%;
      max-width: var(--qh-grid-max);
      margin: 0 auto;
      padding-left: var(--qh-grid-gutter);
      padding-right: var(--qh-grid-gutter);
    }

    /* ── Typography Classes ── */
    .qh-display-hero {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: clamp(40px, 3.5vw + 12px, 64px);
      line-height: 1.08;
      letter-spacing: -0.025em;
      color: var(--qh-heading);
    }

    .qh-display-1 {
      font-family: var(--qh-font-display);
      font-weight: 800;
      font-size: clamp(36px, 4vw + 12px, 64px);
      line-height: 1.0;
      letter-spacing: -0.035em;
    }

    .qh-display-2 {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: clamp(32px, 3vw + 12px, 52px);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .qh-h2 {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: clamp(28px, 2.5vw + 8px, 36px);
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--qh-heading);
    }

    .qh-h3 {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: clamp(22px, 1.5vw + 8px, 28px);
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--qh-heading);
    }

    .qh-h4 {
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 22px;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--qh-heading);
    }

    .qh-body-lg {
      font-family: var(--qh-font-body);
      font-weight: 400;
      font-size: clamp(18px, 1vw + 10px, 20px);
      line-height: 1.6;
    }

    .qh-body {
      font-family: var(--qh-font-body);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.6;
    }

    .qh-body-sm {
      font-family: var(--qh-font-body);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.55;
    }

    .qh-overline {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 13px;
      line-height: 1.3;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .qh-caption {
      font-family: var(--qh-font-body);
      font-weight: 500;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.01em;
    }


    /* ── Notification Bar ── */
    .qh-notification-bar {
      position: relative;
      z-index: 1001;
      background: var(--qh-accent);
      color: var(--qh-white);
      font-family: var(--qh-font-body);
      font-size: 14px;
      font-weight: 500;
      padding: 10px 0;
      text-align: center;
      overflow: hidden;
      max-height: 50px;
      transition: max-height 0.4s var(--qh-ease), opacity var(--qh-duration-slow) var(--qh-ease), padding 0.4s var(--qh-ease);
    }
    .qh-notification-bar.is-dismissed {
      max-height: 0;
      opacity: 0;
      padding: 0;
    }
    .qh-notification-bar .qh-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .qh-notification-bar p {
      margin: 0;
      line-height: 1.4;
    }
    .qh-notification-bar strong {
      font-weight: 700;
    }
    .qh-notification-bar__link {
      color: var(--qh-white);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: rgba(255,255,255,0.4);
      transition: text-decoration-color var(--qh-duration-fast) var(--qh-ease);
    }
    .qh-notification-bar__link:hover {
      text-decoration-color: rgba(255,255,255,0.9);
    }
    .qh-notification-bar__close {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(255,255,255,0.6);
      font-size: 20px;
      cursor: pointer;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: color var(--qh-duration-fast) var(--qh-ease), background var(--qh-duration-fast) var(--qh-ease);
    }
    .qh-notification-bar__close:hover {
      color: var(--qh-white);
      background: rgba(255,255,255,0.15);
    }

    /* ================================================================
       NAVBAR — Sticky, frosted glass on scroll, mega-menu dropdowns
       ================================================================ */
    .qh-navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0;
      background: var(--qh-white);
      /* Themeable nav colors — dark text by default */
      --nav-text: var(--qh-body);
      --nav-text-hover: var(--qh-heading);
      --nav-text-strong: var(--qh-heading);
      --nav-hover-bg: rgba(0,0,0,0.04);
      --nav-pill-bg: rgba(0,0,0,0.05);
      transition: background var(--qh-duration-slow) var(--qh-ease),
                  backdrop-filter var(--qh-duration-slow) var(--qh-ease),
                  box-shadow var(--qh-duration-slow) var(--qh-ease);
    }

    .qh-navbar.is-scrolled {
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(20px) saturate(1.2);
      -webkit-backdrop-filter: blur(20px) saturate(1.2);
      box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.04);
    }

    .qh-navbar__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      height: 64px;
    }

    .qh-navbar__logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .qh-navbar__logo img {
      height: 32px;
      width: auto;
      display: block;
    }

    /* ── Nav links row ── */
    .qh-navbar__links {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
      flex: 1;
      justify-content: center;
      position: relative;
    }

    .qh-navbar__item {
      position: relative;
    }

    .qh-navbar__link {
      font-family: var(--qh-font-body);
      font-weight: 500;
      font-size: 15px;
      color: var(--nav-text);
      padding: 8px 12px;
      border-radius: var(--qh-radius);
      transition: color var(--qh-duration) var(--qh-ease),
                  background var(--qh-duration) var(--qh-ease);
      display: flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    .qh-navbar__link:hover,
    .qh-navbar__item.is-open > .qh-navbar__link {
      color: var(--nav-text-hover);
      background: var(--nav-hover-bg);
    }

    .qh-navbar__chevron {
      width: 10px;
      height: 10px;
      transition: transform var(--qh-duration) var(--qh-ease);
      opacity: 0.5;
    }
    .qh-navbar__item.is-open > .qh-navbar__link .qh-navbar__chevron {
      transform: rotate(180deg);
      opacity: 0.8;
    }

    /* ── Right-side actions ── */
    .qh-navbar__actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .qh-navbar__login {
      font-family: var(--qh-font-body);
      font-weight: 500;
      font-size: 15px;
      color: var(--nav-text);
      padding: 8px 16px;
      transition: color var(--qh-duration) var(--qh-ease);
    }
    .qh-navbar__login:hover { color: var(--nav-text-hover); }

    .qh-navbar__cta {
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 14px;
      color: var(--qh-white);
      background: var(--qh-accent);
      padding: 10px 20px;
      border-radius: var(--qh-radius-full);
      transition: transform var(--qh-duration) var(--qh-ease),
                  box-shadow var(--qh-duration) var(--qh-ease),
                  background var(--qh-duration) var(--qh-ease);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }
    .qh-navbar__cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
      background: var(--qh-accent-hover);
    }

    /* Mobile nav toggle */
    .qh-navbar__toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
      color: var(--nav-text-strong);
      transition: color var(--qh-duration-slow) var(--qh-ease);
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
    }

    /* ── Mega menu overlay (dims + blurs page behind) ── */
    .qh-mega-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.08);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 998;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--qh-duration-slow) var(--qh-ease),
                  visibility var(--qh-duration-slow);
    }
    .qh-mega-overlay.is-visible {
      opacity: 1;
      visibility: visible;
    }

    /* ── Mega menu panel ── */
    .qh-mega {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--qh-white);
      border-top: 1px solid var(--qh-border);
      box-shadow: 0 16px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
      padding: 28px 0 32px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity var(--qh-duration) var(--qh-ease),
                  transform var(--qh-duration) var(--qh-ease),
                  visibility var(--qh-duration);
      z-index: 999;
    }
    .qh-mega.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Column layouts */
    .qh-mega__cols {
      display: grid;
      gap: 0;
    }
    .qh-mega--3col .qh-mega__cols {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .qh-mega--2col .qh-mega__cols {
      grid-template-columns: 1fr 1fr;
    }

    .qh-mega__col {
      padding: 0 24px;
      border-right: 1px solid var(--qh-border);
    }
    .qh-mega__col:last-child {
      border-right: none;
    }

    .qh-mega__col-title {
      font-family: var(--qh-font-body);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--qh-body);
      padding-bottom: 10px;
      margin-bottom: 4px;
    }

    /* Individual menu items */
    .qh-mega__item {
      display: block;
      padding: 10px 12px;
      border-radius: var(--qh-radius);
      transition: background 150ms var(--qh-ease),
                  transform 150ms var(--qh-ease),
                  border-color 150ms var(--qh-ease);
      text-decoration: none;
      border-left: 2px solid transparent;
    }
    .qh-mega__item:hover {
      background: var(--qh-ghost);
      border-left-color: var(--qh-accent);
      transform: translateX(2px);
    }

    .qh-mega__item-title {
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 14px;
      color: var(--qh-heading);
      line-height: 1.3;
    }
    .qh-mega__item-desc {
      font-family: var(--qh-font-body);
      font-weight: 400;
      font-size: 12px;
      color: var(--qh-body);
      line-height: 1.4;
      margin-top: 2px;
    }

    /* Column title underline on hover */
    .qh-mega__col-title {
      position: relative;
      padding-bottom: 8px;
    }
    .qh-mega__col-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 24px;
      height: 2px;
      background: var(--qh-accent);
      border-radius: 2px;
      opacity: 0.4;
    }

    /* "New" / "Popular" badge on menu items */
    .qh-mega__item-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 6px;
      border-radius: var(--qh-radius-full);
      background: var(--qh-accent);
      color: var(--qh-on-dark);
      margin-left: 6px;
      vertical-align: middle;
    }

    /* Mega footer — dual CTA */
    .qh-mega__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--qh-border);
      padding-top: 16px;
      margin-top: 20px;
    }
    .qh-mega__footer-link {
      font-size: 14px;
      font-weight: 600;
      color: var(--qh-accent);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap 200ms var(--qh-ease);
    }
    .qh-mega__footer-link:hover { gap: 8px; }
    .qh-mega__footer-cta {
      font-size: 13px;
      font-weight: 600;
      color: var(--qh-white);
      background: var(--qh-accent);
      padding: 8px 16px;
      border-radius: var(--qh-radius-full);
      text-decoration: none;
      transition: background 150ms var(--qh-ease), transform 150ms var(--qh-ease);
    }
    .qh-mega__footer-cta:hover {
      background: var(--qh-accent-hover, #2563EB);
      transform: translateY(-1px);
    }

    /* ── 1. Sliding pill indicator (under active nav link) ── */
    .qh-navbar__pill {
      position: absolute;
      height: 34px;
      border-radius: var(--qh-radius);
      background: var(--nav-pill-bg);
      transition: left 280ms var(--qh-ease-spring),
                  width 280ms var(--qh-ease-spring),
                  opacity 180ms var(--qh-ease);
      opacity: 0;
      pointer-events: none;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;
    }
    .qh-navbar__pill.is-active {
      opacity: 1;
    }

    /* ── 2. Staggered mega item entrance ── */
    @keyframes qh-mega-item-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .qh-mega.is-open .qh-mega__item,
    .qh-mega.is-open .qh-mega__featured {
      animation: qh-mega-item-in 280ms var(--qh-ease) both;
      animation-delay: calc(var(--mega-i, 0) * 30ms);
    }
    @media (prefers-reduced-motion: reduce) {
      .qh-mega.is-open .qh-mega__item,
      .qh-mega.is-open .qh-mega__featured {
        animation: none;
        opacity: 1;
      }
    }

    /* ── 3. Featured card (promotional link in mega panel) ── */
    .qh-mega__featured {
      margin: 20px 24px 0;
      padding: 14px 18px;
      border-radius: var(--qh-radius-md);
      background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(139,92,246,0.05) 100%);
      border: 1px solid rgba(59,130,246,0.08);
      display: flex;
      align-items: center;
      gap: 14px;
      transition: border-color var(--qh-duration) var(--qh-ease),
                  background var(--qh-duration) var(--qh-ease);
      text-decoration: none;
    }
    .qh-mega__featured:hover {
      border-color: rgba(59,130,246,0.2);
      background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.08) 100%);
    }
    .qh-mega__featured-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--qh-accent), var(--qh-secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--qh-white);
    }
    .qh-mega__featured-text { flex: 1; min-width: 0; }
    .qh-mega__featured-title {
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 13px;
      color: var(--qh-heading);
      line-height: 1.3;
    }
    .qh-mega__featured-desc {
      font-family: var(--qh-font-body);
      font-weight: 400;
      font-size: 12px;
      color: var(--qh-body);
      line-height: 1.4;
      margin-top: 1px;
    }
    .qh-mega__featured-arrow {
      font-size: 16px;
      color: var(--qh-accent);
      transition: transform var(--qh-duration) var(--qh-ease);
      flex-shrink: 0;
    }
    .qh-mega__featured:hover .qh-mega__featured-arrow {
      transform: translateX(3px);
    }

    /* ── 4. Panel footer bar ── */
    .qh-mega__footer {
      margin: 16px 24px 0;
      padding: 12px 0 0;
      border-top: 1px solid var(--qh-border);
      display: flex;
      align-items: center;
    }
    .qh-mega__footer-link {
      font-family: var(--qh-font-body);
      font-weight: 500;
      font-size: 13px;
      color: var(--qh-accent);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: gap var(--qh-duration) var(--qh-ease);
    }
    .qh-mega__footer-link:hover {
      gap: 10px;
    }


    /* ================================================================
       MOBILE NAV — Stripe-style slide panel navigation
       ================================================================ */
    .qh-mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 1001;
      background: var(--qh-white);
      transform: translateY(100%);
      transition: transform var(--qh-duration-premium) var(--qh-ease-spring);
      overflow: hidden;
    }
    .qh-mobile-nav.is-open {
      transform: translateY(0);
    }

    /* Slide panels (each panel is a full-screen page) */
    .qh-mobile-nav__panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      background: var(--qh-white);
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .qh-mobile-nav__panel[data-level="1"] {
      transform: translateX(0);
    }
    .qh-mobile-nav__panel.is-active {
      transform: translateX(0);
    }
    .qh-mobile-nav__panel.is-exiting-left {
      transform: translateX(-30%);
    }

    /* Top bar with logo/back + close */
    .qh-mobile-nav__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      padding: 0 var(--qh-space-4);
      border-bottom: 1px solid var(--qh-border);
      flex-shrink: 0;
    }
    .qh-mobile-nav__header .qh-navbar__logo {
      height: 32px;
    }
    .qh-mobile-nav__header .qh-navbar__logo img {
      height: 32px;
      width: auto;
    }
    .qh-mobile-nav__close {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--qh-heading);
      border-radius: var(--qh-radius);
      transition: background var(--qh-duration-fast) var(--qh-ease);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .qh-mobile-nav__close:hover {
      background: var(--qh-ghost);
    }

    /* Back button (Level 2 headers) */
    .qh-mobile-nav__back {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--qh-font-body);
      font-size: 15px;
      font-weight: 500;
      color: var(--qh-accent);
      padding: 8px 4px;
      border-radius: var(--qh-radius);
      transition: background var(--qh-duration-fast) var(--qh-ease);
    }
    .qh-mobile-nav__back:hover {
      background: var(--qh-ghost);
    }

    /* Scrollable body */
    .qh-mobile-nav__body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px 20px;
    }

    /* Level 1: Parent link with chevron right */
    .qh-mobile-nav__link {
      display: block;
      padding: 16px 0;
      border-bottom: 1px solid var(--qh-border);
      text-decoration: none;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 17px;
      color: var(--qh-heading);
      transition: color var(--qh-duration-fast) var(--qh-ease);
    }
    .qh-mobile-nav__link:hover {
      color: var(--qh-accent);
    }
    .qh-mobile-nav__link.is-parent {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: none;
      border-left: none;
      border-right: none;
      border-top: none;
      border-bottom: 1px solid var(--qh-border);
      cursor: pointer;
    }
    .qh-mobile-nav__link.is-parent svg {
      color: var(--qh-body);
      flex-shrink: 0;
    }

    /* Level 2: Panel title */
    .qh-mobile-nav__panel-title {
      font-family: var(--qh-font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--qh-heading);
      margin: 8px 0 0;
      line-height: 1.2;
    }

    /* Accent divider below title */
    .qh-mobile-nav__panel-divider {
      width: 40px;
      height: 3px;
      background: var(--qh-accent);
      border-radius: 2px;
      margin: 12px 0 16px;
    }

    /* Group heading inside panel */
    .qh-mobile-nav__group-title {
      font-family: var(--qh-font-body);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--qh-body);
      padding: 16px 0 6px;
    }

    /* Level 2: Item with title + description */
    .qh-mobile-nav__item {
      display: block;
      padding: 14px 0;
      border-bottom: 1px solid var(--qh-border);
      text-decoration: none;
      transition: background var(--qh-duration-fast) var(--qh-ease);
    }
    .qh-mobile-nav__item:last-child {
      border-bottom: none;
    }
    .qh-mobile-nav__item:hover {
      background: var(--qh-ghost);
    }
    .qh-mobile-nav__item-title {
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 15px;
      color: var(--qh-accent);
      display: block;
      line-height: 1.3;
    }
    .qh-mobile-nav__item-desc {
      font-family: var(--qh-font-body);
      font-size: 13px;
      color: var(--qh-body);
      display: block;
      margin-top: 2px;
      line-height: 1.4;
    }

    /* Bottom actions (sticky in each panel) */
    .qh-mobile-nav__footer {
      padding: 16px var(--qh-space-4);
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--qh-border);
      display: flex;
      flex-direction: row;
      gap: 10px;
      flex-shrink: 0;
    }
    .qh-mobile-nav__footer-cta {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 15px;
      color: var(--qh-white);
      background: var(--qh-accent);
      padding: 14px 20px;
      border-radius: var(--qh-radius-full);
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }
    .qh-mobile-nav__footer-secondary {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--qh-font-body);
      font-weight: 500;
      font-size: 15px;
      color: var(--qh-heading);
      padding: 14px 20px;
      text-decoration: none;
      border: 1px solid var(--qh-border);
      border-radius: var(--qh-radius-full);
      transition: all var(--qh-duration) var(--qh-ease);
    }
    .qh-mobile-nav__footer-secondary:hover {
      border-color: var(--qh-heading);
    }

    /* Group titles in Level 2 panels */
    .qh-mobile-nav__group-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--qh-muted);
      padding: 20px 0 8px;
    }

    /* Item title + description hierarchy */
    .qh-mobile-nav__item-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--qh-heading);
    }
    .qh-mobile-nav__item-desc {
      font-size: 13px;
      color: var(--qh-muted);
      margin-top: 2px;
      line-height: 1.4;
    }

    /* Press state on parent buttons */
    .qh-mobile-nav__link.is-parent:active {
      background: var(--qh-ghost);
    }

    /* Hide mobile nav on desktop */
    @media (min-width: 1025px) {
      .qh-mobile-nav { display: none; }
      .qh-navbar__toggle { display: none !important; }
    }

    /* Show mobile toggle + hide desktop nav on tablet/mobile */
    @media (max-width: 1024px) {
      .qh-navbar__links { display: none !important; }
      .qh-navbar__actions { display: none !important; }
      .qh-navbar__toggle { display: flex !important; }
      .qh-mega { display: none !important; }
      .qh-mega-overlay { display: none !important; }
    }


    /* ================================================================
/* ========================================================================
   Q-HUB PREMIUM CSS — Stripe-grade visual overrides
   Targets EXACT class names from the HTML templates.
   Loads AFTER qh-theme.css (no-nav version).
   ======================================================================== */

/* ========================================================================
   PRODUCT ACCENT COLOUR SYSTEM
   Set --qh-product on <main> to shift hero mesh + all accent colours.
   Primary CTA buttons stay brand blue.
   ======================================================================== */

/* ── PRODUCT COLOUR DEFINITIONS ──
   Light gradient heroes with product colour wash.
   Mesh blobs in deeper tones of same hue for depth.
   Dark text for readability. Blue CTAs pop naturally. */

/* ── PRODUCT COLOURS ──
   Medium-saturation washes — noticeable, confident, not timid.
   Gradient curves from rich product tone → white for seamless content transition.
   Mesh blobs at higher opacity for real dimensionality. */

/* Audit Management — Confident blue */
main[data-product="audit"] {
  --qh-accent: #3B82F6;
  --qh-accent-hover: #2563EB;
  --qh-accent-light: #60A5FA;
  --qh-hero-base: #DBEAFE;
  --qh-hero-mid: #BFDBFE;
  --qh-hero-end: #F8FAFF;
  --qh-mesh-primary: rgba(59, 130, 246, 0.25);
  --qh-mesh-secondary: rgba(96, 165, 250, 0.15);
  --qh-mesh-tertiary: rgba(37, 99, 235, 0.10);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* Quality Management (QMS) — Confident emerald */
main[data-product="qms"] {
  --qh-accent: #10B981;
  --qh-accent-hover: #059669;
  --qh-accent-light: #34D399;
  --qh-hero-base: #D1FAE5;
  --qh-hero-mid: #A7F3D0;
  --qh-hero-end: #F0FDF8;
  --qh-mesh-primary: rgba(16, 185, 129, 0.25);
  --qh-mesh-secondary: rgba(52, 211, 153, 0.15);
  --qh-mesh-tertiary: rgba(5, 150, 105, 0.10);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* Health & Safety (HSE) — Warm teal (safety, reliability, calm authority) */
main[data-product="hse"] {
  --qh-accent: #0D9488;
  --qh-accent-hover: #0F766E;
  --qh-accent-light: #14B8A6;
  --qh-hero-base: #CCFBF1;
  --qh-hero-mid: #99F6E4;
  --qh-hero-end: #F0FDFA;
  --qh-hero-dark: #134E4A;
  --qh-hero-dark-end: #0C3530;
  --qh-mesh-primary: rgba(13, 148, 136, 0.22);
  --qh-mesh-secondary: rgba(20, 184, 166, 0.14);
  --qh-mesh-tertiary: rgba(15, 118, 110, 0.08);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* Document Control — Confident purple */
main[data-product="documents"] {
  --qh-accent: #8B5CF6;
  --qh-accent-hover: #7C3AED;
  --qh-accent-light: #A78BFA;
  --qh-hero-base: #EDE9FE;
  --qh-hero-mid: #DDD6FE;
  --qh-hero-end: #FAF5FF;
  --qh-mesh-primary: rgba(139, 92, 246, 0.25);
  --qh-mesh-secondary: rgba(167, 139, 250, 0.15);
  --qh-mesh-tertiary: rgba(124, 58, 237, 0.10);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* Training & Competence — Confident cyan */
main[data-product="training"] {
  --qh-accent: #06B6D4;
  --qh-accent-hover: #0891B2;
  --qh-accent-light: #22D3EE;
  --qh-hero-base: #CFFAFE;
  --qh-hero-mid: #A5F3FC;
  --qh-hero-end: #F0FDFF;
  --qh-mesh-primary: rgba(6, 182, 212, 0.25);
  --qh-mesh-secondary: rgba(34, 211, 238, 0.15);
  --qh-mesh-tertiary: rgba(8, 145, 178, 0.10);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* Risk Assessment — Confident rose */
main[data-product="risk"] {
  --qh-accent: #F43F5E;
  --qh-accent-hover: #E11D48;
  --qh-accent-light: #FB7185;
  --qh-hero-base: #FFE4E6;
  --qh-hero-mid: #FECDD3;
  --qh-hero-end: #FFF5F5;
  --qh-mesh-primary: rgba(244, 63, 94, 0.20);
  --qh-mesh-secondary: rgba(251, 113, 133, 0.12);
  --qh-mesh-tertiary: rgba(225, 29, 72, 0.08);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* Incident Reporting — Confident orange */
main[data-product="incidents"] {
  --qh-accent: #F97316;
  --qh-accent-hover: #EA580C;
  --qh-accent-light: #FB923C;
  --qh-hero-base: #FFEDD5;
  --qh-hero-mid: #FED7AA;
  --qh-hero-end: #FFFAF5;
  --qh-mesh-primary: rgba(249, 115, 22, 0.20);
  --qh-mesh-secondary: rgba(251, 146, 60, 0.12);
  --qh-mesh-tertiary: rgba(234, 88, 12, 0.08);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* Engineering Management — Confident indigo */
main[data-product="engineering"] {
  --qh-accent: #6366F1;
  --qh-accent-hover: #4F46E5;
  --qh-accent-light: #818CF8;
  --qh-hero-base: #E0E7FF;
  --qh-hero-mid: #C7D2FE;
  --qh-hero-end: #F5F3FF;
  --qh-mesh-primary: rgba(99, 102, 241, 0.25);
  --qh-mesh-secondary: rgba(129, 140, 248, 0.15);
  --qh-mesh-tertiary: rgba(79, 70, 229, 0.10);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* QHSE Software — Confident blue-slate */
main[data-product="qhse"] {
  --qh-accent: #3B82F6;
  --qh-accent-hover: #2563EB;
  --qh-accent-light: #60A5FA;
  --qh-hero-base: #DBEAFE;
  --qh-hero-mid: #BFDBFE;
  --qh-hero-end: #F0F4FF;
  --qh-mesh-primary: rgba(59, 130, 246, 0.22);
  --qh-mesh-secondary: rgba(16, 185, 129, 0.10);
  --qh-mesh-tertiary: rgba(139, 92, 246, 0.08);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* EQMS Software — Confident teal */
main[data-product="eqms"] {
  --qh-accent: #14B8A6;
  --qh-accent-hover: #0D9488;
  --qh-accent-light: #2DD4BF;
  --qh-hero-base: #CCFBF1;
  --qh-hero-mid: #99F6E4;
  --qh-hero-end: #F0FDFA;
  --qh-mesh-primary: rgba(20, 184, 166, 0.25);
  --qh-mesh-secondary: rgba(45, 212, 191, 0.15);
  --qh-mesh-tertiary: rgba(13, 148, 136, 0.10);
  --qh-hero-text: var(--qh-heading);
  --qh-hero-text-sub: #334155;
}

/* ── Solution pain cards — outline style (problem framing) ── */
.qh-solution-pain {
  border: 1px solid color-mix(in oklch, var(--qh-error) 20%, transparent);
  background: color-mix(in oklch, var(--qh-error) 3%, transparent);
  border-radius: var(--qh-radius-md);
  padding: var(--qh-space-5);
  transition: border-color var(--qh-duration) var(--qh-ease);
}

.qh-solution-pain:hover {
  border-color: color-mix(in oklch, var(--qh-error) 35%, transparent);
}

.qh-solution-pain__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--qh-radius);
  background: color-mix(in oklch, var(--qh-error) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--qh-space-3);
  color: var(--qh-error);
}

/* ── Industry pain cards — filled style (contextual entry) ── */
.qh-industry-pain {
  background: var(--qh-white);
  border-radius: var(--qh-radius-md);
  padding: var(--qh-space-5);
  box-shadow: var(--qh-shadow-sm);
  border-left: 3px solid var(--qh-accent);
  transition: box-shadow var(--qh-duration) var(--qh-ease), transform var(--qh-duration) var(--qh-ease);
}

.qh-industry-pain:hover {
  box-shadow: var(--qh-shadow);
  transform: translateY(-2px);
}

.qh-industry-pain__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--qh-radius);
  background: color-mix(in oklch, var(--qh-accent) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--qh-space-3);
  color: var(--qh-accent);
}

/* ========================================================================
   INDUSTRY ACCENT COLOUR SYSTEM
   Set data-industry on <main> to shift accent colours per vertical.
   Warmer tones than products — contextual, not technical.
   ======================================================================== */

main[data-industry="manufacturing"] {
  --qh-accent: #059669;
  --qh-accent-hover: #047857;
  --qh-accent-light: #34D399;
}

main[data-industry="oil-gas"] {
  --qh-accent: #D97706;
  --qh-accent-hover: #B45309;
  --qh-accent-light: #FBBF24;
}

main[data-industry="construction"] {
  --qh-accent: #EA580C;
  --qh-accent-hover: #C2410C;
  --qh-accent-light: #FB923C;
}

main[data-industry="pharmaceutical"] {
  --qh-accent: #7C3AED;
  --qh-accent-hover: #6D28D9;
  --qh-accent-light: #A78BFA;
}

main[data-industry="food-beverage"] {
  --qh-accent: #0891B2;
  --qh-accent-hover: #0E7490;
  --qh-accent-light: #22D3EE;
}

main[data-industry="healthcare"] {
  --qh-accent: #0D9488;
  --qh-accent-hover: #0F766E;
  --qh-accent-light: #2DD4BF;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Scroll progress bar */
.qh-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--qh-accent, #3B82F6), var(--qh-secondary, #8B5CF6));
  z-index: 9999;
  width: 0%;
  transition: width 50ms linear;
}

:root {
  --qh-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --qh-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --qh-duration: 200ms;
  --qh-duration-fast: 150ms;
  --qh-duration-slow: 300ms;
  --qh-dark: #091D6B;
  --qh-dark-end: #050D30;
  --qh-surface-dark: #0C1847;
  --qh-accent: #3B82F6;
  --qh-accent-hover: #2563EB;
  --qh-accent-light: #60A5FA;
  --qh-secondary: #8B5CF6;
  --qh-white: #ffffff;
  --qh-ghost: #f4f6fa;
  --qh-border: #e2e8f0;
  --qh-body: #475569;
  --qh-heading: #0f172a;
  --qh-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --qh-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --qh-shadow-md: 0 8px 32px rgba(0,0,0,0.08);
  --qh-shadow-lg: 0 24px 48px rgba(0,0,0,0.12);
  --qh-shadow-xl: 0 32px 64px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.08);
  --qh-radius-sm: 6px;
  --qh-radius: 8px;
  --qh-radius-md: 12px;
  --qh-radius-lg: 16px;
}


/* ========================================================================
   1. HERO — Dark gradient mesh + light variant
   ======================================================================== */

.qh-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 8vw, 140px) 0 clamp(100px, 10vw, 160px);
}

.qh-hero.is-dark-section,
.qh-hero.is-dark {
  background: linear-gradient(150deg, var(--qh-dark) 0%, var(--qh-surface-dark) 40%, var(--qh-dark-end) 100%);
}

/* Animated gradient mesh overlay — uses product accent colour */
.qh-hero.is-dark-section::before,
.qh-hero.is-dark::before,
.qh-hero.is-split::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 50% at 25% 30%, var(--qh-mesh-primary, rgba(59,130,246,0.22)), transparent 70%),
    radial-gradient(ellipse 50% 40% at 72% 20%, var(--qh-mesh-secondary, rgba(139,92,246,0.18)), transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 80%, var(--qh-mesh-tertiary, rgba(16,185,129,0.12)), transparent 55%);
  filter: blur(60px);
  animation: qh-mesh-drift 40s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.qh-hero.is-dark-section > *,
.qh-hero.is-dark > * { position: relative; z-index: 1; }

@keyframes qh-mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(5%, -4%) scale(1.02); }
  66% { transform: translate(-3%, 6%) scale(0.98); }
}

/* Diagonal slice at bottom — extend 1px to avoid hairline gap */
.qh-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 81px;
  background: var(--qh-white);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
}

.qh-hero.is-light::after { display: none; }
.qh-hero + .qh-section { margin-top: -1px; }

/* Light hero */
.qh-hero.is-light {
  background: linear-gradient(180deg, var(--qh-white) 0%, var(--qh-ghost) 100%);
}

/* Hero-split: 2-column grid */
.qh-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  border-radius: var(--qh-radius-lg);
  padding: clamp(48px, 5vw, 80px);
}

/* Hero-split: dark gradient for split heroes without is-light */
section.qh-hero.is-split:not(.is-light) {
  background: var(--qh-gradient-hero);
  color: var(--qh-on-dark);
}

/* Kill the gradient on the inner split container — hero section handles it */
.qh-hero-split {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Hero base — rich product wash curving to white (light split heroes only) */
section.qh-hero.is-split:not(.is-dark-section):not(.is-dark) {
  background: linear-gradient(
    175deg,
    var(--qh-hero-base, #DBEAFE) 0%,
    var(--qh-hero-mid, #BFDBFE) 35%,
    var(--qh-hero-end, #F8FAFF) 100%
  ) !important;
}

/* Dark hero variants keep dark backgrounds */
.qh-hero.is-dark-section,
.qh-hero.is-dark {
  background: linear-gradient(150deg, #091D6B 0%, #050D30 100%) !important;
}

/* Hero text colors for light split heroes — dark text on light product wash */
.qh-hero.is-split:not(.is-dark-section) .qh-display-1,
.qh-hero.is-split:not(.is-dark-section) .qh-display-2,
.qh-hero.is-split:not(.is-dark-section) h1,
.qh-hero.is-split:not(.is-dark-section) h2 { color: var(--qh-hero-text, var(--qh-heading)) !important; }
.qh-hero.is-split:not(.is-dark-section) .qh-body-lg,
.qh-hero.is-split:not(.is-dark-section) .qh-body,
.qh-hero.is-split:not(.is-dark-section) p:not(.qh-overline) { color: var(--qh-hero-text-sub, var(--qh-body)) !important; }
.qh-hero.is-split:not(.is-dark-section) .qh-overline { color: var(--qh-accent) !important; }
.qh-hero.is-split:not(.is-dark-section) .qh-breadcrumb__link { color: var(--qh-body); opacity: 0.6; }
.qh-hero.is-split:not(.is-dark-section) .qh-breadcrumb__link:hover { opacity: 1; color: var(--qh-accent); }
.qh-hero.is-split:not(.is-dark-section) .qh-breadcrumb__item.is-current { color: var(--qh-body); opacity: 0.5; }
.qh-hero.is-split:not(.is-dark-section) .qh-breadcrumb__separator { color: var(--qh-body); opacity: 0.3; }

/* UNIVERSAL: Any heading on any dark background must be white */
.is-dark-section h1, .is-dark-section h2, .is-dark-section h3, .is-dark-section h4,
.is-dark-section .qh-display-1, .is-dark-section .qh-display-2,
.is-dark-section .qh-h2, .is-dark-section .qh-h3, .is-dark-section .qh-h4,
.qh-hero-split h1, .qh-hero-split h2, .qh-hero-split h3,
.qh-hero-split .qh-display-1, .qh-hero-split .qh-display-2,
.qh-cta-section h1, .qh-cta-section h2, .qh-cta-section h3,
.qh-cta-section .qh-display-1, .qh-cta-section .qh-display-2, .qh-cta-section .qh-h2,
.qh-stats-strip h1, .qh-stats-strip h2, .qh-stats-strip h3 {
  color: var(--qh-on-dark) !important;
}
.is-dark-section p, .is-dark-section .qh-body, .is-dark-section .qh-body-lg, .is-dark-section .qh-body-sm,
.qh-hero-split p, .qh-hero-split .qh-body, .qh-hero-split .qh-body-lg {
  color: rgba(255,255,255,0.7) !important;
}
.is-dark-section .qh-overline,
.qh-hero-split .qh-overline {
  color: var(--qh-accent-light) !important;
}

/* Ghost button on light hero — dark text, accent border */
.qh-hero.is-split:not(.is-dark-section) .qh-btn.is-ghost,
.qh-hero.is-split:not(.is-dark-section) .qh-btn.is-secondary {
  color: var(--qh-heading);
  border-color: var(--qh-border);
}
.qh-hero.is-split:not(.is-dark-section) .qh-btn.is-ghost:hover,
.qh-hero.is-split:not(.is-dark-section) .qh-btn.is-secondary:hover {
  border-color: var(--qh-accent);
  color: var(--qh-accent);
  background: rgba(0,0,0,0.02);
}

.qh-hero-split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--qh-radius-lg);
  box-shadow: var(--qh-shadow-xl);
  display: block;
}

.is-dark-section .qh-hero-split__media img {
  box-shadow: 0 32px 64px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.2);
}

/* Dark hero text */
.is-dark-section .qh-display-1,
.is-dark-section .qh-display-2,
.is-dark-section h1, .is-dark-section h2,
.is-dark-section .qh-h2, .is-dark-section .qh-h3 {
  color: var(--qh-on-dark);
}
.is-dark-section .qh-body-lg, .is-dark-section .qh-body,
.is-dark-section p:not(.qh-overline) { color: rgba(255,255,255,0.7); }
.is-dark-section .qh-overline { color: var(--qh-accent-light); }
.is-dark-section .qh-breadcrumb__link { color: rgba(255,255,255,0.5); }
.is-dark-section .qh-breadcrumb__link:hover { color: rgba(255,255,255,0.8); }
.is-dark-section .qh-breadcrumb__item.is-current { color: rgba(255,255,255,0.4); }
.is-dark-section .qh-breadcrumb__separator { color: rgba(255,255,255,0.3); }

/* Hero gradient canvas placeholder */
.qh-hero-gradient-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ── AWARD-WINNING HERO TYPOGRAPHY ── */

/* Headline: large, medium weight, tight tracking — Linear/Stripe inspired */
.qh-hero .qh-display-1,
.qh-hero h1 {
  font-size: clamp(42px, 4.5vw + 8px, 72px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  text-wrap: balance;
}

/* Overline: refined pill-style badge */
.qh-hero .qh-overline {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--qh-accent) 10%, transparent);
  border-radius: var(--qh-radius-full);
  display: inline-block;
  margin-bottom: 20px !important;
}

/* Subheadline: generous line height, refined colour */
.qh-hero .qh-body-lg,
.qh-hero-split__content > p {
  font-size: clamp(17px, 1.2vw + 8px, 20px) !important;
  line-height: 1.65 !important;
  max-width: 480px;
}

/* Button group spacing */
.qh-hero-split__content > div:last-child {
  margin-top: 36px !important;
}

/* Entrance animations — staggered with spring easing */
.qh-hero .qh-overline { animation: qh-fade-up 0.6s var(--qh-ease-spring) 0.2s both; }
.qh-hero h1, .qh-hero .qh-display-1, .qh-hero .qh-display-2 { animation: qh-fade-up 0.7s var(--qh-ease-spring) 0.35s both; }
.qh-hero .qh-body-lg { animation: qh-fade-up 0.6s var(--qh-ease-spring) 0.5s both; }
.qh-hero .qh-btn { animation: qh-fade-up 0.6s var(--qh-ease-spring) 0.65s both; }
.qh-hero .qh-breadcrumb { animation: qh-fade-up 0.5s var(--qh-ease-spring) 0.1s both; }
.qh-hero-split__media { animation: qh-slide-in 0.8s var(--qh-ease-spring) 0.5s both; }

@keyframes qh-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes qh-slide-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}




/* ========================================================================
   3. GRID LAYOUT — 3-column (used by feature grids, module cards)
   ======================================================================== */

.qh-grid {
  display: grid;
  gap: 24px;
}

.qh-grid.is-3-col {
  grid-template-columns: repeat(3, 1fr);
}

.qh-grid.is-2-col {
  grid-template-columns: repeat(2, 1fr);
}


/* ========================================================================
   4. FEATURE GRID CARDS — Hover lift, gradient bar, icon colors
   ======================================================================== */

.qh-feature-grid__item {
  position: relative;
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: 32px;
  transition: transform var(--qh-duration-slow) var(--qh-ease), box-shadow var(--qh-duration-slow) var(--qh-ease), border-color var(--qh-duration-slow) var(--qh-ease);
  overflow: hidden;
}

.qh-feature-grid__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--qh-accent), var(--qh-secondary));
  opacity: 0;
  transition: opacity var(--qh-duration-slow) var(--qh-ease);
}

.qh-feature-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--qh-shadow-lg);
  border-color: transparent;
}
.qh-feature-grid__item:hover::before { opacity: 1; }

/* Icon styling */
.qh-feature-grid__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--qh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform var(--qh-duration) var(--qh-ease);
}
.qh-feature-grid__item:hover .qh-feature-grid__icon { transform: scale(1.08); }

/* Expanded card state — spans full width with rich detail */
.qh-feature-grid__item.is-expanded {
  grid-column: 1 / -1 !important;
  border-color: var(--qh-accent);
  box-shadow: var(--qh-shadow-lg);
  transform: none;
}
.qh-feature-grid__item.is-expanded::before { opacity: 1; }
.qh-feature-grid__item .qh-card__link svg { transition: transform var(--qh-duration) var(--qh-ease); }
.qh-feature-grid__item.is-expanded .qh-card__link svg { transform: rotate(180deg); }
.qh-feature-detail { animation: qh-expand-in var(--qh-duration-slow) var(--qh-ease) both; }
.qh-feature-grid__item { cursor: pointer; }

/* Icon color rotation */
.qh-feature-grid__item:nth-child(6n+1) .qh-feature-grid__icon { color: var(--qh-accent); background: color-mix(in oklch, var(--qh-accent) 8%, transparent); }
.qh-feature-grid__item:nth-child(6n+2) .qh-feature-grid__icon { color: var(--qh-success); background: color-mix(in oklch, var(--qh-success) 8%, transparent); }
.qh-feature-grid__item:nth-child(6n+3) .qh-feature-grid__icon { color: var(--qh-secondary); background: color-mix(in oklch, var(--qh-secondary) 8%, transparent); }
.qh-feature-grid__item:nth-child(6n+4) .qh-feature-grid__icon { color: var(--qh-warm); background: color-mix(in oklch, var(--qh-warm) 8%, transparent); }
.qh-feature-grid__item:nth-child(6n+5) .qh-feature-grid__icon { color: var(--qh-info); background: color-mix(in oklch, var(--qh-info) 8%, transparent); }
.qh-feature-grid__item:nth-child(6n+6) .qh-feature-grid__icon { color: var(--qh-error); background: color-mix(in oklch, var(--qh-error) 8%, transparent); }
.qh-feature-grid__icon svg { stroke: currentColor; }


/* ========================================================================
   5. FEATURE ROWS — 2-column text+image layout
   ======================================================================== */

.qh-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.qh-feature-row.is-reversed {
  direction: rtl;
}
.qh-feature-row.is-reversed > * { direction: ltr; }

.qh-feature-row__media img {
  width: 100%;
  height: auto;
  border-radius: var(--qh-radius-lg);
  box-shadow: var(--qh-shadow-md);
  transition: box-shadow var(--qh-duration-slow) var(--qh-ease);
  display: block;
}
.qh-feature-row:hover .qh-feature-row__media img { box-shadow: var(--qh-shadow-lg); }

.qh-feature-row__list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.qh-feature-row__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 16px;
  color: var(--qh-body);
}
.qh-feature-row__list li svg { flex-shrink: 0; margin-top: 3px; color: var(--qh-accent); }

.qh-card__link, .qh-feature-grid__link {
  color: var(--qh-accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: 16px;
  transition: gap var(--qh-duration) var(--qh-ease);
}
.qh-card__link:hover, .qh-feature-grid__link:hover { gap: 10px; }


/* ========================================================================
   6. STATS STRIP — 4-column horizontal, dark gradient
   ======================================================================== */

.qh-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
  position: relative;
}

/* Vertical separator lines */
.qh-stats-strip__item {
  position: relative;
  padding: 0 24px;
}

.qh-stats-strip__item + .qh-stats-strip__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.12);
}

.qh-stats-strip__item .qh-display-2,
.qh-stats-strip__item [data-counter] {
  color: var(--qh-on-dark);
  transition: transform var(--qh-duration) var(--qh-ease), color var(--qh-duration) var(--qh-ease);
  display: block;
}
.qh-stats-strip__item:hover .qh-display-2,
.qh-stats-strip__item:hover [data-counter] {
  transform: scale(1.05);
  color: var(--qh-warm);
}
.qh-stats-strip__item .qh-body-sm { color: rgba(255,255,255,0.6); }


/* ========================================================================
   7. SECTIONS — Dark, ghost, CTA
   ======================================================================== */

.qh-section {
  padding: clamp(60px, 7vw, 100px) 0;
}

.qh-section.is-dark-section {
  position: relative;
  background: linear-gradient(180deg, var(--qh-hero-dark, var(--qh-dark)) 0%, var(--qh-hero-dark-end, var(--qh-surface-dark)) 100%);
  color: var(--qh-on-dark);
  overflow: hidden;
}
.qh-section.is-dark-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in oklch, var(--qh-accent) 8%, transparent), transparent 70%);
  pointer-events: none;
}
.qh-section.is-dark-section > * { position: relative; z-index: 1; }
.qh-section.is-dark-section h2, .qh-section.is-dark-section .qh-h2 { color: var(--qh-on-dark); }
.qh-section.is-dark-section p, .qh-section.is-dark-section .qh-body { color: var(--qh-body-dark); }
.qh-section.is-dark-section .qh-overline { color: var(--qh-accent-light); }

.qh-section.is-ghost {
  background: var(--qh-ghost);
}

.qh-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 4vw, 64px);
}


/* ========================================================================
   8. CTA SECTION — Deep gradient, radial glow
   ======================================================================== */

.qh-cta-section {
  position: relative;
  background: linear-gradient(135deg, var(--qh-hero-dark, var(--qh-dark)) 0%, var(--qh-hero-dark-end, var(--qh-dark-end)) 100%);
  padding: clamp(80px, 8vw, 120px) 0;
  text-align: center;
  overflow: hidden;
  color: var(--qh-on-dark);
}
.qh-cta-section::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, color-mix(in oklch, var(--qh-accent) 15%, transparent), transparent 70%);
  pointer-events: none;
}
.qh-cta-section__inner { position: relative; z-index: 1; }
.qh-cta-section h2, .qh-cta-section .qh-display-2, .qh-cta-section .qh-h2 { color: var(--qh-on-dark); }
.qh-cta-section p { color: rgba(255,255,255,0.6); }
.qh-cta-section .qh-btn { position: relative; z-index: 1; }
.qh-cta-section .qh-btn.is-ghost,
.qh-cta-section .qh-btn.is-secondary {
  color: var(--qh-on-dark) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.qh-cta-section .qh-btn.is-ghost:hover,
.qh-cta-section .qh-btn.is-secondary:hover {
  border-color: rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.12) !important;
}

.qh-cta-section__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}


/* ========================================================================
   9. MODULE CARDS — Related modules grid
   ======================================================================== */

.qh-module-card {
  display: block;
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--qh-duration-slow) var(--qh-ease), box-shadow var(--qh-duration-slow) var(--qh-ease), border-color var(--qh-duration-slow) var(--qh-ease);
}
.qh-module-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--qh-shadow-md);
  border-left: 3px solid var(--qh-accent);
}
.qh-module-card img { width: 48px; height: 48px; margin-bottom: 16px; }
.qh-module-card .qh-h4 { color: var(--qh-heading); margin-bottom: 8px; }
.qh-module-card .qh-body-sm { color: var(--qh-body); }


/* ========================================================================
   10. TESTIMONIAL CARDS
   ======================================================================== */

.qh-testimonial-card {
  background: var(--qh-white);
  border-radius: var(--qh-radius-lg);
  padding: 36px;
  border-left: 3px solid var(--qh-accent);
  box-shadow: var(--qh-shadow-sm);
  position: relative;
  transition: transform var(--qh-duration-slow) var(--qh-ease), box-shadow var(--qh-duration-slow) var(--qh-ease), border-color var(--qh-duration-slow) var(--qh-ease);
}
.qh-testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 20px; right: 24px;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: var(--qh-accent);
  opacity: 0.08;
  pointer-events: none;
}
.qh-testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--qh-shadow-md); border-color: var(--qh-secondary); }


/* ========================================================================
   11. ACCORDION / FAQ
   ======================================================================== */

.qh-accordion__item {
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--qh-duration) var(--qh-ease);
}

.qh-accordion__trigger {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  color: var(--qh-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background var(--qh-duration) var(--qh-ease);
  text-align: left;
}
.qh-accordion__trigger:hover { background: var(--qh-ghost); }
.qh-accordion__trigger svg { transition: transform var(--qh-duration-slow) var(--qh-ease); flex-shrink: 0; }
.qh-accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.qh-accordion__panel { padding: 0; color: var(--qh-body); line-height: 1.6; }
.qh-accordion__panel.is-open { padding: 0 24px 20px; }


/* ========================================================================
   IMAGE PLACEHOLDERS — Style broken/missing images gracefully
   ======================================================================== */

.qh-feature-row__media img,
.qh-hero-split__media img {
  min-height: 280px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--qh-ghost) 0%, #e8ecf4 50%, var(--qh-ghost) 100%);
  background-size: 200% 200%;
  animation: qh-shimmer 2s var(--qh-ease) infinite;
  color: transparent; /* hide alt text */
  font-size: 0;
}

/* Hide alt text on all product images */
img[src*="screenshots"],
img[src*="images/"] {
  color: transparent;
  font-size: 0;
}

@keyframes qh-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ========================================================================
   12. LOGO MARQUEE
   ======================================================================== */

.qh-logo-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 40px) 0;
}
.qh-logo-marquee::before, .qh-logo-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.qh-logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--qh-white), transparent); }
.qh-logo-marquee::after { right: 0; background: linear-gradient(270deg, var(--qh-white), transparent); }

.qh-logo-marquee-track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: qh-marquee-scroll 35s linear infinite;
  width: max-content;
}
.qh-logo-marquee-track:hover { animation-play-state: paused; }

@keyframes qh-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ========================================================================
   13. SCROLL REVEAL
   ======================================================================== */

.qh-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--qh-ease-spring), transform 0.6s var(--qh-ease-spring);
}
.qh-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .qh-reveal { opacity: 1; transform: none; transition: none; }
  .qh-hero .qh-overline, .qh-hero h1, .qh-hero .qh-display-1, .qh-hero .qh-display-2,
  .qh-hero .qh-body-lg, .qh-hero .qh-btn, .qh-hero-split__media { animation: none; }
  .qh-hero.is-dark-section::before { animation: none; }
}


/* ========================================================================
   14. BREADCRUMBS & OVERLINES
   ======================================================================== */

.qh-breadcrumb { margin-bottom: 16px; }
.qh-breadcrumb__list { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; font-size: 14px; }
.qh-breadcrumb__link { color: var(--qh-body); text-decoration: none; transition: color var(--qh-duration) var(--qh-ease); }
.qh-breadcrumb__link:hover { color: var(--qh-accent); }
.qh-breadcrumb__separator { opacity: 0.4; margin: 0 2px; }
.qh-breadcrumb__item.is-current { color: var(--qh-body); opacity: 0.6; }

.qh-overline {
  color: var(--qh-accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
  display: block;
}


/* ========================================================================
   15. FOOTER (template footer — different from homepage)
   ======================================================================== */

.qh-footer {
  background: var(--qh-dark-end);
  color: rgba(255,255,255,0.6);
  padding: clamp(60px, 6vw, 80px) 0 clamp(32px, 3vw, 48px);
  position: relative;
}
.qh-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.2), transparent);
}
.qh-footer a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color var(--qh-duration) var(--qh-ease); }
.qh-footer a:hover { color: var(--qh-on-dark); }
.qh-footer__heading { color: var(--qh-on-dark); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.qh-footer__links { list-style: none; padding: 0; margin: 0; }
.qh-footer__link { display: block; padding: 4px 0; font-size: 14px; }
.qh-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.qh-footer__brand-desc { font-size: 14px; line-height: 1.6; margin-top: 16px; }
.qh-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.qh-footer__socials { display: flex; gap: 16px; }
.qh-footer__socials a { opacity: 0.5; transition: opacity var(--qh-duration) var(--qh-ease); }
.qh-footer__socials a:hover { opacity: 1; }
.qh-footer__legal { display: flex; gap: 16px; list-style: none; padding: 0; margin: 0; }
.qh-footer__copy { opacity: 0.5; }


/* ========================================================================
   STICKY SECTION NAV
   ======================================================================== */

.qh-section-nav {
  position: sticky;
  top: 64px;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--qh-border);
  padding: 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--qh-duration-slow) var(--qh-ease), opacity var(--qh-duration-slow) var(--qh-ease);
  pointer-events: none;
}

.qh-section-nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.qh-section-nav__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 1264px;
  margin: 0 auto;
  padding: 0 32px;
  overflow-x: auto;
}

.qh-section-nav__link {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--qh-body);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--qh-duration) var(--qh-ease), border-color var(--qh-duration) var(--qh-ease);
}

.qh-section-nav__link:hover,
.qh-section-nav__link.is-active {
  color: var(--qh-accent);
  border-bottom-color: var(--qh-accent);
}


/* ========================================================================
   DEVICE FRAME — Desktop + Mobile composition
   ======================================================================== */

.qh-device-composition {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Device desktop — relative by default, absolute only inside composition */
.qh-device-desktop {
  position: relative;
  width: 100%;
  border-radius: var(--qh-radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 32px 80px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.2);
  z-index: 1;
}

.qh-device-composition .qh-device-desktop {
  position: absolute;
  top: 0;
  left: 0;
}

.qh-device-desktop__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--qh-ghost, #f4f6fa);
  border-bottom: 1px solid var(--qh-border, #e2e8f0);
}

.qh-device-desktop__dot { width: 10px; height: 10px; border-radius: 50%; }
.qh-device-desktop__dot:nth-child(1) { background: #ff5f57; }
.qh-device-desktop__dot:nth-child(2) { background: #febc2e; }
.qh-device-desktop__dot:nth-child(3) { background: #28c840; }

.qh-device-desktop__title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--qh-body, #475569);
  margin-right: 44px;
}

.qh-device-desktop__body {
  background: var(--qh-white, #fff);
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}

/* Screenshot image inside desktop frame */
.qh-device-desktop__body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Skeleton dashboard placeholder */
.qh-device-skeleton {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
}

.qh-device-skeleton__sidebar {
  width: 44px;
  background: var(--qh-ghost, #f4f6fa);
  border-right: 1px solid var(--qh-border, #e2e8f0);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  gap: 10px;
}

.qh-device-skeleton__sidebar-dot {
  width: 24px;
  height: 24px;
  border-radius: var(--qh-radius-sm);
  background: var(--qh-border, #e2e8f0);
}

.qh-device-skeleton__sidebar-dot.is-active {
  background: var(--qh-accent, #3B82F6);
  opacity: 0.3;
}

.qh-device-skeleton__main {
  flex: 1;
  padding: 16px;
}

.qh-device-skeleton__header {
  height: 12px;
  width: 40%;
  background: var(--qh-border);
  border-radius: var(--qh-radius-sm);
  margin-bottom: 16px;
}

.qh-device-skeleton__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.qh-device-skeleton__card {
  padding: 12px;
  background: var(--qh-ghost);
  border-radius: var(--qh-radius);
  border: 1px solid var(--qh-border);
}

.qh-device-skeleton__card-value {
  height: 20px;
  width: 50%;
  background: var(--qh-border);
  border-radius: var(--qh-radius-sm);
  margin-bottom: 6px;
}

.qh-device-skeleton__card-label {
  height: 8px;
  width: 70%;
  background: var(--qh-border);
  border-radius: var(--qh-radius-sm);
  opacity: 0.5;
}

.qh-device-skeleton__chart {
  height: 80px;
  background: linear-gradient(180deg, rgba(59,130,246,0.05) 0%, rgba(59,130,246,0.02) 100%);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
}

/* Mobile device */
.qh-device-mobile {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 28%;
  background: var(--qh-white, #fff);
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.15);
  z-index: 2;
}

.qh-device-mobile__notch {
  width: 80px;
  height: 4px;
  background: var(--qh-border);
  border-radius: var(--qh-radius-sm);
  margin: 8px auto;
}

.qh-device-mobile__body {
  padding: 8px 12px 16px;
}

.qh-device-mobile__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--qh-border);
}

.qh-device-mobile__item:last-child { border-bottom: none; }

.qh-device-mobile__check {
  width: 18px;
  height: 18px;
  border-radius: var(--qh-radius-sm);
  border: 2px solid var(--qh-border);
  flex-shrink: 0;
}

.qh-device-mobile__check.is-done {
  background: var(--qh-success, #10B981);
  border-color: var(--qh-success);
}

.qh-device-mobile__text {
  height: 8px;
  border-radius: var(--qh-radius-sm);
  background: var(--qh-border);
  flex: 1;
}


/* ========================================================================
   16. INTERACTIVE TABS
   ======================================================================== */

.qh-tabs__bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-full);
  max-width: 640px;
  margin: 0 auto 8px;
  overflow-x: auto;
}

.qh-tabs__tab {
  flex: 1;
  padding: 12px 24px;
  border: none;
  background: transparent;
  border-radius: var(--qh-radius-full);
  font-weight: 600;
  font-size: 15px;
  color: var(--qh-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--qh-duration) var(--qh-ease);
}

.qh-tabs__tab:hover {
  color: var(--qh-heading);
  background: rgba(0,0,0,0.03);
}

.qh-tabs__tab.is-active {
  background: var(--qh-white);
  color: var(--qh-heading);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}


/* ========================================================================
   17. PROCESS FLOW (Audit Lifecycle)
   ======================================================================== */

.qh-process-flow__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 48px;
}

.qh-process-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all var(--qh-duration) var(--qh-ease);
  position: relative;
}

.qh-process-flow__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  border: 2px solid rgba(255,255,255,0.15);
  transition: all var(--qh-duration-slow) var(--qh-ease);
}

.qh-process-flow__step.is-active .qh-process-flow__number {
  background: var(--qh-accent);
  color: var(--qh-on-dark);
  border-color: var(--qh-accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.2);
  transform: scale(1.1);
}

.qh-process-flow__step:hover .qh-process-flow__number {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
}

.qh-process-flow__label {
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  transition: color var(--qh-duration) var(--qh-ease);
}

.qh-process-flow__step.is-active .qh-process-flow__label {
  color: var(--qh-on-dark);
}

.qh-process-flow__connector {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(59,130,246,0.3), rgba(255,255,255,0.08));
  flex-shrink: 0;
}

.qh-process-flow__details {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.qh-process-flow__detail h3 {
  color: var(--qh-on-dark) !important;
  margin-bottom: 16px;
}

.qh-process-flow__detail p {
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.7;
}


/* ========================================================================
   18. EXPANDABLE CUSTOMER STORIES
   ======================================================================== */

.qh-expandable__row {
  display: block !important;
  cursor: pointer;
  transition: background var(--qh-duration) var(--qh-ease);
  border-radius: var(--qh-radius-md);
  padding: 0 24px;
  margin: 0 -24px;
}

.qh-expandable__row:hover {
  background: rgba(59,130,246,0.02);
}

.qh-expandable__row.is-open svg:last-child {
  transform: rotate(180deg);
}

/* Override theme grid — use flex for the summary row */
.qh-expandable__summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--qh-border);
}

.qh-expandable__summary > div:first-child {
  min-width: 200px;
}

.qh-expandable__summary > div:last-child {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.qh-expandable__detail {
  animation: qh-expand-in var(--qh-duration-slow) var(--qh-ease) both;
}

@keyframes qh-expand-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ========================================================================
   19. ROI CALCULATOR
   ======================================================================== */

.qh-calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  border: 1px solid var(--qh-border);
  box-shadow: var(--qh-shadow-lg);
}

.qh-calculator__inputs {
  padding: 40px;
  background: var(--qh-white);
}

.qh-calculator__results {
  padding: 40px;
  background: linear-gradient(135deg, var(--qh-dark) 0%, var(--qh-dark-end) 100%);
  color: var(--qh-on-dark);
}

.qh-calculator__results h3 { color: var(--qh-on-dark) !important; }
.qh-calculator__results p { color: rgba(255,255,255,0.7) !important; }

.qh-calculator label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--qh-body);
  margin-bottom: 6px;
}

.qh-calculator input[type="number"],
.qh-calculator input[type="text"],
.qh-calculator select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
  font-size: 16px;
  color: var(--qh-heading);
  background: var(--qh-white);
  margin-bottom: 20px;
  transition: border-color var(--qh-duration) var(--qh-ease);
}

.qh-calculator input:focus,
.qh-calculator select:focus {
  outline: none;
  border-color: var(--qh-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.qh-calculator__metric {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.qh-calculator__metric-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.qh-calculator__metric-value {
  font-family: var(--qh-font-display, system-ui);
  font-size: 32px;
  font-weight: 800;
  color: var(--qh-on-dark);
}

.qh-calculator__metric-value.is-highlight {
  color: var(--qh-accent-light);
}

.qh-calculator__metric-value.is-savings {
  font-size: 40px;
  color: var(--qh-success);
}


/* ========================================================================
   20. RESPONSIVE — Interactive components
   ======================================================================== */

@media (max-width: 1024px) {
  .qh-process-flow__steps { flex-wrap: wrap; gap: 8px; }
  .qh-process-flow__connector { display: none; }
  .qh-calculator { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .qh-tabs__bar { border-radius: var(--qh-radius-md); }
  .qh-tabs__tab { padding: 10px 16px; font-size: 14px; }
  .qh-process-flow__steps { gap: 4px; }
  .qh-process-flow__step { padding: 12px 16px; }
  .qh-process-flow__number { width: 40px; height: 40px; font-size: 16px; }
  .qh-expandable__summary { flex-direction: column; gap: 12px; align-items: flex-start !important; }
}


/* ========================================================================
   ORIGINAL 16. RESPONSIVE (moved down)
   ======================================================================== */

@media (max-width: 1024px) {
  .qh-hero-split { grid-template-columns: 1fr; gap: 32px; }
  .qh-feature-row { grid-template-columns: 1fr; gap: 32px; }
  .qh-feature-row.is-reversed { direction: ltr; }
  .qh-grid.is-3-col { grid-template-columns: repeat(2, 1fr); }
  .qh-stats-strip { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .qh-stats-strip__item + .qh-stats-strip__item::before { display: none; }
}

@media (max-width: 768px) {
  .qh-hero::after { height: 40px; }
  .qh-grid.is-3-col { grid-template-columns: 1fr; }
  .qh-grid.is-2-col { grid-template-columns: 1fr; }
  .qh-stats-strip { grid-template-columns: 1fr; gap: 24px; }
  .qh-btn.is-primary, .qh-btn.is-ghost { width: 100%; justify-content: center; }
}


/* ========================================================================
   NEW A: PRODUCT TOUR — Tabbed carousel with progress bar
   ======================================================================== */

.qh-product-tour { position: relative; }

.qh-product-tour__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--qh-ghost);
  border-radius: var(--qh-radius-full);
  margin: 0 auto 32px;
  max-width: 700px;
  overflow-x: auto;
}

.qh-product-tour__tab {
  flex: 1;
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: var(--qh-radius-full);
  font-weight: 600;
  font-size: 14px;
  color: var(--qh-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--qh-duration) var(--qh-ease);
}

.qh-product-tour__tab.is-active {
  background: var(--qh-white);
  color: var(--qh-heading);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.qh-product-tour__progress {
  height: 3px;
  background: var(--qh-border);
  border-radius: 3px;
  margin: 0 auto 32px;
  max-width: 700px;
  overflow: hidden;
}

.qh-product-tour__progress-fill {
  height: 100%;
  background: var(--qh-accent);
  border-radius: 3px;
  transition: width 6s linear;
  width: 0%;
}

.qh-product-tour__screen {
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  border: 1px solid var(--qh-border);
  box-shadow: var(--qh-shadow-xl);
  animation: qh-fade-up 0.4s var(--qh-ease) both;
}

.qh-product-tour__desc {
  text-align: center;
  max-width: 600px;
  margin: 24px auto 0;
}


/* ========================================================================
   NEW B: INTEGRATION ECOSYSTEM — Animated logo grid
   ======================================================================== */

.qh-integrations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.qh-integrations-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-md);
  cursor: pointer;
  transition: all 0.25s var(--qh-ease);
  text-decoration: none;
  color: var(--qh-heading);
  position: relative;
}

.qh-integrations-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--qh-shadow-md);
  border-color: var(--qh-accent);
}

.qh-integrations-grid__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--qh-radius);
  background: var(--qh-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--qh-accent);
}

.qh-integrations-grid__name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.qh-integrations-grid__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--qh-accent);
  color: var(--qh-on-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--qh-radius-full);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--qh-duration) var(--qh-ease);
}

.qh-integrations-grid__item:hover .qh-integrations-grid__badge {
  opacity: 1;
  transform: scale(1);
}

.qh-integrations-grid__center {
  grid-column: 3;
  grid-row: 1 / 3;
  background: linear-gradient(135deg, var(--qh-accent), color-mix(in srgb, var(--qh-accent), var(--qh-secondary) 50%));
  color: var(--qh-on-dark);
  border-color: transparent;
  font-size: 16px;
  font-weight: 800;
}
.qh-integrations-grid__center:hover { transform: none; border-color: transparent; }


/* ========================================================================
   NEW C: SECURITY TRUST BAR — Flip cards
   ======================================================================== */

.qh-trust-badges {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.qh-trust-badge {
  perspective: 600px;
  cursor: pointer;
}

.qh-trust-badge__inner {
  position: relative;
  transition: transform var(--qh-duration-premium) var(--qh-ease-spring);
  transform-style: preserve-3d;
}

.qh-trust-badge:hover .qh-trust-badge__inner {
  transform: rotateY(180deg);
}

.qh-trust-badge__front,
.qh-trust-badge__back {
  padding: 24px 16px;
  border-radius: var(--qh-radius-md);
  text-align: center;
  backface-visibility: hidden;
}

.qh-trust-badge__front {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

.qh-trust-badge__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}

.qh-trust-badge__icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}

.qh-trust-badge__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--qh-on-dark);
}


/* ========================================================================
   NEW D: IMPLEMENTATION TIMELINE — Horizontal with progress fill
   ======================================================================== */

.qh-impl-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.qh-impl-timeline__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 48px;
}

.qh-impl-timeline__track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--qh-border);
  transform: translateY(-50%);
  z-index: 0;
}

.qh-impl-timeline__fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  background: var(--qh-accent);
  transform: translateY(-50%);
  z-index: 1;
  transition: width var(--qh-duration-premium) var(--qh-ease);
  width: 0%;
}

.qh-impl-timeline__node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.qh-impl-timeline__dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--qh-white);
  border: 3px solid var(--qh-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--qh-body);
  transition: all var(--qh-duration-slow) var(--qh-ease);
}

.qh-impl-timeline__node.is-active .qh-impl-timeline__dot,
.qh-impl-timeline__node.is-done .qh-impl-timeline__dot {
  background: var(--qh-accent);
  border-color: var(--qh-accent);
  color: var(--qh-on-dark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--qh-accent) 20%, transparent);
}

.qh-impl-timeline__node.is-active .qh-impl-timeline__dot {
  animation: qh-pulse 2s infinite;
}

@keyframes qh-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--qh-accent) 20%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--qh-accent) 10%, transparent); }
}

.qh-impl-timeline__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--qh-body);
  white-space: nowrap;
}

.qh-impl-timeline__node.is-active .qh-impl-timeline__label {
  color: var(--qh-accent);
}

.qh-impl-timeline__detail {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  padding: 32px;
  animation: qh-fade-up var(--qh-duration-slow) var(--qh-ease) both;
}


/* ========================================================================
   NEW E: VIDEO SECTION — Play overlay + modal
   ======================================================================== */

.qh-video-section__thumbnail {
  position: relative;
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--qh-hero-dark, #091D6B), var(--qh-hero-dark-end, #050D30));
  max-width: 900px;
  margin: 0 auto;
  box-shadow: var(--qh-shadow-xl);
}

.qh-video-section__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: transform var(--qh-duration-slow) var(--qh-ease), box-shadow 0.3s;
}

.qh-video-section__thumbnail:hover .qh-video-section__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.qh-video-section__play svg { margin-left: 4px; }

.qh-video-section__meta {
  position: absolute;
  bottom: 24px;
  left: 24px;
  color: var(--qh-on-dark);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}

.qh-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.85);
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  align-items: center;
  justify-content: center;
}

.qh-video-modal.is-open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: all !important;
  animation: qh-fade-in var(--qh-duration-slow) var(--qh-ease) both;
}

.qh-video-modal__inner {
  width: 90%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  position: relative;
}

.qh-video-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: var(--qh-on-dark);
  font-size: 32px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--qh-duration) var(--qh-ease);
}
.qh-video-modal__close:hover { opacity: 1; }

@keyframes qh-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ========================================================================
   NEW F: AWARDS CAROUSEL — Horizontal scroll badges
   ======================================================================== */

.qh-awards {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.qh-award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  text-decoration: none;
  color: var(--qh-heading);
  transition: all var(--qh-duration-slow) var(--qh-ease);
  min-width: 140px;
  animation: qh-float 3s ease-in-out infinite;
}

.qh-award:nth-child(2) { animation-delay: 0.5s; }
.qh-award:nth-child(3) { animation-delay: 1s; }
.qh-award:nth-child(4) { animation-delay: 1.5s; }
.qh-award:nth-child(5) { animation-delay: 2s; }
.qh-award:nth-child(6) { animation-delay: 2.5s; }

@keyframes qh-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.qh-award:hover {
  box-shadow: var(--qh-shadow-md);
  border-color: var(--qh-accent);
}

.qh-award__icon { font-size: 32px; }
.qh-award__name { font-size: 14px; font-weight: 700; text-align: center; }
.qh-award__year { font-size: 12px; color: var(--qh-body); }


/* ========================================================================
   NEW G: RESOURCE CARDS — already uses .qh-grid + card styles
   ======================================================================== */

.qh-resource-card {
  display: block;
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--qh-heading);
  transition: all var(--qh-duration-slow) var(--qh-ease);
}

.qh-resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--qh-shadow-lg);
}

.qh-resource-card__thumb {
  height: 160px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--qh-accent) 15%, var(--qh-ghost)), var(--qh-ghost));
  display: flex;
  align-items: center;
  justify-content: center;
}

.qh-resource-card__type {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--qh-radius-full);
  background: color-mix(in srgb, var(--qh-accent) 10%, transparent);
  color: var(--qh-accent);
}

.qh-resource-card__body { padding: 20px; }
.qh-resource-card__title { font-weight: 600; font-size: 16px; margin: 10px 0 6px; }
.qh-resource-card__meta { font-size: 13px; color: var(--qh-body); }


/* ========================================================================
   NEW H: STICKY DEMO BAR — Fixed bottom
   ======================================================================== */

.qh-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--qh-dark);
  color: var(--qh-white);
  padding: 12px 0;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s var(--qh-ease);
  display: flex;
  align-items: center;
}
.qh-sticky-bar.is-visible { transform: translateY(0); }
.qh-sticky-bar.is-dismissed { transform: translateY(100%); }
.qh-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qh-space-4);
}
.qh-sticky-bar__text {
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
}
.qh-sticky-bar__text span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  display: none;
}
@media (min-width: 769px) {
  .qh-sticky-bar__text span { display: inline; }
}
.qh-sticky-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--qh-space-3);
}
.qh-sticky-bar__close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 4px;
}
.qh-sticky-bar__close:hover { color: var(--qh-white); }

.qh-sticky-demo-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--qh-white);
  border-top: 1px solid var(--qh-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transform: translateY(100%);
  transition: transform 0.4s var(--qh-ease);
}

.qh-sticky-demo-bar.is-visible {
  transform: translateY(0);
}

.qh-sticky-demo-bar__text {
  font-size: 15px;
  font-weight: 500;
  color: var(--qh-heading);
}

.qh-sticky-demo-bar__close {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  color: var(--qh-body);
  font-size: 18px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--qh-duration) var(--qh-ease);
}
.qh-sticky-demo-bar__close:hover { opacity: 1; }


/* ========================================================================
   RESPONSIVE — New components
   ======================================================================== */

@media (max-width: 1024px) {
  .qh-integrations-grid { grid-template-columns: repeat(3, 1fr); }
  .qh-integrations-grid__center { grid-column: 2; grid-row: auto; }
  .qh-trust-badges { grid-template-columns: repeat(3, 1fr); }
  .qh-impl-timeline__track { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .qh-impl-timeline__track::before { display: none; }
  .qh-impl-timeline__fill { display: none; }
}

@media (max-width: 768px) {
  .qh-product-tour__tabs { border-radius: var(--qh-radius-md); }
  .qh-integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .qh-trust-badges { grid-template-columns: repeat(2, 1fr); }
  .qh-awards { gap: 12px; }
  .qh-award { min-width: 120px; padding: 16px 20px; }
  .qh-sticky-demo-bar { padding: 10px 16px; gap: 12px; }
  .qh-sticky-demo-bar__text { font-size: 13px; }
}


/* ========================================================================
   COMPREHENSIVE MOBILE + POLISH OVERRIDES
   Single unified responsive block for all components.
   ======================================================================== */

/* ── Global container padding on mobile ── */
@media (max-width: 768px) {
  .qh-container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── Hero mobile ── */
@media (max-width: 1024px) {
  .qh-hero.is-split .qh-hero-split {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 24px !important;
  }
  .qh-hero .qh-display-1, .qh-hero h1 {
    font-size: clamp(32px, 7vw, 48px) !important;
  }
  .qh-hero .qh-body-lg, .qh-hero-split__content > p {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .qh-hero.is-split {
    padding: 60px 0 100px !important;
  }
  .qh-hero .qh-display-1, .qh-hero h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .qh-hero .qh-overline {
    font-size: 11px !important;
    padding: 5px 12px !important;
  }
  .qh-hero .qh-body-lg {
    font-size: 16px !important;
  }
  .qh-hero-split__media {
    max-width: 100%;
    overflow: hidden;
  }
  /* Device composition scales down on mobile */
  .qh-device-composition {
    max-width: 100%;
  }
  .qh-device-mobile {
    width: 30% !important;
    right: -5px !important;
    bottom: -5px !important;
  }
}

/* ── Sticky section nav mobile ── */
@media (max-width: 768px) {
  #stickyNav, .qh-section-nav {
    top: 56px !important; /* smaller navbar on mobile */
  }
  #stickyNav > div, .qh-section-nav__inner {
    padding: 0 12px !important;
    gap: 2px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #stickyNav > div::-webkit-scrollbar { display: none; }
  .qh-sticky-nav__link {
    padding: 12px 12px !important;
    font-size: 13px !important;
  }
}

/* ── Stats strip mobile ── */
@media (max-width: 768px) {
  .qh-stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    padding: 8px 0 !important;
  }
  .qh-stats-strip__item .qh-display-2,
  .qh-stats-strip__item [data-counter] {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .qh-stats-strip__item + .qh-stats-strip__item::before {
    display: none !important;
  }
}

/* ── Feature cards grid mobile ── */
@media (max-width: 768px) {
  .qh-grid.is-3-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .qh-feature-grid__item {
    padding: 24px !important;
  }
  /* Feature modal full-screen on mobile */
  #featureModal {
    padding: 24px !important;
    border-radius: 0 !important;
    inset: 0 !important;
  }
  #featureModal > div > div {
    flex-direction: column !important;
    gap: 24px !important;
  }
}

/* ── Product Tour mobile ── */
@media (max-width: 768px) {
  .qh-tour-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px !important;
    gap: 2px !important;
    border-radius: var(--qh-radius-md) !important;
  }
  .qh-tour-tabs::-webkit-scrollbar { display: none; }
  .qh-tour-tab {
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
  }
  .qh-device-desktop__body {
    min-height: 200px !important;
  }
}

/* ── Process flow mobile ── */
@media (max-width: 768px) {
  .qh-process-flow__steps {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
  }
  .qh-process-flow__connector { display: none !important; }
  .qh-process-flow__step {
    padding: 8px 12px !important;
  }
  .qh-process-flow__number {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
  }
  .qh-process-flow__label {
    font-size: 12px !important;
  }
  .qh-process-flow__detail {
    padding: 24px !important;
  }
  .qh-process-flow__detail h3 {
    font-size: 22px !important;
  }
}

/* ── Feature rows mobile ── */
@media (max-width: 768px) {
  .qh-feature-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .qh-feature-row.is-reversed {
    direction: ltr !important;
  }
  .qh-feature-row__media img {
    border-radius: var(--qh-radius-md) !important;
  }
  .qh-feature-row__list li {
    font-size: 15px !important;
  }
}

/* ── Integration grid mobile ── */
@media (max-width: 768px) {
  .qh-int-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  .qh-int-item {
    padding: 16px 8px !important;
  }
  .qh-int-item svg {
    width: 36px !important;
    height: 36px !important;
  }
  .qh-int-item span:last-child {
    font-size: 11px !important;
  }
}

/* ── Calculator mobile ── */
@media (max-width: 768px) {
  .qh-calculator,
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .qh-calculator__inputs,
  .qh-calculator__results {
    padding: 28px 20px !important;
  }
  .qh-calculator__metric-value {
    font-size: 24px !important;
  }
  .qh-calculator__metric-value.is-savings {
    font-size: 32px !important;
  }
}

/* ── Security trust badges mobile ── */
@media (max-width: 768px) {
  .qh-trust-badges {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .qh-trust-badge__front,
  .qh-trust-badge__back {
    padding: 20px 12px !important;
  }
  .qh-trust-badge__icon {
    font-size: 24px !important;
  }
  .qh-trust-badge__label {
    font-size: 12px !important;
  }
}

/* ── Comparison table mobile ── */
@media (max-width: 768px) {
  .qh-compare-table,
  [style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch;
  }
  .qh-compare-table table,
  section table {
    min-width: 600px;
  }
}

/* ── Implementation timeline mobile ── */
@media (max-width: 768px) {
  .qh-impl-timeline__track {
    flex-wrap: wrap !important;
    gap: 16px !important;
    justify-content: center !important;
  }
  .qh-impl-timeline__track::before,
  .qh-impl-timeline__fill {
    display: none !important;
  }
  .qh-impl-timeline__dot {
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
  }
  .qh-impl-timeline__detail {
    padding: 24px !important;
  }
}

/* ── Expandable customer stories mobile ── */
@media (max-width: 768px) {
  .qh-expandable__summary {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding: 20px 0 !important;
  }
  .qh-expandable__summary > div:last-child {
    gap: 12px !important;
  }
  .qh-expandable__detail .qh-grid.is-3-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .qh-expandable__detail .qh-display-2 {
    font-size: 28px !important;
  }
}

/* ── Video section mobile ── */
@media (max-width: 768px) {
  .qh-video-section__play {
    width: 60px !important;
    height: 60px !important;
  }
  .qh-video-section__meta {
    font-size: 12px !important;
    bottom: 16px !important;
    left: 16px !important;
  }
  .qh-video-modal__inner {
    width: 95% !important;
  }
}

/* ── Testimonials mobile ── */
@media (max-width: 768px) {
  .qh-testimonial-card {
    padding: 24px !important;
  }
  .qh-testimonial-card::before {
    font-size: 48px !important;
    top: 12px !important;
    right: 16px !important;
  }
}

/* ── Awards mobile ── */
@media (max-width: 768px) {
  .qh-awards {
    gap: 12px !important;
    justify-content: center !important;
  }
  .qh-award {
    min-width: 100px !important;
    padding: 16px !important;
  }
  .qh-award__icon {
    font-size: 24px !important;
  }
  .qh-award__name {
    font-size: 12px !important;
  }
}

/* ── FAQ mobile ── */
@media (max-width: 768px) {
  .qh-accordion__trigger {
    padding: 16px 16px !important;
    font-size: 15px !important;
  }
  .qh-accordion__panel {
    padding: 0 16px 16px !important;
    font-size: 15px !important;
  }
}

/* ── Resource cards mobile ── */
@media (max-width: 768px) {
  .qh-resource-card__thumb {
    height: 120px !important;
  }
  .qh-resource-card__body {
    padding: 16px !important;
  }
  .qh-resource-card__title {
    font-size: 15px !important;
  }
}

/* ── Related modules mobile ── */
@media (max-width: 768px) {
  .qh-module-card {
    padding: 20px !important;
  }
  .qh-module-card svg {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ── CTA section mobile ── */
@media (max-width: 768px) {
  .qh-cta-section {
    padding: 60px 0 !important;
  }
  .qh-cta-section h2, .qh-cta-section .qh-h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .qh-cta-section__actions {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ── Sticky demo bar mobile ── */
@media (max-width: 768px) {
  .qh-sticky-demo-bar {
    padding: 10px 16px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .qh-sticky-demo-bar__text {
    font-size: 13px !important;
    width: 100% !important;
    text-align: center !important;
  }
  .qh-sticky-demo-bar .qh-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* ── Footer mobile ── */
@media (max-width: 768px) {
  .qh-footer {
    padding: 48px 0 24px !important;
  }
  .qh-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .qh-footer__bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .qh-footer__socials {
    justify-content: center !important;
  }
  .qh-footer__link {
    padding: 10px 0;
  }
}


/* ========================================================================
   DESKTOP POLISH — Breathing room, spacing, typography refinements
   ======================================================================== */

/* Section spacing consistency */
.qh-section {
  padding: clamp(64px, 7vw, 100px) 0 !important;
}

/* Section headers — more breathing room below */
.qh-section-header {
  margin-bottom: clamp(40px, 4vw, 64px) !important;
}

/* Hero subheadline max-width relaxed */
.qh-hero .qh-body-lg,
.qh-hero-split__content > p {
  max-width: 520px !important;
}

/* Overline badge — subtle background everywhere */
.qh-overline {
  display: inline-block !important;
}

/* Feature row content — link styling */
.qh-card__link {
  font-size: 15px !important;
}

/* Comparison table — stronger Q-Hub column highlight */
table th:last-child,
table td:last-child {
  position: relative;
}

/* Smooth scroll offset for anchor links */
[id] {
  scroll-margin-top: 140px;
}

/* Better focus states for interactive elements */
.qh-btn:focus-visible,
.qh-accordion__trigger:focus-visible,
.qh-tabs__tab:focus-visible,
.qh-tour-tab:focus-visible,
.qh-process-flow__step:focus-visible {
  outline: 3px solid var(--qh-accent);
  outline-offset: 2px;
  border-radius: var(--qh-radius);
}

/* ═══════════════════════════════════════════════════
   VISUAL IDENTITY UPGRADES — Q-Hub Design Signatures
   ═══════════════════════════════════════════════════ */

/* Grid pattern for dark sections */
.is-dark-section::after,
.qh-hero::after,
.qh-cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Section transitions — subtle diagonal clips */
.qh-section + .qh-section.is-dark-section,
.qh-section + .qh-cta-section {
  clip-path: polygon(0 0, 100% 32px, 100% 100%, 0 100%);
  margin-top: -32px;
  padding-top: calc(var(--qh-space-12) + 32px);
}

.is-dark-section + .qh-section:not(.is-dark-section):not(.is-ghost) {
  clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
  margin-top: -32px;
  padding-top: calc(var(--qh-space-12) + 32px);
}

/* Staggered reveal orchestration */
.qh-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.qh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.qh-stagger > *:nth-child(1),
.qh-stagger > .qh-reveal:nth-child(1) { transition-delay: 0s; }
.qh-stagger > *:nth-child(2),
.qh-stagger > .qh-reveal:nth-child(2) { transition-delay: 0.08s; }
.qh-stagger > *:nth-child(3),
.qh-stagger > .qh-reveal:nth-child(3) { transition-delay: 0.16s; }
.qh-stagger > *:nth-child(4),
.qh-stagger > .qh-reveal:nth-child(4) { transition-delay: 0.24s; }
.qh-stagger > *:nth-child(5),
.qh-stagger > .qh-reveal:nth-child(5) { transition-delay: 0.32s; }
.qh-stagger > *:nth-child(6),
.qh-stagger > .qh-reveal:nth-child(6) { transition-delay: 0.4s; }

/* Smooth gradient mesh on all dark sections */
.is-dark-section {
  position: relative;
}
.is-dark-section > * {
  position: relative;
  z-index: 1;
}

/* Card hover micro-interaction upgrade */
.qh-card:hover,
.qh-features__card:hover,
.qh-team-card:hover,
.qh-res-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Button hover — subtle scale */
.qh-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 111, 237, 0.2);
}

/* Focus states — accessibility + visual */
.qh-btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--qh-accent);
  outline-offset: 2px;
  border-radius: var(--qh-radius);
}

@media (max-width: 768px) {
  .qh-section + .qh-section.is-dark-section,
  .qh-section + .qh-cta-section,
  .is-dark-section + .qh-section:not(.is-dark-section):not(.is-ghost) {
    clip-path: none;
    margin-top: 0;
    padding-top: var(--qh-space-12);
  }
}

/* Regulation code badges */
.qh-reg-code {
  font-weight: 700;
  font-size: 0.95em;
  padding: 1px 6px;
  border-radius: var(--qh-radius-sm);
  background: color-mix(in oklch, var(--qh-accent) 8%, transparent);
  color: var(--qh-accent);
  white-space: nowrap;
}

/* ── Product Hero Entrance Stagger ── */
.qh-product-hero .qh-product-hero__overline { opacity: 0; transform: translateY(16px); animation: qh-hero-fade-up 600ms var(--qh-ease) 100ms forwards; }
.qh-product-hero .qh-product-hero__h1 { opacity: 0; transform: translateY(20px); animation: qh-hero-fade-up 600ms var(--qh-ease) 200ms forwards; }
.qh-product-hero .qh-product-hero__sub { opacity: 0; transform: translateY(16px); animation: qh-hero-fade-up 600ms var(--qh-ease) 350ms forwards; }
.qh-product-hero .qh-product-hero__ctas { opacity: 0; transform: translateY(12px); animation: qh-hero-fade-up 500ms var(--qh-ease) 500ms forwards; }
.qh-product-hero .qh-product-hero__visual { opacity: 0; transform: scale(0.96) translateY(12px); animation: qh-hero-visual-in 700ms var(--qh-ease-spring) 300ms forwards; }

@keyframes qh-hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes qh-hero-visual-in {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .qh-product-hero .qh-product-hero__overline,
  .qh-product-hero .qh-product-hero__h1,
  .qh-product-hero .qh-product-hero__sub,
  .qh-product-hero .qh-product-hero__ctas,
  .qh-product-hero .qh-product-hero__visual {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ========================================================================
   SOLUTION HERO — warmer, outcome-led variant
   Softer gradient, wider text column, no device mockup frame.
   ======================================================================== */

.qh-solution-hero {
  position: relative;
  padding: var(--qh-space-13) 0 var(--qh-space-12);
  background: linear-gradient(160deg, var(--qh-dark) 0%, oklch(0.22 0.08 280) 50%, var(--qh-dark-end) 100%);
  overflow: hidden;
}

.qh-solution-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 30% 60%, color-mix(in oklch, var(--qh-accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.qh-solution-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--qh-space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}

.qh-solution-hero__overline {
  display: inline-flex;
  align-items: center;
  gap: var(--qh-space-2);
  padding: var(--qh-space-1) var(--qh-space-3);
  border-radius: var(--qh-radius-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  font-weight: 600;
  color: var(--qh-accent-light);
  margin-bottom: var(--qh-space-4);
}

.qh-solution-hero__h1 {
  font-family: var(--qh-font-display);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 800;
  color: var(--qh-on-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--qh-space-4);
}

.qh-solution-hero__sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--qh-body-dark);
  max-width: 520px;
  margin-bottom: var(--qh-space-5);
}

.qh-solution-hero__ctas {
  display: flex;
  gap: var(--qh-space-3);
  flex-wrap: wrap;
}

.qh-solution-hero__media {
  position: relative;
  border-radius: var(--qh-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  padding: var(--qh-space-4);
}

.qh-solution-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--qh-radius);
  display: block;
}

/* ── Solution Hero Entrance Stagger ── */
.qh-solution-hero .qh-solution-hero__overline { opacity: 0; transform: translateY(16px); animation: qh-hero-fade-up 600ms var(--qh-ease) 100ms forwards; }
.qh-solution-hero .qh-solution-hero__h1 { opacity: 0; transform: translateY(20px); animation: qh-hero-fade-up 600ms var(--qh-ease) 200ms forwards; }
.qh-solution-hero .qh-solution-hero__sub { opacity: 0; transform: translateY(16px); animation: qh-hero-fade-up 600ms var(--qh-ease) 350ms forwards; }
.qh-solution-hero .qh-solution-hero__ctas { opacity: 0; transform: translateY(12px); animation: qh-hero-fade-up 500ms var(--qh-ease) 500ms forwards; }
.qh-solution-hero .qh-solution-hero__media { opacity: 0; transform: scale(0.96) translateY(12px); animation: qh-hero-visual-in 700ms var(--qh-ease-spring) 300ms forwards; }

@media (prefers-reduced-motion: reduce) {
  .qh-solution-hero .qh-solution-hero__overline,
  .qh-solution-hero .qh-solution-hero__h1,
  .qh-solution-hero .qh-solution-hero__sub,
  .qh-solution-hero .qh-solution-hero__ctas,
  .qh-solution-hero .qh-solution-hero__media {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ── Utility Classes ── */
@layer utilities {

  /* Section padding utilities */
  .qh-py-hero { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(60px, 8vw, 120px); }
  .qh-py-section { padding-top: clamp(48px, 6vw, 100px); padding-bottom: clamp(48px, 6vw, 100px); }
  .qh-py-compact { padding-top: 80px; padding-bottom: 80px; }
  .qh-py-cta { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(60px, 8vw, 120px); }

  /* Background utilities */
  .qh-bg-dark { background: var(--qh-gradient-hero); color: var(--qh-white); }
  .qh-bg-ghost { background: var(--qh-ghost); }
  .qh-bg-white { background: var(--qh-white); }
  .qh-bg-dark-gradient { background: linear-gradient(160deg, var(--qh-dark) 0%, var(--qh-dark-end) 60%, oklch(0.12 0.06 262) 100%); color: var(--qh-white); }

  /* Text colour utilities */
  .qh-text-muted { color: var(--qh-muted); }
  .qh-text-body { color: var(--qh-body); }
  .qh-text-heading { color: var(--qh-heading); }
  .qh-text-accent { color: var(--qh-accent); }
  .qh-text-white { color: var(--qh-white); }
  .qh-text-body-light { color: var(--qh-body-light); }

  /* Common spacing utilities */
  .qh-mb-0 { margin-bottom: 0; }
  .qh-mb-2 { margin-bottom: var(--qh-space-2); }
  .qh-mb-3 { margin-bottom: var(--qh-space-3); }
  .qh-mb-4 { margin-bottom: var(--qh-space-4); }
  .qh-mb-5 { margin-bottom: var(--qh-space-5); }
  .qh-mb-6 { margin-bottom: var(--qh-space-6); }
  .qh-mb-8 { margin-bottom: var(--qh-space-8); }
  .qh-gap-3 { gap: var(--qh-space-3); }
  .qh-gap-4 { gap: var(--qh-space-4); }
  .qh-gap-6 { gap: var(--qh-space-6); }
  .qh-gap-8 { gap: var(--qh-space-8); }

  /* Max-width utilities */
  .qh-max-prose { max-width: 72ch; }
  .qh-max-narrow { max-width: 640px; }
  .qh-max-medium { max-width: 800px; }

}