/* =====================================================
   Finanse Bez Owijania — Stitch Landing (ETAP 3)
   Adaptuje #view-landing do wzorca `homepage_desktop`
   z galerii Stitch. Nadpisuje wygląd istniejących klas
   landing; NIE zmienia struktury DOM ani tree SEO.
   Wszystkie sekcje indeksowane (features/FAQ+JSON-LD/
   tools/pSEO/blog) pozostają w statycznym HTML.
   Logika i dane bez zmian. Deep Terminal dark theme.
   ===================================================== */

/* === CAŁY LANDING: dark-first === */
#view-landing {
  background: var(--stitch-bg);
  color: var(--stitch-on-background);
  font-family: var(--stitch-font-body);
}
#view-landing main { min-height: 100dvh; }

/* === HEADER (TopNavBar desktop wzorzec Stitch) === */
#view-landing .landing-header {
  background: var(--stitch-surface);
  color: var(--stitch-on-surface);
  border-bottom: 1px solid var(--stitch-outline-variant);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--stitch-nav-height);
}
#view-landing .landing-header nav {
  height: var(--stitch-nav-height);
  padding: 0 var(--stitch-margin-mobile);
  gap: var(--stitch-spacing-3);
}
@media (min-width: 768px) {
  #view-landing .landing-header nav { padding: 0 var(--stitch-margin-desktop); }
  #view-landing .landing-header .container { max-width: var(--stitch-container-max); margin: 0 auto; }
}
#view-landing .landing-brand {
  color: var(--stitch-on-surface) !important;
  font-family: var(--stitch-font-display);
  font-size: var(--stitch-font-display-md);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--stitch-spacing-2);
}
#view-landing .landing-brand .brand-full { color: var(--stitch-on-surface); }
#view-landing .landing-nav-links { display: flex; align-items: center; gap: var(--stitch-spacing-2); }
#view-landing .landing-nav-link {
  color: var(--stitch-on-surface-variant);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-body-md);
  text-decoration: none;
  padding: var(--stitch-spacing-2) var(--stitch-spacing-2);
  border-radius: var(--stitch-radius-btn);
  transition: color .15s ease, background-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--stitch-spacing-1);
  background: none;
  border: none;
  cursor: pointer;
}
#view-landing .landing-nav-link:hover { color: var(--stitch-primary); background: var(--stitch-surface-bright); }
#view-landing .landing-nav-link .nav-icon { font-size: var(--stitch-font-body-md); }

/* Lang switch + login w headerze */
#view-landing .lang-selector-btn {
  background: var(--stitch-terminal-black);
  color: var(--stitch-on-surface);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-btn);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-body-md);
}
#view-landing .lang-selector-btn:hover { background: var(--stitch-surface-container-high); border-color: var(--stitch-surface-bright); }
#view-landing .lang-selector-btn:focus-visible { outline-color: var(--stitch-primary); }
#view-landing .btn-login-top,
#view-landing #btn-login-top {
  background: var(--stitch-primary-container);
  color: var(--stitch-on-primary-container);
  border: none;
  border-radius: var(--stitch-radius-btn);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* === HERO (wzorzec homepage_desktop) === */
#view-landing .hero {
  background: var(--stitch-bg);
  color: var(--stitch-on-background);
  padding: var(--stitch-spacing-6) 0 var(--stitch-spacing-5);
}
#view-landing .hero .container {
  max-width: var(--stitch-container-max);
  margin: 0 auto;
  padding: 0 var(--stitch-margin-mobile);
  text-align: left;
}
@media (min-width: 768px) {
  #view-landing .hero .container { padding: 0 var(--stitch-margin-desktop); }
}
#view-landing .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--stitch-spacing-2);
  background: var(--stitch-surface-container);
  color: var(--stitch-primary);
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-full);
  padding: var(--stitch-spacing-1) var(--stitch-spacing-3);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--stitch-spacing-4);
}
#view-landing .hero h1 {
  font-family: var(--stitch-font-display);
  font-size: var(--stitch-font-display-xl);
  line-height: var(--stitch-font-display-xl-lh);
  letter-spacing: var(--stitch-font-display-xl-ls);
  font-weight: var(--stitch-font-display-xl-w);
  color: var(--stitch-on-surface);
  max-width: 720px;
  margin: 0 0 var(--stitch-spacing-3);
}
@media (max-width: 600px) {
  #view-landing .hero h1 { font-size: clamp(2rem, 8vw, var(--stitch-font-display-xl)); }
}
#view-landing .hero-subtitle {
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-body-lg);
  line-height: var(--stitch-font-body-lg-lh);
  color: var(--stitch-on-surface-variant);
  max-width: 560px;
  margin: 0 0 var(--stitch-spacing-4);
}

/* Hero CTA row (trust + 2 przyciski) */
#view-landing .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stitch-spacing-3);
  margin-bottom: var(--stitch-spacing-3);
}
#view-landing .btn-hero {
  border: 1px solid transparent;
  border-radius: var(--stitch-radius-btn);
  box-sizing: border-box;
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0;
  padding: var(--stitch-spacing-3) var(--stitch-spacing-4);
  min-height: 48px;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stitch-spacing-2);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#view-landing .btn-hero-primary,
#view-landing a.btn-hero.btn-hero-primary {
  background: var(--stitch-primary-container);
  color: var(--stitch-on-primary-container);
}
#view-landing .btn-hero-primary:hover,
#view-landing a.btn-hero.btn-hero-primary:hover {
  background: var(--stitch-primary-fixed);
  color: var(--stitch-on-primary-fixed);
  box-shadow: var(--stitch-glow-primary);
  transform: none;
}
#view-landing .btn-hero-secondary,
#view-landing a.btn-hero.btn-hero-secondary {
  background: transparent;
  color: var(--stitch-primary);
  border: 1px solid var(--stitch-surface-light);
}
#view-landing .btn-hero-secondary:hover,
#view-landing a.btn-hero.btn-hero-secondary:hover {
  background: var(--stitch-surface-light);
  color: var(--stitch-primary-fixed);
  transform: none;
}
#view-landing a.btn-hero.btn-hero-secondary { text-decoration: none; }

/* Trust row (check_circle) */
#view-landing .hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stitch-spacing-4);
  margin-top: var(--stitch-spacing-2);
  color: var(--stitch-on-surface-variant);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-body-md);
}
#view-landing .hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--stitch-spacing-1);
  color: var(--stitch-success);
}

/* === ENTRY POINTS (3 wejścia) === */
#view-landing .entry-points {
  max-width: var(--stitch-container-max);
  margin: 0 auto var(--stitch-spacing-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stitch-spacing-3);
}
@media (min-width: 768px) {
  #view-landing .entry-points { grid-template-columns: repeat(3, 1fr); }
}
#view-landing .entry-point-card {
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  box-shadow: none;
  padding: var(--stitch-spacing-4);
  color: var(--stitch-on-surface);
}
#view-landing .entry-point-card:hover { transform: none; box-shadow: none; border-color: var(--stitch-primary); }
#view-landing .entry-point-icon { font-size: 2rem; margin-bottom: var(--stitch-spacing-2); }
#view-landing .entry-point-card h2 {
  font-family: var(--stitch-font-display);
  font-size: var(--stitch-font-display-md);
  color: var(--stitch-on-surface);
  margin: 0 0 var(--stitch-spacing-2);
}
#view-landing .entry-point-card p { color: var(--stitch-on-surface-variant); font-family: var(--stitch-font-body); }
#view-landing .entry-point-card .btn-primary,
#view-landing .entry-point-card a.btn-primary {
  background: var(--stitch-primary-container);
  color: var(--stitch-on-primary-container);
  border-radius: var(--stitch-radius-btn);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
}

/* === BENEFITS + KARTY KORZYŚCI === */
#view-landing .benefits-section {
  max-width: var(--stitch-container-max);
  margin: 0 auto var(--stitch-spacing-6);
  padding: 0 var(--stitch-margin-mobile);
}
@media (min-width: 768px) {
  #view-landing .benefits-section { padding: 0 var(--stitch-margin-desktop); }
}
#view-landing .benefits-intro h2,
#view-landing .benefit-card h3,
#view-landing .feature-card h3,
#view-landing .fhs-teaser h2,
#view-landing .seo-content-section h2,
#view-landing .expense-table-section h2,
#view-landing .features-section h2,
#view-landing .faq-section h2 {
  font-family: var(--stitch-font-display);
  color: var(--stitch-on-surface);
}
#view-landing .benefits-intro p,
#view-landing .benefit-card p,
#view-landing .feature-card p,
#view-landing .fhs-teaser-text p,
#view-landing .seo-content-section p,
#view-landing .expense-table-section td,
#view-landing .expense-table-section th,
#view-landing .faq-section summary,
#view-landing .faq-section p {
  color: var(--stitch-on-surface-variant);
  font-family: var(--stitch-font-body);
}
#view-landing .benefit-card,
#view-landing .feature-card {
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  box-shadow: none;
}
#view-landing .benefit-card:hover,
#view-landing .feature-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--stitch-primary);
}
#view-landing .benefit-card span,
#view-landing .feature-icon { font-size: 1.8rem; }

/* === FHS TEASER === */
#view-landing .fhs-teaser {
  background: var(--stitch-surface-container-lowest);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-4);
  margin-top: var(--stitch-spacing-5);
}
#view-landing .fhs-teaser .btn-primary {
  background: var(--stitch-primary-container);
  color: var(--stitch-on-primary-container);
  border: none;
  border-radius: var(--stitch-radius-btn);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#view-landing .fhs-coming-soon { color: var(--stitch-neutral-slate); font-family: var(--stitch-font-body); }

/* === SEKCJE SEO / TABELE / FAQ / TOOLS / PSEO ===
   Nadpisujemy globalny bg sekcji na dark, ale NIE ruszamy
   treści/markup — wszystko indeksowane zostaje w HTML. */
#view-landing .seo-content-section,
#view-landing .expense-table-section,
#view-landing .features-section,
#view-landing .faq-section,
#view-landing .compare-section,
#view-landing .pseo-variants-section,
#view-landing #blog-preview-section,
#view-landing .landing-budget-section {
  padding: var(--stitch-spacing-5) var(--stitch-margin-mobile);
  max-width: var(--stitch-container-max);
  margin: 0 auto;
  background: transparent;
}
@media (min-width: 768px) {
  #view-landing .seo-content-section,
  #view-landing .expense-table-section,
  #view-landing .features-section,
  #view-landing .faq-section,
  #view-landing .compare-section,
  #view-landing .pseo-variants-section,
  #view-landing #blog-preview-section,
  #view-landing .landing-budget-section {
    padding-left: var(--stitch-margin-desktop);
    padding-right: var(--stitch-margin-desktop);
  }
}
#view-landing .landing-budget-section .container {
  background: var(--stitch-surface-deep);
  border-left: 3px solid var(--stitch-primary);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-4);
}
#view-landing .landing-budget-section h2,
#view-landing .landing-budget-section h3 {
  font-family: var(--stitch-font-display);
  color: var(--stitch-on-surface) !important;
}
#view-landing .landing-budget-section .budget-calc-form,
#view-landing .landing-budget-section .budget-calc-results {
  background: var(--stitch-surface-container);
  border-radius: var(--stitch-radius-card);
  box-shadow: none;
}
#view-landing .budget-calc-form h3 { color: var(--stitch-on-surface) !important; }
#view-landing .budget-calc-form label,
#view-landing .budget-calc-results * { color: var(--stitch-on-surface-variant) !important; }
#view-landing .budget-calc-form input {
  background: var(--stitch-terminal-black) !important;
  color: var(--stitch-on-surface) !important;
  border-color: var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-btn);
}
#view-landing .budget-calc-form input:focus {
  border-color: var(--stitch-primary) !important;
  box-shadow: 0 0 0 1px var(--stitch-primary-container) !important;
}

/* Tabele (expense share) */
#view-landing .expense-table-section table,
#view-landing .expense-table-section th,
#view-landing .expense-table-section td {
  border-color: var(--stitch-outline-variant);
  color: var(--stitch-on-surface-variant);
  font-family: var(--stitch-font-body);
}
#view-landing .expense-table-section th {
  color: var(--stitch-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--stitch-font-label-caps);
}

/* FAQ accordion */
#view-landing .faq-section details {
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-3);
  margin-bottom: var(--stitch-spacing-2);
}
#view-landing .faq-section summary {
  font-family: var(--stitch-font-display);
  color: var(--stitch-on-surface);
  cursor: pointer;
}
#view-landing .faq-toggle,
#view-landing .faq-item-header {
  border-left-color: var(--stitch-primary) !important;
  color: var(--stitch-on-surface) !important;
}
#view-landing .faq-toggle-icon,
#view-landing .faq-item-toggle {
  color: var(--stitch-primary) !important;
}

/* TOOLS GRID */
#view-landing #polecane-kalkulatory,
#view-landing .tools-section {
  padding: var(--stitch-spacing-4) var(--stitch-margin-mobile);
  max-width: var(--stitch-container-max);
  margin: 0 auto;
}
#view-landing .tool-card {
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  box-shadow: none;
  color: var(--stitch-on-surface);
}
#view-landing .tool-card:hover { box-shadow: none; border-color: var(--stitch-primary); transform: none; }

/* Blog preview */
#view-landing #blog-preview-section .blog-card,
#view-landing #blog-preview-section article {
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  box-shadow: none;
  color: var(--stitch-on-surface);
}
#view-landing #blog-preview-section h2,
#view-landing #blog-preview-section .blog-card h3,
#view-landing #blog-preview-section article h3 {
  font-family: var(--stitch-font-display);
  color: var(--stitch-on-surface);
}

/* === FOOTER === */
#view-landing .landing-footer {
  background: var(--stitch-surface-container-lowest);
  color: var(--stitch-on-surface-variant);
  border-top: 1px solid var(--stitch-outline-variant);
  padding: var(--stitch-spacing-5) var(--stitch-margin-mobile);
  margin-top: var(--stitch-spacing-6);
}
#view-landing .landing-footer a { color: var(--stitch-on-surface-variant); }
#view-landing .landing-footer a:hover { color: var(--stitch-primary); }
#view-landing .landing-footer .app-version { color: var(--stitch-neutral-slate) !important; }

/* === AUTH SECTION (email) — dark === */
#view-landing #email-auth-section {
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-4);
  max-width: 480px;
  margin: 0 auto var(--stitch-spacing-5);
}
#view-landing #email-auth-section h2,
#view-landing #email-auth-section h3 {
  font-family: var(--stitch-font-display);
  color: var(--stitch-on-surface);
}
#view-landing #email-auth-section input,
#view-landing #email-auth-section select {
  background: var(--stitch-terminal-black) !important;
  color: var(--stitch-on-surface) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-btn);
}
#view-landing #email-auth-section .btn-primary {
  background: var(--stitch-primary-container) !important;
  color: var(--stitch-on-primary-container) !important;
  border: none;
  border-radius: var(--stitch-radius-btn);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* === LOGIN/REGISTER TABY === */
#view-landing .auth-tabs button,
#view-landing #tab-login,
#view-landing #tab-register {
  background: var(--stitch-surface-container);
  color: var(--stitch-on-surface-variant);
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-btn);
  font-family: var(--stitch-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
}
#view-landing .auth-tabs button.active,
#view-landing .auth-tabs button[aria-selected="true"] {
  background: var(--stitch-primary-container);
  color: var(--stitch-on-primary-container);
  border-color: var(--stitch-primary-container);
}

/* === JAWNE BIAŁE / JASNE SEKCJE → wymuszenie dark ===
   Nadpisujemy elementy, które w app.css mają sztywno #fff/#fff8e1
   zamiast var(--bg-card), żeby nie zostawały białe na ciemnym tle. */
#view-landing .feature-card,
#view-landing .entry-point-card,
#view-landing .compare-table,
#view-landing .landing-blog-card,
#view-landing .guest-banner,
#view-landing .rodo-banner,
#view-landing .tool-card,
#view-landing .post-card,
#view-landing .article-card,
#view-landing .seo-card,
#view-landing .settings-rodo,
#view-landing .btn-google,
#view-landing .btn-hero-primary,
#view-landing #btn-login-top,
#view-landing .btn-icon-google {
  background: var(--stitch-surface-deep) !important;
  color: var(--stitch-on-surface) !important;
  border-color: var(--stitch-surface-light) !important;
  box-shadow: none !important;
}
#view-landing .guest-banner,
#view-landing .rodo-banner {
  background: var(--stitch-surface-container) !important;
  border-color: var(--stitch-primary) !important;
}
#rodo-consent-banner a {
  color: var(--stitch-primary) !important;
}
#view-landing .btn-google,
#view-landing .btn-icon-google {
  background: transparent !important;
  border: 1px solid var(--stitch-surface-light) !important;
  color: var(--stitch-on-surface-variant) !important;
}
#view-landing .tool-card a,
#view-landing .post-card a,
#view-landing .article-card a,
#view-landing .landing-blog-card a { color: var(--stitch-primary) !important; }
#view-landing .compare-table th,
#view-landing .compare-table td {
  background: var(--stitch-surface-container) !important;
  color: var(--stitch-on-surface-variant) !important;
  border-color: var(--stitch-outline-variant) !important;
}
#view-landing .compare-table th {
  color: var(--stitch-primary) !important;
  background: var(--stitch-surface-container-high) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--stitch-font-label-caps);
}
#view-landing .seo-content-section ul {
  display: grid;
  gap: var(--stitch-spacing-2);
  margin: var(--stitch-spacing-3) 0 var(--stitch-spacing-4);
  padding: 0;
  list-style: none;
}
#view-landing .seo-content-section li {
  position: relative;
  margin: 0;
  padding: var(--stitch-spacing-2) var(--stitch-spacing-3) var(--stitch-spacing-2) 36px;
  background: var(--stitch-surface-container-low) !important;
  border: 1px solid var(--stitch-outline-variant);
  border-left: 3px solid var(--stitch-primary);
  border-radius: var(--stitch-radius-btn);
  color: var(--stitch-on-surface) !important;
  font-family: var(--stitch-font-body);
  font-weight: 600;
  line-height: 1.55;
}
#view-landing .seo-content-section li::before {
  content: "check_circle";
  position: absolute;
  left: var(--stitch-spacing-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--stitch-primary);
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  font-variation-settings: "FILL" 1, "wght" 700;
  line-height: 1;
}
#view-landing .btn-hero-primary,
#view-landing a.btn-hero.btn-hero-primary {
  background: var(--stitch-primary-container) !important;
  color: var(--stitch-on-primary-container) !important;
  border: 1px solid var(--stitch-primary-container) !important;
}
#view-landing .btn-hero-primary:hover,
#view-landing a.btn-hero.btn-hero-primary:hover {
  background: var(--stitch-primary-fixed) !important;
  color: var(--stitch-on-primary-fixed) !important;
}

/* === DOBRANIE POZOSTAŁYCH BIAŁYCH OBSZARÓW NA STRONIE GŁÓWNEJ ===
   Elementy z sztywnym white/#fff/#f5f5f5/#ebf4ff są tu nadpisywane na
   ciemne tła Stitch. Nie ruszamy treści, tylko tła. */
/* Karty wyzwania (challenge) */
#view-landing .chf-card {
  background: var(--stitch-surface-deep) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  box-shadow: none !important;
  color: var(--stitch-on-surface) !important;
  text-decoration: none !important;
}
#view-landing .chf-card:hover,
#view-landing .chf-card:focus-visible {
  background: var(--stitch-surface-container-low) !important;
  border-color: var(--stitch-primary) !important;
  color: var(--stitch-on-surface) !important;
  text-decoration: none !important;
  transform: none !important;
}
#view-landing .chf-card:hover *,
#view-landing .chf-card:focus-visible * {
  text-decoration: none !important;
}
#view-landing .chf-play {
  color: var(--stitch-primary) !important;
}
#view-landing .chf-section .section-action .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--stitch-spacing-3) var(--stitch-spacing-4);
  background: var(--stitch-primary-container) !important;
  color: var(--stitch-on-primary-container) !important;
  border: 1px solid var(--stitch-primary-container) !important;
  border-radius: var(--stitch-radius-btn);
  box-shadow: none !important;
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  text-transform: uppercase;
}
#view-landing .chf-section .section-action .btn-primary:hover,
#view-landing .chf-section .section-action .btn-primary:focus-visible {
  background: var(--stitch-primary-fixed) !important;
  color: var(--stitch-on-primary-fixed) !important;
  border-color: var(--stitch-primary-fixed) !important;
  text-decoration: none !important;
  transform: none !important;
}
/* Kalkulator budżetu — przycisk reset + kontener wykresu */
#view-landing button.calc-btn-reset {
  background: var(--stitch-surface-container) !important;
  color: var(--stitch-on-surface-variant) !important;
  border: 1px solid var(--stitch-surface-light) !important;
}
#view-landing .calc-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--stitch-spacing-3) var(--stitch-spacing-4);
  background: var(--stitch-primary-container) !important;
  color: var(--stitch-on-primary-container) !important;
  border: 1px solid var(--stitch-primary-container) !important;
  border-radius: var(--stitch-radius-btn);
  box-shadow: none !important;
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#view-landing .calc-cta-button:hover,
#view-landing .calc-cta-button:focus-visible {
  background: var(--stitch-primary-fixed) !important;
  color: var(--stitch-on-primary-fixed) !important;
  border-color: var(--stitch-primary-fixed) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
}
#view-landing div.budget-chart-container {
  background: var(--stitch-surface-deep) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-card) !important;
}
/* Sekcje statyczne z białym tłem (seo, tabela, faq, pseo) —
   zawężone do konkretnych sekcji, nie wszystkie .container */
#view-landing .seo-content-section .container,
#view-landing .expense-table-section .container,
#view-landing .faq-section .container,
#view-landing .pseo-variants-section .container {
  background: var(--stitch-surface-deep) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-card) !important;
  box-shadow: none !important;
}
/* Tabela wydatków */
#view-landing table.expense-table {
  background: var(--stitch-surface-container) !important;
  color: var(--stitch-on-surface-variant) !important;
  border-color: var(--stitch-outline-variant) !important;
}
#view-landing table.expense-table th {
  background: var(--stitch-surface-container-high) !important;
  color: var(--stitch-primary) !important;
}
#view-landing table.expense-table td {
  background: var(--stitch-surface-container) !important;
  color: var(--stitch-on-surface-variant) !important;
  border-color: var(--stitch-outline-variant) !important;
}
/* FAQ akordeon */
#view-landing div.faq-item {
  background: var(--stitch-surface-deep) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-card) !important;
  color: var(--stitch-on-surface) !important;
}
#view-landing button.faq-toggle {
  background: transparent !important;
  color: var(--stitch-on-surface) !important;
  border: none !important;
}
/* Sekcja polecanych narzędzi */
#view-landing section.featured-tools-section {
  background: var(--stitch-surface-container-low) !important;
  border-top: 1px solid var(--stitch-outline-variant) !important;
  border-bottom: 1px solid var(--stitch-outline-variant) !important;
}
/* Karty pSEO */
#view-landing a.pseo-variant-card {
  background: var(--stitch-surface-deep) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-card) !important;
  box-shadow: none !important;
  color: var(--stitch-on-surface) !important;
}
#view-landing a.pseo-variant-card:hover { border-color: var(--stitch-primary) !important; }
/* Ikony bloga (lbc-icon) */
#view-landing div.lbc-icon {
  background: var(--stitch-surface-container) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  color: var(--stitch-primary) !important;
}

/* Kafle kalkulatorów (Kupić/wynająć, Ile płacę za prąd) */
#view-landing section.container > div > a > div {
  background: var(--stitch-surface-deep) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-card) !important;
  color: var(--stitch-on-surface) !important;
}
#view-landing section.container > div > a:hover > div {
  border-color: var(--stitch-primary) !important;
}
/* Baner instalacji Chrome Web Store */
#view-landing div.container > div > div > a {
  background: var(--stitch-surface-container) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-btn) !important;
  color: var(--stitch-on-surface) !important;
}
#view-landing div.container > div > div > a:hover {
  border-color: var(--stitch-primary) !important;
  background: var(--stitch-surface-container-high) !important;
}

/* Wspólny podtytuł sekcji */
#view-landing .section-subtitle {
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-body-lg);
  color: var(--stitch-on-surface-variant);
  margin: 0 auto var(--stitch-spacing-4);
  max-width: 560px;
  text-align: center;
}

/* === JAK TO DZIAŁA (3 kroki) === */
#view-landing .how-it-works-section {
  padding: var(--stitch-spacing-5) var(--stitch-margin-mobile);
}
@media (min-width: 768px) {
  #view-landing .how-it-works-section { padding-left: var(--stitch-margin-desktop); padding-right: var(--stitch-margin-desktop); }
}
#view-landing .how-it-works-section .section-title {
  font-family: var(--stitch-font-display);
  color: var(--stitch-on-surface);
  text-align: center;
  font-size: var(--stitch-font-display-lg);
  margin: 0 0 var(--stitch-spacing-4);
}
#view-landing .how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stitch-spacing-3);
}
@media (min-width: 768px) {
  #view-landing .how-grid { grid-template-columns: repeat(3, 1fr); }
}
#view-landing .how-card {
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--stitch-spacing-2);
}
#view-landing .how-step {
  width: 34px; height: 34px;
  border-radius: var(--stitch-radius-full);
  background: var(--stitch-primary-container);
  color: var(--stitch-on-primary-container);
  font-family: var(--stitch-font-display);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#view-landing .how-card h3 {
  font-family: var(--stitch-font-display);
  font-size: var(--stitch-font-display-md);
  color: var(--stitch-on-surface);
  margin: 0;
}
#view-landing .how-card p {
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-body-md);
  color: var(--stitch-on-surface-variant);
  margin: 0;
}

/* === RESPONSYWNOŚĆ MOBILE === */
@media (max-width: 768px) {
  #view-landing .landing-nav-links { gap: var(--stitch-spacing-1); }
  #view-landing .landing-nav-link .nav-text { display: none; }
  #view-landing .hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  #view-landing .btn-hero { width: 100%; justify-content: center; }
  #view-landing .hero-cta-row { flex-direction: column; align-items: stretch; }
}

/* === ETAP 10 POLISH: bliżej wzorców Stitch === */
#view-landing .landing-header {
  backdrop-filter: blur(12px);
  background: rgba(16, 21, 15, 0.96);
}
#view-landing .landing-header nav {
  min-height: var(--stitch-nav-height);
}
#view-landing .landing-brand {
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
#view-landing .landing-nav-link {
  min-height: 40px;
  border: 1px solid transparent;
  font-size: 13px;
  letter-spacing: 0;
}
#view-landing .landing-nav-link:hover,
#view-landing .landing-nav-link:focus-visible {
  border-color: var(--stitch-outline-variant);
  background: var(--stitch-surface-container);
}
#view-landing .landing-nav-link .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}
#view-landing .hero {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
#view-landing .hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stitch-spacing-5);
  align-items: center;
}
@media (min-width: 980px) {
  #view-landing .hero-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  }
}
#view-landing .hero-copy {
  min-width: 0;
}
#view-landing .hero-badge {
  border-radius: var(--stitch-radius-btn);
}
#view-landing .hero-badge .material-symbols-outlined {
  font-size: 16px;
}
#view-landing .hero h1 {
  letter-spacing: 0;
  max-width: 680px;
  text-wrap: balance;
}
#view-landing .hero-subtitle {
  color: #d1dacb;
}
#view-landing .hero-finance-panel {
  background: linear-gradient(180deg, rgba(17, 20, 24, 0.98), rgba(10, 12, 16, 0.98));
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-4);
  color: var(--stitch-on-surface);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--stitch-spacing-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
#view-landing .hero-panel-top,
#view-landing .hero-panel-grid > div > span,
#view-landing table th,
#view-landing .compare-table th {
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#view-landing .hero-panel-top {
  display: flex;
  justify-content: space-between;
  gap: var(--stitch-spacing-3);
  color: var(--stitch-on-surface-variant);
}
#view-landing .hero-panel-top strong {
  display: inline-flex;
  align-items: center;
  gap: var(--stitch-spacing-1);
  color: var(--stitch-success);
  background: var(--stitch-surface-container);
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-btn);
  padding: var(--stitch-spacing-2) var(--stitch-spacing-3);
}
#view-landing .hero-score {
  display: flex;
  align-items: baseline;
  gap: var(--stitch-spacing-3);
  border-bottom: 1px solid var(--stitch-outline-variant);
  padding-bottom: var(--stitch-spacing-4);
}
#view-landing .hero-score span {
  font-family: var(--stitch-font-body);
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  font-weight: 700;
  color: var(--stitch-primary);
}
#view-landing .hero-score small {
  font-family: var(--stitch-font-body);
  font-size: 28px;
  color: var(--stitch-on-surface-variant);
}
#view-landing .hero-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stitch-spacing-3);
}
@media (min-width: 560px) {
  #view-landing .hero-panel-grid { grid-template-columns: 1fr 1fr; }
}
#view-landing .hero-panel-grid > div {
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-btn);
  background: var(--stitch-terminal-black);
  padding: var(--stitch-spacing-3);
}
#view-landing .hero-panel-grid strong {
  display: block;
  margin-top: var(--stitch-spacing-2);
  font-family: var(--stitch-font-body);
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}
#view-landing .hero-panel-grid small {
  display: block;
  margin-top: var(--stitch-spacing-2);
  font-family: var(--stitch-font-body);
  font-size: 14px;
}
#view-landing .is-success { color: var(--stitch-success); }
#view-landing .is-danger { color: var(--stitch-danger); }
#view-landing .hero-bars {
  flex: 1;
  min-height: 128px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: var(--stitch-spacing-4);
  border-bottom: 1px solid var(--stitch-outline-variant);
  background:
    linear-gradient(to top, transparent 32%, rgba(64,73,61,0.35) 33%, transparent 34%),
    linear-gradient(to top, transparent 66%, rgba(64,73,61,0.35) 67%, transparent 68%);
  padding: 0 var(--stitch-spacing-2);
}
#view-landing .hero-bars span {
  display: block;
  min-height: 24px;
  background: var(--stitch-surface-container-highest);
}
#view-landing .hero-bars span.active {
  background: var(--stitch-primary-container);
}
#view-landing .entry-points {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
#view-landing .entry-point-icon,
#view-landing .feature-icon,
#view-landing .variant-icon,
#view-landing .tool-card-icon,
#view-landing .mini-tool-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--stitch-surface-container);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-btn);
  color: var(--stitch-primary);
  font-size: 24px !important;
  line-height: 1;
}
#view-landing .features-grid,
#view-landing .pseo-variants-grid,
#view-landing .blog-preview-grid {
  gap: var(--stitch-spacing-3);
}
#view-landing .feature-card,
#view-landing a.pseo-variant-card,
#view-landing .landing-blog-card {
  min-height: 100%;
}
#view-landing .feature-card h3,
#view-landing a.pseo-variant-card h3,
#view-landing .landing-blog-card h3 {
  letter-spacing: 0;
}
#view-landing .mini-tools-section {
  padding: var(--stitch-spacing-5) var(--stitch-margin-mobile);
}
#view-landing .mini-tools-section > h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--stitch-spacing-2);
  margin: 0 0 var(--stitch-spacing-2);
  color: var(--stitch-on-surface);
  font-family: var(--stitch-font-display);
  font-size: var(--stitch-font-display-md);
  letter-spacing: 0;
}
#view-landing .mini-tools-section > p {
  margin: 0 0 var(--stitch-spacing-4);
  text-align: center;
  color: var(--stitch-on-surface-variant);
  font-family: var(--stitch-font-body);
}
#view-landing .mini-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--stitch-spacing-3);
}
#view-landing .mini-tool-card {
  text-decoration: none;
  color: inherit;
}
#view-landing .mini-tool-card > div {
  min-height: 100%;
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-4);
  transition: border-color .15s ease, background-color .15s ease;
}
#view-landing .mini-tool-card:hover > div {
  border-color: var(--stitch-primary);
  background: var(--stitch-surface-container-low);
}
#view-landing .mini-tool-card h3 {
  margin: var(--stitch-spacing-3) 0 var(--stitch-spacing-2);
  color: var(--stitch-on-surface);
  font-family: var(--stitch-font-display);
  font-size: var(--stitch-font-display-md);
  letter-spacing: 0;
}
#view-landing .mini-tool-card p {
  margin: 0 0 var(--stitch-spacing-4);
  color: var(--stitch-on-surface-variant);
  font-family: var(--stitch-font-body);
  line-height: 1.55;
}
#view-landing .mini-tool-cta {
  color: var(--stitch-primary);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#view-landing .access-channels-section {
  padding: var(--stitch-spacing-4) var(--stitch-margin-mobile);
  margin: var(--stitch-spacing-4) auto;
  max-width: var(--stitch-container-max);
}
#view-landing .access-channels-card {
  display: flex;
  align-items: center;
  gap: var(--stitch-spacing-4);
  background: var(--stitch-surface-container-low);
  border: 1px solid var(--stitch-surface-light);
  border-left: 3px solid var(--stitch-primary);
  border-radius: var(--stitch-radius-card);
  padding: var(--stitch-spacing-4);
}
#view-landing .access-channels-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--stitch-surface-deep);
  border: 1px solid var(--stitch-surface-light);
  border-radius: var(--stitch-radius-btn);
  color: var(--stitch-primary);
  flex: none;
}
#view-landing .access-channels-card h3 {
  margin: 0 0 var(--stitch-spacing-2);
  color: var(--stitch-on-surface);
  font-family: var(--stitch-font-display);
  font-size: var(--stitch-font-display-md);
  letter-spacing: 0;
}
#view-landing .access-channels-card p {
  margin: 0 0 var(--stitch-spacing-3);
  color: var(--stitch-on-surface-variant);
  font-family: var(--stitch-font-body);
  line-height: 1.55;
}
#view-landing .access-channels-card a {
  display: inline-flex;
  align-items: center;
  gap: var(--stitch-spacing-2);
  background: var(--stitch-surface-deep) !important;
  color: var(--stitch-primary) !important;
  border: 1px solid var(--stitch-surface-light) !important;
  border-radius: var(--stitch-radius-btn) !important;
  padding: var(--stitch-spacing-2) var(--stitch-spacing-3);
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
#view-landing .expense-table-section .container,
#view-landing .compare-table-wrap {
  overflow-x: auto;
}
#view-landing table.expense-table,
#view-landing .compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--stitch-outline-variant) !important;
  border-radius: var(--stitch-radius-card);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
#view-landing table.expense-table th,
#view-landing table.expense-table td,
#view-landing .compare-table th,
#view-landing .compare-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--stitch-outline-variant) !important;
  font-size: 14px;
  line-height: 1.45;
}
#view-landing table.expense-table td:last-child,
#view-landing .compare-table td:not(:first-child) {
  color: var(--stitch-on-surface) !important;
  font-weight: 700;
  text-align: right;
}
#view-landing .tools-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--stitch-spacing-1);
  border-width: 1px;
  border-radius: var(--stitch-radius-btn);
}
#view-landing .featured-tools-grid .tool-card {
  align-items: flex-start;
  text-align: left;
  min-height: 132px;
  padding: var(--stitch-spacing-4);
}
#view-landing .featured-tools-grid .tool-card-title {
  color: var(--stitch-on-surface) !important;
  font-family: var(--stitch-font-display);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  #view-landing .hero-finance-panel {
    min-height: auto;
  }
  #view-landing .access-channels-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ETAP 10b — landing: przezroczysty glob języka i mocniejsze piktogramy */
#view-landing .lang-selector-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#view-landing .lang-selector-btn:hover,
#view-landing .lang-selector-btn:focus-visible {
  background: rgba(136, 217, 130, 0.08) !important;
  border-color: var(--stitch-outline-variant) !important;
}

#view-landing .lang-selector-btn[aria-expanded="true"] {
  background: #16201a !important;
  border-color: #2e7d32 !important;
}

#view-landing .entry-point-icon,
#view-landing .feature-icon,
#view-landing .variant-icon,
#view-landing .tool-card-icon,
#view-landing .mini-tool-icon,
#view-landing .benefit-card > .material-symbols-outlined,
#view-landing .access-channels-icon {
  width: 50px !important;
  height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: var(--stitch-spacing-2);
  background: #16201a !important;
  border: 1px solid #2e7d32 !important;
  border-bottom-color: #88d982 !important;
  border-radius: 8px !important;
  color: #88d982 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  font-family: "Material Symbols Outlined" !important;
  font-size: 28px !important;
  font-variation-settings: "FILL" 1, "wght" 560, "GRAD" 0, "opsz" 28 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#view-landing .entry-point-card:nth-child(2n) .entry-point-icon,
#view-landing .feature-card:nth-child(3n + 2) .feature-icon,
#view-landing .pseo-variant-card:nth-child(3n + 2) .variant-icon,
#view-landing .featured-tools-grid .tool-card:nth-child(3n + 2) .tool-card-icon {
  background: #101d2e !important;
  border-color: #005db7 !important;
  border-bottom-color: #a9c7ff !important;
  color: #a9c7ff !important;
}

#view-landing .entry-point-card:nth-child(3n) .entry-point-icon,
#view-landing .feature-card:nth-child(3n) .feature-icon,
#view-landing .pseo-variant-card:nth-child(3n) .variant-icon,
#view-landing .featured-tools-grid .tool-card:nth-child(3n) .tool-card-icon {
  background: #251722 !important;
  border-color: #8e3a58 !important;
  border-bottom-color: #ffb1c7 !important;
  color: #ffb1c7 !important;
}

#view-landing .landing-nav-link .material-symbols-outlined {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  color: currentColor !important;
  box-shadow: none !important;
  font-size: 20px !important;
}

#view-landing .blog-preview-all {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stitch-spacing-2);
  padding: 0 var(--stitch-spacing-3);
  background: var(--stitch-surface-deep) !important;
  color: var(--stitch-primary) !important;
  border: 1px solid var(--stitch-outline-variant) !important;
  border-radius: var(--stitch-radius-btn);
  box-shadow: none !important;
  font-family: var(--stitch-font-body);
  font-size: var(--stitch-font-label-caps);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 0 !important;
}

#view-landing .blog-preview-all:hover,
#view-landing .blog-preview-all:focus-visible {
  background: var(--stitch-surface-container) !important;
  border-color: var(--stitch-primary-container) !important;
  color: var(--stitch-primary-fixed) !important;
  outline: none;
  text-decoration: none !important;
}

#view-landing .blog-preview-all .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 720px) {
  #view-landing .blog-preview-header {
    align-items: flex-start;
  }

  #view-landing .blog-preview-all {
    width: 100%;
  }
}