*{
box-sizing:border-box
}

body{
margin:0;
font-family:system-ui,-apple-system,sans-serif;
background:#07090f;
color:#f5f5f7
}

a{
color:inherit;
text-decoration:none
}

.wrap{
width:min(1100px,94%);
margin:auto;
padding:22px 0
}

.header{
background:#0c1018;
border-bottom:1px solid #202633
}

.nav{
display:flex;
align-items:center;
justify-content:space-between
}

.logo{
font-size:24px;
font-weight:900
}

.logo span{
color:#ff006e
}

.hero{
padding:70px 0 35px;
text-align:center
}

.hero h1{
font-size:clamp(35px,8vw,65px);
margin:0
}

.hero span{
color:#ff006e
}

.hero p{
color:#969eaf
}

.plans{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:16px;
margin:25px 0
}

.card,
.user-card,
.profile-card{
background:#10151e;
border:1px solid #232b39;
border-radius:20px;
padding:22px;
margin:15px 0
}

.price{
font-size:30px;
font-weight:900
}

.primary,
.button{
display:inline-block;
border:0;
border-radius:13px;
padding:13px 18px;
font-weight:800;
cursor:pointer;
background:#252c3a;
color:#fff
}

.primary{
background:
linear-gradient(135deg,#ff006e,#c50059)
}

.auth{
width:min(440px,92%);
margin:70px auto;
padding:25px;
background:#10151e;
border:1px solid #242c39;
border-radius:22px
}

input,
select{
width:100%;
padding:14px;
margin:8px 0 14px;
border-radius:12px;
border:1px solid #283242;
background:#080c13;
color:#fff
}

.error{
background:#45121e;
padding:12px;
border-radius:10px;
margin-bottom:12px
}

.premium{
display:inline-block;
background:#063d2a;
color:#45e6a6;
padding:8px 12px;
border-radius:50px;
font-weight:900
}

.expired{
display:inline-block;
background:#41151b;
color:#ff8390;
padding:8px 12px;
border-radius:50px;
font-weight:900;
margin-bottom:18px
}