/* ============ TOKENY ============ */
:root{
  --bg:#0B0B0C; --bg-2:#131315; --ink:#ECE8E1; --ink-2:#A9A39A; --line:rgba(236,232,225,.12);
  --line-2:rgba(236,232,225,.22); --hover:rgba(236,232,225,.08); --nav-bg:rgba(18,18,20,.85); --nav-ink:#BDB7AE;
  --glass:rgba(20,20,22,.7); --glass-hover:rgba(40,40,44,.85); --soft:rgba(255,255,255,.02);
  --note-bg:rgba(30,30,34,.96); --note-ink:#fff; --note-ink-2:rgba(255,255,255,.85); --note-ink-3:rgba(255,255,255,.55);
  --svc-line:rgba(11,11,12,.14); --dot:rgba(236,232,225,.25); --path-end:#ECE8E1;
  --hot-text:linear-gradient(100deg,#FF4D2E 0%,#FF8A3D 45%,#FFC46B 100%); --accent-text:#FF8A3D;
  --light:#F4F1EC; --light-ink:#0B0B0C;
  --hot-1:#FF4D2E; --hot-2:#FF8A3D; --hot-3:#FFC46B;
  --hot:linear-gradient(100deg,var(--hot-1) 0%,var(--hot-2) 45%,var(--hot-3) 100%);
  --silver:linear-gradient(180deg,#6B6A70 0%,#E9E5DE 100%);
  --display:'Archivo',system-ui,sans-serif; --sans:'Inter Tight',system-ui,sans-serif;
  --pad:clamp(16px,4vw,48px); --max:1320px; --r:clamp(24px,4vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:90px;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal;background:var(--hot-text);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid var(--hot-2);outline-offset:4px;border-radius:8px}
.pill:focus-visible{outline:3px solid #fff;outline-offset:3px}
.light-focus :focus-visible,.services :focus-visible{outline-color:var(--light-ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px}
.skip:focus{left:10px}
::selection{background:var(--hot-1);color:#fff}

/* ============ TYPOGRAFIA ============ */
.mega{font:900 clamp(56px,13.5vw,230px)/.86 var(--display);font-stretch:72%;text-transform:uppercase;letter-spacing:-.025em}
.mega--mid{font-size:clamp(52px,12vw,190px);text-align:center}
.grad,.hero__title .line{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font:800 clamp(34px,5vw,72px)/.98 var(--display);font-stretch:80%;text-transform:uppercase;letter-spacing:-.02em}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}

/* ============ PRZYCISKI ============ */
.pill{min-height:44px;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 22px;font:500 14px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s;will-change:transform}
.pill span{position:relative;z-index:1;display:block;transition:transform .3s var(--ease)}
.pill--big{padding:20px 34px;font-size:15px}
.pill--glow{color:#1A0905;font-weight:600;background:linear-gradient(120deg,#FF5A36 0%,var(--hot-2) 55%,var(--hot-3) 100%);box-shadow:inset 3px 3px 14px rgba(255,236,200,.5),0 10px 30px -10px rgba(255,77,46,.65);outline:1.5px solid rgba(255,255,255,.55);outline-offset:-4px}
.pill--glow:hover{box-shadow:inset 3px 3px 14px rgba(255,196,107,.6),0 18px 46px -10px rgba(255,77,46,.85)}
.pill--ghost{border:1.5px solid var(--line);color:var(--ink)}
.pill--ghost:hover{background:var(--hover);border-color:var(--line-2)}

/* ============ NAWIGACJA ============ */
.nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:100;width:min(calc(100% - 24px),980px);display:flex;align-items:center;gap:18px;padding:8px 8px 8px 22px;border-radius:999px;background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);transition:translate .5s var(--ease)}
.nav--hide{translate:-50% -140%}
.nav:focus-within{translate:-50% 0}
.logo{display:inline-block;padding:14px 0;font:800 19px/1 var(--display);font-stretch:85%;letter-spacing:-.01em}
.logo b{color:var(--hot-1)}
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:18px;list-style:none}
.nav ul a{display:inline-block;padding:10px 4px;font-size:14px;color:var(--nav-ink);transition:color .2s}
.nav ul a:hover{color:var(--ink)}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) clamp(28px,4vw,48px);overflow:hidden;isolation:isolate}
.paths{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.55}
.paths path{fill:none;stroke-linecap:round;animation:flow var(--t) linear infinite}
@keyframes flow{from{stroke-dashoffset:0}to{stroke-dashoffset:var(--len)}}
.hero__glow{position:absolute;z-index:-1;width:70vw;height:70vw;left:50%;top:-30vw;translate:-50% 0;background:radial-gradient(closest-side,rgba(255,77,46,.22),transparent 70%);filter:blur(10px);pointer-events:none}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);margin-bottom:auto}
.dot{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ping 2s infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 10px rgba(61,220,132,0)}}
.hero__title{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(48px,11.4vw,200px);margin:clamp(40px,8vh,90px) 0 clamp(28px,4vw,48px)}
.hero__title .line{display:block;white-space:nowrap}
.hero__title .split--hot{background:var(--hot-text);-webkit-background-clip:text;background-clip:text}
.hero__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.hero__lead{max-width:430px;color:var(--ink-2);font-size:clamp(15px,1.3vw,18px)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.float{position:absolute;z-index:-1;width:clamp(120px,13vw,210px);aspect-ratio:390/844;border-radius:28px;overflow:hidden;border:6px solid #1D1D20;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);transition:translate .8s var(--ease)}
.float img{width:100%;height:100%;object-fit:cover;object-position:top}
.float--a{right:9%;top:16%;rotate:8deg}
.float--b{right:24%;top:30%;rotate:-7deg;width:clamp(100px,10vw,160px);opacity:.9}

/* wejścia przy załadowaniu */
.in-load{opacity:0;translate:0 24px;animation:inLoad 1s var(--ease) var(--d,0s) forwards}
.in-load.done{animation:none;opacity:1;translate:none}
@keyframes inLoad{to{opacity:1;translate:0 0}}
/*old*/.split .ch{background:inherit;background-size:calc(var(--n) * 100%) 100%;background-position:calc(var(--i) / max(var(--n) - 1, 1) * 100%) 0;-webkit-background-clip:text;background-clip:text}
.contact__title .split{background:inherit}
.split{display:inline-block;clip-path:inset(-30% -6% 100% -6%);transform:translateY(45%);opacity:0;transition:clip-path 1.2s var(--ease) var(--base,0s),transform 1.2s var(--ease) var(--base,0s),opacity .5s ease var(--base,0s)}
.split.go{clip-path:inset(-30% -6% -30% -6%);transform:none;opacity:1}
.hero__title .line{display:block;padding:.2em .04em .12em;margin:-.2em -.04em -.12em}
.contact__title .split{padding:.2em .04em .12em;margin:-.2em -.04em -.12em}
.split .sp{display:inline-block;width:.25em}
.split .w{display:inline-block;white-space:nowrap;background:inherit;-webkit-background-clip:text;background-clip:text}
.split .ch{padding:.16em .02em .08em;margin:-.16em -.02em -.08em}
.mega{padding-top:.08em}

/* ============ EKRAN 3D ============ */
.device-wrap{padding:clamp(80px,12vw,160px) var(--pad) 0;perspective:1200px;text-align:center}
.device-head{max-width:900px;margin:0 auto clamp(30px,5vw,60px)}
.device{max-width:1100px;margin:0 auto;transform-origin:50% 0;transform:rotateX(var(--rx,24deg)) scale(var(--sc,1.04));will-change:transform}
.device__screen{border-radius:clamp(16px,2.4vw,30px);padding:clamp(6px,1vw,12px);background:#1D1D20;border:1px solid #2C2C30;box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,0 84px 50px #00000026,0 149px 60px #0000000a}
.device__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#F2EFEA;border-radius:clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px) 0 0}
.device__bar i{width:10px;height:10px;border-radius:50%;background:#D6D0C6}
.device__bar span{margin:0 auto;font-size:12px;color:#6A645B;background:#fff;border-radius:6px;padding:3px 18px}
.device__view{aspect-ratio:16/9.4;overflow:hidden;border-radius:0 0 clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px);background:#fff}
.device__view img{width:100%;animation:autoscroll 26s ease-in-out infinite alternate}
@keyframes autoscroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--end,0))}}

/* ============ RZĘDY ============ */
.rows{padding:clamp(80px,12vw,170px) 0 clamp(40px,6vw,80px);display:grid;gap:14px;overflow:hidden}
.row{display:flex;gap:14px;width:max-content;will-change:transform}
.row img{width:clamp(260px,29vw,420px);aspect-ratio:1440/900;object-fit:cover;object-position:top;border-radius:18px;flex:none}

/* ============ O MNIE ============ */
.about{position:relative;overflow:clip;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(36px,5vw,64px);padding:clamp(80px,10vw,140px) var(--pad);text-align:center}
@keyframes bob{50%{transform:translateY(-22px) rotate(8deg)}}
.chars{max-width:760px;font:500 clamp(20px,2.4vw,32px)/1.4 var(--sans);letter-spacing:-.01em}
.chars .c{opacity:.16;transition:opacity .25s linear}
.chars .c.on{opacity:1}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);width:min(100%,960px)}
.stat{border:1px solid var(--line);border-radius:24px;padding:26px 20px;background:var(--soft)}
.stat b{display:block;font:900 clamp(44px,5vw,76px)/1 var(--display);font-stretch:75%;background:var(--hot-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.35}


/* ---- iPhone (tytan, Dynamic Island, obrót 3D przy przewijaniu) ---- */
.iphone{position:absolute;right:clamp(24px,5vw,90px);top:40%;width:clamp(170px,14vw,230px);aspect-ratio:390/844;translate:0 -50%;perspective:1400px;pointer-events:none}
.iphone__body{position:absolute;inset:0;border-radius:18%/8.4%;padding:3.4%;background:linear-gradient(140deg,#9A9AA2 0%,#3B3B40 18%,#CFCFD6 34%,#4A4A50 52%,#A6A6AE 70%,#2C2C31 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 60px 90px -30px rgba(0,0,0,.9),0 30px 60px -20px rgba(255,77,46,.25);transform:rotateY(var(--ry,-22deg)) rotateX(var(--rx2,8deg)) rotateZ(var(--rz,-4deg));transform-style:preserve-3d}
@keyframes hover{50%{translate:0 -14px}}
.iphone__screen{position:relative;width:100%;height:100%;border-radius:15%/7%;overflow:hidden;background:#000;box-shadow:inset 0 0 0 3px #050505}
.iphone__screen img{width:100%;animation:phoneScroll 14s ease-in-out infinite alternate}
@keyframes phoneScroll{0%,15%{transform:translateY(0)}85%,100%{transform:translateY(-38%)}}
.iphone__glare{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);background-size:250% 100%;background-position:var(--gx,100%) 0;mix-blend-mode:screen}
.iphone__btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(#5A5A60,#B9B9C0,#5A5A60)}
.iphone__btn--a{left:-2px;top:20%;height:5%}.iphone__btn--b{left:-2px;top:28%;height:9%}.iphone__btn--c{right:-2px;top:26%;height:12%}
.island{position:absolute;top:2.4%;left:50%;translate:-50% 0;height:5.6%;width:34%;border-radius:999px;background:#000;display:flex;align-items:center;gap:6%;padding:0 4%;overflow:hidden;animation:island 7s cubic-bezier(.5,1.6,.4,1) infinite}
@keyframes island{0%,22%{width:34%;height:5.6%}32%,72%{width:88%;height:8.5%}82%,100%{width:34%;height:5.6%}}
.island__ring{flex:none;width:clamp(14px,1.4vw,22px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--hot-1),var(--hot-3),var(--hot-1));opacity:0;animation:islandIn 7s infinite}
.island__txt{flex:1;font:600 clamp(8px,.8vw,12px)/1 var(--sans);color:#fff;white-space:nowrap;opacity:0;animation:islandIn 7s infinite}
.island__wave{display:flex;gap:2px;align-items:center;height:40%;opacity:0;animation:islandIn 7s infinite}
.island__wave i{width:2px;height:100%;border-radius:2px;background:#3DDC84;animation:wave .9s ease-in-out infinite alternate}
.island__wave i:nth-child(2){animation-delay:.15s}.island__wave i:nth-child(3){animation-delay:.3s}.island__wave i:nth-child(4){animation-delay:.45s}
@keyframes wave{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes islandIn{0%,30%{opacity:0}38%,66%{opacity:1}72%,100%{opacity:0}}


/* Zdjęcie na ekranie iPhone'a jako „plakat kontaktu” z iOS */
.iphone__screen .poster__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;animation:none;transform:none}
.poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:13% 8% 9%;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 58%,rgba(0,0,0,.7) 100%)}
.poster__time{position:absolute;top:3.4%;left:11%;font:600 clamp(9px,.8vw,12px)/1 -apple-system,BlinkMacSystemFont,'Inter Tight',sans-serif;opacity:.9}
.poster__name{margin-top:0;font:800 clamp(30px,3.2vw,46px)/.95 var(--display);font-stretch:82%;letter-spacing:-.01em;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.poster__role{font:500 clamp(9px,.75vw,11px)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:4px}
.poster__btns{margin-top:10%;display:flex;width:100%;justify-content:space-between;padding:0 6%}
.call{display:flex;flex-direction:column;align-items:center;gap:5px}
.call i{width:clamp(34px,3.2vw,46px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.call svg{width:48%;height:48%;fill:#fff}
.call--no i{background:#FF3B30}
.call--yes i{background:#34C759;animation:ring 2.4s ease-in-out infinite}
.call small{font:500 clamp(8px,.7vw,10.5px)/1 -apple-system,BlinkMacSystemFont,'Inter Tight',sans-serif;color:#fff}
@keyframes ring{0%,60%,100%{box-shadow:0 6px 16px rgba(0,0,0,.35),0 0 0 0 rgba(52,199,89,.55)}30%{box-shadow:0 6px 16px rgba(0,0,0,.35),0 0 0 10px rgba(52,199,89,0)}}

/* ---- Powiadomienia iOS (Liquid Glass) ---- */
.notes{position:absolute;left:clamp(16px,3vw,60px);top:22%;width:clamp(240px,20vw,300px);height:120px;pointer-events:none}
.note{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:24px;text-align:left;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),var(--note-bg);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 20px 40px -18px rgba(0,0,0,.8);transform-origin:50% 0;opacity:0;transform:translateY(-26px) scale(.9);transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .5s ease,filter .5s ease}
.note[data-pos="3"]{opacity:0;transform:translateY(40px) scale(.8);transition:transform .5s ease,opacity .2s ease}
.note[data-pos="in"]{transition:none;opacity:0;transform:translateY(-30px) scale(.92)}
.note[data-pos="0"]{opacity:1;transform:none;z-index:3;transition-delay:.12s}
.note[data-pos="1"] p,.note[data-pos="2"] p,.note[data-pos="1"] b,.note[data-pos="2"] b{opacity:0;transition:opacity .3s}
.note[data-pos="1"]{opacity:.75;transform:translateY(16px) scale(.94);z-index:2;filter:blur(.3px)}
.note[data-pos="2"]{opacity:.35;transform:translateY(30px) scale(.88);z-index:1;filter:blur(.6px)}
.note__icon{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.note__icon--form{background:linear-gradient(180deg,#FF8A3D,#FF4D2E)}
.note__icon--shop{background:linear-gradient(180deg,#5AC8FA,#0A84FF)}
.note__icon--mail{background:linear-gradient(180deg,#B48CFF,#7A4DF5)}
.note__icon--call{background:linear-gradient(180deg,#65E58A,#2FBF5B)}
.note b{display:flex;justify-content:space-between;gap:8px;font:600 13.5px/1.2 var(--sans);color:var(--note-ink)}
.note b i{font-style:normal;font-weight:400;color:var(--note-ink-3);font-size:12px}
.note p{font-size:13.5px;line-height:1.3;color:var(--note-ink-2);margin-top:2px}
@media (max-width:1180px){
  .iphone{position:relative;right:auto;top:auto;translate:none;width:min(210px,52vw);order:-1;margin:0 auto}
  .notes{position:relative;left:auto;top:auto;width:min(320px,100%);height:96px;order:-2;margin-bottom:-10px}
}



/* ============ USŁUGI (jasne) ============ */
.services{background:var(--light);color:var(--light-ink);border-radius:var(--r) var(--r) 0 0;padding:clamp(80px,10vw,140px) var(--pad) clamp(120px,14vw,200px)}
.services .mega{margin-bottom:clamp(40px,7vw,100px)}
.svc{list-style:none;max-width:1100px;margin:0 auto}
.svc__item{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,4vw,56px);align-items:center;padding:clamp(26px,3.5vw,48px) 0;border-top:1px solid var(--svc-line)}
.svc__item:last-child{border-bottom:1px solid var(--svc-line)}
.svc__item::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--hot);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.svc__item:hover::after{transform:scaleX(1)}
.svc__num{font:900 clamp(56px,9vw,140px)/.8 var(--display);font-stretch:70%;transition:color .4s}
.svc__item:hover .svc__num{color:var(--svc-hot,#B8341A)}
.svc h3{font:700 clamp(22px,2.4vw,34px)/1.1 var(--display);font-stretch:90%;text-transform:uppercase;margin-bottom:10px}
.svc p{opacity:.62;max-width:620px;font-size:clamp(15px,1.3vw,18px)}
.svc__price{font:600 15px/1 var(--sans);border:1.5px solid var(--light-ink);border-radius:999px;padding:12px 18px;white-space:nowrap}

/* ============ REALIZACJE (stos) ============ */
.projects{position:relative;z-index:2;background:var(--bg);border-radius:var(--r) var(--r) 0 0;margin-top:calc(var(--r) * -1);padding:clamp(80px,10vw,140px) var(--pad) clamp(60px,8vw,120px)}
.projects__lead{text-align:center;color:var(--ink-2);margin:18px 0 clamp(40px,6vw,80px)}
.stack{max-width:var(--max);margin:0 auto}
.card-wrap{padding-bottom:45vh}
.card-wrap:nth-last-child(2){padding-bottom:0}
.card-wrap:last-child{padding:clamp(120px,14vw,220px) 0 0}
.card-wrap:last-child .card{position:relative;top:0;transform:none}
.card{position:sticky;top:calc(96px + var(--i) * 26px);transform-origin:50% 0;transform:scale(var(--s,1));border:1.5px solid var(--line-2);background:var(--bg-2);border-radius:var(--r);padding:clamp(16px,2.4vw,32px);will-change:transform}
.card__top{display:flex;align-items:center;gap:clamp(14px,2.5vw,32px);flex-wrap:wrap;margin-bottom:clamp(16px,2vw,26px)}
.card__num{font:900 clamp(54px,7vw,110px)/.8 var(--display);font-stretch:70%;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.card__meta small{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);margin-bottom:6px}
.card__meta h3{font:800 clamp(26px,3.2vw,48px)/1 var(--display);font-stretch:85%;text-transform:uppercase}
.card__top .pill{margin-left:auto}
.card__grid{display:grid;grid-template-columns:4fr 6fr;gap:clamp(10px,1.4vw,18px)}
.card__col{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-rows:auto auto 1fr}
.card__shot{border-radius:clamp(16px,2.4vw,36px);overflow:hidden;background:#fff}
.card__shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.card__shot--sm{aspect-ratio:16/10}
.card__shot--tall{position:relative;height:clamp(300px,31vw,440px)}
.card__shot--tall img{height:auto;transition:transform var(--t,8s) cubic-bezier(.45,0,.3,1)}
.card__shot--tall:hover img,.card__shot--tall:focus-visible img{transform:translateY(var(--dy,0))}
.card__info{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(16px,2.5vw,36px);margin-top:clamp(16px,2vw,26px);padding-top:clamp(16px,2vw,26px);border-top:1px solid var(--line)}
.card__info p{color:var(--ink-2);font-size:15.5px}
.card__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card__nums div{border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.card__nums b{display:block;font:800 clamp(18px,1.8vw,26px)/1.1 var(--display);font-stretch:80%;white-space:nowrap}
.card__nums span{font-size:12.5px;color:var(--ink-2);line-height:1.3;display:block;margin-top:4px}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.card__tags span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--ink-2)}
.card--cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;min-height:min(70vh,560px);background:radial-gradient(120% 120% at 100% 0%,rgba(255,77,46,.35),transparent 55%),var(--bg-2);border-style:dashed}
.card--cta h3{font:900 clamp(40px,7vw,110px)/.9 var(--display);font-stretch:72%;text-transform:uppercase}
.card--cta p{max-width:520px;color:var(--ink-2);font-size:18px}

/* ============ PROCES (spotlight) ============ */
.process,.faq{max-width:var(--max);margin:0 auto;padding:clamp(80px,10vw,140px) var(--pad)}
.process .h2,.faq .h2{max-width:900px;margin-bottom:clamp(36px,5vw,64px)}
.spots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.spot{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;padding:30px 26px 34px;background:var(--bg-2);isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--x,50%) var(--y,-100%),rgba(255,138,61,.22),transparent 60%);opacity:0;transition:opacity .4s}
.spot:hover::before{opacity:1}
.spot span{font:900 54px/1 var(--display);font-stretch:70%;background:var(--hot-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.spot h3{font:700 22px/1.15 var(--display);font-stretch:90%;text-transform:uppercase;margin:44px 0 10px}
.spot p{color:var(--ink-2);font-size:15.5px}

/* ============ FAQ ============ */
.faq__list{max-width:900px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:26px 56px 26px 0;font:600 clamp(19px,2vw,26px)/1.25 var(--display);font-stretch:92%;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:34px;height:34px;translate:0 -50%;border-radius:50%;border:1px solid var(--line);background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:rotate .4s var(--ease),background-color .3s}
.faq details[open] summary::after{rotate:45deg;background-color:var(--hot-1)}
.faq details p{color:var(--ink-2);padding:0 0 28px;max-width:720px}

/* ============ KONTAKT ============ */
.contact{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:clamp(100px,14vw,200px) var(--pad);border-top:1px solid var(--line)}
.paths--contact{opacity:.4}
.contact__title{font-size:clamp(34px,10.4vw,190px);background:var(--hot-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin:10px 0 26px}
.contact__lead{color:var(--ink-2);font-size:clamp(17px,1.6vw,21px);margin-bottom:40px}
.contact__ways{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.foot a{padding:13px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--pad);border-top:1px solid var(--line);color:var(--ink-2);font-size:14px}

/* ============ POJAWIANIE ============ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stats .reveal:nth-child(2),.svc .reveal:nth-child(2),.spots .reveal:nth-child(2){transition-delay:.1s}
.stats .reveal:nth-child(3),.svc .reveal:nth-child(3),.spots .reveal:nth-child(3){transition-delay:.2s}
.spots .reveal:nth-child(4){transition-delay:.3s}

/* ============ RESPONSYWNOŚĆ ============ */
@media (max-width:1024px){
  .spots{grid-template-columns:1fr 1fr}
  .card__info{grid-template-columns:1fr}
  /* telefony w hero: para w całości na ekranie */
  .float--a{right:calc(var(--pad) + 12px);top:clamp(150px,19vh,230px);width:clamp(100px,22vw,190px)}
  .float--b{display:block;right:calc(var(--pad) + 12px + clamp(70px,15vw,140px));top:calc(clamp(150px,19vh,230px) + clamp(40px,6vw,80px));width:clamp(84px,18vw,150px)}
}
@media (max-width:760px){
  .nav{padding-left:18px}
  .nav nav{display:none}
  .nav .pill{margin-left:auto}
  .hero{padding-top:110px;padding-bottom:84px}
  .hero__title{font-size:clamp(46px,15vw,90px)}
  .hero__title .line{white-space:normal}
  .float--a{width:clamp(96px,26vw,150px)}
  .float--b{width:clamp(80px,21vw,120px);right:calc(var(--pad) + 12px + clamp(64px,18vw,110px))}
  .stats{grid-template-columns:1fr}
  .svc__item{grid-template-columns:auto 1fr}
  .svc__price{grid-column:2;justify-self:start}
  .card-wrap,.card-wrap:last-child{padding:0;margin-bottom:18px}
  .card{position:relative;top:0;transform:none}
  .card__grid{grid-template-columns:1fr}
  .card__col{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .card__shot--tall{height:420px}
  .card__nums{grid-template-columns:1fr 1fr 1fr}
  .card__top .pill{margin-left:0}
  .spots{grid-template-columns:1fr}
  .pill--big{padding:18px 24px;font-size:13.5px}
  .contact__ways .pill{width:100%}
  .foot{flex-direction:column}
}

/* ================== EFEKTY „APPLE” ================== */
/* Poświata w stylu Apple Intelligence */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.ai-glow{isolation:isolate}
.device__screen{position:relative}
.ai-glow::before,.ai-glow::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang),#FF4D2E,#FFC46B,#B48CFF,#5AC8FA,#65E58A,#FF4D2E);animation:spin 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.ai-glow::after{inset:-10px;padding:10px;filter:blur(22px);opacity:.55;z-index:-1}
@keyframes spin{to{--ang:360deg}}

/* Hero oddala się przy przewijaniu */
.hero__title,.hero__bottom,.badge{will-change:transform,opacity,filter}

/* Opowieść z przypiętym iPhone'em */
.story{height:420vh;position:relative}
.story__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr auto 80px;align-items:center;gap:clamp(30px,6vw,100px);max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.story__steps{list-style:none;position:relative;min-height:340px}
.story__steps li{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(40px);filter:blur(10px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);pointer-events:none}
.story__steps li.is-on{opacity:1;transform:none;filter:none;pointer-events:auto}
.story__steps li.is-past{transform:translateY(-40px)}
.story__steps span{font:900 clamp(80px,10vw,150px)/.8 var(--display);font-stretch:70%;background:var(--hot-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.story__steps h3{font:800 clamp(34px,4.4vw,64px)/.95 var(--display);font-stretch:80%;text-transform:uppercase;margin:22px 0 16px}
.story__steps p{color:var(--ink-2);font-size:clamp(17px,1.5vw,21px);max-width:440px}
.sphone{height:min(78vh,660px);aspect-ratio:390/844;border-radius:18%/8.4%;padding:3.2%;background:linear-gradient(140deg,#9A9AA2 0%,#3B3B40 18%,#CFCFD6 34%,#4A4A50 52%,#A6A6AE 70%,#2C2C31 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 80px 120px -40px rgba(0,0,0,.9),0 0 120px -20px rgba(255,77,46,.35);transform:rotateY(var(--sy,0deg)) scale(var(--ss,1));transition:transform .2s linear}
.sp__screen{position:relative;width:100%;height:100%;border-radius:15%/7%;overflow:hidden;background:#F2F2F7}
.sp__island{position:absolute;top:2.2%;left:50%;translate:-50% 0;width:32%;height:4.6%;border-radius:999px;background:#000;z-index:5}
.scr{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.scr.is-on{opacity:1;transform:none}
.scr--img img{width:100%;height:100%;object-fit:cover;object-position:top}
.scr--chat{background:#fff;padding:22% 6% 6%;display:flex;flex-direction:column;gap:8px;font:400 13px/1.35 -apple-system,BlinkMacSystemFont,'Inter Tight',sans-serif}
.chat__head{display:flex;flex-direction:column;align-items:center;gap:3px;margin:-8% 0 6%;color:#111}
.chat__ava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(180deg,#FF8A3D,#FF4D2E)}
.chat__head small{color:#6C6C70;font-size:10.5px}
.msg{max-width:82%;padding:8px 12px;border-radius:18px;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.msg--in{align-self:flex-start;background:#E9E9EB;color:#111;border-bottom-left-radius:6px}
.msg--out{align-self:flex-end;background:#0062CC;color:#fff;border-bottom-right-radius:6px}
.msg--typing{align-self:flex-start;background:#E9E9EB;display:flex;gap:4px;padding:11px 12px}
.msg--typing i{width:7px;height:7px;border-radius:50%;background:#8E8E93;animation:typing 1.2s infinite}
.msg--typing i:nth-child(2){animation-delay:.2s}.msg--typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.scr--chat.is-on .msg{opacity:1;transform:none}
.scr--chat.is-on .msg:nth-of-type(2){transition-delay:.15s}.scr--chat.is-on .msg:nth-of-type(3){transition-delay:.9s}
.scr--chat.is-on .msg:nth-of-type(4){transition-delay:1.7s}.scr--chat.is-on .msg:nth-of-type(5){transition-delay:2.5s}.scr--chat.is-on .msg:nth-of-type(6){transition-delay:3.2s}
.scr--notes{background:#fff;padding:19% 7% 7%;font:400 13px/1.35 -apple-system,BlinkMacSystemFont,'Inter Tight',sans-serif;color:#1C1C1E}
.notes__bar{display:flex;justify-content:space-between;color:#8A6400;font-size:13px;font-weight:500;margin-bottom:12%}
.notes__done{font-weight:600}
.scr--notes h4{font:700 21px/1.15 -apple-system,BlinkMacSystemFont,'Inter Tight',sans-serif;letter-spacing:-.01em}
.notes__sub{color:#6C6C70;font-size:11.5px;margin:4px 0 10%}
.todo{list-style:none;display:grid;gap:11px}
.todo li{display:flex;align-items:flex-start;gap:9px;opacity:.45;transition:opacity .4s ease}
.todo i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #C7C7CC;position:relative;transition:background .35s,border-color .35s}
.todo i::after{content:"";position:absolute;left:5.5px;top:2.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.scr--notes.is-on .todo li{opacity:1}
.scr--notes.is-on .todo i{background:#FF8A3D;border-color:#FF8A3D}
.scr--notes.is-on .todo i::after{transform:rotate(45deg) scale(1)}
.scr--notes.is-on .todo li:nth-child(1),.scr--notes.is-on .todo li:nth-child(1) i,.scr--notes.is-on .todo li:nth-child(1) i::after{transition-delay:0.75s}
.scr--notes.is-on .todo li:nth-child(2),.scr--notes.is-on .todo li:nth-child(2) i,.scr--notes.is-on .todo li:nth-child(2) i::after{transition-delay:1.20s}
.scr--notes.is-on .todo li:nth-child(3),.scr--notes.is-on .todo li:nth-child(3) i,.scr--notes.is-on .todo li:nth-child(3) i::after{transition-delay:1.65s}
.scr--notes.is-on .todo li:nth-child(4),.scr--notes.is-on .todo li:nth-child(4) i,.scr--notes.is-on .todo li:nth-child(4) i::after{transition-delay:2.10s}
.scr--notes.is-on .todo li:nth-child(5),.scr--notes.is-on .todo li:nth-child(5) i,.scr--notes.is-on .todo li:nth-child(5) i::after{transition-delay:2.55s}
.scr--notes.is-on .todo li:nth-child(6),.scr--notes.is-on .todo li:nth-child(6) i,.scr--notes.is-on .todo li:nth-child(6) i::after{transition-delay:3.00s}
.draft{margin-top:9%;padding:14px;border-radius:16px;background:#1C1C1E;color:#fff;opacity:0;transform:translateY(16px);transition:opacity .5s ease 3.4s,transform .7s cubic-bezier(.34,1.56,.64,1) 3.4s}
.scr--notes:not(.is-on) .draft{transition-delay:0s}
.scr--notes.is-on .draft{opacity:1;transform:none}
.draft small{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#C7C7CC;margin-bottom:6px}
.draft b{display:block;font:700 15px/1.25 -apple-system,BlinkMacSystemFont,'Inter Tight',sans-serif;margin-bottom:10px}
.draft span{display:inline-block;padding:7px 12px;border-radius:999px;font-size:11.5px;font-weight:600;color:#1A0905;background:linear-gradient(120deg,#FF5A36,#FFC46B)}
.scr--img img{transition:transform 6s ease-in-out}
.scr--img.is-on img{transform:translateY(-12%)}
.live{position:absolute;left:5%;right:5%;top:9%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:rgba(245,245,247,.82);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 10px 30px -10px rgba(0,0,0,.4);transform:translateY(-140%);transition:transform .7s cubic-bezier(.34,1.56,.64,1) .4s}
.scr--live.is-on .live{transform:none}
.live__icon{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(180deg,#65E58A,#2FBF5B)}
.live b{display:block;font:600 12.5px/1.2 -apple-system,'Inter Tight',sans-serif;color:#111}
.live p{font:400 12px/1.3 -apple-system,'Inter Tight',sans-serif;color:#333}
.story__dots{display:grid;gap:12px;justify-items:center}
.story__dots i{width:8px;height:8px;border-radius:999px;background:var(--dot);transition:height .5s var(--ease),background .5s}
.story__dots i.is-on{height:36px;background:var(--hot-2)}
.process{display:none}

/* Okno rozszerzające się do pełnego ekranu */
.expand{height:260vh;position:relative}
.expand__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.expand__media{position:absolute;inset:0;overflow:hidden;border-radius:var(--er,40px);transform:scale(var(--es,.42)) translateZ(0);will-change:transform;backface-visibility:hidden}
.expand__media img{width:100%;height:100%;object-fit:cover;object-position:top}
.expand__shade{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(11,11,12,.15),rgba(11,11,12,.75))}
.expand__word{position:relative;z-index:2;grid-area:1/1;font:900 clamp(56px,13vw,230px)/.86 var(--display);font-stretch:72%;text-transform:uppercase;color:#fff;text-shadow:0 10px 60px rgba(0,0,0,.55);will-change:transform}
.expand__word--l{transform:translateX(calc(-50% - .14em - var(--sx,0vw)))}
.expand__word--r{transform:translateX(calc(50% + .14em + var(--sx,0vw)))}

@media (max-width:900px){
  .story{display:none}
  .process{display:block}
  .expand{height:200vh}
}
@media (prefers-reduced-motion:reduce){
  .story{height:auto}.story__pin{position:relative;height:auto;padding:80px var(--pad)}
  .story__steps li{position:relative;opacity:1;filter:none;transform:none;margin-bottom:30px}
  .story__phone,.story__dots{display:none}
  .expand{display:none}
  html.touch .row{animation:none}
  .ai-glow::before,.ai-glow::after{animation:none}
}


/* ================== MOTYW JASNY ================== */
html[data-theme="light"]{
  --bg:#F6F3EE; --bg-2:#FFFFFF; --ink:#141210; --ink-2:#5A544C; --line:rgba(20,18,16,.12);
  --line-2:rgba(20,18,16,.18); --hover:rgba(20,18,16,.06); --nav-bg:rgba(255,255,255,.82); --nav-ink:#3E3A35;
  --glass:rgba(255,255,255,.75); --glass-hover:rgba(255,255,255,.95); --soft:#FFFFFF;
  --note-bg:rgba(255,255,255,.97); --note-ink:#141210; --note-ink-2:#3A3A3C; --note-ink-3:#6C6C70;
  --light:#141210; --light-ink:#F4F1EC; --svc-line:rgba(244,241,236,.16); --svc-hot:#E0532F;
  --dot:rgba(20,18,16,.18); --path-end:#141210;
  --silver:linear-gradient(180deg,#23201C 0%,#6E675E 100%);
  --hot-text:linear-gradient(100deg,#C2321A 0%,#B4470F 50%,#A65A0B 100%); --accent-text:#A8361A;
  color-scheme:light;
}
html[data-theme="light"] .hero__glow{background:radial-gradient(closest-side,rgba(255,138,61,.28),transparent 70%)}
html[data-theme="light"] .paths{opacity:.75}
html[data-theme="light"] .stat,html[data-theme="light"] .spot,html[data-theme="light"] .card{box-shadow:0 1px 0 rgba(20,18,16,.04),0 24px 60px -36px rgba(40,30,20,.35)}
html[data-theme="light"] .card--cta{background:radial-gradient(120% 120% at 100% 0%,rgba(255,138,61,.28),transparent 55%),#FFFFFF}
html[data-theme="light"] .note{border-color:rgba(20,18,16,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 40px -20px rgba(40,30,20,.35)}
html[data-theme="light"] .device__screen{background:#E9E5DE;border-color:#D9D3C9}
html[data-theme="light"] .float{border-color:#E9E5DE;box-shadow:0 40px 80px -30px rgba(40,30,20,.45)}
html[data-theme="light"] .sphone,html[data-theme="light"] .iphone__body{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 70px 110px -40px rgba(40,30,20,.55),0 0 120px -30px rgba(255,138,61,.35)}
html[data-theme="light"] .expand__shade{background:radial-gradient(70% 70% at 50% 50%,rgba(20,18,16,.12),rgba(20,18,16,.6))}
html[data-theme="light"] .contact{background:linear-gradient(180deg,transparent,rgba(255,138,61,.08))}
html[data-theme="light"] .pill--glow{box-shadow:inset 3px 3px 14px rgba(255,236,200,.6),0 12px 30px -12px rgba(255,77,46,.55)}
html[data-theme="light"] .badge{background:#FFFFFF}
html[data-theme="light"] .faq details[open] summary::after{background-color:#FF8A3D}
html[data-theme="light"] .ai-glow::after{opacity:.4}

/* przełącznik motywu */
.theme{position:relative;flex:none;width:58px;height:32px;border-radius:999px;border:1px solid var(--line-2);background:var(--hover);cursor:pointer;padding:0;color:var(--ink)}
.theme__knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2A2A2E,#0B0B0C);box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .55s cubic-bezier(.34,1.56,.64,1),background .4s}
.theme svg{width:14px;height:14px;position:absolute;transition:opacity .35s,transform .55s cubic-bezier(.34,1.56,.64,1)}
.theme .moon{fill:#ECE8E1;opacity:1}
.theme .sun{fill:#1A0905;opacity:0;transform:rotate(-90deg) scale(.5)}
html[data-theme="light"] .theme__knob{transform:translateX(26px);background:linear-gradient(135deg,#FFC46B,#FF8A3D)}
html[data-theme="light"] .theme .moon{opacity:0;transform:rotate(90deg) scale(.5)}
html[data-theme="light"] .theme .sun{opacity:1;transform:none}
.theme::before{content:"";position:absolute;inset:-8px -4px}
.theme:focus-visible{outline:2px solid var(--hot-2);outline-offset:3px}

/* zmiana motywu: koło rozlewa się od przełącznika (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){clip-path:circle(0 at var(--tx,90%) var(--ty,4%));animation:themeIn .8s cubic-bezier(.65,0,.35,1) forwards}
@keyframes themeIn{to{clip-path:circle(150% at var(--tx,90%) var(--ty,4%))}}
html.theme-fade,html.theme-fade *{transition:background-color .5s ease,color .5s ease,border-color .5s ease!important}



/* ===== Telefony i tablety: płynne animacje niezależne od przewijania ===== */
/* boczny pasek zrzutów jedzie sam jak taśma (3 kopie zestawu → przesuw o 1/3 = pętla bez szwu) */
html.touch .row{animation:marqL 45s linear infinite;transform:none}
html.touch .row[data-dir="-1"]{animation-name:marqR;animation-duration:50s}
@keyframes marqL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}
@keyframes marqR{from{transform:translate3d(-33.333%,0,0)}to{transform:translate3d(0,0,0)}}
/* ekran 3D prostuje się raz, gdy wjedzie na ekran */
html.touch .device{transform:rotateX(14deg) scale(.94);transition:transform 1.3s var(--ease)}
html.touch .device.inview{transform:none}
/* iPhone ze zdjęciem: lekki skręt, prostuje się przy wejściu */
html.touch .iphone__body{transform:rotateY(-14deg) rotateX(6deg) rotateZ(-3deg);transition:transform 1.3s var(--ease)}
html.touch .iphone.inview .iphone__body{transform:rotateY(-5deg) rotateX(2deg) rotateZ(-1deg)}
/* „Twoja kolej”: bez przypinania – okno płynnie rośnie raz, słowa lekko się rozsuwają */
html.touch .expand{height:auto}
html.touch .expand__pin{position:relative;height:78svh}
html.touch .expand__media{transform:scale(.8);border-radius:28px;transition:transform 1.6s var(--ease),border-radius 1.6s var(--ease)}
html.touch .expand.inview .expand__media{transform:scale(1);border-radius:0}
html.touch .expand__word{transition:transform 1.6s var(--ease)}
html.touch .expand__word--l{transform:translateX(calc(-50% - .14em))}
html.touch .expand__word--r{transform:translateX(calc(50% + .14em))}
html.touch .expand.inview .expand__word--l{transform:translateX(calc(-50% - .14em - 3vw))}
html.touch .expand.inview .expand__word--r{transform:translateX(calc(50% + .14em + 3vw))}

/* sekcje poza ekranem: animacje uśpione */
.zzz *,.zzz *::before,.zzz *::after{animation-play-state:paused!important}

/* Telefony i tablety: lżejsze efekty, żeby przewijanie było płynne (60 kl./s) */
@media (hover:none),(pointer:coarse){
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,18,20,.95)}
  html[data-theme="light"] .nav{background:rgba(255,255,255,.95)}
  .note,.portrait__tag,.motion{backdrop-filter:none;-webkit-backdrop-filter:none}
  .ai-glow::after{display:none}
  .ai-glow::before{animation-duration:10s}
  .float{transition:none}
  .reveal{transition-duration:.7s}
  .row{will-change:transform}
  .hero__title,.hero__bottom,.badge,.float,.device,.iphone__body{backface-visibility:hidden}
  .island,.island__wave i{animation-duration:9s}
}

/* przycisk pauzy animacji (WCAG 2.2.2) */
.motion{position:fixed;right:16px;bottom:16px;z-index:90;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);transition:background .3s}
.motion:hover{background:var(--glass-hover)}
.motion svg{width:16px;height:16px;fill:currentColor}
.motion .play{display:none}
.motion[aria-pressed="true"] .play{display:block}
.motion[aria-pressed="true"] .pause{display:none}
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}
@media (max-width:420px){
  .nav{gap:10px;padding-left:16px}
  .nav .pill{padding:11px 14px;font-size:12.5px}
  .theme{width:50px;height:30px}
  .theme__knob{width:22px;height:22px}
  html[data-theme="light"] .theme__knob{transform:translateX(20px)}
  .logo{font-size:17px}
  .card{padding:14px}
  .card__nums{grid-template-columns:1fr}
  .card__nums b{white-space:normal}
  .card__info>div{min-width:0}
  .card__tags{min-width:0}
}
@media (max-width:370px){
  .nav .pill{display:none}
  .nav .theme{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.in-load,.split,.split .ch{clip-path:none!important;opacity:1!important;transform:none!important;translate:none!important;filter:none!important}
  .chars .c{opacity:1!important}
  .device{transform:none!important}
}

/* ============ SOCIAL MEDIA (kontakt + stopka) ============ */
.social{margin-top:clamp(56px,7vw,90px)}
.social__label{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.social__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto;perspective:900px}
.soc{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;border-radius:24px;background:var(--glass);border:1px solid var(--line);text-align:left;transform-style:preserve-3d;transition:opacity 1s var(--ease),transform .6s var(--ease),border-color .3s,background .3s;transition-delay:var(--rd,0s),0s,0s,0s}
.soc.in{transition-delay:0s}
/* świecąca obwódka (shine border) */
.soc::before{content:"";position:absolute;inset:0;z-index:-1;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--ang),transparent 0 62%,var(--hot-1) 75%,var(--hot-3) 85%,transparent 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;animation:socSpin 6s linear infinite;transition:opacity .4s}
/* światło za kursorem (spotlight) */
.soc::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,138,61,.16),transparent 70%);opacity:0;transition:opacity .4s}
@keyframes socSpin{to{--ang:360deg}}
.soc:hover{border-color:transparent;background:var(--glass-hover)}
.soc:hover::before{opacity:1;animation-duration:2.6s}
.soc:hover::after{opacity:1}
.soc__ic{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:var(--hover);border:1px solid var(--line);transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .35s,border-color .35s}
.soc__ic svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.8;transition:stroke .35s}
.soc__ic svg .fill{fill:var(--ink);stroke:none;transition:fill .35s}
.soc--ig .soc__ic::after{content:"";position:absolute;inset:-6px;border-radius:21px;border:1.5px solid #E1306C;opacity:0;transform:scale(.8)}
.soc:hover .soc__ic{transform:translateZ(30px) rotate(-8deg) scale(1.08);border-color:transparent}
.soc--ig:hover .soc__ic{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.soc--fb:hover .soc__ic{background:#1877F2}
.soc:hover .soc__ic svg{stroke:#fff}
.soc:hover .soc__ic svg .fill{fill:#fff}
.soc--ig:hover .soc__ic::after{animation:socRing 1.2s var(--ease) infinite}
@keyframes socRing{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.25)}}
.soc__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.soc__txt b{font:600 clamp(19px,1.8vw,23px)/1.15 var(--display);letter-spacing:-.01em}
.soc__txt small{font-size:14px;color:var(--ink-2);line-height:1.4}
.soc__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);font-size:17px;transition:transform .45s var(--ease),background .3s,color .3s,border-color .3s}
.soc:hover .soc__go{transform:translate(3px,-3px) rotate(45deg);background:var(--hot);color:#1A0905;border-color:transparent}
.soc:focus-visible{outline:2px solid var(--hot-2);outline-offset:4px}
/* stopka */
.foot__soc{display:flex;gap:6px;margin-left:auto}
.fsoc{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s}
.foot .fsoc{padding:0}
.fsoc svg{width:19px;height:19px;fill:none;stroke:var(--ink-2);stroke-width:1.8;transition:stroke .3s}
.fsoc svg .fill{fill:var(--ink-2);stroke:none;transition:fill .3s}
.fsoc:hover{transform:translateY(-3px) rotate(-6deg);background:var(--hot);border-color:transparent}
.fsoc:hover svg{stroke:#1A0905}.fsoc:hover svg .fill{fill:#1A0905}
html[data-theme="light"] .soc{box-shadow:0 1px 0 rgba(20,18,16,.04),0 24px 60px -36px rgba(40,30,20,.35)}
@media (max-width:640px){
  .social__grid{grid-template-columns:1fr}
  .soc{padding:16px}
  .soc__ic{width:48px;height:48px;border-radius:15px}
}
@media (hover:none){.soc::before{opacity:.7}}
@media (prefers-reduced-motion:reduce){
  .soc,.soc::before,.soc__ic,.soc__go,.fsoc{animation:none!important;transition:none!important}
  .soc::before{opacity:.6}
  .soc:hover .soc__ic,.fsoc:hover{transform:none}
}
.foot{padding-right:calc(var(--pad) + 60px)}
@media (max-width:760px){.foot{padding:20px var(--pad) 80px;gap:6px}.foot__soc{margin:0}}
@media (max-width:760px) and (max-height:720px){.float{display:none!important}}