/* Dropop: strona aplikacji. Papier, czarny tekst. Kolor dają tylko prawdziwe zdjęcia i prawdziwe ekrany.
   iPhone 17 Pro i MacBook Pro 14" są w skali 1:1 względem siebie, a ich ekrany liczą się w punktach (--pt). */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonty/archivo-latin-ext-wdth-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonty/archivo-latin-wdth-normal.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}

:root{
  --papier:#F2F1EC;
  --papier-2:#E8E6DF;
  --tusz:#121212;
  --tusz-2:#56544E;
  --tusz-3:#8A8780;
  --linia:#DCD9D1;
  --naglowek:64px;
  --bok:clamp(16px,4vw,48px);
  --szer:1200px;
  --tytul:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --tekst:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,Arial,sans-serif;
  --plynnie:cubic-bezier(.2,.7,.2,1);
  --sprezyna:cubic-bezier(.3,1.35,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--naglowek) + 16px);scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tusz);font-family:var(--tekst);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--tusz);outline-offset:3px;border-radius:6px}
::selection{background:var(--tusz);color:var(--papier)}

.w{width:min(var(--szer),100% - 2 * var(--bok));margin-inline:auto}

/* ---------- przyciski ---------- */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:12px;background:var(--tusz);color:var(--papier);font-weight:600;font-size:1rem;letter-spacing:-.005em;white-space:nowrap;transition:background-color .15s,box-shadow .15s}
.przycisk:hover{background:#2B2B2B}
.przycisk:active{background:#000}
.przycisk-maly{height:38px;padding:0 16px;border-radius:9px;font-size:.92rem}
.przycisk-duzy{height:60px;padding:0 26px;border-radius:14px;font-size:1.05rem}
.przycisk-duzy svg{width:22px;height:22px}
.przycisk-jasny{background:transparent;color:var(--tusz);box-shadow:inset 0 0 0 1.5px var(--tusz)}
.przycisk-jasny:hover{background:var(--papier-2)}
.przycisk-jasny:active{background:var(--linia)}
/* Przycisk, którego jeszcze nie da się nacisnąć: wygląda jak docelowy, ale nie reaguje na najechanie. */
.wkrotce{cursor:default;pointer-events:none}
.link-strzalka{display:inline-flex;align-items:center;gap:8px;height:50px;font-weight:600;font-size:1rem}
.link-strzalka svg{width:18px;height:18px;transition:transform .2s}
.link-strzalka:hover svg{transform:translateX(3px)}

/* ---------- nagłówek ---------- */
/* bez kreski pod spodem: po przewinięciu papier robi się lekko przejrzysty i rozmywa to, co pod nim jedzie */
.naglowek{position:sticky;top:0;z-index:50;background:var(--papier);transition:background-color .3s}
.naglowek.przewiniety{background:rgba(242,241,236,.84);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.naglowek-w{display:flex;align-items:center;gap:32px;height:var(--naglowek);width:min(var(--szer),100% - 2 * var(--bok));margin-inline:auto}
.marka{display:flex;align-items:center;gap:10px;font-family:var(--tytul);font-weight:650;font-size:1.2rem;letter-spacing:-.02em}
.marka-znak{width:30px;height:30px}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{padding:8px 12px;border-radius:8px;font-size:.95rem;font-weight:500;color:var(--tusz-2);transition:color .15s,background-color .15s}
.menu a:hover{color:var(--tusz);background:var(--papier-2)}
.menu-przycisk{display:none;height:38px;padding:0 12px;border-radius:9px;font-size:.92rem;font-weight:600;box-shadow:inset 0 0 0 1px var(--linia)}

/* ---------- nazwa: drop + pop ----------
   Dropop to dwa słowa ze wspólnym p. Słowo składa się tak, jak działa aplikacja: "Drop" spada jak karta
   rzucona z iPhone'a, a z jego p wyskakuje "op", jak okienko spod ikony w pasku menu Maca. Na chwilę "pop"
   dostaje dymek z materiału tego okienka: widać, że p należy do obu słów i że jest tylko jedno.
   Dymek to kopia liter "pop" przyklejona prawą krawędzią do "op", więc leży dokładnie na tych literach
   (między Dro, p i op nie ma kerningu). Bez skryptu zostaje zwykłe Dropop. */
.nazwa{display:inline-block;line-height:1;white-space:nowrap}
.n-drop,.n-op{display:inline-block}
.n-drop{transform-origin:50% 100%}
/* "Dro" nad dymkiem: przy ciasnym odstępie w stopce brzeg "o" wchodzi na dymek i nie może zostać przez niego
   ucięty. Samo p zostaje pod dymkiem, bo w dymku ma być białe */
.n-dro{position:relative;z-index:1}
.n-op{position:relative;transform-origin:0 80%}
.n-dymek{--od:50% 0;position:absolute;top:0;right:0;isolation:isolate;color:#fff;opacity:0;scale:.5;transform-origin:var(--od);pointer-events:none;transition:opacity .2s,scale .3s cubic-bezier(.5,0,.9,.5)}
.n-dymek::before{content:"";position:absolute;z-index:-1;inset:.18em -.1em -.12em -.01em;border-radius:.2em;background:#232325;box-shadow:inset 0 0 0 .02em rgba(255,255,255,.14),0 .1em .22em -.06em rgba(0,0,0,.4)}
.nazwa.dymek .n-dymek{opacity:1;scale:1;transition:opacity .12s,scale .6s var(--sprezyna)}
.js .nazwa.czeka .n-drop,.js .nazwa.czeka .n-op{opacity:0}

/* ---------- typografia sekcji ---------- */
h2{font-family:var(--tytul);font-weight:640;font-size:clamp(2.2rem,4.2vw,3.9rem);line-height:1;letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
h3{font-family:var(--tytul);font-weight:620;font-size:1.3rem;line-height:1.15;letter-spacing:-.02em}
.lead{margin-top:22px;max-width:56ch;font-size:clamp(1.08rem,1.3vw,1.22rem);line-height:1.5;color:var(--tusz-2);text-wrap:pretty}
.sekcja{padding:clamp(80px,10vw,150px) 0}
.glowa{margin-bottom:clamp(40px,5vw,72px)}

/* ---------- wejście ---------- */
.hero{padding:clamp(32px,4.5vw,64px) 0 clamp(72px,9vw,128px)}
.hero-glowa{display:grid;grid-template-columns:minmax(0,7.5fr) minmax(0,4.5fr);gap:28px clamp(32px,5vw,72px);align-items:end}
.hero h1{font-family:var(--tytul);font-weight:640;font-size:clamp(2.9rem,5.5vw,5.3rem);line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.hero-opis{max-width:36ch;font-size:clamp(1.08rem,1.3vw,1.22rem);line-height:1.5;color:var(--tusz-2);text-wrap:pretty}
.hero-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}

/* scena: MacBook z tyłu, iPhone przed nim. Telefon ma 23% szerokości pokrywy (71,9 mm do 312,6 mm). */
.scena{--mac:70%;position:relative;margin-top:clamp(40px,4.5vw,64px);padding-bottom:2.6%}
.scena > .macbook{margin:0 9% 0 auto;width:var(--mac)}
.scena > .iphone{position:absolute;z-index:2;left:10%;bottom:0;width:calc(var(--mac) * .23)}

/* ================= iPhone 17 Pro ================= */
/* bryła 71,9 x 150 mm; aluminiowa rama 1,39% szerokości, czarna ramka szkła 2,36%, ekran 402 x 874 pt */
.iphone{position:relative;container-type:inline-size;width:100%;aspect-ratio:71.9 / 150;border-radius:17.5% / 8.39%;
  background:linear-gradient(90deg,#8F9195 0,#DCDDE0 .8%,#C4C6C9 2%,#E7E8EA 12%,#EDEEEF 50%,#E7E8EA 88%,#C4C6C9 98%,#DCDDE0 99.2%,#8F9195 100%);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28),0 34px 48px -26px rgba(0,0,0,.5),0 14px 20px -12px rgba(0,0,0,.22)}
.iph-szklo{position:absolute;inset:1.39cqw;border-radius:16.1cqw;background:#050506;box-shadow:inset 0 0 0 .3cqw #0E0E10,inset 0 0 0 .45cqw #222225}
.iph-b{position:absolute;width:.62cqw;background:linear-gradient(90deg,#9A9CA0,#D7D8DB 55%,#B3B5B9)}
.iph-akcja,.iph-glosniej,.iph-ciszej{left:-.62cqw;border-radius:.4cqw 0 0 .4cqw}
.iph-boczny,.iph-aparat{right:-.62cqw;border-radius:0 .4cqw .4cqw 0;background:linear-gradient(90deg,#B3B5B9,#D7D8DB 45%,#9A9CA0)}
.iph-akcja{top:20.2%;height:5.3%}
.iph-glosniej{top:29.4%;height:9.4%}
.iph-ciszej{top:41.2%;height:9.4%}
.iph-boczny{top:31.2%;height:14.6%}
.iph-aparat{top:60.6%;height:12.2%;width:.36cqw;right:-.36cqw;background:linear-gradient(90deg,#6D6F73,#A9ABAF)}

/* ekran: wszystko w punktach iOS. Unregistered --pt liczy się dopiero w potomkach, względem kontenera .ios. */
.ios{position:absolute;inset:2.36cqw;border-radius:14.9% / 6.86%;overflow:hidden;background:#000;color:#fff;container-type:size;--pt:calc(100cqw / 402);font-family:var(--sf);line-height:1.2;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.ios > *{position:absolute}
.ios-czas{top:calc(18 * var(--pt));left:calc(28 * var(--pt));width:calc(86 * var(--pt));height:calc(23 * var(--pt));display:flex;align-items:center;justify-content:center;font-size:calc(17 * var(--pt));font-weight:600;font-variant-numeric:tabular-nums}
.ios-ikony{top:calc(18 * var(--pt));right:calc(26 * var(--pt));height:calc(23 * var(--pt));display:flex;align-items:center;gap:calc(6 * var(--pt))}
.ios-sygnal{width:calc(18 * var(--pt));height:calc(11.7 * var(--pt))}
.ios-wifi{width:calc(16 * var(--pt));height:calc(12 * var(--pt))}
.ios-bateria{width:calc(27.4 * var(--pt));height:calc(12.8 * var(--pt))}
.ios-wyspa{z-index:5;top:calc(11 * var(--pt));left:50%;width:calc(125 * var(--pt));height:calc(37 * var(--pt));margin-left:calc(-62.5 * var(--pt));border-radius:calc(18.5 * var(--pt));background:#000}
.ios-wyspa i{position:absolute;right:calc(13 * var(--pt));top:calc(12.5 * var(--pt));width:calc(12 * var(--pt));height:calc(12 * var(--pt));border-radius:50%;background:radial-gradient(circle at 36% 34%,#232838 0 14%,#0B0D14 46%,#030305 72%)}
.ios-dom{bottom:calc(8 * var(--pt));left:50%;width:calc(139 * var(--pt));height:calc(5 * var(--pt));margin-left:calc(-69.5 * var(--pt));border-radius:calc(3 * var(--pt));background:#fff}

/* Drop na iPhonie: nagłówek 66 pt od góry (informacje, kod QR, kapsuła Maca, menu), karta w polu 122..660 pt,
   pod nią data, pole promptu i pasek miniatur jak w FlickScreen: kapsuła ze zdjęciami i osobne kółko „+” */
.d-kolo{top:calc(66 * var(--pt));width:calc(38 * var(--pt));height:calc(38 * var(--pt));display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.13);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.2),inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.1)}
.d-kolo svg{width:calc(20 * var(--pt));height:calc(20 * var(--pt))}
.d-info{left:calc(16 * var(--pt))}
.d-kod{left:calc(62 * var(--pt))}
.d-kod svg{width:calc(18 * var(--pt));height:calc(18 * var(--pt))}
.d-wiecej{right:calc(16 * var(--pt))}
.d-kapsula{top:calc(66 * var(--pt));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:calc(8 * var(--pt));height:calc(38 * var(--pt));padding:0 calc(15 * var(--pt)) 0 calc(13 * var(--pt));border-radius:calc(19 * var(--pt));background:rgba(255,255,255,.13);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.2),inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.1);font-size:calc(14 * var(--pt));font-weight:600;white-space:nowrap}
.d-kapsula svg{width:calc(17 * var(--pt));height:calc(17 * var(--pt))}
.d-kapsula .d-chevron{width:calc(11 * var(--pt));height:calc(11 * var(--pt));margin-left:calc(-2 * var(--pt));opacity:.7}
.d-kapsula.wyslano{background:#fff;color:#000;box-shadow:none;transform:translateX(-50%) scale(1.04)}
.d-kapsula.wyslano svg{width:calc(14 * var(--pt));height:calc(14 * var(--pt))}
.d-karta{left:calc(var(--x) * var(--pt));top:calc(var(--y) * var(--pt));width:calc(var(--sz) * var(--pt));height:calc(var(--wy) * var(--pt));border-radius:calc(.14 * min(var(--sz),var(--wy)) * var(--pt));background:#1C1C1E var(--zdj,none) center/cover}
.d-prompt{left:calc(12 * var(--pt));right:calc(12 * var(--pt));top:calc(716 * var(--pt));min-height:calc(46 * var(--pt));display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--pt));padding:0 calc(16 * var(--pt));border-radius:calc(23 * var(--pt));background:rgba(255,255,255,.09);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.16),inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.08);font-size:calc(16 * var(--pt));font-weight:500;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden}
.d-prompt-pelny{color:#fff;padding-right:calc(6 * var(--pt))}
.d-wyslij{flex:none;display:grid;place-items:center;width:calc(32 * var(--pt));height:calc(32 * var(--pt));border-radius:50%;background:#fff;color:#000}
.d-wyslij svg{width:calc(17 * var(--pt));height:calc(17 * var(--pt))}
.d-data{top:calc(674 * var(--pt));left:50%;transform:translateX(-50%);height:calc(32 * var(--pt));display:flex;align-items:center;gap:calc(7 * var(--pt));padding:0 calc(14 * var(--pt));border-radius:calc(16 * var(--pt));background:rgba(255,255,255,.1);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.16);font-size:calc(15 * var(--pt));font-weight:500;color:rgba(255,255,255,.78);white-space:nowrap;font-variant-numeric:tabular-nums}
.d-data b{font-weight:600;color:#fff}
.d-pasek{left:calc(12 * var(--pt));right:calc(82 * var(--pt));top:calc(774 * var(--pt));height:calc(62 * var(--pt));border-radius:calc(31 * var(--pt));background:rgba(255,255,255,.1);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.18),inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.08)}
.d-miniatury{position:absolute;inset:0;display:flex;align-items:center;gap:calc(8 * var(--pt));padding:0 calc(19 * var(--pt));overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30 * var(--pt)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30 * var(--pt)),transparent)}
.d-min{position:relative;flex:none;width:calc(42 * var(--pt));height:calc(42 * var(--pt));border-radius:calc(12 * var(--pt));background:#2C2C2E var(--zdj,none) center/cover}
.d-min.wybrana::after{content:"";position:absolute;inset:calc(-4 * var(--pt));border:calc(2 * var(--pt)) solid #fff;border-radius:calc(16 * var(--pt))}
.d-min.wyslana::before{content:"";position:absolute;z-index:1;top:calc(-2 * var(--pt));right:calc(-2 * var(--pt));width:calc(8 * var(--pt));height:calc(8 * var(--pt));border-radius:50%;background:#30D158;box-shadow:0 0 0 calc(1.5 * var(--pt)) rgba(0,0,0,.6)}
.d-min.film svg{position:absolute;left:calc(4 * var(--pt));bottom:calc(4 * var(--pt));width:calc(8 * var(--pt));height:calc(8 * var(--pt));filter:drop-shadow(0 0 calc(2 * var(--pt)) rgba(0,0,0,.6))}
.d-min.plik{display:grid;place-items:center;background:rgba(255,255,255,.14)}
.d-min.plik svg{width:calc(18 * var(--pt));height:calc(18 * var(--pt))}
.d-plus{position:absolute;right:calc(-70 * var(--pt));top:0;width:calc(62 * var(--pt));height:calc(62 * var(--pt));display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.18),inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.08);color:#fff}
.d-plus svg{width:calc(20 * var(--pt));height:calc(20 * var(--pt))}

/* ================= MacBook Pro 14" ================= */
/* pokrywa 312,6 mm, ekran 1512 x 982 pt, notch 188 x 32 pt, pasek menu 37 pt */
.macbook{position:relative;container-type:inline-size;width:100%}
.mb-pokrywa{position:relative;padding:.32cqw;border-radius:2.3cqw 2.3cqw .5cqw .5cqw;background:linear-gradient(180deg,#D9DADC,#B9BBBE);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22)}
.mb-szklo{padding:1.31cqw 1.31cqw 3.04cqw;border-radius:2cqw 2cqw .3cqw .3cqw;background:#060607;box-shadow:inset 0 0 0 .09cqw #1E1E21}
.mb-ekran{position:relative;container-type:inline-size;--pt:calc(100cqw / 1512);aspect-ratio:1512 / 982;overflow:hidden;border-radius:.7cqw .7cqw .25cqw .25cqw;background:#A9AFB4 url(zdjecia/tapeta.jpg) center/cover}
.mb-notch{position:absolute;z-index:6;top:0;left:50%;width:calc(188 * var(--pt));height:calc(32 * var(--pt));margin-left:calc(-94 * var(--pt));border-radius:0 0 calc(9 * var(--pt)) calc(9 * var(--pt));background:#060607}
.mb-notch i{position:absolute;left:50%;top:50%;width:calc(7 * var(--pt));height:calc(7 * var(--pt));margin:calc(-3.5 * var(--pt)) 0 0 calc(-3.5 * var(--pt));border-radius:50%;background:radial-gradient(circle at 36% 34%,#2A3044,#0B0C12 62%)}
.mb-zawias{height:.95cqw;margin:0 6.5%;border-radius:0 0 .5cqw .5cqw;background:linear-gradient(180deg,#141416,#36363A 55%,#18181A)}
.mb-podstawa{position:relative;height:1.9cqw;margin:-.15cqw -3.2% 0;border-radius:.2cqw .2cqw 3.2cqw 3.2cqw / .2cqw .2cqw 1.7cqw 1.7cqw;background:linear-gradient(180deg,#F0F1F2 0,#D3D4D7 18%,#C3C5C8 55%,#9C9EA2 100%);box-shadow:0 1.6cqw 2.4cqw -1.3cqw rgba(0,0,0,.45),0 .4cqw .8cqw -.4cqw rgba(0,0,0,.2)}
.mb-podstawa i{position:absolute;left:50%;top:0;width:13%;height:44%;transform:translateX(-50%);border-radius:0 0 1.1cqw 1.1cqw / 0 0 .8cqw .8cqw;background:linear-gradient(180deg,#A3A5A9,#C6C8CB)}

/* macOS 26 w punktach Maca */
.macos{position:absolute;inset:0;font-family:var(--sf);line-height:1.25;letter-spacing:0;color:#000}
.m-pasek{position:absolute;z-index:4;top:0;left:0;right:0;height:calc(37 * var(--pt));display:flex;align-items:center;justify-content:space-between;padding:0 calc(14 * var(--pt)) 0 calc(22 * var(--pt));font-size:calc(13.5 * var(--pt));color:rgba(0,0,0,.86);white-space:nowrap}
.m-pasek-prawy{justify-content:flex-end}
.m-lewo,.m-prawo{display:flex;align-items:center;gap:calc(19 * var(--pt))}
.m-prawo{gap:calc(14 * var(--pt))}
.m-lewo b{font-weight:700}
.m-jablko{width:calc(14 * var(--pt));height:calc(17 * var(--pt));margin:calc(-2 * var(--pt)) calc(2 * var(--pt)) 0 0}
.m-drop{display:grid;place-items:center;width:calc(32 * var(--pt));height:calc(24 * var(--pt));border-radius:calc(6 * var(--pt))}
.m-drop.aktywny{background:rgba(0,0,0,.1)}
.m-drop svg{width:calc(19 * var(--pt));height:calc(19 * var(--pt))}
.m-bateria{width:calc(27 * var(--pt));height:calc(12.6 * var(--pt))}
.m-wifi{width:calc(16 * var(--pt));height:calc(12 * var(--pt))}
.m-centrum{width:calc(17 * var(--pt));height:calc(14 * var(--pt))}

/* okienko Dropa: 320 pt, ciemne, jak w MenuView */
.m-okno{position:absolute;z-index:5;top:calc(42 * var(--pt));right:calc(84 * var(--pt));width:calc(320 * var(--pt));padding:calc(14 * var(--pt)) calc(14 * var(--pt)) calc(10 * var(--pt));border-radius:calc(15 * var(--pt));background:rgba(32,32,34,.86);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);color:#fff;text-align:left;box-shadow:inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.16),0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.45),0 calc(16 * var(--pt)) calc(40 * var(--pt)) rgba(0,0,0,.32)}
.m-glowa{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(12 * var(--pt))}
.m-glowa > b{font-size:calc(15 * var(--pt));font-weight:600}
.m-przel{display:flex;gap:calc(1 * var(--pt));padding:calc(2 * var(--pt));border-radius:calc(8 * var(--pt));background:rgba(255,255,255,.07)}
.m-przel > i,.m-przel > button{display:flex;align-items:center;gap:calc(5 * var(--pt));padding:calc(3 * var(--pt)) calc(10 * var(--pt));border-radius:calc(6 * var(--pt));font-style:normal;font-size:calc(12 * var(--pt));font-weight:500;line-height:calc(16 * var(--pt));color:rgba(255,255,255,.7);transition:background-color .2s,color .2s}
.m-przel > .wybrany,.m-przel > [aria-selected="true"]{background:rgba(255,255,255,.18);color:#fff;box-shadow:0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(0,0,0,.3)}
.m-przel > button:focus-visible{outline-width:calc(2 * var(--pt));outline-offset:calc(1 * var(--pt))}
.m-licznik{display:inline-grid;place-items:center;min-width:calc(14 * var(--pt));height:calc(14 * var(--pt));padding:0 calc(5 * var(--pt));border-radius:calc(7 * var(--pt));background:#F59E0A;color:#000;font-style:normal;font-size:calc(10 * var(--pt));font-weight:700;line-height:1}
.m-dzien{margin-bottom:calc(7 * var(--pt));font-size:calc(11 * var(--pt));font-weight:600;color:rgba(255,255,255,.55)}
.m-siatka + .m-dzien{margin-top:calc(12 * var(--pt))}
.m-siatka{display:grid;grid-template-columns:repeat(3,calc(93.33 * var(--pt)));gap:calc(6 * var(--pt))}
.m-kafel{position:relative;height:calc(93.33 * var(--pt));overflow:hidden;border-radius:calc(11 * var(--pt));background:#2E2E2E var(--zdj,none) center/cover}
.m-kafel em{position:absolute;right:calc(6 * var(--pt));bottom:calc(6 * var(--pt));padding:calc(1 * var(--pt)) calc(5 * var(--pt));border-radius:calc(5 * var(--pt));background:rgba(0,0,0,.55);font-style:normal;font-size:calc(10 * var(--pt));font-weight:600;line-height:calc(13 * var(--pt));color:#fff}
.m-tekst{padding:calc(9 * var(--pt));background:#2E2E2E;font-size:calc(10.5 * var(--pt));line-height:1.3;color:rgba(255,255,255,.85)}
.m-tekst small{display:block;margin-bottom:calc(4 * var(--pt));font-size:calc(9.5 * var(--pt));font-weight:600;color:rgba(255,255,255,.55)}
.m-pdf{display:grid;place-items:center}
.m-strona-pdf{display:flex;flex-direction:column;gap:calc(4 * var(--pt));width:calc(50 * var(--pt));height:calc(66 * var(--pt));padding:calc(7 * var(--pt)) calc(6 * var(--pt));border-radius:calc(2 * var(--pt));background:#fff;box-shadow:0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgba(0,0,0,.45)}
.m-strona-pdf b{margin-bottom:calc(2 * var(--pt));font-size:calc(7 * var(--pt));font-weight:700;line-height:1;color:#111}
.m-strona-pdf i{height:calc(2.5 * var(--pt));border-radius:calc(1 * var(--pt));background:#D6D6D6}
.m-strona-pdf i:nth-of-type(even){width:70%}
.m-stopka{display:flex;align-items:center;justify-content:space-between;min-height:calc(33 * var(--pt));margin-top:calc(10 * var(--pt));padding-top:calc(9 * var(--pt));border-top:calc(.5 * var(--pt)) solid rgba(255,255,255,.09);font-size:calc(12 * var(--pt));color:rgba(255,255,255,.55);white-space:nowrap}
.m-stopka > span{display:flex;align-items:center;gap:calc(5 * var(--pt))}
.m-stopka > span svg{width:calc(14 * var(--pt));height:calc(14 * var(--pt))}
.m-wiecej{width:calc(16 * var(--pt));height:calc(16 * var(--pt));margin-right:calc(4 * var(--pt))}

/* sesje Claude w okienku */
.m-sesje{display:grid;gap:calc(2 * var(--pt))}
.m-sesje li{display:flex;align-items:center;gap:calc(10 * var(--pt));margin:0 calc(-6 * var(--pt));padding:calc(6 * var(--pt));border-radius:calc(10 * var(--pt))}
.m-sesje li:first-child{background:rgba(255,255,255,.07)}
.m-ses-min{flex:none;width:calc(40 * var(--pt));height:calc(40 * var(--pt));border-radius:calc(8 * var(--pt));background:#2E2E2E var(--zdj,none) center/cover}
.m-ses-term{display:grid;place-items:center;color:rgba(255,255,255,.75)}
.m-ses-term svg{width:calc(20 * var(--pt));height:calc(20 * var(--pt))}
.m-ses-tekst{flex:1;min-width:0;display:grid;gap:calc(2 * var(--pt))}
.m-ses-tekst b{overflow:hidden;font-size:calc(13 * var(--pt));font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.m-ses-tekst span{overflow:hidden;font-size:calc(11.5 * var(--pt));color:rgba(255,255,255,.55);white-space:nowrap;text-overflow:ellipsis}
.m-stan{flex:none;display:flex;align-items:center;gap:calc(5 * var(--pt));font-size:calc(11 * var(--pt));font-weight:600;color:rgba(255,255,255,.8)}
.m-stan.pracuje::before,.m-stan.gotowa::before{content:"";width:calc(7 * var(--pt));height:calc(7 * var(--pt));border-radius:50%}
.m-stan.pracuje::before{background:#F59E0A;animation:puls 1.4s ease-in-out infinite}
.m-stan.gotowa::before{background:#33C759}
.m-stan.wclaude{gap:calc(3 * var(--pt));font-weight:400;color:rgba(255,255,255,.55)}
.m-stan.wclaude svg{width:calc(10 * var(--pt));height:calc(10 * var(--pt))}
@keyframes puls{50%{box-shadow:0 0 0 calc(3.5 * var(--pt)) rgba(245,158,10,.3)}}

/* Finder z folderem Pobrane (w kadrze Na Macu), w punktach Maca, przy prawej krawędzi ekranu jak okienko */
.finder{position:absolute;z-index:2;right:calc(420 * var(--pt));top:calc(64 * var(--pt));width:calc(285 * var(--pt));overflow:hidden;border-radius:calc(16 * var(--pt));background:#fff;color:#1D1D1F;font-size:calc(12.5 * var(--pt));box-shadow:0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.2),0 calc(14 * var(--pt)) calc(36 * var(--pt)) rgba(0,0,0,.22)}
.f-glowa{display:flex;align-items:center;gap:calc(16 * var(--pt));height:calc(48 * var(--pt));padding:0 calc(16 * var(--pt));background:#F6F6F6;border-bottom:calc(.5 * var(--pt)) solid rgba(0,0,0,.1)}
.f-glowa b{font-size:calc(13 * var(--pt));font-weight:700}
.f-swiatla{display:flex;gap:calc(8 * var(--pt))}
.f-swiatla i{width:calc(12 * var(--pt));height:calc(12 * var(--pt));border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.14)}
.f-swiatla i:nth-child(2){background:#FEBC2E}
.f-swiatla i:nth-child(3){background:#28C840}
.f-kolumny{display:grid;grid-template-columns:1fr calc(88 * var(--pt));padding:calc(5 * var(--pt)) calc(16 * var(--pt)) calc(5 * var(--pt)) calc(42 * var(--pt));border-bottom:calc(.5 * var(--pt)) solid rgba(0,0,0,.08);font-size:calc(11 * var(--pt));color:#808084}
.f-lista{padding:calc(4 * var(--pt)) calc(8 * var(--pt)) calc(8 * var(--pt))}
.f-lista li{display:grid;grid-template-columns:calc(18 * var(--pt)) minmax(0,1fr) calc(88 * var(--pt));align-items:center;gap:calc(8 * var(--pt));height:calc(26 * var(--pt));padding:0 calc(8 * var(--pt));border-radius:calc(6 * var(--pt))}
.f-lista li:nth-child(even){background:#F4F4F5}
.f-lista li.zazn{background:#0A62D8;color:#fff}
.f-lista li.zazn .f-data{color:rgba(255,255,255,.8)}
.f-min{width:calc(18 * var(--pt));height:calc(18 * var(--pt));border-radius:calc(3 * var(--pt));background:#DDD var(--zdj,none) center/cover}
.f-txt,.f-pdf{justify-self:center;width:calc(14 * var(--pt));border-radius:calc(1.5 * var(--pt));background:#fff repeating-linear-gradient(180deg,transparent 0 calc(3 * var(--pt)),#C9C9CC calc(3 * var(--pt)) calc(4 * var(--pt))) calc(3 * var(--pt)) calc(3 * var(--pt)) / calc(8 * var(--pt)) calc(10 * var(--pt)) no-repeat;box-shadow:inset 0 0 0 calc(.75 * var(--pt)) #C4C4C8}
.f-pdf{box-shadow:inset 0 calc(-4.5 * var(--pt)) 0 #E0443A,inset 0 0 0 calc(.75 * var(--pt)) #C4C4C8}
.f-nazwa{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.f-data{color:#8A8A8E;white-space:nowrap}

/* panel, który na kilka sekund wysuwa się spod ikony (ArrivalPanel w aplikacji): 360 x 84 pt, ciemny materiał */
.k-przylot{position:absolute;z-index:6;top:calc(43 * var(--pt));right:calc(86 * var(--pt));width:calc(360 * var(--pt));height:calc(84 * var(--pt));display:flex;align-items:center;gap:calc(12 * var(--pt));padding:0 calc(14 * var(--pt));border-radius:calc(18 * var(--pt));background:rgba(36,36,38,.84);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);color:#fff;box-shadow:inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.1),0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.4),0 calc(14 * var(--pt)) calc(36 * var(--pt)) rgba(0,0,0,.3);opacity:0}
.k-przylot-min{flex:none;width:calc(56 * var(--pt));height:calc(56 * var(--pt));border-radius:calc(11.2 * var(--pt));background:#333 var(--zdj,none) center/cover}
.k-przylot-tekst{flex:1;min-width:0;display:grid;gap:calc(3 * var(--pt))}
.k-przylot-tekst b{overflow:hidden;font-size:calc(13 * var(--pt));font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.k-przylot-tekst span{overflow:hidden;font-size:calc(11 * var(--pt));color:rgba(255,255,255,.55);white-space:nowrap;text-overflow:ellipsis}
.k-guzik{flex:none;padding:calc(3 * var(--pt)) calc(7 * var(--pt));border-radius:calc(6 * var(--pt));background:rgba(255,255,255,.18);font-size:calc(11 * var(--pt));font-weight:500;line-height:calc(16 * var(--pt));white-space:nowrap}
.k-guzik + .k-guzik{margin-left:calc(-6 * var(--pt))}
@keyframes wysun{from{opacity:0;translate:0 calc(-14 * var(--pt))}to{opacity:1;translate:0 0}}

/* ---------- z bliska: kadr ----------
   Środek strony to zbliżenia jednej chwili z pierwszego ekranu. Kadr jest kamerą na scenę: w świecie stoją ten sam
   iPhone i ten sam MacBook co na górze (te same klasy, ta sama tapeta i te same zdjęcia), w skali kadru (cqw).
   Stan kadru (data-stan) zmienia to, co jest na ekranach, a na wąskim kadrze kamera (--kx, --ky, --kz z main.js)
   dojeżdża do tego, o czym mówi punkt. Zamiast pudełek i kresek: stół kadru i odstęp. */
.kadr{--proporcja:1.2;position:relative;overflow:hidden;container-type:inline-size;aspect-ratio:var(--proporcja);border-radius:clamp(20px,2.4vw,32px);background:radial-gradient(120% 95% at 64% 0%,#F1EFEA 0,#E7E4DC 55%,#DFDCD3 100%);isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.swiat{position:absolute;inset:0;transform-origin:0 0;translate:var(--kx,0) var(--ky,0);scale:var(--kz,1);transition:translate 1.1s var(--plynnie),scale 1.1s var(--plynnie)}
.swiat > .macbook,.swiat > .iphone,.swiat > .android,.swiat > .k-szyfr{position:absolute}
/* telefon stoi przed Makiem: nad jego notchem i panelami (te mają własne z-index wewnątrz MacBooka) */
.swiat > .macbook{z-index:1}
.swiat > .iphone,.swiat > .android{z-index:2}
.kadr .macbook{width:var(--mb-w,180cqw);right:var(--mb-p,4cqw);top:var(--mb-g,5cqw)}
.kadr .mb-pokrywa{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22),0 .8cqw 1.6cqw -.5cqw rgba(0,0,0,.22)}
.kadr .iphone{width:var(--tel-w,46cqw);left:var(--tel-x,6cqw);top:var(--tel-y,6cqw);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28),-1cqw 3cqw 5cqw -2cqw rgba(0,0,0,.4),0 1cqw 2cqw -1cqw rgba(0,0,0,.25)}
/* ruch w kadrze stoi, dopóki kadru nie widać (main.js dokłada "gra") */
.js .kadr:not(.gra) *,.js .kadr:not(.gra) *::before,.js .kadr:not(.gra) *::after,.js .rz-schowek:not(.gra) *{animation-play-state:paused!important}

/* lot: kopia karty wylatuje z telefonu (main.js). Leży w kadrze, nie na ekranie, więc wychodzi poza telefon,
   a kadr ją przycina. W locie przechyla się o 8° i zostawia dwa blade ślady, jak karta w logo */
.lot{position:absolute;z-index:30;pointer-events:none}
.lot > i{position:absolute;inset:0;border-radius:inherit;background:#1C1C1E var(--zdj,none) center/cover}
.lot-karta{box-shadow:0 1.2cqw 3cqw -.8cqw rgba(0,0,0,.45)}
.lot-slad{opacity:0;transition:opacity .12s,translate .25s var(--plynnie)}
.lot.ze-sladem .lot-slad:nth-child(1){opacity:.3;translate:0 33%}
.lot.ze-sladem .lot-slad:nth-child(2){opacity:.55;translate:0 16.5%}

/* kapsuła u góry ekranu: dokąd leci, a po rzucie "Wysłano" na białym */
.k-kapsula{transition:background-color .25s,color .25s,box-shadow .25s,scale .45s var(--sprezyna)}
.k-kapsula > span{display:flex;align-items:center;gap:calc(8 * var(--pt))}
.k-kapsula .k-wyslano{display:none}
.k-kapsula .k-wyslano svg{width:calc(14 * var(--pt));height:calc(14 * var(--pt))}
.poleciala .k-kapsula{background:#fff;color:#000;box-shadow:none;scale:1.04}
.poleciala .k-kapsula .k-do{display:none}
.poleciala .k-kapsula .k-wyslano{display:flex}
/* rzucona karta znika z ekranu w chwili wylotu, a na jej miejsce wjeżdża następna rzecz z paska */
.k-rzucana{transition:opacity .3s}
.leci .k-rzucana,.poleciala .k-rzucana{opacity:0;transition:none}
.k-nastepna{opacity:0;scale:.92;transition:opacity .3s,scale .3s}
.poleciala .k-nastepna{opacity:1;scale:1;transition:opacity .45s .5s,scale .7s .5s var(--sprezyna)}

/* ---------- z bliska: punkty ----------
   Zamiast listy z kreskami: punkty, z których każdy ustawia kadr obok. Ten na linii czytania jest czarny, reszta
   blada; stuknięcie w punkt przewija do niego. Kadr stoi przyklejony, a punkty przewijają się obok niego.
   Bez skryptu wszystkie punkty są czarne, a kadr pokazuje pierwszy stan. */
.z-bliska{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.kadr-trzymacz{position:sticky;top:calc(var(--naglowek) + clamp(16px,7vh,72px))}
.przystanki{display:grid;padding-bottom:clamp(40px,14vh,160px)}
.przystanek{display:grid;grid-template-columns:2.4rem minmax(0,1fr);align-content:center;min-height:max(210px,32vh);cursor:pointer;-webkit-tap-highlight-color:transparent}
.przystanek .nr{padding-top:.38em;font-family:var(--tytul);font-weight:600;font-size:1rem;line-height:1;color:var(--tusz-3);font-variant-numeric:tabular-nums}
.przystanek h3{font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.przystanek p{grid-column:2;margin-top:10px;max-width:34ch;font-size:1.06rem;color:var(--tusz-2);text-wrap:pretty}
.js .przystanek{opacity:.26;transition:opacity .5s var(--plynnie)}
.js .przystanek:hover{opacity:.5}
.js .przystanek.teraz{opacity:1}

/* ---------- jeden ruch ----------
   Pięć zwykłych kroków dużym krojem skreśla się grubą kreską, jeden po drugim. Zostaje jedno słowo, a w kadrze obok
   ten sam zachód co na górze wylatuje z iPhone'a. */
.jeden-ruch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.etykieta{font-size:.95rem;font-weight:600;color:var(--tusz-3)}
.etykieta-drop{margin-top:clamp(40px,5vw,64px)}
.kroki-skreslane{counter-reset:k;display:grid;gap:clamp(8px,1vw,14px);margin-top:18px}
.kroki-skreslane li{counter-increment:k;display:flex;align-items:baseline;gap:18px;font-family:var(--tytul);font-weight:560;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.022em}
.kroki-skreslane li::before{content:counter(k);flex:none;width:1.4rem;font-size:1rem;font-weight:600;color:var(--tusz-3);font-variant-numeric:tabular-nums}
.kroki-skreslane span{background:linear-gradient(var(--tusz),var(--tusz)) no-repeat 0 58% / 0 .08em;transition:background-size .5s cubic-bezier(.6,0,.3,1),color .5s}
.kroki-skreslane.skreslone span{background-size:100% .08em;color:var(--tusz-3)}
.kroki-skreslane.skreslone li:nth-child(2) span{transition-delay:.16s}
.kroki-skreslane.skreslone li:nth-child(3) span{transition-delay:.32s}
.kroki-skreslane.skreslone li:nth-child(4) span{transition-delay:.48s}
.kroki-skreslane.skreslone li:nth-child(5) span{transition-delay:.64s}
.por-ruch{margin-top:4px;font-family:var(--tytul);font-weight:640;font-size:clamp(3.4rem,7.4vw,6.6rem);line-height:.95;letter-spacing:-.05em}
.js .por-ruch:not(.jest){opacity:0}
/* bez skryptu lista od razu jest skreślona: to jej stan końcowy */
html:not(.js) .kroki-skreslane span{background-size:100% .08em;color:var(--tusz-3)}
/* telefon w kadrze ucięty pod datą: widać kartę, pole na prompt i datę */
.kadr-ruch{--proporcja:1;--tel-w:54cqw;--tel-x:23cqw;--tel-y:7cqw}


/* ---------- cztery sposoby: cztery kadry, jeden telefon ----------
   Ten sam iPhone w tej samej skali w czterech kadrach, z tym samym zachodem na karcie. Każdy kadr gra swój gest
   w pętli, tylko gdy go widać. Pętla kończy się w spoczynku, więc przy ograniczonym ruchu i bez skryptu każdy
   kadr stoi jako zwykły ekran Dropopa z kartą gotową do rzutu (a dwuklik jako tył telefonu). */
.sposoby{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.sposob h3{margin-top:18px}
.sposob p{margin-top:8px;font-size:.98rem;color:var(--tusz-2);text-wrap:pretty}
.kadr-sposob{--proporcja:.8;--tel-w:60cqw;--tel-x:20cqw;--tel-y:11cqw}
/* plecy niżej w kadrze: nad telefonem jest miejsce, żeby karta wyszła zza niego w pozie z logo */
.kadr-tyl{--tel-y:27cqw}

/* kapsuła: trzy napisy w jednym miejscu (dokąd, "Puść", "Wysłano"); pętla przełącza je kryciem */
/* kapsuła i kółka stoją nad kartą: ciągnięta karta przechodzi pod nimi, jak w aplikacji */
.kadr-sposob .k-kapsula,.kadr-sposob .d-kolo,.kadr-sposob .ios-czas,.kadr-sposob .ios-ikony{z-index:2}
.kadr-sposob .k-kapsula{display:grid;justify-items:center}
.kadr-sposob .k-kapsula > span{grid-area:1 / 1;display:flex}
.k-pusc svg{width:calc(14 * var(--pt));height:calc(14 * var(--pt))}
.kadr-sposob .k-pusc,.kadr-sposob .k-wyslano{opacity:0;color:#000}

/* punkt dotyku jak przy nagrywaniu ekranu: widać, gdzie jest palec. Na ekranie jasny, na aluminium i stole ciemny */
.k-dotyk{position:absolute;width:calc(46 * var(--pt));height:calc(46 * var(--pt));margin:calc(-23 * var(--pt)) 0 0 calc(-23 * var(--pt));border-radius:50%;background:rgba(255,255,255,.3);box-shadow:0 0 0 calc(1.5 * var(--pt)) rgba(255,255,255,.85),0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgba(0,0,0,.3);opacity:0;pointer-events:none}
.k-dotyk-jasny{z-index:3;width:10.6cqw;height:10.6cqw;margin:-5.3cqw 0 0 -5.3cqw;background:rgba(18,18,18,.14);box-shadow:0 0 0 1.5px rgba(18,18,18,.55)}
.k-dotyk::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(18,18,18,.45);opacity:0}

/* karta, która wylatuje poza telefon: leży w świecie kadru dokładnie na karcie z ekranu (21 i 114 pt, 360 x 540 pt) */
.k-wylot{position:absolute;left:calc(var(--tel-x) + var(--tel-w) * .0858);top:calc(var(--tel-y) + var(--tel-w) * .2998);width:calc(var(--tel-w) * .8284);height:calc(var(--tel-w) * 1.2426);border-radius:calc(var(--tel-w) * .116);opacity:0;pointer-events:none}
.k-wylot i{position:absolute;inset:0;border-radius:inherit;background:#1C1C1E var(--zdj,none) center/cover}
/* ślady to rozmyta smuga szybkiego ruchu, nie kolejne karty: ostre kopie czytały się jak brudna szyba */
.k-wylot i:nth-child(-n+2){filter:blur(1.2cqw)}
.k-wylot i:nth-child(1){--o:.18;--t:30%;opacity:0}
.k-wylot i:nth-child(2){--o:.4;--t:14%;opacity:0}
.k-wylot i:nth-child(3){box-shadow:0 2cqw 5cqw -1cqw rgba(0,0,0,.45)}

/* następna rzecz z paska wjeżdża po rzucie, a przed końcem pętli wraca zachód */
@keyframes nastepna{0%,52%{opacity:0;scale:.92}60%,86%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
@keyframes wylot-slad{0%,46%{opacity:0;translate:0 0}50%,64%{opacity:var(--o);translate:0 var(--t)}65%,100%{opacity:0;translate:0 var(--t)}}

/* 1. Przeciągnij: palec ciągnie kartę 120 pt w górę, karta maleje (1 + dragY / 1500), kapsuła rośnie i przy
   pełnym uniesieniu robi się biała z "Puść". Puszczona karta odlatuje w kącie z logo, kapsuła mówi "Wysłano". */
.kadr-ciagnij .k-rzucana{animation:ciagnij-karta 3.8s infinite}
@keyframes ciagnij-karta{0%,12%{opacity:1;translate:0 0;scale:1;rotate:0deg;animation-timing-function:cubic-bezier(.3,.1,.3,1)}42%{opacity:1;translate:0 calc(-120 * var(--pt));scale:.92;rotate:0deg;animation-timing-function:cubic-bezier(.2,.8,.3,1)}46%{translate:0 calc(-150 * var(--pt));scale:.92;rotate:8deg;animation-timing-function:cubic-bezier(.55,0,.85,.4)}56%{opacity:1;translate:0 calc(-800 * var(--pt));scale:.9;rotate:8deg}57%,86%{opacity:0;translate:0 0;scale:.92;rotate:0deg}96%,100%{opacity:1;translate:0 0;scale:1}}
.kadr-ciagnij .k-dotyk{left:calc(201 * var(--pt));top:calc(560 * var(--pt));animation:ciagnij-palec 3.8s infinite}
@keyframes ciagnij-palec{0%,6%{opacity:0;scale:1.4;translate:0 0}12%{opacity:1;scale:1;translate:0 0;animation-timing-function:cubic-bezier(.3,.1,.3,1)}42%{opacity:1;scale:1;translate:0 calc(-120 * var(--pt))}45%,100%{opacity:0;scale:.8;translate:0 calc(-128 * var(--pt))}}
.kadr-ciagnij .k-kapsula{animation:ciagnij-kapsula 3.8s infinite}
@keyframes ciagnij-kapsula{0%,12%{scale:1;background:rgba(255,255,255,.13)}33%{scale:1.07;background:rgba(255,255,255,.13)}35%,44%{scale:1.12;background:#fff}50%,82%{scale:1.04;background:#fff}90%,100%{scale:1;background:rgba(255,255,255,.13)}}
.kadr-ciagnij .k-do{animation:ciagnij-do 3.8s infinite}
@keyframes ciagnij-do{0%,33%{opacity:1}35%,88%{opacity:0}92%,100%{opacity:1}}
.kadr-ciagnij .k-pusc{animation:ciagnij-pusc 3.8s infinite}
@keyframes ciagnij-pusc{0%,33%{opacity:0}35%,46%{opacity:1}48%,100%{opacity:0}}
.kadr-ciagnij .k-wyslano{animation:po-rzucie 3.8s infinite}
@keyframes po-rzucie{0%,47%{opacity:0}50%,84%{opacity:1}88%,100%{opacity:0}}
.kadr-ciagnij .k-nastepna{animation:nastepna 3.8s infinite}

/* 2. Machnij: telefon odchyla się do siebie i szybko do przodu, obracając się na dłoni (dół telefonu). Gdy mija
   pion, karta wylatuje z ekranu: dalej leci jej kopia w świecie kadru, nad telefonem. */
.kadr-machnij .iphone{transform-origin:50% 100%;animation:machnij-tel 3.6s infinite}
@keyframes machnij-tel{0%,14%{rotate:0deg;translate:0 0;animation-timing-function:cubic-bezier(.3,0,.3,1)}34%{rotate:-9deg;translate:0 1cqw;animation-timing-function:cubic-bezier(.6,0,.9,.5)}44%{rotate:5deg;translate:0 -1.5cqw;animation-timing-function:cubic-bezier(.2,.7,.3,1)}58%,100%{rotate:0deg;translate:0 0}}
.kadr-machnij .k-rzucana{animation:machnij-karta 3.6s infinite}
@keyframes machnij-karta{0%,40%{opacity:1}41%,86%{opacity:0}96%,100%{opacity:1}}
.kadr-machnij .k-wylot{z-index:3;animation:wylot-machnij 3.6s infinite}
@keyframes wylot-machnij{0%,40%{opacity:0;translate:0 0;rotate:0deg;scale:1}41%{opacity:1;translate:0 0;rotate:0deg;scale:1;animation-timing-function:cubic-bezier(.2,.8,.3,1)}47%{opacity:1;translate:0 -6%;rotate:8deg;scale:1;animation-timing-function:cubic-bezier(.55,0,.85,.4)}64%{opacity:1;translate:0 -185%;rotate:8deg;scale:.94}65%,100%{opacity:0;translate:0 -185%;rotate:8deg}}
.kadr-machnij .k-wylot i:nth-child(-n+2){animation:wylot-slad 3.6s infinite}
.kadr-machnij .k-kapsula{animation:machnij-kapsula 3.6s infinite}
@keyframes machnij-kapsula{0%,46%{scale:1;background:rgba(255,255,255,.13)}50%,82%{scale:1.04;background:#fff}90%,100%{scale:1;background:rgba(255,255,255,.13)}}
.kadr-machnij .k-do{animation:machnij-do 3.6s infinite}
@keyframes machnij-do{0%,46%{opacity:1}48%,86%{opacity:0}90%,100%{opacity:1}}
.kadr-machnij .k-wyslano{animation:po-rzucie 3.6s infinite}
.kadr-machnij .k-nastepna{animation:nastepna 3.6s infinite}

/* 3. Przycisk czynności: na ekranie blokady palec przytrzymuje przycisk z lewego boku, a Dropop otwiera się
   od razu z najnowszym zdjęciem na karcie */
.k-apka,.k-blokada{left:0;top:0;width:100%;height:100%}
.k-apka > *{position:absolute}
.k-blokada{display:flex;flex-direction:column;align-items:center;padding-top:calc(64 * var(--pt));background:#6D747B url(zdjecia/tapeta.jpg) 58% center / cover;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.12);opacity:0}
.k-blok-data{font-size:calc(21 * var(--pt));font-weight:600}
.k-blok-czas{font-size:calc(108 * var(--pt));font-weight:600;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kadr-przycisk .k-blokada{animation:blokada 4s infinite}
@keyframes blokada{0%,30%{opacity:1;scale:1}40%,86%{opacity:0;scale:1.08}94%,100%{opacity:1;scale:1}}
.kadr-przycisk .k-apka{animation:apka 4s infinite}
@keyframes apka{0%,30%{opacity:0;scale:.86;animation-timing-function:cubic-bezier(.2,.8,.3,1)}42%,96%{opacity:1;scale:1}100%{opacity:0;scale:.86}}
.kadr-przycisk .ios-czas{animation:czas-po-blokadzie 4s infinite}
@keyframes czas-po-blokadzie{0%,32%{opacity:0}40%,88%{opacity:1}94%,100%{opacity:0}}
.kadr-przycisk .iph-akcja{animation:wcisk-akcja 4s infinite}
@keyframes wcisk-akcja{0%,16%{translate:0 0;filter:none}19%,28%{translate:.25cqw 0;filter:brightness(.82)}32%,100%{translate:0 0;filter:none}}
.k-na-przycisku{left:-.3cqw;top:22.85%;animation:dotyk-przycisk 4s infinite}
@keyframes dotyk-przycisk{0%,12%{opacity:0;scale:1.4}18%,28%{opacity:1;scale:1}34%,100%{opacity:0;scale:1}}

/* 4. Dwuklik w tył: plecy tego samego iPhone'a 17 Pro (aluminium, wyspa aparatów na całą szerokość, szkło
   pod spodem). Dwa stuknięcia w środek i zachód wychodzi zza telefonu w górę, jak karta z logo. */
.iphone-tyl .iph-akcja,.iphone-tyl .iph-glosniej,.iphone-tyl .iph-ciszej{left:auto;right:-.62cqw;border-radius:0 .4cqw .4cqw 0;background:linear-gradient(90deg,#B3B5B9,#D7D8DB 45%,#9A9CA0)}
.iphone-tyl .iph-boczny,.iphone-tyl .iph-aparat{right:auto;left:-.62cqw;border-radius:.4cqw 0 0 .4cqw;background:linear-gradient(90deg,#9A9CA0,#D7D8DB 55%,#B3B5B9)}
.iphone-tyl .iph-aparat{left:-.36cqw;background:linear-gradient(90deg,#A9ABAF,#6D6F73)}
.tyl-plyta{position:absolute;inset:1.39cqw;overflow:hidden;border-radius:16.1cqw;background:linear-gradient(160deg,#DFE0E3,#D0D1D5 55%,#C8C9CD)}
.tyl-plyta > *{position:absolute}
.tyl-szklo{left:5cqw;right:5cqw;top:62cqw;bottom:5cqw;border-radius:11cqw;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 42%,rgba(255,255,255,0) 56%),linear-gradient(165deg,#E6E7EA,#D7D8DC 50%,#D1D2D6);box-shadow:inset 0 0 0 .25cqw rgba(0,0,0,.06),inset 0 .3cqw .6cqw rgba(255,255,255,.6)}
.tyl-wyspa{left:0;right:0;top:0;height:52cqw;border-radius:0 0 9cqw 9cqw;background:linear-gradient(180deg,#EDEEF0,#DCDDE0);box-shadow:0 .9cqw 1.6cqw -.4cqw rgba(0,0,0,.34),0 .2cqw .3cqw rgba(0,0,0,.12),inset 0 -.25cqw .3cqw rgba(255,255,255,.75)}
.tyl-wyspa i{position:absolute;border-radius:50%}
.tyl-obiektyw{width:19cqw;height:19cqw;background:radial-gradient(circle,#0B0D14 0 26%,#262A35 28% 38%,#07080B 40% 60%,#3B3D42 62% 68%,#A5A7AB 70% 78%,#6F7175 80% 100%);box-shadow:0 .5cqw 1cqw rgba(0,0,0,.35)}
.tyl-obiektyw:nth-child(1){left:5.5cqw;top:4.5cqw}
.tyl-obiektyw:nth-child(2){left:5.5cqw;top:28.5cqw}
.tyl-obiektyw:nth-child(3){left:26.5cqw;top:16.5cqw}
.tyl-flesz{left:67cqw;top:11cqw;width:6cqw;height:6cqw;background:radial-gradient(circle,#FBF7EA,#D6D0BF 70%,#B9B4A6);box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.12)}
.tyl-lidar{left:67cqw;top:35cqw;width:6cqw;height:6cqw;background:radial-gradient(circle,#2B2D33,#0D0E11 70%);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.15)}
.tyl-mikro{left:83cqw;top:25.2cqw;width:1.6cqw;height:1.6cqw;background:#2A2B2F}
.kadr-tyl .k-dotyk{left:50%;top:58%;animation:stuk-tyl 3.6s infinite}
@keyframes stuk-tyl{0%,14%{opacity:0;scale:1.3}17%,21%{opacity:1;scale:1}24%,26%{opacity:.25;scale:1}29%,33%{opacity:1;scale:1}38%,100%{opacity:0;scale:1}}
.kadr-tyl .k-dotyk::after{animation:fala-tyl 3.6s infinite}
@keyframes fala-tyl{0%,17%{opacity:0;scale:1}18%{opacity:1;scale:1}26%{opacity:0;scale:2.4}28%{opacity:0;scale:1}30%{opacity:1;scale:1}38%,100%{opacity:0;scale:2.4}}
.kadr-tyl .iphone{animation:puk 3.6s infinite}
@keyframes puk{0%,17%,20%,29%,32%,100%{translate:0 0}18.5%,30.5%{translate:0 .5cqw}}
.kadr-tyl .k-wylot{z-index:1;opacity:1;animation:wylot-tyl 3.6s infinite}
@keyframes wylot-tyl{0%,38%{translate:0 0;rotate:0deg;scale:1;animation-timing-function:cubic-bezier(.2,.8,.3,1)}47%{translate:0 -42%;rotate:8deg;scale:1;animation-timing-function:cubic-bezier(.55,0,.85,.4)}68%{translate:0 -185%;rotate:8deg;scale:.94}69%,100%{translate:0 0;rotate:0deg;scale:1}}
.kadr-tyl .k-wylot i:nth-child(-n+2){animation:wylot-slad-tyl 3.6s infinite}
@keyframes wylot-slad-tyl{0%,44%{opacity:0;translate:0 0}50%,67%{opacity:var(--o);translate:0 var(--t)}68%,100%{opacity:0;translate:0 0}}

/* ---------- co można rzucić ---------- */
.karty-rzeczy{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px;width:min(var(--szer),100% - 2 * var(--bok));margin-inline:auto}
.rz-karta{position:relative;aspect-ratio:2 / 3;overflow:hidden;border-radius:14% / 9.33%;background:#1C1C1E var(--zdj,none) center/cover;color:#fff}
.rz-czas{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:rgba(30,30,30,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--sf);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.rz-czas svg{width:9px;height:9px}
.rz-karta{container-type:inline-size}
/* plik: pierwsza strona umowy prawdziwym tekstem, malutkim jak na podglądzie, a pod nią nazwa i rozmiar */
/* karta sama jest kontenerem, więc jej własny odstęp liczy się w %, a cqw dopiero w środku */
.rz-plik{display:flex;flex-direction:column;align-items:center;padding-top:13%}
.rz-pdf{flex:none;display:flex;flex-direction:column;width:64cqw;height:90.5cqw;overflow:hidden;padding:7.5cqw 6.5cqw;border-radius:1cqw;background:#fff;color:#1D1D1F;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;box-shadow:0 3cqw 8cqw -2cqw rgba(0,0,0,.6)}
.rz-pdf b{font-size:3.3cqw;line-height:1.2;text-align:center}
.rz-pdf small{margin-top:1cqw;font-size:2.2cqw;line-height:1.3;text-align:center;color:#555}
.rz-pdf em{margin-top:3.4cqw;font-style:normal;font-weight:700;font-size:2.3cqw;line-height:1.3}
.rz-pdf span{margin-top:.8cqw;font-size:2.1cqw;line-height:1.45;color:#333;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.rz-nazwa{display:grid;justify-items:center;gap:1cqw;margin-top:7cqw;padding:0 8cqw;font-family:var(--sf);font-size:5.6cqw;font-weight:600;line-height:1.25;text-align:center}
.rz-nazwa small{font-size:4.6cqw;font-weight:400;color:rgba(255,255,255,.55)}
.rz-tekst{display:flex;flex-direction:column;justify-content:center;padding:13%;font-family:var(--sf)}
.rz-tekst small{margin-bottom:10px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.55)}
.rz-tekst span{font-size:clamp(15px,1.35vw,18px);font-weight:500;line-height:1.35}
.rz-paczka i{position:absolute;left:50%;top:44%;width:48%;aspect-ratio:3 / 4;border-radius:12px;background:#333 var(--zdj,none) center/cover;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.rz-paczka i:nth-child(1){transform:translate(-78%,-50%) rotate(-10deg)}
.rz-paczka i:nth-child(2){transform:translate(-22%,-52%) rotate(9deg)}
.rz-paczka i:nth-child(3){transform:translate(-50%,-46%)}
.rz-zaznaczone{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:16px;background:rgba(60,60,62,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--sf);font-size:13.5px;font-weight:600;white-space:nowrap}
.rz-zaznaczone svg{width:13px;height:13px}

/* ---------- schowek ---------- */
/* Karta schowka z aplikacji w proporcjach 1:1 (karta 360 pt, napis 30 pt, „Wklej” jak PasteButton). Palec stuka „Wklej”,
   tekst zostaje na karcie, a skopiowane zdjęcie wysuwa się spod niej jako osobna karta: jedna rzecz ze schowka staje się
   dwiema, jak w Dropopie. Styl bazowy to stan po wklejeniu (bez JS, przy ograniczonym ruchu); pętla gra tylko, gdy kartę widać. */
.rz-schowek{position:relative;aspect-ratio:2 / 3;container-type:inline-size}
.sch-karta,.sch-plik{position:absolute;inset:0;border-radius:14% / 9.33%;box-shadow:0 2.5cqw 6cqw -2cqw rgba(0,0,0,.35)}
.sch-plik{background:#1C1C1E var(--zdj,none) center/cover;translate:10% 3%;rotate:6deg;scale:.8}
.sch-karta{display:grid;align-content:center;padding:0 8.3cqw;background:#1C1C1E;color:#fff;font-family:var(--sf);translate:-11% -3%;rotate:-4deg;scale:.8}
.sch-karta small{margin-bottom:5.5cqw;font-size:3.4cqw;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.sch-przed,.sch-po{grid-area:2 / 1;font-size:8.3cqw;font-weight:500;line-height:1.15;letter-spacing:-.013em}
.sch-przed{display:flex;flex-direction:column;align-items:flex-start;gap:5.5cqw;opacity:0}
.sch-po{font-size:7.6cqw;line-height:1.2}
.sch-wklej{position:relative;display:inline-flex;align-items:center;gap:1.8cqw;height:9.6cqw;padding:0 4.4cqw 0 3.8cqw;border-radius:4.8cqw;background:#4D4D4D;font-size:4.7cqw;font-weight:500;letter-spacing:0}
.sch-wklej svg{width:5.2cqw;height:5.2cqw}
.sch-dotyk{position:absolute;left:50%;top:50%;width:13cqw;height:13cqw;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;background:rgba(255,255,255,.3);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 .6cqw 3cqw rgba(0,0,0,.3);opacity:0;pointer-events:none}
.js .rz-schowek .sch-karta{animation:sch-karta 7s infinite}
.js .rz-schowek .sch-plik{animation:sch-plik 7s infinite}
.js .rz-schowek .sch-przed{animation:sch-przed 7s infinite}
.js .rz-schowek .sch-po{animation:sch-po 7s infinite}
.js .rz-schowek .sch-wklej{animation:sch-wklej 7s infinite}
.js .rz-schowek .sch-dotyk{animation:sch-dotyk 7s infinite}
@keyframes sch-karta{0%,30%{translate:0 0;rotate:0deg;scale:1;animation-timing-function:cubic-bezier(.3,1.25,.5,1)}44%,84%{translate:-11% -3%;rotate:-4deg;scale:.8;animation-timing-function:cubic-bezier(.4,0,.2,1)}94%,100%{translate:0 0;rotate:0deg;scale:1}}
@keyframes sch-plik{0%,30%{opacity:0;translate:0 0;rotate:0deg;scale:.9}31%{opacity:1;translate:0 0;rotate:0deg;scale:.9;animation-timing-function:cubic-bezier(.3,1.25,.5,1)}46%,84%{opacity:1;translate:10% 3%;rotate:6deg;scale:.8;animation-timing-function:cubic-bezier(.4,0,.2,1)}94%{opacity:1;translate:0 0;rotate:0deg;scale:.9}95%,100%{opacity:0;translate:0 0;rotate:0deg;scale:.9}}
@keyframes sch-przed{0%,24%{opacity:1}28%,90%{opacity:0}95%,100%{opacity:1}}
@keyframes sch-po{0%,26%{opacity:0}31%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes sch-wklej{0%,18%,24%,100%{scale:1}21%{scale:.93}}
@keyframes sch-dotyk{0%,11%{opacity:0;scale:1.4}17%,22%{opacity:1;scale:1}27%,100%{opacity:0;scale:1}}
.rzecz figcaption{margin-top:16px}
.rzecz figcaption b{display:block;font-size:1.06rem;font-weight:650}
.rzecz figcaption span{display:block;margin-top:4px;font-size:.96rem;line-height:1.45;color:var(--tusz-2)}

/* ---------- na Macu: róg MacBooka, cztery stany ----------
   1: okienko otwarte, w Finderze zaznaczony najnowszy plik. 2: okienko zamknięte, spod ikony wysuwa się panel
   przylotu i sam znika. 3: kafelek się kopiuje, w rozmowie obok ląduje załącznik. 4: kafelek leci na biurko. */
.kadr-mac{--proporcja:1.3333;--mb-w:205cqw;--mb-p:4cqw;--mb-g:5cqw;--duch-x:-330;--duch-y:178;--plik-r:527;--plik-g:305}
.kadr-mac .m-siatka{position:relative}
/* kadr to prawy róg ekranu: notch wypadłby na samej krawędzi jako czarny klocek */
.kadr-mac .mb-notch,.kadr-claude .mb-notch{display:none}
.kadr-mac .m-drop{transition:background-color .2s}
.kadr-mac:not([data-stan="2"]) .m-drop{background:rgba(0,0,0,.1)}
.kadr-mac .m-okno{transform-origin:43% -2%;transition:opacity .25s,scale .55s var(--sprezyna)}
.kadr-mac[data-stan="2"] .m-okno{opacity:0;scale:.4;transition:opacity .18s,scale .3s}
.kadr-mac[data-stan="2"] .k-przylot{animation:przylot-panel 5s .3s infinite}
@keyframes przylot-panel{0%{opacity:0;translate:0 calc(-14 * var(--pt));animation-timing-function:cubic-bezier(.2,.9,.3,1)}7%,72%{opacity:1;translate:0 0;animation-timing-function:ease-in}78%,100%{opacity:0;translate:0 calc(-8 * var(--pt))}}
.kadr-mac .finder,.kadr-mac .k-czat{transition:opacity .45s var(--plynnie),translate .7s var(--plynnie)}
.kadr-mac[data-stan="3"] .finder,.kadr-mac[data-stan="4"] .finder{opacity:0;translate:0 calc(14 * var(--pt))}

/* rozmowa, do której wkleja się zdjęcie: zwykłe okno z dymkami i polem wiadomości */
.k-czat{position:absolute;z-index:3;right:calc(420 * var(--pt));top:calc(64 * var(--pt));width:calc(285 * var(--pt));overflow:hidden;border-radius:calc(16 * var(--pt));background:#fff;color:#1D1D1F;font-size:calc(13 * var(--pt));line-height:1.3;box-shadow:0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.2),0 calc(14 * var(--pt)) calc(36 * var(--pt)) rgba(0,0,0,.22);opacity:0;translate:0 calc(14 * var(--pt))}
.kadr-mac[data-stan="3"] .k-czat{opacity:1;translate:0 0}
.k-czat-glowa{display:flex;align-items:center;gap:calc(16 * var(--pt));height:calc(48 * var(--pt));padding:0 calc(16 * var(--pt));background:#F6F6F6;border-bottom:calc(.5 * var(--pt)) solid rgba(0,0,0,.1)}
.k-czat-glowa b{font-weight:700}
.k-czat-tresc{display:grid;justify-items:start;align-content:end;gap:calc(4 * var(--pt));min-height:calc(110 * var(--pt));padding:calc(14 * var(--pt))}
.k-dymek{max-width:80%;padding:calc(7 * var(--pt)) calc(12 * var(--pt));border-radius:calc(17 * var(--pt));background:#E9E9EB}
.k-czat-pole{display:flex;flex-direction:column;align-items:flex-start;gap:calc(6 * var(--pt));margin:0 calc(12 * var(--pt)) calc(12 * var(--pt));padding:calc(7 * var(--pt)) calc(12 * var(--pt));border-radius:calc(16 * var(--pt));box-shadow:inset 0 0 0 calc(1 * var(--pt)) #D9D9DC;color:#A0A0A5}
.k-zalacznik{display:none;width:calc(78 * var(--pt));height:calc(104 * var(--pt));border-radius:calc(10 * var(--pt));background:#DDD var(--zdj,none) center/cover}
.kadr-mac[data-stan="3"] .k-zalacznik{display:block;animation:wklej .55s 1.45s var(--sprezyna) both}
@keyframes wklej{from{opacity:0;scale:.5;translate:0 calc(10 * var(--pt))}}
.k-cmdv{position:absolute;right:calc(16 * var(--pt));bottom:calc(20 * var(--pt));padding:calc(3 * var(--pt)) calc(8 * var(--pt));border-radius:calc(6 * var(--pt));background:#fff;color:#1D1D1F;font:600 calc(13 * var(--pt))/1.3 var(--sf);box-shadow:0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.25),0 calc(2 * var(--pt)) 0 rgba(0,0,0,.14);opacity:0}
.kadr-mac[data-stan="3"] .k-cmdv{animation:cmdv 1.2s .95s both}
@keyframes cmdv{0%{opacity:0;translate:0 calc(6 * var(--pt))}25%,62%{opacity:1;translate:0 0;scale:1}72%{scale:.9}100%{opacity:0;scale:1}}
.k-skopiowano{position:absolute;left:50%;bottom:calc(8 * var(--pt));display:flex;align-items:center;gap:calc(4 * var(--pt));padding:calc(3 * var(--pt)) calc(8 * var(--pt));border-radius:calc(9 * var(--pt));background:rgba(20,20,20,.74);font-size:calc(10 * var(--pt));font-weight:600;color:#fff;white-space:nowrap;translate:-50% 0;opacity:0}
.k-skopiowano svg{width:calc(9 * var(--pt));height:calc(9 * var(--pt))}
.kadr-mac[data-stan="3"] .k-skopiowano{animation:skopiowano 2.4s .35s both}
@keyframes skopiowano{0%{opacity:0;scale:.7}12%,72%{opacity:1;scale:1}100%{opacity:0;scale:1}}
.kadr-mac[data-stan="3"] .m-kafel:has(> .k-skopiowano){animation:klik .3s .2s}
@keyframes klik{50%{scale:.94}}

/* przeciąganie: przezroczysty kafelek z kursorem jedzie na biurko i zostaje tam plikiem */
.k-duch{position:absolute;z-index:3;left:calc(99.33 * var(--pt));top:0;width:calc(93.33 * var(--pt));height:calc(93.33 * var(--pt));border-radius:calc(11 * var(--pt));background:#333 var(--zdj,none) center/cover;box-shadow:0 calc(10 * var(--pt)) calc(24 * var(--pt)) rgba(0,0,0,.35);opacity:0;pointer-events:none}
.k-kursor{position:absolute;left:56%;top:50%;width:calc(17 * var(--pt));height:calc(21 * var(--pt));filter:drop-shadow(0 calc(1 * var(--pt)) calc(1.5 * var(--pt)) rgba(0,0,0,.35))}
.kadr-mac[data-stan="4"] .k-duch{animation:ciagnij-kafel 4.2s .35s infinite}
@keyframes ciagnij-kafel{0%{opacity:0;translate:0 0;scale:1}7%{opacity:.9;translate:0 0;scale:1.05;animation-timing-function:cubic-bezier(.45,0,.25,1)}60%{opacity:.9;translate:calc(var(--duch-x) * var(--pt)) calc(var(--duch-y) * var(--pt));scale:.74}65%,100%{opacity:0;translate:calc(var(--duch-x) * var(--pt)) calc(var(--duch-y) * var(--pt));scale:.7}}
.k-plik{position:absolute;z-index:1;right:calc(var(--plik-r) * var(--pt));top:calc(var(--plik-g) * var(--pt));display:grid;justify-items:center;gap:calc(5 * var(--pt));width:calc(96 * var(--pt));opacity:0}
.k-plik i{width:calc(64 * var(--pt));height:calc(64 * var(--pt));border:calc(3 * var(--pt)) solid #fff;border-radius:calc(3 * var(--pt));background:#ccc var(--zdj,none) center/cover;box-shadow:0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgba(0,0,0,.35)}
.k-plik span{color:#fff;font-size:calc(11.5 * var(--pt));font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}
.kadr-mac[data-stan="4"] .k-plik{animation:plik 4.2s .35s infinite}
@keyframes plik{0%,58%{opacity:0;scale:.9}64%,94%{opacity:1;scale:1}100%{opacity:0;scale:1}}

/* ---------- Claude: telefon z przodu, róg Maca z tyłu ----------
   1: prompt pisze się na karcie ze szkicem. 2: kapsuła rozwija ostatnie foldery. 3: szkic wylatuje do ikony w pasku
   menu (main.js), a spod ikony wysuwa się "Sesja ruszyła". 4: okienko Dropopa z sesją, która pracuje. */
.kadr-claude{--proporcja:1.2;--mb-w:165cqw;--mb-p:3cqw;--mb-g:5cqw;--tel-w:41cqw;--tel-x:5cqw;--tel-y:5cqw}
.kadr-claude .iphone{transition:translate 1s var(--plynnie)}
.kadr-claude[data-stan="4"] .iphone{translate:0 5cqw}
.kadr-claude .m-drop{transition:background-color .2s}
.kadr-claude[data-stan="4"] .m-drop{background:rgba(0,0,0,.1)}
.kadr-claude.poleciala[data-stan="3"] .m-drop{animation:ikona-przylot .7s .78s}
@keyframes ikona-przylot{30%{background:rgba(0,0,0,.16);scale:1.18}60%{scale:.96}}
.kadr-claude.poleciala[data-stan="3"] .k-sesja{animation:wysun .5s 1s cubic-bezier(.2,.9,.3,1) both}
.kadr-claude .m-okno{opacity:0;scale:.4;transform-origin:43% -2%;transition:opacity .18s,scale .3s}
.kadr-claude[data-stan="4"] .m-okno{opacity:1;scale:1;transition:opacity .25s .15s,scale .55s .15s var(--sprezyna)}

/* prompt: w 1 pisze się znak po znaku, w 2 stoi, po rzucie pole jest znowu puste */
.k-prompt{color:#fff;padding-right:calc(6 * var(--pt))}
.k-pole{position:relative;display:inline-block;min-width:0;white-space:nowrap}
.k-karetka{position:absolute;top:6%;bottom:6%;left:calc(100% - 1px);width:calc(2 * var(--pt));border-radius:calc(1 * var(--pt));background:#fff;opacity:0}
.k-pusty{display:none;color:rgba(255,255,255,.72)}
.kadr-claude[data-stan="1"] .k-pisze{display:inline-block;animation:pisze 2.2s .7s steps(37,jump-none) both}
.kadr-claude[data-stan="1"] .k-karetka{animation:karetka 2.2s .7s steps(37,jump-none) both,mrug-k 1s step-end 2.9s infinite}
@keyframes pisze{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes karetka{from{left:0;opacity:1}to{left:calc(100% - 1px);opacity:1}}
@keyframes mrug-k{50%{opacity:0}}
.poleciala .k-pole,.poleciala .k-prompt .d-wyslij{display:none}
.poleciala .k-pusty{display:inline}

/* menu kapsuły: ostatnie foldery z Maca i wyszukiwarka wszystkich (FolderMenu w aplikacji) */
.k-menu{z-index:6;top:calc(110 * var(--pt));left:50%;width:calc(262 * var(--pt));padding:calc(6 * var(--pt)) 0;border-radius:calc(24 * var(--pt));background:rgba(46,46,48,.92);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.14),0 calc(20 * var(--pt)) calc(50 * var(--pt)) rgba(0,0,0,.6);translate:-50% 0;transform-origin:50% 0;opacity:0;scale:.3;transition:opacity .18s,scale .3s}
.kadr-claude[data-stan="2"] .k-menu{opacity:1;scale:1;transition:opacity .2s .1s,scale .5s .1s var(--sprezyna)}
.k-menu-sekcja{display:block;padding:calc(8 * var(--pt)) calc(18 * var(--pt)) calc(4 * var(--pt)) calc(44 * var(--pt));font-size:calc(13 * var(--pt));font-weight:600;color:rgba(255,255,255,.5)}
.k-menu-wiersz{position:relative;display:grid;padding:calc(7 * var(--pt)) calc(18 * var(--pt)) calc(7 * var(--pt)) calc(44 * var(--pt));font-size:calc(17 * var(--pt));line-height:1.25}
.k-menu-wiersz b{font-weight:400}
.k-menu-wiersz small{font-size:calc(13 * var(--pt));color:rgba(255,255,255,.5)}
.k-menu-wiersz > svg{position:absolute;left:calc(16 * var(--pt));top:50%;width:calc(16 * var(--pt));height:calc(16 * var(--pt));translate:0 -50%}
.k-menu-wszystkie{margin-top:calc(6 * var(--pt));padding-block:calc(12 * var(--pt));box-shadow:0 calc(-.5 * var(--pt)) 0 rgba(255,255,255,.14)}
.k-menu-wszystkie > svg{left:auto;right:calc(18 * var(--pt));width:calc(19 * var(--pt));height:calc(19 * var(--pt))}

/* ---------- kodem: dwa telefony ----------
   Po prawej ten sam iPhone z arkuszem "Udostępnij kodem" (ShareSheet w aplikacji), po lewej zwykły telefon
   z Androidem i stroną odbiorcy dropop.pl, tą samą białą kartą. 1: skan, strona z rzeczami. 2: prośba z trzema
   emoji na obu ekranach. 3: w drodze tylko szyfr, bez treści i nazwy. 4: "Zakończ" i link wygasa. */
.kadr-kod{--proporcja:1.2;--tel-w:41cqw;--tel-x:54cqw;--tel-y:4cqw}

/* telefon z Androidem: 72 x 152 mm, ciemna rama, otwór na aparat, ekran 412 dp */
.android{width:41cqw;left:5cqw;top:9cqw;container-type:inline-size;aspect-ratio:72 / 152;border-radius:14% / 6.6%;background:linear-gradient(90deg,#2E3033,#55585D 2.5%,#36383C 7%,#36383C 93%,#55585D 97.5%,#2E3033);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.5),-1cqw 3cqw 5cqw -2cqw rgba(0,0,0,.4),0 1cqw 2cqw -1cqw rgba(0,0,0,.25)}
.and-b{position:absolute;right:-.5cqw;width:.5cqw;border-radius:0 .4cqw .4cqw 0;background:#43464A}
.and-glosnosc{top:24%;height:11%}
.and-zasilanie{top:38%;height:6%}
.and-ekran{position:absolute;inset:2.4cqw;overflow:hidden;border-radius:11.5cqw;background:var(--papier);container-type:size;--pt:calc(100cqw / 412);font-family:var(--tekst);line-height:1.35;color:var(--tusz)}
.and-ekran > *{position:absolute;left:0;right:0}
.and-pasek{top:0;height:calc(38 * var(--pt));display:flex;align-items:center;justify-content:space-between;padding:0 calc(26 * var(--pt));background:#fff;font-size:calc(14 * var(--pt));font-weight:500;color:#1F1F1F}
.and-ikony{display:flex;align-items:center;gap:calc(6 * var(--pt))}
.and-wifi{width:calc(15 * var(--pt));height:calc(11 * var(--pt))}
.and-bateria{width:calc(22 * var(--pt));height:calc(11 * var(--pt))}
.and-oczko{left:50%;right:auto;top:calc(12 * var(--pt));width:calc(14 * var(--pt));height:calc(14 * var(--pt));margin-left:calc(-7 * var(--pt));border-radius:50%;background:#0B0B0D}
.and-chrome{top:calc(38 * var(--pt));height:calc(60 * var(--pt));display:flex;align-items:center;gap:calc(16 * var(--pt));padding:0 calc(16 * var(--pt)) 0 calc(12 * var(--pt));background:#fff;color:#1F1F1F}
.and-adres{flex:1;display:flex;align-items:center;gap:calc(10 * var(--pt));height:calc(44 * var(--pt));padding:0 calc(14 * var(--pt));border-radius:calc(22 * var(--pt));background:#EDEFF2;font-size:calc(16 * var(--pt))}
.and-adres svg{width:calc(18 * var(--pt));height:calc(18 * var(--pt));color:#45474A}
.and-karty{display:grid;place-items:center;width:calc(21 * var(--pt));height:calc(21 * var(--pt));border-radius:calc(5 * var(--pt));box-shadow:inset 0 0 0 calc(2 * var(--pt)) #1F1F1F;font-size:calc(11 * var(--pt));font-weight:700}
.and-menu{width:calc(22 * var(--pt));height:calc(22 * var(--pt))}
.and-strona{top:calc(98 * var(--pt));bottom:0;padding:0 calc(16 * var(--pt))}
.and-marka{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--pt));height:calc(64 * var(--pt));font-family:var(--tytul);font-weight:650;font-size:calc(19 * var(--pt));letter-spacing:-.02em}
.and-marka svg{width:calc(30 * var(--pt));height:calc(30 * var(--pt))}
.and-stos{display:grid;margin-top:calc(10 * var(--pt))}
.and-karta{grid-area:1 / 1;align-self:start;display:flex;flex-direction:column;align-items:center;padding:calc(30 * var(--pt)) calc(24 * var(--pt));border-radius:calc(28 * var(--pt));background:#fff;text-align:center;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 calc(30 * var(--pt)) calc(60 * var(--pt)) calc(-32 * var(--pt)) rgba(0,0,0,.28);opacity:0;translate:0 calc(10 * var(--pt));transition:opacity .3s,translate .5s var(--plynnie)}
.kadr-kod[data-stan="1"] .k-s1,.kadr-kod[data-stan="2"] .k-s2,.kadr-kod[data-stan="3"] .k-s3,.kadr-kod[data-stan="4"] .k-s4{opacity:1;translate:0 0;transition-delay:.12s}
.and-tytul{font-family:var(--tytul);font-weight:640;font-size:calc(30 * var(--pt));line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.and-opis{margin-top:calc(8 * var(--pt));font-size:calc(15 * var(--pt));color:var(--tusz-2)}
.and-pigulka{display:inline-flex;align-items:center;gap:calc(8 * var(--pt));margin-top:calc(16 * var(--pt));padding:calc(6 * var(--pt)) calc(13 * var(--pt));border-radius:99px;background:var(--papier);font-size:calc(14 * var(--pt));font-variant-numeric:tabular-nums}
.and-pigulka i{width:calc(7 * var(--pt));height:calc(7 * var(--pt));border-radius:50%;background:var(--tusz);animation:mrug 2s ease-in-out infinite}
.and-przycisk{display:grid;place-items:center;align-self:stretch;height:calc(52 * var(--pt));margin-top:calc(24 * var(--pt));border-radius:calc(14 * var(--pt));background:var(--tusz);color:var(--papier);font-size:calc(16 * var(--pt));font-weight:600}
.and-jasny{background:transparent;color:var(--tusz);box-shadow:inset 0 0 0 calc(1.5 * var(--pt)) var(--tusz)}
.and-link{display:flex;align-items:baseline;font-size:calc(19 * var(--pt));font-weight:600;line-height:1.2;white-space:nowrap}
.and-link span{color:var(--tusz-3)}
.and-link b{font:700 1.62em/1.2 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.and-znaki{display:flex;gap:calc(10 * var(--pt));margin-top:calc(22 * var(--pt))}
.and-znaki i{display:grid;place-items:center;width:calc(64 * var(--pt));aspect-ratio:1;border-radius:calc(16 * var(--pt));background:var(--papier);font-style:normal;font-size:calc(34 * var(--pt));line-height:1}
.and-postep{align-self:stretch;height:calc(6 * var(--pt));margin-top:calc(22 * var(--pt));overflow:hidden;border-radius:calc(3 * var(--pt));background:var(--papier-2)}
.and-postep i{display:block;width:64%;height:100%;border-radius:inherit;background:var(--tusz)}
.and-odbitka{position:static;display:flex;align-items:center;gap:calc(12 * var(--pt));margin-top:calc(12 * var(--pt));padding:calc(10 * var(--pt)) calc(14 * var(--pt)) calc(10 * var(--pt)) calc(10 * var(--pt));border-radius:calc(22 * var(--pt));background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 calc(18 * var(--pt)) calc(40 * var(--pt)) calc(-28 * var(--pt)) rgba(0,0,0,.28);opacity:0;transition:opacity .3s}
.kadr-kod[data-stan="1"] .and-odbitka{opacity:1;transition-delay:.25s}
.and-odbitka i{flex:none;width:calc(52 * var(--pt));height:calc(52 * var(--pt));border-radius:calc(12 * var(--pt));background:#DDD var(--zdj,none) center/cover}
.and-odbitka span{flex:1;min-width:0;display:grid;font-size:calc(13 * var(--pt));color:var(--tusz-3)}
.and-odbitka b{overflow:hidden;font-size:calc(15 * var(--pt));font-weight:600;color:var(--tusz);white-space:nowrap;text-overflow:ellipsis}
.and-odbitka em{flex:none;padding:calc(8 * var(--pt)) calc(14 * var(--pt));border-radius:calc(10 * var(--pt));box-shadow:inset 0 0 0 calc(1.5 * var(--pt)) var(--tusz);font-style:normal;font-size:calc(14 * var(--pt));font-weight:600}

/* arkusz "Udostępnij kodem" na iPhonie, w punktach jak w ShareSheet */
.k-arkusz{left:0;right:0;top:calc(58 * var(--pt));bottom:0;display:flex;flex-direction:column;padding:calc(30 * var(--pt)) calc(24 * var(--pt)) 0;border-radius:calc(38 * var(--pt)) calc(38 * var(--pt)) 0 0;background:#1C1C1E;box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.12)}
.k-uchwyt{position:absolute;top:calc(6 * var(--pt));left:50%;width:calc(36 * var(--pt));height:calc(5 * var(--pt));margin-left:calc(-18 * var(--pt));border-radius:calc(3 * var(--pt));background:rgba(255,255,255,.3)}
.k-tytul{font-size:calc(26 * var(--pt));font-weight:600;line-height:1.2;letter-spacing:-.015em}
.k-wiersz{display:flex;align-items:center;justify-content:space-between;margin-top:calc(10 * var(--pt))}
.k-miniatury{display:flex;gap:calc(4 * var(--pt))}
.k-miniatury i{width:calc(42 * var(--pt));height:calc(42 * var(--pt));border-radius:calc(10 * var(--pt));background:#333 var(--zdj,none) center/cover}
.k-waznosc{display:flex;align-items:center;gap:calc(5 * var(--pt));height:calc(34 * var(--pt));padding:0 calc(13 * var(--pt));border-radius:calc(17 * var(--pt));background:rgba(255,255,255,.12);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.18);font-size:calc(14 * var(--pt));font-weight:600}
.k-waznosc svg{width:calc(10 * var(--pt));height:calc(10 * var(--pt));opacity:.7}
.k-qr{align-self:center;margin-top:calc(24 * var(--pt));padding:calc(18 * var(--pt));border-radius:calc(24 * var(--pt));background:#fff}
.k-qr .qr{width:calc(248 * var(--pt));height:calc(248 * var(--pt))}
.k-link{align-self:center;display:flex;align-items:baseline;margin-top:calc(16 * var(--pt));font-size:calc(26 * var(--pt));font-weight:600;line-height:1.15;white-space:nowrap}
.k-link span{color:rgba(255,255,255,.6)}
.k-link b{font:700 calc(36 * var(--pt))/1.15 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace}
.k-stan{align-self:center;display:grid;margin-top:calc(16 * var(--pt));font-size:calc(16 * var(--pt));font-weight:600}
.k-stan > span{grid-area:1 / 1;display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--pt));transition:opacity .3s}
.k-gotowe svg{width:calc(18 * var(--pt));height:calc(18 * var(--pt));padding:calc(3.5 * var(--pt));border-radius:50%;background:#30D158;color:#1C1C1E}
.k-wgrywam{flex-direction:column;opacity:0}
.k-postep{display:block;width:calc(240 * var(--pt));height:calc(4 * var(--pt));overflow:hidden;border-radius:calc(2 * var(--pt));background:rgba(255,255,255,.2)}
.k-postep i{display:block;width:64%;height:100%;background:#fff}
.kadr-kod[data-stan="3"] .k-gotowe{opacity:0}
.kadr-kod[data-stan="3"] .k-wgrywam{opacity:1}
.k-wygasa{align-self:center;margin-top:calc(8 * var(--pt));font-size:calc(14 * var(--pt));color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
/* prośba przykrywa "Zakończ" (ten sam kolor co arkusz), żeby nic pod nią nie podjeżdżało */
.k-dol{position:relative;margin-top:calc(22 * var(--pt))}
.k-prosby{position:absolute;z-index:1;left:0;right:0;top:calc(-6 * var(--pt));display:flex;flex-direction:column;gap:calc(10 * var(--pt));padding-bottom:calc(30 * var(--pt));background:#1C1C1E;opacity:0;translate:0 calc(14 * var(--pt));transition:opacity .3s,translate .5s var(--plynnie)}
.kadr-kod[data-stan="2"] .k-prosby{opacity:1;translate:0 0;transition-delay:.2s}
.k-prosby-opis{font-size:calc(13 * var(--pt));line-height:1.3;color:rgba(255,255,255,.6)}
.k-prosba{display:flex;flex-direction:column;gap:calc(14 * var(--pt));padding:calc(16 * var(--pt));border-radius:calc(22 * var(--pt));background:rgba(255,255,255,.08)}
.k-prosba-glowa{display:flex;align-items:center;gap:calc(14 * var(--pt))}
.k-emoji{font-size:calc(34 * var(--pt));line-height:1;white-space:nowrap}
.k-prosba-glowa > span:last-child{display:grid;gap:calc(3 * var(--pt));font-size:calc(14 * var(--pt));color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.k-prosba-glowa b{font-size:calc(17 * var(--pt));font-weight:600;color:#fff}
.k-prosba-guziki{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--pt))}
.k-prosba-guziki span{display:grid;place-items:center;height:calc(48 * var(--pt));border-radius:calc(24 * var(--pt));background:rgba(255,255,255,.14);font-size:calc(16 * var(--pt));font-weight:600}
.k-prosba-guziki .k-pozwol{background:#fff;color:#000}
.k-zakoncz{display:grid;place-items:center;height:calc(50 * var(--pt));border-radius:calc(25 * var(--pt));background:rgba(255,255,255,.12);box-shadow:inset 0 calc(.75 * var(--pt)) 0 rgba(255,255,255,.16);color:#FF453A;font-size:calc(16 * var(--pt));font-weight:600}
.kadr-kod[data-stan="4"] .k-zakoncz{animation:stuk-zakoncz 2.8s .5s infinite}
@keyframes stuk-zakoncz{0%,16%{background:rgba(255,255,255,.12);scale:1}22%{background:rgba(255,69,58,.3);scale:.95}34%,100%{background:rgba(255,255,255,.12);scale:1}}
/* w 4 arkusz gaśnie po stuknięciu: udostępnienie się skończyło */
.kadr-kod .k-arkusz > :not(.k-uchwyt):not(.k-dol){transition:opacity .5s}
.kadr-kod[data-stan="4"] .k-arkusz > :not(.k-uchwyt):not(.k-dol){opacity:.35;transition-delay:1.2s}

/* szyfr w drodze: zamiast zdjęcia szum, zamiast nazwy przypadkowe znaki. Leci z iPhone'a do Androida */
.k-szyfr{z-index:5;left:37cqw;top:38cqw;display:flex;align-items:center;gap:1.6cqw;padding:1.2cqw 2.2cqw 1.2cqw 1.2cqw;border-radius:2.6cqw;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2cqw 4cqw -1.5cqw rgba(0,0,0,.4);font-family:var(--tekst);font-size:1.9cqw;color:var(--tusz-3);white-space:nowrap;opacity:0}
.k-szum{width:6.6cqw;height:6.6cqw;clip-path:inset(0 round 1.3cqw)}
.k-szyfr > span{display:grid;line-height:1.3}
.k-szyfr b{font:600 2.1cqw/1.3 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;color:var(--tusz)}
.kadr-kod[data-stan="3"] .k-szyfr{animation:szyfr 2.6s .3s var(--plynnie) infinite}
@keyframes szyfr{0%{opacity:0;translate:10cqw 1.5cqw;rotate:4deg}16%{opacity:1}78%{opacity:1;translate:-8cqw -1cqw;rotate:-2deg}100%{opacity:0;translate:-11cqw -1.5cqw;rotate:-3deg}}

/* ---------- prywatnie ----------
   Bez obrazka i bez kolumn z kreskami: trzy krótkie zdania dużym krojem, na tej samej siatce co punkty i kadry */
.hasla{display:grid;gap:clamp(28px,4vw,56px)}
.hasla > div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px clamp(32px,5vw,88px);align-items:baseline}
.hasla dt{font-family:var(--tytul);font-weight:640;font-size:clamp(2.1rem,4.4vw,4rem);line-height:1;letter-spacing:-.04em}
.hasla dd{margin:0;max-width:40ch;font-size:clamp(1.06rem,1.3vw,1.22rem);line-height:1.5;color:var(--tusz-2);text-wrap:pretty}

/* ---------- zacznij: trzy zbliżenia ----------
   1: ikona w pasku menu, tuż przy zegarze. 2: kod parowania pod nią. 3: karta, która już leci w pozie z logo. */
.start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);margin-bottom:clamp(40px,5vw,64px)}
.start li{display:grid;align-content:start;gap:6px}
.start .kadr{--proporcja:1.25;margin-bottom:16px}
.start b{display:flex;align-items:baseline;gap:10px;font-size:1.12rem;font-weight:650}
.start-nr{font-family:var(--tytul);font-weight:600;font-size:1rem;color:var(--tusz-3);font-variant-numeric:tabular-nums}
.start li > span{color:var(--tusz-2);text-wrap:pretty}
.pobierz{display:flex;flex-wrap:wrap;gap:12px}

.kadr-ikona{--mb-w:390cqw;--mb-p:6cqw;--mb-g:9cqw}
.js .kadr-ikona .m-drop{animation:ikona-nowa 1.1s .5s var(--sprezyna) both}
@keyframes ikona-nowa{0%{opacity:0;scale:.2;background:rgba(0,0,0,0)}55%{opacity:1;scale:1.1}100%{opacity:1;scale:1;background:rgba(0,0,0,.1)}}
.kadr-ikona .m-drop{background:rgba(0,0,0,.1)}

.kadr-parowanie{--mb-w:305cqw;--mb-p:-2cqw;--mb-g:8cqw}
.k-parowanie{display:flex;flex-direction:column;align-items:center;padding:calc(16 * var(--pt)) calc(22 * var(--pt)) calc(18 * var(--pt));text-align:center}
.k-parowanie > b{font-size:calc(14 * var(--pt));font-weight:600}
.k-parowanie > p{margin-top:calc(4 * var(--pt));font-size:calc(11.5 * var(--pt));line-height:1.35;color:rgba(255,255,255,.58)}
.k-par-qr{margin-top:calc(12 * var(--pt));padding:calc(10 * var(--pt));border-radius:calc(14 * var(--pt));background:#fff}
.k-par-qr .qr{width:calc(150 * var(--pt));height:calc(150 * var(--pt))}
.js .kadr-parowanie .m-okno{transform-origin:43% -2%;animation:wyskok .7s .5s var(--sprezyna) both}

/* karta zachodu wyjęta z ekranu w pozie z logo: przechył 8° i dwa blade ślady pod spodem */
.kadr-rzut{--tel-w:48cqw;--tel-x:26cqw;--tel-y:7cqw}
.k-poza{--tpt:calc(92.5cqw / 402);position:absolute;z-index:3;left:calc(3.75cqw + 21 * var(--tpt));top:calc(3.75cqw + 114 * var(--tpt));width:calc(360 * var(--tpt));height:calc(540 * var(--tpt));border-radius:calc(50.4 * var(--tpt));rotate:8deg;translate:0 -8%}
.k-poza i{position:absolute;inset:0;border-radius:inherit;background:#1C1C1E var(--zdj,none) center/cover}
.k-poza i:nth-child(1){opacity:.3;translate:0 33%}
.k-poza i:nth-child(2){opacity:.55;translate:0 16.5%}
.k-poza i:nth-child(3){box-shadow:0 3cqw 6cqw -1.5cqw rgba(0,0,0,.55)}
.js .kadr-rzut .k-poza{animation:poza 1.1s .4s var(--plynnie) both}
.js .kadr-rzut .k-poza i:nth-child(-n+2){animation:slad .45s .8s both}
@keyframes poza{from{rotate:0deg;translate:0 0}}
@keyframes slad{from{opacity:0;translate:0 0}}

/* kody QR rysuje main.js */
.qr{display:block}
.qr svg{width:100%;height:100%}

/* ---------- pytania ---------- */
.pytania-uklad{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.pytania{display:grid;gap:8px}
.pytania details{border-radius:18px;background:var(--papier-2);transition:background-color .2s}
.pytania details:hover{background:#E3E0D8}
.pytania summary{display:flex;justify-content:space-between;gap:24px;padding:20px 24px;font-size:1.15rem;font-weight:600;line-height:1.35;list-style:none;cursor:pointer}
.pytania summary::-webkit-details-marker{display:none}
.pytania summary::after{content:"";flex:none;width:14px;height:14px;margin-top:5px;background:linear-gradient(var(--tusz),var(--tusz)) center/100% 2px no-repeat,linear-gradient(var(--tusz),var(--tusz)) center/2px 100% no-repeat;transition:transform .25s var(--plynnie)}
.pytania details[open] summary::after{transform:rotate(45deg)}
.pytania p{max-width:62ch;padding:0 24px 22px;color:var(--tusz-2)}

/* ---------- stopka ---------- */
.stopka{position:relative;z-index:1;padding-top:clamp(56px,7vw,96px)}
.stopka-gora{display:flex;justify-content:space-between;align-items:flex-start;gap:40px 64px;flex-wrap:wrap}
.stopka-haslo{font-family:var(--tytul);font-weight:640;font-size:clamp(2rem,4.2vw,3.9rem);line-height:1;letter-spacing:-.035em}
.stopka-wersja{margin-top:20px;font-size:.9rem;color:var(--tusz-3)}
.stopka-linki{display:grid;grid-template-columns:repeat(2,auto);gap:10px 48px;align-content:start;padding-top:.4em}
.stopka-linki a{font-weight:500;color:var(--tusz-2);transition:color .15s}
.stopka-linki a:hover{color:var(--tusz)}

/* ---------- biurko: na dół strony spada to, co było wyżej; zachód wraca rzutem na górę ----------
   Słowo leży na samej krawędzi strony i jest przez nią ucięte. Karty mają rozmiar w cqw biurka,
   więc cała kompozycja skaluje się z szerokością. Na stole karta ma krótki, ostry cień; w locie pod nią
   rozjaśnia się osobna warstwa z dużym, miękkim cieniem (main.js), więc nic nie przelicza rozmycia w locie. */
.biurko{--szer-b:min(var(--szer),100% - 2 * var(--bok));position:relative;container-type:inline-size;width:var(--szer-b);margin:clamp(8px,2vw,24px) auto 0;padding-top:calc(var(--szer-b) * .2)}
/* maska sięga w boczne marginesy strony: farba słowa dochodzi do prawej krawędzi siatki, a dymek nad "pop"
   wychodzi trochę dalej. overflow, nie clip-path: ucięte ogonki i dymek nie mogą wydłużać przewijania */
.slowo-maska{overflow:hidden;margin-inline:calc(var(--bok) * -1);padding-inline:var(--bok)}
.slowo .n-dymek{--od:50% 100%}
.js .slowo:not(.wyskoczylo) .n-op{scale:0}
/* 24.45cqw: farba słowa Dropop ma 4,088 em, więc od lewej do prawej krawędzi biurka. Wysokość wiersza .98
   stawia linię bazową .157 em nad krawędzią strony: ogonki obu "p" (.192 em) dotykają jej i lekko za nią
   wychodzą, reszta liter stoi cała. "op" czeka schowane w p, dopóki słowo nie stanie (skrypt: wyskoczylo). */
.slowo{display:block;margin:-.11em 0 0 -.0845em;font-family:var(--tytul);font-weight:800;font-stretch:125%;font-size:24.45cqw;line-height:.98;letter-spacing:-.055em;white-space:nowrap;color:var(--tusz);-webkit-user-select:none;user-select:none}
/* słowo wynurza się spod krawędzi przez pierwsze 30% drogi przez biurko. Przeglądarka z osią przewijania w CSS
   liczy to w tej samej klatce co przewinięcie, więc słowo nie drga przy szybkim ruchu; reszta dostaje to z main.js */
@keyframes wynurz{from{translate:0 38%}}
@supports (animation-timeline:view()){
  .biurko{view-timeline:--biurko block}
  .slowo{animation:wynurz linear both;animation-timeline:--biurko;animation-range:entry-crossing 0% entry-crossing 30%}
}

.rzut{--w:calc(var(--k,1) * clamp(60px,11cqw,210px));--ar:1.333;position:absolute;z-index:2;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--w) * var(--ar));margin:calc(var(--w) * var(--ar) / -2) 0 0 calc(var(--w) / -2)}
.rzut i,.rzut b{font-style:normal}
.rzut-karta,.rzut-slad{position:absolute;inset:0;display:block;rotate:var(--r,0deg);overflow:hidden;border-radius:calc(var(--w) * .11);background:#1C1C1E var(--zdj,none) center/cover;color:#fff}
.rzut-karta{box-shadow:0 1px 3px rgba(0,0,0,.32),0 8px 22px -8px rgba(0,0,0,.3)}
.rzut-cien{position:absolute;inset:0;rotate:var(--r,0deg);border-radius:calc(var(--w) * .11);box-shadow:0 31px 47px rgba(0,0,0,.16),0 30px 56px -8px rgba(0,0,0,.3);opacity:0;pointer-events:none}
/* bez rozmycia tła: rozmyta plakietka w lecącej karcie miga w Safari, a na ciemnym kadrze wygląda tak samo */
.rzut-czas{position:absolute;left:7%;bottom:6%;display:flex;align-items:center;gap:.35em;padding:.3em .7em;border-radius:1em;background:rgba(24,24,24,.62);font-family:var(--sf);font-size:calc(var(--w) * .085);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.rzut-czas svg{width:.65em;height:.65em}
.rzut-pdf{display:flex;flex-direction:column;gap:calc(var(--w) * .045);padding:15% 12%;border-radius:calc(var(--w) * .035);background:#fff;color:#111}
.rzut-pdf b{margin-bottom:calc(var(--w) * .03);font-family:var(--sf);font-size:calc(var(--w) * .085);line-height:1.15}
.rzut-pdf i{flex:none;height:calc(var(--w) * .022);border-radius:2px;background:#DCDCDC}
.rzut-pdf i:nth-of-type(3n){width:64%}
.rzut-tekst{display:flex;flex-direction:column;justify-content:center;padding:13%;font-family:var(--sf);font-size:calc(var(--w) * .13);font-weight:500;line-height:1.3}
.rzut-tekst small{margin-bottom:.55em;font-size:.58em;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.55)}

/* zachód: karta do rzutu. W locie przechyla się o 8° i zostawia dwa blade ślady, jak karta w logo */
.rzut-gora{z-index:3;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;transition:translate .5s var(--sprezyna)}
.rzut-gora.trzymana{cursor:grabbing;transition:none}
.rzut-gora .rzut-karta{transition:translate .35s var(--sprezyna)}
.rzut-gora:hover .rzut-karta{translate:0 -6px}
.rzut-gora:focus-visible{outline:none}
.rzut-gora:focus-visible .rzut-karta{outline:3px solid var(--papier);outline-offset:3px}
.rzut-slad{opacity:0}
.rzut-gora.rzucona .rzut-slad{transition:opacity .1s,translate .2s var(--plynnie)}
.rzut-gora.rzucona .rzut-slad:nth-child(1){opacity:.3;translate:0 33%}
.rzut-gora.rzucona .rzut-slad:nth-child(2){opacity:.55;translate:0 16.5%}
.rzut-podpowiedz{position:absolute;left:50%;bottom:100%;display:flex;align-items:center;gap:6px;height:32px;margin-bottom:16px;padding:0 13px 0 10px;border-radius:16px;background:#fff;color:var(--tusz);box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 22px -6px rgba(0,0,0,.35);font-size:.86rem;font-weight:600;line-height:1;white-space:nowrap;translate:-50% 0;scale:calc(1 + var(--ciag,0) * .2);transform-origin:50% 100%;pointer-events:none}
.rzut-podpowiedz svg{width:14px;height:14px;animation:podrzut 2.6s 1.2s var(--plynnie) infinite}
@keyframes podrzut{0%,62%,100%{translate:0 0}74%{translate:0 -4px}86%{translate:0 0}}

/* ze skryptem karty czekają nad ekranem: widać je dopiero w locie i na biurku */
.js .biurko .rzut{visibility:hidden}
.js .biurko .rzut.leci,.js .biurko .rzut.lezy{visibility:visible}
.js .rzut-podpowiedz{opacity:0;translate:-50% 8px;transition:opacity .2s,translate .2s}
.js .rzut-gora.lezy .rzut-podpowiedz{opacity:1;translate:-50% 0;transition:opacity .4s .25s,translate .6s .25s var(--sprezyna)}
.js .rzut-gora.rzucona .rzut-podpowiedz{opacity:0;transition:opacity .1s}

/* rzucony zachód ląduje w okienku Dropa na pierwszym ekranie */
@keyframes przylot{0%{opacity:0;scale:.55;translate:0 40%}55%{opacity:1}100%{scale:1;translate:0 0}}
.m-kafel.przylot{animation:przylot .8s var(--sprezyna) both}

/* ---------- ruch: wejście strony i bloków ---------- */
@keyframes wjazd{from{opacity:0;transform:translateY(24px)}}
@keyframes telefon{from{opacity:0;transform:translateY(48px)}}
.hero h1{animation:wjazd .9s var(--plynnie) both}
.hero-bok{animation:wjazd .9s .08s var(--plynnie) both}
.scena{animation:wjazd 1.1s .16s var(--plynnie) both}
.scena > .iphone{animation:telefon 1.2s .42s var(--plynnie) both}
/* okienko Dropopa na Macu wyskakuje spod ikony w pasku menu (49% szerokości, nad górną krawędzią):
   to jest "pop" z nazwy, w tej samej chwili co dymek nad "pop" w logo */
@keyframes wyskok{from{opacity:0;scale:.3}}
.js .scena .m-okno{transform-origin:49% -7%;animation:wyskok .75s 1.25s var(--sprezyna) both}
.js [data-wej]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--plynnie),transform .9s var(--plynnie)}
.js [data-wej].widac{opacity:1;transform:none}
.sposoby > :nth-child(2),.karty-rzeczy > :nth-child(2),.hasla > :nth-child(2),.start > :nth-child(2){transition-delay:.08s}
.sposoby > :nth-child(3),.karty-rzeczy > :nth-child(3),.hasla > :nth-child(3),.start > :nth-child(3){transition-delay:.16s}
.sposoby > :nth-child(4),.karty-rzeczy > :nth-child(4){transition-delay:.24s}
.karty-rzeczy > :nth-child(5){transition-delay:.32s}
.jeden-ruch > .kadr{transition-delay:.12s}

/* ---------- mniejsze ekrany ---------- */
@media (max-width:1100px){
  .pytania-uklad{grid-template-columns:minmax(0,1fr)}
  .sposoby{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .karty-rzeczy{grid-auto-columns:minmax(220px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%;padding-inline:var(--bok);scroll-padding-inline:var(--bok)}
  .karty-rzeczy::-webkit-scrollbar{display:none}
  .rzecz{scroll-snap-align:start}
}
/* kadr nie mieści się obok punktów: stoi przyklejony pod nagłówkiem, a punkty przejeżdżają pod nim i znikają
   w papierze. Kadr zajmuje najwyżej pół ekranu, żeby zawsze było widać punkt, o którym mówi. */
@media (max-width:900px){
  .z-bliska,.jeden-ruch{grid-template-columns:minmax(0,1fr)}
  .z-bliska{gap:0}
  .kadr-trzymacz{order:-1;z-index:3;top:var(--naglowek);margin-inline:calc(var(--bok) * -1);padding:12px var(--bok) 0;background:var(--papier)}
  .kadr-trzymacz::after{content:"";position:absolute;left:0;right:0;top:100%;height:32px;background:linear-gradient(var(--papier),rgba(242,241,236,0));pointer-events:none}
  .kadr-trzymacz .kadr{width:min(100%,calc(var(--proporcja) * (100svh - var(--naglowek)) * .5))}
  .przystanek{min-height:max(180px,28svh)}
  .jeden-ruch .kadr{width:min(100%,560px)}
  .hasla > div{grid-template-columns:minmax(0,1fr)}
}

/* ---------- masz kod ---------- */
/* Ta sama linijka co na karcie nadawcy i na stronie odbiorcy: szare "dropop.pl/", a za nim sześć kresek,
   w które wpisuje się kod. Bez skryptu pola nie ma, bo nie miałoby dokąd prowadzić. */
.masz-kod{display:none}
.js .masz-kod{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin-top:34px}
.masz-kod-pytanie{color:var(--tusz-2);font-size:clamp(1.08rem,1.3vw,1.22rem)}
.masz-kod-link{--odstep:.12em;display:inline-flex;align-items:baseline;font-size:clamp(1.2rem,2.1vw,1.55rem);font-weight:600;line-height:1;white-space:nowrap}
.masz-kod-adres{color:var(--tusz-3);letter-spacing:-.01em}
.masz-kod-miejsce{position:relative;display:inline-block;margin-right:calc(-1 * var(--odstep));padding-bottom:.2em;font:700 1.45em/1.2 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;letter-spacing:var(--odstep)}
.masz-kod-pole{display:block;width:calc(6 * (1ch + var(--odstep)));height:1.2em;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--tusz);font:inherit;letter-spacing:inherit;caret-color:var(--tusz);outline:none;-webkit-appearance:none;appearance:none}
.masz-kod-kreski{position:absolute;left:0;bottom:0;display:flex;gap:var(--odstep);pointer-events:none}
.masz-kod-kreski i{flex:0 0 1ch;height:.1em;min-height:3px;border-radius:2px;background:var(--linia);transition:background-color .2s}
.masz-kod-kreski i.pelna{background:var(--tusz)}
.masz-kod-kreski i.tu{background:var(--tusz);animation:mrug 1.1s steps(1) infinite}
@keyframes mrug{50%{background:var(--linia)}}
.masz-kod-dalej{align-self:center;display:grid;place-items:center;width:44px;height:44px;margin-left:16px;border-radius:50%;background:var(--tusz);color:var(--papier);opacity:.16;transition:opacity .2s,scale .3s var(--sprezyna)}
.masz-kod-dalej svg{width:20px;height:20px}
.masz-kod.gotowy .masz-kod-dalej{opacity:1}
.masz-kod.gotowy .masz-kod-dalej:active{scale:.92}
.masz-kod-blad{flex-basis:100%;min-height:1.55em;color:var(--tusz-2);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.masz-kod-kreski i.tu{animation:none}.masz-kod-dalej{transition:none}}

@media (max-width:760px){
  .naglowek-w{gap:10px}
  .menu{display:none;position:absolute;top:var(--naglowek);left:0;right:0;flex-direction:column;gap:0;margin:0;padding:4px var(--bok) 16px;background:var(--papier);box-shadow:0 24px 40px -24px rgba(0,0,0,.25)}
  .menu a{padding:12px 0;border-radius:0;font-size:1.2rem;font-weight:600;color:var(--tusz)}
  .menu a:hover{background:none}
  .naglowek.otwarte .menu{display:flex}
  .naglowek-w .przycisk-maly{margin-left:auto}
  .menu-przycisk{display:block}
  .hero{padding-top:28px}
  .hero-glowa{grid-template-columns:minmax(0,1fr)}
  .scena{--mac:88%;margin-top:40px}
  .scena > .macbook{margin-right:0}
  .scena > .iphone{left:0}
  .start{grid-template-columns:minmax(0,1fr);gap:40px}
  /* cztery kadry na telefonie przewija się w bok, jak karty rzeczy: każdy gra, gdy wjedzie na ekran */
  .sposoby{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72vw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--bok) * -1);padding-inline:var(--bok);scroll-padding-inline:var(--bok)}
  .sposoby::-webkit-scrollbar{display:none}
  .sposob{scroll-snap-align:start}
  .karty-rzeczy{grid-auto-columns:62vw}
  .z-bliska .kadr{--proporcja:1}
  .kadr-ruch{--proporcja:.84;--tel-w:62cqw;--tel-x:19cqw;--tel-y:8cqw}
  .pytania summary{padding:18px 20px;font-size:1.06rem}
  .pytania p{padding:0 20px 20px}
  .stopka-linki{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;width:100%}
  .biurko{margin-top:48px;padding-top:calc(var(--szer-b) * .34)}
  .rzut{--w:calc(var(--k,1) * clamp(52px,18.5cqw,120px));left:var(--xm,var(--x));top:var(--ym,var(--y))}
  .rzut.szeroko{display:none}
  .rzut-podpowiedz{height:28px;margin-bottom:12px;padding:0 11px 0 9px;font-size:.8rem}
}

/* przy ograniczonym ruchu każdy stan kadru to zatrzymana klatka: panel, plik i szyfr stoją w miejscu */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slowo{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-wej]{opacity:1;transform:none}
  .js .scena .m-okno{animation:none}
  .kadr-mac[data-stan="2"] .k-przylot,.kadr-mac[data-stan="3"] .k-skopiowano,.kadr-mac[data-stan="4"] .k-plik,.kadr-kod[data-stan="3"] .k-szyfr,.kadr-claude.poleciala[data-stan="3"] .k-sesja{animation:none;opacity:1}
}