:root{--ink:#1b2927;--muted:#697571;--paper:#f4f3ed;--green:#a8bb9c;--line:#d5dad2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{width:min(1320px,calc(100% - 96px));margin:auto}.header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-size:30px;letter-spacing:-2px;font-weight:700}.logo>span:first-child{color:#788e72}.logo-dot{color:#a6b991}.header nav{display:flex;gap:42px;font-size:13px;font-weight:700}.header nav a,.footer a{transition:opacity .2s}.header nav a:hover,.footer a:hover{opacity:.55}.header nav span{margin-left:8px}.hero{min-height:650px;position:relative;display:flex;align-items:center;padding:95px 0 130px}.hero-copy{position:relative;z-index:1;max-width:820px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:700;color:#6b7e70}.hero .eyebrow span{display:inline-block;width:7px;height:7px;background:#819c7a;border-radius:50%;margin-right:10px;vertical-align:2px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em}h1{font-size:clamp(50px,6.4vw,88px);line-height:1.05;margin:32px 0}h1 em,h2 em{font-weight:400;color:#738c70}.intro{font-size:17px;line-height:1.7;max-width:490px;color:#5e6b65;margin-bottom:35px}.button{display:inline-flex;align-items:center;gap:45px;background:var(--ink);color:#fff;padding:19px 22px;font-size:13px;font-weight:700;transition:background .2s}.button:hover{background:#526b55}.button span{font-size:18px}.hero-aside{position:absolute;right:3%;top:50%;width:340px;height:340px;transform:translateY(-55%);display:grid;place-items:center}.orbit{position:absolute;border:1px solid #c7d0c2;border-radius:50%}.orbit-one{inset:0}.orbit-two{inset:35px}.orbit-three{inset:70px}.orbit-center{font-family:Georgia,serif;font-size:45px;letter-spacing:-5px;color:#9aab96}.orbit-center span{font-style:italic}.aside-label{position:absolute;right:-10px;bottom:26px;background:var(--paper);padding:8px;color:#87958a;font-size:9px;line-height:1.5;letter-spacing:.15em}.scroll-hint{position:absolute;bottom:45px;left:0;font-size:11px;font-weight:700;letter-spacing:.06em}.scroll-hint span{font-size:18px;margin-right:12px}.work{background:#e7ebe3}.work-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;padding-top:110px;padding-bottom:115px}.section-heading h2,.contact h2{font-size:clamp(42px,4.3vw,62px);line-height:1.12;margin:27px 0}.section-heading>p:last-child{max-width:340px;color:#65736a;line-height:1.7}.services{border-top:1px solid #bec9bc}.service{display:grid;grid-template-columns:45px 1fr 28px;gap:20px;padding:30px 0;border-bottom:1px solid #bec9bc;align-items:start}.number{font-size:11px;color:#7e9081;padding-top:7px}.service h3{font-family:Georgia,serif;font-weight:400;letter-spacing:-.03em;font-size:27px;margin-bottom:9px}.service p{font-size:13px;line-height:1.6;color:#67766d;margin:0;max-width:380px}.arrow{font-size:23px;transition:transform .2s}.service[href]:hover .arrow{transform:translate(4px,-4px)}.muted{color:#a5b2a4}.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:120px;padding-bottom:120px}.contact h2{margin-bottom:0}.contact-details{align-self:end;padding-bottom:6px}.contact-details p{color:#697571;font-size:14px;margin-bottom:24px}.contact-details a{display:block;width:max-content;max-width:100%;font-size:clamp(20px,2.5vw,30px);letter-spacing:-.04em;margin-top:12px;border-bottom:1px solid #a9b7a8;padding-bottom:5px}.contact-details a span{font-size:16px;margin-left:12px}.footer{border-top:1px solid var(--line);display:flex;align-items:center;gap:35px;padding-top:25px;padding-bottom:30px}.footer .logo{font-size:22px}.footer p,.footer>a:last-child{font-size:11px;color:#78847c;margin:0}.footer>a:last-child{margin-left:auto}@media(max-width:900px){.hero-aside{opacity:.35;right:0;width:270px;height:270px}.hero-copy{max-width:700px}.work-inner{gap:45px}}@media(max-width:650px){.wrap{width:calc(100% - 40px)}.header{height:76px}.header nav{gap:18px;font-size:11px}.logo{font-size:25px}.hero{min-height:600px;padding:95px 0 115px;align-items:flex-start}.hero-copy{padding-top:25px}.hero-aside{width:180px;height:180px;top:auto;bottom:45px;right:0;transform:none;opacity:.3}.orbit-two{inset:20px}.orbit-three{inset:40px}.orbit-center{font-size:30px}.aside-label{display:none}h1{font-size:clamp(44px,11vw,62px)}.intro{font-size:15px}.button{gap:20px;padding:17px}.work-inner,.contact{grid-template-columns:1fr;gap:35px;padding-top:75px;padding-bottom:80px}.section-heading h2,.contact h2{font-size:44px}.service{grid-template-columns:30px 1fr 20px;gap:12px}.footer{gap:15px}.footer p{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Ciemna, techniczna odsłona */
@font-face{font-family:Raleway;src:url('fonts/raleway-regular/raleway-regular-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:RobotoBlack;src:url('fonts/Roboto-Black.ttf') format('truetype');font-weight:900;font-display:swap}
:root{--ink:#edf3f8;--muted:#a6b6c7;--paper:#101d2c;--line:#304257}
body{background:var(--paper);color:var(--ink);font-family:Raleway,Arial,sans-serif}
.logo{font-family:RobotoBlack,Arial,sans-serif;letter-spacing:-1.5px}.logo>span:first-child,.logo-dot{color:#f58b3d}
.header nav{color:#dce6ef}
h1,h2,h3,.service h3{font-family:RobotoBlack,Arial,sans-serif;font-style:normal;letter-spacing:-.045em}
h1 em,h2 em{font-style:normal;color:#8eb5d0}
.eyebrow{color:#8baec5}.hero .eyebrow span{background:#f58b3d}
.intro{color:#b1c1d0}.button{background:#e9853e;color:#101d2c}.button:hover{background:#ffa65f}
.orbit{border-color:#385673}.orbit-center{font-family:RobotoBlack,Arial,sans-serif;color:#7397af;letter-spacing:-3px}.orbit-center span{font-style:normal;color:#e9853e}.aside-label{background:var(--paper);color:#88a7bc}
.work{background:#172a3d}.section-heading>p:last-child,.service p{color:#acbdcb}.services{border-color:#40566a}.service{border-color:#40566a}.number{color:#82a3b9}.arrow{color:#f19a59}.arrow.muted{color:#698198}
.contact-details p{color:#a8bac9}.contact-details a{border-color:#537087}.contact-details a span{color:#f19a59}.footer p,.footer>a:last-child{color:#99adbd}
a:focus-visible{outline:2px solid #ffad6b;outline-offset:5px}

/* Orbitujący detal w sekcji głównej */
.hero-aside::before,.hero-aside::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero-aside::before{inset:18%;background:radial-gradient(circle,rgba(80,151,198,.12),transparent 68%);animation:orbit-glow 5s ease-in-out infinite}
.hero-aside::after{inset:-14px;border:1px solid rgba(101,160,195,.09)}
.orbit{animation:orbit-spin 24s linear infinite}
.orbit::before{content:"";position:absolute;width:7px;height:7px;top:50%;left:-4px;border-radius:50%;background:#f49a55;box-shadow:0 0 12px rgba(244,154,85,.7)}
.orbit-two{animation-duration:18s;animation-direction:reverse;border-style:dashed;border-color:rgba(111,160,190,.35)}
.orbit-two::before{width:5px;height:5px;left:-3px;background:#9dc8e2;box-shadow:0 0 10px rgba(157,200,226,.8)}
.orbit-three{animation-duration:14s}.orbit-three::before{width:4px;height:4px;left:-2px;background:#8ab1cc;box-shadow:0 0 8px rgba(138,177,204,.7)}
.orbit-center{position:relative;z-index:1}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes orbit-glow{50%{transform:scale(1.18);opacity:.55}}
@media(prefers-reduced-motion:reduce){.hero-aside::before,.orbit{animation:none}}

/* Treści pojawiają się przy przewijaniu tylko wtedy, gdy przeglądarka obsługuje obserwację widoczności. */
.reveal-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.reveal-ready .reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-ready .reveal{opacity:1;transform:none;transition:none}}
/* Wyraźniejsze wejście i kolejność pozycji oferty. */
.reveal-ready .reveal{transform:translateY(48px);transition-duration:.9s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
.reveal-ready .service:nth-child(2){transition-delay:.12s}
.reveal-ready .service:nth-child(3){transition-delay:.24s}
.reveal-ready .contact-details{transition-delay:.15s}
@media(prefers-reduced-motion:reduce){.reveal-ready .reveal{transform:none;transition:none}}

/* Hasło wchodzi w dwóch spokojnych etapach. */
.hero-line{display:inline-block;animation:headline-enter .85s cubic-bezier(.16,1,.3,1) both}
.hero-line-second{animation-delay:.25s}
@keyframes headline-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-line{animation:none}}

/* Grafika reaguje na kursor, a odnośniki zyskują subtelne podświetlenie. */
.hero-aside{transform:translate(var(--shift-x,0px),calc(-55% + var(--shift-y,0px))) perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease-out;transform-style:preserve-3d}
.service{position:relative;isolation:isolate}
.service::before{content:"";position:absolute;z-index:-1;inset:0 -16px;background:linear-gradient(90deg,rgba(110,166,198,.1),transparent 80%);opacity:0;transform:scaleX(.96);transform-origin:left;transition:opacity .3s,transform .3s}
.service:hover::before,.service:focus-visible::before{opacity:1;transform:scaleX(1)}
@media(max-width:650px){.hero-aside{transform:translate(var(--shift-x,0px),var(--shift-y,0px)) perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}}
@media(prefers-reduced-motion:reduce){.hero-aside{transition:none}.service::before{transition:none}}


/* Maszynowe pisanie hasła i kolejno pojawiające się elementy. */
.hero-line{animation:none;position:relative}
.typing-original{visibility:hidden}
.typing-text{position:absolute;inset:0;white-space:normal}
.typing-cursor::after{content:"";display:inline-block;width:3px;height:.8em;margin-left:4px;vertical-align:-.04em;background:#f58b3d;animation:typing-blink .7s step-end infinite}
.typing-active .intro,.typing-active .button,.typing-active .scroll-hint{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.typing-active.typing-finished .intro,.typing-active.typing-finished .button,.typing-active.typing-finished .scroll-hint{opacity:1;transform:none}
.typing-active.typing-finished .button{transition-delay:.22s}
.typing-active.typing-finished .scroll-hint{transition-delay:.44s}
@keyframes typing-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typing-active .intro,.typing-active .button,.typing-active .scroll-hint{opacity:1;transform:none;transition:none}.typing-cursor::after{animation:none}}

/* Duże, dyskretne orbity w tle pierwszego ekranu. */
.hero{isolation:isolate}
.ambient-orbits{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.ambient-orbits span{position:absolute;left:39%;top:-58%;width:1050px;height:850px;border:1px solid rgba(102,159,192,.085);border-radius:50%;transform:rotate(-24deg)}
.ambient-orbits span:nth-child(2){left:27%;top:-40%;width:1150px;height:710px;transform:rotate(-15deg);border-color:rgba(102,159,192,.06)}
.ambient-orbits span:nth-child(3){left:49%;top:-75%;width:900px;height:1050px;transform:rotate(25deg);border-color:rgba(102,159,192,.06)}
.ambient-orbits span::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ambient-spin 32s linear infinite}
.ambient-orbits span::before{content:"";position:absolute;top:50%;left:-3px;width:5px;height:5px;border-radius:50%;background:#78aac7;box-shadow:0 0 12px #78aac7;animation:ambient-path 32s linear infinite;offset-path:ellipse(50% 50% at 50% 50%);offset-rotate:0deg;left:0;top:0}
.ambient-orbits span:nth-child(2)::before{animation-duration:42s;animation-direction:reverse;background:#e9853e;box-shadow:0 0 12px #e9853e}
.ambient-orbits span:nth-child(3)::before{animation-duration:37s;animation-delay:-12s}
@keyframes ambient-path{to{offset-distance:100%}}
.orbit-interactive .orbit::before{visibility:hidden}
.orbit-particle{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#f49a55;box-shadow:0 0 12px rgba(244,154,85,.8);pointer-events:none;will-change:transform}
.orbit-particle:nth-last-of-type(2){width:5px;height:5px;background:#9dc8e2;box-shadow:0 0 10px #9dc8e2}
.orbit-particle:nth-last-of-type(1){width:4px;height:4px;background:#8ab1cc;box-shadow:0 0 8px #8ab1cc}
@media(prefers-reduced-motion:reduce){.ambient-orbits span::before,.ambient-orbits span::after{animation:none}}


/* Mocniejszy kontrast orbit i dyskretna głębia pierwszego ekranu. */
.hero-aside::before{inset:8%;background:radial-gradient(circle,rgba(74,145,192,.22) 0%,rgba(49,104,146,.08) 40%,transparent 72%)}
.orbit{border-color:rgba(123,177,208,.45)}
.orbit-two{border-color:rgba(123,177,208,.32)}
.orbit-center{color:#a6c5d9;text-shadow:0 0 28px rgba(97,164,205,.25)}
.aside-label{color:#a1bccd}
@media(min-width:651px) and (max-width:900px){.hero-aside{opacity:.65}}

/* Wyraźniejsza, rozbudowana siatka orbit w tle. */
.ambient-orbits span{border-color:rgba(115,177,213,.18)}
.ambient-orbits span:nth-child(2){border-color:rgba(115,177,213,.13)}
.ambient-orbits span:nth-child(3){border-color:rgba(115,177,213,.14)}
.ambient-orbits span:nth-child(4){left:13%;top:-72%;width:1500px;height:980px;transform:rotate(-19deg);border-color:rgba(115,177,213,.11)}
.ambient-orbits span:nth-child(5){left:34%;top:-92%;width:1250px;height:1150px;transform:rotate(32deg);border-color:rgba(115,177,213,.12)}
.ambient-orbits span:nth-child(4)::before{animation-duration:48s;animation-delay:-16s}
.ambient-orbits span:nth-child(5)::before{animation-duration:44s;animation-direction:reverse;animation-delay:-8s;background:#e9853e;box-shadow:0 0 12px #e9853e}
