/* SecOS najava v5 (04.10.2026) — zajednički stil za /, /privatnost i /404.
   Brend proizvoda (server/brend/secos.json): Sec podebljano · OS tanko · crvena tačka, Schibsted Grotesk, akcenat #e5231f.
   Fontovi lokalno (/fontovi, OFL) — bez Google-a. Animacije samo transform/opacity (kompozitor, ne troše bateriju).
   Veličine zavise i od VISINE ekrana (min(vw, vh)), da sve stane na laptop 1280×720 i položen telefon. Bez skripti (CSP script-src bez 'self'). */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fontovi/schibsted-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fontovi/schibsted-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fontovi/jetbrains-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fontovi/jetbrains-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#050505;--fg:#f4f4f2;--mut:#8d8d8a;--lin:rgba(244,244,242,.06);
  --red:#e5231f;--red2:rgba(229,35,31,.55);--glow:rgba(229,35,31,.12);
  --brend:"Schibsted Grotesk","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --vis:100svh;color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--brend);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
a.oznaka:hover,a.oznaka:focus-visible{color:var(--fg)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scena{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;overflow:hidden;isolation:isolate}

/* pozadina: mreža plana + laseri + sjaj + zrno */
.mreza{position:absolute;inset:0;z-index:-4;background-image:linear-gradient(var(--lin) 1px,transparent 1px),linear-gradient(90deg,var(--lin) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 75% 65% at 50% 48%,#000 25%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 48%,#000 25%,transparent 85%)}
.laseri{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.laser{position:absolute;left:50%;top:50%;width:170vmax;height:1px;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent 0%,rgba(229,35,31,.12) 18%,rgba(255,92,80,.95) 50%,rgba(229,35,31,.12) 82%,transparent 100%);
  box-shadow:0 0 6px 1px rgba(229,35,31,.55),0 0 26px 5px rgba(229,35,31,.14);
  animation:prolaz var(--t) linear var(--d) infinite}
.laser::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;translate:-50% -50%;border-radius:50%;background:#ff6a5e;box-shadow:0 0 12px 3px rgba(229,35,31,.6)}
.l1{--a:7deg;--t:13s;--d:-2s}
.l2{--a:-12deg;--t:17s;--d:-9s}
.l3{--a:84deg;--t:15s;--d:-4s}
.l4{--a:-58deg;--t:19s;--d:-13s}
@keyframes prolaz{
  0%{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-62vmax);opacity:0}
  8%{opacity:.6}92%{opacity:.6}
  100%{transform:translate(-50%,-50%) rotate(var(--a)) translateY(62vmax);opacity:0}
}
.sjaj{position:absolute;left:50%;top:44%;width:min(900px,130vw);aspect-ratio:1;translate:-50% -50%;z-index:-2;background:radial-gradient(closest-side,var(--glow),transparent 70%);filter:blur(40px);will-change:transform,opacity;animation:dah 8s ease-in-out infinite}
.zrno{position:absolute;inset:0;z-index:-1;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes dah{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* zaglavlje */
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(min(18px,2.4vh) + env(safe-area-inset-top,0px)) clamp(16px,4vw,48px) 0;animation:gore .8s cubic-bezier(.2,.7,.2,1) 1.9s both}
.oznaka{font-family:var(--mono);font-size:clamp(.656rem,1.1vw,.781rem);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
.oznaka em{position:relative;width:8px;height:8px;border-radius:50%;background:var(--red);font-style:normal}
.oznaka em::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);will-change:transform,opacity;animation:puls 2s ease-out infinite}
@keyframes puls{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}

/* srce */
main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:min(24px,3vh) clamp(16px,4vw,48px)}
.okvir{position:relative;display:inline-block}
.znak{font-weight:900;font-size:clamp(64px,min(21vw,31vh),300px);line-height:.82;letter-spacing:-.06em;display:inline-flex;align-items:baseline;user-select:none;text-shadow:0 0 80px rgba(229,35,31,.18);
  animation:otkrij 1.25s cubic-bezier(.75,0,.2,1) .25s backwards}
.znak span{font-weight:400;letter-spacing:-.05em}
.znak i{display:inline-block;width:.16em;height:.16em;margin-left:.05em;border-radius:50%;background:var(--red);font-style:normal;box-shadow:0 0 .35em .05em var(--red2);will-change:transform;animation:tacka 2.4s ease-in-out 1.6s infinite}
@keyframes otkrij{from{clip-path:inset(-30% 100% -30% -10%)}to{clip-path:inset(-30% -10% -30% -10%)}}
@keyframes tacka{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* laserski rez koji otkriva znak: staza preko cele širine se pomera transform-om (bez pomeranja rasporeda) */
.rez-staza{position:absolute;inset:-10% 0 -6% 0;pointer-events:none;will-change:transform;animation:rez-put 1.25s cubic-bezier(.75,0,.2,1) .25s both}
.rez{position:absolute;top:0;bottom:0;left:0;width:3px;border-radius:2px;background:#ff5a4e;box-shadow:0 0 10px 2px rgba(229,35,31,.9),0 0 40px 10px rgba(229,35,31,.35);opacity:0;animation:rez-vid 1.25s linear .25s both}
@keyframes rez-put{from{transform:translateX(0)}90%,to{transform:translateX(100%)}}
@keyframes rez-vid{0%{opacity:0}6%{opacity:1}90%{opacity:1}100%{opacity:0}}
.naslov{margin-top:clamp(14px,min(3.5vw,4.4vh),40px);font-weight:800;font-size:clamp(1.75rem,1.1rem + 2.9vw,3.75rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;animation:gore .9s cubic-bezier(.2,.7,.2,1) 1.25s both}
.naslov b{color:var(--red);font-weight:800}
.pod{margin-top:clamp(10px,min(2vw,2.4vh),22px);max-width:56ch;color:var(--mut);font-size:1.0625rem;line-height:1.5;text-wrap:balance;animation:gore .9s cubic-bezier(.2,.7,.2,1) 1.45s both}
/* USKORO: obris ISPOD ispune (font je promenljiv, R ima preklopljene konture); crveni odsjaj = prozor koji se pomera transform-om, a tekst u njemu suprotno */
.uskoro{position:relative;margin-top:clamp(16px,min(4vw,4.6vh),44px);font-weight:900;font-size:clamp(36px,min(8.8vw,12vh),120px);line-height:.9;letter-spacing:-.035em;color:var(--bg);-webkit-text-stroke:2.5px rgba(244,244,242,.36);paint-order:stroke fill;animation:gore .9s cubic-bezier(.2,.7,.2,1) 1.65s both}
.odsjaj{position:absolute;top:0;bottom:0;left:0;width:30%;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);transform:translateX(-100%);will-change:transform;animation:odsjaj-prozor 6s ease-in-out 2.4s infinite}
.odsjaj span{position:absolute;top:0;left:0;width:333.334%;color:rgba(229,35,31,.55);-webkit-text-stroke:0;will-change:transform;animation:odsjaj-tekst 6s ease-in-out 2.4s infinite}
@keyframes odsjaj-prozor{0%{transform:translateX(-100%)}45%,100%{transform:translateX(333.334%)}}
@keyframes odsjaj-tekst{0%{transform:translateX(30%)}45%,100%{transform:translateX(-100%)}}
@keyframes gore{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* dno: potpis + traka modula */
.dno{min-width:0;padding-bottom:calc(min(10px,1.4vh) + env(safe-area-inset-bottom,0px));animation:gore .8s cubic-bezier(.2,.7,.2,1) 2.05s both}
.firma{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.2vw,14px);padding-bottom:clamp(8px,min(1.6vw,1.8vh),16px);font-weight:800;font-size:clamp(.656rem,1vw,.75rem);letter-spacing:.32em;text-transform:uppercase;color:rgba(244,244,242,.42);white-space:nowrap}
.firma::before,.firma::after{content:"";width:clamp(18px,2.4vw,32px);height:1px;background:rgba(244,244,242,.14)}
.firma span{color:rgba(244,244,242,.68)}
.traka{min-width:0;border-top:1px solid var(--lin);border-bottom:1px solid var(--lin);overflow:hidden;padding:clamp(10px,min(1.6vw,1.8vh),18px) 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.traka>.tok{display:flex;width:max-content;will-change:transform;animation:tece 38s linear infinite}
.traka{cursor:pointer;display:block}
.traka:hover>.tok,#mirno:checked~.traka>.tok{animation-play-state:paused}
#mirno:focus-visible~.traka{outline:1px solid rgba(229,35,31,.7);outline-offset:-1px}
.tok>span{font-family:var(--mono);font-size:clamp(.719rem,1.2vw,.875rem);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);white-space:nowrap;padding:0 clamp(14px,2vw,28px);display:inline-flex;align-items:center;gap:clamp(14px,2vw,28px)}
.tok>span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
@keyframes tece{to{transform:translateX(-50%)}}

/* podstrane: privatnost, hvala, greška, 404 — isti svet, tekst za čitanje */
.strana main{justify-content:center;align-items:center;padding:clamp(24px,6vh,72px) clamp(16px,4vw,48px)}
.strana header,.strana .dno{animation-delay:0s;animation-duration:.5s}
.strana .znak-mali{font-weight:900;font-size:clamp(44px,9vw,84px);line-height:.85;letter-spacing:-.06em;display:inline-flex;align-items:baseline;text-decoration:none;color:var(--fg)}
.strana .znak-mali span{font-weight:400;letter-spacing:-.05em}
.strana .znak-mali i{display:inline-block;width:.16em;height:.16em;margin-left:.05em;border-radius:50%;background:var(--red)}
.strana h1{margin-top:clamp(20px,4vh,36px);font-weight:800;font-size:clamp(1.5rem,4vw,2.5rem);letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.strana .tekst{margin-top:14px;max-width:52ch;color:var(--mut);font-size:clamp(.9375rem,1.6vw,1.0625rem);line-height:1.6}
.strana .nazad{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--fg)}
.strana .nazad::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.strana .nazad:hover,.strana .nazad:focus-visible{color:#ff5a4e}
.dokument main{align-items:stretch;text-align:left}
.dokument .sadrzaj{width:min(720px,100%);margin:0 auto}
.dokument h1{margin-top:28px}
.dokument h2{margin-top:30px;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
.dokument p,.dokument li{color:#b9b9b5;font-size:.9688rem;line-height:1.65}
.dokument p{margin-top:10px}
.dokument ul{margin-top:10px;padding-left:20px}
.dokument li+li{margin-top:6px}
.dokument .meta{margin-top:8px;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dokument a{color:var(--fg);text-underline-offset:2px}

/* telefon */
@media (max-width:600px){
  .mreza{background-size:40px 40px}
  .sjaj{top:40%}
  .laser{box-shadow:0 0 5px 1px rgba(229,35,31,.5),0 0 18px 3px rgba(229,35,31,.12)}
  main{justify-content:center;padding-top:8px}
  .znak{font-size:clamp(64px,min(24vw,17vh),140px);text-shadow:0 0 40px rgba(229,35,31,.22)}
  .naslov{font-size:clamp(1.625rem,7vw,2.5rem)}
  .pod{font-size:.9375rem}
  .uskoro{font-size:clamp(40px,min(14vw,8vh),64px);-webkit-text-stroke:1.75px rgba(244,244,242,.4)}
  .firma{letter-spacing:.26em;font-size:.625rem;gap:9px}
}
/* nizak ekran (položen telefon, laptop sa skaliranjem): zbijenije, bez preklapanja */
@media (max-height:520px){
  /* zbijaju se razmaci i znak/USKORO (logotip), a tekst NE — pri uvećanju 200% mora da raste; strana tada sme da se pomera */
  header{padding-top:calc(8px + env(safe-area-inset-top,0px))}
  main{padding-top:4px;padding-bottom:4px}
  .znak{font-size:clamp(48px,22vh,140px);text-shadow:none}
  .naslov{margin-top:8px}
  .pod{margin-top:6px;max-width:72ch}
  .uskoro{margin-top:8px;font-size:clamp(28px,8.5vh,60px);-webkit-text-stroke:1.5px rgba(244,244,242,.4)}
  .traka{padding:7px 0}
}
/* visoki kontrast (Windows): crvena tačka brenda ostaje crvena, obris USKORO vidljiv */
@media (forced-colors:active){
  .znak i,.strana .znak-mali i,.oznaka em,.tok>span::after,.strana .nazad::before{forced-color-adjust:none;background:#e5231f}
  .uskoro{-webkit-text-stroke:2px CanvasText;color:Canvas}
  .odsjaj,.laseri,.zrno,.sjaj{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.laser,.odsjaj,.rez-staza{display:none}}