*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Jasny motyw (inspiracja: czytelny marketing B2B jak ramp.com — biel, kontrast, spokojny header) */
  --background: 210 33% 99%;
  --foreground: 222 47% 11%;
  --primary: 190 100% 36%;
  --card: 210 40% 100%;
  --muted: 215 16% 42%;
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(15, 23, 42, 0.08);
  --neon-glow: 0 8px 30px rgba(15, 23, 42, 0.06);
  --page-pad: clamp(20px, 4vw, 64px);
  --layout-max: 1460px;
  --font-prose: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --ramp-line: rgba(15, 23, 42, 0.06);
  /* Głęboki ciemny niebieski — overscroll i góra gradientu */
  --hero-canvas: var(--text-main);
  /* Wysokość promo bara — usunięty */
  --promo-bar-height: 0px;
  /* Niebo hero — krótsze na życzenie */
  --hero-gradient-height: min(90svh, 1000px);

  /* Stripe-inspired palette */
  --bg-base: #ffffff;
  --bg-subtle: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --color-primary: #3b82f6;
  --color-primary-dark: #1e1b4b;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --border-subtle: rgba(15, 23, 42, 0.06);
  --shadow-subtle: 0 10px 30px rgba(15, 23, 42, 0.03);

  /* Golden ratio typography scale */
  --text-xs: 0.618rem; /* ~10px */
  --text-sm: 0.809rem; /* ~13px */
  --text-base: 1rem; /* 16px */
  --text-md: 1.309rem; /* ~21px */
  --text-lg: 1.618rem; /* ~26px */
  --text-xl: 2.618rem; /* ~42px */
  --text-xxl: 4.236rem; /* ~68px */

  /* Golden ratio spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;
  --space-2xl: 52px;
  --space-3xl: 56px;
  --space-4xl: 80px;
}

/* Unified Spacing & Styling Utility Classes (Stripe / Golden Ratio) */
.sec-pad-sm { padding: var(--space-xl) 0 !important; }
.sec-pad-md { padding: var(--space-3xl) 0 !important; }
.sec-pad-lg { padding: var(--space-4xl) 0 !important; }

.sec-border-top { border-top: 1px solid var(--border-subtle) !important; }
.sec-border-bottom { border-bottom: 1px solid var(--border-subtle) !important; }

.bg-base { background: var(--bg-base) !important; color: var(--text-main) !important; }
.bg-subtle { background: var(--bg-subtle) !important; color: var(--text-main) !important; }
.bg-white { background: #ffffff !important; color: var(--text-main) !important; }

/* Section headings */
.section-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-main) !important;
  margin-bottom: var(--space-lg) !important;
  text-transform: lowercase !important;
}
@media (max-width: 768px) {
  .section-title {
    font-size: var(--text-lg) !important;
  }
}

.section-subtitle {
  font-family: var(--font-prose) !important;
  font-size: var(--text-base) !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
  margin-bottom: var(--space-xl) !important;
}

.section-label {
  font-family: var(--font-display) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--space-md) !important;
  display: inline-block !important;
}

/* Unified Premium Card styling */
.card-premium {
  background: #ffffff !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  padding: var(--space-xl) !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}
.card-premium:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

html {
  scroll-padding-top: calc(72px + var(--promo-bar-height));
  background-color: var(--hero-canvas);
  /* Stały tor przewijania — pasek nie znika przy modalu (bez overflow:hidden na html), brak skoku layoutu */
  overflow-y: scroll;
}
html, body { overflow-x: clip; position: relative; width: 100%; min-height: 100%; -webkit-font-smoothing: antialiased; }
body.theme-light { font-family: var(--font-prose); background: hsl(var(--background)); color: hsl(var(--foreground)); line-height: 1.6; }

body.theme-light .footer-logo svg g { fill: var(--text-main) !important; }
body.theme-light .navbar--light-bg .nav-logo svg g { fill: var(--text-main) !important; }
.navbar--dark-bg .nav-logo svg g { fill: #ffffff !important; }

h1, h2, h3, h4, h5, h6,
.section-heading,
.light-pillars-title,
.feat-modal__title {
  font-family: var(--font-prose);
  letter-spacing: -0.04em;
}

.section-label,
.nav-logo,
.bento-graph-label,
.bento-graph-value,
.bento-stat-val,
.bento-stat-label,
.bento-stat-context,
.comp-tag,
.comp-metric-label,
.comp-metric-value,
.stat-hero-number,
.stat-hero-label,
.stat-hero-tag,
.stat-number,
.stat-label,
.stat-context,
.mtr-rank,
.mtr-time,
.mtr-title,
.brand-item,
.social-proof-tagline,
.social-proof-logo,
.light-pillars-kicker,
.light-pillars-logo,
.roi-callout .roi-val,
.roi-callout .roi-label,
.footer-brand .footer-tagline,
.footer-watermark,
.comp-compare-kicker,
.cmp-table thead th,
.cmp-cat td,
.cmp-brand-lockup,
.cmp-headline-num,
.cmp-kpi-label,
.cmp-kpi-val,
.faq-category-title,
.faq-item summary,
.pricing-tier-title,
.pricing-price,
.pricing-price-suffix {
  font-family: var(--font-display);
}

.container { width: 100%; max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* PROMO BAR — zaktualizowany na niebieski, brak zieleni */
.promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px var(--page-pad);
  background: var(--color-primary);
  border-bottom: none;
  box-shadow: none;
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s;
  visibility: visible;
}
body.promo-collapsed .promo-bar {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}
.promo-bar__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.promo-bar__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-main);
  font-weight: 600;
}
.promo-bar__text strong { font-weight: 700; color: var(--text-main); }
.promo-bar__link {
  display: inline;
  margin-left: 0.25em;
  color: var(--text-main);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.promo-bar__link:hover { color: var(--text-main); }
@media (max-width: 560px) {
  .promo-bar { padding: 8px 14px; }
  .promo-bar__text { font-size: 0.74rem; line-height: 1.38; }
  .promo-bar__link { white-space: normal; }
}

/* NAVBAR — pełna szerokość ekranu; treść wyrównana do max-width strony */
.navbar { position: fixed; top: var(--promo-bar-height); left: 0; right: 0; z-index: 1000; padding: 0; border-bottom: none; animation: navSlide 0.8s cubic-bezier(0.16,1,0.3,1) both; transition: top 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease; }
.navbar-inner { max-width: var(--layout-max); margin: 0 auto; padding: 14px var(--page-pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
@keyframes navSlide { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
.navbar--dark-bg { background: rgba(1, 4, 14, 0.15); -webkit-backdrop-filter: blur(20px) saturate(1.12); backdrop-filter: blur(20px) saturate(1.12); box-shadow: none; border-bottom: none; }
.navbar--light-bg { background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35); border-bottom: none; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05); }
.nav-logo { display: flex; align-items: center; text-decoration: none; white-space: nowrap; justify-self: start; }
.nav-logo svg { height: 22px; width: auto; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; margin: 0; justify-self: center; }
.nav-links a { text-decoration: none; font-size: 0.82rem; font-weight: 500; padding: 8px 14px; border-radius: 100px; transition: color 0.25s ease, background 0.25s ease; white-space: nowrap; }
.navbar--dark-bg .nav-links a { color: rgba(241, 245, 249, 0.88); }
.navbar--dark-bg .nav-links a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.navbar--light-bg .nav-links a { color: hsl(215 19% 36%); }
.navbar--light-bg .nav-links a:hover { color: hsl(var(--foreground)); background: rgba(15, 23, 42, 0.05); }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; font-size: 0.82rem; font-weight: 600; border: none; border-radius: 100px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; text-decoration: none; margin: 0; justify-self: end; }
.navbar--dark-bg .nav-cta { background: #ffffff; color: var(--text-main); box-shadow: 0 2px 16px rgba(96, 165, 250, 0.35); }
.navbar--dark-bg .nav-cta:hover { background: var(--bg-subtle); box-shadow: 0 4px 22px rgba(96, 165, 250, 0.45); transform: translateY(-1px); }
.navbar--light-bg .nav-cta { background: hsl(var(--foreground)); color: #ffffff; }
.navbar--light-bg .nav-cta:hover { background: var(--text-main); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); transform: translateY(-1px); }

/* HERO — Ramp: bardzo długi ciemny navy (góra) → nagły skok w jasny błękit (dół) → biel */
.hero { position: relative; z-index: 1; min-height: 65svh; height: auto; display: flex; align-items: flex-start; justify-content: center; padding: calc(84px + var(--promo-bar-height)) 0 48px; overflow: visible; background: var(--hero-canvas); }
.hero-video-wrap { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-gradient-height); z-index: 0; overflow: clip; pointer-events: none; }
.hero-video-wrap video { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; mix-blend-mode: screen; filter: grayscale(1) contrast(1.1); }
/* Nakładka koloryzująca - delikatna poświata w kolorze var(--color-primary) z sekcji "Jak to działa" */
.hero-video-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--color-primary); mix-blend-mode: color; opacity: 0.65; z-index: 1; }
.hero-video-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13, 126, 168, 0.1) 0%, transparent 20%, transparent 50%, rgba(255,255,255, 0.5) 80%, #ffffff 100%); z-index: 2; }
.hero-bottom-fade { position: absolute; top: var(--hero-gradient-height); left: 0; right: 0; height: 28vh; max-height: 280px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #ffffff 72%, hsl(var(--background)) 100%); }
.hero > *:not(.hero-video-wrap):not(.hero-bottom-fade) { position: relative; z-index: 2; }

/* Hero split layout — więcej miejsca na tekst, żeby H1 nie wchodził pod grafikę */
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(48px, 5vw, 100px); align-items: center; max-width: var(--layout-max); margin: 0 auto; width: 100%; padding: 0 var(--page-pad); min-height: 0; margin-top: 0; }
.hero-right { min-width: 0; }

/* Left column */
.hero-left { text-align: left; min-width: 0; }

.hero-eyebrow { display: inline-block; margin: 0 0 clamp(18px, 2.5vw, 28px); padding: 10px 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(148, 163, 184, 0.82); line-height: 1.25; border: none; border-radius: 100px; background: rgba(255, 255, 255, 0.055); animation: fadeUp 0.75s 0.06s both; }
.hero-eyebrow-accent { color: var(--color-primary); font-weight: 700; animation: heroEyebrowAccentPulse 1.85s ease-in-out infinite; }
@keyframes heroEyebrowAccentPulse { 0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(56, 189, 248, 0.35); } 50% { opacity: 0.52; text-shadow: 0 0 22px rgba(56, 189, 248, 0.9), 0 0 42px rgba(56, 189, 248, 0.45); } }
@media (prefers-reduced-motion: reduce) { .hero-eyebrow-accent { animation: none; text-shadow: none; } }

.hero h1 {  font-weight: 700; line-height: 1.12; max-width: 22ch; margin-bottom: 28px; animation: heroHeadIn 1s 0.2s both; }
.hero h1 .line { display: block; }
.hero h1 .line--dim { color: var(--bg-subtle); -webkit-text-fill-color: var(--bg-subtle); background: none; background-clip: border-box; padding-bottom: 0.02em; }
.hero h1 .line--accent { color: #ffffff; background: linear-gradient(135deg, var(--border-subtle) 0%, var(--border-subtle) 45%, var(--border-subtle) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; }
@keyframes heroHeadIn { from { opacity: 0; transform: translateY(40px) scale(0.96); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

.hero-left p:not(.hero-eyebrow) { font-size: clamp(0.92rem, 1.2vw, 1.05rem); color: rgba(226, 232, 240, 0.9); max-width: 480px; line-height: 1.7; margin-bottom: 36px; animation: fadeUp 0.8s 0.55s both; }

.hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: #ffffff; color: var(--text-main); font-size: 0.92rem; font-weight: 700; border: none; border-radius: 100px; cursor: pointer; transition: all 0.35s ease; text-decoration: none; animation: fadeUp 0.8s 0.72s both; position: relative; overflow: clip; box-shadow: 0 4px 28px rgba(59, 130, 246, 0.35), 0 1px 0 rgba(255,255,255,0.8) inset; }
.hero-cta::before { content: ''; position: absolute; inset: -2px; border-radius: 100px; background: linear-gradient(135deg, hsl(var(--primary)), hsl(180 100% 75%), hsl(var(--primary))); z-index: -1; animation: ctaGlow 3s linear infinite; background-size: 200% 200%; }
body.theme-light .hero-cta::before,
body.theme-light .hero-cta::after { display: none; }
@keyframes ctaGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.hero-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: translateX(-100%); transition: transform 0.6s ease; }
.hero-cta:hover::after { transform: translateX(100%); }
.hero-cta:hover { box-shadow: 0 8px 36px rgba(59, 130, 246, 0.45); transform: translateY(-2px); background: var(--bg-subtle); color: var(--text-main); }

.hero-lead { font-size: clamp(0.92rem, 1.15vw, 1.05rem); color: rgba(248, 250, 252, 0.88); max-width: 480px; line-height: 1.65; margin-bottom: 22px; }
.hero-benefits { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.hero-benefit-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; line-height: 1.45; color: rgba(226, 232, 240, 0.9); }
.hero-benefit-row strong { color: var(--bg-subtle); font-weight: 700; }
.hero-benefit-accent-green { color: var(--color-success); font-weight: 700; }
.hero-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(96, 165, 250, 0.15); border: 1px solid rgba(147, 197, 253, 0.45); display: flex; align-items: center; justify-content: center; margin-top: 1px; box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); }
.hero-check svg { display: block; }
.hero-morph-wrap { position: relative; display: inline; }
.hero-morph-word { display: inline-block; min-width: 5.5ch; text-align: left; background: linear-gradient(135deg, var(--color-primary) 0%, var(--border-subtle) 50%, var(--border-subtle) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: opacity 0.32s ease, transform 0.32s ease; }
@media (min-width: 961px) {
  .hero { align-items: center; padding: calc(88px + var(--promo-bar-height)) 0 48px; }
  .hero-inner { min-height: min(640px, calc(80svh - 136px)); margin-top: clamp(20px, 3.8vh, 56px); }
}

/* Social proof (jak Ramp): tekst + nieskończony slider logotypów, szarość, lekkie wygaszenie brzegów */
.social-proof { position: relative; z-index: 2; background: #ffffff; padding: clamp(40px, 5vw, 56px) 0 clamp(36px, 4vw, 48px); border-top: none; }
.social-proof-inner { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--page-pad); text-align: center; }
.social-proof-tagline { font-size: clamp(0.88rem, 1.45vw, 1rem); font-weight: 500; color: hsl(215 14% 40%); line-height: 1.6; max-width: min(560px, 92vw); margin: 0 auto clamp(28px, 3.5vw, 40px); letter-spacing: -0.015em; }
.social-proof-marquee { overflow: clip; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, var(--text-main) 5%, var(--text-main) 95%, transparent); mask-image: linear-gradient(90deg, transparent, var(--text-main) 5%, var(--text-main) 95%, transparent); }
.social-proof-marquee-track { display: flex; width: max-content; animation: socialProofMarquee 55s linear infinite; will-change: transform; }
.social-proof-marquee-group { display: flex; flex-shrink: 0; align-items: center; gap: clamp(2.25rem, 5vw, 3.75rem); padding-right: clamp(2.25rem, 5vw, 3.75rem); }
.social-proof-logo { flex-shrink: 0; font-family: var(--font-display); font-size: clamp(0.7rem, 1.1vw, 0.82rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(215 9% 52%); opacity: 0.92; user-select: none; white-space: nowrap; }
@keyframes socialProofMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Założenia — jasny motyw (jak reszta body), portret na środku */
.light-pillars {
  position: relative;
  z-index: 1;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: clamp(72px, 9vw, 104px) 0 clamp(64px, 8vw, 92px);
}
.light-pillars-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}
.light-pillars-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 16px;
}
.light-pillars-title {
  font-size: clamp(1.65rem, 4.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  color: hsl(var(--foreground));
  margin: 0 0 14px;
}
.light-pillars-lead {
  font-size: clamp(0.92rem, 1.35vw, 1.02rem);
  line-height: 1.65;
  color: hsl(var(--muted));
  margin: 0;
}
.light-pillars-tri {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 40px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 48px);
}
.light-pillars-photo {
  margin: 0;
  border-radius: 20px;
  overflow: clip;
  border: 1px solid var(--glass-border);
  background: hsl(210 25% 96%);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
  aspect-ratio: 3 / 4;
}
.light-pillars-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.light-pillars-photo figcaption {
  display: none;
}
.light-pillar { min-width: 0; text-align: left; }
.light-pillar__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: hsl(var(--foreground));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.light-pillar__icon svg { display: block; }
.light-pillar h3 {
  
  font-weight: 700;
  line-height: 1.25;
  color: hsl(var(--foreground));
  margin: 0 0 10px;
}
.light-pillar p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: hsl(215 16% 42%);
  margin: 0;
}
.light-pillar--solo {
  max-width: 560px;
  margin: 0 auto 40px;
  text-align: center;
}
.light-pillar--solo .light-pillar__icon { margin-left: auto; margin-right: auto; }
.light-pillars-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vw, 2.25rem);
  margin-bottom: 32px;
  padding: 22px 0;
  
  border-bottom: 1px solid var(--glass-border);
}
.light-pillars-logo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(215 12% 48%);
  white-space: nowrap;
}
.light-pillars-cta-wrap { text-align: center; }
.light-pillars-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 0.88rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.light-pillars-cta:hover {
  border-color: hsl(var(--primary));
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.light-pillars-cta svg { flex-shrink: 0; opacity: 0.85; }
@media (max-width: 900px) {
  .light-pillars-tri {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .light-pillars-photo { aspect-ratio: 4 / 5; max-height: 420px; }
  .light-pillar { text-align: center; }
  .light-pillar__icon { margin-left: auto; margin-right: auto; }
}

.comparison-vs-wrap { position: relative; border-radius: 22px; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(20px); overflow: clip; margin-top: 8px; }
.comparison-vs-head { position: relative; padding: 40px var(--page-pad) 28px; text-align: center; }
.comparison-vs-head::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80&auto=format&fit=crop') center/cover; opacity: 0.16; }
.comparison-vs-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, hsl(var(--background)) 95%); }
.comparison-vs-head > * { position: relative; z-index: 1; }
.comparison-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.comparison-vs-sep { display: flex; align-items: center; justify-content: center; padding: 8px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; color: hsl(215 16% 42%); background: hsl(210 30% 97%); border-left: 1px solid var(--glass-border); border-right: 1px solid var(--glass-border); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); }
.comparison-vs-col { padding: 28px 28px 34px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.comparison-vs-col--bad { background: rgba(255,80,80,0.04); }
.comparison-vs-col--good { background: rgba(0,180,216,0.06); }
.comparison-vs-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }
.comparison-vs-col--bad .comparison-vs-label { color: var(--color-danger); }
.comparison-vs-col--good .comparison-vs-label { color: hsl(var(--primary)); }
.comparison-vs-point { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; color: hsl(215 16% 38%); line-height: 1.45; }
.comparison-vs-point span:first-child { flex-shrink: 0; font-weight: 800; line-height: 1.2; }
.comparison-vs-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.comp-vs-bar-track { height: 8px; border-radius: 6px; background: rgba(15, 23, 42, 0.08); overflow: clip; margin-top: 5px; }
.comp-vs-bar-fill { height: 100%; border-radius: 6px; width: 0; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); }
.comparison-vs.reveal.visible .comp-vs-bar-fill { width: var(--bar-w, 100%); }
.comparison-vs-col--bad .comp-vs-bar-fill { background: linear-gradient(90deg, var(--color-danger), var(--color-danger)); }
.comparison-vs-col--good .comp-vs-bar-fill { background: linear-gradient(90deg, var(--color-primary), var(--color-primary)); }
.comparison-vs-col--bad .comp-vs-bar-fill--2, .comparison-vs-col--good .comp-vs-bar-fill--2 { transition-delay: 0.12s; }
.comparison-vs-kpi { margin-top: auto; padding-top: 18px;  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted)); }
.comparison-vs-kpi b { display: block; font-size: 1.55rem; font-weight: 800; font-family: var(--font-display); margin-top: 6px; letter-spacing: -0.02em; text-transform: none; }
.comparison-vs-col--bad .comparison-vs-kpi b { color: var(--color-danger); }
.comparison-vs-col--good .comparison-vs-kpi b { color: hsl(var(--primary)); }
.story-photo-section { position: relative; z-index: 1; padding: 0 0 44px; }
.story-photo-inner { width: 100%; max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--page-pad); }
.story-photo-inner img { width: 100%; border-radius: 18px; border: 1px solid var(--glass-border); display: block; aspect-ratio: 21/9; object-fit: cover; min-height: 200px; }

/* Right column — zdjęcie +15% vs poprzednia skala, lekko w prawo */
.hero-right { animation: fadeUp 0.8s 0.38s both; overflow: visible; display: flex; justify-content: flex-end; align-items: center; }
.hero-main-photo { width: 100%; max-width: min(896px, 100%); height: auto; display: block; border-radius: 18px; object-fit: contain; transform: translateX(clamp(16px, 3vw, 52px)) scale(1.38); transform-origin: 92% 52%; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 960px) {
  :root { --page-pad: 20px; }
  .hero { padding: calc(78px + var(--promo-bar-height)) 0 44px; min-height: auto; height: auto; align-items: flex-start; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 var(--page-pad); margin-top: clamp(24px, 4vh, 48px); overflow: visible; }
  .hero h1 { max-width: 100%;  }
  .hero-left { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-left p:not(.hero-eyebrow) { margin-left: auto; margin-right: auto; font-size: 0.95rem; }
  .hero-right { width: 100%; max-width: 100%; margin: 0 auto; justify-content: center; }
  .hero-main-photo { max-width: 100%; transform: translateX(8px) scale(1.24); transform-origin: 55% 48%; }
  .navbar-inner { padding: 10px var(--page-pad); display: flex; flex-wrap: wrap; row-gap: 8px; }
  .nav-links { width: 100%; order: 3; justify-content: center; flex-wrap: wrap; }
  .nav-cta { margin-left: auto; padding: 8px 14px; font-size: 0.75rem; }
  .hero-benefits { margin-left: auto; margin-right: auto; }
  .hero-benefit-row { text-align: left; }
}


/* SECTION GLOBALS */
.section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; color: hsl(var(--primary)); text-transform: uppercase; margin-bottom: 16px; }
.section-heading { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.1; margin-bottom: 16px; color: hsl(var(--foreground)); }
.section-sub { font-size: 1rem; color: hsl(var(--muted)); max-width: 640px; line-height: 1.65; margin-bottom: 56px; }

/* SECTION DIVIDER */
.section-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.08), transparent); margin: 0; position: relative; z-index: 1; }

/* Jednolity pas: wartość + case studies + tabela — jasny motyw (slate + akcent cyan jak reszta landinga) */
.sem-dark-compare-band {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-subtle) 38%, #ffffff 100%);
  overflow: clip;
}
.sem-dark-compare-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(14, 165, 233, 0.09) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.sem-dark-compare-band .value-you-split,
.sem-dark-compare-band .case-studies-section,
.sem-dark-compare-band .comp-compare-table-block {
  position: relative;
  z-index: 1;
  background: transparent;
}
/* Sekcja tabeli: ciemne tło + tabela w black mode (layout jak mockup: lewa głęboka czerń, prawa teal) */
.sem-dark-compare-band .comp-compare-table-block {
  position: relative;
  padding-top: clamp(72px, 10vw, 112px);
  padding-bottom: clamp(72px, 10vw, 112px);
  margin-top: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, var(--text-main) 0%, var(--text-main) 45%, var(--text-main) 100%);
  color: var(--border-subtle);
  --cmp-bez-bg: var(--text-main);
  --cmp-brand-header: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-success) 48%, var(--color-success) 100%);
  --cmp-brand-row: linear-gradient(180deg, var(--text-main) 0%, var(--text-main) 52%, var(--text-main) 100%);
  --cmp-brand-bg: var(--cmp-brand-header);
  --cmp-brand-cell: var(--cmp-brand-row);
  --cmp-cat-bg: var(--text-main);
  --cmp-accent-text: var(--color-success);
  --cmp-accent-bright: var(--color-success);
  --cmp-fade-veil: var(--text-main);
  --cmp-teal: var(--color-primary);
  --cmp-teal-glow: rgba(43, 176, 201, 0.35);
}
.sem-dark-compare-band .comp-compare-table-card {
  background: linear-gradient(165deg, var(--text-main) 0%, var(--text-main) 100%);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(19, 137, 166, 0.06);
}
.sem-dark-compare-band .comp-compare-table-card::before {
  background: radial-gradient(ellipse 90% 55% at 100% 0%, rgba(43, 176, 201, 0.12), transparent 55%);
}
.sem-dark-compare-band .comp-compare-table-card:not(.is-expanded) .cmp-scroll::after {
  background: linear-gradient(
    to top,
    var(--cmp-fade-veil) 0%,
    rgba(6, 9, 15, 0.96) 22%,
    rgba(6, 9, 15, 0.45) 55%,
    rgba(6, 9, 15, 0) 100%
  );
}
.sem-dark-compare-band .cmp-table thead th {
  padding: 18px 18px 16px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sem-dark-compare-band .cmp-th-comp {
  background: var(--text-main) !important;
  color: var(--text-muted) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sem-dark-compare-band .cmp-th-brand {
  background: var(--cmp-brand-header) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-left: none;
}
.sem-dark-compare-band .cmp-brand-lockup {
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.sem-dark-compare-band .cmp-th-brand .cmp-brand-lockup {
  color: #ffffff;
}
.sem-dark-compare-band .cmp-brand-lockup svg g,
.sem-dark-compare-band .cmp-brand-lockup svg path {
  fill: #ffffff;
}
.sem-dark-compare-band .cmp-th-brand .cmp-brand-lockup svg g,
.sem-dark-compare-band .cmp-th-brand .cmp-brand-lockup svg path {
  fill: var(--bg-subtle);
}
.sem-dark-compare-band .cmp-cat td {
  padding: 12px 18px;
  color: var(--text-muted);
  background: var(--text-main) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--cmp-teal);
  letter-spacing: 0.16em;
}
.sem-dark-compare-band .cmp-cell-comp,
.sem-dark-compare-band .cmp-cell-brand {
  padding: 18px 18px 19px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sem-dark-compare-band .cmp-cell-comp {
  background: var(--text-main) !important;
  color: var(--text-muted);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sem-dark-compare-band .cmp-cell-comp .cmp-li {
  color: var(--text-muted);
  line-height: 1.5;
  font-size: clamp(0.82rem, 1.05vw, 0.9rem);
}
.sem-dark-compare-band .cmp-cell-comp .cmp-li::before {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.sem-dark-compare-band .cmp-cell-brand {
  background: linear-gradient(180deg, var(--text-main) 0%, var(--text-main) 100%) !important;
  color: var(--bg-subtle);
  box-shadow: inset 1px 0 0 rgba(43, 176, 201, 0.08);
}
.sem-dark-compare-band .cmp-cell-brand .cmp-li {
  color: var(--bg-subtle);
  align-items: flex-start;
  gap: 14px;
  font-size: clamp(0.84rem, 1.08vw, 0.92rem);
  line-height: 1.48;
}
.sem-dark-compare-band .cmp-cell-brand .cmp-li-icon {
  margin-top: 2px;
}
.sem-dark-compare-band .cmp-li-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(13, 21, 32, 0.9);
  color: var(--cmp-teal);
  border: 1.5px solid rgba(43, 176, 201, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 24px var(--cmp-teal-glow);
}
.sem-dark-compare-band .cmp-kpi-block {
  border-top-color: rgba(148, 163, 184, 0.14);
}
.sem-dark-compare-band .cmp-cell-brand .cmp-kpi-block {
  border-top-color: rgba(56, 189, 248, 0.28);
}
.sem-dark-compare-band .cmp-cell-comp .cmp-kpi-label {
  color: var(--text-muted);
}
.sem-dark-compare-band .cmp-cell-brand .cmp-kpi-label {
  color: var(--cmp-teal);
}
.sem-dark-compare-band .cmp-kpi-val--unknown {
  color: var(--text-muted);
}
.sem-dark-compare-band .cmp-cell-brand .cmp-kpi-val:not(.cmp-kpi-val--unknown) {
  color: var(--color-success);
}
.sem-dark-compare-band .cmp-kpi-note {
  color: var(--text-muted);
}
.sem-dark-compare-band .cmp-cell-brand .cmp-kpi-note {
  color: var(--text-muted);
}
.sem-dark-compare-band .cmp-row-kpi td {
  border-top-color: rgba(148, 163, 184, 0.16);
}
.sem-dark-compare-band .cmp-expand-row td {
  background: var(--text-main) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.sem-dark-compare-band .cmp-expand-cell {
  padding: 20px 18px 22px !important;
}
.sem-dark-compare-band .cmp-expand-btn {
  
  
  
  box-shadow:
    0 4px 24px rgba(19, 137, 166, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
.sem-dark-compare-band .cmp-expand-btn:hover {
  background: linear-gradient(180deg, var(--color-success) 0%, var(--color-primary) 50%, var(--color-success) 100%);
  border-color: rgba(204, 251, 241, 0.45);
  box-shadow: 0 8px 32px rgba(19, 137, 166, 0.5);
}
.sem-dark-compare-band .cmp-expand-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--text-main), 0 0 0 4px var(--cmp-teal);

    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
.sem-dark-compare-band .comp-compare-kicker {
  color: var(--text-muted);
}
.sem-dark-compare-band .comp-compare-heading.section-heading {
  color: var(--bg-subtle);
}
.sem-dark-compare-band .comp-compare-intro .section-sub {
  color: var(--text-muted);
}
.sem-dark-compare-band .comp-compare-foot {
  color: var(--text-muted);
}
.sem-dark-compare-band .comp-compare-foot__icon {
  color: var(--cmp-teal);
}
.sem-dark-compare-band .value-you-split {
  color: var(--color-primary-dark);
}
.sem-dark-compare-band .value-you-split__head .section-heading {
  color: var(--text-main);
}
.sem-dark-compare-band .value-you-split__sub {
  color: var(--text-muted);
}
.sem-dark-compare-band .value-you-split .section-label {
  color: var(--text-muted);
}

/* Case studies — slider kafelków w tym samym pasie co wartość / tabela */
.case-studies-section {
  padding: clamp(36px, 5vw, 56px) 0 clamp(44px, 6vw, 72px);
  color: var(--color-primary-dark);
}
.case-studies-section .section-label {
  color: var(--text-muted);
}
.case-studies-section .section-heading {
  color: var(--text-main);
}
.case-studies__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 40px);
}
.case-studies__sub {
  margin: 0;
  font-size: clamp(0.92rem, 1.35vw, 1.02rem);
  line-height: 1.65;
  color: var(--text-muted);
}
.case-studies__slider {
  position: relative;
  margin-top: clamp(8px, 1.5vw, 16px);
}
.case-studies__viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--page-pad));
  /* Padding pionowy: miejsce na cień karty + hover translateY — overflow-y ukrywał cienie */
  padding: 18px var(--page-pad) 44px;
  mask-image: linear-gradient(90deg, transparent, var(--text-main) 2%, var(--text-main) 98%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--text-main) 2%, var(--text-main) 98%, transparent);
}
.case-studies__viewport::-webkit-scrollbar {
  display: none;
}
.case-studies__track {
  display: flex;
  gap: clamp(16px, 2.2vw, 22px);
  width: max-content;
  padding: 4px 4px 6px;
  align-items: stretch;
}
.case-studies-card {
  flex: 0 0 clamp(272px, 76vw, 340px);
  scroll-snap-align: start;
  scroll-margin-left: var(--page-pad);
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  padding: 0;
  overflow: clip;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 40px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.case-studies-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 20px 48px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(14, 165, 233, 0.12);
}
.case-studies-card__media {
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  overflow: clip;
  background: linear-gradient(145deg, var(--bg-subtle) 0%, var(--border-subtle) 40%, var(--border-subtle) 100%);
}
.case-studies__track > .case-studies-card:nth-child(2) .case-studies-card__media {
  background: linear-gradient(158deg, var(--bg-subtle) 0%, var(--border-subtle) 42%, var(--text-muted) 100%);
}
.case-studies__track > .case-studies-card:nth-child(3) .case-studies-card__media {
  background: linear-gradient(165deg, var(--border-subtle) 0%, var(--border-subtle) 48%, var(--color-primary) 96%);
}
.case-studies__track > .case-studies-card:nth-child(4) .case-studies-card__media {
  background: linear-gradient(150deg, var(--bg-subtle) 0%, var(--border-subtle) 38%, var(--color-success) 100%);
}
.case-studies-card__content {
  padding: clamp(18px, 2.4vw, 22px) clamp(20px, 2.5vw, 26px) clamp(22px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}
.case-studies-card__tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}
.case-studies-card__metric {
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text-main);
  margin: 0 0 10px;
}
.case-studies-card__metric span {
  color: var(--color-primary-dark);
}
.case-studies-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  margin: 0 0 10px;
}
.case-studies-card__body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  flex-grow: 1;
}
.case-studies-card__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case-studies__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(16px, 2.5vw, 22px);
}
.case-studies__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  border: none;
  background: rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.case-studies__dot:hover {
  background: rgba(14, 165, 233, 0.45);
}
.case-studies__dot.is-active {
  background: var(--color-primary-dark);
  transform: scale(1.15);
}
@media (max-width: 640px) {
  .case-studies__viewport {
    margin: 0 calc(-1 * var(--page-pad));
    padding-bottom: 40px;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .case-studies__viewport {
    scroll-behavior: auto;
  }
  .case-studies-card:hover {
    transform: none;
  }
}

/* PORÓWNANIE — light: lewa neutralna, prawa z delikatnym „ice / steel” (bez mocnego sky) */
.comp-compare-table-block {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3.5vw, 36px) 0 clamp(56px, 8vw, 88px);
  background: transparent;
  color: var(--color-primary-dark);
  --cmp-bez-bg: var(--bg-subtle);
  --cmp-brand-header: linear-gradient(165deg, var(--border-subtle) 0%, var(--border-subtle) 32%, var(--border-subtle) 68%, #ffffff 100%);
  --cmp-brand-row: linear-gradient(180deg, #ffffff 0%, var(--bg-subtle) 42%, var(--border-subtle) 100%);
  --cmp-brand-bg: var(--cmp-brand-header);
  --cmp-brand-cell: var(--cmp-brand-row);
  --cmp-cat-bg: var(--bg-subtle);
  --cmp-accent-text: var(--color-primary);
  --cmp-accent-bright: var(--color-primary);
  --cmp-fade-veil: var(--bg-subtle);
}
.comp-compare-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(26px, 4vw, 40px);
}
.comp-compare-kicker {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.comp-compare-heading.section-heading { margin-bottom: 12px; line-height: 1.16; color: var(--text-main); }
.cmp-headline-accent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cmp-accent-bright);
  white-space: nowrap;
}
.cmp-headline-num { font-weight: 800; letter-spacing: -0.03em; color: var(--cmp-accent-text); }
.cmp-headline-trend { flex-shrink: 0; opacity: 0.92; color: var(--cmp-accent-bright); }
.comp-compare-intro .section-sub {
  margin: 0 auto;
  max-width: 36rem;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: var(--text-muted);
  line-height: 1.5;
}
.comp-compare-table-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 20px 52px rgba(15, 23, 42, 0.07),
    0 6px 20px rgba(15, 23, 42, 0.035);
  overflow: clip;
  --cmp-cta-strip: 82px;
  --cmp-fade-height: min(120px, 30vw);
}
.comp-compare-table-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 85% 70% at 100% 100%, rgba(12, 100, 136, 0.07), transparent 58%);
}
.cmp-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  z-index: 1;
}
.comp-compare-table-card:not(.is-expanded) .cmp-scroll::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--cmp-cta-strip);
  height: var(--cmp-fade-height);
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to top,
    var(--cmp-fade-veil) 0%,
    rgba(248, 250, 252, 0.9) 26%,
    rgba(248, 250, 252, 0.38) 58%,
    rgba(248, 250, 252, 0) 100%
  );
}
.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  min-width: min(100%, 480px);
  table-layout: fixed;
}
.cmp-table thead th {
  padding: 14px 16px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  vertical-align: middle;
}
.cmp-th-comp {
  width: 50%;
  text-align: left;
  background: var(--cmp-bez-bg) !important;
  color: var(--text-muted) !important;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}
.cmp-th-brand {
  width: 50%;
  background: var(--cmp-brand-header) !important;
  color: var(--color-primary-dark) !important;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease 0.05s, transform 0.55s ease 0.05s;
}
.comp-compare-table-card.reveal.visible .cmp-th-brand {
  opacity: 1;
  transform: translateY(0);
}
.cmp-brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.cmp-th-brand .cmp-brand-lockup {
  color: var(--color-primary-dark);
}
.cmp-brand-lockup svg { height: 21px; width: auto; display: block; }
.cmp-brand-lockup svg g,
.cmp-brand-lockup svg path { fill: var(--text-main); }
.cmp-th-brand .cmp-brand-lockup svg g,
.cmp-th-brand .cmp-brand-lockup svg path { fill: var(--color-primary-dark); }

.cmp-cat td {
  padding: 10px 14px 10px 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--cmp-cat-bg);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  border-left: 3px solid var(--color-primary);
}

.cmp-cell-comp,
.cmp-cell-brand {
  padding: 16px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  vertical-align: top;
}
.cmp-cell-comp {
  background: var(--cmp-bez-bg);
  color: var(--text-muted);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}
.cmp-cell-brand {
  background: var(--cmp-brand-cell);
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.comp-compare-table-card.reveal.visible .cmp-cell-brand {
  opacity: 1;
  transform: translateY(0);
}
.comp-compare-table-card.is-expanded .cmp-row-kpi .cmp-cell-brand {
  transition-delay: 0.06s;
}
.cmp-row-kpi td {
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding-top: 20px;
  padding-bottom: 20px;
}

.cmp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.cmp-li {
  position: relative;
  padding-left: 0.85rem;
  font-size: clamp(0.8rem, 1.05vw, 0.88rem);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.cmp-li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.cmp-cell-comp .cmp-li { color: var(--text-muted); }
.cmp-cell-comp .cmp-li::before {
  background: rgba(100, 116, 139, 0.35);
  border: 1px solid rgba(100, 116, 139, 0.2);
}
.cmp-cell-brand .cmp-li {
  color: var(--color-primary-dark);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
}
.cmp-cell-brand .cmp-li::before {
  display: none;
}
.cmp-li-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-subtle) 100%);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(12, 100, 136, 0.2);
}
.cmp-li-icon svg {
  display: block;
}
.cmp-li-txt {
  min-width: 0;
  flex: 1;
  padding-top: 0.15em;
}

.cmp-kpi-block {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}
.cmp-kpi-block .cmp-kpi-val,
.cmp-kpi-block .cmp-kpi-val--unknown,
.cmp-kpi-block .cmp-kpi-note { margin: 0; }
.cmp-cell-brand .cmp-kpi-block { border-top-color: rgba(12, 100, 136, 0.22); }
.cmp-kpi-block--brand-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}
.cmp-kpi-block--brand-row .cmp-kpi-block__stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}
.cmp-kpi-block--brand-row .cmp-kpi-label {
  width: auto;
  margin-bottom: 0;
}
.cmp-kpi-block--brand-row .cmp-li-icon {
  margin-top: 2px;
}

.cmp-kpi-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
  width: 100%;
  margin-bottom: 0.1rem;
}
.cmp-cell-brand .cmp-kpi-label {
  color: var(--color-primary);
  opacity: 1;
}
.cmp-cell-comp .cmp-kpi-label {
  color: var(--text-muted);
  opacity: 1;
}
.cmp-kpi-val {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.cmp-kpi-val--unknown {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.02em;
}
.cmp-cell-brand .cmp-kpi-val:not(.cmp-kpi-val--unknown) { color: var(--color-primary-dark); }
.cmp-kpi-note {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted);
  flex: 1 1 100%;
}
.cmp-cell-brand .cmp-kpi-note { color: var(--text-muted); }

.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-expand-row {
  position: relative;
  z-index: 4;
}
.cmp-expand-row td {
  padding: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--cmp-bez-bg);
  vertical-align: middle;
}
.cmp-expand-cell {
  text-align: center;
  padding: 16px 14px 18px !important;
}
.cmp-expand-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  font-family: var(--font-display);
  
  
  letter-spacing: 0.04em;
  text-transform: uppercase;
  
  
  
  
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(10, 80, 105, 0.28);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-

    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
.cmp-expand-btn:hover {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
  border-color: rgba(12, 100, 136, 0.5);
  box-shadow: 0 8px 30px rgba(10, 80, 105, 0.32);
  transform: translateY(-1px);
}
.cmp-expand-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);

    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
.cmp-expand-btn svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.comp-compare-table-card.is-expanded .cmp-expand-btn svg {
  transform: rotate(180deg);
}

.comp-compare-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 480px;
  margin: 14px auto 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.45;
  justify-content: center;
  text-align: left;
}
.comp-compare-foot__icon { flex-shrink: 0; margin-top: 3px; opacity: 0.8; color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  .cmp-cell-brand,
  .cmp-th-brand { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Ty z Semtrick · Ty bez — karty jak mockup (var(--text-main) / gradient niebieski) */
.value-you-split {
  position: relative;
  z-index: 1;
  padding: clamp(88px, 11vw, 132px) 0 clamp(96px, 12vw, 140px);
  background: transparent;
  color: var(--border-subtle);
}
.sem-dark-compare-band .value-you-split {
  padding-top: clamp(72px, 9vw, 112px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.value-you-split .section-label {
  color: var(--text-muted);
}
.value-you-split__head {
  text-align: center;
  max-width: min(820px, 100%);
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.value-you-split__head .section-heading {
  color: #ffffff;
}
.value-you-split__sub {
  margin: 0;
  color: var(--text-muted);
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
.value-you-split__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 40px);
  align-items: stretch;
  width: 100%;
}
.value-you-split__card {
  border-radius: 22px;
  border: 1px solid rgba(96, 165, 250, 0.1);
  padding: clamp(40px, 4.8vw, 56px) clamp(32px, 4vw, 48px);
  background: var(--text-main);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset, 0 20px 50px rgba(0, 0, 0, 0.4);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  display: flex;
  flex-direction: column;
}
.value-you-split__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 28px 60px rgba(0, 0, 0, 0.5);
  border-color: rgba(96, 165, 250, 0.2);
}
.value-you-split__card--bez {
  background: linear-gradient(160deg, var(--text-main) 0%, var(--text-main) 100%);
  border: 1px solid var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger) inset, 0 12px 32px -12px rgba(15, 23, 42, 0.3);
}
.value-you-split__card--bez:hover {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger) inset, 0 16px 40px -12px rgba(15, 23, 42, 0.4);
}
.value-you-split__card--z {
  background: linear-gradient(145deg, var(--text-main) 0%, var(--color-primary-dark) 36%, var(--color-primary) 62%, var(--color-primary) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(96, 165, 250, 0.25),
    0 0 48px rgba(37, 99, 235, 0.35),
    0 24px 56px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: clip;
}
.value-you-split__card--z::after {
  display: none;
}
.value-you-split__col-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 clamp(22px, 2.8vw, 30px);
  padding-bottom: clamp(14px, 2vw, 18px);
  border-bottom: 1px solid rgba(100, 116, 139, 0.22);
  color: #ffffff;
}
.value-you-split__col-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.value-you-split__col-title-icon--bez {
  color: var(--color-danger);
}
.value-you-split__col-title-icon--z {
  color: var(--color-success);
}
.value-you-split__card--bez .value-you-split__col-title {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.value-you-split__card--z .value-you-split__col-title {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.value-you-split__rows {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.value-you-split__rows--major {
  gap: clamp(22px, 2.8vw, 30px);
  margin-bottom: clamp(22px, 2.8vw, 28px);
}
.value-you-split__rows--minor {
  gap: 13px;
}
.value-you-split__sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.value-you-split__card--z .value-you-split__sep {
  color: var(--border-subtle);
}
.value-you-split__sep::before,
.value-you-split__sep::after {
  content: '';
  flex: 1;
  min-width: 0;
  height: 1px;
  background: rgba(100, 116, 139, 0.28);
}
.value-you-split__card--z .value-you-split__sep::before,
.value-you-split__card--z .value-you-split__sep::after {
  background: rgba(255, 255, 255, 0.22);
}
.value-you-split__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.2s ease;
}
.value-you-split__row--minor {
  gap: 11px;
  align-items: flex-start;
}
.value-you-split__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-you-split__row--major .value-you-split__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.value-you-split__row--minor .value-you-split__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.value-you-split__icon--bez {
  background: rgba(220, 38, 38, 0.08);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.2);
}
.value-you-split__icon--z {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.25), 0 4px 16px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(134, 239, 172, 0.35);
}
.value-you-split__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.value-you-split__card:hover .value-you-split__row {
  transform: translateX(4px);
}
.value-you-split__rows--major .value-you-split__row:nth-child(1) { transition-delay: 0.04s; }
.value-you-split__rows--major .value-you-split__row:nth-child(2) { transition-delay: 0.08s; }
.value-you-split__rows--major .value-you-split__row:nth-child(3) { transition-delay: 0.12s; }
.value-you-split__rows--minor .value-you-split__row:nth-child(1) { transition-delay: 0.16s; }
.value-you-split__rows--minor .value-you-split__row:nth-child(2) { transition-delay: 0.18s; }
.value-you-split__rows--minor .value-you-split__row:nth-child(3) { transition-delay: 0.2s; }
.value-you-split__rows--minor .value-you-split__row:nth-child(4) { transition-delay: 0.22s; }
.value-you-split__rows--minor .value-you-split__row:nth-child(5) { transition-delay: 0.24s; }

.value-you-split__metric {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bg-subtle);
  line-height: 1.3;
}
.value-you-split__row--major .value-you-split__metric {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.value-you-split__row--minor .value-you-split__metric {
  font-size: 0.84rem;
  font-weight: 600;
}
.value-you-split__card--bez .value-you-split__metric {
  color: var(--bg-subtle);
}
.value-you-split__card--z .value-you-split__metric {
  color: var(--bg-subtle);
}
.value-you-split__note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.value-you-split__row--major .value-you-split__note {
  font-size: clamp(0.86rem, 1.1vw, 0.93rem);
  line-height: 1.55;
  max-width: 34em;
}
.value-you-split__row--minor .value-you-split__note {
  font-size: 0.72rem;
  line-height: 1.42;
  color: var(--text-muted);
}
.value-you-split__card--z .value-you-split__note {
  color: rgba(226, 232, 240, 0.88);
}
.value-you-split__card--z .value-you-split__row--minor .value-you-split__note {
  color: rgba(226, 232, 240, 0.82);
}
.value-you-split__card--bez .value-you-split__note {
  color: var(--border-subtle);
}
.value-you-split__card--bez .value-you-split__row--minor .value-you-split__note {
  color: var(--border-subtle);
}
@media (max-width: 720px) {
  .value-you-split__grid {
    grid-template-columns: 1fr;
  }
}

/* Dla kogo — obraz (jak miniatura sticky) + prosta lista po prawej */
.audience-fit {
  position: relative;
  z-index: 1;
  padding: clamp(88px, 11vw, 120px) 0;
  background: #ffffff;
  overflow: clip;
}
.audience-fit__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(32px, 4.5vw, 48px);
}
.audience-fit__head .section-label {
  margin-bottom: 16px;
  color: hsl(var(--primary));
}
.audience-fit__head .section-heading {
  margin-bottom: 16px;
  line-height: 1.12;
  color: var(--text-main);
}
.audience-fit__title-accent {
  color: var(--color-primary);
}
.audience-fit__head .section-sub {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  max-width: 36rem;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: var(--text-muted);
  line-height: 1.6;
}
.audience-fit__split {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 2vw, 32px);
  align-items: stretch;
  width: 100%;
  margin: 0;
}
@media (min-width: 1200px) {
  .audience-fit__split {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: clamp(24px, 3vw, 40px);
  }
}
.audience-fit__visual {
  position: relative;
  min-width: 0;
  width: 100%;
}
.audience-fit__figure {
  margin: 0;
  border-radius: 20px;
  overflow: clip;
  background: var(--bg-subtle);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
  width: 100%;
  height: min(clamp(540px, 78vh, 900px), 92vh, 960px);
  min-height: 480px;
}
.audience-fit__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.audience-fit__visual-hint {
  margin: 12px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.audience-fit__content {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 24px);
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.audience-fit__panel {
  border-radius: 24px;
  padding: clamp(24px, 3vw, 32px) clamp(20px, 2.5vw, 28px);
  min-width: 0;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.2);
  position: relative;
  overflow: clip;
  color: #ffffff;
}
.audience-fit__panel::before {
  display: none;
}
.audience-fit__panel--yes {
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border: 1px solid var(--color-primary);
}
.audience-fit__panel--no {
  background: linear-gradient(160deg, var(--text-main) 0%, var(--text-main) 100%);
  border: 1px solid var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger) inset, 0 12px 32px -12px rgba(15, 23, 42, 0.3);
}
.audience-fit__rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  height: 100%;
}
.audience-fit__rail-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.audience-fit__rail-head .audience-fit__rail-title {
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.audience-fit__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
}
.audience-fit__panel--yes .audience-fit__badge {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.audience-fit__panel--no .audience-fit__badge {
  background: rgba(185, 28, 28, 0.2);
  color: var(--color-danger);
  border: 1px solid rgba(185, 28, 28, 0.3);
}
.audience-fit__rail-title {
  margin: 0;
  color: #ffffff;
}
@keyframes audience-fit-ico-pulse-yes {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(190, 242, 100, 0.55),
      0 0 0 0 rgba(190, 242, 100, 0);
    filter: brightness(1);
  }
  45% {
    box-shadow:
      0 0 0 3px rgba(190, 242, 100, 0.35),
      0 0 22px 6px rgba(163, 230, 53, 0.45);
    filter: brightness(1.06);
  }
  70% {
    box-shadow:
      0 0 0 1px rgba(190, 242, 100, 0.25),
      0 0 12px 2px rgba(163, 230, 53, 0.2);
    filter: brightness(1.02);
  }
}
@keyframes audience-fit-ico-pulse-no {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(248, 250, 252, 0);
  }
  50% {
    box-shadow: 0 0 16px 3px rgba(248, 113, 113, 0.22);
  }
}
.audience-fit__tiles {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.audience-fit__tile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  transition: transform 0.2s ease, background 0.2s ease;
  background: transparent;
  border: none;
}
.audience-fit__tile:hover {
  transform: translateY(-2px);
}
.audience-fit__panel--yes .audience-fit__tile:hover {
  background: rgba(255, 255, 255, 0.05);
}
.audience-fit__panel--no .audience-fit__tile:hover {
  background: rgba(255, 255, 255, 0.03);
}
.audience-fit__tile-ico {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  will-change: box-shadow, filter;
}
.audience-fit__panel--yes .audience-fit__tile-ico {
  background: var(--bg-subtle);
  border: 1.5px solid var(--color-primary);
  /* Glow removed as per request */
}
.audience-fit__panel--yes .audience-fit__tile:nth-child(1) .audience-fit__tile-ico { animation-delay: 0s; }
.audience-fit__panel--yes .audience-fit__tile:nth-child(2) .audience-fit__tile-ico { animation-delay: 0.35s; }
.audience-fit__panel--yes .audience-fit__tile:nth-child(3) .audience-fit__tile-ico { animation-delay: 0.7s; }
.audience-fit__panel--yes .audience-fit__tile:nth-child(4) .audience-fit__tile-ico { animation-delay: 1.05s; }
.audience-fit__panel--yes .audience-fit__tile-ico svg {
  stroke: var(--text-main);
  fill: none;
  display: block;
}
.audience-fit__panel--no .audience-fit__tile-ico {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.35);
  animation: audience-fit-ico-pulse-no 3.2s ease-in-out infinite;
}
.audience-fit__panel--no .audience-fit__tile:nth-child(1) .audience-fit__tile-ico { animation-delay: 0s; }
.audience-fit__panel--no .audience-fit__tile:nth-child(2) .audience-fit__tile-ico { animation-delay: 0.5s; }
.audience-fit__panel--no .audience-fit__tile-ico svg {
  stroke: var(--border-subtle);
  fill: none;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .audience-fit__tile-ico {
    animation: none !important;
    will-change: auto;
  }
  .audience-fit__panel--yes .audience-fit__tile-ico {
    box-shadow: 0 0 12px rgba(163, 230, 53, 0.3);
  }
}
.audience-fit__tile-main {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}
.audience-fit__tile-title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #ffffff;
  line-height: 1.4;
  margin: 0;
}
.audience-fit__tile-desc {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 4px 0 0;
}
.audience-fit__panel--yes .audience-fit__tile-desc {
  color: var(--border-subtle);
}
.audience-fit__panel--no .audience-fit__tile-desc {
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .audience-fit__split {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
  .audience-fit__visual {
    max-width: min(400px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .audience-fit__figure {
    height: auto;
    min-height: unset;
  }
  .audience-fit__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: min(70vh, 560px);
    object-fit: cover;
    object-position: center top;
  }
}

/* FEATURES BENTO (nad porównaniem; Ramp-style, robocze placeholdery graficzne) */
.features-bento { position: relative; z-index: 1; padding: clamp(72px, 9vw, 104px) 0; background: hsl(var(--background)); }
.features-bento__header {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(40px, 5vw, 56px);
  text-align: center;
}
.features-bento__label { margin-bottom: 12px; }
.features-bento__heading { font-size: clamp(1.75rem, 3.5vw, 2.55rem); font-weight: 700; line-height: 1.18; margin-bottom: 14px; }
.features-bento__heading-em { color: var(--text-main); }
.features-bento__heading-muted { color: hsl(215 14% 48%); }
.features-bento__lead { font-size: clamp(0.94rem, 1.35vw, 1.05rem); color: hsl(215 14% 42%); line-height: 1.65; max-width: 600px; margin: 0 auto; }
.features-bento-card__click-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: hsl(215 12% 40%);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: left;
}
.features-bento-card__click-note--outside {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  margin: 0;
  padding: 0 4px 0 2px;
  pointer-events: none;
  z-index: 2;
}
.features-bento-card__click-note svg {
  flex-shrink: 0;
  color: hsl(215 12% 32%);
}
.features-bento-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.features-bento-grid__cell--lg {
  grid-column: span 3;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
}
.features-bento-grid > .features-bento-card.features-bento-card--lg {
  grid-column: span 3;
  min-height: 300px;
}
.features-bento-card.features-bento-card--sm {
  grid-column: span 2;
  min-height: 248px;
}
.features-bento-card--lg .features-bento-card__top { padding: 26px 24px 18px; }
.features-bento-card--lg .features-bento-card__title { font-size: 1.2rem; }
.features-bento-card--lg .features-bento-card__teaser { font-size: 0.88rem; }
.features-bento-card--lg .features-bento-card__visual { min-height: 168px; margin: 0 14px 14px; border-radius: 16px; }
.features-bento-card--sm .features-bento-card__top { padding: 18px 16px 12px; }
.features-bento-card--sm .features-bento-card__title { font-size: 0.95rem; }
.features-bento-card--sm .features-bento-card__teaser { font-size: 0.76rem; margin-bottom: 10px; }
.features-bento-card--sm .features-bento-card__hint { font-size: 0.7rem; }
.features-bento-card--sm .features-bento-card__visual { min-height: 108px; margin: 0 10px 10px; border-radius: 12px; }
.features-bento__more {
  text-align: center;
  font-size: 0.84rem;
  color: hsl(215 14% 44%);
  line-height: 1.55;
  max-width: 480px;
  margin: clamp(28px, 4vw, 40px) auto 0;
}
.features-bento__more a { color: hsl(var(--primary)); font-weight: 600; text-decoration: none; }
.features-bento__more a:hover { text-decoration: underline; }
.features-bento-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  min-height: 268px;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: hsl(210 18% 96%);
  cursor: pointer;
  overflow: clip;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  -webkit-tap-highlight-color: transparent;
}
.features-bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.1);
}
.features-bento-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px hsl(var(--primary));
}
.features-bento-card__top {
  padding: 22px 20px 16px;
  flex-shrink: 0;
}
.features-bento-card__title { font-size: 1.02rem; font-weight: 700; color: var(--text-main); margin: 0 0 8px; line-height: 1.25; }
.features-bento-card__teaser { font-size: 0.8rem; color: hsl(215 12% 40%); line-height: 1.45; margin: 0 0 12px; }
.features-bento-card__hint { font-size: 0.74rem; font-weight: 600; color: hsl(215 12% 38%); letter-spacing: -0.01em; }
.features-bento-card__visual {
  flex: 1 1 auto;
  min-height: 118px;
  margin: 0 12px 12px;
  border-radius: 14px;
  position: relative;
  overflow: clip;
  pointer-events: none;
}
.features-bento-card__visual::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55));
}
.features-bento-card__visual--1 { background: linear-gradient(155deg, var(--border-subtle) 0%, var(--border-subtle) 40%, var(--color-primary) 100%); }
.features-bento-card__visual--2 { background: linear-gradient(160deg, var(--border-subtle) 0%, var(--color-success) 45%, var(--color-success) 100%); }
.features-bento-card__visual--3 { background: linear-gradient(165deg, var(--border-subtle) 0%, var(--color-primary) 42%, var(--color-primary) 100%); }
.features-bento-card__visual--4 { background: linear-gradient(150deg, var(--border-subtle) 0%, var(--color-warning) 50%, var(--color-warning) 100%); }
.features-bento-card__visual--5 { background: linear-gradient(170deg, var(--bg-subtle) 0%, var(--text-muted) 42%, var(--text-muted) 100%); }
.features-bento-card__visual--6 { background: linear-gradient(145deg, var(--border-subtle) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%); }
.features-bento-card__visual--7 { background: linear-gradient(158deg, var(--bg-subtle) 0%, var(--color-success) 48%, var(--color-success) 100%); }
.features-bento-card__visual--8 { background: linear-gradient(165deg, var(--bg-subtle) 0%, var(--border-subtle) 35%, var(--color-primary-dark) 100%); }
.features-bento-card__viz-bars { position: absolute; left: 12%; right: 12%; bottom: 22%; display: flex; align-items: flex-end; gap: 6px; height: 42%; }
.features-bento-card__viz-bar { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.45); min-height: 18%; }
.features-bento-card__viz-bar:nth-child(2) { height: 65%; }
.features-bento-card__viz-bar:nth-child(3) { height: 45%; }
.features-bento-card__viz-bar:nth-child(4) { height: 88%; }

/* Modal otwarty: nie ustawiamy overflow:hidden na html — pasek zostaje (overflow-y: scroll + scrollbar-gutter na html). Tło blokuje JS: body position:fixed. */
html.feat-modal-open {
  overscroll-behavior: none;
}

/* Modal funkcji — rozjaśnione tło; panel na pełną wysokość do dołu ekranu (jak Stripe) */
.features-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  padding: max(36px, calc(env(safe-area-inset-top) + 28px)) max(14px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px, env(safe-area-inset-left));
  pointer-events: none;
}
@media (min-width: 961px) {
  .features-modal {
    padding-top: max(96px, calc(env(safe-area-inset-top) + 80px));
  }
}
.features-modal.features-modal--open {
  pointer-events: auto;
}
.features-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.features-modal--open .features-modal__backdrop {
  opacity: 1;
}
.features-modal__panel {
  --feat-purple: var(--color-primary);
  --feat-purple-dark: var(--color-primary);
  --feat-amber: var(--color-warning);
  --feat-amber-dark: var(--color-warning);
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: min(1080px, 100%);
  max-width: calc(100vw - 28px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: clip;
  padding: 0;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  border: none;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.14), 0 8px 32px rgba(91, 77, 255, 0.08);
  opacity: 0;
  transform: translateY(22px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}
.features-modal--open .features-modal__panel {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .features-modal__backdrop,
  .features-modal__panel {
    transition-duration: 0.01ms !important;
  }
  .features-modal__panel {
    transform: none;
  }
  .features-modal--open .features-modal__panel {
    transform: none;
  }
}
.features-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(52px, 6vw, 60px) clamp(22px, 3.2vw, 40px) clamp(28px, 4vw, 44px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.features-modal__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.features-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--border-subtle);
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 4;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
.features-modal__close:hover { background: var(--border-subtle); color: var(--color-primary-dark); }

.feat-modal__head {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 38%);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  padding-right: 48px;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.feat-modal__title {
  
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
  margin: 0 0 12px;
}
.feat-modal__lead { font-size: clamp(0.9rem, 1.25vw, 0.98rem); color: hsl(215 14% 40%); line-height: 1.65; margin: 0 0 20px; max-width: 42ch; }
.feat-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.feat-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  
  
  
  
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;

    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
.feat-modal__btn--primary {
  
  
  
  box-shadow: 0 4px 14px rgba(91, 77, 255, 0.35);

    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
.feat-modal__btn--primary:hover { background: var(--feat-purple-dark); transform: translateY(-1px); }
.feat-modal__btn--primary svg { width: 16px; height: 16px; flex-shrink: 0; }
.feat-modal__btn--ghost {
  background: transparent;
  color: var(--feat-purple);
  border: 1.5px solid var(--feat-purple);
}
.feat-modal__btn--ghost:hover { background: rgba(91, 77, 255, 0.06); }

.feat-modal__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.feat-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-primary-dark);
}
.feat-modal__check-ic {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--feat-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 2px 8px rgba(233, 160, 8, 0.4);
}
.feat-modal__check-ic svg { width: 11px; height: 11px; color: #ffffff; }

.feat-modal__lead2 { font-size: clamp(0.86rem, 1.15vw, 0.94rem); color: hsl(215 14% 44%); line-height: 1.65; margin: 0 0 20px; max-width: 50ch; }

.feat-modal__dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 20px);
  margin-bottom: clamp(22px, 3vw, 32px);
}
.feat-modal__demo-card {
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feat-modal__demo-cap { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.feat-modal__demo-inv { background: #ffffff; border-radius: 10px; padding: 14px 16px; border: 1px solid var(--border-subtle); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05); }
.feat-modal__demo-inv-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.feat-modal__demo-inv-sum { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-main); }
.feat-modal__demo-inv-due { font-size: 0.72rem; color: var(--text-muted); }
.feat-modal__demo-meter { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; }
.feat-modal__demo-meter-bar { height: 8px; border-radius: 4px; background: var(--border-subtle); overflow: clip; }
.feat-modal__demo-meter-fill { height: 100%; width: 68%; border-radius: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-primary)); }
.feat-modal__demo-chart-lbl { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); margin: 8px 0 6px; }
.feat-modal__demo-seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.feat-modal__demo-seg span { font-size: 0.68rem; padding: 6px 10px; border-radius: 8px; background: #ffffff; border: 1px solid var(--text-muted); color: var(--text-muted); }
.feat-modal__demo-seg span.is-on { background: var(--bg-subtle); border-color: var(--border-subtle); color: var(--color-primary); font-weight: 600; }
.feat-modal__demo-field { margin-top: 6px; }
.feat-modal__demo-field label { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.feat-modal__demo-input { width: 100%; padding: 8px 10px; font-size: 0.8rem; border: 1px solid var(--text-muted); border-radius: 8px; background: #ffffff; color: var(--text-main); }
.feat-modal__demo-dd { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #ffffff; border: 1px solid var(--text-muted); border-radius: 8px; font-size: 0.78rem; color: var(--color-primary-dark); }

.feat-modal__more { margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(22px, 3vw, 28px); border-top: 1px solid rgba(15, 23, 42, 0.08); }
.feat-modal__more-title { font-size: clamp(1.05rem, 2vw, 1.2rem); font-weight: 700; color: var(--text-main); margin: 0 0 18px; letter-spacing: -0.03em; }
.feat-modal__more-list { display: flex; flex-direction: column; gap: 0; }
.feat-modal__more-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); text-decoration: none; color: inherit; transition: background 0.15s ease; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.feat-modal__more-row:last-child { border-bottom: none; }
.feat-modal__more-row:hover { background: rgba(91, 77, 255, 0.04); }
.feat-modal__more-row h4 { font-size: 0.92rem; font-weight: 600; color: var(--text-main); margin: 0 0 4px; }
.feat-modal__more-row p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 0; max-width: 42ch; }
.feat-modal__more-arr { flex-shrink: 0; color: var(--feat-purple); margin-top: 4px; }
.feat-modal__more-arr svg { width: 20px; height: 20px; display: block; }

.feat-modal__visual-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 24px);
  padding: clamp(18px, 2.5vw, 26px);
  background: linear-gradient(160deg, var(--bg-subtle) 0%, var(--bg-subtle) 45%, var(--bg-subtle) 100%);
  border-radius: 14px;
  margin-bottom: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(91, 77, 255, 0.08);
}
.feat-modal__col--mock { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.feat-modal__col--stats { display: flex; flex-direction: column; gap: 12px; }

.feat-modal-phone {
  width: min(160px, 42vw);
  padding: 9px;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--color-primary-dark), var(--color-primary-dark));
  box-shadow: 0 20px 50px rgba(30, 27, 75, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: rotate(-7deg);
}
.feat-modal-phone__screen {
  border-radius: 20px;
  background: var(--bg-subtle);
  min-height: 210px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.feat-ui-cap { font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-bottom: 4px; }
.feat-ui-row { height: 8px; border-radius: 4px; background: var(--border-subtle); }
.feat-ui-row--sm { width: 55%; }
.feat-ui-pill { font-size: 9px; font-weight: 600; padding: 6px 10px; border-radius: 8px; text-align: center; }
.feat-ui-pill--dark { background: var(--text-main); color: #ffffff; }
.feat-ui-pill--muted { background: var(--border-subtle); color: var(--color-primary); }
.feat-ui-chip { font-size: 8px; padding: 5px 8px; border-radius: 6px; background: #ffffff; border: 1px solid var(--border-subtle); color: var(--text-muted); }
.feat-ui-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; margin-top: auto; padding-top: 8px; }
.feat-ui-bar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--color-primary), var(--color-primary)); min-height: 12px; }
.feat-ui-bar:nth-child(1) { height: 35%; }
.feat-ui-bar:nth-child(2) { height: 72%; }
.feat-ui-bar:nth-child(3) { height: 50%; }
.feat-ui-bar:nth-child(4) { height: 90%; }
.feat-ui-bar--teal { background: linear-gradient(180deg, var(--color-success), var(--color-success)); }
.feat-ui-bar--sun { background: linear-gradient(180deg, var(--color-warning), var(--color-danger)); }

.feat-stat-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.feat-stat-card__val { font-size: clamp(1.65rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--feat-amber-dark); line-height: 1; margin-bottom: 8px; }
.feat-stat-card__lbl { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin: 0; }

.feat-chart-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  flex: 1;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}
.feat-chart-card__hdr { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.feat-chart-card .feat-ui-bars { margin-top: 0; flex: 1; height: 64px; }

.feat-modal__foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  padding-top: 4px;
}
.feat-modal__foot-col { text-align: left; }
.feat-modal__foot-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--color-warning);
}
.feat-modal__foot-ic svg { width: 18px; height: 18px; }
.feat-modal__foot-text { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

.feat-modal__pager {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 18px;
}
.feat-modal__pager span {
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 100px;
  background: var(--border-subtle);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

@media (max-width: 720px) {
  .feat-modal__head { grid-template-columns: 1fr; padding-right: 0; }
  .feat-modal__dual { grid-template-columns: 1fr; }
  .feat-modal__demo-card { min-height: auto; }
  .feat-modal__visual-box { grid-template-columns: 1fr; }
  .feat-modal__col--mock { min-height: 160px; }
  .feat-modal-phone { transform: rotate(-4deg); }
  .feat-modal__foot { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .features-bento-grid { grid-template-columns: 1fr; }
  .features-bento-grid__cell--lg { grid-column: span 1; }
  .features-bento-grid > .features-bento-card.features-bento-card--lg,
  .features-bento-card.features-bento-card--sm { grid-column: span 1; min-height: auto; }
  .features-bento-card--lg .features-bento-card__visual,
  .features-bento-card--sm .features-bento-card__visual { min-height: 132px; }
}
@media (max-width: 560px) {
  .features-bento-card { min-height: auto; }
  .features-bento-card__visual { min-height: 120px; }
  .features-modal__scroll { padding: 48px 18px 22px; }
}

/* COMPARISON */
.comparison { position: relative; z-index: 1; padding: 100px 0; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.comp-card { padding: 36px 32px; border-radius: 20px; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(20px) saturate(1.3); position: relative; overflow: clip; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.comp-card--dim { opacity: 0.7; }
.comp-card--highlight { border-color: rgba(0,180,216,0.25); background: linear-gradient(135deg, rgba(0,180,216,0.06), var(--glass-bg)); box-shadow: var(--neon-glow); }
.comp-card--highlight::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent); }
.comp-tag { display: inline-flex; padding: 5px 12px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 6px; margin-bottom: 24px; }
.comp-tag--old { background: rgba(255,80,80,0.1); color: var(--color-danger); border: 1px solid rgba(255,80,80,0.15); }
.comp-tag--new { background: rgba(0,180,216,0.1); color: hsl(var(--primary)); border: 1px solid rgba(0,180,216,0.2); }
.comp-card h3 {  font-weight: 700; margin-bottom: 14px; }
.comp-card .desc { font-size: 0.88rem; color: hsl(var(--muted)); line-height: 1.6; margin-bottom: 24px; }
.comp-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 0.85rem; line-height: 1.5; color: hsl(200 15% 70%); }
.comp-row .dot { width: 7px; height: 7px; min-width: 7px; border-radius: 2px; margin-top: 6px; }
.comp-card--dim .dot { background: var(--color-danger); }
.comp-card--highlight .dot { background: hsl(var(--primary)); }
.comp-metric { margin-top: 28px; padding-top: 24px;  display: flex; justify-content: space-between; align-items: flex-end; }
.comp-metric-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted)); }
.comp-metric-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.comp-card--dim .comp-metric-value { color: var(--color-danger); }
.comp-card--highlight .comp-metric-value { color: hsl(var(--primary)); }
.comp-bottom-cta { text-align: center; margin-top: 48px; }
.comp-bottom-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 0.88rem; font-weight: 600; color: hsl(var(--foreground)); border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(12px); border-radius: 100px; text-decoration: none; transition: all 0.3s ease; }
.comp-bottom-cta a:hover { border-color: rgba(15,23,42,0.18); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); background: #ffffff; }
.roi-callout { margin-top: 32px; padding: 20px 28px; background: linear-gradient(135deg, rgba(0,180,216,0.08), rgba(0,180,216,0.02)); border: 1px solid rgba(0,180,216,0.2); border-radius: 14px; display: flex; align-items: center; gap: 20px; }
.roi-callout .roi-val { font-size: 2rem; font-weight: 800; color: hsl(var(--primary)); letter-spacing: -0.03em; white-space: nowrap; }
.roi-callout .roi-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(200 15% 70%); }

/* STATS */
.stats { position: relative; z-index: 1; padding: 100px 0; }
.stat-hero { text-align: center; padding: 64px 32px; margin-bottom: 48px; background: #ffffff; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 24px; position: relative; overflow: clip; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05); }
.stat-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 80%, rgba(0,180,216,0.1) 0%, transparent 50%); pointer-events: none; }
.stat-hero-number { font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(135deg, hsl(var(--primary)), hsl(190 80% 75%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; position: relative; filter: drop-shadow(0 0 40px rgba(0,180,216,0.3)); }
.stat-hero-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted)); margin-bottom: 12px; }
.stat-hero-tag { display: inline-flex; padding: 5px 14px; background: rgba(0,180,216,0.08); border: 1px solid rgba(0,180,216,0.15); border-radius: 100px; font-size: 0.72rem; font-weight: 600; color: hsl(var(--primary)); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; }
.stat-hero-desc { font-size: 0.92rem; color: hsl(var(--muted)); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-card { padding: 32px 28px; background: #ffffff; backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--glass-border); border-radius: 20px; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.stat-card:hover { border-color: rgba(0,180,216,0.28); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08); transform: translateY(-4px); }
.stat-number { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; color: hsl(var(--foreground)); margin-bottom: 6px; }
.stat-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 6px; }
.stat-context { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted)); margin-bottom: 14px; }
.stat-desc { font-size: 0.84rem; color: hsl(200 15% 55%); line-height: 1.55; }

/* IMG PLACEHOLDER */
.img-placeholder-section { position: relative; z-index: 1; padding: 0 0 40px; }
.img-placeholder { width: 100%; aspect-ratio: 16/9; max-height: 400px; background: rgba(6,8,16,0.8); display: flex; align-items: center; justify-content: center;  border-bottom: 1px solid var(--glass-border); flex-direction: column; text-align: center; padding: 2rem; gap: 12px; }
.img-placeholder span { font-size: 0.78rem; color: hsl(var(--muted)); max-width: 500px; line-height: 1.5; }
.img-placeholder span:first-child { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(200 15% 40%); }

/* WPROWADZENIE / WDROŻENIE — kreatywna sekcja */
.wprowadzenie {
  padding: clamp(56px, 7vw, 88px) 0 clamp(72px, 10vw, 112px);
  background: hsl(var(--background));
  position: relative;
}

.wprowadzenie-head {
  text-align: center;
  max-width: min(900px, 100%);
  margin: 0 auto clamp(20px, 3vw, 30px);
}

/* Krótki lead — dużo powietrza, bez drugiej „warstwy” nagłówka */
.wprowadzenie .mtr-lede {
  margin: 0 0 clamp(22px, 3vw, 34px);
  max-width: 38rem;
  font-size: clamp(0.94rem, 1.2vw, 1.05rem);
  font-weight: 450;
  line-height: 1.65;
  letter-spacing: -0.015em;
  color: hsl(215 14% 38%);
}

.wprowadzenie-footer--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: min(640px, 100%);
  margin: clamp(40px, 6vw, 68px) auto 0;
}

.wprowadzenie-footer__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}

.wprowadzenie-footer__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  color: hsl(215 16% 38%);
  line-height: 1.65;
}

.wprowadzenie-footer__btn.hero-cta {
  animation: none;
}

/* Pionowy „film” wdrożenia — długi scroll, oś czasu, wysokość ≈ czas trwania */
.wprowadzenie-scroll-inner {
  --wpro-rail: 44px;
  --wpro-gap: clamp(14px, 2vw, 24px);
  display: grid;
  grid-template-columns: var(--wpro-rail) minmax(0, 1fr);
  gap: var(--wpro-gap);
  max-width: min(760px, 100%);
  margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 961px) {
  .wprowadzenie-scroll-inner {
    --wpro-rail: 48px;
    --wpro-gap: clamp(18px, 1.8vw, 32px);
    max-width: 100%;
  }
}

.wprowadzenie-timeline-col {
  position: relative;
  display: flex;
  justify-content: center;
}

.wprowadzenie-timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.1);
}

.wprowadzenie-timeline-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: var(--roadmap-fill-pct, 0%);
  max-height: 100%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 50%, var(--color-primary) 100%) !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.wprowadzenie-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.5vh, 36px);
}

.wprowadzenie .mtr-rail-node {
  position: absolute;
  left: calc(-1 * (var(--wpro-rail) + var(--wpro-gap)) + var(--wpro-rail) / 2);
  top: 32px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid hsl(var(--primary));
  box-shadow: 0 0 0 6px hsl(195 80% 97%), 0 3px 14px rgba(0, 180, 216, 0.22);
  z-index: 3;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.wprowadzenie .mtr-level {
  position: relative;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 6px;
  overflow: clip;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.45s ease, opacity 0.5s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 14px 40px -18px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0.88;
  transform: translateY(16px) scale(0.985);
}

.wprowadzenie .mtr-level::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(148, 163, 184, 0.06) 0%, transparent 42%);
  pointer-events: none;
  opacity: 1;
}

.wprowadzenie .mtr-level > *:not(.mtr-rail-node) { position: relative; z-index: 1; }

.wprowadzenie .mtr-level.is-mtr-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(15, 23, 42, 0.11);
  box-shadow: 0 1px 0 #ffffff inset, 0 20px 50px -20px rgba(15, 23, 42, 0.1);
}

.wprowadzenie .mtr-level.is-mtr-active .mtr-rail-node {
  transform: translateX(-50%) scale(1.12);
  box-shadow: 0 0 0 6px #f1f5f9, 0 0 15px rgba(59, 130, 246, 0.3);
}

@media (min-width: 961px) {
  .wprowadzenie .mtr-level--dur-sm { min-height: auto; }
  .wprowadzenie .mtr-level--dur-md { min-height: auto; }
  .wprowadzenie .mtr-level--dur-lg { min-height: auto; }
}

@media (max-width: 960px) {
  .wprowadzenie .mtr-level--dur-sm { min-height: auto; }
  .wprowadzenie .mtr-level--dur-md { min-height: auto; }
  .wprowadzenie .mtr-level--dur-lg { min-height: auto; }
}

.wprowadzenie .mtr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(14px, 2vw, 20px);
  flex-wrap: wrap;
}

.wprowadzenie .mtr-rank {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.78rem, 1.05vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(193 85% 26%);
  padding: 9px 16px 9px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, hsl(195 95% 97%) 0%, hsl(195 80% 94%) 100%);
  border: 1px solid rgba(0, 180, 216, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 4px 14px rgba(0, 180, 216, 0.12);
}

.wprowadzenie .mtr-rank::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: hsl(var(--primary));
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.5), 0 2px 8px rgba(0, 180, 216, 0.35);
  flex-shrink: 0;
}

.wprowadzenie .mtr-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 180, 216, 0.22);
  background: hsl(195 80% 96%);
  color: hsl(var(--primary));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wprowadzenie .mtr-title {
  font-size: clamp(1.18rem, 2.2vw, 1.42rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin: 0 0 clamp(12px, 1.8vw, 18px);
  color: hsl(var(--foreground));
}

@media (min-width: 961px) {
  .wprowadzenie .mtr-level--dur-lg .mtr-title { font-size: clamp(1.22rem, 2.3vw, 1.5rem); }
}

.wprowadzenie .mtr-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wprowadzenie .mtr-point {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  color: hsl(var(--foreground));
  font-size: clamp(0.94rem, 1.35vw, 1.05rem);
  font-weight: 600;
  line-height: 1.4;
}

.wprowadzenie .mtr-bullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsl(195 70% 96%);
  border: 1px solid rgba(0, 180, 216, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wprowadzenie .mtr-bullet svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: hsl(var(--primary));
  stroke-width: 2.2;
}

/* Lista akordeonów — linie, bez „pills”, modernistyczny rytm */
.wprowadzenie .mtr-toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.wprowadzenie .mtr-toggle {
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  overflow: clip;
  transition: border-color 0.25s ease;
  interpolate-size: allow-keywords;
}

.wprowadzenie .mtr-toggle:last-child {
  border-bottom: none;
}

/* Jak w FAQ: płynne rozwijanie treści (::details-content + interpolate-size) */
.wprowadzenie .mtr-toggle::details-content {
  transition: height 0.45s cubic-bezier(0.33, 1, 0.68, 1), block-size 0.45s cubic-bezier(0.33, 1, 0.68, 1), content-visibility 0.45s allow-discrete;
  overflow: clip;
}

.wprowadzenie .mtr-toggle:not([open])::details-content {
  height: 0;
  block-size: 0;
}

.wprowadzenie .mtr-toggle[open]::details-content {
  height: auto;
  block-size: auto;
}

.wprowadzenie .mtr-toggle[open] {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

.wprowadzenie .mtr-toggle summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(14px, 1.8vw, 18px) 2px clamp(14px, 1.8vw, 18px) 0;
  font-weight: 600;
  font-size: clamp(0.88rem, 1.1vw, 0.96rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: hsl(222 30% 16%);
  transition: color 0.2s ease;
}

.wprowadzenie .mtr-toggle summary:hover {
  color: hsl(var(--primary));
}

.wprowadzenie .mtr-toggle summary:hover .mtr-toggle__ico {
  border-color: rgba(0, 180, 216, 0.35);
  color: hsl(var(--primary));
  background: rgba(0, 180, 216, 0.09);
}

.wprowadzenie .mtr-toggle summary::-webkit-details-marker { display: none; }

.wprowadzenie .mtr-toggle__lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.wprowadzenie .mtr-toggle__ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 180, 216, 0.06);
  border: 1px solid rgba(0, 180, 216, 0.14);
  color: hsl(193 75% 34%);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wprowadzenie .mtr-toggle__ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wprowadzenie .mtr-toggle__label { flex: 1; min-width: 0; text-align: left; padding-top: 6px; }

.wprowadzenie .mtr-toggle__chev {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(215 12% 58%);
  font-size: 0.6rem;
  margin-top: 8px;
  transition: transform 0.3s ease, color 0.2s ease;
}

.wprowadzenie .mtr-toggle[open] .mtr-toggle__chev { transform: rotate(180deg); color: hsl(var(--primary)); }

.wprowadzenie .mtr-toggle[open] .mtr-toggle__ico {
  border-color: rgba(0, 180, 216, 0.32);
  background: rgba(0, 180, 216, 0.1);
  color: hsl(var(--primary));
}

.wprowadzenie .mtr-toggle__body {
  padding: 0 0 clamp(16px, 2vw, 22px);
  padding-left: calc(36px + 12px);
  font-size: 0.86rem;
  color: hsl(215 12% 42%);
  line-height: 1.6;
}

.wprowadzenie .mtr-toggle__body p { margin: 0; max-width: 52ch; }

.wprowadzenie .mtr-outcome {
  margin-top: auto;
  padding-top: clamp(22px, 3vw, 32px);
  margin-bottom: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  font-size: clamp(0.84rem, 1.05vw, 0.92rem);
  font-weight: 500;
  color: hsl(215 14% 36%);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 40rem;
}

@media (prefers-reduced-motion: reduce) {
  .wprowadzenie-timeline-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: var(--roadmap-fill-pct, 0%);
  max-height: 100%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 50%, var(--color-primary) 100%) !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}
  .wprowadzenie .mtr-level { transition: none; transform: none; opacity: 1; }
  .wprowadzenie .mtr-rail-node { transition: none; }
}

.wprowadzenie-footer:not(.wprowadzenie-footer--cta) {
  text-align: center;
  max-width: 640px;
  margin: 80px auto 0;
  font-size: 1.05rem;
  color: hsl(215 16% 42%);
  line-height: 1.7;
}

/* MARQUEE / EKOSYSTEM INTEGRACJI */
.marquee-section { position: relative; z-index: 1; padding: clamp(72px, 12vw, 120px) 0 clamp(88px, 14vw, 140px); overflow: clip; }
.marquee-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 75%, rgba(0, 180, 216, 0.045) 0%, transparent 55%),
    linear-gradient(180deg, hsl(210 40% 99.5%) 0%, #ffffff 22%, #ffffff 78%, hsl(210 35% 98.5%) 100%);
}
.marquee-section .container { position: relative; z-index: 1; }
.marquee-section__intro { text-align: center; max-width: 720px; margin: 0 auto; }
.marquee-section .section-label { color: hsl(187 72% 38%); letter-spacing: 0.14em; }
.marquee-sublabel { text-align: center; font-size: clamp(0.82rem, 1.35vw, 0.92rem); color: hsl(200 14% 42%); max-width: 560px; margin: 0 auto clamp(40px, 6vw, 56px); line-height: 1.62; }
.ecosystem-marquees { display: flex; flex-direction: column; gap: clamp(14px, 2.2vw, 22px); margin-top: 8px; position: relative; z-index: 1; }
.ecosystem-marquee-row {
  overflow: clip;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--text-main) 8%, var(--text-main) 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--text-main) 8%, var(--text-main) 92%, transparent 100%);
}
.ecosystem-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(12px, 1.8vw, 18px);
  animation: ecosystemMarqueeL 156s linear infinite;
  will-change: transform;
}
.ecosystem-marquee-track--rev {
  animation-name: ecosystemMarqueeR;
  animation-duration: 192s;
}
.ecosystem-marquee-track--slow {
  animation-duration: 234s;
}
.ecosystem-marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(12px, 1.8vw, 18px);
  padding-right: clamp(12px, 1.8vw, 18px);
}
@keyframes ecosystemMarqueeL { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes ecosystemMarqueeR { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: clamp(14px, 2vw, 20px) clamp(20px, 2.5vw, 28px);
  min-height: 48px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  font-size: clamp(0.62rem, 1.1vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: hsl(215 18% 35%);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 20px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.brand-item:hover {
  border-color: rgba(0, 180, 216, 0.35);
  color: hsl(var(--foreground));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 10px 32px rgba(0, 180, 216, 0.1), 0 4px 12px rgba(15, 23, 42, 0.06);
}
@media (max-width: 576px) {
  .ecosystem-marquees { gap: 12px; }
  .ecosystem-marquee-row:nth-child(3) { display: none; }
  .ecosystem-marquee-track { animation-duration: 126s; }
  .ecosystem-marquee-track--rev { animation-duration: 150s; }
}

/* PRICING / KOSZTY (jasny motyw) */
.pricing-section { position: relative; z-index: 1; padding: clamp(72px, 11vw, 110px) 0; background: linear-gradient(180deg, hsl(210 40% 99.2%) 0%, #ffffff 55%, #ffffff 100%); }
.pricing-section .section-label { display: block; text-align: center; width: 100%; }
.pricing-section .section-heading { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.pricing-section .section-sub { text-align: center; margin-left: auto; margin-right: auto; max-width: 620px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.8vw, 34px);
  margin-top: 12px;
  align-items: stretch;
}
.pricing-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 24px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.pricing-tier:hover {
  border-color: rgba(14, 165, 233, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 14px 40px rgba(14, 165, 233, 0.1), 0 6px 16px rgba(15, 23, 42, 0.06);
}
.pricing-tier:has(.pricing-tier__more[open]) {
  border-color: rgba(14, 165, 233, 0.42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 14px 44px rgba(14, 165, 233, 0.14), 0 6px 16px rgba(15, 23, 42, 0.07);
}
.pricing-tier--featured {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.07), #ffffff);
  border-color: rgba(14, 165, 233, 0.22);
}
.pricing-tier-list--preview { margin-top: 8px; margin-bottom: 0; gap: 18px; }
.pricing-tier-list.pricing-tier-list--preview li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-left: 0;
}
.pricing-tier-list.pricing-tier-list--preview li::before { display: none; }
.pricing-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.22);
  color: hsl(var(--primary));
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.08);
}
.pricing-benefit-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pricing-benefit-body { display: block; padding-top: 2px; line-height: 1.62; }
/* Lista + oddech w wierszu 1fr — wyrównuje górę details między kolumnami */
.pricing-tier__mid {
  grid-row: 4;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.pricing-tier__mid .pricing-tier-list--preview {
  flex: 0 0 auto;
}
/* Stały odstęp lista → linia / rozwinięcie */
.pricing-tier__breather {
  flex: 0 0 auto;
  margin-top: auto;
  min-height: clamp(22px, 2.8vw, 32px);
  pointer-events: none;
}
.pricing-tier__more {
  grid-row: 5;
  align-self: stretch;
  margin-top: 0;
  width: 100%;
  padding-top: 22px;
  margin-bottom: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}
/* Ta sama wysokość bloku po otwarciu — kreska nie „schodzi” tylko w jednej kolumnie */
@media (min-width: 961px) {
  .pricing-tier__more[open] {
    min-height: 23.5rem;
  }
  .pricing-tier__more[open] .pricing-tier__more-panel {
    min-height: 14.75rem;
  }
}
.pricing-tier__more > summary {
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.pricing-tier__more > summary::-webkit-details-marker { display: none; }
.pricing-tier__more > summary::marker { content: ''; }
.pricing-tier__more > summary:focus { outline: none; }
.pricing-tier__more > summary:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  border-radius: 14px;
}
.pricing-tier__more-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  margin-top: 0;
  border-radius: 10px;
  border: none;
  background: transparent;
  transition: background 0.2s ease;
}
.pricing-tier__more-summary:hover { background: hsl(200 80% 97%); }
.pricing-tier__more[open] .pricing-tier__more-summary {
  background: hsl(200 70% 97%);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  margin-top: 0;
}
.pricing-tier__chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: hsl(var(--primary));
  fill: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-tier__chevron path { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pricing-tier__more[open] .pricing-tier__chevron { transform: rotate(180deg); }
.pricing-tier__more-panel {
  padding: 18px 18px 20px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: hsl(210 45% 98%);
}
/* Jedna linia + stały odstęp do kropek we wszystkich kolumnach (grid 1fr) */
.pricing-tier-list.pricing-tier-list--extra {
  gap: 14px;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid rgba(14, 165, 233, 0.4);
}
.pricing-tier-list.pricing-tier-list--extra li {
  line-height: 1.62;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 20px;
}
.pricing-tier-list.pricing-tier-list--extra li::before {
  top: 0.62em;
}
.pricing-tier-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(193 75% 32%);
  border: 1px solid rgba(14, 165, 233, 0.28);
  background: rgba(14, 165, 233, 0.1);
}
.pricing-tier-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  min-height: calc(1.35em * 2);
  line-height: 1.35;
  color: hsl(var(--foreground));
}
.pricing-price-row { margin-bottom: 20px; min-height: 4.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.pricing-price { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; color: hsl(var(--primary)); line-height: 1.1; }
.pricing-price-suffix { font-size: 0.82rem; font-weight: 600; color: hsl(var(--muted)); letter-spacing: 0.02em; }
.pricing-tier-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pricing-tier-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: hsl(215 16% 38%);
}
.pricing-tier-list li strong { color: hsl(222 35% 20%); font-weight: 700; }
.pricing-tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--primary));
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.45);
}
.pricing-section-cta { margin-top: clamp(28px, 4vw, 40px); text-align: center; }
.pricing-section-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: hsl(var(--primary));
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 100px;
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pricing-section-cta a:hover { box-shadow: 0 8px 28px rgba(14, 165, 233, 0.35); transform: translateY(-2px); }
/* Logotypy klientów pod pakietami — podmień pliki w images/client-logos/ */
.pricing-clients {
  margin-top: clamp(32px, 4.5vw, 48px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-clients__label {
  margin: 0 0 clamp(18px, 2.5vw, 24px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(215 12% 52%);
}
.pricing-clients__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.2vw, 22px) clamp(20px, 3.5vw, 36px);
}
.pricing-clients__item {
  margin: 0;
  flex: 0 0 auto;
}
.pricing-clients__logo {
  display: block;
  height: clamp(26px, 3.2vw, 34px);
  width: auto;
  max-width: min(148px, 28vw);
  object-fit: contain;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.pricing-clients__logo:hover {
  opacity: 0.92;
  filter: grayscale(0.35);
}
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .pricing-clients__list { gap: 14px 20px; }
}

/* CTA */
.cta-section { position: relative; z-index: 1; padding: 100px 0 60px; }
.cta-section::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,180,216,0.25), transparent); }
.cta-section-intro { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.cta-section-intro h2 {  font-weight: 700; margin-bottom: 12px; }
.cta-section-intro .cta-sub { font-size: 0.95rem; color: hsl(var(--muted)); line-height: 1.65; margin: 0; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); gap: clamp(24px, 4vw, 40px); align-items: start; }
.cta-photo {
  margin: 0;
  border-radius: 20px;
  overflow: clip;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  background: hsl(210 35% 96%);
}
.cta-photo img {
  display: block;
  width: 100%;
  height: clamp(320px, 52vh, 520px);
  object-fit: cover;
  object-position: center 28%;
}
.cta-photo__credit {
  display: block;
  padding: 10px 14px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: hsl(var(--muted));
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.cta-form-column { min-width: 0; }
.form-container { padding: 36px 32px; background: #ffffff; backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 16px 48px rgba(15, 23, 42, 0.06); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-grid--single { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; margin-bottom: 8px; }
.form-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--muted)); margin-bottom: 8px; transition: color 0.3s; }
.form-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--glass-border); color: hsl(var(--foreground)); font-family: inherit; font-size: 1rem; padding: 8px 0; outline: none; transition: border-color 0.3s; }
.form-input::placeholder { color: hsl(215 12% 58%); }
.form-input:focus { border-bottom-color: hsl(var(--primary)); }
.form-group:focus-within .form-label { color: hsl(var(--primary)); }
textarea.form-input { resize: vertical; min-height: 60px; }
.form-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; font-size: 0.8rem; color: hsl(var(--muted)); cursor: pointer; }
.form-consent input[type="checkbox"] { margin-top: 3px; accent-color: hsl(var(--primary)); }
.form-consent a { color: hsl(var(--foreground)); text-decoration: underline; }
.form-submit { width: 100%; margin-top: 24px; padding: 16px 32px; background: hsl(var(--foreground)); color: #ffffff; font-family: inherit; font-size: 0.92rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
.form-submit:hover { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.15); transform: translateY(-2px); background: var(--text-main); }
#form-status { margin-top: 12px; font-size: 0.85rem; text-align: center; display: none; }
.cta-meet-cta-wrap {
  margin-top: 24px;
  padding-top: 20px;
  
}
.cta-meet-cta {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: hsl(210 80% 98%);
  color: hsl(var(--foreground));
  cursor: not-allowed;
  opacity: 0.78;
  transition: border-color 0.25s, opacity 0.25s;
}

/* FAQ — jasny motyw (jak karty roadmapy / brand) */
.faq-section { position: relative; z-index: 1; padding: 88px 0 48px;  }
.faq-section .section-sub { margin-bottom: 40px; }
.faq-section-layout {
  display: block;
}
/* Ta sama szerokość kolumny z pytaniami co przy siatce 1fr + 0.4fr (udział 1/1.4 po odjęciu odstępu między kolumnami) */
.faq-section-main {
  min-width: 0;
  max-width: calc((100% - clamp(32px, 5vw, 56px)) / 1.4);
}
.faq-categories { display: flex; flex-direction: column; gap: 28px; max-width: none; margin: 0; }
@media (max-width: 900px) {
  .faq-section-main { max-width: none; }
}
.faq-category {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 0;
  overflow: clip;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.faq-category:hover { border-color: rgba(0, 180, 216, 0.22); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06); }
.faq-category-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
}
.faq-category-summary::-webkit-details-marker { display: none; }
.faq-category-summary-inner { display: flex; align-items: flex-start; gap: 16px; min-width: 0; flex: 1; }
/* Płynne rozwijanie: grid w <details> nie interpoluje — ::details-content + interpolate-size */
.faq-category,
.faq-item {
  interpolate-size: allow-keywords;
}
.faq-category::details-content,
.faq-item::details-content {
  transition: height 0.45s cubic-bezier(0.33, 1, 0.68, 1), block-size 0.45s cubic-bezier(0.33, 1, 0.68, 1), content-visibility 0.45s allow-discrete;
  overflow: clip;
}
.faq-category:not([open])::details-content,
.faq-item:not([open])::details-content {
  height: 0;
  block-size: 0;
}
.faq-category[open]::details-content,
.faq-item[open]::details-content {
  height: auto;
  block-size: auto;
}
.faq-category-panel > .faq-items { min-height: 0; }

.faq-category[open] .faq-category-summary { border-bottom: 1px solid rgba(15, 23, 42, 0.08); padding-bottom: 20px; }
.faq-category-summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2px solid hsl(var(--muted));
  border-bottom: 2px solid hsl(var(--muted));
  transform: rotate(45deg);
  margin-top: 10px;
  transition: transform 0.35s ease, border-color 0.25s ease;
}
.faq-category[open] .faq-category-summary::after { transform: rotate(225deg); margin-top: 14px; border-color: hsl(var(--primary)); }
.faq-category-summary:hover .faq-category-title { color: hsl(var(--primary)); }
.faq-category-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0, 180, 216, 0.1);
  border: 1px solid rgba(0, 180, 216, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary));
}
.faq-category-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq-category-text { min-width: 0; }
.faq-category-title { display: block;  font-weight: 700; letter-spacing: -0.02em; color: hsl(var(--foreground)); line-height: 1.25; margin: 0; transition: color 0.25s ease; }
.faq-category-desc { font-size: 0.84rem; color: hsl(var(--muted)); line-height: 1.55; margin-top: 8px; max-width: 640px; }
.faq-items { padding: 4px 28px 20px; }
.faq-item { border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px 18px 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid hsl(var(--muted));
  border-bottom: 2px solid hsl(var(--muted));
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.35s ease, border-color 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: 4px; border-color: hsl(var(--primary)); }
.faq-item summary:hover { color: hsl(var(--primary)); }
.faq-answer { padding: 0 32px 20px 0; font-size: 0.88rem; color: hsl(var(--muted)); line-height: 1.65; }
.faq-answer p + p { margin-top: 12px; }
@media (max-width: 576px) {
  .faq-category-summary { padding: 20px 18px; }
  .faq-category-summary-inner { flex-direction: column; gap: 12px; }
  .faq-items { padding-left: 18px; padding-right: 18px; }
  .faq-answer { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-category::details-content,
  .faq-item::details-content,
  .wprowadzenie .mtr-toggle::details-content,
  .faq-category-summary::after,
  .faq-item summary::after,
  .wprowadzenie .mtr-toggle__chev {
    transition: none !important;
  }
  .faq-category,
  .faq-item,
  .wprowadzenie .mtr-toggle {
    interpolate-size: numeric-only;
  }
}

/* Page end + footer — wspólne tło (łąka) */
.page-end-band {
  position: relative;
  overflow: clip;
  background: transparent;
}
.page-end-band::before { display: none !important; }
.page-end-band::after { display: none !important; }
.page-end-band .faq-section,
.page-end-band .footer {
  background-color: #0b1329 !important;
  border-top: none !important;
  padding-top: 50px !important;
}
.page-end-band .faq-section {
  border-top-color: var(--ramp-line);
  background: transparent;
}
.page-end-band .faq-asym,
.page-end-band .footer {
  background-color: #0b1329 !important;
  border-top: none !important;
}
.page-end-band .footer {
  padding-top: 50px !important;
}
.page-end-band .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.24);
  color: rgba(248, 250, 252, 0.82);
}
.page-end-band .footer-brand p,
.page-end-band .footer-col a {
  color: rgba(241, 245, 249, 0.85);
}
.page-end-band .footer-brand .addr,
.page-end-band .footer-col h4,
.page-end-band .footer-col a:hover {
  color: #ffffff !important;
}
.page-end-band .footer-brand .footer-tagline,
.footer-brand .footer-tagline {
  color: #3b82f6 !important;
}
.page-end-band .footer-watermark {
  color: rgba(255, 255, 255, 0.07);
}
body.theme-light .page-end-band .footer-logo svg g {
  fill: var(--bg-subtle) !important;
}

/* FOOTER */
.footer { position: relative; z-index: 1; padding: 100px 0 0;  overflow: clip; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .footer-logo { display: inline-block; margin-bottom: 10px; text-decoration: none; }
.footer-brand .footer-logo svg { height: 24px; width: auto; }
.footer-brand .footer-tagline { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 16px; }
.footer-brand p { font-size: 0.82rem; color: hsl(var(--muted)); line-height: 1.6; margin-bottom: 12px; }
.footer-brand .addr { color: hsl(var(--foreground)); }
.footer-col h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--foreground)); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 0.82rem; color: hsl(var(--muted)); text-decoration: none; padding: 4px 0; transition: color 0.25s; }
.footer-col a:hover { color: hsl(var(--foreground)); }
.footer-bottom { text-align: center;  padding: 28px 0; font-size: 0.72rem; color: hsl(var(--muted)); position: relative; z-index: 2; }
.footer-watermark { position: absolute; bottom: -0.1em; left: 50%; transform: translateX(-50%); font-size: clamp(5rem, 13.5vw, 16rem); font-weight: 900; line-height: 0.8; color: rgba(15, 23, 42, 0.04); white-space: nowrap; z-index: 1; pointer-events: none; letter-spacing: -0.04em; text-transform: uppercase; }

/* ANIMATIONS */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1), filter 0.8s cubic-bezier(0.16,1,0.3,1); filter: blur(4px); }
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* RESPONSIVE */
@media (max-width: 860px) {
  :root { --page-pad: 16px; }
  .comparison-grid, .stats-grid, .cta-grid, .form-grid { grid-template-columns: 1fr; }
  .comparison-vs { grid-template-columns: 1fr; }
  .comparison-vs-sep { writing-mode: horizontal-tb; transform: none; padding: 14px; letter-spacing: 0.4em; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .navbar-inner { padding: 10px var(--page-pad); }
  .nav-links { display: none !important; }
  .comp-card { padding: 24px 20px; width: 100%; box-sizing: border-box; }
  .stat-hero { padding: 40px 20px; }
  .form-container { padding: 24px 20px; }
  .comparison-grid { gap: 16px; }
  .comp-compare-table-block { padding: 52px 0 40px; }
  .sem-dark-compare-band .comp-compare-table-block {
    padding-top: clamp(48px, 9vw, 72px);
    padding-bottom: clamp(48px, 9vw, 80px);
  }
  .sem-dark-compare-band .value-you-split { padding-top: 48px; padding-bottom: clamp(32px, 7vw, 48px); }
  .comp-compare-intro { margin-bottom: 28px; }
  .comp-compare-table-card { --cmp-cta-strip: 90px; --cmp-fade-height: min(108px, 34vw); }
  .cmp-table thead th { padding: 12px 12px; }
  .cmp-cell-comp,
  .cmp-cell-brand { padding: 14px 12px; }
  .cmp-cat td { padding: 6px 12px; }
  .light-pillars { padding: 56px 0 48px; }
}
@media (max-width: 576px) {
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 {  }
}
@media (prefers-reduced-motion: reduce) {
  .comp-vs-bar-fill { width: var(--bar-w, 100%) !important; transition: none !important; }
  .hero-morph-word { transition: none !important; }
  .social-proof-marquee-track { animation: none !important; }
  .social-proof-marquee-group[aria-hidden="true"] { display: none !important; }
  .ecosystem-marquee-track { animation: none !important; transform: translateX(0) !important; }
  .ecosystem-marquee-group[aria-hidden="true"] { display: none !important; }
  .promo-bar, .navbar { transition: none !important; }
  .features-bento-card { transition: none !important; }
  .features-bento-card:hover { transform: none !important; }
  .cmp-expand-btn svg { transition: none !important; }
  .comp-compare-table-card.is-expanded .cmp-expand-btn svg { transform: none !important; }
}
/* GLOBAL STATS SECTION — 4 kolumny: ikona → tytuł → opis → duża liczba (na dole) */
.global-stats-section {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--text-main) 0%, var(--text-main) 100%);
  color: #ffffff;
  padding: clamp(80px, 10vw, 120px) 0 0;
  overflow: clip;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.global-stats-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at bottom, rgba(38, 114, 232, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.gss-head {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.gss-title {
  font-family: var(--font-prose);
  
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #ffffff;
}
.gss-rule {
  position: relative;
  z-index: 2;
  max-width: var(--layout-max);
  margin: 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.gss-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 0;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 40px);
}
.gss-stat {
  position: relative;
  text-align: left;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding: clamp(20px, 2.5vw, 32px) clamp(18px, 2.2vw, 28px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 42vh, 420px);
  box-sizing: border-box;
}
.gss-stat:first-child {
  padding-left: 0;
}
.gss-stat:last-child {
  border-right: none;
  padding-right: 0;
}
.gss-stat__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.gss-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(165, 243, 252, 0.22), rgba(14, 165, 233, 0.1) 55%, rgba(8, 47, 73, 0.35));
  border: 1px solid rgba(103, 232, 249, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-subtle);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(34, 211, 238, 0.06),
    0 2px 12px rgba(0, 0, 0, 0.2),
    0 0 28px rgba(34, 211, 238, 0.2),
    0 0 48px rgba(56, 189, 248, 0.1);
}
.gss-ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(165, 243, 252, 0.5)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.28));
}
@media (prefers-reduced-motion: no-preference) {
  .gss-stat:hover .gss-ico {
    border-color: rgba(165, 243, 252, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 1px rgba(34, 211, 238, 0.1),
      0 2px 14px rgba(0, 0, 0, 0.22),
      0 0 32px rgba(34, 211, 238, 0.28),
      0 0 56px rgba(56, 189, 248, 0.14);
  }
  .gss-stat:hover .gss-ico svg {
    filter: drop-shadow(0 0 6px rgba(207, 250, 254, 0.55)) drop-shadow(0 0 14px rgba(56, 189, 248, 0.35));
  }
}
.gss-stat__title {
  margin: 0;
  font-family: var(--font-prose);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.gss-stat__txt {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.72);
  max-width: 280px;
}
.gss-num-wrap {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: clamp(24px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gss-num {
  font-family: var(--font-prose);
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gss-num-accent {
  color: var(--color-primary);
  opacity: 0.9;
  margin-left: 1px;
}
.gss-num-label {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.55);
  max-width: 260px;
}

.gss-visual {
  position: relative;
  min-height: clamp(200px, 30vw, 440px);
  margin-top: clamp(12px, 2.5vw, 28px);
  padding-bottom: clamp(32px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
}
.gss-logo {
  position: relative;
  z-index: 3;
  width: min(108vw, 3800px);
  max-width: none;
  flex-shrink: 0;
  margin-top: auto;
  filter: drop-shadow(0 32px 100px rgba(0, 0, 0, 0.26))
    brightness(var(--gss-logo-bright, 1));
  pointer-events: none;
  user-select: none;
}
.global-stats-section .gss-logo.reveal.visible {
  opacity: 0.03;
}
.gss-logo__motion {
  width: 100%;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .gss-logo__motion { will-change: auto; }
}
.gss-logo svg {
  width: 100%;
  height: auto;
  display: block;
}
.global-stats-section .gss-logo svg g {
  fill: #ffffff !important;
}
.gss-glow {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(38, 114, 232, 0.45) 0%, rgba(75, 160, 251, 0.2) 40%, transparent 70%);
  filter: blur(60px);
  opacity: 0.95;
  border-radius: 50%;
}
.gss-lines {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  background: repeating-conic-gradient(from 270deg at 50% 100%, 
    transparent 0deg, 
    transparent 0.4deg, 
    rgba(155, 211, 255, 0.45) 0.5deg, 
    transparent 0.6deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, black 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 100%, black 10%, transparent 70%);
}
@media (max-width: 960px) {
  .gss-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-top: clamp(28px, 4vw, 40px);
  }
  .gss-stat {
    min-height: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(20px, 3vw, 28px);
  }
  .gss-stat:nth-child(2n) {
    border-right: none;
  }
  .gss-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .gss-stat:first-child,
  .gss-stat:nth-child(3) {
    padding-left: 0;
  }
  .gss-stat:nth-child(2n) {
    padding-right: 0;
  }
  .gss-stat__txt { max-width: 100%; }
}
@media (max-width: 560px) {
  .gss-grid {
    grid-template-columns: 1fr;
  }
  .gss-stat {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .gss-stat:first-child {
    border-top: none;
    padding-top: 0;
  }
}
/* Dynamic Step Overrides for Roadmap Timeline (Blue -> Purple -> Red) */
.wprowadzenie .mtr-step[data-mtr-step="1"] .mtr-rank {
  color: var(--color-primary-dark) !important;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--border-subtle) 100%) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 1px 0 #ffffff inset, 0 4px 14px rgba(59, 130, 246, 0.12) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="1"] .mtr-rank::before {
  background: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="1"] .mtr-time {
  border-color: rgba(59, 130, 246, 0.22) !important;
  background: var(--bg-subtle) !important;
  color: var(--color-primary) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="1"] .mtr-toggle summary:hover,
.wprowadzenie .mtr-step[data-mtr-step="1"] .mtr-toggle[open] .mtr-toggle__chev {
  color: var(--color-primary) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="1"] .mtr-toggle summary:hover .mtr-toggle__ico,
.wprowadzenie .mtr-step[data-mtr-step="1"] .mtr-toggle[open] .mtr-toggle__ico {
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: var(--color-primary) !important;
  background: rgba(59, 130, 246, 0.09) !important;
}

.wprowadzenie .mtr-step[data-mtr-step="2"] .mtr-rank {
  color: var(--color-primary-dark) !important;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--border-subtle) 100%) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 1px 0 #ffffff inset, 0 4px 14px rgba(59, 130, 246, 0.12) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="2"] .mtr-rank::before {
  background: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="2"] .mtr-time {
  border-color: rgba(59, 130, 246, 0.22) !important;
  background: var(--bg-subtle) !important;
  color: var(--color-primary) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="2"] .mtr-toggle summary:hover,
.wprowadzenie .mtr-step[data-mtr-step="2"] .mtr-toggle[open] .mtr-toggle__chev {
  color: var(--color-primary) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="2"] .mtr-toggle summary:hover .mtr-toggle__ico,
.wprowadzenie .mtr-step[data-mtr-step="2"] .mtr-toggle[open] .mtr-toggle__ico {
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: var(--color-primary) !important;
  background: rgba(59, 130, 246, 0.09) !important;
}

.wprowadzenie .mtr-step[data-mtr-step="3"] .mtr-rank {
  color: var(--color-primary-dark) !important;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--border-subtle) 100%) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 1px 0 #ffffff inset, 0 4px 14px rgba(59, 130, 246, 0.12) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="3"] .mtr-rank::before {
  background: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="3"] .mtr-time {
  border-color: rgba(59, 130, 246, 0.22) !important;
  background: var(--bg-subtle) !important;
  color: var(--color-primary) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="3"] .mtr-toggle summary:hover,
.wprowadzenie .mtr-step[data-mtr-step="3"] .mtr-toggle[open] .mtr-toggle__chev {
  color: var(--color-primary) !important;
}
.wprowadzenie .mtr-step[data-mtr-step="3"] .mtr-toggle summary:hover .mtr-toggle__ico,
.wprowadzenie .mtr-step[data-mtr-step="3"] .mtr-toggle[open] .mtr-toggle__ico {
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: var(--color-primary) !important;
  background: rgba(59, 130, 246, 0.09) !important;
}


/* ==========================================================================
   FROM FILE: semtrick_home.html (Block 1)
   ========================================================================== */
/* GLOBALLY UNIFIED CARDS */
    .features-bento-card, .challenge-card, .service-card, .comp-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-radius: 20px;
    }
    .features-bento-card:hover, .challenge-card:hover, .service-card:hover, .comp-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(15,23,42,0.08);
    }
    
    /* GLOBALLY UNIFIED SECTION TITLE */
    .section-title {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      text-transform: lowercase;
      margin-bottom: 40px;
      line-height: 0.9;
      letter-spacing: -0.04em;
      color: var(--text-primary);
    }

    /* GLOBALLY UNIFIED CSS VARIABLES */
    :root {
      --bg-color: var(--bg-subtle);
      --text-primary: var(--text-main);
      --text-secondary: var(--text-muted);
      --accent-color: var(--color-primary);
      --border-color: rgba(15, 23, 42, 0.1);
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
    }

    :root {
      --bg-color: var(--bg-subtle);
      --text-primary: var(--text-main);
      --text-secondary: var(--text-muted);
      --accent-color: var(--color-primary);
      --accent-neon: var(--color-warning);
      --border-color: rgba(15, 23, 42, 0.1);
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
      --section-padding: clamp(100px, 15vh, 180px);
      --container-width: 1400px;
    }

    body, html {
      background-color: var(--bg-color);
      color: var(--text-primary);
      font-family: var(--font-body);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    .container {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 0 5%;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      margin-top: 0;
      line-height: 1.1;
      letter-spacing: -0.03em;
    }

    .section-title {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      text-transform: lowercase;
      margin-bottom: 40px;
    }

    .section-subtitle {
      font-size: clamp(1.2rem, 2vw, 1.8rem);
      max-width: 800px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    /* --- NAV SCROLL FIX --- */
    .navbar--light-bg.is-top {
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* --- HERO SECTION --- */
    .hero {
      padding-top: calc(80px + 8vh);
      padding-bottom: 8vh;
      min-height: 90vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #ffffff;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .hero h1 {
      
      font-weight: 800;
      line-height: 1.05;
      margin-bottom: 30px;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      
      
      
      text-decoration: none;
      font-family: var(--font-heading);
      
      
      text-transform: uppercase;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease;
      
      
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
      cursor: pointer;
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
}

    .btn-primary:hover {
      transform: translateY(-2px);
      background: #1e293b;
      border-color: #1e293b;
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
    }

    .nav-cta:hover {
      background: var(--color-primary) !important;
      border-color: var(--color-primary) !important;
      color: #ffffff !important;
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2) !important;
      transform: translateY(-2px) !important;
    }

    .hero-image-wrapper {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.15), 
                  0 10px 30px -10px rgba(15, 23, 42, 0.08);
      background: var(--bg-subtle);
      line-height: 0;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    }

    .hero-image-wrapper:hover {
      transform: translateY(-8px) scale(1.01);
      box-shadow: 0 45px 80px -20px rgba(15, 23, 42, 0.22);
    }

    .hero-image-wrapper img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
      border-radius: 0;
    }

    /* --- CHALLENGES --- */
    .challenges {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }

    .challenges-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 100px;
    }

    .challenges-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    .challenge-card {
      padding: 40px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      transition: border-color 0.3s;
    }

    .challenge-card:hover {
      border-color: var(--text-main) !important;
    }

    .challenge-card h3 {
      
      margin-bottom: 20px;
    }

    /* --- STICKY STACK (Full Width with Images) --- */
    .sticky-stack-section {
      padding: 0;
      background: var(--bg-color);
    }

    .sticky-stack-track {
      width: 100%;
    }

    .stack-card {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      border: none;
      box-shadow: none;
      border-bottom: 1px solid var(--border-color);
    }

    .stack-card--1 { z-index: 10; background: #ffffff; }
    .stack-card--2 { z-index: 11; background: var(--bg-subtle); }
    .stack-card--3 { z-index: 12; background: var(--bg-subtle); }

    .stack-card-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
    }

    .stack-content-wrap {
      flex: 1;
      padding: 8% 10%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .stack-image-wrap {
      flex: 1;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .stack-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s ease;
    }

    .stack-card:hover .stack-image-wrap img {
      transform: scale(1.05);
    }

    .stack-num {
      font-family: var(--font-heading);
      font-size: 15rem;
      font-weight: 800;
      color: var(--accent-color);
      line-height: 1;
      position: absolute;
      top: 50px;
      left: 50px;
      opacity: 0.05;
      pointer-events: none;
      z-index: 1;
    }

    .stack-content {
      position: relative;
      z-index: 2;
    }

    .stack-content h3 {
      
      color: var(--text-primary);
      margin-bottom: 1.5rem;
    }

    .stack-content p {
      font-size: 1.3rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 2rem;
    }

    .stack-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      
      font-family: var(--font-heading);
      
      
      
      
      
      text-decoration: none;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      align-self: flex-start;
      
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}

    .stack-btn:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
    }

    /* --- EKOSYSTEM WZROSTU (Animalz Style) --- */
    .ecosystem {
      padding: var(--section-padding) 0;
      background: #ffffff;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

    .ecosystem-item {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 80px;
      padding: 80px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .ecosystem-item:last-child {
      border-bottom: none;
    }

    .eco-title {
      font-size: clamp(2rem, 4vw, 4rem);
      font-weight: 800;
      line-height: 1;
      position: sticky;
      top: 120px;
      color: var(--text-main);
    }

    .eco-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    .eco-list li {
      padding: 30px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      font-family: var(--font-heading);
      font-size: 1.2rem;
      font-weight: 500;
      transition: background 0.3s;
    }

    .eco-list li:hover {
      background: var(--text-main) !important;
      color: #ffffff;
    }

    /* --- BENTO COMPARISON --- */
    .comparison {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
    }

    .bento-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    .bento-card {
      padding: 60px;
      border: 1px solid var(--border-color);
      background: #ffffff;
    }

    .bento-card.highlight {
      background: var(--text-main) !important;
      color: #ffffff;
      border-color: var(--text-main) !important;
    }

    .bento-card.highlight h3 {
      color: var(--accent-neon);
    }

    .bento-list {
      list-style: none;
      padding: 0;
    }

    .bento-list li {
      padding: 20px 0;
      border-bottom: 1px solid rgba(15,23,42,0.1);
      font-size: 1.2rem;
    }

    .bento-card.highlight .bento-list li {
      border-bottom-color: rgba(255,255,255,0.1);
    }

    /* --- INDUSTRIES --- */
    .industries {
      padding: 100px 0;
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      overflow: hidden;
    }

    .marquee-huge {
      display: flex;
      width: fit-content;
      animation: marqueeHuge 40s linear infinite;
      white-space: nowrap;
    }

    .marquee-huge span {
      font-family: var(--font-heading);
      font-size: clamp(6rem, 15vw, 15rem);
      font-weight: 800;
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 2px rgba(15,23,42,0.1);
      margin-right: 50px;
      line-height: 1;
    }

    .marquee-huge span.filled {
      color: var(--text-primary);
      -webkit-text-stroke: 0;
    }

    @keyframes marqueeHuge {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-50%, 0, 0); }
    }

    /* --- CASE STUDIES --- */
    .case-studies {
      padding: var(--section-padding) 0;
      background: #ffffff;
    }

    .cs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
      gap: 40px;
    }

    .cs-card {
      position: relative;
      height: 600px;
      overflow: hidden;
      background: var(--text-main);
    }

    .cs-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.7;
      transition: scale 0.5s;
    }

    .cs-card:hover img {
      scale: 1.1;
    }

    .cs-content {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 60px;
      color: #ffffff;
      z-index: 2;
    }

    .cs-metric {
      font-size: 3rem;
      font-weight: 800;
      color: var(--accent-neon);
      margin-bottom: 10px;
    }

    /* --- NEWSLETTER --- */
    .newsletter-brutalist {
      background: var(--text-main) !important;
      color: #ffffff;
      padding: 120px 0;
    }

    .nl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
    }

    .nl-input {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 4px solid #ffffff;
      padding: 20px 0;
      color: #ffffff;
      font-size: 2rem;
      font-family: var(--font-heading);
      margin-bottom: 40px;
    }

    .nl-input:focus {
      outline: none;
      border-bottom-color: var(--accent-neon);
    }

    .nl-btn {
      
      
      
      
      font-family: var(--font-heading);
      
      
      cursor: pointer;
      text-transform: uppercase;
      
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}

    .nl-btn:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
    }

    /* --- FAQ ASYMMETRICAL (NinjaPromo Inspired Light Theme) --- */
    .faq-asym {
      padding: var(--section-padding) 0;
      color: var(--text-primary);
      background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-subtle) 60%, rgba(248, 250, 252, 0) 100%);
      position: relative;
      z-index: 2;
      border-top: 1px solid var(--border-color);
    }

    .faq-asym .section-title {
      color: var(--text-primary) !important;
      text-shadow: none !important;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 100px;
    }

    .faq-sticky {
      position: sticky;
      top: 150px;
      height: fit-content;
    }

    .faq-item {
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 24px; /* Ultra-rounded card borders in NinjaPromo style */
      padding: 30px 40px;
      margin-bottom: 20px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
    }

    .faq-item:hover {
      transform: translateY(-2px);
      background: #ffffff;
      border-color: var(--color-primary); /* Indigo hover highlight */
      box-shadow: 0 20px 40px rgba(99, 102, 241, 0.05);
    }

    .faq-item.active {
      background: #ffffff;
      border-color: var(--color-primary); /* Active Indigo color */
      box-shadow: 0 25px 50px rgba(99, 102, 241, 0.08);
    }

    .faq-question {
      font-size: 1.35rem;
      font-weight: 700;
      font-family: var(--font-heading);
      color: var(--text-primary);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: color 0.3s ease;
    }

    .faq-question:hover {
      color: var(--color-primary);
    }

    .faq-question span {
      font-size: 1.8rem;
      font-weight: 400;
      color: var(--color-primary);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: inline-block;
    }

    .faq-item.active .faq-question span {
      transform: rotate(45deg);
      color: var(--color-primary);
    }

    .faq-answer {
      display: none;
      padding-top: 20px;
      font-size: 1.1rem;
      color: var(--text-secondary);
      line-height: 1.7;
      border-top: 1px solid rgba(15, 23, 42, 0.06);
      margin-top: 20px;
    }
    /* --- INTERACTIVE AI CONTACT SECTION --- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 80px;
      align-items: flex-start;
      margin-top: 50px;
    }

    @media (max-width: 991px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    /* Left side: Modern Info & Socials */
    .contact-info-panel {
      padding: 10px 0;
    }

    .contact-subtitle {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 15px;
      font-family: var(--font-heading);
    }

    .contact-desc {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--text-secondary);
      margin-bottom: 40px;
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 25px;
      margin-bottom: 40px;
    }

    .detail-item {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .detail-icon {
      width: 52px;
      height: 52px;
      background: rgba(99, 102, 241, 0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: var(--color-primary);
    }

    .detail-content {
      display: flex;
      flex-direction: column;
    }

    .detail-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-secondary);
      font-weight: 700;
      margin-bottom: 4px;
    }

    .detail-value {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-primary);
      text-decoration: none;
      transition: color 0.3s;
    }

    .detail-value:hover {
      color: var(--color-primary);
    }

    .social-links-wrap {
      display: flex;
      flex-direction: column;
      gap: 15px;
      border-top: 1px solid var(--border-color);
      padding-top: 35px;
    }

    .social-label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .social-icons {
      display: flex;
      gap: 15px;
    }

    .social-btn {
      width: 50px;
      height: 50px;
      
      
      display: flex;
      align-items: center;
      justify-content: center;
      
      
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02);
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;
}

    .social-btn svg {
      width: 20px;
      height: 20px;
    }

    .social-btn:hover {
      transform: translateY(-3px);
      color: #ffffff;
      box-shadow: 0 10px 20px rgba(99, 102, 241, 0.15);
    }

    .social-btn--linkedin:hover {
      background: var(--color-success);
      border-color: var(--color-success);
    }

    .social-btn--facebook:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);
    }

    /* Right side: Interactive Form */
    .contact-form-wrap {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 50px;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
    }

    .form-row-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 767px) {
      .form-row-split {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    .contact-form-wrap h3 {
      
      font-weight: 800;
      margin-bottom: 15px;
      color: var(--text-primary);
    }

    .contact-form-wrap p {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 35px;
      line-height: 1.5;
    }

    .floating-group {
      position: relative;
      margin-bottom: 25px;
    }

    .floating-input, .floating-textarea {
      width: 100%;
      padding: 18px 20px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-color);
      font-size: 1.05rem;
      color: var(--text-primary);
      font-family: var(--font-body);
      transition: all 0.3s ease;
      box-sizing: border-box;
    }

    .floating-textarea {
      resize: vertical;
    }

    .floating-input:focus, .floating-textarea:focus {
      outline: none;
      border-color: var(--text-main) !important;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(2, 6, 23, 0.05);
    }

    /* Goal Chips */
    .chips-label {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .chips-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
    }

    .goal-chip {
      padding: 12px 20px;
      border: 1px solid var(--border-color);
      border-radius: 100px;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
    }

    .goal-chip:hover {
      border-color: var(--text-main) !important;
      color: var(--text-primary);
    }

    .goal-chip.selected {
      background: var(--text-main) !important;
      border-color: var(--text-main) !important;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(2, 6, 23, 0.15);
    }

    .domain-sync-btn {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      
      
      
      
      
      
      
      font-family: var(--font-heading);
      cursor: pointer;
      transition: background 0.3s;
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}

    .domain-sync-btn:hover {
      background: var(--accent-color);
    }

    /* --- ROADMAP SECTION --- */
    .roadmap {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
      position: relative;
    }

    .roadmap-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      gap: 30px;
      align-items: stretch;
      margin-top: 50px;
    }

    .roadmap-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 40px;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    .roadmap-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, hsl(var(--primary)), var(--color-primary));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .roadmap-card:hover::before {
      transform: scaleX(1);
    }

    .roadmap-card:hover {
      transform: translateY(-6px);
      border-color: rgba(99, 102, 241, 0.25);
      box-shadow: 0 24px 60px rgba(99, 102, 241, 0.08);
    }

    .roadmap-card--featured {
      background: var(--text-main) !important;
      border-color: var(--text-main) !important;
      color: #ffffff;
      box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.3);
    }

    .roadmap-card--featured::before {
      background: linear-gradient(90deg, var(--color-primary), var(--color-danger));
    }

    .roadmap-card--featured:hover {
      border-color: var(--text-main) !important;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    }

    .roadmap-card--featured .rc-title {
      color: #ffffff;
    }

    .roadmap-card--featured .rc-rank {
      color: var(--color-primary);
    }

    .roadmap-card--featured .rc-time {
      background: rgba(255, 255, 255, 0.15);
      color: var(--color-primary);
    }

    .roadmap-card--featured .rc-text {
      color: rgba(241, 245, 249, 0.85);
    }

    .roadmap-card--featured .rc-bullet {
      background: rgba(139, 92, 246, 0.15);
    }

    .roadmap-card--featured .rc-bullet svg {
      stroke: var(--color-primary);
    }

    .rc-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 25px;
    }

    .rc-rank {
      font-family: var(--font-heading);
      font-size: 0.85rem;
      font-weight: 800;
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .rc-time {
      font-size: 0.75rem;
      font-weight: 700;
      background: rgba(99, 102, 241, 0.07);
      color: var(--color-primary);
      padding: 6px 14px;
      border-radius: 99px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .rc-title {
      font-size: clamp(1.4rem, 2vw, 1.8rem);
      font-weight: 800;
      margin-bottom: 25px;
    }

    .rc-points {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .rc-point {
      display: flex;
      gap: 14px;
      align-items: start;
    }

    .rc-bullet {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(99, 102, 241, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .rc-bullet svg {
      width: 10px;
      height: 10px;
      stroke: var(--color-primary);
      display: block;
    }

    .rc-text {
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    @media (max-width: 1100px) {
      .roadmap-grid {
        grid-template-columns: 1fr;
        gap: 25px;
      }
    }
  
    /* Color distinct steps in the homepage timeline (Blue -> Purple -> Red) */
    .roadmap-grid article:nth-child(1) .rc-rank {
      color: var(--color-primary) !important;
    }
    .roadmap-grid article:nth-child(1) .rc-time {
      border-color: rgba(59, 130, 246, 0.3) !important;
      color: var(--color-primary) !important;
      background: rgba(59, 130, 246, 0.05) !important;
    }
    .roadmap-grid article:nth-child(1) .rc-bullet {
      background: rgba(59, 130, 246, 0.08) !important;
    }
    .roadmap-grid article:nth-child(1) .rc-bullet svg {
      stroke: var(--color-primary) !important;
    }

    .roadmap-grid article:nth-child(2) .rc-rank {
      color: var(--color-primary) !important;
    }
    .roadmap-grid article:nth-child(2) .rc-time {
      border-color: rgba(139, 92, 246, 0.3) !important;
      color: var(--color-primary) !important;
      background: rgba(139, 92, 246, 0.15) !important;
    }
    .roadmap-grid article:nth-child(2) .rc-bullet {
      background: rgba(139, 92, 246, 0.15) !important;
    }
    .roadmap-grid article:nth-child(2) .rc-bullet svg {
      stroke: var(--color-primary) !important;
    }

    .roadmap-grid article:nth-child(3) .rc-rank {
      color: var(--color-danger) !important;
    }
    .roadmap-grid article:nth-child(3) .rc-time {
      border-color: rgba(239, 68, 68, 0.3) !important;
      color: var(--color-danger) !important;
      background: rgba(239, 68, 68, 0.05) !important;
    }
    .roadmap-grid article:nth-child(3) .rc-bullet {
      background: rgba(239, 68, 68, 0.08) !important;
    }
    .roadmap-grid article:nth-child(3) .rc-bullet svg {
      stroke: var(--color-danger) !important;
    }

    /* --- MOBILE RESPONSIVENESS FIXES --- */
    @media (max-width: 900px) {
      .hero-grid, .challenges-grid, .ecosystem-item, .nl-grid, .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
      }
      .challenges-grid > div:first-child,
      .faq-grid > div:first-child,
      .ecosystem-item > div:first-child {
        position: relative !important;
        top: 0 !important;
      }
      .cs-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
      }
      .section-title {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
        word-break: break-word;
        hyphens: auto;
      }
    }

    @media (max-width: 700px) {
      .challenges-list, .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
      }
      .cs-grid {
        grid-template-columns: 1fr !important;
      }
      .hero-grid, .challenges-grid, .ecosystem-item, .nl-grid, .faq-grid {
        gap: 30px !important;
      }
    }

/* ==========================================================================
   FROM FILE: system_semtrick.html (Block 1)
   ========================================================================== */
/* GLOBALLY UNIFIED CARDS */
    .features-bento-card, .challenge-card, .service-card, .comp-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-radius: 20px;
    }
    .features-bento-card:hover, .challenge-card:hover, .service-card:hover, .comp-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(15,23,42,0.08);
    }
    
    /* GLOBALLY UNIFIED SECTION TITLE */
    .section-title {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      text-transform: lowercase;
      margin-bottom: 40px;
      line-height: 0.9;
      letter-spacing: -0.04em;
      color: var(--text-primary);
    }

    /* GLOBALLY UNIFIED CSS VARIABLES */
    :root {
      --bg-color: var(--bg-subtle);
      --text-primary: var(--text-main);
      --text-secondary: var(--text-muted);
      --accent-color: var(--color-primary);
      --border-color: rgba(15, 23, 42, 0.1);
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
    }



  /* Visual Alignment with performance-marketing.html */
  .container {
    max-width: 1400px !important;
    padding: 0 var(--page-pad, 24px) !important;
    margin: 0 auto !important;
  }

  /* Unified Section Spacings */
  .hero,
  .features-bento,
  .arch-section, 
  .value-you-split,
  .global-stats-section,
  .wprowadzenie, 
  .comp-compare-table-block, 
  .pricing-section, 
  .faq-section {
    padding: clamp(100px, 15vh, 180px) 0 !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  /* Unify all button hovers & transitions */
  .btn-primary, .ss-pkg-cta, .nav-cta, .feat-modal__btn--primary {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s !important;
  
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
}

  .btn-primary:hover, .ss-pkg-cta:hover, .nav-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15) !important;
  }

  /* Unified Navbar design */
  .nav-bar {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(250, 250, 250, 0.85) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    transition: background 0.3s, border-color 0.3s !important;
  }



  /* Force white text in dark sections */
  

  /* =========================================================
     PRICING SECTION - pkg-card style (system_semtrick.html)
     ========================================================= */
  .ss-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
    align-items: stretch;
  }

  @media (max-width: 1100px) {
    .ss-pkg-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 700px) {
    .ss-pkg-grid { grid-template-columns: 1fr; }
  }

  .ss-pkg-card {
    padding: 44px 36px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
  }

  .ss-pkg-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, hsl(var(--primary)), var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }

  .ss-pkg-card:hover::before {
    transform: scaleX(1);
  }

  .ss-pkg-card:hover {
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(99, 102, 241, 0.08);
  }

  /* Featured card (dark) */
  .ss-pkg-card--featured {
    background: var(--text-main) !important;
    border-color: var(--text-main) !important;
    color: #ffffff;
  }

  .ss-pkg-card--featured::before {
    background: linear-gradient(90deg, var(--color-primary), var(--color-danger));
  }

  .ss-pkg-card--featured:hover {
    border-color: var(--text-main) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  }

  .ss-pkg-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(99, 102, 241, 0.1);
    color: hsl(var(--primary));
    align-self: flex-start;
    margin-bottom: 20px;
  }

  .ss-pkg-card--featured .ss-pkg-badge {
    background: rgba(255,255,255,0.15);
    color: var(--color-danger);
  }

  .ss-pkg-name {
    font-family: 'Space Grotesk', var(--font-heading, sans-serif);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 10px;
    color: var(--text-primary);
  }

  .ss-pkg-card--featured .ss-pkg-name {
    color: #ffffff;
  }

  .ss-pkg-price {
    font-family: 'Space Grotesk', var(--font-heading, sans-serif);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--text-primary);
  }

  .ss-pkg-card--featured .ss-pkg-price {
    color: #ffffff;
  }

  .ss-pkg-price span {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.6;
  }

  .ss-pkg-desc {
    font-size: 0.93rem;
    line-height: 1.65;
    color: hsl(var(--muted-foreground));
    margin: 18px 0 24px;
  }

  .ss-pkg-card--featured .ss-pkg-desc {
    color: rgba(255,255,255,0.7);
  }

  .ss-pkg-features {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }

  .ss-pkg-card--featured .ss-pkg-features {
    border-top-color: rgba(255,255,255,0.12);
  }

  .ss-pkg-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: hsl(var(--muted-foreground));
  }

  .ss-pkg-card--featured .ss-pkg-features li {
    color: rgba(255,255,255,0.82);
  }

  .ss-pkg-features li::before {
    content: '✓';
    color: hsl(var(--primary));
    font-weight: 800;
    flex-shrink: 0;
    font-size: 0.95rem;
    margin-top: 1px;
  }

  .ss-pkg-card--featured .ss-pkg-features li::before {
    color: var(--color-danger);
  }

  .ss-pkg-cta {
    display: block;
    margin-top: 32px;
    padding: 14px 24px;
    background: var(--text-main) !important;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-family: 'Space Grotesk', var(--font-heading, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: transform 0.3s, background 0.3s;
  }

  .ss-pkg-cta:hover {
    transform: translateY(-3px);
    background: var(--color-primary);
    border-color: var(--color-primary);
  }

  .ss-pkg-card--featured .ss-pkg-cta {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
  }

  .ss-pkg-card--featured .ss-pkg-cta:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
  }

    /* --- MOBILE RESPONSIVENESS FIXES --- */
    @media (max-width: 900px) {
      .hero-grid, .challenges-grid, .ecosystem-item, .nl-grid, .faq-grid, .comparison-grid, .methodology-grid, .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
      }
      .challenges-grid > div:first-child,
      .faq-grid > div:first-child,
      .ecosystem-item > div:first-child {
        position: relative !important;
        top: 0 !important;
      }
      .cs-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
      }
      .section-title {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
        word-break: break-word;
        hyphens: auto;
      }
    }

    @media (max-width: 700px) {
      .challenges-list, .bento-grid, .features-bento-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
      }
      .cs-grid {
        grid-template-columns: 1fr !important;
      }
      .hero-grid, .challenges-grid, .ecosystem-item, .nl-grid, .faq-grid {
        gap: 30px !important;
      }
    }

/* ==========================================================================
   FROM FILE: system_semtrick.html (Block 2)
   ========================================================================== */
.hero {
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
    --accent-color: var(--color-primary);
    --border-color: rgba(15, 23, 42, 0.08);
    padding-top: clamp(140px, 18vh, 200px);
    padding-bottom: 40px;
    background: #ffffff;
    /* Removed min-height: 90vh and justify-content: center to prevent clipping */
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: center;
  }
  .hero h1 {
    
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--text-primary) !important;
    max-width: none !important;
  }
  .hero h1 .line--accent {
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: initial;
  }
  .btn-primary {
    display: inline-block;
    
    
    
    text-decoration: none;
    font-family: var(--font-heading);
    
    
    text-transform: uppercase;
    transition: transform 0.3s, background 0.3s;
  
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
}
  .btn-primary:hover {
    transform: translateY(-2px);
    background: #1e293b;
    border-color: #1e293b;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
  }
  .hero-image-wrapper {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.15), 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    background: var(--bg-subtle);
    line-height: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    transform: scale(1.15) translateY(-10px);
  }
  .hero-image-wrapper:hover {
    transform: scale(1.15) translateY(-18px);
    box-shadow: 0 45px 80px -20px rgba(15, 23, 42, 0.22);
  }
  .hero-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  .hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
  }
  .hero-benefit-row {
    color: var(--text-secondary) !important;
  }
  @media (max-width: 992px) {
    .hero-grid {
      grid-template-columns: 1fr;
      gap: 50px;
    }
    .hero {
      padding-top: 120px;
      padding-bottom: 40px;
    }
  }

/* ==========================================================================
   FROM FILE: system_semtrick.html (Block 3)
   ========================================================================== */
/* Niebieski „expand” — dopasowany do akcentów strony (skala + poświata) */
      @keyframes fb-expand-soft {
        0%, 100% {
          transform: scale(1);
          background-color: rgba(59, 130, 246, 0.12);
          box-shadow:
            0 2px 8px rgba(15, 23, 42, 0.1),
            0 0 0 2px rgba(59, 130, 246, 0.45),
            0 0 12px rgba(59, 130, 246, 0.15);
        }
        45% {
          transform: scale(1.14);
          background-color: rgba(59, 130, 246, 0.25);
          box-shadow:
            0 6px 20px rgba(15, 23, 42, 0.14),
            0 0 0 2px rgba(59, 130, 246, 0.75),
            0 0 28px rgba(59, 130, 246, 0.45),
            0 0 44px rgba(59, 130, 246, 0.22);
        }
        70% {
          transform: scale(1.02);
          background-color: rgba(59, 130, 246, 0.18);
          box-shadow:
            0 2px 10px rgba(15, 23, 42, 0.1),
            0 0 0 2px rgba(59, 130, 246, 0.55),
            0 0 18px rgba(59, 130, 246, 0.25);
        }
      }
      @keyframes fb-expand-icon-nudge {
        0%, 100% { transform: scale(1); opacity: 1; }
        45% { transform: scale(1.22); opacity: 1; }
        70% { transform: scale(1.04); opacity: 0.92; }
      }
      .fb-expand {
        position: absolute; top: 18px; right: 18px; z-index: 2;
        width: 40px; height: 40px;
        background-color: rgba(59, 130, 246, 0.12);
        color: var(--text-main);
        border: 2px solid rgba(59, 130, 246, 0.55);
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        box-shadow:
          0 2px 8px rgba(15, 23, 42, 0.1),
          0 0 0 1px rgba(255, 255, 255, 0.35) inset,
          0 0 12px rgba(59, 130, 246, 0.15);
        animation: fb-expand-soft 1.35s ease-in-out infinite;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
      }
      .fb-expand svg {
        display: block;
        animation: fb-expand-icon-nudge 1.35s ease-in-out infinite;
      }
      .fb-expand svg path {
        stroke-width: 2.85;
        stroke: var(--text-main);
      }
      #funkcje .features-bento-card { position: relative; }
      .features-bento-card:hover .fb-expand {
        animation: none;
        transform: scale(1.08);
        background-color: rgba(59, 130, 246, 0.22);
        border-color: rgba(59, 130, 246, 0.75);
        box-shadow:
          0 6px 22px rgba(15, 23, 42, 0.12),
          0 0 0 2px rgba(59, 130, 246, 0.55),
          0 0 26px rgba(59, 130, 246, 0.35);
      }
      .features-bento-card:hover .fb-expand svg {
        animation: none;
        transform: scale(1.1);
      }
      @media (prefers-reduced-motion: reduce) {
        .fb-expand,
        .fb-expand svg { animation: none !important; }
      }

/* ==========================================================================
   FROM FILE: system_semtrick.html (Block 4)
   ========================================================================== */
/* ======================================
   ARCHITEKTURA DANYCH — nowy schemat
   ====================================== */
.arch-section {
  padding: clamp(80px, 12vh, 140px) 0;
  background: var(--bg-subtle);
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  overflow: hidden;


}
.arch-section .container {
  position: relative;
}
.arch__head {
  text-align: center;
  margin-bottom: 64px;
}
.arch__head .section-label {
  margin-bottom: 14px;
}
.arch__head h2 {
  
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  color: var(--text-main);
}
.arch__head p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.65;
}

/* --- Diagram wrapper --- */
.arch-diagram {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 28px;
  padding: clamp(32px, 5vw, 60px) clamp(24px, 5vw, 60px);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06),
              0 4px 16px rgba(15, 23, 42, 0.04);
  position: relative;
}

/* --- Three-zone layout --- */
.arch-zones {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: center;
}
@media (max-width: 900px) {
  .arch-zones {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .arch-arrow { display: none; }
}

/* --- Arrow connectors --- */
/* --- Arrow connectors (self-contained SVG with embedded label) --- */
.arch-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 70px;
}

/* --- Zone titles --- */
.arch-zone__label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
}

/* --- Source chips --- */
.arch-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.arch-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-subtle);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.arch-chip:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.08);
  background: #ffffff;
}
.arch-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.arch-chip__dot--ads    { background: var(--color-primary); }
.arch-chip__dot--meta   { background: var(--color-primary); }
.arch-chip__dot--ga4    { background: var(--color-warning); }
.arch-chip__dot--crm    { background: var(--color-success); }
.arch-chip__dot--sc     { background: var(--color-success); }
.arch-chip__dot--shop   { background: var(--text-muted); }
.arch-chip__dot--bi     { background: var(--color-primary); }
.arch-chip__dot--other  { background: var(--text-muted); }

/* --- BigQuery central node --- */
.arch-bq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(145deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary) 100%);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(99, 102, 241, 0.25),
              0 0 0 1px rgba(255,255,255,0.12) inset;
  position: relative;
  overflow: hidden;
  min-width: 180px;
}
.arch-bq::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.arch-bq__icon {
  width: 56px;
  height: 56px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--border-subtle);
}
.arch-bq__icon svg { width: 28px; height: 28px; }
.arch-bq__name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.arch-bq__sub {
  font-size: 0.7rem;
  color: rgba(165,180,252,0.7);
  margin-top: 4px;
  font-weight: 500;
}
.arch-bq__badge {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(163, 230, 53, 0.12);
  border: 1px solid rgba(163, 230, 53, 0.25);
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-danger);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.arch-bq__badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-danger)); color: #ffffff; border: none;
  box-shadow: 0 0 6px var(--color-warning);
  flex-shrink: 0;
}

/* --- Output cards --- */
.arch-outputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.arch-output {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.arch-output:hover {
  border-color: rgba(99,102,241,0.3);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(99,102,241,0.07);
}
.arch-output__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arch-output__icon svg { width: 17px; height: 17px; }
.arch-output__icon--looker { background: var(--border-subtle); color: var(--color-primary); }
.arch-output__icon--bi     { background: var(--bg-subtle); color: var(--color-primary); }
.arch-output__icon--sheets { background: var(--border-subtle); color: var(--color-success); }
.arch-output__icon--crm    { background: var(--border-subtle); color: var(--color-success); }
.arch-output__desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* --- ETL badge strip at bottom --- */
.arch-etl-strip {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.arch-etl-strip__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-right: 4px;
}
.arch-etl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-subtle);
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.arch-etl-pill svg { width: 13px; height: 13px; color: var(--color-primary); }

/* ==========================================================================
   FROM FILE: system_semtrick.html (Block 5)
   ========================================================================== */
/* ============================================================
   GROWTH PATHWAY & SIMULATOR SECTION (B+C HYBRID - LIGHT THEME)
   ============================================================ */
.gp-section {
  background: radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.03) 0%, transparent 40%),
              radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.02) 0%, transparent 40%),
              #ffffff;
  color: var(--text-main);
  padding: clamp(80px, 12vh, 140px) 0;
  position: relative;
  overflow: clip;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Subtle grid overlay */
.gp-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.015) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.gp-section .container {
  position: relative;
  z-index: 2;
  max-width: var(--layout-max, 1460px);
  margin: 0 auto;
  padding: 0 var(--page-pad, 24px);
}

/* --- Section Header --- */
.gp-header {
  text-align: left;
  margin-bottom: clamp(60px, 8vh, 90px);
  max-width: 850px;
  
  
}
.gp-header .section-label {
  color: hsl(var(--primary));
  font-weight: 800;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.gp-header h2 {
  font-family: var(--font-display, sans-serif);
  
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 22px;
}
.gp-header h2 span {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gp-header p {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.6;
}

/* --- Part 1: Executive Metrics Grid (Concept C) --- */
.gp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: clamp(60px, 8vh, 100px);
}
@media (max-width: 992px) {
  .gp-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .gp-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.gp-metric-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 30px 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}
.gp-metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.05), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.gp-metric-card:hover::before {
  transform: translateX(100%);
}
.gp-metric-card:hover {
  transform: translateY(-5px);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}
.gp-metric-card__label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.gp-metric-card__val {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(2.5rem, 3.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--text-main) 30%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gp-metric-card--green .gp-metric-card__val {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-warning) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gp-metric-card--blue .gp-metric-card__val {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gp-metric-card__desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Part 2: Growth Pathway Simulator Cockpit (Concept B) --- */
.gp-cockpit {
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 50px;
  align-items: stretch;
}
@media (max-width: 992px) {
  .gp-cockpit {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Timeline navigation column */
.gp-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

/* Connecting thread line */
.gp-timeline__line {
  position: absolute;
  left: 43px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: rgba(15, 23, 42, 0.06);
  z-index: 1;
}
.gp-timeline__progress {
  position: absolute;
  left: 43px;
  top: 40px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-success), var(--color-primary));
  z-index: 2;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  height: 0;
}

.gp-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: transparent;
  border: 1px solid transparent;
  padding: 24px;
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  position: relative;
  z-index: 3;
  width: 100%;
  font-family: inherit; /* Explicitly inherit font-family to fix button fallback bug */
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.gp-step:hover {
  background: rgba(15, 23, 42, 0.015);
}
.gp-step.is-active {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.gp-step__badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-display, sans-serif); /* Corrected custom display font variable */
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.gp-step.is-active .gp-step__badge {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
}

.gp-step__content {
  flex: 1;
}
.gp-step__title {
  font-family: var(--font-display, sans-serif); /* Corrected custom display font variable */
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  transition: color 0.3s;
}
.gp-step.is-active .gp-step__title {
  color: var(--color-success);
}
.gp-step__desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Simulator canvas (Right Column) */
.gp-canvas {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  position: relative;
  min-height: 480px;
}

/* Cockpit Browser Chrome Top */
.gp-canvas-chrome {
  background: var(--bg-subtle);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.gp-chrome-dots {
  display: flex;
  gap: 6px;
}
.gp-chrome-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.15);
}
.gp-chrome-dots span:nth-child(1) { background: var(--color-danger); }
.gp-chrome-dots span:nth-child(2) { background: var(--color-warning); }
.gp-chrome-dots span:nth-child(3) { background: var(--color-success); }

.gp-chrome-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gp-chrome-status {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--color-success);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gp-chrome-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  display: inline-block;
  animation: gpPulse 1.8s infinite;
}
@keyframes gpPulse {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { transform: scale(1.1); opacity: 0.5; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.gp-canvas-body {
  flex: 1;
  position: relative;
  padding: 32px;
}

.gp-view {
  position: absolute;
  inset: 32px;
  opacity: 0;
  transform: translateY(15px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gp-view.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
  inset: 0;
}

/* View 1: Stop Waste elements */
.gp-view-1__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 576px) {
  .gp-view-1__grid {
    grid-template-columns: 1fr;
  }
}
.gp-card-v1 {
  background: var(--bg-subtle);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 20px;
}
.gp-card-v1--danger {
  border-color: rgba(239, 68, 68, 0.15);
  background: rgba(239, 68, 68, 0.01);
}
.gp-card-v1--success {
  border-color: rgba(16, 185, 129, 0.15);
  background: rgba(16, 185, 129, 0.01);
}
.gp-v1-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.gp-card-v1--danger .gp-v1-label { color: var(--color-danger); }
.gp-card-v1--success .gp-v1-label { color: var(--color-success); }

.gp-v1-val {
  font-family: var(--font-display, sans-serif); /* Corrected custom display font variable */
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}
.gp-v1-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.gp-v1-bar-track {
  height: 6px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 99px;
  margin-top: 14px;
  overflow: hidden;
}
.gp-v1-bar {
  height: 100%;
  border-radius: 99px;
}
.gp-v1-bar--red { background: var(--color-danger); width: 100%; }
.gp-v1-bar--green { background: var(--color-success); width: 100%; }

.gp-v1-saving-widget {
  margin-top: 24px;
  background: rgba(16, 185, 129, 0.04);
  border: 1px dashed rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gp-v1-saving-widget__text {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-success);
}
.gp-v1-saving-widget__badge {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 800;
  background: var(--color-success);
  color: #ffffff;
}

/* View 2: Single Source (Deduplication) */
.gp-view-2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 576px) {
  .gp-view-2__grid {
    grid-template-columns: 1fr;
  }
}
.gp-card-v2 {
  background: var(--bg-subtle);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.gp-card-v2__title {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.gp-card-v2__num {
  font-family: var(--font-display, sans-serif); /* Corrected custom display font variable */
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.gp-card-v2--google { border-color: rgba(66, 133, 244, 0.2); }
.gp-card-v2--google .gp-card-v2__num { color: var(--color-primary); }
.gp-card-v2--meta { border-color: rgba(24, 119, 242, 0.2); }
.gp-card-v2--meta .gp-card-v2__num { color: var(--color-primary); }
.gp-card-v2--unified { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.02); }
.gp-card-v2--unified .gp-card-v2__num { color: var(--color-success); }

.gp-v2-equation {
  background: var(--bg-subtle);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 20px;
}
.gp-v2-eq-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.gp-v2-eq-row:last-child {
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-weight: 700;
  color: var(--text-main);
}
.gp-v2-eq-badge {
  color: var(--color-danger);
  font-weight: 800;
}
.gp-v2-eq-badge--green {
  color: var(--color-success);
}

/* View 3: Margin Feedback loop */
.gp-view-3__visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px;
  position: relative;
  margin-bottom: 20px;
}
.gp-v3-node {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 16px 20px;
  border-radius: 16px;
  text-align: center;
  z-index: 2;
  position: relative;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}
.gp-v3-node--crm { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.02); }
.gp-v3-node--ads { border-color: rgba(14, 165, 233, 0.25); background: rgba(14, 165, 233, 0.02); }

.gp-v3-node__title {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gp-v3-node__val {
  font-family: var(--font-display, sans-serif); /* Corrected custom display font variable */
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
}
.gp-v3-node--crm .gp-v3-node__val { color: var(--color-success); }
.gp-v3-node--ads .gp-v3-node__val { color: var(--color-primary); }

.gp-v3-connector {
  flex: 1;
  height: 2px;
  background: rgba(15, 23, 42, 0.06);
  margin: 0 12px;
  position: relative;
  overflow: hidden;
}
.gp-view.is-active .gp-v3-connector::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 30px;
  background: linear-gradient(90deg, transparent, var(--color-success), transparent);
  animation: gpFlow 2s linear infinite;
}
@keyframes gpFlow {
  0% { left: -30px; }
  100% { left: 100%; }
}

.gp-v3-status-card {
  background: var(--bg-subtle);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 16px 20px;
}
.gp-v3-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.gp-v3-status-row:last-child { margin-bottom: 0; }
.gp-v3-status-label { color: var(--text-muted); }
.gp-v3-status-val { font-weight: 700; color: var(--text-main); }
.gp-v3-status-val--strike { text-decoration: line-through; opacity: 0.4; }
.gp-v3-status-val--green { color: var(--color-success); }

/* View 4: LTV Predictor ML */
.gp-v4-chart-container {
  height: 160px;
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}
.gp-v4-chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Visible light theme chart grids */
.gp-v4-chart-svg line {
  stroke: rgba(15, 23, 42, 0.06) !important;
}
.gp-view.is-active .gp-v4-chart-line {
  stroke: url(#gpGrad1);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: gpDrawLine 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gpDrawLine {
  to { stroke-dashoffset: 0; }
}

.gp-v4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gp-card-v4 {
  background: var(--bg-subtle);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 14px;
}
.gp-v4-card-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.gp-v4-card-val {
  font-family: var(--font-display, sans-serif); /* Corrected custom display font variable */
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}
.gp-v4-card-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
}
.gp-v4-card-badge--up { background: rgba(16, 185, 129, 0.1); color: var(--color-success); }
.gp-v4-card-badge--down { background: rgba(239, 68, 68, 0.1); color: var(--color-danger); }

/* Responsive Adjustments */
@media (max-width: 900px) {
  .gp-timeline__line,
  .gp-timeline__progress {
    display: none; /* Hide timeline lines on mobile for cleaner stacking layout */
  }
  .gp-step {
    border-color: rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    padding: 20px !important;
  }
  .gp-step.is-active {
    border-color: var(--color-success) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
  }
}

/* ==========================================================================
   FROM FILE: system_semtrick.html (Block 6)
   ========================================================================== */
.gss-editorial-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        margin-top: 50px;
      }
      @media (max-width: 992px) {
        .gss-editorial-grid {
          grid-template-columns: 1fr 2fr;
          gap: 28px;
        }
      }
      @media (max-width: 576px) {
        .gss-editorial-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }
      }
      .gss-editorial-item {
        border-top: 2px solid var(--text-primary);
        padding-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .gss-editorial-num {
        font-family: var(--font-heading);
        font-size: clamp(2.5rem, 4vw, 3.8rem);
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1;
        letter-spacing: -0.04em;
      }
      .gss-editorial-item h3 {
        font-family: var(--font-heading);
        
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        text-transform: lowercase;
      }
      .gss-editorial-txt {
        font-size: 0.92rem;
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
      }

/* ==========================================================================
   FROM FILE: system_semtrick.html (Block 7)
   ========================================================================== */
:root {
    --bg-color: var(--bg-subtle);
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
    --accent-color: var(--color-primary);
    --accent-neon: var(--color-warning);
    --border-color: rgba(15, 23, 42, 0.1);
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --section-padding: clamp(100px, 15vh, 180px);
  }

  body {
    background-color: var(--bg-color) !important;
    color: var(--text-secondary) !important;
  }

  /* Global typography */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.03em !important;
  }

  /* Force lowercase section headers */
  .section-heading,
  .arch__head h2,
  .wprowadzenie-head h2,
  .comp-compare-heading,
  .pricing-head h2,
  .features-bento__heading,
  .hero h1 {
    font-family: var(--font-heading) !important;
    
    font-weight: 800 !important;
    text-transform: lowercase !important;
    color: var(--text-primary) !important;
    line-height: 1.15 !important;
  }

  /* Force left alignment on all section headers */
  .features-bento__header,
  .arch__head,
  .value-you-split__head,
  .gss-head,
  .wprowadzenie-head,
  .marquee-section__intro,
  .comp-compare-intro,
  .pricing-head,
  .cta-section-intro {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 800px !important;
  }

  /* Force left alignment on section labels within these headers */
  .features-bento__header .section-label,
  .arch__head .section-label,
  .value-you-split__head .section-label,
  .gss-head .section-label,
  .wprowadzenie-head .section-label,
  .marquee-section__intro .section-label,
  .comp-compare-intro .section-label,
  .pricing-head .section-label,
  .cta-section-intro .section-label {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: inline-block !important;
    width: auto !important;
  }

  /* Force left-align on all section headings */
  .features-bento__heading,
  .arch__head h2,
  .value-you-split-heading,
  .gss-title,
  .wprowadzenie-head h2,
  .marquee-section__intro h2,
  .comp-compare-heading,
  .pricing-head h2,
  .cta-section-intro h2,
  .section-heading {
    text-align: left !important;
  }

  /* Unified styling and alignment for all section subheadings (excluding section labels above headings) */
  .features-bento__sub,
  .arch__head p:not(.section-label),
  .marquee-sublabel,
  .comp-compare-intro .section-sub,
  .pricing-head .section-sub,
  .cta-section-intro .cta-sub {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    max-width: 800px !important;
    font-size: clamp(0.95rem, 1.35vw, 1.08rem) !important;
    line-height: 1.60 !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    margin-top: 12px !important;
  }

  /* Container width alignment */
  .container {
    max-width: 1400px !important;
    padding: 0 var(--page-pad, 24px) !important;
    margin: 0 auto !important;
  }

  /* Unified Section Spacings */
  .hero,
  .features-bento,
  .arch-section,
  .value-you-split,
  .global-stats-section,
  .wprowadzenie,
  .comp-compare-table-block,
  .pricing-section {
    padding: var(--section-padding) 0 !important;
    background: var(--bg-color) !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  /* Buttons & Hover transitions */
  .btn-primary, .ss-pkg-cta, .nav-cta, .feat-modal__btn--primary {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s !important;
  
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
}
  .btn-primary:hover, .ss-pkg-cta:hover, .nav-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15) !important;
  }

  /* Glassmorphism Navigation bar */
  .nav-bar {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(250, 250, 250, 0.85) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    transition: background 0.3s, border-color 0.3s !important;
  }

  /* ===================================================
     FAQ — HOME-PAGE STYLE (faq-asym, faq-grid, faq-sticky)
     =================================================== */
  .faq-asym {
    padding: var(--section-padding) 0 !important;
    background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-subtle) 70%, rgba(248,250,252,0) 100%) !important;
    border-top: 1px solid var(--border-color) !important;
    position: relative;
    z-index: 2;
  }

  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 100px;
    align-items: start;
  }

  .faq-sticky {
    position: sticky;
    top: 130px;
    height: fit-content;
  }

  .faq-sticky .section-title {
    font-size: clamp(3rem, 6vw, 5.5rem) !important;
    font-weight: 800 !important;
    text-transform: lowercase !important;
    line-height: 1.05 !important;
    margin-bottom: 0 !important;
    color: var(--text-primary) !important;
    text-align: left !important;
  }

  .faq-sticky .section-label {
    margin-bottom: 16px;
    display: block;
    text-align: left;
  }

  /* FAQ Item Card (NinjaPromo style) */
  .faq-item {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 24px;
    padding: 28px 36px;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.02);
  }
  .faq-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.06);
  }
  .faq-item.active {
    border-color: var(--color-primary);
    box-shadow: 0 24px 48px rgba(99, 102, 241, 0.09);
  }

  .faq-question {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.3s ease;
    list-style: none;
  }
  .faq-question:hover { color: var(--color-primary); }
  .faq-question span {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-primary);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
  }
  .faq-item.active .faq-question span {
    transform: rotate(45deg);
    color: var(--color-primary);
  }

  .faq-answer {
    display: none;
    padding-top: 18px;
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: 18px;
  }

  /* Category badges */
  .faq-category-head {
    padding-left: 4px;
  }
  .faq-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 100px;
  }
  .faq-cat-badge--blue {
    background: rgba(59, 130, 246, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(59, 130, 246, 0.25);
  }
  .faq-cat-badge--purple {
    background: rgba(139, 92, 246, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(139, 92, 246, 0.25);
  }
  .faq-cat-badge--red {
    background: rgba(239, 68, 68, 0.08);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
  }

  @media (max-width: 900px) {
    .faq-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }
    .faq-sticky {
      position: static;
    }
  }

  /* ===================================================
     Visual Oscillation Theme (Blue -> Purple -> Red)
     =================================================== */

  /* 1. 3 ETAPY WDROŻENIA */
  .wprowadzenie .mtr-step[data-mtr-step="1"] {
    border-top: 4px solid var(--color-primary) !important;
  }
  .wprowadzenie .mtr-step[data-mtr-step="2"] {
    border-top: 4px solid var(--color-primary) !important;
  }
  .wprowadzenie .mtr-step[data-mtr-step="3"] {
    border-top: 4px solid var(--color-primary) !important;
  }

  /* 2. Ekosystem możliwości */
  .marquee-section {
    border-top: 2px solid var(--color-primary) !important;
  }

  /* 3. Paleta korzyści */
  .comp-compare-table-card {
    border-top: 4px solid !important;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-danger)) 1 !important;
  }

  /* ===================================================
     COMPARISON TABLE - Light neutral theme override
     =================================================== */
  .comp-compare-table-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-top: 4px solid !important;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-primary), var(--color-danger)) 1 !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important;
    border-radius: 16px !important;
  }

  /* Table header row */
  .cmp-th-comp {
    background: var(--bg-subtle) !important;
    color: var(--text-muted) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
  }
  .cmp-th-brand {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
  }
  .cmp-brand-lockup {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
  }

  /* Table cells */
  .cmp-cell-comp {
    background: #ffffff !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.06) !important;
  }
  .cmp-cell-brand {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
  }

  /* Category row */
  .cmp-cat td {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  }

  /* Left accent border on Semtrick column */
  .cmp-cell-brand {
    border-left: 3px solid var(--color-primary) !important;
  }

  /* Icons in brand cells */
  .cmp-li-icon {
    color: var(--color-primary) !important;
  }

  /* Expand button - neutral dark style matching other buttons */
  .cmp-expand-btn {
    
    
    
    box-shadow: none !important;
    
    font-family: var(--font-heading) !important;
    
    
    
    transition: background 0.3s, transform 0.3s !important;
  
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
  .cmp-expand-btn:hover {
    background: var(--color-primary) !important;
    transform: translateY(-2px) !important;
  }

  /* Pricing card featured button - match brand colors without heavy gradient */
  .ss-pkg-card--featured .ss-pkg-cta {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
  }
  .ss-pkg-card--featured .ss-pkg-cta:hover {
    background: var(--color-primary) !important;
  }

  /* Middle pricing card with navy footer accents */
  .ss-pkg-card--dark-accent::before {
    background: #0b1329 !important;
  }
  .ss-pkg-card--dark-accent:hover {
    border-color: rgba(11, 19, 41, 0.25) !important;
  }
  .ss-pkg-card--dark-accent .ss-pkg-badge {
    background: rgba(11, 19, 41, 0.08) !important;
    color: #0b1329 !important;
  }
  .ss-pkg-card--dark-accent .ss-pkg-features li::before {
    color: #0b1329 !important;
  }
  .ss-pkg-card--dark-accent .ss-pkg-cta {
    background: #0b1329 !important;
  }
  .ss-pkg-card--dark-accent .ss-pkg-cta:hover {
    background: #1e293b !important;
    box-shadow: 0 8px 24px rgba(11, 19, 41, 0.15) !important;
  }

  /* ===================================================
     UNIFIED SECTION LABELS - identical across all sections
     =================================================== */
  .section-label,
  .comp-compare-kicker,
  .faq-sticky .section-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    display: block !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
  }


  /* ===================================================
     NEW COMPARISON GRID DESIGN
     =================================================== */
  .comp-section {
    padding: 40px 0 !important;
    background: var(--bg-subtle) !important;
  }
  
  .comp-new-grid {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .comp-cat-header {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .comp-row-card {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.01);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .comp-row-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
  }
  
  .comp-col-old, .comp-col-new {
    flex: 1;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .comp-col-old {
    background: var(--bg-subtle);
    border-right: 1px dashed rgba(15, 23, 42, 0.06);
  }
  
  .comp-badge-old, .comp-badge-new {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    display: inline-block;
  }
  
  .comp-badge-old {
    color: var(--text-muted);
  }
  
  .comp-badge-new {
    color: var(--color-primary);
  }
  
  .comp-text-old {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
  }
  
  .comp-content-new {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .comp-icon-new {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(79, 70, 229, 0.06);
    color: var(--color-primary);
    border-radius: 8px;
    flex-shrink: 0;
  }
  
  .comp-icon-new svg {
    width: 14px;
    height: 14px;
  }
  
  .comp-text-new {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
  }
  
  .comp-arrow-sep {
    display: none;
  }
  
  .comp-expand-container {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
  
  @media (max-width: 768px) {
    .comp-row-card {
      flex-direction: column;
    }
    .comp-col-old {
      border-right: none;
      border-bottom: 1px dashed rgba(15, 23, 42, 0.06);
      padding: 10px 16px;
    }
    .comp-col-new {
      padding: 12px 16px;
    }
  }

/* ==========================================================================
   FROM FILE: performance-marketing.html (Block 1)
   ========================================================================== */
/* GLOBALLY UNIFIED CARDS */
    .features-bento-card, .challenge-card, .service-card, .comp-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-radius: 20px;
    }
    .features-bento-card:hover, .challenge-card:hover, .service-card:hover, .comp-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(15,23,42,0.08);
    }
    
    /* GLOBALLY UNIFIED SECTION TITLE */
    .section-title {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      text-transform: lowercase;
      margin-bottom: 40px;
      line-height: 0.9;
      letter-spacing: -0.04em;
      color: var(--text-primary);
    }

    /* GLOBALLY UNIFIED CSS VARIABLES */
    :root {
      --bg-color: var(--bg-subtle);
      --text-primary: var(--text-main);
      --text-secondary: var(--text-muted);
      --accent-color: var(--color-primary);
      --border-color: rgba(15, 23, 42, 0.1);
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
    }

    :root {
      --bg-color: var(--bg-subtle);
      --text-primary: var(--text-main);
      --text-secondary: var(--text-muted);
      --accent-color: var(--color-primary);
      --accent-neon: var(--color-warning);
      --border-color: rgba(15, 23, 42, 0.1);
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
      --section-padding: clamp(100px, 15vh, 180px);
      --container-width: 1400px;
    }

    body, html {
      background-color: var(--bg-color);
      color: var(--text-primary);
      font-family: var(--font-body);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    .container {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 0 5%;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      margin-top: 0;
      line-height: 1.1;
      letter-spacing: -0.03em;
    }

    .section-title {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      text-transform: lowercase;
      margin-bottom: 40px;
    }

    .section-subtitle {
      font-size: clamp(1.2rem, 2vw, 1.8rem);
      max-width: 800px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    /* --- NAV SCROLL FIX --- */
    .navbar--light-bg.is-top {
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* --- HERO SECTION --- */
    .hero {
      padding-top: calc(80px + 8vh);
      padding-bottom: 8vh;
      min-height: 90vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background: #ffffff;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .hero h1 {
      
      font-weight: 800;
      line-height: 1.05;
      margin-bottom: 30px;
    }

    .btn-primary {
      display: inline-block;
      
      
      
      text-decoration: none;
      font-family: var(--font-heading);
      
      
      text-transform: uppercase;
      transition: transform 0.3s, background 0.3s;
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
}

    .btn-primary:hover {
      transform: translateY(-5px);
      background: #1e293b;
    }

    .hero-image-wrapper {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.15),
                  0 10px 30px -10px rgba(15, 23, 42, 0.08);
      background: var(--bg-subtle);
      line-height: 0;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
      transform: translateY(20px) scale(1.0) !important;
    }

    .hero-image-wrapper:hover {
      transform: translateY(10px) scale(1.02) !important;
      box-shadow: 0 45px 80px -20px rgba(15, 23, 42, 0.22);
    }

    .hero-image-wrapper img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }

    /* Hero stats row */
    .hero-stats {
      display: flex;
      gap: 40px;
      margin-top: 40px;
      padding-top: 40px;
      border-top: 1px solid var(--border-color);
    }

    .hero-stat-item {
      display: flex;
      flex-direction: column;
    }

    .hero-stat-value {
      font-family: var(--font-heading);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1;
    }

    .hero-stat-label {
      font-size: 0.88rem;
      color: var(--text-secondary);
      margin-top: 6px;
    }

    /* --- CHALLENGES --- */
    .challenges {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }

    .challenges-grid {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 50px;
      align-items: start;
    }

    .challenges-grid > div:first-child {
      max-width: 100%;
      margin: 0;
      text-align: left;
      position: sticky;
      top: 100px;
    }

    .challenges-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .challenge-card {
      padding: 32px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .challenge-card:hover {
      border-color: var(--text-main) !important;
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(15,23,42,0.08);
    }

    .challenge-card .challenge-icon {
      font-size: 1.8rem;
      margin-bottom: 16px;
    }

    .challenge-card h3 {
      
      margin-bottom: 10px;
      font-weight: 700;
    }

    .challenge-card p {
      font-size: 0.92rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }

    /* --- WHY PAID ADS --- */
    .why-section {
      padding: var(--section-padding) 0;
      background: #ffffff;
      border-top: 1px solid var(--border-color);
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-top: 60px;
    }

    .why-card {
      padding: 40px 32px;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      background: var(--bg-color);
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .why-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(99,102,241,0.08);
    }

    .why-num {
      font-family: var(--font-heading);
      font-size: 3rem;
      font-weight: 800;
      color: rgba(99,102,241,0.12);
      line-height: 1;
      margin-bottom: 16px;
    }

    .why-card h3 {
      
      font-weight: 800;
      margin-bottom: 12px;
    }

    .why-card p {
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin: 0;
    }

    /* --- SERVICES 360 --- */
    .services-section {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      margin-top: 60px;
    }

    .service-card {
      padding: 50px 40px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-primary));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .service-card:hover::before {
      transform: scaleX(1);
    }

    .service-card:hover {
      border-color: rgba(99,102,241,0.3);
      transform: translateY(-6px);
      box-shadow: 0 24px 60px rgba(99,102,241,0.08);
    }

    .service-icon {
      width: 56px;
      height: 56px;
      background: rgba(99,102,241,0.07);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 24px;
      color: var(--color-primary);
    }

    .service-card h3 {
      
      font-weight: 800;
      margin-bottom: 14px;
    }

    .service-card p {
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 24px;
    }

    .service-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .service-tag {
      padding: 6px 14px;
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 99px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-secondary);
    }

    /* --- METHODOLOGY --- */
    
    .methodology-bg-funnel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .methodology-bg-funnel svg {
      width: 100%;
      max-width: 1200px;
      height: 100%;
    }
    .methodology-section {
      position: relative;
    }
.methodology-section {
      padding: var(--section-padding) 0;
      background: #ffffff;
      border-top: 1px solid var(--border-color);
    }

    .methodology-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 60px;
    }

    .method-card {
      padding: 40px;
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .method-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(99,102,241,0.07);
    }

    .method-phase {
      font-family: var(--font-heading);
      font-size: 0.78rem;
      font-weight: 800;
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }

    .method-card h3 {
      
      font-weight: 800;
      margin-bottom: 16px;
    }

    .method-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .method-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .method-list li::before {
      content: '→';
      flex-shrink: 0;
      color: var(--color-primary);
      font-weight: 700;
      margin-top: 1px;
    }

    /* --- EXPERTISE --- */
    .expertise-section {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }

    .expertise-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      margin-top: 60px;
    }

    .expertise-block h3 {
      
      font-weight: 800;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--text-primary);
    }

    .expertise-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .expertise-tag {
      padding: 12px 22px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
      cursor: default;
    }

    .expertise-tag:hover {
      background: var(--text-main) !important;
      border-color: var(--text-main) !important;
      color: #ffffff;
      transform: translateY(-2px);
    }

    /* --- CASE STUDIES --- */
    .case-studies {
      padding: var(--section-padding) 0;
      background: #ffffff;
      border-top: 1px solid var(--border-color);
    }

    .cs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 30px;
      margin-top: 60px;
    }

    .cs-card {
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 48px 40px;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .cs-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-6px);
      box-shadow: 0 24px 60px rgba(99,102,241,0.08);
    }

    .cs-category {
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-primary);
      margin-bottom: 16px;
    }

    .cs-metric-wrap {
      display: flex;
      gap: 30px;
      margin: 24px 0;
      padding: 24px 0;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

    .cs-metric-item {
      display: flex;
      flex-direction: column;
    }

    .cs-metric-val {
      font-family: var(--font-heading);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1;
    }

    .cs-metric-lbl {
      font-size: 0.82rem;
      color: var(--text-secondary);
      margin-top: 5px;
    }

    .cs-card h3 {
      
      font-weight: 800;
      margin-bottom: 12px;
    }

    .cs-card p {
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }

    /* --- PACKAGES --- */
    .packages-section {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }

    .packages-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 60px;
    }

    .pkg-card {
      padding: 40px 32px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .pkg-card--featured {
      background: var(--text-main) !important;
      border-color: var(--text-main) !important;
      color: #ffffff;
    }

    .pkg-card:hover {
      transform: translateY(-6px);
    }

    .pkg-card:not(.pkg-card--featured):hover {
      border-color: var(--color-primary);
      box-shadow: 0 20px 50px rgba(99,102,241,0.08);
    }

    .pkg-badge {
      display: inline-block;
      background: rgba(99,102,241,0.1);
      color: var(--color-primary);
      border-radius: 99px;
      font-size: 0.7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 4px 12px;
      margin-bottom: 20px;
      align-self: flex-start;
    }

    .pkg-card--featured .pkg-badge {
      background: rgba(255,255,255,0.15);
      color: var(--color-danger);
    }

    .pkg-name {
      font-family: var(--font-heading);
      font-size: 1.4rem;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .pkg-hours {
      font-size: 2.5rem;
      font-weight: 800;
      font-family: var(--font-heading);
      line-height: 1;
      margin-bottom: 6px;
    }

    .pkg-hours span {
      font-size: 1rem;
      font-weight: 400;
      opacity: 0.6;
    }

    .pkg-desc {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 20px 0 24px;
    }

    .pkg-card--featured .pkg-desc {
      color: rgba(255,255,255,0.7);
    }

    .pkg-features {
      list-style: none;
      padding: 0;
      margin: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pkg-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
      color: var(--text-secondary);
    }

    .pkg-card--featured .pkg-features li {
      color: rgba(255,255,255,0.85);
    }

    .pkg-features li::before {
      content: '✓';
      color: var(--color-primary);
      font-weight: 800;
      flex-shrink: 0;
    }

    .pkg-card--featured .pkg-features li::before {
      color: var(--color-danger);
    }

    .pkg-cta {
      display: block;
      margin-top: 32px;
      padding: 14px 24px;
      background: var(--text-main) !important;
      color: #ffffff;
      text-decoration: none;
      text-align: center;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.95rem;
      border-radius: 10px;
      transition: transform 0.3s, background 0.3s;
    }

    .pkg-cta:hover {
      transform: translateY(-3px);
      background: var(--color-primary);
    }

    .pkg-card--featured .pkg-cta {
      background: linear-gradient(90deg, var(--color-primary), var(--color-danger)); color: #ffffff; border: none;
      color: var(--text-primary);
    }

    .pkg-card--featured .pkg-cta:hover {
      background: #ffffff;
    }

    /* --- BLOG SECTION --- */
    .blog-section {
      padding: var(--section-padding) 0;
      background: #ffffff;
      border-top: 1px solid var(--border-color);
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-top: 60px;
    }

    .blog-card {
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      overflow: hidden;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .blog-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(99,102,241,0.07);
    }

    .blog-card-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
    }

    .blog-card-body {
      padding: 32px;
    }

    .blog-tag {
      font-size: 0.75rem;
      font-weight: 800;
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
    }

    .blog-card h3 {
      
      font-weight: 800;
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .blog-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }

    /* --- WHY US --- */
    .why-us-section {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }

    .why-us-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-top: 60px;
    }

    .why-us-card {
      padding: 40px 32px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .why-us-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(99,102,241,0.07);
    }

    
    .why-us-icon svg, .challenge-icon svg {
      width: 28px;
      height: 28px;
      color: var(--primary);
    }

    .why-us-icon {
      font-size: 2.2rem;
      margin-bottom: 18px;
    }

    .why-us-card h3 {
      
      font-weight: 800;
      margin-bottom: 12px;
    }

    .why-us-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin: 0;
    }

    /* --- FAQ ASYMMETRICAL --- */
    .faq-asym {
      padding: var(--section-padding) 0;
      color: var(--text-primary);
      background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-subtle) 60%, rgba(248,250,252,0) 100%);
      position: relative;
      z-index: 2;
      border-top: 1px solid var(--border-color);
    }

    .faq-asym .section-title {
      color: var(--text-primary) !important;
      text-shadow: none !important;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 100px;
    }

    .faq-sticky {
      position: sticky;
      top: 150px;
      height: fit-content;
    }

    .faq-item {
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 24px;
      padding: 30px 40px;
      margin-bottom: 20px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
    }

    .faq-item:hover {
      transform: translateY(-2px);
      background: #ffffff;
      border-color: var(--color-primary);
      box-shadow: 0 20px 40px rgba(99, 102, 241, 0.05);
    }

    .faq-item.active {
      background: #ffffff;
      border-color: var(--color-primary);
      box-shadow: 0 25px 50px rgba(99, 102, 241, 0.08);
    }

    .faq-question {
      font-size: 1.2rem;
      font-weight: 700;
      font-family: var(--font-heading);
      color: var(--text-primary);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: color 0.3s ease;
    }

    .faq-question:hover {
      color: var(--color-primary);
    }

    .faq-question span {
      font-size: 1.8rem;
      font-weight: 400;
      color: var(--color-primary);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: inline-block;
    }

    .faq-item.active .faq-question span {
      transform: rotate(45deg);
      color: var(--color-primary);
    }

    .faq-answer {
      display: none;
      padding-top: 20px;
      font-size: 1.05rem;
      color: var(--text-secondary);
      line-height: 1.7;
      border-top: 1px solid rgba(15, 23, 42, 0.06);
      margin-top: 20px;
    }

    /* --- CONTACT SECTION --- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 80px;
      align-items: flex-start;
      margin-top: 50px;
    }

    @media (max-width: 991px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    .contact-info-panel { padding: 10px 0; }

    .contact-subtitle {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 15px;
      font-family: var(--font-heading);
    }

    .contact-desc {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--text-secondary);
      margin-bottom: 40px;
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 25px;
      margin-bottom: 40px;
    }

    .detail-item {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .detail-icon {
      width: 52px;
      height: 52px;
      background: rgba(99, 102, 241, 0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 1.3rem;
      color: var(--color-primary);
    }

    .detail-content { display: flex; flex-direction: column; }

    .detail-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-secondary);
      font-weight: 700;
      margin-bottom: 4px;
    }

    .detail-value {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-primary);
      text-decoration: none;
      transition: color 0.3s;
    }

    .detail-value:hover { color: var(--color-primary); }

    .social-links-wrap {
      display: flex;
      flex-direction: column;
      gap: 15px;
      border-top: 1px solid var(--border-color);
      padding-top: 35px;
    }

    .social-label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .social-icons { display: flex; gap: 15px; }

    .social-btn {
      width: 50px;
      height: 50px;
      
      
      display: flex;
      align-items: center;
      justify-content: flex-start;
      
      
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02);
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;
}

    .social-btn svg { width: 20px; height: 20px; }

    .social-btn:hover {
      transform: translateY(-3px);
      color: #ffffff;
      box-shadow: 0 10px 20px rgba(99, 102, 241, 0.15);
    }

    .social-btn--linkedin:hover { background: var(--color-success); border-color: var(--color-success); }
    .social-btn--facebook:hover { background: var(--color-primary); border-color: var(--color-primary); }

    .contact-form-wrap {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 50px;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
    }

    .form-row-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 767px) {
      .form-row-split { grid-template-columns: 1fr; gap: 0; }
    }

    .contact-form-wrap h3 {
      
      font-weight: 800;
      margin-bottom: 15px;
      color: var(--text-primary);
    }

    .contact-form-wrap p {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 35px;
      line-height: 1.5;
    }

    .floating-group {
      position: relative;
      margin-bottom: 25px;
    }

    .floating-input, .floating-textarea {
      width: 100%;
      padding: 18px 20px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-color);
      font-size: 1.05rem;
      color: var(--text-primary);
      font-family: var(--font-body);
      transition: all 0.3s ease;
      box-sizing: border-box;
    }

    .floating-textarea { resize: vertical; }

    .floating-input:focus, .floating-textarea:focus {
      outline: none;
      border-color: var(--text-main) !important;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(2, 6, 23, 0.05);
    }

    .chips-label {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .chips-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
    }

    .goal-chip {
      padding: 12px 20px;
      border: 1px solid var(--border-color);
      border-radius: 100px;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
    }

    .goal-chip:hover {
      border-color: var(--text-main) !important;
      color: var(--text-primary);
    }

    .goal-chip.selected {
      background: var(--text-main) !important;
      border-color: var(--text-main) !important;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(2, 6, 23, 0.15);
    }

    /* --- WORLDWIDE SECTION --- */
    .worldwide-section {
      padding: var(--section-padding) 0;
      background: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }

    .worldwide-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      margin-top: 60px;
      align-items: center;
    }

    .worldwide-map-placeholder {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 60px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .worldwide-map-placeholder::before {
      content: '';
      font-size: 8rem;
      display: block;
      margin-bottom: 20px;
      filter: grayscale(0.3);
    }

    .worldwide-offices {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .office-item {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px 28px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      transition: border-color 0.3s, transform 0.3s;
    }

    .office-item:hover {
      border-color: var(--color-primary);
      transform: translateX(6px);
    }

    .office-flag {
      font-size: 2rem;
      flex-shrink: 0;
    }

    .office-details h4 {
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0 0 4px;
    }

    .office-details p {
      font-size: 0.88rem;
      color: var(--text-secondary);
      margin: 0;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 1100px) {
      .why-grid { grid-template-columns: repeat(2, 1fr); }
      .packages-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .methodology-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 900px) {
      .hero-grid, .challenges-grid, .faq-grid, .expertise-grid,
      .worldwide-grid { grid-template-columns: 1fr; gap: 50px; }
      .services-grid { grid-template-columns: 1fr; }
      .hero-stats { flex-wrap: wrap; gap: 24px; }
    }

    @media (max-width: 700px) {
      .why-grid, .methodology-grid, .why-us-grid, .blog-grid,
      .packages-grid, .cs-grid { grid-template-columns: 1fr; }
      .challenges-list { grid-template-columns: 1fr; }
    }

    /* --- CASE STUDY CLICKABLE TILES (feat-bento-card) --- */
    .features-bento__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    @media (max-width: 900px) {
      .features-bento__grid { grid-template-columns: 1fr; }
    }

    .feat-bento-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 36px 32px;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }

    .feat-bento-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-primary));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .feat-bento-card:hover::before {
      transform: scaleX(1);
    }

    .feat-bento-card:hover {
      border-color: rgba(99,102,241,0.3);
      transform: translateY(-6px);
      box-shadow: 0 24px 60px rgba(99,102,241,0.1);
    }

    .feat-bento-card__icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      flex-shrink: 0;
    }

    .feat-bento-card__icon svg {
      width: 24px;
      height: 24px;
    }

    .feat-bento-card__title {
      font-family: var(--font-heading);
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--text-primary);
      margin: 0 0 10px;
      line-height: 1.2;
    }

    .feat-bento-card__desc {
      font-size: 0.92rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0 0 20px;
    }

    .feat-bento-card::after {
      content: 'Zobacz wyniki →';
      font-family: var(--font-heading);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: auto;
    }
  
    /* --- MOBILE RESPONSIVENESS FIXES --- */
    @media (max-width: 900px) {
      .hero-grid, .challenges-grid, .ecosystem-item, .nl-grid, .faq-grid, .comparison-grid, .methodology-grid, .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
      }
      .challenges-grid > div:first-child,
      .faq-grid > div:first-child,
      .ecosystem-item > div:first-child {
        position: relative !important;
        top: 0 !important;
      }
      .cs-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
      }
      .section-title {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
        word-break: break-word;
        hyphens: auto;
      }
    }

    @media (max-width: 700px) {
      .challenges-list, .bento-grid, .features-bento-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
      }
      .cs-grid {
        grid-template-columns: 1fr !important;
      }
      .hero-grid, .challenges-grid, .ecosystem-item, .nl-grid, .faq-grid {
        gap: 30px !important;
      }
    }

/* ==========================================================================
   FROM FILE: performance-marketing.html (Block 2)
   ========================================================================== */
#kontakt {
      --bg-color: #ffffff;
      --text-primary: var(--text-main);
      --text-secondary: var(--text-muted);
      --border-color: var(--border-subtle);
    }
    #kontakt .contact-form-wrap {
      background: #ffffff;
    }
    /* --- INTERACTIVE AI CONTACT SECTION --- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 80px;
      align-items: flex-start;
      margin-top: 50px;
    }

    @media (max-width: 991px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    /* Left side: Modern Info & Socials */
    .contact-info-panel {
      padding: 10px 0;
    }

    .contact-subtitle {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 15px;
      font-family: var(--font-heading);
    }

    .contact-desc {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--text-secondary);
      margin-bottom: 40px;
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 25px;
      margin-bottom: 40px;
    }

    .detail-item {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .detail-icon {
      width: 52px;
      height: 52px;
      background: rgba(99, 102, 241, 0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 1.3rem;
      color: var(--color-primary);
    }

    .detail-content {
      display: flex;
      flex-direction: column;
    }

    .detail-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-secondary);
      font-weight: 700;
      margin-bottom: 4px;
    }

    .detail-value {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-primary);
      text-decoration: none;
      transition: color 0.3s;
    }

    .detail-value:hover {
      color: var(--color-primary);
    }

    .social-links-wrap {
      display: flex;
      flex-direction: column;
      gap: 15px;
      border-top: 1px solid var(--border-color);
      padding-top: 35px;
    }

    .social-label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .social-icons {
      display: flex;
      gap: 15px;
    }

    .social-btn {
      width: 50px;
      height: 50px;
      
      
      display: flex;
      align-items: center;
      justify-content: flex-start;
      
      
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02);
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;
}

    .social-btn svg {
      width: 20px;
      height: 20px;
    }

    .social-btn:hover {
      transform: translateY(-3px);
      color: #ffffff;
      box-shadow: 0 10px 20px rgba(99, 102, 241, 0.15);
    }

    .social-btn--linkedin:hover {
      background: var(--color-success);
      border-color: var(--color-success);
    }

    .social-btn--facebook:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);
    }

    /* Right side: Interactive Form */
    .contact-form-wrap {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 50px;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
    }

    .form-row-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 767px) {
      .form-row-split {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    .contact-form-wrap h3 {
      
      font-weight: 800;
      margin-bottom: 15px;
      color: var(--text-primary);
    }

    .contact-form-wrap p {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 35px;
      line-height: 1.5;
    }

    .floating-group {
      position: relative;
      margin-bottom: 25px;
    }

    .floating-input, .floating-textarea {
      width: 100%;
      padding: 18px 20px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-color);
      font-size: 1.05rem;
      color: var(--text-primary);
      font-family: var(--font-body);
      transition: all 0.3s ease;
      box-sizing: border-box;
    }

    .floating-textarea {
      resize: vertical;
    }

    .floating-input:focus, .floating-textarea:focus {
      outline: none;
      border-color: var(--text-main) !important;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(2, 6, 23, 0.05);
    }

    /* Goal Chips */
    .chips-label {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .chips-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
    }

    .goal-chip {
      padding: 12px 20px;
      border: 1px solid var(--border-color);
      border-radius: 100px;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
    }

    .goal-chip:hover {
      border-color: var(--text-main) !important;
      color: var(--text-primary);
    }

    .goal-chip.selected {
      background: var(--text-main) !important;
      border-color: var(--text-main) !important;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(2, 6, 23, 0.15);
    }
    
    /* FIX FOR CHALLENGES OVERFLOW */
    .challenges .section-title {
      font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
      word-break: break-word;
      hyphens: auto;
    }
    .challenges-list {
      grid-template-columns: 1fr 1fr !important;
      gap: 40px !important;
    }
    @media (max-width: 900px) {
      .challenges-list {
        grid-template-columns: 1fr !important;
      }
    }

/* ==========================================================================
   FROM FILE: polityka-prywatnosci.html (Block 1)
   ========================================================================== */
:root {
      --bg-color: var(--bg-subtle);
      --text-primary: var(--text-main);
      --text-secondary: var(--text-muted);
      --accent-color: var(--color-primary);
      --border-color: rgba(15, 23, 42, 0.1);
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-primary);
      font-family: var(--font-body);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    /* --- NAV SCROLL FIX --- */
    .navbar--light-bg.is-top {
      background: rgba(255, 255, 255, 0.78) !important;
      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05) !important;
      backdrop-filter: blur(24px) saturate(1.35) !important;
    }

    .legal-header {
      padding: 180px 0 60px;
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      text-align: center;
    }

    .legal-title {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      font-family: var(--font-heading);
      margin-bottom: 20px;
      letter-spacing: -0.02em;
    }

    .legal-meta {
      font-size: 1rem;
      color: var(--text-secondary);
    }

    .legal-content {
      padding: 80px 0 120px;
      background: var(--bg-color);
    }

    .legal-inner {
      max-width: 800px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 60px;
      box-shadow: 0 15px 35px rgba(15, 23, 42, 0.02);
    }

    .legal-inner h2 {
      font-family: var(--font-heading);
      
      font-weight: 700;
      color: var(--text-primary);
      margin-top: 40px;
      margin-bottom: 20px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .legal-inner h2:first-of-type {
      margin-top: 0;
    }

    .legal-inner p, .legal-inner li {
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }

    .legal-inner strong {
      color: var(--text-primary);
    }

    .legal-inner ul, .legal-inner ol {
      margin-left: 20px;
      margin-bottom: 25px;
    }

    .legal-inner li {
      margin-bottom: 10px;
    }

    .legal-inner a {
      color: var(--accent-color);
      text-decoration: none;
      font-weight: 600;
      transition: opacity 0.2s;
    }

    .legal-inner a:hover {
      opacity: 0.8;
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      
      text-decoration: none;
      
      
      margin-bottom: 30px;
      transition: color 0.2s;
    
    padding: 14px 28px !important;
    border-radius: 100px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-display) !important;

    background: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-subtle) !important;
}

    .back-btn:hover {
      color: var(--text-primary);
    }

    @media (max-width: 768px) {
      .legal-inner {
        padding: 30px 20px;
        border-radius: 16px;
      }
    }
/* --- SG ARCHITECTURE (Stripe-Style Orchestration) --- */
.sg-wrapper {
  width: 100%;
  overflow-x: auto;
  padding: 40px 0;
  margin: 40px 0;
  -webkit-overflow-scrolling: touch;
}

.sg-canvas {
  width: 1000px;
  height: 550px;
  position: relative;
  margin: 0 auto;
  background-color: var(--bg-base);
  background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: 24px;
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 0 60px rgba(15,23,42,0.02);
}

.sg-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sg-path {
  fill: none;
  stroke: var(--border-subtle);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  animation: sg-dash 30s linear infinite;
}

@keyframes sg-dash {
  to {
    stroke-dashoffset: -1000;
  }
}

.sg-node {
  position: absolute;
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sg-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(15,23,42,0.05) !important;
}

.sg-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sg-node--center {
  width: 200px;
  height: 150px;
  background: var(--color-primary) !important;
  color: #ffffff;
  border: none !important;
  border-radius: 20px !important;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-shadow: 0 20px 40px -10px rgba(59,130,246,0.4) !important;
}

.sg-node--center svg {
  width: 40px; height: 40px;
  opacity: 0.95;
}

.sg-badge {
  background: rgba(255,255,255,0.2);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #ffffff;
}

/* Stripe-like engineering background */
.arch-section {
  position: relative;
  background-image: none;
}

/* Make BQ central node pop out more like Stripe */
.arch-bq {
  box-shadow: 0 20px 40px -10px rgba(59,130,246,0.3) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Flow animation */
.arch-flow-anim {
  stroke-dasharray: 20 60;
  animation: flowAnim 1.5s linear infinite;
}

@keyframes flowAnim {
  0% { stroke-dashoffset: 80; }
  100% { stroke-dashoffset: 0; }
}

/* Adjust arch-arrow to center vertically */
.arch-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- STRIPE-STYLE ORCHESTRATION GRAPH --- */
.arch-stripe-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: var(--bg-base);
  background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 0 80px rgba(15,23,42,0.02);
}

.sd-wrapper {
  position: relative;
  width: 1000px;
  height: 700px;
  flex-shrink: 0;
}

.sd-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sd-path {
  fill: none;
  stroke: var(--border-subtle);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.sd-flow {
  stroke-dasharray: 40 80;
}

.sd-flow-1 { animation: sdFlowIn 2s linear infinite; }
.sd-flow-2 { animation: sdFlowIn 2.2s linear infinite 0.5s; }
.sd-flow-3 { animation: sdFlowIn 1.8s linear infinite 0.3s; }
.sd-flow-4 { animation: sdFlowIn 2.5s linear infinite 0.8s; }

.sd-flow-out-1 { animation: sdFlowOut 2s linear infinite; }
.sd-flow-out-2 { animation: sdFlowOut 2.3s linear infinite 0.5s; }

@keyframes sdFlowIn {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}
@keyframes sdFlowOut {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

.sd-node {
  position: absolute;
  z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform-origin: center;
}

.sd-node:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(15,23,42,0.08) !important;
}

.sd-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-main);
  box-shadow: 0 2px 8px rgba(15,23,42,0.03);
}

.sd-card-dest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(15,23,42,0.04);
}

.sd-main-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 20px 40px -10px rgba(59,130,246,0.4) !important;
}

.sd-label {
  position: absolute;
  pointer-events: none;
}

.sd-action-label {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  z-index: 3;
  transform: translateY(-50%);
}

.sd-action-label--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}



/* --- Apple-Inspired Minimalist 2D Flowchart (Light Theme) --- */
.stripe-clone-section {
  background-color: transparent;
  width: 100%;
  padding: 40px 0;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sc-wrapper {
  width: 1000px;
  height: 380px;
  position: relative;
  flex-shrink: 0;
  background: transparent;
  margin: 0 auto;
}

.sc-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sc-path {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 2px;
}

.sc-flow {
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 40 180;
  stroke-linecap: round;
  animation: scFlowAnim 3s linear infinite;
}

@keyframes scFlowAnim {
  from { stroke-dashoffset: 220; }
  to { stroke-dashoffset: 0; }
}

.sc-pill, .sc-center-node, .sc-square {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.sc-pill:hover, .sc-center-node:hover, .sc-square:hover {
  transform: translate(-50%, -51%);
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.sc-pill {
  background: #ffffff;
  color: var(--text-main);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  width: 220px;
  height: 60px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  line-height: 1.3;
}

.sc-center-node {
  width: 220px;
  height: 80px;
  background: #f0f7ff;
  border: 1px solid #cce3fd;
  color: #1e3a8a;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.05);
  z-index: 3;
}

.sc-loop-label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(15,23,42,0.02);
  white-space: nowrap;
}

.sc-square {
  width: 44px; height: 44px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(15,23,42,0.02);
}

/* FORCE OVERRIDE FOR ARCH SECTION GRID - MATCHING OTHERS */
section.arch-section#pipeline {
  background-color: var(--bg-subtle) !important;
  background-image: none !important;
  padding: 60px 0 !important;
}

section.arch-section#pipeline .arch__head {
  margin-bottom: 40px !important;
}

.sc-psp {
  background: #f8fafc;
  color: var(--text-main);
  border: 1px solid #cbd5e1;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.03);
}

.sc-square {
  width: 50px; height: 50px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(15,23,42,0.04);
}

/* FORCE OVERRIDE FOR ARCH SECTION GRID */
section.arch-section#pipeline {
  background-color: var(--bg-subtle) !important;
  background-image: none !important;
  padding: 60px 0 !important;
}

section.arch-section#pipeline .arch__head {
  margin-bottom: 20px !important;
}

.stripe-clone-section {
  padding: 40px 0 !important;
}

.sc-wrapper {
  margin: 0 auto !important;
}


/* --- 3-COLUMN BENTO GRID FOR 3 ETAPY WDROZENIA --- */
.wprowadzenie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.wprowadzenie-grid .mtr-step {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 32px;
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Base Top Border */
.wprowadzenie-grid .mtr-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}

/* Colors for Step 1 (Blue) */
.wprowadzenie-grid .mtr-step--1::before { background: #3b82f6; }
.wprowadzenie-grid .mtr-step--1 .mtr-rank { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.wprowadzenie-grid .mtr-step--1 .mtr-radio { border: 2px solid #93c5fd; }
.wprowadzenie-grid .mtr-step--1 .mtr-radio::after { background: #3b82f6; }
.wprowadzenie-grid .mtr-step--1 .mtr-time { color: #3b82f6; border: 1px solid #bfdbfe; }
.wprowadzenie-grid .mtr-step--1 .mtr-toggle__ico { background: #eff6ff; color: #3b82f6; stroke: #3b82f6; }

/* Colors for Step 2 (Navy Accent - Footer match) */
.wprowadzenie-grid .mtr-step--2::before { background: #0b1329; }
.wprowadzenie-grid .mtr-step--2 .mtr-rank { background: rgba(11, 19, 41, 0.08); color: #0b1329; border: 1px solid rgba(11, 19, 41, 0.2); }
.wprowadzenie-grid .mtr-step--2 .mtr-radio { border: 2px solid rgba(11, 19, 41, 0.3); }
.wprowadzenie-grid .mtr-step--2 .mtr-radio::after { background: #0b1329; }
.wprowadzenie-grid .mtr-step--2 .mtr-time { color: #0b1329; border: 1px solid rgba(11, 19, 41, 0.2); }
.wprowadzenie-grid .mtr-step--2 .mtr-toggle__ico { background: rgba(11, 19, 41, 0.08); color: #0b1329; stroke: #0b1329; }

/* Colors for Step 3 (Unified Blue) */
.wprowadzenie-grid .mtr-step--3::before { background: #3b82f6; }
.wprowadzenie-grid .mtr-step--3 .mtr-rank { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.wprowadzenie-grid .mtr-step--3 .mtr-radio { border: 2px solid #93c5fd; }
.wprowadzenie-grid .mtr-step--3 .mtr-radio::after { background: #3b82f6; }
.wprowadzenie-grid .mtr-step--3 .mtr-time { color: #3b82f6; border: 1px solid #bfdbfe; }
.wprowadzenie-grid .mtr-step--3 .mtr-toggle__ico { background: #eff6ff; color: #3b82f6; stroke: #3b82f6; }


.wprowadzenie-grid .mtr-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
}

.wprowadzenie-grid .mtr-rank,
.wprowadzenie-grid .mtr-time {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wprowadzenie-grid .mtr-radio {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wprowadzenie-grid .mtr-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.wprowadzenie-grid .mtr-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text-main);
  line-height: 1.2;
}

.wprowadzenie-grid .mtr-lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.wprowadzenie-grid .mtr-toggles {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wprowadzenie-grid .mtr-toggle {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
  transition: border-color 0.2s ease;
}
.wprowadzenie-grid .mtr-toggle:hover {
  border-color: rgba(15, 23, 42, 0.12);
}

.wprowadzenie-grid .mtr-toggle > summary {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.wprowadzenie-grid .mtr-toggle > summary::-webkit-details-marker {
  display: none;
}

.wprowadzenie-grid .mtr-toggle__lead {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wprowadzenie-grid .mtr-toggle__ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wprowadzenie-grid .mtr-toggle__ico svg {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
  fill: none;
}

.wprowadzenie-grid .mtr-toggle__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.wprowadzenie-grid .mtr-toggle__chev {
  font-size: 0.7rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
}
.wprowadzenie-grid .mtr-toggle[open] .mtr-toggle__chev {
  transform: rotate(180deg);
}

.wprowadzenie-grid .mtr-toggle__body {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 0 16px 16px 68px; /* Indent to match text alignment */
}

.wprowadzenie-grid .mtr-outcome {
  margin-top: 24px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  display: none; /* Hide if not needed to match screenshot perfectly, or display it */
}

@media (max-width: 960px) {
  .wprowadzenie-grid {
    grid-template-columns: 1fr;
  }
}

/* REINSTATE THE ROBUST OVERRIDE AT THE BOTTOM JUST IN CASE */
/* FORCE OVERRIDE FOR ARCH SECTION GRID */
section.arch-section#pipeline {
  background-color: var(--bg-subtle) !important;
  background-image: none !important;
  padding: 60px 0 !important;
}
section.arch-section#pipeline .arch__head {
  margin-bottom: 20px !important;
}

/* Footer Wave Styles */
.footer-wave-container {
  width: 100%;
  height: 120px;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}
.footer-wave-svg {
  position: relative;
  display: block;
  width: 100%;
  height: 120px;
}

/* Fix heading colors inside dark sections/containers */
.newsletter-brutalist h1,
.newsletter-brutalist h2,
.newsletter-brutalist h3,
.newsletter-brutalist h4,
.newsletter-brutalist h5,
.newsletter-brutalist h6,
.page-end-band h1,
.page-end-band h2,
.page-end-band h3,
.page-end-band h4,
.page-end-band h5,
.page-end-band h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.faq-section h1,
.faq-section h2,
.faq-section h3,
.faq-section h4,
.faq-section h5,
.faq-section h6,
.bento-card.highlight h1,
.bento-card.highlight h2,
.bento-card.highlight h3,
.bento-card.highlight h4,
.bento-card.highlight h5,
.bento-card.highlight h6,
.comparison h1,
.comparison h2,
.comparison h3,
.comparison h4,
.comparison h5,
.comparison h6,
.roadmap-card--featured h1,
.roadmap-card--featured h2,
.roadmap-card--featured h3,
.roadmap-card--featured h4,
.roadmap-card--featured h5,
.roadmap-card--featured h6 {
  color: #ffffff !important;
}

/* Specific neon accent overrides inside highlight cards if needed */
.bento-card.highlight h3 {
  color: var(--accent-neon) !important;
}

/* Dark comparison cards hover effects */
.comparison .bento-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Fix social media buttons styling and visibility in contact section */
.social-btn {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #0f172a !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.social-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.social-btn:hover {
  transform: translateY(-3px) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1) !important;
}

.social-btn--linkedin:hover {
  background: #0077b5 !important;
  border-color: #0077b5 !important;
}

.social-btn--facebook:hover {
  background: #1877f2 !important;
  border-color: #1877f2 !important;
}

/* Newsletter case study card hover */
.nl-case-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: default;
}
.nl-case-card:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Mobile Burger Menu and Drawer Styles */
.mobile-burger-btn {
  display: none;
  background: none;
  border: none;
  color: inherit;
  padding: 8px;
  cursor: pointer;
  z-index: 1001;
}

.mobile-burger-btn svg {
  display: block;
}

@media (max-width: 860px) {
  .mobile-burger-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  
  .navbar-inner {
    grid-template-columns: auto 1fr auto !important;
    display: grid !important;
    align-items: center;
    gap: 16px !important;
    padding: 10px 16px !important;
  }
  
  .nav-logo {
    justify-self: center !important;
    grid-column: 2;
  }
  
  .nav-cta {
    grid-column: 3;
    justify-self: end !important;
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
    margin: 0 !important;
  }
  
  .nav-logo svg {
    height: 14px !important;
  }
  
  .nav-links {
    display: none !important;
  }
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: #090d16;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile-menu-drawer.open {
  transform: translateX(280px);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40px;
}

.drawer-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 8px;
}

.drawer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: lowercase;
  display: block;
  transition: color 0.2s;
}

.drawer-links a:hover {
  color: #3b82f6;
}

.drawer-cta {
  background: #3b82f6;
  color: #ffffff;
  text-align: center;
  padding: 12px 24px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  transition: background 0.2s;
}

/* Fix mobile list item truncating in ecosystem section */
@media (max-width: 768px) {
  .eco-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .eco-list li {
    padding: 20px !important;
    font-size: 1.05rem !important;
  }
}

/* Hide W czym możemy pomóc question and buttons in contact form on mobile */
@media (max-width: 768px) {
  .contact-form-wrap .chips-label,
  .contact-form-wrap .chips-wrapper {
    display: none !important;
  }
}
@media (max-width: 768px) { .mobile-hidden { display: none !important; } }
@media (max-width: 768px) { .bento-card { height: auto !important; min-height: auto !important; padding: 24px !important; } }
/* ========================================================== */
/* VIZYBLE-INSPIRED CASE STUDY & NEWSLETTER HYBRID SECTION    */
/* ========================================================== */
.viz-case-container {
  display: flex;
  background-color: #111625;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  margin-top: 40px;
}
.viz-case-content {
  flex: 1;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.viz-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #3b82f6;
  margin-bottom: 24px;
  display: inline-block;
  padding: 4px 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 99px;
  align-self: flex-start;
}
.viz-heading {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 20px;
}
.viz-desc {
  font-family: var(--font-prose);
  font-size: 1rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 40px;
}
.viz-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}
.viz-input {
  width: 100%;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  font-family: var(--font-prose);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.viz-input:focus {
  border-color: #3b82f6;
  background: rgba(255, 255, 255, 0.05);
}
.viz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 8px 8px 8px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
}
.viz-btn:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.3);
}
.viz-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3b82f6;
  color: #ffffff;
  margin-left: 20px;
  transition: transform 0.3s ease;
}
.viz-btn:hover .viz-icon-wrapper {
  transform: translateX(4px);
}
.viz-icon-wrapper svg {
  width: 14px;
  height: 14px;
}
.viz-case-visual {
  flex: 1;
  background: #0b0f19;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.viz-case-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.viz-case-card {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.viz-case-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
}
.viz-case-img {
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.viz-case-text {
  display: flex;
  flex-direction: column;
}
.viz-case-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
}
.viz-case-desc {
  font-family: var(--font-prose);
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 991px) {
  .viz-case-container {
    flex-direction: column;
  }
  .viz-case-visual {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 24px;
  }
  .viz-case-content {
    padding: 40px 24px;
  }
  .viz-case-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .viz-case-img {
    width: 100%;
    height: 180px;
  }
}
/* ========================================================== */
/* VIZYBLE-INSPIRED PROCESS/ROADMAP SECTION                   */
/* ========================================================== */
.process-section {
  position: relative;
  overflow: visible;
}
.process-container {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.process-sticky-wrapper {
  flex: 1;
  position: sticky;
  top: 120px;
  height: max-content;
}
.process-sticky-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.process-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 20px;
}
.process-item {
  display: flex;
  gap: 32px;
}
.process-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
}
.process-bullet {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.process-line {
  flex-grow: 1;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin: 16px 0;
  min-height: 80px;
}
.process-content {
  padding-bottom: 64px;
}
.process-meta {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 12px;
  margin-top: 12px;
}
.process-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
}
.process-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.process-points li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-prose);
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.6;
}
.process-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
}

@media (max-width: 991px) {
  .process-container {
    flex-direction: column;
    gap: 60px;
  }
  .process-sticky-wrapper {
    position: relative;
    top: 0;
  }
  .process-item {
    gap: 20px;
  }
  .process-bullet {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
/* ========================================================== */
/* VIZYBLE EXACT MINIMALIST PROCESS/ROADMAP SECTION           */
/* ========================================================== */
.process-section {
  position: relative;
  overflow: visible;
  padding: 120px 0;
}
.process-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
}
.process-sticky-wrapper {
  position: sticky !important;
  top: 120px !important;
  height: max-content !important;
}
.viz-display-heading {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -1px;
}
.process-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 96px !important; 
  padding-top: 20px;
}
.process-item {
  display: flex !important;
  gap: 32px !important;
  align-items: flex-start !important;
}
.process-order-wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
}
.process-icon-bullet {
  width: 16px;
  height: 16px;
  background: #3b82f6; 
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}
.process-order-text {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  opacity: 0.9;
}
.process-text-content {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.process-title-wrapper {
  max-width: 320px;
  margin-bottom: 24px;
}
.process-title {
  font-family: var(--font-heading);
  font-size: 1.5rem !important;
  font-weight: 700;
  color: #ffffff;
}
.process-desc {
  font-family: var(--font-prose);
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.6;
}
@media (max-width: 991px) {
  .process-container {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
  }
  .process-sticky-wrapper {
    position: relative !important;
    top: 0 !important;
  }
  .process-list {
    gap: 60px !important;
  }
  .process-item {
    flex-direction: column !important;
    gap: 20px !important;
  }
}
/* STICKY FIX & LIGHT THEME OVERRIDES FOR PROCESS SECTION */
.process-sticky-wrapper {
  align-self: start !important;
}
.bg-light.process-section .viz-display-heading {
  color: #0f172a !important;
}
.bg-light.process-section .process-order-text {
  color: #0f172a !important;
}
.bg-light.process-section .process-title {
  color: #0f172a !important;
}
.bg-light.process-section .process-desc {
  color: #475569 !important;
}
.bg-light.process-section .viz-btn {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}
.bg-light.process-section .viz-btn:hover {
  background: rgba(15, 23, 42, 0.05) !important;
}
/* OVERRIDE STICKY TO FLEXBOX */
.process-container {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: row !important;
}
.process-sticky-wrapper {
  flex: 1 !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: auto !important;
  align-self: flex-start !important;
}
.process-list {
  flex: 1 !important;
}
@media (max-width: 991px) {
  .process-container {
    flex-direction: column !important;
  }
}
/* DEFINITIVE STICKY FIX */
.process-container {
  display: flex !important;
  align-items: stretch !important; /* Allow columns to stretch to full height */
  flex-direction: row !important;
}
.process-sticky-wrapper {
  flex: 1 !important;
  /* NO sticky here, this is the tall column */
  height: auto !important;
  position: relative !important;
}
.process-sticky-element {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  /* Sticky element lives inside the tall wrapper and scrolls within it */
}
.process-list {
  flex: 1 !important;
}

/* ============================================================ */
/* FINAL DEFINITIVE STICKY FIX � overrides all previous attempts */
/* ============================================================ */
.process-section {
  overflow: visible !important;
}
.process-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 80px !important;
}
.process-sticky-wrapper {
  flex: 1 !important;
  align-self: stretch !important;   /* MUST stretch to full right-column height */
  position: relative !important;    /* wrapper is tall, not sticky */
  height: auto !important;
  top: auto !important;
}
.process-sticky-element {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;            /* sticks 120px from viewport top */
}
.process-list {
  flex: 1 !important;
}
@media (max-width: 991px) {
  .process-container {
    flex-direction: column !important;
  }
  .process-sticky-wrapper {
    align-self: auto !important;
  }
  .process-sticky-element {
    position: relative !important;
    top: 0 !important;
  }
}
/* JS-DRIVEN SCROLL FOLLOW � wrapper must be relative for absolute parking */
.process-sticky-wrapper {
  position: relative !important;
  align-self: stretch !important;
}
.process-sticky-element {
  /* JS controls position dynamically: relative -> fixed -> absolute */
  position: relative;
}
/* Clip process section so absolute-parked heading doesn't bleed into next section */
.process-section {
  overflow: clip !important;
}
/* ============================================================ */
/* NEWSLETTER SECTION OVERHAUL                                  */
/* ============================================================ */

/* Inline form: input + button side by side */
.viz-form--inline {
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.viz-form--inline .viz-input {
  flex: 1 !important;
  border-radius: 8px 0 0 8px !important;
  border-right: none !important;
}
.viz-form--inline .viz-btn {
  border-radius: 0 8px 8px 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Case study images: much bigger, no border-radius, bleed into the card */
.viz-case-img {
  width: 200px !important;
  height: 160px !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}
.viz-case-card {
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
}
.viz-case-card:hover {
  background: transparent !important;
}
.viz-case-text {
  padding: 16px 24px !important;
}

@media (max-width: 768px) {
  .viz-form--inline {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .viz-form--inline .viz-input {
    border-radius: 8px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .viz-form--inline .viz-btn {
    border-radius: 8px !important;
  }
  .viz-case-img {
    width: 100% !important;
    height: 200px !important;
  }
}
/* ============================================================ */
/* CASE STUDY IMAGES: BLEED TO LEFT EDGE OF PANEL               */
/* ============================================================ */
.viz-case-visual {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
}
.viz-case-stack {
  gap: 0 !important;
  height: 100% !important;
}
.viz-case-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.viz-case-card:last-child {
  border-bottom: none !important;
}
.viz-case-img {
  width: 240px !important;
  height: auto !important;
  min-height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
.viz-case-text {
  padding: 28px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  .viz-case-visual {
    padding: 0 !important;
  }
  .viz-case-card {
    flex-direction: row !important;
  }
  .viz-case-img {
    width: 140px !important;
    min-height: 100% !important;
    height: auto !important;
  }
}
/* ============================================================ */
/* WIDEN RIGHT PANEL + BIGGER IMAGES                            */
/* ============================================================ */
.viz-case-content {
  flex: 0.8 !important;
}
.viz-case-visual {
  flex: 1.2 !important;
}
.viz-case-img {
  width: 50% !important;
  min-width: 280px !important;
}
/* ============================================================ */
/* CASE STUDY IMAGES: AMBIENT GLOW + GRADIENT FADE              */
/* ============================================================ */
.viz-case-card {
  position: relative !important;
}

/* Ambient glow behind images */
.viz-case-img {
  position: relative !important;
  z-index: 1 !important;
  box-shadow:
    20px 0 60px rgba(59, 130, 246, 0.15),
    8px 0 30px rgba(59, 130, 246, 0.1),
    0 0 80px rgba(59, 130, 246, 0.08) !important;
}

/* Gradient fade on right edge of image � smooth transition into dark bg */
.viz-case-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(to right, transparent 60%, #0b0f19 100%);
  z-index: 2;
  pointer-events: none;
}

/* Text sits above the gradient */
.viz-case-text {
  position: relative !important;
  z-index: 3 !important;
}

/* Subtle hover lift on the whole card */
.viz-case-card:hover .viz-case-img {
  box-shadow:
    24px 0 80px rgba(59, 130, 246, 0.22),
    10px 0 40px rgba(59, 130, 246, 0.15),
    0 0 100px rgba(59, 130, 246, 0.12) !important;
}
.viz-case-img {
  transition: box-shadow 0.4s ease !important;
}
/* ============================================================ */
/* CASE STUDY CARDS: IMAGE AS BACKGROUND (MODERN LOOK)          */
/* ============================================================ */
.viz-case-visual {
  padding: 48px !important;
}
.viz-case-stack {
  gap: 24px !important;
  height: auto !important;
}
.viz-case-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 40px 32px 32px 32px !important;
  min-height: 220px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0b0f19 !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}
.viz-case-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: linear-gradient(to top, rgba(11, 15, 25, 0.95) 0%, rgba(11, 15, 25, 0.2) 100%) !important;
  z-index: 1 !important;
}
.viz-case-card::after {
  display: none !important; /* disable previous gradient */
}
.viz-case-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
.viz-case-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  z-index: 0 !important;
  opacity: 0.6 !important;
  transition: opacity 0.4s ease, transform 0.6s ease !important;
  box-shadow: none !important;
}
.viz-case-card:hover .viz-case-img {
  opacity: 0.8 !important;
  transform: scale(1.05) !important;
}
.viz-case-text {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
}
.viz-case-title {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.viz-case-desc {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
/* ============================================================ */
/* INTERACTIVE TABS (FILARY)                                    */
/* ============================================================ */
.interactive-tabs-container {
  display: flex;
  gap: 64px;
  align-items: center;
  margin-top: 48px;
}
.interactive-tabs-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tab-title {
  padding: 32px 40px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  background: transparent;
}
.tab-title.active {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.tab-heading {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  opacity: 0.25;
  transition: opacity 0.4s ease, transform 0.4s ease;
  letter-spacing: -0.02em;
}
.tab-title:hover .tab-heading {
  opacity: 0.6;
}
.tab-title.active .tab-heading {
  opacity: 1;
  transform: translateX(8px);
}
.interactive-tabs-content {
  flex: 1;
  background: #111625;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 56px 48px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.tab-pane {
  display: none;
  flex-direction: column;
  animation: tabFadeIn 0.5s ease forwards;
  height: 100%;
}
.tab-pane.active {
  display: flex;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-icon {
  margin-bottom: 40px;
  opacity: 0.9;
}
.tab-desc {
  font-size: 1.1rem;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 48px;
  font-family: var(--font-prose);
}
.tab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}
.tab-tags span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.85rem;
  color: #e2e8f0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 991px) {
  .interactive-tabs-container {
    flex-direction: column;
    gap: 40px;
  }
  .tab-title {
    padding: 20px 24px;
  }
  .tab-heading {
    font-size: 2rem;
  }
  .interactive-tabs-content {
    min-height: auto;
    padding: 40px 32px;
  }
  .tab-title.active .tab-heading {
    transform: translateX(4px);
  }
}

/* ============================================================ */
/* FIX NAVBAR TRANSLUCENCY ON DARK SECTIONS                     */
/* ============================================================ */
.navbar--light-bg {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* ============================================================ */
/* INTERACTIVE TABS (VIZYBLE STYLE)                             */
/* ============================================================ */
.interactive-tabs-container {
  display: flex !important;
  gap: 40px !important;
  align-items: stretch !important;
  margin-top: 48px !important;
}
.interactive-tabs-left {
  flex: 0 0 320px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 40px 0 !important;
}
.interactive-tabs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.tab-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tab-bullet {
  font-size: 2rem !important;
  line-height: 1 !important;
  color: #fff !important;
  opacity: 0.3 !important;
  transition: opacity 0.3s ease !important;
}
.tab-heading {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 !important;
  opacity: 0.3 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  letter-spacing: 0 !important;
}
.tab-title:hover .tab-heading,
.tab-title:hover .tab-bullet {
  opacity: 0.6 !important;
}
.tab-title.active .tab-heading,
.tab-title.active .tab-bullet {
  opacity: 1 !important;
  transform: none !important;
}
.tab-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #111625 !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 16px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  width: max-content !important;
  transition: background 0.3s ease !important;
  margin-top: 48px !important;
}
.tab-cta-btn:hover {
  background: #1e293b !important;
}

.interactive-tabs-content {
  flex: 1 !important;
  background: #111625 !important; /* dark purple/blue */
  border: none !important;
  border-radius: 16px !important;
  padding: 0 !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.tab-pane {
  display: none !important;
  grid-template-columns: 1fr 1fr !important;
  height: 100% !important;
  animation: tabFadeIn 0.5s ease forwards !important;
  flex: 1 !important;
}
.tab-pane.active {
  display: grid !important;
}
.tab-pane-text {
  padding: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.tab-pane-title {
  font-size: 2.2rem !important;
  color: #fff !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin: 0 0 24px 0 !important;
}
.tab-pane-desc {
  font-size: 1.05rem !important;
  color: #3b82f6 !important; /* purple tint for text */
  line-height: 1.6 !important;
  margin: 0 !important;
  font-family: var(--font-prose) !important;
}
.tab-link {
  color: #c4b5fd !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  margin-left: 4px !important;
}
.tab-link:hover {
  color: #fff !important;
}
.tab-pane-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px !important;
}
.viz-svg {
  width: 100% !important;
  height: auto !important;
  max-width: 320px !important;
}

@media (max-width: 991px) {
  .interactive-tabs-container {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .interactive-tabs-left {
    flex: auto !important;
    padding: 0 !important;
  }
  .tab-pane {
    grid-template-columns: 1fr !important;
  }
  .tab-pane-visual {
    padding: 0 48px 48px 48px !important;
  }
}
/* ============================================================ */
/* NEW HERO (VIZYBLE DOTS STYLE)                                */
/* ============================================================ */
.hero-viz-dots {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #080b12; /* Deep dark blue/purple */
  /* SVG Dot Pattern */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyIiBjeT0iMiIgcj0iMS41IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIi8+PC9zdmc+");
  background-size: 24px 24px;
  background-position: top left;
  padding: 180px 0 120px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Subtle radial gradient overlay to fade out dots towards bottom/right */
.hero-viz-dots::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 10% 20%, transparent 10%, #080b12 90%);
  z-index: 1;
  pointer-events: none;
}

.hero-viz-dots .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-viz-content {
  max-width: 900px;
}

.hero-viz-title {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  margin-bottom: 40px;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero-viz-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: #3b82f6; /* subtle purple tint */
  line-height: 1.6;
  margin-bottom: 64px;
  max-width: 650px;
  font-weight: 400;
  font-family: var(--font-prose);
  text-wrap: balance;
}

.btn-viz-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: #080b12;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 18px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.12);
}

.btn-viz-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.2);
  background: #f8fafc;
}

.btn-viz-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080b12;
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.btn-viz-icon svg {
  width: 12px;
  height: 12px;
}

.btn-viz-cta:hover .btn-viz-icon {
  transform: translateX(4px);
}

/* Make sure dark navbar looks solid when scrolled down */
.navbar--dark-bg:not(.is-top) {
  background: rgba(8, 11, 18, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* ============================================================ */
/* FIX LOGO SVG FILL ON THEME LIGHT                             */
/* ============================================================ */
.navbar.theme-light .nav-logo-icon path {
  fill: #0f172a !important; 
}

/* ============================================================ */
/* FIX LOGO SVG FILL ON THEME LIGHT                             */
/* ============================================================ */
.navbar--light-bg .nav-logo svg path {
  fill: #0f172a !important; 
}
.navbar--light-bg .logo-text {
  color: #0f172a !important;
}

/* ============================================================ */
/* HERO MORSE CODE DECORATION & DOTS OVERRIDE                   */
/* ============================================================ */
.hero-viz-dots {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyIiBjeT0iMiIgcj0iMS41IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMikiLz48L3N2Zz4=") !important;
}

.hero-morse-code {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-end;
  font-family: 'Courier New', Courier, monospace;
  font-size: 2.2rem;
  font-weight: 900;
  color: rgba(59, 130, 246, 0.4); /* Glowing blue tint */
  z-index: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: 4px;
  opacity: 0.8;
}

/* Add a cool animation to make it feel like transmission */
@keyframes morseFlicker {
  0%   { opacity: 0.8; text-shadow: 0 0 10px rgba(59,130,246,0.3); }
  50%  { opacity: 0.4; text-shadow: 0 0 5px rgba(59,130,246,0.1); }
  100% { opacity: 0.8; text-shadow: 0 0 15px rgba(59,130,246,0.5); }
}
.hero-morse-code {
  animation: morseFlicker 3s infinite alternate ease-in-out;
}

@media (max-width: 991px) {
  .hero-morse-code {
    right: 4%;
    font-size: 1.5rem;
    gap: 1rem;
    opacity: 0.4;
  }
}



/* ============================================================ */
/* MOBILE OPTIMIZATIONS (ADDED VIA PLAN)                        */
/* ============================================================ */

/* 1. Navbar & Mobile Menu */
@media (max-width: 768px) {
  .navbar-inner {
    padding: 10px 16px !important;
  }
}

/* 2. Hero Section */
@media (max-width: 576px) {
  .hero-viz-dots {
    min-height: 70vh !important;
  }
  .hero-viz-dots .container {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .hero-viz-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
  }
  .hero-viz-subtitle {
    margin-bottom: 40px !important;
  }
  /* Push morse code down or hide */
  .hero-morse-code {
    opacity: 0.1 !important;
    right: -10px !important;
    font-size: 1.2rem !important;
  }
}

/* 3. Ecosystem / Services Section */
@media (max-width: 768px) {
  .ecosystem {
    padding: 60px 0 !important;
  }
  .ecosystem-item {
    gap: 30px !important;
  }
  .eco-visual {
    padding: 20px !important;
  }
  .eco-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .eco-more-btn {
    margin-top: 16px !important;
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
  }
}

/* 4. Interactive Tabs ("Filary współpracy") */
@media (max-width: 991px) {
  .interactive-tabs-container {
    flex-direction: column !important;
    gap: 30px !important;
  }
  .interactive-tabs-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    scrollbar-width: none;
  }
  .interactive-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .tab-item {
    padding: 12px 16px !important;
    white-space: nowrap !important;
    border-left: none !important;
    border-bottom: 2px solid rgba(255,255,255,0.1) !important;
    flex-shrink: 0 !important;
  }
  .tab-item.active {
    border-left: none !important;
    border-bottom: 2px solid #fff !important;
    background: rgba(255,255,255,0.05) !important;
  }
  .tab-item::after {
    display: none !important;
  }
  .tab-pane-visual {
    max-height: 220px !important;
  }
  .tab-pane-visual svg {
    max-height: 100% !important;
    width: auto !important;
  }
}

/* 5. Process Section ("Modelowa współpraca") */
@media (max-width: 991px) {
  .process-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }
  .process-sticky-wrapper {
    height: auto !important;
  }
  .process-sticky-element {
    position: static !important;
    width: 100% !important;
  }
  .process-step {
    padding: 24px !important;
  }
  .process-step-num {
    font-size: 3rem !important;
    position: static !important;
    transform: none !important;
    margin-bottom: 16px !important;
    opacity: 0.15 !important;
  }
}

/* 6. Wiedza Section (Newsletter & Case Studies) */
@media (max-width: 991px) {
  .viz-case-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
  }
  .viz-case-content, .viz-case-visual {
    width: 100% !important;
  }
  .viz-form--inline {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .viz-input {
    width: 100% !important;
  }
  .viz-btn-submit {
    width: 100% !important;
    justify-content: center !important;
  }
  .viz-case-card {
    flex-direction: column !important;
  }
  .viz-case-img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .viz-case-text {
    padding: 20px !important;
  }
}

/* 7. Footer */
@media (max-width: 768px) {
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-watermark {
    font-size: 24vw !important;
    bottom: 10px !important;
  }
  .footer-bottom {
    overflow: hidden !important;
  }
  .page-end-band, .footer {
    overflow-x: hidden !important;
  }
}
.viz-case-text {
  min-height: 120px !important;
  justify-content: flex-start !important;
}
.viz-case-text {
  text-align: left !important;
  align-items: flex-start !important;
}

/* ============================================================ */
/* HARD RESET FOR WIEDZA CASE STUDIES (ALIGNMENT FIX)           */
/* ============================================================ */
.viz-case-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 40px !important;
  min-height: 280px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0b0f19 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.viz-case-img {
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important;
  width: 100% !important; 
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  opacity: 0.5 !important;
  border-radius: 0 !important;
  min-height: 100% !important;
}

.viz-case-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important; 
  right: 0 !important; 
  bottom: 0 !important;
  background: linear-gradient(to top, rgba(11, 15, 25, 1) 0%, rgba(11, 15, 25, 0.5) 50%, rgba(11, 15, 25, 0) 100%) !important;
  z-index: 1 !important;
}

.viz-case-card::after {
  display: none !important;
}

.viz-case-text {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100px !important;
  width: 100% !important;
}

.viz-case-title {
  color: #ffffff !important;
  font-size: 1.4rem !important;
  margin-bottom: 8px !important;
  font-weight: 700 !important;
  text-align: left !important;
  width: 100% !important;
}

.viz-case-desc {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

@media (max-width: 991px) {
  .viz-case-card {
    padding: 30px !important;
    min-height: 240px !important;
  }
}

/* ============================================================ */
/* FIX CONTACT ICONS AND CHIPS                                  */
/* ============================================================ */

/* Force flex to center the SVG inside the circle and override inline block */
.detail-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.detail-icon svg {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  display: block !important;
}

/* Arrange form chips in a neat row */
.chips-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
}
.goal-chip {
  flex: 1 1 calc(33.333% - 12px) !important; /* 3 buttons in one line */
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  white-space: nowrap !important;
}
@media (max-width: 991px) {
  .goal-chip {
    flex: 1 1 100% !important;
    white-space: normal !important;
  }
}

/* ============================================================ */
/* LIGHT MODE FOR FILARY WSPOLPRACY SECTION                     */
/* ============================================================ */
#porownanie {
  background: #ffffff !important;
}
#porownanie .section-title {
  color: #0f172a !important;
}
#porownanie .section-subtitle {
  color: #475569 !important;
}
#porownanie .tab-title {
  border: 1px solid transparent !important;
  background: transparent !important;
}
#porownanie .tab-title.active {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
}
#porownanie .tab-heading {
  color: #0f172a !important;
}
#porownanie .tab-pane-title {
  color: #0f172a !important;
}
#porownanie .tab-pane-desc {
  color: #475569 !important;
}
#porownanie .tab-title:hover .tab-heading {
  opacity: 0.6 !important;
}
#porownanie .tab-title.active .tab-heading {
  opacity: 1 !important;
}
#porownanie .viz-svg rect {
  stroke: rgba(0,0,0,0.05) !important;
}
#porownanie .tab-cta-btn {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
#porownanie .tab-cta-btn:hover {
  background: #e2e8f0 !important;
}

/* ============================================================ */
/* LIGHT MODE REFINEMENTS FOR FILARY WSPOLPRACY                 */
/* ============================================================ */
#porownanie .interactive-tabs-content {
  background: #f8fafc !important; 
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#porownanie .tab-heading {
  color: #64748b !important; 
}
#porownanie .tab-title.active .tab-heading {
  color: #0f172a !important; 
}

/* ============================================================ */
/* ENHANCED ECO-LIST CARDS (BENTO BOXES REFRESH)                */
/* ============================================================ */
.eco-list li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 32px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

.eco-list li:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.12) !important;
  background: #ffffff !important;
  color: #3b82f6 !important;
}

.eco-li-content {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
  z-index: 2 !important;
}

.eco-icon {
  width: 24px !important;
  height: 24px !important;
  color: #3b82f6 !important;
  transition: transform 0.4s ease !important;
}

.eco-list li:hover .eco-icon {
  transform: scale(1.1) !important;
}

.eco-arrow {
  width: 20px !important;
  height: 20px !important;
  color: #3b82f6 !important;
  opacity: 0 !important;
  transform: translateX(-10px) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.eco-list li:hover .eco-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ============================================================ */
/* MODERN B2B SAAS REDESIGN: "JAK WYGLADA WDROZENIE"            */
/* ============================================================ */
.wprowadzenie-grid .mtr-step {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.wprowadzenie-grid .mtr-step:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
}

/* Remove the thick flat top bar */
.wprowadzenie-grid .mtr-step::before {
  display: none !important; 
}

/* Modern Pill Tags */
.wprowadzenie-grid .mtr-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; /* solid, not dashed */
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

.wprowadzenie-grid .mtr-radio {
  display: none !important; 
}

.wprowadzenie-grid .mtr-rank,
.wprowadzenie-grid .mtr-time {
  border-radius: 99px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 8px 16px !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Typography */
.wprowadzenie-grid .mtr-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.02em !important;
}
.wprowadzenie-grid .mtr-lede {
  font-size: 0.95rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin-bottom: 32px !important;
}

/* Modernize Accordions */
.wprowadzenie-grid .mtr-toggle {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  background: #f8fafc !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* override the :last-child rule */
}
.wprowadzenie-grid .mtr-toggle:last-child {
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.wprowadzenie-grid .mtr-toggle:hover {
  border-color: rgba(59, 130, 246, 0.3) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05) !important;
}
.wprowadzenie-grid .mtr-toggle[open] {
  background: #ffffff !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.05) !important;
}
.wprowadzenie-grid .mtr-toggle summary {
  padding: 16px 20px !important;
  border-radius: 12px !important;
}
.wprowadzenie-grid .mtr-toggle__ico {
  border: 1px solid rgba(0,0,0,0.04) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  border-radius: 10px !important;
  width: 40px !important;
  height: 40px !important;
}

/* Step Colors for Tags */
/* Step 1 & 3: Blue Theme */
.wprowadzenie-grid .mtr-step--1 .mtr-rank,
.wprowadzenie-grid .mtr-step--3 .mtr-rank {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
}
.wprowadzenie-grid .mtr-step--1 .mtr-time,
.wprowadzenie-grid .mtr-step--3 .mtr-time {
  background: transparent !important;
  color: #64748b !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Step 2: Teal/Emerald Theme to break the visual */
.wprowadzenie-grid .mtr-step--2 .mtr-rank {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #10b981 !important;
}
.wprowadzenie-grid .mtr-step--2 .mtr-time {
  background: transparent !important;
  color: #64748b !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Step 2 Icons active state */
.wprowadzenie-grid .mtr-step--2 .mtr-toggle[open] .mtr-toggle__ico {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* ============================================================ */
/* MINIMALIST SLEEK REDESIGN FOR "ETAP X"                       */
/* ============================================================ */
.wprowadzenie-grid .mtr-rank {
  background: transparent !important;
  color: #3b82f6 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Adding a sleek minimalist dash before the text */
.wprowadzenie-grid .mtr-rank::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 2.5px !important;
  background: currentColor !important;
  border-radius: 2px !important;
}

/* Step 2 specific color */
.wprowadzenie-grid .mtr-step--2 .mtr-rank {
  color: #10b981 !important;
}

/* Step 3 specific color */
.wprowadzenie-grid .mtr-step--3 .mtr-rank {
  color: #3b82f6 !important;
}

/* Simplify the Time tag to be extremely subtle */
.wprowadzenie-grid .mtr-time {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: none !important;
  padding: 6px 12px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

/* ============================================================ */
/* FINAL MINIMALIST FIX: GRAY ETAP X AND HIDE TIME              */
/* ============================================================ */
.wprowadzenie-grid .mtr-rank,
.wprowadzenie-grid .mtr-step--1 .mtr-rank,
.wprowadzenie-grid .mtr-step--2 .mtr-rank,
.wprowadzenie-grid .mtr-step--3 .mtr-rank {
  color: #64748b !important; /* Neutral slate gray */
}

.wprowadzenie-grid .mtr-time,
.wprowadzenie-grid .mtr-step--1 .mtr-time,
.wprowadzenie-grid .mtr-step--2 .mtr-time,
.wprowadzenie-grid .mtr-step--3 .mtr-time {
  display: none !important;
}

/* Custom Overrides from user request */
.footer, .footer * { font-family: var(--font-prose) !important; }

/* Custom Overrides for viz-case-visual padding */
.newsletter-brutalist .viz-case-visual { padding: 0 !important; background: transparent !important; border: none !important; }

/* Mobile adjustments from user request */
@media (max-width: 991px) {
  .sec-pad-lg, .sec-pad-md, .sec-pad-sm, section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .hero-viz-dots { padding-top: 96px !important; padding-bottom: 48px !important; }
  .interactive-tabs-container .tab-pane-visual { display: none !important; }
  .interactive-tabs-list { flex-wrap: nowrap !important; overflow-x: visible !important; justify-content: space-between !important; gap: 4px !important; padding-bottom: 0 !important; }
  .tab-title { padding: 8px 4px !important; flex: 1 1 0 !important; text-align: center !important; white-space: normal !important; }
  .tab-heading { font-size: 0.75rem !important; text-align: center !important; word-break: break-word !important; hyphens: auto !important; }
}

/* GLOBAL BUTTON OVERRIDES (Requested by User) */
.btn-primary, .ss-pkg-cta, .nav-cta, .feat-modal__btn--primary {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}
.btn-primary:hover, .ss-pkg-cta:hover, .nav-cta:hover, .feat-modal__btn--primary:hover {
  background: #1e293b !important;
  border-color: #1e293b !important;
}


/* Sleek dotted grid with radial fade (perfect for data-driven vibe) */
  background-image: 
    radial-gradient(ellipse at center, transparent 0%, #f8fafc 70%),
    radial-gradient(rgba(15, 23, 42, 0.09) 1px, transparent 1px) !important;
  background-size: 100% 100%, 28px 28px !important;
  background-position: center center !important;
  opacity: 0.8 !important;
}

/* Usuwamy efekt całkowicie na mobile */
@media (max-width: 768px) {
  .methodology-bg-funnel {
    display: none !important;
  }
}


/* Remove the cheap blur */
  mix-blend-mode: multiply; /* Blend nicely with the background */
  transform: translateX(-10%) scale(1.1) !important;
}

.methodology-bg-funnel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: none !important; /* Remove the dotted grid */
}

/* Hide entirely on mobile */
@media (max-width: 768px) {
  .methodology-bg-funnel {
    display: none !important;
  }
}


/* ==========================================================================
   USER OVERRIDE: Methodology Section Background (Modern Funnel - Delikatny)
   ========================================================================== */
.methodology-bg-funnel svg {
  display: block !important;
  opacity: 0.05 !important; /* Bardzo delikatny */
  filter: none !important;
  mix-blend-mode: multiply;
  transform: translateX(-10%) scale(1.1) !important;
}

.methodology-bg-funnel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: none !important; 
}

/* Usuwamy efekt całkowicie na mobile */
@media (max-width: 768px) {
  .methodology-bg-funnel {
    display: none !important;
  }
}

/* ==========================================================================
   USER OVERRIDE: Fix mobile menu shadow leaking onto screen
   ========================================================================== */
.mobile-menu-drawer {
  box-shadow: none !important;
}
.mobile-menu-drawer.open {
  box-shadow: none !important;
}


/* ==========================================================================
   BLOG TYPOGRAPHY (.prose)
   ========================================================================== */
.prose {
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 1.1rem;
}
.prose h2 {
  color: var(--text-primary);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 2.5em;
  margin-bottom: 1em;
  letter-spacing: -0.02em;
}
.prose h3 {
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 0.8em;
}
.prose p {
  margin-bottom: 1.5em;
}
.prose ul, .prose ol {
  margin-bottom: 1.5em;
  padding-left: 1.5em;
}
.prose li {
  margin-bottom: 0.5em;
}
.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}
.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(15, 23, 42, 0.2);
  text-underline-offset: 4px;
  transition: all 0.2s;
}
.prose a:hover {
  text-decoration-color: var(--color-primary);
}
.prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: 1.5em;
  font-style: italic;
  color: var(--text-primary);
  margin: 2em 0;
  background: var(--bg-subtle);
  padding: 1.5em;
  border-radius: 0 8px 8px 0;
}

@media (min-width: 900px) { .services-grid-3-col { grid-template-columns: repeat(3, 1fr) !important; } }


/* NEW NEWSLETTER UPDATES FROM FIGMA */
.newsletter-brutalist .viz-case-content {
  justify-content: space-between !important;
}
.newsletter-brutalist .viz-case-visual {
  padding: 0 !important;
  display: flex !important;
}
.newsletter-brutalist .viz-case-stack {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
}
.newsletter-brutalist .viz-case-card {
  border-radius: 0 !important;
  border: none !important;
  min-height: 100% !important;
  height: 100% !important;
  width: 100% !important;
  flex: 1 !important;
}
.newsletter-brutalist .viz-case-img {
  object-fit: cover !important;
  object-position: left center !important;
}

.challenges .section-title { font-size: clamp(2rem, 3.5vw, 3rem) !important; }


.challenges .section-title { word-break: normal !important; hyphens: none !important; }