/* AG Studio cosmic art direction. */
html[data-experience=cosmic]{--space-ink:#080c16;--space-light:#b4d5ff}
html[data-experience=cosmic] body{overflow-x:clip}
html[data-experience=cosmic] .hero .scene{isolation:isolate}
.cosmic-hero-orbit{position:absolute;z-index:2;width:94vw;height:25vw;left:3%;bottom:-12%;border:1px solid #2458f52e;box-shadow:0 0 24px #2458f510,inset 0 0 35px #2458f508;border-radius:50%;transform:rotate(-12deg);pointer-events:none}
.cosmic-hero-orbit:after{content:'';position:absolute;inset:18%;border:1px solid #2458f51a;border-radius:50%}
html[data-experience=cosmic] #uslugi{position:relative;background:#080d18;isolation:isolate}
html[data-experience=cosmic] #uslugi:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 70%,#2458f518,transparent 60%)}
html[data-experience=cosmic] #uslugi .service-item{border-color:#aec9ff21;background:linear-gradient(145deg,#192438,#0d1421)}
/* Project cards follow byGabify: exposed title strips and a vertical stack. */
html[data-experience=cosmic] #realizacje{background:#080c16;color:#f4f7ff}
html[data-experience=cosmic] #realizacje .case-layout-picker,
html[data-experience=cosmic] #realizacje .cases-nav{display:none}
html[data-experience=cosmic] #realizacje .cases-stage{perspective:none;gap:88px}
html[data-experience=cosmic] #realizacje .case-card{border-radius:16px 16px 0 0;box-shadow:none;transform:none;opacity:1;--project-surface:#f7f9fd;border-color:#dce3ee}
html[data-experience=cosmic] #realizacje .case-card-1{--project-surface:#171a20;border-color:#343b47}
html[data-experience=cosmic] #realizacje .case-card-2{--project-surface:#2458f5;border-color:#2458f5}
html[data-experience=cosmic] #realizacje .case-card-0 .case-project-header{border-color:#12244526}
html[data-experience=cosmic] #realizacje .case-card-0 .case-project-header p,
html[data-experience=cosmic] #realizacje .case-card-0 h3{color:#111e34}
html[data-experience=cosmic] #realizacje .case-card-0 .case-project-header>span,
html[data-experience=cosmic] #realizacje .case-card-0 .case-kind,
html[data-experience=cosmic] #realizacje .case-card-0 .case-description{color:#526078}
html[data-experience=cosmic] #realizacje .case-card-0 .secondary{color:#111e34;border-color:#111e3470;background:transparent}
html[data-experience=cosmic] #realizacje .case-card-0 .secondary:hover{background:#111e34;color:white}
html[data-experience=cosmic] #realizacje .case-card-0 .case-results{background:#e7eefb;border-color:#cbd8ed;color:#15294b}
html[data-experience=cosmic] #realizacje .case-card-0 .case-metric,
html[data-experience=cosmic] #realizacje .case-card-0 .case-result-pair strong{color:#2458f5}
html[data-experience=cosmic] #realizacje .case-card-0 .case-results-label,
html[data-experience=cosmic] #realizacje .case-card-0 .case-metric-caption,
html[data-experience=cosmic] #realizacje .case-card-0 .case-result-pair span{color:#526078}
html[data-experience=cosmic] #realizacje .case-card-0 .case-result-pair{border-color:#bccbe3}
html[data-experience=cosmic] #realizacje .case-card-1 .case-results{background:#242b38;border-color:#ffffff25}
html[data-experience=cosmic] #realizacje .case-card-2 .case-results{background:#1744cc;border-color:#ffffff35}
html[data-experience=cosmic] #realizacje .case-card-2 .case-kind,
html[data-experience=cosmic] #realizacje .case-card-2 .case-description,
html[data-experience=cosmic] #realizacje .case-card-2 .case-project-header>span{color:#edf3ff}
@media(max-width:1000px){html[data-experience=cosmic] #realizacje .cases-stage{gap:32px}}
@media(prefers-reduced-motion:reduce){html[data-experience=cosmic] #realizacje .cases-stage{gap:32px}}
/* The horizon becomes a continuous, scroll-led light scene. */
html[data-experience=cosmic] #horyzont-marki .brand-interlude{background:#070c16;--space-progress:0}
html[data-experience=cosmic] #horyzont-marki .interlude-art{background:radial-gradient(ellipse at 60% 75%,#173977 0%,#0a1428 45%,#070b13 80%)}
html[data-experience=cosmic] #horyzont-marki .interlude-orbit{transition:none;transform:scale(var(--orbit-zoom,1));transform-origin:50% 0;box-shadow:0 -1px 3px #fff,0 -5px 24px #79b5ff80,0 -22px 80px #2458f55c}
html[data-experience=cosmic] #horyzont-marki .interlude-beam{opacity:.3}
.cosmic-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cosmic-stars i{position:absolute;width:2px;height:2px;background:#c7ddff;border-radius:50%;box-shadow:0 0 8px #99c1ff;opacity:.5}
.cosmic-arc{position:absolute;top:45%;left:32%;width:68%;height:45%;border:1px solid #b7d8ff42;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 26px #2458f51a}
.cosmic-arc:before{content:'';position:absolute;inset:18%;border:1px solid #b7d8ff16;border-radius:50%}
.cosmic-traveller{position:absolute;inset:-2px;border-radius:50%;transform:rotate(var(--signal-angle,0deg))}
.cosmic-traveller:after{content:'';position:absolute;left:50%;top:-3px;width:7px;height:7px;border-radius:50%;background:#eef7ff;box-shadow:0 0 12px 5px #7baeff66,0 0 40px 10px #2458f566}
html[data-experience=cosmic] #o-nas .about-portrait{background:radial-gradient(ellipse at 55% 90%,#c6dbff,#eff5ff 70%)}
html[data-experience=cosmic] #o-nas .about-portrait-orbit{border-color:#2458f540;transform:rotate(-20deg);transition:none}
/* A finite intro, not a fabricated percentage counter. CSS also fails open. */
.cosmic-loader{position:fixed;inset:0;z-index:200;background:#080d18;color:#f3f7ff;display:grid;place-items:center;overflow:hidden;animation:cosmic-failsafe 0s 3.5s forwards}
.cosmic-loader.is-leaving{pointer-events:none;opacity:0;transform:scale(1.06);filter:blur(8px);transition:opacity .65s,transform .9s cubic-bezier(.2,.7,.2,1),filter .65s}
.cosmic-loader-core{text-align:center;position:relative;z-index:2}
.cosmic-loader-word{font:300 clamp(34px,6vw,76px)/1.1 Inter,sans-serif;letter-spacing:.13em;margin:30px 0 18px;animation:cosmic-word 1s cubic-bezier(.2,.7,.2,1) both}
.cosmic-loader-note{font:350 14px/1.5 Inter,sans-serif;letter-spacing:.12em;color:#b9c9e3}
.cosmic-loader-orbit{position:absolute;width:min(70vw,720px);height:min(22vw,220px);border:1px solid #9cbfff60;border-radius:50%;transform:rotate(-20deg);box-shadow:0 0 80px #2458f526,inset 0 0 90px #2458f512;animation:cosmic-arrive 1.35s cubic-bezier(.16,.8,.2,1) both}
.cosmic-loader-orbit:before,.cosmic-loader-orbit:after{content:'';position:absolute;inset:-35% 20%;border:1px solid #9cbfff35;border-radius:50%;transform:rotate(55deg)}
.cosmic-loader-orbit:after{transform:rotate(-55deg)}
@keyframes cosmic-word{from{opacity:0;filter:blur(10px);transform:translateY(15px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes cosmic-arrive{from{opacity:0;transform:perspective(900px) rotateX(65deg) rotate(-70deg) scale(.5)}to{opacity:1;transform:perspective(900px) rotateX(0) rotate(-20deg) scale(1)}}
@keyframes cosmic-failsafe{to{visibility:hidden;pointer-events:none}}
@media(max-width:650px){
 .cosmic-arc{left:4%;width:110%;top:50%;height:30%;opacity:.65}
 .cosmic-loader-orbit{width:86vw;height:35vw}
 .cosmic-loader-note{font-size:14px;letter-spacing:.04em}
}
@media(prefers-reduced-motion:reduce){
 .cosmic-loader{display:none}
 .cosmic-hero-orbit,.cosmic-arc,.cosmic-traveller{transform:none!important}
 html[data-experience=cosmic] #realizacje .case-card{transform:none!important;opacity:1!important}
}
@media(prefers-reduced-motion:no-preference){
 html[data-experience=cosmic] #o-nas .about-portrait img{translate:0 var(--portrait-drift,0px)}
 html[data-experience=cosmic] #o-nas .about-portrait-orbit{transform:rotate(var(--portrait-orbit-angle,-20deg))}
}

/* Second-pass composition: larger gestures, quieter surfaces, editorial pacing. */
.cosmic-ribbon{overflow:hidden;background:#080d18;color:#f2f5fc;padding:28px 0 24px;border-bottom:1px solid #ffffff1c;pointer-events:none}
.cosmic-ribbon-track{display:flex;width:max-content;white-space:nowrap;font:300 clamp(34px,5.2vw,88px)/1.2 Inter,sans-serif;letter-spacing:-.065em;animation:cosmic-ribbon-travel var(--ribbon-duration,70s) linear infinite;animation-play-state:paused;will-change:transform}
.cosmic-ribbon-set{flex:none}
.cosmic-ribbon.is-running .cosmic-ribbon-track{animation-play-state:running}
@keyframes cosmic-ribbon-travel{to{transform:translateX(-50%)}}
.cosmic-ribbon span{display:inline-block;font-size:.65em;color:#2458f5;vertical-align:12%;margin:0 .35em}
html[data-experience=cosmic][data-design=contrast] #uslugi{padding-top:100px;padding-bottom:110px}
html[data-experience=cosmic][data-design=contrast] #uslugi .services-header{position:relative;display:block;padding-right:0;margin-bottom:60px;min-height:0}
html[data-experience=cosmic][data-design=contrast] #uslugi .services-heading{max-width:900px}
html[data-experience=cosmic][data-design=contrast] #uslugi .services-header h2{font-size:clamp(42px,4.6vw,72px);line-height:1.08;text-wrap:pretty;letter-spacing:-.055em}
html[data-experience=cosmic] #uslugi .services-lead{max-width:600px}
html[data-experience=cosmic][data-design=contrast] #uslugi[data-services-layout=bento] .bento-service{border-radius:12px;background:#151c29;border-color:#ffffff20;padding:32px;gap:32px}
html[data-experience=cosmic][data-design=contrast] #uslugi[data-services-layout=bento] .bento-0{background:linear-gradient(155deg,#223660,#131c2f 60%)}
html[data-experience=cosmic][data-design=contrast] #uslugi[data-services-layout=bento] .bento-2{background:#202c39}
html[data-experience=cosmic][data-design=contrast] #uslugi[data-services-layout=bento] h3{font-size:clamp(28px,2.4vw,38px);max-width:340px;line-height:1.1;letter-spacing:-.045em}
html[data-experience=cosmic][data-design=contrast] #uslugi[data-services-layout=bento] .offer-demo{border-radius:18px;background:#1b2940;border-color:#bed2ff27;box-shadow:0 24px 40px -28px #0009}
/* Orbital artwork is decorative. Motion follows scrolling, never pointer hover. */
.cosmic-orbital{position:relative;pointer-events:none;isolation:isolate;transform:rotate(var(--orbit-turn,0deg))}
.cosmic-service-orb{position:absolute;width:30%;aspect-ratio:1;right:-2%;top:5%;max-width:400px}
html[data-experience=cosmic] #realizacje{padding-top:100px}
html[data-experience=cosmic] #realizacje .cases-header{margin-bottom:64px}
/* A sticky introduction beside four generously spaced process steps. */
html[data-experience=cosmic] #proces{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);column-gap:8%;padding-top:130px;padding-bottom:110px;background:#fff}
html[data-experience=cosmic] #proces .process-header{display:block;align-self:start;position:sticky;top:80px;margin:0}
html[data-experience=cosmic] #proces .process-header h2{font-size:clamp(40px,4.4vw,68px);line-height:1.08}
html[data-experience=cosmic] #proces .process-intro{margin-top:30px;max-width:370px;font-size:16px;line-height:1.7;color:#5c6574}
html[data-experience=cosmic] #proces .process-step{grid-template-columns:66px minmax(0,1fr);padding:34px 0 44px;min-height:205px;gap:12px 20px;border-color:#dce2ed}
html[data-experience=cosmic] #proces .process-step:first-child{border-top:1px solid #dce2ed}
html[data-experience=cosmic] #proces .process-step-top{padding:0;align-self:start}
html[data-experience=cosmic] #proces .process-number{font-size:43px;font-weight:300;color:#2458f5}
html[data-experience=cosmic] #proces .process-step h3{font-size:30px;padding:0;line-height:1.2}
html[data-experience=cosmic] #proces .process-step>p{padding:0;font-size:16px;line-height:1.65;color:#5c6574;max-width:440px}
html[data-experience=cosmic] #proces .process-stage-icon{display:none}
html[data-experience=cosmic] #proces .process-footer{grid-column:2;display:block;margin-top:32px}
html[data-experience=cosmic] #proces .process-footer .cta{margin-top:22px}
/* Oversized studio signature and offset portraits give the team its own chapter. */
html[data-experience=cosmic] #o-nas{position:relative;background:#edf1f7;padding-top:110px;padding-bottom:100px;overflow:clip}
html[data-experience=cosmic] #o-nas .about-header{align-items:start;margin-bottom:70px}
html[data-experience=cosmic] #o-nas .about-header h2{font-size:clamp(40px,4.4vw,68px);line-height:1.08}
.cosmic-about-wordmark{font:300 clamp(70px,15.5vw,260px)/.9 Inter,sans-serif;letter-spacing:-.085em;white-space:nowrap;color:#cad2df;margin:0 0 -20px -1%;pointer-events:none}
html[data-experience=cosmic] #o-nas .about-people{gap:7%;position:relative}
html[data-experience=cosmic] #o-nas .about-person-gabriela{margin-top:115px}
html[data-experience=cosmic] #o-nas .about-portrait{height:clamp(390px,39vw,560px);border-radius:160px 160px 16px 16px;background:radial-gradient(ellipse at 50% 85%,#9cbaf2,#dbe5f6 60%,#e5ecf7 100%);border:1px solid #c1cde0}
html[data-experience=cosmic] #o-nas .about-portrait-gabriela{border-radius:16px 16px 160px 16px}
html[data-experience=cosmic] #o-nas .about-caption{padding-top:26px}
html[data-experience=cosmic] #o-nas .about-caption h3{font-size:clamp(26px,2.5vw,38px);letter-spacing:-.05em}
html[data-experience=cosmic] #o-nas .about-person-note{font-size:16px;line-height:1.7;color:#596575}
html[data-experience=cosmic] #o-nas .about-footer{margin-top:65px;border-top:1px solid #cbd4e1;padding-top:32px}
/* Contact keeps its working form, with a spatial illustration beside it. */
html[data-experience=cosmic] #kontakt{padding-top:120px;padding-bottom:120px;column-gap:6%;background:#080d18;isolation:isolate}
html[data-experience=cosmic] #kontakt .contact-copy{position:relative}
html[data-experience=cosmic] #kontakt .contact-copy h2{font-size:clamp(44px,4.8vw,74px);line-height:1.05;letter-spacing:-.055em}
html[data-experience=cosmic] #kontakt .contact-copy>p:not(.closing-tag){font-size:17px;max-width:400px;color:#bdc8db}
.cosmic-contact-orb{width:100%;max-width:420px;aspect-ratio:1.55;margin:35px 0 -20px}
html[data-experience=cosmic] #kontakt .contact-form{border-radius:24px;border-color:#b8d1ff40;background:linear-gradient(145deg,#ffffff0c,#2458f50b);box-shadow:0 24px 70px #0002;align-self:center}
html[data-experience=cosmic] #kontakt .contact-glow{opacity:.65;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 220px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 220px),transparent 100%)}
html[data-experience=cosmic] #kontakt{background:linear-gradient(to bottom,#080d18 0%,#080d18 calc(100% - 220px),#090b10 100%)}
@media(max-width:1100px){
 html[data-experience=cosmic][data-design=contrast] #uslugi .services-header{padding-right:0}
 .cosmic-service-orb{width:25%;right:-1%;top:18%}
 html[data-experience=cosmic] #proces{column-gap:5%;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 html[data-experience=cosmic] #proces .process-step{grid-template-columns:50px minmax(0,1fr);gap:12px}
 html[data-experience=cosmic] #o-nas .about-portrait{height:380px}
}
@media(max-width:800px){
 .cosmic-ribbon{padding:20px 0 18px}
 html[data-experience=cosmic][data-design=contrast] #uslugi{padding-top:64px;padding-bottom:70px}
 html[data-experience=cosmic][data-design=contrast] #uslugi .services-header{padding-right:0;min-height:0;margin-bottom:36px}
 html[data-experience=cosmic][data-design=contrast] #uslugi .services-header h2{font-size:clamp(32px,7.8vw,48px);line-height:1.12}
 .cosmic-service-orb{display:none}
 html[data-experience=cosmic][data-design=contrast] #uslugi[data-services-layout=bento] .bento-service{padding:25px;gap:26px}
 html[data-experience=cosmic] #realizacje{padding-top:70px}
 html[data-experience=cosmic] #proces{display:block;padding-top:80px;padding-bottom:75px}
 html[data-experience=cosmic] #proces .process-header{position:static;margin-bottom:36px}
 html[data-experience=cosmic] #proces .process-header h2{font-size:42px}
 html[data-experience=cosmic] #proces .process-intro{font-size:16px;margin-top:24px}
 html[data-experience=cosmic] #proces .process-step{grid-template-columns:48px minmax(0,1fr);gap:10px 16px;padding:30px 0;min-height:0}
 html[data-experience=cosmic] #proces .process-number{font-size:34px}
 html[data-experience=cosmic] #proces .process-step h3{font-size:26px}
 html[data-experience=cosmic] #proces .process-step>p{font-size:15px}
 html[data-experience=cosmic] #o-nas{padding-top:75px;padding-bottom:75px}
 html[data-experience=cosmic] #o-nas .about-header{display:block;margin-bottom:45px}
 html[data-experience=cosmic] #o-nas .about-header h2{font-size:42px}
 html[data-experience=cosmic] #o-nas .about-people{grid-template-columns:1fr;gap:45px}
 html[data-experience=cosmic] #o-nas .about-person-gabriela{margin-top:0;grid-row:auto}
 html[data-experience=cosmic] #o-nas .about-portrait{height:clamp(330px,100vw,480px);border-radius:100px 100px 14px 14px}
 html[data-experience=cosmic] #o-nas .about-portrait-gabriela{border-radius:14px 14px 100px 14px}
 html[data-experience=cosmic] #o-nas .about-person-note{font-size:15px}
 .cosmic-about-wordmark{font-size:15.7vw;margin-bottom:20px}
 html[data-experience=cosmic] #kontakt{padding-top:75px;padding-bottom:85px}
 html[data-experience=cosmic] #kontakt .contact-copy h2{font-size:clamp(42px,10vw,64px)}
 .cosmic-contact-orb{position:absolute;width:150px;right:-10px;bottom:0;opacity:.65;margin:0}
 html[data-experience=cosmic] #kontakt .contact-signature{max-width:55%}
 html[data-experience=cosmic] #kontakt .contact-form{margin-top:45px;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){.cosmic-ribbon-track,.cosmic-orbital{animation:none;transform:none;will-change:auto}}
html[data-experience=cosmic] #uslugi .services-contact{display:flex;width:fit-content;margin:24px 0 0 auto}
@media(min-width:801px){
 html[data-experience=cosmic] #uslugi .services-contact{position:absolute;right:0;bottom:0;margin:0}
 html[data-experience=cosmic] #uslugi .services-heading .services-lead{max-width:min(600px,calc(100% - 280px));min-height:52px}
}

/* Hero: the same message and horizon, with a more confident typographic scale. */
html[data-experience=cosmic] .hero .horizon-content{top:18%;width:90%;left:5%}
html[data-experience=cosmic] .hero .horizon-content h1{font-size:clamp(62px,6.2vw,90px);line-height:1.04;letter-spacing:-.065em;font-weight:350}
html[data-experience=cosmic] .cosmic-hero-accent{color:var(--brand-accent,#2458f5)}
html[data-experience=cosmic] .hero .horizon-content .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:9px 15px;border:1px solid #2458f520;border-radius:30px;background:#f6f8fd;color:#566078;font-size:14px;font-weight:400;letter-spacing:.08em}
html[data-experience=cosmic] .hero .horizon-content .eyebrow:before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:var(--brand-accent);box-shadow:0 0 0 4px #2458f50b}
html[data-experience=cosmic] .hero .description{max-width:620px;font-size:18px;line-height:1.6;color:#5a6372;margin-top:25px;text-wrap:pretty}
html[data-experience=cosmic] .hero .actions{margin-top:28px;gap:14px}
html[data-experience=cosmic] .cosmic-hero-orbit{bottom:-24%;height:30vw;width:100vw;left:0;border-color:#2458f52e;transform:rotate(-11deg)}
.cosmic-hero-signal{position:absolute;left:17%;top:11%;width:8px;height:8px;border-radius:50%;background:#2458f5;box-shadow:0 0 0 5px #2458f510,0 0 18px #2458f53d}
.cosmic-hero-signal-secondary{left:auto;right:12%;top:auto;bottom:17%;width:5px;height:5px;background:#7d9bde}
@media(prefers-reduced-motion:no-preference){
 html[data-experience=cosmic] .hero .horizon-content h1{animation:cosmic-hero-reveal 1s .08s cubic-bezier(.16,1,.3,1) both}
 html[data-experience=cosmic] .hero .horizon-content .eyebrow{animation:hero-intro .7s cubic-bezier(.16,1,.3,1) both}
 html[data-experience=cosmic] .hero .horizon-content .description{animation:hero-intro .85s .18s cubic-bezier(.16,1,.3,1) both}
 html[data-experience=cosmic] .hero .horizon-content .actions{animation:hero-intro .85s .28s cubic-bezier(.16,1,.3,1) both}
 html[data-experience=cosmic] .hero .sphere-canvas{animation:horizon-intro 1.4s .1s cubic-bezier(.16,1,.3,1) both}
 html[data-experience=cosmic].cosmic-intro-active .hero :is(.horizon-content h1,.horizon-content .eyebrow,.horizon-content .description,.horizon-content .actions,.sphere-canvas){animation:none;opacity:0}
 @keyframes cosmic-hero-reveal{from{opacity:0;transform:translateY(20px) scale(.98);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
}
@media(min-width:801px) and (max-height:760px){
 html[data-experience=cosmic] .hero .horizon-content{top:17%}
 html[data-experience=cosmic] .hero .horizon-content h1{font-size:clamp(62px,5.6vw,78px)}
 html[data-experience=cosmic] .hero .horizon-content .eyebrow{margin-bottom:17px}
}
@media(max-width:800px){
 html[data-experience=cosmic] .hero .horizon-content{position:relative;top:auto;left:auto;width:88%;padding:130px 0 250px}
 html[data-experience=cosmic] .hero .horizon-content h1{font-size:clamp(42px,10.8vw,68px);line-height:1.08;letter-spacing:-.06em}
 html[data-experience=cosmic] .hero .horizon-content .eyebrow{font-size:14px;letter-spacing:.015em;padding:8px 11px;gap:8px;margin-bottom:25px;max-width:100%}
 html[data-experience=cosmic] .hero .description{font-size:17px;line-height:1.6;margin-top:24px;max-width:480px}
 html[data-experience=cosmic] .hero .actions{gap:12px;margin-top:27px}
 html[data-experience=cosmic] .cosmic-hero-orbit{height:60vw;width:138vw;left:-19vw;bottom:2%;transform:rotate(-16deg)}
}

/* A lit globe with rings layered behind and in front of the surface. */
.cosmic-planet{display:block;width:100%;height:100%;overflow:visible}
@media(prefers-reduced-motion:no-preference){
 .cosmic-planet{animation:cosmic-planet-drift 12s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 50%}
 .planet-visible .cosmic-planet{animation-play-state:running}
 @keyframes cosmic-planet-drift{0%,100%{transform:translateY(3px) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
}

/* Plain text eyebrow above the hero title. */
html[data-experience=cosmic] .hero .horizon-content .eyebrow{display:block;background:none;border:0;border-radius:0;box-shadow:none;color:#566078;font-size:14px;font-weight:400;letter-spacing:.08em;text-transform:none;padding:0;gap:0}
html[data-experience=cosmic] .hero .horizon-content .eyebrow:before{display:none}
@media(max-width:800px){html[data-experience=cosmic] .hero .horizon-content .eyebrow{letter-spacing:.035em}}

/* Use the actual brand artwork in the intro, including the custom AG letterforms. */
.cosmic-loader-logo{display:block;width:clamp(190px,23vw,300px);height:auto;margin:0 auto;filter:brightness(0) invert(1)}
@media(max-width:800px){.cosmic-loader-logo{width:144px}}
.cosmic-loader-word:has(.cosmic-loader-logo){margin:0 0 26px;line-height:0;letter-spacing:0}
.cosmic-loader-word:has(.cosmic-loader-logo){animation-name:hero-intro;animation-duration:.7s}

/* Stack only when the complete card and its exposed headers fit in the viewport. */
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card{position:relative;top:auto;border:1px solid #ffffff24;border-radius:16px;min-height:0;transform:none;transition:none}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-project-header{min-height:68px}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .cases-stage{gap:48px}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .cases-stage:after{display:none}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-cosmic-stack=on] .case-card{position:sticky;top:var(--cosmic-card-top);min-height:var(--cosmic-card-height);grid-template-rows:68px minmax(0,1fr);z-index:var(--cosmic-card-index);transform:scale(var(--cosmic-card-scale,1));transform-origin:50% 0;box-shadow:0 -10px 28px #00000012;translate:none;opacity:1}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-cosmic-stack=on] .case-card:focus-within{z-index:5;transform:none}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-cosmic-stack=on] .cases-stage{gap:70px}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-cosmic-stack=on] .cases-stage:after{content:'';display:block;height:120px}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card-0{border-color:#dce3ee}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card-0 .cta.secondary{color:#111e34;border-color:#111e3470;background:transparent}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card-0 .cta.secondary:is(:hover,:focus-visible){background:#111e34;color:#fff;border-color:#111e34}
html[data-experience=cosmic] #realizacje .case-results-label{opacity:1}
@media(max-width:650px){
 html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .cases-stage{gap:28px}
 html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card{border-radius:16px}
}
/* Offset the sticky margin boxes so all three headers leave together. */
html[data-experience=cosmic][data-design=contrast] #realizacje[data-cosmic-stack=on] .case-card-0{margin-bottom:136px}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-cosmic-stack=on] .case-card-1{margin-top:-136px;margin-bottom:68px}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-cosmic-stack=on] .case-card-2{margin-top:-68px}

/* Shared motion language: short lift, one easing curve, restrained stagger. */
html[data-experience=cosmic]{--ag-enter:720ms;--ag-ease:cubic-bezier(.22,1,.36,1);--ag-lift:16px;--ag-ambient:12s}
html[data-experience=cosmic] #o-nas .about-portrait{height:clamp(360px,35.5vw,510px)}
@media(max-width:1100px) and (min-width:801px){html[data-experience=cosmic] #o-nas .about-portrait{height:350px}}
@media(max-width:800px){
 html[data-experience=cosmic]{--ag-lift:12px}
 html[data-experience=cosmic] #o-nas .about-portrait{height:clamp(310px,90vw,420px)}
}
@media(prefers-reduced-motion:no-preference){
 html[data-experience=cosmic] .motion-ready{translate:0 var(--ag-lift);transition:opacity var(--ag-enter) var(--ag-ease),translate var(--ag-enter) var(--ag-ease);transition-delay:var(--ag-entry-delay,0ms)}
 html[data-experience=cosmic] .motion-ready:is(.motion-entered,:focus-within){translate:0 0}
 html[data-experience=cosmic] .contact-form{--ag-entry-delay:110ms}
 html[data-experience=cosmic] .faq-list details.motion-ready{--ag-entry-delay:0ms}
 html[data-experience=cosmic] #uslugi .service-item.reveal-ready,
 html[data-experience=cosmic] #proces .process-step.process-ready,
 html[data-experience=cosmic] #o-nas .about-person.about-ready{transform:translateY(var(--ag-lift));transition:opacity var(--ag-enter) var(--ag-ease),transform var(--ag-enter) var(--ag-ease);transition-delay:var(--ag-entry-delay,0ms)}
 html[data-experience=cosmic] #uslugi .service-item.reveal-ready.has-entered,
 html[data-experience=cosmic] #proces .process-step.process-ready.process-visible,
 html[data-experience=cosmic] #o-nas .about-person.about-ready.about-visible{transform:none}
 html[data-experience=cosmic] #uslugi .service-item:nth-child(2),
 html[data-experience=cosmic] #o-nas .about-person:nth-child(2){--ag-entry-delay:110ms}
 html[data-experience=cosmic] #uslugi .service-item:nth-child(3){--ag-entry-delay:220ms}
 html[data-experience=cosmic] #proces .process-step{--ag-entry-delay:0ms}
 html[data-experience=cosmic] #horyzont-marki .interlude-top{translate:0 var(--ag-lift);transition:opacity var(--ag-enter) var(--ag-ease),translate var(--ag-enter) var(--ag-ease)}
 html[data-experience=cosmic] #horyzont-marki .map-reveal .interlude-top{translate:0 0}
 html[data-experience=cosmic] #horyzont-marki .landmark-caption{transform:translateY(var(--ag-lift));transition:opacity var(--ag-enter) var(--ag-ease),transform var(--ag-enter) var(--ag-ease)}
 html[data-experience=cosmic] #horyzont-marki .map-reveal .landmark-caption{transform:none;transition-delay:calc(var(--landmark-delay) + .22s)}
 html[data-experience=cosmic] #horyzont-marki .interlude-pillars li{--landmark-delay:0s}
 html[data-experience=cosmic] #horyzont-marki .interlude-pillars li:nth-child(2){--landmark-delay:.22s}
 html[data-experience=cosmic] #horyzont-marki .interlude-pillars li:nth-child(3){--landmark-delay:.44s}
 html[data-experience=cosmic] #horyzont-marki .interlude-pillars li:before{transition-duration:var(--ag-enter);transition-timing-function:var(--ag-ease)}
 html[data-experience=cosmic] #horyzont-marki .interlude-pillars li:after{transition-timing-function:var(--ag-ease)}
 html[data-experience=cosmic] #horyzont-marki .map-reveal .interlude-pillars li:after{animation-duration:8s}
 html[data-experience=cosmic] :is(.interlude-beam,.interlude-light,.cosmic-planet){animation-duration:var(--ag-ambient)}
 html[data-experience=cosmic] .contact-glow:before,
 html[data-experience=cosmic] .contact-glow:after{animation-duration:var(--ag-ambient)}
 html[data-experience=cosmic] #cytat-zalozyciela .founder-quote.quote-zoom{transform:translateY(calc((1 - var(--quote-progress,0))*16px)) scale(calc(.98 + var(--quote-progress,0)*.02));filter:none}
 html[data-experience=cosmic] #cytat-zalozyciela .quote-zoom figcaption{transform:none;opacity:1}
 html[data-experience=cosmic] .hero .horizon-content :is(h1,.eyebrow,.description,.actions){animation-name:ag-unified-enter;animation-duration:var(--ag-enter);animation-timing-function:var(--ag-ease)}
 html[data-experience=cosmic] .hero .horizon-content .eyebrow{animation-delay:0s}
 html[data-experience=cosmic] .hero .horizon-content h1{animation-delay:110ms}
 html[data-experience=cosmic] .hero .horizon-content .description{animation-delay:220ms}
 html[data-experience=cosmic] .hero .horizon-content .actions{animation-delay:330ms}
 html[data-experience=cosmic].cosmic-intro-active .hero .horizon-content :is(h1,.eyebrow,.description,.actions){animation:none;opacity:0}
 html[data-experience=cosmic] .cosmic-loader.is-leaving{transform:scale(1.015);filter:none;transition:opacity var(--ag-enter) var(--ag-ease),transform var(--ag-enter) var(--ag-ease)}
 html[data-experience=cosmic] .cosmic-loader-word:has(.cosmic-loader-logo){animation-name:ag-unified-enter;animation-duration:var(--ag-enter);animation-timing-function:var(--ag-ease)}
 html[data-experience=cosmic] .cosmic-loader-orbit{animation-name:ag-orbit-enter;animation-duration:1100ms;animation-timing-function:var(--ag-ease)}
 @keyframes ag-unified-enter{from{opacity:0;transform:translateY(var(--ag-lift,16px))}to{opacity:1;transform:none}}
 @keyframes ag-orbit-enter{from{opacity:0;transform:rotate(-30deg) scale(.94)}to{opacity:1;transform:rotate(-20deg) scale(1)}}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
 html[data-experience=cosmic] #uslugi .service-item,
 html[data-experience=cosmic] #o-nas .about-person{--ag-entry-delay:0ms!important}
}

/* Sector photography above the results, keeping numbers as live text. */
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card .case-results{padding:0;min-height:0;justify-content:flex-start;gap:0;overflow:hidden}
html[data-experience=cosmic] #realizacje .case-sector-image{display:block;width:100%;height:135px;object-fit:cover;object-position:50% 54%;flex-shrink:0}
html[data-experience=cosmic] #realizacje .case-results-body{padding:20px 24px 22px}
html[data-experience=cosmic] #realizacje .case-results-label{margin:0 0 8px}
html[data-experience=cosmic] #realizacje .case-metric{font-size:64px;line-height:1.05;margin:0 0 6px}
html[data-experience=cosmic] #realizacje .case-metric-range{font-size:58px}
html[data-experience=cosmic] #realizacje .case-metric-caption{margin:0 0 14px;opacity:1}
html[data-experience=cosmic] #realizacje .case-result-pair{padding-top:12px;gap:16px}
html[data-experience=cosmic] #realizacje .case-result-pair strong{font-size:24px}
html[data-experience=cosmic] #realizacje .case-result-pair span{margin-top:4px;opacity:1}
@media(max-width:650px){
 html[data-experience=cosmic] #realizacje .case-sector-image{height:auto;aspect-ratio:1.8;object-position:center}
 html[data-experience=cosmic] #realizacje .case-results-body{padding:20px 18px}
 html[data-experience=cosmic] #realizacje .case-metric{font-size:56px}
 html[data-experience=cosmic] #realizacje .case-metric-range{font-size:48px}
}

/* Match the services surface in the implementation section. */
html[data-experience=cosmic] #proces{position:relative;isolation:isolate;background:#080d18;color:#f4f7ff}
html[data-experience=cosmic] #proces:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 70%,#2458f518,transparent 60%)}
html[data-experience=cosmic] #proces :is(.process-header h2,.process-step h3){color:#f4f7ff}
html[data-experience=cosmic] #proces :is(.process-intro,.process-step>p,.process-footer>p){color:#b8c4d6}
html[data-experience=cosmic] #proces .process-step{border-color:#ffffff24}
html[data-experience=cosmic] #proces .process-step:first-child{border-top-color:#ffffff24}
html[data-experience=cosmic] #proces .cta.secondary{color:#fff;border-color:#ffffffa6;background:transparent}
html[data-experience=cosmic] #proces .cta.secondary:is(:hover,:focus-visible){background:#ffffff12;border-color:#fff}

html[data-experience=cosmic][data-design=contrast] #uslugi .services-heading{max-width:none}
@media(min-width:801px){html[data-experience=cosmic] #services-title .services-title-line{display:block;white-space:nowrap}}

/* A human signature beside the contact form. */
html[data-experience=cosmic] #kontakt .contact-signature{display:flex;align-items:center;gap:20px}
.contact-faces{display:flex;align-items:center;flex-shrink:0;padding-right:2px}
.contact-face{position:relative;display:block;width:78px;height:78px;overflow:hidden;border-radius:50%;background:#dce5f3;border:3px solid #10192a}
.contact-face+.contact-face{margin-left:-12px;background:#d5e2f5}
.contact-face img{position:absolute;left:50%;max-width:none;width:auto;transform:translateX(-50%);filter:grayscale(1)}
.contact-face-alex img{height:115%;top:0}
.contact-face-gabriela img{height:290%;top:0}
@media(max-width:650px){.contact-face{width:66px;height:66px}html[data-experience=cosmic] #kontakt .contact-signature{gap:16px}}

/* Shared portrait, inspired by the supplied team composition. */
html[data-experience=cosmic] #o-nas{background:#f1f2f4;padding-top:90px;padding-bottom:70px}
.team-together-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:7%;align-items:center}
.team-together-photo{position:relative;overflow:hidden;aspect-ratio:.9;border-radius:0;background:transparent}
.team-together-photo img{display:block;width:100%;max-width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:grayscale(1)}
html[data-experience=cosmic] #o-nas .team-together-copy .about-header{display:block;margin:0 0 28px}
html[data-experience=cosmic] #o-nas .team-together-copy .about-header h2{font-size:clamp(36px,3.5vw,54px);line-height:1.1}
html[data-experience=cosmic] #o-nas .team-together-copy .about-intro{display:none}
.team-together-members{display:grid;gap:24px}
html[data-experience=cosmic] #o-nas .team-together-members .about-caption{padding:22px 0 0;border-top:1px solid #c7ccd4;border-bottom:0}
html[data-experience=cosmic] #o-nas .team-together-members h3{font-size:clamp(25px,2.25vw,32px);font-weight:350;letter-spacing:-.04em;margin:0 0 7px}
html[data-experience=cosmic] #o-nas .team-together-members .about-role{font-size:14px;margin:0 0 10px}
html[data-experience=cosmic] #o-nas .team-together-members .about-person-note{font-size:15px;line-height:1.65;margin:0;color:#535e6e}
html[data-experience=cosmic] #o-nas .about-footer{margin-top:40px}
@media(min-width:801px){
 .team-together-photo{align-self:end}
 html[data-experience=cosmic] #o-nas .about-footer{margin-top:0}
}
@media(max-width:800px){
 html[data-experience=cosmic] #o-nas{padding-top:60px;padding-bottom:60px}
 .team-together-layout{grid-template-columns:1fr;gap:32px}
 .team-together-photo{width:100%;max-width:440px;margin:0 auto;aspect-ratio:1.08}
 html[data-experience=cosmic] #o-nas .team-together-copy .about-header h2{font-size:38px}
 .team-together-members{gap:24px}
}

/* Final rhythm for the cosmic direction; preview controls stay out of the content. */
html[data-experience=cosmic]{--cosmic-section-space:100px;--cosmic-heading:clamp(40px,4.2vw,62px)}
html[data-experience=cosmic] :is(#proces,#faq,#kontakt){padding-block:var(--cosmic-section-space)}
html[data-experience=cosmic] :is(#proces .process-header,#faq .faq-heading,#kontakt .contact-copy) h2{font-size:var(--cosmic-heading);line-height:1.1;font-weight:350;letter-spacing:-.05em}
html[data-experience=cosmic] #kontakt .contact-signature{max-width:100%}
html[data-experience=cosmic] #kontakt .contact-signature p{flex:1;min-width:0}
@media(max-width:800px){
 html[data-experience=cosmic]{--cosmic-section-space:72px;--cosmic-heading:38px}
 html[data-experience=cosmic] #kontakt .contact-form{margin-top:32px}
 html[data-experience=cosmic] #proces .process-header{margin-bottom:32px}
}

html[data-experience=cosmic] #cases-title{white-space:nowrap}
html[data-experience=cosmic] #cases-title .section-accent{display:inline}
@media(max-width:650px){html[data-experience=cosmic] #cases-title{font-size:clamp(26px,7.7vw,38px)}}

html[data-experience=cosmic] #o-nas .team-together-copy .about-header h2{font-family:Inter,sans-serif;font-size:var(--cosmic-heading);font-weight:350;line-height:1.1;letter-spacing:-.05em}
/* Native checkbox semantics with a visual treatment matching the glass form. */
html[data-experience=cosmic] #kontakt .contact-form .contact-form-consent input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;min-width:22px;min-height:22px;border:1px solid #d2def599;border-radius:6px;background-color:#ffffff08;background-position:center;background-repeat:no-repeat;background-size:16px 16px;box-shadow:inset 0 1px 0 #ffffff12;transition:background-color .18s ease,border-color .18s ease;cursor:pointer}
html[data-experience=cosmic] #kontakt .contact-form .contact-form-consent input[type=checkbox]:checked{background-color:var(--brand-accent,#2458f5);border-color:var(--brand-accent,#2458f5);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-experience=cosmic] #kontakt .contact-form .contact-form-consent input[type=checkbox]:hover{border-color:#fff}
html[data-experience=cosmic] #kontakt .contact-form .contact-form-consent input[type=checkbox]:focus-visible{outline:2px solid #fff;outline-offset:4px;box-shadow:none}
@media(forced-colors:active){html[data-experience=cosmic] #kontakt .contact-form .contact-form-consent input[type=checkbox]{appearance:auto;background-image:none}}
@media(prefers-reduced-motion:reduce){html[data-experience=cosmic] #kontakt .contact-form .contact-form-consent input[type=checkbox]{transition:none}}

/* One typographic scale and alignment for the final cosmic composition. */
html[data-experience=cosmic][data-design=contrast] #uslugi .services-header h2,
html[data-experience=cosmic][data-design=contrast] #realizacje .cases-header h2{font-size:var(--cosmic-heading);font-weight:350;line-height:1.1;letter-spacing:-.05em}
@media(min-width:1001px){
 html[data-experience=cosmic][data-design=contrast] :is(#uslugi,#realizacje,#proces,#o-nas,#faq,#kontakt){padding-inline:max(6.2%,calc((100% - 1280px)/2))}
}
@media(max-width:650px){
 html[data-experience=cosmic][data-design=contrast] #realizacje .cases-header h2{font-size:clamp(26px,7.7vw,38px)}
}
@media(max-width:800px){
 html[data-experience=cosmic] #o-nas :is(.team-together-photo,.about-caption){--ag-entry-delay:0ms!important}
}
html[data-experience=cosmic] #kontakt .contact-form :is(input:not([type=checkbox]),select,textarea):focus-visible{outline:2px solid #fff;outline-offset:4px;border-color:#fff}

.site-footer>.experience-replay{display:block;margin:28px auto 0;padding:10px 16px;min-height:44px;border:0;background:none;color:#b8c4d6;font:400 14px/1.4 Inter,sans-serif;cursor:pointer}
.site-footer>.experience-replay:hover{color:#fff}
.site-footer>.experience-replay:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
@media print{.experience-replay,.cosmic-loader{display:none}}

/* Align the contact introduction with the top of the form. */
@media(min-width:801px){html[data-experience=cosmic] #kontakt{align-items:start}}

html[data-experience=cosmic] #realizacje .case-project-preview{height:200px;object-fit:contain;object-position:center;background:#dfebf1}

html[data-experience=cosmic] #realizacje .case-bielak-preview{background:#080808}

/* Project-first cards: large artwork, a compact story, and a separate results rail. */
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-rows:68px auto auto;gap:24px 32px;padding:0 28px 24px}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-copy{grid-column:1;grid-row:2;padding:8px 0;max-width:none;align-self:center}
html[data-experience=cosmic] #realizacje .case-copy h3{font-size:clamp(28px,2.4vw,36px);line-height:1.12;margin:0 0 20px}
html[data-experience=cosmic] #realizacje .case-kind{margin:0 0 20px}
html[data-experience=cosmic] #realizacje .case-description{margin:0 0 24px;font-size:15px;line-height:1.65}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card .case-results{grid-column:2;grid-row:2;align-self:stretch;display:block;height:340px;border:0;border-radius:12px;padding:0;box-shadow:none;background:#dfebf1}
html[data-experience=cosmic] #realizacje .case-results:before{display:none}
html[data-experience=cosmic] #realizacje .case-project-preview{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;background:transparent}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card .case-device-mockup{background:transparent;overflow:visible}
html[data-experience=cosmic] #realizacje .case-device-mockup img{object-fit:contain;object-position:center;background:transparent;transform:none}
html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card .case-product-mockup{background:#080808}
html[data-experience=cosmic] #realizacje .case-bielak-preview{object-fit:cover;object-position:50% 70%;transform:scale(1.17);transform-origin:50% 70%}
html[data-experience=cosmic] #realizacje .case-stats{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;margin:0;padding:20px 0 0;border-top:1px solid #ffffff30;color:#fff}
html[data-experience=cosmic] #realizacje .case-card-0 .case-stats{border-color:#12244526;color:#15294b}
html[data-experience=cosmic] #realizacje .case-primary-stat{display:flex;align-items:center;gap:18px}
html[data-experience=cosmic] #realizacje .case-stats .case-metric{font-size:44px;line-height:1.05;margin:0;flex-shrink:0;letter-spacing:-.045em}
html[data-experience=cosmic] #realizacje .case-stats .case-metric-caption{font-size:14px;line-height:1.5;margin:0;max-width:185px;color:inherit}
html[data-experience=cosmic] #realizacje .case-stats .case-result-pair{display:flex;gap:36px;border:0;padding:0;margin:0}
html[data-experience=cosmic] #realizacje .case-stats .case-result-pair strong{font-size:25px;line-height:1.2;color:inherit}
html[data-experience=cosmic] #realizacje .case-stats .case-result-pair span{font-size:14px;line-height:1.5;color:inherit}
@media(min-width:651px) and (max-width:1000px){
 html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card{grid-template-columns:1fr 1fr;gap:24px}
 html[data-experience=cosmic] #realizacje .case-primary-stat{display:block}
 html[data-experience=cosmic] #realizacje .case-stats .case-metric-caption{margin-top:8px}
}
@media(max-width:650px){
 html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:24px;padding:0 20px 24px}
 html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-card .case-results{grid-column:1;grid-row:2;height:auto;aspect-ratio:1.45;width:calc(100% + 40px);margin-left:-20px;border-radius:0}
 html[data-experience=cosmic][data-design=contrast] #realizacje[data-case-layout=editorial] .case-copy{grid-column:1;grid-row:3;padding:0}
 html[data-experience=cosmic] #realizacje .case-copy h3{font-size:29px}
 html[data-experience=cosmic] #realizacje .case-description{margin:0}
 html[data-experience=cosmic] #realizacje .case-stats{grid-column:1;grid-row:4;grid-template-columns:1fr;gap:20px;padding-top:20px}
 html[data-experience=cosmic] #realizacje .case-primary-stat{display:block}
 html[data-experience=cosmic] #realizacje .case-stats .case-metric{font-size:42px}
 html[data-experience=cosmic] #realizacje .case-stats .case-metric-caption{margin-top:7px;max-width:none}
 html[data-experience=cosmic] #realizacje .case-stats .case-result-pair{gap:26px}
 html[data-experience=cosmic] #realizacje .case-card>[data-case-open]{grid-column:1;grid-row:5;width:100%;justify-content:center;margin:0}
}

/* Continuous dark canvas: fade decorative light, never the section content. */
html[data-experience=cosmic] :is(#uslugi,#realizacje,#horyzont-marki,#horyzont-marki .brand-interlude,#proces){background-color:#080d18}
html[data-experience=cosmic] .cosmic-ribbon{border-bottom:0}
html[data-experience=cosmic] :is(#uslugi,#proces):before{
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 180px,#000 calc(100% - 180px),transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 180px,#000 calc(100% - 180px),transparent);
}
html[data-experience=cosmic] #horyzont-marki .interlude-art{
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 64%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 64%,transparent 100%);
}
html[data-experience=cosmic] #horyzont-marki .interlude-art:after{background:none}
html[data-experience=cosmic] #kontakt{background:#080d18}
html[data-experience=cosmic] #kontakt .contact-glow{
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 55%,#000b 70%,#0004 85%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 55%,#000b 70%,#0004 85%,transparent 100%);
}
html[data-experience=cosmic] .site-footer{background:#080d18}