/* ==========================================================================
   NexoSite: system designu strony
   --------------------------------------------------------------------------
   Kolorystyka marki: #050505 / #4ade80 / #818cf8 / #38bdf8 (bez zmian).
   Promienie: 8 / 12 / 18 / 28 / pigułka.  Odstępy: skala 4px.
   Ruch: materializacja (blur + skala + uniesienie) na sprężynach Apple,
         pętle scen grają tylko w widoku (klasa .play).
   Warstwy: -1 tło, 1 scena, 2 treść, 450 menu, 500 nawigacja (nad menu, żeby było widać przycisk zamknięcia),
            600 modal, 700 postęp, 900 ziarno.
   Spis:  1 tokeny  2 baza  3 typografia  4 ruch  5 komponenty
          6 makiety (mini-strona, ramki, plakietka)  7 sekcje  8 a11y
   ========================================================================== */

/* 1 ── TOKENY ───────────────────────────────────────────────────────────── */
:root {
  --bg: #050505;
  --bg-2: #08090b;
  --solid: #0f1013;
  --solid-2: #15171b;
  --green: #4ade80;
  --purple: #818cf8;
  --blue: #38bdf8;
  --star: #facc15;
  --ink: #f5f6f7;
  --ink-2: #c4c9d2;
  --ink-3: #8b94a3;
  --ink-4: #5d6470;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --accent: var(--green);
  --on-accent: #03140a;
  --grad: linear-gradient(100deg, #4ade80 0%, #34d399 28%, #38bdf8 62%, #818cf8 100%);
  --grad-v: linear-gradient(100deg, #818cf8 0%, #38bdf8 70%, #4ade80 100%);

  --glass-bg: linear-gradient(160deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 55%, rgba(255,255,255,.02) 100%);
  /* szkło nad animowanym tłem (hero, finał): ciemniejsze zamiast rozmycia, bo rozmycie dziesiątek elementów spowalniało przewijanie */
  --glass-solid: linear-gradient(160deg, rgba(40,42,48,.72) 0%, rgba(18,19,23,.78) 100%);
  --glass-line: rgba(255,255,255,.11);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.14);
  --glass-blur: blur(24px) saturate(160%);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.85);

  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;

  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --sec-y: clamp(4.5rem, 9vw, 7.5rem);

  /* sprężyny: response .62 / damping 1 (spring), response .6 / damping .68 (pop) */
  --spring: linear(0, 0.0484, 0.1518, 0.2744, 0.3964, 0.5079, 0.6049, 0.6866, 0.7537, 0.8079, 0.8512, 0.8853, 0.912, 0.9328, 0.9488, 0.9611, 0.9705, 0.9777, 0.9832, 0.9873, 0.9905, 0.9929, 0.9946, 0.996, 0.997, 0.9978, 0.9983, 0.9987, 0.9991, 0.9993, 0.9995, 0.9996, 0.9997, 0.9998, 0.9998, 0.9999, 0.9999, 0.9999, 1, 1, 1, 1);
  --pop: linear(0, 0.0409, 0.1377, 0.2647, 0.4025, 0.5374, 0.6607, 0.7673, 0.8551, 0.9239, 0.9752, 1.0111, 1.0342, 1.047, 1.0521, 1.0518, 1.0477, 1.0416, 1.0345, 1.0273, 1.0205, 1.0145, 1.0095, 1.0054, 1.0024, 1.0001, 0.9987, 0.9978, 0.9973, 0.9972, 0.9974, 0.9977, 0.998, 0.9984, 0.9988, 0.9991, 0.9994, 0.9996, 0.9998, 0.9999, 1, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring: cubic-bezier(.22,1,.36,1); --pop: cubic-bezier(.34,1.45,.64,1); }
}
.page-nfc { --accent: var(--purple); --on-accent: #0b0d26; --grad: var(--grad-v); }

/* 2 ── BAZA ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); font-size:1rem; line-height:1.65; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img, svg, canvas { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
::selection { background:rgba(74,222,128,.3); color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); }
body::after { content:''; position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.03;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0/200px; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.sec { position:relative; padding-block:var(--sec-y); }
.sec-tint { background:linear-gradient(180deg, transparent, rgba(255,255,255,.018) 20%, rgba(255,255,255,.018) 80%, transparent); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* tło strony: statyczne światło (sekcje z WebGL mają własne płótno) */
.page-glow { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vmax 40vmax at 100% 0%, rgba(129,140,248,.07), transparent 60%),
    radial-gradient(60vmax 40vmax at 0% 100%, rgba(74,222,128,.06), transparent 60%),
    var(--bg); }

/* 3 ── TYPOGRAFIA ───────────────────────────────────────────────────────── */
.display { font-size:clamp(2.7rem, 6vw, 5.6rem); font-weight:700; letter-spacing:-.052em; line-height:1.0; text-wrap:balance; }
.h2 { font-size:clamp(2.1rem, 4.4vw, 3.8rem); font-weight:700; letter-spacing:-.048em; line-height:1.04; text-wrap:balance; }
.h3 { font-size:clamp(1.22rem, 1.7vw, 1.5rem); font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.lead { font-size:clamp(1.02rem, 1.25vw, 1.15rem); color:var(--ink-3); line-height:1.7; max-width:54ch; text-wrap:pretty; }
.body { color:var(--ink-3); line-height:1.7; text-wrap:pretty; }
.grad, .cg, .cp { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cp { background:var(--grad-v); -webkit-background-clip:text; background-clip:text; }
.mono { font-family:var(--mono); }

/* 4 ── RUCH ─────────────────────────────────────────────────────────────── */
/* materializacja elementu */
.js [data-reveal] { opacity:0; transform:translateY(28px) scale(.98);
  transition:opacity .8s var(--ease), transform 1.3s var(--spring); transition-delay:calc(var(--i, 0) * 85ms); }
.js [data-reveal="pop"] { transform:translateY(16px) scale(.92); transition-timing-function:var(--ease), var(--pop); }
.js [data-reveal].in { opacity:1; transform:none; }
/* kinetyczne słowa nagłówków */
.kw { display:inline-block; padding-bottom:.1em; margin-bottom:-.1em; }
.js [data-split] .kw { opacity:0; filter:blur(16px); transform:translateY(.42em) scale(.95);
  transition:opacity .7s var(--ease), filter .9s var(--ease), transform 1.25s var(--spring); transition-delay:calc(var(--w, 0) * 65ms + 60ms); }
.js [data-split].split-ready .kw { opacity:1; filter:none; transform:none; }
.cg .kw, .cp .kw, .grad .kw { background:inherit; -webkit-background-clip:text; background-clip:text; color:transparent; }

/* 5 ── KOMPONENTY ───────────────────────────────────────────────────────── */

/* Szkło: jedna powierzchnia dla kart, paneli, pigułek */
.glass { position:relative; isolation:isolate; background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), var(--shadow-lg); }
.glass.blur { }
.panel { border-radius:var(--r-lg); overflow:hidden; }
.spot::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; border-radius:inherit; transition:opacity .6s var(--ease);
  background:radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%); }
.spot:hover::before { opacity:1; }
.sheen::after { content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%); transform:translateX(-110%); }
.sheen.in::after { animation:sheen 1.9s var(--ease-io) .35s both; }
@keyframes sheen { to { transform:translateX(110%); } }

/* Etykieta sekcji */
.tag { display:inline-flex; align-items:center; gap:.55rem; align-self:flex-start; height:32px; padding:0 .95rem 0 .75rem; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:500; color:var(--ink-2); background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-hi); }
.tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tag b { margin-left:-.25rem; height:24px; padding:0 .55rem; border-radius:var(--r-pill); display:inline-grid; place-items:center; background:var(--accent); color:var(--on-accent); font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.04em; }
.tag:has(b)::before { display:none; }
.tag:has(b) { padding-left:.3rem; }

/* Nagłówek sekcji */
.sh { display:flex; flex-direction:column; gap:1.15rem; max-width:780px; }
.sh.center { align-items:center; text-align:center; margin-inline:auto; }
.sh.center .tag { align-self:center; }
.sh + * { margin-top:clamp(2.75rem, 5vw, 4.25rem); }

/* Ikona w kafelku: jedyny sposób pokazywania ikon w treści */
.ico { --c: var(--accent); width:48px; height:48px; border-radius:14px; flex-shrink:0; display:grid; place-items:center; font-size:1.4rem; color:var(--c);
  background:linear-gradient(145deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 6%, transparent));
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.ico.sm { width:32px; height:32px; border-radius:10px; font-size:1rem; }
.ico.lg { width:64px; height:64px; border-radius:18px; font-size:1.8rem; }
.ico.g { --c:var(--green); } .ico.p { --c:var(--purple); } .ico.b { --c:var(--blue); } .ico.y { --c:var(--star); }

/* Przyciski */
.btn { --bb: rgba(255,255,255,.06); --bf: var(--ink);
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; height:52px; padding:0 1.6rem; border-radius:var(--r-pill);
  font-size:.95rem; font-weight:600; letter-spacing:-.012em; white-space:nowrap; background:var(--bb); color:var(--bf);
  transition:translate .9s var(--pop), scale .25s var(--ease), background-color .3s, box-shadow .5s var(--ease), border-color .3s; }
.btn:hover { translate:0 -2px; }
.btn:active { scale:.97; }
.btn-primary { --bb: var(--green); --bf: #03140a; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.08), 0 14px 36px -12px rgba(74,222,128,.7); }
.btn-primary:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.08), 0 22px 54px -14px rgba(74,222,128,.9); }
.btn-violet { --bb: var(--purple); --bf: #0b0d26; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.08), 0 14px 36px -12px rgba(129,140,248,.75); }
.btn-violet:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.08), 0 22px 54px -14px rgba(129,140,248,.95); }
.btn-glass { background:var(--glass-bg); border:1px solid var(--line-2); box-shadow:var(--glass-hi); }
.btn-glass:hover { background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border-color:rgba(255,255,255,.22); }
.btn-arrow { width:30px; height:30px; margin-right:-1rem; border-radius:50%; display:grid; place-items:center; font-size:.95rem; background:rgba(0,0,0,.12); transition:transform .9s var(--pop); }
.btn-glass .btn-arrow { background:rgba(255,255,255,.08); }
.btn:hover .btn-arrow { transform:translate(2px,-2px) rotate(-12deg); }
.btn-block { width:100%; }
.btn-sm { height:44px; padding:0 1.15rem; font-size:.87rem; }
@property --angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.btn-liquid::before { content:''; position:absolute; inset:-1.5px; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .45s var(--ease);
  background:conic-gradient(from var(--angle), var(--green), var(--blue), var(--purple), var(--green)); }
.btn-liquid:hover::before, .btn-liquid:focus-visible::before { opacity:1; animation:spin 3.2s linear infinite; }
.btn-liquid.btn-glass:hover { background:#0e0f12; }
@keyframes spin { to { --angle:360deg; } }

/* Lista z ptaszkami */
.ticks { list-style:none; display:grid; gap:.8rem; align-content:start; }
.ticks li { display:flex; align-items:flex-start; gap:.75rem; color:var(--ink-2); font-size:.97rem; line-height:1.5; }
.ticks li::before { content:''; flex-shrink:0; width:20px; height:20px; margin-top:1px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; }
.ticks.p li::before, .page-nfc .ticks li::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.js .ticks li { opacity:0; transform:translateX(-10px); transition:opacity .5s var(--ease), transform .9s var(--spring); }
.in .ticks li, .ticks.in li { opacity:1; transform:none; }
.in .ticks li:nth-child(2) { transition-delay:.07s; } .in .ticks li:nth-child(3) { transition-delay:.14s; } .in .ticks li:nth-child(4) { transition-delay:.21s; }
.in .ticks li:nth-child(5) { transition-delay:.28s; } .in .ticks li:nth-child(6) { transition-delay:.35s; } .in .ticks li:nth-child(7) { transition-delay:.42s; } .in .ticks li:nth-child(8) { transition-delay:.49s; }

/* Gwiazdki */
.stars { display:flex; gap:3px; }
.stars svg { width:17px; height:17px; fill:var(--star); }
.js .stars svg { transform:scale(0) rotate(-45deg); transition:transform .9s var(--pop); }
.in .stars svg, .play .stars svg { transform:none; }
.stars svg:nth-child(2) { transition-delay:.06s; } .stars svg:nth-child(3) { transition-delay:.12s; } .stars svg:nth-child(4) { transition-delay:.18s; } .stars svg:nth-child(5) { transition-delay:.24s; }

/* Awatar */
.avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:.82rem; font-weight:700; letter-spacing:-.01em; color:#050505;
  background:linear-gradient(135deg, var(--green), var(--blue)); box-shadow:0 0 0 3px rgba(255,255,255,.06); }
.avatar.p { background:linear-gradient(135deg, var(--purple), var(--blue)); }
.avatar.b { background:linear-gradient(135deg, var(--blue), var(--green)); }
.author { display:flex; align-items:center; gap:.85rem; }
.author-name { font-weight:600; font-size:.96rem; letter-spacing:-.01em; }
.author-role { font-size:.84rem; color:var(--ink-3); }

/* Przełącznik segmentowy (ilość plakietek, pakiety) */
.seg { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px; border-radius:var(--r-pill); background:rgba(0,0,0,.25); border:1px solid var(--line); }
.seg-pill { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / var(--n, 3)); border-radius:var(--r-pill); background:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px -6px color-mix(in srgb, var(--accent) 70%, transparent); transform:translateX(calc(var(--k, 0) * 100%)); transition:transform .8s var(--pop); }
.seg > button { position:relative; z-index:1; min-height:48px; padding:.35rem .5rem; border-radius:var(--r-pill); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.88rem; font-weight:600; color:var(--ink-3); line-height:1.2; transition:color .35s; }
.seg > button:hover { color:var(--ink); }
.seg > button.active { color:var(--on-accent); }
.seg-note { font-family:var(--mono); font-size:.66rem; font-weight:500; color:var(--green); margin-top:2px; }
.seg > button.active .seg-note { color:color-mix(in srgb, var(--on-accent) 75%, transparent); }

/* Rolująca liczba (ceny, sumy) */
.roll { display:inline-flex; font-variant-numeric:tabular-nums; }
.roll-d { display:inline-block; height:1em; line-height:1; overflow:hidden; }
.roll-d > span { display:flex; flex-direction:column; transition:transform 1s var(--spring); }
.roll-d > span > span { height:1em; }

/* Akordeon */
.acc { display:grid; gap:.7rem; }
.acc-item { border-radius:22px; background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-hi); transition:border-color .4s, background .5s var(--ease); }
.acc-item:hover { border-color:var(--line-2); }
.acc-item[open] { border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255,255,255,.02)); }
.acc-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1.35rem 1.5rem; font-size:1.05rem; font-weight:500; letter-spacing:-.02em; }
.acc-item summary::-webkit-details-marker { display:none; }
.acc-item summary::after { content:''; flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2);
  background:linear-gradient(var(--accent), var(--accent)) center/12px 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center/1.5px 12px no-repeat; transition:transform .9s var(--pop), background-color .3s; }
.acc-item[open] summary::after { transform:rotate(135deg); background-color:color-mix(in srgb, var(--accent) 15%, transparent); }
.acc-body { overflow:hidden; }
.acc-body p { padding:0 1.5rem 1.45rem; color:var(--ink-2); line-height:1.75; max-width:62ch; }

/* Wiersz (wyniki wyszukiwania, opcje, opinie w makietach) */
.row { display:flex; align-items:center; gap:.85em; padding:.85em 1em; border-radius:14px; background:var(--solid); border:1px solid var(--line); }
.row-lines { flex:1; display:grid; gap:.45em; }
.row-lines i { height:.5em; border-radius:4px; background:rgba(255,255,255,.22); }
.row-lines i:nth-child(2) { width:70%; background:rgba(255,255,255,.1); }

/* Chip: mała pływająca karta statusu */
.chip { display:flex; align-items:center; gap:.7rem; padding:.7rem .95rem .7rem .7rem; border-radius:18px; white-space:nowrap; }
.chip-k { font-size:.72rem; color:var(--ink-3); line-height:1.2; }
.chip-v { font-size:.92rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; display:flex; align-items:center; gap:.4rem; }
.chip.glass { background:linear-gradient(160deg, rgba(34,36,43,.88), rgba(16,17,21,.86)); }
.site-pill { display:inline-flex; align-items:center; gap:.5rem; height:34px; padding:0 1rem; border-radius:var(--r-pill); font-size:.85rem; font-weight:600; color:var(--ink);
  background:var(--glass-bg); border:1px solid var(--line-2); box-shadow:var(--glass-hi); }
.site-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(74,222,128,.22); }
.live { position:relative; width:7px; height:7px; border-radius:50%; background:var(--green); }
.live::after { content:''; position:absolute; inset:0; border-radius:50%; background:rgba(74,222,128,.6); animation:live 1.8s ease-out infinite; }
@keyframes live { 0% { transform:scale(1); opacity:1; } 70%, 100% { transform:scale(3.6); opacity:0; } }

/* Logo: znak z kropek + wordmark */
.logo { display:inline-flex; align-items:center; gap:.6rem; font-size:1.06rem; font-weight:700; letter-spacing:-.045em; white-space:nowrap; }
.logo em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nx-mark { width:28px; height:28px; flex-shrink:0; overflow:visible; }
.nx-mark circle { transform-box:fill-box; transform-origin:center; transition:transform 1.1s var(--pop), opacity .35s var(--ease); transition-delay:var(--dl); }
.nx-mark line { transition:stroke-dashoffset .7s var(--ease); transition-delay:calc(var(--dl) + .3s); }
.nx-mark.build circle:not(.seed) { opacity:0; transform:translate(var(--sx), var(--sy)) scale(.25); }
.nx-mark.build line { stroke-dashoffset:var(--len); }
.logo:hover .nx-mark { animation:breath 1.1s var(--pop); }
@keyframes breath { 45% { transform:scale(1.14) rotate(10deg); } }

/* 6 ── MAKIETY (zbudowane z tych samych prymitywów co strona) ─────────────── */

/* Mini-strona: skaluje się przez font-size kontenera (1em = jednostka siatki) */
.ms { position:relative; display:grid; gap:1.3em; padding:1.5em 1.7em 1.7em; font-size:10px; overflow:hidden;
  background:radial-gradient(70% 60% at 92% 0%, rgba(129,140,248,.2), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(74,222,128,.14), transparent 60%), #08090b; }
.ms-nav { display:flex; align-items:center; gap:1em; }
.ms-logo { width:1.8em; height:1.8em; border-radius:.55em; background:var(--grad); }
.ms-brand { width:7em; height:.7em; border-radius:1em; background:rgba(255,255,255,.55); }
.ms-links { margin-left:auto; display:flex; align-items:center; gap:1.4em; }
.ms-links i { width:3.6em; height:.55em; border-radius:1em; background:rgba(255,255,255,.22); }
.ms-links b { width:6.6em; height:2.4em; border-radius:2em; background:var(--green); }
.ms-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:1.8em; align-items:center; }
.ms-h { display:grid; gap:.7em; }
.ms-h i { height:2.2em; border-radius:.5em; background:#f5f6f7; width:92%; }
.ms-h i:nth-child(2) { width:74%; background:var(--grad); }
.ms-p { display:grid; gap:.55em; margin-top:.4em; }
.ms-p i { height:.6em; border-radius:1em; background:rgba(255,255,255,.2); }
.ms-p i:nth-child(2) { width:80%; } .ms-p i:nth-child(3) { width:56%; background:rgba(255,255,255,.12); }
.ms-btns { display:flex; gap:.8em; margin-top:1em; }
.ms-btns b { width:9em; height:2.9em; border-radius:2em; background:var(--green); box-shadow:0 .8em 2em -.6em rgba(74,222,128,.7); }
.ms-btns i { width:7em; height:2.9em; border-radius:2em; border:1px solid rgba(255,255,255,.2); }
.ms-img { position:relative; aspect-ratio:1.3; border-radius:1.4em; overflow:hidden; background:linear-gradient(135deg, #4ade80 0%, #22c55e 25%, #38bdf8 62%, #818cf8 100%); }
.ms-img::before { content:''; position:absolute; width:75%; height:75%; left:38%; top:-22%; border-radius:50%; background:rgba(255,255,255,.34); filter:blur(2.4em); }
.ms-img::after { content:''; position:absolute; width:45%; height:55%; left:-10%; bottom:-22%; border-radius:50%; background:rgba(5,5,5,.38); filter:blur(1.8em); }
.ms-img .stars { position:absolute; left:8%; bottom:9%; z-index:1; padding:.55em .8em; border-radius:1em; background:rgba(5,5,5,.6); gap:.25em; }
.ms-img .stars svg { width:1.3em; height:1.3em; }
@keyframes ms-float { to { transform:translate(-2.5em, 1em); } }
.ms-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:1em; }
.ms-cards > div { display:grid; gap:.7em; padding:1.2em; border-radius:1.2em; background:#111215; border:1px solid rgba(255,255,255,.07); }
.ms-cards b { width:2.6em; height:2.6em; border-radius:.8em; background:var(--green); }
.ms-cards > div:nth-child(2) b { background:var(--purple); } .ms-cards > div:nth-child(3) b { background:var(--blue); }
.ms-cards i { height:.6em; border-radius:1em; background:rgba(255,255,255,.4); width:64%; }
.ms-cards i + i { background:rgba(255,255,255,.12); width:90%; }
/* układ mobilny mini-strony */
.ms.m { gap:1.1em; padding:3.2em 1.3em 1.3em; }
.ms.m .ms-links i { display:none; }
.ms.m .ms-links b { width:2.2em; height:2.2em; border-radius:.7em; background:rgba(255,255,255,.12); }
.ms.m .ms-hero { grid-template-columns:1fr; gap:1.2em; }
.ms.m .ms-cards { grid-template-columns:1fr; }
.ms.m .ms-cards > div { grid-template-columns:auto 1fr; align-items:center; padding:1em; }
.ms.m .ms-cards > div i:last-child { display:none; }
/* budowanie mini-strony element po elemencie (gdy rodzic ma .play) */
[data-build] .ms > *, [data-build] .ms-hero > *, [data-build] .ms-cards > * { opacity:0; transform:translateY(1.4em) scale(.96);
  transition:opacity .6s var(--ease), transform 1.1s var(--spring); }
[data-build].play .ms > *, [data-build].play .ms-hero > *, [data-build].play .ms-cards > * { opacity:1; transform:none; }
[data-build].play .ms-nav { transition-delay:.15s; }
[data-build].play .ms-hero > :nth-child(1) { transition-delay:.35s; } [data-build].play .ms-hero > :nth-child(2) { transition-delay:.55s; }
[data-build].play .ms-cards > :nth-child(1) { transition-delay:.75s; } [data-build].play .ms-cards > :nth-child(2) { transition-delay:.85s; } [data-build].play .ms-cards > :nth-child(3) { transition-delay:.95s; }
[data-build].play .ms-hero, [data-build].play .ms-cards { transition-delay:.3s; }

/* Ramka przeglądarki */
.frame { position:relative; border-radius:18px; overflow:hidden; background:#08090b; border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 50px 100px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5); }
.frame-bar { height:36px; display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); }
.frame-bar > i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); }
.frame-url { margin:0 auto; height:22px; padding:0 .85rem; border-radius:var(--r-pill); display:flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.06); font-family:var(--mono); font-size:.68rem; color:var(--ink-3); }
.frame-url i { color:var(--green); font-size:.72rem; }
/* Telefon */
.device { position:relative; width:220px; aspect-ratio:9 / 19.2; padding:8px; border-radius:40px; background:linear-gradient(150deg, #34363d, #121317 40%, #0b0c0f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 3px rgba(0,0,0,.6), 0 50px 100px -30px rgba(0,0,0,.95); }
.device-screen { position:relative; height:100%; border-radius:32px; overflow:hidden; background:#07080a; }
.device-screen::before { content:''; position:absolute; z-index:5; top:9px; left:50%; translate:-50% 0; width:32%; height:22px; border-radius:20px; background:#000; }
.device .ms { height:100%; font-size:6.4px; }

/* Plakietka NFC (obiekt CSS 3D) */
.plaque { --pw: 220px; position:relative; width:var(--pw); aspect-ratio:1 / 1.38; border-radius:calc(var(--pw) * .1); transform-style:preserve-3d;
  background:linear-gradient(155deg, #23252c 0%, #0d0e11 38%, #070709 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 0 #1b1c21, 0 4px 0 #111216, 0 50px 90px -24px rgba(0,0,0,.95), 0 0 60px -20px rgba(129,140,248,.45); }
.plaque::before { content:''; position:absolute; inset:7%; border-radius:calc(var(--pw) * .065); border:1.5px solid transparent; pointer-events:none;
  background:var(--grad) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.75; }
.plaque::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(118deg, transparent 30%, rgba(255,255,255,.1) 45%, transparent 56%); background-size:260% 100%; background-position:130% 0; }
.play .plaque::after { animation:plaque-sheen 6s var(--ease-io) infinite; }
@keyframes plaque-sheen { 0%, 35% { background-position:130% 0; } 75%, 100% { background-position:-30% 0; } }
.plaque-in { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:16% 12% 15%; }
.plaque-in .logo { font-size:calc(var(--pw) * .075); gap:.45em; }
.plaque-in .nx-mark { width:1.35em; height:1.35em; }
.plaque-nfc { position:relative; width:calc(var(--pw) * .36); aspect-ratio:1; display:grid; place-items:center; }
.plaque-nfc .ph { font-size:calc(var(--pw) * .2); color:var(--purple); filter:drop-shadow(0 0 14px rgba(129,140,248,.8)); }
.plaque .stars svg { width:calc(var(--pw) * .085); height:calc(var(--pw) * .085); }
.ripple { position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--purple); opacity:0; pointer-events:none; }
.play .ripple { animation:ripple 3s var(--ease) infinite; }
.play .ripple:nth-child(2) { animation-delay:1s; } .play .ripple:nth-child(3) { animation-delay:2s; }
@keyframes ripple { 0% { transform:scale(.7); opacity:.9; } 100% { transform:scale(2.6); opacity:0; } }

/* 7 ── SEKCJE ────────────────────────────────────────────────────────────── */

/* Nawigacja */
.nav-shell { position:fixed; top:14px; left:50%; translate:-50% 0; z-index:500; width:calc(100% - 2 * var(--gutter)); max-width:1180px; }
.nav { height:64px; display:flex; align-items:center; gap:1rem; padding:0 .55rem 0 1.15rem; border-radius:var(--r-pill);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.09); box-shadow:var(--glass-hi);
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); transition:background .5s var(--ease), box-shadow .6s var(--ease), border-color .5s; }
.nav-shell.scrolled .nav { background:linear-gradient(160deg, rgba(24,25,30,.86), rgba(12,13,16,.82)); border-color:rgba(255,255,255,.1); box-shadow:var(--glass-hi), 0 24px 60px -24px rgba(0,0,0,.95); }
.js .nav { animation:nav-in 1.3s var(--spring) .05s both; }
@keyframes nav-in { from { opacity:0; transform:translateY(-22px) scale(.97); filter:blur(10px); } }
.nav-links { display:flex; align-items:center; gap:.15rem; list-style:none; margin-left:.9rem; flex:1; }
.nav-links > li > a { display:inline-flex; align-items:center; gap:.35rem; height:40px; padding:0 .95rem; border-radius:var(--r-pill); font-size:.9rem; font-weight:500; color:var(--ink-2); transition:color .3s, background-color .3s; }
.nav-links > li > a:hover, .nav-links > li > a.current { color:var(--ink); background:rgba(255,255,255,.07); }
.nav-dropdown { position:relative; }
.nav-dropdown-chevron { font-size:.8rem; transition:transform .7s var(--pop); }
.nav-dropdown:hover .nav-dropdown-chevron, .nav-dropdown:focus-within .nav-dropdown-chevron { transform:rotate(180deg); }
.nav-dropdown-panel { position:absolute; top:100%; left:-.5rem; padding-top:.75rem; opacity:0; pointer-events:none; transform:translateY(8px) scale(.96); filter:blur(8px); transform-origin:16% 0;
  transition:opacity .3s var(--ease), transform .8s var(--spring), filter .45s var(--ease); }
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { opacity:1; pointer-events:auto; transform:none; filter:none; }
.nav-dropdown-panel-inner { width:300px; padding:.5rem; border-radius:24px; display:grid; gap:.2rem; background:linear-gradient(160deg, rgba(30,32,38,.94), rgba(14,15,18,.94));
  border:1px solid rgba(255,255,255,.11); box-shadow:var(--glass-hi), 0 30px 70px -20px rgba(0,0,0,.9); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
.nav-dropdown-panel-inner a { display:flex; align-items:center; gap:.85rem; padding:.65rem; border-radius:16px; transition:background-color .3s; }
.nav-dropdown-panel-inner a:hover, .nav-dropdown-panel-inner a.current { background:rgba(255,255,255,.06); }
.dd-t { font-size:.93rem; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.lang-sw { display:flex; align-items:center; gap:2px; padding:3px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:rgba(0,0,0,.2); }
.lang-sep { display:none; }
.lang-btn { height:30px; min-width:40px; padding:0 .6rem; border-radius:var(--r-pill); font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.06em; color:var(--ink-3); transition:color .3s, background-color .4s; }
.lang-btn.active { color:var(--on-accent); background:var(--accent); }
.lang-btn:hover:not(.active) { color:var(--ink); }
.nav-cta { height:46px; padding:0 1.25rem; font-size:.88rem; }
.nav-back { margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; height:40px; padding:0 .95rem; border-radius:var(--r-pill); font-size:.9rem; font-weight:500; color:var(--ink-2); transition:color .3s, background-color .3s; }
.nav-back:hover { color:var(--ink); background:rgba(255,255,255,.07); }
.nav-phone { display:inline-flex; align-items:center; gap:.5rem; height:46px; padding:0 1.15rem; border-radius:var(--r-pill); font-family:var(--mono); font-size:.82rem; white-space:nowrap; color:var(--green); background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.25); transition:background-color .3s; }
.nav-phone:hover { background:rgba(74,222,128,.16); }
.burger { display:none; position:relative; width:46px; height:46px; margin-left:auto; border-radius:50%; background:rgba(255,255,255,.07); }
.burger span { position:absolute; left:15px; right:15px; height:1.5px; border-radius:2px; background:var(--ink); transition:transform .8s var(--pop), opacity .3s; }
.burger span:nth-child(1) { top:18px; } .burger span:nth-child(2) { top:22.5px; } .burger span:nth-child(3) { top:27px; }
.burger.open span:nth-child(1) { transform:translateY(4.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-4.5px) rotate(-45deg); }
.mob-overlay { position:fixed; inset:0; z-index:450; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:6.5rem var(--gutter) 2.25rem; background:rgba(5,5,5,.88);
  -webkit-backdrop-filter:blur(30px) saturate(150%); backdrop-filter:blur(30px) saturate(150%); opacity:0; pointer-events:none; transition:opacity .45s var(--ease); }
.mob-overlay.open { opacity:1; pointer-events:auto; }
.mob-overlay > a { padding:.55rem 0; border-bottom:1px solid var(--line); font-size:clamp(1.55rem, 6.4vw, 2.2rem); font-weight:700; letter-spacing:-.045em; line-height:1.25;
  opacity:0; filter:blur(10px); transform:translateY(22px); transition:opacity .6s var(--ease), filter .6s var(--ease), transform 1s var(--spring); }
.mob-overlay > a.current, .mob-overlay > a.mob-accent { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mob-overlay.open > a, .mob-overlay.open .mob-lang { opacity:1; filter:none; transform:none; }
.mob-overlay.open > a:nth-child(2) { transition-delay:.05s; } .mob-overlay.open > a:nth-child(3) { transition-delay:.1s; } .mob-overlay.open > a:nth-child(4) { transition-delay:.15s; } .mob-overlay.open > a:nth-child(5) { transition-delay:.2s; } .mob-overlay.open > a:nth-child(6) { transition-delay:.25s; } .mob-overlay.open > a:nth-child(7) { transition-delay:.3s; }
.mob-lang { display:flex; gap:.5rem; margin-top:auto; opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease) .25s, transform 1s var(--spring) .25s; }
.mob-lang .lang-btn { height:46px; min-width:70px; font-size:.9rem; border:1px solid var(--line-2); }
@media (max-width: 1040px) {
  .nav-links, .nav > .lang-sw, .nav-cta { display:none; }
  .burger { display:block; }
}

/* Pasek postępu (scroll-driven, bez nasłuchu scrolla) */
.scroll-progress { position:fixed; inset:0 0 auto; z-index:700; height:2px; transform-origin:0 50%; transform:scaleX(0); background:var(--grad); }
@supports (animation-timeline: scroll()) { .scroll-progress { animation:progress linear both; animation-timeline:scroll(root); } }
@keyframes progress { to { transform:scaleX(1); } }

/* Hero */
.hero { position:relative; min-height:100dvh; display:flex; align-items:center; isolation:isolate; overflow:clip; padding-block:clamp(7.5rem, 14vh, 9.5rem) clamp(3.5rem, 8vh, 5.5rem); }
.hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 72% 45%, rgba(56,189,248,.12), transparent 70%), radial-gradient(45% 50% at 95% 90%, rgba(129,140,248,.14), transparent 70%), radial-gradient(40% 45% at 20% 10%, rgba(74,222,128,.08), transparent 70%); }
.hero-bg canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.8s var(--ease); }
.hero-bg canvas.ready { opacity:1; }
.hero-bg::after { content:''; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(transparent, var(--bg)); }
.hero-grid { width:100%; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr); gap:clamp(2rem, 4vw, 4.5rem); align-items:center; }
.hero-copy { display:flex; flex-direction:column; gap:1.6rem; }
.hero-copy .display.long { font-size:clamp(2.4rem, min(4.3vw, 8vh), 4.5rem); }
.hero-copy .display { margin-top:.2rem; font-size:clamp(2.5rem, min(4.9vw, 9vh), 5.2rem); }
.hero-sub { font-size:clamp(1.02rem, 1.2vw, 1.14rem); color:var(--ink-2); line-height:1.7; max-width:46ch; text-wrap:pretty; }
.hero-btns { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.4rem; }
.hero-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.pill { display:inline-flex; align-items:center; gap:.5rem; height:36px; padding:0 .95rem 0 .55rem; border-radius:var(--r-pill); font-size:.84rem; font-weight:500; color:var(--ink-2);
  background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-hi); }
.pill::before { content:''; width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:color-mix(in srgb, var(--accent) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; }
.page-nfc .pill::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.scroll-hint { position:absolute; left:50%; bottom:1.5rem; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.scroll-line { width:1px; height:32px; position:relative; overflow:hidden; background:rgba(255,255,255,.12); }
.scroll-line::after { content:''; position:absolute; inset:0; background:var(--accent); transform:translateY(-100%); animation:sline 2.2s var(--ease-io) infinite; }
@keyframes sline { 50% { transform:none; } 100% { transform:translateY(100%); } }
@media (max-width: 980px) {
  .hero { min-height:auto; }
  .hero-grid { grid-template-columns:1fr; }
  .scroll-hint { display:none; }
}

/* Scena hero: kompozycja z głębią */
.stage { position:relative; aspect-ratio:1 / .86; perspective:1600px; --rx:0deg; --ry:0deg; }
.stage-rig { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(calc(6deg + var(--rx))) rotateY(calc(-12deg + var(--ry))); transition:transform 1.2s var(--spring); }
.stage-rig > * { position:absolute; }
.js .stage-rig > * { opacity:0; transition:opacity .9s var(--ease), transform 1.5s var(--spring); }
.stage.play .stage-rig > * { opacity:1; }

/* Marquee: jedna wstęga kinetycznej typografii */
.marquee { position:relative; overflow:hidden; padding-block:clamp(2rem, 4vw, 3rem); border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display:flex; width:max-content; animation:mq 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.mq-item { display:inline-flex; align-items:center; gap:clamp(1.5rem, 3vw, 2.6rem); padding-right:clamp(1.5rem, 3vw, 2.6rem); white-space:nowrap;
  font-size:clamp(2rem, 4.6vw, 4rem); font-weight:700; letter-spacing:-.05em; line-height:1.1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.24); }
.mq-item:nth-child(3n+1) { color:var(--ink); -webkit-text-stroke:0; }
.mq-item:nth-child(3n+2) { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:0; }
.mq-item::after { content:''; width:.22em; height:.22em; border-radius:50%; background:var(--grad); }
@keyframes mq { to { transform:translateX(-50%); } }

/* Cytat */
.quote { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(1.25rem, 4vw, 3.5rem); padding:clamp(2rem, 5vw, 4.5rem); border-radius:var(--r-lg); overflow:hidden; }
.quote-mark { font-size:clamp(6rem, 12vw, 10rem); line-height:.72; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.quote-text { margin:1.1rem 0 2rem; font-size:clamp(1.6rem, 3.3vw, 2.8rem); font-weight:600; letter-spacing:-.04em; line-height:1.18; text-wrap:balance; }
@media (max-width: 720px) { .quote { grid-template-columns:1fr; gap:.25rem; } .quote-mark { font-size:5.5rem; } }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(2.5rem, 6vw, 6rem); align-items:start; }
.faq-grid .sh { position:sticky; top:8rem; }
.faq-grid .sh + * { margin-top:0; }
.faq-grid .h2 { font-size:clamp(2rem, 3.6vw, 3.2rem); }
@media (max-width: 900px) { .faq-grid { grid-template-columns:1fr; gap:2.5rem; } .faq-grid .sh { position:static; } }

/* Finał: logo + CTA */
.finale { position:relative; isolation:isolate; overflow:clip; padding-block:clamp(6rem, 12vw, 10rem) clamp(4.5rem, 8vw, 7rem); text-align:center; }
.finale-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.finale-bg canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.6s var(--ease); }
.finale-bg canvas.ready { opacity:1; }
.finale-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(50% 50% at 50% 42%, rgba(56,189,248,.16), transparent 70%); }
.finale-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(var(--bg), transparent 22%, transparent 78%, var(--bg)); }
.lockup { display:flex; flex-direction:column; align-items:center; gap:1rem; margin-bottom:2.4rem; }
.lockup .nx-mark { width:clamp(84px, 9vw, 116px); height:auto; filter:drop-shadow(0 18px 40px rgba(56,189,248,.35)); }
.lockup-word { position:relative; width:clamp(210px, 24vw, 320px); }
.lockup-word img { width:100%; height:auto; }
.lockup-word::after { content:''; position:absolute; inset:0; pointer-events:none; -webkit-mask:url(brand/wordmark.png) center / 100% 100% no-repeat; mask:url(brand/wordmark.png) center / 100% 100% no-repeat;
  background:linear-gradient(105deg, transparent 38%, rgba(74,222,128,.95) 50%, transparent 62%); background-size:320% 100%; background-position:115% 0; }
.lockup.in .lockup-word::after { animation:sheen 2.2s var(--ease-io) 1.1s both; }
.finale .display { font-size:clamp(2.4rem, 5.8vw, 5rem); max-width:15ch; margin:1.25rem auto; }
.finale .lead { margin-inline:auto; }
.finale-btns { display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem; margin-top:2.4rem; }

/* Stopka */
.site-footer { position:relative; overflow:hidden; padding-top:4.5rem; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.ft-top { display:grid; grid-template-columns:1.3fr 1fr auto; gap:3rem; align-items:start; }
.ft-copy { margin-top:1rem; max-width:40ch; font-size:.87rem; color:var(--ink-3); line-height:1.7; }
.footer-links { list-style:none; display:grid; grid-template-columns:repeat(2, max-content); gap:.7rem 2.75rem; }
.footer-links a { font-size:.93rem; color:var(--ink-2); transition:color .3s; }
.footer-links a:hover { color:var(--green); }
.footer-social { display:flex; gap:.5rem; }
.footer-social a { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:1.15rem; color:var(--ink-2); border:1px solid var(--line-2); background:rgba(255,255,255,.03); transition:color .3s, border-color .3s, background-color .3s, translate .9s var(--pop); }
.footer-social a:hover { color:var(--green); border-color:rgba(74,222,128,.4); background:rgba(74,222,128,.08); translate:0 -3px; }
.ft-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem; margin-top:3rem; padding-block:2rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-3); }
.ft-bottom a { color:var(--ink-2); transition:color .3s; }
.ft-bottom a:hover { color:var(--ink); }
.ft-word { margin-bottom:-.13em; text-align:center; font-size:clamp(4.5rem, 19vw, 17rem); font-weight:800; letter-spacing:-.07em; line-height:.8; user-select:none; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ft-word span { background:linear-gradient(180deg, rgba(56,189,248,.34), transparent 85%); -webkit-background-clip:text; background-clip:text; }
@media (max-width: 900px) { .ft-top { grid-template-columns:1fr; gap:2.25rem; } }
.mini-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem; padding:2rem var(--gutter); border-top:1px solid var(--line); font-size:.88rem; }
.mini-footer a { color:var(--ink-3); transition:color .3s; }
.mini-footer a:hover { color:var(--green); }
.footer-sep { color:var(--ink-4); }

/* Modal języka */
.lang-modal { position:fixed; inset:0; z-index:600; display:grid; place-items:center; padding:var(--gutter); background:rgba(5,5,5,.72); -webkit-backdrop-filter:blur(30px) saturate(150%); backdrop-filter:blur(30px) saturate(150%); transition:opacity .6s var(--ease); }
.lang-modal.out { opacity:0; pointer-events:none; }
.lang-modal[hidden] { display:none; }
.lang-modal-box { width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.lang-modal-box > * { animation:modal-in 1.2s var(--spring) both; }
.lang-modal-box > :nth-child(2) { animation-delay:.1s; } .lang-modal-box > :nth-child(3) { animation-delay:.18s; } .lang-modal-box > :nth-child(4) { animation-delay:.26s; }
@keyframes modal-in { from { opacity:0; transform:translateY(22px) scale(.96); filter:blur(14px); } }
.lang-modal-logo { flex-direction:column; gap:1rem; font-size:2rem; }
.lang-modal-logo .nx-mark { width:84px; height:84px; }
.lang-modal-divider { width:1px; height:22px; background:linear-gradient(var(--line-2), transparent); }
.lang-modal-sub { font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:center; }
.lang-modal-options { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.lang-modal-btn { display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; padding:1.35rem 1.3rem; border-radius:24px; text-align:left;
  background:var(--glass-bg); border:1px solid var(--line-2); box-shadow:var(--glass-hi); transition:translate .9s var(--pop), scale .25s, border-color .4s, background .4s; }
.lang-modal-btn:hover { translate:0 -5px; border-color:rgba(74,222,128,.5); background:linear-gradient(160deg, rgba(74,222,128,.16), rgba(255,255,255,.03)); }
.lang-modal-btn:active { scale:.97; }
.lang-modal-flag { margin-bottom:.85rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--green); }
.lang-modal-name { font-size:1.15rem; font-weight:600; letter-spacing:-.02em; }
.lang-modal-native { font-size:.82rem; color:var(--ink-3); }

/* Strony prawne */
.legal { padding-top:clamp(8rem, 14vw, 10rem); padding-bottom:6rem; }
.legal-grid { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:clamp(1.5rem, 4vw, 3rem); align-items:start; }
.legal-toc { position:sticky; top:7rem; display:grid; gap:.1rem; padding:.55rem; border-radius:24px; font-size:.85rem; }
.legal-toc a { display:block; padding:.5rem .75rem; border-radius:12px; color:var(--ink-3); transition:color .3s, background-color .3s; }
.legal-toc a:hover, .legal-toc a.active { color:var(--ink); background:rgba(255,255,255,.07); }
.legal-paper { padding:clamp(1.6rem, 4.5vw, 3.75rem); border-radius:var(--r-lg); }
.legal-wrap { max-width:720px; }
.legal-wrap h1 { margin-bottom:1rem; font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:700; letter-spacing:-.048em; line-height:1.04; text-wrap:balance; }
.legal-updated { display:inline-flex; margin-bottom:3rem; padding:.4rem .85rem; border-radius:var(--r-pill); border:1px solid var(--line-2); font-family:var(--mono); font-size:.76rem; color:var(--ink-3); }
.legal-wrap h2 { margin:3rem 0 1rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:1.3rem; font-weight:600; letter-spacing:-.03em; scroll-margin-top:7rem; }
.legal-wrap h2:first-of-type { margin-top:0; }
.legal-wrap p, .legal-wrap li { font-size:.98rem; color:var(--ink-2); line-height:1.85; }
.legal-wrap p { margin-bottom:1rem; }
.legal-wrap ul { margin:0 0 1.2rem 1.2rem; }
.legal-wrap li { margin-bottom:.45rem; padding-left:.3rem; }
.legal-wrap li::marker { color:var(--green); }
.legal-wrap a { color:var(--green); text-decoration:underline; text-decoration-color:rgba(74,222,128,.4); text-underline-offset:3px; transition:text-decoration-color .3s; }
.legal-wrap a:hover { text-decoration-color:var(--green); }
.legal-wrap strong { color:var(--ink); font-weight:600; }
.legal-wrap table { width:100%; margin:0 0 1.2rem; border-collapse:collapse; font-size:.9rem; }
.legal-wrap th, .legal-wrap td { padding:.7rem .8rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); color:var(--ink-2); }
.legal-wrap th { color:var(--ink); font-weight:600; }
@media (max-width: 900px) { .legal-grid { grid-template-columns:1fr; } .legal-toc { display:none; } }

/* 8 ── DOSTĘPNOŚĆ ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .js [data-reveal], .js [data-split] .kw, .js .ticks li, .js .stars svg, .js .stage-rig > *,
  [data-build] .ms > *, [data-build] .ms-hero > *, [data-build] .ms-cards > * { opacity:1 !important; filter:none !important; transform:none !important; }
  .marquee-track { animation:none; }
  .scroll-progress { display:none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .nav, .acc-item, .btn-glass, .tag, .pill, .mob-overlay, .lang-modal { background:#111215 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* Płynne przewijanie (Lenis, tylko mysz/gładzik) */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:clip; }

/* Pusty stan (np. Realizacje przed dodaniem projektów) */
.empty { position:relative; display:grid; justify-items:center; gap:1.1rem; padding:clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); text-align:center; border-radius:var(--r-lg); overflow:hidden; }
.empty .h3 { font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
.empty .body { max-width:52ch; }
.empty-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:.8rem; }
.empty-art { position:relative; width:min(100%, 560px); aspect-ratio:2.4; margin-bottom:.8rem; }
.empty-art .slot { position:absolute; top:0; bottom:0; width:30%; border-radius:18px; border:1.5px dashed rgba(255,255,255,.14); background:linear-gradient(160deg, rgba(255,255,255,.04), transparent);
  display:grid; place-items:center; color:var(--ink-4); font-size:1.4rem; }
.empty-art .slot:nth-child(1) { left:0; transform:rotate(-6deg) translateY(10px); }
.empty-art .slot:nth-child(2) { left:35%; z-index:1; border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent); }
.empty-art .slot:nth-child(3) { right:0; transform:rotate(6deg) translateY(10px); }
.play .empty-art .slot:nth-child(2) { animation:slot 3.2s var(--ease-io) infinite; }
@keyframes slot { 50% { transform:translateY(-8px); } }

/* Szkło bez rozmycia: ciemna baza pod półprzezroczystym gradientem, żeby tekst był czytelny nad wstęgami */
.tag, .pill, .btn-glass, .btn-glass:hover, .contact, .site-pill, .lang-modal-btn { background-color:rgba(12,13,16,.62); }

/* Zamknięte nakładki nie mogą być renderowane: rozmycie pod nimi kosztowało każdą klatkę przewijania */
.mob-overlay { visibility:hidden; transition:opacity .45s var(--ease), visibility 0s linear .45s; }
.mob-overlay.open { visibility:visible; transition:opacity .45s var(--ease), visibility 0s; }
.nav-dropdown-panel { visibility:hidden; transition:opacity .3s var(--ease), transform .8s var(--spring), filter .45s var(--ease), visibility 0s linear .3s; }
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { visibility:visible; transition:opacity .3s var(--ease), transform .8s var(--spring), filter .45s var(--ease), visibility 0s; }

/* Sceny poza ekranem: pętle wstrzymane (zachowują stan, wznawiają się po powrocie) */
[data-scene].off, [data-scene].off * { animation-play-state:paused !important; }

/* Ekrany dotykowe: lżejsze rozmycie pod paskiem (liczone przy każdym przesunięciu palcem) */
@media (hover: none), (pointer: coarse) {
  .nav { -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); }
}

/* Telefon i tablet: hero wyśrodkowane */
@media (max-width: 980px) {
  .hero-copy { align-items:center; text-align:center; position:relative; z-index:2; }
  .hero-copy .tag { align-self:center; }
  .hero-copy .hero-sub { margin-inline:auto; }
  .hero-copy .hero-btns, .hero-copy .hero-pills { justify-content:center; }
}

/* Wstęgi jako obraz na ekranach dotykowych (assets/bg.js) */
.rb-img { background:#050505 center / cover no-repeat; }
.rb-m0 { background-image:url(ribbons-0.webp); }
.rb-m1 { background-image:url(ribbons-1.webp); }