/* GRAD›GOVORI — DIZAJN v2 (kanon: gradgovori-dizajn-v2.html). Token-kit za SVE stranice. */
/* Fontovi: postojeći self-hosted subsetovi (Bricolage/Hanken/Space Mono); Inter→Hanken,
   JetBrains→Space Mono jer Inter/JetBrains ne postoje ni u jednom našem projektu. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url(/fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+00??,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url(/fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+2C60-2C7F}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/hanken-latin.woff2) format("woff2");
  unicode-range:U+00??,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/hanken-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+2C60-2C7F}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/mono-latin.woff2) format("woff2");
  unicode-range:U+00??,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+2C60-2C7F}

/* ============ TOKENS ============ */
:root{
  --ink:#0B0A08; --ink-2:#12100C; --ink-3:#171410; --ink-4:#1D1913;
  --paper:#F2EDE3; --mist:#B9B1A0; --ash:#8A8272; --line:rgba(242,237,227,.12);
  --rust:#C4502A; --rust-hot:#E85D2F; --green:#1C5A4A; --green-hot:#37B77C; --wheat:#E5B84B;
  --disp:"Bricolage Grotesque",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",monospace;
  --r:14px; --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}

/* zrno preko svega */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:80;background:rgba(11,10,8,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none}
.logo i{font-style:normal;color:var(--rust-hot)}
.nav .links{display:flex;gap:22px;font-size:14px}
.nav .links a{text-decoration:none;color:var(--mist)}
.nav .links a:hover{color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;text-decoration:none;border-radius:99px;padding:11px 22px;font-size:15.5px;border:0;cursor:pointer;transition:transform .15s, box-shadow .15s}
.btn-rust{background:var(--rust-hot);color:#180B06;box-shadow:0 6px 28px rgba(232,93,47,.35)}
.btn-rust:hover{transform:translateY(-1px);box-shadow:0 10px 34px rgba(232,93,47,.5)}
.btn-ghost{border:1.5px solid var(--line);color:var(--paper);background:transparent}
.btn-ghost:hover{border-color:var(--mist)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.nav .btn{padding:9px 18px;font-size:14px}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;min-height:88svh;display:flex;flex-direction:column;justify-content:center}
.hero .sky{position:absolute;inset:0;background:
  radial-gradient(120% 70% at 70% -10%, #1c1610 0%, transparent 55%),
  radial-gradient(90% 60% at 15% 10%, rgba(196,80,42,.12) 0%, transparent 60%),
  linear-gradient(180deg, #0E0C09 0%, var(--ink) 70%)}
/* FOTO SLOT: kad postoji /img/zrenjanin-hero.jpg, otkomentariši .foto div u index.html — duotone ide sam
.hero .foto{position:absolute;inset:0;background:url('/img/zrenjanin-hero.jpg') center 30%/cover no-repeat;
  opacity:.28;filter:grayscale(1) contrast(1.15) brightness(.7);mix-blend-mode:luminosity} */
.hero .grad-svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;min-height:260px;pointer-events:none}
.hero-in{position:relative;z-index:5;padding:64px 0 300px}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(46px,8.5vw,104px);line-height:.94;letter-spacing:-.03em;margin:14px 0 10px}
.hero h1 .dot{color:var(--rust-hot)}
.mzline{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3.4vw,34px);letter-spacing:-.015em;color:var(--wheat);min-height:1.3em}
.mzline .mz{display:inline-block}
.mzline .mz.swap{animation:mzin .5s cubic-bezier(.2,.9,.25,1)}
@keyframes mzin{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
.hero .sub{max-width:52ch;font-size:clamp(16px,2vw,19px);color:var(--mist);margin:18px 0 30px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;color:var(--mist);background:rgba(242,237,227,.03)}
.pill b{color:var(--paper);font-weight:600}
.pill .d{width:7px;height:7px;border-radius:50%;background:var(--green-hot);box-shadow:0 0 12px var(--green-hot)}

/* prozori trepere + sat radi */
.win{animation:tw 4.2s infinite}
@keyframes tw{0%,100%{opacity:.9}50%{opacity:.25}}
.voda-l{animation:shim 5.5s ease-in-out infinite}
@keyframes shim{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:.9;transform:translateX(14px)}}

/* ============ SEKCIJE ============ */
section{padding:84px 0}
.sec-head{margin-bottom:36px}
.sec-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.6vw,48px);letter-spacing:-.02em;line-height:1.02;margin:10px 0 0}
.rev{opacity:0;transform:translateY(26px);transition:opacity .6s, transform .6s}
.rev.on{opacity:1;transform:none}

/* kako radi */
.koraci{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.korak{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 24px;background:linear-gradient(180deg, rgba(242,237,227,.03), transparent)}
.korak .n{font-family:var(--disp);font-weight:800;font-size:52px;line-height:1;letter-spacing:-.03em}
.korak:nth-child(1) .n{color:var(--rust-hot)} .korak:nth-child(2) .n{color:var(--wheat)} .korak:nth-child(3) .n{color:var(--green-hot)}
.korak h3{font-family:var(--disp);font-weight:700;font-size:20px;margin:12px 0 6px}
.korak p{color:var(--mist);font-size:15px;margin:0}
.korak .tag{position:absolute;top:20px;right:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ash);text-transform:uppercase}

/* dosijei */
.dosijei{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-3);text-decoration:none;transition:transform .15s, border-color .15s}
.dcard:hover{transform:translateY(-3px);border-color:var(--ash)}
.dthumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:linear-gradient(140deg,#211b13,#14110c);color:var(--ash);font-family:var(--mono);font-size:12px;text-align:center;line-height:8}
.dbody{padding:14px 16px 16px}
.dmz{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--wheat)}
.dtitle{font-family:var(--disp);font-weight:700;font-size:16.5px;margin:6px 0 0;line-height:1.25}
.empty{grid-column:1/-1;border:1.5px dashed var(--line);border-radius:var(--r);padding:56px 24px;text-align:center}
.empty .puls{width:10px;height:10px;border-radius:50%;background:var(--rust-hot);display:inline-block;margin-bottom:14px;animation:pl 1.8s infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(232,93,47,.5)}50%{box-shadow:0 0 0 14px rgba(232,93,47,0)}}
.empty h3{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.2vw,30px);margin:0 0 8px}
.empty p{color:var(--mist);margin:0 0 22px}

/* obećanja */
.obecanja{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ob{border-left:3px solid var(--green-hot);padding:6px 0 6px 16px}
.ob:nth-child(2){border-color:var(--wheat)} .ob:nth-child(3){border-color:var(--rust-hot)} .ob:nth-child(4){border-color:var(--mist)}
.ob b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:4px}
.ob span{color:var(--mist);font-size:14px}

/* CTA final */
.cta-fin{background:linear-gradient(160deg,var(--green),#0F3D32);border-radius:calc(var(--r) + 8px);padding:64px 40px;text-align:center;position:relative;overflow:hidden}
.cta-fin::after{content:"";position:absolute;inset:-40%;background:radial-gradient(50% 50% at 50% 50%, rgba(229,184,75,.14), transparent 70%);animation:orb 9s ease-in-out infinite}
@keyframes orb{0%,100%{transform:translate(-8%,-6%)}50%{transform:translate(8%,6%)}}
.cta-fin h2{position:relative;font-family:var(--disp);font-weight:800;font-size:clamp(30px,5.4vw,56px);letter-spacing:-.02em;line-height:1;margin:0 0 8px}
.cta-fin h2 em{font-style:normal;color:var(--wheat)}
.cta-fin p{position:relative;color:#CFE4D6;margin:0 0 26px}
.cta-fin .btn{position:relative;background:#fff;color:#0F3D32;box-shadow:0 8px 30px rgba(0,0,0,.35)}

footer{border-top:1px solid var(--line);padding:26px 0 34px;color:var(--ash);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media(max-width:820px){
  .koraci,.obecanja{grid-template-columns:1fr}
  .dgrid{grid-template-columns:1fr}
  .nav .links{display:none}
  .hero-in{padding-bottom:56vw}
}
@media(prefers-reduced-motion:reduce){
  .win,.voda-l,.empty .puls,.cta-fin::after,.mzline .mz.swap{animation:none}
  .rev{opacity:1;transform:none;transition:none}
}

/* ============ /snimi + podstranice ============ */
.page{padding:56px 0 84px}
.page-head{margin-bottom:26px}
.page-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(32px,6vw,54px);letter-spacing:-.02em;line-height:1.02;margin:10px 0 0}
.formcard{max-width:640px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-3);padding:26px}
.f-label{display:block;font-family:var(--disp);font-weight:700;font-size:15.5px;margin:20px 0 8px}
.f-help{color:var(--ash);font-size:13px;margin:-4px 0 8px}
.drop{border:1.5px dashed var(--ash);border-radius:var(--r);padding:34px 18px;text-align:center;cursor:pointer;transition:border-color .15s, background .15s}
.drop:hover,.drop.ima{border-color:var(--rust-hot);background:rgba(232,93,47,.05)}
.drop .ic{font-size:30px}
.drop b{display:block;font-family:var(--disp);font-size:17px;margin:8px 0 2px}
.drop span{color:var(--ash);font-size:13px}
select,input[type=text],input[type=email],textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;color:var(--paper);font-family:var(--body);font-size:15px;padding:12px 14px;outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--wheat)}
textarea{resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;margin:22px 0}
.check input{width:20px;height:20px;accent-color:var(--rust-hot);margin-top:2px;flex:none}
.check span{font-size:14px;color:var(--mist)}
.f-send{width:100%;justify-content:center;font-size:17px;padding:15px}

.traka{height:10px;background:var(--ink-4);border-radius:6px;overflow:hidden;margin-top:14px}
.traka>div{height:100%;width:0;background:var(--rust-hot);transition:width .2s}
.poruka{margin-top:14px;padding:12px 14px;border-radius:10px;display:none;font-size:14.5px}
.poruka.greska{display:block;background:rgba(232,93,47,.12);color:var(--rust-hot)}
.poruka.ok{display:block;background:rgba(55,183,124,.12);color:var(--green-hot)}

/* tekst stranice (pravila) */
.prose{max-width:680px}
.prose h2{font-family:var(--disp);font-weight:700;font-size:22px;margin:30px 0 8px}
.prose p,.prose li{color:var(--mist);font-size:15.5px}
.prose ul{padding-left:20px}
.prose b,.prose strong{color:var(--paper)}

/* tabela (moderacija-log) */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-weight:400;color:var(--ash);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
td{color:var(--mist)} td a{color:var(--green-hot)}

/* klip */
video.player{width:100%;border-radius:var(--r);background:#000;border:1px solid var(--line)}
.kart{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:20px}