:root {
  --bg : #081423;--card : rgba(255, 255, 255, .07);--b : #1d4ed8;--y : #fbbf24;--t : #fff;--m : #cbd5e1
}
* {
  margin : 0;
  padding : 0;
  box-sizing : border-box
}
body {
  font-family : Poppins, sans-serif;
  background : radial-gradient(circle at top, #1d4ed855, transparent 35%), radial-gradient(circle at bottom, #fbbf2430, transparent 35%), linear-gradient(160deg, #081423, #0f172a);
  color : var(--t);
  min-height : 100vh;
  padding : 1rem;
  display : flex;
  align-items : center;
  justify-content : center
}
.wrap {
  width : 100%;
  max-width : 430px;
  background : var(--card);
  backdrop-filter : blur(14px);
  border : 1px solid rgba(255, 255, 255, .08);
  border-radius : 28px;
  padding : 1.5rem;
  box-shadow : 0 20px 50px rgba(0, 0,0, .4)
}
.logo {
  width : 110px;
  height : 110px;
  margin : auto;
  border-radius : 50%;
  padding : 4px;
  background : linear-gradient(135deg, var(--y), var(--b))
}
.logo img {
  width : 100%;
  height : 100%;
  border-radius : 50%;
  object-fit : cover;
  background : #fff
}
.badge {
  margin : 1rem auto .7rem;
  display : inline-block;
  background : #fbbf2420;
  border : 1px solid #fbbf2460;
  color : var(--y);
  padding : .4rem .8rem;
  border-radius : 99px;
  font-size : .8rem;
  font-weight : 700
}
h1 {
  font-size : clamp(1.8rem, 6vw, 2.4rem);
  line-height : 1.1;
  text-align : center
}
p span {
  color : var(--y)
}
p {
  text-align : center;
  color : var(--m);
  margin : 1rem 0 1.4rem;
  line-height : 1.7
}
.grid {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : .8rem;
  margin-bottom : 1.4rem
}
.card {
  background : #ffffff10;
  border-radius : 14px;
  padding : .9rem;
  text-align : center;
  font-size : .9rem
}
.btn {
  display : flex;
  justify-content : space-between;
  align-items : center;
  text-decoration : none;
  font-weight : 700;
  border-radius : 16px;
  padding : 1rem 1.2rem;
  margin : .8rem 0;
  color : #fff;
  transition : .25s
}
  .btn : hover {
  transform : translateY(-2px)
}
.wpp {
  background : linear-gradient(135deg, #22c55e, #16a34a)
}
.cat {
  background : linear-gradient(135deg, #fbbf24, #f59e0b);
  color : #111
}
.insta {
  background : linear-gradient(135deg, #2563eb, #1d4ed8)
}
footer {
  text-align : center;
  color : #94a3b8;
  font-size : .8rem;
  margin-top : 1.3rem
}
  @media(min-width : 768px) {
  body{padding : 2rem
}
.wrap {
  max-width : 480px;
  padding : 2rem
}
}