/* =========================================================================
   WESTOM.PL — CUSTOM.CSS  (REFAKTOR 2026-05, v3)
   ─────────────────────────────────────────────────────────────────────────
   ARCHITEKTURA:
   - Mobile-first, 8px grid, 3 breakpointy (640/1024/1280)
   - WCAG AA+ kontrasty
   - Zero hover-jank (@media hover: hover)
   - WSPÓLNY DESIGN SYSTEM dla 3 typów stron:
       1) PILLAR LIGHT  (/pozycjonowanie/, /kurs-seo/, etc.) — .westom-pillar-light
       2) HOMEPAGE DARK (/) — .westom-home-dark-zone
       3) BLOG ARTICLE  (wpisy) — .westom-art
   ─────────────────────────────────────────────────────────────────────────
   KLUCZOWA ZMIANA vs v2 (refaktor 2026-05):
   Wprowadzono CONTEXT TOKENS (--ctx-*) — wartości tła/tekstu/karty zmieniają
   się automatycznie zależnie od wrappera (light vs dark vs dark-panel).
   Komponenty współdzielone (author-byline, pillar-trust, pillar-list--steps,
   instant-answer-block, expert-quote, sources-list, definition-list) czytają
   z tokenów zamiast hardkodować kolory.

   EFEKT: zniknęły hotfixy z sekcji 58-60 starej wersji (~600 linii !important
   override'ów). Dodanie nowej kombinacji „komponent X w kontekście Y" już
   nie wymaga osobnego CSS.
   ─────────────────────────────────────────────────────────────────────────
   STRUKTURA PLIKU:
   1.  DESIGN TOKENS (brand, neutrals, spacing, typography, motion)
   2.  CONTEXT TOKENS (--ctx-* dla light/dark/dark-panel)
   3.  RESET / BASE
   4.  BREAKOUT utility (full-bleed)
   5.  BUTTONS (sitewide)
   6.  BREADCRUMBS
   7.  TOC (mobile + desktop sidebar)
   8.  MOBILE STICKY CTA
   9.  FOOTER

   --- PILLAR LIGHT (sekcje 10-29) ---
   10. PILLAR LIGHT wrapper + typografia
   11. PILLAR HERO (ciemny hero na jasnej stronie)
   12. PILLAR SECTION + responsive
   13. PILLAR TYPOGRAPHY (h2/h3/p w sekcji)
   14. LISTY (.westom-pillar-list + --steps + --light)
   15. LIGHT CARDS / GRID
   16. LIGHT STATS
   17. FIGURE
   18. INFO BOX / WARNING
   19. QUOTES (.westom-pillar-quote + .expert-quote)
   20. CASE STUDY (.westom-pillar-case)
   21. TABLES
   22. PILLAR CTA (light + final dark)
   23. PILLAR DARK PANEL
   24. TWO-COLUMN
   25. PILLAR EXPERT
   26. PILLAR FAQ
   27. PILLAR HUB
   28. PARTNER BADGE
   29. VIDEO EMBED

   --- SHARED context-aware (sekcje 30-36) ---
   30. AUTHOR BYLINE
   31. SOURCES LIST
   32. PILLAR TRUST BAR
   33. DEFINITION LIST
   34. KEY FACTS (w hero)
   35. INSTANT ANSWER BLOCK
   36. CHIPS / BADGES / FEATURE TAGS

   --- HOMEPAGE DARK (sekcje 37-47) ---
   37. HOME DARK ZONE wrapper
   38. HERO V4
   39. WESTOM SECTION + section-header
   40. SNIPPET GRID + FACT CARDS
   41. SERVICES DEEP GRID
   42. STORY TIMELINE
   43. STATS GRID + STAT BOX
   44. CASE GRID + CASE CARD (homepage variant)
   45. CTA SECTION (homepage)
   46. EXPERT CONTAINER (homepage)
   47. PR LOGOS / EVENTS / BLOG FEED / FAQ custom

   --- BLOG ARTICLE (sekcje 48-54) ---
   48. .westom-art wrapper + typografia
   49. ANSWER LEAD
   50. ARTICLE IMG / FIGURE
   51. INFO / SUCCESS / WARNING BOXES
   52. CASE STUDY SNIPPET
   53. ARTICLE CTA + btn-primary-pro
   54. STEPS (ol numerowane)

   --- POZOSTAŁE (sekcje 55-60) ---
   55. RANK MATH FAQ BLOCK
   56. dfn + data utility
   57. SCREEN READER + HIDE UTILITIES
   58. ACCESSIBILITY / MOTION
   59. PRINT
   60. KADENCE TEXT-ALIGN SAFETY NET (consolidated hotfix)

   --- RESPONSIVE (sekcje 61-65) ---
   61. TABLET (>=640px)
   62. DESKTOP (>=1024px)
   63. LARGE (>=1280px)
   64. KADENCE wrapper overrides (mobile)
   65. MOBILE EDGE CASES (<=380px)
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
    /* Brand */
    --w-blue:     #0064ff;
    --w-blue-600: #0050cc;
    --w-blue-700: #003d99;
    --w-blue-800: #002966;
    --w-blue-50:  #eef4ff;
    --w-blue-100: #dbe7ff;

    /* Neutrals (cool gray) */
    --w-ink:     #0b1220;
    --w-ink-700: #1f2937;
    --w-ink-600: #374151;
    --w-ink-500: #4b5563;
    --w-ink-400: #6b7280;
    --w-ink-300: #9ca3af;

    --w-line:      #e5e7eb;
    --w-line-soft: #f1f5f9;
    --w-bg:        #ffffff;
    --w-bg-soft:   #f8fafc;
    --w-bg-tint:   #f0f6ff;

    /* Status */
    --w-success:    #047857;
    --w-success-bg: #ecfdf5;
    --w-warn:       #b45309;
    --w-warn-bg:    #fef3c7;
    --w-danger:     #b91c1c;
    --w-danger-bg:  #fef2f2;

    /* Dark sections */
    --w-dark:       #0a1628;
    --w-dark-soft:  #0f1f3a;
    --w-dark-text:  #cbd5e1;
    --w-dark-muted: #94a3b8;
    --w-dark-line:  rgba(255,255,255,0.08);

    /* Spacing (8px grid) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;

    /* Typography */
    --w-font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --w-font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Shadows */
    --sh-sm:   0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
    --sh-md:   0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
    --sh-lg:   0 12px 32px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04);
    --sh-blue: 0 8px 24px rgba(0,100,255,0.18);

    /* Layout */
    --w-content:      900px;
    --w-content-wide: 1100px;
    --w-page-pad:     16px;

    /* Motion */
    --w-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --w-dur:  0.2s;
}


/* =========================================================================
   2. CONTEXT TOKENS — light is default; dark wrappers flip them
   ─────────────────────────────────────────────────────────────────────────
   Każdy komponent współdzielony (byline, trust, cards, info-box, etc.)
   czyta WYŁĄCZNIE z tokenów --ctx-*. Wrapper dark zone / dark panel /
   ciemny hero pillar je nadpisuje — komponenty automatycznie się dostosują.
   ZASADA: w komponentach NIE hardkodujemy #fff, #f0f6ff, rgba(255,...,0.04).
   Używamy --ctx-card-bg, --ctx-text, --ctx-link, itd.
   ========================================================================= */
:root {
    /* Default = LIGHT context */
    --ctx-text:           var(--w-ink-600);
    --ctx-text-strong:    var(--w-ink);
    --ctx-text-muted:     var(--w-ink-500);
    --ctx-text-faint:     var(--w-ink-400);

    --ctx-link:           var(--w-blue-700);
    --ctx-link-hover:     var(--w-blue-800);
    --ctx-link-underline: rgba(0,80,204,0.3);

    --ctx-bg:             var(--w-bg);
    --ctx-bg-soft:        var(--w-bg-soft);
    --ctx-bg-tint:        var(--w-bg-tint);

    --ctx-card-bg:        #ffffff;
    --ctx-card-border:    var(--w-line);
    --ctx-card-shadow:    var(--sh-sm);
    --ctx-card-hover-border: var(--w-blue-100);

    --ctx-divider:        var(--w-line);
    --ctx-divider-soft:   var(--w-line-soft);

    --ctx-accent:         var(--w-blue);
    --ctx-accent-text:    var(--w-blue-700);
    --ctx-accent-border:  var(--w-blue);
}

/* DARK contexts — homepage zone, dark panel in pillar pages, pillar hero */
.westom-home-dark-zone,
.westom-pillar-dark-panel,
.westom-pillar-hero {
    --ctx-text:           var(--w-dark-text);
    --ctx-text-strong:    #ffffff;
    --ctx-text-muted:     var(--w-dark-muted);
    --ctx-text-faint:     rgba(203,213,225,0.6);

    --ctx-link:           #93c5fd;
    --ctx-link-hover:     #ffffff;
    --ctx-link-underline: rgba(147,197,253,0.4);

    --ctx-bg:             var(--w-dark);
    --ctx-bg-soft:        rgba(255,255,255,0.04);
    --ctx-bg-tint:        rgba(0,100,255,0.08);

    --ctx-card-bg:        rgba(255,255,255,0.03);
    --ctx-card-border:    rgba(255,255,255,0.08);
    --ctx-card-shadow:    none;
    --ctx-card-hover-border: rgba(0,100,255,0.3);

    --ctx-divider:        rgba(255,255,255,0.08);
    --ctx-divider-soft:   rgba(255,255,255,0.06);

    --ctx-accent:         var(--w-blue);
    --ctx-accent-text:    #60a5fa;
    --ctx-accent-border:  #60a5fa;
}


/* =========================================================================
   3. RESET / BASE
   ========================================================================= */
html {
    scroll-behavior: smooth;
}

/* Anchor offset: ~80px sticky header + admin bar */
:where(h1, h2, h3, h4)[id] {
    scroll-margin-top: 110px;
}

html, body {
    overflow-x: clip;
}


/* =========================================================================
   4. BREAKOUT utility — full-bleed wewnątrz wąskiego kontenera Kadence
   Używana przez .westom-home-dark-zone, .footer-westom-container,
   .westom-pillar-light (na mobile) — patrz sekcja 64.
   ========================================================================= */
.westom-breakout,
.westom-home-dark-zone,
.footer-westom-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}

/* Kompensacja scrollbara (Kadence ustawia --scrollbar-offset) */
@supports (margin-left: calc(-50vw + var(--scrollbar-offset, 0px) / 2)) {
    .westom-breakout,
    .westom-home-dark-zone,
    .footer-westom-container {
        margin-left:  calc(-50vw + var(--scrollbar-offset, 0px) / 2);
        margin-right: calc(-50vw + var(--scrollbar-offset, 0px) / 2);
    }
}


/* =========================================================================
   5. BUTTONS — spójne dla całej strony (light + dark + blog)
   ========================================================================= */
.btn-primary,
.btn-secondary,
.btn-westom-outline,
.btn-primary-pro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    transition: background var(--w-dur) var(--w-ease),
                color var(--w-dur) var(--w-ease),
                transform var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease);
    cursor: pointer;
    line-height: 1.2;
    min-height: 48px;
    box-sizing: border-box;
    border: none;
}

/* Primary — niebieskie tło, białe */
.btn-primary,
.btn-primary-pro {
    background: var(--w-blue);
    color: #ffffff !important;
    padding: 16px 32px;
    box-shadow: var(--sh-blue);
}

/* Outline — przezroczyste z niebieską ramką */
.btn-westom-outline {
    background: transparent;
    color: var(--w-blue) !important;
    padding: 14px 30px;
    border: 2px solid var(--w-blue);
}

/* Secondary (dark hero) — przezroczyste z białą ramką */
.btn-secondary {
    background: rgba(255,255,255,0.06);
    color: #fff !important;
    padding: 14px 30px;
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(4px);
}

@media (hover: hover) {
    .btn-primary:hover,
    .btn-primary-pro:hover {
        background: var(--w-blue-600);
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(0,100,255,0.28);
    }
    .btn-westom-outline:hover {
        background: var(--w-blue);
        color: #fff !important;
        transform: translateY(-2px);
    }
    .btn-secondary:hover {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.35);
    }
}

.btn-primary:focus-visible,
.btn-primary-pro:focus-visible,
.btn-westom-outline:focus-visible,
.btn-secondary:focus-visible {
    outline: 3px solid var(--w-blue-100);
    outline-offset: 3px;
}

.btn-primary:active,
.btn-primary-pro:active,
.btn-westom-outline:active,
.btn-secondary:active {
    transform: translateY(0);
}

/* CTA final pillar — biały primary na ciemnym tle */
.westom-pillar-cta--final .btn-primary {
    background: #ffffff;
    color: var(--w-blue-800) !important;
    box-shadow: 0 8px 24px rgba(255,255,255,0.18);
}
@media (hover: hover) {
    .westom-pillar-cta--final .btn-primary:hover {
        background: var(--w-bg-tint);
        color: var(--w-blue-800) !important;
        box-shadow: 0 12px 32px rgba(255,255,255,0.28);
    }
}
.westom-pillar-cta--final .btn-westom-outline {
    border-color: rgba(255,255,255,0.4);
    color: #fff !important;
}
@media (hover: hover) {
    .westom-pillar-cta--final .btn-westom-outline:hover {
        background: rgba(255,255,255,0.1);
        border-color: #fff;
        color: #fff !important;
    }
}


/* =========================================================================
   6. BREADCRUMBS
   ========================================================================= */
.westom-breadcrumbs {
    padding: var(--s-3) var(--s-5);
    font-size: 13px;
    color: var(--w-ink-400);
    background: transparent;
}

ol.westom-breadcrumbs__list {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: var(--w-content-wide);
    counter-reset: none;
}

ol.westom-breadcrumbs__list > li {
    display: inline-flex;
    align-items: center;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

ol.westom-breadcrumbs__list > li::marker,
ol.westom-breadcrumbs__list > li::before {
    content: none !important;
    display: none !important;
}

ol.westom-breadcrumbs__list > li:not(:last-child)::after {
    content: "›";
    margin-left: var(--s-2);
    opacity: 0.5;
}

ol.westom-breadcrumbs__list a {
    color: var(--w-ink-500);
    text-decoration: none;
    transition: color var(--w-dur) var(--w-ease);
}
ol.westom-breadcrumbs__list a:hover {
    color: var(--w-blue);
    text-decoration: underline;
}
ol.westom-breadcrumbs__list > li[aria-current="page"] {
    color: var(--w-ink-700);
    font-weight: 600;
}


/* =========================================================================
   7. TOC — MOBILE (collapsible details) + DESKTOP (sidebar Rank Math / Kadence)
   ========================================================================= */

/* --- 7a. MOBILE TOC --- */
.mobile-toc-custom {
    background: var(--w-bg-soft);
    border: 1px solid var(--w-line);
    border-left: 4px solid var(--w-blue);
    border-radius: var(--r-md);
    margin: var(--s-5) auto;
    max-width: var(--w-content);
    overflow: hidden;
}
.mobile-toc-custom details summary {
    padding: var(--s-4) var(--s-5);
    font-weight: 700;
    color: var(--w-ink);
    cursor: pointer;
    font-size: 16px;
    list-style: none;
    position: relative;
    min-height: 48px;
    display: flex;
    align-items: center;
    transition: background var(--w-dur) var(--w-ease);
}
.mobile-toc-custom details summary::-webkit-details-marker { display: none; }
.mobile-toc-custom details summary::after {
    content: '+';
    position: absolute;
    right: var(--s-5);
    top: 50%;
    transform: translateY(-50%);
    color: var(--w-blue);
    font-size: 24px;
    font-weight: 300;
    transition: transform var(--w-dur) var(--w-ease);
}
.mobile-toc-custom details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.mobile-toc-custom details summary:hover {
    background: var(--w-bg-tint);
}

/* TOC list — zero Kadence interferencji */
.mobile-toc-custom ol,
.mobile-toc-custom ol[start] {
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    counter-reset: toc-counter;
    border-top: 1px solid var(--w-line-soft);
    background: transparent !important;
}
.mobile-toc-custom ol li {
    counter-increment: toc-counter;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
    display: list-item;
}
.mobile-toc-custom ol li::marker { content: none !important; }

.mobile-toc-custom ol li a {
    display: flex !important;
    align-items: baseline;
    gap: 10px;
    padding: 9px 18px !important;
    color: var(--w-ink-700);
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1.45;
    border-bottom: 1px solid var(--w-line-soft);
    transition: background var(--w-dur) var(--w-ease),
                color var(--w-dur) var(--w-ease);
    min-height: 0 !important;
    position: static !important;
}
.mobile-toc-custom ol li:last-child a { border-bottom: none; }

.mobile-toc-custom ol li a::before {
    content: counter(toc-counter) ".";
    position: static !important;
    transform: none !important;
    color: var(--w-blue);
    font-weight: 700;
    font-size: 12px;
    min-width: 20px;
    flex-shrink: 0;
    font-family: var(--w-font-head);
    font-variant-numeric: tabular-nums;
}

.mobile-toc-custom ol li a:hover {
    background: var(--w-bg-tint);
    color: var(--w-blue-700);
}

/* --- 7b. DESKTOP TOC (sidebar Rank Math + Kadence Blocks) --- */
.wp-block-rank-math-toc-block nav ul,
.wp-block-rank-math-toc-block nav ol,
.kb-table-of-content-list,
.kb-table-of-contents-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.kb-table-of-content-list li,
.wp-block-rank-math-toc-block nav li {
    list-style: none !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

@media (min-width: 1024px) {
    /* Na single-post ukryj inline TOC (jest sticky w sidebarze) */
    .single-post .entry-content > .wp-block-rank-math-toc-block { display: none !important; }

    .single-post .sidebar-inner-wrap,
    .single-post #secondary {
        position: sticky;
        top: calc(110px + var(--wp-admin--admin-bar--height, 0px));
        z-index: 10;
        max-height: 85vh;
        overflow-y: auto;
    }

    .wp-block-rank-math-toc-block nav a,
    .kb-table-of-content-list li a {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: var(--w-ink-500) !important;
        display: block;
        border-left: 2px solid var(--w-line) !important;
        padding: var(--s-2) 0 var(--s-2) var(--s-4) !important;
        text-decoration: none !important;
        transition: all var(--w-dur) var(--w-ease);
    }
    .wp-block-rank-math-toc-block nav a:hover,
    .kb-table-of-content-list li a:hover {
        color: var(--w-blue) !important;
        border-left-color: var(--w-blue) !important;
        background-color: var(--w-bg-soft) !important;
    }

    .active-toc-link,
    .kb-table-of-content-list li.is-active a,
    .wp-block-rank-math-toc-block nav a.active-toc-link {
        color: var(--w-blue-700) !important;
        border-left: 3px solid var(--w-blue) !important;
        font-weight: 700 !important;
        background: linear-gradient(90deg, var(--w-bg-tint) 0%, transparent 100%) !important;
        padding-left: calc(var(--s-4) - 1px) !important;
    }
}
@media (max-width: 1023px) {
    #secondary .widget:has(.kb-table-of-content-nav),
    .kb-table-of-content-nav,
    .single-post #secondary .wp-block-rank-math-toc-block { display: none !important; }
}


/* =========================================================================
   8. MOBILE STICKY CTA — szybka rezerwacja / kontakt
   ========================================================================= */
.westom-mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: var(--s-3);
    left: var(--s-3);
    right: var(--s-3);
    background: var(--w-dark);
    color: #fff;
    border-radius: var(--r-lg);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35),
                0 0 0 1px rgba(0,100,255,0.3);
    z-index: 99990;
    align-items: center;
    gap: var(--s-3);
    transition: transform 0.25s var(--w-ease);
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px) {
    .westom-mobile-sticky-cta { display: flex; }
}
@media (min-width: 1024px) {
    .westom-mobile-sticky-cta { display: none !important; }
}
.westom-mobile-sticky-cta.is-hidden { transform: translateY(150%); }

.westom-mobile-sticky-cta__text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}
.westom-mobile-sticky-cta__pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
    animation: westom-pulse 2s infinite;
}
@keyframes westom-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.westom-mobile-sticky-cta__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 13px;
    min-width: 0;
}
.westom-mobile-sticky-cta__label strong {
    font-size: 14px;
    color: #fff;
}
.westom-mobile-sticky-cta__sub {
    font-size: 12px;
    color: var(--w-dark-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.westom-mobile-sticky-cta__btn {
    display: inline-flex;
    align-items: center;
    background: var(--w-blue);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-sm);
    text-decoration: none !important;
    flex-shrink: 0;
    transition: transform 0.15s var(--w-ease), background var(--w-dur) var(--w-ease);
    white-space: nowrap;
    min-height: 44px;
    box-sizing: border-box;
}
.westom-mobile-sticky-cta__btn:hover { background: var(--w-blue-600); }
.westom-mobile-sticky-cta__btn:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
    .westom-mobile-sticky-cta { transition: none; }
    .westom-mobile-sticky-cta__pulse { animation: none; }
}


/* =========================================================================
   9. STOPKA WESTOM (custom dark)
   ========================================================================= */
.footer-westom-container {
    background: var(--w-dark);
    color: var(--w-dark-text);
    font-family: var(--w-font-body);
    padding: var(--s-12) 0 var(--s-6);
    border-top: 3px solid var(--w-blue);
    box-sizing: border-box;
}
.footer-westom-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--s-5);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
}

.footer-col h3 {
    color: #ffffff;
    font-family: var(--w-font-head);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 var(--s-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-brand h3 {
    font-size: 24px;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #fff;
}
.footer-brand p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--w-dark-muted);
    margin: 0 0 var(--s-3);
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: var(--s-2); }
.footer-col a {
    color: var(--w-dark-text);
    text-decoration: none;
    transition: color var(--w-dur) var(--w-ease),
                padding-left var(--w-dur) var(--w-ease);
    font-size: 14px;
    line-height: 1.4;
    display: inline-block;
    padding: var(--s-1) 0;
}
.footer-col a:hover {
    color: #93c5fd;
    padding-left: var(--s-1);
}
.footer-col a:focus-visible {
    outline: 2px solid var(--w-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Clutch widget w stopce */
.westom-footer-clutch { margin: var(--s-3) 0; }
.westom-footer-clutch a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    padding: var(--s-2);
    border-radius: var(--r-sm);
    transition: background var(--w-dur) var(--w-ease);
}
.westom-footer-clutch a:hover { background: rgba(255,255,255,0.04); padding-left: var(--s-2); }
.westom-footer-clutch img { display: block; opacity: 0.9; margin-bottom: var(--s-1); }
.westom-footer-stars { color: #fbbf24; font-size: 16px; letter-spacing: 1px; line-height: 1; display: block; }
.westom-footer-clutch small {
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-top: var(--s-1);
    color: #fff;
}

/* CTA w stopce */
.westom-footer-cta { margin: var(--s-4) 0; }
.westom-footer-cta__btn {
    display: inline-flex;
    align-items: center;
    background: var(--w-blue);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    padding: var(--s-3) var(--s-6);
    border-radius: var(--r-sm);
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background var(--w-dur) var(--w-ease),
                transform var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease);
    min-height: 44px;
    box-sizing: border-box;
}
.westom-footer-cta__btn:hover {
    background: var(--w-blue-600);
    transform: translateY(-2px);
    box-shadow: var(--sh-blue);
    padding-left: var(--s-6) !important;
}

/* Social w stopce */
.westom-footer-social {
    margin-top: var(--s-3);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}
.westom-footer-social a {
    color: var(--w-dark-text);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-sm);
}
.westom-footer-social span { color: var(--w-dark-muted); }

/* Kontakt w stopce */
.footer-trust address {
    font-style: normal;
    line-height: 1.6;
    margin-bottom: var(--s-3);
    font-size: 14px;
    color: var(--w-dark-text);
}
.westom-footer-contact-details {
    margin-top: var(--s-3);
    font-size: 14px;
    line-height: 1.7;
}
.westom-footer-contact-details a {
    color: #fff;
    font-weight: 600;
    padding: 0;
}

.westom-footer-legal {
    list-style: none;
    padding: 0;
    margin-top: var(--s-3);
    font-size: 13px;
}
.westom-footer-legal a { color: var(--w-dark-muted); }

/* Copyright */
.footer-westom-bottom {
    max-width: 1240px;
    margin: var(--s-8) auto 0;
    padding: var(--s-5) var(--s-5) 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    font-size: 13px;
    color: var(--w-dark-muted);
}
.footer-westom-bottom .copyright { margin: 0; }


/* =========================================================================
   ████████████████████████████████████████████████████████████████████████
   PILLAR LIGHT PAGES (/pozycjonowanie/, /kurs-seo/, /audyt-seo/, etc.)
   ████████████████████████████████████████████████████████████████████████
   ========================================================================= */


/* =========================================================================
   10. PILLAR LIGHT — wrapper + typografia bazowa
   ========================================================================= */
.westom-pillar-light {
    font-family: var(--w-font-body);
    color: var(--w-ink-700);
    line-height: 1.7;
    font-size: 17px;
    background: var(--w-bg);
}

.westom-pillar-light a {
    color: var(--w-blue-700);
    text-decoration: underline;
    text-decoration-color: rgba(0,80,204,0.3);
    text-underline-offset: 3px;
    transition: color var(--w-dur) var(--w-ease),
                text-decoration-color var(--w-dur) var(--w-ease);
}
.westom-pillar-light a:hover {
    color: var(--w-blue-800);
    text-decoration-color: var(--w-blue-700);
}

.westom-pillar-light strong { color: var(--w-ink); font-weight: 700; }

/* Wszystkie obrazki w pillar light — responsive */
.westom-pillar-light img {
    max-width: 100%;
    height: auto;
}


/* =========================================================================
   11. PILLAR HERO — ciemny hero u góry pillar pages
   (jest w wrapperze .westom-home-dark-zone.westom-hero-only, więc dziedziczy
   ctx-tokens dark, ale ma własne wizualne dodatki: gradient, grid, glow)
   ========================================================================= */
.westom-hero-only {
    padding-bottom: 0 !important;
}

.westom-pillar-hero {
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,100,255,0.18), transparent 60%),
        linear-gradient(135deg, var(--w-dark) 0%, #051836 60%, var(--w-dark-soft) 100%);
    color: #ffffff;
    padding: var(--s-12) var(--s-5) var(--s-10);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* Subtelny grid w tle — agency look */
.westom-pillar-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 100% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 30%, #000 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.westom-pillar-hero__bg-text {
    position: absolute;
    right: -8%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(140px, 22vw, 320px);
    font-weight: 900;
    color: rgba(255,255,255,0.025);
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    letter-spacing: -0.05em;
}

.westom-pillar-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--s-2);
    box-sizing: border-box;
}

.westom-pillar-hero h1 {
    color: #ffffff;
    font-size: clamp(28px, 5.5vw, 52px);
    margin: var(--s-5) 0 var(--s-4);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.westom-pillar-hero__author-byline {
    color: var(--w-dark-muted);
    font-size: 14px;
    margin: 0 auto var(--s-6);
    max-width: 700px;
}
.westom-pillar-hero__author-byline a {
    color: #93c5fd;
    text-decoration: none;
    border-bottom: 1px dotted rgba(147,197,253,0.4);
}
.westom-pillar-hero__author-byline a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.westom-pillar-hero__lead {
    font-size: clamp(15px, 2vw, 17px);
    font-weight: 400;
    margin: var(--s-6) auto;
    border-left: 3px solid var(--w-blue);
    padding: var(--s-5) var(--s-6);
    max-width: 760px;
    text-align: left;
    background: rgba(255,255,255,0.04);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: #e2e8f0;
    line-height: 1.7;
    backdrop-filter: blur(4px);
}
.westom-pillar-hero__lead strong {
    color: #ffffff;
}

.westom-pillar-hero__lead-secondary {
    font-size: clamp(14px, 1.8vw, 16px);
    color: var(--w-dark-muted);
    max-width: 760px;
    margin: 0 auto var(--s-6);
    line-height: 1.7;
    text-align: left;
}

.westom-pillar-hero__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin: var(--s-6) 0 var(--s-8);
}

.westom-pillar-hero .btn-primary {
    margin-top: var(--s-2);
}

/* dfn w hero — inny styl niż w treści (jasny) */
.westom-pillar-hero dfn {
    font-style: normal;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px dotted rgba(255,255,255,0.4);
}


/* =========================================================================
   12. PILLAR SECTION — mobile-first, full-bleed
   Na mobile sekcja wyłamuje się na pełną szerokość Kadence wrappera (1.5rem).
   Tablet+ przywraca normalne marginesy. Klucz do rozwiązania "za wąsko".
   ========================================================================= */
.westom-pillar-section {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-top: var(--s-10);
    margin-bottom: var(--s-10);
    padding: 0 var(--s-5);
    box-sizing: border-box;
}

/* Sekcje z własnym tłem (akcent) */
.westom-pillar-section--accent-bg {
    background: var(--w-bg-soft);
    padding: var(--s-8) var(--s-5);
    border-top: 1px solid var(--w-line);
    border-bottom: 1px solid var(--w-line);
    margin-top: var(--s-12);
    margin-bottom: var(--s-12);
}

.westom-pillar-section--center { text-align: center; }

/* Centrowanie treści w sekcji */
.westom-pillar-section > h2,
.westom-pillar-section > h3,
.westom-pillar-section > p,
.westom-pillar-section > ol,
.westom-pillar-section > ul,
.westom-pillar-section > .westom-info-box,
.westom-pillar-section > .westom-pillar-quote,
.westom-pillar-section > .instant-answer-block,
.westom-pillar-section > blockquote {
    max-width: var(--w-content);
    margin-left: auto;
    margin-right: auto;
}

/* Gridy/karty — szersze ograniczenie */
.westom-pillar-section > .westom-light-grid,
.westom-pillar-section > .westom-light-stats,
.westom-pillar-section > .westom-pillar-twocol,
.westom-pillar-section > .westom-pillar-hub,
.westom-pillar-section > .westom-pillar-cta,
.westom-pillar-section > .westom-pillar-figure,
.westom-pillar-section > .westom-pillar-faq,
.westom-pillar-section > .westom-pillar-expert,
.westom-pillar-section > .westom-table-wrap,
.westom-pillar-section > .westom-pillar-case,
.westom-pillar-section > .westom-video-embed {
    max-width: var(--w-content-wide);
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================================
   13. PILLAR TYPOGRAPHY — nagłówki i akapity w sekcji
   ========================================================================= */
.westom-pillar-section h2 {
    font-family: var(--w-font-head);
    font-size: clamp(24px, 4.5vw, 36px);
    font-weight: 800;
    color: var(--w-ink);
    margin: 0 auto var(--s-5);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.westom-pillar-section h3 {
    font-family: var(--w-font-head);
    font-size: clamp(19px, 2.5vw, 24px);
    font-weight: 700;
    color: var(--w-ink);
    margin: var(--s-8) auto var(--s-3);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.westom-pillar-section p {
    margin: 0 auto var(--s-4);
    color: var(--w-ink-600);
    line-height: 1.7;
}

.westom-pillar-section p:last-child { margin-bottom: 0; }


/* =========================================================================
   14. LISTY (.westom-pillar-list base + --steps + --light)
   ========================================================================= */
.westom-pillar-list {
    padding-left: 22px;
    margin: var(--s-4) auto;
    max-width: var(--w-content);
    line-height: 1.75;
    color: var(--w-ink-600);
}
.westom-pillar-list li {
    margin-bottom: var(--s-3);
    padding-left: var(--s-1);
}
.westom-pillar-list li::marker {
    color: var(--w-blue);
    font-weight: 700;
}
.westom-pillar-list strong { color: var(--w-ink); }

/* Wariant light — używany w ciemnym panelu (.westom-pillar-dark-panel) */
.westom-pillar-list--light { color: #d1d5db; }
.westom-pillar-list--light strong { color: #fff; }
.westom-pillar-list--light li::marker { color: #60a5fa; }

/* PROCESS LIST — numerowane karty z bublem ::before
   CONTEXT-AWARE: czyta z --ctx-card-* więc działa w light i dark.
   Naprawia: stary kod miał `background: #fff` hardkodowane → białe wyspy
   w .westom-home-dark-zone.
*/
.westom-pillar-list--steps {
    counter-reset: steps-counter;
    list-style: none;
    padding: 0;
    margin: var(--s-6) auto;
    max-width: var(--w-content);
}
.westom-pillar-list--steps > li {
    counter-increment: steps-counter;
    position: relative;
    padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-12) + var(--s-3));
    margin-bottom: var(--s-4);
    background: var(--ctx-card-bg);
    border: 1px solid var(--ctx-card-border);
    border-radius: var(--r-md);
    box-shadow: var(--ctx-card-shadow);
    color: var(--ctx-text);
}
.westom-pillar-list--steps > li::marker { content: ""; }
.westom-pillar-list--steps > li::before {
    content: counter(steps-counter);
    position: absolute;
    left: var(--s-4);
    top: var(--s-4);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--w-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    font-family: var(--w-font-head);
}
.westom-pillar-list--steps > li > strong {
    display: block;
    color: var(--ctx-text-strong);
    font-size: 17px;
    margin-bottom: var(--s-2);
    line-height: 1.35;
}
.westom-pillar-list--steps > li > p {
    margin: 0;
    color: var(--ctx-text);
    line-height: 1.65;
    font-size: 15px;
}
.westom-pillar-list--steps > li > p a {
    color: var(--ctx-link);
}
.westom-pillar-list--steps > li > p a:hover {
    color: var(--ctx-link-hover);
}


/* =========================================================================
   15. LIGHT CARDS / GRID — uniwersalna siatka kart na pillar pages
   ========================================================================= */
.westom-light-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-top: var(--s-6);
}

.westom-light-card {
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-5);
    transition: transform var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
}

.westom-light-card--accent {
    border-top: 3px solid var(--w-blue);
    background: var(--w-bg-tint);
}

.westom-light-card--wide {
    grid-column: 1 / -1;
}

.westom-light-card__title {
    color: var(--w-blue-700);
    font-family: var(--w-font-head);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--s-3) 0;
}
.westom-light-card__title--gold { color: var(--w-warn); }

.westom-light-card p {
    margin: 0;
    font-size: 15px;
    color: var(--w-ink-600);
    line-height: 1.65;
}

.westom-light-card strong { color: var(--w-ink); }

@media (hover: hover) {
    .westom-light-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh-lg);
        border-color: var(--w-blue-100);
    }
}


/* =========================================================================
   16. LIGHT STATS
   ========================================================================= */
.westom-light-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.westom-light-stat {
    background: #fff;
    border: 1px solid var(--w-line);
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-md);
    text-align: center;
    transition: transform var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease);
}

.westom-light-stat data {
    display: block;
    font-family: var(--w-font-head);
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 800;
    color: var(--w-blue-700);
    line-height: 1;
    margin-bottom: var(--s-2);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.westom-light-stat span {
    font-size: 12px;
    color: var(--w-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    line-height: 1.4;
    display: block;
}

@media (hover: hover) {
    .westom-light-stat:hover {
        transform: translateY(-2px);
        box-shadow: var(--sh-md);
    }
}


/* =========================================================================
   17. FIGURE w pillar
   ========================================================================= */
.westom-pillar-figure {
    margin: var(--s-8) auto;
    text-align: center;
    max-width: var(--w-content-wide);
}
.westom-pillar-figure img {
    border: 1px solid var(--w-line);
    border-radius: var(--r-md);
    max-width: 100%;
    height: auto;
    box-shadow: var(--sh-sm);
    display: block;
    margin: 0 auto;
}
.westom-pillar-figure figcaption {
    margin-top: var(--s-3);
    font-size: 14px;
    color: var(--w-ink-400);
    font-style: italic;
    line-height: 1.5;
}


/* =========================================================================
   18. INFO BOX / WARNING (pillar)
   ========================================================================= */
.westom-info-box {
    background: var(--w-bg-tint);
    padding: var(--s-5) var(--s-6);
    border-left: 4px solid var(--w-blue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    margin: var(--s-6) auto;
}
.westom-info-box h3 {
    margin-top: 0 !important;
    color: var(--w-blue-700) !important;
    font-size: 18px !important;
}
.westom-info-box p:last-child { margin-bottom: 0; }
.westom-info-box ul {
    margin-bottom: 0;
    padding-left: 20px;
    color: var(--w-ink-600);
}
.westom-info-box li { margin-bottom: var(--s-2); }
.westom-info-box dl { margin: var(--s-3) 0 0; }
.westom-info-box dt {
    font-weight: 700;
    color: var(--w-ink);
    margin-top: var(--s-3);
}
.westom-info-box dd {
    margin: var(--s-1) 0 var(--s-3);
    color: var(--w-ink-600);
}

.westom-pillar-warning {
    border: 1px solid #fecaca;
    background: var(--w-danger-bg);
    padding: var(--s-6);
    border-radius: var(--r-md);
    margin: var(--s-6) auto;
    border-left: 4px solid var(--w-danger);
    max-width: var(--w-content);
}
.westom-pillar-warning h3 {
    color: var(--w-danger) !important;
    margin-top: 0 !important;
    font-size: 18px !important;
}
.westom-pillar-warning p {
    margin-bottom: var(--s-3);
    color: #7f1d1d;
}
.westom-pillar-warning p:last-child { margin-bottom: 0; }


/* =========================================================================
   19. QUOTES — .westom-pillar-quote (zwykły) + .expert-quote (z " glyphem)
   CONTEXT-AWARE: czytają z --ctx-* (działają w light, dark panel, blog).
   ========================================================================= */
.westom-pillar-quote {
    border-left: 4px solid var(--ctx-accent-border);
    padding: var(--s-5) var(--s-6);
    background: var(--ctx-bg-soft);
    margin: var(--s-6) auto;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--ctx-text-strong);
    font-style: italic;
    font-size: 18px;
    line-height: 1.65;
}
.westom-pillar-quote p { margin: 0; }
.westom-pillar-quote footer {
    margin-top: var(--s-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--ctx-accent-text);
}
.westom-pillar-quote footer cite {
    font-style: normal;
    font-weight: 700;
}

/* Expert quote — większy, z otwartym cudzysłowem ::before */
.expert-quote {
    position: relative;
    background: var(--ctx-bg-tint);
    border: 1px solid var(--ctx-card-border);
    border-left: 4px solid var(--ctx-accent-border);
    padding: var(--s-8) var(--s-6) var(--s-5);
    border-radius: var(--r-md);
    margin: var(--s-6) auto;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ctx-text-strong);
    max-width: var(--w-content);
}
.expert-quote::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: var(--s-5);
    font-size: 80px;
    color: var(--ctx-accent-text);
    line-height: 1;
    font-family: Georgia, serif;
    opacity: 0.35;
}
.expert-quote p {
    margin: 0 0 var(--s-3);
    font-style: italic;
}
.expert-quote p em {
    color: var(--ctx-text-muted);
    font-size: 15px;
}
.expert-quote footer {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--ctx-divider);
    font-size: 14px;
    color: var(--ctx-text-muted);
    font-style: normal;
}
.expert-quote footer strong { color: var(--ctx-text-strong); }
.expert-quote footer cite {
    color: var(--ctx-text-muted);
    font-style: normal;
}


/* =========================================================================
   20. CASE STUDY (pillar) — kompaktowa karta z metrykami
   ========================================================================= */
.westom-pillar-case {
    background: #fff;
    border: 1px solid var(--w-line);
    border-left: 4px solid var(--w-blue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: var(--s-6);
    margin: var(--s-6) auto;
    box-shadow: var(--sh-sm);
}
.westom-pillar-case h3 {
    margin-top: 0 !important;
    color: var(--w-ink) !important;
}
.westom-pillar-case__context {
    font-size: 14px;
    color: var(--w-ink-400);
    margin-bottom: var(--s-4);
    font-style: italic;
}
.westom-pillar-case__note {
    font-size: 14px;
    color: var(--w-ink-500);
    margin: var(--s-4) 0 0;
    padding-top: var(--s-3);
    border-top: 1px solid var(--w-line-soft);
    line-height: 1.6;
}


/* =========================================================================
   21. TABELE (pillar)
   ========================================================================= */
.westom-table-wrap {
    overflow-x: auto;
    margin: var(--s-6) auto;
    border-radius: var(--r-md);
    border: 1px solid var(--w-line);
    box-shadow: var(--sh-sm);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.westom-pillar-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
    font-size: 15px;
    background: #fff;
}
.westom-pillar-table thead tr {
    background: var(--w-bg-soft);
    border-bottom: 2px solid var(--w-blue);
}
.westom-pillar-table th {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    font-weight: 700;
    color: var(--w-ink);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--w-font-head);
}
.westom-pillar-table td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--w-line-soft);
    color: var(--w-ink-600);
    line-height: 1.55;
}
.westom-pillar-table tbody tr:last-child td { border-bottom: none; }
.westom-pillar-table tbody tr:hover { background: var(--w-bg-soft); }

.westom-positive { color: var(--w-success) !important; font-weight: 700; }
.westom-negative { color: var(--w-danger) !important; font-weight: 700; }


/* =========================================================================
   22. PILLAR CTA (light + final dark)
   ========================================================================= */
.westom-pillar-cta {
    text-align: center;
    padding: var(--s-10) var(--s-6);
    background: linear-gradient(135deg, var(--w-bg-tint) 0%, #e8f0fe 100%);
    border: 1px solid var(--w-blue-100);
    border-radius: var(--r-lg);
    margin: var(--s-8) auto;
}
.westom-pillar-cta h2 {
    color: var(--w-ink) !important;
    margin-bottom: var(--s-4) !important;
}
.westom-pillar-cta p {
    color: var(--w-ink-600);
    max-width: 620px;
    margin: 0 auto var(--s-6);
    font-size: 17px;
}
.westom-pillar-cta__buttons {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
}

.westom-pillar-cta--final {
    background: linear-gradient(135deg, var(--w-dark) 0%, var(--w-blue-800) 100%);
    border: none;
    position: relative;
    overflow: hidden;
}
.westom-pillar-cta--final::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0,100,255,0.25), transparent 70%);
    pointer-events: none;
}
.westom-pillar-cta--final > * { position: relative; z-index: 1; }
.westom-pillar-cta--final h2 { color: #fff !important; }
.westom-pillar-cta--final p  { color: var(--w-dark-text) !important; }


/* =========================================================================
   23. PILLAR DARK PANEL — ciemna wyspa wewnątrz pillar light
   (np. sekcja "Pozycjonowanie a AI Overviews" na /pozycjonowanie/)
   Jako dark context — flipuje ctx-tokens (sekcja 2).
   ========================================================================= */
.westom-pillar-dark-panel {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,100,255,0.15), transparent 70%),
        linear-gradient(135deg, var(--w-dark) 0%, var(--w-dark-soft) 100%);
    color: var(--w-dark-text);
    padding: var(--s-10) var(--s-6) !important;
    border-radius: var(--r-lg);
    margin: var(--s-8) auto;
    max-width: var(--w-content-wide);
    position: relative;
    overflow: hidden;
}
.westom-pillar-dark-panel h2,
.westom-pillar-dark-panel h3 {
    color: #ffffff !important;
}
.westom-pillar-dark-panel p {
    color: var(--w-dark-text) !important;
}
.westom-pillar-dark-panel strong {
    color: #fff !important;
}
.westom-pillar-dark-link {
    color: #93c5fd !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(147,197,253,0.4);
    text-underline-offset: 3px;
}
.westom-pillar-dark-link:hover {
    color: #fff !important;
    text-decoration-color: #fff;
}
.westom-pillar-dark-panel dfn {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.4);
}
/* expert-quote w dark panel — już context-aware przez --ctx-* */


/* =========================================================================
   24. TWO-COLUMN
   ========================================================================= */
.westom-pillar-twocol {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    margin: var(--s-6) auto;
}
.westom-pillar-twocol__item img {
    border-radius: var(--r-md);
    max-width: 100%;
    height: auto;
    margin-top: var(--s-4);
    border: 1px solid var(--w-line);
    box-shadow: var(--sh-sm);
}
.westom-pillar-twocol__item h3 { margin-top: 0 !important; }


/* =========================================================================
   25. PILLAR EXPERT (autor/CEO na końcu pillar page)
   ========================================================================= */
.westom-pillar-expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-5);
    background: linear-gradient(135deg, var(--w-bg-soft) 0%, var(--w-bg-tint) 100%);
    border: 1px solid var(--w-blue-100);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    margin: var(--s-6) auto;
}
.westom-pillar-expert__photo {
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: var(--sh-md), 0 0 0 1px var(--w-blue-100);
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}
.westom-pillar-expert__info { flex: 1; }
.westom-pillar-expert h3 {
    margin: 0 0 var(--s-1) 0 !important;
    color: var(--w-ink) !important;
    font-size: 22px !important;
}
.westom-pillar-expert__role {
    color: var(--w-blue-700);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--s-3) 0;
}
.westom-pillar-expert p {
    margin: 0;
    color: var(--w-ink-600);
    line-height: 1.65;
    text-align: left;
}


/* =========================================================================
   26. PILLAR FAQ — accordion details/summary
   ========================================================================= */
.westom-pillar-faq {
    max-width: var(--w-content);
    margin: var(--s-6) auto;
}
.westom-pillar-faq__item {
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: var(--r-md);
    padding: 0;
    margin-bottom: var(--s-3);
    transition: border-color var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease);
    overflow: hidden;
}
.westom-pillar-faq__item:hover {
    border-color: var(--w-blue-100);
}
.westom-pillar-faq__item[open] {
    border-color: var(--w-blue);
    box-shadow: var(--sh-sm);
}
.westom-pillar-faq__item summary {
    font-size: 16px;
    font-weight: 600;
    color: var(--w-ink);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: var(--s-4) var(--s-12) var(--s-4) var(--s-5);
    min-height: 28px;
    line-height: 1.45;
    transition: background var(--w-dur) var(--w-ease);
}
.westom-pillar-faq__item summary::-webkit-details-marker { display: none; }
.westom-pillar-faq__item summary::after {
    content: '';
    position: absolute;
    right: var(--s-5);
    top: 50%;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--w-blue);
    border-bottom: 2px solid var(--w-blue);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--w-dur) var(--w-ease);
}
.westom-pillar-faq__item[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}
.westom-pillar-faq__item summary:hover {
    background: var(--w-bg-tint);
}
.westom-pillar-faq__item summary:focus-visible {
    outline: 3px solid var(--w-blue-100);
    outline-offset: -3px;
}
.westom-pillar-faq__item p {
    margin: 0;
    padding: 0 var(--s-5) var(--s-5);
    color: var(--w-ink-600);
    line-height: 1.7;
    font-size: 15px;
}


/* =========================================================================
   27. PILLAR HUB — nawigacja po klastrach (3 kolumny linków)
   ========================================================================= */
.westom-pillar-hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin: var(--s-6) auto;
}
.westom-pillar-hub__group {
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: var(--r-md);
    padding: var(--s-5);
    transition: border-color var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease);
}
@media (hover: hover) {
    .westom-pillar-hub__group:hover {
        border-color: var(--w-blue-100);
        box-shadow: var(--sh-md);
    }
}
.westom-pillar-hub__group h3 {
    color: var(--w-blue-700) !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--s-3) 0 !important;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--w-line-soft);
    font-weight: 700 !important;
}
.westom-pillar-hub__group ul { list-style: none; padding: 0; margin: 0; }
.westom-pillar-hub__group li { margin-bottom: var(--s-1); }
.westom-pillar-hub__group a {
    display: flex;
    align-items: center;
    color: var(--w-ink-700);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    transition: background var(--w-dur) var(--w-ease),
                color var(--w-dur) var(--w-ease);
    min-height: 36px;
    line-height: 1.4;
}
.westom-pillar-hub__group a:hover {
    background: var(--w-bg-tint);
    color: var(--w-blue-700);
}


/* =========================================================================
   28. PARTNER BADGE — Google / Allegro / Clutch chip w light cards
   ========================================================================= */
.westom-partner-badge {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--w-line-soft);
}
.westom-partner-badge svg {
    flex-shrink: 0;
}
.westom-partner-badge .westom-light-card__title {
    margin: 0 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--w-ink) !important;
    font-weight: 700 !important;
}


/* =========================================================================
   29. VIDEO EMBED — responsive 16:9
   ========================================================================= */
.westom-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 960px;
    margin: var(--s-6) auto;
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    background: var(--w-dark);
}
.westom-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =========================================================================
   ████████████████████████████████████████████████████████████████████████
   SHARED CONTEXT-AWARE KOMPONENTY
   ────────────────────────────────────────────────────────────────────────
   Te komponenty pojawiają się w WIELU kontekstach (homepage dark / pillar
   light / blog / kurs / dark panel). Czytają WYŁĄCZNIE z --ctx-* tokens.
   ────────────────────────────────────────────────────────────────────────
   Dlaczego to ma znaczenie: w starym pliku 4 hotfix-sekcje (58, 59, 60,
   patch z linii 4145) próbowały te komponenty „przemalować" z poziomu
   wrappera. Tu nie ma overrideów — komponent jest source of truth.
   ████████████████████████████████████████████████████████████████████████
   ========================================================================= */


/* =========================================================================
   30. AUTHOR BYLINE — E-E-A-T pod H1 (homepage + pillar pages + blog)
   ========================================================================= */
.westom-author-byline {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    max-width: var(--w-content);
    margin: var(--s-6) auto var(--s-8); 
    padding: var(--s-4) var(--s-5);
    background: var(--ctx-bg-tint);
    border-left: 3px solid var(--ctx-accent-border);
    border-radius: var(--r-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ctx-text);
}
.westom-author-byline__photo {
    flex-shrink: 0;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ctx-bg);
    box-shadow: var(--ctx-card-shadow);
}
.westom-author-byline__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.westom-author-byline__meta { flex: 1; min-width: 0; }
.westom-author-byline__name {
    margin: 0 0 2px;
    color: var(--ctx-text);
    font-weight: 500;
}
.westom-author-byline__name a {
    color: var(--ctx-link);
    text-decoration: none;
    font-weight: 700;
}
.westom-author-byline__name a:hover {
    color: var(--ctx-link-hover);
    text-decoration: underline;
}
.westom-author-byline__name strong { font-weight: 700; }
.westom-author-byline__dates {
    margin: 0;
    color: var(--ctx-text-muted);
    font-size: 13px;
}
.westom-author-byline abbr {
    color: var(--ctx-text-strong);
    text-decoration-color: var(--ctx-link-underline);
}


/* =========================================================================
   31. SOURCES LIST — bibliografia w blogu / pillar
   ========================================================================= */
.westom-sources-list {
    counter-reset: source-counter;
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0;
    max-width: var(--w-content);
}
.westom-sources-list li {
    counter-increment: source-counter;
    position: relative;
    padding: var(--s-4) var(--s-4) var(--s-4) var(--s-12);
    margin-bottom: var(--s-2);
    background: var(--ctx-bg-soft);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--ctx-divider);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ctx-text);
}
.westom-sources-list li::before {
    content: "[" counter(source-counter) "]";
    position: absolute;
    left: var(--s-4);
    top: var(--s-4);
    font-weight: 700;
    color: var(--ctx-accent-text);
    font-family: var(--w-font-head);
    font-size: 13px;
}
.westom-sources-list li:target {
    background: var(--w-warn-bg);
    border-left-color: var(--w-warn);
    animation: westom-target-flash 1.5s ease;
}
@keyframes westom-target-flash {
    0%   { background: #fde68a; }
    100% { background: var(--w-warn-bg); }
}
.westom-sources-list a { color: var(--ctx-link); }


/* =========================================================================
   32. PILLAR TRUST BAR — "Westom · NIP · adres · telefon" pod stopką sekcji
   ========================================================================= */
.westom-pillar-trust {
    background: var(--ctx-bg-soft);
    border: 1px solid var(--ctx-card-border);
    border-radius: var(--r-md);
    padding: var(--s-4) var(--s-5);
    margin: var(--s-6) auto;
    max-width: var(--w-content-wide);
    text-align: center;
}
.westom-pillar-trust p {
    margin: 0;
    font-size: 14px;
    color: var(--ctx-text-muted);
    line-height: 1.7;
}
.westom-pillar-trust strong {
    color: var(--ctx-text-strong);
    font-weight: 700;
}
.westom-pillar-trust a {
    color: var(--ctx-link);
    font-weight: 600;
    text-decoration: none;
}
.westom-pillar-trust a:hover {
    color: var(--ctx-link-hover);
    text-decoration: underline;
}


/* =========================================================================
   33. DEFINITION LIST — glossary w kursach i pillar pages
   ========================================================================= */
.westom-definition-list {
    margin: var(--s-6) auto;
    max-width: var(--w-content);
    padding: var(--s-5) var(--s-6);
    background: var(--ctx-bg-soft);
    border-radius: var(--r-md);
    border-left: 3px solid var(--ctx-accent-border);
}
.westom-definition-list dt {
    font-weight: 700;
    color: var(--ctx-text-strong);
    font-size: 16px;
    margin: var(--s-4) 0 var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--ctx-divider-soft);
}
.westom-definition-list dt:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.westom-definition-list dt dfn {
    font-style: normal;
    color: var(--ctx-accent-text);
    border-bottom: none;
}
.westom-definition-list dd {
    margin: 0 0 var(--s-2);
    color: var(--ctx-text);
    line-height: 1.65;
    font-size: 15px;
    padding-left: 0;
}
.westom-definition-list dd strong { color: var(--ctx-text-strong); }
.westom-definition-list dt:target {
    background: var(--w-warn-bg);
    color: var(--w-ink);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    border-top: none;
    animation: westom-target-flash 1.5s ease;
}


/* =========================================================================
   34. KEY FACTS — aside z faktami w hero pillar (np. kurs SEO)
   Zawsze w ciemnym hero → siedzi w dark context.
   ========================================================================= */
.westom-key-facts {
    margin: var(--s-6) auto;
    max-width: 760px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    text-align: left;
    backdrop-filter: blur(4px);
}
.westom-key-facts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2) var(--s-5);
}
@media (min-width: 640px) {
    .westom-key-facts ul {
        grid-template-columns: 1fr 1fr;
    }
}
.westom-key-facts li {
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
    padding: var(--s-1) 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.westom-key-facts li:last-child,
.westom-key-facts li:nth-last-child(2) { border-bottom: none; }
@media (max-width: 639px) {
    .westom-key-facts li:last-child { border-bottom: none; }
    .westom-key-facts li:nth-last-child(2) {
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
}
.westom-key-facts li strong {
    color: #93c5fd;
    font-weight: 600;
    margin-right: var(--s-1);
}
.westom-key-facts data,
.westom-key-facts time {
    color: #fff;
    font-weight: 600;
}


/* =========================================================================
   35. INSTANT ANSWER BLOCK — wyróżniony pierwszy akapit
   ========================================================================= */
.instant-answer-block {
    background: var(--ctx-bg-tint);
    border-left: 4px solid var(--ctx-accent-border);
    padding: var(--s-5) var(--s-6);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ctx-text);
}
.instant-answer-block strong {
    color: var(--ctx-text-strong);
}


/* =========================================================================
   36. CHIPS / BADGES / FEATURE TAGS
   ========================================================================= */

/* Pill badge — duży chip na hero (np. "Od 1996 roku | Google Partner") */
.westom-pill-badge {
    display: inline-block;
    background: rgba(0,100,255,0.18);
    color: #93c5fd;
    border: 1px solid rgba(147,197,253,0.3);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(4px);
}

/* Feature tag — chip w hero (np. "Audyty SEO", "Link Building") */
.westom-feature-tag {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-sm);
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 500;
    display: inline-block;
}

/* Trust chip — homepage hero v4 (np. "Google Partner") */
.westom-trust-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(0,100,255,0.15);
    color: #93c5fd;
    border: 1px solid rgba(147,197,253,0.3);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}
.westom-trust-chip--muted {
    background: rgba(255,255,255,0.05);
    color: var(--w-dark-muted);
    border-color: rgba(255,255,255,0.12);
}

/* Update badge — "Ostatnia aktualizacja: maj 2026" */
.westom-update-badge,
.data-aktualizacji {
    display: inline-block;
    font-size: 12px;
    color: var(--ctx-text-faint);
    letter-spacing: 0.04em;
    margin-top: var(--s-3);
}
/* Pillar hero — własny styl */
.westom-pillar-hero .westom-update-badge,
.westom-pillar-hero .data-aktualizacji {
    margin-top: var(--s-6);
    color: rgba(203,213,225,0.6);
}


/* =========================================================================
   ████████████████████████████████████████████████████████████████████████
   HOMEPAGE DARK ZONE (/)
   ─────────────────────────────────────────────────────────────────────
   .westom-home-dark-zone to wrapper full-bleed z ciemnym tłem.
   Wszystkie komponenty wewnątrz dziedziczą --ctx-* w trybie dark.
   ─────────────────────────────────────────────────────────────────────
   UWAGA: w starym pliku sekcje 58+59 robiły ~600 linii !important
   override'ów na centrowanie nagłówków, kolory, layout. Tu nie ma tego,
   bo komponenty same czytają z tokenów. Jedyne wymuszenia to przeciw
   Kadence theme — w sekcji 60 (consolidated safety net).
   ████████████████████████████████████████████████████████████████████████
   ========================================================================= */


/* =========================================================================
   37. HOME DARK ZONE — wrapper
   ========================================================================= */
.westom-home-dark-zone {
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0,100,255,0.10), transparent 70%),
        linear-gradient(180deg, var(--w-dark) 0%, #07142a 100%);
    color: var(--w-dark-text);
    font-family: var(--w-font-body);
    line-height: 1.65;
    overflow-x: hidden;
    /* box-sizing też dla wszystkich dzieci — Kadence czasem zmienia content-box */
}
.westom-home-dark-zone,
.westom-home-dark-zone * {
    box-sizing: border-box;
}

/* Reset Kadence list-styles w dark zone */
.westom-home-dark-zone ul,
.westom-home-dark-zone ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* WYJĄTKI: listy które MAJĄ swój własny styling */
.westom-home-dark-zone .service-benefits,
.westom-home-dark-zone .westom-pillar-list,
.westom-home-dark-zone .westom-pillar-list--steps {
    list-style: none;
}
/* .westom-pillar-list--steps potrzebuje auto-margin (sekcja 14 ma `margin: var(--s-6) auto`) */
.westom-home-dark-zone .westom-pillar-list,
.westom-home-dark-zone .westom-pillar-list--steps {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Reset margin-top Kadence dla sekcji bezpośrednio pod #main-content
   Wyłączamy zerowanie dla .westom-section — one mają własny margin (sekcja 39). */
.westom-home-dark-zone > #main-content > section:not(.westom-section),
.westom-home-dark-zone > #main-content > section:not(.westom-section) + section:not(.westom-section) {
    margin-top: 0;
    margin-bottom: 0;
}

.westom-home-dark-zone h1,
.westom-home-dark-zone h2,
.westom-home-dark-zone h3,
.westom-home-dark-zone h4 {
    color: #ffffff;
    font-family: var(--w-font-head);
    letter-spacing: -0.01em;
}

.westom-home-dark-zone strong { color: #ffffff; }

.westom-home-dark-zone a {
    color: #93c5fd;
    text-decoration: none;
    transition: color var(--w-dur) var(--w-ease);
}
.westom-home-dark-zone a:hover { color: #fff; }

#main-content {
    max-width: 100%;
}


/* =========================================================================
   38. HERO V4 — najnowsza wersja głównego hero strony głównej
   ========================================================================= */
.westom-hero-v4 {
    position: relative;
    min-height: 92vh;
    min-height: 92svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding: 0;
}

/* Grid w tle */
.westom-hero-v4__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 100% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 30%, #000 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Niebieski glow po prawej */
.westom-hero-v4__glow {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0,100,255,0.32) 0%, rgba(0,100,255,0.10) 35%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.westom-hero-v4__inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: var(--s-16) var(--s-6) var(--s-12);
    text-align: center;
    box-sizing: border-box;
}

.westom-hero-v4__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
}

.westom-hero-v4__inner h1 {
    color: #ffffff;
    font-size: clamp(32px, 6vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 auto var(--s-8); 
    max-width: 920px;
    text-align: center;
    text-wrap: balance;
}

.westom-hero-v4__lead {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.75; 
    color: var(--w-dark-text);
    max-width: 820px;
    margin: 0 auto var(--s-10); 
    text-align: left;
    padding: var(--s-6) var(--s-6); 
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--w-blue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    backdrop-filter: blur(4px);
}
.westom-hero-v4__lead strong { color: #ffffff; }

.westom-hero-v4__cta {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--s-8);
}

/* Proof bar */
.westom-hero-v4__proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    color: var(--w-dark-muted);
    font-size: 14px;
    margin-top: var(--s-4);
}
.westom-proof-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.westom-proof-item data,
.westom-proof-item strong {
    color: #ffffff;
    font-weight: 800;
    font-family: var(--w-font-head);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
}
.westom-proof-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.18);
    display: inline-block;
}


/* =========================================================================
   39. WESTOM SECTION — kontener sekcji homepage + section-header
   ========================================================================= */
.westom-home-dark-zone .westom-section {
    max-width: 1200px;
    margin: clamp(72px, 9vw, 120px) auto;
    padding: 0 clamp(16px, 4vw, 24px);
    box-sizing: border-box;
}
.westom-home-dark-zone .westom-section--narrow {
    max-width: 920px;
}

@media (max-width: 768px) {
    .westom-home-dark-zone .westom-section {
        margin: var(--s-16) auto;
    }
}
@media (max-width: 480px) {
    .westom-home-dark-zone .westom-section {
        margin: var(--s-12) auto;
    }
}

.westom-home-dark-zone .section-header {
    text-align: center;
    margin: 0 auto var(--s-16);
    max-width: 800px;
}

@media (max-width: 768px) {
    .westom-home-dark-zone .section-header {
        margin-bottom: var(--s-10);
    }
}
@media (max-width: 480px) {
    .westom-home-dark-zone .section-header {
        margin-bottom: var(--s-8);
    }
}
.westom-home-dark-zone .section-header h2 {
    font-size: clamp(28px, 4.5vw, 42px);
    font-weight: 800;
    line-height: 1.2; 
    letter-spacing: -0.02em;
    margin: 0 auto var(--s-8); 
    color: #ffffff;
    text-wrap: balance;
}
.westom-home-dark-zone .section-header p {
    font-size: 17px;
    color: var(--w-dark-muted);
    line-height: 1.65; 
    margin: 0 auto;
    max-width: 700px;
}

.westom-section-subtitle {
    color: #ffffff;
    font-size: clamp(24px, 3.5vw, 36px);
    text-align: center;
    margin: 0 auto var(--s-6); 
    font-weight: 800;
    letter-spacing: -0.02em;
}

.westom-snippet-header {
    text-align: center;
    color: var(--w-dark-text);
    font-size: 16px;
    margin: 0 auto var(--s-8);
    letter-spacing: 0.02em;
}
.westom-snippet-header strong { color: #fff; }
.westom-divider {
    color: rgba(255,255,255,0.25);
    margin: 0 var(--s-2);
    font-weight: 300;
}

.westom-center-heading {
    text-align: center;
    color: #ffffff;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin: 0 auto var(--s-10); 
    letter-spacing: -0.02em;
    max-width: 700px;
}

/* Instant answer block w homepage dark — context tokens już to obsługują */


/* =========================================================================
   40. SNIPPET GRID + FACT CARDS ("Westom w liczbach")
   ========================================================================= */
.westom-snippet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin: 0 auto;
    max-width: 1100px;
}
@media (min-width: 640px) {
    .westom-snippet-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-5);
    }
}
@media (min-width: 1024px) {
    .westom-snippet-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

.westom-fact-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: var(--s-8); 
    text-align: left;
    transition: transform var(--w-dur) var(--w-ease),
                background var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
    backdrop-filter: blur(4px);
}
.westom-fact-card.westom-highlight {
    background: linear-gradient(135deg, rgba(0,100,255,0.10) 0%, rgba(0,100,255,0.04) 100%);
    border-color: rgba(0,100,255,0.30);
}
.westom-fact-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--s-4); 
    letter-spacing: -0.01em;
}
.westom-fact-card p {
    color: var(--w-dark-text);
    line-height: 1.65;
    margin: 0;
    font-size: 15px;
    text-align: left;
}
.westom-fact-card data {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .westom-fact-card:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,0.05);
        border-color: rgba(0,100,255,0.4);
    }
}


/* =========================================================================
   41. SERVICES DEEP GRID — 6 filarów usług na homepage
   ========================================================================= */
.services-deep-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-top: var(--s-6);
}
@media (min-width: 768px) {
    .services-deep-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-6);
    }
}
@media (min-width: 1280px) {
    .services-deep-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-deep-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: var(--s-8); 
    text-align: left;
    transition: transform var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
    display: flex;
    flex-direction: column;
}
.service-deep-card h3 {
    color: #ffffff;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    margin: 0 0 var(--s-4); 
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: left;
}
/* Service-deep-card ma własny instant-answer-block — bardziej kompaktowy */
.service-deep-card .instant-answer-block {
    background: rgba(0,100,255,0.06);
    border-left: 3px solid #60a5fa;
    color: var(--w-dark-text);
    font-size: 15px;
    line-height: 1.65;
    padding: var(--s-3) var(--s-4);
    margin: 0 0 var(--s-4);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    text-align: left;
}
.service-deep-card .instant-answer-block strong { color: #fff; }

.service-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-4);
}
.service-benefits li {
    position: relative;
    padding: var(--s-2) 0 var(--s-2) var(--s-6);
    color: var(--w-dark-text);
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.service-benefits li:last-child { border-bottom: none; }
.service-benefits li::before {
    content: "\2713";  /* ✓ */
    position: absolute;
    left: 0;
    top: var(--s-2);
    color: #22c55e;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
}
.service-benefits strong { color: #fff; }

.tech-specs {
    font-size: 13px;
    color: var(--w-dark-muted);
    padding-top: var(--s-3);
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: auto 0 var(--s-4);
}
.semantic-highlight {
    color: #93c5fd;
    font-weight: 600;
}

/* Semantic nodes (eksploruj) */
.semantic-nodes-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    padding-top: var(--s-3);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
}
.semantic-nodes-title {
    color: var(--w-dark-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-right: var(--s-1);
}
.node-cluster-link {
    display: inline-flex;
    align-items: center;
    background: rgba(0,100,255,0.08);
    color: #93c5fd !important;
    border: 1px solid rgba(0,100,255,0.2);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all var(--w-dur) var(--w-ease);
}
.node-cluster-link:hover {
    background: rgba(0,100,255,0.18);
    color: #fff !important;
    border-color: rgba(147,197,253,0.5);
}

@media (hover: hover) {
    .service-deep-card:hover {
        transform: translateY(-3px);
        border-color: rgba(0,100,255,0.3);
    }
}


/* =========================================================================
   42. STORY TIMELINE — 4 kroki "Jak pracujemy"
   ========================================================================= */
.story-timeline {
    position: relative;
    padding-left: var(--s-12);
    margin: var(--s-8) auto 0;
    max-width: 820px;
}
.story-timeline::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg,
        var(--w-blue) 0%,
        rgba(0,100,255,0.3) 100%);
}

.story-step {
    position: relative;
    margin-bottom: var(--s-8);
}
.story-step:last-child { margin-bottom: 0; }

.story-marker {
    position: absolute;
    left: calc(-1 * var(--s-12) + 4px);
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--w-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    font-family: var(--w-font-head);
    box-shadow: 0 0 0 4px var(--w-dark), 0 0 20px rgba(0,100,255,0.4);
    z-index: 1;
}
.story-marker--gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: var(--w-dark);
    box-shadow: 0 0 0 4px var(--w-dark), 0 0 20px rgba(251,191,36,0.4);
}

.story-content {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: var(--s-6); 
    text-align: left;
    transition: border-color var(--w-dur) var(--w-ease);
}
.story-content h3 {
    margin: 0 0 var(--s-3); 
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-align: left;
}
.story-heading--blue { color: #93c5fd; }
.story-heading--gold { color: #fbbf24; }
.story-content p {
    margin: 0;
    color: var(--w-dark-text);
    line-height: 1.65;
    font-size: 15px;
    text-align: left;
}
.story-text { font-size: 15px; }

@media (hover: hover) {
    .story-step:hover .story-content {
        border-color: rgba(0,100,255,0.3);
    }
}


/* =========================================================================
   43. STATS GRID + STAT BOX (homepage)
   ========================================================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    margin: var(--s-6) auto 0;
    max-width: 1100px;
}
@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--s-4);
    }
}

.stat-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: var(--s-6) var(--s-4);
    text-align: center;
    transition: transform var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
}
.stat-box data {
    display: block;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: var(--s-2);
    font-family: var(--w-font-head);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-box span {
    font-size: 12px;
    color: var(--w-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    line-height: 1.4;
    display: block;
}

@media (hover: hover) {
    .stat-box:hover {
        transform: translateY(-2px);
        border-color: rgba(0,100,255,0.3);
    }
}


/* =========================================================================
   44. CASE GRID + CASE CARD (homepage variant)
   ========================================================================= */
.westom-case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-top: var(--s-6);
}
@media (min-width: 1024px) {
    .westom-case-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-6);
    }
}

.westom-case-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid var(--w-blue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: var(--s-6);
    text-align: left;
    transition: border-color var(--w-dur) var(--w-ease);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.westom-case-title {
    color: #ffffff;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    margin: 0 0 var(--s-3); 
    line-height: 1.3;
    text-align: left;
}
.westom-case-context {
    font-size: 14px;
    color: var(--w-dark-muted);
    margin-bottom: var(--s-4);
    font-style: italic;
    line-height: 1.5;
    text-align: left;
}

.westom-case-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--s-4) 0;
    font-size: 14px;
    min-width: 380px;
}
.westom-case-table thead tr {
    border-bottom: 2px solid rgba(0,100,255,0.4);
}
.westom-case-table th {
    padding: var(--s-3) var(--s-2);
    text-align: left;
    font-weight: 700;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--w-font-head);
}
.westom-case-table td {
    padding: var(--s-3) var(--s-2);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--w-dark-text);
    line-height: 1.5;
    text-align: left;
}
.westom-case-table td:first-child {
    color: #ffffff;
    font-weight: 600;
}
/* Ostatnia kolumna ("Zmiana") — wyrównana do prawej */
.westom-case-table td:last-child,
.westom-case-table th:last-child {
    text-align: right;
}
.westom-case-table tbody tr:last-child td { border-bottom: none; }
.westom-case-table data {
    color: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.westom-metric-positive {
    color: #4ade80 !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.westom-metric-positive data { color: #4ade80 !important; }

.westom-case-note {
    font-size: 13px;
    color: var(--w-dark-muted);
    margin: var(--s-4) 0 0;
    padding-top: var(--s-3);
    border-top: 1px solid rgba(255,255,255,0.06);
    line-height: 1.6;
}

@media (hover: hover) {
    .westom-case-card:hover {
        border-color: rgba(0,100,255,0.3);
        border-left-color: #60a5fa;
    }
}


/* =========================================================================
   45. CTA SECTION (homepage)
   ========================================================================= */
.westom-cta-section {
    text-align: center;
    padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 32px);
    background:
        radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0,100,255,0.18), transparent 70%),
        linear-gradient(135deg, rgba(0,100,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(0,100,255,0.2);
    border-radius: var(--r-lg);
    margin: clamp(48px, 8vw, 96px) auto;
    max-width: 1100px;
    position: relative;
    overflow: hidden;
}

.westom-cta-section--final {
    background:
        radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0,100,255,0.30), transparent 70%),
        linear-gradient(135deg, var(--w-blue-800) 0%, var(--w-dark) 100%);
    border-color: rgba(0,100,255,0.4);
}

.westom-cta-heading {
    color: #ffffff;
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 auto var(--s-6); 
    letter-spacing: -0.02em;
    text-align: center;
    text-wrap: balance;
    max-width: 700px;
}

.westom-cta-text {
    color: var(--w-dark-text);
    max-width: 620px;
    margin: 0 auto var(--s-6);
    font-size: 16px;
    line-height: 1.65;
    text-align: center;
}
.westom-cta-text strong { color: #fff; }

.westom-cta-buttons {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}


/* =========================================================================
   46. EXPERT CONTAINER (homepage)
   ========================================================================= */
.expert-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-5);
    background:
        radial-gradient(ellipse 80% 80% at 50% 0%, rgba(0,100,255,0.10), transparent 70%),
        rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: var(--s-8) var(--s-6);
    margin: var(--s-6) auto 0;
    max-width: 900px;
}
@media (min-width: 768px) {
    .expert-container {
        flex-direction: row;
        text-align: left;
        gap: var(--s-8);
        padding: var(--s-10);
    }
    .expert-info,
    .expert-info p,
    .expert-info h3 {
        text-align: left;
    }
}

.expert-photo {
    border-radius: 50%;
    border: 4px solid rgba(0,100,255,0.4);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06),
                0 8px 24px rgba(0,0,0,0.3);
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    object-fit: cover;
}

.expert-info { flex: 1; }
.expert-name {
    color: #ffffff;
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 800;
    margin: 0 0 var(--s-3); 
    letter-spacing: -0.02em;
}
.expert-role {
    color: #93c5fd;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--s-6); 
}
.expert-info p {
    margin: 0 0 var(--s-4);
    color: var(--w-dark-text);
    line-height: 1.7;
    font-size: 15px;
}
.expert-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: #93c5fd !important;
    font-weight: 700;
    text-decoration: none !important;
    font-size: 14px;
    padding: var(--s-2) 0;
    border-bottom: 1px solid transparent;
    transition: border-color var(--w-dur) var(--w-ease),
                color var(--w-dur) var(--w-ease);
}
.expert-link:hover {
    color: #fff !important;
    border-bottom-color: #fff;
}
.expert-link span { transition: transform var(--w-dur) var(--w-ease); }
.expert-link:hover span { transform: translateX(3px); }


/* =========================================================================
   47. PR LOGOS / EVENTS / BLOG FEED / FAQ custom (homepage extras)
   ========================================================================= */

/* PR logos */
.pr-logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s-6);
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--s-4);
}
.pr-logo-img {
    max-width: 140px;
    height: auto;
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.6;
    transition: opacity var(--w-dur) var(--w-ease),
                filter var(--w-dur) var(--w-ease);
    flex-shrink: 0;
}
@media (hover: hover) {
    .pr-logo-img:hover {
        filter: grayscale(0) brightness(1);
        opacity: 1;
    }
}

/* Events grid (zdjęcia z prelekcji) */
.westom-events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .westom-events-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-4);
    }
}
@media (min-width: 1024px) {
    .westom-events-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 639px) {
    /* Ostatni odd item w 2-kolumnowym układzie — centrowany */
    .westom-events-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 60%;
        justify-self: center;
    }
}
.westom-event-img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
}
@media (hover: hover) {
    .westom-event-img:hover {
        transform: scale(1.03);
        border-color: rgba(0,100,255,0.3);
    }
}

/* ═══════════ Blog feed (homepage) ═══════════ */
.westom-blog-feed {
    margin: var(--s-6) auto 0;
    max-width: 1100px;
}

.westom-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}
@media (min-width: 640px) {
    .westom-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .westom-blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.westom-blog-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--w-dur) var(--w-ease),
                background var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
}

.westom-blog-card__link {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(0,0,0,0.2);
}

.westom-blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--w-dur-slow, 0.5s) var(--w-ease);
}

.westom-blog-card__title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding: var(--s-4) var(--s-5) var(--s-5);
    letter-spacing: -0.01em;
}

.westom-blog-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--w-dur) var(--w-ease);
}

@media (hover: hover) {
    .westom-blog-card:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,0.05);
        border-color: rgba(0,100,255,0.4);
    }
    .westom-blog-card:hover .westom-blog-card__img {
        transform: scale(1.05);
    }
    .westom-blog-card__title a:hover {
        color: var(--w-blue-400, #5fa8ff);
    }
}
/* FAQ custom (homepage — ciemne karty) */
.faq-grid-custom {
    max-width: 900px;
    margin: var(--s-6) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4); 
}
.faq-item-custom {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: 0;
    overflow: hidden;
    text-align: left;
    transition: border-color var(--w-dur) var(--w-ease),
                background var(--w-dur) var(--w-ease);
}
.faq-item-custom:hover {
    border-color: rgba(0,100,255,0.3);
}
.faq-item-custom[open] {
    background: rgba(0,100,255,0.05);
    border-color: rgba(0,100,255,0.4);
}
.faq-item-custom summary {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: var(--s-5) var(--s-12) var(--s-5) var(--s-5); 
    min-height: 28px;
    line-height: 1.5; 
    text-align: left;
    transition: background var(--w-dur) var(--w-ease);
}
.faq-item-custom summary::-webkit-details-marker { display: none; }
.faq-item-custom summary::after {
    content: '';
    position: absolute;
    right: var(--s-5);
    top: 50%;
    width: 14px;
    height: 14px;
    border-right: 2px solid #60a5fa;
    border-bottom: 2px solid #60a5fa;
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--w-dur) var(--w-ease);
}
.faq-item-custom[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}
.faq-item-custom summary:hover { background: rgba(255,255,255,0.04); }
.faq-item-custom summary:focus-visible {
    outline: 3px solid rgba(0,100,255,0.4);
    outline-offset: -3px;
}
.faq-item-custom p {
    margin: 0;
    padding: var(--s-3) var(--s-5) var(--s-5); 
    border-top: 1px solid rgba(255,255,255,0.06); 
    color: var(--w-dark-text);
    line-height: 1.75; 
    font-size: 15px;
    text-align: left;
}
.faq-item-custom strong { color: #fff; }


/* =========================================================================
   ████████████████████████████████████████████████████████████████████████
   BLOG ARTICLE (.westom-art)
   ─────────────────────────────────────────────────────────────────────
   NOWE w v3 — klasy z wpisów blogowych nie były dotąd w custom.css.
   Wpisy generowane przez WordPress + Kadence wpadały w fallback theme'a.
   Ten blok daje im pełne, spójne style (light context).
   ─────────────────────────────────────────────────────────────────────
   Klasy: .westom-art (wrapper), .answer-lead, .article-img, .info-box,
   .success-box, .warning-box, .case-study-snippet, .article-cta,
   .btn-primary-pro, .steps, .data-freshness, .hide-on-desktop, .table-wrap
   ████████████████████████████████████████████████████████████████████████
   ========================================================================= */


/* =========================================================================
   48. .westom-art WRAPPER + typografia
   ========================================================================= */
.westom-art {
    font-family: var(--w-font-body);
    color: var(--w-ink-600);
    line-height: 1.75;
    font-size: 17px;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0;
}

/* Nagłówki w artykule */
.westom-art h2 {
    font-family: var(--w-font-head);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    color: var(--w-ink);
    margin: var(--s-10) 0 var(--s-4);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.westom-art h3 {
    font-family: var(--w-font-head);
    font-size: clamp(19px, 2.5vw, 24px);
    font-weight: 700;
    color: var(--w-ink);
    margin: var(--s-8) 0 var(--s-3);
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.westom-art h4 {
    font-family: var(--w-font-head);
    font-size: clamp(17px, 2vw, 19px);
    font-weight: 700;
    color: var(--w-ink-700);
    margin: var(--s-6) 0 var(--s-2);
    line-height: 1.35;
}

.westom-art p {
    margin: 0 0 var(--s-4);
    color: var(--w-ink-600);
    line-height: 1.75;
}

.westom-art a {
    color: var(--w-blue-700);
    text-decoration: underline;
    text-decoration-color: rgba(0,80,204,0.3);
    text-underline-offset: 3px;
    transition: color var(--w-dur) var(--w-ease),
                text-decoration-color var(--w-dur) var(--w-ease);
}
.westom-art a:hover {
    color: var(--w-blue-800);
    text-decoration-color: var(--w-blue-700);
}

.westom-art strong { color: var(--w-ink); font-weight: 700; }
.westom-art em { font-style: italic; }

.westom-art img {
    max-width: 100%;
    height: auto;
}

/* Listy w artykule */
.westom-art ul,
.westom-art ol {
    margin: 0 0 var(--s-5);
    padding-left: var(--s-6);
    color: var(--w-ink-600);
    line-height: 1.75;
}
.westom-art ul li,
.westom-art ol li {
    margin-bottom: var(--s-2);
}
.westom-art ul li::marker { color: var(--w-blue); }
.westom-art ol li::marker { color: var(--w-blue); font-weight: 700; }
.westom-art ul ul,
.westom-art ol ol,
.westom-art ul ol,
.westom-art ol ul {
    margin: var(--s-2) 0 0;
}

/* blockquote ogólny w artykule (gdy nie ma .expert-quote / .westom-pillar-quote) */
.westom-art blockquote {
    border-left: 4px solid var(--w-blue);
    padding: var(--s-4) var(--s-6);
    background: var(--w-bg-soft);
    margin: var(--s-6) 0;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--w-ink-700);
    font-style: italic;
}

/* Sekcja w artykule (semantyczne <section> wewnątrz .westom-art) */
.westom-art section {
    margin-bottom: var(--s-8);
}

/* Key takeaways box (pierwsza sekcja często) */
.westom-art #key-takeaways,
.westom-art [aria-labelledby="heading-key-takeaways"] {
    background: var(--w-bg-tint);
    padding: var(--s-5) var(--s-6);
    border-left: 4px solid var(--w-blue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    margin: var(--s-6) 0;
}
.westom-art #key-takeaways h2,
.westom-art [aria-labelledby="heading-key-takeaways"] h2 {
    margin-top: 0;
    color: var(--w-blue-700);
    font-size: 20px;
}
.westom-art #key-takeaways ul,
.westom-art [aria-labelledby="heading-key-takeaways"] ul {
    margin-bottom: 0;
}


/* =========================================================================
   49. ANSWER LEAD — wyróżniony lead pod H2 (intencja AEO/GEO)
   ========================================================================= */
.answer-lead {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 500;
    color: var(--w-ink-700);
    line-height: 1.65;
    margin: 0 0 var(--s-5);
    padding: var(--s-4) var(--s-5);
    background: var(--w-bg-soft);
    border-left: 3px solid var(--w-blue);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.answer-lead strong { color: var(--w-ink); }

/* Lead jako pierwszy element artykułu (głębsza klasa instant-answer) */
.answer-lead.instant-answer-block {
    background: var(--ctx-bg-tint);
    border-left-color: var(--ctx-accent-border);
    color: var(--ctx-text);
    padding: var(--s-5) var(--s-6);
    font-size: 17px;
}


/* =========================================================================
   50. ARTICLE FIGURE / IMG
   ========================================================================= */
.westom-art figure {
    margin: var(--s-8) 0;
    text-align: center;
}
.westom-art figure img,
.article-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--w-line);
    box-shadow: var(--sh-sm);
    display: block;
    margin: 0 auto;
}
.westom-art figcaption {
    margin-top: var(--s-3);
    font-size: 14px;
    color: var(--w-ink-400);
    font-style: italic;
    line-height: 1.5;
}


/* =========================================================================
   51. INFO / SUCCESS / WARNING BOXES (blog)
   ========================================================================= */
.info-box,
.success-box,
.warning-box {
    padding: var(--s-4) var(--s-5);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    margin: var(--s-5) 0;
    font-size: 15px;
    line-height: 1.65;
}

/* Info — niebieskie (neutralne) */
.info-box {
    background: var(--w-bg-tint);
    border-left: 4px solid var(--w-blue);
    color: var(--w-ink-700);
}
.info-box strong { color: var(--w-blue-700); }

/* Success — zielone (pozytywne wskazówki) */
.success-box {
    background: var(--w-success-bg);
    border-left: 4px solid var(--w-success);
    color: #065f46;
}
.success-box strong { color: var(--w-success); }

/* Warning — żółte/pomarańczowe (uważaj) */
.warning-box {
    background: var(--w-warn-bg);
    border-left: 4px solid var(--w-warn);
    color: #78350f;
}
.warning-box strong { color: var(--w-warn); }

/* Pierwsza linia z <strong> bez paddingu na dole jak whole-box content */
.info-box p,
.success-box p,
.warning-box p {
    margin: 0 0 var(--s-2);
    color: inherit;
}
.info-box p:last-child,
.success-box p:last-child,
.warning-box p:last-child { margin-bottom: 0; }


/* =========================================================================
   52. CASE STUDY SNIPPET (boczna karta w artykule)
   ========================================================================= */
.case-study-snippet {
    background: linear-gradient(135deg, var(--w-bg-tint) 0%, #e8f0fe 100%);
    border: 1px solid var(--w-blue-100);
    border-left: 4px solid var(--w-blue);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    margin: var(--s-6) 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--w-ink-700);
}
.case-study-snippet strong {
    color: var(--w-blue-700);
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--s-2);
}
.case-study-snippet p {
    margin: 0;
    color: var(--w-ink-700);
    line-height: 1.65;
}


/* =========================================================================
   53. ARTICLE CTA — boczne wezwanie w środku artykułu
   ========================================================================= */
.article-cta {
    background: var(--w-dark);
    background:
        radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0,100,255,0.20), transparent 70%),
        linear-gradient(135deg, var(--w-dark) 0%, var(--w-blue-800) 100%);
    color: #fff;
    padding: var(--s-6) var(--s-6);
    border-radius: var(--r-lg);
    margin: var(--s-8) 0;
    text-align: center;
}
.article-cta p {
    color: #e2e8f0;
    margin: 0 0 var(--s-4);
    font-size: 16px;
    line-height: 1.6;
}
.article-cta p strong { color: #fff; }
.article-cta a { color: #fff; }


/* =========================================================================
   54. STEPS — numerowana lista z bublem ::before (alternatywa dla pillar)
   ========================================================================= */
.steps {
    counter-reset: steps;
    list-style: none;
    padding: 0;
    margin: var(--s-6) 0;
}
.steps > li {
    counter-increment: steps;
    position: relative;
    padding: var(--s-3) 0 var(--s-4) calc(var(--s-10) + var(--s-2));
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--w-line-soft);
    color: var(--w-ink-600);
    line-height: 1.7;
}
.steps > li:last-child { border-bottom: none; margin-bottom: 0; }
.steps > li::marker { content: ""; }
.steps > li::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: var(--s-3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--w-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    font-family: var(--w-font-head);
    line-height: 1;
}
.steps > li strong { color: var(--w-ink); }


/* =========================================================================
   55. UTILITIES dla blogu — data-freshness, table-wrap, hide-on-desktop
   ========================================================================= */

/* Marker świeżości danych — kropka + data weryfikacji */
.data-freshness {
    position: relative;
    color: var(--w-ink);
    font-weight: 600;
}
.data-freshness[data-verified] {
    cursor: help;
}
.data-freshness[data-verified]::after {
    content: "\1F7E2";  /* zielony okrąg */
    margin-left: 4px;
    font-size: 10px;
    vertical-align: middle;
    opacity: 0.7;
}

/* Table wrap — tabele w blogu z poziomym scrollem */
.westom-art .table-wrap,
.table-wrap {
    overflow-x: auto;
    margin: var(--s-6) 0;
    border-radius: var(--r-md);
    border: 1px solid var(--w-line);
    box-shadow: var(--sh-sm);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.westom-art .table-wrap table,
.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
    font-size: 15px;
    background: #fff;
    margin: 0;
}
.westom-art .table-wrap caption,
.table-wrap caption {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    color: var(--w-ink-500);
    font-size: 13px;
    font-style: italic;
    background: var(--w-bg-soft);
}
.westom-art .table-wrap thead tr,
.table-wrap thead tr {
    background: var(--w-bg-soft);
    border-bottom: 2px solid var(--w-blue);
}
.westom-art .table-wrap th,
.table-wrap th {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    font-weight: 700;
    color: var(--w-ink);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--w-font-head);
}
.westom-art .table-wrap td,
.table-wrap td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--w-line-soft);
    color: var(--w-ink-600);
    line-height: 1.55;
    vertical-align: top;
}
.westom-art .table-wrap tbody tr:last-child td,
.table-wrap tbody tr:last-child td { border-bottom: none; }
.westom-art .table-wrap tbody tr:hover,
.table-wrap tbody tr:hover { background: var(--w-bg-soft); }

/* TOC mobile only w blogu */
.westom-art .hide-on-desktop {
    display: block;
}
@media (min-width: 1024px) {
    .westom-art .hide-on-desktop {
        display: none;
    }
}


/* =========================================================================
   55. RANK MATH FAQ BLOCK — gdy używasz bloku FAQ Rank Math w blogu
   ========================================================================= */
.rank-math-block .rank-math-list-item {
    border: 1px solid var(--ctx-card-border);
    border-radius: var(--r-md);
    margin-bottom: var(--s-3);
    padding: var(--s-5);
    box-shadow: var(--ctx-card-shadow);
    background: var(--ctx-card-bg);
}
.rank-math-block .rank-math-question {
    font-size: 17px;
    font-weight: 700;
    color: var(--ctx-text-strong);
    margin-bottom: var(--s-3);
}
.rank-math-block .rank-math-answer {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ctx-text);
}


/* =========================================================================
   56. UTILITIES — dfn + data + speakable + update-badge
   ========================================================================= */

/* dfn — definicje terminów w treści (light context) */
.westom-pillar-light dfn,
.westom-art dfn {
    font-style: normal;
    font-weight: 600;
    color: var(--w-ink);
    border-bottom: 1px dotted var(--w-ink-300);
    cursor: default;
}

/* data — tabular nums dla liczb (semantic <data value="...">) */
.westom-pillar-light data,
.westom-art data,
.westom-home-dark-zone data {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.westom-pillar-section strong > data,
.westom-pillar-section data {
    color: inherit;
    font-weight: inherit;
}

/* speakable-section — marker semantyczny dla Google Speakable Schema.
   Nie wymaga styli wizualnych, ale dajemy hook na wypadek przyszłych zmian. */
.speakable-section { /* zero visual styles intentionally */ }

/* abbr — nieintruzywne podkreślenie */
.westom-pillar-light abbr,
.westom-art abbr,
.westom-home-dark-zone abbr {
    text-decoration: underline dotted;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    cursor: help;
}


/* =========================================================================
   57. SCREEN-READER-TEXT + HIDE UTILITIES
   ========================================================================= */

/* Klasyk WCAG — ukrywa wizualnie, ale zostaje dla screen readera */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background: var(--w-blue);
    color: #fff;
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    display: block;
    height: auto;
    left: 5px;
    top: 5px;
    padding: 15px 23px;
    width: auto;
    z-index: 100000;
}

/* Hide on desktop (mobile-only TOC w blogu) */
.hide-on-desktop {
    display: block;
}
@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none;
    }
}


/* =========================================================================
   58. ACCESSIBILITY & MOTION
   ========================================================================= */

/* Reduced motion — szanujemy preferencje użytkownika */
@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;
    }
    html { scroll-behavior: auto; }
}

/* Touch device — zero hover transforms (znikają „skoki" przy tapnięciu) */
@media (hover: none) {
    .westom-light-card:hover,
    .westom-light-stat:hover,
    .westom-pillar-hub__group:hover,
    .westom-fact-card:hover,
    .service-deep-card:hover,
    .stat-box:hover,
    .westom-case-card:hover,
    .btn-primary:hover,
    .btn-primary-pro:hover,
    .btn-westom-outline:hover,
    .btn-secondary:hover,
    .westom-footer-cta__btn:hover {
        transform: none !important;
    }
}

/* Focus visible — keyboard navigation */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--w-blue-100);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip-link — pierwszy fokus na stronie */
.skip-link:focus {
    background: var(--w-blue) !important;
    color: #fff !important;
    z-index: 100000;
}


/* =========================================================================
   59. PRINT — czytelne wydruki bez nawigacji/CTA
   ========================================================================= */
@media print {
    .westom-mobile-sticky-cta,
    .mobile-toc-custom,
    .westom-pillar-cta,
    .westom-cta-section,
    .westom-pillar-hero__bg-text,
    .footer-westom-container,
    .westom-hero-v4__grid,
    .westom-hero-v4__glow,
    nav,
    .site-header,
    .site-footer,
    #wpadminbar {
        display: none !important;
    }
    .westom-pillar-hero,
    .westom-home-dark-zone,
    .westom-pillar-dark-panel {
        background: #fff !important;
        color: #000 !important;
        padding: 20px 0 !important;
    }
    .westom-pillar-hero h1,
    .westom-home-dark-zone h1,
    .westom-home-dark-zone h2,
    .westom-pillar-dark-panel h2 {
        color: #000 !important;
    }
    .westom-pillar-light a,
    .westom-art a {
        color: #000;
        text-decoration: underline;
    }
    .westom-pillar-light a[href^="http"]::after,
    .westom-art a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    .westom-pillar-section,
    .westom-art section {
        page-break-inside: avoid;
        margin: 20px 0;
    }
    .westom-pillar-figure,
    .westom-art figure {
        page-break-inside: avoid;
    }
}


/* =========================================================================
   60. KADENCE TEXT-ALIGN SAFETY NET (skonsolidowany hotfix)
   ─────────────────────────────────────────────────────────────────────
   ZASTĘPUJE: stare sekcje 58, 58D, 59 (~600 linii !important overrideów).
   
   POWÓD ISTNIENIA: Kadence theme ma globalne reguły `text-align: left`/
   `text-align: start` z wysoką specyficznością, które łamią centrowanie
   nagłówków w naszych komponentach. To jedyne miejsce w pliku, w którym
   używamy !important — bo walka jest z kodem theme'a, nad którym
   nie mamy kontroli.
   ─────────────────────────────────────────────────────────────────────
   ZASADA: TYLKO te wybrane elementy, które realnie wymagają wymuszenia,
   nigdy whole-scoped overrides typu `.X *`.
   ========================================================================= */

/* Heading-level wymuszenia — homepage dark zone */
.westom-home-dark-zone .westom-hero-v4__inner > h1,
.westom-home-dark-zone .section-header,
.westom-home-dark-zone .section-header > h2,
.westom-home-dark-zone .section-header > h3,
.westom-home-dark-zone .section-header > p,
.westom-home-dark-zone .westom-section-subtitle,
.westom-home-dark-zone .westom-snippet-header,
.westom-home-dark-zone .westom-center-heading {
    text-align: center !important;
}

/* CTA sections — wszystko wewnątrz centrowane (nagłówki, tekst, przyciski) */
.westom-home-dark-zone .westom-cta-section,
.westom-home-dark-zone .westom-cta-heading,
.westom-home-dark-zone .westom-cta-text,
.westom-home-dark-zone .westom-cta-buttons {
    text-align: center !important;
}
.westom-home-dark-zone .westom-cta-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Hero v4 — proof bar, CTA, lead — centrowanie poziome układu flex */
.westom-home-dark-zone .westom-hero-v4__cta,
.westom-home-dark-zone .westom-hero-v4__proof,
.westom-home-dark-zone .westom-hero-v4__badges {
    justify-content: center !important;
}

/* Pillar pages — CTA i centrowanie sekcji typu --center */
.westom-pillar-light .westom-pillar-section--center > h2,
.westom-pillar-light .westom-pillar-section--center > p,
.westom-pillar-light .westom-pillar-cta > h2,
.westom-pillar-light .westom-pillar-cta > p,
.westom-pillar-light .westom-pillar-cta__buttons {
    text-align: center !important;
}
.westom-pillar-light .westom-pillar-cta__buttons {
    justify-content: center !important;
}

/* Sitewide nagłówki nazwane wprost — last line of defense.
   Te klasy zawsze muszą być centrowane niezależnie od kontekstu. */
.westom-cta-heading,
.westom-section-subtitle,
.westom-center-heading {
    text-align: center !important;
}


/* =========================================================================
   ████████████████████████████████████████████████████████████████████████
   RESPONSIVE — mobile-first, breakpoints: 640 / 1024 / 1280
   ████████████████████████████████████████████████████████████████████████
   ========================================================================= */


/* =========================================================================
   61. TABLET (>=640px) — przywracamy normalne marginesy, 2-kolumnowe gridy
   ========================================================================= */
@media (min-width: 640px) {

    /* Pillar sections — koniec mobile full-bleed */
    .westom-pillar-section {
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--s-6);
        padding-right: var(--s-6);
    }
    .westom-pillar-section--accent-bg {
        padding: var(--s-10) var(--s-8);
        border-radius: var(--r-lg);
        border-left: 1px solid var(--w-line);
        border-right: 1px solid var(--w-line);
        margin-left: auto;
        margin-right: auto;
        max-width: var(--w-content-wide);
    }

    /* Pillar gridy → 2 kolumny */
    .westom-light-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-5);
    }

    /* Stats → 4 kolumny */
    .westom-light-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--s-4);
    }

    /* Two-column → 2 kolumny */
    .westom-pillar-twocol {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-8);
    }

    /* Hub → 2 kolumny */
    .westom-pillar-hub {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Expert pillar → horizontal layout */
    .westom-pillar-expert {
        flex-direction: row;
        text-align: left;
        padding: var(--s-8);
        gap: var(--s-6);
    }
    .westom-pillar-expert__photo {
        width: 120px;
        height: 120px;
    }

    /* Author byline w tablet — większa luka */
    .westom-author-byline {
        gap: var(--s-4);
        padding: var(--s-4) var(--s-5);
    }

    /* Footer → 2 kolumny */
    .footer-westom-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-8) var(--s-10);
    }
}


/* =========================================================================
   62. DESKTOP (>=1024px) — większe paddingi, 3+ kolumny
   ========================================================================= */
@media (min-width: 1024px) {

    .westom-pillar-light,
    .westom-art {
        font-size: 18px;
    }

    .westom-pillar-section {
        margin-top: var(--s-16);
        margin-bottom: var(--s-16);
    }

    /* Hero — większe paddingi */
    .westom-pillar-hero {
        padding: var(--s-20) var(--s-8) var(--s-16);
    }

    /* Pillar grid → auto-fit min 280px */
    .westom-light-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Hub → 3 kolumny */
    .westom-pillar-hub {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer → 4 kolumny */
    .footer-westom-inner {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: var(--s-10);
    }

    /* CTA buttons — większy gap */
    .westom-pillar-cta__buttons {
        gap: var(--s-4);
    }

    /* Hero lead — większy padding */
    .westom-pillar-hero__lead {
        padding: var(--s-6) var(--s-8);
    }
}


/* =========================================================================
   63. LARGE (>=1280px) — duże ekrany
   ========================================================================= */
@media (min-width: 1280px) {
    .westom-pillar-section h2 {
        font-size: 38px;
    }
    .westom-art h2 {
        font-size: 34px;
    }
}


/* =========================================================================
   64. KADENCE WRAPPER OVERRIDES — mobile full-bleed dla pillar pages
   ─────────────────────────────────────────────────────────────────────
   Cel: na mobile wrapper Kadence (.entry-content-wrap) ma 1.5rem
   paddingu — wyłamujemy go tylko dla naszych pillar sekcji, żeby
   karty/CTA/dark panele wyglądały szeroko na małych ekranach.
   ========================================================================= */

@media (max-width: 639px) {

    /* Zmniejszamy padding wrappera Kadence */
    .single .entry-content-wrap,
    .page .entry-content-wrap {
        padding: var(--s-4) !important;
    }

    /* Pillar section — full-bleed (kompensacja paddingu 16px) */
    .westom-pillar-section {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Sekcje accent-bg — bez radiusa, pełna szerokość */
    .westom-pillar-section--accent-bg {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: var(--s-8) 16px;
    }

    /* Dark panel — full-bleed */
    .westom-pillar-dark-panel {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
        padding: var(--s-8) var(--s-5) !important;
    }

    /* CTA final — full-bleed */
    .westom-pillar-cta--final {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
        padding: var(--s-10) var(--s-5);
    }

    /* Hero pillar — tighter padding na mobile */
    .westom-pillar-hero {
        padding: var(--s-10) 16px var(--s-8);
    }
    .westom-pillar-hero h1 {
        font-size: clamp(24px, 7vw, 32px);
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .westom-pillar-hero__lead {
        padding: var(--s-4);
        font-size: 15px;
    }
    .westom-pillar-hero__lead-secondary {
        font-size: 14px;
    }
    .westom-pillar-hero .btn-primary {
        width: 100%;
        max-width: 320px;
    }

    /* Breadcrumbs — minimum padding */
    .westom-breadcrumbs {
        padding: var(--s-2) 16px;
    }

    /* TOC mobile — full-bleed */
    .mobile-toc-custom {
        margin-left: -16px;
        margin-right: -16px;
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Tabele — wciąż scroll, ale z gradient hint po prawej */
    .westom-table-wrap {
        position: relative;
    }
    .westom-table-wrap::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9));
        pointer-events: none;
        border-radius: 0 var(--r-md) var(--r-md) 0;
    }

    /* Stats compact */
    .westom-light-stats {
        gap: var(--s-2);
    }
    .westom-light-stat {
        padding: var(--s-4) var(--s-3);
    }
    .westom-light-stat data {
        font-size: clamp(24px, 7vw, 36px);
    }
    .westom-light-stat span {
        font-size: 11px;
    }

    /* CTA buttons — pełna szerokość */
    .westom-pillar-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .westom-pillar-cta__buttons .btn-primary,
    .westom-pillar-cta__buttons .btn-westom-outline,
    .westom-pillar-cta__buttons .btn-secondary {
        width: 100%;
    }

    /* ===== HOMEPAGE DARK ZONE — mobile overrides ===== */

    .westom-hero-v4 {
        min-height: auto;
    }
    .westom-hero-v4__inner {
        padding: var(--s-12) 16px var(--s-10);
    }
    .westom-hero-v4__inner h1 {
        font-size: clamp(26px, 7vw, 36px);
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .westom-hero-v4__inner h1 br {
        display: none;
    }
    .westom-hero-v4__lead {
        padding: var(--s-4);
        font-size: 14px;
        line-height: 1.6;
    }
    .westom-hero-v4__cta {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-2);
    }
    .westom-hero-v4__cta > a,
    .westom-hero-v4__cta .btn-primary,
    .westom-hero-v4__cta .btn-secondary {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .westom-hero-v4__glow {
        width: 400px;
        height: 400px;
        top: -15%;
    }
    .westom-hero-v4__proof {
        flex-direction: column;
        gap: var(--s-2);
    }
    .westom-proof-divider { display: none; }

    /* Homepage section padding na mobile (margin obsłużony w sekcji 39) */
    .westom-home-dark-zone .westom-section {
        padding: 0 16px;
    }

    /* Story timeline — krócej */
    .story-timeline {
        padding-left: var(--s-10);
    }
    .story-marker {
        left: calc(-1 * var(--s-10) + 3px);
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    .story-content {
        padding: var(--s-4);
    }
    .story-content h3 { font-size: 16px; }

    /* Stat box mobile */
    .stat-box {
        padding: var(--s-4) var(--s-2);
    }
    .stat-box data {
        font-size: clamp(24px, 7vw, 32px);
    }
    .stat-box span {
        font-size: 11px;
        letter-spacing: 0.04em;
    }

    /* Case card mobile + tabela */
    .westom-case-card {
        padding: var(--s-4);
        overflow-x: auto;
    }
    .westom-case-table {
        font-size: 13px;
    }
    .westom-case-table th,
    .westom-case-table td {
        padding: var(--s-2) var(--s-1);
        white-space: nowrap;
    }
    .westom-case-table td:first-child {
        white-space: normal;
        min-width: 110px;
    }

    /* Service deep cards */
    .service-deep-card {
        padding: var(--s-5);
    }
    .service-deep-card h3 { font-size: 18px; }

    /* Westom fact card / case card / story content — kompaktowy padding */
    .westom-fact-card,
    .westom-case-card,
    .story-content {
        padding: var(--s-4);
    }

    /* PR logos compact */
    .pr-logos-grid { gap: var(--s-3); }
    .pr-logo-img { max-width: 100px; }

    /* Trust chips compact */
    .westom-trust-chip {
        font-size: 12px;
        padding: 5px 12px;
    }

    /* CTA section mobile */
    .westom-cta-section {
        padding: var(--s-8) var(--s-5);
    }
    .westom-cta-heading {
        font-size: clamp(22px, 6vw, 28px);
    }
    .westom-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .westom-cta-buttons > a,
    .westom-cta-buttons .btn-primary,
    .westom-cta-buttons .btn-secondary,
    .westom-cta-buttons .btn-westom-outline {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* ===== BLOG (.westom-art) — mobile overrides ===== */

    .westom-art h2 {
        font-size: clamp(22px, 6vw, 28px);
    }
    .westom-art .table-wrap,
    .westom-art .table-wrap table {
        font-size: 14px;
    }
    .article-cta {
        padding: var(--s-5) var(--s-4);
    }
    .info-box,
    .success-box,
    .warning-box {
        padding: var(--s-3) var(--s-4);
        font-size: 14px;
    }

    /* Steps mobile — mniejszy bubble */
    .steps > li {
        padding-left: calc(var(--s-10) + var(--s-1));
    }
    .steps > li::before {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    /* ===== SHARED komponenty mobile ===== */

    /* Author byline mobile — mniejsze zdjęcie + pionowe odstępy */
    .westom-author-byline {
        gap: var(--s-3);
        padding: var(--s-3);
    }
    .westom-author-byline__photo {
        width: 40px;
        height: 40px;
    }

    /* Pillar trust mobile — mniejszy padding */
    .westom-pillar-trust {
        padding: var(--s-3) var(--s-4);
    }
    .westom-pillar-trust p {
        font-size: 13px;
    }

    /* Definition list mobile */
    .westom-definition-list {
        padding: var(--s-4) var(--s-5);
    }
    .westom-definition-list dt {
        font-size: 15px;
    }
    .westom-definition-list dd {
        font-size: 14px;
    }
}


/* =========================================================================
   65. MOBILE EDGE CASES — bardzo małe ekrany (<=380px)
   ========================================================================= */
@media (max-width: 380px) {

    /* Pillar sections — minimal padding */
    .westom-pillar-section,
    .westom-pillar-section--accent-bg {
        padding-left: 14px;
        padding-right: 14px;
    }
    .westom-pillar-hero {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Stats nadal 2 kolumny, mniejsza luka */
    .westom-light-stats,
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-2);
    }
    .stat-box data {
        font-size: 24px;
    }

    /* Badges — mniejsze */
    .westom-pill-badge {
        font-size: 11px;
        padding: 4px 10px;
        word-break: normal;
    }
    .westom-feature-tag {
        font-size: 12px;
        padding: 6px 10px;
    }
    .westom-trust-chip {
        font-size: 11px;
        padding: 4px 10px;
    }

    /* Hero v4 inner — najmniejszy padding */
    .westom-hero-v4__inner {
        padding: var(--s-10) 14px var(--s-8);
    }

    /* TOC mobile — kompakt */
    .mobile-toc-custom ol li a {
        padding: 8px 14px;
        font-size: 13px;
    }
}


/* =========================================================================
   END OF FILE — westom.pl custom.css v3 (refaktor 2026-05)
   ========================================================================= */
/* =========================================================================
   CASE STUDY EGZAMIN.PL — KOMPONENTY DODATKOWE (strona główna)
   ─────────────────────────────────────────────────────────────────────────
   Sekcja .westom-case-study-egzamin używa systemowego .westom-case-card
   (zdefiniowanego wyżej w pliku, linia ~2922) i NIE nadpisuje jego stylów.
   Tu są wyłącznie NOWE komponenty: headline metrics, screenshot figure,
   client quote i case reference link w karcie usługi SEO.
   Wszystko czyta z --ctx-* więc działa automatycznie w dark zone i light.
   ========================================================================= */


/* ─── HEADLINE METRICS — 3 kafle z kluczowymi liczbami ─────────────────── */
.westom-case-headline-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
    margin: var(--s-6) 0;
}

@media (min-width: 640px) {
    .westom-case-headline-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-4);
    }
}

.westom-case-metric {
    background: var(--ctx-bg-tint);
    border: 1px solid var(--ctx-card-border);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-4);
    text-align: center;
    transition: border-color var(--w-dur) var(--w-ease);
}

.westom-case-metric__value {
    display: block;
    font-family: var(--w-font-head);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: var(--ctx-accent-text);
    line-height: 1.1;
    margin-bottom: var(--s-2);
    font-variant-numeric: tabular-nums;
}

.westom-case-metric__label {
    display: block;
    font-size: 13px;
    color: var(--ctx-text);
    line-height: 1.4;
}

@media (hover: hover) {
    .westom-case-metric:hover {
        border-color: var(--ctx-card-hover-border);
    }
}


/* ─── SCREENSHOT FIGURE ────────────────────────────────────────────────── */
.westom-case-screenshot {
    margin: var(--s-6) 0;
}

.westom-case-screenshot img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--ctx-card-border);
    border-radius: var(--r-md);
}

.westom-case-screenshot figcaption {
    font-size: 13px;
    color: var(--ctx-text-muted);
    margin-top: var(--s-3);
    text-align: center;
    font-style: italic;
    line-height: 1.5;
}


/* ─── CLIENT QUOTE (cytat osoby decyzyjnej) ────────────────────────────── */
.westom-case-quote {
    border-left: 4px solid var(--ctx-accent-border);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--ctx-bg-soft);
    padding: var(--s-5) var(--s-6);
    margin: var(--s-6) 0;
    font-size: 16px;
    line-height: 1.6;
}

.westom-case-quote p {
    margin: 0 0 var(--s-3);
    color: var(--ctx-text-strong);
    font-style: italic;
}

.westom-case-quote footer {
    font-size: 14px;
    color: var(--ctx-text-muted);
    font-style: normal;
}

.westom-case-quote footer strong {
    color: var(--ctx-text-strong);
    font-weight: 600;
}

.westom-case-quote footer a {
    color: var(--ctx-link);
    text-decoration: underline;
    text-decoration-color: var(--ctx-link-underline);
    text-underline-offset: 2px;
}

.westom-case-quote footer a:hover {
    color: var(--ctx-link-hover);
}


/* ─── CASE REFERENCE — link do case study w karcie usługi SEO ──────────── */
.westom-case-reference {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--ctx-bg-tint);
    border: 1px solid var(--ctx-card-border);
    border-radius: var(--r-sm);
    font-size: 14px;
    line-height: 1.5;
}

.westom-case-reference a {
    color: var(--ctx-text);
    text-decoration: none;
    display: block;
}

.westom-case-reference a strong {
    color: var(--ctx-text-strong);
}

.westom-case-reference a:hover {
    color: var(--ctx-link-hover);
}


/* ─── DESKTOP DOPRECYZOWANIA ───────────────────────────────────────────── */
@media (min-width: 1024px) {
    .westom-case-metric__value {
        font-size: clamp(32px, 3vw, 40px);
    }

    .westom-case-quote {
        font-size: 17px;
        padding: var(--s-6) var(--s-8);
    }
}
/* ═══════════ FIX: Centrowanie finalnej sekcji CTA ═══════════ */
.westom-cta-section--final {
    text-align: center;
}

.westom-cta-section--final .westom-cta-heading,
.westom-cta-section--final .westom-cta-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.westom-cta-section--final .westom-cta-text {
    max-width: 65ch;
}

.westom-cta-section--final .westom-cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-3, 1rem);
}
/* =========================================================================
   WESTOM — TikTok Shop landing: UX pack (sticky mobile CTA + audyt form)
   Dopisz NA KOŃCU custom.css. Nowy namespace (westom-audit / westom-sticky)
   — nie koliduje z istniejącymi klasami westom-*. Reużywa btn-primary.
   Tokeny: zmienne Kadence (--global-palette*) z bezpiecznymi fallbackami.
   ========================================================================= */

/* --- Sekcja audytu (formularz + kroki) --- */
.westom-audit__lead{
    max-width:680px;
    font-size:1.05rem;
}
.westom-audit__grid{
    display:grid;
    grid-template-columns:1.3fr 0.9fr;
    gap:2rem;
    align-items:start;
    margin-top:1.5rem;
}
@media (max-width:860px){
    .westom-audit__grid{ grid-template-columns:1fr; gap:1.5rem; }
}

/* --- Formularz (styluje też output CF7/WPForms/Kadence wewnątrz wrappera) --- */
.westom-audit-form{
    background:var(--global-palette9,#ffffff);
    border:1px solid var(--global-palette7,#e7edfc);
    border-radius:16px;
    padding:1.75rem;
    box-shadow:0 15px 40px -20px rgba(27,0,79,.25);
}
.westom-audit-form__row,
.westom-audit-form .wpcf7-form-control-wrap,
.westom-audit-form p{ margin:0 0 1rem; }
.westom-audit-form label{
    display:block;
    font-weight:600;
    font-size:.92rem;
    margin-bottom:.4rem;
    color:var(--global-palette3,#1b004f);
    font-family:var(--global-heading-font-family,Inter,sans-serif);
}
.westom-audit-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.westom-audit-form select,
.westom-audit-form textarea{
    width:100%;
    box-sizing:border-box;
    padding:.85rem 1rem;
    font-size:1rem;
    font-family:var(--global-body-font-family,Jost,sans-serif);
    color:var(--global-palette4,#393841);
    background:var(--global-palette8,#f4f9ff);
    border:1px solid var(--global-palette7,#e7edfc);
    border-radius:10px;
    transition:border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance:none;
    appearance:none;
}
.westom-audit-form select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231b004f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 1rem center;
    padding-right:2.75rem;
    cursor:pointer;
}
.westom-audit-form input:focus,
.westom-audit-form select:focus,
.westom-audit-form textarea:focus{
    outline:none;
    border-color:var(--global-palette1,#0064ff);
    box-shadow:0 0 0 3px rgba(0,100,255,.18);
}
.westom-audit-form input:required:invalid:not(:placeholder-shown){
    border-color:var(--global-palette13,#b82105);
}

/* Zgoda RODO */
.westom-audit-form__consent{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    margin:0 0 1.25rem;
    font-size:.85rem;
    line-height:1.45;
    color:var(--global-palette5,#4A5568);
}
.westom-audit-form__consent input[type="checkbox"]{
    width:1.15rem; height:1.15rem;
    margin-top:.15rem;
    flex:0 0 auto;
    accent-color:var(--global-palette1,#0064ff);
}
.westom-audit-form__consent a{ text-decoration:underline; }

/* Submit — domyślnie reużywa btn-primary; tu tylko full-width + fallback,
   gdy wtyczka wyrenderuje goły input[type=submit]/button bez klasy */
.westom-audit-form__submit{ width:100%; }
.westom-audit-form input[type="submit"],
.westom-audit-form button[type="submit"],
.westom-audit-form .wpcf7-submit{
    width:100%;
    cursor:pointer;
    border:none;
    color:var(--global-palette-btn,#ffffff);
    background:var(--global-palette-btn-bg,var(--global-palette1,#0064ff));
    font-family:var(--global-body-font-family,Jost,sans-serif);
    font-weight:500;
    font-size:1.05rem;
    padding:1.05rem 1.5rem;
    border-radius:50px;
    transition:box-shadow .2s ease, background .2s ease;
}
.westom-audit-form input[type="submit"]:hover,
.westom-audit-form button[type="submit"]:hover,
.westom-audit-form .wpcf7-submit:hover{
    background:var(--global-palette-btn-bg-hover,var(--global-palette2,#00a7ff));
    box-shadow:0 15px 25px -7px rgba(0,0,0,.15);
}
.westom-audit-form__micro{
    margin:.85rem 0 0;
    font-size:.8rem;
    text-align:center;
    color:var(--global-palette6,#718096);
}
.westom-audit__phone{
    margin:1rem 0 0;
    font-size:.95rem;
    color:var(--global-palette5,#4A5568);
}

/* Panel „Co dalej" */
.westom-audit__steps{
    background:var(--global-palette8,#f4f9ff);
    border:1px solid var(--global-palette7,#e7edfc);
    border-radius:16px;
    padding:1.5rem 1.5rem 1.75rem;
}
.westom-audit__steps h3{
    margin:0 0 1rem;
    font-size:1.1rem;
}
.westom-audit-steps{
    list-style:none;
    counter-reset:wa;
    margin:0; padding:0;
}
.westom-audit-steps li{
    position:relative;
    counter-increment:wa;
    padding:0 0 1rem 2.6rem;
    font-size:.95rem;
    line-height:1.45;
}
.westom-audit-steps li:last-child{ padding-bottom:0; }
.westom-audit-steps li::before{
    content:counter(wa);
    position:absolute; left:0; top:-.1rem;
    width:1.8rem; height:1.8rem;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.9rem;
    color:#fff;
    background:var(--global-palette1,#0064ff);
    border-radius:50%;
    font-family:var(--global-heading-font-family,Inter,sans-serif);
}
.westom-audit__reassure{
    margin:1.25rem 0 0;
    padding-top:1rem;
    border-top:1px solid var(--global-palette7,#e7edfc);
    font-size:.85rem;
    color:var(--global-palette5,#4A5568);
}

/* --- Sticky mobilny pasek CTA (tylko mobile) --- */
.westom-sticky-cta{ display:none; }
@media (max-width:768px){
    .westom-sticky-cta{
        display:flex;
        gap:.6rem;
        position:fixed;
        left:0; right:0; bottom:0;
        z-index:9990;
        padding:.6rem .8rem;
        background:rgba(255,255,255,.96);
        backdrop-filter:saturate(140%) blur(6px);
        -webkit-backdrop-filter:saturate(140%) blur(6px);
        box-shadow:0 -6px 24px -8px rgba(27,0,79,.28);
        border-top:1px solid var(--global-palette7,#e7edfc);
    }
    .westom-sticky-cta a{
        flex:1 1 50%;
        text-align:center;
        text-decoration:none;
        font-family:var(--global-body-font-family,Jost,sans-serif);
        font-weight:600;
        font-size:.98rem;
        line-height:1;
        padding:.95rem .5rem;
        border-radius:50px;
        min-height:48px;
        display:flex; align-items:center; justify-content:center;
    }
    .westom-sticky-cta__call{
        color:var(--global-palette1,#0064ff);
        background:var(--global-palette7,#e7edfc);
    }
    .westom-sticky-cta__audit{
        color:#fff;
        background:var(--global-palette1,#0064ff);
    }
    /* miejsce, żeby pasek nie zasłaniał stopki treści (tylko ta podstrona) */
    .westom-pillar-light{ padding-bottom:76px; }
}
/* =========================================================================
   WESTOM — TikTok Shop landing: UX pack (sticky mobile CTA + audyt form)
   Dopisz NA KOŃCU custom.css. Nowy namespace (westom-audit / westom-sticky)
   — nie koliduje z istniejącymi klasami westom-*. Reużywa btn-primary.
   Tokeny: zmienne Kadence (--global-palette*) z bezpiecznymi fallbackami.
   ========================================================================= */

/* --- Sekcja audytu (formularz + kroki) --- */
.westom-audit__lead{
    max-width:680px;
    font-size:1.05rem;
}
.westom-audit__grid{
    display:grid;
    grid-template-columns:1.3fr 0.9fr;
    gap:2rem;
    align-items:start;
    margin-top:1.5rem;
}
@media (max-width:860px){
    .westom-audit__grid{ grid-template-columns:1fr; gap:1.5rem; }
}

/* --- Formularz (styluje też output CF7/WPForms/Kadence wewnątrz wrappera) --- */
.westom-audit-form{
    background:var(--global-palette9,#ffffff);
    border:1px solid var(--global-palette7,#e7edfc);
    border-radius:16px;
    padding:1.75rem;
    box-shadow:0 15px 40px -20px rgba(27,0,79,.25);
}
.westom-audit-form__row,
.westom-audit-form .wpcf7-form-control-wrap,
.westom-audit-form p{ margin:0 0 1rem; }
.westom-audit-form label{
    display:block;
    font-weight:600;
    font-size:.92rem;
    margin-bottom:.4rem;
    color:var(--global-palette3,#1b004f);
    font-family:var(--global-heading-font-family,Inter,sans-serif);
}
.westom-audit-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.westom-audit-form select,
.westom-audit-form textarea{
    width:100%;
    box-sizing:border-box;
    padding:.85rem 1rem;
    font-size:1rem;
    font-family:var(--global-body-font-family,Jost,sans-serif);
    color:var(--global-palette4,#393841);
    background:var(--global-palette8,#f4f9ff);
    border:1px solid var(--global-palette7,#e7edfc);
    border-radius:10px;
    transition:border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance:none;
    appearance:none;
}
.westom-audit-form select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231b004f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 1rem center;
    padding-right:2.75rem;
    cursor:pointer;
}
.westom-audit-form input:focus,
.westom-audit-form select:focus,
.westom-audit-form textarea:focus{
    outline:none;
    border-color:var(--global-palette1,#0064ff);
    box-shadow:0 0 0 3px rgba(0,100,255,.18);
}
.westom-audit-form input:required:invalid:not(:placeholder-shown){
    border-color:var(--global-palette13,#b82105);
}

/* Zgoda RODO */
.westom-audit-form__consent{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    margin:0 0 1.25rem;
    font-size:.85rem;
    line-height:1.45;
    color:var(--global-palette5,#4A5568);
}
.westom-audit-form__consent input[type="checkbox"]{
    width:1.15rem; height:1.15rem;
    margin-top:.15rem;
    flex:0 0 auto;
    accent-color:var(--global-palette1,#0064ff);
}
.westom-audit-form__consent a{ text-decoration:underline; }

/* Submit — domyślnie reużywa btn-primary; tu tylko full-width + fallback,
   gdy wtyczka wyrenderuje goły input[type=submit]/button bez klasy */
.westom-audit-form__submit{ width:100%; }
.westom-audit-form input[type="submit"],
.westom-audit-form button[type="submit"],
.westom-audit-form .wpcf7-submit{
    width:100%;
    cursor:pointer;
    border:none;
    color:var(--global-palette-btn,#ffffff);
    background:var(--global-palette-btn-bg,var(--global-palette1,#0064ff));
    font-family:var(--global-body-font-family,Jost,sans-serif);
    font-weight:500;
    font-size:1.05rem;
    padding:1.05rem 1.5rem;
    border-radius:50px;
    transition:box-shadow .2s ease, background .2s ease;
}
.westom-audit-form input[type="submit"]:hover,
.westom-audit-form button[type="submit"]:hover,
.westom-audit-form .wpcf7-submit:hover{
    background:var(--global-palette-btn-bg-hover,var(--global-palette2,#00a7ff));
    box-shadow:0 15px 25px -7px rgba(0,0,0,.15);
}
.westom-audit-form__micro{
    margin:.85rem 0 0;
    font-size:.8rem;
    text-align:center;
    color:var(--global-palette6,#718096);
}
.westom-audit__phone{
    margin:1rem 0 0;
    font-size:.95rem;
    color:var(--global-palette5,#4A5568);
}

/* Panel „Co dalej" */
.westom-audit__steps{
    background:var(--global-palette8,#f4f9ff);
    border:1px solid var(--global-palette7,#e7edfc);
    border-radius:16px;
    padding:1.5rem 1.5rem 1.75rem;
}
.westom-audit__steps h3{
    margin:0 0 1rem;
    font-size:1.1rem;
}
.westom-audit-steps{
    list-style:none;
    counter-reset:wa;
    margin:0; padding:0;
}
.westom-audit-steps li{
    position:relative;
    counter-increment:wa;
    padding:0 0 1rem 2.6rem;
    font-size:.95rem;
    line-height:1.45;
}
.westom-audit-steps li:last-child{ padding-bottom:0; }
.westom-audit-steps li::before{
    content:counter(wa);
    position:absolute; left:0; top:-.1rem;
    width:1.8rem; height:1.8rem;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.9rem;
    color:#fff;
    background:var(--global-palette1,#0064ff);
    border-radius:50%;
    font-family:var(--global-heading-font-family,Inter,sans-serif);
}
.westom-audit__reassure{
    margin:1.25rem 0 0;
    padding-top:1rem;
    border-top:1px solid var(--global-palette7,#e7edfc);
    font-size:.85rem;
    color:var(--global-palette5,#4A5568);
}

/* --- Sticky mobilny pasek CTA (tylko mobile) --- */
.westom-sticky-cta{ display:none; }
@media (max-width:768px){
    .westom-sticky-cta{
        display:flex;
        gap:.6rem;
        position:fixed;
        left:0; right:0; bottom:0;
        z-index:9990;
        padding:.6rem .8rem;
        background:rgba(255,255,255,.96);
        backdrop-filter:saturate(140%) blur(6px);
        -webkit-backdrop-filter:saturate(140%) blur(6px);
        box-shadow:0 -6px 24px -8px rgba(27,0,79,.28);
        border-top:1px solid var(--global-palette7,#e7edfc);
    }
    .westom-sticky-cta a{
        flex:1 1 50%;
        text-align:center;
        text-decoration:none;
        font-family:var(--global-body-font-family,Jost,sans-serif);
        font-weight:600;
        font-size:.98rem;
        line-height:1;
        padding:.95rem .5rem;
        border-radius:50px;
        min-height:48px;
        display:flex; align-items:center; justify-content:center;
    }
    .westom-sticky-cta__call{
        color:var(--global-palette1,#0064ff);
        background:var(--global-palette7,#e7edfc);
    }
    .westom-sticky-cta__audit{
        color:#fff;
        background:var(--global-palette1,#0064ff);
    }
    /* miejsce, żeby pasek nie zasłaniał stopki treści (tylko ta podstrona) */
    .westom-pillar-light{ padding-bottom:76px; }
}

/* --- Trust-bar / statystyki (westom-stats-grid) — brak w custom.css, więc tu --- */
.westom-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    margin:1.5rem 0 0;
}
@media (max-width:860px){ .westom-stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .westom-stats-grid{ grid-template-columns:1fr; } }
.westom-stat-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:.4rem;
    padding:1.6rem 1rem;
    background:var(--global-palette9,#ffffff);
    border:1px solid var(--global-palette7,#e7edfc);
    border-radius:14px;
    box-shadow:0 12px 32px -24px rgba(27,0,79,.4);
}
.westom-stat-card__number{
    font-family:var(--global-heading-font-family,Inter,sans-serif);
    font-weight:700;
    font-size:2.4rem;
    line-height:1;
    color:var(--global-palette1,#0064ff);
}
.westom-stat-card__label{
    font-size:.9rem;
    line-height:1.35;
    color:var(--global-palette5,#4A5568);
}
.westom-stat-card__label a{ color:var(--global-palette1,#0064ff); text-decoration:underline; }

/* --- Wizual w hero (kandydat na LCP; ciemny hero) --- */
.westom-hero-visual{
    margin:1.75rem auto 0;   /* auto = wyśrodkowanie w hero */
    max-width:560px;
}
.westom-hero-visual img{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}

/* --- Ładniejsze łamanie tytułów (równe wiersze, bez „sierot") --- */
.westom-pillar-hero h1,
.westom-pillar-light h2,
.westom-pillar-light h3{
    text-wrap:balance;
}

/* =========================================================================
   SEO QUALITY NOTES — źródła, metodologia i transparentność (2026-07-14)
   ========================================================================= */
.westom-source-note {
    max-width: var(--w-content);
    margin: var(--s-5) auto;
    padding: var(--s-4) var(--s-5);
    background: #f3f7ff;
    border: 1px solid #cfe0ff;
    border-left: 4px solid var(--w-blue, #0064ff);
    border-radius: 0 var(--r-md, 12px) var(--r-md, 12px) 0;
    color: var(--w-ink-600, #334155);
}
.westom-source-note p {
    margin: 0;
    color: var(--w-ink-600, #334155) !important;
    line-height: 1.65;
}
.westom-source-note strong {
    color: var(--w-ink-900, #172033) !important;
}
.westom-source-note a {
    color: var(--w-blue, #0064ff);
    font-weight: 600;
}
.westom-source-note--dark {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(147,197,253,.28) !important;
    border-left-color: #60a5fa !important;
    color: #dbeafe !important;
}
.westom-source-note--dark p { color: #dbeafe !important; }
.westom-source-note--dark strong { color: #fff !important; }
.westom-source-note--dark a { color: #93c5fd !important; }
.westom-editorial-meta {
    max-width: var(--w-content);
    margin: var(--s-4) auto;
    color: var(--w-ink-600, #475569);
    font-size: .92rem;
    line-height: 1.6;
}
.westom-editorial-meta--center { text-align: center; }
.westom-case-kicker {
    margin: 0 0 var(--s-2) !important;
    color: var(--w-blue, #0064ff) !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Kontekstowe klastry treści na stronach filarowych */
.westom-topic-cluster {
  margin: clamp(44px, 7vw, 88px) auto 0;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(15, 40, 70, 0.12);
  border-radius: 24px;
  background: linear-gradient(145deg, #f7fbff 0%, #ffffff 72%);
  box-shadow: 0 18px 50px rgba(15, 40, 70, 0.07);
}

.westom-topic-cluster__head {
  max-width: 760px;
  margin-bottom: 26px;
}

.westom-topic-cluster__head h2 {
  margin: 8px 0 12px;
}

.westom-topic-cluster ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.westom-topic-cluster li {
  padding: 19px 20px;
  border: 1px solid rgba(15, 40, 70, 0.1);
  border-radius: 16px;
  background: #fff;
}

.westom-topic-cluster li a {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 750;
  line-height: 1.25;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.westom-topic-cluster li span {
  display: block;
  color: #4d5e70;
  font-size: 0.94rem;
  line-height: 1.55;
}

.westom-pillar-link {
  margin: 36px 0 0;
  padding: 18px 20px;
  border-left: 4px solid #1769aa;
  border-radius: 0 12px 12px 0;
  background: #f5f9fd;
  color: #25384a;
}

@media (max-width: 720px) {
  .westom-topic-cluster ul {
    grid-template-columns: 1fr;
  }

  .westom-topic-cluster {
    border-radius: 18px;
  }
}

/* Style semantycznych elementów artykułu AI — przeniesione z treści strony */
.westom-breadcrumb {
  max-width: 1290px;
  margin: 0 auto;
  padding: 16px 20px 0;
  color: var(--westom-text-muted, #4a5568);
  font-size: 14px;
}

.westom-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.westom-breadcrumb li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.westom-breadcrumb li:not(:last-child)::after {
  margin: 0 0.6rem;
  color: var(--westom-text-hint, #64748b);
  content: "›";
  font-weight: 400;
  opacity: 0.6;
}

.westom-breadcrumb a {
  color: var(--westom-text-muted, #4a5568);
  text-decoration: none;
  transition: color 0.15s ease;
}

.westom-breadcrumb a:hover {
  color: var(--westom-blue-deep, #0056b3);
  text-decoration: underline;
}

.westom-breadcrumb li[aria-current="page"] {
  color: var(--westom-text-dark, #1a202c);
  font-weight: 500;
}

.westom-pillar-byline {
  max-width: 800px;
  margin: -10px auto 25px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9em;
  line-height: 1.7;
}

.westom-pillar-byline a {
  color: #4dabf7 !important;
  text-decoration: none;
}

.westom-pillar-byline a:hover { text-decoration: underline; }
.westom-pillar-byline strong,
.westom-pillar-byline time { color: #fff; }

.westom-pillar-byline span[aria-hidden="true"] {
  margin: 0 0.4em;
  color: rgba(255, 255, 255, 0.4);
}

.westom-confusion-dl {
  display: grid;
  gap: 24px;
  margin: 30px 0;
}

.westom-confusion-dl dt {
  margin-bottom: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--westom-blue-deep, #0056b3);
  color: var(--westom-text-dark, #1a202c);
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.4;
}

.westom-confusion-dl dd {
  margin: 0 0 0 17px;
  color: var(--westom-text-body, #374151);
  line-height: 1.7;
}

.westom-confusion-dl dt strong { color: var(--westom-blue-deep, #0056b3); }

.westom-pillar-quote--figure {
  margin: 35px 0;
  padding: 0;
}

.westom-pillar-quote--figure blockquote {
  margin: 0 0 14px;
  padding: 25px 30px;
  border-left: 4px solid var(--westom-blue-deep, #0056b3);
  border-radius: 0 8px 8px 0;
  background: var(--westom-bg-light, #f8fafc);
  color: var(--westom-text-dark, #1a202c);
  font-size: 1.08em;
  font-style: italic;
  line-height: 1.6;
}

.westom-pillar-quote--figure blockquote p { margin: 0; }

.westom-pillar-quote--figure figcaption {
  padding: 0 30px;
  color: var(--westom-text-muted, #4a5568);
  font-size: 0.95em;
  line-height: 1.6;
}

.westom-pillar-quote--figure figcaption p {
  margin: 0 0 6px;
  color: var(--westom-text-body, #374151);
}

.westom-pillar-dark-panel .westom-pillar-quote--figure blockquote {
  border-left-color: #4dabf7;
  background: rgba(255, 255, 255, 0.05);
  color: #f0f4f8;
}

.westom-pillar-dark-panel .westom-pillar-quote--figure figcaption,
.westom-pillar-dark-panel .westom-pillar-quote--figure figcaption p { color: #cbd5e1; }
.westom-pillar-dark-panel .westom-pillar-quote--figure figcaption strong { color: #fff; }

abbr[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.westom-pillar-hero abbr[title] { text-decoration-color: rgba(255, 255, 255, 0.4); }
.westom-pillar-dark-panel abbr[title] { text-decoration-color: rgba(255, 255, 255, 0.3); }

@media (max-width: 768px) {
  .westom-pillar-byline {
    margin: 0 auto 20px;
    padding: 0 10px;
    font-size: 0.85em;
  }

  .westom-pillar-byline span[aria-hidden="true"] {
    display: inline-block;
    margin: 0 0.3em;
  }

  .westom-confusion-dl dt { font-size: 1.05em; }
  .westom-pillar-quote--figure blockquote { padding: 20px; }
  .westom-pillar-quote--figure figcaption { padding: 0 20px; }
}
.westom-sources-section .westom-sources-list {
    max-width: var(--w-content);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 600px) {
    .westom-source-note { padding: var(--s-4); }
}
.grecaptcha-badge {
    visibility: hidden !important;
}