:root {
  /* Section colors sampled from the App Store marketing frames */
  --night-0: #0e0b2b;
  --night-1: #1b1546;
  --purple:  #8A2BE1;
  --yellow:  #FBE06D;
  --pink:    #FEC4FE;
  --green:   #C7FCAC;
  --peach:   #FED8B1;

  --ink-dark: #1c1340;   /* text on light sections */
  --ink-dark-dim: #4a3f6b;
  --gold: #FFC107;
  --maxw: 1080px;
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--ink-dark);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 0.4em;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Bands ---------- */
.band {
  position: relative;
  overflow: hidden;
  padding: 84px 0;
}
.band__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 0;
  align-items: center;
  grid-template-areas:
    "text art"
    "preview art";
}
.band__text { grid-area: text; }
.band__art  { grid-area: art; }
.store-preview { grid-area: preview; }
.band--reverse .band__inner {
  grid-template-areas:
    "art text"
    "art preview";
}
.band__inner--center {
  display: block;
  text-align: center;
  max-width: 980px;
}

.band__text h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.band__text p  { font-size: 1.18rem; max-width: 44ch; }

/* Section color + text-color themes */
.band--night { background: radial-gradient(1100px 560px at 50% -10%, rgba(138,43,225,0.45), transparent 60%), linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 70%); color: #fff; --splash: rgba(255,255,255,0.10); --dotc: rgba(255,255,255,0.55); }
.band--purple { background: var(--purple); color: #fff; --splash: rgba(255,255,255,0.16); --dotc: rgba(255,255,255,0.75); }
.band--yellow { background: var(--yellow); color: var(--ink-dark); --splash: rgba(255,255,255,0.66); --dotc: rgba(255,255,255,0.95); }
.band--pink   { background: var(--pink);   color: var(--ink-dark); --splash: rgba(255,255,255,0.66); --dotc: rgba(255,255,255,0.95); }
.band--green  { background: var(--green);  color: var(--ink-dark); --splash: rgba(255,255,255,0.62); --dotc: rgba(255,255,255,0.95); }
.band--peach  { background: var(--peach);  color: var(--ink-dark); --splash: rgba(255,255,255,0.66); --dotc: rgba(255,255,255,0.95); }

.band--purple .band__text p,
.band--night  .band__text p { color: rgba(255,255,255,0.88); }
.band p.note { color: inherit; opacity: 0.8; }

/* ---------- White splashes (organic blobs + confetti) ---------- */
.splashes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.splashes i { position: absolute; display: block; background: var(--splash); }
.splashes .b1 { width: 360px; height: 340px; top: -150px; right: -120px; border-radius: 47% 53% 42% 58% / 55% 48% 52% 45%; }
.splashes .b2 { width: 280px; height: 300px; bottom: -150px; left: -110px; border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; }
/* moons + stars rendered as masked shapes, tinted with the section splash color */
.splashes .star, .splashes .moon {
  background-color: var(--dotc);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.splashes .star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C13 7.5 16.5 11 23 12 16.5 13 13 16.5 12 23 11 16.5 7.5 13 1 12 7.5 11 11 7.5 12 1Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C13 7.5 16.5 11 23 12 16.5 13 13 16.5 12 23 11 16.5 7.5 13 1 12 7.5 11 11 7.5 12 1Z'/%3E%3C/svg%3E");
}
.splashes .moon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/%3E%3C/svg%3E");
}
/* individual moons/stars are positioned + sized by main.js (random per section) */

/* ---------- Logo + App Store button ---------- */
.logo { height: 46px; width: auto; margin-bottom: 22px; }
.cta { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.cta--center { justify-content: center; margin-top: 36px; }
.btn-store { display: inline-flex; align-items: center; text-decoration: none; transition: transform 0.15s ease; }
.btn-store:hover { transform: translateY(-2px); }
.btn-store img { height: 56px; width: auto; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

/* ---------- Phone art ---------- */
.band__art { display: flex; justify-content: center; }
.phone { width: 84%; transform: scale(1.2); transform-origin: center; filter: drop-shadow(0 24px 44px rgba(0,0,0,0.45)); }

/* Hero specifics */
.lead { font-size: 1.3rem; }
.hero__inner { padding-top: 8px; align-items: center; }
.hero__art { position: relative; justify-content: center; }

/* App Store listing preview card (compact white row, like a search result) */
.store-preview {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding: 10px 12px;
  width: 340px; max-width: 100%;
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.store-preview:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.26); }
.store-preview__icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; box-shadow: 0 3px 8px rgba(0,0,0,0.22); }
.store-preview__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.store-preview__name { font-family: "Poppins", sans-serif; font-weight: 700; color: #1c1340; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-preview__sub { color: #2f2752; font-weight: 600; font-size: 0.8rem; }
.store-preview__get {
  flex: 0 0 auto; align-self: center;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.82rem;
  color: #007aff; background: #ececf2;
  padding: 6px 18px; border-radius: 999px; letter-spacing: 0.4px;
}
.store-preview:hover .store-preview__get { background: #e2e2ea; }
.hero__art .phone { width: 82%; transform: scale(1.08); }

/* ---------- Safe-by-design statement ---------- */
.big-statement { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin: 0.2em 0; }
.note { max-width: 52ch; margin: 0 auto; }

/* ---------- Reviews ---------- */
.reviews__head { text-align: center; margin-bottom: 44px; }
.reviews__head h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 10px; }
.rating { display: inline-flex; align-items: center; gap: 10px; font-family: "Poppins", sans-serif; font-size: 1.2rem; }
.rating .score { font-size: 1.8rem; }
.rating .stars { color: var(--gold); letter-spacing: 2px; }
.rating .count { color: rgba(255,255,255,0.65); font-family: "Nunito", sans-serif; font-size: 0.95rem; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.review {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.review__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; }
.review__stars .off { color: rgba(255,255,255,0.25); }
.review__text { margin: 0 0 18px; color: rgba(255,255,255,0.92); }
.review__name { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.85); margin: auto 0 0; }

/* ---------- How it works steps ---------- */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; text-align: center; }
.step { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 28px 22px; }
.step h3 { font-size: 1.15rem; }
.step p { color: rgba(255,255,255,0.85); margin: 0; }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--purple); font-family: "Poppins", sans-serif; font-size: 1.35rem; margin-bottom: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night-0); color: #fff; padding: 44px 0; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.logo--footer { height: 38px; margin: 0; opacity: 0.95; }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.footer__links a { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer__links a:hover { color: #fff; }
.footer__copy { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin: 0; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal--visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  .band { padding: 60px 0; }
  .band__inner,
  .band--reverse .band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .band__text { order: 1; width: 100%; min-width: 0; }
  .band__art  { order: 2; width: 100%; min-width: 0; }
  .store-preview { order: 3; }
  .band__text h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .band__text p { max-width: none; }
  .store-preview { margin-top: 0; }
  .logo { margin-left: auto; margin-right: auto; }
  .cta { justify-content: center; }
  .review { text-align: center; }
  .phone { width: 86%; transform: none; }
  .hero__art { margin-top: 8px; }
  .hero__art .phone { width: 82%; transform: none; }
  .steps, .reviews__grid { grid-template-columns: 1fr; }
  .splashes .b1 { width: 240px; height: 230px; top: -110px; right: -90px; }
  .splashes .b2 { width: 200px; height: 210px; bottom: -110px; left: -80px; }
}