:root {
  --bg: #17191e; --bg2: #101216; --panel: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.09); --text: #e8eaee; --dim: #9aa0ab;
  --emerald: #29cc85; --azure: #479ffa; --amber: #ffb842; --slate: #9499aa;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
header { display: flex; align-items: center; gap: 10px; padding: 22px 0; }
header img { width: 34px; height: 34px; border-radius: 8px; }
header .name { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
header .spacer { flex: 1; }
.hero { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 40px 0 24px; text-align: center; }
h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
h1 .accent { color: var(--emerald); }
.sub { color: var(--dim); font-size: clamp(16px, 2.4vw, 20px); max-width: 640px; margin: 0 auto; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 14px 28px;
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #2fdd93, #1da96a);
  box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.btn.secondary { background: linear-gradient(180deg, #3a3f4d, #2a2e39); }
.price { color: var(--dim); font-size: 14px; margin-top: 10px; }
.price b { color: var(--text); }
.heroimg { border-radius: 16px; border: 1px solid var(--line); width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; padding: 34px 0; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
  border: 1px solid var(--line); border-radius: 14px; padding: 22px;
}
.card h3 { font-size: 16px; margin-bottom: 8px; }
.card p { color: var(--dim); font-size: 14px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
.honest {
  border-left: 3px solid var(--amber); background: rgba(255,184,66,.07);
  border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 20px 0 40px;
  color: var(--dim); font-size: 15px;
}
.honest b { color: var(--text); }
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--dim); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; }
footer .spacer { flex: 1; }
.key-big {
  font: 700 clamp(20px, 4.4vw, 34px)/1.2 "SF Mono", ui-monospace, monospace;
  letter-spacing: .04em; color: var(--emerald);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 28px; user-select: all;
}
.muted { color: var(--dim); font-size: 14px; }
.steps { text-align: left; max-width: 460px; margin: 0 auto; color: var(--dim); font-size: 15px; }
.steps li { margin: 8px 0; }