/* ═══════════════════════════════════════════════════════════════
   PODSTRONA USŁUGI (wzorzec finalny v3)
   Ładowany PO style.css. Klasy .ul- , guard skryptów: body.usluga-page
   Dramaturgia: czerń (hero+problem) -> rozjaśnienie -> jasna treść
   -> ściemnienie -> czerń (pytania+finał).
   Motyw navbara i pigułki powrotu: DOMYŚLNIE ciemny; klasa body.ul-light
   (przełączana w JS przy zdaniach-mostach) daje wariant jasny.
   ═══════════════════════════════════════════════════════════════ */

  /* ---------- navbar: wariant CIEMNY (domyślny na tej podstronie) ---------- */
  .usluga-page .navbar{
    background:rgba(21,22,27,0.72); border-color:rgba(255,255,255,0.1);
    box-shadow:0 10px 30px -18px rgba(0,0,0,0.65);
    transition:padding .28s ease, box-shadow .4s ease, background .4s ease, border-color .4s ease;
  }
  .usluga-page header.scrolled .navbar{
    background:rgba(21,22,27,0.92);
    box-shadow:0 16px 40px -20px rgba(0,0,0,0.75);
  }
  .usluga-page .navbar .logo{ color:#fff; transition:color .4s ease; }
  .usluga-page .nav-links a{ color:rgba(255,255,255,0.6); transition:color .4s ease; }
  .usluga-page .nav-links a:hover{ color:#fff; }
  .usluga-page .nav-links a.is-active{ color:#fff; }
  .usluga-page .nav-links a .slash{ color:rgba(255,255,255,0.22); transition:color .4s ease; }
  .usluga-page .nav-pill{ background:rgba(255,255,255,0.1); }
  .usluga-page .nav-cta{ background:#fff; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease, background .4s ease, color .4s ease; }
  .usluga-page .nav-toggle span,
  .usluga-page .nav-toggle span::before,
  .usluga-page .nav-toggle span::after{ background:#fff; transition:transform .25s ease, opacity .2s ease, background .4s ease; }
  .usluga-page .mobile-nav{ background:var(--ink); border-bottom-color:rgba(255,255,255,0.1); }
  .usluga-page .mobile-nav a{ color:rgba(255,255,255,0.7); border-top-color:rgba(255,255,255,0.08); }
  .usluga-page .mobile-nav a:hover, .usluga-page .mobile-nav a:active{ background:rgba(255,255,255,0.06); color:#fff; }

  /* ---------- navbar: wariant JASNY (strefa jasna: body.ul-light) ---------- */
  .usluga-page.ul-light .navbar{
    background:rgba(255,255,255,0.72); border-color:var(--border);
    box-shadow:0 10px 30px -18px rgba(15,16,20,0.28);
  }
  .usluga-page.ul-light header.scrolled .navbar{
    background:rgba(255,255,255,0.9);
    box-shadow:0 16px 40px -20px rgba(15,16,20,0.42);
  }
  .usluga-page.ul-light .navbar .logo{ color:var(--ink); }
  .usluga-page.ul-light .nav-links a{ color:var(--text-muted); }
  .usluga-page.ul-light .nav-links a:hover{ color:var(--ink); }
  .usluga-page.ul-light .nav-links a.is-active{ color:var(--ink); }
  .usluga-page.ul-light .nav-links a .slash{ color:var(--border-strong); }
  .usluga-page.ul-light .nav-pill{ background:var(--bg-soft); }
  .usluga-page.ul-light .nav-cta{ background:var(--ink); color:#fff; }
  .usluga-page.ul-light .nav-toggle span,
  .usluga-page.ul-light .nav-toggle span::before,
  .usluga-page.ul-light .nav-toggle span::after{ background:var(--ink); }
  /* stan otwarty: środkowa kreska MUSI zniknąć, żeby X był czysty; powyższe nadpisania
     kolorów (biała/ciemna kreska per strefa) wygrywały ze stanem .open ze style.css,
     bo usluga.css ładuje się później (ta sama specyficzność, źródło decyduje) */
  .usluga-page .nav-toggle.open span,
  .usluga-page.ul-light .nav-toggle.open span{ background:transparent; }
  .usluga-page.ul-light .mobile-nav{ background:#fff; border-bottom-color:var(--border); }
  .usluga-page.ul-light .mobile-nav a{ color:var(--text-muted); border-top-color:var(--border); }
  .usluga-page.ul-light .mobile-nav a:hover, .usluga-page.ul-light .mobile-nav a:active{ background:var(--bg-soft); color:var(--ink); }

  /* widget "Masz pytanie?" schowany, dopóki hero jest w kadrze (klasa z JS) */
  .usluga-page.ul-hero-inview .float-widget{ opacity:0; transform:translateY(16px); pointer-events:none; }

  /* ---------- gradientowy akcent tekstu (wspólny) ---------- */
  .ul-grad{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ---------- sticky pigułka powrotu "← usługi" (ta sama logika stref) ---------- */
  .ul-back{
    position:fixed; top:calc(var(--nav-total) + 16px); left:24px; z-index:95;
    display:inline-flex; align-items:center; gap:8px; min-height:44px;
    font-family:var(--mono); font-size:12.5px;
    color:rgba(255,255,255,0.8);
    background:rgba(255,255,255,0.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:10px 18px;
    transition:color .4s ease, background .4s ease, border-color .4s ease;
  }
  .ul-back .ul-back-arr{ display:inline-block; transition:transform .25s ease; }
  .ul-back:hover{ color:#fff; }
  .ul-back:hover .ul-back-arr{ transform:translateX(-4px); }
  .ul-light .ul-back{
    background:rgba(255,255,255,0.85); border-color:var(--border); color:var(--text-muted);
  }
  .ul-light .ul-back:hover{ color:var(--ink); }
  @media (max-width:1023px){ .ul-back{ display:none; } }

  /* ---------- 1. HERO (ciemne, dwukolumnowe: tekst + okno podglądu) ---------- */
  .ul-hero{
    position:relative; overflow:hidden; background:var(--ink); color:#fff;
    min-height:100svh; display:flex; align-items:center;
    /* safe center: przy treści wyższej niż ekran wyrównanie od góry
       zamiast wypychania pierwszego wersu pod pływający navbar */
    align-items:safe center;
    padding:calc(var(--nav-total) + 24px) 0 120px;
  }
  .ul-hero .wrap{
    position:relative; z-index:2; width:100%;
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:56px; align-items:center;
  }
  .ul-hero-glow{
    position:absolute; z-index:0; pointer-events:none;
    width:760px; height:760px; border-radius:50%; right:-240px; top:-280px;
    background:radial-gradient(circle, rgba(124,92,252,0.5), rgba(23,184,172,0.2) 55%, transparent 72%);
    filter:blur(40px); transform:translateZ(0); will-change:transform;
  }
  .ul-crumb{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:rgba(255,255,255,0.45); }
  .ul-crumb a{ color:rgba(255,255,255,0.65); transition:color .2s ease; }
  .ul-crumb a:hover{ color:#fff; }
  .ul-crumb .sep{ margin:0 8px; color:rgba(255,255,255,0.22); }
  .ul-hero h1{
    font-family:var(--headline); font-weight:800; letter-spacing:-0.03em; line-height:1.06;
    font-size:clamp(44px,5.4vw,78px); margin-top:20px;
  }
  /* lead ZAWSZE w jednej linii na desktopie (rozmiar dobrany bezpiecznym clampem) */
  .ul-hero-lead{ margin-top:22px; color:#A9AEBB; font-size:clamp(15px,1.3vw,17.5px); line-height:1.7; }
  @media (min-width:1024px){ .ul-hero-lead{ white-space:nowrap; } }
  .ul-hero-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px; margin-top:38px; }
  .ul-btn{
    display:inline-flex; align-items:center; gap:12px;
    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;
  }
  .ul-btn .ul-arr{ transition:transform .25s ease; }
  .ul-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,0.45); }
  .ul-btn:hover .ul-arr{ transform:translateX(4px); }
  .ul-hero-more{ font-family:var(--mono); font-size:13px; color:rgba(255,255,255,0.55); transition:color .2s ease; padding:10px 0; }
  .ul-hero-more:hover{ color:#fff; }
  .ul-scroll{
    position:absolute; z-index:2; left:50%; bottom:26px; margin-left:-11px;
    width:22px; height:34px; border:1.5px solid rgba(255,255,255,0.3); border-radius:11px;
  }
  .ul-scroll::after{
    content:''; position:absolute; left:50%; top:6px; width:3px; height:7px; margin-left:-1.5px;
    border-radius:2px; background:rgba(255,255,255,0.7);
    animation:ul-scroll-drop 1.8s ease-in-out infinite;
  }
  @keyframes ul-scroll-drop{
    0%{ transform:translateY(0); opacity:1; }
    70%{ transform:translateY(12px); opacity:0; }
    100%{ transform:translateY(0); opacity:0; }
  }
  @media (max-width:1023px){
    .ul-hero .wrap{ grid-template-columns:1fr; gap:44px; }
    .ul-hero{ padding-bottom:100px; }
  }
  @media (max-width:768px){
    .ul-hero h1{ font-size:clamp(34px,10vw,52px); }
    .ul-hero-lead{ font-size:15px; }
    .ul-crumb{ font-size:10.5px; }
  }

  /* ---------- okno w HERO: prosta zapowiedź (pełna makieta mieszka w "Co to jest") ---------- */
  /* OSTROŚĆ: makieta CAŁKOWICIE statyczna (bez lewitacji i animacji ciągłych),
     zero filter/will-change; tekst mono rasteryzuje się raz i zostaje ostry */
  .ul-mock{
    justify-self:end; width:100%; max-width:360px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.16); border-radius:16px;
    overflow:hidden; pointer-events:none;
  }
  .ul-mock-bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.16); }
  .ul-mock-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.32); }
  .ul-mock-bar em{
    font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
    color:rgba(255,255,255,0.62); margin-left:8px;
  }
  .ul-mock-body{ padding:22px; display:flex; flex-direction:column; gap:12px; }
  .ul-mock-line{ height:11px; border-radius:4px; background:rgba(255,255,255,0.26); }
  .ul-mock-line.big{ height:19px; width:80%; border-radius:5px; background:rgba(255,255,255,0.42); }
  .ul-mock-line.w70{ width:70%; }
  .ul-mock-line.w45{ width:45%; }
  .ul-mock-btn{
    align-self:flex-start; margin-top:10px;
    font-family:var(--display); font-size:12.5px; font-weight:600;
    color:#fff; background:var(--grad); border-radius:9px; padding:9px 18px;
  }
  /* mobile/tablet: okno-zapowiedź POD tekstem, wycentrowane, nie szersze niż 82% kolumny */
  @media (max-width:1023px){ .ul-mock{ justify-self:center; margin-inline:auto; max-width:82%; } }

  /* ---------- 2. PROBLEM (ciemna kontynuacja, zdania-bóle wyśrodkowane) ---------- */
  .ul-problem{ background:var(--ink); color:#fff; padding:30px 0 130px; border-top:none; }
  .ul-pains{ display:flex; flex-direction:column; align-items:center; gap:36px; text-align:center; }
  .ul-pain{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.3;
    font-size:clamp(22px,2.2vw,32px); color:#fff;
  }
  .ul-pain em{ font-style:normal; color:rgba(255,255,255,0.38); }
  /* każde zdanie w jednej linii na desktopie */
  @media (min-width:1024px){ .ul-pain{ white-space:nowrap; } }

  /* ---------- 3. PRZEJŚCIE ciemne -> jasne (zdanie-most 1) ---------- */
  .ul-bridge{
    min-height:80svh; display:flex; align-items:center; justify-content:center; text-align:center;
    border-top:none; padding:80px 0;
    background:linear-gradient(180deg,
      var(--ink) 0%, var(--ink) 20%,
      #3A3C46 52%,
      #9B9CA3 78%,
      var(--bg) 100%);
  }
  .ul-bridge h2{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.25;
    font-size:clamp(26px,3.1vw,40px); color:#F1F2F6; margin:0 auto;
  }
  @media (min-width:1024px){ .ul-bridge h2{ white-space:nowrap; } }

  /* ---------- JASNA PARTIA: jeden wspólny flow, czyste nagłówki ---------- */
  .ul-flow{ padding:70px 0 110px; border-top:none; overflow:visible; background:var(--bg); }
  .ul-flow > .wrap{ max-width:1020px; }
  .ul-block + .ul-block{ margin-top:96px; }
  /* subtelny gradientowy separator między blokami */
  .ul-block + .ul-block::before{
    content:''; display:block; width:60px; height:3px; border-radius:2px;
    background:var(--grad); margin-bottom:44px;
  }
  .ul-block[id]{ scroll-margin-top:calc(var(--nav-total) + 16px); }
  .ul-block h2{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.2;
    font-size:clamp(30px,3.6vw,40px); color:var(--text); margin-bottom:28px;
  }
  @media (max-width:768px){
    .ul-flow{ padding:48px 0 80px; }
    .ul-block + .ul-block{ margin-top:68px; }
    .ul-block + .ul-block::before{ margin-bottom:32px; }
  }

  /* co to jest: duża, spokojna typografia + większy nagłówek */
  #co-to-jest h2{ font-size:clamp(38px,4.5vw,52px); }
  .ul-body p{ color:var(--text-muted); font-size:19.5px; line-height:1.85; max-width:720px; }
  .ul-body p + p{ margin-top:20px; }
  .ul-pull{
    margin:38px 0 0; max-width:720px;
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.3;
    font-size:clamp(28px,3.2vw,34px); color:var(--text);
  }

  /* prawa flanka "Co to jest": pełna makieta wizytówki rysująca się przy scrollu.
     Zbudowana modułowo (sekcje z data-sec), pod podmianę wnętrza per usługa. */
  .ul-what{ display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:40px; align-items:start; }
  /* na węższych desktopach tekst dostaje więcej (60/40) */
  @media (min-width:1024px) and (max-width:1200px){
    .ul-what{ grid-template-columns:minmax(0,60fr) minmax(0,40fr); }
  }
  /* makieta STATYCZNA: wycentrowana w pionie względem tekstu, dosunięta do prawej;
     żadnego rotate/hover/will-change — priorytet to ostrość tekstu w paskach */
  .ul-preview{
    align-self:center; justify-self:end; width:100%; max-width:360px;
    background:#fff; border:1px solid var(--border-strong); border-radius:14px; overflow:hidden;
    box-shadow:0 18px 40px -26px rgba(15,16,20,0.28);
  }
  .ul-pv-bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--border-strong); }
  .ul-pv-bar span{ width:9px; height:9px; border-radius:50%; background:#BFBCB2; }
  .ul-pv-bar em{
    font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:0.03em;
    color:var(--text-muted); margin-left:8px;
  }
  .ul-pv-body{ padding:20px; display:flex; flex-direction:column; gap:20px; }
  .ul-pv-sec{ display:flex; flex-direction:column; gap:9px; }
  .ul-pv-label{
    font-style:normal; font-family:var(--mono); font-size:10.5px; font-weight:600;
    letter-spacing:0.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px;
  }
  /* WZORZEC OSTROŚCI: pełne 1px obramowania w --border-strong, wypełnienie --bg-elevated,
     żadnych cieni wewnętrznych ani półprzezroczystych szarości, moduły duże i czytelne */
  .ul-pv-line{ display:block; height:11px; border-radius:3px; background:var(--bg-elevated); border:1px solid var(--border-strong); }
  .ul-pv-line.xl{ height:19px; width:80%; border-radius:4px; }
  .ul-pv-line.w70{ width:70%; }
  .ul-pv-line.w60{ width:60%; }
  .ul-pv-line.w45{ width:45%; }
  .ul-pv-row{ display:flex; align-items:center; gap:10px; }
  .ul-pv-row .ul-pv-line{ flex:1; }
  .ul-pv-av{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border-strong); }
  .ul-pv-map{
    position:relative; height:64px; border-radius:6px;
    background:var(--bg-elevated); border:1px solid var(--border-strong);
  }
  .ul-pv-map i{
    position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-11px 0 0 -8px;
    border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--grad);
  }
  .ul-pv-btn{
    align-self:flex-start; font-family:var(--display); font-size:12.5px; font-weight:600;
    color:#fff; background:var(--grad); border-radius:8px; padding:10px 18px;
  }
  .ul-pv-btn.big{ align-self:center; padding:11px 26px; font-size:13px; }
  /* prymitywy tematyczne (wnętrza makiet per usługa) */
  .ul-pv-tabs{ display:flex; gap:6px; }
  .ul-pv-tabs i{ height:15px; flex:1; border-radius:3px; background:var(--bg-elevated); border:1px solid var(--border-strong); }
  .ul-pv-tabs i.on{ background:var(--grad); border-color:transparent; }
  .ul-pv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ul-pv-grid i{ height:44px; border-radius:5px; background:var(--bg-elevated); border:1px solid var(--border-strong); }
  .ul-pv-grid i.g{ background:linear-gradient(135deg, rgba(124,92,252,0.5), rgba(23,184,172,0.4)); border-color:transparent; }
  .ul-pv-thumb{ flex-shrink:0; width:30px; height:30px; border-radius:5px; background:var(--bg-elevated); border:1px solid var(--border-strong); }
  .ul-pv-col{ display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; }
  .ul-pv-split{ display:flex; gap:10px; }
  .ul-pv-split i{ flex:1; height:70px; border-radius:6px; }
  .ul-pv-split i:first-child{ background:repeating-linear-gradient(45deg, var(--bg-elevated) 0 7px, #DEDBD2 7px 14px); border:1px solid var(--border-strong); }
  .ul-pv-split i:last-child{ background:linear-gradient(135deg, rgba(124,92,252,0.5), rgba(23,184,172,0.4)); }
  .ul-pv-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
  .ul-pv-cal i{ aspect-ratio:1/1; border-radius:3px; background:var(--bg-elevated); border:1px solid var(--border-strong); }
  .ul-pv-cal i.g{ background:var(--grad); border-color:transparent; }
  .ul-pv-check{ display:flex; align-items:center; gap:10px; }
  .ul-pv-check b{ flex-shrink:0; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--cyan); }
  .ul-pv-check b.bad{ color:var(--rose); }
  .ul-pv-check .ul-pv-line{ flex:1; }
  .ul-pv-score{ position:relative; height:12px; border-radius:3px; background:var(--bg-elevated); border:1px solid var(--border-strong); overflow:hidden; }
  .ul-pv-score i{ position:absolute; top:0; bottom:0; left:0; width:68%; background:var(--grad); }
  .ul-pv-line.hl{ background:linear-gradient(90deg, rgba(124,92,252,0.42), rgba(23,184,172,0.32)); border-color:transparent; }
  .ul-pv-addr{
    height:28px; border-radius:6px; background:var(--bg-elevated); border:1px solid var(--border-strong);
    display:flex; align-items:center; gap:9px; padding:0 10px;
  }
  .ul-pv-addr::before{ content:''; flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--cyan); }
  .ul-pv-addr i{ flex:1; height:8px; border-radius:2px; background:#fff; border:1px solid var(--border-strong); }
  .ul-pv-srv{
    height:26px; border-radius:5px; background:var(--bg-elevated); border:1px solid var(--border-strong);
    display:flex; align-items:center; padding:0 10px;
  }
  .ul-pv-srv::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--cyan); }
  .ul-pv-move{ display:flex; align-items:center; gap:10px; }
  .ul-pv-move i{ flex:1; height:52px; border-radius:6px; background:var(--bg-elevated); border:1px solid var(--border-strong); }
  .ul-pv-move i:last-child{
    background:linear-gradient(135deg, rgba(124,92,252,0.5), rgba(23,184,172,0.4)); border-color:transparent;
  }
  .ul-pv-move b{
    flex-shrink:0; font-family:var(--mono); font-size:15px; font-weight:700;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .ul-pv-badge{
    flex-shrink:0; width:34px; height:34px; border-radius:50%; border:2px solid var(--cyan);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:14px; font-weight:700; color:var(--cyan);
  }
  /* sekcje makiety pojawiają się KOLEJNO przy in-view (klasa .in z JS) */
  .ul-pv-sec{ opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
  .ul-preview.in .ul-pv-sec{ opacity:1; transform:none; }
  .ul-preview.in .ul-pv-sec:nth-child(2){ transition-delay:.22s; }
  .ul-preview.in .ul-pv-sec:nth-child(3){ transition-delay:.44s; }
  .ul-preview.in .ul-pv-sec:nth-child(4){ transition-delay:.66s; }
  .ul-preview.in .ul-pv-sec:nth-child(5){ transition-delay:.88s; }
  @media (max-width:1023px){
    .ul-what{ grid-template-columns:1fr; gap:36px; }
    .ul-preview{ justify-self:center; margin-inline:auto; max-width:360px; }
  }

  /* dla kogo: karty (bez sztywnego kwadratu, bez paska przeciwwskazań) */
  .ul-personas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  /* hover STONOWANY: lift 3px + border-strong + delikatnie głębszy cień + tytuł 4px w prawo;
     bez gradientowego paska i bez kolorowania ikony */
  .ul-persona{
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; gap:18px; align-items:flex-start; text-align:left;
    padding:32px; border-radius:20px;
    background:#fff; border:1px solid var(--border);
    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1);
  }
  .ul-persona:hover{
    transform:translateY(-3px); border-color:var(--border-strong);
    box-shadow:0 18px 36px -24px rgba(15,16,20,0.2);
  }
  .ul-p-ico{
    flex-shrink:0;
    width:48px; height:48px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background-color:var(--bg-soft); border:1px solid var(--border); color:var(--ink);
  }
  .ul-p-ico svg, .ul-p-ico svg *{ fill:none; stroke:currentColor; }
  .ul-persona h4{
    font-family:var(--display); font-size:19px; font-weight:600; color:var(--text);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .ul-persona:hover h4{ transform:translateX(4px); }
  .ul-persona p{ color:var(--text-muted); font-size:15.5px; line-height:1.7; margin-top:-8px; }
  /* tablet i niżej: jedna kolumna, karty poziome (ikona po lewej) */
  @media (max-width:1024px){
    .ul-personas{ grid-template-columns:1fr; }
    .ul-persona{ flex-direction:row; align-items:flex-start; gap:20px; padding:24px; }
    .ul-persona h4{ font-size:17px; }
    .ul-persona p{ margin-top:8px; }
  }
  @media (max-width:1024px){ .ul-p-txt{ display:flex; flex-direction:column; gap:8px; } }
  .ul-p-txt{ display:flex; flex-direction:column; gap:10px; }
  .ul-p-txt p{ margin-top:0; }

  /* co dostajesz: spokojna siatka 6 równych kart */
  .ul-gets{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:1024px){ .ul-gets{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .ul-gets{ grid-template-columns:1fr; } }
  .ul-get{
    background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px 22px;
    transition:transform .25s ease, border-color .25s ease;
  }
  .ul-get:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
  .ul-get svg{ display:block; color:var(--ink); }
  .ul-get h4{ font-family:var(--display); font-size:16.5px; font-weight:600; color:var(--text); margin-top:14px; }
  .ul-get p{ color:var(--text-muted); font-size:14.5px; line-height:1.6; margin-top:6px; }

  /* przebieg: pionowy zygzak (neutralne numery) */
  .ul-tl{ position:relative; display:flex; flex-direction:column; gap:36px; padding:14px 0; }
  .ul-tl-line{
    position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; border-radius:2px;
    background:var(--border); overflow:hidden;
  }
  .ul-tl-fill{
    position:absolute; inset:0; background:var(--grad);
    transform:scaleY(var(--tlp,0)); transform-origin:center top; will-change:transform;
  }
  .ul-step{
    position:relative; width:calc(50% - 46px);
    background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px 24px;
    opacity:0; transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
  }
  .ul-step-l{ align-self:flex-start; transform:translateX(-24px); }
  .ul-step-r{ align-self:flex-end; transform:translateX(24px); }
  .ul-step.lit{ opacity:1; transform:none; }
  .ul-step-dot{
    position:absolute; top:26px; width:16px; height:16px; border-radius:50%;
    background:var(--bg); border:2px solid var(--border-strong);
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .ul-step-l .ul-step-dot{ right:-54px; }
  .ul-step-r .ul-step-dot{ left:-54px; }
  .ul-step.lit .ul-step-dot{ border-color:var(--violet); box-shadow:0 0 0 5px rgba(124,92,252,0.12); }
  /* numery etapów neutralne: dim -> ink po in-view (bez gradientu) */
  .ul-step-num{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); transition:color .3s ease; }
  .ul-step.lit .ul-step-num{ color:var(--ink); }
  .ul-step h4{ font-family:var(--display); font-size:16px; font-weight:600; color:var(--text); margin-top:7px; }
  .ul-step p{ color:var(--text-muted); font-size:14px; line-height:1.6; margin-top:6px; }
  .ul-step-time{
    display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--text-dim);
    border:1px solid var(--border); border-radius:999px; padding:4px 10px;
  }
  /* DESKTOP: zwarta jedna kolumna zamiast zygzaka (zygzak zostawiał wielkie puste pola);
     linia po lewej, karty pełną szerokością, nagłówek karty w jednym wierszu */
  @media (min-width:861px){
    .ul-tl{ max-width:720px; gap:18px; padding:14px 0 14px 46px; }
    .ul-tl-line{ left:8px; margin-left:0; }
    .ul-step, .ul-step-l, .ul-step-r{
      width:100%; align-self:stretch; padding:20px 24px; transform:translateX(16px);
    }
    .ul-step.lit{ transform:none; }
    .ul-step-l .ul-step-dot, .ul-step-r .ul-step-dot{ left:-45px; right:auto; top:24px; }
    /* jeden wiersz: mono numer + tytuł + chip czasu przy prawej; opis pod spodem */
    .ul-step{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:14px; align-items:baseline; }
    .ul-step-num{ grid-row:1; grid-column:1; }
    .ul-step h4{ grid-row:1; grid-column:2; margin-top:0; }
    .ul-step-time{ grid-row:1; grid-column:3; margin-top:0; justify-self:end; }
    .ul-step p{ grid-row:2; grid-column:1 / -1; margin-top:8px; }
  }

  @media (max-width:860px){
    .ul-tl{ padding-left:40px; gap:26px; }
    .ul-tl-line{ left:7px; margin-left:0; }
    .ul-step, .ul-step-l, .ul-step-r{
      width:100%; align-self:stretch; transform:translateX(24px);
    }
    .ul-step.lit{ transform:none; }
    .ul-step-l .ul-step-dot, .ul-step-r .ul-step-dot{ left:-40px; right:auto; }
  }

  /* cena: wielka typografia bez pudełka, sekcja oddycha */
  .ul-price-block{ text-align:center; padding:56px 0 40px; }
  .ul-price-eyebrow{ font-family:var(--mono); font-size:12.5px; color:var(--violet); }
  .ul-price-big{
    display:flex; align-items:baseline; justify-content:center; gap:16px; margin-top:18px;
    font-family:var(--headline); font-weight:800; letter-spacing:-0.03em; color:var(--text);
  }
  .ul-price-big small{ font-family:var(--mono); font-size:16px; font-weight:400; letter-spacing:0; color:var(--text-dim); }
  .ul-price-num{
    font-size:clamp(72px,11vw,128px); line-height:1; font-variant-numeric:tabular-nums;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .ul-price-zl{ font-size:clamp(30px,4.5vw,52px); font-weight:700; }
  .ul-price-note{ margin:22px auto 0; color:var(--text-muted); font-size:18px; max-width:640px; }
  .ul-price-facts{
    margin-top:22px; font-family:var(--mono); font-size:13px; color:var(--text-dim);
    display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px;
  }
  .ul-price-facts .dot{ color:var(--border-strong); }
  .ul-price-block .btn{ margin-top:34px; }

  /* ---------- PRZEJŚCIE jasne -> ciemne (zdanie-most 2, lustrzana klamra) ---------- */
  .ul-bridge2{
    min-height:80svh; display:flex; align-items:center; justify-content:center; text-align:center;
    border-top:none; padding:80px 0;
    background:linear-gradient(180deg,
      var(--bg) 0%,
      #9B9CA3 26%,
      #3A3C46 52%,
      var(--ink) 82%, var(--ink) 100%);
  }
  .ul-bridge2 h2{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em; line-height:1.25;
    font-size:clamp(24px,2.9vw,38px); color:#F1F2F6; margin:0 auto;
  }
  @media (min-width:1024px){ .ul-bridge2 h2{ white-space:nowrap; } }

  /* ---------- PYTANIA na ciemnym tle (nagłówek i lista wyśrodkowane) ---------- */
  .ul-faq-dark{ background:var(--ink); border-top:none; padding:80px 0 110px; }
  .ul-faq-dark h2{
    font-family:var(--headline); font-weight:700; letter-spacing:-0.02em;
    font-size:clamp(30px,3.6vw,40px); color:#fff; margin-bottom:28px; text-align:center;
  }
  .ul-faq-dark .faq-list{ margin:0 auto; max-width:760px; border-top:1px solid rgba(255,255,255,0.14); }
  .ul-faq-dark .faq-item{ border-bottom-color:rgba(255,255,255,0.14); }
  .ul-faq-dark .faq-q{ color:#fff; }
  .ul-faq-dark .faq-q:hover{ color:var(--cyan); }
  .ul-faq-dark .faq-ic::before, .ul-faq-dark .faq-ic::after{ background:rgba(255,255,255,0.55); }
  .ul-faq-dark .faq-q[aria-expanded="true"] .faq-ic::before,
  .ul-faq-dark .faq-q[aria-expanded="true"] .faq-ic::after{ background:var(--cyan); }
  .ul-faq-dark .faq-a-inner p{ color:#A9AEBB; }

  /* ---------- FINAŁ na ciemnym tle ---------- */
  .ul-final{ background:var(--ink); border-top:none; padding-top:0; padding-bottom:0; }
  .ul-all{
    display:inline-block; margin-top:26px; font-family:var(--mono); font-size:13px;
    color:rgba(255,255,255,0.55); transition:color .2s ease;
  }
  .ul-all:hover{ color:#fff; }

  /* ---------- reveal ze staggerem ---------- */
  .ul-stagger.reveal{ opacity:1; transform:none; } /* animujemy dzieci, nie kontener */
  .ul-stagger > *{ opacity:0; transform:translateY(16px); }
  .ul-stagger.in-view > *{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
  .ul-stagger.in-view > *:nth-child(2){ transition-delay:.1s; }
  .ul-stagger.in-view > *:nth-child(3){ transition-delay:.2s; }
  .ul-stagger.in-view > *:nth-child(4){ transition-delay:.3s; }
  .ul-stagger.in-view > *:nth-child(5){ transition-delay:.4s; }
  .ul-stagger.in-view > *:nth-child(6){ transition-delay:.5s; }

  /* ---------- MOBILE/TABLET (<=1023px): wyśrodkowane nagłówki sekcji i CTA ceny ----------
     hero h1 usługi celowo NIE jest centrowany (nie należy do .ul-block);
     blok na końcu pliku, za wszystkimi bazami (kaskada) */
  @media (max-width:1023px){
    .ul-block h2{ text-align:center; }
    .ul-block + .ul-block::before{ margin-left:auto; margin-right:auto; }
    /* przycisk "Bezpłatna wycena ->" pod ceną: większy, wycentrowany
       (price-block jest text-align:center, inline-flex sam się centruje) */
    .ul-price-block .btn{ padding:16px 18px 16px 30px; font-size:16px; }
  }

  /* ---------- MOBILE (<=768px): kompaktowe sekcje podstron usług ----------
     blok celowo NA KOŃCU pliku, za wszystkimi bazami (kaskada: później = wygrywa) */
  @media (max-width:768px){
    /* zdania-bóle: od 20px, wyśrodkowane, zawijają naturalnie */
    .ul-pain{ font-size:clamp(20px,5.5vw,26px); }
    .ul-problem{ padding:24px 0 80px; }
    /* strefy przejść ciemne<->jasne skrócone */
    .ul-bridge, .ul-bridge2{ min-height:45svh; padding:56px 0; }
    /* "Co to jest": nagłówek od 28px, akapity 15px/1.75, makieta pod tekstem 88% */
    #co-to-jest h2{ font-size:clamp(28px,7.5vw,36px); }
    .ul-body p{ font-size:15px; line-height:1.75; }
    .ul-pull{ font-size:clamp(22px,6vw,28px); margin-top:28px; }
    .ul-preview{ max-width:88%; }
    /* cena: "od X zł" od 52px, fakty w kolumnie */
    .ul-price-num{ font-size:clamp(52px,15vw,80px); }
    .ul-price-zl{ font-size:clamp(24px,6vw,34px); }
    .ul-price-note{ font-size:15px; }
    .ul-price-facts{ flex-direction:column; align-items:center; gap:8px; }
    .ul-price-facts .dot{ display:none; }
    .ul-price-block{ padding:36px 0 24px; }
    /* pytania + finał kompaktowo (sam pas .contact ma globalną regułę mobile) */
    .ul-faq-dark{ padding:48px 0 64px; }
    .ul-faq-dark h2{ font-size:clamp(26px,7vw,32px); margin-bottom:20px; }
  }

  /* ---------- reduced motion: stany końcowe bez animacji ---------- */
  @media (prefers-reduced-motion: reduce){
    .ul-scroll::after{ animation:none; }
    .ul-mock{ animation:none; }
    .ul-mock-btn{ animation:none; }
    .ul-pv-sec{ opacity:1; transform:none; }
    .ul-tl-fill{ transform:none; }
    .ul-step, .ul-step-l, .ul-step-r{ opacity:1; transform:none; }
    .ul-stagger > *{ opacity:1; transform:none; }
  }