/* =========================================================
   HUMANBOTS — INDUSTRY PAGES (all 8 /industries/<name>/ pages)
   Also loaded by the 30 sub-service pages, which reuse the hero
   grid, breadcrumb, 2x2 problem cards, FAQ width and pill links.
   Not the Industries hub page, which uses industries.css.
   Loads after global.css and service.css. Everything else
   (problem cards, card grid, timeline, accordion, CTAs) comes
   from service.css; this file holds:
   1. Hero: customer-journey card with the bottleneck marked
   2. "Services that matter most" link cards
   3. Other industries strip + FAQ answer width
========================================================= */


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

.hbi-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:60px;
  align-items:center;
}
.hbi-crumb{margin-bottom:22px;color:#666;font-size:12px}
.hbi-crumb a{color:#999}
.hbi-crumb a:hover{color:#fff}
.hbi-crumb span{margin:0 8px;color:#444}

.hbi-flow{
  position:relative;
  padding:26px;
  border:1px solid var(--line);
  border-radius:22px;
  background:radial-gradient(circle at 85% 0%, rgba(255,77,22,.1), transparent 45%), linear-gradient(145deg, #101010, #060606);
  box-shadow:0 40px 100px rgba(0,0,0,.5);
}
.hbi-flow-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#666;font-size:11px;text-transform:uppercase}
.hbi-flow-head b{color:var(--orange);font-weight:500}
.hbi-flow ol{position:relative;margin:0;padding:0;list-style:none}
.hbi-flow ol::before{
  content:"";
  position:absolute;
  left:21px;
  top:22px;
  bottom:22px;
  width:1px;
  background:linear-gradient(var(--line), rgba(255,77,22,.5), var(--line));
}
.hbi-flow li{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:14px;
  align-items:center;
  padding:10px 12px 10px 0;
  border-radius:14px;
  opacity:0;
  transform:translateX(12px);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.is-in .hbi-flow li,
.hbi-flow.is-in li{opacity:1;transform:none}
.hbi-flow.is-in li:nth-child(2){transition-delay:.08s}
.hbi-flow.is-in li:nth-child(3){transition-delay:.16s}
.hbi-flow.is-in li:nth-child(4){transition-delay:.24s}
.hbi-flow.is-in li:nth-child(5){transition-delay:.32s}
.hbi-flow .svc-icon{position:relative;z-index:1;width:44px;height:44px;border-radius:12px;background:#0d0d0d}
.hbi-flow .svc-icon svg{width:18px;height:18px}
.hbi-flow strong{display:block;color:#e8e8e8;font-size:15px;font-weight:500}
.hbi-flow small{display:block;margin-top:2px;color:#666;font-size:12px}
.hbi-flow em{font-style:normal;color:#555;font-size:11px;text-transform:uppercase}

/* the stage where businesses in this industry usually lose people */
.hbi-flow li.is-stuck{
  margin:4px 0;
  background:rgba(255,77,22,.07);
  box-shadow:inset 0 0 0 1px rgba(255,77,22,.35);
}
.hbi-flow li.is-stuck .svc-icon{border-color:var(--orange);background:var(--orange);color:#fff}
.hbi-flow li.is-stuck em{color:var(--orange)}
.hbi-flow-foot{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--soft-line);color:var(--dim);font-size:13px;line-height:1.55}
.hbi-flow-foot b{color:#fff;font-weight:500}


/* =========================================================
   2. SERVICES THAT MATTER MOST
========================================================= */

.hbi-services{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.hbi-services a{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  transition:border-color .3s ease, transform .3s ease;
}
.hbi-services a:hover{border-color:rgba(255,77,22,.45);transform:translateY(-3px)}
.hbi-services .svc-mono{color:var(--orange);text-transform:uppercase}
.hbi-services h3{margin:14px 0 8px;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.035em}
.hbi-services p{color:var(--dim);font-size:14px;line-height:1.6}
.hbi-services b{margin-top:auto;padding-top:18px;color:#ddd;font-size:13px;font-weight:500}
.hbi-services a:hover b{color:var(--orange)}


/* =========================================================
   3. OTHER INDUSTRIES + FAQ
========================================================= */

.hbi-others{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.hbi-others a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#bbb;
  font-size:14px;
  transition:border-color .25s ease, color .25s ease;
}
.hbi-others a::after{content:"↗";color:#555;transition:color .25s ease}
.hbi-others a:hover{border-color:rgba(255,77,22,.5);color:#fff}
.hbi-others a:hover::after{color:var(--orange)}

/* four problem cards sit 2 x 2 on wide screens */
@media (min-width:951px){
  .hbi-pains{grid-template-columns:repeat(2, 1fr)}
}

.hbi-faq .svc-acc-title{font-size:clamp(18px, 1.7vw, 23px)}
.hbi-faq .svc-acc-body{grid-template-columns:1fr}
.hbi-faq .svc-acc-body p{max-width:720px;color:#999;font-size:16px;line-height:1.7}


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

@media (max-width:1050px){
  .hbi-hero-grid{grid-template-columns:1fr;gap:44px}
  .hbi-flow{max-width:600px}
  .hbi-services{grid-template-columns:1fr}
}

@media (max-width:650px){
  .hbi-flow{padding:18px}
  .hbi-flow li{grid-template-columns:40px 1fr;gap:12px}
  .hbi-flow em{display:none}
  .hbi-flow .svc-icon{width:40px;height:40px}
  .hbi-flow ol::before{left:19px}
}

@media (prefers-reduced-motion:reduce){
  .hbi-flow li{opacity:1;transform:none;transition:none}
}

/* small helpers used inside section headings */
.hbi-inline-link{color:#fff;text-decoration:underline}
.hbi-gap{margin-top:90px}