/* ==========================================================================
   KTS IGNIS — SKÓRA MARKETINGOWO-SPORTOWA
   --------------------------------------------------------------------------
   Reszta rodziny (Patronus/EduEaters/MatEaters) jedzie na wspólnym systemie
   „editorial / prestiż" (Fraunces + papier). Klub sportowy ma sprzedawać
   zajęcia rodzicom i porywać dzieci, więc tu świadomie ZDEJMUJEMY ten ton:
   szeroki, ciężki grotesk (Archivo) w wersalikach, ukośne cięcia z ulotki,
   ogień i karmazyn marki. app.css ładuje się wcześniej — poniżej nadpisujemy.

   Paleta = wprost z materiałów Canvy (KTS Ignis - materiały.pdf, s. 4):
     #B8262F ogień   #20353C grafit   #0A5BAA granat   #0696BB morski   #2AB3DF lód
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..900&display=swap');

/* ==========================================================================
   1. TOKENY MARKI
   ========================================================================== */
:root {
    /* akcent (kontrakt z systemem współdzielonym) */
    --accent:       #b8262f;
    --accent-rgb:   184, 38, 47;
    --accent-dark:  #8e1822;
    --accent-light: #fdecee;

    /* własne tokeny Ignis */
    --ignis:        #b8262f;
    --ignis-hot:    #e8442b;   /* jaśniejszy „płomień" do gradientów */
    --graphite:     #20353c;   /* grafit z palety — tła, CTA, stopka */
    --graphite-2:   #16262c;
    --navy:         #0a5baa;
    --sea:          #0696bb;
    --ice:          #2ab3df;

    /* neutrale — chłodne, sportowe (zamiast ciepłego papieru fundacji) */
    --paper:    #f6f7f9;
    --paper-2:  #eceff3;
    --card:     #ffffff;
    --ink:      #16232a;
    --ink-2:    #33454e;
    --muted:    #64757e;
    --line:     #dfe4ea;
    --line-2:   #c7d0d9;

    --font-display: 'Archivo', 'Inter', system-ui, sans-serif;

    --radius:    .35rem;
    --radius-lg: .6rem;
    --shadow-soft: 0 18px 40px -28px rgba(22,35,42,.6);
    --shadow-med:  0 30px 70px -34px rgba(22,35,42,.55);
    --shadow-hot:  0 18px 42px -20px rgba(var(--accent-rgb),.55);
}

/* ==========================================================================
   2. BAZA — zdejmujemy „papier", wchodzi chłodne, czyste tło
   ========================================================================== */
body {
    background-color: var(--paper);
    background-image:
        radial-gradient(48rem 32rem at 108% -8%, rgba(var(--accent-rgb),.07), transparent 62%),
        radial-gradient(42rem 30rem at -8% 6%, rgba(10,91,170,.05), transparent 58%);
    color: var(--ink);
}

h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.section-title, .brand-text, .footer-brand-text, .stat-number {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: 'wdth' 112;
    letter-spacing: -.005em;
    text-transform: uppercase;
    line-height: 1.02;
}
h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }

.display-4 { font-size: clamp(2.7rem, 6vw, 4.9rem); font-weight: 900; font-variation-settings: 'wdth' 118; }
.display-5 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 900; }
.display-6 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); font-weight: 900; }
.section-title { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 900; font-variation-settings: 'wdth' 115; }
.fw-black { font-weight: 900 !important; }

.lead { color: var(--ink-2); }
.dropcap::first-letter { font-family: var(--font-display); font-weight: 900; }

/* płomienny podkreślnik / gradient na wyrazie kluczowym */
.fire-underline { position: relative; white-space: nowrap; display: inline-block; }
.fire-underline::after {
    content: ''; position: absolute; left: -.05em; right: -.05em; bottom: .04em; height: .24em;
    background: linear-gradient(90deg, var(--ignis-hot), #ff9a3d);
    opacity: .35; border-radius: 2px;
}
.text-fire {
    background: linear-gradient(100deg, #ff6a3d 0%, #ffb457 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #ff8a3d;
}

/* ==========================================================================
   3. NAWIGACJA
   ========================================================================== */
.ribbon-bar { background: var(--graphite); border-bottom: 0; }
.ribbon-link { color: rgba(255,255,255,.55); }
.ribbon-link:hover { color: #fff; }
.ribbon-link + .ribbon-link::before { background: rgba(255,255,255,.22); }

.main-nav {
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid var(--line);
    padding: .6rem 0;
}
.main-nav.scrolled { background: rgba(255,255,255,.97); box-shadow: var(--shadow-soft); }
.navbar-nav .nav-link {
    font-family: var(--font-display); font-weight: 700; font-size: .8rem;
    letter-spacing: .06em; font-variation-settings: 'wdth' 105;
}
.navbar-nav .nav-link::after { height: 3px; bottom: -.3rem; }
.navbar-brand img { height: 52px !important; max-height: 52px !important; }
@media (max-width: 575px) { .navbar-brand img { height: 40px !important; max-height: 40px !important; } }

/* ==========================================================================
   4. PRZYCISKI — sportowe, wersalikowe, mocne
   ========================================================================== */
.btn-primary, .btn-outline-primary, .btn-solid, .btn-ghost, .cta-section .btn {
    font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; font-size: .86rem; font-variation-settings: 'wdth' 108;
    border-radius: var(--radius);
}
.btn-primary {
    background: linear-gradient(135deg, var(--ignis) 0%, var(--ignis-hot) 100%);
    border: 0; box-shadow: var(--shadow-hot); color: #fff;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--ignis) 100%);
    transform: translateY(-2px); box-shadow: 0 22px 48px -20px rgba(var(--accent-rgb),.7);
}
.btn-outline-primary { border: 2px solid var(--ink); color: var(--ink); }
.btn-outline-primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ghost {
    border: 2px solid rgba(255,255,255,.45); color: #fff; background: transparent;
    padding: .72rem 1.7rem; display: inline-flex; align-items: center; gap: .5rem;
    transition: background .25s, border-color .25s, transform .25s;
}
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; transform: translateY(-2px); }
.link-arrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }

/* ==========================================================================
   5. ETYKIETY SEKCJI
   ========================================================================== */
.section-label {
    font-family: var(--font-display); font-weight: 800; font-size: .72rem;
    letter-spacing: .18em; color: var(--ignis);
}
.section-label::before { height: 3px; width: 1.6rem; background: var(--ignis); }
/* na czerwonym klinie heroa czerwony kicker byl niewidoczny */
.ignis-hero .section-label { color: #fff; }
.ignis-hero .section-label::before { background: #fff; }

/* ==========================================================================
   6. HERO — ukośne cięcie prosto z ulotki (czerwień / biel po skosie)
   ========================================================================== */
.ignis-hero {
    position: relative; overflow: hidden; color: #fff;
    background: var(--graphite);
    padding: 5rem 0 7rem;
    isolation: isolate;
}
.ignis-hero__media {
    position: absolute; inset: 0; z-index: -3;
    background-size: cover; background-position: center 30%;
    filter: saturate(.85);
}
.ignis-hero::before {           /* karmazynowy klin po skosie */
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(115deg, rgba(184,38,47,.97) 0%, rgba(184,38,47,.94) 40%, rgba(142,24,34,.72) 56%, rgba(22,35,42,.62) 76%, rgba(22,35,42,.88) 100%);
}
.ignis-hero::after {            /* delikatna siatka kortu (nie „canvowa krata") */
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .1; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(115deg, #000 0%, transparent 60%);
}
.ignis-hero h1 { color: #fff; font-weight: 900; font-variation-settings: 'wdth' 120; text-shadow: 0 6px 30px rgba(0,0,0,.3); }
.ignis-hero .lead { color: rgba(255,255,255,.92); font-size: 1.2rem; }
/* ukośna „ścięta" krawędź dolna — podpis graficzny ulotki */
.ignis-hero__cut {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 5vw; min-height: 40px; z-index: 2;
    background: var(--paper);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* plakietki zaufania */
.hero-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.hero-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 999px; padding: .38rem .9rem;
    font-size: .78rem; font-weight: 600;
}
.hero-chip i { color: #ffd6a1; }

/* kadr zdjęcia w heroie — ścięty róg zamiast redakcyjnej ramki */
.hero-frame::before { display: none; }
.ignis-hero .hero-image {
    height: 470px; border: 0; border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.75);
}

/* ==========================================================================
   7. PASEK PRZEWIJANY (ticker)
   ========================================================================== */
.ignis-ticker {
    background: var(--graphite); color: #fff; overflow: hidden;
    border-top: 3px solid var(--ignis); border-bottom: 3px solid var(--ignis);
    padding: .8rem 0;
}
.ignis-ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ignis-ticker:hover .ignis-ticker__track { animation-play-state: paused; }
.ignis-ticker b {
    font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; font-size: .9rem; padding: 0 1.5rem; white-space: nowrap;
}
.ignis-ticker b::after { content: ' 🔥'; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ignis-ticker__track { animation: none; } }

/* ==========================================================================
   8. STATYSTYKI — tablica wyników
   ========================================================================== */
.stat-strip { border: 0; gap: 1rem; background: transparent; }
.stat-strip > * {
    border: 0 !important; background: var(--card); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft); padding: 1.9rem 1rem;
    border-bottom: 4px solid var(--ignis) !important;
}
.stat-number { color: var(--ignis); font-weight: 900; font-variation-settings: 'wdth' 118; }
.stat-label { color: var(--muted); font-family: var(--font-display); font-weight: 700; }

/* ==========================================================================
   9. KARTY
   ========================================================================== */
.glass-card, .feature-card, .offer-card, .testimonial-card {
    border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card);
}
.glass-card::after { height: 4px; background: linear-gradient(90deg, var(--ignis), var(--ignis-hot)); }
.offer-card::before { width: 5px; background: linear-gradient(180deg, var(--ignis), var(--ignis-hot)); }
.offer-price {
    background: var(--graphite); color: #fff; font-family: var(--font-display);
    font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem;
}
.icon-badge {
    background: linear-gradient(135deg, var(--ignis), var(--ignis-hot)); color: #fff;
    border: 0; box-shadow: var(--shadow-hot); border-radius: var(--radius);
}
.testimonial-card p { font-family: var(--font); font-style: normal; }

/* karta korzyści z dużym numerem w tle */
.benefit-card {
    position: relative; overflow: hidden; height: 100%;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 2.1rem 1.9rem; box-shadow: 0 1px 2px rgba(22,35,42,.05);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-med); border-color: var(--line-2); }
.benefit-card__num {
    position: absolute; right: .9rem; top: .4rem; font-family: var(--font-display);
    font-weight: 900; font-size: 4.6rem; line-height: 1; color: var(--ignis); opacity: .1;
    font-variation-settings: 'wdth' 120;
}
.benefit-card h3 { font-size: 1.15rem; letter-spacing: 0; margin-bottom: .75rem; }
.benefit-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.benefit-card li { position: relative; padding-left: 1.5rem; font-size: .93rem; color: var(--ink-2); }
.benefit-card li::before {
    content: ''; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem;
    background: var(--ignis); transform: rotate(45deg);
}

/* ==========================================================================
   10. TRENER — karta zawodnicza
   ========================================================================== */
.coach-card {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background: var(--graphite); color: #fff; box-shadow: var(--shadow-med);
}
.coach-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(140deg, rgba(184,38,47,.85) 0%, rgba(184,38,47,.2) 46%, transparent 72%);
}
.coach-card > * { position: relative; z-index: 1; }
.coach-card h2, .coach-card h3, .coach-card h4 { color: #fff; }
.coach-card p { color: rgba(255,255,255,.84); }

.medal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.medal-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .96rem; }
.medal-list i { color: var(--ignis); font-size: 1.05rem; line-height: 1.6; flex-shrink: 0; }
.on-dark .medal-list, .band-dark .medal-list, .coach-card .medal-list { color: rgba(255,255,255,.86); }
.on-dark .medal-list i, .band-dark .medal-list i, .coach-card .medal-list i { color: #ffab5e; }

.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
    display: inline-block; font-family: var(--font-display); font-weight: 700;
    font-size: .71rem; letter-spacing: .06em; text-transform: uppercase;
    padding: .32rem .78rem; border-radius: 999px;
    background: var(--accent-light); color: var(--accent-dark);
    border: 1px solid rgba(var(--accent-rgb),.22);
}
.tag--dark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.tag--navy { background: rgba(10,91,170,.09); color: var(--navy); border-color: rgba(10,91,170,.22); }

/* ==========================================================================
   11. SEKCJE CIEMNE
   ========================================================================== */
.band-dark {
    position: relative; background: var(--graphite); color: #fff; overflow: hidden;
    padding: 4.5rem 0;
}
.band-dark::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6;
    background: radial-gradient(34rem 22rem at 88% 118%, rgba(var(--accent-rgb),.42), transparent 62%);
}
.band-dark > * { position: relative; z-index: 1; }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4, .band-dark .section-title { color: #fff; }
.band-dark p { color: rgba(255,255,255,.78); }
.band-dark .text-muted { color: rgba(255,255,255,.68) !important; }
.band-dark .section-label { color: #fff; }
.band-dark .section-label::before { background: var(--ignis-hot); }

/* ==========================================================================
   12. KROKI / OŚ CZASU
   ========================================================================== */
.step-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .step-row { grid-template-columns: 1fr; } }
.step {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 2rem 1.75rem; position: relative; box-shadow: 0 1px 2px rgba(22,35,42,.05);
}
.step__n {
    width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ignis), var(--ignis-hot)); color: #fff;
    font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; margin-bottom: 1.1rem;
    box-shadow: var(--shadow-hot);
}
.step h4 { letter-spacing: 0; font-size: 1.08rem; margin-bottom: .5rem; }

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 9px; top: .6rem; bottom: .6rem; width: 2px; background: var(--line-2); }
.timeline li { position: relative; padding: 0 0 1.5rem 2.4rem; }
.timeline li::before {
    content: ''; position: absolute; left: 3px; top: .4rem; width: 14px; height: 14px;
    border-radius: 50%; background: var(--ignis); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.16);
}
.timeline .t-year {
    font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ignis); display: block; margin-bottom: .15rem;
}
.band-dark .timeline::before, .coach-card .timeline::before { background: rgba(255,255,255,.22); }
.band-dark .timeline .t-year, .coach-card .timeline .t-year { color: #ffab5e; }
.band-dark .timeline li::before, .coach-card .timeline li::before {
    background: var(--ignis-hot); box-shadow: 0 0 0 4px rgba(232,68,43,.24);
}

/* ==========================================================================
   13. CTA + STOPKA + PAGE HERO
   ========================================================================== */
.cta-section {
    background: linear-gradient(125deg, var(--ignis) 0%, var(--accent-dark) 55%, var(--graphite) 100%);
    border: 0; border-radius: var(--radius-lg); overflow: hidden; color: #fff;
}
.cta-section::before { height: 0; }
.cta-section::after {
    opacity: 1;
    background-image:
        radial-gradient(26rem 18rem at 12% -20%, rgba(255,255,255,.16), transparent 60%),
        linear-gradient(115deg, transparent 55%, rgba(0,0,0,.3) 100%);
}
.cta-section h2, .cta-section .section-title { color: #fff; }
.cta-section p { color: rgba(255,255,255,.86); }
.cta-section .btn-solid { background: #fff; color: var(--ignis); border: 0; }
.cta-section .btn-solid:hover { background: #fff; color: var(--accent-dark); }
.cta-section .btn-rounded:not(.btn-solid) { border: 2px solid rgba(255,255,255,.55); }

.site-footer { background: var(--graphite); color: #dfe7ea; }
.footer-bottom { background: rgba(0,0,0,.28); }
.footer-heading { font-family: var(--font-display); font-weight: 800; color: rgba(255,255,255,.5); }
.footer-logo { filter: none; opacity: 1; height: 58px; }

.page-hero {
    background: var(--graphite); border-bottom: 0; color: #fff; padding: 4.5rem 0 4rem;
    position: relative; overflow: hidden;
}
.page-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(38rem 24rem at 92% -10%, rgba(var(--accent-rgb),.5), transparent 62%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .section-title, .page-hero h1 { color: #fff; }
.page-hero .lead, .page-hero .text-muted { color: rgba(255,255,255,.82) !important; }
.page-hero .section-label { color: #fff; }
.page-hero .section-label::before { background: var(--ignis-hot); }

/* ==========================================================================
   14. FAQ (natywne <details> — zero JS)
   ========================================================================== */
.faq-item {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    margin-bottom: .7rem; overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.faq-item[open] { border-color: rgba(var(--accent-rgb),.4); box-shadow: var(--shadow-soft); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.4rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink);
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; font-weight: 700; color: var(--ignis); line-height: 1;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item p { padding: 0 1.4rem 1.25rem; margin: 0; color: var(--ink-2); font-size: .96rem; }

/* ==========================================================================
   15. DROBIAZGI
   ========================================================================== */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.check-list li { position: relative; padding-left: 1.85rem; color: var(--ink-2); }
.check-list li::before {
    content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: -.05em;
    color: var(--ignis); font-size: 1.05rem;
}
.band-dark .check-list li, .coach-card .check-list li { color: rgba(255,255,255,.86); }
.band-dark .check-list li::before, .coach-card .check-list li::before { color: #ffab5e; }

.photo-cut { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); border-radius: 0 !important; }
.photo-cut--rev { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); border-radius: 0 !important; }

.pill-price {
    display: inline-flex; align-items: baseline; gap: .35rem;
    font-family: var(--font-display); font-weight: 900; color: var(--ignis); font-size: 2rem;
}
.pill-price small { font-size: .5em; font-weight: 700; color: var(--muted); }

.compare-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare-table th, .compare-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.compare-table thead th {
    font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    font-size: .74rem; letter-spacing: .1em; color: var(--muted); border-bottom: 2px solid var(--line-2);
}
.compare-table tbody tr:hover { background: var(--paper-2); }
.compare-table .yes { color: #1f8a4c; font-weight: 700; }
.compare-table .no  { color: var(--ignis); font-weight: 700; }

.rounded-xl { border-radius: var(--radius-lg); }
.bg-accent-light { background: var(--accent-light); }
.bg-paper-2 { background: var(--paper-2); }

@media (max-width: 991px) {
    /* Waski ekran: skos 115deg przykrywa juz tylko rog kadru, wiec tekst ladowal
       wprost na zdjeciu. Na mobile przechodzimy na przyciemnienie pionowe. */
    .ignis-hero::before {
        background: linear-gradient(170deg, rgba(184,38,47,.96) 0%, rgba(142,24,34,.92) 55%, rgba(22,35,42,.9) 100%);
    }
}
@media (max-width: 768px) {
    .ignis-hero { padding: 3rem 0 4rem; }
    .ignis-hero .hero-image { height: 240px; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
}