@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--black:#101010;--paper:#f6f6f3;--muted:#777;--line:#ddd;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--black);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(1180px,calc(100% - 64px));margin:auto}.dark{background:var(--black);color:var(--white)}.skip{position:absolute;top:-100px;left:12px;background:#fff;color:#000;padding:12px;z-index:100}.skip:focus{top:12px}.header{background:var(--black);color:#fff;position:relative;z-index:20;border-bottom:1px solid #292929}.nav{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{font:800 24px/1 'Manrope',sans-serif;letter-spacing:-1.5px;display:inline-flex;align-items:baseline;gap:1px}.brand-dot{color:#b8b8b8}.brand small{font:700 9px 'Manrope',sans-serif;letter-spacing:3px;margin-left:7px}.nav-links{display:flex;align-items:center;gap:38px;font-size:13px}.nav-links>a:not(.nav-cta){color:#bcbcbc;transition:color .2s}.nav-links>a:hover{color:#fff}.nav-cta{border:1px solid #555;padding:13px 18px;border-radius:50px}.nav-cta span{margin-left:12px}.menu-toggle{display:none}.hero{min-height:690px;position:relative;overflow:hidden}.hero-inner{position:relative;z-index:1;padding-top:94px}.eyebrow,.section-kicker,.hero-footer,.steps span{font-size:11px;font-weight:700;letter-spacing:2px}.eyebrow{color:#aaa;display:flex;align-items:center;gap:11px}.pulse{width:7px;height:7px;border-radius:50%;background:#f4f4f4;box-shadow:0 0 0 5px #ffffff17}.hero h1,.contact h2{font-family:'Manrope',sans-serif;font-size:clamp(55px,8vw,112px);line-height:1.06;letter-spacing:-.075em;margin:37px 0 37px;font-weight:700}.hero h1 em,.contact h2 em{font-style:normal;color:#909090}.period{color:#fff}.hero-bottom{display:flex;justify-content:space-between;align-items:center;max-width:870px}.hero-bottom p{font-size:17px;line-height:1.7;color:#aaa;max-width:460px}.round-link{border:1px solid #5b5b5b;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:30px;transition:background .2s,color .2s}.round-link:hover{background:#fff;color:#111}.hero-footer{display:flex;justify-content:space-between;border-top:1px solid #333;color:#777;margin-top:88px;padding:25px 0}.hero-glow{position:absolute;right:-300px;top:80px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,#ffffff0b 0,transparent 68%);pointer-events:none}.section{padding:125px 0}.intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:50px}.section-kicker{color:#777;padding-top:13px}.intro h2,.section-top h2{font-family:'Manrope',sans-serif;font-size:clamp(38px,5.4vw,72px);line-height:1.14;letter-spacing:-.065em;margin:0;font-weight:700}.intro h2 span,.section-top h2 span{color:#929292}.intro p{font-size:18px;line-height:1.8;color:#666;max-width:650px;margin:35px 0}.text-link{display:inline-flex;gap:50px;border-bottom:1px solid #111;padding-bottom:12px;font-size:14px;font-weight:700}.services{background:#ededeb}.section-top{display:grid;grid-template-columns:1fr 2fr;gap:50px;margin-bottom:72px}.service-list{border-top:1px solid #ccc}.service{display:grid;grid-template-columns:1fr 2fr 60px;gap:50px;border-bottom:1px solid #ccc;padding:33px 0;align-items:start}.service-number{font-size:13px;color:#777}.service h3{font:700 clamp(23px,3vw,37px) 'Manrope',sans-serif;letter-spacing:-1.5px;margin:0 0 10px}.service p{color:#777;line-height:1.6;margin:0}.service-arrow{text-align:right;font-size:28px}.work{background:var(--paper)}.project{display:block}.project-art{height:460px;background:radial-gradient(circle at 50% 70%,#343b38,#141817 65%);display:flex;align-items:center;justify-content:center;overflow:hidden}.project-browser{width:min(700px,80%);background:#0d1513;border:1px solid #4b5952;border-radius:10px;box-shadow:0 30px 80px #0008;transform:perspective(900px) rotateX(7deg) rotateY(-6deg)}.browser-bar{height:32px;background:#18211e;border-bottom:1px solid #303d37;display:flex;align-items:center;gap:5px;padding:0 12px}.browser-bar i{width:7px;height:7px;border-radius:50%;background:#68766e}.browser-bar span{margin:auto;color:#68776e;font-size:10px;padding-right:36px}.browser-content{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:white}.browser-content>span:first-child{font-weight:800;letter-spacing:2px}.green{color:#86e3a0}.browser-content strong{font:800 clamp(22px,3vw,38px)/1.15 'Manrope',sans-serif;text-align:center;letter-spacing:-1px}.fake-button{border:1px solid #87d99c;color:#87d99c;padding:11px 18px;font-size:10px;font-weight:700}.project-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0}.project-meta h3{font:700 27px 'Manrope',sans-serif;letter-spacing:-1px;margin:0 0 8px}.project-meta p,.work-note{color:#777;font-size:14px;margin:0}.project-visit{font-size:13px;font-weight:700}.work-note{margin-top:38px}.process{background:#eaeae7}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.steps>div{border-top:1px solid #bfbfbd;padding-top:25px}.steps span{color:#777}.steps h3{font:700 24px 'Manrope',sans-serif;letter-spacing:-1px;margin:30px 0 14px}.steps p{color:#777;line-height:1.7;max-width:300px}.contact{padding:130px 0}.contact .section-kicker{color:#999}.contact h2{font-size:clamp(56px,8vw,108px);margin:35px 0}.contact-inner>p:not(.contact-hint){max-width:500px;color:#aaa;font-size:17px;line-height:1.7}.contact-button{display:inline-flex;justify-content:space-between;align-items:center;gap:100px;background:#fff;color:#111;padding:21px 25px;border-radius:50px;font-weight:700;margin-top:22px;transition:transform .2s}.contact-button:hover{transform:translateY(-3px)}.contact-hint{font-size:12px;color:#777;margin-top:18px}.footer{border-top:1px solid #333}.footer-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner>span,.footer-inner>a:last-child{font-size:12px;color:#888}@media(max-width:800px){.container{width:min(100% - 36px,1180px)}.nav{height:75px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:42px;height:42px;background:none;border:0;cursor:pointer}.menu-toggle span{height:2px;background:#fff;width:25px}.nav-links{display:none;position:absolute;top:75px;left:0;right:0;background:#181818;padding:24px 18px 30px;flex-direction:column;align-items:stretch;gap:22px;border-top:1px solid #333}.nav-links.open{display:flex}.nav-cta{text-align:center}.hero{min-height:auto}.hero-inner{padding-top:85px}.hero h1{font-size:clamp(48px,9.5vw,75px);letter-spacing:-.065em}.hero-bottom p{font-size:15px;max-width:310px}.round-link{width:58px;height:58px;flex-shrink:0}.hero-footer{margin-top:75px;font-size:9px;gap:20px}.section{padding:85px 0}.intro-grid,.section-top{grid-template-columns:1fr;gap:26px}.section-top{margin-bottom:45px}.service{grid-template-columns:35px 1fr 25px;gap:15px}.service h3{font-size:24px}.service p{font-size:14px}.project-art{height:310px}.browser-content{min-height:200px}.steps{grid-template-columns:1fr;gap:25px}.steps h3{margin:18px 0 8px}.contact{padding:95px 0}.footer-inner{padding:28px 0;flex-wrap:wrap}.footer-inner>span{order:3;width:100%}}@media(max-width:440px){.hero h1{font-size:clamp(42px,10.3vw,55px)}.hero-bottom{gap:16px}.hero-bottom p{font-size:14px}.hero-footer span:last-child{display:none}.project-art{height:250px}.project-browser{width:90%}.browser-content{min-height:160px;gap:10px}.browser-content strong{font-size:20px}.project-meta{align-items:start}.project-visit{white-space:nowrap}.contact-button{gap:55px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* V3: portfolio z logotypami */
.logos-intro{max-width:590px;color:#666;font-size:17px;line-height:1.7;margin:-28px 0 42px}.logo-marquee{overflow:hidden;border-block:1px solid #dededb;background:#eeefec;padding:34px 0}.logo-track{display:flex;align-items:center;justify-content:center;gap:26px;min-height:180px}.logo-tile{min-width:min(390px,calc(100vw - 42px));min-height:170px;background:#141918;border:1px solid #303b34;border-radius:18px;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:19px;transition:transform .25s,box-shadow .25s}.logo-tile:hover,.logo-tile:focus-visible{transform:translateY(-5px);box-shadow:0 16px 30px #0002}.season-logo{font:800 clamp(26px,4vw,38px) 'Manrope',sans-serif;letter-spacing:-2px}.season-logo span{color:#80e4a4}.logo-tile small{color:#b7c3b9;font-size:10px;letter-spacing:2px}.work .work-note{margin-top:25px}.project-page{background:#f6f6f3}.project-hero{padding:95px 0 75px}.project-back{font-size:13px;font-weight:700;color:#777}.project-hero h1{font:800 clamp(56px,10vw,115px)/1.05 'Manrope',sans-serif;letter-spacing:-.075em;margin:42px 0 20px}.project-lead{font-size:19px;line-height:1.65;color:#bbb;max-width:650px}.project-tags{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0}.project-tags span{border:1px solid #555;border-radius:99px;padding:9px 15px;font-size:12px}.project-visit-button{display:inline-flex;gap:40px;background:#fff;color:#111;padding:17px 24px;border-radius:99px;font-weight:700}.project-details{padding:85px 0 110px}.project-details h2{font:750 clamp(33px,5vw,58px)/1.1 'Manrope',sans-serif;letter-spacing:-.05em}.project-details p{max-width:730px;color:#666;line-height:1.8;font-size:17px}.screenshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}.screenshot-placeholder{min-height:350px;border-radius:16px;background:#e7e9e6;border:1px dashed #a7aaa4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;gap:12px}.screenshot-placeholder strong{font-size:20px}.screenshot-placeholder span{font-size:14px;color:#777;max-width:270px}.screenshot-placeholder.wide{grid-column:1/-1;min-height:430px}.project-shot{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 10px 35px #0002}.project-caption{color:#777;font-size:13px;margin-top:10px}@media(max-width:700px){.logos-intro{margin:0 0 30px}.project-hero{padding:65px 0}.screenshot-grid{grid-template-columns:1fr}.screenshot-placeholder.wide{grid-column:auto;min-height:300px}.screenshot-placeholder{min-height:260px}}

/* V4 — małe logotypy PNG płynące stale w lewo */
.logo-marquee{padding:22px 0;overflow:hidden;background:#eeefec}
.logo-track{display:flex;width:max-content;min-height:0;gap:0;justify-content:flex-start;animation:logos-left 27s linear infinite;will-change:transform}
.logo-group{display:flex;align-items:center;gap:24px;padding-right:24px;flex-shrink:0}
.logo-tile{min-width:0;min-height:0;width:200px;height:96px;padding:15px 18px;border:1px solid #d7dad6;border-radius:12px;background:#141918;flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:border-color .2s,box-shadow .2s}
.logo-tile img{display:block;width:100%;height:100%;object-fit:contain}
.logo-tile:hover,.logo-tile:focus-visible{transform:none;box-shadow:0 8px 20px #0002;border-color:#91d9a7}
.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused}
@keyframes logos-left{to{transform:translateX(-50%)}}
@media(max-width:600px){.logo-tile{width:158px;height:78px}.logo-group{gap:14px;padding-right:14px}.logo-track{animation-duration:22s}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;transform:none}.logo-marquee{overflow-x:auto}}


/* Formularz oraz plynna karuzela - Averon Studio PHP */

.contact-button { border: 0; cursor: pointer; font: inherit; }
.contact-modal { width: min(680px, calc(100% - 28px)); max-height: min(90dvh, 850px); overflow-y: auto; border: 1px solid #d5d5d5; border-radius: 20px; padding: clamp(20px, 4vw, 38px); background: #f8f8f6; color: #111; box-shadow: 0 25px 90px #0008; }
.contact-modal::backdrop { background: #080808b8; backdrop-filter: blur(5px); }
.modal-top { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.modal-top h2 { font: 750 clamp(26px, 4vw, 38px)/1.12 'Manrope', sans-serif; letter-spacing: -.05em; margin: 14px 0 0; }
.form-kicker { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #777; }
.modal-close { background: #e9e9e7; border: 0; border-radius: 50%; width: 40px; height: 40px; font-size: 27px; cursor: pointer; flex: 0 0 auto; }
.form-intro { color: #666; line-height: 1.6; margin: 14px 0 26px; }
#inquiry-form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
#inquiry-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
#inquiry-form input:not([type=checkbox]), #inquiry-form textarea { width: 100%; border: 1px solid #d0d0ce; border-radius: 9px; padding: 13px 14px; background: #fff; color: #111; font: 400 15px 'DM Sans', sans-serif; }
#inquiry-form input:focus, #inquiry-form textarea:focus { outline: 2px solid #555; outline-offset: 1px; }
#inquiry-form textarea { resize: vertical; min-height: 120px; }
#inquiry-form .consent { display: flex; align-items: start; gap: 10px; font-weight: 400; line-height: 1.5; color: #555; }
.consent input { margin-top: 4px; }
.consent a { text-decoration: underline; }
.honey { position: absolute; left: -9999px; }
.form-bottom { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
#form-status { font-size: 13px; color: #555; line-height: 1.4; }
.form-submit { background: #111; color: white; border: 0; padding: 15px 22px; border-radius: 40px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.form-submit:disabled { opacity: .5; cursor: wait; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .form-bottom { flex-direction: column; align-items: stretch; } .form-submit { width: 100%; } }

/* Nieskończona karuzela: JS ustala dokładną szerokość pierwszej połowy. */
.logo-track { animation: none; gap: 0; }
.logo-track.is-ready { animation: marquee-loop var(--marquee-duration, 24s) linear infinite; }
.logo-group { gap: 24px; padding-right: 24px; }
@keyframes marquee-loop { to { transform: translateX(calc(-1 * var(--marquee-distance))); } }
@media (prefers-reduced-motion: reduce) { .logo-track.is-ready { animation: none; } }

.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:running}