/* ===== Minimal styles for a clean, modern look ===== */
:root{
  --bg: #0b1020;
  --card: #111735;
  --text: #e8ecff;
  --muted: #a8b0d6;
  --brand: #7aa2ff;
  --brand-2: #8ef1d0;
  --accent: #ffd166;
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:
  radial-gradient(100% 140% at 100% 0%, #0b1020 0%, #060914 40%, #04060d 100%);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "PingFang TC", "Microsoft JhengHei", sans-serif;
}
.container{width:min(1040px, 92vw); margin-inline:auto}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-name{letter-spacing: .5px}
.nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600}
.nav a:hover, .nav a.active{color:var(--text)}
.site-header{position:sticky; top:0; backdrop-filter:saturate(120%) blur(8px); background:rgba(6,9,20,.6); border-bottom:1px solid rgba(255,255,255,.05); z-index:10}
.hero{padding:64px 0 36px}
.hero h1{font-size: clamp(28px, 4vw, 42px); line-height:1.15; margin:0 0 8px}
.hero p{color:var(--muted); margin:0 0 14px}
.cta-row{display:flex; align-items:center; gap:12px; margin:16px 0 10px}
.btn{
  appearance:none; border:0; padding:12px 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#051026; font-weight:800; letter-spacing:.2px; cursor:pointer; transition: transform .08s ease;
  box-shadow: 0 10px 26px rgba(122,162,255,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn:active{transform: translateY(1px) scale(.99)}
.msg{min-height: 1lh; color: var(--accent); font-weight:700}
.features{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; padding:12px 0; list-style:none; margin:0}
.features li{background: rgba(255,255,255,.04); padding:12px 14px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius)}
.how{padding:36px 0 64px}
.note{color:var(--muted)}
.site-footer{border-top:1px solid rgba(255,255,255,.08); padding:18px 0; background:rgba(6,9,20,.5)}
code{background:rgba(0,0,0,.35); padding:2px 6px; border-radius:8px}
@media (max-width:600px){ .nav{display:none} }