/* ============================================================
   Hero — animated flow: 4 inputs → 1 hub → your dashboard
   ============================================================ */

.hero{padding-top:64px;padding-bottom:88px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center;}

.hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.hero h1{font-size:clamp(46px,5.6vw,76px);letter-spacing:-.03em;line-height:1.05;}
.hero h1 .soft{color:var(--ink-2);}
.hero-sub{margin-top:52px;max-width:30em;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.hero-trust{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap;color:var(--ink-3);font-size:14px;}
.hero-trust .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2);}

/* ---- the flow panel ---- */
.flow-panel{
  position:relative;background:
    radial-gradient(120% 120% at 80% 10%,var(--surface) 0%,var(--paper-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:24px;overflow:hidden;
}
.flow-panel::before{ /* faint grid texture */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:30px 30px;mask-image:radial-gradient(120% 100% at 50% 40%,#000 30%,transparent 78%);
}
.flow-head{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:10px;}
.flow-head .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}

/* fixed coordinate stage 540x430, JS-scaled to fit its column */
.flow-wrap{position:relative;width:100%;}
.flow{position:relative;width:540px;height:430px;transform-origin:top left;margin:0 auto;}
.flow svg{position:absolute;inset:0;width:540px;height:430px;overflow:visible;}
.flow .path{fill:none;stroke:var(--line-2);stroke-width:2;}
.flow .path.warm{stroke:var(--accent);opacity:.55;}

/* input nodes */
.fnode{position:absolute;width:160px;height:60px;transform:translate(0,-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);
  display:flex;align-items:center;gap:11px;padding:0 13px;}
.fnode .ic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);flex:none;display:grid;place-items:center;color:var(--accent);}
.fnode .ic svg{width:18px;height:18px;position:static;}
.fnode .tx{line-height:1.1;}
.fnode .tx b{font-family:var(--display);font-size:14px;font-weight:700;display:block;}
.fnode .tx span{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.04em;}

/* hub */
.hub{position:absolute;left:282px;top:167px;width:96px;height:96px;border-radius:22px;
  background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;box-shadow:var(--sh-3);z-index:3;}
.hub .glyph{width:30px;height:30px;border-radius:9px;background:var(--accent);position:relative;margin:0 auto 6px;}
.hub .glyph::after{content:"";position:absolute;inset:7px;border:2px solid var(--ink);border-radius:4px;}
.hub b{font-family:var(--display);font-size:13px;letter-spacing:-.01em;}
.hub .ring{position:absolute;inset:-9px;border-radius:30px;border:1.5px solid var(--accent);opacity:0;}

/* mini dashboard out */
.flow-dash{position:absolute;left:408px;top:138px;width:150px;height:154px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);padding:11px;z-index:2;}
.flow-dash .dh{display:flex;align-items:center;gap:6px;margin-bottom:9px;}
.flow-dash .dh .d{width:6px;height:6px;border-radius:50%;background:var(--forest);}
.flow-dash .dh span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.flow-dash .drow{display:flex;align-items:center;gap:7px;padding:6px 0;border-top:1px solid var(--line);}
.flow-dash .drow .sw{width:11px;height:11px;border-radius:3px;flex:none;}
.flow-dash .drow .bar{height:6px;border-radius:3px;background:var(--line-2);flex:1;}
.flow-dash .drow .st{font-family:var(--mono);font-size:8px;color:var(--forest);}

/* travelling dots */
.dot{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 24%,transparent);offset-rotate:0deg;}
.dot.d1{offset-path:path('M165 58 C 225 58, 235 200, 284 200');}
.dot.d2{offset-path:path('M165 158 C 225 158, 245 205, 284 205');}
.dot.d3{offset-path:path('M165 268 C 225 268, 245 225, 284 225');}
.dot.d4{offset-path:path('M165 372 C 225 372, 235 232, 284 232');}
.dot.out{offset-path:path('M378 215 L 410 215');background:var(--forest);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--forest) 24%,transparent);}

@media (prefers-reduced-motion: no-preference){
  .dot{animation:travel 3.4s cubic-bezier(.55,.1,.5,1) infinite;}
  .dot.d1{animation-delay:0s;}
  .dot.d2{animation-delay:.85s;}
  .dot.d3{animation-delay:1.7s;}
  .dot.d4{animation-delay:2.55s;}
  .dot.out{animation:travelout 3.4s ease-in infinite;}
  .hub .ring{animation:hubring 3.4s ease-out infinite;}
}
@keyframes travel{
  0%{offset-distance:0%;opacity:0;}
  8%{opacity:1;}
  72%{offset-distance:100%;opacity:1;}
  82%,100%{offset-distance:100%;opacity:0;}
}
@keyframes travelout{
  0%,72%{offset-distance:0%;opacity:0;}
  76%{opacity:1;}
  96%{offset-distance:100%;opacity:1;}
  100%{offset-distance:100%;opacity:0;}
}
@keyframes hubring{
  0%,68%{opacity:0;transform:scale(.9);}
  74%{opacity:.7;transform:scale(1);}
  100%{opacity:0;transform:scale(1.15);}
}

/* reduced motion: show dots resting mid-path */
@media (prefers-reduced-motion: reduce){
  .dot.d1,.dot.d2,.dot.d3,.dot.d4{offset-distance:55%;}
  .dot.out{display:none;}
}

@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:30px;}
  .flow-panel{order:-1;}
}

/* ============================================================
   Motif switching (Tweaks): flow · diagram · dashboard
   ============================================================ */
.dash-led{display:none;}
body[data-hero="dashboard"] .flow-wrap{display:none;}
body[data-hero="dashboard"] .flow-head .ttl::after{content:" — live dashboard";}
body[data-hero="dashboard"] .dash-led{display:block;}

/* diagram: frozen blueprint, no travelling dots */
body[data-hero="diagram"] .flow > .dot{display:none;}
body[data-hero="diagram"] .flow .path{stroke:var(--accent);opacity:.55;stroke-dasharray:6 7;}
body[data-hero="diagram"] .flow .path.warm{opacity:.8;}
body[data-hero="diagram"] .hub .ring{animation:none;opacity:.5;}
body[data-hero="diagram"] .flow-head .chip.live .dot{animation:none;}

/* motion off */
body[data-motion="off"] .flow > .dot{animation:none;opacity:0;}
body[data-motion="off"] .hub .ring{animation:none;opacity:0;}
body[data-motion="off"] .chip.live .dot{animation:none;}

/* dashboard-led panel */
.dl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.dl-kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 13px;}
.dl-kpi .n{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1;}
.dl-kpi .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;display:block;}
.dl-rows{display:flex;flex-direction:column;gap:9px;}
.dl-row{display:grid;grid-template-columns:12px 1fr 90px auto;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:11px 14px;}
.dl-row .sw{width:12px;height:12px;border-radius:4px;}
.dl-row b{font-family:var(--display);font-size:14px;font-weight:600;}
.dl-row .bar{height:7px;border-radius:4px;background:var(--accent);opacity:.45;}
.dl-row .tag{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);background:var(--paper-2);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.dl-row .tag.done{color:var(--forest);background:var(--forest-soft);}