/* ============================================================
   Appomatic — sections
   ============================================================ */

/* ---------------- HERO ---------------- */
.hero{padding-top:160px;padding-bottom:96px}
.hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(40px,5vw,80px);align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  color:var(--text-2);
  padding:7px 7px 7px 14px;border-radius:999px;
  border:1px solid var(--border);background:rgba(0,0,0,.02);
  margin-bottom:30px;
}
.hero-badge .tag{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:4px 9px;border-radius:999px;
}
.hero h1{margin-bottom:24px}
.hero h1 .accent{color:var(--accent)}
.hero-lede{max-width:30em;margin-bottom:36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:54px}

.stats{display:flex;gap:clamp(28px,4vw,52px);flex-wrap:wrap}
.stat .num{font-size:clamp(30px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .num .u{color:var(--accent)}
.stat .lbl{font-size:13px;color:var(--text-3);margin-top:7px;letter-spacing:.01em}

/* ---------------- WORKFLOW DIAGRAM ---------------- */
.diagram{
  position:relative;width:100%;max-width:540px;margin-inline:auto;
  aspect-ratio:540/600;
}
.diagram svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wire{fill:none;stroke:rgba(0,0,0,.13);stroke-width:1.5}
.wire-flow{
  fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-dasharray:5 11;stroke-linecap:round;opacity:.85;
  animation:wireflow 1.1s linear infinite;
}
@keyframes wireflow{to{stroke-dashoffset:-32}}
.particle{fill:var(--accent)}
.particle.dim{fill:#000;opacity:.3}

.node{
  position:absolute;transform:translate(-50%,-50%);
  width:var(--nw,210px);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);border-radius:16px;
  padding:15px 16px;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
  transition:border-color .4s,transform .4s var(--ease);
}
.node .nrow{display:flex;align-items:center;gap:11px}
.node .nico{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:grid;place-items:center;
  background:rgba(0,0,0,.05);border:1px solid var(--border);
}
.node .nico svg{width:19px;height:19px}
.node .ntitle{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.node .nsub{font-family:var(--mono);font-size:11px;color:var(--text-3);margin-top:3px;letter-spacing:.01em}
.node .ntag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:9px;display:block;
}

/* node positions (within 540x600 box, % of box) */
.node-req{left:50%;top:11%;--nw:230px}
.node-engine{left:50%;top:48%;--nw:262px}
.node-app{left:25%;top:87%;--nw:198px}
.node-auto{left:75%;top:87%;--nw:198px}

/* engine = hero node */
.node-engine{
  border-color:var(--accent-line);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(var(--accent-rgb),.16), transparent 60%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:0 0 0 1px var(--accent-line),0 30px 60px -26px rgba(var(--accent-rgb),.5),0 24px 50px -28px rgba(0,0,0,.9);
}
.node-engine .ehead{display:flex;align-items:center;gap:12px}
.node-engine .elogo{
  width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.12);border:1px solid var(--accent-line);
}
.node-engine .elogo img{height:20px;width:auto}
.node-engine .etitle{font-size:16px;font-weight:800;letter-spacing:-.02em}
.node-engine .esub{font-family:var(--mono);font-size:10.5px;color:var(--accent);letter-spacing:.06em;margin-top:2px}
.node-engine .ebar{
  margin-top:12px;height:6px;border-radius:4px;overflow:hidden;
  background:rgba(0,0,0,.06);position:relative;
}
.node-engine .ebar i{
  position:absolute;inset:0;width:40%;border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:engbar 2.4s var(--ease) infinite;
}
@keyframes engbar{0%{left:-45%}100%{left:105%}}
.node-engine .echips{display:flex;gap:6px;margin-top:11px}
.node-engine .echips span{
  font-family:var(--mono);font-size:9.5px;color:var(--text-2);
  padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.04);border:1px solid var(--border);
}

.diagram-float{
  position:absolute;right:-6px;top:30%;transform:translateY(-50%);
  font-family:var(--mono);font-size:10.5px;color:var(--text-3);
  display:flex;align-items:center;gap:7px;
}
.diagram .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}70%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-visual{order:2}
  .hero-copy{order:1}
}
@media (max-width:560px){
  .hero{padding-top:128px}
  .node-req{--nw:210px}
  .node-engine{--nw:240px}
  .node-app,.node-auto{--nw:150px;padding:12px}
  .node .nsub{display:none}
  .stats{gap:24px}
}