/* Hero Flow: scattered business signals connect into one operating system, then work moves out. */
.hf{
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wait:#ff8a6a;
  position:relative;width:100%;aspect-ratio:1/1.08;max-height:680px;
  display:flex;flex-direction:column;padding:22px 22px 20px;
  border-radius:28px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0f1216,#06070a 70%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 50px 120px -40px rgba(0,0,0,.8);
}
/* faint blueprint grid, fades toward the bottom */
.hf:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:32px 32px;mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 85%)}

/* header */
.hf-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hf-t{font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hf-right{display:flex;align-items:center;gap:12px}
.hf-live{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;
  font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text2);
  border:1px solid var(--line2);background:rgba(255,255,255,.03);transition:color .6s,border-color .6s,background .6s}
.hf-live i{width:6px;height:6px;border-radius:50%;background:var(--wait);transition:background .6s,box-shadow .6s}
.hf-live.on{color:var(--accent);border-color:rgba(205,244,107,.35);background:rgba(205,244,107,.06)}
.hf-live.on i{background:var(--accent);box-shadow:0 0 10px rgba(205,244,107,.6)}
.hf-replay{font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--muted);background:none;border:0;
  border-bottom:1px solid var(--line2);padding:2px 0;cursor:pointer}
.hf-replay:hover{color:var(--text);border-color:var(--accent)}
.hf-replay[hidden]{display:none}

/* stage: signals on top, rail in the middle, work rows at the bottom */
.hf-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding-top:18px}
.hf-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hf-wire{fill:none;stroke:rgba(205,244,107,.32);stroke-width:1.2}
.hf-wire.cold{stroke:rgba(255,255,255,.12)}
.hf-spine{fill:none;stroke:rgba(205,244,107,.4);stroke-width:1.2}
.hf-pulse{fill:var(--accent);filter:drop-shadow(0 0 5px rgba(205,244,107,.9));opacity:0}

/* signals */
.hf-sig{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 10px;padding:0 6px}
.hf-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 11px;border-radius:99px;
  background:#12161a;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 26px -12px rgba(0,0,0,.8);
  font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text2);white-space:nowrap;
  will-change:transform;transition:border-color .5s,color .5s,background .5s}
.hf-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.hf-chip b{width:6px;height:6px;border-radius:50%;background:var(--wait);flex:none;transition:background .5s,box-shadow .5s}
.hf-chip.on{border-color:rgba(205,244,107,.4);color:var(--text);background:linear-gradient(160deg,#151a10,#0e110b)}
.hf-chip.on b{background:var(--accent);box-shadow:0 0 8px rgba(205,244,107,.7)}

/* the operating system rail */
.hf-rail{position:relative;z-index:1;height:66px;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;
  background:linear-gradient(90deg,rgba(205,244,107,.03),rgba(205,244,107,.07) 50%,rgba(205,244,107,.03));
  border:1px solid rgba(205,244,107,.16);transition:border-color .6s,box-shadow .6s}
.hf-rail.on{border-color:rgba(205,244,107,.5);box-shadow:0 0 0 1px rgba(205,244,107,.08),0 18px 50px -20px rgba(205,244,107,.35)}
.hf-rail small{font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .6s}
.hf-rail.on small{color:var(--accent)}
.hf-rail em{font:italic 400 24px "Instrument Serif",Georgia,serif;letter-spacing:-.01em;color:var(--text2);white-space:nowrap}
.hf-rail .hf-scan{position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(205,244,107,.22),transparent)}
.hf-rail:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(205,244,107,.7),transparent);opacity:0;transition:opacity .6s}
.hf-rail.on:after{opacity:1}

/* work moving out */
.hf-out{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hf-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;height:46px;padding:0 14px 0 12px;
  border-radius:12px;background:rgba(14,17,20,.9);border:1px solid rgba(255,255,255,.08)}
.hf-row .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0a0c0a}
.hf-row .ic svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hf-row .tx{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-row .tx span{color:var(--muted)}
.hf-row .st{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* tablet: the hero stacks, keep the visual from getting too tall */
@media(max-width:1000px){.hf{aspect-ratio:4/3;max-height:560px}}

/* phone */
@media(max-width:560px){
  .hf{aspect-ratio:auto;height:470px;max-height:none;padding:16px 14px 14px;border-radius:22px}
  .hf-t{display:none}
  .hf-head{justify-content:flex-start}
  .hf-right{width:100%;justify-content:space-between;flex-direction:row-reverse}
  .hf-stage{padding-top:14px}
  .hf-sig{gap:7px}
  .hf-chip{height:29px;padding:0 10px 0 9px;gap:6px;font-size:10.5px;letter-spacing:.05em}
  .hf-chip svg{width:12px;height:12px}
  .hf-rail{height:54px;padding:0 14px;border-radius:14px}
  .hf-rail small{font-size:9.5px;letter-spacing:.12em}
  .hf-rail em{font-size:19px}
  .hf-out{gap:6px}
  .hf-row{height:40px;gap:10px;padding:0 10px}
  .hf-row .ic{width:20px;height:20px}
  .hf-row .tx{font-size:12.5px}
  .hf-row .st{font-size:9.5px;letter-spacing:.08em}
}

/* reduced motion: the finished picture, no color fades */
@media(prefers-reduced-motion:reduce){.hf,.hf *,.hf *:after{transition:none!important}}