/* Logotip, strani 404 in »Kmalu spet nazaj«, drobni popravki pregleda. */
.brand-mark{background:none!important;width:40px;height:40px;border-radius:0;transition:transform .5s var(--out)}
.brand-mark svg,.brand-mark img{width:40px;height:40px;filter:drop-shadow(0 6px 18px #3b5bdb66)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-word{font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.brand-word em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.12em;color:#a9bbff;letter-spacing:0}
.btn:focus-visible,.tab:focus-visible,.chapters button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #8aa4ff;outline-offset:3px}
.nav-links a.on{color:#fff;background:#6d8cff26}
.hero-lead,.sec-head p{text-wrap:pretty}h1,h2,h3{text-wrap:balance}
@media(max-width:420px){.brand-mark,.brand-mark svg,.brand-mark img{width:34px;height:34px}.nav-cta .btn{padding:8px 14px}}

/* Samostojne strani (404, Kmalu) */
body.bare{min-height:100svh;display:grid}
.bare main{display:grid;place-items:center;padding:32px 16px;position:relative;overflow:hidden;isolation:isolate}
.lost{position:relative;text-align:center;max-width:720px}
.lost .brand{justify-content:center;margin-bottom:40px}
.lost h1{font-size:clamp(44px,7vw,88px);margin:12px 0 18px}
.lost p{color:#c3cbe0;font-size:18px;max-width:520px;margin:0 auto}
.lost .hero-actions{justify-content:center}
.big404{position:relative;display:flex;justify-content:center;gap:clamp(8px,2vw,20px);font:800 clamp(120px,26vw,260px)/.9 Inter,system-ui,sans-serif;letter-spacing:-.06em}
.big404 span{background:linear-gradient(180deg,#eef2ff,#6d8cff 70%,#3b5bdb);-webkit-background-clip:text;background-clip:text;color:transparent;animation:float404 6s ease-in-out infinite}
.big404 span:nth-child(2){animation-delay:-2s}.big404 span:nth-child(3){animation-delay:-4s}
@keyframes float404{50%{transform:translateY(-14px) rotate(-2deg)}}
.big404 .zero{position:relative;width:.62em;display:grid;place-items:center}
.big404 .zero svg{width:100%;overflow:visible}
.zero .orbit{transform-origin:50% 50%;animation:spin 6s linear infinite}
.search-hint{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.search-hint a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:#c3cbe0;font-size:14px;transition:border-color .2s,color .2s}
.search-hint a:hover{border-color:var(--accent);color:#fff}
.soon-ring{position:relative;width:min(260px,60vw);aspect-ratio:1;margin:0 auto 32px;display:grid;place-items:center}
.soon-ring svg{position:absolute;inset:0;width:100%;height:100%}
.soon-ring .arc{transform-origin:50% 50%;animation:spin 2.4s linear infinite}
.soon-ring .arc2{transform-origin:50% 50%;animation:spin 5s linear infinite reverse}
.soon-ring img,.soon-ring .logo{width:38%;filter:drop-shadow(0 12px 40px #3b5bdb88);animation:bob 4s ease-in-out infinite}
.soon-steps{display:grid;gap:10px;max-width:420px;margin:28px auto 0;text-align:left}
.soon-steps div{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-size:15px}
.soon-steps i{width:10px;height:10px;border-radius:50%;flex:none;background:#4ade80}
.soon-steps i.wait{background:#fbbf24;animation:ping 1.6s infinite}
.retry-note{margin-top:20px!important;font:13px var(--mono)!important;color:var(--muted)!important}

/* Dodatne animacije (motion.js) */
.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.words .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--out);transition-delay:calc(var(--k) * 45ms)}
.in .words .w>span,.words.in .w>span,.page-hero .words .w>span,.lost .words .w>span{transform:none}
.page-hero .words .w>span,.lost .words .w>span{animation:rise .9s var(--out) both;animation-delay:calc(var(--k) * 60ms + 120ms);transform:translateY(110%)}
.spot{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;background:radial-gradient(circle,#6d8cff14,transparent 60%);transition:opacity .4s;will-change:transform}
main,footer,.nav{position:relative;z-index:1}.nav{position:fixed;z-index:50}
.sec-head h2,.page-hero h1,.feature-row h3{transform:skewY(calc(var(--vel,0) * -.6deg));transition:transform .25s ease-out}
.btn-main,.pbtn{transition:transform .25s var(--out),box-shadow .25s,filter .2s}
.link-card,.step,.tile,.os a,.check{will-change:transform}
.check{transition:border-color .3s,transform .4s var(--out)}.check:hover{border-color:#6d8cff66;transform:translateX(6px)}
.marquee span{transition:color .3s}.marquee span:hover{color:#a9bbff}
.hero h1 em::after{content:'';display:block;height:4px;margin-top:6px;border-radius:2px;background:linear-gradient(90deg,#6d8cff,#38bdf8);transform:scaleX(0);transform-origin:left;animation:line 1s var(--out) 1s forwards}
@keyframes line{to{transform:scaleX(1)}}
.hero h1 em{display:inline-block}

/* Smoothness: sections below the fold are laid out only when they come near the viewport; the hero video stays off the compositor's critical path. */
.sec:not(:first-of-type){content-visibility:auto;contain-intrinsic-size:auto 720px}
.bg-video{will-change:auto;transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){.bg-video{display:none}}