:root{
  --bg:#000;
  --text:#fff;
  --muted:#cccccc;
  --muted2:#bbbbbb;
  --accent:#1e90ff;
  --card-bg:#0c0c0c;
  --card-border:#2a2a2a;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  overflow:hidden;
  padding:24px;
}

.container{
  text-align:center;
  opacity:0;
  transform:translateY(40px) scale(0.95);
  animation:intro 1.6s cubic-bezier(.16,1,.3,1) forwards;
  max-width:900px;
  width:100%;
}

.logo{
  width:90%;
  max-width:590px;
  margin-bottom:35px;
  animation:logoPulse 3.5s ease-in-out infinite;
}

.logo-link{display:inline-block}
.logo-link .logo{cursor:pointer; transition:transform .3s ease}
.logo-link:hover .logo{transform:scale(1.02)}

h1{
  font-size:30px;
  margin:0 0 12px 0;
  letter-spacing:1px;
}

p{
  font-size:17px;
  color:var(--muted);
  margin:0 0 18px 0;
}

.download-text{
  font-weight: 400 !important;
  max-width:680px;
  margin:0 auto 30px auto;
  font-size:15px;
  line-height:1.6;
  color:#bdbdbd;
  font-family: 'Sweet Sans Pro';
  text-transform: uppercase;
  letter-spacing: 1.5px;  
}

.contacts{
  font-size:16px;
  color:var(--muted2);
}

.contacts div{margin:8px 0}
.contacts a{color:var(--accent); text-decoration:none}
.contacts a:hover{text-decoration:underline}

.downloads{
  margin-top:35px;
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.download-card{
  width:240px;
  padding:20px;
  border:1px solid var(--card-border);
  border-radius:14px;
  background:var(--card-bg);
  color:var(--text);
  text-decoration:none;
  text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
}

.download-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 10px 30px rgba(30,144,255,0.25);
}

.os-icon{
  width:56px;
  height:56px;
  margin:0 auto 12px auto;
  display:block;
}

.download-card .label{
  font-size:15px;
  font-weight:600;
  letter-spacing:.3px;
}

.download-card .sub{
  margin-top:6px;
  font-size:12px;
  color:#9a9a9a;
}

@keyframes intro{
  to{opacity:1; transform:translateY(0) scale(1)}
}

@keyframes logoPulse{
  0%{transform:scale(1); filter:drop-shadow(0 0 0 rgba(30,144,255,0))}
  50%{transform:scale(1.06); filter:drop-shadow(0 0 18px rgba(30,144,255,0.35))}
  100%{transform:scale(1); filter:drop-shadow(0 0 0 rgba(30,144,255,0))}
}

@media (max-width:480px){
  h1{font-size:24px}
  p{font-size:15px}
  .logo{max-width:420px}
  .download-card{width:100%; max-width:300px}
}