/* Affix Technology: black hero + path cards. Standalone file (does not depend on affix.css).
   Palette: black, white, brand red #dc3545. Load AFTER affix.css. */
.hx{--hx-red:var(--bs-danger,#dc3545);--hx-font:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;overflow:hidden;background:#000;color:#fff;padding:6.5rem 0 9rem}
.hx::before{content:"";position:absolute;inset:0;pointer-events:none;
  background: #000;
  /*radial-gradient(46rem 24rem at 88% -6%,rgba(var(--bs-danger-rgb,220,53,69),.24),transparent 65%),
             radial-gradient(30rem 18rem at -4% 104%,rgba(var(--bs-danger-rgb,220,53,69),.12),transparent 65%)*/
    
}
.hx>.container{position:relative;z-index:1}

.hx-chip{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;padding:.38rem .95rem;border-radius:50rem;
  border:1px solid #2e2e2e;background:#0d0d0d;color:#cfd3d7;font:600 .74rem var(--hx-font);letter-spacing:.14em;text-transform:uppercase}
.hx-chip i{width:8px;height:8px;border-radius:50%;background:var(--bs-danger,#dc3545);box-shadow:0 0 0 0 rgba(var(--bs-danger-rgb,220,53,69),.6);animation:hx-ping 2s infinite}
@keyframes hx-ping{0%{box-shadow:0 0 0 0 rgba(var(--bs-danger-rgb,220,53,69),.55)}70%,100%{box-shadow:0 0 0 9px rgba(var(--bs-danger-rgb,220,53,69),0)}}

.hx h1{margin:0 0 1.1rem;font:700 clamp(2rem,4.1vw,3.15rem)/1.17 var(--hx-font);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.hx-red{color:var(--bs-danger,#dc3545)}
.hx-lead{max-width:34rem;margin:0;color:#b4bac0;font-size:1.1rem;line-height:1.75}
.hx-btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

.hx-points{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:2.2rem 0 0;padding:1.6rem 0 0;list-style:none;border-top:1px solid #1f1f1f}
.hx-points li{display:flex;align-items:center;color:#d3d7db;font-size:.92rem}
.hx-points i{margin-right:.5rem;color:var(--bs-danger,#dc3545)}

/* stats panel */
.hx-panel{padding:.4rem 1.6rem .6rem;border:1px solid #262626;border-radius:20px;
  background:linear-gradient(180deg,#121212,#080808);box-shadow:0 1.6rem 3.2rem rgba(0,0,0,.65)}
.hx-panel-title{display:flex;align-items:center;gap:.7rem;margin:0;padding:1.1rem 0 .9rem;color:#9aa0a6;
  font:600 .74rem var(--hx-font);letter-spacing:.16em;text-transform:uppercase}
.hx-panel-title::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--hx-red)}
.hx-stat{display:flex;align-items:center;gap:1rem;padding:1.05rem 0;border-top:1px solid #1f1f1f}
.hx-ico{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;
  background:rgba(var(--bs-danger-rgb,220,53,69),.12);border:1px solid rgba(var(--bs-danger-rgb,220,53,69),.35);color:var(--bs-danger,#dc3545);font-size:1.2rem}
.hx-num{flex:none;min-width:4.7rem;font:700 2rem/1 var(--hx-font);color:#fff;font-variant-numeric:tabular-nums}
.hx-label{color:#9aa0a6;font-size:.9rem;line-height:1.35}

/* path cards that overlap the hero */
.hx-paths{position:relative;z-index:2;margin-top:-4.6rem}
.hx-path{display:flex;align-items:center;gap:1.1rem;height:100%;padding:1.45rem 1.5rem;border-radius:16px;border-top:4px solid var(--bs-danger,#dc3545);
  background:#fff;color:#212529;text-decoration:none;box-shadow:0 1.3rem 2.8rem rgba(0,0,0,.38);transition:transform .25s ease,box-shadow .25s ease}
.hx-path:hover{transform:translateY(-4px);box-shadow:0 1.6rem 3.2rem rgba(var(--bs-danger-rgb,220,53,69),.28);color:#212529}
.hx-pico{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;
  background:var(--bs-danger,#dc3545);color:#fff;font-size:1.55rem;box-shadow:0 .5rem 1rem rgba(var(--bs-danger-rgb,220,53,69),.35)}
.hx-ptext{flex:1;color:#6c757d;font-size:.92rem;line-height:1.5}
.hx-ptext strong{display:block;margin-bottom:.15rem;font:600 1.1rem var(--hx-font,"Poppins",sans-serif);color:#212529}
.hx-go{color:#dc3545;font-size:1.25rem;transition:transform .2s}
.hx-path:hover .hx-go{transform:translateX(5px)}

@media(max-width:991.98px){.hx{padding:5.5rem 0 8rem}}
@media(max-width:575.98px){
  .hx{padding:5rem 0 7rem}
  .hx-btns .btn{flex:1 1 100%}
  .hx-panel{padding:.3rem 1.1rem .4rem}
  .hx-num{min-width:4rem;font-size:1.7rem}
  .hx-path{padding:1.2rem}
}
@media(prefers-reduced-motion:reduce){.hx-chip i{animation:none}.hx-path{transition:none}}

/* Call-to-action band: dark version (use <section class="cta cta-dark">) */
.cta.cta-dark{background:#212529;border-top:4px solid var(--bs-danger,#dc3545);color:#fff}
.cta.cta-dark p{color:#ced4da}