/* =========================================================
   AngloMisja — strona na jeden ekran (landingpage2)

   Kolory i zaokrąglenia przepisane 1:1 z aplikacji
   (app_android/app/src/main/res/values/colors.xml), żeby strona
   i aplikacja wyglądały jak jedno miejsce.

   Reguła całego pliku: treść ma się zmieścić w jednym ekranie
   bez przewijania. Dlatego rozmiary są związane z wysokością
   okna (vh/clamp), a nie ze stałą liczbą pikseli — inaczej na
   niskim laptopie przycisk do sklepu schodziłby pod krawędź.
   ========================================================= */

:root {
  --navy: #1B2A4A;
  --teal: #0FA3A3;
  --teal-dark: #0B7C7C;
  --teal-light: #D6F0F0;
  --amber: #F2A93B;

  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --outline: #DDE3ED;
  --text: #1B2A4A;
  --text-2: #5C6A85;

  --shadow-lg: 0 30px 70px rgba(27, 42, 74, .18);
}

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

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

body {
  margin: 0;
  background:
    radial-gradient(60vmax 60vmax at 12% -10%, var(--teal-light) 0%, transparent 60%),
    radial-gradient(48vmax 48vmax at 100% 108%, #FDF0D9 0%, transparent 62%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}

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

:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 10px; }

/* ----- ekran ----- */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 3vmin, 40px);
}

.panel {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  gap: clamp(20px, 5vw, 64px);
}

/* ----- lewa kolumna: maskotka i tekst ----- */
.copy {
  text-align: left;
  align-self: start;
}

/*
   Maskotka rusza się tak jak w aplikacji (ui/common/MascotAnimator): unosi się
   w 2,2 s i przechyla w 3,1 s. Różne czasy są celowe — gdyby były równe, ruch
   wyglądałby na mechaniczne powtórzenie jednej pętli.
*/
.mascot {
  width: clamp(84px, 14vh, 148px);
  height: auto;
  margin-bottom: clamp(4px, 1vh, 12px);
  filter: drop-shadow(0 10px 20px rgba(15, 163, 163, .22));
  transform-origin: 50% 75%;
  animation: mascot-float 2.2s ease-in-out infinite,
             mascot-tilt 3.1s ease-in-out infinite;
}

@keyframes mascot-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

@keyframes mascot-tilt {
  0%, 100% { rotate: -3.5deg; }
  50%      { rotate: 3.5deg; }
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6.4vh, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.lead {
  margin: clamp(6px, 1.2vh, 14px) 0 0;
  font-size: clamp(1.32rem, 3vh, 1.82rem);
  font-weight: 600;
  color: var(--navy);
}

.sub {
  margin: clamp(6px, 1vh, 12px) 0 0;
  max-width: 46ch;
  font-size: clamp(1.14rem, 2.4vh, 1.36rem);
  color: var(--text-2);
}

/* ----- odznaka Google Play -----
   Rysowana kodem (SVG w index.html), żeby strona nie pobierała niczego z zewnątrz.
   Przed publikacją wypada podmienić ją na oficjalny plik z brand.google — regulamin
   marki wymaga oryginalnego kształtu i proporcji. */
.play-badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: clamp(14px, 2.6vh, 30px);
  min-height: 70px;
  padding: 0 28px 0 24px;
  background: #101820;
  color: #fff;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(16, 24, 32, .26);
  transition: transform .15s ease, box-shadow .15s ease;
}
.play-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(16, 24, 32, .34); }
.play-badge:active { transform: translateY(0); }
.play-badge-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.play-badge-text small { font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.play-badge-text strong { font-size: 1.58rem; font-weight: 600; }

/* ----- liczby ----- */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.5vw, 30px);
  margin: clamp(12px, 2.2vh, 22px) 0 0;
  padding: clamp(10px, 1.6vh, 16px) clamp(14px, 2vw, 22px);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius, 18px);
  box-shadow: 0 10px 26px rgba(27, 42, 74, .06);
}
.facts li {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.facts strong {
  font-size: clamp(1.3rem, 2.9vh, 1.75rem);
  color: var(--teal-dark);
  letter-spacing: -.02em;
}
.facts span {
  margin-top: 3px;
  font-size: .92rem;
  color: var(--text-2);
}

/* ----- rząd przycisków sklepów ----- */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(14px, 2.6vh, 30px);
  align-items: center;
}
.stores .play-badge { margin-top: 0; }

/*
   App Store czeka na wydanie aplikacji: ten sam kształt co Google Play, ale szary
   i nieklikalny. Kształt jest ten sam celowo — po podmianie na zwykły <a> nic
   w układzie nie drgnie.
*/
.play-badge.is-soon {
  position: relative;
  background: #E4E8F0;
  color: #8A94A6;
  box-shadow: none;
  cursor: default;
}
.play-badge.is-soon:hover { transform: none; box-shadow: none; }
.soon-tag {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--amber);
  color: #3D2A05;
  font-size: .74rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ----- prawa kolumna: telefon ze zrzutami ----- */
.shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 20px);
}

.phone {
  position: relative;
  padding: 9px;
  background: #0E1B33;
  border-radius: 34px;
  box-shadow: var(--shadow-lg);
  rotate: 2.5deg;
}
.phone::after {
  /* Głośnik nad ekranem — bez niego zrzut wygląda jak zwykły obrazek w ramce. */
  content: "";
  position: absolute;
  top: 17px; left: 50%;
  width: 58px; height: 5px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .28);
  border-radius: 3px;
  z-index: 2;
}

/*
   Zrzuty leżą na sobie: pierwszy trzyma wysokość ramki, pozostałe są ustawione
   absolutnie. Dzięki temu przy zmianie ekranu telefon nie zmienia rozmiaru,
   nawet gdyby któryś zrzut miał inne proporcje.
*/
.screen {
  width: auto;
  max-height: min(64vh, 600px);
  border-radius: 26px;
  opacity: 0;
  transition: opacity .45s ease;
}
.screen:not(:first-child) {
  position: absolute;
  top: 9px; left: 9px;
  height: calc(100% - 18px);
}
.screen.is-active { opacity: 1; }

.dots {
  display: flex;
  gap: 10px;
}
.dot {
  /* Cel dotykowy 44 px, sama kropka mała — stąd przezroczysta obwódka zamiast
     powiększania kółka. */
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.dot::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--outline);
  transition: background .25s ease, transform .25s ease;
}
.dot:hover::before { background: #B9C4D6; }
.dot.is-active::before { background: var(--teal); transform: scale(1.25); }

/* ----- stopka ----- */
.foot {
  margin-top: clamp(14px, 2.4vh, 28px);
  text-align: center;
  color: var(--text-2);
  font-size: .88rem;
}
.foot p { margin: 0; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--teal-dark); }

/* ----- telefon i wąskie okna -----
   Tu przewijanie jest dozwolone: zrzut ekranu i tekst obok siebie się nie zmieszczą,
   a ściskanie ich na siłę dałoby napisy nie do przeczytania. */
@media (max-width: 900px) {
  .panel {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(18px, 4vh, 32px);
  }
  .copy { text-align: center; max-width: 34rem; }
  .sub { margin-left: auto; margin-right: auto; }
  .stores { justify-content: center; }
  .facts { justify-content: center; text-align: center; }
  .facts li { align-items: center; }
  .copy { align-self: auto; }
  .phone { rotate: 0deg; }
  .screen { max-height: min(44vh, 420px); }
}

/* Bardzo niskie okno (np. telefon w poziomie): zrzut tylko zabierałby miejsce. */
@media (max-height: 460px) and (max-width: 900px) {
  .shot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}