/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: #000; color: #fff; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 20px;
}

.container { width: 100%; max-width: 600px; text-align: center; }

 
.logo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto 16px; transform: scale(1);
}

 
.title {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 40px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 0%, #cecece 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-align: center;
}

/* both spans inherit the same gradient */
.title-gradient,
.title-muted {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* socials */
.social-links{
  display:flex; justify-content:center; gap:20px; margin-bottom:60px; flex-wrap:wrap;
}
.social-link{
  display:flex; align-items:center; gap:8px; text-decoration:none; color:#aaa; font-size:14px;
  transition: color .3s ease, transform .2s ease;
}
.social-link:hover{ color:#fff; }
.social-icon{ width:22px; height:22px; border-radius:6px; overflow:hidden; }
.social-icon img{ width:100%; height:100%; object-fit:cover; display:block; }

/* cards */
.cards{ display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }

/* Use gap + auto margin for reliable right CTA alignment */
.card{
  background:#1a1a1a; border-radius:16px; padding:20px; border:1px solid #333;
  display:flex; align-items:center; gap:16px; justify-content:flex-start;
  color:#fff; text-decoration:none; transition:all .3s ease;
}
.card:hover{ background:#2a2a2a; border-color:#555; transform:translateY(-2px); }

.card-left{ display:flex; align-items:center; gap:16px; flex:1; min-width:0; }

.card-icon{
  width:48px; height:48px; border-radius:12px; overflow:hidden; flex:0 0 48px;
  display:grid; place-items:center;
}
.card-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-icon .brand-svg{ width:100%; height:100%; display:block; }

.card-content{ text-align:left; display:flex; flex-direction:column; align-items:flex-start; }
.card-content h3{ font-size:16px; font-weight:600; margin-bottom:4px; }
.card-content p{ font-size:13px; color:#888; }


.card-button{
  margin-left:auto; flex:0 0 auto;
  background:#333; color:#fff; border:none; cursor:pointer;
  padding:12px 20px;   
  border-radius:12px; font-size:14px; transition:background .2s ease;
  display:flex; align-items:center; justify-content:center; gap:8px; line-height:1;
}
.card-button:hover{ background:#444; }
.btn-icon{ display:none; width:20px; height:20px; color:#c8c8c8; }

 
@media (max-width: 480px){
  .title{ font-size:1.9rem; }
  .logo{ width:72px; height:72px; margin-bottom:12px; }
  .card{ padding:15px; }
  .card-content h3{ font-size:15px; }
  .card-content p{ font-size:12px; }

  .card-button{
    width:44px; height:44px; padding:0; border-radius:12px;
    background:#242424; box-shadow: inset 0 0 0 1px #2f2f2f;
    display:grid; place-items:center;   
  }
  .card-button .btn-text{ display:none; }
  .card-button .btn-icon{ display:block; }
}
.other-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}