/* Scroll przy kotwicy uwzględni topbar*/
[id] {
    scroll-margin-top: 100px; /* dopasuj do wysokości topbara */
}

/* === Paleta brandowa === */
:root {
    --brand-primary: #11662D;          /* główny zielony */
    --brand-primary-hover: #0f5b28;    /* ciemniejszy na hover */
    --brand-dark: #122738;             /* tło granatowe */
    --brand-dark-hover: #1a3550;       /* alternatywny ciemny ton (opcjonalny) */
    --brand-light: #ffffff;            /* biały */
    --brand-light-hover: #f4f4f4;      /* jasnoszary hover */
    --brand-text-dark: #122738;        /* ciemny tekst na jasnych tłach */
    --brand-text-light: #ffffff;       /* jasny tekst na ciemnych tłach */
}

/* === Tła globalne === */
.bg-brand-dark {
    background-color: var(--brand-dark) !important;
    color: var(--brand-text-light);
}

/* === Menu w topbarze === */
#page-topbar nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Efekt hover – lekko rozjaśnia i dodaje delikatny pasek pod spodem */
#page-topbar nav a:hover {
    color: #fff;
}

#page-topbar nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background-color: var(--brand-primary);
    transition: width 0.3s ease;
    border-radius: 1px;
}

#page-topbar nav a:hover::after {
    width: 100%;
}

/* === Przycisk: zielony (główny CTA) === */
.btn-brand-primary {
    background-color: var(--brand-primary);
    color: var(--brand-text-light) !important;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.btn-brand-primary:hover {
    background-color: var(--brand-primary-hover);
    color: var(--brand-text-light) !important;
    transform: translateY(-1px);
}

/* === Przycisk: jasny (sekundarny) === */
.btn-brand-light {
    background-color: var(--brand-light);
    color: var(--brand-text-dark) !important;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.btn-brand-light:hover {
    background-color: var(--brand-light-hover);
    color: var(--brand-text-dark) !important;
    transform: translateY(-1px);
}

/* === Menu mobilne === */
#mobileMenu {
    background-color: var(--brand-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#mobileMenu nav a {
    color: var(--brand-text-light);
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.25s ease, color 0.2s ease;
}

#mobileMenu nav a:last-child {
    border-bottom: none;
}

#mobileMenu nav a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--brand-light);
    text-decoration: none;
}

.btn-feature-more {
    background-color: var(--brand-primary);
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.btn-feature-more:hover {
    background-color: var(--brand-primary-hover);
    color: #fff;
    transform: translateY(-2px);
}