@font-face{font-family:"Ubuntu";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/Ubuntu-Light.ttf") format("truetype")}
@font-face{font-family:"Ubuntu";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Ubuntu-Regular.ttf") format("truetype")}
@font-face{font-family:"Ubuntu";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Ubuntu-Medium.ttf") format("truetype")}
@font-face{font-family:"Ubuntu";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Ubuntu-Bold.ttf") format("truetype")}
*{box-sizing:border-box} :root{color-scheme:dark;--ink:#e8f2ff;--paper:#031226;--blue:#009fff;--button-bg:linear-gradient(115deg,#bd147d 0%,#dc326b 45%,#ed602d 100%)}html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:"Ubuntu",Arial,sans-serif;-webkit-font-smoothing:antialiased}.page{min-height:100vh;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}.header,main{width:100%;max-width:670px;margin-inline:auto}.header{display:flex;justify-content:space-between;align-items:center;padding:54px 46px 0;gap:16px}.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;font-size:32px;font-weight:700;letter-spacing:-1px}.brand-mark{display:block;width:36px;height:43.2px;flex-shrink:0}.languages{display:flex;gap:12px;align-items:center}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}.languages button{background:transparent;border:0;width:39.6px;height:39.6px;font-size:18.9px;font-weight:700;border-radius:50%}.languages button[aria-pressed=true]{background:var(--blue);color:white}main{position:relative;z-index:1;padding:48px 46px 0}.eyebrow{margin:0 0 30px;text-transform:uppercase;letter-spacing:4px;font-size:22px;font-weight:700}h1{font-size:66px;line-height:.99;letter-spacing:-2.8px;margin:0;font-weight:700}.specialties{font-size:25px;line-height:1.45;letter-spacing:-.45px;margin:22px 0 0}.rule{width:15px;height:5px;background:var(--blue);border-radius:3px;margin:32px 0}.slides{font-size:20.7px;line-height:1.5;height:6em;overflow:hidden}.slides p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;font-weight:300;font-size:20.7px;line-height:1.5;letter-spacing:-.2px;margin:0;max-width:540px}.slider:focus-visible{outline:2px solid var(--blue);outline-offset:8px;border-radius:3px}.indicators{display:flex;gap:18px;margin-top:16px}.indicators button{display:grid;place-items:center;border:0;background:transparent;width:44px;height:48px;padding:5px;border-radius:6px;position:relative}.indicators svg{width:33px;height:34px}.indicators button[aria-pressed=true]{color:var(--blue)}.contact{display:flex;flex-wrap:nowrap;gap:15px;margin-top:44px}.contact-link{-webkit-appearance:none;appearance:none;background:var(--button-bg);display:flex;align-items:center;justify-content:center;text-align:center;text-transform:uppercase;gap:9.6px;min-height:58px;flex:0 0 auto;border:0;border-radius:11px;text-decoration:none;color:#fff;font-size:17.8695px;font-weight:700;padding:10px 19px;position:relative;isolation:isolate;overflow:hidden}.contact-link svg{width:32px;height:32px;flex-shrink:0;}.contact-link[href*="linkedin"] svg,.contact-link[href*="github"] svg{color:#fff}
.contact-link:is(:hover,:focus-visible){background:#bd147d}

.contact-link[href*="linkedin"] svg rect{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:1.7;}

:focus-visible{outline:3px solid var(--blue);outline-offset:5px}footer{position:relative;z-index:0;margin-top:-140px;min-height:466px;flex:1;display:flex;align-items:flex-end;justify-content:center;isolation:isolate}.mountains{pointer-events:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:-1}footer p{color:#a8c8ec;font-size:16px;margin:0;padding:0 20px 150px;text-align:center;letter-spacing:.2px}/* Desktop: rozmiary i odstępy w skali 90% wersji pierwotnej. */
@media(min-width:541px){
.header,main{max-width:603px}
.header{padding:48.6px 41.4px 0;gap:14.4px}
.brand{gap:12.6px;font-size:28.8px;letter-spacing:-0.9px}
.brand-mark{width:32.4px;height:38.88px}

.languages{gap:10.8px}
.languages button{width:35.64px;height:35.64px;font-size:17.01px}
main{padding:43.2px 41.4px 0}
.eyebrow{margin:0 0 27px;letter-spacing:3.6px;font-size:19.8px}
h1{font-size:59.4px;letter-spacing:-2.52px}
.specialties{font-size:22.5px;letter-spacing:-.405px;margin:19.8px 0 0}
.rule{width:15px;height:4.5px;border-radius:2.7px;margin:28.8px 0}
.slides{font-size:18.63px;height:4.5em}
.slides p{-webkit-line-clamp:3;line-clamp:3}
.slides p{font-size:18.63px;letter-spacing:-.18px;max-width:486px}
.slider:focus-visible{outline:1.8px solid var(--blue);outline-offset:7.2px;border-radius:2.7px}
.indicators{gap:16.2px;margin-top:14.4px}
.indicators button{width:39.6px;height:43.2px;padding:4.5px;border-radius:5.4px}
.indicators svg{width:29.7px;height:30.6px}
.contact{gap:13.5px;margin-top:39.6px}
.contact-link{gap:8.64px;min-height:52.2px;border:0;border-radius:9.9px;font-size:16.0825px;padding:9px 17px}
.contact-link svg{width:28.8px;height:28.8px}
:focus-visible{outline:2.7px solid var(--blue);outline-offset:4.5px}
footer{margin-top:-131px;min-height:429.4px}
footer p{font-size:14.4px;padding:0 18px 150px;letter-spacing:.18px}
}
@media(max-width:540px){.header{padding:30px 25px 0}.brand{font-size:27px;gap:10px}.brand-mark{width:31.5px;height:37.8px}.languages{gap:5px}.languages button{font-size:16.2px}main{padding:62px 25px 0}.eyebrow{font-size:15px;letter-spacing:3px;margin-bottom:25px}h1{font-size:clamp(37px,9.7vw,53px);letter-spacing:-1.8px}.specialties{font-size:clamp(15px,3.8vw,20px);margin-top:20px;letter-spacing:-.25px}.rule{margin:26px 0;width:15px;height:4px}.slides{font-size:17.1px;line-height:1.4;height:5.6em}.slides p{font-size:17.1px;line-height:1.4}.indicators{gap:13px;margin-top:12px}.indicators svg{width:29px;height:30px}.contact{flex-wrap:nowrap;gap:7px;margin-top:32px}.contact-link{font-size:clamp(10.7217px,3.12716vw,12.5086px);gap:5px;padding:9px clamp(5px,2.5vw,10px);min-height:48px;min-width:0;flex:0 1 auto;white-space:nowrap;border-radius:8px}.contact-link svg{width:23px;height:24px}footer{min-height:375px;margin-top:-122px}footer p{font-size:13px;padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Kontakt: niewielki natywny modal z obsługą Escape i blokadą fokusu. */
.contact-dialog{width:min(400px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;margin:auto;padding:26px;border:1px solid #d7e5f2;border-radius:16px;background:#f7f7f9;color:#07142f;color-scheme:light;box-shadow:0 20px 70px #00000066}
.contact-dialog::backdrop{background:#000a19b3}
.contact-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.contact-dialog h2{margin:0;font-size:22px;font-weight:500}
.contact-close{display:grid;place-items:center;flex-shrink:0;width:39.6px;height:39.6px;padding:0;background:var(--blue);color:#fff;border:0;outline:none;border-radius:50%}
@media(min-width:541px){.contact-close{width:35.64px;height:35.64px}}
.contact-detail{display:flex;align-items:center;gap:12px}
.contact-detail+.contact-detail{margin-top:22px}
.contact-detail svg{width:23px;height:23px;flex-shrink:0;color:#305a82}
.contact-detail a{min-width:0;font-size:18px;color:#07142f;text-decoration:none;overflow-wrap:anywhere}
.contact-detail a:hover{color:var(--blue)}

.contact-dialog[data-state="opening"],.contact-dialog[data-state="opening"]::backdrop{animation:contact-fade-in .4s ease both}
.contact-dialog[data-state="closing"],.contact-dialog[data-state="closing"]::backdrop{animation:contact-fade-out .4s ease both}
@keyframes contact-fade-in{from{opacity:0}to{opacity:1}}
@keyframes contact-fade-out{from{opacity:1}to{opacity:0}}

.slides{position:relative}
.slides .slide-outgoing{position:absolute;inset:0 auto auto 0;width:100%;pointer-events:none}

/* Kolor pod stroną odpowiada dołowi gór, także przy przewijaniu w Safari. */
@media(max-width:540px){html{background:var(--paper)}body{background:var(--paper)}}

/* Paleta stała: ciemny granat, błękit i pomarańcz. */
.eyebrow{color:#d4e8ff}
.slides p,.indicators button{color:#b6d5f4}
.indicators button[aria-pressed=true]{color:var(--blue)}
.contact-link[href*="linkedin"] svg path{stroke:#fff}
.contact-link[href*="linkedin"] svg circle{fill:#fff}






/* Ciemniejsza dolna krawędź przycisków z gradientem. */
.contact-link{border-bottom:4px solid #7d2043}
 

/* Stały cień treści; hover zmienia wyłącznie kolor tła. */
.contact-link>span{text-shadow:0 1px 1px #180b2d99}
.contact-link>svg{filter:drop-shadow(0 1px 1px #180b2d99)}

/* Wspólny wygląd aktywnego języka i zamykania modala. */
.languages button[aria-pressed=true],.contact-close{background:var(--button-bg);color:#fff;border:0;border-bottom:4px solid #7d2043;text-shadow:0 1px 1px #180b2d99;-webkit-appearance:none;appearance:none}
.contact-close svg{filter:drop-shadow(0 1px 1px #180b2d99)}
.languages button[aria-pressed=true]:is(:hover,:focus-visible),.contact-close:hover{background:#bd147d}

/* Animacja szerokości zachowuje stały promień zaokrągleń. */
.rule{--rule-min-width:5px;animation:rule-breathe 7s ease-in-out infinite,rule-color 5s ease-in-out infinite}
@media(min-width:541px){.rule{--rule-min-width:4.5px}}
@media(max-width:540px){.rule{--rule-min-width:4px}}
@keyframes rule-breathe{
 0%,100%{width:var(--rule-min-width)}
 50%{width:100px}
}
@keyframes rule-color{
 0%,100%{background-color:var(--blue)}
 50%{background-color:#bd147d}
}

/* Zmiana koloru aktywnej ikony w tempie animacji paska. */
.indicators button[aria-pressed=true] svg{animation:indicator-color 5s ease-in-out infinite}
@keyframes indicator-color{
 0%,100%{color:var(--blue)}
 50%{color:#bd147d}
}