/* ============================================================
   SupportME — landing (please-support-me.com)
   1:1 wg Figmy: Libre Baskerville (display) + Inter (UI),
   granat #24324A, niebieskie gradienty 4E7FA7→1473C0.
   Self-contained — niezależne od church.css/theme.css.
   ============================================================ */
:root{
    --lp-ink:      #24324A;   /* tekst główny */
    --lp-blue-a:   #4E7FA7;
    --lp-blue-b:   #1473C0;
    --lp-wave:     #D8E3EC;
    --lp-pink:     #E8A1B5;
    --lp-gutter:   97px;
    --lp-display:  'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --lp-ui:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.lp{
    margin:0;
    background:#fff;
    color:var(--lp-ink);
    font-family:var(--lp-ui);
    font-size:20px;
    line-height:33px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.lp a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.lp-page{ max-width:1336px; margin:0 auto; position:relative; overflow:hidden; }
.lp-container{ padding:0 var(--lp-gutter); }

/* ---------- HEADER ---------- */
.lp-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:25px var(--lp-gutter) 22px;
    border-bottom:1px solid #E6EAF0;
    position:relative; z-index:5;
}
.lp-logo{ height:42px; width:auto; }
.lp-nav{ display:flex; align-items:center; gap:38px; margin-right:-5px; }   /* prawy brzeg 1244 wg Figmy */
.lp-nav a{ font-size:14px; line-height:33px; color:var(--lp-ink); white-space:nowrap; }
.lp-nav a:hover{ color:var(--lp-blue-b); }

/* ---------- HERO ---------- */
.lp-hero{
    position:relative; z-index:2;
    min-height:487px;
    background:linear-gradient(112deg, rgba(78,127,167,.22) 13.6%, rgba(20,115,192,.22) 99.4%);
    display:flex; align-items:flex-start;
    overflow:hidden;
}
.lp-hero__inner{
    width:100%; padding:92px var(--lp-gutter) 0;
    display:flex; align-items:flex-start; justify-content:space-between; gap:40px;
}
.lp-hero__copy{ width:471px; max-width:471px; flex:0 0 auto; }
.lp-hero__copy h1{
    font-family:var(--lp-display); font-weight:700; font-size:40px; line-height:normal;
    margin:0 0 15px; color:var(--lp-ink); letter-spacing:0;
}
.lp-hero__copy .br-m{ display:none; }   /* łamanie mobilne — domyślnie ukryte (H1 + podtytuł) */
.lp-hero__copy p{ margin:0; font-size:20px; line-height:33px; }
.lp-badges{ display:flex; gap:9px; margin-top:27px; }
.lp-badges img{ height:45px; width:auto; }
.lp-hero__art{ flex:0 0 auto; margin-right:46px; margin-top:-53px; }

/* placeholder "grafika" circles */
.lp-circle{
    border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--lp-display); font-weight:400; color:#000; text-align:center;
    box-shadow:0 1px 0 rgba(36,50,74,.04);
}
.lp-circle--hero{ width:385px; height:385px; font-size:40px; }

/* placeholdery grafik w kółkach (tymczasowe, ikony Tabler w kolorze marki) */
.lp-circle--ghero{ background:#fff url('/img/landing/ph/ghero.svg') center/46% no-repeat; }
.lp-circle--g1{ background:#fff url('/img/landing/ph/g1.svg') center/42% no-repeat; }
.lp-circle--g2{ background:#fff url('/img/landing/ph/g2.svg') center/42% no-repeat; }
.lp-circle--g3{ background:#fff url('/img/landing/ph/g3.svg') center/42% no-repeat; }
.lp-circle--g4{ background:#fff url('/img/landing/ph/g4.svg') center/42% no-repeat; }

/* ---------- KOGO WSPIERAMY ---------- */
.lp-section{ position:relative; z-index:2; }
.lp-support{ padding-top:68px; }
.lp-head{ max-width:854px; margin:0 auto; text-align:center; }
.lp-head h2{
    font-family:var(--lp-display); font-weight:700; font-size:40px; line-height:normal;
    margin:0 0 15px; color:var(--lp-ink);
}
.lp-head p{ margin:0; font-size:20px; line-height:33px; }

.lp-cats{
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
    max-width:1148px; margin:49px auto 0;
}
.lp-cat{
    width:184px; display:flex; flex-direction:column; align-items:center; gap:27px;
    text-align:center;
}
.lp-cat__disc{
    width:87px; height:87px; border-radius:50%;
    background:radial-gradient(circle at 50% 38%, #F8E9EE, #EFD6DE);
    transition:transform .18s ease, box-shadow .18s ease;
}
.lp-cat__label{
    font-family:var(--lp-display); font-weight:700; font-size:14px; line-height:21px; color:#000;
}
.lp-cat:hover .lp-cat__disc{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(36,50,74,.14); }

/* ---------- JAK TO DZIALA (+ wave bg) ---------- */
.lp-how{ position:relative; padding:150px 0 171px; margin:96px 0 261px; }
.lp-how::before{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    top:0; bottom:0; width:100%; max-width:1340px;
    background:url('/img/landing/wave.svg') center/100% 100% no-repeat;
    z-index:0; pointer-events:none;
}
.lp-how > *{ position:relative; z-index:1; }

.lp-steps{ max-width:1142px; margin:43px auto 0; padding:0; display:flex; flex-direction:column; gap:35px; }
.lp-step{
    display:flex; align-items:center; justify-content:space-between; gap:40px;
    min-height:375px;
}
.lp-step--rev{ flex-direction:row-reverse; }
.lp-step__art{ flex:0 0 auto; }
.lp-circle--step{ width:375px; height:375px; font-size:40px; }
.lp-step__body{ width:667px; max-width:667px; flex:0 0 auto; transform:translateY(-6px); }
.lp-step__body .lp-step__num{
    font-family:var(--lp-display); font-weight:700; font-size:25px; line-height:33px;
    color:var(--lp-ink); margin:0 0 14px;
}
.lp-step__body p{ margin:0; font-size:20px; line-height:33px; color:var(--lp-ink); }
.lp-step__body b{ font-weight:700; }
.lp-step__body .lp-list{ margin:0; }

/* ---------- FOOTER ---------- */
.lp-footer{
    position:relative; z-index:2;
    background:linear-gradient(117deg, var(--lp-blue-a) 13.6%, var(--lp-blue-b) 99.4%);
    color:#fff; padding:50px var(--lp-gutter) 50px; margin-top:0;
}
.lp-footer__inner{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.lp-footer__logo{ height:42px; width:auto; }
.lp-footer__links{ display:flex; flex-direction:column; gap:0; font-size:20px; line-height:33px; }
.lp-footer__links a:hover{ text-decoration:underline; }
.lp-footer__social img{ width:24px; height:24px; }
.lp-footer__legal{ font-size:20px; line-height:33px; }

/* ---------- CATEGORY PAGE ---------- */
.lp-catpage{ padding:56px 0 96px; min-height:48vh; }
.lp-catpage .lp-head{ margin-bottom:8px; }
.lp-back{ display:inline-block; font-size:14px; color:var(--lp-ink); opacity:.7; margin-bottom:24px; }
.lp-back:hover{ opacity:1; }
.lp-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    max-width:1142px; margin:48px auto 0;
}
.lp-pcard{
    display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
    background:#fff; border:1px solid #E6EAF0; box-shadow:0 8px 30px rgba(36,50,74,.06);
    transition:transform .18s ease, box-shadow .18s ease;
}
.lp-pcard:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(36,50,74,.14); }
.lp-pcard__art{
    aspect-ratio:3/2; background:linear-gradient(135deg,#EAF1F6,#D8E3EC);
    position:relative; overflow:hidden;
}
.lp-pcard__art img{ width:100%; height:100%; object-fit:cover; }
.lp-pcard__city{
    position:absolute; left:14px; top:14px; background:rgba(36,50,74,.82); color:#fff;
    font-size:13px; line-height:1; padding:7px 11px; border-radius:999px; font-weight:600;
}
.lp-pcard__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.lp-pcard__name{ font-family:var(--lp-display); font-weight:700; font-size:20px; line-height:1.25; color:var(--lp-ink); }
.lp-pcard__purpose{ font-size:15px; line-height:22px; color:#5b6678; }
.lp-pcard__cta{
    margin-top:6px; display:flex; align-items:center; justify-content:space-between;
    font-size:15px; color:var(--lp-ink);
}
.lp-pcard__cta b{ color:var(--lp-blue-b); }
.lp-empty{ max-width:620px; margin:56px auto 0; text-align:center; color:#5b6678; font-size:18px; line-height:30px; }
.lp-empty a{ color:var(--lp-blue-b); font-weight:600; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
    :root{ --lp-gutter:48px; }
    .lp-hero__art{ margin-right:0; }
    .lp-circle--hero{ width:320px; height:320px; font-size:34px; }
}
@media (max-width:980px){
    .lp-hero__inner{ flex-direction:column; align-items:flex-start; padding-top:48px; }
    .lp-hero__copy{ width:100%; max-width:520px; }
    .lp-hero__art{ align-self:center; margin-top:24px; }
    .lp-step, .lp-step--rev{ flex-direction:column; text-align:left; min-height:0; }
    .lp-step__body{ width:100%; max-width:520px; transform:none; }
    .lp-step__art{ align-self:center; }
    .lp-circle--step{ width:280px; height:280px; font-size:32px; }
    .lp-cats{ justify-content:center; }
    .lp-grid{ grid-template-columns:repeat(2,1fr); }
}
/* MOBILE — wg ramki Figmy 1:5 (402px): te same fonty 40/20/25px co desktop,
   układ pionowy i wyśrodkowany. NIE zmniejszamy typografii. */
@media (max-width:560px){
    :root{ --lp-gutter:22px; }
    .lp-header{ padding:25px 22px 18px; }
    .lp-nav{ display:none; }
    .lp-burger{ display:flex; }
    .lp-hero{ min-height:0; background:linear-gradient(93.7deg, rgba(78,127,167,.22) 13.6%, rgba(20,115,192,.22) 99.4%); }
    .lp-hero__inner{ flex-direction:column; align-items:center; padding:64px 22px 60px; gap:54px; }
    .lp-hero__copy{ width:100%; max-width:350px; text-align:center; }
    .lp-hero__copy h1{ font-size:40px; }
    .lp-hero__copy .br-m{ display:inline; }   /* łamanie mobilne (H1 + podtytuł) */
    .lp-hero__copy .br-d{ display:none; }      /* łamanie desktopowe wyłączone */
    .lp-badges{ justify-content:center; }
    .lp-hero__art{ margin:0; align-self:center; }
    .lp-circle--hero{ width:min(342px,86vw); height:min(342px,86vw); font-size:40px; }
    .lp-head h2{ font-size:40px; }
    .lp-support{ padding-top:44px; }   /* gap hero→„Kogo wspieramy" jak Figma (było +24px za dużo) */
    .lp-cats{ flex-direction:column; align-items:center; gap:8px; margin-top:72px; }
    .lp-grid{ grid-template-columns:1fr; padding:0 var(--lp-gutter); }
    /* strona kategorii: gutter po bokach (section .lp-catpage ma poziomy padding 0 —
       te elementy dotykały krawędzi ekranu) */
    .lp-catpage > .lp-back,
    .lp-catpage > .lp-head{ padding-left:var(--lp-gutter); padding-right:var(--lp-gutter); }
    /* mobile: brak nagłówka „Jak to działa?" (nie ma go w ramce mobilnej Figmy) */
    .lp-how .lp-head{ display:none; }
    .lp-how{ margin:14px 0 0; padding:137px 0 70px; background:var(--lp-wave); }
    /* mobile: jednolity niebieski panel na pełną szerokość (jak w ramce Figmy),
       z falującą białą krawędzią u góry — zamiast desktopowej fali */
    .lp-how::before{
        background:#fff; top:0; bottom:auto; height:48px; max-width:none; width:100%;
        left:0; transform:none;
        -webkit-mask:url('/img/landing/wave-cap.svg') top center/100% 48px no-repeat;
        mask:url('/img/landing/wave-cap.svg') top center/100% 48px no-repeat;
    }
    .lp-steps{ margin-top:0; gap:100px; }
    .lp-step{ gap:31px; }
    .lp-step:nth-child(3){ margin-bottom:-43px; }   /* krótki KROK 3 → mniejsza przerwa do KROK 4 (jak Figma) */
    .lp-circle--step{ width:min(261px,70vw); height:min(261px,70vw); font-size:40px; }
    .lp-step__body{ text-align:center; width:100%; max-width:354px; }
}

/* tekst zamykający — wg Figmy tylko na mobile */
.lp-closing{ display:none; }
@media (max-width:560px){
    .lp-closing{ display:block; max-width:325px; margin:0 auto; padding:57px 22px 4px; text-align:center; font-size:20px; line-height:33px; color:#000; }
    .lp-closing b{ font-weight:700; }
}

/* hamburger (tylko mobile) — wg Figmy: logo + ikona menu */
.lp-burger{ display:none; flex-direction:column; justify-content:space-between; width:23px; height:17px; background:none; border:0; cursor:pointer; padding:0; }
.lp-burger span{ display:block; height:2.5px; width:100%; background:var(--lp-blue-b); border-radius:2px; }
@media (max-width:560px){
    .lp-burger{ display:flex; margin-right:23px; }   /* niebieski, pozycja wg Figmy (prawy brzeg ~357) */
    .lp-header.lp-open .lp-nav{
        display:flex; flex-direction:column; gap:14px;
        position:absolute; top:100%; right:22px; margin-top:8px;
        background:#fff; border:1px solid #E6EAF0; border-radius:12px;
        padding:14px 18px; box-shadow:0 14px 34px rgba(36,50,74,.16); z-index:20;
    }
    .lp-header.lp-open .lp-nav a:not(.lp-nav__shop){ display:block; }
}

/* === category icons (panel) === */
.lp-cat__disc{ overflow:hidden; }
.lp-cat__disc-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }