/* SOURCE: style.css */
:root{--blue:#224ce8;--ink:#111216;--muted:#667085;--line:rgba(34,76,232,.055);--ease:cubic-bezier(.2,.75,.18,1);--content-width:1300px;--grid-gap:24px;--page-edge:max(32px,calc((100vw - var(--content-width))/2))}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}.hero{height:max(760px,100svh);min-height:760px;position:relative;overflow:hidden;background:radial-gradient(ellipse 34% 43% at -2% 51%,rgba(34,76,232,.114) 0%,rgba(91,126,255,.054) 44%,transparent 75%),radial-gradient(ellipse 38% 40% at 102% 98%,rgba(34,76,232,.132) 0%,rgba(104,139,255,.054) 45%,transparent 76%),radial-gradient(ellipse 32% 30% at 58% 72%,rgba(34,76,232,.065) 0%,transparent 72%),radial-gradient(circle at 58% 70%,#edf3ff 0,rgba(245,248,255,.35) 28%,transparent 55%),#fff;isolation:isolate}.technical-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:clamp(65px,7vw,110px) clamp(65px,7vw,110px);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.72) 72%,transparent 100%);opacity:0;transform:scale(1.08);transition:opacity 1.4s .25s,transform 1.8s .25s var(--ease)}body.loaded .technical-grid{opacity:1;transform:scale(1)}.header{height:90px;position:fixed;z-index:30;top:0;left:var(--page-edge);right:var(--page-edge);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.brand span{display:block;width:180px;max-width:180px;height:42px;background:url('assets/tkinteractive-logo-black.png') left center/contain no-repeat}.header nav{display:flex;padding:5px;border-radius:999px;background:rgba(250,251,253,.64);border:1px solid rgba(129,145,175,.18);box-shadow:0 16px 42px rgba(45,65,98,.06),inset 0 1px rgba(255,255,255,.8);backdrop-filter:blur(24px)}.header nav a{color:#121317;text-decoration:none;font-size:14px;padding:10px 25px;border-radius:999px}.header nav a.active{color:var(--blue);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(34,76,232,.25),0 3px 13px rgba(34,76,232,.05)}.button{display:inline-flex;width:max-content;background:var(--blue);color:#fff;text-decoration:none;border-radius:999px;padding:14px 25px;font-size:14px;box-shadow:0 9px 24px rgba(34,76,232,.16);transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(34,76,232,.26)}.header-cta{justify-self:end}.headline{position:absolute;z-index:10;left:var(--page-edge);top:16%;width:min(636px,49vw)}.headline h1{margin:0;font-size:clamp(50px,5.25vw,88px);line-height:.96;letter-spacing:-.06em;font-weight:500}.headline h1 span,.headline h1 em{display:block}.headline h1 em{color:var(--blue);font-family: Inter, Arial, sans-serif; font-style: normal;font-weight:400}.hero-intro{position:absolute;z-index:10;right:var(--page-edge);top:18%;width:min(305px,23vw);font-size:15px;line-height:1.7}.interaction-scene{position:absolute;z-index:3;left:50%;bottom:-11%;width:min(63vw,950px);aspect-ratio:1.55;transform:translateX(-50%);will-change:transform}.interaction-scene img{position:absolute;z-index:4;width:49%;height:auto;left:28%;top:-3%;transform:rotate(-5deg);filter:drop-shadow(0 25px 25px rgba(34,76,232,.12));will-change:transform}.ripple{position:absolute;z-index:1;left:50%;top:64%;border-radius:50%;border:clamp(5px,.75vw,12px) solid rgba(105,146,255,.24);box-shadow:inset 0 3px 5px rgba(255,255,255,.95),0 3px 9px rgba(34,76,232,.09);transform:translate(-50%,-50%) rotateX(66deg);opacity:.78}.ripple-1{width:25%;height:25%}.ripple-2{width:48%;height:48%}.ripple-3{width:72%;height:72%}.ripple-4{width:96%;height:96%}.impact{position:absolute;left:50%;top:63%;width:17%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(34,76,232,.25),rgba(128,166,255,.06) 45%,transparent 70%);transform:translate(-50%,-50%) rotateX(60deg);filter:blur(8px)}.glass-card{position:absolute;z-index:15;width:min(275px,20vw);padding:29px 28px;border-radius:22px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.92);box-shadow:0 24px 60px rgba(34,53,82,.1),inset 0 1px 0 #fff;backdrop-filter:blur(15px) saturate(125%)}.glass-card strong{display:block;color:var(--blue);font-size:clamp(50px,4.5vw,72px);font-weight:400;line-height:1;letter-spacing:-.06em}.glass-card h2{font-size:18px;margin:15px 0 12px}.glass-card p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}.experience{left:calc(var(--page-edge) + 110px);bottom:12%}.areas{right:calc(var(--page-edge) + 110px);top:36%}.hero-action{position:absolute;z-index:12;right:var(--page-edge);bottom:7%;width:min(300px,22vw)}.hero-action p{font-size:13px;line-height:1.7;margin:0 0 22px}.spark{position:absolute;z-index:8;width:4px;height:4px;background:var(--blue);border-radius:50%;box-shadow:0 0 7px 3px rgba(34,76,232,.35),0 0 22px 7px rgba(34,76,232,.13);animation:twinkle 2s ease-in-out infinite alternate}.spark:before,.spark:after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,var(--blue),transparent);transform:translate(-50%,-50%)}.spark:before{width:48px;height:1px}.spark:after{height:48px;width:1px}.spark-a{left:6.5vw;top:60%;animation-delay:.2s}.spark-b{right:7vw;top:68%;animation-delay:1.1s}.spark-c{right:32vw;bottom:13%;animation-delay:1.7s}.intro{position:fixed;z-index:1000;inset:0;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}.intro span{background:#f5f7fc;transform-origin:top;animation:curtain 1.05s .12s var(--ease) forwards}.intro span:nth-child(2){animation-delay:.2s}.intro span:nth-child(3){animation-delay:.28s}.intro span:nth-child(4){animation-delay:.36s}.enter{opacity:0;transition:opacity .85s var(--ease),transform 1.05s var(--ease),filter 1s var(--ease)}body.loaded .enter{opacity:1}.enter-nav{transform:translateY(-30px);transition-delay:.63s}.enter-title{transform:translateY(55px);filter:blur(5px);transition-delay:.72s}.enter-copy{transform:translateY(24px);transition-delay:1s}.enter-scene{transform:translateX(-50%) translateY(110px) scale(.68);filter:blur(8px);transition-delay:1.08s;transition-duration:1.45s}.enter-card-a{transform:translateY(45px) rotate(-4deg) scale(.92);transition-delay:1.62s}.enter-card-b{transform:translateY(45px) rotate(4deg) scale(.92);transition-delay:1.78s}.enter-action{transform:translateY(30px);transition-delay:1.95s}body.loaded .enter-nav,body.loaded .enter-title,body.loaded .enter-copy,body.loaded .enter-card-a,body.loaded .enter-card-b,body.loaded .enter-action{transform:none;filter:none}body.loaded .enter-scene{transform:translateX(-50%);filter:none}body.loaded .ripple{animation:ripple-in 1.45s var(--ease) both}.loaded .ripple-1{animation-delay:1.15s}.loaded .ripple-2{animation-delay:1.29s}.loaded .ripple-3{animation-delay:1.43s}.loaded .ripple-4{animation-delay:1.57s}.replay{position:absolute;z-index:20;right:2vw;bottom:2vw;width:40px;height:40px;border:1px solid rgba(34,76,232,.15);border-radius:50%;background:rgba(255,255,255,.65);color:var(--blue);font-size:19px;cursor:pointer;backdrop-filter:blur(15px)}.section{padding:130px var(--page-edge)}.label{font-size:11px;letter-spacing:.25em;color:var(--blue);font-weight:600}.section>h2{font-size:clamp(50px,7vw,110px);font-weight:500;line-height:.96;letter-spacing:-.06em;margin:75px 0}.section>h2 em{font-family: Inter, Arial, sans-serif; font-style: normal;font-weight:400;color:var(--blue)}.about{background:#f5f7fb}.split{display:grid;grid-template-columns:1fr 1fr;gap:15vw;border-top:1px solid #ccd3e0;padding-top:32px}.split p{font-size:18px;line-height:1.7;max-width:550px}.split a{justify-self:end;color:#111;text-decoration:none;font-size:22px}.split a span{color:var(--blue)}.services{background:#fff}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cfd5df}.service-grid article{padding:35px 35px 50px;border-right:1px solid #dfe3e9}.service-grid article:first-child{padding-left:0}.service-grid article:last-child{border:0}.service-grid span{color:var(--blue);font-size:12px}.service-grid h3{margin:70px 0 18px;font-size:21px}.service-grid p{color:var(--muted);line-height:1.7;font-size:14px}.work{background:#f5f7fb}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.work-art{aspect-ratio:1.3;display:grid;place-items:center;border-radius:4px;overflow:hidden}.work-art span{font-size:clamp(55px,8vw,120px);font-weight:600}.art-a{background:linear-gradient(135deg,#224ce8,#8cabff);color:#fff}.art-b{background:#e6ebf7;color:#224ce8}.work-grid h3{font-size:21px;margin:21px 0 5px}.work-grid p{color:var(--muted);font-size:13px}.contact{background:var(--blue);color:#fff}.contact .label,.contact h2 em{color:#fff}.contact-link{display:inline-flex;color:#fff;text-decoration:none;font-size:clamp(20px,3vw,40px);border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:10px}.contact>p:last-child{margin-top:60px;color:rgba(255,255,255,.7)}.menu-button{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes curtain{to{transform:scaleY(0)}}@keyframes ripple-in{0%{opacity:0;transform:translate(-50%,-50%) rotateX(66deg) scale(.2)}70%{opacity:.95}100%{opacity:.78;transform:translate(-50%,-50%) rotateX(66deg) scale(1)}}@keyframes twinkle{to{opacity:.3;transform:scale(.55)}}@media(max-width:900px){.hero{height:940px}.header{grid-template-columns:1fr auto}.header-cta{display:none}.menu-button{display:block;position:relative;z-index:40;width:42px;height:42px;border:0;border-radius:50%;background:#eef2ff}.menu-button i{position:absolute;left:12px;top:16px;width:18px;height:1px;background:#224ce8}.menu-button i:nth-child(2){top:24px}.header nav{display:none;position:absolute;top:70px;right:0;flex-direction:column;width:200px;border-radius:18px}.header nav.open{display:flex}.headline{top:13%;width:75vw}.headline h1{font-size:clamp(48px,8vw,70px)}.hero-intro{top:38%;width:37vw}.interaction-scene{width:94vw;bottom:0}.experience{left:5vw;bottom:8%}.areas{right:5vw;top:50%}.glass-card{width:210px}.hero-action{display:none}.service-grid{grid-template-columns:1fr}.service-grid article{padding:30px 0;border-right:0;border-bottom:1px solid #dfe3e9}.service-grid h3{margin-top:25px}}@media(max-width:560px){.hero{height:860px;min-height:860px}.brand span{width:170px}.headline{left:6vw;top:12%;width:92vw}.headline h1{font-size:43px}.hero-intro{top:36%;right:6vw;width:70vw;font-size:12px}.interaction-scene{width:130vw;left:48%;bottom:3%}.areas{top:51%;right:4vw}.experience{bottom:4%;left:4vw}.glass-card{width:170px;padding:18px;border-radius:17px}.glass-card strong{font-size:42px}.glass-card h2{font-size:14px;margin:9px 0}.glass-card p{font-size:10px}.spark-c{display:none}.section{padding:90px 7vw}.split,.work-grid{grid-template-columns:1fr}.split a{justify-self:start}.section>h2{margin:55px 0;font-size:49px}.replay{right:4vw;bottom:4vw}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* SOURCE: adjustments.css */
.headline-services {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.portfolio-project{padding:120px 0 85px;overflow:hidden;background:radial-gradient(ellipse 34% 36% at 8% 40%,rgba(34,76,232,.075),transparent 75%),#f5f7fb}.portfolio-project-inner{width:100%}.portfolio-heading{width:min(var(--content-width),calc(100% - 64px));margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}.portfolio-heading>div:first-child{grid-column:1/span 7}.portfolio-heading .label{margin:0 0 30px}.portfolio-heading h2{margin:0;font-size:clamp(58px,5.4vw,88px);font-weight:500;line-height:.98;letter-spacing:-.06em}.portfolio-heading h2 em{color:var(--blue);font-family: Inter, Arial, sans-serif; font-style: normal;font-weight:400}.portfolio-copy{grid-column:9/span 4}.portfolio-copy>p{margin:0;font-size:16px;line-height:1.7}.portfolio-copy small{display:block;position:relative;margin-top:34px;padding-left:35px;color:var(--muted);font-size:13px;line-height:1.6}.portfolio-copy small:before{content:"↔";position:absolute;left:0;top:0;color:var(--blue);font-size:22px}.portfolio-track{display:flex;gap:28px;margin-top:78px;padding:0 max(32px,calc((100vw - var(--content-width))/2));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}.portfolio-track::-webkit-scrollbar{display:none}.portfolio-track:active{cursor:grabbing}.portfolio-card{flex:0 0 min(425px,74vw);scroll-snap-align:center}.portfolio-card>span{display:block;margin-top:22px;color:var(--blue);font-size:13px;font-weight:600}.portfolio-card h3{margin:8px 0 5px;font-size:20px}.portfolio-card>p{margin:0;color:var(--muted);font-size:13px}.portfolio-visual{position:relative;height:310px;overflow:hidden;border-radius:18px;box-shadow:0 22px 60px rgba(28,42,70,.12)}.mock-nav{position:absolute;z-index:4;top:18px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em}.mock-nav span{font-size:7px}.clinic-visual{background:linear-gradient(120deg,#faf6ee,#ead1b7);color:#715d4e}.clinic-copy,.wallet-copy,.speech-copy,.crm-copy{position:absolute;z-index:3;left:36px;top:82px}.clinic-copy small,.wallet-copy small,.speech-copy small,.crm-copy small{display:block;margin-bottom:11px;font-size:9px}.clinic-copy b,.wallet-copy b,.speech-copy b,.crm-copy b{display:block;font-family:Georgia,serif;font-size:29px;line-height:1.12;font-weight:400}.clinic-copy i,.speech-copy i{display:inline-block;margin-top:24px;padding:8px 12px;border:1px solid currentColor;border-radius:999px;font-size:7px;font-style:normal}.clinic-face{position:absolute;right:-40px;bottom:-80px;width:270px;height:350px;border-radius:48% 52% 42% 58%;background:radial-gradient(circle at 38% 25%,#fff5e9 0 7%,#d7a782 8% 17%,#8b5b42 18% 22%,transparent 23%),radial-gradient(ellipse at 45% 42%,#e7bb95 0 35%,#bd7957 36% 48%,transparent 49%);transform:rotate(-12deg);opacity:.9}.wallet-visual{background:radial-gradient(circle at 80% 65%,#122345,#030711 55%);color:#fff}.wallet-copy b{font-family:Inter,sans-serif;font-size:25px;font-weight:500}.wallet-copy small{width:170px;margin-top:18px;color:#9ca9c2;line-height:1.5}.wallet-phone{position:absolute;right:42px;bottom:-35px;width:145px;height:260px;padding:52px 16px;border:7px solid #273348;border-radius:28px;background:linear-gradient(160deg,#17233a,#070a11);color:#fff;font-size:12px;transform:rotate(-14deg);box-shadow:0 20px 35px #000}.wallet-phone div{height:80px;margin-top:24px;background:linear-gradient(160deg,transparent 45%,#224ce8 47% 50%,transparent 52%)}.speech-visual{background:linear-gradient(135deg,#fff,#edf7ff);color:#172536}.speech-copy b{font-size:28px}.speech-copy small{width:175px;margin-top:16px;line-height:1.5}.speech-copy i{color:#fff;border:0;background:#138ce5}.speech-shape{position:absolute;right:-50px;bottom:-80px;width:265px;height:310px;border-radius:48% 52% 0 0;background:radial-gradient(circle at 42% 35%,#e9bf9b 0 12%,#69452f 13% 22%,#fff 23%)}.crm-visual{background:linear-gradient(140deg,#1749e8,#071b66);color:#fff}.crm-copy b{font-family:Inter,sans-serif;font-size:27px;font-weight:500}.crm-copy small{width:190px;margin-top:16px;color:#c8d4ff;line-height:1.5}.crm-panel{position:absolute;right:28px;top:60px;width:145px;padding:14px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(255,255,255,.13);transform:rotate(5deg);backdrop-filter:blur(10px)}.crm-panel i{display:block;height:44px;margin:8px 0;border-radius:8px;background:rgba(255,255,255,.16)}.portfolio-controls{display:flex;align-items:center;justify-content:center;gap:36px;margin-top:60px}.portfolio-controls button{width:44px;height:44px;border:1px solid rgba(34,76,232,.14);border-radius:50%;background:#fff;font-size:19px;cursor:pointer}.portfolio-controls>div{display:flex;gap:15px}.portfolio-controls i{width:7px;height:7px;border-radius:50%;background:#d9deea}.portfolio-controls i.active{background:var(--blue)}
@media(max-width:900px){.portfolio-project{padding-top:100px}.portfolio-heading{width:calc(100% - 80px)}.portfolio-card{flex-basis:390px}}
@media(max-width:640px){.portfolio-project{padding:80px 0 65px}.portfolio-heading{display:block;width:calc(100% - 40px)}.portfolio-heading h2{font-size:52px}.portfolio-copy{margin-top:38px}.portfolio-track{margin-top:55px;padding-inline:20px}.portfolio-card{flex-basis:86vw}.portfolio-visual{height:270px}}

.approach-break{position:relative;overflow:hidden;padding:120px var(--page-edge) 90px;background:radial-gradient(ellipse 37% 44% at 69% 53%,rgba(34,76,232,.13),transparent 73%),#030405;color:#fff}.approach-break-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);width:100%;max-width:var(--content-width);margin-inline:auto}.approach-break-copy{grid-column:1/span 6}.approach-break .label{margin:0 0 42px;color:#3161ff}.approach-break h2{margin:0;font-size:clamp(54px,4.7vw,76px);font-weight:500;line-height:1.08;letter-spacing:-.055em}.approach-break h2 em{color:var(--blue);font-family: Inter, Arial, sans-serif; font-style: normal;font-weight:400}.approach-break-copy>p:last-child{max-width:470px;margin:48px 0 0;color:#98a0b3;font-size:16px;line-height:1.9}.approach-code{grid-column:7/span 6;display:flex;align-items:center;justify-content:center;gap:12px;min-height:390px;color:#050a18;filter:drop-shadow(0 0 1px rgba(45,91,255,.95)) drop-shadow(0 28px 35px rgba(34,76,232,.18));transform:translateY(10px)}.approach-code span{font-size:170px;font-weight:200;line-height:1}.approach-code b{font-size:245px;font-weight:200;line-height:.75;transform:skew(-12deg)}.approach-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px;padding-top:48px;border-top:1px solid rgba(255,255,255,.08)}.approach-stats article{min-height:95px;padding-right:40px}.approach-stats article+article{padding-left:55px;border-left:1px solid rgba(255,255,255,.14)}.approach-stats strong{font-size:38px;font-weight:400;letter-spacing:-.04em}.approach-stats strong span{color:var(--blue)}.approach-stats p{margin:14px 0 0;color:#949daf;font-size:14px;line-height:1.65}
@media(max-width:900px){.approach-break{padding:100px 40px 80px}.approach-break-copy{grid-column:1/span 7}.approach-code{grid-column:8/span 5}.approach-code span{font-size:110px}.approach-code b{font-size:175px}.approach-stats article+article{padding-left:28px}.approach-stats article{padding-right:20px}}
@media(max-width:640px){.approach-break{padding:80px 20px 65px}.approach-break-inner{display:block}.approach-break h2{font-size:48px}.approach-break-copy>p:last-child{margin-top:34px}.approach-code{min-height:270px}.approach-code span{font-size:95px}.approach-code b{font-size:145px}.approach-stats{grid-template-columns:1fr 1fr;gap:35px 0;margin-top:20px}.approach-stats article,.approach-stats article+article{padding:0 20px 0 0;border:0}.approach-stats article:nth-child(even){padding-left:24px;border-left:1px solid rgba(255,255,255,.14)}}

.headline-services i {
  padding: 0 10px;
  color: var(--blue);
  font-style: normal;
}

.support-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(102, 112, 133, .16);
}

.areas h2 {
  margin-bottom: 12px;
}

.hero-intro {
  top: 80px;
  text-align: right;
}

.header {
  position: absolute;
}

.header .brand {
  grid-column: 1;
}

.header-cta {
  grid-column: 3;
  justify-self: end;
}

@media (min-width: 901px) {
  .floating-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 99999;
    transform: translateX(-50%);
  }
}

.support-list li {
  position: relative;
  padding: 8px 0 8px 38px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.support-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.interaction-scene img {
  top: -8%;
}

.hero-action {
  left: 50%;
  right: auto;
  bottom: 5%;
  width: auto;
  transform: translateX(-50%);
}

.hero-action .button {
  align-items: center;
  gap: 34px;
  padding: 17px 28px;
  font-size: 16px;
  white-space: nowrap;
}

.hero-action .button span {
  font-size: 24px;
  line-height: .7;
}

.enter-action {
  transform: translate(-50%, 30px);
}

body.loaded .enter-action {
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .hero-action {
    display: none;
  }
}

@media (min-width: 901px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-project {
  padding: 130px var(--page-edge) 110px;
  background:
    radial-gradient(ellipse 34% 44% at -3% 50%, rgba(34, 76, 232, .09), transparent 76%),
    radial-gradient(ellipse 34% 42% at 103% 5%, rgba(34, 76, 232, .08), transparent 76%),
    #f5f7fb;
}

.about-project-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.about-project .label {
  margin: 0 0 68px;
}

.about-project-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
}

.about-project-message {
  grid-column: 1 / span 6;
}

.about-project-message h2 {
  margin: 0;
  font-size: clamp(58px, 5.4vw, 88px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.06em;
}

.about-project-message h2 em {
  color: var(--blue);
  font-family: Inter, Arial, sans-serif; font-style: normal;
  font-weight: 400;
}

.about-project-message > p {
  max-width: 475px;
  margin: 52px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

.about-project-stat {
  grid-column: 8 / span 4;
}

.about-project-stat strong {
  display: block;
  color: var(--blue);
  font-size: clamp(110px, 11vw, 178px);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.07em;
}

.about-project-stat p {
  margin: 42px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .3em;
}

.about-project-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 76px;
  margin-top: 90px;
  padding-top: 44px;
  border-top: 1px solid rgba(102, 112, 133, .18);
}

.about-project-values span {
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
}

.about-project-values h3 {
  margin: 23px 0 20px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.about-project-values p {
  max-width: 350px;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .about-project { padding: 100px 40px 90px; }
  .about-project-message { grid-column: 1 / span 7; }
  .about-project-stat { grid-column: 9 / span 4; }
  .about-project-values { gap: 34px; }
}

@media (max-width: 640px) {
  .about-project { padding: 80px 20px 70px; }
  .about-project .label { margin-bottom: 44px; }
  .about-project-intro { display: block; }
  .about-project-message h2 { font-size: 52px; }
  .about-project-message > p { margin-top: 34px; }
  .about-project-stat { margin-top: 70px; }
  .about-project-stat strong { font-size: 105px; }
  .about-project-stat p { margin-top: 28px; }
  .about-project-values { grid-template-columns: 1fr; gap: 46px; margin-top: 70px; }
}

.offer-project {
  padding: 120px var(--page-edge) 80px;
  background:
    radial-gradient(ellipse 30% 38% at 50% 58%, rgba(34,76,232,.08), transparent 75%),
    #fff;
}

.offer-project-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.offer-project-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
}

.offer-project-heading > div { grid-column: 1 / span 6; }
.offer-project-heading > p { grid-column: 8 / span 4; margin: 20px 0 0; font-size: 16px; line-height: 1.7; }
.offer-project .label { margin: 0 0 26px; }
.offer-project h2 { margin: 0; font-size: clamp(58px,5.4vw,88px); line-height: .92; letter-spacing: -.06em; font-weight: 500; }
.offer-project h2 em { color: var(--blue); font-family: Inter, Arial, sans-serif; font-style: normal; font-weight: 400; }

.offer-project-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 1.15fr) 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 70px 55px;
  align-items: center;
  margin-top: 65px;
}

.offer-card { display: grid; grid-template-columns: 86px 1fr; column-gap: 22px; position: relative; padding-top: 38px; }
.offer-card-a { grid-column: 1; grid-row: 1; }
.offer-card-b { grid-column: 3; grid-row: 1; }
.offer-card-c { grid-column: 1; grid-row: 2; }
.offer-card-d { grid-column: 3; grid-row: 2; }
.offer-number { position: absolute; top: 0; left: 0; color: var(--blue); font-size: 25px; font-weight: 500; }
.offer-icon { display: grid; place-items: center; width: 78px; height: 78px; color: var(--blue); background: transparent; font-size: 38px; font-family: Inter,sans-serif; }
.offer-card h3 { margin: 0 0 8px; font-size: 26px; font-weight: 600; }
.offer-card h4 { margin: 0 0 18px; color: var(--blue); font-size: 16px; font-weight: 500; }
.offer-card p { margin: 0; color: #343b4a; font-size: 16px; line-height: 1.7; }

.offer-symbol { grid-column: 2; grid-row: 1 / span 2; position: relative; display: grid; place-items: center; min-height: 390px; color: var(--blue); pointer-events: none; }
.offer-orbit { position: absolute; width: 390px; height: 390px; max-width: 100%; max-height: 100%; border: 1px solid rgba(34,76,232,.62); border-radius: 50%; }
.offer-orbit i { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; background: #fff; color: var(--blue); font-size: 23px; font-style: normal; line-height: 1; }
.offer-orbit i:nth-child(1) { top: -15px; left: calc(50% - 15px); }
.offer-orbit i:nth-child(2) { right: -15px; top: calc(50% - 15px); }
.offer-orbit i:nth-child(3) { bottom: -15px; left: calc(50% - 15px); }
.offer-orbit i:nth-child(4) { left: -15px; top: calc(50% - 15px); }
.offer-code{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;transform:perspective(650px) rotateX(-7deg) rotateY(-2deg);filter:drop-shadow(0 26px 18px rgba(34,76,232,.19))}.offer-code span,.offer-code b{position:relative;display:block;color:transparent;background:linear-gradient(105deg,rgba(255,255,255,.98) 5%,rgba(224,235,255,.72) 27%,rgba(255,255,255,.96) 48%,rgba(112,154,255,.42) 72%,rgba(248,251,255,.94) 94%);background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:1.6px rgba(34,76,232,.62);text-shadow:-2px -2px 1px rgba(255,255,255,.98),1px 0 1px rgba(255,255,255,.9),3px 3px 2px rgba(34,76,232,.38),6px 7px 8px rgba(34,76,232,.18),0 0 14px rgba(98,139,255,.18)}.offer-code span::after,.offer-code b::after{content:attr(data-glyph);position:absolute;inset:0;color:transparent;background:linear-gradient(165deg,rgba(255,255,255,.94) 8%,transparent 34%,rgba(34,76,232,.34) 68%,rgba(255,255,255,.8) 89%);background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:.55px rgba(255,255,255,.8);transform:translate(-1px,-2px);opacity:.85}.offer-code::before{content:"";position:absolute;left:9%;right:9%;top:19%;height:34%;border-radius:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.72),transparent);filter:blur(12px);opacity:.7;transform:rotate(-8deg)}.offer-code::after{content:"";position:absolute;left:10%;right:10%;bottom:-31px;height:24px;border-radius:50%;background:radial-gradient(ellipse,rgba(34,76,232,.25),rgba(99,139,255,.09) 48%,transparent 74%);filter:blur(9px)}.offer-code span{font-size:122px;font-weight:300;line-height:1}.offer-code b{font-size:176px;font-weight:300;line-height:.8;transform:skew(-10deg)}
.offer-summary { margin: 68px 0 0; padding-top: 34px; border-top: 1px solid rgba(102,112,133,.18); text-align: center; font-size: 16px; }
.offer-summary strong { color: var(--blue); font-weight: 500; }

@media (max-width: 900px) {
  .offer-project { padding: 100px 40px 75px; }
  .offer-project-grid { grid-template-columns: 1fr 1fr; }
  .offer-symbol { display: none; }
  .offer-card-a,.offer-card-b,.offer-card-c,.offer-card-d { grid-column: auto; grid-row: auto; }
}

@media (max-width: 640px) {
  .offer-project { padding: 80px 20px 65px; }
  .offer-project-heading { display: block; }
  .offer-project-heading > p { margin-top: 36px; }
  .offer-project h2 { font-size: 52px; }
  .offer-project-grid { grid-template-columns: 1fr; gap: 48px; }
  .offer-card { grid-template-columns: 70px 1fr; }
  .offer-icon { width: 62px; height: 62px; }
}
.portfolio-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.portfolio-track.is-dragging *{pointer-events:none}
.offer-code{width:min(800px,205%);transform:none;filter:none}.offer-code img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 18px rgba(34,76,232,.2))}.offer-code::before{display:none}.offer-code::after{left:13%;right:13%;bottom:2%;z-index:-1}
.enter-card-a{transform:translate3d(0,180px,0);transition-duration:1.25s;transition-delay:1.48s}.enter-card-b{transform:translate3d(0,250px,0);transition-duration:1.55s;transition-delay:1.62s}body.loaded .glass-card.enter-card-a,body.loaded .glass-card.enter-card-b{transform:translate3d(0,var(--card-parallax,0px),0);will-change:transform}
.glass-card.parallax-ready{transition:none!important}
.hero .interaction-scene.enter-scene{transform:translateX(-50%) translateY(110px) scale(.68)}body.loaded .hero .interaction-scene.enter-scene{transform:translateX(-50%) scale(1)}.interaction-scene.parallax-ready{transition:none!important}.interaction-scene img{transform:translate3d(0,var(--arrow-parallax,0px),0) rotate(-5deg)}.interaction-scene.parallax-ready img{transition:none!important;will-change:transform}
.portfolio-cta{margin-top:30px}
.contact{position:relative}.visit-counter{position:absolute;right:var(--page-edge);bottom:34px;color:rgba(255,255,255,.16);font-size:14px;font-weight:500;line-height:1;letter-spacing:.2em;font-variant-numeric:tabular-nums;user-select:none}@media(max-width:640px){.visit-counter{right:20px;bottom:24px;font-size:12px}}

/* Spójne RWD całej strony */
@media (max-width: 900px) {
  .header {
    left: 40px;
    right: 40px;
  }

  .hero {
    height: 920px;
    min-height: 920px;
  }

  .headline {
    left: 40px;
    top: 135px;
    width: min(570px, calc(100% - 80px));
  }

  .headline-services {
    font-size: 13px;
  }

  .hero-intro {
    top: 330px;
    right: 40px;
    width: 300px;
  }

  .interaction-scene {
    width: min(850px, 100vw);
    bottom: 10px;
  }

  .experience {
    left: 40px;
    bottom: 55px;
  }

  .areas {
    right: 40px;
    top: 430px;
  }

  .about-project,
  .offer-project,
  .approach-break {
    padding-left: 40px;
    padding-right: 40px;
  }

  .portfolio-heading {
    width: calc(100% - 80px);
  }

  .contact {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 640px) {
  .header {
    height: 74px;
    left: 20px;
    right: 20px;
  }

  .brand span {
    width: 155px;
    height: 34px;
  }

  .menu-button {
    justify-self: end;
  }

  .header nav {
    top: 64px;
    right: 0;
    width: 190px;
    padding: 8px;
    background: rgba(255,255,255,.9);
  }

  .header nav a {
    padding: 12px 16px;
  }

  .hero {
    height: 970px;
    min-height: 970px;
  }

  .headline {
    left: 20px;
    top: 110px;
    width: calc(100% - 40px);
  }

  .headline h1 {
    font-size: clamp(44px, 14vw, 58px);
    line-height: .94;
  }

  .headline-services {
    margin-top: 18px;
    font-size: 10px;
    white-space: nowrap;
  }

  .headline-services i {
    padding: 0 5px;
  }

  .hero-intro {
    top: 340px;
    right: 20px;
    width: min(270px, calc(100% - 40px));
    font-size: 12px;
    line-height: 1.6;
  }

  .interaction-scene {
    left: 50%;
    bottom: 105px;
    width: 135vw;
  }

  .interaction-scene img {
    top: -4%;
  }

  .glass-card {
    width: 165px;
    padding: 17px;
  }

  .glass-card strong {
    font-size: 40px;
  }

  .glass-card h2 {
    font-size: 14px;
  }

  .glass-card p,
  .support-list li {
    font-size: 10px;
  }

  .support-list li {
    padding: 6px 0 6px 27px;
  }

  .support-list li::before {
    top: 4px;
    width: 19px;
    height: 19px;
    font-size: 9px;
  }

  .experience {
    left: 20px;
    bottom: 28px;
  }

  .areas {
    top: 455px;
    right: 20px;
  }

  .about-project,
  .offer-project,
  .approach-break {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-project-message h2,
  .offer-project h2,
  .portfolio-heading h2 {
    font-size: clamp(44px, 13vw, 54px);
  }

  .about-project-message > p,
  .offer-project-heading > p,
  .portfolio-copy > p,
  .approach-break-copy > p:last-child {
    font-size: 14px;
  }

  .about-project-message > p {
    font-size: 16px;
  }

  .about-project-values {
    gap: 38px;
  }

  .about-project-values h3 {
    margin: 15px 0 12px;
    font-size: 22px;
  }

  .offer-project-grid {
    margin-top: 52px;
    gap: 44px;
  }

  .offer-card {
    grid-template-columns: 58px 1fr;
    column-gap: 16px;
  }

  .offer-icon {
    width: 52px;
    height: 52px;
    font-size: 30px;
  }

  .offer-card h3 {
    font-size: 26px;
  }

  .offer-card h4 {
    font-size: 16px;
  }

  .approach-break h2 {
    font-size: clamp(42px, 12vw, 50px);
  }

  .approach-stats strong {
    font-size: 31px;
  }

  .approach-stats p {
    font-size: 12px;
  }

  .portfolio-heading {
    width: calc(100% - 40px);
  }

  .portfolio-track {
    padding-inline: 20px;
  }

  .portfolio-card {
    flex-basis: calc(100vw - 40px);
  }

  .portfolio-visual {
    height: 260px;
  }

  .portfolio-controls {
    gap: 22px;
    margin-top: 42px;
  }

  .contact {
    padding: 80px 20px 100px;
  }

  .contact > h2 {
    font-size: clamp(47px, 14vw, 60px);
  }

  .contact-link {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 19px;
  }
}

@media (max-width: 380px) {
  .headline h1 {
    font-size: 42px;
  }

  .headline-services {
    font-size: 9px;
  }

  .glass-card {
    width: 150px;
    padding: 14px;
  }

  .areas {
    right: 12px;
  }

  .experience {
    left: 12px;
  }

  .approach-stats {
    grid-template-columns: 1fr;
  }

  .approach-stats article,
  .approach-stats article:nth-child(even) {
    padding: 0;
    border-left: 0;
  }
}
.portfolio-case-link{display:block;color:inherit;text-decoration:none}.portfolio-case-link>span{display:block;margin-top:22px;color:var(--blue);font-size:13px;font-weight:600}.portfolio-case-link>p{margin:0;color:var(--muted);font-size:13px}.portfolio-case-link .portfolio-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}.portfolio-case-link:hover .portfolio-visual img{transform:scale(1.025)}
.approach-code img{display:block;width:min(112%,900px);max-width:none;height:auto;filter:drop-shadow(0 24px 30px rgba(34,76,232,.18))}
.brand span{width:160px;max-width:160px}@media(max-width:640px){.brand span{width:160px;max-width:160px}}
.portfolio-card h3,.portfolio-case-link h3{margin-top:22px}.contact>h2{font-size:clamp(58px,5.4vw,88px);line-height:.98;letter-spacing:-.06em}@media(max-width:640px){.contact>h2{font-size:clamp(44px,13vw,54px);line-height:.98}}.hero .glass-card{background:rgba(255,255,255,.46);border-color:rgba(255,255,255,.72);box-shadow:0 24px 60px rgba(34,53,82,.08),inset 0 1px 0 rgba(255,255,255,.82)}.hero .support-list{border-top:0}.hero .glass-card{box-shadow:-4px -9px 60px 3px rgba(34,53,82,.08),inset 0 1px 0 rgba(255,255,255,.82)}

.floating-nav{display:flex;padding:5px;border-radius:999px;background:rgba(250,251,253,.78);border:1px solid rgba(129,145,175,.18);box-shadow:0 16px 42px rgba(45,65,98,.08),inset 0 1px rgba(255,255,255,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.floating-nav a{color:#121317;text-decoration:none;font-size:14px;padding:10px 22px;border-radius:999px}.floating-nav a.active{color:var(--blue);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(34,76,232,.25),0 3px 13px rgba(34,76,232,.05)}
@media(max-width:900px){.floating-nav{display:none;position:fixed;z-index:99999;top:72px;right:40px;flex-direction:column;width:200px;border-radius:18px}.floating-nav.open{display:flex}}
@media(max-width:640px){.floating-nav{top:64px;right:20px;width:190px;padding:8px;background:rgba(255,255,255,.92)}.floating-nav a{padding:12px 16px}}
@media(min-width:901px){.floating-nav.enter-nav{transform:translate(-50%,-30px)}body.loaded .floating-nav.enter-nav{transform:translate(-50%,0)}}
.approach-stats{margin-top:0;padding-top:0}
.portfolio-image{background:#140b05}.portfolio-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.portfolio-case-link .portfolio-image img{object-fit:contain;object-position:center}
.portfolio-case-link:hover .portfolio-image img{transform:scale(1.01)}
.portfolio-image.finovo-image{background:#fefefe}
.portfolio-image.nina-image{background:#f2dede}
.portfolio-image.nurra-image{background:#f4f2f0}
.portfolio-image.nurra-image img{transform:none}
.portfolio-case-link:hover .portfolio-image.nurra-image img{transform:scale(1.01)}
.portfolio-image.forma-dom-image{background:#f7f4f1}
.portfolio-image.rift-image{background:#020305}

.portfolio-clients{width:min(var(--content-width),calc(100% - 64px));margin:68px auto 0;padding:36px 0;border-top:1px solid rgba(102,112,133,.2);border-bottom:1px solid rgba(102,112,133,.2);display:grid;grid-template-columns:220px minmax(0,1fr);gap:42px;align-items:center}.portfolio-clients-intro h3{margin:0 0 11px;color:var(--blue);font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.portfolio-clients-intro p{max-width:220px;margin:0;color:var(--muted);font-size:16px;line-height:1.55}.portfolio-client-list{display:grid;grid-template-columns:repeat(8,minmax(90px,1fr));gap:clamp(16px,2vw,36px);align-items:center;margin:0;padding:0;list-style:none;color:#5f6269}.portfolio-client-list li{min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;filter:grayscale(1);opacity:.82;white-space:nowrap}.portfolio-client-list b{display:flex;flex-direction:column;font-size:18px;line-height:.95}.portfolio-client-list small{margin-top:6px;font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}.client-bielecka>span{font-family:Georgia,serif;font-size:36px}.client-bielecka b{font-family:Georgia,serif;font-size:19px;font-weight:400}.client-novara b,.client-beauty b{font-family:Georgia,serif;font-size:19px;font-weight:400;letter-spacing:.07em;text-transform:uppercase}.client-sotech>span{font-size:31px;font-weight:800;transform:skewY(-12deg)}.client-sotech b,.client-medbox b{font-size:19px;font-weight:700}.client-gorski{flex-direction:column!important;gap:3px!important}.client-gorski>span{height:11px;font-size:15px;transform:scaleX(1.8) rotate(45deg)}.client-gorski b{font-size:18px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.client-medbox>span{display:grid;place-items:center;width:26px;height:26px;border:2px solid currentColor;border-radius:3px;font-size:15px}.client-verdant>span{font-size:31px}.client-verdant b,.client-innova b{font-size:17px;font-weight:800;text-transform:uppercase}.client-innova>span{font-size:22px;font-weight:900;letter-spacing:-.16em}

@media(max-width:1050px){.portfolio-client-list{grid-template-columns:repeat(4,1fr);row-gap:26px}.portfolio-client-list li{justify-content:flex-start}}
@media(max-width:640px){.portfolio-clients{width:calc(100% - 40px);margin-top:50px;padding:25px 0;grid-template-columns:1fr;gap:28px}.portfolio-clients-intro p{max-width:230px}.portfolio-client-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}.portfolio-client-list li{justify-content:flex-start}.portfolio-track{margin-top:50px}}
.portfolio-client-list{grid-template-columns:repeat(7,minmax(90px,1fr))}
@media(max-width:1050px){.portfolio-client-list{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.portfolio-client-list{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* SOURCE: contact.css */
.contact-project{position:relative;overflow:hidden;min-height:900px;padding:120px var(--page-edge) 90px;background:radial-gradient(circle at 16% 52%,rgba(63,105,255,.28),transparent 35%),radial-gradient(circle at 80% 45%,rgba(17,45,194,.42),transparent 43%),linear-gradient(135deg,#083ae4 0%,#0633d8 48%,#092bc3 100%);color:#fff}.contact-project-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);width:100%;max-width:var(--content-width);margin-inline:auto}.contact-content{grid-column:1/span 6;position:relative;z-index:3}.contact-project .label{margin:0 0 34px;color:#fff}.contact-project h2{margin:0;font-size:clamp(58px,5.4vw,88px);font-weight:500;line-height:.98;letter-spacing:-.06em}.contact-project h2 em{font-family: Inter, Arial, sans-serif; font-style: normal;font-weight:400;color:#fff}.contact-intro{margin:44px 0 0;color:rgba(255,255,255,.72);font-size:16px;line-height:1.85}.contact-main-link{display:flex;align-items:center;justify-content:space-between;max-width:555px;margin-top:67px;padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.32);color:#fff;text-decoration:none;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.035em}.contact-main-link span{font-size:26px}.contact-options{display:grid;grid-template-columns:auto 1fr;gap:0;margin-top:52px}.contact-options a{display:flex;align-items:center;gap:20px;padding-right:34px;color:#fff;text-decoration:none}.contact-options a+a{padding-left:34px;border-left:1px solid rgba(255,255,255,.28)}.contact-options i{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border:1px solid rgba(255,255,255,.55);border-radius:50%;font-size:23px;font-style:normal}.contact-options span{display:flex;flex-direction:column;gap:11px;font-size:14px;white-space:nowrap}.contact-options b{font-size:11px;letter-spacing:.12em}.contact-location{display:flex;align-items:flex-start;gap:18px;margin-top:78px;color:rgba(255,255,255,.78)}.contact-location>i{font-size:29px;font-style:normal}.contact-location p{display:flex;flex-direction:column;gap:9px;margin:0;font-size:14px}.contact-location strong{color:#fff;font-weight:500}.contact-art{grid-column:7/span 6;position:relative;display:grid;place-items:center;min-height:650px}.contact-art img{position:relative;z-index:2;display:block;width:min(120%,720px);max-width:none;height:auto;filter:drop-shadow(0 30px 40px rgba(0,16,100,.23))}.contact-orbit{position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%}.contact-orbit-a{width:720px;height:720px}.contact-orbit-b{width:540px;height:540px;opacity:.45}.contact-orbit-dot{position:absolute;z-index:3;top:6%;right:20%;width:9px;height:9px;border-radius:50%;background:#a8c5ff;box-shadow:0 0 15px #fff}.contact-project .visit-counter{right:var(--page-edge);bottom:30px;color:rgba(255,255,255,.15)}@media(max-width:900px){.contact-project{min-height:820px;padding:100px 40px 80px}.contact-content{grid-column:1/span 7}.contact-art{grid-column:8/span 5}.contact-art img{width:150%}.contact-orbit-a{width:560px;height:560px}.contact-orbit-b{width:420px;height:420px}.contact-options{grid-template-columns:1fr}.contact-options a+a{margin-top:22px;padding:22px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.22)}}@media(max-width:640px){.contact-project{min-height:auto;padding:80px 20px 110px}.contact-project-inner{display:block}.contact-project h2{font-size:clamp(44px,13vw,54px)}.contact-intro{margin-top:30px;font-size:14px}.contact-main-link{margin-top:42px;font-size:19px;overflow-wrap:anywhere}.contact-main-link span{margin-left:12px}.contact-options{margin-top:38px}.contact-options span{white-space:normal}.contact-location{margin-top:48px}.contact-art{min-height:420px;margin-top:25px}.contact-art img{width:min(125%,540px)}.contact-orbit-a{width:430px;height:430px}.contact-orbit-b{width:320px;height:320px}}

.contact-legal{position:absolute;z-index:4;left:var(--page-edge);bottom:26px;display:flex;flex-direction:column;gap:5px;color:rgba(255,255,255,.5);font-size:12px;line-height:1.35}.contact-legal span:last-child{color:rgba(255,255,255,.36);font-size:11px}@media(max-width:640px){.contact-legal{left:20px;bottom:20px;font-size:11px}.contact-legal span:last-child{font-size:10px}}


/* SOURCE: contact-icons.css */
.contact-options i {
  font-size: 0;
}

.contact-options i svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-location > i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 30px;
  font-size: 0;
}

.contact-location > i svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio-case-link .jakanie-visual img {
  object-position: top center;
}

.portfolio-visual.crm-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portfolio-visual.crm-visual {
  background: #f4f5f1;
}


/* SOURCE: mobile-v2.css */
@media (max-width: 640px) {
  body {
    background: #05070b;
  }

  .hero {
    width: 100%;
    height: 1220px;
    min-height: 1220px;
    border-radius: 0;
    background:
      radial-gradient(ellipse 48% 27% at 2% 32%, rgba(34,76,232,.12), transparent 76%),
      radial-gradient(ellipse 55% 28% at 100% 75%, rgba(34,76,232,.1), transparent 78%),
      #fff;
  }

  .technical-grid {
    background-size: 92px 92px;
    opacity: .54 !important;
  }

  .header {
    height: 78px;
    left: 22px;
    right: 22px;
    grid-template-columns: 1fr auto auto;
    column-gap: 10px;
  }

  .brand span {
    width: 132px;
    max-width: 132px;
  }

  .header-cta {
    display: none;
    grid-column: 2;
    padding: 11px 14px;
    font-size: 11px;
  }

  .menu-button {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 100001;
    grid-column: 3;
    justify-self: end;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 10px 25px rgba(34,53,82,.08);
  }

  .floating-menu-button {
    display: block;
    position: fixed;
    isolation: isolate;
    z-index: 2147483647;
  }

  .floating-nav {
    z-index: 100000;
    top: 76px;
    right: 22px;
  }

  .headline {
    left: 36px;
    top: 118px;
    width: calc(100% - 72px);
  }

  .headline h1 {
    font-size: clamp(46px, 13.5vw, 57px);
    line-height: .93;
    letter-spacing: -.065em;
  }

  .headline-services {
    position: absolute;
    top: 270px;
    left: 0;
    margin: 0;
    font-size: 10px;
    letter-spacing: .015em;
  }

  .hero-intro {
    top: 302px;
    left: 36px;
    right: auto;
    width: calc(100% - 72px);
    text-align: left;
    color: #262c38;
    font-size: 13px;
    line-height: 1.65;
  }

  .interaction-scene {
    left: 50%;
    bottom: auto;
    top: 350px;
    width: 112vw;
    height: 390px;
    aspect-ratio: auto;
  }

  .interaction-scene img {
    left: 30%;
    top: 27%;
    width: 43%;
  }

  .ripple {
    top: 68%;
  }

  .experience,
  .areas {
    left: 50%;
    right: auto;
    width: calc(100% - 88px);
    transform: translateX(-50%) !important;
    border-radius: 22px;
  }

  .experience {
    top: 705px;
    bottom: auto;
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: center;
    column-gap: 20px;
    min-height: 125px;
    padding: 22px 28px;
  }

  .experience strong {
    grid-column: 1;
    font-size: 50px;
  }

  .experience h2 {
    grid-column: 1;
    margin: 4px 0 0;
    font-size: 14px;
  }

  .experience p {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 12px;
    line-height: 1.55;
  }

  .areas {
    top: 850px;
    min-height: 205px;
    padding: 24px 30px;
  }

  .areas strong {
    display: inline;
    font-size: 22px;
  }

  .areas h2 {
    display: inline;
    margin-left: 8px;
    font-size: 17px;
  }

  .support-list {
    margin-top: 16px;
  }

  .support-list li {
    padding: 5px 0 5px 31px;
    font-size: 13px;
  }

  .support-list li::before {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .hero-action {
    display: block;
    left: 50%;
    right: auto;
    bottom: 72px;
    width: calc(100% - 88px);
    transform: translateX(-50%) !important;
  }

  .hero-action .button {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 18px 25px;
    font-size: 17px;
    border-radius: 999px;
  }

  .hero-action .button span {
    position: absolute;
    right: 30px;
  }

  .replay {
    display: none;
  }

  .spark-a { left: 22px; top: 42%; }
  .spark-b { right: 22px; top: 38%; }

  body.loaded .glass-card.enter-card-a,
  body.loaded .glass-card.enter-card-b {
    transform: translateX(-50%) !important;
  }

  .interaction-scene img,
  .interaction-scene.parallax-ready img {
    transform: rotate(-5deg) !important;
    transition: none !important;
  }

  .approach-stats {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }

  .approach-stats article,
  .approach-stats article + article,
  .approach-stats article:nth-child(even) {
    min-height: 0;
    padding: 34px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }

  .approach-stats article:last-child {
    border-bottom: 0;
  }

  .approach-stats strong {
    display: block;
    font-size: 62px;
    line-height: 1;
  }

  .approach-stats p {
    margin: 18px auto 0;
    max-width: 270px;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .header {
    left: 20px;
    right: 20px;
    column-gap: 10px;
  }

  .brand span {
    width: 132px;
  }

  .header-cta {
    padding: 11px 13px;
    font-size: 11px;
  }

  .headline,
  .hero-intro {
    left: 34px;
    width: calc(100% - 68px);
  }

  .headline h1 {
    font-size: 46px;
  }

  .experience,
  .areas,
  .hero-action {
    width: calc(100% - 56px);
  }
}
@media(max-width:640px){.hero-intro{top:260px}.headline-services{top:230px}.interaction-scene{top:300px}}

/* V2 mobile: elastyczny układ hero bez pozycjonowania absolutnego treści */
@media (max-width: 640px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 108px 0 68px;
  }

  .header {
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    width: auto;
    height: 78px;
    margin: 0;
    display: flex;
    align-items: center;
  }

  .header .brand {
    display: block;
    position: relative;
    z-index: 2;
    margin: 0;
  }

  .headline {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: 22px 36px 0;
  }

  .headline-services {
    position: relative;
    top: auto;
    left: auto;
    margin: 22px 0 0;
    white-space: normal;
    line-height: 1.65;
  }

  .hero-intro {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    margin: 18px 36px 0;
  }

  .interaction-scene {
    position: relative;
    top: auto;
    left: 50%;
    bottom: auto;
    flex: 0 0 auto;
    width: 112vw;
    height: 390px;
    margin-top: 8px;
  }

  .experience,
  .areas {
    position: relative;
    top: auto;
    left: 50%;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
  }

  .experience {
    margin-top: -22px;
  }

  .areas {
    margin-top: 22px;
  }

  .hero-action {
    position: relative;
    left: 50%;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    margin-top: 28px;
  }

  .spark-a,
  .spark-b,
  .spark-c {
    position: absolute;
  }
}

@media (max-width: 380px) {
  .headline,
  .hero-intro {
    margin-left: 28px;
    margin-right: 28px;
  }
}


/* SOURCE: v3.css */
/* V3: wspólny język ruchu dla głównych obiektów marki. */
:root {
  --section-heading-size: clamp(54px, 4.7vw, 76px);
  --section-heading-line: 1.08;
  --section-heading-spacing: -.055em;
}

.hero .glass-card {
  background: rgba(255, 255, 255, .32);
  border-color: rgba(255, 255, 255, .62);
  backdrop-filter: blur(15px) saturate(135%);
  -webkit-backdrop-filter: blur(15px) saturate(135%);
  filter: blur(var(--card-scroll-blur, 0px)) !important;
  will-change: transform, filter;
}

.about-project-message h2,
.offer-project h2,
.approach-break h2,
.portfolio-heading h2,
.contact-project h2 {
  font-size: var(--section-heading-size);
  line-height: var(--section-heading-line);
  letter-spacing: var(--section-heading-spacing);
}

.about-project-message h2 em,
.offer-project h2 em,
.approach-break h2 em,
.portfolio-heading h2 em,
.contact-project h2 em {
  font-size: 1em;
  line-height: inherit;
}

/* O NAS PINNING: ten sam stabilny schemat co w Ofercie — wysoki kontener
   i przypięta sekcja, bez przechwytywania zdarzeń kółka lub touchpada. */
.about-pin-stage {
  position: relative;
  background: #f5f7fb;
}

@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .about-pin-stage {
    height: 220vh;
  }

  .about-pin-stage > .about-project {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 680px;
    overflow: hidden;
    padding-top: clamp(48px, 6.5vh, 76px);
    padding-bottom: clamp(34px, 4.5vh, 56px);
  }

  .about-pin-stage .about-project .label {
    margin-bottom: clamp(28px, 4.5vh, 52px);
  }

  .about-pin-stage .about-project-message > p {
    margin-top: clamp(28px, 4vh, 46px);
  }

  .about-pin-stage .about-project-stat p {
    margin-top: clamp(24px, 3.5vh, 38px);
  }

  .about-pin-stage .about-project-values {
    margin-top: clamp(38px, 5.5vh, 64px);
    padding-top: clamp(26px, 3.5vh, 38px);
  }

  .about-project-message,
  .about-project-stat {
    opacity: var(--about-enter-opacity, 1);
    filter: blur(var(--about-exit-blur, 0px));
    will-change: transform, opacity, filter;
  }

  .about-project-message {
    transform: translate3d(var(--about-message-x, 0px), 0, 0);
  }

  .about-project-stat {
    transform: translate3d(var(--about-stat-x, 0px), 0, 0);
  }

  .about-pin-stage .about-project-values article {
    opacity: var(--about-value-opacity, 1);
    transform: translate3d(0, var(--about-value-y, 0px), 0);
    filter: blur(var(--about-value-blur, 0px));
    will-change: transform, opacity, filter;
  }
}

@media (max-width:900px), (prefers-reduced-motion:reduce) {
  .about-pin-stage {
    height: auto;
  }

  .about-pin-stage > .about-project {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .about-project-message,
  .about-project-stat,
  .about-project-values article {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.interaction-scene img,
.offer-code,
.approach-code,
.contact-art img,
.portfolio-visual {
  --tk-scroll-y: 0px;
  --tk-pointer-x: 0deg;
  --tk-pointer-y: 0deg;
  --tk-rotate: 0deg;
  will-change: transform, filter;
}

.interaction-scene img {
  transform: translate3d(0, calc(var(--arrow-parallax, 0px) + var(--tk-scroll-y)), 0)
    perspective(1000px) rotateX(var(--tk-pointer-y)) rotateY(var(--tk-pointer-x))
    rotate(calc(-5deg + var(--tk-rotate)));
  filter: drop-shadow(0 25px 25px rgba(34,76,232,.12))
    drop-shadow(0 0 var(--tk-glow, 0px) rgba(34,76,232,.26));
}

.offer-code,
.approach-code,
.contact-art img {
  transform: translate3d(0, var(--tk-scroll-y), 0) perspective(1000px)
    rotateX(var(--tk-pointer-y)) rotateY(var(--tk-pointer-x)) rotate(var(--tk-rotate));
  filter: drop-shadow(0 24px 30px rgba(34,76,232,.18))
    drop-shadow(0 0 var(--tk-glow, 0px) rgba(34,76,232,.28));
}

.portfolio-visual {
  transform: translate3d(0, var(--tk-scroll-y), 0) perspective(1100px)
    rotateX(var(--tk-pointer-y)) rotateY(var(--tk-pointer-x));
  box-shadow: 0 24px 68px rgba(28,42,70,.15), 0 0 var(--tk-glow, 0px) rgba(34,76,232,.12);
  transition: box-shadow .35s ease;
}

/* Około 2,3 dużego projektu w typowym widoku desktopowym. */
.portfolio-track {
  gap: 32px;
}

.portfolio-card {
  flex: 0 0 clamp(480px, 39vw, 570px);
  min-width: 0;
  max-width: calc(100vw - 40px);
}

.portfolio-visual {
  height: clamp(350px, 28vw, 415px);
}

@media (hover:hover) and (pointer:fine) {
  .portfolio-card:hover .portfolio-visual {
    box-shadow: 0 30px 78px rgba(28,42,70,.19), 0 0 34px rgba(34,76,232,.12);
  }
}

/* Krótszy, mocniejszy break z celowo przyciętą kulą. */
@media (min-width:901px) {
  .approach-break {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .approach-break .label {
    margin-bottom: 22px;
  }

  .approach-break-copy > p:last-child {
    margin-top: 24px;
    line-height: 1.65;
  }

  .approach-code {
    align-self: start;
    align-items: center;
    height: 390px;
    min-height: 0;
    overflow: visible;
  }

  .approach-code img {
    width: min(105.6%, 828px);
    margin-top: 0;
  }

  .approach-stats article {
    min-height: 72px;
  }
}

@media (max-width:900px) {
  .approach-break { padding-top: 82px; padding-bottom: 82px; }
  .approach-code { height: 340px; min-height: 0; overflow: visible; }
  .approach-code img { width: min(112.8%, 660px); margin-top: 0; }
  .portfolio-card { flex-basis: min(76vw, 520px); }
  .portfolio-visual { height: min(55vw, 380px); }
}

@media (max-width:640px) {
  :root { --section-heading-size: 48px; }
  .approach-break { padding-top: 72px; padding-bottom: 72px; }
  .approach-code { height: 280px; min-height: 0; overflow: visible; }
  .approach-code img { width: min(100.8%, 420px); margin-top: 0; }
  .portfolio-track {
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .portfolio-card {
    flex: 0 0 calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    min-width: 0;
    max-width: calc(100vw - 40px) !important;
    overflow: hidden;
    contain: inline-size;
  }
  .portfolio-card > a {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .portfolio-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 270px;
    transform: none !important;
  }
  .portfolio-visual img,
  .portfolio-visual.crm-visual img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .interaction-scene img,
  .offer-code,
  .approach-code,
  .contact-art img,
  .portfolio-visual {
    --tk-scroll-y: 0px !important;
    --tk-pointer-x: 0deg !important;
    --tk-pointer-y: 0deg !important;
    --tk-rotate: 0deg !important;
    --tk-glow: 0px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .interaction-scene img,
  .offer-code,
  .approach-code,
  .contact-art img,
  .portfolio-visual { transform: none !important; }
}


/* OFFER PINNING — jedyna przypięta sekcja na stronie. */
.offer-pin-stage { position: relative; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .offer-pin-stage {
    height: 430vh;
    background: #fff;
    /* Oferta zaczyna wsuwać się od dołu jeszcze podczas końcowej fazy
       przypiętej sekcji O nas. */
    margin-top: -100vh;
    z-index: 3;
  }

  .offer-pin-stage > .offer-project {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 680px;
    overflow: hidden;
    padding-top: clamp(54px, 6.2vh, 82px);
    padding-bottom: clamp(34px, 4.2vh, 58px);
  }

  .offer-pin-stage .offer-project-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .offer-pin-stage .offer-project-heading {
    flex: 0 0 auto;
  }

  .offer-pin-stage .offer-project h2 {
    font-size: clamp(52px, 4.7vw, 76px);
  }

  .offer-pin-stage .offer-project-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: clamp(28px, 4vh, 48px);
    gap: clamp(22px, 3vh, 42px) 48px;
    align-content: center;
  }

  .offer-pin-stage .offer-symbol {
    min-height: clamp(270px, 42vh, 390px);
  }

  .offer-pin-stage .offer-code {
    width: min(500px, 132%);
  }

  .offer-pin-stage .offer-card {
    padding-top: 20px;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 26px, 0) scale(.965);
    transition: opacity .55s ease, transform .65s cubic-bezier(.2,.75,.2,1), filter .55s ease;
    will-change: opacity, transform, filter;
  }

  .offer-pin-stage .offer-card h4 { margin-bottom: 12px; }
  .offer-pin-stage .offer-summary {
    flex: 0 0 auto;
    margin-top: clamp(18px, 2.5vh, 28px);
    padding-top: 18px;
    font-size: 16px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
  }

  .offer-pin-stage.offer-step-1 .offer-card-a,
  .offer-pin-stage.offer-step-2 .offer-card-a,
  .offer-pin-stage.offer-step-2 .offer-card-b,
  .offer-pin-stage.offer-step-3 .offer-card-a,
  .offer-pin-stage.offer-step-3 .offer-card-b,
  .offer-pin-stage.offer-step-3 .offer-card-d,
  .offer-pin-stage.offer-step-4 .offer-card-a,
  .offer-pin-stage.offer-step-4 .offer-card-b,
  .offer-pin-stage.offer-step-4 .offer-card-d,
  .offer-pin-stage.offer-step-4 .offer-card-c,
  .offer-pin-stage.offer-step-5 .offer-card-a,
  .offer-pin-stage.offer-step-5 .offer-card-b,
  .offer-pin-stage.offer-step-5 .offer-card-c,
  .offer-pin-stage.offer-step-5 .offer-card-d {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,0) scale(1);
  }

  .offer-pin-stage.offer-step-5 .offer-summary {
    opacity: 1;
    transform: translateY(0);
  }

  .offer-pin-stage::after {
    content: '';
    position: sticky;
    display: block;
    left: 50%;
    bottom: 18px;
    width: min(360px, 34vw);
    height: 2px;
    margin: -20px auto 0;
    background: rgba(34,76,232,.12);
    transform: translateZ(0);
    pointer-events: none;
  }

  .offer-pin-stage > .offer-project::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--offer-progress, 0%);
    height: 3px;
    background: var(--blue);
    transition: width .08s linear;
  }
}

@media (max-width:900px), (prefers-reduced-motion: reduce) {
  .offer-pin-stage { height: auto; margin-top: 0; }
  .offer-pin-stage > .offer-project { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
  .offer-pin-stage .offer-card,
  .offer-pin-stage .offer-summary { opacity: 1; filter: none; transform: none; }
}

/* APPROACH / BLACK SECTION PINNING — kula wjeżdża z prawej.
   Animowany jest tylko transform obrazu (GPU), dzięki czemu kula pozostaje widoczna i ruch jest płynny. */
.approach-pin-stage{position:relative;background:#030405}
@media (min-width:901px){
  .approach-pin-stage{height:235vh}
  .approach-pin-stage>.approach-break{
    position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;
    display:flex;align-items:center;
    padding-top:clamp(70px,8vh,110px);padding-bottom:clamp(60px,7vh,100px)
  }
  .approach-pin-stage .approach-break-inner{width:100%;align-items:center}
  .approach-pin-stage .approach-break-copy{position:relative;z-index:3}
  .approach-pin-stage .approach-code{position:relative;z-index:1;min-height:430px;overflow:visible;transform:none!important}
  .approach-pin-stage .approach-code img{
    display:block;opacity:1!important;
    transform:translate3d(var(--orb-x,55vw),0,0) scale(var(--orb-scale,1))!important;
    filter:blur(var(--orb-blur,0px)) drop-shadow(0 24px 30px rgba(34,76,232,.18));
    will-change:transform,filter;backface-visibility:hidden;
  }
  .approach-pin-stage>.approach-break::after{
    content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--blue);
    transform:scaleX(var(--approach-progress,0));transform-origin:left center;opacity:.65
  }
}
@media (max-width:900px){
  .approach-pin-stage{height:auto}
  .approach-pin-stage>.approach-break{position:relative;height:auto;min-height:0}
  .approach-pin-stage .approach-code img{transform:none!important;opacity:1!important}
}


/* SOURCE: team.css */
/* Zespół — część sekcji O nas. Portrety są kadrowane z materiału
   referencyjnego przekazanego przez klienta. */
.about-project {
  isolation: isolate;
  overflow: hidden;
}

/* Smukły proces 01–03 w dolnej części sekcji O nas. */
.about-team + .about-project-values {
  margin-top: 72px;
}

.about-project .about-project-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 68px 0 38px;
  border-top: 1px solid rgba(102, 112, 133, .16);
}

.about-project .about-project-values article,
.about-project .about-project-values article:first-child,
.about-project .about-project-values article:last-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: clamp(26px, 2.3vw, 42px);
  min-height: 150px;
  padding: 0 clamp(34px, 3.6vw, 58px);
  border-right: 1px solid rgba(102, 112, 133, .16);
  border-bottom: 0;
}

.about-project .about-project-values article:first-child { padding-left: 0; }
.about-project .about-project-values article:last-child { padding-right: 0; border-right: 0; }

.about-project .about-value-number {
  color: var(--blue);
  font-size: clamp(42px, 3.4vw, 56px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.055em;
}

.about-project .about-value-copy { min-width: 0; }

.about-project .about-project-values h3 {
  margin: 2px 0 26px;
  font-size: clamp(24px, 1.8vw, 30px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}

.about-project .about-project-values p {
  max-width: 270px;
  margin: 0;
  color: #343b4a;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .about-project .about-project-values article,
  .about-project .about-project-values article:first-child,
  .about-project .about-project-values article:last-child {
    gap: 20px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .about-project .about-project-values article:first-child { padding-left: 0; }
  .about-project .about-project-values article:last-child { padding-right: 0; }
}

@media (max-width: 640px) {
  .about-team + .about-project-values { margin-top: 58px; }

  .about-project .about-project-values {
    grid-template-columns: 1fr;
    padding: 18px 0 6px;
  }

  .about-project .about-project-values article,
  .about-project .about-project-values article:first-child,
  .about-project .about-project-values article:last-child {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 20px;
    min-height: 0;
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(102, 112, 133, .16);
  }

  .about-project .about-project-values article:last-child { border-bottom: 0; }
  .about-project .about-value-number { font-size: 42px; }
  .about-project .about-project-values h3 { margin: 1px 0 14px; font-size: 24px; }
  .about-project .about-project-values p { max-width: 300px; font-size: 14px; }
}

.about-project::after {
  position: absolute;
  z-index: 0;
  top: 24%;
  right: -18vw;
  width: min(760px, 55vw);
  height: 68%;
  background: radial-gradient(ellipse at center, rgba(78, 120, 255, .075), rgba(123, 154, 255, .025) 44%, transparent 73%);
  content: "";
  pointer-events: none;
}

.about-project-inner {
  position: relative;
  z-index: 1;
}

.about-team {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-top: 76px;
  padding-top: 42px;
  border-top: 1px solid rgba(102, 112, 133, .18);
}

.about-team-copy {
  grid-column: 1 / span 4;
  align-self: center;
  padding-right: 26px;
}

.about-team-copy .team-label {
  position: relative;
  margin: 0 0 26px;
  padding-left: 18px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2em;
}

.about-team-copy .team-label::before {
  position: absolute;
  top: .47em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

.about-team-copy h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.about-team-copy > p {
  max-width: 360px;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

.team-dribbble-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.team-dribbble-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.team-dribbble-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.team-external-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.portfolio-copy .team-dribbble-link {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-top: 20px;
}

.team-members {
  grid-column: 5 / span 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 54px);
}

.team-member {
  min-width: 0;
  text-align: center;
}

.team-avatar {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 50%;
  background-image: url("assets/team-reference.webp?v=1");
  background-repeat: no-repeat;
  background-size: 1536px 1024px;
  box-shadow: 0 20px 48px rgba(34, 53, 82, .08);
}

.team-avatar-tomasz {
  background-color: #eef2ff;
  background-image: url("assets/tomasz-optimized.webp?v=1");
  background-position: center 16%;
  background-size: 112%;
  filter: grayscale(1) contrast(1.04);
}

.team-avatar-kacper {
  background-position: -853px -522px;
}

.team-avatar-kamil {
  background-color: #eef2ff;
  background-image: url("assets/kamil.webp?v=3");
  background-position: center;
  background-size: cover;
  filter: grayscale(1) contrast(1.03);
}

.team-member h4 {
  margin: 16px 0 7px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.025em;
}

.team-member > p {
  margin: 0;
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .18em;
}

.about-team + .about-project-values {
  margin-top: 64px;
}

/* Ostatni panel domyka sekcję — bez dużej pustej przestrzeni przed Ofertą. */
.about-project {
  padding-bottom: 24px;
}

/* Podejście / Design / Technologia — pełny, jasny panel zgodny z referencją. */
.about-project .about-project-values {
  position: relative;
  z-index: 0;
  isolation: isolate;
  gap: 0;
  padding-top: 46px;
  padding-bottom: 22px;
  border-top: 0;
}

.about-project .about-project-values::before {
  display: none;
}

.about-project .about-project-values::after {
  display: none;
}

.about-project .about-project-values article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 310px;
  padding: 0 clamp(40px, 4.5vw, 72px);
  border-right: 1px solid rgba(34, 76, 232, .16);
}

.about-project .about-project-values article:first-child {
  padding-left: 0;
}

.about-project .about-project-values article:last-child {
  padding-right: 0;
  border-right: 0;
}

.about-value-icon {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border: 1px solid rgba(34, 76, 232, .3);
  border-radius: 50%;
  color: var(--blue);
  line-height: 1;
}

.about-value-icon svg {
  display: block;
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.about-project .about-project-values h3 {
  margin: 32px 0 20px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.about-project .about-project-values p {
  max-width: 370px;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
}

.about-value-arrow {
  display: block;
  margin-top: auto;
  padding-top: 30px;
  color: var(--blue);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 1000px) {
  .about-team-copy {
    grid-column: 1 / span 12;
    padding-right: 0;
  }

  .about-team-copy > p:last-child {
    max-width: 590px;
  }

  .team-members {
    grid-column: 1 / span 12;
    margin-top: 42px;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .about-project .about-project-values article {
    padding-right: 22px;
    padding-left: 22px;
  }

  .about-value-icon {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 640px) {
  .about-project {
    padding-bottom: 18px;
  }

  .about-team {
    display: block;
    margin-top: 60px;
    padding-top: 36px;
  }

  .about-team-copy h3 {
    font-size: 26px;
  }

  .team-members {
    grid-template-columns: 1fr;
    gap: 42px;
    margin-top: 42px;
  }

  .team-member {
    text-align: center;
  }

  .team-avatar {
    max-width: none;
  }

  .about-team + .about-project-values {
    margin-top: 64px;
  }

  .about-project .about-project-values {
    gap: 0;
    padding-top: 36px;
    padding-bottom: 18px;
  }

  .about-project .about-project-values article,
  .about-project .about-project-values article:first-child,
  .about-project .about-project-values article:last-child {
    min-height: 0;
    padding: 36px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(34, 76, 232, .16);
  }

  .about-project .about-project-values article:first-child {
    padding-top: 0;
  }

  .about-project .about-project-values article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .about-value-icon {
    width: 74px;
    height: 74px;
  }

  .about-value-icon svg {
    width: 34px;
    height: 34px;
  }

  .about-project .about-project-values h3 {
    margin-top: 24px;
    font-size: 26px;
  }

  .about-value-arrow {
    margin-top: 0;
  }
}

/* Finalne nadpisanie: smukły proces 01–03. */
.about-team + .about-project-values { margin-top: 72px; }
.about-project .about-project-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 68px 0 38px;
  border-top: 1px solid rgba(102,112,133,.16);
}
.about-project .about-project-values article,
.about-project .about-project-values article:first-child,
.about-project .about-project-values article:last-child {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-content: start;
  align-items: start;
  gap: clamp(26px,2.3vw,42px);
  min-height: 150px;
  padding: 0 clamp(34px,3.6vw,58px);
  border-right: 1px solid rgba(102,112,133,.16);
  border-bottom: 0;
}
.about-project .about-project-values article:first-child { padding-left: 0; }
.about-project .about-project-values article:last-child { padding-right: 0; border-right: 0; }
.about-project .about-value-number {
  color: var(--blue);
  font-size: clamp(42px,3.4vw,56px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.055em;
}
.about-project .about-value-copy { min-width: 0; }
.about-project .about-project-values h3 {
  margin: 2px 0 26px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}
.about-project .about-project-values p {
  max-width: 270px;
  margin: 0;
  color: #343b4a;
  font-size: 16px;
  line-height: 1.65;
}
@media (max-width:900px) {
  .about-project .about-project-values article,
  .about-project .about-project-values article:first-child,
  .about-project .about-project-values article:last-child { gap: 20px; padding-right: 20px; padding-left: 20px; }
  .about-project .about-project-values article:first-child { padding-left: 0; }
  .about-project .about-project-values article:last-child { padding-right: 0; }
}
@media (max-width:640px) {
  .about-team + .about-project-values { margin-top: 58px; }
  .about-project .about-project-values { grid-template-columns: 1fr; padding: 18px 0 6px; }
  .about-project .about-project-values article,
  .about-project .about-project-values article:first-child,
  .about-project .about-project-values article:last-child {
    grid-template-columns: 58px minmax(0,1fr);
    gap: 20px;
    min-height: 0;
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(102,112,133,.16);
  }
  .about-project .about-project-values article:last-child { border-bottom: 0; }
  .about-project .about-value-number { font-size: 42px; }
  .about-project .about-project-values h3 { margin: 1px 0 14px; font-size: 26px; }
  .about-project .about-project-values p { max-width: 300px; font-size: 16px; }
}


/* SOURCE: loader.css */
/* Logo loader */
body.loader-active {
  overflow: hidden;
}

.intro {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background:
    radial-gradient(circle at 50% 48%, rgba(34, 76, 232, .065), transparent 32%),
    #f7f8fc;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity .38s var(--ease), visibility 0s linear .4s;
}

.intro span {
  background-color: transparent;
  transform: none;
  animation: none;
}

.loader-mark {
  position: relative;
  width: clamp(138px, 19.4vw, 265px);
  aspect-ratio: 10.43 / 1;
  filter: drop-shadow(0 14px 30px rgba(34, 76, 232, .07));
}

.loader-logo-row {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  gap: 4%;
  width: 100%;
  height: 100%;
}

.loader-logo-row img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}

.loader-logo-base {
  opacity: .12;
}

.loader-logo-reveal {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: loader-logo-progress 2.2s cubic-bezier(.22, .75, .2, 1) forwards !important;
  will-change: clip-path;
}

.loader-logo-fill {
  filter: none;
}

.loader-line {
  position: relative;
  width: min(170px, 42vw);
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(34, 76, 232, .1);
}

.loader-line i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #111216;
  transform: scaleX(.08);
  transform-origin: left center;
  animation: loader-line-progress 2.2s cubic-bezier(.22, .75, .2, 1) forwards;
}

body.loader-complete .loader-logo-reveal {
  clip-path: inset(0);
  animation: none !important;
  transition: clip-path .42s var(--ease);
}

body.loader-complete .loader-line i {
  transform: scaleX(1);
  animation: none;
  transition: transform .42s var(--ease);
}

body.loader-complete .intro {
  opacity: 0;
  visibility: hidden;
}

@keyframes loader-logo-progress {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 18% 0 0); }
}

@keyframes loader-line-progress {
  from { transform: scaleX(.08); }
  to { transform: scaleX(.82); }
}

@media (max-width: 640px) {
  .intro {
    gap: 22px;
  }

  .loader-mark {
    width: min(170px, 45vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-logo-reveal,
  .loader-line i {
    animation: none !important;
  }
}


/* SOURCE: site-fixes.css */
/* Końcowe korekty wysokości sekcji. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body,
main,
section {
  max-width: 100%;
}

body {
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

.hero {
  width: 100%;
  max-width: 100vw;
}

.header .brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
}

.brand-sygnet {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 19px;
  object-fit: contain;
}

@media (min-width: 901px) {
  .approach-break {
    display: flex;
    min-height: 90svh;
    align-items: center;
    padding-top: clamp(130px, 15vh, 185px);
    padding-bottom: clamp(130px, 15vh, 185px);
  }

  .approach-break-inner {
    align-items: center;
  }
}

@media (max-width: 900px) {
  .approach-break {
    min-height: 90svh;
    padding-top: 105px;
    padding-bottom: 105px;
  }
}

@media (max-width: 640px) {
  html { background: #b8d4fa; }
  body { background: #fff; }

  .header .brand {
    display: inline-flex;
    gap: 8px;
  }

  .brand-sygnet {
    height: 16px;
  }

  .contact-project {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
}


/* SOURCE: v6.css */
/* V6 — nowe tło wyłącznie dla HERO.
   Strzałka, okręgi, grid techniczny i pozostałe warstwy pozostają bez zmian. */
.portfolio-visual.verdant-visual {
  background: #07100d;
}

.portfolio-visual.verdant-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero {
  background-color: #f4f7ff;
  background-image: none;
}

.hero-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform: scale(var(--hero-background-scale, 1));
  transform-origin: 50% 55%;
  opacity: 1;
  contain: paint;
  will-change: transform;
}

body.loaded .hero-background {
  opacity: var(--hero-background-opacity, 1);
}

.hero-background::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 55% at 50% 52%, rgba(255, 255, 255, .94), rgba(239, 246, 255, .48) 44%, transparent 76%);
  opacity: .96;
  transform: scale(1.035);
  transition:
    opacity 1.15s cubic-bezier(.2, .75, .18, 1) .08s,
    transform 1.5s cubic-bezier(.2, .75, .18, 1) .08s;
  will-change: opacity, transform;
}

body.loaded .hero-background::after {
  opacity: 0;
  transform: scale(1);
}

.hero-background-image {
  position: absolute;
  inset: -8%;
  background-image: url("assets/tlo-hero.webp?v=3");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(-2.6%, -1.4%, 0) scale(1.1);
  transform-origin: 50% 52%;
  animation: hero-background-wave 13s ease-in-out infinite;
  animation-play-state: paused;
  opacity: var(--hero-background-base-opacity, 1);
  will-change: transform, opacity;
}

/* Rozmycie wyjścia jest gotową, lekką warstwą obrazu. Zmieniamy wyłącznie
   opacity, więc efekt pozostaje płynny także podczas szybkiego scrollowania. */
.hero-background-image::before,
.hero-background-image::after,
.hero-background-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/tlo-hero-blur.jpg?v=1");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: opacity;
}

/* Przy pierwszym wejściu rozmyta warstwa zasłania całe tło. Jej zanik jest
   zsynchronizowany z wejściem nagłówka, sceny, kart i przycisku HERO. */
.hero-background-image::before {
  opacity: 1;
  transition: opacity 2.35s cubic-bezier(.2, .75, .18, 1) .55s;
}

body.loaded .hero-background-image::before {
  opacity: 0;
}

.hero-background-image::after,
.hero-background-wave::after {
  opacity: var(--hero-background-blur-opacity, 0);
}

body.loaded .hero-background-image {
  animation-play-state: running;
}

.hero-background-wave {
  position: absolute;
  inset: -8%;
  display: none;
  pointer-events: none;
  background-image: url("assets/tlo-hero.webp?v=3");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--hero-wave-overlay-opacity, 0);
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero.is-background-splitting .hero-background-wave {
    display: block;
    will-change: transform, opacity;
  }

  .hero-background-wave-blue {
    -webkit-mask-image: radial-gradient(ellipse 68% 58% at 16% 54%, #000 0 48%, rgba(0, 0, 0, .74) 62%, transparent 82%);
    mask-image: radial-gradient(ellipse 68% 58% at 16% 54%, #000 0 48%, rgba(0, 0, 0, .74) 62%, transparent 82%);
    transform:
      translate3d(var(--hero-wave-blue-x, 0px), var(--hero-wave-blue-y, 0px), 0)
      scale(var(--hero-wave-scale, 1))
      rotate(-.45deg);
  }

  .hero-background-wave-warm {
    -webkit-mask-image: radial-gradient(ellipse 70% 61% at 86% 43%, #000 0 45%, rgba(0, 0, 0, .72) 61%, transparent 82%);
    mask-image: radial-gradient(ellipse 70% 61% at 86% 43%, #000 0 45%, rgba(0, 0, 0, .72) 61%, transparent 82%);
    transform:
      translate3d(var(--hero-wave-warm-x, 0px), var(--hero-wave-warm-y, 0px), 0)
      scale(var(--hero-wave-scale, 1))
      rotate(.45deg);
  }
}

@keyframes hero-background-wave {
  0%, 100% {
    transform: translate3d(-2.6%, -1.4%, 0) scale(1.1) rotate(-.35deg);
  }

  34% {
    transform: translate3d(2.7%, 2.2%, 0) scale(1.17) rotate(.45deg);
  }

  68% {
    transform: translate3d(-.8%, 3.2%, 0) scale(1.135) rotate(-.22deg);
  }
}

@media (max-width: 640px) {
  .hero-background-image {
    inset: -5%;
    background-position: center top;
    background-size: 100% 100%;
    animation-duration: 17s;
  }

  .hero-background-image::before,
  .hero-background-image::after,
  .hero-background-wave::after {
    background-position: center top;
    background-size: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background,
  .hero-background-image,
  .hero-background-wave,
  body.loaded .hero-background-image {
    animation: none;
    transform: none;
  }
}

/* CTA pozostaje idealnie na osi także wtedy, gdy scroll steruje transformacją Y. */
.hero-action .button {
  gap: 12px;
}

.hero-action .button span {
  position: static;
  margin-left: 0;
}

/* Karty mają mleczną powierzchnię od początku — identyczną jak podczas
   ich animowanego wyjścia. */
.hero .glass-card {
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-width: 901px) {
  .hero-action,
  .hero-action.enter-action {
    left: calc(50% - 150px);
    right: auto;
    display: flex;
    justify-content: center;
    width: 300px;
    transform: translate3d(0, 30px, 0);
  }

  body.loaded .hero-action,
  body.loaded .hero-action.enter-action {
    transform: none;
  }
}

/* Scroll exit HERO — efekt głębi bez przechwytywania natywnego scrolla. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* Filtr tła szkła jest wyłączany wyłącznie w czasie ruchu kart.
     Dzięki temu przeglądarka nie przelicza rozmycia całego HERO w każdej klatce. */
  .hero.hero-is-exiting .glass-card {
    background: rgba(255, 255, 255, .68);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hero.hero-scroll-ready .header,
  .hero.hero-scroll-ready .headline,
  .hero.hero-scroll-ready .hero-intro,
  .hero.hero-scroll-ready .hero-action,
  .hero.hero-scroll-ready .glass-card,
  .hero.hero-scroll-ready .interaction-scene,
  .hero.hero-scroll-ready .interaction-scene .ripple,
  .hero.hero-scroll-ready .interaction-scene .impact,
  .hero.hero-scroll-ready .interaction-scene img,
  .hero.hero-scroll-ready .technical-grid,
  .hero.hero-scroll-ready .spark {
    transition: none !important;
    will-change: transform, opacity;
  }

  .hero.hero-scroll-ready .headline,
  .hero.hero-scroll-ready .hero-intro,
  .hero.hero-scroll-ready .hero-action,
  .hero.hero-scroll-ready .glass-card,
  .hero.hero-scroll-ready .interaction-scene .ripple,
  .hero.hero-scroll-ready .interaction-scene .impact,
  .hero.hero-scroll-ready .interaction-scene img {
    will-change: transform, opacity, filter;
  }

  body.loaded .hero.hero-scroll-ready .header {
    opacity: var(--hero-header-opacity, 1);
    transform: translate3d(0, var(--hero-header-y, 0px), 0);
    filter: blur(var(--hero-header-blur, 0px));
  }

  body.loaded .hero.hero-scroll-ready .headline {
    opacity: var(--hero-headline-opacity, 1);
    transform:
      translate3d(0, var(--hero-headline-y, 0px), 0)
      scale(var(--hero-headline-scale, 1));
    filter: blur(var(--hero-headline-blur, 0px));
    transform-origin: 18% 48%;
  }

  body.loaded .hero.hero-scroll-ready .hero-intro {
    opacity: var(--hero-copy-opacity, 1);
    transform: translate3d(0, var(--hero-copy-y, 0px), 0);
    filter: blur(var(--hero-copy-blur, 0px));
  }

  body.loaded .hero.hero-scroll-ready .hero-action {
    opacity: var(--hero-action-opacity, 1);
    transform: translate3d(0, var(--hero-action-y, 0px), 0);
    filter: blur(var(--hero-action-blur, 0px));
  }

  body.loaded .hero.hero-scroll-ready .glass-card.experience {
    opacity: var(--hero-card-left-opacity, 1);
    transform:
      translate3d(var(--hero-card-left-x, 0px), var(--hero-card-left-y, 0px), 0)
      scale(var(--hero-card-left-scale, 1));
    filter: blur(var(--hero-card-left-blur, 0px)) !important;
    transform-origin: 25% 65%;
  }

  body.loaded .hero.hero-scroll-ready .glass-card.areas {
    opacity: var(--hero-card-right-opacity, 1);
    transform:
      translate3d(var(--hero-card-right-x, 0px), var(--hero-card-right-y, 0px), 0)
      scale(var(--hero-card-right-scale, 1));
    filter: blur(var(--hero-card-right-blur, 0px)) !important;
    transform-origin: 75% 45%;
  }

  body.loaded .hero.hero-scroll-ready .interaction-scene.enter-scene {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    filter: none;
  }

  body.loaded .hero.hero-scroll-ready .interaction-scene .ripple {
    animation: none !important;
    opacity: var(--hero-rings-opacity, .78);
    transform:
      translate3d(-50%, calc(-50% + var(--hero-rings-y, 0px)), 0)
      rotateX(66deg)
      scale(var(--hero-rings-scale, 1));
    filter: blur(var(--hero-rings-blur, 0px));
  }

  body.loaded .hero.hero-scroll-ready .interaction-scene .impact {
    opacity: var(--hero-rings-opacity, .78);
    transform:
      translate3d(-50%, calc(-50% + var(--hero-rings-y, 0px)), 0)
      rotateX(60deg)
      scale(var(--hero-rings-scale, 1));
    filter: blur(calc(8px + var(--hero-rings-blur, 0px)));
  }

  .hero.hero-scroll-ready .interaction-scene img,
  .hero.hero-scroll-ready .interaction-scene.parallax-ready img {
    opacity: var(--hero-arrow-opacity, 1);
    transform:
      translate3d(0, var(--hero-arrow-y, 0px), 0)
      rotate(-5deg)
      scale(var(--hero-arrow-scale, 1));
    filter:
      blur(var(--hero-arrow-blur, 0px))
      drop-shadow(0 25px 25px rgba(34, 76, 232, .12));
    transform-origin: 50% 60%;
  }

  body.loaded .hero.hero-scroll-ready .technical-grid {
    opacity: var(--hero-grid-opacity, 1);
    transform:
      translate3d(0, var(--hero-grid-y, 0px), 0)
      scale(var(--hero-grid-scale, 1));
  }

  .hero.hero-scroll-ready .spark {
    animation: none !important;
    opacity: var(--hero-sparks-opacity, 1);
    transform: translate3d(0, var(--hero-sparks-y, 0px), 0);
  }
}

/* Wejście zachowuje skalę i miękkie przesunięcia, lecz nie renderuje
   kosztownego filtra na dużych warstwach pod zasłoniętym loaderem. */
body:not(.loaded) .hero .enter-title,
body:not(.loaded) .hero .enter-scene {
  filter: none;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hero {
    --hero-header-y: 0px !important;
    --hero-headline-y: 0px !important;
    --hero-copy-y: 0px !important;
    --hero-action-y: 0px !important;
    --hero-card-left-x: 0px !important;
    --hero-card-left-y: 0px !important;
    --hero-card-right-x: 0px !important;
    --hero-card-right-y: 0px !important;
    --hero-rings-y: 0px !important;
    --hero-arrow-y: 0px !important;
  }
}


/* SOURCE: technologies.css */
.technology-marquee {
  position: relative;
  overflow: hidden;
  padding: 36px 0;
  background: #fff;
}

.technology-marquee-viewport {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.technology-marquee-track {
  display: flex;
  width: max-content;
  animation: technology-marquee 32s linear infinite;
  will-change: transform;
}

.technology-marquee:hover .technology-marquee-track {
  animation-play-state: paused;
}

.technology-list {
  display: flex;
  flex: 0 0 auto;
  gap: 18px;
  margin: 0;
  padding: 0 9px;
  list-style: none;
}

.technology-card {
  display: grid;
  flex: 0 0 148px;
  width: 148px;
  min-height: 108px;
  padding: 10px 14px;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #8d929d;
}

.technology-card small {
  color: #858b97;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}

.technology-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #8d929d;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.06em;
}

.technology-mark.is-round {
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 700;
}

.technology-mark.is-bubble {
  position: relative;
  height: 47px;
  border: 2px solid currentColor;
  border-radius: 15px 15px 15px 5px;
  font-size: 16px;
}

.technology-mark.is-oval {
  height: 42px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 17px;
  font-style: italic;
  text-transform: lowercase;
}

.technology-mark.is-square {
  width: 51px;
  height: 51px;
  padding: 6px;
  place-items: end;
  background: #8d929d;
  color: #fff;
  font-size: 17px;
}

.technology-mark.is-shield {
  width: 53px;
  height: 57px;
  padding-top: 2px;
  border: 2px solid currentColor;
  clip-path: polygon(7% 0, 93% 0, 84% 83%, 50% 100%, 16% 83%);
  font-size: 22px;
}

.technology-mark.is-wordmark {
  width: 74px;
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.055em;
}

.technology-mark.is-diamond {
  width: 45px;
  height: 45px;
  border: 2px solid currentColor;
  border-radius: 7px;
  transform: rotate(45deg);
}

.technology-mark.is-diamond span {
  font-size: 14px;
  transform: rotate(-45deg);
}

.technology-mark.is-code {
  width: 70px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: -.12em;
}

.technology-mark.is-figma {
  grid-template-columns: repeat(2, 16px);
  grid-template-rows: repeat(3, 16px);
  width: 34px;
  height: 50px;
  gap: 1px;
}

.technology-mark.is-figma i {
  width: 16px;
  height: 16px;
  border: 1.5px solid #8d929d;
}

.technology-mark.is-figma i:nth-child(1) { border-radius: 9px 0 0 9px; }
.technology-mark.is-figma i:nth-child(2) { border-radius: 0 9px 9px 0; }
.technology-mark.is-figma i:nth-child(3) { border-radius: 9px 0 0 9px; }
.technology-mark.is-figma i:nth-child(4) { border-radius: 50%; }
.technology-mark.is-figma i:nth-child(5) { border-radius: 9px 0 9px 9px; }

/* W czarnej sekcji karuzela jest pełnoekranowym, lekkim podpisem sekcji. */
.approach-break > .technology-marquee-dark {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: transparent;
}

.technology-marquee-dark .technology-card,
.technology-marquee-dark .technology-mark {
  color: #aeb4c0;
}

.technology-marquee-dark .technology-card small {
  color: #939aa8;
}

.technology-marquee-dark .technology-mark.is-square {
  background: #aeb4c0;
  color: #030405;
}

.technology-marquee-dark .technology-mark.is-figma i {
  border-color: #aeb4c0;
}

@media (min-width: 641px) {
  .approach-break {
    padding-bottom: clamp(155px, 17vh, 185px);
  }
}

@keyframes technology-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 640px) {
  .technology-marquee {
    padding: 30px 0;
  }

  .technology-marquee-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }

  .technology-list {
    gap: 12px;
    padding-inline: 6px;
  }

  .technology-card {
    flex-basis: 122px;
    width: 122px;
    min-height: 98px;
  }

  .technology-mark {
    transform: scale(.88);
  }

  .technology-mark.is-diamond {
    transform: rotate(45deg) scale(.88);
  }

  .approach-break > .technology-marquee-dark {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100vw;
    margin: 42px 0 -65px calc(50% - 50vw);
    padding: 18px 0 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .technology-marquee-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .technology-marquee-track {
    animation: none;
  }

  .technology-list[aria-hidden="true"] {
    display: none;
  }
}
/* Karuzela technologii ukryta w wersji PL i EN. */
.technology-marquee {
  display: none !important;
}


/* SOURCE: v7-motion.css */
/* V7 — jeden, spokojny język ruchu dla całej polskiej strony.
   Animacje wzmacniają hierarchię, ale nie przechwytują natywnego scrolla. */

:root {
  --v7-motion-ease: cubic-bezier(.2, .78, .18, 1);
  --v7-motion-blue: #224ce8;
}

/* Natywny poziomy scroll obsługuje gładzik, a pionowy gest nadal przechodzi
   do strony. overscroll-behavior chroni przed gestem wstecz/dalej na krawędzi. */
.portfolio-track {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

.portfolio-track img,
.portfolio-track a {
  -webkit-user-drag: none;
}

/* Pełnoekranowe falowanie działa wyłącznie wtedy, gdy HERO jest blisko
   viewportu. Po przejściu dalej GPU nie renderuje niewidocznej animacji. */
body.loaded .hero-background-image {
  animation-play-state: paused;
}

body.loaded .hero.v7-hero-visible .hero-background-image {
  animation-play-state: running;
}

/* Stały blur na fixed menu powodował ponowne próbkowanie całego obszaru
   pod nawigacją w każdej klatce scrolla. Prawie identyczny mleczny wygląd
   daje zwykłe półprzezroczyste tło, bez kosztu backdrop-filter. */
.floating-nav {
  background: rgba(250, 251, 253, .9);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Delikatne światło łączy jasne sekcje bez dokładania kolejnych grafik. */
.about-project,
.offer-project,
.portfolio-project {
  position: relative;
  isolation: isolate;
}

.about-project::before,
.offer-project::before,
.portfolio-project::before {
  position: absolute;
  z-index: 0;
  width: min(620px, 46vw);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, rgba(74, 119, 255, .095), rgba(129, 163, 255, .035) 42%, transparent 71%);
  opacity: .72;
  transform: translate3d(0, 0, 0) scale(.96);
  animation: v7-light-drift 19s ease-in-out infinite;
  animation-play-state: paused;
  contain: layout paint;
}

.about-project::before {
  top: 8%;
  left: -20vw;
}

.offer-project::before {
  top: 23%;
  right: -16vw;
}

.portfolio-project::before {
  top: 4%;
  left: 30%;
}

.about-project.v7-section-active::before,
.offer-project.v7-section-active::before,
.portfolio-project.v7-section-active::before {
  animation-play-state: running;
}

.about-project-inner,
.offer-project-inner,
.portfolio-project-inner {
  position: relative;
  z-index: 1;
}

@keyframes v7-light-drift {
  0%, 100% { transform: translate3d(-3%, -2%, 0) scale(.96); opacity: .55; }
  48% { transform: translate3d(9%, 5%, 0) scale(1.1); opacity: .82; }
}

/* Odsłonięcia sekcji opierają się tylko na transform i opacity.
   Te właściwości są kompozytowane przez GPU i nie wymuszają ponownego
   rasteryzowania dużych fragmentów strony podczas przewijania. */
body.v7-motion-ready .v7-reveal {
  --v7-reveal-y: 28px;
  opacity: 0;
  filter: none !important;
  transform: translate3d(0, var(--v7-reveal-y), 0) scale(.99);
  transition:
    opacity .68s var(--v7-motion-ease) var(--v7-delay, 0ms),
    transform .78s var(--v7-motion-ease) var(--v7-delay, 0ms);
}

body.v7-motion-ready .v7-reveal:not(.v7-settled) {
  will-change: opacity, transform;
}

body.v7-motion-ready .v7-reveal.v7-from-left {
  --v7-reveal-x: -34px;
  transform: translate3d(var(--v7-reveal-x), var(--v7-reveal-y), 0) scale(.99);
}

body.v7-motion-ready .v7-reveal.v7-from-right {
  --v7-reveal-x: 34px;
  transform: translate3d(var(--v7-reveal-x), var(--v7-reveal-y), 0) scale(.99);
}

body.v7-motion-ready .v7-reveal.is-v7-visible {
  --v7-reveal-y: 0px;
  --v7-reveal-x: 0px;
  opacity: 1;
  transform: translate3d(var(--v7-reveal-x, 0px), 0, 0) scale(1);
}

body.v7-motion-ready .v7-reveal.v7-settled {
  will-change: auto;
}

/* Różne obiekty 3D zachowują się jak jeden system identyfikacji. */
.v7-motion-object {
  --v7-object-y: 0px;
  --v7-object-rx: 0deg;
  --v7-object-ry: 0deg;
  --v7-object-scale: 1;
  transform:
    translate3d(0, var(--v7-object-y), 0)
    perspective(1100px)
    rotateX(var(--v7-object-rx))
    rotateY(var(--v7-object-ry))
    scale(var(--v7-object-scale));
  transform-origin: center;
  transition: filter .35s ease;
}

.v7-motion-object.v7-object-active {
  will-change: transform;
}

.approach-code:hover .v7-motion-object,
.contact-art:hover .v7-motion-object {
  filter: brightness(1.045) saturate(1.04);
}

/* Portfolio: wizualne "wyostrzenie" tworzy lekka zasłona, zamiast filtra
   blur nakładanego na cały, duży screenshot. */
body.v7-motion-ready .portfolio-card {
  opacity: .62;
  transform: translate3d(0, 18px, 0) scale(.982);
  transition:
    opacity .68s var(--v7-motion-ease),
    transform .78s var(--v7-motion-ease);
  will-change: opacity, transform;
}

body.v7-motion-ready .portfolio-card.is-v7-card-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

.portfolio-card .portfolio-visual {
  position: relative;
  isolation: isolate;
  transition: box-shadow .55s ease, transform .55s var(--v7-motion-ease);
}

.portfolio-card .portfolio-visual::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
  background: rgba(243, 246, 252, .56);
  opacity: 1;
  transition: opacity .72s var(--v7-motion-ease);
}

.portfolio-card.is-v7-card-visible .portfolio-visual::after {
  opacity: 0;
}

.portfolio-card:hover .portfolio-visual {
  transform: translateY(-6px) scale(1.008);
  box-shadow: 0 30px 72px rgba(28, 42, 70, .17);
}

/* Mikrointerakcje przycisków — maksymalnie kilka pikseli ruchu. */
.v7-magnetic {
  --v7-magnet-x: 0px;
  --v7-magnet-y: 0px;
  transform: translate3d(var(--v7-magnet-x), var(--v7-magnet-y), 0);
  transition: transform .3s var(--v7-motion-ease), box-shadow .3s ease;
}

.v7-magnetic:hover {
  transform: translate3d(var(--v7-magnet-x), calc(var(--v7-magnet-y) - 2px), 0);
}

.portfolio-controls button.v7-magnetic:hover {
  border-color: rgba(34, 76, 232, .42);
  box-shadow: 0 12px 28px rgba(34, 76, 232, .12);
}

.contact-main-link.v7-magnetic {
  transform-origin: left center;
}

@media (max-width: 900px) {
  body.loaded .hero-background-image,
  body.loaded .hero.v7-hero-visible .hero-background-image {
    animation: none !important;
  }

  .about-project::before,
  .offer-project::before,
  .portfolio-project::before {
    width: 86vw;
    opacity: .48;
    animation: none;
  }

  body.v7-motion-ready .v7-reveal,
  body.v7-motion-ready .v7-reveal.v7-from-left,
  body.v7-motion-ready .v7-reveal.v7-from-right {
    --v7-reveal-y: 16px;
    --v7-reveal-x: 0px;
  }

  .v7-motion-object {
    transform: none !important;
    will-change: auto;
  }

  .v7-magnetic,
  .v7-magnetic:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-project::before,
  .offer-project::before,
  .portfolio-project::before {
    animation: none !important;
  }

  body.v7-motion-ready .v7-reveal,
  body.v7-motion-ready .portfolio-card,
  .v7-motion-object,
  .v7-magnetic {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* V7: w HERO pozostają szybkie transformacje i opacity. Rozmycie dużych
   elementów podczas scrolla było najdroższą częścią animacji. Tło nadal
   mięknie przez gotową, małą warstwę JPG z v6.css. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  body.loaded .hero.hero-scroll-ready .header,
  body.loaded .hero.hero-scroll-ready .headline,
  body.loaded .hero.hero-scroll-ready .hero-intro,
  body.loaded .hero.hero-scroll-ready .hero-action,
  body.loaded .hero.hero-scroll-ready .glass-card.experience,
  body.loaded .hero.hero-scroll-ready .glass-card.areas,
  body.loaded .hero.hero-scroll-ready .interaction-scene .ripple {
    filter: none !important;
  }

  .hero.hero-scroll-ready .interaction-scene img,
  .hero.hero-scroll-ready .interaction-scene.parallax-ready img {
    filter: drop-shadow(0 25px 25px rgba(34, 76, 232, .12)) !important;
  }

  .hero.hero-scroll-ready:not(.hero-is-exiting) .header,
  .hero.hero-scroll-ready:not(.hero-is-exiting) .headline,
  .hero.hero-scroll-ready:not(.hero-is-exiting) .hero-intro,
  .hero.hero-scroll-ready:not(.hero-is-exiting) .hero-action,
  .hero.hero-scroll-ready:not(.hero-is-exiting) .glass-card,
  .hero.hero-scroll-ready:not(.hero-is-exiting) .interaction-scene,
  .hero.hero-scroll-ready:not(.hero-is-exiting) .technical-grid,
  .hero.hero-scroll-ready:not(.hero-is-exiting) .spark {
    will-change: auto;
  }
}


/* SOURCE: language.css */
.floating-nav .language-switch {
  display: grid;
  min-width: 44px;
  margin-left: 5px;
  padding-inline: 13px;
  place-items: center;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
}

.floating-nav .language-switch:hover,
.floating-nav .language-switch:focus-visible {
  border-color: #173dcc;
  background: #173dcc;
  color: #fff;
  box-shadow: none;
}

@media (max-width: 900px) {
  .floating-nav .language-switch {
    min-width: 0;
    width: max-content;
    margin: 5px 0 0;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--blue);
    box-shadow: none;
  }

  .floating-nav .language-switch:hover,
  .floating-nav .language-switch:focus-visible {
    border: 0;
    background: transparent;
    color: #173dcc;
    box-shadow: none;
  }
}


/* SOURCE: hero-variants.css */
/* Niezależne warianty HERO do porównania z planszami referencyjnymi. */
.hero-variant-1 .hero {
  background-color: #f5f8ff;
}

.hero-variant-2 .hero {
  background-color: #f4f7ff;
}

.hero-variant-3 .hero {
  background-color: #f5f8ff;
}

.hero-variant-4 .hero {
  background-color: #f7f8fc;
}

.hero-variant-5 .hero {
  background-color: #f4f8ff;
}

.hero-variant-6 .hero {
  background-color: #f7faff;
}

.hero-variant-6 .hero-background-image {
  inset: 0;
  background-image: url("assets/hero-background-v6-stairs.png?v=1");
  background-position: center center;
  background-size: 44% auto;
  background-repeat: no-repeat;
  animation: hero-stairs-whole-float 9s ease-in-out infinite alternate;
}

.hero-variant-6 .hero-background-image::before,
.hero-variant-6 .hero-background-image::after {
  background-image: url("assets/hero-background-v6-stairs.png?v=1");
  background-position: center center;
  background-size: 44% auto;
  background-repeat: no-repeat;
}

.hero-variant-6 .hero-background-wave,
.hero-variant-6 .interaction-scene {
  display: none !important;
}

@keyframes hero-stairs-whole-float {
  from {
    transform: translate3d(-.6%, .35%, 0) scale(1.035);
  }
  to {
    transform: translate3d(.65%, -.55%, 0) scale(1.055);
  }
}

@media (max-width: 900px) {
  .hero-variant-6 .hero-background-image,
  .hero-variant-6 .hero-background-image::before,
  .hero-variant-6 .hero-background-image::after {
    background-position: 56% center;
  }
}

@media (max-width: 640px) {
  .hero-variant-6 .hero-background-image {
    inset: 0;
    background-position: 58% center;
    background-size: auto 46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-variant-6 .hero-background-image {
    animation: none;
    transform: scale(1.045);
  }
}

/* Wariant 7: dotychczasowy układ hero w ciemnej, neonowej kolorystyce. */
.hero-variant-7 .hero {
  color: #f7f9ff;
  background: #020617;
}

.hero-variant-7 .hero-background {
  background: #020617;
}

.hero-variant-7 .hero-background::after {
  background: #020617;
}

.hero-variant-7 .hero-background-image {
  inset: -2%;
  opacity: 1;
  background-color: #020617;
  background-image: url("assets/hero-background-v7-neon-stairs.png?v=1");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: 58% 58%;
  animation: hero-neon-stairs-drift 12s ease-in-out infinite alternate;
}

.hero-variant-7 .hero-background-image::before,
.hero-variant-7 .hero-background-image::after,
.hero-variant-7 .hero-background-wave,
.hero-variant-7 .interaction-scene {
  display: none !important;
}

.hero-variant-7 .header .brand img,
.hero-variant-7 .header .brand span {
  filter: brightness(0) invert(1);
}

.hero-variant-7 .headline h1 span {
  color: #f8faff;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}

.hero-variant-7 .headline h1 em,
.hero-variant-7 .headline-services i,
.hero-variant-7 .hero .glass-card strong {
  color: #3f6dff;
}

.hero-variant-7 .headline-services,
.hero-variant-7 .hero-intro {
  color: rgba(232, 239, 255, .76);
}

.hero-variant-7 .hero .glass-card {
  color: #f7f9ff;
  background: rgba(5, 13, 36, .76);
  border-color: rgba(67, 112, 255, .42);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(123, 157, 255, .18),
    0 0 34px rgba(28, 82, 255, .1);
}

.hero-variant-7 .hero .glass-card h2,
.hero-variant-7 .hero .support-list li {
  color: #f4f7ff;
}

.hero-variant-7 .hero .glass-card p {
  color: rgba(218, 228, 252, .68);
}

.hero-variant-7 .hero .support-list li::before {
  background: #2259ff;
  box-shadow: 0 0 14px rgba(49, 103, 255, .48);
}

.hero-variant-7 .hero .button {
  background: #164cff;
  border: 1px solid rgba(105, 145, 255, .64);
  box-shadow: 0 10px 34px rgba(16, 73, 255, .34);
}

.hero-variant-7 .hero .header-cta {
  color: #dce7ff;
  background: rgba(4, 10, 29, .5);
  border-color: rgba(48, 102, 255, .82);
}

.hero-variant-7 .floating-nav {
  background: #030818cc;
  border-color: rgba(66, 105, 218, .34);
  box-shadow:
    0 14px 42px rgba(0, 0, 0, .28),
    inset 0 1px rgba(116, 151, 255, .12);
}

.hero-variant-7 .floating-nav a,
.hero-variant-7 .floating-nav .language-switch {
  color: rgba(239, 244, 255, .86);
  border-color: transparent;
}

.hero-variant-7 .floating-nav a.active {
  color: #6f91ff;
  background: rgba(25, 67, 188, .2);
  box-shadow: inset 0 0 0 1px rgba(57, 105, 255, .42);
}

.hero-variant-7 .replay {
  color: #7b9aff;
  background: rgba(3, 9, 29, .72);
  border-color: rgba(66, 111, 255, .46);
}

.hero-variant-7 .menu-button {
  background: rgba(5, 13, 36, .86);
  border: 1px solid rgba(66, 111, 255, .4);
}

.hero-variant-7 .menu-button i {
  background: #7b9aff;
}

@keyframes hero-neon-stairs-drift {
  from {
    transform: translate3d(-.4%, .3%, 0) scale(1.035);
  }
  to {
    transform: translate3d(.5%, -.45%, 0) scale(1.055);
  }
}

@media (max-width: 900px) {
  .hero-variant-7 .hero-background-image {
    inset: 0;
    background-position: 58% center;
  }
}

@media (max-width: 640px) {
  .hero-variant-7 .hero-background-image {
    background-position: 61% center;
    background-size: auto 100%;
  }

  .hero-variant-7 .hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 6, 23, .06), rgba(2, 6, 23, .18));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-variant-7 .hero-background-image {
    animation: none;
    transform: scale(1.04);
  }
}

/* Wariant 8: ostatnia animacja samolotu i odsłanianych schodów jako tło hero. */
.hero-variant-8 .hero-background {
  background: #020617;
}

.hero-variant-8 .hero-animation-frame {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: #020617;
}

.hero-variant-8 .hero-background-image,
.hero-variant-8 .hero-background-wave,
.hero-variant-8 .interaction-scene,
.hero-variant-8 .replay {
  display: none !important;
}

@media (max-width: 640px) {
  .hero-variant-8 .hero-animation-frame {
    width: 112%;
    max-width: none;
    transform: translateX(-6%);
  }
}

.hero-variant-4 .hero-background-image,
.hero-variant-4 .hero-background-wave {
  background-image: url("assets/hero-background-v4.jpg?v=1");
}

.hero-variant-5 .hero-background-image,
.hero-variant-5 .hero-background-wave {
  background-image: url("assets/hero-background-v5.jpg?v=1");
}

.hero-variant-2 .hero-background-image,
.hero-variant-2 .hero-background-wave {
  background-image: url("assets/hero-background-v2-ring.jpg?v=1");
}

.hero-variant-3 .hero-background-image,
.hero-variant-3 .hero-background-wave {
  background-image: url("assets/hero-background-v1.jpg?v=1");
}

.hero-variant-3 .hero-background-image::before,
.hero-variant-3 .hero-background-image::after,
.hero-variant-3 .hero-background-wave::after {
  background-image: url("assets/hero-background-v1.jpg?v=1");
  filter: blur(12px);
  transform: scale(1.04);
}

.hero-variant-3 .interaction-scene {
  display: none;
}

.stair-scene {
  position: absolute;
  z-index: 7;
  top: 52%;
  left: 55%;
  width: min(48vw, 720px);
  height: min(47vw, 660px);
  pointer-events: none;
  perspective: 1300px;
  transform: translate(-50%, -50%);
}

.stair-scene .stair-step {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  will-change: transform, opacity;
}

.stair-scene .stair-step img {
  display: block;
  width: 118%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(34, 76, 232, .14));
  will-change: transform;
}

.stair-scene .stair-step-1 {
  z-index: 5;
  --column-y: 24%;
  --stair-x: -32%;
  --stair-y: 23%;
  --stair-scale: 1;
  --stair-opacity: .96;
  --float-duration: 6.4s;
  --float-delay: -1.2s;
}

.stair-scene .stair-step-2 {
  z-index: 4;
  --column-y: 12%;
  --stair-x: -16%;
  --stair-y: 11.5%;
  --stair-scale: .95;
  --stair-opacity: .86;
  --float-duration: 5.8s;
  --float-delay: -2.6s;
}

.stair-scene .stair-step-3 {
  z-index: 3;
  --column-y: 0%;
  --stair-x: 0%;
  --stair-y: 0%;
  --stair-scale: .9;
  --stair-opacity: .76;
  --float-duration: 6.1s;
  --float-delay: -3.3s;
}

.stair-scene .stair-step-4 {
  z-index: 2;
  --column-y: -12%;
  --stair-x: 16%;
  --stair-y: -11.5%;
  --stair-scale: .85;
  --stair-opacity: .66;
  --float-duration: 6.7s;
  --float-delay: -4.4s;
}

.stair-scene .stair-step-5 {
  z-index: 1;
  --column-y: -24%;
  --stair-x: 32%;
  --stair-y: -23%;
  --stair-scale: .8;
  --stair-opacity: .56;
  --float-duration: 5.6s;
  --float-delay: -5.1s;
}

body.loaded .stair-scene .stair-step {
  animation: hero-stairs-unfold 2.6s cubic-bezier(.2, .78, .18, 1) .72s both;
}

body.loaded .stair-scene .stair-step img {
  animation: hero-stair-float var(--float-duration) ease-in-out calc(3.32s + var(--float-delay)) infinite alternate;
}

@keyframes hero-stairs-unfold {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--column-y), 0) scale(.84);
  }
  14% {
    opacity: var(--stair-opacity);
    transform: translate3d(0, var(--column-y), 0) scale(var(--stair-scale));
  }
  43% {
    opacity: var(--stair-opacity);
    transform: translate3d(0, var(--column-y), 0) scale(var(--stair-scale));
  }
  100% {
    opacity: var(--stair-opacity);
    transform: translate3d(var(--stair-x), var(--stair-y), 0) scale(var(--stair-scale));
  }
}

@keyframes hero-stair-float {
  from { transform: translate3d(0, -3px, 0); }
  to { transform: translate3d(0, 5px, 0); }
}

@media (max-width: 900px) {
  .stair-scene {
    top: 63%;
    left: 52%;
    width: min(72vw, 650px);
    height: min(76vw, 620px);
  }
}

@media (max-width: 640px) {
  .stair-scene {
    top: 68%;
    left: 50%;
    width: min(100vw, 520px);
    height: min(115vw, 560px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.loaded .stair-scene .stair-step {
    opacity: var(--stair-opacity);
    transform: translate3d(var(--stair-x), var(--stair-y), 0) scale(var(--stair-scale));
    animation: none;
  }

  body.loaded .stair-scene .stair-step img {
    animation: none;
  }
}

.hero-variant-1 .hero-background-image,
.hero-variant-1 .hero-background-wave {
  background-image: url("assets/hero-background-v1.jpg?v=1");
}

.hero-variant-1 .hero-background-image::before,
.hero-variant-1 .hero-background-image::after,
.hero-variant-1 .hero-background-wave::after {
  background-image: url("assets/hero-background-v1.jpg?v=1");
  filter: blur(12px);
  transform: scale(1.04);
}

.hero-variant-1 .interaction-scene {
  display: none;
}

.layer-stack-scene {
  position: absolute;
  z-index: 7;
  top: 49%;
  left: 50%;
  width: min(31vw, 470px);
  height: min(45vw, 620px);
  pointer-events: none;
  perspective: 1200px;
  transform: translate(-50%, -50%);
}

.layer-stack-scene .stack-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(var(--layer-x), 0, 0) scale(.86);
  transition:
    opacity .85s ease var(--layer-delay),
    transform 1.55s cubic-bezier(.2, .78, .18, 1) var(--layer-delay);
  will-change: transform, opacity;
}

.layer-stack-scene .stack-layer img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 22px rgba(34, 76, 232, .13));
  animation: hero-glass-layer-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
}

.layer-stack-scene .stack-layer-a {
  z-index: 4;
  --layer-x: -2%;
  --layer-y: -19%;
  --layer-scale: 1;
  --layer-opacity: .96;
  --layer-delay: .92s;
  --float-duration: 5.4s;
  --float-delay: -1.2s;
}

.layer-stack-scene .stack-layer-b {
  z-index: 3;
  --layer-x: 1%;
  --layer-y: -6%;
  --layer-scale: .96;
  --layer-opacity: .78;
  --layer-delay: 1.04s;
  --float-duration: 6.1s;
  --float-delay: -2.7s;
}

.layer-stack-scene .stack-layer-c {
  z-index: 2;
  --layer-x: -1%;
  --layer-y: 8%;
  --layer-scale: .92;
  --layer-opacity: .62;
  --layer-delay: 1.16s;
  --float-duration: 5.8s;
  --float-delay: -3.5s;
}

.layer-stack-scene .stack-layer-d {
  z-index: 1;
  --layer-x: 2%;
  --layer-y: 22%;
  --layer-scale: .88;
  --layer-opacity: .44;
  --layer-delay: 1.28s;
  --float-duration: 6.6s;
  --float-delay: -4.1s;
}

body.loaded .layer-stack-scene .stack-layer {
  opacity: var(--layer-opacity);
  transform: translate3d(var(--layer-x), var(--layer-y), 0) scale(var(--layer-scale));
}

@keyframes hero-glass-layer-float {
  from { transform: translate3d(0, -4px, 0) rotate(-.25deg); }
  to { transform: translate3d(0, 6px, 0) rotate(.25deg); }
}

@media (max-width: 900px) {
  .layer-stack-scene {
    top: 62%;
    width: min(56vw, 450px);
    height: min(70vw, 560px);
  }
}

@media (max-width: 640px) {
  .layer-stack-scene {
    top: 66%;
    width: min(84vw, 420px);
    height: min(105vw, 520px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layer-stack-scene .stack-layer {
    transition: none;
  }

  .layer-stack-scene .stack-layer img {
    animation: none;
  }
}

.hero-variant-2 .hero-background-image::before,
.hero-variant-2 .hero-background-image::after,
.hero-variant-2 .hero-background-wave::after {
  background-image: url("assets/hero-background-v2-ring.jpg?v=1");
  filter: blur(12px);
  transform: scale(1.04);
}

.hero-variant-2 .interaction-scene {
  display: none;
}

.hero-variant-4 .hero-background-image::before,
.hero-variant-4 .hero-background-image::after,
.hero-variant-4 .hero-background-wave::after {
  background-image: url("assets/hero-background-v4.jpg?v=1");
  filter: blur(12px);
  transform: scale(1.04);
}

.hero-variant-5 .hero-background-image::before,
.hero-variant-5 .hero-background-image::after,
.hero-variant-5 .hero-background-wave::after {
  background-image: url("assets/hero-background-v5.jpg?v=1");
  filter: blur(12px);
  transform: scale(1.04);
}


/* SOURCE: hero-v9.css */
html,
body.hero-v9-preview {
  width: 100%;
  height: 100%;
  background: #020617;
}

body.hero-v9-preview {
  overflow: hidden;
}

.hero-v9-preview main,
.hero-v9-preview .hero {
  width: 100%;
  height: 100svh;
  min-height: 760px;
}

.hero-variant-9 .hero-animation-frame {
  z-index: 0;
}

.hero-v9-preview.hero-variant-9 .headline,
.hero-v9-preview.hero-variant-9 .hero-intro,
.hero-v9-preview.hero-variant-9 .glass-card,
.hero-v9-preview.hero-variant-9 .hero-action,
.hero-v9-preview.hero-variant-9 .header,
.hero-v9-preview.hero-variant-9 .spark {
  pointer-events: none;
}

.hero-variant-9 .replay {
  display: grid !important;
  place-items: center;
  color: #9ab1ff;
  background: rgba(5, 13, 36, .82);
  border-color: rgba(86, 126, 255, .52);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-variant-9 .replay:hover {
  color: #fff;
  border-color: rgba(123, 157, 255, .82);
}

@media (max-width: 900px) {
  .hero-v9-preview .hero {
    height: 100svh;
    min-height: 860px;
  }
}

@media (max-width: 640px) {
  .hero-v9-preview .hero {
    min-height: 780px;
  }

  .hero-variant-9 .hero-animation-frame {
    display: none !important;
  }

  .hero-variant-9 .hero-background-image {
    display: block !important;
    inset: 0;
    background-image: url("assets/hero-mobile-static-v1.webp");
    background-position: center center;
    background-size: auto 100%;
    animation: none !important;
    opacity: 1;
    transform: none !important;
  }

  .hero-variant-9 .hero-background-image::before,
  .hero-variant-9 .hero-background-image::after,
  .hero-variant-9 .hero-background-wave,
  .hero-variant-9 .replay {
    display: none !important;
  }

  .hero-variant-9 .hero *,
  .hero-variant-9 .hero *::before,
  .hero-variant-9 .hero *::after {
    animation: none !important;
    transition-duration: 0s !important;
  }
}


/* SOURCE: wordpress-modal.css */
.offer-card-trigger{cursor:pointer;margin:-22px;padding:60px 22px 24px;border:1px solid transparent;border-radius:18px;background:transparent;box-shadow:none;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease}.offer-card-trigger:hover,.offer-card-trigger:focus-visible{border-color:rgba(102,137,255,.5);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(237,243,255,.6));-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);box-shadow:0 22px 58px rgba(34,76,232,.14),inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 34px rgba(255,255,255,.48);transform:translateY(-4px)}.offer-card-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:5px}.offer-card-more{display:flex;align-items:center;gap:18px;margin-top:28px;color:var(--blue);font-size:14px;font-weight:600}.offer-card-more i{font-size:22px;font-style:normal;transition:transform .25s ease}.offer-card-trigger:hover .offer-card-more i,.offer-card-trigger:focus-visible .offer-card-more i{transform:translateX(5px)}
@media(max-width:640px){.offer-card-trigger{margin:-14px;padding:52px 14px 20px}.offer-card-more{margin-top:22px}}
.wp-modal{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;padding:28px;visibility:hidden;opacity:0;transition:opacity .28s ease,visibility 0s linear .28s}.wp-modal.is-open{visibility:visible;opacity:1;transition-delay:0s}.wp-modal-backdrop{position:absolute;inset:0;background:rgba(11,17,31,.63);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.wp-modal-dialog{position:relative;width:min(80vw,1320px);max-height:calc(100dvh - 56px);overflow:auto;padding:50px 58px 42px;border:1px solid rgba(34,76,232,.1);border-radius:30px;background:#fff;box-shadow:0 40px 100px rgba(4,13,34,.28);color:#111522;opacity:0;transform:scale(.965) translateY(10px);transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)}.wp-modal.is-open .wp-modal-dialog{opacity:1;transform:scale(1) translateY(0)}.wp-modal-close{position:absolute;z-index:4;top:22px;right:26px;width:42px;height:42px;border:0;background:transparent;color:#131827;font:300 32px/1 Inter,sans-serif;cursor:pointer}.wp-modal-close:hover{color:var(--blue)}
.wp-modal-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:42px;min-height:285px;padding:4px 8px 36px;border-bottom:1px solid #e6eaf2}.wp-modal-mark{display:block;margin-bottom:22px;color:var(--blue);font-size:27px}.wp-modal-intro h2{margin:0;font-size:clamp(40px,3vw,50px);line-height:1.05;letter-spacing:-.045em}.wp-modal-intro h3{margin:16px 0 25px;color:var(--blue);font-size:18px}.wp-modal-intro p{max-width:690px;margin:0 0 14px;color:#343b4a;font-size:15px;line-height:1.7}
.wp-modal-art{position:relative;min-height:220px;background:radial-gradient(circle,rgba(34,76,232,.13),transparent 65%)}.wp-browser{position:absolute;width:190px;height:135px;border:1px solid rgba(34,76,232,.25);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(220,231,255,.58));box-shadow:0 18px 45px rgba(34,76,232,.14);transform:skewY(-5deg)}.wp-browser:before{content:'•••';display:block;padding:6px 10px;border-bottom:1px solid rgba(34,76,232,.12);color:#85a6ff;letter-spacing:3px}.wp-browser-a{top:25px;left:10px}.wp-browser-b{right:0;bottom:12px;transform:skewY(5deg) scale(.84)}.wp-logo{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:70px;height:70px;border:2px solid #fff;border-radius:50%;background:var(--blue);box-shadow:0 12px 28px rgba(34,76,232,.3);color:#fff;font:500 34px Georgia,serif;transform:translate(-50%,-50%)}
.woo-modal-mark{font-size:31px}.woo-modal-art .wp-browser-a{width:220px;height:150px}.woo-modal-art .wp-browser-b{right:5px;bottom:2px}.woo-logo{width:76px;height:52px;border-radius:13px;background:linear-gradient(135deg,#7e62ef,#4c31c7);font:600 18px Inter,sans-serif;transform:translate(-54%,-48%) rotate(-4deg)}.woo-cart{position:absolute;z-index:3;right:27px;top:30px;color:var(--blue);font-size:31px}
.care-modal-mark{font-size:32px}.care-modal-art{position:relative}.care-dashboard{position:absolute;left:12px;top:28px;width:205px;height:145px;padding:40px 18px 16px;border:1px solid rgba(34,76,232,.25);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(222,233,255,.65));box-shadow:0 18px 45px rgba(34,76,232,.14)}.care-dashboard:before{content:'•••';position:absolute;left:13px;top:8px;color:#85a6ff;letter-spacing:3px}.care-dashboard i{display:inline-block;width:24px;margin:0 5px;border-radius:4px 4px 0 0;background:linear-gradient(#7aa6ff,var(--blue));vertical-align:bottom}.care-dashboard i:nth-child(1){height:45px}.care-dashboard i:nth-child(2){height:72px}.care-dashboard i:nth-child(3){height:57px}.care-server{position:absolute;right:7px;bottom:24px;display:grid;place-items:center;width:100px;height:75px;border-radius:10px;background:linear-gradient(145deg,#e9f0ff,#fff);box-shadow:0 14px 32px rgba(34,76,232,.15);color:#87a9ff;font-size:38px}.care-cloud{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:82px;height:52px;border-radius:50% 50% 44% 44%;background:linear-gradient(160deg,#84b6ff,var(--blue));box-shadow:0 12px 25px rgba(34,76,232,.23);color:#fff;font-size:26px;font-weight:600}.care-shield{position:absolute;z-index:3;left:50%;bottom:5px;display:grid;place-items:center;width:78px;height:92px;border:3px solid #cfe0ff;border-radius:38px 38px 48px 48px;background:linear-gradient(145deg,#74a4ff,var(--blue));box-shadow:0 15px 32px rgba(34,76,232,.28);color:#fff;font-size:35px;transform:translateX(-20%)}
.crm-modal-mark{font-size:33px}.crm-modal-art{position:relative}.crm-dashboard{position:absolute;left:12px;top:22px;width:215px;height:165px;padding:44px 18px 16px;border:1px solid rgba(34,76,232,.25);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(222,233,255,.68));box-shadow:0 18px 45px rgba(34,76,232,.14)}.crm-dashboard:before{content:'•••';position:absolute;left:13px;top:8px;color:#85a6ff;letter-spacing:3px}.crm-dashboard b{position:absolute;left:14px;top:25px;padding:4px 7px;border-radius:5px;background:var(--blue);color:#fff;font-size:10px}.crm-dashboard i{display:inline-block;width:27%;height:52px;margin:25px 2% 0;border-radius:5px;background:linear-gradient(160deg,#dbe7ff,#8eb0ff);vertical-align:bottom}.crm-dashboard i:nth-of-type(2){height:78px}.crm-dashboard i:nth-of-type(3){height:63px}.crm-node{position:absolute;z-index:3;display:grid;place-items:center;width:55px;height:55px;border:1px solid rgba(34,76,232,.2);border-radius:12px;background:linear-gradient(145deg,#fff,#e7efff);box-shadow:0 12px 28px rgba(34,76,232,.17);color:var(--blue);font-size:23px}.crm-node:before{content:'';position:absolute;right:100%;top:50%;width:38px;border-top:1px dashed #8eb0ff}.crm-node-mail{right:45px;top:20px}.crm-node-gear{right:0;top:95px}.crm-node-check{right:45px;bottom:5px}
.wp-modal-columns{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding:34px 8px 30px;border-bottom:1px solid #e6eaf2}.wp-modal-columns>section+section{padding-left:52px;border-left:1px solid #e6eaf2}.wp-modal-columns h3,.wp-process>h3{margin:0 0 26px;font-size:20px}.wp-benefits{display:grid;gap:20px}.wp-benefits article{display:grid;grid-template-columns:40px 1fr;gap:14px}.wp-benefits i{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(34,76,232,.3);border-radius:50%;color:var(--blue);font-size:16px;font-style:normal}.wp-benefits h4{margin:0 0 5px;font-size:15px}.wp-benefits p{margin:0;color:#4b5363;font-size:13px;line-height:1.55}.wp-includes ul{display:grid;gap:15px;margin:0;padding:0;list-style:none}.wp-includes li{position:relative;padding-left:28px;color:#303746;font-size:14px;line-height:1.45}.wp-includes li:before{content:'✓';position:absolute;left:0;color:var(--blue);font-size:16px;font-weight:600}
.wp-process{padding:30px 8px 0}.wp-process-row{display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:22px;align-items:start}.wp-process-row article{text-align:center}.wp-process-row article i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 13px;border-radius:50%;background:#eef3ff;color:var(--blue);font-size:13px;font-style:normal}.wp-process-row h4{margin:0 0 7px;font-size:14px}.wp-process-row p{margin:0;color:#586071;font-size:12px;line-height:1.5}.wp-process-row aside{padding:24px;border:1px solid #e2e7f1;border-radius:16px;background:#fbfcff;color:#384051;font-size:13px;line-height:1.6}.wp-process-row aside span{display:block;margin-bottom:12px;color:var(--blue);font-size:21px}.wp-modal-actions{display:flex;align-items:center;gap:36px;padding:30px 8px 2px}.wp-modal-actions a{text-decoration:none}.wp-primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-width:275px;padding:17px 26px;border-radius:999px;background:var(--blue);color:#fff;font-size:14px}.wp-secondary{color:#1d2533;font-size:14px}.wp-secondary:hover{color:var(--blue)}body.wp-modal-open{overflow:hidden}
@media(max-width:1100px){.wp-modal-dialog{width:calc(100vw - 48px);padding:46px 42px 36px}.wp-modal-columns{gap:36px}.wp-modal-columns>section+section{padding-left:36px}}
@media(max-width:760px){.wp-modal{padding:12px}.wp-modal-dialog{width:100%;max-height:calc(100dvh - 24px);padding:38px 22px 28px;border-radius:22px}.wp-modal-hero{display:block}.wp-modal-intro h2{font-size:38px}.wp-modal-intro h3{font-size:17px}.wp-modal-intro p{font-size:15px}.wp-modal-art{min-height:180px;margin-top:15px}.wp-modal-columns{grid-template-columns:1fr;gap:30px}.wp-modal-columns>section+section{padding:28px 0 0;border-top:1px solid #e6eaf2;border-left:0}.wp-process-row{grid-template-columns:1fr 1fr}.wp-process-row aside{grid-column:1/-1}.wp-modal-actions{align-items:stretch;flex-direction:column;gap:16px}.wp-primary{min-width:0}.wp-secondary{text-align:center}}
@media(prefers-reduced-motion:reduce){.wp-modal,.wp-modal-dialog{transition:none}}


/* SOURCE: mobile-first.css */
/*
 * TKINTERACTIVE — MOBILE FIRST
 * Oddzielny wariant strony przygotowany przede wszystkim dla telefonow.
 * Plik jest ladowany jako ostatni, dlatego porzadkuje starsze nadpisania mobile.
 */

:root {
  --mf-edge: clamp(18px, 5.1vw, 24px);
  --mf-radius: 24px;
  --mf-ink: #10131a;
  --mf-muted: #60697b;
  --mf-blue: #244ce8;
  --mf-paper: #f6f7fb;
  --mf-section-y: 74px;
  --mf-heading: clamp(45px, 12.7vw, 56px);
  --mf-subheading: clamp(26px, 7.4vw, 32px);
  --mf-copy: clamp(15px, 4.35vw, 17px);
  --mf-card-radius: 22px;
  --mf-gap: 12px;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
  background: var(--mf-paper);
  color: var(--mf-ink);
}

.intro { display: none !important; }
body.loader-active { overflow: visible !important; }

.testimonials-preview {
  padding: clamp(84px, 9vw, 140px) clamp(28px, 5vw, 80px);
  background: #fff;
  color: var(--mf-ink);
}
.testimonials-preview-inner { width: min(1440px, 100%); margin: 0 auto; }
.testimonials-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.testimonials-heading h2 { margin: 24px 0 0; font-size: clamp(54px, 6vw, 92px); font-weight: 500; line-height: .92; letter-spacing: -.055em; }
.testimonials-heading h2 em { color: var(--mf-blue); font-family: Inter, Arial, sans-serif; font-style: normal; font-weight: 400; }
.testimonials-demo-note { max-width: 310px; margin: 0; color: #737b8b; font-size: 13px; line-height: 1.5; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 54px; }
.testimonials-grid article { display: flex; min-width: 0; min-height: 310px; padding: clamp(26px, 3vw, 42px); flex-direction: column; border: 1px solid #e3e7f0; border-radius: 28px; background: #f8f9fc; }
.testimonials-stars { color: var(--mf-blue); font-size: 14px; letter-spacing: .16em; }
.testimonials-grid blockquote { margin: 26px 0 34px; color: #252b38; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.58; }
.testimonials-grid footer { display: flex; align-items: center; margin-top: auto; gap: 13px; }
.testimonials-grid footer img { flex: 0 0 auto; width: 52px; height: 52px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 16px rgba(25,37,66,.14); }
.testimonial-person { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.testimonials-grid footer strong { font-size: 14px; }
.testimonial-person > span { color: #727b8c; font-size: 12px; }

.hero-trust-note { display: none; }
.project-brief { max-width: 555px; margin-top: 36px; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.07); overflow: hidden; }
.project-brief summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.project-brief summary::-webkit-details-marker { display: none; }
.project-brief summary span { font-size: 22px; font-weight: 400; transition: transform .2s ease; }
.project-brief[open] summary span { transform: rotate(45deg); }
.project-brief form { padding: 4px 22px 22px; }
.project-brief-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.project-brief label { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.project-brief label > span { color: rgba(255,255,255,.72); font-size: 11px; }
.project-brief input,.project-brief select,.project-brief textarea { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; outline: 0; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13px; }
.project-brief input,.project-brief select { height: 44px; padding: 0 12px; }
.project-brief textarea { padding: 11px 12px; resize: vertical; }
.project-brief select option { color: #111827; }
.project-brief input:focus,.project-brief select:focus,.project-brief textarea:focus { border-color: rgba(255,255,255,.8); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.project-brief-message { grid-column: 1 / -1; }
.project-brief button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 16px; padding: 0 16px; border: 0; border-radius: 13px; background: #fff; color: var(--mf-blue); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.project-brief form > p { margin: 11px 0 0; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.45; }
.benefits-toggle { display: none; }
.featured-cases[hidden],.portfolio-swipe-hint[hidden],.portfolio-track[hidden],.portfolio-controls[hidden] { display: none !important; }
.portfolio-visual.lumi-dental-image {
  background: #f7ece5 !important;
}
.portfolio-visual.lumi-dental-image img {
  width: calc(100% + 10px) !important;
  max-width: none !important;
  position: relative !important;
  left: -5px !important;
  margin-left: 0 !important;
  object-fit: cover !important;
}
.brief-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.brief-privacy a,.contact-legal a { color: inherit; }
.brief-status { min-height: 1.45em; }
.brief-status.is-success { color: #dfffe8 !important; }
.brief-status.is-error { color: #ffe0e0 !important; }

.fit-section,.precontact-cta { background: #fff; color: var(--mf-ink); }
.fit-section { padding: clamp(90px,9vw,140px) var(--page-edge); }
.fit-section-inner { width: 100%; max-width: var(--content-width); margin: 0 auto; }
.fit-heading { display: block; }
.fit-heading h2 { max-width: 720px; margin: 28px 0 0; font-size: clamp(48px,4.6vw,70px); font-weight: 500; line-height: .96; letter-spacing: -.055em; text-align: left; }
.precontact-cta h2 { max-width: var(--content-width); margin: 28px auto 0; font-size: clamp(48px,4.6vw,70px); font-weight: 500; line-height: .96; letter-spacing: -.055em; }
.fit-heading h2 em,.precontact-cta h2 em { color: var(--mf-blue); font-family: Inter, Arial, sans-serif; font-style: normal; font-weight: 400; }
.fit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 60px; }
.fit-grid article { min-width: 0; min-height: 260px; padding: 30px; border: 1px solid #e3e7f0; border-radius: 26px; background: #f8f9fc; }
.fit-grid article > span { color: var(--mf-blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.fit-grid h3 { margin: 48px 0 14px; font-size: clamp(18px,1.55vw,23px); line-height: 1.16; letter-spacing: -.035em; }
.fit-grid p { margin: 0; color: #626b7c; font-size: 14px; line-height: 1.6; }

.featured-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 58px; }
.featured-cases article { min-width: 0; overflow: hidden; border: 1px solid #e1e6ef; border-radius: 28px; background: #fff; }
.featured-cases a { display: block; height: 100%; color: inherit; text-decoration: none; }
.featured-cases img { display: block; width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.featured-cases article div { padding: 25px 26px 28px; }
.featured-cases article span { color: var(--mf-blue); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.featured-cases h3 { margin: 14px 0 10px; font-size: clamp(23px,2vw,31px); letter-spacing: -.04em; }
.featured-cases p { min-height: 4.7em; margin: 0; color: #616a7b; font-size: 14px; line-height: 1.58; }
.featured-cases strong { display: block; margin-top: 24px; color: var(--mf-blue); font-size: 13px; }

/* Ukrywamy elementy wymagające prawdziwych danych. */
.portfolio-clients,.testimonials-preview { display: none !important; }

.precontact-cta { padding: clamp(90px,10vw,150px) var(--page-edge); text-align: center; }
.precontact-cta h2 { margin-inline: auto; }
.precontact-cta > p:not(.label) { max-width: 600px; margin: 34px auto 0; color: #626b7c; font-size: 17px; line-height: 1.65; }
.precontact-cta > a { display: flex; align-items: center; justify-content: center; gap: 28px; width: max-content; max-width: 100%; min-height: 54px; margin: 34px auto 0; padding: 14px 27px; border-radius: 999px; background: var(--mf-blue); color: #fff; font-size: 14px; text-decoration: none; }
.precontact-cta small { display: block; margin-top: 14px; color: #747d8e; font-size: 11px; }

.mobile-hero-services-line,
.mobile-hero-service-grid,
.mobile-hero-prompt,
.mobile-hero-cta,
.mobile-hero-scroll,
.mobile-hero-chat { display: none; }
.offer-card-mobile-copy,
.offer-more-short,
.portfolio-swipe-hint,
.app-bottom-nav,
.mobile-lead-section { display: none; }

.offer-icon svg,
.wp-modal-mark svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Zamkniecie popupu pozostaje dostepne podczas przewijania jego tresci. */
.wp-modal-dialog > .wp-modal-close {
  position: sticky !important;
  z-index: 1000 !important;
  top: 12px !important;
  right: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: -34px -10px -14px auto !important;
  border: 1px solid rgba(22,31,52,.12) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 28px rgba(17,27,49,.14) !important;
  color: #131827 !important;
  font-size: 32px !important;
  line-height: 1 !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.wp-modal-dialog > .wp-modal-close:hover,
.wp-modal-dialog > .wp-modal-close:focus-visible {
  color: var(--mf-blue) !important;
  border-color: rgba(36,76,232,.35) !important;
}

@media (max-width: 768px) {
  *, *::before, *::after { box-sizing: border-box; }
  body { min-width: 0; font-size: 16px; }
  main, section, header, nav, article, div { min-width: 0; }
  main > .approach-break { display: none !important; }
  img { max-width: 100%; }
  .label { font-size: 12px !important; letter-spacing: .15em !important; }

  .fit-section { padding: var(--mf-section-y) var(--mf-edge) !important; }
  .fit-heading { display: block !important; }
  .fit-heading h2,.precontact-cta h2 { font-size: clamp(42px,12.4vw,54px) !important; line-height: .96 !important; }
  .fit-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; margin-top: 38px !important; }
  .fit-grid article { min-height: 210px !important; padding: 18px 15px !important; border-radius: var(--mf-card-radius) !important; }
  .fit-grid h3 { margin: 32px 0 10px !important; font-size: clamp(15px,4.25vw,18px) !important; }
  .fit-grid p { font-size: clamp(12px,3.25vw,14px) !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; }

  .featured-cases { display: flex !important; gap: 12px !important; margin: 38px calc(-1 * var(--mf-edge)) 0 !important; padding: 0 var(--mf-edge) 8px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: var(--mf-edge) !important; scrollbar-width: none !important; }
  .featured-cases::-webkit-scrollbar { display: none !important; }
  .featured-cases article { flex: 0 0 min(86vw,360px) !important; border-radius: var(--mf-card-radius) !important; scroll-snap-align: start !important; }
  .featured-cases article div { padding: 22px !important; }
  .featured-cases h3 { font-size: 25px !important; }
  .featured-cases p { min-height: 0 !important; font-size: 14px !important; }

  .precontact-cta { padding: var(--mf-section-y) var(--mf-edge) !important; }
  .precontact-cta > p:not(.label) { margin-top: 26px !important; font-size: var(--mf-copy) !important; }
  .precontact-cta > a { min-height: 56px !important; font-size: 14px !important; }

  .testimonials-preview { padding: var(--mf-section-y) 0 !important; }
  .testimonials-heading { display: block !important; padding: 0 var(--mf-edge) !important; }
  .testimonials-heading h2 { margin-top: 24px !important; font-size: clamp(42px,12.4vw,54px) !important; line-height: .96 !important; }
  .testimonials-demo-note { margin-top: 20px !important; font-size: 11px !important; }
  .testimonials-grid {
    display: flex !important;
    gap: 12px !important;
    margin-top: 34px !important;
    padding: 0 var(--mf-edge) 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--mf-edge) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .testimonials-grid::-webkit-scrollbar { display: none !important; }
  .testimonials-grid article {
    flex: 0 0 min(84vw,350px) !important;
    min-height: 290px !important;
    padding: 26px !important;
    border-radius: var(--mf-card-radius) !important;
    scroll-snap-align: start !important;
  }
  .testimonials-grid blockquote { margin: 22px 0 28px !important; font-size: clamp(14px,3.8vw,16px) !important; line-height: 1.58 !important; }
  .testimonials-grid footer strong { font-size: 13px !important; }
  .testimonial-person > span { font-size: 11px !important; line-height: 1.35 !important; }

  .hero-trust-note {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin: 12px 0 0 !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* Stabilne centrowanie tekstu w przyciskach na wąskich ekranach i w Safari. */
  .button,
  .portfolio-cta,
  .hero-action .button,
  .mobile-hero-cta,
  .wp-primary,
  .wp-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-block: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .team-dribbble-link {
    align-items: center !important;
    line-height: 1.25 !important;
  }

  .team-dribbble-link span { min-width: 0; }
  .team-dribbble-link svg { display: block !important; }

  .button,
  .offer-card-trigger,
  .portfolio-case-link,
  .team-dribbble-link,
  .contact-options a {
    -webkit-tap-highlight-color: transparent !important;
    transition: transform .16s ease, opacity .16s ease, background-color .16s ease !important;
  }

  .button:active,
  .offer-card-trigger:active,
  .portfolio-case-link:active,
  .team-dribbble-link:active,
  .contact-options a:active {
    transform: scale(.985) !important;
    opacity: .88 !important;
  }

  /* Nawigacja */
  .header {
    position: absolute !important;
    z-index: 40 !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    height: 78px !important;
    padding: 17px var(--mf-edge) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transform: none !important;
  }

  .header .brand,
  .brand {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    width: 148px !important;
    height: 42px !important;
    transform: none !important;
  }

  .brand .brand-sygnet { width: 56px !important; height: auto !important; object-fit: contain; }
  .brand span { width: 92px !important; max-width: 92px !important; height: 26px !important; }
  .header-cta { display: none !important; }

  .menu-button.floating-menu-button,
  .menu-button {
    position: fixed !important;
    z-index: 110 !important;
    top: 15px !important;
    right: var(--mf-edge) !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border: 1px solid rgba(31, 44, 75, .12) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 10px 32px rgba(31,46,82,.12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    transform: none !important;
  }

  .menu-button i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 20px !important;
    height: 1px !important;
    margin: 0 !important;
    background: #111827 !important;
    transform: translate(-50%, -4px) !important;
  }

  .menu-button i:nth-child(2) {
    top: 50% !important;
    transform: translate(-50%, 4px) !important;
  }

  .floating-nav {
    position: fixed !important;
    z-index: 100 !important;
    top: 74px !important;
    right: var(--mf-edge) !important;
    left: var(--mf-edge) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(34,76,232,.12) !important;
    box-shadow: 0 24px 70px rgba(22,36,67,.19) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.98) !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s !important;
  }

  .floating-nav.is-open,
  .floating-nav.open,
  body.menu-open .floating-nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .floating-nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    color: #151923 !important;
    background: transparent !important;
  }

  .floating-nav a.active { color: var(--mf-blue) !important; background: #eef2ff !important; }

  .floating-nav .language-switch,
  .floating-nav .language-switch:hover,
  .floating-nav .language-switch:focus-visible {
    width: max-content !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mf-blue) !important;
    box-shadow: none !important;
  }

  .app-bottom-nav {
    position: fixed !important;
    z-index: 90000 !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 64px !important;
    padding: 7px !important;
    border: 1px solid rgba(34,76,232,.14) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 18px 50px rgba(20,34,66,.2) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    transition: transform .28s ease, opacity .2s ease !important;
  }

  /* Dolna nawigacja aplikacyjna jest wyłączona na telefonach. */
  .app-bottom-nav { display: none !important; }

  .app-bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    color: #667084 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  .app-bottom-nav a svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .app-bottom-nav a.active {
    background: #edf2ff !important;
    color: var(--mf-blue) !important;
  }

  body.wp-modal-open .app-bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Menu pozostaje dostępne również nad otwartym modalem oferty. */
  body.wp-modal-open .menu-button.floating-menu-button,
  body.wp-modal-open .menu-button {
    z-index: 100200 !important;
  }

  body.wp-modal-open .floating-nav {
    z-index: 100190 !important;
  }

  /* Hero — kompozycja pionowa zamiast przeskalowanego desktopu */
  .hero,
  body.hero-scroll-static .hero,
  body.hero-variant-7 .hero,
  body.hero-variant-8 .hero,
  body.hero-variant-9 .hero {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 104px var(--mf-edge) 38px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 82% 27%, rgba(57,99,255,.22), transparent 35%),
      radial-gradient(circle at 8% 64%, rgba(159,183,255,.22), transparent 37%),
      linear-gradient(180deg,#fbfcff 0%,#f1f4fc 100%) !important;
    color: var(--mf-ink) !important;
  }

  .hero-background { position: absolute !important; inset: 0 !important; z-index: -1 !important; overflow: hidden !important; }
  .hero-animation-frame { display: none !important; }
  .hero-background::after,
  .hero-background-image,
  .hero-background-wave { display: none !important; }

  .hero-mobile-orb {
    display: block !important;
    position: absolute;
    z-index: 0;
    top: 280px;
    right: -100px;
    width: 360px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%,rgba(255,255,255,.95) 0 5%,#8ca7ff 18%,#315cf5 47%,#1736aa 68%,rgba(23,54,170,0) 70%);
    filter: blur(.2px) drop-shadow(0 35px 60px rgba(37,75,226,.25));
    opacity: .9;
  }

  .headline,
  body.loaded .hero .headline,
  body.hero-scroll-static .headline {
    position: relative !important;
    z-index: 3 !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .headline h1 {
    margin: 0 !important;
    color: var(--mf-ink) !important;
    font-size: clamp(52px, 15.2vw, 66px) !important;
    font-weight: 520 !important;
    line-height: .91 !important;
    letter-spacing: -.07em !important;
  }

  .headline h1 span,
  body.hero-variant-7 .headline h1 span { display: block !important; color: #fff !important; }
  .headline h1 em,
  body.hero-variant-7 .headline h1 em {
    display: block !important;
    color: var(--mf-blue) !important;
    font-family: Inter, Arial, sans-serif !important; font-style: normal !important;
    font-weight: 400 !important;
  }

  .headline-services,
  body.hero-variant-7 .headline-services {
    margin: 22px 0 0 !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    letter-spacing: .03em !important;
  }

  .hero-intro,
  body.loaded .hero .hero-intro,
  body.hero-variant-7 .hero-intro {
    position: relative !important;
    z-index: 3 !important;
    inset: auto !important;
    width: min(100%, 340px) !important;
    margin: 24px 0 0 !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .interaction-scene,
  body.loaded .hero .interaction-scene.enter-scene,
  .hero .interaction-scene.enter-scene {
    position: relative !important;
    z-index: 2 !important;
    inset: auto !important;
    align-self: center !important;
    width: min(88vw, 350px) !important;
    height: 280px !important;
    margin: 6px -22px -8px auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .interaction-scene .ripple {
    border-color: rgba(34,76,232,.18) !important;
    box-shadow: none !important;
  }

  .interaction-scene img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 260px !important;
    max-width: none !important;
    height: 260px !important;
    object-fit: contain !important;
    transform: translate(-47%,-49%) rotate(-7deg) !important;
    filter: drop-shadow(0 25px 32px rgba(29,57,155,.2)) !important;
  }

  .hero .glass-card,
  .hero .glass-card.experience,
  .hero .glass-card.areas,
  body.loaded .hero .glass-card {
    position: relative !important;
    z-index: 4 !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    padding: 22px !important;
    border: 1px solid rgba(88,124,255,.34) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg,rgba(7,14,40,.88),rgba(3,8,28,.72)) !important;
    box-shadow: 0 22px 52px rgba(0,6,30,.34), inset 0 1px 0 rgba(255,255,255,.09) !important;
    color: #fff !important;
    transform: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
  }

  .hero .glass-card strong { color: var(--mf-blue) !important; font-size: 42px !important; line-height: 1 !important; }
  .hero .glass-card h2 { margin: 7px 0 5px !important; color: #fff !important; font-size: 21px !important; }
  .hero .glass-card p { margin: 0 !important; color: rgba(220,227,245,.68) !important; font-size: 15px !important; line-height: 1.55 !important; }
  .hero .areas { display: grid !important; grid-template-columns: 88px 1fr !important; column-gap: 14px !important; align-items: start !important; }
  .hero .areas strong { grid-row: 1 / span 2; }
  .hero .support-list { grid-column: 2; margin: 12px 0 0 !important; padding: 0 !important; }
  .hero .support-list li { color: rgba(226,232,247,.78) !important; font-size: 14px !important; line-height: 1.45 !important; }

  .hero-action,
  body.loaded .hero .hero-action {
    position: relative !important;
    z-index: 4 !important;
    inset: auto !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-action .button { width: 100% !important; min-height: 58px !important; justify-content: center !important; font-size: 16px !important; border-radius: 18px !important; }
  .hero .spark, .hero .replay { display: none !important; }

  /* O nas */
  .about-project {
    padding: var(--mf-section-y) var(--mf-edge) 22px !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  .about-project::before, .about-project::after { opacity: .3 !important; }
  .about-project-inner { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .about-project .label { margin: 0 0 26px !important; }
  .about-project-intro { display: block !important; margin: 0 !important; }
  .about-project-message { width: 100% !important; }
  .about-project-message h2 {
    margin: 0 !important;
    font-size: var(--mf-heading) !important;
    line-height: .96 !important;
    letter-spacing: -.06em !important;
  }
  .about-project-message > p { margin: 28px 0 0 !important; font-size: var(--mf-copy) !important; line-height: 1.65 !important; }
  .about-project-stat {
    width: 100% !important;
    margin: 34px 0 0 !important;
    padding: 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    border: 1px solid rgba(34,76,232,.12) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg,#f3f6ff,#fff) !important;
  }
  .about-project-stat strong { flex: 0 0 auto; font-size: 50px !important; }
  .about-project-stat p { margin: 0 !important; font-size: 11px !important; line-height: 1.5 !important; }

  .about-team { display: block !important; margin: 54px 0 0 !important; }
  .about-team-copy { width: 100% !important; padding: 0 !important; }
  .about-team-copy h3 { font-size: var(--mf-subheading) !important; line-height: 1.08 !important; }
  .about-team-copy > p { margin-top: 22px !important; font-size: 16px !important; line-height: 1.65 !important; }
  .team-dribbble-link { min-height: 52px !important; font-size: 14px !important; }

  .about-team-copy > p,
  .about-team-copy .team-dribbble-link { display: none !important; }
  .team-members {
    width: 100% !important;
    margin: 30px 0 0 !important;
    padding: 0 var(--mf-edge) 10px 0 !important;
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    overscroll-behavior-inline: contain !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .team-members::-webkit-scrollbar { display: none; }
  .team-member {
    flex: 0 0 76% !important;
    min-width: 0 !important;
    padding: 8px 12px 18px !important;
    text-align: center !important;
    scroll-snap-align: start !important;
  }
  .team-avatar {
    width: min(52vw, 190px) !important;
    max-width: 190px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }
  .team-member h4 { margin-top: 16px !important; font-size: 20px !important; }
  .team-member > p { font-size: 11px !important; line-height: 1.4 !important; }

  .about-team + .about-project-values,
  .about-project .about-project-values {
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 58px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .about-project .about-project-values::before,
  .about-project .about-project-values::after { display: none !important; }
  .about-project .about-project-values article,
  .about-project .about-project-values article:first-child,
  .about-project .about-project-values article:last-child {
    display: grid !important;
    grid-template-columns: 45px 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 20px !important;
    border: 1px solid #e6e9f0 !important;
    border-radius: 20px !important;
    background: #fafbfe !important;
  }
  .about-project .about-value-number { font-size: 13px !important; }
  .about-project .about-project-values h3 { margin: 0 !important; font-size: 22px !important; }
  .about-project .about-project-values p { margin: 7px 0 0 !important; font-size: 15px !important; line-height: 1.5 !important; }

  /* Oferta */
  .offer-project { padding: 42px var(--mf-edge) var(--mf-section-y) !important; overflow: hidden !important; }
  .offer-project-inner { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .offer-project-heading { display: block !important; }
  .offer-project-heading > div, .offer-project-heading > p { width: 100% !important; }
  .offer-project h2 { font-size: var(--mf-heading) !important; line-height: .96 !important; }
  .offer-project-heading > p { margin: 28px 0 0 !important; font-size: var(--mf-copy) !important; line-height: 1.65 !important; }
  .offer-project-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: var(--mf-gap) !important;
    margin: 46px 0 0 !important;
  }
  .offer-symbol { display: none !important; }
  .offer-card,
  .offer-card-a, .offer-card-b, .offer-card-c, .offer-card-d,
  .offer-card-trigger {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: clamp(15px, 4.2vw, 20px) !important;
    border: 1px solid rgba(34,76,232,.10) !important;
    border-radius: var(--mf-card-radius) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 16px 40px rgba(32,48,82,.06) !important;
    transform: none !important;
  }
  .offer-icon {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 22px !important;
    font-size: 23px !important;
  }
  .offer-card > div:not(.offer-icon) {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .offer-card h3 {
    margin: 0 0 6px !important;
    font-size: clamp(14px, 4.6vw, 20px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
  }
  .offer-card h4 {
    margin: 0 0 13px !important;
    font-size: clamp(11px, 3.55vw, 15px) !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }
  .offer-card p {
    font-size: clamp(13px, 3.65vw, 15px) !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  .offer-card > div > p { display: none !important; }
  .offer-card-mobile-copy {
    display: block !important;
    margin-top: 16px !important;
    color: #4d5567 !important;
    font-size: clamp(13px, 3.55vw, 15px) !important;
    line-height: 1.45 !important;
  }
  .offer-card-more {
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 24px !important;
    min-height: 34px !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.3 !important;
    justify-content: space-between !important;
  }
  .offer-more-full { display: none !important; }
  .offer-more-short { display: inline !important; }

  /* Modal oferty nie moze rozszerzac strony */
  .wp-modal {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .wp-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow: auto !important;
    opacity: 1 !important;
    transform: translateY(105%) !important;
    transition: transform .34s cubic-bezier(.2,.8,.2,1) !important;
    overscroll-behavior: contain !important;
  }
  .wp-modal-dialog::before {
    content: "" !important;
    position: sticky !important;
    z-index: 6 !important;
    top: 8px !important;
    display: block !important;
    width: 42px !important;
    height: 5px !important;
    margin: -22px auto 18px !important;
    border-radius: 999px !important;
    background: #c7ccd7 !important;
  }
  .wp-modal.is-open .wp-modal-dialog {
    transform: none !important;
  }
  .wp-modal-dialog > .wp-modal-close {
    position: fixed !important;
    z-index: 100150 !important;
    top: 76px !important;
    right: var(--mf-edge) !important;
    margin: 0 !important;
  }
  .wp-modal-hero { padding: 150px 20px 28px !important; }
  .wp-modal-hero h2 { font-size: 38px !important; }
  .wp-modal-intro p + p,
  .wp-modal-art { display: none !important; }
  .wp-modal-content, .wp-process { padding-inline: 20px !important; }
  .wp-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .wp-benefits article {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 218px !important;
    padding: 18px 14px !important;
    border: 1px solid rgba(34,76,232,.12) !important;
    border-radius: var(--mf-card-radius) !important;
    background: #fbfcff !important;
  }
  .wp-benefits article > i {
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 0 16px !important;
    font-size: 15px !important;
  }
  .wp-benefits article > div { min-width: 0 !important; }
  .wp-benefits h4 {
    margin: 0 0 8px !important;
    font-size: clamp(14px,4vw,17px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: anywhere !important;
  }
  .wp-benefits p {
    margin: 0 !important;
    font-size: clamp(11px,3.1vw,13px) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }
  .wp-benefits article:nth-child(n+5) { display: none !important; }
  .wp-benefits.show-all article:nth-child(n+5) { display: flex !important; }
  .benefits-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 12px 0 0 !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(34,76,232,.18) !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: var(--mf-blue) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }
  .wp-process-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .wp-process-row article {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 196px !important;
    padding: 20px 12px !important;
    border: 1px solid rgba(34,76,232,.12) !important;
    border-radius: var(--mf-card-radius) !important;
    background: #fbfcff !important;
  }
  .wp-process-row article i {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 13px !important;
  }
  .wp-process-row article h4 {
    margin: 0 0 7px !important;
    font-size: clamp(14px,4.1vw,17px) !important;
    line-height: 1.15 !important;
  }
  .wp-process-row article p {
    margin: 0 !important;
    color: #586071 !important;
    font-size: clamp(11px,3.2vw,13px) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }
  .wp-process-row aside {
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
  }
  .wp-modal-actions {
    position: sticky !important;
    z-index: 8 !important;
    bottom: calc(-28px - env(safe-area-inset-bottom, 0px)) !important;
    margin: 22px -20px calc(-28px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(34,76,232,.12) !important;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
  .wp-modal-actions .wp-primary { display: none !important; }
  .wp-modal-actions .wp-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 13px 18px !important;
    border-radius: 17px !important;
    background: var(--mf-blue) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Podejscie jest celowo usuniete z mobilnej sciezki. */
  .approach-break { display: none !important; }
  .approach-break-inner { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; padding: 0 var(--mf-edge) !important; }
  .approach-break-copy { width: 100% !important; }
  .approach-break .label { margin-bottom: 26px !important; }
  .approach-break h2 { font-size: clamp(45px, 12.7vw, 56px) !important; line-height: .96 !important; }
  .approach-break-copy > p:last-child { margin: 28px 0 0 !important; font-size: 16px !important; line-height: 1.7 !important; }
  .approach-code {
    display: none !important;
  }
  .approach-code img { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .technology-marquee { margin-top: 20px !important; padding: 0 !important; }
  .technology-marquee-viewport { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; }
  .technology-marquee-viewport::-webkit-scrollbar { display: none; }
  .technology-marquee-track { width: max-content !important; animation: none !important; transform: none !important; padding: 0 var(--mf-edge) !important; }
  .technology-list { gap: 12px !important; }
  .technology-list[aria-hidden="true"] { display: none !important; }
  .technology-card { width: 132px !important; min-width: 132px !important; height: 140px !important; border-radius: 20px !important; }
  .technology-card small { font-size: 13px !important; }

  /* Portfolio przewijane kciukiem */
  .portfolio-project { padding: var(--mf-section-y) 0 64px !important; overflow: hidden !important; }
  .portfolio-project-inner { width: 100% !important; }
  .portfolio-heading { display: block !important; width: 100% !important; padding: 0 var(--mf-edge) !important; }
  .portfolio-heading > div:first-child, .portfolio-copy { width: 100% !important; }
  .portfolio-heading .label { margin-bottom: 26px !important; }
  .portfolio-heading h2 { font-size: var(--mf-heading) !important; line-height: .96 !important; }
  .portfolio-copy { margin: 28px 0 0 !important; }
  .portfolio-copy > p { font-size: var(--mf-copy) !important; line-height: 1.65 !important; }
  .portfolio-cta {
    width: 100% !important;
    min-height: 50px !important;
    margin-top: 24px !important;
    padding: 10px 18px !important;
    border-radius: 18px !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
  }
  .portfolio-copy .team-dribbble-link {
    width: 100% !important;
    margin-top: 12px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .portfolio-swipe-hint {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 38px var(--mf-edge) 0 !important;
    color: #6a7385 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .portfolio-swipe-hint span {
    color: var(--mf-blue) !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  .portfolio-clients {
    display: none !important;
  }
  .portfolio-clients-intro p { max-width: 310px !important; font-size: 15px !important; }
  .portfolio-client-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 25px 16px !important; margin-top: 28px !important; }
  .portfolio-client-list li { justify-content: flex-start !important; white-space: normal !important; }
  .portfolio-client-list b { font-size: 16px !important; }

  .portfolio-track {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 var(--mf-edge) 18px !important;
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--mf-edge) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    cursor: auto !important;
  }
  .portfolio-track::-webkit-scrollbar { display: none; }
  .portfolio-card {
    flex: 0 0 min(84vw, 360px) !important;
    width: min(84vw, 360px) !important;
    scroll-snap-align: start !important;
  }
  .portfolio-visual {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.45 / 1 !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 38px rgba(25,37,66,.12) !important;
    transform: none !important;
  }
  .portfolio-visual img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }
  .portfolio-card h3, .portfolio-case-link h3 { margin: 18px 0 6px !important; font-size: 24px !important; }
  .portfolio-card p, .portfolio-case-link p { font-size: 14px !important; }
  .portfolio-controls { display: none !important; }

  /* Skondensowana sekcja prowadząca do kontaktu. */
  .mobile-lead-section {
    display: block !important;
    padding: var(--mf-section-y) var(--mf-edge) !important;
    background: #fff !important;
    color: var(--mf-ink) !important;
  }
  .mobile-lead-section h2 {
    max-width: 100% !important;
    margin: 26px 0 0 !important;
    font-size: clamp(42px, 12.4vw, 54px) !important;
    font-weight: 500 !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: normal !important;
  }
  .mobile-lead-section h2 em {
    color: var(--mf-blue) !important;
    font-family: Inter, Arial, sans-serif !important; font-style: normal !important;
    font-weight: 400 !important;
  }
  .mobile-proof-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mf-gap) !important;
    margin-top: 46px !important;
  }
  .mobile-proof-grid article {
    min-height: 138px !important;
    min-width: 0 !important;
    padding: clamp(14px,4.2vw,18px) !important;
    border: 1px solid #e5e9f2 !important;
    border-radius: var(--mf-card-radius) !important;
    background: #f8f9fc !important;
  }
  .mobile-proof-grid strong {
    display: block !important;
    max-width: 100% !important;
    color: var(--mf-blue) !important;
    font-size: clamp(19px,5.8vw,25px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
  }
  .mobile-proof-grid .mobile-proof-long {
    font-size: clamp(16px,4.65vw,21px) !important;
    letter-spacing: -.045em !important;
  }
  .mobile-proof-grid p {
    margin: 14px 0 0 !important;
    font-size: clamp(12px,3.35vw,14px) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }
  .mobile-process { margin-top: 52px !important; }
  .mobile-process h3,
  .mobile-faq h3 { margin: 0 0 22px !important; font-size: var(--mf-subheading) !important; line-height: 1.1 !important; }
  .mobile-process ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
  .mobile-process li {
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    gap: 12px !important;
    padding: 17px 0 !important;
    border-top: 1px solid #e5e8ef !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .mobile-process li span { color: var(--mf-blue) !important; font-size: 12px !important; font-weight: 700 !important; }
  .mobile-faq { margin-top: 52px !important; }
  .mobile-faq details { border-top: 1px solid #e5e8ef !important; }
  .mobile-faq details:last-child { border-bottom: 1px solid #e5e8ef !important; }
  .mobile-faq summary {
    position: relative !important;
    padding: 18px 34px 18px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    cursor: pointer !important;
    list-style: none !important;
  }
  .mobile-faq summary::-webkit-details-marker { display: none !important; }
  .mobile-faq summary::after { content: "+" !important; position: absolute !important; right: 4px !important; top: 15px !important; color: var(--mf-blue) !important; font-size: 22px !important; }
  .mobile-faq details[open] summary::after { content: "−" !important; }
  .mobile-faq details p { margin: -3px 0 18px !important; color: #5f6879 !important; font-size: 14px !important; line-height: 1.6 !important; }
  .mobile-consultation {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 58px !important;
    margin-top: 38px !important;
    padding: 14px 20px !important;
    border-radius: 18px !important;
    background: var(--mf-blue) !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
  }
  .mobile-response-note { margin: 13px 0 0 !important; color: #727b8d !important; font-size: 12px !important; line-height: 1.45 !important; text-align: center !important; }

  /* Kontakt */
  .contact-project {
    min-height: 0 !important;
    padding: var(--mf-section-y) var(--mf-edge) calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }
  .contact-project-inner { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; }
  .contact-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
  }
  .contact-project .label { margin-bottom: 26px !important; }
  .contact-project h2 { font-size: var(--mf-heading) !important; line-height: .96 !important; }
  .contact-intro { margin-top: 28px !important; font-size: var(--mf-copy) !important; line-height: 1.65 !important; }
  .contact-main-link {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 38px !important;
    padding-bottom: 14px !important;
    gap: 10px !important;
    font-size: clamp(17px, 4.8vw, 21px) !important;
    overflow-wrap: anywhere !important;
  }
  .contact-options { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 34px !important; }
  .contact-options a,
  .contact-options a + a {
    width: 100% !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.08) !important;
  }
  .contact-options i { flex-basis: 48px !important; width: 48px !important; height: 48px !important; }
  .contact-options span { gap: 6px !important; font-size: 14px !important; white-space: normal !important; overflow-wrap: anywhere !important; }
  .project-brief { max-width: none !important; margin-top: 18px !important; border-radius: 18px !important; }
  .project-brief summary { min-height: 58px !important; padding: 16px 18px !important; font-size: 14px !important; }
  .project-brief form { padding: 2px 16px 18px !important; }
  .project-brief-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .project-brief-message { grid-column: auto !important; }
  .project-brief input,.project-brief select { height: 48px !important; font-size: 16px !important; }
  .project-brief textarea { min-height: 112px !important; font-size: 16px !important; }
  .project-brief button { min-height: 52px !important; font-size: 14px !important; }
  .contact-location { margin-top: 34px !important; }
  .contact-art {
    position: absolute !important;
    z-index: 1 !important;
    right: -48px !important;
    bottom: -34px !important;
    width: min(92vw, 390px) !important;
    min-height: 0 !important;
    height: 390px !important;
    margin: 0 !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  .contact-art img {
    width: 115% !important;
    max-width: none !important;
    height: auto !important;
    opacity: .25 !important;
    filter: none !important;
  }
  .contact-orbit { opacity: .12 !important; }
  .contact-orbit-dot { opacity: .25 !important; }
  .contact-orbit-a { width: 340px !important; height: 340px !important; }
  .contact-orbit-b { width: 255px !important; height: 255px !important; }
  .contact-legal {
    position: relative !important;
    z-index: 2 !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    font-size: 12px !important;
  }
  .visit-counter { display: none !important; }

  /* Starsze animacje nie powinny przesuwac elementow po zaladowaniu */
  .enter, body.loaded .enter,
  .v7-reveal, .v7-section-active .v7-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Finalna kompozycja hero Mobile First. */
@media (max-width: 768px) {
  .hero,
  body.hero-scroll-static .hero,
  body.hero-variant-7 .hero,
  body.hero-variant-8 .hero,
  body.hero-variant-9 .hero {
    min-height: 0 !important;
    padding: 122px var(--mf-edge) 54px !important;
    background: #020615 !important;
    color: #fff !important;
  }

  .hero-background {
    display: block !important;
    background:
      radial-gradient(circle at 88% 11%, rgba(48,94,255,.2), transparent 29%),
      radial-gradient(circle at -8% 57%, rgba(35,76,210,.12), transparent 34%),
      linear-gradient(180deg,#03081a 0%,#050b1d 48%,#020716 100%) !important;
  }

  .hero-background::before {
    content: "" !important;
    position: absolute !important;
    inset: 215px -155px auto auto !important;
    display: block !important;
    width: 390px !important;
    height: 390px !important;
    border: 1px solid rgba(73,115,255,.14) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 35%,rgba(54,101,255,.14),rgba(16,43,132,.06) 42%,transparent 70%) !important;
    opacity: .8 !important;
    transform: none !important;
    filter: blur(1px) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .hero-mobile-orb {
    display: none !important;
  }

  .menu-button.floating-menu-button,
  .menu-button {
    border: 1px solid rgba(32,93,255,.7) !important;
    border-radius: 50% !important;
    background: rgba(3,10,29,.82) !important;
    box-shadow: 0 0 26px rgba(31,87,255,.12) !important;
  }
  .menu-button i { background: #fff !important; }

  .headline {
    width: 100% !important;
    text-align: center !important;
  }
  .headline h1 {
    width: 100% !important;
    max-width: 390px !important;
    margin-inline: auto !important;
    font-size: clamp(40px,11.8vw,52px) !important;
    line-height: .94 !important;
  }
  .headline-services { display: none !important; }

  .mobile-hero-services-line {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    width: 100% !important;
    margin: 34px 0 0 !important;
    text-align: center !important;
    color: rgba(255,255,255,.83) !important;
    font-size: clamp(11px,3.2vw,13px) !important;
    font-weight: 520 !important;
    line-height: 1.4 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  .mobile-hero-services-line i { color: #2d64ff !important; font-size: clamp(14px,4vw,17px) !important; font-style: normal !important; }

  .hero .hero-intro,
  .hero .interaction-scene,
  .hero .glass-card.experience,
  .hero .glass-card.areas,
  .hero .hero-action { display: none !important; }

  .mobile-hero-service-grid {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 38px 0 0 !important;
  }
  .mobile-hero-service-grid article {
    min-height: 220px !important;
    padding: 18px clamp(12px,4vw,16px) 17px !important;
    border: 1px solid rgba(61,105,255,.38) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg,rgba(8,20,52,.97),rgba(4,12,33,.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 15px 35px rgba(0,3,16,.18) !important;
  }
  .mobile-service-icon {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 28px !important;
    border: 1px solid rgba(37,91,255,.66) !important;
    border-radius: 15px !important;
    background: rgba(15,43,119,.23) !important;
    box-shadow: inset 0 0 22px rgba(38,91,255,.12) !important;
    color: #4f80ff !important;
    font-size: clamp(16px,4.8vw,20px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  .mobile-service-wordpress { border-radius: 50% !important; font-family: Georgia,serif !important; font-size: clamp(27px,7.8vw,33px) !important; }
  .mobile-service-woo { font-size: clamp(14px,4vw,17px) !important; }
  .mobile-service-crm { font-size: clamp(10px,3vw,13px) !important; letter-spacing: .04em !important; }
  .mobile-service-care { font-size: clamp(26px,7.5vw,32px) !important; }
  .mobile-hero-service-grid h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px !important;
    color: #fff !important;
    font-size: clamp(14px,4.6vw,21px) !important;
    font-weight: 570 !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .mobile-hero-service-grid p {
    margin: 0 !important;
    color: rgba(229,234,247,.76) !important;
    font-size: clamp(13.5px,3.75vw,16px) !important;
    line-height: 1.6 !important;
  }

  .mobile-hero-prompt {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin: 38px 0 0 !important;
    color: rgba(255,255,255,.78) !important;
    font-size: clamp(18px,5vw,22px) !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  /* Kompaktowe skróty usług zachowują efekt aplikacji bez wydłużania hero. */
  .mobile-hero-service-grid {
    display: grid !important;
    gap: 10px !important;
    margin-top: 32px !important;
  }
  .mobile-hero-service-grid article {
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 92px !important;
    padding: 14px !important;
    cursor: pointer !important;
    transition: transform .18s ease,border-color .18s ease,background-color .18s ease !important;
  }
  .mobile-hero-service-grid article:active { transform: scale(.975) !important; }
  .mobile-hero-service-grid article:focus-visible { outline: 2px solid #7da1ff !important; outline-offset: 3px !important; }
  .mobile-service-icon,
  .mobile-service-wordpress,
  .mobile-service-woo,
  .mobile-service-crm,
  .mobile-service-care {
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  .mobile-service-wordpress { border-radius: 50% !important; font-size: 23px !important; }
  .mobile-service-care { font-size: 22px !important; }
  .mobile-hero-service-grid h2 {
    margin: 0 !important;
    font-size: clamp(13px,3.8vw,16px) !important;
    line-height: 1.15 !important;
  }
  .mobile-hero-service-grid p { display: none !important; }
  .mobile-hero-cta {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%,330px) !important;
    min-height: 54px !important;
    margin: 34px auto 0 !important;
    padding: 10px 18px !important;
    border: 1px solid rgba(136,173,255,.9) !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#165aff,#143ff1) !important;
    box-shadow: 0 0 30px rgba(29,82,255,.34),inset 0 1px 0 rgba(255,255,255,.3) !important;
    color: #fff !important;
    font-size: clamp(13px,3.6vw,15px) !important;
    text-decoration: none !important;
  }
  .mobile-hero-cta span { position: absolute !important; right: 25px !important; font-size: clamp(23px,6.5vw,28px) !important; }
  .mobile-hero-scroll {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 34px auto 0 !important;
    color: rgba(255,255,255,.74) !important;
    font-size: clamp(14px,3.8vw,16px) !important;
    text-decoration: none !important;
  }
  .mobile-hero-scroll span { font-size: clamp(22px,6.2vw,27px) !important; line-height: 1 !important; }
  .mobile-hero-chat {
    position: absolute !important;
    z-index: 4 !important;
    bottom: 47px !important;
    left: var(--mf-edge) !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid #2862ff !important;
    border-radius: 50% !important;
    color: #fff !important;
    text-decoration: none !important;
  }
  .mobile-hero-chat span {
    position: relative !important;
    display: block !important;
    width: 22px !important;
    height: 18px !important;
    border: 2px solid currentColor !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 0 !important;
  }
  .mobile-hero-chat span::after {
    content: "" !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 2px !important;
    width: 7px !important;
    height: 7px !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(-28deg) !important;
  }
}

@media (max-width: 370px) {
  .hero .areas { grid-template-columns: 76px 1fr !important; }
  .portfolio-card { flex-basis: 86vw !important; width: 86vw !important; }
  .mobile-hero-service-grid article { min-height: 88px !important; }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .portfolio-client-list { grid-template-columns: repeat(4,minmax(90px,1fr)) !important; }
  .portfolio-clients { grid-template-columns: 180px minmax(0,1fr) !important; }
}

@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Twarde wyłączenie starej grafiki mobilnej — również dla Safari z klasą
   dodawaną przez hero-v9.js. Ten blok celowo pozostaje ostatni w bundlu. */
@media (max-width: 768px) {
  body.hero-mobile-static .hero .hero-background-image,
  body.hero-variant-7 .hero .hero-background-image,
  body.hero-variant-8 .hero .hero-background-image,
  body.hero-variant-9 .hero .hero-background-image,
  .hero .hero-background > .hero-background-image,
  .hero .hero-background-wave {
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}
/* VELIN portfolio image edge continuation */
.portfolio-image.velin-image{background:linear-gradient(to bottom,#193f75 0 50%,#2d2d42 50% 100%)}

/* Beezy fills the portfolio tile without letterboxing. */
.portfolio-visual.portfolio-image.beezy-image { background: #fff; }
.portfolio-visual.portfolio-image.beezy-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}