
/* Dark theme + colorful platform buttons */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap');

:root{
  --bg:#030612;
  --card-bg: rgba(255,255,255,0.04);
  --muted: #9aa4b2;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Vazirmatn', system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  background: radial-gradient(600px 400px at 10% 10%, rgba(14,165,233,0.06), transparent 20%), var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:560px;
  margin:40px auto;
  padding:24px;
}

.hero{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}
.logo{
  width:84px;
  height:84px;
  border-radius:18px;
  object-fit:cover;
  box-shadow: 0 6px 24px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.title h1{margin:0;font-size:22px}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:13px}

/* links layout */
.links{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* shared button styles */
.btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.2px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  transition: transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .14s;
  border: 1px solid rgba(255,255,255,0.04);
}
.btn i{width:34px;height:34px;display:grid;place-items:center;background:rgba(0,0,0,0.08);border-radius:8px;font-size:18px;box-shadow: inset 0 -6px 18px rgba(255,255,255,0.02)}
.btn span{flex:1;text-align:center}

/* hover */
.btn:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.75)}

/* platform colors */
.instagram{ background: linear-gradient(135deg,#f58529,#dd2a7b 50%,#8134af); }
.telegram{ background: linear-gradient(135deg,#2ea1e6,#0088cc); }
.rubika{ background: linear-gradient(135deg,#ffb64d,#ff9800); }
.eitaa{ background: linear-gradient(135deg,#ffb64d,#ff9800); }
.whatsapp{ background: linear-gradient(135deg,#34d058,#25D366); }
.website{ background: linear-gradient(135deg,#60a5fa,#3b82f6); }
.h1-color {color: #5fff99;}
/* responsive */
@media (max-width:420px){
  .container{padding:16px;margin:18px auto}
  .btn i{width:30px;height:30px}
  .logo{width:64px;height:64px}
}
