/* Scroll-driven sample-flow hero */
.hf{position:relative;height:360vh;border-bottom:1px solid var(--line);padding:0}
.hf-stick{position:sticky;top:0;height:100vh;min-height:620px;display:flex;flex-direction:column;overflow:hidden}
.hf-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(50% 70% at 88% 18%,color-mix(in oklab,var(--teal) 16%,transparent),transparent 62%),
  radial-gradient(40% 60% at 6% 92%,color-mix(in oklab,var(--blue) 12%,transparent),transparent 62%)}
.hf-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 75%)}
.hf-inner{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:40px}
.hf h1{font-size:clamp(34px,4.9vw,62px);letter-spacing:-.025em;line-height:1.16;margin-top:20px}
.hf h1 .hl{color:var(--teal)}
.hf .lead{margin-top:22px;font-size:18px;color:var(--muted);max-width:32em}
.hf .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hf-hint{display:flex;align-items:center;gap:10px;margin-top:36px;font-family:var(--f-mono);font-size:12px;color:var(--dim);letter-spacing:.06em}
.hf-hint i{width:1px;height:26px;background:linear-gradient(var(--teal),transparent);animation:hfDrip 1.8s ease-in-out infinite}
@keyframes hfDrip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* console panel */
.hf-panel{background:color-mix(in oklab,var(--surface) 92%,transparent);border:1px solid var(--line2);border-radius:22px;padding:24px;box-shadow:0 40px 80px -40px rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.hf-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;color:var(--dim)}
.hf-live{display:inline-flex;white-space:nowrap;align-items:center;gap:6px;color:var(--teal)}
.hf-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 var(--glow);animation:hfPulse 1.6s infinite}
@keyframes hfPulse{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 10px transparent}}

.hf-track{position:relative;margin:30px 6px 8px;height:64px}
.hf-rail{position:absolute;left:0;right:0;top:20px;height:2px;background:var(--line2);border-radius:2px}
.hf-fill{position:absolute;left:0;top:20px;height:2px;background:var(--teal);border-radius:2px;width:0;box-shadow:0 0 12px var(--glow)}
.hf-node{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:76px}
.hf-dot{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;color:var(--dim);transition:all .35s}
.hf-node.partner .hf-dot{border-style:dashed}
.hf-node span{font-size:12px;color:var(--dim);white-space:nowrap;transition:color .3s}
.hf-node.done .hf-dot{border-color:var(--teal);color:var(--teal)}
.hf-node.now .hf-dot{background:var(--teal);border-color:var(--teal);color:var(--on-teal);box-shadow:0 0 0 6px color-mix(in oklab,var(--teal) 20%,transparent)}
.hf-node.now span,.hf-node.done span{color:var(--ink)}
.hf-tube{position:absolute;top:8px;width:10px;height:26px;margin-left:-5px;border-radius:3px 3px 6px 6px;background:linear-gradient(var(--surface) 0 30%,var(--teal) 30%);border:1.5px solid var(--teal);opacity:0;transition:opacity .3s}

.hf-stage{margin-top:22px;border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:1fr auto;gap:8px 20px;min-height:150px}
.hf-stage .k{grid-column:1/-1}
.hf-stage h3{font-size:24px}
.hf-who{align-self:start;font-family:var(--f-mono);font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--teal);color:var(--teal);white-space:nowrap}
.hf-who.p{border-style:dashed;border-color:var(--line2);color:var(--muted)}
.hf-stage p{grid-column:1/-1;color:var(--muted);font-size:15.5px}
.hf-log{margin-top:16px;display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);font-size:12.5px;color:var(--dim)}
.hf-log div{display:flex;gap:12px}
.hf-log b{color:var(--teal);font-weight:500;min-width:44px}
.hf-swap{animation:hfIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes hfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hf-legend{display:flex;gap:16px;margin-top:18px;font-size:12px;color:var(--dim)}
.hf-legend span{display:inline-flex;align-items:center;gap:6px}
.hf-legend i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--teal)}
.hf-legend i.p{border-style:dashed;border-color:var(--line2)}

@media (max-width:960px){
  .hf{height:auto}
  .hf-stick{position:relative;height:auto;min-height:0}
  .hf-inner{grid-template-columns:1fr;gap:36px;padding-top:56px;padding-bottom:56px}
  .hf-hint{display:none}
}
@media (max-width:560px){
  .hf-node{width:44px}
  .hf-node span{font-size:10.5px;white-space:normal;text-align:center;line-height:1.3}
  .hf-dot{width:34px;height:34px;font-size:11px}
  .hf-track{height:80px}
  .hf-rail,.hf-fill{top:16px}
  .hf-panel{padding:18px}
}