/* =========================================================
   HUMANBOTS — CUSTOMER EXPERIENCE PAGE ONLY
   Loads after global.css and service.css. Labels, titles,
   buttons, hero base, card grid, tabs and inline CTAs come
   from service.css; this file only holds what is unique here:
   1. Hero banner image
   2. Channel coverage chips (agent tabs)
   3. Global CX network (globe, hotspots, stats)
   4. "Start in less than 24 hours" orange band
   (The service card drawings come from .svc-art in service.css.)
========================================================= */


/* =========================================================
   1. HERO BANNER
========================================================= */

.hbx-hero{padding-bottom:0}
.hbx-hero .svc-h1{font-size:clamp(40px, 5vw, 72px)}

.hbx-banner{
  position:relative;
  z-index:1;
  height:clamp(360px, 44vw, 620px);
  margin-top:56px;
  overflow:hidden;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:var(--card);
}
.hbx-banner::before{
  content:"";
  position:absolute;
  z-index:2;
  left:10%;
  right:10%;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,77,22,.7), transparent);
}
.hbx-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35));
}
.hbx-banner img{width:100%;height:100%;object-fit:cover}


/* =========================================================
   2. CHANNEL COVERAGE (inside each agent tab)
========================================================= */

.hbx-channels-label{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--soft-line);
  color:#555;
  text-transform:uppercase;
}
.hbx-channels{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.hbx-channels li{
  padding:12px 8px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--card);
  color:#555;
  font-size:11px;
  text-align:center;
  text-transform:uppercase;
}
.hbx-channels li.on{
  border-color:rgba(255,77,22,.4);
  background:rgba(255,77,22,.06);
  color:#fff;
}
.hbx-channels li:not(.on){text-decoration:line-through;text-decoration-color:#333}


/* =========================================================
   3. GLOBAL CX NETWORK
========================================================= */

.hbx-global{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:60px;
  align-items:center;
}
.hbx-global .svc-lede{margin-top:22px}

.hbx-coverage{display:flex;align-items:center;gap:18px;margin-top:30px}
.hbx-coverage-icon{
  position:relative;
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,77,22,.35);
  border-radius:50%;
}
.hbx-coverage-icon::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dashed rgba(255,77,22,.3);
  border-radius:50%;
  animation:hbxSpin 14s linear infinite;
}
.hbx-coverage-icon::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 7px rgba(255,77,22,.08), 0 0 18px rgba(255,77,22,.3);
}
@keyframes hbxSpin{to{rotate:360deg}}
.hbx-coverage small{display:block;margin-bottom:4px;color:#555;text-transform:uppercase}
.hbx-coverage strong{color:#fff;font-size:16px;font-weight:500}

.hbx-globe{position:relative;min-height:520px;display:grid;place-items:center}
.hbx-globe img{width:100%;height:auto}
.hbx-globe::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, #000, transparent 12%, transparent 90%, #000),
    linear-gradient(180deg, #000, transparent 12%, transparent 90%, #000);
}

.hbx-pin{
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .6s ease, transform .6s var(--ease);
}
.is-in .hbx-pin{opacity:1;transform:none}
.hbx-pin::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,77,22,.15), 0 0 12px rgba(255,77,22,.75);
}
.hbx-pin span{
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:rgba(2,2,2,.86);
  color:#bbb;
  font-size:10px;
  text-transform:uppercase;
  white-space:nowrap;
}
.hbx-pin.p1{left:14%;top:36%;transition-delay:.2s}
.hbx-pin.p2{left:50%;top:24%;transition-delay:.3s}
.hbx-pin.p3{left:57%;top:48%;transition-delay:.4s}
.hbx-pin.p4{right:10%;top:35%;transition-delay:.5s}
.hbx-pin.p5{left:49%;top:65%;transition-delay:.6s}
.hbx-pin.p6{left:27%;top:70%;transition-delay:.7s}

.hbx-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin:30px 0 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hbx-stats div{padding:30px 26px;border-right:1px solid var(--line)}
.hbx-stats div:last-child{border-right:0}
.hbx-stats dd{
  margin:0;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(32px, 3vw, 46px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.04em;
}
.hbx-stats dd b{font-weight:inherit}
.hbx-stats dd span{color:var(--orange)}
.hbx-stats dt{margin-top:12px;color:#c5c5c5;font-size:13px}
.hbx-stats dt small{display:block;margin-top:4px;color:#555;font-size:10px;text-transform:uppercase}
/* number (dd) shows above its label (dt) */
.hbx-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end}


/* =========================================================
   4. START IN LESS THAN 24 HOURS (orange band)
   Colors come from .svc-orange in service.css.
========================================================= */

.hbx-fast{
  position:relative;
  padding:110px 0 120px;
}
.hbx-fast::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:72px 72px;
}
.hbx-fast .svc-container{position:relative}

.hbx-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:26px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(0,0,0,.08);
  text-transform:uppercase;
}
.hbx-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  animation:hbxPulse 1.6s ease-in-out infinite;
}
@keyframes hbxPulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}}

.hbx-fast-steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.hbx-fast-steps li{
  padding:20px 18px 22px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:18px;
  background:rgba(255,255,255,.07);
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.hbx-fast-steps li:hover{transform:translateY(-4px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.hbx-fast-steps b{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:44px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
}
.hbx-fast-steps li:nth-child(3) b{background:#fff;color:var(--orange)}
.hbx-fast-steps .svc-mono{display:block;margin-bottom:8px;color:rgba(255,255,255,.75);font-size:10px;text-transform:uppercase}
.hbx-fast-steps h3{color:#fff;font-size:24px;line-height:1.05;font-weight:600;letter-spacing:-.04em}
.hbx-fast-steps p{margin-top:10px;color:rgba(255,255,255,.8);font-size:13px;line-height:1.6}



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

@media (max-width:1000px){
  .hbx-global{grid-template-columns:1fr;gap:30px}
  .hbx-globe{min-height:0}
  .hbx-stats{grid-template-columns:repeat(2, 1fr)}
  .hbx-stats div:nth-child(2){border-right:0}
  .hbx-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hbx-fast-steps{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:700px){
  .hbx-hero .svc-h1{font-size:clamp(36px, 10.5vw, 46px)}
  .hbx-banner{height:440px;margin-top:40px;border-radius:14px 14px 0 0}
  .hbx-banner img{object-position:center top}

  .hbx-channels{grid-template-columns:repeat(2, 1fr)}

  .hbx-globe{width:124%;margin-left:-12%}
  .hbx-pin span{display:none}
  .hbx-stats div{padding:22px 16px}

  .hbx-fast{padding:72px 0 80px}
  .hbx-fast-steps{grid-template-columns:1fr}
  .hbx-fast-steps b{margin-bottom:22px}
  .hbx-fast .svc-btn{width:100%}
}

.hbx-channels li,.hbx-stats dt small{color:#aaa}