@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/poppins-regular.ttf") format("truetype");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/poppins-semibold.ttf") format("truetype");
}

@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/fraunces-bold.ttf") format("truetype");
}

:root {
  --page-gutter: 40px;
  --left-gutter: 60px;
  --pink: #fff2fa;
  --studio-ink: #532340;
  --phone-width: 294.224243px;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #000; font-family: Poppins, sans-serif; }
main { max-width: 1400px; margin: 0 auto; }
h1, h2, p { margin: 0; }
img { display: block; }
button { font: inherit; }

.hero {
  position: relative;
  height: 600px;
  padding: 155px var(--page-gutter) 0;
  padding-left: max(var(--left-gutter), calc((100% - 1400px) / 2 + var(--left-gutter)));
  padding-right: max(var(--page-gutter), calc((100% - 1400px) / 2 + var(--page-gutter)));
  background: linear-gradient(180deg, var(--pink), #fff);
}
.hero-content { width: min(799px, 100%); display: flex; flex-direction: column; gap: 40px; }
.studio-logo { flex: none; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
h1 { font-size: 60px; font-weight: 600; line-height: 1.2; }
.hero-copy p, .app-copy p { min-height: 58px; font-size: 24px; font-weight: 400; line-height: 1.2; }
.hero-copy p { opacity: 0.5; }
.contact-button {
  position: absolute;
  top: 32px;
  right: 32px;
  padding: 12px;
  border: 1px solid rgb(83 35 64 / 5%);
  border-radius: 90px;
  background: rgb(255 255 255 / 50%);
  backdrop-filter: blur(2px);
  color: var(--studio-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
button:disabled { cursor: default; opacity: 1; }
.app { padding-top: 82px; padding-bottom: 100px; }
.app-intro { margin-left: var(--left-gutter); width: min(801px, calc(100% - var(--left-gutter) - var(--page-gutter))); display: flex; flex-direction: column; gap: 40px; }
.app-copy { display: flex; flex-direction: column; gap: 24px; }
.app-heading { display: flex; align-items: center; gap: 16px; }
.app-icon { position: relative; flex: none; width: 80px; height: 80px; }
.app-icon img { position: absolute; top: -6px; left: -10px; }
h2 { color: #39362d; font-family: Fraunces, serif; font-size: 40px; font-weight: 700; line-height: 1.2; font-variation-settings: "SOFT" 0, "WONK" 1; }
.store-buttons { display: flex; align-items: center; gap: 10px; }
.store-button { flex: none; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: transparent; }
.store-button:disabled { opacity: 0.5; }
.store-button img { width: auto; height: 47px; object-fit: contain; }
.screens-gallery { position: relative; margin-top: 56px; }
.screens-gallery::before, .screens-gallery::after { content: ""; position: absolute; z-index: 1; top: -30px; bottom: -54px; width: 120px; pointer-events: none; }
.screens-gallery::before { left: 0; background: linear-gradient(to right, #fff, rgb(255 255 255 / 0%)); opacity: 0; }
.screens-gallery.has-left-fade::before { opacity: 1; }
.screens-gallery::after { right: 0; background: linear-gradient(to right, rgb(255 255 255 / 0%), #fff); }
.screens { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: var(--left-gutter); scroll-padding-right: var(--page-gutter); cursor: grab; }
.screens.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.screens::-webkit-scrollbar { display: none; }
.screens:focus-visible { outline: 2px solid var(--studio-ink); outline-offset: -2px; }
.screens-track { display: flex; align-items: flex-start; gap: 40px; width: max-content; padding-left: var(--left-gutter); padding-right: var(--page-gutter); }
.phone { flex: none; width: var(--phone-width); height: 600px; object-fit: contain; scroll-snap-align: start; user-select: none; }
.footer { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 40px var(--page-gutter) 24px; background: linear-gradient(180deg, #fff, var(--pink)); }
.contact-details { width: min(800px, 100%); color: rgb(0 0 0 / 50%); text-align: center; font-size: 16px; line-height: 1.2; overflow-wrap: break-word; }
.copyright { width: min(800px, 100%); color: rgb(0 0 0 / 50%); font-size: 16px; line-height: 1.2; text-align: center; }

@media (max-width: 767px) {
  :root { --page-gutter: 24px; --left-gutter: 24px; }
  .hero { height: auto; min-height: 540px; padding-top: 140px; padding-bottom: 64px; }
  .contact-button { top: 24px; right: 24px; }
  h1 { font-size: clamp(36px, 7.8vw, 52px); }
  .hero-copy p, .app-copy p { font-size: 20px; line-height: 1.4; }
  .app { padding-top: 48px; padding-bottom: 64px; }
  .screens-gallery { margin-top: 48px; }
  .screens-track { gap: 24px; }
  .footer { gap: 40px; }
}

@media (max-width: 374px) {
  :root { --page-gutter: 16px; --left-gutter: 16px; }
  .store-buttons { flex-wrap: wrap; }
}