*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #101010;
  --text: #ffffff;
  --muted: #444444;
  --blur: #351288;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Inter", system-ui, sans-serif;

  --page-padding-x: 24px;
  --header-pt: 48px;
  --photo-aspect: 1128 / 2300;

  /* ---- MOBILE defaults (Figma node 2735:276, 375px design) ---- */
  /* Phone = Figma frame 2735:26977 (460px tall), scales with width */
  --photo-h: min(calc(100vw * 460 / 375), 560px);
  /* Caption = SF Pro 32px at 375 */
  --cap-font: clamp(22px, calc(100vw * 32 / 375), 40px);
  /* Purple blur ellipse 452x613, top -266, Gaussian 175 */
  --blur-w: calc(100vw * 452 / 375);
  --blur-h: calc(100vw * 613 / 375);
  --blur-top: calc(100vw * -266 / 375);
  --blur-r: calc(100vw * 175 / 375);
  /* No shadow on mobile — a drop-shadow on the phone <img> rendered badly on
     real high-DPI iOS (blurred/cropped edges), so it's dropped entirely here. */
  --photo-shadow: none;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow-x: clip;
}

/* Purple background blur — solid #351288 ellipse + Gaussian blur, all in vw so
   it scales proportionally. Exact copy of Figma nodes 2735:24990 / 2735:26991. */
.page::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  top: var(--blur-top);
  width: var(--blur-w);
  height: var(--blur-h);
  transform: translateX(-50%);
  background: var(--blur);
  border-radius: 50%;
  filter: blur(var(--blur-r));
}

/* Header */

.site-header {
  position: absolute;
  z-index: 2;
  top: var(--header-pt);
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center; /* mobile: App Store centered */
  gap: 16px;
  padding: 0 var(--page-padding-x);
}

.brand {
  display: none; /* mobile: no brand in header */
  align-items: center;
  gap: 16px;
}

a.brand {
  cursor: pointer;
}

a.brand:focus-visible {
  outline: 2px solid #009eeb;
  outline-offset: 2px;
  border-radius: 12px;
}

.brand__icon {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
}

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

.brand__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid #232323;
  border-radius: inherit;
  pointer-events: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.108px;
}

.brand__tagline {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.108px;
}

/* App Store button — Figma "Download - Component" */

.cta__store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  background: #ffffff;
  color: #000000;
  flex-shrink: 0;
  width: max-content;
  max-width: none;
  white-space: nowrap;
}

.cta__store-icon {
  flex-shrink: 0;
  width: 17.444px;
  height: 21.161px;
}

.cta__store-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}

.cta__store-prompt {
  font-family: Rubik, Inter, sans-serif;
  font-size: 8.435px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: -3px;
}

.cta__store-name {
  font-family: Rubik, Inter, sans-serif;
  font-size: 17.878px;
  font-weight: 500;
  letter-spacing: -1.2514px;
  line-height: normal;
}

/* Hero */

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  /* clear the top App Store (48 + 40 + 24 gap = 112 → Figma slider y=112) */
  padding: 112px var(--page-padding-x) 24px;
}

/* ============================================================
   SLIDESHOW (image -> text -> dots) — shared by mobile & desktop
   ============================================================ */

.slideshow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  touch-action: pan-y; /* let vertical scroll pass; JS handles horizontal swipe */
  user-select: none;
  -webkit-user-select: none;
}

.slideshow__stage {
  position: relative;
  height: var(--photo-h);
  aspect-ratio: var(--photo-aspect);
  overflow: visible; /* let the drop-shadow bleed outside the PNG */
}

.slideshow__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: var(--photo-shadow);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.slideshow__photo.is-active {
  opacity: 1;
}

.slideshow__caption {
  position: relative;
  width: min(640px, 92vw);
  height: calc(var(--cap-font) * 2.4); /* exactly 2 lines @ line-height 1.2 */
  margin-top: 16px; /* image -> text */
}

.slideshow__caption-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--cap-font);
  line-height: 1.2;
  letter-spacing: -0.414px;
  text-align: center;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.slideshow__caption-layer.is-active {
  opacity: 1;
}

/* Explicit line breaks per slide — never re-wrap within a line */
.slideshow__caption-line {
  display: block;
  white-space: nowrap;
}

.slideshow__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px; /* text -> dots (mobile) */
}

.slideshow__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.slideshow__dot:hover {
  opacity: 0.6;
}

.slideshow__dot.is-active {
  opacity: 1;
}

.slideshow__dot:focus-visible {
  outline: 2px solid #009eeb;
  outline-offset: 3px;
}

/* Footer */

.site-footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 24px var(--page-padding-x) 24px;
}

.site-footer__icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.site-footer__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid #232323;
  border-radius: inherit;
  pointer-events: none;
}

.site-footer__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.site-footer__link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.108px;
  transition: color 0.2s ease;
}

.site-footer__link:hover {
  color: #666666;
}

/* ============================================================
   DESKTOP (Figma node 2735:251, 1440px design)
   ============================================================ */

@media (min-width: 768px) {
  :root {
    --page-padding-x: 32px;
    --header-pt: 32px;
    /* Phone = Figma img1 (575px) at 1440, scales with width */
    --photo-h: clamp(420px, calc(100vw * 575 / 1440), 780px);
    --cap-font: clamp(28px, calc(100vw * 40 / 1440), 48px);
    /* Blur ellipse 899x840, top -493, Gaussian 250 */
    --blur-w: calc(100vw * 899 / 1440);
    --blur-h: calc(100vw * 840 / 1440);
    --blur-top: calc(100vw * -493 / 1440);
    --blur-r: calc(100vw * 250 / 1440);
    /* Shadow group from Figma node 2735:26955, in vw @1440 */
    --photo-shadow: drop-shadow(0.399vw 0.677vw 0.868vw rgba(0, 0, 0, 0.2))
      drop-shadow(1.597vw 2.726vw 1.571vw rgba(0, 0, 0, 0.17))
      drop-shadow(3.576vw 6.111vw 2.127vw rgba(0, 0, 0, 0.1))
      drop-shadow(6.372vw 10.868vw 2.17vw rgba(0, 0, 0, 0.03));
  }

  /* Header: brand left + App Store right */
  .site-header {
    justify-content: space-between;
  }

  .brand {
    display: flex;
  }

  /* Hero fills the viewport; the slideshow is vertically centered within it
     (only visible once the slideshow hits its 1200px cap on very tall screens). */
  .hero {
    min-height: 100vh;
    justify-content: center;
    padding: 0 var(--page-padding-x);
  }

  /* Slider = full viewport height with 48px top/bottom breathing room,
     but never taller than 1200px — past that .hero just centers it. */
  .slideshow {
    height: min(100vh, 1200px);
    padding: 48px 0;
    justify-content: center;
  }

  /* The phone eats all leftover vertical space; its width follows from the
     fixed aspect-ratio. Caption + dots keep their intrinsic size. */
  .slideshow__stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-width: 100%;
  }

  .slideshow__dots {
    margin-top: 32px; /* text -> dots (desktop) */
  }

  /* Footer: legal only, pinned bottom-right (Figma node 2745:271) */
  .site-footer {
    position: absolute;
    right: var(--page-padding-x);
    bottom: 32px;
    left: auto;
    z-index: 2;
    width: auto;
    margin-top: 0;
    padding: 0;
    align-items: flex-end;
  }

  .site-footer__icon {
    display: none;
  }
}

/* Respect reduced motion — no crossfade animation */
@media (prefers-reduced-motion: reduce) {
  .slideshow__photo,
  .slideshow__caption-layer,
  .slideshow__dot {
    transition: none;
  }
}