/* Landing — nagłówek, hero, sekcje, karty, stopka. Mobile-first, breakpointy 640/1024. */

/* --- Przyciski --- */

.btn {
    display: inline-block;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
}

.btn:hover,
.btn:focus-visible {
    text-decoration: none;
}

.btn--primary {
    background-color: var(--accent);
    color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: #a2632a;
    color: #fff;
}

.btn--secondary {
    border-color: currentColor;
    color: var(--ink);
    background: transparent;
}

/* font ≥19px/700 = „duży tekst" wg WCAG — biel na miedzi przechodzi wtedy AA (3:1) */
.btn--small {
    font-size: 1.1875rem;
    padding: 0.4375rem 1.125rem;
}

/* --- Nagłówek serwisu --- */

.site-head {
    position: sticky;
    top: 0;
    z-index: 100;
    /* flow-root: bez tego ujemny margin-top topbara scala się z marginesem
       kontenera i header nie podjeżdża do góry po schowaniu topbara */
    display: flow-root;
}

.site-header {
    background-color: var(--bg);
    border-bottom: 1px solid var(--surface);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: 0.875rem;
    position: relative;
}

.site-header__brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
    text-decoration: none;
    color: var(--accent);
}

.site-header__toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.625rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.site-header__toggle-bar {
    width: 22px;
    height: 2px;
    background-color: var(--ink);
}

.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg);
    border-bottom: 1px solid var(--surface);
    box-shadow: 0 12px 24px rgba(11, 31, 58, 0.08);
}

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

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-nav__list a:not(.btn) {
    display: inline-block;
    padding: 0.5rem 0;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.site-nav__list a:not(.btn):hover,
.site-nav__list a:not(.btn):focus-visible {
    color: var(--accent);
}

@media (min-width: 1024px) {
    .site-header__toggle {
        display: none;
    }

    .site-nav {
        display: block;
        position: static;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
        padding: 0;
    }
}

/* --- Hero --- */

.hero {
    position: relative;
    background-color: var(--ink);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: min(92vh, 54rem);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(11, 31, 58, 0.92) 0%, rgba(11, 31, 58, 0.78) 42%, rgba(11, 31, 58, 0.25) 100%);
}

.hero__content {
    position: relative;
    width: 100%;
    padding-block: var(--section-gap);
}

.hero__title {
    color: #fff;
    margin-bottom: var(--space-1);
}

.hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-3);
}

.hero__claim {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.35;
    max-width: 34ch;
    text-wrap: balance;
}

.hero__scope {
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-4);
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hero .btn--secondary {
    color: #fff;
}

/* --- Sekcje --- */

.section--surface {
    background-color: var(--surface);
}

.section--dark h2 {
    color: #fff;
}

.section__lead {
    font-size: var(--text-lg);
    color: var(--muted);
    margin-bottom: var(--space-4);
}

.section__cta {
    margin-top: var(--space-4);
    margin-bottom: 0;
}

/* --- Siatki i karty --- */

.grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

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

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

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

.card {
    background-color: var(--bg);
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: var(--radius);
    padding: var(--space-3);
}

.card--plain {
    background: none;
    border: 0;
    padding: 0;
}

.card h3 {
    margin-bottom: var(--space-1);
}

.card__quote {
    font-weight: 600;
    max-width: none;
}

.card__tags,
.card__meta {
    font-size: 0.9375rem;
    margin-bottom: 0;
    max-width: none;
}

/* --- Kroki (Jak pracuję) --- */

.steps {
    list-style: none;
    counter-reset: step;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--accent);
    color: var(--accent);
    margin-bottom: var(--space-2);
}

.step__icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.step h3 {
    margin-bottom: 0.25rem;
}

.step p {
    color: var(--muted);
    margin-bottom: 0;
}

/* --- Układ dwukolumnowy (Doradztwo, O mnie, Kontakt) --- */

.split {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: 1fr 1fr;
    }

    .split--reverse .split__media {
        order: 2;
    }
}

.split__media img {
    border-radius: var(--radius);
    width: 100%;
}

/* --- Listy inline (zakresy usług) --- */

.list-inline {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.375rem;
    max-width: var(--content-max);
}

.list-inline li:not(:last-child)::after {
    content: '·';
    margin-left: 0.5rem;
    color: var(--accent);
}

.list-inline--dark {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Liczby (ciemne tło) --- */

.stats {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}

@media (min-width: 640px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat__value {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

.stat__label {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.85);
}

/* --- Opinie --- */

.testimonial {
    margin: 0;
}

.testimonial__quote {
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

/* --- SPIN PR --- */

.spin-logo {
    width: 230px;
    height: auto;
    margin-bottom: var(--space-3);
}

.section--dark p {
    color: rgba(255, 255, 255, 0.92);
}

/* --- Placeholder treści od klientki --- */

.content-placeholder {
    border: 1px dashed var(--muted);
    border-radius: var(--radius);
    padding: var(--space-2);
}

/* --- Formularz kontaktowy --- */

.contact-details {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.contact-form {
    display: grid;
    gap: var(--space-2);
}

.form-field {
    display: grid;
    gap: 0.375rem;
}

.form-field label {
    font-weight: 600;
    font-size: 0.9375rem;
}

.form-field input[type='text'],
.form-field input[type='email'],
.form-field textarea {
    font: inherit;
    color: var(--ink);
    background-color: var(--bg);
    border: 1px solid rgba(11, 31, 58, 0.25);
    border-radius: var(--radius);
    padding: 0.625rem 0.75rem;
    width: 100%;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.form-field--checkbox {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.625rem;
}

.form-field--checkbox input {
    margin-top: 0.3125rem;
}

.form-field--checkbox label {
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* --- Stopka (korporacyjna, granat) --- */

.site-footer {
    background-color: var(--ink);
    background-image: linear-gradient(155deg, rgba(23, 58, 102, 0.4), rgba(11, 31, 58, 0) 55%);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr;
        gap: var(--space-4);
        padding-block: 5rem;
    }
}

.site-footer__title {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 var(--space-2);
}

.site-footer__col > .site-footer__title:not(:first-child) {
    margin-top: var(--space-3);
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.site-footer__brand p {
    max-width: 32ch;
}

.site-footer__logo {
    width: 210px;
    height: auto;
    margin-bottom: var(--space-2);
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.site-footer__social svg,
.site-footer__contact svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--accent);
    flex-shrink: 0;
}

.site-footer__contact li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.site-footer__note {
    margin-bottom: var(--space-2);
    max-width: 30ch;
}

.newsletter {
    display: flex;
    gap: 0.5rem;
    max-width: 22rem;
}

.newsletter input {
    flex: 1;
    min-width: 0;
    font: inherit;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
}

.newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.newsletter input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-block: var(--space-3);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__bottom a {
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
}

.site-footer__bottom-inner p {
    margin: 0;
    max-width: none;
}

/* --- Dostępność / drobiazgi --- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Detale i animacje — pass UX (motyw: miedziane linie z banera)
   ============================================================ */

/* --- Eyebrow (etykieta sekcji) --- */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--space-2);
}

.eyebrow::before {
    content: '';
    width: 2rem;
    height: 2px;
    background-color: var(--accent);
}

.section--dark .eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

/* --- Przyciski: ruch i cień --- */

.btn {
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(184, 115, 51, 0.32);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    background-color: rgba(11, 31, 58, 0.06);
}

.hero .btn--secondary:hover,
.hero .btn--secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.14);
}

/* --- Nagłówek: cień po scrollu, monogram, animacja menu --- */

.site-header {
    transition: box-shadow 0.25s ease;
}

.site-head.is-scrolled .site-header {
    box-shadow: 0 6px 24px rgba(11, 31, 58, 0.1);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.site-header__mark {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

.site-nav--open {
    animation: nav-drop 0.22s ease;
}

@keyframes nav-drop {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* --- Hero: wejście z przesunięciem, obraz "osiada" --- */

@media (prefers-reduced-motion: no-preference) {
    .hero__bg {
        animation: hero-settle 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .hero__content > * {
        opacity: 0;
        animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    .hero__title { animation-delay: 0.05s; }
    .hero__subtitle { animation-delay: 0.16s; }
    .hero__claim { animation-delay: 0.27s; }
    .hero__scope { animation-delay: 0.38s; }
    .hero__cta { animation-delay: 0.5s; }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hero-settle {
    from {
        transform: scale(1.05);
    }
    to {
        transform: none;
    }
}

/* --- Scroll-reveal (klasa js-reveal dodawana przez kontroler) --- */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Karty: lift + miedziana kreska --- */

.card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.5rem;
    width: 2.75rem;
    height: 3px;
    background-color: var(--accent);
    border-radius: 0 0 2px 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(11, 31, 58, 0.1);
    border-color: rgba(184, 115, 51, 0.45);
}

.card:hover::before {
    transform: scaleX(1);
}

.card--plain::before {
    left: 0;
}

.card--plain:hover {
    transform: none;
    box-shadow: none;
}

/* --- Ciemne sekcje: gradient + motyw miedzianych linii --- */

.section--dark {
    background-image:
        linear-gradient(155deg, rgba(23, 58, 102, 0.5), rgba(11, 31, 58, 0) 55%),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='340'%20fill='none'%3E%3Cg%20stroke='%23B87333'%20stroke-width='1.5'%3E%3Cpath%20d='M0%2048h268l56%2056h236'%20opacity='.5'/%3E%3Cpath%20d='M120%200v96l72%2072v172'%20opacity='.35'/%3E%3Cpath%20d='M0%20150h150l96%2096h314'%20opacity='.22'/%3E%3C/g%3E%3Cg%20fill='%23B87333'%3E%3Ccircle%20cx='268'%20cy='48'%20r='4'%20opacity='.65'/%3E%3Ccircle%20cx='192'%20cy='168'%20r='3'%20opacity='.5'/%3E%3Ccircle%20cx='150'%20cy='150'%20r='3'%20opacity='.35'/%3E%3C/g%3E%3Cg%20fill='%23B87333'%20opacity='.55'%3E%3Crect%20x='486'%20y='16'%20width='5'%20height='88'/%3E%3Crect%20x='500'%20y='34'%20width='5'%20height='70'/%3E%3Crect%20x='514'%20y='6'%20width='5'%20height='98'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, top -16px right -48px;
}

/* --- Kroki: łącznik, numeracja 01–04 --- */

.steps {
    counter-reset: step;
}

.step {
    counter-increment: step;
    position: relative;
}

.step__icon {
    position: relative;
    background-color: var(--bg);
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.step:hover .step__icon {
    background-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

.step__icon::after {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -0.5rem;
    right: -1.125rem;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--muted);
    background-color: var(--bg);
    padding: 0 3px;
}

@media (min-width: 1024px) {
    .steps {
        position: relative;
    }

    .steps::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 4rem;
        right: 4rem;
        border-top: 1px dashed rgba(184, 115, 51, 0.45);
    }
}

/* --- Zdjęcia: miedziana ramka-offset --- */

.split__media {
    position: relative;
}

.split__media::before {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: -1.25rem;
    bottom: -1.25rem;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    opacity: 0.45;
}

.split--reverse .split__media::before {
    left: -1.25rem;
    right: 1.25rem;
}

.split__media img {
    position: relative;
}

/* --- Opinie: duży cudzysłów --- */

.testimonial {
    padding-top: 4rem;
}

.testimonial::after {
    content: '\201E';
    position: absolute;
    top: 0.375rem;
    left: 1.375rem;
    font-family: var(--font-heading);
    font-size: 3rem;
    line-height: 1;
    color: var(--accent);
}

/* --- Liczby: miedziany podkreślnik --- */

.stat__value::after {
    content: '';
    display: block;
    width: 2rem;
    height: 3px;
    margin-top: 0.625rem;
    background-color: var(--accent);
    border-radius: 2px;
}

/* --- Kontakt: ikony przy danych --- */

.contact-details li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contact-details svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--accent);
}

/* --- Przerywnik parallax (Sprawdź Szkolenia) --- */

.band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(20rem, 52vh, 30rem);
    background-image:
        linear-gradient(rgba(11, 31, 58, 0.74), rgba(11, 31, 58, 0.74)),
        url("../images/band-szkolenia-960-eprReTt.jpg");
    background-size: cover;
    background-position: center;
    color: #fff;
}

@media (min-width: 1024px) {
    .band {
        background-image:
            linear-gradient(rgba(11, 31, 58, 0.74), rgba(11, 31, 58, 0.74)),
            url("../images/band-szkolenia-zozT5ss.jpg");
        /* parallax — iOS/mobile celowo pomijamy (brak wsparcia fixed) */
        background-attachment: fixed;
    }
}

.band__content {
    text-align: center;
    padding-block: var(--space-4);
}

.band__cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    border-bottom: 3px solid var(--accent);
    padding-bottom: 0.625rem;
    transition: gap 0.25s ease, border-color 0.25s ease;
}

.band__cta:hover,
.band__cta:focus-visible {
    color: #fff;
    gap: 1.625rem;
    border-color: #fff;
}

.band__arrow {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--accent);
}

/* --- Nagłówek podstrony --- */

.page-hero {
    background-color: var(--ink);
    color: #fff;
    padding-block: var(--space-4);
}

.page-hero h1 {
    color: #fff;
    margin-bottom: 0;
}

.page-hero .eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 1024px) {
    .page-hero {
        padding-block: 5rem;
    }
}

/* ============================================================
   Topbar, logo SPIN, podstrony szkoleń, panel zapisu
   ============================================================ */

/* --- Topbar --- */

.topbar {
    height: 2.75rem;
    display: flex;
    align-items: center;
    background-color: var(--ink);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.875rem;
    transition: margin-top 0.3s ease, opacity 0.22s ease;
}

.site-head.is-condensed .topbar {
    margin-top: -2.75rem;
    opacity: 0;
    pointer-events: none;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.topbar__link:hover,
.topbar__link:focus-visible {
    color: #fff;
}

.topbar__link svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent);
    flex-shrink: 0;
}

@media (max-width: 639px) {
    .topbar__label {
        display: none;
    }
}

/* --- Kalendarz terminów --- */

.topbar__cal {
    position: relative;
}

.cal-popover {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    background-color: var(--bg);
    color: var(--ink);
    border: 1px solid rgba(11, 31, 58, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 20px 48px rgba(11, 31, 58, 0.18);
    padding: var(--space-2);
    z-index: 120;
}

.cal-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cal-popover__label {
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: capitalize;
}

.cal-popover__nav {
    background: none;
    border: 1px solid rgba(11, 31, 58, 0.15);
    border-radius: var(--radius);
    width: 2rem;
    height: 2rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}

.cal-popover__nav:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
    font-size: 0.8125rem;
}

.cal-grid__dow {
    color: var(--muted);
    font-weight: 600;
    padding-block: 0.25rem;
}

.cal-grid__day {
    padding-block: 0.375rem;
    border-radius: var(--radius);
}

.cal-grid__day--session {
    position: relative;
    background-color: rgba(184, 115, 51, 0.14);
    color: var(--ink);
    font-weight: 700;
}

.cal-grid__day--session::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--accent);
}

.cal-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--surface);
    display: grid;
    gap: 0.375rem;
    font-size: 0.875rem;
}

.cal-list a {
    text-decoration: none;
    color: var(--ink);
}

.cal-list a:hover {
    color: var(--accent);
}

.cal-list__empty {
    color: var(--muted);
}

.cal-note {
    margin: 0.625rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}

/* --- Logo SPIN w headerze --- */

.brand-chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--ink);
    border-radius: var(--radius);
    padding: 0.5rem 0.875rem;
}

.brand-chip img {
    height: 1.375rem;
    width: auto;
    display: block;
}

/* --- Nagłówek podstrony: lead i meta --- */

.page-hero__lead {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.85);
    margin: var(--space-2) 0 0;
}

.page-hero__meta {
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0 0;
    letter-spacing: 0.02em;
}

.page-hero h1 {
    margin-bottom: 0;
}

/* --- Filtr działów --- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.filter-bar__btn {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    background: none;
    border: 1px solid rgba(11, 31, 58, 0.2);
    border-radius: 999px;
    padding: 0.5rem 1.125rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-bar__btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* aktywny filtr na granacie — miedź nie przechodzi AA przy drobnym tekście */
.filter-bar__btn[aria-pressed='true'] {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* --- Belki szkoleń --- */

.training-rows {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.training-row {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--bg);
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.training-row:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(11, 31, 58, 0.1);
    border-color: rgba(184, 115, 51, 0.45);
}

.training-row__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.training-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.training-row:hover .training-row__media img {
    transform: scale(1.04);
}

.training-row__body {
    padding: var(--space-3);
}

.training-row__title {
    font-size: var(--text-xl);
    margin-bottom: 0.375rem;
}

.training-row__title a {
    color: var(--ink);
    text-decoration: none;
}

.training-row__title a:hover,
.training-row__title a:focus-visible {
    color: var(--accent);
}

.training-row__arrow {
    display: none;
}

@media (min-width: 640px) {
    .training-row {
        grid-template-columns: 15rem 1fr auto;
        align-items: center;
    }

    .training-row__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 10rem;
    }

    .training-row__arrow {
        display: inline-flex;
        align-items: center;
        padding-inline: var(--space-3);
        color: var(--accent);
        transition: transform 0.25s ease;
    }

    .training-row__arrow svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    .training-row:hover .training-row__arrow {
        transform: translateX(6px);
    }
}

/* --- Podstrona szkolenia: układ + panel zapisu --- */

.split--detail {
    align-items: start;
}

@media (min-width: 1024px) {
    .split--detail {
        grid-template-columns: 1.6fr 1fr;
    }
}

.training-detail {
    display: grid;
    gap: var(--space-3);
}

.training-detail__photo {
    border-radius: var(--radius);
}

.training-detail h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}

.signup-panel {
    background-color: var(--bg);
    border: 1px solid rgba(11, 31, 58, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(11, 31, 58, 0.08);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .signup-panel {
        position: sticky;
        top: 6.5rem;
    }
}

.signup-panel__tabs {
    display: flex;
}

.signup-panel__tab {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted);
    background-color: var(--surface);
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 0.875rem 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.signup-panel__tab[aria-selected='true'] {
    color: var(--ink);
    background-color: var(--bg);
    border-bottom-color: var(--accent);
}

.signup-panel__panel {
    padding: var(--space-3);
}

.signup-panel__panel form {
    display: grid;
    gap: var(--space-2);
}

.signup-panel__submit {
    width: 100%;
}

.signup-panel fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.signup-panel legend {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

.session-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.session-option:has(input:checked) {
    border-color: var(--accent);
    background-color: rgba(184, 115, 51, 0.07);
}

.session-option em {
    font-style: normal;
    font-size: 0.8125rem;
}

/* ============================================================
   CONTENT v2 — lockup marki, podpis hero, CTA kart, fakty, 5 kroków
   ============================================================ */

.brand-byline {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .brand-byline {
        display: none;
    }
}

.hero__signature {
    margin-top: var(--space-4);
    display: grid;
    gap: 0.125rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero__signature strong {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    color: #fff;
}

.intro-lines {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
}

.card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-2);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.card__cta svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--accent);
    transition: transform 0.2s ease;
}

.card__cta:hover,
.card__cta:focus-visible {
    color: var(--accent);
}

.card__cta:hover svg,
.card__cta:focus-visible svg {
    transform: translateX(4px);
}

.card .card__tags {
    margin-bottom: 0.25rem;
}

/* 5 kroków — na szerokim ekranie jeden rząd */
@media (min-width: 1024px) {
    .steps--5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

.facts {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.facts li {
    position: relative;
    padding-left: 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.facts li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.625rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--accent);
}

.spin-note {
    margin-top: var(--space-3);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
}

.testimonial figcaption {
    display: grid;
    gap: 0.125rem;
}

.site-footer__byline {
    font-family: var(--font-heading);
    font-weight: 600;
    color: #fff;
    margin: -0.5rem 0 0.25rem;
}

/* menu ma 8 pozycji — bez łamania etykiet, ciaśniej poniżej 1280 */
@media (min-width: 1024px) {
    .site-nav__list a {
        white-space: nowrap;
    }
}

/* header i topbar są szersze niż kontener treści — 8 pozycji menu + lockup marki */
.site-head .container {
    max-width: 100rem;
}

@media (min-width: 1024px) and (max-width: 1535px) {
    .site-nav__list {
        gap: 0.875rem;
    }

    .site-nav__list a:not(.btn) {
        font-size: 0.875rem;
    }

    .brand-byline {
        display: none;
    }
}

/* najciaśniejszy desktop: logo pełni rolę „Start" */
@media (min-width: 1024px) and (max-width: 1279px) {
    .site-nav__list li:first-child {
        display: none;
    }
}

/* ============================================================
   Pass projektowy: fix logo (Firefox), ikony obszarów, formaty 01–05,
   wyrównanie CTA kart, wprowadzenie, kontakt
   ============================================================ */

/* Firefox: width:auto + max-width:100% w flexie kolapsuje img do 0 — jawne wymiary */
.brand-chip img {
    width: 9.375rem;
    height: auto;
    max-width: none;
}

/* długie słowa (pozycjonowanie) nie mogą być ucinane przez overflow karty;
   tytuły kart w jednej, umiarkowanej skali niezależnie od poziomu nagłówka */
.card h2,
.card h3 {
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: var(--text-xl);
    letter-spacing: normal;
    font-weight: 600;
}

/* karty: kolumna + CTA dobite do dołu (równa linia w siatce) */
.card {
    display: flex;
    flex-direction: column;
}

.card__cta {
    margin-top: auto;
    padding-top: var(--space-2);
}

.card__quote {
    margin-bottom: var(--space-2);
}

/* ikona obszaru — miedziany chip */
.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background-color: rgba(184, 115, 51, 0.12);
    color: var(--accent);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
    align-self: flex-start;
}

.card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* --- Formaty: numerowana lista edytorska --- */

.formats {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    counter-reset: format;
    border-top: 1px solid rgba(11, 31, 58, 0.12);
}

.format {
    counter-increment: format;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem var(--space-3);
    align-items: center;
    padding: var(--space-3) 0.5rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.12);
    transition: background-color 0.2s ease;
}

.format:hover {
    background-color: var(--surface);
}

.format::before {
    content: counter(format, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--accent);
    opacity: 0.75;
    min-width: 3.25rem;
}

.format h3 {
    margin: 0;
}

.format p {
    margin: 0;
    color: var(--muted);
}

.format .card__cta {
    margin: 0.25rem 0 0;
    padding-top: 0;
}

@media (min-width: 1024px) {
    .format {
        grid-template-columns: auto 1.1fr 1.6fr auto;
        gap: var(--space-3);
    }

    .format::before {
        grid-row: auto;
    }

    .format p {
        max-width: 44ch;
    }

    .format .card__cta {
        margin: 0;
        justify-self: end;
        white-space: nowrap;
    }
}

/* --- Wprowadzenie: dwie kolumny --- */

.split--top {
    align-items: start;
}

@media (min-width: 1024px) {
    .intro-cols {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: var(--space-4);
        align-items: start;
    }

    .intro-cols h2 {
        position: sticky;
        top: 7rem;
        margin-bottom: 0;
    }
}

/* --- Kontakt: formularz w karcie --- */

.contact-form {
    background-color: var(--bg);
    border: 1px solid rgba(11, 31, 58, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(11, 31, 58, 0.08);
    padding: var(--space-3);
}

.contact-form .section__cta {
    margin-top: var(--space-2);
}

/* --- Karuzela opinii --- */

.carousel {
    margin-top: var(--space-4);
    max-width: 46rem;
}

.carousel__slide {
    min-height: 12rem;
}

.carousel__slide .testimonial__quote {
    font-size: var(--text-lg);
}

.carousel__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(11, 31, 58, 0.2);
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.carousel__btn:hover,
.carousel__btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.carousel__btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.carousel__status {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--muted);
    min-width: 3.5rem;
    text-align: center;
}

/* --- Zapisy (S4): lista terminów, formularz, honeypot --- */

.session-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
}

.session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: var(--radius);
    padding: 0.75rem 0.875rem;
}

.session-item__full {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.register-box {
    max-width: 44rem;
}

.register-form label {
    font-weight: 600;
    font-size: 0.9375rem;
}

.invoice-details {
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: var(--radius);
    padding: 0.75rem 0.875rem;
}

.invoice-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
}

.invoice-details[open] summary {
    margin-bottom: var(--space-2);
}

.invoice-details .form-field {
    margin-top: 0.625rem;
}

/* błędy walidacji */
.register-form ul {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    color: #a4262c;
    font-size: 0.875rem;
    font-weight: 600;
}

/* honeypot — poza ekranem, niedostępny dla ludzi */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Detal szkolenia: kafelek daty, ikony meta i nagłówków --- */

.session-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.625rem;
    background-color: var(--ink);
    color: #fff;
    flex-shrink: 0;
    line-height: 1.1;
}

.session-date strong {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
}

.session-date span {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
}

.session-item {
    justify-content: flex-start;
}

.session-item__info {
    display: grid;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.session-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.session-item__meta svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent);
    flex-shrink: 0;
}

.session-item .btn {
    white-space: nowrap;
    margin-left: auto;
}

.detail-h {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-h__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background-color: rgba(184, 115, 51, 0.12);
    color: var(--accent);
    flex-shrink: 0;
}

.detail-h__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* --- Wstępy i zakończenia podstron --- */

.section--intro {
    padding-block: var(--space-4) 0;
}

.cta-band__inner {
    text-align: center;
    max-width: 44rem;
}

.cta-band__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-lg);
    margin-inline: auto;
}

/* --- Oś doświadczenia (O mnie) --- */

.timeline {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: var(--space-4);
    max-width: 46rem;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 2rem;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), rgba(184, 115, 51, 0.15));
}

.timeline__item {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--space-3);
    align-items: start;
}

.timeline__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 2.25rem;
    border-radius: 999px;
    background-color: var(--bg);
    border: 2px solid var(--accent);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
}

.timeline__marker--now {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.timeline__item h3 {
    margin-bottom: 0.25rem;
}

.timeline__item p {
    margin-bottom: 0;
}

/* ============================================================
   Corpo pass v2: więcej światła, ciemne karty, gradientowy band
   ============================================================ */

/* światło wewnątrz sekcji */
.section h2 {
    margin-bottom: var(--space-3);
}

.grid {
    gap: 1.75rem;
    margin-top: var(--space-5);
}

.card {
    padding: 2rem;
}

.eyebrow {
    letter-spacing: 0.18em;
    margin-bottom: var(--space-2);
}

.section__lead {
    font-size: var(--text-xl);
    max-width: 46ch;
}

.section__cta {
    margin-top: var(--space-5);
}

.page-hero {
    padding-block: var(--space-5);
}

@media (min-width: 1024px) {
    .page-hero {
        padding-block: 6.5rem;
    }
}

.formats {
    margin-top: var(--space-5);
}

.steps {
    margin-top: var(--space-5);
}

/* --- Eyebrow i treści na granacie --- */

.section--dark .eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

.section--dark h3 {
    color: #fff;
}

/* --- Ciemne karty (styl Confluent) --- */

.section--dark .card {
    background-color: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
}

.section--dark .card:hover {
    border-color: rgba(184, 115, 51, 0.65);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.section--dark .card .card__tags,
.section--dark .card .card__quote {
    color: rgba(255, 255, 255, 0.78);
}

.section--dark .card .card__quote {
    color: rgba(255, 255, 255, 0.92);
}

.section--dark .card__icon {
    background-color: rgba(184, 115, 51, 0.22);
}

.section--dark .card__cta {
    color: #fff;
}

.section--dark .card--plain {
    background: none;
    border: 0;
    box-shadow: none;
}

/* --- Gradientowy band (Dla kogo) --- */

.section--band {
    background-color: var(--ink);
    background-image: linear-gradient(105deg, #0B1F3A 0%, #14355e 55%, #1c4a68 100%);
    color: #fff;
}

.section--band h2 {
    color: #fff;
    text-align: center;
    margin-inline: auto;
    max-width: 24ch;
}

.section--band .eyebrow {
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
}

.section--band .grid {
    text-align: center;
}

.section--band h3 {
    color: #fff;
}

.section--band .card__tags {
    color: rgba(255, 255, 255, 0.78);
}

.section--band .section__cta {
    text-align: center;
}

/* ============================================================
   Confluent-inspired v3: pill-buttony, kropki, check-listy, radius
   ============================================================ */

/* pill-buttony (jak Try Confluent / Start for Free) */
.btn {
    border-radius: 999px;
}

/* większe zaokrąglenia „mediów" i paneli */
.card,
.signup-panel,
.contact-form,
.session-item,
.invoice-details,
.training-row,
.split__media img,
.training-detail__photo,
.cal-popover {
    border-radius: 0.75rem;
}

/* karty plain w ciemnych sekcjach: bez tła, hovera i akcentu */
.section--dark .card--plain,
.section--dark .card--plain:hover {
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
}

.card--plain::before {
    display: none;
}

/* kropkowane tło ciemnych sekcji (sygnatura Confluenta, u nas w miedzi) */
.section--dark:not(.page-hero),
.cta-band {
    position: relative;
}

.section--dark:not(.page-hero)::before,
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(184, 115, 51, 0.28) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(115deg, transparent 55%, rgba(0, 0, 0, 0.9));
    mask-image: linear-gradient(115deg, transparent 55%, rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

.section--dark:not(.page-hero) > .container,
.cta-band > .container {
    position: relative;
}

/* fakty jako check-circle (miedź) */
.facts li {
    padding-left: 1.75rem;
}

.facts li::before {
    content: '';
    width: 1.125rem;
    height: 1.125rem;
    top: 0.1em;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B87333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4L12 14.01l-3-3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* cudzysłów opinii potrzebuje miejsca — po podbiciu paddingu kart (corpo v2) */
.testimonial {
    padding-top: 4.25rem;
}

/* --- O mnie: wyśrodkowany tytuł-statement i manifest (wzorce Sinek/FranklinCovey) --- */

.statement {
    text-align: center;
    max-width: 30ch;
    margin-inline: auto;
}

.statement-split {
    margin-top: var(--space-5);
}

.eyebrow--center {
    justify-content: center;
}

.manifesto {
    text-align: center;
}

.manifesto__title {
    font-size: var(--text-3xl);
    max-width: 24ch;
    margin-inline: auto;
    margin-bottom: var(--space-5);
    line-height: 1.2;
}

.facts--row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem 2.25rem;
    max-width: 56rem;
    margin-inline: auto;
    text-align: left;
}

.facts--row li {
    flex: 0 0 auto;
}

.manifesto__cta {
    text-align: center;
}

/* ============================================================
   Pass UX: cienie, aktywna nawigacja, centrowane opinie, badge, podpis
   ============================================================ */

/* elewacja zamiast płaskich ramek */
.card {
    border-color: rgba(11, 31, 58, 0.06);
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.signup-panel,
.contact-form {
    box-shadow: var(--shadow-md);
}

.cal-popover {
    box-shadow: var(--shadow-lg);
}

.training-row {
    border-color: rgba(11, 31, 58, 0.06);
    box-shadow: var(--shadow-sm);
}

.training-row:hover {
    box-shadow: var(--shadow-lg);
}

.section--dark .card {
    box-shadow: none;
}

/* aktywna pozycja nawigacji */
.site-nav__list a.is-active:not(.btn) {
    color: var(--accent);
}

@media (min-width: 1024px) {
    .site-nav__list a.is-active:not(.btn) {
        box-shadow: inset 0 -2px 0 var(--accent);
    }
}

/* opinie wyśrodkowane */
.section--center {
    text-align: center;
}

.section--center .eyebrow {
    justify-content: center;
}

.section--center h2 {
    margin-inline: auto;
    max-width: 26ch;
}

.section--center .carousel {
    margin-inline: auto;
    text-align: left;
}

.section--center .carousel__nav {
    justify-content: center;
}

/* podpis w hero z miedzianą kreską */
.hero__signature {
    border-left: 3px solid var(--accent);
    padding-left: 1rem;
}

/* badge działu na belce szkolenia */
.training-row__media {
    position: relative;
}

.training-row__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: var(--ink);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
}

/* ============================================================
   Dark header + miary typograficzne + diagram + media w sekcjach
   ============================================================ */

/* --- Ciemny header (tło jak topbar) --- */

.site-header {
    background-color: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-logo {
    width: 13rem;
    height: auto;
    max-width: none;
    display: block;
}

.brand-byline {
    color: rgba(255, 255, 255, 0.7);
}

.site-header__toggle-bar {
    background-color: #fff;
}

.site-nav__list a:not(.btn) {
    color: rgba(255, 255, 255, 0.88);
}

.site-nav__list a:not(.btn):hover,
.site-nav__list a:not(.btn):focus-visible {
    color: #fff;
}

.site-nav__list a.is-active:not(.btn) {
    color: var(--accent-soft);
}

/* mobilne menu rozwijane też na granacie */
.site-nav {
    background-color: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
    .site-nav {
        background: none;
        border: 0;
    }
}

.site-head.is-scrolled .site-header {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* --- Miara nagłówków sekcji (typograficzny comfort) --- */

.section h2 {
    max-width: 30ch;
}

.section--center h2,
.section--band h2,
.cta-band h2 {
    margin-inline: auto;
}

/* --- Diagram SPIN (hub) --- */

.spin-split {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

@media (min-width: 1024px) {
    .spin-split {
        grid-template-columns: 1.1fr 1fr;
    }

    .spin-list {
        display: none;
    }
}

.spin-diagram {
    display: none;
}

@media (min-width: 1024px) {
    .spin-diagram {
        display: block;
    }
}

.spin-diagram svg {
    width: 100%;
    height: auto;
}

/* --- Media przy formatach i wprowadzeniu --- */

.formats-wrap {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 1024px) {
    .formats-wrap {
        grid-template-columns: 1.5fr 1fr;
    }

    .formats-wrap .formats {
        margin-top: var(--space-4);
    }

    .formats__media {
        position: sticky;
        top: 8rem;
        margin: var(--space-4) 0 0;
    }
}

.formats__media {
    margin: 0;
}

.formats__media img,
.intro-media img {
    border-radius: 0.75rem;
    width: 100%;
    box-shadow: var(--shadow-md);
}

.intro-media {
    margin-top: var(--space-3);
}

/* ============================================================
   Faza 2: Hero 2.0, marquee, parallax
   ============================================================ */

/* hero na pełny viewport (minus topbar+header) */
.hero {
    min-height: calc(100svh - 7.25rem);
}

@supports not (height: 100svh) {
    .hero {
        min-height: calc(100vh - 7.25rem);
    }
}

/* tło z zapasem — parallax nie odsłania krawędzi */
.hero__bg {
    height: 124%;
    top: -12%;
    bottom: auto;
    will-change: transform;
}

/* scroll-cue */
.hero__cue {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    z-index: 1;
}

.hero__cue svg {
    width: 1.25rem;
    height: 1.25rem;
}

.hero__cue:hover,
.hero__cue:focus-visible {
    color: #fff;
    border-color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
    .hero__cue svg {
        animation: cue-bob 1.8s ease-in-out infinite;
    }

    @keyframes cue-bob {
        0%, 100% { transform: translateY(-2px); }
        50% { transform: translateY(3px); }
    }
}

/* --- Marquee obszarów --- */

.marquee {
    background-color: #081627;
    border-block: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    padding-block: 1.125rem;
}

.marquee__track {
    display: flex;
    width: max-content;
}

.marquee__seq {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    padding-right: 2.25rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.marquee__dot {
    color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
    .marquee__track {
        animation: marquee-scroll 30s linear infinite;
    }

    .marquee:hover .marquee__track {
        animation-play-state: paused;
    }

    @keyframes marquee-scroll {
        to { transform: translateX(-50%); }
    }
}

/* parallax przejmuje ruch tła hero — wyłączamy animację settle (fill:both blokowałby inline transform) */
.hero__bg {
    animation: none;
}

/* ============================================================
   Faza 3: bento obszarów + karuzela szkoleń z fotografiami
   ============================================================ */

/* --- Bento --- */

@media (min-width: 1024px) {
    .bento {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card--featured {
    background-size: cover;
    background-position: center;
    border: 0;
    color: #fff;
    justify-content: flex-end;
    min-height: 20rem;
}

@media (min-width: 640px) {
    .card--featured {
        grid-column: span 2;
    }
}

.card--featured h2,
.card--featured h3 {
    color: #fff;
}

.card--featured .card__quote {
    color: rgba(255, 255, 255, 0.92);
}

.card--featured .card__tags {
    color: rgba(255, 255, 255, 0.78);
}

.card--featured .card__cta {
    color: #fff;
}

.card--featured .card__icon {
    background-color: rgba(184, 115, 51, 0.35);
    color: #fff;
}

.card--featured::before {
    display: none;
}

/* --- Karuzela szkoleń (scroll-snap) --- */

.training-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(21rem, 80vw);
    gap: 1.5rem;
    margin-top: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.25rem 0.25rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 31, 58, 0.25) transparent;
}

.training-scroller .training-card {
    scroll-snap-align: start;
}

.training-card {
    padding: 0;
    overflow: hidden;
}

.training-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.training-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.training-card:hover .training-card__media img {
    transform: scale(1.04);
}

.training-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

/* mobile: belka szkolenia = miniatura obok tekstu (lekki LCP), nie pełnoszerokie zdjęcie */
.training-row {
    grid-template-columns: 6rem 1fr;
    align-items: center;
}

.training-row__media {
    aspect-ratio: 1;
    height: 100%;
    min-height: 6rem;
}

.training-row__badge {
    display: none;
}

@media (min-width: 640px) {
    .training-row {
        grid-template-columns: 15rem 1fr auto;
    }

    .training-row__media {
        aspect-ratio: auto;
    }

    .training-row__badge {
        display: inline-block;
    }
}

/* miniatura ma sztywny kwadrat — aspect-ratio z height:100% rozdymał ją poza kolumnę */
.training-row__media {
    width: 6rem;
    height: 6rem;
    min-height: 0;
    align-self: center;
    margin-left: 0.75rem;
    border-radius: 0.5rem;
}

@media (min-width: 640px) {
    .training-row__media {
        width: auto;
        height: 100%;
        min-height: 10rem;
        margin-left: 0;
        border-radius: 0;
    }
}

/* ============================================================
   Wyśrodkowanie + jeden system przycisków
   ============================================================ */

/* Globalne `p { max-width: 72ch }` obejmowało też etykiety i akapity z CTA:
   text-align:center centrował je WEWNĄTRZ wąskiego bloku, więc na szerokim
   kontenerze uciekały w lewo o ~190 px. Te elementy nie są tekstem czytanym
   liniowo — nie potrzebują limitu miary. */
.eyebrow,
.section__cta,
.hero__cta {
    max-width: none;
}

/* wyśrodkowany eyebrow dostaje kreskę też z prawej — inaczej sam napis
   jest optycznie przesunięty w prawo o szerokość kreski */
.eyebrow--center::after,
.section--center .eyebrow::after,
.section--band .eyebrow::after {
    content: '';
    width: 2rem;
    height: 2px;
    background-color: var(--accent);
}

.eyebrow--center,
.section--center .eyebrow,
.section--band .eyebrow {
    justify-content: center;
}

/* --- Przyciski: jedna skala dla całego serwisu ---
   .btn        17 px — CTA w treści sekcji, formularze
   .btn--small 15 px — chrome (header, stopka, belki terminów, panel zapisu)
   Wypełnienie na --accent-deep: biel ma 4.8:1, więc font może zejść poniżej
   19 px bez łamania WCAG AA (wcześniej rozmiar trzymał kontrast). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.005em;
    padding: 0.8125rem 1.625rem;
    border: 1px solid transparent;
    border-radius: 999px;
}

.btn--small {
    font-size: 0.9375rem;
    padding: 0.5625rem 1.25rem;
}

.btn--primary {
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--accent-press);
    border-color: var(--accent-press);
    color: #fff;
}

.btn--secondary {
    border-color: rgba(11, 31, 58, 0.28);
    color: var(--ink);
    background: transparent;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    border-color: var(--ink);
    background-color: rgba(11, 31, 58, 0.05);
}

.hero .btn--secondary,
.section--dark .btn--secondary,
.section--band .btn--secondary,
.cookie-notice .btn--secondary,
.site-footer .btn--secondary {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.hero .btn--secondary:hover,
.hero .btn--secondary:focus-visible,
.section--dark .btn--secondary:hover,
.section--dark .btn--secondary:focus-visible,
.cookie-notice .btn--secondary:hover,
.cookie-notice .btn--secondary:focus-visible {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
}

/* miedziany tekst na bieli — tylko wariant --accent-deep przechodzi AA
   przy rozmiarach 15–17 px (czysta miedź ma 3.8:1) */
.card__cta:hover,
.card__cta:focus-visible,
.filter-bar__btn:hover,
.carousel__btn:hover,
.carousel__btn:focus-visible {
    color: var(--accent-deep);
}

.filter-bar__btn:hover,
.carousel__btn:hover,
.carousel__btn:focus-visible {
    border-color: var(--accent-deep);
}

/* elementy „przyciskopodobne" trzymają tę samą typografię co .btn--small */
.filter-bar__btn,
.card__cta {
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* CTA w headerze trzyma się skali menu — inaczej Sora 15 px obok Intera 14 px
   wygląda o klasę za duża */
.site-header .btn--small {
    font-size: 0.9375rem;
    padding: 0.5625rem 1.125rem;
}

@media (min-width: 1024px) and (max-width: 1535px) {
    .site-header .btn--small {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* Panel zapisu jest wąskim sidebarem — data + opis + przycisk w jednym rzędzie
   łamały się na 3 linie. CTA schodzi pod spód na pełną szerokość. */
.signup-panel .session-item {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    align-items: center;
    gap: 0.75rem var(--space-2);
}

.signup-panel .session-item .btn,
.signup-panel .session-item__full {
    grid-column: 1 / -1;
    margin-left: 0;
    width: 100%;
    text-align: center;
}

.signup-panel .session-item__meta {
    font-size: 0.875rem;
}

.session-item__full {
    font-weight: 600;
}

/* Na granacie i na zdjęciach hover musi iść w jaśniejszą miedź — --accent-deep
   ma tam tylko 3.4:1 (za mało dla 15 px) */
.section--dark .card__cta:hover,
.section--dark .card__cta:focus-visible,
.section--band .card__cta:hover,
.section--band .card__cta:focus-visible,
.card--featured .card__cta:hover,
.card--featured .card__cta:focus-visible {
    color: var(--accent-soft);
}

/* `flex: 0 0 auto` nie pozwalał zawinąć najdłuższego faktu — na 390 px
   wychodził poza ekran */
.facts--row li {
    flex: 0 1 auto;
    max-width: 100%;
}

/* Logo SPIN PR w sekcji 9 jest węższe (280×62) niż lockup Advisory — mniejsza
   szerokość utrzymuje tę samą wysokość optyczną i nie konkuruje z H2 */
.spin-logo {
    width: 190px;
}

/* ============================================================
   Strony prawne (polityki) + baner cookies
   ============================================================ */

.legal {
    max-width: 46rem;
}

.legal__meta {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-3);
}

.legal__lead {
    font-size: var(--text-lg);
    line-height: 1.6;
    padding-left: var(--space-3);
    border-left: 3px solid var(--accent);
    margin-bottom: var(--space-4);
}

.legal h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(11, 31, 58, 0.1);
}

.legal h3 {
    font-size: var(--text-base);
    font-weight: 700;
    margin-top: var(--space-3);
    color: var(--ink);
}

.legal p {
    line-height: 1.7;
}

.legal__list {
    margin: 0 0 var(--space-2);
    padding-left: 1.25rem;
    display: grid;
    gap: 0.5rem;
    line-height: 1.7;
}

.legal__list li::marker {
    color: var(--accent);
}

.legal__table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-2) 0 var(--space-3);
    font-size: 0.9375rem;
}

.legal__table th,
.legal__table td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.1);
}

.legal__table thead th {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom-width: 2px;
}

.legal__table code {
    font-size: 0.875rem;
    background-color: var(--surface);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

/* tabela nie może rozpychać strony na wąskim ekranie */
@media (max-width: 639px) {
    .legal__table {
        display: block;
        overflow-x: auto;
    }
}

/* --- Baner cookies --- */

.cookie-notice {
    /* sticky, nie fixed: element zostaje w układzie strony, więc na krótkich
       podstronach (logowanie, podziękowanie) nie zasłania przycisków */
    position: sticky;
    bottom: 0;
    z-index: 200;
    background-color: var(--ink);
    color: rgba(255, 255, 255, 0.92);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -8px 32px rgba(11, 31, 58, 0.28);
    padding: var(--space-3) 0;
}

.cookie-notice__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    justify-content: space-between;
}

.cookie-notice p {
    max-width: 62ch;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.cookie-notice a {
    color: var(--accent-soft);
    text-decoration-color: var(--accent-soft);
}

.cookie-notice a:hover,
.cookie-notice a:focus-visible {
    color: #fff;
}

.cookie-notice .btn {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .cookie-notice {
        animation: cookie-slide-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
}

@keyframes cookie-slide-in {
    from {
        transform: translateY(100%);
    }
}

/* nota o AI (AI Act) — osobna, najcichsza linia pod copyrightem;
   flex-basis 100% wypycha ją z rzędu „copyright | linki” */
.site-footer__bottom-inner .site-footer__ai {
    flex: 0 0 100%;
    order: 3;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    max-width: 74ch;
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Konto uczestnika, formularze faktur, alerty
   ============================================================ */

.auth-box {
    max-width: 28rem;
}

.auth-box__note {
    font-size: 0.9375rem;
    margin-top: var(--space-2);
}

.alert {
    border-radius: 0.75rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: var(--space-3);
    font-size: 0.9375rem;
    max-width: none;
}

.alert--success {
    background-color: #EAF6EF;
    border: 1px solid #B7DFC6;
    color: #14532D;
}

.alert--error {
    background-color: #FDECEC;
    border: 1px solid #F3C2C2;
    color: #7F1D1D;
}

/* --- Układ konta --- */

.account {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .account {
        grid-template-columns: 14rem 1fr;
        gap: var(--space-5);
        align-items: start;
    }
}

.account__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
}

@media (min-width: 900px) {
    .account__nav {
        position: sticky;
        top: 7rem;
        flex-direction: column;
        gap: 0.125rem;
    }
}

.account__nav a {
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    color: var(--ink);
    text-decoration: none;
}

.account__nav a:hover {
    background-color: var(--surface);
}

.account__nav a.is-active {
    background-color: var(--ink);
    color: #fff;
}

.account__nav-logout {
    color: var(--muted) !important;
}

.account__nav-logout.is-active,
.account__nav-logout:hover {
    color: var(--ink) !important;
}

.account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.account-item {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    align-items: start;
    gap: 0.75rem var(--space-2);
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: 0.75rem;
    padding: 1rem 1.125rem;
}

@media (min-width: 640px) {
    .account-item {
        grid-template-columns: 3.5rem 1fr auto;
        align-items: center;
    }
}

.account-item h2 {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.account-item__meta {
    font-size: 0.875rem;
    margin: 0;
    max-width: none;
}

.account-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    max-width: none;
}

.account-item__actions {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .account-item__actions {
        grid-column: auto;
        text-align: right;
    }
}

.account-item__note {
    font-size: 0.875rem;
}

.account-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.625rem;
    background-color: var(--surface);
    color: var(--accent-deep);
}

.account-item__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--muted);
    border: 1px solid rgba(11, 31, 58, 0.12);
}

.badge--confirmed {
    background-color: #EAF6EF;
    border-color: #B7DFC6;
    color: #14532D;
}

.badge--cancelled {
    background-color: #FDECEC;
    border-color: #F3C2C2;
    color: #7F1D1D;
}

.account-form,
.account-note {
    max-width: 34rem;
}

.account-note {
    font-size: 0.875rem;
    margin-top: var(--space-3);
}

/* --- Formularz zapisu: wybór nabywcy i dane faktury --- */

.form-choice {
    border: 0;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.form-choice > label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-choice .form-choice__options,
.form-choice > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.form-choice input[type='radio'] {
    margin-right: 0.5rem;
}

.form-choice label:not(:first-child) {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(11, 31, 58, 0.2);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    cursor: pointer;
}

.form-choice input[type='radio']:checked + label,
.form-choice label:has(input:checked) {
    border-color: var(--ink);
    background-color: var(--surface);
    font-weight: 600;
}

.form-help {
    font-size: 0.8125rem;
    color: var(--muted);
    margin: 0.375rem 0 0;
    max-width: 46ch;
}

.invoice-box {
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: 0.75rem;
    padding: 1.125rem;
    margin-bottom: var(--space-3);
    background-color: var(--surface);
}

.invoice-box__head {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    max-width: none;
}

.account-field {
    border-top: 1px solid rgba(11, 31, 58, 0.1);
    padding-top: var(--space-3);
}

/* --- Baner cookies v2: kategorie --- */

.cookie-notice__inner {
    align-items: flex-start;
}

.cookie-notice__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.375rem;
}

.cookie-notice__text {
    flex: 1 1 24rem;
}

.cookie-notice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.cookie-notice__link {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent-soft);
    background: none;
    border: 0;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cookie-notice__link:hover,
.cookie-notice__link:focus-visible {
    color: #fff;
}

.cookie-notice__settings {
    flex: 1 1 100%;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cookie-cats {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
    display: grid;
    gap: 0.875rem;
}

@media (min-width: 900px) {
    .cookie-cats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.cookie-cat label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.cookie-cat input[disabled] {
    cursor: not-allowed;
}

.cookie-cat__name {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
}

.cookie-cat__always {
    font-weight: 400;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.cookie-cat p {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0.375rem 0 0 1.5rem;
    max-width: 42ch;
}

/* link-przycisk w stopce wygląda jak sąsiednie odnośniki */
.site-footer__linkbtn {
    font: inherit;
    color: rgba(255, 255, 255, 0.7);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.site-footer__linkbtn:hover,
.site-footer__linkbtn:focus-visible {
    color: #fff;
}

/* na niskich ekranach panel ustawień nie może wypchnąć przycisków poza viewport */
.cookie-notice {
    max-height: 88vh;
    overflow-y: auto;
}

/* przy sticky stopka i baner nie nachodzą na siebie — rezerwacja miejsca zbędna */
body {
    padding-bottom: 0;
}

/* ============================================================
   SPIN Circle — kafelki programów, harmonogram, statusy
   ============================================================ */

.hero-checks {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.5rem;
    max-width: 46rem;
}

.hero-checks li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-checks li::before {
    content: '';
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D98E4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.program-grid {
    margin-top: var(--space-3);
}

.program-card__brand {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin: 0 0 0.25rem;
}

.program-card h3 {
    font-size: var(--text-xl);
    margin-bottom: 0.25rem;
}

.program-card__status,
.program-hero__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: var(--space-2) 0 0;
    max-width: none;
}

.program-card__seats,
.program-hero__seats {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted);
}

.program-hero__seats {
    color: rgba(255, 255, 255, 0.85);
}

.program-card__meta {
    font-size: 0.875rem;
    margin: 0.375rem 0 0;
}

.badge--recruiting {
    background-color: #EAF6EF;
    border-color: #B7DFC6;
    color: #14532D;
}

.badge--waitlist {
    background-color: #FEF6E7;
    border-color: #F3DDB0;
    color: #7A4E0B;
}

.badge--closed {
    background-color: var(--surface);
    border-color: rgba(11, 31, 58, 0.12);
    color: var(--muted);
}

/* na granacie badge musi mieć własny, jasny wariant */
.section--dark .badge--recruiting,
.page-hero .badge--recruiting {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(183, 223, 198, 0.5);
    color: #C9EBD6;
}

.section--dark .badge--waitlist,
.page-hero .badge--waitlist {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(243, 221, 176, 0.5);
    color: #F3DDB0;
}

.section--dark .badge--closed,
.page-hero .badge--closed {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
}

/* --- Lista spotkań --- */

.meeting-list {
    list-style: none;
    counter-reset: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.meeting {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: start;
    gap: 0.25rem 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(11, 31, 58, 0.1);
    border-radius: 0.75rem;
    background-color: var(--bg);
}

@media (min-width: 640px) {
    .meeting {
        grid-template-columns: 2.25rem 1fr auto;
        align-items: center;
    }
}

.meeting__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--ink);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
}

.meeting__body h3 {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 0.125rem;
}

.meeting__body p {
    font-size: 0.9375rem;
    color: var(--muted);
    margin: 0;
    max-width: 60ch;
}

.meeting__date {
    grid-column: 2;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-deep);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .meeting__date {
        grid-column: auto;
    }
}

.legal__table th[scope='row'] {
    width: 14rem;
    font-weight: 600;
    color: var(--muted);
}

/* Na wąskich ekranach tekst i przyciski banera muszą być osobnymi wierszami —
   `flex-basis: 24rem` na tekście rozpychał rząd ponad szerokość okna, a że baner
   ma `overflow-y: auto` (czyli i `overflow-x: auto`), „Tylko niezbędne" znikało poza kadrem. */
@media (max-width: 719px) {
    .cookie-notice__text,
    .cookie-notice__actions {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cookie-notice__actions .btn {
        flex: 1 1 auto;
    }
}

/* --- Hero podstrony ze zdjęciem (SPIN Circle) --- */

.page-hero--photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.page-hero--photo > .container {
    position: relative;
    z-index: 2;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
    z-index: 0;
}

/* gradient, nie płaska przesłona — tekst po lewej ma pełny kontrast,
   a zdjęcie zostaje czytelne po prawej */
.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(11, 31, 58, 0.96) 0%, rgba(11, 31, 58, 0.88) 42%, rgba(11, 31, 58, 0.62) 100%);
}

/* wzór obwodu w tle ciemnych sekcji koliduje ze zdjęciem */
.page-hero--photo::before {
    display: none;
}

/* --- Kafelek programu ze zdjęciem --- */

.program-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.program-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--surface);
}

.program-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.program-card:hover .program-card__media img {
    transform: scale(1.04);
}

.program-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.75rem;
}

.program-card__body .card__cta {
    margin-top: auto;
}

/* --- Blok „Prowadzi" --- */

.host {
    display: grid;
    gap: var(--space-3);
    align-items: center;
}

@media (min-width: 900px) {
    .host {
        grid-template-columns: 22rem 1fr;
        gap: var(--space-5);
    }
}

.host__media img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    display: block;
}

.host__body h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.host__body p {
    line-height: 1.7;
}

/* hero SPIN Circle: kadr wyżej, żeby stopka cudzego wydarzenia ze slajdu
   nie wchodziła w kadr */
.page-hero__bg--high {
    object-position: 50% 22%;
}

/* --- Blok inwestycji na podstronie programu --- */

.pricing {
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-top: 3px solid var(--accent);
    border-radius: 0.75rem;
    padding: var(--space-3);
    background-color: var(--surface);
    margin-bottom: var(--space-3);
}

.pricing__price {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 var(--space-2);
    max-width: none;
}

.pricing__price span {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
}

.pricing__split {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .pricing__split {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

.pricing__split li {
    display: grid;
    gap: 0.125rem;
    padding-left: 0.875rem;
    border-left: 2px solid rgba(184, 115, 51, 0.35);
}

.pricing__amount {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
}

.pricing__label {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.4;
}

.pricing__cta {
    margin: 0 0 0.75rem;
    max-width: none;
}

.pricing__note {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0;
    max-width: 52ch;
}

/* --- Podstrona szkolenia: listy treści --- */

.detail-list {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.detail-list li {
    position: relative;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.625rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--accent);
}

/* zdanie „z czym wychodzisz" — miedziana kreska jak legal__lead */
.detail-takeaway {
    font-weight: 600;
    padding-left: var(--space-2);
    border-left: 3px solid var(--accent);
    margin-top: var(--space-3);
}

/* --- Formaty: trzy zdjęcia zamiast jednego (2026-10-15) ---
   Desktop: kolumna obok listy 01–05 (wysokość ≈ lista, więc bez sticky — stos jest wyższy
   niż viewport). Mobile/tablet: pierwsze zdjęcie szerokie, dwa pod nim obok siebie. */
.formats__media--trio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.formats__media--trio img {
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.formats__media--trio img:first-child {
    grid-column: 1 / -1;
}

/* portret Izabeli przy neonie: na wąskim kafelku twarz zostaje w kadrze */
.formats__media--trio img:last-child {
    object-position: 80% center;
}

@media (min-width: 1024px) {
    .formats__media--trio {
        position: static;
        grid-template-columns: 1fr;
    }
}

/* --- SPIN: hub obszarów (2026-10-15) ---
   Pierścień wokół rdzenia obraca się powoli; po liniach płyną impulsy od środka na zewnątrz
   (pathLength=100 → kreska 12 + przerwa 88, przesunięcie 100→12 = ruch w stronę pigułki).
   Poza animacją impuls jest niewidoczny (opacity 0), żeby nie zostawały kreski przy rdzeniu. */
.hub-orbit {
    transform-box: view-box;
    transform-origin: 320px 270px;
    animation: hub-orbit 90s linear infinite;
}

.hub-flow path {
    stroke-dasharray: 12 88;
    stroke-dashoffset: 100;
    opacity: 0;
    animation: hub-flow 3.6s ease-in-out infinite;
}

@keyframes hub-orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hub-flow {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.9;
    }

    100% {
        stroke-dashoffset: 12;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-orbit {
        animation: none;
    }

    .hub-flow {
        display: none;
    }
}

/* W sekcji SPIN motywem jest diagram — miedziane linie z tła .section--dark kolidowały
   z pigułkami (zostaje gradient i kropkowane tło z ::before). */
#spin.section--dark {
    background-image: linear-gradient(155deg, rgba(23, 58, 102, 0.5), rgba(11, 31, 58, 0) 55%);
}

/* --- Odbiorcy: „Dla kogo” z 5 grupami, dopisek pod obszarami (2026-10-15) --- */
@media (min-width: 640px) and (max-width: 1023px) {
    /* 2 kolumny: piąta karta na całą szerokość zamiast sieroty po lewej */
    .grid--5 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .grid--5 {
        grid-template-columns: repeat(5, 1fr);
    }

    /* 5 wąskich kolumn: mniejszy padding i nagłówek, bez dzielenia wyrazów („Przed-siębiorcy”) */
    .grid--5 .card {
        padding-inline: 0.5rem;
    }

    .grid--5 .card h3 {
        font-size: var(--text-lg);
        hyphens: manual;
    }
}

.areas-note {
    max-width: 50rem;
    text-wrap: balance;
    margin: var(--space-4) auto 0;
    text-align: center;
    color: var(--muted);
}

/* --- Mobile (2026-10-15): przyciski CTA wyśrodkowane; w pasku „Poznaj obszary współpracy”
   strzałka schodzi pod napis, wyśrodkowana (obok dwuliniowego napisu wisiała przy prawej krawędzi). --- */
@media (max-width: 639px) {
    .section__cta,
    .hero__cta {
        text-align: center;
        justify-content: center;
    }

    .band__content {
        text-align: center;
    }

    .band__cta {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .band__cta:hover,
    .band__cta:focus-visible {
        gap: 0.5rem;
    }

}

/* Strzałka paska „Poznaj obszary współpracy” w kółku — ten sam motyw co .hero__cue na banerze */
.band__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: border-color 0.25s ease;
}

.band__ring .band__arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
    transition: transform 0.25s ease;
}

.band__cta:hover .band__ring,
.band__cta:focus-visible .band__ring {
    border-color: var(--accent);
}

.band__cta:hover .band__arrow,
.band__cta:focus-visible .band__arrow {
    transform: translateX(3px);
}

/* --- Hero na telefonie (2026-10-16): zdjęcie NAD tekstem ---
   Na wąskim ekranie panorama 3:1 skalowana do wysokości całego hero pokazywała tylko jej środek,
   a Iza (≈64% szerokości obrazu) wypadała poza kadr. Tu: kwadratowy kadr na Izę, przejście w granat,
   tekst i przyciski pod spodem. Paralaksa wyłączona (inline transform przesuwałby obraz na tekst).
   Tablet (640–1023): ten sam układ, kadr 16:10, żeby zdjęcie nie zajmowało całego ekranu. */
@media (max-width: 1023px) {
    .hero {
        display: block;
        min-height: 0;
    }

    .hero__bg {
        position: relative;
        inset: auto;
        top: 0;
        height: auto;
        aspect-ratio: 1 / 1;
        object-position: 64% center;
        transform: none !important;
        will-change: auto;
    }

    .hero__overlay {
        inset: 0 0 auto;
        aspect-ratio: 1 / 1;
        background: linear-gradient(to bottom, rgba(11, 31, 58, 0) 55%, rgba(11, 31, 58, 0.85) 85%, var(--ink) 100%);
    }

    .hero__content {
        margin-top: -2.5rem;
        padding-top: 0;
    }

    .hero__cue {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hero__bg,
    .hero__overlay {
        aspect-ratio: 16 / 10;
    }
}