@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&display=swap";:root{color:#171714;font-synthesis:none;--red:#d92924;--ease:cubic-bezier(.22,1,.36,1);background:#f3f2ee;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid var(--red);outline-offset:3px}input:focus-visible{outline:2px solid var(--red);outline-offset:3px}.loader{color:#fff;z-index:1000;background:#11110f;flex-direction:column;justify-content:center;align-items:center;gap:28px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.loader>div{background:#444;width:160px;height:1px}.loader i{width:60%;height:100%;animation:load 1.5s infinite var(--ease);background:#fff;display:block}.loader>span{text-transform:uppercase;letter-spacing:.18em;color:#999;font-size:10px}@keyframes load{50%{transform:translate(70%)}}.logo{color:inherit;letter-spacing:-1.5px;align-items:center;font:500 24px Manrope;display:flex;position:relative}.logo>span>span{color:var(--red)}.logo-roof{color:var(--red);margin-right:4px;font-size:22px}.logo small{letter-spacing:.3em;font:600 7px DM Sans;position:absolute;bottom:-6px;right:0}.topbar{z-index:100;color:#fff;background:linear-gradient(#0008,#0000);justify-content:space-between;align-items:center;height:86px;padding:0 4vw;display:flex;position:fixed;top:0;left:0;right:0}.topbar nav{gap:32px;display:flex}.topbar nav button,.menu-toggle{color:inherit;background:0 0;border:0;font-size:13px}.menu-toggle{display:none}.hero{color:#fff;align-items:flex-end;height:100svh;min-height:680px;padding:0 7vw 11vh;display:flex;position:relative;overflow:hidden}.hero-bg{background:linear-gradient(90deg,#0009 0%,#0002 60%),url(/images/showroom/scene-main.jpg) 50%/cover;animation:15s ease-out both hero;position:absolute;top:-3%;bottom:-3%;left:-3%;right:-3%}@keyframes hero{to{transform:scale(1.06)translate(-1%)}}.hero-grain{opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;top:0;bottom:0;left:0;right:0}.hero-copy{max-width:760px;position:relative}.hero-copy>span,.manifesto>span,.quote-cta>div>span{text-transform:uppercase;letter-spacing:.17em;font-size:11px}.hero h1{letter-spacing:-.06em;margin:25px 0;font:300 clamp(55px,7.5vw,112px)/.92 Manrope}.hero h1 em{color:#c9c5bd;font-style:normal}.hero p{color:#ddd;max-width:500px;font-size:17px;line-height:1.6}.button{border:0;align-items:center;gap:25px;margin-top:18px;padding:17px 22px;display:inline-flex}.button svg{width:17px}.button.light{color:#111;background:#fff}.button.dark{color:#fff;background:#171714}.scroll{color:#fff;text-transform:uppercase;letter-spacing:.15em;background:0 0;border:0;align-items:center;gap:10px;font-size:11px;display:flex;position:absolute;bottom:6vh;right:5vw}.scroll svg{width:15px}.showroom{background:#111;height:100svh;min-height:700px;position:relative;overflow:hidden}.scene{touch-action:none;cursor:grab;height:100%;position:relative;overflow:hidden}.scene:active{cursor:grabbing}.scene-media{will-change:transform;background-position:50%;background-size:cover;position:absolute;top:-10%;bottom:-10%;left:-10%;right:-10%}.scene-shade{background:linear-gradient(#0005,#0000 62%,#000b 100%);position:absolute;top:0;bottom:0;left:0;right:0}.scene-copy{color:#fff;pointer-events:none;position:absolute;bottom:12vh;left:5vw}.scene-copy span{letter-spacing:.2em;font-size:10px}.scene-copy h2{letter-spacing:-.04em;margin:8px 0;font:300 clamp(38px,5vw,72px) Manrope}.scene-copy p{color:#ccc;margin:0}.hotspot{color:#fff;z-index:3;background:0 0;border:0;align-items:center;gap:12px;display:flex;position:absolute;transform:translate(-50%,-50%)}.hotspot i{border:2px solid #fff;border-radius:50%;width:16px;height:16px;animation:2s infinite pulse;position:relative;box-shadow:0 0 0 8px #fff3}.hotspot i:after{content:"";background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;top:4px;bottom:4px;left:4px;right:4px}.hotspot b{opacity:0;background:#111c;padding:8px 11px;font-size:12px;font-weight:400;transition:all .3s;transform:translate(-5px)}.hotspot:hover b,.hotspot:focus b{opacity:1;transform:none}@keyframes pulse{50%{box-shadow:0 0 0 14px #fff0}}.scene-nav{align-items:center;gap:5px;display:flex;position:absolute;bottom:5vh;right:5vw}.scene-nav button{color:#fff;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fff2;border:0;height:38px;padding:0 13px}.scene-nav button span{display:none}.scene-nav button:not(:first-child):not(:last-child){background:#fff5;width:28px;height:2px;padding:0}.scene-nav button.active{background:#fff;width:54px!important}.scene-nav svg{width:15px}.scene-help{color:#ddd;text-transform:uppercase;letter-spacing:.16em;gap:8px;font-size:9px;display:flex;position:absolute;top:110px;left:5vw}.zoom{display:flex;position:absolute;top:105px;right:5vw}.zoom button{color:#fff;background:#1117;border:0;width:38px;height:38px}.zoom svg{width:15px}.material-panel{z-index:10;background:#f4f3ef;width:min(500px,100%);height:100%;position:absolute;top:0;right:0;overflow:auto;box-shadow:-20px 0 50px #0005}.material-panel>img{object-fit:cover;width:100%;height:34%}.panel-close{background:#fff;border:0;border-radius:50%;width:42px;height:42px;position:absolute;top:20px;right:20px}.panel-content{padding:38px 45px}.panel-content>span{text-transform:uppercase;letter-spacing:.14em;font-size:10px}.panel-content h3{margin:10px 0;font:300 50px Manrope}.panel-content p{color:#555;line-height:1.65}.panel-content ul{flex-wrap:wrap;gap:6px;padding:0;display:flex}.panel-content li{border:1px solid #ccc;padding:7px 10px;font-size:11px;list-style:none}.panel-content dl{border-top:1px solid #ccc;margin:28px 0 0}.panel-content dl div{border-bottom:1px solid #ccc;padding:15px 0}.panel-content dt{text-transform:uppercase;letter-spacing:.15em;font-size:9px}.panel-content dd{color:#555;margin:6px 0 0;font-size:13px}.manifesto{grid-template-columns:1fr 2fr;gap:4vw;padding:14vw 8vw;display:grid}.manifesto h2{letter-spacing:-.055em;margin:0;font:300 clamp(45px,6vw,90px)/1.05 Manrope}.manifesto>div{grid-column:2;max-width:520px;margin-left:auto}.manifesto p{color:#555;font-size:18px;line-height:1.7}.text-link{background:0 0;border:0;border-bottom:1px solid;gap:30px;padding:10px 0;display:flex}.quote-cta{color:#fff;background:#151513;grid-template-columns:1.1fr 1fr;min-height:760px;display:grid}.cta-image{background:url(/images/showroom/showroom-roof4you-studio%20poza%201.jpg) 50%/cover}.quote-cta>div:last-child{flex-direction:column;justify-content:center;padding:10vw 8vw;display:flex}.quote-cta h2{letter-spacing:-.05em;margin:25px 0;font:300 clamp(45px,5vw,75px)/1.05 Manrope}.quote-cta p{color:#aaa;line-height:1.7}.quote-cta .button{align-self:flex-start}.site-footer{grid-template-columns:1fr 1fr 1fr;align-items:center;padding:65px 6vw;font-size:12px;display:grid}.site-footer p{color:#666;line-height:1.6}.site-footer>span{text-align:right;color:#888}.config-overlay{z-index:500;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0c0c0bd9;justify-content:center;align-items:center;padding:25px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.config{background:#f7f6f2;flex-direction:column;width:min(950px,100%);height:min(760px,95svh);display:flex}.config header{text-transform:uppercase;letter-spacing:.18em;border-bottom:1px solid #ddd;justify-content:space-between;align-items:center;height:70px;padding:0 35px;font-size:10px;display:flex}.config header button{background:0 0;border:0}.progress{background:#ddd;height:2px}.progress i{background:var(--red);height:100%;transition:.5s var(--ease);display:block}.config main{flex:1;padding:7vh 11%;overflow:auto}.config main em{text-transform:uppercase;letter-spacing:.16em;color:#777;font-size:10px;font-style:normal}.config main h2,.success h2{letter-spacing:-.04em;margin:18px 0 35px;font:300 clamp(34px,4vw,56px) Manrope}.choices{grid-template-columns:1fr 1fr;gap:10px;display:grid}.choices button{text-align:left;background:0 0;border:1px solid #ccc;justify-content:space-between;padding:18px;display:flex}.choices button svg{opacity:0;width:17px}.choices button.selected{color:#fff;background:#111;border-color:#111}.choices button.selected svg{opacity:1}.big-input{border-bottom:1px solid #aaa;align-items:end;max-width:400px;display:flex}.big-input input{background:0 0;border:0;outline:0;width:100%;font:300 80px Manrope}.big-input span{padding-bottom:20px;font-size:20px}.hint,.lead{color:#777}.drop{border:1px dashed #aaa;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-height:180px;display:flex;position:relative}.drop input{opacity:0;cursor:pointer;position:absolute;top:0;bottom:0;left:0;right:0}.drop span{color:#777;font-size:11px}.file{border-bottom:1px solid #ddd;padding:8px;font-size:12px}.file span{float:right}.fields{grid-template-columns:1fr 1fr;gap:18px;display:grid}.fields label{text-transform:uppercase;letter-spacing:.1em;font-size:10px}.fields input{background:0 0;border:0;border-bottom:1px solid #aaa;outline:0;width:100%;padding:10px 0;font-size:15px;display:block}.consent{gap:8px;margin-top:24px;font-size:11px;display:flex;text-transform:none!important}.error{color:#b00020;font-size:12px}.config footer{border-top:1px solid #ddd;justify-content:space-between;align-items:center;height:75px;padding:0 35px;display:flex}.config footer button{background:0 0;border:0;align-items:center;gap:10px;display:flex}.config footer button:disabled{opacity:.25}.config footer .next{color:#fff;background:#111;padding:14px 18px}.config footer svg{width:16px}.config footer span{font-size:11px}.success{text-align:center;max-width:550px;margin:auto;padding:40px}.success>span{color:#fff;background:#111;border-radius:50%;place-items:center;width:60px;height:60px;display:inline-grid}.success p{color:#666;line-height:1.6}@media (max-width:720px){.topbar{height:70px;padding:0 20px}.topbar nav{display:none}.menu-toggle{display:block}.mobile-menu{color:#111;background:#fff;flex-direction:column;padding:12px;display:flex;position:absolute;top:65px;right:18px}.mobile-menu button{text-align:left;background:0 0;border:0;padding:14px}.hero{min-height:620px;padding:0 24px 13vh}.hero h1{font-size:52px}.hero p{font-size:15px}.scroll{display:none}.showroom{min-height:650px}.scene-copy{bottom:15vh;left:24px}.scene-copy h2{font-size:39px}.scene-copy p{max-width:270px;font-size:13px}.scene-help{top:85px;left:24px}.zoom{top:80px;right:20px}.scene-nav{bottom:35px;right:20px}.hotspot b{display:none}.panel-content{padding:28px 25px}.panel-content h3{font-size:42px}.manifesto{padding:100px 25px;display:block}.manifesto h2{margin:25px 0 40px;font-size:45px}.quote-cta{display:block}.cta-image{height:50vh}.quote-cta>div:last-child{padding:80px 25px}.site-footer{grid-template-columns:1fr;gap:30px}.site-footer>span{text-align:left}.config-overlay{padding:0}.config{height:100svh}.config main{padding:5vh 25px}.choices,.fields{grid-template-columns:1fr}.config main h2{margin-bottom:25px;font-size:36px}.config footer{padding:0 18px}.config footer>span{display:none}.config footer .next{margin-left:auto}.material-panel>img{height:30%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.hero-bg{background-image:linear-gradient(90deg,#0009 0%,#0002 60%),url(/images/optimized/scene-main.webp)}.cta-image{background-image:url(/images/optimized/showroom-1.webp)}.logo{background:0 0;border-radius:0;flex:none;width:150px;height:76px;overflow:visible}.logo img{object-fit:contain;filter:drop-shadow(0 2px 10px #0000001f);width:100%;height:100%;display:block}.loader .logo{width:218px;height:112px}.site-footer .logo{width:178px;height:90px}.site-footer .logo img{filter:none}@media (max-width:720px){.topbar .logo{width:118px;height:52px}.loader .logo{width:180px;height:100px}}