*{box-sizing:border-box}
body{
margin:0;
min-height:100vh;
font-family:Arial,Helvetica,sans-serif;
color:white;
background:
linear-gradient(rgba(5,8,20,.78),rgba(5,8,20,.92)),
radial-gradient(circle at top left,rgba(139,92,246,.55),transparent 35%),
radial-gradient(circle at bottom right,rgba(6,182,212,.35),transparent 40%),
#111827;
}
.topbar{
position:sticky;top:0;z-index:10;
display:flex;align-items:center;justify-content:space-between;
padding:16px 22px;
background:rgba(7,10,24,.86);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.14);
}
.brand{color:white;text-decoration:none}
h1{margin:0;font-size:28px}
.brand p{margin:4px 0 0;color:#cbd5e1;font-size:13px}
.corner-logo{
position:fixed;
top:14px;
right:18px;
width:92px;
height:92px;
object-fit:contain;
border-radius:50%;
z-index:30;
box-shadow:0 0 25px rgba(0,0,0,.65),0 0 22px rgba(139,92,246,.45);
background:white;
}
.menu-btn{
display:none;
margin-right:110px;
border:1px solid rgba(255,255,255,.2);
background:linear-gradient(135deg,#8b5cf6,#06b6d4);
color:white;padding:11px 15px;border-radius:12px;font-size:16px;
}
.layout{display:flex;max-width:1280px;margin:auto;min-height:calc(100vh - 90px)}
.side-menu{
width:300px;flex:0 0 300px;padding:24px 14px;
border-right:1px solid rgba(255,255,255,.12);
}
.side-menu a{
display:block;margin-bottom:10px;padding:14px 16px;
color:#e5e7eb;text-decoration:none;border-radius:14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
}
.side-menu a:hover,.side-menu a.active{
background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(6,182,212,.82));
color:white;
}
.content{flex:1;padding:32px}
.hero-card,.card{
border:1px solid rgba(255,255,255,.14);
background:rgba(10,15,34,.75);
backdrop-filter:blur(18px);
border-radius:26px;
box-shadow:0 25px 70px rgba(0,0,0,.32);
}
.hero-card{padding:30px;margin-bottom:22px}
.eyebrow{margin:0 0 10px;color:#67e8f9;text-transform:uppercase;font-weight:700;letter-spacing:1.5px;font-size:12px}
.hero-card h2{margin:0;font-size:clamp(30px,5vw,54px);line-height:1}
.card{padding:28px;color:#e5e7eb;font-size:17px;line-height:1.65}
.button,button{
display:inline-block;border:0;cursor:pointer;color:white;text-decoration:none;
padding:13px 18px;border-radius:14px;font-weight:700;
background:linear-gradient(135deg,#8b5cf6,#06b6d4);
}
.login-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
input{min-width:260px;flex:1;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:white}
input::placeholder{color:#cbd5e1}
.hidden{display:none}
.protected,.legal,.event-box,.cards div,.provider,.gallery div{
margin-top:16px;padding:18px;border-radius:20px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.12);
}
.cards,.gallery,.provider-list,.link-grid{display:grid;gap:16px;margin-top:18px}
.cards{grid-template-columns:repeat(3,1fr)}
.gallery{grid-template-columns:repeat(4,1fr)}
.gallery div{min-height:160px;display:grid;place-items:center}
.provider-list,.link-grid{grid-template-columns:repeat(2,1fr)}
.provider{display:block;color:#e5e7eb;text-decoration:none}
footer{text-align:center;padding:22px;color:#cbd5e1;background:rgba(7,10,24,.86)}
@media(max-width:900px){
.corner-logo{width:70px;height:70px;top:12px;right:12px}
.menu-btn{display:block;margin-right:84px}
.layout{display:block}
.side-menu{display:none;width:100%;padding:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
.side-menu.open{display:block}
.content{padding:14px}
.hero-card,.card{border-radius:20px}
.card{padding:20px;font-size:16px}
.cards,.gallery,.provider-list,.link-grid{grid-template-columns:1fr}
h1{font-size:21px}
.brand p{display:none}
input{min-width:100%}
}