/* ============================================================
   eGIDA Security Solutions — site.css (statični izvoz)
   Boje i tipografija prema EGIDA design systemu.
   ============================================================ */
:root{
  --bg:#0a1e28; --bg2:#0f2530; --bg3:#081820;
  --teal:#0eb4bd; --teal-lt:#5cd0d6; --teal-dk:#0a7c83;
  --ink:#06272c;
  --txt:#ffffff; --txt-70:rgba(255,255,255,.7); --txt-62:rgba(255,255,255,.62);
  --txt-55:rgba(255,255,255,.55); --txt-45:rgba(255,255,255,.45); --txt-35:rgba(255,255,255,.35);
  --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.08); --line-06:rgba(255,255,255,.06);
  --teal-line:rgba(14,180,189,.35);
  --mono:'Overpass Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'Overpass',Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--teal-lt)}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.kicker{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--teal)}
.mono-note{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:rgba(255,255,255,.4)}

/* ---- Header ---- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid var(--line-soft);background:rgba(10,30,40,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s}
.hdr.scrolled{background:rgba(8,24,32,.92)}
.hdr-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr-logo img{height:38px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:6px}
.nav a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em;padding:8px 11px;border-radius:6px;transition:color .15s,background .15s}
.nav a:hover{color:var(--teal-lt);background:rgba(14,180,189,.08)}
.nav a[aria-current="page"]{color:var(--teal-lt)}
.btn-support{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--ink);background:var(--teal);text-decoration:none;padding:10px 16px 8px;border-radius:6px;transition:background .15s,transform .15s;white-space:nowrap}
.btn-support:hover{background:var(--teal-lt)}
.btn-support:active{transform:translateY(1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:11px 10px;cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:#fff}
.nav-mobile{display:none;border-top:1px solid var(--line-soft);background:rgba(10,30,40,.97);padding:10px 20px 18px;flex-direction:column;gap:2px}
.nav-mobile a{color:rgba(255,255,255,.85);text-decoration:none;font-size:16px;font-weight:600;padding:13px 8px;border-bottom:1px solid var(--line-06);min-height:44px;display:flex;align-items:center}
.nav-mobile.open{display:flex}
@media (max-width:900px){.nav{display:none}.burger{display:flex}}

/* ---- Spine ---- */
.spine{position:fixed;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.07);z-index:90}
.spine i{display:block;width:100%;height:0%;background:linear-gradient(180deg,var(--teal),var(--teal-lt))}

/* ---- Custom cursor ---- */
body.egcursor,body.egcursor a,body.egcursor button,body.egcursor input,body.egcursor label{cursor:none}
.cur-ring,.cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity .25s;will-change:transform}
.cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px}
.cur-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--teal-lt)}

/* ---- Hero ---- */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;background:radial-gradient(1200px 700px at 78% 20%,rgba(14,180,189,.10),transparent 60%),linear-gradient(180deg,#0a1e28 0%,#0f2530 100%)}
.hero-home{min-height:70vh}
.hero-sub{padding:150px 0 64px;background:linear-gradient(180deg,var(--bg),var(--bg2));border-bottom:1px solid var(--line-06)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-ghost{position:absolute;right:-6%;top:12%;width:min(46vw,560px);opacity:.045;pointer-events:none;user-select:none}
.hero h1{margin:0 0 26px;font-weight:900;font-size:clamp(44px,7.4vw,104px);line-height:1.02;letter-spacing:-.02em}
.hero h1 .accent{color:var(--teal)}
.hero-sub h1{margin:14px 0 20px;font-weight:900;font-size:clamp(38px,5.4vw,72px);line-height:1.04;letter-spacing:-.02em}
.lead{max-width:640px;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--txt-70)}
.status-pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.16em;color:var(--teal-lt);border:1px solid var(--teal-line);border-radius:999px;padding:8px 16px 6px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:egPulse 2.2s infinite}
@keyframes egPulse{0%,100%{box-shadow:0 0 0 0 rgba(14,180,189,.55)}70%{box-shadow:0 0 0 9px rgba(14,180,189,0)}}

/* ---- Gumbi ---- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:16px;padding:16px 26px 14px;border-radius:6px;transition:background .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:var(--ink);box-shadow:0 6px 24px rgba(14,180,189,.28)}
.btn-primary:hover{background:var(--teal-lt)}
.btn-ghost{background:transparent;color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--teal);background:rgba(14,180,189,.08)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--bg2)}

/* ---- Ticker ---- */
.ticker{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg3);overflow:hidden;padding:16px 0}
.ticker-track{display:inline-flex;white-space:nowrap;animation:egTick 36s linear infinite;will-change:transform}
.ticker-track span{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.5);padding:0 34px;border-right:1px solid var(--line)}
@keyframes egTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Sekcije ---- */
.sec{padding:110px 0 90px}
.sec-tight{padding:80px 0 90px}
.sec-bg2{background:var(--bg2)}
.sec-bg3{background:var(--bg3)}
.sec-line{border-top:1px solid var(--line-06)}
.sec-head{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end;margin-bottom:56px}
h2.ttl{margin:12px 0 0;font-weight:900;font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.015em}
h2.ttl-sm{margin:0 0 40px;font-weight:900;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.015em}

/* ---- Statistika ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;padding:54px 0 40px}
.stat{border-left:2px solid var(--teal);padding:4px 0 4px 20px}
.stat b{display:block;font-weight:900;font-size:clamp(34px,3.4vw,48px);line-height:1.05}
.stat span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.6)}

/* ---- Usluge ---- */
.svc-list{border-top:1px solid var(--line)}
.svc{display:block;padding:30px 14px 26px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,padding-left .2s}
.svc:hover{background:rgba(14,180,189,.05);padding-left:26px}
.svc .num{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--txt-35);padding-top:6px}
.svc h3{margin:0 0 10px;font-weight:800;font-size:clamp(24px,2.4vw,30px);color:#fff}
.svc p{margin:0;font-size:17px;line-height:1.65;color:rgba(255,255,255,.65)}
.svc .gain{display:block;margin-top:10px;font-family:var(--mono);font-size:12.5px;line-height:1.6;letter-spacing:.02em;color:var(--teal-lt);max-width:640px}

/* ---- Koraci ---- */
.flow{position:relative}
.flow-line{position:absolute;top:19px;left:0;right:0;height:1px;background:rgba(255,255,255,.12)}
.flow-fill{position:absolute;top:18px;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--teal),var(--teal-lt));transition:width .2s linear}
.flow-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px}
.flow-num{width:40px;height:40px;border-radius:50%;background:var(--bg2);border:1px solid var(--teal);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--teal-lt);margin-bottom:20px}
.flow h3{margin:0 0 8px;font-weight:800;font-size:20px}
.flow p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.58)}

/* ---- Kartice, chipovi ---- */
.card{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:40px 34px;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px);border-color:rgba(14,180,189,.5)}
.card .bignum{position:absolute;top:18px;right:26px;font-weight:900;font-size:80px;line-height:1;color:rgba(255,255,255,.05)}
.card h3{margin:14px 0 12px;font-weight:800;font-size:clamp(22px,2.2vw,28px)}
.card p{margin:0 0 24px;font-size:15px;line-height:1.65;color:var(--txt-62)}
.card-teal{border-color:var(--teal-line);background:linear-gradient(160deg,rgba(14,180,189,.08),rgba(14,180,189,.02) 60%),var(--bg2)}
.card-teal:hover{border-color:rgba(14,180,189,.6)}
.more{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--teal-lt);text-decoration:none;transition:color .15s}
.more:hover{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 13px 5px}
.chip-teal{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--teal-lt);border:1px solid var(--teal-line);border-radius:999px;padding:7px 13px 5px}
.chip-sm{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px 3px}

/* ---- ZKS blok ---- */
.zks{position:relative;border:1px solid rgba(14,180,189,.4);border-radius:10px;padding:clamp(32px,4vw,56px);background:linear-gradient(135deg,rgba(14,180,189,.09),rgba(14,180,189,.02) 55%);overflow:hidden}
.zks .ghost{position:absolute;right:-40px;bottom:-60px;width:280px;opacity:.05;pointer-events:none}
.zks h2{margin:14px 0 18px;font-weight:900;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.015em;max-width:760px}
.zks .lead{margin:0 0 26px;max-width:680px;font-size:16px}

/* ---- Vendor pilule / pločice ---- */
.vp{display:inline-flex;align-items:center;gap:7px;text-decoration:none;border:1px solid rgba(14,180,189,.3);border-radius:6px;padding:6px 10px 5px;transition:border-color .15s,background .15s}
.vp:hover{border-color:var(--teal);background:rgba(14,180,189,.08)}
.vp .ic{flex:none;width:18px;height:18px;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vp .ic img{width:13px;height:13px;object-fit:contain}
.vp b{font-size:12.5px;font-weight:700;color:#fff}
.vp .star{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--teal-lt)}
.tile{background:#fff;border-radius:10px;padding:18px;display:flex;align-items:center;justify-content:center;width:150px;height:150px;transition:transform .2s}
.tile:hover{transform:translateY(-3px)}
.tile img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* ---- Eko-dijagram (Rješenja) ---- */
.eco-box{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#0d222d;padding:28px 28px 24px}
.eco-box .dom{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--teal);margin-bottom:18px}
.eco-cell{border:1px solid rgba(255,255,255,.09);border-radius:8px;background:var(--bg2);padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px}
.eco-cell .lbl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.65);text-transform:uppercase}
.eco-center{border:1px solid rgba(14,180,189,.55);border-radius:12px;background:radial-gradient(420px 320px at 50% 0%,rgba(14,180,189,.16),transparent 70%),#0d222d;padding:28px 28px 24px;box-shadow:0 0 60px rgba(14,180,189,.12)}
.eco-center .eco-cell{border-color:rgba(14,180,189,.25);background:rgba(14,180,189,.05)}
.eco-vline{width:0;height:44px;border-left:2px dotted rgba(14,180,189,.45);margin:0 auto}
.eco-hline{width:48px;display:flex;align-items:center}
.eco-hline span{display:block;width:100%;height:0;border-top:2px dotted rgba(14,180,189,.45)}
@media (max-width:1079px){.eco-hline{display:none}}

/* ---- CTA ---- */
.cta{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dk) 100%);padding:100px 0}
.cta-slim{padding:72px 0}
.cta h2{margin:0 0 18px;font-weight:900;font-size:clamp(32px,4.4vw,58px);line-height:1.06;letter-spacing:-.015em;color:var(--ink);max-width:820px}
.cta-slim h2{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.1;max-width:640px}
.cta p{margin:0 0 34px;max-width:640px;font-size:17px;line-height:1.6;color:rgba(6,39,44,.8)}
.cta .mono-note{color:rgba(6,39,44,.75);letter-spacing:.1em}

/* ---- Footer ---- */
.ftr{background:var(--bg3);border-top:1px solid var(--line-soft);padding:72px 0 36px;position:relative;overflow:hidden}
.ftr .ghost{position:absolute;left:-60px;bottom:-80px;width:340px;opacity:.04;pointer-events:none}
.ftr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:44px;margin-bottom:52px;position:relative}
.ftr-grid h4{margin:0 0 14px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.4)}
.ftr-col{display:flex;flex-direction:column;gap:2px}
.ftr-col a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;padding:5px 0;transition:color .15s}
.ftr-col a:hover{color:var(--teal-lt)}
.ftr-about p{margin:0;font-size:14px;line-height:1.65;color:var(--txt-55);max-width:320px}
.ftr-about img{height:44px;width:auto;margin-bottom:18px}
.ftr-eu{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:44px;position:relative}
.ftr-eu div{border:1px dashed rgba(255,255,255,.2);border-radius:6px;padding:16px 22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.4)}
.ftr-btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid var(--line-soft);padding-top:26px;font-size:13px;color:var(--txt-45);position:relative}
.ftr-btm a{color:rgba(255,255,255,.6);text-decoration:none}
.ftr-btm a:hover{color:var(--teal-lt)}

/* ---- Cookie banner ---- */
.cc{display:none;position:fixed;left:20px;bottom:20px;z-index:200;max-width:420px;background:var(--bg2);border:1px solid rgba(14,180,189,.4);border-radius:10px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cc.show{display:block}
.cc h4{margin:0 0 10px;font-weight:800;font-size:16px}
.cc p{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.65)}
.cc label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.75);margin-bottom:16px;cursor:pointer}
.cc input{accent-color:var(--teal);width:16px;height:16px}
.cc-act{display:flex;flex-wrap:wrap;gap:8px}
.cc-act button{flex:1;min-width:90px;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:13px;padding:11px 12px 9px;border-radius:6px;cursor:pointer;font-family:inherit}
.cc-act button:hover{border-color:var(--teal)}
.cc-act .cc-ok{background:var(--teal);border:none;color:var(--bg);font-weight:800;min-width:100px}
.cc-act .cc-ok:hover{background:var(--teal-lt)}

/* ---- Pravni tekst ---- */
.legal{display:flex;flex-direction:column;gap:44px;max-width:880px;margin:0 auto;padding:0 28px}
.legal h2{margin:0 0 14px;font-weight:800;font-size:24px}
.legal p{margin:0 0 12px;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.72)}
.legal .box{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:var(--bg2);padding:24px 26px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.8)}
.legal .item{border-left:2px solid var(--teal);padding-left:20px}
.legal .item h3{margin:0 0 6px;font-weight:800;font-size:17px}
.legal .item p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.65)}

/* ---- Ostalo ---- */
.vline{border-left:2px solid var(--teal);padding-left:22px}
.vline h3{margin:0 0 8px;font-weight:800;font-size:19px}
.vline p{margin:0;font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.6)}
.acc-card{border:1px solid rgba(14,180,189,.45);border-radius:10px;background:linear-gradient(135deg,rgba(14,180,189,.1),rgba(14,180,189,.02));padding:32px 30px}
.grid-fit{display:grid;gap:24px}
.g280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g300{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g320{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.pcard{border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:32px 30px;display:flex;flex-direction:column;gap:12px;transition:border-color .25s,transform .25s}
.pcard:hover{border-color:rgba(14,180,189,.5);transform:translateY(-3px)}
.pcard .cat{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.pcard h3{margin:0;font-weight:800;font-size:21px;line-height:1.25}
.pcard p{margin:0;font-size:14.5px;line-height:1.62;color:var(--txt-62);flex:1}

/* ---- Scroll reveal ---- */
.rev{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rev.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .ticker-track{animation:none}
  .pulse{animation:none}
  *{transition-duration:.01ms !important}
}