/* Mobile-first neon theme, safe spacing, capped images */
:root{
  --bg1:#1b1d22; --bg2:#0f1116;
  --card:#12141a; --border:#23262f;
  --text:#e8eaed; --muted:#9aa0a6;
  --neon1:#6ee7b7; --neon2:#60a5fa; --accent:#9b8cff;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--text);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:980px;margin:auto;padding:16px}
img{max-width:100%;height:auto;display:block}

/* Nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(15,17,22,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:900}
.brand span{background:linear-gradient(90deg,var(--neon1),var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Sections */
.section{padding:24px 0}
.section.alt{background:#101218}
.hero .lead{font-size:18px;margin:8px 0 12px}

/* Neon headers */
.neon span{position:relative;background:linear-gradient(90deg,var(--neon1),var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent}
.neon span:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:linear-gradient(90deg,var(--neon1),var(--neon2));box-shadow:0 0 10px var(--neon1),0 0 14px var(--neon2)}

/* Buttons */
.btn{border:none;border-radius:10px;padding:12px 16px;font-weight:800;cursor:pointer}
.cta{color:#0b0c10;background:linear-gradient(90deg,var(--neon1),var(--neon2))}
.btn.big{font-size:18px}
.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* Builder */
.builder{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-top:12px}
.label{display:block;font-weight:600;margin:6px 0}
.input{width:100%;background:#0c0f15;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px}
.input:focus{outline:2px solid var(--neon1);border-color:transparent}
.terminal{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;background:#0b0d12;border:1px solid var(--border);border-radius:10px;padding:10px;margin-top:10px;height:160px;overflow:auto;white-space:pre-wrap}
.progress{height:8px;background:#0b0d12;border:1px solid var(--border);border-radius:999px;margin-top:10px;overflow:hidden}
.bar{height:100%;width:0;background:linear-gradient(90deg,var(--neon1),var(--neon2))}

/* Demo card */
.hidden{display:none}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 24px rgba(0,0,0,.35);padding:14px;margin-top:12px}
.demo-hero{background:linear-gradient(180deg,#0f1116,#0c0f15);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.demo-body .check{margin:0;padding-left:18px}
.demo-body .check li{margin:6px 0}

/* Explainer */
.steps{margin:0;padding-left:18px}
.steps li{margin:8px 0}

/* Form */
.form{display:grid;gap:10px;margin-top:10px}
textarea{min-height:110px}
.muted{color:var(--muted)} .tiny{font-size:12px}

/* Footer */
.footer{border-top:1px solid var(--border);padding:14px 0;opacity:.9}