:root {
  --ink: #24134d;
  --pink: #f33e91;
  --footer: #351a55;
  --font-head: "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--font-body); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: white; font: 800 22px var(--font-body); background: var(--pink); border: 1px solid #d92c77; border-radius: 999px; padding: 13px 34px; box-shadow: 0 5px 3px #be2c71, 0 8px 12px #84225430; transition: transform .2s; }
.btn:hover { transform: translateY(-3px); }
.btn svg { width: 20px; height: 20px; }
.hero { position: relative; height: 1400px; background: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 330px; height: 540px; top: 10px; right: -25px; background: url("assets/cloud-cluster-right.png") center / contain no-repeat; z-index: 1; pointer-events: none; }
.nav { position: relative; z-index: 4; max-width: 1440px; padding: 62px 92px 0; margin: auto; display: flex; align-items: flex-start; gap: 35px; }
.nav__logo { margin-right: auto; }
.nav__logo img { width: 265px; height: auto; }
.nav__menu { display: flex; align-items: center; gap: 58px; padding-top: 26px; }
.nav__menu a { font-size: 20px; font-weight: 800; }
.nav__menu a:hover, .footer__links a:hover { color: var(--pink); }
.hero__inner { position: relative; z-index: 3; max-width: 1440px; margin: auto; }
.hero__copy { position: absolute; left: 92px; top: 135px; z-index: 2; width: 590px; }
.hero__copy h1 { font-size: 112px; font-weight: 800; line-height: .82; letter-spacing: -2.4px; }
.hero__copy p { width: 465px; margin-top: 45px; color: #332357; font: 700 28px/1.2 var(--font-body); }
.store-badges { display: flex; align-items: center; gap: 22px; }
.hero__copy .store-badges { margin-top: 55px; }
.store-badges img { width: 225px; height: auto; transition: transform .2s; }
.store-badges a:hover img { transform: translateY(-3px); }
.hero__art { position: absolute; top: 10px; right: min(0px, calc((1440px - 100vw) / 2)); width: 1133px; z-index: 1; }
.hero__illustration { width: 100%; max-width: none; }
.hero__clouds { position: absolute; z-index: 2; left: 0; bottom: 0; width: 330px; height: 560px; background: url("assets/cloud-cluster-left.png") left bottom / contain no-repeat; pointer-events: none; }
.features { position: relative; z-index: 3; max-width: 1440px; height: 405px; margin: 0 auto; padding: 55px 90px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; background: #fff; }
.feature img { width: 143px; height: auto; margin: 0 auto 42px; }
.feature h2 { font-size: 27px; font-weight: 800; line-height: 1.2; }
.feature p { margin-top: 16px; color: #46336d; font: 700 22px/1.25 var(--font-body); }
.contact { position: relative; height: 1000px; background: #fbeaf4; overflow: hidden; }
.contact::before { content: ""; position: absolute; top: -93px; left: -5%; width: 110%; height: 160px; background: #fff; border-radius: 0 0 50% 45%; transform: rotate(2deg); }
.contact::after { content: ""; position: absolute; z-index: 3; bottom: 0; left: 0; width: 100%; height: 989px; background: url("assets/clouds-bottom.png") center bottom / 100% auto no-repeat; mask-image: linear-gradient(to bottom, transparent 0%, transparent 58%, #000 79%); pointer-events: none; }
.contact__card { position: relative; z-index: 2; width: min(100%, 1440px); height: 689px; margin: 160px auto 0; }
.contact__bg { position: absolute; inset: 0; width: 100%; height: auto; }
.contact__copy { position: relative; z-index: 1; width: 800px; max-width: 65%; margin: 0 auto; padding-top: 100px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill { border-radius: 999px; border: 2px solid #d1a7ee; background: #eed7fa; padding: 10px 42px; font: 800 24px var(--font-body); text-transform: uppercase; }
.contact__copy h2 { margin-top: 38px; font-size: 72px; line-height: 1.15; font-weight: 800; white-space: nowrap; }
.contact__copy p { margin-top: 22px; font: 700 27px/1.35 var(--font-body); }
.btn--pink { margin-top: 44px; font-size: 30px; padding: 15px 46px; }
.btn--pink svg { width: 38px; height: 30px; }
.footer { position: relative; z-index: 4; margin-top: -1px; background: var(--footer); color: #fff; min-height: 400px; }
.footer__scallop { position: absolute; width: 100%; height: 90px; top: -89px; left: 0; }
.footer__scallop path { fill: var(--footer); }
.footer__inner { max-width: 1440px; margin: auto; padding: 50px 106px 65px; }
.footer__top { display: flex; justify-content: space-between; align-items: center; }
.footer__logo img { width: 240px; }
.footer__links { display: flex; gap: 95px; }
.footer__links a { color: #a99abe; font-size: 21px; font-weight: 700; }
.footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 22px; padding-bottom: 52px; border-bottom: 1px solid #ffffff4d; }
.footer__tagline { color: #9c8bab; font-size: 22px; margin-bottom: 25px; }
.social { display: flex; gap: 42px; }
.social a { display: inline-flex; align-items: center; gap: 9px; color: #c7b6d8; font-size: 18px; font-weight: 700; }
.social a:hover { color: #fff; }
.social img { width: 27px; height: 27px; }
.footer__bottom .store-badges img { width: 200px; }
/* Keep the main compositions complete in normal desktop browser windows. */
@media (min-width: 1101px) and (max-height: 1150px) {
  .hero { height: 100svh; min-height: 700px; }
  .nav { padding-top: 22px; }
  .nav__logo img { width: 180px; }
  .nav__menu { padding-top: 19px; gap: 42px; }
  .nav__menu a { font-size: 16px; }
  .hero__copy { top: clamp(80px, 11svh, 125px); }
  .hero__copy h1 { font-size: clamp(60px, 8.2svh, 90px); }
  .hero__copy p { width: 390px; margin-top: 25px; font-size: clamp(18px, 2.1svh, 23px); }
  .hero__copy .store-badges { margin-top: 32px; }
  .hero__copy .store-badges img { width: clamp(150px, 18svh, 190px); }
  .hero__art { top: 0; width: min(82svh, 820px); }
  .hero__clouds { width: 230px; height: 390px; }
  .hero::after { width: 230px; height: 375px; }
  .contact { height: 100svh; min-height: 700px; }
  .contact__card { width: min(100%, 135svh); height: auto; aspect-ratio: 1440 / 689; margin-top: 8svh; }
  .contact__copy { padding-top: 5%; }
  .pill { font-size: 18px; padding: 7px 30px; }
  .contact__copy h2 { margin-top: 24px; font-size: clamp(42px, 5.5svh, 60px); }
  .contact__copy p { margin-top: 12px; font-size: clamp(18px, 2.3svh, 24px); }
  .btn--pink { margin-top: 22px; padding: 10px 30px; font-size: 24px; }
  .btn--pink svg { width: 30px; height: 25px; }
}
@media (max-width: 1100px) {
  .hero { height: 1100px; }
  .nav { padding: 28px 5%; align-items: center; }
  .nav__logo img { width: 170px; }
  .nav__menu { gap: 20px; padding: 0; }
  .nav__menu a { font-size: 16px; }
  .hero__copy { left: 5%; top: 250px; width: 44%; }
  .hero__copy h1 { font-size: clamp(50px, 7vw, 80px); }
  .hero__copy p { width: 100%; font-size: 20px; }
  .hero__art { top: 140px; right: auto; left: 31%; width: 79%; }
  .store-badges img { width: 160px; }
  .features { height: auto; padding: 65px 20px 100px; }
  .feature img { width: 100px; }
  .feature h2 { font-size: 22px; }
  .feature p { font-size: 18px; }
  .contact { height: 780px; }
  .contact__card { margin-top: 135px; height: auto; aspect-ratio: 1440 / 689; }
  .contact__copy { padding-top: 6%; }
  .contact__copy h2 { font-size: clamp(30px, 4.7vw, 55px); }
  .contact__copy p { font-size: clamp(16px, 2vw, 24px); }
  .contact::after { height: 500px; }
  .footer__inner { padding: 55px 7%; }
}
@media (max-width: 700px) {
  .hero { height: 1050px; }
  .nav { padding: 18px 5%; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .nav__logo img { width: 135px; }
  .nav__menu { order: 3; width: 100%; justify-content: center; gap: 20px; }
  .nav__menu a { font-size: 14px; }
  .hero__copy { top: 120px; width: 90%; text-align: center; }
  .hero__copy h1 { font-size: clamp(48px, 12vw, 72px); }
  .hero__copy p { margin: 20px auto 0; max-width: 390px; font-size: 17px; }
  .hero__copy .store-badges { margin-top: 20px; }
  .store-badges { justify-content: center; gap: 10px; }
  .store-badges img { width: 135px; }
  .hero__art { top: 440px; left: 0; width: 100%; }
  .hero__clouds { width: 170px; height: 300px; }
  .features { grid-template-columns: 1fr; gap: 38px; padding: 45px 20px 90px; }
  .feature img { width: 88px; margin-bottom: 12px; }
  .feature p { margin-top: 7px; }
  .contact { height: 600px; }
  .contact__card { margin-top: 105px; min-width: 700px; left: 50%; transform: translateX(-50%); }
  .contact__copy { max-width: 57%; padding-top: 45px; }
  .pill { font-size: 12px; padding: 7px 20px; }
  .contact__copy h2 { margin-top: 12px; font-size: 27px; }
  .contact__copy p { margin-top: 8px; font-size: 14px; }
  .btn--pink { margin-top: 16px; padding: 8px 18px; font-size: 16px; }
  .btn--pink svg { width: 22px; height: 18px; }
  .contact::after { height: 280px; background-size: auto 280px; }
  .footer__inner { padding: 32px 6% 45px; }
  .footer__top, .footer__bottom { flex-direction: column; align-items: center; gap: 25px; text-align: center; }
  .footer__logo img { width: 170px; }
  .footer__links { gap: 28px; }
  .footer__links a, .footer__tagline { font-size: 15px; }
  .footer__bottom .store-badges img { width: 140px; }
  .social { justify-content: center; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }