/* ============ STRONY PUBLICZNE: LANDING v2 + BLOG ============
   Język panelu (pastelowe tło liquid, szkło, gradientowe akcenty) + ZASADA
   JEDNEJ SZEROKOŚCI: cała treść, od topbara po stopkę, siedzi w kontenerze
   .ldc. Paski mają pełnowymiarowe tło, ale ich zawartość równa się do tej
   samej osi co sekcje. */

.ldc {
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: 24px;
}

/* ===== topbar ===== */
.ld-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.ld-bar-in { display: flex; align-items: center; gap: 26px; padding-block: 12px; }
.ld-brand img { height: 26px; display: block; }
.ld-nav { display: flex; gap: 18px; }
.ld-nav a { color: var(--c-text); text-decoration: none; font-size: 13.5px; font-weight: 550; }
.ld-nav a:hover { color: var(--c-primary, #7c3aed); }
.ld-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ===== rytm sekcji ===== */
/* margin-block, NIE skrót margin — sekcje niosą też klasę .ldc, a skrót
   nadpisywałby jej `margin: 0 auto` i cała treść kleiła się do lewej */
.ld-sec { margin-block: 88px; text-align: center; }
.ld-sec-title { font-size: clamp(1.5rem, 2.9vw, 2.1rem); margin: 0 0 10px; }
.ld-sec-sub { color: var(--c-muted); max-width: 36rem; margin: 0 auto 32px; line-height: 1.65; }
.ld-sec-sub-wide { max-width: 46rem; }
.ld-center { margin-top: 30px; }

/* ===== hero ===== */
.ld-hero {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: 40px;
    padding: 64px 24px 26px;
}
.ld-hero-title { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.12; }
.ld-hero-sub { font-size: 1.05rem; line-height: 1.65; color: var(--c-muted); max-width: 32rem; margin: 0 0 26px; }
.ld-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ld-hero-bullets {
    list-style: none;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--c-muted);
}
.ld-hero-bullets i { color: #16a34a; margin-right: 4px; }

.ld-hero-fan { position: relative; height: 420px; }
.ld-fan-sheet { position: absolute; top: 18px; left: 50%; transition: transform 0.25s ease; }
.ld-fan-0 { transform: translateX(-88%) rotate(-9deg); z-index: 1; }
.ld-fan-1 { transform: translateX(-50%) translateY(-14px); z-index: 3; }
.ld-fan-2 { transform: translateX(-12%) rotate(9deg); z-index: 2; }
.ld-hero-fan:hover .ld-fan-0 { transform: translateX(-96%) rotate(-11deg); }
.ld-hero-fan:hover .ld-fan-1 { transform: translateX(-50%) translateY(-22px); }
.ld-hero-fan:hover .ld-fan-2 { transform: translateX(-4%) rotate(11deg); }

/* ===== pasek liczb ===== */
.ld-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 22px 26px;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}
.ld-stat { text-align: center; }
.ld-stat-n {
    display: block;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ld-stat-l { font-size: 12.5px; color: var(--c-muted); }

/* ===== karty 2x2 (problem, dla kogo) ===== */
.ld-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    text-align: left;
}
.ld-card {
    padding: 26px 24px;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}
.ld-card-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: var(--c-primary, #7c3aed);
    font-size: 19px;
    margin-bottom: 14px;
}
.ld-card h3 { margin: 0 0 6px; font-size: 15.5px; }
.ld-card p { margin: 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.6; }

/* ===== trzy kroki ===== */
.ld-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ld-step {
    position: relative;
    text-align: left;
    padding: 26px 24px 22px;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}
.ld-step-n {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.16;
}
.ld-step-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: var(--c-primary, #7c3aed);
    font-size: 19px;
    margin-bottom: 14px;
}
.ld-step h3 { margin: 0 0 6px; font-size: 15.5px; }
.ld-step p { margin: 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.6; }

/* ===== zakładki podglądu produktu ===== */
.ld-tabs {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
    padding: 22px 26px 30px;
}
.ld-tabs-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ld-tab {
    border: 1px solid transparent;
    background: transparent;
    padding: 8px 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-muted);
    cursor: pointer;
}
.ld-tab:hover { color: var(--c-text); }
.ld-tab.is-on {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
    color: var(--c-primary, #7c3aed);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.ld-tab-panel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 30px; align-items: center; }
/* display:grid wygrywa z atrybutem hidden (znana gotcha) — jawna reguła */
.ld-tab-panel[hidden] { display: none; }
.ld-tab-copy { text-align: left; }
.ld-tab-copy h3 { margin: 0 0 8px; font-size: 17px; }
.ld-tab-copy p { margin: 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.65; }
.ld-tab-visual { display: flex; justify-content: center; align-items: flex-start; }
.ld-tab-row3 { gap: 14px; }
.ld-mini .tpl-thumb { width: 170px; }
.ld-mini .tpl-thumb-scale { transform: scale(0.21418); }

/* para CV + list (skala pośrednia) */
.ld-pair { gap: 0; }
.ld-pair .tpl-thumb { width: 205px; }
.ld-pair .tpl-thumb-scale { transform: scale(0.25828); }
.ld-pair-cv { transform: rotate(-4deg) translateX(12px); z-index: 2; }
.ld-pair-letter { transform: rotate(4deg) translateX(-12px) translateY(14px); z-index: 1; }

/* wersje językowe: mini + lista języków */
.ld-langs { gap: 26px; align-items: center; }
.ld-lang-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ld-lang-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 550;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.ld-lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border-radius: 6px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
}
.ld-lang-list i { margin-left: auto; color: #16a34a; }

/* ===== szablony ===== */
.ld-tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 22px;
    justify-items: center;
}

/* ===== AI ===== */
/* 2x2: cztery funkcje (list, redakcja, import, ocena) — w jednym rzędzie
   karty robiły się za wąskie na pełne opisy */
.ld-ai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ld-ai-card {
    text-align: left;
    padding: 26px 24px;
    background: linear-gradient(150deg, rgba(246, 242, 255, 0.75), rgba(236, 226, 253, 0.6));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(217, 201, 246, 0.8);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}
.ld-ai-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--c-primary, #7c3aed);
    color: #fff;
    font-size: 19px;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -8px rgba(124, 58, 237, 0.55);
}
.ld-ai-card h3 { margin: 0 0 6px; font-size: 15.5px; }
.ld-ai-card p { margin: 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.6; }

/* ===== zaufanie ===== */
.ld-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; text-align: left; }
.ld-trust-item { display: flex; gap: 14px; align-items: flex-start; }
.ld-trust-item > i { color: #16a34a; font-size: 20px; margin-top: 2px; }
.ld-trust-item h3 { margin: 0 0 3px; font-size: 14.5px; }
.ld-trust-item p { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.55; }

/* ===== FAQ ===== */
/* pełna szerokość sekcji — jak reszta strony (prośba 08.08) */
.ld-faq { text-align: left; }
.ld-faq-item {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    margin-bottom: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.ld-faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 650;
    font-size: 14.5px;
}
.ld-faq-item summary::-webkit-details-marker { display: none; }
.ld-faq-item summary i { transition: transform 0.2s ease; color: var(--c-muted); }
.ld-faq-item[open] summary i { transform: rotate(180deg); }
.ld-faq-item p { margin: 0; padding: 0 20px 18px; color: var(--c-muted); font-size: 13.5px; line-height: 1.65; }

/* ===== blog ===== */
.ld-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.ld-blog-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 22px;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ld-blog-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08); }
.ld-blog-meta { font-size: 12px; color: var(--c-muted); }
.ld-blog-card h3, .ld-blog-card h2 { margin: 0; font-size: 16px; line-height: 1.4; }
.ld-blog-card p { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.6; flex: 1; }
.ld-blog-more { font-size: 12.5px; font-weight: 600; color: var(--c-primary, #7c3aed); }
.ld-blog-page { margin-top: 48px; }

/* ===== artykuł ===== */
.ld-article { max-width: 780px; margin: 48px auto 88px; }
.ld-article-back {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 13px;
    color: var(--c-muted);
    text-decoration: none;
}
.ld-article-back:hover { color: var(--c-primary, #7c3aed); }
.ld-article-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 6px 0 26px; }
.ld-prose { text-align: left; font-size: 15px; line-height: 1.75; color: #273043; }
.ld-prose h2 { font-size: 21px; margin: 34px 0 12px; letter-spacing: -0.01em; }
.ld-prose h3 { font-size: 17px; margin: 26px 0 10px; }
.ld-prose p { margin: 0 0 16px; }
.ld-prose ul, .ld-prose ol { margin: 0 0 16px; padding-left: 24px; }
.ld-prose li { margin-bottom: 8px; }
.ld-prose strong { color: #111827; }
.ld-article-cta { margin-top: 48px; text-align: center; }

/* ===== finalne CTA ===== */
.ld-cta {
    max-width: 640px;
    margin: 0 auto;
    padding: 46px 34px;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 26px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.06);
}
.ld-cta-title { font-size: clamp(1.5rem, 2.9vw, 2rem); margin: 0 0 8px; }
.ld-cta .ld-sec-sub { margin-bottom: 22px; }

/* ===== stopka (kolumnowa, ta sama oś) ===== */
.ld-footer {
    margin-top: 60px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    padding: 40px 0 26px;
}
.ld-foot-cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr));
    gap: 28px;
    text-align: left;
}
.ld-foot-col { display: flex; flex-direction: column; gap: 8px; }
.ld-foot-brand img { height: 22px; width: max-content; opacity: 0.9; }
.ld-foot-brand p { margin: 6px 0 0; font-size: 12.5px; color: var(--c-muted); line-height: 1.6; max-width: 240px; }
.ld-foot-col h4 {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
}
.ld-foot-col a { font-size: 13px; color: var(--c-text); text-decoration: none; }
.ld-foot-col a:hover { color: var(--c-primary, #7c3aed); }
.ld-foot-muted { font-size: 12.5px; color: var(--c-muted); }
.ld-foot-line {
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    font-size: 12.5px;
    color: var(--c-muted);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* ===== responsywność ===== */
@media (max-width: 980px) {
    .ld-hero { grid-template-columns: 1fr; padding-top: 40px; }
    .ld-hero-fan { height: 380px; margin-top: 8px; }
    .ld-stats { grid-template-columns: repeat(2, 1fr); }
    .ld-steps, .ld-ai { grid-template-columns: 1fr; }
    .ld-grid2, .ld-trust { grid-template-columns: 1fr; }
    .ld-tab-panel { grid-template-columns: 1fr; }
    .ld-tpl-grid, .ld-blog { grid-template-columns: repeat(2, 1fr); }
    .ld-foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ld-nav { display: none; }
    .ld-tpl-grid, .ld-blog { grid-template-columns: 1fr; }
    .ld-pair { flex-direction: column; align-items: center; gap: 20px; }
    .ld-pair-cv, .ld-pair-letter { transform: none; }
    .ld-tab-row3 { flex-wrap: wrap; }
    .ld-foot-cols { grid-template-columns: 1fr; }
}

/* ===== kicker sekcji (inspiracja 08.08: fioletowy wersalik z rozstrzeleniem) ===== */
.ld-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-primary, #7c3aed);
}

/* ===== kroki: kółko z numerem (duch w tle zostaje) ===== */
.ld-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 18px -6px rgba(124, 58, 237, 0.55);
    margin-bottom: 14px;
}
.ld-step .ld-step-ico { display: none; } /* kółko z numerem przejmuje rolę ikony */

/* ===== korzyści: przewiewne kolumny bez kart (kontrast dla szklanych sekcji) ===== */
.ld-bens {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 34px;
    max-width: 1080px;
    margin: 0 auto;
}
.ld-ben { text-align: center; }
.ld-ben-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #f1ebfc;
    color: var(--c-primary, #7c3aed);
    font-size: 22px;
    margin-bottom: 14px;
}
.ld-ben h3 { margin: 0 0 8px; font-size: 16.5px; }
.ld-ben p { margin: 0 auto; color: var(--c-muted); font-size: 13.5px; line-height: 1.65; max-width: 21rem; }
@media (max-width: 900px) { .ld-bens { grid-template-columns: 1fr; gap: 30px; } }

/* ikony kart w okrągłych lawendowych chipach (spójnie z inspiracją) */
.ld-card-ico, .ld-ai-ico, .ld-step-ico {
    border-radius: 999px;
    background: #f1ebfc;
    border: none;
    color: var(--c-primary, #7c3aed);
}
.ld-ai-ico {
    background: var(--c-primary, #7c3aed);
    color: #fff;
}

/* ===== animowane rozwijanie FAQ =====
   Nowoczesna ścieżka bez JS: interpolate-size pozwala animować block-size
   do wartości `auto`, a ::details-content to treść <details> poza <summary>.
   Przeglądarki bez wsparcia po prostu otwierają bez animacji (bez szkód).
   Akordeon wykluczający (name=) animuje wtedy OBA elementy: stary domyka
   się płynnie, nowy płynnie rośnie. */
.ld-faq { interpolate-size: allow-keywords; }
.ld-faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.32s ease, content-visibility 0.32s allow-discrete;
}
.ld-faq-item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
    .ld-faq-item::details-content { transition: none; }
}