html, body {
font-family: 'Inter', sans-serif;
background-color: #0f172a; /* Tailwind slate-900, nieco ciemniejszy dla głębi */
color: #cbd5e1; /* Tailwind slate-300 */
scroll-padding-top: 80px; /* Dopasuj do wysokości nawigacji dla płynnego przewijania */
min-height: 100%;
}
/* HERO/SOLUTION/FINAL CTA gradients */
.bg-hero-gradient {
background:
radial-gradient(1200px 600px at 10% 0%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(800px 400px at 90% 10%, rgba(99,102,241,0.10), transparent 55%),
#0f172a; /* slate-900 */
}
.bg-solution-gradient {
background:
radial-gradient(900px 480px at 85% 10%, rgba(59,130,246,0.10), transparent 55%),
radial-gradient(700px 360px at 15% 0%, rgba(255,255,255,0.05), transparent 60%),
#0f172a; /* slate-900 */
}
.bg-finalcta-gradient {
background:
radial-gradient(1000px 520px at 12% 8%, rgba(99,102,241,0.12), transparent 58%),
radial-gradient(800px 380px at 88% 12%, rgba(168,85,247,0.10), transparent 55%),
#0f172a; /* slate-900 */
}
/* Wymuś jednolite tło na całym landingu */
.landing-unified-bg { position: relative; }
/* Usuń lokalne tła sekcji, zachowując border i inne efekty.
Wyjątek: sekcja CTA GA4 (.cta-strip-ga4) może mieć własne tło. */
.landing-unified-bg .section-divider { background: transparent !important; }
.landing-unified-bg section:not(.cta-strip-ga4) { background: transparent !important; }
/* Specjalny pasek CTA na stronie GA4 - pełna szerokość viewportu z widocznym glowem u góry */
.landing-unified-bg .cta-strip-ga4 {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
background:
radial-gradient(1200px 320px at 50% 0, rgba(129,140,248,0.55), transparent 72%),
#020617; /* ciemniejsze tło niż reszta strony */
box-shadow:
0 -1px 0 rgba(15,23,42,0.95),
0 24px 60px -30px rgba(15,23,42,0.95);
}
.landing-unified-bg .cta-strip-ga4 > * {
position: relative;
z-index: 1;
}
/* Premium: subtle noise overlay (2–3%) */
.premium-noise { position: relative; }
.premium-noise::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
background-size: 220px 220px;
mix-blend-mode: soft-light;
}
/* Premium: section divider (subtle top inset line) */
.section-divider { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
/* Kolory akcentujące */
.accent-bg { background-color: #4f46e5; /* Tailwind indigo-600 */ }
.accent-bg-hover:hover { background-color: #4338ca; /* Tailwind indigo-700 */ }
.text-accent { color: #6366f1; /* Tailwind indigo-500 */ }
.text-accent-light { color: #818cf8; /* Tailwind indigo-400 */ }
.border-accent { border-color: #4f46e5; }
/* Style dla tytułów sekcji */
.section-title {
text-align: center;
margin-bottom: 1.5rem; /* mb-6 */
color: #ffffff; /* text-white */
font-weight: 800; /* font-extrabold */
font-size: clamp(1.75rem, 1.8vw + 1rem, 2.75rem);
line-height: 1.15;
letter-spacing: -0.01em;
}
.section-title-space-lg {
margin-bottom: 2.5rem; /* większy odstęp pod tytułem */
}
.section-title-sm {
font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem);
line-height: 1.2;
letter-spacing: -0.005em;
}
.section-subtitle {
text-align: center;
max-width: 48rem; /* max-w-3xl */
margin-left: auto; /* mx-auto */
margin-right: auto;
margin-bottom: 3rem; /* mb-12 */
color: #94a3b8; /* text-slate-400 */
font-size: 1.125rem; /* text-lg */
line-height: 1.75rem;
}
@media (min-width: 640px) { /* sm: */
.section-title {
font-size: 3rem; /* text-5xl */
line-height: 1;
}
.section-title-space-lg { margin-bottom: 3rem; }
.section-title-sm {
font-size: 2.25rem; /* text-4xl */
line-height: 2.5rem;
}
.section-subtitle {
font-size: 1.25rem; /* text-xl */
line-height: 1.75rem;
margin-bottom: 4rem; /* mb-16 */
}
}
/* Placeholder dla ikon funkcji - teraz używamy SVG, ale zostawiam na wszelki wypadek */
.feature-icon-placeholder {
width: 60px;
height: 60px;
border-radius: 0.75rem; /* rounded-xl */
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem; /* mb-6 */
font-weight: bold;
}
/* Loga integracji */
.integration-logo {
height: 140px; /* jeszcze większa wysokość */
width: auto; /* zachowaj proporcje bez rozciągania */
filter: grayscale(0%) opacity(95%);
transition: all 0.3s ease-in-out;
object-fit: contain;
display: block;
}
.integration-logo:hover {
filter: grayscale(0%) opacity(100%);
transform: scale(1.08);
}
/* Marquee (taśma logotypów) – stabilna wersja */
.integrations-marquee { position: relative; overflow: hidden; width: 100%; min-height: 140px; padding-left: 4rem; padding-right: 4rem; }
.integrations-marquee::before, .integrations-marquee::after { display: none; }
.integrations-track { display: flex; align-items: center; gap: 4rem; padding-left: 0; padding-right: 0; }
.integrations-item { display: inline-flex; align-items: center; justify-content: center; padding: .25rem .5rem; flex: 0 0 auto; }
.integrations-track { animation: integrationsScroll 28s linear infinite; will-change: transform; }
/* Nie pauzuj animacji na hover/focus */
.integrations-marquee:hover .integrations-track, .integrations-marquee:focus-within .integrations-track { animation-play-state: running; }
@keyframes integrationsScroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (max-width: 640px) { .integrations-track { gap: 3rem; padding-left: 2rem; padding-right: 2rem; animation-duration: 22s; } }
/* Ograniczenie ruchu dla użytkowników z preferencją reduced motion */
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; transform: none; }
}
/* Social proof – taśma klientów */
.client-logos-panel {
border-radius: 1.5rem;
padding: 2rem 0;
overflow: hidden;
}
.client-logos-marquee {
overflow: hidden;
width: 100%;
}
.client-logos-track {
display: flex;
width: max-content;
animation: clientLogosScroll 60s linear infinite;
will-change: transform;
}
.client-logos-strip {
display: flex;
align-items: center;
gap: 3rem;
}
.client-logo-item {
flex: 0 0 auto;
min-width: 220px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.9;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.client-logo-item img {
height: 64px;
width: auto;
filter: grayscale(1);
}
.client-logo-item--large img {
height: 80px;
}
.client-logo-item:hover {
opacity: 1;
transform: translateY(-2px);
}
.client-logo-item:hover img {
filter: grayscale(0);
}
@keyframes clientLogosScroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 768px) {
.client-logos-panel {
padding: 1.5rem 0;
border-radius: 1.25rem;
}
.client-logos-strip {
gap: 1.5rem;
}
.client-logo-item {
min-width: 170px;
}
.client-logo-item img {
height: 48px;
}
.client-logo-item--large img {
height: 60px;
}
}
@media (prefers-reduced-motion: reduce) {
.client-logos-track {
animation: none;
}
}
/* Dodatkowe style dla efektu – wyłączone glow dla czystego looku */
.hero-glow { text-shadow: none; }
/* HERO typography */
.hero-title {
font-size: clamp(2rem, 2.2vw + 1rem, 3.25rem);
line-height: 1.1;
letter-spacing: -0.015em;
}
.hero-title-secondary {
font-size: 0.9em; /* delikatnie mniejsza druga linia */
opacity: 0.95;
}
@media (min-width: 640px) { /* zachowaj przestrzeń dla subtelnych korekt */ }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
.hero-subheadline {
font-size: 1rem; /* ~16px mobile */
line-height: 1.5;
color: #cbd5e1; /* slate-300 */
}
@media (min-width: 768px) {
.hero-subheadline { font-size: 1.125rem; /* 18px */ }
}
/* CTA full-width on mobile and sticky */
.cta-sticky {
width: 100%;
display: inline-block;
}
@media (max-width: 767px) {
.cta-sticky {
position: fixed; /* zawsze widoczny podczas scrollu */
bottom: 12px;
left: 16px;
right: 16px;
width: calc(100% - 32px);
z-index: 50;
}
}
.card-hover-effect {
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover-effect:hover {
transform: translateY(-0.5rem);
box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.30);
}
.gradient-text {
background-image: linear-gradient(to right, #818cf8, #a78bfa, #f472b6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Animacja dla przycisku CTA w hero */
.cta-hero-button {
background-color: #4f46e5; /* accent-bg */
color: #ffffff;
font-weight: 700; /* bold */
padding-top: 1rem; /* py-4 */
padding-bottom: 1rem;
padding-left: 2.5rem; /* px-10 */
padding-right: 2.5rem;
border-radius: 0.5rem; /* rounded-lg */
font-size: 1.125rem; /* text-lg */
line-height: 1.75rem;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.1); /* shadow-lg */
}
.cta-hero-button:hover {
background-color: #4338ca; /* hover:accent-bg-hover */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.1); /* shadow-xl */
transform: scale(1.05);
}
/* Delikatna poświata dla przycisków CTA */
.cta-glow {
box-shadow: 0 0 16px rgba(99, 102, 241, 0.45), 0 0 6px rgba(99, 102, 241, 0.3) inset;
}
.cta-glow:hover {
box-shadow: 0 0 28px rgba(99, 102, 241, 0.65), 0 0 12px rgba(99, 102, 241, 0.5) inset;
}
/* Subtelny hover dla screenshotu hero */
.hero-screenshot-frame {
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
will-change: transform;
}
.hero-screenshot-frame:hover,
.hero-screenshot-frame:focus-within {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 35px 90px -35px rgba(15, 23, 42, 0.9), 0 25px 60px -20px rgba(99, 102, 241, 0.4);
}
.hero-screenshot {
transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), filter 450ms ease;
}
.hero-screenshot-frame:hover .hero-screenshot,
.hero-screenshot-frame:focus-within .hero-screenshot {
transform: scale(1.02);
filter: saturate(1.08) brightness(1.05);
}
@media (prefers-reduced-motion: reduce) {
.hero-screenshot-frame,
.hero-screenshot {
transition: none;
}
}
.nav-blur {
background-color: #0f172a; /* solid slate-900 jak tło strony */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Globalne stany focus-visible dla dostępności */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #6366f1; /* indigo-500 */
outline-offset: 2px;
border-radius: 0.375rem; /* dopasowany łagodny promień */
}
/* Płynna animacja paska odzyskanego czasu w kalkulatorze */
#bar-saved {
transition: width 350ms ease-in-out;
will-change: width;
}
/* Sticky CTA spacing helper (avoid overlap with footer if needed) */
@media (max-width: 767px) {
body { padding-bottom: 72px; }
}
/* Final CTA emphasis */
.final-cta-title { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
.cta-attn { animation: ctaPulse 3s ease-in-out infinite; }
@keyframes ctaPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
/* Landing prose – czytelna typografia sekcji tekstowych */
.prose-landing {
max-width: 60rem; /* ~960px */
margin-left: auto;
margin-right: auto;
}
/* Gdy sekcja używa text-center, wymuś centrowanie akapitów */
.prose-landing.text-center p { text-align: center; }
.prose-landing p {
color: #cbd5e1; /* slate-300 */
font-size: 1.0625rem; /* 17px */
line-height: 1.7;
margin-top: .5rem;
}
.prose-landing p + p { margin-top: .65rem; }
@media (min-width: 768px) {
.prose-landing p { font-size: 1.125rem; line-height: 1.75; }
.prose-landing p + p { margin-top: .8rem; }
}
.prose-landing--sm p {
font-size: 0.95rem;
line-height: 1.6;
}
@media (min-width: 768px) {
.prose-landing--sm p {
font-size: 1.05rem;
line-height: 1.65;
}
}
.prose-landing a { color: #a78bfa; text-decoration: underline; text-underline-offset: 3px; }
.prose-landing a:hover { color: #c4b5fd; }
.prose-landing ul, .prose-landing ol { list-style-position: inside; margin-top: .5rem; margin-bottom: .5rem; padding-left: 0; }
.prose-landing ul { list-style-type: disc; }
.prose-landing ol { list-style-type: decimal; }
.prose-landing li + li { margin-top: .35rem; }
/* Feedback success state */
#feedback-form.success-state {
position: relative;
background: linear-gradient(rgba(6,78,59,0.18), rgba(6,78,59,0.18)) padding-box; /* emerald-800/18 */
border-color: rgba(16,185,129,0.55); /* emerald-500/55 */
box-shadow: 0 20px 48px -20px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Gdy pokazujemy success, usuń odstęp z utility space-y-4 między dziećmi */
#feedback-form.success-state > #feedback-success { margin-top: 0 !important; }
/* Wyśrodkuj widok sukcesu w obrębie formularza; pokazuj dopiero po wysłaniu */
#feedback-success { display: none; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-height: inherit; }
#feedback-form.success-state #feedback-success { display: flex; }
/* Animated success check */
.success-check { display: block; }
.success-check__circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: drawCircle .6s ease-out forwards; }
.success-check__mark { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck .45s .35s ease-out forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
/* Feedback form inputs – no color change on focus/autofill */
#feedback-form input:focus,
#feedback-form input:focus-visible,
#feedback-form textarea:focus,
#feedback-form textarea:focus-visible {
outline: none; /* override global outline */
box-shadow: none;
border-color: rgba(71,85,105,0.7); /* keep the same border */
}
/* Chrome/Safari autofill background override */
#feedback-form input:-webkit-autofill,
#feedback-form input:-webkit-autofill:hover,
#feedback-form input:-webkit-autofill:focus {
-webkit-text-fill-color: #e5e7eb;
-webkit-box-shadow: 0 0 0px 1000px #0f172a inset; /* slate-900 */
transition: background-color 9999s ease-in-out 0s;
caret-color: #e5e7eb;
}
/* Solution section cards */
.before-card {
background-color: rgba(100, 116, 139, 0.08); /* przygaszone */
border-color: rgba(100, 116, 139, 0.35);
box-shadow: 0 10px 30px -15px rgba(0,0,0,0.4);
}
.after-card {
background-color: rgba(30, 58, 138, 0.18); /* spokojny niebieski */
border-color: rgba(59, 130, 246, 0.35);
box-shadow: 0 14px 40px -18px rgba(59,130,246,0.25);
}
.icon-before { color: #fca5a5; /* red-300 light */ }
.icon-after { color: #86efac; /* green-300 */ }
.arrow-col svg { color: #94a3b8; }
.summary-emphasis { max-width: 64rem; margin-left: auto; margin-right: auto; }
/* Solution grid tighter center column */
.solution-grid { grid-template-columns: 1fr auto 1fr; }
.solution-grid .arrow-col { padding-left: 0.125rem; padding-right: 0.125rem; }
@media (min-width: 1024px) {
.solution-grid { gap: 1rem; }
}
/* Stronger arrow look */
.arrow-strong { filter: drop-shadow(0 2px 10px rgba(148,163,184,0.35)); }
/* Extra spacing under section header */
.section-title-space-xl { margin-bottom: 2.75rem; }
@media (min-width: 640px) { .section-title-space-xl { margin-bottom: 3.25rem; } }
/* Key benefits */
.benefit-card {
background-color: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(71, 85, 105, 0.7);
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 10px 30px -15px rgba(0,0,0,0.35);
transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.benefit-card:hover, .benefit-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 18px 40px -18px rgba(99,102,241,0.25);
border-color: rgba(129, 140, 248, 0.55);
outline: none;
}
.benefit-icon {
width: 42px; height: 42px;
color: #a78bfa; /* violet-400 */
margin-bottom: 0.5rem;
}
.benefit-icon svg { width: 100%; height: 100%; }
.benefit-icon-clock { color: #60a5fa; }
.benefit-icon-magic { color: #34d399; }
.benefit-icon-shield { color: #f59e0b; }
.benefit-title { color: #fff; font-weight: 700; margin-bottom: 0.25rem; }
.benefit-desc { color: #cbd5e1; font-size: 0.95rem; line-height: 1.4; }
/* Case studies / proof */
.case-card {
background-color: rgba(30, 41, 59, 0.9);
border: 1px solid rgba(71, 85, 105, 0.7);
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 10px 30px -15px rgba(0,0,0,0.35);
}
.case-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.case-metric { color: #34d399; font-weight: 800; font-size: 1.25rem; }
.case-submetric { color: #a78bfa; font-weight: 700; font-size: 0.95rem; }
.case-body { display: grid; gap: 0.6rem; }
.case-label { color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 0.2rem; }
.case-before { background: rgba(239, 68, 68, 0.08); border: 1px dashed rgba(239, 68, 68, 0.35); border-radius: .5rem; padding: .6rem .7rem; }
.case-after { background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.35); border-radius: .5rem; padding: .6rem .7rem; }
.case-text { color: #e2e8f0; font-size: .95rem; line-height: 1.5; }
/* How it works - stepper */
/* .stepper-line removed */
.step-card {
position: relative;
border: 1px solid transparent;
border-radius: .9rem;
padding: 1.25rem 1.25rem 1.15rem 1.25rem;
text-align: left;
background:
linear-gradient(rgba(2,6,23,.9), rgba(2,6,23,.85)) padding-box,
linear-gradient(135deg, rgba(129,140,248,.55), rgba(167,139,250,.4), rgba(244,114,182,.3)) border-box;
box-shadow: 0 20px 44px -24px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.04);
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.step-card:hover, .step-card:focus-visible {
transform: translateY(-6px);
box-shadow: 0 28px 60px -22px rgba(129,140,248,.4), inset 0 1px 0 rgba(255,255,255,.05);
outline: none;
filter: saturate(1.05);
}
.step-icon { width: 46px; height: 46px; color: #a78bfa; margin-bottom: .6rem; }
.step-icon svg { width: 100%; height: 100%; }
.step-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: .45rem;
background: rgba(99,102,241,.18);
border: 1px solid rgba(129,140,248,.5);
color: #c7d2fe;
font-weight: 800;
font-size: 1.15rem;
line-height: 1;
box-shadow: inset 0 0 0 2px rgba(129,140,248,.12);
margin-bottom: .5rem;
}
.step-title { color: #fff; font-weight: 800; letter-spacing: -.01em; margin-bottom: .1rem; }
.step-desc { color: #cbd5e1; font-size: 0.875rem; line-height: 1.5; font-style: italic; }
/* Problem cards – spójne ze step-card */
.problem-card {
position: relative;
border: 1px solid transparent;
border-radius: 1rem;
padding: 1.4rem 1.7rem;
min-height: 135px;
display: flex;
align-items: center;
background:
linear-gradient(rgba(2,6,23,.82), rgba(2,6,23,.82)) padding-box,
linear-gradient(135deg, rgba(129,140,248,.45), rgba(167,139,250,.32), rgba(244,114,182,.22)) border-box;
box-shadow: 0 18px 42px -24px rgba(99,102,241,.30), inset 0 1px 0 rgba(255,255,255,.03);
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.problem-card:hover, .problem-card:focus-visible {
transform: translateY(-6px);
box-shadow: 0 26px 58px -22px rgba(129,140,248,.38), inset 0 1px 0 rgba(255,255,255,.05);
outline: none;
filter: saturate(1.03);
}
/* Transformation section */
.transformation-card {
border-radius: 1.25rem;
padding: 2rem;
background:
linear-gradient(180deg, rgba(15,23,42,0.9), rgba(15,23,42,0.85)) padding-box,
linear-gradient(135deg, rgba(129,140,248,0.5), rgba(167,139,250,0.35), rgba(244,114,182,0.35)) border-box;
border: 1px solid transparent;
box-shadow: 0 30px 70px -40px rgba(99,102,241,0.55);
height: 100%;
}
.transformation-card--after {
background:
linear-gradient(180deg, rgba(8,47,73,0.95), rgba(15,118,110,0.9)) padding-box,
linear-gradient(135deg, rgba(14,165,233,0.5), rgba(16,185,129,0.45)) border-box;
color: #ecfeff;
box-shadow: 0 30px 70px -38px rgba(45,212,191,0.45);
}
.transformation-label {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .35rem 1.1rem;
border-radius: 999px;
font-size: .85rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
background: rgba(15,23,42,0.4);
color: #cbd5f5;
margin-bottom: 1.5rem;
border: 1px solid rgba(148, 163, 184, 0.4);
}
.transformation-card--after .transformation-label {
background: rgba(15,118,110,0.25);
color: #ecfeff;
border-color: rgba(16,185,129,0.5);
}
.transformation-list {
display: flex;
flex-direction: column;
gap: 0.9rem;
color: #e2e8f0;
font-size: 0.89rem;
line-height: 1.5;
}
.transformation-list li {
display: flex;
align-items: flex-start;
gap: .65rem;
}
.transformation-list li::before {
content: "•";
color: #a78bfa;
font-size: 1.5rem;
line-height: 1;
margin-top: -.15rem;
}
.transformation-card--after .transformation-list li::before {
color: #5eead4;
}
@media (max-width: 768px) {
.transformation-card {
padding: 1.5rem;
}
}
/* Integrations section */
.integrations-grid {
display: grid;
}
.integration-item {
position: relative;
border-radius: 0.75rem;
padding: 0.75rem;
background: linear-gradient(180deg, rgba(15,23,42,0.7), rgba(15,23,42,0.6)) padding-box,
linear-gradient(135deg, rgba(129,140,248,0.3), rgba(167,139,250,0.2)) border-box;
border: 1px solid transparent;
box-shadow: 0 4px 12px -4px rgba(99,102,241,0.2);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.6rem;
text-align: center;
min-height: 92px;
height: 100%;
}
.integration-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px -6px rgba(99,102,241,0.35);
border-color: rgba(129,140,248,0.4);
}
.integration-logo-wrapper {
width: 100%;
height: 62px;
border-radius: 0.85rem;
border: 1px solid transparent;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 0.65rem;
position: relative;
transition: border-color 0.25s ease, background 0.25s ease;
box-sizing: border-box;
}
.integration-item:hover .integration-logo-wrapper {
border-color: transparent;
background: transparent;
}
.integration-logo {
max-width: 100%;
height: auto;
max-height: 48px;
object-fit: contain;
filter: brightness(0.95);
transition: filter 0.25s ease, transform 0.25s ease;
}
.integration-item:hover .integration-logo {
filter: brightness(1.1);
transform: scale(1.05);
}
.integration-logo--tall {
max-height: 80px;
}
.integration-logo--large {
max-height: 84px;
}
.integration-logo--small {
max-height: 34px;
}
.integration-logo--tiny {
max-height: 28px;
}
.integration-content {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.integration-title {
font-size: 1rem;
font-weight: 600;
color: #f8fafc;
letter-spacing: 0.01em;
}
.integration-description {
font-size: 0.87rem;
color: #cbd5f5;
line-height: 1.45;
}
.integration-item--coming-soon {
background: linear-gradient(180deg, rgba(15,23,42,0.5), rgba(15,23,42,0.4)) padding-box,
linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15)) border-box;
border-color: rgba(251,191,36,0.3);
opacity: 0.8;
}
.integration-item--coming-soon .integration-logo-wrapper {
border-color: transparent;
background: transparent;
}
.integration-item--coming-soon:hover {
transform: translateY(-2px);
opacity: 0.9;
}
.integration-logo--grayscale {
filter: grayscale(100%) brightness(0.7);
opacity: 0.6;
}
.integration-item--coming-soon:hover .integration-logo--grayscale {
filter: grayscale(100%) brightness(0.8);
opacity: 0.7;
}
.integration-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.95));
color: #1e293b;
font-size: 0.65rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
border: 1px solid rgba(251,191,36,0.5);
box-shadow: 0 2px 8px rgba(251,191,36,0.3);
text-transform: uppercase;
letter-spacing: 0.025em;
white-space: nowrap;
z-index: 10;
}
.integration-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
text-align: center;
width: 100%;
}
@media (max-width: 768px) {
.integration-item {
padding: 0.65rem;
min-height: 82px;
}
.integration-logo-wrapper {
height: 50px;
padding: 0.4rem;
}
.integration-logo {
max-height: 40px;
}
.integration-logo--tall {
max-height: 56px;
}
.integration-logo--large {
max-height: 64px;
}
.integration-logo--small {
max-height: 28px;
}
.integration-logo--tiny {
max-height: 24px;
}
.integration-badge {
font-size: 0.6rem;
padding: 0.2rem 0.4rem;
top: -6px;
right: -6px;
}
}
/* Pricing section */
.pricing-card {
position: relative;
border: 1px solid transparent;
border-radius: 1.25rem;
padding: 2rem;
background:
linear-gradient(180deg, rgba(15,23,42,0.9), rgba(15,23,42,0.85)) padding-box,
linear-gradient(135deg, rgba(129,140,248,0.4), rgba(167,139,250,0.3), rgba(244,114,182,0.25)) border-box;
box-shadow: 0 20px 44px -24px rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,.04);
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.pricing-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px -22px rgba(129,140,248,0.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.pricing-card--featured {
background:
linear-gradient(180deg, rgba(15,23,42,0.95), rgba(15,23,42,0.9)) padding-box,
linear-gradient(135deg, rgba(129,140,248,0.6), rgba(167,139,250,0.5), rgba(244,114,182,0.4)) border-box;
box-shadow: 0 30px 70px -40px rgba(99,102,241,0.55);
padding: 2.5rem 2rem;
transform: scale(1.05);
}
.pricing-card--featured:hover {
box-shadow: 0 36px 80px -38px rgba(129,140,248,0.6);
}
.pricing-badge {
position: absolute;
top: -12px;
right: 1.5rem;
background: linear-gradient(135deg, rgba(129,140,248,0.95), rgba(167,139,250,0.95));
color: #1e293b;
font-size: 0.75rem;
font-weight: 700;
padding: 0.35rem 0.85rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 4px 12px rgba(129,140,248,0.4);
}
.pricing-header {
margin-bottom: 1.5rem;
}
.pricing-name {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
.pricing-price {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.pricing-amount {
font-size: 3rem;
font-weight: 900;
color: #fff;
line-height: 1;
}
.pricing-amount--custom {
font-size: 1.75rem;
font-weight: 800;
}
.pricing-period {
font-size: 1rem;
color: #cbd5e1;
line-height: 1.3;
}
.pricing-for {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pricing-features li {
color: #e2e8f0;
font-size: 0.95rem;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.pricing-features li::before {
content: "✓";
color: #a78bfa;
font-weight: 700;
font-size: 1.1rem;
line-height: 1;
margin-top: 0.1rem;
flex-shrink: 0;
}
.pricing-card--featured .pricing-features li::before {
color: #818cf8;
}
.pricing-cta {
margin-top: auto;
}
.pricing-button {
display: block;
width: 100%;
text-align: center;
padding: 0.875rem 1.5rem;
border-radius: 0.625rem;
font-weight: 700;
font-size: 1rem;
transition: all 0.25s ease;
text-decoration: none;
}
.pricing-button--free {
background: linear-gradient(135deg, rgba(99,102,241,0.9), rgba(79,70,229,0.9));
color: #fff;
box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.pricing-button--free:hover {
background: linear-gradient(135deg, rgba(99,102,241,1), rgba(79,70,229,1));
box-shadow: 0 6px 20px rgba(99,102,241,0.4);
transform: translateY(-2px);
}
.pricing-button--standard {
background: linear-gradient(135deg, rgba(129,140,248,0.95), rgba(99,102,241,0.95));
color: #fff;
box-shadow: 0 4px 12px rgba(129,140,248,0.4);
}
.pricing-button--standard:hover {
background: linear-gradient(135deg, rgba(129,140,248,1), rgba(99,102,241,1));
box-shadow: 0 6px 20px rgba(129,140,248,0.5);
transform: translateY(-2px);
}
.pricing-button--enterprise {
background: linear-gradient(135deg, rgba(167,139,250,0.9), rgba(139,92,246,0.9));
color: #fff;
box-shadow: 0 4px 12px rgba(167,139,250,0.3);
}
.pricing-button--enterprise:hover {
background: linear-gradient(135deg, rgba(167,139,250,1), rgba(139,92,246,1));
box-shadow: 0 6px 20px rgba(167,139,250,0.4);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.pricing-card {
padding: 1.5rem;
}
.pricing-amount {
font-size: 2.5rem;
}
}
/* Pricing billing toggle */
.pricing-billing-toggle {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.25rem 0.6rem;
border-radius: 9999px;
background: rgba(15,23,42,0.95);
border: 1px solid rgba(51,65,85,0.9);
box-shadow: 0 14px 30px -18px rgba(15,23,42,0.95);
}
.pricing-billing-toggle-label {
font-size: 0.8rem;
color: #94a3b8;
cursor: pointer;
user-select: none;
white-space: nowrap;
opacity: 0.7;
transition: color 0.18s ease, opacity 0.18s ease;
}
.pricing-billing-toggle-label.is-active {
color: #e5e7eb;
opacity: 1;
font-weight: 600;
}
.pricing-toggle-switch {
position: relative;
width: 44px;
height: 24px;
border-radius: 9999px;
border: 1px solid rgba(148,163,184,0.9);
background:
radial-gradient(circle at 0% 0%, rgba(148,163,184,0.15), transparent 60%),
linear-gradient(135deg, rgba(15,23,42,0.98), rgba(30,41,59,0.98));
padding: 2px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.pricing-toggle-switch-knob {
width: 18px;
height: 18px;
border-radius: 9999px;
background: linear-gradient(135deg, #818cf8, #a78bfa);
box-shadow: 0 4px 10px rgba(15,23,42,0.95);
transform: translateX(0);
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease, box-shadow 0.22s ease;
}
.pricing-toggle-switch--on {
border-color: rgba(34,197,94,0.8);
background:
radial-gradient(circle at 100% 0%, rgba(34,197,94,0.25), transparent 60%),
linear-gradient(135deg, rgba(15,23,42,0.98), rgba(6,78,59,0.98));
box-shadow: 0 0 18px rgba(34,197,94,0.35);
justify-content: flex-end;
}
.pricing-toggle-switch--on .pricing-toggle-switch-knob {
transform: translateX(0);
background: linear-gradient(135deg, #22c55e, #4ade80);
box-shadow: 0 6px 16px rgba(6,95,70,0.9);
}
.pricing-toggle-switch:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 3px;
}
.pricing-toggle-helper {
text-align: right;
}
@media (max-width: 767px) {
.pricing-toggle-helper {
text-align: center;
}
}
/* FAQ */
.faq-summary { display: flex; align-items: center; gap: .75rem; justify-content: space-between; }
.faq-qicon { display: none; }
.faq-arrow { width: 20px; height: 20px; color: #a78bfa; transition: transform .2s ease; flex: 0 0 auto; }
details.faq-item[open] > summary .faq-arrow { transform: rotate(180deg); }
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item:hover { border-color: rgba(129,140,248,.6); }
/* FAQ premium cards */
.faq-card {
position: relative;
border: 1px solid transparent;
border-radius: .9rem;
padding: 1rem 1rem;
background:
linear-gradient(rgba(2,6,23,.86), rgba(2,6,23,.86)) padding-box,
linear-gradient(135deg, rgba(129,140,248,.5), rgba(167,139,250,.36), rgba(244,114,182,.26)) border-box;
box-shadow: 0 18px 40px -22px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.04);
transition: transform .2s ease, box-shadow .2s ease;
}
.faq-card:hover, .faq-card:focus-within {
transform: translateY(-4px);
box-shadow: 0 26px 58px -24px rgba(129,140,248,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
/* FAQ category tabs */
.faq-tab-row {
row-gap: 0.75rem;
}
.faq-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.5rem;
border-radius: 9999px;
border: 1px solid rgba(148,163,184,0.6); /* slate-400 */
background:
radial-gradient(circle at 0% 0%, rgba(56,189,248,0.08), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(129,140,248,0.12), transparent 55%),
rgba(15,23,42,0.96); /* slate-900 */
color: #e2e8f0;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.18s ease-out;
box-shadow: 0 12px 35px -22px rgba(15,23,42,0.98);
}
.faq-tab:hover {
border-color: rgba(129,140,248,0.95);
color: #fefce8;
transform: translateY(-1px) translateZ(0);
}
.faq-tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
font-size: 0.9rem;
color: #a5b4fc; /* indigo-300 */
}
.faq-tab-active {
background:
radial-gradient(circle at 0% 0%, rgba(248,250,252,0.08), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(248,113,180,0.22), transparent 55%),
linear-gradient(90deg, #818cf8, #a78bfa, #f472b6); /* jak gradient-text */
border-color: #818cf8;
color: #ffffff;
box-shadow: 0 20px 45px -22px rgba(37,99,235,0.8);
}
/* Blog category links w artykułach */
.article-category-link {
color: inherit;
text-decoration: none;
}
.article-category-link:hover {
text-decoration: underline;
color: #e5e7eb;
}
/* Blog typography */
.prose-custom {
max-width: 54rem;
margin-left: auto;
margin-right: auto;
color: #e2e8f0; /* slate-200 */
line-height: 1.75;
}
.prose-custom > * + * {
margin-top: 1rem;
}
.prose-custom p {
font-size: 1.05rem;
color: #cbd5e1; /* slate-300 */
}
.prose-custom > p:first-of-type {
font-size: 1.125rem; /* lead */
color: #e5e7eb; /* slate-200 lighter */
}
@media (min-width: 768px) {
.prose-custom p { font-size: 1.125rem; }
.prose-custom > p:first-of-type { font-size: 1.25rem; }
}
.prose-custom h2 {
margin-top: 2.25rem;
margin-bottom: 0.75rem;
font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
line-height: 1.2;
color: #ffffff;
font-weight: 800;
letter-spacing: -0.01em;
}
/* Auto-numbering for H2 as badges */
.prose-custom { counter-reset: section; }
.prose-custom h2::before {
counter-increment: section;
content: counter(section);
display: inline-flex;
align-items: center; justify-content: center;
width: 1.75rem; height: 1.75rem;
margin-right: .5rem;
border-radius: .4rem;
background: rgba(99,102,241,0.18);
color: #a78bfa;
font-weight: 700;
border: 1px solid rgba(129,140,248,0.35);
}
.prose-custom h3 {
margin-top: 1.75rem;
margin-bottom: 0.5rem;
font-size: 1.25rem;
line-height: 1.3;
color: #ffffff;
font-weight: 700;
}
.prose-custom a {
color: #818cf8; /* indigo-400 */
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s ease;
}
.prose-custom a:hover { color: #a78bfa; }
/* CTA link override inside prose */
.prose-custom a.cta-button { color: #ffffff; text-decoration: none; }
.prose-custom a.cta-button:hover { color: #ffffff; text-decoration: none; }
.prose-custom ul, .prose-custom ol {
padding-left: 0; /* bullets closer do tekstu */
margin-top: 0.5rem;
margin-bottom: 0.5rem;
list-style-position: inside;
}
.prose-custom ul { list-style-type: disc; }
.prose-custom ol { list-style-type: decimal; }
.prose-custom li { margin-top: 0.35rem; }
.prose-custom strong { color: #ffffff; font-weight: 700; }
.prose-custom em { color: #e2e8f0; }
.prose-custom blockquote {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
padding-left: 1rem;
border-left: 3px solid #4f46e5; /* indigo-600 */
color: #e5e7eb;
font-style: italic;
}
.prose-custom hr, .post-divider {
height: 1px;
border: 0;
background: linear-gradient(to right, rgba(129,140,248,.35), rgba(99,102,241,.15), rgba(129,140,248,.35));
margin: 1.5rem 0;
}
.prose-custom code {
background: rgba(71,85,105,.3);
border: 1px solid rgba(71,85,105,.6);
padding: 0 .25rem;
border-radius: .25rem;
color: #e5e7eb;
}
/* Headings refinements */
.prose-custom h2 + * { margin-top: .5rem; }
.prose-custom h2 { position: relative; padding-bottom: .35rem; }
.prose-custom h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 2px;
background: linear-gradient(90deg, rgba(99,102,241,.9), rgba(99,102,241,.25));
border-radius: 2px;
}
/* Lists spacing */
.prose-custom ul li + li, .prose-custom ol li + li { margin-top: .4rem; }
.prose-custom ul li { padding-left: 0; }
/* "Jak to naprawić?" callout */
.prose-custom .howto {
background: rgba(99,102,241,0.12);
border: 1px solid rgba(99,102,241,0.5);
border-left: 5px solid #6366f1;
padding: .9rem 1rem;
border-radius: .6rem;
color: #e5e7eb;
margin-top: 1rem;
margin-bottom: 1rem;
}
.prose-custom .howto strong { color: #ffffff; }
@media (min-width: 768px) {
.prose-custom .howto { margin-top: 1.25rem; margin-bottom: 1.1rem; }
}
/* Styled checklist */
.prose-custom ul.checklist { list-style: none; padding-left: 0; }
.prose-custom ul.checklist li { position: relative; padding-left: 1.9rem; margin-top: .6rem; }
.prose-custom ul.checklist li::before {
content: "";
position: absolute;
left: 0;
top: .15rem;
width: 1.1rem;
height: 1.1rem;
border-radius: .3rem;
background: rgba(15,23,42,.6);
border: 1px solid rgba(99,102,241,.6);
box-shadow: inset 0 0 0 2px rgba(129,140,248,.15);
}
.prose-custom ul.checklist li::after {
content: "";
position: absolute;
left: .28rem;
top: .38rem;
width: .55rem;
height: .28rem;
border: 2px solid #a78bfa;
border-top: 0; border-left: 0;
transform: rotate(45deg);
opacity: .85;
}
/* TOC card sticky */
.toc-card { position: relative; top: 0; }
/* Read progress bar */
.read-progress {
position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
background: linear-gradient(90deg, #6366f1, #a78bfa);
box-shadow: 0 1px 6px rgba(129,140,248,.6);
transition: width .15s ease-out;
}
/* Post sections as cards */
.post-section {
background: rgba(2,6,23,.65);
border: 1px solid rgba(129,140,248,.35);
border-radius: .9rem;
padding: 1.2rem;
box-shadow: 0 18px 40px -18px rgba(99,102,241,.25);
}
@media (min-width: 768px) {
.post-section { padding: 1.6rem 1.6rem; }
}
.post-section + .post-section { margin-top: 1.5rem; }
/* Intro dropcap */
/* Dropcap usunięty – wstęp bez pierwszej dużej litery */
/* Feedback form premium look */
.feedback-card {
position: relative;
border: 1px solid transparent;
border-radius: .9rem;
padding: 1.1rem;
background:
linear-gradient(rgba(2,6,23,.86), rgba(2,6,23,.86)) padding-box,
linear-gradient(135deg, rgba(129,140,248,.5), rgba(167,139,250,.36), rgba(244,114,182,.26)) border-box;
box-shadow: 0 20px 44px -24px rgba(99,102,241,.32), inset 0 1px 0 rgba(255,255,255,.04);
transition: box-shadow .25s ease;
}
.input-premium {
width: 100%;
border-radius: .6rem;
background: rgba(2,6,23,.9);
border: 1px solid rgba(71,85,105,.7);
color: #e5e7eb;
padding: .75rem .9rem;
transition: border-color .2s ease, box-shadow .2s ease;
}
.input-premium::placeholder { color: #94a3b8; }
.input-premium:focus, .input-premium:focus-visible {
outline: none;
border-color: rgba(129,140,248,.6);
box-shadow: 0 0 0 3px rgba(129,140,248,.15);
}
/* Active TOC link */
.toc-card a.active { color: #ffffff; font-weight: 700; }
.toc-card a.active::before { content: "•"; margin-right: .4rem; color: #a78bfa; }
/* Tables inside prose */
.prose-custom table {
width: 100%;
border-collapse: collapse;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.975rem;
}
.prose-custom thead th {
color: #e2e8f0;
font-weight: 700;
text-align: left;
padding: .6rem .75rem;
background: linear-gradient(to bottom, rgba(30,41,59,.6), rgba(15,23,42,.4));
border-bottom: 1px solid rgba(71,85,105,.6);
}
.prose-custom tbody td {
color: #cbd5e1;
padding: .6rem .75rem;
}
.prose-custom tbody tr {
border-top: 1px solid rgba(71,85,105,.5);
}
.prose-custom tbody tr:nth-child(2n) {
background-color: rgba(30,41,59,0.35);
}
.prose-custom tbody tr:hover {
background-color: rgba(129,140,248,0.06);
}
.prose-custom th:first-child, .prose-custom td:first-child { border-top-left-radius: .25rem; }
.prose-custom th:last-child, .prose-custom td:last-child { border-top-right-radius: .25rem; }
/* Ensure table header columns don't wrap awkwardly */
.prose-custom table.metrics-table thead th { white-space: nowrap; }
.prose-custom table.metrics-table tbody td { vertical-align: middle; }
/* Callouts and info boxes */
.prose-custom .callout {
margin-top: 1rem;
padding: 1rem;
border-radius: .75rem;
background: rgba(99,102,241,0.10);
border: 1px solid rgba(99,102,241,0.35);
}
.prose-custom .callout .callout-title {
color: #fff;
font-weight: 700;
margin-bottom: .35rem;
}
/* Images within article */
.prose-custom img {
display: block;
max-width: 100%;
height: auto;
border-radius: .5rem;
border: 1px solid rgba(71,85,105,.5);
box-shadow: 0 12px 30px -16px rgba(0,0,0,.6);
}
/* Small elements */
.prose-custom small, .prose-custom .caption {
color: #94a3b8;
font-size: .875rem;
}
/* Spacing helpers for article */
.prose-custom .lead { color: #e5e7eb; font-size: 1.125rem; }
/* Premium Table of Contents */
nav.toc-premium {
position: relative;
border: 1px solid transparent;
border-radius: 0.9rem;
padding: 1rem;
background:
linear-gradient(#0f172a, #0f172a) padding-box,
linear-gradient(90deg, rgba(129,140,248,.7), rgba(167,139,250,.5), rgba(244,114,182,.45)) border-box;
box-shadow: 0 18px 40px -18px rgba(99,102,241,.25);
max-width: 44rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav.toc-premium .toc-header {
display: flex; align-items: center; justify-content: center; gap: .5rem;
color: #fff; font-weight: 700;
margin-bottom: .5rem;
}
nav.toc-premium .toc-header .toc-icon { width: 18px; height: 18px; color: #a78bfa; }
nav.toc-premium .toc-list { counter-reset: toc; list-style: none; margin: 0; padding: 0; }
nav.toc-premium .toc-list li { counter-increment: toc; }
nav.toc-premium .toc-list li + li { margin-top: .25rem; }
nav.toc-premium .toc-list a {
display: flex; align-items: center; justify-content: center; gap: .5rem;
padding: .45rem .6rem;
border-radius: .55rem;
color: #c7d2fe; /* indigo-200 */
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
nav.toc-premium .toc-list a::before {
content: counter(toc);
display: inline-flex; align-items: center; justify-content: center;
width: 1.35rem; height: 1.35rem; border-radius: .35rem;
background: rgba(99,102,241,.18);
border: 1px solid rgba(129,140,248,.4);
color: #a78bfa; font-weight: 700; font-size: .85rem;
}
nav.toc-premium .toc-list a:hover { background: rgba(129,140,248,.12); color: #ffffff; transform: translateY(-1px); }
/* Override default active marker inside premium TOC */
nav.toc-card.toc-premium a.active::before { content: counter(toc); }
nav.toc-card.toc-premium a.active {
background: linear-gradient(90deg, rgba(129,140,248,.22), rgba(167,139,250,.14));
color: #ffffff; font-weight: 700;
}
/* ===== CookieYes: ukryj przycisk/zakładkę "Ustawienia plików cookie" ===== */
.cky-btn-revisit,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
.cky-revisit-wrapper { display: none !important; visibility: hidden !important; }
/* Social Media Icons in Footer */
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(15,23,42,0.6);
border: 1px solid rgba(71,85,105,0.5);
color: #cbd5e1;
transition: all 0.25s ease;
text-decoration: none;
}
.social-icon:hover {
background: rgba(15,23,42,0.9);
border-color: rgba(129,140,248,0.6);
color: #a78bfa;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.social-icon svg {
width: 20px;
height: 20px;
}