/* ══════════════════════════════════════════════════════════════
   QUICKFIT ADAPTER  ·  quickfit-adapt.css
   Themes the LEGACY product-page component families
   (.tf- .ex- .hs- .cp- .pp- .cl-) into the QuickFit
   alternating light/dark rhythm — WITHOUT rewriting markup.

   USAGE
     <link rel="stylesheet" href="css/quickfit-adapt.css">   (load LAST)
   Then add ONE band class to each content <section>:
     qfb-light   white
     qfb-alt     #f8f9fa   (second light in a row)
     qfb-dark    blue gradient, dark -> light
     qfb-dark f  blue gradient, light -> dark   (class: "qfb-dark qfb-flip")
     qfb-deep    near-black + cyan glow (closers / CTA)

   Never place two of the same band back to back.
   ══════════════════════════════════════════════════════════════ */

:root {
  --qf-primary:    #00aeef;
  --qf-primary-dk: #0088cc;
  --qf-ink:        #2c3e50;   /* headings on light */
  --qf-ink-soft:   #5a6673;   /* body on light     */
  --qf-accent-lt:  #0093c9;   /* accent ON WHITE — #00aeef fails contrast at body size */
  --qf-line-lt:    #e2e9f0;
  --qf-surface-lt: #f8f9fa;
}

/* ══════════ BANDS ══════════ */
.qfb-light, .qfb-alt, .qfb-dark, .qfb-deep { position: relative; }

.qfb-light { background: #ffffff !important; }
.qfb-alt   { background: var(--qf-surface-lt) !important; }

.qfb-dark {
  background: linear-gradient(to bottom,
    #000428 0%, #001838 15%, #002850 32%,
    #004e92 52%, #0066a8 72%, #0088cc 88%, #00aeef 100%) !important;
}
.qfb-dark.qfb-flip {
  background: linear-gradient(to bottom,
    #00aeef 0%, #0088cc 14%, #0066a8 30%,
    #004e92 50%, #002850 70%, #001838 86%, #000428 100%) !important;
}
.qfb-deep {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(0,174,239,0.22) 0%, transparent 60%),
    linear-gradient(160deg, #000428 0%, #001c3a 50%, #000a1c 100%) !important;
}
/* hairline transition between themes */
.qfb-edge-top { border-top: 1px solid rgba(0,174,239,0.22) !important; }
.qfb-edge-bot { border-bottom: 1px solid rgba(0,174,239,0.22) !important; }

/* ══════════ LIGHT BANDS — text ══════════ */
.qfb-light, .qfb-alt { color: var(--qf-ink); }

.qfb-light h2, .qfb-alt h2,
.qfb-light h3, .qfb-alt h3,
.qfb-light h4, .qfb-alt h4,
.qfb-light .tf-section-header h2, .qfb-alt .tf-section-header h2,
.qfb-light .ex-h2, .qfb-alt .ex-h2,
.qfb-light .hs-h2, .qfb-alt .hs-h2,
.qfb-light .cp-h2, .qfb-alt .cp-h2 { color: var(--qf-ink) !important; }

.qfb-light p,  .qfb-alt p,
.qfb-light li, .qfb-alt li,
.qfb-light .ex-lead, .qfb-alt .ex-lead,
.qfb-light .hs-lead, .qfb-alt .hs-lead,
.qfb-light .cp-lead, .qfb-alt .cp-lead,
.qfb-light .tf-section-header p, .qfb-alt .tf-section-header p { color: var(--qf-ink-soft) !important; }

.qfb-light strong, .qfb-alt strong,
.qfb-light b, .qfb-alt b { color: var(--qf-ink) !important; }

/* accents / eyebrows on light */
.qfb-light .ex-eyebrow, .qfb-alt .ex-eyebrow,
.qfb-light .hs-eyebrow, .qfb-alt .hs-eyebrow,
.qfb-light .cp-eye,     .qfb-alt .cp-eye,
.qfb-light .pp-kicker,  .qfb-alt .pp-kicker,
.qfb-light .tf-badge,   .qfb-alt .tf-badge,
.qfb-light .cl-eyebrow, .qfb-alt .cl-eyebrow { color: var(--qf-accent-lt) !important; }

/* gradient-filled spans inside headings need a darker ramp on white */
.qfb-light h2 span, .qfb-alt h2 span,
.qfb-light .ex-h2 span, .qfb-alt .ex-h2 span,
.qfb-light .hs-h2 span, .qfb-alt .hs-h2 span,
.qfb-light .cp-h2 span, .qfb-alt .cp-h2 span {
  background: linear-gradient(135deg, var(--qf-accent-lt), var(--qf-primary)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* cards / tiles / panels on light */
.qfb-light .ex-tile,  .qfb-alt .ex-tile,
.qfb-light .hs-tile,  .qfb-alt .hs-tile,
.qfb-light .hs-card,  .qfb-alt .hs-card,
.qfb-light .cp-card,  .qfb-alt .cp-card,
.qfb-light .pp-type-card, .qfb-alt .pp-type-card,
.qfb-light .pp-step,  .qfb-alt .pp-step,
.qfb-light .ex-statcell, .qfb-alt .ex-statcell,
.qfb-light .pp-stat,  .qfb-alt .pp-stat {
  background: #ffffff !important;
  border-color: var(--qf-line-lt) !important;
  box-shadow: 0 6px 20px rgba(13,21,32,.06) !important;
  color: var(--qf-ink) !important;
}
.qfb-light .ex-tile:hover, .qfb-alt .ex-tile:hover,
.qfb-light .hs-tile:hover, .qfb-alt .hs-tile:hover,
.qfb-light .cp-card:hover, .qfb-alt .cp-card:hover,
.qfb-light .pp-type-card:hover, .qfb-alt .pp-type-card:hover {
  border-color: rgba(0,174,239,.5) !important;
  box-shadow: 0 16px 38px rgba(13,21,32,.12) !important;
}
.qfb-light .ex-tile i, .qfb-alt .ex-tile i,
.qfb-light .hs-ico i,  .qfb-alt .hs-ico i,
.qfb-light .pp-type-icon i, .qfb-alt .pp-type-icon i,
.qfb-light .cp-card i, .qfb-alt .cp-card i { color: var(--qf-accent-lt) !important; }
.qfb-light .hs-ico, .qfb-alt .hs-ico,
.qfb-light .pp-type-icon, .qfb-alt .pp-type-icon {
  background: rgba(0,174,239,.10) !important;
  border-color: rgba(0,174,239,.32) !important;
}
.qfb-light .pp-step-num, .qfb-alt .pp-step-num,
.qfb-light .hs-num, .qfb-alt .hs-num {
  background: linear-gradient(135deg, var(--qf-primary), var(--qf-primary-dk)) !important;
  color: #fff !important;
}
/* stat numerals stay brand cyan-dark on light */
.qfb-light .ex-statcell strong, .qfb-alt .ex-statcell strong,
.qfb-light .pp-stat strong, .qfb-alt .pp-stat strong { color: var(--qf-accent-lt) !important; }
.qfb-light .ex-statcell span, .qfb-alt .ex-statcell span,
.qfb-light .pp-stat span, .qfb-alt .pp-stat span { color: var(--qf-ink-soft) !important; }

/* chips / size pills */
.qfb-light .cp-size, .qfb-alt .cp-size {
  background: #fff !important; color: var(--qf-ink) !important;
  border-color: #bfe8fa !important;
}
.qfb-light .cp-size:hover, .qfb-alt .cp-size:hover { background: #eaf7fd !important; border-color: var(--qf-primary) !important; }

/* feature lists w/ check icons */
.qfb-light .ex-featlist li, .qfb-alt .ex-featlist li,
.qfb-light .hs-featlist li, .qfb-alt .hs-featlist li,
.qfb-light .cp-feats li, .qfb-alt .cp-feats li,
.qfb-light .pp-why-list li, .qfb-alt .pp-why-list li { color: var(--qf-ink-soft) !important; }
.qfb-light .ex-featlist i, .qfb-alt .ex-featlist i,
.qfb-light .hs-featlist i, .qfb-alt .hs-featlist i,
.qfb-light .cp-feats i, .qfb-alt .cp-feats i,
.qfb-light .pp-why-list i, .qfb-alt .pp-why-list i { color: var(--qf-accent-lt) !important; }

/* images on light get a light frame instead of a black one */
.qfb-light .ex-split-img, .qfb-alt .ex-split-img,
.qfb-light .hs-split-img, .qfb-alt .hs-split-img,
.qfb-light .tf-intro-img, .qfb-alt .tf-intro-img,
.qfb-light .pp-intro-visual, .qfb-alt .pp-intro-visual {
  border-color: var(--qf-line-lt) !important;
  box-shadow: 0 18px 46px rgba(13,21,32,.14) !important;
}
.qfb-light .ex-imgcap, .qfb-alt .ex-imgcap {
  background: #f7fafc !important; color: var(--qf-ink-soft) !important;
  border-top-color: var(--qf-line-lt) !important;
}
/* masonry tiles on light */
.qfb-light .tf-masonry-item, .qfb-alt .tf-masonry-item,
.qfb-light .cl-gallery img, .qfb-alt .cl-gallery img {
  border: 1px solid var(--qf-line-lt) !important;
  box-shadow: 0 8px 26px rgba(13,21,32,.12) !important;
}
/* dividers */
.qfb-light hr, .qfb-alt hr,
.qfb-light .ex-statbar, .qfb-alt .ex-statbar,
.qfb-light .pp-statbar, .qfb-alt .pp-statbar { border-color: var(--qf-line-lt) !important; }

/* ══════════ DARK BANDS — text ══════════ */
.qfb-dark, .qfb-deep { color: #fff; }
.qfb-dark h2, .qfb-deep h2, .qfb-dark h3, .qfb-deep h3,
.qfb-dark h4, .qfb-deep h4,
.qfb-dark .ex-h2, .qfb-deep .ex-h2,
.qfb-dark .hs-h2, .qfb-deep .hs-h2,
.qfb-dark .cp-h2, .qfb-deep .cp-h2 { color: #fff !important; }
.qfb-dark p,  .qfb-deep p,
.qfb-dark li, .qfb-deep li,
.qfb-dark .ex-lead, .qfb-deep .ex-lead,
.qfb-dark .hs-lead, .qfb-deep .hs-lead,
.qfb-dark .cp-lead, .qfb-deep .cp-lead { color: rgba(255,255,255,.78) !important; }
.qfb-dark strong, .qfb-deep strong { color: #fff !important; }
.qfb-dark .ex-eyebrow, .qfb-deep .ex-eyebrow,
.qfb-dark .hs-eyebrow, .qfb-deep .hs-eyebrow,
.qfb-dark .cp-eye, .qfb-deep .cp-eye,
.qfb-dark .pp-kicker, .qfb-deep .pp-kicker,
.qfb-dark .tf-badge, .qfb-deep .tf-badge { color: #66d9ff !important; }

/* cards on dark = frosted glass */
.qfb-dark .ex-tile, .qfb-deep .ex-tile,
.qfb-dark .hs-tile, .qfb-deep .hs-tile,
.qfb-dark .hs-card, .qfb-deep .hs-card,
.qfb-dark .cp-card, .qfb-deep .cp-card,
.qfb-dark .pp-type-card, .qfb-deep .pp-type-card,
.qfb-dark .pp-step, .qfb-deep .pp-step {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.qfb-dark .ex-tile:hover, .qfb-deep .ex-tile:hover,
.qfb-dark .hs-tile:hover, .qfb-deep .hs-tile:hover,
.qfb-dark .cp-card:hover, .qfb-deep .cp-card:hover,
.qfb-dark .pp-type-card:hover, .qfb-deep .pp-type-card:hover {
  background: rgba(0,174,239,.14) !important;
  border-color: rgba(0,212,255,.6) !important;
}
.qfb-dark .cp-size, .qfb-deep .cp-size {
  background: rgba(255,255,255,.08) !important; color: #fff !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* ══════════ SHARED POLISH ══════════ */
/* eyebrow rule mark */
.ex-eyebrow, .hs-eyebrow, .cp-eye, .pp-kicker {
  display: inline-flex !important; align-items: center; gap: .7rem;
}
.ex-eyebrow::before, .hs-eyebrow::before, .cp-eye::before, .pp-kicker::before {
  content: ''; width: 28px; height: 2px; background: currentColor;
  display: inline-block; flex: 0 0 auto; opacity: .9;
}

/* pill buttons everywhere */
.tf-cta-btns a, .cp-btn, .pp-cta-btns a, .cl-hero-actions a, .ex-ctastrip a, .hs-ctastrip a {
  border-radius: 50px !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}
.tf-cta-btns a:hover, .cp-btn:hover, .pp-cta-btns a:hover,
.cl-hero-actions a:hover, .ex-ctastrip a:hover, .hs-ctastrip a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,174,239,.4) !important;
}

/* reveal-on-scroll */
.qfr { opacity: 0; transform: translateY(26px);
       transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.qfr.in { opacity: 1; transform: none; }
.qfr.d1 { transition-delay: .1s; } .qfr.d2 { transition-delay: .2s; }
.qfr.d3 { transition-delay: .3s; } .qfr.d4 { transition-delay: .4s; }

/* scroll progress */
.qf-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg,#00aee9 0%,#00d4ff 100%);
  box-shadow: 0 0 10px rgba(0,174,233,.5);
  z-index: 10001; transition: width .1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .qfr { opacity: 1 !important; transform: none !important; transition: none !important; }
}