/* ==========================================================
   td-global.css — MERGED MASTER FILE
   technikadruku.pl — Technical Precision Design System
   
   Zawartość (w kolejności):
   ① td-fonts.css     — @font-face (Instrument Sans + JetBrains Mono)
   ② td-global.css    — CSS variables + wszystkie style stron (~57 sekcji)
   ③ td-header.css    — Header / nawigacja (v17, standalone)
   ④ td-footer.css    — Footer
   
   Merged: 2026-03-09
   ========================================================== */


/* ══════════════════════════════════════════════════════════
   ① FONTS (@font-face declarations)
   ══════════════════════════════════════════════════════════ */

/* ==========================================================
   technikadruku.pl — Self-hosted Fonts
   Instrument Sans + JetBrains Mono
   Pliki z google-webfonts-helper (latin + latin-ext)
   ========================================================== */

/* --- Instrument Sans --- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/instrument-sans-v4-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/instrument-sans-v4-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/instrument-sans-v4-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/instrument-sans-v4-latin_latin-ext-700.woff2') format('woff2');
}

/* --- JetBrains Mono --- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/jetbrains-mono-v24-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/jetbrains-mono-v24-latin_latin-ext-700.woff2') format('woff2');
}


/* ══════════════════════════════════════════════════════════
   ② GLOBAL STYLES (CSS variables + page sections 1–57)
   ══════════════════════════════════════════════════════════ */

/* ==========================================================
   TECHNICAL PRECISION — Global CSS
   technikadruku.pl
   Wersja: 2.0
   ========================================================== */


/* ----------------------------------------------------------
   1. VARIABLES
   ---------------------------------------------------------- */

:root {
  /* Tła */
  --white: #FFFFFF;
  --bg: #FAFBFC;
  --surface: #FAFBFC;          /* alias → --bg (used by FAQ page) */
  --bg-warm: #F6F7F9;
  --bg-tinted: #F0F2F7;

  /* Borders */
  --border: #E2E5ED;
  --border-strong: #CBD0DC;

  /* Tekst */
  --text: #111827;
  --text-1: #111827;          /* alias → --text (used by FAQ page) */
  --text-2: #4B5563;
  --text-3: #6B7280;

  /* Blue (primary) */
  --blue: #2563EB;
  --blue-light: #EFF6FF;
  --blue-dim: rgba(37, 99, 235, 0.07);

  /* Amber (premium/accent) */
  --amber: #D97706;
  --amber-light: #FFFBEB;
  --amber-dim: rgba(217, 119, 6, 0.07);

  /* Green (success) */
  --green: #059669;
  --green-light: #ECFDF5;
  --green-dim: rgba(5, 150, 105, 0.07);

  /* Red (problem/error) */
  --red: #DC2626;
  --red-light: #FEF2F2;
  --red-dim: rgba(220, 38, 38, 0.07);
  --purple: #7C3AED;
  --purple-light: #F5F3FF;
  --purple-dim: rgba(124, 58, 237, 0.07);

  /* Fuchsia (Reklama i Eventy hub) — moved here from sekcja 51 for W5 */
  --fuchsia: #6D28D9;
  --fuchsia-light: #EDE9FE;
  --fuchsia-dim: rgba(109, 40, 217, 0.07);

  /* Blue-dk (dark blue — AEC / budowlanka / CAD) — added for K1 */
  --blue-dk: #1E3FC2;
  --blue-dk-2: #2858D4;
  --blue-dk-light: #EEF2FF;
  --blue-dk-dim: rgba(30, 63, 194, 0.07);

  /* Navy (headings, dark sections) */
  --navy: #0F172A;

  /* Blueprint grid */
  --grid-line: rgba(37, 99, 235, 0.045);
  --blueprint-line: rgba(37, 99, 235, 0.045); /* alias → --grid-line (used by FAQ page) */

  /* Accent (alias → --blue, used by FAQ page) */
  --accent: #2563EB;

  /* Fonty */
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Instrument Sans', system-ui, sans-serif;

  /* Cienie */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --shadow-blue: 0 8px 30px rgba(37,99,235,0.15);

  /* Transitions (P7) — standaryzacja dla nowych komponentów */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Component sizing (P2) — sticky CTA minimum tap-target */
  --sticky-cta-min: 48px;
}

/* Globalny offset dla anchor-linków — kompensuje sticky header */
html { scroll-padding-top: 140px !important; }


/* ----------------------------------------------------------
   2. BASE STYLES
   ---------------------------------------------------------- */

body,
body button,
body input,
body select,
body textarea {
  font-family: var(--sans) !important;
}

body {
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans) !important;
}

.td-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.td-section {
  padding: 96px 0;
}
.td-section--white {
  background: var(--white);
}
.td-section--gray {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.td-section--tight-top {
  padding-top: 48px;
}


/* ----------------------------------------------------------
   3. BUTTONS
   ---------------------------------------------------------- */

.td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  border: none;
}

.td-btn-primary {
  background: var(--blue);
  color: #fff;
  padding: 10px 22px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.1);
}
.td-btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
  color: #fff;
}

.td-btn-amber {
  background: var(--amber);
  color: #fff;
  padding: 10px 22px;
  box-shadow: var(--shadow-sm);
}
.td-btn-amber:hover {
  background: #B45309;
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(217,119,6,0.2);
  color: #fff;
}

.td-btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 22px;
}
.td-btn-ghost:hover {
  border-color: var(--border-strong);
  background: var(--bg);
}

.td-btn-lg {
  padding: 14px 28px;
  font-size: 15px;
}


/* ----------------------------------------------------------
   4. LABEL (monospace z kreską)
   ---------------------------------------------------------- */

.td-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.td-label::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: var(--blue);
  border-radius: 1px;
}
.td-label--amber {
  color: var(--amber);
}
.td-label--amber::before {
  background: var(--amber);
}
.td-label--red {
  color: var(--red);
}
.td-label--red::before {
  background: var(--red);
}
.td-label--purple {
  color: var(--purple);
}
.td-label--purple::before {
  background: var(--purple);
}


/* ----------------------------------------------------------
   5. SECTION HEAD
   ---------------------------------------------------------- */

.td-section-head {
  margin-bottom: 52px;
}
.td-section-head h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
  line-height: 1.15;
}
.td-section-head p {
  color: var(--text-2);
  font-size: 17px;
  margin-top: 12px;
  max-width: 560px;
}
.td-section-head--center {
  text-align: center;
}
.td-section-head--center p {
  margin-left: auto;
  margin-right: auto;
}


/* ----------------------------------------------------------
   6. CARD (uniwersalna z hover)
   ---------------------------------------------------------- */

.td-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  position: relative;
  transition: all 0.25s;
}
.td-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--blue-dim);
  transform: translateY(-3px);
}
.td-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity 0.25s;
}
.td-card:hover::after {
  opacity: 1;
}

.td-card--amber:hover {
  border-color: var(--amber);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--amber-dim);
}
.td-card--amber::after {
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}


/* ----------------------------------------------------------
   7. CROP MARKS
   ---------------------------------------------------------- */

.td-cm {
  position: absolute;
}
.td-cm::before,
.td-cm::after {
  content: '';
  position: absolute;
  background: var(--border-strong);
}
.td-cm--tl { top: 12px; left: 12px; }
.td-cm--tl::before { width: 1px; height: 16px; }
.td-cm--tl::after  { width: 16px; height: 1px; }

.td-cm--tr { top: 12px; right: 12px; }
.td-cm--tr::before { width: 1px; height: 16px; top: 0; right: 0; }
.td-cm--tr::after  { width: 16px; height: 1px; top: 0; right: 0; }

.td-cm--bl { bottom: 12px; left: 12px; }
.td-cm--bl::before { width: 1px; height: 16px; bottom: 0; }
.td-cm--bl::after  { width: 16px; height: 1px; bottom: 0; }

.td-cm--br { bottom: 12px; right: 12px; }
.td-cm--br::before { width: 1px; height: 16px; bottom: 0; right: 0; }
.td-cm--br::after  { width: 16px; height: 1px; bottom: 0; right: 0; }


/* ----------------------------------------------------------
   8. BADGES
   ---------------------------------------------------------- */

.td-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
}
.td-badge--blue  { background: var(--blue-dim);  color: var(--blue); }
.td-badge--amber { background: var(--amber-dim); color: var(--amber); }
.td-badge--green { background: var(--green-dim); color: var(--green); }
.td-badge--red   { background: var(--red-dim);   color: var(--red); }
.td-badge--purple { background: var(--purple-dim); color: var(--purple); }
.td-lp-hero-card-header .td-badge--blue  { color: var(--blue); }
.td-lp-hero-card-header .td-badge--amber { color: var(--amber); }
.td-lp-hero-card-header .td-badge--green { color: var(--green); }
.td-lp-hero-card-header .td-badge--red   { color: var(--red); }
.td-lp-hero-card-header .td-badge--purple { color: var(--purple); }


/* ----------------------------------------------------------
   9. SPEC TAGS
   ---------------------------------------------------------- */

.td-spec-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-2);
  border: 1px solid var(--border);
}


/* ----------------------------------------------------------
   10. STATS ROW
   ---------------------------------------------------------- */

.td-stats {
  display: flex;
  gap: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.td-stat-val {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.td-stat-lbl {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 4px;
}


/* ----------------------------------------------------------
   11. BLUEPRINT GRID BACKGROUND
   ---------------------------------------------------------- */

.td-blueprint {
  position: relative;
  overflow: hidden;
}
.td-blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, var(--grid-line) 59px, var(--grid-line) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, var(--grid-line) 59px, var(--grid-line) 60px);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent);
  pointer-events: none;
}
.td-blueprint--navy::before {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,0.03) 59px, rgba(255,255,255,0.03) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,0.03) 59px, rgba(255,255,255,0.03) 60px);
  mask-image: none;
  -webkit-mask-image: none;
}


/* ----------------------------------------------------------
   12. FLOATING TAGS
   ---------------------------------------------------------- */

.td-float-tag {
  position: absolute;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.td-float-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.td-float-tag__text {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

@keyframes td-float-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes td-float-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.td-ft1 { top: -15px; right: 35px; animation: td-float-up 3s ease-in-out infinite; }
.td-ft2 { bottom: 110px; left: -100px; animation: td-float-down 3.5s ease-in-out infinite; }
.td-ft3 { bottom: -25px; right: 35px; animation: td-float-up 4s ease-in-out infinite; }


/* ----------------------------------------------------------
   13. TRUST BAR
   ---------------------------------------------------------- */

.td-trust-bar {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.td-trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.td-trust-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.td-trust-logos {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}
.td-trust-logo {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.02em;
}


/* ----------------------------------------------------------
   14. BREADCRUMB
   ---------------------------------------------------------- */

.td-breadcrumb {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 24px;
  font-family: var(--mono);
}
.td-breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}
.td-breadcrumb a:hover {
  color: var(--blue);
}
.td-breadcrumb span {
  color: var(--text-2);
}


/* ----------------------------------------------------------
   15. NAVY CTA SECTION
   ---------------------------------------------------------- */

.td-cta-navy {
  padding: 80px 0;
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.td-cta-navy::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(37,99,235,0.08) 59px, rgba(37,99,235,0.08) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(37,99,235,0.08) 59px, rgba(37,99,235,0.08) 60px);
  pointer-events: none;
}
.td-cta-navy h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.td-cta-navy p {
  color: rgba(255,255,255,0.6);
  font-size: 17px;
  margin-bottom: 32px;
}
.td-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.td-cta-inner .td-btn {
  padding: 16px 36px;
  font-size: 16px;
}
.td-cta-specs {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.td-cta-spec-val {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.td-cta-spec-lbl {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}


/* ----------------------------------------------------------
   16. PRICING TABLE (wierszowa — hub)
   ---------------------------------------------------------- */

.td-pricing-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.td-pricing-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
  transition: background 0.15s;
}
.td-pricing-row:last-child {
  border-bottom: none;
}
.td-pricing-row:hover:not(.td-pricing-header) {
  background: var(--bg);
}
.td-pricing-header {
  background: var(--bg-warm);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  min-height: 44px;
}
.td-pricing-row.td-highlight {
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  padding-left: 25px;
}
.td-pr-product {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.td-pr-price {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.td-pr-time {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
}


/* ----------------------------------------------------------
   17. PRICING CARDS (kolumnowa — LP)
   ---------------------------------------------------------- */

.td-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: subgrid;
  gap: 20px;
  margin-top: 48px;
}
.td-pricing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  position: relative;
  transition: all 0.25s;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
}
.td-pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.td-pricing-card.td-featured {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim), var(--shadow-md);
}
.td-pricing-card.td-featured::before {
  content: 'Najpopularniejszy';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: white;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.td-pricing-card-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.td-pricing-card-desc {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 20px;
  line-height: 1.5;
}
.td-pricing-card-price {
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.td-price-main {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
}
.td-price-unit {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-3);
  font-weight: 400;
}
.td-price-note {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 4px;
}
.td-pricing-features {
  list-style: none;
  margin-bottom: 24px;
  flex-grow: 1;
}
.td-pricing-features li {
  font-size: 14px;
  color: var(--text-2);
  padding: 6px 0 6px 24px;
  position: relative;
}
.td-pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}
.td-pricing-card .td-btn {
  width: 100%;
  justify-content: center;
}


/* ----------------------------------------------------------
   18. FAQ ACCORDION
   ---------------------------------------------------------- */

.td-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.td-faq-item:first-child {
  border-top: 1px solid var(--border);
}
.td-faq-q {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  padding: 0;
}
.td-faq-q::after {
  content: '+';
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.3s;
}
.td-faq-item.open .td-faq-q::after {
  transform: rotate(45deg);
  color: var(--blue);
}
.td-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
}
.td-faq-item.open .td-faq-a {
  max-height: 800px;
  padding-top: 16px;
}
.td-faq-a p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
}
.td-faq-a code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}


/* ----------------------------------------------------------
   19. STICKY MOBILE CTA
   ---------------------------------------------------------- */

.td-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.td-sticky-cta .td-btn {
  flex: 1;
  justify-content: center;
  padding: 14px;
  font-size: 15px;
}
.td-sticky-cta-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
.td-sticky-cta-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  transition: background 0.15s, border-color 0.15s;
}
.td-sticky-cta-phone:hover {
  background: var(--bg);
  border-color: var(--navy);
}


/* ----------------------------------------------------------
   20. LP HERO
   ---------------------------------------------------------- */

.td-lp-hero {
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
}
.td-lp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
}
.td-lp-hero h1 {
  font-size: 46px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: var(--navy);
}
/* Gradient text — reusable */
.td-text-amber {
  background: linear-gradient(120deg, #D97706 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-text-blue {
  background: linear-gradient(120deg, #2563EB 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-lp-hero-desc {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
}
.td-lp-hero-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* Hero visual card */
.td-lp-hero-visual {
  position: relative;
}
.td-lp-hero-img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.td-lp-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.td-lp-hero-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.td-lp-hero-card-header {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ----------------------------------------------------------
   21. EFFECT TILES (hero card)
   ---------------------------------------------------------- */

.td-effect-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.td-effect-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.td-effect-tile:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.td-effect-tile-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
}
.td-eti-varnish {
  background: linear-gradient(135deg, #faf5eb, #f0e8d8);
  border: 1px solid #e8dcc8;
}
.td-eti-varnish::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 36px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: rotate(25deg) translateX(-20px);
  animation: td-shine 3s ease-in-out infinite;
}
.td-eti-2d {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border: 1px solid #c7d2fe;
}
.td-eti-white {
  background: var(--navy);
  border: 1px solid #2d3748;
  color: white;
}
.td-eti-nolabel {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0;
}
.td-effect-tile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.td-effect-tile-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

@keyframes td-shine {
  0%, 70%, 100% { transform: rotate(25deg) translateX(-30px); }
  85% { transform: rotate(25deg) translateX(40px); }
}


/* ----------------------------------------------------------
   22. PROBLEM → SOLUTION
   ---------------------------------------------------------- */

.td-ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.td-ps-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
  position: relative;
}
.td-ps-card--problem {
  border-left: 3px solid var(--red);
}
.td-ps-card--solution {
  border-left: 3px solid var(--green);
  background: var(--green-light);
  border-color: rgba(5, 150, 105, 0.15);
}
.td-ps-card-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.td-ps-card--problem .td-ps-card-tag { color: var(--red); }
.td-ps-card--solution .td-ps-card-tag { color: var(--green); }
.td-ps-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
}
.td-ps-card p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
}
.td-ps-card ul {
  list-style: none;
  margin-top: 16px;
}
.td-ps-card ul li {
  font-size: 14px;
  color: var(--text-2);
  padding: 6px 0 6px 24px;
  position: relative;
}
.td-ps-card--problem ul li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
}
.td-ps-card--solution ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}


/* ----------------------------------------------------------
   23. EFFECTS SHOWCASE
   ---------------------------------------------------------- */

.td-effects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.td-effect-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s;
  position: relative;
}
.td-effect-card:hover {
  border-color: var(--amber);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--amber-dim);
  transform: translateY(-3px);
}
.td-effect-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity 0.25s;
}
.td-effect-card:hover::after { opacity: 1; }

.td-effect-card-visual {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Varnish visual */
.td-ecv-varnish { background: linear-gradient(135deg, #faf5eb 0%, #f5ead5 100%); }
.td-ecv-varnish .td-ecv-demo {
  width: 120px;
  height: 80px;
  background: var(--white);
  border-radius: 10px;
  border: 1px solid #e8dcc8;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.td-ecv-varnish .td-ecv-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  animation: td-shine-large 4s ease-in-out infinite;
}
.td-ecv-label-lines { padding: 12px; }
.td-ecv-label-lines div { height: 3px; border-radius: 2px; margin-bottom: 6px; }
.td-ecv-label-lines div:nth-child(1) { width: 60%; background: var(--navy); opacity: 0.7; }
.td-ecv-label-lines div:nth-child(2) { width: 80%; background: var(--amber); opacity: 0.5; }
.td-ecv-label-lines div:nth-child(3) { width: 40%; background: var(--text-3); opacity: 0.3; }

@keyframes td-shine-large {
  0%, 60%, 100% { transform: translateX(-100%); }
  80% { transform: translateX(100%); }
}

/* 2.5D visual */
.td-ecv-2d { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); }
.td-ecv-2d .td-ecv-demo { display: flex; align-items: center; gap: 16px; }
.td-ecv-layer {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: 2px solid rgba(99,102,241,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #6366F1;
}
.td-ecv-layer:nth-child(1) { background: rgba(99,102,241,0.05); }
.td-ecv-layer:nth-child(2) { background: rgba(99,102,241,0.1); transform: translateY(-4px); box-shadow: 0 4px 12px rgba(99,102,241,0.15); }
.td-ecv-layer:nth-child(3) { background: rgba(99,102,241,0.18); transform: translateY(-8px); box-shadow: 0 8px 20px rgba(99,102,241,0.2); }

/* White ink visual */
.td-ecv-white { background: var(--navy); }
.td-ecv-white .td-ecv-demo { display: flex; gap: 12px; align-items: end; }
.td-ecv-bottle {
  width: 40px;
  border-radius: 6px 6px 4px 4px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.td-ecv-bottle:nth-child(1) { height: 80px; }
.td-ecv-bottle:nth-child(2) { height: 90px; }
.td-ecv-bottle-label {
  position: absolute;
  bottom: 10px;
  left: 4px;
  right: 4px;
  height: 30px;
  background: rgba(255,255,255,0.95);
  border-radius: 3px;
}
.td-ecv-bottle:nth-child(2) .td-ecv-bottle-label { height: 35px; }

/* PP foil visual */
.td-ecv-pp { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.td-ecv-pp .td-ecv-demo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.td-ecv-water-drops { display: flex; gap: 8px; }
.td-ecv-drop {
  width: 12px;
  height: 16px;
  background: rgba(59, 130, 246, 0.3);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  animation: td-drip 2s ease-in-out infinite;
}
.td-ecv-drop:nth-child(2) { animation-delay: 0.4s; }
.td-ecv-drop:nth-child(3) { animation-delay: 0.8s; }
@keyframes td-drip {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(4px); opacity: 1; }
}
.td-ecv-tag-surface {
  width: 100px;
  height: 50px;
  background: white;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.td-effect-card-body { padding: 28px; }
.td-effect-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.td-effect-card-body p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 16px;
}
.td-effect-card-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}


/* ----------------------------------------------------------
   24. INDUSTRIES
   ---------------------------------------------------------- */

.td-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.td-ind-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  transition: all 0.25s;
  position: relative;
}
.td-ind-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--blue-dim);
  transform: translateY(-2px);
}
.td-ind-icon {
  width: 48px;
  height: 48px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.td-ind-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.td-ind-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 12px;
}
.td-ind-example {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}


/* ----------------------------------------------------------
   25. PROCESS STEPS
   ---------------------------------------------------------- */

.td-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
  position: relative;
}
.td-process-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 60px;
  right: 60px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0, var(--border-strong) 8px, transparent 8px, transparent 16px);
}
.td-step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.td-step-num {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--amber);
  transition: all 0.2s;
}
.td-step:hover .td-step-num {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-dim);
}
.td-step h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.td-step p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 200px;
  margin: 0 auto;
}
.td-step-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber);
  font-weight: 600;
  margin-top: 8px;
}


/* ----------------------------------------------------------
   26. MATERIALS TABLE
   ---------------------------------------------------------- */

.td-mat-table {
  margin-top: 48px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.td-mat-row {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 0.9fr 0.8fr;
  align-items: center;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  transition: background 0.15s;
}
.td-mat-row > *:nth-child(3) { padding-left: 14px; }
.td-mat-row:last-child { border-bottom: none; }
.td-mat-table--5col .td-mat-row { grid-template-columns: 1.4fr 1.2fr 0.7fr 0.7fr 0.6fr; }
.td-mat-row:hover:not(.td-mat-header) { background: var(--bg); }
.td-mat-header {
  background: var(--bg-warm);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  min-height: 44px;
}
.td-mat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.td-mat-detail {
  font-size: 13px;
  color: var(--text-2);
}
.td-mat-val {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--navy);
  font-weight: 600;
}
.td-mat-row.td-mat-highlight {
  background: var(--amber-light);
  border-left: 3px solid var(--amber);
  padding-left: 25px;
}
.td-mat-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--amber-dim);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ----------------------------------------------------------
   27. FILE SPECS + LAYER DIAGRAM
   ---------------------------------------------------------- */

.td-specs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.td-spec-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
}
.td-spec-block-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.td-spec-block-tag--blue { color: var(--blue); }
.td-spec-block-tag--amber { color: var(--amber); }
.td-spec-block-tag--red { color: var(--red); }
.td-spec-block-tag--purple { color: var(--purple); }
.td-spec-block h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}
.td-spec-list {
  list-style: none;
}
.td-spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.td-spec-list li:last-child { border-bottom: none; }
.td-spec-label { color: var(--text-2); }
.td-spec-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.td-layer-diagram {
  margin-top: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}
.td-layer-diagram-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 16px;
}
.td-layer-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-layer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.td-layer-color {
  width: 32px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.td-layer-name {
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.td-layer-file {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}


/* ----------------------------------------------------------
   28. GALLERY
   ---------------------------------------------------------- */

.td-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
}
.td-gallery-grid > *:first-child { grid-row: span 2; }
.td-gallery-item {
  background: linear-gradient(135deg, var(--bg-tinted), var(--bg-warm));
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 20px;
  overflow: hidden;
}
.td-gallery-item--big { min-height: 372px; }
.td-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}


/* ----------------------------------------------------------
   29. CROSS-SELL
   ---------------------------------------------------------- */

.td-cross-sell {
  padding: 64px 0;
}
.td-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.td-cross-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.td-cross-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.td-cross-icon {
  font-size: 24px;
  margin-bottom: 12px;
}
.td-cross-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.td-cross-card p {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 12px;
}
.td-cross-link {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
}


/* ----------------------------------------------------------
   30. ANIMATIONS
   ---------------------------------------------------------- */

@keyframes td-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.td-fade-up {
  animation: td-fadeUp 0.6s ease-out both;
}
.td-fade-up-d1 { animation-delay: 0.1s; }
.td-fade-up-d2 { animation-delay: 0.2s; }
.td-fade-up-d3 { animation-delay: 0.3s; }


/* ----------------------------------------------------------
   32. HUB NAV CARDS
   ---------------------------------------------------------- */

.td-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.td-hub-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  transition: all 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}
.td-hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.td-hub-card--amber::before  { background: var(--amber); }
.td-hub-card--blue::before   { background: var(--blue); }
.td-hub-card--green::before  { background: var(--green); }
.td-hub-card--red::before    { background: var(--red); }
.td-hub-card--purple::before { background: var(--purple); }
.td-hub-card--navy::before   { background: var(--navy); }
.td-hub-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--blue-dim);
}
.td-hub-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.td-hub-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.td-hub-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.td-hub-card-link {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.02em;
}
.td-hub-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.td-hub-usp-item {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.td-hub-usp-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.td-hub-usp-val {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.td-hub-usp-lbl {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}


/* ----------------------------------------------------------
   31. RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  .td-stats { flex-wrap: wrap; gap: 24px; }
  .td-section-head h2 { font-size: 28px; }
  .td-container { padding: 0 20px; }
  .td-section { padding: 64px 0; }
  .td-sticky-cta { display: none; }
  .td-sticky-cta.is-visible { display: flex; gap: 10px; align-items: stretch; }
  /* Hide sticky CTA when mobile menu is open */
  body:has(.mega-menu-toggle.mega-menu-open) .td-sticky-cta.is-visible { display: none !important; }

  .td-lp-hero-inner,
  .td-ps-grid,
  .td-specs-layout { grid-template-columns: 1fr !important; gap: 32px; }
  .td-lp-hero-visual { display: none; }
  .td-lp-hero-visual--form { display: block !important; }
  .td-lp-hero-visual--form .td-cm { display: none; }
  .td-lp-hero-visual--form .td-lp-hero-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 24px 0 0;
    background: transparent;
  }
  .td-lp-hero h1 { font-size: 34px; }
  .td-lp-hero { padding: 48px 0 40px !important; }
  .td-effects-grid { grid-template-columns: 1fr; }
  .td-ind-grid,
  .td-cross-grid { grid-template-columns: 1fr; }
  .td-hub-grid { grid-template-columns: 1fr 1fr; }
  .td-hub-usp { grid-template-columns: 1fr 1fr; }
  .td-process-steps { grid-template-columns: 1fr 1fr; }
  .td-process-steps::before { display: none; }
  /* Material table: hide header, card layout on tablet too */
  .td-mat-header { display: none; }
  .td-mat-row,
  .td-mat-table--5col .td-mat-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 20px;
  }
  .td-mat-row .td-mat-detail {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .td-mat-row .td-mat-val {
    display: inline-block;
    font-size: 12px;
    background: var(--bg);
    padding: 3px 10px;
    border-radius: 5px;
    margin-right: 6px;
    padding-left: 0;
  }
  .td-gallery-grid { grid-template-columns: 1fr 1fr; }
  .td-gallery-grid > *:first-child { grid-row: span 1; }
  .td-cta-specs { flex-direction: column; gap: 20px; }
  .td-trust-inner { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
  .td-trust-logos { justify-content: center; }
  .td-float-tag { font-size: 11px; padding: 6px 10px; }
  .td-ft1 { top: -10px; right: 70px; }
  .td-ft2 { bottom: 280px; left: 5px; top: auto; }
  .td-ft3 { bottom: -20px; right: 45px; }
  .td-pricing-grid { grid-template-columns: 1fr !important; gap: 16px; margin-top: 24px; }
  .td-pricing-card { padding: 20px; }
  .td-pricing-card-desc { margin-bottom: 12px; }
  .td-pricing-card-price { padding: 12px 0; margin-bottom: 12px; }
  .td-price-main { font-size: 26px; }
  .td-pricing-features { margin-bottom: 16px; }
  .td-pricing-features li { padding: 4px 0 4px 20px; font-size: 13px; }
}

@media (max-width: 600px) {
  .td-stats { flex-direction: column; gap: 16px; }
  .td-section-head h2 { font-size: 24px; }
  .td-section { padding: 48px 0; }
  .td-btn-lg { padding: 12px 20px; font-size: 14px; }
  .td-hub-grid { grid-template-columns: 1fr; }
  .td-hub-usp { grid-template-columns: 1fr; }
  .td-lp-hero { padding: 32px 0 !important; }
  .td-lp-hero h1 { font-size: 28px; }
}

/* ----------------------------------------------------------
   17. COMPARE GRID (Traditional vs Digital)
   ---------------------------------------------------------- */

.td-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  align-items: center;
}
.td-compare-card {
  padding: 32px;
  border-radius: 14px;
  border: 1px solid var(--border);
  position: relative;
}
.td-compare-card--old {
  background: #fafafa;
  opacity: 0.85;
}
.td-compare-card--new {
  background: var(--white);
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--shadow-md);
}
.td-compare-vs {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--bg);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -22px;
  z-index: 2;
  position: relative;
}
.td-compare-card-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.td-compare-card--new .td-compare-card-tag {
  color: var(--red);
}
.td-compare-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.td-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.td-compare-list li {
  font-size: 14px;
  line-height: 1.6;
  padding-left: 24px;
  position: relative;
}
.td-compare-list--cons li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #ef4444;
  font-weight: 700;
}
.td-compare-list--pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: 700;
}
.td-compare-bottom {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.td-compare-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.td-compare-stat-val {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.td-compare-stat-lbl {
  font-size: 12px;
  color: var(--text-3);
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */
@media (max-width: 600px) {
  .td-process-steps { grid-template-columns: 1fr; }
  .td-gallery-grid { grid-template-columns: 1fr; }
  .td-effect-tiles { grid-template-columns: 1fr; }
  .td-compare-grid { grid-template-columns: 1fr; }
  .td-compare-vs { margin: -22px auto; }
  .td-spec-list li { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* Material table → card layout on mobile */
  .td-mat-header { display: none; }
  .td-mat-row,
  .td-mat-table--5col .td-mat-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 20px;
    position: relative;
  }
  .td-mat-row > span { display: block; }
  .td-mat-row .td-mat-name {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .td-mat-row .td-mat-detail {
    font-size: 13px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .td-mat-row .td-mat-val {
    display: inline-block;
    font-size: 12px;
    background: var(--bg);
    padding: 3px 10px;
    padding-left: 0;
    border-radius: 5px;
    margin-right: 6px;
    margin-bottom: 4px;
  }
  .td-mat-row.td-mat-highlight { padding-left: 17px; }
  /* Show data-label as inline prefix */
  .td-mat-row [data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
  }
  .td-mat-row .td-mat-detail[data-label]::before {
    display: block;
    margin-bottom: 2px;
  }
}


/* ----------------------------------------------------------
   33. BUDOWLANKA — HUB /druk-cad/
   ---------------------------------------------------------- */

/* BD Hero — gradient tła z blue tintem */
.bd-hero {
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, #f8fafc 0%, #eef2ff 40%, #f0f4ff 100%);
}
@media (max-width: 900px) {
  .bd-hero { padding: 48px 0 40px !important; }
}
@media (max-width: 600px) {
  .bd-hero { padding: 24px 0 !important; }
}
.bd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(29,78,216,0.05) 59px, rgba(29,78,216,0.05) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(29,78,216,0.05) 59px, rgba(29,78,216,0.05) 60px);
  mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, black, transparent);
  pointer-events: none;
}
.bd-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 55%; height: 100%;
  background: linear-gradient(160deg, transparent 0%, rgba(29,78,216,0.02) 50%, rgba(29,78,216,0.04) 100%);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}
.bd-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 64px;
  align-items: start;
}
.bd-hero h1 { font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 20px; color: var(--navy); }
.td-text-blue-dk {
  background: linear-gradient(135deg, #1E3FC2 0%, #2858D4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.bd-hero-desc { font-size: 18px; color: var(--text-2); line-height: 1.7; margin-bottom: 28px; max-width: 520px; }
.bd-hero-ctas { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.bd-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* BD Hero USP items (3 items pod opisem) */
.bd-hero-usp { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.bd-hero-usp-item { display: flex; align-items: flex-start; gap: 14px; }
.bd-hero-usp-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--blue-light); border: 1px solid rgba(29,78,216,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bd-hero-usp-title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.bd-hero-usp-sub { font-size: 14px; color: var(--text-2); line-height: 1.5; }

/* BD Hero visual (zdjęcie + floating tagi + crop marks na zewnątrz) */
.bd-hero-visual { position: relative; padding: 14px; }
.bd-hero-img {
  width: 100%; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden;
  position: relative; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(29,78,216,0.08);
}
.bd-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-hero-img-placeholder {
  width: 100%; min-height: 280px;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; color: #e2e8f0; text-align: center; padding: 20px;
}
.bd-img-cm { position: absolute; z-index: 2; }
.bd-img-cm::before, .bd-img-cm::after { content: ''; position: absolute; background: rgba(29,78,216,0.3); }
.bd-img-cm--tl { top: 0; left: 0; } .bd-img-cm--tl::before { width: 1px; height: 20px; } .bd-img-cm--tl::after { width: 20px; height: 1px; }
.bd-img-cm--br { bottom: 0; right: 0; } .bd-img-cm--br::before { width: 1px; height: 20px; bottom: 0; right: 0; } .bd-img-cm--br::after { width: 20px; height: 1px; bottom: 0; right: 0; }

/* BD Floating tags (wariant z blue border) */
.bd-float-tag {
  position: absolute; z-index: 3;
  background: var(--white); border: 1px solid rgba(29,78,216,0.12);
  border-radius: 8px; padding: 8px 14px;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(29,78,216,0.04);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.bd-float-tag__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--blue); }
.bd-float-tag__text { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); }


/* ----------------------------------------------------------
   34. BUDOWLANKA — TRUST BAR (blue tint)
   ---------------------------------------------------------- */

.bd-trust-bar {
  padding: 32px 0;
  border-top: 1px solid rgba(29,78,216,0.08);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #eef2ff, var(--bg));
}
.bd-trust-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.bd-trust-logos {
  display: flex; gap: 32px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.bd-trust-logos img {
  height: 32px !important; width: auto !important; max-width: 160px;
  object-fit: contain; opacity: 0.85; transition: transform 0.2s, opacity 0.2s;
}
.bd-trust-logos img:hover { transform: scale(1.1); opacity: 1; }
.bd-trust-ph {
  height: 44px; padding: 0 20px; border-radius: 6px;
  background: var(--white); border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: var(--ph-color, #999); letter-spacing: 0.02em; white-space: nowrap;
}


/* ----------------------------------------------------------
   35. BUDOWLANKA — HUB CARD THUMBNAILS
   ---------------------------------------------------------- */

.bd-hub-card--img { padding: 0; overflow: hidden; }
.bd-hub-card--img h3 { padding: 0 28px; }
.bd-hub-card--img p { padding: 0 28px; }
.bd-hub-card--img .td-hub-card-link { padding: 0 28px 28px; display: block; }
.bd-hub-card-thumb {
  width: 100%; height: 160px; overflow: hidden;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.bd-hub-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bd-hub-card-thumb-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: #64748b; text-align: center; padding: 16px;
}


/* ----------------------------------------------------------
   36. BUDOWLANKA — CALLOUT BANNER
   ---------------------------------------------------------- */

.bd-callout {
  margin-top: 48px; padding: 28px 32px;
  background: var(--blue-light); border: 1px solid rgba(29,78,216,0.12);
  border-left: 3px solid var(--blue); border-radius: 14px;
  display: flex; gap: 20px; align-items: flex-start;
}
.bd-callout-icon { flex-shrink: 0; margin-top: 2px; }
.bd-callout-body h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.bd-callout-body p { font-size: 15px; color: var(--text-2); line-height: 1.7; }


/* ----------------------------------------------------------
   37. BUDOWLANKA — INDUSTRIES 3-COL + 5-COL VARIANTS
   ---------------------------------------------------------- */

.td-ind-grid--3 { grid-template-columns: repeat(3,1fr); }
.td-ind-grid--5 { grid-template-columns: repeat(5,1fr); }

.bd-dla-kogo-top {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; margin-bottom: 48px;
}
.bd-dla-kogo-top .td-section-head { margin-bottom: 0; }
.bd-dla-kogo-img {
  width: 100%; height: 260px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
}
.bd-dla-kogo-img img { width: 100%; height: 100%; object-fit: cover; }
.bd-dla-kogo-img .bd-hub-card-thumb-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: #64748b; text-align: center; padding: 16px;
}


/* ----------------------------------------------------------
   38. BUDOWLANKA — DOWNLOAD CTA
   ---------------------------------------------------------- */

.bd-download-cta { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bd-download-note { font-size: 13px; color: var(--text-3); }


/* ----------------------------------------------------------
   39. BUDOWLANKA — REALIZACJE MINI
   ---------------------------------------------------------- */

.bd-real-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; }
.bd-real-section {
  background: var(--navy); position: relative; overflow: hidden;
}
.bd-real-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(37,99,235,0.08) 59px, rgba(37,99,235,0.08) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(37,99,235,0.08) 59px, rgba(37,99,235,0.08) 60px);
  pointer-events: none;
}
.bd-real-section .td-label { color: var(--blue); }
.bd-real-section .td-section-head h2 { color: var(--white); }
.bd-real-section .td-section-head p { color: rgba(255,255,255,0.6); }
.bd-real-section .bd-real-card {
  display: block; text-decoration: none; color: inherit;
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);
}
.bd-real-section .bd-real-card:hover {
  background: rgba(255,255,255,0.1); border-color: var(--blue);
}
.bd-real-section .bd-real-card-tag { color: var(--blue); }
.bd-real-section .bd-real-card h3 { color: var(--white); }
.bd-real-section .bd-real-card p { color: rgba(255,255,255,0.6); }
.bd-real-section .bd-real-card-meta { border-top-color: rgba(255,255,255,0.1); }
.bd-real-section .bd-real-card-stat-val { color: var(--white); }
.bd-real-section .bd-real-card-stat-lbl { color: rgba(255,255,255,0.4); }
.bd-real-section .bd-real-link { color: var(--white); }
.bd-real-section .bd-real-link:hover { color: var(--blue); }
.bd-real-card {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px;
  transition: all 0.25s; position: relative; overflow: hidden;
}
.bd-real-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bd-real-card-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 12px; }
.bd-real-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; line-height: 1.3; }
.bd-real-card p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
.bd-real-card-meta { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.bd-real-card-stat { display: flex; flex-direction: column; gap: 2px; }
.bd-real-card-stat-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--navy); }
.bd-real-card-stat-lbl { font-size: 11px; color: var(--text-3); }
.bd-real-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--blue); margin-top: 24px; }
.bd-real-link:hover { text-decoration: underline; }


/* ----------------------------------------------------------
   40. BUDOWLANKA — CROSS-SELL (image + text)
   ---------------------------------------------------------- */

.bd-cross-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  display: grid; grid-template-columns: 280px 1fr; overflow: hidden;
  transition: all 0.25s; text-decoration: none; color: inherit;
}
.bd-cross-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bd-cross-thumb { overflow: hidden; }
.bd-cross-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bd-cross-thumb-ph {
  width: 100%; height: 100%; min-height: 180px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: #64748b; text-align: center; padding: 16px;
}
.bd-cross-body { padding: 32px; }
.bd-cross-body h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.bd-cross-body p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.bd-cross-link { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--blue); letter-spacing: 0.02em; }


/* ----------------------------------------------------------
   41. BUDOWLANKA — RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  .bd-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .bd-hero h1 { font-size: 32px; }
  .bd-hero-visual .bd-float-tag { display: none; }
  .bd-hero-visual .bd-float-tag:last-of-type { display: flex; }
  .bd-trust-inner { gap: 12px; text-align: center; }
  .bd-trust-logos { gap: 16px; }
  .bd-trust-logos img { height: 24px !important; }
  .bd-trust-ph { height: 36px; padding: 0 14px; font-size: 12px; }
  .bd-callout { flex-direction: column; }
  .bd-real-grid { grid-template-columns: 1fr; }
  .bd-cross-card { grid-template-columns: 1fr; }
  .td-ind-grid--5 { grid-template-columns: 1fr 1fr; }
  .td-ind-grid--3 { grid-template-columns: 1fr 1fr; }
  .bd-dla-kogo-top { grid-template-columns: 1fr; gap: 24px; }
  .bd-dla-kogo-img { height: 200px; }
}

@media (max-width: 600px) {
  .td-ind-grid--5 { grid-template-columns: 1fr; }
  .td-ind-grid--3 { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------
   42. REALIZACJE — HERO STATS
   ---------------------------------------------------------- */

.re-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(29,78,216,0.1);
}
.re-stat-val {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--navy); line-height: 1.3; margin-bottom: 4px;
}
.re-stat-lbl { font-size: 13px; color: var(--text-2); line-height: 1.4; }


/* ----------------------------------------------------------
   43. REALIZACJE — PROJECT NAVIGATION GRID
   ---------------------------------------------------------- */

.re-project-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px;
}
.re-project-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 24px; text-decoration: none; color: inherit;
  transition: all 0.25s; position: relative;
}
.re-project-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--blue); border-radius: 12px 12px 0 0;
  opacity: 0; transition: opacity 0.25s;
}
.re-project-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.re-project-card:hover::before { opacity: 1; }
.re-project-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 8px;
}
.re-project-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
.re-project-meta { font-size: 13px; color: var(--text-2); }


/* ----------------------------------------------------------
   44. REALIZACJE — CASE STUDY CARDS
   ---------------------------------------------------------- */

.re-case {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; margin-bottom: 32px; scroll-margin-top: 100px;
  transition: box-shadow 0.3s;
}
.re-case:last-child { margin-bottom: 0; }
.re-case:hover { box-shadow: var(--shadow-md); }
.re-case-header {
  padding: 32px 36px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg) 0%, var(--white) 100%);
}
.re-case-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 10px;
}
.re-case-header h2 { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 16px; }
.re-case-meta-row {
  display: flex; gap: 32px; flex-wrap: wrap;
}
.re-case-meta { display: flex; flex-direction: column; gap: 2px; }
.re-case-meta-lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.re-case-meta-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--navy); }
.re-case-body { padding: 32px 36px; }
.re-case-body p { font-size: 15px; color: var(--text-2); line-height: 1.7; margin-bottom: 20px; }
.re-case-body h3 {
  font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; margin-top: 28px;
  padding-left: 14px; border-left: 3px solid var(--blue);
}
.re-case-body h3:first-child { margin-top: 0; }
.re-case-body p:last-child { margin-bottom: 0; }


/* ----------------------------------------------------------
   45. REALIZACJE — RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  .re-stats { grid-template-columns: 1fr; gap: 16px; }
  .re-project-grid { grid-template-columns: 1fr 1fr; }
  .re-case-header { padding: 24px; }
  .re-case-body { padding: 24px; }
  .re-case-header h2 { font-size: 20px; }
  .re-case-meta-row { gap: 20px; }
}

@media (max-width: 600px) {
  .re-project-grid { grid-template-columns: 1fr; }
  .re-stat-val { font-size: 17px; }
}


/* ----------------------------------------------------------
   46. SPOKE — USP BAR (3 items, icons above)
   ---------------------------------------------------------- */

.td-usp-bar {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 32px;
}
.td-usp-item {
  display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
}
.td-usp-icon {
  width: 36px; height: 36px; color: var(--blue); flex-shrink: 0;
}
.td-usp-icon svg { width: 100%; height: 100%; }
.td-usp-item p {
  font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 0;
}


/* ----------------------------------------------------------
   47. SPOKE — CONTACT GRID (dokumentacje powykonawcze)
   ---------------------------------------------------------- */

.dp-contact-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;
}
.dp-contact-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 28px; transition: border-color 0.2s;
}
.dp-contact-card:hover { border-color: var(--blue); }
.dp-contact-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.dp-contact-card p { font-size: 15px; color: var(--text-1); line-height: 1.6; margin-bottom: 6px; }
.dp-contact-card p:last-child { margin-bottom: 0; }
.dp-contact-card a { color: var(--blue); text-decoration: none; }
.dp-contact-card a:hover { text-decoration: underline; }


/* ----------------------------------------------------------
   48. SPOKE — USP + CONTACT RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  .td-usp-bar { grid-template-columns: 1fr; gap: 16px; }
  .dp-contact-grid { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------
   49. TRUST BAR — INNER + LINK MONO
   ---------------------------------------------------------- */

.bd-trust-inner { text-align: center; }
.bd-trust-inner h2 { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 20px; }
.td-link-mono {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--blue); text-decoration: none; display: inline-block; margin-top: 16px;
}
.td-link-mono:hover { text-decoration: underline; }


/* ----------------------------------------------------------
   50. SPOKE — PROCESS LAYOUT (image left, steps right)
   ---------------------------------------------------------- */

.dp-process-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.dp-process-steps { display: flex; flex-direction: column; gap: 0; }

.dp-process-step {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
  padding: 24px 0; border-bottom: 1px solid var(--border);
}
.dp-process-step:first-child { padding-top: 0; }
.dp-process-step:last-child { border-bottom: none; }

.dp-step-num {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, #EEF2FF, #DBEAFE);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--blue);
  flex-shrink: 0;
}

.dp-process-step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.dp-process-step p { font-size: 15px; color: var(--text-2); line-height: 1.7; margin: 0; }

.dp-process-img { position: sticky; top: 120px; }
.dp-process-img img {
  width: 100%; border-radius: 16px; object-fit: cover;
  box-shadow: 0 4px 16px rgba(15,23,42,0.06);
}

@media (max-width: 900px) {
  .dp-process-layout { grid-template-columns: 1fr; gap: 32px; }
  .dp-process-img { position: static; order: -1; }
  .dp-process-img img { max-height: 300px; }
}

/* ==========================================================
   51. FUCHSIA COMPONENT VARIANTS (Reklama i Eventy)
   ----------------------------------------------------------
   Tokeny --fuchsia* przeniesione do głównego :root (sekcja 1)
   w ramach W5 — "jeden blok tokenów". Tutaj tylko warianty
   komponentów (label / badge / btn / hub-card / spec / itp.).
   ========================================================== */

/* Label */
.td-label--fuchsia {
  color: var(--fuchsia);
}
.td-label--fuchsia::before {
  background: var(--fuchsia);
}

/* Badge */
.td-badge--fuchsia { background: var(--fuchsia-dim); color: var(--fuchsia); }
.td-lp-hero-card-header .td-badge--fuchsia { color: var(--fuchsia); }

/* Spec block tag */
.td-spec-block-tag--fuchsia { color: var(--fuchsia); }

/* Hub card */
.td-hub-card--fuchsia::before { background: var(--fuchsia); }

/* Button variant */
.td-btn-fuchsia {
  background: var(--fuchsia);
  color: #fff;
  border: none;
}
.td-btn-fuchsia:hover {
  background: #5B21B6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
}

/* H1 gradient text */
.td-text-fuchsia {
  background: linear-gradient(120deg, #4C1D95, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Float tag dot — fuchsia */
.td-float-tag__dot--fuchsia { background: var(--fuchsia); }


/* ==========================================================
   52. ROLL-UP SPOKE — VARIANT CARDS (ECO vs PREMIUM)
   ========================================================== */

.ru-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.ru-variant-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}
.ru-variant-card:hover {
  border-color: var(--fuchsia);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--fuchsia-dim);
}
.ru-variant-card--featured {
  border-color: var(--fuchsia);
  box-shadow: 0 0 0 3px var(--fuchsia-dim);
}
.ru-variant-popular-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--fuchsia);
  background: var(--fuchsia-light);
  padding: 4px 10px;
  border-radius: 6px;
}
.ru-variant-header { margin-bottom: 24px; }
.ru-variant-icon { font-size: 36px; margin-bottom: 12px; }
.ru-variant-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.ru-variant-header p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

/* Price table inside variant card */
.ru-variant-prices { margin-bottom: 24px; }
.ru-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ru-price-table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ru-price-table th:first-child { border-radius: 8px 0 0 0; }
.ru-price-table th:last-child { border-radius: 0 8px 0 0; }
.ru-price-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.ru-price-table td strong {
  font-weight: 600;
  color: var(--navy);
}
.ru-price-table tbody tr:last-child td { border-bottom: none; }

/* Feature list inside variant card */
.ru-variant-features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ru-variant-features li {
  font-size: 14px;
  color: var(--text-2);
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ru-variant-features li::before {
  content: '✓';
  color: var(--fuchsia);
  font-weight: 700;
  flex-shrink: 0;
}

/* Exchange bar */
.ru-exchange-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--fuchsia-light);
  border: 1px solid rgba(109, 40, 217, 0.12);
  border-radius: 12px;
}
.ru-exchange-icon { font-size: 28px; flex-shrink: 0; }
.ru-exchange-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.ru-exchange-text strong { color: var(--navy); }


/* ==========================================================
   53. ROLL-UP SPOKE — USE-CASE CARDS
   ========================================================== */

.ru-use-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.ru-use-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  transition: all 0.25s;
}
.ru-use-card:hover {
  border-color: var(--fuchsia);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.ru-use-icon {
  font-size: 32px;
  margin-bottom: 14px;
}
.ru-use-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.ru-use-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}


/* ==========================================================
   54. ROLL-UP SPOKE — RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
  .ru-variant-grid { grid-template-columns: 1fr; gap: 20px; }
  .ru-use-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ru-use-grid { grid-template-columns: 1fr; }
  .ru-variant-card { padding: 28px 20px; }
  .ru-exchange-bar { flex-direction: column; text-align: center; }
}

/* --------------------------------------------------------
   51 · Form card — remove on mobile
   -------------------------------------------------------- */
@media (max-width: 900px) {
  #wycena > div[style] {
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #wycena .td-cm { display: none !important; }
}


/* ==========================================================
   55. FAQ PAGE
   ========================================================== */

/* ── 55a · Hero ─────────────────────────────────────────── */
.td-faq-hero {
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.td-faq-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.45;
  pointer-events: none;
}
.td-faq-hero-inner {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.td-faq-hero-text {
  flex: 1 1 55%;
}
.td-faq-h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  margin: 0.5rem 0 1.2rem;
}
.td-faq-hero-desc {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 540px;
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* Quick-nav pills */
.td-faq-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.td-faq-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.td-faq-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.td-faq-pill--spec    { background: #e8f0fe; color: #1a56db; border-color: #c7d9fc; }
.td-faq-pill--color   { background: #fdf3e8; color: #b45309; border-color: #fcd9a4; }
.td-faq-pill--sticker { background: #ecfdf5; color: #0d7a5f; border-color: #a7f3d0; }
.td-faq-pill--cad     { background: #f0f4ff; color: #4338ca; border-color: #c7d2fe; }

/* Hero stats */
.td-faq-hero-stats {
  flex: 0 0 260px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(10,37,64,.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.td-faq-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.td-faq-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.td-faq-stat-label {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.4;
}
.td-faq-stat-note {
  font-size: 0.82rem;
  color: var(--text-2);
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin: 0;
}
.td-faq-stat-note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.td-faq-stat-note a:hover { text-decoration: underline; }

/* ── 55b · Accordion body ───────────────────────────────── */
/* Uwaga: .td-faq-item / .td-faq-q / .td-faq-a zdefiniowane globalnie wcześniej.
   Tu tylko override pod .td-faq-body-wrap (nowy układ kafelkowy). */
.td-faq-body-section {
  background: var(--surface);
  padding: 0 0 60px;
}
.td-faq-body-wrap {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Category block */
.td-faq-cat {
  scroll-margin-top: 90px;
}
.td-faq-cat-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 12px 12px 0 0;
  border-left: 5px solid transparent;
  background: #fff;
  border-bottom: 1.5px solid var(--border);
}
.td-faq-cat-header--spec    { border-left-color: #1a56db; }
.td-faq-cat-header--color   { border-left-color: #b45309; }
.td-faq-cat-header--sticker { border-left-color: #0d7a5f; }
.td-faq-cat-header--cad     { border-left-color: #4338ca; }

.td-faq-cat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.td-faq-cat-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 2px;
}
.td-faq-cat-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 3px;
  line-height: 1.3;
}
.td-faq-cat-sub {
  font-size: 0.82rem;
  color: var(--text-2);
  margin: 0;
}

/* FAQ items — scoped to .td-faq-body-wrap to avoid conflict with global .td-faq-item */
.td-faq-body-wrap .td-faq-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-top: none;
  padding: 0;
}
.td-faq-body-wrap .td-faq-item:first-child {
  border-top: none;
}
.td-faq-body-wrap .td-faq-item:last-child {
  border-radius: 0 0 12px 12px;
}
.td-faq-body-wrap .td-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  user-select: none;
  transition: background 0.15s;
  border-top: 1px solid var(--border);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
}
.td-faq-body-wrap .td-faq-q:hover { background: #f8fafc; }
/* Plus/krzyżyk — używa globalnego ::after '+' z .td-faq-q */
.td-faq-body-wrap .td-faq-item--open .td-faq-q::after {
  transform: rotate(45deg);
  color: var(--blue);
}

/* Answer panel — scoped */
.td-faq-body-wrap .td-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
  padding-top: 0;
}
.td-faq-body-wrap .td-faq-item--open .td-faq-a {
  max-height: 800px;
}
.td-faq-body-wrap .td-faq-a > div {
  padding: 4px 24px 20px;
}
.td-faq-body-wrap .td-faq-a p {
  font-size: 0.92rem;
  color: var(--text-1);
  line-height: 1.75;
  margin: 0 0 10px;
}
.td-faq-body-wrap .td-faq-a p:last-child { margin-bottom: 0; }
.td-faq-body-wrap .td-faq-a ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.td-faq-body-wrap .td-faq-a li { color: var(--text-1); font-size: 0.92rem; }

/* ── 55c · Comparison table ─────────────────────────────── */
.td-faq-table-section {
  background: #f0f4fa;
  padding: 64px 0;
}
.td-faq-table-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.td-faq-table-header {
  text-align: center;
  margin-bottom: 36px;
}
.td-faq-table-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin: 6px 0 8px;
}
.td-faq-table-sub {
  font-size: 0.9rem;
  color: var(--text-2);
}
.td-faq-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.td-faq-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10,37,64,.06);
  font-size: 0.9rem;
}
.td-faq-table thead tr {
  background: var(--navy);
  color: #fff;
}
.td-faq-table th {
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.td-faq-th-icon { margin-right: 6px; }
.td-faq-table tbody tr { border-bottom: 1px solid var(--border); }
.td-faq-table tbody tr:last-child { border-bottom: none; }
.td-faq-table tbody tr:nth-child(even) { background: #f8fafc; }
.td-faq-table td {
  padding: 14px 20px;
  color: var(--text-1);
  vertical-align: middle;
}
.td-faq-td-label {
  font-weight: 700;
  color: var(--navy) !important;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.td-faq-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
}
.td-faq-badge--blue  { background: #e8f0fe; color: #1a56db; }
.td-faq-badge--navy  { background: #e8edf5; color: var(--navy); }
.td-faq-badge--gray  { background: #f1f3f5; color: #495057; }
.td-faq-check { color: #0d7a5f; font-weight: 700; margin-right: 4px; }
.td-faq-cross { color: #adb5bd; margin-right: 4px; }

/* ── 55d · Bottom CTA ───────────────────────────────────── */
.td-faq-cta-section {
  background: var(--navy);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.td-faq-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.td-faq-cta-wrap {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.td-faq-cta-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #fff;
}
.td-faq-cta-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}
.td-faq-cta-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  margin-bottom: 32px;
}
.td-faq-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.td-faq-cta-btns .td-btn-ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.td-faq-cta-btns .td-btn-ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
}

/* ── 55e · Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .td-faq-hero-inner {
    flex-direction: column;
    gap: 2.5rem;
  }
  .td-faq-hero-stats {
    flex: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .td-faq-stat { flex: 1 1 calc(50% - 10px); }
}
@media (max-width: 600px) {
  .td-faq-h1 { font-size: 2rem; }
  .td-faq-cat-header { padding: 16px; gap: 12px; }
  .td-faq-body-wrap .td-faq-q { padding: 14px 16px; font-size: 0.9rem; }
  .td-faq-body-wrap .td-faq-a > div { padding: 4px 16px 16px; }
  .td-faq-stat { flex: 1 1 100%; }
  .td-faq-table-title { font-size: 1.3rem; }
  .td-faq-cta-title { font-size: 1.6rem; }
}


/* ==========================================================
   56. KONTAKT — strona /kontakt/
   ========================================================== */

/* --- Hero --- */
.kt-hero-inner {
  padding: 64px 32px 56px;
  text-align: center;
}
.kt-hero-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  color: #fff;
  margin: 16px 0 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.kt-hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.75);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.65;
}
.kt-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.kt-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
}
.kt-badge svg { flex-shrink: 0; }

/* --- Info grid (3 karty) --- */
.kt-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.kt-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.kt-info-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
}
.kt-info-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kt-info-icon--blue  { background: var(--blue-light);  color: var(--blue); }
.kt-info-icon--green { background: var(--green-light); color: var(--green); }
.kt-info-icon--amber { background: var(--amber-light); color: var(--amber); }

.kt-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 0;
}
.kt-info-body p {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}
.kt-info-body p:last-child { margin-bottom: 0; }

.kt-contact-link {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s;
}
.kt-contact-link--phone {
  font-size: 22px;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.kt-contact-link--phone:hover { color: var(--blue); }
.kt-contact-link--email {
  font-size: 15px;
  color: var(--blue);
  word-break: break-all;
}
.kt-contact-link--email:hover { color: var(--navy); }

.kt-info-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  margin-top: 4px;
}
.kt-info-link:hover { text-decoration: underline; }

.kt-info-note {
  font-size: 12px !important;
  color: var(--text-3) !important;
  margin-top: 8px !important;
}

/* Godziny table */
.kt-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.kt-hours-table td {
  padding: 5px 0;
  color: var(--text);
  vertical-align: top;
}
.kt-hours-table td:last-child {
  text-align: right;
  white-space: nowrap;
}
.kt-hours-closed td { color: var(--text-3); }

/* --- Mapa --- */
.kt-map-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-top: 8px;
}
.kt-map-wrap iframe { display: block; }

/* Dojazd */
.kt-directions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.kt-dir-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 18px;
}
.kt-dir-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.kt-dir-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.kt-dir-item p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}

/* --- Formularz trust bar --- */
.kt-form-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 32px;
  margin-top: 28px;
}
.kt-form-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
}
.kt-form-trust svg { color: var(--green); flex-shrink: 0; }
.kt-form-trust a { color: var(--blue); text-decoration: none; }
.kt-form-trust a:hover { text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .kt-info-grid { grid-template-columns: 1fr; gap: 16px; }
  .kt-directions-grid { grid-template-columns: 1fr; gap: 12px; }
  .kt-hero-inner { padding: 48px 20px 40px; }
}
@media (max-width: 600px) {
  .kt-hero-sub { font-size: 16px; }
  .kt-badge { font-size: 12px; padding: 6px 12px; }
  .kt-info-card { padding: 24px 20px; }
  .kt-form-trust { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================
   57. LEGAL & SITEMAP — /regulamin/, /mapa-strony/
   ========================================================== */

.td-legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 80px;
}

.td-legal-page h1 {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.2;
}

.td-legal-updated {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin: 0 0 40px;
}

.td-legal-body h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 10px;
  line-height: 1.4;
}

.td-legal-body h2:first-child {
  margin-top: 0;
}

.td-legal-body p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
  margin: 0 0 10px;
}

.td-legal-body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.td-legal-body a:hover {
  color: var(--navy);
}

/* --- Sitemap --- */

.td-sitemap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  margin-top: 40px;
}

.td-sitemap-group h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.td-sitemap-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.td-sitemap-group li {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.td-sitemap-group a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.td-sitemap-group a:hover {
  color: var(--blue);
  padding-left: 6px;
}

/* --- Legal/Sitemap responsive --- */
@media (max-width: 600px) {
  .td-legal-page { padding: 32px 0 60px; }
  .td-legal-page h1 { font-size: 26px; }
  .td-sitemap { grid-template-columns: 1fr; gap: 32px; }
}


/* ----------------------------------------------------------
   58. NS-FORMAT GRID (numery-startowe hero card)
   ---------------------------------------------------------- */

.ns-format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ns-format-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  cursor: default;
}

.ns-format-card:hover {
  border-color: var(--fuchsia);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ns-format-mockup {
  margin-bottom: 12px;
}

.ns-format-mockup img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.ns-format-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 4px;
}

.ns-format-price {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--fuchsia);
}

/* Modifiers — reserved for per-format overrides */
.ns-format--a5 {}
.ns-format--sq {}

/* --- NS-format responsive --- */
@media (max-width: 480px) {
  .ns-format-grid { gap: 12px; }
  .ns-format-card { padding: 12px; }
  .ns-format-label { font-size: 11px; }
  .ns-format-price { font-size: 12px; }
}


/* ----------------------------------------------------------
   59. KT-CONTACT LIST (kontakt hero — inline contact items)
   ---------------------------------------------------------- */

.kt-contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 36px;
}

.kt-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.kt-contact-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 2px;
}

.kt-contact-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}


/* ----------------------------------------------------------
   60. TD-STICKY-PHONE / TD-STICKY-MAIN (reklama sticky CTA — Pattern B)
   Pattern B = flat layout (no td-sticky-cta-row wrapper)
   Used on: banery, roll-upy, szyldy-pcv, numery-startowe
   ---------------------------------------------------------- */

.td-sticky-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  min-height: 48px;
  border-radius: 14px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.td-sticky-phone:hover {
  opacity: 0.85;
}

/* td-sticky-main — flex:1 inherited from .td-sticky-cta .td-btn */
.td-sticky-main {
  text-align: center;
}


/* ----------------------------------------------------------
   61. TD-ARTICLE (artykuł / poradnik — /przygotowanie-plikow/)
   ---------------------------------------------------------- */

.td-article {
  max-width: 780px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.td-article h2 {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 48px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.td-article h2:first-child {
  margin-top: 0;
}

.td-article h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 10px;
}

.td-article p {
  margin-bottom: 16px;
}

.td-article ul,
.td-article ol {
  margin: 12px 0 20px 24px;
  line-height: 1.8;
}

.td-article li {
  margin-bottom: 6px;
}

.td-article strong {
  font-weight: 700;
  color: var(--navy);
}

.td-article code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}

.td-article a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.td-article a:hover {
  color: var(--navy);
}

.td-article-tip {
  background: rgba(37, 99, 235, 0.05);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.7;
}

.td-article-tip strong {
  color: var(--blue);
}

.td-article-warn {
  background: rgba(217, 119, 6, 0.05);
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.7;
}

.td-article-warn strong {
  color: var(--amber);
}

.td-article-steps {
  counter-reset: step;
  list-style: none;
  margin-left: 0;
  padding: 0;
}

.td-article-steps li {
  counter-increment: step;
  padding-left: 36px;
  position: relative;
  margin-bottom: 12px;
}

.td-article-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Article responsive --- */
@media (max-width: 600px) {
  .td-article { font-size: 15px; }
  .td-article h2 { font-size: 22px; margin-top: 36px; }
  .td-article h3 { font-size: 17px; }
  .td-article-tip,
  .td-article-warn { padding: 14px 16px; font-size: 13px; }
}


/* ----------------------------------------------------------
   62. HOMEPAGE (hp-* classes)
   ---------------------------------------------------------- */

/* Services grid */
.hp-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hp-service-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.hp-service-card--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.hp-service-card--disabled:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}
.hp-service-card--fuchsia:hover {
  border-color: #6D28D9;
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(109,40,217,0.07);
}
.hp-service-card--fuchsia::after {
  background: linear-gradient(90deg, transparent, #6D28D9, transparent);
}
.hp-service-card--red:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--red-dim);
}
.hp-service-card--red::after {
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.hp-service-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  margin-bottom: 16px;
}
.hp-service-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.hp-service-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}
.hp-service-price {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.hp-service-link {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 12px;
}

/* USP grid */
.hp-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hp-usp-card {
  text-align: center;
  padding: 32px 20px;
}
.hp-usp-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--blue-light);
  border: 1px solid rgba(37,99,235,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.hp-usp-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.hp-usp-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

/* Machine tile in hero card */
.hp-tile-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 8px;
}
.hp-tile-spec {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Machine cards (navy section) */
.hp-machines-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hp-machine-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 24px;
  transition: all 0.25s;
}
.hp-machine-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.hp-machine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hp-machine-width {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.hp-machine-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.hp-machine-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: 16px;
}
.hp-machine-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.hp-machine-specs li {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  padding: 3px 0;
}
.hp-machine-specs li::before {
  content: '→ ';
  color: var(--blue);
}

/* Reviews */
.hp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hp-review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  transition: all 0.25s;
}
.hp-review-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hp-review-stars {
  color: var(--amber);
  font-size: 16px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.hp-review-text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.hp-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.hp-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-review-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.hp-review-role {
  font-size: 12px;
  color: var(--text-3);
}

/* Industry tags (trust bar) */
.hp-industry-tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-2);
  background: rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.1);
  padding: 6px 16px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Reviews marquee */
.hp-marquee-wrap {
  overflow: hidden;
  padding: 0 0 16px;
}
.hp-marquee {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hp-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: hp-marquee-scroll 60s linear infinite;
}
.hp-marquee-track:hover {
  animation-play-state: paused;
}
.hp-marquee-track .hp-review-card {
  flex-shrink: 0;
  width: 340px;
}
@keyframes hp-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Blog cards */
.hp-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hp-blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  text-decoration: none;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}
.hp-blog-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.hp-blog-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-dim);
  padding: 4px 10px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 16px;
  width: fit-content;
}
.hp-blog-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.hp-blog-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}
.hp-blog-link {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 16px;
}

/* --- Homepage responsive --- */
@media (max-width: 900px) {
  .hp-services-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-usp-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-machines-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-reviews-grid { grid-template-columns: 1fr; }
  .hp-blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hp-services-grid { grid-template-columns: 1fr; }
  .hp-usp-grid { grid-template-columns: 1fr; gap: 16px; }
  .hp-machines-grid { grid-template-columns: 1fr; }
  .hp-marquee-track .hp-review-card { width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-marquee-track { animation: none; }
}


/* ==========================================================
   63. DESIGN SYSTEM CLEANUP (K1–K4, W1–W5, P1–P7)
   ==========================================================
   Zbiorczy patch konsolidujący braki w systemie projektowym.
   Append-only — stare definicje NIE są usuwane, ten blok
   nadpisuje je przez kaskadę (later-wins).

   Mapowanie:
   K1 — --blue-dk* tokens       → sekcja 1 (:root)
   K2 — blue-dk component variants (label/badge/btn/hub/tag)
   K3 — hub card hover scoped --hub-accent (nie locked blue)
   K4 — .td-text-blue-dk 135° → 120° (normalizacja)
   +WCAG — amber/fuchsia stop-y przyciemnione do AA-large
   W1 — .td-text-green/red/purple
   W2 — patrz komentarz (odroczone, scope za duży)
   W3 — patrz komentarz (aliasy intencjonalne)
   W4 — FAQ pills przeniesione na design tokens
   W5 — --fuchsia* tokens przeniesione z sekcji 51 do głównego
        :root (sekcja 1) — "jeden blok tokenów"; sekcja 51
        zostawiona tylko z component variants
   P1 — .td-text-navy
   P2 — --sticky-cta-min token (sekcja 1)
   P3 — patrz komentarz (breakpointy odroczone)
   P4 — FAQ accordion max-height 800 → 3000
   P5 — .td-h2 typography scale
   P6 — prefers-reduced-motion
   P7 — --transition-* tokens (sekcja 1)
   ========================================================== */


/* --- K2: Blue-dk component variants ----------------------
   Symetryczne do fuchsia (sekcja 51). Wymagają tokenów
   --blue-dk / --blue-dk-dim dodanych w sekcji 1.
   ---------------------------------------------------------- */
.td-label--blue-dk { color: var(--blue-dk); }
.td-label--blue-dk::before { background: var(--blue-dk); }

.td-badge--blue-dk { background: var(--blue-dk-dim); color: var(--blue-dk); }
.td-lp-hero-card-header .td-badge--blue-dk { color: var(--blue-dk); }

.td-spec-block-tag--blue-dk { color: var(--blue-dk); }

.td-hub-card--blue-dk::before { background: var(--blue-dk); }

.td-btn-blue-dk {
  background: var(--blue-dk);
  color: #fff;
  border: none;
}
.td-btn-blue-dk:hover {
  background: #16329C;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 63, 194, 0.25);
}

.td-float-tag__dot--blue-dk { background: var(--blue-dk); }


/* --- K3: Hub card hover color (was locked to --blue) -----
   Scoped custom prop: każdy wariant ustawia --hub-accent,
   :hover używa tego propa zamiast hardcoded var(--blue).
   Nadpisuje regułę z linii 1793–1797.
   ---------------------------------------------------------- */
.td-hub-card {
  --hub-accent: var(--blue);
  --hub-accent-dim: var(--blue-dim);
}
.td-hub-card--amber   { --hub-accent: var(--amber);   --hub-accent-dim: var(--amber-dim); }
.td-hub-card--green   { --hub-accent: var(--green);   --hub-accent-dim: var(--green-dim); }
.td-hub-card--red     { --hub-accent: var(--red);     --hub-accent-dim: var(--red-dim); }
.td-hub-card--purple  { --hub-accent: var(--purple);  --hub-accent-dim: var(--purple-dim); }
.td-hub-card--blue-dk { --hub-accent: var(--blue-dk); --hub-accent-dim: var(--blue-dk-dim); }
.td-hub-card--fuchsia { --hub-accent: var(--fuchsia); --hub-accent-dim: var(--fuchsia-dim); }
.td-hub-card--navy    { --hub-accent: var(--navy);    --hub-accent-dim: rgba(15, 23, 42, 0.07); }
.td-hub-card:hover {
  border-color: var(--hub-accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--hub-accent-dim);
}


/* --- K4 + WCAG: Gradient text helpers --------------------
   Normalizacja kąta do 120° + przyciemnienie jasnych stop-ów
   do WCAG AA-large (≥ 3.0 kontrastu na #FFFFFF).

   Kontrast (worst stop na #FFFFFF):
     .td-text-amber    #92400E → #D97706  = 3.19  AA-large
     .td-text-blue     #1D4ED8 → #2563EB  = 5.17  AA
     .td-text-blue-dk  #1E3FC2 → #2858D4  = 5.90  AA
     .td-text-fuchsia  #4C1D95 → #6D28D9  = 9.68  AA

   Poprzednie wartości (sekcja 20, 33, 51) miały worst stop
   2.07 (amber) / 2.38 (fuchsia) — FAIL WCAG AA-large.
   W6 — fuchsia zmieniona na dark-violet (#6D28D9).
   ---------------------------------------------------------- */
.td-text-amber {
  background: linear-gradient(120deg, #92400E 0%, #D97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-text-blue {
  background: linear-gradient(120deg, #1D4ED8 0%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-text-blue-dk {
  background: linear-gradient(120deg, #1E3FC2 0%, #2858D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-text-fuchsia {
  background: linear-gradient(120deg, #4C1D95 0%, #6D28D9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* --- W1 + P1: Brakujące gradient text helpers ------------
   Uzupełnienie wariantów: green / red / purple / navy.
   Zgodne z kodowaniem segmentów (naklejki produktowe = green,
   przemysłowe = red, witryny = purple, navy = neutral dark).
   ---------------------------------------------------------- */
.td-text-green {
  background: linear-gradient(120deg, #047857 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-text-red {
  background: linear-gradient(120deg, #B91C1C 0%, #DC2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-text-purple {
  background: linear-gradient(120deg, #6D28D9 0%, #7C3AED 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.td-text-navy {
  background: linear-gradient(120deg, #0F172A 0%, #1E293B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* --- W4: FAQ page pills — replace off-brand colors -------
   Stare pilki (sekcja 55a, linie 2841–2844) używały własnej
   palety (#e8f0fe / #1a56db / #fdf3e8 / #b45309 / #ecfdf5 /
   #0d7a5f / #f0f4ff / #4338ca). Override na design tokens.
   ---------------------------------------------------------- */
.td-faq-pill--spec {
  background: var(--blue-light);
  color: var(--blue);
  border-color: rgba(37, 99, 235, 0.25);
}
.td-faq-pill--color {
  background: var(--amber-light);
  color: var(--amber);
  border-color: rgba(217, 119, 6, 0.25);
}
.td-faq-pill--sticker {
  background: var(--green-light);
  color: var(--green);
  border-color: rgba(5, 150, 105, 0.25);
}
.td-faq-pill--cad {
  background: var(--purple-light);
  color: var(--purple);
  border-color: rgba(124, 58, 237, 0.25);
}


/* --- P4: FAQ accordion arbitrary max-height --------------
   max-height: 800px kapował długie odpowiedzi. Zwiększone
   do 3000px jako bezpieczny zapas (działa dla wszystkich
   aktualnych wpisów FAQ w projekcie).
   Nadpisuje regułę z linii 891–894.
   ---------------------------------------------------------- */
.td-faq-item.open .td-faq-a {
  max-height: 3000px;
}


/* --- P5: H2 typography scale -----------------------------
   Standaryzacja H2 wewnątrz sekcji — większość miejsc nie
   definiuje własnego rozmiaru H2. `.td-h2` = nowy default.
   Istniejące sekcje (hero, hub, cards) pozostają nienaruszone.
   ---------------------------------------------------------- */
.td-h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 16px;
}


/* --- P6: prefers-reduced-motion (a11y) -------------------
   Użytkownicy z włączonym "Reduce motion" dostają natychmiast
   sfinalizowane stany — brak transformów hover, animacji
   blueprint, scroll-smooth.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .td-card:hover,
  .td-hub-card:hover,
  .td-btn:hover,
  .td-effect-tile:hover,
  .td-faq-pill:hover {
    transform: none !important;
  }
}


/* --- W2 / W3 / P3: Notatki architektoniczne --------------
   W2 (137 hardcoded hex colors): odroczone do iteracyjnego
       refaktoru przy kolejnych edycjach — scope za duży,
       ryzyko regresji przy jednym patchu.
   W3 (duplicate root aliases --surface/--text-1/--blueprint-
       line/--accent w sekcji 1): INTENCJONALNE, zostawione.
       Sekcja 55 (FAQ page) używa tych nazw z drugiej palety;
       aliasy mapują je na kanoniczne tokeny.
   P3 (breakpointy 600/900/1280 ad-hoc w @media): CSS vars
       nie działają w media queries. Standaryzacja wymaga
       PostCSS albo ręcznego przeglądu — odroczone.
   ========================================================== */


/* ==========================================================
   64. INDUSTRY CARD PHOTO HEADER (np-03 — Pattern A)
   ==========================================================
   Zdjęcie 180px jako nagłówek karty .td-ind-card z ikoną emoji
   wystającą na dolną krawędź zdjęcia (margin-top: -36px).
   Aktywacja per karta przez :has() — karty bez .td-ind-card-photo
   zachowują domyślny wygląd.

   Struktura:
   <div class="td-ind-card">
     <div class="td-ind-card-photo" style="background-image:url(...);"></div>
     <div class="td-ind-card-body">
       <div class="td-ind-icon">🧴</div>
       <h3>...</h3>
       <p>...</p>
       <div class="td-ind-example">...</div>
     </div>
   </div>
   ========================================================== */
.td-ind-card:has(.td-ind-card-photo) {
  padding: 0;
  overflow: hidden;
}
.td-ind-card-photo {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--border);
  position: relative;
}
.td-ind-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.15));
}
.td-ind-card-body {
  padding: 0 24px 28px;
}
.td-ind-card:has(.td-ind-card-photo) .td-ind-icon {
  margin-top: -36px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 3px solid var(--white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

@media (max-width: 900px) {
  .td-ind-card-photo { height: 160px; }
}
@media (max-width: 600px) {
  .td-ind-card-photo { height: 180px; }
  .td-ind-card-body { padding: 0 22px 24px; }
}


/* ==========================================================
   65. BUTTON :hover/:focus/:active/:visited COLOR FIX
   ==========================================================
   PROBLEM: GeneratePress theme dorzuca inline regułę
     a:hover, a:focus, a:active { color: var(--accent); }
   gdzie GP --accent = #2563EB (ten sam kolor co nasze --blue,
   czyli tło .td-btn-primary). Specyficzność GP = (0,1,1),
   nasza .td-btn-primary = (0,1,0) → GP wygrywa po kliknięciu.

   EFEKT: user klika w CTA button → anchor dostaje :focus →
   GP ustawia color: #2563EB → tekst (niebieski) znika na
   niebieskim tle buttona aż do kliknięcia gdzie indziej.

   FIX: jawne selektory :hover/:focus/:active/:visited dla
   każdego wariantu — specyficzność (0,2,0) > GP (0,1,1).
   Dodatkowo override :focus outline dla accessibility.
   ========================================================== */
.td-btn-primary,
.td-btn-primary:hover,
.td-btn-primary:focus,
.td-btn-primary:active,
.td-btn-primary:visited {
  color: #fff;
}
.td-btn-amber,
.td-btn-amber:hover,
.td-btn-amber:focus,
.td-btn-amber:active,
.td-btn-amber:visited {
  color: #fff;
}
.td-btn-fuchsia,
.td-btn-fuchsia:hover,
.td-btn-fuchsia:focus,
.td-btn-fuchsia:active,
.td-btn-fuchsia:visited {
  color: #fff;
}
.td-btn-blue-dk,
.td-btn-blue-dk:hover,
.td-btn-blue-dk:focus,
.td-btn-blue-dk:active,
.td-btn-blue-dk:visited {
  color: #fff;
}
.td-btn-ghost,
.td-btn-ghost:hover,
.td-btn-ghost:focus,
.td-btn-ghost:active,
.td-btn-ghost:visited {
  color: var(--text);
}
/* Ghost button w sekcji CTA navy = biały (dziedziczy z .td-cta-navy) */
.td-cta-navy .td-btn-ghost,
.td-cta-navy .td-btn-ghost:hover,
.td-cta-navy .td-btn-ghost:focus,
.td-cta-navy .td-btn-ghost:active,
.td-cta-navy .td-btn-ghost:visited {
  color: #fff;
}
/* Focus-visible outline — dla klawiaturowej nawigacji */
.td-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}


/* ==========================================================
   66. DELIVERY SECTION — "forma dostawy / aplikacja ręczna"
   ==========================================================
   Kompaktowa ale pełnoprawna sekcja spójna z resztą strony
   (section-head + 2 karty + nota pod spodem). Sygnalizuje
   arkuszową dostawę i aplikację ręczną — ma odfiltrować
   klientów szukających naklejek na rolkach do automatyki.
   Użycie: td-section td-section--compact + .td-delivery-wrap
   ========================================================== */
.td-section--compact {
  padding: 56px 0;
}
@media (max-width: 900px) {
  .td-section--compact { padding: 40px 0; }
}
.td-delivery-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.td-delivery-head {
  text-align: center;
  margin-bottom: 24px;
}
.td-delivery-head .td-label {
  margin: 0 auto 10px;
}
.td-delivery-head h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.td-delivery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.td-delivery-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s ease, transform .15s ease;
}
.td-section--white .td-delivery-card {
  background: var(--bg);
}
.td-delivery-card:hover {
  border-color: var(--navy);
  transform: translateY(-1px);
}
.td-delivery-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border-radius: 10px;
  color: #fff;
}
.td-delivery-card-icon svg {
  width: 28px;
  height: 28px;
}
.td-delivery-card-body {
  min-width: 0;
}
.td-delivery-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 3px;
}
.td-delivery-card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}
.td-delivery-note {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  margin: 22px auto 0;
  max-width: 680px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .td-delivery-grid {
    grid-template-columns: 1fr;
  }
  .td-delivery-head h3 { font-size: 20px; }
  .td-delivery-card { padding: 14px 16px; gap: 14px; }
  .td-delivery-card-icon { width: 42px; height: 42px; }
  .td-delivery-card-icon svg { width: 24px; height: 24px; }
}


/* ══════════════════════════════════════════════════════════
   ③ HEADER / NAVIGATION (v17)
   ══════════════════════════════════════════════════════════ */

/* ==========================================================
   td-header.css — Standalone Header CSS
   technikadruku.pl — Technical Precision
   Niezależny od td-global.css — wszystkie wartości hardcoded
   v17 — tight indicator box, chevron rotates around own center
   ========================================================== */


/* ==========================================================
   DESKTOP (#masthead)
   ========================================================== */

#masthead {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 999;
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 1px solid #E2E5ED !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s;
}

#masthead.td-header-scrolled,
#mobile-header.td-header-scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

body {
  padding-top: 60px !important;
}

.admin-bar #masthead,
.admin-bar #mobile-header {
  top: 32px;
}
.admin-bar body {
  padding-top: 92px !important;
}

.inside-header {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
}


/* --- Logo (desktop only) --- */

@media (min-width: 901px) {
  .site-logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-right: 8px;
  }
  .site-logo a {
    display: flex !important;
    align-items: center !important;
  }
  .site-logo img,
  .site-logo svg {
    max-height: 28px;
    width: auto;
    display: block;
  }
}


/* --- Navigation (MMM desktop) --- */

#mega-menu-wrap-primary {
  background: transparent !important;
  clear: none !important;
}
@media (min-width: 901px) {
  #mega-menu-wrap-primary {
    flex: 1 !important;
    width: 100% !important;
  }
}

@media (min-width: 901px) {
  #mega-menu-wrap-primary #mega-menu-primary {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    width: 100%;
  }
}

#mega-menu-wrap-primary .mega-menu-toggle,
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
  background: transparent !important;
}


/* --- Nav links --- */

#mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4B5563 !important;
  padding: 0 16px !important;
  height: 60px !important;
  line-height: 60px !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
  color: #2563EB !important;
  background: transparent !important;
}

#mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  color: #2563EB !important;
  font-weight: 600 !important;
}

/* Center menu items: auto margin on first item + auto margin on phone */
@media (min-width: 901px) {
  #mega-menu-primary > li.mega-menu-item:first-child {
    margin-left: auto !important;
  }

  /* Desktop indicator: tight inline-flex box so rotation
     pivots around chevron center, not the 60px line */
  #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
  }
  #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link > span.mega-indicator,
  #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: rotate(180deg) !important;
  }
}


/* --- Arrow indicator — CSS chevron replaces dashicons glyph ---
     Only overrides ::after content + font-family.
     The chevron sits inside a tight 16×16 span (desktop)
     or padded float-right span (mobile).
     Rotation is always on the SPAN — chevron rides along.
     ------------------------------------------------------------------- */

#mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator::after {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin-top: -2px !important;
  font-family: initial !important;
}


/* --- Phone (desktop) --- */

#mega-menu-primary > li.mega-menu-item.td-nav-phone {
  margin-left: auto !important;
}
#mega-menu-primary > li.mega-menu-item.td-nav-phone > a.mega-menu-link {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  letter-spacing: 0.02em !important;
  padding: 0 14px !important;
}
#mega-menu-primary > li.mega-menu-item.td-nav-phone > a.mega-menu-link:hover {
  color: #2563EB !important;
}


/* --- CTA button --- */

#mega-menu-primary > li.mega-menu-item.td-nav-cta {
  margin-left: 8px;
}
#mega-menu-primary > li.mega-menu-item.td-nav-cta > a.mega-menu-link {
  background: #2563EB !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 9px 20px !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: all 0.2s !important;
}
#mega-menu-primary > li.mega-menu-item.td-nav-cta > a.mega-menu-link:hover {
  background: #1D4ED8 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(37,99,235,0.15) !important;
}


/* --- Dropdown (flyout, desktop) --- */

#mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
  background: #FFFFFF !important;
  border: 1px solid #E2E5ED !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
  padding: 8px !important;
  margin-top: 0 !important;
}
#mega-menu-primary ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #4B5563 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  line-height: 1.4 !important;
  height: auto !important;
}
#mega-menu-primary ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
  background: #FAFBFC !important;
  color: #111827 !important;
}

/* --- Menu item descriptions (global) --- */
#mega-menu-primary a.mega-menu-link .mega-description-group .mega-menu-description {
  font-style: normal !important;
  font-size: 12px !important;
  color: #9CA3AF !important;
  font-weight: 400 !important;
  display: block !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}


/* --- Hide GP defaults --- */

.menu-toggle,
.main-navigation .menu-toggle {
  display: none !important;
}
.site-header {
  border-bottom: none !important;
  box-shadow: none !important;
}
#site-navigation,
#site-navigation .inside-navigation {
  background: transparent !important;
}
#site-navigation {
  flex: 1 !important;
  width: auto !important;
}
#site-navigation .inside-navigation.grid-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   MOBILE (< 900px)
   ========================================================== */

@media (max-width: 900px) {

  /* --- Hide ALL headers + MMM on mobile — bottom nav takes over navigation --- */
  #mobile-header,
  #masthead,
  #mega-menu-wrap-primary {
    display: none !important;
  }

  body {
    padding-top: 0 !important;
  }
  .admin-bar body {
    padding-top: 32px !important;
  }


  /* --- Toggle bar --- */
  #mega-menu-wrap-primary .mega-menu-toggle {
    background: transparent !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block {
    height: auto !important;
  }

  /* Hamburger lines — animated type (block-0) */
  .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
  .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
  .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    background: #111827 !important;
    height: 2px !important;
    border-radius: 1px !important;
  }

  /* Hide dashicons square on toggle button (MMM inline CSS adds it) */
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 button.mega-toggle-standard::after {
    display: none !important;
  }

  /* Hamburger icon — standard type (block-1, replaces dashicons) */
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1::after {
    content: '' !important;
    font-family: initial !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #111827 !important;
    border-radius: 1px !important;
    box-shadow:
      0 -6px 0 #111827,
      0  6px 0 #111827 !important;
    font-size: 0 !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
  }

  /* X icon — standard type open state */
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-1::after {
    content: '' !important;
    font-family: initial !important;
    width: 20px !important;
    height: 2px !important;
    background: #111827 !important;
    box-shadow: none !important;
    transform: rotate(45deg) !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-1::before {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #111827 !important;
    border-radius: 1px !important;
    transform: rotate(-45deg) !important;
    position: absolute !important;
  }


  /* --- Mobile menu PANEL: white bg --- */
  #mega-menu-wrap-primary #mega-menu-primary {
    background: #FFFFFF !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
    padding: 16px 0 12px !important;
    border-top: 1px solid #E2E5ED !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    background: transparent !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
    background: transparent !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    background: #FFFFFF !important;
  }


  /* --- Mobile menu items --- */
  #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-family: 'Instrument Sans', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 28px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(226,229,237,0.5) !important;
    background: transparent !important;
  }
  #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover {
    color: #111827 !important;
    background: rgba(255,255,255,0.5) !important;
  }


  /* --- Phone in mobile menu --- */
  #mega-menu-primary > li.mega-menu-item.td-nav-phone {
    margin-left: 0 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(226,229,237,0.5) !important;
  }
  #mega-menu-primary > li.mega-menu-item.td-nav-phone > a.mega-menu-link {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    text-align: left !important;
    padding: 14px 28px !important;
    border-bottom: none !important;
    letter-spacing: 0.02em !important;
  }


  /* --- CTA in mobile menu --- */
  #mega-menu-primary > li.mega-menu-item.td-nav-cta {
    margin: 12px 24px 8px !important;
  }
  #mega-menu-primary > li.mega-menu-item.td-nav-cta > a.mega-menu-link {
    background: #2563EB !important;
    color: #fff !important;
    display: block !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-family: 'Instrument Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border-bottom: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  }
  #mega-menu-primary > li.mega-menu-item.td-nav-cta > a.mega-menu-link:hover {
    background: #1D4ED8 !important;
  }


  /* --- Mobile submenu items --- */
  #mega-menu-primary ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    font-size: 15px !important;
    padding: 12px 28px 12px 44px !important;
    text-align: left !important;
    color: #6B7280 !important;
    background: transparent !important;
  }

  /* --- Expanded parent item: blue border --- */
  #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    border: 2px solid #2563EB !important;
    border-radius: 12px !important;
    border-bottom: 2px solid #2563EB !important;
    margin: 4px 16px !important;
    padding: 12px 16px !important;
    position: relative !important;
  }

  /* --- Arrow indicator for items with sub-menus (mobile) ---
       Tight flex box + padding for tap target.
       Symmetric padding = rotation pivots around chevron center. */
  #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: right !important;
    width: 40px !important;
    height: 40px !important;
    margin: -10px -14px -10px 0 !important;
    color: #9CA3AF !important;
    transition: transform 0.2s !important;
  }
  #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: rotate(180deg) !important;
    color: #2563EB !important;
  }

  /* --- Sub-menu panel styling --- */
  #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 8px !important;
  }
}


/* Hide mobile phone icon on desktop */
@media (min-width: 901px) {
  .td-header-phone-mobile {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════
   ④ FOOTER
   ══════════════════════════════════════════════════════════ */

/**
 * technikadruku.pl — Footer CSS
 * Niezależny plik CSS dla stopki
 * Plik: public_html/wp-content/uploads/td-footer.css
 *
 * Zależności: td-global.css (zmienne CSS: --navy, --blue, --sans, --mono)
 */

/* ----------------------------------------------------------
   FOOTER GŁÓWNY — td-footer
   ---------------------------------------------------------- */

/* === Wrapper === */
.td-footer {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  line-height: 1.6;
}

/* Blueprint grid overlay */
.td-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.td-footer > .td-container {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  padding-bottom: 40px;
}

/* =========================================================
   ① Densitometer Strip
   Pasek imitujący odczyt spektrofotometru X-Rite.
   Pola pomiarowe 5%–100% dla 4 kanałów CMYK + readout ΔE/Lab/ICC.
   ========================================================= */
.td-footer-densito {
  position: relative;
  z-index: 2;
  background: rgba(5,12,30,0.97);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.td-footer-densito-channels {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.td-footer-densito-label {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.08em;
  white-space: nowrap;
  margin-right: 5px;
  flex-shrink: 0;
  min-width: 12px;
  text-align: right;
}

.td-footer-densito-group {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.td-footer-densito-patch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.td-footer-densito-swatch {
  width: 100%;
  height: 10px;
  border-radius: 1px;
}

.td-footer-densito-val {
  font-family: var(--mono);
  font-size: 6.5px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}

.td-footer-densito-sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.06);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Swatch colors — Cyan */
.td-footer-densito-c5   { background: rgba(0,174,239,0.10); }
.td-footer-densito-c15  { background: rgba(0,174,239,0.25); }
.td-footer-densito-c30  { background: rgba(0,174,239,0.40); }
.td-footer-densito-c50  { background: rgba(0,174,239,0.60); }
.td-footer-densito-c75  { background: rgba(0,174,239,0.80); }
.td-footer-densito-c100 { background: rgba(0,174,239,1.0); }

/* Swatch colors — Magenta */
.td-footer-densito-m5   { background: rgba(236,0,140,0.10); }
.td-footer-densito-m15  { background: rgba(236,0,140,0.25); }
.td-footer-densito-m30  { background: rgba(236,0,140,0.40); }
.td-footer-densito-m50  { background: rgba(236,0,140,0.60); }
.td-footer-densito-m75  { background: rgba(236,0,140,0.80); }
.td-footer-densito-m100 { background: rgba(236,0,140,1.0); }

/* Swatch colors — Yellow */
.td-footer-densito-y5   { background: rgba(255,242,0,0.10); }
.td-footer-densito-y15  { background: rgba(255,242,0,0.25); }
.td-footer-densito-y30  { background: rgba(255,242,0,0.40); }
.td-footer-densito-y50  { background: rgba(255,242,0,0.60); }
.td-footer-densito-y75  { background: rgba(255,242,0,0.80); }
.td-footer-densito-y100 { background: rgba(255,242,0,1.0); }

/* Swatch colors — Black (shown as white on dark bg) */
.td-footer-densito-k5   { background: rgba(255,255,255,0.04); }
.td-footer-densito-k15  { background: rgba(255,255,255,0.12); }
.td-footer-densito-k30  { background: rgba(255,255,255,0.25); }
.td-footer-densito-k50  { background: rgba(255,255,255,0.45); }
.td-footer-densito-k75  { background: rgba(255,255,255,0.65); }
.td-footer-densito-k100 { background: rgba(255,255,255,0.85); }

/* Readout panel — ΔE / Lab / ICC */
.td-footer-densito-readout {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.06);
}

.td-footer-densito-ro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.td-footer-densito-ro-label {
  font-family: var(--mono);
  font-size: 6px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}

.td-footer-densito-ro-val {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  line-height: 1.2;
}

.td-footer-densito-ro-ok { color: rgba(34,197,94,0.6); }
.td-footer-densito-ro-sm { font-size: 7px; }

/* === ② Registration crosshairs === */
.td-footer-reg {
  position: absolute;
  z-index: 2;
  opacity: 0.4;
  pointer-events: none;
}
.td-footer-reg--tl { top: 36px; left: 20px; }
.td-footer-reg--tr { top: 36px; right: 20px; }

/* === ③ Main grid === */
.td-footer-grid {
  display: grid;
  grid-template-columns: 280px 1fr 1fr 220px;
  gap: 56px;
  padding-bottom: 48px;
}

/* --- Brand column --- */
.td-footer-brand { display: flex; flex-direction: column; gap: 20px; }

.td-footer-logo {
  display: inline-block;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: opacity 0.2s;
}
.td-footer-logo:hover { opacity: 0.8; }

.td-footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.7;
}
.td-footer-tagline strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* Stats strip */
.td-footer-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.td-footer-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.td-footer-stat-num {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.td-footer-stat-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--blue);
  margin-left: 1px;
}
.td-footer-stat-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.td-footer-stat-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
}

/* GPS coords */
.td-footer-coords {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.3);
}
.td-footer-coords svg { flex-shrink: 0; opacity: 0.5; }
.td-footer-coords code {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  background: none;
  padding: 0;
}

/* Profile strip */
.td-footer-profile {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.22);
}

/* --- Nav columns --- */
.td-footer-col { display: flex; flex-direction: column; gap: 0; }

.td-footer-col-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.td-footer-col-icon {
  font-size: 8px;
  color: var(--blue);
  opacity: 0.7;
}

.td-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.td-footer-links li { border-bottom: 1px solid rgba(255,255,255,0.04); }
.td-footer-links li:first-child { border-top: 1px solid rgba(255,255,255,0.04); }

.td-footer-links a {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: color 0.2s, padding-left 0.2s;
}
.td-footer-links a:hover {
  color: #fff;
  padding-left: 8px;
}
.td-footer-link-arrow {
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s, left 0.2s;
}
.td-footer-links a:hover .td-footer-link-arrow {
  opacity: 1;
  left: -6px;
}
.td-footer-link-note {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  margin-top: 1px;
}

/* --- Contact column --- */
.td-footer-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-style: normal;
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.td-footer-address-icon {
  margin-top: 3px;
  opacity: 0.4;
  flex-shrink: 0;
}

.td-footer-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  transition: color 0.2s;
}
.td-footer-phone:hover { color: var(--blue); }
.td-footer-phone svg { opacity: 0.5; }

.td-footer-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: gap 0.2s, color 0.2s;
}
.td-footer-cta-link:hover { gap: 10px; color: #60a5fa; }

/* === ④ Ruler divider === */
.td-footer-ruler { margin-bottom: 24px; }
.td-footer-ruler-line {
  position: relative;
  height: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.td-footer-ruler-ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.12) 0px,
    rgba(255,255,255,0.12) 1px,
    transparent 1px,
    transparent 20px
  );
}
.td-footer-ruler-ticks::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.22) 0px,
    rgba(255,255,255,0.22) 1px,
    transparent 1px,
    transparent 100px
  );
}

/* === ⑤ Bottom bar === */
.td-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.td-footer-copyright {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.td-footer-nip {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
}
.td-footer-legal {
  display: flex;
  gap: 20px;
}
.td-footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  transition: color 0.2s;
}
.td-footer-legal a:hover { color: rgba(255,255,255,0.65); }

/* === ⑥ Payment bar === */
.td-footer-payment {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 20px 0 0;
  margin-top: 24px;
}
.td-footer-payment-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.td-footer-payment-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.td-footer-payment-img {
  height: 48px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s;
}
.td-footer-payment:hover .td-footer-payment-img {
  opacity: 1;
}

/* === ⑦ Cookie notice === */
.td-footer-cookie {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 10px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.td-footer-cookie a {
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.td-footer-cookie a:hover { color: rgba(255,255,255,0.75); }

/* === Responsive === */
@media (max-width: 1100px) {
  .td-footer-grid {
    grid-template-columns: 240px 1fr 1fr;
    gap: 40px;
  }
  .td-footer-contact-col {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0 32px;
    align-items: start;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 32px;
  }
  .td-footer-col-title { margin-bottom: 12px; }
}

@media (max-width: 900px) {
  .td-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .td-footer-brand { grid-column: 1 / -1; }
  .td-footer-contact-col {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
  .td-footer-stats { justify-content: flex-start; }
  .td-footer-densito-readout { display: none; }
  .td-footer-densito { padding: 8px 16px; }
  .td-footer-densito-sep { margin: 0 5px; }
}

@media (max-width: 600px) {
  .td-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .td-footer-brand { grid-column: 1 / -1; }
  .td-footer-contact-col { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .td-footer-reg { display: none; }
  .td-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .td-footer-stats { gap: 0; }
  .td-footer-logo { font-size: 20px; }
  .td-footer-densito { display: none; }
  .td-footer-payment-inner { flex-direction: column; gap: 10px; }
  .td-footer-payment-img { height: 36px; }
  .td-footer-cookie { max-width: 100%; }
}


/* ==========================================================
   67. Navy CTA — mobile overrides
   ========================================================== */
@media (max-width: 600px) {
  .td-cta-navy { padding: 48px 0; }
  .td-cta-navy h2 { font-size: 24px; }
  .td-cta-specs { flex-direction: column; gap: 16px; }
}

/* ==========================================================
   68. FAQ — focus-visible for keyboard navigation
   ========================================================== */
.td-faq-q:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================
   70. BOTTOM NAV — mobile app-like navigation bar
   ==========================================================
   Replaces td-sticky-cta + mobile header on ≤900px.
   Always visible. 4 actions: Zadzwoń, Napisz, Wyceń, Menu.
   ---------------------------------------------------------- */

/* Hide old sticky CTA — bottom nav supersedes it */
.td-sticky-cta { display: none !important; }

.td-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
  padding: 6px 0;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px) {
  .td-bottom-nav { display: flex; }
  body { padding-bottom: 72px; }
  .generate-back-to-top { bottom: 80px !important; }
}
.td-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.td-bottom-nav-item:hover {
  color: var(--blue);
  background: none;
}
.td-bottom-nav-item:active,
.td-bottom-nav-item:focus,
.td-bottom-nav-item:focus-visible {
  outline: none;
  background: none;
  color: var(--text-2);
}
.td-bottom-nav-item * {
  -webkit-tap-highlight-color: transparent;
}
.td-bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.td-bottom-nav-item--primary {
  font-weight: 600;
}
/* (removed: MMM no longer used on mobile — bottom nav has own menu overlay) */

/* ==========================================================
   71. BOTTOM SHEET — quick contact overlay
   ==========================================================
   Opens from "Napisz" in bottom nav. Slide-up sheet with
   contact options: phone, email, WhatsApp, form, navigate.
   ---------------------------------------------------------- */
.td-bs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.td-bs-overlay.is-open {
  display: block;
  opacity: 1;
}
.td-bottom-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 85vh;
  overflow-y: auto;
}
.td-bottom-sheet.is-open {
  display: block;
  transform: translateY(0);
}
.td-bs-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.td-bs-title {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}
.td-bs-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--sans);
  text-align: left;
}
.td-bs-item:hover,
.td-bs-item:active {
  background: var(--bg);
}
.td-bs-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.td-bs-item-icon svg {
  width: 20px;
  height: 20px;
}
.td-bs-item-icon--phone { background: rgba(5,150,105,0.08); color: var(--green); }
.td-bs-item-icon--phone svg { stroke: var(--green); }
.td-bs-item-icon--email { background: rgba(37,99,235,0.08); color: var(--blue); }
.td-bs-item-icon--email svg { stroke: var(--blue); }
.td-bs-item-icon--whatsapp { background: rgba(37,99,235,0.08); }
.td-bs-item-icon--whatsapp svg { stroke: #25D366; }
.td-bs-item-icon--form { background: rgba(217,119,6,0.08); }
.td-bs-item-icon--form svg { stroke: var(--amber); }
.td-bs-item-icon--map { background: rgba(220,38,38,0.08); }
.td-bs-item-icon--map svg { stroke: var(--red); }
.td-bs-item-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.td-bs-item-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.3;
  margin-top: 1px;
}
.td-bs-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 12px;
}
/* Desktop: never show bottom sheet or bottom nav */
@media (min-width: 901px) {
  .td-bottom-nav,
  .td-bs-overlay,
  .td-bottom-sheet { display: none !important; }
  /* Restore old sticky CTA on desktop — it was never shown there anyway */
}

/* ==========================================================
   69. INLINE CTA — mid-page conversion prompt (mobile-first)
   ==========================================================
   Placed after pricing+specs on long spoke pages.
   Gives users a shortcut to #wycena without scrolling
   through gallery/FAQ/CTA navy sections.
   ---------------------------------------------------------- */
.td-inline-cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--blue-dim, rgba(37,99,235,0.06));
  border: 1px solid rgba(37,99,235,0.12);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 32px;
  text-align: center;
}
.td-inline-cta p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.td-inline-cta .td-btn {
  white-space: nowrap;
  padding: 10px 20px;
  font-size: 14px;
}
@media (max-width: 900px) {
  .td-inline-cta {
    display: flex;
  }
}
@media (max-width: 600px) {
  .td-inline-cta {
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
  }
  .td-inline-cta .td-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================
   72. MOBILE MENU OVERLAY — full-screen nav from bottom nav
   ==========================================================
   Replaces MMM mobile hamburger. Triggered by "Menu" button
   in td-bottom-nav. Full-screen navy overlay with nav links.
   ---------------------------------------------------------- */
.td-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  background: #0F172A;
  color: #FFFFFF;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.td-menu-overlay.is-open {
  display: flex !important;
}
.td-menu-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.td-menu-overlay-logo {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1;
}
.td-menu-overlay-logo:hover { opacity: 0.8; }
.td-menu-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  border-radius: 10px;
  cursor: pointer;
  color: #FFFFFF !important;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.td-menu-overlay-close:hover {
  background: rgba(255,255,255,0.2) !important;
}
.td-menu-overlay-close svg {
  width: 20px;
  height: 20px;
  stroke: #FFFFFF !important;
  stroke-width: 2;
}
.td-menu-overlay-nav {
  flex: 1;
  padding: 12px 0;
}
.td-menu-overlay-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  padding: 20px 24px 8px;
}
.td-menu-overlay-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.td-menu-overlay-link:hover,
.td-menu-overlay-link:active {
  color: #FFFFFF;
  background: rgba(255,255,255,0.06);
}
.td-menu-overlay-link svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  flex-shrink: 0;
  opacity: 0.5;
}
.td-menu-overlay-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 8px 24px;
}
.td-menu-overlay-footer {
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,0.08);
}
.td-menu-overlay-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: var(--blue);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.td-menu-overlay-cta:hover {
  background: #1d4ed8;
}
.td-menu-overlay-cta svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Menu overlay — expandable groups */
.td-menu-overlay-group {
  display: flex;
  align-items: center;
}
.td-menu-overlay-group .td-menu-overlay-link {
  flex: 1;
  min-width: 0;
}
.td-menu-overlay-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.td-menu-overlay-arrow:hover,
.td-menu-overlay-arrow:active {
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
}
.td-menu-overlay-chevron {
  width: 18px;
  height: 18px;
  opacity: 0.4;
  transition: transform 0.25s;
  flex-shrink: 0;
}
.td-menu-overlay-arrow.is-expanded .td-menu-overlay-chevron {
  transform: rotate(180deg);
}
.td-menu-overlay-sub {
  display: none;
  padding: 0 0 4px;
}
.td-menu-overlay-sub.is-open {
  display: block;
}
.td-menu-overlay-sub a {
  display: block;
  padding: 10px 24px 10px 58px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.td-menu-overlay-sub a:hover,
.td-menu-overlay-sub a:active {
  color: #FFFFFF;
  background: rgba(255,255,255,0.06);
}