/* ═══════════════════ FONTY SELF-HOSTED (katalog /fonts) ═══════════════════
   Każdy plik jest wariantem ŁĄCZONYM latin + latin-ext (widać to w nazwie
   "latin_latin-ext"), dlatego unicode-range to SUMA obu zakresów. Rozbicie na
   osobne deklaracje latin / latin-ext zepsułoby polskie znaki (ą ć ę ł ń ó ś ź ż
   leżą w U+0100-024F, czyli w latin-ext).
   Zero requestów do googleapis.com / gstatic.com. */

/* --- Bricolage Grotesque (--headline): 600, 700, 800 --- */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-grotesque-v9-latin_latin-ext-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-grotesque-v9-latin_latin-ext-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-grotesque-v9-latin_latin-ext-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}

/* --- Space Grotesk (--display): 500, 600, 700 --- */
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/space-grotesk-v22-latin_latin-ext-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/space-grotesk-v22-latin_latin-ext-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/space-grotesk-v22-latin_latin-ext-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}

/* --- JetBrains Mono (--mono): 400 (regular), 500, 600 + 400 italic --- */
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/jetbrains-mono-v24-latin_latin-ext-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}

/* --- Inter (--body): 400 (regular), 600 --- */
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+1E00-1EFF,U+2000-206F,U+2020,U+2074,U+20A0-20AB,U+20AC,U+20AD-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}

:root{
    --nav-total:86px;
    --bg:#FFFFFF; --bg-soft:#F7F6F2; --bg-elevated:#EFEEE8;
    --ink:#0F1014; --ink-soft:#191B21;
    --border:#E8E6E0; --border-strong:#D8D6CE;
    --text:#15161B; --text-muted:#5B6170; --text-dim:#989FAA;
    --violet:#7C5CFC; --cyan:#17B8AC; --amber:#F2A93B; --rose:#F0685E;
    --grad:linear-gradient(120deg, var(--violet) 0%, var(--cyan) 52%, var(--amber) 100%);
    --radius:20px;
    /* fallbacki: przy font-display:swap pierwsza klatka leci zapasem, bez skoku układu */
    --mono:'JetBrains Mono', 'Cascadia Code', Consolas, ui-monospace, monospace;
    --display:'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --headline:'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --body:'Inter', system-ui, 'Segoe UI', -apple-system, sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  /* <picture> ma byc przezroczysty dla layoutu: <img> w srodku dziedziczy flex/grid rodzica
     dokladnie tak, jakby <picture> nie istnialo (inaczej inline-owy wrapper psul rozmiary) */
  picture{ display:contents; }
  html{scroll-behavior:smooth; background:var(--ink);}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *, *::before, *::after{ animation:none !important; transition:none !important; }
  }
  body{ background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.65; overflow-x:hidden; position:relative; }
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--amber); color:#fff;}
  a:focus-visible, button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

  /* ziarno / tekstura premium na całej stronie */
  /* bez mix-blend-mode: blend na warstwie fixed wymusza przemalowanie calego ekranu przy scrollu.
     Sama opacity daje ten sam efekt faktury za ulamek kosztu. Bez animacji ziarna. */
  .grain{
    position:fixed; inset:0; z-index:999; pointer-events:none; opacity:0.03; contain:paint;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  /* zasada B (mobile): minimum 24px oddechu od krawędzi ekranu */
  @media (max-width:640px){ .wrap{padding:0 24px;} }

  /* background-clip:text + color:transparent maluje literę tylko tam, gdzie jest tło elementu,
     więc ogonki (ą, ę, ją) wychodzące poniżej pudełka stają się niewidoczne.
     inline-block + zapas na dole daje im miejsce. */
  /* display:inline -> tło do przycięcia bierze obszar zawartości fontu (ascent+descent),
     więc ogonki ą/ę są malowane, a wiersz NIE jest rozpychany (równe odstępy linii).
     inline-block + padding rozpychało line-box i psuło rytm nagłówka. */
  .gradient-text{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    display:inline; padding:0; line-height:inherit; overflow:visible;
  }

  .eyebrow{ font-family:var(--mono); font-size:12.5px; color:var(--violet); font-weight:500; display:flex; align-items:center; gap:8px; margin-bottom:16px; }
  .eyebrow::before{content:'//'; color:var(--text-dim);}

  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal.in-view{ opacity:1; transform:translateY(0); }

  .index-num{
    position:absolute; top:-10px; right:0; font-family:var(--headline); font-weight:800;
    font-size:clamp(90px,14vw,220px); color:var(--bg-soft); z-index:0; line-height:1;
    user-select:none; pointer-events:none;
  }
  @media (max-width:640px){ .index-num{ font-size:64px; top:-4px; } }
  @media (max-width:380px){ .index-num{ font-size:52px; } }

  /* ---------- NAV (pływająca kapsuła) ---------- */
  /* pływająca warstwa NAD treścią (nie odpycha layoutu) */
  header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 16px; background:none; border:none; }
  .navbar{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
    max-width:1120px; margin:0 auto; padding:9px 12px 9px 22px;
    background:rgba(255,255,255,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--border); border-radius:16px;
    box-shadow:0 10px 30px -18px rgba(15,16,20,0.28);
    transition:padding .28s ease, box-shadow .28s ease, background .28s ease;
  }
  /* przy scrollu zmienia się WYŁĄCZNIE cień i krycie tła.
     Zero zmian geometrii, więc --nav-total jest stałe i nic nie skacze
     (smycz na o-mnie, scroll-margin, wysokości hero i kontaktu). */
  header.scrolled .navbar{
    background:rgba(255,255,255,0.9);
    box-shadow:0 16px 40px -20px rgba(15,16,20,0.42);
  }
  /* kotwice sekcji nie chowają się pod kapsułą */
  [id]{ scroll-margin-top:calc(var(--nav-total) + 8px); }
  @media (max-width:640px){
    header{ padding:12px 12px; }
    .navbar{ padding:7px 8px 7px 16px; }
    :root{ --nav-total:76px; }
  }
  .logo{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-0.01em; color:var(--ink); justify-self:start; display:flex; align-items:center; gap:8px; }
  .logo .dot{ width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--violet), var(--cyan)); position:relative; }
  .logo .dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; background:linear-gradient(135deg, var(--violet), var(--cyan)); opacity:0.35; animation:pulse-dot 2.4s ease-in-out infinite; }
  @keyframes pulse-dot{ 0%,100%{ transform:scale(1); opacity:0.35; } 50%{ transform:scale(1.6); opacity:0; } }
  .nav-links{ display:flex; align-items:center; gap:clamp(6px,1.5vw,10px); justify-self:center; position:relative; }
  .nav-pill{ position:absolute; height:34px; border-radius:9px; background:var(--bg-soft); top:50%; transform:translateY(-50%); transition:left .3s cubic-bezier(.16,1,.3,1), width .3s cubic-bezier(.16,1,.3,1), opacity .2s ease; opacity:0; z-index:0; }
  .nav-links a{ font-family:var(--display); font-size:14.5px; font-weight:500; color:var(--text-muted); white-space:nowrap; position:relative; z-index:1; padding:8px 14px; border-radius:9px; transition:color .2s ease; }
  .nav-links a .slash{ color:var(--border-strong); margin-right:1px; transition:color .2s ease; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:nth-child(2):hover .slash{ color:var(--violet); }
  .nav-links a:nth-child(3):hover .slash{ color:var(--cyan); }
  .nav-links a:nth-child(4):hover .slash{ color:var(--cyan); }
  .nav-links a:nth-child(5):hover .slash{ color:var(--violet); }
  .nav-links a:nth-child(6):hover .slash{ color:var(--cyan); }
  .nav-links a:nth-child(7):hover .slash{ color:var(--violet); }
  /* 7 pozycji w kapsule: kompakt wchodzi wcześniej (<=900), hamburger od <=768 */
  @media (max-width:900px){ .nav-links{ gap:2px; } .nav-links a{ font-size:13px; padding:7px 9px; } }
  @media (max-width:768px){
    .navbar{ grid-template-columns:auto 1fr auto; }
    .nav-links{ display:none; }
    .nav-cta{ display:none; }
  }
  .nav-toggle{
    display:none; justify-self:end; width:36px; height:36px; border:none; background:none;
    align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:''; position:absolute; width:20px; height:1.6px; background:var(--ink); transition:transform .25s ease, opacity .2s ease;
  }
  .nav-toggle span{ display:block; }
  .nav-toggle span::before{ top:-6px; left:0; }
  .nav-toggle span::after{ top:6px; left:0; }
  .nav-toggle.open span{ background:transparent; }
  .nav-toggle.open span::before{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span::after{ transform:translateY(-6px) rotate(-45deg); }
  @media (max-width:768px){ .nav-toggle{ display:flex; } }

  .mobile-nav{
    position:absolute; top:100%; left:0; right:0; z-index:98;
    background:#fff; border-bottom:1px solid var(--border);
    box-shadow:0 24px 48px -20px rgba(15,16,20,0.18);
    opacity:0; transform:translateY(-10px) scale(0.99); transform-origin:top;
    pointer-events:none; visibility:hidden;
    transition:opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), visibility 0s linear .25s;
  }
  .mobile-nav.open{
    opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible;
    transition:opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
  }
  .mobile-nav a{
    display:flex; align-items:center; gap:10px; padding:17px 24px; font-family:var(--display); font-size:16.5px; font-weight:500;
    color:var(--text-muted); border-top:1px solid var(--border);
    transition:background .2s ease, color .2s ease, padding-left .2s ease;
  }
  .mobile-nav a .slash{ color:var(--border-strong); transition:color .2s ease; }
  .mobile-nav a .mn-arrow{ margin-left:auto; opacity:0; transform:translateX(-4px); color:var(--text-dim); transition:opacity .2s ease, transform .2s ease; }
  .mobile-nav a:first-child{ border-top:none; }
  .mobile-nav a:hover, .mobile-nav a:active{ background:var(--bg-soft); color:var(--ink); padding-left:30px; }
  .mobile-nav a:hover .mn-arrow, .mobile-nav a:active .mn-arrow{ opacity:1; transform:translateX(0); }
  .mobile-nav a:nth-child(2):hover .slash{ color:var(--violet); }
  .mobile-nav a:nth-child(3):hover .slash{ color:var(--cyan); }
  .mobile-nav a:nth-child(4):hover .slash{ color:var(--violet); }
  .mobile-nav a:nth-child(5):hover .slash{ color:var(--cyan); }
  .mobile-nav a:nth-child(1):hover .slash{ color:var(--cyan); }
  .nav-cta{ font-family:var(--display); font-size:13.5px; font-weight:600; background:var(--ink); color:#fff; border-radius:11px; padding:11px 20px; justify-self:end; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease; }
  .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,16,20,0.22); }
  @media (max-width:600px){ .nav-cta{ padding:9px 14px; font-size:12.5px; } }

  /* ---------- HERO ---------- */
  .hero-zone{ position:relative; overflow:hidden; height:100svh; padding-top:var(--nav-total); display:flex; flex-direction:column; }
  /* safe center: gdy treść jest wyższa niż dostępna przestrzeń, wyrównuje do góry
     zamiast wypychać pierwszy wers symetrycznie POD pływający navbar */
  .hero{ padding:0; position:relative; width:100%; flex:1 1 auto; display:flex; align-items:center; align-items:safe center; }
  .hero .hero-inner{ width:100%; }
  /* zasada A: navbar jest fixed i nie odpycha treści, więc pierwsza sekcja
     dostaje na dotyku zapas pod kapsułą (8px + wewnętrzny padding treści).
     height:100svh: hero ZAWSZE domknięte tickerem; mieszczenie treści na niskich
     oknach zapewnia ciągła drabinka progów kompresji 820/740/660, a dopiero
     poniżej 580px wysokości wchodzi naturalny flow (bezpiecznik niżej) */
  @media (max-width:1024px){
    .hero-zone{ height:100svh; padding-top:calc(var(--nav-total) + 8px); }
  }
  .hero-glow{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(560px 460px at var(--gx,20%) var(--gy,20%), rgba(124,92,252,0.22), transparent 62%),
      radial-gradient(420px 360px at 82% 8%, rgba(23,184,172,0.14), transparent 60%),
      radial-gradient(460px 380px at 60% 92%, rgba(242,169,59,0.12), transparent 60%);
    transition:background .06s linear;
  }
  /* mobile: bez dolnej bursztynowej plamy (przycięta krawędzią sekcji tworzyła
     kremowy pas z twardą krawędzią nad tickerem, wyglądający jak zacięcie layoutu);
     poświaty tylko u góry, dół hero czysto przechodzi w ticker */
  @media (max-width:768px){
    .hero-glow{
      background:
        radial-gradient(420px 340px at 18% 6%, rgba(124,92,252,0.16), transparent 62%),
        radial-gradient(340px 280px at 88% 12%, rgba(23,184,172,0.10), transparent 60%);
    }
  }
  .hero-inner{ position:relative; z-index:1; padding:70px 0 56px; }
  /* na dotyku .hero-inner nie ma bocznego paddingu z .wrap (te same 0px co tu),
     więc treść i przyciski dotykałyby krawędzi ekranu bez tej reguły */
  @media (max-width:1024px){ .hero-inner{ padding:28px 24px 24px; } }

  .hero-grid{ display:grid; grid-template-columns:1.6fr 0.75fr; gap:40px; align-items:center; }
  /* 1024-1440: mockup ma być wyraźnie czytelny, więc dostaje więcej miejsca,
     a kolumny zbliżamy do siebie (zmniejszamy gap, nie mockup) */
  @media (min-width:901px) and (max-width:1440px){
    .hero-grid{ grid-template-columns:1.35fr 1fr; gap:26px; }
    .hero-grid .hero-show{ min-width:420px; }
  }
  @media (min-width:901px) and (max-width:1120px){
    .hero-grid{ grid-template-columns:1.15fr 1fr; gap:20px; }
    .hero-grid .hero-show{ min-width:400px; }
  }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:32px; justify-items:center; } }
  @media (max-width:640px){ .hero-grid{ gap:22px; } }
  @media (max-width:900px){ .hero-grid > div:first-child{ width:100%; max-width:100%; text-align:center; } }

  .hero h1{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.03em;
    /* duży także na 1024-1440 (na 1280px ~61px) */
    font-size:clamp(44px,4.8vw,76px); line-height:1.15; color:var(--text); max-width:920px; overflow:visible;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision;
    text-wrap:balance;
  }
  /* sterowane łamanie: dokładnie 3 linie jak na desktopie
     ("Tworzę strony," / "które [rotator]" / "naprawdę dobrze.") */
  .h1-nw{ white-space:nowrap; }
  /* wrapper ma stałą wysokość 1.15em (jak line-height nagłówka), więc nie rozpycha wiersza;
     overflow:visible pozwala ogonkom ą/ę wyjść poza pudełko bez ucięcia */
  .rotator{ display:inline-block; position:relative; font-weight:800; text-align:left; overflow:visible; height:1.15em; vertical-align:baseline; padding:0; }
  /* gradient MUSI być na spanie z tekstem: background-clip:text rodzica nie przycina się
     do tekstu potomka będącego inline-blockiem (słowo stawało się niewidoczne).
     padding daje tłu zapas na ogonki, ujemny margines zeruje jego wpływ na wysokość wiersza. */
  .rotator > span{
    display:inline-block; overflow:visible;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    padding-bottom:0.22em; margin-bottom:-0.22em;
    /* WYLACZNIE opacity: skala/translate/blur na elemencie z background-clip:text
       przenosza go do warstwy kompozytowej i rozmywaja litery subpikselowo */
    transition:opacity .4s ease;
    transform:none; will-change:auto;
  }
  .rotator span.out{ opacity:0; }

  .hero-sub{ color:var(--text-muted); font-size:18px; max-width:460px; margin-top:28px; }
  .hero-actions{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }
  @media (max-width:900px){
    .hero-sub{ margin-left:auto; margin-right:auto; }
    .hero-actions{ justify-content:center; }
  }
  /* telefony i tablety: lead mniejszy i węższy (max 2 linie), przyciski w jednej linii */
  @media (max-width:768px){
    .hero-sub{ font-size:14.5px; margin-top:16px; max-width:440px; }
    .hero-actions{ margin-top:22px; gap:10px; flex-wrap:nowrap; justify-content:center; }
  }
  /* łamanie przycisków do kolumny dopiero na bardzo wąskich ekranach */
  @media (max-width:369px){
    .hero-actions{ flex-wrap:wrap; }
  }
  /* nagłówek: 3 linie także na telefonie; 10vw na 360 daje 36px, a najdłuższe
     rotowane słowo ("zachwycają") musi się mieścić w wersie 2 (weryfikowane pomiarem) */
  @media (max-width:768px){
    .hero h1{ font-size:clamp(34px,10vw,52px); font-weight:800; }
  }
  /* --- kompresja hero na niskich ekranach TYLKO odstępami i skalą mockupu (typografia zostaje duża) --- */
  /* niskie okna: skracamy ODSTĘPY, mockup zostaje w pełnym rozmiarze (czytelność) */
  @media (max-height:860px) and (min-width:901px){
    .hero-sub{ margin-top:16px; }
    .hero-actions{ margin-top:24px; }
    .hero-inner{ padding:18px 0; }
  }
  @media (max-height:740px) and (min-width:901px){
    .hero-sub{ margin-top:10px; font-size:16.5px; }
    .hero-actions{ margin-top:16px; }
    .hero-inner{ padding:8px 0; }
    .ticker .group{ padding:13px 0; }
  }
  /* zabezpieczenie: bardzo niskie okna -> normalny flow zamiast nachodzenia */
  @media (max-height:620px) and (min-width:901px){
    .hero-zone{ height:auto; min-height:auto; overflow:visible; }
    .hero{ display:block; flex:none; }
  }
  /* --- CIĄGŁA drabinka kompresji hero na dotyku (odstępy; skala makiety niżej,
     w sekcji "index hero: pokaz strony", za bazami mobile 900px: kaskada) --- */
  @media (max-width:1024px) and (max-height:820px){
    .hero-inner{ padding-top:12px; padding-bottom:12px; }
    .hero-sub{ margin-top:8px; }
    .hero-actions{ margin-top:12px; }
  }
  @media (max-width:1024px) and (max-height:740px){
    .hero-sub{ font-size:14px; }
    .ticker .group{ padding:13px 0; }
  }
  @media (max-width:1024px) and (max-height:660px){
    .hero-inner{ padding-top:8px; padding-bottom:8px; }
    .hero-sub{ margin-top:6px; }
    .hero-actions{ margin-top:10px; }
    .ticker .group{ padding:12px 0; }
  }
  /* bezpiecznik: dopiero bardzo niskie okna (małe telefony landscape, klawiatura)
     -> naturalny flow zamiast miażdżenia treści */
  @media (max-width:1024px) and (max-height:580px){
    .hero-zone{ height:auto; min-height:auto; overflow:visible; }
    .hero{ display:block; flex:none; }
  }

  .btn{ font-family:var(--display); font-size:14.5px; font-weight:600; border-radius:13px; display:inline-flex; align-items:center; gap:12px; transition:box-shadow .25s ease, border-color .18s ease, transform .25s ease; will-change:transform; }
  .btn-primary{ background:var(--ink); color:#fff; padding:8px 8px 8px 24px; position:relative; }
  .btn-primary .icon{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; font-size:15px; transition:transform .25s ease, background .25s ease; }
  .btn-primary:hover{ box-shadow:0 10px 24px rgba(15,16,20,0.22); transform:translateY(-2px); }
  .btn-primary:hover .icon{ transform:translateX(5px); }
  .btn-secondary{ border:1.5px solid var(--border-strong); color:var(--text); padding:15px 26px; }
  .btn-secondary:hover{ border-color:var(--ink); }
  @media (max-width:640px){
    .btn{ font-size:12.5px; gap:9px; }
    .btn-primary{ padding:6px 6px 6px 18px; }
    .btn-primary .icon{ width:29px; height:29px; font-size:12.5px; }
    .btn-secondary{ padding:11px 20px; }
  }

  /* avatar: używany w chipie makiety hero (index) */
  .avatar{ width:56px; height:56px; border-radius:50%; flex-shrink:0; padding:2.5px; background:var(--grad); }
  .avatar-inner{ width:100%; height:100%; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:17px; color:var(--text-muted); overflow:hidden; }
  .avatar-inner img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

  /* ---------- MARQUEE TICKER ---------- */
  .ticker-outer{ position:relative; z-index:1; margin:0; flex-shrink:0; }
  /* zero marginesu nad tickerem na dotyku: przez margines prześwitywało tło hero
     jako jasny pas z twardą krawędzią nad ciemnym tickerem ("pasek przecięcia") */
  @media (max-width:900px){ .ticker-outer{ margin:0; } }
  @media (max-width:640px){ .ticker-outer{ margin:0; } }
  .ticker-wrap{
    background:linear-gradient(100deg, #0B0C10, #24272F 55%, #0B0C10);
    overflow:hidden;
  }
  .ticker{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
  .ticker .group{ display:flex; align-items:center; gap:30px; padding:22px 0; margin-right:30px; white-space:nowrap; flex-shrink:0; }
  @media (max-width:640px){ .ticker .group{ padding:14px 0; gap:20px; margin-right:20px; } }
  .tech-badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600; font-size:14.5px; color:#fff; opacity:0.94; }
  .tech-badge img{ width:22px; height:22px; display:block; flex-shrink:0; }
  .ticker .sep{ color:#454A54; font-family:var(--mono); margin:0 4px; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-25%); } }

  /* ---------- SECTION generic ---------- */
  section{ padding:96px 0; border-top:1px solid var(--border); position:relative; overflow:hidden; }
  @media (max-width:640px){ section{ padding:64px 0; } }
  .section-head{ margin-bottom:56px; max-width:640px; position:relative; z-index:1; }
  .section-title{ font-family:var(--headline); font-size:clamp(30px,3.8vw,46px); font-weight:700; letter-spacing:-0.02em; line-height:1.18; }
  /* index: tytuł sekcji usług zawsze w jednej linii na desktopie i tablecie */
  @media (min-width:769px){ #uslugi .section-title{ white-space:nowrap; font-size:clamp(26px,3.1vw,42px); } }
  .section-desc{ color:var(--text-muted); margin-top:14px; font-size:16px; max-width:520px; }
  @media (max-width:640px){
    .section-head{ text-align:center; margin-left:auto; margin-right:auto; }
    .section-desc{ margin-left:auto; margin-right:auto; }
    .about-link{ margin-left:auto; margin-right:auto; }
  }

  /* ---------- ABOUT (ciemny panel „kim jestem") ---------- */
  .kim-panel{
    position:relative; overflow:hidden; z-index:1;
    background:var(--ink); border-radius:26px; padding:52px 54px;
    box-shadow:0 40px 80px -40px rgba(15,16,20,0.35);
  }
  @media (max-width:640px){ .kim-panel{ padding:36px 26px; } }
  .kim-glow{
    position:absolute; width:460px; height:460px; border-radius:50%; right:-160px; top:-190px;
    background:radial-gradient(circle, rgba(124,92,252,0.35), rgba(23,184,172,0.12) 55%, transparent 72%);
    pointer-events:none;
  }
  .kim-inner{ position:relative; z-index:1; }
  .kim-id{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
  .kim-avatar{
    width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0;
    box-shadow:0 0 0 2px rgba(255,255,255,0.25);
  }
  .kim-id-label{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em;
    line-height:1.5; color:#8A90A0;
  }
  .kim-lede{
    font-family:var(--headline); font-size:clamp(24px,3.4vw,40px); font-weight:700;
    line-height:1.2; color:#fff; max-width:640px;
  }
  .kim-foot{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
    margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.1);
  }
  .kim-chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .kim-chips span{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color:#D6D9E0; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.05);
    border-radius:100px; padding:7px 14px;
  }
  .kim-link{
    display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
    font-family:var(--display); font-weight:600; font-size:15px; color:#fff;
    background-image:var(--grad); background-size:0% 2px; background-position:0 100%;
    background-repeat:no-repeat; padding-bottom:3px; transition:background-size .3s ease;
  }
  .kim-link:hover{ background-size:100% 2px; }
  .kim-link .arrow{ transition:transform .25s ease; }
  .kim-link:hover .arrow{ transform:translateX(4px); }
  @media (max-width:640px){ .kim-foot{ flex-direction:column; align-items:flex-start; } }

  /* ---------- PLAKIETKA ---------- */
  .badge-wrap{ position:relative; display:flex; justify-content:center; visibility:hidden; }
  .badge{
    width:304px; position:absolute; left:0; top:0; z-index:91;
    cursor:grab; touch-action:none; user-select:none;
    will-change:transform; transform-origin:top center;
  }
  .badge.dragging{ cursor:grabbing; }
  .badge.js-ready{ visibility:visible; }
  .cord-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:90; overflow:visible; }
  .badge-photo{
    aspect-ratio:4/5; background:linear-gradient(155deg,#F3EFE6,#E9F2F0);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .badge-photo img{ width:100%; height:100%; object-fit:cover; }
  .badge-photo .placeholder-initials{ font-family:var(--headline); font-size:72px; font-weight:700; color:#DCD5C4; }
  .badge-caption{ padding:16px 18px 20px; text-align:center; border-top:1px dashed var(--border-strong); }
  .badge-caption strong{ font-family:var(--display); font-size:15.5px; font-weight:600; color:var(--text); display:block; }
  .badge-caption span{ font-family:var(--mono); font-size:12px; color:var(--text-muted); }
  .about-link{ font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--text); display:inline-flex; align-items:center; gap:8px; margin-top:10px; }
  .about-link .arrow{ transition:transform .2s ease; }
  .about-link:hover .arrow{ transform:translateX(4px); }

  /* ---------- KONTAKT ---------- */
  .contact{
    background:var(--ink); color:#F2F2ED; border-top:none; border-radius:32px; margin:0 auto 64px; max-width:1180px;
    padding:88px 56px; position:relative; overflow:hidden; z-index:1;
    text-align:center; display:flex; flex-direction:column; align-items:center;
  }
  .contact-glow{ position:absolute; inset:0; background:radial-gradient(600px 400px at 85% 20%, rgba(124,92,252,0.35), transparent 60%), radial-gradient(500px 380px at 10% 90%, rgba(23,184,172,0.28), transparent 60%); }
  @media (max-width:640px){ .contact{ padding:44px 22px; border-radius:20px; margin:0 16px 40px; width:auto; } }
  .contact-title{ position:relative; font-family:var(--mono); font-size:13px; color:#8FE9DE; margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:2px; }
  .contact-title .dim{ color:#6B7280; }
  .contact h2{ position:relative; font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.2; color:#fff; white-space:nowrap; font-size:clamp(13px,6vw,44px); }
  @media (max-width:640px){ .contact h2{ font-size:26px; white-space:normal; max-width:340px; margin:0 auto; } }
  @media (max-width:400px){ .contact h2{ font-size:22px; max-width:280px; } }
  @media (max-width:400px){ .contact{ padding:36px 16px; margin:0 10px 32px; } }
  .contact-cta{
    position:relative; margin-top:48px; display:inline-flex; align-items:center; gap:20px;
    background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.16); border-radius:100px;
    padding:12px 12px 12px 28px; transition:border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .contact-cta:hover{ border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.1); transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(0,0,0,0.4); }
  .contact-cta-icon{ font-size:18px; }
  .contact-cta-text{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
  .contact-cta-text strong{ font-family:var(--display); font-size:15.5px; font-weight:600; color:#fff; }
  .contact-cta-text span{ font-family:var(--mono); font-size:12.5px; color:#9AA0AC; margin-top:2px; }
  .contact-cta-arrow{
    width:44px; height:44px; border-radius:50%; background:var(--grad); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
    transition:transform .25s ease;
  }
  .contact-cta:hover .contact-cta-arrow{ transform:translateX(4px); }
  @media (max-width:520px){
    .contact-cta{ padding:10px 10px 10px 20px; gap:14px; }
    .contact-cta-text strong{ font-size:14px; }
  }

  /* mobile: kompaktowy pas CTA na wszystkich stronach z .contact (faq, podstrony usług);
     index ma własne, bardziej szczegółowe reguły przez #kontakt (wyższa specyficzność) */
  @media (max-width:768px){
    .contact{ padding:36px 24px; }
    .contact h2{ font-size:clamp(24px,6.5vw,28px); }
    .contact-cta{ margin-top:24px; }
  }

  /* index: //kontakt ma być zwięzłym pasem zachęty na mobile, nie pełnym ekranem.
     Reguły wyskopowane przez #kontakt (unikalny na index.html), więc .contact/.contact-cta
     na pozostałych 16 stronach (usługi, faq) zostają bez zmian. */
  @media (max-width:768px){
    #kontakt{ padding-top:40px; }
    #kontakt .contact{ padding:26px 22px; }
    #kontakt .contact h2{ font-size:clamp(26px,7vw,30px); }
    #kontakt .contact-cta{ margin-top:22px; padding:12px 12px 12px 22px; }
    #kontakt .contact-cta-text strong{ font-size:14px; }
  }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--ink); color:#C7CBD6; position:relative; overflow:hidden; }
  footer::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(124,92,252,0.5), rgba(23,184,172,0.5), rgba(242,169,59,0.5), transparent); }
  .footer-grid{ position:relative; display:grid; grid-template-columns:1.1fr 0.6fr 1.3fr 1fr; gap:48px; max-width:1180px; margin:0 auto; padding:88px 32px 52px; }
  /* 4 kolumny mieszczą się dopiero na szerokim desktopie: niżej łamiemy na 2, potem na 1 */
  @media (max-width:1080px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:44px 40px; } }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:40px; text-align:center; justify-items:center; } }
  @media (max-width:520px){ .footer-grid{ padding:56px 20px 32px; } }
  @media (max-width:760px){
    .footer-brand{ display:flex; flex-direction:column; align-items:center; width:100%; }
    .footer-contact-list{ align-items:center; width:100%; }
    .footer-contact-list li{ justify-content:center; width:100%; white-space:nowrap; }
  }
  .footer-brand .logo{ color:#fff; font-size:24px; }
  .footer-brand p{ color:#8791A0; font-size:16px; max-width:270px; margin-top:16px; }
  @media (max-width:760px){ .footer-brand p{ margin-left:auto; margin-right:auto; } }
  .footer-social{ display:flex; gap:12px; margin-top:24px; }
  @media (max-width:760px){ .footer-social{ justify-content:center; } }
  .footer-social a{ width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; color:#8A90A0; transition:border-color .2s ease, color .2s ease, transform .2s ease; }
  .footer-social a svg{ width:16px; height:16px; }
  .footer-social a:hover{ border-color:var(--violet); color:#fff; transform:translateY(-2px); }
  .footer-col h4{ font-family:var(--mono); font-size:12.5px; color:#6B7280; font-weight:500; margin-bottom:20px; letter-spacing:0.03em; }
  .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:15px; }
  .footer-col a{ font-family:var(--display); font-size:15.5px; color:#8A90A0; display:inline-block; transition:color .15s ease, transform .15s ease; }
  .footer-col a:hover{ color:#fff; transform:translateX(4px); }
  /* kolumna "Usługi": JEDNA pionowa kolumna, identycznie jak nawigacja obok
     (żadnych własnych reguł: ul.footer-serv dziedziczy flex-column + gap z .footer-col ul) */
  .footer-contact-list li{ display:flex; align-items:center; gap:11px; }
  @media (max-width:760px){ .footer-contact-list li{ justify-content:center; } }
  .footer-contact-list .ic{ flex-shrink:0; color:#5A606E; width:16px; height:16px; }
  .footer-contact-list a{ font-family:var(--mono); font-size:14px; color:#8A90A0; line-height:1.4; transition:color .15s ease; }
  .footer-contact-list a:hover{ color:#fff; transform:none; }
  /* "Nowy Sacz, Malopolska" to span, nie odnosnik: po usunieciu dokladnego
     adresu nie ma dokad prowadzic. Wyglada i reaguje na najechanie jak
     pozostale pozycje, zeby wiersz nie odstawal, ale klikniecie nic nie robi
     i kursor pozostaje zwykly. */
  .footer-contact-list span{ font-family:var(--mono); font-size:14px; color:#8A90A0; line-height:1.4; transition:color .15s ease; }
  .footer-contact-list li:hover > span{ color:#fff; }
  .footer-map{
    margin-top:20px; width:100%; max-width:280px; aspect-ratio:16/11; border-radius:12px;
    overflow:hidden; border:1px solid rgba(255,255,255,0.12); filter:grayscale(0.15) contrast(1.05);
  }
  .footer-map iframe{ width:100%; height:100%; border:0; display:block; }
  @media (min-width:1180px){ .footer-map{ max-width:100%; } }
  @media (max-width:760px){ .footer-map{ margin:20px auto 0; } }
  @media (max-width:480px){ .footer-map{ max-width:240px; aspect-ratio:4/3; } }
  .footer-bottom{ position:relative; border-top:1px solid rgba(255,255,255,0.08); max-width:1180px; margin:0 auto; padding:22px 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:12.5px; color:#6B7280; }
  @media (max-width:640px){ .footer-bottom{ padding:20px; justify-content:center; text-align:center; } }
  /* Dane sprzedawcy pod prawami autorskimi. Drobne, bo to informacja
     formalna, a nie element sprzedazowy, ale musi byc czytelna: klient
     firmowy szuka jej przed wyslaniem zapytania. */
  /* Kolor jasniejszy niz reszta stopki celowo: #6B7280 daje na tle #0F1014
     kontrast 3,93:1, przy wymaganych przez WCAG AA 4,5:1 dla zwyklego tekstu.
     #8A90A0 daje 5,96:1. Dane sprzedawcy to informacja wymagana, wiec nie
     moze byc mniej czytelna niz reszta strony. */
  .footer-sprzedawca{
    display:block; width:100%; order:3; margin-top:2px;
    font-family:var(--mono); font-size:11px; line-height:1.6; color:#8A90A0;
    overflow-wrap:anywhere;
  }
  .footer-sprzedawca a{ color:#8A90A0; text-decoration:underline; text-underline-offset:2px; }
  .footer-sprzedawca a:hover{ color:#C7CBD6; }
  @media (max-width:640px){ .footer-sprzedawca{ text-align:center; } }
  .footer-legal{ display:flex; gap:22px; }
  .footer-legal a{ color:#6B7280; transition:color .15s ease; }
  .footer-legal a:hover{ color:#C7CBD6; }

  /* ---------- FLOATING WIDGET ---------- */
  .float-widget{ position:fixed; bottom:24px; right:24px; z-index:200; background:rgba(255,255,255,0.75); backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:18px; box-shadow:0 20px 50px -18px rgba(15,16,20,0.3); padding:16px 18px; display:flex; align-items:center; gap:12px; transition:transform .25s ease, box-shadow .2s ease, opacity .25s ease; }
  .float-widget.hidden{ opacity:0; transform:translateY(16px); pointer-events:none; }
  .float-widget:hover{ transform:translateY(-4px); }
  .float-widget .emoji{ font-size:20px; }
  .float-widget .txt{ font-family:var(--display); font-size:13px; }
  .float-widget .txt strong{ display:block; font-size:13.5px; }
  .float-widget .txt span{ color:var(--text-muted); font-size:12px; }
  @media (max-width:600px){ .float-widget{ right:14px; bottom:14px; padding:12px 14px; } .float-widget .txt span{ display:none; } }
  /* ---------- CUSTOM CURSOR ---------- */
  @media (hover:hover) and (pointer:fine){
    body{ cursor:none; }
    a, button, .tech-badge{ cursor:none; }
    /* wyjątki: tam chcemy wskaźnik systemowy zamiast własnej kropki.
       #badge * jest konieczne, bo cursor dziedziczy się i potomki przywracałyby "none" */
    #badge, #badge *, #badge svg, #badge img{ cursor:grab !important; }
    #badge.dragging, #badge.dragging *{ cursor:grabbing !important; }
    .footer-map, .footer-map *{ cursor:auto !important; }
    /* pola formularza: kropka zamiast systemowego beama (UA daje im cursor:text,
       którego dziedziczone body{cursor:none} nie nadpisuje); caret w polu ZOSTAJE */
    input, textarea, select, label{ cursor:none; }
    input, textarea{ caret-color:var(--ink); }
  }
  /* ═══════════ PASEK O CIASTECZKACH (lewy dolny róg) ═══════════
     Strona NIE używa ciasteczek analitycznych ani marketingowych: własny
     licznik odwiedzin nie zakłada żadnego ciasteczka, a jedyne, jakie
     powstaje, to techniczne ciasteczko sesji chroniące formularz kontaktowy
     przed nadużyciem. Dlatego pasek informuje, a nie wymusza zgody, i nie ma
     przycisku odrzucenia: nie ma czego odrzucić.

     Decyzja o zamknięciu zapisywana jest w localStorage, nie w ciasteczku,
     żeby sam pasek nie zakładał tego, o czym opowiada. */
  .ck-bar{
    position:fixed; left:24px; bottom:24px; z-index:400; width:min(370px, calc(100vw - 48px));
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--border); border-radius:20px;
    box-shadow:0 30px 70px -28px rgba(15,16,20,0.38);
    padding:20px 22px 18px;
    opacity:0; transform:translateY(18px) scale(0.98);
    transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  }
  .ck-bar.show{ opacity:1; transform:none; }
  .ck-bar.leaving{ opacity:0; transform:translateY(14px) scale(0.98); }
  .ck-bar[hidden]{ display:none; }
  /* Nagłówek w czcionce monospace, wielkimi literami, z rozstrzeleniem:
     ta sama maniera co .eyebrow w resztach sekcji, więc pasek wygląda jak
     część strony, a nie jak wtrącony gotowy komponent. */
  .ck-head{
    display:flex; align-items:center; gap:10px; margin-bottom:12px;
    font-family:var(--mono); font-weight:500; font-size:11px;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
  }
  /* Emotka ciastka ma wlasne kolory, wiec nie siedzi w ciemnym kwadracie:
     ten byl potrzebny wczesniejszej ikonie, rysowanej jedna linia. */
  .ck-head .ck-ico{
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  /* line-height 1, zeby emotka nie podnosila calego wiersza naglowka.
     Rodzic ma litery rozstrzelone przez letter-spacing, a to doklada odstep
     TAKZE po emotce, wiec tutaj go zerujemy. */
  .ck-emoji{
    font-size:25px; line-height:1; letter-spacing:0;
    font-family:'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  }
  /* Treść w czcionce nagłówkowej: większa, o wyraźniejszym rysunku liter,
     żeby pasek czytało się od razu, a nie jak drobny druk. */
  .ck-txt{
    font-family:var(--headline); font-size:14px; line-height:1.6;
    letter-spacing:-0.01em; color:var(--text);
  }
  .ck-txt strong{ font-weight:700; }
  .ck-txt a{ color:var(--violet); text-decoration:underline; text-underline-offset:2px; }
  .ck-actions{ display:flex; align-items:center; gap:10px; margin-top:15px; }
  .ck-ok{
    font-family:var(--display); font-weight:600; font-size:13px; color:#fff;
    background:var(--ink); border:0; border-radius:11px; padding:11px 20px;
    cursor:pointer; transition:background .18s ease, transform .18s ease;
  }
  .ck-ok:hover{ background:#000; transform:translateY(-1px); }
  .ck-ok:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
  /* Na telefonie pasek jest skromniejszy: mniejsza emotka, ciaśniejsze
     odstępy i drobniejszy tekst, żeby nie zasłaniał pół ekranu treści. */
  @media (max-width:640px){
    .ck-bar{ left:10px; right:10px; bottom:10px; width:auto; padding:12px 14px 11px; border-radius:16px; }
    .ck-head{ margin-bottom:7px; font-size:10px; }
    .ck-emoji{ font-size:19px; }
    .ck-txt{ font-size:12.5px; line-height:1.5; }
    .ck-actions{ margin-top:10px; }
    .ck-ok{ font-size:12px; padding:8px 16px; border-radius:9px; }
  }
  /* Gdy karta z plakietką siedzi w tym samym narożniku, pasek idzie wyżej. */
  @media (max-height:560px){ .ck-bar{ bottom:12px; } }

  .cursor-shape{
    position:fixed; top:0; left:0; z-index:999; pointer-events:none;
    width:9px; height:9px; background:var(--ink); border:1.5px solid var(--ink); border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .12s ease, height .12s ease, background .12s ease, border-color .12s ease, opacity .15s ease;
  }
  .cursor-shape.hidden{ opacity:0; }
  .cursor-shape.hover{
    width:26px; height:26px; background:transparent; border-color:var(--violet);
  }
  .cursor-shape.on-dark{ background:#fff; border-color:#fff; }
  .cursor-shape.on-dark.hover{ background:transparent; border-color:var(--cyan); }
  @media (hover:none), (pointer:coarse){ .cursor-shape{ display:none; } }

  /* ═══════════ PODSTRONA: O MNIE (klasy .ab-) — v2 „wejściówka" ═══════════ */

  /* --- hero --- */
  .ab-hero{ padding:var(--nav-total) 0 56px; min-height:100svh; display:flex; align-items:flex-start; overflow:visible; }
  /* align-items:start -> kolumna tekstowa startuje od góry siatki; JS nadaje jej margin-top,
     tak by jej środek pionowy pokrył się ze środkiem ciemnego panelu za wizytówką */
  .ab-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; max-width:1240px; margin:0 auto; }
  @media (max-width:1024px){ .ab-hero-grid{ gap:48px; } }
  @media (max-width:900px){ .ab-hero-grid{ grid-template-columns:1fr; gap:24px; } }
  /* zasada A: pierwsza sekcja z wyraźnym zapasem pod pływającą kapsułą;
     overflow:hidden przycina poświaty (ab-hero-glow/aurora szersze niż viewport
     dawały poziomy scroll); desktop musi zostać visible dla karty na smyczy */
  @media (max-width:900px){ .ab-hero{ min-height:0; padding:calc(var(--nav-total) + 16px) 0 32px; overflow:hidden; } }
  .ab-title{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.03em;
    font-size:clamp(34px,4.6vw,58px); line-height:1.18; color:var(--text);
  }
  /* powiększony tytuł tylko w hero o-mnie (nie na innych podstronach używających .ab-title) */
  .ab-hero .ab-title{ font-size:clamp(40px,5.4vw,64px); line-height:1.16; }
  @media (max-width:1024px){ .ab-hero .ab-title{ font-size:clamp(34px,5vw,52px); } }
  .ab-lead{ color:var(--text-muted); font-size:17px; max-width:560px; margin-top:28px; line-height:1.75; }
  /* --- o mnie: rząd przycisków + jeden rząd 4 ikon wycentrowany pod nimi (szkic klienta) --- */
  .ab-cta-col{ width:fit-content; display:flex; flex-direction:column; gap:22px; margin-top:40px; }
  .ab-cta-buttons{ display:flex; gap:16px; }
  .ab-cta-buttons .btn{ font-size:15.5px; }
  .ab-cta-buttons .btn-primary{ padding:10px 10px 10px 30px; }
  .ab-cta-buttons .btn-primary .icon{ width:40px; height:40px; }
  .ab-cta-buttons .btn-secondary{ padding:16px 30px; }
  /* width:100% -> center liczy się względem łącznej szerokości OBU przycisków */
  .ab-soc-row{ display:flex; gap:14px; justify-content:center; width:100%; }
  @media (max-width:900px){
    .ab-hero-copy{ text-align:center; }
    .ab-lead{ margin-left:auto; margin-right:auto; }
    .ab-cta-col{ margin-inline:auto; }
    .ab-cta-buttons{ justify-content:center; flex-wrap:wrap; }
  }
  .ab-soc{
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--border-strong); color:var(--text);
    transition:transform .22s cubic-bezier(.16,1,.3,1), background .22s ease, color .22s ease, border-color .22s ease;
  }
  .ab-soc:hover{ background:var(--ink); border-color:var(--ink); color:#fff; transform:translateY(-4px); }
  /* telefony: zwarta kolumna hero o-mnie (równe odstępy 24-28px), nazwisko 800,
     bez niebiesko-turkusowej poświaty (aurora/glow tylko na desktopie) */
  @media (max-width:768px){
    .ab-aurora, .ab-hero-glow{ display:none; }
    .ab-hero .ab-title{ font-weight:800; }
    .ab-lead{ font-size:14.5px; line-height:1.7; margin-top:24px; }
    /* margines dividera nadpisany NIŻEJ w pliku, za jego bazą (kaskada) */
    .ab-cta-col{ margin-top:0; gap:24px; width:100%; max-width:340px; }
    .ab-cta-buttons{ gap:10px; }
    .ab-cta-buttons .btn{ font-size:14px; }
    .ab-cta-buttons .btn-primary{ padding:8px 8px 8px 22px; }
    .ab-cta-buttons .btn-primary .icon{ width:34px; height:34px; }
    .ab-cta-buttons .btn-secondary{ padding:12px 22px; }
    .ab-soc{ width:44px; height:44px; }
  }

  /* --- o mnie: grafika tła za wizytówką --- */
  .ab-badge-back{
    position:absolute; z-index:0; pointer-events:none; visibility:visible;
    background:var(--ink); border-radius:30px; overflow:hidden;
    box-shadow:0 30px 60px -30px rgba(15,16,20,0.5);
  }
  .abb-glow-a{
    position:absolute; width:300px; height:300px; border-radius:50%; left:-90px; bottom:-120px;
    background:radial-gradient(circle, rgba(124,92,252,0.5), rgba(23,184,172,0.18) 55%, transparent 72%);
  }
  .abb-glow-b{
    position:absolute; width:260px; height:260px; border-radius:50%; right:-80px; top:-100px;
    background:radial-gradient(circle, rgba(23,184,172,0.3), rgba(23,184,172,0.1) 50%, transparent 72%);
  }
  .ab-badge-back::after{
    content:''; position:absolute; right:22px; bottom:20px; width:36px; height:8px; border-radius:100px;
    background:var(--grad); opacity:0.9;
  }

  /* --- o mnie: kolejność kolumn hero na wąskich ekranach --- */
  @media (max-width:860px){
    .ab-hero-copy{ order:1; }
    .badge-wrap{ order:2; }
  }

  /* --- o mnie: tryb bez fizyki (mobile / dotyk) — statyczna karta na panelu ---
     spięte z klasą body.no-physics, żeby nie kolidowało z trybem fizyki (desktop) */
  body.no-physics #cordOverlay{ display:none; }
  /* padding #badgeWrap steruje równą 16px obwódką panelu wokół karty */
  body.no-physics #badgeWrap{
    position:relative; width:fit-content; margin:26px auto 0; padding:16px;
    height:auto !important; visibility:visible;
  }
  /* statyczna, PROSTA i mała karta wycentrowana NA panelu
     (relative + z-index:1, by leżała nad panelem z-index:0) */
  body.no-physics #badge{ position:relative; z-index:1; margin:0; width:180px; transform:none; }
  /* panel wypełnia cały #badgeWrap (łącznie z paddingiem), zachowując pełny wygląd desktopowy */
  body.no-physics .ab-badge-back{ position:absolute; inset:0; width:auto; height:auto; border-radius:20px; z-index:0; }
  /* proporcje wnętrza karty przy szerokości 180px */
  body.no-physics .badge .badge-caption strong{ font-size:14px; }
  body.no-physics .badge-head-brand{ font-size:11px; }
  body.no-physics .badge .badge-caption span{ font-size:9.5px; }
  body.no-physics .badge .badge-caption{ padding:12px 14px 10px; }
  body.no-physics .badge-id{ font-size:9px; }
  body.no-physics .badge-barcode{ max-width:72px; height:20px; }
  body.no-physics .badge-slot{ width:46px; height:8px; margin-top:10px; }
  body.no-physics .badge-clip-metal{ width:42px; height:24px; }
  body.no-physics .badge-foot{ padding:0 14px 12px; }

  /* --- IDENTYFIKATOR (karta eventowa) --- */
  .badge-clip{ display:flex; justify-content:center; margin-bottom:-4px; position:relative; z-index:2; }
  .badge-clip-metal{
    width:54px; height:30px; border-radius:7px 7px 10px 10px;
    background:linear-gradient(180deg,#F2F0EA 0%,#C9C6BA 45%,#A5A192 55%,#D9D6CB 100%);
    border:1px solid #97937f; position:relative;
    box-shadow:0 3px 6px rgba(15,16,20,0.25);
  }
  .badge-clip-metal::after{
    content:''; position:absolute; left:50%; top:55%; transform:translate(-50%,-50%);
    width:26px; height:5px; border-radius:3px; background:rgba(15,16,20,0.5);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.6);
  }
  .badge-card{
    background:#fff; border-radius:16px; border:1px solid var(--border);
    box-shadow:0 34px 64px -26px rgba(15,16,20,0.38);
    overflow:hidden; position:relative;
  }
  .badge-slot{
    display:block; width:60px; height:10px; border-radius:6px;
    background:var(--bg-elevated); box-shadow:inset 0 1.5px 3px rgba(15,16,20,0.28);
    margin:14px auto 0;
  }
  .badge-head{
    display:flex; align-items:center; justify-content:center;
    padding:14px 19px 12px; border-bottom:1px solid var(--border);
  }
  .badge-head-brand{ font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:0.05em; color:var(--ink); }
  .badge-head-brand span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .badge .badge-photo{
    aspect-ratio:1/1; background:linear-gradient(155deg,#F3EFE6,#E9F2F0);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    border-bottom:1px solid var(--border);
  }
  .badge .badge-photo img{ width:100%; height:100%; object-fit:cover; }
  .badge .badge-photo .placeholder-initials{ font-family:var(--headline); font-size:74px; font-weight:700; color:#DCD5C4; }
  .badge .badge-caption{ padding:16px 19px 14px; text-align:left; border-top:none; }
  .badge .badge-caption strong{ font-family:var(--display); font-size:19px; font-weight:700; color:var(--text); display:block; letter-spacing:-0.01em; }
  .badge .badge-caption span{ font-family:var(--mono); font-size:13px; color:var(--text-muted); }
  .badge-foot{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:0 19px 16px;
  }
  .badge-id{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); letter-spacing:0.06em; }
  .badge-barcode{
    flex:1; max-width:128px; height:30px; border-radius:3px;
    background:repeating-linear-gradient(90deg,
      var(--ink) 0 2px, transparent 2px 4px,
      var(--ink) 4px 5px, transparent 5px 9px,
      var(--ink) 9px 12px, transparent 12px 14px,
      var(--ink) 14px 15px, transparent 15px 18px);
    opacity:0.85;
  }
  /* napis na smyczy */
  .cord-text{
    font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.22em;
    fill:rgba(255,255,255,0.85); text-transform:uppercase;
  }

  /* --- motto --- */
  .ab-motto-sec{ padding:120px 0; }
  @media (max-width:640px){ .ab-motto-sec{ padding:80px 0; } }
  .ab-motto{
    font-family:var(--headline); font-weight:800; letter-spacing:-0.03em;
    font-size:clamp(34px,6vw,80px); line-height:1.14; text-align:center; color:var(--text);
  }
  .ab-motto s{ text-decoration-color:var(--rose); text-decoration-thickness:4px; color:var(--text-dim); }

  /* ---------- FAQ (akordeon) ---------- */
  /* wyśrodkowany nagłówek sekcji (FAQ, usługi, standard) */
  .head-center{ text-align:center; margin-left:auto; margin-right:auto; }
  .head-center .eyebrow{ justify-content:center; }
  .head-center .section-desc{ margin-left:auto; margin-right:auto; }
  /* zdanie CTA w leadzie: osobna, pełna linia */
  .lead-cta{ display:block; margin-top:6px; white-space:nowrap; }
  @media (max-width:560px){ .lead-cta{ white-space:normal; } }
  .faq-list{ max-width:760px; margin:8px auto 64px; border-top:1px solid var(--border); position:relative; z-index:1; }
  @media (max-width:640px){ .faq-list{ margin-bottom:32px; } }
  .faq-item{ border-bottom:1px solid var(--border); }
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:26px 6px; background:none; border:0; cursor:pointer; text-align:left;
    font-family:var(--headline); font-size:19px; font-weight:600; letter-spacing:-0.01em;
    color:var(--text); transition:color .2s ease;
  }
  @media (max-width:640px){ .faq-q{ font-size:17px; padding:22px 2px; } }
  .faq-q:hover{ color:var(--violet); }
  .faq-ic{ position:relative; width:20px; height:20px; flex-shrink:0; transition:transform .3s cubic-bezier(.16,1,.3,1); }
  .faq-ic::before, .faq-ic::after{
    content:''; position:absolute; background:var(--text-muted); border-radius:2px; transition:background .2s ease;
  }
  .faq-ic::before{ left:0; top:9px; width:20px; height:2px; }
  .faq-ic::after{ left:9px; top:0; width:2px; height:20px; }
  .faq-q[aria-expanded="true"] .faq-ic{ transform:rotate(45deg); }
  .faq-q[aria-expanded="true"] .faq-ic::before,
  .faq-q[aria-expanded="true"] .faq-ic::after{ background:var(--violet); }
  .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
  .faq-q[aria-expanded="true"] + .faq-a{ grid-template-rows:1fr; }
  .faq-a-inner{ overflow:hidden; }
  .faq-a-inner p{ color:var(--text-muted); font-size:15px; line-height:1.7; padding:0 6px 26px; max-width:680px; }
  /* lead FAQ: rozmiar tu, nie inline w HTML (mobile musi go móc nadpisać) */
  .us-hero .section-desc{ font-size:17px; }
  /* telefony: nagłówek od 30px, lead 14.5px, akordeon kompaktowy (pytanie 16px / odpowiedź 14.5px) */
  @media (max-width:640px){
    .us-hero .ab-title{ font-size:clamp(30px,8.5vw,40px); }
    /* lead: blok wycentrowany (margin auto z .head-center), ale linie zaczynają się
       RÓWNO od lewej, bez optycznych wcięć centrowanego tekstu */
    .us-hero .section-desc{ font-size:14.5px; text-align:left; }
    .faq-q{ font-size:16px; padding:18px 2px; }
    .faq-a-inner p{ font-size:14.5px; padding:0 2px 18px; }
  }

  /* ---------- FAQ: aurora mesh w tle strony ---------- */
  /* warstwa fixed: plamy stoja nieruchomo wzgledem OKNA podczas scrolla; bez animacji dryfu */
  .faq-aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:paint; }
  .fa-blob{
    position:absolute; border-radius:50%; opacity:0.22;
    filter:blur(40px); transform:translateZ(0);
  }
  /* plamy tylko przy krawędziach niżej (okolica nagłówka zostaje czysta) */
  .fa-b{
    width:520px; height:520px; right:-190px; top:40%;
    background:radial-gradient(circle, var(--cyan) 0%, var(--cyan) 25%, transparent 75%);
  }
  .fa-c{
    width:500px; height:500px; left:-200px; bottom:-170px;
    background:radial-gradient(circle, var(--amber) 0%, var(--amber) 25%, transparent 75%);
  }
  @media (max-width:640px){
    .fa-b{ width:300px; height:300px; right:-150px; }
    .fa-c{ width:280px; height:280px; left:-150px; bottom:-110px; }
  }

  /* ═══════════ PODSTRONA: KONTAKT (klasy .ct-) ═══════════ */
  /* aurora mesh w tle: warstwa fixed, plamy nieruchome wzgledem okna, bez animacji dryfu */
  .ct-aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:paint; }
  .ctb-blob{
    position:absolute; border-radius:50%; opacity:0.26;
    filter:blur(40px); transform:translateZ(0);
  }
  /* panel formularza zasłania środek ekranu, więc rdzenie plam celują w widoczne marginesy:
     prawa krawędź (za formularzem), lewa krawędź (za ciemnym panelem) i pas nad splitem */
  .ctb-a{
    width:560px; height:560px; right:-280px; top:26%;
    background:radial-gradient(circle, var(--violet) 0%, var(--violet) 25%, transparent 75%);
  }
  .ctb-b{
    width:520px; height:520px; left:-270px; top:34%;
    background:radial-gradient(circle, var(--cyan) 0%, var(--cyan) 25%, transparent 75%);
  }
  .ctb-c{
    width:520px; height:520px; left:14%; top:-320px;
    background:radial-gradient(circle, var(--amber) 0%, var(--amber) 25%, transparent 75%);
  }
  @media (max-width:640px){
    .ctb-a{ width:400px; height:400px; right:-220px; }
    .ctb-b{ width:380px; height:380px; left:-210px; }
    .ctb-c{ width:380px; height:380px; top:-240px; }
  }

  .ct-hero{ padding:calc(var(--nav-total) + 32px) 0 40px; min-height:100svh; display:flex; align-items:center; }
  .ct-hero .wrap{ width:100%; }
  @media (max-width:860px){ .ct-hero{ min-height:0; padding:calc(var(--nav-total) + 8px) 0 56px; } }
  @media (max-width:640px){ .ct-hero{ padding:calc(var(--nav-total) + 8px) 0 56px; } }
  .ct-note{ font-family:var(--mono); font-size:11.5px; color:var(--text-muted); text-align:center; margin-top:14px; }
  /* Komunikat pod polem: krótko, na czerwono, wyrównany do lewej krawędzi pola. */
  .ct-err{
    display:block; margin:6px 0 0 2px; font-family:var(--mono); font-size:11px;
    line-height:1.5; color:var(--rose); overflow-wrap:anywhere;
  }
  /* gwiazdka pola obowiązkowego w pływającej etykiecie + dopisek pod formularzem */
  .ct-fl .req{ color:var(--violet); margin-left:2px; }
  .ct-req-note{ font-family:var(--mono); font-size:11.5px; color:var(--text-muted); text-align:center; margin-top:6px; }
  .ct-note.ok{ color:var(--cyan); }
  .ct-note.err{ color:var(--rose); }

  /* ═══════════ .us-hero: nagłówek strony w stylu podstron (używa go faq.html) ═══════════ */
  .us-hero{ padding:calc(var(--nav-total) + 60px) 0 130px; }
  @media (max-width:640px){ .us-hero{ padding:calc(var(--nav-total) + 26px) 0 80px; } }

  /* ═══════════ PODSTRONA: USŁUGI (interaktywny wybór kategorii, klasy .uc-) ═══════════ */

  /* --- hero (krótkie, ~34svh; razem z kolumnami domyka pierwszy ekran) --- */
  .uc-hero{
    position:relative; border-top:none; overflow:hidden;
    min-height:34svh; display:flex; align-items:flex-end; text-align:center;
    padding:calc(var(--nav-total) + 40px) 0 44px;
  }
  .uc-hero .wrap{ position:relative; z-index:1; width:100%; }
  /* nieruchome poświaty po bokach tytułu (poziom jak na kontakcie/faq) */
  .uc-hg{
    position:absolute; z-index:0; border-radius:50%; pointer-events:none;
    filter:blur(40px); transform:translateZ(0);
  }
  .uc-hg-l{
    width:420px; height:420px; left:-170px; top:calc(50% - 160px); opacity:0.12;
    background:radial-gradient(circle, var(--violet) 0%, var(--cyan) 55%, transparent 75%);
  }
  .uc-hg-r{
    width:380px; height:380px; right:-150px; top:calc(50% - 130px); opacity:0.1;
    background:radial-gradient(circle, var(--cyan) 0%, var(--amber) 55%, transparent 75%);
  }
  .uc-hero .eyebrow{ justify-content:center; }
  .uc-hero h1{
    font-family:var(--headline); font-weight:800; letter-spacing:-0.03em; line-height:1.1;
    font-size:clamp(44px,5.4vw,72px); color:var(--text); max-width:880px; margin:0 auto;
  }
  .uc-hero h1 .uc-grad{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .uc-hero-lead{ margin-top:16px; color:var(--text-muted); font-size:17px; }

  /* --- scena kategorii --- */
  /* rama sceny szersza niż standardowy wrap (zapas szerokości dla kolumn) */
  .uc-stage-wrap{ max-width:1400px; }
  .uc-stage{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .uc-cols{ position:relative; display:flex; min-height:56svh; }

  /* --- dokładne wypełnienie pierwszego ekranu ---
     Wcześniej nagłówek miał 34svh, a kolumny 56svh, więc suma z paddingami
     i paskiem nawigacji tylko PRZYBLIŻAŁA wysokość okna: na niskim ekranie
     treść wystawała, na wysokim zostawała luka. Teraz nagłówek bierze tyle,
     ile potrzebuje, a kolumny dostają dokładnie resztę, więc pierwszy ekran
     domyka się przy każdej wysokości okna.

     Przy niskim oknie i na wąskich ekranach wracamy do zwykłego przewijania,
     bo cztery kolumny upchane na 500 px byłyby nieczytelne.

     Próg wysokości to 560 px, a nie 680: typowy laptop 1366x768 po odjęciu
     pasków przeglądarki ma okno około 660 px i przy starym progu mechanizm
     wyłączał się dokładnie tam, gdzie był najbardziej potrzebny. Zmierzone:
     przy 660 px kolumny wystawały 113 px poza pierwszy ekran. Żeby przy
     niższych oknach kolumnom zostało miejsce, nagłówek oddaje wtedy część
     swoich odstępów (reguła max-height:760px niżej). */
  @media (min-width:861px) and (min-height:560px){
    /* Rozciaga sie kontener PIERWSZEGO EKRANU, a nie caly main: main zawiera
       tez ciemna sekcje koncowa, przez ktora na wysokich monitorach suma
       naturalnych wysokosci przekraczala okno i flex nie mial czego rozciagac
       (zmierzone: kolumny konczyly sie 249 px nad dolem okna przy 1000 px). */
    body.uslugi .uc-first{ min-height:100svh; display:flex; flex-direction:column; }
    body.uslugi .uc-hero{ flex:0 0 auto; min-height:0; }
    body.uslugi .uc-stage-wrap{ flex:1 1 auto; min-height:0; display:flex; }
    body.uslugi .uc-stage{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
    body.uslugi .uc-cols{ flex:1 1 auto; min-height:0; }
    /* widok szczegółów kategorii zajmuje to samo miejsce co kolumny */
    body.uslugi .uc-view:not([hidden]){ flex:1 1 auto; min-height:0; overflow-y:auto; }
  }
  /* Przy niskim oknie nagłówek oddaje odstępy kolumnom: bez tego przy 600 px
     kolumny dostawałyby ciasne resztki, a nagłówek trzymał luksusowe 40+44 px
     wolnej przestrzeni. Dotyczy tylko komputerów, wąskie ekrany mają własny układ. */
  @media (min-width:861px) and (max-height:760px){
    .uc-hero{ padding:calc(var(--nav-total) + 14px) 0 22px; }
    .uc-hero-lead{ margin-top:8px; }
    /* Mniejszy tytul i ciasniejsze kolumny: zmierzone przy oknie 660 px,
       hero z pelnym tytulem (348 px) plus naturalna wysokosc kolumn (347 px)
       przekraczaly okno o 35 px i pierwszy ekran sie nie domykal. */
    .uc-hero h1{ font-size:clamp(36px,4.2vw,52px); }
    .uc-col{ padding:26px 40px; }
  }
  /* [hidden] musi wygrać z autorskim display:flex/grid (inaczej atrybut nie działa) */
  .uc-cols[hidden], .uc-view[hidden]{ display:none; }
  /* siatka kropek pod sceną: maska wygasza ku krawędziom i ku hero;
     leży pod kolumnami i pod kartą-odklejką */
  .uc-cols::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle, var(--border-strong) 1.2px, transparent 1.2px);
    background-size:24px 24px; opacity:0.5;
    -webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 62%, rgba(0,0,0,0.9), transparent 100%);
    mask-image:radial-gradient(ellipse 75% 85% at 50% 62%, rgba(0,0,0,0.9), transparent 100%);
  }
  .uc-col{
    flex:1 1 0; min-width:0; position:relative;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; background:none; border:0; text-align:left; cursor:pointer;
    font-family:var(--body); color:var(--text);
    transition:flex-grow .45s cubic-bezier(.16,1,.3,1), padding .45s cubic-bezier(.16,1,.3,1);
  }
  .uc-col:hover{ flex-grow:1.1; }
  /* karta-odklejka: wyłania się pod treścią hoverowanej kolumny */
  .uc-col::before{
    content:''; position:absolute; inset:10px; z-index:0;
    background:#fff; border:1px solid var(--border); border-radius:20px;
    box-shadow:0 24px 48px -24px rgba(15,16,20,0.22);
    opacity:0; transform:translateY(6px) scale(0.985);
    transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
  }
  .uc-col:hover::before{ opacity:1; transform:none; }
  /* pionowe separatory jako elementy (rysują się scaleY przy wejściu sceny) */
  .col-line{
    flex:0 0 1px; width:1px; align-self:stretch; background:var(--border);
    transform:scaleY(0); transform-origin:center top;
    transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  }
  .uc-cols.lines-in .col-line{ transform:scaleY(1); }
  .uc-cols.lines-in span.col-line:nth-of-type(2){ transition-delay:.12s; }
  .uc-cols.lines-in span.col-line:nth-of-type(3){ transition-delay:.24s; }
  .uc-col-in{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start;
    transition:opacity .25s ease, transform .4s cubic-bezier(.16,1,.3,1);
    /* STAŁA szerokość bloku treści: zależy tylko od viewportu, NIE od stanu flex kolumny,
       więc hover sąsiadki nigdy nie przełamuje tekstu (animuje się tylko pusta przestrzeń).
       Wzór = szerokość kolumny w spoczynku: (rama - 2x32 padding - 3 linie)/4 - 2x40 paddingu kolumny.
       Kurczenie kolumny przy hoverze sąsiadki (~2.5%) zjada prawy padding, nie tekst. */
    width:calc((min(1400px, 100vw) - 67px)/4 - 80px);
  }
  .uc-col:hover .uc-col-in{ transform:translateY(-4px); }
  /* ikona kategorii: statyczna na hover, żyje własną mikro-pętlą idle */
  .uc-ico{
    flex-shrink:0; width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background-color:var(--bg-soft); border:1px solid var(--border); color:var(--ink);
  }
  .uc-ico svg{ display:block; }
  .uc-ico svg, .uc-ico svg *{ fill:none; stroke:currentColor; }
  /* rozjazd pętli idle per kolumna (cykl 6.4s, ruch tylko na jego początku) */
  .uc-cols button.uc-col:nth-of-type(1){ --idle:0s; }
  .uc-cols button.uc-col:nth-of-type(2){ --idle:1.6s; }
  .uc-cols button.uc-col:nth-of-type(3){ --idle:3.2s; }
  .uc-cols button.uc-col:nth-of-type(4){ --idle:4.8s; }
  .ic-dot{ animation:uc-blink 6.4s ease-in-out infinite; animation-delay:var(--idle,0s); }
  .ic-dot.ic-d2{ animation-delay:calc(var(--idle,0s) + 0.14s); }
  .ic-dot.ic-d3{ animation-delay:calc(var(--idle,0s) + 0.28s); }
  @keyframes uc-blink{
    0%{ opacity:1; } 3%{ opacity:0.15; } 6%{ opacity:1; } 100%{ opacity:1; }
  }
  .ic-knob{
    transform-box:fill-box; transform-origin:center;
    animation:uc-slide 6.4s cubic-bezier(.16,1,.3,1) infinite; animation-delay:var(--idle,0s);
  }
  @keyframes uc-slide{
    0%{ transform:none; } 5%{ transform:translateX(3px); } 11%{ transform:none; } 100%{ transform:none; }
  }
  .ic-swing{
    transform-box:fill-box; transform-origin:center;
    animation:uc-tilt 6.4s ease-in-out infinite; animation-delay:var(--idle,0s);
  }
  @keyframes uc-tilt{
    0%{ transform:none; } 3%{ transform:rotate(-6deg); } 7%{ transform:rotate(6deg); } 11%{ transform:none; } 100%{ transform:none; }
  }
  .ic-led{ animation:uc-led 6.4s ease-in-out infinite; animation-delay:var(--idle,0s); }
  @keyframes uc-led{
    0%{ opacity:1; } 2%{ opacity:0.1; } 4%{ opacity:1; } 6%{ opacity:0.1; } 8%{ opacity:1; } 100%{ opacity:1; }
  }
  .uc-count{ margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--text-dim); white-space:nowrap; }
  .uc-col h2{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.2;
    font-size:26px; color:var(--text); margin-top:8px;
  }
  .uc-col .uc-blurb{ margin-top:10px; color:var(--text-muted); font-size:14.5px; line-height:1.6; width:100%; }
  .uc-pick{ margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--text-dim); transition:color .25s ease; white-space:nowrap; }
  .uc-col:hover .uc-pick{ color:var(--ink); }

  /* sekwencja wyboru: 1) fade treści, 2) rozlanie wybranej kolumny */
  .uc-cols.is-anim .uc-col-in, .uc-cols.is-anim .uc-col::before{ opacity:0; }
  .uc-cols.is-open .uc-col{ flex-grow:0.001; padding-left:0; padding-right:0; overflow:hidden; }
  .uc-cols.is-open .uc-col.on{ flex-grow:1; }
  .uc-cols.is-open .col-line{ opacity:0; }

  /* --- widok kategorii --- */
  .uc-view-in{ max-width:1000px; margin:0 auto; padding:52px 24px 76px; }
  .uc-view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
  .uc-view-num{
    font-family:var(--mono); font-size:13px; font-weight:600;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .uc-view-head h2{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.15;
    font-size:clamp(28px,3.4vw,38px); color:var(--text); margin-top:8px;
  }
  /* opis kategorii: na desktopie zawsze w jednej linii (clamp dobrany pod najdłuższy opis na 1280px) */
  .uc-view-head .uc-view-desc{ margin-top:10px; color:var(--text-muted); font-size:clamp(12.5px,1.2vw,15px); line-height:1.6; max-width:none; }
  @media (min-width:861px){ .uc-view-head .uc-view-desc{ white-space:nowrap; } }
  .uc-back{
    flex-shrink:0; display:inline-flex; align-items:center; gap:8px; min-height:44px;
    font-family:var(--mono); font-size:12.5px; color:var(--text-muted);
    background:#fff; border:1px solid var(--border); border-radius:999px; padding:10px 18px; cursor:pointer;
    transition:color .2s ease, border-color .2s ease;
  }
  .uc-back:hover{ color:var(--ink); border-color:var(--border-strong); }

  /* kafle usług (poziome, bez cen) */
  .uc-tiles{ display:flex; flex-direction:column; gap:14px; }
  .uc-tile{
    display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:20px; align-items:center;
    padding:26px 28px; background:#fff; border:1px solid var(--border); border-radius:18px;
    opacity:0; transform:translateY(16px);
    transition:opacity .4s ease, transform .45s cubic-bezier(.16,1,.3,1),
               border-color .25s ease, box-shadow .28s ease;
  }
  .uc-view.in .uc-tile{ opacity:1; transform:none; }
  .uc-view.in .uc-tile:nth-child(2){ transition-delay:.06s; }
  .uc-view.in .uc-tile:nth-child(3){ transition-delay:.12s; }
  .uc-view.in .uc-tile:nth-child(4){ transition-delay:.18s; }
  .uc-view.in .uc-tile:nth-child(5){ transition-delay:.24s; }
  .uc-view.in .uc-tile:nth-child(6){ transition-delay:.3s; }
  /* hover kafla: lift 2px + border-strong (ikona STATYCZNA, bez kolorowania) */
  .uc-view.in .uc-tile:hover{
    transform:translateY(-2px); border-color:var(--border-strong);
    box-shadow:0 22px 45px -28px rgba(15,16,20,0.22);
    transition-delay:0s;
  }
  .uc-tico{
    width:48px; height:48px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background-color:var(--bg-soft); border:1px solid var(--border); color:var(--ink);
  }
  .uc-tico svg{ display:block; }
  .uc-tico svg, .uc-tico svg *{ fill:none; stroke:currentColor; }
  .uc-tile strong{ display:block; font-family:var(--headline); font-weight:700; letter-spacing:-0.01em; font-size:21px; color:var(--text); }
  .uc-tile .uc-tile-sub{ display:block; margin-top:5px; color:var(--text-muted); font-size:14.5px; line-height:1.55; }
  /* nazwa sunie 6px w prawo razem ze strzałką */
  .uc-tile-txt{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
  .uc-tile:hover .uc-tile-txt{ transform:translateX(6px); }
  /* STRZAŁKA-TOR: linia rysuje się 22->44px, grot na końcu, całość sunie 6px w prawo */
  .uc-tarr{
    position:relative; width:44px; height:16px; color:var(--text-dim);
    transition:transform .3s cubic-bezier(.16,1,.3,1), color .25s ease;
  }
  .uc-tarr::before{
    content:''; position:absolute; right:1px; top:50%; height:2px; width:22px; margin-top:-1px;
    border-radius:2px; background:currentColor;
    transition:width .3s cubic-bezier(.16,1,.3,1);
  }
  .uc-tarr::after{
    content:''; position:absolute; right:1px; top:50%; width:9px; height:9px; margin-top:-4.5px;
    border-top:2px solid currentColor; border-right:2px solid currentColor;
    border-radius:1px; transform:rotate(45deg);
  }
  .uc-tile:hover .uc-tarr{ transform:translateX(6px); color:var(--ink); }
  .uc-tile:hover .uc-tarr::before{ width:44px; }
  /* kategorie z 2-3 usługami: więcej powietrza, żeby widok nie świecił pustką */
  .uc-view-roomy .uc-tile{ padding:36px 32px; }
  .uc-view-roomy .uc-tile strong{ font-size:24px; }
  .uc-view-roomy .uc-tile .uc-tile-sub{ font-size:15.5px; margin-top:7px; }
  .uc-view-roomy .uc-tiles{ gap:18px; }

  /* --- finał --- */
  .uc-final{
    margin-top:72px;
    position:relative; overflow:hidden; border-top:none;
    background:var(--ink); color:#fff; text-align:center;
    padding:100px 0 110px;
  }
  .uc-final-glow{
    position:absolute; width:560px; height:560px; border-radius:50%; right:-180px; top:-240px; pointer-events:none;
    background:radial-gradient(circle, rgba(124,92,252,0.4), rgba(23,184,172,0.16) 55%, transparent 72%);
  }
  .uc-final .wrap{ position:relative; z-index:1; }
  .uc-final h2{
    font-family:var(--headline); font-weight:800; letter-spacing:-0.03em; line-height:1.15;
    font-size:clamp(38px,4.6vw,54px);
  }
  .uc-final p{ margin:16px auto 0; color:#A9AEBB; font-size:16.5px; line-height:1.7; max-width:520px; }
  .uc-btn{
    display:inline-flex; align-items:center; gap:12px; margin-top:32px;
    font-family:var(--display); font-size:15px; font-weight:600;
    background:#fff; color:var(--ink); border-radius:13px; padding:15px 26px; min-height:44px;
    transition:transform .25s ease, box-shadow .25s ease; will-change:transform;
  }
  .uc-btn .uc-arr{ transition:transform .25s ease; }
  .uc-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,0.45); }
  .uc-btn:hover .uc-arr{ transform:translateX(4px); }

  /* chevron akordeonu: tylko mobile (desktop ma "wybierz →") */
  .uc-chev{ display:none; }

  /* --- mobile (<861px): KARTY kategorii + animowany akordeon (grid-rows 0fr->1fr) --- */
  @media (max-width:860px){
    .uc-hero{ min-height:0; padding-top:calc(var(--nav-total) + 32px); }
    .uc-stage{ border-top:none; border-bottom:none; }
    .uc-cols{ display:block; min-height:0; }
    .uc-cols::before{ display:none; }
    .col-line{ display:none; }
    /* karta kategorii */
    .uc-col{
      width:100%; padding:22px;
      background:#fff; border:1px solid var(--border); border-radius:18px;
    }
    .uc-col ~ .uc-col{ margin-top:12px; }
    .uc-col-in{ width:auto; }
    .uc-col:hover{ flex-grow:1; }
    .uc-col::before{ display:none; }
    .uc-col:hover .uc-col-in{ transform:none; }
    .uc-ico{ width:40px; height:40px; }
    .uc-col h2{ font-size:20px; }
    .uc-count{ margin-top:12px; }
    .uc-col .uc-blurb{ max-width:none; font-size:14px; margin-top:8px; }
    .uc-pick{ display:none; }
    /* chevron: obraca się 180deg przy otwarciu */
    .uc-chev{
      display:block; position:absolute; top:24px; right:2px;
      width:11px; height:11px;
      border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim);
      border-radius:1px; transform:rotate(45deg); transform-origin:66% 66%;
      transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .25s ease;
    }
    .uc-col.on{ border-color:var(--border-strong); }
    .uc-col.on .uc-chev{ transform:rotate(225deg); border-color:var(--violet); }
    /* stan otwarty: gradientowy lewy brzeg karty (bazowy ::before karty-odklejki
       jest na mobile wyłączony, więc pseudo ::after jest wolne).
       TECHNIKA: pełnowymiarowy pseudo-element z border-radius:inherit + maska
       zostawiająca lewe 3px: pasek jest WYCINKIEM zaokrąglonego pudła, więc
       idealnie podąża za łukami rogów zamiast wystawać prostą kreską */
    .uc-col.on::after{
      content:''; position:absolute; inset:0; pointer-events:none;
      border-radius:inherit; background:var(--grad);
      -webkit-mask:linear-gradient(90deg, #000 3px, transparent 3px);
      mask:linear-gradient(90deg, #000 3px, transparent 3px);
    }
    /* ikona otwartej kategorii: gradientowe tło + biała kreska */
    .uc-col.on .uc-ico{ background:var(--grad); border-color:transparent; color:#fff; }
    /* widok jako animowany akordeon POD kartą: grid-template-rows 0fr -> 1fr */
    .uc-view-head{ display:none; }
    .uc-view{
      display:grid; grid-template-rows:0fr;
      transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);
      border:0; background:none;
    }
    .uc-view.m-open{ grid-template-rows:1fr; }
    /* tint tła rozwinięcia + gradientowy lewy brzeg na całej wysokości rozwinięcia
       (::before w .uc-view-in, więc pasek zwija się i rozwija razem z animacją) */
    .uc-view{ background:var(--bg-soft); border-radius:14px; margin-top:8px; }
    .uc-view-in{ min-height:0; overflow:hidden; padding:0; max-width:none; position:relative; }
    /* ta sama technika: promień 14px jak .uc-view (view-in go nie ma, więc wprost) */
    .uc-view-in::before{
      content:''; position:absolute; inset:0; pointer-events:none;
      border-radius:14px; background:var(--grad);
      -webkit-mask:linear-gradient(90deg, #000 3px, transparent 3px);
      mask:linear-gradient(90deg, #000 3px, transparent 3px);
    }
    .uc-tiles{ padding:12px 14px 14px; gap:10px; }
    /* gradientowa kropka 6px przed nazwą usługi w rozwinięciu */
    .uc-tile strong::before{
      content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
      background:var(--grad); margin-right:8px; vertical-align:2px;
    }
    /* kafle: ikona 36px, nazwa 17px, zdanie 13.5px, tap-target min 56px */
    .uc-tile{ grid-template-columns:36px minmax(0,1fr) auto; gap:13px; padding:14px 16px; min-height:56px; }
    .uc-tico{ width:36px; height:36px; border-radius:10px; }
    .uc-tile strong{ font-size:17px; }
    .uc-tile .uc-tile-sub{ font-size:13.5px; margin-top:4px; }
    .uc-view-roomy .uc-tile{ padding:14px 16px; }
    .uc-view-roomy .uc-tiles{ gap:10px; }
    .uc-view-roomy .uc-tile strong{ font-size:17px; }
    .uc-view-roomy .uc-tile .uc-tile-sub{ font-size:13.5px; }
    /* stagger kafli co 50ms */
    .uc-view.in .uc-tile:nth-child(2){ transition-delay:.05s; }
    .uc-view.in .uc-tile:nth-child(3){ transition-delay:.1s; }
    .uc-view.in .uc-tile:nth-child(4){ transition-delay:.15s; }
    .uc-view.in .uc-tile:nth-child(5){ transition-delay:.2s; }
    .uc-view.in .uc-tile:nth-child(6){ transition-delay:.25s; }
  }
  /* hero usług + finał na telefonie */
  @media (max-width:640px){
    .uc-hero h1{ font-size:clamp(32px,9vw,44px); }
    .uc-hero-lead{ font-size:14.5px; }
    .uc-hg-l{ width:260px; height:260px; left:-120px; }
    .uc-hg-r{ width:240px; height:240px; right:-110px; }
    .uc-final{ margin-top:48px; padding:40px 0 44px; }
    .uc-final h2{ font-size:clamp(26px,7vw,32px); }
    .uc-final p{ font-size:14.5px; }
  }

  /* --- reduced motion: stany końcowe --- */
  @media (prefers-reduced-motion: reduce){
    .uc-tile{ opacity:1; transform:none; }
    .uc-col{ transition:none; }
  }

    /* ═══════════ PODSTRONA: PROJEKTY (klasy .pr-) ═══════════ */
  .pr-hero{ padding:calc(var(--nav-total) + 20px) 0 130px; }
  @media (max-width:640px){ .pr-hero{ padding:calc(var(--nav-total) + 8px) 0 80px; } }
  .pr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:16px; }
  @media (max-width:1024px){
    .pr-grid{ grid-template-columns:1fr; gap:32px; max-width:none; }
    .pr-card{ width:100%; max-width:none; }
  }
  .pr-card{ display:flex; flex-direction:column; gap:14px; }
  .pr-browser{
    border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff;
    box-shadow:0 24px 50px -28px rgba(15,16,20,0.22);
    transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
  }
  .pr-card:hover .pr-browser{ transform:translateY(-6px); box-shadow:0 34px 64px -28px rgba(15,16,20,0.3); }
  .pr-bar{
    display:flex; align-items:center; gap:6px; padding:10px 13px;
    background:var(--bg-soft); border-bottom:1px solid var(--border);
  }
  .pr-bar span{ width:9px; height:9px; border-radius:50%; }
  .pr-bar span:nth-child(1){ background:#F0685E; }
  .pr-bar span:nth-child(2){ background:#F2A93B; }
  .pr-bar span:nth-child(3){ background:#17B8AC; }
  .pr-bar em{
    font-family:var(--mono); font-style:normal; font-size:11px; color:var(--text-dim);
    background:#fff; border:1px solid var(--border); border-radius:7px; padding:3px 12px; margin-left:8px;
  }
  .pr-screen{ aspect-ratio:16/10; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .pr-skel{ position:absolute; inset:0; padding:20px; display:flex; flex-direction:column; gap:11px; filter:blur(1.5px); opacity:0.75; }
  /* shimmer na transformie zamiast background-position (kompozytowany, bez repaintu) */
  .pr-skel-line, .pr-skel-box{ position:relative; overflow:hidden; background:var(--bg-elevated); }
  .pr-skel-line::after, .pr-skel-box::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent 0%, #F5F4EF 50%, transparent 100%);
    transform:translateX(-100%); will-change:transform;
    animation:pr-shimmer 1.8s linear infinite;
  }
  .pr-skel-line{ height:11px; border-radius:6px; }
  .pr-skel-line.w60{ width:60%; } .pr-skel-line.w75{ width:75%; } .pr-skel-line.w80{ width:80%; } .pr-skel-line.w90{ width:90%; } .pr-skel-line.w55{ width:55%; }
  .pr-skel-box{ flex:1; border-radius:10px; }
  @keyframes pr-shimmer{ to{ transform:translateX(100%); } }
  .pr-soon{
    position:relative; z-index:1; font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--text-muted); background:rgba(255,255,255,0.9); backdrop-filter:blur(3px);
    border:1px solid var(--border); border-radius:100px; padding:8px 18px;
  }
  .pr-screen-cta{
    flex-direction:column; gap:8px; background:var(--ink); color:#C7CBD6; text-align:center;
  }
  /* plus jako SVG, nie znak tekstowy: pozycja jest matematycznie pewna i nie "doskakuje"
     po dociagnieciu fontu (glif + w Interze nie jest optycznie wysrodkowany w em-boxie).
     Centrowanie przez grid + place-items, transition w stanie BAZOWYM, animowany tylko transform. */
  .pr-plus{
    width:46px; height:46px; border-radius:50%; background:var(--grad); color:#fff;
    display:grid; place-items:center; flex-shrink:0;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .pr-plus svg{ display:block; width:22px; height:22px; }
  .pr-card-cta:hover .pr-plus{ transform:rotate(90deg) scale(1.08); }
  .pr-screen-cta p{ font-family:var(--display); font-size:14.5px; line-height:1.5; }
  .pr-screen-cta strong{ color:#fff; }
  .pr-meta{ display:flex; align-items:baseline; justify-content:space-between; padding:0 4px; }
  .pr-meta strong{ font-family:var(--display); font-size:14.5px; font-weight:600; color:var(--text); }
  .pr-meta span{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); }
  .pr-meta-link{ color:var(--text-muted) !important; transition:color .2s ease; }
  .pr-card-cta:hover .pr-meta-link{ color:var(--ink) !important; }

  /* --- hero o mnie: rola + separator --- */
  .ab-role{
    display:inline-flex; align-items:center; gap:10px; margin-top:18px;
    font-family:var(--mono); font-size:13px; letter-spacing:0.06em; color:var(--text-muted);
  }
  .ab-divider{ width:56px; height:2px; background:var(--grad); border-radius:2px; margin:34px 0 30px; }
  @media (max-width:900px){ .ab-divider{ margin-left:auto; margin-right:auto; } }
  /* telefony: równy rytm odstępów w zwartej kolumnie hero */
  @media (max-width:768px){ .ab-divider{ margin:24px auto; } }



  /* --- index: usługi jako lista --- */
  .hm-list{ border-top:1px solid var(--border); }
  .hm-row{
    display:block; padding:26px 8px; border-bottom:1px solid var(--border);
    overflow:visible; transition:background .3s ease;
  }
  .hm-row:hover{ background:var(--bg-soft); }
  /* przesuw treści przez transform na wewnętrznym wrapperze (bez przeliczania layoutu = zero janku).
     padding-right = zapas, dzięki któremu strzałka po wysuwie NADAL zostaje wewnątrz wiersza. */
  .hm-in{
    display:grid; grid-template-columns:auto auto 1fr auto auto; gap:28px; align-items:center;
    padding-right:22px;
    transition:transform .3s cubic-bezier(.16,1,.3,1); will-change:transform;
  }
  .hm-row:hover .hm-in{ transform:translateX(16px); }
  .hm-row strong{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em;
    font-size:clamp(21px,2.8vw,32px); color:var(--text); transition:color .25s ease;
  }
  .hm-row:hover strong{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hm-row em{ font-style:normal; color:var(--text-muted); font-size:14px; text-align:right; max-width:320px; }
  .hm-arr{ color:var(--text-dim); font-size:20px; transition:transform .25s cubic-bezier(.16,1,.3,1), color .25s ease; }
  .hm-row:hover .hm-arr{ transform:translateX(4px); color:var(--ink); }
  @media (max-width:640px){
    .hm-row em{ display:none; }
  }

  /* --- index: numer w liście usług --- */
  .hm-no{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); transition:color .25s ease; }
  .hm-row:hover .hm-no{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; }

  .ct-social{ display:flex; gap:12px; margin-top:32px; }
  @media (max-width:900px){ .ct-social{ justify-content:center; } }
  .ct-soc{
    width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--border-strong); color:var(--text);
    transition:transform .22s cubic-bezier(.16,1,.3,1), background .22s ease, color .22s ease, border-color .22s ease;
  }
  .ct-soc:hover{ transform:translateY(-4px); background:var(--ink); border-color:var(--ink); color:#fff; }

  /* --- kontakt: split ciemny panel + formularz --- */
  /* min-height, a NIE height, celowo. Sztywna wysokość dopasowana do okna
     razem z overflow:hidden OBCINALA dolny kafel "Znajdziesz mnie też tutaj"
     na każdym oknie niższym niż zawartość panelu: treść nie mieściła się
     w wyznaczonej wysokości, a nadmiar znikał za krawędzią. min-height daje
     to samo dopasowanie do okna na dużych ekranach, ale przy niskich panel
     rośnie razem z treścią i strona zwyczajnie się przewija. overflow:hidden
     zostaje, bo przycina narożniki poświaty do zaokrąglonej ramki. */
  .ct-split{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(15,16,20,0.35); border:1px solid var(--border); min-height:calc(100svh - var(--nav-total) - 72px); }
  /* Na waskich ekranach panel i formularz staja jeden pod drugim, wiec
     dopasowanie do wysokosci okna nie ma sensu: min-height:0 je zdejmuje. */
  @media (max-width:860px){ .ct-split{ grid-template-columns:1fr; min-height:0; } }
  .ct-dark{
    position:relative; background:var(--ink); color:#fff; padding:52px 48px;
    display:flex; flex-direction:column; overflow:hidden;
  }
  @media (max-width:640px){ .ct-dark{ padding:36px 26px; } }
  .ct-dark-glow{
    position:absolute; width:420px; height:420px; border-radius:50%; right:-160px; bottom:-180px;
    background:radial-gradient(circle, rgba(124,92,252,0.35), rgba(23,184,172,0.12) 55%, transparent 70%);
    pointer-events:none;
  }
  .ct-dark h1{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.025em;
    font-size:clamp(28px,3.4vw,40px); line-height:1.18; margin-top:14px;
  }
  .ct-dark-lead{ color:#A9AEBB; font-size:15px; line-height:1.7; margin-top:16px; max-width:400px; }
  .ct-rows{ display:flex; flex-direction:column; gap:8px; margin-top:38px; position:relative; z-index:1; }
  .ct-row2{
    display:flex; align-items:center; gap:16px; padding:14px 16px; margin:0 -16px;
    border-radius:14px; transition:background .22s ease, transform .22s ease;
  }
  .ct-row2:hover{ background:rgba(255,255,255,0.06); transform:translateX(4px); }
  .ct-r-ic{
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .ct-r-txt{ display:flex; flex-direction:column; min-width:0; }
  .ct-r-txt em{ font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#8A90A0; }
  .ct-r-txt strong{ font-family:var(--display); font-size:15px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ct-dark-foot{ margin-top:auto; padding-top:40px; position:relative; z-index:1; }
  .ct-dark-foot > span{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:#8A90A0; margin-bottom:14px; }
  .ct-social{ display:flex; gap:11px; }
  /* mobile: etykieta "Znajdziesz mnie też tutaj" i rząd sociali wyśrodkowane */
  @media (max-width:768px){
    .ct-dark-foot{ text-align:center; }
    .ct-dark-foot .ct-social{ justify-content:center; }
  }
  .ct-soc{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); color:#fff;
    transition:transform .22s cubic-bezier(.16,1,.3,1), background .22s ease, color .22s ease;
  }
  .ct-soc:hover{ transform:translateY(-4px); background:#fff; color:var(--ink); }

  .ct-panel{ background:#fff; padding:52px 48px; display:flex; flex-direction:column; }
  @media (max-width:640px){ .ct-panel{ padding:36px 26px; } }
  .ct-fl{ position:relative; margin-bottom:22px; }
  .ct-fl input, .ct-fl textarea{
    width:100%; font-family:var(--body); font-size:15px; color:var(--text);
    background:var(--bg-soft); border:1.5px solid var(--border); border-radius:14px;
    padding:24px 18px 10px; outline:none; resize:vertical;
    transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;
  }
  /* Etykieta pełni też rolę podpowiedzi w pustym polu, więc musi być czytelna.
     Wcześniejszy --text-dim dawał na białym kontrast 2,67:1, przy wymaganych
     przez WCAG AA 4,5:1 dla zwykłego tekstu. --text-muted daje 6,20:1 i jest
     najmniejszą zmianą, która spełnia normę. */
  .ct-fl label{
    position:absolute; left:19px; top:17px; pointer-events:none;
    font-family:var(--display); font-size:14.5px; color:var(--text-muted);
    transition:all .18s cubic-bezier(.16,1,.3,1); transform-origin:left top;
  }
  .ct-fl input:focus, .ct-fl textarea:focus{
    border-color:var(--violet); background:#fff; box-shadow:0 0 0 4px rgba(124,92,252,0.09);
  }
  .ct-fl input:focus ~ label, .ct-fl input:not(:placeholder-shown) ~ label,
  .ct-fl textarea:focus ~ label, .ct-fl textarea:not(:placeholder-shown) ~ label{
    top:8px; font-size:11px; font-family:var(--mono); letter-spacing:0.06em; color:var(--text-muted);
  }
  .ct-fl input:focus ~ label, .ct-fl textarea:focus ~ label{ color:var(--violet); }
  .ct-fl input.err, .ct-fl textarea.err{ border-color:var(--rose); }
  /* pole wiadomości rośnie/kurczy się z panelem; przycisk zawsze na dole bez wewnętrznego scrolla */
  .ct-fl-msg{ flex:1 1 auto; display:flex; flex-direction:column; min-height:96px; }
  .ct-fl-msg textarea{ flex:1 1 auto; height:100%; min-height:96px; resize:none; }
  .ct-send{ width:100%; justify-content:center; margin-top:6px; }
  /* niskie ekrany: kompresja progami, żeby CAŁY formularz mieścił się bez scrolla */
  @media (max-height:820px) and (min-width:861px){
    .ct-hero{ padding:calc(var(--nav-total) + 20px) 0 24px; }
    .ct-split{ height:calc(100svh - var(--nav-total) - 44px); }
    .ct-panel{ padding:34px 40px; }
    .ct-dark{ padding:34px 40px; }
    .ct-fl{ margin-bottom:15px; }
    .ct-dark h1{ font-size:clamp(24px,2.8vw,32px); margin-top:10px; }
    .ct-dark-lead{ margin-top:12px; }
    .ct-rows{ margin-top:24px; }
    .ct-dark-foot{ padding-top:24px; }
    .ct-consents{ margin:10px 0 2px; }
    .ct-consent{ min-height:38px; }
  }
  @media (max-height:720px) and (min-width:861px){
    .ct-hero{ padding:calc(var(--nav-total) + 12px) 0 14px; }
    .ct-split{ height:calc(100svh - var(--nav-total) - 26px); }
    .ct-panel{ padding:22px 30px; }
    .ct-dark{ padding:22px 30px; }
    .ct-fl{ margin-bottom:11px; }
    .ct-fl input, .ct-fl textarea{ padding-top:19px; padding-bottom:7px; }
    .ct-fl-msg, .ct-fl-msg textarea{ min-height:60px; }
    .ct-dark h1{ font-size:23px; margin-top:8px; }
    .ct-dark-lead{ margin-top:8px; font-size:13.5px; }
    .ct-rows{ margin-top:14px; gap:4px; }
    .ct-row2{ padding:10px 16px; }
    .ct-dark-foot{ padding-top:14px; }
    .ct-consents{ margin:6px 0 0; }
    .ct-consent{ min-height:32px; font-size:12.5px; gap:10px; }
    .ct-note{ margin-top:6px; }
  }
  /* --- kontakt: zgoda RODO --- */
  .ct-consents{ margin:14px 0 4px; }
  .ct-consent{
    position:relative; display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer;
    padding:2px 0; border-radius:8px;
    font-family:var(--body); font-size:13px; line-height:1.5; color:var(--text-muted);
    transition:color .18s ease;
  }
  /* natywna kontrolka CAŁKOWICIE poza renderem (zero artefaktów w Chrome i Firefoksie),
     zostaje tylko dla dostępności i walidacji; wygląd rysuje wyłącznie .ct-box */
  .ct-consent input[type="checkbox"]{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    position:absolute; opacity:0; width:0; height:0; margin:0; padding:0; border:0;
  }
  .ct-box{
    flex-shrink:0; width:22px; height:22px; border-radius:7px;
    border:1.5px solid var(--border-strong); background:#fff;
    display:grid; place-items:center; overflow:hidden;
    transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .ct-consent:hover .ct-box{ border-color:var(--ink); }
  /* ptaszek jako inline SVG z gradientowym stroke (defs #chkGrad) -> zero czarnych artefaktow;
     rysuje sie od lewej przez stroke-dashoffset (pathLength="24" w markupie) */
  .ct-box svg{ display:block; width:15px; height:15px; }
  .ct-box svg path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .35s ease-out; }
  .ct-consent input:checked + .ct-box{ background:var(--ink); border-color:var(--ink); }
  .ct-consent input:checked + .ct-box path{ stroke-dashoffset:0; }
  .ct-consent input:focus-visible + .ct-box{ box-shadow:0 0 0 4px rgba(124,92,252,0.22); border-color:var(--violet); }
  .ct-ctxt{ min-width:0; }
  /* brak wymaganej zgody: podświetlenie całego wiersza */
  .ct-consent.err{ color:var(--rose); }
  .ct-consent.err .ct-box{ border-color:var(--rose); box-shadow:0 0 0 4px rgba(240,104,94,0.12); }
  .ct-consent a{
    color:var(--cyan); text-decoration:underline; text-decoration-color:currentColor;
    text-underline-offset:2px; transition:color .18s ease, text-decoration-thickness .18s ease;
  }
  .ct-consent a:hover{ color:var(--ink); text-decoration-thickness:2px; }


  /* --- index hero: pokaz strony --- */
  .hero-show{ position:relative; }
  .hero-show-glow{
    position:absolute; inset:-40px -60px; border-radius:50%;
    background:radial-gradient(ellipse at 60% 40%, rgba(124,92,252,0.16), rgba(23,184,172,0.08) 55%, transparent 72%);
    pointer-events:none; z-index:0;
  }
  .hs-browser{
    position:relative; z-index:1; border-radius:18px; overflow:hidden;
    border:1px solid var(--border-strong);
    box-shadow:0 44px 80px -38px rgba(15,16,20,0.45);
    transform:rotate(1.4deg);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
    animation:hs-float 6s ease-in-out infinite;
  }
  .hero-show:hover .hs-browser{ transform:rotate(0deg) translateY(-4px); }
  @keyframes hs-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
  .hs-bar{
    display:flex; align-items:center; gap:6px; padding:11px 14px;
    background:#22242C; border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .hs-bar span{ width:9px; height:9px; border-radius:50%; }
  .hs-bar span:nth-child(1){ background:#F0685E; }
  .hs-bar span:nth-child(2){ background:#F2A93B; }
  .hs-bar span:nth-child(3){ background:#17B8AC; }
  .hs-bar em{
    font-family:var(--mono); font-style:normal; font-size:10.5px; color:#8A90A0;
    background:rgba(255,255,255,0.06); border-radius:7px; padding:3px 14px; margin-left:8px;
  }
  .hs-screen{ position:relative; background:var(--ink); padding:22px 24px 26px; overflow:hidden; }
  .hs-glow{
    position:absolute; width:300px; height:300px; border-radius:50%; right:-110px; top:-120px;
    background:radial-gradient(circle, rgba(124,92,252,0.4), rgba(23,184,172,0.14) 55%, transparent 72%);
    pointer-events:none;
  }
  .hs-nav{ position:relative; display:flex; align-items:center; gap:10px; margin-bottom:26px; }
  .hs-logo{ width:22px; height:22px; border-radius:7px; background:var(--grad); }
  .hs-link{ width:34px; height:6px; border-radius:4px; background:rgba(255,255,255,0.16); }
  .hs-cta{ width:52px; height:16px; border-radius:100px; background:rgba(255,255,255,0.22); margin-left:auto; }
  .hs-hero{ position:relative; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; }
  .hs-line{ height:13px; border-radius:7px; background:rgba(255,255,255,0.2); width:88%; }
  .hs-line.w70{ width:64%; background:rgba(255,255,255,0.12); height:10px; }
  .hs-line-grad{ background:var(--grad); width:76%; height:15px; }
  .hs-btn{ width:96px; height:26px; border-radius:100px; background:var(--grad); margin-top:8px; box-shadow:0 8px 20px -6px rgba(124,92,252,0.55); }
  .hs-cards{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
  .hs-cards span{
    height:52px; border-radius:11px;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.09);
  }
  .hs-chip{
    position:absolute; z-index:2; left:-18px; bottom:-20px;
    display:flex; align-items:center; gap:12px;
    background:#fff; border:1px solid var(--border); border-radius:16px; padding:11px 18px 11px 12px;
    box-shadow:0 22px 44px -20px rgba(15,16,20,0.35);
  }
  .hs-chip .name{ font-family:var(--display); font-size:13.5px; font-weight:700; color:var(--text); }
  .hs-chip .status{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--text-muted); margin-top:2px; }
  /* mobile/tablet: makieta nie ma dominować ekranu (74% kolumny, 70% na 360), chip kompaktowy */
  @media (max-width:900px){
    /* padding-bottom rezerwuje w layoucie miejsce na chip: sam chip jest position:absolute
       (bottom liczony od padding-boxa), więc "bottom:0" + ten padding gwarantuje, że jego
       zasięg wlicza się do wysokości hero-show, zamiast wisieć poza nią niezauważony przez
       wyśrodkowanie pionowe hero (przez co potrafił nachodzić na ticker na niższych ekranach) */
    /* padding-bottom 52px = wystająca pod makietę część chipa (~32px) + 20px zapasu;
       chip na bottom:20px siedzi W CAŁOŚCI w zarezerwowanej wysokości (zero ujemnych
       marginesów), więc nic go nie przycina i ma gwarantowany odstęp od tickera */
    .hero-show{ margin-top:28px; padding-bottom:52px; max-width:74%; margin-left:auto; margin-right:auto; }
    .hero-show-glow{ inset:-24px -36px; }
    .hs-chip{
      left:50%; transform:translateX(-50%); bottom:20px; white-space:nowrap;
      padding:12px 16px; gap:11px;
    }
    .hs-chip .avatar{ width:44px; height:44px; }
    .hs-chip .avatar-inner{ font-size:14px; }
    .hs-chip .name{ font-size:14.5px; font-weight:600; }
    .hs-chip .role{ font-size:11px; }
    .hs-chip .status{ font-size:11px; }
  }
  @media (max-width:380px){
    .hero-show{ max-width:70%; }
  }
  /* --- CIĄGŁA drabinka kompresji makiety na dotyku ---
     UWAGA: musi być PO regule @media(max-width:900px) powyżej (ta sama specyficzność,
     źródło decyduje) inaczej przegrywa z nią w kaskadzie mimo trafionego media query.
     Wysokość makiety sterują stałe px w środku, więc kompakt (mniejsze wnętrze,
     bez kart-wypełniaczy) wchodzi już od 820px wysokości okna. */
  /* drugi warunek: wąskie telefony (<=430) łapią kompakt już przy oknach do 870px
     (powiększony chip potrzebuje zapasu 16px nad tickerem także na 390x844) */
  @media (max-width:1024px) and (max-height:820px), (max-width:430px) and (max-height:870px){
    .hero-show{ margin-top:16px; }
    .hs-screen{ padding:14px 18px 16px; }
    .hs-nav{ margin-bottom:14px; }
    .hs-hero{ gap:8px; margin-bottom:0; }
    .hs-cards{ display:none; }
  }
  /* 740: makieta ~88% skali mobilnej (74% -> 65%; wąskie 70% -> 62%) */
  @media (max-width:1024px) and (max-height:740px){
    .hero-show{ max-width:65%; }
    .hero-show-glow{ inset:-18px -28px; }
  }
  @media (max-width:380px) and (max-height:740px){
    .hero-show{ max-width:62%; }
  }
  /* 660: makieta ~78% skali z ciaśniejszym wnętrzem, chip przy dolnej krawędzi
     makiety (mocniej na nią zachodzi: zysk wysokości bez zmniejszania chipa) */
  @media (max-width:1024px) and (max-height:660px){
    .hero-show{ max-width:58%; margin-top:8px; padding-bottom:22px; }
    .hero-show-glow{ inset:-14px -20px; }
    .hs-chip{ bottom:2px; }
    .hs-screen{ padding:9px 16px 10px; }
    .hs-nav{ margin-bottom:8px; }
    .hs-hero{ gap:5px; }
  }
  @media (max-width:380px) and (max-height:660px){
    .hero-show{ max-width:55%; }
  }

  /* --- hero mockup: rola w chipie --- */
  .hs-chip .role{ font-family:var(--mono); font-size:10.5px; color:var(--text-dim); letter-spacing:0.04em; margin-top:1px; }
  .hs-chip .status{ margin-top:3px; }

  /* --- o mnie: poświata w hero --- */
  .ab-hero{ position:relative; }
  .ab-hero-glow{
    position:absolute; width:560px; height:560px; border-radius:50%;
    right:-140px; top:-160px; pointer-events:none; z-index:0;
    background:radial-gradient(circle, rgba(124,92,252,0.14), rgba(23,184,172,0.07) 55%, transparent 72%);
  }
  .ab-hero .wrap{ position:relative; z-index:1; width:100%; }
  /* --- o mnie: "podłoga z przyszłości" na dole hero (siatka w perspektywie) ---
     warstwa klipująca (overflow:hidden) trzyma efekt w granicach hero i chroni przed poziomym scrollem */
  .ab-floor{
    position:absolute; left:0; right:0; bottom:0; height:52%;
    z-index:0; pointer-events:none; overflow:hidden; contain:paint;
    /* wygaszenie ku górze (gaśnie zanim dojdzie do tytułu) i delikatnie na bokach */
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 55%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg, transparent 0%, #000 55%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite:intersect;
  }
  .ab-floor::before{
    content:''; position:absolute; left:-12%; right:-12%; top:-48px; bottom:-8%;
    opacity:0.5;
    background-image:
      linear-gradient(var(--border-strong) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:48px 48px;
    transform-origin:50% 0; will-change:transform;
    animation:ab-floor-flow 8s linear infinite;
  }
  /* linie płyną ku horyzontowi: animujemy TRANSFORM (kompozytowany), nie background-position.
     Przesuw o dokladnie jeden kafel 48px daje bezszwowa petle. */
  @keyframes ab-floor-flow{
    from{ transform:perspective(620px) rotateX(56deg) translateY(0); }
    to{ transform:perspective(620px) rotateX(56deg) translateY(48px); }
  }
  @media (max-width:900px){
    .ab-floor{ height:34%; }
    .ab-floor::before{ opacity:0.3; }
  }
  /* --- o mnie: plama aurory po lewej, na wysokości wizytówki (najniższa warstwa hero) --- */
  .ab-aurora{
    position:absolute; left:-180px; top:14%; width:560px; height:560px; border-radius:50%;
    z-index:0; pointer-events:none; opacity:0.12; contain:paint;
    background:radial-gradient(circle, var(--violet), var(--cyan) 55%, transparent 72%);
    filter:blur(40px); will-change:transform; transform:translateZ(0);
    animation:ab-aurora-drift 26s ease-in-out infinite alternate;
  }
  @keyframes ab-aurora-drift{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(46px,36px) scale(1.09); }
  }



  /* --- o mnie: proces (minimal) --- */
  .ab-min{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
  @media (max-width:860px){ .ab-min{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .ab-min{ grid-template-columns:1fr; gap:30px; } }
  .ab-m{ position:relative; }
  .ab-m-num{ font-family:var(--mono); font-size:12px; color:var(--text-dim); }
  .ab-m h3{ font-family:var(--headline); font-size:17.5px; font-weight:700; letter-spacing:-0.01em; margin:10px 0 8px; }
  .ab-m p{ color:var(--text-muted); font-size:13.5px; line-height:1.65; }
  /* telefony: sekcje o-mnie — nagłówki od 28px, akapity 14.5px,
     tło (podłoga + aurora) wyraźnie subtelniejsze
     (reguły .path-* mieszkają niżej, ZA swoimi bazami: kaskada) */
  @media (max-width:768px){
    #droga .section-title, #proces .section-title{ font-size:clamp(28px,7.5vw,34px); }
    .ab-m p{ font-size:14.5px; }
    /* efekt tła (płynąca siatka): CAŁA dolna połowa sekcji, od wysokości
       przycisków do samego końca (wygasa tylko ku górze, nad przyciskami) */
    .ab-floor{
      bottom:0; top:auto; height:58%;
      -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 26%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
      mask-image:linear-gradient(180deg, transparent 0%, #000 26%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
    .ab-floor::before{ opacity:0.22; }
    .ab-aurora{ opacity:0.5; }
  }

  /* --- index: projekty (okno w trakcie) --- */
  .wip{ display:flex; flex-direction:column; align-items:center; gap:26px; }
  .wip-browser{
    width:100%; max-width:760px; margin:0 auto; border-radius:18px; overflow:hidden;
    border:1px solid var(--border-strong); background:#fff;
    box-shadow:0 40px 72px -36px rgba(15,16,20,0.3);
  }
  .wip-bar{
    display:flex; align-items:center; gap:6px; padding:12px 15px;
    background:var(--bg-soft); border-bottom:1px solid var(--border);
  }
  .wip-bar span{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
  .wip-bar em{
    font-family:var(--mono); font-style:normal; font-size:11px; color:var(--text-muted);
    background:#fff; border:1px solid var(--border); border-radius:7px; padding:3px 14px; margin-left:8px;
  }
  .wip-screen{ position:relative; padding:56px 40px 60px; min-height:280px; }
  .wip-skel{ position:absolute; inset:26px 34px; opacity:0.5; display:flex; flex-direction:column; gap:13px; }
  .wsk{ display:block; border-radius:6px; background:var(--border); }
  .wsk-nav{ height:12px; width:38%; }
  .wsk-h{ height:18px; width:64%; margin-top:14px; }
  .wsk-l{ height:10px; width:80%; }
  .wsk-l.short{ width:52%; }
  .wsk-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
  .wsk-cards span{ height:56px; border-radius:10px; background:var(--border); display:block; }
  .wip-center{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px;
    text-align:center; margin:0 auto; width:fit-content;
    background:rgba(250,249,245,0.88); backdrop-filter:blur(5px);
    border:1px solid var(--border); border-radius:18px; padding:28px 42px;
    box-shadow:0 24px 48px -24px rgba(15,16,20,0.25);
  }
  .wip-spinner{
    width:34px; height:34px; border-radius:50%;
    background:conic-gradient(var(--violet), var(--cyan), var(--amber), var(--violet));
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
    animation:wip-spin 1.1s linear infinite;
  }
  @keyframes wip-spin{ to{ rotate:360deg; } }
  .wip-center strong{ font-family:var(--headline); font-size:20px; font-weight:700; letter-spacing:-0.015em; }
  .wip-center em{ font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }

  /* --- index: ikony w liście usług --- */
  .hm-ico{
    width:46px; height:46px; border-radius:14px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--border-strong); color:var(--text);
    /* transition w stanie bazowym, tylko konkretne właściwości; promocja warstwy = zero doskoku */
    transition:background .25s ease, color .25s ease, border-color .25s ease,
               transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
    will-change:transform; transform:translateZ(0);
  }
  .hm-row:hover .hm-ico{
    background:var(--ink); border-color:var(--ink); color:#fff;
    transform:rotate(-7deg) scale(1.08) translateZ(0);
    box-shadow:0 12px 24px -10px rgba(15,16,20,0.4);
  }
  @media (max-width:640px){
    .hm-in{ grid-template-columns:auto 1fr auto; }
    .hm-no{ display:none; }
  }
  /* --- idle-animacje ikon kategorii na index: mobile ORAZ desktop ---
     keyframes uc-blink/uc-slide/uc-tilt/uc-led wspólne z uslugi.html; cykl ~7.2s,
     rozjazd czasowy przez --idle per wiersz; prefers-reduced-motion gasi globalnie */
  .hm-list .hm-row:nth-child(1){ --idle:0s; }
  .hm-list .hm-row:nth-child(2){ --idle:1.8s; }
  .hm-list .hm-row:nth-child(3){ --idle:3.6s; }
  .hm-list .hm-row:nth-child(4){ --idle:5.4s; }
  .hm-ico .ic-dot, .hm-ico .ic-knob, .hm-ico .ic-swing, .hm-ico .ic-led{ animation-duration:7.2s; }
  /* idle nie koliduje z hoverem wiersza (ikona ma własną animację hover na desktopie) */
  .hm-row:hover .hm-ico .ic-dot, .hm-row:hover .hm-ico .ic-knob,
  .hm-row:hover .hm-ico .ic-swing, .hm-row:hover .hm-ico .ic-led{ animation-play-state:paused; }

  /* --- proces: więcej życia --- */
  .ab-min.in-view .ab-m .ab-m-num{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    font-weight:600;
  }
  /* treść wjeżdża kaskadowo */
  .ab-min .ab-m > *{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
  .ab-min.in-view .ab-m > *{ opacity:1; transform:translateY(0); }
  .ab-min.in-view .ab-m:nth-child(2) > *{ transition-delay:.15s; }
  .ab-min.in-view .ab-m:nth-child(3) > *{ transition-delay:.3s; }
  .ab-min.in-view .ab-m:nth-child(4) > *{ transition-delay:.45s; }


  /* --- proces: animowane piktogramy --- */
  .v{ position:relative; height:88px; margin:16px 0 14px; }
  /* 01: czat */
  .v-bub{ position:absolute; border-radius:14px; }
  .v-bub-a{
    left:0; top:6px; width:56%; height:26px;
    background:var(--ink); border-bottom-left-radius:4px;
    animation:v-pop 4s ease-in-out infinite;
  }
  .v-bub-b{
    right:0; bottom:8px; width:46%; height:30px;
    background:#fff; border:1.5px solid var(--border-strong); border-bottom-right-radius:4px;
    display:flex; align-items:center; justify-content:center; gap:5px;
    animation:v-pop 4s ease-in-out infinite -2s;
  }
  .v-bub-b i{ width:6px; height:6px; border-radius:50%; background:var(--text-dim); animation:v-typing 1.2s ease-in-out infinite; }
  .v-bub-b i:nth-child(2){ animation-delay:.15s; }
  .v-bub-b i:nth-child(3){ animation-delay:.3s; }
  @keyframes v-typing{ 0%,60%,100%{ translate:0 0; opacity:.5; } 30%{ translate:0 -4px; opacity:1; } }
  @keyframes v-pop{ 0%,100%{ scale:1; } 50%{ scale:1.05; } }
  /* 02: artboard */
  .v-frame{ position:absolute; inset:2px 8%; border:1.5px dashed var(--border-strong); border-radius:10px; }
  .v-el{ position:absolute; border-radius:6px; }
  .v-el-bar{ left:18%; top:16px; width:34%; height:11px; background:var(--grad); animation:v-blink 3.6s ease-in-out infinite; }
  .v-el-circle{ right:16%; top:14px; width:22px; height:22px; border-radius:50%; background:var(--ink); animation:v-blink 3.6s ease-in-out infinite -1.2s; }
  .v-el-line{ left:18%; bottom:16px; width:56%; height:8px; background:var(--border-strong); animation:v-blink 3.6s ease-in-out infinite -2.4s; }
  @keyframes v-blink{ 0%,100%{ opacity:1; scale:1; } 50%{ opacity:.35; scale:.92; } }
  /* 03: kod */
  .v-code{ padding:12px 6% 0; }
  .v-ln{ display:block; height:9px; border-radius:5px; margin-bottom:9px; background:var(--border-strong); transform-origin:left; }
  .v-ln.l1{ width:70%; background:var(--grad); animation:v-type 3.2s cubic-bezier(.16,1,.3,1) infinite; }
  .v-ln.l2{ width:88%; animation:v-type 3.2s cubic-bezier(.16,1,.3,1) infinite .3s; }
  .v-ln.l3{ width:52%; background:var(--ink); animation:v-type 3.2s cubic-bezier(.16,1,.3,1) infinite .6s; }
  .v-ln.l4{ width:76%; animation:v-type 3.2s cubic-bezier(.16,1,.3,1) infinite .9s; }
  @keyframes v-type{ 0%{ transform:scaleX(0); } 22%,86%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
  .v-cursor{
    position:absolute; left:6%; bottom:4px; width:8px; height:13px; background:var(--violet);
    animation:caret-blink 1s steps(1) infinite;
  }
  /* 04: start */
  .v-launch{ display:flex; align-items:center; gap:14px; padding-top:26px; }
  .v-bar{ flex:1; height:9px; border-radius:100px; background:var(--border); overflow:hidden; }
  .v-bar i{ display:block; height:100%; border-radius:100px; background:var(--grad); animation:v-load 2.8s cubic-bezier(.4,0,.2,1) infinite; }
  @keyframes v-load{ 0%{ width:6%; } 70%{ width:96%; } 85%,100%{ width:100%; } }
  .v-ship{
    font-size:20px; line-height:1;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:v-lift 2.8s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes v-lift{ 0%,60%{ translate:0 0; } 80%{ translate:0 -9px; } 100%{ translate:0 0; } }

  /* --- proces: box na piktogram --- */
  .v-box{
    background:#fff; border:1px solid var(--border); border-radius:16px;
    padding:10px 16px; margin:16px 0 16px;
    transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease;
  }
  .ab-m:hover .v-box{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 20px 40px -24px rgba(15,16,20,0.25); }
  .v{ margin:6px 0; }

  /* --- o mnie: moja droga (ścieżka) --- */
  /* sekcja „moja droga" ma standardowe tło jak reszta strony (var(--bg)); rama i panel kroków bez zmian */
  .path-panel{
    position:relative; overflow:hidden;
    background:
      radial-gradient(120% 90% at 12% 0%, rgba(124,92,252,0.09), transparent 46%),
      radial-gradient(120% 90% at 88% 4%, rgba(23,184,172,0.09), transparent 48%),
      radial-gradient(120% 120% at 96% 100%, rgba(242,169,59,0.10), transparent 52%),
      linear-gradient(180deg, #FFFFFF 0%, #FBFAFF 100%);
    border:1px solid var(--border); border-radius:26px;
    box-shadow:0 36px 72px -48px rgba(15,16,20,0.32);
    padding:clamp(26px,4vw,44px) clamp(16px,3vw,36px) clamp(30px,4vw,46px);
  }
  .path-panel::before{
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--grad); opacity:0.9;
  }
  .path-route{ position:relative; z-index:1; }
  /* --- dekoracja wewnątrz białego panelu drogi: miękkie chlapnięcia + kropki przy krawędziach --- */
  .pp-deco{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      radial-gradient(closest-side, rgba(124,92,252,0.10), rgba(23,184,172,0.05) 55%, transparent 100%),
      radial-gradient(closest-side, rgba(242,169,59,0.08), rgba(240,104,94,0.04) 55%, transparent 100%);
    background-size:260px 260px, 220px 220px;
    background-position:-70px -80px, calc(100% + 60px) calc(100% + 70px);
    background-repeat:no-repeat;
  }
  .pp-deco::after{
    content:''; position:absolute; inset:0; opacity:0.5;
    background-image:radial-gradient(var(--border) 1px, transparent 1px);
    background-size:22px 22px;
    /* środek panelu czysty pod tekst: kropki tylko przy krawędziach */
    -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%, transparent 40%, #000 82%);
    mask-image:radial-gradient(ellipse 72% 68% at 50% 50%, transparent 40%, #000 82%);
  }
  /* iskra biegnąca po ścieżce (pojawia się po wejściu panelu w kadr) */
  /* (kropka-iskra na ścieżce i puls pierwszego markera usunięte: ścieżkę
     wypełnia teraz scroll, patrz .path-draw/.plm-draw + JS scroll-fill) */
  .path-line{ position:absolute; top:0; left:0; width:100%; height:100px; overflow:visible; pointer-events:none; }
  /* wypełnienie sprzęga JS z pozycją scrolla (rAF + lerp), więc BEZ transition:
     transition walczyłoby z płynnym, dwukierunkowym sterowaniem klatka po klatce */
  .path-draw{
    stroke-dasharray:1; stroke-dashoffset:1;
    filter:drop-shadow(0 2px 6px rgba(124,92,252,0.22));
  }
  .path-steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; }
  .path-step{
    position:relative; padding:118px 16px 0; text-align:center;
    opacity:0; transform:translateY(14px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
  }
  .path-panel.in-view .path-step{ opacity:1; transform:translateY(0); }
  .path-panel.in-view .path-step:nth-child(2){ transition-delay:.25s; }
  .path-panel.in-view .path-step:nth-child(3){ transition-delay:.5s; }
  .path-panel.in-view .path-step:nth-child(4){ transition-delay:.75s; }
  .path-marker{
    position:absolute; left:50%; top:70px; translate:-50% -50%; z-index:1;
    width:46px; height:46px; border-radius:50%;
    background:#fff; border:1.5px solid var(--ink); color:var(--text);
    font:600 13px var(--mono); letter-spacing:0.04em;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 26px -14px rgba(15,16,20,0.4);
  }
  .path-step:nth-child(even) .path-marker{ top:30px; }
  .path-step:last-child .path-marker{ background:var(--ink); color:#fff; }
  .path-tag{
    display:inline-block; font:600 10.5px var(--mono); letter-spacing:0.14em; text-transform:uppercase;
    color:var(--violet); background:rgba(124,92,252,0.07); border:1px solid rgba(124,92,252,0.22);
    border-radius:100px; padding:5px 13px;
  }
  /* kolorowe akcenty kolejnych etapów */
  .path-step:nth-child(1) .path-marker{ border-color:var(--violet); color:var(--violet); }
  .path-step:nth-child(2) .path-marker{ border-color:var(--cyan);   color:var(--cyan); }
  .path-step:nth-child(3) .path-marker{ border-color:var(--amber);  color:var(--amber); }
  .path-step:nth-child(2) .path-tag{ color:var(--cyan);  background:rgba(23,184,172,0.08);  border-color:rgba(23,184,172,0.24); }
  .path-step:nth-child(3) .path-tag{ color:#C8892A;      background:rgba(242,169,59,0.10);  border-color:rgba(242,169,59,0.30); }
  .path-step:nth-child(4) .path-tag{ color:var(--text);  background:rgba(15,16,20,0.05);    border-color:rgba(15,16,20,0.14); }
  .path-body h3{ font-family:var(--headline); font-size:17.5px; font-weight:700; letter-spacing:-0.01em; margin:12px 0 8px; }
  .path-body p{ color:var(--text-muted); font-size:13.5px; line-height:1.65; max-width:280px; margin:0 auto; }
  /* mobilna ścieżka: pionowa KRZYWA przez sekcję + czyste wpisy naprzemiennie
     lewo/prawo (bez kart i ramek); węzły-kropki łapią gradient przy in-view */
  .path-line-m{ display:none; }
  @media (max-width:768px){
    .path-line{ display:none; }
    .path-route{ position:relative; }
    .path-line-m{
      display:block; position:absolute; inset:0; width:100%; height:100%;
      overflow:visible; pointer-events:none;
    }
    /* wypełnienie sprzęga JS ze scrollem (rAF + lerp, bez transition);
       PODŚWIETLENIE: wypełniona linia świeci miękką poświatą */
    .plm-draw{
      stroke-dasharray:1; stroke-dashoffset:1;
      filter:drop-shadow(0 0 5px rgba(124,92,252,0.5)) drop-shadow(0 0 14px rgba(23,184,172,0.3));
    }
    .path-steps{ display:flex; flex-direction:column; gap:34px; position:relative; z-index:1; }
    /* wpisy na gołym tle: pełna szerokość wiersza, tekst po jednej stronie krzywej */
    /* tekst do 48% szerokości: kończy się PRZED osią, więc nie koliduje
       z węzłem-kropką (12px na środku = pas 48.5-51.5%) */
    .path-step{ padding:0 52% 0 0; text-align:left; }
    /* wpisy parzyste: tekst dosunięty do prawej krawędzi (dalej od osi i węzła) */
    .path-step:nth-child(even){ padding:0 0 0 52%; text-align:right; }
    .path-tag{ display:none; }
    /* numer jako czysty mono tekst (bez kółka) */
    .path-marker{
      position:static; width:auto; height:auto; border:0; background:none; box-shadow:none;
      display:inline-block; font-size:12px; letter-spacing:0.08em;
      translate:none; /* baza przesuwa marker o -50%/-50% także w position:static */
    }
    .path-step:last-child .path-marker{ background:none; color:var(--text-dim); }
    .path-body h3{ font-size:17px; margin:6px 0 4px; }
    .path-body p{ font-size:14px; margin:0; max-width:none; }
    /* INNA animacja niż na desktopie: wpis NIE pojawia się panelowo ze staggerem,
       tylko każdy z osobna, razem ze swoim węzłem, w momencie wejścia w viewport
       (klasa .lit ze scroll-handlera; nadpisujemy panelowe .in-view i jego delaye) */
    .path-step, .path-panel.in-view .path-step{
      opacity:0; transform:translateY(16px); transition-delay:0s;
      transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
    }
    .path-step.lit, .path-panel.in-view .path-step.lit{ opacity:1; transform:none; }
    .path-panel.in-view .path-step:nth-child(2),
    .path-panel.in-view .path-step:nth-child(3),
    .path-panel.in-view .path-step:nth-child(4){ transition-delay:0s; }
    /* węzły-kropki usunięte: oś wypełnia gradient sprzężony ze scrollem,
       a wpisy dalej odsłaniają się per wpis klasą .lit */
    /* sekcja bez karty i bez ciemnego echa: czysta, "goła" oś czasu */
    .path-panel{ padding:0; background:none; border:0; box-shadow:none; overflow:visible; }
  }
  @media (max-width:768px){
    .path-panel::before{ display:none; }
    .pp-deco{ display:none; }
    .path-echo{ display:none; }
  }

  /* --- moja droga: grafika stronowa zza panelu --- */
  .path-stage{ position:relative; }
  .path-echo{
    position:absolute; inset:-18px; z-index:0;
    background:var(--ink); border-radius:32px; overflow:hidden;
    box-shadow:0 30px 60px -30px rgba(15,16,20,0.5);
  }
  .pe-glow-a{
    position:absolute; width:340px; height:340px; border-radius:50%; left:-100px; bottom:-130px;
    background:radial-gradient(circle, rgba(124,92,252,0.55), rgba(23,184,172,0.2) 55%, transparent 72%);
  }
  .pe-glow-b{
    position:absolute; width:300px; height:300px; border-radius:50%; right:-90px; top:-110px;
    background:radial-gradient(circle, rgba(23,184,172,0.34), rgba(23,184,172,0.12) 50%, transparent 72%);
  }
  .path-echo::after{
    content:''; position:absolute; right:26px; bottom:22px; width:36px; height:8px; border-radius:100px;
    background:var(--grad); opacity:0.9;
  }
  .path-stage .path-panel{ position:relative; z-index:1; }
  /* telefony: panel drogi przebudowany na czystą krzywą oś czasu, reguły wyżej
     (blok "mobilna ścieżka"); stary kompaktowy panel usunięty, by nie nadpisywał */

  /* --- znak marki w logo --- */
  .logo .logo-mark{
    flex-shrink:0; border-radius:6px;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .logo:hover .logo-mark{ transform:rotate(-6deg) scale(1.08); }

  /* ---------- STRONY PRAWNE (polityka prywatności, regulamin) ----------
     dokumentowy layout: wąska kolumna treści + sticky spis treści po lewej;
     na mobile spis zwijany nad treścią (przycisk .legal-toc-btn) */
  .legal-grid{
    max-width:1100px; margin:0 auto;
    padding:calc(var(--nav-total) + 56px) 32px 96px;
    display:grid; grid-template-columns:230px minmax(0,760px);
    gap:64px; justify-content:center; align-items:start;
  }
  .legal-head{ margin-bottom:44px; padding-bottom:28px; border-bottom:1px solid var(--border); }
  .legal-head h1{ font-family:var(--headline); font-weight:800; font-size:clamp(32px,4.5vw,44px); letter-spacing:-0.02em; line-height:1.08; }
  .legal-date{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); margin-top:14px; }

  .legal-toc{ position:sticky; top:calc(var(--nav-total) + 28px); }
  .legal-toc-btn{ display:none; }
  .legal-toc-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px; }
  .legal-toc-list{ display:flex; flex-direction:column; }
  .legal-toc-list a{
    position:relative; font-family:var(--mono); font-size:12.5px; line-height:1.45;
    color:var(--text-muted); padding:7px 10px 7px 16px;
    border-left:2px solid var(--border);
    transition:color .18s ease;
  }
  .legal-toc-list a:hover{ color:var(--ink); }
  .legal-toc-list a.is-active{ color:var(--ink); }
  .legal-toc-list a.is-active::before{ content:''; position:absolute; left:-2px; top:4px; bottom:4px; width:2px; background:var(--grad); }

  .legal-sec{ margin-bottom:38px; scroll-margin-top:calc(var(--nav-total) + 24px); }
  .legal-sec h2{ font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-0.01em; margin-bottom:14px; }
  .legal-sec h2 .pnum{
    font-family:var(--mono); font-weight:700; font-size:15px; margin-right:10px;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .legal-sec p, .legal-sec li{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); }
  .legal-sec p + p, .legal-sec ol + p, .legal-sec ul + p{ margin-top:12px; }
  .legal-sec ol, .legal-sec ul{ margin-top:12px; padding-left:28px; display:flex; flex-direction:column; gap:8px; }
  .legal-sec ul li::marker{ color:var(--cyan); }
  .legal-sec ol li::marker{ font-family:var(--mono); font-size:13px; color:var(--text-muted); }
  .legal-sec li ul, .legal-sec li ol{ margin-top:8px; }
  .legal-sec a{ color:var(--violet); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color .15s ease; }
  .legal-sec a:hover{ color:var(--cyan); }

  /* miejsca do uzupełnienia przez właściciela: wyraźnie oznaczone do czasu decyzji */
  .legal-sec .ph{
    font-family:var(--mono); font-size:0.9em; padding:1px 7px; border-radius:6px;
    background:rgba(242,169,59,0.13); border:1px dashed rgba(242,169,59,0.55); color:var(--ink);
  }

  @media (max-width:960px){
    .legal-grid{ grid-template-columns:minmax(0,1fr); gap:26px; padding:calc(var(--nav-total) + 36px) 20px 72px; }
    .legal-head{ margin-bottom:6px; }
    .legal-toc{ position:static; border:1px solid var(--border); border-radius:14px; background:var(--bg-soft); padding:2px 16px; }
    .legal-toc-label{ display:none; }
    .legal-toc-btn{
      display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
      background:none; border:none; cursor:pointer; padding:12px 0;
      font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
    }
    .legal-toc-btn .car{ transition:transform .3s ease; }
    .legal-toc.open .legal-toc-btn .car{ transform:rotate(180deg); }
    .legal-toc-list{ display:none; padding-bottom:12px; }
    .legal-toc.open .legal-toc-list{ display:flex; }
  }