/* ================================================================
       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('/assets/fonts/satoshi-variable.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/assets/fonts/inter-variable.woff2') format('woff2');
    }

    /* ── Design Tokens ── */
    :root {
      /* Colors: Primary — deep sapphire with luminous accents */
      --qh-dark: #091D6B;
      --qh-dark-end: #050D30;
      /* Was #3B82F6 / #2563EB. White-on-#3B82F6 measures 3.68:1, below the
         4.5:1 WCAG AA floor, and the primary CTA is white-on-accent. DESIGN.md
         darkened the ramp one step for exactly this reason; the standalone
         homepage never picked the change up. #2563EB measures 5.17:1. */
      --qh-accent: #2563EB;
      --qh-accent-hover: #1D4ED8;
      --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-border-med: #cbd5e1;
      --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;
      --qh-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

      /* Spacing — the DESIGN.md scale. This page is standalone (it loads only
         this stylesheet, never qh-variables.css), so without these declarations
         every var(--qh-space-*) below was invalid at computed-value time and
         silently collapsed to 0. 1-6 fixed, 7-13 fluid. */
      --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);

      --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;
      /* Undefined until now, so .qh-tabs__tab and .qh-carousel__metric were
         rendering as square rectangles instead of pills. */
      --qh-radius-full: 100px;
    }

    /* ── 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: #1d4ed8;
      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 0.3s 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__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: 100px;
      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: 8px;
      color: var(--nav-text-strong);
      transition: color var(--qh-duration-slow) var(--qh-ease);
    }

    /* ── 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: 8px 10px 8px 12px;
      border-radius: 8px;
      transition: background var(--qh-duration-fast) var(--qh-ease),
                  border-color var(--qh-duration-fast) 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);
    }

    .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: 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;
      justify-content: space-between;
    }
    .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%);
      /* The closed drawer was only translated off-screen, so its ~90 links
         stayed focusable: a keyboard user tabbed through an invisible menu,
         and axe flagged aria-hidden-focus because they sit inside an
         aria-hidden container. `visibility` removes them from the tab order
         and is transitionable, so the slide animation still runs. */
      visibility: hidden;
      transition: transform 0.4s var(--qh-ease-spring), visibility 0.4s;
      overflow: hidden;
    }
    .qh-mobile-nav.is-open {
      visibility: visible;
      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%);
      /* Same problem one level down: the four level-2 panels were only slid
         off-screen, so their links stayed focusable even while the drawer was
         open, adding ~150 phantom tab stops. */
      visibility: hidden;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
      will-change: transform;
    }
    .qh-mobile-nav__panel[data-level="1"] {
      transform: translateX(0);
    }
    .qh-mobile-nav__panel.is-active {
      transform: translateX(0);
    }
    /* Scoped to the OPEN drawer. Unscoped, these re-declare visibility:visible
       and so override the closed drawer's inherited `hidden` — which left the
       level-1 panel's 86 links focusable behind a closed menu. */
    .qh-mobile-nav.is-open .qh-mobile-nav__panel[data-level="1"],
    .qh-mobile-nav.is-open .qh-mobile-nav__panel.is-active {
      visibility: visible;
    }
    .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-grid-gutter);
      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 120ms 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 120ms 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 120ms 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 rgba(0,0,0,0.04);
      text-decoration: none;
      transition: background 120ms var(--qh-ease);
    }
    .qh-mobile-nav__item:hover {
      background: var(--qh-ghost);
    }
    .qh-mobile-nav__item-title {
      display: block;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 15px;
      color: var(--qh-heading);
      line-height: 1.3;
    }
    .qh-mobile-nav__item-desc {
      display: block;
      font-family: var(--qh-font-body);
      font-weight: 400;
      font-size: 13px;
      color: var(--qh-muted, oklch(0.55 0.03 260));
      line-height: 1.4;
      margin-top: 2px;
    }

    /* Bottom actions */
    .qh-mobile-nav__footer {
      padding: 16px 20px;
      border-top: 1px solid var(--qh-border);
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-shrink: 0;
    }
    .qh-mobile-nav__footer-cta {
      display: block;
      text-align: center;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 15px;
      color: var(--qh-white);
      background: var(--qh-accent);
      padding: 14px 24px;
      border-radius: 100px;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }
    .qh-mobile-nav__footer-secondary {
      display: block;
      text-align: center;
      font-family: var(--qh-font-body);
      font-weight: 500;
      font-size: 15px;
      color: var(--qh-body);
      padding: 12px 24px;
      text-decoration: none;
      border: 1px solid var(--qh-border);
      border-radius: 100px;
      transition: color var(--qh-duration) var(--qh-ease),
                  border-color var(--qh-duration) var(--qh-ease);
    }
    .qh-mobile-nav__footer-secondary:hover {
      color: var(--qh-heading);
      border-color: var(--qh-heading);
    }

    /* Hide mobile nav on desktop */
    @media (min-width: 1025px) {
      .qh-mobile-nav { display: none; }
    }


    /* ================================================================
       HERO SECTION — Gradient, Stripe-inspired split layout
       ================================================================ */
    .qh-hero {
      position: relative;
      display: flex;
      align-items: center;
      z-index: 6;
      padding: clamp(64px, 8vh, 100px) 0 clamp(80px, 10vh, 140px);
      background: var(--qh-dark);
    }

    /* Animated gradient background — 3 layers: base + 2 floating */
    .qh-hero__mesh {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        radial-gradient(ellipse 70% 60% at 25% 30%, rgba(59, 130, 246, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 65% at 72% 20%, rgba(139, 92, 246, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 55% 55% at 50% 80%, rgba(16, 185, 129, 0.15) 0%, transparent 55%),
        linear-gradient(150deg, var(--qh-dark) 0%, #0F2B7A 50%, var(--qh-dark) 100%);
      z-index: 0;
      pointer-events: none;
    }

    .qh-hero__mesh::before {
      content: '';
      position: absolute;
      inset: -25%;
      background:
        radial-gradient(ellipse 55% 50% at 30% 40%, rgba(59, 130, 246, 0.24) 0%, transparent 55%),
        radial-gradient(ellipse 45% 65% at 75% 25%, rgba(139, 92, 246, 0.18) 0%, transparent 60%);
      filter: blur(120px);
      animation: qh-gradient-drift-1 40s ease-in-out infinite;
    }

    .qh-hero__mesh::after {
      content: '';
      position: absolute;
      inset: -25%;
      background:
        radial-gradient(ellipse 65% 50% at 65% 60%, rgba(16, 185, 129, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse 45% 55% at 20% 70%, rgba(59, 130, 246, 0.16) 0%, transparent 50%);
      filter: blur(120px);
      animation: qh-gradient-drift-2 50s ease-in-out infinite reverse;
    }

    @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%); }
    }

    /* Diagonal slice — white transition at hero bottom (Stripe-style) */
    .qh-hero::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 80px;
      background: var(--qh-white);
      clip-path: polygon(0 100%, 100% 0, 100% 100%);
      z-index: 5;
      pointer-events: none;
    }

    /* Content layer — z-index above diagonal slice (5) so devices break through */
    .qh-hero__content {
      position: relative;
      z-index: 10;
      width: 100%;
    }

    .qh-hero__grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      align-items: center;
      gap: clamp(32px, 4vw, 56px);
    }

    /* Copy — left-aligned */
    .qh-hero__copy {
      max-width: 560px;
    }

    .qh-hero__overline {
      color: var(--qh-accent);
      margin-bottom: var(--qh-space-5);
      background: rgba(33,111,237,0.15);
      padding: 6px 16px;
      border-radius: 100px;
      display: inline-block;
      border: 1px solid rgba(33,111,237,0.25);
      opacity: 0;
      transform: translateY(16px);
      animation: qh-fade-up 0.6s var(--qh-ease-spring) 0.2s forwards;
    }

    .qh-hero__headline {
      color: var(--qh-white);
      margin-bottom: var(--qh-space-5);
      opacity: 0;
      transform: translateY(20px);
      animation: qh-fade-up 0.7s var(--qh-ease-spring) 0.35s forwards;
    }

    .qh-hero__sub {
      color: rgba(255,255,255,0.80);
      margin-bottom: var(--qh-space-7);
      max-width: 480px;
      opacity: 0;
      transform: translateY(16px);
      animation: qh-fade-up 0.6s var(--qh-ease-spring) 0.5s forwards;
    }

    /* The definitional paragraph had no CSS rule at all — every property was
       inline, including a margin-top that collapsed against .qh-hero__sub's
       larger margin-bottom and so never did anything. It also had no bottom
       margin, leaving 40px above it and 0px below: visually glued to the CTA
       and detached from the copy it belongs with. Now it sits in the hero's
       rhythm, and its 15px/1.65 (off-scale) becomes .qh-body-sm in the markup. */
    .qh-hero__def {
      color: rgba(255, 255, 255, 0.6);
      max-width: 52ch;
      margin-bottom: var(--qh-space-7);
    }

    .qh-hero__actions {
      display: flex;
      align-items: center;
      gap: var(--qh-space-4);
      margin-bottom: var(--qh-space-7);
      opacity: 0;
      transform: translateY(16px);
      animation: qh-fade-up 0.6s var(--qh-ease-spring) 0.65s forwards;
    }

    /* Primary CTA Button */
    .qh-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 18px;
      color: var(--qh-white);
      background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
      padding: 14px 32px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      transition: transform var(--qh-duration) var(--qh-ease),
                  box-shadow var(--qh-duration) var(--qh-ease);
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25),
                  inset 0 1px 0 rgba(255,255,255,0.15);
    }

    .qh-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35),
                  inset 0 1px 0 rgba(255,255,255,0.2);
    }

    .qh-btn-primary:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2),
                  inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .qh-btn-primary .qh-btn-arrow {
      transition: transform var(--qh-duration) var(--qh-ease);
    }
    .qh-btn-primary:hover .qh-btn-arrow {
      transform: translateX(4px);
    }

    /* Hero CTAs use the canonical is-lg size (matches the rest of the site) */
    .qh-hero__actions .qh-btn-primary,
    .qh-hero__actions .qh-btn-secondary {
      font-size: 20px;
      padding: 16px 34px;
    }

    /* Secondary CTA Button — default: dark outline for light sections */
    .qh-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 18px;
      color: var(--qh-heading);
      background: transparent;
      padding: 14px 32px;
      border-radius: 100px;
      border: 1.5px solid var(--qh-border);
      cursor: pointer;
      transition: all var(--qh-duration) var(--qh-ease);
    }

    .qh-btn-secondary:hover {
      color: var(--qh-accent);
      border-color: var(--qh-accent);
      background: rgba(59, 130, 246, 0.04);
    }

    /* White outline variant — gradient hero + dark sections */
    .qh-hero .qh-btn-secondary,
    .is-dark-section .qh-btn-secondary {
      color: rgba(255, 255, 255, 0.9);
      border-color: rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.06);
    }
    .qh-hero .qh-btn-secondary:hover,
    .is-dark-section .qh-btn-secondary:hover {
      color: var(--qh-white);
      border-color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.1);
    }

    /* Trust Badge Row */
    .qh-hero__trust {
      display: flex;
      align-items: center;
      gap: var(--qh-space-5);
      /* `gap` is horizontal here; without this the fine print sat flush. */
      margin-top: var(--qh-space-3);
      opacity: 0;
      transform: translateY(16px);
      animation: qh-fade-up 0.6s var(--qh-ease-spring) 0.8s forwards;
    }

    .qh-hero__trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.6);
      font-family: var(--qh-font-body);
      font-size: 14px;
      font-weight: 500;
      transition: color var(--qh-duration) var(--qh-ease);
    }

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

    .qh-hero__trust-icon {
      width: 18px;
      height: 18px;
      color: rgba(255,255,255,0.6);
      opacity: 0.8;
      flex-shrink: 0;
    }

    .qh-hero__trust-value {
      font-weight: 700;
      color: var(--qh-white);
      font-family: var(--qh-font-display);
    }

    .qh-hero__trust-sep {
      width: 1px;
      height: 20px;
      background: rgba(255,255,255,0.2);
    }


    /* Hero device composition — desktop behind, mobile in front.
       margin-bottom pulls devices into the diagonal slice zone. */
    .qh-hero__media {
      position: relative;
      width: 100%;
      aspect-ratio: 5 / 4;
      margin-bottom: -60px;
      opacity: 0;
      transform: translateX(30px);
      animation: qh-slide-in 0.8s var(--qh-ease-spring) 0.5s forwards;
    }

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

    /* ── Desktop device (background, 50% off-screen right) ── */
    .qh-hero__desktop {
      position: absolute;
      top: 0;
      left: 0;
      width: 110%;
      border-radius: var(--qh-radius-lg);
      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;
    }

    /* macOS-style window frame — light day mode */
    .qh-hero__window-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: var(--qh-ghost);
      border-bottom: 1px solid var(--qh-border);
    }

    .qh-hero__window-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .qh-hero__window-dot:nth-child(1) { background: #ff5f57; }
    .qh-hero__window-dot:nth-child(2) { background: #febc2e; }
    .qh-hero__window-dot:nth-child(3) { background: #28c840; }

    .qh-hero__window-title {
      flex: 1;
      text-align: center;
      font-family: var(--qh-font-body);
      font-size: 12px;
      font-weight: 500;
      color: var(--qh-body);
      margin-right: 44px;
    }

    .qh-hero__window-body {
      background: var(--qh-white);
      padding: 0;
      aspect-ratio: 16 / 10;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Dashboard placeholder with skeleton UI */
    .qh-hero__dashboard {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      padding: 12px;
      display: flex;
    }

    .qh-hero__dash-sidebar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 48px;
      background: var(--qh-ghost);
      border-right: 1px solid var(--qh-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 12px;
      gap: 8px;
    }

    .qh-hero__dash-main {
      margin-left: 48px;
      padding: 0 0 0 12px;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      gap: 8px;
    }

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

    .qh-hero__dash-title {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 14px;
      color: var(--qh-heading);
    }

    .qh-hero__dash-tabs {
      display: flex;
      gap: 2px;
    }

    .qh-hero__dash-tab {
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: var(--qh-body);
      font-family: var(--qh-font-body);
    }
    .qh-hero__dash-tab.is-active {
      background: rgba(59, 130, 246, 0.1);
      color: var(--qh-accent);
    }

    /* Stat cards row — 4 columns to show more KPIs */
    .qh-hero__dash-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .qh-hero__dash-stat {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 6px;
      padding: 8px 10px;
    }

    .qh-hero__dash-stat-label {
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-body);
      margin-bottom: 4px;
      font-family: var(--qh-font-body);
    }

    .qh-hero__dash-stat-value {
      font-family: var(--qh-font-display);
      font-weight: 800;
      font-size: 16px;
      color: var(--qh-heading);
      line-height: 1;
    }

    .qh-hero__dash-stat-trend {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 10px;
      font-weight: 600;
      margin-left: 6px;
      font-family: var(--qh-font-body);
    }
    .qh-hero__dash-stat-trend.is-up { color: var(--qh-success); }
    .qh-hero__dash-stat-trend.is-down { color: var(--qh-error); }

    /* Charts row — trend line + donut side by side */
    .qh-hero__dash-charts-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
    }

    .qh-hero__dash-chart {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 6px;
      height: 120px;
      position: relative;
      overflow: hidden;
      padding-top: 22px;
    }

    .qh-hero__dash-chart-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--qh-body);
      font-family: var(--qh-font-body);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }
    .qh-hero__dash-chart .qh-hero__dash-chart-label {
      position: absolute;
      top: 8px;
      left: 10px;
      margin: 0;
    }

    .qh-hero__dash-chart-line {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: calc(100% - 28px);
    }

    /* NCR donut chart */
    .qh-hero__dash-donut-wrap {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 6px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 110px;
    }
    .qh-hero__dash-donut-wrap canvas {
      display: block;
      width: 60px;
      height: 60px;
      margin: 2px 0 4px;
    }
    .qh-hero__dash-donut-legend {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 100%;
    }
    .qh-hero__dash-legend-item {
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-body);
      font-family: var(--qh-font-body);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .qh-hero__dash-legend-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Recent activity feed */
    .qh-hero__dash-activity {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 8px;
      padding: 8px 10px;
    }
    .qh-hero__dash-activity .qh-hero__dash-chart-label {
      margin-bottom: 4px;
    }
    .qh-hero__dash-activity-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 0;
      border-bottom: 1px solid var(--qh-border);
    }
    .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;
      font-weight: 500;
      color: var(--qh-heading);
      font-family: var(--qh-font-body);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .qh-hero__dash-activity-time {
      font-size: 9px;
      color: var(--qh-body);
      font-family: var(--qh-font-body);
      white-space: nowrap;
    }

    /* Bottom 2-column section — fills remaining dashboard height */
    .qh-hero__dash-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      flex: 1;
      min-height: 0;
    }

    /* Compliance by site — horizontal progress bars */
    .qh-hero__dash-sites {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 8px;
      padding: 8px 10px;
    }
    .qh-hero__dash-site-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
    }
    .qh-hero__dash-site-name {
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-heading);
      font-family: var(--qh-font-body);
      width: 52px;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .qh-hero__dash-bar {
      flex: 1;
      height: 6px;
      background: var(--qh-border);
      border-radius: 3px;
      overflow: hidden;
    }
    .qh-hero__dash-bar-fill {
      height: 100%;
      border-radius: 3px;
      background: var(--qh-accent);
    }
    .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: 700;
      color: var(--qh-heading);
      font-family: var(--qh-font-display);
      width: 28px;
      text-align: right;
      flex-shrink: 0;
    }

    /* Upcoming audits table */
    .qh-hero__dash-audits {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 8px;
      padding: 8px 10px;
    }
    .qh-hero__dash-audit-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
      border-bottom: 1px solid var(--qh-border);
    }
    .qh-hero__dash-audit-row:last-child {
      border-bottom: none;
    }
    .qh-hero__dash-audit-name {
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-heading);
      font-family: var(--qh-font-body);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .qh-hero__dash-badge {
      font-size: 9px;
      font-weight: 600;
      font-family: var(--qh-font-body);
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .qh-hero__dash-badge.is-info {
      background: rgba(59, 130, 246, 0.1);
      color: var(--qh-accent);
    }
    .qh-hero__dash-badge.is-warning {
      background: rgba(245, 158, 11, 0.1);
      color: #D97706;
    }
    .qh-hero__dash-badge.is-success {
      background: rgba(16, 185, 129, 0.1);
      color: #059669;
    }

    /* Sidebar icons — real SVG icons instead of plain squares */
    .qh-hero__dash-sidebar-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--qh-body);
    }
    .qh-hero__dash-sidebar-icon.is-active {
      background: rgba(59, 130, 246, 0.1);
      color: var(--qh-accent);
      box-shadow: none;
    }

    /* ── Mobile device (foreground, overlapping desktop) — day mode ── */
    .qh-hero__mobile {
      position: absolute;
      z-index: 2;
      width: 170px;
      bottom: 10px;
      left: -15px;
      border-radius: 24px;
      overflow: hidden;
      background: var(--qh-white);
      border: 3px solid rgba(255,255,255,0.15);
      box-shadow:
        0 24px 60px rgba(0,0,0,0.35),
        0 12px 30px rgba(0,0,0,0.2);
    }

    .qh-hero__mobile-notch {
      width: 100%;
      height: 28px;
      background: var(--qh-white);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .qh-hero__mobile-notch::before {
      content: '';
      width: 80px;
      height: 5px;
      border-radius: 100px;
      background: var(--qh-border);
    }

    .qh-hero__mobile-body {
      padding: 12px;
      max-height: 320px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    }

    /* Mobile dashboard UI — day mode */
    .qh-hero__mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .qh-hero__mobile-title {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 14px;
      color: var(--qh-heading);
    }
    .qh-hero__mobile-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--qh-accent), var(--qh-secondary));
    }

    .qh-hero__mobile-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px;
    }

    .qh-hero__mobile-stat {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 10px;
      padding: 10px;
    }
    .qh-hero__mobile-stat-label {
      font-size: 9px;
      font-weight: 500;
      color: var(--qh-body);
      margin-bottom: 4px;
      font-family: var(--qh-font-body);
    }
    .qh-hero__mobile-stat-value {
      font-family: var(--qh-font-display);
      font-weight: 800;
      font-size: 18px;
      color: var(--qh-heading);
      line-height: 1;
    }

    /* Compliance ring row */
    .qh-hero__mobile-ring-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      padding: 10px;
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 12px;
    }
    .qh-hero__mobile-ring-wrap {
      position: relative;
      width: 48px;
      height: 48px;
      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-family: var(--qh-font-display);
      font-weight: 800;
      font-size: 14px;
      color: var(--qh-heading);
    }
    .qh-hero__mobile-ring-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .qh-hero__mobile-ring-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--qh-heading);
      font-family: var(--qh-font-body);
    }
    .qh-hero__mobile-ring-sub {
      font-size: 10px;
      font-weight: 600;
      font-family: var(--qh-font-body);
    }

    /* Section divider label */
    .qh-hero__mobile-section-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--qh-body);
      font-family: var(--qh-font-body);
      margin-bottom: 8px;
    }

    .qh-hero__mobile-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .qh-hero__mobile-list-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 8px;
    }
    .qh-hero__mobile-list-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .qh-hero__mobile-list-text {
      font-size: 12px;
      font-weight: 500;
      color: var(--qh-body);
      font-family: var(--qh-font-body);
    }
    .qh-hero__mobile-list-badge {
      margin-left: auto;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 100px;
      font-family: var(--qh-font-body);
    }


    /* ================================================================
       DIAGONAL SLICE — Hero bottom separator
       ================================================================ */
    /* Hero bottom — subtle gradient fade into next section */
    .qh-hero__slice {
      display: none; /* Clean edge for light hero — no diagonal needed */
    }
    .qh-hero__slice-accent,
    .qh-hero__slice-pattern,
    .qh-hero__slice-white {
      display: none;
    }


    /* ================================================================
       BELOW-HERO SECTIONS (demonstrating the full page flow)
       ================================================================ */

    /* Logo Marquee */
    .qh-logos {
      background: var(--qh-white);
      position: relative;
      z-index: 5;
    }

    .qh-logos__label {
      text-align: center;
      color: var(--qh-body);
      margin-bottom: 32px;
    }

    .qh-logos .qh-container {
      position: relative;
      overflow: hidden;
    }
    .qh-logos__track {
      display: flex;
      align-items: center;
      gap: clamp(40px, 5vw, 72px);
      width: max-content;
      animation: qh-marquee 35s linear infinite;
    }
    .qh-logos__track:hover {
      animation-play-state: paused;
    }
    @keyframes qh-marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .qh-logos__item {
      height: 36px;
      width: auto;
      object-fit: contain;
      opacity: 0.45;
      filter: grayscale(100%);
      transition: opacity var(--qh-duration) var(--qh-ease), filter var(--qh-duration) var(--qh-ease);
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.02em;
      color: var(--qh-heading);
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      flex-shrink: 0;
      user-select: none;
    }

    .qh-logos__item:hover {
      opacity: 0.65;
      filter: grayscale(0);
    }

    /* Monogram badge before each company name */
    .qh-logos__mono {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: var(--qh-body);
      letter-spacing: 0;
      flex-shrink: 0;
    }

    /* Fade edges — white gradients that overlay the track ends */
    .qh-logos__fade {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }
    .qh-logos__fade--left {
      left: 0;
      background: linear-gradient(to right, var(--qh-white), transparent);
    }
    .qh-logos__fade--right {
      right: 0;
      background: linear-gradient(to left, var(--qh-white), transparent);
    }

    @media (prefers-reduced-motion: reduce) {
      .qh-logos__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px 48px;
      }
      .qh-logos__fade { display: none; }
    }


    /* Stats Strip */
    .qh-stats {
      background: linear-gradient(180deg, var(--qh-dark) 0%, var(--qh-surface-dark) 100%);
      position: relative;
      z-index: 5;
      overflow: hidden;
    }
    /* Subtle radial glow behind stats */
    .qh-stats::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px;
      height: 300px;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse, rgba(59,130,246,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .qh-stats__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      text-align: center;
      position: relative;
    }

    .qh-stats__item {
      padding: 16px 32px;
      position: relative;
    }
    /* Vertical separator lines between stats */
    .qh-stats__item + .qh-stats__item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 20%;
      height: 60%;
      width: 1px;
      background: rgba(255,255,255,0.1);
    }

    .qh-stats__number {
      font-family: var(--qh-font-display);
      font-weight: 900;
      font-size: clamp(36px, 3vw + 8px, 52px);
      color: var(--qh-white);
      line-height: 1;
      margin-bottom: 8px;
      display: block;
      transition: transform var(--qh-duration) var(--qh-ease),
                  color var(--qh-duration) var(--qh-ease);
    }

    .qh-stats__item:hover .qh-stats__number {
      transform: scale(1.05);
      color: var(--qh-warm-light);
    }

    .qh-stats__label {
      font-family: var(--qh-font-body);
      font-size: 15px;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
    }


    /* Feature Grid */
    /* ── Section rhythm ──────────────────────────────────────────────────
       One place defines vertical rhythm for the whole page, on the DESIGN.md
       scale. Previously six sections carried their own inline clamp() padding
       and two `!important` blocks existed purely to beat those inline styles
       at breakpoints — which produced an 18px jump at exactly 1025px and left
       the page with ten different vertical rhythms (56/72/80/115/140px all
       visible in one scroll at 1440px). The fluid tokens interpolate smoothly,
       so no breakpoint override is needed at all.

       Three tiers: narrow bands < content sections < bookends. */
    .qh-platform-showcase,
    .qh-features,
    .qh-feature-row,
    .qh-tabs-section,
    .qh-expandable-section,
    .qh-testimonials-section,
    .qh-carousel-section,
    .qh-promo-section,
    .qh-faq-section,
    .qh-roi-banner {
      padding-top: var(--qh-space-12);
      padding-bottom: var(--qh-space-12);
    }

    /* Server-rendered showcase fallback. This is what crawlers, no-JS visitors
       and every mobile visitor see, since the React widget is desktop-only —
       so it is real content, not a placeholder, and gets real type classes. */
    .qh-showcase-ssr {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--qh-space-6) var(--qh-space-5);
      max-width: var(--qh-grid-max);
      margin: 0 auto;
      padding: var(--qh-space-2) var(--qh-grid-gutter) var(--qh-space-5);
    }

    .qh-showcase-ssr h3 {
      margin-bottom: var(--qh-space-2);
      color: var(--qh-heading);
    }

    .qh-showcase-ssr p {
      color: var(--qh-body);
    }

    /* Narrow bands: supporting strips, not full sections. */
    .qh-logos {
      padding-top: var(--qh-space-9);
      padding-bottom: var(--qh-space-9);
    }

    .qh-stats {
      padding-top: var(--qh-space-10);
      padding-bottom: var(--qh-space-10);
    }

    /* Bookend: the closing CTA carries the most air. Was clamp(80,10vw,140),
       whose 140px ceiling exceeded the scale's 120px maximum. */
    .qh-cta {
      padding-top: var(--qh-space-13);
      padding-bottom: var(--qh-space-13);
    }

    .qh-features {
      background: var(--qh-ghost);
      position: relative;
      z-index: 5;
    }

    .qh-section-header {
      text-align: center;
      margin-bottom: clamp(48px, 5vw, 72px);
    }

    .qh-section-header .qh-overline {
      color: var(--qh-accent);
      margin-bottom: 16px;
      display: block;
    }

    .qh-section-header .qh-body {
      max-width: 540px;
      margin: 16px auto 0;
      color: var(--qh-body);
    }

    .qh-features__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .qh-features__card {
      background: var(--qh-white);
      border: 1px solid var(--qh-border);
      border-radius: var(--qh-radius-lg);
      padding: var(--qh-space-6);
      transition: transform 0.3s var(--qh-ease),
                  box-shadow 0.3s var(--qh-ease),
                  border-color 0.3s var(--qh-ease);
      position: relative;
      overflow: hidden;
    }

    .qh-features__card::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 0.3s var(--qh-ease);
    }

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

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

    .qh-features__icon {
      width: 48px;
      height: 48px;
      border-radius: var(--qh-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--qh-space-4);
      font-size: 22px;
    }

    .qh-features__card:nth-child(1) .qh-features__icon { background: rgba(59, 130, 246, 0.1); color: var(--qh-accent); }
    .qh-features__card:nth-child(2) .qh-features__icon { background: rgba(16, 185, 129, 0.1); color: var(--qh-success); }
    .qh-features__card:nth-child(3) .qh-features__icon { background: rgba(131, 106, 228, 0.1); color: var(--qh-secondary); }
    .qh-features__card:nth-child(4) .qh-features__icon { background: rgba(229, 168, 53, 0.1); color: var(--qh-warm); }
    .qh-features__card:nth-child(5) .qh-features__icon { background: rgba(6, 182, 212, 0.1); color: var(--qh-info); }
    .qh-features__card:nth-child(6) .qh-features__icon { background: rgba(239, 68, 68, 0.1); color: var(--qh-error); }

    .qh-features__card .qh-h4 {
      margin-bottom: var(--qh-space-3);
    }

    /* The per-card modal was mouse-only: the card is a <div onclick> with no
       keyboard path. Putting role="button" on the card instead would nest
       interactive controls (it already holds two links), which axe flags. So
       each card gets a real button, visually hidden until focused — the design
       is unchanged for mouse users, keyboard users get a labelled control. */
    .qh-card-preview {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .qh-card-preview:focus-visible {
      position: static;
      width: auto; height: auto;
      margin: var(--qh-space-3) 0 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      display: inline-block;
      padding: var(--qh-space-2) var(--qh-space-3);
      background: var(--qh-ghost);
      border-radius: var(--qh-radius);
      font-family: var(--qh-font-body);
      font-size: 14px;
      font-weight: 600;
      color: var(--qh-accent);
      cursor: pointer;
    }

    /* The card heading is a real link (crawlable equity to the product page),
       but must read as a heading, not as body-copy link styling. */
    .qh-features__title-link {
      color: inherit;
      text-decoration: none;
    }

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

    .qh-features__title-link:focus-visible {
      outline: 2px solid var(--qh-accent);
      outline-offset: 3px;
      border-radius: 3px;
    }

    .qh-features__card .qh-body-sm {
      color: var(--qh-body);
    }
    .qh-features__link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--qh-accent);
      text-decoration: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s var(--qh-ease), transform 0.3s var(--qh-ease), gap 0.2s var(--qh-ease);
    }
    .qh-features__card:hover .qh-features__link {
      opacity: 1;
      transform: translateY(0);
    }
    .qh-features__link:hover { gap: 8px; }
    .qh-features__link svg { width: 14px; height: 14px; }


    /* Feature Rows */
    .qh-feature-row {
      position: relative;
      z-index: 5;
    }

    .qh-feature-row.is-white { background: var(--qh-white); }
    .qh-feature-row.is-ghost { background: var(--qh-ghost); }

    .qh-feature-row__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 5vw, 80px);
      align-items: center;
    }

    .qh-feature-row.is-reversed .qh-feature-row__grid {
      direction: rtl;
    }
    .qh-feature-row.is-reversed .qh-feature-row__grid > * {
      direction: ltr;
    }

    .qh-feature-row__text .qh-overline {
      color: var(--qh-accent);
      margin-bottom: var(--qh-space-4);
      display: block;
    }

    .qh-feature-row__text .qh-h2 {
      margin-bottom: 16px;
    }

    .qh-feature-row__text .qh-body {
      margin-bottom: 24px;
    }

    .qh-feature-row__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 16px;
      color: var(--qh-accent);
      transition: gap var(--qh-duration) var(--qh-ease);
    }
    .qh-feature-row__link:hover { gap: 10px; }

    .qh-feature-row__media {
      border-radius: var(--qh-radius-lg);
      overflow: hidden;
      box-shadow: var(--qh-shadow-md);
      background: var(--qh-white);
      aspect-ratio: 580/380;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      color: var(--qh-body);
      font-size: 14px;
      border: 1px solid var(--qh-border);
      position: relative;
      transition: box-shadow var(--qh-duration-slow) var(--qh-ease), transform var(--qh-duration-slow) var(--qh-ease);
    }
    .qh-feature-row__media:hover {
      box-shadow: var(--qh-shadow-lg);
      transform: translateY(-4px);
    }

    /* ── Feature Mockup: shared inner chrome ── */
    .qh-mock {
      width: 100%;
      display: flex;
      flex-direction: column;
      font-family: var(--qh-font-body);
    }
    .qh-mock__bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: var(--qh-ghost);
      border-bottom: 1px solid var(--qh-border);
      flex-shrink: 0;
    }
    .qh-mock__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .qh-mock__dot:nth-child(1) { background: #ff5f57; }
    .qh-mock__dot:nth-child(2) { background: #febc2e; }
    .qh-mock__dot:nth-child(3) { background: #28c840; }
    .qh-mock__bar-title {
      flex: 1;
      text-align: center;
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-body);
      margin-right: 30px;
    }
    .qh-mock__body {
      flex: 1;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
      min-height: 0;
    }

    /* ── QMS Mockup: Audit trail table ── */
    .qh-mock-qms__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .qh-mock-qms__title {
      font-size: 12px;
      font-weight: 700;
      color: var(--qh-heading);
    }
    .qh-mock-qms__badge {
      font-size: 9px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 100px;
      background: rgba(16, 185, 129, 0.12);
      color: var(--qh-success);
    }
    .qh-mock-qms__table {
      width: 100%;
      border-collapse: collapse;
    }
    .qh-mock-qms__table th {
      font-size: 9px;
      font-weight: 600;
      color: var(--qh-body);
      text-align: left;
      padding: 6px 8px;
      border-bottom: 1px solid var(--qh-border);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .qh-mock-qms__table td {
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-heading);
      padding: 7px 8px;
      border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    }
    .qh-mock-qms__table tr:last-child td { border-bottom: none; }
    .qh-mock__status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 9px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 100px;
    }
    .qh-mock__status--pass { background: rgba(16,185,129,0.1); color: var(--qh-success); }
    .qh-mock__status--warn { background: rgba(245,158,11,0.1); color: var(--qh-warning); }
    .qh-mock__status--fail { background: rgba(239,68,68,0.1); color: var(--qh-error); }
    .qh-mock__status--info { background: rgba(59,130,246,0.1); color: var(--qh-accent); }
    .qh-mock__status-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    /* ── HSE Mockup: Mobile incident report card ── */
    .qh-mock-hse {
      background: var(--qh-ghost);
      border-radius: 16px;
      padding: 14px;
      max-width: 220px;
      margin: auto;
      border: 1px solid var(--qh-border);
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-family: var(--qh-font-body);
    }
    .qh-mock-hse__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .qh-mock-hse__title {
      font-size: 11px;
      font-weight: 700;
      color: var(--qh-heading);
    }
    .qh-mock-hse__severity {
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 3px 8px;
      border-radius: 100px;
      background: rgba(239,68,68,0.12);
      color: var(--qh-error);
    }
    .qh-mock-hse__field {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .qh-mock-hse__label {
      font-size: 8px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--qh-body);
    }
    .qh-mock-hse__value {
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-heading);
      background: var(--qh-white);
      border: 1px solid var(--qh-border);
      border-radius: 6px;
      padding: 6px 8px;
    }
    .qh-mock-hse__photo-row {
      display: flex;
      gap: 6px;
    }
    .qh-mock-hse__photo {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08));
      border: 1px solid var(--qh-border);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .qh-mock-hse__photo svg {
      color: var(--qh-body);
      opacity: 0.5;
    }
    .qh-mock-hse__btn {
      font-size: 10px;
      font-weight: 600;
      color: var(--qh-white);
      background: var(--qh-error);
      border: none;
      border-radius: 8px;
      padding: 7px 0;
      text-align: center;
      letter-spacing: 0.02em;
    }

    /* ── DMS Mockup: Version history timeline ── */
    .qh-mock-dms__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .qh-mock-dms__title {
      font-size: 12px;
      font-weight: 700;
      color: var(--qh-heading);
    }
    .qh-mock-dms__file {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-body);
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 6px;
      padding: 4px 10px;
    }
    .qh-mock-dms__timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-left: 12px;
      border-left: 2px solid var(--qh-border);
      margin-left: 5px;
    }
    .qh-mock-dms__entry {
      position: relative;
      padding: 8px 0 8px 16px;
    }
    .qh-mock-dms__entry::before {
      content: '';
      position: absolute;
      left: -18px;
      top: 12px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--qh-accent);
      background: var(--qh-white);
    }
    .qh-mock-dms__entry.is-current::before {
      background: var(--qh-accent);
      border-color: var(--qh-accent);
    }
    .qh-mock-dms__entry-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }
    .qh-mock-dms__version {
      font-size: 10px;
      font-weight: 700;
      color: var(--qh-heading);
    }
    .qh-mock-dms__date {
      font-size: 9px;
      color: var(--qh-body);
    }
    .qh-mock-dms__desc {
      font-size: 9px;
      color: var(--qh-body);
      line-height: 1.4;
    }
    .qh-mock-dms__author {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 9px;
      font-weight: 600;
      color: var(--qh-heading);
      margin-top: 3px;
    }
    .qh-mock-dms__avatar {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--qh-accent), var(--qh-secondary));
      flex-shrink: 0;
    }

    /* ── Audit Mockup: Checklist with progress ── */
    .qh-mock-audit__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .qh-mock-audit__title {
      font-size: 12px;
      font-weight: 700;
      color: var(--qh-heading);
    }
    .qh-mock-audit__progress-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .qh-mock-audit__progress-bar {
      width: 80px;
      height: 6px;
      background: var(--qh-border);
      border-radius: 3px;
      overflow: hidden;
    }
    .qh-mock-audit__progress-fill {
      height: 100%;
      background: var(--qh-accent);
      border-radius: 3px;
      transition: width 0.6s var(--qh-ease);
    }
    .qh-mock-audit__progress-text {
      font-size: 10px;
      font-weight: 700;
      color: var(--qh-accent);
    }
    .qh-mock-audit__list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .qh-mock-audit__item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: 8px;
      transition: border-color var(--qh-duration-fast) var(--qh-ease);
    }
    .qh-mock-audit__item.is-checked {
      border-color: rgba(16,185,129,0.3);
      background: rgba(16,185,129,0.04);
    }
    .qh-mock-audit__check {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1.5px solid var(--qh-border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .qh-mock-audit__item.is-checked .qh-mock-audit__check {
      background: var(--qh-success);
      border-color: var(--qh-success);
    }
    .qh-mock-audit__item-text {
      font-size: 10px;
      font-weight: 500;
      color: var(--qh-heading);
      flex: 1;
    }
    .qh-mock-audit__item.is-checked .qh-mock-audit__item-text {
      color: var(--qh-body);
      text-decoration: line-through;
    }
    .qh-mock-audit__item-tag {
      font-size: 8px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 100px;
    }


    /* Dark CTA Section */
    .qh-cta {
      background: linear-gradient(135deg, var(--qh-dark) 0%, #0d0f3a 60%, var(--qh-dark-end) 100%);
      text-align: center;
      position: relative;
      overflow: hidden;
      z-index: 5;
    }

    .qh-cta__glow {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

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

    .qh-cta .qh-h2 {
      color: var(--qh-white);
      margin-bottom: 16px;
    }

    .qh-cta .qh-body-lg {
      color: rgba(255,255,255,0.6);
      margin-bottom: 40px;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    .qh-cta__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .qh-cta__link {
      color: var(--qh-accent-light);
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: gap var(--qh-duration) var(--qh-ease),
                  color var(--qh-duration) var(--qh-ease);
    }
    .qh-cta__link:hover { gap: 10px; color: var(--qh-white); }


    /* Footer */
    .qh-footer {
      padding: var(--qh-space-12) 0 var(--qh-space-6);
      background: linear-gradient(180deg, var(--qh-dark-end) 0%, #060a1f 100%);
      position: relative;
      z-index: 5;
    }
    .qh-footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(59,130,246,0.2), transparent);
    }
    .qh-footer__socials a:hover {
      background: rgba(255,255,255,0.1) !important;
      color: rgba(255,255,255,0.8) !important;
    }

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

    .qh-footer__brand-desc {
      color: rgba(255,255,255,0.4);
      font-size: 15px;
      line-height: 1.6;
      margin-top: 16px;
      max-width: 280px;
    }
    .qh-footer__contact-link {
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      transition: color var(--qh-duration) var(--qh-ease);
    }
    .qh-footer__contact-link:hover { color: rgba(255,255,255,0.9); }
    .qh-footer__address {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
      line-height: 1.5;
    }
    .qh-footer__badge {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 3px 8px;
      border-radius: 4px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.5);
    }
    .qh-footer__social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.4);
      transition: all 0.2s;
    }
    .qh-footer__social-link:hover {
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.8);
    }
    .qh-footer__cookie-btn {
      background: none;
      border: none;
      font-size: 14px;
      color: rgba(255,255,255,0.3);
      cursor: pointer;
      padding: 0;
      font-family: inherit;
      transition: color var(--qh-duration) var(--qh-ease);
    }
    .qh-footer__cookie-btn:hover { color: rgba(255,255,255,0.6); }
    .qh-footer__socials {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }
    /* Sticky Demo Bar */
    .qh-sticky-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 997;
      background: linear-gradient(135deg, var(--qh-dark) 0%, #0a2d8a 100%);
      padding: 10px 0;
      transform: translateY(0);
      transition: transform 0.3s var(--qh-ease);
    }
    .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 {
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      font-weight: 600;
    }
    .qh-sticky-bar__text span {
      display: block;
      font-weight: 400;
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }
    .qh-sticky-bar__actions {
      display: flex;
      align-items: center;
      gap: var(--qh-space-3);
    }
    .qh-sticky-bar__close {
      background: none;
      border: none;
      color: rgba(255,255,255,0.4);
      cursor: pointer;
      padding: 4px;
    }
    .qh-sticky-bar__close:hover { color: rgba(255,255,255,0.8); }

    .qh-footer__heading {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--qh-space-4);
    }

    .qh-footer__links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .qh-footer__link {
      font-size: 15px;
      color: rgba(255,255,255,0.4);
      transition: color var(--qh-duration) var(--qh-ease);
    }
    .qh-footer__link:hover { color: rgba(255,255,255,0.8); }

    .qh-footer__bottom {
      border-top: 1px solid rgba(255,255,255,0.06);
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

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

    .qh-footer__legal {
      display: flex;
      gap: 24px;
      list-style: none;
    }

    .qh-footer__legal a {
      font-size: 14px;
      color: rgba(255,255,255,0.3);
      transition: color var(--qh-duration) var(--qh-ease);
    }
    .qh-footer__legal a:hover { color: rgba(255,255,255,0.6); }


    /* ================================================================
       TABS — Industry solutions
       ================================================================ */
    .qh-tabs__bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .qh-tabs__tab {
      font-family: var(--qh-font-body);
      font-weight: 500;
      font-size: 15px;
      color: var(--qh-body);
      background: transparent;
      border: 1px solid var(--qh-border);
      padding: 10px 20px;
      border-radius: var(--qh-radius-full);
      cursor: pointer;
      transition: all var(--qh-duration) var(--qh-ease);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .qh-tabs__tab svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      opacity: 0.5;
      transition: opacity var(--qh-duration) var(--qh-ease);
    }
    .qh-tabs__tab:hover {
      color: var(--qh-heading);
      border-color: var(--qh-accent);
    }
    .qh-tabs__tab:hover svg { opacity: 0.8; }
    .qh-tabs__tab.is-active {
      color: var(--qh-white);
      background: var(--qh-accent);
      border-color: var(--qh-accent);
    }
    .qh-tabs__tab.is-active svg { opacity: 1; }

    /* Panels container uses grid stacking to prevent height jumps */
    .qh-tabs__panels {
      display: grid;
    }
    .qh-tabs__panel {
      grid-area: 1 / 1;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s var(--qh-ease);
    }
    .qh-tabs__panel.is-active {
      opacity: 1;
      visibility: visible;
    }

    .qh-tabs__panel-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .qh-tabs__panel-item {
      background: var(--qh-ghost);
      border: 1px solid var(--qh-border);
      border-radius: var(--qh-radius-md);
      padding: var(--qh-space-6);
      display: flex;
      flex-direction: column;
      transition: transform 0.3s var(--qh-ease),
                  box-shadow 0.3s var(--qh-ease),
                  border-color 0.3s var(--qh-ease);
    }
    .qh-tabs__panel-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--qh-shadow-md);
      border-color: transparent;
    }
    .qh-tabs__panel-item .qh-h4 { margin-bottom: var(--qh-space-3); }
    .qh-tabs__panel-item .qh-body-sm { color: var(--qh-body); flex: 1; }
    .qh-tabs__panel-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 600;
      color: var(--qh-accent);
      text-decoration: none;
      margin-top: 16px;
      transition: gap var(--qh-duration) var(--qh-ease);
    }
    .qh-tabs__panel-link:hover { gap: 8px; }
    .qh-tabs__panel-link svg { width: 14px; height: 14px; }

    @media (max-width: 768px) {
      .qh-tabs__panel-grid { grid-template-columns: 1fr; }
      .qh-tabs__bar { gap: 8px; }
      .qh-tabs__tab { font-size: 13px; padding: 8px 14px; }
    }


    /* ================================================================
       ACCORDION — FAQ
       ================================================================ */
    .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: 20px 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--qh-font-body);
      font-weight: 600;
      font-size: 17px;
      color: var(--qh-heading);
      text-align: left;
      gap: 16px;
      transition: color var(--qh-duration) var(--qh-ease);
    }
    .qh-accordion__trigger:hover { color: var(--qh-accent); }

    .qh-accordion__trigger svg {
      flex-shrink: 0;
      transition: transform var(--qh-duration-slow) var(--qh-ease);
      color: var(--qh-body);
    }
    .qh-accordion__trigger[aria-expanded="true"] svg {
      transform: rotate(180deg);
    }

    .qh-accordion__content {
      padding: 0 0 20px;
      overflow: hidden;
    }
    .qh-accordion__content .qh-body-sm {
      color: var(--qh-body);
      line-height: 1.7;
    }


    /* ================================================================
       PATTERN: EXPANDABLE CUSTOMER ROWS
       Stripe-style +/- accordion with logo, one-liner, expanded detail
       ================================================================ */
    .qh-expandable__row {
      border-bottom: 1px solid var(--qh-border);
      transition: background var(--qh-duration) var(--qh-ease);
    }
    .qh-expandable__row:first-child {
      border-top: 1px solid var(--qh-border);
    }
    .qh-expandable__row:hover {
      background: var(--qh-ghost);
    }

    .qh-expandable__summary {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px 16px 24px 0;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .qh-expandable__logo {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--qh-ghost);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--qh-font-display);
      font-weight: 800;
      font-size: 18px;
      color: var(--qh-heading);
      flex-shrink: 0;
    }

    .qh-expandable__text {
      flex: 1;
      font-family: var(--qh-font-body);
      font-size: 16px;
      color: var(--qh-heading);
      line-height: 1.5;
    }
    .qh-expandable__text strong {
      font-weight: 600;
    }

    .qh-expandable__toggle {
      width: 36px;
      height: 36px;
      margin-left: var(--qh-space-4);
      flex-shrink: 0;
      border-radius: 50%;
      border: 1.5px solid var(--qh-border);
      background: var(--qh-white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all var(--qh-duration) var(--qh-ease);
    }
    .qh-expandable__toggle svg {
      width: 16px;
      height: 16px;
      color: var(--qh-body);
      transition: transform var(--qh-duration-slow) var(--qh-ease),
                  color var(--qh-duration) var(--qh-ease);
    }
    .qh-expandable__row:hover .qh-expandable__toggle {
      border-color: var(--qh-accent);
    }
    .qh-expandable__row:hover .qh-expandable__toggle svg {
      color: var(--qh-accent);
    }
    .qh-expandable__row.is-open .qh-expandable__toggle svg {
      transform: rotate(45deg);
      color: var(--qh-accent);
    }

    .qh-expandable__detail {
      padding: 0 0 32px 64px;
    }
    .qh-expandable__quote {
      font-family: var(--qh-font-body);
      font-size: 18px;
      font-style: italic;
      color: var(--qh-body);
      line-height: 1.7;
      margin-bottom: var(--qh-space-4);
      max-width: 600px;
      position: relative;
      padding-left: 24px;
    }
    .qh-expandable__quote::before {
      content: '\201C';
      position: absolute;
      left: -4px;
      top: -12px;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 56px;
      font-style: normal;
      color: var(--qh-accent);
      opacity: 0.15;
      line-height: 1;
    }
    .qh-expandable__meta {
      display: flex;
      align-items: flex-end;
      gap: 32px;
    }
    .qh-expandable__metric {
      font-family: var(--qh-font-display);
      font-weight: 800;
      font-size: 36px;
      color: var(--qh-accent);
      line-height: 1;
    }
    .qh-expandable__metric-label {
      font-family: var(--qh-font-body);
      font-size: 14px;
      color: var(--qh-body);
      margin-top: 4px;
    }

    @media (max-width: 768px) {
      .qh-expandable__detail { padding-left: 0; }
      .qh-expandable__meta { flex-direction: column; align-items: flex-start; gap: 16px; }
    }


    /* ================================================================
       TESTIMONIALS — Named quotes with avatar, role, company
       3-column asymmetric grid, gradient left border, staggered reveal
       ================================================================ */
    .qh-testimonials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      align-items: stretch;
    }
    .qh-testimonial {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--qh-white);
      border-radius: var(--qh-radius-lg);
      padding: var(--qh-space-6);
      border: 1px solid var(--qh-border);
      border-left: 3px solid var(--qh-accent);
      box-shadow: var(--qh-shadow-sm);
      transition: transform 0.3s var(--qh-ease),
                  box-shadow 0.3s var(--qh-ease),
                  border-color 0.3s var(--qh-ease);
    }
    .qh-testimonial:hover {
      transform: translateY(-3px);
      box-shadow: var(--qh-shadow-md);
      border-left-color: var(--qh-secondary);
    }
    .qh-testimonial__quote-mark {
      position: absolute;
      top: 20px;
      right: 24px;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 72px;
      font-style: normal;
      line-height: 1;
      color: var(--qh-accent);
      opacity: 0.08;
      pointer-events: none;
      user-select: none;
    }
    .qh-testimonial__stars {
      display: flex;
      gap: 2px;
      margin-bottom: 16px;
    }
    .qh-testimonial__stars svg {
      width: 16px;
      height: 16px;
      color: #E5A835;
    }
    .qh-testimonial__text {
      font-family: var(--qh-font-body);
      font-size: 16px;
      line-height: 1.65;
      color: var(--qh-heading);
      font-style: italic;
      margin-bottom: 24px;
      flex: 1;
    }
    .qh-testimonial__divider {
      width: 40px;
      height: 1px;
      background: var(--qh-border-med);
      margin-bottom: var(--qh-space-4);
    }
    .qh-testimonial__author {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .qh-testimonial__avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 15px;
      color: var(--qh-white);
      flex-shrink: 0;
    }
    .qh-testimonial__name {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 15px;
      color: var(--qh-heading);
      line-height: 1.3;
    }
    .qh-testimonial__role {
      font-family: var(--qh-font-body);
      font-size: 13px;
      color: var(--qh-body);
      line-height: 1.3;
      margin-top: 2px;
    }

    @media (max-width: 1024px) {
      .qh-testimonials {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
      }
    }


    /* ================================================================
       PATTERN: HORIZONTAL SCROLL CAROUSEL
       Case studies / customer stories as scroll-snap cards
       ================================================================ */
    .qh-carousel {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-left: max(24px, calc((100vw - 1264px) / 2));
    }
    .qh-carousel::-webkit-scrollbar { display: none; }

    .qh-carousel__card {
      flex: 0 0 340px;
      scroll-snap-align: start;
      border-radius: var(--qh-radius-lg);
      overflow: hidden;
      transition: transform 0.3s var(--qh-ease),
                  box-shadow 0.3s var(--qh-ease);
      display: flex;
      flex-direction: column;
    }
    .qh-carousel__card:hover {
      transform: translateY(-4px);
      box-shadow: var(--qh-shadow-lg);
    }

    .qh-carousel__image {
      height: 200px;
      display: flex;
      align-items: flex-end;
      padding: 24px;
      position: relative;
      flex-shrink: 0;
    }
    .qh-carousel__image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4) 100%);
    }
    .qh-carousel__image-logo {
      position: relative;
      z-index: 1;
      font-family: var(--qh-font-display);
      font-weight: 800;
      font-size: 20px;
      color: white;
    }
    .qh-carousel__metric {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 1;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: var(--qh-radius-full);
      padding: 6px 14px;
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 13px;
      color: white;
      letter-spacing: -0.01em;
    }

    .qh-carousel__body {
      padding: 24px;
      background: var(--qh-white);
      border: 1px solid var(--qh-border);
      border-top: none;
      border-radius: 0 0 var(--qh-radius-lg) var(--qh-radius-lg);
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .qh-carousel__body p {
      font-family: var(--qh-font-body);
      font-size: 15px;
      color: #334155;
      line-height: 1.6;
      margin-bottom: 16px;
      flex: 1;
    }
    .qh-carousel__body .qh-feature-row__link {
      color: #1d4ed8;
    }

    .qh-carousel__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 40px;
    }
    .qh-carousel__nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 24px;
    }
    .qh-carousel__nav-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--qh-border-med);
      transition: color var(--qh-duration) var(--qh-ease),
                  transform var(--qh-duration) var(--qh-ease);
    }
    .qh-carousel__nav-btn:hover {
      color: var(--qh-heading);
      transform: translateX(var(--_arrow-nudge, 0));
    }
    .qh-carousel__nav-btn[data-carousel-dir="-1"] { --_arrow-nudge: -2px; }
    .qh-carousel__nav-btn[data-carousel-dir="1"] { --_arrow-nudge: 2px; }
    .qh-carousel__nav-btn svg {
      width: 22px;
      height: 22px;
    }

    @media (max-width: 768px) {
      .qh-carousel__card { flex: 0 0 280px; }
      .qh-carousel { padding: 0 20px; }
    }


    /* ================================================================
       PATTERN: PAIRED PROMO CARDS
       Two rich gradient cards side by side (demo + trial, or similar)
       ================================================================ */
    .qh-promo-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .qh-promo-card {
      border-radius: var(--qh-radius-lg);
      padding: var(--qh-space-7);
      position: relative;
      overflow: hidden;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      transition: transform 0.3s var(--qh-ease);
    }
    .qh-promo-card:hover { transform: translateY(-2px); }

    .qh-promo-card--indigo {
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    }
    .qh-promo-card--cyan {
      background: linear-gradient(135deg, #0c4a6e 0%, #0e7490 50%, #06b6d4 100%);
    }

    .qh-promo-card__deco {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      pointer-events: none;
    }
    /* Second smaller deco ring */
    .qh-promo-card__deco::after {
      content: '';
      position: absolute;
      top: 40px;
      left: 40px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .qh-promo-card__icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--qh-space-4);
      color: rgba(255,255,255,0.8);
      position: relative;
    }

    .qh-promo-card__title {
      font-family: var(--qh-font-display);
      font-weight: 700;
      font-size: 24px;
      color: white;
      margin-bottom: 8px;
      position: relative;
    }
    .qh-promo-card__desc {
      font-family: var(--qh-font-body);
      font-size: 15px;
      color: rgba(255,255,255,0.65);
      line-height: 1.6;
      margin-bottom: 24px;
      max-width: 320px;
      position: relative;
    }

    @media (max-width: 768px) {
      .qh-promo-pair { grid-template-columns: 1fr; }
    }


    /* ================================================================
       ENTRANCE ANIMATIONS
       ================================================================ */
    @keyframes qh-fade-up {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

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

    .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);
    }

    .qh-reveal-stagger > * {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s var(--qh-ease-spring),
                  transform 0.6s var(--qh-ease-spring);
    }

    .qh-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
    .qh-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
    .qh-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
    .qh-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
    .qh-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
    .qh-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }


    /* ================================================================
       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;
      }

      .qh-hero__overline,
      .qh-hero__headline,
      .qh-hero__sub,
      .qh-hero__actions,
      .qh-hero__trust,
      .qh-hero__media {
        opacity: 1;
        transform: none;
      }

      .qh-reveal {
        opacity: 1;
        transform: none;
      }

      .qh-reveal-stagger > * {
        opacity: 1;
        transform: none;
      }

      .qh-hero__mesh,
      .qh-hero__mesh::before,
      .qh-hero__mesh::after {
        animation: none !important;
      }
    }


    /* ================================================================
       RESPONSIVE BREAKPOINTS
       ================================================================ */

    /* Laptop (max 1200px) */
    @media (max-width: 1200px) {
      .qh-hero__grid {
        gap: 40px;
      }

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

    /* Tablet (max 1024px) */
    @media (max-width: 1024px) {
      .qh-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
      .qh-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
      .qh-footer__legal { flex-wrap: wrap; justify-content: center; }
      .qh-sticky-bar__text span { display: none; }
      .qh-case-study__grid { grid-template-columns: 1fr !important; }

      .qh-hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .qh-hero__copy {
        max-width: 600px;
        margin: 0 auto;
      }
      .qh-hero__actions {
        justify-content: center;
      }
      .qh-hero__trust {
        justify-content: center;
      }
      .qh-hero__media {
        max-width: 560px;
        margin: 0 auto -40px;
        transform: translateY(20px);
        animation-name: qh-fade-up;
      }
      .qh-hero__desktop {
        left: 0;
        width: 100%;
        top: 0;
      }
      .qh-hero__mobile {
        width: 150px;
        bottom: 0;
        left: -10px;
      }

      /* Shallower diagonal slice on tablet */
      .qh-hero::after {
        height: 50px;
      }

      .qh-navbar__links { display: none; }
      .qh-navbar__actions { display: none; }
      .qh-navbar__toggle { display: block; }
      .qh-mega { display: none; }

      .qh-feature-row__grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .qh-feature-row.is-reversed .qh-feature-row__grid {
        direction: ltr;
      }

      /* Tablet: gentle padding reduction (80px → 64px) */

      /* Tablet: tabs panel 2-column */
      .qh-tabs__panel-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

    /* Sanity mobile/desktop copy variants (headingMobile / bodyMobile /
       cardTitleMobile). Desktop copy hides on phones; mobile copy shows. */
    .qh-only-mobile { display: none; }
    @media (max-width: 768px) {
      .qh-hide-mobile { display: none !important; }
      .qh-only-mobile { display: inline !important; }
    }

    /* Mobile (max 768px) */
    @media (max-width: 768px) {
      :root {
        --qh-grid-gutter: 20px;
      }

      /* Industry tabs → horizontal peek carousel on phones.
         One card ~85% of the track with the next card bleeding in to
         signal swipe. Declared after the tablet 2-col rule above so it
         wins the cascade (both media queries match at phone width). */
      /* Pin the stacked-panels grid track to minmax(0,1fr) and let the
         panel shrink, otherwise the track sizes to the max-content of the
         scrolling row (all 3 cards) and 85% of that is wider than the screen. */
      .qh-tabs__panels { grid-template-columns: minmax(0, 1fr); }
      .qh-tabs__panel { min-width: 0; }
      .qh-tabs__panel-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;                 /* Firefox */
        /* Bleed the track to the screen edges, but keep the first card
           aligned to the container gutter so it lines up with the heading. */
        margin-inline: calc(-1 * var(--qh-grid-gutter));
        padding-inline: var(--qh-grid-gutter);
        scroll-padding-inline: var(--qh-grid-gutter);
      }
      .qh-tabs__panel-grid::-webkit-scrollbar { display: none; } /* Chrome/Safari */
      .qh-tabs__panel-item {
        flex: 0 0 85%;                          /* card width — controls the peek */
        scroll-snap-align: start;
      }

      .qh-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
      .qh-footer__brand-desc { max-width: 100%; }
      .qh-sticky-bar { display: none; }

      .qh-hero {
        padding: 48px 0 64px;
        min-height: auto;
      }

      /* Shallowest diagonal on mobile */
      .qh-hero::after {
        height: 32px;
      }

      .qh-hero__actions {
        flex-direction: column;
        width: 100%;
      }

      .qh-btn-primary,
      .qh-btn-secondary {
        width: 100%;
        justify-content: center;
      }

      .qh-hero__trust {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
      }

      .qh-hero__trust-sep {
        display: none;
      }

      .qh-hero__media {
        aspect-ratio: auto;
        min-height: auto;
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
      }
      .qh-hero__desktop {
        display: none;
      }
      .qh-hero__mobile {
        position: relative;
        bottom: auto;
        left: auto;
        margin: 0 auto;
        width: 220px;
        border-radius: 28px;
      }

      /* FIX 1: Stats 2x2 grid — hide separator on first item of each row */
      .qh-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 0;
      }
      .qh-stats__item:nth-child(odd)::before {
        display: none;
      }

      /* FIX 2: Reduce section padding on mobile (80px → 56px) */

      /* CTA: stack the two actions, full-width primary, link centered below */
      .qh-cta__actions {
        flex-direction: column;
        gap: 14px;
      }
      .qh-cta__actions .qh-btn-primary {
        width: 100%;
        max-width: 340px;
        justify-content: center;
      }
      .qh-cta__link { justify-content: center; }

      /* Carousel header: heading on top, nav arrows beneath (left-aligned) */
      .qh-carousel__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 28px;
      }

      .qh-features__grid {
        grid-template-columns: 1fr;
      }

      /* FIX 3: Feature card padding — tighter on mobile */
      .qh-features__card {
        padding: var(--qh-space-5);
      }

      /* FIX 4: Promo card padding — tighter on mobile */
      .qh-promo-card {
        padding: var(--qh-space-5);
        min-height: 220px;
      }

      /* FIX 5: Testimonial card padding — tighter on mobile */
      .qh-testimonial {
        padding: var(--qh-space-5);
      }
      .qh-testimonial__quote-mark {
        font-size: 56px;
        top: 14px;
        right: 18px;
      }

      /* Footer: brand full-width on top, link groups in a tidy 2-col grid
         (instead of one very long single-column stack). */
      .qh-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 24px;
      }
      .qh-footer__grid > :first-child {
        grid-column: 1 / -1;
      }

      .qh-footer__bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
    }

    /* Small mobile (max 480px) */
    @media (max-width: 480px) {
      .qh-hero__trust {
        flex-direction: column;
        gap: 12px;
      }

      .qh-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      /* FIX 6: Tabs become scrollable belt on small mobile */
      .qh-tabs__bar {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
      }
      .qh-tabs__bar::-webkit-scrollbar { display: none; }
      .qh-tabs__tab {
        flex-shrink: 0;
      }
    }

    /* ── Mobile drawer upgrades: search, icon+description Level-1 items, Popular ── */
    .qh-mobile-nav__search { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; padding: 12px 14px; border: 1px solid var(--qh-border,#e6ebf2); border-radius: 12px; background: var(--qh-ghost,#f4f6fa); }
    .qh-mobile-nav__search-ic { display: grid; place-items: center; color: var(--qh-body,#94a3b8); flex: 0 0 auto; }
    .qh-mobile-nav__search:focus-within { outline: 3px solid var(--qh-accent); outline-offset: 2px; }
    .qh-mobile-nav__search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--qh-font-body); font-size: 16px; color: var(--qh-heading,#0f172a); }
    .qh-mobile-nav__search input::placeholder { color: var(--qh-body,#94a3b8); }
    .qh-mobile-nav__body .qh-mobile-nav__link { display: flex; align-items: center; gap: 14px; }
    .qh-mobile-nav__link-ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in oklch, var(--qh-accent,#3B82F6) 9%, transparent); color: var(--qh-accent,#2563EB); }
    .qh-mobile-nav__link-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
    .qh-mobile-nav__link-title { font-size: 17px; font-weight: 700; color: var(--qh-heading,#0f172a); line-height: 1.2; }
    .qh-mobile-nav__link-sub { font-size: 13px; font-weight: 500; color: var(--qh-body,#64748b); line-height: 1.3; }
    .qh-mobile-nav__link .qh-mobile-nav__chev { flex: 0 0 auto; color: var(--qh-body,#94a3b8); }
    .qh-mobile-nav__popular { padding: 20px 0 4px; }
    .qh-mobile-nav__popular-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--qh-body,#94a3b8); margin-bottom: 11px; }
    .qh-mobile-nav__popular-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .qh-mobile-nav__popular-row a { font-size: 14px; font-weight: 600; color: var(--qh-heading,#0f172a); background: var(--qh-ghost,#f4f6fa); border: 1px solid var(--qh-border,#e6ebf2); border-radius: 999px; padding: 8px 14px; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
    .qh-mobile-nav__popular-row a:hover { border-color: var(--qh-accent,#3B82F6); color: var(--qh-accent,#2563EB); }

    /* Desktop navbar search icon (search visible on wide screens) */
    .qh-navbar__search { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--nav-text, #475569); text-decoration: none; transition: background .15s ease, color .15s ease; }
    .qh-navbar__search:hover { background: var(--nav-hover-bg, rgba(0,0,0,.05)); color: var(--nav-text-strong, #0f172a); }
    /* Mobile drawer footer (#3): primary CTA full-width, then [Log in | See Pricing] */
    .qh-mobile-nav__footer { flex-direction: column; }
    .qh-mobile-nav__footer-row { display: flex; gap: 10px; }
    .qh-mobile-nav__footer-row .qh-mobile-nav__footer-secondary { flex: 1; display: flex; align-items: center; justify-content: center; }
    /* Mega-menu item badge ("Free" / "Popular" pills) — colour set per-badge via inline style */
    .qh-mega__item-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; background: var(--qh-accent, #3B82F6); color: #fff; margin-left: 8px; vertical-align: middle; line-height: 1.4; }
    /* Mega-menu footer CTA ("Book a Demo" pill) — filled accent button */
    .qh-mega__footer-cta { font-size: 13px; font-weight: 600; color: var(--qh-white, #fff); background: var(--qh-accent, #3B82F6); padding: 8px 16px; border-radius: var(--qh-radius-full, 999px); text-decoration: none; transition: background 150ms var(--qh-ease, ease), transform 150ms var(--qh-ease, ease); }
    .qh-mega__footer-cta:hover { background: var(--qh-accent-hover, #2563EB); transform: translateY(-1px); }
  
/* Accessibility + render cost: respect reduced-motion (tames the infinite hero
   animation and any transitions for users who ask for it). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}