/* ==========================================================================
   manawaFLOW - strona główna (landing)

   ZASADA: strona jest JASNA (Biel Galerii zgodnie z kartą marki), a ciemny
   granat pracuje jako kotwica - dwa mocne pasy, nie całe tło.

   Każda sekcja motywuje się sama. Komponenty nigdy nie sięgają po kolor
   bezpośrednio - czytają zmienne --sec-*, które sekcja nadpisuje klasą:

       .lp-sec            -> jasna (biel)
       .lp-sec.is-soft    -> jasna przygaszona (#F7F8FB)
       .lp-sec.is-dark    -> ciemna (granat)

   Dzięki temu przetasowanie proporcji jasne/ciemne to zmiana jednej klasy
   w index.html - bez ruszania czegokolwiek innego.

   Wymaga wcześniejszego wczytania style.css (tokeny marki, typografia, .btn).
   Wszystkie krawędzie ostre - zero zaokrągleń.
   ========================================================================== */

:root{
  /* Powierzchnie ciemne zbudowane na Głębokim Granacie */
  --d-bg:    #0F1219;
  --d-bg-2:  #151A24;
  --d-bg-3:  #1B2130;
  --d-line:  #272E3D;
  --d-line-2:#3A4356;
  --d-mut:   #9AA3B2;
  --d-mut-2: #6D7688;

  /* Tinty marki czytelne na ciemnym tle */
  --fiolet-lite: #B98BE8;
  --kobalt-lite: #5B95E8;

  /* Szerokość treści 1:1 z coaching.manawaflow.pl (--layout-max/--layout-gutter),
     żeby krawędzie treści pokrywały się przy przejściu z narzędziownika. */
  --lp-max: 1400px;
  --lp-gutter: 5%;

  /* Szerokość wiersza dla bloków, które są samym tekstem (leady sekcji,
     odpowiedzi w FAQ, nota w stopce). `none` = pełna szerokość kontenera.
     Jeden knob: ustaw np. 82ch, jeśli kiedyś zechcesz zawęzić wiersz. */
  --lp-measure: none;
}

/* ---------------- Podstawa: strona jest jasna ---------------- */
body.lp{
  background:var(--biel);
  color:var(--granat);
  overflow-x:hidden;
}

.lp-wrap{
  box-sizing:border-box;
  width:min(var(--lp-max), calc(100% - 2 * var(--lp-gutter)));
  max-width:var(--lp-max);
  margin:0 auto;
  padding:0;
}

/* ---------------- Motywy sekcji ---------------- */
.lp-sec{
  --sec-bg:      var(--biel);
  --sec-fg:      var(--granat);
  --sec-mut:     var(--granat-500);
  /* Na jasnym tle nie schodzimy do --granat-300: przy tekscie .82rem
     kontrast spadal ponizej progu czytelnosci (2,5:1 na #F7F8FB). */
  --sec-mut-2:   #667085;
  --sec-line:    var(--linia);
  --sec-panel:   var(--tlo-alt);
  --sec-panel-2: var(--biel);
  --sec-accent:  var(--fiolet);     /* akcent tekstowy */
  --sec-eyebrow: var(--fiolet);     /* etykieta sekcji */
  --sec-mark:    var(--zloto);      /* akcent graficzny (kreski, ikony) */

  background:var(--sec-bg);
  color:var(--sec-fg);
  padding:5rem 0;
  border-top:1px solid var(--sec-line);
}
.lp-sec.is-soft{
  --sec-bg:      var(--tlo-alt);
  --sec-panel:   var(--biel);
  --sec-panel-2: var(--tlo-alt);
}
.lp-sec.is-dark{
  --sec-bg:      var(--d-bg);
  --sec-fg:      var(--biel);
  --sec-mut:     var(--d-mut);
  --sec-mut-2:   var(--d-mut-2);
  --sec-line:    var(--d-line);
  --sec-panel:   var(--d-bg-2);
  --sec-panel-2: var(--d-bg-3);
  --sec-accent:  var(--fiolet-lite);
  --sec-eyebrow: var(--zloto);
  --sec-mark:    var(--zloto);
  border-top-color:transparent;
}
/* Dwie ciemne sekcje pod sobą (CTA + stopka) mają się zlewać w jeden pas */
.lp-sec.is-dark + .lp-sec.is-dark{ border-top:0; padding-top:0; }

.lp-sec h1,.lp-sec h2,.lp-sec h3,.lp-sec h4{ color:var(--sec-fg); }
/* Na granacie czysty fiolet marki jest zbyt ciemny (2:1) - logo dostaje tint. */
.lp-sec.is-dark .logo-a{ color:var(--fiolet-lite); }
.lp-sec a:not(.btn){ color:var(--sec-accent); }
.lp ::selection{ background:var(--zloto); color:var(--granat); }

/* ---------------- Elementy typograficzne ---------------- */
.lp-eyebrow{
  font-family:var(--f-head); font-weight:600; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.2em; color:var(--sec-eyebrow);
  margin:0 0 .9rem; display:flex; align-items:center; gap:.7rem;
}
.lp-eyebrow::before{ content:''; width:26px; height:2px; background:var(--sec-mark); flex:0 0 auto; }
.lp-eyebrow.is-center{ justify-content:center; }

.lp-lead{ font-size:1.1rem; line-height:1.68; color:var(--sec-mut); max-width:var(--lp-measure); }
.lp-note{ font-size:.82rem; color:var(--sec-mut-2); }
.lp-note b{ color:var(--sec-fg); }

/* Przyciski w kontekście sekcji */
.lp-sec .btn-light{ border-color:var(--granat); color:var(--granat); }
.lp-sec .btn-light:hover{ background:var(--granat); color:var(--biel); }
.lp-sec.is-dark .btn-light{ border-color:var(--d-line-2); color:var(--biel); }
.lp-sec.is-dark .btn-light:hover{ background:rgba(255,255,255,.08); border-color:var(--biel); }

/* ---------------- Hero (jasny, z ciemną makietą) ---------------- */
.lp-hero{ position:relative; overflow:hidden; padding:5.5rem 0 5rem; border-top:0; }
.lp-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.lp-glow i{ position:absolute; display:block; filter:blur(100px); }
.lp-glow i:nth-child(1){ width:560px; height:560px; background:#6A0DAD; opacity:.13; top:-220px; left:-160px; }
.lp-glow i:nth-child(2){ width:440px; height:440px; background:#0047AB; opacity:.10; bottom:-200px; right:-140px; }
.lp-glow i:nth-child(3){ width:320px; height:320px; background:#FDC500; opacity:.16; top:44%; left:38%; }

.lp-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.06fr .94fr; gap:3.5rem; align-items:center;
}
.lp-h1{
  font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:700; line-height:1.08;
  letter-spacing:-.03em; margin:0 0 1.1rem; color:var(--granat);
}
.lp-h1 em{ font-style:normal; color:var(--fiolet); }
.lp-h1 span{
  color:var(--granat);
  background:linear-gradient(transparent 62%, rgba(253,197,0,.55) 62%);
  padding:0 .06em;
}
.lp-hero .lp-lead{ font-size:1.14rem; margin-bottom:1.9rem; }
.lp-hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.1rem; }

.lp-badges{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; padding-top:1.4rem; border-top:1px solid var(--sec-line); }
.lp-badges span{ font-size:.82rem; color:var(--sec-mut); display:flex; align-items:center; gap:.5rem; }
.lp-badges span::before{ content:'✦'; color:var(--sec-mark); font-size:.7rem; }

/* Makieta pulpitu - zawsze ciemna, niezależnie od sekcji.
   To celowy obiekt kontrastowy: na jasnej stronie przyciąga wzrok. */
.lp-mock{
  background:var(--d-bg); border:1px solid var(--d-bg-3);
  box-shadow:0 30px 70px rgba(15,18,25,.28), 0 6px 18px rgba(15,18,25,.10);
}
.lp-mock-bar{ display:flex; align-items:center; gap:.55rem; padding:.7rem .9rem; border-bottom:1px solid var(--d-line); background:var(--d-bg-2); }
.lp-mock-bar i{ width:9px; height:9px; background:var(--d-line-2); display:block; }
.lp-mock-bar i:first-child{ background:var(--fiolet); }
.lp-mock-bar b{ font-family:var(--f-head); font-size:.7rem; font-weight:600; color:var(--d-mut); letter-spacing:.1em; text-transform:uppercase; margin-left:.4rem; }
.lp-mock-body{ padding:1.1rem; }
.lp-mock-wheel svg{ width:100%; height:auto; max-width:330px; margin:0 auto; display:block; }
.lp-mock-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.9rem; }
.lp-mock-tile{ background:var(--d-bg-2); border-left:3px solid var(--fiolet); padding:.6rem .7rem; }
.lp-mock-tile:nth-child(2){ border-left-color:var(--zloto); }
.lp-mock-tile:nth-child(3){ border-left-color:var(--kobalt-lite); }
.lp-mock-tile small{ display:block; font-family:var(--f-head); font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--d-mut-2); }
.lp-mock-tile b{ font-family:var(--f-head); font-size:1.25rem; color:var(--biel); line-height:1.2; }
.lp-mock-insight{ margin-top:.9rem; background:var(--d-bg-2); border-left:3px solid var(--zloto); padding:.7rem .8rem; font-size:.8rem; color:var(--d-mut); }
.lp-mock-insight b{ color:var(--biel); font-family:var(--f-head); }

/* ---------------- Nagłówki sekcji ----------------
   Nagłówek i lead idą na pełną szerokość kontenera - bloki, które są samym
   tekstem, nie mogą kończyć się w połowie strony z pustym prawym marginesem. */
.lp-head{ margin-bottom:2.5rem; }
.lp-head.is-center{ text-align:center; }
.lp-head.is-center .lp-lead{ margin-left:auto; margin-right:auto; }
.lp-head h2{ font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.14; letter-spacing:-.025em; margin:0 0 .9rem; max-width:none; text-wrap:balance; }
.lp-head p{ margin:0; }

/* ---------------- Siatka narzędzi ---------------- */
.lp-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:1px; background:var(--sec-line); border:1px solid var(--sec-line);
}
.lp-card{ background:var(--sec-panel-2); padding:1.6rem 1.5rem; transition:background .15s ease, transform .15s ease; }
.lp-card:hover{ background:var(--sec-panel); }
.lp-sec.is-dark .lp-card:hover{ background:var(--d-bg-3); }
.lp-card-ico{ font-size:1.4rem; color:var(--sec-accent); line-height:1; display:block; margin-bottom:.9rem; }
.lp-card h3{ font-size:1.02rem; margin:0 0 .45rem; }
.lp-card p{ font-size:.88rem; color:var(--sec-mut); margin:0; }

/* ---------------- Kroki ---------------- */
.lp-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem; }
.lp-step{ border-top:2px solid var(--sec-line); padding-top:1.1rem; }
.lp-step b{ display:block; font-family:var(--f-head); font-size:2rem; font-weight:700; color:var(--sec-accent); line-height:1; margin-bottom:.6rem; }
.lp-step h3{ font-size:1rem; margin:0 0 .4rem; }
.lp-step p{ font-size:.88rem; color:var(--sec-mut); margin:0; }

/* ---------------- Panel wyróżniony (silnik podsumowań) ---------------- */
.lp-panel{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--sec-line); }
.lp-panel-l{ background:linear-gradient(150deg,#6A0DAD 0%,#3B0A73 55%,#0047AB 100%); padding:2.8rem 2.4rem; }
.lp-panel-l h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.15; letter-spacing:-.02em; color:var(--biel); }
.lp-panel-l p{ color:rgba(255,255,255,.84); font-size:.95rem; }
.lp-panel-l .lp-eyebrow{ color:var(--zloto); }
.lp-panel-l .lp-eyebrow::before{ background:var(--zloto); }
.lp-panel-r{ background:var(--sec-panel); padding:2.8rem 2.4rem; }
.lp-list{ list-style:none; margin:0; padding:0; }
.lp-list li{ padding:.62rem 0 .62rem 1.6rem; border-bottom:1px solid var(--sec-line); font-size:.9rem; color:var(--sec-mut); position:relative; }
.lp-list li:last-child{ border-bottom:0; }
.lp-list li::before{ content:'→'; position:absolute; left:0; top:.62rem; color:var(--sec-mark); }
.lp-list li b{ color:var(--sec-fg); }

/* ---------------- Dwie kolumny: dla kogo ---------------- */
.lp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.lp-col{ background:var(--sec-panel-2); border:1px solid var(--sec-line); border-top:3px solid var(--ok); padding:1.7rem 1.6rem; }
.lp-col.is-no{ border-top-color:var(--alarm); }
.lp-col h3{ font-size:1.1rem; margin:0 0 1rem; }
.lp-col ul{ list-style:none; margin:0; padding:0; }
.lp-col li{ font-size:.9rem; color:var(--sec-mut); padding:.5rem 0 .5rem 1.5rem; position:relative; }
.lp-col li::before{ content:'✓'; position:absolute; left:0; color:var(--ok); font-weight:700; }
.lp-col.is-no li::before{ content:'✕'; color:var(--alarm); }

/* ---------------- Strefa klienta ---------------- */
.lp-entry{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start; }
.lp-entry h2{ font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.025em; line-height:1.14; }
.lp-entry-box{
  background:var(--sec-panel-2); border:1px solid var(--sec-line);
  border-top:3px solid var(--fiolet); padding:2rem 1.9rem;
  box-shadow:0 14px 40px rgba(15,18,25,.06);
}
.lp-entry-box h3{ margin:0 0 .3rem; }
.lp-entry-box .lp-note{ margin-bottom:1.4rem; }
.lp-demo{ margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--sec-line); }
.lp-demo h4{ margin:0 0 .4rem; }
.lp-demo code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  background:var(--sec-panel); border:1px solid var(--sec-line);
  padding:.15em .45em; color:var(--fiolet);
}
.lp-sec.is-dark .lp-demo code{ color:var(--zloto); }

/* ---------------- FAQ ---------------- */
.lp-faq{ border-top:1px solid var(--sec-line); }
.lp-faq details{ border-bottom:1px solid var(--sec-line); }
.lp-faq summary{
  cursor:pointer; list-style:none; padding:1.2rem 2.5rem 1.2rem 0; position:relative;
  font-family:var(--f-head); font-weight:600; font-size:1rem; color:var(--sec-fg);
}
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::after{ content:'+'; position:absolute; right:.4rem; top:1.05rem; font-size:1.4rem; color:var(--sec-mark); line-height:1; }
.lp-faq details[open] summary::after{ content:'−'; }
.lp-faq summary:hover{ color:var(--sec-accent); }
.lp-faq-a{ padding:0 0 1.5rem; font-size:.97rem; line-height:1.68; color:var(--sec-mut); margin:0; max-width:var(--lp-measure); }

/* ---------------- Pas CTA ---------------- */
.lp-cta{ text-align:center; }
.lp-cta h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); letter-spacing:-.025em; margin-bottom:.9rem; }
.lp-cta p{ color:var(--sec-mut); max-width:52ch; margin:0 auto 1.9rem; }

/* ---------------- Stopka ----------------
   Stopki NIE ma już w tym pliku. Ta strona rysuje wspólną stopkę marki:
   HTML w ../../../includes/marka_stopka.php, wygląd w ../../../css/marka-stopka.css
   — ten sam, co na app.manawaflow.pl i w /21przemiany/. Dawne reguły
   (.lp-foot, .lp-foot-in, .lp-foot-links, .lp-admin) dawały tu jeden pasek
   linków bez kontaktu, godzin wsparcia i linku do prywatności.

   Zostaje tylko nota prawna: mówi o samym portalu (dane w przeglądarce),
   więc nie idzie do wspólnej stopki i wisi na końcu pasa CTA. */
.lp-foot-legal{
  margin:2rem auto 0; max-width:80ch; padding-top:1.5rem;
  border-top:1px solid var(--sec-line);
}

/* ---------------- Responsywność ---------------- */
@media (max-width:960px){
  .lp-hero-grid,.lp-panel,.lp-entry{ grid-template-columns:1fr; }
  .lp-cols{ grid-template-columns:1fr; }
  .lp-hero{ padding:3.4rem 0 3.2rem; }
  .lp-sec{ padding:3.4rem 0; }
  .lp-entry{ gap:2rem; }
}
@media (max-width:640px){
  .lp-mock-tiles{ grid-template-columns:1fr; }
  .lp-panel-l,.lp-panel-r,.lp-entry-box{ padding:1.7rem 1.4rem; }
}

/* ---------------- Nawigacja ----------------
   Pasek nawigacji NIE jest opisany w tym pliku. Mieszka w
   ../css/marka-naglowek.css (klasy mf-*) — tym samym arkuszu, którego
   używa app.manawaflow.pl i /21przemiany/. Jedna definicja dla trzech
   stron, więc menu nie może się na nich rozjechać.
   ------------------------------------------------------------------- */