:root{--navy:#0b1f3a;--accent:#1f8a70;--bg:#0e1116;--panel:#151a22;--text:#e6edf3;--muted:#9aa7b4}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid #222b36}
.brand{font-weight:800;font-size:22px;letter-spacing:.5px}.brand span{color:var(--accent)}
.nav nav a{color:var(--muted);text-decoration:none;margin-left:20px}.nav nav a:hover{color:var(--text)}
.hero{max-width:900px;margin:0 auto;padding:70px 28px 40px;text-align:center}
.hero h1{font-size:40px;margin:0 0 16px;color:#fff}.lede{color:var(--muted);font-size:18px;max-width:680px;margin:0 auto 28px}
.cta{display:inline-block;background:var(--accent);color:#fff;padding:14px 26px;border-radius:8px;text-decoration:none;font-weight:600}
.badges{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.badge{background:var(--panel);border:1px solid #222b36;border-radius:10px;padding:16px 20px;min-width:180px}
.badge b{display:block;color:#fff}.badge span{color:var(--muted);font-size:13px}
.how{max-width:800px;margin:20px auto;padding:20px 28px}.how h2{color:#fff}
.panel{max-width:640px;margin:30px auto;background:var(--panel);border:1px solid #222b36;border-radius:12px;padding:28px}
.panel h1{margin-top:0;color:#fff}.panel h3{color:var(--accent);margin:22px 0 8px;border-top:1px solid #222b36;padding-top:16px}
label{display:block;margin:12px 0;color:var(--muted)}label.chk{display:flex;align-items:center;gap:8px}
input,select{width:100%;margin-top:6px;padding:10px;background:#0e1116;border:1px solid #2a3644;border-radius:6px;color:var(--text)}
label.chk input{width:auto;margin:0}
button{background:var(--accent);color:#fff;border:0;padding:11px 20px;border-radius:7px;font-weight:600;cursor:pointer;margin-top:10px}
button:hover{filter:brightness(1.1)}.out{margin-top:14px;font-family:monospace;font-size:13px;white-space:pre-wrap;color:var(--muted)}
.warn{background:#3a1f1f;border:1px solid #7a3a3a;color:#ffb4b4;padding:10px;border-radius:6px}
.tiles{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
.tile{background:#0e1116;border:1px solid #222b36;border-radius:10px;padding:16px}
.tile h4{margin:0 0 8px;color:#fff}.tile .fail{color:#ff8080}.tile .pass{color:#7ee0b8}
footer{text-align:center;color:var(--muted);padding:40px;border-top:1px solid #222b36;margin-top:40px}

/* landing */
.navcta{background:var(--accent);padding:8px 16px;border-radius:6px;color:#fff!important}
.hero .tag{color:var(--accent);letter-spacing:2px;font-size:12px;font-weight:700;margin-bottom:14px}
.statline{display:flex;gap:28px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.statline div{text-align:center}.statline b{display:block;color:#fff;font-size:15px}.statline span{color:var(--muted);font-size:12px}
.band{max-width:1000px;margin:0 auto;padding:64px 28px}.band.alt{background:var(--panel);max-width:none}
.band.alt>*{max-width:1000px;margin-left:auto;margin-right:auto}
.band h2{color:#fff;font-size:26px;text-align:center;margin-bottom:32px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--panel);border:1px solid #222b36;border-radius:12px;padding:24px}
.band.alt .card{background:var(--bg)}
.card h3{color:var(--accent);margin:0 0 10px}.card p{color:var(--muted);margin:0}
.steps{max-width:760px;margin:0 auto;color:var(--muted);line-height:2}.steps b{color:#fff}
.center{text-align:center;margin-top:28px}.center.lede,p.center{color:var(--muted)}
.price{text-align:center}.price .big{color:#fff;font-size:30px;font-weight:800;margin:10px 0}
.price span{color:var(--muted);font-size:13px}.price.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 640px) {
  .nav { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .nav nav a { margin-left: 12px; }
  .hero { padding: 40px 18px 30px; }
  .hero h1 { font-size: 28px; }
  .lede { font-size: 15px; }
  .statline { gap: 16px; }
  .statline div { min-width: 120px; }
  .band { padding: 40px 18px; }
  .band h2 { font-size: 21px; }
  .grid { grid-template-columns: 1fr; }
  .steps { line-height: 1.8; }
  .panel { margin: 16px; padding: 18px; }
  .panel h1 { font-size: 22px; }
  input, select, button { font-size: 16px; }
  .cta, .navcta { display: inline-block; }
}

/* ===== MOBILE NAV FIX ===== */
@media (max-width: 640px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; width: 100%; }
  .nav nav a { margin-left: 0; white-space: nowrap; }
  .nav .navcta { padding: 8px 14px; white-space: nowrap; }
}