/* Original light composition inspired by modern editorial software sites. */
.palette-preview{--green:#33251f;--muted:#78675d;--raspberry:#a6442f;--raspberry-dark:#74301f;background:#f5eee4}
.palette-preview main{position:relative;isolation:isolate;overflow:hidden}
.studio-light{position:absolute;z-index:-1;pointer-events:none;top:-220px;left:42%;width:1000px;height:850px;filter:blur(28px);opacity:.75;transform:rotate(-24deg);mask-image:linear-gradient(#000 55%,transparent)}
.studio-light i{position:absolute;inset:80px 0 110px;border-radius:50%;background:conic-gradient(from 35deg,#e3b8a8,#b8cedd,#f7dfbb,#c77b4c,#ecc1aa,#e3b8a8);transform:scaleY(.43);box-shadow:0 0 80px #d6ad8c55;animation:studio-drift 16s ease-in-out infinite alternate}
.studio-light i:nth-child(2){inset:130px 60px 0;transform:rotate(24deg) scaleY(.34);background:linear-gradient(120deg,#b8cedd80,#fbdfbe,#a6442f90,#e8c5b6);animation-delay:-7s;mix-blend-mode:multiply}
.studio-light i:nth-child(3){inset:190px -60px 0 130px;transform:rotate(-12deg) scaleY(.28);background:linear-gradient(90deg,transparent,#fff8e9cc,#d0dfed,#c77b4c);animation-delay:-11s}
@keyframes studio-drift{to{translate:35px 45px;rotate:12deg}}
.palette-preview header{background:#f5eee4e8;backdrop-filter:blur(18px)}
.palette-preview .hero{position:relative;gap:42px;padding-top:110px;padding-bottom:85px}
.palette-preview .hero:before{content:"";position:absolute;inset:0;z-index:-1;border-left:1px solid #a3866a14;border-right:1px solid #a3866a14;background:linear-gradient(90deg,transparent 49.95%,#a3866a10 50%,transparent 50.05%);pointer-events:none}
.palette-preview .hero h1{font-size:clamp(48px,5.5vw,78px);letter-spacing:-.065em;line-height:1.04;font-weight:650;max-width:650px}
.palette-preview .hero h1 em{color:#a6442f;-webkit-text-fill-color:#a6442f}
.palette-preview .hero .lead{max-width:440px;font-size:17px;line-height:1.8;margin-top:28px}
.palette-preview .btn{border-radius:100px;box-shadow:0 5px 14px #6929180a;transition:transform .25s,box-shadow .25s,background .25s}
.palette-preview .btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px #69291820}
.palette-preview .hero .btn.light{background:#fff8efb0!important;color:#74301f!important;border:1px solid #a6442f40!important}
.palette-preview .hero .micro{margin-top:24px;gap:22px}
.palette-preview .showcase-orbit{display:none}
.palette-preview .desktop-frame{border-radius:18px 18px 0 0;box-shadow:0 20px 60px #68432b25;border-color:#fff8ef}
.palette-preview .desktop-device{filter:drop-shadow(0 24px 30px #68432b15)}
.palette-preview .phone-device{box-shadow:0 24px 45px #432a282c}
.palette-preview .showcase-label{color:#664d40;letter-spacing:.22em}
.palette-preview .showcase-switcher button{border-radius:100px}
.palette-preview #projekty{border-top:1px solid #d6c4b470;background:#faf5ee}
.palette-preview .project .thumb{border-radius:20px;box-shadow:0 10px 30px #633f2710}
.palette-preview h2{letter-spacing:-.045em;font-weight:550}
.palette-preview .price{border-radius:22px;box-shadow:0 15px 35px #633f2705}
.palette-preview .price.featured{box-shadow:0 20px 45px #633f2712}
.palette-preview .care-card,.palette-preview .contact{border-radius:28px}
.palette-preview .simple-process{background:#392b25}
.palette-preview .palette-comparison{border-radius:100px;background:#fff9eff2;box-shadow:0 6px 24px #402b2014}
@media(max-width:760px){
 .studio-light{top:100px;left:0;width:650px;height:850px;opacity:.48;filter:blur(32px)}
 .palette-preview .hero{padding-top:48px;padding-bottom:28px;gap:28px}
 .palette-preview .hero h1{font-size:clamp(44px,11.4vw,66px);letter-spacing:-.06em}
 .palette-preview .hero .lead{font-size:15px;line-height:1.7;margin-top:20px}
 .palette-preview .hero .actions{gap:10px}
 .palette-preview .hero .btn{font-size:12px;padding:16px 18px}
 .palette-preview .hero .micro{font-size:11px;gap:16px}
 .palette-preview .care-card,.palette-preview .contact{border-radius:20px}
 .palette-preview .palette-comparison{font-size:10px;bottom:8px}
}
@media(prefers-reduced-motion:reduce){.studio-light i{animation:none}.palette-preview .btn{transition:none}}
.palette-preview:has(.preview-pause[aria-pressed="true"]) .studio-light i{animation-play-state:paused}
.palette-preview .palette-comparison{color:#74301f}.palette-preview .palette-comparison a{color:#74301f}
@media(max-width:760px){.palette-preview .hero .actions .btn{font-size:11px;padding:15px 14px;white-space:nowrap}.palette-preview .desktop-screen .sample-heading{font-size:clamp(20px,6vw,28px)!important;line-height:1.12!important}.palette-preview .desktop-screen .sample-copy{padding-right:12px}.palette-preview .palette-comparison{opacity:.96}}

/* White / electric blue direction requested after the warm palette study. */
.palette-preview{--green:#101c3b;--muted:#61728b;--raspberry:#305bfa;--raspberry-dark:#2344c9;background:#fff}
.palette-preview header{background:#ffffffec;border-color:#e3e9f2}
.palette-preview .hero h1{font-weight:600}.palette-preview .hero h1 em{color:#305bfa;-webkit-text-fill-color:#305bfa}
.palette-preview .hero:before{border-color:#eaf0f8;background:linear-gradient(90deg,transparent 49.95%,#eaf0f8 50%,transparent 50.05%)}
.palette-preview .btn{border-radius:7px;box-shadow:none}
.palette-preview .hero .btn.light{background:#fff!important;color:#305bfa!important;border-color:#cbd7ff!important}
.palette-preview #projekty{background:#fff;border-color:#e3e9f2}
.palette-preview .simple-process{background:#101c3b}
.palette-preview .palette-comparison{color:#305bfa;background:#fffffff2;box-shadow:0 6px 24px #10234012;border-radius:8px}
.palette-preview .palette-comparison a{color:#305bfa;background:#edf3ff}
.studio-light{top:-320px;left:43%;width:1050px;height:1000px;opacity:.8;filter:blur(9px);transform:rotate(-32deg);mask-image:linear-gradient(#000 65%,transparent)}
.studio-light i{background:conic-gradient(from 35deg,#b5d9ff,#b6a1ff,#ff79d9,#ffac38,#ff654b,#b5d9ff);box-shadow:0 0 60px #a9bfff33}
.studio-light i:nth-child(2){background:linear-gradient(120deg,#a9d4ff99,#e5b1ff,#ffab43,#ff84b8);mix-blend-mode:normal}
.studio-light i:nth-child(3){background:linear-gradient(90deg,transparent,#ffffffa0,#9bbcff,#ffa54b)}
@media(max-width:760px){.studio-light{top:230px;left:10%;width:650px;height:750px;opacity:.4;filter:blur(15px)}}

/* A continuous full-width ribbon; no rectangular glow boundaries. */
.studio-light{inset:-180px -18% auto -18%;width:136%;height:1050px;transform:none;filter:none;opacity:.9;mask-image:linear-gradient(to bottom,#000 68%,transparent 98%);background:url("light-ribbon.svg") center top/100% 100% no-repeat;animation:ribbon-breathe 18s ease-in-out infinite alternate}
.studio-light i{display:none}
@keyframes ribbon-breathe{to{transform:translateY(18px) scale(1.025);opacity:.75}}
.palette-preview:has(.preview-pause[aria-pressed="true"]) .studio-light{animation-play-state:paused}
.palette-preview .desktop-frame{padding:10px 8px 8px;background:linear-gradient(135deg,#343941,#11151b 60%,#292f37);border:1px solid #747b85;border-radius:16px 16px 0 0;box-shadow:inset 0 1px 1px #ffffff70,0 20px 55px #10234018}
.palette-preview .device-camera{background:#080b10;box-shadow:inset 0 0 0 1px #4c5564;width:4px;height:4px;top:3px}
.palette-preview .desktop-screen{border-radius:6px;clip-path:inset(0 round 6px)}
.palette-preview .monitor-chin{background:linear-gradient(110deg,#d8dce1,#f1f3f5 42%,#b9c0c9);height:27px;border-radius:0 0 14px 14px;box-shadow:inset 0 1px #fff,inset 0 -1px #919ba870}
.palette-preview .monitor-chin span{opacity:.4;transform:scale(.7)}
.palette-preview .monitor-neck{background:linear-gradient(100deg,#aeb7c2,#e0e5eb 45%,#a1acb9)}
.palette-preview .monitor-foot{background:linear-gradient(#e5e9ee,#aab3bf);box-shadow:0 6px 8px #10234015;border-radius:50% 50% 4px 4px}
@media(max-width:760px){.studio-light{inset:300px -65% auto -70%;width:235%;height:700px;opacity:.55;background-size:100% 100%;mask-image:linear-gradient(transparent,#000 15%,#000 75%,transparent)}.palette-preview .desktop-frame{padding:7px 5px 5px;border-radius:12px 12px 0 0}.palette-preview .monitor-chin{height:19px}}
@media(prefers-reduced-motion:reduce){.studio-light{animation:none}}

/* Folded silk ribbon with fine luminous threads. */
.studio-light{inset:-240px -20% auto -20%;width:140%;height:1080px;opacity:.82;background-image:url("light-ribbon.svg?v=4");background-position:center top;mask-image:linear-gradient(#000 68%,transparent 99%)}
@media(max-width:760px){.studio-light{inset:210px -70% auto -95%;width:265%;height:820px;opacity:.38;mask-image:linear-gradient(transparent,#000 18%,#000 68%,transparent)}}

.palette-preview .hero:before{display:none}
.palette-preview .strip{padding:28px 0;background:#f7f9ff;border-block:1px solid #e6ecf7}
.palette-preview .strip .wrap{gap:18px;display:grid;grid-template-columns:repeat(4,1fr)}
.palette-preview .strip span{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:550;color:#233453;padding:14px 8px}
.palette-preview .strip span:before{display:none}
.palette-preview .strip svg{width:42px;height:42px;flex-shrink:0;padding:10px;background:#e9efff;border-radius:12px;color:#305bfa}
.palette-preview .portfolio-label{height:1px;font-size:0;margin:36px 0 28px}.palette-preview .portfolio-label:after{background:#e3e9f2}
.palette-preview .simple-process{position:relative;overflow:hidden;background:#0f1735;padding:90px 0 65px}
.palette-preview .simple-process h2{font-size:clamp(32px,4vw,52px);line-height:1.15;font-weight:550;position:relative;z-index:1}
.palette-preview .simple-process h2 span{color:#94a8d1}
.palette-preview .process-intro{max-width:620px;font-size:16px;line-height:1.8;position:relative;z-index:1}
.process-wave{height:210px;margin:-30px -90px -15px;background:url('process-wave.svg') center/100% 100% no-repeat;pointer-events:none}
.palette-preview .simple-flow{gap:28px;position:relative}
.palette-preview .simple-flow li{border-top:1px solid #ffffff20;padding-top:24px}
.palette-preview .simple-flow li:after{display:none}
.palette-preview .flow-number{display:block;background:none;border:0;border-radius:0;width:auto;height:auto;font-size:43px;font-weight:500;letter-spacing:-2px;line-height:1.1;margin-bottom:22px;color:#bba2ff}
.palette-preview .simple-flow li:nth-child(1) .flow-number{color:#ffb7ae}.palette-preview .simple-flow li:nth-child(2) .flow-number{color:#ec9bdf}.palette-preview .simple-flow li:nth-child(4) .flow-number{color:#a38cff}.palette-preview .simple-flow li:nth-child(5) .flow-number{color:#8d9dff}
.palette-preview .simple-flow h3{font-size:17px;line-height:1.4}.palette-preview .simple-flow p{font-size:13px;line-height:1.8;color:#a5b5d4}
.palette-preview .process-promise{border-color:#ffffff18;margin-top:38px}
@media(max-width:760px){.palette-preview .strip .wrap{grid-template-columns:1fr 1fr;gap:5px}.palette-preview .strip span{font-size:11px;gap:8px;padding:10px 0}.palette-preview .strip svg{width:32px;height:32px;padding:7px}.palette-preview .simple-process{padding:54px 0 42px}.process-wave{height:120px;margin:0 -40px 0}.palette-preview .simple-flow{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}.palette-preview .simple-flow li{padding:16px 0 0;display:block}.palette-preview .simple-flow li:last-child{grid-column:1/-1}.palette-preview .flow-number{font-size:32px;margin-bottom:12px}.palette-preview .simple-flow h3{font-size:15px}.palette-preview .simple-flow p{font-size:12px}.palette-preview .process-intro{font-size:14px}}
@media(max-width:760px){.palette-preview .simple-flow .flow-number{position:static;inset:auto;transform:none;float:none;margin:0 0 12px}.palette-preview .simple-flow li h3,.palette-preview .simple-flow li p{margin-left:0;padding-left:0;grid-column:auto}.palette-preview .simple-flow li{padding-left:0}}

/* Compact process: the wave is atmosphere behind the content. */
.palette-preview .simple-process{padding:48px 0 32px}
.palette-preview .simple-process>.wrap{position:relative;isolation:isolate}
.palette-preview .simple-process .eyebrow{margin-bottom:14px}
.palette-preview .simple-process h2{font-size:clamp(29px,3.3vw,43px);line-height:1.12;margin-bottom:14px;max-width:850px}
.palette-preview .process-intro{font-size:14px;line-height:1.65;margin:0 0 30px;max-width:640px}
.palette-preview .process-wave{position:absolute;z-index:-1;inset:25px -65px auto;height:310px;margin:0;opacity:.32;background-image:url('process-wave.svg?v=4');background-size:100% 100%;mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent)}
.palette-preview .simple-flow{gap:24px;margin-top:0}
.palette-preview .simple-flow li{padding-top:15px;border-color:#ffffff16}
.palette-preview .flow-number{font-size:27px;letter-spacing:-1px;margin-bottom:12px}
.palette-preview .simple-flow h3{font-size:15px;margin:0 0 8px;line-height:1.35}
.palette-preview .simple-flow p{font-size:12px;line-height:1.65;margin:0}
.palette-preview .process-promise{margin-top:22px;padding-top:16px;font-size:11px;line-height:1.6}
@media(max-width:760px){.palette-preview .simple-process{padding:32px 0 26px}.palette-preview .simple-process h2{font-size:29px}.palette-preview .process-intro{font-size:12px;margin-bottom:22px}.palette-preview .process-wave{inset:65px -100px auto;height:300px;opacity:.22;background-size:auto 100%}.palette-preview .simple-flow{gap:18px 16px}.palette-preview .simple-flow li{padding-top:12px}.palette-preview .simple-flow .flow-number{font-size:23px;margin:0 0 8px}.palette-preview .simple-flow h3{font-size:13px;margin-bottom:6px}.palette-preview .simple-flow p{font-size:11px;line-height:1.6}.palette-preview .process-promise{margin-top:18px;padding-top:12px;font-size:10px}}

/* Continuous, slow light flow, with one ribbon silhouette. */
.palette-preview .process-wave{animation:process-light 12s ease-in-out infinite alternate;transform-origin:center}
@keyframes process-light{0%{opacity:.27;transform:translateY(-5px)}100%{opacity:.43;transform:translateY(7px)}}
@keyframes ribbon-breathe{0%{transform:translate(0,0) scale(1);opacity:.77}50%{transform:translate(-15px,10px) scale(1.015);opacity:.86}100%{transform:translate(10px,20px) scale(1.025);opacity:.77}}
@media(prefers-reduced-motion:reduce){.palette-preview .process-wave{animation:none;background-image:url('process-wave-static.svg');opacity:.3}.studio-light{animation:none}}

/* Fine luminous mesh ribbons, original animated vector artwork. */
.studio-light{inset:-30px -24% auto 5%;width:119%;height:950px;background:url('hero-mesh.svg?v=1') center/100% 100% no-repeat;mask-image:linear-gradient(transparent,#000 12%,#000 70%,transparent 96%);opacity:.65;animation:mesh-arrive 1.8s .2s cubic-bezier(.22,1,.36,1) both;transform:rotate(-17deg);filter:none}
@keyframes mesh-arrive{from{opacity:0;translate:30px 25px;filter:blur(12px)}to{opacity:.65;translate:0 0;filter:blur(0)}}
.palette-preview .desktop-frame{padding:9px 7px 6px;background:linear-gradient(135deg,#555b65 0%,#15181d 14%,#080b10 65%,#373d46 100%);border:1px solid #707984;box-shadow:inset 0 1px #e6edfa80,inset 1px 0 #ffffff25,3px 3px 0 #929ba6,4px 4px 0 #30353d,0 25px 45px #17233e20}
.palette-preview .desktop-screen:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(120deg,#ffffff0f,transparent 32%,transparent 78%,#bed8ff08);border:1px solid #00000030;border-radius:6px}
.palette-preview .monitor-chin{height:25px;background:linear-gradient(105deg,#c6ccd5,#f1f3f6 38%,#c2c9d3 80%,#9ba5b2);box-shadow:inset 0 1px #fff,inset 0 -1px #7d8796,3px 2px 0 #919ba6}
.palette-preview .monitor-neck{background:linear-gradient(90deg,#929eac,#dce2e9 35%,#edf0f4 50%,#a3aebb);filter:drop-shadow(3px 3px 3px #15243b15)}
.palette-preview .monitor-foot{background:linear-gradient(175deg,#f6f8fa 0%,#cbd3dc 45%,#8c98a6 75%,#bac3ce);box-shadow:0 1px 0 #6c7785,0 10px 13px #1d2b431a}
@media(max-width:760px){.studio-light{inset:340px -75% auto -65%;width:240%;height:640px;opacity:.5;transform:rotate(-18deg)}.palette-preview .monitor-chin{height:18px}}
@media(prefers-reduced-motion:reduce){.studio-light{animation:none;background-image:url('hero-mesh-static.svg');opacity:.55}}

/* Mobile process: a compact single-column timeline. */
@media(max-width:760px){
 .palette-preview .simple-process{padding:32px 0 28px}
 .palette-preview .simple-process h2{font-size:27px;letter-spacing:-1.1px;line-height:1.18;margin-bottom:14px}
 .palette-preview .simple-process .eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:16px}
 .palette-preview .process-intro{font-size:12px;line-height:1.75;margin-bottom:20px}
 .palette-preview .simple-flow{display:flex;flex-direction:column;gap:0;margin:0;padding:0}
 .palette-preview .simple-flow li,.palette-preview .simple-flow li:last-child{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;row-gap:5px;border:0;border-top:1px solid #ffffff16;padding:16px 0;margin:0;min-height:0}
 .palette-preview .simple-flow .flow-number{position:static;grid-column:1;grid-row:1/3;display:block;margin:0;padding:0;width:auto;height:auto;align-self:start;font-size:20px;font-weight:550;letter-spacing:-.6px;line-height:1.2;background:none;border:0}
 .palette-preview .simple-flow li h3{grid-column:2;grid-row:1;margin:0;padding:0;font-size:14px;line-height:1.4;letter-spacing:-.2px}
 .palette-preview .simple-flow li p{grid-column:2;grid-row:2;margin:0;padding:0;font-size:12px;line-height:1.65;color:#aebcd7;max-width:none}
 .palette-preview .simple-flow li:before,.palette-preview .simple-flow li:after{display:none!important}
 .palette-preview .process-promise{margin-top:6px;padding-top:15px;border-top:1px solid #ffffff16}
 .palette-preview .process-promise span{font-size:10px;line-height:1.7;color:#9cacca}
}

@media(max-width:760px){
 .palette-preview .simple-flow{gap:0!important}
 .palette-preview .simple-flow li,.palette-preview .simple-flow li:last-child{padding:20px 0!important;grid-template-columns:32px minmax(0,1fr);column-gap:14px;row-gap:6px;align-content:center}
 .palette-preview .simple-flow .flow-number{grid-row:1;align-self:center;font-size:19px;line-height:1.4;margin:0!important;translate:0 1px}
 .palette-preview .simple-flow li h3{align-self:center;line-height:1.4;margin:0!important}
 .palette-preview .simple-flow li p{margin:0!important;line-height:1.65}
 .palette-preview .simple-process h2{max-width:340px;font-size:27px;line-height:1.18}
}

/* Stability: use a small static vector layer, animate composited transforms only. */
.studio-light{background-image:url('hero-mesh.svg?v=2');animation:mesh-arrive 1.4s .2s ease-out both,mesh-drift 20s 1.6s ease-in-out infinite alternate}
@keyframes mesh-drift{from{transform:rotate(-17deg) translateY(0)}to{transform:rotate(-16deg) translateY(12px)}}
@keyframes mesh-arrive{from{opacity:0}to{opacity:.65}}
@media(max-width:760px),(prefers-reduced-motion:reduce){.studio-light{animation:none;opacity:.5;background-image:url('hero-mesh-static.svg?v=2')}.palette-preview .hero .desktop-device{filter:none}.palette-preview .hero .desktop-frame{box-shadow:inset 0 1px #ffffff70,0 12px 24px #17233e16}}

/* FAQ: independent columns beneath a full-width introduction. */
.palette-preview .faq-layout{display:block}
.palette-preview .faq-layout>div:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:42px;align-items:end;margin-bottom:32px}
.palette-preview .faq-layout>div:first-child .eyebrow{grid-column:1/-1;margin-bottom:16px}
.palette-preview .faq-layout h2{margin:0;max-width:none}
.palette-preview .faq-layout>div:first-child p{margin:0;justify-self:end;align-self:end;padding-bottom:5px}
.palette-preview .faq-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.palette-preview .faq-column{min-width:0}
.palette-preview #pytania details{margin:0;border-top:0;border-bottom:1px solid #e3e9f2}
.palette-preview .faq-column details:first-child{border-top:1px solid #e3e9f2}
.palette-preview #pytania summary{font-size:16px;line-height:1.5;padding:22px 32px 22px 0}
@media(max-width:760px){.palette-preview .faq-columns{grid-template-columns:1fr;gap:0}.palette-preview .faq-layout>div:first-child{display:block;margin-bottom:24px}.palette-preview .faq-layout>div:first-child p{margin-top:12px;padding:0}.palette-preview .faq-column+.faq-column details:first-child{border-top:0}.palette-preview #pytania summary{font-size:14px;padding:18px 28px 18px 0}}

/* Compact FAQ spacing: padding belongs to the question only. */
.palette-preview #pytania details{padding:0}
.palette-preview #pytania summary{padding:16px 28px 16px 0;font-size:15px;line-height:1.45}
.palette-preview .faq-columns{gap:32px}
.palette-preview .faq-layout>div:first-child{margin-bottom:22px}
.palette-preview #pytania .faq-answer p{margin:0 0 18px;line-height:1.7}
@media(max-width:760px){.palette-preview .faq-columns{gap:0}.palette-preview #pytania summary{padding:15px 26px 15px 0;font-size:14px}.palette-preview .faq-layout>div:first-child{margin-bottom:18px}}

.contact .care-checkbox{display:flex;align-items:center;gap:10px;margin:14px 0 20px;cursor:pointer;font-size:12px;line-height:1.5;color:#233453}
.contact .care-checkbox input[type=checkbox]{appearance:auto;flex:0 0 18px;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:#305bfa;cursor:pointer}
.contact .care-checkbox span{display:block}