.guide-hero{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border-bottom:1px solid var(--color-border);
  background:linear-gradient(180deg,var(--color-bg),var(--color-panel-alt));
}
.guide-hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  min-height:560px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:76px;
  padding-bottom:76px;
  text-align:center;
}
.guide-title{
  margin-top:20px;
  font-size:clamp(52px,6vw,72px);
}
.guide-lead{
  max-width:720px;
  margin-top:20px;
  color:var(--color-muted);
  font-size:clamp(17px,2vw,20px);
}
.guide-actions{
  justify-content:center;
  margin-top:28px;
}
.guide-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top:22px;
  color:var(--color-muted);
  font-size:14px;
}
.guide-facts span{
  display:inline-flex;
  align-items:center;
}
.guide-facts span+span::before{
  content:"·";
  margin-inline:12px;
  color:var(--color-border);
  font-weight:800;
}
.guide-atmosphere{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.guide-atmosphere::before{
  content:"";
  position:absolute;
  top:8%;
  left:50%;
  width:620px;
  height:420px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,var(--color-glow-blue),transparent 68%);
  filter:blur(18px);
}
.guide-orbit{
  position:absolute;
  left:50%;
  border:1px solid var(--color-border);
  border-radius:50%;
  transform:translateX(-50%);
}
.guide-orbit.orbit-a{
  top:92px;
  width:760px;
  height:360px;
}
.guide-orbit.orbit-b{
  top:142px;
  width:590px;
  height:260px;
}
.guide-route-line{
  position:absolute;
  bottom:72px;
  left:12%;
  right:12%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--color-border),var(--color-accent),var(--color-border),transparent);
}
.guide-route-node{
  position:absolute;
  bottom:64px;
  width:18px;
  height:18px;
  border:1px solid var(--color-accent);
  border-radius:50%;
  background:var(--color-panel);
  box-shadow:0 0 24px var(--color-halo);
}
.guide-route-node::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:var(--color-accent-dark);
}
.guide-route-node.node-a{left:20%}
.guide-route-node.node-b{left:40%}
.guide-route-node.node-c{right:40%}
.guide-route-node.node-d{right:20%}
.guide-document{
  background:var(--color-bg);
}
.guide-article{
  position:relative;
  max-width:100%;
}
.guide-article>.callout{
  margin-top:0;
  margin-bottom:52px;
}
.guide-stage{
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:24px;
  margin-top:0;
  padding-top:24px;
  padding-bottom:72px;
}
.guide-stage:last-child{
  padding-bottom:0;
}
.stage-rail{
  position:relative;
  display:flex;
  justify-content:center;
}
.stage-rail::after{
  content:"";
  position:absolute;
  top:23px;
  bottom:-72px;
  width:1px;
  background:var(--color-border);
}
.guide-stage:last-child .stage-rail::after{
  display:none;
}
.stage-rail span{
  position:relative;
  z-index:1;
  width:18px;
  height:18px;
  margin-top:5px;
  border:1px solid var(--color-accent);
  border-radius:50%;
  background:var(--color-panel);
  box-shadow:0 0 0 7px var(--color-bg),0 0 20px var(--color-halo);
}
.stage-rail span::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:var(--color-accent-dark);
}
.stage-copy{
  min-width:0;
}
.stage-code{
  display:block;
  margin-bottom:10px;
  color:var(--color-accent);
  font:750 12px/1.4 var(--font-mono);
  letter-spacing:.1em;
}
.stage-copy h2{
  margin-top:0;
  font-size:clamp(29px,4vw,42px);
}
.stage-copy h2+p{
  margin-top:20px;
}
.stage-copy p{
  color:var(--color-text);
}
.stage-copy p+p{
  margin-top:18px;
}
.stage-copy pre{
  margin-top:20px;
  margin-bottom:20px;
}
.stage-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.platform-guide{
  margin-top:24px;
  padding:24px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}
.platform-guide+.platform-guide{
  margin-top:16px;
}
.platform-guide h3{
  margin-top:0;
  color:var(--color-accent-dark);
  font-size:22px;
}
.platform-guide h3+p{
  margin-top:10px;
}
.stage-copy>.callout{
  margin-top:28px;
}
@media (max-width:768px){
  .guide-hero,
  .guide-hero-inner{
    min-height:510px;
  }
  .guide-hero-inner{
    padding-top:64px;
    padding-bottom:76px;
  }
  .guide-title{
    font-size:clamp(34px,10vw,40px);
  }
  .guide-orbit.orbit-a{
    top:112px;
    width:620px;
    height:320px;
  }
  .guide-orbit.orbit-b{
    top:158px;
    width:470px;
    height:230px;
  }
  .guide-route-line{
    left:6%;
    right:6%;
    bottom:54px;
  }
  .guide-route-node{
    bottom:46px;
  }
  .guide-stage{
    grid-template-columns:32px minmax(0,1fr);
    gap:14px;
    padding-bottom:58px;
  }
  .stage-rail::after{
    bottom:-58px;
  }
  .platform-guide{
    padding:20px;
  }
}
@media (max-width:640px){
  .guide-hero,
  .guide-hero-inner{
    min-height:500px;
  }
  .guide-hero-inner{
    padding-top:54px;
    padding-bottom:70px;
  }
  .guide-facts{
    gap:6px 14px;
  }
  .guide-facts span+span::before{
    display:none;
  }
  .guide-atmosphere::before{
    width:420px;
    height:340px;
  }
  .guide-route-node.node-a{left:10%}
  .guide-route-node.node-b{left:36%}
  .guide-route-node.node-c{right:36%}
  .guide-route-node.node-d{right:10%}
  .guide-stage{
    grid-template-columns:24px minmax(0,1fr);
    gap:12px;
  }
  .stage-rail span{
    width:14px;
    height:14px;
    margin-top:7px;
    box-shadow:0 0 0 5px var(--color-bg),0 0 16px var(--color-halo);
  }
  .stage-rail span::after{
    inset:4px;
  }
  .stage-rail::after{
    top:22px;
  }
  .stage-code{
    font-size:11px;
  }
  .stage-copy h2{
    font-size:clamp(27px,8vw,34px);
  }
  .platform-guide{
    padding:18px;
  }
  .stage-actions{
    align-items:stretch;
    flex-direction:column;
  }
}
@media (prefers-reduced-motion:reduce){
  .guide-atmosphere{
    transform:none;
  }
}