* {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
img {
  margin: 0;
  padding: 0;
  list-style: none;
}

@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================= */
/* BASE CANVAS — iPhone X */
/* ============================= */

.wrapper {
  position: relative;
  width: 375px;
  height: 812px;
  margin: 0 auto;
}

.background {
  position: absolute;
  inset: 0;
  background: url("assets/images/bg@3x.jpg") no-repeat center top / cover;
}

.close {
  position: absolute;
  top: 64px;
  left: 16px;
  width: 24px;
  height: 24px;
  background: url("assets/images/close.svg") no-repeat center / contain;
  z-index: 2;
}

/* ============================= */
/* CONTENT */
/* ============================= */

.content {
  position: relative;
}

.title {
  position: absolute;
  top: 266px;
  left: 24px;
  right: 24px;
  font-size: 42px;
  line-height: 46px;
  font-weight: 800;
  text-align: center;
  color: #fff;
}

.lang-de .title,
.lang-fr .title,
.lang-pt .title {
  font-size: 30px;
  line-height: 32px;
}

.lang-es .title,
.lang-ja .title {
  font-size: 38px;
  line-height: 42px;
}

.features {
  position: absolute;
  top: 382px;
  left: 24px;
  right: 24px;
  display: flex;
  gap: 6px;
}

.feature {
  width: 110px;
  height: 146px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature span {
  position: absolute;
  bottom: 12px;
  left: 8px;
  right: 8px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
}

/* ============================= */
/* PLANS */
/* ============================= */

.plans {
  position: absolute;
  top: 562px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan {
  position: relative;
  height: 56px;
  padding: 18px 56px 18px 24px;
  border-radius: 36px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;

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

  color: #fff;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.1);
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.plan--year {
  background: linear-gradient(180deg, #1b1b25, #0f0f15);
}

.plan--year:not(.active)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
      90deg,
      rgba(255, 150, 244, 0),
      rgba(255, 150, 244, 0.8),
      rgba(99, 42, 247, 0.8),
      rgba(59, 130, 246, 0.8)
    ),
    linear-gradient(
      180deg,
      rgba(255, 150, 244, 0),
      rgba(99, 42, 247, 0.6),
      rgba(59, 130, 246, 0.6)
    );

  background-size: calc(100% - 1px) 1.5px, 1.5px calc(100% - 72px);

  background-position: left 100px top, right top 52px;

  background-repeat: no-repeat;
}

.shadow {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: url("assets/images/shadow.svg") no-repeat center / contain;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.plan--year.active .shadow {
  opacity: 0;
}

.plan.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: #fff;
}

.plan-subtitle,
.plan-price {
  font-size: 16px;
  line-height: 19px;
  opacity: 0.7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
}

.lang-de .plan-subtitle,
.lang-de .plan-price,
.lang-fr .plan-subtitle,
.lang-fr .plan-price,
.lang-pt .plan-subtitle,
.lang-pt .plan-price {
  font-size: 14px;
  line-height: 17px;
}

.badge {
  position: absolute;
  top: -10px;
  right: 22px;
  width: 119px;
  height: 20px;
  border-radius: 14px;

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

  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;

  background: linear-gradient(90deg, #bc1fef, #0035ff);
  z-index: 2;
}

.badge::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;

  background: linear-gradient(90deg, #ff96f4, #632af7, #3b82f6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.plan--year.active .badge {
  background: #fff;
  color: #000;
}

.plan--year.active .badge::before {
  background: #fff;
}

/* ============================= */
/* CTA */
/* ============================= */

.cta {
  position: absolute;
  top: 698px;
  left: 24px;
  right: 24px;
  height: 56px;
  border-radius: 28px;

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

  background: #fff;
  color: #000;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
}

/* ============================= */
/* FOOTER */
/* ============================= */

.footer {
  position: absolute;
  bottom: 24px;
  left: 54px;
  right: 54px;

  display: flex;
  justify-content: space-between;

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 200;
}

.footer a {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 100;
  white-space: nowrap;
}

.lang-de .footer a,
.lang-fr .footer a {
  font-size: 9px;
  line-height: 14px;
}

.lang-es .footer a,
.lang-pt .footer a {
  font-size: 12px;
  line-height: 14px;
}

/* ============================= */
/* DEVICE MODIFIERS */
/* ============================= */

/* iPhone 12 / 12 Pro */
.device-12 .wrapper {
  width: 390px;
  height: 844px;
}

.device-12 .footer {
  bottom: 38px;
}

/* Small devices: SE / 8 */
.device-small .close {
  transform: translateY(-26px);
}

.device-small .content {
  transform: translateY(-100px) scale(0.95);
  transform-origin: top center;
}

.device-small .footer {
  transform: translateY(-150px) scale(0.95);
  bottom: 8px;
}

.device-small .background {
  background-position: center -34px;
}