/* QC Devworks — visual polish patch v1
   Load AFTER fresh-site-*.css. Additive only; no markup changes required.
   Companion JS: assets/js/qcdw-polish-v1.js (required for header light state + img fade) */

:root {
  --qf-chip-bg:      rgba(154, 184, 239, .14);
  --qf-chip-bd:      rgba(154, 184, 239, .38);
  --qf-chip-bg-hi:   rgba(39, 103, 255, .20);
  --qf-chip-bd-hi:   rgba(154, 184, 239, .58);
  --qf-hairline-d:   rgba(255, 255, 255, .10);
  --qf-hairline-l:   rgba(7, 17, 31, .10);
  --qf-header-light: rgba(244, 247, 251, .88);
}

/* 1. HEADER — state aware over light sections */
.qf-header.is-stuck {
  box-shadow: none;
  border-bottom: 1px solid var(--qf-hairline-d);
}
.qf-header.is-stuck.is-over-light {
  background: var(--qf-header-light);
  border-bottom-color: var(--qf-hairline-l);
  color: var(--qf-ink);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  backdrop-filter: blur(22px) saturate(118%);
}
.qf-header.is-over-light .qf-nav a,
.qf-header.is-over-light .qf-brand__word,
.qf-header.is-over-light .qf-brand__typed,
.qf-header.is-over-light .qf-brand__dev,
.qf-header.is-over-light .qf-brand__cycle { color: var(--qf-ink); }
.qf-header.is-over-light .qf-brand__syntax { color: var(--qf-blue); }
.qf-header.is-over-light .qf-brand__caret  { background: var(--qf-blue); }
.qf-header.is-over-light .qf-nav a:hover,
.qf-header.is-over-light .qf-nav a:focus-visible { color: var(--qf-blue); }
.qf-header,
.qf-header .qf-nav a,
.qf-header .qf-brand__word {
  transition: background .28s var(--qf-ease), color .28s var(--qf-ease),
              border-color .28s var(--qf-ease), height .3s ease;
}

/* 2. HERO — exposure, crop, edge tie-in */
.qf-hero__media img { filter: saturate(1.02) contrast(1.06) brightness(1.16); }
@media (min-width: 1101px) {
  .qf-hero__media img { object-position: 64% center; }
}
.qf-hero__media::after {
  background:
    linear-gradient(90deg, var(--qf-ink) 0%, rgba(7,17,31,.88) 13%, rgba(7,17,31,.30) 36%, rgba(7,17,31,0) 58%),
    linear-gradient(180deg, rgba(7,17,31,.40) 0%, rgba(7,17,31,0) 18%, rgba(7,17,31,0) 66%, rgba(7,17,31,.88) 100%);
}
.qf-hero__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 38%, rgba(39,103,255,.16), transparent 62%);
  pointer-events: none;
}
@media (max-width: 1100px) {
  .qf-hero__media::after {
    background:
      linear-gradient(180deg, var(--qf-ink) 0%, rgba(7,17,31,.30) 22%, rgba(7,17,31,0) 45%),
      linear-gradient(180deg, transparent 70%, var(--qf-ink) 100%);
  }
}

/* 3. MEDIA LOADING */
.qf-hero__media,
.qf-product-frame,
.qf-intellisee__media { background-color: #0b1524; }
.qf-studio figure,
.qf-related figure { background-color: #dfe6ee; }
.qf-jsfade img[loading="lazy"] { opacity: 0; transition: opacity .55s var(--qf-ease); }
.qf-jsfade img[loading="lazy"].qf-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .qf-jsfade img[loading="lazy"] { opacity: 1; transition: none; }
}

/* 4. CHIPS + CARDS on dark */
.qf-agent-grid article > span,
.qf-process__steps li > span,
.qf-intellisee__capability-grid article > span {
  background: var(--qf-chip-bg);
  border-color: var(--qf-chip-bd);
}
.qf-agent-grid article:hover > span,
.qf-intellisee__capability-grid article:hover > span {
  background: var(--qf-chip-bg-hi);
  border-color: var(--qf-chip-bd-hi);
}
.qf-agent-grid article,
.qf-process__steps li {
  border-color: rgba(255, 255, 255, .17);
  transition: border-color .25s ease, background .25s ease, transform .35s var(--qf-ease);
}
.qf-agent-grid article:hover,
.qf-process__steps li:hover {
  border-color: rgba(154, 184, 239, .42);
  background: rgba(255, 255, 255, .055);
  transform: translateY(-3px);
}

/* 5. CAPABILITY ROWS — one affordance per row */
.qf-capability-list li { position: relative; transition: background .22s ease; }
.qf-capability-list li::after {
  content: "";
  position: absolute;
  inset: -6px -18px;
  z-index: 0;
  border-radius: var(--qf-radius-md);
  background: transparent;
  transition: background .22s ease;
  pointer-events: none;
}
.qf-capability-list li:hover::after { background: rgba(39, 103, 255, .045); }
.qf-capability-list li > * { position: relative; z-index: 1; }
.qf-capability-list li:hover a,
.qf-capability-list li:focus-within a { color: #0a55f1; }
.qf-capability-list li a .qf-arrow { transition: transform .25s var(--qf-ease); }
.qf-capability-list li:hover a .qf-arrow { transform: translateX(3px); }

/* 6. GRID BALANCE */
@media (min-width: 1101px) {
  .qf-problem__grid { align-items: center; }
  .qf-intellisee__engineering { align-items: start; }
}

/* 7. SECTION TRANSITIONS */
.qf-section.qf-dark { position: relative; }
.qf-section.qf-dark::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 140px;
  background: linear-gradient(180deg, rgba(237, 242, 247, .07), transparent);
  pointer-events: none;
}
.qf-section.qf-dark > * { position: relative; z-index: 1; }
.qf-section:not(.qf-dark) + .qf-section.qf-dark,
.qf-section.qf-dark + .qf-section:not(.qf-dark) {
  border-top: 1px solid rgba(39, 103, 255, .16);
}

/* 8. PROCESS TIMELINE */
.qf-process__steps li > i {
  box-shadow: 0 0 0 5px rgba(39, 103, 255, .22), 0 10px 22px rgba(39, 103, 255, .28);
}
.qf-process__steps li::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 8%;
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, rgba(39, 103, 255, .55), rgba(39, 103, 255, 0));
}

/* 9. CONSENT PILL */
.qcdw-cookie-fab {
  opacity: .42;
  transform: scale(.92);
  transform-origin: left bottom;
  transition: opacity .2s ease, transform .2s ease;
}
.qcdw-cookie-fab:hover,
.qcdw-cookie-fab:focus-visible { opacity: 1; transform: scale(1); }

/* 10. FOCUS VISIBILITY */
.qf-document a:focus-visible,
.qf-document button:focus-visible {
  outline: 2px solid var(--qf-blue);
  outline-offset: 3px;
  border-radius: var(--qf-radius-sm);
}
.qf-dark a:focus-visible,
.qf-dark button:focus-visible,
.qf-footer a:focus-visible { outline-color: var(--qf-cyan); }