:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(15, 28, 48, .88);
  --panel2: #0d1a2c;
  --text: #edf4ff;
  --muted: #9eb0c8;
  --line: rgba(255,255,255,.10);
  --accent: #59d0ff;
  --accent2: #9b7bff;
  --good: #67e8a5;
  --warn: #ffd36a;
  --bad: #ff7c8e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% -10%, rgba(89,208,255,.18), transparent 34rem),
    radial-gradient(circle at 90% 0%, rgba(155,123,255,.15), transparent 32rem),
    var(--bg);
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
.page { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 50px; }
.hero { padding: 34px 0 30px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.08em; font-size:.82rem; color:#dceaff; }
.mark {
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color:#06101b; font-size:1.1rem;
}
h1 { margin:24px 0 14px; max-width:820px; font-size:clamp(2.5rem,7vw,5.7rem); line-height:.96; letter-spacing:-.055em; }
.lead { max-width:780px; color:var(--muted); font-size:1.12rem; line-height:1.75; }
.trust { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.trust span { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:#cfddf0; font-size:.9rem; }
.grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:22px; align-items:start; }
.card {
  border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg,rgba(18,34,58,.94),rgba(11,24,42,.94));
  box-shadow:0 28px 90px rgba(0,0,0,.23); padding:26px;
}
.eyebrow { color:var(--accent); letter-spacing:.16em; font-weight:800; font-size:.72rem; }
h2 { margin:8px 0 22px; font-size:1.55rem; }
label { display:grid; gap:8px; margin-bottom:16px; color:#dce8f8; font-size:.92rem; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
input, select, textarea {
  width:100%; border:1px solid var(--line); border-radius:13px; background:#091523; color:var(--text);
  padding:12px 13px; outline:none; transition:.16s border-color,.16s box-shadow;
}
input:focus, select:focus, textarea:focus { border-color:rgba(89,208,255,.65); box-shadow:0 0 0 3px rgba(89,208,255,.11); }
textarea { resize:vertical; }
button, .pay-link {
  border:0; border-radius:13px; padding:13px 16px; font-weight:800; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),#72f1c4); color:#06111c;
}
button:disabled { opacity:.55; cursor:wait; }
.secondary { background:#15263e; color:#dceaff; border:1px solid var(--line); }
.hint { margin:-5px 0 18px; color:var(--muted); font-size:.82rem; line-height:1.55; }
.message { margin-top:14px; padding:12px 14px; border-radius:12px; font-size:.9rem; line-height:1.55; }
.message.ok { background:rgba(103,232,165,.10); color:#b7ffd4; border:1px solid rgba(103,232,165,.25); }
.message.error { background:rgba(255,124,142,.09); color:#ffd0d7; border:1px solid rgba(255,124,142,.23); }
.side ol { display:grid; gap:18px; margin:0; padding-left:22px; }
.side li { color:#dbe7f7; padding-left:5px; }
.side li span { display:block; color:var(--muted); margin-top:5px; line-height:1.55; font-size:.9rem; }
.statusbox { margin-top:24px; padding:16px; border-radius:16px; background:#091523; border:1px solid var(--line); display:grid; gap:7px; }
.statusbox span { color:var(--muted); }
.statusbox .ready { color:var(--good); }
.statusbox .pending { color:var(--warn); }
.status-card { margin-top:22px; }
.status-line { display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid var(--line); }
.status-line span { color:var(--muted); }
.status-card .pay-link, .status-card button { margin-top:18px; margin-right:10px; }
footer { text-align:center; color:#72869f; font-size:.8rem; padding:28px 0 0; }
[hidden] { display:none !important; }
@media (max-width: 840px) {
  .grid { grid-template-columns:1fr; }
  .row { grid-template-columns:1fr; gap:0; }
  .page { width:min(100% - 20px, 720px); padding-top:20px; }
  .card { padding:20px; border-radius:19px; }
}