/* MOSTEK — arkusz strony (wyniesiony z index.html 24.08.2026; tożsamość V1 bez zmian) */
/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Accessibility */
:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}
.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;
}
:root {
--primary: #3B8EA5;
--primary-dark: #2D7A8F;
--primary-light: #E8F4F7;
--secondary: #7CAE7A;
--secondary-light: #EDF5ED;
--accent: #D4A843;
--accent-light: #FBF5E8;
--bg: #F7F3EE;
--bg-white: #FFFFFF;
--text: #2D3142;
--text-light: #5C5F6E;
--text-muted: #6B6E7D;
--alert: #C1666B;
--alert-light: #F9ECED;
--border: #E8E4DE;
--shadow-sm: 0 1px 3px rgba(45,49,66,0.06);
--shadow-md: 0 4px 12px rgba(45,49,66,0.08);
--shadow-lg: 0 8px 30px rgba(45,49,66,0.12);
--shadow-xl: 0 20px 60px rgba(45,49,66,0.15);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--bg-warm: #F5F0E8;
--radius-full: 9999px;
}
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 800;
line-height: 1.2;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; font-family: inherit; }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.section {
padding: 100px 0;
}
@media (max-width: 768px) {
.section { padding: 64px 0; }
.container { padding: 0 16px; }
}
/* Jeden element przyklejony naraz: gdy widoczny baner cookies, przycisk FAB czeka */
html.cookie-open .mm-fab { opacity: 0; pointer-events: none; }
/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse-soft {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* Treść jest widoczna domyślnie. Ukrycie tylko gdy JS już działa (html.js),
a bezpiecznik w skrypcie odsłania wszystko po 1,5 s niezależnie od scrolla. */
.animate-on-scroll {
transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .animate-on-scroll:not(.visible) {
opacity: 0;
transform: translateY(30px);
}
html.js.reveal-all .animate-on-scroll { opacity: 1; transform: none; }
/* Ograniczony ruch (ustawienie systemowe, WCAG 2.3.3): zero ukrywania i zero animacji wejścia */
@media (prefers-reduced-motion: reduce) {
html.js .animate-on-scroll:not(.visible) { opacity: 1; transform: none; transition: none; }
.hero-badge, .hero h1, .hero p, .hero-form, .hero-actions, .hero-visual, .hero-phone,
[style*="animation"], [class*="hero-"] { animation: none !important; opacity: 1 !important; }
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Ikony Phosphor jako lokalny sprite SVG (scripts/build-icons.mjs) — dziedziczą rozmiar i kolor jak font */
svg.ph { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; display: inline-block; }
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 32px;
border-radius: var(--radius-full);
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.02em;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 4px 15px rgba(59,142,165,0.3);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59,142,165,0.4);
}
.btn-secondary {
background: white;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-secondary:hover {
background: var(--primary-light);
transform: translateY(-2px);
}
.btn-accent {
background: var(--accent);
color: white;
box-shadow: 0 4px 15px rgba(212,168,67,0.3);
}
.btn-accent:hover {
background: #C49A3A;
transform: translateY(-2px);
}
.btn-lg {
padding: 20px 44px;
font-size: 1.125rem;
}
/* ===== BADGE ===== */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.03em;
}
.badge-primary {
background: var(--primary-light);
color: var(--primary);
}
.badge-accent {
background: var(--accent-light);
color: #9A7A2E;
}
.badge-secondary {
background: var(--secondary-light);
color: #4A7A48;
}
/* ===== NAV ===== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(247,243,238,0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(232,228,222,0.5);
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.nav.scrolled {
background: rgba(255,255,255,0.95);
box-shadow: var(--shadow-sm);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 900;
font-size: 1.5rem;
color: var(--primary);
}
.nav-logo-icon {
width: 36px;
height: 36px;
background: var(--primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-light);
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--primary);
}
.nav-cta {
padding: 10px 24px;
font-size: 0.875rem;
}
.nav-mobile-toggle {
display: none;
background: none;
color: var(--text);
font-size: 1.5rem;
padding: 8px;
}
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-mobile-toggle { display: block; }
}
/* ===== HERO ===== */
.hero {
padding-top: 140px;
padding-bottom: 100px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(59,142,165,0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(124,174,122,0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-badge {
animation: fadeInUp 0.6s ease forwards;
margin-bottom: 24px;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 3.75rem);
color: var(--text);
margin-bottom: 24px;
animation: fadeInUp 0.6s ease 0.1s forwards;
opacity: 0;
}
.hero h1 span {
color: var(--primary);
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 40px;
animation: fadeInUp 0.6s ease 0.2s forwards;
opacity: 0;
}
.hero-ctas {
display: flex;
gap: 16px;
flex-direction: row;
align-items: center;
animation: fadeInUp 0.6s ease 0.3s forwards;
opacity: 0;
}
@media (max-width: 500px) {
.hero-ctas { flex-direction: column; }
}
.hero-social-proof {
display: flex;
align-items: center;
gap: 16px;
margin-top: 40px;
animation: fadeInUp 0.6s ease 0.4s forwards;
opacity: 0;
}
.hero-avatars {
display: flex;
}
.hero-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid var(--bg);
margin-left: -10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.hero-avatar:first-child { margin-left: 0; }
.hero-avatar-1 { background: var(--primary-light); color: var(--primary); }
.hero-avatar-2 { background: var(--secondary-light); color: var(--secondary); }
.hero-avatar-3 { background: var(--accent-light); color: var(--accent); }
.hero-avatar-4 { background: var(--alert-light); color: var(--alert); }
.hero-social-text {
font-size: 0.875rem;
color: var(--text-muted);
}
.hero-social-text strong {
color: var(--text);
}
/* Hero Visual */
.hero-visual {
position: relative;
animation: fadeIn 0.8s ease 0.3s forwards;
opacity: 0;
}
.hero-phone {
position: relative;
max-width: 380px;
margin: 0 auto;
}
.hero-phone-frame {
background: white;
border-radius: 32px;
box-shadow: var(--shadow-xl);
padding: 20px;
position: relative;
overflow: hidden;
}
.hero-phone-notch {
width: 120px;
height: 28px;
background: var(--bg);
border-radius: 0 0 16px 16px;
margin: -20px auto 16px;
}
.hero-phone-screen {
border-radius: 16px;
overflow: hidden;
}
.phone-header {
background: var(--primary);
padding: 16px 20px;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
}
.phone-header-title {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 700;
font-size: 1.125rem;
}
.phone-week {
padding: 12px 16px;
background: var(--primary-light);
display: flex;
justify-content: space-between;
}
.phone-day {
text-align: center;
font-size: 0.875rem;
color: var(--text-muted);
}
.phone-day-num {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
margin-top: 4px;
color: var(--text);
}
.phone-day.active .phone-day-num {
background: var(--primary);
color: white;
}
.phone-schedule {
padding: 16px;
background: white;
}
.phone-event {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
border-radius: var(--radius-sm);
margin-bottom: 8px;
}
.phone-event-mama { background: var(--primary-light); }
.phone-event-tata { background: var(--secondary-light); }
.phone-event-shared { background: var(--accent-light); }
.phone-event-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 6px;
flex-shrink: 0;
}
.phone-event-mama .phone-event-dot { background: var(--primary); }
.phone-event-tata .phone-event-dot { background: var(--secondary); }
.phone-event-shared .phone-event-dot { background: var(--accent); }
.phone-event-title {
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 2px;
}
.phone-event-time {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Floating elements */
.hero-float-1, .hero-float-2 {
position: absolute;
background: white;
border-radius: var(--radius-md);
padding: 12px 16px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 10px;
font-size: 0.8125rem;
font-weight: 600;
}
.hero-float-1 {
top: 10%;
right: -10%;
animation: float 4s ease-in-out infinite;
color: var(--secondary);
}
.hero-float-2 {
bottom: 15%;
left: -5%;
animation: float 4s ease-in-out infinite 1s;
color: var(--primary);
}
.hero-float-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.hero-float-1 .hero-float-icon {
background: var(--secondary-light);
color: var(--secondary);
}
.hero-float-2 .hero-float-icon {
background: var(--primary-light);
color: var(--primary);
}
@media (max-width: 900px) {
.hero-inner {
grid-template-columns: 1fr;
text-align: center;
}
.hero-ctas { justify-content: center; }
.hero-social-proof { justify-content: center; }
.hero-visual { order: -1; }
.hero-phone { max-width: 300px; }
.hero-float-1, .hero-float-2 { display: none; }
}
/* ===== STATS BAR ===== */
.stats-bar {
background: white;
border-radius: var(--radius-lg);
padding: 40px;
box-shadow: var(--shadow-md);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: -50px;
position: relative;
z-index: 10;
}
.stat-item {
text-align: center;
}
.stat-number {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 2.25rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 500;
}
@media (max-width: 768px) {
.stats-bar {
grid-template-columns: repeat(2, 1fr);
padding: 24px;
gap: 24px;
}
}
/* ===== PROBLEM SECTION ===== */
.problem {
background: white;
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.section-badge {
margin-bottom: 16px;
}
.section-header h2 {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
margin-bottom: 16px;
}
.section-header p {
font-size: 1.125rem;
color: var(--text-light);
line-height: 1.7;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.problem-card {
background: var(--bg);
border-radius: var(--radius-lg);
padding: 32px;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
border: 1px solid transparent;
}
.problem-card:hover {
border-color: var(--alert);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.problem-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background: var(--alert-light);
color: var(--alert);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}
.problem-card h3 {
font-size: 1.125rem;
margin-bottom: 12px;
font-weight: 700;
}
.problem-card p {
font-size: 0.9375rem;
color: var(--text-light);
line-height: 1.6;
}
.problem-quote {
margin-top: 60px;
text-align: center;
padding: 40px;
background: var(--bg);
border-radius: var(--radius-lg);
border-left: 4px solid var(--alert);
}
.problem-quote blockquote {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 1.25rem;
font-weight: 600;
font-style: italic;
color: var(--text);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.problem-quote cite {
display: block;
margin-top: 16px;
font-size: 0.875rem;
color: var(--text-muted);
font-style: normal;
font-family: 'Inter', sans-serif;
}
@media (max-width: 768px) {
.problem-grid {
grid-template-columns: 1fr;
}
}
/* ===== SOLUTION / FEATURES ===== */
.solution {
position: relative;
}
.feature-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-bottom: 100px;
}
.feature-showcase:nth-child(even) .feature-visual {
order: -1;
}
.feature-number {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 4rem;
font-weight: 900;
color: var(--primary-light);
line-height: 1;
margin-bottom: 16px;
}
.feature-showcase h3 {
font-size: 1.75rem;
margin-bottom: 16px;
}
.feature-showcase > div > p {
font-size: 1.0625rem;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 24px;
}
.feature-list {
list-style: none;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
font-size: 0.9375rem;
color: var(--text-light);
}
.feature-list li .ph {
color: var(--secondary);
font-size: 1.25rem;
margin-top: 2px;
}
.feature-visual {
position: relative;
}
.feature-card-demo {
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
/* AI Demo */
.ai-demo-header {
background: var(--primary);
color: white;
padding: 16px 20px;
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.ai-demo-body {
padding: 24px;
}
.ai-message-original {
background: var(--alert-light);
border: 1px solid rgba(193,102,107,0.2);
border-radius: var(--radius-md);
padding: 16px;
margin-bottom: 16px;
position: relative;
}
.ai-message-label {
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--alert);
margin-bottom: 8px;
}
.ai-message-original p {
font-size: 0.9375rem;
color: var(--text);
}
.ai-arrow {
text-align: center;
color: var(--primary);
font-size: 1.5rem;
margin: 8px 0;
}
.ai-message-filtered {
background: var(--secondary-light);
border: 1px solid rgba(124,174,122,0.3);
border-radius: var(--radius-md);
padding: 16px;
}
.ai-message-filtered .ai-message-label {
color: var(--secondary);
}
.ai-message-filtered p {
font-size: 0.9375rem;
color: var(--text);
}
.ai-badge-safe {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 4px 12px;
background: var(--secondary);
color: white;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 700;
}
/* Calendar Demo */
.cal-demo-header {
background: var(--primary);
color: white;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.cal-demo-title {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 700;
}
.cal-demo-body {
padding: 20px;
}
.cal-demo-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
text-align: center;
margin-bottom: 12px;
}
.cal-demo-days span {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 600;
padding: 4px;
}
.cal-demo-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 600;
}
.cal-day.mama { background: var(--primary-light); color: var(--primary); }
.cal-day.tata { background: var(--secondary-light); color: #4A7A48; }
.cal-day.shared { background: var(--accent-light); color: #9A7A2E; }
.cal-day.empty { color: var(--text-muted); }
.cal-legend {
display: flex;
gap: 16px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.cal-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
color: var(--text-light);
}
.cal-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
/* Marketplace Demo */
.marketplace-card {
padding: 20px;
}
.specialist-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: var(--bg);
border-radius: var(--radius-md);
margin-bottom: 12px;
transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.specialist-item:hover {
background: white;
box-shadow: var(--shadow-md);
}
.specialist-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.specialist-info h4 {
font-size: 0.9375rem;
font-weight: 700;
margin-bottom: 2px;
}
.specialist-info p {
font-size: 0.8125rem;
color: var(--text-muted);
}
.specialist-rating {
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8125rem;
font-weight: 700;
color: var(--accent);
}
@media (max-width: 900px) {
.feature-showcase {
grid-template-columns: 1fr;
gap: 40px;
}
.feature-showcase:nth-child(even) .feature-visual {
order: 0;
}
}
/* ===== HOW IT WORKS ===== */
.how-it-works {
background: white;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
position: relative;
}
.steps-grid::before {
content: '';
position: absolute;
top: 40px;
left: 15%;
right: 15%;
height: 2px;
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
opacity: 0.3;
}
.step {
text-align: center;
position: relative;
}
.step-number {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 2rem;
font-weight: 900;
color: white;
position: relative;
z-index: 1;
}
.step:nth-child(1) .step-number { background: var(--primary); }
.step:nth-child(2) .step-number { background: var(--secondary); }
.step:nth-child(3) .step-number { background: var(--accent); }
.step h3 {
font-size: 1.25rem;
margin-bottom: 12px;
}
.step p {
font-size: 0.9375rem;
color: var(--text-light);
line-height: 1.6;
}
@media (max-width: 768px) {
.steps-grid {
grid-template-columns: 1fr;
}
.steps-grid::before { display: none; }
}
/* ===== PRICING ===== */
.pricing {
background: var(--bg);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
align-items: start;
}
.pricing-card {
background: white;
border-radius: var(--radius-lg);
padding: 36px 28px;
text-align: center;
border: 2px solid transparent;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.pricing-card.popular {
border-color: var(--primary);
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
.pricing-card.popular:hover {
transform: scale(1.05) translateY(-4px);
}
.pricing-popular-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: white;
padding: 4px 20px;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.pricing-name {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 8px;
}
.pricing-desc {
font-size: 0.8125rem;
color: var(--text-muted);
margin-bottom: 24px;
}
.pricing-price {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 3rem;
font-weight: 900;
color: var(--text);
line-height: 1;
margin-bottom: 4px;
}
.pricing-price span {
font-size: 1rem;
font-weight: 600;
color: var(--text-muted);
}
.pricing-period {
font-size: 0.8125rem;
color: var(--text-muted);
margin-bottom: 24px;
}
.pricing-features {
list-style: none;
text-align: left;
margin-bottom: 32px;
}
.pricing-features li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
font-size: 0.875rem;
color: var(--text-light);
}
.pricing-features li .ph {
color: var(--secondary);
font-size: 1.125rem;
margin-top: 1px;
}
.pricing-features li.disabled {
color: var(--text-muted);
opacity: 0.5;
}
.pricing-features li.disabled .ph {
color: var(--text-muted);
}
.pricing-btn {
width: 100%;
}
@media (max-width: 1000px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
.pricing-card.popular {
transform: scale(1);
}
}
@media (max-width: 600px) {
.pricing-grid {
grid-template-columns: 1fr;
}
}
/* ===== TESTIMONIALS ===== */
.testimonials {
background: white;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
background: var(--bg);
border-radius: var(--radius-lg);
padding: 32px;
position: relative;
}
.testimonial-card::before {
content: '\201C';
font-size: 4rem;
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
color: var(--primary);
opacity: 0.2;
position: absolute;
top: 16px;
left: 24px;
line-height: 1;
}
.testimonial-stars {
display: flex;
gap: 2px;
color: var(--accent);
font-size: 0.875rem;
margin-bottom: 16px;
}
.testimonial-text {
font-size: 0.9375rem;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 24px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
font-weight: 700;
}
.testimonial-name {
font-weight: 700;
font-size: 0.9375rem;
}
.testimonial-role {
font-size: 0.8125rem;
color: var(--text-muted);
}
@media (max-width: 768px) {
.testimonial-grid {
grid-template-columns: 1fr;
}
}
/* ===== COMMUNITY ===== */
.community {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
position: relative;
overflow: hidden;
}
.community::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
border-radius: 50%;
}
.community .section-header h2 {
color: white;
}
.community .section-header p {
color: rgba(255,255,255,0.8);
}
.community .badge {
background: rgba(255,255,255,0.15);
color: white;
}
.community-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.community-card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-lg);
padding: 32px;
text-align: center;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.community-card:hover {
background: rgba(255,255,255,0.15);
transform: translateY(-4px);
}
.community-card .ph {
font-size: 2.5rem;
margin-bottom: 20px;
display: block;
opacity: 0.9;
}
.community-card h3 {
font-size: 1.125rem;
margin-bottom: 12px;
}
.community-card p {
font-size: 0.9375rem;
color: rgba(255,255,255,.85);
line-height: 1.6;
}
@media (max-width: 768px) {
.community-features {
grid-template-columns: 1fr;
}
}
/* ===== SPECIALISTS ===== */
.specialists-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.spec-card {
background: white;
border-radius: var(--radius-lg);
padding: 32px 24px;
text-align: center;
border: 1px solid var(--border);
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.spec-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.spec-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.75rem;
}
.spec-card:nth-child(1) .spec-icon { background: var(--primary-light); color: var(--primary); }
.spec-card:nth-child(2) .spec-icon { background: var(--secondary-light); color: var(--secondary); }
.spec-card:nth-child(3) .spec-icon { background: var(--accent-light); color: var(--accent); }
.spec-card:nth-child(4) .spec-icon { background: var(--alert-light); color: var(--alert); }
.spec-card h3 {
font-size: 1.125rem;
margin-bottom: 8px;
}
.spec-card p {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 16px;
}
.spec-card .spec-price {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 800;
color: var(--primary);
font-size: 0.9375rem;
}
@media (max-width: 900px) {
.specialists-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.specialists-grid {
grid-template-columns: 1fr;
}
}
/* ===== FAQ ===== */
.faq {
background: white;
}
.faq-grid {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-question {
width: 100%;
background: none;
padding: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.0625rem;
font-weight: 600;
color: var(--text);
text-align: left;
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
transition: color 0.2s ease;
}
.faq-question:hover {
color: var(--primary);
}
.faq-question .ph {
font-size: 1.25rem;
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 16px;
}
.faq-item.active .faq-question .ph {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer-inner {
padding: 0 0 24px;
font-size: 0.9375rem;
color: var(--text-light);
line-height: 1.7;
}
.faq-item.active .faq-answer {
max-height: 300px;
}
/* ===== FINAL CTA ===== */
.final-cta {
background: var(--bg);
text-align: center;
}
.final-cta-card {
background: linear-gradient(135deg, var(--primary) 0%, #2D7A8F 50%, #3B8EA5 100%);
border-radius: var(--radius-xl);
padding: 80px 40px;
color: white;
position: relative;
overflow: hidden;
}
.final-cta-card::before {
content: '';
position: absolute;
top: -50%;
left: -20%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
border-radius: 50%;
}
.final-cta-card::after {
content: '';
position: absolute;
bottom: -30%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(124,174,122,0.15) 0%, transparent 70%);
border-radius: 50%;
}
.final-cta-card h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.final-cta-card p {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.final-cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.final-cta-card .btn-primary {
background: white;
color: var(--primary);
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.final-cta-card .btn-primary:hover {
background: var(--bg);
transform: translateY(-2px);
}
.final-cta-card .btn-secondary {
background: transparent;
color: white;
border-color: rgba(255,255,255,0.4);
}
.final-cta-card .btn-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: white;
}
/* ===== FOOTER ===== */
.footer {
background: var(--text);
color: rgba(255,255,255,0.7);
padding: 60px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 900;
font-size: 1.5rem;
color: white;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.footer-desc {
font-size: 0.875rem;
line-height: 1.7;
margin-bottom: 20px;
}
.footer h4 {
color: white;
font-size: 0.9375rem;
margin-bottom: 20px;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
font-size: 0.875rem;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: white;
}
.footer-bottom {
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8125rem;
}
.footer-social {
display: flex;
gap: 16px;
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.footer-social a:hover {
background: var(--primary);
color: white;
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
}
/* ===== COMPARISON TABLE ===== */
.comparison {
background: var(--bg);
}
.comparison-table {
width: 100%;
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
border-collapse: collapse;
}
.comparison-table thead {
background: var(--primary);
color: white;
}
.comparison-table th {
padding: 16px 20px;
text-align: left;
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-weight: 700;
font-size: 0.9375rem;
}
.comparison-table th:first-child {
text-align: left;
}
.comparison-table th:not(:first-child) {
text-align: center;
}
.comparison-table td {
padding: 14px 20px;
font-size: 0.875rem;
border-bottom: 1px solid var(--border);
}
.comparison-table td:not(:first-child) {
text-align: center;
}
.comparison-table .mostek-col {
background: var(--primary-light);
font-weight: 700;
color: var(--primary);
}
.comparison-table th.mostek-col {
background: #2D7A8F;
}
.comparison-table tbody tr:hover {
background: var(--bg);
}
.check-yes { color: var(--secondary); font-size: 1.25rem; }
.check-no { color: var(--text-muted); opacity: 0.3; font-size: 1.25rem; }
.check-partial { color: var(--accent); font-size: 1.25rem; }
@media (max-width: 768px) {
.comparison-table {
font-size: 0.8125rem;
}
.comparison-table th, .comparison-table td {
padding: 10px 8px;
}
}
/* ===== TRUST SECTION ===== */
.trust {
background: white;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.trust-item {
text-align: center;
padding: 24px;
}
.trust-item .ph {
font-size: 2.5rem;
color: var(--primary-dark);
margin-bottom: 16px;
display: block;
}
.trust-item h3 {
font-size: 1rem;
margin-bottom: 8px;
}
.trust-item p {
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.6;
}
@media (max-width: 768px) {
.trust-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* ===== FOR SPECIALISTS SECTION ===== */
.for-specialists {
background: linear-gradient(135deg, #2D3142 0%, #3d4157 100%);
color: white;
}
.for-specialists .section-header h2 { color: white; }
.for-specialists .section-header p { color: rgba(255,255,255,0.7); }
.spec-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.spec-benefit {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
padding: 32px;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.spec-benefit:hover {
background: rgba(255,255,255,0.12);
transform: translateY(-4px);
}
.spec-benefit .ph {
font-size: 2rem;
color: var(--accent);
margin-bottom: 16px;
display: block;
}
.spec-benefit h3 {
font-size: 1.125rem;
margin-bottom: 12px;
}
.spec-benefit p {
font-size: 0.9375rem;
color: rgba(255,255,255,0.78); /* 24.08: kolor zamiast opacity — pomiar po scrollu liczy elementy < 0,95 */
line-height: 1.6;
}
@media (max-width: 768px) {
.spec-benefits-grid {
grid-template-columns: 1fr;
}
}
/* ===== SPECIALIST CARDS (BOOKING) ===== */
.specialist-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.specialist-profile-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
border: 1px solid var(--border);
}
.specialist-profile-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.specialist-card-header {
height: 80px;
position: relative;
}
.specialist-card-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
position: absolute;
bottom: -36px;
left: 50%;
transform: translateX(-50%);
border: 4px solid white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.specialist-card-body {
padding: 44px 24px 24px;
text-align: center;
}
.specialist-card-body h3 {
font-size: 1.0625rem;
color: var(--text);
margin-bottom: 4px;
}
.specialist-card-type {
font-size: 0.8125rem;
color: var(--primary);
font-weight: 600;
margin-bottom: 8px;
}
.specialist-card-desc {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 12px;
}
.specialist-card-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 16px;
font-size: 0.875rem;
}
.specialist-card-rating .ph { color: var(--accent); }
.specialist-card-rating span { color: var(--text-muted); font-size: 0.8125rem; }
.specialist-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-bottom: 20px;
}
.specialist-tag {
font-size: 0.875rem;
padding: 4px 10px;
border-radius: 100px;
background: var(--bg-warm);
color: var(--text-muted);
}
.specialist-card-footer {
padding: 0 24px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.specialist-card-footer .btn {
width: 100%;
text-align: center;
font-size: 0.875rem;
padding: 10px 16px;
}
.specialist-card-price {
text-align: center;
font-size: 0.8125rem;
color: var(--text-muted);
}
.specialist-card-price strong {
color: var(--text);
}
@media (max-width: 1024px) {
.specialist-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.specialist-cards-grid { grid-template-columns: 1fr; }
}
/* ===== LEAD MAGNET (FREE PLANNER) ===== */
.lead-magnet {
background: linear-gradient(135deg, var(--primary) 0%, #2d7a94 100%);
color: white;
position: relative;
overflow: hidden;
}
.lead-magnet::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
}
.lead-magnet-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.lead-magnet-content h2 {
font-size: 2rem;
color: white;
margin-bottom: 16px;
}
.lead-magnet-content p {
font-size: 1.0625rem;
color: rgba(255,255,255,0.9);
line-height: 1.7;
margin-bottom: 24px;
}
.lead-magnet-list {
list-style: none;
padding: 0;
margin-bottom: 32px;
}
.lead-magnet-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 0.9375rem;
}
.lead-magnet-list li .ph {
font-size: 1.25rem;
color: var(--accent);
}
.lead-magnet-form {
display: flex;
gap: 12px;
}
.lead-magnet-form input {
flex: 1;
padding: 14px 20px;
border-radius: var(--radius-md);
border: 2px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.1);
color: white;
font-size: 1rem;
outline: none;
transition: border-color 0.3s;
}
.lead-magnet-form input::placeholder {
color: rgba(255,255,255,0.6);
}
.lead-magnet-form input:focus {
border-color: var(--accent);
}
.lead-magnet-form .btn {
white-space: nowrap;
background: var(--accent);
color: var(--text);
font-weight: 700;
}
.lead-magnet-form .btn:hover {
background: #c4982e;
}
.lead-magnet-visual {
position: relative;
}
.planner-mockup {
background: white;
border-radius: var(--radius-lg);
padding: 32px;
color: var(--text);
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
transform: rotate(2deg);
}
.planner-mockup-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 16px;
border-bottom: 2px solid var(--primary);
margin-bottom: 20px;
}
.planner-mockup-header .ph {
font-size: 1.5rem;
color: var(--primary-dark);
}
.planner-mockup-header h4 {
font-size: 1rem;
color: var(--text);
}
.planner-mockup-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 0.875rem;
}
.planner-mockup-row .ph {
color: var(--primary-dark);
font-size: 1.125rem;
}
.planner-mockup-badge {
margin-top: 16px;
text-align: center;
font-size: 0.875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.lead-magnet-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.planner-mockup { transform: none; }
.lead-magnet-form { flex-direction: column; }
}
/* ===== BLOG PREVIEW ===== */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.blog-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
color: inherit;
display: block;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.blog-card-image {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
}
.blog-card-body {
padding: 24px;
}
.blog-card-tag {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--primary);
margin-bottom: 8px;
}
.blog-card-body h3 {
font-size: 1.125rem;
line-height: 1.4;
margin-bottom: 12px;
color: var(--text);
}
.blog-card-body p {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 16px;
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.8125rem;
color: var(--text-muted);
}
.blog-card-meta .ph {
font-size: 0.875rem;
}
@media (max-width: 768px) {
.blog-grid { grid-template-columns: 1fr; }
}
/* ===== BEFORE/AFTER + ROI ===== */
.before-after-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
}
.ba-card {
padding: 40px;
border-radius: var(--radius-lg);
text-align: center;
}
.ba-before {
background: var(--alert-light);
border: 2px solid var(--alert);
}
.ba-after {
background: var(--secondary-light);
border: 2px solid var(--secondary);
}
.ba-card h3 {
font-size: 1.25rem;
margin-bottom: 24px;
}
.ba-stat {
margin-bottom: 16px;
}
.ba-stat-number {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 3rem;
font-weight: 900;
line-height: 1;
}
.ba-before .ba-stat-number { color: var(--alert); }
.ba-after .ba-stat-number { color: var(--secondary); }
.ba-stat-label {
font-size: 0.9375rem;
color: var(--text-muted);
margin-top: 4px;
}
.ba-arrow {
font-size: 2.5rem;
color: var(--primary);
}
.ba-roi {
margin-top: 40px;
background: white;
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-md);
text-align: center;
}
.ba-roi-headline {
font-size: 1.5rem;
font-weight: 800;
color: var(--text);
margin-bottom: 8px;
}
.ba-roi-sub {
font-size: 1rem;
color: var(--text-muted);
}
.ba-roi-sub strong { color: var(--primary); }
@media (max-width: 768px) {
.before-after-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.ba-arrow { transform: rotate(90deg); }
}
/* ===== ROI CALCULATOR ===== */
.calc-card {
background: white;
border-radius: var(--radius-lg);
padding: 48px;
box-shadow: var(--shadow-lg);
max-width: 640px;
margin: 0 auto;
}
.calc-input-group {
margin-bottom: 32px;
}
.calc-input-group label {
display: block;
font-size: 1.0625rem;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
}
.calc-slider-wrapper {
position: relative;
}
.calc-slider {
width: 100%;
height: 8px;
border-radius: 4px;
appearance: none;
background: var(--border);
outline: none;
}
.calc-slider::-webkit-slider-thumb {
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
box-shadow: 0 2px 8px rgba(59,142,165,0.4);
}
.calc-value {
text-align: center;
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 3.5rem;
font-weight: 900;
color: var(--primary);
margin: 16px 0 4px;
}
.calc-value-label {
text-align: center;
font-size: 0.9375rem;
color: var(--text-muted);
margin-bottom: 32px;
}
.calc-results {
background: var(--bg);
border-radius: var(--radius-md);
padding: 24px;
margin-bottom: 24px;
}
.calc-result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.calc-result-row:last-child { border-bottom: none; }
.calc-result-label {
font-size: 0.9375rem;
color: var(--text-muted);
}
.calc-result-value {
font-family: 'Nunito', 'Nunito Fallback', sans-serif;
font-size: 1.25rem;
font-weight: 800;
}
.calc-result-value.positive { color: var(--secondary); }
.calc-result-value.cost { color: var(--text); }
.calc-result-value.savings { color: var(--primary); font-size: 1.5rem; }
.calc-bottom-line {
text-align: center;
font-size: 0.9375rem;
color: var(--text-muted);
margin-top: 16px;
}
.calc-bottom-line strong { color: var(--primary); }
/* ===== TEAM / TRUST SECTION ===== */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 40px;
}
.team-card {
text-align: center;
padding: 32px 24px;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
}
.team-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 16px;
}
.team-card h3 {
font-size: 1.0625rem;
margin-bottom: 4px;
}
.team-card .team-role {
font-size: 0.8125rem;
color: var(--primary);
font-weight: 600;
margin-bottom: 12px;
}
.team-card p {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
}
.team-quote {
text-align: center;
max-width: 700px;
margin: 0 auto;
font-size: 1.125rem;
font-style: italic;
color: var(--text-light);
line-height: 1.7;
}
@media (max-width: 768px) {
.team-grid { grid-template-columns: 1fr; }
}
/* ===== MOBILE POLISH ===== */
@media (max-width: 768px) {
.hero { padding-top: 100px; padding-bottom: 60px; }
.hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); margin-bottom: 16px; }
.hero-subtitle { font-size: 1.05rem; margin-bottom: 28px; }
.section-header h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.section-header p { font-size: 0.95rem; }
.comparison-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table { min-width: 500px; }
.pricing-card { padding: 28px 20px; }
.pricing-price { font-size: 2.5rem; }
.stat-number { font-size: 1.75rem; }
.btn { padding: 14px 28px; font-size: 0.9375rem; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.faq-question { padding: 20px 0; font-size: 0.95rem; }
.blog-card-body h3 { font-size: 1rem; }
}
@media (max-width: 400px) {
.container { padding: 0 12px; }
.hero h1 { font-size: 1.5rem; }
.hero-subtitle { font-size: 0.95rem; }
.stats-bar { padding: 16px; gap: 16px; }
.stat-number { font-size: 1.5rem; }
.pricing-price { font-size: 2rem; }
.nav-logo-text { font-size: 1.125rem; }
}
/* ===== LISTA OCZEKUJĄCYCH + MOSTEK NA ŻYWO (24.08.2026) ===== */
.wl-form { margin-top: 8px; max-width: 560px; }
.wl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wl-row input[type="email"] { flex: 1 1 240px; min-height: 56px; padding: 0 18px; font-size: 16px; border: 2px solid #E8E4DE; border-radius: 14px; background: #fff; color: #2D3142; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.wl-row input[type="email"]:focus-visible { border-color: #2D7A8F; box-shadow: 0 0 0 4px rgba(59,142,165,.18); }
.wl-row .btn { flex: 0 0 auto; white-space: nowrap; }
.wl-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 0.875rem; line-height: 1.5; color: #5C5F6E; cursor: pointer; }
.wl-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: #2D7A8F; flex: none; }
.wl-consent a { color: #2D7A8F; text-decoration: underline; }
.wl-consent--light, .wl-consent--light a { color: rgba(255,255,255,.85); }
.wl-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.wl-status[data-state="ok"] { color: #4A7A48; }
.wl-status[data-state="err"] { color: #C1666B; }
.wl-form--final .wl-status[data-state="ok"] { color: #fff; }
.wl-form--final .wl-status[data-state="err"] { color: #FFD9DB; }
.wl-form.is-done .wl-row, .wl-form.is-done .wl-consent { opacity: .45; pointer-events: none; }
.wl-secondary { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: #2D7A8F; text-decoration: none; }
.wl-secondary:hover { text-decoration: underline; }
.wl-form--final { margin: 22px auto 0; }
.wl-btn-light { background: #fff; color: #2D7A8F; border: 0; }
.wl-btn-light:hover { background: #F7F3EE; }
.final-cta-count { margin: 0 0 6px; font-weight: 700; opacity: .92; }
.demo { background: #F7F3EE; }
.demo-app { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid #E8E4DE; border-radius: 24px; padding: 28px; box-shadow: 0 24px 60px -40px rgba(45,49,66,.35); }
.demo-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.demo-tab { padding: 10px 16px; border: 1.5px solid #E8E4DE; border-radius: 999px; background: #fff; color: #2D3142; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .15s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.demo-tab:hover { border-color: #3B8EA5; }
.demo-tab.is-active { background: #2D3142; border-color: #2D3142; color: #fff; }
.demo-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.demo-col { border-radius: 18px; padding: 22px; min-height: 190px; display: flex; flex-direction: column; gap: 12px; transition: background .3s ease, border-color .3s ease; }
.demo-col--zle { background: #FFF3EF; border: 1.5px solid #F1C9C4; }
.demo-col--dobre { background: #FAFCFB; border: 1.5px dashed #CFE5D8; transition: background .35s ease, border-color .35s ease; }
.demo-stage[data-state="calm"] .demo-col--dobre, .demo-stage[data-state="done"] .demo-col--dobre { background: #F0F7F4; border-style: solid; }
.demo-label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5C5F6E; }
.demo-col--zle .demo-label { color: #C1666B; }
.demo-col--dobre .demo-label { color: #4A7A48; }
.demo-msg { margin: 0; font-size: 17px; line-height: 1.6; color: #2D3142; min-height: 3.2em; }
.demo-child { margin-top: auto; padding-top: 12px; border-top: 1px dashed #CFE5D8; font-size: 14px; color: #5C5F6E; display: flex; gap: 8px; align-items: flex-start; }
.demo-child em { font-style: normal; color: #2D3142; font-weight: 700; }
.demo-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-width: 200px; }
.demo-go { white-space: nowrap; }
.demo-working { display: none; gap: 6px; }
.demo-working span { width: 8px; height: 8px; border-radius: 50%; background: #3B8EA5; animation: demoDot 1s ease-in-out infinite; }
.demo-working span:nth-child(2) { animation-delay: .15s; } .demo-working span:nth-child(3) { animation-delay: .3s; }
.demo-stage[data-state="working"] .demo-working { display: flex; }
@keyframes demoDot { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: 1; } }
.demo-note { margin: 18px 0 0; text-align: center; font-size: 0.875rem; color: #5C5F6E; }
@media (max-width: 860px) {
.demo-stage { grid-template-columns: 1fr; }
.demo-mid { min-width: 0; padding: 4px 0; }
.demo-app { padding: 18px; border-radius: 18px; }
.wl-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .demo-working span { animation: none; } }
/* Nagłówek hero to „największa treść” (LCP) — maluje się od razu, bez animacji wejścia (28.08.2026) */
.hero h1 { animation: none; opacity: 1; transform: none; }
/* ===== RUCH NATYWNY CSS (28.08.2026) =====
Sekcje pojawiają się sterowane przewijaniem przez animation-timeline: view() — zero JS, zero ukrywania do czasu skryptu.
Przeglądarki bez wsparcia (@supports) zostają przy IntersectionObserver z index.html. VISUAL-ARSENAL: efekt „scroll-reveal”. */
@supports (animation-timeline: view()) {
html.js .animate-on-scroll:not(.visible) { opacity: 1; transform: none; }
html.js .animate-on-scroll { transition: none; animation: mostek-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
@keyframes mostek-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .animate-on-scroll { animation: none; } }
}
/* Okno Plannera na telefonie: nie wyższe niż realny ekran (dvh liczy pasek adresu Safari/Chrome) */
.pl-modal__card { max-height: 92dvh; overflow: auto; }
/* Karty reagują na szerokość swojego kontenera, nie ekranu (@container) */
.problem-grid, .pricing-grid, .testimonial-grid, .specialist-cards-grid { container-type: inline-size; }
@container (max-width: 360px) { .problem-card, .pricing-card, .testimonial-card, .specialist-profile-card { padding: 24px 20px; } }
/* ===== MOBILE + DOSTĘPNOŚĆ (24.08.2026) ===== */
/* 28.08.2026 — DESIGN.md: body 16 px na mobile, tekst pomocniczy ≥ 14 px, cel dotyku ≥ 44 px (48 dla głównych) */
@media (max-width: 768px) { body { font-size: 16px; } }
@media (pointer: coarse) {
.btn, .nav-links a, .nav-mobile-toggle, .faq-question, .footer-links a, .mm-fab, .pl-share__btn, .blog-card-meta a, .hero-actions a, .pricing-card .btn { min-height: 44px; }
.btn-primary, .btn-lg, .hero-form .btn, .final-cta .btn, .pl-form__row .btn { min-height: 48px; }
.footer-links a, .nav-links a { display: inline-flex; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.wl-consent input, .pl-form__consent input { width: 22px; height: 22px; margin-top: 0; }
.wl-consent, .pl-form__consent { min-height: 44px; align-items: center; }
.faq-question { min-height: 48px; }
}
img, svg, video { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #2D7A8F; outline-offset: 3px; border-radius: 6px; }
input, textarea, select { font-size: max(16px, 1em); }
button { font-size: max(16px, 1em); }
@supports (padding: env(safe-area-inset-left)) {
.container { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.footer { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
.hero h1 { font-size: clamp(2.2rem, 11vw, 3.2rem); }
.demo-tab { width: 100%; text-align: left; }
}
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .comparison-table { min-width: 560px; }
/* tabela porównawcza: przewija się wewnątrz kontenera, strona nie rozpycha się w poziomie */
.comparison-table-wrapper, .table-scroll { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table { width: 100%; min-width: 560px; }
/* siatka/flex nie pozwala dziecku skurczyć się poniżej treści — min-width:0 odblokowuje przewijanie w kontenerze */
.comparison .container, .comparison-table-wrapper, .table-scroll { min-width: 0; width: 100%; box-sizing: border-box; }
.comparison { overflow-x: clip; }
.comparison-table-wrapper.animate-on-scroll, .comparison-table-wrapper, .table-scroll { overflow-x: auto !important; overflow-y: hidden; }
.stats-source { max-width: 1200px; margin: 10px auto 0; padding: 0 24px; font-size: 0.875rem; color: #7A7D8A; text-align: center; }
/* ===== PLANNER — okno zapisu i formularz lead magnetu (24.08.2026, planner-popup.js) ===== */
.pl-modal{position:fixed;inset:0;z-index:1200;background:rgba(45,49,66,.62);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.pl-modal[hidden]{display:none}
body.pl-modal-open{overflow:hidden}
.pl-modal__card{position:relative;width:100%;max-width:760px;display:grid;grid-template-columns:240px minmax(0,1fr);background:var(--bg-white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);animation:plPop .32s cubic-bezier(.4,0,.2,1)}
@keyframes plPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.pl-modal__close{position:absolute;top:12px;right:14px;z-index:2;width:36px;height:36px;border:0;border-radius:var(--radius-full);background:var(--bg-warm);color:var(--text-light);font-size:22px;line-height:1;cursor:pointer}
.pl-modal__close:hover{background:var(--border);color:var(--text)}
.pl-modal__cover{background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.14),transparent 42%),#245F70;color:#fff;padding:28px 22px;display:flex;flex-direction:column;justify-content:flex-end;min-height:100%}
.pl-modal__cover-title{font:800 1.5rem/1.1 'Nunito',Arial,sans-serif}
.pl-modal__cover-meta{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:10px;font-weight:700}
.pl-modal__body{padding:36px 34px 28px}
.pl-modal__eyebrow{font:700 .74rem/1 'Nunito',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:12px}
.pl-modal__title{font-size:clamp(1.4rem,3vw,1.8rem);line-height:1.15;margin:0 0 12px;color:var(--text)}
.pl-modal__text{color:var(--text-light);font-size:.95rem;line-height:1.6;margin:0 0 20px}
.pl-modal__dismiss{display:block;margin:16px auto 0;background:none;border:0;color:var(--text-muted);font-size:.85rem;cursor:pointer;text-decoration:underline}
@media(max-width:640px){.pl-modal__card{grid-template-columns:1fr}.pl-modal__cover{min-height:0;padding:18px 20px;flex-direction:row;align-items:center;gap:14px}.pl-modal__cover-meta{margin:0}.pl-modal__body{padding:24px 20px 20px}}
/* formularz (okno + sekcja na stronie głównej) */
.pl-form__row{display:flex;gap:10px;flex-wrap:wrap}
.pl-form__row .btn{white-space:nowrap}
.pl-form__input{flex:1;min-width:200px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);font:inherit;font-size:1rem;background:var(--bg-white);color:var(--text)}
.pl-form__input:focus{outline:3px solid rgba(59,142,165,.35);border-color:var(--primary)}
.pl-form__consent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:.8rem;line-height:1.5;color:var(--text-light);cursor:pointer}
.pl-form__consent input{margin-top:3px;accent-color:var(--primary);flex:none}
.pl-form__consent a{color:inherit;text-decoration:underline}
.pl-form__status{margin:10px 0 0;font-size:.85rem}
.pl-form__status[data-state="err"]{color:var(--alert)}
.pl-form__status[data-state="ok"]{color:var(--secondary)}
.pl-form__note{margin:10px 0 0;font-size:.78rem;color:var(--text-muted)}
.pl-form__done{margin-top:6px;padding:14px 16px;background:var(--secondary-light);border:1px solid rgba(124,174,122,.5);border-radius:var(--radius-md);font-size:.95rem;color:var(--text)}
.pl-form__done a{color:var(--primary-dark);font-weight:700}
/* wariant na ciemnym tle sekcji lead magnet */
.lead-magnet .pl-form__consent,.lead-magnet .pl-form__note{color:rgba(255,255,255,.72)}
.lead-magnet .pl-form__status[data-state="ok"]{color:#CFE8CD}
.lead-magnet .pl-form__status[data-state="err"]{color:#F5C6C9}
.lead-magnet .pl-form__done{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.lead-magnet .pl-form__done a{color:var(--accent)}
/* lead magnet: formularz w dwóch wierszach (pole+przycisk / zgoda) i makieta jako link (24.08.2026) */
.lead-magnet-form{flex-direction:column;gap:0}
.lead-magnet-form .pl-form__row{display:flex;gap:12px;flex-wrap:wrap}
.lead-magnet-form .pl-form__row input{flex:1;min-width:220px}
a.planner-mockup{display:block;color:var(--text);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
a.planner-mockup:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--shadow-xl)}
.footer-eco{display:block;margin-top:8px;font-size:.8rem;color:var(--text-muted)}
.footer-eco a{color:inherit;text-decoration:underline}
/* ===== MOSTEK NA ŻYWO v2 — ramka telefonu + „co zmienił Mostek" (24.08.2026, D6) ===== */
.demo-stage{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
.demo-phone{background:#1F2333;border-radius:34px;padding:12px;box-shadow:0 30px 70px -30px rgba(45,49,66,.6),inset 0 0 0 2px rgba(255,255,255,.06)}
.demo-phone__bar{display:flex;align-items:center;gap:10px;padding:10px 16px 12px;color:rgba(255,255,255,.75);font-size: 0.875rem}
.demo-phone__dot{width:10px;height:10px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 4px rgba(124,174,122,.25)}
.demo-phone__to{font-weight:600;color:#fff}.demo-phone__to b{font-weight:800}
.demo-phone__time{margin-left:auto;font-variant-numeric:tabular-nums}
.demo-thread{background:var(--bg);border-radius:24px;padding:18px 14px 16px;display:flex;flex-direction:column;gap:12px;min-height:420px}
.demo-bubble{max-width:92%;border-radius:18px;padding:12px 14px;position:relative;transition:opacity .35s ease,transform .35s ease}
.demo-bubble__meta{display:flex;align-items:center;gap:6px;font-size: 0.875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.demo-bubble--zle{align-self:flex-end;background:#FFF3EF;border:1.5px solid #F1C9C4;border-bottom-right-radius:6px}
.demo-bubble--zle .demo-bubble__meta{color:var(--alert)}
.demo-bubble--dobre{align-self:flex-end;background:var(--primary-dark);color:#fff;border-bottom-right-radius:6px;opacity:0;transform:translateY(8px)}
.demo-bubble--dobre .demo-bubble__meta{color:#CFE8CD}
.demo-bubble--dobre .demo-msg{color:#fff}
.demo-stage[data-state="calm"] .demo-bubble--dobre,.demo-stage[data-state="done"] .demo-bubble--dobre{opacity:1;transform:none}
.demo-stage[data-state="calm"] .demo-bubble--zle,.demo-stage[data-state="done"] .demo-bubble--zle{opacity:.55;text-decoration:line-through;text-decoration-color:rgba(193,102,107,.5)}
.demo-stage .demo-msg{font-size:15px;line-height:1.55;min-height:0}
.demo-thread .demo-mid{min-width:0;padding:2px 0;align-self:center}
.demo-thread .demo-child{display:block;align-self:stretch;margin-top:auto;background:#fff;border:1px dashed #CFE5D8;border-radius:14px;padding:10px 12px;opacity:0;transition:opacity .4s ease;line-height:1.5}
.demo-thread .demo-child .ph{margin-right:4px}
.demo-stage[data-state="done"] .demo-child{opacity:1}
.demo-side{background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px;min-height:200px;position:sticky;top:96px}
.demo-side__label{display:flex;align-items:center;gap:8px;font-size: 0.875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:12px}
.demo-side__list{margin:0;padding:0 0 0 22px;min-height:96px;color:var(--text)}
.demo-side__list li{margin:0 0 10px;line-height:1.5;animation:demoIn .4s ease both}
.demo-side__list:empty::before{content:"Kliknij „Przepuść przez Mostek” — pokażemy trzy rzeczy, które zmienił filtr.";display:block;color:var(--text-muted);font-size:.9rem;margin-left:-22px}
@keyframes demoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.demo-side__planner{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--primary-light);color:var(--primary-dark);text-decoration:none;font-weight:600;font-size:.92rem}
.demo-side__planner:hover{background:#DCEDF2}
.demo-side__planner span{flex:1}
@media(max-width:900px){.demo-stage{grid-template-columns:1fr}.demo-side{position:static}.demo-phone{border-radius:28px}.demo-thread{min-height:0}}
@media(prefers-reduced-motion:reduce){.demo-bubble,.demo-child,.demo-side__list li{transition:none;animation:none}}
/* okno: warianty okładki i siatka pól (24.08.2026, zadanie 13 — pop-upy zamiast formularzy w treści) */
.pl-modal__cover--spec{background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.14),transparent 42%),#4A7A48}
.pl-modal__cover--wl{background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.16),transparent 42%),#2D3142}
.pl-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pl-form__grid label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--text)}
.pl-form__grid-full{grid-column:1/-1}
.pl-form__grid input,.pl-form__grid select{padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius-md);font:inherit;font-size:1rem;background:var(--bg-white);color:var(--text)}
.pl-form__grid input:focus,.pl-form__grid select:focus{outline:3px solid rgba(59,142,165,.35);border-color:var(--primary)}
.pl-form:has(.pl-form__grid) .pl-form__consent{margin-top:14px}
.pl-form:has(.pl-form__grid)::after{content:"";display:block}
.specialist-cta{margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px 40px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);scroll-margin-top:96px}
.specialist-cta h3{font-size:1.5rem;margin:0 0 6px}.specialist-cta p{margin:0;color:var(--text-light)}
.specialist-cta .btn{white-space:nowrap}
.final-cta-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:28px}
.final-cta-actions .wl-secondary{color:rgba(255,255,255,.85)}
@media(max-width:640px){.pl-form__grid{grid-template-columns:1fr}.specialist-cta{flex-direction:column;align-items:flex-start;padding:24px 22px}}
/* „Podaj dalej" po pobraniu (24.08.2026, prezent D4) */
.pl-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed rgba(45,49,66,.15);font-size:.85rem;color:var(--text-light)}
.pl-share span{flex-basis:100%}
.pl-share__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--radius-full);background:var(--bg-white);border:1px solid var(--border);color:var(--text)!important;font-weight:600;font-size:.82rem;text-decoration:none!important}
.pl-share__btn:hover{border-color:var(--primary);color:var(--primary-dark)!important}
.lead-magnet .pl-share{border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
/* ===== WSPÓŁTWÓRZ MOSTEK (24.08.2026) — pasek fazy, sekcja seed, okno 4 kroków, dyskretny przycisk =====
Arsenał: kroki okna = efekt 13 FORM STATE TRANSITION; przycisk pływający = nowy element (brak odpowiednika,
koszt ~400 B), właściciel: web-builder, pomiar: GA4 modal_open{reason:fab}. */
.dev-bar{background:var(--bg-white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:28px}
.dev-bar__in{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--text-light)}
.dev-bar__dot{width:9px;height:9px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 4px rgba(124,174,122,.22);flex:none}
.dev-bar__in a{color:var(--primary-dark);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(59,142,165,.35)}
.dev-bar__in a:hover{border-bottom-color:var(--primary-dark)}
.co{background:var(--bg-white)}
.co-road{list-style:none;padding:0;margin:8px 0 44px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.co-road::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--border)}
.co-road::after{content:"";position:absolute;left:0;width:12%;top:9px;height:2px;background:var(--secondary)}
.co-stone{position:relative;padding:32px 10px 0 0}
.co-stone__dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg-white);border:3px solid var(--border);box-sizing:border-box}
.co-stone.is-now .co-stone__dot{background:var(--secondary);border-color:var(--secondary);box-shadow:0 0 0 6px rgba(124,174,122,.22);animation:coPulse 2.4s ease-in-out infinite}
@keyframes coPulse{0%,100%{box-shadow:0 0 0 6px rgba(124,174,122,.22)}50%{box-shadow:0 0 0 11px rgba(124,174,122,.10)}}
@media(prefers-reduced-motion:reduce){.co-stone.is-now .co-stone__dot{animation:none}}
.co-stone__when{display:block;font:700 .7rem/1 'Nunito',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.co-stone.is-now .co-stone__when{color:var(--secondary)}
.co-stone h3{font-size:1.05rem;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.co-stone h3 .ph{color:var(--primary-dark);font-size:1.2rem}
.co-stone.is-now h3 .ph{color:var(--secondary)}
.co-stone p{font-size:.875rem;color:var(--text-muted);line-height:1.55;margin:0}
.co-stone p [data-waitlist-count]{color:var(--text);font-weight:600}
@media(max-width:980px){.co-road{grid-template-columns:1fr;gap:26px;padding-left:34px}.co-road::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}.co-road::after{left:9px;top:0;width:2px;height:12%}.co-stone{padding:0}.co-stone__dot{left:-34px;top:2px}}
.co-doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.co-door{position:relative;padding:34px 32px;border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--bg-white);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:12px}
.co-door__eyebrow{font:700 .72rem/1 'Nunito',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.co-door h3{font-size:1.35rem;line-height:1.2;margin:0}
.co-door p{color:var(--text-light);line-height:1.6;margin:0;flex:1}
.co-door .btn{align-self:flex-start}
.co-door--inv{background:linear-gradient(160deg,#245F70,#2D3142);color:#fff;border:0}
.co-door--inv h3{color:#fff}
.co-door--inv p{color:rgba(255,255,255,.85)}
.co-door--inv .btn{background:var(--accent);color:var(--text);border-color:var(--accent)}
.co-door--inv .btn:hover{background:#E4BC5C}
.co-proof{margin:28px auto 0;max-width:640px;text-align:center;font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:8px}
.co-proof .ph{color:var(--secondary);font-size:1.1rem}
@media(max-width:640px){.co-doors{grid-template-columns:1fr}.co-door{padding:26px 22px}}
/* okno: kroki */
.pl-modal__cover--co{background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.14),transparent 42%),#2D3142}
.pl-steps{display:flex;gap:6px;margin:0 0 18px}
.pl-steps i{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background .2s}
.pl-steps i.is-on{background:var(--primary)}
.pl-step[hidden]{display:none}
.pl-step.enter{animation:plStepIn .22s ease-out both}
@keyframes plStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pl-step.enter{animation:none}}
.pl-types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-type{position:relative;display:block;padding:14px 14px 12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;background:var(--bg-white);transition:border-color .15s,box-shadow .15s}
.pl-type input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pl-type b{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--text)}
.pl-type b .ph{color:var(--primary-dark);font-size:1.15rem}
.pl-type small{display:block;margin-top:4px;font-size:.78rem;line-height:1.4;color:var(--text-muted)}
.pl-type:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,142,165,.18)}
.pl-type:has(input:focus-visible){outline:3px solid rgba(59,142,165,.35)}
.pl-type--hidden{display:none}
.pl-form__grid textarea{padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius-md);font:inherit;font-size:1rem;background:var(--bg-white);color:var(--text);min-height:120px;resize:vertical}
.pl-form__grid textarea:focus{outline:3px solid rgba(59,142,165,.35);border-color:var(--primary)}
.pl-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.pl-nav__back{background:none;border:0;color:var(--text-muted);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;padding:6px 0}
.pl-ctx[hidden]{display:none}
.pl-coauthor{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-md);background:var(--accent-light);border:1px solid rgba(212,168,67,.45);font-size:.82rem;color:var(--text)}
@media(max-width:640px){.pl-types{grid-template-columns:1fr}.pl-modal{overflow-y:auto;align-items:flex-start;padding:12px}.pl-modal__card{margin:auto 0}}
/* dyskretny przycisk: lewy dół, po minięciu sekcji Planner, znika przy otwartym oknie */
.mm-fab{position:fixed;left:18px;bottom:18px;z-index:1100;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-full);background:var(--bg-white);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-lg);font:600 .85rem/1 inherit;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s}
.mm-fab .ph{color:var(--primary-dark);font-size:1.1rem}
.mm-fab.is-on{opacity:1;transform:none;pointer-events:auto}
.mm-fab:hover{border-color:var(--primary);color:var(--primary-dark)}
body.pl-modal-open .mm-fab{opacity:0;pointer-events:none}
@media(max-width:640px){.mm-fab{padding:12px;bottom:14px;left:14px}.mm-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.pl-form[data-fbstep]:not([data-fbstep="4"]) .pl-form__consent{display:none}
/* ===== /inwestorzy/ — pitch seed (24.08.2026, prezent po TAK). Szczyt emocji: żywe demo (efekt 14). ===== */
.inv-hero{background:radial-gradient(circle at 85% 10%,rgba(59,142,165,.35),transparent 45%),linear-gradient(160deg,#1F2333,#2D3142 55%,#245F70);color:#fff;padding:140px 0 72px}
.inv-hero__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center}
.inv-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 .74rem/1 'Nunito',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.inv-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;margin:0 0 20px;letter-spacing:-.01em}
.inv-pitch{font-size:1.1rem;line-height:1.65;color:rgba(255,255,255,.85);max-width:640px;margin:0 0 26px}
.inv-hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.inv-btn-gold{background:var(--accent);color:var(--text);border-color:var(--accent)}
.inv-btn-gold:hover{background:#E4BC5C;color:var(--text)}
.inv-btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.inv-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.inv-hero__note{margin:18px 0 0;font-size:.85rem;color:rgba(255,255,255,.7);display:flex;gap:8px;align-items:center}
.inv-hero__note .ph{color:var(--secondary);font-size:1.1rem}
.inv-hero__mission{display:flex;flex-direction:column;gap:4px;font:900 clamp(2rem,4vw,3.2rem)/1.05 'Nunito',Arial,sans-serif;color:rgba(255,255,255,.92);text-align:right}
.inv-hero__mission .is-accent{color:var(--accent)}
.inv-stats{margin-top:-36px}
.inv-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.inv-card{padding:30px 26px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.inv-card__ic{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:var(--primary-light);color:var(--primary-dark);margin-bottom:16px}
.inv-card h3{font-size:1.15rem;margin:0 0 8px}
.inv-card p{color:var(--text-light);line-height:1.6;margin:0}
.inv-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.inv-split h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:6px 0 18px}
.inv-trak{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.inv-trak li{display:flex;gap:12px;align-items:flex-start}
.inv-trak li>.ph{color:var(--secondary);font-size:1.35rem;flex:none;margin-top:2px}
.inv-trak strong{display:block;font-size:1rem}
.inv-trak span{color:var(--text-muted);font-size:.9rem;line-height:1.5}
.inv-live{margin:20px 0 0;font-size:.9rem;color:var(--text-muted)}
.inv-live a{color:var(--primary-dark);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(59,142,165,.35)}
.inv-model{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-md)}
.inv-model__row{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.inv-model__row .ph{color:var(--primary-dark);font-size:1.5rem;flex:none;margin-top:2px}
.inv-model__row p{margin:0;color:var(--text-light);line-height:1.6}
.inv-model__math{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;margin-top:22px;padding-top:20px;border-top:1px dashed var(--border);text-align:center}
.inv-model__math span{font:800 1.35rem/1 'Nunito',Arial,sans-serif;color:var(--primary-dark)}
.inv-model__math em{display:block;font-style:normal;font-size:.72rem;color:var(--text-muted);margin-top:4px;grid-row:2}
.inv-vision{margin-top:8px;padding:36px 38px;border-radius:var(--radius-xl);background:linear-gradient(160deg,#245F70,#2D3142);color:#fff;box-shadow:var(--shadow-lg)}
.inv-vision h3{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 14px}
.inv-vision p{color:rgba(255,255,255,.85);line-height:1.65;margin:0 0 12px;max-width:760px}
.inv-vision__bridge{font-weight:600;color:#fff!important}
.inv-why{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.inv-why li{padding:14px 16px;border-radius:var(--radius-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.9)}
.inv-why li b{display:block;color:var(--accent);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.inv-split--story p{color:var(--text-light);line-height:1.7}
.inv-founder{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-sm)}
.inv-founder__links a{color:var(--primary-dark);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(59,142,165,.35)}
.inv-ask .final-cta-count{margin-top:22px;font-style:italic;opacity:.9}
@media(max-width:980px){.inv-hero__in,.inv-split,.inv-grid-3{grid-template-columns:1fr}.inv-hero__mission{text-align:left;flex-direction:row;flex-wrap:wrap;gap:0 12px;font-size:1.4rem}.inv-why{grid-template-columns:1fr}.inv-model__math{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.inv-hero{padding:120px 0 56px}.inv-vision{padding:26px 22px}.inv-model{padding:24px 20px}.inv-stats{margin-top:0}}
.co-door__more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:none}
.co-door__more:hover{text-decoration:underline}
/* /inwestorzy/ — skala poza Polską (25.08.2026, po fact-checku) */
.inv-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 6px}
.inv-scale div{padding:14px 16px;border-radius:var(--radius-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.inv-scale span{display:block;font:800 1.5rem/1.1 'Nunito',Arial,sans-serif;color:var(--accent)}
.inv-scale em{display:block;font-style:normal;font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.85);margin-top:6px}
.inv-scale__note{font-size:.82rem!important;color:rgba(255,255,255,.7)!important;margin:0 0 4px!important}
@media(max-width:980px){.inv-scale{grid-template-columns:1fr}}