/* ============================================================
   TotalTools Core CSS
   Lokalizacja docelowa: frontend/public/css/totaltools-core.css
   Bazowy system designu dla landing pages TOTALbet
   ============================================================ */

/* ---------- FONTY ---------- */
@font-face {
    font-family: 'Nippo';
    src: url('/fonts/Nippo-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nippo';
    src: url('/fonts/Nippo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('/fonts/Geomanist-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('/fonts/Geomanist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('/fonts/Geomanist-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   ZMIENNE CSS - BAZOWE (niezależne od trybu jasny/ciemny)
   ============================================================ */
:root {
    /* Fonty */
    --font-display: 'Nippo', Impact, sans-serif;
    --font-body: 'Geomanist', system-ui, -apple-system, sans-serif;

    /* Kolory marki (stałe) */
    --color-brand-green-dark: #105405;
    --color-brand-blue: #0066FF;
    --color-brand-blue-hover: #0052CC;
    --color-dark-navy: #161E29;
    --color-mid-navy: #29384A;
    --color-black: #0B0B0B;

    /* Brand - wartości domyślne (fallback dla Oferta Główna).
       Nadpisywane przez CSS z Landing_themes (-> --brand-primary itd.) */
    --brand-primary: #1DC400;
    --brand-primary-hover: #16A300;
    --brand-primary-light: #4FDB39;
    --brand-primary-dark: #0A8500;
    --brand-primary-rgb: 29, 196, 0;

    /* Kolory funkcyjne (stałe) */
    --color-success: #22C55E;
    --color-success-hover: #16A34A;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-warning: #F59E0B;
    --color-warning-hover: #D97706;
    --color-info: #3B82F6;
    --color-info-hover: #2563EB;

    /* Skala szarości */
    --color-white: #FFFFFF;
    --color-gray-50: #F5F7FA;
    --color-gray-100: #EBEFF3;
    --color-gray-200: #CCD5DB;
    --color-gray-300: #B0BBC3;
    --color-gray-400: #919597;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #29384A;
    --color-gray-800: #1E2936;
    --color-gray-900: #161E29;
    --color-gray-950: #0B0B0B;

    /* Breakpointy (wartości referencyjne) */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
    --bp-ultra: 1920px;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   MOTYW JASNY (domyślny)
   ============================================================ */
:root {
    --bg-body: #F5F7FA;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-muted: #EBEFF3;
    --bg-inverse: #161E29;

    --text-primary: #161E29;
    --text-secondary: #29384A;
    --text-muted: #919597;
    --text-inverse: #FFFFFF;
    --text-link: #0066FF;

    --border-color: #CCD5DB;
    --border-color-strong: #919597;
    --border-color-subtle: #EBEFF3;

    --overlay-bg: rgba(22, 30, 41, 0.6);
}

/* ============================================================
   MOTYW CIEMNY - automatyczny (wg systemu) gdy brak wymuszenia
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg-body: #0B0B0B;
        --bg-surface: #161E29;
        --bg-elevated: #29384A;
        --bg-muted: #29384A;
        --bg-inverse: #F5F7FA;

        --text-primary: #FFFFFF;
        --text-secondary: #CCD5DB;
        --text-muted: #919597;
        --text-inverse: #161E29;
        --text-link: #4D9AFF;

        --border-color: #29384A;
        --border-color-strong: #4B5563;
        --border-color-subtle: #1E2936;

        --overlay-bg: rgba(0, 0, 0, 0.75);
    }
}

/* ============================================================
   WYMUSZENIE MOTYWU JASNEGO - klasa .light na body lub html
   ============================================================ */
body.light,
html.light,
.light {
    --bg-body: #F5F7FA;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-muted: #EBEFF3;
    --bg-inverse: #161E29;

    --text-primary: #161E29;
    --text-secondary: #29384A;
    --text-muted: #919597;
    --text-inverse: #FFFFFF;
    --text-link: #0066FF;

    --border-color: #CCD5DB;
    --border-color-strong: #919597;
    --border-color-subtle: #EBEFF3;

    --overlay-bg: rgba(22, 30, 41, 0.6);
    color-scheme: light;
}

/* ============================================================
   WYMUSZENIE MOTYWU CIEMNEGO - klasa .dark na body lub html
   ============================================================ */
body.dark,
html.dark,
.dark {
    --bg-body: #0B0B0B;
    --bg-surface: #161E29;
    --bg-elevated: #29384A;
    --bg-muted: #29384A;
    --bg-inverse: #F5F7FA;

    --text-primary: #FFFFFF;
    --text-secondary: #CCD5DB;
    --text-muted: #919597;
    --text-inverse: #161E29;
    --text-link: #4D9AFF;

    --border-color: #29384A;
    --border-color-strong: #4B5563;
    --border-color-subtle: #1E2936;

    --overlay-bg: rgba(0, 0, 0, 0.75);
    color-scheme: dark;
}

/* ============================================================
   UWAGA: Kolory brandu (--brand-primary itd.) nadpisuje CSS
   z Landing_themes. Wartości w :root powyżej są domyślnym
   fallbackiem (Oferta Główna) na wypadek braku theme.
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

ul[class], ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--brand-primary);
}

img, picture, video, svg {
    max-width: 100%;
    display: block;
    height: auto;
}

button, input, textarea, select {
    font: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: transparent;
}

h1, .h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 1.2rem + min(6vw, 6vh), 4rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

h2, .h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 1rem + min(3vw, 3vh), 2.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

h3, .h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 0.95rem + min(1.5vw, 1.5vh), 2rem);
    line-height: 1.25;
}

h4, .h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.125rem, 0.9rem + min(0.75vw, 0.75vh), 1.5rem);
    line-height: 1.3;
}

h5, .h5 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, 0.9rem + min(0.45vw, 0.45vh), 1.25rem);
    line-height: 1.4;
}

h6, .h6 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
}

/* NIPPO ZAWSZE uppercase - dotyczy wszystkich nagłówków, .display-* i .nippo */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-l, .display-xl,
.nippo {
    text-transform: uppercase;
}

.display-l {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(3rem, 2rem + min(12vw, 12vh), 8rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.display-xl {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(4rem, 2.5rem + min(14vw, 14vh), 10rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

p, .body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
}

.lead {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1.125rem, 1rem + min(0.75vw, 0.75vh), 1.375rem);
    line-height: 1.5;
}

.microcopy, small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.nippo {
    font-family: var(--font-display);
}

.geomanist {
    font-family: var(--font-body);
}

.fw-regular { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-bold { font-weight: 700; }

.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.text-nowrap { white-space: nowrap; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   KONTENERY
   ============================================================ */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container, .container-sm { max-width: 540px; }
}

@media (min-width: 768px) {
    .container, .container-sm, .container-md { max-width: 720px; }
}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1320px; }
}

@media (min-width: 1920px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1600px; }
}

.container-narrow {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* ============================================================
   GRID 12 KOLUMN
   ============================================================ */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm { flex: 1 0 0%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1 { width: 8.333333%; flex: 0 0 auto; }
    .col-sm-2 { width: 16.666667%; flex: 0 0 auto; }
    .col-sm-3 { width: 25%; flex: 0 0 auto; }
    .col-sm-4 { width: 33.333333%; flex: 0 0 auto; }
    .col-sm-5 { width: 41.666667%; flex: 0 0 auto; }
    .col-sm-6 { width: 50%; flex: 0 0 auto; }
    .col-sm-7 { width: 58.333333%; flex: 0 0 auto; }
    .col-sm-8 { width: 66.666667%; flex: 0 0 auto; }
    .col-sm-9 { width: 75%; flex: 0 0 auto; }
    .col-sm-10 { width: 83.333333%; flex: 0 0 auto; }
    .col-sm-11 { width: 91.666667%; flex: 0 0 auto; }
    .col-sm-12 { width: 100%; flex: 0 0 auto; }
}

@media (min-width: 768px) {
    .col-md { flex: 1 0 0%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { width: 8.333333%; flex: 0 0 auto; }
    .col-md-2 { width: 16.666667%; flex: 0 0 auto; }
    .col-md-3 { width: 25%; flex: 0 0 auto; }
    .col-md-4 { width: 33.333333%; flex: 0 0 auto; }
    .col-md-5 { width: 41.666667%; flex: 0 0 auto; }
    .col-md-6 { width: 50%; flex: 0 0 auto; }
    .col-md-7 { width: 58.333333%; flex: 0 0 auto; }
    .col-md-8 { width: 66.666667%; flex: 0 0 auto; }
    .col-md-9 { width: 75%; flex: 0 0 auto; }
    .col-md-10 { width: 83.333333%; flex: 0 0 auto; }
    .col-md-11 { width: 91.666667%; flex: 0 0 auto; }
    .col-md-12 { width: 100%; flex: 0 0 auto; }
}

@media (min-width: 992px) {
    .col-lg { flex: 1 0 0%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { width: 8.333333%; flex: 0 0 auto; }
    .col-lg-2 { width: 16.666667%; flex: 0 0 auto; }
    .col-lg-3 { width: 25%; flex: 0 0 auto; }
    .col-lg-4 { width: 33.333333%; flex: 0 0 auto; }
    .col-lg-5 { width: 41.666667%; flex: 0 0 auto; }
    .col-lg-6 { width: 50%; flex: 0 0 auto; }
    .col-lg-7 { width: 58.333333%; flex: 0 0 auto; }
    .col-lg-8 { width: 66.666667%; flex: 0 0 auto; }
    .col-lg-9 { width: 75%; flex: 0 0 auto; }
    .col-lg-10 { width: 83.333333%; flex: 0 0 auto; }
    .col-lg-11 { width: 91.666667%; flex: 0 0 auto; }
    .col-lg-12 { width: 100%; flex: 0 0 auto; }
}

@media (min-width: 1200px) {
    .col-xl { flex: 1 0 0%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { width: 8.333333%; flex: 0 0 auto; }
    .col-xl-2 { width: 16.666667%; flex: 0 0 auto; }
    .col-xl-3 { width: 25%; flex: 0 0 auto; }
    .col-xl-4 { width: 33.333333%; flex: 0 0 auto; }
    .col-xl-5 { width: 41.666667%; flex: 0 0 auto; }
    .col-xl-6 { width: 50%; flex: 0 0 auto; }
    .col-xl-7 { width: 58.333333%; flex: 0 0 auto; }
    .col-xl-8 { width: 66.666667%; flex: 0 0 auto; }
    .col-xl-9 { width: 75%; flex: 0 0 auto; }
    .col-xl-10 { width: 83.333333%; flex: 0 0 auto; }
    .col-xl-11 { width: 91.666667%; flex: 0 0 auto; }
    .col-xl-12 { width: 100%; flex: 0 0 auto; }
}

/* ============================================================
   DISPLAY
   ============================================================ */
.d-none { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

@media (min-width: 576px) {
    .d-sm-none { display: none; }
    .d-sm-inline { display: inline; }
    .d-sm-inline-block { display: inline-block; }
    .d-sm-block { display: block; }
    .d-sm-flex { display: flex; }
    .d-sm-inline-flex { display: inline-flex; }
    .d-sm-grid { display: grid; }
}

@media (min-width: 768px) {
    .d-md-none { display: none; }
    .d-md-inline { display: inline; }
    .d-md-inline-block { display: inline-block; }
    .d-md-block { display: block; }
    .d-md-flex { display: flex; }
    .d-md-inline-flex { display: inline-flex; }
    .d-md-grid { display: grid; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none; }
    .d-lg-inline { display: inline; }
    .d-lg-inline-block { display: inline-block; }
    .d-lg-block { display: block; }
    .d-lg-flex { display: flex; }
    .d-lg-inline-flex { display: inline-flex; }
    .d-lg-grid { display: grid; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none; }
    .d-xl-inline { display: inline; }
    .d-xl-inline-block { display: inline-block; }
    .d-xl-block { display: block; }
    .d-xl-flex { display: flex; }
    .d-xl-inline-flex { display: inline-flex; }
    .d-xl-grid { display: grid; }
}

/* ============================================================
   FLEX
   ============================================================ */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

.flex-fill { flex: 1 1 auto; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }

.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }

.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-stretch { align-self: stretch; }

@media (min-width: 768px) {
    .flex-md-row { flex-direction: row; }
    .flex-md-column { flex-direction: column; }
    .justify-content-md-start { justify-content: flex-start; }
    .justify-content-md-center { justify-content: center; }
    .justify-content-md-end { justify-content: flex-end; }
    .justify-content-md-between { justify-content: space-between; }
    .align-items-md-center { align-items: center; }
    .align-items-md-start { align-items: flex-start; }
    .align-items-md-end { align-items: flex-end; }
}

@media (min-width: 992px) {
    .flex-lg-row { flex-direction: row; }
    .flex-lg-column { flex-direction: column; }
    .justify-content-lg-start { justify-content: flex-start; }
    .justify-content-lg-center { justify-content: center; }
    .justify-content-lg-end { justify-content: flex-end; }
    .justify-content-lg-between { justify-content: space-between; }
    .align-items-lg-center { align-items: center; }
    .align-items-lg-start { align-items: flex-start; }
    .align-items-lg-end { align-items: flex-end; }
}

/* ============================================================
   GAP
   ============================================================ */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 2rem; }
.gap-6 { gap: 3rem; }

/* ============================================================
   SPACING: margin & padding
   ============================================================ */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }
.m-auto { margin: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-auto { margin-bottom: auto; }

.ms-0 { margin-left: 0; }
.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }
.ms-3 { margin-left: 1rem; }
.ms-4 { margin-left: 1.5rem; }
.ms-5 { margin-left: 3rem; }
.ms-auto { margin-left: auto; }

.me-0 { margin-right: 0; }
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 1rem; }
.me-4 { margin-right: 1.5rem; }
.me-5 { margin-right: 3rem; }
.me-auto { margin-right: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

.ps-0 { padding-left: 0; }
.ps-1 { padding-left: 0.25rem; }
.ps-2 { padding-left: 0.5rem; }
.ps-3 { padding-left: 1rem; }
.ps-4 { padding-left: 1.5rem; }
.ps-5 { padding-left: 3rem; }

.pe-0 { padding-right: 0; }
.pe-1 { padding-right: 0.25rem; }
.pe-2 { padding-right: 0.5rem; }
.pe-3 { padding-right: 1rem; }
.pe-4 { padding-right: 1.5rem; }
.pe-5 { padding-right: 3rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

/* ============================================================
   KOLORY TEKSTU
   ============================================================ */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }
.text-link { color: var(--text-link); }

.text-brand { color: var(--brand-primary); }
.text-brand-blue { color: var(--color-brand-blue); }
.text-brand-green { color: var(--color-brand-green-dark); }

.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

.text-white { color: #FFFFFF; }
.text-black { color: #0B0B0B; }
.text-dark { color: #161E29; }

/* ============================================================
   KOLORY TŁA
   ============================================================ */
.bg-body { background-color: var(--bg-body); }
.bg-surface { background-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-muted { background-color: var(--bg-muted); }
.bg-inverse { background-color: var(--bg-inverse); }

.bg-brand { background-color: var(--brand-primary); }
.bg-brand-blue { background-color: var(--color-brand-blue); }
.bg-brand-green { background-color: var(--color-brand-green-dark); }

.bg-success { background-color: var(--color-success); }
.bg-danger { background-color: var(--color-danger); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }

.bg-white { background-color: #FFFFFF; }
.bg-black { background-color: #0B0B0B; }
.bg-dark { background-color: #161E29; }
.bg-transparent { background-color: transparent; }

/* ============================================================
   BORDER & RADIUS
   ============================================================ */
.border { border: 1px solid var(--border-color); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-start { border-left: 1px solid var(--border-color); }
.border-end { border-right: 1px solid var(--border-color); }

.border-strong { border-color: var(--border-color-strong); }
.border-subtle { border-color: var(--border-color-subtle); }
.border-brand { border-color: var(--brand-primary); }

.rounded-0 { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-pill { border-radius: var(--radius-full); }
.rounded-circle { border-radius: 50%; }

/* ============================================================
   CIENIE
   ============================================================ */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ============================================================
   POZYCJONOWANIE
   ============================================================ */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.start-0 { left: 0; }
.end-0 { right: 0; }

.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

.vw-100 { width: 100vw; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
.min-vh-75 { min-height: 75vh; }
.min-vh-50 { min-height: 50vh; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* ============================================================
   SEKCJE
   ============================================================ */
.section {
    padding: clamp(3rem, min(6vw, 6vh), 6rem) 0;
    position: relative;
}

.section-sm {
    padding: clamp(2rem, min(4vw, 4vh), 3.5rem) 0;
}

.section-lg {
    padding: clamp(4rem, min(8vw, 8vh), 5.5rem) 0;
}

.section-xl {
    padding: clamp(5rem, min(10vw, 10vh), 7.5rem) 0;
}

/* ============================================================
   PRZYCISKI
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
    outline: 3px solid rgba(var(--brand-primary-rgb), 0.4);
    outline-offset: 2px;
}

.btn-brand {
    background-color: var(--brand-primary);
    color: #FFFFFF;
    border-color: var(--brand-primary);
}

.btn-brand:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.35);
}

.btn-brand:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(var(--brand-primary-rgb), 0.25);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}

.btn-outline:hover {
    background-color: var(--text-primary);
    color: var(--bg-surface);
    border-color: var(--text-primary);
}

.btn-outline-brand {
    background-color: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-brand:hover {
    background-color: var(--brand-primary);
    color: #FFFFFF;
}

.btn-ghost {
    background-color: transparent;
    color: var(--text-primary);
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--bg-muted);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-xl {
    padding: 1.25rem 2.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ============================================================
   SKALOWANIE DLA DUŻYCH EKRANÓW
   Horyzontalnie (fonty/spacing) - skaluje się delikatnie.
   Pionowo - bez zmiany (proporcje obrazów/sekcji zachowane).
   ============================================================ */
@media (min-width: 1920px) {
    html { font-size: 17px; }
}

@media (min-width: 2400px) {
    html { font-size: 18px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

/* ============================================================
   PATTERN OVERLAYS (utility) — used as class modifier on sections
   Użycie: <section class="... has-pattern pattern-dots pattern-multiply">
   ============================================================ */
.has-pattern { position: relative; isolation: isolate; }
.has-pattern > * { position: relative; z-index: 2; }
.has-pattern::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    color: var(--pattern-color, currentColor);
    opacity: var(--pattern-opacity, 0.08);
}
.pattern-stripes-left::after {
    background-image: repeating-linear-gradient(45deg, transparent 0 18px, currentColor 18px 19px);
}
.pattern-stripes-right::after {
    background-image: repeating-linear-gradient(-45deg, transparent 0 18px, currentColor 18px 19px);
}
.pattern-crosshatch::after {
    background-image:
        repeating-linear-gradient(45deg, transparent 0 22px, currentColor 22px 23px),
        repeating-linear-gradient(-45deg, transparent 0 22px, currentColor 22px 23px);
    --pattern-opacity: 0.05;
}
.pattern-grid::after {
    background-image:
        repeating-linear-gradient(0deg, transparent 0 38px, currentColor 38px 39px),
        repeating-linear-gradient(90deg, transparent 0 38px, currentColor 38px 39px);
    --pattern-opacity: 0.06;
}
.pattern-dots::after {
    background-image: radial-gradient(currentColor 1.2px, transparent 1.5px);
    background-size: 20px 20px;
    --pattern-opacity: 0.12;
}
.pattern-chevron::after {
    background-image:
        linear-gradient(135deg, currentColor 25%, transparent 25.5%),
        linear-gradient(225deg, currentColor 25%, transparent 25.5%);
    background-size: 30px 30px;
    background-position: 0 0, 0 0;
    --pattern-opacity: 0.04;
}
.pattern-multiply::after { mix-blend-mode: multiply; }
.pattern-screen::after { mix-blend-mode: screen; }
.pattern-overlay::after { mix-blend-mode: overlay; }
.pattern-exclusion::after { mix-blend-mode: exclusion; }
.pattern-soft-light::after { mix-blend-mode: soft-light; }

/* ============================================================
   FLOATING ICONS (utility) — animowane ikony FA wzlatujące w tle sekcji
   ============================================================ */
.has-floating { position: relative; isolation: isolate; overflow: hidden; }
.has-floating > *:not(.floating-bg) { position: relative; z-index: 2; }
.has-floating > .floating-bg {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    color: var(--floating-color, currentColor);
}
.has-floating > .floating-bg > * {
    position: absolute; bottom: 0;
    animation: floatRise linear infinite;
    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.08));
}
@keyframes floatRise {
    0%   { transform: translate(0,  20vh)   rotate(0deg);   opacity: 0; }
    8%   {                                                  opacity: var(--floating-opacity, 0.1); }
    25%  { transform: translate(12px, 5vh)  rotate(90deg);  }
    50%  { transform: translate(-8px, -20vh) rotate(180deg); }
    75%  { transform: translate(14px, -45vh) rotate(270deg); }
    92%  {                                                  opacity: var(--floating-opacity, 0.1); }
    100% { transform: translate(0, -75vh)    rotate(360deg); opacity: 0; }
}
.has-floating > .floating-bg > *:nth-child(1)  { left:  5%; font-size: 1.5rem; animation-duration: 16s; animation-delay:   0s; --floating-opacity: 0.12; }
.has-floating > .floating-bg > *:nth-child(2)  { left: 18%; font-size: 3.2rem; animation-duration: 22s; animation-delay:  -4s; --floating-opacity: 0.08; }
.has-floating > .floating-bg > *:nth-child(3)  { left: 32%; font-size: 1.0rem; animation-duration: 13s; animation-delay:  -7s; --floating-opacity: 0.16; }
.has-floating > .floating-bg > *:nth-child(4)  { left:  8%; font-size: 2.4rem; animation-duration: 20s; animation-delay:  -2s; --floating-opacity: 0.10; }
.has-floating > .floating-bg > *:nth-child(5)  { left: 42%; font-size: 1.8rem; animation-duration: 15s; animation-delay: -11s; --floating-opacity: 0.09; }
.has-floating > .floating-bg > *:nth-child(6)  { left: 55%; font-size: 2.8rem; animation-duration: 19s; animation-delay:  -5s; --floating-opacity: 0.07; }
.has-floating > .floating-bg > *:nth-child(7)  { left: 68%; font-size: 1.3rem; animation-duration: 16s; animation-delay:  -9s; --floating-opacity: 0.14; }
.has-floating > .floating-bg > *:nth-child(8)  { left: 78%; font-size: 2.0rem; animation-duration: 17s; animation-delay:  -1s; --floating-opacity: 0.11; }
.has-floating > .floating-bg > *:nth-child(9)  { left: 88%; font-size: 1.5rem; animation-duration: 14s; animation-delay:  -6s; --floating-opacity: 0.12; }
.has-floating > .floating-bg > *:nth-child(10) { left: 15%; font-size: 2.2rem; animation-duration: 18s; animation-delay: -10s; --floating-opacity: 0.08; }
.has-floating > .floating-bg > *:nth-child(11) { left: 25%; font-size: 1.0rem; animation-duration: 12s; animation-delay:  -3s; --floating-opacity: 0.15; }
.has-floating > .floating-bg > *:nth-child(12) { left: 48%; font-size: 3.5rem; animation-duration: 24s; animation-delay:  -8s; --floating-opacity: 0.06; }
.has-floating > .floating-bg > *:nth-child(13) { left: 62%; font-size: 1.6rem; animation-duration: 16s; animation-delay: -13s; --floating-opacity: 0.11; }
.has-floating > .floating-bg > *:nth-child(14) { left: 72%; font-size: 2.5rem; animation-duration: 21s; animation-delay:  -2s; --floating-opacity: 0.09; }
.has-floating > .floating-bg > *:nth-child(15) { left: 92%; font-size: 1.2rem; animation-duration: 13s; animation-delay: -12s; --floating-opacity: 0.16; }
.has-floating > .floating-bg > *:nth-child(16) { left:  3%; font-size: 2.0rem; animation-duration: 15s; animation-delay:  -7s; --floating-opacity: 0.10; }
.has-floating > .floating-bg > *:nth-child(17) { left: 35%; font-size: 1.4rem; animation-duration: 14s; animation-delay: -14s; --floating-opacity: 0.12; }
.has-floating > .floating-bg > *:nth-child(18) { left: 58%; font-size: 1.0rem; animation-duration: 13s; animation-delay:  -4s; --floating-opacity: 0.14; }
.has-floating > .floating-bg > *:nth-child(19) { left: 82%; font-size: 2.7rem; animation-duration: 20s; animation-delay:  -9s; --floating-opacity: 0.07; }
.has-floating > .floating-bg > *:nth-child(20) { left: 97%; font-size: 1.5rem; animation-duration: 16s; animation-delay: -11s; --floating-opacity: 0.11; }
.has-floating > .floating-bg > *:nth-child(21) { left: 20%; font-size: 2.2rem; animation-duration: 18s; animation-delay:  -6s; --floating-opacity: 0.08; }
.has-floating > .floating-bg > *:nth-child(22) { left: 45%; font-size: 1.3rem; animation-duration: 14s; animation-delay:  -3s; --floating-opacity: 0.13; }
.has-floating > .floating-bg > *:nth-child(23) { left: 70%; font-size: 1.1rem; animation-duration: 12s; animation-delay: -15s; --floating-opacity: 0.15; }
.has-floating > .floating-bg > *:nth-child(24) { left: 93%; font-size: 2.9rem; animation-duration: 22s; animation-delay:  -8s; --floating-opacity: 0.07; }

/* ============================================================
   BELL RING keyframe (używane przez navbary, strip-band, strip-ticker)
   ============================================================ */
@keyframes bellRing {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(-10deg); }
    95% { transform: rotate(10deg); }
    97% { transform: rotate(-5deg); }
}

/* ============================================================
   NAVBARY (5 wariantów)
   Bazowa klasa + modyfikatory
   ============================================================ */
.nav-bar {
    --nav-bg: var(--bg-surface);
    --nav-fg: var(--text-primary);
    --nav-border: var(--border-color-subtle);
    --nav-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem clamp(0.75rem, min(4.5vw, 4.5vh), 2rem);
    min-height: var(--nav-height);
    background: var(--nav-bg);
    color: var(--nav-fg);
    border-bottom: 1px solid var(--nav-border);
    z-index: 50;
    position: relative;
}
.nav-bar--sticky {
    position: sticky;
    top: 0;
}
.nav-bar--dark {
    --nav-bg: #0B0B0B;
    --nav-fg: #fff;
    --nav-border: rgba(255,255,255,0.08);
}
.nav-bar--brand {
    --nav-bg: linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary) 60%, var(--brand-primary-light) 100%);
    --nav-fg: #fff;
    --nav-border: transparent;
}
.nav-bar--glass {
    --nav-bg: rgba(11, 11, 11, 0.35);
    --nav-fg: #fff;
    --nav-border: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.nav-bar--over-hero {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
}

.nav-bar__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}
.nav-bar__logo img {
    height: clamp(20px, min(4vw, 4vh), 24px);
    width: auto;
    display: block;
}

/* Warianty logo — wymagają 2 <img> w .nav-bar__logo (z odpowiednimi klasami).
   1) Theme-aware: dla navbarów z bg zależnym od motywu (.nav-bar bez modyfikatora bg).
      body.dark / body.light wymuszają, brak klasy = follow OS (prefers-color-scheme). */
.nav-bar__logo img.nav-bar__logo-img--for-dark { display: none; }
.nav-bar__logo img.nav-bar__logo-img--for-light { display: block; }
@media (prefers-color-scheme: dark) {
    body:not(.light) .nav-bar__logo img.nav-bar__logo-img--for-light { display: none; }
    body:not(.light) .nav-bar__logo img.nav-bar__logo-img--for-dark { display: block; }
}
body.dark .nav-bar__logo img.nav-bar__logo-img--for-light { display: none; }
body.dark .nav-bar__logo img.nav-bar__logo-img--for-dark { display: block; }
body.light .nav-bar__logo img.nav-bar__logo-img--for-light { display: block; }
body.light .nav-bar__logo img.nav-bar__logo-img--for-dark { display: none; }

/* 2) Mobile-square: dla navbarów z dużą ilością elementów (zegar/fraza),
      które nie chowają się <640px — wąskie logo zamieniamy na kwadratowe 32×32. */
.nav-bar__logo img.nav-bar__logo-img--mobile-only { display: none; }
@media (max-width: 640px) {
    .nav-bar__logo img.nav-bar__logo-img--desktop-only { display: none; }
    .nav-bar__logo img.nav-bar__logo-img--mobile-only {
        display: block;
        height: 32px;
        width: 32px;
    }
}

.nav-bar__spacer { flex: 1; }

.nav-bar__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.nav-bar__link {
    padding: 0.5rem 0.85rem;
    color: var(--nav-fg);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    opacity: 0.85;
    transition: all 150ms ease;
    white-space: nowrap;
}
.nav-bar__link:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.1);
    color: var(--nav-fg);
}

.nav-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 150ms ease;
    flex-shrink: 0;
}
.nav-bar__cta:hover {
    background: var(--brand-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.35);
}
.nav-bar--brand .nav-bar__cta {
    background: #fff;
    color: #0B0B0B;
}
.nav-bar--brand .nav-bar__cta:hover {
    background: #0B0B0B;
    color: #fff;
}

.nav-bar__outline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    background: transparent;
    color: var(--nav-fg);
    border: 1.5px solid currentColor;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.88rem;
    opacity: 0.75;
    transition: all 150ms ease;
    white-space: nowrap;
}
.nav-bar__outline:hover { opacity: 1; color: var(--nav-fg); }

.nav-bar__countdown {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.nav-bar__countdown-label {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, min(2.4vw, 2.4vh), 1rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.9;
    display: flex; align-items: center; gap: 0.5rem;
}
.nav-bar__countdown-label i {
    font-size: 1.1em;
    animation: bellRing 2s ease-in-out infinite;
}
.nav-bar__countdown-timer {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    font-family: var(--font-display);
    font-size: clamp(0.6rem, min(3vw, 3vh), 1.3rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.nav-bar__countdown-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    min-width: 2.2ch;
    text-align: center;
}
.nav-bar--over-hero .nav-bar__countdown-box,
.nav-bar--glass .nav-bar__countdown-box {
    background: rgba(0, 0, 0, 0.4);
}

.nav-bar__phrase {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.95;
    min-width: 0;
}
.nav-bar__phrase em {
    color: var(--brand-primary-highlight);
    font-style: normal;
}
.nav-bar--brand .nav-bar__phrase em {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Mobile - navbar */
@media (max-width: 640px) {
    .nav-bar__link { padding: 0.4rem 0.55rem; font-size: 0.8rem; }
    .nav-bar__link--hide-mobile { display: none; }
    .nav-bar__outline { padding: 0.4rem 0.65rem; font-size: 0.8rem; }
    .nav-bar__outline-label { display: none; }
    .nav-bar__cta { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
    .nav-bar__cta-label-full { display: none; }
    .nav-bar__countdown { gap: 0.4rem; }
    .nav-bar__phrase { display: none; }
}

@media (max-width: 991.98px) {
    .nav-bar__countdown-label { display: none; }
}

@media (max-width: 420px) {
    .nav-bar { gap: 0.5rem; }
    .nav-bar__countdown { gap: 0.15rem; }
    .nav-bar__countdown-timer { gap: 0.15rem; }
    .nav-bar__countdown-box { padding: 0.25rem 0.4rem; }
}

@media (max-width: 319.98px) {
    .nav-bar__countdown { display: none; }
}

/* Navbar sticky — przeźroczysty po scroll'u (is-scrolled dodawane przez JS) */
.nav-bar--sticky {
    transition: background 300ms ease, backdrop-filter 300ms ease,
                border-bottom-color 300ms ease, box-shadow 300ms ease;
}
.nav-bar--sticky.is-scrolled {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.nav-bar--sticky.nav-bar--dark.is-scrolled {
    background: rgba(11, 11, 11, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.nav-bar--sticky.nav-bar--brand.is-scrolled {
    background:
        linear-gradient(90deg,
            rgba(10, 133, 0, 0.55) 0%,
            rgba(29, 196, 0, 0.55) 60%,
            rgba(79, 219, 57, 0.55) 100%);
    box-shadow: 0 4px 24px rgba(var(--brand-primary-rgb), 0.2);
}

/* ============================================================
   STRIP BAND — paski przecinające (hasło / zegar / ticker)
   Bazowa .strip-band + modyfikatory:
     --brand (gradient zielony), --dark, --stripes (ukośne primary/black)
   Użycie:
     <div class="strip-band strip-band--brand">
       <span class="strip-band__text">Bonus <em>500 zł</em></span>
       <a class="strip-band__cta">Odbierz</a>
     </div>
   ============================================================ */
.strip-band {
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1.25rem);
    flex-wrap: wrap;
    font-family: var(--font-body);
    min-height: 48px;
    overflow: hidden;
    position: relative;
}
.strip-band--brand {
    background: linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary) 60%, var(--brand-primary-light) 100%);
    color: #fff;
}
.strip-band--dark {
    background: #0B0B0B;
    color: #fff;
}
.strip-band--stripes {
    background: repeating-linear-gradient(45deg,
        var(--brand-primary) 0 22px,
        #0B0B0B 22px 44px);
    color: #fff;
}
/* Animowany wariant - pasy przesuwają się po skosie w prawo */
.strip-band--stripes-animated {
    background: #0B0B0B;
    color: #fff;
    position: relative;
}
.strip-band--stripes-animated::before {
    content: '';
    position: absolute;
    top: -10%; bottom: -10%;
    left: -80px; right: -80px;
    background: repeating-linear-gradient(45deg,
        var(--brand-primary) 0 22px,
        #0B0B0B 22px 44px);
    animation: stripesShift 0.9s linear infinite;
    z-index: 0;
    pointer-events: none;
}
.strip-band--stripes-animated > * {
    position: relative;
    z-index: 1;
}
@keyframes stripesShift {
    from { transform: translateX(0); }
    to   { transform: translateX(62.225px); }
}
/* Czarny box pod tekstem dla czytelności - ta sama logika co w --stripes */
.strip-band--stripes .strip-band__text,
.strip-band--stripes .strip-band__countdown,
.strip-band--stripes-animated .strip-band__text,
.strip-band--stripes-animated .strip-band__countdown {
    background: #0B0B0B;
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px #0B0B0B;
}

.strip-band__text {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.strip-band__text em {
    font-style: normal;
    color: var(--brand-primary-highlight);
}
.strip-band--brand .strip-band__text em {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.strip-band--dark .strip-band__text em,
.strip-band--stripes .strip-band__text em,
.strip-band--stripes-animated .strip-band__text em {
    color: var(--brand-primary-highlight);
}
.strip-band__text i {
    animation: bellRing 2s ease-in-out infinite;
}

.strip-band__countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.strip-band__countdown-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    min-width: 2.2ch;
    text-align: center;
}
.strip-band--dark .strip-band__countdown-box {
    background: rgba(255, 255, 255, 0.1);
}
.strip-band--stripes .strip-band__countdown-box,
.strip-band--stripes-animated .strip-band__countdown-box {
    background: transparent;
    padding: 0;
}

.strip-band__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: #fff;
    color: #000;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 150ms ease;
    text-decoration: none;
}
.strip-band__cta:hover {
    background: #000;
    color: #fff;
    transform: translateY(-1px);
}
.strip-band--dark .strip-band__cta {
    background: var(--brand-primary);
    color: #fff;
}
.strip-band--dark .strip-band__cta:hover {
    background: var(--brand-primary-hover);
    color: #fff;
}
.strip-band--stripes .strip-band__cta,
.strip-band--stripes-animated .strip-band__cta {
    background: #fff;
    color: #000;
    box-shadow: 0 0 0 2px #0B0B0B;
}
.strip-band--stripes .strip-band__cta:hover,
.strip-band--stripes-animated .strip-band__cta:hover {
    background: #0B0B0B;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}

/* Mobile – na wąskim ekranie odstęp między zegarem a CTA na osi głównej */
@media (max-width: 480px) {
    .strip-band { gap: 0.5rem 0.75rem; }
    .strip-band__text { font-size: 0.85rem; }
    .strip-band__countdown { font-size: 0.95rem; }
    .strip-band__cta { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
}

[data-suuid], [data-euuid] { display: inline-block; }

@keyframes corsair-flash-up {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0));
    }
    30% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.9))
                drop-shadow(0 0 14px rgba(34, 197, 94, 0.5));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0));
    }
}

@keyframes corsair-flash-down {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0));
    }
    30% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.9))
                drop-shadow(0 0 14px rgba(239, 68, 68, 0.5));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0));
    }
}

[data-suuid].corsair-flash-up,
[data-euuid].corsair-flash-up { animation: corsair-flash-up 600ms ease-out; }
[data-suuid].corsair-flash-down,
[data-euuid].corsair-flash-down { animation: corsair-flash-down 600ms ease-out; }

@media (prefers-reduced-motion: reduce) {
    [data-suuid].corsair-flash-up,
    [data-suuid].corsair-flash-down,
    [data-euuid].corsair-flash-up,
    [data-euuid].corsair-flash-down { animation: none; }
}

/* ============================================================
   TŁA SEKCJI (lp-bg-*)
   Przełącznik formy tła landing pages. Każda klasa ustawia tło
   sekcji + pakiet zmiennych --sec-* (kolor tekstu, akcentu,
   obramowania, gradient nagłówka). Sekcja chowa własne natywne
   tło przez selektor :not([class*="lp-bg-"]).
   Patrz: docs/landing_page_spec/19_shared_config_snippets.md
   ============================================================ */
[class*="lp-bg-"] {
    --sec-fg: #ffffff;
    --sec-fg-soft: rgba(255,255,255,0.74);
    --sec-fg-faint: rgba(255,255,255,0.48);
    --sec-accent: var(--brand-primary-light);
    --sec-border: rgba(255,255,255,0.16);
    --sec-headline-grad: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.62) 100%);
}

.lp-bg-body, .lp-bg-surface, .lp-bg-elevated, .lp-bg-muted {
    --sec-fg: var(--text-primary);
    --sec-fg-soft: var(--text-secondary);
    --sec-fg-faint: var(--text-muted);
    --sec-accent: var(--brand-primary);
    --sec-border: var(--border-color);
    --sec-headline-grad: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-primary) 100%);
}
.lp-bg-body { background: var(--bg-body); }
.lp-bg-surface { background: var(--bg-surface); }
.lp-bg-elevated { background: var(--bg-elevated); }
.lp-bg-muted { background: var(--bg-muted); }
.lp-bg-inverse {
    background: var(--bg-inverse);
    --sec-fg: var(--text-inverse);
    --sec-fg-soft: color-mix(in srgb, var(--text-inverse) 72%, transparent);
    --sec-fg-faint: color-mix(in srgb, var(--text-inverse) 46%, transparent);
    --sec-accent: var(--brand-primary);
    --sec-border: color-mix(in srgb, var(--text-inverse) 18%, transparent);
    --sec-headline-grad: linear-gradient(135deg, var(--text-inverse) 0%, color-mix(in srgb, var(--text-inverse) 58%, transparent) 100%);
}

.lp-bg-boost {
    background:
        radial-gradient(ellipse at 15% 15%, rgba(255,106,0,0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(238,9,121,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(255,150,0,0.08) 0%, transparent 70%),
        linear-gradient(180deg, #120603 0%, #0B0B0B 100%);
    --sec-accent: #ff9800;
    --sec-headline-grad: linear-gradient(135deg, #ff9800 0%, #ff3d00 50%, #ee0979 100%);
}
.lp-bg-edge {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(0,102,255,0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(29,196,248,0.22) 0%, transparent 55%),
        linear-gradient(180deg, #061326 0%, #0A1A2E 100%);
    --sec-accent: #1DC4F8;
    --sec-headline-grad: linear-gradient(135deg, #5AB0FF 0%, #1DC4F8 100%);
}
.lp-bg-popular {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(29,196,0,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(11,255,34,0.12) 0%, transparent 60%),
        linear-gradient(180deg, #061206 0%, #0B0B0B 100%);
    --sec-accent: #0BFF22;
    --sec-headline-grad: linear-gradient(135deg, #1DC400 0%, #0BFF22 50%, #1DC4F8 100%);
}
.lp-bg-brand {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(var(--brand-primary-rgb),0.22) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(var(--brand-primary-rgb),0.12) 0%, transparent 55%),
        linear-gradient(180deg, #101820 0%, #0B0B0B 100%);
    --sec-accent: var(--brand-primary-light);
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, var(--brand-primary-light) 100%);
}

.lp-bg-soft-light, .lp-bg-grey-light, .lp-bg-grad-pl, .lp-bg-grad-dawn, .lp-bg-grad-sky,
.lp-bg-pitch-light, .lp-bg-clay-light, .lp-bg-court-light {
    --sec-fg: #161E29;
    --sec-fg-soft: #29384A;
    --sec-fg-faint: #6B7280;
    --sec-accent: var(--brand-primary);
    --sec-border: rgba(22,30,41,0.16);
    --sec-headline-grad: linear-gradient(135deg, #161E29 0%, var(--brand-primary) 100%);
}
.lp-bg-soft-light { background: linear-gradient(180deg, #FFFFFF 0%, #EBEFF3 100%); }
.lp-bg-grey-light {
    background:
        radial-gradient(ellipse at 70% 10%, rgba(255,255,255,0.85) 0%, transparent 60%),
        linear-gradient(135deg, #F5F7FA 0%, #CCD5DB 100%);
}
.lp-bg-soft-dark { background: linear-gradient(180deg, #161E29 0%, #0B0B0B 100%); }
.lp-bg-grey-dark {
    background:
        radial-gradient(ellipse at 75% 15%, rgba(75,85,99,0.35) 0%, transparent 55%),
        linear-gradient(135deg, #29384A 0%, #0B0B0B 100%);
}

.lp-bg-grad-sunset {
    background:
        radial-gradient(ellipse at 18% 16%, rgba(124,58,237,0.50) 0%, transparent 58%),
        radial-gradient(ellipse at 82% 86%, rgba(236,72,153,0.42) 0%, transparent 58%),
        radial-gradient(ellipse at 55% 60%, rgba(249,115,22,0.22) 0%, transparent 62%),
        linear-gradient(160deg, #2A0A2E 0%, #1A0610 100%);
    --sec-accent: #FBBF24;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #FBBF24 55%, #EC4899 100%);
}
.lp-bg-grad-ocean {
    background:
        radial-gradient(ellipse at 22% 18%, rgba(30,58,138,0.55) 0%, transparent 58%),
        radial-gradient(ellipse at 84% 84%, rgba(14,165,233,0.40) 0%, transparent 58%),
        linear-gradient(160deg, #04122E 0%, #020A1A 100%);
    --sec-accent: #38BDF8;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #38BDF8 100%);
}
.lp-bg-grad-emerald {
    background:
        radial-gradient(ellipse at 20% 18%, rgba(5,150,105,0.50) 0%, transparent 58%),
        radial-gradient(ellipse at 84% 86%, rgba(20,184,166,0.38) 0%, transparent 58%),
        linear-gradient(160deg, #04231C 0%, #06120E 100%);
    --sec-accent: #34D399;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #34D399 100%);
}
.lp-bg-grad-amber {
    background:
        radial-gradient(ellipse at 20% 16%, rgba(217,119,6,0.50) 0%, transparent 58%),
        radial-gradient(ellipse at 82% 88%, rgba(251,191,36,0.34) 0%, transparent 58%),
        linear-gradient(160deg, #2A1605 0%, #160B02 100%);
    --sec-accent: #FBBF24;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #FBBF24 100%);
}
.lp-bg-grad-esport {
    background:
        radial-gradient(ellipse at 18% 16%, rgba(29,196,248,0.42) 0%, transparent 56%),
        radial-gradient(ellipse at 84% 88%, rgba(24,168,216,0.30) 0%, transparent 56%),
        linear-gradient(160deg, #161E29 0%, #0B0F16 100%);
    --sec-accent: #1DC4F8;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #1DC4F8 100%);
}
.lp-bg-grad-vip {
    background:
        radial-gradient(ellipse at 26% 18%, rgba(201,162,75,0.34) 0%, transparent 56%),
        radial-gradient(ellipse at 80% 90%, rgba(201,162,75,0.16) 0%, transparent 54%),
        linear-gradient(160deg, #15130D 0%, #0A0905 100%);
    --sec-accent: #E4C76B;
    --sec-border: rgba(201,162,75,0.24);
    --sec-headline-grad: linear-gradient(135deg, #F4E3B0 0%, #C9A24B 100%);
}
.lp-bg-grad-pl {
    background:
        radial-gradient(ellipse at 50% -8%, rgba(220,38,38,0.34) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 116%, rgba(220,38,38,0.36) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #FFEDED 100%);
    --sec-accent: #DC2626;
    --sec-headline-grad: linear-gradient(135deg, #161E29 0%, #DC2626 100%);
}
.lp-bg-grad-night {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(30,41,59,0.70) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(15,23,42,0.60) 0%, transparent 55%),
        linear-gradient(160deg, #0A0F1E 0%, #020308 100%);
    --sec-accent: #5AB0FF;
    --sec-headline-grad: linear-gradient(180deg, #E2E8F0 0%, #64748B 100%);
}
.lp-bg-grad-sepia {
    background:
        radial-gradient(ellipse at 72% 14%, rgba(255,250,235,0.70) 0%, transparent 60%),
        linear-gradient(150deg, #F4E8D0 0%, #E8D5B0 100%);
    --sec-fg: #4A3520;
    --sec-fg-soft: #6B5234;
    --sec-fg-faint: #9C8255;
    --sec-accent: #A6712A;
    --sec-border: rgba(74,53,32,0.22);
    --sec-headline-grad: linear-gradient(135deg, #4A3520 0%, #A6712A 100%);
}
.lp-bg-grad-crimson {
    background:
        radial-gradient(ellipse at 20% 16%, rgba(220,38,38,0.50) 0%, transparent 58%),
        radial-gradient(ellipse at 84% 88%, rgba(127,29,29,0.50) 0%, transparent 58%),
        linear-gradient(160deg, #2A0808 0%, #160404 100%);
    --sec-accent: #FB7185;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #FB7185 100%);
}
.lp-bg-grad-dawn {
    background:
        radial-gradient(ellipse at 18% 12%, rgba(251,113,133,0.30) 0%, transparent 58%),
        radial-gradient(ellipse at 85% 90%, rgba(251,191,36,0.24) 0%, transparent 58%),
        linear-gradient(150deg, #FFFFFF 0%, #FFF1EC 100%);
    --sec-accent: #F43F5E;
    --sec-headline-grad: linear-gradient(135deg, #161E29 0%, #F43F5E 100%);
}
.lp-bg-grad-sky {
    background:
        radial-gradient(ellipse at 80% 10%, rgba(56,189,248,0.32) 0%, transparent 58%),
        radial-gradient(ellipse at 12% 92%, rgba(99,102,241,0.16) 0%, transparent 58%),
        linear-gradient(150deg, #FFFFFF 0%, #EEF6FF 100%);
    --sec-accent: #0EA5E9;
    --sec-headline-grad: linear-gradient(135deg, #161E29 0%, #0284C7 100%);
}

.lp-bg-pitch-light {
    background:
        repeating-linear-gradient(90deg, rgba(76,175,80,0) 0 64px, rgba(76,175,80,0.11) 64px 128px),
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.70) 0%, transparent 60%),
        linear-gradient(170deg, #E4F2D8 0%, #C7E3AE 100%);
    --sec-accent: #2E7D32;
    --sec-headline-grad: linear-gradient(135deg, #1B3A1B 0%, #2E7D32 100%);
}
.lp-bg-pitch-dark {
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 64px, rgba(0,0,0,0.20) 64px 128px),
        radial-gradient(ellipse at 30% 15%, rgba(29,196,0,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(11,255,34,0.10) 0%, transparent 55%),
        linear-gradient(170deg, #0C2A18 0%, #06150C 100%);
    --sec-accent: #4FDB39;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #4FDB39 100%);
}
.lp-bg-clay-light {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.55) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 96%, rgba(181,83,46,0.24) 0%, transparent 55%),
        linear-gradient(165deg, #F2DEC9 0%, #E4BE9C 100%);
    --sec-accent: #B5532E;
    --sec-headline-grad: linear-gradient(135deg, #3D2317 0%, #B5532E 100%);
}
.lp-bg-clay-dark {
    background:
        radial-gradient(ellipse at 22% 18%, rgba(200,91,63,0.44) 0%, transparent 56%),
        radial-gradient(ellipse at 84% 88%, rgba(150,60,40,0.40) 0%, transparent 56%),
        linear-gradient(160deg, #3A1A10 0%, #1E0D08 100%);
    --sec-accent: #E08A5B;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #E08A5B 100%);
}
.lp-bg-court-light {
    background:
        repeating-linear-gradient(90deg, rgba(120,80,40,0) 0 70px, rgba(120,80,40,0.16) 70px 71px),
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.60) 0%, transparent 55%),
        linear-gradient(165deg, #EBD3AC 0%, #D3B07E 100%);
    --sec-accent: #9A6B2F;
    --sec-headline-grad: linear-gradient(135deg, #3A2A14 0%, #9A6B2F 100%);
}
.lp-bg-court-dark {
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 70px, rgba(0,0,0,0.32) 70px 71px),
        radial-gradient(ellipse at 30% 15%, rgba(193,135,75,0.22) 0%, transparent 55%),
        linear-gradient(165deg, #2E2012 0%, #160F08 100%);
    --sec-accent: #D9A867;
    --sec-headline-grad: linear-gradient(135deg, #ffffff 0%, #D9A867 100%);
}