/* ==========================================================================
   Strona realizacji MEDUZA COPILOT (/meduza/) — wygląd PROJEKTU, nie XTN (v3.6, 2026-10-11, build-meduza.py).
   Tokeny i klocki z landingu Meduzy (meduza/landing: DESIGN.md + app/globals.css): „obsydianowa noc” #05060f,
   bioluminescencja fiolet + cyjan w parze, Bricolage Grotesque (nagłówki, logotyp) + Inter (tekst), przyciski
   btn-primary (pigułka w gradiencie fiolet → indygo → cyjan) i btn-ghost (obrys), ramy panel-glass.
   Orb i mimika = port 1:1 (.morb / .summon / .mface z globals.css). Ładowany TYLKO na tej stronie;
   pasek menu i stopka zostają XTN. Fonty lokalnie (OFL): assets/fonts/meduza/ (LICENCJE.txt).
   ========================================================================== */
@font-face {
    font-family: "Meduza Display";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/meduza/bricolage-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Meduza Display";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/meduza/bricolage-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-017F;
}
@font-face {
    font-family: "Meduza Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/meduza/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Meduza Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/meduza/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-017F;
}

.pj-meduza {
    --m-noc: #05060f;
    --m-noc-2: #0a0d1f;
    --m-panel: #0b0f24;
    --m-tekst: #eef4fc;
    --m-cichy: #93a0c4;
    --m-cichy-2: #7d89ad;
    --m-fiolet: #7c3aed;
    --m-fiolet-jasny: #a78bfa;
    --m-indygo: #818cf8;
    --m-cyjan: #22d3ee;
    --m-oko: #7fe3ff;
    --m-linia: rgba(255, 255, 255, 0.09);
    --m-linia-mocna: rgba(255, 255, 255, 0.16);
    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --m-wolno: 420ms;
    --m-promien: 24px;
    --m-okno: 28px;
    --m-display: "Meduza Display", "Meduza Sans", system-ui, sans-serif;
    --m-sans: "Meduza Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    display: block;
    padding-bottom: 24px;
    background: var(--m-noc);
    color: var(--m-cichy);
    font-family: var(--m-sans);
}
body:has(.pj-meduza) {
    background: #05060f;
}
.pj-meduza :focus-visible {
    outline: 3px solid var(--m-cyjan);
    outline-offset: 3px;
}
.pj-meduza .pj-wrap {
    width: min(100% - 48px, 1200px);
    margin-inline: auto;
}
.pj-meduza strong {
    color: var(--m-tekst);
    font-weight: 600;
}
/* szablon ustawia akapitom Work Sans wprost — tu tekst Meduzy (Inter); :where = niska waga, klocki z własnym krojem wygrywają */
:where(.pj-meduza) p,
:where(.pj-meduza) li,
:where(.pj-meduza) dd {
    font-family: var(--m-sans);
}

/* --- przyciski Meduzy (btn-primary / btn-ghost z landingu) ------------------ */
.pj-meduza .m-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 26px 0 30px;
    border-radius: 9999px;
    background: linear-gradient(115deg, #7c3aed, #4f46e5, #22d3ee, #7c3aed) 0% 50% / 260% 100%;
    color: #fff;
    font: 700 16px/1.2 var(--m-sans);
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 12px 40px -14px rgba(124, 58, 237, 0.6);
    transition: transform 0.2s var(--m-ease), background-position 0.6s var(--m-ease);
}
.pj-meduza .m-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
    transform: translateX(-150%);
}
.pj-meduza .m-btn svg,
.pj-meduza .m-btn-obrys svg {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform var(--m-wolno) var(--m-ease);
}
.pj-meduza .m-btn-obrys {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 26px;
    border: 1px solid rgba(147, 160, 196, 0.32);
    border-radius: 9999px;
    color: var(--m-tekst);
    font: 600 16px/1.2 var(--m-sans);
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
@media (hover: hover) {
    .pj-meduza .m-btn:hover {
        color: #fff;
        transform: translateY(-1px);
        background-position: 22% 50%;
    }
    .pj-meduza .m-btn:hover::after {
        transform: translateX(150%);
        transition: transform 0.7s var(--m-ease);
    }
    .pj-meduza .m-btn:hover svg {
        transform: translateX(4px);
    }
    .pj-meduza .m-btn-obrys:hover {
        border-color: rgba(34, 211, 238, 0.55);
        background: rgba(34, 211, 238, 0.06);
        color: var(--m-tekst);
    }
    .pj-meduza .m-btn-obrys:hover svg {
        transform: translateY(3px);
    }
}

/* --- plakietka z parą pasków-oczu (motyw kickerów landingu), nagłówki ------- */
.pj-meduza .m-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 14px;
    border: 1px solid var(--m-linia-mocna);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--m-tekst);
    font: 600 15px/1.2 var(--m-display);
    white-space: nowrap;
}
.m-oczy {
    display: inline-flex;
    gap: 3px;
    flex: none;
}
.m-oczy i {
    display: block;
    width: 10px;
    height: 5px;
    border-radius: 1.5px;
    background: linear-gradient(180deg, #eafdff, #7fe3ff 55%, #39b8e0);
    box-shadow: 0 0 6px rgba(108, 224, 255, 0.75);
}
.pj-meduza .pj-glowa {
    display: grid;
    justify-items: center;
    gap: 18px;
    max-width: 820px;
    margin: 0 auto clamp(40px, 5vw, 60px);
    text-align: center;
}
.pj-meduza .pj-h2 {
    margin: 0;
    color: var(--m-tekst);
    font: 700 clamp(32px, 3.9vw, 52px)/1.08 var(--m-display);
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.pj-meduza .pj-akcent {
    background: linear-gradient(90deg, #a78bfa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.pj-meduza .pj-lead {
    max-width: 64ch;
    margin: 0;
    color: var(--m-cichy);
    font-size: clamp(17px, 1.25vw, 18.5px);
    line-height: 1.62;
    text-wrap: pretty;
}
.pj-meduza .pj-h3 {
    margin: clamp(52px, 6vw, 80px) 0 28px;
    color: var(--m-tekst);
    font: 700 clamp(22px, 2.1vw, 30px)/1.2 var(--m-display);
    letter-spacing: -0.02em;
    text-align: center;
    text-wrap: balance;
}

/* --- hero: noc z aurorą u góry, tekst + żywy orb ----------------------------- */
.pj-meduza .pj-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-items: center;
    min-height: min(820px, calc(100svh - 130px));
    margin: 0 24px;
    padding: clamp(48px, 7vh, 88px) 0;
    border: 1px solid var(--m-linia);
    border-radius: var(--m-okno);
    background:
        radial-gradient(60% 55% at 74% 46%, rgba(124, 58, 237, 0.16), transparent 70%),
        radial-gradient(70% 60% at 30% -10%, rgba(124, 58, 237, 0.2), transparent 70%),
        radial-gradient(50% 45% at 90% 0%, rgba(34, 211, 238, 0.1), transparent 70%),
        var(--m-noc);
}
.pj-meduza .pj-hero > .pj-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
}
.m-hero-tresc {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: start;
    gap: clamp(18px, 2.3vh, 26px);
    max-width: 640px;
}
.pj-meduza .pj-okruszki {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--m-cichy-2);
    font-size: 14px;
}
.pj-meduza .pj-okruszki a {
    color: var(--m-cichy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pj-meduza .pj-okruszki a:hover {
    color: var(--m-cyjan);
}
.pj-meduza .pj-logo {
    display: block;
    width: auto;
    height: clamp(40px, 3.3vw, 48px);
}
.pj-meduza .pj-display {
    margin: 0;
    color: var(--m-tekst);
    font: 700 clamp(42px, 5.1vw, 78px)/1.04 var(--m-display);
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.pj-meduza .pj-display .pj-akcent {
    display: inline-block;
}
/* wyróżnienie bez gradientu (wezwania nie z jednej sztancy: gradient / cyjan / bez wyróżnienia) */
.pj-meduza .pj-cyjan {
    color: var(--m-cyjan);
}
.pj-meduza .pj-hero-lead {
    max-width: 56ch;
    margin: 0;
    color: var(--m-cichy);
    font-size: clamp(17px, 1.25vw, 19px);
    line-height: 1.64;
    text-wrap: pretty;
}
.pj-meduza .pj-hero-akcje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}
.pj-meduza .pj-hero-fakty {
    margin: 0;
    color: var(--m-cichy-2);
    font-size: 14.5px;
    line-height: 1.5;
}
/* pauza stoi w rogu bloku orba (przy animacji, której dotyczy); w HTML ma `hidden` — odsłania ją meduza-orb.js */
.pj-meduza .pj-pauza {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--m-linia-mocna);
    border-radius: 50%;
    background: rgba(5, 6, 15, 0.6);
    color: var(--m-tekst);
    cursor: pointer;
}
.pj-meduza .pj-pauza[hidden] {
    display: none;
}
.pj-meduza .pj-pauza:hover {
    border-color: rgba(34, 211, 238, 0.55);
}
.pj-meduza .pj-pauza svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.pj-meduza .pj-pauza .i-play,
.pj-meduza .pj-pauza[aria-pressed="true"] .i-pause {
    display: none;
}
.pj-meduza .pj-pauza[aria-pressed="true"] .i-play {
    display: block;
    fill: currentColor;
    stroke: none;
}
/* plankton głębiny — mikroorby w kolorze oczu (.pix z landingu) */
.m-plankton {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.m-plankton i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 1.5px;
    background: linear-gradient(180deg, #eafdff, #7fe3ff 58%, #39b8e0);
    box-shadow: 0 0 8px rgba(108, 224, 255, 0.8);
    opacity: 0.4;
    animation: m-pix var(--tw, 3s) ease-in-out infinite;
}
@keyframes m-pix {
    0%, 100% { opacity: 0.18; }
    50% { opacity: 0.85; }
}

/* --- ORB MEDUZY (port .morb / .summon / .mface z landingu) ------------------- */
.m-hero-orb {
    --mo-r: clamp(220px, 21vw, 300px);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
    min-width: 0;
}
.mo {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--mo-r) * 1.5);
    max-width: 100%;
    aspect-ratio: 1;
}
.mo-poswiata {
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hue, #a855f7) 0%, transparent 68%);
    opacity: 0.3;
    transition: background 0.5s ease;
    pointer-events: none;
}
.mo-scena {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--mo-r);
    height: var(--mo-r);
}
.mo-warstwa {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.mo-warstwa.is-on {
    opacity: 1;
}
.mo .summon {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--mo-r);
    height: var(--mo-r);
    --orad: calc(var(--mo-r) * 0.6);
}
.mo .morb {
    --ms: var(--mo-r);
    --au1-weak: rgba(45, 212, 191, 0.08);
    --au1: rgba(45, 212, 191, 0.72);
    --au1-hot: rgba(226, 255, 250, 0.95);
    --au1-mid: rgba(45, 212, 191, 0.3);
    --au2-weak: rgba(139, 92, 246, 0.1);
    --au2: rgba(167, 139, 250, 0.75);
    --au2-hot: rgba(237, 233, 254, 0.95);
    --au2-mid: rgba(139, 92, 246, 0.35);
    --halo-a: rgba(124, 58, 237, 0.3);
    --halo-b: rgba(34, 211, 238, 0.1);
    --ring-echo: rgba(167, 139, 250, 0.35);
    position: relative;
    width: var(--mo-r);
    height: var(--mo-r);
    border-radius: 50%;
}
.mo .morb-trans {
    --au1-weak: rgba(251, 191, 36, 0.1);
    --au1: rgba(251, 191, 36, 0.78);
    --au1-hot: rgba(255, 247, 224, 0.95);
    --au1-mid: rgba(245, 158, 11, 0.34);
    --au2-weak: rgba(245, 158, 11, 0.1);
    --au2: rgba(253, 224, 71, 0.72);
    --au2-hot: rgba(255, 250, 235, 0.95);
    --au2-mid: rgba(234, 179, 8, 0.34);
    --halo-a: rgba(251, 191, 36, 0.3);
    --halo-b: rgba(245, 158, 11, 0.1);
    --ring-echo: rgba(253, 224, 71, 0.35);
}
.mo .morb-halo {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--halo-a) 0%, var(--halo-b) 55%, transparent 72%);
    filter: blur(calc(var(--ms) * 0.05));
    animation: m-breathe calc(var(--orb-tempo, 5s) * 1.4) ease-in-out infinite;
}
.mo .morb-core {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #1b2750 0%, #0c1129 55%, #060814 100%);
    box-shadow: inset calc(var(--ms) * -0.02) calc(var(--ms) * -0.04) calc(var(--ms) * 0.14) rgba(3, 4, 10, 0.9);
}
.mo .morb-aura,
.mo .morb-aura-b {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    mix-blend-mode: screen;
    -webkit-mask: radial-gradient(circle, transparent 50%, #000 65%, #000 84%, transparent 93%);
    mask: radial-gradient(circle, transparent 50%, #000 65%, #000 84%, transparent 93%);
    filter: blur(calc(var(--ms) * 0.012));
}
.mo .morb-aura {
    background: conic-gradient(from 10deg, transparent 0deg, var(--au1-weak) 50deg, var(--au1) 105deg, var(--au1-hot) 128deg, var(--au1-mid) 160deg, transparent 220deg);
    animation: m-spin var(--orb-tempo, 5s) linear infinite;
}
.mo .morb-aura-b {
    background: conic-gradient(from 190deg, transparent 0deg, var(--au2-weak) 55deg, var(--au2) 110deg, var(--au2-hot) 132deg, var(--au2-mid) 165deg, transparent 225deg);
    animation: m-spin calc(var(--orb-tempo, 5s) * 1.7) linear infinite reverse;
}
.mo .morb-ring {
    position: absolute;
    inset: 0;
    animation: m-sway calc(var(--orb-tempo, 5s) * 2.4) ease-in-out infinite;
}
.mo svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.mo .morb-ring .r-echo {
    fill: none;
    stroke: var(--ring-echo);
    stroke-width: 0.8;
}
.mo .morb-ring .r-main {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.1;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}
.mo .summon-act {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 152%;
    height: 152%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.mo .summon-ring,
.mo .summon-ring-cw {
    position: absolute;
    inset: 0;
    animation: m-spin calc(5s * var(--spd, 1)) linear infinite reverse;
}
.mo .summon-ring-cw {
    animation-direction: normal;
}
.mo .summon-ring path,
.mo .summon-ring-cw path {
    fill: none;
    stroke: var(--hi, #a78bfa);
    stroke-width: 1.1;
    opacity: 0.6;
    filter: drop-shadow(0 0 5px var(--hi, #a78bfa));
}
.mo .summon-sat {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--hi, #a78bfa) 55%, transparent 75%);
    filter: drop-shadow(0 0 6px var(--hi, #a78bfa));
    animation: m-orbit calc(6s * var(--spd, 1)) linear infinite;
}
.mo .summon-accent {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hi, #a855f7) 0%, transparent 58%);
    opacity: 0.28;
    animation: m-acc calc(1.7s * var(--spd, 1)) ease-in-out infinite;
}
.mo .summon-spark {
    position: absolute;
    bottom: 16%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 5px var(--hi, #a78bfa), 0 0 2px #fff;
    opacity: 0;
    animation: m-rise calc(3.6s * var(--spd, 1)) ease-in infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-sway { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.045); } }
@keyframes m-breathe { 0%, 100% { opacity: 0.72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes m-orbit {
    from { transform: rotate(0) translateX(var(--orad, 44px)) rotate(0); }
    to { transform: rotate(360deg) translateX(var(--orad, 44px)) rotate(-360deg); }
}
@keyframes m-acc { 0%, 100% { opacity: 0.2; transform: scale(0.96); } 50% { opacity: 0.4; transform: scale(1.08); } }
@keyframes m-rise {
    0% { transform: translateY(10px) scale(0.6); opacity: 0; }
    22% { opacity: 0.9; }
    70% { opacity: 0.5; }
    100% { transform: translateY(-72px) scale(1.05); opacity: 0; }
}

/* mimika: pikselowe oczy EVE/Wall-E — jednostka --u = orb / 64 (kanon orb-live.html) */
.mo .mface {
    --u: calc(var(--mo-r) / 64);
    --eye-c: #7fe3ff;
    --eye-c2: #39b8e0;
    --eye-glow: #6ce0ff;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 18);
    margin: calc(var(--u) * -9) 0 0 calc(var(--u) * -17);
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.mo .mface-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: calc(var(--u) * 6.4);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mo .mface.mface-laugh .mface-inner {
    animation: m-laugh 0.5s ease-in-out;
}
@keyframes m-laugh {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(calc(var(--u) * -0.6)); }
    60% { transform: translateY(calc(var(--u) * 0.3)); }
}
.mo .meye {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 0.55);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mo .mseg {
    display: block;
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 2.2);
    border-radius: calc(var(--u) * 0.5);
    background: linear-gradient(180deg, #eafdff 0%, var(--eye-c) 55%, var(--eye-c2) 100%);
    box-shadow: 0 0 calc(var(--u) * 1.8) var(--eye-glow), inset 0 0 calc(var(--u) * 0.4) #fff;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.mo .mface-alert .mseg:nth-child(1),
.mo .mface-alert .mseg:nth-child(3) { height: calc(var(--u) * 1.5); }
.mo .mface-alert .mseg:nth-child(2) { height: calc(var(--u) * 3.6); }
.mo .mface.eyes-arc { --eye-c: #fff3d6; --eye-c2: #ffcf7a; }
.mo .mface.eyes-arc .mseg { opacity: 0; }
.mo .meye-arc {
    position: absolute;
    top: calc(var(--u) * 0.3);
    left: 0;
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 3);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mo .meye-arc path {
    fill: none;
    stroke: var(--eye-c);
    stroke-width: 2.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 calc(var(--u) * 0.9) var(--eye-glow));
}
.mo .mface.eyes-arc .meye-arc { opacity: 1; }
.mo .mmouth {
    position: absolute;
    left: 50%;
    top: 64%;
    width: 0;
    height: 0;
}
.mo .msmile {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--u) * 7.4);
    height: calc(var(--u) * 3.4);
    margin-left: calc(var(--u) * -3.7);
    opacity: 0;
    transform: scaleY(0.4);
    transform-origin: 50% 0;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mo .msmile path {
    fill: none;
    stroke: var(--eye-c);
    stroke-width: 2.2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 calc(var(--u) * 0.8) var(--eye-glow));
}
.mo .mface.eyes-arc .msmile { opacity: 1; transform: scaleY(1); }
.mo .mface.mface-laugh .msmile { opacity: 1; transform: scaleY(1.3) scale(1.12); }
.mo .mbrow {
    position: absolute;
    top: calc(var(--u) * -2.7);
    left: 50%;
    width: calc(var(--u) * 5.6);
    height: var(--u);
    margin-left: calc(var(--u) * -2.8);
    border-radius: calc(var(--u) * 0.4);
    background: var(--eye-c);
    box-shadow: 0 0 var(--u) var(--eye-glow);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mo .mface.brow-raised .mbrow { opacity: 0.85; transform: translateY(calc(var(--u) * -0.9)); }
.mo .mface.eyes-surprised .mseg { height: calc(var(--u) * 2.9); }
.mo .mface.eyes-wink-r .meye-right .mseg { height: calc(var(--u) * 0.3); }
.mo .mface.mface-transcribe { --eye-c: #fbbf24; --eye-c2: #f59e0b; }
.mo .mface.mface-transcribe .mseg { height: calc(var(--u) * 0.6); }
.mo .mbrain {
    position: absolute;
    left: 50%;
    top: calc(var(--u) * -3.6);
    width: calc(var(--u) * 14);
    height: calc(var(--u) * 8);
    margin-left: calc(var(--u) * -7);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mo .mface-transcribe .mbrain { opacity: 1; transform: scale(1); }
.mo .mbp {
    position: absolute;
    width: calc(var(--u) * 1.65);
    height: calc(var(--u) * 1.65);
    border-radius: calc(var(--u) * 0.4);
    background: linear-gradient(180deg, #fff3d6 0%, var(--eye-c) 55%, var(--eye-c2) 100%);
    box-shadow: 0 0 calc(var(--u) * 1.5) var(--eye-c);
    animation: m-mbp 1.6s ease-in-out infinite;
}
@keyframes m-mbp { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
.mo .mbolt {
    position: absolute;
    top: calc(var(--u) * 0.4);
    width: calc(var(--u) * 3.1);
    height: calc(var(--u) * 5);
    opacity: 0;
    animation: m-bolt 1.15s ease-in-out infinite;
}
.mo .mbolt path { fill: #fef3c7; }
.mo .mbolt-l { left: calc(var(--u) * -3.1); animation-delay: 0.15s; }
.mo .mbolt-r { right: calc(var(--u) * -3.1); transform: scaleX(-1); animation-delay: 0.55s; }
.mo .mbolt-t { left: 50%; top: calc(var(--u) * -4.4); margin-left: calc(var(--u) * -1.55); animation-delay: 0.35s; }
@keyframes m-bolt { 0%, 55%, 100% { opacity: 0; } 10%, 30% { opacity: 1; } }
.mo .mface:not(.mface-transcribe) .mbp,
.mo .mface:not(.mface-transcribe) .mbolt {
    animation-play-state: paused;
}

/* podpis kroku pod orbem (jak w HeroOrbCycle: tytuł w barwie stanu + zdanie + kropki) */
.mo-podpis {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 100%;
    max-width: 420px;
    min-height: 104px;
    padding-inline: 8px;
    text-align: center;
}
.mo-tytul {
    margin: 0;
    font: 700 clamp(24px, 2.2vw, 30px)/1.15 var(--m-display);
    text-wrap: balance;
    letter-spacing: -0.02em;
}
.mo-zdanie {
    margin: 0;
    color: var(--m-cichy);
    font-size: 15px;
    line-height: 1.45;
}
.mo-kropki {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.mo-kropki i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(147, 160, 196, 0.35);
    transition: width 0.3s, background-color 0.3s;
}
.mo-kropki i.is-on {
    width: 18px;
    background: var(--hue);
}
.mo-podpis.is-wjazd .mo-tytul,
.mo-podpis.is-wjazd .mo-zdanie {
    animation: m-podpis 0.45s var(--m-ease);
}
@keyframes m-podpis { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* pętle hero grają tylko z klasą .is-gra (dodaje ją meduza-orb.js): bez JS, przy ograniczonym ruchu, po pauzie
   i poza kadrem stoi nieruchoma klatka (WCAG 2.2.2) */
.pj-hero:not(.is-gra) .mo *,
.pj-hero:not(.is-gra) .m-plankton i {
    animation-play-state: paused !important;
}

/* --- sekcje i okna (pasma z tonem jak section-band) ------------------------- */
.pj-meduza .pj-sekcja {
    padding: clamp(72px, 9vw, 124px) 0;
}
.pj-meduza .pj-sekcja.pj-okno {
    margin: 20px 24px;
    border: 1px solid var(--m-linia);
    border-radius: var(--m-okno);
    background:
        radial-gradient(700px 460px at 0% 0%, rgba(124, 58, 237, 0.16), transparent 70%),
        radial-gradient(620px 420px at 100% 100%, rgba(34, 211, 238, 0.07), transparent 70%),
        var(--m-noc-2);
}

/* kafle = panel-glass (szkło na solidnej bazie) + kreska koloru u góry */
.pj-meduza .pj-kafle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.pj-meduza .pj-kafel {
    --kol: var(--m-cyjan);
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: clamp(22px, 2.3vw, 30px);
    border: 1px solid var(--m-linia-mocna);
    border-radius: var(--m-promien);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 55%, rgba(124, 58, 237, 0.09)),
        var(--m-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pj-meduza .pj-kafel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28px;
    width: 56px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--kol);
}
.pj-meduza .pj-kafel.c-fiolet { --kol: var(--m-fiolet-jasny); }
.pj-meduza .pj-kafel.c-indygo { --kol: var(--m-indygo); }
.pj-meduza .pj-kafel-ik {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--kol) 12%, transparent);
    box-shadow: 0 0 24px -10px var(--kol);
    color: var(--kol);
}
.pj-meduza .pj-kafel :is(h3, h4) {
    margin: 4px 0 0;
    color: var(--m-tekst);
    font: 700 20px/1.25 var(--m-display);
    letter-spacing: -0.01em;
}
.pj-meduza .pj-kafel p {
    margin: 0;
    color: var(--m-cichy);
    font-size: 15.5px;
    line-height: 1.6;
}
.pj-meduza .pj-znacznik {
    justify-self: start;
    padding: 5px 12px;
    border: 1px solid rgba(167, 139, 250, 0.45);
    border-radius: 9999px;
    color: #c4b5fd;
    font: 600 13px/1.25 var(--m-sans);
}

/* kroki drogi głosu: prawdziwa sekwencja — numer ma sens */
.pj-meduza .pj-fazy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pj-meduza .pj-fazy > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--m-linia);
    border-radius: var(--m-promien);
    background: rgba(5, 6, 15, 0.5);
}
.pj-meduza .pj-faza-nr {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(34, 211, 238, 0.7);
    border-radius: 50%;
    color: var(--m-cyjan);
    font: 700 18px/1 var(--m-display);
}
.pj-meduza .pj-fazy h3 {
    margin: 2px 0 6px;
    color: var(--m-tekst);
    font: 700 18.5px/1.3 var(--m-display);
}
.pj-meduza .pj-fazy p {
    margin: 0;
    color: var(--m-cichy);
    font-size: 15px;
    line-height: 1.55;
}

/* zrzuty strony Meduzy (wersja robocza): dwie kolumny, żeby tekst na zrzutach dało się przeczytać; klik = powiększenie */
.pj-meduza .pj-ujecia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
}
/* nieparzysta liczba zrzutów: ostatni na środku, tej samej szerokości co pozostałe */
@media (min-width: 640px) {
    .pj-meduza .pj-ujecia > .pj-ujecie:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 12px);
    }
}
.pj-meduza .pj-ujecie {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}
.pj-meduza .pj-ujecie-img {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--m-linia-mocna);
    border-radius: 18px;
    background: var(--m-noc-2);
    cursor: zoom-in;
    transition: border-color 0.3s;
}
.pj-meduza .pj-ujecie-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.7s var(--m-ease);
}
.pj-meduza .pj-ujecie-lupa {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--m-linia-mocna);
    border-radius: 50%;
    background: rgba(5, 6, 15, 0.72);
    color: var(--m-tekst);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.pj-meduza .pj-ujecie-lupa svg {
    width: 20px;
    height: 20px;
}
@media (hover: hover) {
    .pj-meduza .pj-ujecie-img:hover {
        border-color: rgba(34, 211, 238, 0.55);
    }
    .pj-meduza .pj-ujecie-img:hover img {
        transform: scale(1.03);
    }
    .pj-meduza .pj-ujecie-img:hover .pj-ujecie-lupa {
        border-color: rgba(34, 211, 238, 0.7);
        background: rgba(5, 6, 15, 0.9);
        color: var(--m-cyjan);
    }
}

/* okno powiększenia zrzutu (<dialog>, meduza-zrzuty.js) */
.pj-meduza .m-podglad {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(12px, 3vw, 40px);
    border: 0;
    background: transparent;
    color: var(--m-cichy);
}
.pj-meduza .m-podglad[open] {
    display: grid;
    place-items: center;
}
.pj-meduza .m-podglad::backdrop {
    background: rgba(3, 4, 10, 0.88);
}
html:has(.m-podglad[open]) {
    overflow: hidden;
}
.pj-meduza .m-podglad-rama {
    display: grid;
    gap: 12px;
    width: min(1200px, 100%);
}
.pj-meduza .m-podglad-gora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pj-meduza .m-podglad-t {
    margin: 0;
    color: var(--m-tekst);
    font: 700 clamp(17px, 1.6vw, 21px)/1.3 var(--m-display);
}
.pj-meduza .m-podglad-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--m-linia-mocna);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--m-tekst);
    cursor: pointer;
}
.pj-meduza .m-podglad-x:hover {
    border-color: rgba(34, 211, 238, 0.6);
    color: var(--m-cyjan);
}
.pj-meduza .m-podglad-x svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.pj-meduza .m-podglad-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 2 * clamp(12px, 3vw, 40px) - 56px);
    object-fit: contain;
    border: 1px solid var(--m-linia-mocna);
    border-radius: 16px;
    background: var(--m-noc-2);
}
@media (prefers-reduced-motion: no-preference) {
    .pj-meduza .m-podglad[open] .m-podglad-rama {
        animation: m-podglad 0.32s var(--m-ease);
    }
}
@keyframes m-podglad { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.pj-meduza .pj-ujecie h3 {
    margin: 0 0 6px;
    color: var(--m-tekst);
    font: 700 19px/1.3 var(--m-display);
}
.pj-meduza .pj-ujecie p {
    margin: 0;
    color: var(--m-cichy);
    font-size: 15px;
    line-height: 1.55;
}

/* liczby kulis: tabular-nums, gradient marki */
.pj-meduza .pj-liczby {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
.pj-meduza .pj-liczby > div {
    padding: 24px;
    border: 1px solid var(--m-linia);
    border-radius: var(--m-promien);
    background: rgba(5, 6, 15, 0.5);
}
.pj-meduza .pj-liczby dt {
    width: fit-content;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #a78bfa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 700 clamp(30px, 2.9vw, 42px)/1.1 var(--m-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.pj-meduza .pj-liczby dd {
    margin: 0;
    color: var(--m-cichy);
    font-size: 15px;
    line-height: 1.5;
}
.pj-meduza .pj-tech {
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--m-linia);
    border-radius: var(--m-promien);
    background: rgba(5, 6, 15, 0.5);
}
.pj-meduza .pj-tech > div {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--m-linia);
}
.pj-meduza .pj-tech > div:first-child {
    border-top: 0;
}
.pj-meduza .pj-tech dt {
    color: var(--m-tekst);
    font: 700 15.5px/1.5 var(--m-display);
}
.pj-meduza .pj-tech dd {
    margin: 0;
    color: var(--m-cichy);
    font-size: 15.5px;
    line-height: 1.55;
}
/* status: znacznik-kreska w kolorze stanu (cyjan = działa, fiolet = w drodze) */
.pj-meduza .pj-status dt {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pj-meduza .pj-status dt::before {
    content: "";
    flex: none;
    width: 12px;
    height: 4px;
    border-radius: 2px;
    background: var(--m-cyjan);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}
.pj-meduza .pj-status > div:nth-child(n + 2) dt::before {
    background: var(--m-fiolet-jasny);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
}

/* wezwanie na końcu sekcji — kreska fiolet → cyjan u góry (gradient tylko jako kreska) */
.pj-meduza .pj-zapis {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 40px;
    margin-top: clamp(40px, 5vw, 60px);
    padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.6vw, 52px);
    overflow: hidden;
    border: 1px solid var(--m-linia-mocna);
    border-radius: var(--m-promien);
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(124, 58, 237, 0.2), transparent 70%),
        #0d1226;
}
.pj-meduza .pj-zapis::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, #7c3aed, #22d3ee);
}
.pj-meduza .pj-zapis > div {
    flex: 1 1 420px;
    min-width: 0;
}
.pj-meduza .pj-zapis-h {
    margin: 0 0 8px;
    color: var(--m-tekst);
    font: 700 clamp(24px, 2.5vw, 34px)/1.15 var(--m-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.pj-meduza .pj-zapis-p {
    max-width: 60ch;
    margin: 0;
    color: var(--m-cichy);
    font-size: 16.5px;
    line-height: 1.55;
}

/* --- formularz rozmowy (wspólny klocek XTN) w barwach Meduzy ------------------ */
.pj-meduza .xtn-rozmowa-sec {
    background: transparent;
    font-family: var(--m-sans);
}
.pj-meduza .xtn-rozmowa-sec .title-area .sec-title {
    color: var(--m-tekst);
    font-family: var(--m-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
}
.pj-meduza .xtn-rozmowa-sec .title-area .sec-title .xtn-em {
    background: linear-gradient(90deg, #a78bfa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.pj-meduza .xtn-rozmowa-sec .xtn-sec-sub {
    color: var(--m-cichy);
    font-family: var(--m-sans);
}
.pj-meduza .xtn-rozmowa-sec .sub-title {
    padding: 9px 18px 9px 46px;
    border: 1px solid var(--m-linia-mocna);
    background: rgba(255, 255, 255, 0.04);
    color: var(--m-tekst);
    font: 600 15px/1.2 var(--m-display);
    box-shadow: none;
}
.pj-meduza .xtn-rozmowa-sec .sub-title::before {
    top: 50%;
    left: 15px;
    width: 23px;
    height: 6px;
    margin-top: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 6'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eafdff'/%3E%3Cstop offset='.55' stop-color='%237fe3ff'/%3E%3Cstop offset='1' stop-color='%2339b8e0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='.5' width='10' height='5' rx='1.5' fill='url(%23g)'/%3E%3Crect x='13' y='.5' width='10' height='5' rx='1.5' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pj-meduza .xtn-rozmowa-info {
    border: 1px solid var(--m-linia);
    background:
        radial-gradient(70% 52% at 0% 0%, rgba(124, 58, 237, 0.28), transparent 72%),
        var(--m-noc-2);
    color: var(--m-cichy);
}
.pj-meduza .xtn-rozmowa-et {
    color: var(--m-cyjan);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}
.pj-meduza .xtn-rozmowa-kroki li > span,
.pj-meduza .xtn-rozmowa-kroki li:nth-child(2) > span,
.pj-meduza .xtn-rozmowa-kroki li:nth-child(3) > span {
    border: 1.5px solid rgba(34, 211, 238, 0.7);
    background: transparent;
    color: var(--m-cyjan);
    font-family: var(--m-display);
}
.pj-meduza .xtn-rozmowa-kroki strong {
    color: var(--m-tekst);
    font-family: var(--m-display);
}
.pj-meduza .xtn-rozmowa-kroki small,
.pj-meduza .xtn-rozmowa-info .xtn-check li {
    color: var(--m-cichy);
}
.pj-meduza .xtn-rozmowa-info .xtn-check li::before {
    background-color: var(--m-cyjan);
}
.pj-meduza .xtn-rozmowa-info > .xtn-offer-rings {
    opacity: 0.05;
}
.pj-meduza .xtn-rozmowa-alt a {
    color: var(--m-cyjan);
}
.pj-meduza .xtn-rozmowa-karta {
    border: 1px solid var(--m-linia-mocna);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 55%, rgba(124, 58, 237, 0.08)),
        var(--m-panel);
    box-shadow: none;
}
.pj-meduza .xtn-rozmowa-karta .xtn-field label,
.pj-meduza .xtn-rozmowa-karta .xtn-pory legend {
    color: var(--m-tekst);
    font-family: var(--m-sans);
}
.pj-meduza .xtn-rozmowa-karta .xtn-field:focus-within label {
    color: var(--m-cyjan);
}
.pj-meduza .xtn-rozmowa-karta .xtn-optional {
    color: var(--m-cichy-2);
}
.pj-meduza .xtn-rozmowa-karta .xtn-field input,
.pj-meduza .xtn-rozmowa-karta .xtn-field textarea,
.pj-meduza .xtn-rozmowa-karta .xtn-field select {
    border-color: rgba(147, 160, 196, 0.42);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--m-tekst);
    font-family: var(--m-sans);
}
.pj-meduza .xtn-rozmowa-karta .xtn-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.pj-meduza .xtn-rozmowa-karta .xtn-field select option {
    background: var(--m-panel);
    color: var(--m-tekst);
}
.pj-meduza .xtn-rozmowa-karta .xtn-field input:focus,
.pj-meduza .xtn-rozmowa-karta .xtn-field textarea:focus,
.pj-meduza .xtn-rozmowa-karta .xtn-field select:focus {
    border-color: var(--m-cyjan);
    background-color: rgba(34, 211, 238, 0.06);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
}
.pj-meduza .xtn-pora > span {
    border-color: rgba(147, 160, 196, 0.32);
    background: rgba(255, 255, 255, 0.03);
}
.pj-meduza .xtn-pora strong {
    color: var(--m-tekst);
}
.pj-meduza .xtn-pora small {
    color: var(--m-cichy-2);
}
.pj-meduza .xtn-pora input:checked + span {
    border-color: var(--m-cyjan);
    background: rgba(34, 211, 238, 0.09);
    box-shadow: inset 0 0 0 1px var(--m-cyjan);
}
.pj-meduza .xtn-consent,
.pj-meduza .xtn-rodo,
.pj-meduza .xtn-shield {
    color: var(--m-cichy-2);
    font-family: var(--m-sans);
}
.pj-meduza .xtn-consent a,
.pj-meduza .xtn-rodo a {
    color: var(--m-cyjan);
}
/* przycisk wysyłki (th-btn) w kształcie przycisku Meduzy: gradient + cyjanowe pole strzałki */
.pj-meduza .xtn-rozmowa-karta .th-btn {
    background: linear-gradient(115deg, #7c3aed, #4f46e5) !important;
    color: #fff;
    font-family: var(--m-sans);
    font-weight: 700;
}
.pj-meduza .xtn-rozmowa-karta .th-btn::before,
.pj-meduza .xtn-rozmowa-karta .th-btn::after {
    background: var(--m-cyjan) !important;
}
.pj-meduza .xtn-rozmowa-karta .th-btn:hover::before,
.pj-meduza .xtn-rozmowa-karta .th-btn:hover::after {
    background: #4f46e5 !important;
}
.pj-meduza .xtn-rozmowa-karta .th-btn:hover,
.pj-meduza .xtn-rozmowa-karta .th-btn:focus-visible {
    box-shadow: 0 12px 34px -12px rgba(124, 58, 237, 0.7);
}
.pj-meduza .xtn-form-done h3 {
    color: var(--m-tekst);
    font-family: var(--m-display);
}
.pj-meduza .xtn-form-done p {
    color: var(--m-cichy);
}

/* --- układ: komputer węższy, tablet, telefon --------------------------------- */
@media (max-width: 1099px) {
    .pj-meduza .pj-kafle,
    .pj-meduza .pj-fazy,
    .pj-meduza .pj-liczby {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 991px) {
    .pj-meduza .pj-hero > .pj-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
    /* jedna kolumna: najpierw okruszki, logo, tytuł i przyciski — orb pod tekstem */
    .m-hero-orb {
        --mo-r: clamp(160px, 46vw, 240px);
    }
    .m-hero-tresc {
        max-width: 720px;
    }
    /* jedna kolumna: plankton wchodziłby na tekst (landing też pokazuje go dopiero od lg) */
    .m-plankton {
        display: none;
    }
}
@media (max-width: 767px) {
    .pj-meduza .pj-hero {
        min-height: 0;
        margin: 0 12px;
        padding: 28px 0 36px;
    }
    .pj-meduza .pj-wrap {
        width: calc(100% - 40px);
    }
    .pj-meduza .pj-hero > .pj-wrap {
        gap: 18px;
    }
    .m-hero-orb {
        --mo-r: clamp(150px, 44vw, 200px);
    }
    .mo-podpis {
        min-height: 96px;
    }
    .mo-tytul {
        font-size: clamp(20px, 6.2vw, 26px);
    }
    .pj-meduza .pj-sekcja {
        padding: 64px 0;
    }
    .pj-meduza .pj-sekcja.pj-okno {
        margin: 12px;
        padding: 52px 0 12px;
    }
    /* w oknie treść 12 px od ramki okna (tekst ≥ 24 px od krawędzi ekranu) */
    .pj-meduza .pj-okno .pj-wrap {
        width: calc(100% - 24px);
    }
    .pj-meduza .pj-okno .pj-glowa {
        padding-inline: 8px;
    }
    /* talie (xtn.js): karty 12 px od krawędzi ekranu (poza oknem) albo od ramki okna */
    .pj-meduza .pj-sekcja:not(.pj-okno) .xtn-talia {
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        scroll-padding-inline: 12px;
    }
    .pj-meduza .pj-okno .xtn-talia {
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        scroll-padding-inline: 12px;
    }
    .pj-meduza .xtn-talia > .pj-kafel,
    .pj-meduza .xtn-talia > .pj-ujecie {
        height: auto;
    }
    /* zrzut w talii = panel: zdjęcie na górze (równa wysokość, 1200×608), tekst ≥ 20 px od krawędzi karty */
    .pj-meduza .xtn-talia > .pj-ujecie {
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--m-linia-mocna);
        border-radius: var(--m-promien);
        background:
            linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 55%, rgba(124, 58, 237, 0.08)),
            var(--m-panel);
    }
    .pj-meduza .xtn-talia .pj-ujecie-img {
        border: 0;
        border-bottom: 1px solid var(--m-linia);
        border-radius: 0;
    }
    .pj-meduza .xtn-talia .pj-ujecie-img:focus-visible {
        outline-offset: -3px;
    }
    .pj-meduza .xtn-talia .pj-ujecie-lupa {
        right: 10px;
        bottom: 10px;
    }
    .pj-meduza .xtn-talia .pj-ujecie-t {
        padding: 16px 20px 20px;
    }
    .pj-meduza .xtn-talia-ster {
        margin-top: 4px;
    }
    .pj-meduza .xtn-talia-ster.is-ciemna .xtn-talia-kreski button[aria-current="true"]::before {
        background: var(--m-cyjan);
    }
    /* wezwanie poza oknem: panel 12 px od krawędzi ekranu */
    .pj-meduza .pj-sekcja:not(.pj-okno) .pj-zapis {
        margin-left: -8px;
        margin-right: -8px;
    }
    .pj-meduza .pj-zapis {
        padding: 26px 20px 20px;
    }
    #dalej.pj-sekcja {
        padding: 0 0 24px;
    }
    .pj-meduza .xtn-rozmowa-sec {
        padding-bottom: 24px;
    }
    .pj-meduza .pj-h3 {
        margin-top: 48px;
    }
}
@media (max-width: 639px) {
    .pj-meduza .pj-ujecia,
    .pj-meduza .pj-kafle,
    .pj-meduza .pj-fazy {
        grid-template-columns: minmax(0, 1fr);
    }
    .pj-meduza .pj-tech > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 14px 20px;
    }
    .pj-meduza .pj-zapis .m-btn,
    .pj-meduza .pj-hero-akcje .m-btn,
    .pj-meduza .pj-hero-akcje .m-btn-obrys {
        width: 100%;
        justify-content: space-between;
    }
    .pj-meduza .pj-hero-akcje {
        width: 100%;
    }
    .pj-meduza .m-btn {
        padding: 0 20px 0 22px;
        font-size: 15.5px;
        white-space: normal;
        text-align: left;
    }
    .pj-meduza .m-btn-obrys {
        padding: 0 20px 0 22px;
    }
    .pj-meduza .m-badge {
        white-space: normal;
    }
    .pj-meduza .pj-liczby > div {
        padding: 20px;
    }
}
@media (max-width: 479px) {
    .pj-meduza .pj-liczby {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    /* ta sama nieruchoma klatka co bez JS (pętle zatrzymane na starcie) */
    .mo *,
    .mo-podpis *,
    .m-plankton i {
        animation-play-state: paused !important;
        transition: none !important;
    }
    .pj-meduza .m-btn,
    .pj-meduza .m-btn::after,
    .pj-meduza .m-btn svg,
    .pj-meduza .m-btn-obrys svg,
    .pj-meduza .pj-ujecie-img img {
        transition: none;
    }
}