/* moduł motywy — kilka akcentów z openbot.run na starej stronie (Dawid 10.10: „stara strona ma przeważać”).
   Szklana nawigacja z pigułką linków, etykieta hero jako pigułka z pulsującą kropką,
   miększe karty, „+” → „×” w pytaniach, połysk kwot (desktop z myszą), wejścia z rozmyciem (motywy.js).
   Kolory, fonty, układ i stare moduły bez zmian. Bez JS / reduced-motion: strona pełna i statyczna. */

:root{--mw-ease:cubic-bezier(.22,1,.36,1);--mw-ramka-n:rgba(243,243,239,.1);--mw-ramka-p:rgba(17,17,17,.1);--mw-ramka-p2:rgba(17,17,17,.24)}

/* ───────── 1. nawigacja: szkło + pigułka linków ───────── */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav{background:rgba(10,10,11,.7);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
  .nav.jasna{background:rgba(239,239,234,.8)}
  /* telefon: gęstsze tło jak w starej nocy (nad białymi kartami pasek nie szarzeje), rozmycie zostaje */
  @media (max-width:767.98px){.nav{background:rgba(10,10,11,.84)}.nav.jasna{background:rgba(239,239,234,.9)}}
}
@media (min-width:1024px){
  .nav-linki{gap:0}
  .nav .nav-sek{position:relative;height:42px;min-height:42px;padding:0 12px;font-size:14.5px;background:rgba(243,243,239,.05);border-block:1px solid var(--mw-ramka-n);transition:color .2s,background-color .35s,border-color .35s}
  .nav .nav-sek:first-child{padding-left:18px;border-left:1px solid var(--mw-ramka-n);border-radius:999px 0 0 999px}
  .nav .nav-panel{padding-right:18px;border-right:1px solid var(--mw-ramka-n);border-radius:0 999px 999px 0}
  .nav .nav-sek::before{content:"";position:absolute;inset:5px 3px;border-radius:999px;background:currentColor;opacity:0;transition:opacity .2s;pointer-events:none}
  .nav .nav-sek:first-child::before{left:9px}
  .nav .nav-panel::before{right:9px}
  .nav .nav-sek:hover::before{opacity:.09}
  .nav .lang{margin:0 10px 0 14px}
  .nav.jasna .nav-sek{background:rgba(17,17,17,.035);border-color:var(--mw-ramka-p)}
}
@media (min-width:1024px) and (max-width:1180px){
  .nav .nav-sek:nth-child(4){padding-right:18px;border-right:1px solid var(--mw-ramka-n);border-radius:0 999px 999px 0}
  .nav .nav-sek:nth-child(4)::before{right:9px}
  .nav.jasna .nav-sek:nth-child(4){border-right-color:var(--mw-ramka-p)}
}

/* ───────── 2. etykieta hero: pigułka z żółtą kropką ───────── */
/* (hero-tekst ma will-change:opacity = własny „backdrop root”, więc rozmycie tła tu nie działa; dlatego pełniejsze tło) */
.hero .eyebrow{position:relative;width:fit-content;max-width:100%;padding:8px 15px 8px 12px;border:1px solid var(--mw-ramka-n);border-radius:999px;background:rgba(20,20,22,.82);line-height:1.35}
.hero .eyebrow::before{width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,196,0,.16),0 0 12px rgba(255,196,0,.55)}
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow::after{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--zolty);opacity:0;pointer-events:none;animation:mw-puls 2.8s var(--mw-ease) 1.2s infinite}
}
@keyframes mw-puls{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}
@media (max-width:420px){.hero .eyebrow{padding:7px 13px 7px 11px;letter-spacing:.08em}.hero .eyebrow::after{left:11px}}

/* ───────── 3. wejścia z rozmyciem (klasy dokłada motywy.js tylko bez reduced) ───────── */
html.js .mw-wej{opacity:0;transform:translate3d(0,8px,0);filter:blur(6px)}
html.js .mw-wej.mw-on{opacity:1;transform:none;filter:none;transition:opacity .72s var(--mw-ease),transform .72s var(--mw-ease),filter .72s var(--mw-ease)}
@media (prefers-reduced-motion:reduce){html.js .mw-wej{opacity:1;transform:none;filter:none}}
@media print{html.js .mw-wej{opacity:1;transform:none;filter:none}}

/* ───────── 4. karty: cieńsza ramka, światło na górnej krawędzi, uniesienie na hover ───────── */
.plan:not(.plan-wyrozniony):not(.plan-miara),.kotwica,.ak-karta{border-color:var(--mw-ramka-p);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,17,17,.03)}
.plan-wyrozniony{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 60px 110px -60px rgba(17,17,17,.75)}
.kontakt-karta,.branza-dom,.obawy{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.kontakt-karta{border-color:var(--mw-ramka-n)}
@media (min-resolution:2dppx){
  .plan:not(.plan-wyrozniony):not(.plan-miara),.kotwica,.ak-karta{border-width:.5px;border-color:rgba(17,17,17,.2)}
  .kontakt-karta{border-width:.5px;border-color:rgba(243,243,239,.2)}
}
@media (hover:hover) and (pointer:fine){
  .plan,.ak-karta{transition:translate .45s var(--mw-ease),border-color .3s}
  .kontakt-karta{transition:translate .45s var(--mw-ease),border-color .25s,background-color .25s}
  .plan:not(.plan-wyrozniony):not(.plan-miara):hover,.ak-karta:hover{border-color:var(--mw-ramka-p2)}
  .plan-wyrozniony:hover{border-color:#3A3A3E}
  .plan-miara:hover{border-color:#8F8F88}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .plan:hover,.kontakt-karta:hover{translate:0 -4px}
}

/* ───────── 5. pytania: „+” obraca się w „×”, treść wchodzi z rozmycia ───────── */
.ak[open] .ak-plus{transform:rotate(135deg)}
.ak[open] .ak-plus::after{transform:rotate(90deg)}
@media (prefers-reduced-motion:no-preference){
  .ak[open]>.ak-tresc{animation:mw-tresc .6s var(--mw-ease) both}
}
@keyframes mw-tresc{from{opacity:0;transform:translate3d(0,-6px,0);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ───────── 6. ceny: rzadki ukośny błysk przez całą kwotę z walutą (tylko desktop z myszą, bez reduced) ───────── */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  @media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
    .plan-kwota{display:inline-block;padding-bottom:.06em;margin-bottom:-.06em;background-image:linear-gradient(105deg,var(--tusz) 0%,var(--tusz) 44%,#E3AC00 50%,var(--tusz) 56%,var(--tusz) 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mw-polysk 7s ease-in-out infinite}
    .plan-wyrozniony .plan-kwota{background-image:linear-gradient(105deg,var(--zolty) 0%,var(--zolty) 44%,#FFF3C4 50%,var(--zolty) 56%,var(--zolty) 100%);color:transparent;animation-delay:-3.5s}
  }
}
@keyframes mw-polysk{0%,70%{background-position:100% 0}100%{background-position:0 0}}