/* ODSŁONA editorial refresh: shared navigation, visible content, compact homepage. */
:root { --content: min(1320px, calc(100% - 80px)); --cobalt: #4668f3; --citron: #d7e9a2; }
html { scroll-padding-top: 100px; }
body { overflow-wrap: break-word; }
.wrap { width: var(--content); margin-inline: auto; }
.site-header { height: 80px; padding-inline: max(40px, calc((100vw - 1320px) / 2)); background: rgba(17,19,22,.96); border-bottom: 1px solid rgba(243,240,232,.1); }
.site-header.is-scrolled { height: 72px; }
.wordmark { font-size: 1.45rem; }
.site-nav { gap: 28px; text-shadow: none; }
.site-nav > a:not(.nav-cta) { opacity: .88; }
.site-nav > a[aria-current="page"] { color: #ff765e; opacity: 1; }
.nav-cta { display: flex; gap: 24px; align-items: center; }
.button { font-size: .9rem; }
.reveal { opacity: 1; transform: none; }
/* Content never waits for scroll to become readable. Entrance motion is decoration only. */
@keyframes settle-in { from { transform: translateY(12px); } to { transform: translateY(0); } }
.reveal.is-visible { animation: settle-in .55s var(--ease-out) both; }
.section-index { margin-bottom: 20px; font-size: .64rem; letter-spacing: .13em; }
.inline-link { display: inline-flex; align-items: center; gap: 20px; width: fit-content; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: .8rem; font-weight: 600; }
.inline-link span, .nav-cta span { transition: transform .25s; }
.inline-link:hover span, .nav-cta:hover span { transform: translate(3px,-3px); }
.opening { position: relative; color: var(--paper); background: var(--ink); overflow: hidden; padding-top: 80px; }
.opening-grid { display: grid; grid-template-columns: 1fr 1.12fr; align-items: center; gap: 28px; padding-block: 40px 34px; }
.opening-copy { position: relative; z-index: 2; }
.opening .eyebrow { display: flex; gap: 10px; align-items: center; color: #c8c8c1; font-size: .6rem; letter-spacing: .09em; margin-bottom: 25px; }
.live-dot { display: inline-block; flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--vermilion); box-shadow: 0 0 12px #ff4d3266; }
.opening h1 { margin: 0; font-size: clamp(4rem, 6.6vw, 6.3rem); line-height: .94; font-weight: 800; letter-spacing: -.075em; }
.opening h1 > span { color: var(--vermilion); }
.opening h1 small { display: block; margin-top: 16px; font-size: .57em; letter-spacing: -.055em; line-height: 1.07; }
.opening-lead { margin: 28px 0 12px; font-size: 1.18rem; line-height: 1.48; letter-spacing: -.02em; }
.opening-description { max-width: 380px; margin: 0; color: #aaaead; font-size: .9rem; }
.opening-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 28px; }
.quiet-link { display: inline-flex; gap: 18px; align-items: center; font-size: .76rem; color: #c3c4bd; }
.quiet-link:hover { color: white; }
.opening-art { position: relative; margin: 0; padding-top: 10px; transform: translate3d(var(--hero-x,0), var(--hero-y,0),0); transition: transform .7s var(--ease-out); }
.art-caption { display: flex; justify-content: space-between; margin: 0 0 18px 28px; font: .59rem 'IBM Plex Mono',monospace; color: #b6b9b4; letter-spacing: .1em; }
.art-caption > span:last-child { font: 1.5rem Manrope,sans-serif; color: #ff755e; }
.art-scene { position: relative; height: clamp(350px,33vw,460px); margin-right: -40px; overflow: hidden; border: 1px solid #ffffff12; border-radius: 150px 0 0 0; }
.art-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.art-scene::after { position: absolute; inset: 0; content: ''; background: linear-gradient(0deg,#111316b3,transparent 28%); }
.art-scan { position: absolute; top: 0; bottom: 0; width: 1px; left: 64%; background: #ffc1aa; box-shadow: 0 0 24px 2px #ff4d3266; transform: rotate(27deg); opacity: .55; }
.opening-stamp { position: absolute; display: flex; align-items: center; gap: 20px; left: 0; bottom: 45px; padding: 22px 27px; background: var(--cobalt); box-shadow: 0 20px 60px #0005; transform: rotate(-4deg); animation: stamp-arrive 1.2s var(--ease-out) both; }
@keyframes stamp-arrive { from { transform: translateY(30px) rotate(-8deg); opacity: 0; } to { transform: translateY(0) rotate(-4deg); opacity: 1; } }
.stamp-icon { font-size: 2.3rem; line-height: 1; }
.opening-stamp > span:last-child { font-size: .8rem; line-height: 1.8; }
.opening-art figcaption { display: flex; justify-content: space-between; margin-top: 18px; padding-left: 28px; font: .53rem 'IBM Plex Mono',monospace; color: #7c817e; letter-spacing: .12em; }
.opening-bottom { display: flex; justify-content: space-between; padding-block: 20px; border-top: 1px solid #ffffff1a; color: #9c9e99; font-size: .69rem; }
.opening-bottom > a { font: .57rem 'IBM Plex Mono',monospace; letter-spacing: .1em; display: flex; gap: 24px; align-items: center; }
.opening-bottom > a span { color: var(--vermilion); font-size: 1rem; }
.promise-strip { background: #e8e5dc; border-bottom: 1px solid var(--line-dark); }
.promise-grid { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 22px; }
.promise-grid p { display: flex; gap: 15px; align-items: center; margin: 0; font-size: .75rem; }
.promise-grid p > span { color: #77776d; font: .56rem 'IBM Plex Mono',monospace; }
.promise-grid strong { font-weight: 600; }
.work-section { padding-block: 90px 78px; }
.editorial-heading { display: grid; grid-template-columns: 1.45fr 1fr; gap: 60px; align-items: end; margin-bottom: 36px; }
.editorial-heading h2 { margin: 0; font-size: clamp(2.3rem,3.5vw,3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; }
.editorial-heading h2 > span { color: #72746e; }
.heading-aside { max-width: 360px; justify-self: end; }
.heading-aside p { margin: 0 0 22px; font-size: .86rem; color: #64675f; }
.comparison-window { border: 1px solid #d0ccc2; border-radius: 9px; overflow: hidden; }
.window-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; color: #72736c; background: #e9e5dc; font: .56rem 'IBM Plex Mono',monospace; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 5px; height: 5px; background: #a1a197; border-radius: 50%; }
.home-comparison { min-height: 0; height: clamp(360px,38vw,515px); }
.home-comparison .demo-before { padding: 3.4%; }
.home-comparison .demo-legacy-top { padding-bottom: 15px; }
.home-comparison .demo-legacy-content { width: 32%; margin: 5% 0 0; }
.home-comparison .demo-legacy-content h3 { font-size: clamp(1.8rem,2.6vw,2.5rem); }
.home-comparison .demo-legacy-content p { font-size: .9rem; max-width: 450px; }
.legacy-button { display: inline-block; padding: 6px 18px; border: 1px solid #9b9990; font: .72rem Georgia,serif; }
.home-comparison .demo-legacy-bottom { margin-top: 5%; gap: 16px; }
.home-comparison .demo-legacy-bottom i { height: 50px; }
.home-comparison .demo-after { background: #173c38; padding: 3.4%; }
.home-comparison .demo-modern-top { font-size: .52rem; }
.home-comparison .demo-modern-top span, .home-comparison .demo-modern-content small { color: var(--citron); }
.home-comparison .demo-modern-content { margin: 5% 0 0 39%; }
.home-comparison .demo-modern-content h3 { margin: 20px 0; font-size: clamp(2.3rem,4.3vw,4rem); line-height: .97; }
.home-comparison .demo-modern-content h3 span { color: var(--citron); }
.home-comparison .demo-modern-content p { font-size: .8rem; }
.metal-sculpture { position: absolute; top: 19%; right: -5%; width: 25%; height: 88%; transform: rotate(-28deg); }
.metal-sculpture i { position: absolute; width: 100%; height: 65%; border-radius: 50%; border: 22px solid #d6e3ca; background: transparent; box-shadow: inset 8px 0 16px #032d2599, 8px 10px 18px #001f1680; }
.metal-sculpture i:nth-child(1) { top: 0; transform: rotateY(35deg); }
.metal-sculpture i:nth-child(2) { top: 9%; transform: rotateY(35deg); border-color: #b1c9a6; }
.metal-sculpture i:nth-child(3) { top: 18%; transform: rotateY(35deg); border-color: #85a889; }
.metal-sculpture i:nth-child(4) { top: 27%; transform: rotateY(35deg); border-color: #5b8b76; }
.metal-sculpture i:nth-child(5) { top: 36%; transform: rotateY(35deg); border-color: #397060; }
.sculpture-index { position: absolute; bottom: 25px; right: 35px; color: #d7e9a2; font: .65rem 'IBM Plex Mono',monospace; }
.comparison-shell:focus-within { outline: 3px solid var(--cobalt); outline-offset: -4px; }
.comparison-range { touch-action: pan-y; }
.work-caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 18px; color: #6f736b; font-size: .67rem; }
.work-caption p { margin: 0; }
.caption-dot { display: inline-block; width: 5px; height: 5px; background: var(--vermilion); margin-right: 8px; border-radius: 50%; }
.work-caption > span { font: .51rem 'IBM Plex Mono',monospace; letter-spacing: .1em; }
.offer-preview { padding-block: 76px 32px; background: #e8e5dd; }
.offer-tiles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.offer-tile { display: block; min-width: 0; background: var(--paper); transition: box-shadow .3s; }
.offer-tile:hover { box-shadow: 0 14px 32px #11131610; }
.tile-art { position: relative; height: 250px; overflow: hidden; }
.art-web { background: #bfcafa; }
.mini-browser { position: absolute; width: 61%; padding: 13px; border: 1px solid #ffffff66; box-shadow: 0 12px 22px #1b28682b; }
.browser-back { top: 32px; left: 12%; height: 172px; background: #e8e8ec; color: #94969c; transform: rotate(-10deg); }
.browser-back > span { font: .65rem Georgia,serif; }
.browser-back > i { display: block; width: 90%; height: 10px; margin-top: 14px; background: #d0d0d7; }
.browser-front { top: 57px; left: 29%; height: 177px; color: #eaf0f8; background: #234bcc; transform: rotate(7deg); transition: transform .6s var(--ease-out); }
.browser-front > div { display: flex; justify-content: space-between; font-size: .55rem; }
.browser-front strong { display: block; margin-top: 23px; font-size: 1.8rem; letter-spacing: -.06em; line-height: .95; }
.browser-front small { position: absolute; bottom: 15px; font: .4rem 'IBM Plex Mono',monospace; }
.browser-front i { position: absolute; width: 46px; height: 46px; right: 13px; bottom: 20px; border: 9px solid #c5db72; border-radius: 50%; }
.tile-spark { position: absolute; right: 8%; top: 9%; font-size: 4rem; color: #2840a0; line-height: 1; }
.offer-tile:hover .browser-front { transform: translateY(-7px) rotate(2deg); }
.art-search { background: #d6e1c0; padding: 24px; }
.search-pill { position: relative; display: flex; align-items: center; gap: 11px; z-index: 1; color: #4e5a47; background: #f3f5ed; border-radius: 25px; padding: 12px 16px; font-size: .63rem; box-shadow: 0 6px 18px #3341230d; }
.search-pill > span { font-size: 1.4rem; line-height: .7; }
.search-hit { position: relative; z-index: 1; width: 87%; background: #f2f5e8; padding: 19px; margin-top: 12px; transform: rotate(-3deg); border: 1px solid #c4d2ab; }
.search-hit > span { color: #697459; font: .42rem 'IBM Plex Mono',monospace; }
.search-hit > strong { display: block; margin-top: 6px; color: #314d3e; font-size: 1rem; letter-spacing: -.03em; line-height: 1.2; }
.search-hit > i { display: block; margin-top: 8px; background: #d4ddc5; width: 75%; height: 3px; }
.search-hit > i:last-child { width: 50%; }
.growth-path { position: absolute; right: 0; bottom: -4px; width: 80%; height: 130px; z-index: 2; fill: none; stroke: #284e35; stroke-width: 5; }
.offer-tile:hover .growth-path { stroke: #558630; }
.art-brand { background: #efb6a5; padding: 17px 24px; }
.brand-type { display: flex; align-items: center; justify-content: space-between; color: #692f32; font-size: 6.5rem; font-weight: 600; letter-spacing: -.075em; line-height: 1.3; }
.brand-type > span { font-size: 3.1rem; font-weight: 400; }
.swatches { display: flex; padding-top: 5px; }
.swatches i { width: 47px; height: 47px; border-radius: 50%; background: #a1443b; border: 3px solid #efb6a5; }
.swatches i + i { margin-left: -9px; }
.swatches i:nth-child(2) { background: #ffeadd; }.swatches i:nth-child(3) { background: #553139; }.swatches i:nth-child(4) { background: #3b5fbd; }
.brand-guide { position: absolute; right: 22px; bottom: 29px; font: .4rem 'IBM Plex Mono',monospace; letter-spacing: .08em; color: #692f32; }
.tile-copy { padding: 25px 25px 28px; }
.tile-number { font: .51rem 'IBM Plex Mono',monospace; letter-spacing: .08em; color: #6b6f63; }
.tile-copy h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 12px; font-size: clamp(1.4rem,1.8vw,1.75rem); line-height: 1.2; letter-spacing: -.04em; }
.tile-copy h3 > span { font-size: 1.2rem; font-weight: 400; }
.tile-copy p { min-height: 68px; margin: 0 0 22px; font-size: .79rem; line-height: 1.65; color: #64675f; }
.tile-price { display: inline-block; font-size: .7rem; font-weight: 600; border-bottom: 1px solid #c4c4b8; padding-bottom: 3px; }
.offer-footnote { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; font-size: .74rem; color: #64675f; }.offer-footnote p { margin: 0; }.offer-footnote a { color: var(--ink); }
.process-preview { padding-block: 85px 75px; }
.process-preview .editorial-heading > .inline-link { justify-self: end; }
.short-steps { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 45px; padding: 0; margin: 50px 0 22px; list-style: none; }
.short-steps::before { position: absolute; top: 21px; width: 100%; height: 1px; content: ''; background: #c8c9bf; }
.short-steps li { position: relative; }
.step-node { position: relative; z-index: 1; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #b7bcb1; border-radius: 50%; background: var(--paper); font: .62rem 'IBM Plex Mono',monospace; }
.step-final { color: var(--paper); background: var(--ink); border-color: var(--ink); font: 1.3rem Manrope,sans-serif; }
.short-steps h3 { margin: 22px 0 12px; font-size: 1.1rem; letter-spacing: -.03em; }.short-steps p { max-width: 315px; margin: 0; color: #666b60; font-size: .8rem; }
.process-condition { max-width: 780px; margin: 27px 0 0; color: #73776d; font-size: .65rem; }
.faq-signpost { display: flex; gap: 24px; align-items: center; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line-dark); }
.faq-symbol { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border: 1px solid #bbbeb1; border-radius: 50%; color: #717669; font-size: 1.4rem; }
.faq-signpost h3 { margin: 0 0 3px; font-size: .95rem; font-weight: 600; }.faq-signpost p { margin: 0; font-size: .75rem; color: #6c7166; }.faq-signpost .inline-link { margin-left: auto; flex-shrink: 0; }
.closing { overflow: hidden; background: var(--vermilion); padding-block: 66px; }
.closing-grid { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 60px; }.closing .section-index { color: #54251f; }
.closing h2 { margin: 0; font-size: clamp(2.6rem,4vw,4rem); font-weight: 600; letter-spacing: -.065em; line-height: 1.08; }.closing h2 span { color: #792b25; }.closing p:not(.section-index) { margin: 23px 0; font-size: .87rem; max-width: 370px; }.closing .button { min-width: 270px; }
.closing-mark { position: relative; justify-self: center; width: 260px; height: 260px; display: grid; place-items: center; transform: rotate(-15deg); }.closing-mark > span { font: 800 300px/.8 Manrope,sans-serif; color: #111316; letter-spacing: -.09em; }.closing-mark i { position: absolute; top: 44%; width: 128%; height: 34px; transform: rotate(-20deg); background: var(--paper); }.closing-mark b { position: absolute; right: -25px; bottom: 0; font: .57rem/1.5 'IBM Plex Mono',monospace; letter-spacing: .1em; transform: rotate(15deg); }
.home-page .site-footer { padding: 40px max(40px,calc((100vw - 1320px)/2)) 24px; }.footer-topline { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.footer-topline p { color: #a5aaa1; font-size: .78rem; }.footer-email { font-size: .83rem; }.footer-links { display: flex; gap: 30px; padding-block: 28px; color: #bfc3b9; font-size: .76rem; }.footer-links a:hover { color: #ff765e; }
@media (max-width:1100px) {
  :root { --content: calc(100% - 48px); }.site-header { padding-inline: 24px; }.site-nav { gap: 18px; }.opening-grid { gap: 20px; }.opening h1 { font-size: 5.9rem; font-size: clamp(4.2rem,7.5vw,5.9rem); }.art-scene { margin-right: -24px; height: 420px; }.opening-stamp { left: -12px; padding: 17px 19px; }.editorial-heading { gap: 35px; }.tile-copy { padding: 22px; }.tile-art { height: 225px; }.brand-guide { display: none; }.home-page .site-footer { padding-inline: 24px; }
}
@media (max-width:820px) {
  :root { --content: calc(100% - 40px); }.site-header { height: 70px; padding-inline: 20px; }.site-header.is-scrolled { height: 70px; }.wordmark { font-size: 1.3rem; }.site-nav { padding: 105px 24px 30px; height: 100dvh; }.nav-cta { margin-top: 15px; }.opening { padding-top: 70px; }.opening-grid { grid-template-columns: 1fr 1fr; padding-block: 42px 28px; gap: 12px; }.opening h1 { font-size: clamp(3.5rem,8vw,4.8rem); }.opening .eyebrow { font-size: .49rem; letter-spacing: .01em; }.opening-lead { font-size: 1.02rem; }.opening-description { font-size: .8rem; }.opening-actions .button { font-size: .75rem; gap: 12px; padding: 12px 16px; }.art-scene { height: 380px; border-radius: 80px 0 0 0; }.art-caption { margin-left: 12px; font-size: .45rem; }.opening-stamp { left: -5px; bottom: 35px; gap: 10px; padding: 15px; }.opening-stamp > span:last-child { font-size: .63rem; }.stamp-icon { font-size: 1.7rem; }.opening-art figcaption { padding-left: 8px; font-size: .4rem; }.promise-grid { gap: 15px; }.promise-grid p { font-size: .63rem; gap: 9px; }.editorial-heading { grid-template-columns: 1.2fr 1fr; gap: 25px; }.editorial-heading h2 { font-size: 2.4rem; }.heading-aside p { font-size: .79rem; }.inline-link { font-size: .72rem; }.work-section,.process-preview { padding-block: 60px; }.offer-preview { padding-top: 60px; }.offer-tiles { gap: 12px; }.tile-art { height: 200px; }.tile-copy { padding: 20px 16px; }.tile-copy h3 { font-size: 1.23rem; }.tile-copy p { font-size: .75rem; min-height: 102px; }.tile-number { font-size: .45rem; }.browser-front { top: 42px; height: 147px; }.browser-front strong { font-size: 1.4rem; }.browser-back { top: 22px; height: 143px; }.tile-spark { font-size: 3rem; }.art-search { padding: 15px; }.search-pill { font-size: .5rem; padding: 10px; }.search-hit { padding: 13px; }.search-hit > strong { font-size: .8rem; }.brand-type { font-size: 5rem; }.swatches i { width: 40px; height: 40px; }.short-steps { gap: 25px; }.short-steps h3 { font-size: 1rem; }.short-steps p { font-size: .76rem; }.closing { padding-block: 55px; }.closing-grid { gap: 30px; }.closing-mark { width: 180px; height: 180px; }.closing-mark > span { font-size: 215px; }.closing-mark i { height: 25px; }.closing-mark b { right: -10px; bottom: -20px; }.footer-topline { flex-wrap: wrap; gap: 14px; }.footer-topline p { margin: 0; }.footer-links { gap: 20px; flex-wrap: wrap; }
}
@media (max-width:600px) {
  :root { --content: calc(100% - 40px); }.opening-grid { display: block; padding-top: 32px; }.opening .eyebrow { font-size: .52rem; margin-bottom: 24px; }.opening h1 { font-size: clamp(3.9rem,18vw,6rem); }.opening h1 small { font-size: .57em; margin-top: 12px; }.opening-lead { margin-top: 23px; }.opening-description { max-width: 330px; font-size: .81rem; }.opening-actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 17px; margin-top: 22px; }.opening-actions .button { font-size: .77rem; min-height: 49px; }.quiet-link { font-size: .68rem; }.opening-art { padding: 0; margin-top: 30px; transform: none; }.art-caption { margin: 0 0 9px; font-size: .49rem; }.art-caption > span:last-child { font-size: 1.1rem; }.art-scene { height: 265px; margin-inline: 0; border-radius: 70px 0 0; }.art-scene img { object-position: 67% 50%; }.opening-stamp { left: 10px; bottom: 32px; padding: 12px 17px; }.opening-stamp > span:last-child { font-size: .63rem; }.opening-art figcaption { margin-top: 12px; padding: 0; font-size: .42rem; }.opening-bottom { padding-block: 15px; }.opening-bottom > span { font-size: .57rem; max-width: 210px; }.opening-bottom > a { font-size: 0; gap: 0; }.opening-bottom > a span { font-size: 1.1rem; }.promise-grid { align-items: flex-start; flex-direction: column; gap: 11px; padding-block: 19px; }.promise-grid p { font-size: .66rem; }.promise-grid p > span { font-size: .5rem; }.editorial-heading { display: block; margin-bottom: 26px; }.editorial-heading h2 { font-size: clamp(2rem,8.8vw,3rem); }.section-index { font-size: .56rem; margin-bottom: 17px; }.heading-aside { margin-top: 22px; max-width: 380px; }.heading-aside p { margin-bottom: 16px; }.work-section { padding-block: 48px; }.window-bar { padding: 11px 12px; font-size: .41rem; }.window-dots { gap: 3px; }.window-dots i { width: 4px; height: 4px; }.home-comparison { height: 340px; }.home-comparison .demo-before,.home-comparison .demo-after { padding: 20px; }.home-comparison .demo-legacy-top b { font-size: 1rem; }.home-comparison .demo-legacy-content { width: 43%; margin: 30px 0 0; }.home-comparison .demo-legacy-content h3 { font-size: 1.25rem; }.home-comparison .demo-legacy-content p { font-size: .68rem; margin-bottom: 17px; }.home-comparison .demo-legacy-content small { font-size: .45rem; }.home-comparison .demo-legacy-bottom { display: none; }.home-comparison .demo-modern-top { font-size: .37rem; }.home-comparison .demo-modern-top b { font-size: .85rem; }.home-comparison .demo-modern-top em { font-size: .35rem; }.home-comparison .demo-modern-content { margin: 34px 0 0 39%; }.home-comparison .demo-modern-content h3 { font-size: clamp(1.4rem,6.7vw,1.65rem); margin: 18px 0 16px; }.home-comparison .demo-modern-content small { font-size: .38rem; letter-spacing: .05em; }.home-comparison .demo-modern-content p { font-size: .57rem; max-width: 170px; }.metal-sculpture { right: -20%; top: 33%; width: 32%; height: 78%; opacity: .65; }.metal-sculpture i { border-width: 12px; }.sculpture-index { display: none; }.comparison-label { bottom: 15px; padding: 6px 9px; font-size: .5rem; }.before-label { left: 15px; }.after-label { right: 15px; }.comparison-divider span { width: 38px; height: 38px; }.work-caption { padding-top: 13px; font-size: .58rem; }.work-caption > span { display: none; }.offer-preview { padding-block: 48px 25px; }.offer-tiles { grid-template-columns: 1fr; gap: 20px; }.tile-art { height: 240px; }.tile-copy { padding: 23px; }.tile-number { font-size: .51rem; }.tile-copy h3 { margin: 12px 0; font-size: 1.7rem; }.tile-copy p { min-height: 0; font-size: .8rem; margin-bottom: 18px; }.browser-front { width: 55%; left: 33%; top: 50px; height: 180px; padding: 16px; }.browser-back { width: 57%; height: 177px; top: 24px; left: 14%; }.browser-front strong { font-size: 1.8rem; }.tile-spark { top: 4%; right: 5%; font-size: 4rem; }.art-search { padding: 25px; }.search-pill { font-size: .67rem; padding: 12px 16px; }.search-hit { padding: 18px; width: 79%; }.search-hit strong { font-size: 1.02rem; }.brand-type { font-size: 6.5rem; }.swatches i { width: 46px; height: 46px; }.brand-guide { display: inline; }.offer-footnote { flex-direction: column; gap: 8px; font-size: .68rem; }.process-preview { padding-block: 48px; }.process-preview .editorial-heading > .inline-link { margin-top: 22px; }.short-steps { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }.short-steps::before { top: 0; bottom: 0; left: 20px; width: 1px; height: auto; }.short-steps li { padding-left: 64px; }.step-node { position: absolute; left: 0; top: 0; }.short-steps h3 { margin-top: 6px; font-size: 1.02rem; }.short-steps p { font-size: .78rem; }.process-condition { font-size: .6rem; margin-top: 28px; }.faq-signpost { display: grid; grid-template-columns: 44px 1fr; gap: 14px; margin-top: 30px; padding-top: 25px; }.faq-signpost > div { flex: 1; }.faq-signpost h3 { font-size: .84rem; }.faq-signpost p { font-size: .68rem; }.faq-signpost .inline-link { grid-column: 2; margin-left: 0; }.closing { padding-block: 45px; }.closing-grid { display: block; position: relative; }.closing h2 { position: relative; z-index: 1; font-size: 2.3rem; }.closing p:not(.section-index) { font-size: .8rem; max-width: 270px; }.closing .button { min-width: 0; font-size: .82rem; position: relative; z-index: 1; }.closing-mark { position: absolute; width: 92px; height: 92px; right: -15px; bottom: -36px; opacity: .27; }.closing-mark > span { font-size: 112px; }.closing-mark i { height: 14px; }.closing-mark b { display: none; }.home-page .site-footer { padding: 30px 20px 20px; }.footer-topline { display: grid; grid-template-columns: 1fr; gap: 15px; }.footer-topline .wordmark { font-size: 1.55rem; }.footer-topline p { font-size: .68rem; }.footer-email { margin-top: 6px; font-size: .82rem; }.footer-links { gap: 16px 24px; padding-block: 24px; font-size: .69rem; }.footer-bottom { font-size: .54rem; gap: 10px; }
}
@media (prefers-reduced-motion:reduce) { .opening-art { transform: none; }.opening-stamp { animation: none; }.reveal.is-visible { animation: none; }.offer-tile:hover .browser-front { transform: rotate(7deg); } }

@keyframes browser-entrance { from { transform: translate(24px,16px) rotate(15deg); } to { transform: translate(0,0) rotate(7deg); } }
@keyframes line-draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }
@keyframes swatch-entrance { from { transform: translateX(24px); } to { transform: translateX(0); } }
@keyframes process-connect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mark-unveil { from { transform: rotate(-30deg) scale(.9); } to { transform: rotate(-15deg) scale(1); } }
@media (prefers-reduced-motion:no-preference) {
  .tile-web.is-in-view .browser-front { animation: browser-entrance 1s var(--ease-out); }
  .tile-seo.is-in-view .growth-path path:first-child { stroke-dasharray: 430; animation: line-draw 1.5s var(--ease-out); }
  .tile-brand.is-in-view .swatches i { animation: swatch-entrance .8s var(--ease-out) both; }
  .tile-brand.is-in-view .swatches i:nth-child(2) { animation-delay: .1s; }
  .tile-brand.is-in-view .swatches i:nth-child(3) { animation-delay: .2s; }
  .closing-mark.is-in-view { animation: mark-unveil 1s var(--ease-out); }
}
@media (min-width:601px) and (prefers-reduced-motion:no-preference) { .short-steps.is-in-view::before { transform-origin: left; animation: process-connect 1.3s var(--ease-out); } }
@media (max-width:360px) { .browser-front strong { font-size: 1.45rem; } }
.comparison-shell[data-view="after"] .before-label,
.comparison-shell[data-view="before"] .after-label { visibility: hidden; }

@media (max-width:360px) {
  .home-comparison .demo-legacy-content h3 { font-size: 1.05rem; margin: 12px 0; }
  .home-comparison .demo-legacy-content p { font-size: .58rem; line-height: 1.4; }
  .home-comparison .legacy-button { font-size: .56rem; padding: 5px 9px; }
}

/* Filmowa wersja głównej: prawdziwe miniatury stron, studio usług i krótki sticky story. */
.hero-turntable { position: relative; height: clamp(390px,35vw,475px); margin-right: -40px; perspective: 1500px; overflow: hidden; border: 1px solid #ffffff17; border-radius: 132px 0 0; background: radial-gradient(circle at 65% 35%,#2e3339 0,#17191d 48%,#0b0c0f 100%); }
.hero-turntable::before { position: absolute; z-index: 0; right: -8%; bottom: -62%; width: 108%; aspect-ratio: 1; border: 1px solid #ffffff14; border-radius: 50%; background: radial-gradient(circle,#25282d 0 29%,#17191d 30% 48%,#0d0f12 49% 66%,#25282d 67% 68%,#111316 69%); content: ''; transform: rotateX(66deg); box-shadow: 0 0 80px #000b; }
.turntable-axis { position: absolute; z-index: 1; right: 41%; bottom: 6%; width: 8px; height: 8px; border-radius: 50%; background: var(--vermilion); box-shadow: 0 0 20px #ff4d32; }
.hero-pair { position: absolute; z-index: 2; inset: 46px 5% 36px 7%; opacity: 0; transform: rotateY(70deg) translateX(55%) scale(.78); transform-origin: 50% 100%; transition: opacity .24s ease, transform .76s var(--ease-out); pointer-events: none; }
.hero-pair.is-active { opacity: 1; transform: rotateY(0) translateX(0) scale(1); }
.hero-pair.is-leaving { opacity: 0; transform: rotateY(-68deg) translateX(-48%) scale(.8); }
.hero-site { position: absolute; overflow: hidden; border: 1px solid #ffffff3b; border-radius: 7px; box-shadow: 0 24px 54px #0008; }
.hero-site-old { z-index: 1; top: 17%; left: 0; width: 43%; height: 67%; filter: saturate(.58) brightness(.72); transform: perspective(800px) rotateY(9deg) rotate(-2deg); }
.hero-site-new { z-index: 2; top: 2%; right: 0; width: 67%; height: 83%; transform: perspective(1000px) rotateY(-5deg) rotate(1deg); }
.mock-browser { display: flex; gap: 4px; align-items: center; height: 20px; padding: 0 9px; border-bottom: 1px solid #0002; background: #e6e4df; }
.mock-browser span { width: 4px; height: 4px; border-radius: 50%; background: #8b8b86; }
.hero-site header { display: flex; justify-content: space-between; gap: 9px; align-items: center; height: 34px; padding: 0 7%; }
.hero-site header b { font-size: .64rem; letter-spacing: -.04em; }.hero-site header small { font-size: .3rem; }
.hero-site main { position: relative; display: block; height: calc(100% - 54px); padding: 8% 7%; }
.hero-site main em { display: block; margin-bottom: 10px; font: .3rem 'IBM Plex Mono',monospace; letter-spacing: .08em; }.hero-site main strong { position: relative; z-index: 2; display: block; max-width: 76%; font-size: clamp(.8rem,1.6vw,1.55rem); line-height: 1.02; letter-spacing: -.055em; }.hero-site main > small { position: relative; z-index: 2; display: block; max-width: 58%; margin-top: 10px; font-size: .34rem; }.hero-site main > i { display: block; width: 78%; height: 4px; margin-top: 9px; background: #0002; }.hero-site main > i:nth-of-type(2) { width: 62%; }.hero-site main > i:nth-of-type(3) { width: 70%; }.hero-site main button { position: relative; z-index: 2; margin-top: 13px; padding: 5px 8px; color: inherit; border: 1px solid currentColor; background: transparent; font: .28rem 'IBM Plex Mono',monospace; }
.old-industrial { color: #3e4242; background: #d4d2cc; font-family: Georgia,serif; }.old-industrial main { background: linear-gradient(135deg,#c6c2b9 65%,#999890 65%); }.new-industrial { color: #eff3e7; background: #123b36; }.new-industrial .mock-browser { background: #d9ddd5; }.new-industrial header small,.new-industrial main em,.new-industrial main strong span { color: #d9ec9e; }.new-industrial main { background: linear-gradient(112deg,#123b36 0 66%,#0a2825 66%); }
.hero-metal { position: absolute; z-index: 1; right: -7%; bottom: -42%; width: 40%; aspect-ratio: .62; transform: rotate(-28deg); }.hero-metal i { position: absolute; inset: 0; border: 13px solid #cce1b3; border-radius: 50%; box-shadow: inset 6px 0 14px #082c25,7px 8px 16px #001d18; }.hero-metal i:nth-child(2) { transform: translateY(13%); border-color: #86ae86; }.hero-metal i:nth-child(3) { transform: translateY(26%); border-color: #426f61; }
.old-dental { color: #334b6c; background: #e0e9f3; font-family: Georgia,serif; }.old-dental main { background: linear-gradient(#d0deeb,#edf3f8); }.new-dental { color: #173052; background: #f6f4ee; }.new-dental header small,.new-dental main em,.new-dental main strong span { color: #4668f3; }.new-dental main { background: linear-gradient(135deg,#f8f6f0 0 68%,#d9e0ff 68%); }.hero-orb { position: absolute; right: -9%; bottom: -30%; width: 45%; aspect-ratio: 1; border: 22px solid #ff8e78; border-radius: 50%; box-shadow: 0 0 0 14px #4668f333; }
.old-atelier { color: #684d3f; background: #e2d8cc; font-family: Georgia,serif; }.old-atelier main { background: linear-gradient(130deg,#d7cab9 58%,#ad9380 58%); }.new-atelier { color: #f6eee3; background: #2b2020; }.new-atelier header small,.new-atelier main em,.new-atelier main strong span { color: #ff755e; }.new-atelier main { background: linear-gradient(115deg,#2b2020 0 64%,#b84635 64%); }.hero-arch { position: absolute; right: -9%; bottom: -19%; width: 42%; aspect-ratio: .72; border-radius: 48% 48% 0 0; background: linear-gradient(128deg,#ff8a6f,#722e2a); transform: rotate(13deg); }
.hero-carousel-meta { display: grid; grid-template-columns: 1fr auto 55px; gap: 16px; align-items: center; margin: 13px 0 0 28px; color: #9a9e99; font: .48rem 'IBM Plex Mono',monospace; letter-spacing: .08em; }.hero-carousel-meta > span:last-child { text-align: right; }.hero-carousel-dots { display: flex; gap: 7px; }.hero-carousel-dots button { width: 20px; height: 2px; padding: 0; border: 0; background: #555b58; cursor: pointer; transition: width .3s,background .3s; }.hero-carousel-dots button.is-active { width: 34px; background: var(--vermilion); }

.service-studio { display: grid; min-height: 585px; grid-template-columns: .86fr 1.14fr; border-block: 1px solid var(--line-dark); }
.service-choices { display: flex; flex-direction: column; border-right: 1px solid var(--line-dark); }
.service-choice { display: grid; flex: 1; min-height: 168px; padding: 24px 28px 24px 0; grid-template-columns: 38px 1fr 28px; gap: 14px; align-items: start; border-bottom: 1px solid var(--line-dark); transition: background .35s,color .35s,padding .35s var(--ease-out); }.service-choice:last-child { border-bottom: 0; }.service-choice:hover,.service-choice:focus-visible,.service-choice.is-active { padding-left: 22px; color: var(--paper); background: var(--ink); }.service-choice > span,.service-choice small { font: .54rem 'IBM Plex Mono',monospace; letter-spacing: .08em; }.service-choice > span { padding-top: 4px; color: #82867e; }.service-choice div { display: grid; }.service-choice strong { margin-top: 14px; font-size: clamp(1.45rem,2.1vw,2.2rem); letter-spacing: -.05em; line-height: 1; }.service-choice p { margin: 10px 0 0; color: #696e64; font-size: .76rem; }.service-choice.is-active p,.service-choice:hover p,.service-choice:focus-visible p { color: #b7bcb3; }.service-choice > b { font-size: 1.2rem; font-weight: 400; }
.service-canvas { position: relative; overflow: hidden; min-width: 0; background: #bfcafa; }
.service-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .4s ease,transform .65s var(--ease-out); pointer-events: none; }.service-panel.is-active { opacity: 1; transform: none; }.canvas-code { position: absolute; z-index: 4; top: 25px; left: 28px; font: .55rem 'IBM Plex Mono',monospace; letter-spacing: .1em; }
.service-panel-web { background: #bfcafa; }.canvas-window { position: absolute; padding: 23px; border: 1px solid #ffffff70; box-shadow: 0 26px 55px #263c9328; }.canvas-window small { font: .48rem 'IBM Plex Mono',monospace; }.canvas-window strong { display: block; margin-top: 55px; font-size: clamp(2rem,3.5vw,4rem); line-height: .9; letter-spacing: -.07em; }.canvas-window-old { top: 15%; left: 10%; width: 50%; height: 60%; color: #888b91; background: #eeeef1; transform: rotate(-8deg); }.canvas-window-old i { display: block; width: 80%; height: 8px; margin-top: 14px; background: #d4d4d9; }.canvas-window-old i:nth-of-type(2) { width: 61%; }.canvas-window-new { z-index: 2; right: 8%; bottom: 9%; width: 57%; height: 69%; color: white; background: #234bcc; transform: rotate(4deg); }.canvas-window-new b { position: absolute; bottom: 25px; font: .48rem 'IBM Plex Mono',monospace; }.canvas-ring { position: absolute; z-index: 3; right: 1%; top: 5%; width: 120px; height: 120px; border: 22px solid #d7eb73; border-radius: 50%; }
.service-panel-seo { color: #173d2c; background: #d7e5bf; }.canvas-search { position: absolute; top: 17%; left: 10%; width: 80%; padding: 17px 22px; border-radius: 50px; background: #f7faef; font-size: .74rem; }.canvas-result { position: absolute; z-index: 2; top: 34%; left: 14%; width: 58%; padding: 29px; background: #f7faef; box-shadow: 0 22px 50px #35552a1c; transform: rotate(-4deg); }.canvas-result small { font: .46rem 'IBM Plex Mono',monospace; }.canvas-result strong { display: block; margin: 15px 0 30px; font-size: clamp(1.7rem,3vw,3.2rem); line-height: 1; letter-spacing: -.06em; }.canvas-result i { display: block; width: 80%; height: 6px; margin-top: 10px; background: #d6e0ca; }.canvas-result i:last-child { width: 53%; }.service-panel-seo svg { position: absolute; right: -2%; bottom: -2%; width: 73%; fill: none; stroke: #27573c; stroke-width: 8; }
.service-panel-brand { color: #6a2931; background: #efb29f; }.canvas-type { position: absolute; top: 9%; left: 9%; font-size: clamp(8rem,16vw,16rem); font-weight: 600; line-height: 1; letter-spacing: -.09em; }.canvas-swatches { position: absolute; bottom: 19%; left: 11%; display: flex; }.canvas-swatches i { width: 70px; height: 70px; margin-left: -9px; border: 4px solid #efb29f; border-radius: 50%; background: #a33f3a; }.canvas-swatches i:nth-child(2) { background: #ffe9db; }.canvas-swatches i:nth-child(3) { background: #4c2b36; }.canvas-swatches i:nth-child(4) { background: #4668f3; }.service-panel-brand > strong { position: absolute; right: 8%; bottom: 12%; font-size: clamp(1.7rem,3vw,3.2rem); line-height: 1; letter-spacing: -.06em; text-align: right; }.canvas-seal { position: absolute; top: 12%; right: 9%; padding: 18px; border: 1px solid #6a2931; font: .55rem/1.6 'IBM Plex Mono',monospace; transform: rotate(8deg); }

.story-compact { height: 250vh; min-height: 1780px; margin-top: 70px; }
.story-compact .story-sticky { top: 72px; height: calc(100svh - 72px); min-height: 620px; padding: 36px 0 32px; }
.story-compact .story-copy h2 { margin-bottom: 26px; font-size: clamp(2.25rem,3.65vw,4.3rem); }
.story-compact .story-steps li { max-height: 48px; padding: 12px 0; }.story-compact .story-steps li.is-active { max-height: 126px; padding: 18px 0; }.story-link { display: inline-flex; gap: 25px; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid #ffffff55; font-size: .72rem; }
.process-tail { padding-block: 42px 72px; }.process-tail > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); }.process-tail > div:first-child p { margin: 0; color: #676b64; font-size: .8rem; }.process-tail > div:first-child strong { color: var(--ink); font-size: 1.15rem; }.process-tail .faq-signpost { margin-top: 28px; }

@media (max-width:820px) {
  .hero-turntable { height: 365px; margin-right: -20px; border-radius: 80px 0 0; }.hero-pair { inset: 38px 4% 30px 4%; }.hero-site-old { left: 0; width: 47%; }.hero-site-new { width: 70%; }.hero-carousel-meta { margin-left: 10px; }
  .service-studio { grid-template-columns: .86fr 1.14fr; min-height: 510px; }.service-choice { min-height: 145px; padding: 20px 16px 20px 0; grid-template-columns: 27px 1fr 18px; gap: 9px; }.service-choice:hover,.service-choice:focus-visible,.service-choice.is-active { padding-left: 13px; }.service-choice strong { font-size: 1.35rem; }.service-choice p { font-size: .68rem; }.canvas-window { padding: 18px; }.canvas-window strong { font-size: 2.3rem; }.canvas-ring { width: 80px; height: 80px; border-width: 15px; }.canvas-type { font-size: 8rem; }.canvas-swatches i { width: 48px; height: 48px; }.service-panel-brand > strong { font-size: 1.75rem; }.canvas-result { width: 70%; padding: 22px; }.canvas-result strong { font-size: 2rem; }
  .story-compact { height: auto; min-height: 0; margin-top: 0; padding: 72px 20px; }.story-compact .story-sticky { position: relative; top: auto; height: auto; min-height: 0; padding: 0; }.story-compact .story-steps li { max-height: 130px; padding: 16px 0; opacity: 1; }.story-compact .story-visual { aspect-ratio: 1.02; }.process-tail { padding-block: 35px 55px; }
}
@media (max-width:600px) {
  .hero-turntable { height: 310px; margin: 0; border-radius: 66px 0 0; }.hero-pair { inset: 31px 3% 25px; }.hero-site-old { top: 21%; width: 49%; height: 64%; }.hero-site-new { width: 72%; height: 80%; }.hero-site header { height: 28px; }.hero-site header b { font-size: .46rem; }.hero-site header small { font-size: .2rem; }.hero-site main { height: calc(100% - 48px); }.hero-site main strong { font-size: clamp(.76rem,4.2vw,1rem); }.hero-site main > small { font-size: .26rem; }.hero-site main button { font-size: .2rem; padding: 4px 6px; }.hero-metal i { border-width: 8px; }.hero-carousel-meta { grid-template-columns: 1fr auto 43px; font-size: .4rem; }.hero-carousel-dots button { width: 13px; }.hero-carousel-dots button.is-active { width: 22px; }
  .service-studio { display: block; min-height: 0; }.service-choices { border-right: 0; }.service-choice { min-height: 0; padding: 18px 5px 18px 0; grid-template-columns: 30px 1fr 22px; }.service-choice:hover,.service-choice:focus-visible,.service-choice.is-active { padding-left: 14px; }.service-choice p { display: none; }.service-choice strong { margin-top: 8px; font-size: 1.45rem; }.service-canvas { height: 380px; }.canvas-window-old { width: 55%; }.canvas-window-new { width: 64%; }.canvas-window strong { margin-top: 48px; font-size: 2rem; }.canvas-result { width: 75%; }.canvas-result strong { font-size: 1.9rem; }.canvas-type { font-size: 8rem; }.canvas-swatches { bottom: 13%; }.service-panel-brand > strong { right: 5%; bottom: 8%; font-size: 1.45rem; }.canvas-seal { font-size: .43rem; }
  .story-compact { padding: 54px 20px; }.story-compact .story-sticky { gap: 36px; }.story-compact .story-copy h2 { font-size: 2.4rem; }.story-link { margin-top: 20px; }.process-tail > div:first-child { grid-template-columns: 1fr; gap: 12px; }.process-tail .faq-signpost { display: grid; }
}
@media (prefers-reduced-motion:reduce) { .hero-pair { transition: none; }.service-panel { transition: none; }.story-compact { height: auto; min-height: 0; padding-block: 70px; }.story-compact .story-sticky { position: relative; top: auto; height: auto; } }