@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');

:root {
  /* Font Family */
  --ff-body: 'IBM Plex Sans', sans-serif;

  /* Font Weight */
  --fw-400: 400;
  --fw-700: 700;

  /* Font Size */
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-body-1: 1rem;
  --fs-body-2: 1rem;

  /* Line Height */
  --lh-h1: 3rem;
  --lh-h2: 2.5rem;
  --lh-body-1: 1.625rem;
  --lh-body-2: 1.625rem;

  /* Colors */
  --clr-pr-blue: hsl(177, 68%, 64%);
  --clr-pr-salmon: hsl(12, 94%, 65%);
  --clr-pr-yellow: hsl(33, 100%, 70%);
  --clr-ne-light: hsl(20, 33%, 98%);
  --clr-ne-dark: hsl(244, 23%, 12%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

body {
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-family: var(--ff-body);
  background-color: var(--clr-ne-light);
  background-image: url('assets/bg-main-mobile.png');
  background-position: 0 -20%;
  background-repeat: no-repeat;
}

.main-header {
  margin-block-start: 2.5rem;
  padding-inline: 1.5rem;
}

.logo {
  width: 9.130625rem;
}

.hero-section {
  padding-inline: 1.5rem;
}

.hero-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-700);
  line-height: var(--lh-h1);
  letter-spacing: -0.028125rem;
  margin-block-start: 4rem;
  color: var(--clr-ne-dark);
}

.hero-text {
  font-size: var(--fs-body-1);
  font-weight: var(--fw-400);
  line-height: var(--lh-body-1);
  color: var(--clr-ne-dark);
  margin-block-start: 1.25rem;
}

.cta-section {
  margin-block-start: -3rem;
}

.dark-bg {
  position: relative;
  background-color: var(--clr-ne-dark);
  width: 100%;
  height: 600px;
  border-radius: 0.75rem;
  padding-inline: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(35%);
  background-image: url('assets/bg-pattern-2.svg');
  background-repeat: no-repeat;
  background-position: 52% 0;
  background-size: 280px;
}

.phone {
  position: absolute;
  width: 208.97px;
  right: 50%;
  transform: translateY(25%) translateX(50%);
  z-index: 3;
}

.card {
  position: relative;
  background-color: var(--clr-pr-salmon);
  border-radius: 0.75rem;
  z-index: 2;
}

.card-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-700);
  line-height: var(--lh-h2);
  color: var(--clr-ne-light);
  padding-inline: 2.25rem;
  padding-block-start: 3rem;
}

.card-text {
  --fs-body-1: 1.125rem;
  --lh-body-1: 1.75rem;

  font-size: var(--fs-body-1);
  font-weight: var(--fw-400);
  line-height: var(--lh-body-1);
  color: var(--clr-ne-light);
  padding-inline: 2.25rem;
  margin-block-start: 1.25rem;
}

.price {
  font-size: 4.0625rem;
  font-weight: var(--fw-700);
  color: var(--clr-ne-light);
  line-height: 3.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 2.625rem;
  margin-block-start: 2.625rem;
}

.month {
  font-size: 1.25rem;
  font-weight: var(--fw-400);
  line-height: 2rem;
  letter-spacing: -0.0125rem;
}

.btns {
  padding-inline: 2.25rem;
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block-end: 3rem;
}

.download-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: var(--fw-700);
  line-height: 2rem;
  letter-spacing: -0.01125rem;
  text-align: center;
  padding-block: 0.875rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 200ms;
}

.download-btn.ios {
  position: relative;
  background-color: var(--clr-ne-dark);
  color: var(--clr-ne-light);
}

.download-btn.ios::before {
  content: url('assets/icon-apple.svg');
  line-height: 1;
}

.download-btn.ios:hover,
.download-btn.ios:focus-visible {
  background-color: var(--clr-pr-blue);
}

.download-btn.android {
  background-color: var(--clr-ne-light);
  color: var(--clr-ne-dark);
}

.download-btn.android::before {
  content: url('assets/icon-android.svg');
  line-height: 1;
}

.download-btn.android:hover,
.download-btn.android:focus-visible {
  background-color: var(--clr-pr-yellow);
}

.main-footer {
  padding-inline: 1.5rem;
  margin-block-start: 4rem;
}

.footer-text {
  font-size: var(--fs-body-2);
  font-weight: var(--fw-400);
  line-height: var(--lh-body-2);
  color: var(--clr-ne-dark);
  margin-block-start: 2rem;
}

.footer-text strong {
  font-weight: var(--fw-700);
}

.social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-block-start: 4rem;
  margin-block-end: 1rem;
}

.social-icon {
  width: 1.25rem;
  display: inline-block;
}

.social-icon:hover path {
  fill: var(--clr-pr-salmon);
}

@media screen and (min-width: 767px) {
  :root {
    /* Font Size */
    --fs-h1: 4rem;
    --fs-h2: 2rem;
    --fs-body-1: 1.125rem;
    --fs-body-2: 1rem;

    /* Line Height */
    --lh-h1: 4rem;
    --lh-h2: 2.5rem;
    --lh-body-1: 1.75rem;
    --lh-body-2: 1.625rem;
  }

  body {
    background-image: url('assets/bg-pattern-1.svg'), url('assets/bg-main-tablet.png');
    background-position: 108% -3%, 90% -15%;
    background-size: 266.67px, 983px;
  }

  .main-header {
    padding-inline: 2.4375rem;
    margin-block-start: 3.875rem;
  }

  .hero-section {
    padding-inline-start: 2.4375rem;
    padding-inline-end: 13.4375rem;
    margin-block-start: 5.9375rem;
  }

  .hero-text {
    margin-block-start: 1.75rem;
  }

  .cta-section {
    position: relative;
    padding-inline-start: 2.0625rem;
    padding-inline-end: 2.4375rem;
    margin-block-start: 0;
  }

  .dark-bg {
    transform: translate(0);
    margin-block-start: 15.5625rem;
    background-position: 56% -20%;
  }

  .phone {
    position: absolute;
    width: 270.21px;
    right: 50%;
    transform: translateY(-27%) translateX(-8%);
    z-index: 3;
  }

  .card {
    position: absolute;
    top: 23%;
    left: 35%;
    width: 399px;
    background-color: var(--clr-pr-salmon);
    border-radius: 0.75rem;
    z-index: 4;
  }

  .card-title {
    padding-inline: 3rem;
  }

  .card-text {
    padding-inline-start: 3rem;
    padding-inline-end: 3.0625rem;
  }

  .price {
    padding-inline: 3.375rem;
  }

  .btns {
    padding-inline-start: 3.375rem;
    padding-inline-end: 3.0625rem;
  }

  .main-footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 
    'logo .'
    'footertext social';
    padding-inline-start: 2.0625rem;
    padding-inline-end: 2.4375rem;
    margin-block-start: 11.4375rem;
    margin-block-end: 1rem;
  }

  .main-footer .logo {
    grid-area: logo;
  }

  .footer-text {
    grid-area: footertext;
    padding-inline-end: 4rem;
  }

  .social {
    grid-area: social;
    justify-self: end;
  }

}

@media screen and (min-width: 1439px) {
  :root {
    /* Font Size */
    --fs-h1: 5.5rem;
    --fs-h2: 2.5rem;
    --fs-body-1: 1.25rem;
    --fs-body-2: 1rem;

    /* Line Height */
    --lh-h1: 5.5rem;
    --lh-h2: 3.25rem;
    --lh-body-1: 2.125rem;
    --lh-body-2: 1.625rem;
  }

  body {
    background-image: url('assets/bg-pattern-1.svg'), url('assets/bg-main-desktop.png');
    background-position: 100% -4%, 90% -200%;
    background-size: 312px, 1613px;
  }

  .main-header {
    padding-inline: 10.3125rem;
  }

  .hero-section {
    margin-block-start: 7.9375rem;
    padding-inline-start: 10.3125rem;
    padding-inline-end: 16.25rem;
  }

  .hero-text {
    padding-inline-end: 9rem;
    margin-block-start: 2.5rem;
  }

  .cta-section {
    padding-inline: 10.3125rem;
  }

  .dark-bg {
    transform: translate(0);
    margin-block-start: 20.0625rem;
    background-position: 42% -38%;
    background-size: 312px;
  }

  .phone {
    position: absolute;
    width: 312px; 
    right: 58%;
    top: -8%;
    z-index: 3;
  }

  .card {
    position: absolute;
    top: 14%;
    left: 51%;
    width: 446px;
    background-color: var(--clr-pr-salmon);
    border-radius: 0.75rem;
    z-index: 4;
  }

  .card-title {
    padding-inline: 3.375rem;
  }

  .card-text {
    --fs-body-1: 1.25rem;
    --lh-body-1: 2.125rem;

    padding-inline-start: 3.375rem;
    padding-inline-end: 3.6875rem;
  }

  .price {
    padding-inline-start: 3.375rem;
  }

  .btns {
    padding-inline-start: 3.375rem;
    padding-inline-end: 3.6875rem;
    margin-block-start: 2.875rem;
  }

  .main-footer {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: 
    'logo footertext social';
    padding-inline: 10.3125rem;
    margin-block-start: 12.625rem;
    margin-block-end: 5.6875rem;
  }

  .footer-text {
    margin-block-start: 0;
    margin-inline-start: 7.5rem;
    justify-self: center;
  }

  .social {
    margin: 0;
    align-self: center;
  }
}