*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  font-family:'Cairo',Tahoma,Arial,sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(132,55,255,.45), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255,183,45,.25), transparent 38%),
    linear-gradient(145deg,#08000f,#180026 55%,#07000c);
}

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 14px;
}

.card{
  width:100%;
  max-width:520px;
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:34px 22px 24px;
  border-radius:38px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 40px 120px rgba(0,0,0,.70),
    inset 0 0 40px rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}

.card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,transparent,rgba(255,210,90,.14),transparent);
  transform:translateX(120%);
  animation:scan 5s infinite;
}

@keyframes scan{
  0%{transform:translateX(120%)}
  45%,100%{transform:translateX(-120%)}
}

.shine{
  position:absolute;
  width:250px;
  height:250px;
  border-radius:50%;
  background:rgba(255,191,63,.28);
  filter:blur(75px);
  top:-110px;
  right:-70px;
}

.logo{
  position:relative;
  width:240px;
  max-width:82%;
  margin-bottom:4px;
  filter:
    drop-shadow(0 0 30px rgba(137,62,255,.75))
    drop-shadow(0 0 18px rgba(255,202,85,.55));
}

h1{
  margin:0;
  font-size:48px;
  font-weight:900;
  color:#ffd36a;
  letter-spacing:-1px;
  text-shadow:0 0 25px rgba(123,44,255,.85);
}

.tagline{
  margin:8px 0 24px;
  font-size:18px;
  font-weight:800;
  color:#f3edf8;
}

.services{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:24px;
}

.services span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 10px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  font-size:14px;
  font-weight:800;
}

.services i{
  color:#ffd36a;
}

.links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.links a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:56px;
  border-radius:19px;
  text-decoration:none;
  color:#fff;
  font-size:16px;
  font-weight:900;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  transition:.22s ease;
}

.links a:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.18);
}

.links i{
  width:22px;
  color:#ffd36a;
  font-size:18px;
}

.links .main-btn{
  color:#160900;
  background:linear-gradient(135deg,#ffd36a,#ff8a00);
  box-shadow:0 14px 38px rgba(255,170,35,.25);
}

.links .main-btn i{
  color:#160900;
}

.countries{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:22px;
}

.countries span{
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:#ddd;
  font-size:12px;
  font-weight:800;
}

footer{
  margin-top:20px;
  color:#aaa;
  font-size:12px;
  letter-spacing:.5px;
}

@media(max-width:430px){
  .card{
    padding:28px 16px 22px;
    border-radius:28px;
  }

  .logo{
    width:220px;
  }

  h1{
    font-size:42px;
  }

  .services{
    grid-template-columns:1fr;
  }
}