/* =========================================================
   HUMANBOTS — STARTUPS PAGE ONLY
   Loads after global.css and service.css. Everything except
   the hero visual comes from service.css (problem cards, card
   grid + drawings, comparison table, quote, capability cards,
   4-step strip, orange block, inline CTAs).
========================================================= */

.hst-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}
.hst-path{margin-top:22px;color:#666;font-size:11px}
.hst-path::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:9px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 10px rgba(255,77,22,.5);
}

/* "your startup" card with five modules around it */
.hst-visual{position:relative;height:580px}
.hst-visual > i{
  position:absolute;
  left:50%;
  top:50%;
  width:225px;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,77,22,.45), rgba(255,77,22,.02));
}
.hst-visual > i:nth-of-type(1){rotate:-145deg}
.hst-visual > i:nth-of-type(2){rotate:-35deg}
.hst-visual > i:nth-of-type(3){rotate:145deg}
.hst-visual > i:nth-of-type(4){rotate:35deg}

.hst-core{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:270px;
  height:300px;
  translate:-50% -50%;
  padding:26px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:radial-gradient(circle at 70% 12%, rgba(255,77,22,.08), transparent 34%), linear-gradient(145deg, #111, #050505);
  box-shadow:0 40px 110px rgba(0,0,0,.55);
}
.hst-core > .svc-mono{color:var(--orange);text-transform:uppercase}
.hst-core strong{
  display:block;
  margin:14px 0 8px;
  color:#f0f0f0;
  font-family:var(--font-display);
  font-size:28px;
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.045em;
}
.hst-core strong span{color:var(--grey-head)}
.hst-core p{color:var(--dim);font-size:13px;line-height:1.55}
.hst-track{position:absolute;left:26px;right:26px;bottom:26px;color:#555;text-transform:uppercase}
.hst-track span{display:flex;justify-content:space-between;margin-bottom:9px;font-size:9px}
.hst-track em{font-style:normal}
.hst-track b{
  display:block;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--orange) 74%, rgba(255,255,255,.08) 74%);
  box-shadow:0 0 12px rgba(255,77,22,.25);
}

.hst-mod{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9px;
  width:160px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(10,10,10,.92);
  box-shadow:0 20px 50px rgba(0,0,0,.32);
  opacity:0;
  transform:translateY(16px) scale(.94);
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.is-in .hst-mod{opacity:1;transform:none}
.hst-mod .svc-icon{width:32px;height:32px;border-radius:9px;flex:none}
.hst-mod .svc-icon svg{width:15px;height:15px}
.hst-mod strong{display:block;color:#e8e8e8;font-size:13px;font-weight:500}
.hst-mod small{display:block;margin-top:2px;color:#666;font-size:11px}
/* modules sit above and below the card so they never cover its text */
.hst-mod.m1{left:0;top:20px;transition-delay:.3s}
.hst-mod.m2{right:0;top:55px;transition-delay:.4s}
.hst-mod.m3{left:0;bottom:70px;transition-delay:.5s}
.hst-mod.m4{right:0;bottom:50px;transition-delay:.6s}
.hst-mod.m5{left:50%;bottom:0;margin-left:-80px;transition-delay:.7s}

@media (max-width:1050px){
  .hst-hero-grid{grid-template-columns:1fr;gap:40px}
  .hst-visual{max-width:620px;width:100%;margin:0 auto}
}

@media (max-width:650px){
  .hst-visual{height:500px}
  .hst-visual > i{width:170px}
  .hst-core{width:220px;height:250px;padding:18px}
  .hst-core strong{font-size:22px}
  .hst-core p{font-size:11px}
  .hst-track{left:20px;right:20px;bottom:20px}
  .hst-mod{width:130px;padding:8px;gap:6px}
  .hst-mod .svc-icon{width:24px;height:24px;border-radius:7px}
  .hst-mod .svc-icon svg{width:12px;height:12px}
  .hst-mod strong{font-size:10px}
  .hst-mod small{font-size:9px}
  .hst-mod.m1{top:10px}
  .hst-mod.m2{top:52px}
  .hst-mod.m3{bottom:58px}
  .hst-mod.m4{bottom:58px}
  .hst-mod.m5{margin-left:-65px}
}