:root{
  --bg:#000;
  --bg2:#050505;
  --text:#fff;
  --line:rgba(255,255,255,.10);
  --card:rgba(0,0,0,.42);
  --radius:22px;
  --radius2:14px;
  --shadow: 0 12px 40px rgba(0,0,0,.65);
  --shadow2: 0 18px 60px rgba(0,0,0,.75);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(255,255,255,.12)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.hidden{display:none !important}

.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.container{padding:0 24px}}

.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg__grad{position:absolute;inset:0;background:linear-gradient(to bottom, #000, var(--bg2), #000)}
.bg__orb{position:absolute;left:-160px;top:-140px;width:860px;height:860px;opacity:.20}
@media(min-width:768px){.bg__orb{opacity:.26}}
.bg__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 60% 20%, rgba(255,255,255,.06), rgba(0,0,0,0) 45%),
    radial-gradient(circle at 40% 60%, rgba(255,255,255,.05), rgba(0,0,0,0) 55%);
  box-shadow: inset 0 0 160px rgba(0,0,0,.95);
}

.header{position:relative;z-index:10;padding-top:22px}
.header__inner{display:flex;align-items:center;justify-content:space-between}
.header__spacer{width:112px}
@media(min-width:640px){.header__spacer{width:160px}}
.brand{display:flex;align-items:center;justify-content:center;opacity:.95;transition:opacity .2s var(--ease)}
.brand:hover{opacity:1}
.brand__text{letter-spacing:.30em;font-size:14px}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:112px}
@media(min-width:640px){.nav{width:160px}}
.rule{height:1px;background:var(--line);margin-top:18px}

.main{position:relative;z-index:5;padding:28px 0 80px}

.stepper{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:22px}
.step{display:inline-flex;align-items:center;gap:10px}
.step__chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55);
  padding:6px 10px;border-radius:999px;
  font-size:10px;letter-spacing:.22em;
  transition:all .25s var(--ease);
}
.step__chip--active{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  color:#fff;
}
.step__chip--past{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.75);
}
.step__line{height:1px;width:32px;background:var(--line)}

.chip{
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.70);
  padding:7px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.18em;
  transition:all .22s var(--ease);
}
.chip--active{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff}

.h1{
  text-align:center;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:42px;
  margin:18px 0 0;
}
@media(min-width:640px){.h1{font-size:56px}}
@media(min-width:768px){.h1{font-size:72px}}
.subcenter{display:flex;justify-content:center;margin-top:14px}
.pillwrap{display:inline-flex;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:4px;border-radius:999px}
.pill{background:rgba(255,255,255,.10);padding:8px 14px;border-radius:999px;font-size:11px;letter-spacing:.22em}

.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:22px}
@media(min-width:768px){.grid{grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}}

.card{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card:before{
  content:"";
  position:absolute;inset:0;
  opacity:.80;
  -webkit-mask-image: radial-gradient(60% 50% at 40% 20%, #000, transparent);
  mask-image: radial-gradient(60% 50% at 40% 20%, #000, transparent);
  background: radial-gradient(circle at 30% 10%, rgba(255,255,255,.08), transparent 55%);
  pointer-events:none;
}
.card--hover:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);box-shadow: 0 0 0 1px rgba(255,255,255,.10), var(--shadow)}
.card__pad{padding:26px}
@media(min-width:640px){.card__pad{padding:34px}}

.kicker{font-size:12px;letter-spacing:.22em;color:rgba(255,255,255,.60)}
.small{font-size:12px;color:rgba(255,255,255,.60);margin-top:8px}
.section{margin-top:16px}
.section__title{font-size:12px;letter-spacing:.22em;color:rgba(255,255,255,.45)}
.list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.list li{font-size:14px;color:rgba(255,255,255,.85)}
.row{
  display:flex;align-items:flex-end;justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:14px;margin-top:12px
}
.price{font-size:18px;font-weight:600;letter-spacing:.08em}
.notice{margin-top:14px;font-size:12px;color:rgba(255,255,255,.55);line-height:1.4}
.notice strong{color:rgba(255,255,255,.70);font-weight:600}

.btn{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius2);
  padding:14px 18px;
  border:1px solid transparent;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
  user-select:none;
}
.btn:active{transform:scale(.98)}
.btn--primary{background:#fff;color:#000}
.btn--primary:hover{box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 8px 30px rgba(255,255,255,.06)}
.btn--ghost{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
  color:rgba(255,255,255,.85);
}
.btn--ghost:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.07)}

.form{margin-top:22px;display:grid;gap:16px}
@media(min-width:640px){.form{gap:18px}}
.frow{display:grid;gap:16px}
@media(min-width:640px){.frow--2{grid-template-columns:1fr 1fr}}
@media(min-width:640px){.frow--3{grid-template-columns:1fr 1fr 1fr}}
.label{font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.70)}
.input{
  margin-top:8px;
  width:100%;
  border-radius:var(--radius2);
  padding:14px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  outline:none;
  transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
  font-size:16px;
}
.input::placeholder{color:rgba(255,255,255,.35)}
.input:focus{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.05);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.error{margin-top:8px;font-size:12px;color:rgba(255,255,255,.60)}
.hint{margin-top:8px;font-size:12px;color:rgba(255,255,255,.45)}

.panel{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:18px;
}
.panel__title{font-size:12px;letter-spacing:.22em;color:rgba(255,255,255,.55)}
.panel__row{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:12px}
.panel__k{font-size:14px;color:rgba(255,255,255,.70)}
.panel__v{font-size:14px;color:#fff}

.px{display:inline-flex;align-items:center;gap:10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.30);padding:10px 14px;margin-top:12px}
.px__dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.70)}
.px__txt{font-size:12px;letter-spacing:.22em;color:rgba(255,255,255,.70)}

.qrwrap{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.30);
  padding:18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), var(--shadow2);
}
.qrbox{display:grid;place-items:center;background:#fff;border-radius:18px;border:1px solid rgba(255,255,255,.12);padding:16px}
.qrimg{width:220px;height:220px}
.codebox{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.40);
  padding:14px;
  word-break:break-all;
  font-size:12px;
  color:rgba(255,255,255,.82);
  line-height:1.5;
}

.statuspill{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  padding:8px 12px;
  font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.70);
}
.pulse{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.55);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.statuspill--ok{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.10);color:#fff}
.statuspill--ok .pulse{background:rgba(255,255,255,.85);animation:none}

.footer{position:relative;z-index:5;padding:0 0 34px}
.footer__inner{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;margin-top:18px;font-size:12px;color:rgba(255,255,255,.45)}
.footer__inner .muted{color:rgba(255,255,255,.50);text-align:center}

.toasts{position:fixed;right:16px;top:16px;z-index:50;display:flex;flex-direction:column;gap:12px;width:min(360px, calc(100vw - 32px))}
.toast{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.70);
  backdrop-filter: blur(10px);
  padding:12px 14px;
  transform:translateY(-10px);
  opacity:0;
  animation:toastIn .22s var(--ease) forwards;
}
@keyframes toastIn{to{transform:translateY(0);opacity:1}}
.toast__t{font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.70)}
.toast__d{margin-top:6px;font-size:14px;color:rgba(255,255,255,.88)}

.overlay{
  position:fixed;inset:0;display:none;place-items:center;z-index:60;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.overlay--show{display:grid}
.overlay__card{
  border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.65);
  padding:16px 18px;display:flex;align-items:center;gap:12px
}
.spinner{
  width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.80);
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay__text{font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.70)}

.fadein{animation:fadeIn .45s var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}