:root{--u:calc(min(100vw,1920px)/1920);--header-h:calc(var(--u)*210);--bar-h:90px;--logo-scale:.6;--ink:#26272B;--blue:#8DA7FF;--line:#D9E5FF;--dark:#4D4E50;--paper:#F2F6FF}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;position:relative;overflow-x:hidden;color:var(--ink);background:#F2F6FF;font-family:'Cabinet Grotesk',system-ui,sans-serif;font-size:calc(var(--u)*18)}
body.page-home{background:#F9FBFF}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Crimson Pro',Georgia,serif;font-weight:500;margin:0}
body.app-page{padding-top:var(--header-h)}
.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg i{position:absolute;border-radius:50%;width:calc(var(--u)*662);height:calc(var(--u)*662);filter:blur(calc(var(--u)*164.5))}
main,.site-footer{position:relative;z-index:1}
.btn{display:inline-flex;transition: 0.3s ease-in-out;border:2px solid var(--blue);align-items:center;justify-content:center;height:calc(var(--u)*60);padding:0 calc(var(--u)*30);border-radius:10px;background:var(--blue);color:#fff;font:500 calc(var(--u)*18) 'Cabinet Grotesk',sans-serif;cursor:pointer}
.btn:hover{background:#FFF;border:2px solid var(--blue);color: var(--ink);}
.btn-soft{background:#E2EBFF;color:var(--ink)}
/* ---- navigacija ---- */
.site-header{--shift:calc((var(--header-h) - var(--bar-h))/2);position:fixed;z-index:100;top:0;left:0;right:0;height:var(--header-h);display:flex;align-items:center;justify-content:flex-end;padding:0 calc(var(--u)*52);pointer-events:none;transition:transform .3s ease;will-change:transform}
.site-header>*{pointer-events:auto}
.site-header::before{content:"";position:absolute;left:0;right:0;top:var(--shift);height:var(--bar-h);background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);opacity:0;transition:opacity .3s ease;z-index:-1}
.site-header.scrolled{transform:translateY(calc(var(--shift)*-1))}
.site-header.scrolled::before{opacity:1}
.logo-link{position:absolute;left:50%;top:50%;margin:calc(var(--u)*-57) 0 0 calc(var(--u)*-57)}
.logo-link img{width:calc(var(--u)*114);height:calc(var(--u)*114);transform-origin:center;transition:transform .3s ease}
.site-header.scrolled .logo-link img{transform:scale(var(--logo-scale))}
.top-nav{display:flex;align-items:center;gap:calc(var(--u)*58);font-size:calc(var(--u)*18)}
.cart{display:flex;align-items:center;gap:calc(var(--u)*13);font-weight:500}
.cart svg{width:calc(var(--u)*40);height:calc(var(--u)*38)}
/* ---- homepage ---- */
.hero{position:relative;height:calc(var(--u)*880);text-align:center;padding-top:calc(var(--u)*338)}
.hero h1{font-size:calc(var(--u)*96);line-height:calc(var(--u)*106)}
.mk{position:relative;display:inline-block;background:linear-gradient(148deg,#4D4E50 39%,#F4FAFF 121%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk::after{content:"";position:absolute;z-index:-1;left:calc(var(--u)*-6);right:calc(var(--u)*-4);top:calc(var(--u)*88);height:calc(var(--u)*24);background:url(assets/marker.svg) center/100% 100% no-repeat}
.hero p,.intro p{width:calc(var(--u)*560);margin:calc(var(--u)*24) auto 0;font-size:calc(var(--u)*22);line-height:calc(var(--u)*29)}
.hero .btn{margin-top:calc(var(--u)*32)}
.hp{position:absolute;object-fit:cover;border-radius:calc(var(--u)*22);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.intro{height:calc(var(--u)*602);text-align:center;padding-top:calc(var(--u)*89);overflow:hidden}
.intro h2,.gal h2{font-size:calc(var(--u)*68);line-height:calc(var(--u)*76)}
.chip{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u)*151);height:calc(var(--u)*71);margin-top:calc(var(--u)*32);border:calc(var(--u)*4.5) solid var(--blue);border-radius:calc(var(--u)*17);font-size:calc(var(--u)*26)}
.tabs{margin-top:calc(var(--u)*100);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 20.6%,#000 79.4%,transparent 92%);mask-image:linear-gradient(90deg,transparent 8%,#000 20.6%,#000 79.4%,transparent 92%)}
.tabs-track{display:flex;width:max-content;animation:tabs-scroll 45s linear infinite;will-change:transform}
.tabs-set{display:flex;flex:none}
.tabs-set span{flex:none;display:flex;align-items:center;height:calc(var(--u)*76);margin-right:calc(var(--u)*10);padding:0 calc(var(--u)*38);border-radius:999px;color:#fff;font-size:calc(var(--u)*28);line-height:1;white-space:nowrap}
.tabs-set span:nth-child(1){background:#A6A6FF}
.tabs-set span:nth-child(2){background:#9DB3FF}
.tabs-set span:nth-child(3){background:#A7BCFF}
.tabs-set span:nth-child(4){background:#B9B9FF}
.tabs-set span:nth-child(5){background:#8CA8FF}
.tabs-set span:nth-child(6){background:#AFC2FF}
.tabs-set span:nth-child(7){background:#9EC3FF}
.tabs-set span:nth-child(8){background:#A7B0FF}
.tabs-set span:nth-child(9){background:#A7C6FF}
.tabs-set span:nth-child(10){background:#8CA8FF}
@keyframes tabs-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tabs-track{animation:none}}
.gal{display:grid;grid-template-columns:calc(var(--u)*698) calc(var(--u)*880);padding:calc(var(--u)*160) calc(var(--u)*119) calc(var(--u)*80) calc(var(--u)*223)}
.gal-t{position:sticky;top:calc(var(--u)*110);align-self:start;padding-top:calc(var(--u)*11)}
.gal h2{line-height:calc(var(--u)*70)}
.gal-t .btn{margin-top:calc(var(--u)*19)}
.pg{position:relative;display:flex;gap:calc(var(--u)*20);height:calc(var(--u)*1302);overflow:hidden}
.pg>div{display:flex;flex-direction:column;gap:calc(var(--u)*20);width:calc(var(--u)*430)}
.pg img{width:100%;object-fit:cover;border-radius:calc(var(--u)*30)}
.qual{position:relative;height:calc(var(--u)*560)}
.qc{position:absolute;left:50%;top:calc(var(--u)*121);width:calc(var(--u)*381);height:calc(var(--u)*370);margin-left:calc(var(--u)*-190.5);background:#fff;border:1px solid var(--line);border-radius:calc(var(--u)*30);z-index:2}
.qc h3{position:absolute;top:calc(var(--u)*54);left:calc(var(--u)*20);right:calc(var(--u)*20);text-align:center;font-size:calc(var(--u)*42);line-height:calc(var(--u)*46)}
.qc img{position:absolute;left:calc(var(--u)*29);top:calc(var(--u)*160);width:calc(var(--u)*323);height:calc(var(--u)*181);border-radius:calc(var(--u)*16);object-fit:cover}
.qc.l,.qc.r{z-index:1;filter:blur(2px);opacity:.75}
.qc.l{transform:translate(calc(var(--u)*-270),calc(var(--u)*57)) rotate(-15deg) scale(.75)}
.qc.r{transform:translate(calc(var(--u)*255),calc(var(--u)*57)) rotate(15deg) scale(.75)}
.qc{transition:transform .9s cubic-bezier(.65,0,.35,1),filter .9s ease,opacity .9s ease}
.qc.c{transform:none;filter:none;opacity:1;z-index:2}
@media (prefers-reduced-motion:reduce){.qc{transition:none}}
.steps{position:relative;margin:calc(var(--u)*132) calc(var(--u)*80) 0;height:calc(var(--u)*360);border-radius:calc(var(--u)*60);background:#fff;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(var(--u)*98) calc(var(--u)*110) 0 calc(var(--u)*99)}
.st{display:flex;gap:calc(var(--u)*14)}
.st b{font:400 calc(var(--u)*290)/.8 'Crimson Pro',serif;line-height:54%;color:#D2E0FF;}
.st h3{font:italic 500 calc(var(--u)*50)/calc(var(--u)*40) 'Crimson Pro',serif;margin:calc(var(--u)*4) 0 calc(var(--u)*22)}
.st p{margin:0;font-size:calc(var(--u)*18);line-height:calc(var(--u)*20)}
/* ---- napravi ---- */
.np{display:grid;grid-template-columns:calc(var(--u)*535) calc(var(--u)*191) calc(var(--u)*520);padding:calc(var(--u)*245) 0 calc(var(--u)*100) calc(var(--u)*300);min-height:calc(var(--u)*1029);align-content:start}
.np h1,.kt h1{font-size:calc(var(--u)*96);line-height:calc(var(--u)*100)}
.np .btn{margin-top:calc(var(--u)*55)}
.lab{display:block;font-size:calc(var(--u)*18);line-height:calc(var(--u)*20);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--blue)}
.np .l1 .lab{margin-top:calc(var(--u)*54)}
.qty{display:flex;align-items:center;margin-top:calc(var(--u)*17)}
.qty button{width:calc(var(--u)*31);height:calc(var(--u)*69);border:1px solid var(--line);background:#fff;color:var(--blue);font-size:calc(var(--u)*26);cursor:pointer;border-radius:calc(var(--u)*10)}
.qty output{width:calc(var(--u)*76);height:calc(var(--u)*70);margin:0 calc(var(--u)*5);background:#fff;border-radius:calc(var(--u)*8);display:grid;place-items:center;font-size:calc(var(--u)*36)}
.qty input{width:calc(var(--u)*359);height:calc(var(--u)*69);margin-left:calc(var(--u)*27);padding:0 calc(var(--u)*30);border:1px solid var(--line);border-radius:calc(var(--u)*17.5);background:#fff;font:calc(var(--u)*17) 'Cabinet Grotesk',sans-serif;color:var(--ink);outline:0}
.qty input::placeholder,.kt .f::placeholder{color:#515C75}
.price{font-size:calc(var(--u)*112);line-height:calc(var(--u)*112);margin-top:calc(var(--u)*18)}
.pn{font-size:calc(var(--u)*18);color:#A7AEC8;margin-top:calc(var(--u)*18)}
.add{width:calc(var(--u)*94);height:calc(var(--u)*68);margin-top:calc(var(--u)*62);border:1px solid var(--dark);border-radius:calc(var(--u)*9);background:#F2F6FF;display:grid;place-items:center;cursor:pointer}
.add svg{width:calc(var(--u)*40);height:calc(var(--u)*38)}
.okmsg{margin-top:calc(var(--u)*16);font-size:calc(var(--u)*18)}.okmsg a{color:var(--blue);text-decoration:underline}
.stg{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:calc(var(--u)*50);max-width:calc(var(--u)*1100)}
.stg div{position:relative;width:96px;height:96px}.stg img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.stg button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;line-height:1}
/* ---- kontakt ---- */
.kt{text-align:center;padding:calc(var(--u)*225) 0 calc(var(--u)*100);min-height:calc(var(--u)*1029)}
.kt p{margin:calc(var(--u)*26) 0 0;font-size:calc(var(--u)*22)}
.kt form{width:calc(var(--u)*589);margin:calc(var(--u)*40) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10)}
.kt .f{grid-column:span 2;height:calc(var(--u)*79);padding:0 calc(var(--u)*30);border:1px solid var(--line);border-radius:calc(var(--u)*17.5);background:#fff;font:calc(var(--u)*17) 'Cabinet Grotesk',sans-serif;color:var(--ink);outline:0}
.kt .f.h{grid-column:span 1}.kt textarea.f{height:calc(var(--u)*179);padding-top:calc(var(--u)*30);resize:vertical}
.kt .f:focus{border-color:var(--blue)}
.snd{grid-column:span 2;justify-self:center;width:calc(var(--u)*123);height:calc(var(--u)*58);margin-top:calc(var(--u)*21);border:1px solid var(--dark);border-radius:calc(var(--u)*9);background:#F2F6FF;font:500 calc(var(--u)*18) 'Cabinet Grotesk',sans-serif;cursor:pointer}
/* ---- versandkosten ---- */
.page-versand .kt p{line-height:calc(var(--u)*32)}
.vk{display:grid;grid-template-columns:calc(var(--u)*617) calc(var(--u)*617);gap:calc(var(--u)*43);justify-content:center;margin-top:calc(var(--u)*71)}
.vc .t{height:calc(var(--u)*107);display:grid;place-items:center;background:#fff;border-radius:calc(var(--u)*22) calc(var(--u)*22) 0 0;font-size:calc(var(--u)*22);font-weight:500}
.vc .b{display:grid;grid-template-columns:calc(var(--u)*239) 1fr;height:calc(var(--u)*109);margin-top:calc(var(--u)*6);background:#fff;border-radius:0 0 calc(var(--u)*22) calc(var(--u)*22);overflow:hidden}
.vc .b b{display:grid;place-items:center;background:#ECF1FF;border-right:1px solid var(--line);font-size:calc(var(--u)*40);font-weight:500}
.vc .b span{display:grid;place-items:center;font-size:calc(var(--u)*22)}
.vn{margin-top:calc(var(--u)*38);font-size:calc(var(--u)*18);line-height:calc(var(--u)*36);letter-spacing:.3em}.vn b{font-weight:700}.vn i{font-style:normal;margin:0 calc(var(--u)*28)}
/* ---- danke ---- */
.dk p{line-height:calc(var(--u)*32)}
.dk-no{margin-top:calc(var(--u)*46)}
.dk-no b{display:block;margin-top:calc(var(--u)*10);font-size:calc(var(--u)*64);line-height:calc(var(--u)*70);font-weight:500}
.dk-card{width:calc(var(--u)*760);margin:calc(var(--u)*40) auto 0;text-align:left}
.dk-card .t{height:calc(var(--u)*80)}
.dk-rows{margin-top:calc(var(--u)*6);background:#fff;border-radius:0 0 calc(var(--u)*22) calc(var(--u)*22);overflow:hidden}
.dk-row{display:grid;grid-template-columns:calc(var(--u)*239) 1fr;min-height:calc(var(--u)*64)}
.dk-row+.dk-row{border-top:1px solid var(--line)}
.dk-row b{display:flex;align-items:center;padding:calc(var(--u)*8) calc(var(--u)*30);background:#ECF1FF;font-size:calc(var(--u)*20);font-weight:500}
.dk-row span{display:flex;align-items:center;padding:calc(var(--u)*8) calc(var(--u)*30);font-size:calc(var(--u)*22);word-break:break-all}
.dk-hint{max-width:calc(var(--u)*760);margin:calc(var(--u)*28) auto 0!important;font-size:calc(var(--u)*18);line-height:calc(var(--u)*26)!important;color:#515C75}
.dk .btn{margin-top:calc(var(--u)*36)}
/* ---- footer ---- */
.site-footer{height:calc(var(--u)*260);margin-top:calc(var(--u)*160);border-radius:calc(var(--u)*60) calc(var(--u)*60) 0 0;background:var(--dark);color:#F2F6FF;display:flex;align-items:center;gap:calc(var(--u)*40);padding:0 calc(var(--u)*141) 0 calc(var(--u)*120);font-size:calc(var(--u)*18);overflow:hidden}
.site-footer::after{content:"";position:absolute;left:calc(var(--u)*1278);top:calc(var(--u)*181);width:calc(var(--u)*834);height:calc(var(--u)*476);border-radius:calc(var(--u)*141);background:#F0F5FF;opacity:.63;filter:blur(calc(var(--u)*81));transform:rotate(-15deg);pointer-events:none}
.site-footer>*{position:relative;z-index:1;}
.f-logo{width:calc(var(--u)*160);height:calc(var(--u)*160);margin-right:calc(var(--u)*73)}
.site-footer .btn{background:var(--blue);color:#fff}.site-footer .btn:hover{background:#FFF;color:var(--ink)}
.copyright{margin-left:auto;}
.page-napravi .site-footer,.page-kontakt .site-footer,.page-versand .site-footer,.page-danke .site-footer{margin-top:0}
/* ---- pozadinske mrlje ---- */
.page-home .bg i:nth-child(1){left:calc(var(--u)*1664);top:calc(var(--u)*1038);background:#8F97F3;opacity:.34}
.page-home .bg i:nth-child(2){left:calc(var(--u)*-562);top:calc(var(--u)*1812);background:#896EDB;opacity:.36}
.page-home .bg i:nth-child(3){left:calc(var(--u)*486);top:calc(var(--u)*3402);width:calc(var(--u)*1008);height:calc(var(--u)*420);border-radius:calc(var(--u)*210);background:#8FB7F3;opacity:.2}
.page-napravi .bg i:nth-child(1){left:calc(var(--u)*1613);top:calc(var(--u)*819);background:#896EDB;opacity:.36}
.page-napravi .bg i:nth-child(2){left:calc(var(--u)*-521);top:calc(var(--u)*34);background:#6EADFF;opacity:.29}
.page-kontakt .bg i:nth-child(1),.page-versand .bg i:nth-child(1),.page-danke .bg i:nth-child(1),.app-page .bg i:nth-child(1){left:calc(var(--u)*-483);top:calc(var(--u)*819);background:#896EDB;opacity:.36}
.page-napravi .bg i:nth-child(3),.page-kontakt .bg i:nth-child(2),.page-versand .bg i:nth-child(2),.page-versand .bg i:nth-child(3),.page-danke .bg i:nth-child(2),.page-danke .bg i:nth-child(3),.app-page .bg i:nth-child(2),.app-page .bg i:nth-child(3){display:none}
/* ---- mobitel / tablet ---- */
@media(max-width:900px){
:root{--u:1px;--header-h:96px;--bar-h:72px;--logo-scale:.8}
body{font-size:16px}
.site-header{padding:0 18px}.logo-link{margin:-36px 0 0 -36px}.logo-link img{width:72px;height:72px}
.top-nav{gap:16px;font-size:14px}.cart svg{width:28px;height:27px}
.hero{height:auto;padding:150px 22px 100px}.hero h1{font-size:44px;line-height:50px}.mk::after{top:40px;height:14px}
.hero p,.intro p{width:90%;font-size:17px;line-height:23px}.hero .btn,.btn{height:52px;font-size:16px;padding:0 24px}
    .hero p br, .intro p br{display:none;}
.hp{display:none}.intro{height:auto;padding:30px 0 50px}.intro h2,.intro p{padding:0 22px}.tabs{margin-top:40px}.tabs-set span{height:52px;padding:0 26px;font-size:19px;margin-right:8px}.intro h2,.gal h2{font-size:38px;line-height:44px}
.chip{width:120px;height:56px;font-size:20px}
.gal{display:block;padding:80px 22px 40px}.gal-t{position:static;text-align:center;margin-bottom:28px}
.pg{height:auto;gap:10px}.pg>div{width:calc(50% - 5px);gap:10px}.pg img{border-radius:18px;height:auto!important;aspect-ratio:3/4}
.qual{height:auto;padding:20px 22px;display:grid;overflow:hidden}.qc{grid-area:1/1;justify-self:center;position:relative;left:0;top:0;margin:0 auto;width:min(340px,100%);height:330px}
.qc.l,.qc.r,.qc.c{filter:none;opacity:1;z-index:1;transition:transform .6s cubic-bezier(.65,0,.35,1),visibility 0s}
.qc.l{transform:translateX(calc(100% + 24px));visibility:hidden;transition:none}
.qc.r{transform:translateX(calc(-100% - 24px));visibility:hidden;transition:transform .6s cubic-bezier(.65,0,.35,1),visibility 0s .6s}
.qc.c{transform:none;visibility:visible}
.qc h3{font-size:30px;line-height:34px;top:40px}.qc img{left:20px;top:130px;width:calc(100% - 40px);height:160px}
.steps{display:block;height:auto;margin:40px 16px 0;padding:30px 22px;border-radius:32px}.st{margin-bottom:30px}.st b{font-size:120px}.st h3{font-size:34px;line-height:32px}.st p{font-size:16px;line-height:21px}
.st b{line-height:60%;}
.np{display:block;padding:130px 22px 60px;min-height:0}.np h1,.kt h1{font-size:46px;line-height:50px}.np .btn{margin-top:30px}
.lab{font-size:14px}.qty input{width:calc(100% - 190px);min-width:120px;height:56px;font-size:15px}.qty button{height:56px;width:34px}.qty output{height:56px;width:60px;font-size:28px}
.np .r1{margin-top:40px}.price{font-size:64px;line-height:70px}.add{width:80px;height:58px;margin-top:24px}
.kt{padding:130px 22px 60px}.kt p{font-size:17px}.kt form{width:100%}.kt .f{height:60px;font-size:16px}.kt textarea.f{height:150px}.snd{width:140px;height:52px}
.vk{grid-template-columns:1fr;gap:16px;margin-top:30px}.vc .t{height:80px;font-size:17px;padding:0 12px}.vc .b{height:84px;grid-template-columns:40% 1fr}.vc .b b{font-size:30px}.vc .b span{font-size:16px}.vn{font-size:14px;letter-spacing:.15em;line-height:26px}.vn i{margin:0 10px}.dk-card{width:100%}.dk-row{grid-template-columns:38% 1fr}.dk-row b,.dk-row span{padding:8px 14px;font-size:15px}.dk-no b{font-size:40px;line-height:46px}
.site-footer{height:auto;flex-wrap:wrap;gap:16px 24px;padding:30px 22px;margin-top:60px;border-radius:28px 28px 0 0}.f-logo{width:84px;height:84px;margin-bottom:20px;}.copyright{width:100%;margin-top:10px}
}