/* =========================================================
   HUMANBOTS — SCALING YOUR BUSINESS PAGE ONLY
   Loads after global.css and service.css. Labels, titles,
   buttons, hero base, word-fill, card grid + drawings,
   orange block and inline CTAs come from service.css; this
   file only holds what is unique here:
   Hero: 3-step proof row + "your business" system visual.
   (The bottleneck cards, comparison table, quote, capability
   cards and 4-step strip come from service.css.)
========================================================= */


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

.hbs-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:60px;
  align-items:center;
}

.hbs-proof{
  display:flex;
  align-items:center;
  gap:14px;
  margin:44px 0 0;
  padding:0;
  list-style:none;
}
.hbs-proof li{display:flex;align-items:center;gap:9px;color:#666;font-size:10px;line-height:1.35;text-transform:uppercase}
.hbs-proof b{color:var(--orange);font-family:var(--font-mono);font-weight:500}
.hbs-proof li + li::before{content:"";width:24px;height:1px;margin-right:5px;background:#2a2a2a}

.hbs-system{position:relative;width:min(600px, 100%);aspect-ratio:1;margin-left:auto}
.hbs-system > i{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  border-radius:50%;
}
.hbs-system > i:nth-of-type(1){width:84%;height:84%;border:1px dashed rgba(255,255,255,.09)}
.hbs-system > i:nth-of-type(2){width:61%;height:61%;border:1px solid rgba(255,255,255,.07)}
.hbs-system > i:nth-of-type(3){width:36%;height:36%;border:1px solid rgba(255,77,22,.2);box-shadow:0 0 80px rgba(255,77,22,.05)}
.hbs-system svg.hbs-spokes{position:absolute;inset:0;width:100%;height:100%}
.hbs-spokes path{fill:none;stroke:rgba(255,77,22,.35);stroke-width:1;stroke-dasharray:5 8}

.hbs-node{
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:150px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(145deg, #121212, #050505);
  box-shadow:0 15px 40px rgba(0,0,0,.45);
}
.hbs-node .svc-icon{width:32px;height:32px;border-radius:9px;flex:none}
.hbs-node .svc-icon svg{width:16px;height:16px}
.hbs-node small{display:block;margin-bottom:3px;color:#555;font-size:8px;text-transform:uppercase}
.hbs-node strong{display:block;color:#ccc;font-size:13px;font-weight:500;white-space:nowrap}
.hbs-node.n1{left:50%;top:1%;translate:-50% 0}
.hbs-node.n2{right:0;top:23%}
.hbs-node.n3{right:-1%;bottom:21%}
.hbs-node.n4{left:50%;bottom:1%;translate:-50% 0}
.hbs-node.n5{left:-1%;bottom:21%}
.hbs-node.n6{left:0;top:23%}

.hbs-core{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:158px;
  height:158px;
  translate:-50% -50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,77,22,.38);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,77,22,.16), rgba(255,77,22,.04) 55%, #050505);
  box-shadow:0 0 70px rgba(255,77,22,.12);
  text-align:center;
}
.hbs-core small{color:#666;font-size:9px;text-transform:uppercase}
.hbs-core strong{color:#f4f4f2;font-family:var(--font-display);font-size:18px;font-weight:650;letter-spacing:-.03em}
.hbs-core span{margin-top:6px;color:var(--orange);font-size:8px;text-transform:uppercase}


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

@media (max-width:1100px){
  .hbs-hero-grid{grid-template-columns:1fr;gap:50px}
  .hbs-system{margin:0 auto;max-width:540px}
}

@media (max-width:950px){
}

@media (max-width:700px){
  .hbs-proof{gap:8px;flex-wrap:wrap}
  .hbs-proof li{font-size:9px}
  .hbs-proof li + li::before{width:10px}

  .hbs-node{min-width:0;padding:6px 8px;gap:6px;border-radius:10px}
  .hbs-node .svc-icon{width:24px;height:24px;border-radius:7px}
  .hbs-node .svc-icon svg{width:12px;height:12px}
  .hbs-node small{display:none}
  .hbs-node strong{font-size:10px}
  .hbs-core{width:112px;height:112px}
  .hbs-core strong{font-size:14px}



}