.hero {
  max-width: var(--w-lg); margin: 2rem auto 2rem; position: relative; overflow: hidden;
  border-radius: 20px; padding: 3.5rem 2.5rem; text-align: center; color: #fff;
  background: linear-gradient(120deg, var(--orange) 0 45%, var(--blue) 45% 100%);
}
.hero::before {
  content: ""; position: absolute; top: -30px; right: -24px; width: 120px; height: 120px;
  background: var(--pink); transform: rotate(45deg); opacity: 0.9;
}
.hero > * { position: relative; }
.hero h1 { margin: 0 0 0.25rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.hero h2 { margin: 0 0 1.25rem; font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.hero .lede { color: rgba(255, 255, 255, 0.95); margin-bottom: 1.6rem; }
.hero a { color: #fff; }
.hero a:hover { color: rgba(255, 255, 255, 0.8); }
.hero code { background: rgba(255, 255, 255, 0.2); color: #fff; }
.hero .cta { margin-bottom: 0; }
.hero .cta a.primary { background: var(--ink); color: #fff; }
.hero .cta a.ghost { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #fff; }

.hero .cta-note { margin: 0.75rem 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.8); }


.panel {
  max-width: var(--w-md); margin: 0 auto 2.5rem; padding: 1.25rem 1.5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.panel h3 { margin: 0 0 0.75rem; font-size: 1rem; text-align: center; color: var(--ink); }


.panel ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.panel ol > li {
  counter-increment: step; margin: 0.55rem 0; padding-left: 2rem; position: relative;
}
.panel ol > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0;
  font: 600 0.85rem 'IBM Plex Mono', ui-monospace, monospace; color: var(--orange);
}
.panel ol > li:nth-child(3n+2)::before { color: var(--blue); }
.panel ol > li:nth-child(3n)::before { color: var(--pink); }


.features ul { margin: 0; padding: 0; list-style: none; }
.features li { margin: 0.6rem 0; }
.features b { color: var(--ink); }


.faq details { margin: 0.5rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq details p { margin: 0.35rem 0 0.6rem; }