/*
 * PQSecure Technologies — Homepage Stylesheet
 * Scoped to #pqh for all page content.
 * Header overrides (outside #pqh) are scoped to .home / body.home.
 */

/* ═══════════════════════════════════════
   HEADER OVERRIDES — homepage only
   Targets Bizlight Pro header classes,
   scoped to body.home so internal pages
   are unaffected. Uses !important only
   where the parent also uses !important.
═══════════════════════════════════════ */

/*
 * Replace the harsh black scroll-state background (#212121 !important)
 * with brand navy. Must use !important to override parent's rule.
 */
.home .navbar-fixed-active {
  background-color: #0d0c22 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.45) !important;
}

/*
 * Logo: prevent squishing from container constraints.
 * max-height keeps it from stretching; object-fit:contain is the safety net.
 */
.home #masthead .custom-logo-link,
.home #masthead a.custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}
.home #masthead .custom-logo-link img.custom-logo,
.home #masthead a.custom-logo-link img {
  max-height: 50px !important;
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/*
 * Nav link colors on dark hero.
 * Parent already sets color:#fff on .main-navigation a — correct for
 * the dark hero. Keeping white across all states; use !important to
 * defend against any Customizer color injection.
 */
.home .main-navigation a,
.home .main-navigation a:visited {
  color: rgba(255,255,255,.88) !important;
}
.home .main-navigation li:hover > a,
.home .main-navigation li.focus > a,
.home .main-navigation li a:hover,
.home .main-navigation li a:focus {
  color: #ffffff !important;
}
.home .main-navigation ul > li.current-menu-item > a,
.home .main-navigation ul > li.current_page_item > a {
  color: #ffffff !important;
}


/* ═══════════════════════════════════════
   TOKENS & BASE
═══════════════════════════════════════ */
#pqh {
  --navy:         #1e1e3a;
  --navy-2:       #0d0c22;
  --ink:          #3b3c75;
  --violet:       #6b3dd4;
  --violet-vivid: #8050f0;
  --violet-faint: rgba(107, 61, 212, 0.07);
  --vault:        #12094a;
  --vault-2:      #0d083a;
  --verify:       #22d182;
  --paper:        #fdfcff;
  --surface:      #f0edff;
  --border:       #d8d4f0;
  --text:         #1a1a36;
  --text-mid:     #3d3d5c;
  --text-soft:    #58587a;
  --flag-red:   #b22234;
  --flag-blue:  #3c3b6e;
  --mono:  'JetBrains Mono', monospace;
  --disp:  'Space Grotesk', sans-serif;
  --body:  'Barlow', sans-serif;
  --maxw:  1180px;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);

  /*
   * !important guards body font against Bizlight Customizer injection.
   * Scoped to #pqh only — no global impact.
   */
  font-family: var(--body) !important;
  color: var(--text);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
#pqh *, #pqh *::before, #pqh *::after { box-sizing: border-box; }

/*
 * Heading colors: !important defends against Customizer-injected
 * color rules that may also use !important.
 */
/*
 * !important on font-family guards against Bizlight Customizer's H1-H6
 * font injection (confirmed to override homepage headings via Customizer).
 * Scoped to #pqh — does not affect internal pages.
 */
#pqh h1, #pqh h2, #pqh h3, #pqh h4, #pqh h5, #pqh h6 {
  font-family: var(--disp) !important;
  color: var(--navy) !important;
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
#pqh p { margin: 0; text-wrap: pretty; }
#pqh a { text-decoration: none; }

/*
 * Font guard — Customizer may inject font-family with !important on bare
 * element selectors (p, button, span, a). Direct element declarations beat
 * inherited values from #pqh { font-family: var(--body) !important }, so we
 * must declare font-family explicitly on every element type used in the template.
 * All rules scoped to #pqh — zero impact on internal pages.
 */
#pqh p,
#pqh li,
#pqh button,
#pqh input,
#pqh select,
#pqh textarea {
  font-family: var(--body) !important;
}
/* Span register splits: body font for content spans, display for label spans */
#pqh .cred-item,
#pqh .vi-desc,
#pqh .ndate    { font-family: var(--body) !important; }
/* Label-register spans use display font per design system */
#pqh .val-cat,
#pqh .vi-cat,
#pqh .recog-label { font-family: var(--disp) !important; }
/* Bare provenance spans inside .usa-meta carry the mono/citation register */
#pqh .usa-meta span { font-family: var(--mono) !important; }

#pqh a:focus-visible,
#pqh button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
/* Dark zone overrides: violet outline is only ~3:1 on void-navy; use white instead */
#pqh .creds-strip a:focus-visible,
#pqh .usa-strip a:focus-visible,
#pqh .hero a:focus-visible,
#pqh .cta-section a:focus-visible,
#pqh .sect-validation a:focus-visible,
#pqh .recog-strip a:focus-visible {
  outline-color: rgba(255,255,255,.85);
}

#pqh .wrap  { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
#pqh .bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
#pqh .btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--disp) !important; font-weight: 600; font-size: 14px;
  padding: 15px 28px; border-radius: 4px; border: none;
  transition: all .2s var(--ease); cursor: pointer; letter-spacing: .1px;
}
#pqh .btn-solid {
  background: var(--violet); color: #fff !important;
  box-shadow: 0 2px 10px rgba(107, 61, 212, .28);
}
#pqh .btn-solid:hover {
  background: var(--ink); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(58, 44, 114, .36);
}
#pqh .btn-line {
  border: 1.5px solid var(--border); color: var(--text) !important; background: transparent;
}
#pqh .btn-line:hover {
  border-color: var(--violet); color: var(--violet) !important;
}

/* ═══════════════════════════════════════
   HERO — dark field + white content card
═══════════════════════════════════════ */
#pqh .hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /*
   * Five background layers (front to back):
   * 1 & 2. Hex lattice (two offset copies for proper hex tiling) —
   *         PQC lattice motif, visible at 15% opacity.
   * 3. Violet bloom — lower-left compositional anchor.
   * 4. Indigo bloom — upper-right counterpoint, creates diagonal tension.
   * 5. Dark navy-to-near-black base gradient.
   */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92'%3E%3Cpath fill='none' stroke='%236b3dd4' stroke-width='0.8' stroke-opacity='0.22' d='M40 0L80 23L80 69L40 92L0 69L0 23Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92'%3E%3Cpath fill='none' stroke='%236b3dd4' stroke-width='0.8' stroke-opacity='0.22' d='M40 0L80 23L80 69L40 92L0 69L0 23Z'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 70% at 11% 96%, rgba(107, 61, 212, .44) 0%, transparent 58%),
    radial-gradient(ellipse 45% 55% at 88% 4%, rgba(48, 40, 135, .34) 0%, transparent 54%),
    linear-gradient(148deg, #1e1a3c 0%, #121028 44%, #080818 100%);
  background-size: 80px 92px, 80px 92px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 40px 46px, 0 0, 0 0, 0 0;
  background-color: #080818;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

/* Stretch wrap to fill the flex-column hero */
#pqh .hero > .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/*
 * Hero inner: padding-top 92px clears the absolutely-positioned
 * Bizlight header (~80px) plus ~12px breathing room.
 */
#pqh .hero-inner {
  flex: 1;
  padding: 92px 0 80px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Direct-on-field layout — content inhabits the atmospheric dark field.
 * No card container. Typography + flag-tag are the structure. */
#pqh .hero-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 580px;
  width: 100%;
  flex-shrink: 0;
  box-shadow: none;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Credential register — structural column divider + typographic credential readout */
#pqh .hero-divider {
  width: 1px; flex-shrink: 0;
  background: rgba(255,255,255,.10);
  align-self: stretch;
  margin: 40px 72px;
}
#pqh .hero-cred {
  align-self: center;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 340px; min-width: 240px; flex-shrink: 0;
}
#pqh .hm-field { display: flex; flex-direction: column; gap: 5px; }
#pqh .hm-label {
  font-family: var(--mono) !important; font-size: 9px; font-weight: 500;
  color: rgba(255,255,255,.40);
  letter-spacing: 0.12em; text-transform: uppercase; display: block;
}
#pqh .hm-val {
  font-family: var(--mono) !important; font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,.70); display: block;
}
#pqh .hm-field.hm-primary .hm-label { color: rgba(255,255,255,.55); }
#pqh .hm-field.hm-primary .hm-val { color: var(--verify); font-size: 13px; font-weight: 500; }

/* American-engineered stamp — credential badge in verify-green register */
#pqh .flag-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--disp) !important; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.82);
  margin-bottom: 26px; align-self: flex-start;
  padding: 6px 14px 6px 9px;
  border: 1px solid rgba(34, 209, 130, .28); border-radius: 4px;
  background: rgba(34, 209, 130, .04);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hero headline */
#pqh .hero-card h1 {
  font-size: clamp(40px, 5.8vw, 80px);
  letter-spacing: -0.035em; margin-bottom: 22px;
  line-height: 1.02; color: #ffffff !important;
}
#pqh .hero-card h1 em { font-style: normal; color: var(--violet-vivid); }

/* Lede */
#pqh .hero-lede {
  font-size: 18px; font-weight: 300; color: rgba(255,255,255,.72);
  max-width: 460px; margin-bottom: 36px; line-height: 1.75;
}

/* CTA row */
#pqh .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* btn-line in dark hero zone — override for direct-on-field layout */
#pqh .hero-card .btn-line {
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.85) !important;
}
#pqh .hero-card .btn-line:hover {
  border-color: var(--verify);
  color: var(--verify) !important;
}

/* ═══════════════════════════════════════
   CREDS STRIP — trust tier directly below hero
   Part of the dark zone (hero → creds → USA strip).
═══════════════════════════════════════ */
#pqh .creds-strip {
  background: var(--navy-2);
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
#pqh .creds-strip .wrap {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  padding-top: 18px; padding-bottom: 18px;
}
#pqh .cred-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.65);
  padding: 4px 28px;
  border-right: 1px solid rgba(255,255,255,.1);
}
#pqh .cred-item:last-child { border-right: none; }
#pqh .cred-item svg { flex-shrink: 0; color: rgba(255,255,255,.45); }
#pqh .cred-item a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
#pqh .cred-item a:hover { color: #ffffff; border-bottom-color: rgba(255,255,255,.65); }

/* ═══════════════════════════════════════
   USA STRIP — dark beat #2
   Hairline separates it from creds strip above.
═══════════════════════════════════════ */
#pqh .usa-strip {
  background: var(--navy-2);
  border-top: 1px solid rgba(255,255,255,.07);
}
#pqh .usa-strip .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 28px; padding-bottom: 28px; flex-wrap: wrap;
}
#pqh .usa-claim {
  font-family: var(--disp) !important; font-size: 18px; font-weight: 700; color: #ffffff;
  display: flex; align-items: center; gap: 12px;
}
#pqh .usa-meta {
  font-family: var(--mono) !important; font-size: 11px;
  color: rgba(255,255,255,.62);
  display: flex; gap: 22px; flex-wrap: wrap;
}

/* ═══════════════════════════════════════
   SECTIONS BASE
═══════════════════════════════════════ */
#pqh .sect            { padding: 104px 0; }
#pqh .sect-surface    { background: var(--surface); }
#pqh .sect-validation { padding: 84px 0; background: var(--vault); }
#pqh .sect-markets    { padding: 76px 0; background: var(--paper); }
#pqh .sect-news       { padding: 92px 0; background: var(--surface); }

#pqh .sect-head { max-width: 640px; margin-bottom: 48px; }
#pqh .sect-head h2 {
  font-size: clamp(32px, 4.5vw, 66px);
  letter-spacing: -0.032em; margin-bottom: 16px;
}
#pqh .sect-head p { color: var(--text-mid); font-size: 16px; line-height: 1.7; }
#pqh .sect-head-row {
  max-width: none; display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px;
}
#pqh .news-all-link {
  font-family: var(--disp) !important; font-size: 13px; font-weight: 500;
  color: var(--text-mid); text-decoration: none; white-space: nowrap; flex-shrink: 0;
  border-bottom: 1px solid var(--border); padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
#pqh .news-all-link:hover { color: var(--violet); border-bottom-color: var(--violet); }

/* ═══════════════════════════════════════
   PRODUCTS — Technology Manifest
   Typographic list replaces identical card grid.
   Each row: [category · name · cta] with thin rules.
═══════════════════════════════════════ */
#pqh .sect-products { background: var(--paper); }

#pqh .prod-manifest {
  border-top: 1px solid var(--border);
}
#pqh .prod-row {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  align-items: start;
  gap: 0 44px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background .2s var(--ease);
}
#pqh .prod-row:hover { background: var(--violet-faint); }
#pqh .prod-row-cat {
  font-family: var(--mono) !important; font-size: 10px; font-weight: 500;
  color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.08em;
  padding-top: 9px;
}
#pqh .prod-row-body h3 {
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 8px; line-height: 1.1;
}
#pqh .prod-row-body p {
  font-size: 14px; color: var(--text-mid); line-height: 1.6;
  max-width: 540px; margin: 0;
}
#pqh .prod-row-go {
  font-family: var(--disp) !important; font-size: 13px; font-weight: 600;
  color: var(--violet); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: gap .18s var(--ease);
}
#pqh .prod-row:hover .prod-row-go { gap: 10px; }

/* TRUST — flagship row: apex of the technology stack */
#pqh .prod-row-flagship {
  background: var(--surface);
}
#pqh .prod-row-flagship .prod-row-cat {
  color: var(--violet);
}
#pqh .prod-row-flagship .prod-row-body h3 {
  font-size: clamp(24px, 3.4vw, 52px);
}
#pqh .prod-row-flagship:hover {
  background: rgba(107, 61, 212, .09);
}

/* All products tail link */
#pqh .prod-row-all {
  padding: 20px 0 0;
  display: flex; justify-content: flex-end;
}
#pqh .prod-row-all a {
  font-family: var(--disp) !important; font-size: 13px; font-weight: 500;
  color: var(--text-mid); text-decoration: none;
  border-bottom: 1px solid var(--border); padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
#pqh .prod-row-all a:hover { color: var(--violet); border-bottom-color: var(--violet); }

/* ═══════════════════════════════════════
   VALIDATION
═══════════════════════════════════════ */
/* Vault zone — all validation text is light-on-dark */
#pqh .sect-validation .sect-head h2 { color: #ffffff !important; }
#pqh .sect-validation .sect-head p  { color: rgba(255,255,255,.65); }

#pqh .val-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
}
/* CAVP primary card: glassy white surface, verify-green border */
#pqh .val-primary {
  background: rgba(255,255,255,.06); border: 2px solid var(--verify);
  border-radius: 8px; padding: 36px 32px;
}
#pqh .val-cat {
  font-size: 11px; font-weight: 600; color: var(--verify);
  margin-bottom: 8px; display: block;
}
#pqh .val-name {
  font-family: var(--disp) !important; font-size: 38px; font-weight: 700;
  color: #ffffff !important;
  display: block; margin-bottom: 12px; letter-spacing: -0.025em;
}
#pqh .val-desc {
  font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.65; margin-bottom: 20px;
}
#pqh .val-link {
  font-family: var(--mono) !important; font-size: 12px; font-weight: 500;
  color: var(--verify) !important;
  border-bottom: 1px solid rgba(34, 209, 130, .35); padding-bottom: 1px;
  display: inline;
}
#pqh .val-link:hover { color: #ffffff !important; border-color: rgba(255,255,255,.5); }

#pqh .val-list { display: flex; flex-direction: column; }
#pqh .val-item { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
#pqh .val-item:first-child { padding-top: 0; }
#pqh .val-item:last-child  { border-bottom: none; padding-bottom: 0; }
#pqh .val-item .vi-cat {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.48);
  margin-bottom: 4px; display: block;
}
#pqh .val-item .vi-name {
  font-family: var(--disp) !important; font-size: 21px; font-weight: 700;
  color: #ffffff !important;
  display: block; margin-bottom: 6px; letter-spacing: -0.015em;
}
#pqh .val-item .vi-desc {
  font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.6; display: block;
}

/* ═══════════════════════════════════════
   RECOGNITION STRIP
═══════════════════════════════════════ */
/* Credential vault zone continues through recognition strip */
#pqh .recog-strip {
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--vault-2);
}
#pqh .recog-strip .wrap {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
#pqh .recog-label {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55);
  flex-shrink: 0; white-space: nowrap;
}
#pqh .recog-row {
  display: flex; flex-wrap: wrap; align-items: center;
}
#pqh .recog-row span {
  font-family: var(--disp) !important; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.75);
  padding: 0 16px; border-right: 1px solid rgba(255,255,255,.1);
  line-height: 1;
}
#pqh .recog-row span:last-child { border-right: none; }
#pqh .recog-row span a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
#pqh .recog-row span a:hover { color: var(--verify); border-bottom-color: var(--verify); }

/* ═══════════════════════════════════════
   MARKETS
═══════════════════════════════════════ */
#pqh .mk-asym {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
}
#pqh .mk-primary {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
#pqh .mk-primary:hover { background: rgba(107, 61, 212, .09); border-color: rgba(107, 61, 212, .24); }
#pqh .mk-primary .mk-ico { color: var(--violet-vivid); }
#pqh .mk-primary .mk-name {
  font-family: var(--disp) !important; font-size: 20px; font-weight: 700;
  color: var(--text); letter-spacing: -0.02em; display: block;
}
#pqh .mk-primary .mk-detail {
  font-size: 14px; color: var(--text-mid); line-height: 1.7; flex-grow: 1;
}
#pqh .mk-primary .go {
  font-family: var(--disp) !important; font-size: 12px; font-weight: 600;
  color: var(--violet); display: inline-flex; align-items: center; gap: 5px;
  transition: gap .18s var(--ease);
}
#pqh .mk-primary:hover .go { gap: 8px; }
#pqh .mk-secondary { border-top: 1px solid var(--border); display: flex; flex-direction: column; }
#pqh .mk-row {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .2s var(--ease);
  flex: 1;
}
#pqh .mk-row:last-child { border-bottom: none; }
#pqh .mk-row:hover { background: var(--violet-faint); }
#pqh .mk-row .mk-ico { color: var(--violet); flex-shrink: 0; }
#pqh .mk-row .mk-name {
  font-family: var(--disp) !important; font-size: 15px; font-weight: 600;
  color: var(--text); flex-grow: 1; display: block;
}
#pqh .mk-arr {
  color: var(--text-soft); flex-shrink: 0;
  transition: transform .18s var(--ease);
}
#pqh .mk-row:hover .mk-arr { transform: translateX(3px); }

/* ═══════════════════════════════════════
   NEWS
═══════════════════════════════════════ */
/* Featured-article + supporting layout */
#pqh .news-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px; margin-bottom: 36px;
}
#pqh .nfeat {
  background: var(--paper); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .25s var(--ease);
  position: relative;
}
#pqh .nfeat:hover { border-color: var(--violet); }
#pqh .nfeat-img { overflow: hidden; aspect-ratio: 16/9; background: var(--surface); flex-shrink: 0; }
#pqh .nfeat-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
#pqh .nfeat:hover .nfeat-img img { transform: scale(1.03); }
#pqh .nfeat-body { padding: 24px 28px 28px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
#pqh .nfeat-body h3 {
  font-size: clamp(16px, 1.8vw, 22px); font-weight: 600;
  line-height: 1.35; letter-spacing: -0.018em; margin: 0; flex: 1;
}
#pqh .nfeat-body h3 a { color: var(--navy) !important; }
#pqh .nfeat-body h3 a:hover { color: var(--violet) !important; }
#pqh .nfeat-body h3 a::after { content: ''; position: absolute; inset: 0; }
/* Supporting column */
#pqh .nsup-list { display: flex; flex-direction: column; gap: 16px; }
#pqh .nsub {
  background: var(--paper); border: 1px solid var(--border); border-radius: 8px;
  display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  flex: 1; transition: border-color .25s var(--ease);
  position: relative; overflow: hidden;
}
#pqh .nsub:hover { border-color: var(--violet); }
#pqh .nsub-img {
  width: 80px; flex-shrink: 0; border-radius: 4px; overflow: hidden;
  aspect-ratio: 1; background: var(--surface);
}
#pqh .nsub-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#pqh .nsub .nbody { display: flex; flex-direction: column; gap: 6px; flex: 1; }
#pqh .nsub h4 {
  font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; margin: 0;
}
#pqh .nsub h4 a { color: var(--navy) !important; }
#pqh .nsub h4 a:hover { color: var(--violet) !important; }
#pqh .nsub h4 a::after { content: ''; position: absolute; inset: 0; }
#pqh .nsub .nexcerpt {
  font-size: 13px; line-height: 1.55; color: var(--text-mid); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#pqh .ndate { font-size: 12px; color: var(--text-soft); display: block; }
#pqh .nfeat-fallback .nfeat-body { min-height: 180px; justify-content: center; }

/* ═══════════════════════════════════════
   CTA — dark beat #2
═══════════════════════════════════════ */
#pqh .cta-section {
  background:
    radial-gradient(ellipse 72% 58% at 50% -8%, rgba(107, 61, 212, .22) 0%, transparent 62%),
    var(--navy-2);
  padding: 120px 0; text-align: center;
  position: relative; overflow: hidden;
}
#pqh .cta-section > .wrap { position: relative; z-index: 1; }
#pqh .cta-flag { margin-bottom: 20px; }

/* !important overrides the global heading color rule for this dark section */
#pqh .cta-section h2 {
  font-size: clamp(36px, 5.5vw, 82px); letter-spacing: -0.035em;
  margin-bottom: 20px; color: #ffffff !important;
}
#pqh .cta-section p {
  color: rgba(255,255,255,.7); font-size: 17px;
  max-width: 490px; margin: 0 auto 36px;
}
#pqh .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#pqh .cta-section .btn-solid {
  background: #fff; color: var(--navy) !important;
}
#pqh .cta-section .btn-solid:hover {
  background: var(--surface); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
#pqh .cta-section .btn-line {
  border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.88) !important;
}
#pqh .cta-section .btn-line:hover {
  border-color: rgba(255,255,255,.8); color: #fff !important;
}

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes pq-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pq-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  #pqh .flag-tag        { animation: pq-up .55s var(--ease) .10s both; }
  #pqh .hero-card h1    { animation: pq-up .55s var(--ease) .20s both; }
  #pqh .hero-lede       { animation: pq-up .55s var(--ease) .30s both; }
  #pqh .hero-ctas       { animation: pq-up .55s var(--ease) .38s both; }
  #pqh .creds-strip     { animation: pq-in  .5s  var(--ease) .50s both; }
  #pqh .hero-meta       { animation: pq-in  .6s  var(--ease) .60s both; }
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 980px) {
  #pqh .prod-row    { grid-template-columns: 120px 1fr; gap: 0 28px; }
  #pqh .prod-row-go { grid-column: 2; margin-top: 6px; }
  #pqh .val-layout  { grid-template-columns: 1fr; }
  #pqh .mk-asym     { grid-template-columns: 1fr; gap: 24px 0; }
  #pqh .mk-secondary { border-top: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  #pqh .news-layout { grid-template-columns: 1fr; }
  #pqh .nsup-list   { flex-direction: row; }
  #pqh .nsub .nexcerpt { display: none; }
}

@media (max-width: 860px) {
  #pqh .hero-inner   { flex-wrap: wrap; }
  #pqh .hero-card    { flex: 0 0 100%; max-width: none; }
  #pqh .hero-divider { display: none; }
  #pqh .hero-cred {
    flex: 0 0 100%; max-width: none;
    flex-direction: row; flex-wrap: wrap;
    gap: 6px 24px; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10);
  }
  #pqh .hm-field { flex-direction: row; align-items: baseline; gap: 8px; }
}

/*
 * At 767px Bizlight Pro switches .site-header to position:static,
 * so the hero no longer needs large padding-top to clear the overlay header.
 */
@media (max-width: 767px) {
  #pqh .hero-inner  { padding-top: 40px; }
}

@media (max-width: 640px) {
  #pqh .wrap            { padding: 0 20px; }
  #pqh .sect            { padding: 68px 0; }
  #pqh .sect-validation { padding: 64px 0; }
  #pqh .sect-markets    { padding: 60px 0; }
  #pqh .sect-news       { padding: 68px 0; }
  #pqh .cta-section     { padding: 80px 0; }
  #pqh .hero-inner      { padding: 32px 0 52px; }
  #pqh .hero-card       { padding: 0; }
  #pqh .hero-card h1    { font-size: 38px; letter-spacing: -0.028em; }
  #pqh .hero-cred       { display: none; }
  #pqh .prod-row    { grid-template-columns: 1fr; gap: 6px; padding: 28px 0; }
  #pqh .prod-row-cat  { padding-top: 0; }
  #pqh .prod-row-go { grid-column: auto; margin-top: 4px; }
  #pqh .nsup-list   { flex-direction: column; }
  #pqh .nsub        { flex-direction: row; }
  #pqh .mk-secondary    { grid-template-columns: 1fr; }
  #pqh .creds-strip .wrap { justify-content: flex-start; }
  #pqh .cred-item       { padding: 6px 16px; font-size: 11px; }
  #pqh .usa-strip .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  #pqh .usa-meta        { gap: 14px; }
  #pqh .hero-ctas .btn,
  #pqh .cta-row .btn    { width: 100%; justify-content: center; }
  #pqh .recog-strip .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  #pqh .recog-row       { flex-direction: column; align-items: flex-start; gap: 10px; }
  #pqh .recog-row span  { border-right: none; padding: 4px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pq-hero-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  #pqh .hero-card    { animation: pq-hero-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
  #pqh .hero-divider { animation: pq-hero-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both; }
  #pqh .hero-cred    { animation: pq-hero-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
}
@media (prefers-reduced-motion: reduce) {
  #pqh * { transition: none !important; animation: none !important; }
}