/* ============================================================
   MIKEY & MACHINE — Hero "The Machine"
   Split layout · animated workflow graph + count-up stats
   · living constellation field behind it
   ============================================================ */

.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;
  padding-top:74px;
  background:
    radial-gradient(820px 600px at 100% 2%,rgba(31,143,255,.16),transparent 58%),
    radial-gradient(900px 620px at 0% 108%,rgba(31,143,255,.07),transparent 55%),
    var(--bg);}

.herovar.hero-c{flex:1;display:flex;}

/* constellation canvas — drifting node field behind everything */
.hero-constellation{position:absolute;inset:0;z-index:0;opacity:.8;pointer-events:none;
  mask-image:radial-gradient(120% 100% at 50% 38%,#000 32%,transparent 82%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 38%,#000 32%,transparent 82%);}

/* faint grid sits above the constellation, below content */
.hero .gridfield{z-index:1;}

/* shared blue pulse dot */
.pulsedot{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);
  box-shadow:0 0 0 4px rgba(70,166,255,.16);animation:mmPulse 2s infinite;}
@keyframes mmPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* gradient ink treatments */
.ink-glow{background:linear-gradient(180deg,#cfe6ff,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ink-chrome{background:linear-gradient(180deg,#ffffff 14%,#c4cedb 60%,#8c97a6);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* =====================================================
   THE MACHINE — split, workflow graph + stats
   ===================================================== */
.hc-wrap{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1fr 1.02fr;gap:48px;
  align-items:center;max-width:var(--maxw);margin:0 auto;padding:40px 28px 60px;width:100%;}
.hc-left h1{font-size:clamp(40px,5vw,60px);color:#fff;margin:0 0 22px;text-wrap:balance;}
.hc-sub{font-size:19px;color:var(--muted);max-width:42ch;margin:0 0 30px;text-wrap:pretty;}
.hc-btns{display:flex;gap:13px;align-items:center;margin-bottom:34px;flex-wrap:wrap;}
.hc-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hc-stat .n{font-family:var(--display);font-weight:600;font-size:34px;color:#fff;letter-spacing:-.02em;}
.hc-stat .n .u{color:var(--blue-bright);}
.hc-stat .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;margin-top:3px;}
.hc-note{font-size:13.5px;color:var(--faint);margin:22px 0 0;max-width:46ch;}

.panel{position:relative;border-radius:var(--r-lg);border:1px solid var(--line-blue);
  background:linear-gradient(180deg,rgba(14,19,28,.95),rgba(9,12,19,.97));padding:24px 26px 22px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 70px -34px var(--blue-glow);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.panel-head .live{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--good-bright);display:flex;gap:7px;align-items:center;flex:none;}
.panel-head .live i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:mmPulse 1.4s infinite;}

/* view tabs */
.panel-tabs{display:flex;gap:3px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:9px;padding:3px;}
.ptab{display:flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  color:var(--muted);background:none;border:0;padding:6px 11px;border-radius:6px;cursor:pointer;transition:.15s;}
.ptab svg{width:13px;height:13px;}
.ptab:hover{color:#fff;}
.ptab.active{background:rgba(70,166,255,.15);color:var(--blue-bright);}

/* two-view body — workflow defines height, agent overlays + cross-fades */
.panel-body{position:relative;}
.pview{transition:opacity .5s ease;}
.pview-workflow{display:flex;flex-direction:column;}
.pview-agent{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;}
.panel[data-view="agent"] .pview-agent{opacity:1;pointer-events:auto;}
.panel[data-view="agent"] .pview-workflow{opacity:0;pointer-events:none;}
.pview-main{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.pview-agent .pview-main{align-items:stretch;overflow:hidden;}

.graph{width:100%;height:auto;display:block;}
.graph .edge{stroke:rgba(70,166,255,.26);stroke-width:1.6;fill:none;}
.graph .flow{stroke:var(--blue-bright);stroke-width:2.2;fill:none;stroke-dasharray:10 90;
  filter:drop-shadow(0 0 5px rgba(70,166,255,.9));animation:hcFlow 2.4s linear infinite;}
@keyframes hcFlow{to{stroke-dashoffset:-100}}
.graph .node rect{fill:rgba(20,26,37,.95);stroke:rgba(255,255,255,.1);}
.graph .node.ai rect{stroke:rgba(70,166,255,.55);fill:rgba(18,32,54,.95);}
.graph .node .nt{font-family:var(--display);font-weight:600;font-size:14px;fill:#eaf0f8;}
.graph .node .ns{font-family:var(--mono);font-size:10.5px;fill:#8b94a3;}
.graph .node.ai .ns{fill:var(--blue-bright);}
.graph .ndot{fill:var(--good);}

/* terminal (agent view) */
.term-log{width:100%;font-family:var(--mono);font-size:13px;line-height:1.5;padding:2px 2px 0;}
.term-row{display:flex;gap:11px;padding:4px 0;animation:termIn .25s ease both;}
@keyframes termIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.term-tag{flex:none;width:26px;text-align:center;border-radius:5px;font-size:9.5px;padding:3px 0;
  font-weight:700;letter-spacing:.03em;align-self:flex-start;margin-top:1px;}
.term-row.cmd .term-tag{background:rgba(70,166,255,.16);color:var(--blue-bright);}
.term-row.mut .term-tag{background:rgba(255,255,255,.05);color:var(--muted);}
.term-row.ok  .term-tag{background:rgba(25,195,125,.16);color:var(--good-bright);}
.term-row.cmd .term-txt{color:#eaf2ff;}
.term-row.mut .term-txt{color:#aab4c2;}
.term-row.ok  .term-txt{color:#bff0d8;}
.term-txt{white-space:pre-wrap;word-break:break-word;}
.panel-foot{display:flex;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--muted);flex-wrap:wrap;}
.panel-foot b{color:#cfd7e2;}

@media (prefers-reduced-motion:reduce){
  .graph .flow{animation:none;}
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width:920px){
  .hc-wrap{grid-template-columns:1fr;gap:40px;padding-top:30px;}
  .hc-sub{max-width:46ch;}
}
@media (max-width:560px){
  .hero{padding-top:64px;}
  .hc-btns{flex-direction:column;align-items:stretch;}
  .hc-btns .btn{width:100%;justify-content:center;}
}