/* =========================================================
   KidsPRO — wspólny arkusz stylów
   Strony: kidspro-lp.html (body.lp) · kidspro-rezerwacja.html (body.rez)
   Sekcje: WSPÓLNE → LP → REZERWACJA
   ========================================================= */

/* ---------------- WSPÓLNE: tokeny ---------------- */
:root {
    --ink: #0E1A2B;
    --ink-soft: #22344C;
    --paper: #F3F6FA;
    --paper-2: #FFFFFF;
    --line: #C9D6E4;
    --amber: #E8A317;
    --amber-deep: #B97D08;
    --red: #D14B30;
    --mut: #5C6E84;
    --mut-on-ink: #9FB1C6;
}

/* ---------------- WSPÓLNE: reset i typografia ---------------- */
* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Sans",system-ui,sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

    body.lp {
        font-size: 18px
    }

h1, h2, h3 {
    font-family: "Space Grotesk",sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0
}

p {
    margin: 0
}

a {
    color: inherit
}

/* .wrap różni się szerokością/marginesem między stronami → klasa na body */
.lp .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px
}

.rez .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px
}

/* ---------------- WSPÓLNE: eyebrow ---------------- */
.eyebrow {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amber-deep);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .eyebrow::before {
        content: "";
        width: 24px;
        height: 2px;
        background: var(--amber);
        display: inline-block
    }

/* ---------------- WSPÓLNE: pasek górny ---------------- */
.bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(14,26,43,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.bar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px
}

.brand {
    font-family: "Space Grotesk";
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    font-size: 19px;
    text-decoration: none
}

    .brand b {
        color: var(--amber)
    }

/* ---------------- WSPÓLNE: przyciski ---------------- */
.btn {
    display: inline-block;
    font-family: "IBM Plex Sans";
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-radius: 2px;
    padding: 15px 26px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s, color .15s, border-color .15s;
}

.btn--primary {
    background: var(--amber);
    color: var(--ink)
}

    .btn--primary:hover {
        transform: translateY(-2px)
    }

.btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.35)
}

    .btn--ghost:hover {
        border-color: var(--amber);
        color: var(--amber)
    }

.btn--block {
    display: block;
    width: 100%;
    text-align: center
}

.btn:active {
    transform: none
}

/* ---------------- WSPÓLNE: stopka ---------------- */
footer {
    background: var(--ink);
    color: var(--mut-on-ink);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 24px 0;
    font-size: 13.5px;
    font-family: "IBM Plex Mono",monospace
}

    footer b {
        color: #fff;
        font-weight: 500
    }

    footer a {
        text-decoration: none;
        color: var(--amber)
    }


/* =========================================================
   LP — kidspro-lp.html
   ========================================================= */
.nav {
    display: flex;
    align-items: center;
    gap: 28px
}

    .nav a {
        font-family: "IBM Plex Mono",monospace;
        font-size: 13px;
        letter-spacing: .04em;
        text-decoration: none;
        color: var(--mut-on-ink);
        transition: color .15s
    }

        .nav a:hover {
            color: #fff
        }

.bar .btn {
    padding: 10px 18px;
    font-size: 14px
}

/* hero */
.hero {
    background: var(--ink);
    color: #fff;
    position: relative;
    overflow: hidden
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
        background-size: 24px 24px;
        opacity: .5;
        pointer-events: none
    }

.hero__in {
    position: relative;
    padding: 84px 0 0;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 60px;
    align-items: center
}

.hero h1 {
    font-size: clamp(40px,4.6vw,55px);
    margin: 20px 0 0;
    max-width: 16ch
}

.hero__lead {
    color: var(--mut-on-ink);
    font-size: 21px;
    margin-top: 22px;
    max-width: 44ch
}

    .hero__lead b {
        color: #fff;
        font-weight: 600
    }

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px
}

.sig {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    padding: 26px 24px 18px;
    background: rgba(255,255,255,.025)
}

    .sig svg {
        display: block;
        width: 100%;
        height: auto
    }

.sig__cap {
    font-family: "IBM Plex Mono",monospace;
    font-size: 13px;
    color: var(--mut-on-ink);
    margin-top: 12px;
    letter-spacing: .02em
}

    .sig__cap b {
        color: var(--red);
        font-weight: 500
    }

/* hero — pasek faktów */
.facts {
    position: relative;
    margin-top: 64px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-wrap: wrap
}

    .facts div {
        flex: 1 1 0;
        min-width: 170px;
        padding: 20px 0;
        font-family: "IBM Plex Mono",monospace;
        font-size: 13px;
        letter-spacing: .03em;
        color: var(--mut-on-ink);
        border-left: 1px solid rgba(255,255,255,.12);
        padding-left: 20px
    }

        .facts div:first-child {
            border-left: 0;
            padding-left: 0
        }

    .facts b {
        color: #fff;
        font-weight: 500
    }

/* sekcje */
.sec {
    padding: 104px 0;
    border-bottom: 1px solid var(--line)
}

.sec--alt {
    background: var(--paper-2)
}

.row {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 72px;
    align-items: center
}

.row--flip .row__text {
    order: 2
}

.row--flip .row__media {
    order: 1
}

.row__text {
    position: relative
}

.ghostnum {
    position: absolute;
    top: -92px;
    left: -10px;
    z-index: 0;
    pointer-events: none;
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 170px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(14,26,43,.10);
}

.row__text > * {
    position: relative;
    z-index: 1
}

.sec h2 {
    font-size: clamp(30px,3.1vw,44px);
    margin-top: 16px;
    max-width: 18ch
}

.sec__body {
    margin-top: 18px;
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 46ch
}

    .sec__body b {
        color: var(--ink);
        font-weight: 600
    }

    .sec__body + .sec__body {
        margin-top: 15px
    }

.map {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

    .map li {
        font-family: "IBM Plex Mono",monospace;
        font-size: 15px;
        color: var(--mut);
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap
    }

    .map s {
        color: var(--mut);
        text-decoration: line-through;
        text-decoration-color: var(--red);
        text-decoration-thickness: 1.5px
    }

    .map em {
        font-style: normal;
        color: var(--ink);
        font-weight: 600
    }

    .map span {
        color: var(--amber-deep)
    }

.gain {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--line)
}

    .gain li {
        padding: 16px 0;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 16px;
        align-items: baseline
    }

.gain__n {
    font-family: "IBM Plex Mono",monospace;
    font-size: 13px;
    color: var(--amber-deep);
    flex: none;
    width: 30px
}

.gain b {
    font-weight: 600
}

.pull {
    margin: 30px 0 0;
    padding: 22px 26px;
    border-left: 3px solid var(--amber);
    background: var(--paper)
}

    .pull p {
        font-family: "Space Grotesk";
        font-weight: 600;
        font-size: 26px;
        line-height: 1.22
    }

.stat {
    display: flex;
    gap: 18px;
    align-items: baseline;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.stat__n {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: clamp(40px,7vw,52px);
    line-height: .9;
    color: var(--amber-deep);
    flex: none
}

.stat__txt {
    font-size: 15.5px;
    color: var(--ink-soft);
    max-width: 32ch;
    line-height: 1.45
}

.stat__src {
    display: block;
    font-family: "IBM Plex Mono",monospace;
    font-size: 12px;
    color: var(--mut);
    margin-top: 8px;
    letter-spacing: .01em
}

/* zdjęcia */
.shot {
    margin: 0
}

.shot__img {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--paper-2)
}

.shot__cap {
    margin-top: 11px;
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--mut)
}

    .shot__cap b {
        color: var(--ink-soft);
        font-weight: 500
    }

.shot__tag {
    color: var(--amber-deep);
    font-weight: 500;
    margin-right: 6px
}

/* sekcja zamykająca */
.close {
    background: var(--ink);
    color: #fff;
    text-align: center;
    border-bottom: 0
}

    .close .eyebrow {
        color: var(--amber);
        justify-content: center
    }

        .close .eyebrow::before {
            display: none
        }

    .close h2 {
        color: #fff;
        font-size: clamp(32px,3.4vw,48px);
        max-width: 18ch;
        margin: 14px auto 0
    }

.close__meta {
    font-family: "IBM Plex Mono",monospace;
    font-size: 14px;
    color: var(--mut-on-ink);
    margin-top: 18px;
    letter-spacing: .02em
}

.close .btn {
    margin-top: 28px
}

/* reveal przy scrollu */
.rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease
}

    .rv.in {
        opacity: 1;
        transform: none
    }

/* LP — zwijanie do jednej kolumny */
@media(max-width:980px) {
    .nav {
        display: none
    }

    .lp .wrap {
        padding: 0 22px
    }

    .hero__in {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 56px 0 0
    }

    .row {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .row--flip .row__text {
        order: 1
    }

    .row--flip .row__media {
        order: 2
    }

    .ghostnum {
        display: none
    }

    .sec {
        padding: 64px 0
    }

    .facts div {
        flex-basis: 50%;
        border-left: 0;
        padding-left: 0
    }
}


/* =========================================================
   REZERWACJA — kidspro-rezerwacja.html
   ========================================================= */
.bar__back {
    font-family: "IBM Plex Mono",monospace;
    font-size: 13px;
    color: var(--mut-on-ink);
    text-decoration: none
}

    .bar__back:hover {
        color: #fff
    }

/* nagłówek */
.head {
    background: var(--ink);
    color: #fff;
    position: relative;
    overflow: hidden
}

    .head::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
        background-size: 22px 22px;
        opacity: .5;
        pointer-events: none
    }

.head__in {
    position: relative;
    padding: 42px 0 36px;
    max-width: 40ch
}

.head h1 {
    font-size: clamp(28px,6.6vw,42px);
    margin: 16px 0 0
}

.head p {
    color: var(--mut-on-ink);
    font-size: clamp(16px,4vw,18px);
    margin-top: 14px
}

    .head p b {
        color: #fff;
        font-weight: 600
    }

/* układ główny */
.main {
    padding: 40px 0 56px
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px
}

/* karta formularza */
.card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 26px 22px;
    box-shadow: 0 1px 0 rgba(14,26,43,.02)
}

.card__lead {
    font-size: 15px;
    color: var(--mut);
    font-family: "IBM Plex Mono",monospace;
    margin-bottom: 20px
}

.field {
    margin-bottom: 18px
}

    .field label {
        display: block;
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 7px
    }

    .field .opt {
        font-family: "IBM Plex Mono",monospace;
        font-size: 12px;
        color: var(--mut);
        font-weight: 400;
        letter-spacing: .02em
    }

    .field input {
        width: 100%;
        font-family: "IBM Plex Sans";
        font-size: 17px;
        color: var(--ink);
        padding: 14px 15px;
        border: 1.5px solid var(--line);
        border-radius: 4px;
        background: #fff;
        transition: border-color .15s, box-shadow .15s;
    }

        .field input::placeholder {
            color: #9AAabb
        }

        .field input:focus {
            outline: none;
            border-color: var(--amber);
            box-shadow: 0 0 0 3px rgba(232,163,23,.18)
        }

        .field input:invalid:not(:placeholder-shown) {
            border-color: var(--red)
        }

.err {
    display: none;
    color: var(--red);
    font-size: 13px;
    margin-top: 6px;
    font-family: "IBM Plex Mono",monospace
}

.micro {
    margin-top: 14px;
    font-family: "IBM Plex Mono",monospace;
    font-size: 12px;
    color: var(--mut);
    line-height: 1.5
}

    .micro b {
        color: var(--ink-soft);
        font-weight: 500
    }

/* kroki / uspokojenie */
.aside h2 {
    font-size: 22px;
    margin-bottom: 6px
}

.steps {
    list-style: none;
    margin: 18px 0 0;
    padding: 0
}

    .steps li {
        display: flex;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        align-items: baseline
    }

        .steps li:first-child {
            border-top: 1px solid var(--line)
        }

.steps__n {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12px;
    color: var(--amber-deep);
    flex: none;
    width: 24px
}

.steps p {
    font-size: 16px;
    color: var(--ink-soft)
}

.steps b {
    color: var(--ink);
    font-weight: 600
}

.note {
    margin-top: 24px;
    padding: 18px 20px;
    border-left: 3px solid var(--amber);
    background: var(--paper-2)
}

    .note p {
        font-size: 16px;
        color: var(--ink-soft)
    }

    .note b {
        color: var(--ink);
        font-weight: 600
    }

.call {
    margin-top: 20px;
    font-family: "IBM Plex Mono",monospace;
    font-size: 14px;
    color: var(--mut)
}

    .call a {
        color: var(--amber-deep);
        text-decoration: none;
        font-weight: 500
    }

/* stan potwierdzenia */
.done {
    display: none;
    text-align: center;
    padding: 14px 4px
}

    .done.show {
        display: block
    }

.card.sent .form-body {
    display: none
}

.done__mark {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(232,163,23,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px
}

.done h3 {
    font-size: 22px;
    margin-bottom: 8px
}

.done p {
    color: var(--mut);
    font-size: 16px;
    max-width: 34ch;
    margin: 0 auto
}

    .done p b {
        color: var(--ink);
        font-weight: 600
    }

/* REZERWACJA — desktop */
@media(min-width:820px) {
    body.rez {
        font-size: 18px
    }

    .rez .wrap {
        padding: 0 40px
    }

    .head__in {
        padding: 64px 0 52px
    }

    .main {
        padding: 56px 0 80px
    }

    .grid {
        grid-template-columns: 1.05fr .95fr;
        gap: 60px;
        align-items: start
    }

    .card {
        padding: 34px 32px;
        position: sticky;
        top: 84px
    }

    .aside h2 {
        font-size: 26px
    }
}

/* WSPÓLNE: ograniczenie animacji */
@media(prefers-reduced-motion:reduce) {
    .rv {
        opacity: 1;
        transform: none;
        transition: none
    }

    .btn {
        transition: none
    }
}


/* =========================================================
   LP — sekcja "Jak wyglądają zajęcia" (przebieg)
   ========================================================= */
.flow {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 34px
}

.flow__step {
    border-top: 2px solid var(--amber);
    padding-top: 16px
}

.flow__k {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber-deep);
    font-weight: 500
}

.flow__t {
    font-family: "Space Grotesk",sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.01em;
    margin: 9px 0 7px
}

.flow__d {
    font-size: 15.5px;
    color: var(--ink-soft);
    line-height: 1.5
}

@media(max-width:980px) {
    .flow {
        grid-template-columns: 1fr;
        gap: 18px
    }
}


/* =========================================================
   REZERWACJA — mapa lokalizacji (Leaflet/OSM)
   ========================================================= */
.locsec {
    padding: 8px 0 56px
}

.locmap {
    height: 380px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
    background: var(--paper-2)
}

    .locmap .leaflet-container {
        font-family: "IBM Plex Sans",sans-serif
    }

.loclist {
    margin-top: 26px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

.locgroup h3 {
    font-family: "Space Grotesk",sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px
}

    .locgroup h3 span {
        font-family: "IBM Plex Mono",monospace;
        font-size: 11px;
        color: var(--amber-deep);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 2px 9px;
        font-weight: 500
    }

.locgroup ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.locgroup li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    color: var(--ink-soft);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline
}

    .locgroup li b {
        color: var(--ink);
        font-weight: 600
    }

    .locgroup li span {
        font-family: "IBM Plex Mono",monospace;
        font-size: 12.5px;
        color: var(--mut);
        text-align: right;
        white-space: nowrap
    }

@media(min-width:820px) {
    .loclist {
        grid-template-columns: repeat(3,1fr);
        gap: 30px
    }

    .locmap {
        height: 440px
    }
}


/* =========================================================
   DOKUMENT — regulamin (body.doc)
   ========================================================= */
.doc .wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 22px
}

.legal {
    padding: 40px 0 64px
}

.legal__meta {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    color: var(--mut);
    margin-bottom: 30px;
    letter-spacing: .02em
}

.legal h2 {
    font-size: 20px;
    margin: 36px 0 10px;
    letter-spacing: -.01em
}

    .legal h2:first-of-type {
        margin-top: 0
    }

.legal h3 {
    font-size: 16px;
    margin: 20px 0 6px;
    font-family: "Space Grotesk",sans-serif
}

.legal p {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.62;
    margin: 10px 0
}

.legal ol, .legal ul {
    margin: 10px 0;
    padding-left: 22px;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.62
}

.legal li {
    margin: 6px 0
}

.legal__note {
    margin: 18px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--amber);
    background: var(--paper-2);
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.55
}

    .legal__note b {
        color: var(--ink)
    }

@media(min-width:820px) {
    .doc .wrap {
        padding: 0 40px
    }

    .legal {
        padding: 56px 0 80px
    }
}


/* =========================================================
   STRONA SUKCESU (body.ok) — domyka się klasami wspólnymi/rez
   ========================================================= */
.ok-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 22px
}

.okcard {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 34px 26px;
    margin-top: -40px;
    position: relative;
    box-shadow: 0 8px 30px rgba(14,26,43,.06);
    text-align: center
}

    .okcard .done__mark {
        margin: 0 auto 18px
    }

    .okcard h2 {
        font-size: clamp(24px,5vw,32px)
    }

.okcard__lead {
    color: var(--mut);
    font-size: 16px;
    max-width: 42ch;
    margin: 12px auto 0;
    line-height: 1.55
}

    .okcard__lead b {
        color: var(--ink);
        font-weight: 600
    }

.okcard .steps {
    text-align: left;
    max-width: 420px;
    margin: 24px auto 0
}

.okcard__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 26px
}

@media(min-width:820px) {
    .okcard {
        padding: 44px 40px
    }
}

.rowh {
    font-family: "Space Grotesk",sans-serif;
    font-weight: 700;
    font-size: clamp(22px,2.6vw,30px);
    letter-spacing: -.01em;
    line-height: 1.14;
    max-width: 20ch;
    margin: 0
}

/* jaśniejszy akcent eyebrow na ciemnym nagłówku */
.head .eyebrow {
    color: var(--amber)
}

/* lead w sekcji zamykającej */
.close__lead {
    color: var(--mut-on-ink);
    font-size: 18px;
    max-width: 48ch;
    margin: 14px auto 0;
    line-height: 1.5
}

    .close__lead b {
        color: #fff;
        font-weight: 600
    }


/* =========================================================
   REZERWACJA — cennik
   ========================================================= */
.pricing {
    padding: 44px 0 0
}

    .pricing h2 {
        font-family: "Space Grotesk",sans-serif;
        font-weight: 700;
        font-size: clamp(24px,4.5vw,32px);
        letter-spacing: -.02em;
        margin-top: 12px
    }

.pricing__intro {
    color: var(--ink-soft);
    max-width: 56ch;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55
}

    .pricing__intro b {
        color: var(--ink);
        font-weight: 600
    }

.plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px
}

.plan {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px;
    background: var(--paper-2)
}

.plan--day {
    border: 1.5px solid var(--amber);
    box-shadow: 0 6px 22px rgba(232,163,23,.10)
}

.plan__badge {
    position: absolute;
    top: -11px;
    left: 20px;
    background: var(--amber);
    color: var(--ink);
    font-family: "IBM Plex Mono",monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 3px
}

.plan__tag {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amber-deep);
    font-weight: 500
}

.plan__price {
    font-family: "Space Grotesk",sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    color: var(--ink);
    margin: 10px 0 4px
}

    .plan__price span {
        font-family: "IBM Plex Sans",sans-serif;
        font-weight: 500;
        font-size: 15px;
        color: var(--mut)
    }

.plan__hours {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    color: var(--mut);
    margin-top: 2px
}

.plan__note {
    font-size: 14.5px;
    color: var(--ink-soft);
    margin-top: 10px;
    line-height: 1.5
}

.perks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 26px;
    border-top: 1px solid var(--line);
    padding-top: 24px
}

.perks__item {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.5
}

    .perks__item b {
        display: block;
        font-family: "Space Grotesk",sans-serif;
        color: var(--ink);
        font-size: 15px;
        margin-bottom: 4px
    }

.pricing__foot {
    margin-top: 22px;
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    color: var(--mut);
    line-height: 1.5
}

@media(min-width:820px) {
    .plans {
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .perks {
        grid-template-columns: repeat(3,1fr);
        gap: 28px
    }
}


/* =========================================================
   WSPÓLNE: marker / zakreślacz w nagłówkach
   ========================================================= */
.mark {
    /*background: linear-gradient(transparent 56%, rgba(232,163,23,.22) 56%);*/
    /*color: rgba(232,163,23,.92);*/
    color: var(--amber-deep);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 .04em;
}

/* mikrocopy pod CTA w hero */
.hero__micro {
    margin-top: 14px;
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    color: var(--mut-on-ink);
    letter-spacing: .02em
}


/* =========================================================
   HERO — animowana oprawa zdjęcia (bloby + float/tilt 3D + szkło)
   ========================================================= */
.hero__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px
}

.hero__stage {
    position: relative;
    width: 100%;
    max-width: 520px
}

.hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    z-index: 0;
    pointer-events: none;
    will-change: transform
}

.hero__blob--a {
    width: 62%;
    height: 62%;
    left: -12%;
    top: -14%;
    opacity: .55;
    background: radial-gradient(circle at 30% 30%, #E8A317, transparent 70%);
    animation: heroBlobA 14s ease-in-out infinite
}

.hero__blob--b {
    width: 58%;
    height: 58%;
    right: -14%;
    bottom: -12%;
    opacity: .42;
    background: radial-gradient(circle at 60% 60%, #2F6BD1, transparent 70%);
    animation: heroBlobB 18s ease-in-out infinite
}

.hero__blob--c {
    width: 42%;
    height: 42%;
    right: 8%;
    top: -12%;
    opacity: .30;
    background: radial-gradient(circle at 50% 50%, #D14B30, transparent 70%);
    animation: heroBlobA 16s ease-in-out infinite reverse
}

@keyframes heroBlobA {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    33% {
        transform: translate(10%,8%) scale(1.12)
    }

    66% {
        transform: translate(-6%,4%) scale(.95)
    }
}

@keyframes heroBlobB {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-10%,-8%) scale(1.15)
    }
}

.hero__frame {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: 16px;
    padding: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
    transform-style: preserve-3d;
    will-change: transform;
    animation: heroFloat 7s ease-in-out infinite
}

.hero__photo {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 10px
}

@keyframes heroFloat {
    0%,100% {
        transform: translateY(0) rotate3d(1,-.7,0,0deg)
    }

    50% {
        transform: translateY(-12px) rotate3d(1,-.7,0,2.4deg)
    }
}

.hero__chip {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 16px;
    background: var(--amber);
    color: var(--ink);
    font-family: "IBM Plex Mono",monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    padding: 6px 11px;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
    animation: heroFloat 7s ease-in-out infinite
}

/* entropia — wersja na jasne tło (sekcja Porządek) */
.entropy {
    margin: 18px 0 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--paper-2)
}

    .entropy svg {
        display: block;
        width: 100%;
        height: auto;
        max-width: 440px
    }

.entropy__cap {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12px;
    color: var(--mut);
    margin-top: 8px;
    letter-spacing: .01em
}

    .entropy__cap b {
        color: var(--red);
        font-weight: 500
    }

@media(prefers-reduced-motion:reduce) {
    .hero__blob, .hero__frame, .hero__chip {
        animation: none
    }
}

/* =========================================================
   LP — baner-manifest "Dlaczego w rzeczywistości"
   ========================================================= */
.creed {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    padding: 80px 0;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

    .creed::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
        background-size: 24px 24px;
        opacity: .45;
        pointer-events: none
    }

    .creed .wrap {
        position: relative
    }

    .creed .eyebrow {
        color: var(--amber)
    }

.creed__big {
    font-family: "Space Grotesk",sans-serif;
    font-weight: 700;
    font-size: clamp(26px,4vw,42px);
    line-height: 1.14;
    letter-spacing: -.02em;
    max-width: 22ch;
    margin: 16px 0 0
}

.creed__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
    max-width: 780px
}

    .creed__cols p {
        color: var(--mut-on-ink);
        font-size: 16.5px;
        line-height: 1.58
    }

        .creed__cols p b {
            color: #fff;
            font-weight: 600
        }

@media(min-width:820px) {
    .creed {
        padding: 104px 0
    }

    .creed__cols {
        grid-template-columns: 1fr 1fr;
        gap: 48px
    }
}


/* =========================================================
   LP — galeria prowadzących
   ========================================================= */
.team {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px
}

.team__card {
    margin: 0
}

.team__img {
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--paper-2)
}

.team__name {
    font-family: "Space Grotesk",sans-serif;
    font-weight: 700;
    font-size: 17px;
    margin-top: 11px
}

.team__role {
    font-family: "IBM Plex Mono",monospace;
    font-size: 12.5px;
    color: var(--mut);
    margin-top: 3px
}

@media(min-width:640px) {
    .team {
        grid-template-columns: repeat(3,1fr);
        gap: 22px
    }
}