/* ============ NeoBit living-design uplift ============ */

/* --- 0) TECH-BAND bazni stilovi (marquee) --- */
.tech-band{padding:48px 0 44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(15,117,188,.035),transparent 70%);position:relative}
.tech-eyebrow{text-align:center;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);margin:0 0 28px}
.tech-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tech-track{display:flex;align-items:center;gap:70px;width:max-content;animation:nbtech 34s linear infinite}
.tech-marquee:hover .tech-track{animation-play-state:paused}
.tech-logo{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:.005em;
  color:#5d7086;white-space:nowrap;transition:color .3s;flex:none;display:inline-flex;align-items:center;gap:11px}
.tech-logo::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.5;transform:rotate(45deg)}
.tech-logo:hover{color:var(--text)}
@keyframes nbtech{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.tech-track{gap:44px;animation-duration:24s}.tech-logo{font-size:19px;gap:9px}
  .tech-eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.tech-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:26px 44px}
  .tech-marquee{-webkit-mask-image:none;mask-image:none}}


/* --- 1) scroll progress bar --- */
#nbprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:10001;
  background:linear-gradient(90deg,#0F75BC,#4FC3F7);
  box-shadow:0 0 14px rgba(15,117,188,.75)}

/* --- 2) HERO: XXL tipografija + gradient shimmer --- */
.nb-uplift .hero h1{font-size:clamp(46px,6.4vw,88px)!important;line-height:1.02!important;
  letter-spacing:-.035em!important;margin-bottom:26px}
.nb-uplift .hero h1 .grad{background:linear-gradient(115deg,#0F75BC 15%,#4FC3F7 40%,#8ED8FF 50%,#4FC3F7 60%,#0F75BC 85%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nbShimmer 5.5s ease-in-out infinite}
@keyframes nbShimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.nb-uplift .hero .lede,.nb-uplift .hero>.wrap p{font-size:clamp(16px,1.5vw,19px)}
/* eyebrow kao chip pill */
.nb-uplift .hero .hero-eyebrow{display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border:1px solid rgba(15,117,188,.4);border-radius:999px;
  background:rgba(15,117,188,.09);backdrop-filter:blur(6px);
  box-shadow:0 0 24px rgba(15,117,188,.14) inset}
.nb-uplift .hero .hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#4FC3F7;box-shadow:0 0 0 0 rgba(79,195,247,.6);animation:nbPulse 2s infinite}
@keyframes nbPulse{70%{box-shadow:0 0 0 9px rgba(79,195,247,0)}100%{box-shadow:0 0 0 0 rgba(79,195,247,0)}}

/* --- 3) hero entrance (staggered) --- */
@keyframes nbUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.nb-uplift .hero .hero-eyebrow{animation:nbUp .7s cubic-bezier(.16,1,.3,1) .02s both,nbPulseHost 0s}
.nb-uplift .hero h1{animation:nbUp .9s cubic-bezier(.16,1,.3,1) .14s both}
.nb-uplift .hero .lede,.nb-uplift .hero p{animation:nbUp .9s cubic-bezier(.16,1,.3,1) .28s both}
.nb-uplift .hero .hero-actions{animation:nbUp .9s cubic-bezier(.16,1,.3,1) .42s both}
.nb-uplift .hero .hero-trust{animation:nbUp .95s cubic-bezier(.16,1,.3,1) .56s both}
.nb-uplift .hero .terminal{animation:nbUp 1.05s cubic-bezier(.16,1,.3,1) .34s both,nbFloat 7.5s ease-in-out 1.8s infinite}
@keyframes nbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* --- 4) hero atmosfera: aurore, mreza, spotlight (JS mis), noise --- */
.nb-uplift .hero{position:relative;overflow:hidden}
.nb-uplift .hero .wrap{position:relative;z-index:2}
.nb-aurora{position:absolute;width:780px;height:780px;border-radius:50%;filter:blur(95px);
  opacity:.55;pointer-events:none;z-index:0;top:-250px;right:-190px;
  background:radial-gradient(circle,rgba(15,117,188,.5),rgba(79,195,247,.10) 55%,transparent 72%);
  animation:nbAurA 19s ease-in-out infinite alternate}
@keyframes nbAurA{from{transform:translate(0,0) scale(1)}to{transform:translate(-160px,90px) scale(1.15)}}
.nb-aurora.b{width:560px;height:560px;left:-210px;right:auto;top:36%;opacity:.4;
  background:radial-gradient(circle,rgba(15,117,188,.3),transparent 66%);
  animation:nbAurB 24s ease-in-out infinite alternate}
@keyframes nbAurB{from{transform:translate(0,0) scale(1)}to{transform:translate(140px,-80px) scale(1.1)}}
.nb-grid{position:absolute;inset:-56px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(157,178,198,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(157,178,198,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 15%,#000 22%,transparent 74%);
          mask-image:radial-gradient(ellipse at 70% 15%,#000 22%,transparent 74%);
  animation:nbPan 46s linear infinite}
@keyframes nbPan{from{transform:translate(0,0)}to{transform:translate(56px,56px)}}
.nb-spot{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,40%),rgba(79,195,247,.09),transparent 65%)}
.nb-uplift .hero:hover .nb-spot{opacity:1}
.nb-noise{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* --- 5) TERMINAL: rotirajuci conic glow rub --- */
@property --nbrot{syntax:"<angle>";initial-value:0deg;inherits:false}
.nb-uplift .terminal{position:relative;box-shadow:0 30px 80px rgba(2,8,16,.6)}
.nb-uplift .terminal::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--nbrot,0deg),rgba(15,117,188,.0) 0%,rgba(79,195,247,.75) 12%,rgba(15,117,188,.0) 28%,rgba(15,117,188,.0) 55%,rgba(214,31,43,.35) 64%,rgba(15,117,188,.0) 78%);
  animation:nbRot 7s linear infinite;filter:blur(1px)}
@keyframes nbRot{to{--nbrot:360deg}}

/* --- 6) NAV: glass shrink na scroll --- */
.nb-uplift .nav{transition:background .35s,box-shadow .35s,border-color .35s}
.nb-uplift .nav .wrap{transition:height .35s cubic-bezier(.16,1,.3,1)}
.nb-uplift.nb-scrolled .nav{background:rgba(6,11,19,.86);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 12px 40px rgba(2,8,16,.5);border-bottom-color:rgba(15,117,188,.25)}
.nb-uplift.nb-scrolled .nav .wrap{height:58px}
.nb-uplift.nb-scrolled .brand-logo{height:40px;transition:height .35s}

/* --- 7) reveal sa staggerom --- */
.nb-uplift .reveal{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--nbd,0s)}
.nb-uplift .reveal.in{opacity:1;transform:none}

/* --- 8) USLUGE TRAKA: dark glass kartice (bijela je odudarala) --- */
.nb-uplift .stats.light-band{
  --bg:#06090F;--bg-elev:#0A0F1A;--panel:#0D1421;--panel-2:#101A2B;
  --line:rgba(146,166,198,0.12);--line-strong:rgba(146,166,198,0.22);
  --text:#EAF0F8;--text-dim:#9DAABF;--text-faint:#62708A;--accent-ink:#02121f;
  background:linear-gradient(180deg,#0A0F1A,#06090F);
  border-top:1px solid rgba(146,166,198,.10);border-bottom:1px solid rgba(146,166,198,.10);
  padding:66px 0}
.nb-uplift .stats.light-band::before{
  background-image:linear-gradient(rgba(146,166,198,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(146,166,198,.05) 1px,transparent 1px)}
.nb-uplift .stats.light-band .wrap{gap:14px}
.nb-uplift .stats.light-band .stat{
  background:rgba(13,20,33,.78);border:1px solid rgba(146,166,198,.14)!important;
  border-radius:16px;margin:0;padding:30px 24px!important;flex:0 1 224px;
  backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.nb-uplift .stats.light-band .stat:hover{
  transform:translateY(-6px);border-color:rgba(27,138,214,.5)!important;
  box-shadow:0 20px 44px rgba(2,8,16,.55),0 0 26px rgba(27,138,214,.14)}
.nb-uplift .stats.light-band .svc-stat .s-ic{
  background:rgba(27,138,214,.14);color:#4FC3F7;
  box-shadow:0 0 0 1px rgba(27,138,214,.25) inset;transition:transform .35s}
.nb-uplift .stats.light-band .stat:hover .s-ic{transform:scale(1.1) rotate(-4deg)}
@media(max-width:600px){
  .nb-uplift .stats.light-band{padding:48px 0}
  .nb-uplift .stats.light-band .stat{flex:1 1 100%;max-width:340px;padding:24px 22px!important}
}

/* --- 9) kartice/hover + gumbi --- */
.nb-uplift .svc,.nb-uplift .mod,.nb-uplift .post,.nb-uplift .panel,.nb-uplift .aka-featured{
  transition:transform .38s cubic-bezier(.16,1,.3,1),border-color .38s,box-shadow .38s}
.nb-uplift .svc:hover,.nb-uplift .mod:hover,.nb-uplift .post:hover,.nb-uplift .aka-featured:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 48px rgba(3,9,17,.55),0 0 0 1px rgba(15,117,188,.34);
  border-color:rgba(15,117,188,.45)}
.nb-uplift .btn{position:relative;overflow:hidden;border-radius:999px!important}
.nb-uplift .btn::after{content:"";position:absolute;top:0;left:-85%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.nb-uplift .btn:hover::after{left:135%}
.nb-uplift .hero-actions .btn{padding:15px 28px;font-size:15px}

/* --- 10) marquee: vece + 2 reda kontra-smjer --- */
.nb-uplift .tech-band{padding:64px 0 58px}
.nb-uplift .tech-logo{font-size:30px;color:#64788f}
.nb-uplift .tech-track.rev{animation-direction:reverse;margin-top:26px;opacity:.45}
.nb-uplift .tech-track.rev .tech-logo{font-size:22px}
@media(max-width:600px){.nb-uplift .tech-logo{font-size:21px}.nb-uplift .tech-track.rev .tech-logo{font-size:16px}}

/* --- 11) sekcijski naslovi: accent linija --- */
.nb-uplift .section-head h2{position:relative;padding-bottom:14px}
.nb-uplift .section-head h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  border-radius:2px;background:linear-gradient(90deg,#0F75BC,#4FC3F7);
  transition:width .9s cubic-bezier(.16,1,.3,1) .25s}
.nb-uplift .section-head.center h2::after{left:50%;transform:translateX(-50%)}
.nb-uplift .reveal.in h2::after{width:64px}


/* --- 13) USE CASES: Rjesenja u praksi --- */
.uc-sec{padding:92px 0;position:relative;border-top:1px solid rgba(146,166,198,.1);
  background:radial-gradient(900px 520px at 88% -12%,rgba(27,138,214,.09),transparent 62%),#070B12}
.uc-eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#4FC3F7;display:flex;align-items:center;gap:10px;font-weight:600}
.uc-eyebrow::before{content:"";width:28px;height:2px;background:#1B8AD6}
.uc-title{font-family:var(--font-display);font-size:clamp(30px,4.2vw,54px);font-weight:700;
  letter-spacing:-.025em;color:#EAF0F8;line-height:1.05;margin:14px 0 10px}
.uc-title b{color:#4FC3F7;font-weight:inherit}
.uc-sub{color:#9DAABF;max-width:620px;font-size:15.5px;line-height:1.65}
.uc-filters{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 32px}
.uc-chip{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 17px;border-radius:999px;border:1px solid rgba(146,166,198,.22);color:#9DAABF;
  cursor:pointer;background:transparent;transition:border-color .25s,color .25s,background .25s}
.uc-chip:hover{border-color:rgba(27,138,214,.55);color:#EAF0F8}
.uc-chip.act{background:#1B8AD6;border-color:#1B8AD6;color:#02121f;font-weight:700}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.uc-grid{grid-template-columns:1fr}}
.uc-card{position:relative;background:rgba(13,20,33,.75);border:1px solid rgba(146,166,198,.13);
  border-radius:16px;padding:24px 22px 18px;display:flex;flex-direction:column;gap:11px;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s}
.uc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#1B8AD6,transparent 72%);opacity:0;transition:opacity .35s}
.uc-card:hover{transform:translateY(-6px);border-color:rgba(27,138,214,.45);
  box-shadow:0 20px 44px rgba(2,8,16,.55)}
.uc-card:hover::before{opacity:1}
.uc-card.hid{display:none}
.uc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.uc-num{font-family:var(--font-code);font-size:12px;color:#62708A;letter-spacing:.05em}
.uc-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;font-weight:600;white-space:nowrap}
.uc-tag.g-fortinet{background:rgba(238,49,36,.13);color:#FF8A80;border:1px solid rgba(238,49,36,.3)}
.uc-tag.g-elastic{background:rgba(0,191,179,.12);color:#4DD0C4;border:1px solid rgba(0,191,179,.28)}
.uc-tag.g-soc{background:rgba(27,138,214,.14);color:#4FC3F7;border:1px solid rgba(27,138,214,.3)}
.uc-tag.g-m365{background:rgba(255,185,0,.12);color:#FFD54F;border:1px solid rgba(255,185,0,.26)}
.uc-tag.g-bdr{background:rgba(102,187,106,.12);color:#81C784;border:1px solid rgba(102,187,106,.28)}
.uc-tag.g-pentest{background:rgba(171,71,188,.14);color:#CE93D8;border:1px solid rgba(171,71,188,.3)}
.uc-card h3{font-family:var(--font-display);font-size:18px;font-weight:650;color:#EAF0F8;
  line-height:1.28;letter-spacing:-.01em;margin:0}
.uc-card p{color:#9DAABF;font-size:13.6px;line-height:1.62;margin:0;flex:1}
.uc-metric{display:flex;align-items:center;gap:8px;font-family:var(--font-code);font-size:13.5px;
  color:#4FC3F7;border-top:1px dashed rgba(146,166,198,.18);padding-top:12px;font-weight:600}
.uc-metric::before{content:"B8";color:#1B8AD6}
.uc-ind{font-size:12px;color:#62708A}
.uc-more-wrap{display:flex;justify-content:center;margin-top:30px}
.uc-more{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 30px;border-radius:999px;border:1px solid rgba(27,138,214,.5);color:#4FC3F7;
  background:rgba(27,138,214,.08);cursor:pointer;transition:background .25s,color .25s}
.uc-more:hover{background:#1B8AD6;color:#02121f}

/* --- 12) reduced motion --- */
@media(prefers-reduced-motion:reduce){
  #nbprog{display:none}
  .nb-uplift .hero *,.nb-uplift .terminal,.nb-uplift .terminal::before{animation:none!important}
  .nb-aurora,.nb-grid{animation:none!important}
  .nb-spot{display:none}
  .nb-uplift .reveal{transition:none;opacity:1;transform:none}
  .nb-uplift .tech-track{animation:none}
}
/* mobile fino */
@media(max-width:600px){
  .nb-uplift .hero h1{font-size:clamp(38px,10.5vw,52px)!important}
  .nb-uplift.nb-scrolled .nav .wrap{height:54px}
}

/* --- 14) LOGO veci + DRAWER kompaktniji + COLOR SHIFT --- */
.nb-uplift .brand-logo{height:62px!important}
.nb-uplift.nb-scrolled .brand-logo{height:52px!important}
.nb-uplift .drawer-top .brand-logo{height:48px!important}
@media(max-width:600px){
  .nb-uplift .brand-logo{height:48px!important}
  .nb-uplift.nb-scrolled .brand-logo{height:44px!important}
  .nb-uplift .nav .wrap{height:66px}
}
.nb-uplift .drawer{padding:20px 24px}
.nb-uplift .drawer-links{margin-top:20px;gap:2px}
.nb-uplift .drawer-links a{font-size:18.5px;padding:10px 0}
/* boje koje se mijenjaju: aurore rotiraju nijansu (plava->ljubicasta->tirkiz) */
.nb-aurora{animation:nbAurA 19s ease-in-out infinite alternate,nbHue 26s ease-in-out infinite}
.nb-aurora.b{animation:nbAurB 24s ease-in-out infinite alternate,nbHue 32s ease-in-out infinite reverse}
@keyframes nbHue{0%,100%{filter:blur(95px) hue-rotate(0deg)}33%{filter:blur(95px) hue-rotate(42deg)}66%{filter:blur(95px) hue-rotate(-28deg)}}
/* progress bar i accent linije prelijevaju boju */
#nbprog{background:linear-gradient(90deg,#0F75BC,#4FC3F7,#7C6CF0,#0F75BC);background-size:300% 100%;animation:nbFlow 9s linear infinite}
.nb-uplift .section-head h2::after{background:linear-gradient(90deg,#0F75BC,#4FC3F7,#7C6CF0,#0F75BC);background-size:300% 100%;animation:nbFlow 8s linear infinite}
@keyframes nbFlow{to{background-position:300% 0}}
/* primarni gumb dise bojom */
.nb-uplift .btn-primary{animation:nbBtnGlow 6s ease-in-out infinite}
@keyframes nbBtnGlow{0%,100%{box-shadow:0 6px 22px rgba(27,138,214,.28)}50%{box-shadow:0 8px 32px rgba(124,108,240,.45)}}
@media(prefers-reduced-motion:reduce){
  .nb-aurora,.nb-aurora.b,#nbprog,.nb-uplift .section-head h2::after,.nb-uplift .btn-primary{animation:none!important}
}

/* --- 15) SOC RADAR (zasebna stranica) + homepage teaser --- */
.nb-radar-shell{position:relative;aspect-ratio:16/9;background:
  radial-gradient(circle at 50% 50%,#07131F 0%,#04080F 70%);
  border:1px solid rgba(27,138,214,.25);border-radius:16px;
  overflow:hidden;box-shadow:0 30px 80px rgba(2,8,16,.6),0 0 40px rgba(27,138,214,.08) inset}
.nb-radar-shell img{display:none}
#nbRadar{position:absolute;inset:0;width:100%;height:100%;display:block}
.nb-radar-log{position:absolute;left:14px;bottom:12px;z-index:2;display:flex;flex-direction:column;
  gap:4px;font-family:var(--font-code);font-size:11.5px;line-height:1.45;pointer-events:none;max-width:78%}
.nb-radar-log .l{color:#7FB8E0;background:rgba(4,10,18,.72);border-left:2px solid #1B8AD6;
  padding:3px 9px;border-radius:0 6px 6px 0;animation:nbLogIn .35s ease both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-radar-log .l.warn{border-left-color:#FF5D73;color:#FFA5B1}
.nb-radar-log .l.ok{border-left-color:#37C978;color:#8FE3B4}
@keyframes nbLogIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.nb-radar-count{position:absolute;top:12px;right:14px;z-index:2;font-family:var(--font-code);
  font-size:12px;color:#9DAABF;background:rgba(4,10,18,.72);border:1px solid rgba(27,138,214,.3);
  padding:7px 13px;border-radius:999px;display:flex;align-items:center;gap:7px}
.nb-radar-count::before{content:"";width:7px;height:7px;border-radius:50%;background:#37C978;
  box-shadow:0 0 0 0 rgba(55,201,120,.6);animation:nbPulse 2s infinite}
.nb-radar-count b{color:#4FC3F7;font-size:15px}
@media(max-width:600px){.nb-radar-shell{aspect-ratio:4/3}.nb-radar-log{font-size:10px;max-width:88%}}

/* homepage SOC teaser s mini radarom */
.soc-teaser{display:grid;grid-template-columns:220px 1fr;gap:38px;align-items:center;
  background:linear-gradient(120deg,rgba(13,20,33,.9),rgba(7,16,28,.9));
  border:1px solid rgba(27,138,214,.28);border-radius:20px;padding:38px 42px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s;text-decoration:none}
.soc-teaser:hover{transform:translateY(-5px);border-color:rgba(27,138,214,.55);
  box-shadow:0 24px 54px rgba(2,8,16,.6),0 0 34px rgba(27,138,214,.14)}
.soc-teaser-radar{position:relative;width:200px;height:200px;border-radius:50%;justify-self:center;
  background:radial-gradient(circle,#0A1624 0%,#050B14 75%);
  border:1px solid rgba(27,138,214,.35);
  box-shadow:0 0 34px rgba(27,138,214,.16),0 0 24px rgba(27,138,214,.12) inset}
.soc-teaser-radar::before{content:"";position:absolute;inset:24px;border-radius:50%;border:1px solid rgba(27,138,214,.22)}
.soc-teaser-radar::after{content:"";position:absolute;inset:58px;border-radius:50%;border:1px solid rgba(27,138,214,.18)}
.soc-teaser-radar .stR{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(79,195,247,.5) 0deg,rgba(79,195,247,.08) 55deg,transparent 70deg);
  animation:nbSweep 3.2s linear infinite}
@keyframes nbSweep{to{transform:rotate(360deg)}}
.soc-teaser-radar .stB{position:absolute;width:8px;height:8px;border-radius:50%;background:#FF5D73;
  box-shadow:0 0 10px rgba(255,93,115,.8);opacity:0;animation:nbBlipT 3.2s linear infinite}
.soc-teaser-radar .stB.b1{top:34%;left:62%}
.soc-teaser-radar .stB.b2{top:64%;left:30%;animation-delay:1.1s;background:#4FC3F7;box-shadow:0 0 10px rgba(79,195,247,.8)}
.soc-teaser-radar .stB.b3{top:26%;left:38%;animation-delay:2.2s}
@keyframes nbBlipT{0%,8%{opacity:0}12%,45%{opacity:1}70%,100%{opacity:0}}
.soc-teaser-txt h2{margin:14px 0 10px}
.soc-teaser-txt p{color:var(--text-dim);margin:0 0 18px;max-width:56ch}
.soc-teaser-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:#4FC3F7;font-weight:600}
.soc-teaser-cta svg{transition:transform .3s}
.soc-teaser:hover .soc-teaser-cta svg{transform:translateX(5px)}
@media(max-width:760px){.soc-teaser{grid-template-columns:1fr;gap:26px;padding:30px 24px}
  .soc-teaser-radar{width:160px;height:160px}}
@media(prefers-reduced-motion:reduce){.soc-teaser-radar .stR,.soc-teaser-radar .stB{animation:none}
  .nb-radar-log .l{animation:none}}

/* --- 16) SOC radar stranica: prostraniji layout + gumbi u clanku --- */
.soc-page .art-wrap{max-width:1000px}
.soc-page .article{font-size:16.2px;line-height:1.78}
.soc-page .article h2{font-size:clamp(24px,2.8vw,34px);margin-top:48px}
.soc-page .art-title{font-size:clamp(38px,5vw,62px)}
.soc-page .nb-radar-shell{margin:6px 0 36px}
.nb-uplift .article a.btn{text-decoration:none!important}
.nb-uplift .article a.btn-primary{color:#02121f!important}
.nb-uplift .article a.btn-ghost{color:var(--text)!important}
.soc-cta-row{margin:26px 0 38px}
@media(max-width:600px){.soc-page .article{font-size:15.5px}}

/* --- 17) tech-logo ikone --- */
.tech-logo .tl-ic{width:25px;height:25px;flex:none;opacity:.9}
.tech-logo.has-ic::before{display:none}
.tech-logo.has-ic{gap:10px}
@media(max-width:600px){.tech-logo .tl-ic{width:19px;height:19px}}

/* --- 18) INTEGRATOR RJESENJA stranica --- */
.pk-page .art-wrap{max-width:1240px}
.pk-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#4FC3F7;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(27,138,214,.4);background:rgba(27,138,214,.09);margin-bottom:16px}
.pk-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#4FC3F7;
  box-shadow:0 0 0 0 rgba(79,195,247,.6);animation:nbPulse 2s infinite}
.pk-page .art-title{font-size:clamp(34px,5vw,60px);letter-spacing:-.03em;line-height:1.04}
.pk-page .art-lede{font-size:clamp(16px,1.7vw,19.5px);color:var(--text-dim);max-width:70ch;line-height:1.7}
.pk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 8px}
.pk-stat{background:rgba(13,20,33,.72);border:1px solid rgba(146,166,198,.14);border-radius:14px;
  padding:20px 18px;text-align:center}
.pk-stat b{display:block;font-family:var(--font-display);font-size:clamp(26px,3.4vw,38px);
  color:#4FC3F7;line-height:1;letter-spacing:-.02em}
.pk-stat span{display:block;margin-top:7px;font-size:12.5px;color:var(--text-faint);letter-spacing:.02em}
@media(max-width:760px){.pk-stats{grid-template-columns:repeat(2,1fr)}}

.pk-filters{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 26px}
.pk-chip{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;border:1px solid rgba(146,166,198,.22);color:#9DAABF;
  cursor:pointer;background:transparent;transition:border-color .25s,color .25s,background .25s}
.pk-chip:hover{border-color:rgba(27,138,214,.55);color:#EAF0F8}
.pk-chip.act{background:#1B8AD6;border-color:#1B8AD6;color:#02121f;font-weight:700}

.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1080px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.pk-grid{grid-template-columns:1fr}}
.pk{position:relative;background:rgba(13,20,33,.75);border:1px solid rgba(146,166,198,.13);
  border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;gap:16px;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s}
.pk::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#1B8AD6,transparent 70%);opacity:0;transition:opacity .35s}
.pk:hover{transform:translateY(-6px);border-color:rgba(27,138,214,.45);box-shadow:0 22px 48px rgba(2,8,16,.55)}
.pk:hover::before{opacity:1}
.pk.hid{display:none}
.pk-top{display:flex;align-items:center;gap:14px}
.pk-logo{width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(27,138,214,.12);border:1px solid rgba(27,138,214,.25);color:#4FC3F7}
.pk-logo .pk-ic{width:26px;height:26px}
.pk-ini{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.02em}
.pk-top h3{margin:0;font-family:var(--font-display);font-size:19px;font-weight:650;color:#EAF0F8;letter-spacing:-.01em}
.pk-dom{display:block;margin-top:3px;font-size:12px;color:var(--text-faint);letter-spacing:.02em}
.pk-tag{margin:0;color:var(--text-dim);font-size:14px;line-height:1.6}
.pk-block h4{margin:0 0 9px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#7FB8E0;display:flex;align-items:center;gap:8px}
.pk-n{background:rgba(27,138,214,.18);color:#4FC3F7;border-radius:999px;padding:2px 8px;
  font-size:11px;letter-spacing:0}
.pk-block ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pk-prods li{font-family:var(--font-code);font-size:11.8px;color:#9DAABF;background:rgba(146,166,198,.08);
  border:1px solid rgba(146,166,198,.14);border-radius:7px;padding:4px 9px;line-height:1.35}
.pk-ucs{flex-direction:column;gap:7px!important}
.pk-ucs li{position:relative;padding-left:19px;font-size:13.4px;color:var(--text-dim);line-height:1.5}
.pk-ucs li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:2px;
  background:#1B8AD6;opacity:.75;transform:rotate(45deg)}

.pk-cta{margin:56px 0 10px;text-align:center;padding:46px 32px;border-radius:20px;
  background:linear-gradient(120deg,rgba(13,20,33,.92),rgba(7,16,28,.92));
  border:1px solid rgba(27,138,214,.28)}
.pk-cta h2{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(24px,3vw,34px);color:#EAF0F8}
.pk-cta p{margin:0 auto 24px;color:var(--text-dim);max-width:62ch;line-height:1.7}
.pk-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.nb-uplift .pk-cta a.btn-primary{color:#02121f!important;text-decoration:none!important}
.nb-uplift .pk-cta a.btn-ghost{color:var(--text)!important;text-decoration:none!important}
@media(max-width:600px){.pk-cta{padding:34px 22px}}

/* --- 19) JEDINSTVENA ANIMACIJA IKONA (cijeli sajt) --- */
.nb-uplift .s-ic,.nb-uplift .m-ic,.nb-uplift .ic,.nb-uplift .pk-logo,
.nb-uplift .ck,.nb-uplift .pm,.nb-uplift .soc-photo-badge{
  transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s,background .42s,color .42s,border-color .42s}
.nb-uplift .s-ic,.nb-uplift .m-ic,.nb-uplift .ic,.nb-uplift .pk-logo{
  position:relative;background:rgba(27,138,214,.13);color:#4FC3F7;
  box-shadow:0 0 0 1px rgba(27,138,214,.22) inset}
.nb-uplift .s-ic svg,.nb-uplift .m-ic svg,.nb-uplift .ic svg,.nb-uplift .ck svg{
  transition:transform .42s cubic-bezier(.16,1,.3,1)}

/* prsten koji se siri na hover */
.nb-uplift .s-ic::after,.nb-uplift .m-ic::after,.nb-uplift .ic::after,.nb-uplift .pk-logo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(79,195,247,.65);opacity:0}
@keyframes nbIcRing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

/* HOVER na kartici -> ikona ozivi */
.nb-uplift .stat:hover .s-ic,
.nb-uplift .mod:hover .m-ic,.nb-uplift .mod-grid>*:hover .m-ic,
.nb-uplift .svc:hover .ic,.nb-uplift .pcard:hover .ic,.nb-uplift .metric:hover .ic,
.nb-uplift .sec-band:hover .ic,.nb-uplift .protect-grid>*:hover .ic,.nb-uplift .step:hover .ic,
.nb-uplift .pk:hover .pk-logo,
.nb-uplift a:hover>.m-ic,.nb-uplift a:hover>.ic,
.nb-uplift .s-ic:hover,.nb-uplift .m-ic:hover,.nb-uplift .ic:hover,.nb-uplift .pk-logo:hover{
  transform:scale(1.1) rotate(-4deg);background:rgba(27,138,214,.22);color:#8ED8FF;
  box-shadow:0 0 0 1px rgba(79,195,247,.5) inset,0 10px 26px rgba(27,138,214,.3)}
.nb-uplift .stat:hover .s-ic::after,
.nb-uplift .mod:hover .m-ic::after,.nb-uplift .svc:hover .ic::after,
.nb-uplift .pcard:hover .ic::after,.nb-uplift .metric:hover .ic::after,
.nb-uplift .step:hover .ic::after,.nb-uplift .pk:hover .pk-logo::after,
.nb-uplift a:hover>.m-ic::after,.nb-uplift a:hover>.ic::after{animation:nbIcRing .95s ease-out}
.nb-uplift .stat:hover .s-ic svg,.nb-uplift .mod:hover .m-ic svg,
.nb-uplift .svc:hover .ic svg,.nb-uplift .pcard:hover .ic svg,
.nb-uplift .metric:hover .ic svg,.nb-uplift .step:hover .ic svg{transform:scale(1.07)}

/* kvacice u listama */
.nb-uplift .feat:hover .ck,.nb-uplift .bullets li:hover .ck,.nb-uplift li:hover>.ck{
  transform:scale(1.18) rotate(-8deg);background:rgba(27,138,214,.26);color:#8ED8FF;
  box-shadow:0 0 0 1px rgba(79,195,247,.45) inset}
.nb-uplift .feat:hover .ck svg,.nb-uplift li:hover>.ck svg{transform:scale(1.1)}

/* FAQ plus/minus */
.nb-uplift .qa:hover .pm{border-color:rgba(79,195,247,.55);color:#8ED8FF;transform:scale(1.1)}

/* ulazna animacija kad se sekcija otkrije */
@keyframes nbIcPop{from{transform:scale(.68) rotate(-14deg);opacity:.15}to{transform:none;opacity:1}}
.nb-uplift .reveal.in .s-ic,.nb-uplift .reveal.in .m-ic,
.nb-uplift .reveal.in .ic,.nb-uplift .reveal.in .pk-logo{
  animation:nbIcPop .6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:.12s}

@media(prefers-reduced-motion:reduce){
  .nb-uplift .s-ic,.nb-uplift .m-ic,.nb-uplift .ic,.nb-uplift .pk-logo,.nb-uplift .ck,.nb-uplift .pm{
    transition:none!important;animation:none!important}
  .nb-uplift .stat:hover .s-ic,.nb-uplift .mod:hover .m-ic,.nb-uplift .svc:hover .ic,
  .nb-uplift .pcard:hover .ic,.nb-uplift .pk:hover .pk-logo{transform:none}
  .nb-uplift .s-ic::after,.nb-uplift .m-ic::after,.nb-uplift .ic::after,.nb-uplift .pk-logo::after{animation:none!important}
}

/* --- 19b) ujednacen izgled ikona (visa specificnost) --- */
html.nb-uplift .s-ic,html.nb-uplift .m-ic,html.nb-uplift .ic,html.nb-uplift .pk-logo{
  background:rgba(27,138,214,.14);color:#4FC3F7;
  box-shadow:0 0 0 1px rgba(27,138,214,.24) inset}
html.nb-uplift .ck{background:rgba(27,138,214,.18);color:#4FC3F7}
html.nb-uplift .stat:hover .s-ic,html.nb-uplift .mod:hover .m-ic,html.nb-uplift .svc:hover .ic,
html.nb-uplift .pcard:hover .ic,html.nb-uplift .metric:hover .ic,html.nb-uplift .step:hover .ic,
html.nb-uplift .sec-band:hover .ic,html.nb-uplift .pk:hover .pk-logo,
html.nb-uplift a:hover>.m-ic,html.nb-uplift a:hover>.ic,
html.nb-uplift .s-ic:hover,html.nb-uplift .m-ic:hover,html.nb-uplift .ic:hover{
  background:rgba(27,138,214,.24);color:#8ED8FF;
  box-shadow:0 0 0 1px rgba(79,195,247,.55) inset,0 10px 26px rgba(27,138,214,.3)}

/* --- 19c) ikone: ujednaceno bez obzira na kontekst --- */
html.nb-uplift .s-ic,html.nb-uplift .m-ic,html.nb-uplift .ic,html.nb-uplift .pk-logo{
  background:rgba(27,138,214,.14)!important;color:#4FC3F7!important;
  box-shadow:0 0 0 1px rgba(27,138,214,.24) inset!important}
html.nb-uplift .ck{background:rgba(27,138,214,.18)!important;color:#4FC3F7!important}
html.nb-uplift .stat:hover .s-ic,html.nb-uplift .mod:hover .m-ic,html.nb-uplift .svc:hover .ic,
html.nb-uplift .pcard:hover .ic,html.nb-uplift .metric:hover .ic,html.nb-uplift .step:hover .ic,
html.nb-uplift .sec-band:hover .ic,html.nb-uplift .protect-grid>*:hover .ic,
html.nb-uplift .pk:hover .pk-logo,html.nb-uplift a:hover>.m-ic,html.nb-uplift a:hover>.ic,
html.nb-uplift .s-ic:hover,html.nb-uplift .m-ic:hover,html.nb-uplift .ic:hover,html.nb-uplift .pk-logo:hover{
  background:rgba(27,138,214,.24)!important;color:#8ED8FF!important;
  box-shadow:0 0 0 1px rgba(79,195,247,.55) inset,0 10px 26px rgba(27,138,214,.3)!important}
html.nb-uplift .feat:hover .ck,html.nb-uplift .bullets li:hover .ck,html.nb-uplift li:hover>.ck{
  background:rgba(27,138,214,.28)!important;color:#8ED8FF!important}