/* =========================================================
   Joga w ciąży – strona główna
   Stack: pure CSS, vanilla JS
   Fonty: The Seasons (nagłówki), Poppins (body)
   ========================================================= */

@font-face {
    font-family: "The Seasons";
    src: url("../fonts/TheSeasons.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
    /* Palette – wyciągnięta z PDF + SVG */
    --c-plum:        #56373F;   /* logo, CTA, headings */
    --c-plum-dark:   #3E2730;
    --c-plum-soft:   #7F6169;   /* secondary text */
    --c-plum-fade:   #A38888;

    --c-cream:       #FAF5F0;   /* page bg */
    --c-cream-2:     #F3EAE1;   /* tag / chip bg */
    --c-pink-50:     #FBF1EC;   /* soft section bg */
    --c-pink-100:    #F7E5E0;   /* stronger section bg */
    --c-pink-200:    #EFD5CB;   /* accent */
    --c-peach:       #E8C4B8;

    --c-border:      rgba(86, 55, 63, .15);
    --c-border-soft: rgba(86, 55, 63, .08);

    --c-text:        #3C2730;
    --c-text-muted:  #7F6169;
    --c-text-faded:  #A38888;

    --c-ok:          #5A8F6F;
    --c-no:          #A66A6A;
    --c-star:        #C9A13B;
    --c-accent:      #4A9A5C;   /* zielony z badge */

    /* Typografia */
    --ff-serif: "The Seasons", "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --ff-sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Skalowanie */
    --container: 1200px;
    --gutter: clamp(20px, 4vw, 48px);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Transitions */
    --t-fast: .2s ease;
    --t-med: .35s ease;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg { max-width: 100%; display: block; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast);
}

button {
    font-family: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
}

h1, h2, h3, h4 {
    font-family: var(--ff-serif);
    font-weight: 400;
    color: var(--c-plum);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

p { margin: 0; }

/* ---------- Utility ---------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--c-cream-2);
    color: var(--c-plum);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
}
.tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-plum);
    flex: 0 0 7px;
}
/* wariant hero: białe tło, zielony border + kropka + zielony font */
.tag--accent {
    background: transparent;
    border: 1.5px solid var(--c-accent);
    color: var(--c-accent);
}
.tag--accent::before { background: var(--c-accent); }

.section-label {
    display: block;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #A7625B;
    text-align: center;
    margin-bottom: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
}
.btn--primary {
    background: #66474F;
    color: #fff;
}
.btn--primary:hover {
    background: #4F363D;
}
.btn--outline {
    background: transparent;
    color: var(--c-plum);
    border: 1px solid var(--c-plum);
}
.btn--outline:hover {
    background: var(--c-plum);
    color: #fff;
}
.btn--lg {
    padding: 20px 64px;
    font-size: 16px;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--c-border-soft);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    height: 80px;
}
.site-header__logo { display: inline-flex; line-height: 0; }
.site-header__logo img {
    width: 206px;
    height: 58px;
    display: block;
}

.main-nav {
    display: flex;
    align-items: center;
}
.main-nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}
.main-nav > ul > li { display: inline-flex; align-items: center; }
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 300;
    color: var(--c-plum);
    border-radius: var(--radius-pill);
    transition: background var(--t-fast), color var(--t-fast);
    line-height: 1;
}
.main-nav a:hover { background: var(--c-cream-2); }

/* „Kup kurs" – wyższa specyficzność niż .main-nav a */
.main-nav a.btn--primary {
    color: #fff;
    font-weight: 400;
    padding: 12px 22px;
    border-radius: 4px;
}
.main-nav a.btn--primary:hover {
    background: #6B4F57;
    color: #fff;
}

/* dwupoziomowe menu */
.has-submenu { position: relative; }
.has-submenu > a::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.3px solid currentColor;
    border-bottom: 1.3px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--t-fast);
    flex: 0 0 7px;
    margin-left: 2px;
}
.has-submenu.is-open > a::after,
.has-submenu:hover > a::after {
    transform: rotate(225deg) translate(-2px, -2px);
}
.submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 36px -12px rgba(62, 39, 48, .12);
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast);
}
.submenu a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 300;
}
.has-submenu:hover > .submenu,
.has-submenu.is-open > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 6px;            /* tylko hitbox, nie tło */
    margin-left: 6px;
    border-radius: 0;
    transition: opacity var(--t-fast);
}
.nav-cart:hover { background: transparent; opacity: .7; }
.nav-cart img { width: 26px; height: 26px; }
.nav-cart__count {
    position: absolute;
    top: 6px;
    right: 12px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--c-plum);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
    transform: translate(25%, -25%);
    pointer-events: none;
}

/* hamburger */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-cream-2);
    position: relative;
    z-index: 110;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--c-plum);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: transform var(--t-fast), top var(--t-fast), background var(--t-fast);
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle.is-open span::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* mobile overlay */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(62, 39, 48, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med), visibility var(--t-med);
    z-index: 90;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

/* ---------- Section backgrounds (new palette) ---------- */
.hero,
.pain,
.solution,
.lessons,
.teacher { background: #F5E1E0; }
.reviews { background: #FBF5F5; }
.pricing { background: #F5E1E0; }
.how,
.faq,
.site-footer { background: #FBF5F5; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 0;
    overflow: hidden;
    min-height: calc(100vh - 80px);   /* header = 80px sticky */
}

/* Full bleed do 1440px (powyżej tej szerokości – wyśrodkowany na 1440px) */
/* Symetryczne kolumny boczne — środek zawsze dokładnie na osi strony */
/* minmax(0, 1fr) pozwala obrazkowi po prawej delikatnie nachodzić na środek */
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 651px minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 80px);
}

/* Lewa kolumna – 3 miniatury wg projektu (pozycjonowane absolutnie) */
/* Przypięte do górnej (thumb-1) i dolnej (thumb-3) krawędzi sekcji */
.hero__thumbs {
    position: relative;
    align-self: stretch;
    margin: 0;
    padding: 0;
}
.hero__thumb {
    margin: 0;
    overflow: hidden;
    background: var(--c-pink-50);
    display: block;
    position: absolute;
}
.hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 1: faded portrait, prawy-górny — dociągnięty do góry sekcji */
.hero__thumb--1 {
    top: 0;
    left: 40px;
    width: 130px;
    height: 165px;
}
/* 2: vibrant portrait, środek – przesunięty w prawo */
.hero__thumb--2 {
    top: 50%;
    transform: translateY(-50%);
    left: 90px;
    width: 155px;
    height: 200px;
}
/* 3: faded landscape, lewy-dolny — dociągnięty do dołu sekcji */
.hero__thumb--3 {
    bottom: 0;
    left: 10px;
    width: 165px;
    height: 105px;
}

/* Środek – treść wyśrodkowana w pionie i poziomie; nad fotką po prawej */
.hero__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 40px 0;
    align-self: center;
    position: relative;
    z-index: 3;
}
.hero__content .tag { margin-bottom: 22px; }
.hero__title {
    font-family: var(--ff-serif);
    font-size: 54px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;            /* 120% */
    letter-spacing: 0;
    text-align: center;
    margin: 0 0 24px;
    color: var(--c-plum);
}
.hero__desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-text-muted);
    margin: 0 0 34px;
}
.hero__desc-lead {
    display: block;
    margin-bottom: 12px;
}

/* Prawa kolumna – duża fotka 451 szer., wysokość auto */
.hero__image {
    position: relative;
    width: 451px;
    height: auto;
    overflow: hidden;
    background: var(--c-pink-50);
    justify-self: end;     /* prawa krawędź = prawa krawędź kolumny */
    align-self: end;       /* przypięte do dołu sekcji */
    z-index: 1;            /* pod treścią */
}
.hero__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Pain points section ---------- */
.pain {
    padding: 100px 0;
}
.pain__head {
    text-align: left;
    max-width: 960px;
    margin: 0 auto 48px;
}
.pain__head .section-label {
    text-align: left;
    margin: 0 0 14px;
}
.pain__head h2 {
    font-family: var(--ff-serif);
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    margin: 0 0 18px;
    line-height: 1.2;
}
.pain__head p {
    color: var(--c-text-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 520px;
}
.pain__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}
.pain-card {
    background: #FBF5F5;
    border-radius: 16px;
    padding: 32px;
    display: block;
}
.pain-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    margin-bottom: 14px;
}
.pain-card__icon img { width: 40px; height: 40px; }
.pain-card h3 {
    font-family: var(--ff-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--c-plum);
    margin: 0 0 12px;
    line-height: 1.25;
}
.pain-card p {
    color: var(--c-text-muted);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 18px;
}
.pain-card__quote {
    font-style: italic;
    color: var(--c-plum-fade);
    font-size: 13.5px;
    line-height: 1.5;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--c-plum-fade);
}

/* ---------- Carousel (full-width strip, lekko wystający poza ekran + subtelny tilt) ---------- */
.carousel-strip {
    width: 100%;
    background: #F5E1E0;
    padding: 40px 0;
    overflow: hidden;
    line-height: 0;
}
.carousel-strip > img {
    display: block;
    width: 108%;
    max-width: none;
    height: auto;
    margin-left: -4%;
}

/* ---------- Solution section ---------- */
.solution {
    padding: 90px 0;
    text-align: center;
}
.solution h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    color: var(--c-plum);
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    max-width: 1100px;
    margin: 0 auto 22px;
    line-height: 1.2;
}
.solution p {
    max-width: 820px;
    margin: 0 auto;
    color: var(--c-text-muted);
    font-size: 17px;
}

/* ---------- How it works ---------- */
.how {
    padding: 90px 0;
    text-align: center;
}
.how__image {
    max-width: 900px;
    margin: 40px auto 36px;
    border-radius: 16px;
    overflow: hidden;
}
.how__image img {
    width: 100%;
    height: auto;
    display: block;
}
.how .section-label {
    display: block;
    text-align: center;
    margin-bottom: 12px;
}
.how h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.2;
    color: var(--c-plum);
    margin: 0 0 18px;
}
.how p {
    max-width: 640px;
    margin: 0 auto 44px;
    color: var(--c-plum);
    font-size: 15px;
    line-height: 1.6;
}
.how__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: transparent;
    color: #A7625B;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #A7625B;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.pill::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #A7625B;
    flex-shrink: 0;
}
.pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(62, 39, 48, .2);
}

/* ---------- Lessons grid ---------- */
.lessons {
    padding: 100px 0;
    text-align: left;
}
.lessons h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    color: var(--c-plum);
    margin: 0 0 50px;
}
.lessons__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}
.lesson {
    background: #fff;
    border: 1px solid #F6F3F4;
    border-left: 4px solid var(--c-plum);
    border-radius: 16px;
    padding: 28px 28px 30px;
    position: relative;
    box-shadow: 0 2px 10px -6px rgba(62, 39, 48, .08);
}
.lesson__time {
    display: inline-block;
    padding: 6px 14px;
    font-family: var(--ff-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--c-plum);
    background: #F1ECEE;
    border-radius: 999px;
    margin-bottom: 18px;
}
.lesson h3 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 24px;
    color: var(--c-plum);
    margin: 0 0 12px;
    line-height: 1.2;
}
.lesson p {
    color: var(--c-plum);
    font-family: var(--ff-sans);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Kolory border-left per karta (wg projektu) */
.lesson--c1 { border-left-color: #A0A69A; }
.lesson--c2 { border-left-color: #BD7C76; }
.lesson--c3 { border-left-color: #7F6169; }
.lesson--c4 { border-left-color: #DDCFD3; }
.lesson--c5 { border-left-color: #A0A69A; }
.lesson--c6 { border-left-color: #BD7C76; }
.lesson--c7 { border-left-color: #7F6169; }
.lesson--c8 { border-left-color: #DDCFD3; }

/* ---------- Teacher ---------- */
.teacher {
    padding: 100px 0;
}
.teacher__inner {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 70px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.teacher__photo {
    aspect-ratio: 3 / 4;
    border-radius: 0;
    overflow: hidden;
}
.teacher__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teacher__content .section-label {
    display: block;
    text-align: left;
    margin-bottom: 14px;
}
.teacher h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 3rem);
    color: var(--c-plum);
    line-height: 1.15;
    margin: 0 0 22px;
}
.teacher p {
    color: var(--c-plum);
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.65;
    max-width: 520px;
}
.teacher__features {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
    max-width: 520px;
}
.teacher__features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--c-plum);
    font-weight: 500;
}
.teacher__features li::before { content: none; }
.teacher__features li img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---------- Reviews ---------- */
.reviews {
    padding: 90px 0 100px;
    text-align: center;
}
.reviews__head {
    text-align: center;
    margin-bottom: 44px;
}
.reviews__head .section-label {
    display: inline-block;
    margin-bottom: 10px;
}
.reviews h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    color: var(--c-plum);
    line-height: 1.2;
    margin: 0;
}
/* Masonry layout — 4 columns on desktop, CSS columns naturally flow */
.reviews__masonry {
    column-count: 4;
    column-gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}
.review-item {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    border-radius: 4px;
    overflow: hidden;
    break-inside: avoid;
    background: #FFFFFF;
    border: 1px solid #DDCFD3;
    padding: 24px;
    position: relative;
    cursor: default;
}
.review-item--video {
    padding: 0;
    border: 0;
    background: #F3E9EC;
}
.review-item img {
    display: block;
    width: 100%;
    height: auto;
}
/* Video tile */
.review-item--video {
    cursor: pointer;
}
.review-item--video img {
    transition: transform .35s ease;
}
.review-item--video:hover img {
    transform: scale(1.02);
}
.review-item__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s;
    pointer-events: none;
}
.review-item__play img { width: 100%; height: 100%; display: block; }
.review-item--video:hover .review-item__play {
    transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 1024px) {
    .reviews__masonry { column-count: 3; }
}
@media (max-width: 720px) {
    .reviews__masonry { column-count: 2; column-gap: 14px; }
    .review-item { margin-bottom: 14px; border-radius: 14px; }
    .review-item__play { width: 64px; height: 64px; }
}
@media (max-width: 480px) {
    .reviews__masonry { column-count: 1; }
}

/* ---------- Pricing ---------- */
.pricing {
    padding: 90px 0 100px;
    text-align: center;
}
.pricing__head {
    margin-bottom: 40px;
}
.pricing__lotus {
    width: 42px;
    height: auto;
    margin: 0 auto 18px;
}
.pricing__lotus img {
    width: 100%;
    height: auto;
    display: block;
}
.pricing h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    color: var(--c-plum);
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.15;
    margin: 0 0 10px;
}
.pricing__sub {
    color: var(--c-plum);
    font-family: var(--ff-sans);
    font-size: 14px;
    margin: 0;
}

.pricing__box {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    padding: 30px;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    text-align: left;
    box-shadow: 0 10px 30px -12px rgba(62, 39, 48, .08);
}

/* promo (left) */
.pricing__promo {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 340 / 420;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background: #66474F;
    isolation: isolate;
}
.pricing__promo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}
.pricing__promo::after {
    /* bottom gradient fade to plum (Figma: transparent #4F363D -> #4F363D) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(79, 54, 61, 0) 0%, rgba(181, 150, 158, .4) 45%, #4F363D 100%);
    pointer-events: none;
}
.pricing__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pricing__play img { width: 100%; height: 100%; display: block; }
.pricing__play:hover { transform: translate(-50%, -50%) scale(1.06); }

.pricing__promo-copy {
    position: relative;
    z-index: 2;
    padding: 22px 22px 26px;
    text-align: center;
}
.pricing__promo-label {
    display: block;
    font-family: var(--ff-sans);
    font-size: 11px;
    letter-spacing: .22em;
    font-weight: 500;
    color: #F3E9EC;
    margin-bottom: 10px;
}
.pricing__promo-title {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    color: #fff;
}

/* details (right) */
.pricing__details {
    padding: 10px 10px 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pricing__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.pricing__rating-stars {
    color: #E8A13B;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
}
.pricing__rating-text {
    font-family: var(--ff-sans);
    font-size: 13.5px;
    color: var(--c-plum-soft);
}
.pricing__rating-text strong { font-weight: 600; color: var(--c-plum); }
.pricing__rating-divider {
    color: #C8B8BC;
    margin: 0 4px;
}

.pricing__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pricing__bullets li {
    position: relative;
    padding-left: 30px;
    font-family: var(--ff-sans);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--c-plum);
}
.pricing__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F8C5A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5L10 17.5L19 7.5'/></svg>");
}

.pricing__price-wrap {
    margin-bottom: 20px;
}
.pricing__price-caption {
    display: block;
    font-family: var(--ff-sans);
    font-size: 12.5px;
    color: var(--c-plum-soft);
    margin-bottom: 4px;
}
.pricing__price {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
    color: var(--c-plum);
    margin: 0;
}

.pricing__cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 0 0 12px;
}
.pricing__cta--ghost {
    /* secondary outlined CTA under primary */
}

/* outline button variant */
.btn--outline {
    background: transparent;
    color: var(--c-plum-soft);
    border: 1px solid var(--c-plum-soft);
}
.btn--outline:hover {
    background: var(--c-plum-soft);
    color: #fff;
}

@media (max-width: 720px) {
    .pricing__box {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }
    .pricing__box > * { min-width: 0; }
    .pricing__promo {
        aspect-ratio: 4 / 3;
        min-height: 320px;
        width: 100%;
    }
    .pricing__promo-title {
        font-size: 22px;
    }
    .pricing__details {
        padding: 6px 6px 14px;
        min-width: 0;
    }
    .pricing__price {
        font-size: 42px;
    }
    .pricing__cta {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .pricing__bullets li { word-wrap: break-word; }
}
html, body { overflow-x: hidden; }

/* ---------- FAQ ---------- */
.faq {
    padding: 100px 0;
}
.faq__head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 0 var(--gutter);
}
.faq__head .section-label {
    display: inline-block;
    margin-bottom: 10px;
}
.faq h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    color: var(--c-plum);
    margin: 0;
    line-height: 1.2;
}
.faq__list {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.faq__item {
    border-bottom: 1px solid #EADFE1;
}
.faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 26px 48px 26px 0;
    font-family: var(--ff-sans);
    font-size: 17px;
    color: var(--c-plum);
    font-weight: 500;
    position: relative;
    transition: color var(--t-fast);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    color: var(--c-plum);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    transition: transform var(--t-fast);
}
.faq__item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.faq__item__body {
    padding: 0 44px 24px 0;
    color: var(--c-plum);
    font-family: var(--ff-sans);
    font-size: 15px;
    line-height: 1.65;
}

/* ---------- Footer / CTA ---------- */
.site-footer {
    padding: 90px 0 40px;
    position: relative;
    overflow: hidden;
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.site-footer__copy .section-label {
    display: inline-block;
    margin-bottom: 14px;
}
.site-footer h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    color: var(--c-plum);
    line-height: 1.1;
    margin: 0 0 22px;
}
.site-footer__sub {
    color: var(--c-plum);
    font-family: var(--ff-sans);
    font-size: 15px;
    line-height: 1.6;
    max-width: 440px;
    margin: 0;
}

.site-footer__form-wrap {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 36px 36px 32px;
    box-shadow: 0 20px 40px -24px rgba(62, 39, 48, .12);
    max-width: 440px;
    width: 100%;
    justify-self: end;
}
.newsletter__badge {
    display: inline-block;
    background: #E4F1E4;
    color: #3F8C5A;
    font-family: var(--ff-sans);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.newsletter {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.newsletter input {
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid #E3D8DB;
    background: #fff;
    font-family: var(--ff-sans);
    font-size: 14.5px;
    color: var(--c-plum);
    transition: border-color var(--t-fast);
}
.newsletter input::placeholder {
    color: #B7A4AB;
}
.newsletter input:focus {
    outline: none;
    border-color: var(--c-plum);
}
.newsletter .btn {
    margin-top: 6px;
    align-self: stretch;
    justify-content: center;
}
.newsletter__note {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: #8E7681;
}

/* ---------- Contact / Dark footer ---------- */
.contact {
    background: #66474F;
    color: #fff;
    padding: 72px 0 60px;
}
.contact__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.contact__head h2 {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 16px;
}
.contact__head p {
    font-family: var(--ff-sans);
    font-size: 14.5px;
    line-height: 1.7;
    color: #E6D6DA;
    margin: 0;
}

.contact__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 60px;
    margin: 48px auto 60px;
    max-width: 1100px;
}
.contact__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-sans);
    font-size: 14.5px;
    color: #fff;
    text-decoration: none;
    transition: color .15s;
}
.contact__item:hover {
    color: #E9B1AB;
}
.contact__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    flex: 0 0 32px;
}
.contact__ico img { width: 18px; height: 18px; display: block; }

/* ---------- Lotus separator strip ---------- */
.separator-lotus {
    width: 100%;
    height: 70px;
    background-color: #A0A69A;
    background-image: url("../images/kwiat.svg");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 128px 46px;
}

/* ---------- Site bottom (dark bar) ---------- */
.site-bottom {
    background: #4F363D;
    color: rgba(255,255,255,.85);
    padding: 28px 0 22px;
    font-family: var(--ff-sans);
}
.site-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 16px;
}
.site-bottom__logo img {
    width: 206px;
    height: 58px;
    display: block;
}
.site-bottom__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.site-bottom__nav a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s;
}
.site-bottom__nav a:hover { color: #E9B1AB; }

.site-bottom__copy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
}
.site-bottom__copy ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}
.site-bottom__copy a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
}
.site-bottom__copy a:hover { color: #fff; }

@media (max-width: 720px) {
    .site-bottom__inner { flex-direction: column; align-items: flex-start; }
    .site-bottom__copy { flex-direction: column; align-items: flex-start; }
    .separator-lotus { height: 50px; background-size: 96px 34px; }
}

@media (max-width: 720px) {
    .contact { padding: 56px 0 40px; }
    .contact__list { gap: 18px; flex-direction: column; align-items: flex-start; margin: 36px 0 0; padding-left: 20px; }
}

/* ---------- Popup ---------- */
.popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.popup.is-open {
    display: flex;
}
.popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 20, 23, .55);
    backdrop-filter: blur(2px);
}
.popup__panel {
    position: relative;
    border-radius: 4px;
    max-width: 620px;
    width: 100%;
    padding: 82px 90px;
    color: #fff;
    background: url("../images/bg-popup.png") center/100% 100% no-repeat;
    box-shadow: 0 30px 80px rgba(31, 20, 23, .35);
    animation: popupIn .22s ease-out;
}
@keyframes popupIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Video variant */
.popup--video .popup__video-panel {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    animation: popupIn .22s ease-out;
    box-shadow: 0 30px 80px rgba(31, 20, 23, .35);
}
.popup--video .popup__video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}
.popup--video .popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}
.popup--video .popup__close:hover { background: rgba(0,0,0,.8); }

/* Vertical aspect video — poster 9:16 / 4:5 uses data attribute */
.popup--video[data-orientation="portrait"] .popup__video-panel {
    aspect-ratio: 9 / 16;
    max-width: 420px;
}
.popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s;
}
.popup__close:hover { background: rgba(255,255,255,.12); }

.popup__content {
    text-align: center;
}
.popup__label {
    display: block;
    font-family: var(--ff-sans);
    font-size: 12px;
    letter-spacing: .22em;
    font-weight: 500;
    color: #fff;
    margin-bottom: 14px;
}
.popup__title {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.15;
    color: #fff;
    margin: 0 0 32px;
}

.popup__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.popup__form input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.5);
    background: transparent;
    color: #fff;
    padding: 16px 22px;
    border-radius: 8px;
    font-family: var(--ff-sans);
    font-size: 15px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.popup__form input::placeholder {
    color: rgba(255,255,255,.75);
}
.popup__form input:focus {
    border-color: #fff;
    background: rgba(255,255,255,.06);
}
.popup__cta {
    margin-top: 18px;
    background: #fff;
    color: var(--c-plum);
    border-radius: 999px;
    padding: 16px 28px;
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 15px;
    border: 0;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.popup__cta:hover {
    background: #F6E4E4;
    color: var(--c-plum);
}

body.popup-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .popup__panel { padding: 44px 24px 32px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 1441px) {
    .hero__image { width: 515px; }
}

@media (max-width: 1100px) {
    .hero__inner { grid-template-columns: 1fr 380px; gap: 40px; }
    .hero__thumbs { display: none; }
}

@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 0; }
    .hero__image { max-width: 420px; margin: 0 auto; }
    .hero__content { text-align: center; margin: 0 auto; }
    .hero__desc { margin-left: auto; margin-right: auto; }
    .hero__thumbs { display: none; }

    .teacher__inner { grid-template-columns: 280px 1fr; gap: 40px; }

    .lessons__grid { grid-template-columns: repeat(2, 1fr); }

    .review { flex: 0 0 280px; max-width: 280px; }

    .site-footer__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .newsletter .btn { align-self: center; }
    .site-footer__sub { margin-left: auto; margin-right: auto; }
}

@media (max-width: 900px) {
    .site-header__inner { height: 72px; }
    .site-header__logo img { width: 160px; height: auto; }

    /* slide-in panel z prawej */
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 85vw);
        background: #fff;
        box-shadow: -20px 0 60px -20px rgba(62, 39, 48, .25);
        padding: 90px 28px 32px;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--t-med);
        z-index: 100;
    }
    .main-nav.is-open { transform: translateX(0); }

    .main-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
    }
    .main-nav > ul > li { width: 100%; display: block; }
    .main-nav a {
        justify-content: space-between;
        padding: 14px 18px;
        width: 100%;
        font-size: 17px;
        border-radius: 10px;
    }
    .main-nav a.btn--primary {
        justify-content: center;
        margin-top: 10px;
        padding: 16px 26px;
    }
    .nav-cart {
        width: 100%;
        height: 52px;
        border-radius: 10px;
        justify-content: flex-start;
        padding: 0 18px;
        margin-left: 0;
        gap: 12px;
        background: var(--c-cream-2);
    }
    .nav-cart:hover { background: var(--c-pink-100); opacity: 1; }
    .nav-cart img { width: 22px; height: 22px; }
    .nav-cart::after {
        content: "Koszyk";
        font-weight: 300;
        color: var(--c-plum);
        font-size: 17px;
        order: 2;
    }
    .nav-cart__count {
        position: static;
        transform: none;
        margin-left: auto;
        order: 3;
    }

    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: var(--c-cream-2);
        margin-top: 4px;
        max-height: 0;
        overflow: hidden;
        padding: 0 8px;
        transition: max-height var(--t-med), padding var(--t-med);
    }
    .has-submenu.is-open .submenu {
        max-height: 400px;
        padding: 8px;
    }

    .nav-toggle { display: inline-flex; }
}

@media (max-width: 720px) {

    .hero { padding: 20px 0 50px; }

    .pain { padding: 70px 0; }
    .pain__grid { grid-template-columns: 1fr; }
    .pain-card { padding: 24px; }

    .how { padding: 70px 0; }
    .solution { padding: 60px 0; }

    .lessons { padding: 70px 0; }
    .lessons__grid { grid-template-columns: 1fr; }

    .teacher { padding: 60px 0; }
    .teacher__inner { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .teacher__photo { max-width: 280px; margin: 0 auto; }
    .teacher__features { grid-template-columns: 1fr; max-width: 260px; margin: 24px auto 0; text-align: left; }

    .review { flex: 0 0 260px; max-width: 260px; }
    .pricing { padding: 70px 0; }
    .pricing__cards { grid-template-columns: 1fr; }

    .faq { padding: 70px 0; }

    .site-footer__bottom { flex-direction: column; text-align: center; }
    .site-footer__bottom ul { flex-wrap: wrap; justify-content: center; }
}