/* Fonts loaded via functions.php preload — @import removed to eliminate render-blocking cascade */

/* =========================================================
   THECREATOOLS — FRONT-PAGE.CSS  v15.1 (Brand-Book Strict)
   Scope: .tc-front (Homepage)

   Tokeny z brand booka:
   --tc-radius-sm: 6px  --tc-radius-md: 14px
   --tc-radius-lg: 18px  --tc-radius-xl: 24px  --tc-radius-pill: 999px
   --tc-shadow-card:  0 4px 12px rgba(28,26,23,0.06)
   --tc-shadow-hover: 0 15px 40px rgba(28,26,23,0.12)
   --tc-shadow-soft:  0 10px 30px rgba(28,26,23,0.08)
   --tc-shadow-focus: 0 0 0 3px rgba(28,26,23,0.25)
   --tr-fast: 0.15s ease  --tr-normal: 0.25s cubic-bezier(0.4,0,0.2,1)
   ========================================================= */

/* =========================================================
   1. LOCAL FONTS
   ========================================================= */

/* =========================================================
   2. DESIGN TOKENS — zgodne z brand bookiem §1–§4
   ========================================================= */

:root {
  /* ── Brand Tokens (canonical) — synced with style.css ── */
  --y:       #F1E52D;
  --y-dark:  #C8BF00;
  --y-deep:  #6B6400;
  --y-lo:    rgba(241,229,45,.12);
  --y-bdr:   rgba(241,229,45,.22);
  --li:      #EDC1F2;
  --li-sat:  #9B4DAB;
  --li-lo:   rgba(155,77,171,.10);
  --li-bdr:  rgba(155,77,171,.25);
  --ink:     #1C1A17;
  --green:   #276641;
  --red:     #8B2020;
  --bg-page: #EDE5D6;
  --bg-card: #FAF6EF;
  --bg-ink:  #1C1A17;
  --bdr:     #C8BAA5;
  --bdr-sub: #DDD3C3;
  --t:       #1C1A17;
  --tm:      #4A4435;
  --tf:      #6B6154;
  --f-d: "Fraunces", Georgia, serif;
  --f-b: "Outfit", system-ui, sans-serif;
  --f-m: "JetBrains Mono", monospace;
  --green-dark: #034f46;
  --green-lo:  rgba(39,102,65,.11);
  --green-bdr: rgba(39,102,65,.22);

  /* ── Dark-bg text & borders — WCAG verified ── */
  --dt:        #F3EDE2;
  --dtm:       rgba(243,237,226,.72);
  --dtf:       rgba(243,237,226,.55);
  --bg-white:  #FFFFFF;
  --bg-deep:   #E0D5C2;
  --dbdr:      rgba(255,255,255,.10);
  --dbdr-sub:  rgba(255,255,255,.06);
  --sh-xs:     0 1px 4px rgba(0,0,0,.18);
  --sh-sm:     0 3px 12px rgba(0,0,0,.22);
  --sh-md:     0 8px 28px rgba(0,0,0,.28);
  --ease:      .2s cubic-bezier(.4,0,.2,1);
  --ease-f:    .13s ease;
  --dg:        #024139;

  /* ── Legacy aliases ── */
  --tc-blue:           var(--ink);
  --tc-blue-dark:      #0e0d0b;
  --tc-blue-light:     var(--y-lo);
  --tc-blue-text:      var(--y-deep);
  --tc-amber:          var(--y);
  --tc-amber-light:    var(--y-lo);
  --tc-deal-green:     var(--green);
  --tc-deal-green-hov: #1e5232;
  --tc-green-light:    var(--green-lo);
  --tc-white:          var(--bg-card);
  --tc-bg-light:       #F3EDE2;
  --tc-bg-mid:         #E0D5C2;
  --tc-bg-softer:      var(--bg-page);
  --tc-bg-dark:        var(--bg-ink);
  --tc-grey-light:     var(--bdr);
  --tc-text:           var(--t);
  --tc-text-muted:     var(--tm);
  --tc-text-faint:     var(--tf);
  --tc-muted:          rgba(28,26,23, 0.72);

  --font-primary:  var(--f-b);
  --font-heading:  var(--f-d);
  --font-mono:     var(--f-m);
  --tc-h1:         clamp(2.2rem, 4vw, 2.8rem);

  --tc-container:      1140px;
  --tc-container-wide: 1320px;

  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 8px; --r-pill: 999px;
  --tc-radius-sm:   var(--r-sm);
  --tc-radius-md:   var(--r-md);
  --tc-radius-lg:   var(--r-lg);
  --tc-radius-xl:   var(--r-xl);
  --tc-radius-pill: var(--r-pill);

  --tc-shadow-soft:  0 10px 30px rgba(28,26,23, 0.08);
  --tc-shadow-card:  0 3px 12px rgba(28,26,23, 0.09);
  --tc-shadow-hover: 0 15px 40px rgba(28,26,23, 0.12);
  --tc-shadow-focus: 0 0 0 3px rgba(28,26,23, 0.25);

  --tr-fast:   0.15s ease;
  --tr-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow:   0.4s ease;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
}

/* =========================================================
   3. BASE / SCOPE
   ========================================================= */

.tc-front {
  font-family: var(--font-primary);
  color: var(--dt);
  line-height: 1.65;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.tc-front h1,
.tc-front h2,
.tc-front h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: var(--dt);
}

.tc-front a { text-decoration: none; color: inherit; transition: var(--tr-fast); }
.tc-front a:hover { text-decoration: underline; }
.tc-front *, .tc-front *::before, .tc-front *::after { box-sizing: border-box; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* =========================================================
   4. LAYOUT HELPERS
   ========================================================= */

.tc-container {
  width: 100%; max-width: var(--tc-container);
  margin-inline: auto; padding-inline: var(--sp-6); box-sizing: border-box;
}
.tc-container-wide {
  width: 100%; max-width: var(--tc-container-wide);
  margin-inline: auto; padding-inline: var(--sp-6); box-sizing: border-box;
}
.tc-wrap {
  width: 100%; max-width: var(--tc-container);
  margin-inline: auto; padding-inline: var(--sp-6);
}
.tc-section { padding-block: var(--sp-20); color: var(--dt); }

/* Below-fold sections: skip rendering until near-viewport (improves LCP) */
.tc-front section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* =========================================================
   5. BUTTONS — brand book §5
   Pill shape (999px). Hover +2px. Primary = solid blue, no gradients.
   ========================================================= */

.tc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: 0.72rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--f-b); font-weight: 700; font-size: 0.84rem;
  border: 1px solid transparent; cursor: pointer; line-height: 1;
  text-decoration: none !important; white-space: nowrap;
  transition: transform var(--tr-normal), opacity var(--tr-normal), box-shadow var(--tr-normal);
}
.tc-btn:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }

/* Primary — solid lilac, opacity na hover */
.tc-btn--primary {
  background: #9b4dab; border-color: var(--dbdr); color: var(--y) !important;
  position: relative; overflow: hidden;
}
/* Shimmer removed — brandbook: ZERO gradients */
.tc-btn--primary::before { content: none; }
.tc-btn--primary:hover {
  opacity: 0.88; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28,26,23, 0.40);
  text-decoration: none !important; color: var(--y) !important;
}

/* Secondary — na ciemnym hero/CTA tle */
.tc-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important; border-color: rgba(255, 255, 255, 0.22);
}
.tc-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.40);
  transform: translateY(-2px); text-decoration: none !important;
}

/* Deal — green, wyłącznie dla ofert/cen */
.tc-btn--deal {
  background: var(--tc-deal-green); border-color: var(--tc-deal-green);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(39,102,65, 0.28);
  position: relative; overflow: hidden;
}
/* Shimmer removed — brandbook: ZERO gradients */
.tc-btn--deal::before { content: none; }
.tc-btn--deal:hover {
  opacity: 0.88; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(39,102,65, 0.35);
}

/* Inline hero text link */
.tc-hero-link {
  color: rgba(255,255,255,0.50) !important;
  font-weight: 600; font-size: 0.85rem;
  transition: color var(--tr-fast); text-decoration: none;
}
.tc-hero-link:hover { color: var(--y) !important; text-decoration: none !important; }

/* "Try it:" chips row */
.tc-hero-chips {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.5rem;
}
.tc-try-label {
  color: var(--y);
  font-family: var(--f-m);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 4px;
}
.tc-hero-chips__sep {
  color: var(--dtf);
  margin-inline: 4px;
}

/* Pill suggestion links w hero */
.tc-pill-link {
  display: inline-flex; align-items: center;
  background: transparent !important;
  color: var(--li) !important;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-family: var(--f-m);
  font-size: 0.78rem; font-weight: 500;
  text-decoration: none !important;
  border: 1px solid var(--li-bdr);
  transition: transform var(--tr-normal), opacity var(--tr-normal), box-shadow var(--tr-normal);
}
.tc-pill-link:hover {
  opacity: 0.85; transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.20);
  text-decoration: none !important;
}

/* =========================================================
   6. AI SEARCH — brand book: input focus ring = shadow-focus
   ========================================================= */

.tc-hero-search-wrapper {
  position: relative; max-width: 760px !important; width: 100% !important;
  margin-bottom: 1rem !important; margin-inline: 0 !important; z-index: 100;
}
.tc-search-input-container { position: relative; width: 100%; }

input#ai-search-input.tc-search-input {
  width: 100% !important; padding: 22px 30px !important;
  height: auto !important; min-height: 74px !important;
  border-radius: var(--r-pill) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(241,229,45,0.30) !important;
  background: rgba(255,255,255,0.06) !important; color: var(--dt) !important;
  font-size: 21px !important; font-family: var(--f-m) !important;
  font-weight: 400 !important; letter-spacing: -0.3px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.14) !important;
  outline: none !important;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-normal) !important;
}
input#ai-search-input.tc-search-input:focus {
  border-color: var(--y) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,0.40), 0 0 0 3px rgba(241,229,45,0.25) !important;
  transform: translateY(-2px) !important;
}
input#ai-search-input.tc-search-input::placeholder {
  color: rgba(255,255,255, 0.30) !important;
  font-weight: 400 !important; opacity: 1 !important;
}

/* Search results dropdown */
.tc-search-results {
  position: absolute !important; top: calc(100% + 12px) !important;
  left: 15px !important; right: 15px !important;
  background: white !important; border-radius: var(--tc-radius-lg) !important;
  box-shadow: var(--tc-shadow-hover) !important;
  border: 1px solid var(--tc-grey-light) !important;
  z-index: 9999 !important; overflow: hidden !important;
  max-height: 520px !important; overflow-y: auto !important;
  text-align: left !important;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--tr-normal), transform var(--tr-normal), visibility var(--tr-normal) !important;
  pointer-events: none;
}
.tc-search-results.active {
  opacity: 1 !important; visibility: visible !important;
  transform: translateY(0) !important; pointer-events: auto;
}
.tc-result-item {
  padding: 15px 24px !important; border-bottom: 1px solid var(--tc-grey-light) !important;
  display: block !important; transition: background var(--tr-fast) !important;
}
.tc-result-item:last-child { border-bottom: none !important; }
.tc-result-item:hover { background: var(--tc-bg-light) !important; }
.tc-result-title {
  font-size: 0.96rem !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; color: var(--tc-text) !important;
}
.tc-search-header {
  background: var(--tc-bg-mid) !important; font-size: 0.65rem !important;
  font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: 0.10em !important; padding: 9px 24px !important;
  color: var(--tc-text-faint) !important;
}

@media (max-width: 640px) {
  input#ai-search-input.tc-search-input {
    font-size: 16px !important; padding: 16px 22px !important; min-height: 56px !important;
  }
  .tc-result-item { padding: 13px 18px !important; }
  .tc-search-header { padding: 8px 18px !important; }
}

/* =========================================================
   7. HERO — brand book §10 page-header pattern
   Dark bg + dozwolone radial gradienty blue + amber
   ========================================================= */

.tc-hero {
  background-color: #1c1a17;
  padding-block: 108px 92px;
  padding-block-start: calc(108px + 72px) !important;
  border-bottom: 1px solid var(--dbdr-sub);
  position: relative;
}

@media (max-width: 768px) {
  .tc-hero {
    padding-block: 64px 48px !important;
    padding-block-start: calc(64px + 56px) !important; /* mobile: mniejszy header */
  }
}

/* Miękkie przejście do sekcji */
.tc-hero::after {
  content: none;
}

.tc-hero > * { position: relative; z-index: 2; }

.tc-hero-grid { display: grid; gap: var(--sp-16); }
@media (min-width: 980px) {
  .tc-hero-grid { grid-template-columns: 1.8fr 1fr; align-items: center; }
}

/* Eyebrow pill — brand book §10 hero-pill */
.tc-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); background: var(--li);
  border: none; font-family: var(--f-m);
  border-radius: var(--tc-radius-pill);
  padding: 0.3rem 1rem; margin-bottom: var(--sp-5);
}

.tc-hero-h1 {
  font-family: var(--f-d);
  font-weight: 900;
  font-size: var(--tc-h1);
  color: var(--dt) !important;
  margin-bottom: 2rem;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.tc-hero-h1 em {
  color: var(--y);
  font-style: italic;
  font-weight: inherit;
}

.tc-hero-search-wrapper {
  margin-bottom: 1rem;
}

.tc-hero-sub {
  font-size: 1rem; color: var(--dtm);
  opacity: 0.85;
  margin-bottom: 0; max-width: 540px; line-height: 1.7;
}

/* Facts card — "What's in the database" panel */
.tc-facts-card {
  background: var(--dg) !important;
  padding: 1.5rem;
  max-width: 340px;
  margin-left: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--dbdr);
  border-top: 1px solid var(--dbdr); /* No yellow stripe */
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  overflow: hidden;
  margin-top: 2rem;
}

/* Yellow stripe removed */
.tc-facts-card::before {
  content: none;
}

/* Label above heading */
.tc-facts-card > h2 {
  font-family: var(--f-m);
  font-weight: 500;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--y) !important;
  margin-bottom: 0.5rem;
  display: block;
}

.tc-fact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--dbdr);
  font-size: 0.82rem;
}
.tc-fact-row:last-of-type { border-bottom: none; }

.tc-fact-label {
  color: var(--dtm) !important;
  font-family: var(--f-b);
  font-size: 0.95rem;
  font-weight: 400;
}

.tc-fact-val {
  font-weight: 700; 
  color: #ffffff !important;
  font-family: var(--font-heading); 
  font-size: 1rem;
}

.tc-fact-link {
  color: var(--y) !important;
  font-weight: 600; 
  font-size: 0.82rem;
  display: inline-block; 
  margin-top: var(--sp-1);
}
.tc-fact-link:hover { text-decoration: underline; }

/* FIX: E-E-A-T trust block (naprawia widoczność napisu obok zdjęcia) */
.tc-eeat-link {
  margin-top: var(--sp-5); 
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; 
  align-items: center; 
  gap: var(--sp-4);
  text-decoration: none !important; 
  transition: opacity var(--tr-fast);
}

/* Napis obok zdjęcia */
.tc-eeat-link strong {
  color: #ffffff !important; /* Wymuszenie białego dla pogrubionego tekstu */
}

.tc-eeat-link div {
  color: rgba(255, 255, 255, 0.6) !important; /* Wymuszenie jasnego koloru dla reszty tekstu */
}

.tc-eeat-link:hover { opacity: 0.70; }

/* =========================================================
   8. SECTION H2 — brand book §2 (1.9rem · Montserrat 700)
   + krótka linia blue pod tytułem sekcji
   ========================================================= */

.tc-front .tc-section h2,
.tc-front .tc-section > .tc-container > div > [style*="font-size: 2.2rem"],
.tc-front .tc-section > .tc-container-wide > div > [style*="font-size: 2.2rem"] {
  font-size: clamp(1.8rem, 3vw, 2.2rem) !important;
  letter-spacing: -0.025em;
  padding-bottom: var(--sp-4);
  position: relative;
  line-height: 1.15;
}

/* Gradient kreska pod nagłówkiem sekcji — bardziej wyrazista */
.tc-front .tc-section h2::after,
.tc-front .tc-section [style*="font-size: 2.2rem"]::after {
  content: "";
  display: block;
  width: 48px; height: 4px;
  background: linear-gradient(90deg, var(--y) 0%, rgba(241,229,45,0.2) 100%);
  border-radius: var(--r-pill);
  margin-top: var(--sp-4);
}

/* Serif italic accent — "finally" keyword effect */
.tc-front h1 em, .tc-front h2 em, .tc-front h3 em,
.tc-front .tc-hero-h1 em {
  font-family: var(--f-d);
  font-style: italic;
  font-weight: inherit;
  color: var(--y);
}

/* All front-page paragraphs are light on dark */
.tc-front p { color: var(--dtm); }
.tc-front .tc-section p { color: var(--dtm); }

/* Eyebrow pattern — JetBrains Mono + horizontal line */
.tc-front .tc-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-m);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--y);
  margin-bottom: var(--sp-3);
}
.tc-front .tc-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(241,229,45,0.30) 0%, transparent 100%);
}

/* =========================================================
   9. CARDS — brand book §7
   white bg, radius-md (14px), shadow-card, hover translateY(-4px) + shadow-hover
   ========================================================= */

.tc-card {
  background: var(--bg-white);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  box-shadow: var(--sh-xs);
  transition: transform var(--tr-normal);
  display: flex; flex-direction: column;
  position: relative; z-index: 1; height: 100%;
  color: var(--t);
}
.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--bdr);
  z-index: 10;
}
.tc-card h3 { color: var(--t) !important; }
/* Override dark-section h3 rule for white-bg cards (specificity 0,2,1 beats 0,1,2) */
.tc-front .tc-card h3 {
  color: var(--t) !important;
  -webkit-text-fill-color: var(--t) !important;
}
.tc-card p { color: var(--tm); }
.tc-card-link { position: absolute; inset: 0; z-index: 5; }

/* =========================================================
   10. TASK CARDS — nawiązanie do tc-card-deal (lewy border accent)
   ========================================================= */

.tc-task-card {
  background: var(--bg-white) !important;
  border: 1px solid var(--bdr-sub) !important;
}
.tc-task-card:hover {
  background: var(--bg-white) !important;
  border-color: var(--y-bdr) !important;
  box-shadow: var(--sh-md) !important;
}

.tc-task-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 640px)  { .tc-task-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tc-task-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   11. TOOL CARDS
   ========================================================= */

.tc-tool-card {
  background: var(--bg-white);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--tc-radius-md); padding: var(--sp-5);
  box-shadow: var(--sh-xs);
  transition: transform var(--tr-normal);
  display: flex; flex-direction: column; position: relative; height: 100%; color: var(--t);
}
.tc-tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--bdr);
}
.tc-tool-card-link { position: absolute; inset: 0; z-index: 5; }
.tc-tool-title { font-family: var(--f-d); font-weight: 700; font-size: 0.94rem; margin-bottom: var(--sp-2); color: var(--t); }

/* Tool card logo — 40×40, border-radius 11px, category bg */
.tc-tool-logo-slot {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--y-lo);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--y-bdr); overflow: hidden; margin-bottom: var(--sp-4);
  padding: 4px;
}
.tc-tool-logo-slot img { width: 100%; height: 100%; object-fit: contain; min-width: 60%; min-height: 60%; }
.tc-tool-logo-fb { font-size: 1rem; font-weight: 700; color: var(--t); }
.tc-tool-logo-slot--lilac { background: var(--li-lo); border-color: var(--li-bdr); }
.tc-tool-logo-slot--green { background: var(--green-lo); border-color: var(--green-bdr); }

/* =========================================================
   11b. HUBS — ciemna sekcja z glassmorphism kartami
   ========================================================= */

.tc-hubs-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  max-width: 960px; margin: 0 auto;
}
@media (min-width: 640px) { .tc-hubs-grid { grid-template-columns: repeat(2, 1fr); } }

/* Karta na ciemnym tle — glass efekt */
.tc-hub-card {
  background: var(--bg-white);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--sh-xs);
  transition: transform var(--tr-normal);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--sp-10) var(--sp-8) var(--sp-8);
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

/* Gradient sweep removed — brandbook: ZERO gradients */
.tc-hub-card::after { content: none; }

.tc-hub-card:hover {
  background: var(--bg-white);
  border-color: var(--y-bdr);
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  text-decoration: none !important;
}

/* Icon box — jaśniejszy odcień na ciemnym tle */
.tc-hub-icon {
  width: 64px; height: 64px;
  border-radius: var(--tc-radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  transition: transform var(--tr-normal);
  position: relative;
}
.tc-hub-card:hover .tc-hub-icon {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 12px 28px rgba(28,26,23,0.25);
}
.tc-hub-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }

/* Tytuł i opis — ciemny tekst na białej karcie */
.tc-hub-title {
  font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700;
  margin-bottom: var(--sp-2);
  transition: color var(--tr-fast);
}
/* Override global dark-section h3 rule — hub cards have white background */
.tc-hub-card .tc-hub-title {
  color: var(--t) !important;
  -webkit-text-fill-color: var(--t) !important;
  background: none !important;
}
.tc-hub-card:hover .tc-hub-title { color: var(--green-dark) !important; -webkit-text-fill-color: var(--green-dark) !important; }
/* Override global dark-section p rule — hub cards have white background */
.tc-hub-card .tc-hub-desc { font-size: 0.88rem; color: var(--tm) !important; margin: 0; line-height: 1.65; }

/* Hub icon override removed per brandbook */

/* =========================================================
   12. SEKCJE — cała strona ciemna, subtelne separatory
   ========================================================= */

.tc-front section {
  background-color: #1c1a17 !important;
  border-top: 1px solid var(--dbdr-sub) !important;
}

/* Alternating slight tint for visual rhythm */
.tc-front section:nth-of-type(even) {
  background-color: var(--ink) !important;
}

/* Headings in all sections: white */
.tc-front section h2,
.tc-front section h3 {
  color: var(--dt) !important;
  -webkit-text-fill-color: var(--dt) !important;
  background: none !important;
}

/* Section h2 underline: yellow gradient line */

/* =========================================================
   13. HOW IT WORKS / FLOW
   ========================================================= */

.tc-flow-grid {
  display: flex; flex-direction: column; gap: 0; position: relative;
}
@media (min-width: 768px) {
  .tc-flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); }
}

/* Arrow circle */
.tc-arrow-desktop {
  display: none;
  position: absolute; top: 50%; right: -44px; transform: translateY(-50%);
}
/* Desktop: pokaż strzałki poziome tylko w flow-grid, tylko nie w ostatniej karcie */
@media (min-width: 768px) {
  .tc-flow-grid .tc-card:not(:last-child) .tc-arrow-desktop { display: flex; }
}
/* Mobile: pokaż strzałki pionowe tylko w flow-grid */
.tc-arrow-mobile {
  display: none;
  margin: -6px auto; z-index: 20; position: relative;
}
.tc-flow-grid .tc-arrow-mobile { display: flex; }
@media (min-width: 768px) { .tc-flow-grid .tc-arrow-mobile { display: none; } }

/* =========================================================
   14. CHIPS, BADGES, PILLS — brand book §7 badge system
   ========================================================= */

/* Free — badge-green, Paid — badge-amber (brand book §7) */
.tc-badge-free {
  background: var(--green-lo); color: var(--green);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--f-m); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.tc-badge-paid {
  background: var(--y-lo); color: var(--y-deep);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--f-m); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.tc-chip-simple {
  background: rgba(255,255,255,0.08); padding: 5px 10px;
  border-radius: var(--tc-radius-sm); font-size: 0.73rem;
  color: var(--dtf); font-weight: 600; margin-right: var(--sp-1);
  border: 1px solid var(--dbdr);
}
/* Tool name chips on white-bg cards — override dark-bg defaults */
.tc-card .tc-chip-simple {
  background: rgba(28,26,23,0.06);
  color: var(--t);
  border-color: rgba(28,26,23,0.10);
}

/* =========================================================
   15. CALLOUT — nawiązanie do brand book §9 alerts
   ========================================================= */

.tc-callout {
  background: rgba(255,255,255,0.06); border-radius: var(--tc-radius-md);
  padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5);
  color: rgba(255,255,255,0.80); line-height: 1.6;
  border: 1px solid rgba(255,255,255,0.08);
}
.tc-callout p:last-child { margin-bottom: 0; }
.tc-callout--warning, .tc-callout.warning {
  background: var(--tc-amber-light); border: 1px solid rgba(241,229,45, 0.3); color: var(--y-deep);
}
.tc-callout--note, .tc-callout.note {
  background: var(--tc-blue-light); border: 1px solid rgba(28,26,23, 0.20); color: var(--ink);
}

/* =========================================================
   16. STEP BADGES
   ========================================================= */

.tc-step-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--tc-radius-pill);
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(241,229,45,0.15); color: var(--y); margin-bottom: var(--sp-3);
}
.tc-step-badge.muted { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.50); }


/* =========================================================
   17. BOTTOM CTA — dark bg jak page-header (brand book §10)
   ========================================================= */

.tc-front > div[style*="#0f172a"] {
  background: var(--tc-bg-dark) !important;
  background-image: none !important;
  border-top: none !important;
}

/* =========================================================
   18. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .tc-card,
  .tc-btn,
  .tc-tool-card,
  .tc-task-card,
  .tc-hub-card,
  .tc-hub-icon { transition: none !important; animation: none !important; }
  .tc-card:hover,
  .tc-btn:hover,
  .tc-tool-card:hover,
  .tc-hub-card:hover { transform: none !important; }
  .tc-hero-eyebrow { animation: none !important; }
  .tc-btn--primary::before,
  .tc-btn--deal::before { display: none; }
}

/* =========================================================
   18b. SCROLL-IN ANIMATIONS — subtelne wejście elementów
   ========================================================= */

@keyframes tc-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Karty w gridach — animacja na wejście przez IntersectionObserver (JS-free: CSS animation-play-state) */
.tc-card,
.tc-hub-card,
.tc-tool-card {
  animation: tc-fade-up 0.5s ease both;
  animation-play-state: paused;
}

/* Fallback: po prostu widoczne bez JS — zadziała przez sam CSS jeśli @starting-style niedostępny */
@supports (animation-timeline: scroll()) {
  .tc-card, .tc-hub-card, .tc-tool-card {
    animation: none; /* Nie blokujemy jeśli przeglądarka obsługuje scroll-based animations */
  }
}

/* =========================================================
   19. RESPONSIVE — brand book §12
   ≤480px: 1 kol, full-width btn, padding 24px
   481–900px: 2 kol, padding 32px
   ≥901px: 3+ kol, padding 64px
   ========================================================= */

@media (max-width: 768px) {
  .tc-hero { padding-block: 64px 48px; }
  .tc-facts-card { max-width: 100%; margin-left: 0; margin-top: var(--sp-10); }
  .tc-section { padding-block: var(--sp-16); }
  .tc-front section:has(.tc-hubs-grid),
  .tc-front section:has(.tc-task-grid),
  .tc-front section:has(.tc-flow-grid) { padding-block: var(--sp-16) !important; }
}

@media (max-width: 480px) {
  .tc-btn { width: 100%; }
  .tc-hero-h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  input#ai-search-input.tc-search-input { font-size: 15px !important; }
}

/* =========================================================
   20. SEKCJA "HOW IT WORKS" — wzmocnienie kart kroków
   ========================================================= */

/* Numerowanie kroków — większe, bardziej wyraziste */
.tc-flow-grid .tc-card > span:first-child {
  font-size: 0.68rem !important; font-weight: 700 !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--y) !important; margin-bottom: var(--sp-4) !important;
  display: block;
}

/* Step 03 — green accent */
.tc-flow-grid .tc-card[style*="rgba(22, 163, 74"] > span:first-child {
  color: #4ade80 !important;
}

/* Step 03 — dark-tinted card: restore light h3 (semi-transparent bg blends with dark section) */
.tc-flow-grid .tc-card:last-child h3 {
  color: var(--dt) !important;
  -webkit-text-fill-color: var(--dt) !important;
}

/* Arrow circle — bardziej wyrazisty */
.tc-arrow-circle {
  width: 44px; height: 44px; background: rgba(255,255,255,0.08);
  border: 1px solid var(--dbdr); border-radius: var(--tc-radius-pill);
  color: var(--y); display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.20); z-index: 20;
}

/* =========================================================
   21. MINI-ROW / CHIPS — wzmocnienie
   ========================================================= */

.tc-mini-row {
  background: rgba(255,255,255,0.06); padding: 11px 14px;
  border-radius: var(--tc-radius-sm); font-size: 0.84rem; font-weight: 600;
  margin-bottom: var(--sp-2); display: flex; justify-content: space-between;
  align-items: center; color: var(--dt); border: 1px solid rgba(255,255,255,0.10);
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
/* Tool names on white-bg step cards — dark text (overrides cream default) */
.tc-card .tc-mini-row {
  background: rgba(28,26,23,0.04);
  color: var(--t);
  border-color: rgba(28,26,23,0.08);
}
.tc-mini-row.clickable {
  cursor: pointer; background: rgba(241,229,45,0.08);
  border-color: rgba(241,229,45,0.20);
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.tc-mini-row.clickable:hover {
  background: rgba(241,229,45,0.14); border-color: rgba(241,229,45,0.35);
}

/* =========================================================
   22. GUIDE CARDS — wyraźniejszy data-eyebrow i read-more link
   ========================================================= */

.tc-front .tc-section article.tc-card:hover h3 {
  color: var(--li) !important;
  transition: color var(--tr-fast);
}

/* =========================================================
   23. SEKCJA SEPARATOR — subtelna linia między sekcjami
   ========================================================= */

.tc-front section + section {
  border-top: 1px solid rgba(255,255,255,0.04);
}