/* =========================================================
   HUMANBOTS — MARKETING PAGE ONLY
   Loads after global.css and service.css. Labels, titles,
   buttons, word-fill, card grid, card drawings, icons, tabs
   and inline CTAs come from service.css; this file only holds
   what is unique here:
   1. Hero (background photo + floating analytics cards)
   2. "How it works" flow diagram
   3. Results chart + stats
   4. Radar above "one connected growth system"
   5. Case studies layout
   Everything that animates here plays once, when the block
   scrolls into view (service.js adds .is-in to [data-reveal]).
========================================================= */


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

.hbm-hero{
  isolation:isolate;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#000;
}
.hbm-bg{position:absolute;inset:0;z-index:-1}
.hbm-bg img{width:100%;height:100%;object-fit:cover}
.hbm-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.82) 27%, rgba(0,0,0,.34) 53%, rgba(0,0,0,.06) 76%, rgba(0,0,0,.3)),
    linear-gradient(to top, #000, rgba(0,0,0,.45) 15%, transparent 42%);
}
.hbm-hero-copy{position:relative;z-index:1;max-width:760px}
.hbm-hero .svc-h1{font-size:clamp(48px, 6.2vw, 92px)}

/* floating analytics (decoration, desktop only) */
.hbm-dash{
  position:absolute;
  z-index:1;
  right:clamp(24px, 4vw, 80px);
  bottom:9%;
  width:500px;
  height:390px;
  pointer-events:none;
}
.hbm-dash > div{
  position:absolute;
  padding:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:linear-gradient(145deg, rgba(18,18,18,.85), rgba(5,5,5,.7));
  box-shadow:0 30px 80px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.hbm-dash .svc-mono{display:flex;justify-content:space-between;color:#888;font-size:10px;text-transform:uppercase}
.hbm-dash .svc-mono i{font-style:normal;color:var(--orange)}
.hbm-dash strong{
  display:block;
  margin-top:12px;
  color:#f2f2f2;
  font-family:var(--font-display);
  font-size:30px;
  font-weight:600;
  letter-spacing:-.04em;
}
.hbm-dash svg{display:block;width:100%;overflow:visible}

.hbm-dash-line{right:0;top:0;width:300px}
.hbm-dash-line svg{height:70px;margin-top:8px}
.hbm-dash-line .area{opacity:0;transition:opacity 1.2s ease .9s}
.hbm-dash-line .line{
  fill:none;
  stroke:var(--orange);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:500;
  stroke-dashoffset:500;
  transition:stroke-dashoffset 1.7s var(--ease) .6s;
}
.is-in .hbm-dash-line .area{opacity:1}
.is-in .hbm-dash-line .line{stroke-dashoffset:0}

.hbm-dash-bars{left:0;bottom:20px;width:240px}
.hbm-dash-bars p{display:flex;align-items:flex-end;gap:8px;height:72px;margin:16px 0 0}
.hbm-dash-bars i{
  flex:1;
  border-radius:4px 4px 1px 1px;
  background:linear-gradient(to top, rgba(255,77,22,.28), var(--orange));
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .8s var(--ease);
}
.hbm-dash-bars i:nth-child(1){height:28%;transition-delay:.6s}
.hbm-dash-bars i:nth-child(2){height:42%;transition-delay:.67s}
.hbm-dash-bars i:nth-child(3){height:35%;transition-delay:.74s}
.hbm-dash-bars i:nth-child(4){height:58%;transition-delay:.81s}
.hbm-dash-bars i:nth-child(5){height:65%;transition-delay:.88s}
.hbm-dash-bars i:nth-child(6){height:82%;transition-delay:.95s}
.hbm-dash-bars i:nth-child(7){height:100%;transition-delay:1.02s}
.is-in .hbm-dash-bars i{transform:none}

.hbm-dash-mini{right:25px;bottom:0;width:190px}
.hbm-dash-mini strong{font-size:26px}
.hbm-dash-mini small{color:var(--orange);font-size:11px}
.hbm-dash-mini svg{position:absolute;right:15px;bottom:15px;width:72px;height:32px}
.hbm-dash-mini path{
  fill:none;
  stroke:var(--orange);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:160;
  stroke-dashoffset:160;
  transition:stroke-dashoffset 1.3s var(--ease) 1s;
}
.is-in .hbm-dash-mini path{stroke-dashoffset:0}


/* =========================================================
   3. RESULTS CHART + STATS
========================================================= */

.hbm-chart{
  position:relative;
  height:360px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hbm-chart svg{position:absolute;inset:0;width:100%;height:100%}
.hbm-chart .area{opacity:0;transition:opacity 1s ease .4s}
.hbm-chart .line{
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:1800;
  stroke-dashoffset:1800;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.hbm-chart.is-in .area{opacity:1}
.hbm-chart.is-in .line{stroke-dashoffset:0}

.hbm-mark{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin:0;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease, transform .6s var(--ease);
}
.is-in .hbm-mark{opacity:1;transform:none}
.hbm-mark::after{
  content:"";
  order:2;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.03), 0 0 18px rgba(255,77,22,.4);
}
.hbm-mark span{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(8,8,8,.75);
  color:#999;
  font-size:10px;
  white-space:nowrap;
}
.hbm-mark.m1{left:22%;top:38%;transition-delay:.5s}
.hbm-mark.m2{left:54%;top:27%;transition-delay:.8s}
.hbm-mark.m3{right:6%;top:3%;align-items:flex-end;transition-delay:1.1s}
.hbm-chart-note{position:absolute;left:0;bottom:12px;color:#555;font-size:10px;text-transform:uppercase}

.hbm-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin:0;
  border-left:1px solid var(--line);
}
.hbm-stats div{
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-end;
  padding:28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hbm-stats dd{
  margin:0 0 12px;
  color:#f0f0f0;
  font-family:var(--font-display);
  font-size:clamp(38px, 3.5vw, 54px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.045em;
}
.hbm-stats dd span{color:var(--orange)}
.hbm-stats dt{color:#ddd;font-size:14px;font-weight:500}
.hbm-stats dt small{display:block;max-width:330px;margin-top:8px;color:var(--dim);font-size:13px;font-weight:400;line-height:1.55}


/* =========================================================
   4. RADAR + CONNECTED SYSTEM INTRO
========================================================= */

.hbm-radar-wrap{position:relative;padding-top:250px;margin-bottom:56px}
.hbm-radar{
  position:absolute;
  left:50%;
  top:0;
  width:500px;
  height:250px;
  translate:-50% 0;
}
.hbm-radar::before{
  content:"";
  position:absolute;
  inset:-40px -70px 0;
  background:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px) 0 0 / 22px 22px;
  mask-image:radial-gradient(circle at 50% 100%, #000, transparent 68%);
}
.hbm-radar::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-60px;
  width:600px;
  height:300px;
  translate:-50% 0;
  background:radial-gradient(circle, rgba(255,77,22,.16), transparent 65%);
  filter:blur(30px);
  pointer-events:none;
}
.hbm-radar i{
  position:absolute;
  left:50%;
  bottom:0;
  translate:-50% 0;
  border:1px solid rgba(255,255,255,.09);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.hbm-radar i:nth-child(1){width:180px;height:90px}
.hbm-radar i:nth-child(2){width:280px;height:140px}
.hbm-radar i:nth-child(3){width:390px;height:195px}
.hbm-radar i:nth-child(4){width:500px;height:250px;border-style:dashed;border-color:rgba(255,255,255,.13)}
.hbm-sweep{
  position:absolute;
  left:50%;
  bottom:0;
  width:245px;
  height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg, var(--orange), rgba(255,77,22,.15), transparent);
  box-shadow:0 0 18px rgba(255,77,22,.35);
  animation:hbmSweep 5s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes hbmSweep{from{rotate:-150deg}to{rotate:-30deg}}
.hbm-radar b{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.04), 0 0 22px rgba(255,77,22,.5);
}
.hbm-radar b:nth-of-type(1){left:27%;top:48%}
.hbm-radar b:nth-of-type(2){right:25%;top:30%}
.hbm-radar b:nth-of-type(3){right:13%;bottom:20%}
.hbm-radar-icon{
  position:absolute;
  left:50%;
  bottom:-34px;
  z-index:1;
  width:68px;
  height:68px;
  translate:-50% 0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f2f2f2;
  color:#111;
  box-shadow:0 0 0 12px rgba(255,255,255,.03), 0 15px 40px rgba(0,0,0,.45);
}
.hbm-radar-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hbm-radar-wrap .svc-label{margin-top:64px}
.hbm-radar-wrap .svc-title{max-width:820px;margin-left:auto;margin-right:auto}
.hbm-radar-wrap .svc-lede{max-width:650px;margin-top:20px}

.hbm-system .svc-card{min-height:0;gap:28px}


/* =========================================================
   5. CASE STUDIES
========================================================= */

.hbm-case{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:56px;
  align-items:center;
}
.hbm-case > div:first-child > .svc-mono{color:var(--orange);text-transform:uppercase}
.hbm-case h3{
  margin:10px 0 6px;
  color:#f2f2f2;
  font-size:clamp(34px, 3.8vw, 58px);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.045em;
}
.hbm-case-industry{color:#666;text-transform:uppercase}
.hbm-case p{max-width:540px;margin:22px 0 28px;color:var(--dim);font-size:15px;line-height:1.7}
.hbm-case-did{color:#555;text-transform:uppercase}

.hbm-case-visual{
  position:relative;
  height:500px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:radial-gradient(circle, rgba(255,77,22,.06), transparent 45%), var(--card);
}
.hbm-case-visual img{width:100%;height:100%;object-fit:cover}
.hbm-case-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent 50%);
  pointer-events:none;
}
.hbm-case-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#444;
  text-transform:uppercase;
}
.hbm-case-results{
  position:absolute;
  z-index:1;
  left:18px;
  right:18px;
  bottom:18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(5,5,5,.8);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.hbm-case-results div{
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-end;
  min-height:100px;
  padding:18px;
  border-right:1px solid rgba(255,255,255,.09);
}
.hbm-case-results div:last-child{border-right:0}
.hbm-case-results dd{
  margin:0 0 7px;
  color:#f2f2f2;
  font-family:var(--font-display);
  font-size:30px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.04em;
}
.hbm-case-results dd span{color:var(--orange)}
.hbm-case-results dt{color:#777;font-size:10px;text-transform:uppercase}


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

@media (max-width:1150px){
  .hbm-dash{display:none}
}

@media (max-width:950px){

  .hbm-stats{grid-template-columns:1fr}

  .hbm-case{grid-template-columns:1fr;gap:28px}
}

@media (max-width:700px){
  .hbm-hero{align-items:flex-start}
  .hbm-bg img{object-position:center top}
  .hbm-bg::after{background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 24%, rgba(0,0,0,.2) 48%, rgba(0,0,0,.7) 76%, #000)}
  .hbm-hero .svc-h1{font-size:clamp(42px, 13vw, 54px)}


  .hbm-chart{height:240px}
  .hbm-mark span{display:none}
  .hbm-stats div{padding:22px}

  .hbm-radar-wrap{padding-top:170px}
  .hbm-radar{scale:.62;transform-origin:top center;top:-20px}

  .hbm-case-visual{height:340px}
  .hbm-case-results{left:10px;right:10px;bottom:10px}
  .hbm-case-results div{min-height:80px;padding:10px}
  .hbm-case-results dd{font-size:20px}
  .hbm-case-results dt{font-size:8px}
}


/* =========================================================
   HEADINGS: smaller, two lines (white line + grey line)
========================================================= */
.svc-section .svc-title{font-size:clamp(28px, 3vw, 40px);line-height:1.08;letter-spacing:-.04em}
.hbm-hero .svc-h1{font-size:clamp(44px, 5.4vw, 72px)}
@media (min-width:951px){
  .svc-section .svc-head{grid-template-columns:1.35fr .65fr}
  .svc-section .svc-title,.svc-section .svc-title span{white-space:nowrap}
}
@media (max-width:950px){
  .svc-section .svc-title{font-size:min(36px, calc((100vw - 40px) / 16.4));line-height:1.12}
}
@media (max-width:700px){
  .hbm-hero .svc-h1{font-size:clamp(38px, 11vw, 48px)}
}


/* CLIENTS logo slider: shared, in service.css (.hbm-clients) */


/* =========================================================
   HOW IT WORKS: orange section, text on the left stays put,
   cards on the right stack on top of each other as you scroll
   (CSS sticky only). The orange fades into black top and bottom.
========================================================= */
.hbm-stack{
  position:relative;
  padding:220px 0 260px;
  background:linear-gradient(180deg, #000 0%, #ff4d16 16%, #ff4d16 84%, #000 100%);
}
.hbm-stack-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px, 5vw, 70px);align-items:start}
.hbm-stack-copy{position:sticky;top:150px}
.hbm-stack .svc-label{color:#fff}
.hbm-stack .svc-label::before{background:#fff}
.hbm-stack .svc-title{margin-top:14px;color:#fff;font-size:min(39px, 3.05vw);line-height:1.08;letter-spacing:-.04em}
.hbm-stack .svc-title span{display:block;color:#1c0e08}
.hbm-stack .svc-lede{max-width:500px;margin:22px 0 32px;color:rgba(255,255,255,.92);font-size:18px;line-height:1.65}

.hbm-stack-cards{margin:0;padding:0;list-style:none}
.hbm-scard{
  position:sticky;
  top:150px;
  min-height:320px;
  display:flex;
  flex-direction:column;
  margin-bottom:12vh;
  padding:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:#0b0b0b;
  color:#fff;
  box-shadow:0 -18px 50px rgba(0,0,0,.28), 0 30px 70px rgba(0,0,0,.25);
}
.hbm-scard:nth-child(2){top:174px}
.hbm-scard:nth-child(3){top:198px}
.hbm-scard:nth-child(4){top:222px;margin-bottom:0}
.hbm-scard-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.hbm-scard-top .svc-mono{color:var(--orange);font-size:12px;text-transform:uppercase}
.hbm-scard-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,77,22,.35);border-radius:14px;background:rgba(255,77,22,.1)}
.hbm-scard-icon svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hbm-scard h3{margin:auto 0 14px;padding-top:40px;color:#fff;font-size:clamp(28px, 2.6vw, 36px);font-weight:600;line-height:1.1;letter-spacing:-.035em}
.hbm-scard p{margin:0;color:#a8a8a8;font-size:17px;line-height:1.7}
.hbm-scard-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.hbm-scard-tags li{padding:8px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#d6d6d6;font-size:13px}

@media (min-width:951px){
  .hbm-stack .svc-title,.hbm-stack .svc-title span{white-space:nowrap}
}
@media (max-width:950px){
  .hbm-stack{padding:150px 0 180px}
  .hbm-stack-grid{grid-template-columns:1fr;gap:40px}
  .hbm-stack-copy{position:static}
  .hbm-stack .svc-title{font-size:min(36px, calc((100vw - 40px) / 16.4));line-height:1.12}
  .hbm-scard{top:96px;min-height:280px;margin-bottom:8vh;padding:26px}
  .hbm-stack .svc-lede{font-size:16px}
  .hbm-scard p{font-size:15px}
  .hbm-scard:nth-child(2){top:112px}
  .hbm-scard:nth-child(3){top:128px}
  .hbm-scard:nth-child(4){top:144px}
  .hbm-scard h3{padding-top:28px}
}


/* =========================================================
   MARKETING DASHBOARD: centred heading, the dashboard image
   rises over the bottom of it on an orange glow
========================================================= */
.hbm-dash-intro{position:relative;overflow:hidden}
.hbm-dash-head{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.hbm-dash-head .svc-title{font-size:min(92px, calc((min(100vw, 1220px) - 40px) / 14.2));line-height:1;letter-spacing:-.05em;white-space:nowrap}
.hbm-dash-head .svc-title span{white-space:nowrap}
.hbm-dash-shot{position:relative;z-index:2;max-width:1180px;margin:-34px auto 0;padding:0}
.hbm-dash-shot::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:12%;bottom:-6%;border-radius:50%;background:radial-gradient(ellipse at center, rgba(255,77,22,.35), transparent 65%);filter:blur(40px)}
.hbm-dash-shot img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.7)}
/* the dashboard rises over the lower part of the heading */
.hbm-dash-intro .hbm-dash-shot{margin-top:calc(min(92px, (min(100vw, 1220px) - 40px) / 14.2) * -.5)}
.hbm-dash-lede{max-width:680px;margin:30px auto 0;text-align:center}
.hbm-dash-shot{transform:perspective(1600px) rotateX(10deg) translateY(30px);transform-origin:center top;opacity:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .9s ease}
.hbm-dash-shot.is-in{transform:perspective(1600px) rotateX(0) translateY(0);opacity:1}
.hbm-dash-shot figcaption{margin-top:12px;color:#5f5f5f;font-size:11px;text-align:right}
.hbm-dash-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1180px;margin:34px auto 0;padding:0;list-style:none}
.hbm-dash-points li{padding:20px 22px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#080808}
.hbm-dash-points strong{display:block;color:#fff;font-size:16px;font-weight:600}
.hbm-dash-points span{display:block;margin-top:6px;color:#8a8a8a;font-size:14px;line-height:1.6}
@media (max-width:950px){
  .hbm-dash-points{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hbm-dash-shot img{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  .hbm-dash-shot{transform:none;opacity:1;transition:none}
}


/* =========================================================
   PLATFORMS & SERVICES (brand logos)
========================================================= */
.hbm-platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.hbm-pcard{display:flex;flex-direction:column;height:100%;padding:26px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#080808;color:#fff;text-decoration:none;transition:border-color .3s ease, transform .3s ease, background .3s ease}
.hbm-pcard:hover{border-color:rgba(255,77,22,.45);transform:translateY(-3px);background:linear-gradient(180deg,rgba(255,77,22,.07),#080808 60%)}
.hbm-plogos{display:flex;flex-wrap:wrap;gap:8px}
.hbm-plogos img{box-sizing:content-box;width:24px;height:24px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#121212}
.hbm-pcard h3{margin:22px 0 8px;font-size:20px;font-weight:600;letter-spacing:-.03em}
.hbm-pcard p{margin:0;color:#8f8f8f;font-size:14px;line-height:1.65}
.hbm-pcard b{margin-top:auto;padding-top:18px;color:#ddd;font-size:13px;font-weight:600}
.hbm-pcard:hover b{color:var(--orange)}
.hbm-tm{margin-top:20px;color:#555;font-size:11px}
@media (max-width:950px){.hbm-platforms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hbm-platforms{grid-template-columns:1fr}.hbm-pcard{padding:22px}}


/* =========================================================
   AI SEARCH (orange): copy + AI tools on the left, a phone that
   asks ChatGPT on the right (assets/js/ai-search-demo.js)
========================================================= */
.hbm-ai{position:relative;padding:140px 0;background:#ff4d16}
.hbm-ai.is-sticky{height:260vh;padding:0}
.hbm-ai.is-sticky .hbm-ai-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:70px}
.hbm-ai-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px, 6vw, 90px);align-items:center;width:min(1180px, calc(100% - 40px))}
.hbm-ai .svc-label{color:#fff}
.hbm-ai .svc-label::before{background:#fff}
.hbm-ai .svc-title{margin-top:14px;color:#fff;font-size:min(40px, 3.1vw);line-height:1.08;letter-spacing:-.04em;white-space:nowrap}
.hbm-ai .svc-title span{display:block;color:#1c0e08;white-space:nowrap}
.hbm-ai .svc-lede{max-width:540px;margin:20px 0 26px;color:rgba(255,255,255,.93);font-size:17px;line-height:1.7}
.hbm-ai-tools{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding:0;list-style:none}
.hbm-ai-tools li{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:999px;background:#140904;color:#fff;font-size:14px;font-weight:600}
.hbm-ai-tools img{width:22px;height:22px}

/* phone */
.hbm-ai-phone-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.hbm-ai-phone{position:relative;width:min(330px, 100%);aspect-ratio:9/18.5;max-height:calc(100vh - 150px);padding:12px;border-radius:46px;background:#0a0a0a;box-shadow:0 0 0 2px #2a2a2a, 0 40px 100px rgba(60,16,0,.55)}
.hbm-ai-notch{position:absolute;z-index:2;left:50%;top:20px;width:92px;height:24px;translate:-50% 0;border-radius:20px;background:#000}
.hbm-ai-app{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:36px;background:#141414;color:#eee;font-family:var(--font-body)}
.hbm-ai-bar{display:flex;align-items:center;gap:8px;padding:54px 18px 12px;border-bottom:1px solid #222;font-size:14px}
.hbm-ai-bar span{margin-left:auto;color:#3ddc84;font-size:9px}
.hbm-ai-chat{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 14px;overflow:hidden}
.hbm-ai-hello{margin:auto 0;color:#777;font-size:16px;text-align:center;transition:opacity .3s ease}
.hbm-ai-phone:not([data-stage="0"]):not([data-stage="1"]) .hbm-ai-hello{display:none}
.hbm-ai-q{align-self:flex-end;max-width:85%;padding:10px 14px;border-radius:18px 18px 4px 18px;background:#2f2f2f;color:#fff;font-size:13px;line-height:1.4;opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .3s ease}
.hbm-ai-q:empty{display:none}
.hbm-ai-phone[data-stage]:not([data-stage="0"]):not([data-stage="1"]) .hbm-ai-q{opacity:1;transform:none}
.hbm-ai-think{display:none;gap:5px;padding:4px 2px}
.hbm-ai-think i{width:7px;height:7px;border-radius:50%;background:#888;animation:hbm-think 1s ease-in-out infinite}
.hbm-ai-think i:nth-child(2){animation-delay:.15s}.hbm-ai-think i:nth-child(3){animation-delay:.3s}
.hbm-ai-phone[data-stage="2"] .hbm-ai-think{display:flex}
@keyframes hbm-think{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.hbm-ai-answer{display:none;font-size:12.5px;line-height:1.5}
.hbm-ai-phone[data-stage="3"] .hbm-ai-answer,.hbm-ai-phone[data-stage="4"] .hbm-ai-answer,.hbm-ai-phone[data-stage="5"] .hbm-ai-answer,.hbm-ai-phone[data-stage="6"] .hbm-ai-answer,.hbm-ai-phone[data-stage="7"] .hbm-ai-answer{display:block}
.hbm-ai-intro{margin:0 0 10px;color:#ccc}
.hbm-ai-answer ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.hbm-ai-answer li{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #262626;border-radius:12px;background:#1b1b1b;opacity:0;transform:translateY(8px);transition:opacity .35s ease, transform .35s ease}
.hbm-ai-answer li b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2a2a2a;color:#bbb;font-size:11px}
.hbm-ai-answer li div{min-width:0}
.hbm-ai-answer li strong{display:block;color:#eee;font-size:13px}
.hbm-ai-answer li small{display:block;color:#8a8a8a;font-size:10.5px;line-height:1.35}
.hbm-ai-answer li em{margin-left:auto;padding:3px 7px;border-radius:999px;background:#ff4d16;color:#fff;font-size:9px;font-style:normal;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.hbm-ai-answer li.is-you{border-color:rgba(255,77,22,.7);background:linear-gradient(135deg,rgba(255,77,22,.22),#1b1b1b 70%);box-shadow:0 0 30px rgba(255,77,22,.25)}
.hbm-ai-answer li.is-you b{background:#ff4d16;color:#fff}
.hbm-ai-phone[data-stage="3"] li:nth-child(-n+1),.hbm-ai-phone[data-stage="4"] li:nth-child(-n+2),.hbm-ai-phone[data-stage="5"] li:nth-child(-n+3),.hbm-ai-phone[data-stage="6"] li,.hbm-ai-phone[data-stage="7"] li{opacity:1;transform:none}
.hbm-ai-phone[data-stage="7"] li.is-you{animation:hbm-you 1.6s ease-in-out infinite}
@keyframes hbm-you{0%,100%{box-shadow:0 0 30px rgba(255,77,22,.25)}50%{box-shadow:0 0 44px rgba(255,77,22,.5)}}
.hbm-ai-input{display:flex;align-items:center;gap:2px;margin:10px;padding:10px 10px 10px 14px;border:1px solid #2c2c2c;border-radius:24px;background:#1e1e1e;color:#eee;font-size:13px;min-height:44px}
.hbm-ai-typed:empty::before{content:"Ask anything";color:#666}
.hbm-ai-caret{width:1.5px;height:16px;background:#ff4d16;animation:hbm-caret 1s steps(1) infinite}
.hbm-ai-phone:not([data-stage="1"]) .hbm-ai-caret{visibility:hidden}
@keyframes hbm-caret{50%{opacity:0}}
.hbm-ai-send{display:grid;place-items:center;width:28px;height:28px;margin-left:auto;border-radius:50%;background:#3a3a3a;color:#999;font-size:14px;transition:background .2s ease, color .2s ease}
.hbm-ai-phone[data-stage="1"] .hbm-ai-send{background:#fff;color:#000}
.hbm-ai-note{margin:14px 0 0;color:rgba(28,14,8,.6);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:950px){
  .hbm-ai{padding:110px 0}
  .hbm-ai-grid{grid-template-columns:1fr;gap:50px}
  .hbm-ai .svc-title,.hbm-ai .svc-title span{white-space:normal}
  .hbm-ai .svc-title{font-size:min(36px, calc((100vw - 40px) / 15.6));line-height:1.12}
  .hbm-ai .svc-lede{font-size:16px}
  .hbm-ai-phone{max-height:none;width:min(320px, 88vw)}
}
@media (prefers-reduced-motion:reduce){
  .hbm-ai-think i,.hbm-ai-caret,.hbm-ai-phone li.is-you{animation:none !important}
}