@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonty/FiraCode-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonty/FiraCode-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonty/Onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonty/Onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   NetGonet — Core Design Tokens
   Source: Księga Znaku (XEON Media, 2025) + brand PDF
   ========================================================================== */



:root {
  /* ---------- Core palette (brand book) ---------- */
  /* Podstawowa (primary) */
  --ng-black-primary:  #121417;   /* Near-black — primary surface/ink */
  --ng-white-primary:  #F5F5F5;   /* Off-white — primary light surface */
  --ng-brand-primary:  #60ABFB;   /* Stormcloud blue — signature accent */

  /* Uzupełniająca (secondary) */
  --ng-black-secondary: #0F1113;  /* Deeper near-black — overlays / true dark */
  --ng-white-secondary: #E6EAEF;  /* Cool off-white — dividers / muted surfaces */
  --ng-brand-secondary: #1653C7;  /* Deep blue — link / pressed / emphasis */
  --ng-grey:            #2A3F5B;  /* Cool navy-grey — secondary ink / muted UI */

  /* ---------- Tints & shades (derived for UI needs) ---------- */
  --ng-ink-950: #0A0B0D;
  --ng-ink-900: #0F1113;   /* = black-secondary */
  --ng-ink-800: #121417;   /* = black-primary   */
  --ng-ink-700: #1A1D22;
  --ng-ink-600: #242830;
  --ng-ink-500: #2A3F5B;   /* = grey */
  --ng-ink-400: #4A5B76;
  --ng-ink-300: #7B8A9E;
  --ng-ink-200: #B8C1CD;
  --ng-ink-100: #E6EAEF;   /* = white-secondary */
  --ng-ink-50:  #F5F5F5;   /* = white-primary   */
  --ng-ink-0:   #FFFFFF;

  --ng-blue-100: #E0EEFE;
  --ng-blue-200: #B8D7FD;
  --ng-blue-300: #8FC1FC;
  --ng-blue-400: #60ABFB;  /* = brand-primary */
  --ng-blue-500: #3A86E8;
  --ng-blue-600: #1653C7;  /* = brand-secondary */
  --ng-blue-700: #1140A1;
  --ng-blue-800: #0C2E75;

  /* ---------- Semantic roles — Light ---------- */
  --ng-bg:        var(--ng-white-primary);
  --ng-bg-elev:   #FFFFFF;
  --ng-bg-muted:  var(--ng-white-secondary);
  --ng-surface:   #FFFFFF;
  --ng-border:    #D8DEE7;
  --ng-border-strong: #B8C1CD;
  --ng-divider:   #ECEFF3;

  --ng-fg:        var(--ng-black-primary);   /* primary ink   */
  --ng-fg-muted:  var(--ng-grey);            /* secondary ink */
  --ng-fg-subtle: #6A7588;
  --ng-fg-on-brand: #FFFFFF;

  --ng-accent:        var(--ng-brand-primary);
  --ng-accent-strong: var(--ng-brand-secondary);
  --ng-accent-soft:   var(--ng-blue-100);
  --ng-focus-ring:    rgba(96, 171, 251, 0.45);

  --ng-success: #1EA97C;
  --ng-warning: #E0A63A;
  --ng-danger:  #D64545;
  --ng-info:    var(--ng-brand-primary);

  /* ---------- Radii ---------- */
  --ng-radius-xs: 4px;
  --ng-radius-sm: 6px;
  --ng-radius-md: 10px;
  --ng-radius-lg: 14px;
  --ng-radius-xl: 20px;
  --ng-radius-2xl: 28px;
  --ng-radius-pill: 999px;

  /* ---------- Spacing (4-pt base) ---------- */
  --ng-space-0: 0;
  --ng-space-1: 4px;
  --ng-space-2: 8px;
  --ng-space-3: 12px;
  --ng-space-4: 16px;
  --ng-space-5: 20px;
  --ng-space-6: 24px;
  --ng-space-8: 32px;
  --ng-space-10: 40px;
  --ng-space-12: 48px;
  --ng-space-16: 64px;
  --ng-space-20: 80px;
  --ng-space-24: 96px;

  /* ---------- Shadows (cool navy tint) ---------- */
  --ng-shadow-xs:  0 1px 2px rgba(15, 17, 19, 0.06);
  --ng-shadow-sm:  0 2px 6px rgba(15, 17, 19, 0.06), 0 1px 2px rgba(15, 17, 19, 0.04);
  --ng-shadow-md:  0 6px 16px rgba(15, 17, 19, 0.08), 0 2px 4px rgba(15, 17, 19, 0.05);
  --ng-shadow-lg:  0 16px 40px rgba(15, 17, 19, 0.10), 0 4px 8px rgba(15, 17, 19, 0.06);
  --ng-shadow-xl:  0 28px 64px rgba(15, 17, 19, 0.16), 0 8px 16px rgba(15, 17, 19, 0.08);
  --ng-shadow-glow: 0 0 0 4px rgba(96, 171, 251, 0.25), 0 8px 24px rgba(96, 171, 251, 0.30);
  --ng-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- Motion ---------- */
  --ng-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ng-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ng-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ng-dur-fast: 120ms;
  --ng-dur-base: 200ms;
  --ng-dur-slow: 360ms;

  /* ---------- Typography ---------- */
  --ng-font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ng-font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ng-font-display: 'Onest', var(--ng-font-sans);

  --ng-fw-light: 300;
  --ng-fw-regular: 400;
  --ng-fw-medium: 500;
  --ng-fw-semibold: 600;
  --ng-fw-bold: 700;
  --ng-fw-black: 800;

  /* Type scale — fluid display, fixed body */
  --ng-fs-overline: 12px;
  --ng-fs-caption: 12px;
  --ng-fs-small: 13px;
  --ng-fs-body: 15px;
  --ng-fs-body-lg: 17px;
  --ng-fs-h6: 16px;
  --ng-fs-h5: 18px;
  --ng-fs-h4: 22px;
  --ng-fs-h3: 28px;
  --ng-fs-h2: 36px;
  --ng-fs-h1: 48px;
  --ng-fs-display: 72px;
  --ng-fs-display-xl: 96px;

  --ng-lh-tight: 1.1;
  --ng-lh-snug: 1.25;
  --ng-lh-normal: 1.5;
  --ng-lh-relaxed: 1.65;

  --ng-tracking-tight: -0.02em;
  --ng-tracking-snug:  -0.01em;
  --ng-tracking-normal: 0;
  --ng-tracking-wide:  0.02em;
  --ng-tracking-overline: 0.14em;

  /* ---------- Layout ---------- */
  --ng-container: 1200px;
  --ng-container-narrow: 880px;
  --ng-container-wide: 1440px;
}

/* ---------- Semantic roles — Dark ---------- */
.ng-theme-dark,
:root[data-ng-theme="dark"] {
  --ng-bg:        var(--ng-black-primary);
  --ng-bg-elev:   #1A1D22;
  --ng-bg-muted:  var(--ng-black-secondary);
  --ng-surface:   #1A1D22;
  --ng-border:    #242830;
  --ng-border-strong: #2A3F5B;
  --ng-divider:   #1F2329;

  --ng-fg:        var(--ng-white-primary);
  --ng-fg-muted:  #B8C1CD;
  --ng-fg-subtle: #7B8A9E;
  --ng-fg-on-brand: var(--ng-black-primary);

  --ng-accent:        var(--ng-brand-primary);
  --ng-accent-strong: var(--ng-brand-primary);
  --ng-accent-soft:   rgba(96, 171, 251, 0.12);

  --ng-shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --ng-shadow-sm: 0 2px 6px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --ng-shadow-md: 0 6px 16px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.35);
  --ng-shadow-lg: 0 16px 40px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.40);
  --ng-shadow-xl: 0 28px 64px rgba(0,0,0,0.65), 0 8px 16px rgba(0,0,0,0.50);
}

/* ==========================================================================
   Base element typography
   ========================================================================== */

html { font-family: var(--ng-font-sans); color: var(--ng-fg); background: var(--ng-bg); }
body { margin: 0; font-size: var(--ng-fs-body); line-height: var(--ng-lh-normal); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ng-font-display);
  font-weight: var(--ng-fw-bold);
  color: var(--ng-fg);
  margin: 0;
  letter-spacing: var(--ng-tracking-tight);
  line-height: var(--ng-lh-tight);
}
h1 { font-size: var(--ng-fs-h1); letter-spacing: var(--ng-tracking-tight); }
h2 { font-size: var(--ng-fs-h2); }
h3 { font-size: var(--ng-fs-h3); letter-spacing: var(--ng-tracking-snug); }
h4 { font-size: var(--ng-fs-h4); font-weight: var(--ng-fw-semibold); letter-spacing: var(--ng-tracking-snug); }
h5 { font-size: var(--ng-fs-h5); font-weight: var(--ng-fw-semibold); line-height: var(--ng-lh-snug); }
h6 { font-size: var(--ng-fs-h6); font-weight: var(--ng-fw-semibold); line-height: var(--ng-lh-snug); }

p   { margin: 0; line-height: var(--ng-lh-relaxed); color: var(--ng-fg); }
small { font-size: var(--ng-fs-small); color: var(--ng-fg-muted); }

code, kbd, samp, pre, .ng-mono {
  font-family: var(--ng-font-mono);
  font-size: 0.92em;
}

/* Decorative overline — Fira Code per brandbook */
.ng-overline {
  font-family: var(--ng-font-mono);
  font-size: var(--ng-fs-overline);
  font-weight: var(--ng-fw-medium);
  letter-spacing: var(--ng-tracking-overline);
  text-transform: uppercase;
  color: var(--ng-accent-strong);
}

.ng-display   { font-size: var(--ng-fs-display);    font-weight: var(--ng-fw-bold); line-height: 1.02; letter-spacing: -0.03em; }
.ng-display-xl{ font-size: var(--ng-fs-display-xl); font-weight: var(--ng-fw-black); line-height: 1.0;  letter-spacing: -0.035em; }
.ng-lead      { font-size: var(--ng-fs-body-lg); color: var(--ng-fg-muted); line-height: var(--ng-lh-relaxed); }

a { color: var(--ng-accent-strong); text-decoration: none; transition: color var(--ng-dur-fast) var(--ng-ease-standard); }
a:hover { color: var(--ng-accent); }

hr { border: 0; height: 1px; background: var(--ng-border); margin: var(--ng-space-6) 0; }

::selection { background: var(--ng-accent); color: #fff; }

/* Focus ring */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ng-accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* styles.css */
/* ==========================================================================
   NetGonet — Site redesign (2026)
   Built on NetGonet design tokens.
   ========================================================================== */



/* -------- Reset/base for the prototype --------- */
* { box-sizing: border-box; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* The full page artboard wrapper — each page renders into this */
.ng-page {
  width: 100%;
  background: var(--ng-bg);
  color: var(--ng-fg);
  font-family: var(--ng-font-sans);
  /* NOTE: --side-pad is defined responsively on :root in styles-responsive.css
     (clamp(20px,5vw,64px) + ≤380px override). Do NOT redeclare it here — an
     ancestor-scoped value would shadow the fluid one for the whole app. */
}

.ng-page--dark {
  background: var(--ng-black-primary);
  color: var(--ng-white-primary);
}

/* ==========================================================================
   Nav
   ========================================================================== */
.ng-nav {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 48px;
  padding: 16px max(var(--side-pad), calc((100% - 1280px) / 2 + var(--side-pad)));
  background: rgba(245,245,245,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ng-divider);
}
.ng-page--dark .ng-nav {
  background: rgba(15,17,19,0.78);
  border-bottom: 1px solid #1F2329;
}
.ng-nav__brand { display: flex; align-items: center; gap: 10px; }
.ng-nav__brand img { height: 30px; }
.ng-nav__brand-tag {
  font-family: var(--ng-font-sans); font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ng-grey);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--ng-border);
}
.ng-nav__links {
  display: flex; gap: 4px; list-style: none; padding: 0; margin: 0;
  justify-self: center;
}
.ng-nav__links li a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--ng-fg);
  transition: background var(--ng-dur-fast) var(--ng-ease-standard);
}
.ng-nav__links li a:hover { background: var(--ng-white-secondary); }
.ng-nav__links li a.is-active { background: var(--ng-blue-100); color: var(--ng-brand-secondary); }
.ng-page--dark .ng-nav__links li a:hover { background: #1A1D22; color: var(--ng-white-primary); }
.ng-page--dark .ng-nav__links li a.is-active { background: var(--ng-brand-primary); color: var(--ng-black-primary); }

/* Nav dropdown — "Kursy online" */
.ng-nav__has-drop { position: relative; }
.ng-nav__drop-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px; border: 0; background: transparent;
  font-family: var(--ng-font-sans); font-size: 14px; font-weight: 500; color: var(--ng-fg);
  cursor: pointer; transition: background var(--ng-dur-fast) var(--ng-ease-standard);
}
.ng-nav__drop-trigger svg { transition: transform var(--ng-dur-base) var(--ng-ease-standard); color: var(--ng-fg-subtle); }
.ng-nav__has-drop:hover .ng-nav__drop-trigger,
.ng-nav__has-drop.is-open .ng-nav__drop-trigger { background: var(--ng-white-secondary); }
.ng-nav__has-drop.is-open .ng-nav__drop-trigger svg { transform: rotate(180deg); color: var(--ng-brand-secondary); }
.ng-nav__drop-trigger.is-active { background: var(--ng-accent-soft); color: var(--ng-brand-secondary); }
.ng-nav__drop-trigger.is-active svg { color: var(--ng-brand-secondary); }

.ng-nav__drop {
  position: absolute; top: 100%; left: 50%;
  padding-top: 12px; width: 248px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--ng-dur-base) var(--ng-ease-standard), transform var(--ng-dur-base) var(--ng-ease-standard);
  z-index: 60;
}
.ng-nav__has-drop:hover .ng-nav__drop,
.ng-nav__has-drop.is-open .ng-nav__drop,
.ng-nav__has-drop:focus-within .ng-nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ng-nav__drop > * { /* inner card */ }
.ng-nav__drop::before {
  content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--ng-bg-elev);
  border-left: 1px solid var(--ng-border); border-top: 1px solid var(--ng-border); border-radius: 3px 0 0 0;
  z-index: 1;
}
.ng-nav__drop-label {
  display: none;
}
.ng-nav__drop { background: transparent; }
.ng-nav__drop-card {
  background: var(--ng-bg-elev); border: 1px solid var(--ng-border);
  border-radius: 14px; box-shadow: var(--ng-shadow-lg);
  padding: 6px;
}
.ng-nav__drop-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px;
  transition: background var(--ng-dur-fast) var(--ng-ease-standard);
}
.ng-nav__drop-item:hover { background: var(--ng-bg-muted); }
.ng-nav__drop-item:hover .ng-nav__drop-ic { background: var(--ng-brand-primary); color: #fff; border-color: transparent; }
.ng-nav__drop-item.is-active { background: var(--ng-accent-soft); }
.ng-nav__drop-item.is-active .ng-nav__drop-ic { background: var(--ng-brand-primary); color: #fff; border-color: transparent; }
.ng-nav__drop-item.is-active .ng-nav__drop-title { color: var(--ng-brand-secondary); }
.ng-nav__drop-ic {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; color: var(--ng-brand-secondary);
  background: var(--ng-blue-100); border: 1px solid var(--ng-blue-200);
  transition: all var(--ng-dur-fast) var(--ng-ease-standard);
}
.ng-nav__drop-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ng-fg); line-height: 1.2; white-space: nowrap; }
.ng-nav__drop-pill {
  flex-shrink: 0; font-family: var(--ng-font-mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-fg-subtle);
  background: var(--ng-bg-muted); padding: 3px 8px; border-radius: 999px;
}
.ng-nav__drop-item:hover .ng-nav__drop-pill,
.ng-nav__drop-item.is-active .ng-nav__drop-pill { color: var(--ng-brand-secondary); background: #fff; }
.ng-nav__right { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--ng-font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 200ms var(--ng-ease-standard);
  text-decoration: none;
}
.btn--primary, .btn--accent { background: var(--ng-brand-secondary); color: #fff; }
.btn--primary:hover, .btn--accent:hover { background: var(--ng-blue-700); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(22,83,199,0.28); }
.section--dark .btn--primary, .section--dark .btn--accent,
.ng-page--dark .btn--primary, .ng-page--dark .btn--accent { background: var(--ng-brand-primary); color: var(--ng-black-primary); }
.section--dark .btn--primary:hover, .section--dark .btn--accent:hover,
.ng-page--dark .btn--primary:hover, .ng-page--dark .btn--accent:hover { background: var(--ng-blue-300); color: var(--ng-black-primary); box-shadow: 0 10px 26px rgba(96,171,251,0.25); }
.btn--outline { background: transparent; color: var(--ng-fg); border-color: var(--ng-border-strong); }
.btn--outline:hover { border-color: var(--ng-fg); color: var(--ng-fg); }
.btn--outline-light { background: transparent; color: var(--ng-white-primary); border-color: rgba(255,255,255,0.25); }
.btn--outline-light:hover { background: rgba(255,255,255,0.06); color: var(--ng-white-primary); }
.btn--ghost { background: transparent; color: var(--ng-fg); padding: 10px 12px; }
.btn--ghost:hover { color: var(--ng-brand-secondary); }
.btn--sm { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.btn--lg { padding: 16px 26px; font-size: 16px; border-radius: 14px; }
.btn .arr { display: inline-block; transition: transform 200ms var(--ng-ease-standard); }
.btn:hover .arr { transform: translateX(3px); }

/* ==========================================================================
   Common helpers
   ========================================================================== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--side-pad); }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--side-pad); }

.overline {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ng-font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ng-brand-secondary);
}
.overline::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.overline--line::before { width: 20px; height: 2px; border-radius: 0; }
.overline--mark::before { display: none; }

.eyebrow {
  font-family: var(--ng-font-sans); font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--ng-grey);
}
.page--dark .eyebrow { color: var(--ng-ink-300); }

.divider-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; vertical-align: middle; margin: 0 8px; }

/* Section bone */
.section { padding: 112px 0; }
.section--tight { padding: 80px 0; }
.section--muted { background: var(--ng-white-secondary); }
.section--dark { background: var(--ng-black-primary); color: var(--ng-white-primary); }
.section--dark p { color: var(--ng-ink-200); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ng-white-primary); }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head .overline { margin-bottom: 14px; }
.section-head h2 {
  font-size: 48px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05; text-wrap: balance;
}
.section-head p {
  margin-top: 18px; font-size: 18px; line-height: 1.55;
  color: var(--ng-fg-muted); text-wrap: pretty;
}
.section--dark .section-head p { color: var(--ng-ink-200); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--ng-black-primary); color: var(--ng-white-primary);
  padding: 96px var(--side-pad) 32px;
  position: relative; overflow: hidden;
}
.footer__sygnet {
  position: absolute; right: -200px; bottom: -260px; width: 720px;
  opacity: 0.04; pointer-events: none;
}
.footer__inner {
  position: relative; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 56px;
  padding-bottom: 48px; border-bottom: 1px solid #242830;
}
.footer__brand img { height: 28px; }
.footer__brand p { margin-top: 18px; color: var(--ng-ink-200); max-width: 320px; line-height: 1.6; }
.footer__brand .stack {
  margin-top: 22px; display: flex; gap: 10px; align-items: center;
}
.footer__brand .stack a {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid #242830; color: var(--ng-ink-200);
  transition: all 200ms var(--ng-ease-standard);
}
.footer__brand .stack a:hover { border-color: var(--ng-brand-primary); color: var(--ng-brand-primary); }
.footer__col h6 {
  font-family: var(--ng-font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ng-brand-primary); margin-bottom: 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a { color: var(--ng-ink-200); font-size: 14px; }
.footer__col a:hover { color: var(--ng-brand-primary); }
.footer__tail {
  position: relative; max-width: 1280px; margin: 28px auto 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.05em;
  color: var(--ng-ink-300); text-transform: uppercase;
}

/* ==========================================================================
   Card primitive
   ========================================================================== */
.card {
  background: var(--ng-bg-elev); border: 1px solid var(--ng-border);
  border-radius: 16px; padding: 28px;
  transition: all 200ms var(--ng-ease-standard);
}
.card:hover { border-color: var(--ng-border-strong); box-shadow: var(--ng-shadow-md); transform: translateY(-2px); }

/* Tag pill */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--ng-white-secondary); color: var(--ng-grey);
  font-size: 14px; font-weight: 500;
  font-family: var(--ng-font-sans); letter-spacing: 0.02em;
}
.tag--accent { background: var(--ng-blue-100); color: var(--ng-brand-secondary); }
.tag--dark { background: #1A1D22; color: var(--ng-ink-200); }

/* Dotted/dashed protect line */
.line-hatch {
  height: 1px; background-image: linear-gradient(to right, var(--ng-border) 50%, transparent 50%);
  background-size: 6px 1px;
}

/* styles-home.css */
/* ==========================================================================
   Home page styles
   ========================================================================== */

/* ---- HERO ---- */
.hero {
  position: relative; overflow: hidden;
  padding: 88px var(--side-pad) 96px;
  background: linear-gradient(180deg, #FCFCFD 0%, var(--ng-bg) 100%);
}
.hero__inner {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px;
  align-items: center; position: relative;
}
.hero__title {
  font-size: 76px; line-height: 1.02; letter-spacing: -0.03em;
  font-weight: 700; margin-top: 22px; text-wrap: balance;
}
.hero__title-em { color: var(--ng-brand-secondary); }
.hero__title-grey { color: var(--ng-ink-600); font-weight: 500; }
.hero__lead {
  margin-top: 26px; font-size: 20px; line-height: 1.55;
  color: var(--ng-fg-muted); max-width: 580px; text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero__meta {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: var(--ng-font-sans); font-size: 14px;
  letter-spacing: 0.05em; color: var(--ng-grey);
}
.hero__meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta li svg { color: var(--ng-brand-secondary); }

.hero__visual {
  position: relative; display: grid; place-items: center;
}
.hero__portrait {
  position: relative;
  width: 460px; height: 460px;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--ng-blue-100) 0%, #fff 70%);
  display: grid; place-items: end center;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(96,171,251,0.18),
    inset 0 0 0 1px rgba(96,171,251,0.18);
}
.hero__portrait::before {
  content:''; position:absolute; inset:18px; border-radius:24px;
  border: 1px dashed rgba(96,171,251,0.4);
  pointer-events:none; z-index: 1;
}
.hero__photo {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 122%; height: 122%;
  object-fit: cover; object-position: center top;
  z-index: 0;
  filter: drop-shadow(0 8px 24px rgba(15,17,19,0.12));
}
/* hero__chip — nakładki statystyk na zdjęciu usunięte (liczby szybko się dezaktualizowały) */
.hero__chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ng-black-primary); color: var(--ng-white-primary);
  padding: 10px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--ng-shadow-lg);
}
.hero__chip svg { color: var(--ng-brand-primary); }
.hero__chip--top { top: 28px; left: -20px; }
.hero__chip--bot { bottom: 30px; right: -10px; background: var(--ng-white-primary); color: var(--ng-black-primary); }
.hero__chip--bot svg { color: var(--ng-brand-secondary); }

/* ---- TRUST ---- */
.trust {
  border-top: 1px solid var(--ng-divider);
  border-bottom: 1px solid var(--ng-divider);
  background: #fff;
  padding: 48px var(--side-pad);
}
.trust__inner { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; }
.trust__tag { color: var(--ng-grey); }
.trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  border-left: 1px dashed var(--ng-border);
  padding-left: 32px;
}
.trust__item { display: flex; flex-direction: column; gap: 4px; }
.trust__n {
  font-family: var(--ng-font-sans); font-size: 30px;
  font-weight: 700; letter-spacing: -0.025em; color: var(--ng-black-primary);
}
.trust__l { font-size: 14px; color: var(--ng-grey); }

/* ---- LADDER ---- */
.ladder { background: var(--ng-bg); }
.ladder__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  counter-reset: step;
}
.ladder__card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  min-height: 280px; padding: 30px;
  background: #fff;
}
.ladder__head { display: flex; align-items: center; justify-content: space-between; }
.ladder__n {
  font-family: var(--ng-font-sans); font-size: 14px;
  font-weight: 500; letter-spacing: 0.06em; color: var(--ng-grey);
  padding: 6px 10px; border: 1px solid var(--ng-border); border-radius: 6px;
}
.ladder__title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.ladder__desc { color: var(--ng-fg-muted); font-size: 15px; line-height: 1.55; }
.ladder__cta {
  margin-top: auto; align-self: flex-start;
  background: none; border: none; padding: 0;
  font-family: var(--ng-font-sans); font-size: 14px; font-weight: 600;
  color: var(--ng-brand-secondary);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.ladder__cta:hover .arr,
.ladder__cta:hover svg { transform: translateX(3px); }
.ladder__cta svg { transition: transform 200ms var(--ng-ease-standard); }

/* ---- MAGNETY TEASE ---- */
.magnety-tease__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 56px; gap: 32px;
}
.magnety-tease__head h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; }
.magnety-tease__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.mag-card {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: all 200ms var(--ng-ease-standard);
}
.mag-card:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); border-color: var(--ng-border-strong); }
.mag-card__cover {
  height: 180px;
  background:
    radial-gradient(circle at 30% 20%, rgba(96,171,251,.22), transparent 50%),
    linear-gradient(140deg, #121417, #2A3F5B);
  position: relative; display: grid; place-items: center;
  color: var(--ng-white-primary);
}
.mag-card__cover::before {
  content:''; position:absolute; inset:14px;
  border: 1px dashed rgba(255,255,255,0.18); border-radius: 10px;
}
.mag-card__cover-inner {
  position:relative; text-align:center; padding: 0 16px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.mag-card__cover-title {
  font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7); text-transform: uppercase;
}
.mag-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mag-card__body h4 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.mag-card__body p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.5; }
.mag-card__foot {
  margin-top: auto; padding-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--ng-border);
}
.mag-card__meta { font-family: var(--ng-font-sans); font-size: 14px; color: var(--ng-grey); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- WORKSHOPS ---- */
.workshops { position: relative; overflow: hidden; }
.workshops__inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center;
  position: relative;
}
.workshops__copy h2 {
  font-size: 52px; line-height: 1.05; letter-spacing: -0.025em;
  margin-top: 14px; text-wrap: balance;
}
.workshops__copy p { margin-top: 22px; font-size: 19px; line-height: 1.6; max-width: 540px; color: var(--ng-fg-muted); }
.workshops__list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.workshops__list li { display: flex; align-items: center; gap: 12px; color: var(--ng-ink-100); font-size: 15px; }
.workshops__list svg { color: var(--ng-brand-primary); flex-shrink: 0; }
.workshops__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

.workshops__panel {
  background: #1A1D22;
  border: 1px solid #242830;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.workshops__panel-tag {
  font-family: var(--ng-font-sans); font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ng-brand-primary); margin-bottom: 24px;
}
.workshops__steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; gap: 0;
}
.workshops__steps li {
  display: grid; grid-template-columns: 60px 1fr; align-items: center;
  padding: 14px 0; border-bottom: 1px dashed #242830;
  color: var(--ng-white-primary); font-size: 15px;
}
.workshops__steps li:last-child { border-bottom: none; }
.workshops__steps li span {
  font-family: var(--ng-font-sans); font-size: 14px;
  color: var(--ng-brand-primary); letter-spacing: 0.05em;
}
.workshops__panel-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid #242830;
}
.workshops__panel-foot div { display: flex; flex-direction: column; gap: 4px; }
.workshops__panel-foot strong { color: var(--ng-white-primary); font-weight: 600; font-size: 15px; }

/* ---- HUB tease ---- */
.hubtease__head { margin-bottom: 40px; }
.hubtease__foot { display: flex; justify-content: center; margin-top: 40px; }
.hubtease__head h2 { font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.025em; margin-top: 12px; }
.hubtease__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.hub-card {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
  overflow: hidden; transition: all 200ms var(--ng-ease-standard);
  cursor: pointer;
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); }
.hub-card__thumb {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #2A3F5B 0%, #0F1113 100%);
  display: grid; place-items: center;
}
.hub-card__type {
  position: absolute; bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 6px;
  color: #fff; font-family: var(--ng-font-sans);
  font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 500;
}
.hub-card__play {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--ng-black-primary);
  display: grid; place-items: center;
  transition: transform 200ms var(--ng-ease-standard);
}
.hub-card:hover .hub-card__play { transform: scale(1.08); }
.hub-card__body { padding: 18px; display: grid; gap: 8px; }
.hub-card__body h5 { font-size: 17px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.hub-card__meta { font-family: var(--ng-font-sans); font-size: 14px; color: var(--ng-grey); letter-spacing: 0.05em; }

/* ---- PRODUCTS ---- */
.products__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.prod-card {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  min-height: 280px;
  transition: all 200ms var(--ng-ease-standard);
  position: relative; overflow: hidden;
}
.prod-card::before {
  content:''; position: absolute; inset: 0; bottom: auto; height: 4px;
  background: var(--ng-brand-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ng-ease-standard);
}
.prod-card:hover { border-color: var(--ng-border-strong); transform: translateY(-3px); box-shadow: var(--ng-shadow-md); }
.prod-card:hover::before { transform: scaleX(1); }
.prod-card__head { display: flex; justify-content: space-between; align-items: center; }
.prod-card__price { font-family: var(--ng-font-sans); font-size: 16px; font-weight: 600; color: var(--ng-black-primary); }
.prod-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.prod-card p { font-size: 16px; color: var(--ng-fg-muted); line-height: 1.55; }
.prod-card__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--ng-border);
}
.prod-card__lvl { font-family: var(--ng-font-sans); font-size: 14px; color: var(--ng-fg-muted); display:inline-flex; align-items:center; gap:6px; }

/* ---- TESTIMONIALS ---- */
.testi__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.testi__card {
  margin: 0; background: var(--ng-white-secondary);
  border: 1px solid var(--ng-border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
}
.testi__card > svg { color: var(--ng-brand-primary); }
.testi__card blockquote {
  margin: 0; font-size: 18px; line-height: 1.55; letter-spacing: -0.005em;
  color: var(--ng-black-primary); text-wrap: pretty;
}
.testi__card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ng-border); }
.testi__card figcaption > div { display: flex; flex-direction: column; gap: 2px; }
.testi__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.testi__card figcaption strong { font-weight: 600; font-size: 14px; }
.testi__card figcaption span { font-size: 14px; color: var(--ng-grey); }

/* ---- NEWSLETTER ---- */
.news { position: relative; overflow: hidden; background: var(--ng-white-secondary); color: var(--ng-fg); }
.news__inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center;
  position: relative;
}
.news__copy h2 {
  font-size: 50px; line-height: 1.05; letter-spacing: -0.025em;
  margin-top: 14px; text-wrap: balance; color: var(--ng-black-primary);
}
.news__copy p {
  margin-top: 22px; font-size: 19px; line-height: 1.6;
  color: var(--ng-fg-muted); max-width: 540px;
}
.news__perks {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--ng-font-sans); font-size: 15px; color: var(--ng-fg);
}
.news__perks li { display: inline-flex; align-items: center; gap: 8px; }
.news__perks svg { color: var(--ng-brand-secondary); }
.news__form {
  background: #fff; border: 1px solid var(--ng-border);
  border-radius: 20px; padding: 32px;
  display: grid; gap: 16px;
  box-shadow: var(--ng-shadow-lg);
}
.news__form label { display: grid; gap: 6px; }
.news__form input[type="text"], .news__form input[type="email"] {
  background: var(--ng-white-primary); border: 1px solid var(--ng-border-strong); border-radius: 10px;
  padding: 14px 16px; color: var(--ng-fg);
  font-family: var(--ng-font-sans); font-size: 15px; outline: none;
  transition: all 200ms var(--ng-ease-standard);
}
.news__form input:focus {
  border-color: var(--ng-brand-primary);
  box-shadow: 0 0 0 4px var(--ng-focus-ring);
}
.news__consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: flex-start; font-size: 14px; color: var(--ng-fg-muted);
  line-height: 1.5;
}
.news__consent input { margin-top: 3px; }

.hub-card__thumb { position: relative; overflow: hidden; }
.hub-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-card:hover .hub-card__img { transform: scale(1.03); transition: transform 400ms var(--ng-ease-standard); }

/* ---- HERO proof ---- */
.hero__proof { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 14px; color: var(--ng-fg-muted); }
.hero__proof strong { color: var(--ng-fg); }
.hero__avatars { display: flex; }
.hero__avatars img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ng-bg); object-fit: cover; margin-left: -9px; display: block; }
.hero__avatars img:first-child { margin-left: 0; }
/* ---- NEWSLETTER early variant ---- */
.news--early .news__inner { grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: 64px; align-items: center; grid-template-rows: auto auto; }
.news--early .news__copy { grid-column: 1; grid-row: 1; }
.news--early .news__mock { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.news__mock { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--ng-border); background: var(--ng-bg); aspect-ratio: 4/5; }
.news__mock img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 22px 22px 60px; box-sizing: border-box; }
.news__mock-badge { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ng-bg-muted); color: var(--ng-fg); font-size: 14px; font-weight: 600; }
.news__mock-badge svg { color: var(--ng-brand-secondary); }
.news__form--compact { grid-column: 1; grid-row: 2; margin-top: 32px; padding: 24px; background: #fff; border: 1px solid var(--ng-border); box-shadow: var(--ng-shadow-sm); border-radius: 16px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.news__form--compact input { min-width: 0; width: 100%; }
.news__form--compact .eyebrow { display: none; }
.news__form--compact .news__consent, .news__form--compact .btn { grid-column: 1 / -1; }
.news__form--compact .btn { justify-self: start; }
.news--early .news__copy h2 { font-size: 42px; }
/* ---- ABOUT ---- */
.habout__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.habout__photo { border-radius: 22px; overflow: hidden; background: var(--ng-bg-muted); aspect-ratio: 1; }
.habout__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.habout__copy h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.025em; line-height: 1.08; margin-top: 12px; text-wrap: balance; }
.habout__copy p { margin-top: 20px; font-size: 19px; line-height: 1.6; color: var(--ng-fg-muted); }
.habout__actions { margin-top: 32px; }
.habout__copy p strong { color: var(--ng-fg); }
.habout__pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin: 26px 0 28px; }
.habout__pillars > div { display: grid; gap: 6px; font-size: 14px; color: var(--ng-fg-muted); line-height: 1.5; }
.habout__pillars svg { color: var(--ng-brand-secondary); }
.habout__pillars strong { color: var(--ng-fg); font-size: 15px; }
/* ---- FAQ ---- */
.section-head--center { text-align: center; }
.hfaq__list { display: grid; gap: 10px; margin-top: 36px; }
.hfaq__item { background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 14px; padding: 0 22px; }
.hfaq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 16px; }
.hfaq__item summary::-webkit-details-marker { display: none; }
.hfaq__item summary svg { flex: none; transition: transform 200ms var(--ng-ease-standard); color: var(--ng-fg-muted); }
.hfaq__item[open] summary svg { transform: rotate(180deg); }
.hfaq__item p { padding: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--ng-fg-muted); max-width: 640px; }
.hfaq__more { text-align: center; margin-top: 24px; font-size: 14.5px; color: var(--ng-fg-muted); }
/* ---- FINAL CTA ---- */
.hcta { padding: 72px 0; border-top: 1px solid var(--ng-border); }
.hcta__inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.hcta h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin-top: 12px; max-width: 560px; text-wrap: balance; }
.hcta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ---- WORKSHOPS photo ---- */
.workshops__photo { display: block; width: 100%; aspect-ratio: 4/5; max-height: 560px; object-fit: cover; border-radius: 22px; }
.workshops__inner { grid-template-columns: 0.9fr 1.1fr; }
.hero__actions .btn { white-space: nowrap; }
@media (max-width: 1100px) {
  .news--early .news__inner { grid-template-columns: 1fr; }
  .news--early .news__mock { grid-row: auto; grid-column: 1; }
  .news__form--compact { grid-column: 1; grid-row: auto; }
}
@media (max-width: 900px) {
  .habout__inner { grid-template-columns: 1fr; }
  .habout__photo { max-width: 360px; }
}

.hubtease .hub-card { background: #fff; }
/* newsletter early: wyrównanie na małych ekranach */
@media (max-width: 1100px) {
  .news--early .news__inner { align-items: start; }
  .news--early .news__mock { aspect-ratio: 4/5; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .workshops__inner { grid-template-columns: 1fr; }
  .workshops__photo { aspect-ratio: 16/10; max-height: none; }
}

/* styles-pages.css */
/* ==========================================================================
   Page-specific styles: magnety, hub, warsztaty, o-mnie, kontakt, dziekuje
   ========================================================================== */

/* ────────────────────────── LEAD MAGNETY ────────────────────────── */
.mag-hero {
  position: relative; overflow: hidden;
  padding: 96px var(--side-pad) 64px;
  background: linear-gradient(180deg, #FCFCFD 0%, var(--ng-bg) 100%);
}
.mag-hero__inner h1 {
  font-size: 64px; line-height: 1.05; letter-spacing: -0.03em;
  margin-top: 16px; max-width: 880px; text-wrap: balance;
}
.mag-hero__inner > p {
  margin-top: 20px; font-size: 18px; line-height: 1.6;
  color: var(--ng-fg-muted); max-width: 640px;
}
.mag-hero__stats {
  display: flex; gap: 40px; margin-top: 40px;
  padding-top: 24px; border-top: 1px dashed var(--ng-border);
}
.mag-hero__stats > div {
  font-family: var(--ng-font-sans); font-size: 14px;
  color: var(--ng-grey); letter-spacing: 0.02em;
}
.mag-hero__stats strong {
  display: block; font-family: var(--ng-font-sans);
  font-size: 28px; font-weight: 700; color: var(--ng-black-primary);
  letter-spacing: -0.025em; margin-bottom: 2px;
}

.mag-filters {
  background: #fff;
  border-top: 1px solid var(--ng-divider);
  border-bottom: 1px solid var(--ng-divider);
  padding: 22px var(--side-pad);
  position: sticky; top: 73px; z-index: 30;
  backdrop-filter: blur(12px); background: rgba(255,255,255,0.92);
}
.mag-filters__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.mag-filters__group { display: flex; gap: 6px; flex-wrap: wrap; }
.mag-filter {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ng-white-secondary); color: var(--ng-grey);
  border: 1px solid transparent; border-radius: 999px;
  padding: 9px 14px; font-family: var(--ng-font-sans);
  font-size: 14px; font-weight: 500;
  transition: all 200ms var(--ng-ease-standard);
}
.mag-filter:hover { background: #fff; border-color: var(--ng-border); color: var(--ng-black-primary); }
.mag-filter.is-active { background: var(--ng-brand-secondary); color: #fff; }
.mag-filter__n {
  font-family: var(--ng-font-sans); font-size: 14px; opacity: 0.7;
  padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.12);
}
.mag-filter:not(.is-active) .mag-filter__n { background: rgba(0,0,0,0.05); }
.mag-filters__sort { display: flex; align-items: center; gap: 10px; }

.mag-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding-top: 48px;
}
.mag-tile {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: all 200ms var(--ng-ease-standard);
  position: relative;
}
.mag-tile:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-lg); border-color: var(--ng-border-strong); }
.mag-tile.is-featured { grid-column: span 1; outline: 2px solid var(--ng-brand-primary); outline-offset: -2px; }

.mag-tile__cover {
  position: relative; aspect-ratio: 16/10;
  background:
    radial-gradient(circle at 25% 20%, rgba(96,171,251,0.28), transparent 55%),
    linear-gradient(135deg, #121417 0%, #2A3F5B 100%);
  display: grid; place-items: center;
  color: var(--ng-white-primary);
}
.mag-tile__cover::before {
  content:''; position: absolute; inset: 18px;
  border: 1px dashed rgba(255,255,255,0.16); border-radius: 12px;
  pointer-events: none;
}
.mag-tile__cover-inner {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.mag-tile__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(96,171,251,0.18); color: var(--ng-brand-primary);
  display: grid; place-items: center;
}
.mag-tile__cover-tag {
  font-family: var(--ng-font-sans); font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.18);
}
.mag-tile__feat {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 6px;
  background: var(--ng-brand-primary); color: var(--ng-black-primary);
  font-weight: 600;
}
.mag-tile__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mag-tile__body h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.mag-tile__body p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }
.mag-tile__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--ng-border);
}
.mag-tile__meta { font-family: var(--ng-font-sans); font-size: 14px; color: var(--ng-grey); letter-spacing: 0.06em; text-transform: uppercase; }

.mag-cta {
  background: var(--ng-black-primary); color: var(--ng-white-primary);
  padding: 56px var(--side-pad);
}
.mag-cta__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
.mag-cta__copy h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; max-width: 640px; margin-top: 10px; line-height: 1.25; color:#fff; }
.mag-cta__form { display: flex; gap: 8px; flex: 0 0 auto; }
.mag-cta__form input {
  width: 280px; background: #1A1D22; border: 1px solid #242830;
  border-radius: 10px; padding: 14px 16px; color: #fff;
  font-family: var(--ng-font-sans); font-size: 14px; outline: none;
}
.mag-cta__form input:focus { border-color: var(--ng-brand-primary); }

/* ────────────────────────── HUB ────────────────────────── */
.hub-hero {
  position: relative; overflow: hidden;
  padding: 88px var(--side-pad) 56px;
  background: linear-gradient(180deg, #FCFCFD 0%, var(--ng-bg) 100%);
}
.hub-hero__inner h1 {
  font-size: 64px; line-height: 1.05; letter-spacing: -0.03em;
  margin-top: 16px; text-wrap: balance; max-width: 940px;
}
.hub-hero__inner > p {
  margin-top: 20px; font-size: 18px; line-height: 1.6;
  color: var(--ng-fg-muted); max-width: 640px;
}
.hub-hero__stats {
  display: flex; gap: 36px; margin-top: 36px;
  padding-top: 24px; border-top: 1px dashed var(--ng-border); flex-wrap: wrap;
}
.hub-hero__stats > div { font-family: var(--ng-font-sans); font-size: 14px; color: var(--ng-grey); }
.hub-hero__stats strong {
  display: inline-block; font-family: var(--ng-font-sans);
  font-size: 24px; font-weight: 700; color: var(--ng-black-primary);
  letter-spacing: -0.02em; margin-right: 6px;
}

.hub-controls {
  position: sticky; top: 73px; z-index: 30;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--ng-divider);
  border-bottom: 1px solid var(--ng-divider);
  padding: 20px var(--side-pad);
}
.hub-controls__inner { display: block; }
.hub-controls__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.hub-deep__toggle {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--ng-border); border-radius: 999px;
  padding: 9px 15px; font-family: var(--ng-font-sans); font-size: 14px; font-weight: 500;
  color: var(--ng-grey); cursor: pointer;
  transition: all 150ms var(--ng-ease-standard);
}
.hub-deep__toggle:hover { color: var(--ng-black-primary); border-color: var(--ng-border-strong); }
.hub-deep__toggle.is-open { background: var(--ng-white-secondary); color: var(--ng-black-primary); border-color: var(--ng-border-strong); }
.hub-deep__toggle svg:last-child { transition: transform 200ms var(--ng-ease-standard); }
.hub-deep__toggle.is-open svg:last-child { transform: rotate(180deg); }
.hub-deep {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--ng-border);
  animation: hubDeepIn 200ms var(--ng-ease-standard);
}
@keyframes hubDeepIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hub-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--ng-white-secondary); border: 1px solid transparent;
  border-radius: 12px; padding: 12px 16px;
  transition: all 200ms var(--ng-ease-standard);
}
.hub-search { max-width: 440px; }
.hub-search:focus-within { background: #fff; border-color: var(--ng-brand-primary); box-shadow: 0 0 0 4px rgba(96,171,251,0.18); }
.hub-search__clear {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
  border: none; background: var(--ng-border); color: var(--ng-grey);
  border-radius: 50%; cursor: pointer; transition: all 150ms var(--ng-ease-standard);
}
.hub-search__clear:hover { background: var(--ng-fg-muted); color: #fff; }
.hub-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--ng-font-sans); font-size: 15px; color: var(--ng-black-primary);
}
.hub-search svg { color: var(--ng-grey); }
.hub-types, .hub-topics { display: flex; gap: 6px; flex-wrap: wrap; }
.hub-topics { gap: 8px; }
.hub-topics .hub-topic { font-size: 14px; padding: 9px 16px; }
.hub-type, .hub-topic {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--ng-grey);
  border: 1px solid var(--ng-border); border-radius: 999px;
  padding: 8px 14px; font-family: var(--ng-font-sans);
  font-size: 14px; font-weight: 500;
  transition: all 150ms var(--ng-ease-standard);
}
.hub-type:hover, .hub-topic:hover { color: var(--ng-black-primary); border-color: var(--ng-border-strong); }
.hub-type.is-active, .hub-topic.is-active {
  background: var(--ng-brand-secondary); border-color: var(--ng-brand-secondary); color: #fff;
}

.hub-featured { padding: 56px var(--side-pad) 0; }
.hub-featured__head { margin-bottom: 32px; }
.hub-featured__head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.hub-featured__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.hub-feat {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: all 200ms var(--ng-ease-standard); cursor: pointer;
}
.hub-feat:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); }
.hub-feat__thumb {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #2A3F5B, #0F1113);
  display: grid; place-items: center;
}
.hub-feat__type {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px; color: #fff;
  font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
}
.hub-feat__play {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--ng-black-primary);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  transition: transform 200ms var(--ng-ease-standard);
}
.hub-feat:hover .hub-feat__play { transform: scale(1.05); }
.hub-feat__dur {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--ng-font-sans); font-size: 14px; color: #fff;
  background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 4px;
}
.hub-feat__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.hub-feat__body h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.hub-feat__body p { color: var(--ng-fg-muted); }

.hub-feat__side { display: flex; flex-direction: column; gap: 12px; }
.hub-feat-mini {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
  padding: 12px; cursor: pointer;
  transition: all 200ms var(--ng-ease-standard);
}
.hub-feat-mini:hover { box-shadow: var(--ng-shadow-md); transform: translateY(-2px); }
.hub-feat-mini__thumb {
  aspect-ratio: 16/9; border-radius: 8px;
  background: linear-gradient(135deg, #2A3F5B, #0F1113);
  display: grid; place-items: center; color: #fff;
  position: relative;
}
.hub-feat-mini__thumb span {
  position: absolute; bottom: 6px; right: 6px;
  font-family: var(--ng-font-sans); font-size: 14px;
  background: rgba(0,0,0,0.7); padding: 2px 6px; border-radius: 4px;
}
.hub-feat-mini__body { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.hub-feat-mini__body h5 { font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }

.hub-list-head { display: flex; justify-content: space-between; align-items: center; margin: 48px 0 24px; gap: 16px; flex-wrap: wrap; }
.hub-list-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: baseline; flex-wrap: wrap; }
.hub-list-head__count { font-family: var(--ng-font-sans); font-size: 14px; font-weight: 500; color: var(--ng-grey); letter-spacing: 0; margin-left: 14px; }
.hub-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.hub-tile {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  transition: all 200ms var(--ng-ease-standard);
}
.hub-tile:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); }
.hub-tile__thumb {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #2A3F5B, #0F1113);
  display: grid; place-items: center;
}
.hub-tile__type {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 5px; color: #fff;
  font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 500;
}
.hub-tile__dur {
  position: absolute; bottom: 10px; right: 10px;
  font-family: var(--ng-font-sans); font-size: 14px; color: #fff;
  background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 4px;
}
.hub-tile__play {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: var(--ng-black-primary);
  display: grid; place-items: center;
}
.hub-tile__play--blog { background: rgba(255,255,255,0.85); }
.hub-tile__body { padding: 14px; display: grid; gap: 6px; }
.hub-tile__body h5 { font-size: 14px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.hub-tile__meta { font-family: var(--ng-font-sans); font-size: 14px; color: var(--ng-grey); letter-spacing: 0.04em; }

.hub-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 80px 0; color: var(--ng-grey); text-align: center;
}
.hub-empty h4 { color: var(--ng-black-primary); font-size: 20px; font-weight: 600; }
.hub-empty p { font-size: 14px; }

.hub-sub {
  background: var(--ng-black-primary); color: #fff;
  padding: 56px var(--side-pad);
}
.hub-sub__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
.hub-sub__copy h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin-top: 8px; color: #fff; max-width: 540px; line-height: 1.25; }
.hub-sub__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hub-sub__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 10px; color: #fff;
  font-family: var(--ng-font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 200ms var(--ng-ease-standard);
}
.hub-sub__btn:hover { transform: translateY(-2px); box-shadow: var(--ng-shadow-md); color: #fff; }

/* ────────────────────────── WARSZTATY ────────────────────────── */
.ws-hero__inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
  position: relative;
}
.ws-hero__copy h1 {
  font-size: 72px; line-height: 1.02; letter-spacing: -0.03em;
  margin-top: 16px; text-wrap: balance;
}
.ws-hero__copy p {
  margin-top: 22px; font-size: 19px; line-height: 1.55;
  color: var(--ng-ink-200); max-width: 540px;
}
.ws-hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.ws-hero__chips {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--ng-font-sans); font-size: 14px;
  color: var(--ng-ink-200); letter-spacing: 0.04em;
}
.ws-hero__chips li { display: inline-flex; align-items: center; gap: 8px; }
.ws-hero__chips svg { color: var(--ng-brand-primary); }

.ws-hero__panel {
  background: #1A1D22; border: 1px solid #242830;
  border-radius: 22px; padding: 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.ws-hero__panel-tag {
  font-family: var(--ng-font-sans); font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ng-brand-primary); margin-bottom: 20px;
}
.ws-hero__dates { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ws-hero__dates li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px dashed #242830;
}
.ws-hero__dates li:last-child { border-bottom: 0; }
.ws-hero__dates li > div { display: flex; flex-direction: column; gap: 2px; }
.ws-hero__dates strong { color: #fff; font-size: 16px; font-weight: 600; }
.ws-hero__dates span { color: var(--ng-ink-300); font-size: 14px; font-family: var(--ng-font-sans); letter-spacing: 0.04em; }
.ws-hero__panel-foot { margin-top: 16px; padding-top: 20px; border-top: 1px solid #242830; display: grid; gap: 4px; }

.ws-for__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ws-for__card { display: flex; flex-direction: column; gap: 12px; background: #fff; min-height: 220px; }
.ws-for__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--ng-blue-100); color: var(--ng-brand-secondary);
  display: grid; place-items: center;
}
.ws-for__card h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.ws-for__card p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }

.ws-agenda__grid { display: grid; gap: 0; max-width: 880px; margin: 0 auto; }
.ws-agenda__row {
  display: grid; grid-template-columns: 110px 1fr; gap: 24px;
  padding: 28px 0; border-bottom: 1px dashed var(--ng-border);
  align-items: flex-start;
}
.ws-agenda__row:last-child { border-bottom: 0; }
.ws-agenda__t {
  font-family: var(--ng-font-sans); font-size: 14px;
  font-weight: 600; color: var(--ng-brand-secondary);
  letter-spacing: 0.06em;
  padding: 6px 10px; border: 1px dashed var(--ng-border-strong); border-radius: 8px;
  text-align: center;
}
.ws-agenda__l h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.ws-agenda__l p { color: var(--ng-fg-muted); font-size: 15px; line-height: 1.55; }

.ws-get__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.ws-get__copy h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; margin-top: 14px; text-wrap: balance; }
.ws-get__copy p { margin-top: 20px; color: var(--ng-fg-muted); font-size: 17px; line-height: 1.6; }
.ws-get__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ws-get__list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
  padding: 18px 22px; align-items: flex-start;
}
.ws-get__list svg { color: var(--ng-brand-secondary); margin-top: 3px; }
.ws-get__list strong { display: block; font-size: 16px; font-weight: 700; color: var(--ng-black-primary); margin-bottom: 2px; }
.ws-get__list span { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.5; }

.ws-clients__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 48px;
}
.ws-clients__logo {
  background: #1A1D22; border: 1px solid #242830;
  border-radius: 12px; padding: 22px;
  text-align: center; font-family: var(--ng-font-sans);
  color: var(--ng-ink-200); font-size: 14px; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ws-clients__quote {
  background: #1A1D22; border: 1px solid #242830;
  border-radius: 20px; padding: 36px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 880px; margin: 0 auto;
}
.ws-clients__quote > svg { color: var(--ng-brand-primary); }
.ws-clients__quote blockquote {
  margin: 0; color: #fff; font-size: 22px; line-height: 1.45;
  letter-spacing: -0.005em; text-wrap: pretty;
}
.ws-clients__quote figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px dashed #242830; }
.ws-clients__quote figcaption strong { color: #fff; font-weight: 600; }
.ws-clients__quote figcaption span { color: var(--ng-ink-300); font-size: 14px; }

.ws-faq__inner { max-width: 880px; margin: 0 auto; }
.ws-faq__head { margin-bottom: 32px; }
.ws-faq__head h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.ws-faq__list { display: grid; gap: 8px; }
.ws-faq__item, .ko-faq__item {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 12px;
  overflow: hidden;
}
.ws-faq__item summary, .ko-faq__item summary {
  list-style: none; cursor: pointer;
  padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 16px; font-weight: 600; color: var(--ng-black-primary);
}
.ws-faq__item summary::-webkit-details-marker, .ko-faq__item summary::-webkit-details-marker { display: none; }
.ws-faq__item summary svg, .ko-faq__item summary svg {
  color: var(--ng-grey); transition: transform 200ms var(--ng-ease-standard);
}
.ws-faq__item[open] summary svg, .ko-faq__item[open] summary svg {
  transform: rotate(45deg); color: var(--ng-brand-secondary);
}
.ws-faq__item p, .ko-faq__item p {
  padding: 0 24px 22px; margin: 0;
  color: var(--ng-fg-muted); line-height: 1.6;
}

.ws-cta { position: relative; overflow: hidden; padding: 96px var(--side-pad); text-align: center; }
.ws-cta__inner { position: relative; max-width: 720px; margin: 0 auto; }
.ws-cta__inner h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.025em; margin-top: 16px; line-height: 1.1; color: #fff; }
.ws-cta__inner p { margin-top: 18px; color: var(--ng-ink-200); font-size: 17px; }
.ws-cta__actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* ────────────────────────── O MNIE ────────────────────────── */
.om-hero {
  position: relative; overflow: hidden;
  padding: 96px var(--side-pad) 80px;
  background: linear-gradient(180deg, #FCFCFD 0%, var(--ng-bg) 100%);
}
.om-hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; position: relative; }
.om-hero__copy h1 {
  font-size: 56px; line-height: 1.1; letter-spacing: -0.025em;
  margin-top: 16px; text-wrap: balance;
}
.om-hero__copy > p {
  margin-top: 22px; font-size: 18px; line-height: 1.65;
  color: var(--ng-fg-muted); max-width: 560px; text-wrap: pretty;
}
.om-hero__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.om-hero__visual { display: grid; place-items: center; gap: 18px; }
.om-hero__avatar {
  position: relative;
  width: 360px; height: 460px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--ng-blue-100), #fff 70%);
  display: grid; place-items: end center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(96,171,251,0.18), inset 0 0 0 1px rgba(96,171,251,0.18);
}
.om-hero__avatar::before {
  content:''; position: absolute; inset: 16px; border-radius: 18px;
  border: 1px dashed rgba(96,171,251,0.35); z-index: 1; pointer-events: none;
}
.om-hero__photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center 12%;
  position: relative; z-index: 0;
}
.om-hero__signature {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-top: 4px;
  font-family: var(--ng-font-sans); font-size: 14px;
  color: var(--ng-grey); letter-spacing: 0.06em;
}
.om-sig__name { color: var(--ng-black-primary); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }

.om-mission { text-align: left; }
.om-mission h2 {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
  margin-top: 14px; line-height: 1.2; text-wrap: balance;
}
.om-mission p {
  margin-top: 22px; font-size: 18px; line-height: 1.65;
  color: var(--ng-fg-muted);
}

.om-story__inner { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
.om-story__timeline { display: grid; gap: 14px; margin-top: 20px; }
.om-story__year {
  border-left: 2px solid var(--ng-brand-primary);
  padding-left: 16px; display: grid; gap: 2px;
}
.om-story__year strong {
  font-family: var(--ng-font-sans); font-size: 22px;
  letter-spacing: -0.02em; color: var(--ng-black-primary);
}
.om-story__year span { font-size: 14px; color: var(--ng-grey); }
.om-story__copy h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 22px; text-wrap: balance; }
.om-story__copy p { margin-bottom: 18px; font-size: 16px; line-height: 1.7; color: var(--ng-fg-muted); }
.om-story__copy strong { color: var(--ng-black-primary); }

/* O MNIE — SALES */
.om-sales { position: relative; overflow: hidden; }
.om-sales__inner { position: relative; }
.om-sales__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.om-sales__head h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; margin-top: 12px; line-height: 1.1; color: #fff; }
.om-sales__head p { margin-top: 18px; color: var(--ng-ink-200); font-size: 17px; }

.om-sales__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.om-sales__card {
  background: #1A1D22; border: 1px solid #242830;
  border-radius: 20px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: all 200ms var(--ng-ease-standard);
}
.om-sales__card:hover { transform: translateY(-3px); border-color: var(--ng-grey); }
.om-sales__card--featured {
  background: linear-gradient(180deg, rgba(96,171,251,0.08) 0%, rgba(22,83,199,0.04) 100%);
  border: 2px solid var(--ng-brand-primary);
  transform: scale(1.03);
}
.om-sales__card--featured:hover { transform: scale(1.04) translateY(-3px); }
.om-sales__featured-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--ng-brand-primary); color: var(--ng-black-primary);
  font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
  white-space: nowrap;
}
.om-sales__tag {
  font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ng-brand-primary);
}
.om-sales__card h3 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.om-sales__sub { color: var(--ng-ink-200); font-size: 14px; }
.om-sales__card ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.om-sales__card ul li { display: flex; align-items: flex-start; gap: 10px; color: var(--ng-ink-100); font-size: 14px; line-height: 1.5; }
.om-sales__card ul svg { color: var(--ng-brand-primary); margin-top: 3px; flex-shrink: 0; }
.om-sales__price {
  margin-top: auto; padding-top: 18px;
  border-top: 1px dashed #242830;
  display: flex; flex-direction: column; gap: 2px;
}
.om-sales__price span { color: var(--ng-ink-300); font-size: 14px; font-family: var(--ng-font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.om-sales__price strong { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.om-sales__card .btn { width: 100%; justify-content: center; margin-top: auto; }

.om-sales__below {
  margin-top: 36px; padding: 18px 24px;
  background: rgba(96,171,251,0.06); border: 1px dashed rgba(96,171,251,0.3);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--ng-ink-100);
}
.om-sales__below svg { color: var(--ng-brand-primary); }
.om-sales__below a { color: var(--ng-brand-primary); font-weight: 600; }

/* O MNIE — MEET */
.om-meet__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.om-meet__card {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 12px;
  padding: 22px 18px; display: flex; flex-direction: column; gap: 6px;
  text-align: center; aspect-ratio: 1/1; justify-content: center;
}
.om-meet__card .eyebrow { color: var(--ng-grey); }
.om-meet__card strong { font-size: 18px; font-weight: 700; color: var(--ng-black-primary); }
.om-meet__card span { font-size: 14px; color: var(--ng-grey); }

/* O MNIE — EDU */
.om-edu__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.om-edu__inner h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; line-height: 1.15; }
.om-edu__inner > div > p { margin-top: 18px; color: var(--ng-fg-muted); font-size: 16px; line-height: 1.6; }
.om-edu__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.om-edu__list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  background: #fff; border: 1px solid var(--ng-border); border-radius: 12px;
  padding: 18px 22px; align-items: center;
}
.om-edu__list svg { color: var(--ng-brand-secondary); }
.om-edu__list strong { display: block; font-size: 15px; font-weight: 700; }
.om-edu__list span { font-size: 14px; color: var(--ng-grey); }

/* O MNIE — PRIVATE */
.om-private__inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: center; }
.om-private__visual { position: relative; display: grid; place-items: center; }
.om-private__photo {
  width: 280px; height: 320px; border-radius: 20px;
  background: linear-gradient(160deg, var(--ng-blue-100), #fff 70%);
  display: grid; place-items: end center;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(96,171,251,0.15), inset 0 0 0 1px rgba(96,171,251,0.18);
}
.om-private__copy h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; line-height: 1.2; text-wrap: balance; }
.om-private__copy p { margin-top: 18px; color: var(--ng-fg-muted); font-size: 16px; line-height: 1.7; }

.om-end { padding: 96px var(--side-pad); text-align: center; }
.om-end__inner { max-width: 720px; margin: 0 auto; }
.om-end__inner h2 { font-size: 42px; font-weight: 700; letter-spacing: -0.025em; margin-top: 14px; line-height: 1.15; text-wrap: balance; }
.om-end__actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* ────────────────────────── KONTAKT ────────────────────────── */
.ko-hero {
  position: relative; overflow: hidden;
  padding: 96px var(--side-pad) 64px;
  background: linear-gradient(180deg, #FCFCFD 0%, var(--ng-bg) 100%);
}
.ko-hero__inner h1 {
  font-size: 64px; line-height: 1.05; letter-spacing: -0.03em;
  margin-top: 14px; text-wrap: balance; max-width: 920px;
}
.ko-hero__inner > p {
  margin-top: 20px; font-size: 18px; line-height: 1.6;
  color: var(--ng-fg-muted); max-width: 640px;
}
.ko-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.ko-hero__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ng-border);
  font-family: var(--ng-font-sans); font-size: 14px;
  color: var(--ng-grey); letter-spacing: 0.04em;
}
.ko-hero__chip svg { color: var(--ng-brand-secondary); }

.ko-faq__inner { max-width: 880px; margin: 0 auto; }
.ko-faq__head { margin-bottom: 28px; }
.ko-faq__head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.ko-faq__list { display: grid; gap: 8px; }

.ko-form__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.ko-form__copy h2 { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; line-height: 1.15; }
.ko-form__copy > p { margin-top: 16px; color: var(--ng-fg-muted); font-size: 16px; line-height: 1.6; }
.ko-form__author {
  display: flex; align-items: center; gap: 14px;
  margin-top: 32px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
}
.ko-form__author strong { display: block; font-size: 15px; font-weight: 700; }
.ko-form__author span { font-size: 14px; color: var(--ng-grey); }
.ko-form__list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.ko-form__list li {
  display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px dashed var(--ng-border);
}
.ko-form__list li:last-child { border-bottom: 0; }
.ko-form__list .eyebrow { color: var(--ng-grey); }
.ko-form__list a { color: var(--ng-black-primary); font-weight: 500; }
.ko-form__list a:hover { color: var(--ng-brand-secondary); }

.ko-form__form {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 20px;
  padding: 32px; display: grid; gap: 16px;
  box-shadow: var(--ng-shadow-sm);
}
.ko-form__form label { display: grid; gap: 6px; }
.ko-form__form .eyebrow { color: var(--ng-grey); }
.ko-form__form input[type="text"], .ko-form__form input[type="email"], .ko-form__form textarea {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 10px;
  padding: 12px 14px; color: var(--ng-black-primary);
  font-family: var(--ng-font-sans); font-size: 15px; outline: none;
  transition: all 200ms var(--ng-ease-standard); resize: vertical;
}
.ko-form__form input:focus, .ko-form__form textarea:focus {
  border-color: var(--ng-brand-primary);
  box-shadow: 0 0 0 4px rgba(96,171,251,0.2);
}
.ko-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ko-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ko-pill {
  background: var(--ng-white-secondary); border: 1px solid transparent;
  color: var(--ng-grey); border-radius: 999px;
  padding: 8px 14px; font-family: var(--ng-font-sans);
  font-size: 14px; font-weight: 500;
  transition: all 150ms var(--ng-ease-standard);
}
.ko-pill:hover { background: #fff; border-color: var(--ng-border); color: var(--ng-black-primary); }
.ko-pill.is-active { background: var(--ng-brand-secondary); color: #fff; }
.ko-form__consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  font-size: 14px; color: var(--ng-grey); line-height: 1.5;
  align-items: flex-start;
}
.ko-form__consent input { margin-top: 3px; }

/* ────────────────────────── DZIĘKUJĘ ────────────────────────── */
.dz-hero { position: relative; overflow: hidden; padding: 96px var(--side-pad); text-align: center; }
.dz-hero__inner { position: relative; max-width: 780px; margin: 0 auto; }
.dz-hero__icon {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(96,171,251,0.15); color: var(--ng-brand-primary);
  display: grid; place-items: center; margin: 0 auto 24px;
  box-shadow: 0 0 0 12px rgba(96,171,251,0.08);
}
.dz-hero__inner h1 { color: #fff; font-size: 52px; font-weight: 700; letter-spacing: -0.025em; margin-top: 16px; line-height: 1.1; text-wrap: balance; }
.dz-hero__inner > p { margin-top: 18px; color: var(--ng-ink-200); font-size: 18px; line-height: 1.6; }
.dz-hero__signature {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 32px; padding: 14px 22px;
  background: rgba(255,255,255,0.05); border: 1px solid #242830; border-radius: 999px;
}
.dz-hero__signature strong { color: #fff; font-weight: 600; font-size: 14px; display: block; }
.dz-hero__signature span { color: var(--ng-ink-300); font-size: 14px; }

.dz-meantime .section-head { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.dz-meantime .section-head h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.dz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dz-card {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: all 200ms var(--ng-ease-standard);
}
.dz-card:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); border-color: var(--ng-border-strong); }
.dz-card__num {
  position: absolute; top: 20px; right: 24px;
  font-family: var(--ng-font-sans); font-size: 22px; font-weight: 600;
  color: var(--ng-border-strong); letter-spacing: -0.02em;
}
.dz-card__icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; }
.dz-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.dz-card p { color: var(--ng-fg-muted); font-size: 14px; line-height: 1.55; }
.dz-card .btn { align-self: flex-start; margin-top: 6px; }

.dz-firm__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.dz-firm__inner h2 { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; line-height: 1.15; }
.dz-firm__inner > div > p { margin-top: 16px; color: var(--ng-fg-muted); font-size: 16px; }
.dz-firm__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.dz-firm__steps > div {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 12px;
  padding: 18px; display: flex; flex-direction: column; gap: 4px;
}
.dz-firm__steps span { font-family: var(--ng-font-sans); font-size: 14px; color: var(--ng-brand-secondary); letter-spacing: 0.05em; font-weight: 600; }
.dz-firm__steps strong { font-size: 14px; font-weight: 700; color: var(--ng-black-primary); }
.dz-firm__steps small { font-size: 14px; color: var(--ng-grey); }
.dz-firm__card {
  background: var(--ng-black-primary); color: #fff;
  border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--ng-shadow-md);
}
.dz-firm__card h4 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.dz-firm__card p { color: var(--ng-ink-200); font-size: 14px; }
.dz-firm__card .btn { align-self: flex-start; margin-top: 6px; }

.dz-social { padding-top: 56px; padding-bottom: 56px; }
.dz-social__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.dz-social__inner h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin-top: 8px; }
.dz-social__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.dz-social__btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 12px; color: #fff;
  transition: all 200ms var(--ng-ease-standard); cursor: pointer;
}
.dz-social__btn:hover { transform: translateY(-2px); box-shadow: var(--ng-shadow-md); color: #fff; }
.dz-social__btn strong { display: block; font-size: 14px; font-weight: 700; }
.dz-social__btn span { font-size: 14px; opacity: 0.85; }

/* ──────────────────────────────────────────────────────────────────────────
   HUB — real YouTube thumbnail (i.ytimg) with branded fallback
   ────────────────────────────────────────────────────────────────────────── */
.hub-tile__thumb, .hub-feat__thumb, .hub-feat-mini__thumb { position: relative; overflow: hidden; }

/* real thumbnail image — covers the gradient when it loads */
.hub-thumb__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2; display: block;
}

/* branded fallback shown when there is no (or a failed) image */
.hub-thumb__fb {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
}
.hub-thumb__wm {
  position: absolute; top: 14px; right: 14px; width: 38px; height: auto;
  opacity: 0.22; pointer-events: none;
}
.hub-thumb__title {
  position: relative; max-width: 72%;
  font-family: var(--ng-font-sans); font-weight: 700; color: #fff;
  font-size: 15px; line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.hub-feat__thumb .hub-thumb__title { max-width: 78%; font-size: clamp(18px, 2vw, 24px); }

/* keep badges / duration / play above the image */
.hub-tile__type, .hub-feat__type,
.hub-tile__dur, .hub-feat__dur,
.hub-tile__play, .hub-feat__play { z-index: 3; }
.hub-feat-mini__thumb > svg, .hub-feat-mini__thumb > span { position: relative; z-index: 3; }

/* ---- BAZA WIEDZY — materiały do pobrania ---- */
.kb-hero__jump { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.kb-hero__hint { font-size: 14px; color: var(--ng-fg-muted); max-width: 320px; line-height: 1.45; }
.kb-dl { background: var(--ng-white-secondary); }
.kb-dl__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.kb-dl__head h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.2; margin-top: 10px; }
.kb-dl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kb-dl-card { background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.kb-dl-card.is-featured { border-color: var(--ng-blue-200); box-shadow: 0 10px 30px rgba(22,83,199,0.07); }
.kb-dl-card__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ng-blue-100); color: var(--ng-brand-secondary); }
.kb-dl-card h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
.kb-dl-card p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.5; }
.kb-dl-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--ng-border); }
.kb-dl-card__meta { font-family: var(--ng-font-sans); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ng-fg-subtle); }
.hub-tile--dl .hub-tile__thumb { background: var(--ng-blue-100); }
.hub-tile__dl-cover { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ng-brand-secondary); background: var(--ng-blue-100); }
.hub-tile--dl .hub-tile__body { gap: 12px; }
.hub-tile--dl .hub-tile__body .btn { align-self: flex-start; }

/* ---- O MNIE: nowe sekcje ---- */
.om-who__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: start; }
.om-who__copy h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin-top: 14px; text-wrap: balance; }
.om-who__copy p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ng-fg-muted); }
.om-who__list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; font-size: 17px; }
.om-who__list li { display: flex; gap: 12px; align-items: flex-start; }
.om-who__list svg { color: var(--ng-brand-secondary); flex: none; margin-top: 4px; }
.om-who__aside { background: var(--ng-white-secondary); border-radius: 18px; padding: 28px; display: grid; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ng-fg-muted); margin-top: 44px; }
.om-who__aside strong { font-size: 22px; letter-spacing: -0.02em; color: var(--ng-fg); }
.om-ai__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.om-ai__lead h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin-top: 14px; text-wrap: balance; }
.om-ai__copy { display: grid; gap: 20px; font-size: 17px; line-height: 1.65; color: var(--ng-fg-muted); }
.om-ai__quote { margin: 6px 0; padding: 22px 26px; background: var(--ng-bg-elev); border-radius: 14px; font-size: 19px; line-height: 1.45; color: var(--ng-fg); font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--ng-border); }
.ko-faq__note { margin-top: 12px; font-size: 14.5px; color: var(--ng-fg-muted); }
@media (max-width: 900px) { .om-who__inner, .om-ai__inner { grid-template-columns: 1fr; gap: 32px; } .om-who__aside { margin-top: 0; } }

.kb-dl-card__cover { aspect-ratio: 3/4; max-width: 120px; border-radius: 10px; overflow: hidden; box-shadow: var(--ng-shadow-md); }
.kb-dl-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-tile__dl-cover img { height: 88%; width: auto; max-width: 100%; object-fit: contain; display: block; border-radius: 6px; box-shadow: var(--ng-shadow-md); }

.om-meet__photo { display: block; width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 20px; margin-bottom: 28px; }
/* baza wiedzy: thumbs by format */
.hub-tile .hub-tile__type { top: auto; bottom: 10px; left: 10px; }
.hub-tile--pod .hub-thumb__img, .hub-tile--tiktok .hub-thumb__img { object-fit: contain; background: #121417; }
.hub-tile--tiktok .hub-tile__thumb { background: #121417; }
.hub-tile--pdf .hub-tile__thumb { background: var(--ng-blue-100); }
.hub-tile--pdf .hub-tile__body { gap: 12px; }
.hub-tile--pdf .hub-tile__body .btn { align-self: flex-start; }

/* styles-warsztaty.css */
/* ==========================================================================
   NetGonet — Warsztaty AI (przebudowa)
   Prefix: .wsr-  — own visual system on top of global tokens/buttons
   ========================================================================== */

.wsr-accent { color: var(--ng-brand-primary); }

/* ───────────────── HERO ───────────────── */
.wsr-hero { position: relative; overflow: hidden; padding: clamp(64px,8vw,112px) var(--side-pad) clamp(64px,7vw,96px); }
.wsr-hero__inner {
  position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px,5vw,72px); align-items: center;
}
.wsr-hero__copy h1 {
  font-size: clamp(34px,6vw,72px); line-height: 1.03; letter-spacing: -0.03em;
  margin-top: 14px; text-wrap: balance; color: #fff;
}
.wsr-hero__copy > p {
  margin-top: 22px; font-size: clamp(15px,1.3vw,19px); line-height: 1.6;
  color: var(--ng-ink-200); max-width: 560px;
}
.wsr-hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.wsr-hero__chips {
  list-style: none; padding: 0; margin: 32px 0 0; display: flex; gap: 12px 22px; flex-wrap: wrap;
  font-size: 14px; color: var(--ng-ink-200);
}
.wsr-hero__chips li { display: inline-flex; align-items: center; gap: 9px; }
.wsr-hero__chips svg { color: var(--ng-brand-primary); }
.wsr-hero__tools { margin-top: 30px; padding-top: 26px; border-top: 1px solid #242830; }
.wsr-hero__tools > span {
  font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ng-ink-300);
}
.wsr-hero__tool-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wsr-tool {
  font-size: 14px; font-weight: 500; color: var(--ng-ink-100);
  padding: 7px 14px; border-radius: 999px;
  background: #1A1D22; border: 1px solid #242830;
}

.wsr-hero__panel {
  background: #1A1D22; border: 1px solid #242830; border-radius: 22px;
  padding: clamp(22px,2.5vw,32px); box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.wsr-hero__panel-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ng-brand-primary); margin-bottom: 18px;
}
.wsr-hero__dates { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.wsr-hero__dates li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px dashed #242830;
}
.wsr-hero__dates li:last-child { border-bottom: 0; }
.wsr-hero__dates li > div { display: flex; flex-direction: column; gap: 3px; }
.wsr-hero__dates strong { color: #fff; font-size: 16px; font-weight: 600; }
.wsr-hero__dates span { color: var(--ng-ink-300); font-size: 14px; letter-spacing: 0.03em; }
.wsr-pill { font-size: 14px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.wsr-pill--accent { background: rgba(96,171,251,0.16); color: var(--ng-brand-primary); }
.wsr-pill--muted { background: #242830; color: var(--ng-ink-200); }
.wsr-hero__panel-foot { margin-top: 14px; padding-top: 20px; border-top: 1px solid #242830; display: grid; gap: 5px; }
.wsr-hero__panel-foot-label { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ng-ink-300); }
.wsr-hero__panel-foot strong { color: #fff; font-size: clamp(17px,1.6vw,21px); font-weight: 700; }
.wsr-hero__panel-foot-sub { color: var(--ng-ink-300); font-size: 14px; }

/* ───────────────── FLOW BAND ───────────────── */
.wsr-flow { background: var(--ng-bg-elev); border-bottom: 1px solid var(--ng-divider); padding: clamp(40px,5vw,64px) var(--side-pad); }
.wsr-flow__inner { display: flex; align-items: stretch; justify-content: center; gap: 8px; }
.wsr-flow__node { flex: 1; max-width: 320px; text-align: center; padding: 8px 16px; }
.wsr-flow__ic {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px;
  display: grid; place-items: center; color: var(--ng-fg-muted);
  background: var(--ng-bg-muted); border: 1px solid var(--ng-border);
}
.wsr-flow__ic--accent { background: var(--ng-black-primary); color: var(--ng-brand-primary); border-color: transparent; }
.wsr-flow__ic--done { background: var(--ng-blue-100); color: var(--ng-brand-secondary); border-color: var(--ng-blue-200); }
.wsr-flow__node h4 { font-size: 18px; margin-bottom: 6px; }
.wsr-flow__node p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.45; }
.wsr-flow__arrow { display: grid; place-items: center; color: var(--ng-border-strong); flex-shrink: 0; }

/* ───────────────── MAPA WDROŻENIA ───────────────── */
.wsr-map__diagram { position: relative; max-width: 940px; margin: 8px auto 0; }
.wsr-map__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(56px,9vw,120px); row-gap: clamp(48px,6vw,80px); }
.wsr-map__card {
  position: relative; z-index: 2; background: var(--ng-bg-elev);
  border: 1px solid var(--ng-border); border-radius: 18px; padding: 26px;
  box-shadow: var(--ng-shadow-sm);
}
.wsr-map__card-ic {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ng-blue-100); color: var(--ng-brand-secondary); border: 1px solid var(--ng-blue-200);
  margin-bottom: 16px;
}
.wsr-map__card h4 { font-size: 19px; margin-bottom: 8px; }
.wsr-map__card p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.5; }
.wsr-map__card--0 { text-align: right; }  .wsr-map__card--0 .wsr-map__card-ic { margin-left: auto; }
.wsr-map__card--1 { text-align: left; }
.wsr-map__card--2 { text-align: right; }  .wsr-map__card--2 .wsr-map__card-ic { margin-left: auto; }
.wsr-map__card--3 { text-align: left; }

.wsr-map__lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wsr-map__lines::before { content: ''; position: absolute; top: 50%; left: 12%; right: 12%; height: 2px; transform: translateY(-1px); background: linear-gradient(90deg, transparent, var(--ng-blue-300) 30%, var(--ng-blue-300) 70%, transparent); }
.wsr-map__lines::after  { content: ''; position: absolute; left: 50%; top: 14%; bottom: 14%; width: 2px; transform: translateX(-1px); background: linear-gradient(180deg, transparent, var(--ng-blue-300) 30%, var(--ng-blue-300) 70%, transparent); }
.wsr-map__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--ng-black-primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 18px 48px rgba(18,20,23,0.32), 0 0 0 8px var(--ng-bg-muted);
}
.wsr-map__hub img { width: 40px; opacity: 0.95; margin-bottom: 6px; }
.wsr-map__hub strong { font-size: 16px; font-weight: 700; }
.wsr-map__hub span { font-size: 14px; color: var(--ng-ink-200); }

/* ───────────────── BEFORE / AFTER ───────────────── */
.wsr-ba__chart { max-width: 900px; margin: 8px auto 0; }
.wsr-ba__legend { display: flex; gap: 24px; justify-content: flex-end; margin-bottom: 20px; font-size: 14px; color: var(--ng-fg-muted); }
.wsr-ba__legend span { display: inline-flex; align-items: center; gap: 8px; }
.wsr-ba__sw { width: 14px; height: 14px; border-radius: 4px; }
.wsr-ba__sw--before { background: var(--ng-ink-200); }
.wsr-ba__sw--after { background: linear-gradient(90deg, var(--ng-blue-500), var(--ng-brand-primary)); }
.wsr-ba__row { display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ng-border); }
.wsr-ba__row:last-child { border-bottom: 1px solid var(--ng-border); }
.wsr-ba__task { font-size: 15px; font-weight: 600; }
.wsr-ba__bars { display: flex; flex-direction: column; gap: 9px; padding-right: 62px; }
.wsr-ba__bar { position: relative; height: 30px; min-width: 5px; border-radius: 8px; }
.wsr-ba__bar--before { background: var(--ng-ink-200); }
.wsr-ba__bar--after { background: linear-gradient(90deg, var(--ng-blue-500), var(--ng-brand-primary)); }
.wsr-ba__bar span {
  position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%);
  font-family: var(--ng-font-mono); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.wsr-ba__bar--before span { color: var(--ng-fg-subtle); }
.wsr-ba__bar--after span { color: var(--ng-brand-secondary); }

/* ───────────────── OBSZARY WDROŻENIA ───────────────── */
.wsr-areas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wsr-area {
  background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 18px; padding: 26px;
  transition: transform var(--ng-dur-base) var(--ng-ease-standard), box-shadow var(--ng-dur-base) var(--ng-ease-standard);
}
.wsr-area:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); }
.wsr-area__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wsr-area__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ng-blue-100); color: var(--ng-brand-secondary); border: 1px solid var(--ng-blue-200); }
.wsr-area__n { font-family: var(--ng-font-mono); font-size: 14px; font-weight: 600; color: var(--ng-border-strong); }
.wsr-area h4 { font-size: 19px; margin-bottom: 16px; }
.wsr-area ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.wsr-area ul li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ng-fg-muted); }
.wsr-area ul li svg { color: var(--ng-brand-primary); flex-shrink: 0; }
.wsr-area--cta { background: var(--ng-black-primary); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.wsr-area--cta h4 { color: #fff; margin: 0; }
.wsr-area--cta p { color: var(--ng-ink-200); font-size: 14px; line-height: 1.5; }
.wsr-area--cta:hover { transform: none; box-shadow: none; }

/* ───────────────── AGENDA TIMELINE ───────────────── */
.wsr-agenda { position: relative; overflow: hidden; }
.wsr-timeline { list-style: none; padding: 0; margin: 0 auto; position: relative; max-width: 780px; }
.wsr-timeline::before {
  content: ''; position: absolute; left: 105px; top: 22px; bottom: 22px; width: 2px;
  background: linear-gradient(180deg, var(--ng-brand-primary), #242830);
}
.wsr-timeline__item { display: grid; grid-template-columns: 72px 32px 1fr; gap: 18px; align-items: start; padding: 16px 0; }
.wsr-timeline__time { font-family: var(--ng-font-mono); font-size: 15px; font-weight: 600; color: var(--ng-brand-primary); text-align: right; padding-top: 5px; }
.wsr-timeline__dot {
  width: 32px; height: 32px; border-radius: 50%; z-index: 1;
  background: #1A1D22; border: 2px solid var(--ng-brand-primary);
  display: grid; place-items: center; color: var(--ng-brand-primary);
}
.wsr-timeline__body { padding-top: 2px; }
.wsr-timeline__body h4 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.wsr-timeline__body p { color: var(--ng-ink-200); font-size: 14.5px; line-height: 1.5; }

/* ───────────────── CO OTRZYMUJECIE ───────────────── */
.wsr-get__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px,5vw,72px); align-items: start; }
.wsr-get__copy { position: sticky; top: 100px; }
.wsr-get__copy h2 { margin: 14px 0 16px; }
.wsr-get__copy p { color: var(--ng-fg-muted); font-size: 17px; line-height: 1.6; margin-bottom: 28px; }
.wsr-get__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.wsr-get__list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--ng-border); }
.wsr-get__list li:first-child { padding-top: 0; }
.wsr-get__check { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ng-blue-100); color: var(--ng-brand-secondary); }
.wsr-get__list strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.wsr-get__list span { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.5; }

/* ───────────────── FORMATY ───────────────── */
.wsr-formats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 940px; margin: 0 auto; }
.wsr-format { position: relative; background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 22px; padding: 36px; display: flex; flex-direction: column; }
.wsr-format--featured { border: 2px solid var(--ng-brand-primary); box-shadow: var(--ng-shadow-lg); }
.wsr-format__badge { position: absolute; top: -13px; left: 36px; background: var(--ng-brand-primary); color: #fff; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.wsr-format__tag { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-brand-secondary); margin-bottom: 10px; }
.wsr-format h3 { font-size: 26px; margin-bottom: 6px; }
.wsr-format__sub { font-size: 14px; color: var(--ng-fg-muted); margin-bottom: 22px; }
.wsr-format ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.wsr-format ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ng-fg); line-height: 1.4; }
.wsr-format ul li svg { color: var(--ng-brand-primary); flex-shrink: 0; margin-top: 2px; }
.wsr-format__price { margin-top: auto; padding: 18px 0; border-top: 1px solid var(--ng-border); display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.wsr-format__price span { font-size: 14px; color: var(--ng-fg-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.wsr-format__price strong { font-size: 26px; font-weight: 700; }
.wsr-format__price em { font-style: normal; font-size: 14px; color: var(--ng-fg-muted); }
.wsr-format .btn { width: 100%; justify-content: center; }
.wsr-formats__below { text-align: center; margin-top: 28px; font-size: 15px; color: var(--ng-fg-muted); }

/* ───────────────── CLIENTS + QUOTE ───────────────── */
.wsr-clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
.wsr-clients__logo {
  display: grid; place-items: center; padding: 26px 16px; text-align: center;
  background: #1A1D22; border: 1px solid #242830; border-radius: 14px;
  font-weight: 600; font-size: 15px; color: var(--ng-ink-100); letter-spacing: -0.01em;
}
.wsr-quote { max-width: 820px; margin: 0 auto; text-align: center; color: var(--ng-brand-primary); }
.wsr-quote blockquote { margin: 18px 0 22px; font-size: clamp(18px,2vw,24px); line-height: 1.45; color: #fff; font-weight: 500; text-wrap: balance; }
.wsr-quote figcaption strong { color: #fff; font-size: 16px; display: block; }
.wsr-quote figcaption span { color: var(--ng-ink-200); font-size: 14px; }

/* ───────────────── CTA ───────────────── */
.wsr-cta { position: relative; overflow: hidden; padding: clamp(72px,8vw,112px) var(--side-pad); text-align: center; }
.wsr-cta__inner { position: relative; max-width: 720px; margin: 0 auto; }
.wsr-cta__inner h2 { color: #fff; margin: 14px 0 16px; font-size: clamp(28px,4vw,48px); }
.wsr-cta__inner > p { color: var(--ng-ink-200); font-size: 18px; line-height: 1.6; max-width: 560px; margin: 0 auto; }
.wsr-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.wsr-cta__ladder { display: flex; gap: 10px 24px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 36px; padding-top: 28px; border-top: 1px solid #242830; font-size: 14px; }
.wsr-cta__ladder span { color: var(--ng-ink-300); }
.wsr-cta__ladder a { color: var(--ng-brand-primary); font-weight: 500; }
.wsr-cta__ladder a:hover { color: #fff; }

/* ───────────────── RESPONSIVE ───────────────── */
@media (max-width: 1000px) {
  .wsr-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .wsr-get__inner { grid-template-columns: 1fr; gap: 36px; }
  .wsr-get__copy { position: static; }
  .wsr-areas__grid { grid-template-columns: repeat(2, 1fr); }
  .wsr-formats__grid { grid-template-columns: 1fr; }
  .wsr-clients__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  /* Flow → stack vertically, arrows rotate */
  .wsr-flow__inner { flex-direction: column; align-items: center; gap: 4px; }
  .wsr-flow__arrow { transform: rotate(90deg); }
  .wsr-flow__node { max-width: 420px; }

  /* Map → single column, hub becomes a banner on top */
  .wsr-map__diagram { display: flex; flex-direction: column; gap: 14px; }
  .wsr-map__lines { display: none; }
  .wsr-map__grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 14px; }
  .wsr-map__card, .wsr-map__card--0, .wsr-map__card--2 { text-align: left; }
  .wsr-map__card--0 .wsr-map__card-ic, .wsr-map__card--2 .wsr-map__card-ic { margin-left: 0; }
  .wsr-map__hub {
    position: static; transform: none; order: -1; width: 100%; height: auto;
    flex-direction: row; gap: 14px; border-radius: 16px; padding: 18px 22px;
    justify-content: flex-start; box-shadow: none;
  }
  .wsr-map__hub img { width: 30px; margin: 0; }
  .wsr-map__hub span { color: var(--ng-ink-200); }

  /* Before/after → label-friendly, narrower task col */
  .wsr-ba__row { grid-template-columns: 1fr; gap: 12px; }
  .wsr-ba__bars { padding-right: 56px; }
  .wsr-ba__legend { justify-content: flex-start; }

  /* Areas → single column */
  .wsr-areas__grid { grid-template-columns: 1fr; }
  .wsr-clients__grid { grid-template-columns: 1fr 1fr; }

  /* Timeline → tighter time column */
  .wsr-timeline__item { grid-template-columns: 56px 28px 1fr; gap: 14px; }
  .wsr-timeline::before { left: 83px; }
  .wsr-timeline__dot { width: 28px; height: 28px; }
  .wsr-timeline__time { font-size: 14px; }

  .wsr-hero__actions .btn, .wsr-cta__actions .btn { width: 100%; justify-content: center; }
  .wsr-hero__actions, .wsr-cta__actions { width: 100%; }
}

/* styles-agenci.css */
/* ==========================================================================
   NetGonet — System Agentów AI (landing)
   Prefix: .ag-
   ========================================================================== */

/* ───────────────── HERO ───────────────── */
.ag-hero { position: relative; overflow: hidden; padding: clamp(64px,8vw,108px) var(--side-pad) clamp(48px,5vw,72px); }
.ag-hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px,5vw,72px); align-items: center; }
.ag-hero__copy h1 { font-size: clamp(40px,6.5vw,82px); line-height: 1.0; letter-spacing: -0.035em; margin-top: 16px; color: #fff; }
.ag-hero__promise { margin-top: 22px; font-size: clamp(17px,1.7vw,23px); font-weight: 600; color: #fff; line-height: 1.4; text-wrap: balance; }
.ag-hero__lead { margin-top: 16px; font-size: clamp(15px,1.25vw,18px); line-height: 1.6; color: var(--ng-ink-200); max-width: 560px; }
.ag-hero__tools { margin-top: 26px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-hero__tools > span:first-child { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-ink-300); margin-right: 4px; }
.ag-tool { font-size: 14px; font-weight: 500; color: var(--ng-ink-100); padding: 6px 13px; border-radius: 999px; background: #1A1D22; border: 1px solid #242830; }
.ag-hero__actions { display: flex; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.ag-hero__price-inline { display: flex; flex-direction: column; gap: 1px; }
.ag-hero__price-inline strong { color: #fff; font-size: 22px; font-weight: 700; }
.ag-hero__price-inline span { color: var(--ng-ink-300); font-size: 14px; }
.ag-hero__note { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ng-brand-primary); }

.ag-hero__panel { background: #1A1D22; border: 1px solid #242830; border-radius: 22px; padding: clamp(20px,2.4vw,30px); box-shadow: 0 32px 80px rgba(0,0,0,0.5); }
.ag-hero__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ag-hero__panel-tag { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ng-brand-primary); }
.ag-hero__panel-live { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ng-ink-200); }
.ag-hero__panel-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ng-success); box-shadow: 0 0 0 3px rgba(30,169,124,0.2); }
.ag-hero__roster { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ag-hero__roster li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: #15181D; border: 1px solid #242830; border-radius: 12px; }
.ag-hero__roster-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(96,171,251,0.12); color: var(--ng-brand-primary); flex-shrink: 0; }
.ag-hero__roster-name { flex: 1; color: #E6EAEF; font-size: 14px; font-weight: 500; }
.ag-hero__roster-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ng-brand-primary); opacity: 0.7; }
.ag-hero__panel-foot { margin-top: 14px; padding-top: 16px; border-top: 1px dashed #242830; font-size: 14px; color: var(--ng-ink-300); line-height: 1.4; }

.ag-trust { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: clamp(48px,5vw,72px); padding-top: clamp(32px,4vw,44px); border-top: 1px solid #242830; }
.ag-trust div { display: flex; flex-direction: column; gap: 4px; }
.ag-trust strong { color: #fff; font-size: clamp(22px,2.4vw,30px); font-weight: 700; letter-spacing: -0.02em; }
.ag-trust span { color: var(--ng-ink-300); font-size: 14px; }

/* ───────────────── CO TO ZMIENIA ───────────────── */
.ag-change__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ag-change__card { background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 18px; padding: 28px; }
.ag-change__ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--ng-blue-100); color: var(--ng-brand-secondary); border: 1px solid var(--ng-blue-200); margin-bottom: 18px; }
.ag-change__card h4 { font-size: 18px; margin-bottom: 8px; }
.ag-change__card p { font-size: 15px; color: var(--ng-fg-muted); line-height: 1.55; }

/* ───────────────── PROBLEM ───────────────── */
.ag-problem__inner { max-width: 760px; margin: 0 auto; }
.ag-problem__head { text-align: center; margin-bottom: 40px; }
.ag-problem__head .overline { justify-content: center; }
.ag-problem__story p { font-size: clamp(17px,1.7vw,21px); line-height: 1.6; color: var(--ng-fg); margin-bottom: 18px; }
.ag-problem__turn { color: var(--ng-fg) !important; }
.ag-problem__turn strong { color: var(--ng-brand-secondary); }
.ag-problem__key { font-weight: 600; padding: 22px 26px; background: var(--ng-bg-elev); border-left: 3px solid var(--ng-brand-primary); border-radius: 0 12px 12px 0; margin-top: 8px !important; }

/* ───────────────── ROZWIĄZANIE ───────────────── */
.ag-solution__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ag-solution__card { padding: 28px; border-radius: 18px; background: var(--ng-bg-elev); border: 1px solid var(--ng-border); }
.ag-solution__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ng-black-primary); color: #fff; font-family: var(--ng-font-mono); font-size: 16px; font-weight: 600; margin-bottom: 18px; }
.ag-solution__card h4 { font-size: 19px; margin-bottom: 8px; }
.ag-solution__card p { font-size: 15px; color: var(--ng-fg-muted); line-height: 1.55; }

/* ───────────────── JAK TO DZIAŁA ───────────────── */
.ag-how__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; counter-reset: none; }
.ag-how__step { position: relative; background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 18px; padding: 30px 28px; }
.ag-how__step-ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: var(--ng-black-primary); color: var(--ng-brand-primary); margin-bottom: 18px; }
.ag-how__step-n { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-brand-secondary); }
.ag-how__step h4 { font-size: 20px; margin: 6px 0 10px; }
.ag-how__step p { font-size: 14.5px; color: var(--ng-fg-muted); line-height: 1.55; }

/* ───────────────── CO OTRZYMUJESZ ───────────────── */
.ag-get__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ag-get__card { display: flex; gap: 18px; align-items: flex-start; background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 18px; padding: 28px; }
.ag-get__ic { flex-shrink: 0; width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--ng-blue-100); color: var(--ng-brand-secondary); border: 1px solid var(--ng-blue-200); }
.ag-get__card h4 { font-size: 18px; margin-bottom: 8px; }
.ag-get__card p { font-size: 14.5px; color: var(--ng-fg-muted); line-height: 1.55; }

/* ───────────────── ZESPÓŁ AGENTÓW ───────────────── */
.ag-team__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.ag-agent { background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 16px; padding: 24px; transition: transform var(--ng-dur-base) var(--ng-ease-standard), box-shadow var(--ng-dur-base) var(--ng-ease-standard); }
.ag-agent:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); }
.ag-agent__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ag-agent__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--ng-black-primary); color: var(--ng-brand-primary); flex-shrink: 0; }
.ag-agent__head h4 { font-size: 18px; }
.ag-agent__desc { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.5; margin-bottom: 16px; }
.ag-agent__demo { display: grid; gap: 8px; }
.ag-agent__line { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
.ag-agent__line span { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; }
.ag-agent__line--in { background: var(--ng-bg-muted); }
.ag-agent__line--in span { color: var(--ng-fg-subtle); }
.ag-agent__line--in p { color: var(--ng-fg); }
.ag-agent__line--out { background: var(--ng-accent-soft); }
.ag-agent__line--out span { color: var(--ng-brand-secondary); }
.ag-agent__line--out p { color: var(--ng-fg); font-weight: 500; }

/* ───────────────── PROGRAM ───────────────── */
.ag-program__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ag-mod { display: flex; flex-direction: column; background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 20px; padding: 30px; }
.ag-mod__top { padding-bottom: 18px; border-bottom: 1px solid var(--ng-border); margin-bottom: 18px; }
.ag-mod__tag { display: inline-block; font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-brand-secondary); background: var(--ng-accent-soft); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.ag-mod__top h3 { font-size: 22px; margin-bottom: 6px; }
.ag-mod__sub { font-size: 14px; color: var(--ng-fg-muted); font-style: italic; }
.ag-mod ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; flex: 1; }
.ag-mod ul li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ng-fg); line-height: 1.4; }
.ag-mod ul li svg { color: var(--ng-brand-primary); flex-shrink: 0; margin-top: 3px; }
.ag-mod__efekt { font-size: 14px; color: var(--ng-fg-muted); padding: 14px 16px; background: var(--ng-bg-muted); border-radius: 12px; line-height: 1.45; }
.ag-mod__efekt strong { color: var(--ng-fg); }

/* ───────────────── DLA KOGO ───────────────── */
.ag-fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ag-fit__col { border-radius: 20px; padding: 34px; }
.ag-fit__col--yes { background: var(--ng-bg-elev); border: 1px solid var(--ng-border); }
.ag-fit__col--no { background: transparent; border: 1px dashed var(--ng-border-strong); }
.ag-fit__col h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 22px; }
.ag-fit__col--yes h3 svg { color: var(--ng-success); }
.ag-fit__col--no h3 { color: var(--ng-fg-muted); }
.ag-fit__col--no h3 svg { color: var(--ng-danger); }
.ag-fit__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ag-fit__col li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; }
.ag-fit__col li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; margin-top: 8px; }
.ag-fit__col--yes li::before { background: var(--ng-success); }
.ag-fit__col--no li { color: var(--ng-fg-muted); }
.ag-fit__col--no li::before { background: var(--ng-border-strong); }

/* ───────────────── SOCIAL PROOF ───────────────── */
.ag-proof__lead { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.ag-proof__lead .overline { justify-content: center; }
.ag-proof__lead h2 { margin: 14px 0 16px; }
.ag-proof__lead p { font-size: 17px; color: var(--ng-fg-muted); line-height: 1.6; }
.ag-proof__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ag-proof__card { background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 18px; padding: 28px; }
.ag-proof__card > svg { color: var(--ng-brand-primary); margin-bottom: 14px; }
.ag-proof__card blockquote { font-size: 16px; line-height: 1.5; color: var(--ng-fg); margin: 0 0 16px; font-weight: 500; }
.ag-proof__card figcaption { font-size: 14px; font-weight: 600; color: var(--ng-fg-muted); }

/* ───────────────── OFERTA ───────────────── */
.ag-offer { position: relative; overflow: hidden; }
.ag-offer__inner { position: relative; display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(36px,5vw,64px); align-items: center; }
.ag-offer__copy h2 { color: #fff; margin: 14px 0 14px; font-size: clamp(28px,3.6vw,44px); }
.ag-offer__copy > p { color: var(--ng-ink-200); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.ag-offer__guarantee { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ag-offer__guarantee li { display: flex; align-items: center; gap: 10px; color: var(--ng-ink-100); font-size: 15px; }
.ag-offer__guarantee svg { color: var(--ng-brand-primary); }
.ag-offer__card { background: #fff; border-radius: 22px; padding: 34px; box-shadow: 0 32px 80px rgba(0,0,0,0.45); }
.ag-offer__card-tag { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ng-brand-secondary); margin-bottom: 20px; }
.ag-offer__stack { list-style: none; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--ng-border); display: grid; gap: 12px; }
.ag-offer__stack li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ng-fg); line-height: 1.4; }
.ag-offer__stack svg { color: var(--ng-success); flex-shrink: 0; margin-top: 2px; }
.ag-offer__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.ag-offer__price-old { font-size: 20px; color: var(--ng-fg-subtle); text-decoration: line-through; }
.ag-offer__price strong { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--ng-fg); }
.ag-offer__price-tag { flex-basis: 100%; font-size: 14px; color: var(--ng-fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ag-offer__cta { width: 100%; justify-content: center; }
.ag-offer__urgency { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 14px; color: var(--ng-fg-muted); }

/* ───────────────── BONUS ───────────────── */
.ag-bonus__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ag-bonus__personal, .ag-bonus__qa { border-radius: 20px; padding: 34px; }
.ag-bonus__personal { background: var(--ng-bg-elev); border: 1px solid var(--ng-border); }
.ag-bonus__qa { background: var(--ng-black-primary); color: #fff; position: relative; }
.ag-bonus__personal h3, .ag-bonus__qa h3 { font-size: 22px; margin: 8px 0 10px; }
.ag-bonus__qa h3 { color: #fff; }
.ag-bonus__personal > p { font-size: 15px; color: var(--ng-fg-muted); line-height: 1.55; margin-bottom: 20px; }
.ag-bonus__qa > p { font-size: 15px; color: var(--ng-ink-200); line-height: 1.55; margin-bottom: 18px; }
.ag-bonus__personal ul, .ag-bonus__qa ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ag-bonus__personal li, .ag-bonus__qa li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; }
.ag-bonus__personal li svg { color: var(--ng-brand-secondary); flex-shrink: 0; margin-top: 2px; }
.ag-bonus__qa li { color: var(--ng-ink-100); }
.ag-bonus__qa li svg { color: var(--ng-brand-primary); flex-shrink: 0; margin-top: 2px; }
.ag-bonus__qa-tag { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ng-black-primary); background: var(--ng-brand-primary); padding: 5px 12px; border-radius: 999px; margin-bottom: 4px; }
.ag-bonus__qa-note { margin-top: 16px; font-size: 14px; color: var(--ng-ink-300); }

/* ───────────────── FINAL ───────────────── */
.ag-final { position: relative; overflow: hidden; padding: clamp(72px,8vw,112px) var(--side-pad); text-align: center; }
.ag-final__inner { position: relative; max-width: 860px; margin: 0 auto; }
.ag-final__inner h2 { color: #fff; margin: 14px 0 36px; font-size: clamp(28px,4vw,48px); }
.ag-final__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; text-align: left; }
.ag-final__choice { padding: 28px; border-radius: 18px; }
.ag-final__choice span { font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 12px; }
.ag-final__choice p { font-size: 15px; line-height: 1.55; }
.ag-final__choice--a { background: #1A1D22; border: 1px solid #242830; }
.ag-final__choice--a span { color: var(--ng-ink-300); }
.ag-final__choice--a p { color: var(--ng-ink-200); }
.ag-final__choice--b { background: rgba(96,171,251,0.1); border: 1px solid rgba(96,171,251,0.3); }
.ag-final__choice--b span { color: var(--ng-brand-primary); }
.ag-final__choice--b p { color: #fff; }
.ag-final__note { margin-top: 20px; font-size: 14px; color: var(--ng-ink-300); }

/* ───────────────── AGENT W AKCJI (demo frame) ───────────────── */
.ag-demo__frame { max-width: 920px; margin: 8px auto 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--ng-border); box-shadow: var(--ng-shadow-lg); background: #fff; }
.ag-demo__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--ng-bg-muted); border-bottom: 1px solid var(--ng-border); }
.ag-demo__bar > span { width: 11px; height: 11px; border-radius: 50%; background: var(--ng-border-strong); }
.ag-demo__bar > span:nth-child(1) { background: #E0A63A; }
.ag-demo__bar > span:nth-child(2) { background: #D8DEE7; }
.ag-demo__bar > span:nth-child(3) { background: #1EA97C; }
.ag-demo__url { margin-left: 14px; font-family: var(--ng-font-mono); font-size: 14px; color: var(--ng-fg-subtle); letter-spacing: 0.02em; }
.ag-demo__slot, .ag-demo__frame image-slot { display: block; width: 100%; height: clamp(320px, 42vw, 480px); background: var(--ng-bg-elev); }

/* ───────────────── KREATOR AGENTÓW (pipeline) ───────────────── */
.ag-pipe { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 980px; margin: 8px auto 0; }
.ag-pipe__node { flex: 1; min-width: 120px; background: var(--ng-bg-elev); border: 1px solid var(--ng-border); border-radius: 14px; padding: 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ag-pipe__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ng-black-primary); color: var(--ng-brand-primary); margin-bottom: 8px; }
.ag-pipe__node strong { font-size: 16px; color: var(--ng-fg); }
.ag-pipe__node span { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.35; }
.ag-pipe__arrow { display: grid; place-items: center; color: var(--ng-border-strong); flex-shrink: 0; }

/* ───────────────── RESPONSIVE ───────────────── */
@media (max-width: 1000px) {
  .ag-hero__inner, .ag-offer__inner { grid-template-columns: 1fr; gap: 40px; }
  .ag-change__grid, .ag-solution__grid, .ag-how__steps, .ag-program__grid, .ag-proof__grid { grid-template-columns: 1fr; }
  .ag-get__grid, .ag-team__grid, .ag-fit__grid, .ag-bonus__inner, .ag-final__choices { grid-template-columns: 1fr; }
  .ag-trust { grid-template-columns: repeat(2,1fr); gap: 24px 16px; }
}
@media (max-width: 760px) {
  .ag-pipe { flex-direction: column; align-items: stretch; gap: 8px; }
  .ag-pipe__node { min-width: 0; }
  .ag-pipe__arrow { transform: rotate(90deg); padding: 2px 0; }
}
@media (max-width: 600px) {
  .ag-hero__actions { gap: 14px; }
  .ag-hero__actions .btn { width: 100%; justify-content: center; }
  .ag-agent__line { grid-template-columns: 1fr; gap: 4px; }
}

/* styles-new-pages.css */
/* ==========================================================================
   New page styles: narzedzia, webinar, fundamenty, warsztat-claude
   ========================================================================== */

/* ────────────────────────── NARZĘDZIA ────────────────────────── */
.nz-hero {
  position: relative; overflow: hidden;
  padding: clamp(56px,6vw,96px) var(--side-pad) clamp(40px,5vw,64px);
  background: linear-gradient(180deg, #FCFCFD 0%, var(--ng-bg) 100%);
}
.nz-hero__inner h1 {
  font-size: clamp(32px,5vw,60px); line-height: 1.06;
  letter-spacing: -0.03em; margin-top: 14px; text-wrap: balance; max-width: 880px;
}
.nz-hero__inner > p {
  margin-top: 20px; font-size: clamp(15px,1.4vw,18px); line-height: 1.6;
  color: var(--ng-fg-muted); max-width: 640px;
}
.nz-hero__stats {
  display: flex; gap: 40px; margin-top: 36px;
  padding-top: 22px; border-top: 1px dashed var(--ng-border);
}
.nz-hero__stats > div {
  font-size: 14px; color: var(--ng-grey); display: flex; align-items: baseline; gap: 6px;
}
.nz-hero__stats strong {
  font-size: clamp(22px,2.4vw,30px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ng-black-primary);
  display: inline-block;
}

.nz-featured__head { margin-bottom: 32px; }
.nz-featured__head h2 { font-size: clamp(24px,3vw,36px); font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.nz-featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nz-feat {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: all 200ms var(--ng-ease-standard);
}
.nz-feat::before {
  content:''; position: absolute; inset: 0; bottom: auto; height: 4px;
  background: var(--ng-brand-primary); border-radius: 18px 18px 0 0;
}
.nz-feat:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); border-color: var(--ng-border-strong); }
.nz-feat__head { display: flex; gap: 14px; align-items: center; }
.nz-feat__logo, .nz-tile__logo {
  width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, #2A3F5B, #0F1113);
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 18px; letter-spacing: 0.02em;
}
.nz-tile__logo { width: 44px; height: 44px; font-size: 15px; border-radius: 10px; }
.nz-feat h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.nz-feat__short { font-size: 14px; color: var(--ng-grey); }
.nz-feat__why {
  background: rgba(96,171,251,0.08); border-left: 3px solid var(--ng-brand-primary);
  padding: 12px 14px; border-radius: 0 8px 8px 0; margin: 6px 0;
  font-size: 14px; color: var(--ng-fg); font-style: italic;
}
.nz-feat p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }
.nz-feat__price { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nz-feat__price strong { font-size: 16px; font-weight: 700; color: var(--ng-black-primary); }
.nz-feat .btn { margin-top: auto; align-self: flex-start; }

.nz-code {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--ng-blue-100), #fff);
  border: 2px dashed var(--ng-brand-primary); border-radius: 12px;
  padding: 14px 16px; margin-top: 6px;
}
.nz-code .eyebrow { color: var(--ng-grey); display: block; margin-bottom: 2px; }
.nz-code strong {
  font-size: 18px; font-weight: 700; color: var(--ng-brand-secondary);
  letter-spacing: 0.04em;
}
.nz-code__txt { font-size: 14px; color: var(--ng-grey); text-align: right; }
.nz-code--mini {
  flex-direction: row; padding: 10px 14px; background: var(--ng-blue-100); border: 1px dashed var(--ng-brand-primary);
  border-radius: 8px;
}
.nz-code--mini strong { font-size: 14px; }
.nz-code--mini .nz-code__txt { font-size: 14px; }

.nz-controls {
  position: sticky; top: 73px; z-index: 30;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--ng-divider);
  border-bottom: 1px solid var(--ng-divider);
  padding: 18px var(--side-pad);
}
.nz-controls .container { display: grid; gap: 14px; }
.nz-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--ng-white-secondary); border: 1px solid transparent;
  border-radius: 12px; padding: 12px 16px;
  transition: all 200ms var(--ng-ease-standard);
}
.nz-search:focus-within { background: #fff; border-color: var(--ng-brand-primary); box-shadow: 0 0 0 4px rgba(96,171,251,0.18); }
.nz-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; }
.nz-search svg { color: var(--ng-grey); }
.nz-cats { display: flex; gap: 6px; flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nz-cats::-webkit-scrollbar { display: none; }
.nz-cat {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
  background: transparent; color: var(--ng-grey);
  border: 1px solid var(--ng-border); border-radius: 999px;
  padding: 8px 14px; font-size: 14px; font-weight: 500;
  transition: all 150ms var(--ng-ease-standard);
}
.nz-cat:hover { color: var(--ng-black-primary); border-color: var(--ng-border-strong); }
.nz-cat.is-active { background: var(--ng-brand-secondary); border-color: var(--ng-brand-secondary); color: #fff; }

.nz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 40px; }
.nz-tile {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: all 200ms var(--ng-ease-standard);
}
.nz-tile:hover { transform: translateY(-2px); box-shadow: var(--ng-shadow-sm); border-color: var(--ng-border-strong); }
.nz-tile.is-featured { border: 2px solid var(--ng-brand-primary); }
.nz-tile__head { display: flex; justify-content: space-between; align-items: center; }
.nz-tile__badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ng-brand-primary); color: var(--ng-black-primary);
  font-size: 14px; font-weight: 700; padding: 4px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.nz-tile h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.nz-tile__short { font-size: 14px; color: var(--ng-grey); }
.nz-tile p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }
.nz-tile__why {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 14px; color: var(--ng-grey); font-style: italic;
  padding: 8px 10px; background: var(--ng-white-secondary);
  border-radius: 8px;
}
.nz-tile__why svg { color: var(--ng-brand-primary); flex-shrink: 0; margin-top: 2px; }
.nz-tile__foot {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--ng-border);
}
.nz-tile__cat { font-size: 14px; color: var(--ng-grey); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

.nz-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 0; color: var(--ng-grey); text-align: center;
}
.nz-empty h4 { color: var(--ng-black-primary); font-size: 18px; font-weight: 700; }

.nz-help {
  background: var(--ng-black-primary); color: #fff;
  padding: 56px var(--side-pad);
}
.nz-help__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.nz-help__inner h3 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin-top: 8px; }
.nz-help__inner p { color: var(--ng-ink-200); margin-top: 6px; max-width: 540px; }

/* ────────────────────────── WEBINAR ────────────────────────── */
.wb-hero { padding: clamp(56px,7vw,96px) var(--side-pad) clamp(64px,8vw,112px); }
.wb-hero__inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start;
  position: relative;
}
.wb-hero__copy h1 {
  font-size: clamp(32px,5.5vw,64px); line-height: 1.06;
  letter-spacing: -0.03em; margin-top: 18px;
  text-wrap: balance;
}
.wb-hero__copy > p {
  margin-top: 22px; font-size: clamp(15px,1.4vw,19px); line-height: 1.55;
  color: var(--ng-ink-200); max-width: 540px;
}
.wb-hero__copy strong { color: #fff; font-weight: 700; }
.wb-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF4D6D; display: inline-block;
  box-shadow: 0 0 0 4px rgba(255,77,109,0.3);
  animation: wb-pulse 2s infinite;
}
@keyframes wb-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,77,109,0.3); }
  50%     { box-shadow: 0 0 0 8px rgba(255,77,109,0); }
}
.wb-hero__perks {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 10px;
}
.wb-hero__perks li { display: flex; align-items: center; gap: 12px; color: var(--ng-ink-100); font-size: 15px; }
.wb-hero__perks svg { color: var(--ng-brand-primary); flex-shrink: 0; }
.wb-hero__meta {
  display: flex; gap: 24px; margin-top: 32px;
  padding-top: 22px; border-top: 1px solid #242830;
  flex-wrap: wrap;
}
.wb-hero__meta > div {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ng-ink-300);
}
.wb-hero__meta strong { color: #fff; font-size: 14px; font-weight: 600; }
.wb-hero__meta svg { color: var(--ng-brand-primary); }

.wb-card {
  background: #1A1D22; border: 1px solid #242830; border-radius: 22px;
  padding: 28px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.wb-card__head { margin-bottom: 18px; }
.wb-card__head h3 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-top: 4px; }

.wb-dates { display: grid; gap: 8px; margin-bottom: 18px; }
.wb-date {
  display: flex; align-items: center; gap: 14px;
  background: #0F1113; border: 1px solid #242830; border-radius: 12px;
  padding: 14px 16px; cursor: pointer;
  transition: all 200ms var(--ng-ease-standard);
}
.wb-date:hover { border-color: var(--ng-grey); }
.wb-date.is-active { border-color: var(--ng-brand-primary); background: rgba(96,171,251,0.08); }
.wb-date input { display: none; }
.wb-date > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wb-date strong { color: #fff; font-size: 15px; font-weight: 600; }
.wb-date span { color: var(--ng-ink-300); font-size: 14px; }
.wb-date__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--ng-grey); position: relative;
  flex-shrink: 0;
}
.wb-date.is-active .wb-date__radio { border-color: var(--ng-brand-primary); }
.wb-date.is-active .wb-date__radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ng-brand-primary);
}

.wb-form { display: grid; gap: 12px; }
.wb-form input[type="text"], .wb-form input[type="email"] {
  background: #0F1113; border: 1px solid #242830; border-radius: 10px;
  padding: 14px 16px; color: #fff;
  font-family: var(--ng-font-sans); font-size: 15px; outline: none;
  transition: all 200ms var(--ng-ease-standard);
}
.wb-form input:focus { border-color: var(--ng-brand-primary); box-shadow: 0 0 0 4px rgba(96,171,251,0.18); }
.wb-form .btn { width: 100%; justify-content: center; }
.wb-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  font-size: 14px; color: var(--ng-ink-300); line-height: 1.5;
  align-items: flex-start;
}
.wb-consent input { margin-top: 3px; }
.wb-form__note {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 14px; color: var(--ng-ink-300); margin-top: 4px;
}
.wb-form__note svg { color: var(--ng-brand-primary); }

.wb-takeaway__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wb-take {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: all 200ms var(--ng-ease-standard);
}
.wb-take:hover { transform: translateY(-2px); box-shadow: var(--ng-shadow-md); }
.wb-take__n {
  font-size: 28px; font-weight: 700; color: var(--ng-brand-primary);
  letter-spacing: -0.02em; line-height: 1;
}
.wb-take h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.wb-take p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }

.wb-for__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.wb-for__inner h2 { font-size: clamp(22px,2.6vw,32px); font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; line-height: 1.2; }
.wb-for__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.wb-for__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ng-fg); }
.wb-for__list svg { color: var(--ng-brand-secondary); flex-shrink: 0; margin-top: 3px; }
.wb-for__list--neg svg { color: var(--ng-danger); }
.wb-for__list strong { color: var(--ng-black-primary); }

.wb-speaker__inner { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: center; }
.wb-speaker__avatar { display: grid; place-items: center; }
.wb-speaker__copy h2 { font-size: clamp(22px,2.4vw,32px); font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; line-height: 1.2; text-wrap: balance; }
.wb-speaker__copy p { margin-top: 16px; color: var(--ng-fg-muted); font-size: 16px; line-height: 1.65; }
.wb-speaker__credentials {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--ng-border);
}
.wb-speaker__credentials > div { display: flex; flex-direction: column; gap: 4px; }
.wb-speaker__credentials strong { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.wb-speaker__credentials span { font-size: 14px; color: var(--ng-grey); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }

.wb-testi__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.wb-testi__card {
  margin: 0; background: #fff; border: 1px solid var(--ng-border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.wb-testi__stars, .fd-testi__stars { color: #F5A623; font-size: 18px; letter-spacing: 2px; }
.wb-testi__card blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ng-black-primary); }
.wb-testi__card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ng-border); }
.wb-testi__card figcaption strong { font-weight: 600; font-size: 14px; }
.wb-testi__card figcaption span { font-size: 14px; color: var(--ng-grey); }

.wb-faq__inner { max-width: 880px; margin: 0 auto; }

.wb-final { position: relative; overflow: hidden; padding: clamp(64px,8vw,96px) var(--side-pad); text-align: center; }
.wb-final__inner { position: relative; max-width: 720px; margin: 0 auto; }
.wb-final__inner h2 { color: #fff; font-size: clamp(28px,4vw,44px); font-weight: 700; letter-spacing: -0.025em; margin-top: 14px; line-height: 1.15; }
.wb-final__inner p { margin-top: 18px; color: var(--ng-ink-200); font-size: 17px; }

/* ────────────────────────── FUNDAMENTY AI ────────────────────────── */
.fd-hero {
  padding: clamp(56px,6vw,96px) var(--side-pad) clamp(64px,7vw,96px);
  background: linear-gradient(180deg, #FCFCFD 0%, var(--ng-bg) 100%);
  position: relative; overflow: hidden;
}
.fd-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; position: relative; }
.fd-hero__copy h1 { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fd-hero__pre {
  font-size: clamp(15px,1.4vw,18px); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ng-brand-secondary);
}
.fd-hero__main {
  font-size: clamp(34px,5.5vw,64px); line-height: 1.05;
  letter-spacing: -0.03em; font-weight: 700; color: var(--ng-black-primary);
  text-wrap: balance;
}
.fd-hero__copy > p {
  margin-top: 22px; font-size: clamp(15px,1.4vw,18px); line-height: 1.6;
  color: var(--ng-fg-muted); max-width: 560px;
}
.fd-hero__price-row {
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  margin-top: 32px;
}
.fd-hero__price { display: flex; flex-direction: column; gap: 2px; }
.fd-hero__price-old {
  font-size: 16px; color: var(--ng-grey); text-decoration: line-through;
}
.fd-hero__price-new {
  font-size: clamp(34px,3.6vw,44px); font-weight: 700;
  letter-spacing: -0.025em; color: var(--ng-black-primary); line-height: 1;
}
.fd-hero__price-tag {
  display: inline-block; margin-top: 4px;
  background: #FFE5C2; color: #8C5300; padding: 4px 10px; border-radius: 6px;
  font-size: 14px; font-weight: 600; align-self: flex-start;
}
.fd-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fd-hero__meta {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 14px; color: var(--ng-grey);
}
.fd-hero__meta li { display: inline-flex; align-items: center; gap: 6px; }
.fd-hero__meta svg { color: var(--ng-brand-secondary); }

.fd-hero__visual { position: relative; display: grid; place-items: center; }
.fd-hero__cover {
  position: relative; width: 100%; max-width: 440px;
  aspect-ratio: 4/5;
  background:
    radial-gradient(circle at 30% 20%, rgba(96,171,251,0.25), transparent 55%),
    linear-gradient(135deg, #121417 0%, #2A3F5B 100%);
  border-radius: 24px; padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; box-shadow: 0 30px 80px rgba(96,171,251,0.2);
}
.fd-hero__cover::before {
  content:''; position: absolute; inset: 14px;
  border: 1px dashed rgba(255,255,255,0.16); border-radius: 18px;
  pointer-events: none;
}
.fd-hero__cover-tag {
  position: relative;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--ng-brand-primary);
}
.fd-hero__cover-play {
  position: relative; align-self: center; margin-top: auto;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--ng-black-primary);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.fd-hero__cover-title {
  position: relative; font-size: 22px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.015em; margin-top: 16px;
}
.fd-hero__cover-title span { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.7); display: block; margin-top: 4px; letter-spacing: 0; }
.fd-hero__cover-prog {
  position: relative; display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
}
.fd-hero__cover-prog-bar {
  flex: 1; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; position: relative; overflow: hidden;
}
.fd-hero__cover-prog-bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12%;
  background: var(--ng-brand-primary); border-radius: 2px;
}
.fd-hero__cover-prog span { font-size: 14px; color: rgba(255,255,255,0.7); }
.fd-hero__badge {
  position: absolute; top: 18px; right: -18px;
  background: #fff; border: 1px solid var(--ng-border); border-radius: 999px;
  padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  box-shadow: var(--ng-shadow-lg);
}
.fd-hero__badge svg { color: #F5A623; }
.fd-hero__badge strong { font-size: 14px; font-weight: 700; display: block; }
.fd-hero__badge span { font-size: 14px; color: var(--ng-grey); }

/* PAIN */
.fd-pain__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fd-pain__card {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.fd-pain__card svg { color: var(--ng-danger); }
.fd-pain__card h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.fd-pain__card p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }
.fd-pain__bridge {
  text-align: center; margin-top: 40px; padding: 24px 28px;
  background: var(--ng-black-primary); color: #fff;
  border-radius: 16px; max-width: 720px; margin-left: auto; margin-right: auto;
}
.fd-pain__bridge p { color: var(--ng-ink-200); font-size: 17px; line-height: 1.55; }
.fd-pain__bridge strong { color: #fff; }

/* BENEFITS */
.fd-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fd-benefit {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
  transition: all 200ms var(--ng-ease-standard);
}
.fd-benefit:hover { transform: translateY(-2px); box-shadow: var(--ng-shadow-md); }
.fd-benefit__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--ng-blue-100); color: var(--ng-brand-secondary);
  display: grid; place-items: center;
}
.fd-benefit h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.fd-benefit p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }

/* PROGRAM */
.fd-program__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fd-lesson {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: all 200ms var(--ng-ease-standard);
  position: relative; overflow: hidden;
}
.fd-lesson:hover { transform: translateY(-2px); box-shadow: var(--ng-shadow-sm); border-color: var(--ng-border-strong); }
.fd-lesson__day {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ng-brand-secondary);
  padding-bottom: 8px; border-bottom: 1px dashed var(--ng-border);
}
.fd-lesson h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.fd-lesson p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; flex: 1; }
.fd-lesson__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ng-grey); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.fd-lesson__meta svg { color: var(--ng-brand-primary); }

/* BONUSES */
.fd-bonus__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.fd-bonus__inner h2 { font-size: clamp(24px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; line-height: 1.15; }
.fd-bonus__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fd-bonus__list li {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px;
  background: #fff; border: 1px solid var(--ng-border); border-radius: 14px;
  padding: 18px 22px; align-items: center;
}
.fd-bonus__num {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--ng-black-primary); color: var(--ng-brand-primary);
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
}
.fd-bonus__list strong { display: block; font-size: 16px; font-weight: 700; }
.fd-bonus__list span { font-size: 14px; color: var(--ng-grey); }
.fd-bonus__val {
  font-size: 14px; font-weight: 600; color: var(--ng-brand-secondary);
  background: var(--ng-blue-100); padding: 6px 10px; border-radius: 6px;
  white-space: nowrap;
}

/* AUTHOR */
.fd-author__inner { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: center; }
.fd-author__avatar { display: grid; place-items: center; }
.fd-author__copy h2 { font-size: clamp(24px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.fd-author__lead { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--ng-fg-muted); }
.fd-author__copy strong { color: var(--ng-black-primary); }
.fd-author__copy p:not(.fd-author__lead) { margin-top: 14px; font-size: 15px; color: var(--ng-fg-muted); line-height: 1.65; }

/* TESTI */
.fd-testi__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.fd-testi__card {
  margin: 0; background: var(--ng-white-secondary); border: 1px solid var(--ng-border); border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.fd-testi__card blockquote { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ng-black-primary); }
.fd-testi__card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--ng-border); }
.fd-testi__card figcaption strong { font-weight: 600; font-size: 14px; }
.fd-testi__card figcaption span { font-size: 14px; color: var(--ng-grey); }

/* GUARANTEE */
.fd-guarantee__inner { display: grid; grid-template-columns: 140px 1fr; gap: 40px; align-items: center; }
.fd-guarantee__seal {
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--ng-brand-primary); color: var(--ng-black-primary);
  display: grid; place-items: center;
  box-shadow: 0 20px 50px rgba(96,171,251,0.3);
}
.fd-guarantee__inner h2 { font-size: clamp(24px,3vw,38px); font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.15; }
.fd-guarantee__inner p { margin-top: 16px; color: var(--ng-fg-muted); font-size: 16px; line-height: 1.65; }

/* FINAL */
.fd-final { padding: clamp(64px,8vw,96px) var(--side-pad); text-align: center; position: relative; overflow: hidden; }
.fd-final__inner { position: relative; max-width: 720px; margin: 0 auto; }
.fd-final__inner h2 { color: #fff; font-size: clamp(28px,4vw,44px); font-weight: 700; letter-spacing: -0.025em; margin-top: 16px; line-height: 1.15; text-wrap: balance; }
.fd-final__price {
  display: flex; gap: 14px; align-items: baseline; justify-content: center;
  margin: 28px 0 12px;
}
.fd-final__price-old { font-size: 22px; color: var(--ng-ink-300); text-decoration: line-through; }
.fd-final__price-new { font-size: clamp(40px,5vw,56px); font-weight: 700; color: var(--ng-brand-primary); letter-spacing: -0.025em; }
.fd-final__actions { display: flex; gap: 12px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.fd-final__note { font-size: 14px; color: var(--ng-ink-300); margin-top: 20px; }

/* ────────────────────────── WARSZTAT CLAUDE ────────────────────────── */
.wc-hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; position: relative; }
.wc-hero__brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(217,119,87,0.1); color: #D97757;
  border: 1px solid rgba(217,119,87,0.3);
  font-size: 14px; font-weight: 600;
}
.wc-hero__brand-pill {
  background: #D97757; color: #fff; padding: 2px 8px; border-radius: 999px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.wc-hero__copy h1 {
  font-size: clamp(34px,6vw,72px); line-height: 1.02; letter-spacing: -0.03em;
  margin-top: 18px; text-wrap: balance;
}
.wc-hero__copy > p {
  margin-top: 22px; font-size: clamp(15px,1.4vw,19px); line-height: 1.55;
  color: var(--ng-ink-200); max-width: 560px;
}
.wc-hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.wc-hero__chips {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--ng-ink-200); letter-spacing: 0.04em;
}
.wc-hero__chips li { display: inline-flex; align-items: center; gap: 8px; }
.wc-hero__chips svg { color: var(--ng-brand-primary); }

.wc-hero__panel {
  background: #1A1D22; border: 1px solid #242830; border-radius: 22px;
  padding: 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.wc-hero__panel-head { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px dashed #242830; }
.wc-claude-logo {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, #D97757, #C45A35);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 22px;
}
.wc-claude-logo span { font-family: Georgia, serif; font-style: italic; }
.wc-hero__panel-head strong { color: #fff; font-size: 16px; font-weight: 600; display: block; }
.wc-hero__panel-head span { color: var(--ng-ink-300); font-size: 14px; }
.wc-hero__panel-quote {
  padding: 18px 0; color: var(--ng-ink-100); font-size: 14px; line-height: 1.55;
  font-style: italic; border-bottom: 1px dashed #242830;
}
.wc-hero__claude-feats {
  list-style: none; padding: 18px 0 0; margin: 0; display: grid; gap: 10px;
}
.wc-hero__claude-feats li { display: flex; align-items: flex-start; gap: 10px; color: var(--ng-ink-100); font-size: 14px; line-height: 1.5; }
.wc-hero__claude-feats svg { color: #D97757; flex-shrink: 0; margin-top: 3px; }
.wc-hero__panel-foot {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed #242830;
  color: var(--ng-brand-primary); font-size: 14px; font-weight: 600;
}

/* COMPARE */
.wc-why__compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 1000px; margin: 0 auto;
}
.wc-why__col {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 18px;
  padding: 28px;
}
.wc-why__col--featured { border: 2px solid #D97757; background: linear-gradient(180deg, rgba(217,119,87,0.04), #fff); }
.wc-why__col-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--ng-border); }
.wc-why__col-head--alt { opacity: 0.85; }
.wc-why__logo, .wc-why__logo-alt {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px; color: #fff;
}
.wc-why__logo { background: linear-gradient(135deg,#D97757,#C45A35); font-family: Georgia, serif; font-style: italic; }
.wc-why__logo-alt { background: #10A37F; }
.wc-why__col-head strong { font-size: 18px; font-weight: 700; display: block; }
.wc-why__col-head span { font-size: 14px; color: var(--ng-grey); }
.wc-why__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.wc-why__col li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ng-fg); }
.wc-why__col li svg { color: #D97757; flex-shrink: 0; margin-top: 3px; }
.wc-why__col li.muted { color: var(--ng-grey); }
.wc-why__bottom { text-align: center; margin-top: 40px; color: var(--ng-fg-muted); font-size: 15px; max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.wc-why__bottom em { color: var(--ng-black-primary); font-style: italic; font-weight: 500; }

/* USES */
.wc-uses__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.wc-uses__grid > article:nth-child(4) { grid-column: 1 / 2; }
.wc-uses__grid > article:nth-child(5) { grid-column: 2 / 4; }
.wc-use {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 16px;
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.wc-use__head { display: flex; justify-content: space-between; align-items: center; }
.wc-use__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(217,119,87,0.1); color: #D97757;
  display: grid; place-items: center;
}
.wc-use__n {
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ng-grey); text-transform: uppercase;
}
.wc-use h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.wc-use p { font-size: 14px; color: var(--ng-fg-muted); line-height: 1.55; }
.wc-use ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.wc-use ul li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ng-fg); }
.wc-use ul svg { color: #D97757; flex-shrink: 0; }

/* FORMATS */
.wc-formats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.wc-format {
  background: #fff; border: 1px solid var(--ng-border); border-radius: 20px;
  padding: 32px; display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: all 200ms var(--ng-ease-standard);
}
.wc-format:hover { transform: translateY(-3px); box-shadow: var(--ng-shadow-md); }
.wc-format--featured { border: 2px solid var(--ng-brand-primary); background: linear-gradient(180deg, rgba(96,171,251,0.04), #fff); }
.wc-format__featured-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--ng-brand-primary); color: var(--ng-black-primary);
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.wc-format__tag {
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ng-brand-secondary);
}
.wc-format h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.wc-format__sub { font-size: 14px; color: var(--ng-grey); }
.wc-format ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; flex: 1; }
.wc-format ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ng-fg); line-height: 1.5; }
.wc-format ul svg { color: var(--ng-brand-secondary); flex-shrink: 0; margin-top: 3px; }
.wc-format__price { padding: 18px 0; border-top: 1px dashed var(--ng-border); display: flex; flex-direction: column; gap: 2px; }
.wc-format__price span { font-size: 14px; color: var(--ng-grey); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.wc-format__price strong { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ng-black-primary); }
.wc-format__price em { font-size: 14px; color: var(--ng-grey); font-style: normal; margin-top: 2px; }
.wc-format .btn { align-self: flex-start; }
.wc-formats__below { text-align: center; margin-top: 24px; font-size: 14px; color: var(--ng-fg-muted); }
.wc-formats__below a { color: var(--ng-brand-secondary); font-weight: 600; }

/* PROCES */
.wc-proces__list {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 0;
  max-width: 880px; margin: 0 auto;
}
.wc-proces__step {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  padding: 24px 0; border-bottom: 1px dashed var(--ng-border);
}
.wc-proces__step:last-child { border-bottom: 0; }
.wc-proces__n {
  font-size: 28px; font-weight: 700; color: var(--ng-brand-primary);
  letter-spacing: -0.02em; line-height: 1; padding-top: 4px;
}
.wc-proces__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.wc-proces__head h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.wc-proces__time {
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ng-grey); padding: 4px 8px; background: var(--ng-white-secondary); border-radius: 6px;
}
.wc-proces__step p { font-size: 15px; color: var(--ng-fg-muted); line-height: 1.6; }

/* TRUST */
.wc-trust__logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 40px; }
.wc-trust__logo {
  background: var(--ng-white-secondary); border: 1px solid var(--ng-border);
  border-radius: 12px; padding: 22px; text-align: center;
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--ng-grey);
}
.wc-trust__quote {
  background: linear-gradient(135deg, rgba(96,171,251,0.06), rgba(22,83,199,0.02));
  border: 1px solid var(--ng-blue-200); border-radius: 20px;
  padding: 36px; max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.wc-trust__quote > svg { color: var(--ng-brand-primary); }
.wc-trust__quote blockquote { margin: 0; font-size: clamp(17px,1.8vw,22px); line-height: 1.45; letter-spacing: -0.005em; color: var(--ng-black-primary); text-wrap: pretty; }
.wc-trust__quote figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px dashed var(--ng-border); }
.wc-trust__quote figcaption strong { font-weight: 600; }

/* FINAL CLAUDE */
.wc-final { padding: clamp(64px,8vw,96px) var(--side-pad); text-align: center; position: relative; overflow: hidden; }
.wc-final__inner { position: relative; max-width: 760px; margin: 0 auto; }
.wc-final__inner h2 { color: #fff; font-size: clamp(28px,4vw,48px); font-weight: 700; letter-spacing: -0.025em; margin-top: 16px; line-height: 1.1; }
.wc-final__inner p { margin-top: 18px; color: var(--ng-ink-200); font-size: 17px; }
.wc-final__actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.wc-final__ladder {
  margin-top: 32px; padding-top: 24px; border-top: 1px dashed #242830;
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  font-size: 14px; color: var(--ng-ink-300);
}
.wc-final__ladder a { color: var(--ng-brand-primary); font-weight: 600; }

/* ────────────────────────── RESPONSIVE — new pages ────────────────────────── */
@media (max-width: 1100px) {
  .wb-hero__inner,
  .fd-hero__inner,
  .wc-hero__inner,
  .wb-speaker__inner,
  .fd-bonus__inner,
  .fd-author__inner { grid-template-columns: 1fr !important; gap: 48px !important; }

  .nz-featured__grid,
  .wb-takeaway__grid,
  .wb-testi__grid,
  .fd-pain__grid,
  .fd-benefits__grid,
  .fd-program__grid,
  .fd-testi__grid,
  .nz-grid,
  .wc-uses__grid,
  .wc-trust__logos { grid-template-columns: repeat(2, 1fr); }

  .wc-uses__grid > article:nth-child(4),
  .wc-uses__grid > article:nth-child(5) { grid-column: auto; }

  .wc-why__compare { grid-template-columns: 1fr; }
  .wb-for__inner { grid-template-columns: 1fr; gap: 40px; }
  .fd-guarantee__inner { grid-template-columns: 100px 1fr; gap: 28px; }
  .fd-guarantee__seal { width: 100px; height: 100px; }

  .nz-controls, .mag-filters, .hub-controls { top: 67px; }
}

@media (max-width: 640px) {
  .nz-featured__grid,
  .wb-takeaway__grid,
  .wb-testi__grid,
  .fd-pain__grid,
  .fd-benefits__grid,
  .fd-program__grid,
  .fd-testi__grid,
  .nz-grid,
  .wc-uses__grid,
  .wc-trust__logos,
  .wc-formats__grid,
  .wb-speaker__credentials { grid-template-columns: 1fr !important; }

  .wb-speaker__credentials { grid-template-columns: repeat(2, 1fr) !important; }

  .fd-hero__price-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fd-hero__actions { width: 100%; }
  .fd-hero__actions .btn { flex: 1; justify-content: center; }
  .fd-hero__badge { right: 0; top: 0; }
  .fd-bonus__list li { grid-template-columns: 40px 1fr; }
  .fd-bonus__val { grid-column: 1 / -1; justify-self: flex-start; }

  .wc-format--featured { transform: none; }
  .wc-proces__step { grid-template-columns: 60px 1fr; gap: 14px; }
  .wc-proces__n { font-size: 22px; }
}

/* styles-responsive.css */
/* ==========================================================================
   NetGonet — Responsive layer
   - Fluid typography via clamp()
   - Side padding scales with viewport
   - Layout collapses: 4col → 2col → 1col
   - Mobile nav (burger), sticky filter offsets recompute
   ========================================================================== */

/* ---------- Fluid foundations ---------- */
:root {
  /* Side padding scales: 16px @ 360 → 24px @ 768 → 48px @ 1200 → 64px @ 1440 */
  --side-pad: clamp(20px, 5vw, 64px);
}

/* Burger hidden by default */
.ng-nav__burger {
  display: none;
  width: 42px; height: 42px;
  background: transparent; border: 1px solid var(--ng-border);
  border-radius: 10px;
  align-items: center; justify-content: center;
  color: var(--ng-fg);
}

/* ─────────────────── ≤ 1366 — 13" laptop tightening ─────────────────── */
@media (max-width: 1366px) {
  .ng-nav { gap: 16px; }
  .ng-nav__links li a, .ng-nav__drop-trigger { padding: 8px 10px; font-size: 14px; }
  .ng-nav__right { gap: 6px; }
  /* Side padding stays via clamp(), no need to override */
}

/* ─────────────────── ≤ 1280 — adjust grid density ─────────────────── */
@media (max-width: 1280px) {
  .ng-nav { padding: 12px var(--side-pad); gap: 12px; }
  .ng-nav__brand img { height: 26px; }
  .ng-nav__links li a, .ng-nav__drop-trigger { padding: 7px 9px; font-size: 14px; letter-spacing: -0.005em; }

  /* Hide "Panel klienta" ghost — keep only primary CTA */
  .ng-nav__panel { display: none !important; }

  /* CTA more compact */
  .ng-nav__right .btn--primary { padding: 7px 12px; font-size: 14px; }

  /* Trust strip stays 1 row but a touch tighter */
  .trust__inner { grid-template-columns: 180px 1fr; gap: 20px; }
  .trust__grid { gap: 12px; }
  .trust__n { font-size: 22px !important; }

  /* Tighter card grids for 13" laptops */
  .magnety-tease__grid,
  .products__grid { gap: 14px; }
  .ladder__grid { gap: 16px; }

  /* Section vertical padding compress slightly */
  .section { padding-top: 84px; padding-bottom: 84px; }

  /* Hero copy a bit tighter */
  .hero__inner { gap: 40px !important; }
  .workshops__inner { gap: 48px !important; }
  .hubtease__grid { gap: 16px; }
  .om-sales__grid { gap: 16px; }

  /* Section heads tighter margin */
  .section-head { margin-bottom: 40px; }
}

/* ─────────────────── ≤ 1180 — final desktop tightening before burger ─────────────────── */
@media (max-width: 1180px) {
  .ng-nav__links li a, .ng-nav__drop-trigger { padding: 7px 8px; font-size: 14px; }
  .ng-nav { gap: 8px; }
  /* If still cramped, "Hub treści" label shortens */
  .ng-nav__links li[data-label-short]::before { content: attr(data-label-short); }
}

/* ─────────────────── ≤ 1100 — mobile nav + 2col grids ─────────────────── */
@media (max-width: 1100px) {

  /* NAV — collapse to burger */
  .ng-nav { grid-template-columns: auto 1fr; }
  .ng-nav__links {
    position: fixed;
    top: 73px; right: 0; left: auto; bottom: auto;
    width: 100%; height: calc(100dvh - 73px); z-index: 49;
    justify-self: stretch;
    background: var(--ng-bg);
    flex-direction: column; gap: 0;
    padding: 24px var(--side-pad);
    overflow-y: auto;
    transform: translateX(100%);
    border-top: 1px solid var(--ng-divider);
  }
  .ng-nav.is-open .ng-nav__links { transform: translateX(0); }
  .ng-nav__links li { border-bottom: 1px solid var(--ng-divider); }
  .ng-nav__links li a {
    display: flex; padding: 18px 8px; font-size: 17px; width: 100%;
    border-radius: 0;
  }
  .ng-nav__links li a.is-active { background: transparent; color: var(--ng-brand-secondary); }
  .ng-nav__links li a.is-active::after { display: none; }
  .ng-nav__burger { display: inline-flex; }
  .ng-nav__panel { display: none; }
  .ng-nav__right .btn--primary { display: none; }

  /* Dropdown "Kursy online" — expand inline inside the drawer */
  .ng-nav__has-drop { border-bottom: 1px solid var(--ng-divider); }
  .ng-nav__drop-trigger {
    display: flex; width: 100%; padding: 18px 8px; font-size: 17px;
    justify-content: flex-start; border-radius: 0;
  }
  .ng-nav__drop-trigger svg { display: none; }
  .ng-nav__drop {
    position: static; width: auto; padding: 0 0 8px; opacity: 1; visibility: visible;
    pointer-events: auto; transform: none; box-shadow: none;
  }
  .ng-nav__drop::before { display: none; }
  .ng-nav__drop-card {
    background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  .ng-nav__drop-item, .ng-nav__drop-item:last-child {
    background: transparent; border: 0; border-radius: 12px;
    padding: 12px 8px; margin: 2px 0; gap: 14px;
  }
  .ng-nav__drop-item:hover { background: var(--ng-white-secondary); }
  .ng-nav__drop-ic { width: 38px; height: 38px; border-radius: 11px; }
  .ng-nav__drop-title { font-size: 16px; }
  .ng-nav__drop-pill { font-size: 14px; }

  /* HERO — stack */
  .hero__inner,
  .workshops__inner,
  .news__inner,
  .ws-hero__inner,
  .ws-get__inner,
  .om-hero__inner,
  .om-story__inner,
  .om-edu__inner,
  .om-private__inner,
  .ko-form__inner,
  .dz-firm__inner {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Avatar / visual blocks come second and centered */
  .hero__visual,
  .om-hero__visual,
  .om-private__visual { justify-self: start; }

  /* 4-col → 2-col */
  .ladder__grid,
  .magnety-tease__grid,
  .hubtease__grid,
  .products__grid,
  .testi__grid,
  .ws-for__grid,
  .ws-clients__grid,
  .mag-grid,
  .hub-grid,
  .om-meet__grid,
  .dz-grid,
  .dz-firm__steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }

  /* Workshops panel narrower */
  .workshops__panel-foot { grid-template-columns: 1fr 1fr; }

  /* Trust */
  .trust__inner { grid-template-columns: 1fr; gap: 16px; }
  .trust__grid { padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px dashed var(--ng-border); }
}

/* ─────────────────── ≤ 880 — tighter columns ─────────────────── */
@media (max-width: 880px) {

  /* Featured hub split → stack */
  .hub-featured__grid { grid-template-columns: 1fr; }

  /* O Mnie sales: keep 3 cards but smaller */
  .om-sales__grid { grid-template-columns: 1fr; gap: 14px; }
  .om-sales__card--featured { transform: none; }
  .om-sales__card--featured:hover { transform: translateY(-3px); }
  .om-sales__featured-tag { top: -12px; }

  /* Mag cta form stacks */
  .mag-cta__inner { flex-direction: column; align-items: flex-start; }
  .mag-cta__form input { width: 100%; }
  .mag-cta__form { width: 100%; }

  /* Magnety filters — sticky offset shrinks because nav is shorter */
  .mag-filters, .hub-controls { top: 67px; }

  /* Hub controls visible space */
  .hub-types, .hub-topics { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hub-types::-webkit-scrollbar, .hub-topics::-webkit-scrollbar { display: none; }
  .hub-type, .hub-topic { white-space: nowrap; flex-shrink: 0; }

  /* O Mnie meet cards 3 across */
  .om-meet__grid { grid-template-columns: repeat(3, 1fr); }

  /* Section padding tighter */
  .section { padding: 80px 0; }
  .section--tight { padding: 56px 0; }
  .section-head { margin-bottom: 40px; }
}

/* ─────────────────── ≤ 640 — single column ─────────────────── */
@media (max-width: 640px) {

  /* Everything → 1 column */
  .ladder__grid,
  .magnety-tease__grid,
  .hubtease__grid,
  .products__grid,
  .testi__grid,
  .ws-for__grid,
  .ws-clients__grid,
  .mag-grid,
  .hub-grid,
  .dz-grid,
  .footer__inner {
    grid-template-columns: 1fr !important;
  }
  .footer__cols, .footer__brand { grid-column: 1 / -1; }

  /* Hero buttons full width */
  .hero__actions .btn,
  .workshops__actions .btn,
  .ws-hero__actions .btn,
  .ws-cta__actions .btn,
  .om-end__actions .btn,
  .news__form .btn { width: 100%; justify-content: center; }
  .hero__actions, .workshops__actions, .ws-hero__actions, .ws-cta__actions, .om-end__actions { width: 100%; }

  /* Section heads */
  .magnety-tease__head, .hubtease__head { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* O mnie story timeline horizontal */
  .om-story__timeline {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
  }

  /* Edu list stacks under copy */
  .om-edu__list li { grid-template-columns: 24px 1fr; padding: 14px 16px; }

  /* Workshop agenda compact */
  .ws-agenda__row { grid-template-columns: 90px 1fr; gap: 14px; padding: 20px 0; }
  .ws-agenda__t { font-size: 14px; padding: 5px 8px; }

  /* Trust grid stacks */
  .trust__grid { grid-template-columns: repeat(2, 1fr); }

  /* Mag/hub tile spacing */
  .mag-grid, .hub-grid { gap: 14px; }

  /* Kontakt form row stacks */
  .ko-form__row { grid-template-columns: 1fr; }

  /* Dz firm steps stack */
  .dz-firm__steps { grid-template-columns: 1fr 1fr; }

  /* Hub controls — search alone, then types row, then topics row */
  .hub-controls { padding: 14px var(--side-pad); }
  .hub-list-head h3 { font-size: 18px; }

  /* Om Meet → 2 columns */
  .om-meet__grid { grid-template-columns: repeat(2, 1fr); }

  /* Sticky bars shrink */
  .mag-filters, .hub-controls { top: 63px; }

  /* Section padding even tighter */
  .section { padding: 64px 0; }
  .section--tight { padding: 48px 0; }
  .section-head { margin-bottom: 32px; }
}

/* ─────────────────── Fluid typography (all viewports) ─────────────────── */

/* Heroes — biggest, scale aggressively */
.hero__title {
  font-size: clamp(36px, 6.4vw, 76px);
  line-height: 1.04;
}
.mag-hero__inner h1,
.hub-hero__inner h1,
.ko-hero__inner h1,
.ws-hero__copy h1 {
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: 1.06;
}
.ws-hero__copy h1 { font-size: clamp(34px, 6vw, 72px); }
.om-hero__copy h1 {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.12;
}
.dz-hero__inner h1 {
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.12;
}

/* H2s — sections */
.section-head h2,
.magnety-tease__head h2,
.hubtease__head h2,
.workshops__copy h2,
.news__copy h2,
.ws-get__copy h2,
.om-mission h2,
.om-edu__inner h2,
.om-private__copy h2,
.om-sales__head h2,
.dz-firm__inner h2,
.dz-meantime .section-head h2,
.om-end__inner h2,
.ws-cta__inner h2,
.ko-form__copy h2 {
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.1;
}
.workshops__copy h2, .news__copy h2, .ws-hero__copy h1, .om-end__inner h2 {
  font-size: clamp(28px, 4vw, 52px);
}

/* H3s — cards & secondary heads */
.om-story__copy h3,
.hub-featured__head h2,
.ws-faq__head h2,
.ko-faq__head h2,
.hub-list-head h3,
.hub-sub__copy h3,
.dz-social__inner h3 {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
}

/* Card titles */
.ladder__title,
.prod-card h3,
.mag-tile__body h3,
.dz-card h3 {
  font-size: clamp(18px, 1.6vw, 22px);
}

/* Body / lead */
.hero__lead,
.mag-hero__inner > p,
.hub-hero__inner > p,
.ko-hero__inner > p,
.ws-hero__copy p,
.dz-hero__inner > p,
.om-hero__copy > p {
  font-size: clamp(15px, 1.4vw, 19px);
}

/* Section-head paragraphs */
.section-head p,
.om-mission p,
.om-edu__inner > div > p,
.om-private__copy p,
.om-sales__head p,
.ws-get__copy p,
.dz-meantime .section-head p {
  font-size: clamp(14px, 1.3vw, 18px);
}

/* Trust numbers stay punchy */
.trust__n { font-size: clamp(22px, 2.4vw, 30px); }
.mag-hero__stats strong, .hub-hero__stats strong { font-size: clamp(20px, 2.2vw, 28px); }
.om-sales__price strong { font-size: clamp(20px, 2vw, 26px); }
.ws-hero__panel-foot strong { font-size: clamp(15px, 1.4vw, 17px); }
.ws-hero__panel { padding: clamp(20px, 2.5vw, 36px); }

/* Workshop quote */
.ws-clients__quote blockquote { font-size: clamp(17px, 1.8vw, 22px); }

/* Testimonials */
.testi__card blockquote { font-size: clamp(15px, 1.4vw, 18px); }

/* Section padding (large screens unchanged, mobile already handled) */
.section { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.section--tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }

/* Hero side padding */
.hero { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(64px, 7vw, 96px); }
.mag-hero, .hub-hero, .ko-hero, .om-hero { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(48px, 5vw, 80px); }
.ws-hero { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(56px, 7vw, 96px); }
.dz-hero { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(64px, 7vw, 96px); }

/* Hero portrait responsive */
.hero__portrait {
  width: clamp(220px, 30vw, 460px);
  height: clamp(220px, 30vw, 460px);
}
.om-hero__avatar { width: clamp(200px, 25vw, 360px); height: clamp(200px, 25vw, 360px); }

/* Hero portrait centered on mobile */
@media (max-width: 1100px) {
  .hero__visual { justify-self: center !important; }
  .hero__portrait { margin: 0 auto; }
  .om-hero__visual { justify-self: center !important; }
}

/* Hero chips constrained on smaller screens */
@media (max-width: 880px) {
  .hero__chip--top { left: 8px; top: 12px; }
  .hero__chip--bot { right: 8px; bottom: 12px; }
  .hero__chip { font-size: 14px; padding: 6px 10px; }
}

/* O Mnie story stacks cleanly with timeline as horizontal grid */
@media (max-width: 880px) {
  .om-story__inner { gap: 32px !important; }
  .om-story__side { order: 1; }
  .om-story__copy { order: 2; }
  .om-story__timeline {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px;
  }
  .om-story__year strong { font-size: 16px; }
  .om-story__year span { font-size: 14px; }
}

/* Ladder cards reduce padding on mobile */
@media (max-width: 640px) {
  .ladder__card { padding: 22px; }
  .ladder__title { font-size: 18px !important; }
  .mag-card__body, .ladder__card, .card { padding: 20px; }
  .om-story__timeline { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Buttons compact on mobile */
@media (max-width: 640px) {
  .btn--lg { padding: 14px 20px; font-size: 15px; }
}

/* News form constrains */
.news__form { padding: clamp(20px, 2.5vw, 32px); }

/* SVG/sygnet decoration: prevent it from blocking layout */
.hero, .om-hero, .ws-hero, .ws-cta, .news, .hub-hero, .mag-hero, .dz-hero, .footer { overflow: hidden; }

/* Body min font-size so nothing falls below 13px */
.eyebrow { font-size: 14px; }
.overline { font-size: 14px; }
.tag { font-size: 14px; }

/* Make sticky filter bars stay BELOW the nav on all sizes  
   (nav height: ~73 on desktop, ~65 on mobile). Use top auto-recalc via env or fixed values. */
.mag-filters, .hub-controls { top: 73px; }

/* Footer tail wraps */
@media (max-width: 640px) {
  .footer__tail { flex-direction: column; gap: 8px; text-align: center; }
}

/* Avoid horizontal scroll */
html, body { overflow-x: hidden; }

/* Final tightening for ultra-small phones (≤ 380px) */
@media (max-width: 380px) {
  :root { --side-pad: 16px; }
  .section { padding: 56px 0; }
  .ng-nav { padding: 10px var(--side-pad); }
  .ng-nav__brand img { height: 22px; }
  .btn--lg { padding: 12px 16px; font-size: 14px; }
  .hero__actions { flex-direction: column; width: 100%; }
  .om-story__timeline { gap: 6px; }
  .om-story__year { padding: 8px; }
  .trust__grid { gap: 12px; }
}

/* styles-enhance.css */
/* ==========================================================================
   NetGonet — Enhancement layer (2026)
   Scroll-reveal motion · hero ambience · sticky conversion bar · polish
   Loads LAST. All motion gated on prefers-reduced-motion.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. SCROLL REVEAL
   JS adds `.js-reveal` to <body> once IntersectionObserver is wired, then
   tags target nodes with `.rv` and flips them to `.rv-in` when in view.
   If JS never runs, nothing is hidden (progressive enhancement).
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body.js-reveal .rv {
    opacity: 0;
    transform: translateY(22px);
    will-change: opacity, transform;
  }
  body.js-reveal .rv.rv-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.66s var(--ng-ease-out),
      transform 0.66s var(--ng-ease-out);
    transition-delay: var(--rv-delay, 0ms);
  }
  /* subtle scale-in flavour for panels / cards that opt in */
  body.js-reveal .rv--pop { transform: translateY(22px) scale(0.985); }
  body.js-reveal .rv--pop.rv-in { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. HERO AMBIENCE — slow drifting glow inside dark heroes
   ────────────────────────────────────────────────────────────────────────── */
.fd-hero, .ag-hero, .wc-hero, .wsr-hero, .wb-hero,
.fd-final, .ag-final, .wc-final, .wsr-cta, .wb-final {
  position: relative;
}
.ng-hero-aura {
  position: absolute; inset: -20% -10% auto -10%;
  height: 80%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side at 22% 30%, rgba(96,171,251,0.22), transparent 70%),
    radial-gradient(closest-side at 80% 12%, rgba(22,83,199,0.18), transparent 72%);
  filter: blur(8px);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .ng-hero-aura { animation: ngAuraDrift 18s var(--ng-ease-standard) infinite alternate; }
}
@keyframes ngAuraDrift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1);    opacity: 0.75; }
  100% { transform: translate3d(3%, 4%, 0) scale(1.12); opacity: 1; }
}
/* keep hero content above the aura */
.fd-hero__inner, .ag-hero__inner, .wc-hero__inner, .wsr-hero__inner, .wb-hero__inner,
.fd-final__inner, .ag-final__inner, .wc-final__inner, .wsr-cta__inner, .wb-final__inner,
.ag-trust { position: relative; z-index: 1; }

/* Claude-warm aura on the Claude workshop hero */
.wc-hero .ng-hero-aura {
  background:
    radial-gradient(closest-side at 78% 18%, rgba(217,119,87,0.20), transparent 70%),
    radial-gradient(closest-side at 18% 36%, rgba(96,171,251,0.18), transparent 72%);
}

/* ──────────────────────────────────────────────────────────────────────────
   3. HERO COVER — gentle float (fundamenty cover, panels)
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .fd-hero__cover { animation: ngFloat 7s var(--ng-ease-standard) infinite alternate; }
  .fd-hero__badge { animation: ngFloat 7s var(--ng-ease-standard) 0.6s infinite alternate; }
}
@keyframes ngFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* shimmer sweep on the fundamenty cover progress bar */
@media (prefers-reduced-motion: no-preference) {
  .fd-hero__cover-prog-bar::after { animation: ngProg 4.5s var(--ng-ease-standard) infinite; }
}
@keyframes ngProg {
  0%   { width: 6%; }
  60%  { width: 46%; }
  100% { width: 6%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   4. BUTTON / CTA micro-interaction — accent buttons get a soft sheen
   ────────────────────────────────────────────────────────────────────────── */
.btn--accent { position: relative; overflow: hidden; }
.btn--accent::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--accent:hover::after { animation: ngSheen 0.8s var(--ng-ease-standard); }
}
@keyframes ngSheen {
  from { left: -120%; }
  to   { left: 140%; }
}

/* primary button lift already exists; add focus-friendly accent lift */
.btn--accent:hover { transform: translateY(-1px); box-shadow: var(--ng-shadow-md); }

/* ──────────────────────────────────────────────────────────────────────────
   5. STICKY CONVERSION BAR
   Slides up from the bottom after the user scrolls past the hero.
   Rendered by <StickyBar> (chrome.jsx) on course / offer pages.
   ────────────────────────────────────────────────────────────────────────── */
.ng-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(15,17,19,0.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.28);
  transform: translateY(120%);
  transition: transform 0.42s var(--ng-ease-out);
}
.ng-sticky.is-visible { transform: translateY(0); }
.ng-sticky__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 12px var(--side-pad);
  display: flex; align-items: center; gap: 20px;
}
.ng-sticky__info { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
.ng-sticky__mark {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--ng-brand-primary), var(--ng-brand-secondary));
  display: grid; place-items: center; color: #fff;
}
.ng-sticky__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ng-sticky__title {
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ng-sticky__sub {
  font-family: var(--ng-font-mono); font-size: 14px; letter-spacing: 0.02em;
  color: var(--ng-ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ng-sticky__price {
  display: flex; align-items: baseline; gap: 8px; flex-shrink: 0;
  padding-right: 4px;
}
.ng-sticky__price-old { color: var(--ng-ink-400); font-size: 14px; text-decoration: line-through; }
.ng-sticky__price-new { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ng-sticky__cta { flex-shrink: 0; }

@media (max-width: 720px) {
  .ng-sticky__inner { gap: 12px; padding: 10px var(--side-pad); }
  .ng-sticky__mark { display: none; }
  .ng-sticky__sub { display: none; }
  .ng-sticky__price-old { display: none; }
  .ng-sticky__title { font-size: 14px; white-space: normal; line-height: 1.2; }
  .ng-sticky__price-new { font-size: 19px; }
  .ng-sticky__cta.btn { padding: 11px 16px; font-size: 14px; }
}
@media (max-width: 400px) {
  .ng-sticky__price { display: none; }
  .ng-sticky__cta.btn { flex: 1; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────────────────
   6. RESPONSIVE / POLISH FIXES
   ────────────────────────────────────────────────────────────────────────── */

/* Agenci roster panel + trust strip — true desktop spacing is fine; tighten ≤1100 */
@media (max-width: 1100px) {
  .ag-hero__inner { grid-template-columns: 1fr !important; gap: 44px !important; }
  .ag-hero__panel { max-width: 520px; }
  .ag-trust { grid-template-columns: repeat(2, 1fr) !important; gap: 18px 24px !important; }
  .ag-change__grid,
  .ag-solution__grid,
  .ag-how__steps,
  .ag-get__grid,
  .ag-team__grid,
  .ag-program__grid,
  .ag-proof__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ag-offer__inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ag-bonus__inner,
  .ag-fit__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ag-final__choices { grid-template-columns: 1fr !important; }
  .ag-pipe { flex-wrap: wrap; }

  /* Warsztaty grids */
  .wsr-flow__inner { flex-wrap: wrap; }
  .wsr-map__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .wsr-areas__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .wsr-formats__grid { grid-template-columns: 1fr !important; }
  .wsr-clients__grid { grid-template-columns: repeat(4, 1fr) !important; }
  .wsr-get__inner { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* sticky bar needs breathing room above the footer on the longest pages */
.ng-page.has-sticky .footer { padding-bottom: 96px; }

@media (max-width: 760px) {
  .ag-team__grid,
  .ag-get__grid,
  .ag-program__grid,
  .ag-change__grid,
  .ag-solution__grid,
  .ag-how__steps,
  .ag-proof__grid,
  .wsr-map__grid,
  .wsr-areas__grid { grid-template-columns: 1fr !important; }
  .ag-trust { grid-template-columns: repeat(2, 1fr) !important; }
  .wsr-clients__grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Agent demo lines: keep label + text readable */
  .ag-pipe__arrow { transform: rotate(90deg); }
}

@media (max-width: 480px) {
  .ag-trust { grid-template-columns: 1fr !important; }
  .wsr-clients__grid { grid-template-columns: 1fr !important; }
  /* avoid the sticky bar covering the final CTA button on tiny screens */
  .ng-page.has-sticky .fd-final,
  .ng-page.has-sticky .ag-final { padding-bottom: 120px; }
}

/* Smooth anchor + nicer text rendering for the long reads */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ==========================================================================
   UNIFIKACJA WIZUALNA (warstwa nadrzędna)
   ========================================================================== */
:root {
  /* jedna, chłodna rodzina neutralnych — koniec z „raz beż, raz niebieski" */
  --ng-white-primary: #FFFFFF;
  --ng-white-secondary: #F2F5F9;
  --ng-bg: #FFFFFF;
  --ng-bg-elev: #FFFFFF;
  --ng-bg-muted: #F2F5F9;
  --ng-border: #E2E7EF;
  --ng-border-strong: #C6CEDA;
  --ng-divider: #EDF1F6;
  --ng-blue-100: #EAF2FE;
}
html, body { background: var(--ng-bg); }

/* naprzemienność sekcji: biel → #F2F5F9 → czerń (tylko akcenty) */
.section--muted, .news { background: var(--ng-bg-muted); }
/* strona główna — neutralny przeplot biel → szarość, bez czerni */
.home .hero, .home .habout, .home .hubtease, .home .testi, .home .hfaq { background: var(--ng-bg); }
.home .news, .home .products, .home .workshops, .home .hcta { background: var(--ng-bg-muted); }
/* granice na styku sekcji */
.home > section + section { border-top: 1px solid var(--ng-divider); }

/* warsztaty: jasny wariant */
.workshops__list li { color: var(--ng-fg-muted); }
.workshops__list svg { color: var(--ng-brand-secondary); }
.section--muted .card, .section--muted .testi__card, .section--muted .hfaq__item,
.news__form { background: #fff; border-color: var(--ng-border); }

/* karty na białym tle dostają delikatną ramkę, nie wypełnienie */
.section:not(.section--muted):not(.section--dark) .testi__card { background: var(--ng-bg-muted); }

/* nawigacja: jeden stan aktywny/hover w całym serwisie */
.ng-nav__links li a:hover,
.ng-nav__has-drop:hover .ng-nav__drop-trigger,
.ng-nav__has-drop.is-open .ng-nav__drop-trigger { background: var(--ng-bg-muted); color: var(--ng-fg); }
.ng-nav__links li a.is-active,
.ng-nav__drop-trigger.is-active { background: var(--ng-blue-100); color: var(--ng-brand-secondary); }
.ng-nav__drop-item:hover { background: var(--ng-bg-muted); }
.ng-nav__drop-item.is-active { background: var(--ng-blue-100); }
.ng-nav__drop-pill { background: var(--ng-bg-muted); }

/* mikroteksty: jedna skala, bez kapitalików i rozstrzelenia */
.overline { font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ng-brand-secondary); }
.eyebrow, .footer__col h6, .hub-tile__type, .workshops__panel-tag, .kb-dl-card__label {
  font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 600;
}
.eyebrow { color: var(--ng-fg-muted); }
.ng-nav__brand-tag { font-size: 14px; color: var(--ng-fg-muted); }
.footer__legal { font-size: 14px; color: var(--ng-ink-200); }
.tag, .btn--sm { font-size: 14px; }

/* wyrównanie do jednej siatki: sekcje nie dublują marginesu bocznego */
.section, .section--tight, .news, .hcta, .workshops, .hubtease { padding-left: 0; padding-right: 0; }
.news, .hcta { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }

/* miniatury: wyraźna krawędź na jasnym tle */
.hub-card__thumb { background: var(--ng-bg-muted); border-bottom: 1px solid var(--ng-border); }

/* styles-netgonet.css */
/* Decyzje wlasciciela nad projektem "Nowa strona": jedna wartosc zaokraglenia przyciskow i pol, naprawy telefonu, sekcje z Landingu i od grafika. */
.btn, .btn--sm, .btn--lg, .ngf-przycisk { border-radius: 8px !important; }
.ngf-form input:not([type=checkbox]):not([type=radio]), .ngf-form select, .ngf-form textarea { border-radius: 8px; }

/* Ukryte elementy naprawde ukryte (reguly display z projektu wygrywaly z atrybutem hidden) */
[hidden] { display: none !important; }
.brak-obrazu { display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--ng-fg-muted); background: var(--ng-white-secondary); }

/* Menu: zamkniete nie rozszerza strony na telefonie, przycisk menu przy prawej krawedzi */
@media (max-width: 1100px) {
  .ng-nav:not(.is-open) .ng-nav__links { display: none; }
  .ng-nav__right { margin-left: auto; justify-self: end; }
}

/* Portret wyciety, bez ramki (z projektu Landing) */
.hero__portrait--wyciety { background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible; aspect-ratio: auto; height: auto; }
.hero__portrait--wyciety::before, .hero__portrait--wyciety::after { display: none !important; }
.hero__portrait--wyciety .hero__photo { position: static; display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; object-position: bottom; transform: none; border-radius: 0; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 720px) {
  .hero__proof { align-items: center; }
  .hero__avatars { flex: 0 0 auto; }
}

/* Liczby */
.liczby { border-block: 1px solid var(--ng-divider); background: var(--ng-bg, #fff); padding: 28px 0; }
.liczby__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.liczby__el { border-left: 1px solid var(--ng-divider); padding-left: 20px; min-width: 0; }
.liczby__n { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ng-brand-secondary); }
.liczby__l { font-size: 14px; line-height: 1.4; color: var(--ng-fg-muted); margin-top: 6px; }
@media (max-width: 720px) { .liczby__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wybor celu */
.cele__head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: end; margin-bottom: 40px; }
.cele__head h2 { margin: 0; }
.cele__head p { margin: 0; color: var(--ng-fg-muted); }
.cele__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cele__karta { display: flex; flex-direction: column; min-width: 0; }
.cele__foto { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--ng-white-secondary); }
.cele__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cele__karta h3 { font-size: 18px; line-height: 1.3; margin: 18px 0 10px; }
.cele__karta h3 em { font-style: normal; color: var(--ng-brand-secondary); }
.cele__karta p { font-size: 15px; color: var(--ng-fg-muted); margin: 0 0 18px; flex: 1; }
.cele__karta .btn { justify-content: center; width: 100%; }
@media (max-width: 1100px) { .cele__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cele__head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 26px; } .cele__grid { grid-template-columns: minmax(0, 1fr); } }

/* Pas YouTube */
.ytpas { background: var(--ng-black-primary); color: var(--ng-white-primary); }
.ytpas h2 { color: var(--ng-white-primary); margin: 10px 0 0; }
.ytpas .overline { color: rgba(245, 245, 245, .7); }
.ytpas .hero__title-em { color: var(--ng-brand-primary); }
.ytpas__head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: end; margin-bottom: 36px; }
.ytpas__head p { color: rgba(245, 245, 245, .75); margin: 0 0 16px; }
.ytpas .btn--accent { background: var(--ng-brand-primary); color: var(--ng-black-primary); }
.ytpas__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ytpas__film { display: block; color: var(--ng-white-primary); text-decoration: none; min-width: 0; }
.ytpas__mini { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0F1113; }
.ytpas__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ytpas__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; color: #fff; }
.ytpas__t { display: block; margin-top: 12px; font-weight: 600; line-height: 1.35; }
.ytpas__film:hover .ytpas__t { color: var(--ng-brand-primary); }
@media (max-width: 720px) { .ytpas__head { grid-template-columns: minmax(0, 1fr); gap: 16px; } .ytpas__grid { grid-template-columns: minmax(0, 1fr); } }

/* Formularze Gonet OS w miejscu formularzy z projektu */
[data-formularz] .ngf-form { display: grid; gap: 14px; }
[data-formularz] label { display: block; font-size: 14px; font-weight: 600; color: var(--ng-fg); margin-bottom: 6px; }
[data-formularz] input:not([type=checkbox]):not([type=radio]), [data-formularz] select, [data-formularz] textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ng-border-strong); background: #fff; color: var(--ng-black-primary); font: inherit; }
[data-formularz] .ngf-przycisk { background: var(--ng-brand-secondary); color: #fff; border: 0; padding: 14px 24px; font-weight: 600; font-size: 16px; cursor: pointer; }
[data-formularz] .ngf-przycisk:hover { background: var(--ng-blue-700); }
.news__form[data-formularz] { display: block; }
.news__form[data-formularz] .ngf-form { width: 100%; }
.news__form[data-formularz] label { display: block; }
[data-formularz] input[type=checkbox] { width: auto; margin: 0 8px 0 0; vertical-align: -2px; }

/* ===== Prawdziwe tresci: najpierw telefon, potem szersze ekrany. Tekst nie mniejszy niz 15 px. ===== */
.ng-page { --ng-fs-overline: 15px; --ng-fs-caption: 15px; --ng-fs-small: 15px; }
.home p, .kursy p, .omn p { font-size: 16px; }
.footer, .footer p, .footer a, .footer h6, .footer__tail, .footer__tail span { font-size: 15px !important; letter-spacing: normal; text-transform: none; }
.ng-page h2 { text-wrap: balance; }
.ng-page .section { padding-block: 56px; }
.ng-page .home p.hero__czesc { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--ng-fg); }
.ng-page .home p.hero__lead { font-size: 18px; }
.hero__actions { display: grid; gap: 12px; }
.hero__actions .btn, .hcta__actions .btn { justify-content: center; width: 100%; }
.ng-nav__links li a { font-size: 16px; }
.liczby__l { font-size: 15px; }
.ng-nav__panel { font-size: 15px; }

/* Pakiet startowy i formularz */
.npk__uklad { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.npk__opis h2 { margin: 0 0 12px; }
.npk__opis > p { margin: 0 0 22px; }
.npk__lista { display: grid; gap: 16px; }
.npk__el { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.npk__el img { width: 96px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; display: block; }
.npk__el h3 { font-size: 17px; line-height: 1.3; margin: 0 0 4px; }
.npk__el p { margin: 0; font-size: 15px; color: var(--ng-fg-muted); }
.npk__formularz { background: #fff; border: 1px solid var(--ng-border); border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(18, 20, 23, .06); }
.npk__formularz button[type="submit"] { width: 100%; }
#materialy { scroll-margin-top: 80px; background: var(--ng-blue-100); }

/* Karty produktow */
.npr h2 { margin: 0 0 8px; }
.npr__wstep { margin: 0 0 24px; color: var(--ng-fg-muted); }
.npr__siatka { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.npr__karta { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; background: #fff; border: 1px solid var(--ng-border); border-radius: 12px; padding: 14px; min-width: 0; }
.npr__foto { width: 104px; height: 104px; object-fit: cover; border-radius: 8px; display: block; }
.npr__tresc { display: flex; flex-direction: column; min-width: 0; }
.npr__tresc h3 { font-size: 18px; line-height: 1.25; margin: 0 0 6px; }
.npr__tresc p { font-size: 15px; margin: 0 0 10px; color: var(--ng-fg-muted); }
.npr__tresc .npr__nazwa { color: var(--ng-brand-secondary); font-weight: 600; }
.npr__tresc .btn { margin-top: auto; align-self: flex-start; }
.npr__wszystkie, .nbl__wiecej, .nop__wiecej { display: flex; justify-content: center; margin-top: 20px; width: 100%; }
.habout__photo img { object-fit: cover; object-position: top; }

/* Blog */
.nbl h2 { margin: 0 0 20px; }
.nbl__siatka { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.nbl__wpis { display: block; color: var(--ng-fg); text-decoration: none; min-width: 0; }
.nbl__wpis img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.nbl__t { display: block; margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; }

/* Narzedzia */
.nnz h2 { margin: 0 0 8px; }
.nnz__wstep { margin: 0 0 20px; color: var(--ng-fg-muted); }
.nnz__siatka { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nnz__el { display: block; background: #fff; border: 1px solid var(--ng-border); border-radius: 8px; padding: 14px; color: var(--ng-fg); text-decoration: none; min-width: 0; }
.nnz__el strong { display: block; font-size: 17px; }
.nnz__el span { display: block; font-size: 15px; line-height: 1.35; color: var(--ng-fg-muted); margin-top: 2px; }

/* Opinie */
.nop h2 { margin: 0 0 20px; }
.nop__siatka { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.nop__karta { margin: 0; background: #fff; border: 1px solid var(--ng-border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; min-width: 0; }
.nop__karta blockquote { margin: 0 0 16px; font-size: 16px; line-height: 1.55; }
.nop__karta figcaption { display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 1.35; margin-top: auto; color: var(--ng-fg-muted); }
.nop__karta figcaption strong { color: var(--ng-fg); }
.nop__karta img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* Podstrony: naglowek i tekst */
.npg { padding: 44px 0; background: var(--ng-black-primary); color: var(--ng-white-primary); overflow: hidden; }
.npg h1 { color: var(--ng-white-primary); font-size: clamp(34px, 5vw, 56px); line-height: 1.08; margin: 0 0 14px; }
.ng-page .npg p { font-size: 18px; margin: 0; max-width: 62ch; color: rgba(245, 245, 245, .85); }
.npg__uklad { display: grid; gap: 20px; }
.npg__foto { display: block; width: min(320px, 80%); justify-self: center; margin-bottom: -44px; }
.ntk h2 { margin: 0 0 14px; }
.ntk p { margin: 0 0 14px; line-height: 1.65; }
.ntk p a { color: var(--ng-brand-secondary); text-decoration: underline; }
.ntk__wezszy { max-width: 760px; }
.ntk--ciemna { background: var(--ng-brand-secondary); color: #fff; }
.ntk--ciemna h2 { color: #fff; }
.ntk--ciemna p { color: #fff; }
.ntk__lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.ntk__lista li { display: flex; gap: 10px; font-size: 17px; font-weight: 600; }
.ntk__lista svg { flex: 0 0 auto; color: var(--ng-brand-secondary); margin-top: 4px; }
.ntk__dwie { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.ntk__foto { display: block; width: 100%; max-height: 460px; object-fit: cover; object-position: top; border-radius: 12px; }
.ntk__galeria { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.ntk__galeria img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.ntk__profile { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ntk__profile .btn { justify-content: center; }

@media (min-width: 720px) {
  .ng-page .section { padding-block: 88px; }
  .hero__actions { display: flex; flex-wrap: wrap; }
  .hero__actions .btn, .hcta__actions .btn { width: auto; }
  .npk__uklad { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
  .npk__formularz { padding: 28px; }
  .npr__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nbl__siatka, .nop__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nnz__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .npr__wszystkie, .nbl__wiecej, .nop__wiecej { display: inline-flex; width: auto; }
  .npg { padding: 72px 0; }
  .npg__uklad { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
  .npg__foto { width: 100%; margin-bottom: -72px; }
  .ntk__dwie { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: start; }
  .ntk__dwie--rowne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ntk__foto { max-height: none; }
  .ntk__galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ntk__profile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .npr__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .npr__siatka--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .npr__karta { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .npr__foto { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* Formularz i przyciski: bez mikrotekstu */
.ng-page .ngf-etykieta { font-size: 16px; }
.ng-page .ngf-pole-zgoda .ngf-zaznacz, .ng-page .ngf-pole-zgoda .ngf-zaznacz span { font-size: 15px; line-height: 1.45; }
.ng-page .btn { font-size: 16px; }
.ng-page .btn--sm { font-size: 15px; }

/* Poprawki po zrzutach */
.npg--foto { background: var(--ng-bg-muted); color: var(--ng-fg); }
.npg--foto h1 { color: var(--ng-fg); }
.ng-page .npg--foto p { color: var(--ng-fg); }
.hcta h2 { margin-bottom: 12px; }
.footer__tail a { color: inherit; text-decoration: underline; }
.ng-page .ngf-pole-zgoda .ngf-zaznacz, .ng-page .ngf-pole-zgoda .ngf-zaznacz span { font-weight: 400; }
@media (min-width: 1100px) {
  .npr__foto { object-fit: contain; background: var(--ng-bg-muted); }
}

/* ===== Seria poprawkowa 2 ===== */
/* Przycisk na ciemnym tle: bialy zamiast jasnoniebieskiego */
.btn--bialy, .section--dark .btn--accent, .section--dark .btn--primary { background: #fff; color: var(--ng-black-primary); }
.btn--bialy:hover, .section--dark .btn--accent:hover, .section--dark .btn--primary:hover { background: var(--ng-ink-100); color: var(--ng-black-primary); }

/* Kim jestem: kadr na twarz i popiersie */
.habout__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; }
.habout__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; border-radius: 0; }
.habout__inner { padding-inline: var(--ng-gutter, 20px); }
.ntk__foto { aspect-ratio: 4 / 5; max-height: none; object-position: 50% 32%; }

/* YouTube: naglowek i opis po lewej, przycisk po prawej */
.ytpas__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
.ytpas__head h2 { margin: 0 0 10px; }
.ytpas__head p { margin: 0; font-size: 18px; }
.ytpas__grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.ytpas__t { font-size: 17px; }
.ytpas__mini img { transition: transform .25s var(--ng-ease-out, ease); }
.ytpas__film:hover .ytpas__mini img { transform: scale(1.03); }

/* Produkty: makiety na jasnym tle, cena */
.npr__tresc .npr__cena { font-size: 20px; font-weight: 700; color: var(--ng-fg); margin: 0 0 10px; }
.npr__foto { background: var(--ng-bg-muted); }

/* Stopka minimalna */
.footer.stopka { padding: 28px 20px; }
.stopka__rzad { max-width: var(--ng-container); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.stopka__logo { display: block; height: 24px; width: auto; }
.stopka__linki a { color: inherit; text-decoration: underline; }
.stopka__spolecz { display: inline-flex; gap: 16px; }
.stopka__spolecz a { display: inline-flex; color: var(--ng-white-primary); opacity: .8; }
.stopka__spolecz a:hover { opacity: 1; }

/* Baza wiedzy */
.hub-hero h1, .nz-hero h1, .ko-hero h1 { margin: 0 0 12px; }
.hub-hero p, .nz-hero p, .ko-hero p { font-size: 18px; max-width: 62ch; margin: 0; }
.kb-hero__skok, .ko-hero__skok { margin-top: 22px; }
.ng-page .hub-topic, .ng-page .hub-type, .ng-page .hub-deep__toggle, .ng-page .nz-cat { font-size: 15px; }
.hub-controls__row { flex-wrap: wrap; gap: 10px; }
.hub-topics { flex-wrap: wrap; }
.hub-filmy { display: contents; }
.hub-grid { grid-template-columns: minmax(0, 1fr); }
a.hub-tile { display: block; color: var(--ng-fg); text-decoration: none; min-width: 0; }
.hub-tile__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hub-tile__thumb { aspect-ratio: 16 / 9; }
.ng-page .hub-tile__body h5 { font-size: 17px; }
.ng-page .hub-tile__type { font-size: 15px; letter-spacing: normal; text-transform: none; padding: 4px 10px; color: #fff; }
.ng-page .hub-tile .eyebrow { font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--ng-fg-muted); }
.hub-list-head { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hub-list-head h2 { margin: 0; }
#pakiet { scroll-margin-top: 80px; background: var(--ng-blue-100); }
.hub-sub__btn { font-size: 15px; color: #fff; }
.ng-page .hub-sub__btns { flex-wrap: wrap; }
.hub-sub h3 { margin: 0; }

/* Narzedzia */
.nz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
a.nz-tile { display: flex; flex-direction: column; color: var(--ng-fg); text-decoration: none; min-width: 0; }
a.nz-tile h4 { margin: 10px 0 4px; font-size: 18px; }
a.nz-tile p { font-size: 15px; margin: 0 0 12px; color: var(--ng-fg-muted); }
.nz-tile__idz { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 15px; font-weight: 600; color: var(--ng-brand-secondary); }
.ng-page .nz-tile__logo { font-size: 15px; }

/* Kontakt */
#formularz, #program, #oferta { scroll-margin-top: 80px; }
.ng-page .ko-faq__item summary { font-size: 17px; }
.ko-faq__odp p { font-size: 16px; margin: 0 0 10px; }
.ko-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ko-profile .btn { justify-content: center; }
.ko-form__form { background: #fff; border: 1px solid var(--ng-border); border-radius: 12px; padding: 20px; }

/* Landingi */
.ng-page p.ld-nad { font-size: 18px; font-weight: 600; color: var(--ng-brand-secondary); margin: 0 0 10px; }
.fd-hero h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; }
.ld-kup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 22px 0 14px; }
.ld-kup .btn { justify-content: center; }
.ld-kup--pion { flex-direction: column; align-items: flex-start; }
.ld-cena { font-size: 32px; font-weight: 800; line-height: 1; flex: 0 0 100%; color: var(--ng-fg); }
.ng-page .ld-dowod { font-size: 16px; font-weight: 600; margin: 0; }
.ld-makieta { display: block; width: 100%; border-radius: 16px; }
.ld-autor { display: block; width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; }
.ld-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ld-lista li { display: flex; gap: 8px; font-size: 16px; font-weight: 600; }
.ld-lista svg { flex: 0 0 auto; margin-top: 4px; color: var(--ng-brand-secondary); }
.ng-page .fd-lesson__day { font-size: 15px; font-weight: 600; }
.ng-page .fd-lesson p, .ng-page .fd-pain__card p, .ng-page .fd-benefit p, .ng-page .fd-testi__card blockquote { font-size: 16px; }
.ng-page .fd-testi__card figcaption span, .ng-page .fd-testi__card figcaption strong { font-size: 15px; }
.ng-page .fd-bonus__list span { font-size: 15px; }
.fd-final .ld-dowod { color: rgba(245, 245, 245, .85); margin-bottom: 18px; }
.ng-page .ng-sticky__title { font-size: 15px; }
.ng-page .ng-sticky__sub { font-size: 15px; }

/* Wzory z projektu */
.wzor-pasek { background: var(--ng-warning, #b45309); color: #fff; font-size: 15px; font-weight: 600; text-align: center; padding: 8px 16px; }

@media (min-width: 720px) {
  .ytpas__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .ytpas__head .btn { flex: 0 0 auto; }
  .ytpas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .stopka__rzad { flex-direction: row; justify-content: space-between; text-align: left; }
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ko-profile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ko-form__form { padding: 28px; }
  .ld-cena { flex: 0 0 auto; }
  .ld-trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .npr__foto { object-fit: cover; }
}

/* Menu: Panel klienta na komputerze jako przycisk, na telefonie w rozwijanym menu */
.tylko-tel { display: none; }
@media (min-width: 1101px) { .ng-page .ng-nav__panel { display: inline-flex !important; } }
@media (max-width: 1100px) { .ng-nav__links li.tylko-tel { display: block; } }

/* Poprawki po zrzutach serii 2 */
.habout__inner { padding-inline: 0; }
.ng-page .habout__photo { margin: 0; width: 100%; max-width: 440px; justify-self: start; }
.fd-hero h1 .hero__title-em { display: inline; }
@media (max-width: 719px) {
  .fd-guarantee__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
  .ng-sticky__sub { display: none; }
}

/* Kim jestem: ta sama szerokosc co reszta strony */
.ng-page .habout__inner { box-sizing: content-box; max-width: 1152px; margin-inline: auto; padding-inline: 20px; }

/* ===== System strony: najpierw telefon. Przyciski i kategorie 8 px, karty i zdjecia 12 px, jedna szerokosc 1152 px. ===== */
.ng-page { --s-gutter: 20px; --s-w: 1152px; --s-nieb: #1653C7; --s-jasny: #9CC5FF; }
.s { padding-block: 56px; }
.s-w { box-sizing: content-box; max-width: var(--s-w); margin-inline: auto; padding-inline: var(--s-gutter); }
.s h1, .s-hero h1 { font-size: clamp(36px, 6vw, 62px); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
.s h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.s h3 { font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.s p, .s li { font-size: 17px; line-height: 1.6; }
.s p { margin: 0 0 14px; }
.s p:last-child { margin-bottom: 0; }
.s-glowa { margin-bottom: 28px; max-width: 720px; }
.s-lead, .s p.s-lead { font-size: 19px; line-height: 1.5; color: var(--ng-fg-muted); }
.s--szare { background: var(--ng-bg-muted); }
.s--nieb, .s-hero { background: radial-gradient(120% 130% at 75% 0%, #2467E6 0%, var(--s-nieb) 42%, #0B2A86 100%); color: #fff; }
.s--ciemne { background: var(--ng-black-primary); color: #fff; }
.s--nieb h1, .s--nieb h2, .s--nieb h3, .s--ciemne h2, .s--ciemne h3, .s-hero h1 { color: #fff; }
.s--nieb p, .s--ciemne p, .s-hero p, .s--nieb .s-lead, .s--ciemne .s-lead, .s-hero .s-lead, .s-hero p.s-lead { color: rgba(255, 255, 255, .88); }
.s-em { color: var(--s-nieb); }
.s--nieb .s-em, .s--ciemne .s-em, .s-hero .s-em { color: var(--s-jasny); }

/* Przyciski i kategorie: jeden format */
.ng-page .btn { border-radius: 8px; min-height: 48px; font-size: 16px; justify-content: center; }
.ng-page .btn--sm { min-height: 40px; font-size: 15px; }
.ng-page .btn--lg { min-height: 52px; }
.ng-page .btn--bialy { background: #fff; color: var(--ng-black-primary); border-color: #fff; }
.ng-page .btn--bialy:hover { background: var(--ng-ink-100); color: var(--ng-black-primary); }
.ng-page .btn--jasny { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.ng-page .btn--jasny:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.s-akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.s-akcje .btn { flex: 1 1 100%; }
.s-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ng-page .s-chip, .ng-page .hub-topic, .ng-page .hub-type, .ng-page .hub-deep__toggle, .ng-page .nz-cat, .ng-page .hub-search, .ng-page .nz-search { border-radius: 8px; }
.ng-page .s-chip { min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 600; font-family: inherit; color: var(--ng-fg); background: #fff; border: 1px solid var(--ng-border-strong); cursor: pointer; }
.ng-page .s-chip.is-active { background: var(--s-nieb); border-color: var(--s-nieb); color: #fff; }

/* Siatki */
.s-siatka { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.s-siatka--tel2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s-split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.s-rzad { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.s-naglowek { display: flex; flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 28px; }
.s-naglowek h2 { margin: 0 0 8px; }
.s-naglowek .btn { align-self: flex-start; }

/* Karty i zdjecia */
.s-karta { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--ng-border); border-radius: 12px; padding: 20px; color: var(--ng-fg); }
.s--szare .s-karta { border-color: transparent; }
.s-karta p { color: var(--ng-fg-muted); font-size: 16px; }
.s-karta > .btn, .s-karta > .s-dol { margin-top: auto; }
.s-ikona { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--ng-blue-100); color: var(--s-nieb); margin-bottom: 14px; }
.s-etykieta { font-size: 15px; font-weight: 700; color: var(--s-nieb); margin: 0 0 6px; }
.s-foto { display: block; width: 100%; height: auto; border-radius: 12px; object-fit: cover; background: var(--ng-bg-muted); }
.s-foto--45 { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.s-foto--43 { aspect-ratio: 4 / 3; }
.s-foto--169 { aspect-ratio: 16 / 9; }
.s-foto--11 { aspect-ratio: 1 / 1; }
.s-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.s-lista li { display: flex; gap: 10px; font-weight: 600; font-size: 16px; }
.s-lista svg { flex: 0 0 auto; margin-top: 4px; color: var(--s-nieb); }
.s--nieb .s-lista svg, .s--ciemne .s-lista svg { color: var(--s-jasny); }

/* Naglowki stron */
.s-hero { overflow: hidden; }
.s-hero__uklad { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); padding-top: 44px; }
.s-hero__tekst { padding-bottom: 8px; min-width: 0; }
.s-hero p.s-czesc { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 12px; }
.s-hero p { font-size: 18px; line-height: 1.55; margin: 0; max-width: 58ch; }
.s-hero__foto { display: block; width: min(320px, 82%); justify-self: center; align-self: end; height: auto; margin-bottom: 0; }
.s-hero__foto--male { width: min(230px, 62%); }
.s-hero__makieta { display: block; width: 100%; border-radius: 12px; margin-bottom: 40px; }
.s-hero--tekst .s-hero__uklad { padding-block: 44px; }
.s-hero .s-cena { color: #fff; }
.s-dowod, .s p.s-dowod, .s-hero p.s-dowod { font-size: 16px; font-weight: 600; margin-top: 16px; }

/* Liczby */
.s-liczby { background: #fff; border-bottom: 1px solid var(--ng-divider); }
.s-liczby__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding-block: 24px; }
.s-liczby__n { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--s-nieb); letter-spacing: -.02em; }
.s-liczby__l { font-size: 15px; line-height: 1.35; color: var(--ng-fg-muted); margin-top: 4px; }

/* Produkty */
.s-produkt { padding: 0; overflow: hidden; }
.s-produkt__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #0B2A86; }
.s-produkt__tresc { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 20px; }
.s-produkt__tresc .btn { margin-top: auto; }
.s-produkt__nazwa { font-size: 16px; font-weight: 600; color: var(--s-nieb); margin: 0 0 8px; }
.s-cena { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ng-fg); }
.s-produkt .s-cena { margin: 0 0 14px; }
.s-kurs { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.s-kurs__tresc { padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; }
.s-kurs__tresc .btn { width: 100%; }
.s-kurs h3 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.01em; }
.s-kurs .s-produkt__foto { aspect-ratio: 1 / 1; height: 100%; }

/* Pakiet i formularze */
.s-pakiet__el { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
.s-pakiet__el img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.s-pakiet__el h3 { font-size: 17px; margin-bottom: 4px; }
.s-pakiet__el p { font-size: 15px; color: var(--ng-fg-muted); }
.s-pakiet__lista { display: grid; gap: 16px; margin-top: 18px; }
.s-formularz { background: #fff; border: 1px solid var(--ng-border); border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(18, 20, 23, .06); min-width: 0; color: var(--ng-fg); }
.s-formularz button[type="submit"] { width: 100%; border-radius: 8px; }
.ng-page .s-formularz input, .ng-page .s-formularz select, .ng-page .s-formularz textarea { border-radius: 8px; }
#materialy, #pakiet, #formularz, #program, #oferta { scroll-margin-top: 80px; }

/* Wpisy */
.s-wpis { display: flex; flex-direction: column; color: var(--ng-fg); text-decoration: none; min-width: 0; }
.s-wpis[hidden] { display: none; }
.s-wpis__data { font-size: 15px; color: var(--ng-fg-muted); margin-top: 12px; }
.s-wpis__t { font-size: 19px; font-weight: 700; line-height: 1.28; margin-top: 4px; }
.s-wpis:hover .s-wpis__t { color: var(--s-nieb); }
.s-wyrozniony { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); color: var(--ng-fg); text-decoration: none; margin-bottom: 32px; }
.s-wyrozniony h2 { margin: 6px 0 10px; }
.s-wyrozniony[hidden] { display: none; }
.s-wiecej { display: flex; margin-top: 24px; }
.s-wiecej .btn { flex: 1 1 100%; }

/* Opinie */
.s-opinia { margin: 0; }
.s-opinia blockquote { margin: 0 0 16px; font-size: 16px; line-height: 1.55; }
.s-opinia figcaption { display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 1.35; margin-top: auto; color: var(--ng-fg-muted); }
.s-opinia figcaption strong { color: var(--ng-fg); }
.s-opinia img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* FAQ */
.s-faq { display: grid; gap: 10px; }
.s-faq details { background: #fff; border: 1px solid var(--ng-border); border-radius: 12px; }
.s-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary svg { flex: 0 0 auto; }
.s-faq details[open] summary svg { transform: rotate(45deg); }
.s-faq__odp { padding: 0 18px 16px; }
.s-faq__odp p { font-size: 16px; color: var(--ng-fg-muted); margin: 0 0 10px; }

/* Narzedzia */
.s-narz { text-decoration: none; padding: 16px; }
.s-narz[hidden] { display: none; }
.s-narz img { display: block; width: 44px; height: 44px; border-radius: 8px; object-fit: contain; margin-bottom: 12px; }
.s-narz h3 { font-size: 18px; margin-bottom: 4px; }
.s-narz p { font-size: 15px; line-height: 1.35; margin-bottom: 12px; }
.s-narz .s-dol { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--s-nieb); }

/* Sekcja z CTA */
.s-cta { display: flex; flex-direction: column; gap: 20px; }
.s-cta h2 { margin-bottom: 8px; }
.s-cta .btn { width: 100%; }
.s-galeria { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.s-galeria img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.s-profile { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.s-autor-foto { display: block; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 28%; border-radius: 12px; }
.s-pasek-oferta { background: #fff; border-radius: 12px; padding: 20px; color: var(--ng-fg); }
.s-pasek-oferta .btn { width: 100%; margin-top: 14px; }
.s-liczby-mini { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 20px; }
.s-liczby-mini strong { display: block; font-size: 30px; line-height: 1.1; color: var(--s-nieb); }
.s-liczby-mini span { font-size: 15px; color: var(--ng-fg-muted); }

@media (min-width: 720px) {
  .ng-page { --s-gutter: 32px; }
  .s { padding-block: 80px; }
  .s-akcje .btn, .s-wiecej .btn { flex: 0 0 auto; }
  .s-siatka--2, .s-siatka--3, .s-siatka--tel2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .s-siatka--tel2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-naglowek { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .s-naglowek .btn { align-self: auto; flex: 0 0 auto; }
  .s-liczby__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 28px; }
  .s-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-profile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .s-cta .btn { width: auto; flex: 0 0 auto; }
  .s-kurs__tresc .btn { width: auto; }
  .s-formularz { padding: 28px; }
}
@media (min-width: 960px) {
  .s-siatka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-siatka--tel2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
  .s-split--gora { align-items: start; }
  .s-split--odwr > :first-child { order: 2; }
  .s-rzad { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
  .s-hero__uklad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; padding-top: 64px; align-items: end; }
  .s-hero__tekst { padding-bottom: 72px; align-self: center; }
  .s-hero__foto { width: 100%; max-width: 460px; }
  .s-hero__foto--male { max-width: 360px; }
  .s-hero__makieta { margin-bottom: 64px; align-self: center; }
  .s-hero--tekst .s-hero__uklad { padding-block: 72px; }
  .s-kurs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .s-kurs__tresc { padding: 36px; }
  .s-wyrozniony { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
}

.s-po, .s p.s-po { margin-top: 24px; font-weight: 600; color: var(--ng-fg); }
.s p.s-odstep { margin-top: 16px; }
.s-link { color: var(--s-nieb); text-decoration: underline; }
.s-cena--hero { margin-top: 18px; font-size: 34px; }
.s--nieb .s-lista--oferta { margin-top: 0; }
.s--nieb .s-lista--oferta li { font-weight: 400; color: rgba(255, 255, 255, .9); }
.s--nieb .s-lista--oferta strong { color: #fff; font-weight: 700; }
.s-pasek-oferta p.s-dowod { color: var(--ng-fg); margin-top: 12px; }
.s--nieb h2 + .s-pasek-oferta { margin-top: 20px; }
.ng-page .s-profile--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-karta--wiecej { justify-content: center; background: var(--ng-bg-muted); border-color: transparent; }
.s-karta--wiecej .btn { margin-top: 8px; }
.s--ciemne .ytpas__t { color: #fff; }
.ng-sticky__cta.btn--bialy { flex: 0 0 auto; }

/* Poprawki po zrzutach */
.s--ciemne p.s-lead, .s--nieb p.s-lead { color: rgba(255, 255, 255, .88); }
.s p.s-cena { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ng-fg); margin: 4px 0 14px; }
.ng-page .ng-nav { padding-inline: max(var(--s-gutter), calc((100% - 1152px) / 2)); }
.footer.stopka { padding-inline: max(var(--s-gutter), calc((100% - 1152px) / 2)); }
.stopka__rzad { max-width: none; }
.s-naglowek .btn { align-self: stretch; }
@media (min-width: 720px) { .s-naglowek .btn { align-self: auto; } }

/* Tresc, menu i stopka na tej samej linii */
.ng-page .s-w { box-sizing: border-box; max-width: calc(1152px + 2 * var(--s-gutter)); }

/* ===== Elementy marki wg projektu grafika: granat zamiast czerni, jasny hero, przerywane ramki, sygnet w tle, oznaczenia mono, zaokraglone pasy ===== */
.ng-page { --ng-black-primary: #1B2537; --ng-fg: #1B2537; --s-granat: #1B2537; }

/* Oznaczenie mono z sygnetem */
.ng-page p.s-znak { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--ng-font-mono); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--s-nieb); }
.ng-page p.s-znak::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; border: 1px dashed currentColor; border-radius: 6px; background: url("img/sygnet.svg") center / 13px no-repeat; }
.ng-page .s-hero:not(.s-hero--jasne) p.s-znak, .ng-page .s--ciemne p.s-znak, .ng-page .s--nieb p.s-znak { color: var(--s-jasny); }
.ng-page .s-hero:not(.s-hero--jasne) p.s-znak::before, .ng-page .s--ciemne p.s-znak::before, .ng-page .s--nieb p.s-znak::before { background-image: url("img/sygnet-white.svg"); }

/* Baner podstron: granat, zaokraglony dol, sygnet w tle, bez twarzy */
.s-hero { position: relative; background: var(--s-granat); border-radius: 0 0 28px 28px; }
.s-hero::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 340px; height: 340px; background: url("img/sygnet-white.svg") center / contain no-repeat; opacity: .05; pointer-events: none; }
.s-hero .s-w { position: relative; z-index: 1; }
.s-hero--tekst .s-hero__uklad { padding-block: 40px 44px; }
.s-hero h1 { font-size: clamp(34px, 5vw, 54px); }
.s-hero__makieta { position: relative; }

/* Hero Startu: jasny, portret w karcie z przerywana ramka */
.s-hero--jasne { background: #fff; color: var(--ng-fg); border-radius: 0; }
.s-hero--jasne::after { right: -60px; top: -40px; bottom: auto; width: 520px; height: 520px; background-image: url("img/sygnet.svg"); opacity: .045; }
.s-hero--jasne h1 { color: var(--ng-fg); font-size: clamp(38px, 6vw, 62px); }
.s-hero--jasne p, .s-hero--jasne p.s-lead { color: var(--ng-fg-muted); }
.s-hero--jasne .s-em { color: var(--s-nieb); }
.s-portret { position: relative; align-self: end; justify-self: center; width: min(340px, 86%); margin: 12px 0 28px; }
.s-portret__tlo { display: block; border-radius: 24px; background: linear-gradient(180deg, #EAF2FF 0%, #D7E6FF 100%); overflow: hidden; }
.s-portret img { display: block; width: 100%; height: auto; }
.s-portret::before, .s-ramka::before { content: ""; position: absolute; inset: -9px -9px 9px 9px; border: 1.5px dashed rgba(22, 83, 199, .45); border-radius: 26px; pointer-events: none; }
.s-ramka { position: relative; display: block; }
.s-ramka > img { position: relative; display: block; }
.s-hero .s-ramka::before { border-color: rgba(156, 197, 255, .55); }
.s-hero .s-ramka { margin-bottom: 36px; }
.s-hero .s-ramka .s-hero__makieta { margin: 0; }

/* Liczby: kreska po lewej */
.s-liczby__siatka > div { border-left: 1px solid var(--ng-border-strong); padding-left: 14px; }

/* Ikony w przerywanym kwadracie */
.s-ikona { background: transparent; border: 1.5px dashed rgba(22, 83, 199, .45); }

/* Karty produktow: przerywany naroznik */
.s-produkt { position: relative; overflow: visible; isolation: isolate; }
.s-produkt > img { border-radius: 12px 12px 0 0; }
.s-produkt::before { content: ""; position: absolute; z-index: -1; left: -7px; top: -7px; width: 62%; height: 42%; border: 1.5px dashed rgba(22, 83, 199, .45); border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; pointer-events: none; }
.s-kurs { overflow: hidden; }
.s-kurs::before { display: none; }

/* Pasy: zaokraglone, odsuniete od krawedzi */
.s--nieb, .s--ciemne { position: relative; overflow: hidden; margin-inline: 10px; border-radius: 24px; background: var(--s-granat); }
.s--nieb { background: linear-gradient(135deg, #1A4FB5 0%, var(--s-nieb) 100%); margin-block: 24px; }
.s--nieb::after { content: ""; position: absolute; right: -30px; top: -14px; width: 340px; height: 80px; background: url("img/logo-netgonet-white.svg") right center / contain no-repeat; opacity: .08; pointer-events: none; }
.s--ciemne::after { content: ""; position: absolute; right: -80px; bottom: -90px; width: 300px; height: 300px; background: url("img/sygnet-white.svg") center / contain no-repeat; opacity: .04; pointer-events: none; }
.s--nieb > .s-w, .s--ciemne > .s-w { position: relative; z-index: 1; }

/* Akcent w tytule karty */
.s-produkt h3 .s-em { color: var(--s-nieb); }

@media (min-width: 720px) {
  .s-hero { border-radius: 0 0 48px 48px; }
  .s-hero--jasne { border-radius: 0; }
  .s-hero--tekst .s-hero__uklad { padding-block: 56px 64px; }
  .s-hero::after { width: 460px; height: 460px; right: -80px; bottom: -150px; }
  .s-hero--jasne::after { width: 720px; height: 720px; top: -120px; bottom: auto; }
  .s--nieb, .s--ciemne { margin-inline: 24px; border-radius: 36px; }
  .s--nieb::after { width: 620px; height: 140px; right: -40px; top: -24px; }
  .s-portret::before, .s-ramka::before { inset: -14px -14px 14px 14px; border-radius: 30px; }
}
@media (min-width: 960px) {
  .s-portret { width: 100%; max-width: 430px; margin: 0 14px 64px 0; }
  .s-hero--jasne .s-hero__tekst { padding-bottom: 64px; }
  .s-hero .s-ramka { margin: 0 14px 64px 0; align-self: center; }
  .s-hero--jasne .s-hero__uklad { align-items: center; }
}

/* Runda 5: bez linii przerywanych (kojarza sie z kuponem), nizsze banery */
.ng-page p.s-znak::before { border: 0; border-radius: 6px; width: 22px; height: 22px; background-color: var(--ng-blue-100); background-size: 14px; }
.ng-page .s-hero:not(.s-hero--jasne) p.s-znak::before, .ng-page .s--ciemne p.s-znak::before, .ng-page .s--nieb p.s-znak::before { background-color: rgba(255, 255, 255, .12); }
.s-portret::before, .s-ramka::before { border: 1px solid rgba(22, 83, 199, .28); }
.s-hero .s-ramka::before { border: 1px solid rgba(156, 197, 255, .4); }
.s-ikona { border: 0; background: var(--ng-blue-100); }
.s-produkt::before { display: none; }
.s-hero--tekst .s-hero__uklad { padding-block: 24px 28px; }
.s-hero--tekst h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 8px; }
.s-hero--tekst p { font-size: 17px; }
.s-hero--tekst p.s-znak { margin-bottom: 8px; }
.s-hero--tekst::after { width: 240px; height: 240px; right: -60px; bottom: -90px; }
.s-pakiet__el { grid-template-columns: 96px minmax(0, 1fr); }
.s-pakiet__el img { width: 96px; height: 96px; border-radius: 12px; }
.s-narz__kod { font-size: 15px; font-weight: 600; color: var(--ng-fg); margin: 0 0 12px; }
.s .s-narz p.s-narz__kod { color: var(--ng-fg); }
@media (min-width: 720px) {
  .s-hero { border-radius: 0 0 32px 32px; }
  .s-hero--tekst .s-hero__uklad { padding-block: 32px 36px; }
  .s-hero--tekst::after { width: 300px; height: 300px; right: -60px; bottom: -130px; }
  .s-hero__uklad { padding-top: 40px; }
  .s-hero .s-ramka { max-width: 340px; justify-self: end; }
}
@media (min-width: 960px) {
  .s-hero__uklad { padding-top: 40px; }
  .s-hero__tekst { padding-bottom: 44px; }
  .s-hero .s-ramka { margin-bottom: 44px; }
  .s-hero--tekst .s-hero__tekst { padding-bottom: 0; }
  .s-hero--jasne .s-hero__uklad { padding-top: 48px; }
  .s-hero--jasne .s-ramka { max-width: none; }
  .narzedzia .s-siatka--tel2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Landingi: nizszy naglowek */
.landing .s-hero h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }
.landing .s-hero p { font-size: 17px; }
.landing .s-hero .s-cena--hero { font-size: 28px; margin-top: 12px; }
.landing .s-hero .s-akcje { margin-top: 14px; }
.landing .s-hero .s-ramka { width: min(230px, 62%); justify-self: center; margin: 8px 0 32px; }
@media (min-width: 960px) { .landing .s-hero .s-ramka { width: 300px; justify-self: end; margin: 0 14px 36px 0; } .landing .s-hero__uklad { padding-top: 32px; } .landing .s-hero__tekst { padding-bottom: 36px; } }

/* Runda 6: O mnie, Kontakt, makiety 4:3 */
.s-po--zwykly, .s p.s-po--zwykly { font-weight: 400; color: var(--ng-fg-muted); max-width: 760px; }
.s-liczby-rzad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ng-border-strong); }
.s-liczby-rzad .s-liczby__n { font-size: 24px; }
.s-misja { text-align: left; max-width: 900px; }
.s p.s-misja__tekst { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.22; font-weight: 700; letter-spacing: -.015em; color: #fff; margin: 0 0 14px; text-wrap: balance; }
.s-foto--scena { aspect-ratio: 1 / 1; object-position: 50% 62%; }
.s-bento { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-bento img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; aspect-ratio: 4 / 3; }
.s-bento img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; object-position: 50% 52%; }
.s-kontakt { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.s-kontakt h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 16px; }
.s-kontakt__formularz > p { margin-bottom: 16px; color: var(--ng-fg-muted); }
.s-kurs .s-produkt__foto { aspect-ratio: 4 / 3; height: 100%; object-position: center; }
.landing .s-hero .s-ramka { width: min(280px, 72%); }
@media (min-width: 960px) {
  .s-bento { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
  .s-bento img:first-child { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 460px; }
  .s-bento img { aspect-ratio: auto; }
  .s-kontakt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .s-kontakt__formularz { position: sticky; top: 96px; }
  .s-kurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .landing .s-hero .s-ramka { width: 360px; }
}

@media (min-width: 960px) {
  .s-bento { grid-template-rows: 225px 225px; }
  .s-bento img, .s-bento img:first-child { height: 100%; min-height: 0; aspect-ratio: auto; }
  .s-bento img:first-child { object-position: 50% 58%; }
}

/* Runda 7: pakiet bez tla, Produkty: kursy w dwoch niskich wierszach, ebooki mniejsze */
.s-pakiet__el img { background: transparent; border-radius: 0; object-fit: contain; }
.narzedzia .s-siatka--tel2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kursy .s-siatka { gap: 16px; }
.kursy .s-kurs .s-produkt__foto { aspect-ratio: 4 / 3; height: auto; }
@media (min-width: 720px) {
  .narzedzia .s-siatka--tel2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kursy .s-kurs { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .kursy .s-kurs .s-produkt__foto { height: 100%; aspect-ratio: auto; min-height: 225px; }
  .kursy .s-kurs__tresc { padding: 24px 28px; }
  .kursy .s-kurs h3 { font-size: 24px; }
  .kursy .s-produkt__foto { aspect-ratio: 16 / 10; }
}
@media (min-width: 960px) {
  .narzedzia .s-siatka--tel2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kursy .s-kurs { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .kursy .s-kurs__tresc .s-kurs__wiersz { display: flex; align-items: center; gap: 20px; }
}

/* Menu mobilne: krzyzyk po otwarciu, bez przeswitu, Panel klienta jako przycisk */
@media (max-width: 1100px) {
  .ng-page .ng-nav__links { top: 67px; padding-top: 12px; }
  .ng-page .ng-nav__links li a.is-active { border-radius: 8px; padding-inline: 12px; }
  .ng-nav.is-open .ng-nav__burger svg { display: none; }
  .ng-nav.is-open .ng-nav__burger::after { content: "\00d7"; font-size: 30px; line-height: 1; color: var(--ng-fg); }
  .ng-page .ng-nav__links li.tylko-tel { border-bottom: 0; margin-top: 14px; }
  .ng-page .ng-nav__links li.tylko-tel a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--ng-border-strong); border-radius: 8px; font-weight: 600; }
}

/* Oznaczenia bez sygnetu: w malym rozmiarze wyglada jak ikona odswiezania; sygnet zostaje w logo i w tle */
.ng-page p.s-znak::before, .ng-page .s-hero:not(.s-hero--jasne) p.s-znak::before, .ng-page .s--ciemne p.s-znak::before, .ng-page .s--nieb p.s-znak::before { display: none; }

/* ===== Ksiega znaku (Marketing/Rebranding): tylko kolory z palety, konturowy sygnet jako jedyny motyw graficzny ===== */
.ng-page {
  --ng-black-primary: #121417; --ng-fg: #121417; --ng-fg-muted: #2A3F5B; --ng-bg-muted: #E6EAEF; --ng-blue-100: #E6EAEF;
  --s-granat: #2A3F5B; --s-nieb: #1653C7; --s-jasny: #60ABFB;
  background: #F5F5F5;
}

/* Powierzchnie */
.s-liczby { background: #F5F5F5; }
.s-hero--jasne { background: #F5F5F5; }
.s--nieb { background: #1653C7; }
.footer.stopka, .s--ciemne, .s-hero:not(.s-hero--jasne) { background: var(--s-granat); }
.ng-page .ng-sticky { background: var(--s-granat); }
.s-portret__tlo { background: #E6EAEF; }
#materialy, #pakiet { background: #E6EAEF; }
.s--szare { background: #E6EAEF; }
.s-produkt__foto { background: #1653C7; }
.s--ciemne .ytpas__t, .s--ciemne p { color: #F5F5F5; }
.ng-page .s-hero:not(.s-hero--jasne) p, .ng-page .s--ciemne .s-lead, .ng-page .s--nieb p { color: #F5F5F5; }
.ng-page .s-hero:not(.s-hero--jasne) p.s-znak, .ng-page .s--ciemne p.s-znak, .ng-page .s--nieb p.s-znak { color: #E6EAEF; }
.s--ciemne .s-em, .s-hero:not(.s-hero--jasne) .s-em { color: #60ABFB; }
.s--nieb .s-em { color: #E6EAEF; }

/* Konturowy sygnet zamiast wypelnionego znaku wodnego i logo w tle */
.s-hero::after, .s--ciemne::after, .s--nieb::after { background-image: url("img/sygnet-linia.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; opacity: .75; }
.s-hero::after { right: -70px; bottom: -150px; top: auto; width: 360px; height: 420px; }
.s-hero--tekst::after { right: -50px; bottom: -170px; top: auto; width: 320px; height: 380px; }
.s-hero--jasne::after { background-image: url("img/sygnet-linia.svg"); opacity: .55; right: -120px; top: -60px; bottom: auto; width: 620px; height: 720px; }
.s--ciemne::after { right: -80px; bottom: -130px; top: auto; width: 340px; height: 400px; }
.s--nieb::after { background-image: url("img/sygnet-linia-jasna.svg"); opacity: .5; right: -70px; top: auto; bottom: -140px; width: 320px; height: 380px; }
@media (min-width: 720px) {
  .s-hero::after { width: 520px; height: 610px; right: -60px; bottom: -280px; }
  .s-hero--tekst::after { width: 520px; height: 610px; right: 4%; bottom: -350px; }
  .s-hero--jasne::after { width: 860px; height: 1000px; right: -120px; top: -180px; bottom: auto; }
  .s--ciemne::after { width: 520px; height: 610px; bottom: -260px; right: -60px; }
  .s--nieb::after { width: 520px; height: 610px; right: 4%; top: auto; bottom: -300px; }
}

/* ===== Runda 9: paski z banera, ikony pakietu, opinie, lista wpisow ===== */
/* Sygnet tylko w banerze i pasie CTA, nie na ciemnych pasach z filmami i misja */
.s--ciemne::after { display: none; }

/* Pakiet: plaskie ikony marki */
.s-pakiet__el { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
.s-pakiet__ikona { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: #1653C7; color: #F5F5F5; }

/* Karty w sekcji szarej */
.s-karta--wiecej { background: #E6EAEF; }

/* Narzedzia: 15 pozycji w rownych rzedach */
@media (min-width: 960px) { .narzedzia .s-siatka--tel2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* O mnie: prywatnie i profile */
.s-prywatnie .s-foto { aspect-ratio: 1 / 1; object-position: center top; }
.s-profile--piec { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.s-profile--piec .btn:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .s-profile--piec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Przypis pod siatka narzedzi */
.ng-page .s p.s-przypis { margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--ng-fg-muted); }

/* Profile z ikonami */
.s-profile--piec .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Pas ciemny i niebieski jako ostatnia sekcja: odstep od stopki w tym samym kolorze */
.ng-page .s--ciemne:last-child, .ng-page .s--nieb:last-child { margin-bottom: clamp(32px, 5vw, 56px); }

/* Pasek zakupu chowa sie przy stopce, stopka bez dodatkowego miejsca */
.ng-page.has-sticky .footer.stopka { padding-bottom: 28px; }

/* Opinie */
.s-opinie-grupa { margin-top: 44px; }
.s-opinie-grupa[hidden] { display: none; }
.s-opinie-grupa h2 { margin-bottom: 6px; }
.s-opinie-grupa > p { color: var(--ng-fg-muted); margin-bottom: 20px; }
.s-kolumny { column-gap: 16px; }
.s-kolumny .s-opinia { break-inside: avoid; margin: 0 0 16px; display: block; }
.s-opinia figcaption { margin-top: 12px; }
.s-wideo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.s-wideo iframe, .s-wideo a { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #2A3F5B; }
@media (min-width: 720px) { .s-kolumny { column-count: 2; } .s-wideo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .s-kolumny { column-count: 3; } }

/* Lista wpisow: kategorie jako linki, stronicowanie */
.ng-page a.s-chip { display: inline-flex; align-items: center; text-decoration: none; }
.s-foto--pusta { display: block; background: #E6EAEF; }
.s-stronicowanie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.s-stronicowanie .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ng-border-strong); background: #fff; color: var(--ng-fg); font-size: 15px; font-weight: 600; text-decoration: none; }
.s-stronicowanie .page-numbers.current { background: #1653C7; border-color: #1653C7; color: #fff; }
.s-stronicowanie .page-numbers.dots { border: 0; background: transparent; }

/* Strony proste: polityka, regulamin */
.s-tresc { max-width: 760px; font-size: 17px; line-height: 1.65; color: var(--ng-fg); overflow-wrap: anywhere; }
.s-tresc h2 { font-size: clamp(22px, 3vw, 28px); margin: 32px 0 10px; }
.s-tresc h3 { font-size: 19px; margin: 24px 0 8px; }
.s-tresc p, .s-tresc li { font-size: 17px; }
.s-tresc a { color: #1653C7; text-decoration: underline; }
.s-tresc ul, .s-tresc ol { padding-left: 22px; }
.s-tresc table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.s-tresc td, .s-tresc th { border: 1px solid var(--ng-border-strong); padding: 8px; font-size: 15px; }

/* ===== Pojedynczy wpis: tresc Kadence (okruszki, H1, data) w stylu strony ===== */
body.gos-wpis { background: #F5F5F5; font-family: var(--ng-font-sans, Onest, sans-serif); color: #121417; }
body.gos-wpis h1, body.gos-wpis h2, body.gos-wpis h3, body.gos-wpis h4 { font-family: var(--ng-font-sans, Onest, sans-serif); color: #121417; letter-spacing: -.015em; }
body.gos-wpis .ng-page { background: transparent; }
body.gos-wpis .site-container { box-sizing: border-box; max-width: calc(1152px + 40px); padding-inline: 20px; }
body.gos-wpis .entry-hero { background: #2A3F5B; border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
body.gos-wpis .entry-hero::after { content: ""; position: absolute; right: -50px; bottom: -170px; width: 320px; height: 380px; background: url("img/sygnet-linia.svg") center / contain no-repeat; opacity: .75; pointer-events: none; }
body.gos-wpis .entry-hero .hero-section-overlay { display: none; }
body.gos-wpis .entry-hero-container-inner { background: transparent; }
body.gos-wpis .entry-hero .hero-container { position: relative; z-index: 1; padding-block: 24px 28px; min-height: 0; }
body.gos-wpis .entry-hero .entry-header { min-height: 0; padding: 0; align-items: flex-start; text-align: left; }
body.gos-wpis .entry-hero h1.entry-title { color: #fff; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; font-weight: 700; margin: 8px 0 10px; text-wrap: balance; max-width: 900px; }
body.gos-wpis .kadence-breadcrumbs { font-family: var(--ng-font-mono, monospace); font-size: 15px; margin: 0 0 4px; color: #E6EAEF; }
body.gos-wpis .kadence-breadcrumbs a, body.gos-wpis .kadence-breadcrumbs a span { color: #E6EAEF; text-decoration: none; }
body.gos-wpis .kadence-breadcrumbs a:hover span { text-decoration: underline; }
body.gos-wpis .entry-hero .entry-meta, body.gos-wpis .entry-hero .entry-meta * { color: #E6EAEF; font-size: 15px; }
body.gos-wpis .entry-hero .entry-taxonomies a { color: #60ABFB; font-size: 15px; font-weight: 600; text-decoration: none; }
body.gos-wpis .content-container { padding-top: 32px; }
body.gos-wpis .content-area { margin-top: 0; margin-bottom: 40px; }
body.gos-wpis .entry.content-bg { background: transparent; box-shadow: none; border-radius: 0; }
body.gos-wpis .single-entry .entry-content-wrap { padding: 0; }
body.gos-wpis .entry-content { font-size: 18px; line-height: 1.7; color: #121417; overflow-wrap: break-word; }
body.gos-wpis .entry-content h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.18; margin: 40px 0 14px; }
body.gos-wpis .entry-content h3 { font-size: clamp(21px, 2.4vw, 25px); line-height: 1.25; margin: 30px 0 10px; }
body.gos-wpis .entry-content a { color: #1653C7; text-decoration: underline; }
body.gos-wpis .entry-content img { border-radius: 12px; height: auto; }
body.gos-wpis .entry-content blockquote { border-left: 3px solid #1653C7; background: #fff; margin: 24px 0; padding: 16px 20px; border-radius: 0 12px 12px 0; }
body.gos-wpis .entry-content table { display: block; overflow-x: auto; max-width: 100%; }
body.gos-wpis .entry-content .wp-block-button__link { background: #1653C7; color: #fff; border-radius: 8px; text-decoration: none; }
body.gos-wpis .article-post-thumbnail { margin: 0 0 28px !important; max-width: 100%; }
body.gos-wpis .post-thumbnail img { border-radius: 12px; }
body.gos-wpis .post-navigation { font-size: 16px; }
body.gos-wpis .post-navigation a { color: #1653C7; }
body.gos-wpis #secondary .sidebar-inner-wrap { background: #fff; border-radius: 12px; padding: 20px; font-size: 16px; }
body.gos-wpis #secondary a { color: #1653C7; }
body.gos-wpis #secondary img { border-radius: 12px; max-width: 100%; height: auto; }
body.gos-wpis .entry-related { background: #E6EAEF; margin-top: 40px; padding-block: 40px; }
body.gos-wpis .entry-related .entry-related-title { font-size: 28px; color: #121417; }
body.gos-wpis .entry-related .loop-entry { background: #fff; border-radius: 12px; box-shadow: none; overflow: hidden; }
body.gos-wpis .entry-related .loop-entry .entry-title { font-size: 18px; line-height: 1.28; }
body.gos-wpis .entry-related .loop-entry .entry-title a { color: #121417; text-decoration: none; }
body.gos-wpis .entry-related .post-thumbnail img { border-radius: 0; }
body.gos-wpis #mobile-drawer, body.gos-wpis .mobile-toggle-open-container { display: none; }
@media (min-width: 720px) {
  body.gos-wpis .site-container { max-width: calc(1152px + 64px); padding-inline: 32px; }
  body.gos-wpis .entry-hero { border-radius: 0 0 32px 32px; }
  body.gos-wpis .entry-hero::after { width: 520px; height: 610px; right: 4%; bottom: -350px; }
  body.gos-wpis .entry-hero .hero-container { padding-block: 32px 36px; }
  body.gos-wpis .content-container { padding-top: 48px; }
}
.s-wideo a.s-wideo__el { position: relative; overflow: hidden; }
.s-wideo a.s-wideo__el img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-wideo a.s-wideo__el::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 12px; background: #1653C7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 32px no-repeat; }
.s-wideo a.s-wideo__link { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
body.gos-wpis .entry-meta, body.gos-wpis .entry-meta *, body.gos-wpis .entry-taxonomies, body.gos-wpis .entry-taxonomies *, body.gos-wpis .post-navigation small, body.gos-wpis small { font-size: 15px; }

/* Wyszukiwanie wpisow */
.s-szukaj { margin-bottom: 20px; }
.s-szukaj label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.s-szukaj div { display: flex; gap: 8px; max-width: 560px; }
.s-szukaj input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; font: inherit; font-size: 16px; border: 1px solid var(--ng-border-strong); border-radius: 8px; background: #fff; color: var(--ng-fg); }
.s-szukaj .btn { flex: 0 0 auto; }
.s-karta--link { display: block; text-decoration: none; color: inherit; }
body.gos-wpis #secondary, body.gos-wpis #secondary p, body.gos-wpis #secondary a, body.gos-wpis #secondary li { font-size: 16px; }
body.gos-wpis .entry-author, body.gos-wpis .entry-author p, body.gos-wpis .entry-author a { font-size: 16px; }
.s-szukaj input:focus { outline: 2px solid #1653C7; outline-offset: 1px; }
body.gos-wpis .ng-autor-tekst p, body.gos-wpis .ng-autor-tekst a, body.gos-wpis .tags-links a { font-size: 15px; }

/* Banery podstron: opis w jednej linii na komputerze, ta sama wysokosc */
@media (min-width: 1100px) {
  .s-hero--tekst .s-hero__tekst { max-width: none; }
  .s-hero--tekst .s-hero__uklad { display: block; }
  .ng-page .s-hero--tekst p:not(.s-znak) { max-width: 900px; }
  .s-hero--tekst .s-w { min-height: 176px; display: flex; flex-direction: column; justify-content: center; }
  .s-hero--tekst h1 { max-width: none; }
}

/* ===== Menu mobilne: pelny ekran pod naglowkiem, strona pod spodem zablokowana ===== */
/* clip zamiast hidden: body nie staje sie osobnym przewijaniem, wiec naglowek sie przykleja */
html, body { overflow-x: clip; overflow-y: visible; }
.gos-gora { position: sticky; top: 0; z-index: 60; }
@media (max-width: 1100px) {
  html.gos-menu-otwarte { overflow: hidden; }
  html.gos-menu-otwarte body { touch-action: none; }
  html.gos-menu-otwarte .ng-nav__links { touch-action: pan-y; }
  .ng-page .ng-nav { position: sticky; top: 0; z-index: 60; min-height: 67px; background: #F5F5F5; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
  .gos-gora .ng-nav { position: relative; }
  .ng-page .ng-nav .ng-nav__links {
    position: fixed; top: 67px; left: 0; right: 0; bottom: 0; height: auto; max-height: none;
    z-index: 59; margin: 0; list-style: none;
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px max(20px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px));
    background: #F5F5F5; border-top: 1px solid #E6EAEF; box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain; transform: none; transition: none;
  }
  .ng-page .ng-nav:not(.is-open) .ng-nav__links { display: none; }
  .ng-page .ng-nav__links li { border: 0; }
  .ng-page .ng-nav__links li a { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 14px; border-radius: 8px; font-size: 19px; font-weight: 600; color: #121417; background: transparent; text-decoration: none; }
  .ng-page .ng-nav__links li a:hover { background: #E6EAEF; }
  .ng-page .ng-nav__links li a.is-active { background: #E6EAEF; color: #1653C7; padding-inline: 14px; }
  .ng-page .ng-nav__links li.tylko-tel { margin-top: auto; padding-top: 16px; }
  .ng-page .ng-nav__links li.tylko-tel a { justify-content: center; border: 1px solid #1653C7; background: #fff; color: #1653C7; font-size: 17px; }
  .ng-nav__burger { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

.ng-page .s p.s-wiecej { margin: 28px 0 0; text-align: center; }
body.gos-wpis .ng-autor-tekst, body.gos-wpis .ng-autor-tekst * { font-size: 15px; }
body.gos-wpis .ng-autor-tytul { font-size: 22px; }
.s-hero--tekst .s-w { align-items: stretch; }
.s-hero--tekst .s-hero__tekst { width: 100%; margin-inline: 0; text-align: left; }
.ng-page .s p.s-wiecej { display: flex; justify-content: center; }

/* Telefon: sygnet w banerach mniejszy i slabszy, nie wchodzi pod tekst */
@media (max-width: 719px) {
  .s-hero::after, .s-hero--tekst::after { width: 130px; height: 154px; right: -26px; bottom: -46px; top: auto; opacity: .35; }
  .s-hero--jasne::after { width: 190px; height: 225px; right: -50px; top: 4px; bottom: auto; opacity: .35; }
  .s--nieb::after, .s--ciemne::after { width: 150px; height: 178px; right: -30px; bottom: -50px; opacity: .3; }
  body.gos-wpis .entry-hero::after { width: 130px; height: 154px; right: -26px; bottom: -46px; opacity: .35; }
}

/* Jednolity niebieski marki: banery, ciemne pasy i stopka (listopad 2026) */
:root, .ng-page { --s-granat: #1653C7; }
.footer.stopka, .s--ciemne, .s-hero:not(.s-hero--jasne) { background: #1653C7; }
.ng-page .s-hero:not(.s-hero--jasne)::after, .ng-page .s--ciemne::after { background-image: url("img/sygnet-linia-jasna.svg"); }
.ng-page .s--ciemne .s-em, .ng-page .s-hero:not(.s-hero--jasne) .s-em { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ng-page .s--ciemne p.s-znak, .ng-page .s-hero:not(.s-hero--jasne) p.s-znak { color: #F5F5F5; }
body.gos-wpis .entry-hero { background: #1653C7; }
body.gos-wpis .entry-hero::after { background-image: url("img/sygnet-linia-jasna.svg"); }
body.gos-wpis .kadence-breadcrumbs, body.gos-wpis .kadence-breadcrumbs a, body.gos-wpis .kadence-breadcrumbs a span, body.gos-wpis .entry-hero .entry-meta, body.gos-wpis .entry-hero .entry-meta * { color: #F5F5F5; }
.s-wideo iframe, .s-wideo a { background: #1653C7; }

/* Kontakt: prostszy formularz, etykieta tylko przy temacie (etykiety pozostale dla czytnikow ekranu) */
.s-kontakt--prosty .ngf-siatka { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-kontakt--prosty .ngf-pole { grid-column: 1 / -1; margin: 0; min-width: 0; }
.s-kontakt--prosty .ngf-pole-text { grid-column: auto; }
.s-kontakt--prosty .ngf-pole-text > .ngf-etykieta, .s-kontakt--prosty .ngf-pole-email > .ngf-etykieta, .s-kontakt--prosty .ngf-pole-textarea > .ngf-etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.ng-page .s-kontakt--prosty .s-kontakt__info { margin: 14px 0 0; font-size: 15px; color: var(--ng-fg-muted); }