:root {
    --bg: #ffffff;
    --bg-alt: #f7fafc;
    --text: #0b1220;
    --muted: #4a5568;
    --brand: #0ea5e9;
    --brand-strong: #0284c7;
    --card: #ffffff;
    --border: #e2e8f0;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(180deg, var(--bg) 0%, #f8fafc 100%);
    color: var(--text);
}

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

/* ===== Header / Nav ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.75rem 0;
}

.brand {
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    white-space: nowrap;
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.main-nav a,
.main-nav a:visited {
    text-decoration: none;
}

/* Linki menu — „pastylki” */
.nav-link {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--text);
    padding: .5rem .9rem;
    border-radius: 9999px;
    display: inline-block;
    transition: background .18s ease, color .18s ease;
}

.nav-link:hover,
.nav-link:focus {
    background: rgba(14, 165, 233, .12);
    color: var(--brand-strong);
}

.nav-link.active {
    background: var(--brand);
    color: #fff;
}

/* Toggle (mobile) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: .4rem .6rem;
    border-radius: 10px;
}

/* ===== Language dropdown (jak na marga.lk) ===== */
.lang-switch {
    display: flex;
    align-items: center;
    margin-left: 2.5rem;
}

.lang-menu {
    position: relative;
}

.nav-pill {
    border-radius: 9999px;
    padding: .55rem 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1rem;
    border-radius: 9999px;
    background: var(--brand);
    color: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(2, 132, 199, .25);
}

.lang-trigger .flag {
    font-size: 1.05rem;
}

.lang-trigger .caret {
    transition: transform .18s ease;
}

.lang-menu.open .lang-trigger .caret {
    transform: rotate(180deg);
}

/* Lista języków — bez display:none (brak migotania) */
.lang-list {
    display: flex;
    flex-direction: column;

    align-items: stretch;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(2, 132, 199, .18), 0 6px 16px rgba(0, 0, 0, .06);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top right;
    transform: translateY(-4px) scale(.98);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    white-space: nowrap;
    will-change: opacity, transform;
    z-index: 1000;
}

.lang-menu.open .lang-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.lang-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    background: transparent;
    border: 0;
    border-radius: 14px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
}

.lang-item .flag {
    font-size: 1.05rem;
}

.lang-item:hover,
.lang-item:focus {
    background: rgba(14, 165, 233, .12);
    color: var(--brand-strong);
    outline: none;
}

.lang-item.active {
    background: var(--brand);
    color: #fff;
}

/* Mobile menu */
@media (max-width: 860px) {
    .nav-toggle {
        display: inline-block;
    }

    .main-nav {
        position: absolute;
        right: 1rem;
        top: 62px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: .75rem;
        display: none;
    }

    .main-nav.open {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: .5rem;
    }
}

/* ===== Sections ===== */
.section {
    padding: 48px 0 56px;
}

.section.alt {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.hero {
    padding: 120px 0 96px;
    text-align: center;
    background: radial-gradient(1000px 400px at 50% -10%, rgba(14, 165, 233, .15), transparent 60%);
}

.hero .lead {
    color: var(--muted);
    font-size: 1.15rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 860px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 860px) {
    .cards {
        grid-template-columns: 1fr;
    }
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.checklist {
    margin: 0;
    padding-left: 1.25rem;
}

.checklist li {
    margin: .5rem 0;
}

/* ===== Pricing ===== */
.pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 860px) {
    .pricing {
        grid-template-columns: 1fr;
    }
}

.price-card .price {
    font-size: 2rem;
    font-weight: 800;
    margin: .25rem 0 .75rem;
}

.price-card .bullets {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

.note {
    margin-top: .85rem;
    color: var(--muted);
}

/* ===== Buttons & form ===== */
.btn {
    display: inline-block;
    padding: .75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
}

.btn.primary {
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
    border: none;
    color: #fff;
}

label {
    display: grid;
    gap: .35rem;
    margin-bottom: .75rem;
}

input,
textarea {
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem .7rem;
}

input:focus,
textarea:focus {
    outline: 2px solid var(--brand-strong);
    border-color: transparent;
}

.form-status {
    min-height: 1.25rem;
    color: var(--muted);
}

/* ===== Contact tweaks ===== */
.map-card {
    height: 280px;
    padding: 0;
    overflow: hidden;
}

.contact-details {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.contact-details li {
    margin-bottom: 0.9rem;
}

.contact-details .label {
    font-weight: 600;
    margin-right: .3rem;
}

.contact-details a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
}

.contact-details a:hover {
    text-decoration: underline;
}

/* wyrównanie mapy do nagłówka Contact */
#contact .grid-2 {
    align-items: start;
}

#contact .map-card {
    margin-top: 2.4rem;
}

/* ===== Footer (minimal jak na marga.lk) ===== */
.site-footer.minimal {
    background: transparent;
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 1rem 0;
    color: #000;
    font-size: 0.95rem;
}

.site-footer.minimal .container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.site-footer.minimal p {
    margin: 0;
}

/* === LANG DROPDOWN — jak na marga === */
.lang-list {
    /* karta */
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    padding: 10px 14px;
    border: 1px solid #E3ECF6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(2, 132, 199, .16), 0 6px 14px rgba(0, 0, 0, .06);

    /* układ */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    /* <<< WYŚRODKOWANIE POZYCJI */
    gap: 8px;

    /* anty-glitch (bez display:none) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 1000;
}

.lang-menu.open .lang-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* pozycje języków — pastylka wokół treści, wycentrowana */
.lang-item {
    display: inline-flex;
    /* pastylka obejmuje treść, nie 100% szerokości */
    align-items: center;
    gap: .55rem;
    padding: .52rem .95rem;
    border-radius: 9999px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.lang-item .flag {
    font-size: 1.1rem;
    line-height: 1;
}

.lang-item:hover,
.lang-item:focus {
    background: rgba(14, 165, 233, .12);
    color: var(--text);
    outline: none;
}

.lang-item.active {
    background: var(--brand);
    /* niebieska pastylka jak na marga */
    color: #fff;
}

/* sam trigger – trochę lżejszy, jak na marga */
.lang-trigger {
    padding: .6rem 1.1rem !important;
    border-radius: 9999px !important;
    background: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(2, 132, 199, .20) !important;
}

/* === MATCH SCREENSHOT: tekstowy trigger + zielona belka u góry panelu === */

/* 1) Trigger: bez pastylki, tylko tekst + flaga */
.lang-trigger {
    background: transparent !important;
    color: var(--text) !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.lang-trigger .caret {
    border: 0;
}

/* 2) Panel dropdowna */
.lang-list {
    top: calc(100% + 12px) !important;
    padding: 0 !important;
    /* zero padding – belka aktywna wchodzi na pełną szerokość */
    border: 1px solid #e7eef6 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .06) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* 3) Wnętrze panelu: sekcja z pozostałymi językami pod aktywną belką */
.lang-list>li {
    padding: 10px 14px;
}

/* 4) Elementy listy – domyślnie bez tła, tylko hover */
.lang-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    padding: .55rem .75rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.lang-item .flag {
    font-size: 1.1rem;
    line-height: 1;
}

.lang-item:hover,
.lang-item:focus {
    background: rgba(0, 0, 0, .04) !important;
    /* delikatny szary hover jak na screenie */
    color: var(--text) !important;
    outline: none !important;
}

/* 5) AKTYWNY język = pełna zielona belka na górze panelu */
:root {
    --brand-blue: #0ea5e9;
    /* zbliżony do screena; podmień jeśli masz dokładny HEX */
}

.lang-item.active {
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    /* zaokrąglone górne rogi jak na screenie */
    padding: .7rem 1rem !important;
    background: var(--brand-blue) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* dla estetyki: cienka linia pod belką aktywną */
.lang-item.active+li {
    border-top: 1px solid #eef3f7;
}

/* 6) Anti-glitch – zostawiamy opacity/visibility (masz już w pliku) */

/* Belka aktywnego języka na pełną szerokość panelu */
.lang-list {
    overflow: hidden;
}

/* żeby zielone tło ładnie docinały zaokrąglenia */

.lang-item.active {
    margin: 0 -14px;
    /* kompensuje padding li (10px 14px) */
    width: calc(100% + 28px);
    /* pełna szerokość karty */
    border-radius: 18px 18px 0 0 !important;
    padding: .7rem 1rem !important;
    /* jak wcześniej */
}

/* jeśli zmienisz padding w .lang-list > li, zaktualizuj powyższe wartości */

/* === LANG DROPDOWN — aktywna belka na pełną szerokość panelu === */

/* Panel ma tylko zewnętrzny padding */
.lang-list {
    padding: 12px 22px !important;
    /* odstęp od krawędzi panelu */
    overflow: hidden;
    /* ładne docięcie zaokrągleń */
}

/* Usuń wewnętrzny padding na li */
.lang-list>li {
    padding: 0 !important;
}

/* Przenieś padding na element pozycji i rozciągnij na 100% szerokości panelu */
.lang-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    padding: .6rem .9rem !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    text-align: left !important;
}

/* Aktywny język: pełna szerokość, równo do krawędzi wewnątrz panelu */
.lang-item.active {
    background: var(--brand-blue, #0ea5e9) !important;
    color: #fff !important;
    border-radius: 14px !important;
}

/* === LANG DROPDOWN — belka aktywna dokładnie na całą szerokość === */

/* Panel bez wewnętrznych paddingów */
.lang-list {
    padding: 0 !important;
    overflow: hidden;
    /* docięcie do zaokrągleń panelu */
}

/* Bez odstępów na <li> */
.lang-list>li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Wszystkie pozycje mają padding wewnątrz przycisku i zajmują 100% szerokości */
.lang-item {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    width: 100% !important;
    padding: .75rem 22px !important;
    /* boczne „marginesy” wewnątrz panelu */
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    text-align: left !important;
}

/* Aktywny język = pełna belka edge-to-edge */
.lang-item.active {
    background: var(--brand-blue, #0ea5e9) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    /* bez zaokrągleń – żadnych białych „ramek” */
}

/* Opcjonalnie: jeśli aktywny jest pierwszy/ostatni element, domknij zaokrąglenia panelu */
.lang-list>li:first-child .lang-item.active {
    border-radius: 18px 18px 0 0 !important;
}

.lang-list>li:last-child .lang-item.active {
    border-radius: 0 0 18px 18px !important;
}

/* Ujednolicenie fontu w dropdownie języka z menu głównym */
.lang-item {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    /* tak jak .nav-link */
}

/* Flaga + skrót języka w triggerze */
.lang-trigger .flag {
    font-size: 1.2rem;
}

/* Większy dystans od "Contact" */
.lang-switch {
    margin-left: 1.5rem !important;
}

.lang-trigger {
    gap: .5rem;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* odstęp między flagą a skrótem */
}

.lang-trigger .flag {
    font-size: 1.2rem;
    line-height: 1;
}

/* === HOVER JAK W MENU dla przycisku języka === */
.lang-trigger {
    /* zachowujemy kształt i oddech pastylki, ale bez tła */
    padding: .55rem 1rem !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: var(--text) !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background .18s ease, color .18s ease;
    /* jak .nav-link */
    cursor: pointer;
}

.lang-trigger:hover,
.lang-trigger:focus-visible {
    background: rgba(14, 165, 233, .12) !important;
    /* jak .nav-link:hover */
    color: var(--brand-strong) !important;
    outline: none;
    /* fokus przenosimy na kolor, jak w menu */
}

/* --- LANG DROPDOWN: minimalna szerokość + wycentrowanie względem triggera --- */
.lang-menu {
    position: relative;
}

.lang-list {
    left: 50% !important;
    right: auto !important;
    min-width: 160px !important;
    /* 🔹 minimalna szerokość panelu */
    max-width: calc(100vw - 24px);
    width: auto !important;
    /* rośnie jeśli tekst dłuższy */

    transform-origin: top center !important;
    transform: translate(calc(-50% + var(--shift, 0px)), -4px) scale(.98) !important;
}


/* wewnętrzne odstępy delikatne, żeby panel „nie puchł” */
.lang-item {
    padding: .55rem .8rem !important;
}

/* === HERO jak na marga.lk === */
.hero.hero--image {
    position: relative;
    padding: 140px 0 120px;
    /* więcej powietrza */
    color: #fff;
    /* tekst na zdjęciu */
    background: #0b122090;
    /* fallback, gdyby obraz się nie wczytał */
    overflow: clip;
    min-height: 68vh;
    /* „prawie pełny ekran” */
    display: grid;
    place-items: center;
    text-align: center;
}

/* tło hero – ustaw swój plik w assets */
.hero.hero--image {
    background-image: url('assets/surfers.jpg');
    background-size: cover;
    background-position: center;
}

/* miękki overlay dla czytelności tekstu */
.hero.hero--image .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
}

/* typografia jak na marga: emoji + akcent marki */
.hero-title {
    font-weight: 800;
    font-size: clamp(1.8rem, 3.5vw + 1rem, 3rem);
    line-height: 1.15;
    margin: 0 0 .75rem;
    letter-spacing: .2px;
}

.hero-title .emoji {
    margin-right: .5rem;
}

.hero-title .accent {
    color: var(--brand);
}

.hero .lead {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    margin: 0 0 1.25rem;
}

/* przycisk na tle zdjęcia — już masz .btn.primary; tu tylko drobna korekta */
.hero .btn.primary {
    box-shadow: 0 10px 24px rgba(2, 132, 199, .28);
}

/* mobile */
@media (max-width: 860px) {
    .hero.hero--image {
        padding: 120px 0 96px;
        min-height: 62vh;
    }
}

/* === Quote in About section === */
.quote {
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    color: var(--brand-strong);
    margin: 0 0 1.5rem;
    padding-left: 1.2rem;
    border-left: 4px solid var(--brand);
}

/* About us — image on the right */
.about-image {
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 2.4rem;
    /* tak jak mapka w Contact */
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

#about .grid-2 {
    align-items: center;
    /* zamiast start */
}

.about-image {
    margin-top: 0;
    /* usuń podnoszenie jak w Contact */
}

/* ===== OFFER ===== */

/* Blok oferty (Lekcje / Sklep / Wycieczki) */
.offer-block {
    margin-bottom: 2.25rem;
}

.offer-block h3 {
    margin: 0 0 .6rem;
    /* bliżej treści */
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-strong);
    display: flex;
    align-items: center;
    gap: .5rem;
    /* miejsce dla emoji */
}

/* Delikatne wcięcie dla treści pod nagłówkiem */
.offer-content {
    margin-left: 1.2rem;
}

.offer-content p {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
    /* wstęp trochę mocniejszy niż muted */
    font-weight: 500;
}

/* Listy wewnątrz oferty (nie mylić z .checklist z innych sekcji) */
.offer-content ul {
    margin: 0;
    padding-left: 1.15rem;
    /* standardowy wcięty bullet */
    line-height: 1.55;
}

.offer-content li {
    margin-bottom: .5rem;
}

/* === PODSEKCJA: 3 karty poziomów lekcji === */
.lesson-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.lesson-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1.2rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.lesson-card h4 {
    margin: 0 0 .6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-strong);
}

.lesson-card ul {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.55;
}

.lesson-card li {
    margin-bottom: .45rem;
}

/* Responsywność */
@media (max-width: 860px) {
    .offer-content {
        margin-left: .8rem;
    }

    .lesson-cards {
        grid-template-columns: 1fr;
    }
}

/* Pricing cards – lekcje */
/* Karty cen */
.pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.price-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.8rem 1.4rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    text-align: center;
    /* 🔹 wyśrodkowanie treści */
    transition: transform .2s ease, box-shadow .2s ease;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.price-card h4 {
    margin-top: 0;
    margin-bottom: .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-strong);
}

.price-card .note {
    font-size: .95rem;
    color: var(--muted);
    margin: 0 0 1rem;
}

.price-card .bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.price-card .bullets li {
    display: flex;
    justify-content: space-between;
    /* 🔹 nazwa po lewej, cena po prawej */
    align-items: center;
    padding: .4rem .75rem;
    border-radius: 8px;
    background: var(--bg-alt);
    margin-bottom: .5rem;
    font-size: 1rem;
}

.price-card .bullets li span {
    font-weight: 500;
    color: var(--text);
}

.price-card .bullets li strong {
    font-weight: 700;
    color: var(--brand-strong);
}

/* Wypożyczalnia – większa cena */
.price-card .price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-strong);
    margin: .5rem 0 0;
}


@media (max-width: 860px) {
    .pricing {
        grid-template-columns: 1fr;
    }
}

.highlight-note {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--brand-strong);
    text-align: center;
    background: transparent;
    /* brak tła */
    border: 0;
    /* brak ramki */
    position: relative;
}

.highlight-note::before,
.highlight-note::after {
    content: '"';
    font-size: 2rem;
    color: var(--brand-strong);
    position: absolute;
}

.highlight-note::before {
    left: -0.5rem;
    top: -0.5rem;
}

.highlight-note::after {
    right: -0.5rem;
    bottom: -0.5rem;
}


.lesson-duration {
    display: block;
    text-align: center;
    margin: 1.5rem 0 1.2rem;
    padding: .8rem 1.2rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-strong);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.highlight-note--ribbon {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-strong);
    padding: .8rem 1rem;
    position: relative;
}

.highlight-note--ribbon::before,
.highlight-note--ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    opacity: .25;
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
}

.highlight-note--ribbon::before {
    top: 0;
}

.highlight-note--ribbon::after {
    bottom: 0;
}

#contact {
    scroll-margin-top: 80px;
}

/* === Co zawiera każda lekcja (poziome „features”) === */
.lesson-includes {
    margin-top: 2rem;
}

.lesson-includes__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-strong);
}

/* siatka pozioma jak w załączniku */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 obok siebie */
    gap: 1rem;
}

/* pojedynczy „chip” z dużą ikoną */
.feature {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: .9rem 1rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.feature__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    /* duża emoji */
    line-height: 1;
    border-radius: 14px;
    background: var(--bg-alt);
    /* delikatne tło pod ikoną */
}

.feature__text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

/* responsywka */
@media (max-width: 860px) {
    .features {
        grid-template-columns: 1fr;
    }

    /* na tel. pionowo */
}

/* === RENTAL – karty === */
.rental-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 1.25rem;
}

.rental-card {
    position: relative;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.4rem 1.2rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rental-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.rental-card.featured {
    border-color: var(--brand);
    box-shadow: 0 14px 30px rgba(2, 132, 199, .15);
}

.rental-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: .8rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 9999px;
}

.rental-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin: 0 auto .5rem;
    display: grid;
    place-items: center;
    font-size: 2rem;
    line-height: 1;
    border-radius: 14px;
    background: var(--bg-alt);
}

.rental-card h4 {
    margin: .25rem 0 .25rem;
    font-weight: 800;
    color: var(--brand-strong);
}

.rental-duration {
    margin: 0 0 .4rem;
    color: var(--muted);
    font-weight: 600;
}

.rental-price {
    margin: .2rem 0 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
}

.rental-price .currency {
    font-size: .9rem;
    font-weight: 700;
    color: var(--muted);
    margin-right: .25rem;
}

/* === RENTAL – pasek czasu (porównanie) === */
/* === RENTAL – pasek czasu (porównanie) === */
.rental-timeline {
    margin: 3.5rem 0 0;
    /* 🔹 większy odstęp od góry */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.rental-timeline__bar {
    position: relative;
    height: 10px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
}

.rental-timeline__bar--half {
    width: 48%;
    opacity: .4;
}

.rental-timeline__bar--full {
    width: 100%;
    opacity: .6;
}

/* etykieta na końcu kreski */
.rental-timeline__label {
    position: absolute;
    top: -1.6rem;
    /* nad kreską */
    right: 0;
    /* na końcu kreski */
    transform: translateX(50%);
    /* lekko odsunięta w prawo */
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.rental-duration {
    margin: 0 0 .8rem;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    /* 🔹 linia */
    padding-bottom: .6rem;
    /* oddech od linii */
}



/* Responsywka */
@media (max-width:860px) {
    .rental-cards {
        grid-template-columns: 1fr;
    }

    .rental-timeline__labels {
        font-size: .9rem;
    }
}

/* === LEKCJE SURFINGU – karty === */
.lesson-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.lesson-card {
    position: relative;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.4rem 1.2rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lesson-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.lesson-card.featured {
    border-color: var(--brand);
    box-shadow: 0 14px 30px rgba(2, 132, 199, .15);
}

.lesson-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: .8rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 9999px;
}

.lesson-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin: 0 auto .5rem;
    display: grid;
    place-items: center;
    font-size: 2rem;
    line-height: 1;
    border-radius: 14px;
    background: var(--bg-alt);
}

.lesson-card h4 {
    margin: .25rem 0 .25rem;
    font-weight: 800;
    color: var(--brand-strong);
}

.lesson-note {
    margin: 0 0 .8rem;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    /* 🔹 odcięcie */
    padding-bottom: .6rem;
}

.lesson-prices {
    margin-top: .6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.lesson-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.lesson-price-row .level {
    color: var(--muted);
}

.lesson-price-row .price {
    font-weight: 800;
}

.lesson-price-row .currency {
    font-size: .9rem;
    font-weight: 700;
    color: var(--muted);
    margin-right: .25rem;
}

/* responsywka */
@media (max-width: 960px) {
    .lesson-cards {
        grid-template-columns: 1fr;
    }
}

/* === CO ZAWIERA KAŻDA LEKCJA – karty === */
.lesson-includes {
    margin-top: 3rem;
}

.lesson-includes h3 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-strong);
    text-align: center;
}

.lesson-includes-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 1.25rem;
}

.include-card {
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.4rem 1.2rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.include-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.include-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto .75rem;
    display: grid;
    place-items: center;
    font-size: 2rem;
    line-height: 1;
    border-radius: 14px;
    background: var(--bg-alt);
}

.include-card h4 {
    margin: 0 0 .5rem;
    font-weight: 700;
    color: var(--brand-strong);
    font-size: 1.1rem;
}

.include-card p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
}

/* responsywka */
@media (max-width: 960px) {
    .lesson-includes-cards {
        grid-template-columns: 1fr;
    }
}

.level-desc {
    margin: 0 0 1rem;
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.5;
    text-align: center;
    border-bottom: 1px solid var(--border);
    /* 🔹 linia pod opisem */
    padding-bottom: .6rem;
    /* 🔹 oddech od linii */
}

/* === OFERTA → Lekcje surfingu (3 kolumny) === */
.offer-intro {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}

.lesson-levels {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
    gap: 1.25rem !important;
}

/* Karta poziomu */
.lesson-level-card {
    position: relative;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.4rem 1.2rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lesson-level-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.lesson-level-card.featured {
    border-color: var(--brand);
    box-shadow: 0 14px 30px rgba(2, 132, 199, .15);
}

.lesson-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
    padding: .25rem .6rem;
    border-radius: 9999px;
}

.lesson-level-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto .75rem;
    display: grid;
    place-items: center;
    font-size: 2rem;
    line-height: 1;
    border-radius: 14px;
    background: var(--bg-alt);
}

.lesson-level-card h4 {
    margin: 0 0 .75rem;
    font-weight: 800;
    color: var(--brand-strong);
}

.level-desc {
    margin: 0 0 1rem;
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.5;
    text-align: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: .6rem;
}

.lesson-level-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: .95rem;
    line-height: 1.6;
}

.lesson-level-card li {
    margin-bottom: .45rem;
    padding-left: 1.25rem;
    position: relative;
}

.lesson-level-card li::before {
    content: "✔️";
    position: absolute;
    left: 0;
    top: 0;
}

/* Responsywka */
@media (max-width: 960px) {
    .lesson-levels {
        grid-template-columns: 1fr !important;
    }
}

/* 1) Spójny odstęp pod wszystkimi h3 w Cenniku */
#pricing h3 {
    margin: 0 0 1.25rem;
    /* nagłówek → karty */
    line-height: 1.2;
}

/* 2) Daj oddech po bloku "Co zawiera każda lekcja?" */
#pricing .lesson-includes {
    margin-bottom: 2.25rem;
}

/* 3) Jeżeli w Cenniku są kolejne offer-blocki, to drugi i następne dostają górny margines */
#pricing .offer-block+.offer-block {
    margin-top: 2.25rem;
    /* "Wypożyczalnia…" odsunie się od poprzedniego bloku */
}

/* 4) Minimalny bufor nad siatką kart w "Wypożyczalni" (gdyby coś nadpisywało margines h3) */
#pricing .offer-content {
    margin-top: .25rem;
}

/* --- RENTAL TIMELINE: etykieta kończy się na końcu paska --- */
.rental-timeline__bar {
    position: relative;
}

/* Etykieta zajmuje całą szerokość paska i jest wyrównana do prawej */


.rental-timeline__label {
    position: absolute;
    top: -1.6rem;
    right: 0;
    transform: translateX(50%);
    /* wystaje za pasek */
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* --- RENTAL LABEL: desktop domyślnie wystaje za pasek --- */
.rental-timeline__label {
    /* zamiast stałej wartości używamy zmiennej */
    transform: translateX(var(--label-shift, 50%));
}

/* --- MOBILE: etykieta kończy się dokładnie na końcu paska --- */
@media (max-width: 1200px) {
    .rental-timeline {
        --label-shift: 0%;
    }
}