*{box-sizing:border-box;font-family:Inter,Arial}
body.bg{
  background:radial-gradient(circle at top,#0ea5e9,#020617);
  color:white; margin:0; min-height:100vh;
}

.glass{
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(18px);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.15);
}

.hero{max-width:420px;margin:15vh auto;padding:40px;text-align:center;animation:fade .8s}

.card{padding:30px;max-width:320px;margin:auto}

input{width:100%;padding:12px;border-radius:10px;border:none;margin:8px 0;background:#020617;color:white}

button{width:100%;padding:12px;border:none;border-radius:12px;background:#0ea5e9;color:black;font-weight:700;cursor:pointer}

.btn-row{display:flex;gap:10px;justify-content:center}
.btn,.btn-outline{padding:12px 20px;border-radius:14px;text-decoration:none}
.btn{background:#0ea5e9;color:black}
.btn-outline{border:1px solid #0ea5e9;color:#0ea5e9}

.modal{display:none}
.modal:target{display:block;position:fixed;inset:0;background:#0008;display:flex;align-items:center}

footer{text-align:center;margin-top:40px;opacity:.7}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
}

.offer{
  padding:14px;
  text-align:center;
  transition:.25s;
}

.offer:hover{
  transform:translateY(-4px);
  box-shadow:0 0 25px #0ea5e955;
}

.panel{display:flex;height:100vh}
aside{width:200px;padding:20px;background:#020617}
aside button{margin:8px 0}
main{flex:1;padding:20px;overflow:auto}

section{animation:fade .3s}

#toast{
  position:fixed;bottom:20px;right:20px;
  background:#0ea5e9;color:black;padding:14px;border-radius:12px;
  display:none
}

@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1}}