:root{
  --bg:#0f1115; --fg:#e8ebf1; --muted:#a7b0c0;
  --card:#151922; --card2:#1b2130; --brand1:#ffd100; --brand2:#ff6a00;
}
*{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,#0b0d12,#111522 60%,#0b0d12);color:var(--fg);font:16px/1.6 Inter,system-ui,sans-serif}
.hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;position:sticky;top:0;background:rgba(10,12,18,.8);backdrop-filter:saturate(150%) blur(10px);z-index:2;border-bottom:1px solid #1f2534}
.ghost{background:transparent;border:1px solid #2a3144;color:#cfd6e7;padding:8px 12px;border-radius:10px}
.hero{padding:30px 18px 10px}
.hero h1{font-size:28px;margin:8px 0}
.hero h1 span{background:linear-gradient(45deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-badge{display:inline-block;background:#161b26;border:1px solid #2a3144;padding:6px 10px;border-radius:999px;font-size:12px;color:#d4d9e8;letter-spacing:.6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:18px}
.card{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid #242c3e;border-radius:14px;overflow:hidden;cursor:pointer;transition:.2s transform}
.card:hover{transform:translateY(-2px)}
.card .thumb{height:120px;background:#202636;display:flex;align-items:end;justify-content:space-between;padding:10px}
.card .name{font-weight:700}
.tag{padding:4px 8px;border-radius:8px;font-size:12px;background:linear-gradient(45deg,var(--brand1),var(--brand2));color:#151515}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex}
.modal-card{width:100%;max-width:520px;background:#0f1420;border:1px solid #263049;border-radius:16px;padding:18px}
.field{margin:10px 0} .field input,.field select{width:100%;padding:10px;border-radius:10px;border:1px solid #29324a;background:#121729;color:#e9eefc}
.paybox{border:1px dashed #2c3957;border-radius:12px;padding:10px;margin:10px 0}
.payopts{display:flex;gap:16px}
.primary{background:linear-gradient(90deg,var(--brand1),var(--brand2));border:0;color:#111;padding:12px 14px;border-radius:12px;font-weight:800;cursor:pointer}
.tiny{color:var(--muted);font-size:12px}
.checkout img{width:220px;background:white;padding:10px;border-radius:10px}
.close{float:right;background:#13192a;color:#cbd3ea;border:1px solid #2a3657;border-radius:10px;padding:6px 10px;cursor:pointer}
.ftr{padding:40px 18px;color:#9aa5bf;text-align:center}