* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
font-family: "Segoe UI", sans-serif;
background: #121212;
color: #ffffff;

min-height: 100vh;

display: flex;
justify-content: center;
align-items: center;

padding: 20px;

}

.wrapper {
width: 100%;
max-width: 430px;
}

.card {
background: #1b1b1b;
border: 1px solid rgba(255,255,255,.06);
border-radius: 34px;

padding: 38px 28px;

text-align: center;

box-shadow:
    0 20px 60px rgba(0,0,0,.45);

}

.logo-wrap {
margin-bottom: 20px;
}

.logo {
width: 100px;
height: 100px;
object-fit: contain;
}

.title {
font-size: 34px;
font-weight: 700;
color: #c89c6d;

margin-top: 10px;

}

.subtitle {
margin-top: 14px;

color: #c2c2c2;

line-height: 1.9;
font-size: 15px;
}

/* BUTTONS */

.button {
display: flex;
justify-content: center;
align-items: center;

width: 100%;

text-decoration: none;

border-radius: 22px;

padding: 20px;

margin-top: 16px;

font-size: 18px;
font-weight: 700;

transition: .2s ease;

}

.button:hover {
transform: translateY(-2px);
}

/* LINE */

.line-btn {
background: #06C755;
color: #fff;

box-shadow:
    0 10px 24px rgba(6,199,85,.35);
}

.line-btn:hover {
background: #07d15c;
}

/* FREE */

.free-btn {
background:
linear-gradient(
180deg,
#ffb347,
#ff8f14
);

color: white;

box-shadow:
    0 10px 24px rgba(255,157,47,.35);
}

.free-btn:hover {
transform: translateY(-2px);
}

/* BADGE */

.badge {
margin-top: 18px;

font-size: 13px;
color: #cfcfcf;

line-height: 1.8;

}

.badge b {
color: #ffd29a;
}

/* TERMS */

.terms {
margin-top: 26px;

background: rgba(255,255,255,.03);

border: 1px solid rgba(255,255,255,.06);

border-radius: 24px;

padding: 22px;

text-align: left;

line-height: 2;
color: #d6d6d6;

}

.terms b {
color: white;
}

.device {
margin-top: 18px;

font-size: 12px;
color: #909090;

line-height: 1.8;

}

.footer {
margin-top: 24px;

font-size: 12px;
color: #8a8a8a;

}