@font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-display: optional;
            src: url('/fonts/Inter-Regular.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-display: optional;
            src: url('/fonts/Inter-Bold.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            font-display: optional;
            src: url('/fonts/Inter-Semi-Bold.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 900;
            font-display: optional;
            src: url('/fonts/Inter-Black.woff2') format('woff2');
        }
        /* FAQ Arrow Animation */
        details .faq-content { overflow: hidden; }
        details summary svg { transition: transform 0.3s ease; }
        details[open] summary svg { transform: rotate(180deg); }

        /* Critical Hero CSS - natychmiastowe renderowanie LCP */
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .text-slate-600 { color: rgb(71 85 105); }
        .text-slate-900 { color: rgb(15 23 42); }
        .max-w-3xl { max-width: 48rem; }
        .max-w-4xl { max-width: 56rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .text-center { text-align: center; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .leading-relaxed { line-height: 1.625; }
        .leading-tight { line-height: 1.25; }
        .font-black { font-weight: 900; }
        .font-bold { font-weight: 700; }
        .tracking-tight { letter-spacing: -0.025em; }
        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .relative { position: relative; }

/* ===========================================
   Extra Tailwind utility classes
   Missing from compiled style.css
   =========================================== */

/* ---- Spacing ---- */
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.pb-4 { padding-bottom: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

/* ---- Sizing ---- */
.h-48 { height: 12rem; }
.h-full { height: 100%; }
.w-px { width: 1px; }
.shrink-0 { flex-shrink: 0; }

/* ---- Space between ---- */
.space-y-0 > :not(:last-child) { margin-bottom: 0; }

/* ---- Typography ---- */
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }

/* ---- Borders ---- */
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.border-collapse { border-collapse: collapse; }
.rounded-r-xl { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.rounded-r-2xl { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }

/* ---- Transitions ---- */
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* ---- Background colors ---- */
.bg-slate-700 { background-color: #334155; }
.bg-slate-700\/50 { background-color: rgba(51, 65, 85, 0.5); }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-cyan-600 { background-color: #0891b2; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2); }
.bg-green-900\/30 { background-color: rgba(20, 83, 45, 0.3); }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-primary-500 { background-color: #3b82f6; }
.bg-red-900\/30 { background-color: rgba(127, 29, 29, 0.3); }
.bg-yellow-500 { background-color: #eab308; }

/* ---- Border colors ---- */
.border-amber-200 { border-color: #fde68a; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.3); }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3); }
.border-primary-200 { border-color: #bfdbfe; }
.border-primary-400 { border-color: #60a5fa; }
.border-red-300 { border-color: #fca5a5; }
.border-slate-600 { border-color: #475569; }

/* ---- Text colors ---- */
.text-amber-200 { color: #fde68a; }
.text-amber-400 { color: #fbbf24; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-emerald-400 { color: #34d399; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-orange-400 { color: #fb923c; }
.text-primary-50 { color: #eff6ff; }
.text-primary-800 { color: #1e40af; }
.text-primary-900 { color: #1e3a8a; }

/* ---- Hover: background ---- */
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-primary-500:hover { background-color: #3b82f6; }

/* ---- Hover: text ---- */
.hover\:text-amber-400:hover { color: #fbbf24; }
.hover\:text-blue-100:hover { color: #dbeafe; }
.hover\:text-blue-700:hover { color: #1d4ed8; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:underline:hover { text-decoration-line: underline; }

/* ---- Hover: border ---- */
.hover\:border-red-300:hover { border-color: #fca5a5; }

/* ---- Group hover ---- */
.group:hover .group-hover\:text-blue-700 { color: #1d4ed8; }

/* ---- Gradient from ---- */
.from-amber-50 { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 251, 235, 0)); }
.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0)); }
.from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
.from-cyan-500 { --tw-gradient-from: #06b6d4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0)); }
.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)); }
.from-green-500 { --tw-gradient-from: #22c55e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0)); }
.from-indigo-500 { --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0)); }
.from-orange-500 { --tw-gradient-from: #f97316; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0)); }
.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0)); }
.from-red-500 { --tw-gradient-from: #ef4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
.from-red-700 { --tw-gradient-from: #b91c1c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0)); }
.from-sky-600 { --tw-gradient-from: #0284c7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 132, 199, 0)); }

/* ---- Gradient to ---- */
.to-amber-500 { --tw-gradient-to: #f59e0b; }
.to-blue-400 { --tw-gradient-to: #60a5fa; }
.to-blue-500 { --tw-gradient-to: #3b82f6; }
.to-cyan-500 { --tw-gradient-to: #06b6d4; }
.to-emerald-400 { --tw-gradient-to: #34d399; }
.to-emerald-500 { --tw-gradient-to: #10b981; }
.to-orange-500 { --tw-gradient-to: #f97316; }
.to-pink-500 { --tw-gradient-to: #ec4899; }
.to-red-400 { --tw-gradient-to: #f87171; }
.to-red-500 { --tw-gradient-to: #ef4444; }
.to-teal-500 { --tw-gradient-to: #14b8a6; }
.to-violet-500 { --tw-gradient-to: #8b5cf6; }
.to-yellow-50 { --tw-gradient-to: #fefce8; }
.to-yellow-500 { --tw-gradient-to: #eab308; }

/* ---- Responsive: md ---- */
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:items-center { align-items: center; }
}

/* ---- Responsive: lg ---- */
@media (min-width: 1024px) {
  .lg\:gap-8 { gap: 2rem; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Prose typography ---- */
.prose-lg { font-size: 1.125rem; line-height: 1.7778; }
.prose-slate { --tw-prose-body: #334155; --tw-prose-headings: #0f172a; }
.lead { font-size: 1.25rem; line-height: 1.6; color: #475569; }

/* ---- Extra missing colors ---- */
.bg-amber-900\/30 { background-color: rgba(120, 53, 15, 0.3); }

/* ---- TikTok gradient colors (arbitrary values) ---- */
.from-\[\#ff0050\] { --tw-gradient-from: #ff0050; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 0, 80, 0)); }
.to-\[\#00f2ea\] { --tw-gradient-to: #00f2ea; }

/* FAQ accordion - see main style block below */

/* ---- Accessibility ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Cookie Consent Banner ---- */
.cookie-banner { display:none; position:fixed; bottom:0; left:0; right:0; z-index:99999; background:#1e293b; color:#e2e8f0; padding:16px 20px; box-shadow:0 -4px 20px rgba(0,0,0,0.3); font-size:14px; }
.cookie-inner { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.cookie-text { margin:0; flex:1; min-width:200px; line-height:1.5; }
.cookie-link { color:#60a5fa; text-decoration:underline; }
.cookie-actions { display:flex; gap:8px; flex-shrink:0; }
.cookie-choice { background:#fff; color:#1e293b; border:1px solid #cbd5e1; padding:10px 20px; border-radius:8px; font-weight:600; cursor:pointer; font-size:14px; }

body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

        /* Skip Link dla WCAG */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #1d4ed8;
            color: white;
            padding: 8px 16px;
            z-index: 100;
            transition: top 0.3s;
        }
        .skip-link:focus {
            top: 0;
        }

        /* font-medium → SemiBold (usunięto woff2 dla weight 500) */
        .font-medium { font-weight: 600 !important; }

        /* Sticky phone button - mobile only */
        .sticky-phone {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            padding: 12px 20px;
            text-align: center;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        }
        .sticky-phone a {
            color: white;
            text-decoration: none;
            font-weight: 700;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        @media (max-width: 768px) {
            .sticky-phone { display: block; }
            body { padding-bottom: 56px; }
        }

        /* Nawigacja */
        .nav-link { transition: all 0.3s; position: relative; }
        .nav-link:hover { color: #1d4ed8; }
        .nav-link:focus { outline: 2px solid #1d4ed8; outline-offset: 2px; }

        /* Dropdown menu */
        .dropdown-menu {
            display: none;
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .dropdown:hover .dropdown-menu,
        .dropdown:focus-within .dropdown-menu {
            display: block !important;
            opacity: 1;
            transform: translateY(0);
        }

        /* Focus visible dla WCAG */
        :focus-visible {
            outline: 3px solid #1d4ed8;
            outline-offset: 2px;
        }

        /* Animacje */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Lepszy kontrast dla tekstu */
        .text-slate-500 { color: #64748b; }
        .text-slate-600 { color: #475569; }
        main .text-slate-600.text-sm,
        main .text-slate-600.font-medium {
            color: #0f172a !important;
        }
        main a.text-primary-700.text-sm {
            color: #172554 !important;
        }

        /* Minimalna wielkość przycisków dla dostępności */
        button, .btn, a[role="button"] {
            min-height: 44px;
            min-width: 44px;
        }

        /* FAQ Animation */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .faq-item.active .faq-answer {
            max-height: 500px;
        }
        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }
        .faq-question {
            border: none;
            background: none;
        }

        /* Card animations on scroll - GPU accelerated, no CLS */
        .animate-ready {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            will-change: opacity, transform;
        }
        .animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* Staggered animation delays for 3-column grid */
        .animate-ready:nth-child(3n+1) { transition-delay: 0s; }
        .animate-ready:nth-child(3n+2) { transition-delay: 0.08s; }
        .animate-ready:nth-child(3n)   { transition-delay: 0.16s; }

        /* Reduce motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            .animate-ready {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }

.blog-index-grid article p > svg {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        margin-right: 0.25rem;
        vertical-align: -0.125rem;
}

.tiktok-frame {
    max-width: 605px;
    min-width: 325px;
}