:root{
  --bg:#0b0f1a;
  --primary:#0c86c6;
}

html,body{height:100%}

body{
  font-family:'Montserrat',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff;
  margin:0;
  min-height:100svh;
  background: radial-gradient(1200px 600px at 50% -10%, #12223a 0%, #0b0f1a 60%, #070a12 100%);
}

.cover-container{max-width:520px}

.logo{
  width:160px; height:160px; border-radius:50%;
  object-fit:cover; display:block; margin:0 auto 16px auto;
  box-shadow:0 10px 26px rgba(0,0,0,.35)
}

.title{
  font-weight:800; letter-spacing:.2px; margin-bottom:18px;
}

.card-wrap{ margin-top:10px }

/* Buttons with 3D hover */
.link-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-bottom:14px; padding:14px; border-radius:16px;
  background:#fff; color:#0e1726; font-weight:700; text-decoration:none;
  box-shadow:0 10px 22px rgba(0,0,0,.20);
  transition:all .22s cubic-bezier(.2,.7,.3,1);
  transform:translateZ(0);
  will-change:transform, box-shadow;
  font-size:1.05rem;
}
.link-btn:hover{
  color:var(--primary); background:#f4f8ff;
  transform:translateY(-5px) scale(1.04) rotateX(3deg);
  box-shadow:0 18px 36px rgba(0,0,0,.32);
}
.link-btn:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.link-btn i{ font-size:1.25rem; color:#0088cc }

.cta{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.cta:hover{ color:#fff; background:linear-gradient(135deg,#11c192,#07a377) }

footer{ opacity:.6 }

/* Scrolling (marquee) */
.marquee{
  width:100%; overflow:hidden; white-space:nowrap;
  color:#fff; font-weight:700; padding:8px 0; font-size:1.0rem;
  letter-spacing:1px; margin-top:12px;
}
.marquee span{
  display:inline-block; padding-left:100%;
  animation:scroll-text 15s linear infinite;
}
@keyframes scroll-text{
  from{ transform:translateX(0) }
  to  { transform:translateX(-100%) }
}

/* Mobile tweaks */
@media (max-width:420px){
  .logo{ width:132px; height:132px; }
  .link-btn{ padding:14px; font-size:1rem; }
}