/* Odmiana Geo — ta sama, którą ma znak #nauka4future na grafikach.
     Najpierw local(): jeśli krój jest zainstalowany na komputerze odwiedzającego
     (albo redaktora przy podglądzie), przeglądarka bierze go z systemu i nie
     pobiera pliku; dopiero potem sięga po .woff z serwera. Fieldwork nie ma
     odmiany 500 — dla niej używamy Regular, tak jak zrobiłaby to przeglądarka. */
  
  
  
  
  


  #n4f3 {
    /* Paleta Politechniki Krakowskiej.
       Kolor podstawowy znaku PK: PANTONE 288 / RGB 0-53-113 / #003571.
       Reszta to jego rozjaśnienia i przyciemnienia — bez kolorów spoza identyfikacji.
       Jedyny wyjątek: czerwień przy akcjach usuwania, wpisana wprost
       w regule .n3-btn--danger. */
    --pk:#003571;
    --bg:#00102A;
    --ink:#EAF2FB;
    --soft:#A6C3DF;
    --dim:#7A9BBC;
    --sky:#4EA8E8;
    --pk-mid:#0B4C8F;
    --sky-lt:#86D0FF;
    --ice:#C6E4FA;
    --yellow:#F2B233;      /* akcent z grafiki promocyjnej 3. edycji */
    --fl:#56B7E0;          /* blekit FutureLabu — z belki na futurelab.pk.edu.pl */
    --pk-dk:#001A3C;       /* ciemny granat — belka narzędziowa na samej górze */

    /* Jeden krój na całą stronę: Fieldwork. Dalej w arkuszu nie ma już
       żadnej nazwy kroju — wszystko idzie przez te dwie zmienne, więc
       zmiana pisma to zmiana dwóch linijek. */
    --font-head:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
    --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
    --nav-h:78px;          /* wysokosc bialego paska nawigacji */
    --line:rgba(255,255,255,.10);
    --line-strong:rgba(255,255,255,.18);
    --card:rgba(255,255,255,.045);
    --card-hi:rgba(255,255,255,.075);
    --r:20px;
    --r-lg:28px;
    --max:1180px;

    /* Skala typograficzna — proporcja ok. 1,25, plynna miedzy 380 a 1280 px.
       Jeden zestaw stopni dla calej strony: naglowki, tresc, etykiety.
       Odbiorca to nauczyciele i maturzysci — tresc czytana z telefonu w klasie,
       wiec podstawa jest wieksza niz typowe 16 px, a miara wiersza krotsza. */
    /* dolna granica to 12 px — poniżej tego napisy na telefonie robią się
       nieczytelne, a przeglądarki mobilne zaczynają je same powiększać */
    --fs-xxs:clamp(.75rem,.70rem + .21vw,.78rem);
    --fs-xs: clamp(.77rem,.74rem + .13vw,.84rem);
    --fs-sm: clamp(.87rem,.84rem + .17vw,.96rem);
    --fs-md: clamp(1rem,.965rem + .2vw,1.1rem);
    --fs-lg: clamp(1.1rem,1.03rem + .33vw,1.3rem);
    --fs-xl: clamp(1.28rem,1.14rem + .6vw,1.66rem);
    --fs-2xl:clamp(1.7rem,1.36rem + 1.5vw,2.5rem);
    --fs-3xl:clamp(2.05rem,1.45rem + 2.7vw,3.4rem);
    --fs-hero:clamp(2.45rem,1.25rem + 5.7vw,5.4rem);
    --lh-tight:1.06;
    --lh-head:1.18;
    --lh-body:1.65;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    font-size:var(--fs-md);
    line-height:var(--lh-body);
    font-feature-settings:"kern" 1,"liga" 1;
    text-rendering:optimizeLegibility;
    position:relative;
    isolation:isolate;
    overflow-x:clip;    /* clip, nie hidden — inaczej position:sticky w nawigacji przestaje dzialac */
    -webkit-font-smoothing:antialiased;
  }
  #n4f3 *, #n4f3 *::before, #n4f3 *::after { box-sizing:border-box; }
  /* kotwice zatrzymuja sie pod przyklejona nawigacja, a nie pod nia */
  #n4f3 [id] { scroll-margin-top:96px; }
  /* jedyna regula wychodzaca poza #n4f3 — plynne przewijanie po klikniecu w menu */

  /* ============================================================
     PODWYŻSZONY KONTRAST
     Gdy ktoś włączy w systemie tryb większego kontrastu, wzmacniamy
     obramowania i rozjaśniamy tekst pomocniczy — dekoracje z niskim
     kontrastem przestają wtedy przeszkadzać w czytaniu.
     ============================================================ */
  @media (prefers-contrast: more) {
    #n4f3 {
      --soft:#DCE9F7; --dim:#B9CFE6;
      --line:rgba(255,255,255,.34); --line-strong:rgba(255,255,255,.55);
    }
    #n4f3::after { opacity:.06; }
    #n4f3 .n3-net, #n4f3 .n3-stars { opacity:.35; }
    #n4f3 .n3-eyebrow, #n4f3 .n3-hero-meta span, #n4f3 .n3-tab,
    #n4f3 .n3-track, #n4f3 .n3-note, #n4f3 .n3-bilans, #n4f3 .n3-cta,
    #n4f3 .n3-trackdetail, #n4f3 .n3-fb-card { border-width:2px; }
    #n4f3 a.n3-mlink.is-active::after { height:3px; }
  }

  /* ============================================================
     DRUK — nauczyciel drukuje harmonogram dla klasy.
     Ciemne tło i dekoracje znikają, zostaje czytelna lista wydarzeń.
     ============================================================ */
  @media print {
    #n4f3::before, #n4f3::after { display:none !important; }
    #n4f3 { background:#fff !important; color:#111 !important; }
    #n4f3 .n3-topbar, #n4f3 .n3-nav, #n4f3 .n3-mountain, #n4f3 .n3-peaks, #n4f3 .n3-scrollhint, #n4f3 .n3-spot, #n4f3 .n3-hero-cta, #n4f3 .n3-formbox, #n4f3 .n3-deadline, #n4f3 .n3-fb, #n4f3 .n3-tabs, #n4f3 .n3-closed-art, #n4f3 .n3-footer, #n4f3 .n3-social { display:none !important; }
    #n4f3 .n3-hero { min-height:0 !important; padding:0 0 20px !important; }
    #n4f3 .n3-sec { padding:0 0 16px !important; }
    #n4f3 .n3-sec + .n3-sec::before { display:none !important; }
    #n4f3 h1, #n4f3 h2, #n4f3 h3, #n4f3 h4, #n4f3 h5, #n4f3 b, #n4f3 strong { color:#000 !important; }
    #n4f3 p, #n4f3 span, #n4f3 li, #n4f3 small, #n4f3 i { color:#222 !important; }
    #n4f3 .n3-hero h1 { font-size:32pt !important; }
    #n4f3 .n3-hero h1 .n3-grad { -webkit-text-fill-color:#000; color:#000 !important; background:none !important; }
    #n4f3 .n3-eyebrow, #n4f3 .n3-hero-meta span {
      background:none !important; border-color:#bbb !important; color:#333 !important;
    }
    #n4f3 .n3-note, #n4f3 .n3-bilans, #n4f3 .n3-cta {
      background:#fff !important; border-color:#bbb !important; box-shadow:none !important;
    }
    #n4f3 .n3-tl li { page-break-inside:avoid; break-inside:avoid; }
    #n4f3 .n3-funding { background:#fff !important; }
    #n4f3 a { color:#000 !important; text-decoration:underline; }
  }

  
  #n4f3 img { max-width:100%; display:block; }
  #n4f3 button { font:inherit; color:inherit; cursor:pointer; }
  #n4f3 input, #n4f3 textarea, #n4f3 select { font:inherit; }
  #n4f3 h1, #n4f3 h2, #n4f3 h3, #n4f3 h4, #n4f3 h5 {
    font-family:var(--font-head);
    margin:0; font-weight:600;
    line-height:var(--lh-tight); letter-spacing:-.028em;
    text-wrap:balance;   /* naglowki lamia sie na rowne wiersze, nie na sierotki */
  }
  #n4f3 h3, #n4f3 h4, #n4f3 h5 { line-height:var(--lh-head); letter-spacing:-.014em; }
  /* UWAGA: ta reguła ma identyfikator, więc bije zwykłe klasy. Każdy
     akapit, któremu gdzieś niżej ustawiamy margines (zwłaszcza „auto"
     do wyśrodkowania), musi mieć w selektorze również #n4f3 — inaczej
     margines nie zadziała i tekst przyklei się do lewej krawędzi. */
  #n4f3 p { margin:0; text-wrap:pretty; }
  /* cyfry o stalej szerokosci — godziny, daty i liczniki nie skacza */
  #n4f3 ::selection { background:var(--yellow); color:#00102A; }
  #n4f3 strong, #n4f3 b { font-weight:600; }
  #n4f3 a { color:var(--sky); text-decoration:none; }
  #n4f3 a:hover { text-decoration:underline; }
  #n4f3 a.n3-btn:hover { text-decoration:none; }
  #n4f3 :focus-visible { outline:2px solid var(--sky); outline-offset:3px; border-radius:6px; }
  /* tekst tylko dla czytników ekranu (zapowiedź nowego okna, separatory w h1) */
  #n4f3 .n3-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  /* Odnośnik widoczny dopiero po naciśnięciu Tab — nie zajmuje miejsca w układzie,
     ale jest pierwszym elementem, na który trafia klawiatura. */
  #n4f3 a.n3-skip {
    position:absolute; left:12px; top:-100px; z-index:200;
    padding:12px 20px; border-radius:0 0 12px 12px;
    background:var(--yellow); color:#00102A;
    font-family:var(--font-head); font-weight:600; font-size:var(--fs-sm);
    transition:top .2s ease;
  }
  #n4f3 a.n3-skip:focus { top:0; text-decoration:none; }
  #n4f3 #n3-tresc:focus { outline:none; }

  /* ---------- warstwa tła całej strony ---------- */
  #n4f3::before {
    content:""; position:absolute; inset:0; z-index:-3;
    background:var(--bg);
  }
  /* plaster miodu — ten sam motyw co na grafice promocyjnej 3. edycji */
  #n4f3::after {
    content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background-image:linear-gradient(30deg,rgba(78,168,232,.09) 12%,transparent 12.5%,transparent 87%,rgba(78,168,232,.09) 87.5%);
    background-size:56px 100px;
    opacity:.17;
    mask-image:radial-gradient(74% 62% at 50% 24%, #000 0%, transparent 88%);
    -webkit-mask-image:radial-gradient(74% 62% at 50% 24%, #000 0%, transparent 88%);
    animation:n3hexdrift 48s linear infinite;
  }
  @keyframes n3hexdrift { from { background-position:0 0 } to { background-position:56px 100px } }

  #n4f3 .n3-wrap { width:min(100% - 40px, var(--max)); margin-inline:auto; }
  #n4f3 .n3-sec { padding:clamp(64px,9vw,120px) 0; position:relative; }
  #n4f3 .n3-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--sky-lt);
    padding:8px 16px; border:1px solid var(--line-strong); border-radius:100px;
    background:rgba(78,168,232,.07);
  }
  #n4f3 .n3-eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--yellow); flex:0 0 auto; }
  /* na wąskim ekranie pełna nazwa uczelni łamie pigułkę na dwie linie */
  @media (max-width:560px) {
  }
  #n4f3 .n3-h2 { font-size:var(--fs-3xl); margin:22px 0 16px; max-width:20ch; }
  #n4f3 .n3-lead { color:var(--soft); font-size:var(--fs-lg); line-height:1.6; max-width:58ch; }
  /* notka pod leadem: bez limitu wiersz miał 130+ znaków na szerokim ekranie */
  #n4f3 .n3-note { max-width:72ch; }
  #n4f3 .n3-grad { color:var(--yellow); }

  #n4f3 .n3-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:15px 28px; border-radius:100px; border:0;
    font-family:var(--font-head); font-weight:600;
    font-size:clamp(.92rem,.89rem + .12vw,1.02rem); letter-spacing:.005em;
    background:var(--yellow); color:#00102A;
    box-shadow:0 10px 26px rgba(242,178,51,.22);
    transition:background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
  }
  #n4f3 .n3-btn:hover { background:#FFC64F; transform:translateY(-2px); box-shadow:0 16px 34px rgba(242,178,51,.28); text-decoration:none; }
  #n4f3 .n3-btn--ghost {
    background:transparent; color:var(--ink); border:1px solid var(--line-strong);
  }
  #n4f3 .n3-btn--ghost { box-shadow:none; }
  #n4f3 .n3-btn--ghost:hover { background:var(--card-hi); border-color:var(--yellow); box-shadow:none; }
  #n4f3 .n3-btn--sm { padding:10px 18px; font-size:var(--fs-xs); }

  /* ============================================================
     OBUDOWA — GÓRA (jak na futurelab.pk.edu.pl)
     Belka narzędziowa jest w jednolitym ciemnym granacie — bez błękitnego
     klina, który ma oryginał. Pod nią biały pasek nawigacji z sygnetem PK
     i logotypem FutureLabu, jak na stronie jednostki.
     JEŚLI wklejasz stronę na futurelab.pk.edu.pl i motyw rysuje własny
     nagłówek — usuń z HTML-a bloki <div class="n3-topbar"> i <div class="n3-nav">.
     ============================================================ */
  #n4f3 .n3-topbar {
    position:relative; z-index:60; overflow:hidden; color:#fff;
    /* ciemny granat — bez błękitnego klina z futurelab.pk.edu.pl */
    background:var(--pk-dk);
  }
  /* delikatny przebłysk przechodzący przez klin — raz na kilka sekund */
  #n4f3 .n3-topbar::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%);
    transform:translateX(-120%); animation:n3sheen 11s ease-in-out infinite;
  }
  @keyframes n3sheen { 0%,74%{transform:translateX(-120%)} 100%{transform:translateX(140%)} }

  #n4f3 .n3-topbar-in { position:relative; z-index:2; display:flex; align-items:center; gap:clamp(10px,2vw,20px); min-height:54px; padding:7px 0; }
  #n4f3 .n3-topbar-in .n3-spacer { flex:1 1 auto; }
  #n4f3 .n3-social { display:flex; align-items:center; gap:9px; }
  #n4f3 a.n3-ico {
    width:30px; height:30px; border-radius:50%; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; border:1px solid rgba(255,255,255,.30);
    transition:transform .28s cubic-bezier(.22,.61,.36,1), background .24s ease, border-color .24s ease, color .24s ease;
  }
  #n4f3 a.n3-ico:hover { background:#fff; color:var(--pk); border-color:#fff; transform:translateY(-2px) scale(1.07); text-decoration:none; }
  #n4f3 .n3-ico svg { width:15px; height:15px; fill:currentColor; display:block; }

  #n4f3 a.n3-tlink {
    position:relative; color:#fff; padding:6px 2px;
    font-family:var(--font-head); font-size:.75rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
  }
  #n4f3 a.n3-tlink:hover { text-decoration:none; }
  #n4f3 a.n3-tlink::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--yellow);
    transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.22,.61,.36,1);
  }
  #n4f3 a.n3-tlink:hover::after, #n4f3 a.n3-tlink:focus-visible::after { transform:scaleX(1); }
  #n4f3 .n3-lang {
    display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.86);
    font-family:var(--font-head); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  }
  #n4f3 .n3-lang svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }

  /* ---------- biały pasek nawigacji ---------- */
  #n4f3 .n3-nav {
    position:sticky; top:0; z-index:55; background:#fff;
    border-bottom:1px solid #E2E9F1; transition:box-shadow .35s ease;
  }
  #n4f3 .n3-nav.is-stuck { box-shadow:0 12px 34px rgba(0,32,72,.16); }
  #n4f3 .n3-nav-in {
    display:flex; align-items:center; gap:clamp(12px,2.4vw,34px);
    height:var(--nav-h); transition:height .35s cubic-bezier(.22,.61,.36,1);
  }
  #n4f3 .n3-nav.is-stuck .n3-nav-in { height:62px; }
  #n4f3 a.n3-lock { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
  #n4f3 a.n3-lock:hover { text-decoration:none; opacity:1; }
  #n4f3 .n3-lock img { display:block; width:auto; transition:height .35s cubic-bezier(.22,.61,.36,1); }
  #n4f3 .n3-lock-sygnet { height:46px; }
  #n4f3 .n3-lock-mark { height:44px; }
  #n4f3 .n3-nav.is-stuck .n3-lock-sygnet { height:36px; }
  #n4f3 .n3-nav.is-stuck .n3-lock-mark { height:34px; }

  #n4f3 .n3-menu { margin-left:auto; display:flex; align-items:center; gap:clamp(10px,1.7vw,24px); }
  #n4f3 a.n3-mlink {
    position:relative; color:#0A1F3C; padding:9px 2px; white-space:nowrap;
    font-family:var(--font-head); font-size:.79rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    transition:color .22s ease;
  }
  #n4f3 a.n3-mlink:hover { color:var(--pk); text-decoration:none; }
  #n4f3 a.n3-mlink.is-active { color:var(--pk); }
  #n4f3 a.n3-mlink::after {
    content:""; position:absolute; left:0; bottom:2px; width:100%; height:2px;
    background:linear-gradient(90deg,var(--fl),var(--yellow));
    transform:scaleX(0); transform-origin:left; transition:transform .34s cubic-bezier(.22,.61,.36,1);
  }
  #n4f3 a.n3-mlink:hover::after, #n4f3 a.n3-mlink:focus-visible::after, #n4f3 a.n3-mlink.is-active::after { transform:scaleX(1); }

  @keyframes n3blip { 0%,100%{opacity:.35; transform:scale(.7)} 50%{opacity:1; transform:scale(1)} }

  /* pasek postępu czytania — cienka linia na dolnej krawędzi nawigacji */
  #n4f3 .n3-prog { position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; pointer-events:none; }
  #n4f3 .n3-prog i { display:block; height:100%; width:100%; transform:scaleX(var(--p,0)); transform-origin:left;
    background:linear-gradient(90deg,var(--fl),var(--sky),var(--yellow)); }

  /* ---------- nawigacja na waskich ekranach ----------
     Bez przycisku menu: odnosniki zostaja widoczne, a na malym ekranie
     przechodza pod logotyp i przewijaja sie w poziomie. */
  @media (max-width:1080px) {
    #n4f3 .n3-nav-in { height:auto; padding:12px 0; }
    #n4f3 .n3-nav.is-stuck .n3-nav-in { height:auto; padding:9px 0; }
    #n4f3 .n3-menu { gap:clamp(12px,2.2vw,20px); }
    #n4f3 a.n3-mlink { font-size:.74rem; letter-spacing:.07em; }
  }
  @media (max-width:860px) {
    /* logotyp w pierwszym rzędzie, odnośniki w drugim */
    #n4f3 .n3-nav-in { flex-direction:column; align-items:stretch; gap:10px; height:auto; padding:12px 0; }
    #n4f3 .n3-nav.is-stuck .n3-nav-in { height:auto; padding:9px 0; }
    #n4f3 .n3-menu {
      margin-left:0; gap:20px; overflow-x:auto; padding-bottom:2px;
      scrollbar-width:none; -ms-overflow-style:none;
      -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent 100%);
      mask-image:linear-gradient(90deg,#000 90%,transparent 100%);
    }
    #n4f3 .n3-menu::-webkit-scrollbar { display:none; }
    /* Palec jest grubszy od kursora, a napisy przy 11 px robią się nieczytelne.
       Na wąskim ekranie powiększamy pola dotyku i pismo w paskach nawigacyjnych
       — 12 px to dolna granica czytelności, 44 px to zalecany cel dotykowy. */
    #n4f3 a.n3-mlink { font-size:.82rem; padding:13px 2px; }
    #n4f3 a.n3-tlink { font-size:.78rem; padding:13px 4px; }
    #n4f3 a.n3-ico { width:42px; height:42px; }
    #n4f3 .n3-ico svg { width:18px; height:18px; }
    #n4f3 .n3-social { gap:7px; }
  }
  @media (max-width:560px) {
    #n4f3 .n3-topbar-in .n3-hide-sm { display:none; }
    #n4f3 .n3-lock-mark { height:36px; }
    #n4f3 .n3-lock-sygnet { height:38px; }
  }

  /* ---------- OBUDOWA — DÓŁ ---------- */
  #n4f3 .n3-footer {
    position:relative; overflow:hidden; margin-top:0;   /* biała belka stoi tuż nad stopką */
    background:linear-gradient(180deg,#00102A 0%,#001C3D 100%);
  }
  #n4f3 .n3-footer::before {
    content:""; position:absolute; left:0; right:0; top:0; height:4px;
    background:linear-gradient(90deg,var(--fl) 0%,var(--pk) 34%,var(--yellow) 100%);
  }
  /* impuls danych biegnący po górnej krawędzi stopki */
  #n4f3 .n3-footer::after {
    content:""; position:absolute; top:0; left:0; width:22%; height:4px; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
    animation:n3run 8s linear infinite;
  }
  @keyframes n3run { from{transform:translateX(-40%)} to{transform:translateX(500%)} }

  #n4f3 .n3-foot-grid {
    display:grid; grid-template-columns:1.3fr 1fr .95fr .95fr;
    gap:clamp(24px,3.4vw,48px); padding:clamp(46px,6vw,76px) 0 32px;
  }
  #n4f3 .n3-foot-col b {
    display:block; color:var(--ink); margin-bottom:16px;
    font-family:var(--font-head); font-size:.76rem; font-weight:600;
    letter-spacing:.17em; text-transform:uppercase;
  }
  #n4f3 .n3-foot-col p { color:var(--soft); font-size:var(--fs-sm); line-height:1.62; max-width:40ch; }
  #n4f3 .n3-foot-col p + p { margin-top:12px; }
  #n4f3 .n3-foot-col a { color:var(--soft); }
  #n4f3 .n3-foot-col a:hover { color:#fff; text-decoration:none; }
  #n4f3 .n3-foot-logo { height:clamp(38px,4vw,50px); width:auto; margin-bottom:20px; }
  #n4f3 .n3-foot-logo--pk { height:clamp(24px,2.6vw,32px); margin-bottom:26px; }
  #n4f3 .n3-foot-nav { display:grid; gap:4px; }
  /* padding, a nie sam odstęp: pole dotyku ma sięgać 44 px, a nie tylko
     wysokości liter — na telefonie te odnośniki są trafiane kciukiem */
  #n4f3 .n3-foot-nav a { display:inline-flex; align-items:flex-start; gap:10px;
    font-size:var(--fs-sm); padding:10px 0; }
  #n4f3 .n3-foot-nav a::before {
    content:""; flex:0 0 auto; width:6px; height:6px; margin-top:8px; background:var(--yellow);
    transform:rotate(45deg); transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  #n4f3 .n3-foot-nav a:hover::before { transform:rotate(45deg) scale(1.6); }
  #n4f3 .n3-foot-social { margin-top:20px; }
  /* #n4f3 w selektorze konieczne — reset akapitów ma identyfikator */
  #n4f3 .n3-privacy { margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
    color:var(--dim); font-size:var(--fs-xxs); line-height:1.6; max-width:34ch; }
  #n4f3 .n3-foot-bottom {
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
    border-top:1px solid var(--line); padding:22px 0 32px; color:var(--dim);
    font-size:var(--fs-xxs); letter-spacing:.04em;
  }
  #n4f3 .n3-foot-bottom b { color:var(--yellow); font-weight:600; }

  /* ---------- BIAŁA BELKA DOFINANSOWANIA (III EDYCJA) ---------- */
  #n4f3 .n3-funding {
    position:relative; background:#FFFFFF; color:#16202B;
    margin-top:clamp(40px,6vw,84px);                     /* odstęp od ostatniej sekcji */
    padding:clamp(28px,3.8vw,44px) 0 clamp(30px,3.8vw,46px);
  }

  /* Znaki MNiSW i SON III w tej samej wysokości (--znak-h); odstępy — patrz
     reguły komponentu .n3-dof wyżej. */
  #n4f3 .n3-flogo-mnisw,
  #n4f3 .n3-flogo-son { height:var(--znak-h); width:auto; display:block; flex:0 0 auto; }
  /* znaki z <use> nie mają własnych wymiarów — szerokość liczy się z proporcji */
  #n4f3 .n3-flogo-mnisw { aspect-ratio:560 / 132; }
  #n4f3 .n3-defs { position:absolute; width:0; height:0; overflow:hidden; }

  /* wejście logotypów: kolejno, z lekkim podniesieniem */
  #n4f3 .n3-fitem { opacity:0; transform:translateY(16px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
  #n4f3 .n3-funding.is-in .n3-fitem { opacity:1; transform:none; }

  @media (max-width:960px) { #n4f3 .n3-foot-grid { grid-template-columns:1fr 1fr; } }
  @media (max-width:620px) { #n4f3 .n3-foot-grid { grid-template-columns:1fr; } }

  /* ---------- HERO + GÓRA ---------- */
  #n4f3 .n3-hero {
    position:relative; min-height:clamp(600px,88vh,920px);
    display:flex; flex-direction:column; justify-content:center;
    /* dolny margines odsuwa tekst od grani, żeby chmurki szczytów nie wchodziły na przyciski */
    /* Dolny margines wylicza skrypt (reservePeakSpace) i wpisuje w
       --n3-peakpad. Wartość poniżej to tylko zapas na czas, zanim skrypt
       policzy, albo gdyby był wyłączony. */
    padding:70px 0 var(--n3-peakpad, 260px);
  }
  #n4f3 .n3-mountain { position:absolute; inset:0; z-index:-1; overflow:hidden; }
  #n4f3 .n3-net { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  #n4f3 .n3-sky { position:absolute; inset:0; width:100%; height:100%; }
  #n4f3 .n3-range {
    position:absolute; bottom:-1px; left:0; width:100%;
    height:clamp(230px,35vh,400px);
  }
  /* Bez przejścia CSS — płynność daje wygładzanie w pętli rAF w skrypcie.
     Jedno i drugie naraz dawało gumowate, spóźnione przesuwanie warstw. */
  #n4f3 .n3-layer { will-change:transform; }
  #n4f3 .n3-stars circle { animation:n3twinkle 4s ease-in-out infinite; }
  @keyframes n3twinkle { 0%,100%{opacity:.25} 50%{opacity:.95} }

  /* z-index 6 stawia tekst nad chmurkami szczytów — gdyby kiedyś na siebie zaszły */
  #n4f3 .n3-hero-copy { position:relative; z-index:6; text-align:center; }
  /* wejscie tresci hero — kolejno, z lekkim podniesieniem */
  #n4f3 .n3-up { opacity:0; transform:translateY(20px); animation:n3up .95s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes n3up { to { opacity:1; transform:none } }
  /* przeblysk na zoltej czworce i slowie „szczyt" */
  #n4f3 .n3-hero h1 .n3-grad {
    background:linear-gradient(100deg,var(--yellow) 0%,#FFE9B0 46%,var(--yellow) 72%);
    background-size:230% 100%; -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:n3shine 7s ease-in-out infinite;
  }
  @keyframes n3shine { 0%,100%{background-position:130% 0} 50%{background-position:-25% 0} }
  #n4f3 .n3-hero h1 {
    font-size:var(--fs-hero); margin:26px auto 0; max-width:none;
    font-weight:700; letter-spacing:-.038em; line-height:.98;
  }
  /* podtytul jako osobna linia z kreskami po bokach — nie jest juz podwierszem naglowka */
  /* numer edycji nad znakiem: mała, rozstrzelona linia na osi, z kreskami
     po bokach jak w haśle pod znakiem — ta sama rodzina form */
  #n4f3 .n3-hero h1 .n3-marka { display:block; }
  #n4f3 .n3-hero h1 .n3-edycja {
    display:flex; align-items:center; justify-content:center; gap:.9em;
    margin:0 auto .42em; line-height:1;
    font-family:var(--font-head); font-weight:600; letter-spacing:.26em; text-transform:uppercase;
    font-size:max(.76rem,.16em); color:var(--yellow);
  }
  #n4f3 .n3-hero h1 .n3-edycja::before, #n4f3 .n3-hero h1 .n3-edycja::after {
    content:""; width:2.2em; height:1px; background:rgba(242,178,51,.55);
  }
  #n4f3 .n3-hero h1 .n3-tagline {
    display:block; margin-top:.62em;
    font-family:var(--font-head);
    font-size:max(.75rem,.205em); font-weight:600; letter-spacing:.26em; text-transform:uppercase;
    line-height:1.5; color:var(--ice);
  }
  #n4f3 .n3-hero h1 .n3-tagline::before, #n4f3 .n3-hero h1 .n3-tagline::after {
    content:""; display:inline-block; vertical-align:middle;
    width:clamp(18px,6vw,74px); height:1px; margin-bottom:.18em;
  }
  #n4f3 .n3-hero h1 .n3-tagline::before { margin-right:1em; background:linear-gradient(90deg,transparent,var(--line-strong)); }
  #n4f3 .n3-hero h1 .n3-tagline::after { margin-left:1em;  background:linear-gradient(90deg,var(--line-strong),transparent); }

  #n4f3 .n3-hero-sub {
    color:#BFD7EE; font-size:var(--fs-lg); line-height:1.62;
    max-width:54ch; margin:26px auto 0;
  }
  #n4f3 .n3-hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
  #n4f3 .n3-hero-meta {
    margin-top:46px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
    font-size:var(--fs-xs); color:var(--soft);
  }
  #n4f3 .n3-hero-meta span {
    padding:9px 17px; border:1px solid var(--line); border-radius:100px;
    background:rgba(0,28,61,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  #n4f3 .n3-hero-meta em { font-style:normal; color:var(--dim); }

  /* ---------- ZNACZNIKI SZCZYTÓW = ŚCIEŻKI TEMATYCZNE ----------
     Kazdy szczyt to jedna dziedzina. Reflektor przechodzi po nich sam,
     co kilka sekund, i zapala szczyt razem z pigulka pod naglowkiem —
     dzieki temu odwiedzajacy widzi wszystkie piec tematow bez klikania.
     Ksztalt znacznika to szesciokat, ten sam motyw co plaster miodu w tle. */
  #n4f3 .n3-peaks { position:absolute; inset:0; z-index:4; pointer-events:none; }
  #n4f3 .n3-peak {
    position:absolute; transform:translate(-50%,-17px); pointer-events:auto;
    background:none; border:0; padding:0; display:flex; flex-direction:column; align-items:center;
  }
  /* Niewidoczne powiększenie pola dotyku wokół znacznika. 36 px, a nie 44:
     na wąskim ekranie dwa sąsiednie szczyty dzieli ok. 37 px, więc większy
     cel zachodziłby na sąsiada i palec trafiałby w niewłaściwą ścieżkę. */
  #n4f3 .n3-peak::before {
    content:""; position:absolute; left:50%; top:15px; width:36px; height:36px;
    transform:translate(-50%,-50%); border-radius:50%;
  }
  #n4f3 .n3-peak-halo {
    position:absolute; left:50%; bottom:0; width:190px; height:190px; z-index:-1;
    transform:translate(-50%,42%); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, var(--acc) 0%, transparent 66%);
    opacity:0; transition:opacity .5s ease;
  }
  #n4f3 .n3-peak-label {
    position:relative;   /* skrypt dosuwa skrajne dymki przez left */
    display:grid; gap:4px; justify-items:center; margin-top:9px;
    padding:9px 15px; border-radius:15px; white-space:nowrap;
    border:1px solid var(--line-strong); background:rgba(0,14,36,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    opacity:0; transform:translateY(-10px) scale(.94); transform-origin:50% 0;
    transition:opacity .32s ease, transform .42s cubic-bezier(.22,.61,.36,1), border-color .32s ease;
    pointer-events:none;
  }
  #n4f3 .n3-peak-label b {
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--acc);
  }
  #n4f3 .n3-peak-label i { font-style:normal; font-size:var(--fs-xxs); color:var(--soft); }
  #n4f3 .n3-peak-stem {
    width:1px; height:0; background:linear-gradient(180deg,var(--acc),transparent);
    transition:height .42s cubic-bezier(.22,.61,.36,1);
  }
  #n4f3 .n3-peak-node { position:relative; width:34px; height:34px; display:grid; place-items:center; transition:transform .42s cubic-bezier(.22,.61,.36,1); }
  #n4f3 .n3-peak-node::before, #n4f3 .n3-peak-node::after {
    content:""; position:absolute;
    clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  }
  #n4f3 .n3-peak-node::before { inset:0; background:var(--acc); opacity:.5; transition:opacity .3s ease; }
  #n4f3 .n3-peak-node::after { inset:2px; background:#05132C; transition:background .3s ease; }
  #n4f3 .n3-peak-node svg {
    position:relative; z-index:1; width:16px; height:16px;
    fill:none; stroke:var(--acc); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
    transition:stroke .3s ease;
  }
  /* tetniacy pierscien tylko przy aktywnym szczycie — spokojniejsze tlo */
  #n4f3 .n3-peak-ping {
    position:absolute; inset:-7px; opacity:0;
    clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
    background:var(--acc);
  }
  #n4f3 .n3-peak.is-live .n3-peak-ping { animation:n3ping 2.4s ease-out infinite; }
  @keyframes n3ping { 0%{transform:scale(.72); opacity:.42} 100%{transform:scale(1.55); opacity:0} }

  #n4f3 .n3-peak:hover .n3-peak-label, #n4f3 .n3-peak:focus-visible .n3-peak-label, #n4f3 .n3-peak.is-live .n3-peak-label { opacity:1; transform:none; border-color:var(--acc); }
  #n4f3 .n3-peak:hover .n3-peak-stem, #n4f3 .n3-peak:focus-visible .n3-peak-stem, #n4f3 .n3-peak.is-live .n3-peak-stem { height:28px; }
  #n4f3 .n3-peak:hover .n3-peak-node, #n4f3 .n3-peak.is-live .n3-peak-node { transform:scale(1.16); }
  #n4f3 .n3-peak.is-live .n3-peak-halo { opacity:.20; }
  #n4f3 .n3-peak.is-live .n3-peak-node::before { opacity:1; }
  #n4f3 .n3-peak.is-live .n3-peak-node::after { background:var(--acc); }
  #n4f3 .n3-peak.is-live .n3-peak-node svg { stroke:#05132C; }
  #n4f3 .n3-peak.is-on .n3-peak-node::after { background:var(--acc); }
  #n4f3 .n3-peak.is-on .n3-peak-node svg { stroke:#05132C; }

  /* szlak na szczyt „rysuje się" w górę */
  #n4f3 #n3-trail { animation:n3trail 3.6s linear infinite; }
  @keyframes n3trail { to { stroke-dashoffset:-40 } }

  /* ---------- REFLEKTOR: pigułka z aktywną ścieżką ---------- */
  #n4f3 .n3-spot {
    --acc:var(--sky-lt);
    display:inline-flex; align-items:center; gap:14px; margin:28px auto 0;
    padding:10px 22px 10px 12px; border-radius:100px; text-align:left;
    border:1px solid var(--line-strong); background:rgba(0,14,36,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    color:var(--ink); position:relative; overflow:hidden;
    transition:border-color .4s ease, background .4s ease;
  }
  #n4f3 .n3-spot:hover { border-color:var(--acc); text-decoration:none; }
  #n4f3 .n3-spot-ico { position:relative; width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; }
  #n4f3 .n3-spot-ico::before {
    content:""; position:absolute; inset:0; background:var(--acc);
    clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
    transition:background .4s ease;
  }
  #n4f3 .n3-spot-ico svg { position:relative; z-index:1; width:17px; height:17px; fill:none; stroke:#05132C; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  #n4f3 .n3-spot-txt { display:grid; gap:2px; }
  #n4f3 .n3-spot-txt b {
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--acc); transition:color .4s ease;
  }
  #n4f3 .n3-spot-txt span { font-size:var(--fs-xs); color:var(--soft); }
  /* pasek odmierzajacy czas do nastepnej sciezki */
  #n4f3 .n3-spot-bar { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--acc); transform-origin:left; transform:scaleX(0); }
  #n4f3 .n3-spot.is-swap .n3-spot-bar { animation:n3spotbar 4.2s linear forwards; }
  #n4f3 .n3-spot.is-hold .n3-spot-bar { animation-play-state:paused; }
  @keyframes n3spotbar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
  #n4f3 .n3-spot.is-swap .n3-spot-ico, #n4f3 .n3-spot.is-swap .n3-spot-txt { animation:n3swap .5s cubic-bezier(.22,.61,.36,1); }
  @keyframes n3swap { 0%{opacity:0; transform:translateY(7px)} 100%{opacity:1; transform:none} }
  @media (max-width:560px) { #n4f3 .n3-spot-txt span { display:none; } }

  #n4f3 .n3-scrollhint {
    position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  }
  #n4f3 .n3-scrollhint i { width:1px; height:38px; background:linear-gradient(180deg,var(--sky),transparent); animation:n3drop 1.9s ease-in-out infinite; }
  @keyframes n3drop { 0%{transform:scaleY(.2); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(.2); transform-origin:bottom} }

  /* ---------- LICZBY / O WYDARZENIU ---------- */
  #n4f3 .n3-two { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:start; }

  /* ---------- TEKST POD WYSZUKIWARKI ---------- */
  /* Nagłówek w lewej, węższej kolumnie, akapity w prawej — blok wypełnia
     całą szerokość treści zamiast zostawiać pustą prawą stronę. */
  #n4f3 .n3-seo {
    margin-top:clamp(44px,5vw,72px); padding-top:clamp(30px,3.6vw,46px);
    border-top:1px solid var(--line);
    display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr);
    column-gap:clamp(28px,5vw,64px); align-items:start;
  }
  #n4f3 .n3-seo h3 { grid-column:1; grid-row:1 / span 8; font-size:var(--fs-xl); max-width:18ch; margin-bottom:20px; }
  #n4f3 .n3-seo p { grid-column:2; color:var(--soft); font-size:var(--fs-sm); line-height:1.7; max-width:70ch; }
  #n4f3 .n3-seo p + p { margin-top:14px; }

  /* Lista wypunktowana z rombem w kolorze akcentu — reguła wróciła po tym,
     jak zniknęła przy sprzątaniu stylów po kalendarzu. */
  #n4f3 .n3-list { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
  #n4f3 .n3-list li {
    display:flex; gap:14px; align-items:flex-start;
    color:var(--soft); font-size:var(--fs-sm); line-height:1.6; max-width:56ch;
  }
  #n4f3 .n3-list li::before {
    content:""; flex:0 0 auto; width:9px; height:9px; margin-top:9px; border-radius:2px;
    background:var(--yellow); transform:rotate(45deg);
  }

  #n4f3 .n3-tally-kicker {
    display:block; margin-bottom:18px;
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--sky-lt);
  }

  /* ---------- BILANS OBU EDYCJI ---------- */
  #n4f3 .n3-bilans {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    margin:38px 0 6px; border:1px solid var(--line); border-radius:var(--r-lg);
    background:var(--line); overflow:hidden;
  }
  #n4f3 .n3-bilans > div {
    padding:26px clamp(18px,2.2vw,28px); background:var(--card);
    transition:background .2s ease;
  }
  #n4f3 .n3-bilans > div:hover { background:var(--card-hi); }
  #n4f3 .n3-bilans b {
    display:block; position:relative; padding-top:1.5em;
    font-family:var(--font-head); font-size:var(--fs-2xl); line-height:1;
    letter-spacing:-.035em; color:var(--yellow); font-variant-numeric:tabular-nums;
  }
  /* „ponad" wisi nad liczbą w wydzielonym pasie, więc same cyfry stoją
     w jednej linii także w kafelkach bez przedrostka */
  #n4f3 .n3-bilans b em {
    position:absolute; top:0; left:0; margin:0;
    font-style:normal; font-size:max(.75rem,.34em); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  }
  #n4f3 .n3-bilans b span { font:inherit; color:inherit; }
  #n4f3 .n3-bilans > div > span {
    display:block; margin-top:12px; color:var(--soft);
    font-size:var(--fs-xs); line-height:1.5;
  }
  @media (max-width:900px) { #n4f3 .n3-bilans { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px) { #n4f3 .n3-bilans { grid-template-columns:1fr; } }

  /* ---------- ŚCIEŻKI TEMATYCZNE ---------- */
  /* ---------- INTRO ŚCIEŻEK: tekst + pokaz zdjęć ---------- */
  #n4f3 .n3-sciezki-intro {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,5vw,64px); align-items:stretch;
  }
  /* pokaz stoi na wysokość kolumny tekstu: kadr rośnie razem z nią,
     podpis zostaje pod spodem */
  #n4f3 .n3-pokaz { margin:0; min-width:0; display:flex; flex-direction:column; }
  #n4f3 .n3-pokaz-kadr {
    position:relative; flex:1 1 auto; min-height:340px; overflow:hidden;
    border-radius:var(--r-lg); border:1px solid var(--line-strong); background:var(--card);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  }
  #n4f3 .n3-pokaz-kadr img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
    opacity:0; transition:opacity .9s cubic-bezier(.22,.61,.36,1);
  }
  #n4f3 .n3-pokaz-kadr img.is-on { opacity:1; }
  #n4f3 .n3-pokaz-podpis {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin-top:12px; padding:0 4px; font-size:var(--fs-xxs); color:var(--dim); line-height:1.45;
  }
  #n4f3 .n3-pokaz-opis { flex:1 1 auto; min-width:0; }
  #n4f3 .n3-pokaz-ster { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
  #n4f3 .n3-pokaz-kropki { display:flex; gap:6px; flex:0 0 auto; }
  /* przycisk „Zatrzymaj / Wznów": schowany jak tekst dla czytników, widoczny
     dopiero gdy fokus klawiatury jest w obszarze pokazu (WCAG 2.2.2) */
  #n4f3 .n3-pokaz-pauza {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    align-items:center; gap:6px; background:none; cursor:pointer;
    color:var(--ink); font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  }
  #n4f3 .n3-pokaz:focus-within .n3-pokaz-pauza {
    position:static; width:auto; height:auto; margin:0; clip:auto; overflow:visible; display:inline-flex;
    min-height:28px; padding:4px 10px; border:1px solid rgba(255,255,255,.45); border-radius:999px;
  }
  #n4f3 .n3-pokaz-pauza:hover { border-color:var(--yellow); color:var(--yellow); }
  #n4f3 .n3-pokaz-pauza svg { width:12px; height:12px; fill:currentColor; }
  #n4f3 .n3-pokaz-pauza .n3-ik-graj { display:none; }
  #n4f3 .n3-pokaz-pauza[aria-pressed="true"] .n3-ik-graj { display:block; }
  #n4f3 .n3-pokaz-pauza[aria-pressed="true"] .n3-ik-pauza { display:none; }
  /* kropki mają małą kreskę, ale pole dotyku 24 px */
  #n4f3 .n3-pokaz-kropki button {
    width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center;
  }
  #n4f3 .n3-pokaz-kropki button::before {
    content:""; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45);   /* 4,5:1 — WCAG 1.4.11 */
    transition:transform .3s, background .3s;
  }
  #n4f3 .n3-pokaz-kropki button.is-on::before { background:var(--yellow); transform:scale(1.35); }
  #n4f3 .n3-pokaz-kropki button:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; border-radius:50%; }
  @media (max-width:960px) {
    #n4f3 .n3-sciezki-intro { grid-template-columns:1fr; }
    #n4f3 .n3-pokaz { max-width:640px; }
    #n4f3 .n3-pokaz-kadr { flex:0 0 auto; min-height:0; aspect-ratio:16 / 9; }
  }
  @media (max-width:640px) {
    /* podpis na całą szerokość, kropki pod nim — obok siebie podpis łamał się
       w wąską kolumnę */
    #n4f3 .n3-pokaz-podpis { flex-direction:column; align-items:flex-start; gap:8px; }
    #n4f3 .n3-pokaz-ster { align-self:center; }
  }
  @media (prefers-reduced-motion:reduce) { #n4f3 .n3-pokaz-kadr img { transition:none; } }

  #n4f3 .n3-tracks { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:44px; }
  @media (min-width:1100px) { #n4f3 .n3-tracks { grid-template-columns:repeat(5,1fr); } }
  #n4f3 .n3-track {
    text-align:left; padding:26px 24px 24px; border-radius:var(--r-lg); cursor:pointer;
    border:1px solid var(--line); background:var(--card); position:relative;
    /* bez overflow:hidden — przy powiększonych odstępach tekstu (WCAG 1.4.12)
       treść nie może być ucinana */
    /* kolumna, żeby odnośnik u dołu wyrównał się we wszystkich kartach
       niezależnie od tego, ile linii zajmie nazwa dziedziny */
    display:flex; flex-direction:column;
    transition:border-color .2s ease, transform .2s ease, background .2s ease;
  }
  #n4f3 .n3-track:hover { transform:translateY(-5px); border-color:var(--line-strong); background:var(--card-hi); box-shadow:0 18px 38px rgba(0,8,24,.45); }
  #n4f3 .n3-track.is-on { border-color:var(--acc,var(--yellow)); background:var(--card-hi); }
  #n4f3 .n3-track:focus-within { border-color:var(--line-strong); background:var(--card-hi); }
  #n4f3 .n3-track::before {
    content:""; position:absolute; inset:auto auto 0 0; height:3px; width:100%; border-radius:0 0 var(--r-lg) var(--r-lg);
    background:var(--acc,var(--yellow)); opacity:0; transition:opacity .2s ease;
  }
  #n4f3 .n3-track:hover::before, #n4f3 .n3-track.is-on::before { opacity:1; }
  #n4f3 .n3-track-top { display:flex; align-items:center; gap:12px; }
  #n4f3 .n3-track-ico { position:relative; width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; }
  #n4f3 .n3-track-ico::before, #n4f3 .n3-track-ico::after {
    content:""; position:absolute; clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  }
  #n4f3 .n3-track-ico::before { inset:0; background:var(--acc); opacity:.5; transition:opacity .22s ease; }
  #n4f3 .n3-track-ico::after { inset:2px; background:#06162F; transition:background .22s ease; }
  #n4f3 .n3-track-ico svg { position:relative; z-index:1; width:16px; height:16px; fill:none; stroke:var(--acc); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke .22s ease; }
  #n4f3 .n3-track:hover .n3-track-ico::after, #n4f3 .n3-track.is-on .n3-track-ico::after { background:var(--acc); }
  #n4f3 .n3-track:hover .n3-track-ico svg, #n4f3 .n3-track.is-on .n3-track-ico svg { stroke:#06162F; }
  #n4f3 .n3-track-num { font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600; letter-spacing:.2em; color:var(--dim); }
  /* miejsce na dwie linie — inaczej opisy startują na różnych wysokościach */
  #n4f3 .n3-track h3 { font-size:var(--fs-lg); margin:16px 0 10px; min-height:2.36em; }
  #n4f3 .n3-track p { color:var(--soft); font-size:var(--fs-sm); line-height:1.58; }
  #n4f3 .n3-track-count {
    margin-top:auto; padding:20px 0 0; white-space:nowrap;   /* strzałka nie zostaje sama w drugiej linii */
    border:0; background:none; text-align:left; cursor:pointer; align-self:flex-start; min-height:44px;
    font-size:var(--fs-xxs); color:var(--acc,var(--sky-lt)); font-family:var(--font-head);
    font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  }

  /* ---------- OPIS WYBRANEJ ŚCIEŻKI ---------- */
  #n4f3 .n3-trackdetail {
    --acc:var(--sky-lt);
    margin-top:18px; padding:clamp(26px,3.4vw,40px);
    border:1px solid var(--line); border-left:3px solid var(--acc);
    border-radius:var(--r-lg); background:var(--card);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  #n4f3 .n3-td-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
  #n4f3 .n3-td-ico { position:relative; width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; }
  #n4f3 .n3-td-ico::before, #n4f3 .n3-td-ico::after {
    content:""; position:absolute; clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  }
  #n4f3 .n3-td-ico::before { inset:0; background:var(--acc); }
  #n4f3 .n3-td-ico::after { inset:2px; background:#06162F; }
  #n4f3 .n3-td-ico svg { position:relative; z-index:1; width:20px; height:20px; fill:none; stroke:var(--acc); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  #n4f3 .n3-td-full + .n3-td-kicker { margin-top:20px; }
  /* program ścieżki: etykieta typu (wykład / warsztat / wyjście studyjne) + opis */
  #n4f3 .n3-td-program { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
  #n4f3 .n3-td-program li {
    display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
    color:var(--soft); font-size:var(--fs-sm); line-height:1.5;
  }
  #n4f3 .n3-typ {
    display:inline-block; justify-self:start; margin-top:2px; padding:4px 9px 3px; border-radius:6px; white-space:nowrap;
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    border:1px solid currentColor; line-height:1.2;
  }
  #n4f3 .n3-typ--wyklad   { color:var(--sky-lt); }
  #n4f3 .n3-typ--warsztat { color:var(--yellow); }
  #n4f3 .n3-typ--pokaz    { color:var(--ice); }
  #n4f3 .n3-typ--wyjscie  { color:#8BE0B6; }   /* zieleń wyjść — jedyny kolor spoza palety PK, żeby trzy typy dało się odróżnić */
  @media (max-width:640px) {
    #n4f3 .n3-td-program li { grid-template-columns:1fr; gap:5px; }
  }
  #n4f3 .n3-td-kicker {
    display:block; margin-bottom:6px; font-family:var(--font-head); font-size:var(--fs-xxs);
    font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--acc);
  }
  #n4f3 .n3-trackdetail h3 { font-size:var(--fs-xl); }
  #n4f3 .n3-td-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3.6vw,48px); align-items:start; }
  #n4f3 .n3-td-full { color:var(--soft); font-size:var(--fs-md); line-height:1.66; max-width:56ch; }
  #n4f3 .n3-td-list { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:11px; }
  #n4f3 .n3-td-list li {
    display:flex; gap:12px; align-items:flex-start;
    color:var(--soft); font-size:var(--fs-sm); line-height:1.5;
  }
  #n4f3 .n3-td-list li::before {
    content:""; flex:0 0 auto; width:8px; height:8px; margin-top:7px;
    background:var(--acc); transform:rotate(45deg);
  }
  /* data spotkania przy nazwie ścieżki — pojawia się dopiero, gdy termin jest znany */
  /* trzy pola przy każdym szczycie: termin, typ aktywności, miejsce */
  #n4f3 .n3-track-meta { display:grid; gap:7px; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line); }
  #n4f3 .n3-track-meta > div { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:baseline; }
  #n4f3 .n3-track-meta dt, #n4f3 .n3-td-meta dt {
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  }
  #n4f3 .n3-track-meta dd { margin:0; font-size:var(--fs-xs); color:var(--soft); line-height:1.4; text-align:left; }
  #n4f3 .n3-track-meta dd.is-set, #n4f3 .n3-td-meta dd.is-set { color:var(--yellow); font-weight:600; }
  #n4f3 .n3-td-meta {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 24px;
    margin:0 0 26px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  #n4f3 .n3-td-meta > div { display:grid; gap:5px; }
  #n4f3 .n3-td-meta dd { margin:0; font-size:var(--fs-sm); color:var(--ink); line-height:1.4; }
  @media (max-width:640px) { #n4f3 .n3-td-meta { grid-template-columns:1fr; gap:12px; } }
  #n4f3 .n3-td-data {
    display:inline-block; margin-top:8px; padding:5px 13px; border-radius:100px;
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    color:#00102A; background:var(--yellow);
  }
  /* adresy miejsc — spis, a nie ozdobnik, więc bez rombów i mniejszym stopniem */
  #n4f3 .n3-td-miejsca { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:7px; }
  #n4f3 .n3-td-miejsca li {
    position:relative; padding-left:22px; color:var(--soft);
    font-size:var(--fs-xs); line-height:1.5;
  }
  #n4f3 .n3-td-miejsca li::before {
    content:""; position:absolute; left:4px; top:.52em; width:7px; height:7px;
    border-radius:50%; border:2px solid var(--acc,var(--sky));
  }
  @media (max-width:860px) { #n4f3 .n3-td-grid { grid-template-columns:1fr; } }
  #n4f3 .n3-navbtn {
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
    background:transparent; display:inline-flex; align-items:center; justify-content:center;
    transition:background .18s ease;
  }
  #n4f3 .n3-navbtn:hover { background:var(--card-hi); }
  #n4f3 .n3-hint { font-size:.8rem; color:var(--dim); }

  /* ---------- KOMPOZYCJA SEKCJI ----------
     Cienka pozioma kreska rozdziela sekcje — strona czyta się jak lista
     rozdziałów, a nie jeden długi blok. */
  #n4f3 [hidden] { display:none !important; }
  #n4f3 .n3-sec + .n3-sec::before {
    content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:min(100% - 40px, var(--max)); height:1px;
    background:linear-gradient(90deg,transparent,var(--line-strong) 22%,var(--line-strong) 78%,transparent);
  }
  /* naglowek sekcji trzyma jedna miare — eyebrow, tytul, lead */
  #n4f3 .n3-sec .n3-h2 + .n3-lead { margin-top:0; }

  /* ---------- ZGŁOSZENIA ---------- */
  #n4f3 .n3-cta {
    position:relative; overflow:hidden;
    border-radius:var(--r-lg); border:1px solid var(--line-strong);
    padding:clamp(30px,5vw,58px);
    /* ciemniejszy niż reszta strony — sekcja zgłoszeń ma się wybijać */
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(78,168,232,.10), transparent 64%),
      linear-gradient(180deg,#00081B 0%,#000F26 100%);
    box-shadow:0 30px 70px rgba(0,4,14,.5);
    text-align:center;
  }
  #n4f3 .n3-deadline {
    display:inline-flex; align-items:center; gap:10px; margin:24px auto 0;
    padding:9px 18px; border-radius:100px;
    border:1px solid rgba(242,178,51,.42); background:rgba(242,178,51,.10); color:var(--yellow);
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase;
  }
  #n4f3 .n3-deadline::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--yellow); animation:n3blip 2.2s ease-in-out infinite; }

  /* Ramka formularza gra kolorami grafiki promocyjnej: granat PK,
     błękit FutureLabu i żółć z hasła #nauka4future. Sam gradient jest
     tłem kontenera, a białe wnętrze leży na nim z 2 px zapasu — dzięki
     temu obwódka jest równa na każdym rogu, bez sztuczek z border-image. */
  #n4f3 .n3-formbox {
    position:relative; margin-top:30px; padding:2px; border-radius:24px;
    background:linear-gradient(135deg,var(--fl) 0%,var(--pk-mid) 34%,var(--pk) 62%,var(--yellow) 100%);
    box-shadow:0 26px 64px rgba(0,8,24,.5);
  }
  /* miękka poświata pod ramką — ten sam gradient, rozmyty */
  #n4f3 .n3-formbox::before {
    content:""; position:absolute; inset:-10px; z-index:-1; border-radius:32px;
    background:inherit; filter:blur(26px); opacity:.32; pointer-events:none;
  }
  #n4f3 .n3-formbox-in { border-radius:22px; overflow:hidden; background:#fff; }
  #n4f3 .n3-formbox-bar {
    display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap;
    padding:14px 20px; background:var(--pk-dk);
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ice);
  }
  #n4f3 .n3-formbox-mark {
    font-size:var(--fs-sm); font-weight:700; letter-spacing:-.02em; text-transform:none;
    color:#fff;
  }
  #n4f3 .n3-formbox-mark b { color:var(--yellow); font-weight:700; }
  #n4f3 .n3-formbox-bar .n3-formbox-sep { flex:1 1 auto; }
  #n4f3 .n3-formbox-bar .n3-btn--ghost { color:#fff; border-color:rgba(255,255,255,.32); }
  #n4f3 .n3-formbox-bar .n3-btn--ghost:hover { background:rgba(255,255,255,.12); border-color:var(--yellow); }
  #n4f3 .n3-formbox iframe { display:block; width:100%; height:clamp(620px,84vh,960px); border:0; background:#fff; }

  #n4f3 .n3-closed { display:grid; justify-items:center; padding-top:12px; }
  #n4f3 .n3-closed-art { width:clamp(148px,21vw,206px); margin-bottom:24px; }
  #n4f3 .n3-closed-art svg { width:100%; height:auto; display:block; }
  #n4f3 .n3-closed-ring { transform-origin:100px 100px; animation:n3spin 30s linear infinite; }
  @keyframes n3spin { to { transform:rotate(360deg) } }
  #n4f3 .n3-closed h3 { font-size:var(--fs-2xl); margin-bottom:16px; max-width:20ch; }
  #n4f3 .n3-closed p { color:var(--soft); font-size:var(--fs-md); line-height:1.62; max-width:56ch; }
  #n4f3 .n3-closed p + p { margin-top:14px; }
  #n4f3 .n3-closed .n3-hero-cta { margin-top:30px; }

  /* ---------- ZAKŁADKI: POPRZEDNIE EDYCJE ---------- */
  #n4f3 .n3-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:34px 0 26px; }
  #n4f3 .n3-tab {
    display:grid; gap:2px; text-align:left; padding:13px 22px; border-radius:16px;
    border:1px solid var(--line); background:var(--card); color:var(--soft);
    transition:border-color .22s ease, background .22s ease, color .22s ease, transform .22s ease;
  }
  #n4f3 .n3-tab:hover { border-color:var(--line-strong); background:var(--card-hi); transform:translateY(-2px); }
  #n4f3 .n3-tab b { font-family:var(--font-head); font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
  #n4f3 .n3-tab span { font-family:var(--font-head); font-size:var(--fs-xxs); letter-spacing:.18em; }
  #n4f3 .n3-tab.is-on { border-color:var(--yellow); background:rgba(242,178,51,.10); }
  #n4f3 .n3-tab.is-on b { color:var(--yellow); }

  #n4f3 .n3-pan { animation:n3panin .5s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes n3panin { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
  #n4f3 .n3-pan-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(26px,4vw,52px); align-items:start; }
  #n4f3 .n3-pan-lead { color:var(--soft); font-size:var(--fs-md); line-height:1.62; max-width:52ch; }

  #n4f3 .n3-minifacts { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
  #n4f3 .n3-minifacts div {
    flex:1 1 120px; padding:16px 18px; border-radius:16px;
    border:1px solid var(--line); background:var(--card);
  }
  #n4f3 .n3-minifacts b { display:block; font-family:var(--font-head); font-size:var(--fs-xl); line-height:1; color:var(--yellow); letter-spacing:-.03em; }
  #n4f3 .n3-minifacts span { display:block; margin-top:7px; font-size:var(--fs-xxs); color:var(--dim); line-height:1.4; }

  /* ---------- SLAJDER Z FACEBOOKA ---------- */
  #n4f3 .n3-fb { margin-top:clamp(40px,5vw,68px); border-top:1px solid var(--line); padding-top:clamp(28px,3.6vw,46px); }
  #n4f3 .n3-fb-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
  #n4f3 .n3-fb-head h3 { font-size:var(--fs-xl); }
  #n4f3 .n3-fb-nav { display:flex; gap:8px; }
  #n4f3 .n3-fb-track {
    display:grid; grid-auto-flow:column; grid-auto-columns:min(416px,86vw);
    gap:16px; overflow-x:auto; padding:2px 2px 10px;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  #n4f3 .n3-fb-track::-webkit-scrollbar { display:none; }
  #n4f3 .n3-fb-card {
    scroll-snap-align:start; display:flex; flex-direction:column;
    border:1px solid var(--line); border-radius:var(--r); background:var(--card);
    padding:18px 18px 0; overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  #n4f3 .n3-fb-temat {
    display:flex; flex-direction:column; gap:4px; margin-bottom:14px;
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--sky-lt);
  }
  #n4f3 .n3-fb-temat span { font-weight:500; letter-spacing:.08em; color:var(--dim); }
  /* Wtyczka Facebooka rysuje własną białą kartę — dajemy jej zaokrąglone rogi
     i stałą wysokość, żeby wszystkie karty w slajderze były równe. */
  #n4f3 .n3-fb-osadzenie {
    border-radius:12px 12px 0 0; overflow:hidden; background:#fff;
    height:560px; margin:0 -18px;
  }
  #n4f3 .n3-fb-osadzenie iframe { display:block; width:100%; height:100%; border:0; }

  #n4f3 .n3-fb-empty {
    scroll-snap-align:start; display:grid; align-content:center; gap:10px;
    padding:28px; min-height:220px; border-radius:var(--r);
    border:1px dashed var(--line-strong); background:var(--card); color:var(--soft);
    font-size:var(--fs-sm); line-height:1.6;
  }
  #n4f3 .n3-fb-empty b { font-family:var(--font-head); color:var(--ink); font-size:var(--fs-sm); }
  #n4f3 .n3-fb-consent .n3-btn { justify-self:start; margin-top:6px; }
  #n4f3 .n3-fb-nav button[disabled] { opacity:.35; cursor:not-allowed; }
  #n4f3 .n3-fb-empty code { font-size:var(--fs-xxs); color:var(--sky-lt); word-break:break-all; }
  @media (prefers-reduced-motion:reduce) { #n4f3 .n3-fb-track { scroll-behavior:auto; } }

  #n4f3 .n3-tl { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
  #n4f3 .n3-tl li {
    display:grid; grid-template-columns:74px 1fr; gap:16px; align-items:start;
    padding:15px 16px; border-radius:14px; border:1px solid transparent;
    transition:border-color .22s ease, background .22s ease;
  }
  #n4f3 .n3-tl li:hover { border-color:var(--line); background:var(--card); }
  #n4f3 .n3-tl-date {
    font-family:var(--font-head); font-size:var(--fs-sm); font-weight:600;
    color:var(--sky-lt); letter-spacing:.04em; font-variant-numeric:tabular-nums;
    padding-top:1px;
  }
  #n4f3 .n3-tl b { display:block; font-size:var(--fs-sm); font-weight:600; line-height:1.4; }
  #n4f3 .n3-tl i { display:block; margin-top:4px; font-style:normal; font-size:var(--fs-xs); color:var(--dim); }
  /* ---------- OZNACZENIE DOFINANSOWANIA Z BUDŻETU PAŃSTWA ----------
     Jeden komponent w dwóch miejscach: biała karta przy 2. edycji (SON II,
     kwoty z plakatu informacyjnego) i biała belka na samym dole (3. edycja,
     SON III). Układ wg wzoru tablicy „Dofinansowano ze środków budżetu
     państwa": barwy RP i godło po lewej, treść w środku, znaki po prawej.
     Godło stoi zawsze na białym — dlatego karta jest biała także w ciemnej
     sekcji, a wszystkie kolory tekstu są tu wpisane wprost (ciemne na jasnym),
     nie ze zmiennych strony, które są dobrane pod granatowe tło. */
  #n4f3 .n3-dof {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
    gap:clamp(22px,3vw,40px); color:#16202B;
  }
  /* w belce znaki po prawej są mniejsze niż w karcie, żeby tekst dostał
     ~50 znaków w wierszu i żeby cały rząd mieścił się w szerokości treści
     (siatka nie może wystawać poza .n3-wrap) */
  /* belka: znaki w osobnym rzędzie pod tekstem (jak w kartach) — z odstępem 3×
     nie mieszczą się obok tekstu bez ściskania go do wąskiej kolumny */
  /* belka: trzy kolumny — znaki państwowe | treść | znaki instytucji przy
     prawej krawędzi; tekst dostaje resztę szerokości */
  #n4f3 .n3-dof--belka { grid-template-columns:auto minmax(0,1fr) auto; column-gap:clamp(28px,4vw,56px); }
  #n4f3 .n3-dof--belka .n3-dof-znaki { grid-row:1; }
  #n4f3 .n3-dof--belka .n3-dof-logos { grid-column:3; grid-row:1; margin:0; justify-self:end; }
  #n4f3 .n3-dof--belka .n3-dof-opis { max-width:none; }   /* kolumnę ogranicza siatka, nie licznik znaków */
  @media (max-width:1180px) {
    #n4f3 .n3-dof--belka { grid-template-columns:auto minmax(0,1fr); row-gap:22px; }
    #n4f3 .n3-dof--belka .n3-dof-logos { grid-column:1 / -1; grid-row:auto; justify-self:end; }
    #n4f3 .n3-dof--belka .n3-dof-opis { max-width:66ch; }
  }
  /* znak SON (pierwsza edycja programu) istnieje tylko w pionie: sygnet nad
     nazwą w trzech wierszach, więc dostaje więcej wysokości niż znaki poziome,
     żeby nazwa programu pozostała czytelna */
  #n4f3 .n3-dof-son1 { height:clamp(92px,9vw,112px); width:auto; display:block; }
  #n4f3 .n3-dof--karta {
    margin-top:clamp(26px,3.4vw,40px); padding:clamp(22px,3vw,34px) clamp(20px,3.2vw,38px);
    background:#FFFFFF; border-radius:var(--r);
  }
  /* Barwy i godło obok siebie, jak na wzorze tablicy: flaga nieco niższa od
     godła (548:583 — proporcja z oficjalnego pliku), odstęp niewielki. */
  #n4f3 .n3-dof-znaki { display:flex; align-items:center; gap:clamp(12px,1.4vw,18px); flex:0 0 auto; grid-row:1 / span 2; }
  #n4f3 .n3-dof-flaga { height:clamp(54px,5.3vw,68px); width:auto; aspect-ratio:820 / 548; display:block; }
  #n4f3 .n3-dof-godlo { height:clamp(58px,5.6vw,72px); width:auto; aspect-ratio:165 / 194; display:block; }
  #n4f3 .n3-dof-tresc { min-width:0; }
  #n4f3 .n3-dof-kicker {
    margin:0 0 6px; font-family:var(--font-head); font-weight:700; font-size:var(--fs-sm);
    letter-spacing:-.01em; color:var(--pk);
  }
  /* ciemniejszy odcień żółci — na białym tle brandowa #F2B233 nie daje
     wymaganego kontrastu dla tekstu (WCAG 1.4.3: min. 4,5:1) */
  #n4f3 .n3-dof-kicker b { color:#8A5C00; font-weight:700; }   /* 5,8:1 na bieli */
  #n4f3 .n3-dof-tytul {
    margin:0; font-family:var(--font-head); font-weight:700; font-size:var(--fs-md);
    line-height:1.25; letter-spacing:.02em; text-transform:uppercase; color:#16202B;
  }
  #n4f3 .n3-dof-opis { margin:8px 0 0; max-width:66ch; font-size:var(--fs-xs); line-height:1.62; color:#41505F; }
  #n4f3 .n3-dof-opis b { color:#16202B; font-weight:600; }
  #n4f3 .n3-dof-dane { display:flex; flex-wrap:wrap; gap:10px 30px; margin:14px 0 0; padding:0; }
  #n4f3 .n3-dof-dane > div { display:grid; gap:3px; }
  #n4f3 .n3-dof-dane dt {
    font-family:var(--font-head); font-size:var(--fs-xxs); font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:#5C6B7B;   /* 5,5:1 na bieli */
  }
  #n4f3 .n3-dof-dane dd {
    margin:0; font-family:var(--font-head); font-size:var(--fs-lg); font-weight:700;
    line-height:1.1; letter-spacing:-.02em; color:var(--pk); white-space:nowrap;
  }
  /* ZNAKI MINISTERSTWA I PROGRAMU
     Stoją w drugim wierszu prawej kolumny, pod tekstem — dzięki temu karta ma
     dwie wyraźne kolumny (znaki państwowe | treść i znaki instytucji), a nie
     rozsypane elementy. MNiSW pierwszy, znaki poziome tej samej wysokości;
     odstęp = półtorej wysokości znaku, żeby pola ochronne (wysokość godła
     w znaku MNiSW, X w znaku SON) na siebie nie nachodziły. Między znakami
     nie ma żadnych kresek ani ozdobników. Księga SON III: minimalna szerokość
     znaku poziomego w internecie 120 px, pionowego 75 px — tu 215–225 i 136 px. */
  #n4f3 .n3-dof { --znak-h:clamp(40px,3.4vw,46px); }
  #n4f3 .n3-dof-logos {
    display:flex; align-items:center; flex:0 0 auto;
    gap:calc(1.5 * var(--znak-h)); margin-top:4px;
  }
  #n4f3 .n3-dof-son2 { height:var(--znak-h); width:auto; display:block; }
  #n4f3 .n3-dof-son1 { height:clamp(86px,7.6vw,100px); width:auto; display:block; }   /* znak pionowy */
  #n4f3 .n3-dof--karta { grid-template-columns:auto minmax(0,1fr); row-gap:22px; }
  #n4f3 .n3-dof--karta .n3-dof-logos { grid-column:2; }

  @media (max-width:640px) {
    #n4f3 .n3-dof, #n4f3 .n3-dof--belka { grid-template-columns:1fr; text-align:center; gap:20px; }
    #n4f3 .n3-dof-znaki, #n4f3 .n3-dof--belka .n3-dof-znaki { grid-row:auto; }
    #n4f3 .n3-dof--karta .n3-dof-logos, #n4f3 .n3-dof--belka .n3-dof-logos { grid-column:1; grid-row:auto; justify-self:center; }
    #n4f3 .n3-dof-znaki, #n4f3 .n3-dof-dane, #n4f3 .n3-dof-logos { justify-content:center; }
    #n4f3 .n3-dof-opis { margin-inline:auto; }
    #n4f3 .n3-dof-dane > div { text-align:center; }
    #n4f3 .n3-dof-logos { flex-direction:column; gap:calc(1 * var(--znak-h)); margin-top:0; }
  }

  @media (max-width:860px) { #n4f3 .n3-pan-grid { grid-template-columns:1fr; } }

  /* ---------- ANIMACJE WEJŚCIA ---------- */
  #n4f3 .n3-rise { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  #n4f3 .n3-rise.is-in { opacity:1; transform:none; }

  /* ---------- RWD ---------- */
  @media (max-width:960px) {
    #n4f3 .n3-two, #n4f3 .n3-calwrap { grid-template-columns:1fr; }
    #n4f3 .n3-seo { grid-template-columns:1fr; }
    #n4f3 .n3-seo h3, #n4f3 .n3-seo p { grid-column:1; grid-row:auto; }
    #n4f3 .n3-seo h3 { max-width:26ch; }
  }
  @media (max-width:640px) {
    #n4f3 .n3-hero { min-height:88vh; }
    /* niższe pasmo na wąskim ekranie — inaczej „slice" powiększa góry i szczyty wchodzą na treść */
    #n4f3 .n3-range { height:clamp(140px,24vh,220px); }
    #n4f3 .n3-peak-label { display:none; }
  }
  /* ============================================================
     TELEFON — osobne przejście przez cały układ.
     Reguły są po bloku RWD, więc nadpisują wcześniejsze ustawienia.
     ============================================================ */
  @media (max-width:700px) {
    /* zapowiedź ścieżki nie mieści się w chmurce na wąskim ekranie */
    #n4f3 .n3-peak-label i { display:none; }
    #n4f3 .n3-peak-label { padding:7px 12px; border-radius:12px; margin-bottom:7px; }
    #n4f3 .n3-peak-node { width:30px; height:30px; }
    #n4f3 .n3-peak-node svg { width:14px; height:14px; }
    #n4f3 .n3-spot { max-width:100%; padding:9px 18px 9px 10px; gap:11px; }
    #n4f3 .n3-spot-txt span { white-space:normal; }
  }

  @media (max-width:640px) {
    #n4f3 .n3-hero { min-height:auto; padding:52px 0 var(--n3-peakpad, 215px); }
    #n4f3 .n3-hero h1 .n3-tagline { font-size:max(.75rem,.235em); letter-spacing:.16em; }
    #n4f3 .n3-hero h1 .n3-tagline::before, #n4f3 .n3-hero h1 .n3-tagline::after { display:none; }
    #n4f3 .n3-hero-sub { font-size:var(--fs-md); margin:20px auto 0; max-width:38ch; }
    #n4f3 .n3-hero-cta { flex-direction:column; align-items:stretch; gap:10px; margin-top:30px; }
    #n4f3 .n3-hero-cta .n3-btn { width:100%; }
    #n4f3 .n3-hero-meta { gap:8px; margin-top:28px; }
    #n4f3 .n3-hero-meta span { padding:8px 14px; }
    #n4f3 .n3-scrollhint { display:none; }

    #n4f3 .n3-sec { padding:clamp(48px,11vw,72px) 0; }
    #n4f3 .n3-h2 { max-width:none; }
    #n4f3 .n3-lead { font-size:var(--fs-md); }

    #n4f3 .n3-cta { padding:26px 18px; border-radius:22px; }
    #n4f3 .n3-deadline { letter-spacing:.1em; padding:9px 15px; }
    #n4f3 .n3-formbox { margin-top:24px; border-radius:18px; }
    #n4f3 .n3-formbox-in { border-radius:16px; }
    #n4f3 .n3-formbox-bar { padding:12px 14px; gap:6px 12px; letter-spacing:.1em; }
    #n4f3 .n3-formbox iframe { height:min(76vh,620px); }
    #n4f3 .n3-closed-art { width:136px; margin-bottom:18px; }
    #n4f3 .n3-closed h3 { max-width:none; }

    #n4f3 .n3-tabs { gap:8px; margin:26px 0 20px; }
    #n4f3 .n3-tab { padding:11px 16px; }
    #n4f3 .n3-tl li { grid-template-columns:54px 1fr; gap:12px; padding:13px 10px; }
    #n4f3 .n3-minifacts div { flex:1 1 100%; }
    #n4f3 .n3-fb-track { grid-auto-columns:88vw; }
    #n4f3 .n3-fb-head h3 { font-size:var(--fs-lg); }

    #n4f3 .n3-foot-grid { padding:40px 0 26px; gap:30px; }
    #n4f3 .n3-foot-logo { height:42px; margin-bottom:16px; }
    #n4f3 .n3-foot-col p { max-width:none; }
  }

  @media (max-width:400px) {
    #n4f3 .n3-wrap { width:calc(100% - 28px); }
  }

  @media (prefers-reduced-motion:reduce) {
    #n4f3 *, #n4f3 *::before, #n4f3 *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
    #n4f3 .n3-rise { opacity:1; transform:none; }
    #n4f3 .n3-fb-track { scroll-behavior:auto; }
  }


/* Dodatki integracyjne wtyczki. */
#n4f3 { width:100%; max-width:none; }
#n4f3.n4f3--no-gallery .n3-sciezki-intro { grid-template-columns:minmax(0,1fr); }
#n4f3.n4f3--no-gallery .n3-sciezki-tekst { max-width:72ch; }
#n4f3 .n3-external-placeholder {
  min-height:220px; display:grid; place-items:center; align-content:center; gap:14px;
  padding:28px; text-align:center; color:var(--soft); background:rgba(255,255,255,.045);
  border:1px dashed var(--line-strong); border-radius:16px;
}
#n4f3 .n3-external-placeholder p { max-width:52ch; }
#n4f3 .n3-external-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
#n4f3 .n3-external-note { color:var(--dim); font-size:var(--fs-xs); line-height:1.55; }
#n4f3 .n3-fb-osadzenie iframe,
#n4f3 .n3-formbox iframe { width:100%; border:0; background:#fff; }
#n4f3 .n3-fb-osadzenie iframe { min-height:560px; }
#n4f3 .n3-formbox iframe { min-height:760px; }
#n4f3 .n3-admin-missing {
  display:inline-flex; align-items:center; min-height:52px; padding:10px 14px;
  border:1px dashed #9b1c1c; border-radius:8px; color:#7f1d1d; background:#fff7f7;
  font:600 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
#n4f3 .n3-media-logo { display:block; max-width:100%; }
#n4f3 .n3-dof-flaga.n3-media-logo { width:auto; }
#n4f3 .n3-pokaz-kadr img { object-fit:cover; }
@media (max-width:620px) {
  #n4f3 .n3-external-placeholder { min-height:180px; padding:20px 14px; }
  #n4f3 .n3-formbox iframe { min-height:680px; }
}