/* Sedmo Nebo — an open sky, with the original product scene and content. */
:root{--bg:#f2f6fb;--surface:#fff;--ink:#102c60;--acc:#2863eb;--ink-3:#506788}
body{background:var(--bg)}
.atmosphere,.noise{display:none}
.nav.lg{background:rgba(246,250,255,.94);border-color:#fff9;box-shadow:0 8px 40px #061d4018;backdrop-filter:blur(20px)}
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(155deg,#061f53 0%,#1454ae 44%,#63b2ef 80%,#d9eefa 100%);color:white;min-height:880px;min-height:100svh;padding:170px max(40px,calc((100vw - 1360px)/2)) 90px;grid-template-columns:1.08fr 1fr;gap:0}
.hero::after{content:'';position:absolute;z-index:0;pointer-events:none;inset:auto 0 0;height:100px;background:linear-gradient(transparent,#f2f6fb)}
.sky-world{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sky-number{position:absolute;right:-.035em;top:10%;font:600 clamp(340px,48vw,760px)/1 var(--sans);letter-spacing:-.12em;color:#ffffff0b;user-select:none}
.sky-orbit{position:absolute;width:75vw;height:75vw;min-width:650px;min-height:650px;right:-16vw;top:12%;border:1px solid #ffffff30;border-radius:50%;transform:rotate(-25deg) scaleY(.68)}
.sky-orbit::after{content:'';position:absolute;inset:12%;border:1px solid #ffffff20;border-radius:50%}
.sky-cloud{position:absolute;width:650px;height:260px;background:radial-gradient(ellipse at 22% 65%,#fff 0 12%,transparent 34%),radial-gradient(ellipse at 43% 44%,#fff 0 16%,transparent 39%),radial-gradient(ellipse at 66% 57%,#f6fbff 0 19%,transparent 42%),radial-gradient(ellipse at 83% 71%,#fff 0 9%,transparent 30%);filter:blur(18px);opacity:.66}
.sky-cloud--one{right:-180px;top:16%;transform:rotate(-12deg)}
.sky-cloud--two{right:1%;bottom:4%;width:820px;height:240px;opacity:.8}
.sky-cloud--three{left:-380px;bottom:4%;opacity:.25}
.hero-text{position:relative;z-index:2;max-width:690px}
.hero-title{font-size:clamp(64px,6.7vw,106px);font-weight:500;letter-spacing:-.07em;line-height:.99;color:#fff;text-wrap:balance}
.hero-title em{color:#b8e3ff;font-weight:400;font-style:normal}
.hero-sub{color:#e0edff;max-width:39ch;margin-top:32px;font-size:16px;line-height:1.8}
.hero .btn-primary{background:#fff;color:#123971;box-shadow:0 10px 30px #06214d20}
.hero .btn-ghost.lg{color:#fff;border-color:#ffffff60;background:#ffffff08}
.hero .btn{border-radius:999px;padding:17px 25px}
.hero-stats{border-color:#ffffff38;max-width:470px;margin-top:52px}
.hero .stat-num{font-size:36px;color:#fff;letter-spacing:-.05em}
.hero .stat-label{color:#d3e8ff;font-family:var(--sans);font-size:10px;letter-spacing:.04em}
.hero-scene{z-index:1;overflow:visible;height:650px;max-width:100%;background:transparent;filter:drop-shadow(0 24px 20px #061d5320)}
.hero-scene canvas{z-index:1}
.scene-fallback{overflow:hidden}
.scene-fallback img{object-fit:contain;height:65%;mix-blend-mode:multiply}
.hero-scene .scene-motion{position:absolute;bottom:8px;right:10px;z-index:4;display:block;width:42px;height:42px;background:#ffffffdf;color:#173d73;border-color:#ffffff80;box-shadow:0 3px 15px #06214d15}
.hero-scene .scene-motion[aria-pressed=true]{background:#cbe6ff}
.section{padding:120px max(40px,calc((100vw - 1280px)/2))}
.h2,.shop-h{font-family:var(--sans);font-weight:500;font-size:clamp(44px,5.5vw,80px);line-height:1.04;letter-spacing:-.06em}
.h2 em,.shop-h em{font-family:inherit;font-style:normal;color:#3275d4}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:#456085}
#manifest{background:#f2f6fb}.manifest{gap:80px}.manifest-text{font-family:var(--sans);font-size:clamp(22px,2.6vw,36px);line-height:1.5;letter-spacing:-.03em}.manifest-text strong{color:#2063bd}
#proizvodi{background:#e7eff8;border-radius:48px 48px 0 0}
.cats{gap:0;border-top:1px solid #aec5df;grid-template-columns:repeat(6,minmax(0,1fr))}
.cat.lg{grid-column:span 2;border:0;border-bottom:1px solid #aec5df;border-right:1px solid #aec5df;border-radius:0;min-height:260px;background:transparent;padding:36px;box-shadow:none;transition:background .3s}
.cat.lg:nth-child(3){border-right:0}.cat.lg:nth-child(4),.cat.lg:nth-child(5){grid-column:span 3}.cat.lg:nth-child(5){border-right:0}
.cat.lg:hover{background:#f8fbff}.cat-name{font-family:var(--sans);font-size:32px;font-weight:500;letter-spacing:-.045em}.cat-name em{font-style:normal}.cat-deco{color:#254b7b09;font-family:var(--sans);font-size:180px}.cat-arrow{border-radius:50%;background:#fff;width:44px;height:44px}.cat-meta{border:0}
.shopband{background:#123f89;position:relative;overflow:hidden;border:0;padding-top:110px;padding-bottom:110px}
.shopband::before{content:'07';position:absolute;right:0;bottom:-.22em;font:600 430px/1 var(--sans);letter-spacing:-.1em;color:#ffffff06;pointer-events:none}
.shopband .shop-h,.shopband .eyebrow{color:white}.shopband .shop-h em{color:#94cbff}.shopband .shop-p,.shopband .shop-note{color:#d1e4ff}.shopband .shop-note a{color:white}.shopband .shop-status{color:#c3dcff}.shop-btn{color:#123f89;background:#fff;border:0;border-radius:999px;box-shadow:none}.shop-btn::before{display:none}
.origins-list{border-radius:0;border-left:0;border-right:0;background:transparent}.origin{padding:32px 18px}.origin-name{font-family:var(--sans);letter-spacing:-.04em}
.pillar{background:transparent;border:0;border-top:1px solid #b9cce2;border-radius:0;padding:24px 8px}
#kontakt{background:linear-gradient(145deg,#e4effb,#f8fbff)}
.foot{background:#e4effb}
@media(min-width:1600px){.hero-scene{height:720px}}
@media(max-width:1100px){.hero{padding-left:32px;padding-right:32px}.hero-title{font-size:70px}.hero-scene{height:520px}.section{padding:90px 32px}}
@media(max-width:860px){.hero{padding:140px 24px 55px;min-height:auto;gap:0}.hero-text{display:contents}.hero-title{font-size:clamp(58px,10vw,88px);max-width:700px}.hero-sub{max-width:48ch;margin-top:24px}.hero-scene{height:440px;margin-top:5px;width:100%;max-width:600px}.hero-stats{max-width:none;margin-top:8px}.sky-number{top:30%;font-size:700px;right:-30px}.sky-cloud--one{top:40%}.hero::after{height:55px}.manifest{gap:30px}.cats{grid-template-columns:1fr 1fr}.cat.lg,.cat.lg:nth-child(4),.cat.lg:nth-child(5){grid-column:span 1;border-right:0}.cat.lg:nth-child(odd){border-right:1px solid #aec5df}.cat.lg:last-child{grid-column:span 2;border-right:0}.cat-name{font-size:28px}.section{padding:75px 24px}}
@media(max-width:540px){.hero{padding-top:132px}.hero-title{font-size:clamp(48px,12vw,64px)}.hero-sub{font-size:15px}.hero .btn{padding:14px 18px}.hero-scene{height:340px;margin-top:20px}.hero .stat-num{font-size:30px}.hero .stat-label{font-size:9px}.hero-stats{gap:12px}.sky-cloud--two{right:-240px;width:650px}.cat.lg{min-height:205px;padding:24px 16px}.cat-name{font-size:25px}.h2,.shop-h{font-size:46px}#proizvodi{border-radius:28px 28px 0 0}.manifest-text{font-size:24px}.sky-orbit{right:-450px;top:38%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sky-cloud{animation:none}}
/* Keep the figures readable where the cloud bank passes behind the text. */
.hero-stats{background:#103c7d80;padding:22px 24px;border:1px solid #ffffff26;border-radius:18px;backdrop-filter:blur(12px)}
.hero .stat-label{color:#eef6ff}
/* Cloud edition: remove graphic symbols and give the content physical depth. */
.sky-number,.sky-orbit,.hero-decoration{display:none}
.hero-scene{filter:drop-shadow(0 28px 26px #0c39822b)}
.sky-cloud--two{bottom:-5%;opacity:.32}
#proizvodi{background:linear-gradient(#e7eff8,#d8eafa 65%,#edf5fc);overflow:visible}
.cats{border:0;gap:24px 26px;perspective:1400px}
.cat.lg,.cat.lg:nth-child(odd),.cat.lg:nth-child(3),.cat.lg:nth-child(4),.cat.lg:nth-child(5){border:0;background:transparent url('cloud-card.svg') center/100% 100% no-repeat;border-radius:0;box-shadow:none;min-height:285px;padding:100px 46px 48px;overflow:visible;filter:drop-shadow(0 22px 13px #3b679e26);transform-style:preserve-3d;transition:transform .45s ease,filter .45s ease,translate .45s ease}
.cat.lg:hover,.cat.lg:focus-visible{background:transparent url('cloud-card.svg') center/100% 100% no-repeat;translate:0 -12px;filter:drop-shadow(0 36px 19px #3b679e36)}
.cat-deco{display:none}.cat-content{position:relative;z-index:1;transform:translateZ(24px);width:100%}.cat-name{font-size:clamp(24px,2.25vw,33px)}.cat-meta{margin-top:22px}.cat-arrow{background:#e5f0fc;border:1px solid #c3d8f0;box-shadow:0 3px 0 #b8cee5}
.cat.lg::before,.cat.lg::after{display:none}
#shop{clip-path:none;margin:75px max(24px,calc((100vw - 1330px)/2)) 115px;border-radius:52px;overflow:visible;padding:0;background:radial-gradient(ellipse at 20% 0%,#5892df70,transparent 65%),linear-gradient(145deg,#1d55a6,#123a79);border:1px solid #92c5ff80;box-shadow:0 3px 0 #749bd4,0 9px 0 -2px #376cb4,0 18px 0 -6px #1f4f98,0 48px 48px -20px #1a427757,inset 0 1px 0 #d7eaff80;transform-style:preserve-3d;animation:shopFloat 8s ease-in-out infinite}
#shop::before{content:'';position:absolute;left:4%;right:4%;bottom:-80px;height:110px;background:radial-gradient(ellipse,#24518838,transparent 65%);filter:blur(15px);transform:translateZ(-40px);pointer-events:none}
#shop::after{display:none}
#shop .shopband-inner{transform:translateZ(34px);padding:95px 65px}
#shop .shop-actions{transform:translateZ(22px)}
@keyframes shopFloat{0%,100%{translate:0 0}50%{translate:0 -13px}}
@media(max-width:1100px){.cat.lg{padding:90px 30px 42px;min-height:265px}.cats{gap:18px}}
@media(max-width:860px){.cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cat.lg{padding:88px 25px 42px;min-height:260px}.cat.lg:last-child{grid-column:span 2;max-width:480px;width:100%;justify-self:center}#shop .shopband-inner{padding:65px 35px}#shop{margin:50px 20px 85px;border-radius:36px}}
@media(max-width:540px){.cats{grid-template-columns:1fr;gap:12px}.cat.lg,.cat.lg:nth-child(4),.cat.lg:nth-child(5){grid-column:span 1;min-height:265px;padding:92px 42px 45px;max-width:400px;width:100%;justify-self:center}.cat-name{font-size:29px}.cat-meta{margin-top:15px}.hero-scene{height:370px}#shop .shopband-inner{padding:56px 25px}#shop .shop-h{font-size:40px}}
@media(prefers-reduced-motion:reduce){#shop{animation:none}.cat.lg:hover,.cat.lg:focus-visible{translate:none}}
.cat.lg{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Smooth cloud surfaces and a consistent, safe text area. */
.section .eyebrow,.shopband .eyebrow,.chapter-rail{display:none}
.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 22px;align-items:center}
#proizvodi .cat.lg{grid-column:span 2;min-width:0;min-height:0;height:auto;aspect-ratio:1.44;padding:0;display:grid;place-items:center;background:transparent url('cloud-card.svg') center/100% 100% no-repeat;filter:drop-shadow(0 20px 15px #35619825);animation:categoryFloat 7s ease-in-out infinite;isolation:isolate}
#proizvodi .cat.lg:nth-child(4){grid-column:2 / span 2}#proizvodi .cat.lg:nth-child(5){grid-column:4 / span 2}
#proizvodi .cat.lg:nth-child(2n){animation-delay:-2.3s}#proizvodi .cat.lg:nth-child(3n){animation-delay:-4.6s}
#proizvodi .cat.lg.cloud-ready,#proizvodi .cat.lg.cloud-ready:hover{background:none}
.cloud-card-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#proizvodi .cat-content{margin:0;width:66%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;transform:translateY(8px) translateZ(20px)}
#proizvodi .cat-name{width:100%;font-size:clamp(21px,1.85vw,28px);line-height:1.13;letter-spacing:-.045em;white-space:normal;overflow-wrap:normal;text-wrap:balance}
#proizvodi .cat-name em{display:inline}
#proizvodi .cat-meta{padding:0;margin:0;display:flex;justify-content:center;border:0}
#proizvodi .cat-arrow{width:34px;height:34px;background:#e9f3ffb8;box-shadow:0 2px 3px #6786aa26;border:1px solid #aec6e34d}
#proizvodi .cat.lg:hover{filter:drop-shadow(0 26px 18px #35619838)}
@keyframes categoryFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:1000px){.cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}#proizvodi .cat.lg:nth-child(n){grid-column:span 2;width:100%;max-width:none}#proizvodi .cat.lg:last-child{grid-column:2 / span 2}#proizvodi .cat-name{font-size:25px}}
@media(max-width:540px){.cats{grid-template-columns:minmax(0,1fr);gap:10px}#proizvodi .cat.lg:nth-child(n){grid-column:1;max-width:420px;justify-self:center}#proizvodi .cat-name{font-size:25px}#proizvodi .cat-content{width:64%;gap:12px}}
@media(prefers-reduced-motion:reduce){#proizvodi .cat.lg{animation:none;translate:none}}
#proizvodi .cat.lg{grid-template-columns:minmax(0,1fr);justify-content:normal}
/* Compact section rhythm; larger clouds within shorter card viewports. */
.section,#manifest{padding-top:56px;padding-bottom:56px}
.origins-head{margin-bottom:28px;gap:36px}
#vrijednosti>div:first-child{margin-bottom:28px!important}
.contact{padding:8px 0;gap:40px}
#shop{margin-top:32px;margin-bottom:44px}
#shop .shopband-inner{padding-top:56px;padding-bottom:56px}
#proizvodi{padding-top:48px;padding-bottom:40px}
#proizvodi .products-heading{margin-bottom:12px!important}
#proizvodi .cats{row-gap:4px;column-gap:20px}
#proizvodi .cat.lg{aspect-ratio:1.85}
#proizvodi .cat-content{width:60%;gap:8px;transform:translateY(7px) translateZ(20px)}
#proizvodi .cat-name{font-size:clamp(21px,1.75vw,26px);line-height:1.12;min-height:2.24em;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center;column-gap:.22em}
#proizvodi .cat-arrow{width:30px;height:30px}
@media(max-width:1000px){.section,#manifest{padding-top:44px;padding-bottom:44px}#proizvodi .cats{gap:4px 16px}#proizvodi .cat-name{font-size:24px}#shop .shopband-inner{padding-top:44px;padding-bottom:44px}.contact{gap:28px}.origins-head{gap:24px}}
@media(max-width:540px){.section,#manifest{padding-top:36px;padding-bottom:36px}#proizvodi{padding-top:36px;padding-bottom:28px}#proizvodi .products-heading{margin-bottom:8px!important}#proizvodi .cats{gap:0}#proizvodi .cat.lg{aspect-ratio:1.8}#proizvodi .cat-content{width:60%;gap:6px}#proizvodi .cat-name{font-size:23px}#shop{margin-top:24px;margin-bottom:32px}#shop .shopband-inner{padding-top:36px;padding-bottom:36px}.contact{padding:0}.origins-head{margin-bottom:22px}.contact-stage{margin-bottom:18px}}
/* Closed dialogs must not remain in keyboard navigation or the accessibility tree. */
#legalModal[hidden],#productModal[hidden]{display:none!important}
/* A distant cloud shadow travels behind the content, with long quiet intervals. */
.sky-world::after{content:'';position:absolute;left:-85%;top:0;width:80%;height:85%;pointer-events:none;background:radial-gradient(ellipse at 45% 50%,#08275d30,transparent 67%);transform:translate3d(0,-20%,0) rotate(-18deg);opacity:0;animation:skyShade 32s linear 5s infinite}
@keyframes skyShade{0%,8%{opacity:0;transform:translate3d(0,-20%,0) rotate(-18deg)}18%{opacity:.8}43%{opacity:.65}55%,100%{opacity:0;transform:translate3d(250%,30%,0) rotate(-18deg)}}
.nav-mark-glyph{position:relative}
.logo-leaf-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nav-mark:hover .nav-mark-glyph img{transform:none}
.logo-leaf{transform-box:fill-box;transform-origin:30% 95%}
.nav-mark:is(:hover,:focus-visible) .logo-leaf{animation:logoLeafBreeze 1.25s ease-out}
@keyframes logoLeafBreeze{0%,100%{transform:rotate(0)}18%{transform:rotate(22deg)}38%{transform:rotate(-14deg)}58%{transform:rotate(9deg)}78%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.sky-world::after,.nav-mark:is(:hover,:focus-visible) .logo-leaf{animation:none}}

/* One content rail across the hero, sections and footer at every breakpoint. */
:root{--page-gutter:max(40px,calc((100vw - 1280px)/2))}
.hero,.section,.foot{padding-inline:var(--page-gutter)}
.foot::before{left:var(--page-gutter);right:var(--page-gutter)}
.pillar{padding-inline:0}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hero-stats>div{padding-right:0}
/* Equal outside tracks keep the logo centred even when the controls differ. */
.nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px}
.nav>.lang-toggle{justify-self:start}
.nav>.nav-right{justify-self:end}
.nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto repeat(2,minmax(0,1fr))}
.nav-link{text-align:center;white-space:nowrap}
@media(max-width:1100px){:root{--page-gutter:32px}}
@media(max-width:860px){:root{--page-gutter:24px}.nav-links{display:flex}}
@media(max-width:540px){.nav{gap:8px}.hero-stats{gap:12px}.foot-words{text-align:left}}
@media(min-width:861px) and (max-width:1000px){.nav-links{gap:4px}.nav-link{padding-inline:3px;font-size:12px}}