/* Łappky — landing (Design System 2.0).
   Układ i kolory sekcji siedzą w atrybutach style w index.html — to wierny odpis projektu.
   Tutaj jest tylko to, czego atrybut style nie potrafi: stany, tryb ciemny, ruch, progi szerokości.
   Podstrony prawne mają własny style.css i tego pliku nie ładują. */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FAFBFC;
  color: #20242B;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: #14A99B; text-decoration: none; }
a:hover { color: #0D857A; }
::selection { background: #CCF7F1; }

/* Klawiatura: obrys musi być widoczny w obu trybach. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #14A99B;
  outline-offset: 3px;
  border-radius: 6px;
}
#lp[data-theme="dark"] a:focus-visible,
#lp[data-theme="dark"] button:focus-visible,
#lp[data-theme="dark"] summary:focus-visible { outline-color: #43DACA; }

/* Skok do treści — pierwszy przystanek tabulatora, niewidoczny do momentu użycia. */
.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: #111C30; color: #fff; font-weight: 700; border-radius: 0 0 12px 0;
}
.lp-skip:focus { left: 0; color: #fff; }

/* ── Tryb ciemny (wyprowadzony z tokens-dark.css) ─────────────────────────── */
#lp[data-theme="dark"] { background: #111C30; color: #F4F6F8; }
#lp[data-theme="dark"] [data-lp="hero"] { background: radial-gradient(1100px 620px at 82% -8%, #1B4F49 0%, rgba(27,79,73,0) 62%), radial-gradient(760px 520px at 6% 4%, #17293F 0%, rgba(23,41,63,0) 68%), linear-gradient(180deg,#132038 0%, #111C30 84%) !important; }
#lp[data-theme="dark"] [data-lp="glow"] { background: radial-gradient(circle at 40% 40%, rgba(46,216,195,.12) 0%, rgba(46,216,195,0) 66%) !important; }
#lp[data-theme="dark"] [data-lp="soft"] { background: radial-gradient(760px 440px at 96% 0%, #16303A 0%, rgba(22,48,58,0) 64%), linear-gradient(180deg,#111C30 0%, #13203A 100%) !important; }
#lp[data-theme="dark"] [data-lp="white"] { background: radial-gradient(680px 420px at 2% 100%, #163038 0%, rgba(22,48,56,0) 68%), #16223A !important; }
#lp[data-theme="dark"] [data-lp="card"] { background: #1C2842 !important; border-color: #26344D !important; box-shadow: 0 10px 30px rgba(0,0,0,.28) !important; }
#lp[data-theme="dark"] [data-lp="tint"] { background: #16223A !important; border-color: #26344D !important; }
#lp[data-theme="dark"] [data-lp="strip"] { background: #16223A !important; border-color: #26344D !important; }
#lp[data-theme="dark"] [data-lp="nav"] { background: rgba(17,28,48,.86) !important; border-color: #26344D !important; }
#lp[data-theme="dark"] [data-lp="pill"] { background: #1C2842 !important; border-color: #26344D !important; color: #43DACA !important; }
#lp[data-theme="dark"] [data-lp="btn2"] { background: #1C2842 !important; border-color: #26344D !important; color: #F4F6F8 !important; }
#lp[data-theme="dark"] [data-lp="ghost"] { color: #1B294A !important; }
#lp[data-theme="dark"] [data-lp="footer"] { background: linear-gradient(180deg,#13203A 0%, #111C30 45%) !important; border-color: #26344D !important; }
#lp[data-theme="dark"] [data-lp="illu"] { background: linear-gradient(150deg,#16273F 0%, #16303A 100%) !important; }
#lp[data-theme="dark"] [data-lp="quote"] { color: #2A5C57 !important; }
#lp[data-theme="dark"] h1, #lp[data-theme="dark"] h2, #lp[data-theme="dark"] h3,
#lp[data-theme="dark"] h4, #lp[data-theme="dark"] b, #lp[data-theme="dark"] strong,
#lp[data-theme="dark"] summary { color: #F4F6F8 !important; }
#lp[data-theme="dark"] p, #lp[data-theme="dark"] [data-lp="muted"] { color: #A7B0BC !important; }
#lp[data-theme="dark"] [data-lp="accent"] { color: #43DACA !important; }
#lp[data-theme="dark"] a:not([data-lp="btn"]):not([data-lp="btn2"]) { color: #A7B0BC !important; }
#lp[data-theme="dark"] a:not([data-lp="btn"]):not([data-lp="btn2"]):hover { color: #43DACA !important; }
#lp[data-theme="dark"] [data-lp="divider"] { border-color: #26344D !important; }
#lp[data-theme="dark"] [data-lp="menu"] { background: #16223A !important; border-color: #26344D !important; }

/* Wyróżnienia z projektu były liczone tylko dla jasnego tła. Na granacie ciemny
   turkus schodzi poniżej progu czytelności, a jasnozielone podkreślenie świeci. */
#lp[data-theme="dark"] [data-lp="hl"] { color: #43DACA !important; }
#lp[data-theme="dark"] [data-lp="ul"] { background: #1B4F49 !important; opacity: .9 !important; }
#lp[data-theme="dark"] [data-lp="step"] { color: #43DACA !important; }

/* Ikona i logotyp zależne od trybu — jeden z pary zawsze schowany. */
#lp[data-theme="dark"] [data-lp="ico-moon"] { display: none; }
#lp:not([data-theme="dark"]) [data-lp="ico-sun"] { display: none; }
#lp[data-theme="dark"] [data-lp="logo-day"] { display: none; }
#lp:not([data-theme="dark"]) [data-lp="logo-night"] { display: none; }

/* ── Ramka telefonu ──────────────────────────────────────────────────────────
   Zrzuty z aplikacji są surowe — obudowę rysujemy stylem, nie wypalamy w plik.
   Dzięki temu jeden zrzut pasuje do obu trybów i nie trzeba go przerabiać przy
   każdej zmianie wyglądu strony. */
/* Zrzut telefonu jest wyraźnie wyższy niż blok tekstu obok. Przy wyśrodkowaniu
   w pionie wystawał nad nagłówek i pod przyciski, co czytało się jak rozjechany
   układ (zgłoszone przez Przemka). Wyrównanie do góry ustawia telefon równo
   z etykietą nad nagłówkiem — nadmiar wysokości schodzi w dół, gdzie jest miejsce. */
[data-lp="hero"] [data-reveal] { align-self: flex-start; }

[data-lp-ramka] {
  width: 100%;
  max-width: 290px;
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(160deg, #2A3550 0%, #111C30 100%);
  box-shadow: 0 30px 60px rgba(28,40,66,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
}
/* height:auto jest tu konieczne, nie kosmetyczne. Obrazy mają atrybuty width/height
   (żeby przeglądarka rezerwowała miejsce i układ nie skakał przy wczytywaniu), ale
   sama szerokość z CSS ich nie skaluje — wysokość zostaje ta z atrybutu i zrzut
   rozciąga się w pionie na 1363 px. To był powód „rozjechanego" hero. */
[data-lp-ramka] img { width: 100%; height: auto; display: block; border-radius: 32px; }
[data-lp-ramka-mala] { max-width: 300px; }

#lp[data-theme="dark"] [data-lp-ramka] {
  background: linear-gradient(160deg, #26344D 0%, #0C1526 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
}

@media (max-width: 620px) {
  [data-lp-ramka] { max-width: 290px; }
  [data-lp-ramka-mala] { max-width: 260px; }
}


/* Makieta z narzędzia lappky/makieta-telefonu.py ma wypaloną obudowę, cień i przezroczyste
   tło — nie dostaje obudowy rysowanej stylem, bo miałaby ją podwójnie. */
[data-lp-makieta] {
  width: 100%;
  max-width: 330px;
  height: auto;
  display: block;
}
[data-lp-makieta-mala] { max-width: 290px; }

/* Para telefonów w jednym kadrze — potrzebuje wyraźnie więcej szerokości niż pojedynczy
   telefon, inaczej ekrany stają się nieczytelne. */
[data-lp-para] { width: 100%; max-width: 560px; height: auto; display: block; }
@media (max-width: 620px) { [data-lp-para] { max-width: 340px; } }

@media (max-width: 620px) {
  [data-lp-makieta] { max-width: 290px; }
  [data-lp-makieta-mala] { max-width: 250px; }
}


/* ── Hero jako siatka nazwanych obszarów ─────────────────────────────────────
   Kolejność elementów musi być inna na szerokim ekranie niż na telefonie:
   na desktopie tekst po lewej i obraz po prawej, na telefonie obraz WCHODZI
   MIĘDZY nagłówek a akapit (decyzja Sebastiana — wizual ma poprzedzać opis).
   Samym `order` na dwóch kolumnach tego nie da się zrobić, bo obraz musiałby
   trafić w środek rodzeństwa z drugiej kolumny; dlatego wszystkie elementy są
   bezpośrednimi dziećmi siatki i tylko zmieniamy jej rozkład. */
[data-lp-hero-siatka] {
  display: grid;
  gap: 0 56px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-areas:
    "etykieta obraz"
    "naglowek obraz"
    "opis     obraz"
    "wezwania obraz"
    "cechy    obraz";
}
[data-lp-obszar="etykieta"] { grid-area: etykieta; justify-self: start; }
[data-lp-obszar="naglowek"] { grid-area: naglowek; }
[data-lp-obszar="obraz"]    { grid-area: obraz; align-self: center; }
[data-lp-obszar="opis"]     { grid-area: opis; }
[data-lp-obszar="wezwania"] { grid-area: wezwania; }
[data-lp-obszar="cechy"]    { grid-area: cechy; }

@media (max-width: 900px) {
  [data-lp-hero-siatka] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "etykieta" "naglowek" "obraz" "opis" "wezwania" "cechy";
    justify-items: center;
    text-align: center;
  }
  /* Wyśrodkowanie musi objąć też elementy, które same są kontenerami flex —
     inaczej przyciski i lista cech zostają przyklejone do lewej krawędzi. */
  [data-lp-obszar="wezwania"],
  [data-lp-obszar="cechy"] { justify-content: center; }
  /* etykieta ma na desktopie justify-self:start — trzeba to zdjąć, bo inaczej
     zostaje przy lewej krawędzi mimo wyśrodkowanej reszty */
  [data-lp-obszar="etykieta"] { justify-self: center; }
  [data-lp-obszar="opis"] { margin-left: auto; margin-right: auto; }
  [data-lp-obszar="obraz"] { margin: 30px 0 4px; }
  [data-lp-obszar="naglowek"] { margin-top: 18px !important; }
}

/* ── Stany ────────────────────────────────────────────────────────────────── */
#lp-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 80;
  background: linear-gradient(90deg,#2ED8C3,#14A99B);
  border-radius: 0 3px 3px 0; transition: width .12s linear;
}
[data-lp="nav"] { transition: box-shadow .3s ease; }
[data-lp="nav"][data-scrolled] { box-shadow: 0 10px 34px rgba(28,40,66,.10); }
#lp[data-theme="dark"] [data-lp="nav"][data-scrolled] { box-shadow: 0 10px 34px rgba(0,0,0,.38); }

[data-lp="btn"], [data-lp="btn2"] { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, filter .22s ease; }
[data-lp="btn"]:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); }
[data-lp="btn2"]:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(28,40,66,.10); }

[data-lp="card"][data-hover] { transition: transform .2s ease, box-shadow .2s ease; }
[data-lp="card"][data-hover]:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(28,40,66,.09); }
#lp[data-theme="dark"] [data-lp="card"][data-hover]:hover { box-shadow: 0 18px 44px rgba(0,0,0,.42) !important; }

details[data-lp="card"] summary { list-style: none; }
details[data-lp="card"] summary::-webkit-details-marker { display: none; }
details[data-lp="card"] summary::after {
  content: "+"; float: right; font-size: 20px; line-height: 1; color: #14A99B; font-weight: 700;
}
details[data-lp="card"][open] summary::after { content: "–"; }
#lp[data-theme="dark"] details[data-lp="card"] summary::after { color: #43DACA; }

/* ── Ruch ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  #lp[data-motion-ready] [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
  #lp[data-motion-ready] [data-reveal][data-in] { opacity: 1; transform: none; }
  #lp[data-motion-ready] [data-stagger] > * { opacity: 0; transform: translateY(38px) scale(.94); filter: blur(6px); transition: opacity .5s ease, transform .78s cubic-bezier(.22,1.2,.32,1), filter .5s ease; will-change: transform, opacity; }
  #lp[data-motion-ready] [data-stagger][data-in] > * { opacity: 1; transform: none; filter: none; }
  #lp[data-motion-ready] [data-stagger][data-in] > *:nth-child(2) { transition-delay: .09s; }
  #lp[data-motion-ready] [data-stagger][data-in] > *:nth-child(3) { transition-delay: .18s; }
  #lp[data-motion-ready] [data-stagger][data-in] > *:nth-child(4) { transition-delay: .27s; }
  #lp[data-motion-ready] [data-stagger][data-in] > *:nth-child(5) { transition-delay: .36s; }
  #lp[data-motion-ready] [data-stagger][data-in] > *:nth-child(6) { transition-delay: .45s; }
  #lp[data-motion-ready] [data-stagger][data-in] > *:nth-child(7) { transition-delay: .54s; }
  #lp[data-motion-ready] [data-stagger][data-in] > *:nth-child(8) { transition-delay: .63s; }
  #lp[data-motion-ready] [data-lp="ul"] { transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(.2,.7,.2,1) .45s; }
  #lp[data-motion-ready] [data-reveal][data-in] [data-lp="ul"] { transform: scaleX(1); }
  [data-lp="phone"] { animation: lp-float 8s ease-in-out infinite; }
  [data-lp="glow"] { animation: lp-pulse 14s ease-in-out infinite; }
  @keyframes lp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
  @keyframes lp-pulse { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
}

/* ── Nawigacja mobilna ────────────────────────────────────────────────────────
   Projekt zakładał tylko szeroki ekran. Poniżej 960 px pięć odnośników, logotyp,
   przełącznik i wezwanie nie mieszczą się w jednym rzędzie — rozjeżdżały stronę
   w poziomie, czego twardo zabrania punkt 8 wytycznych. Odnośniki chowają się
   wtedy w panelu pod paskiem. */
[data-lp="burger"] { display: none; }

@media (max-width: 960px) {
  [data-lp="burger"] { display: flex; }

  /* !important jest tu konieczne, nie wygodne: układ paska siedzi w atrybutach
     style (display:flex na menu, inline-flex na przycisku), a atrybut style
     przebija arkusz. Bez tego menu wisi nad hero od załadowania strony,
     a wezwanie wystaje poza ekran. */
  [data-lp="menu"] {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    padding: 8px 16px 16px;
    background: #FAFBFC;
    border-bottom: 1px solid #E7ECF2;
    box-shadow: 0 18px 40px rgba(28,40,66,.12);
  }
  [data-lp="menu"][data-open] { display: flex !important; }
  [data-lp="menu"] a {
    display: flex; align-items: center;
    min-height: 48px; padding: 0 8px;
    border-bottom: 1px solid rgba(231,236,242,.8);
    font-size: 16px !important;
  }
  #lp[data-theme="dark"] [data-lp="menu"] a { border-color: #26344D; }
  [data-lp="menu"] a:last-child { border-bottom: 0; }
  [data-lp-nav-cta] { display: none !important; }
}

@media (max-width: 620px) {
  /* Rytm pionowy: 112 px odstępu na telefonie to trzy przewinięcia pustki. */
  [data-lp-section] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [data-lp="hero"] > div:last-child { padding-top: 40px !important; padding-bottom: 56px !important; }
  [data-lp="logo-day"], [data-lp="logo-night"] { width: 140px !important; }
}