:root{
  --bg-1:#07102b;
  --bg-2:#23104a;
  --bg-3:#592b9f;

  --btn-top: rgba(32,54,180,0.45);
  --btn-bottom: rgba(124,74,222,0.35);
  --btn-hover-top: rgba(60,90,255,0.55);
  --btn-hover-bottom: rgba(150,90,255,0.45);
}

*{box-sizing:border-box}
html,body{height:100%}
html {
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2),var(--bg-3));
  color:#eaf0ff;
  overflow-x:hidden;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1a0033, #2d0066, #40009c);
  z-index: -1;
  pointer-events: none;
}
#particles{position:fixed;inset:0;z-index:-1}

.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(8px);
  grid-template-columns:repeat(4,1fr);
  background: linear-gradient(180deg, var(--btn-hover-top), var(--btn-hover-bottom));
  z-index:5;
}
.logo{display:flex;align-items:center;gap:12px}
.logo-img{height:36px;width:36px;object-fit:contain}
.brand{font-weight:700;font-size:18px;letter-spacing:0.4px}
.menu a{color:inherit;text-decoration:none;padding:8px 12px;border-radius:8px;transition:background .15s}
.menu a:hover{background:rgba(255,255,255,0.06)}


.container{
  padding:120px 20px 40px;
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.hero{max-width:880px;margin:0 auto 28px;text-align:center}
.gradient-text{
  background:linear-gradient(180deg,#1e3bbd 0%, #7f9bff 60%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.description{
  opacity:0.95;
  margin-top:12px;
  font-size:22px;
}

.button-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  max-width:980px;
  margin:25px auto;
}
@media (max-width:1100px){.button-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.button-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.button-grid{grid-template-columns:repeat(1,1fr)}}

.gdps-button{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);

  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));

  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
  -webkit-tap-highlight-color: transparent;
  min-height:56px;
  align-items:center;
}

.gdps-button img{
  height:28px;
  width:28px;
  object-fit:contain;
  flex: 0 0 28px;
}

.gdps-button span{
  color:#ffffff;
  font-weight:700;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: clamp(16px, 1.6vw, 18px);
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.gdps-button:hover,
.gdps-button:focus,
.gdps-button:active{
  transform: scale(1.06);
  box-shadow: 0 10px 35px rgba(80,40,160,0.28);
  background: linear-gradient(180deg, var(--btn-hover-top), var(--btn-hover-bottom));
  outline: none;
}

@media (pointer: coarse){
  .gdps-button:hover,
  .gdps-button:focus{
    transform: scale(1.03);
  }
  .gdps-button:active{
    transform: scale(1.5);
  }
}

.gdps-button:focus-visible{
  box-shadow: 0 10px 40px rgba(110,70,255,0.34), 0 0 0 4px rgba(110,70,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.ghost{
  background:transparent;
  border:1px dashed rgba(255,255,255,0.12);
  padding:10px 14px;
  border-radius:10px;
  color:inherit;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}

.lists {
  margin-top: 900px;
  text-align: center;
}
.lists-redirection {
  margin: 60px auto;
  gap: 15px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  max-width:980px;
}

.ghost:hover{ transform: scale(1.04); background: rgba(255,255,255,0.03); }
.container, .navbar, .gdps-button, .hero, .lists-redirection{animation:fadeUp 1.9s cubic-bezier(.2,.9,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

footer{text-align:center;padding:24px 10px;opacity:0.7}